/* ───────────────────────────────────────────────────────────────────────── CASTNET THEME SYSTEM Usage: (or tron | anon | kick | espn | barstool | mcafee | balenciaga) Every themed component consumes CSS variables — never hardcode colors. ───────────────────────────────────────────────────────────────────────── */ :root, [data-theme="matrix"] { --cn-bg: #000000; --cn-panel: #061006; --cn-panel-2: #0a150a; --cn-text: #c8ffdc; --cn-text-dim: #4f7a5a; --cn-accent: #00ff88; --cn-accent-2: #00c972; --cn-danger: #ff3b3b; --cn-warn: #ffa726; --cn-line: #10281a; --cn-glow: 0 0 14px rgba(0,255,136,0.35); --cn-font: 'Fira Code', 'JetBrains Mono', Consolas, monospace; --cn-font-display: 'Fira Code', 'JetBrains Mono', Consolas, monospace; --cn-scan: linear-gradient(transparent 50%, rgba(0,255,136,0.025) 50%); --cn-grid: linear-gradient(rgba(0,255,136,0.04) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(0,255,136,0.04) 1px, transparent 1px) 0 0 / 40px 40px; --cn-noise-op: 0.03; --cn-letter: 1px; } [data-theme="tron"] { --cn-bg: #04060b; --cn-panel: #0a1424; --cn-panel-2: #05101e; --cn-text: #d8ecff; --cn-text-dim: #5a7fa8; --cn-accent: #00d8ff; --cn-accent-2: #00a2c7; --cn-danger: #ff2e6f; --cn-warn: #ffae00; --cn-line: #103654; --cn-glow: 0 0 18px rgba(0,216,255,0.45); --cn-font: 'Rajdhani', 'Orbitron', 'Fira Code', monospace; --cn-font-display: 'Orbitron', 'Rajdhani', sans-serif; --cn-scan: none; --cn-grid: linear-gradient(rgba(0,216,255,0.05) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(0,216,255,0.05) 1px, transparent 1px) 0 0 / 48px 48px; --cn-noise-op: 0; --cn-letter: 2px; } [data-theme="anon"] { --cn-bg: #060604; --cn-panel: #0e0d0a; --cn-panel-2: #1a1812; --cn-text: #e8d9ae; --cn-text-dim: #7e6f50; --cn-accent: #ffae00; --cn-accent-2: #c98700; --cn-danger: #ff3b3b; --cn-warn: #ffd166; --cn-line: #3a2f14; --cn-glow: 0 0 12px rgba(255,174,0,0.3); --cn-font: 'JetBrains Mono', 'Fira Code', monospace; --cn-font-display: 'JetBrains Mono', monospace; --cn-scan: linear-gradient(transparent 50%, rgba(255,174,0,0.02) 50%); --cn-grid: none; --cn-noise-op: 0.07; --cn-letter: 1px; } [data-theme="kick"] { --cn-bg: #0a0e08; --cn-panel: #121912; --cn-panel-2: #0e1510; --cn-text: #e8f5e0; --cn-text-dim: #6b7b68; --cn-accent: #53fc18; --cn-accent-2: #36c008; --cn-danger: #ff3b3b; --cn-warn: #ffa726; --cn-line: #1a2a18; --cn-glow: 0 0 16px rgba(83,252,24,0.4); --cn-font: 'Inter', -apple-system, system-ui, sans-serif; --cn-font-display: 'Inter', system-ui, sans-serif; --cn-scan: none; --cn-grid: none; --cn-noise-op: 0; --cn-letter: 0.5px; } [data-theme="espn"] { --cn-bg: #0e0e10; --cn-panel: #17171a; --cn-panel-2: #101013; --cn-text: #f8f8f8; --cn-text-dim: #8a8a90; --cn-accent: #c8102e; --cn-accent-2: #a00d24; --cn-danger: #c8102e; --cn-warn: #ffcb05; --cn-line: #2a2a30; --cn-glow: 0 0 12px rgba(200,16,46,0.4); --cn-font: 'Roboto Condensed', 'Barlow Condensed', sans-serif; --cn-font-display: 'Barlow Condensed', 'Roboto Condensed', sans-serif; --cn-scan: none; --cn-grid: none; --cn-noise-op: 0; --cn-letter: 1px; } [data-theme="barstool"] { --cn-bg: #0a0a0a; --cn-panel: #141414; --cn-panel-2: #0c0c0c; --cn-text: #f4f4f4; --cn-text-dim: #7a7a7a; --cn-accent: #E51E25; --cn-accent-2: #b6181d; --cn-danger: #ff3b3b; --cn-warn: #ffa726; --cn-line: #222; --cn-glow: 0 0 10px rgba(229,30,37,0.35); --cn-font: 'Oswald', 'Roboto Condensed', sans-serif; --cn-font-display: 'Anton', 'Oswald', sans-serif; --cn-scan: none; --cn-grid: none; --cn-noise-op: 0; --cn-letter: 2px; } [data-theme="mcafee"] { --cn-bg: #0a0a0a; --cn-panel: #161616; --cn-panel-2: #0e0e0e; --cn-text: #f5f5f5; --cn-text-dim: #7a7a7a; --cn-accent: #F5C518; --cn-accent-2: #c9a013; --cn-danger: #ff3b3b; --cn-warn: #ffa726; --cn-line: #2a2a2a; --cn-glow: 0 0 14px rgba(245,197,24,0.4); --cn-font: 'Barlow Condensed', 'Oswald', sans-serif; --cn-font-display: 'Barlow Condensed', 'Oswald', sans-serif; --cn-scan: none; --cn-grid: none; --cn-noise-op: 0; --cn-letter: 2px; } [data-theme="balenciaga"] { --cn-bg: #f5f5f5; --cn-panel: #ffffff; --cn-panel-2: #ebebeb; --cn-text: #0a0a0a; --cn-text-dim: #8a8a8a; --cn-accent: #0a0a0a; --cn-accent-2: #2a2a2a; --cn-danger: #c41e3a; --cn-warn: #c49a00; --cn-line: #cacaca; --cn-glow: none; --cn-font: 'Helvetica Neue', 'Arial Narrow', Arial, sans-serif; --cn-font-display: 'Arial Narrow', 'Helvetica Neue', sans-serif; --cn-scan: none; --cn-grid: none; --cn-noise-op: 0; --cn-letter: 6px; } /* ── Core shared primitives (consume tokens, never hardcode) ─────────────── */ .cn-surface { background: var(--cn-bg); color: var(--cn-text); font-family: var(--cn-font); } .cn-panel { background: var(--cn-panel); border: 1px solid var(--cn-line); padding: 16px; } .cn-panel--accent { border-left: 3px solid var(--cn-accent); } .cn-btn { background: var(--cn-accent); color: var(--cn-bg); border: 0; padding: 10px 18px; font-family: var(--cn-font); font-weight: 700; letter-spacing: var(--cn-letter); text-transform: uppercase; cursor: pointer; font-size: 12px; } .cn-btn:hover { background: var(--cn-accent-2); } .cn-btn--ghost { background: transparent; color: var(--cn-accent); border: 1px solid var(--cn-accent-2); } .cn-btn--danger { background: var(--cn-danger); color: #fff; } .cn-input, .cn-select { background: var(--cn-panel-2); border: 1px solid var(--cn-line); color: var(--cn-text); padding: 10px 12px; font-family: var(--cn-font); font-size: 13px; outline: none; letter-spacing: var(--cn-letter); } .cn-input:focus, .cn-select:focus { border-color: var(--cn-accent); } .cn-label { color: var(--cn-text-dim); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } .cn-h { color: var(--cn-accent); font-family: var(--cn-font-display); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid var(--cn-line); margin-bottom: 14px; } .cn-pill { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; border: 1px solid var(--cn-accent-2); color: var(--cn-accent); background: rgba(0,0,0,0.25); } .cn-pill--off { color: var(--cn-text-dim); border-color: var(--cn-line); } .cn-pill--danger { color: var(--cn-danger); border-color: var(--cn-danger); } /* ── Theme atmospherics — scanlines, grid, noise ─────────────────────────── */ .cn-atmos { position: fixed; inset: 0; pointer-events: none; z-index: 1; } .cn-atmos::before { content: ""; position: absolute; inset: 0; background: var(--cn-scan); background-size: 100% 4px; opacity: 0.5; } .cn-atmos::after { content: ""; position: absolute; inset: 0; background: var(--cn-grid); opacity: 0.9; } @keyframes cn-flicker { 0%,100% { opacity: 1; } 50% { opacity: 0.85; } } .cn-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cn-accent); box-shadow: 0 0 10px var(--cn-accent); animation: cn-flicker 1.4s ease infinite; } /* ── CONTEXT BAR (injected by context_bar.js on every HQ page) ──────────── */ #cn-ctxbar { position: fixed; top: 0; left: 0; right: 0; height: 42px; background: var(--cn-panel); border-bottom: 1px solid var(--cn-line); box-shadow: var(--cn-glow); z-index: 9999; display: flex; align-items: center; gap: 18px; padding: 0 18px; font-family: var(--cn-font); color: var(--cn-text); font-size: 12px; } body.cn-has-ctxbar { padding-top: 42px; } #cn-ctxbar .cb-brand { color: var(--cn-accent); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } #cn-ctxbar .cb-divider { width: 1px; height: 22px; background: var(--cn-line); } #cn-ctxbar .cb-group { display: flex; align-items: center; gap: 8px; } #cn-ctxbar .cb-k { color: var(--cn-text-dim); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; } #cn-ctxbar select { background: var(--cn-panel-2); color: var(--cn-text); border: 1px solid var(--cn-line); padding: 4px 8px; font-family: var(--cn-font); font-size: 12px; letter-spacing: var(--cn-letter); min-width: 110px; } #cn-ctxbar select:focus { outline: none; border-color: var(--cn-accent); } #cn-ctxbar .cb-mode { padding: 3px 10px; border: 1px solid var(--cn-line); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; color: var(--cn-text-dim); } #cn-ctxbar .cb-mode.on { color: var(--cn-bg); background: var(--cn-accent); border-color: var(--cn-accent); } #cn-ctxbar .cb-mode.on.live { background: var(--cn-danger); border-color: var(--cn-danger); color: #fff; } #cn-ctxbar .cb-mode.on.rehearsal { background: var(--cn-warn); border-color: var(--cn-warn); color: #000; } #cn-ctxbar .cb-spacer { flex: 1; } #cn-ctxbar .cb-sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cn-text-dim); transition: background .2s ease, box-shadow .2s ease; } #cn-ctxbar .cb-sync-dot.ok { background: var(--cn-accent); box-shadow: 0 0 8px var(--cn-accent); } #cn-ctxbar .cb-sync-dot.bad { background: var(--cn-danger); box-shadow: 0 0 8px var(--cn-danger); } #cn-ctxbar #cb-tm-group { cursor: pointer; } #cn-ctxbar .cb-tm-pill { font-size: 9px; letter-spacing: 1.5px; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--cn-text-dim); color: var(--cn-text-dim); font-family: var(--cn-font-mono, monospace); text-transform: uppercase; } #cn-ctxbar .cb-tm-pill.on { background: var(--cn-danger); border-color: var(--cn-danger); color: #fff; box-shadow: 0 0 8px var(--cn-danger); animation: cn-tm-pulse 2.4s ease-in-out infinite; } @keyframes cn-tm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } } #cn-ctxbar .cb-link { color: var(--cn-text-dim); text-decoration: none; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; } #cn-ctxbar .cb-link:hover { color: var(--cn-accent); } #cn-ctxbar .cb-theme-swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--cn-accent); box-shadow: 0 0 6px var(--cn-accent); cursor: pointer; border: 1px solid var(--cn-line); } /* Small screens — phone-friendly context bar */ @media (max-width: 720px) { #cn-ctxbar { gap: 10px; padding: 0 10px; font-size: 11px; } #cn-ctxbar .cb-divider { display: none; } #cn-ctxbar .cb-link:not(.cb-keep) { display: none; } #cn-ctxbar select { min-width: 90px; } }