/* ============================================================================= Settled — token layer Single source of truth. Read verbatim out of the marketing DESIGN SYSTEM page (§10, "read out of v7 · 31.07.26"). Every colour, type step, spacing unit, radius and easing curve in the site resolves to one of these. Rule for the rest of the codebase: no raw hex, no px font-size, no timing value lives anywhere but here. If you are about to type #A85A34, 92px or 600ms into another file, add or reference a token instead. NOTE: the older configurator prototype used a cream ground (#F5F2EC) with a different ink and clay. That set is superseded — do not reintroduce it. ========================================================================== */ :root { /* ── Ground ──────────────────────────────────────────────────────────── */ --ground: #E4E7E0; /* page, nav, card, badge fills */ --ground-shade: #D9DDD3; /* chapter 01 band + slider band only */ --ground-deep: #191B15; /* inverted (chapter 03) panel ground */ /* ── Ink ─────────────────────────────────────────────────────────────── */ --ink: #191B15; /* all type, all rules */ --ink-64: rgba(25, 27, 21, 0.64); --ink-62: rgba(25, 27, 21, 0.62); /* CHANGED — was 0.58 / 0.55 */ --ink-30: rgba(25, 27, 21, 0.3); /* marquee ink */ --hairline: rgba(25, 27, 21, 0.11); /* every section join */ --gridline: rgba(25, 27, 21, 0.05); /* fixed grid lines */ --ghost: rgba(25, 27, 21, 0.06); /* ghost numeral */ /* ── Inverted, on --ground-deep ──────────────────────────────────────── */ --ground-68: rgba(228, 231, 224, 0.68); --ground-55: rgba(228, 231, 224, 0.55); --ground-52: rgba(228, 231, 224, 0.52); /* CHANGED — was 0.42 */ --ghost-invert: rgba(228, 231, 224, 0.06); --hairline-invert: color-mix(in srgb, currentColor 14%, transparent); --rule-invert: color-mix(in srgb, currentColor 18%, transparent); /* ── Accent ──────────────────────────────────────────────────────────── */ --clay: #A85A34; /* links, focus ring, 1px scroll bar. 11px+ only, never a fill */ /* ── Faces ───────────────────────────────────────────────────────────── */ --serif: 'Instrument Serif', serif; --sans: 'DM Sans', sans-serif; /* ── Type — base sizes ───────────────────────────────────────────────── */ --t-hero: 92px; --t-hero-lh: 0.98; --t-hero-ls: -0.025em; --t-mega: 150px; --t-mega-lh: 0.9; --t-mega-ls: -0.03em; --t-ghost-lh: 0.8; --t-quote: 36px; --t-quote-lh: 1.12; --t-value: 19px; --t-value-card: 17px; --t-value-ls: -0.01em; --t-body: 15px; --t-body-lh: 1.6; --t-meta: 13px; --t-label: 11px; --t-label-ls: 0.14em; --t-mark: 13px; --t-mark-ls: 0.26em; --t-mark-ls-min: 0.2em; --t-glyph: 16px; /* ── Type — responsive steps (breakpoints 1240 / 900, no others) ─────── */ --t-hero-1240: 64px; --t-hero-900: 44px; --t-mega-1240: 96px; --t-mega-900: 44px; --t-ghost: 150px; --t-ghost-1240: 104px; /* ── Space ───────────────────────────────────────────────────────────── */ --container: 1440px; --pad: 120px; /* section inline padding, desktop */ --pad-band: 40px; /* full-bleed band inline padding */ --pad-sm: 20px; /* ≤900px inline padding */ --rail: 40px; /* fixed vertical-rail inset */ --section-y: 128px; /* vertical section rhythm */ --section-y-sm: 48px; /* ≤900px */ --panel-y: 120px; --card-pad: 28px; --row-y: 15px; --row-y-panel: 14px; --gap-row: 18px; --gap-col: 24px; --gap-wide: 56px; --gap-panel: 64px; --hair: 1px; --radius: 0; --radius-handle: 50%; /* Loose gap set — deliberately not a modular scale */ --gap-6: 6px; --gap-10: 10px; --gap-14: 14px; --gap-16: 16px; --gap-18: 18px; --gap-24: 24px; --gap-28: 28px; --gap-32: 32px; --gap-40: 40px; --gap-48: 48px; --gap-56: 56px; --gap-64: 64px; /* ── Motion ──────────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* one curve for everything */ --dur-fast: 500ms; /* swatch sibling de-emphasis, chip border */ --dur: 600ms; /* primary action, panel borders, chevron */ --dur-slow: 700ms; /* entry rise, schedule reveal */ --dur-invite: 900ms; /* slider self-open invitation */ --dur-marquee: 60s; /* footer material marquee */ /* ── Configurator geometry (swatch geometry + chrome) ──────────────────── Sizes per the Phase-2b spec: 80 square (cabinets, splashback), 96×64 landscape 3:2 (worktop, flooring), 64 circle (walls), 8px gaps. */ --chrome-h: 59px; /* sticky chrome bar height */ --sw-square: 80px; /* cabinets, splashback */ --sw-land-w: 96px; /* worktop, flooring (3:2) */ --sw-land-h: 64px; --sw-circle: 64px; /* walls */ --sw-gap: 8px; /* swatch grid gap */ --sw-ring-offset: 3px; /* selected 1px ink ring offset */ --sw-hairline: rgba(25, 27, 21, 0.12); /* swatch tile border (0.12, not 0.11) */ --sw-dim: 0.62; /* unpicked siblings drop to this opacity */ --split-62: 62fr; /* the 62/38 column split */ --split-38: 38fr; /* ── Swatch fallback palette (used only when an option has no swatch_url — a derived solid, never a texture). Keyword → colour; consumed by configurator.js so no raw hex lives outside this file. */ --sw-fb-walnut: #5A4632; --sw-fb-oak: #C9A96A; --sw-fb-green: #8E9A7C; --sw-fb-navy: #2F3B4A; --sw-fb-clay: #B5643C; --sw-fb-brass: #B08D57; --sw-fb-grey: #9C9A96; --sw-fb-stone: #E4E0D6; --sw-fb-tile: #DAD3C6; --sw-fb-black: #2A2A28; --sw-fb-white: #EDEAE1; --sw-fb-greige: #C7BEAD; --sw-fb-blue: #8FA3B3; /* pale/zellige blues — bathroom catalogue */ --sw-fb-neutral: #CFC9BE; /* colour_family 'neutral' (e.g. matching finishes) */ --sw-fb-default: #CFC9BE; /* ── Grain ───────────────────────────────────────────────────────────── */ --grain-size: 140px; --grain-opacity: 0.04; /* ── Slider placeholder tones ──────────────────────────────────────────── Flat stand-ins shown only until the real before/after photographs are dropped at /assets/img/slider-{before,after}.jpg. --before is taken verbatim from the prototype's flat "before" panel. Safe to delete once real imagery is in place. */ --slider-placeholder-before: #B9BFB2; --slider-placeholder-after: var(--ground-shade); /* Primary-action locals (set on hover, not inherited — declared for clarity) */ --rule: 88px; --nudge: 0px; }