/* Kurdify / KurdConnect marketing site, shared design system. Tokens mirror the app so pages feel native. Powered by Kavalsia Inc. */ /* Copyright (c) Kavalsia Inc. All Rights Reserved. Lead Architect & Engineer: Siavash Sadighi */ /* Language bootstrap, paired with the inline script build.py injects (inject_lang_boot). The pages are authored in Sorani, so the served markup paints ckb/rtl. site.js swapped the text on DOMContentLoaded from a script at the END of body, which by definition runs after that first paint, so anyone who had ever chosen English watched the Sorani page appear and flip on every visit. The head script fixes lang/dir/theme synchronously, which kills the layout jump, and sets this class only when the stored language is NOT the authored one, so the text swap happens unseen. Sorani visitors, the default and the majority, are never hidden for a moment. visibility rather than display: the layout is already correct, only the words are wrong, so nothing needs to reflow when it is revealed. The script also drops the class after 1200ms come what may, because a page that stays hidden is a worse failure than a flash. */ html.kx-lang-boot body{visibility:hidden} /* And if CSS loads but JS is dead, never hide anything: no class is ever added without the script. */ @media print{html.kx-lang-boot body{visibility:visible}} :root{ --bg:#0b1418;--panel:#0f1d22;--panel2:#12252b;--line:#1e3a42;--line2:#295059; --text:#eaf4f2;--muted:#8fb0ad;--gold:#e0b64a;--gold2:#f0cd6e;--green:#2fbf87;--red:#e0574f; /* TWO GOLDS, because gold does two jobs and they need opposite treatment per theme. --goldink is the text that sits ON a gold fill. --goldtext is gold used AS text on the page ground. Dark theme: the fill is bright, so its ink is near-black, and gold as text is already legible. Light theme flips both (see the block below). Hardcoding either one is how .btn shipped var(--goldink,#231a05) on a #8a6508 fill at 3.23:1 across every marketing page. */ --goldink:var(--goldink,#231a05); --goldtext:var(--gold); /* --greentext is the same idea as --goldtext, for the one place green is text sitting on its OWN green-tinted fill rather than on the page ground: .pill.green (queue #585, span.pill "Claimed"/"Published"). --green stays a status/confirmation token used elsewhere (icons, dots, borders, gradients) and is left alone on purpose; moving it would move every one of those surfaces too. Measured with tools/contrast-proof.mjs on the marketing home before this fix: dark 4.1:1 and 3.74:1, light 4.47:1 and 3.94:1, all under the 4.5 floor. */ --greentext:#42d099; --dred:#7c241d;--dred2:#b23a2e; --sun:#d9b13a;--r:16px; } html[data-theme="light"]{ --bg:#f4f7f6;--panel:#ffffff;--panel2:#eef3f2;--line:#dce6e4;--line2:#c2d4d0; /* --muted and --green each sat a hair under AA in their own most common pairing: --muted on the page ground read 4.41:1, and --green on its own 16% tint (.pill.green) read 4.25:1. Both are nudged down rather than special-cased per component, because the failure is the token and not the one place it was noticed. THAT NUDGE WAS NOT ENOUGH FOR --green, and queue #585 stopped repeating it. Re-measured 2026-08-26: .pill.green still read 4.47:1 and 3.94:1 in light, 4.1:1 and 3.74:1 in dark, both under the 4.5 floor in both themes. Nudging --green further would have moved every OTHER surface that reads it as status/confirmation (icons, dots, borders, gradients), which is exactly the per-component special-casing this note argues against for a genuinely shared token. The difference here is that --green's most-common pairing (its own translucent fill) is not actually shared with those other surfaces, so #585 gave that one pairing its own token, --greentext, instead: same shape as the --gold/--goldtext split below. */ --text:#12262c;--muted:#4d6560;--gold:#8a6508;--gold2:#7a5804;--green:#0a6740;--red:#cc3b31;--sun:#c99a2e; /* --greentext, light half (queue #585): darker still than --green, because the .pill.green fill composites lighter here than in dark (the light ground has less to absorb the 16% tint), so the text needs MORE room, not the same nudge. Light has no headroom where dark has plenty (the fill rule, .nexus/design-contract.md #10): tuned to the tougher of the two marketing-home readings (the Published pill's lighter composite background) with a small margin, then checked against the other. */ --greentext:#095c39; /* --gold/--gold2 NOT touched for queue #492, on purpose: queue #385 (see the appended