/* ============================================================ FreedomLabs - landing page Built to the Figma frame "FreedomLabs-Landing-Page" (1440 × 8446). Content column: 1248px inside a 1440px frame → 96px side gutters. ============================================================ */ /* ---------- TOKENS ---------- */ :root{ /* brand */ --green-700:#17803d; /* primary: topbar, buttons, metrics, founder, CTA box */ /* Deep-green surfaces run as a gradient rather than a flat fill, mixing the logo's lighter green into the deep one. The lightest stop is held at #1a8741 because white text on it still measures 4.58:1. Range is widened by going *darker* at the other end rather than brighter, which deepens the sweep without costing legibility. */ --grad-green:linear-gradient(125deg,#14743a 0%,#17803d 46%,#1a8741 100%); --grad-green-x:linear-gradient(90deg,#14743a 0%,#17803d 50%,#1a8741 100%); --grad-green-btn:linear-gradient(125deg,#116634 0%,#17803d 52%,#1a8741 100%); --grad-green-btn-hover:linear-gradient(125deg,#0d5429 0%,#12692f 52%,#157534 100%); /* a soft pool of the bright logo green, kept away from text */ --glow-lime:radial-gradient(760px 420px at 92% 6%,rgba(117,197,30,.16),transparent 62%); --green-500:#75c51e; /* badge border, active thumb border, CTA icon chip */ --green-300:#d8ffae; /* badge fill */ --green-mint:#99ffbe; /* secondary button fill */ --green-bright:#3dff83;/* founder quote fill */ /* neutrals */ --ink:#000000; --muted:#6b6b6b; /* nav links, hero sub, section lede */ --muted-2:#717171; /* card body */ --muted-3:#52525b; /* faq answers */ --muted-4:#8a9284; /* footer */ --surface:#f5f5f5; /* how-it-works cards */ --border:#dbdbdb; --line:#ededed; --white:#ffffff; --font:'Switzer','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* layout */ --frame:1440px; /* Figma frame width */ --gutter:clamp(20px,6.6667vw,96px); --content:1248px; /* radii (Figma) */ --r-6:6px; --r-8:8px; --r-12:12px; --r-16:16px; --r-24:24px; --r-pill:999px; --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.22,.61,.36,1); --nav-h:155px; /* topbar 51 + nav row 104 */ } /* ---------- RESET ---------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } /* The wash tint also sits on so iOS overscroll rubber-banding reveals it rather than a white band above the topbar or below the footer. */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:#fbfdf9; } body{ font-family:var(--font); color:var(--ink); line-height:1.5; font-synthesis-weight:none; -webkit-font-smoothing:antialiased; /* A very light wash drawn from the logo's own greens instead of flat white. Painted straight onto and left to scroll: a fixed layer, or background-attachment:fixed, makes iOS Safari flash white bands during momentum scrolling. There is no page-wide clip either, because overflow on the scroll container is what breaks position:sticky on iOS - the two sections that need clipping do it themselves. */ background-color:#fbfdf9; background-image: radial-gradient( 900px 520px at 6% 0px, rgba(117,197,30,.13), transparent 62%), radial-gradient( 820px 470px at 100% 430px, rgba(23,128,61,.09), transparent 58%), radial-gradient(1000px 620px at 50% 100%, rgba(117,197,30,.10), transparent 60%); background-repeat:no-repeat; background-position:0 0, 0 0, center bottom; } img,video,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } ul,ol{ list-style:none; } h1,h2,h3{ font-weight:600; letter-spacing:-.04em; line-height:1; color:var(--ink); text-wrap:balance; } :where(a,button,summary,[tabindex]):focus-visible{ outline:3px solid var(--green-500); outline-offset:3px; border-radius:4px; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip-link{ position:absolute; left:50%; translate:-50% -120%; z-index:200; background:var(--green-700); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-8) var(--r-8); font-weight:600; transition:translate .25s var(--ease); } .skip-link:focus-visible{ translate:-50% 0; } .container{ width:100%; max-width:var(--frame); margin-inline:auto; padding-inline:var(--gutter); } /* ---------- SCROLL REVEAL ---------- */ [data-anim]{ opacity:0; transition:opacity .75s var(--ease-out), translate .75s var(--ease-out), scale .75s var(--ease-out); transition-delay:calc(var(--d,0) * 90ms); } [data-anim="rise"]{ translate:0 26px; } [data-anim="fade"]{ scale:.97; } [data-anim].is-in{ opacity:1; translate:0 0; scale:1; } /* ============================================================ TOPBAR - 1440 × 51, marquee ============================================================ */ .topbar{ background:var(--grad-green-x); color:#fff; height:51px; display:flex; align-items:center; overflow:hidden; position:relative; } .topbar::before,.topbar::after{ content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; } .topbar::before{ left:0; background:linear-gradient(90deg,#14743a,rgba(20,116,58,0)); } .topbar::after{ right:0; background:linear-gradient(270deg,#1a8741,rgba(26,135,65,0)); } .topbar__viewport{ width:100%; overflow:hidden; } .topbar__track{ display:flex; align-items:center; width:max-content; animation:marquee 42s linear infinite; will-change:transform; } .topbar:hover .topbar__track, .topbar:focus-within .topbar__track{ animation-play-state:paused; } .topbar__item{ display:flex; align-items:center; white-space:nowrap; font-size:15px; font-weight:500; letter-spacing:-.01em; line-height:19px; padding-inline:28px; } .topbar__item::after{ content:""; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.55; margin-left:56px; } @keyframes marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } } /* ============================================================ NAVBAR - 1440 × 104 ============================================================ */ /* solid white - it sits above the page wash and reads as its own surface, picking up a hairline and a soft shadow once the page scrolls */ .nav{ position:sticky; top:0; z-index:100; background:var(--white); border-bottom:1px solid transparent; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); } .nav.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 26px -18px rgba(0,0,0,.45); } .nav__inner{ height:104px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .nav__logo{ flex:0 0 auto; display:block; } .nav__logo img{ width:auto; height:46px; } /* on desktop the drawer dissolves, so the link group and the CTA become direct flex children of the nav row exactly as drawn */ .nav__drawer{ display:contents; } .nav__links{ display:flex; align-items:center; gap:16px; } .nav__links a{ position:relative; padding:8px; font-size:18px; font-weight:500; line-height:26px; letter-spacing:-.02em; color:var(--muted); transition:color .2s var(--ease); } .nav__links a::after{ content:""; position:absolute; left:8px; right:8px; bottom:4px; height:2px; background:var(--green-700); border-radius:2px; scale:0 1; transform-origin:left; transition:scale .32s var(--ease); } .nav__links a:hover{ color:var(--ink); } .nav__links a:hover::after{ scale:1 1; } .nav__cta{ flex:0 0 auto; } .nav__burger{ display:none; flex-direction:column; gap:5px; padding:10px; margin-right:-10px; } .nav__burger span{ display:block; width:24px; height:2px; border-radius:2px; background:var(--ink); transition:translate .3s var(--ease), rotate .3s var(--ease), opacity .2s linear; } .nav__burger[aria-expanded="true"] span:nth-child(1){ translate:0 7px; rotate:45deg; } .nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav__burger[aria-expanded="true"] span:nth-child(3){ translate:0 -7px; rotate:-45deg; } /* ============================================================ BUTTONS - Figma: primary 295×64, secondary 243×64, pad 12 ============================================================ */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px; border-radius:var(--r-8); font-size:20px; font-weight:600; line-height:24px; letter-spacing:-.02em; white-space:nowrap; position:relative; isolation:isolate; overflow:hidden; transition:background-color .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease), translate .28s var(--ease); } .btn__label{ padding-inline:8px; } .btn__icon{ flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; border-radius:var(--r-6); transition:translate .32s var(--ease), background-color .28s var(--ease); } .btn__icon svg{ width:20px; height:20px; } .btn:hover{ translate:0 -2px; } .btn:active{ translate:0 0; } /* sheen */ .btn::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%); translate:-120% 0; transition:translate .7s var(--ease); } .btn:hover::after{ translate:120% 0; } .btn--primary{ background:var(--grad-green-btn); color:#fff; } .btn--primary:hover{ background:var(--grad-green-btn-hover); box-shadow:0 14px 28px -14px rgba(23,128,61,.7); } .btn--primary .btn__icon{ color:#fff; } .btn--primary:hover .btn__icon{ translate:3px 0; } /* nav + CTA variant: icon sits in a filled chip */ .btn--boxed.btn--primary .btn__icon{ background:var(--white); color:var(--ink); } .btn--boxed.btn--primary:hover .btn__icon{ background:var(--green-300); } /* navbar size - Figma 251 × 56 */ .nav__cta{ padding:8px; font-size:16px; line-height:19px; } .btn--mint{ background:var(--green-mint); color:var(--green-700); box-shadow:inset 0 0 0 2px var(--green-700); } .btn--mint:hover{ background:#7dffab; box-shadow:inset 0 0 0 2px var(--green-700), 0 14px 28px -16px rgba(23,128,61,.6); } .btn--mint .btn__icon{ color:var(--green-700); } .btn--mint:hover .btn__icon{ translate:2px -2px; } .btn--outline{ background:var(--white); color:var(--green-700); box-shadow:inset 0 0 0 2px var(--green-500); } .btn--outline:hover{ background:var(--green-300); } .btn--boxed.btn--outline .btn__icon{ background:var(--green-500); color:#fff; } .btn--boxed.btn--outline:hover .btn__icon{ background:var(--green-700); translate:3px 0; } /* ---------- BADGE - Figma 38px tall, 12/8 padding ---------- */ /* A badge is a label, not a heading - it hugs its text and stays well below the headline in the type scale at every width. 18/22 hits the Figma 38px pill exactly on desktop; it scales down rather than wrapping on phones. */ .badge{ display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 14px; border-radius:var(--r-pill); background:var(--green-300); border:1px solid var(--green-500); color:var(--green-700); font-size:clamp(12.5px,1.25vw,18px); font-weight:500; line-height:1.22; letter-spacing:normal; text-align:center; text-wrap:balance; } .badge--onGreen{ border-color:var(--green-300); } /* ============================================================ HERO - section 1440 × 704 copy 612 wide @ x96 · visual 526×584 @ x818 ============================================================ */ /* Columns are pinned to their Figma widths and the 110px gutter absorbs the scrollbar, so the headline always keeps its designed two-line break. */ .hero{ display:grid; grid-template-columns:minmax(0,612px) minmax(0,526px); justify-content:space-between; column-gap:40px; /* floor; space-between opens it to ~110 */ align-items:center; padding-block:60px; min-height:704px; } .hero__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:40px; } .hero__head{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; } .hero h1{ font-size:clamp(34px,3.89vw,56px); line-height:1; letter-spacing:-.04em; text-wrap:wrap; /* explicit .br-lg keeps Figma's two-line break */ } /* designer-set line break, desktop only */ .br-lg{ display:none; } @media (min-width:1181px){ .br-lg{ display:inline; } } .hero__sub{ font-size:clamp(17px,1.667vw,24px); font-weight:500; line-height:1.2083; letter-spacing:-.02em; color:var(--muted); max-width:612px; } .hero__actions{ display:flex; flex-wrap:wrap; gap:20px; } .hero__visual{ justify-self:end; width:100%; max-width:526px; } .hero__frame{ position:relative; width:100%; aspect-ratio:526/584; border-radius:var(--r-16); overflow:hidden; background:var(--surface); } .hero__photo{ width:100%; height:100%; object-fit:cover; object-position:65% 100%; animation:heroDrift 18s var(--ease) infinite alternate; } @keyframes heroDrift{ from{ scale:1; } to{ scale:1.045; } } /* --- stacked notifications (Figma: 5 cards, 20px step, widening) --- */ .notif{ position:absolute; left:2.4%; right:2.4%; bottom:2.7%; height:202px; } /* Figma stacks five SOLID cards, each 20px higher and slightly narrower than the one in front. Only the top 20px of a back card is ever exposed and that band is pure padding - so no transparency, no blur, no scaling. */ .notif__card{ position:absolute; left:50%; bottom:0; width:100%; overflow:hidden; display:flex; align-items:flex-start; gap:16px; padding:20px; border-radius:var(--r-12); background:var(--white); border:1px solid var(--border); box-shadow:0 14px 34px -20px rgba(0,0,0,.5); translate:-50% 0; transition:translate .55s var(--ease), width .55s var(--ease); will-change:translate,width; } /* depth: 0 = front card */ .notif__card[data-depth="0"]{ width:100%; translate:-50% 0; z-index:4; } .notif__card[data-depth="1"]{ width:97%; translate:-50% -18px; z-index:3; } .notif__card[data-depth="2"]{ width:94%; translate:-50% -36px; z-index:2; } .notif__card[data-depth="3"]{ width:91%; translate:-50% -54px; z-index:1; } /* content lives on the front card only, so a receding card never flashes text */ .notif__card > *{ transition:opacity .25s var(--ease); } .notif__card:not([data-depth="0"]) > *{ opacity:0; } @media (min-width:641px){ .notif__card{ min-height:122px; } } .notif__icon{ flex:0 0 auto; width:40px; height:40px; border-radius:var(--r-8); display:grid; place-items:center; background:var(--green-300); color:var(--green-700); } .notif__icon svg{ width:22px; height:22px; } .notif__text{ flex:1 1 auto; min-width:0; padding-top:1px; } .notif__text strong{ display:block; font-size:18px; font-weight:600; line-height:26px; letter-spacing:-.02em; } .notif__text > span{ display:block; margin-top:4px; font-size:15px; font-weight:500; line-height:26px; color:var(--muted-2); } .notif__meta{ flex:0 0 auto; text-align:right; } .notif__meta b{ display:block; font-size:13px; font-weight:600; line-height:17px; color:var(--green-700); } .notif__meta span{ display:block; font-size:12px; font-weight:500; line-height:17px; color:var(--muted-2); } /* ============================================================ METRICS - 1440 × 328, green ============================================================ */ .metrics{ position:relative; isolation:isolate; background:var(--grad-green); color:#fff; padding-block:48px; } .metrics::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--glow-lime); } .metrics__lede{ max-width:560px; margin:0 auto 48px; text-align:center; font-size:clamp(22px,2.22vw,32px); font-weight:500; line-height:1.25; letter-spacing:-.02em; } .metrics__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; } .metric{ display:flex; flex-direction:column; align-items:center; gap:8px; } .metric__num{ font-size:clamp(40px,5vw,72px); font-weight:500; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; } .metric__label{ font-size:clamp(15px,1.39vw,20px); font-weight:400; letter-spacing:-.02em; color:rgba(255,255,255,.9); } /* ============================================================ PROBLEM - 1440 × 764, scrubbed lines ============================================================ */ /* the rotateX entrance tips each line toward the viewer, which magnifies it a few px wider than the column - clip at the section edge so it never adds horizontal scroll */ .problem{ padding-block:72px; text-align:center; overflow-x:clip; } .problem__title{ max-width:824px; margin-inline:auto; font-size:clamp(28px,3.33vw,48px); line-height:1; } /* Scrubbed lines - the page scrolls normally, and each line tumbles up out of the blur then scrubs from faint to solid as it crosses the viewport. No pinning, so there is no dead space above or below the list. */ .plines{ margin-top:60px; display:flex; flex-direction:column; align-items:center; gap:32px; perspective:800px; perspective-origin:50% 50%; } .pline{ max-width:612px; font-size:clamp(20px,2.22vw,32px); font-weight:500; line-height:1.1875; letter-spacing:-.02em; transform-origin:50% 100%; /* entrance - set by JS once the line first appears */ opacity:.25; translate:0 26px; rotate:x -55deg; filter:blur(6px); transition:opacity .7s cubic-bezier(.34,1.56,.64,1), translate .7s cubic-bezier(.34,1.56,.64,1), rotate .7s cubic-bezier(.34,1.56,.64,1), filter .55s var(--ease); will-change:translate,rotate,opacity; } .pline.is-in{ opacity:1; translate:0 0; rotate:x 0deg; filter:blur(0); } /* The scrub rides `color`, which is deliberately NOT in the transition list - it has to track the scroll position exactly, while the entrance above keeps its own eased timing. */ .plines[data-scrub="dark"] .pline{ color:rgb(var(--rgb,207 207 207)); } .plines[data-scrub="light"] .pline{ color:rgb(255 255 255 / calc(.45 + .55 * var(--lit,0))); } .plines--left{ align-items:flex-start; margin-top:0; perspective-origin:0% 50%; } .plines--left .pline{ text-align:left; max-width:none; transform-origin:0% 100%; } /* ============================================================ HOW IT WORKS - 1440 × 706, 3 × 400 cards, 24 gap ============================================================ */ .how{ padding-block:72px; } .how__title{ max-width:824px; margin:0 auto 60px; text-align:center; font-size:clamp(28px,3.33vw,48px); line-height:1; } .how__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .how__card{ background:var(--surface); border-radius:var(--r-12); padding:24px; min-height:454px; display:flex; flex-direction:column; gap:40px; transition:translate .4s var(--ease), box-shadow .4s var(--ease), background-color .4s var(--ease); } .how__card:hover{ translate:0 -8px; background:#f0f0f0; box-shadow:0 28px 48px -28px rgba(0,0,0,.28); } .how__text{ display:flex; flex-direction:column; gap:16px; } .how__text h3{ font-size:clamp(24px,2.22vw,32px); line-height:1; } .how__text p{ font-size:18px; font-weight:500; line-height:26px; letter-spacing:-.01em; color:var(--muted-2); } .how__art{ width:240px; height:240px; margin:auto auto 0; object-fit:contain; transition:scale .5s var(--ease), rotate .5s var(--ease); } .how__card:hover .how__art{ scale:1.06; rotate:-2deg; } /* ============================================================ TESTIMONIALS ============================================================ */ .testi{ padding-block:72px; } .testi__head{ max-width:612px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; } .testi__head h2{ font-size:clamp(28px,3.33vw,48px); line-height:1; } .testi__head p{ margin-top:16px; font-size:clamp(17px,1.667vw,24px); font-weight:500; line-height:1.2083; letter-spacing:-.02em; color:var(--muted); } /* --- video marquee: 496 cards, 24 gap, right → left --- */ .vmarquee{ margin-top:60px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 98%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 98%,transparent 100%); } .vmarquee__track{ display:flex; gap:24px; width:max-content; animation:marquee 48s linear infinite; will-change:transform; } .vmarquee:hover .vmarquee__track, .vmarquee:focus-within .vmarquee__track{ animation-play-state:paused; } .vcard{ flex:0 0 auto; width:496px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-12); padding:8px; display:flex; flex-direction:column; transition:box-shadow .35s var(--ease), translate .35s var(--ease), border-color .35s var(--ease); } .vcard:hover{ translate:0 -4px; border-color:var(--border); box-shadow:0 22px 44px -26px rgba(0,0,0,.35); } .vcard__thumb{ position:relative; display:block; width:100%; aspect-ratio:16/9; border-radius:var(--r-8); overflow:hidden; background:#0d1f14 center/cover no-repeat; background-image:linear-gradient(150deg,#1c6b3b,#0d3a20); } .vcard__thumb img{ width:100%; height:100%; object-fit:cover; } .vcard__thumb iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .vcard__play{ position:absolute; inset:0; margin:auto; width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.94); color:var(--green-700); box-shadow:0 10px 26px -10px rgba(0,0,0,.5); transition:scale .3s var(--ease), background-color .3s var(--ease); } .vcard__play svg{ width:24px; height:24px; margin-left:3px; } .vcard__thumb:hover .vcard__play{ scale:1.1; background:#fff; } /* flex:1 so a short title does not leave dead white space at the bottom of a card that has been stretched to match a taller sibling */ .vcard__foot{ flex:1 1 auto; min-height:105px; padding:24px 16px; display:flex; flex-direction:column; justify-content:flex-start; gap:12px; } .vcard__title{ font-size:18px; font-weight:500; line-height:24px; letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .vcard__src{ margin-top:auto; } .vcard__src{ display:flex; align-items:center; gap:8px; font-size:13px; line-height:16px; color:var(--muted-2); } .vcard__yt{ width:16px; height:16px; flex:0 0 auto; } /* --- screenshot proof: 551 + 24 + 673, cropped to 600 --- */ .proof{ margin-top:40px; display:flex; flex-direction:column; gap:40px; } .proof__group{ display:grid; grid-template-columns:551fr 673fr; gap:24px; } /* a conversation with no matching post: centred at the chat column width and run taller, so it reads as a deliberate closing beat rather than a gap */ .proof__group--solo{ grid-template-columns:minmax(0,673px); justify-content:center; } .proof__group--solo .proof__shot{ height:820px; } .proof__shot{ position:relative; display:block; width:100%; padding:0; height:600px; border-radius:var(--r-12); overflow:hidden; background:#0f0f0f; cursor:zoom-in; transition:translate .4s var(--ease), box-shadow .4s var(--ease); } .proof__shot:hover{ translate:0 -6px; box-shadow:0 30px 60px -34px rgba(0,0,0,.6); } .proof__shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; } /* Always-visible affordance - most visitors are on touch, where a hover-only cue is invisible, so the screenshots have to announce that they open. */ .proof__shot::after{ content:""; position:absolute; inset:auto 0 0; height:120px; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(0,0,0,.72)); } .proof__hint{ position:absolute; left:50%; bottom:16px; translate:-50% 0; z-index:1; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--r-pill); background:rgba(255,255,255,.96); color:var(--ink); font-size:14px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; box-shadow:0 10px 24px -10px rgba(0,0,0,.7); transition:background-color .25s var(--ease), scale .25s var(--ease); } .proof__hint svg{ width:16px; height:16px; flex:0 0 auto; } .proof__shot:hover .proof__hint, .proof__shot:focus-visible .proof__hint{ background:var(--green-300); scale:1.04; } /* a gentle pulse on touch, where there is no hover to discover it with */ @media (hover:none){ .proof__hint{ animation:hintPulse 2.6s var(--ease) infinite; } @keyframes hintPulse{ 0%,72%,100%{ scale:1; box-shadow:0 10px 24px -10px rgba(0,0,0,.7); } 84%{ scale:1.06; box-shadow:0 12px 28px -8px rgba(0,0,0,.8); } } } /* ============================================================ FOUNDER - 1440 × 966, green inner column 1029 wide: 426 gallery + 36 gap + rest ============================================================ */ .founder{ position:relative; isolation:isolate; background:var(--grad-green); color:#fff; padding-block:75px; overflow-x:clip; } /* bright pool sits bottom-left, behind the photo rather than under the copy */ .founder::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(820px 520px at 8% 96%,rgba(117,197,30,.17),transparent 62%); } .founder__inner{ max-width:1032px; margin-inline:auto; display:grid; grid-template-columns:426px 1fr; gap:36px; align-items:start; } .founder__stage{ position:relative; width:100%; aspect-ratio:426/566; border-radius:var(--r-12); overflow:hidden; background:rgba(0,0,0,.16); } .founder__main, .founder__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s var(--ease), scale .6s var(--ease); pointer-events:none; } .founder__main{ object-position:60% 72%; } .founder__main.is-active, .founder__video.is-active{ opacity:1; pointer-events:auto; } .founder__video{ background:#000; object-fit:cover; object-position:center 32%; } .founder__playbtn{ position:absolute; inset:0; margin:auto; z-index:3; width:76px; height:76px; display:none; place-items:center; border-radius:50%; background:rgba(255,255,255,.94); color:var(--green-700); box-shadow:0 14px 34px -12px rgba(0,0,0,.6); transition:scale .3s var(--ease), background-color .3s var(--ease); } .founder__playbtn svg{ width:30px; height:30px; margin-left:4px; } .founder__playbtn:hover{ scale:1.08; background:#fff; } .founder__stage.is-video .founder__playbtn{ display:grid; } .founder__stage.is-playing .founder__playbtn, .founder__stage.is-error .founder__playbtn{ display:none; } .founder__videoerr{ position:absolute; inset:auto 16px 16px; z-index:4; display:none; background:rgba(0,0,0,.78); color:#fff; border-radius:var(--r-8); padding:12px 14px; font-size:14px; font-weight:500; line-height:1.4; text-align:center; } .founder__videoerr a{ color:var(--green-bright); text-decoration:underline; text-underline-offset:3px; } .founder__stage.is-error .founder__videoerr{ display:block; } .founder__thumbs{ margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .founder__thumb{ position:relative; aspect-ratio:131/120; border-radius:var(--r-8); overflow:hidden; background:rgba(0,0,0,.2); transition:translate .3s var(--ease), opacity .3s var(--ease); opacity:.72; } /* an inset shadow renders *behind* the thumbnail image, so the active ring is drawn as an overlay instead */ .founder__thumb::after{ content:""; position:absolute; inset:0; border-radius:inherit; border:3px solid transparent; pointer-events:none; transition:border-color .3s var(--ease); } .founder__thumb.is-active::after{ border-color:var(--green-500); } .founder__thumb img{ width:100%; height:100%; object-fit:cover; object-position:60% 72%; } .founder__thumb--video img{ object-position:center 32%; } .founder__thumb:hover{ translate:0 -3px; opacity:1; } .founder__thumb.is-active{ opacity:1; } .founder__thumb--video{ background:#0d1f14; } .founder__thumbplay{ position:absolute; inset:0; margin:auto; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.92); color:var(--green-700); transition:scale .3s var(--ease); } .founder__thumbplay svg{ width:16px; height:16px; margin-left:2px; } .founder__thumb--video:hover .founder__thumbplay{ scale:1.12; } .founder__copy{ display:flex; flex-direction:column; gap:32px; padding-top:0; } .founder__head{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; } .founder__copy h2{ color:#fff; font-size:clamp(34px,3.33vw,48px); line-height:1; } .founder__quote{ background:var(--green-bright); color:var(--green-700); border-radius:var(--r-12); padding:24px; font-size:clamp(19px,1.667vw,24px); font-weight:500; line-height:1.25; letter-spacing:-.02em; } /* the founder list is the same 32/38 type as the problem list */ .founder__copy .plines{ gap:32px; width:100%; } /* ============================================================ FAQ - 612 column ============================================================ */ .faq{ padding-block:72px; } .faq__head{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; margin-bottom:60px; } .faq__head h2{ max-width:612px; font-size:clamp(26px,3.33vw,48px); line-height:1; } .faq__list{ max-width:612px; margin-inline:auto; display:flex; flex-direction:column; gap:23px; } .acc{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-8); transition:border-color .3s var(--ease), box-shadow .3s var(--ease); } .acc:hover{ border-color:#c4c4c4; } .acc.is-open{ box-shadow:0 10px 30px -22px rgba(0,0,0,.4); } .acc__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px; text-align:left; font-size:18px; font-weight:500; line-height:22px; letter-spacing:-.01em; } .acc__sign{ position:relative; flex:0 0 auto; width:28px; height:28px; } .acc__sign::before,.acc__sign::after{ content:""; position:absolute; top:50%; left:50%; background:var(--ink); border-radius:2px; transition:rotate .38s var(--ease), opacity .28s var(--ease), scale .38s var(--ease); } .acc__sign::before{ width:15px; height:1.8px; translate:-50% -50%; } .acc__sign::after{ width:1.8px; height:15px; translate:-50% -50%; } .acc.is-open .acc__sign::before{ rotate:135deg; } .acc.is-open .acc__sign::after{ rotate:135deg; } /* Height is animated in JS (Web Animations API) from the measured content. `0fr → 1fr` and plain height transitions both stall in Chrome when panels are toggled in quick succession, so the animation is driven explicitly. */ .acc__panel{ height:0; overflow:hidden; } .acc__inner p{ border-top:1px solid var(--line); margin:0 12px; padding:13px 0 12px; font-size:15px; font-weight:400; line-height:22px; color:var(--muted-3); opacity:0; translate:0 -6px; transition:opacity .35s var(--ease) .06s, translate .35s var(--ease) .06s; } .acc.is-open .acc__inner p{ opacity:1; translate:0 0; } /* ============================================================ FINAL CTA - box 1248 × 455, radius 24, grid backdrop ============================================================ */ .cta{ padding-block:48px; } .cta__box{ position:relative; isolation:isolate; overflow:hidden; background:var(--grad-green); border-radius:var(--r-24); min-height:455px; display:grid; place-items:center; padding:72px var(--gutter); } .cta__grid{ position:absolute; inset:0; z-index:0; pointer-events:none; --cell:93.5px; } .cta__lines{ position:absolute; inset:-1px; background-image: linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px); background-size:var(--cell) var(--cell); /* lines run edge to edge as designed; only eased back behind the copy so the grid never competes with the heading */ -webkit-mask-image:radial-gradient(46% 62% at 50% 50%, rgba(0,0,0,.45), #000 78%); mask-image:radial-gradient(46% 62% at 50% 50%, rgba(0,0,0,.45), #000 78%); } .cta__blocks{ position:absolute; inset:0; } .cta__blocks span{ position:absolute; left:calc(var(--c) * var(--cell)); top:calc(var(--r) * var(--cell)); width:calc(var(--w) * var(--cell)); height:calc(var(--h) * var(--cell)); background:#fff; opacity:var(--o); animation:blockPulse 9s ease-in-out infinite; animation-delay:calc(var(--c) * -.7s); } @keyframes blockPulse{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.9); } } .cta__content{ position:relative; z-index:1; max-width:550px; text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center; gap:32px; } .cta__content h2{ color:#fff; font-size:clamp(28px,3.33vw,48px); line-height:1; } .cta__content p{ font-size:clamp(17px,1.667vw,24px); font-weight:500; line-height:1.2083; letter-spacing:-.02em; } /* ============================================================ FOOTER - 1440 × 271 ============================================================ */ .foot{ padding-block:48px; } .foot__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; } .foot__label{ font-size:clamp(18px,1.667vw,24px); font-weight:500; letter-spacing:-.02em; color:var(--muted-4); line-height:29px; } .foot__mail{ display:flex; align-items:center; gap:12px; margin-top:16px; max-width:100%; } .foot__mail a{ font-size:clamp(17px,2.22vw,32px); font-weight:500; letter-spacing:-.02em; line-height:36px; min-width:0; overflow-wrap:anywhere; background-image:linear-gradient(var(--ink),var(--ink)); background-size:0% 1.5px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .38s var(--ease); } .foot__mail a:hover{ background-size:100% 1.5px; } .foot__copy{ position:relative; width:36px; height:36px; display:grid; place-items:center; color:var(--muted-4); transition:color .25s var(--ease); } .foot__copy svg{ width:24px; height:24px; } .foot__copy:hover{ color:var(--ink); } /* anchored right so it cannot run off a narrow screen */ .foot__copied{ position:absolute; bottom:calc(100% + 6px); right:0; translate:0 4px; background:var(--ink); color:#fff; font-size:12px; font-weight:500; line-height:1; padding:6px 8px; border-radius:var(--r-6); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .25s var(--ease), translate .25s var(--ease); } .foot__copy.is-copied .foot__copied{ opacity:1; translate:0 0; } .foot__social{ display:flex; gap:24px; } .foot__icon{ width:48px; height:48px; border:1px solid var(--border); border-radius:50%; display:grid; place-items:center; transition:background-color .28s var(--ease), border-color .28s var(--ease), translate .28s var(--ease); } .foot__icon img{ width:24px; height:24px; transition:filter .28s var(--ease); } .foot__icon:hover{ background:var(--green-700); border-color:var(--green-700); translate:0 -3px; } .foot__icon:hover img{ filter:brightness(0) invert(1); } .foot__rule{ border:0; border-top:1px solid var(--line); margin-block:32px; } .foot__address{ text-align:center; font-style:normal; color:var(--muted-4); font-size:clamp(15px,1.25vw,18px); font-weight:500; letter-spacing:-.02em; margin-bottom:8px; } .foot__legal{ display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap; text-align:center; color:var(--muted-4); font-size:clamp(15px,1.39vw,20px); font-weight:500; letter-spacing:-.02em; line-height:29px; } .foot__legal svg{ width:1.2em; height:1.2em; flex:0 0 auto; } /* ============================================================ RESPONSIVE ============================================================ */ /* below the point where the 612 + 526 hero columns still fit at full size */ @media (max-width:1180px){ .hero{ grid-template-columns:minmax(0,612px); justify-content:center; row-gap:48px; padding-block:48px; min-height:0; } .hero__copy{ margin-inline:auto; } .hero__visual{ order:-1; justify-self:center; } .founder__inner{ grid-template-columns:380px 1fr; gap:32px; } .vcard{ width:420px; } } /* the nav row needs ~1050px for logo + links + CTA */ @media (max-width:1120px){ .nav__burger{ display:flex; margin-left:auto; } .nav__drawer{ display:flex; flex-direction:column; align-items:stretch; gap:0; position:absolute; left:0; right:0; top:100%; background:var(--white); border-bottom:1px solid var(--line); padding:8px var(--gutter) 20px; box-shadow:0 20px 30px -24px rgba(0,0,0,.45); opacity:0; translate:0 -10px; pointer-events:none; transition:opacity .3s var(--ease), translate .3s var(--ease); } .nav__drawer.is-open{ opacity:1; translate:0 0; pointer-events:auto; } .nav__links{ flex-direction:column; align-items:stretch; gap:0; } .nav__links a{ padding:14px 8px; border-bottom:1px solid var(--line); font-size:17px; } .nav__links a:last-child{ border-bottom:0; } .nav__links a::after{ display:none; } /* full-width CTA at the bottom of the drawer */ .nav__cta{ width:100%; margin-top:16px; justify-content:space-between; font-size:18px; line-height:24px; padding:12px; } } @media (max-width:1024px){ :root{ --nav-h:143px; } .metrics__grid{ grid-template-columns:repeat(2,1fr); gap:40px 24px; } .how__grid{ grid-template-columns:1fr 1fr; } .how__card{ min-height:0; } .founder__inner{ grid-template-columns:1fr; max-width:560px; gap:40px; } .proof__group{ grid-template-columns:1fr; gap:16px; } .proof__shot{ height:auto; aspect-ratio:16/11; } .proof__group--solo .proof__shot{ height:auto; aspect-ratio:673/820; } .proof__shot--post img{ object-position:top left; } } @media (max-width:860px){ .how__grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } } @media (max-width:640px){ /* --- type scale: headline dominates, badge recedes to a label --- */ .badge{ min-height:0; padding:6px 13px; } /* ~30px tall, hugs its text */ .hero h1{ font-size:32px; letter-spacing:-.035em; } .problem__title,.how__title,.testi__head h2,.faq__head h2,.cta__content h2{ font-size:26px; } .founder__copy h2{ font-size:30px; } .metrics__lede{ font-size:20px; } .metric__num{ font-size:38px; } .metric__label{ font-size:14px; } .hero__sub,.testi__head p,.cta__content p{ font-size:16px; line-height:1.4; } .pline{ font-size:19px; line-height:1.32; } .founder__quote{ font-size:18px; padding:18px; } .how__text h3{ font-size:22px; } .how__text p{ font-size:15.5px; line-height:22px; } .acc__q{ font-size:16px; } .acc__inner p{ font-size:14.5px; line-height:21px; } .vcard__title{ font-size:16px; } .foot__label{ font-size:16px; } .foot__mail a{ font-size:20px; } .foot__legal{ font-size:15px; } /* --- rhythm: one consistent 48px band between sections --- */ .hero{ padding-block:28px 48px; row-gap:36px; } .metrics{ padding-block:48px; } .problem,.how,.testi,.faq{ padding-block:48px; } .founder{ padding-block:48px; } .cta{ padding-block:32px; } .foot{ padding-block:40px; } .plines{ margin-top:40px; gap:26px; } .problem__title,.how__title{ margin-bottom:0; } .how__title{ margin-bottom:40px; } .faq__head{ margin-bottom:40px; } .metrics__lede{ margin-bottom:36px; } .vmarquee,.proof{ margin-top:36px; } .testi__head p{ margin-top:12px; } .nav__inner{ height:76px; gap:10px; } .nav__logo img{ height:32px; } .nav__burger{ margin-left:auto; } /* buttons: keep the nowrap label inside a 375px screen */ .btn{ font-size:17px; padding:10px; } .btn__icon{ width:36px; height:36px; } .btn__icon svg{ width:18px; height:18px; } /* keep the grid blocks inside the narrow CTA box */ .cta__blocks span:nth-child(1){ --c:1; --r:0; } .cta__blocks span:nth-child(2){ --c:0; --r:2; } .cta__blocks span:nth-child(3){ --c:2; --r:3; } .cta__blocks span:nth-child(4){ --c:0; --r:4; } .cta__blocks span:nth-child(5){ --c:2; --r:1; } .cta__blocks span:nth-child(6){ --c:1; --r:5; } .topbar::before,.topbar::after{ width:32px; } .topbar__item{ font-size:13.5px; padding-inline:16px; } .topbar__item::after{ margin-left:32px; } .hero__copy{ gap:28px; } .hero__actions{ width:100%; gap:12px; } .hero__actions .btn{ flex:1 1 100%; } .notif{ height:auto; top:auto; left:3.5%; right:3.5%; bottom:3.5%; } .notif__card{ padding:12px; gap:10px; border-radius:10px; } .notif__icon{ width:32px; height:32px; border-radius:6px; } .notif__icon svg{ width:17px; height:17px; } .notif__text strong{ font-size:14px; line-height:18px; letter-spacing:-.01em; } .notif__text > span{ margin-top:2px; font-size:11.5px; line-height:15px; } .notif__meta b{ font-size:11px; line-height:14px; } .notif__meta span{ font-size:9.5px; line-height:12px; } .notif__card[data-depth="1"]{ translate:-50% -13px; } .notif__card[data-depth="2"]{ translate:-50% -26px; } .notif__card[data-depth="3"]{ translate:-50% -39px; } .metrics__grid{ gap:32px 16px; } .vcard{ width:300px; } .vcard__foot{ min-height:0; padding:16px 12px; gap:10px; } .vmarquee{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); } .founder__copy{ gap:24px; } .founder__copy .plines{ gap:22px; } .cta__box{ padding:40px 20px; min-height:0; } .cta__content{ gap:24px; } .cta__content .btn{ width:100%; justify-content:space-between; } .proof__hint{ bottom:12px; padding:9px 14px; font-size:13px; } .proof__shot{ aspect-ratio:4/3; } .proof__group--solo .proof__shot{ aspect-ratio:3/4; } .foot__top{ flex-direction:column; align-items:flex-start; gap:28px; } .foot__social{ gap:16px; } .foot__rule{ margin-block:24px; } } /* very narrow phones */ @media (max-width:380px){ .btn{ font-size:16px; } .notif__meta{ display:none; } .cta__content h2{ font-size:26px; } } /* ============================================================ BOOKING MODAL ============================================================ */ .bk{ position:fixed; inset:0; z-index:210; display:grid; place-items:center; padding:clamp(12px,3vw,32px); opacity:0; transition:opacity .3s var(--ease); } .bk[hidden]{ display:none; } .bk.is-open{ opacity:1; } .bk__backdrop{ position:absolute; inset:0; background:rgba(6,20,11,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .bk__panel{ position:relative; z-index:1; width:min(1000px,100%); height:min(760px,92vh); display:flex; flex-direction:column; background:var(--white); border-radius:var(--r-16); overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.55); translate:0 12px; scale:.985; transition:translate .35s var(--ease), scale .35s var(--ease); } .bk.is-open .bk__panel{ translate:0 0; scale:1; } .bk__head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px clamp(16px,3vw,28px); border-bottom:1px solid var(--line); background:var(--white); } .bk__eyebrow{ font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--green-700); } .bk__title{ font-size:clamp(20px,2.4vw,28px); line-height:1.1; margin-top:2px; } .bk__close{ flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--surface); color:var(--ink); transition:background-color .25s var(--ease), rotate .25s var(--ease); } .bk__close svg{ width:22px; height:22px; } .bk__close:hover{ background:var(--green-300); rotate:90deg; } .bk__embed{ flex:1 1 auto; position:relative; min-height:0; background:var(--white); } .bk__embed iframe, .bk__embed .calendly-inline-widget{ width:100%; height:100%; border:0; } .bk__loading{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:24px; color:var(--muted); } .bk__loading p{ font-size:15px; font-weight:500; } .bk__fallback{ font-size:14px; } .bk__fallback a{ color:var(--green-700); text-decoration:underline; text-underline-offset:3px; } .bk__spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--green-700); animation:bkSpin .8s linear infinite; } @keyframes bkSpin{ to{ rotate:360deg; } } @media (max-width:640px){ .bk{ padding:0; } .bk__panel{ width:100%; height:100%; border-radius:0; } } /* ============================================================ LIGHTBOX ============================================================ */ .lb{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; opacity:0; transition:opacity .3s var(--ease); } .lb[hidden]{ display:none; } .lb.is-open{ opacity:1; } .lb__backdrop{ position:absolute; inset:0; background:rgba(6,14,9,.93); cursor:zoom-out; } .lb__figure{ position:relative; z-index:1; margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; max-width:min(1100px,92vw); max-height:86vh; padding:0 8px; } .lb__stage{ display:grid; place-items:center; overflow:auto; border-radius:var(--r-12); max-height:calc(86vh - 56px); background:#0f0f0f; -webkit-overflow-scrolling:touch; touch-action:pan-y; } .lb__img{ max-width:100%; width:auto; height:auto; opacity:0; scale:.97; transition:opacity .3s var(--ease), scale .3s var(--ease); } .lb__img.is-ready{ opacity:1; scale:1; } .lb__cap{ color:rgba(255,255,255,.86); font-size:15px; font-weight:500; line-height:1.4; text-align:center; max-width:60ch; } .lb__count{ position:absolute; z-index:1; top:24px; left:50%; translate:-50% 0; color:rgba(255,255,255,.6); font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; } .lb__btn{ position:absolute; z-index:2; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background-color .25s var(--ease), scale .25s var(--ease); } .lb__btn svg{ width:24px; height:24px; } .lb__btn:hover{ background:rgba(255,255,255,.22); scale:1.06; } .lb__close{ top:24px; right:24px; } .lb__nav--prev{ left:24px; top:50%; translate:0 -50%; } .lb__nav--next{ right:24px; top:50%; translate:0 -50%; } .lb__nav--prev:hover,.lb__nav--next:hover{ scale:1; background:rgba(255,255,255,.22); } body.lb-open{ overflow:hidden; } @media (max-width:768px){ .lb__figure{ max-width:96vw; max-height:78vh; } .lb__stage{ max-height:calc(78vh - 56px); } /* close moves to the bottom on mobile, out of the way of the notch */ .lb__close{ top:auto; right:auto; bottom:calc(24px + env(safe-area-inset-bottom)); left:50%; translate:-50% 0; } .lb__nav{ width:46px; height:46px; } .lb__nav--prev{ left:10px; } .lb__nav--next{ right:10px; } .lb__count{ top:16px; } .lb__cap{ font-size:14px; padding-inline:12px; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } [data-anim]{ opacity:1 !important; translate:none !important; scale:none !important; } .pline{ opacity:1 !important; translate:none !important; rotate:none !important; filter:none !important; } .topbar__track,.vmarquee__track{ animation:none; } .vmarquee{ overflow-x:auto; } .proof__hint{ animation:none; } }