/* =========================================================================
METACLADS — TOKENS, BASE, HERO
Stage 3. The token block below is the approved system.
Source of truth: DESIGN-PLAN.md — do not change a token without approval.
========================================================================= */
:root {
/* ---------------------------------------------------------------------
PALETTE — the original 8 tokens
Ratios in the comments below are measured against Mill Finish as the
PAGE GROUND. That is history from 2026-07-31 onward: the ground is now
true black (see the block after this one) and every one of these ratios
is inverted or void. They are left in place because sections 2-10 still
reference these tokens and have not been converted yet — deleting or
repointing them here would silently re-colour nine unconverted sections.
Fate of each, decided but NOT yet applied:
mill-finish value keeps, job changes -> body copy. Now --color-ink.
anthracite value keeps, job changes -> lifted panels. Now --color-panel.
corten RETIRED as the accent (client, 2026-07-31). Gold replaces
it. Survives only on light surfaces — see .btn--primary.
corten-text same. 2.00:1 on the new ground; cannot carry text there.
zinc 2.61:1 -> 9.46:1 on black. Far too loud. --color-rule
replaces it on the ground.
graphite 6.12:1 -> 2.61:1 on black. Fails everything.
--color-muted replaces it.
backlight still referenced nowhere outside this block. Untouched:
no ruling was given on it, and it is not the brand gold.
weld unchanged and unmoved. 4.34:1 on the new ground, so the
focus ring survives the move intact.
--------------------------------------------------------------------- */
--color-mill-finish: #E8E7E3; /* Page ground — brushed aluminium sheet */
--color-anthracite: #26241F; /* Primary ink — RAL 7016 powder-coat */
--color-corten: #9B4A2A; /* The only accent — weathering-steel oxide */
--color-corten-text: #853E23; /* Accent on text/links — ≥4.5:1 on Mill */
--color-zinc: #B7B3AA; /* Borders & rules ONLY — 1.69:1, never text */
--color-graphite: #57544B; /* Muted text — 6.12:1 on Mill ✅ */
--color-backlight: #E7B27A; /* Decorative glow only — never text/focus */
--color-weld: #B85C2E; /* Focus rings only — 3.7:1 Mill / 3.4:1 ink */
/* ---------------------------------------------------------------------
DARK GROUND — approved by the client 2026-07-31 (CLAUDE.md rule 4).
COLOUR ONLY. Archivo, Hanken Grotesk and IBM Plex Mono are untouched
and stay untouched; nothing in the TYPE block below moves.
Every ratio here is measured against --color-ground, and every one was
computed rather than estimated.
--------------------------------------------------------------------- */
--color-ground: #0B0A09; /* Page ground — true black */
/* The same two values the page has always had, renamed for the jobs they
now do. Aliased rather than re-stated so there is still one place to
change each, and so the identity is impossible to miss. */
--color-ink: var(--color-mill-finish); /* Body copy — 15.99:1 ✅ */
--color-panel: var(--color-anthracite); /* Lifted panels — 1.28:1 vs
ground. A whisper, which is
the point: a panel, not a
band. Never put text
straight on this without
re-measuring. */
/* THE BRAND GOLD. Sampled from assets/metaclads-monogram.webp, opaque
pixels only. The mark is a vertical gradient — light at the head, dark
at the foot — so it gives three usable values, not one:
--gold the mean, #C2A86C. The flat value. Use this by default.
--gold-light the top-of-mark tone, for gradients and hover lifts.
--gold-dark the foot-of-mark tone, for the other end of a gradient.
GOLD IS NOT BACKLIGHT. #E7B27A is peachy; this is olive-brass. Putting
both on screen reads as two different metals. Backlight stays unused.
HOLD THE LINE ON RUNNING TEXT (client, 2026-07-31): gold carries
headings, the mark, links and accents. Body copy is --color-ink. Gold
clears AA at 8.58:1 so it is tempting to spread it — at paragraph
length it is tiring to read and it cheapens the effect. */
--color-gold: #C2A86C; /* Accent, headings, links — 8.58:1 ✅ */
--color-gold-light: #DBBE7D; /* Gradient light end — 11.00:1 */
--color-gold-dark: #A6905D; /* Gradient dark end — 6.38:1 */
/* Replaces Graphite's JOB on the ground. Picked to land on the ratio the
page already reads at, not to be as light as possible: Graphite was
6.12:1 on Mill Finish, this is 5.97:1 on black. The muting should feel
the same, which means matching the ratio rather than the hue. */
--color-muted: #908D85; /* Muted text — 5.97:1 ✅ */
/* Replaces Zinc's JOB on the ground, and it is a QUIETER value, not a
louder one. Zinc reads 2.61:1 on black against 1.69:1 on Mill Finish —
keeping it would turn every hairline into a near-white outline. 1.77:1
puts a rule back at the weight it has always had. */
--color-rule: #3E3B35; /* Rules & borders — 1.77:1 */
/* The perforation dot-rule's colour. Option A of the two that were put up:
the weight the motif was drawn at (Zinc was 1.69:1 on Mill Finish, this
is 1.77:1 on the ground) rather than gold studs at 8.58:1. The motif
lands at the foot of nearly every section, so gold here would repeat a
bright gesture eight times down the page — and "used sparingly, never as
a fill everywhere" now applies to gold exactly as it did to Corten.
.hero and .projects override this; both are documented where they do. */
--dot-color: var(--color-rule);
/* ---------------------------------------------------------------------
TYPE — 3 font stacks
Archivo carries the expanded axis; fallbacks keep headings heavy if the
wdth axis fails to load (see DESIGN-PLAN.md).
--------------------------------------------------------------------- */
--font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
--font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;
--font-display-stretch: 125%; /* pair with font-variation-settings:"wdth" 125 */
--font-display-weight: 800;
--font-body-weight: 400;
--font-body-weight-strong: 600;
--font-mono-weight: 500;
/* ---------------------------------------------------------------------
FLUID TYPE SCALE
--------------------------------------------------------------------- */
--size-hero: clamp(3rem, 9vw, 7rem); /* Hero display (h1) */
--size-h2: clamp(2rem, 4vw, 3rem); /* Section headings */
/* APPROVED IN STAGE 9 — a permanent step in the scale. The plan's scale
jumps straight from H2 to Body with no sub-heading rung; project names and
the step titles in "How it works" both need one. At --size-body they go
too quiet, at --size-h2 they outrank the section title. */
--size-h3: clamp(1.375rem, 2vw, 1.875rem);
--size-body: 1.125rem; /* Body copy */
--size-data: 0.8125rem; /* Mono data labels / captions */
--leading-tight: 1.05; /* display */
--leading-body: 1.5; /* body */
--tracking-data: 0.12em; /* mono labels, uppercase */
/* ---------------------------------------------------------------------
SPACING SCALE
Modular ramp, ~1.5×. Section rhythm uses --space-2xl / --space-3xl.
--------------------------------------------------------------------- */
--space-3xs: 0.25rem; /* 4px */
--space-2xs: 0.5rem; /* 8px */
--space-xs: 0.75rem; /* 12px */
--space-sm: 1rem; /* 16px */
--space-md: 1.5rem; /* 24px */
--space-lg: 2rem; /* 32px */
--space-xl: 3rem; /* 48px */
--space-2xl: 4.5rem; /* 72px */
--space-3xl: 7rem; /* 112px — vertical gap between sections */
/* HEIGHT OF THE FIXED TOP BAR. 44px mark + 2 x 16px padding = 76px.
THREE THINGS DEPEND ON THIS AND WILL SILENTLY BREAK IF IT DRIFTS: the
scroll-margin on every anchor target, and the sticky offset on the Systems
figure in both its desktop and its touch form. All three read the token
rather than repeating the number. If the mark or the bar padding changes,
change it HERE and nowhere else. */
--topbar-h: 4.75rem; /* 76px */
/* THE BAR IS 77px, NOT 76, AND THAT 1px WAS A REAL BUG. --topbar-h counts
the mark and the padding; .topbar also carries `border-bottom: 1px`, which
is part of its border box and therefore part of what it covers. Every
sticky offset that used --topbar-h alone parked its element exactly 1px
UNDERNEATH the bar's bottom border — and because the bar is translucent
(rgba 0.82) with a backdrop blur, that 1px strip of image was visible
through it rather than hidden by it.
Anything positioning itself against the bar uses --topbar-total. Anything
asking "how tall is the bar's content" still uses --topbar-h. */
--topbar-total: calc(var(--topbar-h) + 1px); /* 77px — includes the border */
/* WHERE A STICKY PANEL COMES TO REST. One value, used by both Systems modes,
so the desktop and touch offsets can never drift apart again — they were
`--topbar-h + --space-lg` and a bare `--topbar-h` respectively, which is
32px of breathing room on desktop and none at all on a phone.
--space-md (24px) is the settled gap. */
/* MEASURED FIRST, TOKEN SECOND. script.js publishes the bar's real rendered
height as --topbar-measured and keeps it current on resize and on font
load; --topbar-total is the fallback for JS-off and for the first frame
before the measurement lands. The fallback is the same 77px this always
computed to, so nothing moves if the script never runs.
This exists because --topbar-h is a hand-maintained constant describing
something the browser lays out, and it had already drifted from reality
once — it omitted the border. A measured value cannot drift. */
--sticky-top: calc(
var(--topbar-measured, var(--topbar-total)) + var(--space-md)
);
/* ---------------------------------------------------------------------
SUPPORTING TOKENS
--------------------------------------------------------------------- */
--measure: 68ch; /* max readable line length */
/* Repointed to --color-rule 2026-07-31. Zinc reads 9.46:1 on the ground and
turned every photograph's hairline into a near-white outline. The one
light surface left on the page — the inverted Projects band — overrides
this back to Zinc locally, because there Zinc is still correct. */
--border-rule: 1px solid var(--color-rule);
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
--duration-slow: 900ms;
--duration-fast: 200ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* The offset gap in the focus ring, rendered in the tone opposite the
surface (DESIGN-PLAN). The ground is now dark, so the default flips:
this is the one root-level change that had to happen in step 1 rather
than section by section — left as Anthracite it would have put a black
gap on a black ground and quietly voided the ring on all ten sections.
The .topbar and .hero overrides further down now say the same thing the
root does and are dead weight; .projects still needs its override, but
it will need the OPPOSITE value once that section inverts to the light
band. All three are left alone until their own steps. */
--focus-gap: var(--color-ink);
/* ---------------------------------------------------------------------
ADDED IN STAGE 3 — not palette or type decisions, but page scaffolding.
--filter-photo is the ONE global photo filter the brief asks for: tuned
once here, applied to every photo and to the hero video so mixed phone
and camera sources read as a single shoot.
RE-JUDGED 2026-08-01 for the dark ground. Was saturate(0.85) contrast(1.06).
contrast 1.06 -> 1.00. That lift existed to stop photographs washing
out against a light page. A black ground supplies the apparent contrast
for free, and keeping the lift crushed the shadow end of every image
into the ground, so dark corners stopped being corners and became
holes — worst in the plant grid, which is all shadowed interiors.
brightness 1.00 -> 0.94. The new problem the light page never had: a
bright photograph meeting #0B0A09 glares, and the boundary between a
blown sky and the ground is a hard bright edge. A 6% trim pulls the
highlights back off that edge. It is small on purpose — this is the
difference between a photograph sitting on the page and a photograph
cut out and stuck onto it.
saturate 0.85 -> 0.88. Barely moved, and moved UP. Heavy desaturation
reads as considered on a light ground and as dead on a dark one, where
there is no surrounding light to give the eye a reference. It still
does its unifying job across phone shots, sample panels and the gold
renders, which is a wider spread of sources than the original value
was ever asked to cover.
TWO GROUNDS NOW, SO TWO VALUES. Projects inverted to the light band and
overrides this back to the original — see the note there. That is not a
second filter in the sense the brief forbids: the brief asks that every
photograph read as one shoot, and holding one value across two grounds is
what would actually break that. Same intent, measured per surface.
--------------------------------------------------------------------- */
--filter-photo: saturate(0.88) contrast(1) brightness(0.94);
--container-max: 76rem;
--gutter: clamp(1.25rem, 5vw, 4rem);
}
/* =========================================================================
BASE
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
/* THE GROUND FLIPS HERE, AND IT FLIPS FOR THE WHOLE PAGE AT ONCE — there is
no way to change a page ground one section at a time. Sections 2-10 still
set Anthracite and Graphite text and now sit on black; they will look
wrong, and deliberately so, until each is converted in its own step. That
is the cost of sequencing this properly rather than in one sweep. The hero
is the reference section and is the only one meant to read correctly. */
body {
margin: 0;
background: var(--color-ground);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--size-body);
font-weight: var(--font-body-weight);
line-height: var(--leading-body);
}
/* NOTE — deliberately NOT set here:
`text-rendering: optimizeLegibility` and `-webkit-font-smoothing: antialiased`.
Both were in the Stage 3 build and both thin out strokes; antialiased in
particular strips weight from light-text-on-dark, which is exactly where a
hairline like the cedilla in "façades" goes first. The encoding and the
Hanken Grotesk latin subset are both correct (U+00E7 is inside U+0000-00FF),
so the glyph was being rendered thin, not substituted. Default rendering
keeps the weight the typeface was drawn with. */
img, video { display: block; max-width: 100%; }
/* Screen-reader-only text. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Weld ring, plus a 2px gap in the opposing tone so the ring stays legible
even when it lands on a photo midtone (DESIGN-PLAN). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: var(--focus-ring-width) solid var(--color-weld);
outline-offset: var(--focus-ring-offset);
box-shadow: 0 0 0 var(--focus-ring-offset) var(--focus-gap);
}
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Where an anchor jump comes to rest.
THE TOP BAR IS FIXED AS OF 2026-08-03, so this is now load-bearing rather
than provision for later: without it every anchor jump would land the
section's heading underneath the bar. --topbar-h clears the bar exactly and
--space-md adds the air that stops a section reading as though its top were
cut off. :where() keeps the specificity at zero so any section can override
it. Lenis animates the jump but honours scroll-margin, so this is the only
place the offset is expressed. */
:where(section[id], footer[id]) {
/* Reads the measured bar height for the same reason --sticky-top does: this
is the other place a hardcoded --topbar-h could park content underneath a
bar that is not the height the token claims. Falls back to the static
token with JS off. */
scroll-margin-top: calc(
var(--topbar-measured, var(--topbar-total)) + var(--space-md)
);
}
/* Perforation dot-rule — the structural divider. Dots sit in pairs, like a
perforation run: ·· ·· ··
THE COLOUR IS SETTLED. It is --dot-color, and the decision is recorded in
the token block at :root, not here. Two candidates were put up on #0B0A09
and Option A won: --color-rule #3E3B35 at 1.77:1, the weight the motif was
drawn at, over --color-gold #C2A86C at 8.58:1. The motif lands at the foot
of nearly every section, and gold eight times down the page is a bright
gesture repeated, not an accent.
Three surfaces, three values, each set on the ancestor:
:root --color-rule 1.77:1 on the ground
.hero --color-zinc over the video, under the scrim
.projects --color-zinc 1.69:1 on the light band
Both overrides are documented where they are made.
The Zinc below is a fallback inside the var() rather than a declaration on
.dot-rule, on purpose: a declaration here would sit ON the element and beat
any value inherited from an ancestor, so the :root choice could never reach
it. As a fallback it fires only if nothing up the tree has set it, and
:root always does — it is a backstop, not a value in use. */
.dot-rule {
height: 5px;
background-image:
radial-gradient(circle at 3px 50%, var(--dot-color, var(--color-zinc)) 1.5px, transparent 1.75px),
radial-gradient(circle at 9px 50%, var(--dot-color, var(--color-zinc)) 1.5px, transparent 1.75px);
background-size: 18px 100%;
background-repeat: repeat-x;
}
/* FOLDED INTO :root now that the conversion is finished — see the token
block. What is left here are the two exceptions, and both are exceptions
because their dot-rule does not sit on the page ground:
.hero sits over the scrimmed video. --color-rule is 1.77:1 against
the flat ground and effectively invisible against a moving
image, so the hero keeps Zinc.
.projects is the light band, where Zinc is the 1.69:1 hairline the
motif was drawn at. Set with the section's other local
overrides rather than here. */
.hero {
--dot-color: var(--color-zinc);
}
/* Nothing animates when the OS says so. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* =========================================================================
TOP BAR
Thin, mono, quiet. Overlays the hero; scrolls away with it — it is not
sticky yet, that belongs with the real Menu panel.
========================================================================= */
/* FIXED, NOT ABSOLUTE (2026-08-03). It was absolute, which pinned it to the
page origin and let it scroll away with the hero. Fixed keeps it against the
viewport, which means it no longer has the hero's scrim underneath it and
has to supply its own legibility — see the background below.
z-index 50, not 2. Fixed chrome has to clear everything it now travels over,
including the two sticky Systems figures at z-index 1. 50 leaves room
underneath for a future menu panel without another renumbering. */
.topbar {
--focus-gap: var(--color-mill-finish); /* dark surface — gap flips tone */
position: fixed;
inset: 0 0 auto;
z-index: 50;
color: var(--color-mill-finish);
/* THE BACKGROUND HAS TO WORK ON BOTH GROUNDS, and the page has exactly two:
the black ground everywhere and the inverted Projects band. A translucent
dark bar solves both at once — over black it is nearly invisible, over the
light band it becomes a dark strip that keeps the Mill Finish text at
10.32:1. A light bar would have done the opposite and failed on black.
0.82 is the lowest alpha that still clears AA over the WORST case, which
is Mill Finish #E8E6E1: the composite there is #333230 and Mill Finish
text on it measures 10.32:1. Over the ground it is far higher. */
background: rgba(11, 10, 9, 0.82);
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
border-bottom: 1px solid rgba(183, 179, 170, 0.14);
}
/* Without blur support the translucency alone lets high-contrast detail read
through as noise behind the type, so the bar goes nearly solid instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.topbar {
background: rgba(11, 10, 9, 0.96);
}
}
/* --space-sm, down from --space-md. The mark grew from 32px to 44px and the
bar is now permanently on screen, so the padding that was comfortable on a
bar you scrolled past became 92px of viewport taken on every screen. 16px
holds it at --topbar-h. */
.topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding-block: var(--space-sm);
}
.topbar__link,
.topbar__menu {
font-family: var(--font-mono);
font-weight: var(--font-mono-weight);
font-size: var(--size-data);
line-height: 1;
letter-spacing: var(--tracking-data);
text-transform: uppercase;
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--duration-fast) var(--ease-out);
}
/* The lockup. Flex rather than the default inline, so the line box around the
image cannot add descender space under it and throw the bar's centring out —
the img is display:block from the global reset, and an inline parent would
still reserve room for a baseline it no longer has. */
.topbar__logo {
display: flex;
align-items: center;
gap: var(--space-xs);
text-decoration: none;
color: inherit;
}
/* Optically sized, not matched to the mark. Setting the wordmark to the mark's
44px cap height would tower over 13px nav mono; --size-h3's lower bound sits
just under the mark and reads as a name rather than a second headline.
Tracking is opened slightly because Archivo at wdth 125 sets tight, and a
nine-letter word beside a mark wants air more than it wants density. */
.topbar__wordmark {
font-family: var(--font-display);
font-weight: var(--font-display-weight);
font-stretch: var(--font-display-stretch);
font-variation-settings: "wdth" 125;
font-size: 1.375rem;
line-height: 1;
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--color-mill-finish);
transition: opacity var(--duration-fast) var(--ease-out);
}
@media (max-width: 419px) {
/* At 360px the nav still needs its WhatsApp link and Menu button. The mark
alone carries the identity at this width; the word is the first thing to
go, not the last. */
.topbar__wordmark { display: none; }
}
/* HEIGHT DRIVES THIS, WIDTH FOLLOWS. The file is 83x96 and the width/height
attributes say so, which is what reserves the right box before it loads.
There is no global `height: auto` in this stylesheet, so the height
attribute would otherwise win and pin the mark at 96px — both axes have to
be named here, and `width: auto` is what lets 32px of height compute the
27.7px of width rather than squashing the mark into 83x32.
44px, up from 32px. Against the nav's 13px mono this is a deliberate
imbalance: with the wordmark beside it the lockup is the only thing in the
bar that has to read at a glance. 44px of mark plus 2x16px padding is what
sets --topbar-h at 76px. */
.topbar__mark {
height: 44px;
width: auto;
transition: opacity var(--duration-fast) var(--ease-out);
}
/* No underline on hover — a rule under a picture reads as a mistake. The whole
lockup lifts instead, mark and word together, or they would come apart on
hover. Focus is untouched: the global :focus-visible ring applies to the
, and .topbar already flips --focus-gap to Mill Finish for the dark
surface, so the Weld ring keeps its legible gap here. */
.topbar__logo:hover .topbar__mark,
.topbar__logo:hover .topbar__wordmark {
opacity: 0.72;
}
.topbar__nav {
display: flex;
align-items: center;
gap: var(--space-md);
}
.topbar__menu {
padding: 0 0 var(--space-3xs);
background: none;
border-top: 0;
border-inline: 0;
cursor: pointer;
}
.topbar__link {
padding-bottom: var(--space-3xs);
}
.topbar__link:hover,
.topbar__menu:hover {
border-bottom-color: var(--color-mill-finish);
}
/* =========================================================================
MENU PANEL
Absolute inside the fixed .topbar, so it hangs directly off the bottom of
the bar at every width and needs no --topbar-h arithmetic of its own.
It borrows the bar's exact surface — same rgba, same blur, same hairline —
because it IS the bar, extended downwards while open. A different treatment
would read as a separate floating object stuck underneath it.
The links are .topbar__link's type treatment to the letter: mono, 13px,
uppercase, +0.12em, transparent bottom rule that fills on hover. Mill
Finish on the composite bar background is the same 10.32:1 measured for the
bar itself. Focus needs nothing here — .topbar already flips --focus-gap to
Mill Finish, so the global Weld ring inherits a legible gap.
========================================================================= */
.topbar__panel {
position: absolute;
inset: 100% 0 auto;
background: rgba(11, 10, 9, 0.82);
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
border-bottom: 1px solid rgba(183, 179, 170, 0.14);
}
/* Same reasoning as the bar's own fallback: without blur the translucency
alone lets detail read through as noise behind the type. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.topbar__panel {
background: rgba(11, 10, 9, 0.96);
}
}
.topbar__panel-inner {
padding-block: var(--space-sm);
}
/* Wraps rather than scrolls. Five short mono items fit on one line on a
desktop bar and take two at 360px, which is the correct failure. */
.topbar__menu-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-lg);
margin: 0;
padding: 0;
list-style: none;
}
.topbar__menu-link {
display: inline-block;
font-family: var(--font-mono);
font-weight: var(--font-mono-weight);
font-size: var(--size-data);
line-height: 1;
letter-spacing: var(--tracking-data);
text-transform: uppercase;
color: var(--color-mill-finish);
text-decoration: none;
padding-bottom: var(--space-3xs);
border-bottom: 1px solid transparent;
transition: border-color var(--duration-fast) var(--ease-out);
}
.topbar__menu-link:hover {
border-bottom-color: var(--color-mill-finish);
}
/* 360px: the three items plus gutters just fit once the gap tightens. The
wordmark used to give up tracking here as well, but the monogram is ~28px
wide against roughly 100px of tracked METACLADS, so the bar has more room
at 360px than it did and there is nothing left to claw back. */
@media (max-width: 420px) {
.topbar__inner { gap: var(--space-sm); }
.topbar__nav { gap: var(--space-sm); }
}
/* =========================================================================
HERO
========================================================================= */
/* The hero needed the least work of any section on the page, because it was
always the dark one — light text over a scrimmed video. Its ground, its
text colour and its focus gap were already what the whole page is becoming.
That is why it is the right section to judge the direction on: what you are
looking at is the gold against the ground, not a rebuilt layout.
--focus-gap below is now identical to the root value. Left in place rather
than deleted: it is correct, and removing it is tidying, not step 1. */
.hero {
--focus-gap: var(--color-mill-finish); /* dark surface — gap flips tone */
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 100vh;
min-height: 100svh;
display: grid;
align-content: end;
padding-block: var(--space-3xl) var(--space-xl);
color: var(--color-ink);
}
.hero__media {
position: absolute;
inset: 0;
z-index: -1;
}
.hero__poster,
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: var(--filter-photo);
}
/* The video sits on the poster and cross-fades in only once it is actually
playing, so there is no flash of an empty black box while it buffers. */
.hero__video {
opacity: 0;
transition: opacity 600ms var(--ease-out);
}
.hero__video.is-playing { opacity: 1; }
/* Belt and braces with the JS gate: at these sizes / settings the element is
not rendered at all, so even a stray src could not paint. */
@media (max-width: 768px) {
.hero__video { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero__video { display: none; }
}
/* Dark overlay. Tuned so body copy clears 4.5:1 against the worst case — a
blown-out white frame of the video — not just against the poster.
Anthracite, so the shadow is the same ink as the rest of the page. */
.hero__scrim {
position: absolute;
inset: 0;
background:
/* Top shade — without this the thin bar sits at ~3.3:1 over a bright
video frame. With it, the mono text clears 6.7:1 worst case. */
linear-gradient(to bottom,
rgba(38, 36, 31, 0.55) 0,
rgba(38, 36, 31, 0) 180px),
linear-gradient(to bottom,
rgba(38, 36, 31, 0.30) 0%,
rgba(38, 36, 31, 0.45) 35%,
rgba(38, 36, 31, 0.72) 70%,
rgba(38, 36, 31, 0.80) 100%),
rgba(38, 36, 31, 0.42);
}
/* GOLD, per the ruling that gold carries headings. This is the one visible
change in the hero and the thing step 1 exists to let you judge.
Measured against the worst case rather than the easy one. At the foot of
the hero, where this sits, the scrim composites to ~88% Anthracite over
the video; against a blown-out white frame that leaves ~#3F3D39, and gold
reads 4.70:1 on it. That clears AA for body text, and this is display
type, which only needs 3:1. Against the poster it is far higher.
The typeface, weight, width axis and tracking are all untouched. Colour
only, exactly as briefed. */
.hero__title {
margin: 0;
color: var(--color-gold);
font-family: var(--font-display);
font-weight: var(--font-display-weight);
font-stretch: var(--font-display-stretch);
font-variation-settings: "wdth" 125;
font-size: var(--size-hero);
line-height: var(--leading-tight);
letter-spacing: -0.015em;
max-width: 15ch;
text-wrap: balance;
overflow-wrap: break-word;
}
/* Body copy, so it stays --color-ink and does NOT go gold. This is the line
that holds the rule: gold above it, ink here. */
.hero__subline {
margin: var(--space-md) 0 0;
max-width: 40ch;
color: var(--color-ink);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-md) var(--space-lg);
margin-top: var(--space-xl);
}
/* METALLIC GOLD — the sheen, and the hero headline ONLY.
The gradient is not invented. It runs --color-gold-light to
--color-gold-dark, which are the head and foot tones sampled off the
client's own monogram, in the same direction the mark itself falls.
MEASURED AT THE WORST PIXEL, not the average. Over a blown-out white video
frame the scrim composites to ~#3F3D39, and against that the light end
reads 6.02:1 and the dark end 3.49:1. Display type needs 3:1, so both ends
clear. Going darker does not: the darkest tone in the mark, #9E8653, drops
to 3.09:1 there, which is why the gradient stops at --color-gold-dark and
no further.
The gradient maps to the ELEMENT box, not to each line, so the two lines of
"Since 1987. Same hands." share one falloff rather than each getting its
own highlight. That is deliberate — it reads as a single sheet of metal.
box-decoration-break: clone would give per-line highlights and look like
two separate objects. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
.hero__title {
background-image: linear-gradient(
to bottom,
var(--color-gold-light) 0%,
var(--color-gold) 55%,
var(--color-gold-dark) 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
}
/* THE FALLBACK IS THE BASE RULE, NOT A FALLBACK BLOCK. .hero__title above
sets color: var(--color-gold) as a real colour, and the transparency only
ever happens inside the @supports guard. Set transparent outside it and the
headline disappears entirely wherever the clip is unsupported — that is the
failure mode worth engineering against, not the 1-2% coverage gap. */
/* Forced colors strips background images and forces text colour. With a
transparent fill and no gradient left, the headline would render as
nothing. Hand both properties back to the UA. */
@media (forced-colors: active) {
.hero__title {
background-image: none;
color: CanvasText;
-webkit-text-fill-color: revert;
}
}
.hero__rule {
margin-top: var(--space-2xl);
}
/* =========================================================================
BUTTONS
========================================================================= */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
border: 0;
border-radius: 0; /* stamped, not rounded */
font-family: var(--font-body);
font-size: var(--size-body);
line-height: 1;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
/* Primary reads as a milled aluminium tag on the dark hero — highest
contrast object on screen, which is what the one action deserves.
Corten is held back for the arrow and the hover. */
.btn--primary {
padding: var(--space-sm) var(--space-md);
background: var(--color-mill-finish);
color: var(--color-anthracite);
font-weight: var(--font-body-weight-strong);
}
/* DO NOT SWAP THIS FOR GOLD. The 2026-07-31 ruling retires Corten in favour
of the brand gold as the accent, and that ruling is right everywhere the
accent sits on the GROUND. It is wrong here. This arrow sits on a Mill
Finish tag, where gold measures 1.86:1 and vanishes; Corten Text measures
6.26:1 on the same tag. Corten survives on light surfaces for exactly this
reason and nowhere else.
The real answer is probably to invert the button — a gold tag on black
instead of an aluminium one — but that is the whole button system, used by
sections this step is not allowed to touch. Left as it stands, flagged. */
.btn--primary .btn__arrow {
color: var(--color-corten-text);
transition:
transform var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
/* The hover fills with gold, so the TEXT has to flip dark — Mill Finish on
gold is 1.86:1 and the label would vanish at the exact moment somebody is
pointing at it. Panel on gold is 6.73:1. This is the trap in "replace
Corten with gold": Corten is dark and gold is light, so every rule that
used Corten as a fill has to invert its foreground too. */
.btn--primary:hover {
background: var(--color-gold);
color: var(--color-panel); /* 6.73:1 ✅ */
}
.btn--primary:hover .btn__arrow {
color: var(--color-panel); /* 6.73:1 ✅ */
transform: translateX(3px);
}
/* THIS BUTTON HAD TO BE REBUILT, not recoloured. It was Anthracite-filled
because it sat on a light page ground and needed to be the dark object. The
ground is now #0B0A09 and Anthracite is 1.28:1 against it — the button had
become an invisible rectangle with floating text, which is the single worst
thing the palette change did to any component on the page.
It is now the gold button, and it is the only large gold fill in the
document. That is defensible: it marks the form's one submit action, which
is the single thing the whole page is asking a visitor to do. Panel text on
gold reads 6.73:1.
The two buttons now read as a pair rather than as light/dark twins:
--primary is the milled aluminium tag, --ink is the gold tag. */
.btn--ink {
padding: var(--space-sm) var(--space-md);
background: var(--color-gold);
color: var(--color-panel); /* 6.73:1 ✅ */
font-weight: var(--font-body-weight-strong);
}
.btn--ink .btn__arrow {
color: inherit;
transition: transform var(--duration-fast) var(--ease-out);
}
.btn--ink:hover {
background: var(--color-gold-light); /* 8.62:1 against Panel text ✅ */
}
.btn--ink:hover .btn__arrow {
transform: translateX(3px);
}
.btn--ink[disabled] {
opacity: 0.55;
cursor: default;
}
/* Quiet secondary — text on a rule. --color-muted rather than --color-rule:
this underline is the button's only boundary, which makes it a UI component
under WCAG 1.4.11 and owes 3:1. --color-rule is 1.77:1 and would leave the
affordance invisible; --color-muted is 5.97:1. Zinc, the old value, is
9.46:1 here and would shout louder than the primary button's fill. */
.btn--quiet {
padding: var(--space-2xs) 0;
background: none;
color: var(--color-ink);
border-bottom: 1px solid var(--color-muted);
}
.btn--quiet:hover {
border-bottom-color: var(--color-mill-finish);
}
/* .btn is display:inline-flex with text-decoration:none, so --quiet reads
identically on an and on a