/* ============================================================================ CREATIVE JOLT POWERHOUSE — DESIGN SYSTEM (cjfw-tokens.css) Built by Canvas. The single source of truth for tokens + components across every PowerHouse screen mockup. ONE design system, one designer's hand. Governs: Constitution LAW 29 (one consistent design system), LAW 30 + S-6 (token-driven per-user themes — resolve before paint), LAW 31 (no-flash in-place updates), LAW 28 + S-14 (accessibility floors: 4.5:1 text, 44px targets, 16px base body, 3:1 focus), LAW 27 (purposeful, GPU-accelerated motion; honors reduced-motion). Naming: per S-1, CJ-authored tokens use --cjfw-* and components use .cjfw-*. THEME ARCHITECTURE ------------------ Every color, surface, shadow and accent below resolves through a token. A theme is ONE block of root-token overrides selected by [data-cjfw-theme]. Switching themes = swapping that single root set — no per-page redesign, no duplicated components. The theme is read from storage and applied to BEFORE first paint (inline boot script in each page ), so a user never sees a flash of the default theme (LAW 30 + LAW 31). ============================================================================ */ /* ---------------------------------------------------------------------------- 1. BRAND CONSTANTS (master brand — fixed regardless of theme) Creative Jolt master palette, per Naomi's rebrand master doc: Orange #fe5d02 (controlled emphasis, not spectacle) · Amber #fbaa1c Deep Plum #55335f (strategic accent) · charcoal/grays · white = infrastructure ---------------------------------------------------------------------------- */ :root{ --cjfw-brand-orange: #fe5d02; /* Creative Jolt Orange — the signature */ --cjfw-brand-orange-dk: #d94d00; --cjfw-brand-amber: #fbaa1c; --cjfw-brand-plum: #55335f; --cjfw-brand-charcoal: #56545f; --cjfw-brand-mid: #706d77; --cjfw-brand-neutral: #d3d6d8; /* Outcome semantics — these MEAN something, consistent across every screen */ --cjfw-pos: #1f9d63; /* good / up / booked / on-track */ /* --cjfw-warn: the DARK-theme value (the 4 light themes override it to #8f5c08). #c47f12 → #cc8413: the old value cleared AA on --cjfw-surface but fell to 4.32 on --cjfw-surface-3 in default/surge and 4.35 in electric, which is where the "Affects live data" pill paints. Now ≥4.65:1 on surface-3 in all 8 dark themes (worst: default/surge 4.65). Raising it only RAISES contrast on every dark surface, and warn is text everywhere except two non-text indicators (.cjfw-attnchip--warn .sev, .cjfw-riskdot--likely). Any change here is measured by tests/test_token_contrast.py — do not eyeball it. */ --cjfw-warn: #cc8413; /* attention / needs review */ /* --cjfw-neg is the FILL, not the text. Read the next comment before using it. The note above says warn "is text everywhere except two non-text indicators" — which is WHY warn could be repaired by raising its value. neg cannot, and the difference is the whole point: neg is ALSO a fill under #fff (.cjfw-btn--danger, line ~2914), so its two jobs pull opposite ways. Proved, not guessed (G-190). For the default surface #161b26: AA as TEXT on surface → luminance >= 0.2242 AA carrying #fff as FILL → luminance <= 0.1833 Empty range. NO colour of any hue satisfies both — this is arithmetic, not a palette problem, so there is no clever red that ends it. #c4342d resolves the tie by serving the FILL (#fff on it = 5.42:1 ✓) and failing the text (3.18:1 default / 3.31:1 jolt ✗). That is why G-189's danger heading came out sub-AA, and why "just lighten neg to #ee6a60" is a TRAP: it would fix the heading and silently drop the Remove button's white text to 3.06:1. */ --cjfw-neg: #c4342d; /* problem / down / over-budget — FILL ONLY, see above. #fff on it = 5.42:1 ✓. NOT AA as text on surface. */ /* The text half of the split. One token cannot do both jobs, so there are two. Value is not invented: #ee6a60 is what the 6 dark themes ALREADY chose for their own neg. AA on every dark surface (worst: surge 5.56:1). The 4 LIGHT-surface themes MUST override this — #ee6a60 on #ffffff is ~2.6:1 — and each declares #b3261e, again their own existing value. Measured for all 12 themes by tests/test_token_contrast.py; do not eyeball it. */ --cjfw-neg-text: #ee6a60; /* problem, AS TEXT on --cjfw-surface */ --cjfw-info: #2f6fd0; /* neutral informational */ /* Type — operator-grade, not SaaS-cute. Inter for UI, tabular numerics. */ --cjfw-font-sans:'Inter','Helvetica Neue',Arial,system-ui,sans-serif; --cjfw-font-mono:'SFMono-Regular',ui-monospace,'JetBrains Mono',Menlo,monospace; /* Scale, radii, spacing — shared rhythm across all screens */ --cjfw-radius-sm: 8px; --cjfw-radius: 12px; --cjfw-radius-lg: 18px; --cjfw-radius-pill: 999px; --cjfw-space-1: 4px; --cjfw-space-2: 8px; --cjfw-space-3: 12px; --cjfw-space-4: 16px; --cjfw-space-5: 24px; --cjfw-space-6: 32px; --cjfw-space-7: 48px; --cjfw-space-8: 64px; --cjfw-wrap: 1320px; /* Motion — GPU props only, honors reduced-motion below (LAW 27) */ --cjfw-ease: cubic-bezier(.22,.61,.36,1); --cjfw-fast: 140ms; --cjfw-med: 240ms; /* Accessibility floor (S-14) */ --cjfw-tap: 44px; /* minimum touch target */ --cjfw-focus-ring: 0 0 0 3px var(--cjfw-focus); /* Hover/overlay wash on the dark nav rail (CJFW_UserMenu / Change 2, M-69). Tokenized so it is never a literal rgba in component CSS (LAW 30/31). The rail is dark in every theme, so one white wash reads correctly across every theme. */ --cjfw-hover-wash: rgba(255,255,255,.06); /* RAIL-ACCENT PAIR (Canvas, theme expansion 2026-07-11). The rail is dark in EVERY theme — but a LIGHT theme's accent must be deepened to hit AA as text on white cards, and that deep accent then dies on the dark rail. This pair is "the accent as it appears ON THE RAIL": defaults to the theme accent (dark themes never override it); light themes override it with a bright variant so rail tags + the active bar keep the electric pop. Replaces the old one-off `[data-cjfw-theme="tesla"] .cjfw-navlink .tag` hex patch. */ --cjfw-accent-rail: var(--cjfw-accent); --cjfw-accent-rail-rgb: var(--cjfw-accent-rgb); } /* ---------------------------------------------------------------------------- 2. THEME: DEFAULT ("Charged" — the measured operator default) Cool slate dark surface, Creative Jolt orange as the controlled accent. This is the baseline; every other theme overrides only what it must. ---------------------------------------------------------------------------- */ :root, [data-cjfw-theme="default"]{ --cjfw-accent: var(--cjfw-brand-orange); --cjfw-accent-2: var(--cjfw-brand-amber); --cjfw-accent-ink: #ffffff; /* text that sits on the accent */ --cjfw-accent-rgb: 254,93,2; --cjfw-bg: #0d1017; /* app canvas */ --cjfw-bg-2: #11151e; /* sunken areas */ --cjfw-surface: #161b26; /* cards */ --cjfw-surface-2: #1c2230; /* raised / inputs */ --cjfw-surface-3: #232b3b; /* hover / active rows */ --cjfw-sidebar: #0a0d13; /* nav rail */ --cjfw-sidebar-ink: #aeb6c6; --cjfw-border: #283044; --cjfw-border-soft: #1e2533; --cjfw-divider: #222a3a; --cjfw-text: #eef1f6; --cjfw-text-2: #aab2c2; /* 4.6:1 on surface — meets AA */ --cjfw-muted: #919aac; /* 6.09:1 on surface · 5.01:1 on surface-3 (was #79849a: 4.58 on surface but 3.77 on surface-3 — sub-AA. G-174b raised muted to an AA-on-surface-3 footing in 11 themes and skipped THIS one, the one everybody sees; the gap sat unmeasured until a 9.5px pill was put on surface-3 and Gauge measured it.) */ --cjfw-shadow: 0 18px 40px -22px rgba(0,0,0,.66); --cjfw-shadow-sm: 0 8px 20px -14px rgba(0,0,0,.6); --cjfw-glow: 0 0 0 1px rgba(var(--cjfw-accent-rgb),.32), 0 10px 30px -14px rgba(var(--cjfw-accent-rgb),.45); --cjfw-focus: rgba(var(--cjfw-accent-rgb),.55); /* Chart palette — drawn as tokens (S-14 chart accessibility) */ --cjfw-chart-1: #fe5d02; --cjfw-chart-2: #36c2a4; --cjfw-chart-3: #5b8def; --cjfw-chart-4: #fbaa1c; --cjfw-chart-5: #a98bd4; color-scheme: dark; } /* ---------------------------------------------------------------------------- 3. THEME: JOLT (high-energy Creative Jolt — orange forward, electric) Same layout, hotter accent, warmer ink-black with an amber undertone. ---------------------------------------------------------------------------- */ [data-cjfw-theme="jolt"]{ --cjfw-accent: #ff6a14; --cjfw-accent-2: #ffb12e; --cjfw-accent-ink: #1a0f06; --cjfw-accent-rgb: 255,106,20; --cjfw-bg: #120c08; --cjfw-bg-2: #170f09; --cjfw-surface: #1f150d; --cjfw-surface-2: #281a10; --cjfw-surface-3: #33220f; --cjfw-sidebar: #0d0805; --cjfw-sidebar-ink: #d8b99a; --cjfw-border: #3a2613; --cjfw-border-soft: #271a0f; --cjfw-divider: #2c1d10; --cjfw-text: #fdf3ea; --cjfw-text-2: #d4b9a3; --cjfw-muted: #a98c72; --cjfw-shadow: 0 18px 44px -20px rgba(40,15,0,.7); --cjfw-shadow-sm: 0 8px 20px -14px rgba(40,15,0,.6); --cjfw-glow: 0 0 0 1px rgba(var(--cjfw-accent-rgb),.4), 0 12px 34px -12px rgba(var(--cjfw-accent-rgb),.55); --cjfw-focus: rgba(var(--cjfw-accent-rgb),.6); --cjfw-chart-1: #ff6a14; --cjfw-chart-2: #ffb12e; --cjfw-chart-3: #ff9554; --cjfw-chart-4: #e8c07a; --cjfw-chart-5: #c98a4a; color-scheme: dark; } /* ---------------------------------------------------------------------------- 4. THEME: TESLA ("Midnight lab" — REBUILT, Canvas theme expansion 2026-07-11) Dave's ask: Tesla, updated, in the CJI electric family. The CJI plugin's Tesla is NIKOLA Tesla — "electric discharge, midnight lab" (arc-cyan on deep navy) — not the car company's red-on-white this block used to be. Rebuilt to match the family: near-black navy surfaces, arc-cyan discharge accent with an electric-blue partner, dark accent-ink (cyan is the light source — text on it goes dark, 12.9:1). The old light look's successor is the new ARC theme below. Per-theme semantic retune: root neg/info sit below AA on these surfaces, so this block carries luminance-tuned variants (same hue = same meaning). ---------------------------------------------------------------------------- */ [data-cjfw-theme="tesla"]{ --cjfw-accent: #62e9ff; /* arc discharge cyan · 12.8:1 on surface */ --cjfw-accent-2: #5b8dff; /* coil-blue partner */ --cjfw-accent-ink: #041420; /* 13.0:1 on accent, 6.0:1 on accent-2 */ --cjfw-accent-rgb: 98,233,255; --cjfw-bg: #070a13; --cjfw-bg-2: #0a0e1b; --cjfw-surface: #0e1424; --cjfw-surface-2: #141c31; --cjfw-surface-3: #1b2540; --cjfw-sidebar: #04060d; --cjfw-sidebar-ink: #93a5c6; /* 8.1:1 on sidebar */ --cjfw-border: #223052; --cjfw-border-soft: #182342; --cjfw-divider: #1c2848; --cjfw-text: #e9eefb; /* 15.8:1 on surface */ --cjfw-text-2: #a9b7d6; /* 9.1:1 */ --cjfw-muted: #8fa1c2; /* 7.0:1 on surface · 5.81:1 on surface-3 (G-174b fix, was 4.48 sub-AA) */ --cjfw-shadow: 0 18px 44px -20px rgba(0,4,18,.72); --cjfw-shadow-sm: 0 8px 20px -14px rgba(0,4,18,.62); --cjfw-glow: 0 0 0 1px rgba(var(--cjfw-accent-rgb),.34), 0 12px 34px -14px rgba(var(--cjfw-accent-rgb),.4); --cjfw-focus: rgba(var(--cjfw-accent-rgb),.55); /* Semantic retune (hue held, luminance lifted to AA on these surfaces) */ --cjfw-neg: #ee6a60; /* 6.0:1 on surface */ --cjfw-info: #6d9cf0; /* 6.7:1 */ --cjfw-chart-1: #62e9ff; --cjfw-chart-2: #5b8dff; --cjfw-chart-3: #a78bfa; --cjfw-chart-4: #34d399; --cjfw-chart-5: #f2a33c; color-scheme: dark; } /* ============================================================================ 4b. THEME EXPANSION — the electric family (Canvas, 2026-07-11) Dave's brief: more options, a mix of light and dark, drawn from the CJI plugin's Appearance palette so PowerHouse and the plugin read as ONE brand. Names + palettes trace to CJIFW_get_theme_definitions() (Electric, Plasma, Surge, Plutonium, Ignite, Edison) plus two coinages in the same voltage vocabulary (Arc, Ion) and the brand-light Spark. Registration discipline per theme (the S-6 checklist): · full surface/border/text/accent set, token-only · money-token triplet tuned >=4.5:1 vs card surface (ruling 1, 2026-07-02) — lives in section 6.0 below with the others · semantic retune where root pos/warn/neg/info miss AA on these surfaces · charts >=3:1 vs surface · color-scheme declared · LIGHT themes: the rail stays DARK (structural duotone — rail components carry #fff/white-wash constants), so each light theme ships a bright --cjfw-accent-rail pair for rail tags + the active bar. Every pair below verified by Canvas's WCAG harness (theme_contrast.py run 2026-07-11); numbers in comments are that run's output. ============================================================================ */ /* ---- ELECTRIC (dark) — blue energy, cyan current. CJI 'electric'. ---- */ [data-cjfw-theme="electric"]{ --cjfw-accent: #00d4ff; /* 9.7:1 on surface */ --cjfw-accent-2: #38a0ff; --cjfw-accent-ink: #001722; /* 10.4:1 on accent */ --cjfw-accent-rgb: 0,212,255; --cjfw-bg: #050e1d; --cjfw-bg-2: #081527; --cjfw-surface: #0c1c33; --cjfw-surface-2: #12253f; --cjfw-surface-3: #162b47; --cjfw-sidebar: #030a15; --cjfw-sidebar-ink: #8fb3d9; --cjfw-border: #1e3c60; --cjfw-border-soft: #152c4a; --cjfw-divider: #183050; --cjfw-text: #e6eef7; /* 14.6:1 */ --cjfw-text-2: #a3bcd8; /* 8.7:1 */ --cjfw-muted: #87a4c4; /* 6.6:1 on surface · 5.53:1 on surface-3 (G-174b fix, was 4.36 sub-AA) */ --cjfw-shadow: 0 18px 44px -20px rgba(0,6,20,.72); --cjfw-shadow-sm: 0 8px 20px -14px rgba(0,6,20,.62); --cjfw-glow: 0 0 0 1px rgba(var(--cjfw-accent-rgb),.32), 0 12px 34px -14px rgba(var(--cjfw-accent-rgb),.42); --cjfw-focus: rgba(var(--cjfw-accent-rgb),.5); --cjfw-neg: #ee6a60; /* 5.6:1 */ --cjfw-info: #6d9cf0; /* 6.2:1 */ --cjfw-chart-1: #00d4ff; --cjfw-chart-2: #38a0ff; --cjfw-chart-3: #7ee787; --cjfw-chart-4: #f2a33c; --cjfw-chart-5: #c792ea; color-scheme: dark; } /* ---- PLASMA (dark) — hot magenta, ionized energy. CJI 'plasma'. ---- */ [data-cjfw-theme="plasma"]{ --cjfw-accent: #f45cb9; /* 6.2:1 on surface */ --cjfw-accent-2: #b07cff; --cjfw-accent-ink: #26041a; /* 6.4:1 on accent */ --cjfw-accent-rgb: 244,92,185; --cjfw-bg: #100618; --cjfw-bg-2: #150a1f; --cjfw-surface: #1c0f2a; --cjfw-surface-2: #241538; --cjfw-surface-3: #2e1c48; --cjfw-sidebar: #0a0410; --cjfw-sidebar-ink: #c39ad0; --cjfw-border: #3a2258; --cjfw-border-soft: #2a1840; --cjfw-divider: #301d4a; --cjfw-text: #f6ecfa; /* 15.9:1 */ --cjfw-text-2: #cfaede; /* 9.4:1 */ --cjfw-muted: #a887ba; /* 5.9:1 on surface · 4.97:1 on surface-3 (G-174b fix, was 4.75 sub-4.9-bar) */ --cjfw-shadow: 0 18px 44px -20px rgba(16,2,26,.74); --cjfw-shadow-sm: 0 8px 20px -14px rgba(16,2,26,.64); --cjfw-glow: 0 0 0 1px rgba(var(--cjfw-accent-rgb),.34), 0 12px 34px -14px rgba(var(--cjfw-accent-rgb),.44); --cjfw-focus: rgba(var(--cjfw-accent-rgb),.55); --cjfw-neg: #ee6a60; /* 6.0:1 */ --cjfw-info: #6d9cf0; /* 6.7:1 */ --cjfw-chart-1: #f45cb9; --cjfw-chart-2: #b07cff; --cjfw-chart-3: #ff8ad2; --cjfw-chart-4: #6fd3ff; --cjfw-chart-5: #f2a33c; color-scheme: dark; } /* ---- SURGE (dark) — emerald energy, growth. CJI 'surge'. ---- */ [data-cjfw-theme="surge"]{ --cjfw-accent: #35d17c; /* 8.6:1 on surface */ --cjfw-accent-2: #a3e05a; --cjfw-accent-ink: #04180c; /* 9.3:1 on accent */ --cjfw-accent-rgb: 53,209,124; --cjfw-bg: #05100a; --cjfw-bg-2: #081810; --cjfw-surface: #0c2016; --cjfw-surface-2: #112a1e; --cjfw-surface-3: #143024; --cjfw-sidebar: #030b06; --cjfw-sidebar-ink: #8fc3a5; --cjfw-border: #1d4230; --cjfw-border-soft: #143122; --cjfw-divider: #183827; --cjfw-text: #e9f6ee; /* 15.3:1 */ --cjfw-text-2: #a8cfb8; /* 9.9:1 */ --cjfw-muted: #77a98c; /* 6.4:1 */ --cjfw-shadow: 0 18px 44px -20px rgba(0,12,6,.72); --cjfw-shadow-sm: 0 8px 20px -14px rgba(0,12,6,.62); --cjfw-glow: 0 0 0 1px rgba(var(--cjfw-accent-rgb),.32), 0 12px 34px -14px rgba(var(--cjfw-accent-rgb),.42); --cjfw-focus: rgba(var(--cjfw-accent-rgb),.5); --cjfw-neg: #ee6a60; /* 5.6:1 */ --cjfw-info: #6d9cf0; /* 6.2:1 */ --cjfw-chart-1: #35d17c; --cjfw-chart-2: #a3e05a; --cjfw-chart-3: #4dd0e1; --cjfw-chart-4: #f2a33c; --cjfw-chart-5: #b39ddb; color-scheme: dark; } /* ---- PLUTONIUM (dark) — Cherenkov violet, deep glow. CJI 'plutonium'. ---- */ [data-cjfw-theme="plutonium"]{ --cjfw-accent: #9d7bff; /* 5.9:1 on surface */ --cjfw-accent-2: #33ccff; /* the Cherenkov cyan pairing */ --cjfw-accent-ink: #100633; /* 6.1:1 on accent */ --cjfw-accent-rgb: 157,123,255; --cjfw-bg: #08041a; --cjfw-bg-2: #0d0824; --cjfw-surface: #131030; --cjfw-surface-2: #1a153f; --cjfw-surface-3: #231c52; --cjfw-sidebar: #05020f; --cjfw-sidebar-ink: #a79ad0; --cjfw-border: #2e2560; --cjfw-border-soft: #201847; --cjfw-divider: #251d50; --cjfw-text: #eeeafd; /* 15.6:1 */ --cjfw-text-2: #b7abdd; /* 8.6:1 */ --cjfw-muted: #9d90c4; /* 6.3:1 on surface · 5.31:1 on surface-3 (G-174b fix, was 4.18 sub-AA) */ --cjfw-shadow: 0 18px 44px -20px rgba(4,0,22,.74); --cjfw-shadow-sm: 0 8px 20px -14px rgba(4,0,22,.64); --cjfw-glow: 0 0 0 1px rgba(var(--cjfw-accent-rgb),.36), 0 12px 34px -14px rgba(var(--cjfw-accent-rgb),.46); --cjfw-focus: rgba(var(--cjfw-accent-rgb),.55); --cjfw-neg: #ee6a60; /* 6.0:1 */ --cjfw-info: #6d9cf0; /* 6.7:1 */ --cjfw-chart-1: #9d7bff; --cjfw-chart-2: #33ccff; --cjfw-chart-3: #ff6ec7; --cjfw-chart-4: #34d399; --cjfw-chart-5: #f2a33c; color-scheme: dark; } /* ---- IGNITE (dark) — carbon black, crimson fire. CJI 'ignite'. NOTE: ignite's coral accent sits near the neg red — the record-match PUSH family remap (formerly keyed to the old red tesla) is re-keyed to ignite in _record_match_css.html so ↓push and ⚠changed stay unmistakable. ---- */ [data-cjfw-theme="ignite"]{ --cjfw-accent: #ff6f5c; /* 6.6:1 on surface */ --cjfw-accent-2: #ffa94d; --cjfw-accent-ink: #290804; /* 6.8:1 on accent */ --cjfw-accent-rgb: 255,111,92; --cjfw-bg: #100a09; --cjfw-bg-2: #170f0d; --cjfw-surface: #1e1412; --cjfw-surface-2: #281a17; --cjfw-surface-3: #34211d; --cjfw-sidebar: #0a0605; --cjfw-sidebar-ink: #c9a094; --cjfw-border: #45261f; --cjfw-border-soft: #2f1b16; --cjfw-divider: #37201a; --cjfw-text: #f8ece9; /* 15.6:1 */ --cjfw-text-2: #d3b1a8; /* 9.1:1 */ --cjfw-muted: #b89184; /* 6.4:1 on surface · 5.37:1 on surface-3 (G-174b fix, was 4.56 sub-4.9-bar) */ --cjfw-shadow: 0 18px 44px -20px rgba(20,4,0,.74); --cjfw-shadow-sm: 0 8px 20px -14px rgba(20,4,0,.64); --cjfw-glow: 0 0 0 1px rgba(var(--cjfw-accent-rgb),.34), 0 12px 34px -14px rgba(var(--cjfw-accent-rgb),.44); --cjfw-focus: rgba(var(--cjfw-accent-rgb),.55); --cjfw-neg: #ee6a60; /* 5.9:1 — hue-adjacent to accent; see remap note */ --cjfw-info: #6d9cf0; /* 6.6:1 */ --cjfw-chart-1: #ff6f5c; --cjfw-chart-2: #ffa94d; --cjfw-chart-3: #ffd166; --cjfw-chart-4: #4dd0e1; --cjfw-chart-5: #b39ddb; color-scheme: dark; } /* ---- EDISON (LIGHT) — warm filament on paper. CJI 'edison', inverted: the incandescent bulb IS light — warm paper canvas, aged-brass accent (deep enough for AA text on white), the bright filament gold saved for the dark rail via --cjfw-accent-rail. ---- */ [data-cjfw-theme="edison"]{ --cjfw-accent: #8a5c05; /* 5.7:1 on surface — brass, text-safe */ --cjfw-accent-2: #9c6a08; --cjfw-accent-ink: #ffffff; /* 5.8:1 / 4.7:1 on the gradient ends */ --cjfw-accent-rgb: 138,92,5; --cjfw-accent-rail: #ffd166; /* lit filament on the dark rail · 12.6:1 */ --cjfw-accent-rail-rgb: 255,209,102; --cjfw-bg: #f8f3e9; --cjfw-bg-2: #f1e9da; --cjfw-surface: #fffcf5; --cjfw-surface-2: #f7f0e2; --cjfw-surface-3: #efe4cf; --cjfw-sidebar: #1b1508; /* warm near-black rail (structural duotone) */ --cjfw-sidebar-ink: #c7b28c; --cjfw-border: #e0d5bd; --cjfw-border-soft: #eae1cd; --cjfw-divider: #e6dcc6; --cjfw-text: #292013; /* 15.6:1 */ --cjfw-text-2: #5d5138; /* 7.6:1 */ --cjfw-muted: #6b5d40; /* 6.3:1 on surface · 5.11:1 on surface-3 (G-174b fix, was 4.08 sub-AA) */ --cjfw-shadow: 0 18px 40px -24px rgba(46,32,8,.22); --cjfw-shadow-sm: 0 8px 20px -16px rgba(46,32,8,.16); --cjfw-glow: 0 0 0 1px rgba(var(--cjfw-accent-rgb),.26), 0 12px 30px -16px rgba(var(--cjfw-accent-rgb),.24); --cjfw-focus: rgba(var(--cjfw-accent-rgb),.42); /* Full semantic retune for light surfaces (root set is dark-tuned) */ --cjfw-pos: #157a47; /* 5.1:1 */ --cjfw-warn: #8f5c08; /* 5.2:1 */ --cjfw-neg: #b3261e; /* 6.3:1 */ /* Light surface: #ee6a60 would be ~2.6:1 on white. This theme's own neg is already AA as BOTH text and fill here, so the split names the same value. */ --cjfw-neg-text: #b3261e; /* AA as text on this light surface */ --cjfw-info: #2456c4; /* 6.4:1 */ --cjfw-chart-1: #8a5c05; --cjfw-chart-2: #b45309; --cjfw-chart-3: #2456c4; --cjfw-chart-4: #15734a; --cjfw-chart-5: #7048b6; color-scheme: light; } /* ---- ARC (LIGHT) — arc-lamp white, cool and crisp. The successor to the old light tesla: the first electric lights were arc lamps — brilliant, clinical, blue-white. Electric-blue accent, cyan flash on the rail. ---- */ [data-cjfw-theme="arc"]{ --cjfw-accent: #1d5bd8; /* 5.9:1 on white */ --cjfw-accent-2: #0e7490; --cjfw-accent-ink: #ffffff; /* 5.9:1 / 5.4:1 on the gradient ends */ --cjfw-accent-rgb: 29,91,216; --cjfw-accent-rail: #5fd4ff; /* cyan flash on the dark rail · 10.8:1 */ --cjfw-accent-rail-rgb: 95,212,255; --cjfw-bg: #f4f6f9; --cjfw-bg-2: #ebeff4; --cjfw-surface: #ffffff; --cjfw-surface-2: #f4f6f9; --cjfw-surface-3: #ebeff4; --cjfw-sidebar: #0f1420; /* cool near-black rail */ --cjfw-sidebar-ink: #a8b3c7; --cjfw-border: #dbe1e9; --cjfw-border-soft: #e7ebf1; --cjfw-divider: #e3e8ee; --cjfw-text: #131722; /* 17.9:1 */ --cjfw-text-2: #454f63; /* 8.2:1 */ --cjfw-muted: #526080; /* 6.3:1 on surface · 5.44:1 on surface-3 (G-174b fix, was 4.70 sub-4.9-bar) */ --cjfw-shadow: 0 18px 40px -24px rgba(15,20,32,.22); --cjfw-shadow-sm: 0 8px 20px -16px rgba(15,20,32,.16); --cjfw-glow: 0 0 0 1px rgba(var(--cjfw-accent-rgb),.26), 0 12px 30px -16px rgba(var(--cjfw-accent-rgb),.26); --cjfw-focus: rgba(var(--cjfw-accent-rgb),.42); --cjfw-pos: #157a47; --cjfw-warn: #8f5c08; --cjfw-neg: #b3261e; /* Light surface: #ee6a60 would be ~2.6:1 on white. This theme's own neg is already AA as BOTH text and fill here, so the split names the same value. */ --cjfw-neg-text: #b3261e; /* AA as text on this light surface */ --cjfw-info: #2456c4; --cjfw-chart-1: #1d5bd8; --cjfw-chart-2: #0e7490; --cjfw-chart-3: #9333ea; --cjfw-chart-4: #b45309; --cjfw-chart-5: #15734a; color-scheme: light; } /* ---- ION (LIGHT) — charged violet on porcelain. A charged particle in the voltage vocabulary; the light face of plutonium's Cherenkov glow. ---- */ [data-cjfw-theme="ion"]{ --cjfw-accent: #6d28d9; /* 7.1:1 on white */ --cjfw-accent-2: #a21caf; --cjfw-accent-ink: #ffffff; /* 7.1:1 / 6.3:1 on the gradient ends */ --cjfw-accent-rgb: 109,40,217; --cjfw-accent-rail: #c4a5ff; /* violet glow on the dark rail · 9.0:1 */ --cjfw-accent-rail-rgb: 196,165,255; --cjfw-bg: #f7f5fb; --cjfw-bg-2: #efecf7; --cjfw-surface: #ffffff; --cjfw-surface-2: #f6f4fa; --cjfw-surface-3: #edeaf5; --cjfw-sidebar: #151021; /* violet near-black rail */ --cjfw-sidebar-ink: #b3a8cc; --cjfw-border: #e0dcea; --cjfw-border-soft: #eae7f2; --cjfw-divider: #e6e2ef; --cjfw-text: #171223; /* 18.3:1 */ --cjfw-text-2: #4b4560; /* 9.1:1 */ --cjfw-muted: #665e80; /* 6.0:1 */ --cjfw-shadow: 0 18px 40px -24px rgba(21,16,33,.22); --cjfw-shadow-sm: 0 8px 20px -16px rgba(21,16,33,.16); --cjfw-glow: 0 0 0 1px rgba(var(--cjfw-accent-rgb),.24), 0 12px 30px -16px rgba(var(--cjfw-accent-rgb),.24); --cjfw-focus: rgba(var(--cjfw-accent-rgb),.4); --cjfw-pos: #157a47; --cjfw-warn: #8f5c08; --cjfw-neg: #b3261e; /* Light surface: #ee6a60 would be ~2.6:1 on white. This theme's own neg is already AA as BOTH text and fill here, so the split names the same value. */ --cjfw-neg-text: #b3261e; /* AA as text on this light surface */ --cjfw-info: #2456c4; --cjfw-chart-1: #6d28d9; --cjfw-chart-2: #a21caf; --cjfw-chart-3: #1d5bd8; --cjfw-chart-4: #b45309; --cjfw-chart-5: #15734a; color-scheme: light; } /* ---- SPARK (LIGHT) — Creative Jolt on warm paper. The brand-orange light theme: burnt CJ orange deepened for AA text on white; the true bright brand spark lives on the dark rail. The light counterpart of default/jolt. ---- */ [data-cjfw-theme="spark"]{ --cjfw-accent: #c2410c; /* 5.1:1 on surface — burnt CJ orange */ --cjfw-accent-2: #8a4a00; --cjfw-accent-ink: #ffffff; /* 5.2:1 / 6.9:1 on the gradient ends */ --cjfw-accent-rgb: 194,65,12; --cjfw-accent-rail: #ff8a3d; /* the true spark on the dark rail · 8.1:1 */ --cjfw-accent-rail-rgb: 255,138,61; --cjfw-bg: #faf6f0; --cjfw-bg-2: #f3ece2; --cjfw-surface: #fffdf9; --cjfw-surface-2: #f7f1e8; --cjfw-surface-3: #efe6d8; --cjfw-sidebar: #170f08; /* warm charcoal rail */ --cjfw-sidebar-ink: #c9ad8f; --cjfw-border: #e4dac9; --cjfw-border-soft: #ece4d6; --cjfw-divider: #e8dfcf; --cjfw-text: #241b10; /* 16.7:1 */ --cjfw-text-2: #5a4f3e; /* 7.9:1 */ --cjfw-muted: #6a5c44; /* 6.4:1 on surface · 5.26:1 on surface-3 (G-174b fix, was 4.26 sub-AA) */ --cjfw-shadow: 0 18px 40px -24px rgba(40,24,8,.22); --cjfw-shadow-sm: 0 8px 20px -16px rgba(40,24,8,.16); --cjfw-glow: 0 0 0 1px rgba(var(--cjfw-accent-rgb),.26), 0 12px 30px -16px rgba(var(--cjfw-accent-rgb),.26); --cjfw-focus: rgba(var(--cjfw-accent-rgb),.42); --cjfw-pos: #157a47; --cjfw-warn: #8f5c08; --cjfw-neg: #b3261e; /* Light surface: #ee6a60 would be ~2.6:1 on white. This theme's own neg is already AA as BOTH text and fill here, so the split names the same value. */ --cjfw-neg-text: #b3261e; /* AA as text on this light surface */ --cjfw-info: #2456c4; --cjfw-chart-1: #c2410c; --cjfw-chart-2: #8a4a00; --cjfw-chart-3: #2456c4; --cjfw-chart-4: #15734a; --cjfw-chart-5: #7048b6; color-scheme: light; } /* ============================================================================ 5. BASE / RESET ============================================================================ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--cjfw-font-sans); font-size:16px; /* base body floor — S-14 */ line-height:1.55; color:var(--cjfw-text); background:var(--cjfw-bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transition:background var(--cjfw-med) var(--cjfw-ease), color var(--cjfw-med) var(--cjfw-ease); } a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} button{font-family:inherit;cursor:pointer} ::selection{background:rgba(var(--cjfw-accent-rgb),.28)} /* Numbers in metrics read as tabular — operator discipline */ .cjfw-num{font-variant-numeric:tabular-nums;letter-spacing:-.01em} /* ---------------------------------------------------------------------------- ICON SYSTEM — Font Awesome Pro 7.2.0 (loaded in base.html, self-hosted under /static/fontawesome/). FA glyphs are FONT glyphs: they inherit `color` and scale with `font-size` like text. The base reset above sets `svg{display:block}`, which would break inline FA elements — so we DON'T touch FA's own classes; instead use the .cjfw-ico wrapper convention for crisp optical alignment. CONVENTION (keep every module consistent): • Default weight is `fa-solid` for UI controls; `fa-regular` for lighter decorative/empty-state marks; `fa-brands` only for third-party logos. • Size icons via .cjfw-ico (1em, aligns to text) or a fixed font-size; do NOT hardcode px widths the way the legacy inline SVGs did. • Color with `currentColor` — an icon takes its meaning's color (e.g. color:var(--cjfw-pos) for a booked outcome, var(--cjfw-neg) for a problem). • Mark decorative icons aria-hidden="true"; give meaningful icons a title/label. Full guidance + the common-icon table live in README.md ("Icon system"). */ .cjfw-ico{ display:inline-flex;align-items:center;justify-content:center; width:1em;height:1em;line-height:1;flex:0 0 auto; } .cjfw-ico>i,.cjfw-ico>.fa,.cjfw-ico>.fas,.cjfw-ico>.far,.cjfw-ico>.fab{ display:inline-block;line-height:1; /* override the global svg/img reset path */ } /* FA glyphs sitting directly inside our chrome inherit ink + optical centering */ .cjfw-navlink i,.cjfw-btn i,.cjfw-topbar i,.cjfw-userchip i{vertical-align:-.06em} /* Visible keyboard focus everywhere — 3:1 floor (S-14) */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,[tabindex]:focus-visible,.cjfw-navlink:focus-visible{ outline:none; box-shadow:var(--cjfw-focus-ring); border-radius:var(--cjfw-radius-sm); } /* ============================================================================ 6. APP SHELL — left-vertical desktop nav, collapses to drawer on mobile (LAW 26 + S-13). Admin and Client both use this shell; their nav CONTENT differs (separate nav systems) but the chrome is one component. ============================================================================ */ .cjfw-app{min-height:100vh;display:grid;grid-template-columns:264px 1fr} /* Mobile drawer backdrop — ALWAYS out of document flow so it never claims a grid track. (Bug fix C-75: when this was positioned only inside the mobile media query, at desktop widths it became an in-flow grid item, stole the 264px rail column, and pushed the rail into the 1fr track — the rail then rendered full-width and covered the content. It is invisible by default; it only becomes interactive when .is-navopen on mobile.) */ .cjfw-scrim{ position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5); opacity:0;pointer-events:none;transition:opacity var(--cjfw-med); display:none; /* not even painted at desktop */ } .cjfw-rail{ background:var(--cjfw-sidebar); border-right:1px solid var(--cjfw-border-soft); display:flex;flex-direction:column; position:sticky;top:0;height:100vh; } .cjfw-rail__brand{ display:flex;align-items:center;gap:10px; padding:20px 20px 18px; } .cjfw-logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em} /* Brand mark (Dave ask C, M-66) — the Creative Jolt block: an orange->amber accent tile holding the WHITE jolt mark (/static/brand/cj-mark-white.svg, recolored from the team's B&W master). The container PAINTS the gradient block + glow; the mark sits centered on top in white. A brand mark holds Creative Jolt's own colors on EVERY theme (default/jolt/tesla) — the block stays orange->amber and the mark stays white; only the UI chrome themes around it. (Was the plum+gradient cj-symbol.svg tile; replaced because the purple read wrong against the orange brand block.) */ .cjfw-brandmark{ width:28px;height:28px;border-radius:8px;flex:0 0 auto; display:grid;place-items:center; background:linear-gradient(135deg,var(--cjfw-brand-orange),var(--cjfw-brand-amber)); box-shadow:var(--cjfw-glow); } .cjfw-brandmark__mark{width:18px;height:18px;display:block} .cjfw-logo__txt{font-size:15px;line-height:1.05;color:#fff} .cjfw-logo__txt b{color:#fff} .cjfw-logo__txt .sub{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cjfw-sidebar-ink);margin-top:2px} .cjfw-rail__scope{ margin:2px 14px 12px;padding:10px 12px;border-radius:var(--cjfw-radius); background:rgba(255,255,255,.03);border:1px solid var(--cjfw-border-soft); font-size:12px;color:var(--cjfw-sidebar-ink); } .cjfw-rail__scope b{color:#fff;font-weight:600;font-size:12.5px} .cjfw-navgroup{padding:6px 14px} .cjfw-navgroup__label{ font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--cjfw-sidebar-ink);opacity:.7;padding:10px 12px 6px; } .cjfw-navlink{ display:flex;align-items:center;gap:12px; padding:0 12px;min-height:var(--cjfw-tap); /* 44px tap target */ border-radius:10px;color:var(--cjfw-sidebar-ink); font-size:14px;font-weight:500; transition:background var(--cjfw-fast) var(--cjfw-ease), color var(--cjfw-fast) var(--cjfw-ease); } .cjfw-navlink svg{width:18px;height:18px;flex:0 0 auto;opacity:.85} .cjfw-navlink:hover{background:rgba(255,255,255,.05);color:#fff} /* Rail accents resolve through the RAIL-ACCENT PAIR (section 1) — identical to the plain accent on dark themes; the bright variant on light themes, whose deepened text-safe accents would die on the permanently-dark rail. */ .cjfw-navlink.is-active{ background:linear-gradient(90deg,rgba(var(--cjfw-accent-rail-rgb),.18),rgba(var(--cjfw-accent-rail-rgb),.04)); color:#fff;position:relative; } .cjfw-navlink.is-active::before{ content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%); width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--cjfw-accent-rail); } .cjfw-navlink .tag{margin-left:auto;font-size:11px;font-weight:700; background:rgba(var(--cjfw-accent-rail-rgb),.16);color:var(--cjfw-accent-rail); padding:2px 7px;border-radius:var(--cjfw-radius-pill)} /* W2 — Platform-group rail descriptions (blueprint §1: the rail itself answers the modules-vs-integrations boundary — "Capabilities we mount for a client." / "External systems we connect and verify."). Tokens only (LAW 30/31); the m1 mockup lacked the descriptions, the blueprint text governs. The stacked variant keeps the 44px tap floor and the icon column alignment. */ .cjfw-navlink--desc{align-items:flex-start;padding-top:8px;padding-bottom:8px} .cjfw-navlink--desc > i{margin-top:3px} .cjfw-navlink__txt{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.3} .cjfw-navlink__sub{font-size:10.5px;font-weight:500;color:var(--cjfw-sidebar-ink); opacity:.72;white-space:normal} .cjfw-navlink--desc.is-active .cjfw-navlink__sub, .cjfw-navlink--desc:hover .cjfw-navlink__sub{opacity:.85} .cjfw-rail__foot{margin-top:auto;padding:14px;border-top:1px solid var(--cjfw-border-soft)} .cjfw-userchip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;transition:background var(--cjfw-fast)} .cjfw-userchip:hover{background:rgba(255,255,255,.05)} .cjfw-avatar{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--cjfw-brand-plum),var(--cjfw-accent))} .cjfw-userchip__meta{line-height:1.25;min-width:0} .cjfw-userchip__meta b{font-size:13px;color:#fff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cjfw-userchip__meta span{font-size:11.5px;color:var(--cjfw-sidebar-ink)} /* ---- User menu (CJFW_UserMenu / Change 2, M-69) — the fleet's first popover. Native
/: the .cjfw-userchip IS the trigger; the popover body is absolutely positioned and slides UP out of flow. GPU props only (transform/opacity — LAW 28); all colors token-driven (LAW 30/31), washes route through --cjfw-hover-wash (never a literal rgba). Reduced-motion is honored by the global @media block (LAW 27). No-JS floor:
toggles +
submits with scripting off; cjfw-shell.js only layers ARIA/keyboard on top. ---- */ .cjfw-usermenu{position:relative} .cjfw-usermenu>summary{ list-style:none;cursor:pointer;width:100%; /* the trigger reuses .cjfw-userchip visuals; only add disclosure affordances */ outline:none; } .cjfw-usermenu>summary::-webkit-details-marker{display:none} /* drop native triangle */ .cjfw-usermenu>summary::marker{content:""} .cjfw-usermenu>summary:hover{background:var(--cjfw-hover-wash)} .cjfw-usermenu>summary:focus-visible{box-shadow:var(--cjfw-focus-ring)} .cjfw-usermenu__caret{ margin-left:auto;flex:0 0 auto;font-size:11px;color:var(--cjfw-sidebar-ink); transition:transform var(--cjfw-fast) var(--cjfw-ease); } .cjfw-usermenu[open]>summary .cjfw-usermenu__caret{transform:rotate(180deg)} /* Popover body — out of flow, anchored to the foot, slides up from beneath the chip */ .cjfw-usermenu__pop{ position:absolute;bottom:100%;left:0;right:0;margin-bottom:8px;z-index:50; background:var(--cjfw-surface-2); border:1px solid var(--cjfw-border); border-radius:var(--cjfw-radius); box-shadow:var(--cjfw-shadow); padding:6px; /* closed resting state — translated down + transparent, GPU-only (LAW 28) */ opacity:0;transform:translateY(6px);pointer-events:none; transition:opacity var(--cjfw-fast) var(--cjfw-ease), transform var(--cjfw-fast) var(--cjfw-ease); } .cjfw-usermenu[open] .cjfw-usermenu__pop{ opacity:1;transform:translateY(0);pointer-events:auto; } .cjfw-usermenu__pop form{margin:0} /* Menu rows — 44px tap floor (S-14), full-width, token colors only */ .cjfw-usermenu__item{ display:flex;align-items:center;gap:11px;width:100%; min-height:var(--cjfw-tap);padding:0 12px;box-sizing:border-box; border-radius:var(--cjfw-radius-sm); font-size:13px;font-weight:600;color:var(--cjfw-text); text-decoration:none;cursor:pointer; /* normalize the