/* ============================================================ Heron × "particle cosmos on a void" — scrollytelling build System rules (design/DESIGN.md): - one surface: pure black; depth from contrast + negative space - no shadows, no gradients, no glows, no textures - hairline borders; 24px radius on every interactive surface - Plum Voltage is the ONLY filled chromatic surface - Amber Spark: outlined emphasis only, never a filled CTA - sole typeface; weight + tracking do all the work Layout: every chapter is a tall scroll wrapper with a sticky 100vh panel. While the wrapper scrolls, the panel pins and the 3D particle field assembles that chapter's formation. ============================================================ */ @font-face { font-family: "Geist"; src: url("assets/fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --void: #000000; --bone: #ffffff; --ash: #bdbdbd; --smoke: #9a9a9a; --plum: #8052ff; --amber: #ffb829; --lichen: #15846e; --hairline: rgba(255, 255, 255, 0.12); --hairline-soft: rgba(255, 255, 255, 0.07); --hairline-strong: rgba(255, 255, 255, 0.26); --plum-line: rgba(128, 82, 255, 0.45); --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --wrap: 1200px; --radius: 24px; --ease: cubic-bezier(0.22, 0.7, 0.25, 1); } /* ---------- reset-ish ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: clip; } /* ---------- Lenis smooth scroll (no-op until Lenis adds .lenis to ) ---------- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } body { background: var(--void); color: var(--bone); font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.025em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; /* panels scale past the edge on exit — clip, don't scroll sideways */ } /* hide the native scrollbar — replaced by the custom progress indicator */ html, body { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; } img, svg, canvas { display: block; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 4px; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 36px); width: 100%; } .plum { color: var(--plum); } .spark { color: var(--amber); } /* the continuous 3D particle field — one canvas behind everything */ .field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .nav, main, .footer, .skip-link { position: relative; z-index: 1; } /* custom scroll-progress indicator (replaces the native scrollbar): a hairline rail on the right edge with a plum fill that grows as you scroll */ .scroll-rail { position: fixed; top: 0; right: 0; width: 3px; height: 100vh; z-index: 95; background: var(--hairline-soft); pointer-events: none; } .scroll-rail i { display: block; width: 100%; height: 100%; background: var(--plum); transform: scaleY(0); transform-origin: top; will-change: transform; } .skip-link { position: fixed; top: -48px; left: 24px; z-index: 100; background: var(--plum); color: var(--bone); padding: 12px 20px; border-radius: var(--radius); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; transition: top 0.2s var(--ease); } .skip-link:focus { top: 16px; } /* ---------- type roles ---------- */ .caption { font-size: 12px; line-height: 1.5; letter-spacing: 0.05em; } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--plum); margin-bottom: 16px; } .hero-title { font-size: clamp(54px, 8.6vw, 104px); font-weight: 200; line-height: 0.86; letter-spacing: -0.04em; color: var(--bone); } .sec-title { font-size: clamp(34px, 4.8vw, 62px); font-weight: 200; line-height: 0.96; letter-spacing: -0.04em; text-wrap: balance; max-width: 12em; } /* ---------- buttons: pills, one filled color in the whole system ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: var(--radius); padding: 14px 22px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; border: 1px solid transparent; transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); } .btn-primary { background: var(--plum); color: var(--bone); } .btn-primary:hover { background: #6f41ec; } .btn-spark { border-color: var(--amber); color: var(--amber); background: transparent; } .btn-spark:hover { border-color: var(--bone); color: var(--bone); } /* ---------- micro-shape motes (the particle language, in the chrome) ---------- */ .mote { display: inline-block; width: 6px; height: 6px; flex: none; } .m-circle { border-radius: 50%; } .m-diamond { transform: rotate(45deg); } .m-triangle { width: 0; height: 0; background: transparent !important; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid currentColor; } .c-plum { background: var(--plum); color: var(--plum); } .c-amber { background: var(--amber); color: var(--amber); } .c-lichen { background: var(--lichen); color: var(--lichen); } .c-ash { background: var(--ash); color: var(--ash); } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background 0.25s var(--ease), border-color 0.25s var(--ease); } .nav.is-stuck { background: rgba(0, 0, 0, 0.88); border-bottom-color: var(--hairline-soft); } .nav-inner { display: flex; align-items: center; gap: 36px; padding-block: 18px; } .wordmark { display: inline-flex; align-items: center; gap: 10px; } .wordmark-text { font-size: 18px; font-weight: 600; letter-spacing: 0.021em; } .nav-links { display: flex; gap: 30px; margin-left: auto; } .nav-links a { font-size: 14px; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--smoke); transition: color 0.2s var(--ease); } .nav-links a:hover { color: var(--bone); } .nav-cta { flex: none; } /* ============================================================ CHAPTERS — pinned scrollytelling ============================================================ */ .chapter { height: 190vh; position: relative; } .chapter-hero { height: 175vh; } .chapter-short { height: 150vh; } .chapter-cta { height: 230vh; } .chapter-tall { height: 250vh; } /* report: dwell longer on the verdict */ .chapter-xtall { height: 280vh; } /* method: more room for the globe→hourglass morph */ /* the CURTAIN: each chapter overlaps the previous by one viewport, so the next panel is already pinned underneath while the old one fades out over it — there is never a blank screen between pages. (JS stacks z-indexes.) */ .chapter + .chapter { margin-top: -100vh; } .panel { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 60px); align-items: center; } /* alternating chapters: form on the left, content on the right */ .panel-grid--flip { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); } .panel-grid--flip > :first-child { order: 2; } .panel-copy { max-width: 560px; } .sec-head { margin-bottom: clamp(22px, 3.5vh, 40px); } .sec-head--right { margin-left: auto; max-width: 560px; } .sec-note { margin-top: 22px; color: var(--smoke); } /* content arrives as the formation completes (panel gains .lit from JS) */ .chip { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .js .chip { opacity: 0; transform: translateY(22px); } .js .panel:not(.lit) .chip { pointer-events: none; } /* invisible panels can't swallow clicks */ .js .panel.lit .chip { opacity: 1; transform: none; } .panel.lit .chip:nth-child(2), .panel.lit .panel-copy .chip:nth-child(2) { transition-delay: 0.07s; } .panel.lit .chip:nth-child(3), .panel.lit .panel-copy .chip:nth-child(3) { transition-delay: 0.14s; } .panel.lit .chip:nth-child(4) { transition-delay: 0.21s; } .panel.lit .chip:nth-child(5) { transition-delay: 0.28s; } .panel.lit .cards-3 .chip:nth-child(2) { transition-delay: 0.12s; } .panel.lit .cards-3 .chip:nth-child(3) { transition-delay: 0.24s; } .panel.lit .stages .chip:nth-child(2) { transition-delay: 0.08s; } .panel.lit .stages .chip:nth-child(3) { transition-delay: 0.16s; } .panel.lit .stages .chip:nth-child(4) { transition-delay: 0.24s; } .panel.lit .stages .chip:nth-child(5) { transition-delay: 0.32s; } .panel.lit .feature-list .chip:nth-child(2) { transition-delay: 0.1s; } .panel.lit .feature-list .chip:nth-child(3) { transition-delay: 0.2s; } .panel.lit .graphs-grid .chip:nth-child(2) { transition-delay: 0.14s; } .panel.lit .contrast .chip:nth-child(2) { transition-delay: 0.14s; } /* ---------- hero chapter ---------- */ .hero-sub { margin-top: 26px; font-size: 17px; line-height: 1.55; letter-spacing: 0.025em; color: var(--ash); max-width: 44ch; } .hero-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; } .hero-meta { margin-top: 26px; color: var(--smoke); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 12px; } .hero-meta .sep { color: var(--plum); } .panel-space { min-height: 1px; } .sources { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px 26px; padding-block: 22px; border-top: 1px solid var(--hairline-soft); margin-top: clamp(20px, 4vh, 48px); } .sources-label { color: var(--smoke); text-transform: uppercase; font-weight: 600; } .sources-list { display: flex; flex-wrap: wrap; gap: 12px 26px; } .sources-list li { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; letter-spacing: 0.021em; color: var(--ash); } /* ---------- problem cards ---------- */ .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px 24px 28px; background: rgba(14, 14, 19, 0.32); /* frosted: field blurs through, copy stays legible */ -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(1.25); backdrop-filter: blur(30px) saturate(160%) brightness(1.25); transition: border-color 0.3s var(--ease); } .card:hover { border-color: var(--hairline-strong); } .card-idx { color: var(--plum); font-weight: 600; } .card-title { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0.021em; margin: 12px 0 10px; } .card-body { color: var(--ash); font-size: 14.5px; line-height: 1.5; } .card-stat { margin-top: 14px; color: var(--smoke); text-transform: uppercase; } .cite-link { color: var(--amber); } .cite-link:hover { text-decoration: underline; } /* ---------- deliverable ---------- */ .feature-list { display: grid; gap: 20px; margin-top: 4px; } .feature { display: flex; gap: 16px; align-items: flex-start; } .feature-mark { margin-top: 7px; } .feature-title { font-size: 17px; font-weight: 600; letter-spacing: 0.025em; margin-bottom: 4px; } .feature-body { color: var(--ash); font-size: 14.5px; line-height: 1.5; max-width: 34em; } .artifact { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: rgba(14, 14, 19, 0.32); /* frosted glass over the spinning globe */ -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(1.25); backdrop-filter: blur(30px) saturate(160%) brightness(1.25); max-width: 480px; justify-self: end; width: 100%; } .panel-grid--flip .artifact { justify-self: start; } .art-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--hairline-soft); text-transform: uppercase; color: var(--ash); font-weight: 600; } .art-ver { color: var(--smoke); } .art-body { padding: 22px 22px 8px; } .art-label { text-transform: uppercase; color: var(--smoke); font-weight: 600; margin-top: 18px; } .art-label:first-child { margin-top: 0; } .art-verdict { font-size: clamp(24px, 2.4vw, 31px); font-weight: 200; letter-spacing: -0.01em; line-height: 1.15; margin-top: 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .art-pill { font-weight: 600; letter-spacing: 0.05em; padding: 5px 12px; border-radius: var(--radius); color: var(--amber); border: 1px solid var(--amber); background: transparent; } .art-gauge { height: 2px; background: var(--hairline); margin-top: 12px; } .art-gauge i { display: block; height: 100%; width: 0; background: var(--plum); transition: width 1.3s var(--ease); } .art-score { margin-top: 8px; font-size: 24px; font-weight: 200; font-variant-numeric: tabular-nums; } .art-score-max { color: var(--smoke); font-size: 14px; } .art-lines { margin-top: 18px; display: grid; gap: 10px; font-size: 13.5px; letter-spacing: 0.05em; } .art-lines li { display: flex; align-items: baseline; gap: 10px; color: var(--ash); } .dotfill { flex: 1; border-bottom: 1px dotted var(--hairline-strong); transform: translateY(-3px); } .art-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 22px; border-top: 1px solid var(--hairline-soft); margin-top: 14px; color: var(--smoke); } .art-verified { display: inline-flex; align-items: center; gap: 9px; color: var(--plum); } .seal { width: 24px; height: 24px; border: 1px solid var(--plum-line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; } /* ---------- method stages ---------- */ .stages { display: grid; gap: clamp(12px, 2vh, 22px); } .stage { display: flex; gap: 16px; align-items: baseline; } .stage-idx { color: var(--plum); font-weight: 600; flex: none; } .stage-title { font-size: 17px; font-weight: 600; letter-spacing: 0.025em; display: inline; } .stage-body { color: var(--ash); font-size: 14px; line-height: 1.45; max-width: 36em; margin-top: 2px; } /* ---------- graphs ---------- */ .graphs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .graph-panel { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: rgba(14, 14, 19, 0.32); /* frosted: web-presence + founder cards legible over the field */ -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(1.25); backdrop-filter: blur(30px) saturate(160%) brightness(1.25); } .graph-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 22px; border-bottom: 1px solid var(--hairline-soft); text-transform: uppercase; color: var(--ash); font-weight: 600; } .graph-status { color: var(--smoke); display: inline-flex; align-items: center; gap: 8px; font-weight: 400; } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--plum); } .js .live-dot { animation: blink 1.8s var(--ease) infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .graph-body { padding: 8px 6px 0; } .graph { width: 100%; height: auto; max-height: 38vh; } .gedge { fill: none; stroke: var(--hairline-strong); stroke-width: 1; } .js .graph .gedge { stroke-dasharray: 1; stroke-dashoffset: 1; } .js .graph.drawn .gedge { animation: gdraw 0.9s var(--ease) forwards; animation-delay: var(--d, 0s); } @keyframes gdraw { to { stroke-dashoffset: 0; } } .gnode { fill: var(--smoke); } .gnode-root { fill: var(--bone); } .gnode-src { fill: var(--plum); } .gflag { fill: var(--amber); } .gclear { fill: var(--lichen); } .glabel { font-family: var(--font); font-size: 12px; letter-spacing: 0.04em; fill: var(--ash); } .glabel-root { fill: var(--bone); font-weight: 600; } .glabel-src { fill: var(--smoke); } text.gflag { fill: var(--amber); } text.gclear { fill: var(--lichen); } .js .graph .gnode, .js .graph .glabel { opacity: 0; } .js .graph.drawn .gnode, .js .graph.drawn .glabel { animation: gin 0.5s var(--ease) forwards; animation-delay: var(--d, 0s); } @keyframes gin { to { opacity: 1; } } .graph-foot { display: flex; justify-content: space-between; padding: 12px 22px; border-top: 1px solid var(--hairline-soft); color: var(--smoke); text-transform: uppercase; } /* ---------- why independent ---------- */ .contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; } .contrast-card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px 26px 28px; background: rgba(14, 14, 19, 0.32); -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(1.25); backdrop-filter: blur(30px) saturate(160%) brightness(1.25); } .contrast-tag { text-transform: uppercase; font-weight: 600; color: var(--smoke); margin-bottom: 12px; } .contrast-body { color: var(--ash); font-size: 15px; line-height: 1.55; } .contrast-ours { border-color: var(--plum-line); } .contrast-ours .contrast-tag { color: var(--plum); } .contrast-ours .contrast-body { color: var(--bone); } /* frosted glass: a faint light sheen makes each pane read as glass even over empty space (e.g. the hollow centre of the report globe), while the backdrop blur reveals the cosmos through it wherever there is something behind */ .card, .artifact, .graph-panel, .contrast-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 48%, rgba(255, 255, 255, 0.07)), rgba(12, 12, 17, 0.28); border-color: rgba(255, 255, 255, 0.16); } /* ---------- finale ---------- */ .cta-inner { text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; } /* soft dark vignette so the copy reads over the bright heron, which still shows through and around it — no hard card edge */ .cta-inner::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150%; height: 175%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 42%, transparent 72%); } .cta-title { font-size: clamp(44px, 6.8vw, 88px); font-weight: 200; line-height: 0.9; letter-spacing: -0.04em; text-wrap: balance; } .cta-sub { margin-top: 20px; color: var(--bone); font-size: 18px; letter-spacing: 0.025em; } .cta-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ============================================================ FOOTER (normal flow, after the story) ============================================================ */ .footer { border-top: 1px solid var(--hairline-strong); /* a clear waterline above the footer */ background: rgba(5, 5, 8, 0.7); /* darker than the panels — keeps text legible over the heron */ -webkit-backdrop-filter: blur(30px) saturate(135%); backdrop-filter: blur(30px) saturate(135%); padding-top: clamp(48px, 8vh, 80px); padding-bottom: 40px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 36px; } .footer-tag { color: var(--ash); font-size: 14px; letter-spacing: 0.025em; max-width: 26em; margin-top: 18px; line-height: 1.55; } .footer-h { text-transform: uppercase; font-weight: 600; color: var(--smoke); margin-bottom: 16px; } .footer-col { display: flex; flex-direction: column; gap: 11px; } .footer-col a { color: var(--ash); font-size: 14px; letter-spacing: 0.021em; width: fit-content; transition: color 0.2s var(--ease); } .footer-col a:hover { color: var(--bone); } .footer-trust { color: var(--smoke); margin-top: 8px; line-height: 1.5; } .footer-base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: clamp(40px, 6vh, 64px); padding-top: 24px; border-top: 1px solid var(--hairline-soft); color: var(--smoke); } .footer-note a { color: var(--ash); } .footer-note a:hover { color: var(--bone); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1020px) { .panel-grid { grid-template-columns: 1fr; gap: 20px; } .panel { justify-content: flex-start; padding-top: 96px; } .panel-space { display: none; } .artifact { justify-self: start; } .graphs-grid { grid-template-columns: 1fr; } .graph-panel:nth-child(2) { display: none; } /* one graph fits a pinned phone viewport */ .cards-3 { grid-template-columns: 1fr; gap: 12px; } .card-body { font-size: 13.5px; } .contrast { grid-template-columns: 1fr; } .nav-links { display: none; } .sources { display: none; } } @media (max-height: 760px) { .hero-title { font-size: clamp(48px, 7vw, 84px); } .sec-title { font-size: clamp(30px, 4vw, 52px); } .card-body, .feature-body { font-size: 13.5px; } .stage-body { font-size: 13px; } .graph { max-height: 32vh; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* ============================================================ REDUCED MOTION — static end states, no pin theatrics needed ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .js .chip { opacity: 1; transform: none; } .js .graph .gedge { stroke-dashoffset: 0; } .js .graph .gnode, .js .graph .glabel { opacity: 1; } .art-gauge i { width: 78%; } .chapter { height: auto; min-height: 100vh; } .chapter + .chapter { margin-top: 0; } /* no curtain overlap without pinning */ .panel { position: relative; height: auto; min-height: 100vh; padding-block: 96px; } }