/* ============================================================ 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); /* One scale for every section, so headings and leads line up down the page instead of each block picking its own size and width. */ --h2:clamp(28px,3.33vw,48px); --lead:clamp(16px,1.53vw,20px); --head-w:820px; /* centred heading column */ --lead-w:620px; /* centred paragraph column, narrower on purpose */ --head-gap:clamp(32px,3.4vw,48px); --sec-pad:clamp(48px,5.6vw,72px); } /* ---------- 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); } /* Trimmed from the Figma's 104/46: on a 1366x768 screen the original bar ate too much of the fold. */ .nav__inner{ height:82px; 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:36px; } /* 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:6px 8px; font-size:15.5px; font-weight:500; line-height:22px; letter-spacing:-.01em; 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:6px; font-size:14px; line-height:18px; } .nav__cta .btn__icon{ width:32px; height:32px; } .nav__cta .btn__icon svg{ width:16px; height:16px; } .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__slides{ position:absolute; inset:0; } /* Cross-fade only: opacity is cheap to composite and never reflows, so the swap stays smooth even while the notification stack is animating over it. */ .hero__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--op,center); opacity:0; transition:opacity .9s var(--ease-out); /* --zo anchors the zoom low in the frame, so a --z above 1 eats the dead space above the subject instead of trimming evenly top and bottom. --dx then slides the zoomed photo sideways to centre an off-centre subject. It is a separate property from `scale`, so the drift keyframes leave it alone and the nudge stays put while the zoom breathes. */ transform-origin:var(--zo,center); translate:var(--dx,0) 0; will-change:opacity; } .hero__photo.is-active{ opacity:1; animation:heroDrift 18s var(--ease) infinite alternate; } /* --z is a per-photo base zoom for shots that carry too much dead space above the subject. The drift keyframes multiply it rather than replacing it, because animating `scale` would otherwise overwrite any static scale. */ @keyframes heroDrift{ from{ scale:var(--z,1); } to{ scale:calc(var(--z,1) * 1.045); } } /* --- slide indicator, below the frame --- */ .hero__dots{ display:flex; justify-content:center; align-items:center; gap:10px; margin-top:20px; min-height:24px; } .hero__dot{ position:relative; width:8px; height:8px; padding:0; border-radius:var(--r-pill); background:var(--border); transition:width .45s var(--ease), background-color .45s var(--ease); } /* the visual dot stays small; the tap target does not */ .hero__dot::after{ content:""; position:absolute; inset:-8px -6px; } .hero__dot:hover{ background:#bdbdbd; } .hero__dot.is-active{ width:26px; background:var(--green-700); } .hero__dots[hidden]{ display:none; } /* --- stacked notifications (Figma: 5 cards, 20px step, widening) --- */ .notif{ position:absolute; left:5%; right:5%; bottom:4%; height:auto; } /* 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:12px; padding:14px 16px; border-radius:var(--r-12); background:var(--white); border:1px solid var(--border); box-shadow:0 8px 20px -14px rgba(0,0,0,.32); /* just enough to lift off the photo */ 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:96%; translate:-50% -8px; z-index:3; } .notif__card[data-depth="2"]{ width:92%; translate:-50% -16px; z-index:2; } .notif__card[data-depth="3"]{ width:88%; translate:-50% -24px; 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; } .notif__icon{ flex:0 0 auto; width:32px; height:32px; border-radius:var(--r-8); display:grid; place-items:center; background:var(--green-300); color:var(--green-700); } .notif__icon svg{ width:18px; height:18px; } .notif__text{ flex:1 1 auto; min-width:0; padding-top:1px; } .notif__text strong{ display:block; font-size:15px; font-weight:600; line-height:20px; letter-spacing:-.02em; } /* Fixed at exactly two lines, not just clamped. The cards are absolutely positioned on their bottom edge, so any height difference between them shows up as an uneven strip at the top of the stack - the descriptions are different lengths, so a clamp alone still left them ragged. */ .notif__text > span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px; height:36px; font-size:13px; font-weight:500; line-height:18px; color:var(--muted-2); } .notif__meta{ flex:0 0 auto; text-align:right; } .notif__meta b{ display:block; font-size:12px; font-weight:600; line-height:16px; color:var(--green-700); } .notif__meta span{ display:block; font-size:11px; font-weight:500; line-height:15px; color:var(--muted-2); } /* ============================================================ METRICS - 1440 × 328, green ============================================================ */ /* Sits on the page wash, not on green. Each figure gets its own card so it separates from the tinted background without another colour block. */ .metrics{ padding-block:var(--sec-pad); } /* Deliberately below --h2: in this block the figures are the message and the heading is the label above them, as in the reference. */ .metrics__title{ max-width:640px; margin:0 auto clamp(24px,2.6vw,36px); text-align:center; font-size:clamp(20px,1.94vw,28px); font-weight:600; line-height:1.15; letter-spacing:-.03em; } .metrics__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; } .metric{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:32px 20px; /* Solid white against the page's green wash - the border alone was not enough separation, and a shadow is off the table. */ background:#fff; border:1px solid #e0e6dd; border-radius:var(--r-16); transition:translate .35s var(--ease), border-color .35s var(--ease); } .metric:hover{ translate:0 -3px; border-color:#c2d4bd; } .metric__num{ font-size:clamp(36px,4.17vw,60px); font-weight:600; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--green-700); } .metric__label{ font-size:clamp(14px,1.11vw,16px); font-weight:500; letter-spacing:-.01em; color:var(--muted-2); } /* ============================================================ 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:var(--sec-pad); text-align:center; overflow-x:clip; } .problem__title{ max-width:var(--head-w); margin-inline:auto; font-size:var(--h2); 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:var(--sec-pad); } .how__title{ max-width:var(--head-w); margin:0 auto var(--head-gap); text-align:center; font-size:var(--h2); 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; } .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:var(--sec-pad); } .testi__head{ max-width:var(--head-w); margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; } /* width:100% matters here - these heads are centred flex columns, so without it the h2 shrinks to fit and text-wrap:balance breaks the line against a different width in every section. */ .testi__head h2{ width:100%; font-size:var(--h2); line-height:1; } .testi__head p{ width:100%; max-width:var(--lead-w); margin-top:8px; font-size:var(--lead); font-weight:500; line-height:1.4; letter-spacing:-.01em; color:var(--muted); } /* --- video rail: a transform ticker that is also draggable --- Driven by translate3d on a float offset rather than by scrollLeft. Nudging scrollLeft by a fraction of a pixel each frame is what made this stutter on phones: the browser rounds the assignment, so most frames moved nothing and the rest jumped. A transform takes sub-pixel values and composites on the GPU, so the motion is smooth and dragging never fights native momentum. */ /* ============================================================ VIDEO REVIEWS - own green section ============================================================ */ .vsec{ position:relative; isolation:isolate; background:var(--grad-green); color:#fff; padding-block:var(--sec-pad); overflow-x:clip; } .vsec::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--glow-lime); } .vsec__head{ max-width:var(--head-w); margin-inline:auto; text-align:center; } .vsec__head h2{ color:#fff; font-size:var(--h2); line-height:1.06; letter-spacing:-.04em; text-wrap:balance; /* keeps it to two or three even lines */ } .vsec__head p{ max-width:var(--lead-w); margin:14px auto 0; font-size:var(--lead); font-weight:500; letter-spacing:-.01em; color:rgba(255,255,255,.86); } .vsec__foot{ max-width:var(--lead-w); margin:clamp(28px,3.4vw,44px) auto 0; text-align:center; } .vsec__kicker{ font-size:clamp(18px,1.81vw,24px); font-weight:600; letter-spacing:-.02em; color:#fff; line-height:1.2; } .vsec__note{ margin-top:10px; font-size:var(--lead); font-weight:500; letter-spacing:-.01em; color:rgba(255,255,255,.82); } .vrail{ margin-top:clamp(28px,3.4vw,44px); } /* No mask and no side padding: the strip runs edge to edge, cards simply leave the viewport rather than dissolving into it. */ .vrail__viewport{ overflow:hidden; cursor:grab; /* the browser keeps vertical panning; horizontal is ours */ touch-action:pan-y; } .vrail__viewport.is-dragging{ cursor:grabbing; } .vrail__viewport.is-dragging .vcard{ pointer-events:none; } .vrail__track{ display:flex; gap:24px; width:max-content; padding-inline:var(--gutter); padding-block:4px; will-change:transform; } /* --- controls, borrowed from the reference: arrows left, position right --- */ .vrail__controls{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:22px; padding-inline:var(--gutter); } .vrail__arrows{ display:flex; gap:10px; } .vrail__arrow{ width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:#fff; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); transition:background-color .25s var(--ease), scale .25s var(--ease); } .vrail__arrow svg{ width:20px; height:20px; } .vrail__arrow:hover{ background:rgba(255,255,255,.24); scale:1.06; } .vrail__arrow:active{ scale:.96; } .vrail__progress{ position:relative; flex:1 1 auto; max-width:260px; height:3px; border-radius:var(--r-pill); background:rgba(255,255,255,.22); overflow:hidden; } .vrail__progress span{ position:absolute; top:0; bottom:0; left:0; width:34%; border-radius:inherit; background:#fff; will-change:transform; } .vcard{ /* the rail now sits on the green metrics section, so the card has to set its own text colour or the caption inherits white-on-white */ color:var(--ink); 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); } .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; } /* reviews and the Jing thread: three equal columns rather than the post|chat split, since these are all the same kind of artefact */ .proof__group--trio{ grid-template-columns:repeat(3,1fr); } /* small label naming the source, so a review is not mistaken for a chat */ .proof__tag{ position:absolute; top:14px; left:14px; z-index:1; padding:6px 11px; border-radius:var(--r-pill); background:rgba(255,255,255,.94); color:var(--ink); font-size:12px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; box-shadow:0 6px 16px -8px rgba(0,0,0,.55); } .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; } .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:var(--sec-pad); 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{ width:100%; color:#fff; font-size:var(--h2); 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:var(--sec-pad); } .faq__head{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; margin-bottom:var(--head-gap); } .faq__head h2{ width:100%; max-width:var(--head-w); font-size:var(--h2); 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{ border-color:#c9c9c9; } .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:var(--h2); line-height:1; } .cta__content p{ max-width:var(--lead-w); font-size:var(--lead); font-weight:500; line-height:1.4; letter-spacing:-.01em; } /* ============================================================ 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__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){ /* One column, and the copy block dissolves so its three parts become grid items in their own right — that lets the picture sit between the message and the buttons instead of above the whole lot. */ .hero{ grid-template-columns:minmax(0,612px); justify-content:center; row-gap:32px; padding-block:48px; min-height:0; } .hero__copy{ display:contents; } .hero__head{ order:1; } .hero__sub{ order:2; } .hero__visual{ order:3; justify-self:center; } .hero__actions{ order:4; } .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){ .metrics__grid{ grid-template-columns:repeat(2,1fr); gap:16px; } .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; } /* reviews are tall portrait screenshots - give them more vertical room */ .proof__group--trio .proof__shot{ height:auto; aspect-ratio:4/5; } .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){ /* One 16px rail for the whole page. Headings and the paragraphs grouped with them then run nearly edge to edge, and because it is the shared container gutter every block below them still lines up on the same two edges. */ :root{ --gutter:16px; } /* --- 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; } .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; } .vrail{ margin-top:32px; } .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{ row-gap:26px; } .hero__actions{ width:100%; gap:12px; } .hero__actions .btn{ flex:1 1 100%; } /* The stack is a garnish on the photo, not the subject: narrower, shorter and pulled into the corner so the picture still reads. The description is clamped to two lines so a long one cannot grow the card. */ .notif{ height:auto; top:auto; left:6%; right:6%; bottom:4.5%; } .notif__card{ padding:11px 12px; gap:9px; border-radius:10px; } .notif__icon{ width:28px; height:28px; border-radius:6px; } .notif__icon svg{ width:15px; height:15px; } .notif__text strong{ font-size:12.5px; line-height:16px; letter-spacing:-.01em; } .notif__text > span{ margin-top:1px; height:28px; font-size:10.5px; line-height:14px; } .notif__meta b{ font-size:10px; line-height:13px; } .notif__meta span{ font-size:9px; line-height:11px; } /* A 6px step over three cards: enough to read as a stack, small enough that it stops looking like three white bars laid over the photo. */ .notif__card[data-depth="1"]{ width:96%; translate:-50% -6px; } .notif__card[data-depth="2"]{ width:92%; translate:-50% -12px; } .notif__card[data-depth="3"]{ width:88%; translate:-50% -18px; } .vcard{ width:280px; } .vcard__foot{ min-height:0; padding:16px 12px; gap:10px; } .vrail__controls{ margin-top:18px; } .vrail__arrow{ width:40px; height:40px; } .vrail__arrow svg{ width:18px; height:18px; } .vrail__progress{ max-width:150px; } .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; } .proof__group--trio .proof__shot{ aspect-ratio:4/5; } .foot__top{ flex-direction:column; align-items:flex-start; gap:28px; } .foot__social{ gap:16px; } .foot__rule{ margin-block:24px; } } /* very narrow phones */ /* the right-hand figure is the first thing to go when the card gets tight */ @media (max-width:480px){ .notif__meta{ display:none; } } @media (max-width:380px){ .btn{ font-size:16px; } .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 ============================================================ */ /* ============================================================ VIDEO MODAL ============================================================ */ .vlb{ position:fixed; inset:0; z-index:205; display:grid; place-items:center; padding:clamp(16px,4vw,48px); opacity:0; transition:opacity .28s var(--ease); } .vlb[hidden]{ display:none; } .vlb.is-open{ opacity:1; } .vlb__backdrop{ position:absolute; inset:0; background:rgba(6,14,9,.94); } .vlb__figure{ position:relative; z-index:1; margin:0; width:min(1000px,100%); display:flex; flex-direction:column; gap:16px; translate:0 10px; transition:translate .3s var(--ease); } .vlb.is-open .vlb__figure{ translate:0 0; } .vlb__stage{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--r-12); overflow:hidden; background:#000; box-shadow:0 40px 90px -30px rgba(0,0,0,.7); } .vlb__stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .vlb__cap{ color:rgba(255,255,255,.9); font-size:16px; font-weight:500; line-height:1.4; text-align:center; } .vlb__close{ position:absolute; z-index:2; top:24px; right:24px; width:52px; height:52px; display:grid; place-items:center; border-radius:50%; color:#fff; background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background-color .25s var(--ease), scale .25s var(--ease); } .vlb__close svg{ width:24px; height:24px; } .vlb__close:hover{ background:rgba(255,255,255,.24); scale:1.06; } @media (max-width:768px){ /* thumb-friendly: the close button drops to the bottom on a phone */ .vlb__close{ top:auto; right:auto; bottom:calc(24px + env(safe-area-inset-bottom)); left:50%; translate:-50% 0; } .vlb__cap{ font-size:14px; } } .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{ animation:none; } .proof__hint{ animation:none; } }