/* ═══════════════════════════════════════════════════════════════════ VVIP Dashboard Light Theme Override Applied to: mdcat/index.php · ecat/index.php · lat/index.php · su/dashboard.php Palette: #F2F2F2 bg · #ffffff cards · #CBCBCB borders #174D38 green · #4D1717 maroon (LAT) · #111111 text · #555555 muted Requires: body.light-mode class on ═══════════════════════════════════════════════════════════════════ */ /* ── BODY & PAGE ──────────────────────────────────────────────────── */ body.light-mode { background: #F2F2F2 !important; color: #111111 !important; } /* ── HERO SECTION (forest green CTA band) ─────────────────────────── */ body.light-mode .hero, body.light-mode .mdcat-hero-wrap, body.light-mode .ecat-hero-wrap, body.light-mode .lat-hero-wrap { background: linear-gradient(145deg, #174D38 0%, #0F3826 60%, #0A2B1C 100%) !important; background-image: none !important; } /* Hero glow → dim it for dark-green hero */ body.light-mode .hero-glow { background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 65%) !important; } /* Hero text on dark green stays white */ body.light-mode .hero h1 .line1, body.light-mode .hero h1 span[style*="color:#fff"] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body.light-mode .hero h1 .line2 { background: linear-gradient(135deg, #86efac, #4ade80) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } body.light-mode .hero-sub, body.light-mode .hero p:not(.sec-sub) { color: rgba(255,255,255,.65) !important; -webkit-text-fill-color: rgba(255,255,255,.65) !important; } body.light-mode .badge-pill { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.2) !important; color: rgba(255,255,255,.9) !important; } body.light-mode .trust-item { color: rgba(255,255,255,.5) !important; } body.light-mode .trust-item i { opacity: .75 !important; } /* Countdown boxes on dark green hero */ body.light-mode .countdown-box { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.15) !important; } body.light-mode .cd-num { color: #ffffff !important; } body.light-mode .cd-lbl { color: rgba(255,255,255,.45) !important; } body.light-mode .cd-sep { color: rgba(134,239,172,.5) !important; } /* Countdown on mdcat inline style (the #md-cd-* divs) */ body.light-mode #md-cd-h, body.light-mode #md-cd-m, body.light-mode #md-cd-s { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.18) !important; color: #86efac !important; } /* ── HERO BUTTONS ─────────────────────────────────────────────────── */ body.light-mode .btn-primary { background: linear-gradient(135deg, #ffffff, #e8f5ef) !important; color: #174D38 !important; border: none !important; box-shadow: 0 4px 20px rgba(0,0,0,.25) !important; } body.light-mode .btn-primary:hover { background: linear-gradient(135deg, #e8f5ef, #d0ebe0) !important; color: #174D38 !important; } body.light-mode .btn-ghost { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.22) !important; color: rgba(255,255,255,.8) !important; } body.light-mode .btn-ghost:hover { background: rgba(255,255,255,.12) !important; color: #ffffff !important; } /* Price on dark hero */ body.light-mode .price-was { color: rgba(255,255,255,.35) !important; -webkit-text-fill-color: rgba(255,255,255,.35) !important; } body.light-mode .price-main { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body.light-mode .price-sub-label { color: rgba(255,255,255,.55) !important; } /* ── STATS BAR ────────────────────────────────────────────────────── */ body.light-mode .stats-bar { background: #ffffff !important; border-top: 1.5px solid #CBCBCB !important; border-bottom: 1.5px solid #CBCBCB !important; } body.light-mode .stat-lbl { color: #555555 !important; } body.light-mode .sn-green, body.light-mode .sn-vi { background: linear-gradient(135deg, #174D38, #0F3826) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } body.light-mode .sn-amber, body.light-mode .sn-am { background: linear-gradient(135deg, #b45309, #d97706) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } body.light-mode .sn-cyan, body.light-mode .sn-cy { background: linear-gradient(135deg, #0891b2, #06b6d4) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } body.light-mode .sn-purple, body.light-mode .sn-pu { background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ── SECTIONS BACKGROUNDS ─────────────────────────────────────────── */ body.light-mode .section, body.light-mode .tp-section { background: #F2F2F2 !important; border-top-color: #CBCBCB !important; border-bottom-color: #CBCBCB !important; } /* Alt section */ body.light-mode .section[style*="rgba(255,255,255"] { background: #ffffff !important; } /* Section pills */ body.light-mode .sec-pill { background: rgba(23,77,56,.08) !important; border-color: rgba(23,77,56,.2) !important; color: #174D38 !important; } body.light-mode .sec-title { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } body.light-mode .sec-sub { color: #555555 !important; -webkit-text-fill-color: #555555 !important; } /* ── SUBJECT CARDS ────────────────────────────────────────────────── */ body.light-mode .subject-card { background: #ffffff !important; border: 1.5px solid #CBCBCB !important; box-shadow: 0 2px 12px rgba(0,0,0,.04) !important; } body.light-mode .subject-card:hover { border-color: rgba(23,77,56,.35) !important; box-shadow: 0 6px 24px rgba(23,77,56,.1) !important; } body.light-mode .sc-name { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } body.light-mode .sc-ch { color: #555555 !important; -webkit-text-fill-color: #555555 !important; } body.light-mode .sc-arrow { color: #CBCBCB !important; } body.light-mode .subject-card::before { background: linear-gradient(90deg, #174D38, #0F3826) !important; } body.light-mode .sc-icon { background: rgba(23,77,56,.1) !important; color: #174D38 !important; } body.light-mode .sc-bar { background: linear-gradient(90deg, rgba(23,77,56,.3), transparent) !important; } /* Override per-color sc-* icons back to unified green */ body.light-mode .sc-green .sc-icon, body.light-mode .sc-amber .sc-icon, body.light-mode .sc-cyan .sc-icon, body.light-mode .sc-purple .sc-icon, body.light-mode .sc-vi .sc-icon, body.light-mode .sc-bl .sc-icon, body.light-mode .sc-cy .sc-icon, body.light-mode .sc-am .sc-icon, body.light-mode .sc-pk .sc-icon { background: rgba(23,77,56,.1) !important; color: #174D38 !important; } /* SC badges */ body.light-mode .sc-badge { background: rgba(23,77,56,.1) !important; color: #174D38 !important; } /* ── FEATURE TILES ────────────────────────────────────────────────── */ body.light-mode .feat-tile, body.light-mode .feat-grid .feat-tile { background: #ffffff !important; border: 1.5px solid #CBCBCB !important; box-shadow: 0 2px 12px rgba(0,0,0,.04) !important; } body.light-mode .feat-tile:hover { border-color: rgba(23,77,56,.3) !important; box-shadow: 0 6px 24px rgba(23,77,56,.08) !important; } body.light-mode .ft-title { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } body.light-mode .ft-sub { color: #555555 !important; -webkit-text-fill-color: #555555 !important; } body.light-mode .ft-icon { background: rgba(23,77,56,.1) !important; } body.light-mode .ft-green .ft-icon, body.light-mode .ft-amber .ft-icon, body.light-mode .ft-cyan .ft-icon, body.light-mode .ft-purple .ft-icon, body.light-mode .ft-vi .ft-icon, body.light-mode .ft-am .ft-icon, body.light-mode .ft-cy .ft-icon, body.light-mode .ft-bl .ft-icon { background: rgba(23,77,56,.1) !important; color: #174D38 !important; } body.light-mode .ft-icon i { color: #174D38 !important; } /* Top accent bars → green */ body.light-mode .feat-tile::before, body.light-mode .ft-green::before, body.light-mode .ft-amber::before, body.light-mode .ft-cyan::before, body.light-mode .ft-purple::before, body.light-mode .ft-vi::before, body.light-mode .ft-am::before, body.light-mode .ft-cy::before, body.light-mode .ft-bl::before { background: linear-gradient(90deg, #174D38, #0F3826) !important; } /* ── TEST PATTERN CARDS (su/dashboard) ───────────────────────────── */ body.light-mode .tp-card { background: #ffffff !important; border: 1.5px solid #CBCBCB !important; box-shadow: 0 2px 10px rgba(0,0,0,.04) !important; } body.light-mode .tp-card:hover { border-color: rgba(23,77,56,.3) !important; box-shadow: 0 6px 24px rgba(23,77,56,.08) !important; } body.light-mode .tp-name { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } body.light-mode .tp-topics { color: #555555 !important; -webkit-text-fill-color: #555555 !important; } body.light-mode .tp-icon { background: rgba(23,77,56,.1) !important; color: #174D38 !important; } body.light-mode .tp-c1 .tp-icon, body.light-mode .tp-c2 .tp-icon, body.light-mode .tp-c3 .tp-icon, body.light-mode .tp-c4 .tp-icon, body.light-mode .tp-c5 .tp-icon { background: rgba(23,77,56,.1) !important; color: #174D38 !important; } body.light-mode .tp-pct, body.light-mode .tp-c1 .tp-pct, body.light-mode .tp-c2 .tp-pct, body.light-mode .tp-c3 .tp-pct, body.light-mode .tp-c4 .tp-pct, body.light-mode .tp-c5 .tp-pct { background: linear-gradient(135deg, #174D38, #0F3826) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } body.light-mode .tp-total { background: #ffffff !important; border-color: #CBCBCB !important; } body.light-mode .tp-total-item { color: #555555 !important; } body.light-mode .tp-total-item strong { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } body.light-mode .tp-total-item i { color: #174D38 !important; } body.light-mode .tp-card::before, body.light-mode .tp-c1::before, body.light-mode .tp-c2::before, body.light-mode .tp-c3::before, body.light-mode .tp-c4::before, body.light-mode .tp-c5::before { background: linear-gradient(90deg, #174D38, #0F3826) !important; } body.light-mode .tp-bar { background: rgba(23,77,56,.06) !important; } body.light-mode .tp-bar-fill, body.light-mode .tp-c1 .tp-bar-fill, body.light-mode .tp-c2 .tp-bar-fill, body.light-mode .tp-c3 .tp-bar-fill, body.light-mode .tp-c4 .tp-bar-fill, body.light-mode .tp-c5 .tp-bar-fill { background: linear-gradient(90deg, #174D38, #0F3826) !important; } body.light-mode .tp-section { background: rgba(23,77,56,.03) !important; border-color: rgba(23,77,56,.1) !important; } body.light-mode .tp-header .tp-official { background: rgba(23,77,56,.08) !important; border-color: rgba(23,77,56,.2) !important; color: #174D38 !important; } body.light-mode .tp-title { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } body.light-mode .tp-year { color: #555555 !important; } /* ── STEP CARDS (mdcat VIP steps) ────────────────────────────────── */ body.light-mode .step-card { background: #ffffff !important; border: 1.5px solid #CBCBCB !important; } body.light-mode .step-title { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } body.light-mode .step-desc { color: #555555 !important; -webkit-text-fill-color: #555555 !important; } body.light-mode .step-num { border-color: rgba(23,77,56,.25) !important; color: #174D38 !important; } /* ── USER BAR ─────────────────────────────────────────────────────── */ body.light-mode .user-bar { background: rgba(23,77,56,.06) !important; border-bottom: 1.5px solid rgba(23,77,56,.2) !important; } body.light-mode .user-bar-left { color: #555555 !important; } body.light-mode .user-bar-left strong { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } body.light-mode .user-bar .btn-primary { background: linear-gradient(135deg, #174D38, #0F3826) !important; color: #ffffff !important; box-shadow: 0 2px 10px rgba(23,77,56,.25) !important; } /* ── FOOTER NAV ───────────────────────────────────────────────────── */ body.light-mode .footer-nav { background: #F2F2F2 !important; border-top: 1.5px solid #CBCBCB !important; } body.light-mode .footer-nav p { color: #555555 !important; -webkit-text-fill-color: #555555 !important; } body.light-mode .footer-link { background: #ffffff !important; border: 1.5px solid #CBCBCB !important; color: #174D38 !important; } body.light-mode .footer-link:hover { border-color: #174D38 !important; background: rgba(23,77,56,.05) !important; } /* ── INLINE STYLE OVERRIDES (dark section divs with style="background:#040d08") ── */ body.light-mode .section[style] { background: #F2F2F2 !important; background-image: none !important; border-top-color: #CBCBCB !important; border-bottom-color: #CBCBCB !important; } /* Feature section with white/glass bg → keep white */ body.light-mode .section[style*="rgba(255,255,255,.015)"], body.light-mode .section[style*="rgba(255,255,255,0.015)"] { background: #ffffff !important; } /* ── LAT MAROON OVERRIDES (when body.lat-page) ───────────────────── */ body.light-mode.lat-page .sec-pill, body.light-mode.lat-page .badge-pill, body.light-mode.lat-page .hero-pill { background: rgba(77,23,23,.08) !important; border-color: rgba(77,23,23,.2) !important; color: #4D1717 !important; } body.light-mode.lat-page .btn-primary { background: linear-gradient(135deg, #ffffff, #f9e8e8) !important; color: #4D1717 !important; } body.light-mode.lat-page .user-bar { background: rgba(77,23,23,.05) !important; border-color: rgba(77,23,23,.15) !important; } body.light-mode.lat-page .subject-card:hover { border-color: rgba(77,23,23,.3) !important; } body.light-mode.lat-page .sc-icon { background: rgba(77,23,23,.1) !important; color: #4D1717 !important; } body.light-mode.lat-page .sc-green .sc-icon, body.light-mode.lat-page .sc-amber .sc-icon, body.light-mode.lat-page .sc-cyan .sc-icon, body.light-mode.lat-page .sc-purple .sc-icon { background: rgba(77,23,23,.1) !important; color: #4D1717 !important; } body.light-mode.lat-page .feat-tile:hover { border-color: rgba(77,23,23,.25) !important; } body.light-mode.lat-page .ft-icon i { color: #4D1717 !important; } body.light-mode.lat-page .feat-tile::before, body.light-mode.lat-page .ft-green::before, body.light-mode.lat-page .ft-amber::before, body.light-mode.lat-page .ft-cyan::before, body.light-mode.lat-page .ft-purple::before { background: linear-gradient(90deg, #4D1717, #7a2323) !important; } /* LAT page hero */ body.light-mode.lat-page .hero, body.light-mode.lat-page .lat-hero-wrap { background: linear-gradient(145deg, #4D1717 0%, #3a1010 60%, #2a0c0c 100%) !important; background-image: none !important; } body.light-mode.lat-page .sn-green { background: linear-gradient(135deg, #4D1717, #7a2323) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ── LAT INLINE SUBJECT BADGE OVERRIDE ───────────────────────────── */ body.light-mode.lat-page .subject-badge { background: rgba(77,23,23,.1) !important; border-color: rgba(77,23,23,.25) !important; color: #4D1717 !important; } body.light-mode.lat-page .btn-explore { border-color: rgba(77,23,23,.3) !important; color: #4D1717 !important; } /* ── MISC DARK ELEMENT OVERRIDES ─────────────────────────────────── */ /* Section inner headings */ body.light-mode .section-inner h2, body.light-mode .section-inner h3 { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* Inline style text colour overrides within sections */ body.light-mode .section [style*="color:#fff"], body.light-mode .section [style*="color: #fff"] { color: #111111 !important; } body.light-mode .section [style*="color:rgba(255,255,255"] { color: #555555 !important; } /* Step divs inline styles */ body.light-mode .section div[style*="rgba(255,255,255,.03)"] { background: #ffffff !important; border-color: #CBCBCB !important; } /* mock test link button */ body.light-mode .section a.btn-ghost[style] { background: rgba(23,77,56,.06) !important; border-color: rgba(23,77,56,.2) !important; color: #174D38 !important; } /* ── HERO CTA INLINE STEP NUMS ────────────────────────────────────── */ body.light-mode .section div[style*="border-radius:50%"] { border-color: rgba(23,77,56,.3) !important; color: #174D38 !important; } /* ── SU: GRID / TESTS PAGE LINKED CARDS ─────────────────────────── */ body.light-mode .vnav-link { color: #555555 !important; } body.light-mode .vnav-link:hover { color: #111111 !important; } body.light-mode .vnav-link.active { color: #174D38 !important; } body.light-mode .vnav-links { border-top-color: #CBCBCB !important; } body.light-mode .vnav-logout { color: #555555 !important; } body.light-mode .vnav-logout:hover { color: #111111 !important; } body.light-mode .vnav-join { background: linear-gradient(135deg, #174D38, #0F3826) !important; }