/* ═══════════════════════════════════════════════════════════════ MyHandler.ai — /v2 landing page (design review rebuild) Same dark/gold palette as newlanding.css. Everything else is new: real spacing/type/radius/motion scales, left-aligned editorial composition, no scroll-jacking, no WebGL, restrained motion. Scoped under .v2-page. ═══════════════════════════════════════════════════════════════ */ :root { /* ── Colour ────────────────────────────────────────────────────── This page's ONLY colour opinion is that it collapses the four surface tiers into two: page and one raised. Everything else — gold, ink, muted, borders — is inherited from landing.css, which owns the light/dark tokens. Do NOT re-declare --gold / --warm-white / --muted here. home.css loads after landing.css at equal specificity, so a literal here wins in BOTH themes: a hardcoded --warm-white: #F5F0E8 painted the homepage cream-on-cream in light mode. */ --dark: var(--surface-page); --dark-1: var(--surface-page); /* the shared _PricingSection partial references this */ --dark-2: var(--surface-raised); /* the ONE raised surface (was --dark-2/3/4) */ --dark-3: var(--surface-raised); --dark-4: var(--surface-raised); --green: rgba(100, 200, 120, 0.85); /* ── Spacing scale (was 31 arbitrary values) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; --sp-40: 160px; --sp-56: 224px; /* ── Radius scale (was 9 values) ── */ --r-sm: 4px; --r-md: 10px; --r-lg: 20px; --r-pill: 100px; /* ── Shadow scale (was 8 bespoke shadows, several gold glows) ── */ --sh-1: 0 1px 2px rgba(var(--shadow-rgb), 0.4); --sh-2: 0 12px 32px rgba(var(--shadow-rgb), 0.45); --sh-3: 0 40px 120px rgba(var(--shadow-rgb), 0.6); /* ── Motion scale (was 10 durations / 4 easings) ── */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-1: 160ms; --dur-2: 280ms; --dur-3: 520ms; /* ── Display face ── */ --font-display: 'Playfair Display', Georgia, serif; --display-weight: 500; --display-track-h1: -0.022em; --display-track-h2: -0.015em; /* ── Beat headings: TWO sizes, alternating loud / quiet / loud / quiet. Four different sizes read as inconsistency, not hierarchy — a reader can't infer a rule from 54 / 38 / 82 / 44. ── */ --beat-lead: clamp(40px, 4.6vw, 62px); --beat-quiet: clamp(30px, 3.2vw, 42px); /* ── Measures ── */ --w-wide: 1240px; /* tables, full product moments */ --w-page: 1080px; /* default */ --w-read: 680px; /* reading passages */ } .v2-page { /* The `*` reset below only reaches DESCENDANTS, and .v2-page IS — so the UA's 8px body margin survived and nothing was truly full-bleed (a visible seam down the left of the stage). */ margin: 0; color-scheme: dark; /* fixes light UA chrome on select/autofill/scrollbars */ background: var(--dark); color: var(--warm-white); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; line-height: 1.6; /* clip, not hidden — `overflow-x: hidden` makes this a scroll container and breaks the sticky stage. */ overflow-x: clip; min-height: 100vh; -webkit-font-smoothing: antialiased; } .v2-page *, .v2-page *::before, .v2-page *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Keyboard focus — the old page had no :focus-visible anywhere */ .v2-page :focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: var(--r-sm); } /* ═══ Type ═══════════════════════════════════════════════════════ Display serif is used at h1/h2 ONLY — never below 30px, never italic, never in a card title. Mono is the eyebrow and nothing else. Body weight is 400 (the old page's 300 read as thin/generic). ═══════════════════════════════════════════════════════════════ */ .v2-h1 { font-family: var(--font-display); font-size: clamp(48px, 7.4vw, 104px); font-weight: var(--display-weight); line-height: 0.95; letter-spacing: var(--display-track-h1); } /* Hero lead-in. The verb triplet is the concrete "what it does" line and has to read BEFORE the headline — but it cannot live inside the H1. The hero's copy column is ~495px, so display type fits ~10 characters per line; a 60-character sentence rags into six lines and orphans single words. At body scale it wraps to two clean lines. Primary colour, not muted: this line is carrying the value proposition, not supporting it. */ .v2-hero-lead { font-size: 22px; line-height: 1.45; color: var(--warm-white); max-width: 30ch; margin-bottom: var(--sp-6); text-wrap: balance; } .v2-h2 { font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 46px); font-weight: var(--display-weight); line-height: 1.08; letter-spacing: var(--display-track-h2); max-width: 18ch; } .v2-h3 { font-family: var(--font-display); font-size: 26px; font-weight: var(--display-weight); line-height: 1.25; letter-spacing: -0.01em; } /* ═══ The stage ═════════════════════════════════════════════════ The old page's atmosphere came from the photograph and the ember field — not from the 1240vh of pinned scroll. So: one sticky stage sits behind the hero AND the three beats (~2.6 screens total, vs 12.5), and the content scrolls over it. No pinning, no scroll hijack, no GSAP/Lenis/three.js. ═══════════════════════════════════════════════════════════════ */ .v2-stage-wrap { position: relative; } .v2-stage { position: sticky; top: 0; height: 100vh; z-index: 0; overflow: hidden; } .v2-stage-poster { position: absolute; inset: 0; background: url('/newlanding/hero.png') center / cover no-repeat; /* A slow push-in across the run, anchored on the light in the photograph (the same point the embers drift toward). */ transform: scale(var(--stage-push, 1)); transform-origin: 62% 42%; } /* Darkens as you descend, so the beats read cleanly over it and the photo recedes rather than competing. Driven by --stage-dim in JS. */ .v2-stage-dim { position: absolute; inset: 0; background: var(--dark); opacity: calc(0.16 + 0.52 * var(--stage-dim, 0)); } .v2-stage-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--page-rgb), 0.9) 0%, rgba(var(--page-rgb), 0.45) 55%, rgba(var(--page-rgb), 0.15) 100%), linear-gradient(180deg, rgba(var(--page-rgb), 0.75) 0%, transparent 30%, rgba(var(--page-rgb), 0.85) 100%); } .v2-embers { position: absolute; inset: 0; width: 100%; height: 100%; } .v2-stage-content { position: relative; z-index: 2; margin-top: -100vh; } /* Film grain — scoped to the stage, not the whole page. Global grain meant it also sat over the ability loops and the privacy clip, where it shimmers on compressed H.264. */ .v2-stage::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 3; opacity: 0.22; } /* ── Beats over the stage ─────────────────────────────────────── */ .v2-beats { padding: 0 var(--sp-10) var(--sp-24); } .v2-beats .v2-h2, .v2-beats .v2-qa-live-q { text-shadow: 0 2px 30px rgba(var(--page-rgb), 0.9); } .v2-beats .v2-inner { max-width: var(--w-wide); } /* ═══ Beat archetypes ═══════════════════════════════════════════ Four beats, four compositions. Previously all four shared one modifier, so they sat exactly 792px apart with an identical grid, an identical 62px heading and the media's right edge on the same x — five screens, two guides, no variance. Each now differs in split ratio, which side the media sits on, scale, alignment and figure/ground. No new copy and no new assets: same poster, same video id, same words. NOTE: the shared `.v2-beat .v2-h2` base rule lives ABOVE these on purpose. It has the same specificity, so whichever comes last wins — with it below, every per-beat size override was dead. ═══════════════════════════════════════════════════════════════ */ /* ═══ Feature section: one player, four tabs ════════════════════ Replaces four stacked two-column sections. They could not be made to stop reading as a template, because each showed the same branded title card — so the fix was to show one at a time. ═══════════════════════════════════════════════════════════════ */ /* ── Pinned scroll (scrollytelling) ──────────────────────────── The section is four viewports tall; its inner stage sticks to the top for the whole run. Scroll progress swaps which feature is showing, so each one gets a held moment in the SAME place instead of four sections stacked down the page. No scroll hijacking — the page scrolls at its normal rate; only the content changes. */ .v2-scrolly { height: 400vh; padding: 0 var(--sp-10); position: relative; } /* Anchored to the TOP, not vertically centred. Centring made the tab row's position depend on the tallest panel — and Recall's typed answer changes height as it cycles, so the tabs drifted up and down. */ .v2-scrolly-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: flex-start; padding-top: 16vh; } .v2-scrolly-stage > .v2-inner { width: 100%; } /* Panels stack in one place and cross-fade. Grid (not absolute) so the stage height is driven by the tallest panel and never jumps. */ /* Slide, not cross-fade: the outgoing panel exits the way you're scrolling and the incoming one arrives from the opposite edge, so the motion agrees with the scroll direction. JS flips --enter/--exit when you scroll back up. Non-active panels rest at --enter; when direction flips they jump to the other side, which is invisible because they're already opacity 0. */ .v2-feature-stage { display: grid; --enter: 44px; --exit: -44px; } .v2-feature-panel { grid-area: 1 / 1; align-content: start; opacity: 0; visibility: hidden; transform: translateY(var(--enter)); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); } .v2-feature-panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s; } /* The one on its way out — held visible so the exit is actually seen. */ .v2-feature-panel.is-leaving { opacity: 0; visibility: visible; transform: translateY(var(--exit)); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); } /* `hidden` would take the panel out of the grid and collapse the height. */ .v2-feature-panel[hidden] { display: grid; } .v2-feature { padding: 0; } /* Reduced motion / no-JS: no pin, no swap — the four panels simply stack and read top to bottom. */ @media (prefers-reduced-motion: reduce) { .v2-scrolly { height: auto; } .v2-scrolly-stage { position: static; height: auto; display: block; padding: var(--sp-16) 0; } .v2-feature-stage { display: block; } .v2-feature-panel { opacity: 1; visibility: visible; transform: none; margin-bottom: var(--sp-24); } .v2-feature-tabs { display: none; } } html:not(.v2-js) .v2-scrolly { height: auto; } html:not(.v2-js) .v2-scrolly-stage { position: static; height: auto; display: block; padding: var(--sp-16) 0; } html:not(.v2-js) .v2-feature-stage { display: block; } html:not(.v2-js) .v2-feature-panel { opacity: 1; visibility: visible; transform: none; margin-bottom: var(--sp-24); } html:not(.v2-js) .v2-feature-tabs { display: none; } /* 21 chars at the 104px cap is ~2 lines; balance stops it dropping a lone word onto the last line. Hero only. */ .v2-hero .v2-h1 { text-wrap: balance; } /* Doubles as a progress rail: it shows where you are in the pinned run, and each label is still clickable to jump to that segment. */ .v2-feature-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-12); position: relative; } .v2-feature-tabs::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: var(--rail, 0%); background: var(--gold); transition: width var(--dur-2) var(--ease); } .v2-tab { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; /* Was --dimmer (25%), which computes to ~2:1 against the page — unreadable at 11px uppercase. 78% lands around 8:1, and the hairline border makes an unselected tab read as a control rather than as disabled text. */ color: rgba(var(--ink-rgb), 0.78); background: rgba(var(--ink-rgb), 0.03); border: 1px solid var(--border); border-radius: var(--r-pill); padding: var(--sp-3) var(--sp-5); min-height: 44px; /* touch target */ cursor: pointer; white-space: nowrap; transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .v2-tab:hover { color: var(--warm-white); background: rgba(var(--ink-rgb), 0.08); border-color: var(--border-gold); } .v2-tab.is-on { color: var(--dark); background: var(--gold); border-color: var(--gold); } .v2-feature-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-16); align-items: start; /* video's top edge lines up with the heading's */ } .v2-feature-panel[hidden] { display: none; } .v2-feature-col .v2-h2 { font-size: var(--beat-lead); max-width: 15ch; } .v2-feature-video { aspect-ratio: 16 / 9; border: 1px solid rgba(var(--ink-rgb), 0.28); border-radius: var(--r-md); overflow: hidden; background: #0B0A08; box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.22), 0 0 100px rgba(var(--gold-rgb), 0.14), 0 32px 90px rgba(var(--shadow-rgb), 0.78); } .v2-feature-video .v2-video-poster { filter: brightness(1.28) contrast(1.03) saturate(1.06); } .v2-feature-video .v2-video-play { background: linear-gradient(180deg, transparent 12%, rgba(var(--scrim-rgb), 0.6) 48%, rgba(var(--scrim-rgb), 0.97) 100%); padding: var(--sp-5); } /* Switching panels shouldn't jolt the page — fade the incoming one in. */ .v2-js .v2-feature-panel.is-on { animation: v2-panel-in var(--dur-2) var(--ease) both; } @keyframes v2-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (max-width: 1024px) { .v2-feature-panel { grid-template-columns: 1fr; gap: var(--sp-8); } .v2-feature-col { order: 2; } .v2-feature-video { order: 1; } } @media (max-width: 768px) { .v2-feature { padding: var(--sp-12) 0 var(--sp-16); } .v2-feature-tabs { margin-bottom: var(--sp-10); gap: 2px; } .v2-tab { font-size: 10px; padding: var(--sp-3); letter-spacing: 0.1em; } } @media (prefers-reduced-motion: reduce) { .v2-js .v2-feature-panel.is-on { animation: none; } .v2-feature-panel, .v2-feature-panel.is-on, .v2-feature-panel.is-leaving { transform: none; } } .v2-beat-inner { width: 100%; } /* Break the exact period — the four tops used to be 792px apart. */ /* Rhythm comes from PADDING, not min-height. With min-height + centring, each beat padded itself above and below its content — and adjacent halves added up to ~290px of dead stage between Recall and Ghostwriter. Padding makes the gap between two beats exactly what it says. */ .v2-beat--recall { padding: var(--sp-12) 0 var(--sp-20); } .v2-beat--ghost { padding: var(--sp-20) 0; } .v2-beat--dictation { padding: var(--sp-24) 0 var(--sp-16); } .v2-beat--voice { padding: 0; } /* ── 1. Recall — contained, the largest split panel, type left ── NO edge bleed and NO type-on-panel overlap. Every poster here is a CENTRED designed card (logo, pill, title, subtitle, footer), so bleeding one off the viewport cuts its subtitle mid-word and pushes its title off-centre — it reads as a rendering fault, not a composition. The posters have to stay intact and roughly centred; differentiation comes from panel scale, side, type size and figure/ground instead. */ .v2-beat--recall .v2-beat-inner { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-12); align-items: center; } .v2-beat--recall .v2-h2 { font-size: var(--beat-lead); max-width: 15ch; } /* ── 2. Ghostwriter — flipped, smaller, bottom-aligned ── */ .v2-beat--ghost { position: relative; } /* The stage scrim is dark-on-the-left; this beat's type is on the right, so it needs its own counter-scrim spanning the full viewport. */ .v2-beat--ghost::before { content: ''; position: absolute; inset: 0 calc(50% - 50vw); z-index: 0; pointer-events: none; background: linear-gradient(270deg, rgba(var(--page-rgb), 0.9) 0%, rgba(var(--page-rgb), 0.3) 44%, transparent 68%); } .v2-beat--ghost > * { position: relative; z-index: 1; } .v2-beat--ghost .v2-beat-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--sp-16); align-items: end; } .v2-beat--ghost .v2-beat-video { grid-column: 1; grid-row: 1; } .v2-beat--ghost .v2-beat-col { grid-column: 2; grid-row: 1; } .v2-beat--ghost .v2-h2 { font-size: var(--beat-quiet); max-width: 18ch; } .v2-beat--ghost .v2-beat-body { max-width: 38ch; } .v2-beat--ghost .v2-beat-video { box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.16), 0 20px 56px rgba(var(--shadow-rgb), 0.7); } /* ── 3. Dictation — no split at all: stacked, biggest type, media as a band ── */ .v2-beat--dictation .v2-beat-inner { display: block; max-width: none; } .v2-beat--dictation .v2-h2 { font-size: var(--beat-lead); max-width: 17ch; } .v2-beat--dictation .v2-beat-body { margin-top: var(--sp-8); columns: 2; column-gap: var(--sp-12); max-width: 68ch; } .v2-beat--dictation .v2-beat-video { margin-top: var(--sp-16); width: 100%; aspect-ratio: 21 / 9; } /* ── 4. Voice Command — off the stage, on a flat surface, type right ── */ .v2-offstage { background: var(--dark-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .v2-beat--voice .v2-beat-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-20); align-items: center; } .v2-beat--voice .v2-beat-video { grid-column: 1; grid-row: 1; } .v2-beat--voice .v2-beat-col { grid-column: 2; grid-row: 1; text-align: right; } .v2-beat--voice .v2-h2 { margin-left: auto; font-size: var(--beat-quiet); max-width: 15ch; } /* No photograph behind it now, so the stage-era shadows come off. */ .v2-beat--voice .v2-h2, .v2-beat--voice .v2-eyebrow { text-shadow: none; } .v2-beat--voice .v2-beat-video { box-shadow: var(--sh-2); border-color: var(--border); } /* ── Per-beat poster crops. All four posters are the SAME designed title card, so every screen was printing its headline twice — once as the h2, once inside the poster. Different crops break that up. ── */ /* Recall's panel is exactly 16:9 and so is the poster, so ANY scale clips the designed title mid-word and reads as broken rather than cropped. It gets its differentiation from the bleed and the type-on-panel instead. */ .v2-beat--recall .v2-video-poster { object-position: center; } .v2-beat--ghost .v2-video-poster { object-position: 34% 40%; transform: scale(1.22); } .v2-beat--dictation .v2-video-poster { object-position: center 52%; } .v2-beat--voice .v2-video-poster { object-position: center 58%; } /* ── Staggered entry: different direction and order per beat ── */ .v2-js .v2-beat-col, .v2-js .v2-beat-video { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); } .v2-js .v2-beat.is-in .v2-beat-col, .v2-js .v2-beat.is-in .v2-beat-video { opacity: 1; transform: none; } .v2-js .v2-beat--recall .v2-beat-video { transform: translateY(28px) scale(1.015); } .v2-js .v2-beat--recall.is-in .v2-beat-col { transition-delay: 140ms; } .v2-js .v2-beat--ghost .v2-beat-col { transform: translateX(20px); } .v2-js .v2-beat--ghost.is-in .v2-beat-col { transition-delay: 120ms; } .v2-js .v2-beat--dictation.is-in .v2-beat-video { transition-delay: 200ms; } .v2-js .v2-beat--voice .v2-beat-video { transform: translateX(-20px); } .v2-beat-body { margin-top: var(--sp-6); font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 46ch; text-shadow: 0 2px 20px rgba(var(--page-rgb), 0.9); } /* These players are smaller than the hero's, so the poster's own centred tagline sits close to the control — the scrim has to work harder. */ .v2-beat-video .v2-video-play { background: linear-gradient(180deg, transparent 12%, rgba(var(--scrim-rgb), 0.6) 48%, rgba(var(--scrim-rgb), 0.97) 100%); padding: var(--sp-5); } /* The posters are near-black title cards sitting on a near-black stage, so the panel had no edge. Three things give it one: a brighter rim, a warm halo that separates it from the photograph, and a lift on the poster itself so the card reads lighter than what's behind it. */ .v2-beat-video { aspect-ratio: 16 / 9; border: 1px solid rgba(var(--ink-rgb), 0.28); border-radius: var(--r-md); overflow: hidden; background: #0B0A08; box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.22), 0 0 90px rgba(var(--gold-rgb), 0.13), 0 32px 90px rgba(var(--shadow-rgb), 0.75); } .v2-beat-video .v2-video-poster, .v2-hero .v2-video-poster { filter: brightness(1.28) contrast(1.03) saturate(1.06); } /* Tablet: keep the archetypes' character but ease the extremes — the bleed and the type-on-panel overlap need room they don't have here. */ @media (max-width: 1024px) { .v2-beat--recall .v2-beat-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .v2-beat--recall .v2-beat-col { margin-right: 0; } .v2-beat--recall .v2-beat-video::before { background: linear-gradient(90deg, rgba(var(--page-rgb), 0.7) 0%, transparent 40%); } .v2-beat--ghost .v2-beat-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-10); } .v2-beat--voice .v2-beat-inner { gap: var(--sp-12); } .v2-beat--dictation .v2-beat-body { columns: 1; } } /* ── The typed exchange ─────────────────────────────────────── Restored from the old hero — it's the one animation that shows the product rather than decorating it. The static ledger below is what renders with JS off or reduced motion on. ── */ .v2-qa-live { margin-top: var(--sp-8); max-width: 62ch; /* Reserved height: the answer appears and disappears as the exchange cycles, and without a floor the panel would resize under the layout. */ min-height: 150px; padding-left: var(--sp-5); border-left: 1px solid var(--border-gold); } .v2-qa-live-q { font-size: 19px; color: var(--warm-white); line-height: 1.4; } .v2-qa-live-q::before { content: '›'; color: var(--gold); margin-right: var(--sp-2); } .v2-qa-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: var(--gold); vertical-align: -0.12em; animation: v2-blink 1.05s step-end infinite; } @keyframes v2-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .v2-qa-live-a { margin-top: var(--sp-4); font-family: 'DM Mono', monospace; font-size: 14px; line-height: 1.55; color: var(--muted); opacity: 0; transition: opacity var(--dur-3) var(--ease); } .v2-qa-live-a.is-on { opacity: 1; } /* ── Magnetic CTA + glint ─────────────────────────────────────── */ .v2-magnetic { transition: transform var(--dur-2) var(--ease), background var(--dur-1) var(--ease); will-change: transform; } .v2-glint { position: relative; overflow: hidden; } .v2-glint::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(var(--ink-rgb), 0.28), transparent); transform: skewX(-18deg); animation: v2-glint-sweep 5.5s ease-in-out infinite; pointer-events: none; } @keyframes v2-glint-sweep { 0%, 62% { left: -60%; } 86%, 100% { left: 120%; } } .v2-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } .v2-lead { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 46ch; } .v2-body { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 52ch; } .v2-caption { font-size: 13px; line-height: 1.45; color: var(--dimmer); } /* ═══ Section rhythm ════════════════════════════════════════════ Three deliberate tempos instead of 140px everywhere. ═══════════════════════════════════════════════════════════════ */ .v2-section { padding: var(--sp-40) var(--sp-10); } .v2-section--dense { padding: var(--sp-24) var(--sp-10); } .v2-section--loud { padding: var(--sp-56) var(--sp-10); } .v2-inner { max-width: var(--w-page); margin: 0 auto; } .v2-inner--wide { max-width: var(--w-wide); margin: 0 auto; } .v2-surface { background: var(--dark-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* ═══ Buttons / links ═══════════════════════════════════════════ Flat gold. No gradients, no glow shadows, no hover lift. ═══════════════════════════════════════════════════════════════ */ .v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .v2-btn-gold { background: var(--gold); color: var(--dark); padding: var(--sp-4) var(--sp-8); } .v2-btn-gold:hover { background: var(--gold-light); } .v2-btn-lg { padding: var(--sp-5) var(--sp-10); font-size: 15px; } .v2-btn-quiet { background: transparent; border-color: var(--border); color: var(--warm-white); padding: var(--sp-4) var(--sp-6); } .v2-btn-quiet:hover { border-color: var(--border-gold); } .v2-link-quiet { font-size: 14px; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 2px; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .v2-link-quiet:hover { color: var(--warm-white); border-bottom-color: var(--gold); } /* ═══ Nav ═══════════════════════════════════════════════════════ */ .v2-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-10); background: transparent; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); border-bottom: 1px solid transparent; } .v2-nav.is-scrolled { background: rgba(var(--page-rgb), 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--border); } .v2-logo { font-family: var(--font-display); font-size: 21px; color: var(--warm-white); text-decoration: none; letter-spacing: -0.01em; } .v2-logo span { color: var(--gold); } .v2-nav-right { display: flex; align-items: center; gap: var(--sp-6); } .v2-nav-link { font-size: 14px; color: var(--muted); text-decoration: none; transition: color var(--dur-1) var(--ease); } .v2-nav-link:hover { color: var(--warm-white); } /* The popup is drawn by the OS, so it needs color-scheme on the control itself — inheriting it from the page isn't enough for the dropdown list. Without it the list rendered light, and because