/* ========================================================================== MS&B Inc — design tokens -------------------------------------------------------------------------- Everything above the ADDED IN PORT fence is copied VERBATIM from the Claude Design system at _ds/msb-inc-design-system-7c85e6fc-28ba-4d32-b97b-4be6ad8c4112/tokens/ Do not edit those blocks. If the design is re-synced, replace them wholesale. This is the ONLY file in the theme permitted to contain a colour literal. main.css is policed by a pre-deploy grep; see docs/decisions/0002. ========================================================================== */ /* ===== DS: tokens/colors.css @ verbatim ===== */ :root{ /* Navy — primary brand family */ --navy-950:#0b1523;--navy-900:#101d2c;--navy-800:#16273e;--navy-700:#1f3350;--navy-600:#2b4468;--navy-100:#e6ebf1; /* Slate & silver — from the MS/MSB wordmark */ --slate-500:#75838a;--silver-400:#a6aaaf; /* Neutrals */ --grey-25:#fbfcfc;--grey-50:#f7f8f9;--grey-100:#eef0f2;--grey-200:#dfe3e6;--grey-300:#c3c9ce;--grey-400:#9aa3aa;--grey-500:#6c7780;--grey-600:#4a545c;--grey-700:#2e363d; /* Accent — the odd red highlight */ --red-700:#a30d26;--red-600:#c8102e;--red-100:#fbe7ea; /* Semantic aliases */ --surface-page:#ffffff;--surface-paper:var(--grey-50);--surface-navy:var(--navy-800);--surface-navy-deep:var(--navy-900);--surface-card:#ffffff; --text-heading:var(--navy-900);--text-body:var(--grey-600);--text-muted:var(--grey-400);--text-on-navy:#e9edf1;--text-on-navy-muted:#9fb0c2;--text-accent:var(--red-600); --border-hairline:#e3e7ea;--border-strong:var(--grey-300);--border-on-navy:rgba(255,255,255,0.14); --accent:var(--red-600);--accent-hover:var(--red-700); --link:var(--navy-700);--link-hover:var(--red-600); } /* ===== DS: tokens/typography.css @ verbatim (@import removed — see assets/css/fonts.css) ===== */ :root{ --font-display:'Playfair Display',Georgia,'Times New Roman',serif; --font-body:'Archivo','Helvetica Neue',Arial,sans-serif; /* Scale */ --text-display-xl:64px;--text-display:48px;--text-h1:40px;--text-h2:32px;--text-h3:24px;--text-h4:19px;--text-body-lg:18px;--text-body-md:16px;--text-sm:14px;--text-caption:12px; /* Leading */ --leading-display:1.08;--leading-heading:1.2;--leading-body:1.65; /* Eyebrow / caps label */ --tracking-caps:0.16em;--weight-caps:600; } /* ===== DS: tokens/spacing.css @ verbatim ===== */ :root{ --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px; --container-max:1200px;--container-pad:32px; /* Corners are square. Radius exists only for tiny UI affordances. */ --radius-0:0px;--radius-sm:2px; } /* ===== DS: tokens/effects.css @ verbatim (bare `a` rules moved to main.css base) ===== */ :root{ --shadow-card:0 1px 2px rgba(16,29,44,0.06); --shadow-lift:0 12px 32px -8px rgba(16,29,44,0.18); --ease-brand:cubic-bezier(0.4,0,0.2,1); --dur-fast:150ms; --dur-med:300ms; /* Hatch texture retired — kept as no-op tokens for compatibility */ --hatch-light:none; --hatch-on-navy:none; } /* ══════════════════════════════════════════════════════════════════════════ ADDED IN PORT — everything below is ours, not the design system. Every addition is justified in docs/design-source-notes/divergences.md. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* The design system inlines these four rgba() literals inside components. Promoting them to tokens is what makes the "no colour literal in main.css" grep gate enforceable. Values are unchanged from the source. */ --overlay-on-navy-hover:rgba(255,255,255,0.10); /* Button onDark hover, ServiceCard onDark hover */ --overlay-on-navy-field:rgba(255,255,255,0.06); /* Input / Textarea / Select / Checkbox onDark bg */ --overlay-backdrop:rgba(11,21,35,0.55); /* PDF reader modal scrim over the matter page */ --border-on-navy-strong:rgba(255,255,255,0.40); /* Button onDark border, Checkbox onDark border */ --border-on-navy-field:rgba(255,255,255,0.25); /* Input / Textarea / Select onDark resting border */ /* The ampersand in the reverse wordmark. No CSS reads this any more — the reverse mark is a vector and carries the value itself, as fill="#ffffff" with fill-opacity="0.45". Kept as the written-down source of that number, so a rebuilt mark and this file cannot quietly disagree. The reverse B is --grey-300, pitched between the reverse M (--silver-400) and S (--text-on-navy). It has been --red-600 and a light blue in earlier revisions; it is grey now, and neither of those should return. */ --wordmark-amp-on-navy:rgba(255,255,255,0.45); /* The hero scrim, authored as a literal gradient in pages/home.jsx. */ --scrim-navy:11,21,35; /* --navy-950 as an rgb triplet */ /* Selection colour inside the PDF reader's text layer. The layer's own text is transparent — it sits invisibly on top of the rastered page so that selecting and Ctrl+F work — which means the browser's default selection highlight is the ONLY thing that shows what has been selected. The default is tuned for dark text on white and is close to invisible over a page image, so it is lifted here. Alpha rather than a solid, or it would hide the very words it is meant to be highlighting. */ --reader-selection:rgba(200,16,46,0.28); /* --red-600 at 28% */ /* ACCESSIBILITY DIVERGENCE — the one token whose VALUE we changed. The design's --text-muted (#9aa3aa) measures 2.40:1 on --surface-paper, a serious WCAG AA failure. It is used for ProfileCard contact lines, ArticleCard meta, team credentials and the services sidebar eyebrow. --grey-500 (#6c7780) is 4.29:1 — also a fail. #5f6a72 is 5.19:1. The design value is retained below for reference and for the parity page. */ --text-muted-design:#9aa3aa; --text-muted:#5f6a72; /* ACCESSIBILITY DIVERGENCE — the second changed value, same failure mode. The design system carries ONE accent red and uses it on both surfaces. --red-600 (#c8102e) measures 2.89:1 on --surface-navy-deep and 2.56:1 on --surface-navy — both WCAG AA failures, and both at the 12px uppercase size used for the eyebrows, the footer role line and the on-navy article category. A red that reads on white cannot also read on navy; it has to be lifted. The question is only which direction it moves while lifting. This value was first derived by raising HSL lightness at a fixed HSL hue (#e36d80: same 350° hue, L 42%→66%). HSL hue is not perceptual, so that lift dragged the colour sideways as well as up — in OKLCH it landed at hue 11.8° against the brand red's 22.3°, and chroma collapsed from 0.207 to 0.147. Lower hue is toward magenta and lower chroma is toward grey, which is precisely the recipe for pink. It read as a different colour from the brand red rather than a lighter one. Re-derived in OKLCH instead, holding BOTH of the attributes that carry hue identity and moving only the one that carries contrast: --red-600 L 0.530 C 0.207 h 22.3° this token L 0.668 C 0.207 h 22.3° Same perceptual hue, same chroma, lightness raised to the minimum that clears AA. #fb4f57 measures 4.56:1 on --surface-navy, 5.15:1 on --surface-navy-deep and 5.55:1 on the hero scrim (--scrim-navy at 0.95). Applied ONLY to text — the decorative red rules and card borders on navy stay --red-600, since WCAG contrast minima do not apply to them and the brand red is the point. Light surfaces are untouched: on white and paper every red highlight is still --red-600 at 5.88:1 and 5.53:1. */ --text-accent-on-navy:#fb4f57; /* ACCESSIBILITY DIVERGENCE — the third, and the last colour value we change. The 01–04 numerals are set in --silver-400 (#a6aaaf): 2.36:1 on white and 2.20:1 on paper. They are not decoration — they are the anchor identity of each practice area, the thing the sidebar and the old site's inbound #01–#04 links both point at, so a sighted user has to be able to read them. #6d7279 is the same hue at 4.85:1 on white and 4.56:1 on paper. ONE token, not one per size. The services page shows the small sidebar numeral and the large body numeral side by side; a brand device that renders in two different greys on the same screen reads as a bug, and the large one clearing 3:1 while the small one needs 4.5:1 is not a difference anyone looking at the page can see the sense of. The wordmark keeps --silver-400 throughout. WCAG 1.4.3 exempts logotypes, and the mark is the one place the design's silver is load-bearing. */ --numeral:#6d7279; /* DISPLAY FACE OVERRIDE — Libre Bodoni, on the client's instruction. Applies to every heading, the wordmark and the practice numerals. This deliberately does NOT edit the verbatim typography block above, even though that is where --font-display is defined and editing it there would be one line instead of six. The DS block carries a re-sync contract: if the design system is re-exported, that block is replaced wholesale. An edit made inside it is silently reverted by the next sync, and the symptom — the entire site quietly reverting to Playfair — would show up as a rendering change nobody made, with nothing in the diff to explain it. Overriding below the fence survives a re-sync in both directions. The design system still specifies Playfair Display as of this change; the client is updating it to match. WHEN THAT LANDS: re-sync the DS block, then DELETE this override rather than leaving both in place — two sources for one family is how they drift apart. Fallbacks are a Didone ladder, not the design's Georgia-first one: Didot ships on macOS and Bodoni MT on Windows, so a failed webfont load degrades to a high-contrast serif of the same character rather than to a transitional one. Georgia and Times remain as the final rungs. */ --font-display:'Libre Bodoni',Didot,'Bodoni MT',Georgia,'Times New Roman',serif; /* Layout constants the design hard-codes per-section. */ --msb-header-h:72px; --msb-reveal-dur:550ms; --msb-reveal-y:18px; /* Focus ring. The design system has NO focus state on any component and the Checkbox has none at all — its real input is opacity:0 at zero size. */ --msb-focus:var(--red-600); --msb-focus-on-navy:var(--text-on-navy); } @media (max-width:640px){ :root{ --msb-header-h:60px; --container-pad:20px; } }