/* Mirna Luka theme bundle — concatenated from src/ token layer + globals + component CSS. Generated for the WordPress port. */
/* ===== styles\00-primitives.css ===== */
/* ===========================================================================
LAYER 1 — PRIMITIVES
Raw values only. Never references Layer 2 (01-theme.css) or any vendor token.
Component CSS must NOT consume these directly — it consumes Layer 2 semantics
so that everything inverts inside a .theme-always-dark / .theme-invert island.
Declared on a bare `:root` because none of these flip per theme and none of
these names exist in the vendor stylesheet, so there is nothing to out-specify.
(Layer 2 and Layer 3 DO need extra specificity — see their headers.)
Every value below was derived by collapsing the real inventory: 48 hex + 48
rgba in src/, 40 distinct font-sizes, 21 line-heights, 16 letter-spacings.
The "absorbs" comments record what each token replaced, so a future reader can
tell a deliberate merge from an accident.
=========================================================================== */
:root {
/* ---- Palette: teal (brand) ---------------------------------------------
4 near-identical teals in src/ → 2 steps + 1 deep. */
--ml-teal-900: #0b1a17; /* VideoScroll canvas + section black-teal */
--ml-teal-700: #17332e; /* THE brand ink/accent. 25 uses. Value unchanged. */
--ml-teal-600: #223f39; /* hover/lifted. absorbs #22403a #223c36 #34493f */
/* ---- Palette: sage greys ----------------------------------------------
9 muted greys doing 2 jobs → 3 text steps.
6 off-whites differing by 1–2 per channel → 3 surface/line steps. */
/* THE SAGE RAMP IS FOR SURFACES ONLY — no step of it may back text.
A tint on a background is atmosphere; the same tint on a glyph is a defect.
The text ramp lives in the ink block below. Three sage steps used to back
text (600 body, 500 label, 400 muted) and every one of them carried the same
~14/255 green shift, so paragraphs and captions read murky. Corrected after
review; do not route text back through here. */
--ml-sage-100: #e7eae8; /* hairline. absorbs #e6eae8 #e7ece9 #e8ece9 */
--ml-sage-050: #f2f5f3; /* tinted surface */
/* ---- Palette: inks ----------------------------------------------------
11 near-blacks → 5, plus the neutral body grey.
BODY TEXT IS NEUTRAL, NOT SAGE — this was corrected after review and must
not drift back. The first pass merged the project's three body colours
(#5f726c, #5a635f, #6c7d77) into their average #5d6b65 and bridged the
vendor's --secondary into it, which tinted 624 paragraphs green: all three
originals carry a ~14/255 green shift, so averaging them preserved the cast
instead of cancelling it. On long-form text that reads as murky and is
noticeably harder to scan.
#555555 is exactly the vendor's own --secondary, so vendor paragraphs are
back to the colour they had before the migration, and it measures 7.46:1
(AAA) against 5.59:1 for the sage.
Sage belongs on SURFACES and LINES, where a tint is atmosphere. On text it
is a defect. */
--ml-ink-600: #555555; /* body copy. 7.46:1 on white */
/* Label text: spec keys, figcaptions, room labels. Small uppercase counts as
SMALL text under WCAG, so it needs 4.5:1 — and it was deliberately taken
past that to 5.74:1 rather than parked on the line, because at 11–12px the
minimum is uncomfortable to read even when it technically passes.
Replaces #8a938f (3.16:1), #96a49f (2.59:1), #8fa199 (2.72:1) and
#8aa39a (2.70:1) — all of which failed AA outright. */
--ml-ink-500: #666666; /* labels. 5.74:1 */
/* Decorative muted tier. Intentionally NOT AA: only for text a reader can miss
without losing anything — counters, placeholders, map attribution. Anything
that must be read uses --ml-ink-500 or darker.
Also happens to be the vendor's own grey (71 uses in style.css), so this
tier now agrees with the template instead of competing with it. */
--ml-ink-400: #999999; /* muted. 2.85:1 */
--ml-ink-300: #b9b9b9; /* ornamental: rules, dividers, watermarks. 1.96:1 */
--ml-ink-950: #0a0d0c; /* deepest. MapSection ×7, ExploreMap ×2 */
--ml-ink-900: #111111; /* == vendor --primary / --black / --bg. Keep this
value EXACT: bridged dark bands must match the
hundreds of vendor bands we never touch. */
--ml-ink-850: #1a1a1c; /* absorbs #1a1a1a #141917 */
--ml-ink-800: #232326; /* absorbs #222 */
--ml-ink-700: #2c2c2f; /* absorbs #2a2a2e #2d2d2d #333337 */
/* ---- Palette: gold (warm accent — map marker, focus ring) -------------- */
--ml-gold-950: #1a140a;
--ml-gold-700: #9c7723;
--ml-gold-500: #c8a96a;
--ml-gold-100: #f4f1ea;
--ml-gold-050: #fbf4e6;
--ml-white: #ffffff;
--ml-black: #000000;
/* ---- Channel triplets that NEVER flip ---------------------------------
For the cases where you genuinely mean white or black regardless of theme:
photo scrims, shadow colour. The flipping pair (--fg-rgb / --bg-rgb) lives
in 01-theme.css because it is theme state, not a primitive. */
--white-rgb: 255 255 255;
--black-rgb: 0 0 0;
--teal-rgb: 23 51 46;
--gold-rgb: 200 169 106;
/* ---- FLUID TYPE SCALE -------------------------------------------------
Slope range 320px → 1790px. 1790 is the real site width
(.rr-container-1790, called "the site width" in globals.css), NOT the 1366
of the pxpace reference — a token that stops growing at 1366 would leave
the widest 24% of the layout with undersized type.
slope_vw = (max - min) / 14.7
intercept_rem = (min - (max - min) * 320/1470) / 16
The small steps deliberately span only ~1px. An 11px eyebrow label must not
become 15px on a 1790px screen — labels are meant to stay quiet. This is
also why pxpace's --text-xs floor of 0.97rem (~15.5px) is unusable here:
62 of the 97 real font-size declarations in src/ are between 10 and 17px. */
--text-3xs: clamp(0.625rem, calc(0.07vw + 0.611rem), 0.6875rem); /* 10→11 */
--text-2xs: clamp(0.6875rem, calc(0.07vw + 0.674rem), 0.75rem); /* 11→12 */
--text-xs: clamp(0.75rem, calc(0.07vw + 0.736rem), 0.8125rem); /* 12→13 */
--text-s: clamp(0.8125rem, calc(0.07vw + 0.799rem), 0.875rem); /* 13→14 */
--text-m: clamp(0.875rem, calc(0.07vw + 0.861rem), 0.9375rem); /* 14→15 */
--text-base: clamp(0.9375rem, calc(0.07vw + 0.924rem), 1rem); /* 15→16 */
/* BODY COPY. Decided: a fixed 16px in the old CSS maps HERE, not to
--text-base. It keeps 16px on phones and grows to 18px at the site width,
which is the normal measure for the ~900px reading column (a 90-character
line lands near 72 characters at 18px). --text-base would have preserved
desktop exactly at the cost of shrinking phones to 15px, and phones are
where the extra size is worth more. Apply the same mapping in every file. */
--text-l: clamp(1rem, calc(0.14vw + 0.973rem), 1.125rem); /* 16→18 */
--text-xl: clamp(1.125rem, calc(0.27vw + 1.071rem), 1.375rem); /* 18→22 */
--text-2xl: clamp(1.3125rem, calc(0.41vw + 1.231rem), 1.6875rem); /* 21→27 */
--text-3xl: clamp(1.5rem, calc(0.68vw + 1.364rem), 2.125rem); /* 24→34 */
--text-4xl: clamp(1.75rem, calc(1.09vw + 1.532rem), 2.75rem); /* 28→44 */
--text-5xl: clamp(2.125rem, calc(2.31vw + 1.662rem), 4.25rem); /* 34→68 */
--text-6xl: clamp(2.5rem, calc(3.54vw + 1.793rem), 5.75rem); /* 40→92 */
--text-7xl: clamp(3.5rem, calc(4.9vw + 2.52rem), 8rem); /* 56→128 */
/* Art-directed one-off, NOT a scale step: the MapIntro numeral, previously
clamp(64px, 16vw, 260px). Kept as a token so it is findable, not so it is
reusable — if a second element wants this, it wants a different design. */
--text-mega: clamp(4rem, calc(13.33vw + 1.333rem), 16.25rem); /* 64→260 */
/* ---- FLUID SPACE SCALE ------------------------------------------------
Same 320→1790 range. src/ currently has no 4px or 8px grid at all:
8,9,10,14,16,18,20,22,24,26,28,30,34,38,40,44,48 all appear as both gaps
and paddings. These 11 steps replace that. */
--space-4xs: 0.25rem; /* 4, static */
--space-3xs: clamp(0.375rem, calc(0.14vw + 0.348rem), 0.5rem); /* 6→8 */
--space-2xs: clamp(0.5rem, calc(0.14vw + 0.473rem), 0.625rem); /* 8→10 */
--space-xs: clamp(0.625rem, calc(0.27vw + 0.571rem), 0.875rem); /* 10→14 */
--space-s: clamp(0.875rem, calc(0.27vw + 0.821rem), 1.125rem); /* 14→18 */
--space-m: clamp(1rem, calc(0.54vw + 0.891rem), 1.5rem); /* 16→24 */
--space-l: clamp(1.25rem, calc(0.68vw + 1.114rem), 1.875rem); /* 20→30 */
--space-xl: clamp(1.5rem, calc(1.09vw + 1.282rem), 2.5rem); /* 24→40 */
--space-2xl: clamp(1.875rem, calc(1.22vw + 1.63rem), 3rem); /* 30→48 */
--space-3xl: clamp(2.5rem, calc(1.63vw + 2.173rem), 4rem); /* 40→64 */
--space-4xl: clamp(3.75rem, calc(2.72vw + 3.206rem), 6.25rem); /* 60→100 */
/* ---- MEASURE (reading widths) -----------------------------------------
15 distinct values in 3 unit systems (px, rem, ch) for what is
conceptually the same thing → 6 steps, all rem. */
--measure-xs: 30rem; /* 480 — absorbs 30rem, 40ch */
--measure-s: 33rem; /* 528 — absorbs 520px, 560px */
--measure-m: 40rem; /* 640 — absorbs 620px, 640px */
--measure-l: 47rem; /* 752 — absorbs 44rem (704), 760px */
--measure-xl: 60rem; /* 960 — absorbs 900px, 62rem (992) */
--measure-2xl: 69rem; /* 1104 — absorbs 1100px (.blog-details__content) */
--width-wide: min(87.5rem, 100%); /* was min(1400px, 100%) */
--width-site: 1790px; /* .rr-container-1790 — "the site width" */
/* ---- RADIUS ----------------------------------------------------------
2px dominates (12 uses) so it is the brand radius, not an afterthought.
NOTE: --radius-xl is tweened inline by GSAP on .ml-map__frame
(MapSection.tsx). See src/styles/README.md "Tokens GSAP can override". */
--radius-xs: 2px;
--radius-s: 4px;
--radius-m: 8px;
--radius-l: 16px;
--radius-xl: 20px; /* MapSection frame */
--radius-pill: 999px;
--radius-circle: 50%;
/* ---- Z-INDEX ---------------------------------------------------------
Until now this ladder existed ONLY as prose in Header.css:7-9. */
--z-under: -1;
--z-base: 0;
--z-raise: 2; /* was a bare `2` in 6 files */
--z-raise-2: 3;
--z-map-controls: 1000; /* Leaflet controls */
--z-map-popup: 1200; /* Leaflet popup */
--z-lightbox: 9500; /* UnitDetail lightbox — deliberately BELOW --z-panel */
--z-devtool: 2147483647; /* SectionLabeler, development only */
/* Vendor owns these three. Mirrored here as read-only documentation so the
ladder is complete and greppable. DO NOT redefine them — the vendor
stylesheet sets the actual z-index on those elements. */
--z-header: 800;
--z-offcanvas: 900;
--z-panel: 9999;
/* ---- BREAKPOINTS — FOR REFERENCE ONLY --------------------------------
Custom properties are ILLEGAL inside @media conditions:
@media (max-width: var(--bp-md)) <-- never works, silently ignored
Every @media must therefore spell the literal. These exist so the numbers
are findable and greppable from CSS, and scripts/check-tokens.mjs fails the
build on any @media width outside this set.
Source of truth for TS/TSX: src/config/breakpoints.ts */
--bp-xs: 575px;
--bp-sm: 767px;
--bp-md: 991px;
--bp-lg: 1199px;
--bp-xl: 1399px;
--bp-xxl: 1919px;
--bp-md-up: 992px; /* the only min-width tier in use */
}
/* ===== styles\01-theme.css ===== */
/* ===========================================================================
LAYER 2 — SEMANTIC, INVERTIBLE
~26 names. THIS is the layer component CSS consumes. Never reach past it into
Layer 1 (--ml-*) from a component: a Layer 1 value cannot invert, so using one
directly is how a component silently breaks inside a dark island.
---------------------------------------------------------------------------
WHY THE SELECTORS LOOK LIKE THIS
Two paired groups, adapted from docs/pxpace-example-css.css. They give three
utility classes for free:
.theme-invert flip relative to the ambient theme
.theme-always-dark dark regardless of ambient theme
.theme-always-light light regardless of ambient theme
That is the whole point of this architecture for this site: Mirna Luka is a
light editorial page with intentional dark BANDS (footer, map, booking rail,
video section). Before this, each band hardcoded its own palette — five
separate ad-hoc token blocks under two competing naming conventions, plus a
`--primary` re-point hack and ~20 !important to undo it. Now a band is just
an element carrying .theme-always-dark.
The light group is anchored on `:root:not(.theme-dark)` rather than
`:root.theme-light` for two reasons:
1. Specificity (0,2,0) beats the vendor stylesheet's bare `:root` (0,1,0).
This matters because Next hoists ALL of src/ CSS ABOVE
/assets/css/style.css in the built (verified in .next output), so
we can never win on source order — only on specificity.
2. Light keeps working if the html class is ever dropped. Light is the
fail-safe default, not a state that must be switched on.
NESTING LIMIT: .theme-invert resolves correctly one level deep, and
.theme-always-* resolves correctly inside one .theme-invert. Deeper nesting is
undefined (same limitation as the pxpace reference). Never put two theme-*
classes on one element; scripts/check-tokens.mjs fails the build if you do.
=========================================================================== */
/* ------------------------------- LIGHT ----------------------------------- */
:root:not(.theme-dark),
:root.theme-dark .theme-invert,
:root:not(.theme-dark) .theme-invert .theme-always-light,
/* Bare, so `always` means ALWAYS — including nested inside a dark island, which
the pxpace selector set did not cover: it only ever anticipated nesting under
:root.theme-*, so a light chip inside .theme-always-dark silently inherited the
dark values. That is a real shape here — the Leaflet popup and map pins are
light cards sitting on a dark map. Specificity is fine at (0,1,0): the dark
island's values reach the chip by INHERITANCE, and any rule on the element
itself beats an inherited value. */
.theme-always-light {
/* Exposed as a TOKEN, not applied here. Applying `color-scheme` in this group
would put it on :root, changing how the UA paints form controls and
scrollbars site-wide — a real change, and not one the token layer should
make on its own. 04-utilities.css applies it to theme islands only, which is
where it is actually needed (it replaces the hand-set `color-scheme: dark`
on .rd-rail__card). Root can opt in with one line when the toggle lands. */
--color-scheme: light;
/* The one pair that flips. Everything alpha-based derives from these, so a
theme is defined by two numbers plus the semantic assignments below. */
--fg-rgb: 23 51 46;
--bg-rgb: 255 255 255;
--shadow-rgb: 23 51 46; /* shadows are teal-tinted on light, never neutral grey */
/* Surfaces */
--bg-body: var(--ml-white);
--bg-surface: var(--ml-white);
--bg-surface-2: var(--ml-sage-050);
--bg-inset: var(--ml-sage-100);
--bg-special: var(--ml-gold-050);
/* Text */
/* Brand teal is a DISPLAY colour: it belongs on the Vogue face and nowhere
else. A 130px sans heading in teal reads as a mistake — which is exactly
what /explore and /contact showed. --text-heading is the default for every
heading NOT set in Vogue. */
--text-title: var(--ml-teal-700); /* Vogue headings only */
--text-heading: var(--ml-ink-900); /* sans headings — the vendor's own #111111 */
/* Neutral, not sage — see the note on --ml-ink-600. Headings stay brand teal;
body copy does not get a tint. */
--text-body: var(--ml-ink-600);
/* --text-label and --text-muted are DIFFERENT on purpose, and were briefly the
same value by accident. --text-label backs small uppercase labels that a
reader has to read (spec keys, figure captions, room labels) and so must
clear WCAG AA 4.5:1 at 11–12px; --text-muted is the decorative tier and
deliberately does not. Do not collapse them back together.
All three are NEUTRAL — see the sage-ramp note in 00-primitives.css. */
--text-label: var(--ml-ink-500); /* 5.74:1 on white — past AA on purpose */
--text-muted: var(--ml-ink-400); /* 2.85:1 — decorative only */
--text-faint: var(--ml-ink-300); /* ornamental: rules, dividers, watermarks */
--text-inverse: var(--ml-white);
/* Lines. Named --line*, NOT --border*, on purpose: `--border` is the VENDOR's
own token name (81 uses, 79 of them border-*). Declaring it here would make
Layer 2 silently bridge it, which breaks the layering contract — Layer 3
owns vendor names — and would move every hairline on the site the moment the
token layer is imported. 03-bridge.css points --border at --line explicitly.
10% matches the vendor's original rgba(17,17,17,0.10), so the bridge is a
hue shift and not a darkening. */
--line: var(--fg-10);
--line-strong: var(--fg-15); /* absorbs --rd-line rgba(23,51,46,0.14) */
--line-faint: var(--fg-5);
/* Accent */
--accent: var(--ml-teal-700);
--accent-hover: var(--ml-teal-600);
--accent-contrast: var(--ml-white);
--gold: var(--ml-gold-500);
--gold-ink: var(--ml-gold-700);
--gold-surface: var(--ml-gold-050);
/* Text/iconography sitting ON a --gold fill. Does NOT flip: the gold fill is a
mid-light colour in both themes, so its contrast partner is always the dark
end. Reaching for --gold-surface here instead is a trap — that is the tinted
BACKGROUND token, and on light it resolves to near-white on gold. */
--gold-contrast: var(--ml-gold-950);
--focus-ring: 0 0 0 6px rgb(var(--gold-rgb) / 0.2);
}
/* -------------------------------- DARK ----------------------------------- */
:root.theme-dark,
:root:not(.theme-dark) .theme-invert,
:root.theme-dark .theme-invert .theme-always-dark,
/* Bare, mirroring .theme-always-light above. */
.theme-always-dark {
/* Applied by 04-utilities.css, not here — see the light group. This is what
replaces the hand-placed `color-scheme: dark` on .rd-rail__card, which was
there so Chrome paints the indicator visibly on #111. */
--color-scheme: dark;
--fg-rgb: 255 255 255;
--bg-rgb: 10 13 12;
--shadow-rgb: 0 0 0; /* never a white glow */
--bg-body: var(--ml-ink-950);
--bg-surface: var(--ml-ink-900);
--bg-surface-2: var(--ml-ink-850);
--bg-inset: var(--ml-ink-800);
--bg-special: var(--ml-gold-950);
--text-title: var(--ml-white);
--text-heading: var(--ml-white); /* both heading roles collapse on dark */
--text-body: var(--fg-70); /* 9.5:1 on #111 */
--text-muted: var(--fg-60); /* 7.2:1 */
--text-label: var(--fg-50); /* 5.3:1 — AA, no darkening needed here:
white-on-dark clears 4.5:1 from 50% up,
which is why only the light theme needed
a dedicated --ml-sage-500 label step. */
--text-faint: var(--fg-40); /* 3.8:1 — ornamental only, same rule as light */
--text-inverse: var(--ml-teal-700);
--line: var(--fg-10);
--line-strong: var(--fg-20);
--line-faint: var(--fg-5);
/* The brand teal is invisible on near-black, so on dark the accent is white.
This is not a compromise: the real dark islands (booking-rail CTA, footer
CTA) were already hand-built with white fills — this makes that the rule. */
--accent: var(--ml-white);
--accent-hover: var(--ml-sage-100);
--accent-contrast: var(--ml-teal-700);
--gold: var(--ml-gold-500);
--gold-ink: var(--ml-gold-500); /* the 700 is unreadable on dark */
--gold-surface: var(--ml-gold-950);
--gold-contrast: var(--ml-gold-950); /* same in both themes — see light group */
--focus-ring: 0 0 0 6px rgb(var(--gold-rgb) / 0.24);
}
/* ===========================================================================
ALPHA LADDERS
Replaces 13 distinct white-alphas and 11 distinct black-alphas in src/ with
one 12-step ladder that inverts.
MECHANISM — read this before changing the selector list. A custom property's
computed value is its specified value with var() ALREADY substituted, and it
is that substituted value which inherits. So if --fg-15 were declared only on
:root, it would freeze as rgb(23 51 46 / 0.15) at the root and inherit that
literal into .theme-always-dark — the ladder would NOT invert, silently.
Listing the island classes in the selector below makes each island RE-declare
the ladder on itself, where --fg-rgb has already been flipped by the group
above. That is what makes the ladder invert.
Steps snapped from the 24 real alpha values found in src/:
.05→5 · .1/.12→10 · .14/.16→15 · .22/.25→20 · .28/.3→30 · .35→35
.45→40 · .5→50 · .55/.6→60 · .65/.66/.7/.72→70 · .85→80 · .92/.94→90
35 and 70 exist as their own steps specifically to keep rgba(0,0,0,.35) (×3)
and the .65/.66/.7/.72 cluster from drifting on photo scrims.
Chosen over pxpace's 8-digit hex ladder (12 hand-computed strings per colour
per theme; change one value and you recompute all 12) and over color-mix()
(reads worse at ~200 call sites and hides the alpha number). One flipping
triplet, one mechanical ladder, and rgb(var(--fg-rgb) / .37) still available
inline for the genuinely off-ladder case.
=========================================================================== */
:root,
.theme-invert,
.theme-always-dark,
.theme-always-light {
/* Foreground alpha — "N% of whatever the text colour is in this context". */
--fg-5: rgb(var(--fg-rgb) / 0.05);
--fg-10: rgb(var(--fg-rgb) / 0.1);
--fg-15: rgb(var(--fg-rgb) / 0.15);
--fg-20: rgb(var(--fg-rgb) / 0.2);
--fg-30: rgb(var(--fg-rgb) / 0.3);
--fg-35: rgb(var(--fg-rgb) / 0.35);
--fg-40: rgb(var(--fg-rgb) / 0.4);
--fg-50: rgb(var(--fg-rgb) / 0.5);
--fg-60: rgb(var(--fg-rgb) / 0.6);
--fg-70: rgb(var(--fg-rgb) / 0.7);
--fg-80: rgb(var(--fg-rgb) / 0.8);
--fg-90: rgb(var(--fg-rgb) / 0.9);
/* Background alpha — for veils/blurs that must read as the surface. */
--bg-5: rgb(var(--bg-rgb) / 0.05);
--bg-10: rgb(var(--bg-rgb) / 0.1);
--bg-15: rgb(var(--bg-rgb) / 0.15);
--bg-20: rgb(var(--bg-rgb) / 0.2);
--bg-30: rgb(var(--bg-rgb) / 0.3);
--bg-35: rgb(var(--bg-rgb) / 0.35);
--bg-40: rgb(var(--bg-rgb) / 0.4);
--bg-50: rgb(var(--bg-rgb) / 0.5);
--bg-60: rgb(var(--bg-rgb) / 0.6);
--bg-70: rgb(var(--bg-rgb) / 0.7);
--bg-80: rgb(var(--bg-rgb) / 0.8);
--bg-90: rgb(var(--bg-rgb) / 0.9);
/* SCRIMS — these must stay black in BOTH themes. A scrim exists to make text
legible over a PHOTOGRAPH, and the photograph does not change when the
theme does. Using --fg-* here would turn a scrim white on dark and destroy
the text it was protecting. */
--scrim-30: rgb(var(--black-rgb) / 0.3);
--scrim-35: rgb(var(--black-rgb) / 0.35);
--scrim-50: rgb(var(--black-rgb) / 0.5);
--scrim-70: rgb(var(--black-rgb) / 0.7);
/* SHADOWS — 8 real box-shadow values in src/ → 5 steps. Tinted via
--shadow-rgb so light-theme shadows are teal and dark-theme shadows are
black rather than an impossible white glow. */
--shadow-xs: 0 2px 8px rgb(var(--shadow-rgb) / 0.12);
--shadow-s: 0 6px 16px -6px rgb(var(--shadow-rgb) / 0.4);
--shadow-m: 0 10px 30px rgb(var(--shadow-rgb) / 0.35);
--shadow-l: 0 18px 44px -18px rgb(var(--shadow-rgb) / 0.4);
--shadow-xl: 0 30px 70px -40px rgb(var(--shadow-rgb) / 0.7);
}
/* ===== styles\02-type.css ===== */
/* ===========================================================================
TYPOGRAPHY — role tokens + role classes
Replaces, in src/ alone: 40 distinct font-sizes (76% raw px), 16 distinct
letter-spacings across three unit systems, and 21 distinct line-heights.
It also replaced the display face's family name, which was retyped as a
literal in 20 declarations across 11 files under TWO different fallback
stacks — most files said "Vogue ML", "Times New Roman", serif while
UnitDetail.css said "Vogue ML", serif, so the same heading font fell back to a
different serif depending on which file styled it.
=========================================================================== */
:root {
/* ---- Font families ---------------------------------------------------
--font-*-next are the variables next/font declares on (layout.tsx).
Reading them through these two names keeps the fallback stack in ONE place
and keeps every stylesheet valid if next/font is ever removed.
The fallbacks name only real system faces on purpose: with next/font gone
there would be no @font-face either, so listing the custom family names here
would just be a lie that resolves to the next entry anyway. */
--font-sans: var(--font-sans-next, system-ui, sans-serif);
--font-display: var(--font-display-next, "Times New Roman", serif);
--font-icon: "Phosphor"; /* == vendor --font_awesome */
/* ---- Weights ---------------------------------------------------------
Only 4 are used in src/, and the vendor body default is 500 (not 400) —
worth knowing before "normalising" anything to 400.
--fw-black has exactly one use; kept so the grep gate can see it named. */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-black: 900;
/* ---- Tracking — 16 values in 3 unit systems (em, px, `normal`) → 8, all em.
em rather than px so tracking scales with the fluid type scale; a fixed
0.14px of tracking means something different at 11px and at 68px. */
--track-tighter: -0.03em; /* == the vendor body's -0.48px at 16px */
--track-tight: -0.015em; /* absorbs -0.2px (×5) -0.3px -0.4px */
--track-none: 0;
--track-1: 0.015em; /* absorbs 0.01em (×5) 0.02em (×4) */
--track-2: 0.04em; /* absorbs 0.04em (×9) 0.05em 0.06em (×2) */
--track-3: 0.09em; /* absorbs 0.08em (×6) 0.1em (×3) */
--track-4: 0.15em; /* absorbs 0.14em (×7) 0.16em */
--track-5: 0.22em; /* absorbs 0.22em (×2) 3px (×2) 1.5px */
/* Named aliases for the two that carry design intent, so a component reads as
"this is the display tracking" rather than "this is 0.04em". */
--track-display: var(--track-2);
--track-eyebrow: var(--track-4);
/* ---- Leading — 21 values → 8, all unitless.
Unitless matters: the vendor sheet has 731 line-height declarations that are
almost all px, which is why leading breaks on phones — a 20px line-height
does not follow a font-size that shrank. The two px outliers in src/ convert
to their measured ratio (globals.css `34px !important` on a 30px heading is
1.133, which rounds into --leading-display at 1.14 × 30 = 34.2px). */
--leading-none: 1;
--leading-flat: 1.05; /* absorbs 1.02 (×2) 1.04 */
--leading-display: 1.14; /* absorbs 1.1 1.12 1.15 (×3) */
--leading-tight: 1.22; /* absorbs 1.2 (×5); == vendor h1–h6 */
--leading-snug: 1.35; /* absorbs 1.3 (×2) 1.4 */
--leading-normal: 1.5; /* absorbs 1.45 1.5 (×2) */
--leading-relaxed: 1.62; /* absorbs 1.55 (×4) 1.6 (×4) 1.65 (×2) */
--leading-loose: 1.72; /* absorbs 1.7 (×5) 1.75 (×2) 1.8 */
}
/* ===========================================================================
ROLE CLASSES
The `font` shorthand cannot express this set inside a custom property (it
requires a family and forbids letter-spacing), so composite roles are classes,
not tokens. Individual tokens above remain for component CSS that styles an
element it does not own and therefore cannot add a class to. Both exist on
purpose.
---------------------------------------------------------------------------
THE SPECIFICITY CONTRACT — why some selectors are doubled
Next hoists every stylesheet imported from src/ ABOVE /assets/css/style.css in
the built . We therefore always lose on source order to the vendor and
can only win on specificity. A role class landing on an element the vendor
also styles (h1, h2, .sub-title, .title) is written DOUBLED — .ml-h1.ml-h1 is
(0,2,0) and beats the vendor's (0,1,0) — while classes that only ever land on
this project's own .ml-* / .rd-* markup stay single.
This is the honest replacement for !important: it states "I am beating a
vendor rule of equal specificity" in the selector itself, and unlike
!important it can still be overridden by ordinary means downstream.
=========================================================================== */
/* ---- Eyebrow / kicker: small, uppercase, wide-tracked ---------------------
Doubled: lands on the vendor's .sub-title / .page-sub-title / .section-sub-title. */
.ml-eyebrow.ml-eyebrow {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
line-height: var(--leading-none);
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--text-label);
}
/* ---- Headings ------------------------------------------------------------
h1/h2/h3 are the display serif (Vogue). h4–h6 are the sans: Vogue is a
high-contrast display face that stops being readable below roughly 24px, which
is the reason globals.css already splits large headings from small ones. */
.ml-h1.ml-h1 {
font-family: var(--font-display);
font-size: var(--text-5xl);
font-weight: var(--fw-regular);
line-height: var(--leading-display);
letter-spacing: var(--track-display);
color: var(--text-title);
}
.ml-h2.ml-h2 {
font-family: var(--font-display);
font-size: var(--text-4xl);
font-weight: var(--fw-regular);
line-height: var(--leading-display);
letter-spacing: var(--track-display);
color: var(--text-title);
}
.ml-h3.ml-h3 {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: var(--fw-regular);
line-height: var(--leading-tight);
letter-spacing: var(--track-display);
color: var(--text-title);
}
.ml-h4.ml-h4 {
font-family: var(--font-sans);
font-size: var(--text-2xl);
font-weight: var(--fw-medium);
line-height: var(--leading-tight);
letter-spacing: var(--track-1);
color: var(--text-title);
}
.ml-h5.ml-h5 {
font-family: var(--font-sans);
font-size: var(--text-xl);
font-weight: var(--fw-medium);
line-height: var(--leading-snug);
letter-spacing: var(--track-1);
color: var(--text-title);
}
.ml-h6.ml-h6 {
font-family: var(--font-sans);
font-size: var(--text-l);
font-weight: var(--fw-semibold);
line-height: var(--leading-snug);
letter-spacing: var(--track-1);
color: var(--text-title);
}
/* ---- Body + supporting roles ---------------------------------------------
Single selectors: these only ever land on this project's own markup. */
.ml-body {
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--fw-medium);
line-height: var(--leading-relaxed);
letter-spacing: var(--track-tight);
color: var(--text-body);
}
.ml-body-lg {
font-family: var(--font-sans);
font-size: var(--text-l);
font-weight: var(--fw-regular);
line-height: var(--leading-normal);
letter-spacing: var(--track-tight);
color: var(--text-body);
}
.ml-body-sm {
font-family: var(--font-sans);
font-size: var(--text-m);
font-weight: var(--fw-medium);
line-height: var(--leading-relaxed);
letter-spacing: var(--track-tight);
color: var(--text-body);
}
/* Uppercase micro-label: spec keys, filter chips, stat captions. */
.ml-label {
font-family: var(--font-sans);
font-size: var(--text-2xs);
font-weight: var(--fw-semibold);
line-height: var(--leading-none);
letter-spacing: var(--track-3);
text-transform: uppercase;
color: var(--text-label);
}
/* Sentence-case secondary text: image captions, helper text. */
.ml-caption {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--fw-regular);
line-height: var(--leading-snug);
letter-spacing: var(--track-none);
color: var(--text-muted);
}
/* Smallest tier: legal lines, photo credits, breadcrumb tails. */
.ml-meta {
font-family: var(--font-sans);
font-size: var(--text-3xs);
font-weight: var(--fw-medium);
line-height: var(--leading-snug);
letter-spacing: var(--track-4);
text-transform: uppercase;
color: var(--text-faint);
}
/* ===== styles\03-bridge.css ===== */
/* ===========================================================================
LAYER 3 — VENDOR BRIDGE
Re-points the purchased template's own custom properties at Layer 2 semantics,
so that vendor declarations we never edit inherit the token system.
/assets/css/style.css is 24,080 lines; bridging is how ~150 of its
declarations become themeable without touching it.
---------------------------------------------------------------------------
WHICH VENDOR TOKENS ARE BRIDGED, AND WHICH DELIBERATELY ARE NOT
The vendor declares six colour tokens. Counting how each is actually USED
decides which are safe to bridge — a token used for both `color` and
`background-color` cannot be re-pointed at a single semantic without breaking
one of its two jobs:
var uses color bg border verdict
--primary 366 254 79 30 DO NOT BRIDGE — dual role
--white 210 167 38 3 DO NOT BRIDGE — dual role
--black 110 81 23 5 DO NOT BRIDGE — dual role
--secondary 75 71 2 1 BRIDGE -> var(--text-body)
--border 81 0 2 79 BRIDGE -> var(--line)
--bg 0 - - - dead; not bridged, not defined
Note --border in particular: Layer 2 deliberately calls its own token --line
instead. A vendor NAME declared in Layer 2 would bridge itself the instant the
token layer is imported — which is exactly what happened on the first attempt
here, moving every hairline on the site during a batch that was supposed to
change nothing. Vendor names are Layer 3's job, and only Layer 3's.
Concretely: --primary is the template's near-black used for heading text AND
for dark-band backgrounds (.rr-bg-primary { background-color: var(--primary) }).
Re-pointing it to the brand teal would turn the footer teal. --white is
text-on-dark AND background-white; pointing it at a flipping surface token
would make every dark-band label invisible. Those three are re-pointed only
INSIDE a theme island, scoped, in 04-utilities.css.
---------------------------------------------------------------------------
THE UNDEFINED VENDOR VARIABLES
style.css calls eleven variables via var() that it never declares. An invalid
var() makes the WHOLE declaration drop at computed-value time, so each of these
is a vendor declaration doing nothing today. Defining them is mostly a free fix
— but not always, and the difference matters:
Two of them are LOAD-BEARING WHILE BROKEN. Defining these would be a
regression, so they stay undefined on purpose:
--black-6 `.progress-wrap svg path { fill: var(--black-6) }` applies to
BOTH svgs in ProgressWrap; the circle overrides it with
var(--white), so what is left is the scroll-to-top ARROW, whose
path carries the presentation attribute fill="none". A CSS
`fill` beats a presentation attribute — so defining --black-6
fills the arrow into a solid blob. The invalid declaration is
what keeps the arrow a clean stroke.
--action `.loader-wrap { background: var(--action) }`. The loader is a
curtain: a full-viewport