/* ============================================================================= Growth Coach — landing page ----------------------------------------------------------------------------- Aesthetic: Studio Press × Stripe. White substrate, persimmon brand, Sunrise gradient at hero + footer accent only. Structure: a 6-beat scroll narrative. 1. Goal — hero: pick your goal 2. Observation— pinned: cursor + drop-offs in a fake browser window 3. Patterns — pinned: heatmap forming, funnel tightening 4. Diagnosis — pinned: live diagnosis moment (the centerpiece) 5. Recommendation — pinned: coach speaks; flow simplifies 6. Impact — pinned: bars + counter (before vs after) Each scene is `height: 220vh` with a sticky inner pin. JS sets `--p` (0–1) per scene from scroll position; sub-stage CSS variables (e.g. `--cursor-p`, `--detect-p`) are also computed in JS where they add narrative beats. CSS reads them and drives transforms / opacity. Goal switching: `` toggles `.for-sales / .for-leads / .for-audience` siblings. ============================================================================= */ :root { --paper: #FFFFFF; --paper-warm: #FAFAF7; --paper-veil: #F5F4EE; --ink: #0A0A0B; --ink-soft: #3D3D42; --ink-faded: #6B6B72; --ink-ghost: #A4A4AB; --persimmon: #E55A3C; --persimmon-deep: #C04421; --persimmon-soft: #FCEBE3; --persimmon-glow: rgba(229, 90, 60, 0.18); --copper: #B5713B; --success: #2E7A5A; --warning: #C99A2E; --info: #2D4159; --rule: rgba(10, 10, 11, 0.08); --rule-strong: rgba(10, 10, 11, 0.16); --rule-soft: rgba(10, 10, 11, 0.04); --gradient-sunrise: linear-gradient(135deg, #E55A3C 0%, #F39C5C 38%, #F5C792 70%, #FAEFE0 100%); --font-display: 'Fraunces', 'GT Sectra', Georgia, serif; --font-body: 'Geist', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-snap: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 140ms; --t-base: 280ms; --t-reveal: 640ms; --col-max: 1180px; --col-narrow: 760px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Section-by-section snap. Long pinned scenes opt out of snap *within* the section (per spec), so per-scene scrubbing animations still scrub freely; snap only kicks in when a user pauses near a section boundary. */ scroll-snap-type: y proximity; scroll-padding-top: 60px; /* clear the fixed topbar */ } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; cursor: pointer; } body { font-family: var(--font-body); font-size: 17px; font-weight: 400; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: var(--ink); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--persimmon-deep); } ::selection { background: var(--persimmon-soft); color: var(--ink); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Goal-data switching ─────────────────────────────────────────────── */ [data-goal="sales"] .for-leads, [data-goal="sales"] .for-audience, [data-goal="leads"] .for-sales, [data-goal="leads"] .for-audience, [data-goal="audience"] .for-sales, [data-goal="audience"] .for-leads { display: none !important; } /* ── Brand mark (shared by topbar + footer) ──────────────────────────── */ .brand { font-family: var(--font-display); font-variation-settings: 'opsz' 144; font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); display: inline-flex; align-items: baseline; user-select: none; line-height: 1; } .brand .brand-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--persimmon); margin: 0 4px; position: relative; top: -1px; } .brand .brand-coach { font-weight: 500; } /* ── Top bar ─────────────────────────────────────────────────────────── */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 60px; display: flex; align-items: center; background: rgba(255, 255, 255, 0); border-bottom: 1px solid transparent; transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), backdrop-filter var(--t-base) var(--ease-out); } .topbar.is-stuck { background: rgba(255, 255, 255, 0.86); border-bottom-color: var(--rule); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .topbar-inner { width: 100%; max-width: var(--col-max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; } .topbar-signin { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink); padding: 8px 14px; border-radius: 6px; transition: background var(--t-fast); } .topbar-signin:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); } /* ── Container ───────────────────────────────────────────────────────── */ .container { max-width: var(--col-max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); } /* ── Kicker ──────────────────────────────────────────────────────────── */ .kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.20em; text-transform: uppercase; color: var(--persimmon); margin-bottom: 24px; display: inline-block; } /* ── Hero / Scene 1 (Goal) ───────────────────────────────────────────── */ .hero { position: relative; min-height: 100vh; padding: 140px 0 100px; display: flex; align-items: center; isolation: isolate; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: -1; background: var(--gradient-sunrise); background-size: 200% 200%; animation: shimmer 14s ease-in-out infinite alternate; } @keyframes shimmer { from { background-position: 0% 30%; } to { background-position: 100% 70%; } } .hero-inner { width: 100%; max-width: var(--col-max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); position: relative; text-align: left; } .hero-kicker { color: var(--ink); opacity: 0.7; margin-bottom: 28px; } .hero-title { font-family: var(--font-display); font-variation-settings: 'opsz' 144; font-weight: 500; font-size: clamp(56px, 9vw, 132px); line-height: 0.96; letter-spacing: -0.025em; color: var(--ink); max-width: 14ch; margin-bottom: 32px; } .hero-title em { font-style: italic; font-weight: 400; color: var(--ink); } .hero-sub { font-family: var(--font-body); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; font-weight: 400; color: var(--ink); opacity: 0.78; max-width: 56ch; margin-bottom: 40px; } /* Goal picker — three pill-rectangles in a row */ .goal-picker { display: flex; flex-wrap: wrap; gap: 10px; max-width: 720px; margin-bottom: 28px; } .goal-pill { appearance: none; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(10, 10, 11, 0.16); border-radius: 10px; padding: 14px 22px 14px 16px; display: inline-flex; align-items: baseline; gap: 14px; font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--ink); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .goal-pill-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-faded); font-weight: 500; } .goal-pill-label { letter-spacing: -0.005em; } .goal-pill:hover { background: rgba(255, 255, 255, 0.85); border-color: var(--ink); } .goal-pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: 0 1px 0 rgba(0,0,0,0.18); } .goal-pill[aria-pressed="true"] .goal-pill-num { color: rgba(255, 255, 255, 0.55); } .goal-pill:active { transform: translateY(1px); } .hero-fine { font-family: var(--font-body); font-size: 14px; color: var(--ink); opacity: 0.55; margin-bottom: 8px; } .hero-arrow { display: inline-block; font-family: var(--font-display); font-size: 20px; color: var(--ink); opacity: 0.45; animation: arrow-bob 2.4s ease-in-out infinite; } @keyframes arrow-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (max-width: 720px) { .goal-pill { padding: 12px 16px; font-size: 14.5px; } .goal-picker { gap: 8px; } } /* ── Scroll-snap landmarks ───────────────────────────────────────────── */ .hero, .scene, .cta { scroll-snap-align: start; scroll-snap-stop: normal; } /* ── Scene system ────────────────────────────────────────────────────── */ .scene { position: relative; height: 220vh; background: var(--paper); } .scene + .scene { border-top: 1px solid var(--rule-soft); } .scene-pin { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; overflow: hidden; } .scene-frame { width: 100%; max-width: var(--col-max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; } .scene-frame-rev { /* visual on the right by default; on this variant, the visual goes to the right too, but words come first in source. We use `direction: rtl` trick? No — simpler: keep order. */ } .scene-stage { position: relative; aspect-ratio: 5 / 4; width: 100%; background: var(--paper-warm); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; } .scene-words { max-width: 38ch; } .scene-title { font-family: var(--font-display); font-variation-settings: 'opsz' 144; font-weight: 500; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 22px; } .scene-title em { font-style: italic; font-weight: 400; color: var(--persimmon-deep); } .scene-sub { font-family: var(--font-body); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: var(--ink-soft); max-width: 42ch; margin-bottom: 18px; } .scene-aside { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faded); } .stage-caption { position: absolute; bottom: 14px; left: 18px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faded); z-index: 4; } /* Reveal scene-words once we're far enough into the scene */ .scene-words { opacity: calc(0.35 + (var(--p, 0) * 1.6)); transform: translateY(calc((1 - min(1, var(--p, 0) * 2.2)) * 16px)); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); } /* ── Scene 2 — Observation (browser mock + cursor) ───────────────────── */ .stage-watch { background: linear-gradient(180deg, #FAFAF7 0%, #F0EFE8 100%); } .watch-window { position: absolute; inset: 28px; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(0,0,0,0) inset; } .watch-chrome { height: 28px; background: var(--paper-warm); border-bottom: 1px solid var(--rule); display: flex; align-items: center; padding: 0 12px; gap: 5px; flex-shrink: 0; } .watch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-ghost); opacity: 0.45; } .watch-url { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faded); margin-left: 18px; letter-spacing: 0.04em; } .watch-page { flex: 1; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; } .watch-block { height: 12px; background: var(--rule-strong); border-radius: 3px; opacity: 0.5; } .watch-block-1 { width: 64%; } .watch-block-2 { width: 42%; height: 8px; opacity: 0.35; } .watch-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; } .watch-card { aspect-ratio: 4 / 3; background: var(--paper-warm); border: 1px solid var(--rule); border-radius: 6px; } .watch-cta { margin-top: 6px; height: 32px; width: 140px; background: var(--persimmon); border-radius: 6px; align-self: flex-start; opacity: 0.85; transition: box-shadow var(--t-fast); } /* Cursor follows an offset-path through the page */ .watch-cursor { position: absolute; width: 16px; height: 18px; z-index: 5; pointer-events: none; /* SVG cursor encoded as a background */ background: url("data:image/svg+xml;utf8,") no-repeat center / contain; /* path traces page → cards → CTA → leaves; rendered visible only after p>0.05 */ offset-path: path('M 60 60 C 120 80, 180 100, 220 130 C 280 170, 340 180, 380 220 C 380 240, 340 260, 280 270 C 230 275, 200 260, 180 250'); offset-distance: calc(var(--watch-cursor-p, 0) * 100%); offset-rotate: 0deg; opacity: calc(min(1, var(--watch-cursor-p, 0) * 12)); } /* Click ripples — they appear at specific moments along the scrub */ .watch-click { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--persimmon); pointer-events: none; z-index: 4; transform: translate(-50%, -50%) scale(0.4); opacity: 0; } .watch-click-1 { left: 38%; top: 56%; /* fires roughly when --p ≈ 0.35 */ opacity: calc(max(0, min(1, (var(--watch-click1-p, 0) * 3) - 0.6))); transform: translate(-50%, -50%) scale(calc(0.4 + var(--watch-click1-p, 0) * 1.4)); } .watch-click-2 { left: 62%; top: 60%; opacity: calc(max(0, min(1, (var(--watch-click2-p, 0) * 3) - 0.4))); transform: translate(-50%, -50%) scale(calc(0.4 + var(--watch-click2-p, 0) * 1.4)); } /* Rage clicks cluster — 4 dots that pulse in sequence late in the scrub */ .watch-rage { position: absolute; left: 47%; top: 78%; width: 32px; height: 32px; pointer-events: none; z-index: 4; opacity: var(--watch-rage-p, 0); } .watch-rage span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--persimmon); opacity: 0; } .watch-rage span:nth-child(1) { top: 0; left: 0; animation: rage-pop 1.2s var(--ease-out) infinite; animation-delay: 0ms; } .watch-rage span:nth-child(2) { top: 0; right: 0; animation: rage-pop 1.2s var(--ease-out) infinite; animation-delay: 100ms; } .watch-rage span:nth-child(3) { bottom: 0; left: 0; animation: rage-pop 1.2s var(--ease-out) infinite; animation-delay: 200ms; } .watch-rage span:nth-child(4) { bottom: 0; right: 0; animation: rage-pop 1.2s var(--ease-out) infinite; animation-delay: 300ms; } @keyframes rage-pop { 0%, 100% { transform: scale(0.6); opacity: 0; } 40% { transform: scale(1.2); opacity: 1; } } /* "↗" leaving arrow — appears at the end of the watch scrub */ .watch-leave { position: absolute; right: 36px; top: 22px; font-family: var(--font-mono); font-size: 22px; color: var(--persimmon); z-index: 5; opacity: var(--watch-leave-p, 0); transform: translate(calc(var(--watch-leave-p, 0) * 8px), calc(var(--watch-leave-p, 0) * -8px)); } /* ── Scene 3 — Patterns (graph forming) ──────────────────────────────── */ .stage-pattern { background: linear-gradient(180deg, #FAFAF7 0%, #F4F2EA 100%); display: grid; place-items: center; padding: 28px; } .pat-graph { width: 100%; height: 100%; display: block; overflow: visible; } /* Edges — stroke-dashoffset reveal driven by --pat-edges-p, staggered */ .pat-edges path { fill: none; stroke: var(--ink-soft); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 * (1 - var(--r, 0))); opacity: 0.42; transition: stroke 280ms var(--ease-out), stroke-width 280ms var(--ease-out), opacity 280ms var(--ease-out); } .pat-edges path:nth-child(1) { --r: calc(min(1, max(0, (var(--pat-edges-p, 0) - 0.00) * 3))); } .pat-edges path:nth-child(2) { --r: calc(min(1, max(0, (var(--pat-edges-p, 0) - 0.05) * 3))); } .pat-edges path:nth-child(3) { --r: calc(min(1, max(0, (var(--pat-edges-p, 0) - 0.10) * 3))); } .pat-edges path:nth-child(4) { --r: calc(min(1, max(0, (var(--pat-edges-p, 0) - 0.12) * 3))); } .pat-edges path:nth-child(5) { --r: calc(min(1, max(0, (var(--pat-edges-p, 0) - 0.18) * 3))); } .pat-edges path:nth-child(6) { --r: calc(min(1, max(0, (var(--pat-edges-p, 0) - 0.22) * 3))); } .pat-edges path:nth-child(7) { --r: calc(min(1, max(0, (var(--pat-edges-p, 0) - 0.28) * 3))); } .pat-edges path:nth-child(8) { --r: calc(min(1, max(0, (var(--pat-edges-p, 0) - 0.34) * 3))); } .pat-edges path:nth-child(9) { --r: calc(min(1, max(0, (var(--pat-edges-p, 0) - 0.38) * 3))); } .pat-edges path:nth-child(10) { --r: calc(min(1, max(0, (var(--pat-edges-p, 0) - 0.44) * 3))); } .pat-edges path:nth-child(11) { --r: calc(min(1, max(0, (var(--pat-edges-p, 0) - 0.48) * 3))); } .pat-edges path:nth-child(12) { --r: calc(min(1, max(0, (var(--pat-edges-p, 0) - 0.54) * 3))); } .pat-edges path:nth-child(13) { --r: calc(min(1, max(0, (var(--pat-edges-p, 0) - 0.60) * 3))); } .pat-edges path:nth-child(14) { --r: calc(min(1, max(0, (var(--pat-edges-p, 0) - 0.64) * 3))); } /* The "insight" path — Direct → Pricing → Convert. Lifts to persimmon when --pat-highlight-p ramps; JS toggles `.is-lit` on the parent group. */ .pat-edges path.edge-hl { opacity: calc(0.42 + var(--pat-highlight-p, 0) * 0.58); stroke-width: calc(1 + var(--pat-highlight-p, 0) * 0.8); } .pat-edges.is-lit path.edge-hl { stroke: var(--persimmon); } /* Nodes — fade in row by row */ .pat-nodes .row-1 { opacity: calc(min(1, max(0, (var(--pat-nodes-p, 0) - 0.00) * 2.5))); transition: opacity 220ms var(--ease-out); } .pat-nodes .row-2 { opacity: calc(min(1, max(0, (var(--pat-nodes-p, 0) - 0.30) * 2.5))); transition: opacity 220ms var(--ease-out); } .pat-nodes .row-3 { opacity: calc(min(1, max(0, (var(--pat-nodes-p, 0) - 0.60) * 2.5))); transition: opacity 220ms var(--ease-out); } .pat-nodes .node circle { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1.5; transition: fill var(--t-base), stroke var(--t-base); } .pat-nodes .pat-label-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-anchor: middle; fill: var(--ink-faded); /* White stroke "padding" so labels read cleanly over edges */ paint-order: stroke; stroke: var(--paper); stroke-width: 4; stroke-linejoin: round; transition: fill var(--t-base); } .pat-nodes.is-lit .node-hl circle { fill: var(--persimmon-soft); stroke: var(--persimmon); filter: drop-shadow(0 0 6px var(--persimmon-glow)); } .pat-nodes.is-lit .node-hl .pat-label-text { fill: var(--persimmon-deep); } /* Pulse — circle traveling along the highlighted polyline. `cx=0 cy=0` keeps it at the path's start; offset-distance moves it. */ .pat-pulse { fill: var(--persimmon); stroke: var(--paper); stroke-width: 2.5; offset-path: path('M 460 80 L 300 240 L 460 400'); offset-distance: calc(var(--pat-pulse-p, 0) * 100%); opacity: calc(min(1, var(--pat-pulse-p, 0) * 6)); transition: opacity 200ms var(--ease-out); } /* ── Scene 4 — Diagnosis (live moment) ───────────────────────────────── */ .stage-diagnose { background: linear-gradient(180deg, #FAFAF7 0%, #F2F1EB 100%); } .diag-window { position: absolute; inset: 28px; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; } .diag-chrome { height: 28px; background: var(--paper-warm); border-bottom: 1px solid var(--rule); display: flex; align-items: center; padding: 0 12px; gap: 5px; flex-shrink: 0; } .diag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-ghost); opacity: 0.45; } .diag-url { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faded); margin-left: 18px; letter-spacing: 0.04em; } .diag-flow { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; position: relative; } .diag-step { flex: 1; max-width: 130px; aspect-ratio: 1.2; border: 1.5px solid var(--rule-strong); border-radius: 10px; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: relative; transition: border-color var(--t-base), background var(--t-base), transform var(--t-base); } .diag-step-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-faded); } .diag-step-name { font-family: var(--font-display); font-variation-settings: 'opsz' 72; font-weight: 500; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; } .diag-arrow { width: 24px; height: 1px; background: var(--ink-faded); position: relative; flex-shrink: 0; } .diag-arrow::after { content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 5px; height: 5px; border-right: 1px solid var(--ink-faded); border-top: 1px solid var(--ink-faded); } /* Friction step — pulses red after rewind */ .diag-step-friction { --pulse: var(--diag-pulse-p, 0); border-color: rgba(229, 90, 60, calc(0.35 + var(--pulse) * 0.65)); background: rgba(229, 90, 60, calc(var(--pulse) * 0.10)); box-shadow: 0 0 0 calc(var(--pulse) * 6px) var(--persimmon-glow); } .diag-step-friction .diag-step-name { color: var(--persimmon-deep); transition: color var(--t-base); } /* Cursor walks through the flow then leaves */ .diag-cursor { position: absolute; width: 16px; height: 18px; z-index: 6; pointer-events: none; background: url("data:image/svg+xml;utf8,") no-repeat center / contain; /* Path: enters at left → step 1 → step 2 → step 3 → leaves up-right. Then JS reverses (rewinds) by setting --diag-cursor-p back. */ offset-path: path('M 50 200 C 100 180, 130 170, 165 170 C 200 170, 240 175, 280 170 C 320 165, 360 170, 400 165 C 460 160, 480 130, 510 80'); offset-distance: calc(var(--diag-cursor-p, 0) * 100%); offset-rotate: 0deg; opacity: calc(min(1, var(--diag-cursor-p, 0) * 14)); } /* Drop-off detected badge — appears mid-scrub */ .diag-badge { position: absolute; top: 56px; right: 44px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; z-index: 7; opacity: var(--diag-badge-p, 0); transform: translateY(calc((1 - var(--diag-badge-p, 0)) * -8px)); box-shadow: 0 4px 14px rgba(0,0,0,0.10); } .diag-badge-icon { color: var(--persimmon); font-size: 15px; line-height: 1; } /* "Rewind" indicator — appears between badge and pulse */ .diag-rewind { position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--persimmon); display: inline-flex; align-items: center; gap: 8px; z-index: 6; opacity: var(--diag-rewind-p, 0); } .diag-rewind span { font-size: 14px; display: inline-block; animation: rewind-spin 1.4s linear infinite; animation-play-state: paused; } .diag-rewind.is-firing span { animation-play-state: running; } @keyframes rewind-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } /* The diagnose scene-title leans large and confident; em is the % number */ .scene-diagnose .scene-title em { font-family: var(--font-display); font-variation-settings: 'opsz' 144; font-style: italic; color: var(--persimmon); font-weight: 500; } /* ── Scene 5 — Recommendation ────────────────────────────────────────── */ .stage-coach { background: var(--paper-warm); display: grid; grid-template-rows: 1fr auto; gap: 18px; padding: 22px; } .coach-flow { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 12px; position: relative; } .coach-flow-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--ink-faded); } .coach-flow-steps { display: flex; gap: 10px; align-items: stretch; } .coach-flow-3 .coach-step, .coach-flow-2 .coach-step { flex: 1; min-height: 48px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--paper); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 8px; transition: opacity var(--t-base), transform var(--t-base), border-color var(--t-base), background var(--t-base); text-align: center; } .coach-step span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-faded); } .coach-step em { font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 14px; color: var(--ink); } .coach-step-friction { border-color: rgba(229, 90, 60, 0.55); background: rgba(229, 90, 60, 0.06); } .coach-step-friction em { color: var(--persimmon-deep); } .coach-step-merged { border-color: var(--persimmon); background: var(--persimmon-soft); } .coach-step-merged em { color: var(--persimmon-deep); } /* As --p crosses the merge stage, the 3-step block fades out and 2-step block fades in */ .coach-flow-3 { opacity: calc(1 - var(--coach-merge-p, 0)); } .coach-flow-2 { opacity: var(--coach-merge-p, 0); transform: translateY(calc((1 - var(--coach-merge-p, 0)) * 8px)); } .coach-card { background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 18px 20px; position: relative; transform: translateY(calc((1 - min(1, var(--coach-card-p, 0) * 1.4)) * 24px)); opacity: calc(min(1, var(--coach-card-p, 0) * 2)); transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out); } .coach-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .coach-card-stamp { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--ink-faded); } .coach-card-pri { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--persimmon); border: 1px solid var(--persimmon); padding: 3px 8px; border-radius: 4px; } .coach-card-title { font-family: var(--font-display); font-variation-settings: 'opsz' 72; font-weight: 500; font-size: 17px; line-height: 1.25; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; } .coach-card-body { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--ink-soft); } /* ── Scene 6 — Impact ────────────────────────────────────────────────── */ .stage-impact { background: linear-gradient(180deg, #FAFAF7 0%, #FBEEE7 100%); display: grid; place-items: center; padding: 32px; } .impact-bars { display: flex; align-items: flex-end; gap: 36px; justify-content: center; width: 100%; } .impact-bar { flex: 0 0 auto; width: 96px; height: 240px; position: relative; display: flex; flex-direction: column-reverse; align-items: center; } .impact-bar-fill { position: absolute; bottom: 30px; left: 0; right: 0; border-radius: 8px 8px 0 0; } .impact-bar-before .impact-bar-fill { height: 36%; background: var(--ink-ghost); opacity: 0.5; } .impact-bar-after .impact-bar-fill { background: var(--persimmon); height: calc(64% * var(--impact-fill-p, 0)); transition: height 600ms var(--ease-snap); } .impact-bar-num { position: absolute; bottom: calc(36% + 38px); font-family: var(--font-display); font-variation-settings: 'opsz' 144; font-weight: 500; font-style: italic; font-size: 36px; color: var(--ink); letter-spacing: -0.02em; } .impact-bar-after .impact-bar-num { bottom: calc((64% * var(--impact-fill-p, 0)) + 38px); color: var(--persimmon-deep); opacity: var(--impact-num-p, 0); transition: opacity var(--t-base) var(--ease-out), bottom 600ms var(--ease-snap); } .impact-bar-num small { font-size: 0.55em; font-weight: 400; font-style: normal; color: var(--ink-faded); margin-left: 1px; } .impact-bar-after .impact-bar-num small { color: var(--persimmon); } .impact-bar-label { position: absolute; bottom: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faded); } .impact-arrow { font-family: var(--font-display); font-style: italic; font-size: 32px; color: var(--ink-faded); margin-bottom: 110px; opacity: calc(min(1, var(--impact-fill-p, 0) * 2)); } /* ── CTA ─────────────────────────────────────────────────────────────── */ .cta { padding: clamp(96px, 14vw, 180px) 0; background: var(--paper-warm); border-top: 1px solid var(--rule); } .cta-inner { max-width: var(--col-narrow); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); text-align: center; } .cta-kicker { color: var(--persimmon); } .cta-title { font-family: var(--font-display); font-variation-settings: 'opsz' 144; font-weight: 500; font-size: clamp(40px, 6vw, 72px); line-height: 1.0; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 20px; } .cta-sub { font-family: var(--font-body); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-soft); max-width: 56ch; margin: 0 auto 40px; } /* Signup form */ .signup { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; margin: 0 auto 14px; justify-content: center; } .signup-input { flex: 1 1 240px; min-width: 0; height: 50px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 15px; font-weight: 400; outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .signup-input::placeholder { color: var(--ink-ghost); } .signup-input:focus { border-color: var(--persimmon); box-shadow: 0 0 0 3px var(--persimmon-soft); } .signup-btn { flex: 0 0 auto; height: 50px; padding: 0 22px; border-radius: 6px; border: 1px solid var(--persimmon); background: var(--persimmon); color: #FFFFFF; font-family: var(--font-body); font-size: 15px; font-weight: 500; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .signup-btn:hover { background: var(--persimmon-deep); border-color: var(--persimmon-deep); } .signup-btn:active { transform: translateY(1px); } .signup-btn:disabled { opacity: 0.6; cursor: default; } .signup-fine { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--ink-faded); text-align: center; } /* Hero signup variant — translucent input on the gradient */ .hero .signup { margin-left: 0; } .hero .signup-fine { text-align: left; } .hero .signup-input { background: rgba(255, 255, 255, 0.94); } .hero .signup-input:hover { background: #FFFFFF; } /* ── Footer ──────────────────────────────────────────────────────────── */ .footer { background: var(--paper); border-top: 1px solid var(--rule); padding: 0 0 40px; position: relative; } .footer-strip { height: 3px; width: 100%; background: var(--gradient-sunrise); background-size: 200% 200%; animation: shimmer 14s ease-in-out infinite alternate; margin-bottom: 56px; } .footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding-bottom: 36px; border-bottom: 1px solid var(--rule); } .footer-brand .brand { margin-bottom: 10px; } .footer-tagline { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--ink-faded); max-width: 44ch; } .footer-nav { display: flex; gap: 28px; flex-wrap: wrap; } .footer-nav a { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink-soft); } .footer-nav a:hover { color: var(--persimmon-deep); } .footer-bottom { margin-top: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-ghost); } @media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr; gap: 24px; align-items: flex-start; } } /* ── Responsive (tablet & smaller) ───────────────────────────────────── */ @media (max-width: 960px) { .scene-frame { grid-template-columns: 1fr; gap: 36px; } .scene-frame-rev { grid-template-columns: 1fr; } .scene-stage { aspect-ratio: 6 / 5; } } @media (max-width: 720px) { /* Disable sticky pinning on mobile — let scenes stack naturally, but give every scene at least one viewport so scroll-snap pages cleanly. */ .scene { height: auto; min-height: 100vh; } .scene-pin { position: static; height: auto; min-height: 100vh; padding: 80px 0 60px; display: flex; align-items: center; } .scene-words { opacity: 1; transform: none; } .scene-frame { gap: 28px; } .stage-watch, .stage-diagnose, .stage-coach, .stage-impact { aspect-ratio: 4 / 3; } .stage-pattern { aspect-ratio: 5 / 4; } .hero { min-height: 100vh; padding: 120px 0 80px; } .impact-bars { gap: 16px; } .impact-bar { width: 80px; height: 200px; } .impact-bar-num { font-size: 28px; } .hero-title { font-size: clamp(48px, 12vw, 72px); } .cta { padding: 80px 0 100px; } } /* ── Reduced motion ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .hero-bg, .footer-strip { animation: none; } .hero-arrow { animation: none; } /* When motion is reduced, force everything to its "complete" state */ .scene { height: auto; } .scene-pin { position: static; height: auto; padding: 80px 0; } .scene-words { opacity: 1; transform: none; } .watch-cursor, .diag-cursor { opacity: 1; offset-distance: 100%; } .pat-edges path { stroke-dashoffset: 0; opacity: 0.5; } .pat-edges path.edge-hl { stroke: var(--persimmon); opacity: 1; stroke-width: 1.6; } .pat-nodes .row-1, .pat-nodes .row-2, .pat-nodes .row-3 { opacity: 1; } .pat-nodes .node-hl circle { fill: var(--persimmon-soft); stroke: var(--persimmon); } .pat-nodes .node-hl .pat-label-text { fill: var(--persimmon-deep); } .pat-pulse { display: none; } .diag-badge, .diag-rewind { opacity: 1; transform: none; } .diag-step-friction { border-color: var(--persimmon); background: rgba(229, 90, 60, 0.10); } .coach-flow-3 { opacity: 0.4; } .coach-flow-2 { opacity: 1; transform: none; } .coach-card { opacity: 1; transform: none; } .impact-bar-after .impact-bar-fill { height: 64%; } .impact-bar-after .impact-bar-num { opacity: 1; bottom: calc(64% + 38px); } } /* ── Legal pages (privacy, terms) ────────────────────────────────────── */ .legal-page { padding: 96px 0 120px; background: var(--paper); } .legal-page .legal-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; } .legal-page .legal-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--persimmon); margin-bottom: 14px; } .legal-page h1 { font-family: var(--font-display); font-variation-settings: "opsz" 144; font-weight: 500; font-size: clamp(40px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 12px; } .legal-page .legal-effective { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-faded); margin-bottom: 48px; } .legal-page h2 { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.01em; color: var(--ink); margin: 48px 0 14px; scroll-margin-top: 80px; } .legal-page h3 { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0; color: var(--ink); margin: 28px 0 10px; text-transform: none; } .legal-page p, .legal-page li { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; } .legal-page ul, .legal-page ol { padding-left: 22px; margin: 0 0 18px; } .legal-page li { margin-bottom: 6px; } .legal-page a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--ink-ghost); transition: color var(--t-fast), text-decoration-color var(--t-fast); } .legal-page a:hover { color: var(--persimmon); text-decoration-color: var(--persimmon); } .legal-page .legal-toc { border: 1px solid var(--rule, rgba(10,10,11,0.08)); border-radius: 4px; padding: 18px 22px; background: var(--paper-warm); margin: 0 0 48px; } .legal-page .legal-toc h3 { margin: 0 0 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faded); font-weight: 500; } .legal-page .legal-toc ol { margin: 0; padding-left: 18px; columns: 2; column-gap: 24px; } .legal-page .legal-toc li { margin: 0 0 4px; font-size: 14px; } .legal-page strong { color: var(--ink); font-weight: 600; } .legal-page em { font-style: italic; } .legal-page .legal-callout { border-left: 2px solid var(--persimmon); background: var(--persimmon-soft); padding: 16px 22px; margin: 24px 0; border-radius: 0 4px 4px 0; } .legal-page .legal-callout p:last-child { margin-bottom: 0; } @media (max-width: 720px) { .legal-page { padding: 64px 0 80px; } .legal-page .legal-toc ol { columns: 1; } }