/* linards — neutral token pack (the site's own skin, no client brand) * * The ONE source of truth for this skin. Two tiers live here: * 1. PRIMITIVES — the portfolio's own palette, radii, face. * 2. SEMANTIC MAP — the contract tokens (--color-fg/bg/accent/…) bound to those primitives. * * Load order on every page: system/tokens.contract.css → THIS FILE → components.css / proto.css. * The contract declares neutral defaults; this pack (loaded after) overrides them, so every * component is always defined and a re-skin is a swap of this one file. The three previous * skins are preserved beside it — tokens.carmoola.css, tokens.previous.css and * tokens.saulera.css — so a swap back is a one-line change in each page's . * * WHY THIS PACK EXISTS. The site stopped being a per-company application and became the * standing portfolio, so the chrome stopped wearing a client's colours. This pack is the * portfolio's own: charcoal copy on warm paper, powder-blue calls to action that darken to * peacock, and an orange accent that belongs to nobody's brand. The prototypes are exhibits * and keep their own colours — the six agreement flows load system/tokens.proto-agreement.css * after this file, the bank journeys carry their skin in banks.css, and the handover replay * scopes its pack to the exhibit. The chrome around every exhibit is this file. * * THE ORANGE IS NOW ONE WEIGHT, BY DECISION. The pack previously ran a ramp — a bright * signal weight plus a darker text-bearing weight, fill, hover and active — so that every * accent role could be measured against the ground it sat on. That ramp is gone. All five * orange primitives are #FB4F14, so rest, hover and active are the same colour and the * accent no longer changes state by value. * * WHAT THAT COSTS, RECORDED HONESTLY. #FB4F14 reads 3.37:1 on white and 3.14:1 on the * cream, so every accent that carries TEXT on a light ground is now below the 4.5:1 AA * bar: body links, labels, and the white label on a primary button in all three states. * On the charcoal it still measures 5.37:1 and passes, which is why the inversion block * below is unaffected. Closing the gap without reintroducing a second weight means moving * text accents off the orange or putting them on a dark ground. * * MEASUREMENT. Every pair below is a WCAG 2.1 ratio computed against the surface it actually * sits on, not against white by default. Ratios were computed by script for this pack on * 24 August 2026; the numbers are on the lines that carry them. The ratios on the orange * lines below are the pre-collapse figures and no longer describe the values beside them. * * TYPE. Quicksand stays. It arrived as a stand-in for a client face, but the whole site is * set in it — including the prototype exhibits, which this change must not touch — so the * face is now a portfolio decision rather than a client echo. Both latin and latin-ext * subsets ship: latin-ext carries ē, ņ and š, without which the author's own name renders * half in a fallback on every page. * * Components must reference the SEMANTIC tokens below — never a primitive, never a literal. */ /* Self-hosted face (bundled woff2 subsets). @import must precede all rules. */ @import url("../fonts/quicksand.css"); :root { /* ============================================================ 1. PRIMITIVES — the portfolio's own palette ============================================================ */ --ln-ink: #161616; /* charcoal — the copy colour · 16.85:1 on cream, 18.10:1 on white */ --ln-grey: #555555; /* muted text · 6.94:1 on cream, 7.46:1 on white */ --ln-paper: #F7F7F3; /* warm off-white page ground, kept from the previous skins */ --ln-card: #FFFFFF; --ln-sand: #ECECDF; /* warm line and divider, kept with the paper it sits on */ /* The orange, in its weights (see the header note). */ --ln-orange: #FB4F14; /* 5.37:1 on the charcoal · 3.37:1 on white · 3.14:1 on cream */ --ln-orange-fill: #FB4F14; /* fill · white label 3.37:1 — below AA */ --ln-orange-solid: #FB4F14; /* text · 3.37:1 on white, 3.14:1 on cream — below AA */ --ln-orange-deep: #FB4F14; /* hover · same value as rest */ --ln-orange-deepest:#FB4F14; /* active · same value as rest */ /* The blues. Powder is the call-to-action fill and the selection ground; peacock is its hover and the quiet text accent. */ --ln-powder: #AECACD; /* CTA fill · charcoal label on it 10.45:1 */ --ln-peacock: #104A65; /* CTA hover fill and quiet links · 9.59:1 on white, white label 9.59:1 */ --ln-peacock-deep: #093141; /* CTA active fill · white label 13.75:1 */ /* Status — the portfolio's own, unchanged across packs, measured on the grounds they sit on. */ --ln-good: #0A6E4F; /* 6.26:1 on white, 5.83:1 on cream */ --ln-alert: #B3261E; /* 6.54:1 on white, 6.09:1 on cream */ /* Fonts — one family across display and body. */ --font-display: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Spacing scale (8 steps, 4px base) */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px; --spacing-4xl: 96px; /* Radius — unchanged: the prototype exhibits depend on the pill through the contract token. */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 100px; /* Shadows — neutral black, no brand tint. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.08); --shadow-lg: 0 14px 30px rgba(0, 0, 0, 0.12); /* Layout */ --maxw: 1280px; --gutter: 32px; /* Type ramp — same clamp() scale the previous packs used (base 18px) */ --type-display: clamp(44px, 6.4vw, 88px); --type-h1: clamp(36px, 4.4vw, 64px); --type-h2: clamp(26px, 2.6vw, 36px); --type-h3: 22px; --type-lead: clamp(18px, 1.5vw, 22px); --type-body: 18px; --type-caption: 13px; --type-eyebrow: 12px; /* ============================================================ 2. SEMANTIC MAP — the contract, bound to the portfolio primitives. (Overrides the neutral defaults in system/tokens.contract.css.) Every pair below is measured against the surface it sits on. ============================================================ */ /* Foreground / surface (light context) */ --color-fg: #444444; /* 2026-09-20 per Linards: copy a step darker than --ln-grey (#555), still not charcoal · 9.0:1 on cream */ --color-fg-muted: var(--ln-grey); /* 6.94:1 on cream */ --color-bg: var(--ln-paper); /* page ground */ --color-bg-surface: var(--ln-card); /* cards, alt sections */ --color-border: var(--ln-sand); /* 1px lines, dividers */ --color-border-strong: var(--ln-ink); /* emphasis / hover borders, thick rules */ --color-white: var(--ln-card); /* Accent — the solid orange, because it is the weight that carries text. The bright weight reaches the chrome only through the pack-owned rules at the bottom of this file and through the inversion below, where it passes. */ --color-accent: var(--ln-orange-solid); /* 3.37:1 on white, 3.14:1 on cream */ --color-accent-hover: var(--ln-orange-deep); /* same value as rest */ --color-accent-active: var(--ln-orange-deepest); /* same value as rest */ --color-accent-fg: var(--ln-card); /* 4.86:1 on the accent fill */ /* The quiet accent is a text role — links inside body copy — and it is the peacock, so the orange stays loud by staying rare. */ --color-accent-secondary: var(--ln-peacock); /* 9.59:1 on white */ /* Inverse (content sitting on the dark ground). */ --color-bg-inverse: var(--ln-peacock); /* 2026-09-20: peacock band, not charcoal, per Linards · paper on it 9.29:1 */ --color-fg-on-inverse: var(--ln-paper); /* 16.85:1 on the charcoal */ --color-fg-on-inverse-strong: var(--ln-card); /* 18.10:1 on the charcoal */ --color-fg-on-inverse-muted: color-mix(in srgb, var(--color-fg-on-inverse) 62%, transparent); --color-fg-on-inverse-soft: color-mix(in srgb, var(--color-fg-on-inverse) 84%, transparent); --color-inverse-line: color-mix(in srgb, var(--color-fg-on-inverse) 14%, transparent); --color-inverse-wash: color-mix(in srgb, var(--color-fg-on-inverse) 7%, transparent); --color-on-dark-border: color-mix(in srgb, var(--ln-card) 50%, transparent); } /* ============================================================ THE INVERSION — the accent brightens on a dark ground. #FB4F14 holds 4.86:1 on white but only 3.73:1 on the charcoal, where it stops being a link. The bright #FB4F14 does the opposite: 3.37:1 on white, 5.37:1 on the charcoal. So the two oranges trade places at the light/dark boundary, and an accent FILL on a dark surface takes the charcoal as its label (5.37:1 on the bright orange), not white. THE SELECTOR LIST IS A REGISTRY, AND THAT IS ITS WEAKNESS. CSS cannot ask "is my background dark", so every dark surface has to opt in by name, and a new one that forgets to renders its accent at 2.55:1. Add a dark surface, add it here, and re-run the audit. ============================================================ */ .site-footer, .feature-band, .site-header.on-ocean, .on-dark, .rules, /* practice.html — the machine-readable system excerpt */ .ds-gov { /* system-map.html — the governance layer block */ --color-accent: var(--ln-orange); /* 5.37:1 on the charcoal */ --color-accent-hover: var(--ln-paper); /* 16.85:1 on the charcoal — hover brightens */ --color-accent-active: var(--ln-paper); --color-accent-fg: var(--ln-ink); /* 5.37:1 on the bright orange fill */ } /* ============================================================ CONTROL VOICE — sentence case, no tracking, heavy weight, fully round. Unchanged across the neutral skins; the prototype exhibits share the pill through the contract token. ============================================================ */ .btn, .nav-cta, .lp-chips a { text-transform: none; letter-spacing: 0; font-weight: 700; } .btn { font-size: 16px; padding: 15px 26px; } .nav-cta { font-size: 15px; padding: 11px 20px; } /* ============================================================ PACK-OWNED PAIRS — where this skin departs from the one-accent default. The pack loads BEFORE components.css and portfolio.css, so every selector here carries the specificity to win the tie; a same-specificity copy would lose on source order and read as applied while doing nothing. 1. CALLS TO ACTION are powder blue, and their hover is the dark blue: powder with the charcoal label at rest (10.45:1), peacock with a white label on hover (9.59:1), deep peacock pressed (13.75:1). Colour is never the only change: the label swaps with the ground, so the state reads in greyscale too. 2. THE HEADLINE UNDERLINE takes the bright orange. It is a decoration behind ink type, not text, so the signal weight is legitimate there. 3. SELECTION is the powder with the charcoal on it, 10.45:1. ============================================================ */ .btn.btn-primary { background: var(--ln-powder); color: var(--ln-ink); } .btn.btn-primary:hover { background: var(--ln-peacock); color: var(--ln-card); } .btn.btn-primary:active { background: var(--ln-peacock-deep); color: var(--ln-card); } a.nav-cta { background: var(--ln-powder); color: var(--ln-ink); } a.nav-cta:hover { background: var(--ln-peacock); color: var(--ln-card); } header.site-header.on-ocean a.nav-cta { background: var(--ln-powder); color: var(--ln-ink); } header.site-header.on-ocean a.nav-cta:hover { background: var(--ln-peacock); color: var(--ln-card); } span.hl::after { background: var(--ln-orange); } /* The active-state marks take the bright weight too: the nav underline is a bar behind nothing, and the active filter pill is a fill whose charcoal label reads at 5.37:1. */ header.site-header .nav-links a.active::after { background: var(--ln-orange); } /* The design-decision accordion's +/− is a mark, not text: two bars carrying no label, so it takes the bright weight (3.37:1 on the white card — non-text needs 3:1). The summary line beside it stays the solid orange on hover, because that IS text. */ div.cs-acc .mark::before, div.cs-acc .mark::after { background: var(--ln-orange); } /* Same argument inside the prototype exhibits: the notes-panel rule and the underline on the practice link are 2px bars beneath charcoal type, decorations rather than labels, so the bright weight is legitimate. proto.css loads AFTER this pack, so both selectors are element-qualified to take the tie. */ div.ot-notes-head { border-bottom-color: var(--ln-orange); } a.ot-notes-link, button.ot-notes-link { border-bottom-color: var(--ln-orange); } button.dl-filter[aria-pressed="true"] { background: var(--ln-orange-fill); border-color: var(--ln-orange-fill); color: var(--ln-card); /* white copy, per the brief; the fill darkens one step so it passes */ } :root ::selection { background: var(--ln-powder); color: var(--ln-ink); } /* ---- Skipton-contract bridge (this project only) ------------------------------------ * tokens.contract.css here declares seven roles the linards pack does not name. Bound to * the pack's own primitives so nothing falls back to the contract's neutral defaults. * --color-caution-text keeps the derived AA amber (#8C6D20, 4.85:1 on white); the pack has * no amber and its orange is 3.37:1, below AA for text. */ :root { --color-brand: var(--ln-orange); --color-loyalty: var(--ln-powder); --color-urgent: var(--ln-alert); --color-sponsor: var(--ln-grey); --color-sponsor-text: var(--ln-grey); --color-confirm-text: var(--ln-good); --color-caution-text: #8C6D20; }