/* ============================================================================
BELMONTRE — Style VUCHE Labs
Static hero. Plain HTML + CSS. No JS, no build step, no external resources.
COORDINATE SYSTEM
-----------------
.page is exactly 100vw x 100vh and is pulled back up/left by the frame
thickness so its origin IS the page origin. Every UI element therefore uses
STUDY.md percentages directly: x -> vw, y -> vh.
Conversion used throughout: 1px = 0.05981vw (x) / 0.10627vh (y)
on the 1672 x 941 reference raster.
Vertical text placement is specified by CAP TOP (what STUDY.md measures).
--cap-k is the distance from an element's line box top to the cap top,
expressed in em, for line-height:1. Every text element pulls itself up by
that amount, so `top:` is literally the measured cap top. One knob
re-registers every piece of type if the font metrics ever change.
========================================================================= */
:root{
/* ── motion system ────────────────────────────────────────────────────────
Four curves, each with a job, so nothing on the page moves by accident.
--e-arrive long-tailed out-curve: anything entering the viewport
--e-index slow-in, hard-through, long settle: a mechanism finding a detent
--e-ui short and even: pointer feedback
Scroll-driven motion uses LINEAR by design — the scroll is the easing, and
layering a curve on top makes things accelerate against the user's thumb. */
--e-arrive : cubic-bezier(.16,.84,.24,1);
--e-index : cubic-bezier(.65,0,.20,1);
--e-ui : cubic-bezier(.22,.61,.36,1);
--t-ui : .24s;
--t-index : .52s;
--stagger : 95ms;
/* hairline used by the reduced-motion section dividers */
--hair-1 : 1px;
/* the logo box outline — matched to the hero mark so both lockups agree */
--box-line : rgba(200,209,214,.42);
--focus-ring : #dfe4e7;
/* ── frame ───────────────────────────────────────────────────────────── */
--frame-inset : 0.12vw; /* dark page colour visible outside */
--frame-w : 0.778vw; /* 13px warm-white band */
--frame-r-outer : 1.02vw; /* 17px */
--frame-r-inner : 0.18vw; /* 3px */
--frame-color : #f2f4f5;
--page-color : #0a0c0e;
/* how far the page origin sits above/left of the canvas origin */
--page-offset : calc(var(--frame-inset) + var(--frame-w));
/* ── watch (SQUARE png) — registration LOCKED to the film's cover scale ── */
/* The cut-out was located inside film-poster.jpg (= video frame 0) by masked
ZNCC search: film-space centre (954, 626), width 1020px (corr 0.893).
The film uses object-fit:cover, so its scale is max(vw/1920, vh/1080):
· aspect ≤ 16/9 → scale = vh/1080 (width cropped) → size in vh
· aspect ≥ 16/9 → scale = vw/1920 (height cropped) → size in vw
The hero must track the SAME scale or the crossfade shows a resize.
Tall/narrow branch (the common desktop window and portrait): */
--watch-x : calc(50.898vw - 0.5556vh); /* page-offset + 50vw - (960-954)·vh/1080 */
--watch-y : calc(0.898vw + 57.963vh); /* page-offset + 626·vh/1080 */
--watch-w : 94.444vh; /* 1020·vh/1080 */
/* ── giant wordmark ──────────────────────────────────────────────────── */
/* BELMONTRE has nine letters to FABLE's five — the same total ink width
needs a smaller face: 37.2vh * (3.21 / 6.23 em of Arial Black advance).
Top: measured FABLE geometry had the case top (y 33.5vh) cut across the
lower ~40% of the caps (baseline 44.6vh). Kept the same cover fraction:
baseline = 33.5 + .407 x capHeight(14.09vh) = 39.24vh, minus the .880em
baseline offset = 22.34vh. The title still reads as sitting slightly
BEHIND the watch, just as FABLE did.
Final nudge: raised to 21.0vh so the case cuts the O at most in half
(cover drops ~0.4 -> ~0.3 of the cap under measured metrics). */
--belmontre-left : 15.18vw;
--belmontre-width : 76.26vw; /* = target span / --belmontre-sx */
--belmontre-sx : 0.920;
--belmontre-top : 21.0vh;
--belmontre-size : 19.2vh;
--belmontre-opacity : 0.84;
--belmontre-c1 : #f4f6f7; /* chrome core */
--belmontre-c2 : #bcc5ca; /* mid stop (42%) */
--belmontre-c3 : #4a5358; /* outer stop(88%) */
--belmontre-blur : 0.5px;
--belmontre-grain : 11.5vh; /* tile size of the fine grain layer */
/* ── type scale (vh so type tracks the same axis as the hero) ────────── */
--fs-logo : 1.913vh; /* 18.0px logo BELMONTRE */
--fs-meta : 1.275vh; /* 12.0px MAISON / EST. 2026 */
--fs-nav-num : 1.328vh; /* 12.5px 01 02 03 04 */
--fs-nav-label : 1.381vh; /* 13.0px CALIBRE … */
--fs-series-lbl : 1.169vh; /* 11.0px SERIES */
--fs-series-val : 1.328vh; /* 12.5px 01 / 04 */
--fs-tagline : 1.700vh; /* 16.0px both taglines */
--fs-eyebrow : 1.222vh; /* 11.5px MANIFESTO */
--fs-manifesto : 2.657vh; /* 25.0px Precision, … */
--fs-enter : 1.435vh; /* 13.5px ENTER */
--fs-spec-num : 3.507vh; /* 33.0px 72H / 41 */
--fs-spec-tag : 1.116vh; /* 10.5px SPEC. A / SPEC. B */
--fs-spec-cap : 1.647vh; /* 15.5px panel captions */
/* ── tracking ────────────────────────────────────────────────────────── */
--ls-logo : 0.42em;
--ls-meta : 0.225em;
--ls-nav-num : 0.18em;
--ls-nav-label : 0.16em;
--ls-series-lbl : 0.30em;
--ls-series-val : 0.130em;
--ls-eyebrow : 0.25em;
--ls-enter : 0.335em;
--ls-spec-tag : 0.155em;
/* ── line-heights (unitless) ─────────────────────────────────────────── */
--lh-tagline : 1.4375; /* 23 / 16 */
--lh-manifesto : 1.24; /* 31 / 25 */
/* ── cap-top registration ────────────────────────────────────────────── */
--cap-k : 0.109;
/* ── colours ─────────────────────────────────────────────────────────── */
--c-logo : #eef1f3;
--c-meta : #aeb7bc;
--c-nav-num : #c6ced2;
--c-nav-label : rgba(255,255,255,.96);
--c-series : #e6eaec;
--c-tagline : rgba(255,255,255,.95);
--c-eyebrow : #a9b2b7;
--c-manifesto : #ffffff;
--c-enter : #ffffff;
--c-spec-num : #eceff1;
--c-spec-tag : #bac3c8;
--c-spec-cap : rgba(255,255,255,.93);
--c-rule : rgba(255,255,255,.26);
--c-underline : rgba(255,255,255,.80);
--c-mark : rgba(200,209,214,.55);
/* ── cards ───────────────────────────────────────────────────────────── */
--enter-fill : rgba(10,13,16,.28);
--enter-border : rgba(255,255,255,.45);
--enter-blur : 7px;
--spec-fill : rgba(14,18,21,.60);
--spec-border : rgba(255,255,255,.36);
--spec-divider : rgba(255,255,255,.55);
--spec-blur : 9px;
/* ── hairline weights (kept in px: hairlines should not scale) ───────── */
--hair : 1px;
--hair-15 : 1.5px;
/* ── UI geometry ─────────────────────────────────────────────────────── */
--mark-x : 2.960vw; /* 49.5px */
--mark-y : 5.207vh; /* 49.0px */
--mark-size : 5.760vh; /* 54.2px, square (sized on one axis) */
--brand-x : 7.536vw; /* 126px */
--brand-y : 6.588vh; /* 61px cap top (+1px optical) */
--meta-y : 9.246vh; /* 87px cap top */
--rule-a-x : 35.288vw; /* 590px */
--rule-b-x : 70.456vw; /* 1178px */
--rule-y : 5.260vh; /* 49.5px */
--rule-h : 5.898vh; /* 55.5px */
--nav-x1 : 37.262vw; /* 623px */
--nav-x2 : 45.456vw; /* 760px */
--nav-x3 : 55.564vw; /* 929px */
--nav-x4 : 63.817vw; /* 1067px */
--nav-num-y : 6.269vh; /* 57.5px cap top (+1.5px optical) */
--nav-label-y : 8.608vh; /* 81px cap top */
--underline-x : 35.288vw; /* 590px */
--underline-w : 7.177vw; /* 120px */
--underline-y : 11.052vh; /* 104px */
--series-r : 4.306vw; /* right edge 1600px */
--series-lbl-y: 6.801vh; /* 64px cap top */
--series-val-y: 8.608vh; /* 81px cap top */
/* x values below are box lefts: 2px less than the measured INK left, which is
the left side bearing of the first glyph at these sizes. */
--tag-l-x : 2.931vw; /* 49px -> ink at 51px */
--tag-l-y : 14.134vh; /* 133px cap top */
--tag-r-r : 3.888vw; /* right edge 1607px */
--tag-r-y : 14.240vh; /* 134px cap top */
--eyebrow-x : 2.931vw; /* 49px -> ink at 51px */
--eyebrow-y : 84.697vh; /* 797px cap top (see NOTE in report) */
--manifesto-x : 2.931vw; /* 49px -> ink at 51px */
--manifesto-y : 88.310vh; /* 831px cap top */
--enter-x : 42.362vw; /* 708.3px */
--enter-y : 88.417vh; /* 832.0px */
--enter-w : 14.421vw; /* 241.1px */
--enter-h : 5.664vh; /* 53.3px */
--enter-lbl-x : 3.869vw; /* +64.7px -> ink at 775px */
--enter-lbl-y : 2.338vh; /* +22.0px */
--enter-arr-x : 10.808vw; /* +180.7px */
--enter-arr-y : 2.232vh; /* +21.0px */
--enter-arr-w : 1.701vh; /* 16px (vh: keeps the arrow undistorted) */
--enter-arr-h : 1.381vh; /* 13px */
--spec-x : 74.763vw; /* 1250px */
--spec-y : 70.850vh; /* 666.7px */
--spec-w : 22.159vw; /* 370.5px */
--spec-h : 23.220vh; /* 218.5px */
--spec-div-y : 11.541vh; /* +108.6px */
--spec-pad-x : 1.435vw; /* +24px -> ink at 1276px */
--spec-tag-r : 1.286vw; /* right edge 1597px */
--spec-num-a-y: 2.795vh; /* +26.3px cap top */
--spec-tag-a-y: 3.858vh; /* +36.3px cap top */
--spec-cap-a-y: 7.471vh; /* +70.3px cap top */
--spec-num-b-y: 14.379vh; /* +135.3px cap top */
--spec-tag-b-y: 15.442vh; /* +145.3px cap top */
--spec-cap-b-y: 19.161vh; /* +180.3px cap top */
/* ── procedural grain for the wordmark (inline SVG, no external file) ── */
/* NOTE: color-interpolation-filters='sRGB' is mandatory. The SVG default is
linearRGB, which renders mid-grey noise at ~0.74 sRGB and blows the fill
out to pale yellow. The feColorMatrix maps the turbulence ALPHA channel
into an opaque grey centred exactly on 0.5, so the blend stays neutral
and only the amplitude (the 4th column) controls grain strength. */
--noise-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0.13 0.435 0 0 0 0.13 0.435 0 0 0 0.13 0.435 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E");
--noise-broad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.010 0.017' numOctaves='5' seed='23'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0.26 0.37 0 0 0 0.26 0.37 0 0 0 0.26 0.37 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='900' height='420' filter='url(%23b)'/%3E%3C/svg%3E");
}
/* ==========================================================================
RESET
========================================================================== */
*,
*::before,
*::after{ box-sizing:border-box; }
html,body{
margin:0;
padding:0;
height:100%;
overflow:hidden; /* hero is exactly one viewport: no scrollbars */
}
body{
background:var(--page-color);
font-family:"Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing:antialiased;
text-rendering:geometricPrecision;
}
p{ margin:0; }
a{ text-decoration:none; color:inherit; }
/* ==========================================================================
FRAME / CANVAS / PAGE
========================================================================== */
.frame{
position:fixed;
inset:var(--frame-inset);
background:var(--frame-color);
border-radius:var(--frame-r-outer);
}
.canvas{
position:absolute;
inset:var(--frame-w);
border-radius:var(--frame-r-inner);
overflow:hidden;
background:#0b0d0f;
}
/* origin of .page == origin of the viewport */
.page{
position:absolute;
top:calc(var(--page-offset) * -1);
left:calc(var(--page-offset) * -1);
width:100vw;
height:100vh;
}
/* ── layer 1: background plate ─────────────────────────────────────────── */
.bg{
position:absolute;
inset:0;
z-index:1;
}
.bg img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%;
}
/* ── layer 2: vignette ─────────────────────────────────────────────────── */
.vignette{
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
background:
radial-gradient(118% 96% at 50% 56%,
rgba(0,0,0,0) 36%,
rgba(0,0,0,.22) 66%,
rgba(0,0,0,.52) 86%,
rgba(0,0,0,.74) 100%),
linear-gradient(to bottom,
rgba(0,0,0,.30) 0%,
rgba(0,0,0,0) 16%,
rgba(0,0,0,0) 84%,
rgba(0,0,0,.30) 100%);
}
/* ── layer 3: giant wordmark (real HTML text) ──────────────────────────── */
.wordmark{
position:absolute;
z-index:3;
left:var(--belmontre-left);
top:var(--belmontre-top);
width:var(--belmontre-width);
display:flex;
justify-content:space-between;
align-items:flex-start;
/* Letterform matched to the reference by shape-overlap scoring of the "E":
Arial Black scored IoU 0.840 against the reference glyph, the best of every
system face tested; Avenir Next (previously used) scored only 0.732 — its
E has short stubby arms where the reference has long arms and deep counters.
Arial Black is natively wider than the reference letterform, so the whole
wordmark is condensed horizontally and its width pre-divided to compensate. */
font-family:"Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:900;
font-size:var(--belmontre-size);
line-height:1;
letter-spacing:0;
white-space:nowrap;
user-select:none;
transform:scaleX(var(--belmontre-sx));
transform-origin:left top;
/* fill: warm gradient + two low-alpha turbulence fields (irregular grain and
broad mottling). Plain compositing — overlay/soft-light blow the fill out. */
background-image:
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,'),
radial-gradient(75% 130% at 36% 72%,
var(--belmontre-c1),
var(--belmontre-c2) 42%,
var(--belmontre-c3) 88%);
background-size:auto, auto, 100% 100%;
background-repeat:repeat, repeat, no-repeat;
background-blend-mode:normal, normal, normal;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
opacity:var(--belmontre-opacity);
filter:blur(var(--belmontre-blur)); /* sit the edges back into the photograph */
}
.wordmark span{ display:block; }
/* ── layer 4: hero subject ─────────────────────────────────────────────── */
.watch{
position:absolute;
z-index:4;
left:var(--watch-x);
top:var(--watch-y);
width:var(--watch-w); /* vh — a square asset must never be sized in vw */
aspect-ratio:1 / 1;
transform:translate(-50%,-50%);
pointer-events:none;
}
.watch img{
display:block;
width:100%;
height:100%;
object-fit:contain;
}
/* ── layer 5: UI ───────────────────────────────────────────────────────── */
.ui{
position:absolute;
inset:0;
z-index:5;
}
/* ==========================================================================
LOGO BLOCK
========================================================================== */
.mark{
position:absolute;
left:var(--mark-x);
top:var(--mark-y);
width:var(--mark-size);
height:var(--mark-size);
border:var(--hair-15) solid var(--c-mark);
}
.mark svg{
display:block;
width:100%;
height:100%;
color:var(--c-logo);
}
.mark circle{
fill:none;
stroke:currentColor;
stroke-width:1.7;
}
.mark line{
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:butt;
}
.brand-name{
position:absolute;
left:var(--brand-x);
top:var(--brand-y);
font-size:var(--fs-logo);
font-weight:600;
letter-spacing:var(--ls-logo);
color:var(--c-logo);
line-height:1;
margin-top:calc(var(--cap-k) * -1em);
white-space:nowrap;
}
.brand-meta{
position:absolute;
left:var(--brand-x);
top:var(--meta-y);
font-size:var(--fs-meta);
font-weight:500;
letter-spacing:var(--ls-meta);
color:var(--c-meta);
line-height:1;
margin-top:calc(var(--cap-k) * -1em);
white-space:nowrap;
}
/* ==========================================================================
NAV
========================================================================== */
.rule{
position:absolute;
top:var(--rule-y);
width:var(--hair);
height:var(--rule-h);
background:var(--c-rule);
}
.rule-a{ left:var(--rule-a-x); }
.rule-b{ left:var(--rule-b-x); }
.nav-item{
position:absolute;
top:0;
display:block;
white-space:nowrap;
}
.n1{ left:var(--nav-x1); }
.n2{ left:var(--nav-x2); }
.n3{ left:var(--nav-x3); }
.n4{ left:var(--nav-x4); }
.nav-num{
position:absolute;
left:0;
top:var(--nav-num-y);
display:block;
line-height:1;
margin-top:calc(var(--cap-k) * -1em);
font-size:var(--fs-nav-num);
font-weight:500;
letter-spacing:var(--ls-nav-num);
color:var(--c-nav-num);
}
/* every nav item is the SAME brightness — the underline is the only cue */
.nav-label{
position:absolute;
left:0;
top:var(--nav-label-y);
display:block;
line-height:1;
margin-top:calc(var(--cap-k) * -1em);
font-size:var(--fs-nav-label);
font-weight:600;
letter-spacing:var(--ls-nav-label);
color:var(--c-nav-label);
}
.nav-underline{
position:absolute;
left:var(--underline-x);
top:var(--underline-y);
width:var(--underline-w);
height:var(--hair-15);
background:var(--c-underline);
/* Authored left/width are left exactly as measured from the reference, so the
resting composition is untouched; the indicator is moved with a transform
instead, which cannot dirty layout. scaleX cannot distort a 1.5px bar, so no
counter-scale is needed. The curve is slow-in / hard-through / long-settle —
a mechanism indexing to a detent rather than a tab sliding. */
transform:translateX(var(--u-dx, 0px)) scaleX(var(--u-sx, 1));
transform-origin:left center;
transition:transform var(--t-index, .62s) var(--e-index, cubic-bezier(.65,0,.20,1));
}
@media (prefers-reduced-motion: reduce){ .nav-underline{ transition:none; } }
/* ==========================================================================
SERIES COUNTER
========================================================================== */
.series-label,
.series-value{
position:absolute;
right:var(--series-r);
text-align:right;
line-height:1;
margin-top:calc(var(--cap-k) * -1em);
color:var(--c-series);
white-space:nowrap;
font-weight:600;
}
.series-label{
top:var(--series-lbl-y);
font-size:var(--fs-series-lbl);
letter-spacing:var(--ls-series-lbl);
/* letter-spacing adds a trailing gap; pull it back so the right edge lands */
margin-right:calc(var(--ls-series-lbl) * -1);
}
.series-value{
top:var(--series-val-y);
font-size:var(--fs-series-val);
letter-spacing:var(--ls-series-val);
margin-right:calc(var(--ls-series-val) * -1);
}
/* ==========================================================================
TAGLINES
========================================================================== */
.tagline{
position:absolute;
font-size:var(--fs-tagline);
font-weight:400;
line-height:var(--lh-tagline);
color:var(--c-tagline);
margin-top:calc((var(--cap-k) + (var(--lh-tagline) - 1) / 2) * -1em);
white-space:nowrap;
}
.tagline-l{
left:var(--tag-l-x);
top:var(--tag-l-y);
}
.tagline-r{
right:var(--tag-r-r);
top:var(--tag-r-y);
text-align:right;
}
/* ==========================================================================
MANIFESTO
========================================================================== */
.eyebrow{
position:absolute;
left:var(--eyebrow-x);
top:var(--eyebrow-y);
font-size:var(--fs-eyebrow);
font-weight:600;
letter-spacing:var(--ls-eyebrow);
color:var(--c-eyebrow);
line-height:1;
margin-top:calc(var(--cap-k) * -1em);
white-space:nowrap;
}
.manifesto{
position:absolute;
left:var(--manifesto-x);
top:var(--manifesto-y);
font-size:var(--fs-manifesto);
font-weight:400;
line-height:var(--lh-manifesto);
color:var(--c-manifesto);
margin-top:calc((var(--cap-k) + (var(--lh-manifesto) - 1) / 2) * -1em);
white-space:nowrap;
}
/* ==========================================================================
ENTER — translucent dark fill over a blurred backdrop
========================================================================== */
.enter{
position:absolute;
left:var(--enter-x);
top:var(--enter-y);
width:var(--enter-w);
height:var(--enter-h);
border:var(--hair-15) solid var(--enter-border);
background:var(--enter-fill);
-webkit-backdrop-filter:blur(var(--enter-blur));
backdrop-filter:blur(var(--enter-blur));
display:block;
}
.enter-label{
position:absolute;
left:var(--enter-lbl-x);
top:var(--enter-lbl-y);
display:block;
line-height:1;
margin-top:calc(var(--cap-k) * -1em);
font-size:var(--fs-enter);
font-weight:600;
letter-spacing:var(--ls-enter);
color:var(--c-enter);
white-space:nowrap;
}
.enter-arrow{
position:absolute;
left:var(--enter-arr-x);
top:var(--enter-arr-y);
width:var(--enter-arr-w);
height:var(--enter-arr-h);
color:var(--c-enter);
overflow:visible;
}
.enter-arrow line,
.enter-arrow polyline{
fill:none;
stroke:currentColor;
stroke-width:1.4;
stroke-linecap:square;
stroke-linejoin:miter;
vector-effect:non-scaling-stroke;
}
/* ==========================================================================
SPEC PANEL — translucent dark fill over a blurred backdrop
========================================================================== */
.spec{
position:absolute;
left:var(--spec-x);
top:var(--spec-y);
width:var(--spec-w);
height:var(--spec-h);
border:var(--hair-15) solid var(--spec-border);
background:var(--spec-fill);
-webkit-backdrop-filter:blur(var(--spec-blur));
backdrop-filter:blur(var(--spec-blur));
}
.spec-divider{
position:absolute;
left:0;
right:0;
top:var(--spec-div-y);
height:var(--hair);
background:var(--spec-divider);
}
.spec-num,
.spec-tag,
.spec-cap{
position:absolute;
display:block;
line-height:1;
margin-top:calc(var(--cap-k) * -1em);
white-space:nowrap;
}
.spec-num{
left:var(--spec-pad-x);
font-size:var(--fs-spec-num);
font-weight:600;
letter-spacing:-0.005em;
color:var(--c-spec-num);
}
.spec-num-a{ top:var(--spec-num-a-y); }
.spec-num-b{ top:var(--spec-num-b-y); }
.spec-tag{
right:var(--spec-tag-r);
text-align:right;
font-size:var(--fs-spec-tag);
font-weight:600;
letter-spacing:var(--ls-spec-tag);
color:var(--c-spec-tag);
margin-right:calc(var(--ls-spec-tag) * -1);
}
.spec-tag-a{ top:var(--spec-tag-a-y); }
.spec-tag-b{ top:var(--spec-tag-b-y); }
.spec-cap{
left:var(--spec-pad-x);
font-size:var(--fs-spec-cap);
font-weight:400;
color:var(--c-spec-cap);
}
.spec-cap-a{ top:var(--spec-cap-a-y); }
.spec-cap-b{ top:var(--spec-cap-b-y); }
/* ==========================================================================
SCROLL-DRIVEN FILM
The hero becomes the first viewport of a tall scroll track. Scrolling scrubs
a pre-rendered film of the watch exploding; scrolling back reassembles it.
========================================================================== */
:root{
--track-h : 520vh; /* scroll distance that maps to the film */
--chapter-x : 5.0vw;
--chapter-y : 40.5vh;
--fs-chapter-num : 1.328vh;
--fs-chapter-name: 2.10vh;
--fs-chapter-line: 1.700vh;
}
/* the hero was locked to exactly one viewport; the page scrolls now */
html,body{ height:auto; overflow:visible; }
/* clip, not hidden: overflow:hidden on body makes it a scroll container
and position:sticky then stops pinning to the viewport */
body{ overflow-x:clip; }
.scroll-track{ position:relative; height:var(--track-h); }
.pin{
position:sticky;
top:0;
height:100vh;
overflow:hidden;
}
/* the sticky .pin supplies the pinning, so the frame no longer fixes itself */
.frame{ position:absolute; }
/* the composed still: background, vignette, wordmark and watch, faded as one */
.hero-static{
position:absolute;
inset:0;
z-index:1;
}
/* The film. Offset by --page-offset: the start frame was captured with the
frame collapsed, which moved the scene up-left by exactly that much, so this
puts the film back in register with the still it crossfades from. */
.film{
position:absolute;
top:var(--page-offset);
left:var(--page-offset);
width:100vw;
height:100vh;
object-fit:cover;
z-index:2;
opacity:0;
pointer-events:none;
will-change:opacity;
background:#0b0d0f;
}
/* ── chapters ───────────────────────────────────────────────────────────── */
.chapters{
position:absolute;
inset:0;
z-index:6;
pointer-events:none;
}
.chapter{
position:absolute;
left:var(--chapter-x);
top:var(--chapter-y);
width:30vw;
opacity:0;
will-change:opacity;
}
/* The three lines share one travel value but consume different fractions of it,
so the block arrives as three beats rather than as a slab. --cy is published
per frame by the scrub; entry and exit ramps are separate, so the block enters
from below and leaves through the top instead of rewinding down its own path. */
.chapter-num { transform:translateY(calc(var(--cy, 0px) * .55)); }
.chapter-name{ transform:translateY(calc(var(--cy, 0px) * .85)); }
.chapter-line{ transform:translateY(var(--cy, 0px)); }
/* The film brightens a great deal as the movement is exposed, so the chapter
text needs its own ground to stay readable. A soft elliptical scrim, well
inside the existing palette, sits behind the block and never shows an edge. */
.chapter::before{
content:"";
position:absolute;
left:-6vw;
top:-9vh;
width:42vw;
height:34vh;
z-index:-1;
pointer-events:none;
background:radial-gradient(58% 52% at 34% 50%,
rgba(6,9,11,.80) 0%,
rgba(6,9,11,.62) 42%,
rgba(6,9,11,.28) 70%,
rgba(6,9,11,0) 100%);
}
.chapter-num{
display:block;
font-size:var(--fs-chapter-num);
font-weight:500;
letter-spacing:var(--ls-nav-num);
color:var(--c-nav-num);
}
.chapter-name{
display:block;
margin-top:1.5vh;
font-size:var(--fs-chapter-name);
font-weight:600;
letter-spacing:var(--ls-nav-label);
color:var(--c-nav-label);
}
.chapter-line{
margin-top:1.9vh;
font-size:var(--fs-chapter-line);
font-weight:400;
line-height:1.45;
color:var(--c-tagline);
}
/* active navigation item while its chapter is on screen */
.nav-item.is-active .nav-label{ color:#fff; }
.nav-item.is-active .nav-num{ color:var(--c-series-value, #e6eaec); }
/* ── reduced motion ─────────────────────────────────────────────────────── */
.rm-sections{ display:none; }
@media (prefers-reduced-motion: reduce){
.scroll-track{ height:100vh; }
.film{ display:none !important; }
.hero-static{ opacity:1 !important; }
.chapters{ display:none; }
.rm-sections{
display:block;
background:var(--page-color);
padding:12vh 5vw 14vh;
}
.rm-sections section{
max-width:52ch;
padding:5.2vh 0;
border-top:var(--hair-1) solid var(--c-hairline, rgba(255,255,255,.18));
}
.rm-sections section:first-child{ border-top:0; }
.rm-num{
display:block;
font-size:var(--fs-nav-num);
font-weight:500;
letter-spacing:var(--ls-nav-num);
color:var(--c-nav-num);
}
.rm-sections h2{
margin:1.6vh 0 0;
font-size:var(--fs-chapter-name);
font-weight:600;
letter-spacing:var(--ls-nav-label);
color:var(--c-nav-label);
}
.rm-sections p{
margin:1.8vh 0 0;
font-size:var(--fs-chapter-line);
font-weight:400;
line-height:1.5;
color:var(--c-tagline);
}
}
/* if the film file is missing, fall back to the still and drop the dead scroll */
html.film-missing .scroll-track{ height:100vh; }
html.film-missing .film{ display:none; }
html.film-missing .hero-static{ opacity:1 !important; }
html.film-missing .chapters{ display:none; }
/* ── interface protection over the film ─────────────────────────────────────
The film exposes bright rose-gold and steel that sweep through the nav row
and park under the manifesto, making both unreadable. These two soft grounds
ride in with the film (opacity is driven alongside it), so at scroll 0 the
composition is byte-identical to the approved still. */
.ui-scrims{
position:absolute;
inset:0;
z-index:4;
opacity:0;
pointer-events:none;
will-change:opacity;
}
.ui-scrims::before{ /* top band: logo, nav, series, taglines */
content:"";
position:absolute;
left:0; right:0; top:0;
height:27vh;
background:linear-gradient(180deg,
rgba(6,9,11,.74) 0%,
rgba(6,9,11,.46) 46%,
rgba(6,9,11,0) 100%);
}
.ui-scrims::after{ /* bottom-left pool: MANIFESTO block */
content:"";
position:absolute;
left:0; bottom:0;
width:54vw; height:36vh;
background:radial-gradient(74% 92% at 16% 90%,
rgba(6,9,11,.82) 0%,
rgba(6,9,11,.48) 46%,
rgba(6,9,11,0) 100%);
}
/* ============================================================================
SECTIONS BELOW THE HERO · client art direction
Language borrowed from the client's board:
· display type is UPPERCASE, widely letterspaced, cool platinum-silver
· the colossal words are OUTLINED, not filled, and very widely tracked
· eyebrows read "02 / COLLECTION"
· split compositions: copy left, photograph bleeding off the right edge
· a stat rail divided by vertical hairlines
· underlined arrow links rather than boxes, except the closing pair
========================================================================= */
:root{
--sec-x : 3.05vw;
--fs-eye : clamp(9.5px,.63vw,12px);
--fs-dsp : clamp(26px,2.55vw,50px);
--fs-body : clamp(13px,.88vw,17px);
--fs-micro : clamp(9px,.6vw,11.5px);
--rule-soft : rgba(255,255,255,.13);
--silver-dsp : #e6eaec; /* chrome: cool platinum display */
--silver-soft : #aab3b8;
--ghost-line : rgba(204,212,217,.30);
}
.page-frame{
position:fixed; inset:var(--frame-inset);
border:var(--frame-w) solid var(--frame-color);
border-radius:var(--frame-r-outer);
pointer-events:none; z-index:900;
}
.below{
position:relative; z-index:2;
background:
radial-gradient(120% 38% at 14% 0%, rgba(150,162,172,.16) 0%, rgba(150,162,172,0) 60%),
radial-gradient(90% 44% at 86% 40%, rgba(122,134,144,.12) 0%, rgba(122,134,144,0) 64%),
var(--page-color);
}
/* ── atoms ───────────────────────────────────────────────────────────────── */
.eye{
display:block; margin:0 0 clamp(20px,2.6vh,34px);
font-size:var(--fs-eye); font-weight:600;
letter-spacing:.34em; color:var(--silver-soft);
text-transform:uppercase;
}
.dsp{
margin:0;
font-size:var(--fs-dsp); font-weight:400;
line-height:1.24; letter-spacing:.13em;
color:var(--silver-dsp); text-transform:uppercase;
}
.body-copy{
margin:clamp(18px,2.4vh,30px) 0 0; max-width:34ch;
font-size:var(--fs-body); line-height:1.62;
color:rgba(255,255,255,.72);
}
/* outlined colossal word */
.ghost{
display:block;
font-weight:400;
line-height:.9;
letter-spacing:.30em;
text-transform:uppercase;
white-space:nowrap;
color:transparent;
-webkit-text-stroke:.0135em var(--ghost-line); /* was a fixed 1px */
pointer-events:none; user-select:none;
/* the hero already sits its giant wordmark back into the plate with
filter:blur(.5px); carrying that same depth cue below the fold is
consistency, not a new trick */
filter:blur(.35px);
clip-path:inset(0 0 100% 0);
}
/* an outline that draws down from the cap line reads as a watermark being
impressed into the section, rather than a word fading up */
.rise.in .ghost{ clip-path:inset(0 0 0 0); transition:clip-path 1.25s var(--e-arrive); }
@media (prefers-reduced-motion: reduce){ .ghost{ clip-path:none; } }
/* underlined arrow link */
.alink{
display:inline-flex; align-items:center; gap:1.5em;
margin-top:clamp(26px,3.4vh,46px);
padding-bottom:.85em;
border-bottom:1px solid rgba(204,212,217,.42);
font-size:var(--fs-eye); font-weight:600;
letter-spacing:.26em; color:var(--silver-dsp);
text-decoration:none; text-transform:uppercase;
}
.alink svg{ width:15px; height:11px; flex:none; }
.alink svg *{ fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
/* ── reveal tiers ─────────────────────────────────────────────────────────────
The container is now only the trigger; it no longer fades in as a slab with
its contents welded to it. Each tier of the hierarchy has its OWN verb and its
own moment, and they arrive in reading order: label, headline, copy, control.
Intervals grow rather than repeat — an even stagger reads mechanical.
clip-path and mask cause no reflow, keep text selectable, and are invisible to
the accessibility tree, so nothing here costs legibility. */
.rise{ opacity:1; transform:none; }
/* LABEL — commits first and fastest. A wipe, not a fade. */
.rise .eye, .rise .trio-rule > span{ opacity:0; clip-path:inset(0 100% 0 0); }
.rise.in .eye, .rise.in .trio-rule > span{
opacity:1; clip-path:inset(0 0 0 0);
transition:opacity .34s linear, clip-path .74s var(--e-arrive); }
/* DISPLAY — develops downward, the way a print comes up in the tray. */
.rise .dsp{
opacity:0;
-webkit-mask-image:linear-gradient(180deg,#000 0 42%,transparent 78%);
mask-image:linear-gradient(180deg,#000 0 42%,transparent 78%);
-webkit-mask-size:100% 240%; mask-size:100% 240%;
-webkit-mask-position:0 100%; mask-position:0 100%;
}
.rise.in .dsp{
opacity:1;
-webkit-mask-position:0 0; mask-position:0 0;
transition:opacity .50s linear .12s,
-webkit-mask-position 1.15s var(--e-arrive) .12s,
mask-position 1.15s var(--e-arrive) .12s;
}
/* BODY — the only tier that travels, and only 8px of it. */
.rise .body-copy{ opacity:0; transform:translateY(8px); }
.rise.in .body-copy{ opacity:1; transform:none;
transition:opacity .90s var(--e-arrive) .30s, transform .90s var(--e-arrive) .30s; }
/* CONTROL — arrives last, opacity only. A thing you can press should not slide. */
.rise .alink, .rise .btn, .rise .play, .rise .sig-count{ opacity:0; }
.rise.in .alink, .rise.in .btn, .rise.in .play, .rise.in .sig-count{
opacity:1; transition:opacity .70s var(--e-arrive) calc(.46s + var(--i,0) * var(--stagger)); }
/* REPEATED CHILDREN — one gesture, three beats. */
.rail > div, .trio-grid > li, .sig-foot .sig-name{ opacity:0; transform:translateY(1.4vh); }
.rail.rise.in > div, .rise.in .trio-grid > li, .rise.in .sig-name{
opacity:1; transform:none;
transition:opacity .80s var(--e-ui) calc(var(--i,0) * var(--stagger)),
transform 1.02s var(--e-arrive) calc(var(--i,0) * var(--stagger)); }
/* THE PLATE — the product is the slowest thing on the page, deliberately.
.sig already clips, so the overscale cannot reflow anything. */
.sig .alive{ transform:scale(1.035); transform-origin:50% 62%; }
.sig.in .alive{ transform:none; transition:transform 1.9s var(--e-arrive); }
/* ── split composition: copy left, photograph bleeding off the right ─────── */
.split{
position:relative;
display:grid;
grid-template-columns:1fr 1.08fr;
align-items:center;
border-top:1px solid var(--rule-soft);
}
.split-copy{
position:relative; z-index:2;
/* deep bottom padding reserves a clear band for the outlined word */
padding:clamp(64px,9vh,124px) clamp(30px,3.4vw,64px) clamp(140px,20vh,250px) var(--sec-x);
}
.split-media{ position:relative; align-self:stretch; min-height:clamp(420px,66vh,700px); }
.split-media img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover;
}
/* let the photograph dissolve into the copy side rather than butting against it */
.split-media::after{
content:""; position:absolute; inset:0;
background:linear-gradient(90deg, var(--page-color) 0%, rgba(9,11,13,.55) 24%, rgba(9,11,13,0) 62%);
}
/* the outlined word sits low behind the copy */
.split .ghost{
position:absolute; z-index:1;
left:var(--sec-x); bottom:clamp(30px,4.4vh,62px);
font-size:clamp(44px,6.6vw,124px);
}
/* ── stat rail ───────────────────────────────────────────────────────────── */
.rail{
display:grid; grid-template-columns:repeat(3,1fr);
border-bottom:1px solid var(--rule-soft);
}
.rail div{
padding:clamp(40px,6vh,78px) 1em;
text-align:center;
font-size:var(--fs-eye); font-weight:600;
letter-spacing:.28em; color:var(--silver-soft);
text-transform:uppercase;
}
.rail div + div{ border-left:1px solid var(--rule-soft); }
/* ── signature: outlined word, product on a plinth ───────────────────────── */
.sig{ position:relative; overflow:hidden; }
.sig-media{ position:relative; }
.sig-media img{ display:block; width:100%; height:clamp(430px,76vh,820px); object-fit:cover; }
/* ── the signature watch, running ─────────────────────────────────────────────
The still is split into a base plate plus the parts that turn. Each part keeps
the photograph's own pixels, so nothing is drawn on except the sweep hand the
dial was missing. preserveAspectRatio="slice" is object-fit:cover, which lets
every layer crop identically and stay in register at any window size.
--k is the measured foreshortening of the dial (the watch leans back), so parts
turn in the DIAL's plane: un-squash vertically, rotate, re-squash. A flat
screen-plane spin would make the balance wheel wobble instead of run. */
.alive{ display:block; width:100%; height:clamp(430px,76vh,820px); --k:.9255; }
.alive .hh, .alive .mh, .alive .sh, .alive .bal{
transform-box:view-box; will-change:transform; animation-play-state:paused;
}
.alive .hh, .alive .mh, .alive .sh{ transform-origin:999px 540px; }
.alive .bal{ transform-origin:1001px 631px; }
.alive.is-live .hh, .alive.is-live .mh,
.alive.is-live .sh, .alive.is-live .bal{ animation-play-state:running; }
.sh-shadow{ fill:rgba(3,5,7,.42); transform:translate(1.4px,1.9px); }
@keyframes hand-turn{
from{ transform:scaleY(var(--k)) rotate(0deg) scaleY(calc(1 / var(--k))); }
to { transform:scaleY(var(--k)) rotate(360deg) scaleY(calc(1 / var(--k))); }
}
@keyframes beat{
from{ transform:scaleY(var(--k)) rotate(var(--amp)) scaleY(calc(1 / var(--k))); }
to { transform:scaleY(var(--k)) rotate(calc(var(--amp) * -1)) scaleY(calc(1 / var(--k))); }
}
.alive .hh{ animation:hand-turn 43200s linear infinite; } /* one turn / 12 h */
.alive .mh{ animation:hand-turn 3600s linear infinite; } /* one turn / hour */
.alive .sh{ animation:hand-turn 60s linear infinite; } /* one turn / minute */
/* 28,800 vph is 8 beats a second, so one half-swing lasts an eighth of a second.
ease-in-out on an alternating pair is simple harmonic motion, which is what a
balance spring actually does. */
.alive .bal{ --amp:58deg; animation:beat .125s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce){
.alive .hh, .alive .mh, .alive .sh, .alive .bal{ animation:none; }
}
.sig-media::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(9,11,13,.72) 0%, rgba(9,11,13,0) 34%, var(--page-color) 100%);
}
.sig .ghost{
position:absolute; z-index:2;
top:clamp(26px,4.4vh,64px); left:50%; translate:-50% 0;
font-size:clamp(38px,7.4vw,140px);
}
.sig-foot{
position:absolute; z-index:2; inset:auto var(--sec-x) clamp(28px,4.4vh,58px) var(--sec-x);
display:flex; align-items:flex-end; justify-content:space-between; gap:2em;
}
.sig-name{
margin:0; font-size:var(--fs-eye); font-weight:600;
letter-spacing:.3em; color:var(--silver-dsp); text-transform:uppercase;
}
.sig-right{ text-align:right; }
.sig-right .alink{ margin-top:0; }
.sig-count{
margin:1.1em 0 0; font-size:var(--fs-micro);
letter-spacing:.26em; color:var(--silver-soft);
}
/* ── the three variations ────────────────────────────────────────────────── */
.trio{ padding:clamp(56px,8vh,110px) var(--sec-x) clamp(70px,10vh,130px); }
.trio-rule{
display:flex; align-items:center; gap:1.7em;
margin:0 0 clamp(32px,4.6vh,60px);
font-size:var(--fs-eye); font-weight:600;
letter-spacing:.32em; color:var(--silver-soft); text-transform:uppercase;
}
.trio-rule::before,.trio-rule::after{ content:""; height:1px; background:var(--rule-soft); flex:1 1 auto; }
.trio-grid{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.4vw,68px);
}
.trio-grid li{ position:relative; padding-top:clamp(30px,3.2vw,62px); }
.trio-num{
position:absolute; top:0; left:-.04em; z-index:0;
font-size:clamp(42px,4.6vw,86px); font-weight:400;
line-height:.86; letter-spacing:.14em;
color:transparent; -webkit-text-stroke:1px var(--ghost-line);
pointer-events:none; user-select:none;
}
.trio-grid img,
.trio-grid .turn{
position:relative; z-index:1; display:block; width:100%;
aspect-ratio:4/5; object-fit:cover; border:1px solid var(--rule-soft);
}
/* the clips are there-and-back loops, so they never jump at the join */
.trio-grid .turn{ background:#0a0c0e; }
.trio-name{
position:relative; z-index:1; margin:clamp(16px,2.2vh,26px) 0 0;
font-size:var(--fs-eye); font-weight:600; letter-spacing:.28em;
color:var(--silver-dsp); text-transform:uppercase;
}
.trio-desc{ margin:.85em 0 0; font-size:var(--fs-body); line-height:1.55; color:rgba(255,255,255,.66); }
.trio-ed{
margin:clamp(13px,1.7vh,20px) 0 0; padding-top:clamp(11px,1.4vh,16px);
border-top:1px solid var(--rule-soft);
font-size:var(--fs-micro); letter-spacing:.26em; color:var(--silver-soft); text-transform:uppercase;
}
/* ── atelier play control ────────────────────────────────────────────────── */
.play{
margin-top:clamp(28px,3.8vh,50px);
width:clamp(44px,3.4vw,62px); aspect-ratio:1;
display:grid; place-items:center;
border:1px solid rgba(204,212,217,.5); border-radius:50%;
color:var(--silver-dsp); text-decoration:none;
}
.play svg{ width:32%; height:32%; margin-left:8%; fill:currentColor; }
/* ── closing call to action ──────────────────────────────────────────────── */
.close{
padding:clamp(78px,11vh,150px) var(--sec-x);
text-align:center;
border-top:1px solid var(--rule-soft);
}
.close .dsp{ letter-spacing:.28em; }
.close .body-copy{ margin-left:auto; margin-right:auto; max-width:38ch; }
.close-actions{
margin-top:clamp(34px,4.6vh,62px);
display:flex; flex-wrap:wrap; gap:clamp(14px,1.6vw,26px); justify-content:center;
}
.btn{
display:inline-flex; align-items:center; gap:1.6em;
padding:clamp(15px,1.8vh,22px) clamp(26px,2.6vw,46px);
border:1px solid rgba(204,212,217,.42);
font-size:var(--fs-eye); font-weight:600; letter-spacing:.26em;
color:var(--silver-dsp); text-decoration:none; text-transform:uppercase;
}
.btn svg{ width:15px; height:11px; flex:none; }
.btn svg *{ fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
/* ── site footer ─────────────────────────────────────────────────────────── */
.site-foot{
padding:clamp(40px,5.4vh,70px) var(--sec-x) clamp(34px,4.6vh,58px);
border-top:1px solid var(--rule-soft);
display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(26px,3vw,64px);
align-items:start;
}
.foot-mark{ display:flex; align-items:center; gap:1.1em; }
.foot-box{
width:clamp(30px,2.3vw,40px); aspect-ratio:1;
border:1px solid var(--box-line); display:grid; place-items:center; flex:none;
}
.foot-box svg{ width:64%; height:64%; }
.foot-name{ margin:0; font-size:var(--fs-eye); font-weight:600; letter-spacing:.34em; color:var(--c-logo); text-transform:uppercase; }
.foot-sub{ margin:.55em 0 0; font-size:var(--fs-micro); letter-spacing:.22em; color:var(--silver-soft); text-transform:uppercase; }
.foot-cities{
margin:clamp(22px,3vh,38px) 0 0; display:flex; gap:1.4em;
font-size:var(--fs-micro); letter-spacing:.26em; color:var(--silver-soft); text-transform:uppercase;
}
.foot-cities span{ color:rgba(204,212,217,.4); }
.foot-h{ margin:0 0 1.4em; font-size:var(--fs-micro); font-weight:600; letter-spacing:.28em; color:var(--silver-soft); text-transform:uppercase; }
.signup{ display:flex; align-items:center; gap:1em; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:.85em; max-width:22rem; }
.signup input{
flex:1 1 auto; min-width:0; background:none; border:0;
font:inherit; font-size:var(--fs-body); color:#fff;
}
.signup input::placeholder{ color:rgba(255,255,255,.42); }
.signup button{ background:none; border:0; padding:0; color:var(--silver-dsp); cursor:pointer; line-height:0; }
.signup svg{ width:15px; height:11px; }
.signup svg *{ fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.foot-links{ list-style:none; margin:0; padding:0; display:grid; gap:.95em; }
.foot-links a{ font-size:var(--fs-micro); letter-spacing:.24em; color:rgba(255,255,255,.62); text-decoration:none; text-transform:uppercase; }
.foot-copy{ margin:clamp(22px,3vh,38px) 0 0; font-size:var(--fs-micro); letter-spacing:.24em; color:rgba(255,255,255,.36); text-transform:uppercase; }
/* ── the poster yields to the film ────────────────────────────────────────────
The hero is two things at once: a poster (taglines, MANIFESTO, ENTER, the spec
panel) and the film's own chrome (mark, wordmark, rules, nav, series). Held at
full strength, the poster competed with the chapter text for five viewports,
and an ENTER call-to-action sat dead centre long after you had entered.
Each element leaves on its OWN ramp, so it reads as choreography rather than a
global dim, and each moves outward from the centre of interest — taglines up,
spec right, ENTER down — so nothing crosses the frame.
Every ramp begins at or after 2% of scroll, so scroll 0 is byte-identical to
the approved composition; the same contract .ui-scrims already honours. */
.tagline { opacity:calc(1 - var(--s-tag, 0)); transform:translateY(calc(var(--s-tag, 0) * -0.9vh)); }
.enter { opacity:calc(1 - var(--s-enter, 0)); transform:translateY(calc(var(--s-enter, 0) * 0.7vh)); }
.spec { opacity:calc(1 - var(--s-spec, 0)); transform:translateX(calc(var(--s-spec, 0) * 1.1vw)); }
.eyebrow,.manifesto{ opacity:calc(1 - var(--s-manif, 0)); transform:translateY(calc(var(--s-manif, 0) * -0.9vh)); }
/* once the MANIFESTO has gone the bottom-left pool is protecting nothing and is
only costing the film contrast, so it leaves with the text it was shielding */
.ui-scrims::after { opacity:calc(1 - var(--s-manif, 0)); }
@media (prefers-reduced-motion: reduce){
.tagline,.enter,.spec,.eyebrow,.manifesto{ opacity:1; transform:none; }
.ui-scrims::after{ opacity:1; }
}
/* ── interaction layer ────────────────────────────────────────────────────────
Before this, the stylesheet contained zero :hover, :focus and :active rules.
One vocabulary, applied by purpose: arrows travel, edges warm, nothing bounces.
Hover is gated behind a real pointer so it can never stick on touch, and every
hover has a :focus-visible twin so the keyboard gets the same affordance. */
*:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }
a, button, input{ -webkit-tap-highlight-color:transparent; }
/* .nav-item computes to 0x0 — both its children are absolutely positioned — so a
focus ring had nothing to enclose and a keyboard user saw nothing on the first
four stops. This hangs a real ring-and-hit surface off the label without
moving a single pixel of the matched composition. */
.nav-label{ position:relative; }
.nav-label::after{
content:""; position:absolute;
left:-.62vw; right:-.62vw; top:-3.0vh; bottom:-1.25vh;
border-radius:2px;
}
.nav-item:focus-visible{ outline:none; }
.nav-item:focus-visible .nav-label::after{ outline:2px solid var(--focus-ring); }
/* .alink is 22px tall; give it a 30px target without touching the box model */
.alink{ position:relative; }
.alink::before{ content:""; position:absolute; inset:-8px -4px 0; }
/* the submit glyph is 15x11 — nowhere near a usable target */
.signup button{ position:relative; }
.signup button::after{
content:""; position:absolute; top:50%; left:50%; translate:-50% -50%;
width:44px; height:44px;
}
.signup{ transition:border-color var(--t-ui) var(--e-ui); }
.signup:focus-within{ border-bottom-color:var(--silver-dsp); }
/* footer links were distinguished from the adjacent city list by colour alone */
.foot-links a{
display:inline-block; padding:5.5px 0; margin:-5.5px 0;
border-bottom:1px solid rgba(255,255,255,.18);
transition:color var(--t-ui) var(--e-ui), border-color var(--t-ui) var(--e-ui);
}
.foot-links{ gap:1.35em; }
@media (hover:hover) and (pointer:fine){
.enter{ transition:background-color var(--t-ui) var(--e-ui), border-color var(--t-ui) var(--e-ui); }
.enter:hover{ background:rgba(10,13,16,.44); border-color:rgba(255,255,255,.78); }
.enter-arrow{ transition:transform var(--t-ui) var(--e-ui); }
.enter:hover .enter-arrow{ transform:translateX(4px); }
.alink, .btn{ transition:color var(--t-ui) var(--e-ui), border-color var(--t-ui) var(--e-ui),
background-color var(--t-ui) var(--e-ui); }
.alink svg, .btn svg{ transition:transform var(--t-ui) var(--e-ui); }
.alink:hover svg, .btn:hover svg{ transform:translateX(5px); }
.alink:hover{ color:#fff; border-bottom-color:rgba(204,212,217,.95); }
.btn:hover{ border-color:rgba(204,212,217,.95); background:rgba(204,212,217,.07); }
.play{ transition:border-color var(--t-ui) var(--e-ui), background-color var(--t-ui) var(--e-ui); }
.play svg{ transition:transform var(--t-ui) var(--e-ui); }
.play:hover{ border-color:rgba(204,212,217,.9); background:rgba(204,212,217,.09); }
.play:hover svg{ transform:scale(1.12); }
.signup button{ transition:color var(--t-ui) var(--e-ui); }
.signup button:hover{ color:#fff; }
.foot-links a:hover{ color:#fff; border-bottom-color:rgba(204,212,217,.7); }
/* the tiles have nowhere to go, so they warm rather than lift — a pointer
cursor and a hover-lift on something unclickable is a lie. filter runs on
the video's existing composited layer; a scale would spill past the 1px
border, since .trio-grid li has no overflow clip. */
.trio-grid .turn{ transition:filter .45s var(--e-ui), border-color .45s var(--e-ui); }
.trio-grid li:hover .turn{ filter:brightness(1.06) saturate(1.03); border-color:rgba(204,212,217,.34); }
.trio-num{ transition:-webkit-text-stroke-color .38s var(--e-ui); }
.trio-grid li:hover .trio-num{ -webkit-text-stroke-color:rgba(204,212,217,.5); }
}
/* Touch gets no hover, so press feedback is the only feedback it has.
.enter darkens rather than scales: it carries backdrop-filter, and scaling a
backdrop-filtered element re-samples everything behind it every frame. */
.btn:active, .alink:active, .play:active, .foot-links a:active{ transform:scale(.985); }
.enter:active{ background:rgba(10,13,16,.52); }
.signup button:active{ transform:translateX(2px); }
@media (prefers-reduced-motion: reduce){
.alink svg, .btn svg, .play svg, .enter-arrow{ transition:none; transform:none !important; }
.btn:active, .alink:active, .play:active, .foot-links a:active,
.signup button:active{ transform:none; }
}
/* Wide desktop (aspect wider than 16:9): the film's cover scale becomes
vw-driven (height cropped), so the hero watch must scale in vw too or the
crossfade shows it ~14% smaller. Same ZNCC ground truth, re-projected. */
@media (min-width:821px) and (min-aspect-ratio: 16/9){
:root{
--watch-x : 50.586vw; /* page-offset + 954·vw/1920 (no h-crop here) */
--watch-y : calc(5.377vw + 50vh); /* page-offset + 626·vw/1920 − (56.25vw−100vh)/2 */
--watch-w : 53.125vw; /* 1020·vw/1920 */
}
}
/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:820px){
/* Mobile registration is verified correct — pin these before the desktop
tokens are touched so the phone hero never moves with desktop calibration. */
:root{
--watch-x : 50vw;
--watch-y : 58.8vh;
--watch-w : 94.0vh;
}
/* The desktop nav uses authored viewport coordinates. On a phone those four
fixed stops collapse into one another; use a compact four-column rail while
keeping the same numbered/underlined interaction. */
.nav{
position:absolute;
left:5vw;
right:5vw;
top:15.5vh;
height:8vh;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
}
.nav-item{
position:relative;
left:auto;
top:auto;
width:100%;
height:100%;
min-width:0;
text-align:center;
}
.nav-num{
left:50%;
top:0;
transform:translateX(-50%);
white-space:nowrap;
}
.nav-label{
left:50%;
top:3.4vh;
transform:translateX(-50%);
font-size:clamp(10px,1.35vh,13px);
letter-spacing:.08em;
white-space:nowrap;
}
.nav-underline{
left:0;
top:7.3vh;
width:25%;
}
}
@media (max-width:1000px){
.split{ grid-template-columns:1fr; }
.split-media{ min-height:clamp(280px,44vh,420px); order:-1; }
.split-media::after{ background:linear-gradient(180deg, rgba(9,11,13,.2), rgba(9,11,13,.75)); }
.split .ghost{ position:static; margin-top:clamp(28px,4vh,48px); }
.trio-grid{ grid-template-columns:1fr; }
.site-foot{ grid-template-columns:1fr; }
.sig-foot{ flex-direction:column; align-items:flex-start; gap:1.2em; }
.sig-right{ text-align:left; }
}
@media (max-width:620px){
.rail{ grid-template-columns:1fr; }
.rail div + div{ border-left:0; border-top:1px solid var(--rule-soft); }
.close-actions{ flex-direction:column; align-items:stretch; }
.btn{ justify-content:space-between; }
}
@media (prefers-reduced-motion: reduce){
.rise, .rise .eye, .rise .dsp, .rise .body-copy, .rise .alink, .rise .btn,
.rise .play, .rise .sig-count, .rise .trio-rule > span,
.rail > div, .trio-grid > li, .sig-foot .sig-name, .sig .alive{
opacity:1 !important; transform:none !important; clip-path:none !important;
-webkit-mask-image:none !important; mask-image:none !important;
transition:none !important;
}
}