/* ═══════════════════════════════════════════════════════════════════════════
rzv.studio — base.css (FOUNDATION, owns tokens + every shared surface)
Everything here is lifted from the rzv dashboard so the two products share
one material language. Source of each recipe is credited in the comment
above it — go read the original before changing a number.
Load order on every page: base.css → intro.css → constellation.css →
work.css (section stylesheets may override, never re-declare tokens).
TWO TRAPS, obeyed throughout:
1. Never `backdrop-filter` on an ancestor of a `mix-blend-mode` child —
iOS Safari isolates the blend group against transparent-black and paints
a solid black box. The ≤760px block at the bottom of this file strips
the blur from every glass surface and drops the blends with it.
2. GSAP owns `transform` on tiles / the pearl / mesh blooms. `transform` is
deliberately ABSENT from those elements' CSS transition lists — a CSS
transition on a property GSAP writes every frame smears each frame into
the next.
═══════════════════════════════════════════════════════════════════════ */
/* ── Tokens (BRIEF.md §Design tokens — dashboard DNA, focus.html :root) ──── */
:root{
/* Tells the UA which way the built-in widgets, scrollbars and form controls
should render. Without it a dark page gets light scrollbars. */
color-scheme:dark;
--bg:#08080A; --bg-2:#0C0C10;
--surface:rgba(255,255,255,0.025); --surface-2:rgba(255,255,255,0.045); --surface-hi:rgba(255,255,255,0.07);
--border:rgba(255,255,255,0.06); --border-hi:rgba(255,255,255,0.13);
--text:#FAFAFA; --muted:rgba(250,250,250,0.5); --dim:rgba(250,250,250,0.28); --faint:rgba(250,250,250,0.1);
--card:rgba(22,22,28,0.58); --card-hi:rgba(30,30,38,0.68); --tile-sheen:rgba(255,255,255,0.07);
--ease:cubic-bezier(0.16,1,0.3,1); /* house curve (expo.out) */
--ease-spring:cubic-bezier(0.34,1.56,0.64,1); /* overshoot */
--mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
/* Semantic pair, dashboard names (focus.html --done/--over, portal.css
--ptl-pos/--ptl-neg). Nothing on this site is a status readout yet; they
exist so the first thing that needs one does not invent its own green. */
--pos:#4ADE80; --neg:#F87171;
/* The page aura wash — focus.html:63. One very soft ellipse bled off the top
edge, which is what stops a flat #08080A field reading as a black
rectangle. Painted by body::before below. */
--aura:rgba(167,139,250,0.05);
/* Aurora palette — the six, in order. Named so JS can read them off :root. */
--a1:#4F46E5; --a2:#818CF8; --a3:#22D3EE; --a4:#A78BFA; --a5:#F472B6; --a6:#6366F1;
/* Radii scale (BRIEF §Design tokens) */
--r-tile:24px; --r-modal:28px; --r-card:14px; --r-pill:100px;
/* Rhythm */
/* --vh: the LARGE viewport, as a static token. Every full-screen box is
calc(var(--vh)*100): on a phone that is the screen with the toolbar
retracted, so the frame FILLS it once you scroll and never changes size —
the open toolbar just covers the bottom of it. (A measured innerHeight
was tried: it sizes to the SMALL viewport and leaves a dead strip under
the corners the moment the toolbar goes.) */
--vh:1vh;
--wrap:1360px;
--wrap-hero:1760px; /* header row + hero corners: edge to edge on a MacBook (1440/1512 + gutter), capped past that */
--gutter:clamp(20px,4vw,56px);
--section-y:clamp(96px,14vh,180px);
--header-h:72px;
/* ── TYPE SCALE (9 Sep 2026 sweep) ────────────────────────────────────
ONE size per visual role, sitewide. Values are the site's own, kept as
anchors so nothing jumps; where two pages had drifted apart for the same
role the Strategy/Design/Marketing template's value won, because those
three are the pattern every other page copies. Section stylesheets
CONSUME these — they must not re-declare a raw clamp for a role that
already has a token. Mobile variants exist only where the desktop clamp's
floor is the wrong answer at 390px, not as a second scale. */
--fs-display:clamp(3rem,6vw,5.6rem); /* h1 / .display */
--fs-hero:clamp(2rem,4.6vw,4.4rem); /* the home hero title */
--fs-hero-m:clamp(1.6rem,7.4vw,2.4rem);
--fs-xl:clamp(2.1rem,4.6vw,3.8rem); /* h2 / .t-xl / footer talk / mission head */
--fs-statement:clamp(1.7rem,4.3vw,3.5rem); /* the one-line statements: range, constellation, mission, offers */
--fs-statement-m:clamp(1.7rem,7.6vw,2.4rem);
--fs-lede:clamp(1.7rem,3.2vw,2.9rem); /* page lede, big half */
--fs-lede-m:clamp(1.6rem,7vw,2.1rem);
--fs-title:clamp(1.5rem,3vw,2.5rem); /* service name, next-case name */
--fs-head:clamp(1.45rem,2.4vw,2.05rem); /* offer/door titles, form questions */
--fs-lg:clamp(1.3rem,2.2vw,1.95rem); /* h3 / .t-lg */
--fs-sub:clamp(1.15rem,1.9vw,1.6rem); /* step + tile titles, the total line */
--fs-md:clamp(1.1rem,1.55vw,1.42rem); /* .t-md — lede-scale body */
--fs-md-m:clamp(1.05rem,4.4vw,1.25rem);
--fs-body-lg:clamp(1rem,1.35vw,1.2rem); /* case intro, service desc, journey lede */
--fs-body:clamp(0.95rem,1.05vw,1.0625rem); /* .t-body — the paragraph */
--fs-btn:15px; /* every pill on the site */
--fs-sm:15px; /* small body: inputs, totals, sent-copy */
--fs-meta:14.5px; /* data values */
--fs-xs:13.5px; /* footer links, notes, option descriptions */
--fs-micro:11.5px; /* mono status + error lines */
--fs-mono:clamp(0.8rem,1.05vw,0.98rem); /* the mono caption: .subhead, constellation primary labels */
--fs-label-m:10.5px; /* mono label, menu scale */
--fs-label:clamp(8.5px,0.62vw,10.5px); /* .overline — the house eyebrow */
--fs-label-s:9.5px; /* mono micro-labels, badges, segmented buttons */
/* Line-height + tracking pairs per role. Display type tightens as it grows;
body loosens. Consumed by the role classes below. */
--lh-display:1.04; --ls-display:-0.04em;
--lh-lede:1.14; --ls-lede:-0.035em;
--lh-head:1.15; --ls-head:-0.03em;
--lh-body:1.65; --ls-body:normal;
--lh-label:1.4; --ls-label:0.16em;
}
/* lvh override for --section-y, in @supports rather than a second
declaration on the line above — see constellation.css's own note on
--cn-pearl-gap for why a custom property can't use the plain
declare-twice trick every direct property in this pass uses: it doesn't
validate its value at assignment, so an unconditional second declaration
would silently overwrite the working vh value on a browser that then
fails to resolve lvh wherever --section-y is actually consumed, dropping
the padding to nothing instead of falling back to it.
lvh, not svh: "prevent the screen resizing on mobile — open for whichever
[viewport height] is largest", his words. `svh` was the earlier choice
(small viewport height, pinned to the toolbar-EXPANDED size) precisely so
nothing sat behind the toolbar — but that undersizes once the toolbar
retracts on scroll, leaving a gap of bare background where the section
should still be. `lvh` is the opposite fixed value — the toolbar-HIDDEN
size — so the section always fills the full screen once scrolling starts;
the accepted trade is that on first paint, with the toolbar still expanded,
a few px at the very bottom may sit fractionally under it rather than
short of it. */
@supports (height: 1lvh) {
:root{ --section-y:clamp(96px,14lvh,180px); --vh:1lvh; }
}
/* ── THE WORDMARK FACE ──────────────────────────────────────────────────────
Bizmo, Black weight only — "the logo isnt using the Bizmo font. logo in
intro too", his words. It is a real, licensed family already installed on
his machine (~/Library/Fonts/Bizmo-*.otf, the full Thin→Black range plus
obliques); this project only ships the ONE cut the wordmark actually uses,
assets/fonts/Bizmo-Black.otf — not all eighteen files, which nothing here
needs. font-weight:900 on the @font-face itself is what lets a plain
`font-weight:900` in the rules below resolve to this specific file rather
than a synthesized fake-bold of some other weight, and leaves room to add
more real cuts later under the same family name without renaming anything.
font-display:swap: the header and the intro's drawn "RZV" are both above
the fold and about as prominent as this site gets, so a brief fallback-font
flash while this loads is far better than either invisible text or a
layout that waits on it. Used by .brand-text (base.css) and .rz-word
(intro.css) — both, per the ask; keep them in step if this ever changes. */
@font-face{
font-family:'Bizmo';
src:url('../fonts/Bizmo-Black.otf') format('opentype');
font-weight:900;font-style:normal;font-display:swap;
}
/* ── PHASE-LIGHT ──────────────────────────────────────────────────────────
The white takeover (#constellation). Implemented as a token swap on
rather than a pile of per-element overrides: every rule below reads
--text/--border/--surface, so the whole site is correct in both phases with
nothing extra to maintain. intro.js / constellation.js flip it through
RZV.phase('light') / RZV.phase('dark').
`html:has()` carries the same background out to the overscroll gutter, which
alone cannot reach. ── */
body.phase-light{
color-scheme:light;
/* Every value below is the dashboard's light theme verbatim (focus.html
html[data-theme="light"]) — EXCEPT --bg. The dashboard's light page is
#FAFAF8, a warm paper; this one is a deliberate #FFFFFF because the
takeover is a white-out, not a theme. Keep them in sync when the
dashboard's light values move; keep --bg pure. */
--bg:#FFFFFF; --bg-2:#F3F3F6;
--surface:rgba(0,0,0,0.022); --surface-2:rgba(0,0,0,0.04); --surface-hi:rgba(0,0,0,0.06);
--border:rgba(0,0,0,0.08); --border-hi:rgba(0,0,0,0.16);
--text:#17171A; --muted:rgba(20,20,25,0.52); --dim:rgba(20,20,25,0.32); --faint:rgba(20,20,25,0.12);
--card:rgba(255,255,255,0.62); --card-hi:rgba(255,255,255,0.8); --tile-sheen:rgba(0,0,0,0.045);
--pos:#16A34A; --neg:#DC2626;
/* Indigo, not violet: on white the violet wash greys out, and indigo is what
the dashboard's light aura reads as. */
--aura:rgba(79,70,229,0.05);
}
html:has(body.phase-light){background:#FFFFFF}
/* ── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} /* no grey tap flash on iOS (6 Sep) */
/* overflow-x:hidden on HTML, and on html ONLY — found chasing the
header restructure ("pearl top left, logo middle, hamburger right"): on a
narrow viewport the aurora/mesh blobs (.ab, .mb, .au — deliberately huge and
negative-positioned so their blur bleeds off both edges) escape body's own
clip, because position:fixed/absolute descendants size against the INITIAL
CONTAINING BLOCK, not body. Mobile browsers respond by silently WIDENING the
whole layout viewport to fit them — window.innerWidth becomes larger than
the true device width — and every 100%/inset:0/position:fixed element on
the page (the header included) then sizes against that inflated viewport
too, so .burger, the header's own right-edge control, ends up pushed off the
true visible edge. html needs the same overflow-x:hidden body already had:
that is what actually stops the viewport from being renegotiated in the
first place, rather than just hiding a scrollbar after the fact.
⚠️ AND BODY'S IS NOW GONE, WHICH IS THE POINT OF THE NOTE ABOVE.
overflow-x:hidden on body BREAKS position:sticky anywhere inside it. The
spec is explicit: when one axis is `hidden` and the other is `visible`, the
visible one computes to `auto` — so body silently became a scroll container,
and #constellation's sticky stage began sticking to BODY's scrollport
instead of the document's. Body's scrollport never scrolls (the document
scrolls on html), so the stage had nothing to stick against and simply rode
the page up: measured on the live site at 1440x900, the stage's top ran to
-162, -972, -4860px while the core pearl — position:fixed, and so still
correct — sat immovably at the viewport centre. Haseeb saw it as "the ven
diagram doesnt stay in place centered to the central node", which is exactly
what it was.
Removing it costs nothing: the sentence above is the reason. html's rule is
what actually prevents the layout viewport from being renegotiated, and it
clips the same bleeding blobs at the same edge. Body's was the older, weaker
half of the pair and was made redundant the moment html got one — this is
the deletion that should have happened in the same commit.
Anything added here in future must not be `overflow-x:hidden` on a sticky
ancestor. If a descendant ever really needs its own horizontal clip, give it
to that element, not to body. */
html{background:var(--bg);-webkit-text-size-adjust:100%;overflow-x:hidden}
html:focus-within{scroll-behavior:smooth}
body{
font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
background:var(--bg);color:var(--text);
line-height:1.55;font-weight:400;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
font-feature-settings:"ss01","cv11";
min-height:100vh;min-height:100lvh;
transition:background-color .9s var(--ease),color .9s var(--ease);
}
/* min-height declared twice above — vh, then lvh — "fix the whole iOS
toolbar issue with vh / svh / dvh", and later, "prevent the screen resizing
on mobile — open for whichever [viewport height] is largest". Neither
recomputes as Mobile Safari's toolbar animates on scroll, unlike plain
`vh`; the plain `vh` stays first as the fallback for anything predating
Safari 15.4's svh/lvh/dvh support, and the second declaration silently wins
wherever it's understood. `lvh` (not `svh`) on purpose: `svh` is pinned to
the SMALLEST size — toolbar fully expanded — so it never sits behind the
toolbar, but undersizes the instant the toolbar retracts on scroll,
leaving a bare gap at the bottom; `lvh` is pinned to the LARGEST size —
toolbar hidden — so a scrolled page never shows that gap, at the cost of a
few px sitting fractionally under the toolbar on first paint instead.
Applied wherever a real viewport-height dependency exists in this
codebase — see this same pattern in constellation.css (THE RUNWAY) and
intro.css (§4). */
/* PAGE AURA WASH — focus.html:63, verbatim. Fixed, so it stays anchored to the
top of the VIEWPORT rather than scrolling away with the document: the whole
site keeps one faint source of light overhead. z-index 0 and it is the first
box in body, so every section (position:relative, z auto) paints over it.
body::before is unclaimed on this site — nothing else may take it. */
body::before{content:'';position:fixed;inset:0;
background:radial-gradient(ellipse 900px 500px at 50% -15%,var(--aura),transparent 62%);
pointer-events:none;z-index:0}
/* Custom properties do not interpolate, so a phase swap would otherwise be a
hard cut on every child. This softens the elements that have no opinion of
their own about it.
IT ONLY REACHES ELEMENTS WITH NO `transition` SHORTHAND OF THEIR OWN. These
are longhands; any later shorthand at equal-or-higher specificity resets all
of them wholesale. That is not a bug to route around — an element that
declares its own transition has already said how it fades, and it keeps
saying it. .nav-link, .btn, .ft-link, .wt-name (work.css:141) and .pp-name
(work.css:178) each carry `color` in their own shorthand, so they cross-fade
on their own clock; .site-header carries only opacity/transform and does
hard-cut its background, which is invisible because html.hdr-veil has it
hidden for the whole light phase. All six were listed here and are not, now.
So: add a selector here only if it has NO transition shorthand anywhere. */
body,.brand-text,.overline,p,h1,h2,h3,h4,li,a,.wt-meta{
transition-property:color,border-color,background-color;
transition-duration:.7s;transition-timing-function:var(--ease);
}
/* ── THE INTRO'S SCROLL LOCK — ON THE ROOT, NEVER ON BODY ─────────────────
The film owns the page until it has composed, so the reader cannot scroll
out of it. This USED to be `body.loading{overflow:hidden}`, and that was
wrong twice over — for the same reason, and it is the reason written out at
length above html's own rule:
1. IT BROKE STICKY. overflow:hidden on one axis computes the other to
`auto`, so body became a scroll container and #constellation's sticky
stage began sticking to BODY's scrollport — which never scrolls, because
the document scrolls on the viewport. A deep reload into #constellation
with the film replaying showed the venn riding the page up, unpinned,
until the lock came off. Exactly the bug measured on the live site when
body still carried overflow-x:hidden; same mechanism, same fix.
2. IT DID NOT ACTUALLY LOCK ANYTHING. A body overflow is propagated to the
viewport ONLY when the root element's own overflow is `visible`
(CSS Overflow 3 §3.3). html carries overflow-x:hidden here — deliberately,
see above — so the root is not visible in both axes, body's value is NOT
propagated, and the page went on scrolling behind the film. The sticky
breakage is itself the proof: a propagated value leaves the source
element `visible`, so body could only have become a scroll container by
NOT being propagated.
ON THE ROOT IT IS THE OPPOSITE OF BOTH. The root's overflow IS applied to
the viewport, and the element it was taken from is then treated as
`visible` — so html never becomes a scroll container either, the viewport
stays the scrollport every position:sticky descendant resolves against, and
the page genuinely cannot be scrolled. Sticky keeps working while the lock
is on: nothing about the scroll container has changed, only whether it is
allowed to move. (That is a reading of the spec, not something anyone has
watched happen — no browser was available to this pass.)
`html:has(body.loading)` rather than a class on html, and that is the
robust half: three separate places take this lock off — intro.js's
endLoader(), nav.js's endLoader(), and index.html's inline 2.5s safety net
— and glass.js probes for it by reading body's classList. One selector
keyed off the class they all already write means there is no second flag to
desync, and no path on which a crashed intro can leave the page locked.
`:has()` is already load-bearing in this file (html:has(body.phase-light)
above); an engine too old for it simply gets no lock, which is a film that
can be scrolled — the behaviour that was shipping anyway.
AND THE GUTTER IS PAID IN CSS, not in JS like the modal locks. Now that the
lock genuinely retires the classic scrollbar (it never did before — see 2),
desktop Chrome/Firefox would widen the layout viewport by ~15px for the
film's length and hand it back on the frame the hero composes, i.e. a 15px
jump under a hero that has just finished arriving. `scrollbar-gutter:stable`
reserves exactly that width for exactly as long as the lock is on and
reserves nothing when it is off, so there is nothing to measure and nothing
to write back; it is on the root, where it propagates to the viewport with
the overflow it accompanies. This is the same trick services.css rejected —
rightly — as a permanent site-wide reservation; scoped to the lock it costs
nothing when the lock is not held. On overlay-scrollbar platforms (macOS by
default, every phone) the reserved width is zero and this is inert.
⚠️ Reasoned from the spec, not watched in a browser. ── */
html:has(body.loading){overflow:hidden;scrollbar-gutter:stable}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--a2);outline-offset:3px;border-radius:4px}
/* Touch: Safari flags a tapped control as :focus-visible and draws the ring
after the tap. Keyboard users on a pointer device keep it. (6 Sep) */
/* Touch: no focus rings at all. The bare :focus-visible reset lost to every
component rule with higher specificity (.mnav-link:focus-visible drew the
ring round "Work" when the menu opened and focused it). !important is the
honest tool here: one media query that outranks all of them. (7 Sep) */
@media (pointer:coarse){
*:focus-visible, *:focus{outline:none !important}
.rzv-switch input:focus-visible ~ .rzv-switch-track{outline:none !important}
.work-tile:focus-visible .wt-media{outline:none !important;box-shadow:none !important}
.ef-input:focus-visible{outline:none !important}
}
::selection{background:rgba(129,140,248,0.28);color:var(--text)}
/* A 0.28-alpha indigo over white is nearly invisible, and --text has flipped
to near-black underneath it — both halves have to move together. */
body.phase-light ::selection{background:rgba(79,70,229,0.22);color:#17171A}
/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}
.section{position:relative;padding:var(--section-y) 0}
.section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(44px,6vw,86px)}
/* ── Typography ──────────────────────────────────────────────────────────
Display = Inter 300 at −0.04em. Weight is the whole voice here: 300 at
5.6rem reads as drawn, 400 reads as a system font blown up. ── */
.display,h1,h2{font-weight:300;letter-spacing:-0.04em;line-height:1.04}
h1{font-size:var(--fs-display)}
h2,.t-xl{font-size:var(--fs-xl)}
h3,.t-lg{font-size:var(--fs-lg);font-weight:400;letter-spacing:var(--ls-head);line-height:var(--lh-head)}
.t-md{font-size:var(--fs-md);font-weight:300;letter-spacing:-0.02em;line-height:1.4}
.t-body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
.measure{max-width:56ch}
/* HOUSE RULE (BRIEF §Design tokens): every overline / eyebrow label on this
site is Space Mono, uppercase, 8.5–10.5px, .10–.18em tracking. Space Mono
ships 400/700 only — 700 is what a `600` request resolves to anyway, so it
is declared honestly. Recipe: settings.js `.sd-overline`. */
.overline{
font-family:var(--mono);font-size:var(--fs-label);font-weight:700;
letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);
display:block;line-height:var(--lh-label);
}
.overline--dim{color:var(--dim)}
/* ── PEARL ───────────────────────────────────────────────────────────────
Verbatim material from portal.css `.ptl-pearl` (the 3-layer iridescent
stack) — a white specular highlight, a 240%-wide aurora sweep that the
iriDrift keyframe walks left→right, and the base pearl gradient underneath.
Parameterised by --pearl-size so ONE class covers the 9px header dot, the
25px hero pearl and the full-screen moon of the loader: every offset is a
ratio of the size, floored with max() so the inner highlight survives at
9px. --pearl-glow is the outer bloom's alpha — intro.js pumps it to sell
the dying-star climax.
`transform` is absent from the transition list on purpose (trap 2). ── */
.pearl{
--pearl-size:34px;
--pearl-glow:0.45;
position:relative;flex:none;
width:var(--pearl-size);height:var(--pearl-size);border-radius:50%;
border:1px solid rgba(255,255,255,0.65);
background:
radial-gradient(circle at 32% 26%, rgba(255,255,255,0.95), rgba(255,255,255,0) 58%),
linear-gradient(120deg, rgba(129,140,248,0.34), rgba(244,114,182,0.26) 32%, rgba(34,211,238,0.30) 62%, rgba(167,139,250,0.32) 95%),
linear-gradient(160deg,#ffffff,#e9ecf6);
background-size:100% 100%, 240% 240%, 100% 100%;
box-shadow:
inset 0 max(1px, calc(var(--pearl-size) * 0.03)) max(1px, calc(var(--pearl-size) * 0.03)) rgba(255,255,255,0.9),
inset 0 calc(var(--pearl-size) * -0.059) calc(var(--pearl-size) * 0.176) rgba(167,139,250,0.28),
0 calc(var(--pearl-size) * 0.117) calc(var(--pearl-size) * 0.412) calc(var(--pearl-size) * -0.117) rgba(129,140,248,var(--pearl-glow));
animation:iriDrift 7s ease-in-out infinite;
transition:filter .3s var(--ease),box-shadow .4s var(--ease);
}
@keyframes iriDrift{0%,100%{background-position:0 0,0% 50%,0 0}50%{background-position:0 0,100% 50%,0 0}}
/* On white the indigo bloom disappears and the pearl loses its edge — swap
the outer shadow for a soft graphite one. */
body.phase-light .pearl{
border-color:rgba(10,8,10,0.14);
box-shadow:
inset 0 max(1px, calc(var(--pearl-size) * 0.03)) max(1px, calc(var(--pearl-size) * 0.03)) rgba(255,255,255,0.95),
inset 0 calc(var(--pearl-size) * -0.059) calc(var(--pearl-size) * 0.176) rgba(129,140,248,0.34),
0 calc(var(--pearl-size) * 0.117) calc(var(--pearl-size) * 0.412) calc(var(--pearl-size) * -0.117) rgba(10,8,10,calc(var(--pearl-glow) * 0.4));
}
/* ── GLASS ───────────────────────────────────────────────────────────────
portal.css `.ptl-glass` — the one surface shared by chips, tiles and the
composer, so every floating thing on the site is literally the same
material.
⚠️ NOT DEAD — DO NOT DELETE. Nothing currently carries `class="glass"`, so a
usage census will call this unused. It is the CANONICAL recipe: work.css
re-implements it twice (`.pf-input`, `.pf-chip`) and the copies have already
drifted apart (box-shadow -16px here and in .pf-input, -18px in .pf-chip).
Those two should compose onto this class instead; the consolidation is
dispatched separately. Delete this and the drift becomes permanent. ── */
.glass{
border-radius:var(--r-tile);
border:1px solid rgba(255,255,255,0.12);
background:linear-gradient(160deg,rgba(255,255,255,0.09),rgba(255,255,255,0.02) 50%);
backdrop-filter:blur(20px) saturate(1.45);-webkit-backdrop-filter:blur(20px) saturate(1.45);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 28px -16px rgba(0,0,0,0.4);
/* The spring on transform is part of the recipe, not a flourish: .ptl-glass
is a PRESSABLE surface in the dashboard and the overshoot is what makes it
feel like one. It was missing here, so glass read as inert. Unlike .tilt,
nothing GSAP-driven owns transform on .glass — trap 2 does not apply. */
transition:border-color .35s var(--ease),background .35s var(--ease),transform .25s var(--ease-spring);
}
.glass:hover,.glass:focus-visible{
border-color:rgba(255,255,255,0.22);
background:linear-gradient(160deg,rgba(255,255,255,0.13),rgba(255,255,255,0.04) 50%);
}
body.phase-light .glass{
border-color:rgba(10,8,10,0.10);
background:linear-gradient(160deg,rgba(255,255,255,0.9),rgba(255,255,255,0.45) 50%);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 28px -18px rgba(10,8,10,0.22);
}
body.phase-light .glass:hover{border-color:rgba(10,8,10,0.2)}
/* ── BUTTONS / PILLS ────────────────────────────────────────────────────
Glass at rest. The aurora face (portal.css `.ptl-cbtn.primary`) lives on a
::before and fades in — gradients cannot interpolate, an opacity ramp on a
second layer can. ── */
.btn{
position:relative;isolation:isolate;overflow:hidden;
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:15px 28px;border-radius:var(--r-pill);
font-size:var(--fs-btn);font-weight:500;letter-spacing:-0.01em;color:var(--text);
border:1px solid var(--border-hi);
background:linear-gradient(160deg,rgba(255,255,255,0.09),rgba(255,255,255,0.02) 50%);
backdrop-filter:blur(20px) saturate(1.45);-webkit-backdrop-filter:blur(20px) saturate(1.45);
cursor:pointer;
transition:transform .28s var(--ease-spring),border-color .35s var(--ease),color .35s var(--ease);
}
.btn>*{position:relative;z-index:1}
/* Rest opacity is 0.35, not 0. The dashboard's .ptl-cbtn wears its aurora
permanently — the colour is what the button IS, and hovering only brings it
to full. Starting at 0 made every button a grey capsule until touched, which
is the one thing the house material never does. */
.btn::before{
content:'';position:absolute;inset:0;z-index:0;opacity:0.35;pointer-events:none;
background:
linear-gradient(160deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 44%),
linear-gradient(115deg, rgba(244,114,182,0.92), rgba(167,139,250,0.86) 48%, rgba(34,211,238,0.94));
background-size:100% 100%, 200% 200%;
transition:opacity .4s var(--ease);
}
.btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.42)}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(0) scale(0.985)}
body.phase-light .btn{border-color:rgba(10,8,10,0.14);
background:linear-gradient(160deg,rgba(255,255,255,0.92),rgba(255,255,255,0.5) 50%)}
/* The Start-project CTA: same recipe, bigger, and it goes fully aurora with
near-black type on hover so it reads as the one committed action on the
page. `--btn-drift` is idle motion on the aurora layer, frozen when motion
is off. */
.btn-primary{padding:19px 38px;font-size:var(--fs-btn);font-weight:600}
.btn-primary::before{animation:btnDrift 9s ease-in-out infinite}
.btn-primary:hover{color:#0b0b14;border-color:rgba(255,255,255,0.42)}
body.phase-light .btn-primary:hover{color:#0b0b14}
@keyframes btnDrift{0%,100%{background-position:0 0,0% 50%}50%{background-position:0 0,100% 50%}}
.btn-lg{padding:24px 46px;font-size:clamp(15px,1.5vw,18px);border-radius:var(--r-pill)}
/* THE SECONDARY — portal.css `.ptl-cbtn` (non-primary). Quarter-strength
aurora, painted into the surface rather than layered on a ::before, so it is
permanent: this button is coloured at rest and stays that strength on hover.
That is the whole distinction it carries. Letting the shared ::before run
would stack a second aurora on top and ramp it to primary strength on hover,
collapsing the hierarchy the pair exists to express — so it is suppressed in
both states, and hover is the lift plus a brighter rim instead. */
.btn-ghost{
color:var(--text);
border-color:rgba(255,255,255,0.16);
background:
linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 42%),
linear-gradient(135deg, rgba(244,114,182,0.15), rgba(129,140,248,0.10) 45%, rgba(34,211,238,0.15));
}
.btn-ghost::before,.btn-ghost:hover::before{opacity:0}
.btn-ghost:hover{color:var(--text);border-color:rgba(255,255,255,0.30)}
body.phase-light .btn-ghost{border-color:rgba(0,0,0,0.12)}
body.phase-light .btn-ghost:hover{border-color:rgba(0,0,0,0.24)}
/* A primary and a secondary standing side by side. Wraps to a column before
the pair can ever overflow the gutter. */
.contact-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
/* ── SWITCH (settings.js `.sd-switch`) ──────────────────────────────────
Wired on this site as MOTION ON/OFF, persisted at localStorage
'rzv-motion' — see nav.js. ── */
.rzv-switch{position:relative;width:38px;height:22px;flex-shrink:0;display:inline-block}
.rzv-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.rzv-switch-track{position:absolute;inset:0;background:var(--surface-hi);border:1px solid var(--border);
border-radius:var(--r-pill);transition:background .25s var(--ease),border-color .25s var(--ease)}
.rzv-switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
background:var(--muted);transition:transform .25s var(--ease-spring),background .25s var(--ease)}
.rzv-switch input:checked ~ .rzv-switch-track{background:var(--text);border-color:var(--text)}
.rzv-switch input:checked ~ .rzv-switch-thumb{transform:translateX(16px);background:var(--bg)}
.rzv-switch input:focus-visible ~ .rzv-switch-track{outline:2px solid var(--a2);outline-offset:3px}
/* ── MESH GRADIENTS (client-page.css:12–39) ─────────────────────────────
Three brand-coloured blooms drifting on 26/34/41s alternate loops, tinted
per host from --m1/--m2/--m3. Default is `position:absolute` here (work
tiles, case heroes); `.mesh--page` restores the fixed, masked page-backdrop
form the dashboard uses.
mix-blend-mode:screen is what makes them read as light rather than paint —
it is dropped, not faked, on mobile (trap 1, bottom of file). ── */
.mesh{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
opacity:0;transition:opacity 1.2s var(--ease)}
.mesh.on{opacity:1}
.mesh--page{position:fixed;top:0;left:0;right:0;bottom:auto;height:62vh;height:62lvh;
-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,0.62) 38%,transparent 88%);
mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,0.62) 38%,transparent 88%)}
body.phase-light .mesh.on{opacity:0.28}
.mb{position:absolute;border-radius:50%;mix-blend-mode:screen;filter:blur(var(--mesh-blur,42px));will-change:transform}
.mb.m1{background:radial-gradient(circle, color-mix(in srgb, var(--m1,transparent) 62%, transparent), transparent 66%);
width:78%;height:150%;left:-22%;top:-58%;animation:meshA 26s ease-in-out infinite alternate}
.mb.m2{background:radial-gradient(circle, color-mix(in srgb, var(--m2,transparent) 48%, transparent), transparent 66%);
width:66%;height:135%;left:28%;top:-66%;animation:meshB 34s ease-in-out infinite alternate}
.mb.m3{background:radial-gradient(circle, color-mix(in srgb, var(--m3,transparent) 40%, transparent), transparent 68%);
width:70%;height:140%;left:60%;top:-60%;animation:meshC 41s ease-in-out infinite alternate}
@keyframes meshA{0%{transform:none}50%{transform:translate(9%,5%) scale(1.14)}100%{transform:translate(-6%,-3%) scale(0.94)}}
@keyframes meshB{0%{transform:translate(0,0) scale(1.06)}50%{transform:translate(-11%,6%) scale(0.9)}100%{transform:translate(7%,-4%) scale(1.18)}}
@keyframes meshC{0%{transform:translate(0,0) scale(0.96)}50%{transform:translate(8%,-6%) scale(1.2)}100%{transform:translate(-9%,4%) scale(1.02)}}
/* ── AURORA BLOBS (portal.css:90–119) ───────────────────────────────────
Six screen-blended radials with a five-stop falloff. The five stops are the
point: a single `transparent 64%` leaves a visible ring where the
interpolation stops, and these are large enough that the ring would show.
ARCHITECTURAL RULE — the blob geometry below is ASPECT-RATIO-LOCKED. Every
width/height/left/bottom is a percentage of this box, tuned as one
composition against the dashboard's panel proportions. NEVER adapt a blob's
size or position to fit a new home: size and anchor the HOST instead (see
.au), and the composition arrives intact. A blob nudged to "look right" in
one host is a blob that is wrong in every other. ── */
.aurora{position:absolute;inset:-22%;pointer-events:none;z-index:0;
transition:opacity .55s var(--ease);
/* Load-bearing, and not only for softness: a filter makes this element a
stacking context, which isolates the six mix-blend-mode:screen children
into their own group. They then composite against each OTHER — which is
the light-on-light bloom the dashboard shows — instead of screening
individually against whatever the page happens to have behind them. */
filter:blur(var(--au-blur,12px)) saturate(var(--au-sat,1.6)) brightness(1.05)}
.aurora .ab{position:absolute;mix-blend-mode:screen;border-radius:50%;will-change:transform,opacity}
.aurora .ab.a1{width:124%;height:110%;left:-41%;bottom:-41%;
background:radial-gradient(circle closest-side,rgba(79,70,229,1),rgba(79,70,229,0.82) 22%,rgba(79,70,229,0.5) 42%,rgba(79,70,229,0.22) 60%,rgba(79,70,229,0.06) 78%,rgba(79,70,229,0) 92%)}
.aurora .ab.a2{width:104%;height:92%;left:-3%;bottom:3%;
background:radial-gradient(circle closest-side,rgba(129,140,248,1),rgba(129,140,248,0.8) 22%,rgba(129,140,248,0.48) 42%,rgba(129,140,248,0.2) 60%,rgba(129,140,248,0.05) 78%,rgba(129,140,248,0) 92%)}
.aurora .ab.a3{width:98%;height:86%;left:37%;bottom:-31%;
background:radial-gradient(circle closest-side,rgba(34,211,238,1),rgba(34,211,238,0.78) 22%,rgba(34,211,238,0.46) 42%,rgba(34,211,238,0.19) 60%,rgba(34,211,238,0.05) 78%,rgba(34,211,238,0) 92%)}
.aurora .ab.a4{width:108%;height:96%;left:25%;top:-25%;
background:radial-gradient(circle closest-side,rgba(167,139,250,1),rgba(167,139,250,0.8) 22%,rgba(167,139,250,0.48) 42%,rgba(167,139,250,0.2) 60%,rgba(167,139,250,0.05) 78%,rgba(167,139,250,0) 92%)}
.aurora .ab.a5{width:92%;height:84%;left:-26%;bottom:14%;
background:radial-gradient(circle closest-side,rgba(244,114,182,1),rgba(244,114,182,0.76) 22%,rgba(244,114,182,0.44) 42%,rgba(244,114,182,0.18) 60%,rgba(244,114,182,0.04) 78%,rgba(244,114,182,0) 92%)}
.aurora .ab.a6{width:96%;height:86%;left:8%;bottom:-44%;
background:radial-gradient(circle closest-side,rgba(99,102,241,1),rgba(99,102,241,0.8) 22%,rgba(99,102,241,0.48) 42%,rgba(99,102,241,0.2) 60%,rgba(99,102,241,0.05) 78%,rgba(99,102,241,0) 92%)}
/* ── .au — THE AURORA HOST ──────────────────────────────────────────────
Mirrors .mesh's contract exactly: an empty positioned box that RZV.aurora()
fills with the six blobs, invisible until something adds .on. Strength is
--au-o so each host picks its own without touching the blobs.
LOAD-BEARING: a host MUST pin its own aspect-ratio (and its own size and
anchor). The blob composition is ratio-locked — see the rule above — so a
host left to be whatever shape its content makes it will stretch the whole
arrangement into a smear. Every host declares `aspect-ratio` and a width;
#contact > .au below is the worked example. Never fix a bad-looking aurora
by editing .ab; fix the host's box. ── */
.au{position:absolute;z-index:0;pointer-events:none;overflow:hidden;
opacity:0;transition:opacity 1.2s var(--ease)}
.au.on{opacity:var(--au-o,0.42)}
/* ── FILM GRAIN (portal.css:290–296) ────────────────────────────────────
feTurbulence as a data URI, `screen` at 0.045. Screen and not overlay:
overlay(0) = 0, i.e. invisible on exactly the near-black surface that needs
the texture. Screen lifts instead. ── */
.grain{
position:fixed;inset:0;z-index:60;pointer-events:none;
mix-blend-mode:screen;opacity:0.045;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:160px 160px;background-repeat:repeat;
}
/* Screen on white is a no-op — flip to multiply so the grain still bites. */
body.phase-light .grain{mix-blend-mode:multiply;opacity:0.05}
/* ── TILT TILE (focus.html:77–86 CSS + perf-sections.js:607–627 JS) ─────
The sheen tracks the cursor through --mx/--my; the ::after is a soft outer
glow parked behind the translucent card. `transform` is NOT in the
transition list — RZV.attachTilt() writes rotationX/rotationY/y/scale every
frame (trap 2). ── */
.tilt{
position:relative;
background:var(--card);border:1px solid var(--border);border-radius:var(--r-tile);
overflow:hidden;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
transition:border-color .3s ease,background .3s ease;
}
.tilt::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
background:radial-gradient(150% 150% at var(--mx,50%) var(--my,50%),var(--tile-sheen),rgba(255,255,255,0.04) 28%,rgba(255,255,255,0.012) 55%,transparent 82%);
transition:opacity .45s var(--ease)}
.tilt::after{content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;
border-radius:var(--r-tile);box-shadow:0 0 32px var(--border-hi);
opacity:0;z-index:-1;pointer-events:none;transition:opacity .5s var(--ease)}
.tilt>*{position:relative;z-index:1}
.tilt:hover{border-color:var(--border-hi);background:var(--card-hi)}
.tilt:hover::before{opacity:0.55}
.tilt:hover::after{opacity:0.4}
/* ═══ LOADER ════════════════════════════════════════════════════════════
An ANTI-FLASH PLATE, nothing more. The opening film runs on the hero stage,
not in here (see intro.css's header note) — intro.js dismisses this on its
first frame, once the runtime hidden states are set, and it fades out black
onto black. It stays empty for its whole life.
It only exists when the page can animate (html.rzv-anim, decided pre-paint
by the inline head script): with motion off nothing is hidden, so there is
nothing to cover. index.html carries an inline 2.5s fallback that forces
.is-done if intro.js never claims it, so a missing or failed intro.js can
never leave the site behind a black rectangle. ═══ */
#loader{
position:fixed;inset:0;z-index:9500;
background:var(--bg);
display:flex;align-items:center;justify-content:center;
transition:opacity .9s var(--ease),visibility 0s linear .9s;
}
html:not(.rzv-anim) #loader{display:none}
#loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
/* ═══ HEADER ════════════════════════════════════════════════════════════
Fixed glass bar. view-transition-name:appheader (set inline in the HTML, as
in the dashboard) keeps it as one persistent element across the index →
case-page navigation while the rest of the document dips. ═══ */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:500;
height:var(--header-h);display:flex;align-items:center;
border-bottom:1px solid transparent;
transition:opacity 0.9s var(--ease),transform 0.9s var(--ease);
}
/* PROGRESSIVE BLUR, not a flat tinted bar — "no bg color. instead do the
progressive blur", his words. The flat background and the uniform blur
both went; what replaces them is a single backdrop-filter on ::before,
masked so it is strongest at the very top edge and fades to nothing by
the header's own bottom — content underneath reads as receding into frost
rather than meeting a hard-edged glass bar.
ON ::before, NOT ON .site-header ITSELF, and that is a real improvement
against TRAP 1, not just a different way of doing the same thing: the
filter used to sit on .site-header, an ANCESTOR of everything inside it
(.header-inner and whatever it ever grows); here it sits on a SIBLING
pseudo-element instead, so a future mix-blend-mode child of .header-inner
would not trigger the iOS black-box bug this file warns about elsewhere —
sibling, not ancestor. z-index -1 is relative to .site-header's OWN
stacking context (position:fixed + z-index:500 already makes one), so it
paints behind .header-inner's normal-flow content with no z-index needed
there. */
.site-header::before{
content:'';position:absolute;inset:0;z-index:-1;
backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);
-webkit-mask-image:linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
mask-image:linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
}
.site-header.scrolled{border-bottom-color:var(--border)}
/* The opening cinematic owns the screen chrome-free: intro.js veils the
header (RZV.veilHeader) and the first return to dark after the white
phase — the constellation collapse — unveils it for good (nav.js). */
html.hdr-veil .site-header{opacity:0;transform:translateY(-12px);pointer-events:none}
/* position:relative anchors .brand's absolute centering below — the one
thing that lets the wordmark sit at the header's true midpoint regardless
of how wide its two flanking siblings (the pearl, the burger) are. */
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative}
/* "Header on desktop and mobile.: pearl top left. Logo middle. Menu hamburger
right.", his words — three independent zones, not a wordmark-and-its-dot
pinned together. The pearl used to sit AFTER "RZV" as the word's own full
stop ("pearl dot sits after RZV. header", an earlier brief); it is now a
direct .header-inner child in its own right, first in markup so space-between
parks it at the left edge, with .burger — the last child — parked at the
right. .brand sits between them but OUT of that flex flow entirely: centering
it by flex alone would read as centered only when the pearl and the burger
happened to be the same width, which they are not (9px vs 42px), so it is
absolutely centered on the header instead, independent of both. */
.brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
/* The dot IS the pearl — same material as the hero's, 9px. It arrives with
the header itself, when nav.js unveils at the constellation collapse. */
.brand-pearl{--pearl-size:9px;--pearl-glow:0.9}
/* "change rzv to bizmo all caps black font" — CORRECTION: an earlier pass
here read "bizmo" as a typo for "big mono" and guessed at generic style
properties instead. It is not a typo — Bizmo is a real installed family
(see the @font-face above) and this rule now actually loads it, at its
real Black cut, rather than approximating "black" as font-weight on
var(--mono). font-size and letter-spacing are back to their pre-guess
values (13px, normal) rather than the invented 16px/0.05em: those were
sized for Space Mono's metrics and there is no basis yet for what Bizmo
wants at this spot — his to tune once he can see it rendering. Falls back
to var(--mono) if the font ever fails to load, same fallback chain
.rz-word (intro.css) uses for its own Bizmo rule — keep both in step.
color stays var(--text), NOT a literal black: see PHASE-LIGHT above for
why hardcoding #000 would make the nav illegible in the (far more common)
dark phase. */
/* THE WORD, top-left: RZV//STUDIO in the house overline voice, the header's
left zone in the 2 Sep reference (word · big mark · MENU =). */
.hdr-word{color:var(--text);white-space:nowrap;letter-spacing:0.22em;margin:0} /* solid white, 2 Sep */
.site-header .header-inner{max-width:var(--wrap-hero)}
@media (max-width:560px){
.hdr-word-tail{display:none} /* RZV//STUDIO → RZV// */
.brand .brand-mark{width:59px;height:17px} /* 69×20 on desktop; .brand outranks the base rule below */
}
/* THE MARK. Haseeb's logo (assets/img/rzv-mark.svg, 459×141 — the 2 Sep cut with its diamond full stop) replaces the
Bizmo "RZV" wordmark, 1 Sep 2026. Painted as a CSS mask over currentColor
rather than an or an inline