/* =================================================================== * Ludus Technology — landing site theme layer * * Loads after lds.css and does exactly two jobs: * * 1. Overrides the LDS brand ramp with the Ludus Technology blue. The * agency application keeps the LDS indigo; only this site is blue, * because the public mark is blue. Nothing else about the brand is * redefined — every button, link, focus ring and border still reads * its colour from the LDS semantic tokens, which point at the ramp. * * 2. Bridges the variable names the page CSS already uses (--blue-60, * --text-dim, --space-6 …) onto LDS tokens, so the markup and layout * are untouched while the values become the design system's. * * Adding new CSS to a page? Use the --lds-* token directly. The aliases in * section 2 exist to carry the pages that predate the design system, not as * a second naming convention. * =================================================================== */ /* --- 1. Brand ramp override ------------------------------------------ * Verified against the two structural requirements in lds/Getting Started/ * Brand.md, computed 2026-09-02 with the LDS contrast maths: * step 60 #0672CB on #FFFFFF = 4.91:1 (needs >= 4.5:1) * step 40 #31A2E3 on dark page = 6.37:1 (needs >= 4.5:1) * white label on step 60 fill = 4.91:1 (needs >= 4.5:1) * Step 30 did not exist in the site palette and is interpolated between * 20 and 40. It is a tint only, so it carries no contrast floor. * * Step 10 is lightened from the site's original #D9F5FD, which put brand text * on a brand-subtle surface (a badge, a nav item) at 4.31:1 and failed AA. * At #EAFAFE that pair computes 4.58:1. The tint sits 1.07:1 against the white * page, which is where the LDS default step 10 sits too (1.13:1) — step 10 is * meant to be barely-there. */ :root { --lds-indigo-10: #EAFAFE; --lds-indigo-20: #94DCF7; --lds-indigo-30: #62BFED; --lds-indigo-40: #31A2E3; --lds-indigo-50: #1282D6; --lds-indigo-60: #0672CB; --lds-indigo-70: #0063B8; --lds-indigo-80: #00468B; --lds-indigo-90: #002A58; } /* The dark themes hold four brand tokens as literal rgb() rather than as ramp references, so overriding the ramp does not reach them. Restated here in the site's blue: 6 114 203 is step 60, 18 130 214 is step 50. Both dark selectors are covered, so an OS preference and an explicit data-theme agree. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lds-bg-brand-subtle-rest: rgb(6 114 203 / 0.16); --lds-bg-brand-subtle-hover: rgb(6 114 203 / 0.24); --lds-bg-brand-subtle-pressed: rgb(6 114 203 / 0.32); --lds-border-brand-subtle: rgb(18 130 214 / 0.32); } } :root[data-theme="dark"] { --lds-bg-brand-subtle-rest: rgb(6 114 203 / 0.16); --lds-bg-brand-subtle-hover: rgb(6 114 203 / 0.24); --lds-bg-brand-subtle-pressed: rgb(6 114 203 / 0.32); --lds-border-brand-subtle: rgb(18 130 214 / 0.32); } /* --- 2. Legacy alias bridge ------------------------------------------ */ :root { /* Brand and neutral steps still referenced directly by page CSS. */ --blue-20: var(--lds-indigo-20); --blue-40: var(--lds-indigo-40); --blue-60: var(--lds-indigo-60); --blue-70: var(--lds-indigo-70); --blue-90: var(--lds-indigo-90); --gray-10: var(--lds-neutral-20); --gray-40: var(--lds-neutral-50); --gray-90: var(--lds-neutral-130); /* Semantic roles. */ --bg: var(--lds-bg-surface-primary); --surface: var(--lds-bg-surface-secondary); --surface-2: var(--lds-bg-surface-raised); --border: var(--lds-border-neutral-subtle); --text: var(--lds-text-primary); --text-dim: var(--lds-text-secondary); --text-faint: var(--lds-text-tertiary); --accent: var(--lds-text-brand-rest); --accent-strong: var(--lds-text-brand-hover); --shadow-color: var(--lds-neutral-50); --font: var(--lds-font-display); /* The LDS spacing scale is a superset of the one the pages used, and the eight values below are identical to their previous pixel values, so the layout does not move. */ --space-1: var(--lds-space-1); --space-2: var(--lds-space-2); --space-3: var(--lds-space-3); --space-4: var(--lds-space-4); /* --space-5 was referenced by contact.html and index.html but never defined, so those declarations were invalid and dropped by the browser. The LDS scale has the step, so the rules now apply as their author intended. */ --space-5: var(--lds-space-5); --space-6: var(--lds-space-6); --space-8: var(--lds-space-8); --space-10: var(--lds-space-10); /* --space-12 is used by contact.html; the LDS scale has the step. */ --space-12: var(--lds-space-12); --space-16: var(--lds-space-16); /* Section bands. Previously redeclared in every page; the definitions were identical, so they live here once. */ --band-hero: var(--lds-indigo-90); --band-how: var(--lds-bg-surface-primary); --band-values: var(--lds-bg-surface-secondary); --band-control: var(--lds-indigo-90); --band-cta: var(--lds-bg-surface-primary); } /* --- 3. Shared page furniture ---------------------------------------- */ .band { background: var(--band-color, transparent); } /* A band that paints itself with the deepest brand step and therefore needs the dark-mode end of the neutral ramp for its text. Ratios on #002A58: primary 13.67:1, secondary 9.65:1, tertiary 5.57:1, eyebrow 9.40:1. */ .band-on-dark { --text: var(--lds-neutral-10); --text-dim: var(--lds-neutral-40); --text-faint: var(--lds-neutral-50); --border: var(--lds-indigo-80); --shadow-color: var(--lds-neutral-140); } .band-on-dark .eyebrow { color: var(--lds-indigo-20); } .band-on-dark .eyebrow::before { background: var(--lds-indigo-20); } /* --- 4. The dark page ------------------------------------------------ * coming-soon.html is a single full-bleed brand band rather than a light page * with dark sections, so it declares data-theme="dark" and picks up the LDS * dark token set wholesale. Only the border needs correcting: the neutral * dark border is a grey hairline, which reads as dirt on a blue field. */ :root[data-theme="dark"] { --border: var(--lds-indigo-80); --shadow-color: var(--lds-neutral-140); }