/* ═══════════════════════════════════════════════════════════════════════════ arc-ui.css · THE ARCVERSE DESIGN SYSTEM Rewritten 29 August 2026, against Darren's target design. 🚨 THE FIRST VERSION OF THIS FILE WAS WRONG AND THE CORRECTION IS THE POINT. It EXTRACTED the estate's existing card and button and tidied them — a component inventory on a cream page. Darren's response, with two mockups: "this is the style im loooking for, what you showed me seems a long way away from this." He was right. Tidying what exists cannot produce a product design, and the brief was never "make the current thing consistent". 🔒 SO THIS FILE IS DESIGNED TO A TARGET, NOT DERIVED FROM AN AVERAGE. The shape it serves: a dark navigation shell, a photographic hero with a navy wash over it, dense information cards with real hierarchy, saturated gradient feature cards, arena tiles, avatar stacks, progress rings, and a level ladder. Restraint in the chrome, colour in the content. ⚠ WHAT SURVIVED FROM THE FIRST VERSION, because it was right: keyboard focus on everything (measured: 77 pages styled :hover, 7 used :focus-visible), a disabled button that stops receiving clicks, a destructive colour that is not the save colour, honest loading/empty/error states, and reduced-motion. 🔒 NO BUILD STEP. Plain CSS custom properties and plain selectors. 21st.dev ships React and Tailwind; what is taken is the DESIGN — the density, the gradient language, the spacing rhythm — never the toolchain. Adopting a pipeline is Darren's ruling alone. 🔒 REQUIRES arc-tokens.css FIRST for --navy / --gold / --teal etc. Everything below is expressed in tokens, so an arena recolours by overriding tokens. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ══ THE DEEP RAMP ─ ONE AUTHORED NAVY, THREE DERIVED SURFACES. Added 1 Sep 2026 by arc-frontend (one-screen productionisation proof, UNIT B). WHAT WAS HERE BEFORE: --shell #0b1424 and --shell-2 #101d33, two authored hexes with no stated relationship to --navy. Measured 1 Sep 2026, controls #000/#fff = 21.00 and #fff/#fff = 1.00: those two sit 1.016:1 and 1.009:1 from the derived surfaces below ─ the SAME surfaces under a second set of names, authored independently and free to drift apart at the next edit. 🔒 SO THE RAMP IS DERIVED AND --shell IS AN ALIAS. Retinting ARC's dark chrome is now ONE line (--deep-base), and every surface moves in step. 🚨 --deep-base IS A LITERAL AND NOT var(--navy), AND THAT IS THE WHOLE POINT OF THE LINE. community.html:62 and community-profiles.html:65 both run document.documentElement.style.setProperty('--navy', C.color_primary), which beats any :root rule. Measured live 1 Sep 2026: create_client_community performs NO colour validation and update_community checks format only, so #ffffff passes cleanly, and the picker is the native OS colour wheel. A pale tenant colour driving this ramp would resolve "deep" to oklab L 0.50 ─ a near-white STRUCTURAL surface carrying white text. Neither of those two pages loads arc-ui.css today, so nothing is broken now; deriving from the literal costs nothing and ends the class. ⚠ A STRUCTURAL SURFACE IS NOT A TENANT COLOUR. An arena that wants its own chrome overrides --deep-base, which is a decision. Inheriting one from a brand-colour picker is an accident. MEASURED (controls 21.00 / 1.00), white text on each: --deep #0b1220 oklab L .1827 18.72:1 --deep-2 #121c30 oklab L .2269 17.01:1 --deep-3 #18243e oklab L .2626 15.43:1 Old --shell #0b1424 → new #0b1220 is an RGB distance of 4.47, and 1.016:1 between them. 🔒 THAT IS BELOW WHAT AN EYE RESOLVES, SO THE EYE IS NOT THE INSTRUMENT HERE ─ diff the computed background; do not squint at a screenshot. */ --deep-base: #1a2744; /* THE one authored navy in this file. Retint here. */ /* 🚨 THESE FOUR ARE THE DEGRADED FALLBACK, NOT THE DESIGN. They are overridden three lines down by the @supports block, which is what actually renders on every browser from 2023 onward. WHY THEY EXIST AT ALL: color-mix() is the FIRST use of that function anywhere in site/ - checked repo-wide 1 Sep 2026, control 'linear-gradient' matched 78 files, 'color-mix' matched only these lines. A custom property is an arbitrary token stream, so an unsupporting browser ACCEPTS the declaration and fails at SUBSTITUTION time: background:var(--shell) then becomes invalid-at-computed-value-time, resolves to transparent, and the sidebar renders as WHITE TEXT ON THE CREAM PAGE. Silent, total, and only on the browsers least likely to be in the room when it is tested. 🔒 SO THE FALLBACK IS FLAT, NOT WRONG: all three depths collapse to the authored navy. Flatter chrome than intended, and white text on it reads 14.81:1. The property that must never fail is legibility, not depth. 🔒 AND IT NEEDS NO MAINTENANCE. Retinting --deep-base moves the fallback too, because the fallback is var(--deep-base) and not a snapshot of it. Four static hexes here would have been four more authored navies to keep in step, which is the exact problem this ramp exists to end. */ --deep: var(--deep-base); --deep-2: var(--deep-base); --deep-3: var(--deep-base); --deep-line: rgba(255,255,255,.14); /* 🔒 ALIASES, NOT COPIES. All 24 var(--shell*) references in this file keep working unchanged, and no page in site/ pins #0b1424 (checked repo-wide; control: --shell itself returns 27 hits). */ --shell: var(--deep); --shell-2: var(--deep-2); --shell-line: rgba(255,255,255,.08); --shell-text: rgba(255,255,255,.72); --shell-dim: rgba(255,255,255,.58); /* was .45 = 4.40:1 on --shell-2, measured. Re-measured on the derived --deep-2: 6.47:1; --shell-text is 9.25:1. */ /* ══ THE HERO SCRIM FLOOR. Darren's ruling 2, 1 Sep 2026. The 96deg wash over the hero photograph ended at alpha .46, which over a pure-white photograph left white text at 3.24:1 ─ a FAIL. Which parts of a photograph are white is a property of the photograph, not of the CSS, so the wash is what puts a floor under the text. .58 makes that floor 4.87:1 over ANY image. Controls 21.00 / 1.00. 🔒 A TOKEN, NOT A STOP BAKED INTO A GRADIENT: this is the dial between legibility and how much of the picture survives, and it must stay turnable without editing a four-stop gradient in two places. */ --scrim-floor: .58; --sp-1: 6px; --sp-2: 10px; --sp-3: 14px; --sp-4: 20px; --sp-5: 28px; --sp-6: 40px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; /* 🚨 MEASURED 30 Aug 2026: --muted (#6b7a8d, from arc-tokens.css) on white gives 4.38:1 — UNDER the 4.5 floor for text below 18.66px, and almost every caption, timestamp and "View all" in this system is 11-13px. This is the shade those use instead. 🔒 arc-tokens.css is NOT edited here: --muted is a shared estate token on 131 pages and changing it is the Foreman's call, not a side effect of building one screen. Reported, not quietly overwritten. */ --muted-ink: #5e6b7b; /* GOLD ON A SATURATED GRADIENT, MEASURED 30 Aug 2026. --gold (#e8a020) on the closer band reads 5.38:1 over its violet stop but only 3.95:1 over its mid-blue stop, and the per-channel-max bound anywhere along that gradient is 3.73. The clamp yields 18.4px at 768px, so the floor is 4.5 and the band FAILED at every width below 1440 while passing at 1440 purely because the text got bigger. #f2bb52 is the same hue two steps lighter and reads 6.81 / 5.00 / 5.32 at the three stops, worst-case bound 4.72 - a pass everywhere on the gradient, not at one viewport. Use this ONLY for gold TEXT on a gradient; --gold stays the brand colour for fills and rings. */ --gold-lift: #f2bb52; --ring: 0 0 0 3px rgba(232,160,32,.45); --lift-1: 0 1px 2px rgba(11,20,36,.06); --lift-2: 0 2px 4px rgba(11,20,36,.05), 0 12px 28px rgba(11,20,36,.08); /* ── the gradient language. These are the saturated feature cards and the arena tiles. Each is a pair so a tile can be built from one variable. */ --g-violet: linear-gradient(150deg,#3f2a6d,#6d3fa8); --g-teal: linear-gradient(150deg,#0a3a3d,#0d6d66); --g-green: linear-gradient(150deg,#114023,#176e3e); --g-amber: linear-gradient(150deg,#572d09,#8f5210); --g-rose: linear-gradient(150deg,#5e1030,#96234f); --g-blue: linear-gradient(150deg,#12305e,#1d5aa8); --g-navy: linear-gradient(150deg,#0f1c30,#1e3355); --g-gold: linear-gradient(150deg,#8a6414,#d9a441); } /* 🔒 THE REAL RAMP. Everything above is the safety net; this is the design. Split into @supports rather than declared inline because a custom property cannot carry its own fallback - see the note on --deep above for what happens on a browser that cannot substitute it. ⚠ --shell-line is DELIBERATELY NOT aliased to --deep-line. --shell-line is rgba white, which works over all three depths; an opaque mix is only right on one of them. Two different jobs, kept apart on purpose. */ @supports (background: color-mix(in oklab, #000 50%, #fff)) { :root { --deep: color-mix(in oklab, var(--deep-base) 34%, #05080f); --deep-2: color-mix(in oklab, var(--deep-base) 65%, #05080f); --deep-3: color-mix(in oklab, var(--deep-base) 90%, #05080f); --deep-line: color-mix(in oklab, var(--deep-base) 60%, #ffffff); } } *, *::before, *::after { box-sizing: border-box; } /* ═══ THE SHELL ═════════════════════════════════════════════════════════════ */ .arc-shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; background: var(--bg,#f4f1ea); } @media (min-width: 1000px) { .arc-shell { grid-template-columns: 232px minmax(0,1fr); } } .arc-side { background: var(--shell); color: #fff; padding: var(--sp-4) var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); } @media (min-width: 1000px) { .arc-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; } } .arc-brand { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2); color: #fff; text-decoration: none; } .arc-brand img { width: 34px; height: 34px; object-fit: contain; } .arc-brand b { display: block; font-family: 'Cormorant Garamond',Georgia,serif; font-size: 1.22rem; font-weight: 600; letter-spacing: .10em; } .arc-brand span { display: block; font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; color: var(--shell-dim); } .arc-navlabel { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold,#e8a020); padding: var(--sp-3) var(--sp-2) var(--sp-1); font-weight: 700; } .arc-nav { display: flex; flex-direction: column; gap: 2px; } .arc-nav a { display: flex; align-items: center; gap: var(--sp-2); padding: 9px var(--sp-2); border-radius: var(--r-sm); color: var(--shell-text); text-decoration: none; font-size: .84rem; border-left: 3px solid transparent; transition: background-color .15s, color .15s; } .arc-nav a:hover { background: rgba(255,255,255,.05); color: #fff; } /* 🔒 The active item is marked TWICE - fill and a gold rule - because colour alone is not a signal everyone receives. */ .arc-nav a[aria-current="page"] { background: var(--shell-2); color: #fff; font-weight: 600; border-left-color: var(--gold,#e8a020); } .arc-nav .ico { width: 17px; text-align: center; opacity: .85; flex: none; } .arc-nav .n { margin-left: auto; font-size: .68rem; font-weight: 700; background: rgba(255,255,255,.12); border-radius: var(--r-pill); padding: 1px 7px; } /* ═══ TAB-STYLE NAV BUTTON ══════════════════════════════════════════════════ Added 5 Sep 2026 (arc-frontend), for fac-desk.html — a caseload desk that switches PANELS in place rather than navigating pages, so its sidebar items are