/* ============================================================================ screen.css — website layout. EDITORIAL case pages + BENTO homepage. Builds on tokens.css. Loaded only by build/site/*.html. ========================================================================== */ * { box-sizing: border-box; } /* The horizontal-clip safety net (hover-grow states — .card/.zoomable/.frag-cell scale to 1.04, transform-origin center — push ~2% of a tile's width past its own box; the --gutter margin already gives that room on ordinary layouts, but this still catches any edge case before it can force a horizontal scrollbar) is `overflow-x: clip` on BODY. The full reasoning: 1. It must NOT be `overflow-x:hidden` on html — that breaks position:sticky for every descendant in this engine (confirmed: an inert sticky div stops sticking the moment html carries overflow-x:hidden). 2. It must NOT be `overflow:hidden` on body (the previous approach). Because html's overflow is `visible`, the UA PROPAGATES body's overflow to the viewport — so `overflow:hidden` on body made the VIEWPORT non-scrollable. Desktop hid this (Lenis drives scrolling), but on touch Lenis is gated OFF (native scroll only) so mobile scrolling was completely dead — you could only pan while pinch-zoomed (a visual-viewport gesture that sidesteps the locked scroll container). This bit us hard; do not reintroduce it. 3. `overflow-x: clip` clips the horizontal overflow WITHOUT any of that: it creates no scroll container, does not trigger the paired-axis→auto quirk (that quirk is specific to hidden/scroll/auto, not clip), does not propagate a hidden overflow to the viewport, and leaves position:sticky working. overflow-y stays at its default `visible` → native scroll lives. */ /* Native scrollbar hidden site-wide — .scroll-progress (the red hairline, further down) is the visual replacement, GSAP-scrubbed 1:1 to real scroll position. Hiding the chrome scrollbar doesn't touch actual scrolling: real document scroll (and Lenis, where it's active) is untouched, this only suppresses the OS/browser-drawn track+thumb. Three rules for three engines — there's no single standard property that covers all of them. */ html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; } /* legacy Edge/IE */ html::-webkit-scrollbar { display: none; } /* Chrome/Safari/Chromium-Edge */ /* THE PAGE BACKGROUND LIVES ON , NOT ON BODY — and that is load-bearing. The problem it solves: body::after (the hairline grid, z-index:-1) has to paint ABOVE the page's own background but BELOW all content. Per CSS painting order an unpositioned box's background paints in a later step than ANY negative-z-index element, so while body carried the background it covered the hairlines completely — a total block, not a subtlety. That used to be fixed with `isolation: isolate` on body, which made body its own stacking context so its background became step 1 of a LOCAL context and body::after (-1) landed above it. It worked, but it also walled the whole page off from compositing: mix-blend-mode on any descendant (the nav, see .site-head below) could only ever blend within body, i.e. against nothing. Moving the background up to removes the conflict at the source: body paints no background at all, so body::after at -1 sits directly above the root canvas with nothing to cover it, no isolation required, and descendants can blend against real page content. --bg is on :root, so theming is unaffected. */ html { background: var(--bg); } body { margin: 0; background: transparent; color: var(--ink); overflow-x: clip; font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--leading-body); } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; } /* Text-flow finesse (progressive enhancement, ignored where unsupported): balance evens the rag on multi-line display lines; pretty stops prose paragraphs ending on a single-word orphan. Single-line text unaffected. */ h1, h2, h3, blockquote { text-wrap: balance; } p, li { text-wrap: pretty; } /* Lenis smooth-scroll (required for correct behaviour) */ 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; } /* ---- Site-wide 48-column grid lines (ported from the Webflow reference's hero_grid/intro_grid). A single fixed overlay instead of the reference's per-section divs — same visual result, one rule for the whole site. 24 columns (double the width) on tablet/mobile, matching the reference. z-index -1 (2026-07-11, was 1): pushes the hairlines BEHIND every piece of real content — text, photos, cards — instead of drawing over them. Every element on the page (cards at z-index:1, the sticky header at 1000, the veil at 1900, …) resolves against the root stacking context, and -1 sits below all of them without needing to out-rank each one individually. It also sits above the page background, because that background is on now and body paints none (see the note on `html { background }` above — that is exactly why). NOTE: while the entrance transition runs, `.js body` briefly carries opacity+transform, which makes body a stacking context for those ~0.5s; the hairlines are unaffected (body has no background to hide behind), it only suspends descendant blending mid-fade. The only other z-index:-1 rules in this file (.card-idx::before) is scoped INSIDE its own positioned ancestor (.card), which establishes its own stacking context — a local "behind my own siblings" declaration, not a competitor for this global one. (The nav's red hover curtain used to be a third; it is a body-level element at z-index 998 now, so it could leave the header's blend group — see .nav-curtain.) mix-blend-mode dropped with it: difference blended the lines against whatever was already painted so a flat near-white line would still read over a photo OR the light-mode background — necessary before, since the lines used to draw on top of everything including --bg itself. Now that nothing paints over the lines, that same flat rgba(241,241,241,…) is literally light mode's --bg (#f1f1f1) — a white line on white, invisible. Using var(--ink) instead (dark-on-light / light-on-dark, whichever the active scheme already resolves it to) fixes that for both themes at once; opacity on the pseudo-element itself (not baked into the color) supplies the faintness so --ink's hex doesn't need its own rgba() tuple. ---- */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .03; /* 2026-07-15: was .08 — Gian wants the columns to almost blend into the bg, a whisper of structure rather than visible stripes */ background-image: repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px calc(100% / 48)); } @media (max-width: 991px) { body::after { background-image: repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px calc(100% / 24)); } } /* ---- Page transitions: every internal link click fades the page out before the real (hard) navigation, and every new page fades in on load — a soft rise, not a flash-cut. JS-only (see app.js "0) Page transitions"); no-JS/no-motion just shows the page immediately (no .js class, or .pt-ready added straight away). ---- */ .js body { opacity: 0; transform: translateY(10px); } .js body.pt-ready { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.16,.8,.24,1), transform .5s cubic-bezier(.16,.8,.24,1); } .js body.pt-leaving { /* The veil/fly/clone ARE the exit animation now. NO body opacity: they are body children and opacity applies to the whole subtree — fixed children cannot escape it (the old fade was silently suppressing the leave veil). opacity/transform re-asserted explicitly because removing .pt-ready re-applies the `.js body` pre-hide above, and translateY(10px) would become the fixed veil's containing block — the invariant this comment always guarded. pointer-events: no second click can start a second leave. */ opacity: 1; transform: none; pointer-events: none; } /* ---- Static veil — internal-navigation page transition (app.js "0b"). The same black + TV-static + 48-col hairlines language as the loader, one level below it (.ld 2000 > .ptv 1900 > .site-head 1000 > dots 800 > lightbox 100). State is decided PRE-PAINT by the same inline end-of-body script that adds .js: html.ptv-on = arrived via internal nav (veil paints opaque, app.js dissolves it); html.ptv-done = no veil / dissolve finished. Destination-state transition rules: removing ptv-done (leave) fades IN over .28s, adding it (enter) dissolves over .55s with visibility deferred to the end. ---- */ html:not(.js) .ptv { display: none; } /* the deciding script never ran */ html.ld-active:not(.ld-done) .ptv { display: none; } /* loader owns homepage first visits; after ld-done the LEAVE veil works */ /* The veil itself is TRANSPARENT now — the opaque cover is painted by .ptv-cell (the curtain) over .ptv-over (a black scrim). Keeping a background here would cover the page instantly and there would be nothing for the curtain to sweep over. See "0b) Static veil" in app.js. */ /* .65s (was .8s, 2026-07-11 retime) — the no-GSAP/reduced-motion fallback fade. Paired with app.js's raiseVeil() scheduleNav(minTotalMs, 650) and dissolve()'s 950ms static-stop buffer; move all three together. */ .ptv { position: fixed; inset: 0; z-index: 1900; background: transparent; pointer-events: none; opacity: 1; visibility: visible; display: grid; place-items: center; transition: opacity .65s cubic-bezier(.4,0,1,1), visibility 0s 0s; } html.ptv-done .ptv { opacity: 0; visibility: hidden; transition: opacity .65s cubic-bezier(.4,0,.55,1), visibility 0s .65s; } /* ---- Page-transition curtain (mechanics rebuilt from the sondaven.com/en reference; timing/easing/stagger derived by instrumenting it, no code or assets lifted). 12 columns x 24 rows (288 cells) — a rectangular grid, each cell scaleX(0) at rest, swept to scaleX(1) on leave with a 2D grid stagger (see app.js). Rows doubled from 12->24 for finer stepping; a blur feather that briefly lived here (softening the cell-to-cell step at 12 rows) was removed once rows went finer — resolution instead of a post-hoc soften. Columns stay locked at 12 — that count is load-bearing for the grid-line alignment (see app.js's stagger comment), rows never touched it. margin:-1px overlaps neighbours so seams never show page bleeding through. ---- */ .ptv-over { position: absolute; inset: 0; z-index: 0; background: var(--veil-scrim); opacity: 0; } .ptv-grid { position: absolute; inset: 0; z-index: 1; display: flex; } .ptv-col { flex: 1 1 0; display: flex; flex-direction: column; } .ptv-cell { flex: 1 1 0; margin: -1px; background: var(--bg); transform: scaleX(0); } /* Promote only while a transition is actually on screen — 288 permanently promoted layers is exactly the kind of idle compositor cost this codebase just spent a whole pass removing from mobile. */ html.ptv-anim .ptv-cell, html.ptv-anim .ptv-over, html.ptv-on:not(.ptv-done) .ptv-cell { will-change: transform; } /* Veiled ARRIVAL, decided pre-paint by the inline gate: the curtain is already closed before the first frame, so there is no flash of the new page. app.js then sweeps the cells back OPEN to reveal it (or, under reduced-motion / no GSAP, dissolves the whole veil). Both are overridden by GSAP's inline styles the moment a LEAVE starts on this same page — inline beats these rules, which is why a leave from a veil-arrived page doesn't snap shut. */ html.ptv-on:not(.ptv-done) .ptv-cell { transform: scaleX(1); } html.ptv-on:not(.ptv-done) .ptv-over { opacity: 1; } /* A leave must not also run the .8s opacity fade above — the curtain IS the animation, and a simultaneous fade would wash it out. */ html.ptv-anim .ptv { opacity: 1 !important; visibility: visible !important; transition: none; } /* While the veil is actually up (arrival hold, or a leave from a veiled-arrived page) it eats the pointer — nothing under an opaque veil is clickable. */ html.ptv-on:not(.ptv-done) .ptv { pointer-events: auto; } /* the same 48-col hairlines as .ld::after — the brand tie. z-index 2 keeps them ABOVE the curtain cells (z1) so the grid reads across the closed veil, and below the word (z3). */ .ptv::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .03; /* alpha lives here, not baked into the gradient, so the LINE COLOUR can be a theme token — same split body::after uses */ background-image: repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px calc(100% / 48)); } /* 24 columns on tablet/mobile so the veil hairlines track the global body::after grid (which already halves at this breakpoint) — otherwise a page transition on a phone shows 48 lines over a 24-line site. .ld::after is NOT overridden here on purpose — its own base rule is defined later in this file (search ".ld::after"), and a same-specificity rule positioned AFTER this one would win the cascade at every viewport, silently reverting the loader back to 48 columns on mobile regardless of this media query. Its mobile override lives immediately after its base rule instead, where source order actually lets it win. */ @media (max-width: 991px) { .ptv::after { background-image: repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px calc(100% / 24)); } } /* Sits ABOVE the curtain cells so the TV-static grain reads on the closed veil. Starts invisible: on a LEAVE the static must not appear over the live page before the cells have swept across it (app.js fades it in alongside the curtain). On a veiled ARRIVAL the veil is already closed pre-paint, so the grain is simply on. */ .ptv-static { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; image-rendering: pixelated; opacity: 0; display: var(--veil-grain, block); } html.ptv-on:not(.ptv-done) .ptv-static { opacity: .55; } /* Veiled arrivals: the veil is a BODY CHILD — the .js body pre-hide would hide it too, and body's transform would become its fixed-position containing block. Same counter-rule as html.ld-active body below; the dissolve IS the entrance. .js body.pt-leaving (0,2,1) still wins for the exit fade. */ html.ptv-on body { opacity: 1; transform: none; } /* ---- Veil word + leave choreography (app.js 0/0b). One typography class shared by the arrival veil word and the leave fly — same class, same grid centering, same viewport = the same rendered rect on both sides of the hard navigation. The word is BAKED into each page's veil server-side (render.mjs page()), so a veiled arrival paints it centered before any JS runs. */ /* z-index 3: above the curtain cells (1) and the hairlines/static (2). */ .ptv-wordmask { position: relative; z-index: 3; overflow: hidden; padding-bottom: .06em; max-width: 92vw; opacity: 0; } html.ptv-on .ptv .ptv-wordmask { opacity: 1; } /* word shows only on veiled arrivals */ /* Hard-load arrivals (typed URL / bookmark / refresh) get the same veil with NO word — nothing flew it here from an origin label, so a word materialising in the middle of the screen would read as a glitch rather than a hand-off. Declared after the rule above and equally specific on .ptv-wordmask, so it wins on source order. `visibility` (not just opacity) so the word can never be picked up by a screen reader or hit-tested during the veil. */ html.ptv-noword .ptv .ptv-wordmask { opacity: 0; visibility: hidden; } /* Typography matches .nav-link exactly (font-weight, uppercase, tracking) so the word genuinely reads as that nav item scaling up, not a different display face taking over — only font-size and color differ (giant + light-on-dark). */ .ptv-word { margin: 0; font-family: var(--font-sans); font-weight: 400; color: var(--ink); letter-spacing: .2em; line-height: 1.05; text-align: center; text-transform: uppercase; font-size: clamp(32px, 7vw, 120px); } /* Image-card arrivals: the title sits over the dimmed PHOTO curtain, not a UI surface, so it doesn't track the theme — same reasoning as .ptv-photo::after's fixed black dim, mirrored to white. Fixed rather than conditional because dark mode already renders this white via --ink; this only changes light mode's result. Specificity (0,2,1) beats the base rule above (0,1,0) without !important. */ html.ptv-imgcurtain .ptv-word { color: #fff; } .ptv-word .pl { display: inline-block; will-change: transform; } /* per-WORD spans (GSAP path) — kept at word granularity, not per-letter, so kerning within each word stays intact and matches the resting text exactly (see app.js wordOut comment) */ /* CSS-only word-out (no-GSAP fallback) — ALSO the persistent "already played" state: ptv-on never gets removed, so a later leave re-fading this veil must find the word already risen out of its overflow-hidden mask. .5s (was .6s) — paired with app.js wordRiseOut()'s RISE constant; the two are not derived from each other, they're independent constants that must move together by hand. */ .ptv-word.ptv-word-out { transform: translateY(-112%); transition: transform .5s cubic-bezier(.6,.05,.2,1); } /* Brand "Paulo" insert (leave fly only): GIAN [collapsed PAULO] CRUZ — the middle span starts at width:0 (so the fly's initial rect = "GIAN CRUZ") and is grown by app.js once centered, revealing PAULO as GIAN/CRUZ reflow apart in-line. */ .ptv-word .pmid { display: inline-block; overflow: hidden; width: 0; vertical-align: bottom; } .ptv-word .pin { display: inline-block; will-change: transform; } /* Leave-side fly: full-viewport grid identical to .ptv's centering, above the veil (1950 > 1900). The MASK animates on the way in — a transform on the inner word would be clipped by its own overflow:hidden. */ /* contain:layout scopes the .pmid width tween's reflow (brand click, below) to this fixed island instead of the whole document — without it, that reflow fights the canvas static loop's own rAF draws on the main thread and reads as a stutter right as the fly-to-center transform hands off. */ .ptv-fly { position: fixed; inset: 0; z-index: 1950; display: grid; place-items: center; pointer-events: none; contain: layout; } .ptv-fly .ptv-wordmask { opacity: 1; } /* Card-image expansion clone — UNDER the veil (1850 < 1900) so the static fades in over it. Always fullscreen (inset:0) from creation — its LAYOUT size never changes; app.js only tweens `transform` (GPU-composited) on this box AND on its inner img (a counter-scale FLIP zoom — see expandCard() in app.js) to grow it from the card's rect to fullscreen. contain:layout stays as a cheap extra guard against ANY of its own paint work leaking into an ancestor reflow. transform-origin:0 0 is load-bearing: app.js's translate(r.left,r.top) math assumes the box's own top-left corner as the scale origin, not the CSS default (center), or the box would land off-position. */ .ptv-expand { position: fixed; inset: 0; z-index: 1850; overflow: hidden; contain: layout; background: var(--tag-bg); pointer-events: none; transform-origin: 0 0; will-change: transform; } .ptv-expand img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: center; will-change: transform; } /* ---- Card transition: the image IS the curtain --------------------------- A card leave ends on that card's image, fullscreen and dimmed 50% toward black. The destination page bakes the SAME image (the card's hero_image — see render.mjs page()) into .ptv-photo and opens on the identical frame, so the hard navigation is invisible. app.js then slices it into the same PTV_COLS x PTV_ROWS grid the solid curtain uses and sweeps the tiles open on the identical ptvDelay()/PTV_EASE schedule — the photo doesn't sit behind a curtain, it IS the curtain. In this mode the solid cells and the black scrim are both suppressed: the per-tile dim below does the scrim's job, and it travels WITH each tile as it shrinks, so the page is revealed already-undimmed rather than sitting under a full-screen black layer that has to be cross-faded off separately. The MODE class on is `ptv-imgcurtain` — deliberately NOT `ptv-photo`. It was ptv-photo at first, same as the element, and that collision was a real shipped bug: `` matches the bare `.ptv-photo` selectors as an ANCESTOR, so `.ptv-photo img {width:100%;height:100%; object-fit:cover}` grabbed EVERY image on the page (leads visibly stretched/ washed) and `.ptv-photo::after` dimmed the entire document 50% black — and since failure paths could leave the class stuck, it poisoned normal browsing, not just the transition. Keep the two names distinct, and keep every element selector scoped under .ptv as a second fence. ---- */ html.ptv-imgcurtain .ptv-cell { display: none; } /* the image replaces the solid curtain */ /* Suppress the scrim: the per-tile dim replaces it. Must carry .ptv-on:not( .ptv-done) — matching the arrival rule above and beating it on specificity — because `html.ptv-on:not(.ptv-done) .ptv-over {opacity:1}` is (0,3,1) and a bare `html.ptv-imgcurtain .ptv-over` is only (0,2,1): the scrim stayed opaque black through the whole photo arrival and the image curtain was simply invisible behind it. */ html.ptv-imgcurtain.ptv-on:not(.ptv-done) .ptv-over { opacity: 0; } /* Backstop during the pre-open HOLD only: if the veil image hasn't decoded yet, the tiles are transparent and (scrim suppressed) the raw page would show through. Opaque site-black until the open sweep starts (ptv-anim), at which point the veil must be transparent so the tiles reveal the page. */ html.ptv-imgcurtain.ptv-on:not(.ptv-done):not(.ptv-anim) .ptv { background: var(--bg); } /* .ptv-photo = the single pre-paint image, painted before any JS runs so the first frame after the nav matches the last frame before it. app.js removes it the moment the tile grid is built (both render identical pixels, so the swap is invisible). .ptv-tiles = that grid. Same z as .ptv-cell (1) — under the hairlines and static (2) and the word (3). */ .ptv .ptv-photo, .ptv .ptv-tiles { position: absolute; inset: 0; z-index: 1; } .ptv .ptv-photo { display: none; } html.ptv-imgcurtain .ptv .ptv-photo { display: block; } .ptv .ptv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .ptv .ptv-tiles { display: flex; } .ptv .ptv-tile-col { flex: 1 1 0; display: flex; flex-direction: column; } /* No transform-origin override — .ptv-cell doesn't set one either (CSS default, center). The tiles must shrink from the same anchor the solid cells grow from, or a future mixed mode would drift mid-tween rather than only matching at the two endpoints. */ .ptv .ptv-tile { flex: 1 1 0; overflow: hidden; position: relative; transform: scaleX(1); } /* Each tile is an overflow:hidden window onto a FULL-VIEWPORT clone of the same image, offset by its own negative left/top (app.js sets those inline). Every clone therefore performs the identical object-fit:cover crop the fullscreen .ptv-photo did, so no per-aspect-ratio math is needed to slice it. Without object-fit the clone stretches to its box and the image visibly warps. */ .ptv .ptv-tile img { position: absolute; max-width: none; display: block; object-fit: cover; } /* The 50% dim, per tile — lives INSIDE the tile so it shrinks away with it. Stays BLACK in both themes on purpose, unlike the rest of the veil: this dims a PHOTOGRAPH, not a UI surface. A white scrim in light mode would wash the image out rather than mirror anything. Deliberate exception, not a miss. */ .ptv .ptv-photo::after, .ptv .ptv-tile::after { content: ""; position: absolute; inset: 0; background: #000; opacity: .5; pointer-events: none; } /* The word is NOT pre-painted in image-curtain mode: it fades in over the settled image (app.js afterReady), so it must start hidden even though the arrival is a WORDED veil (the gate treats card arrivals as worded — the title is beat 2 of the sequence, not absent). Same specificity as the html.ptv-on rule above, declared later, wins on source order. */ html.ptv-imgcurtain .ptv .ptv-wordmask { opacity: 0; } /* Card-image expansion clone on the LEAVE side — see .ptv-expand above (z-1850, under the veil at 1900, so .ptv-over's dim tween and the static land on top of it). No shutter any more: the dimmed image is itself the page cover, and the navigation happens straight off it. */ /* ---- Initial loader — homepage, first visit per session. html.ld-active is set by an inline gate script (JS-on implied; reduced-motion and repeat visits never get it). The DISSOLVE is pure CSS keyed to html.ld-done so the gate's inline 5s failsafe can clear the overlay even if app.js never runs. The loader sits above everything (.site-head z-1000, .lightbox z-100). ---- */ html.ld-active { background: var(--bg); } /* no light-mode first-paint flash */ html.ld-active body { opacity: 1; transform: none; } /* the loader covers the pt entrance; .js body.pt-leaving (0,2,1) still wins */ html.ld-active:not(.ld-done) { overflow: hidden; } /* no scrolling out from under it */ html:not(.ld-active) .ld { display: none; } /* no-JS / repeat visits: inert markup */ .ld { position: fixed; inset: 0; z-index: 2000; background: var(--bg); display: grid; place-items: center; transition: opacity 1.2s cubic-bezier(.4,0,.55,1), visibility 0s 1.2s; } html.ld-done .ld { opacity: 0; visibility: hidden; pointer-events: none; } /* the same 48-col hairlines as body::after — "ALIGNING 48 COLUMNS", literally */ .ld::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .03; /* see .ptv::after — alpha on the element, colour from --ink */ background-image: repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px calc(100% / 48)); } /* Positioned AFTER the base rule above on purpose — same specificity, so source order decides the winner. This must come last to actually take effect on mobile (see the comment near the top of this file, search "silently reverting the loader"). */ @media (max-width: 991px) { .ld::after { background-image: repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px calc(100% / 24)); } } .ld-static { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .55; display: var(--veil-grain, block); } .ld-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; transition: opacity .4s ease; } .ld.ld-leaving .ld-inner { opacity: 0; } .ld-sq { width: 66px; height: 10px; display: block; overflow: visible; } .ld-sq rect { fill: var(--accent); opacity: .22; animation: ld-pulse 1.2s cubic-bezier(.4,0,.6,1) infinite; } .ld-sq rect:nth-child(2) { animation-delay: .15s; } .ld-sq rect:nth-child(3) { animation-delay: .3s; } .ld-sq rect:nth-child(4) { animation-delay: .45s; } @keyframes ld-pulse { 0%, 55%, 100% { opacity: .22; } 15% { opacity: 1; } } .ld-copy { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); min-height: 1.2em; text-align: center; } .ld-copy.is-final { color: var(--accent); } /* Nav entrance — held only under the loader, released (staggered) by ld-done. Never matches on non-loader loads or other pages. */ html.ld-active:not(.ld-done) .site-head .nav-brand, html.ld-active:not(.ld-done) .site-head .nav-link, html.ld-active:not(.ld-done) .nav-scroll { opacity: 0; transform: translateY(-6px); } html.ld-active .site-head .nav-brand, html.ld-active .site-head .nav-link, html.ld-active .nav-scroll { transition: opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1); } html.ld-active .site-head .nav-brand { transition-delay: .12s; } html.ld-active .site-head .nav-link:nth-child(1) { transition-delay: .24s; } html.ld-active .site-head .nav-link:nth-child(2) { transition-delay: .34s; } html.ld-active .site-head .nav-link:nth-child(3) { transition-delay: .44s; } html.ld-active .site-head .nav-link:nth-child(4) { transition-delay: .54s; } html.ld-active .nav-scroll { transition-delay: .7s; } /* Column-locked gutter: 1 column of the site grid on each side (--col, tokens.css) instead of a fixed px padding — so .wrap's edges always land exactly on a grid line (col 2 / col 47 of 48 desktop, col 2 / col 23 of 24 tablet+mobile), same as the nav brand/scroll-bar and hero content, rather than floating independently of the grid overlay at in-between viewport widths. */ .wrap { width: 100%; margin: 0 auto; padding: 0 var(--gutter); } /* ---- Header — 48-col grid nav, ported from the Webflow reference (nav_bar + navhover.js + navswap.js): text-swap on hover, a per-link "curtain" that drops from above in that link's own grid column, an underline draw, and a looping scroll-indicator bar. Deliberately no background/blur/border — just the text floating over whatever's beneath (2026-07-13: Gian chose transparent-only over a legibility scrim; this also removes the backdrop-filter case that was implicated in an intermittent mobile Safari crash during the card-click transition). Kept sticky (not fixed) so it still scrolls with intent on short pages. ------------------------------------------------------------- */ .site-head { position: sticky; top: 0; z-index: 1000; } /* Difference-blended nav: the header composites against whatever scrolls under it, so the wordmark and links invert themselves — legible over the dark cinematic hero, over a light case-study page, and over the middle of a photo, without any scroll-position colour switching. Three things make this work, and all three are load-bearing: 1. The blend is on .site-head, not on the individual links. An element blends with its BACKDROP, and .site-head (z-index:1000) is a stacking context — so blending a child would composite it against the header's own empty interior and do visibly nothing. Blending the header as a group composites that whole group against the page. 2. The page background is on , not body, so body is not a stacking context and does not wall the header off from the content (see the long note at the top of this file). 3. The text is #fff on purpose. difference(white, x) = 255 − x, i.e. a true inversion of the backdrop. Leaving it var(--ink) would give difference(#131313, #f1f1f1) = a light grey on a light page — invisible. @supports keeps the white confined to browsers that will actually blend it; anywhere else the nav keeps its normal token colour rather than going white on a white page. 4. Gated on body.pt-settled (app.js, set when the entrance transition ends). While `.js body` is mid-fade it carries opacity/transform and IS a stacking context, which suspends the blend — and white nav text on an unblended light page is invisible. Until settled the nav keeps var(--ink), which is already the correct colour over a flat background, so the handover doesn't show. 5. Desktop only. Below 992px the inline links are gone and the header holds just the brand, while the burger lives at BODY level (it has to, to paint over the z-2000 overlay) and so cannot join the blend — it also owns its own open/closed bar colours. Blending the header there would leave an inverted brand and theme icon sitting beside a non-inverted burger. */ @supports (mix-blend-mode: difference) { @media (min-width: 992px) { body.pt-settled .site-head { mix-blend-mode: difference; } body.pt-settled .site-head .nav-brand, body.pt-settled .site-head .nav-link, body.pt-settled .site-head .nav-theme { color: #fff; } /* Difference-blend is correct against the site's own near-grayscale page tokens (#131313/#f1f1f1) — difference(white, bg) inverts cleanly there. It breaks over the hero: difference() runs per-channel, so a real photo (not grayscale) comes out as a spectrum of inverted hues, not black or white. Rather than trying to read back a composited blend result (not possible — mix-blend-mode has no script-visible output), short-circuit using a signal that already exists: html.at-hero (app.js, purely geometric — hero's own bottom edge vs nav height). Color is a fixed #f1f1f1, not var(--ink): the hero's scrim is now permanently dark regardless of theme (2026-07-21, Gian's call — see .home-hero--cinematic's --hero-scrim-* above), so the nav pins white to match, same as the tagline/title. No pixel sampling, no new JS: an existing class plus a fixed color. .nav-theme's sun/moon icon (stroke: currentColor) follows for free since it inherits this color. */ html.at-hero .site-head { mix-blend-mode: normal; } html.at-hero .site-head .nav-brand, html.at-hero .site-head .nav-link, html.at-hero .site-head .nav-theme { color: #f1f1f1; } } } .nav-grid { display: grid; grid-template-columns: repeat(48, 1fr); align-items: center; padding: 20px 0; position: relative; } .nav-brand { grid-column: 2 / span 4; justify-content: center; align-items: center; display: flex; font-family: var(--font-sans); font-weight: 400; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); padding: 14px 0; white-space: nowrap; } .nav-menu { grid-column: 17 / span 16; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; } .nav-link { position: relative; justify-content: center; align-items: center; display: inline-flex; font-family: var(--font-sans); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); padding: 14px 10px; white-space: nowrap; } /* Theme switch — the brand's counterweight. `44 / span 4` + justify-self:end puts its right edge on grid line 48, the exact mirror of .nav-brand's left edge on line 2 (both one column in from their side). That is also where the scroll cue sat, which is the slot it takes over past the hero. Which icon shows is pure CSS off /the OS query, so it is already correct at first paint; app.js only owns click + persistence. The icon shown is the theme you'd GET by clicking (moon while light, sun while dark) — the common convention, and it keeps the control self-explanatory. */ .nav-theme { grid-column: 44 / span 4; justify-self: end; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: none; border: 0; border-radius: var(--r-pill); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; /* --shift is composed into every transform below instead of each state setting `transform` outright: :active sets scale(.92), and a bare `transform: scale()` there would silently drop the slide translate (last declaration wins on the whole property, not per-function). */ --shift: 0px; transform: translateX(var(--shift)); transition: background-color .25s ease, transform .45s cubic-bezier(.625,.05,0,1); } /* Over the hero the scroll cue owns line 48, so the button waits exactly one grid column to its left; clearing .at-hero slides it home. --col keeps that offset grid-locked at any viewport width. */ html.at-hero .nav-theme { --shift: calc(-1 * var(--col)); } .nav-theme:hover { background: var(--tag-bg); } .nav-theme:active { transform: translateX(var(--shift)) scale(.92); } .nav-theme:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .nav-theme .ic { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .nav-theme .ic-moon { fill: currentColor; stroke: none; } /* Default (light OS, no override): offer dark → show the moon. */ .nav-theme .ic-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-theme .ic-sun { display: block; } :root:not([data-theme="light"]) .nav-theme .ic-moon { display: none; } } :root[data-theme="dark"] .nav-theme .ic-sun { display: block; } :root[data-theme="dark"] .nav-theme .ic-moon { display: none; } :root[data-theme="light"] .nav-theme .ic-sun { display: none; } :root[data-theme="light"] .nav-theme .ic-moon { display: block; } /* Text swap: default label slides up/out, the hover alternate rises in from below. */ .nav-swap-clip { position: relative; display: inline-block; overflow: hidden; line-height: 1; vertical-align: bottom; } .nav-swap-size { visibility: hidden; display: inline-block; } .nav-swap-d, .nav-swap-h { position: absolute; left: 0; right: 0; top: 0; text-align: center; transition: transform .6s cubic-bezier(.625,.05,0,1), opacity .35s ease; } .nav-swap-h { transform: translateY(100%); opacity: 0; pointer-events: none; } .nav-link:hover .nav-swap-d { transform: translateY(-100%); opacity: 0; } .nav-link:hover .nav-swap-h { transform: translateY(0); opacity: 1; } /* Roll back to the default label on click (app.js adds .is-reverting) — reverses the hover swap even though the cursor is still over the link. Same specificity as the :hover rules above, declared later, so it wins; reuses the .6s transition so the label animates back to the initial word before the page transition flies it. */ .nav-link.is-reverting .nav-swap-d { transform: translateY(0); opacity: 1; } .nav-link.is-reverting .nav-swap-h { transform: translateY(100%); opacity: 0; } /* Underline draw on hover. */ .nav-link::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 8px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.625,.05,0,1); pointer-events: none; } .nav-link:hover::after { transform: scaleX(1); } /* Red curtain: a fixed, column-aligned panel that drops from above the viewport on hover. Column math matches the reference's 4-link nav (cols 17-32 of 48). These are BODY-LEVEL elements (render.mjs NAV_CURTAINS), not ::before on the links, because .site-head carries mix-blend-mode and a child of a blended group cannot opt out — the group composites as one, which turned this red gradient cyan over a light page. Out here it paints as true --accent. Geometry is unchanged (it was always position:fixed on viewport coordinates); only the trigger moved to :has(), since the panel is no longer a descendant of the thing being hovered. z-index sits just under .site-head (1000) so the panel drops BEHIND the nav text, exactly as z-index:-1 did inside it. No :has() support = no curtain: a hover flourish, safe to lose. */ .nav-curtain { position: fixed; top: 0; height: 50dvh; z-index: 998; background: linear-gradient(to bottom, var(--accent), transparent); transform: translateY(-100%); transition: transform .7s cubic-bezier(.625,.05,0,1); pointer-events: none; } .nc-b { left: 2.0833vw; right: 89.5833vw; } .nc-1 { left: 33.3333vw; right: 58.3333vw; } .nc-2 { left: 41.6667vw; right: 50vw; } .nc-3 { left: 50vw; right: 41.6667vw; } .nc-4 { left: 58.3333vw; right: 33.3333vw; } html:has(.nav-brand:hover) .nc-b, html:has(.nav-menu .nav-link:nth-child(1):hover) .nc-1, html:has(.nav-menu .nav-link:nth-child(2):hover) .nc-2, html:has(.nav-menu .nav-link:nth-child(3):hover) .nc-3, html:has(.nav-menu .nav-link:nth-child(4):hover) .nc-4 { transform: translateY(0); } /* Right-side scroll indicator: a 4x93 bar with a looping gradient sweep (reference: nav_scroll). 2026-07-15: the blinking "SCROLL DOWN" text label that used to sit beside it is gone — a labelled scroll cue is redundant chrome (the fold makes scrolling self-evident) and the kinetic bar alone carries the same downward gesture without shouting. */ /* Homepage only, and a BODY-LEVEL sibling rather than a header child (see render.mjs). Both facts are deliberate: a child of .site-head cannot opt out of the header's mix-blend-mode — blending applies to that group as a whole — and this bar read as an inverted stripe under it. Out here it composites normally. `right: var(--col)` is the same 1-column inset it always had (2.0833vw), now expressed in the grid's own unit so it tracks the mobile breakpoint's wider column. z-index sits below the header (1000) and above page content; the header is transparent, so the bar still shows through. position:fixed matches its old behaviour exactly — it was absolute inside a full-width sticky header, which pinned it to the viewport either way. */ /* background is a fixed #f1f1f1, not var(--ink): only ever visible while html.at-hero (hidden otherwise, below), and the hero it sits over is now permanently dark-scrimmed regardless of theme — same pin as the hero copy/nav above, same reasoning. */ .nav-scroll { position: fixed; top: 20px; right: var(--col); width: 4px; height: 93px; z-index: 999; background: #f1f1f1; overflow: hidden; pointer-events: none; transition: opacity .45s cubic-bezier(.625,.05,0,1), transform .45s cubic-bezier(.625,.05,0,1); } /* Past the hero the cue has done its job: it lifts out as the theme button slides into the slot it was holding. Reversible — scrolling back re-arms it. */ html:not(.at-hero) .nav-scroll { opacity: 0; transform: translateY(-10px); } .nav-scroll::after { content: ""; position: absolute; left: 0; right: 0; top: -93px; height: 93px; background: linear-gradient(180deg, var(--bg), var(--accent), var(--bg)); animation: nav-scroll-sweep 2.6s cubic-bezier(.625,.05,0,1) infinite; } @keyframes nav-scroll-sweep { 0% { top: -93px; } 100% { top: 93px; } } @media (prefers-reduced-motion: reduce) { .nav-scroll::after { animation: none; } /* The handoff still HAPPENS under reduced motion — the cue leaves, the button takes the slot — it just cuts instead of sliding. */ .nav-scroll, .nav-theme { transition: none; } } /* Burger toggle + full-screen overlay menu — desktop-hidden; both only exist below 991px (see the media block). The burger is a