/* ========================================================= Donson Tech — Light Theme Override Applies ONLY when: ========================================================= */ :root[data-theme="light"]{ --dt-header: #006885; --dt-bg: #F6FAFC; --dt-surface: #FFFFFF; --dt-surface-2: #F1F6F9; --dt-text: #0B1220; --dt-text-2: #223043; --dt-muted: #5B6B7C; --dt-border: #DCE6EE; --dt-accent: #006885; --dt-shadow: 0 10px 30px rgba(10, 20, 30, 0.08); color-scheme: light; } /* Global */ :root[data-theme="light"] body{ background: var(--dt-bg) !important; color: var(--dt-text) !important; } /* Header */ :root[data-theme="light"] header.nav{ background: var(--dt-header) !important; border-bottom: 1px solid rgba(255,255,255,0.18) !important; } /* Menu text on header */ :root[data-theme="light"] header.nav .menu{ color: rgba(255,255,255,.92) !important; } :root[data-theme="light"] header.nav .menu a{ color:#fff !important; } :root[data-theme="light"] header.nav .menu a:hover{ background: rgba(255,255,255,.14) !important; color:#fff !important; } /* SSR-like pill switch in header */ :root[data-theme="light"] .langSwitch{ background: rgba(255,255,255,.22) !important; border-color: rgba(255,255,255,.45) !important; } :root[data-theme="light"] .langSwitch .pill{ color: rgba(255,255,255,.85) !important; } :root[data-theme="light"] .langSwitch .pill:hover{ color:#fff !important; } :root[data-theme="light"] .langSwitch .pill.active{ background: rgba(255,255,255,.28) !important; color:#fff !important; } /* Panels / cards */ :root[data-theme="light"] .panel, :root[data-theme="light"] .card, :root[data-theme="light"] .itemCard, :root[data-theme="light"] .supportPanel, :root[data-theme="light"] .heroCard, :root[data-theme="light"] aside.panel.side{ background: var(--dt-surface) !important; color: var(--dt-text) !important; border: 1px solid var(--dt-border) !important; box-shadow: var(--dt-shadow) !important; } /* Text helpers */ :root[data-theme="light"] .muted, :root[data-theme="light"] .note{ color: var(--dt-muted) !important; } /* Hero background: keep image, reduce darkness */ :root[data-theme="light"] .heroBg{ opacity: 1 !important; filter: saturate(1.02) brightness(1.08) !important; } /* Reduce glare for hero description */ :root[data-theme="light"] .desc{ color: #374151 !important; } /* dlBtn: neutral surface in light + kill gradients explicitly */ :root[data-theme="light"] .dlBtn{ background: var(--dt-surface) !important; border: 1px solid var(--dt-border) !important; box-shadow: none !important; } :root[data-theme="light"] .dlBtn--ios, :root[data-theme="light"] .dlBtn--android, :root[data-theme="light"] .dlBtn--apk, :root[data-theme="light"] .dlBtn--discord{ background: var(--dt-surface) !important; } :root[data-theme="light"] .dlBtn__title{ color: var(--dt-text) !important; text-shadow: none !important; } :root[data-theme="light"] .dlBtn__sub{ color: var(--dt-muted) !important; text-shadow: none !important; } :root[data-theme="light"] .dlBtn:hover{ border-color: rgba(0,104,133,0.45) !important; } /* Countdown boxes */ :root[data-theme="light"] .tbox{ background: var(--dt-surface-2) !important; border: 1px solid var(--dt-border) !important; } :root[data-theme="light"] .tbox .num{ color: var(--dt-text) !important; } :root[data-theme="light"] .tbox .lbl{ color: var(--dt-muted) !important; } /* Footer */ :root[data-theme="light"] .footer{ background: var(--dt-surface-2) !important; border-top: 1px solid var(--dt-border) !important; color: var(--dt-text-2) !important; } :root[data-theme="light"] .footer a{ color: var(--dt-accent) !important; } :root[data-theme="light"] .footer a:hover{ color: #004E63 !important; } :root[data-theme="light"] .pLogo{ background: var(--dt-surface) !important; border: 1px solid var(--dt-border) !important; box-shadow: var(--dt-shadow) !important; } :root[data-theme="light"] .pLogo:hover{ border-color: rgba(0,104,133,.35) !important; } /* Make small supporting text readable on light */ :root[data-theme="light"] .foundedLine, :root[data-theme="light"] .foundedMeta, :root[data-theme="light"] .countdownNote, :root[data-theme="light"] .side .note, :root[data-theme="light"] .muted{ color: #475569 !important; /* slate-600 */ } /* ===== Light theme: unify download buttons to brand blue ===== */ :root[data-theme="light"] .dlBtn{ background: linear-gradient( 180deg, #007a9c, #006885 ) !important; border: 1px solid rgba(0,104,133,.45) !important; box-shadow: 0 10px 22px rgba(0,104,133,.25) !important; } :root[data-theme="light"] .dlBtn__title{ color: #ffffff !important; } :root[data-theme="light"] .dlBtn__sub{ color: rgba(255,255,255,.9) !important; } :root[data-theme="light"] .dlBtn__right{ background: rgba(255,255,255,.14) !important; } /* ===== Founded pill in LIGHT (panel is white => pill must be dark text) ===== */ :root[data-theme="light"] .foundedPill{ background: var(--dt-surface-2) !important; border: 1px solid var(--dt-border) !important; color: var(--dt-text) !important; }