/* ========================================================= Donson Tech — Dark Theme Guard (FINAL) Applies ONLY when: Goal: 1) Preserve original SSR dark look 2) Prevent light overrides leaking into dark 3) Keep layout unchanged ========================================================= */ :root[data-theme="dark"]{ color-scheme: dark; } /* Global text + background: assert base dark tokens */ :root[data-theme="dark"] body{ color: var(--text); background: radial-gradient(1200px 700px at 50% 20%, rgba(125,211,252,.18), transparent 55%), radial-gradient(900px 600px at 70% 70%, rgba(167,139,250,.18), transparent 60%), var(--bg); } /* NAV: keep SSR dark */ :root[data-theme="dark"] .nav{ background: rgba(7,10,18,.65); border-bottom: 1px solid rgba(255,255,255,.08); } /* Pills (EN/VN/Theme): assert dark style in case light tries to override */ :root[data-theme="dark"] .langSwitch{ background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); } :root[data-theme="dark"] .langSwitch .pill{ color: rgba(255,255,255,.75); } :root[data-theme="dark"] .langSwitch .pill:hover{ color: #fff; } :root[data-theme="dark"] .langSwitch .pill.active{ background: rgba(255,255,255,.18); color: #fff; } /* Panels / cards: re-assert SSR dark surfaces */ :root[data-theme="dark"] .panel{ border: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); box-shadow: var(--shadow); } :root[data-theme="dark"] .card, :root[data-theme="dark"] .itemCard{ border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); box-shadow: 0 12px 26px rgba(0,0,0,.38); } :root[data-theme="dark"] .supportPanel{ border: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); box-shadow: var(--shadow); } /* Hero background: keep original intensity */ :root[data-theme="dark"] .heroBg{ opacity: 1; filter: saturate(1.05); } /* Text helpers: lock SSR dark values */ :root[data-theme="dark"] .muted{ color: var(--muted); } :root[data-theme="dark"] .desc{ color: rgba(255,255,255,.80); } :root[data-theme="dark"] .note{ color: rgba(255,255,255,.72); } /* dl buttons: keep original gradients + right-side tint */ :root[data-theme="dark"] .dlBtn{ border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 20px rgba(0,0,0,.35); } :root[data-theme="dark"] .dlBtn__title, :root[data-theme="dark"] .dlBtn__sub{ text-shadow: 0 2px 0 rgba(0,0,0,.22); } :root[data-theme="dark"] .dlBtn__right{ background: rgba(255,255,255,.14); } /* Countdown boxes: keep SSR dark */ :root[data-theme="dark"] .tbox{ background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.12); } :root[data-theme="dark"] .tbox .lbl{ color: rgba(255,255,255,.65); } /* Footer: keep SSR dark */ :root[data-theme="dark"] .footer{ color: rgba(255,255,255,.55); } :root[data-theme="dark"] .footer a{ color: rgba(255,255,255,.65); } :root[data-theme="dark"] .footer a:hover{ color: rgba(255,255,255,.92); } .pLogo img{ filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }