/* ============================================================ AlgoBet — themes.css 5 theme palettes via [data-theme] on Generated from REDESIGN_202608131103 design specs. ============================================================ */ /* ──────────── DEFAULT = neon-dark (mirrors legacy dark look) */ :root, :root[data-theme="neon-dark"] { /* ── Base surfaces ── */ --bg-base: #0e0e0e; --bg-surface: rgba(31, 31, 31, 0.85); --bg-surface-hover: rgba(42, 42, 42, 0.95); --bg-card: rgba(27, 27, 27, 0.90); --card-border: rgba(255, 255, 255, 0.06); --border-color: rgba(255, 255, 255, 0.07); /* ── Surface & Border Aliases ── */ --surface: var(--bg-surface); --surface-elevated: var(--bg-card); --border-subtle: var(--card-border); --text-primary: var(--text-main); --text-secondary: var(--text-muted); /* ── Typography ── */ --text-main: #e2e2e2; --text-muted: #8a9a99; --font-heading: 'Space Grotesk', 'Geist', sans-serif; --font-body: 'Geist', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* ── Brand accents ── */ --primary: #00dddd; --primary-glow: rgba(0, 221, 221, 0.35); --primary-hover: #00fbfb; --secondary: #fe00fe; --secondary-glow: rgba(254, 0, 254, 0.25); --tertiary: #d1bcff; /* ── Functional ── */ --success: #00dddd; --warning: #ffb000; --danger: #ff3131; /* ── Radii & transitions ── */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); /* ── Sidebar ── */ --sidebar-bg: #0e0e0e; --sidebar-border: rgba(255, 255, 255, 0.06); --sidebar-link-color: #8a9a99; --sidebar-link-hover-color: #ffffff; --sidebar-link-hover-bg: rgba(255, 255, 255, 0.04); --sidebar-active-color: #00dddd; --sidebar-active-bg: rgba(0, 221, 221, 0.08); --sidebar-label-color: #3a4a49; --sidebar-footer-btn-bg: rgba(255, 255, 255, 0.04); --sidebar-footer-btn-border: rgba(255, 255, 255, 0.08); --sidebar-footer-btn-color: #b9cacb; --sidebar-footer-btn-hover-bg: rgba(255, 255, 255, 0.08); --sidebar-footer-btn-hover-color: #00dddd; --sidebar-footer-btn-hover-border: rgba(0, 221, 221, 0.30); --sidebar-logo-color: #ffffff; /* ── Status badges ── */ --status-scheduled-color: #ffffff; --status-scheduled-bg: rgba(107, 114, 128, 0.30); --status-scheduled-border: rgba(255, 255, 255, 0.50); --status-finished-color: #86efac; --status-finished-bg: rgba(134, 239, 172, 0.08); --status-finished-border: rgba(134, 239, 172, 0.35); --status-postponed-color: #fdba74; --status-postponed-bg: rgba(251, 186, 116, 0.15); --status-postponed-border: rgba(251, 186, 116, 0.40); /* ── Scrollbar ── */ --scrollbar-thumb: rgba(255, 255, 255, 0.08); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.15); /* ── Nav active bar ── */ --nav-active-bar-color: #00dddd; --nav-active-bar-glow: rgba(0, 221, 221, 0.6); /* ── Body bg decoration ── */ --bg-grid-line: rgba(255, 255, 255, 0.025); --bg-radial-accent: rgba(0, 221, 221, 0.04); /* ── Glass panel ── */ --glass-bg: rgba(22, 25, 31, 0.6); --glass-border: rgba(255, 255, 255, 0.06); } /* ──────────────────────────────────────── THEME 2 — Contrast Dark Deep slate, electric blue accents, maximum legibility ──────────────────────────────────────────── */ :root[data-theme="contrast-dark"] { --bg-base: #0e1321; --bg-surface: rgba(26, 31, 46, 0.90); --bg-surface-hover: rgba(37, 42, 57, 0.95); --bg-card: rgba(22, 27, 42, 0.92); --card-border: rgba(255, 255, 255, 0.07); --border-color: rgba(66, 71, 84, 0.80); /* ── Surface & Border Aliases ── */ --surface: var(--bg-surface); --surface-elevated: var(--bg-card); --border-subtle: var(--card-border); --text-primary: var(--text-main); --text-secondary: var(--text-muted); --text-main: #dee2f7; --text-muted: #c2c6d6; --font-heading: 'Hanken Grotesk', 'Geist', sans-serif; --font-body: 'Hanken Grotesk', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --primary: #adc6ff; --primary-glow: rgba(173, 198, 255, 0.30); --primary-hover: #d8e2ff; --secondary: #c4c7c9; --secondary-glow: rgba(196, 199, 201, 0.20); --tertiary: #b7c8e1; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --radius-sm: 2px; --radius-md: 6px; --radius-lg: 8px; --transition: all 0.2s ease; --sidebar-bg: #090e1c; --sidebar-border: rgba(66, 71, 84, 0.60); --sidebar-link-color: #8c909f; --sidebar-link-hover-color: #dee2f7; --sidebar-link-hover-bg: rgba(255, 255, 255, 0.04); --sidebar-active-color: #adc6ff; --sidebar-active-bg: rgba(173, 198, 255, 0.10); --sidebar-label-color: #424754; --sidebar-footer-btn-bg: rgba(255, 255, 255, 0.04); --sidebar-footer-btn-border: rgba(255, 255, 255, 0.10); --sidebar-footer-btn-color: #c2c6d6; --sidebar-footer-btn-hover-bg: rgba(173, 198, 255, 0.10); --sidebar-footer-btn-hover-color: #adc6ff; --sidebar-footer-btn-hover-border: rgba(173, 198, 255, 0.30); --sidebar-logo-color: #dee2f7; --status-scheduled-color: #dee2f7; --status-scheduled-bg: rgba(140, 144, 159, 0.20); --status-scheduled-border: rgba(140, 144, 159, 0.40); --status-finished-color: #10b981; --status-finished-bg: rgba(16, 185, 129, 0.10); --status-finished-border: rgba(16, 185, 129, 0.30); --status-postponed-color: #f59e0b; --status-postponed-bg: rgba(245, 158, 11, 0.10); --status-postponed-border: rgba(245, 158, 11, 0.30); --scrollbar-thumb: rgba(173, 198, 255, 0.10); --scrollbar-thumb-hover: rgba(173, 198, 255, 0.20); --nav-active-bar-color: #4d8eff; --nav-active-bar-glow: rgba(77, 142, 255, 0.50); --bg-grid-line: rgba(255, 255, 255, 0.02); --bg-radial-accent: rgba(173, 198, 255, 0.03); --glass-bg: rgba(26, 31, 46, 0.75); --glass-border: rgba(66, 71, 84, 0.50); } /* ────────────────────────────────── THEME 3 — Nocturne Analyst Deep charcoal, muted blue + amber, refined minimalism ─────────────────────────────────── */ :root[data-theme="nocturne"] { --bg-base: #131313; --bg-surface: rgba(32, 31, 31, 0.90); --bg-surface-hover: rgba(42, 42, 42, 0.95); --bg-card: rgba(28, 27, 27, 0.92); --card-border: rgba(255, 255, 255, 0.05); --border-color: rgba(65, 71, 81, 0.60); /* ── Surface & Border Aliases ── */ --surface: var(--bg-surface); --surface-elevated: var(--bg-card); --border-subtle: var(--card-border); --text-primary: var(--text-main); --text-secondary: var(--text-muted); --text-main: #e5e2e1; --text-muted: #8b919d; --font-heading: 'Hanken Grotesk', 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --primary: #a4c9ff; --primary-glow: rgba(164, 201, 255, 0.25); --primary-hover: #d4e3ff; --secondary: #bcc7de; --secondary-glow: rgba(188, 199, 222, 0.15); --tertiary: #ffb953; --success: #34a853; --warning: #ffb953; --danger: #e03131; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --transition: all 0.2s ease; --sidebar-bg: #0e0e0e; --sidebar-border: rgba(65, 71, 81, 0.50); --sidebar-link-color: #8b919d; --sidebar-link-hover-color: #e5e2e1; --sidebar-link-hover-bg: rgba(255, 255, 255, 0.03); --sidebar-active-color: #a4c9ff; --sidebar-active-bg: rgba(164, 201, 255, 0.08); --sidebar-label-color: #414751; --sidebar-footer-btn-bg: rgba(255, 255, 255, 0.03); --sidebar-footer-btn-border: rgba(255, 255, 255, 0.08); --sidebar-footer-btn-color: #bcc7de; --sidebar-footer-btn-hover-bg: rgba(164, 201, 255, 0.08); --sidebar-footer-btn-hover-color: #a4c9ff; --sidebar-footer-btn-hover-border: rgba(164, 201, 255, 0.25); --sidebar-logo-color: #e5e2e1; --status-scheduled-color: #e5e2e1; --status-scheduled-bg: rgba(139, 145, 157, 0.15); --status-scheduled-border: rgba(139, 145, 157, 0.35); --status-finished-color: #a4c9ff; --status-finished-bg: rgba(164, 201, 255, 0.08); --status-finished-border: rgba(164, 201, 255, 0.25); --status-postponed-color: #ffb953; --status-postponed-bg: rgba(255, 185, 83, 0.10); --status-postponed-border: rgba(255, 185, 83, 0.30); --scrollbar-thumb: rgba(164, 201, 255, 0.08); --scrollbar-thumb-hover: rgba(164, 201, 255, 0.16); --nav-active-bar-color: #4d93e5; --nav-active-bar-glow: rgba(77, 147, 229, 0.40); --bg-grid-line: rgba(255, 255, 255, 0.018); --bg-radial-accent: rgba(164, 201, 255, 0.025); --glass-bg: rgba(28, 27, 27, 0.70); --glass-border: rgba(65, 71, 81, 0.40); } /* ──────────────────────────────────────────── THEME 4 — Terra & Parchment (LIGHT) Warm cream, terracotta, sage — organic editorial ──────────────────────────────────────── */ :root[data-theme="terra"] { --bg-base: #fcf9f5; --bg-surface: rgba(240, 237, 233, 0.95); --bg-surface-hover: rgba(234, 232, 228, 1); --bg-card: rgba(246, 243, 239, 0.97); --card-border: rgba(74, 55, 40, 0.09); --border-color: rgba(136, 114, 109, 0.25); /* ── Surface & Border Aliases ── */ --surface: var(--bg-surface); --surface-elevated: #ffffff; --border-subtle: var(--card-border); --text-primary: var(--text-main); --text-secondary: var(--text-muted); --text-main: #1c1c1a; --text-muted: #55433e; --font-heading: 'Newsreader', 'Georgia', serif; --font-body: 'Hanken Grotesk', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --primary: #94442e; --primary-glow: rgba(148, 68, 46, 0.18); --primary-hover: #b35c44; --secondary: #586150; --secondary-glow: rgba(88, 97, 80, 0.15); --tertiary: #6e5847; --success: #586150; --warning: #b35c44; --danger: #ba1a1a; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --transition: all 0.2s ease; --sidebar-bg: #f6f3ef; --sidebar-border: rgba(136, 114, 109, 0.20); --sidebar-link-color: #6e5847; --sidebar-link-hover-color: #1c1c1a; --sidebar-link-hover-bg: rgba(148, 68, 46, 0.06); --sidebar-active-color: #94442e; --sidebar-active-bg: rgba(148, 68, 46, 0.09); --sidebar-label-color: #88726d; --sidebar-footer-btn-bg: rgba(148, 68, 46, 0.06); --sidebar-footer-btn-border: rgba(136, 114, 109, 0.25); --sidebar-footer-btn-color: #6e5847; --sidebar-footer-btn-hover-bg: rgba(148, 68, 46, 0.12); --sidebar-footer-btn-hover-color: #94442e; --sidebar-footer-btn-hover-border: rgba(148, 68, 46, 0.35); --sidebar-logo-color: #1c1c1a; --status-scheduled-color: #55433e; --status-scheduled-bg: rgba(88, 97, 80, 0.10); --status-scheduled-border: rgba(88, 97, 80, 0.25); --status-finished-color: #586150; --status-finished-bg: rgba(88, 97, 80, 0.12); --status-finished-border: rgba(88, 97, 80, 0.30); --status-postponed-color: #94442e; --status-postponed-bg: rgba(148, 68, 46, 0.10); --status-postponed-border: rgba(148, 68, 46, 0.25); --scrollbar-thumb: rgba(148, 68, 46, 0.15); --scrollbar-thumb-hover: rgba(148, 68, 46, 0.28); --nav-active-bar-color: #94442e; --nav-active-bar-glow: rgba(148, 68, 46, 0.35); --bg-grid-line: rgba(148, 68, 46, 0.04); --bg-radial-accent: rgba(148, 68, 46, 0.025); --glass-bg: rgba(246, 243, 239, 0.85); --glass-border: rgba(136, 114, 109, 0.18); } /* ────────────────── THEME 5 — Algorithmic Journal (LIGHT) Paper white, ink black, electric blue — editorial precision */ :root[data-theme="algorithmic"] { --bg-base: #f9f9f9; --bg-surface: rgba(238, 238, 238, 0.95); --bg-surface-hover: rgba(232, 232, 232, 1); --bg-card: rgba(243, 243, 243, 0.97); --card-border: rgba(26, 28, 28, 0.08); --border-color: rgba(229, 229, 229, 0.90); /* ── Surface & Border Aliases ── */ --surface: var(--bg-surface); --surface-elevated: #ffffff; --border-subtle: var(--card-border); --text-primary: var(--text-main); --text-secondary: var(--text-muted); --text-main: #1a1c1c; --text-muted: #666666; --font-heading: 'Libre Caslon Text', 'Georgia', serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --primary: #004ac6; --primary-glow: rgba(0, 74, 198, 0.15); --primary-hover: #2563eb; --secondary: #5f5e5e; --secondary-glow: rgba(95, 94, 94, 0.12); --tertiary: #943700; --success: #166534; --warning: #943700; --danger: #ba1a1a; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --transition: all 0.15s ease; --sidebar-bg: #f3f3f3; --sidebar-border: rgba(229, 229, 229, 0.90); --sidebar-link-color: #5f5e5e; --sidebar-link-hover-color: #1a1c1c; --sidebar-link-hover-bg: rgba(0, 74, 198, 0.05); --sidebar-active-color: #004ac6; --sidebar-active-bg: rgba(0, 74, 198, 0.07); --sidebar-label-color: #737686; --sidebar-footer-btn-bg: rgba(0, 0, 0, 0.04); --sidebar-footer-btn-border: rgba(26, 28, 28, 0.12); --sidebar-footer-btn-color: #5f5e5e; --sidebar-footer-btn-hover-bg: rgba(0, 74, 198, 0.08); --sidebar-footer-btn-hover-color: #004ac6; --sidebar-footer-btn-hover-border: rgba(0, 74, 198, 0.25); --sidebar-logo-color: #1a1c1c; --status-scheduled-color: #5f5e5e; --status-scheduled-bg: rgba(95, 94, 94, 0.10); --status-scheduled-border: rgba(95, 94, 94, 0.25); --status-finished-color: #166534; --status-finished-bg: rgba(22, 101, 52, 0.08); --status-finished-border: rgba(22, 101, 52, 0.25); --status-postponed-color: #943700; --status-postponed-bg: rgba(148, 55, 0, 0.08); --status-postponed-border: rgba(148, 55, 0, 0.22); --scrollbar-thumb: rgba(0, 74, 198, 0.12); --scrollbar-thumb-hover: rgba(0, 74, 198, 0.22); --nav-active-bar-color: #004ac6; --nav-active-bar-glow: rgba(0, 74, 198, 0.30); --bg-grid-line: rgba(0, 0, 0, 0.028); --bg-radial-accent: rgba(0, 74, 198, 0.020); --glass-bg: rgba(243, 243, 243, 0.90); --glass-border: rgba(229, 229, 229, 0.80); } /* ───────────────────────────────────────────────── GLOBAL: body & glass driven by CSS vars ──────────────────────────────────────────── */ html { transition: background-color 0.35s ease; } body { background-color: var(--bg-base); color: var(--text-main); font-family: var(--font-body); background-image: linear-gradient(var(--bg-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid-line) 1px, transparent 1px), radial-gradient(circle at 50% 0%, var(--bg-radial-accent) 0%, transparent 50%); background-size: 40px 40px, 40px 40px, 100% 100%; transition: background-color 0.35s ease, color 0.35s ease; } .glassmorphism, .glass, .glass-card, .card { background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--card-border); border-radius: var(--radius-lg); color: var(--text-main); transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ── Status badges ── */ .status-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 10px; font-family: var(--font-mono); font-weight: 500; border: 1px solid; white-space: nowrap; } .status-scheduled { color: var(--status-scheduled-color); background-color: var(--status-scheduled-bg); border-color: var(--status-scheduled-border); } .status-finished { color: var(--status-finished-color); background-color: var(--status-finished-bg); border-color: var(--status-finished-border); } .status-postponed { color: var(--status-postponed-color); background-color: var(--status-postponed-bg); border-color: var(--status-postponed-border); } /* ── Theme toast ── */ #theme-toast { position: fixed; bottom: 84px; left: 16px; z-index: 9999; padding: 7px 14px; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-main); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; border-radius: var(--radius-lg); backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; white-space: nowrap; } #theme-toast.visible { opacity: 1; transform: translateY(0); } /* ── DataHub & Portal Table Dividers & Borders (Theme Harmony) ── */ [class*="divide-outline-variant"] > * + *, .divide-outline-variant > * + * { border-color: var(--border-color, rgba(255, 255, 255, 0.06)) !important; } [class*="border-outline-variant"], .border-outline-variant { border-color: var(--border-color, rgba(255, 255, 255, 0.06)) !important; } /* DataHub Table Row Transitions and Borders */ table.w-full tr, table.compact-odds-table tr { border-color: var(--border-color, rgba(255, 255, 255, 0.06)); } table.w-full thead { border-bottom-color: var(--border-color, rgba(255, 255, 255, 0.08)) !important; }