.experiment-page { background: var(--ink); } .experiment-page main { position: relative; } .experiment-page main > .experiment-stage { margin-top: 0; } .experiment-page main > section:not(.experiment-stage), .experiment-page .site-footer { position: relative; z-index: 2; } .experiment-stage { position: relative; z-index: 1; height: 100svh; min-height: 680px; background: transparent; } /* is-hero-spent is set two ways and means the same thing both times: the film has been played and the stage is out of the document for the rest of the visit. collapseHero() in js/video-hero-experiment.js sets it the moment Welcome scrolls clear; the inline script in index.html sets it on any later load in the same tab, reading the sessionStorage flag that collapse wrote. It lives on , not , because that is what the head script can reach before first paint. Returning from the Shop is a fresh load — the collapse itself only existed in the JS state that load threw away, so without this the film would replay every time. */ html.is-hero-spent .experiment-stage { display: none; } /* Welcome is the top of the page from that moment on, and the floating header sits over the first 96px of it (76px at ≤860px). Its section label and eyebrow are both anchored to the section's top edge, so clearing them means moving the section, not padding it. The negative overlap it carries as a mid-page section goes with the same change: there is nothing left above it to overlap. One value covers both breakpoints because the two offsets shrink together — the label sits at --section-angle + 35px into the section, and the angle drops by 20px at ≤680px just as the header does at ≤860px. */ html.is-hero-spent .experiment-page .welcome { margin-top: 44px; } .experiment-sticky { --hero-opacity: 1; --hero-y: 0px; --hero-scale: 1; --cue-opacity: 1; --video-scale: 1.01; --video-brightness: 0.84; --frame-focus-x: 0.5; --frame-focus-position: center; --scroll-progress: 0; position: fixed; z-index: 0; inset: 0; width: 100%; height: 100svh; min-height: 680px; overflow: hidden; background: #050b09; color: white; isolation: isolate; pointer-events: none; } .experiment-canvas, .experiment-video, .experiment-grain { position: absolute; inset: 0; width: 100%; height: 100%; } .experiment-canvas { z-index: -4; background: #050b09 url("../assets/video-frames/banner/frame-000.webp?v=20260809-2") center / cover no-repeat; background-position: var(--frame-focus-position) center; } .experiment-video { z-index: -5; transform: scale(var(--video-scale)); background: #050b09; filter: brightness(var(--video-brightness)) saturate(1.08) contrast(1.03); opacity: 1; object-fit: cover; object-position: center; transition: opacity 180ms ease; will-change: transform, filter, opacity; } .experiment-sticky[data-frames-ready="true"] .experiment-video { opacity: 0; } .experiment-grain { z-index: -2; } .experiment-hero-copy { position: absolute; z-index: 2; right: 0; top: 66%; bottom: auto; left: 0; opacity: var(--hero-opacity); transform: translate3d(0, calc(-50% + var(--hero-y)), 0) scale(var(--hero-scale)); transform-origin: left center; pointer-events: auto; will-change: transform, opacity; } .experiment-sticky[data-hero-hidden="true"] .experiment-hero-copy { pointer-events: none; } .experiment-hero-copy h1 { max-width: 700px; margin-bottom: 26px; color: white; font-size: clamp(5.4rem, 7.8vw, 8.3rem); font-weight: 600; letter-spacing: -0.015em; line-height: 0.9; text-shadow: 0 12px 34px rgba(0, 0, 0, 0.32); } /* The payoff of the headline: white type carrying a brand-orange halo. There is deliberately no white layer in the stack — a white core washes the orange out to a pale warm haze instead of reading as orange light. The core is --orange-bright and the bloom is --orange, so the glow sits on the brand rather than near it. The h1's dark drop shadow is repeated at the end because text-shadow is replaced, not merged, when a descendant sets it again — without it this line would lose the legibility shadow the rest of the headline keeps. */ .experiment-hero-accent { /* --orange-bright, not --orange: the letters sit on a film that is not always dark, and the brighter tone holds its contrast where the deeper one starts to sink into warm frames. */ color: var(--orange-bright); /* Two glow layers, not three, and roughly half the alpha: enough warmth to lift the word off the film without the word looking lit from inside. The widest bloom is gone — that was what read as a lamp. */ text-shadow: 0 0 12px rgba(255, 141, 42, 0.34), 0 0 32px rgba(237, 103, 3, 0.22), 0 12px 34px rgba(0, 0, 0, 0.32); } .experiment-hero-lede { max-width: 520px; margin-bottom: 32px; color: rgba(255, 255, 255, 0.74); /* The reference for the whole type floor: this lede is the smallest copy in the design, so its minimum IS --text-label and nothing anywhere is set below it. The 1.04rem ceiling is the lede's own emphasis, not a scale step — it is the only size in the system above --text-base. */ font-size: clamp(var(--text-label), 1.3vw, 1.04rem); line-height: 1.6; } .experiment-scroll-cue { position: absolute; z-index: 3; right: 32px; bottom: 38px; display: flex; align-items: center; gap: 14px; opacity: var(--cue-opacity); color: rgba(255, 255, 255, 0.7); font-size: var(--text-label); font-weight: 800; letter-spacing: var(--track-label-wide); text-transform: uppercase; writing-mode: vertical-rl; will-change: opacity; } .experiment-scroll-cue i { position: relative; display: block; width: 2px; height: 74px; overflow: hidden; background: rgba(255, 255, 255, 0.2); } .experiment-scroll-cue b { position: absolute; inset: 0; transform: scaleY(var(--scroll-progress)); transform-origin: top; background: var(--orange); } /* The original angled Welcome section scrolls over the fixed film. */ .experiment-page .welcome { --welcome-bg-opacity: 0; --welcome-surface-detail: 0; --welcome-surface-shadow: 0; --welcome-text-shadow: 0.32; --welcome-title-color: rgb(255, 255, 255); --welcome-copy-color: rgba(255, 255, 255, 0.8); overflow: hidden; background: rgb(243 242 237 / var(--welcome-bg-opacity)); box-shadow: 0 -28px 80px rgb(0 0 0 / var(--welcome-surface-shadow)); color: var(--welcome-title-color); isolation: isolate; will-change: background-color; } .experiment-page .welcome__inner { opacity: 1; transform: none; text-shadow: 0 8px 28px rgb(0 0 0 / var(--welcome-text-shadow)); } .experiment-page .welcome h2 { color: var(--welcome-title-color); } .experiment-page .welcome__copy { color: var(--welcome-copy-color); } .experiment-page .welcome__slash { opacity: var(--welcome-surface-detail); } html.no-js .experiment-sticky { position: absolute; } html.no-js .experiment-canvas { display: none; } /* The surface at rest. Three ways to arrive here: no JavaScript to run the transition, a spent hero with no film left to blend against, and the reduced-motion block further down. settleWelcome() writes the same values inline when the collapse happens mid-scroll; declaring them here is what keeps a pre-collapsed load from painting white type on a transparent panel before the script runs. */ html.no-js .experiment-page .welcome, html.is-hero-spent .experiment-page .welcome { --welcome-bg-opacity: 1; --welcome-surface-detail: 1; --welcome-surface-shadow: 0.2; --welcome-text-shadow: 0; --welcome-title-color: var(--ink); --welcome-copy-color: var(--graphite); } @media (max-width: 860px) { .experiment-stage, .experiment-sticky { min-height: 620px; } .experiment-video { object-position: 58% center; } .experiment-hero-copy { top: 66%; bottom: auto; } .experiment-hero-copy h1 { font-size: clamp(4.3rem, 16vw, 7rem); } } @media (max-width: 680px) { .experiment-stage, .experiment-sticky { min-height: 590px; --frame-focus-x: 0.65; --frame-focus-position: 65%; } .experiment-video { object-position: var(--frame-focus-position) center; } .experiment-sticky::after { position: absolute; z-index: -1; right: 0; bottom: 0; left: 0; height: 64%; background: linear-gradient(0deg, rgba(2, 7, 5, 0.86) 0%, rgba(2, 7, 5, 0.44) 54%, transparent 100%); content: ""; pointer-events: none; } .experiment-hero-copy { top: 66%; bottom: auto; } .experiment-hero-copy .eyebrow { margin-bottom: 22px; } .experiment-hero-copy h1 { margin-bottom: 30px; font-size: clamp(4.1rem, 20vw, 5.2rem); } .experiment-hero-lede { max-width: calc(100% - 10px); margin-bottom: 34px; } .experiment-hero-copy .button-row { gap: 18px; } .experiment-scroll-cue { right: 10px; bottom: 24px; } .experiment-scroll-cue span { display: none; } .experiment-scroll-cue i { height: 62px; } } @media (prefers-reduced-motion: reduce) { .experiment-sticky { position: absolute; transform: none; } .experiment-canvas, .experiment-video, .experiment-grain { transform: none; } .experiment-hero-copy { opacity: 1; transform: none; } .experiment-scroll-cue { display: none; } .experiment-page .welcome { --welcome-bg-opacity: 1; --welcome-surface-detail: 1; --welcome-surface-shadow: 0.2; --welcome-text-shadow: 0; --welcome-title-color: var(--ink); --welcome-copy-color: var(--graphite); text-shadow: none; } }