/* ========================================================================== StarzVmail — "YOUR EMAIL. THEIR STORAGE." style.css Structure 1. Tokens & reset 2. Type scale & shared primitives 3. Navigation + story control 4. The cinema (scenes, pins, stages, beats) 5. Act I — accumulation 6. Act II — the question 7. Act III— the transfer 8. Standing sections (reveal, thesis, chain, product, trust, moved, compatibility, difference, philosophy, FAQ, join) 9. Footer 10. Responsive 11. prefers-reduced-motion Motion rule used throughout: only transform and opacity are animated. Nothing here animates width, height, top or left. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS & RESET -------------------------------------------------------------------------- */ :root { --bg: #050507; --bg-2: #08080c; --ink: #f4f5f7; --ink-2: rgba(244,245,247,.68); --ink-3: rgba(244,245,247,.58); --ink-4: rgba(244,245,247,.16); --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); --glass: rgba(255,255,255,.035); --glass-2: rgba(255,255,255,.06); --mint: #79e0d0; --mint-dim: rgba(121,224,208,.16); --mint-glow: rgba(121,224,208,.30); --amber: #e8b96a; --rust: #e07a6a; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --pad: clamp(20px, 5vw, 64px); --maxw: 1180px; } *, *::before, *::after { box-sizing: border-box; } /* The `hidden` attribute must always win. Any rule below that sets an explicit `display` (flex, grid, inline-flex…) on an element we also toggle with `hidden` would otherwise out-specify the UA sheet's `[hidden]` and leave the element on screen with no way to dismiss it. */ [hidden] { display: none !important; } html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* While the story engine is driving the page it must scroll INSTANTLY. scroll-behavior: smooth applies to window.scrollTo() too, so a per-frame programmatic scroll becomes a stack of competing animations that Chrome then abandons the moment the beats touch the scroller — the page lags and overshoots, and the pinned act ends up above the fold. */ html.story-playing, html.story-playing body { scroll-behavior: auto; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.55; font-size: 17px; /* clip, NOT hidden: overflow-x:hidden on makes the body a scroll container, which is precisely what stops the cinema's position:sticky pins from pinning on mobile Safari/Chrome — the stage then scrolls away with the page and the current beat rides up out of the viewport. overflow: clip contains the same horizontal bleed without creating a scroll container, so the pins keep working. */ overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Fallback for engines without overflow:clip (Safari < 16). They keep the old containment; the pins are rescued by the JS hold-the-beat correction. */ @supports not (overflow-x: clip) { body { overflow-x: hidden; } } img, svg, canvas { display: block; max-width: 100%; } button { font: inherit; color: inherit; } a { color: var(--mint); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 4px; } .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; } /* Visible at rest (not just on keyboard focus) so an impatient visitor on mouse or touch can see it and jump straight to sign-up instead of having to start scrolling through the whole opening story to find a way out. Stays position:absolute (scrolls away with the page, same as before) so it only ever sits at the very top, before the fixed nav bar has slid in — it can never collide with the nav or the story-progress button, both of which are position:fixed. Kept small and low-contrast against the opening scene so it doesn't compete with the cinema; hover/focus still promotes it to the same full-strength mint pill as before. */ /* The skip link is now an ordinary link inside the sticky bar (.nav-skip, section 3) - it used to be a floating pill and it landed on top of the owner's banner artwork. Nothing floats over the artwork now. */ /* Grain/vignette that sits under everything — gives the black depth so it doesn't read as a flat #000 template background. */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, rgba(121,224,208,.055), transparent 60%), radial-gradient(90% 60% at 50% 110%, rgba(121,224,208,.035), transparent 60%); } main, .nav, .foot, .story-btn { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 2. TYPE SCALE & SHARED PRIMITIVES -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } .wrap-narrow { max-width: 780px; } .sect { padding: clamp(96px, 15vh, 180px) 0; position: relative; } .h2 { font-size: clamp(30px, 5.2vw, 62px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; margin: 0 0 20px; max-width: 17ch; } .h2-big { font-size: clamp(34px, 7vw, 88px); max-width: 14ch; letter-spacing: -.045em; } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--mint); margin: 0 0 18px; } .lede { font-size: clamp(17px, 2.1vw, 21px); color: var(--ink-2); max-width: 58ch; margin: 0 0 44px; line-height: 1.6; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 30px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-weight: 650; font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); cursor: pointer; text-decoration: none; transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); will-change: transform; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--mint); border-color: var(--mint); color: #04211d; box-shadow: 0 0 0 0 var(--mint-glow); } .btn-primary:hover { box-shadow: 0 10px 40px -8px var(--mint-glow); } .btn-ghost:hover { background: var(--glass-2); border-color: var(--line-2); } .btn-block { width: 100%; } /* Scroll-reveal primitive used by every standing section. */ .r { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); will-change: opacity, transform; } .r.in { opacity: 1; transform: translate3d(0, 0, 0); } .html.no-js .r, .no-js .r { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 3. NAVIGATION + STORY CONTROL -------------------------------------------------------------------------- */ .nav { position: relative; z-index: 2; border-top: 1px solid var(--line); background: rgba(5,5,7,.82); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); transition: background-color .4s var(--ease), border-color .4s var(--ease); } /* Kept so anything that still adds these classes cannot break the bar; it no longer hides or slides - it is pinned from the first frame. */ .nav.show, .nav.solid { opacity: 1; transform: none; } .nav-in { max-width: var(--maxw); margin: 0 auto; height: var(--nav-h); padding: 0 var(--pad); display: flex; align-items: center; gap: 20px; } .nav-logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; letter-spacing: .06em; font-size: 14.5px; } .nav-logo:hover { text-decoration: none; color: var(--mint); } .nav-mark { width: 22px; height: 22px; color: var(--mint); flex: none; } /* The Starz Stationz Technologies mark used to sit both in this bar (.nav-sst) and pinned top-left over the artwork (.sst-corner). Both are removed: it is the PARENT-COMPANY mark and belongs in the footer only (.foot-sst), where it still is. Do not put it back up here. */ .nav-links { display: flex; gap: 26px; margin-left: auto; } .nav-links a { color: var(--ink-2); font-size: 14.5px; font-weight: 500; transition: color .25s var(--ease); } .nav-links a:hover { color: var(--ink); text-decoration: none; } /* The escape hatch out of the opening story. An ordinary bar link, so it can never overlap the banner artwork at any width. */ .nav-skip { color: var(--ink-3); font-size: 13.5px; font-weight: 500; white-space: nowrap; margin-left: 12px; transition: color .25s var(--ease); } .nav-skip:hover, .nav-skip:focus { color: var(--mint); text-decoration: none; } .btn-nav { padding: 10px 20px; font-size: 14px; } .story-btn { position: fixed; left: var(--pad); bottom: 24px; z-index: 80; display: inline-flex; align-items: center; gap: 11px; padding: 11px 20px 11px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(10,10,14,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 13.5px; font-weight: 600; cursor: pointer; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); } /* Invisible must also mean untappable — otherwise a faded-out control still sits over the story catching thumbs. */ .story-btn { pointer-events: none; } .story-btn.show { opacity: 1; transform: translate3d(0, 0, 0); pointer-events: auto; } .story-btn:hover { border-color: var(--mint); background: rgba(14,20,20,.9); } .story-btn-icon { width: 0; height: 0; flex: none; border-left: 9px solid var(--mint); border-top: 6px solid transparent; border-bottom: 6px solid transparent; transition: transform .3s var(--ease); } /* No "playing" state exists any more: the control is not a stop button, it hides entirely while the story runs (site.js toggles .show off). The old .story-btn.playing square-icon rule was dead and is deliberately gone — if it returns, so does the misleading "click me to stop" affordance. */ /* -------------------------------------------------------------------------- 4. THE CINEMA Each scene is a tall scroll track; the stage inside is pinned for its duration and driven by scroll progress in JS. -------------------------------------------------------------------------- */ .scene { position: relative; } .scene-i { height: 620vh; } .scene-ii { height: 340vh; } .scene-iii { height: 520vh; } /* top/height are offset by the sticky header, so the pinned cinema sits in the space left under it - the header never covers the stage. */ .scene-pin { position: sticky; top: var(--head-h); height: calc(100vh - var(--head-h)); height: calc(100svh - var(--head-h)); overflow: hidden; } .stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 var(--pad); } /* If a stage's content is ever taller than the pin (Act III's stacked transfer rig on a narrow phone is the tight one), plain centring splits the overflow both ways and buries the top of it under the pin's clipped edge. Safe centring keeps the start of the content reachable instead. */ .stage { align-items: safe center; justify-content: safe center; } .beats { position: relative; z-index: 4; width: 100%; max-width: 1000px; display: grid; place-items: center; text-align: center; } /* Every beat occupies the same cell — they cross-fade in place, which is what makes the sequence read as one continuous shot. */ .beats > .beat { grid-area: 1 / 1; } .beat { opacity: 0; will-change: opacity, transform; margin: 0; pointer-events: none; } /* -------------------------------------------------------------------------- 5. ACT I — ACCUMULATION -------------------------------------------------------------------------- */ .ambient { position: absolute; inset: -20%; background: radial-gradient(38% 38% at 50% 50%, rgba(121,224,208,.10), transparent 70%); opacity: .8; animation: drift 26s ease-in-out infinite alternate; } @keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.12); } } /* The one promoted layer for the whole flood. */ /* The Act I email wall is scenery: aria-hidden, and now unclickable by construction. It carries no message data, so a click on it could only ever open an empty reader. pointer-events:none makes that impossible rather than merely unwired — a future hover/click rule cannot reintroduce it. */ .cards { position: absolute; inset: 0; z-index: 2; will-change: transform, opacity; pointer-events: none; } .card { pointer-events: none; cursor: default; } .card { position: absolute; left: 50%; top: 50%; width: 216px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); /* Flat gradient, no backdrop-filter: a per-card blur across ~148 cards is the single most expensive thing this page could do, and against a near-black stage it buys nothing. */ background: linear-gradient(160deg, rgba(255,255,255,.062), rgba(255,255,255,.022)); text-align: left; opacity: 0; /* 2D transform on purpose. A 3D transform here would promote every one of ~148 cards to its own compositor layer; instead the parent .cards is the single promoted layer and the cards paint into it. */ transform: translate(-50%, -50%) scale(.9); contain: layout paint; } .card-from { font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-sub { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-foot { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); } .card-kind { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink-3); } .card[data-kind="img"] .card-kind { color: var(--mint); border-color: var(--mint-dim); } .card[data-kind="pdf"] .card-kind { color: var(--amber); border-color: rgba(232,185,106,.24); } .card[data-kind="zip"] .card-kind { color: var(--rust); border-color: rgba(224,122,106,.24); } .years { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .year { position: absolute; font-family: var(--mono); font-weight: 700; color: rgba(255,255,255,.05); opacity: 0; will-change: transform, opacity; } .beat-whisper { font-size: clamp(15px, 2.2vw, 20px); color: var(--ink-2); letter-spacing: .04em; } .beat-title { font-size: clamp(38px, 9vw, 118px); line-height: .96; letter-spacing: -.05em; font-weight: 900; text-transform: uppercase; } .beat-title .l { display: block; } .beat-title .l:last-child { color: var(--mint); } .beat-count { display: flex; flex-direction: column; align-items: center; gap: 6px; } .count-n { font-family: var(--mono); font-weight: 700; font-size: clamp(52px, 11vw, 132px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .count-l { font-family: var(--mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); } .beat-meter { width: 100%; display: grid; justify-items: center; gap: 34px; } .meter-huge { font-family: var(--mono); font-weight: 700; font-size: clamp(56px, 13vw, 158px); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; text-shadow: 0 0 60px rgba(121,224,208,.22); } .meter { width: min(560px, 100%); } .meter-label { font-family: var(--mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; text-align: left; } .meter-track { height: 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); overflow: hidden; } .meter-fill { height: 100%; width: 100%; /* Defaults to the 99% state so the no-JS and reduced-motion renderings agree with the "29.8 GB / 30 GB" label baked into the markup. The scroll driver overwrites this from its very first frame. */ transform: scaleX(.993); transform-origin: left center; background: linear-gradient(90deg, var(--mint), #8ce9c4 60%, var(--amber)); will-change: transform; } .meter-foot { display: flex; justify-content: space-between; margin-top: 11px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; } .meter-pct { color: var(--ink); font-weight: 700; } .full .meter-fill { background: linear-gradient(90deg, var(--amber), var(--rust)); } .full .meter-pct { color: var(--rust); } .beat-full { font-size: clamp(44px, 12vw, 168px); line-height: .9; letter-spacing: -.055em; font-weight: 900; text-transform: uppercase; color: var(--rust); text-shadow: 0 0 90px rgba(224,122,106,.24); } .beat-doors { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 20px; } .door { border: 1px solid var(--line-2); border-radius: 4px; padding: clamp(28px, 5vw, 56px) clamp(18px, 3vw, 34px); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: clamp(180px, 30vh, 300px); position: relative; } /* The thin top edge is what makes these read as doors rather than cards. */ .door::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; } .door-a::before { background: linear-gradient(90deg, transparent, var(--rust), transparent); } .door-b::before { background: linear-gradient(90deg, transparent, var(--amber), transparent); } .door-k { font-size: clamp(18px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; line-height: 1.06; } .door-a .door-k { color: var(--rust); } .door-b .door-k { color: var(--amber); } .door-s { color: var(--ink-2); font-size: 15px; } .door-or { align-self: center; font-family: var(--mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-3); } .door-note { grid-column: 1 / -1; margin: 8px 0 0; font-size: 14.5px; color: var(--ink-3); letter-spacing: .02em; } /* -------------------------------------------------------------------------- 6. ACT II — THE QUESTION -------------------------------------------------------------------------- */ .stage-quiet::after { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 50% at 50% 50%, rgba(121,224,208,.06), transparent 70%); pointer-events: none; } .beat-wait { font-size: clamp(60px, 17vw, 220px); font-weight: 900; letter-spacing: -.06em; line-height: .85; text-transform: uppercase; } .beat-why { font-size: clamp(32px, 7.4vw, 100px); font-weight: 900; letter-spacing: -.05em; line-height: .98; text-transform: uppercase; margin: 0; } .beat-why .l { display: block; } .beat-why .l:last-child { color: var(--mint); } .beat-line { font-size: clamp(20px, 3.4vw, 40px); font-weight: 500; letter-spacing: -.03em; line-height: 1.25; max-width: 20ch; } .beat-line-2 { color: var(--mint); max-width: 24ch; } /* -------------------------------------------------------------------------- 7. ACT III — THE TRANSFER -------------------------------------------------------------------------- */ .scene-iii .stage { flex-direction: column; gap: 0; } .flow { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; } .transfer { position: relative; z-index: 3; width: min(940px, 100%); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(14px, 3vw, 40px); will-change: opacity, transform; } .vessel { text-align: center; } .vessel-k { font-family: var(--mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .vessel-s { font-size: 13px; color: var(--ink-3); margin-top: 12px; } .tank { position: relative; height: clamp(180px, 34vh, 320px); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.02); } .tank-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform: scaleY(.99); transform-origin: bottom center; background: linear-gradient(180deg, rgba(232,185,106,.5), rgba(224,122,106,.72)); will-change: transform; } .tank-alt .tank-fill { transform: scaleY(0); background: linear-gradient(180deg, rgba(121,224,208,.42), rgba(121,224,208,.72)); } .tank-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: clamp(22px, 3.6vw, 40px); font-variant-numeric: tabular-nums; letter-spacing: -.03em; text-shadow: 0 2px 18px rgba(0,0,0,.6); } .conduit { display: flex; flex-direction: column; gap: 7px; align-items: center; } .conduit span { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); opacity: .3; animation: pip 1.5s ease-in-out infinite; } .conduit span:nth-child(2) { animation-delay: .2s; } .conduit span:nth-child(3) { animation-delay: .4s; } @keyframes pip { 0%,100% { opacity: .18; } 50% { opacity: .95; } } /* The Act III beats sit in an overlay that covers the stage, so they share one grid cell and cross-fade over the transfer rig instead of pushing it. */ .beats-over { position: absolute; inset: 0; z-index: 4; padding: 0 var(--pad); /* A single full-height row, so a beat can genuinely align to the bottom of the stage rather than to the bottom of a content-sized track. */ grid-template-rows: 100%; pointer-events: none; } .beat-nodelete { font-size: clamp(15px, 2.1vw, 20px); color: var(--ink-2); max-width: 34ch; /* Sits under the rig rather than on top of it — it is a caption, not a headline, and it is on screen while the tanks are still moving. */ align-self: end; margin-bottom: clamp(28px, 6vh, 74px); } .beat-breathe, .beat-still { font-size: clamp(40px, 11vw, 150px); font-weight: 900; letter-spacing: -.055em; line-height: .9; text-transform: uppercase; } .beat-still { color: var(--mint); text-shadow: 0 0 90px var(--mint-glow); } .beat-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 6vw, 80px); width: min(820px, 100%); } .split-k { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; } .split-v { font-family: var(--mono); font-weight: 700; font-size: clamp(34px, 7vw, 78px); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; } .beat-split .split:last-child .split-v { color: var(--mint); } /* -------------------------------------------------------------------------- 8. STANDING SECTIONS -------------------------------------------------------------------------- */ /* --- Reveal --- */ .sect-reveal { text-align: center; padding-top: clamp(110px, 18vh, 200px); } .reveal-mark { color: var(--mint); display: flex; justify-content: center; margin-bottom: 26px; } .reveal-mark svg { width: 54px; height: 54px; filter: drop-shadow(0 0 30px var(--mint-glow)); } .brand { font-size: clamp(40px, 10vw, 116px); font-weight: 900; letter-spacing: -.055em; line-height: .95; text-transform: uppercase; margin: 0 0 22px; } .brand-line { font-size: clamp(19px, 3vw, 34px); font-weight: 600; letter-spacing: -.03em; margin: 0 auto 18px; max-width: 22ch; } .brand-sub { font-size: clamp(15.5px, 1.9vw, 18px); color: var(--ink-2); max-width: 54ch; margin: 0 auto 40px; } .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* --- Thesis --- */ .thesis { font-size: clamp(42px, 12vw, 168px); font-weight: 900; letter-spacing: -.06em; line-height: .88; text-transform: uppercase; margin: 0 0 clamp(48px, 8vh, 90px); } .thesis span { display: block; } .t-b { color: var(--mint); } .thesis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-bottom: clamp(60px, 10vh, 110px); } .tcol { border-top: 1px solid var(--line-2); padding-top: 24px; } .tcol-k { font-family: var(--mono); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); margin-bottom: 20px; } .tcol-alt .tcol-k { color: var(--amber); } .tcol-list { list-style: none; margin: 0 0 20px; padding: 0; } .tcol-list li { font-size: clamp(17px, 2.2vw, 23px); font-weight: 500; letter-spacing: -.02em; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); } .tcol-body { font-size: clamp(17px, 2.2vw, 23px); color: var(--ink-2); margin: 0 0 20px; line-height: 1.5; } .tcol-note { font-size: 14px; color: var(--ink-3); margin: 0; } .whyq { font-size: clamp(64px, 18vw, 240px); font-weight: 900; letter-spacing: -.07em; line-height: .82; text-align: center; margin: 0 0 24px; color: var(--mint); text-shadow: 0 0 100px var(--mint-glow); } .whya { text-align: center; font-size: clamp(19px, 3vw, 32px); font-weight: 500; letter-spacing: -.03em; max-width: 26ch; margin: 0 auto; } /* --- Chain --- */ .chain { list-style: none; margin: 40px 0 34px; padding: 0; display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; } .chain-node { flex: 1 1 150px; border: 1px solid var(--line); border-radius: 12px; padding: 18px 16px; background: var(--glass); display: flex; flex-direction: column; gap: 5px; } .chain-node-hi { border-color: var(--mint-dim); background: linear-gradient(160deg, rgba(121,224,208,.10), rgba(121,224,208,.02)); box-shadow: 0 0 50px -18px var(--mint-glow); } .cn-k { font-weight: 700; font-size: 15px; letter-spacing: -.015em; } .chain-node-hi .cn-k { color: var(--mint); } .cn-s { font-size: 13px; color: var(--ink-3); } .chain-arrow { flex: none; align-self: center; width: 20px; height: 1px; background: var(--line-2); position: relative; } .chain-arrow::after { content: ''; position: absolute; right: 0; top: -3px; border-left: 6px solid var(--line-2); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; } .chain-note { font-size: 16px; color: var(--ink-2); max-width: 62ch; margin: 0; } /* --- Product panes --- */ .panes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: start; } .pane { border: 1px solid var(--line); border-radius: 16px; background: var(--glass); padding: 18px; min-height: 420px; display: flex; flex-direction: column; } .pane-alt { border-color: var(--mint-dim); background: linear-gradient(180deg, rgba(121,224,208,.05), rgba(255,255,255,.015)); } .pane-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--line); } .pane-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; } .pane-alt .pane-k { color: var(--mint); } .pane-c { font-family: var(--mono); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .pane-hint { font-size: 13px; color: var(--ink-3); margin: 14px 0 0; } .pane-empty { font-size: 14px; color: var(--ink-3); margin: 12px 0 0; } .search { margin-bottom: 12px; } .search input { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); color: var(--ink); font-size: 14.5px; font-family: inherit; } .search input::placeholder { color: var(--ink-3); } .search input:focus { outline: none; border-color: var(--mint); } .mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .mlist-h { max-height: 420px; overflow-y: auto; padding-right: 4px; } .msg { border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; background: rgba(255,255,255,.022); display: grid; gap: 4px; transition: opacity .4s var(--ease), transform .4s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); will-change: transform, opacity; } .msg.leaving { opacity: 0; transform: translate3d(24px, 0, 0) scale(.96); } .msg.arriving { animation: land .55s var(--ease-out) both; } @keyframes land { from { opacity: 0; transform: translate3d(-22px, 0, 0) scale(.96); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } .msg-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .msg-from { font-weight: 700; font-size: 14.5px; } .msg-date { font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex: none; } .msg-sub { font-size: 14px; color: var(--ink-2); } .msg-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; } .msg-size { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); } .att { font-family: var(--mono); font-size: 10px; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line); color: var(--ink-3); } .msg-act { margin-left: auto; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-size: 12px; font-weight: 650; cursor: pointer; transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease); } .msg-act:hover { border-color: var(--mint); color: var(--mint); background: rgba(121,224,208,.07); } .msg-h { cursor: pointer; } .msg-h:hover { border-color: var(--mint-dim); background: rgba(121,224,208,.05); } .reader { position: fixed; inset: 0; z-index: 120; background: rgba(3,3,5,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: var(--pad); animation: fadein .3s var(--ease) both; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .reader-in { width: min(620px, 100%); border: 1px solid var(--line-2); border-radius: 18px; background: #0b0b10; padding: 26px; animation: rise .4s var(--ease-out) both; } @keyframes rise { from { transform: translate3d(0,18px,0); opacity: 0; } to { transform: none; opacity: 1; } } .reader-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; } .tag-arch { color: var(--mint); border: 1px solid var(--mint-dim); background: rgba(121,224,208,.07); } .reader-x { background: transparent; border: 1px solid var(--line); width: 32px; height: 32px; border-radius: 8px; font-size: 19px; line-height: 1; cursor: pointer; color: var(--ink-2); } .reader-x:hover { border-color: var(--line-2); color: var(--ink); } .reader-subject { font-size: 22px; letter-spacing: -.03em; margin: 0 0 8px; } .reader-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-bottom: 18px; } .reader-body { color: var(--ink-2); margin: 0 0 18px; } .reader-att { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .reader-foot { font-size: 13px; color: var(--ink-3); margin: 0; padding-top: 14px; border-top: 1px solid var(--line); } /* --- Trust / lifecycle --- */ .life { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: 20px; } .life-steps { list-style: none; margin: 0; padding: 0; } .life-steps li + li { margin-top: 2px; } .life-step { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 16px 18px; border: 0; border-left: 2px solid var(--line); transition: border-color .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease); cursor: pointer; background: transparent; width: 100%; text-align: left; font: inherit; } .life-step.on { border-left-color: var(--mint); background: linear-gradient(90deg, rgba(121,224,208,.07), transparent); transform: translate3d(6px, 0, 0); } .ls-n { font-family: var(--mono); font-size: 12px; color: var(--ink-3); padding-top: 4px; transition: color .3s var(--ease); } .life-step.on .ls-n { color: var(--mint); } .ls-name { font-size: clamp(17px, 2.2vw, 22px); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); transition: color .3s var(--ease); } .life-step.on .ls-name { color: var(--ink); } .ls-text { font-size: 14.5px; color: var(--ink-3); margin-top: 3px; } .life-step.on .ls-text { color: var(--ink-2); } .life-stage { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); padding: 26px; min-height: 260px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; } .ls-box { border: 1px solid var(--line-2); border-radius: 12px; padding: 16px 12px; min-height: 150px; display: flex; flex-direction: column; gap: 12px; transition: border-color .4s var(--ease); } .ls-box > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); } .ls-a { border-color: var(--mint-dim); } .ls-dots { display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; } .dot { width: 9px; height: 9px; border-radius: 3px; background: rgba(255,255,255,.22); transition: opacity .45s var(--ease), transform .45s var(--ease), background-color .45s var(--ease); } .ls-a .dot { background: var(--mint); } .dot.off { opacity: 0; transform: scale(.4); } .ls-wire { position: relative; width: clamp(40px, 8vw, 88px); height: 2px; background: var(--line); } .ls-pulse { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); opacity: 0; box-shadow: 0 0 14px var(--mint-glow); will-change: transform, opacity; } .ls-check { position: absolute; left: 50%; bottom: 16px; transform: translate3d(-50%, 6px, 0); font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); opacity: 0; transition: opacity .4s var(--ease), transform .4s var(--ease); } .ls-check.on { opacity: 1; transform: translate3d(-50%, 0, 0); } /* --- Archived doesn't mean gone --- */ .sect-moved { text-align: center; } .moved-type { font-size: clamp(38px, 11vw, 150px); font-weight: 900; letter-spacing: -.06em; line-height: .9; text-transform: uppercase; margin: 0 0 clamp(44px, 8vh, 80px); } .moved-type span { display: block; } .m2 { color: var(--ink-3); } .m3 { color: var(--rust); } .moved-demo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 4vw, 48px); text-align: left; max-width: 900px; margin: 0 auto 40px; } .md-side { position: relative; } .md-k { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .md-slot { min-height: 118px; border: 1px dashed var(--line); border-radius: 13px; padding: 10px; display: flex; align-items: center; } .md-slot-alt { border-color: var(--mint-dim); } .md-card { width: 100%; border: 1px solid var(--line-2); border-radius: 11px; padding: 14px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); will-change: transform, opacity; } /* The card leaves the mailbox on a transition, and is only re-parented into the archive once it is fully invisible — reparenting a node mid-animation restarts it in some engines and produces a visible jump. */ .md-card { transition: opacity .5s var(--ease), transform .5s var(--ease); } .md-card.leaving { opacity: 0; transform: translate3d(0, -20px, 0) scale(.9); } .md-card.landing { animation: land-arch .6s var(--ease-out) both; } @keyframes land-arch { from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.94); } to { opacity: 1; transform: none; } } .md-card.in-archive { border-color: var(--mint-dim); box-shadow: 0 0 46px -16px var(--mint-glow); } .md-from { font-weight: 700; font-size: 15px; } .md-sub { font-size: 14px; color: var(--ink-2); margin-top: 2px; } .md-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-top: 8px; } .md-ghost { position: absolute; left: 50%; top: 62%; transform: translate3d(-50%, 0, 0); font-family: var(--mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--rust); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; } .md-ghost.on { opacity: 1; } .md-open { margin-top: 14px; border: 1px solid var(--mint-dim); border-radius: 12px; padding: 16px; background: rgba(121,224,208,.05); animation: rise .5s var(--ease-out) both; } .md-body { margin: 0 0 12px; color: var(--ink-2); font-size: 14.5px; } .md-atts { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; } .md-note { margin: 0; font-size: 12.5px; color: var(--mint); } .moved-verdict { font-size: clamp(34px, 9vw, 110px); font-weight: 900; letter-spacing: -.055em; line-height: .95; text-transform: uppercase; color: var(--mint); margin: 0 0 34px; opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .moved-verdict.on { opacity: 1; transform: none; } /* --- Compatibility --- */ .provs { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .prov { border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: var(--glass); display: grid; gap: 8px; } .prov-n { font-size: 20px; font-weight: 750; letter-spacing: -.02em; } .prov-s { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; justify-self: start; padding: 4px 9px; border-radius: 6px; } .prov-ok { color: var(--mint); border: 1px solid var(--mint-dim); background: rgba(121,224,208,.07); } .prov-wait { color: var(--amber); border: 1px solid rgba(232,185,106,.26); background: rgba(232,185,106,.07); } .prov-d { font-size: 14.5px; color: var(--ink-3); } .prov-soon { grid-column: 1 / -1; border-color: rgba(232,185,106,.2); } .compat-note { font-size: 15px; color: var(--ink-3); margin: 0; } /* --- The big difference --- */ .diff { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 36px); } .way { border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 3.4vw, 40px); background: var(--glass); } .way-new { border-color: var(--mint-dim); background: linear-gradient(170deg, rgba(121,224,208,.07), rgba(255,255,255,.015)); } .way-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 26px; } .way-new .way-k { color: var(--mint); } .way-flow { list-style: none; margin: 0; padding: 0; } .wf { position: relative; padding: 15px 0 15px 26px; font-size: clamp(16px, 2vw, 19px); font-weight: 600; letter-spacing: -.02em; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } .diff.run .wf { opacity: 1; transform: none; } .way-old .wf { transition-delay: calc(var(--i, 0) * .38s); } .way-new .wf { transition-delay: calc(var(--i, 0) * .18s); } .wf::before { content: ''; position: absolute; left: 3px; top: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); } .way-new .wf::before { background: var(--mint); } .wf + .wf::after { content: ''; position: absolute; left: 6px; top: -8px; height: 24px; width: 1px; background: var(--line); } .wf-fork { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .fork-a { color: var(--rust); } .fork-b { color: var(--amber); } .fork-or { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; } .wf-end { color: var(--ink-3); } .way-new .wf-end { color: var(--mint); } /* --- Philosophy --- */ .sect-philo { text-align: center; } .philo { margin: 0 0 clamp(56px, 10vh, 110px); font-size: clamp(28px, 6.6vw, 88px); font-weight: 900; letter-spacing: -.05em; line-height: 1.02; text-transform: uppercase; } .philo span { display: block; } .p1 { margin-bottom: clamp(28px, 5vh, 54px); } .p2 { color: var(--mint); } .philo-3 { display: flex; flex-direction: column; gap: 4px; font-size: clamp(30px, 8vw, 104px); font-weight: 900; letter-spacing: -.055em; line-height: .96; text-transform: uppercase; margin: 0; } .philo-3 span:nth-child(1) { color: var(--ink); } .philo-3 span:nth-child(2) { color: rgba(244,245,247,.55); } .philo-3 span:nth-child(3) { color: var(--mint); } /* --- FAQ --- */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { padding: 22px 40px 22px 0; font-size: clamp(16.5px, 2vw, 20px); font-weight: 650; letter-spacing: -.02em; cursor: pointer; list-style: none; position: relative; transition: color .25s var(--ease); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--mint); } .faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 20px; color: var(--ink-3); transition: transform .3s var(--ease), color .3s var(--ease); } .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--mint); } .faq p { margin: 0 0 24px; color: var(--ink-2); max-width: 62ch; } /* --- Join --- */ .sect-join { text-align: center; padding-bottom: clamp(90px, 14vh, 160px); } .takeback { font-size: clamp(42px, 12vw, 150px); font-weight: 900; letter-spacing: -.06em; line-height: .88; text-transform: uppercase; margin: 0 0 22px; } .takeback span { display: block; } .takeback span:last-child { color: var(--mint); } .takeback-sub { font-size: clamp(16px, 2.2vw, 20px); color: var(--ink-2); max-width: 46ch; margin: 0 auto clamp(44px, 7vh, 70px); } .countdown { margin-bottom: clamp(40px, 6vh, 64px); } .cd-k { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; } .cd-units { display: flex; align-items: flex-start; justify-content: center; gap: clamp(6px, 1.6vw, 16px); } .cd-u { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: clamp(52px, 11vw, 92px); } .cd-n { font-family: var(--mono); font-weight: 700; font-size: clamp(34px, 8vw, 68px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .cd-l { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); } .cd-sep { font-family: var(--mono); font-size: clamp(24px, 5vw, 46px); color: var(--ink-4); line-height: 1.1; } .cd-open { font-size: 18px; color: var(--mint); font-weight: 600; margin: 8px 0 0; } /* One-second tick on the seconds digit — the only "widget" motion, and it is a fade, not a flip. */ .cd-n.tick { animation: tick .5s var(--ease) both; } @keyframes tick { from { opacity: .35; } to { opacity: 1; } } .form { text-align: left; display: grid; gap: 16px; } .field { display: grid; gap: 7px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field label { font-size: 13.5px; color: var(--ink-2); font-weight: 550; } .req { color: var(--mint); } .opt { color: var(--ink-3); font-weight: 400; } .field input, .field select { width: 100%; padding: 14px 15px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); color: var(--ink); font: inherit; font-size: 15.5px; transition: border-color .25s var(--ease), background-color .25s var(--ease); } .field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 19px) 22px, calc(100% - 14px) 22px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .field select option { background: #0b0b10; color: var(--ink); } .field input::placeholder { color: var(--ink-3); } .field input:focus, .field select:focus { outline: none; border-color: var(--mint); } .field input[aria-invalid="true"] { border-color: var(--rust); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-msg { margin: 4px 0 0; font-size: 14.5px; min-height: 1.4em; } .form-msg.ok { color: var(--mint); } .form-msg.err { color: var(--rust); } .form-note { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-3); } /* -------------------------------------------------------------------------- 9. FOOTER -------------------------------------------------------------------------- */ .foot { border-top: 1px solid var(--line); padding: 40px 0 56px; } .foot-in { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline; } .foot-b { font-weight: 800; letter-spacing: .08em; font-size: 14px; } .foot-t { color: var(--ink-3); font-size: 14px; } .foot-link { color: var(--ink-3); font-size: 13.5px; } .foot-link:hover { color: var(--mint); text-decoration: none; } .foot-c { margin-left: auto; color: var(--ink-3); font-size: 13px; display: flex; align-items: center; gap: 12px; } /* Full SST logo, name included. Downscaled copy of assets/sst-logo.png; it has a black background, so it sits in a thin outlined tile on purpose. */ .foot-sst { width: 150px; height: auto; border-radius: 10px; border: 1px solid var(--line); } /* -------------------------------------------------------------------------- 10. RESPONSIVE The mobile build is not a squeezed desktop: the cinema goes vertical, the two vessels stack, and every scene gets its own scroll budget. -------------------------------------------------------------------------- */ @media (max-width: 900px) { .thesis-grid, .panes, .life, .diff, .moved-demo, .provs { grid-template-columns: 1fr; } .prov-soon { grid-column: auto; } .nav-links { display: none; } .nav-in { gap: 12px; } .nav-skip { margin-left: 0; margin-right: auto; } .btn-nav { margin-left: auto; } .mlist-h { max-height: 340px; } .life-stage { margin-top: 8px; } } @media (max-width: 720px) { body { font-size: 16px; } .scene-i { height: 560vh; } .scene-ii { height: 320vh; } .scene-iii { height: 480vh; } .card { width: 172px; padding: 10px 12px; } /* Doors stack vertically — on a phone they read as two gates you scroll between, which if anything is stronger than side by side. */ .beat-doors { grid-template-columns: 1fr; gap: 12px; } .door { min-height: 0; padding: 22px 20px; } .door-or { padding: 2px 0; } .door-note { margin-top: 4px; } /* The provider → archive transfer becomes top-to-bottom. */ .transfer { grid-template-columns: 1fr; gap: 12px; } .tank { height: clamp(120px, 20vh, 170px); } .conduit { flex-direction: row; } .beat-split { grid-template-columns: 1fr; gap: 22px; } .chain { flex-direction: column; } .chain-arrow { width: 1px; height: 18px; margin-left: 16px; align-self: flex-start; } .chain-arrow::after { right: auto; left: -3px; top: auto; bottom: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 6px solid var(--line-2); border-bottom: 0; } .field-row { grid-template-columns: 1fr; } .cta-row .btn { width: 100%; } .story-btn { left: 12px; right: 12px; bottom: 12px; justify-content: center; } .foot-c { margin-left: 0; } /* The banner directly above already carries the brand at phone width, so the bar drops its own wordmark and gives the room to the two controls that actually do something. */ .nav-logo { display: none; } .btn-nav { padding: 9px 14px; font-size: 13.5px; white-space: nowrap; } .life-stage { padding: 18px; min-height: 210px; } } @media (max-width: 380px) { .cd-units { gap: 2px; } .cd-u { min-width: 46px; } .nav-skip { font-size: 12.5px; } .btn-nav { padding: 8px 11px; font-size: 13px; } } /* -------------------------------------------------------------------------- 11. prefers-reduced-motion — the global brake Kills declared animation and shortens transitions for anyone whose device asks for it. The still version of the page itself is section 11b below, which is keyed on html.rm (media query OR the footer switch). -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .16s !important; } } /* -------------------------------------------------------------------------- 11b. THE STILL VERSION (html.rm) 2026-09-03: this used to be the pinned story with the pinning taken off, which printed fourteen full-screen headlines as one enormous list — the giant type meant for one-at-a-time reading, stacked. It is now built as what it should have been from the start: an ordinary landing page that carries the same words in the same order, at ordinary sizes. Rules held here: nothing depends on scroll position, no element is a viewport tall, and no display type. The animated story is untouched — every selector below is under .rm. -------------------------------------------------------------------------- */ /* --- No pinning, no 100vh: each act is a normal, self-sized section --- */ .rm .scene, .rm .scene-i, .rm .scene-ii, .rm .scene-iii { height: auto; min-height: 0; } .rm .scene-pin { position: static; height: auto; padding: clamp(40px, 6vh, 72px) 0; } .rm .scene-i .scene-pin { padding-top: clamp(76px, 11vh, 120px); } .rm .scene-ii, .rm .scene-iii { border-top: 1px solid var(--line); } /* Scenery that only meant anything in motion. */ .rm .ambient, .rm .years, .rm .flow, .rm .conduit { display: none; } /* The stage becomes a plain column: the words, then the picture. */ .rm .stage { display: flex; flex-direction: column; align-items: center; padding: 0 var(--pad); min-height: 0; } .rm .beats { order: 1; } .rm .cards { order: 2; } .rm .transfer { order: 3; } /* Beats leave the shared grid cell and become ordinary blocks in a row that wraps — full width by default, three-across for the numbers. */ .rm .beats { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; width: 100%; max-width: 860px; margin: 0 auto; } .rm .beats-over { position: static; inset: auto; padding: 0; grid-template-rows: none; } .rm .beats > .beat { grid-area: auto; } .rm .beat { position: static !important; transform: none !important; pointer-events: auto; flex: 1 1 100%; max-width: 100%; margin: 0 0 22px; /* Visible from the first paint. Nothing on the still page may depend on scroll position, so there is no reveal-on-scroll fade here. */ opacity: 1; transition: none; } .rm .beat:last-child { margin-bottom: 0; } /* --- ACT I becomes the hero ------------------------------------------ */ .rm .beat-whisper { font-family: var(--mono); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .rm .beat-title { font-size: clamp(30px, 5.2vw, 54px); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 0; } /* The two spans are separate lines on a pinned screen; here they are one ordinary sentence. */ .rm .beat-title .l { display: inline; } .rm .beat-title .l + .l::before { content: ' '; } /* The supporting line + the two buttons, shown only in this mode. */ /* Hidden by default (the animated story needs the headline alone on a pinned screen); a real block only in the still version. Done in CSS rather than with the hidden attribute, which Chrome now enforces with !important and cannot be overridden. */ .rm-hero { display: none; } .rm .rm-hero { display: block; flex: 1 1 100%; margin: 18px 0 40px; } .rm .rm-hero-sub { font-size: clamp(15.5px, 1.9vw, 18px); color: var(--ink-2); max-width: 46ch; margin: 0 auto 26px; } /* --- The numbers as a small stat row, not headlines ------------------ */ .rm .beat-count, .rm .beat-meter, .rm .beat-full { flex: 1 1 190px; max-width: 320px; align-self: stretch; margin: 0 7px 20px; padding: 20px 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); text-align: center; } .rm .beat-count { justify-content: center; gap: 9px; } .rm .count-n { font-size: clamp(26px, 4.2vw, 38px); } .rm .beat-meter { display: block; } .rm .meter-huge { font-size: clamp(26px, 4.2vw, 38px); line-height: 1; margin-bottom: 14px; text-shadow: none; } .rm .meter { width: 100%; } .rm .meter-label { display: none; } .rm .meter-foot { margin-top: 9px; font-size: 12px; } .rm .beat-full { display: flex; align-items: center; justify-content: center; font-size: clamp(21px, 3vw, 29px); line-height: 1.06; letter-spacing: -.03em; text-shadow: none; } /* The two doors as ordinary side-by-side cards, sized by their words. */ .rm .beat-doors { margin-top: 10px; gap: 14px; align-items: start; } .rm .door { min-height: 0; padding: 20px; gap: 7px; } .rm .door-k { font-size: clamp(16px, 2vw, 20px); } .rm .door-s { font-size: 14px; } .rm .door-note { margin-top: 12px; } /* Nothing to skip in the still version: the hero already offers "Go to StarzVmail", so the bar's skip link is redundant there. */ .rm .nav-skip { display: none; } /* --- The mail wall: one modest illustration, once -------------------- */ .rm .cards { position: static; width: 100%; max-width: 760px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 34px auto 0; opacity: .6; } .rm .card { position: static; opacity: 1 !important; transform: none !important; width: auto; } /* --- ACT II ---------------------------------------------------------- */ .rm .beat-wait { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .26em; line-height: 1.4; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .rm .beat-why { font-size: clamp(26px, 4.2vw, 40px); line-height: 1.06; letter-spacing: -.035em; margin-bottom: 22px; } .rm .beat-why .l { display: inline; } .rm .beat-why .l + .l::before { content: ' '; } .rm .beat-line { font-size: clamp(16px, 1.9vw, 19px); font-weight: 400; letter-spacing: 0; line-height: 1.55; color: var(--ink-2); max-width: 52ch; margin: 0 auto 10px; } .rm .beat-line-2 { color: var(--mint); max-width: 52ch; } /* --- ACT III --------------------------------------------------------- */ .rm .beat-nodelete { align-self: auto; font-size: clamp(16px, 1.9vw, 19px); color: var(--ink-2); max-width: 52ch; margin: 0 auto 22px; } .rm .beat-breathe, .rm .beat-still { font-size: clamp(23px, 3.4vw, 33px); line-height: 1.06; letter-spacing: -.035em; text-shadow: none; margin-bottom: 20px; } .rm .beat-split { width: 100%; max-width: 560px; gap: 20px; margin: 0 auto 22px; } .rm .split-v { font-size: clamp(23px, 3.4vw, 33px); } .rm .transfer { width: 100%; max-width: 520px; grid-template-columns: 1fr 1fr; gap: 18px; margin: 6px auto 0; opacity: 1 !important; transform: none !important; } .rm .tank { height: 118px; } .rm .tank-fill { transition: none; } .rm .tank-num { font-size: 18px; } /* --- Standing sections: same page, just not shouted ------------------ */ .rm .sect-reveal { padding-top: clamp(52px, 8vh, 88px); } .rm .brand { font-size: clamp(32px, 5.6vw, 58px); } .rm .thesis { font-size: clamp(26px, 4.4vw, 46px); line-height: 1.04; letter-spacing: -.04em; margin-bottom: clamp(32px, 5vh, 56px); } .rm .r { opacity: 1; transform: none; } .rm .wf { opacity: 1; transform: none; } .rm .moved-verdict { opacity: 1; transform: none; } /* There is no story to play in this mode, so the control is not offered. */ .rm .story-btn { display: none !important; } /* -------------------------------------------------------------------------- The footer switch between the two versions. Present in BOTH modes. -------------------------------------------------------------------------- */ .foot-switch { background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px; color: var(--ink-3); cursor: pointer; } .foot-switch:hover { color: var(--mint); } /* No-JS: never trap the visitor inside an unpinned, invisible story. */ .no-js .scene-i, .no-js .scene-ii, .no-js .scene-iii { height: auto; } .no-js .scene-pin { position: static; height: auto; padding: 80px 0; } .no-js .beat { opacity: 1; position: static !important; } .no-js .beats { display: block; } .no-js .cards, .no-js .years, .no-js .flow, .no-js .ambient { display: none; } /* The bar is plain markup now - it works without JS, so only the story control (which is pure JS) goes. */ .no-js .story-btn { display: none; } /* ====================================================================== BRAND BANNERS + THE STICKY SITE HEADER The owner's own artwork (assets/brand/header-banner.png, footer-bar.png). It is only ever cropped by object-fit - never stretched, never redrawn. The header banner and the nav bar are one sticky block (.site-head). Because it is position:sticky and not position:fixed it occupies real space in the flow, so the pinned story stages below simply start under it (their sticky top is --head-h) and it can never sit over the cinema. Heights are fixed numbers, not ratios, for one reason: --head-h has to be a constant the pinned stages can subtract. At the very top the banner is tall; past 60px of scroll .site-head gets .compact and the banner drops to the short slice whose height IS --banner-h-c, so the pinned height is exactly --head-h from the moment anything is pinned. object-position: center keeps the centre band of the artwork - the StarzVmail wordmark and the "where stars protect your mail" tagline - through the crop at every size. ====================================================================== */ :root { --nav-h: 52px; /* the bar under the banner */ --banner-h: 128px; /* banner height at the very top of the page */ --banner-h-c: 88px; /* banner height once collapsed (scrolled) */ /* +1px: the bar carries a 1px top border, so the header box is one pixel taller than banner + bar. */ --head-h: calc(var(--banner-h-c) + var(--nav-h) + 1px); /* 141px pinned */ } @media (max-width: 760px) { :root { --nav-h: 46px; --banner-h: 84px; --banner-h-c: 60px; } /* 106px */ } @media (max-width: 420px) { :root { --nav-h: 46px; --banner-h: 76px; --banner-h-c: 54px; } /* 100px */ } /* Anchors (#how, #reveal, #join...) must not land under the pinned header. */ html { scroll-padding-top: calc(var(--head-h) + 12px); } .site-head { position: sticky; top: 0; z-index: 100; background: #05070C; } .brand-banner, .foot-banner { display: block; width: 100%; overflow: hidden; background: #05070C; line-height: 0; } .brand-banner img, .foot-banner img { display: block; width: 100%; } .brand-banner img { /* 4 Sep: he said the header was cropped - he could not see the whole banner. At the top of the page the artwork is now shown whole, at its own 1494x266 shape (height:auto, no object-fit), so nothing is cut off at any width. Only the collapsed state crops, and that is deliberate. */ height: auto; transition: height .3s var(--ease); } .site-head.compact .brand-banner img { height: var(--banner-h-c); object-fit: cover; object-position: center; } .foot-banner img { height: auto; } .foot-banner { border-top: 1px solid var(--line); } /* The footer already draws its own top border; with the strip above it that would read as a double rule. */ .foot-banner + .foot { border-top: 0; } @media (max-width: 760px) { .foot-banner img { height: 66px; object-fit: cover; object-position: 15% center; } } @media (max-width: 420px) { .foot-banner img { height: 58px; } } /* The phone bar drops its own wordmark to make room for the skip link, but the still version has no skip link - which left an almost empty bar. Give the wordmark back there. */ @media (max-width: 720px) { .rm .nav-logo { display: flex; } }