/** * Carrier branding overlay — MULTI-BRAND. * * This is the ONLY stylesheet a branding change should touch. It is loaded * after sdk.css (ai-hub-v3/backend/src/handlers/v3/shell-template.js:62 — the * branding is always emitted LAST), so a token redeclared here wins on * source order and sdk.css is never edited. * * Five brands are defined, each keyed on a `data-brand` attribute set on * by the server. The server-side plumbing is NOT in this file. * * data-brand='trident' OneShield's own identity — acid lime on near-black * data-brand='nukor' the stock SDK indigo the logged-in app already * wears — reproduced, with its two known contrast * failures corrected. See that block. * data-brand='meridian' conservative institutional carrier — navy + gold * data-brand='greenscreen' CRT green phosphor terminal, monospace throughout * data-brand='amber' CRT amber phosphor (DEC VT100), monospace throughout * * ══════════════════════════════════════════════════════════════════════ * UNBRANDED STILL WORKS — deliberately * ══════════════════════════════════════════════════════════════════════ * * Every rule below is gated on an attribute selector. With no `data-brand` on * , NONE of these blocks match and the stock SDK appearance returns * untouched — this file then costs one HTTP request and changes nothing. * * The server currently defaults a cookie-less visitor to 'trident', so there is * no unbranded state in normal operation. Keep the property anyway: it is what * makes "is this bug mine or the SDK's?" answerable in one step (remove the * attribute in devtools), and it is the only reason this file can ship to a * deployment that has not opted into branding at all. * * ══════════════════════════════════════════════════════════════════════ * READ THIS FIRST: every colour must be set TWICE (and why) * ══════════════════════════════════════════════════════════════════════ * * Specificity is (a,b,c) = (#id, .class/[attr]/:pseudo-class, type/::pseudo-elt). * The trap is that ATTRIBUTE selectors score in the SAME column as classes — * the b column — not the type column. `:root` is a pseudo-class, not an element, * so the c column is 0 for every selector involved here: * * sdk.css :root (0,1,0) * sdk.css :root[theme='light'] (0,2,0) <- sdk.css:292 * ours :root[data-brand='x'] (0,2,0) <- TIES sdk's light * ours :root[data-brand='x'][theme='light'] (0,3,0) <- beats it outright * * Consequence, and it is the OPPOSITE of the single-brand warning this file * used to carry: our dark block TIES sdk.css's light block at (0,2,0), and a * tie is broken by source order, which we win because we load last. So a colour * set only in `[data-brand='x']` does not get discarded in light mode — it * LEAKS INTO light mode and overrides sdk's carefully lightened value. A brand * that sets only its dark colours renders a dark-on-dark palette against light * mode's white page. * * Either way the instruction is identical, so it is stated once and absolutely: * EVERY COLOUR IS SET IN BOTH BLOCKS. The two blocks below each brand carry the * same set of keys, deliberately, so a missing one is visible as an asymmetry. * * Three tokens behave differently and are handled accordingly: * * --accent-hover NOT set here, on purpose. sdk.css defines it in both of its * own blocks as a color-mix over var(--accent) — toward white * in dark, toward black in light. Leaving it alone means it * re-derives correctly from each brand's accent in each theme * for free. Setting it would break that and gain nothing. * --chart-* sdk.css defines these ONLY in its `:root` (0,1,0). Our * (0,2,0) beats that in BOTH themes, so a chart colour set in * a dark block applies in light mode too. Where a brand needs * different chart values on a white page it must still say so * in its light block — same rule, different reason. * --font / --mono sdk.css's light block does not touch them, and nothing else * outranks (0,2,0). Set ONCE, in each brand's dark block. * * Verified against sdk.css as it stands: `:root[theme='light']` is at line 292 * (the older comment in this file said 234-257, which is now the elevation * scale — the file has grown). It is the ONLY selector in sdk.css that * redefines the palette per theme; the header comment there mentioning * `ui-app[theme]` / `ui-platform[theme]` scoping is stale, no such blocks exist. * * ══════════════════════════════════════════════════════════════════════ * Scope * ══════════════════════════════════════════════════════════════════════ * * Colour, typeface and the carrier logo. Spacing, radius, elevation, z-index * and the type scale are deliberately absent: they affect layout and component * internals in ways a colour swap does not, and there is no visual-regression * tooling yet (ND-46/47) to catch a mistake. Do not add them here without * sign-off from whoever owns the SDK design tokens. None were added for this * change, including for the two monospace brands. * * After editing, run from ai-hub-workspace/plugins/com-oneshield-sdk-ui: * npm run verify:css (proves the browser did not silently drop a rule) * npm run lint:sdk * then view it in a real browser in BOTH themes. NEITHER GATE READS THIS FILE — * verify-css parses sdk.css only and lint:sdk does not look at the branding * overlay — so they prove the SDK is unbroken and prove nothing about anything * below this line. No gate can prove a colour change kept its contrast. */ /* ══════════════════════════════════════════════════════════════════════ WEBFONT — Manrope, self-hosted (used by the `trident` brand only) ══════════════════════════════════════════════════════════════════════ Self-hosted rather than an @import from Google Fonts, which also sidesteps the ordering trap the @import route carries: an @import that is not the very first rule in the file is dropped silently, and this file now opens with a large comment block that makes "first rule" easy to get wrong. One variable file, latin subset, axis wght 200..800 — covers the 400/500/700 body weights and the 800 headings the brand uses, in 24 KB. Downloaded from the URL Google's own css2 endpoint serves for this face (Manrope v20). Latin subset only (U+0000-00FF plus punctuation). Names carrying characters outside Latin-1 — Polish, Czech, Turkish insureds — will fall through to the next family in the stack for those glyphs. Add the latin-ext file if that turns out to matter. Only referenced by --font under [data-brand='trident'], so the other four brands never trigger the download. */ @font-face { font-family: 'Manrope'; src: url('/plugin-assets/com-oneshield-nukor-platform/branding/Manrope-Variable.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } /* ══════════════════════════════════════════════════════════════════════ WEBFONT — IBM 3270, self-hosted (used by `greenscreen` and `amber`) ══════════════════════════════════════════════════════════════════════ THIS FONT IS THE POINT OF THOSE TWO BRANDS AND IT WAS PREVIOUSLY MISSING. The two terminal brands used to name 'IBM Plex Mono' at the head of their stack. Nothing ships that family, so the name matched nothing and the stack fell through to JetBrains Mono / SFMono / Menlo — all modern, humanist, carefully hinted screen faces. They are the OPPOSITE of clunky, which is exactly why the brands did not read as period-correct however dark the background got. A font-family that names an absent family fails silently: there is no console warning, the text just renders in something else. 3270-Regular.woff is a webfont build of IBM's own 3270 font — the character set of the IBM 3270 display terminal, redrawn from the original bitmaps. It is the actual typeface of the mainframe era rather than an evocation of one: fixed pitch, blocky, flat terminals, the slashed zero and the squared lowercase that the fallbacks all round off. 106 KB, CFF outlines, name table reports family 'IBM 3270' (read out of the file, not assumed — the family name is what --font must match, and getting it wrong is the same silent failure as above). Licence: 3270-LICENSE.txt beside this file. ONE WEIGHT ONLY, and that is deliberate. A 3270 terminal had no bold — it had brighter. Declaring `font-weight: 400` alone lets the browser synthesise bold by smearing the glyph, which is very close to what a double-strike actually looked like. Declaring `100 900` would have made the SDK's headings and render identically to body text and flatten the hierarchy the components rely on. font-display is `block`, NOT `swap`, and this is the one place in this file where that is right: these two brands set --font to a monospace, so a swap would repaint the entire product from a proportional fallback to a fixed pitch mid-load and reflow every table in it. A brief invisible flash is the better failure. Only referenced by greenscreen/amber, so the other three brands never trigger the download. */ @font-face { font-family: 'IBM 3270'; src: url('/plugin-assets/com-oneshield-nukor-platform/branding/3270-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: block; } /* ══════════════════════════════════════════════════════════════════════ A NOTE ON THE LOGO, WHICH IS SHARED BY ALL FIVE BRANDS ══════════════════════════════════════════════════════════════════════ The trident mark is an inline data: URI rather than a .svg file on disk, and that is a deliberate choice for a brand SWITCHER specifically. An SVG loaded through background-image is an independent document: it cannot see currentColor, the page's CSS variables, or the @font-face above. Its colours are baked in at author time. With five brands x two themes that is ten separate files that must be kept in geometric lockstep, and the mark would silently stay lime while the rest of the product turned navy. Inlining it means the fill is a literal in each block, so the mark repaints with the brand — which is the entire point of the demo. Encoding rules that make this work, all of which fail SILENTLY if broken: - '#' MUST be %23. Unencoded it terminates the URI as a fragment and the background simply does not render — no console error. - Quotes inside the SVG are %27 so they cannot collide with the quotes wrapping the url(). - Spaces are %20; the path data uses commas as separators so it contains none at all. Verified rendering in headless Chrome at 22px on all eight brand/theme backgrounds before being committed here. The viewBox is 0 0 32 32 — square — so --brand-logo-width and --brand-logo-height are BOTH 22px. background-size: contain fits the image inside that box and letterboxes any mismatch, so a non-square value here would render the mark smaller rather than stretched. The mark is three prongs on a shaft: the carrier writes exactly three product lines (personal auto, workers' compensation, and the TriPak commercial package), so the count is not decorative. --brand-wordmark-display is deliberately LEFT AT ITS DEFAULT (`block`) — see the note in the trident block for why setting it to `none` would be a bug here rather than a tidy-up. */ /* ══════════════════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════════════════ BRAND 1 of 5 — `trident` (DEFAULT) OneShield's own identity. Values taken from the live stylesheet at oneshield-staging.webflow.io, so the greys and the lime are exact rather than sampled by eye. ══════════════════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════════════════ */ /* ── trident / DARK ─────────────────────────────────────────────────── */ :root[data-brand='trident'] { /* The signature acid lime. Near-black sits on it at 15.05:1 (AAA); white would be 1.21:1, which is why --text-on-accent is inverted for this brand and is NOT the SDK's white. */ --accent: #c6fb50; --accent-dim: rgba(198, 251, 80, 0.15); /* OneShield's neutral ramp, darkest to lightest, used verbatim. */ --bg: #151516; --surface: #282829; --surface-2: #373738; --surface-3: #565557; --border: #373738; --text: #eeeeee; --text-on-accent: #151516; --text-muted: #aaaaaa; /* WAS #666666 (3.18:1) — FIXED. The previous pass measured that, judged it inherited debt because the SDK's own pairing is 3.05:1, and shipped it. That was the wrong call: "no worse than the SDK" is not a contrast standard, and this token carries real text. #858585 is 4.92:1 on this brand's #151516. --text-muted above stays #aaaaaa at 7.81:1, so the three-step de-emphasis ramp still separates cleanly. */ --text-dim: #858585; /* Status colours are NOT overridden. They are semantic signals, and all four stock values clear AA against this brand's #151516 (info 4.96, warning 8.50, success 8.01, danger 4.85) — measured, not assumed. Leaving them unset also means they need no light-mode restatement below. */ /* --chart-1 tracks --accent automatically, so series 1 is the lime for free. Only series 2 is claimed, for the brand's secondary blue; 3-10 stay stock because they are already mutually distinguishable and tested. */ --chart-2: #1561e8; --brand-logo: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2032%2032%27%3E%3Cpath%20fill=%27%23c6fb50%27%20d=%27M16,1L18,7H14ZM14,7h4v24h-4zM6.5,3L8.5,9H4.5ZM5,9h3v6H5zM25.5,3L27.5,9H23.5ZM24,9h3v6h-3zM4,14h24v3.2H4z%27/%3E%3C/svg%3E"); --brand-logo-on: ''; --brand-logo-width: 22px; --brand-logo-height: 22px; /* --brand-wordmark-display is NOT set to `none`, despite the mark sitting next to text in the header. The element it controls (.app-switcher-label, sdk.css:571) does not render the company name — it renders the ACTIVE APP's label, read from the selected . In this shell that is "Trident Insurance" only while the trident app is active; it is also "SDK Explorer", "Code Sandbox" and "Nukor Fusion". Hiding it would delete the only indication of which app you are in, in exchange for removing a duplication that exists on one of five entries. Mark + app name is correct. */ /* Set once — sdk.css's light block does not touch --font/--mono. */ --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', 'SFMono-Regular', 'Menlo', monospace; } /* ── trident / LIGHT ────────────────────────────────────────────────── */ :root[data-brand='trident'][theme='light'] { /* THE COMPROMISE, STATED: the lime cannot be the light-mode accent. --accent is used by SDK components as a TEXT and ICON colour as well as a fill, and #c6fb50 on white is 1.21:1 — invisible. OneShield's own site avoids this by only ever using lime as a fill on dark ground; we do not have that freedom, because one token serves both roles. There is provably no value that satisfies the brief's "keep --text-on-accent near-black" in this theme: accent legible on white needs luminance <= 0.1833 near-black legible on it needs luminance >= 0.2061 Those do not intersect. So the accent is darkened into the olive-lime family until it reads on white, and --text-on-accent becomes white here. Near-black on this accent would be 3.67:1 — it was measured, and it fails. Dark mode keeps the true lime with near-black on it; the brand's signature pairing is preserved where it actually works. That conclusion is settled and was not re-litigated for this change. DARKENED AGAIN THIS PASS: #5a7a0a -> #52700a. The old value cleared AA against the page (#ffffff, 4.97:1) but only reached 4.29:1 against --surface (#eeeeee) — and --accent is used as a TEXT colour on surfaces, not just on the page, so links and active states sitting on a card were the failing case. #52700a is 4.92:1 on --surface and 5.70:1 on --bg. White on it is also 5.70:1, so the button pairing improved too. RESIDUAL, NOT FIXED HERE: --accent on --surface-2 (#cccccc) is 3.55:1. That is a property of this brand's unusually dark light ramp (#eeeeee/#cccccc/#aaaaaa, OneShield's own neutrals, far wider steps than the SDK's #f8f9fa/#f0f1f3/#e8e9ec) rather than of the accent — darkening the accent far enough to fix it would take the lime to near-black and lose the brand. Fixing it properly means lightening the light-mode ramp, which is a brand decision for whoever owns those neutrals. Flagged, not silently absorbed. */ --accent: #52700a; --accent-dim: rgba(82, 112, 10, 0.12); /* Light ramp from the same OneShield neutrals. Note these steps are much wider apart than the SDK's stock light ramp (#f8f9fa/#f0f1f3/#e8e9ec), so surfaces read as more strongly separated than elsewhere in the product. That is the brand's own ramp, not a slip — but it is the thing to look at first in a browser. */ --bg: #ffffff; --surface: #eeeeee; --surface-2: #cccccc; --surface-3: #aaaaaa; --border: #cccccc; --text: #151516; --text-on-accent: #ffffff; --text-muted: #565557; /* 5.74:1 — comfortably AA, and a large improvement on the stock light --text-dim (#9ca3af on white = 2.54:1, an outright failure today). */ --text-dim: #666666; /* The brand's darker secondary blue, for the same series on a white page. */ --chart-2: #1049ae; --brand-logo: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2032%2032%27%3E%3Cpath%20fill=%27%2352700a%27%20d=%27M16,1L18,7H14ZM14,7h4v24h-4zM6.5,3L8.5,9H4.5ZM5,9h3v6H5zM25.5,3L27.5,9H23.5ZM24,9h3v6h-3zM4,14h24v3.2H4z%27/%3E%3C/svg%3E"); } /* ══════════════════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════════════════ BRAND 2 of 5 — `nukor` The stock SDK identity, made selectable as a brand. WHY IT EXISTS: every other brand in this file moves the product AWAY from the indigo the authenticated app already wears, so there was no way to run the Brand Switcher and still see the application's own colours. This is that missing option — the palette a deployment with no `data-brand` at all renders, reproduced under a key so it can be chosen deliberately. ══ "STOCK, CORRECTED" — the three departures, all of them contrast ══ Every value below is sdk.css's own — `:root` for dark, `:root[theme='light']` (sdk.css:292) for light — copied across verbatim, EXCEPT these three. Each is a fix for a pairing that fails WCAG AA today, not a design opinion: 1. --accent dark #7c6bf0 -> #8878f3 (LIGHTENED, not darkened) --text-on-accent dark #ffffff -> #0f1117 (white -> near-black) (4.02:1 -> 5.42:1) White on the stock indigo is 4.02:1. That is ND-101, and it is not an abstract finding: --accent is the fill behind every primary button and --text-on-accent is its label, so the stock palette ships button text below AA on the most-clicked element in the product. THE OBVIOUS FIX IS WRONG, and it was tried first: darkening the indigo to #6f5ce8 does get white to 4.80:1, but --accent is ALSO used as a text and icon colour — links, active nav, selected state — directly on --bg and --surface, and darkening drove that pairing DOWN from 4.68:1 to 3.93:1. It fixed the button by breaking every link. Measured, then reverted. Both cannot hold at once with white on the button. Against this brand's #0f1117 ground: accent legible as text on --bg needs luminance >= 0.2004 white legible on the accent needs luminance <= 0.1833 Those do not intersect — the same shape of impossibility as trident's light mode, arrived at independently. So the accent goes the OTHER way: lightened until it reads strongly as text (5.42:1 on --bg, 4.83:1 on --surface), and --text-on-accent flips to the brand's own near-black #0f1117, which sits on it at 5.42:1. STATED PLAINLY BECAUSE IT IS THE ONE VISIBLE DEPARTURE FROM STOCK: primary buttons in this brand are dark-on-indigo, not white-on-indigo. That is a real change to how the app looks, made deliberately, because the alternative is text below AA on every primary button. It is also what `trident` already does with its lime. If ND-101 is ever settled centrally, take that answer instead of this one. The LIGHT accent (#6d5ce7) has no such conflict — white on it is 4.84:1 AND it is 4.84:1 as text on the white page — so light mode is left exactly as sdk.css has it, white button text included. 2. --text-dim dark #5c6078 -> #7b7f99 (3.05:1 -> 4.80:1) light #9ca3af -> #6e7484 (2.54:1 -> 4.67:1) Both stock values fail outright; the light one badly. Raised to clear AA against each theme's --bg. 3. --text-muted light #6b7280 -> #5b6270 (4.83:1 -> 6.13:1) A CONSEQUENCE of (2), not an independent choice, and worth stating because it looks like unnecessary churn. On white, AA caps how light "dim" is allowed to be at roughly #767676 — which puts the corrected --text-dim (4.67:1) almost on top of the stock --text-muted (4.83:1) and collapses a two-step de-emphasis ramp into one step. Muted is darkened to reopen the gap. This is the real cost of fixing --text-dim on a white page and there is no way to avoid it: you cannot have three distinguishable text weights, all above 4.5:1, on #ffffff, and also have the dimmest one look genuinely dim. If ND-101 is ever fixed in sdk.css, re-derive this brand from it and delete all three overrides rather than leaving them to drift out of sync. No webfont: the stock SDK does not load one, and this brand's whole claim is that it looks like the stock SDK. --font is the system sans stack. ══════════════════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════════════════ */ /* ── nukor / DARK ───────────────────────────────────────────────────── */ :root[data-brand='nukor'] { /* sdk.css :root has #7c6bf0. Corrected — see (1) above. */ --accent: #8878f3; --accent-dim: rgba(136, 120, 243, 0.15); --bg: #0f1117; --surface: #1a1d27; --surface-2: #242836; --surface-3: #2e3345; --border: #363b4e; --text: #e4e6ef; /* sdk.css :root has #ffffff (4.02:1, ND-101). Inverted — see (1) above. This is the brand's own --bg, so the button label is the page showing through the fill rather than a fourth neutral. */ --text-on-accent: #0f1117; --text-muted: #8b8fa5; /* sdk.css :root has #5c6078 (3.05:1). Corrected — see (2) above. */ --text-dim: #7b7f99; /* Status colours deliberately NOT set. This brand IS the stock ground, so sdk.css's own status values are already tuned against precisely these surfaces — restating them here could only introduce drift. */ /* Charts deliberately NOT set, same reason. --chart-1 tracks --accent, so series 1 follows the corrected indigo without being named. */ --brand-logo: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2032%2032%27%3E%3Cpath%20fill=%27%238878f3%27%20d=%27M16,1L18,7H14ZM14,7h4v24h-4zM6.5,3L8.5,9H4.5ZM5,9h3v6H5zM25.5,3L27.5,9H23.5ZM24,9h3v6h-3zM4,14h24v3.2H4z%27/%3E%3C/svg%3E"); --brand-logo-on: ''; --brand-logo-width: 22px; --brand-logo-height: 22px; /* Set once — sdk.css's light block does not touch --font/--mono. Plain system stack, no download: matching the stock product is the brief. */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: 'JetBrains Mono', 'SFMono-Regular', 'Menlo', 'Consolas', monospace; } /* ── nukor / LIGHT ────────────────────────────────────────────────────── sdk.css:292 reproduced, with the two text corrections from (2) and (3). Restated in full rather than left to inherit, because our dark block ties sdk's light block on specificity and wins on source order — see the file header. Omitting any of these would leak a dark value onto a white page. */ :root[data-brand='nukor'][theme='light'] { /* Untouched: white on this is already 4.85:1. */ --accent: #6d5ce7; --accent-dim: rgba(109, 92, 231, 0.12); --bg: #ffffff; --surface: #f8f9fa; --surface-2: #f0f1f3; --surface-3: #e8e9ec; --border: #e0e2e7; --text: #1a1d27; --text-on-accent: #ffffff; /* sdk.css:292 has #6b7280. Darkened — see (3) above. */ --text-muted: #5b6270; /* sdk.css:292 has #9ca3af (2.54:1). Corrected — see (2) above. */ --text-dim: #6e7484; --brand-logo: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2032%2032%27%3E%3Cpath%20fill=%27%236d5ce7%27%20d=%27M16,1L18,7H14ZM14,7h4v24h-4zM6.5,3L8.5,9H4.5ZM5,9h3v6H5zM25.5,3L27.5,9H23.5ZM24,9h3v6h-3zM4,14h24v3.2H4z%27/%3E%3C/svg%3E"); } /* ══════════════════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════════════════ BRAND 3 of 5 — `meridian` A fictional 90-year-old mutual. Deep maritime navy ground, restrained antique gold accent. Exists to prove the switcher's point: it is the visual opposite of `trident` and shares none of its values. Institutional, sober, no colour doing anything clever. ══════════════════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════════════════ */ /* ── meridian / DARK ────────────────────────────────────────────────── */ :root[data-brand='meridian'] { /* Antique gold, not a bright yellow — a metallic reads as restrained only if it is desaturated toward brown. 7.41:1 on the navy. */ --accent: #c9a227; --accent-dim: rgba(201, 162, 39, 0.15); --bg: #0a1826; --surface: #102538; --surface-2: #17334a; --surface-3: #21455f; --border: #1d3b54; --text: #e8eef5; /* Near-black on gold, 7.83:1. Warm-shifted rather than neutral so it does not read as a hole punched in the metal. */ --text-on-accent: #14100a; --text-muted: #a3b6c9; --text-dim: #6d8398; /* Status colours unchanged — all four clear AA on this navy (info 4.87, warning 8.35, success 7.87, danger 4.76), measured. A conservative carrier is the last place to start recolouring semantic signals. */ /* Charts unchanged; --chart-1 picks up the gold automatically. */ --brand-logo: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2032%2032%27%3E%3Cpath%20fill=%27%23c9a227%27%20d=%27M16,1L18,7H14ZM14,7h4v24h-4zM6.5,3L8.5,9H4.5ZM5,9h3v6H5zM25.5,3L27.5,9H23.5ZM24,9h3v6h-3zM4,14h24v3.2H4z%27/%3E%3C/svg%3E"); --brand-logo-on: ''; --brand-logo-width: 22px; --brand-logo-height: 22px; /* A transitional serif for headings would be the authentic choice here, but --font is a single global family and the product is dense tabular UI, where a serif at 12px costs real legibility. Restraint instead: a neutral grotesque, no webfont download, which is also how most carriers of this vintage actually render. */ --font: 'Helvetica Neue', Helvetica, Arial, -apple-system, sans-serif; --mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace; } /* ── meridian / LIGHT ───────────────────────────────────────────────── */ :root[data-brand='meridian'][theme='light'] { /* Gold dark enough to read on white lands in the antique-brass range — a bright gold cannot clear AA on white at any saturation. 5.78:1 both ways, so white sits on it safely too. */ --accent: #7d6218; --accent-dim: rgba(125, 98, 24, 0.12); --bg: #ffffff; --surface: #f5f8fb; --surface-2: #e9eff6; --surface-3: #dbe4ee; --border: #d2dde9; /* The navy becomes the ink, which is what keeps the two themes recognisably the same brand. 17.93:1. */ --text: #0a1826; --text-on-accent: #ffffff; --text-muted: #4a5f75; --text-dim: #5f7185; /* ADDED THIS PASS — this brand was the one asymmetry in the file. Every other brand restates --brand-logo in its light block; meridian did not, so the DARK mark (filled #c9a227, the bright antique gold chosen to sit on navy) leaked into light mode and rendered pale gold on a near-white header. Refilled with the light accent, exactly as the other four do. */ --brand-logo: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2032%2032%27%3E%3Cpath%20fill=%27%237d6218%27%20d=%27M16,1L18,7H14ZM14,7h4v24h-4zM6.5,3L8.5,9H4.5ZM5,9h3v6H5zM25.5,3L27.5,9H23.5ZM24,9h3v6h-3zM4,14h24v3.2H4z%27/%3E%3C/svg%3E"); } /* ══════════════════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════════════════ BRAND 4 of 5 — `greenscreen` P1 green phosphor CRT. Monochrome by construction: the text ramp is three steps of the same green rather than three greys, and --font is the mono stack so the whole product sets in monospace. REVISED THIS PASS — the green was wrong and the font was absent: - The hue was #33ff33, which is sRGB's pure green channel with a little red and blue added: a WEB green, maximally saturated, a colour a phosphor cannot physically produce. Real P1 (zinc orthosilicate) sits around 525 nm and reads YELLOW-shifted and slightly desaturated — the green of a tube, not of a hex triplet. The whole ramp moves with it, because a monochrome brand where the accent and the text are different greens is just a two-colour brand. - --font/--mono named 'IBM Plex Mono' first. Nothing ships it, so the stack silently fell through to JetBrains Mono / SFMono / Menlo and the product set in a clean modern face. Now IBM's own 3270, self-hosted — see the @font-face at the top of this file. Scanlines, glow, uppercasing, letter-spacing and corner radius are NOT set here and must not be: those live in ui/site/site.css, scoped to [data-brand='greenscreen'], and are owned by that file. This block's side of that contract is to keep --accent, --text-on-accent, --bg, --surface, --border and --font sane for it to build on. ══════════════════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════════════════ */ /* ── greenscreen / DARK ─────────────────────────────────────────────── */ :root[data-brand='greenscreen'] { /* P1 phosphor, not web green. Yellow-shifted (R above B) and pulled off full saturation. Near-black on it is 11.29:1. */ --accent: #52e03c; --accent-dim: rgba(82, 224, 60, 0.15); /* Not neutral black — every surface carries a green cast, which is what makes it read as a glowing tube rather than a dark theme with green text. */ --bg: #0a1207; --surface: #0e1a0a; --surface-2: #13260e; --surface-3: #1a3313; --border: #1e3d17; /* The monochrome ramp: three steps down the same phosphor, no grey anywhere. Re-derived onto the P1 hue above. 11.83 / 6.62 / 5.38 on --bg — note --text-dim clears AA comfortably here, which it does NOT in the SDK's own palette, and is now further clear than the 4.56:1 the old ramp managed. */ --text: #63e858; --text-on-accent: #061206; --text-muted: #33ab2c; --text-dim: #339c2b; --muted: #339c2b; /* Status colours ARE overridden here, with a reason: a monochrome danger state is genuinely unusable — "something is wrong" cannot be signalled by the same green as "this worked". Hue separation is kept but every value is dimmed and desaturated toward the phosphor world so nothing looks like it escaped from a different product. success stays the accent green on purpose: in this brand, working IS the normal state — so it moved with the accent onto the P1 hue. All measured on --bg: info 9.36, warning 8.48, success 11.29, danger 6.35. */ --info: #2ec9c9; --info-bg: rgba(46, 201, 201, 0.12); --warning: #d9a520; --warning-bg: rgba(217, 165, 32, 0.12); --success: #52e03c; --success-bg: rgba(82, 224, 60, 0.12); --danger: #ff5f4d; --danger-bg: rgba(255, 95, 77, 0.12); /* A green ramp, as asked. TRADEOFF, STATED: the SDK's stock chart palette is ten hues chosen to be mutually distinguishable, and collapsing it to one hue trades that away — series 3 and 5 differ only in lightness, and any viewer with reduced contrast sensitivity will struggle to separate them. That is the cost of the joke and it is fine for a demo; it would not be fine for a real deployment reading claims data off a line chart. Series are ordered light/dark alternating to maximise what separation remains, and 7 and 9 lean cyan to buy a little more. */ --chart-2: #00d926; --chart-3: #7cff5c; --chart-4: #00a81f; --chart-5: #b6ff8f; --chart-6: #00801a; --chart-7: #4dffb0; --chart-8: #d9ffb3; --chart-9: #2eb86b; --chart-10: #1a6b12; --brand-logo: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2032%2032%27%3E%3Cpath%20fill=%27%2352e03c%27%20d=%27M16,1L18,7H14ZM14,7h4v24h-4zM6.5,3L8.5,9H4.5ZM5,9h3v6H5zM25.5,3L27.5,9H23.5ZM24,9h3v6h-3zM4,14h24v3.2H4z%27/%3E%3C/svg%3E"); --brand-logo-on: ''; --brand-logo-width: 22px; --brand-logo-height: 22px; /* --font IS the mono stack — that is the brand. Set once; sdk.css's light block does not touch --font, so the light block below does not restate it and monospace survives the theme toggle. --font AND --mono ARE THE SAME FAMILY, deliberately. A terminal has one font: there is no "code font" on a VT, there is only the character generator. Any component that reaches for --mono (code blocks, ID columns, currency alignment) must therefore be indistinguishable from body text here, and a second family would break the illusion at exactly the places a user looks closest. Fallback order is now blockiest-first among faces that actually exist on macOS: Monaco (1984, the original bitmap-derived Mac terminal face) then Courier New (typewriter, flat serifs). Both read far more period-correct than SFMono or JetBrains Mono, which are what this stack used to land on. 'IBM Plex Mono' has been REMOVED: it was first in the stack and is not shipped anywhere, so it matched nothing and did nothing. */ --font: 'IBM 3270', 'Monaco', 'Courier New', monospace; --mono: 'IBM 3270', 'Monaco', 'Courier New', monospace; } /* ── greenscreen / LIGHT ──────────────────────────────────────────────── WHY THIS EXISTS AT ALL, since the next reader will ask: A light CRT is not a real object — a phosphor tube emits, it does not reflect, so there is no honest "light mode" of a terminal. Two options were available and one was rejected: REJECTED: keep it dark in both themes. It is the literal-minded answer, but is permanent global chrome in this shell. A brand that ignores the toggle makes a working control appear broken, and "the theme button does nothing" is a bug report, not a joke landing. CHOSEN: shift metaphor rather than invent a glowing white tube. Light mode is the PRINTOUT — dark phosphor-green ink on fanfold paper. Monospace and the monochrome green discipline both carry over, the toggle visibly does something, and it stays inside the same 1970s world instead of leaving it. ─────────────────────────────────────────────────────────────────────── */ :root[data-brand='greenscreen'][theme='light'] { /* Same P1 yellow-shift as the dark block, darkened for paper. 5.89:1 both ways — it reads as ink on --bg, and --text-on-accent reads on it. */ --accent: #2a6b1a; --accent-dim: rgba(42, 107, 26, 0.12); /* Paper, not white — very slightly warm and green-shifted so it reads as stock rather than as a screen. */ --bg: #f2f4ee; --surface: #e8ece2; --surface-2: #dde2d5; --surface-3: #d1d8c8; --border: #c4ccb9; --text: #102b08; --text-on-accent: #f2f4ee; --text-muted: #3a5c22; --text-dim: #47682b; --muted: #47682b; /* Same reasoning as the dark block; re-darkened for paper. Measured on --bg: info 5.68, warning 5.64, success 5.89, danger 6.43. */ --info: #0f6b6b; --info-bg: rgba(15, 107, 107, 0.1); --warning: #7a5c00; --warning-bg: rgba(122, 92, 0, 0.1); --success: #2a6b1a; --success-bg: rgba(42, 107, 26, 0.1); --danger: #a52a1a; --danger-bg: rgba(165, 42, 26, 0.1); /* Restated because the dark ramp would otherwise leak (see the header): the pale steps #b6ff8f and #d9ffb3 are invisible on paper. Same distinguishability caveat as above applies. */ --chart-2: #14803a; --chart-3: #2e5c1f; --chart-4: #3fa04a; --chart-5: #16401a; --chart-6: #5c8f2e; --chart-7: #0f6b52; --chart-8: #7aa83f; --chart-9: #24663a; --chart-10: #0a2e0a; --brand-logo: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2032%2032%27%3E%3Cpath%20fill=%27%232a6b1a%27%20d=%27M16,1L18,7H14ZM14,7h4v24h-4zM6.5,3L8.5,9H4.5ZM5,9h3v6H5zM25.5,3L27.5,9H23.5ZM24,9h3v6h-3zM4,14h24v3.2H4z%27/%3E%3C/svg%3E"); } /* ══════════════════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════════════════ BRAND 5 of 5 — `amber` The other phosphor. DEC VT100/VT220 amber, treated identically to `greenscreen` — same structure, same reasoning, same light-mode decision, and the same two revisions this pass: - The accent was #ffb000, the textbook P3 amber, with the blue channel at ZERO. A tube with no blue output at all is the amber equivalent of the web green next door: it reads as a pure saturated orange signal colour rather than a phosphor, and it collided with the SDK's own warning semantics. #ffa62e is warmer, fractionally desaturated (blue lifted off the floor) and closer to how a VT220 actually looks lit. - Same absent-'IBM Plex Mono' problem as greenscreen; same fix. The site.css contract described in the greenscreen block applies here too: scanlines/glow/casing/radius are that file's, scoped to [data-brand='amber']. ══════════════════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════════════════ */ /* ── amber / DARK ───────────────────────────────────────────────────── */ :root[data-brand='amber'] { /* VT220 amber rather than textbook P3 #ffb000 — see the banner. Near-black on it is 10.51:1. */ --accent: #ffa62e; --accent-dim: rgba(255, 166, 46, 0.15); /* Warm-shifted ground, the amber counterpart of greenscreen's green cast. */ --bg: #140d00; --surface: #1c1300; --surface-2: #281b00; --surface-3: #362500; --border: #3d2b00; /* Amber ramp: 12.53 / 6.60 / 4.99 on --bg. --text-dim WAS #8a6220 at 3.54:1. The previous pass measured that, called it inherited debt because the SDK's own pairing is 3.05:1, wrote down a replacement — and then shipped the failing value anyway. Fixed now: #a8791f is 4.99:1. "No worse than the SDK" was never the standard. */ --text: #ffc85e; --text-on-accent: #140d00; --text-muted: #c98a33; --text-dim: #a8791f; --muted: #a8791f; /* Overridden for the same reason as greenscreen. Here warning is left AS the accent amber — in an amber world a caution state genuinely is the house colour — while success is pulled toward green and danger toward red, because those two are the pair that must never be confused. Measured on --bg: info 5.98, warning 10.51, success 6.06, danger 4.75. */ --info: #4d9aa8; --info-bg: rgba(77, 154, 168, 0.12); --warning: #ffa62e; --warning-bg: rgba(255, 166, 46, 0.12); --success: #6b9e3f; --success-bg: rgba(107, 158, 63, 0.12); --danger: #d9503c; --danger-bg: rgba(217, 80, 60, 0.12); /* Amber ramp; same single-hue distinguishability tradeoff as greenscreen. */ --chart-2: #ff8c00; --chart-3: #ffd166; --chart-4: #cc7000; --chart-5: #ffe6a8; --chart-6: #a35800; --chart-7: #ffab40; --chart-8: #e8c48f; --chart-9: #7a4200; --chart-10: #5c3100; --brand-logo: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2032%2032%27%3E%3Cpath%20fill=%27%23ffa62e%27%20d=%27M16,1L18,7H14ZM14,7h4v24h-4zM6.5,3L8.5,9H4.5ZM5,9h3v6H5zM25.5,3L27.5,9H23.5ZM24,9h3v6h-3zM4,14h24v3.2H4z%27/%3E%3C/svg%3E"); --brand-logo-on: ''; --brand-logo-width: 22px; --brand-logo-height: 22px; /* Identical stack and identical reasoning to greenscreen — one terminal font, --font and --mono the same family, blockiest available fallbacks, and the unshipped 'IBM Plex Mono' removed. See that block. */ --font: 'IBM 3270', 'Monaco', 'Courier New', monospace; --mono: 'IBM 3270', 'Monaco', 'Courier New', monospace; } /* ── amber / LIGHT ────────────────────────────────────────────────────── Same printout metaphor and the same rejected alternative as greenscreen — the full reasoning is written out above that brand's light block and is not repeated here. Amber ink on warm paper. */ :root[data-brand='amber'][theme='light'] { --accent: #8a5a00; --accent-dim: rgba(138, 90, 0, 0.12); --bg: #faf6ef; --surface: #f2ece0; --surface-2: #e8e0d0; --surface-3: #ddd3bf; --border: #cfc3ab; --text: #2b1a00; --text-on-accent: #faf6ef; --text-muted: #5c3d00; --text-dim: #8a6a3d; --muted: #8a6a3d; /* Measured on --bg: info 5.68, warning 5.50, success 5.87, danger 6.41. */ --info: #1f6b78; --info-bg: rgba(31, 107, 120, 0.1); --warning: #8a5a00; --warning-bg: rgba(138, 90, 0, 0.1); --success: #3d6b1f; --success-bg: rgba(61, 107, 31, 0.1); --danger: #a5301c; --danger-bg: rgba(165, 48, 28, 0.1); /* Restated so the pale dark-mode steps do not leak onto paper. */ --chart-2: #a35800; --chart-3: #5c3100; --chart-4: #c47a1f; --chart-5: #3d2000; --chart-6: #8a6a3d; --chart-7: #7a4200; --chart-8: #b08a4a; --chart-9: #663d0a; --chart-10: #2b1a00; --brand-logo: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2032%2032%27%3E%3Cpath%20fill=%27%238a5a00%27%20d=%27M16,1L18,7H14ZM14,7h4v24h-4zM6.5,3L8.5,9H4.5ZM5,9h3v6H5zM25.5,3L27.5,9H23.5ZM24,9h3v6h-3zM4,14h24v3.2H4z%27/%3E%3C/svg%3E"); } /* ══════════════════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════════════════ THE GLOBAL HEADER — --header-bg per brand ══════════════════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════════════════ sdk.css leaves the header on --surface in every brand, so the one piece of chrome that is visible on every screen is the only piece that is not branded. These blocks set it deliberately. TWO THINGS HERE ARE NOT WHAT THEY LOOK LIKE. Both were checked against sdk.css rather than assumed, and both fail SILENTLY when got wrong. ── (1) --header-text AND --header-accent ARE INERT. DO NOT TRUST THEM. ── sdk.css:393-394 DEFINES both, on ui-platform. Nothing anywhere READS either one. Searching the SDK, this plugin and the v3 backend for the two names returns exactly three things: those definitions, the lint allow-list at tools/lint-sdk.mjs:71-72, and nothing else. The only header token with a live consumer is --header-bg, at sdk.css:421. So the header's text colour is NOT --header-text. It is ordinary inherited --text, arriving from :root by way of ui-platform. Which means: --header-bg MUST CONTRAST WITH --text, NOT WITH --header-text. That is not pedantry, it removes an option. The obvious move for meridian is a deep navy header bar in LIGHT mode — very much that carrier's look. It cannot be done: light-mode --text IS the navy (#0a1826), so the bar would render navy on navy, and adding --header-text: #ffffff beside it would read in review as a fix while having no effect whatsoever. Every value below is therefore chosen against its own brand/theme --text, and the two light "ink on dark bar" brands are deliberately not attempted. --header-text IS still set below, to precisely the --text each block already resolves to. That is documentation rather than effect: it costs nothing today, it states the coupling at the point someone will read it, and if the token is ever wired up the header keeps rendering exactly what it renders now instead of lurching. --header-accent is left alone — there is no correct value to state for something with no consumer and no fallback site. If either is ever given a consumer, revisit this whole section; the light-mode navy bar becomes possible the moment it is. ── (2) THE SELECTOR MUST REACH ui-platform, NOT :root ── sdk.css declares --header-bg on the `ui-platform` ELEMENT (line 391), not on :root. A custom property declared ON an element always beats one INHERITED into it, whatever the specificity of the rule it was inherited from — they match different elements, so specificity never gets compared. Therefore: :root[data-brand='x'] { --header-bg: ... } <-- INERT. Silently. loses to ui-platform's own `--header-bg: var(--surface)` for the entire subtree, and the header simply stays on --surface with nothing reported. This is the trap that makes header branding look done when it is not. Each brand below carries BOTH selectors: :root[data-brand='x'] — for any ui-global-header mounted outside a ui-platform, which falls back to var(--surface) at sdk.css:421 and so reads :root :root[data-brand='x'] ui-platform — (0,2,1) against sdk's (0,0,1), for the real header in shell.html and the light pair repeats it at (0,3,1). --header-border is deliberately NOT set: it already resolves through ui-platform to each brand's own --border, which is the right answer in all five. --header-height is layout, and out of scope for this file. */ /* ── trident ───────────────────────────────────────────────────────── Darker than --bg in dark mode: the bar becomes the plate the lime mark sits on, which is how OneShield's own site treats its masthead. In light mode nothing can be lighter than the #ffffff page, so it steps down instead. --text is 17.4:1 / 14.1:1 on these. */ :root[data-brand='trident'], :root[data-brand='trident'] ui-platform { --header-bg: #0e0e0f; --header-text: #eeeeee; /* inert — see (1). Mirrors --text. */ } :root[data-brand='trident'][theme='light'], :root[data-brand='trident'][theme='light'] ui-platform { --header-bg: #e4e4e4; --header-text: #151516; /* inert — see (1). Mirrors --text. */ } /* ── nukor ─────────────────────────────────────────────────────────── Sits BETWEEN --bg and --surface rather than on either. This brand's claim is that it looks like the stock product, so the header is differentiated by the smallest step that still reads as a distinct bar. --text is 15.6:1 / 13.9:1. */ :root[data-brand='nukor'], :root[data-brand='nukor'] ui-platform { --header-bg: #151823; --header-text: #e4e6ef; /* inert — see (1). Mirrors --text. */ } :root[data-brand='nukor'][theme='light'], :root[data-brand='nukor'][theme='light'] ui-platform { --header-bg: #f0f1f3; --header-text: #1a1d27; /* inert — see (1). Mirrors --text. */ } /* ── meridian ──────────────────────────────────────────────────────── Dark mode goes DEEPER than --bg: the masthead is the hull below the waterline, the most saturated navy in the brand. Light mode cannot do the same in reverse — see (1) for why the navy bar is unavailable — so it takes --surface-2, a pale institutional blue-grey. 15.4:1 / 14.6:1. */ :root[data-brand='meridian'], :root[data-brand='meridian'] ui-platform { --header-bg: #071523; --header-text: #e8eef5; /* inert — see (1). Mirrors --text. */ } :root[data-brand='meridian'][theme='light'], :root[data-brand='meridian'][theme='light'] ui-platform { --header-bg: #e9eff6; --header-text: #0a1826; /* inert — see (1). Mirrors --text. */ } /* ── greenscreen ───────────────────────────────────────────────────── --header-bg IS --bg, exactly. A CRT does not have a raised title bar: the glass is one continuous surface and the status line is just the top row of the same screen. Taking --surface here would emboss a panel edge across the top of the tube and break precisely the illusion site.css's scanlines are building underneath. The --border underneath stays, which is the one rule of ruled phosphor separating the status line from the field. */ :root[data-brand='greenscreen'], :root[data-brand='greenscreen'] ui-platform { --header-bg: #0a1207; --header-text: #63e858; /* inert — see (1). Mirrors --text. */ } :root[data-brand='greenscreen'][theme='light'], :root[data-brand='greenscreen'][theme='light'] ui-platform { --header-bg: #f2f4ee; --header-text: #102b08; /* inert — see (1). Mirrors --text. */ } /* ── amber ─────────────────────────────────────────────────────────── Same reasoning as greenscreen, same single continuous screen. */ :root[data-brand='amber'], :root[data-brand='amber'] ui-platform { --header-bg: #140d00; --header-text: #ffc85e; /* inert — see (1). Mirrors --text. */ } :root[data-brand='amber'][theme='light'], :root[data-brand='amber'][theme='light'] ui-platform { --header-bg: #faf6ef; --header-text: #2b1a00; /* inert — see (1). Mirrors --text. */ }