/* BlitzTips — Light theme overrides Aplicado quando . Cobre as duas paletas: index.html (--surface/--surface2/--accent/--blue/--text2) e sub-páginas (--card/--gold). */ html[data-theme="light"] { /* === index.html (paleta principal) === */ --bg: #eef1f6; --surface: #ffffff; --surface2: #e7ecf3; --border: #d0d8e3; --text: #1a2332; --text2: #4a5870; --muted: #8190a5; --accent: #a06c00; --green: #00945a; --red: #dc3545; --blue: #2563eb; /* === sub-páginas (paleta simples) === */ --card: #ffffff; --gold: #a06c00; } /* ── Texto hardcoded para fundo escuro → escuro para fundo claro ── */ html[data-theme="light"] #bcdcff, html[data-theme="light"] .card-bet, html[data-theme="light"] .stat-conf-mid, html[data-theme="light"] .intro-guides a, html[data-theme="light"] .hist-show-more { color: #2563eb !important } html[data-theme="light"] .d9ecff, html[data-theme="light"] .intro-action:hover, html[data-theme="light"] .empty-action:hover, html[data-theme="light"] .subtab.active, html[data-theme="light"] .surface-filter.active, html[data-theme="light"] .game-nopick-tag.value, html[data-theme="light"] .game-nopick-state, html[data-theme="light"] .game-group-tier.standard, html[data-theme="light"] .hist-track-tab.active, html[data-theme="light"] .hist-top-badge { color: #1e5fbd !important } html[data-theme="light"] #c9ddf7, html[data-theme="light"] .game-pick-bet { color: #1a3a6b !important } html[data-theme="light"] .tab { color: #4a5870 } html[data-theme="light"] .tab:hover { color: #1a2332; background: var(--surface2) } html[data-theme="light"] .tab.active { color: #fff } html[data-theme="light"] .stat-sample { color: #8a6d00 } html[data-theme="light"] .game-group-tier { color: #dc3545 } html[data-theme="light"] .f1f5ff { color: #1a2332 } html[data-theme="light"] .eef7ff, html[data-theme="light"] .onboarding-tip-btn:hover, html[data-theme="light"] .market-guide-link:hover { color: #0d3a7a !important } html[data-theme="light"] .intro-proof span { color: var(--text2) } /* ── Body / sobreposição de textura ── */ html[data-theme="light"] body::before { opacity: .12 } /* ── Age gate ── */ html[data-theme="light"] .age-gate { background: rgba(238,241,246,.97) } /* ── Cookie banner ── */ html[data-theme="light"] .cookie-banner { background: rgba(255,255,255,.96); box-shadow: 0 -10px 30px rgba(0,0,0,.08) } /* ── Badge 18+ (no dark usa #fff bg; no light manter legível) ── */ html[data-theme="light"] .badge-18 { background: #1a2332; color: #fff } /* ── Site intro ── */ html[data-theme="light"] .site-intro { background: linear-gradient(180deg, rgba(37,99,235,.04), rgba(37,99,235,.02)) } /* ── Disclaimer ── */ html[data-theme="light"] .disclaimer { background: rgba(160,108,0,.06); border-color: rgba(160,108,0,.15); color: rgba(160,108,0,.85) } /* ── Tabs wrapper ── */ html[data-theme="light"] .tabs-wrapper { box-shadow: 0 6px 18px rgba(0,0,0,.06) } html[data-theme="light"] .tabs-scroll-ind { background: rgba(0,0,0,.07) } html[data-theme="light"] .tabs-scroll-thumb { background: var(--blue) } /* ── Pick cards ── */ html[data-theme="light"] .pick-card { background: linear-gradient(180deg, #ffffff, #f8fafc); box-shadow: 0 4px 14px rgba(0,0,0,.06) } html[data-theme="light"] .pick-card:hover { border-color: rgba(160,108,0,.35) } html[data-theme="light"] .pick-card.expanded { border-color: rgba(160,108,0,.4) } html[data-theme="light"] .card-odd { color: rgba(160,108,0,.85) } /* ── Game pick rows ── */ html[data-theme="light"] .game-pick-row { background: rgba(238,241,246,.6) } html[data-theme="light"] .game-pick-row.lead { border-color: rgba(160,108,0,.25); background: rgba(160,108,0,.06) } /* ── Pick group headings ── */ html[data-theme="light"] .pick-group-heading { background: rgba(238,241,246,.7) } /* ── Skeleton shimmer ── */ html[data-theme="light"] .skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%); background-size: 200% 100% } /* ── Calculator result ── */ html[data-theme="light"] .calc-result { background: linear-gradient(135deg, rgba(160,108,0,.06), rgba(160,108,0,.02)) } /* ── Footer ── */ html[data-theme="light"] .footer { background: linear-gradient(180deg, transparent, rgba(238,241,246,.5)) } /* ── History: summary ── */ html[data-theme="light"] .hist-summary { background: linear-gradient(135deg, #ffffff, var(--surface2)) } /* ── History: stat cells ── */ html[data-theme="light"] .hist-stat-cell { background: rgba(0,0,0,.015) } /* ── History: reliability ── */ html[data-theme="light"] .hist-reliability { background: linear-gradient(180deg, var(--surface), rgba(238,241,246,.8)) } html[data-theme="light"] .hist-reliability-chart { background: rgba(0,0,0,.018) } /* ── History: pending ledger ── */ html[data-theme="light"] .hist-pending-ledger { background: linear-gradient(180deg, rgba(37,99,235,.03), rgba(238,241,246,.9)) } /* ── History: track tabs container ── */ html[data-theme="light"] .hist-track-tabs { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.06) } /* ── History: fold/day/card backgrounds ── */ html[data-theme="light"] .hist-fold { background: linear-gradient(180deg, var(--surface), rgba(238,241,246,.85)) } html[data-theme="light"] .hist-fold-head:hover { background: rgba(0,0,0,.02) } html[data-theme="light"] .hist-day-header { background: rgba(0,0,0,.015) } html[data-theme="light"] .hist-day-header:hover { background: rgba(0,0,0,.03) } html[data-theme="light"] .hist-market-row { background: linear-gradient(180deg, var(--surface), rgba(238,241,246,.8)) } html[data-theme="light"] .hist-pending-pick { background: rgba(0,0,0,.012); border-color: rgba(0,0,0,.05) } html[data-theme="light"] .hist-pending-source { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.05) } html[data-theme="light"] .hist-pending-empty { background: rgba(0,0,0,.008) } /* ── History: pick rows ── */ html[data-theme="light"] .hist-pick { border-bottom-color: rgba(0,0,0,.04) } /* ── History: fm badge ── */ html[data-theme="light"] .hist-fm-badge { background: rgba(0,0,0,.03); border-color: var(--border) } /* ── History: result pick rows ── */ html[data-theme="light"] .result-pick-row { background: rgba(0,0,0,.015); border-color: rgba(0,0,0,.04) } /* ── Menu panel ── */ html[data-theme="light"] .menu-panel { box-shadow: 0 8px 24px rgba(0,0,0,.1) } html[data-theme="light"] .gl-panel { box-shadow: 0 14px 34px rgba(0,0,0,.12) } /* ── How modal ── */ html[data-theme="light"] .how-modal-panel { box-shadow: 0 24px 80px rgba(0,0,0,.15) } /* ── Team logo fallback ── */ html[data-theme="light"] .team-logo-fallback { border-color: rgba(0,0,0,.1) } /* ── Toggle button ── */ .theme-btn { background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-size: 14px; cursor: pointer; width: 30px; height: 28px; border-radius: 14px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; line-height: 1; transition: all .15s; } .theme-btn:hover { background: var(--surface); border-color: var(--accent); color: var(--accent) } @media (max-width: 520px) { .theme-btn { width: 29px; height: 27px } } /* ── Sub-páginas (blog, glossário, etc.) ── */ html[data-theme="light"] body > .container { background: transparent } html[data-theme="light"] .rule { background: var(--surface) } html[data-theme="light"] .rule-num { color: #fff } html[data-theme="light"] .callout { background: rgba(160,108,0,.05); border-color: rgba(160,108,0,.2) } html[data-theme="light"] .alert { background: rgba(160,108,0,.06); border-left-color: var(--gold) } html[data-theme="light"] .alert-green { background: rgba(0,148,90,.06); border-left-color: var(--green) } html[data-theme="light"] code { background: var(--surface2); color: var(--gold) } html[data-theme="light"] .status-badge { background: rgba(0,148,90,.12); color: var(--green) } html[data-theme="light"] .tag { background: rgba(0,148,90,.1); color: var(--green) } html[data-theme="light"] th { color: var(--muted) } html[data-theme="light"] a { color: var(--blue) } html[data-theme="light"] strong { color: var(--gold) } html[data-theme="light"] .how-important { background: rgba(160,108,0,.06); border-color: rgba(160,108,0,.18) } html[data-theme="light"] .results-note { background: rgba(37,99,235,.05); border-color: rgba(37,99,235,.15) } html[data-theme="light"] .result-et-note { background: rgba(160,108,0,.05); border-color: rgba(160,108,0,.15) }