/* ========================================================================== Crunchy Pup — home page only styles The home page gets the richest treatment: the Three.js "living culture" hero, scroll-driven story sections, and the big signup moment. ========================================================================== */ /* -------------------------------------------------------------------------- HERO A full-viewport opening: type on the left, the living-culture canvas filling the space behind and to the right. -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 72px; /* header height */ overflow: clip; } #culture-canvas, .culture-fallback { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .culture-fallback { display: none; } /* When motion is reduced (or WebGL fails), js/home.js adds .no-3d to : hide the canvas, show the calm static artwork instead. */ body.no-3d #culture-canvas { display: none; } body.no-3d .culture-fallback { display: block; } .culture-fallback svg { width: 100%; height: 100%; } .hero-inner { position: relative; z-index: 1; width: 100%; } .hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 0.8fr; } } .hero-copy { max-width: 640px; } .hero-photo-wrap { display: flex; justify-content: center; } .hero-photo { aspect-ratio: 4 / 5; width: 100%; max-width: 380px; } @media (min-width: 900px) { .hero-photo { max-width: 420px; } } .hero h1 { margin-bottom: 0.45em; } .hero h1 .h1-line { display: block; overflow: hidden; } .hero h1 .h1-line > span { display: inline-block; } .hero .lead { max-width: 46ch; margin-bottom: 2rem; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; } .scroll-cue { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 1; color: var(--kelp); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-decoration: none; min-height: 44px; } .scroll-cue svg { width: 16px; height: 16px; } @media (prefers-reduced-motion: no-preference) { .scroll-cue svg { animation: cue-drift 2.4s ease-in-out infinite; } } @keyframes cue-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* -------------------------------------------------------------------------- BIG PHOTO MOMENT ("these three run the house") -------------------------------------------------------------------------- */ .reason .pebble { aspect-ratio: 3 / 4; max-height: 640px; } .reason .grid-2 { align-items: center; } /* -------------------------------------------------------------------------- BIG STATEMENT (word-by-word scroll reveal, GSAP) -------------------------------------------------------------------------- */ .statement { padding-block: var(--section-gap); text-align: center; } .statement p:not(.eyebrow) { font-family: var(--font-display); font-size: clamp(1.8rem, 1.2rem + 3.4vw, 3.6rem); line-height: 1.25; max-width: 22ch; margin: 0 auto; text-wrap: balance; } .statement .word { display: inline-block; } /* -------------------------------------------------------------------------- MARSH / "MORE GOOD YEARS" WIDE IMAGE -------------------------------------------------------------------------- */ .good-years-figure { margin: 0; position: relative; border-radius: calc(var(--radius) * 1.6); overflow: hidden; box-shadow: var(--shadow); } .good-years-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; /* the parallax nudge from GSAP needs headroom */ scale: 1.12; } body.no-3d .good-years-figure img, body.reduced-motion .good-years-figure img { scale: 1; } .good-years-figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1rem, 3vw, 2rem); color: #fff; font-size: var(--text-sm); background: linear-gradient(to top, rgba(34,34,34,0.6), transparent); } /* -------------------------------------------------------------------------- KELP BAND — what we're making -------------------------------------------------------------------------- */ .making { position: relative; overflow: clip; } .making .spores { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; } .making .spores span { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--beige) 40%, var(--kelp)); } @media (prefers-reduced-motion: no-preference) { .making .spores span { animation: spore-float 9s ease-in-out infinite; } .making .spores span:nth-child(2n) { animation-duration: 12s; animation-delay: -3s; } .making .spores span:nth-child(3n) { animation-duration: 15s; animation-delay: -6s; } } @keyframes spore-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-26px) scale(1.25); } } .making-inner { position: relative; z-index: 1; } .making ul.plain-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: 0.7rem; max-width: 46ch; } .making ul.plain-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: baseline; } .making ul.plain-list li::before { content: ""; width: 9px; height: 9px; border-radius: 46% 54% 50% 50% / 55% 46% 54% 45%; background: var(--beige); opacity: 0.7; transform: translateY(-1px); } /* -------------------------------------------------------------------------- VIP TEASER -------------------------------------------------------------------------- */ .vip-teaser .pebble { aspect-ratio: 1; max-width: 420px; margin-inline: auto; } /* -------------------------------------------------------------------------- FAIR QUESTIONS (FAQ) Native

elements: keyboard and screen-reader friendly for free. -------------------------------------------------------------------------- */ .faq-list { max-width: 720px; margin-top: 2rem; border-top: 1px solid var(--line); } .faq-list details { border-bottom: 1px solid var(--line); } .faq-list summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; /* generous tap target */ padding: 0.9rem 0.25rem; font-family: var(--font-display); font-size: var(--text-lg); color: var(--kelp); } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--kelp-10); font-family: var(--font-body); font-weight: 600; transition: transform 0.25s ease; } .faq-list details[open] summary::after { content: "–"; transform: rotate(180deg); } .faq-list summary:hover { color: var(--kelp-pressed); } .faq-list details > p { padding: 0 0.25rem 1.25rem; margin: 0; max-width: 58ch; } /* -------------------------------------------------------------------------- JOIN SECTION (#join) -------------------------------------------------------------------------- */ .join { background: var(--kelp-06); } .join .grid-2 { align-items: start; } .join .signup-panel { margin-inline: auto; } @media (max-width: 819px) { .hero { min-height: 92svh; } .hero-copy { max-width: 100%; } }