/* ============================================================================
BOARD 1 — "Set-Out & Boundary" (PASS-2 PRODUCTION build)
Applied LAST, after live base.css + style.css. Retargets the scaffold's
semantic tokens to the FROZEN DERIVED TOKENS (DESIGN.md §3, 2026-07-14 owner
pick 1) and adds the set-out chrome. The page reads like a surveyor's set-out
plan: a persistent left dimension margin, a boundary rule that draws across
the hero, teal kept as the set-out ink (buttons + subheadings + line + links).
FONTS: self-hosted Bricolage Grotesque (display) + Newsreader (body serif),
see board1-fonts.css (preloaded woff2 + metric fallbacks). The mockup's Google
Fonts is FORBIDDEN in this build.
Contract: DERIVED TOKENS :root in DESIGN.md §3. base #14171a / ink #eef1f0 /
ink-dim #a9b0b2 / teal #1fa091. 1.2 minor-third type, 6px linear ruled spacing,
seat(150ms)+draw(560ms entrance) easing, radii 1px/3px. rung-2 motion cap.
============================================================================ */
/* DARK is default AND the explicit [data-theme="dark"] state — the second selector
is REQUIRED: style.css ships an old scaffold [data-theme="dark"] block that sets
--color-primary #5A9FD4 (blue). Once the Fix-#9 toggle stamps data-theme="dark",
our block must match that specificity (0,1,0) and win on load order, or the blue
scaffold resurrects. Do not drop the [data-theme="dark"] selector. */
:root, :root[data-theme="dark"], html {
/* ---- FACES: self-hosted + metric-matched fallback (0.000 CLS) ---- */
--font-display: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
/* ---- TYPE: 1.2 minor third, 17px floor, capped display (DESIGN.md §3) ---- */
--text-sm: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
--text-base: clamp(1.0625rem, 1.01rem + 0.28vw, 1.19rem);
--text-lg: clamp(1.28rem, 1.19rem + 0.42vw, 1.43rem);
--text-xl: clamp(1.53rem, 1.38rem + 0.72vw, 1.71rem);
--text-2xl: clamp(1.84rem, 1.58rem + 1.24vw, 2.05rem);
--text-3xl: clamp(2.05rem, 1.6rem + 2.2vw, 2.9rem);
--text-hero: clamp(2.35rem, 1.6rem + 3.6vw, 3.9rem); /* capped, Gate C */
/* ---- SPACING: 6px base, LINEAR ruled ramp (drafting grid) ---- */
--setout-hair: 6px; --setout-x: 12px; --setout-s: 18px;
--setout-m: 24px; --setout-l: 36px; --setout-xl: 60px; --setout-2xl: 96px;
/* ---- EASING: mechanical set-out DRAW + peg SEAT (DESIGN.md §3) ---- */
--seat: cubic-bezier(0.72, 0, 0.28, 1); /* CTA seat, 150ms */
--draw: cubic-bezier(0.55, 0, 0.45, 1); /* boundary/rule draw, 560ms (entrance) */
--ease-out: var(--seat); /* neutralise the scaffold float */
--ease-out-strong: var(--seat);
--dur-ui: 150ms;
/* ---- RADII: set-out ticks are sharp, near cut-line ---- */
--radius-sm: 1px; --radius-md: 3px; --radius-lg: 3px;
--radius-xl: 3px; --radius-2xl: 3px;
/* ---- COLOUR: survey-graphite base, drafting-paper ink, teal as set-out ink ---- */
--color-bg: #14171a; /* survey graphite, chroma < 0.03 */
--color-surface: #191d20;
--color-surface-offset: #1e2225;
--color-surface-2: #1e2225;
--color-divider: #2b2f33;
--color-border: #383d41;
--color-text: #eef1f0; /* drafting-paper white, ~13:1 (AAA) */
--color-text-muted: #a9b0b2; /* ~7:1 (AAA body) */
--color-text-faint: #767c7e;
--color-text-inverse: #14171a;
/* teal is the ONLY accent, re-cast as the set-out ink (the drawn line).
Two roles so the light theme can darken TEXT/LINE teal for AA while the
BUTTON FILL keeps the recognisable brand teal (owner §5a anchor):
--color-accent = text/line/affordance ink (subheads, links, rules, focus)
--color-accent-fill = button fill (label sits on it) */
--color-accent: #1fa091; /* dark: brand teal, 5.56:1 on graphite (AA) */
--color-accent-fill: #1fa091; /* button fill */
--color-accent-hover: #34b3a3;
--color-accent-light: #16302c;
--color-primary: #1fa091; /* fold primary onto the single accent */
--color-primary-hover: #34b3a3;
--color-primary-active: #178476;
--color-primary-light: #16302c;
--color-primary-subtle: #16302c;
--color-gold: #a9b0b2; /* de-chroma: no second colour on this board */
--color-gold-light: #1e2225;
}
/* ---------------------------------------------------------------------------
LIGHT THEME (Fix #9) — DARK stays the default + primary skin (owner anchor).
Light is a DERIVED counterpart: drafting-paper base, graphite ink, SAME teal
intent. Colour-role overrides ONLY — zero structural / spacing / type / motion
change, so the toggle never reflows (CLS 0.000). Derived + WCAG-verified in
_batch-b/FIX9-LIGHT-THEME-DERIVATION.md. Accent SPLITS: text/line = deep teal
#0f6b60 (5.83:1 AA on paper); button fill keeps brand #1fa091 (label 5.35:1 AA).
--------------------------------------------------------------------------- */
:root[data-theme="light"] {
--color-bg: #f4f5f3; /* drafting paper */
--color-surface: #eceeeb;
--color-surface-offset: #e5e7e3;
--color-surface-2: #e5e7e3;
--color-divider: #dee0dc;
--color-border: #d2d5d1;
--color-text: #181b1d; /* graphite ink, 15.83:1 (AAA) */
--color-text-muted: #565b5d; /* 6.3:1 (AA, near-AAA) */
--color-text-faint: #7c8183;
--color-text-inverse: #f4f5f3;
--color-accent: #0f6b60; /* deep teal: text/line/affordance, 5.83:1 (AA) */
--color-accent-fill: #1fa091; /* button fill keeps brand teal (label = ink) */
--color-accent-hover: #0c554c;
--color-accent-light: #dcebe8;
--color-primary: #0f6b60;
--color-primary-hover: #0c554c;
--color-primary-active: #0a463f;
--color-primary-light: #dcebe8;
--color-primary-subtle: #dcebe8;
--color-gold: #565b5d;
--color-gold-light: #e5e7e3;
}
/* Body reads as a document: serif, comfortable measure, graphite base */
html { background: var(--color-bg); }
body {
font-family: var(--font-body);
letter-spacing: 0.005em;
background: var(--color-bg);
color: var(--color-text);
}
/* Display face on all headings, drawn-with-a-ruler tightness */
h1, h2, h3, .section-title, .hero h1 {
font-family: var(--font-display);
letter-spacing: -0.015em;
font-weight: 700;
}
/* section-label chrome recast as a dimension tag (survey ornament) — TEAL subheading */
.section-label {
font-family: var(--font-body);
font-variant-numeric: tabular-nums;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
}
/* ---------------------------------------------------------------------------
DIMENSION MARGIN — a persistent thin left column carrying running
measurements / section numbers as ornament. Drawn on wider viewports only.
Pure CSS (::before rule + counter down the page edge) — no DOM added.
--------------------------------------------------------------------------- */
@media (min-width: 900px) {
body {
counter-reset: setout;
--dim-margin: 56px;
padding-left: var(--dim-margin);
position: relative;
}
/* the governing left set-out rule, full height */
body::before {
content: "";
position: fixed;
top: 0; bottom: 0;
left: calc(var(--dim-margin) - 1px);
width: 1px;
background: var(--color-border);
z-index: 5;
pointer-events: none;
}
/* running dimension label anchored down the margin */
body::after {
content: "SET-OUT \00B7 BOUNDARY LINE";
position: fixed;
left: calc(var(--dim-margin) - 8px);
top: 50%;
transform: rotate(180deg);
writing-mode: vertical-rl;
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-text-faint);
z-index: 6;
pointer-events: none;
}
/* each section gets a numbered peg tick in the margin */
section[id] { position: relative; }
section[id]::before {
counter-increment: setout;
content: counter(setout, decimal-leading-zero);
position: absolute;
left: calc(-1 * var(--dim-margin) + 8px);
top: var(--setout-l);
font-family: var(--font-body);
font-variant-numeric: tabular-nums;
font-size: 11px;
letter-spacing: 0.1em;
color: var(--color-accent);
z-index: 4;
}
/* + a short tick mark on the set-out rule at each section start */
section[id]::after {
content: "";
position: absolute;
left: -7px;
top: calc(var(--setout-l) + 2px);
width: 6px;
height: 1px;
background: var(--color-accent);
z-index: 6;
}
}
/* ---------------------------------------------------------------------------
HERO — left-anchored set-out block. The right two-thirds carries a hairline
BOUNDARY LINE that draws corner-to-corner with two pegged end-ticks and a
dimension label. Not centered, not full-bleed photo, not a dossier card.
The live photo is dimmed hard so the drawn line governs the composition.
--------------------------------------------------------------------------- */
.hero {
min-height: 84vh;
display: flex;
align-items: center;
background: var(--color-bg);
position: relative;
}
.hero .hero-bg img { filter: grayscale(1) contrast(0.9) brightness(0.42); }
.hero .hero-overlay {
background: linear-gradient(90deg,
rgba(20,23,26,0.94) 0%,
rgba(20,23,26,0.82) 46%,
rgba(20,23,26,0.55) 100%);
}
.hero .hero-content {
text-align: left;
max-width: none;
margin: 0;
padding-block: var(--setout-2xl);
position: relative;
z-index: 2;
}
.hero .hero-brand { justify-content: flex-start; gap: var(--setout-s); }
/* LOGO (Fix #61): the mark is a self-contained dark circular badge with its own
brand colour (blue mountain, orange sun, white wordmark). Show it in FULL
COLOUR — no grayscale — and strip the scaffold's frosted-glass plate
(rgba-white bg + border + blur + radius) that read as an ugly grey box. The
circular badge sits cleanly on the dark hero AND on paper, no plate needed. */
.hero .hero-logo,
.sp-hero .hero-logo,
.area-hero .hero-logo {
filter: none;
background: transparent;
border: none;
backdrop-filter: none;
padding: 0;
border-radius: 0;
}
.hero h1 { font-size: var(--text-hero); line-height: 1.02; max-width: 14ch; }
.hero .hero-subtitle,
.hero .hero-tagline { max-width: 42ch; }
.hero .hero-subtitle { color: var(--color-accent); font-family: var(--font-body); font-style: italic; }
.hero .hero-actions { justify-content: flex-start; }
/* THE BOUNDARY LINE — a struck set-out rule across the hero with an end peg.
Sits in the right two-thirds, drawn once on load. */
.hero .hero-content::after {
content: "";
position: absolute;
right: 0;
top: 62%;
width: 62%;
height: 1px;
background: var(--color-accent);
transform-origin: left center;
transform: scaleX(0);
animation: setout-draw 560ms var(--draw) 180ms forwards;
z-index: 1;
}
.hero .hero-content::before {
content: "";
position: absolute;
right: 0;
top: calc(62% - 7px);
width: 1px;
height: 15px;
background: var(--color-accent);
opacity: 0;
animation: peg-in 150ms var(--seat) 720ms forwards;
z-index: 1;
}
@keyframes setout-draw { to { transform: scaleX(1); } }
@keyframes peg-in { to { opacity: 1; } }
/* dimension label riding on the boundary line */
.hero::after {
content: "\25C4 0 BOUNDARY L \25BA";
position: absolute;
right: var(--setout-l);
top: calc(62% - 22px);
font-family: var(--font-body);
font-variant-numeric: tabular-nums;
font-size: 11px;
letter-spacing: 0.22em;
color: var(--color-text-faint);
opacity: 0;
animation: peg-in 200ms var(--seat) 760ms forwards;
z-index: 2;
pointer-events: none;
}
.hero .hero-scroll-indicator { color: var(--color-accent); }
/* ---------------------------------------------------------------------------
INNER-PAGE HERO CARRY-THROUGH (Fix #11) — the homepage set-out hero language
carries to every page type as a COMPACT variant: homepage grand (84vh), inner
purposeful (~52vh). Service (.sp-hero) + area (.area-hero) heroes get the same
graphite base, dimmed drafting-film photo, left-anchored block, teal eyebrow,
and a shorter boundary rule with an end-tick. Rankable H1/eyebrow text unchanged
— chrome only. Colour-role tokens → both themes read correctly (hero stays dark).
--------------------------------------------------------------------------- */
.sp-hero, .area-hero {
min-height: 52vh;
display: flex;
align-items: center;
background: var(--color-bg);
position: relative;
/* clear the ~80px fixed site-header so the left-anchored block doesn't collide */
padding-top: calc(80px + var(--setout-xl));
padding-bottom: var(--setout-xl);
}
.sp-hero .hero-bg img, .area-hero .hero-bg img {
filter: grayscale(1) contrast(0.9) brightness(0.42);
}
.sp-hero .hero-overlay, .area-hero .hero-overlay {
background: linear-gradient(90deg,
rgba(20,23,26,0.94) 0%, rgba(20,23,26,0.82) 46%, rgba(20,23,26,0.55) 100%);
}
/* left-anchor the inner-hero block (undo the scaffold's centred !important hero) */
.sp-hero .sp-hero-content, .area-hero .area-hero-content {
text-align: left !important; /* beats scaffold .sp-hero-content text-align:center !important */
margin-inline: 0 !important;
max-width: none;
position: relative;
z-index: 2;
}
.sp-hero .hero-actions, .area-hero .hero-actions { justify-content: flex-start !important; }
.sp-hero h1, .area-hero .area-hero-content h1 {
font-size: var(--text-hero);
line-height: 1.04;
max-width: 16ch;
}
/* teal eyebrow — override the hardcoded inline white so it reads as the set-out
ink and stays theme-consistent (inline style requires !important to beat). */
.sp-hero .section-label, .area-hero .section-label {
color: var(--color-accent) !important;
}
.sp-hero .sp-hero-content p, .area-hero .area-hero-content .hero-sub { max-width: 46ch; }
/* the compact boundary rule + end-tick, echoing the homepage hero (drawn once) */
.sp-hero .sp-hero-content::after, .area-hero .area-hero-content::after {
content: "";
position: absolute;
left: 0;
bottom: calc(-1 * var(--setout-m));
width: clamp(120px, 38%, 360px);
height: 1px;
background: var(--color-accent);
transform-origin: left center;
transform: scaleX(0);
animation: setout-draw 520ms var(--draw) 160ms forwards;
}
.sp-hero .sp-hero-content::before, .area-hero .area-hero-content::before {
content: "";
position: absolute;
left: 0;
bottom: calc(-1 * var(--setout-m) - 7px);
width: 1px;
height: 15px;
background: var(--color-accent);
opacity: 0;
animation: peg-in 150ms var(--seat) 640ms forwards;
}
@media (prefers-reduced-motion: reduce) {
.sp-hero .sp-hero-content::after, .area-hero .area-hero-content::after { animation: none; transform: scaleX(1); }
.sp-hero .sp-hero-content::before, .area-hero .area-hero-content::before { animation: none; opacity: 1; }
}
/* ---------------------------------------------------------------------------
SECTION LEADING RULES — each section-title draws a short set-out rule,
echoing the hero. The page "keeps setting out" as you scroll.
--------------------------------------------------------------------------- */
.section-padding { position: relative; }
.section-title { position: relative; padding-top: var(--setout-m); }
.section-title::before {
content: "";
position: absolute;
top: 0; left: 0;
width: clamp(48px, 20%, 180px);
height: 1px;
background: var(--color-accent);
}
/* ---------------------------------------------------------------------------
CONTROLS — CTA seats like a peg tapped home: 1px downward press, no bounce,
no glow. Sharp corners. The site moves like a tool, not a toy. TEAL buttons.
--------------------------------------------------------------------------- */
.btn {
border-radius: var(--radius-sm);
transition: transform var(--dur-ui) var(--seat),
background-color var(--dur-ui) var(--seat),
border-color var(--dur-ui) var(--seat);
}
.btn-primary {
background: var(--color-accent-fill);
color: var(--color-text-inverse);
border: 1px solid var(--color-accent);
}
.btn-primary:hover { background: var(--color-accent-hover); transform: translateY(1px); box-shadow: none; }
.btn-ghost, .btn-outline, .btn-secondary {
border: 1px solid var(--color-border);
color: var(--color-text);
background: transparent;
}
.btn-ghost:hover, .btn-outline:hover, .btn-secondary:hover { border-color: var(--color-accent); color: var(--color-text); transform: translateY(1px); }
/* inline links: teal ink text + hairline accent underline (register standard).
Scoped to the named content sections PLUS any prose
/
link inside a
content section (.section-padding) — this catches in-content links the four
named selectors miss (e.g. an interlink inside an area page's body copy) while
excluding nav, buttons, and the surface-style card links (which are , not