; persists across a navigation. So the two pages can no longer own competing copies of the @font-face block, :root and body rules — whichever page loaded last would dictate them for the rest of the session. Everything global now lives here and loads once; style.css and wheel.css keep only their own components. Typeface: PP Supply Sans / PP Supply Mono, licensed files supplied by the client and served locally from /fonts (woff — zlib-compressed, no brotli toolchain was available at build time; fine to re-run through a woff2 compressor later, .woff is universally supported as-is). ========================================================================== */ @font-face{ font-family:'PP Supply Sans'; src:url('../fonts/PPSupplySans-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'PP Supply Sans'; src:url('../fonts/PPSupplySans-Ultralight.woff') format('woff'); font-weight:200; font-style:normal; font-display:swap; } @font-face{ font-family:'PP Supply Mono'; src:url('../fonts/PPSupplyMono-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'PP Supply Mono'; src:url('../fonts/PPSupplyMono-Ultralight.woff') format('woff'); font-weight:200; font-style:normal; font-display:swap; } :root{ --font-main:'PP Supply Sans','Neue Haas Grotesk Text','Inter',-apple-system, BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; --font-mono:'PP Supply Mono',ui-monospace,'SF Mono','Roboto Mono',monospace; --c-white:#ffffff; --c-fog:#afafaf; --c-slate:#6e6e6e; --c-label:#636363; --c-fade:#c3c3c3; /* Body ink. The two pages shipped with different values (#393939 on the wheel, #1a1a1a on the sphere) and only ever used it for `body` colour and ::selection — every visible string sets its own colour. Kept per page anyway rather than silently unifying: `data-page` is set on by the transition, which is the same hook Barba needs for anything else that has to differ between pages. */ --c-ink:#393939; --hud-size:14px; --tracking:-0.04em; } body[data-page="gallery"]{ --c-ink:#1a1a1a; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--font-main); color:var(--c-ink); background:var(--c-white); -webkit-font-smoothing:antialiased; /* Both pages are a single fixed screen and both own the wheel/scroll gesture, so nothing here should ever scroll. It also keeps the incoming Barba container — which is position:fixed while it is being revealed — from briefly adding a scrollbar. */ overflow:hidden; } img{ display:block; max-width:100%; } button{ font:inherit; } ::selection{ background:var(--c-ink); color:var(--c-white); } /* ---------------- shared HUD typography ------------------------------------ Corner labels, coordinates and the clock. Currently unused by either shipped page — kept because main.js still wires #clock / #coordX / #coordY the moment those elements are put back. */ .hud{ position:absolute; margin:0; z-index:40; font-size:var(--hud-size); line-height:.5; letter-spacing:var(--tracking); text-transform:uppercase; color:var(--c-label); white-space:nowrap; } .hud--top{ top:10px; left:50%; transform:translateX(-50%); } .hud--x{ left:33px; bottom:17px; } .hud--y{ right:10px; bottom:17px; text-align:right; } .hud--clock{ left:50%; bottom:17px; transform:translateX(-50%); display:flex; gap:6px; align-items:center; } .hud--hint{ bottom:17px; left:50%; transform:translateX(-50%); color:#9a9a9a; } @media (max-width:720px){ :root{ --hud-size:11px; } .hud--x,.hud--y{ display:none; } } /* ---------------- Barba container ------------------------------------------ The page body. Static in its resting state; the transition promotes the INCOMING one to a fixed, viewport-sized box while it is clipped open (see js/transition.js) and clears those properties again afterwards. Sizing it exactly to the viewport during that window is load-bearing: the transition's gsap.set passes force3D, and a transform makes an element the containing block for its fixed-position descendants (clip-path alone does not — measured). So while the reveal runs, .rail / .cols / .bar / .peek resolve their offsets against this box rather than the viewport, and a box of any other height slides the bottom bar off its edge for the length of the wipe. z-index:0 is the load-bearing half of this rule, not decoration. It makes the container a STACKING CONTEXT. Without one, `position:relative` leaves it at z-index auto, its positioned descendants join the ROOT stacking context, and the z-indexes inside the page (.wheel-viewport 20, .cols 40, .rail/.bar 60) are then measured against the OTHER container rather than against their own siblings. During a transition that means the outgoing page's wheel — z-index 20 — paints straight through the incoming page, which is otherwise z-index auto: both pages' cards and copy render on top of each other for the whole wipe. Contained, each page stacks internally and the two are ordered by the single z-index below. */ [data-barba="container"]{ position:relative; z-index:0; }