:root { /* DESIGN TOKENS — derive from the brand imagery, do not ship as-is */ /* pulled off the footage: tungsten lamp on a dark desk, plus the site's highlighter yellow so the film page and the main site read as one thing */ --fx-bg: #100c07; --fx-bg2: #1b1510; --fx-ink: #f2efe4; --fx-ink-dim: rgba(242, 239, 228, 0.60); --fx-accent: #ffe14a; /* highlighter — same as the site */ --fx-accent-deep: #5a4a12; --fx-pop: #de3323; /* red pen */ --fx-line: rgba(242, 239, 228, 0.14); --fx-mono: 'JetBrains Mono', monospace; --fx-display: 'Clash Display', sans-serif; --fx-sans: 'Satoshi', sans-serif; --fx-marker: 'Permanent Marker', cursive; } * { margin: 0; padding: 0; box-sizing: border-box; } /* overflow-x MUST stay on only. On it computes overflow-y:auto, which makes body the scroll container for .scene-sticky and silently kills every position:sticky in the page — scene copy then scrolls past instead of pinning. Measured, not theorized. */ html { scrollbar-width: thin; scrollbar-color: var(--fx-accent-deep) var(--fx-bg); overflow-x: hidden; } html, body { background: var(--fx-bg); color: var(--fx-ink); font-family: var(--fx-sans); } ::selection { background: var(--fx-pop); color: var(--fx-ink); } a { color: inherit; text-decoration: none; } /* ---------- LOADER ---------- */ .loader { position: fixed; inset: 0; z-index: 100; background: var(--fx-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; transition: opacity 0.7s ease, visibility 0.7s; } .loader.done { opacity: 0; visibility: hidden; pointer-events: none; } .loader .brand { font-family: var(--fx-display); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(30px, 5vw, 48px); } .loader .bar { width: min(320px, 70vw); height: 2px; background: var(--fx-line); position: relative; } .loader .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--fx-accent); transition: width 0.2s; } .loader .pct { font-family: var(--fx-mono); font-size: 12px; color: var(--fx-ink-dim); letter-spacing: 0.2em; } /* ---------- FIXED CANVAS + VIGNETTE ---------- */ .canvas-wrap { position: fixed; inset: 0; z-index: 1; } .canvas-wrap canvas { width: 100%; height: 100%; display: block; } .vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 18%, transparent 78%, rgba(0,0,0,0.5) 100%); } /* ---------- NAV ---------- */ .fx-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(18px, 4vw, 44px); background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent); } .fx-nav .fx-lockup { font-family: var(--fx-display); font-weight: 700; letter-spacing: -0.03em; font-size: 22px; } .fx-nav .fx-links { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 30px); } .fx-nav .fx-links a { font-family: var(--fx-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--fx-ink-dim); transition: color 0.2s; } .fx-nav .fx-links a:hover { color: var(--fx-accent); } .fx-nav .fx-links a.fx-cta { color: var(--fx-ink); background: var(--fx-pop); padding: 9px 18px; border-radius: 2px; font-weight: 600; letter-spacing: 0.14em; transition: filter 0.2s, transform 0.2s; } .fx-nav .fx-links a.fx-cta:hover { filter: brightness(1.15); transform: translateY(-1px); } @media (max-width: 640px) { .fx-nav .fx-links a:not(.fx-cta) { display: none; } } /* ---------- CHAPTER RAIL ---------- */ .chapters { position: fixed; right: clamp(14px, 2.5vw, 34px); top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; gap: 18px; } .chapters .ch { display: flex; align-items: center; gap: 10px; justify-content: flex-end; cursor: pointer; } .chapters .ch .lbl { font-family: var(--fx-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--fx-ink-dim); opacity: 0; transform: translateX(6px); transition: opacity 0.3s, transform 0.3s, color 0.3s; } .chapters .ch .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fx-ink-dim); opacity: 0.5; transition: all 0.3s; } .chapters .ch.active .lbl { opacity: 1; transform: translateX(0); color: var(--fx-accent); } .chapters .ch.active .dot { background: var(--fx-pop); opacity: 1; box-shadow: 0 0 0 4px rgba(196, 68, 46, 0.25); } @media (max-width: 760px) { .chapters { display: none; } } /* ---------- SCENE CONTENT ---------- */ .content { position: relative; z-index: 10; } .scene { min-height: 220vh; position: relative; } .scene-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 clamp(20px, 5vw, 72px) clamp(56px, 10vh, 110px); } .scene[data-align="right"] .scene-sticky { align-items: flex-end; text-align: right; } .scene[data-align="center"] .scene-sticky { align-items: center; text-align: center; justify-content: center; } .scene .kicker { font-family: var(--fx-marker); font-size: clamp(13px, 1.5vw, 17px); letter-spacing: 0.01em; color: var(--fx-accent); text-transform: uppercase; margin-bottom: 18px; } .scene h2 { /* Clash Display has no italic — leaving font-style:italic on made the browser synthesise an oblique, which reads as a rendering bug */ font-family: var(--fx-display); font-weight: 700; font-style: normal; font-size: clamp(42px, 7.4vw, 108px); line-height: 0.9; letter-spacing: -0.04em; max-width: 11ch; text-wrap: balance; } .scene[data-align="center"] h2 { max-width: 16ch; } .scene h2 em { font-style: normal; color: var(--fx-accent); } .scene .sub { margin-top: 22px; max-width: 44ch; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.65; color: var(--fx-ink-dim); font-weight: 400; } .scene .scroll-hint { margin-top: 40px; font-family: var(--fx-mono); font-size: 10px; letter-spacing: 0.3em; color: var(--fx-ink-dim); display: flex; align-items: center; gap: 12px; } .scene .scroll-hint .arrow { color: var(--fx-pop); animation: hintdrop 1.6s ease-in-out infinite; } @keyframes hintdrop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } } .reveal { opacity: 0; transform: translateY(28px); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .ticker .track, .scene .scroll-hint .arrow { animation: none; } } /* styles.css sets `body { color: }` and loads after this file, so anything in the film that inherits its colour (the h2 especially) went dark on dark. The film's own containers reassert their palette. */ .loader, .fx-nav, .chapters, .content, .scene h2 { color: var(--fx-ink); } /* ── the seam ──────────────────────────────────────────────────────── The film is a fixed canvas the scenes scrub over; .site is an opaque sheet that scrolls up on top of it and returns the page to paper. */ .site { position: relative; z-index: 20; background: var(--paper, #f2efe4); border-top: 2px solid #16150f; box-shadow: 0 -50px 90px -30px rgba(0,0,0,.85); } .fx-nav.is-site { background: color-mix(in srgb, #f2efe4 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1.5px solid #16150f; } .fx-nav.is-site .fx-lockup, .fx-nav.is-site .fx-links a { color: #16150f; } .fx-nav.is-site .fx-links a:hover { color: #de3323; } .fx-nav.is-site .fx-links a.fx-cta { color: #fbf9f2; background: #16150f; } .fx-nav.is-site .nav-what { color: #de3323; } .fx-chapters { transition: opacity .35s; } .fx-chapters.is-hidden { opacity: 0; pointer-events: none; } /* CTAs on the film's closing scene — the hero moment */ .cta-row-film { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .b-film { display: inline-flex; align-items: center; justify-content: center; font-family: var(--fx-mono); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 15px 24px; border: 2px solid var(--fx-ink); border-radius: 2px; color: var(--fx-ink); background: rgba(16,12,7,.5); backdrop-filter: blur(3px); transition: transform .12s, filter .12s; } .b-film:hover { transform: translateY(-2px); } .b-film.is-hi { background: var(--fx-accent); border-color: var(--fx-accent); color: #16150f; } .nav-what { font-family: var(--fx-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fx-pop); background: none; border: 0; cursor: pointer; padding: 3px 0; } .nav-what:hover { color: var(--fx-accent); } @media (max-width: 900px) { .fx-links a:not(.fx-cta), .nav-what { display: none; } } /* Scene copy sits on live footage and the lit frames wash it out, so it needs a scrim — but the scrim must NOT live on .scene-sticky. Each sticky is one viewport inside a 150vh scene, so its gradient slides in and out as you scroll and you see a dark band cross the film every scene. Put it on the already-fixed vignette instead: constant, never moves, so the film reads as one continuous take and the type still holds. */ .vignette { background: radial-gradient(ellipse at center, transparent 44%, rgba(0,0,0,.42) 100%), linear-gradient(to bottom, rgba(0,0,0,.42) 0%, transparent 16%, transparent 46%, rgba(10,7,4,.62) 74%, rgba(10,7,4,.9) 100%); } .scene h2 { text-shadow: 0 2px 26px rgba(0,0,0,.55); } .scene .sub { text-shadow: 0 1px 12px rgba(0,0,0,.6); } /* 220vh/scene (the template default) made a 20-second film take 8.8 screens of scrolling, which reads as broken rather than cinematic. 150vh over 260 frames is still ~21px of scroll per frame — plenty for a smooth scrub. */ .scene { min-height: 150vh; } html { scroll-snap-type: none; }