/* ============================================================ CL tokens.css — SINGLE SOURCE OF TRUTH (v6.17.0) Palette + fonts. Swap hex here only; every page inherits. Palette direction: Celine's homepage mockup (Action Plan, Jun 17). Exact hex pending her Google Slides deck -> v6.18. ============================================================ */ /* ---- v2.0.0 self-hosted web fonts ------------------------------- Was: two s per page to fonts.googleapis.com + fonts.gstatic.com. Now: local woff2 in assets/fonts/, so no third-party DNS/TLS on the critical path and no Google request carrying the visitor's IP. The weight set below is MEASURED, not guessed — every rendered (family, weight, style) pair across all 8 pages in both languages was enumerated before choosing. Three corrections came out of that: · Cormorant and Lato italics were USED but never LOADED — every italic on the site was a browser-synthesized oblique. Real italic faces are now shipped (Mat's call, 2026-08-05). · Dancing Script loaded 500+600 and used NEITHER (the CSS asked for 300, which resolved to 500). Since REMOVED entirely — the site consolidated onto Mrs Saint Delafield as its only script family later in v2.0.0. See --font-script below. · Lato 600 does not exist — Google ships 100/300/400/700/900, so .svc-banner-lead and .offer-link always rendered 700. CSS now says 700, which is what was always painted. Cormorant Garamond is VARIABLE: one file covers the whole weight range (verified by measuring rendered widths per weight). Lato is static, one file per weight. Mrs Saint Delafield is a single 400 face — there is no other weight to ask for. Only the `latin` subset is shipped — all 212 i18n strings in both languages were scanned and none need latin-ext. The only characters outside it are emoji on the held /gallery/ page, which render from the system emoji font regardless. */ @font-face{ font-family:'Cormorant Garamond'; src:url('/assets/fonts/cormorant-garamond-var.woff2') format('woff2-variations'), url('/assets/fonts/cormorant-garamond-var.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:block; } @font-face{ font-family:'Cormorant Garamond'; src:url('/assets/fonts/cormorant-garamond-italic.woff2') format('woff2-variations'), url('/assets/fonts/cormorant-garamond-italic.woff2') format('woff2'); font-weight:300 700; font-style:italic; font-display:block; } @font-face{ font-family:'Lato'; src:url('/assets/fonts/lato-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:block; } @font-face{ font-family:'Lato'; src:url('/assets/fonts/lato-300i.woff2') format('woff2'); font-weight:300; font-style:italic; font-display:block; } @font-face{ font-family:'Lato'; src:url('/assets/fonts/lato-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:block; } @font-face{ font-family:'Lato'; src:url('/assets/fonts/lato-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:block; } @font-face{ font-family:'Mrs Saint Delafield'; src:url('/assets/fonts/mrs-saint-delafield.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:block; } /* ---- v6.18.1 anti-FOUC fallbacks -------------------------------- The web fonts load with display=swap. Before they arrive, text was rendering in Georgia/Arial — WIDER than Cormorant — so the nowrap hero lines overflowed on first paint, then snapped smaller when the real font swapped in. These fallback faces render the system fallback at metric-matched widths so first paint ≈ final width: no visible resize. ── TO TUNE (Mat): if the hero still nudges on load, adjust size-adjust below. Lower % = narrower first paint. Cormorant is the one that matters. */ @font-face{ font-family:'CormorantFallback'; src:local('Georgia'),local('Times New Roman'); size-adjust:88%; /* shrink Georgia toward Cormorant's narrower width */ ascent-override:95%; descent-override:24%; line-gap-override:0%; } @font-face{ font-family:'LatoFallback'; src:local('Arial'),local('Helvetica Neue'); size-adjust:97%; } :root { /* Watercolour palette (mockup-derived placeholders) */ --cream: #F5ECE4; /* warm ivory base */ --lavender-mist: #E9ECE6; /* pale lilac mist */ --white: #ffffff; --purple: #8E7CB6; /* soft amethyst (primary) */ --purple-deep: #5C4A86; /* deep amethyst */ --indigo: #7C8BA8; /* dusty blue */ --blue: #6E8B82; /* muted teal-blue */ --blue-electric: #849E96; /* sage / eucalyptus accent */ --magenta: #B58AA6; /* dusty rose accent (softened) — DECORATION ONLY, see below */ /* v2.2.0 — --rose-ink is --magenta's readable twin, and it exists because --magenta was being used as TEXT. Measured on 2026-08-19: #B58AA6 on white is 2.94:1, which fails WCAG 2.1 AA (4.5:1) for normal text, and it was carrying .section-eyebrow — 27 elements across 7 pages — plus .service-meta and .o-sub, all at 12-13px uppercase. Small, light, letterspaced and low-contrast at once. #7D5469 measures 6.29:1 on white and 5.39:1 on --cream, so it passes AA on both surfaces the site actually uses, with headroom. It is the same hue family, just taken down in value, so her palette still reads as hers. RULE: --magenta for decoration (rules, borders, the big quote glyph). --rose-ink for anything a person has to READ. Do not put --magenta back on text. */ --rose-ink: #7D5469; /* dusty rose, AA-safe for text: 6.29:1 on white */ --starlight: #F6EEDD; /* warm pale glow */ /* Confirmed brand exception (Jun 18) — hero CTA button only. Rest of palette still unlocked (8 narrowed to 5, not locked). */ --vert-sauge: #A1ADA6; /* Vert Sauge — original sage (kept for reference) */ --vert-sauge-light: #B7CBAA;/* v1.5.1 — lighter, fresher sage for the primary CTA fill. Dark plum text (--on-vert-sauge) = 8.6:1 contrast → WCAG AAA. */ --vert-sauge-deep: #5F6B63;/* deep sage for hover (white text → AA) */ --on-vert-sauge: #2E2B3F; /* deep plum-charcoal text → WCAG AA on sage */ --ink: #44415A; /* soft plum-grey text */ --ink-soft: #6B6584; /* secondary text */ /* ---- v1.9.2 — hero mockup colours ----------------------------------- Sampled directly out of Celine's hero mockup (new-ppt-pics/image12.png), from the glyph and fill interiors, not estimated. HOME HERO ONLY — the sitewide button palette above is untouched. Do NOT substitute --vert-sauge-deep (#5F6B63) for the green: it is a grey-sage and reads noticeably duller than her forest green. CONTRAST: the two fills carry small white uppercase labels, so the WCAG AA floor is 4.5:1. As sampled off the mockup they were #707C68 (4.40:1) and #7E729B (4.40:1) — both FAILING. Each has been darkened along its own hue (uniform 0.974x on RGB, hue shift under 1.5 degrees) to the values below. Measured white-on-fill: green 4.64:1, purple 4.60:1. Keep any future edit at or above 4.6:1 — do not lighten the label or fake it with a text-shadow. */ --vert-foret: #334436; /* headline line 1, signature, role line (8.91:1 on cream) */ --purple-mockup: #6B5E8A; /* headline line 2, flourish (5.01:1 on cream) */ --btn-green: #6D7865; /* primary CTA fill — white label 4.64:1 (mockup #707C68) */ --btn-purple: #7B6F97; /* secondary CTA fill — white label 4.60:1 (mockup #7E729B) */ --font-display: 'Cormorant Garamond', 'CormorantFallback', Georgia, serif; --font-body: 'Lato', 'LatoFallback', -apple-system, BlinkMacSystemFont, sans-serif; /* v2.0.0: consolidated onto ONE script family. Dancing Script is gone — it was the largest font file on the site (42,708 B, on every page) and carried only the footer signoff. Mrs Saint Delafield was already loading on home for the hero signature and is 18,812 B, so this drops 42.7KB from home and 23.9KB from every other page. MSD ships ONE weight (400). Do not ask for 500 here — it has no 500 face and would snap to 400. (Cormorant Garamond IS variable 300-700 and does have a real 500; that is why the v2.2.0 testimonial quotes could take Lukas's 500 and Lato-set text could not.) v2.2.0: the footer signoff this note pointed at has been removed. */ --font-script: 'Mrs Saint Delafield', cursive; /* Available alternates (Celine named Georgia/Trebuchet; Cormorant is the active main) */ --font-alt-georgia: Georgia, 'Times New Roman', serif; --font-alt-trebuchet: 'Trebuchet MS', 'Segoe UI', sans-serif; /* v1.9.0/v1.9.1 — HERO OVERLAY FONTS (headline / signature / role / buttons are all layered over the banner, never baked into it). Georgia + Trebuchet for now, per the 2026-07-30 meeting; the signature uses a true script face per her mockup. ── TO SWAP (Mat): when Celine sends the family + weight she wants matched to the new hero art, change these THREE lines only. NOTE: the script face is requested in index.html ONLY (the signature is the sole user). If you would rather reuse the sitewide script face, set --hero-ov-font-script to var(--font-script) and drop the family from that link. */ /* v1.9.2 — was var(--font-alt-georgia), a 2026-07-30 placeholder picked before anyone had seen image12.png. Her mockup headline is a high-contrast Garamond-style serif, so this now points at Cormorant Garamond, which is already loaded sitewide. Revert this ONE line to var(--font-alt-georgia) to undo; nothing else in the hero depends on it. */ --hero-ov-font-display: var(--font-display); --hero-ov-font-body: var(--font-alt-trebuchet); /* v1.9.4 — was 'Alex Brush', which was structurally wrong: her signature is MONOLINE (near-uniform stroke) and Alex Brush is a brush script with pronounced thick-to-thin contrast, which is why it read as "not even close". Shortlisted the monoline scripts on Google Fonts, rendered "Céline Lafrance" in each at a cap height matched to hers, and compared. Mrs Saint Delafield won on both the visual criteria (monoline, fine tapering terminals, very small lowercase against large capitals, long sweeping entry/exit strokes) and on the numbers: signature ink width / cap height is 6.4 against her 6.61. Runners-up were Herr Von Muellerhoff (5.3, too narrow and very fine) and Miss Fajardose (5.5, too ornate). CAVEAT: her mockup is AI-generated, so the letterforms may not correspond to any real font, and Céline still owes the family and weight. This is a best-effort match. ── ONE LINE TO SWAP when she answers. Since v2.0.0 the fonts are self-hosted, so swapping also means putting the new woff2 in assets/fonts/, updating its @font-face at the top of this file, and updating the preload in the page s. v2.0.0: this now just points at --font-script — the site consolidated onto MSD as its single script family. v2.1.0 made the hero signature her own artwork and v2.2.0 removed the footer signoff, so this variable no longer drives anything visible; MSD's only remaining use is .approach-signature. Kept as the swap point. */ --hero-ov-font-script: var(--font-script); --shadow-soft: 0 4px 20px rgba(92, 74, 134, 0.08); --shadow-md: 0 10px 40px rgba(92, 74, 134, 0.12); --shadow-lg: 0 20px 60px rgba(92, 74, 134, 0.18); --shadow-glow: 0 0 40px rgba(142, 124, 182, 0.22); --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; /* Hero vertical spacing between elements — TUNE THIS ONE VALUE (Mat) */ --hero-gap: 20px; --header-h: 70px; }