/* Wykeham colour system — canonical. Supersedes the earlier four-value navy palette. #0F1B2D and #1E3A5F are retired and must not appear anywhere in the system. Two blocks live here: · BRAND — referenceable. Carbon, graphite, paper, azure band, copper. · FIELD — imagery only, deliberately NOT declared as custom properties. See the note at the foot of this file. Two values cross between the blocks, in opposite directions: · Copper is a brand accent that is also a field hue — never a ground. · Azure is a field hue that is also a brand ground — never an accent. Not a rule, not a link, not a button, not a numeral, not a card fill, not a text colour. */ :root{ /* ── brand palette ────────────────────────────────────────── */ --wyk-carbon:#0C0A09; /* the dark ground: hero, thesis band, closing block */ --wyk-graphite:#24201D; /* second dark: mesh linework on light, dark card fills */ --wyk-paper:#F4F1EC; /* the page */ --wyk-copper:#C2652A; /* the only interface accent */ /* ADDED FOR SITE BUILD — accessibility pass, 14 October 2026 (client). THE COPPER RAMP NOW HAS THREE STEPS, AND WHICH ONE YOU WANT DEPENDS ON WHETHER TEXT IS INVOLVED. Measured on paper #F4F1EC: --wyk-copper #C2652A 3.59:1 rules, borders, the chevron, the focus ring. NEVER text, never a ground under text. 3.59 clears the 3:1 that 1.4.11 asks of a non-text UI boundary, and nothing more. --wyk-copper-deep #9F5322 4.99:1 copper that MEETS text — either as the ink, or as the ground beneath paper-coloured ink (4.99 with paper on it, 5.62 with white). --wyk-copper-pressed #8C491E 6.04:1 press state only, one step below deep so a press still reads. The hue and saturation are the brand's, held exactly: all three are HSV 23.3deg / 0.784 with only the value stepping down, so this is the same copper darkened, not a second hue. Before this, filled buttons were #C2652A under paper ink at 3.59:1 — below AA on 34 pages — and every arrow glyph, caret and 'Choose file' was #C2652A ink on paper at the same 3.59. */ --wyk-copper-deep:#9F5322; --wyk-copper-pressed:#8C491E; /* press state only — see the ramp note above */ /* ADDED FOR SITE BUILD — AAA pass, 15 October 2026 (client instruction), revised the same day. ONE more step on the SAME ramp, for the exhibit data labels on the exhibit greys. Holds the ramp's discipline: HSV 23.3deg / 0.784, value only. --wyk-copper-aaa #6B3817 HSV 23.6 / 0.785 7.57:1 on #E5E5E5 (the darker exhibit grey, the binding ground) — 8.1% clear of the 7:1 AAA target 8.36:1 on #F0F0F0 · 9.53:1 on white · 8.46:1 on paper The pressed step measured 5.39 on #E5E5E5 — AA, never AAA. It was #703A18 for part of 15 October, which measured 7.23:1 on the binding ground — over 7:1, but only 3.3% over, and the client counts anything inside 5% as not done. One more value step buys 8.1%. THERE IS NO on-carbon COPPER STEP, and #F27E34 is RETIRED. It existed for a few hours because AAA on carbon cannot be reached by darkening copper (the brand copper is 4.88:1 there, the deep step 3.51), so the only copper that clears 7:1 on carbon is a much lighter orange — which read as a different ink. The client's decision, 15 October: the exhibit header strips take PAPER text at 17.5:1, and the brand copper stays on those strips as the accent RULE only, never as type. Do not reintroduce a copper-on-carbon text step; the answer to "copper on a dark ground at text size" is that it is not copper. It is the answer to "copper as TEXT that has to clear 7:1 on a light ground", and it was called --wyk-copper-exhibit for part of 15 October because the exhibit numerals were the only known caller. The footer's "LinkedIn ->" arrow turned out to be a second one (--text-link, 4.99:1 on paper: AA, never AAA), so the name was corrected rather than left to lie about its scope — the same reason navy-900 was renamed when it held a near-black. Still not a general-purpose accent: it is dark enough to read as a different ink beside --text-link in running prose. Reach for it only where copper type has to clear 7:1. */ --wyk-copper-aaa:#6B3817; /* ── azure band · three variants, one active ──────────────── */ --wyk-azure-base:#4684C8; /* the hue, shared by all three */ /* v1 — flat tint, 34% */ --wyk-azure-v1:#C0D5EC; /* v2 — saturated wash over the base */ --wyk-azure-v2-dark:#5C93CF; /* wash at 12% — far edge */ --wyk-azure-v2-light:#C0D5EC; /* wash at 66% — reading edge */ --wyk-azure-v2-wash:linear-gradient(100deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.58) 34%, rgba(255,255,255,.34) 68%, rgba(255,255,255,.12) 100%); /* v3 — azure mesh on light azure ground */ --wyk-azure-v3-ground:#E5EEF7; /* 14% tint, mesh sits on this */ /* v4 — the Home design's band, as HomeFinalTail draws it: a 112° five-stop gradient, a 17px dot lattice in the base hue masked toward the right, a 9px indigo lattice masked into the top-right corner, and a white bloom at the top-left. Client decision, 10 September 2026 (punch-list item 2). Home's .sectorband composes these four; --surface-band stays the flat v1 for every other use. Literal strings — they do not follow the base hue. */ /* Direction is the client's (10 September 2026): the design runs the ramp at 112°, white at the left; the site runs it top-down, azure at the head and white at the foot, so the band hands off into the white evidence panel beneath it. Same five stops, reversed. The bloom moves to the white end. */ --wyk-azure-v4-ground:linear-gradient(180deg, #A9CCEC 0%, #C9DEF4 40%, #EDF4FC 80%, #FFFFFF 100%); /* the design's deepest stop (#8FBEE8) dropped: too dark at the head, client, 10 Sept 2026 */ --wyk-azure-v4-mesh-a:radial-gradient(circle at center, rgba(70,132,200,.60) 0 1.1px, rgba(70,132,200,0) 1.7px); --wyk-azure-v4-mesh-a-size:17px; --wyk-azure-v4-mesh-a-mask:linear-gradient(100deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.30) 56%, rgba(0,0,0,.85) 92%); --wyk-azure-v4-mesh-b:radial-gradient(circle at center, rgba(59,79,168,.42) 0 .9px, rgba(59,79,168,0) 1.3px); --wyk-azure-v4-mesh-b-size:9px; --wyk-azure-v4-mesh-b-mask:radial-gradient(66% 58% at 90% 20%, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 74%); --wyk-azure-v4-bloom:radial-gradient(58% 64% at 10% 96%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 72%); /* active selection — switch this one line to change the band */ --wyk-azure-band:var(--wyk-azure-v1); /* ── alpha derivations (structure only, never decoration) ── Recalculated from carbon rgb(12,10,9) and paper rgb(244,241,236). These are literal rgba() strings: they do NOT follow a change to the base hex above. If a base value ever moves again, every line here has to move with it. */ --wyk-carbon-04:rgba(12,10,9,.04); /* ADDED FOR SITE BUILD — article exhibits (handoff of 26 September 2026). The exhibit palette needs three steps the scale did not carry: .05 behind the second layer of each Exhibit 2, .06 on row-label columns, and .72 for the units line and footnote body, which the handoff sets one step darker than --text-muted (.64). */ --wyk-carbon-05:rgba(12,10,9,.05); --wyk-carbon-06:rgba(12,10,9,.06); --wyk-carbon-72:rgba(12,10,9,.72); --wyk-carbon-08:rgba(12,10,9,.08); --wyk-carbon-12:rgba(12,10,9,.12); /* ADDED FOR SITE BUILD — polish pass 2 (handoff, 13 October 2026). The overlapping white panels introduced on Home and Private Equity draw their border at .14: one step firmer than the .12 hairline, because the panel sits on paper rather than inside a section and its edge has to read as an edge. The design files use it six times. */ --wyk-carbon-14:rgba(12,10,9,.14); /* ADDED FOR SITE BUILD — polish pass 2 (handoff, 13 October 2026). The Newsreader 22 subheading that now opens How we work and every practice row sits at .82: a step down from full carbon so it reads under the heading, but well above the .72 body it introduces. */ --wyk-carbon-82:rgba(12,10,9,.82); /* ADDED FOR SITE BUILD — accessibility pass, 14 October 2026 (client: AAA 7:1 for body and supporting text). .64 was the muted step and measured 5.80:1 on paper, 6.06 on a white card, and 4.96 at the darkest point of Home's azure band — AA everywhere, AAA nowhere. .78 is the first step that clears 7:1 on EVERY ground the site puts it on, with margin: paper #F4F1EC 9.62:1 white card 10.34:1 azure v1 #C0D5EC 8.00:1 azure v3 #E5EEF7 9.38:1 azure v4 head 7.50:1 <- the binding constraint, Home's band head The thresholds are .695 on paper and .760 on that azure head, so .78 is chosen for headroom rather than to just scrape it. Full carbon is 17.54:1, so supporting text still reads a clear step lighter than a heading. */ --wyk-carbon-78:rgba(12,10,9,.78); --wyk-carbon-16:rgba(12,10,9,.16); --wyk-carbon-40:rgba(12,10,9,.40); /* ADDED FOR SITE BUILD — Careers open-roles pages (handoff, 10 October 2026). Four steps the scale did not carry: .28 the form control rule at rest, .34 the "No file chosen" placeholder, .48 the index heading's count, and .84 the role-page prose, which the handoff sets one step darker than --text-muted (.72). */ --wyk-carbon-28:rgba(12,10,9,.28); --wyk-carbon-34:rgba(12,10,9,.34); --wyk-carbon-48:rgba(12,10,9,.48); --wyk-carbon-84:rgba(12,10,9,.84); /* --- ADDED FOR SITE BUILD (2026 redesign) --- The card hover rule. Every hoverable card in the design files darkens its hairline to carbon at 32% (`border-color:rgba(12,10,9,.32)`, 40+ declarations) — a step up from the 12% hairline, well short of the solid carbon rule the build had been using, which reads as black. */ --wyk-carbon-32:rgba(12,10,9,.32); --wyk-carbon-64:rgba(12,10,9,.64); --wyk-graphite-24:rgba(36,32,29,.24); --wyk-paper-16:rgba(244,241,236,.16); --wyk-paper-24:rgba(244,241,236,.24); --wyk-paper-64:rgba(244,241,236,.64); /* ADDED FOR SITE BUILD — accessibility pass, 14 October 2026. .64 paper is 7.39:1 on flat carbon, which clears 7:1 — but the closing band and the sector heroes put it over a FIELD, and measured over those it fell to 6.56:1. .72 holds 9.17:1 on flat carbon and stayed above 7:1 at every sampled point of every field. */ --wyk-paper-72:rgba(244,241,236,.72); --wyk-paper-80:rgba(244,241,236,.80); --wyk-paper-86:rgba(244,241,236,.86); /* ADDED — closing-band body copy */ --wyk-copper-12:rgba(194,101,42,.12); /* ── semantic: surfaces ──────────────────────────────────── */ --surface-page:var(--wyk-paper); --wyk-white:#FFFFFF; /* true white — exhibit ground and header text on carbon */ --surface-card:var(--wyk-white); /* card on paper: one step up */ --surface-inset:var(--wyk-carbon-04); --surface-dark:var(--wyk-carbon); --surface-dark-alt:var(--wyk-graphite); --surface-band:var(--wyk-azure-band); /* the azure band — a ground, never an accent */ /* --- ADDED FOR SITE BUILD (2026 redesign) --- The service pages' "What we do" band. The design draws it on #E5EEF7 with an azure streak field over it — which is the v3 variant above, "azure mesh on light azure ground", by definition. It is a second band, not a second colour: v1 stays the Home band, v3 is this one. */ --surface-band-light:var(--wyk-azure-v3-ground); /* --- ADDED FOR SITE BUILD (2026 redesign) --- The offset plate behind an About image: a flat shape the photograph sits on top of, peeking out at one corner. A ground, which is why azure is allowed to take it — it carries no text, no rule, no control, and nothing reads it as an accent. The azure plate is the saturated base hue, not the band tint, which is a different value for a different job. */ --surface-shape-azure:var(--wyk-azure-base); --surface-shape-accent:var(--wyk-copper); /* --- ADDED FOR SITE BUILD (2026 redesign) --- The home-page card hover ground. Declared here because it is used, not because it is a system ground: it is a HOME-PAGE TREATMENT and nothing else may reach for it. Cards elsewhere darken their rule instead. It is NOT the retired navy. #0F1B2D and #1E3A5F are gone; this is a separate slate drawn for this one interaction, and it was mistakenly mapped to graphite in an earlier pass. Graphite stays where it belongs — behind the photographs in the image wells. */ --surface-hover-home:#2A3450; /* ── semantic: text ──────────────────────────────────────── */ --text-display:var(--wyk-carbon); --text-body:var(--wyk-carbon); --text-muted:var(--wyk-carbon-78); --text-label:var(--wyk-carbon-78); --text-on-dark:var(--wyk-paper); --text-on-dark-muted:var(--wyk-paper-72); /* --- ADDED FOR SITE BUILD (2026 redesign) --- Softened, not muted. The designs set standfirsts and leads on dark grounds at .86 paper — clearly a step down from full paper, but well above the .64 muted role used for eyebrows and captions. Without this the two collapse onto .64 and every lead on a dark ground reads dimmer than drawn. Bound to --wyk-paper-80, which the design system already declares and nothing was using. 11.25:1 on carbon. */ --text-on-dark-soft:var(--wyk-paper-80); --text-on-band:var(--wyk-carbon); /* the band is light — carbon reads on it */ --text-on-band-muted:var(--wyk-carbon-78); --text-accent:var(--wyk-copper-deep); /* ── semantic: lines ─────────────────────────────────────── */ --line-hairline:var(--wyk-carbon-12); /* ADDED FOR SITE BUILD — 15 October 2026 (client). A FORM CONTROL's visible boundary, which 1.4.11 holds to 3:1 against what is behind it. The hairline is 1.30:1 on paper: it reads as a box to a sighted designer and as nothing at all to anyone else. .48 is 3.39:1 on paper and 3.82:1 on the control's own white fill, so it clears on both sides of the stroke with 13% to spare. Not --line-hairline's job: that is a decorative rule between blocks, and raising it would darken every seam on the site. */ --line-control:var(--wyk-carbon-48); /* ADDED FOR SITE BUILD — 15 October 2026 (client). The transparent header's own scrim, on the 14 pages where it sits over a dark banner. It is there because the header had NO ground of its own: every label sat on whatever pixel of the artwork happened to be behind it. Sampled through the banner images at five widths, the brightest ground under header text measured rgb(165,126,71) (/services/ at 1024, under the Contact button), where paper ink is 3.28:1 — below AA, not merely below AAA. .50 of carbon takes that worst case past 7:1 with margin, and it is a wash over artwork that is already dark everywhere else, so the bar still reads as transparent rather than as a filled block. It applies only while the header is over the banner; `is-scrolled` still swaps to the page ground. */ --scrim-header:rgba(12,10,9,.50); --line-strong:var(--wyk-carbon); --line-hover:var(--wyk-carbon-32); /* ADDED FOR SITE BUILD — card rule on hover */ --line-accent:var(--wyk-copper); --line-on-dark:var(--wyk-paper-24); --line-on-band:var(--wyk-carbon-16); /* The sector hero's scrim. The reading region is the LEFT of the band, not the bottom, so this runs across rather than up — dense where the copy sits, clearing to let the photograph carry the right-hand side. */ --scrim-sector:linear-gradient(100deg, rgba(12,10,9,.94) 0%, rgba(12,10,9,.88) 38%, rgba(12,10,9,.62) 64%, rgba(12,10,9,.36) 100%); /* ADDED FOR SITE BUILD — 14 October 2026 (client: the mobile and tablet pass). The same idiom as --scrim-sector above, at the same angle and in the same carbon, for the one banner that carries a PHOTOGRAPH rather than a baked field: /industries/private-equity/. It is denser at the right-hand end, and that is the whole difference. --scrim-sector may clear to .36 because on a sector hero the right of the band is picture and nothing else; on this banner below 1200 the copy runs to 96% of the width, so a scrim that clears there clears underneath the text. The floor is measured, not chosen. Sampling the photograph under every pixel of the lede, the greatest alpha any point needs is .58 — to hold the 12px crumbs and eyebrow at 4.5:1 and the title at 3:1. Holding .66 or above across the whole band keeps that with margin at 375, 768 and 1024. Unscrimmed, the title's worst point measured 1.00:1: paper type on a near-white pixel of a lit building. */ --scrim-banner-photo:linear-gradient(100deg, rgba(12,10,9,.92) 0%, rgba(12,10,9,.86) 45%, rgba(12,10,9,.72) 80%, rgba(12,10,9,.66) 100%); /* ADDED FOR SITE BUILD — 14 October 2026 (client). The phone scrim for the two abstract fields whose light streaks ran straight through the title: Home's hero and the index banner the Services page shares. Runs top-down rather than across, because stacked the copy sits at the TOP of the band and the picture carries the foot. Deliberately lighter than --scrim-banner-photo and clearing to almost nothing: these fields are artwork the design is built around, so this lifts the type off them rather than covering them up. Phone only — above 600 the copy sits in a column the streaks already miss. */ --scrim-hero-sm:linear-gradient(180deg, rgba(12,10,9,.74) 0%, rgba(12,10,9,.66) 45%, rgba(12,10,9,.34) 75%, rgba(12,10,9,.10) 100%); /* ADDED FOR SITE BUILD — accessibility pass, 14 October 2026. The capability tile's title is paper, absolutely positioned at the FOOT of a treated photograph. The treatment is dark almost everywhere, which is why this was never noticed — but cap-cdd-treated.jpg carries a lit copper region, and at 1024 the title landed on it and measured 1.30:1. Paper on #F5CEAF. THE RAMP IS SET BY WHERE THE TITLE ACTUALLY SITS, MEASURED, NOT ASSUMED. The first version assumed 71%-92% of the tile's height, which is true at 320, 375, 1024 and 1440 — and wrong at 768, where the tiles are 224 tall and the title wraps to three lines starting at 48.1%. Above the ramp it was unscrimmed, and the label measured 1.91:1 there. Title tops measured across the five widths: 74.3 / 86.9 / 48.1 / 70.9 / 86.7 per cent. The alpha floor is measured too. Sampling every tile's lightest pixel under the type, the worst is #FFFAEA, where paper reads 1.08:1 raw and a carbon scrim needs .585 to reach 4.5:1. This ramp holds .66 or more from 46% down, so the worst point of the worst tile reads about 5.5:1, and it still clears to nothing by a fifth of the way down so the artwork the tile exists to show is untouched above the type. */ --scrim-captile:linear-gradient(180deg, rgba(12,10,9,0) 20%, rgba(12,10,9,.66) 46%, rgba(12,10,9,.76) 100%); /* ── semantic: interactive ───────────────────────────────── */ --interactive-accent:var(--wyk-copper); /* ADDED FOR SITE BUILD — accessibility pass, 14 October 2026. Copper as a GROUND beneath text, which --interactive-accent must never be again: the filled button, and the outlined button's filled hover. Paper on it is 4.99:1. Borders, rules and the focus ring keep --interactive-accent. */ --interactive-accent-fill:var(--wyk-copper-deep); --interactive-accent-pressed:var(--wyk-copper-pressed); --interactive-dark:var(--wyk-carbon); --interactive-dark-hover:var(--wyk-graphite); --focus-ring:var(--wyk-copper); /* --- ADDED FOR SITE BUILD (chunk 1) --- Accent text at body size, on EITHER light ground. --interactive-accent is too light for that on both: 3.59:1 on paper, 4.05:1 on the white card. This value clears AA on both — 4.69:1 on --surface-page, 5.28:1 on --surface-card — so it is the single answer to "accent, but the type is under 24px", wherever that type sits. Two callers, two grounds, and the next reader should not assume one of them: · arrow links and inline accent text, on paper 4.69:1 · the primary button's label when hover inverts it to white ground 5.28:1 Not a fifth hue: it is --wyk-copper-pressed, already in the palette. --interactive- accent stays the colour for button fills, rules, and accent type at 24px and above. Both paper ratios fell when the ground moved from #FAF8F4 to #F4F1EC (4.98 -> 4.69 and 3.82 -> 3.59). Both still pass. There is no headroom left for a darker paper. */ --text-link:var(--wyk-copper-deep); /* ADDED FOR SITE BUILD — AAA pass, 15 October 2026. The exhibit data labels on the exhibit greys. The labels on the CARBON strips are --text-on-dark (paper) and carry no accent ink at all — see the ramp note. */ --text-accent-aaa:var(--wyk-copper-aaa); /* Focus ring offset. tokens/base.css sets a:focus-visible to a 1px ring at a 2px offset but ships the offset as a literal; the site extends that ring to buttons, the menu toggle and dark surfaces, so the offset is tokenised here to keep the treatment identical everywhere. */ --focus-ring-offset:2px; } /* ── FIELD PALETTE — imagery only, intentionally not tokenised ────────────────── Five ramp stops used by the canvas painter and the mesh SVGs: copper #C2652A amber #E8944A azure #4684C8 indigo #3B4FA8 cyan #5FC8E0 These are deliberately absent from :root and have no semantic alias, so nothing in the component layer can reach them. They are not referenceable brand colours: they exist only inside generated imagery. Do not promote one to a token, a border, a text colour or a fill. Copper appears in both blocks because it is a brand accent that is also a field hue — but as a field hue it is still never a ground. ────────────────────────────────────────────────────────────────────────────── */