/* * theme.css — Stake Win Global Theme System * Include this on every page AFTER the Tailwind CDN script. * The header.php toggle writes data-theme="dark"|"light" to * and these rules take care of the rest. * * Selector specificity note: * html[data-theme="dark"] = (0,1,1) beats :root = (0,0,1) * So our vars always override a page's own :root block. */ /* ═══════════════════════════════════════════════════════════════ DARK THEME tokens (default) ═══════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { --bg-main: #050706; --bg-card: #0d0f0e; --bg-card2: #121513; --accent: #00ff88; --accent-mid: #00cc6e; --accent-lite: rgba(0,255,136,0.12); --accent-glow: rgba(0,255,136,0.2); --text-main: #ffffff; --text-dim: #64748b; --border: rgba(255,255,255,0.05); --border-soft: rgba(255,255,255,0.08); --glass: rgba(255,255,255,0.02); --nav-bg: rgba(8,10,9,0.95); --header-bg: rgba(8,10,9,0.92); --input-bg: rgba(255,255,255,0.03); --input-border: rgba(255,255,255,0.08); --shadow: 0 15px 35px -12px rgba(0,0,0,0.8); --error: #ff3b3b; --running: #3b82f6; } /* ═══════════════════════════════════════════════════════════════ LIGHT THEME tokens ═══════════════════════════════════════════════════════════════ */ html[data-theme="light"] { --bg-main: #f0f4f8; --bg-card: #ffffff; --bg-card2: #f8fafc; --accent: #16a34a; --accent-mid: #22c55e; --accent-lite: #dcfce7; --accent-glow: rgba(22,163,74,0.15); --text-main: #0f172a; --text-dim: #64748b; --border: #e2e8f0; --border-soft: #cbd5e1; --glass: rgba(0,0,0,0.02); --nav-bg: rgba(255,255,255,0.97); --header-bg: rgba(255,255,255,0.97); --input-bg: #f8fafc; --input-border: #cbd5e1; --shadow: 0 4px 20px rgba(0,0,0,0.08); --error: #ef4444; --running: #3b82f6; } /* ── Global base ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg-main) !important; color: var(--text-main) !important; transition: background-color .3s ease, color .3s ease; } /* Smooth property transitions everywhere (skip animation elements) */ *:not([class*="animate"]):not([class*="ticker"]):not([class*="scroll"]):not(script) { transition-property: background-color, border-color, color, box-shadow; transition-duration: .25s; transition-timing-function: ease; } /* ═══════════════════════════════════════════════════════════════ LIGHT MODE OVERRIDES All rules target html[data-theme="light"] so dark mode is untouched ═══════════════════════════════════════════════════════════════ */ /* ── Tailwind utility colour fixes ── */ html[data-theme="light"] .text-white { color: var(--text-main) !important; } html[data-theme="light"] .text-gray-400, html[data-theme="light"] .text-gray-500, html[data-theme="light"] .text-gray-600, html[data-theme="light"] .text-gray-700, html[data-theme="light"] .text-gray-800, html[data-theme="light"] .text-slate-400, html[data-theme="light"] .text-slate-500 { color: var(--text-dim) !important; } html[data-theme="light"] [class*="bg-white\/"] { background-color: rgba(0,0,0,0.04) !important; } html[data-theme="light"] [class*="bg-black\/"] { background-color: rgba(0,0,0,0.04) !important; } html[data-theme="light"] [class*="border-white\/"] { border-color: var(--border) !important; } html[data-theme="light"] [class*="border-black\/"] { border-color: var(--border-soft) !important; } /* ── Elite Competitions cards (dashboard) ── */ html[data-theme="light"] [class*="from-indigo-"][class*="to-indigo-"] { background: linear-gradient(135deg,#eef2ff,#e0e7ff) !important; border-color: #c7d2fe !important; } html[data-theme="light"] [class*="from-amber-"][class*="to-amber-"] { background: linear-gradient(135deg,#fffbeb,#fef3c7) !important; border-color: #fde68a !important; } html[data-theme="light"] [class*="from-blue-"][class*="to-blue-"] { background: linear-gradient(135deg,#eff6ff,#dbeafe) !important; border-color: #bfdbfe !important; } html[data-theme="light"] .text-indigo-200 { color: #4338ca !important; } html[data-theme="light"] .text-amber-200 { color: #b45309 !important; } html[data-theme="light"] .text-blue-200 { color: #1d4ed8 !important; } /* League logos are brightness-0+invert (→ white). Revert in light mode */ html[data-theme="light"] .brightness-0 { filter: none !important; } /* ── Cards ── */ html[data-theme="light"] .bet-card, html[data-theme="light"] .history-card, html[data-theme="light"] .ticket-card { background: #ffffff !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; } html[data-theme="light"] .card-header { background: #f8fafc !important; border-color: var(--border) !important; } html[data-theme="light"] .card-results { border-top: 1px solid var(--border) !important; } html[data-theme="light"] .card-body { background: transparent !important; } /* ── Match text (hardcoded #f1f5f9 / white) ── */ html[data-theme="light"] .match-teams, html[data-theme="light"] .match-preview { color: var(--text-main) !important; } html[data-theme="light"] .match-odds { color: var(--text-main) !important; } html[data-theme="light"] .match-pick { color: var(--text-dim) !important; } html[data-theme="light"] .match-row { border-color: var(--border) !important; } /* ── Open Bets — footer (stake / potential win) ── */ html[data-theme="light"] .card-footer { background: #f1f5f9 !important; border-top: 1px solid var(--border) !important; } html[data-theme="light"] .sum-box p:last-child { color: var(--text-main) !important; } html[data-theme="light"] .expand-btn { background: #f1f5f9 !important; color: var(--text-dim) !important; border-top: 1px solid var(--border) !important; } /* ── Bet History ── */ html[data-theme="light"] .filter-bar { background: #f1f5f9 !important; border-color: var(--border) !important; } html[data-theme="light"] .filter-btn { background: #f1f5f9 !important; color: var(--text-main) !important; border-color: var(--border) !important; } html[data-theme="light"] .filter-btn.active { color: var(--accent) !important; border-color: var(--accent) !important; } html[data-theme="light"] .status-text { color: inherit !important; } html[data-theme="light"] .text-running { color: #2563eb !important; } html[data-theme="light"] .res-val { color: var(--text-main) !important; } html[data-theme="light"] .res-label { color: #94a3b8 !important; } /* ── Bottom sheets (bet history / open bets / cashout) ── */ html[data-theme="light"] .bottom-sheet { background: #ffffff !important; border-top: 1px solid var(--border) !important; } html[data-theme="light"] .sheet-option { background: #f8fafc !important; color: var(--text-main) !important; } html[data-theme="light"] .sheet-option.selected { background: var(--accent-lite) !important; color: var(--accent) !important; } html[data-theme="light"] #co-sheet { background: #ffffff !important; border-color: var(--border) !important; } /* ── Betslip ── */ html[data-theme="light"] .bs-sheet { background: #ffffff !important; color: var(--text-main) !important; border-top: 1px solid var(--border) !important; } html[data-theme="light"] .bs-item { background: #f8fafc !important; border-color: var(--border) !important; } html[data-theme="light"] .bs-item-header { border-color: var(--border) !important; } html[data-theme="light"] .bs-item-footer { background: #f1f5f9 !important; } html[data-theme="light"] .bs-teams-text { color: var(--text-main) !important; } html[data-theme="light"] .bs-odds-value { color: var(--text-main) !important; } html[data-theme="light"] #bs-footer { background: #ffffff !important; border-top: 1px solid var(--border) !important; box-shadow: 0 -4px 20px rgba(0,0,0,.08) !important; } html[data-theme="light"] #bs-footer [class*="bg-white\/"] { background: #f8fafc !important; border-color: var(--border) !important; } html[data-theme="light"] #bs-footer input { color: var(--text-main) !important; } html[data-theme="light"] .bs-sheet [class*="border-white\/"] { border-color: var(--border) !important; } /* ── Ticket details ── */ html[data-theme="light"] .td-overview { background: #f8fafc !important; border-color: var(--border) !important; } html[data-theme="light"] .tag { background: #f1f5f9 !important; border-color: var(--border) !important; color: var(--text-dim) !important; } html[data-theme="light"] .payout-card { background: #ffffff !important; border-color: var(--border) !important; } /* ── Profile ── */ html[data-theme="light"] .avatar-box { background: #e2e8f0 !important; border-color: var(--border) !important; } /* ── Inputs (global) ── */ html[data-theme="light"] .settings-input, html[data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]), html[data-theme="light"] textarea, html[data-theme="light"] select { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text-main) !important; } html[data-theme="light"] input:focus, html[data-theme="light"] textarea:focus, html[data-theme="light"] .settings-input:focus { border-color: var(--accent) !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #94a3b8 !important; } /* ── Deposit tiles ── */ html[data-theme="light"] .amount-tile { background: #f8fafc !important; border-color: var(--border) !important; color: var(--text-main) !important; } html[data-theme="light"] .amount-tile.active { background: var(--accent-lite) !important; border-color: var(--accent) !important; color: var(--accent) !important; } /* ── Odds buttons (dashboard) ── */ html[data-theme="light"] .odds-grid button, html[data-theme="light"] .today-odds button { background: #f1f5f9 !important; border-color: var(--border) !important; color: var(--text-main) !important; } html[data-theme="light"] .odds-grid button.selected, html[data-theme="light"] .today-odds button.selected { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; } /* ── Ticker ── */ html[data-theme="light"] .ticker-container { background: rgba(240,244,248,0.95) !important; border-bottom: 1px solid var(--border) !important; } /* ── Bottom nav ── */ html[data-theme="light"] .nav-wrapper { background: var(--nav-bg) !important; border-top: 1px solid var(--border) !important; } html[data-theme="light"] .nav-label { color: #94a3b8 !important; } html[data-theme="light"] .nav-icon { color: #94a3b8 !important; } html[data-theme="light"] .nav-item.active .nav-label { color: var(--text-main) !important; } html[data-theme="light"] .diamond-btn { border-color: var(--bg-main) !important; }