/* ============================================= E-TÉLÉ BÉNIN — THEME SYSTEM (Light / Dark) Default: light Toggle: [data-theme="dark"] on Palette: Gold #D4AF37 · Amber globe · Logo #F5C518 ============================================= */ /* ══════════════════════════════════════════════ 1. CSS VARIABLES ══════════════════════════════════════════════ */ :root, [data-theme="light"] { --th-body-bg: #f9f7f0; --th-surface: #ffffff; --th-surface-2: #faf8f2; --th-surface-3: #f5f3ec; --th-text: #1a1a1a; --th-text-2: #464346; --th-text-muted: #888888; --th-border: rgba(212,175,55,.18); --th-card-bg: #ffffff; --th-card-shadow: 0 2px 16px rgba(0,0,0,.07); --th-input-bg: #f5f5f5; --th-input-border: #dddddd; --th-overlay: rgba(80,55,0,.55); --th-scrollbar: rgba(212,175,55,.3); } [data-theme="dark"] { --th-body-bg: #08080f; --th-surface: #0d0d1a; --th-surface-2: #111122; --th-surface-3: #16162a; --th-text: #f0efe9; --th-text-2: rgba(240,239,233,.8); --th-text-muted: rgba(240,239,233,.4); --th-border: rgba(212,175,55,.1); --th-card-bg: rgba(255,255,255,.035); --th-card-shadow: 0 2px 16px rgba(0,0,0,.45); --th-input-bg: rgba(255,255,255,.06); --th-input-border: rgba(212,175,55,.15); --th-overlay: rgba(4,4,15,.88); --th-scrollbar: rgba(212,175,55,.2); } /* ══════════════════════════════════════════════ 2. THEME TOGGLE BUTTON ══════════════════════════════════════════════ */ .theme-toggle-wrap { display: flex; align-items: center; } .theme-toggle-btn { width: 56px; height: 28px; background: #ede8d8; border: 2px solid rgba(212,175,55,.32); border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0 5px; position: relative; transition: background .3s, border-color .3s; overflow: hidden; } .theme-toggle-btn:hover { border-color: var(--etele-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.15); } .theme-icon { font-size: 12px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 18px; line-height: 1; transition: opacity .3s; pointer-events: none; } .theme-icon-sun { color: #c07a00; } .theme-icon-moon { color: #7a8aaa; } .theme-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: linear-gradient(135deg, #D4AF37, #F4C430); border-radius: 50%; transition: transform .35s cubic-bezier(0.68,-0.55,0.265,1.55); box-shadow: 0 2px 6px rgba(212,175,55,.55); z-index: 2; pointer-events: none; } [data-theme="dark"] .theme-toggle-btn { background: rgba(255,255,255,.08); border-color: rgba(100,120,200,.3); } [data-theme="dark"] .theme-toggle-btn:hover { border-color: rgba(150,170,255,.4); box-shadow: 0 0 0 3px rgba(100,120,200,.1); } [data-theme="dark"] .theme-thumb { transform: translateX(28px); background: linear-gradient(135deg, #1e2a50, #2d3a6e); box-shadow: 0 2px 6px rgba(30,42,80,.6); } [data-theme="dark"] .theme-icon-moon { color: #a0b0e0; } /* ══════════════════════════════════════════════ 3. BODY & HTML ══════════════════════════════════════════════ */ body { background-color: var(--th-body-bg) !important; color: var(--th-text-2); transition: background-color .35s ease, color .35s ease; } html::-webkit-scrollbar-thumb { background: var(--th-scrollbar); } [data-theme="dark"] html::-webkit-scrollbar { background: #0d0d1e; } [data-theme="dark"] html::-webkit-scrollbar-corner { background: #0d0d1e; } /* ══════════════════════════════════════════════ 4. TOP HEADER Light: warm amber gradient (inspired by golden globe) Dark: deep navy ══════════════════════════════════════════════ */ .etele-top-header { background: linear-gradient(135deg, #7a5500 0%, #a07500 50%, #B8941E 100%) !important; transition: background .35s ease !important; } [data-theme="dark"] .etele-top-header { background: linear-gradient(135deg, #060611 0%, #0a0a18 100%) !important; } /* ══════════════════════════════════════════════ 5. MAIN HEADER Dark mode: dark navy ══════════════════════════════════════════════ */ [data-theme="dark"] .etele-main-header { background: #0c0c1a !important; box-shadow: 0 4px 20px rgba(0,0,0,.55) !important; } [data-theme="dark"] .etele-main-header.scrolled { box-shadow: 0 6px 30px rgba(0,0,0,.75) !important; } [data-theme="dark"] .menu-link { color: rgba(255,255,255,.78); } [data-theme="dark"] .offcanvas-trigger span { background: var(--etele-gold); } /* Header actions in dark mode */ [data-theme="dark"] .language-switcher .lang-select { background: rgba(255,255,255,.07) !important; color: rgba(255,255,255,.82) !important; border-color: rgba(212,175,55,.2) !important; } [data-theme="dark"] .language-switcher .lang-select option { background: #0d0d1e; color: #f0efe9; } [data-theme="dark"] .notification-btn { background: rgba(255,255,255,.07) !important; } [data-theme="dark"] .notification-btn i { color: rgba(255,255,255,.8) !important; } [data-theme="dark"] .user-account { background: rgba(255,255,255,.07) !important; } [data-theme="dark"] .user-account span { color: rgba(255,255,255,.82) !important; } /* ══════════════════════════════════════════════ 6. MEGA MENU Dark mode: dark navy panels ══════════════════════════════════════════════ */ [data-theme="dark"] .megamenu { background: #0c0c1a !important; box-shadow: 0 20px 60px rgba(0,0,0,.75) !important; } [data-theme="dark"] .megamenu-header { border-color: rgba(212,175,55,.1) !important; } [data-theme="dark"] .megamenu-header p { color: rgba(255,255,255,.5) !important; } [data-theme="dark"] .megamenu-footer { border-color: rgba(212,175,55,.1) !important; } [data-theme="dark"] .emission-thumb, [data-theme="dark"] .replay-thumb { background: rgba(255,255,255,.06) !important; } [data-theme="dark"] .emission-info h4, [data-theme="dark"] .replay-info h4 { color: rgba(255,255,255,.82) !important; } /* ══════════════════════════════════════════════ 7. NOTIFICATION DROPDOWN ══════════════════════════════════════════════ */ [data-theme="dark"] .notification-dropdown { background: #0d0d1e !important; box-shadow: 0 10px 40px rgba(0,0,0,.65) !important; border: 1px solid rgba(212,175,55,.1) !important; } [data-theme="dark"] .notification-dropdown .notification-header { border-color: rgba(212,175,55,.08) !important; } [data-theme="dark"] .notification-dropdown .notification-header h6 { color: #fff !important; } [data-theme="dark"] .notification-item { border-color: rgba(255,255,255,.05) !important; } [data-theme="dark"] .notification-item:hover { background: rgba(212,175,55,.05) !important; } [data-theme="dark"] .notification-content h6 { color: rgba(255,255,255,.9) !important; } [data-theme="dark"] .notification-content p { color: rgba(255,255,255,.5) !important; } [data-theme="dark"] .notification-content .time { color: rgba(255,255,255,.3) !important; } /* ══════════════════════════════════════════════ 8. OFF-CANVAS — LIGHT MODE OVERRIDES The panel is dark by default; override to white in light mode ══════════════════════════════════════════════ */ [data-theme="light"] .oc-panel { background: #ffffff !important; border-right: 1px solid rgba(212,175,55,.22) !important; box-shadow: 6px 0 40px rgba(0,0,0,.1), 0 0 20px rgba(212,175,55,.06) inset !important; } [data-theme="light"] .oc-backdrop { background: rgba(80,55,0,.5) !important; backdrop-filter: blur(8px) !important; } [data-theme="light"] .oc-orb-1 { background: radial-gradient(circle, rgba(212,175,55,.2) 0%, transparent 70%) !important; } [data-theme="light"] .oc-orb-2 { background: radial-gradient(circle, rgba(230,36,41,.06) 0%, transparent 70%) !important; } [data-theme="light"] .oc-header { background: linear-gradient(135deg, #faf7eb 0%, #ffffff 100%) !important; border-bottom-color: rgba(212,175,55,.22) !important; } [data-theme="light"] .oc-clock { color: #8B6914 !important; text-shadow: none !important; } [data-theme="light"] .oc-close { background: rgba(212,175,55,.1) !important; border-color: rgba(212,175,55,.28) !important; } [data-theme="light"] .oc-close span { background: #8B6914 !important; } [data-theme="light"] .oc-close:hover { background: var(--etele-gold) !important; border-color: var(--etele-gold) !important; } [data-theme="light"] .oc-close:hover span { background: #1a1a1a !important; } [data-theme="light"] .oc-live-bar { background: linear-gradient(90deg, rgba(230,36,41,.07) 0%, rgba(230,36,41,.02) 100%) !important; border-bottom-color: rgba(230,36,41,.1) !important; } [data-theme="light"] .oc-live-name { color: #555 !important; } [data-theme="light"] .oc-nav-link { color: #2d2d2d !important; } [data-theme="light"] .oc-nav-link:hover { color: #1a1a1a !important; border-color: rgba(212,175,55,.3) !important; } [data-theme="light"] .oc-nav-icon { background: rgba(212,175,55,.1) !important; } [data-theme="light"] .oc-nav-link:hover .oc-nav-icon { background: linear-gradient(135deg, #D4AF37, #F4C430) !important; color: #1a1a1a !important; box-shadow: 0 4px 14px rgba(212,175,55,.3) !important; } [data-theme="light"] .oc-nav-arrow { color: rgba(0,0,0,.2) !important; } [data-theme="light"] .oc-nav-link:hover .oc-nav-arrow { color: #B8941E !important; } [data-theme="light"] .oc-nav-live .oc-nav-icon { background: rgba(230,36,41,.09) !important; } [data-theme="light"] .oc-section-head { color: #8B6914 !important; } [data-theme="light"] .oc-refresh-btn { color: rgba(0,0,0,.22) !important; } [data-theme="light"] .oc-refresh-btn:hover { color: #B8941E !important; } [data-theme="light"] .oc-schedule, [data-theme="light"] .oc-social-section { background: #faf8f2 !important; border-color: rgba(212,175,55,.16) !important; } [data-theme="light"] .oc-current-card { background: linear-gradient(135deg, rgba(212,175,55,.18) 0%, rgba(212,175,55,.07) 100%) !important; border-color: rgba(212,175,55,.32) !important; } [data-theme="light"] .oc-card-thumb-placeholder { background: rgba(212,175,55,.1) !important; border-color: rgba(212,175,55,.25) !important; color: #B8941E !important; } [data-theme="light"] .oc-card-name { color: #1a1a1a !important; } [data-theme="light"] .oc-card-time { color: #8B6914 !important; } [data-theme="light"] .oc-next-head { color: rgba(0,0,0,.28) !important; } [data-theme="light"] .oc-next-item { background: rgba(0,0,0,.025) !important; border-color: rgba(0,0,0,.07) !important; } [data-theme="light"] .oc-next-item:hover { background: rgba(212,175,55,.08) !important; border-color: rgba(212,175,55,.22) !important; } [data-theme="light"] .oc-next-thumb-placeholder { background: rgba(212,175,55,.08) !important; color: rgba(180,148,30,.5) !important; } [data-theme="light"] .oc-next-name { color: #444 !important; } [data-theme="light"] .oc-next-time { color: #B8941E !important; } [data-theme="light"] .oc-skel-card { background: linear-gradient(90deg, rgba(0,0,0,.04) 25%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.04) 75%) !important; background-size: 300% 100% !important; } [data-theme="light"] .oc-skel-line { background: linear-gradient(90deg, rgba(0,0,0,.03) 25%, rgba(0,0,0,.06) 50%, rgba(0,0,0,.03) 75%) !important; background-size: 300% 100% !important; } [data-theme="light"] .oc-no-schedule { color: rgba(0,0,0,.28) !important; } [data-theme="light"] .oc-social-btn { background: rgba(212,175,55,.09) !important; border-color: rgba(212,175,55,.2) !important; color: #8B6914 !important; } [data-theme="light"] .oc-social-btn:hover { color: #1a1a1a !important; } [data-theme="light"] .oc-footer { border-top-color: rgba(212,175,55,.1) !important; } [data-theme="light"] .oc-footer p { color: rgba(0,0,0,.28) !important; } [data-theme="light"] .oc-pulse-badge { box-shadow: 0 0 8px rgba(230,36,41,.35) !important; } /* ══════════════════════════════════════════════ 9. HEADINGS, PARAGRAPHS, LINKS (dark mode) ══════════════════════════════════════════════ */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--th-text); } [data-theme="dark"] p { color: var(--th-text-2); } /* ══════════════════════════════════════════════ 10. SECTION BACKGROUNDS (dark mode) ══════════════════════════════════════════════ */ [data-theme="dark"] .section--bg { background-color: var(--th-surface-2) !important; } [data-theme="dark"] .bg--gray { background-color: var(--th-surface-2) !important; } [data-theme="dark"] .bg--secondary { background: var(--th-surface-3) !important; } [data-theme="dark"] blockquote { background-color: var(--th-surface-2) !important; color: var(--th-text-2) !important; } /* ══════════════════════════════════════════════ 11. CARDS (dark mode) ══════════════════════════════════════════════ */ [data-theme="dark"] .card { background: var(--th-card-bg) !important; border-color: var(--th-border) !important; box-shadow: var(--th-card-shadow) !important; } [data-theme="dark"] .card .card-header, [data-theme="dark"] .card .card-footer { background: transparent !important; border-color: var(--th-border) !important; } [data-theme="dark"] .card-body { background: transparent; color: var(--th-text-2); } [data-theme="dark"] .card-title { color: var(--th-text) !important; } [data-theme="dark"] .card-text { color: var(--th-text-2) !important; } [data-theme="dark"] .custom--card { background: var(--th-surface) !important; border: 1px solid var(--th-border) !important; box-shadow: var(--th-card-shadow) !important; } /* ══════════════════════════════════════════════ 12. FORMS & INPUTS (dark mode) ══════════════════════════════════════════════ */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="dark"] textarea { background: var(--th-input-bg) !important; border-color: var(--th-input-border) !important; color: var(--th-text) !important; } [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--th-text-muted) !important; } [data-theme="dark"] label { color: var(--th-text-2) !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus { border-color: var(--etele-gold) !important; box-shadow: 0 0 0 3px rgba(212,175,55,.15) !important; } /* ══════════════════════════════════════════════ 13. TABLES (dark mode) ══════════════════════════════════════════════ */ [data-theme="dark"] .custom-table tbody tr { background: var(--th-surface) !important; box-shadow: 0 2px 10px rgba(0,0,0,.3) !important; } [data-theme="dark"] .custom-table tbody tr td { color: var(--th-text-2) !important; border-color: var(--th-border) !important; } [data-theme="dark"] .table-area.two .custom-table tbody tr td { color: var(--th-text-2) !important; } [data-theme="dark"] .custom-table thead tr th { background: rgba(212,175,55,.15) !important; } /* ══════════════════════════════════════════════ 14. NAV TABS (dark mode) ══════════════════════════════════════════════ */ [data-theme="dark"] .nav-tabs .nav-link { background: var(--th-surface-2) !important; color: var(--th-text-2) !important; border-color: var(--th-border) !important; } /* ══════════════════════════════════════════════ 15. PAGINATION (dark mode) ══════════════════════════════════════════════ */ [data-theme="dark"] .pagination .page-item .page-link { background: var(--th-surface) !important; border-color: var(--th-border) !important; color: var(--th-text-2) !important; } [data-theme="dark"] .pagination .page-item.active .page-link { background: var(--etele-gold) !important; color: #1a1a1a !important; border-color: var(--etele-gold) !important; } /* ══════════════════════════════════════════════ 16. HOME PAGE PLAYER SECTION Dark inline styles → Light mode: warm golden cream ══════════════════════════════════════════════ */ [data-theme="light"] .hpp-section { background: linear-gradient(175deg, #faf5e3 0%, #fff8d6 40%, #fffef0 100%) !important; } [data-theme="light"] .hpp-section::before { background: radial-gradient(circle, rgba(212,175,55,.14) 0%, transparent 70%) !important; } [data-theme="light"] .hpp-title { color: #1a1a1a !important; } [data-theme="light"] .hpp-title span { color: #e62429 !important; } [data-theme="light"] .hpp-subtitle { color: rgba(26,26,26,.52) !important; } [data-theme="light"] .hpp-main-row { box-shadow: 0 0 0 1px rgba(212,175,55,.22), 0 20px 50px rgba(0,0,0,.1) !important; } /* Keep the video player embed always dark regardless of theme */ [data-theme="light"] .hpp-player-col, [data-theme="light"] .hpp-embed-wrap { background: #000 !important; } /* Dark mode: keeps original inline styles (no override needed) */ /* ══════════════════════════════════════════════ 17. GENERIC WHITE PANELS (dark mode) ══════════════════════════════════════════════ */ [data-theme="dark"] .white-bg { background: var(--th-surface) !important; } /* ══════════════════════════════════════════════ 18. COOKIE POPUP (dark mode) ══════════════════════════════════════════════ */ [data-theme="dark"] .cookie-main-wrapper { background: var(--th-surface) !important; border-top: 1px solid var(--th-border) !important; } /* ══════════════════════════════════════════════ 19. BODY OVERLAY (dark mode) ══════════════════════════════════════════════ */ [data-theme="dark"] .body-overlay { background: rgba(0,0,0,.92) !important; } /* ══════════════════════════════════════════════ 20. RESPONSIVE ══════════════════════════════════════════════ */ @media (max-width: 576px) { .theme-toggle-btn { width: 48px; height: 24px; } .theme-thumb { width: 16px; height: 16px; } [data-theme="dark"] .theme-thumb { transform: translateX(24px); } .theme-icon { width: 14px; font-size: 11px; } } /* ══════════════════════════════════════════════ 21. TV PLAYER SECTION — Light Mode (.tvp-* — tv-player-section.blade.php) ══════════════════════════════════════════════ */ [data-theme="light"] .tvp-section { background: linear-gradient(175deg, #faf5e3 0%, #fff8d6 40%, #fffef0 100%) !important; } [data-theme="light"] .tvp-section::before, [data-theme="light"] .tvp-section::after { background: radial-gradient(circle, rgba(212,175,55,.1) 0%, transparent 70%) !important; } [data-theme="light"] .tvp-title { color: #1a1a1a !important; } [data-theme="light"] .tvp-title span { color: #e62429 !important; } [data-theme="light"] .tvp-subtitle { color: rgba(26,26,26,.52) !important; } [data-theme="light"] .tvp-main-row { box-shadow: 0 0 0 1px rgba(212,175,55,.2), 0 24px 60px rgba(0,0,0,.1) !important; } [data-theme="light"] .tvp-stat { background: rgba(0,0,0,.03) !important; border-top-color: rgba(0,0,0,.06) !important; } [data-theme="light"] .tvp-stat-value { color: #1a1a1a !important; } [data-theme="light"] .tvp-info-card { background: #ffffff !important; border-color: rgba(212,175,55,.15) !important; box-shadow: 0 4px 20px rgba(0,0,0,.07) !important; } [data-theme="light"] .tvp-info-title { color: #1a1a1a !important; } [data-theme="light"] .tvp-info-desc { color: rgba(26,26,26,.52) !important; } [data-theme="light"] .tvp-social-btn { background: rgba(0,0,0,.05) !important; border-color: rgba(0,0,0,.1) !important; color: #444 !important; } [data-theme="light"] .tvp-social-btn:hover { background: #e62429 !important; color: #fff !important; border-color: #e62429 !important; } [data-theme="light"] .tvp-sidebar { background: #ffffff !important; border-left-color: rgba(212,175,55,.15) !important; } /* Override all inline white text inside sidebar */ [data-theme="light"] .tvp-sidebar [style*="rgba(255,255,255"] { color: rgba(26,26,26,.55) !important; } [data-theme="light"] .tvp-sidebar [style*="rgba(255,255,255,.28"], [data-theme="light"] .tvp-sidebar [style*="rgba(255,255,255,.38"], [data-theme="light"] .tvp-sidebar [style*="rgba(255,255,255,.4"] { color: rgba(26,26,26,.45) !important; } [data-theme="light"] .tvp-sidebar [style*="rgba(255,255,255,.65"], [data-theme="light"] .tvp-sidebar [style*="rgba(255,255,255,.7"] { color: rgba(26,26,26,.75) !important; } [data-theme="light"] .tvp-sidebar [style*="border-top:1px solid rgba(255,255,255"] { border-top-color: rgba(0,0,0,.07) !important; } [data-theme="light"] .tvp-sidebar [style*="background:rgba(230,36,41,.12)"] { background: rgba(230,36,41,.08) !important; } [data-theme="light"] .tvp-sidebar [style*="background:rgba(255,255,255,.06"], [data-theme="light"] .tvp-sidebar [style*="background:rgba(255,255,255,.05"], [data-theme="light"] .tvp-sidebar [style*="background:rgba(255,255,255,.02"] { background: rgba(0,0,0,.03) !important; } [data-theme="light"] .tvp-chat-input { background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.1) !important; color: #1a1a1a !important; } [data-theme="light"] .tvp-chat-input::placeholder { color: rgba(26,26,26,.35) !important; } /* ══════════════════════════════════════════════ 22. REPLAYS DISPLAY SECTION — Light Mode (.rds-* — replays-display-section.blade.php) ══════════════════════════════════════════════ */ [data-theme="light"] .rds-section { background: #f9f7f0 !important; } [data-theme="light"] .rds-section-title { color: #1a1a1a !important; } [data-theme="light"] .rds-section-sub { color: rgba(26,26,26,.52) !important; } [data-theme="light"] .rds-card { background: #ffffff !important; border-color: rgba(0,0,0,.08) !important; box-shadow: 0 4px 20px rgba(0,0,0,.06) !important; } [data-theme="light"] .rds-card:hover { border-color: rgba(212,175,55,.3) !important; box-shadow: 0 20px 52px rgba(212,175,55,.14) !important; } [data-theme="light"] .rds-card-cover { background: #e8e4d8 !important; } [data-theme="light"] .rds-card-thumb-bg { background: linear-gradient(135deg, #f0ebe0, #ded7c5) !important; } [data-theme="light"] .rds-card-title { color: #1a1a1a !important; } [data-theme="light"] .rds-card-meta { color: rgba(26,26,26,.48) !important; } [data-theme="light"] .rds-list-item { background: #ffffff !important; border-color: rgba(0,0,0,.07) !important; } [data-theme="light"] .rds-list-item:hover { border-color: rgba(212,175,55,.28) !important; box-shadow: 0 8px 28px rgba(212,175,55,.12) !important; } [data-theme="light"] .rds-list-thumb { background: #e8e4d8 !important; } [data-theme="light"] .rds-list-title { color: #1a1a1a !important; } [data-theme="light"] .rds-list-desc { color: rgba(26,26,26,.5) !important; } [data-theme="light"] .rds-list-arrow { background: rgba(212,175,55,.1) !important; color: #B8941E !important; } [data-theme="light"] .rds-list-item:hover .rds-list-arrow { background: var(--etele-gold) !important; color: #1a1a1a !important; } [data-theme="light"] .rds-section .text-center [style] { color: rgba(26,26,26,.35) !important; } /* ══════════════════════════════════════════════ 23. SHOWS DISPLAY SECTION — Light Mode (.sds-* — shows-display-section.blade.php) ══════════════════════════════════════════════ */ [data-theme="light"] .sds-section { background: #f9f7f0 !important; } [data-theme="light"] .sds-section-title { color: #1a1a1a !important; } [data-theme="light"] .sds-section-sub { color: rgba(26,26,26,.52) !important; } [data-theme="light"] .sds-card { background: #ffffff !important; border-color: rgba(0,0,0,.08) !important; box-shadow: 0 4px 20px rgba(0,0,0,.06) !important; } [data-theme="light"] .sds-card:hover { border-color: rgba(212,175,55,.3) !important; box-shadow: 0 20px 52px rgba(212,175,55,.14) !important; } [data-theme="light"] .sds-card-cover { background: #e8e4d8 !important; } [data-theme="light"] .sds-card-name { color: #1a1a1a !important; } [data-theme="light"] .sds-card-desc { color: rgba(26,26,26,.5) !important; } [data-theme="light"] .sds-list-item { background: #ffffff !important; border-color: rgba(0,0,0,.07) !important; } [data-theme="light"] .sds-list-item:hover { border-color: rgba(212,175,55,.28) !important; box-shadow: 0 8px 28px rgba(212,175,55,.12) !important; } [data-theme="light"] .sds-list-thumb { background: #e8e4d8 !important; } [data-theme="light"] .sds-list-name { color: #1a1a1a !important; } [data-theme="light"] .sds-list-desc { color: rgba(26,26,26,.5) !important; } [data-theme="light"] .sds-list-arrow { background: rgba(212,175,55,.1) !important; color: #B8941E !important; } [data-theme="light"] .sds-list-item:hover .sds-list-arrow { background: var(--etele-gold) !important; color: #1a1a1a !important; } [data-theme="light"] .sds-section .text-center [style] { color: rgba(26,26,26,.35) !important; } /* Thumbnail placeholder for shows without image */ [data-theme="light"] .sds-section [style*="background:linear-gradient(135deg,#1a1a2e"] { background: linear-gradient(135deg, #ede8d5, #d9d2bf) !important; } /* ══════════════════════════════════════════════ 24. TEAMS DISPLAY SECTION — Light Mode (.tds-* — teams-display-section.blade.php) ══════════════════════════════════════════════ */ [data-theme="light"] .tds-section { background: #f9f7f0 !important; } [data-theme="light"] .tds-section-title { color: #1a1a1a !important; } [data-theme="light"] .tds-section-sub { color: rgba(26,26,26,.52) !important; } [data-theme="light"] .tds-card { background: #ffffff !important; border-color: rgba(0,0,0,.08) !important; box-shadow: 0 4px 20px rgba(0,0,0,.06) !important; } [data-theme="light"] .tds-card:hover { border-color: rgba(212,175,55,.3) !important; box-shadow: 0 22px 52px rgba(212,175,55,.14) !important; } [data-theme="light"] .tds-card-name { color: #1a1a1a !important; } [data-theme="light"] .tds-card-desc { color: rgba(26,26,26,.52) !important; } [data-theme="light"] .tds-hero-card { background: #ffffff !important; border-color: rgba(0,0,0,.07) !important; } [data-theme="light"] .tds-hero-card:hover { border-color: rgba(212,175,55,.28) !important; box-shadow: 0 20px 50px rgba(212,175,55,.12) !important; } [data-theme="light"] .tds-hero-thumb { background: #e8e4d8 !important; } [data-theme="light"] .tds-hero-name { color: #1a1a1a !important; } [data-theme="light"] .tds-hero-desc { color: rgba(26,26,26,.52) !important; } [data-theme="light"] .tds-hero-social-link { background: rgba(0,0,0,.05) !important; color: #555 !important; } [data-theme="light"] .tds-hero-social-link:hover { background: #e62429 !important; color: #fff !important; } [data-theme="light"] .tds-mosaic-wrap { background: linear-gradient(145deg, #ffffff, #faf7ee) !important; border-color: rgba(0,0,0,.08) !important; } [data-theme="light"] .tds-mosaic-featured-name { color: #1a1a1a !important; } [data-theme="light"] .tds-mosaic-featured-desc { color: rgba(26,26,26,.52) !important; } [data-theme="light"] .tds-list-item { background: #ffffff !important; border-color: rgba(0,0,0,.07) !important; } [data-theme="light"] .tds-list-item:hover { border-color: rgba(212,175,55,.25) !important; box-shadow: 0 8px 28px rgba(212,175,55,.1) !important; } [data-theme="light"] .tds-list-thumb { background: #e8e4d8 !important; } [data-theme="light"] .tds-list-name { color: #1a1a1a !important; } [data-theme="light"] .tds-list-desc { color: rgba(26,26,26,.5) !important; } [data-theme="light"] .tds-list-arrow { background: rgba(212,175,55,.1) !important; color: #B8941E !important; } [data-theme="light"] .tds-list-item:hover .tds-list-arrow { background: var(--etele-gold) !important; color: #1a1a1a !important; } [data-theme="light"] .tds-section .text-center [style] { color: rgba(26,26,26,.35) !important; } /* Inline white text overrides inside tds cards/social */ [data-theme="light"] .tds-section [style*="rgba(255,255,255,.3)"] { color: rgba(26,26,26,.45) !important; } /* ══════════════════════════════════════════════ 25. DARK PLACEHOLDER GRADIENTS — Light Mode Override inline no-image placeholders in sections ══════════════════════════════════════════════ */ [data-theme="light"] .rds-section [style*="#1a1a2e"], [data-theme="light"] .rds-section [style*="#302b63"], [data-theme="light"] .sds-section [style*="#1a1a2e"], [data-theme="light"] .sds-section [style*="#302b63"], [data-theme="light"] .tds-section [style*="#1a1a2e"], [data-theme="light"] .tds-section [style*="#302b63"] { background: linear-gradient(135deg, #ede8d5, #d9d2bf) !important; }