/* ========================================================= Dark theme override (paste at END of robo-apple.css) Default = DARK (dominant). If you want light on some pages, set and it will revert. ========================================================= */ /* DARK defaults */ :root{ color-scheme: dark; --bg: #0b1224; --surface: rgba(15, 23, 42, .62); --surface-strong: rgba(15, 23, 42, .92); --stroke: rgba(226, 232, 240, .12); --text: rgba(226, 232, 240, .96); --muted: rgba(226, 232, 240, .70); --accent: #38bdf8; --accent-hover: #0ea5e9; --accent-soft: rgba(56, 189, 248, .16); --shadow-soft: 0 30px 70px rgba(0,0,0,.55); --shadow-card: 0 20px 45px rgba(0,0,0,.35); } /* Optional LIGHT opt-in per page */ html[data-theme="light"]{ color-scheme: light; --bg: #f5f5f7; --surface: rgba(255,255,255,.78); --surface-strong: #ffffff; --stroke: rgba(0,0,0,.10); --text: #1d1d1f; --muted: #6e6e73; --accent: #0071e3; --accent-hover: #0077ed; --accent-soft: rgba(0,113,227,.14); --shadow-soft: 0 20px 50px rgba(0,0,0,.10); --shadow-card: 0 12px 30px rgba(0,0,0,.08); } /* Background */ body{ background: radial-gradient(circle at 20% 0%, rgba(56,189,248,.14), transparent 48%), radial-gradient(circle at 90% 18%, rgba(99,102,241,.12), transparent 52%), linear-gradient(135deg, #0b1224, #0f172a 50%, #0b1224); } /* Header: stop the “light slab” */ header{ background: rgba(11,18,36,.70); border-bottom: 1px solid var(--stroke); backdrop-filter: blur(14px); } /* Nav */ nav a{ color: var(--text); } nav a:hover{ background: rgba(255,255,255,.06); } nav a[aria-current="page"]{ background: var(--accent-soft); color: var(--accent); } /* Cards / surfaces */ .card, .plan, .hero-card, .cta-panel, .cookie-preferences{ background: var(--surface); border: 1px solid var(--stroke); box-shadow: var(--shadow-card); } /* Badges */ .badge{ background: rgba(255,255,255,.06); border: 1px solid var(--stroke); color: var(--muted); } /* Buttons */ .button{ border: 1px solid transparent; background: var(--accent); color: #06101a; box-shadow: 0 14px 30px rgba(56,189,248,.18); } .button:hover{ background: var(--accent-hover); box-shadow: 0 16px 34px rgba(56,189,248,.22); } /* IMPORTANT: fix specificity mismatch (your page used .ghost, base uses .button.ghost) */ .button.ghost{ background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--stroke); box-shadow: none; } .button.ghost:hover{ background: rgba(255,255,255,.10); } /* Secondary (if used) */ .button.secondary{ background: transparent; color: var(--text); border: 1px solid var(--stroke); box-shadow: none; } .button.secondary:hover{ background: rgba(255,255,255,.06); } /* Cookie banner readability */ .cookie-banner, #cookie-banner{ background: var(--surface-strong) !important; border: 1px solid var(--stroke) !important; } .cookie-banner .card{ background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Make cookie “ghost” buttons clearly visible (not washed / not disabled-looking) */ .cookie-banner .button.ghost{ background: rgba(255,255,255,.08); border-color: rgba(226,232,240,.16); } .cookie-banner .button.ghost:hover{ background: rgba(255,255,255,.12); }