@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/archivo-latin.woff2') format('woff2'); } /* ============================================================ SHARED DESIGN TOKENS — hub-v1 foundation ------------------------------------------------------------ Base layer for every member hub. Theme-neutral. Each user overrides the --accent-* contract and --bg-base in their own theme.css; component CSS never hardcodes a brand color, it only reads these variables. Derived from Sami's original homescreen.html :root. Do NOT add per-user colors here — put those in /theme.css. ============================================================ */ :root { /* ---- Surface ---- */ --bg-base: #08080f; --bg-card: #101018; --bg-card-hover: #13131e; --bg-glass: rgba(16, 16, 28, 0.72); --bg-inset: rgba(255, 255, 255, 0.02); /* ---- Form-field tint — the --bg-input contract (added 2026-08-07) ---- shared/professional-ui.css and shared/components.css paint every input/select/textarea (and the coach transcript rows) with var(--bg-input). That token was REFERENCED IN THREE PLACES AND DEFINED NOWHERE, so all 30 pro-UI controls on all four members fell through to an inline rgba(0,0,0,.18) — a theme-blind 18% black wash. Measured before the fix: 12 visible controls per page computing rgba(0,0,0,0.18) on Jerry's and JP's WHITE cards (the "dead gray box" defect) and on Austin's #17331f and Sami's #0b1524 dark cards. Aliased, never pasted — the same move as sami/theme.css's --nav-link, and for the same reason: it follows if the tint is ever retuned. · A member theme that already names its field tint drives this for free — austin/jerry/jp each declare the --field-bg / --statbox-bg / --menu-bg trio, and --field-bg IS this role under the theme's own name. No per-theme --bg-input line is needed or wanted; a second name for one value is how the two drift apart. · Sami has no --field-bg on purpose (shared/tron.css paints .f-input directly), so he takes --bg-inset — which is not a guess: grid mode sets --bg-inset to rgba(0,240,255,.04) and tron.css paints his real fields rgba(0,240,255,.045). tron.css:471 already backs an input with var(--bg-inset). One :root line covers every mode because custom properties substitute against the ELEMENT's computed values, so html[data-mode="grid"] (tron.css) and html[data-mode="pastel"] (modes.css) — both of which override --bg-inset on this same element — carry through automatically. A literal here, or in a member :root, could not follow a mode switch. */ --bg-input: var(--field-bg, var(--bg-inset)); /* ---- Border ---- */ --border-subtle: #1e1e2e; --border-muted: #2a2a3e; --border-active: #3a3a5a; /* ---- Accent contract -------------------------------------- The single accent a theme repaints. Components reference ONLY these (never --gold / --violet directly), so a new theme = override these four lines. ----------------------------------------------------------- */ --accent: #d4af37; /* primary brand accent */ --accent-text: var(--accent); --focus-ring: var(--accent); --accent-bright: #f0c84a; /* hover / active highlight */ --accent-muted: #a88a26; /* labels, secondary accent */ --accent-dim: #6b5818; /* faint accent / gradients */ --accent-glow: rgba(212, 175, 55, 0.18); /* glows & soft shadows */ --accent-contrast:#08080f; /* text on a filled accent */ --daily-banner-label: var(--accent-muted); /* small banner labels/icons */ /* ---- Secondary data accent (charts, deltas) ---- */ --data: #7c6dfa; --data-muted: #5548c4; --data-glow: rgba(124, 109, 250, 0.18); /* ---- Semantic ---- */ --success: #3ecf8e; --danger: #fa5c5c; --warning: #f59e0b; /* ---- Semantic washes (added 2026-08-12, Batch 7A) ---- Status chips and error boxes want their own colour at low alpha. Every copy of the Brief/funnel had these BAKED — rgba(47,158,106,.12) and rgba(220,80,80,.08), i.e. Jerry's light-theme green and a red that had already DRIFTED from his own --danger (#e5484d). Derived here instead of pasted, per the promotion rule: a copied value forks the moment a palette is retuned, which is exactly what that stale red was. color-mix is already load-bearing in shared/components.css (the .gen-btn / .tp-* chips), so this adds no new browser requirement. */ --success-tint: color-mix(in srgb, var(--success) 12%, transparent); --success-edge: color-mix(in srgb, var(--success) 30%, transparent); --danger-tint: color-mix(in srgb, var(--danger) 8%, transparent); /* ---- Modal scrim + lift (added 2026-08-12, Batch 7A) ---- shared/plan-brief.css reads these. NOT aliased to --text-primary even though Jerry's copy baked rgba(28,37,64,…), which IS his --text-primary: that only works because his is a light theme with dark ink. On every dark member the same alias would paint a near-WHITE scrim over the page. A scrim is its own role, so it gets its own token per theme. */ --overlay-scrim: rgba(8, 8, 15, 0.55); --overlay-shadow: rgba(8, 8, 15, 0.55); /* ---- Text ---- */ --text-primary: #e8e8f0; --text-secondary: #9090a8; --text-muted: #52526a; /* ---- Spacing scale ---- */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* ---- Radius ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; /* ---- Type ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: 'Archivo', var(--font-sans); --font-mono: "SF Mono", "Fira Code", "Consolas", monospace; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 0.18s; --t-med: 0.25s; --t-slow: 0.42s; /* ---- Sticky note paper (shared/sticky-notes.js — The Sticky Layer) ---- A note is a real-world object riding on top of a themed page, so it tints PER MEMBER (Sami, 2026-07-10) rather than reskinning fully — three paper variants, rotated by nth-child. Base values here are JP's original proven palette (the feature's precedent); members override in their own theme.css, same contract as --accent. */ --sticky-1-bg: #fff7d6; --sticky-1-border: #f3e6a8; /* v1 */ --sticky-2-bg: #ffe9e0; --sticky-2-border: #f6cdbe; /* v2 */ --sticky-3-bg: #f5ead9; --sticky-3-border: #e0c9a0; /* v3 */ --sticky-ink: #3a3324; /* ---- Member identity colors (Community Hub, COMMUNITY_HUB_SPEC.md §2) ---- The cross-member vocabulary for SHARED surfaces (pinboard notes, forum author dots, group-goal task groups): content tints by its AUTHOR's color, keyed to the real member account — stable across gamertag renames. This is deliberately NOT a per-user theme color (the header rule stands): a member's own theme.css is never loaded on another member's hub, so shared surfaces need this one canonical map. Each value is that member's real IDENTITY color, which is NOT always their theme.css --accent. Two standing exceptions, both ruled by Sami: · Sami (2026-07-25): his LIVE theme is shared/tron.css — #ff2fd0, the Grid's pink. sami/theme.css has been PARKED since the 2026-07-04 Grid pivot; do NOT re-derive this value from it. Doing so is what put him at #19a7c4, a teal-blue that collided with Jerry's royal blue on every shared surface. · Austin (CP-W8, 2026-07-13): forest green. His page --accent is wine #a3395c, which is incidental — he disliked the previous accent and changed it. It is not his color; never tint him by it. An accent retune in a member theme must update this map too, EXCEPT where an exception above already governs. -soft = translucent wash for tinted backgrounds (washes need tokens too — theme-warden). */ --member-sami: #ff2fd0; --member-sami-soft: rgba(255, 47, 208, 0.14); --member-austin: #2f8f43; --member-austin-soft: rgba(47, 143, 67, 0.14); --member-jerry: #3355d8; --member-jerry-soft: rgba(51, 85, 216, 0.14); --member-jp: #ff6b00; --member-jp-soft: rgba(255, 107, 0, 0.14); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg-base); color: var(--text-primary); font-family: var(--font-sans); min-height: 100vh; padding: var(--space-xl) var(--space-xl) 110px; /* bottom pad clears the dock */ } /* ---- Global scrollbar ---- */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-muted); border-radius: 3px; } a { color: inherit; }