/* ===== DARK THEME OVERRIDES ===== Applied when . Comprehensive coverage: homepage, articles, match detail, match list, preview, H2H, archive, jadwal, search, categories, tags, piala-dunia-2026 */ html[data-theme="dark"] { color-scheme: dark; } /* ---- CSS variable overrides (used by match detail + match list + preview) ---- */ html[data-theme="dark"] { --ink: #e5e5e5; --paper: #1a1a20; --accent: #ff6b8a; --rule: #2a2d36; --muted: #8f929a; --soft: #222530; --win: #fb923c; --loss: #4b5563; --home-color: #ff6b8a; --away-color: #60a5fa; } /* ---- Global surfaces ---- */ html[data-theme="dark"] body { background: #0f0f14; color: #e5e5e5; } html[data-theme="dark"] a { color: #e5e5e5; } html[data-theme="dark"] a:hover { color: #ff6b8a; } html[data-theme="dark"] hr { border-color: #2a2d36; } html[data-theme="dark"] ::selection { background: #ff6b8a33; color: #fff; } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: #1a1a20; color: #e5e5e5; border-color: #2a2d36; } /* ---- Site header ---- */ html[data-theme="dark"] .site-header { background: #0a0a10 !important; border-bottom-color: #2a2d36 !important; } html[data-theme="dark"] .nav-link { color: #b8bcc4 !important; } html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .nav-link.active { color: #f5f5f5 !important; } html[data-theme="dark"] .logo-accent { color: #ff6b8a; } html[data-theme="dark"] .mobile-menu-toggle span { background: #e5e5e5; } /* ---- Header actions (toggle + hamburger wrapper) ---- */ .header-actions { display: flex; align-items: center; gap: 0.5rem; } /* ---- Theme toggle button ---- */ .theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; transition: background 0.2s, border-color 0.2s; padding: 0; } .theme-toggle:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); } html[data-theme="light"] .theme-toggle { border-color: rgba(0,0,0,0.2); color: #4b5563; background: rgba(0,0,0,0.04); } html[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.4); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle { color: #fbbf24; border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.1); } /* ---- Footer ---- */ html[data-theme="dark"] .site-footer, html[data-theme="dark"] footer { background: #0a0a10 !important; color: #b8bcc4; border-top-color: #2a2d36 !important; } html[data-theme="dark"] footer a { color: #d4d7dd; } /* ---- Homepage ---- */ html[data-theme="dark"] .main-content { background: transparent; } html[data-theme="dark"] .ticker-bar { background: #1a1a20 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .ticker-label { background: #ff6b8a !important; } html[data-theme="dark"] .ticker-item a { color: #d4d7dd !important; } html[data-theme="dark"] .section-title, html[data-theme="dark"] .title-accent { color: #f5f5f5; } html[data-theme="dark"] .section-header { border-color: #2a2d36; } html[data-theme="dark"] .see-all { color: #ff6b8a !important; } /* Hero section */ html[data-theme="dark"] .hero-section { border-color: #2a2d36; } /* Post cards (story cards, article cards) */ html[data-theme="dark"] .story-card, html[data-theme="dark"] .hero-card, html[data-theme="dark"] .post-card { background: #1a1a20 !important; border-color: #2a2d36 !important; color: #e5e5e5; } html[data-theme="dark"] .story-card:hover, html[data-theme="dark"] .post-card:hover { border-color: #ff6b8a !important; } html[data-theme="dark"] .story-title a, html[data-theme="dark"] .story-link { color: #f5f5f5 !important; } html[data-theme="dark"] .story-time, html[data-theme="dark"] .story-badge { color: #8f929a !important; } html[data-theme="dark"] .story-overlay { background: linear-gradient(transparent, #0f0f14cc) !important; } /* Big match cards */ html[data-theme="dark"] .big-match-card, html[data-theme="dark"] .bmc-header { background: #1a1a20 !important; border-color: #2a2d36 !important; color: #e5e5e5; } html[data-theme="dark"] .bmc-league, html[data-theme="dark"] .bmc-time { color: #8f929a !important; } html[data-theme="dark"] .bmc-team-name { color: #f5f5f5 !important; } html[data-theme="dark"] .bmc-odds { background: #222530 !important; color: #e5e5e5 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .bmc-prediction, html[data-theme="dark"] .bmc-countdown { color: #ff6b8a !important; } html[data-theme="dark"] .bmc-probability { background: #222530 !important; } /* Upcoming cards */ html[data-theme="dark"] .upcoming-card { background: #1a1a20 !important; border-color: #2a2d36 !important; color: #e5e5e5; } html[data-theme="dark"] .uc-league { color: #8f929a !important; } html[data-theme="dark"] .uc-score-box { background: #222530 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .uc-odds { color: #d4d7dd !important; } html[data-theme="dark"] .uc-pred { color: #ff6b8a !important; } /* Results widget on homepage */ html[data-theme="dark"] .result-card { background: #1a1a20 !important; border-color: #2a2d36 !important; color: #e5e5e5; } html[data-theme="dark"] .result-card:hover { border-color: #ff6b8a !important; } html[data-theme="dark"] .result-league, html[data-theme="dark"] .result-meta { border-color: #2a2d36 !important; color: #8f929a; } html[data-theme="dark"] .result-cta { color: #ff6b8a !important; } /* Standings section */ html[data-theme="dark"] .standings-section { background: transparent; } html[data-theme="dark"] .std-table-wrap { background: #1a1a20 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .std-table th { background: #0f0f14 !important; color: #8f929a !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .std-table td { border-color: #2a2d36 !important; color: #d4d7dd; } html[data-theme="dark"] .std-table tr:hover td { background: #222530 !important; } html[data-theme="dark"] .std-tab { background: #222530 !important; color: #8f929a !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .std-tab.active, html[data-theme="dark"] .std-tab:hover { background: #ff6b8a !important; color: #fff !important; } html[data-theme="dark"] .std-team-inner { color: #e5e5e5 !important; } /* UCL bracket */ html[data-theme="dark"] .ucl-section { background: transparent; } html[data-theme="dark"] .bracket { color: #e5e5e5; } html[data-theme="dark"] .b-matchup { background: #1a1a20 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .b-team { border-color: #2a2d36 !important; } html[data-theme="dark"] .b-name { color: #d4d7dd !important; } html[data-theme="dark"] .b-odds { color: #8f929a !important; } html[data-theme="dark"] .conn-line, html[data-theme="dark"] .conn-mid { border-color: #2a2d36 !important; } html[data-theme="dark"] .bracket-headers span { color: #8f929a; } /* CTA / quick links */ html[data-theme="dark"] .cta-content { background: #1a1a20 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .cta-btn { background: #ff6b8a !important; color: #0f0f14 !important; } html[data-theme="dark"] .quick-link { background: #1a1a20 !important; border-color: #2a2d36 !important; color: #e5e5e5 !important; } /* Trending tags */ html[data-theme="dark"] .trending-tag { background: #222530 !important; color: #d4d7dd !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .trending-tag:hover { background: #ff6b8a !important; color: #0f0f14 !important; } /* Category pills */ html[data-theme="dark"] .category-pill { background: #222530 !important; color: #d4d7dd !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .category-pill.active { background: #ff6b8a !important; color: #0f0f14 !important; } /* ---- Articles (editorial single) ---- */ html[data-theme="dark"] .editorial-article { color: #e5e5e5; } html[data-theme="dark"] .editorial-article-title { color: #f5f5f5; } html[data-theme="dark"] .editorial-article-deck { color: #b8bcc4; } html[data-theme="dark"] .editorial-article-meta { color: #8f929a; } html[data-theme="dark"] .editorial-article-meta a { color: #d4d7dd !important; } html[data-theme="dark"] .editorial-article-body { color: #d4d7dd; } html[data-theme="dark"] .editorial-article-body p, html[data-theme="dark"] .editorial-article-body li, html[data-theme="dark"] .editorial-article-body h2, html[data-theme="dark"] .editorial-article-body h3, html[data-theme="dark"] .editorial-article-body h4, html[data-theme="dark"] .editorial-article-body td, html[data-theme="dark"] .editorial-article-body th { color: #e5e5e5; } html[data-theme="dark"] .editorial-article-body a { color: #ff6b8a; } html[data-theme="dark"] .editorial-article-body blockquote { border-left-color: #ff6b8a; color: #b8bcc4; background: #1a1a20; } html[data-theme="dark"] .editorial-article-body table { border-color: #2a2d36; } html[data-theme="dark"] .editorial-article-body th { background: #0f0f14; } html[data-theme="dark"] .editorial-article-body code { background: #222530; color: #ff6b8a; } html[data-theme="dark"] .editorial-article-body pre { background: #0f0f14 !important; } html[data-theme="dark"] .editorial-source-box { background: #1a1a20 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .editorial-post-nav a { background: #1a1a20; border-color: #2a2d36; color: #e5e5e5; } html[data-theme="dark"] .editorial-post-nav a:hover { border-color: #ff6b8a; } /* Related articles */ html[data-theme="dark"] .related-section-title { color: #f5f5f5; border-color: #2a2d36; } html[data-theme="dark"] .related-article-card { background: #1a1a20 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .related-article-title a { color: #e5e5e5; } html[data-theme="dark"] .related-category { color: #ff6b8a !important; } /* Recent matches widget in posts */ html[data-theme="dark"] .recent-matches-widget { background: #1a1a20 !important; border-top-color: #e5e5e5 !important; border-bottom-color: #2a2d36 !important; color: #e5e5e5 !important; } html[data-theme="dark"] .recent-matches-widget h2 { color: #f5f5f5 !important; } html[data-theme="dark"] .recent-matches-widget p { color: #8f929a !important; } html[data-theme="dark"] .recent-matches-widget a { background: #0f0f14 !important; border-color: #2a2d36 !important; color: #e5e5e5 !important; } /* Breadcrumbs */ html[data-theme="dark"] .breadcrumbs, html[data-theme="dark"] .breadcrumbs a, html[data-theme="dark"] .mv2-crumb a, html[data-theme="dark"] .pv-crumb a { color: #8f929a !important; } /* ---- Match detail (mv2 prefix) ---- */ html[data-theme="dark"] .mv2-hero-wrap { background: #0f0f14 !important; border-bottom-color: #2a2d36 !important; } html[data-theme="dark"] .mv2-hero { border-top-color: #e5e5e5; border-bottom-color: #2a2d36; } html[data-theme="dark"] .mv2-tab { color: #8f929a; } html[data-theme="dark"] .mv2-tab.active { color: #ff6b8a; border-bottom-color: #ff6b8a; } html[data-theme="dark"] .mv2-tab:hover:not(.active) { color: #e5e5e5; } html[data-theme="dark"] .mv2-info-card, html[data-theme="dark"] .mv2-analysis, html[data-theme="dark"] .mv2-events, html[data-theme="dark"] .mv2-players-team, html[data-theme="dark"] .mv2-bench-col, html[data-theme="dark"] .mv2-coaches-row, html[data-theme="dark"] .mv2-standings-wrap, html[data-theme="dark"] .mv2-h2h-summary, html[data-theme="dark"] .mv2-h2h-matches, html[data-theme="dark"] .mv2-subs-rows { background: #1a1a20 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .mv2-analysis { background: #16161c !important; border-left-color: #ff6b8a !important; } html[data-theme="dark"] .mv2-analysis p { color: #e5e5e5; } html[data-theme="dark"] .mv2-info-icon { background: #0f0f14 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .mv2-event.phase { background: #222530 !important; } html[data-theme="dark"] .mv2-event.phase .mv2-e-label strong { color: #f5f5f5 !important; } html[data-theme="dark"] .mv2-event { border-color: #2a2d36 !important; } html[data-theme="dark"] .mv2-players-team h3 { background: #0f0f14 !important; border-bottom-color: #2a2d36 !important; } html[data-theme="dark"] .mv2-players-divider { background: #0f0f14 !important; } html[data-theme="dark"] .mv2-standings thead th { background: #0f0f14 !important; color: #8f929a; } html[data-theme="dark"] .mv2-standings td { border-color: #2a2d36 !important; } html[data-theme="dark"] .mv2-standings tr.hit { background: #2a1d26 !important; } html[data-theme="dark"] .mv2-score, html[data-theme="dark"] .mv2-player-name { color: #f5f5f5; } /* Match list */ html[data-theme="dark"] .mv2-card:hover, html[data-theme="dark"] .mv2-h2h-match:hover { background: #222530 !important; } html[data-theme="dark"] .mv2-filter-chip, html[data-theme="dark"] .pvl-chip { background: #1a1a20; border-color: #2a2d36; color: #8f929a; } html[data-theme="dark"] .mv2-filter-chip:hover, html[data-theme="dark"] .pvl-chip:hover { border-color: #ff6b8a; color: #f5f5f5; } html[data-theme="dark"] .mv2-filter-chip.active, html[data-theme="dark"] .pvl-chip.active { background: #ff6b8a; color: #0f0f14; border-color: #ff6b8a; } html[data-theme="dark"] .mv2-badge-recent { background: #ff6b8a; } html[data-theme="dark"] .mv2-month-title { color: #ff6b8a; } html[data-theme="dark"] .mv2-card { border-color: #2a2d36 !important; } /* Preview / predictions */ html[data-theme="dark"] .pv-pred-main, html[data-theme="dark"] .pv-meta, html[data-theme="dark"] .pv-form-col, html[data-theme="dark"] .pv-prob-cell, html[data-theme="dark"] .pv-h2h-list { background: #1a1a20 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .pv-pred-main { border-left-color: #ff6b8a !important; } html[data-theme="dark"] .pv-hero { border-top-color: #e5e5e5; border-bottom-color: #2a2d36; } html[data-theme="dark"] .pv-meta-icon { background: #0f0f14 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .pv-pred-winner { background: #ff6b8a; } html[data-theme="dark"] .pv-pred-tag { background: #222530; } html[data-theme="dark"] .pvl-card { border-color: #2a2d36 !important; } html[data-theme="dark"] .pvl-card:hover { background: #222530 !important; } html[data-theme="dark"] .pvl-day-title { color: #ff6b8a; } html[data-theme="dark"] .pvl-card-time { color: #ff6b8a; } /* H2H + archive pages */ html[data-theme="dark"] .h2h-pair-card, html[data-theme="dark"] .team-card { background: #1a1a20 !important; border-color: #2a2d36 !important; color: #e5e5e5; } html[data-theme="dark"] .h2h-pair-card:hover, html[data-theme="dark"] .team-card:hover { border-color: #ff6b8a !important; } html[data-theme="dark"] .match-row:hover { background: #222530 !important; } html[data-theme="dark"] .summary-card { background: #1a1a20 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .record-bar { border-color: #2a2d36 !important; } /* ---- List/taxonomy pages (categories, tags, posts) ---- */ html[data-theme="dark"] .taxonomy-header, html[data-theme="dark"] .taxonomy-card { background: #1a1a20 !important; border-color: #2a2d36 !important; color: #e5e5e5; } html[data-theme="dark"] .taxonomy-card:hover { border-color: #ff6b8a !important; } /* Jadwal */ html[data-theme="dark"] .jadwal-card, html[data-theme="dark"] .jadwal-match { background: #1a1a20 !important; border-color: #2a2d36 !important; color: #e5e5e5; } html[data-theme="dark"] .jadwal-header { border-color: #2a2d36 !important; } html[data-theme="dark"] .jadwal-tab { background: #222530 !important; color: #8f929a !important; } html[data-theme="dark"] .jadwal-tab.active { background: #ff6b8a !important; color: #0f0f14 !important; } /* Search page */ html[data-theme="dark"] #search-input { background: #1a1a20 !important; border-color: #2a2d36 !important; color: #e5e5e5 !important; } html[data-theme="dark"] .search-result { border-color: #2a2d36 !important; } html[data-theme="dark"] .search-result:hover { background: #222530 !important; } html[data-theme="dark"] .search-result-title a { color: #f5f5f5; } /* Search + editorial page breadcrumb/content areas with inline bg */ html[data-theme="dark"] [style*="faf9f7"], html[data-theme="dark"] [style*="paper"] { background: #1a1a20 !important; border-color: #2a2d36 !important; } /* Piala Dunia 2026 page */ html[data-theme="dark"] .wc-group-card, html[data-theme="dark"] .wc-match { background: #1a1a20 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .wc-tab { background: #222530 !important; color: #8f929a !important; } html[data-theme="dark"] .wc-tab.active { background: #ff6b8a !important; color: #0f0f14 !important; } /* ---- Editorial --ed-color-* variable overrides (search, tags, categories, terms) ---- */ html[data-theme="dark"] { --ed-color-ink: #e5e5e5; --ed-color-paper: #1a1a20; --ed-color-accent: #ff6b8a; --ed-color-rule: #2a2d36; --ed-color-muted: #8f929a; } /* ---- Homepage --bp-* variable overrides ---- */ html[data-theme="dark"] { --bp-dark: #0f0f14; --bp-darker: #1a1a20; --bp-card: #1a1a20; --bp-border: #2a2d36; --bp-text: #e5e5e5; --bp-text-muted: #8f929a; } html[data-theme="dark"] .bp-home { background: #0f0f14; color: #e5e5e5; } /* ---- Jadwal list page ---- */ html[data-theme="dark"] .jadwal-content { background: #1a1a20 !important; border-color: #2a2d36 !important; color: #e5e5e5 !important; } html[data-theme="dark"] .jadwal-content h2 { color: #f5f5f5 !important; } html[data-theme="dark"] .jadwal-content p, html[data-theme="dark"] .jadwal-content li { color: #d4d7dd !important; } html[data-theme="dark"] .jadwal-content table { background: #0f0f14 !important; } html[data-theme="dark"] .jadwal-content table td { border-color: #2a2d36 !important; color: #d4d7dd !important; } html[data-theme="dark"] .jadwal-content table tbody tr:hover { background-color: #222530 !important; } html[data-theme="dark"] .jadwal-section-title { color: #f5f5f5 !important; } html[data-theme="dark"] .jadwal-league-card { background: #1a1a20 !important; border-color: #2a2d36 !important; } html[data-theme="dark"] .jadwal-league-card:hover { border-color: #ff6b8a !important; } html[data-theme="dark"] .jadwal-league-card .league-info h3 { color: #f5f5f5 !important; } html[data-theme="dark"] .jadwal-league-card .league-info p { color: #8f929a !important; } /* ---- Jadwal match-row odds section ---- */ html[data-theme="dark"] .jadwal-match-row { background: #1a1a20 !important; border-color: #2a2d36 !important; color: #e5e5e5 !important; } html[data-theme="dark"] .jadwal-odds-section { color: #e5e5e5; } /* ---- Matches sub-in green (keep visible in dark) ---- */ html[data-theme="dark"] .mv2-sub-in { color: #4ade80 !important; } /* ---- Tags legend dots (decorative — keep as-is) ---- */ /* ---- Admin page ---- */ html[data-theme="dark"] #login-btn { background: #2a2d36 !important; color: #e5e5e5 !important; } /* Empty states / generic */ html[data-theme="dark"] .empty-state, html[data-theme="dark"] .mv2-standings-empty { border-color: #2a2d36 !important; color: #8f929a; }