/* ============================================================ QuitSmokeApp — Dark Mode Overrides Applied when is set via JS toggle. Primary (#1B365D) and accent (#0D9488) colors are retained. ============================================================ */ html.dark { --color-bg: #0F172A; --color-card-bg: #1E293B; --color-text: #F1F5F9; --color-text-secondary: #94A3B8; --color-border: #334155; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.4); } /* ── Body ──────────────────────────────────────────── */ html.dark body { background: var(--color-bg); color: var(--color-text); } /* ── Headings ──────────────────────────────────────── */ html.dark h1, html.dark .h1, html.dark h2, html.dark .h2, html.dark h3, html.dark .h3, html.dark h4, html.dark .h4, html.dark h5, html.dark .h5, html.dark h6, html.dark .h6 { color: #E2E8F0; } html.dark p { color: var(--color-text); } /* ── Cards ─────────────────────────────────────────── */ html.dark .card-custom, html.dark .stat-card, html.dark .milestone-item { background: var(--color-card-bg); border-color: var(--color-border); box-shadow: var(--shadow-card); } html.dark .card { background: var(--color-card-bg); border-color: var(--color-border); } html.dark .card-body { color: var(--color-text); } /* ── Stat values ───────────────────────────────────── */ html.dark .stat-card .stat-value { color: #CBD5E1; } html.dark .stat-card .stat-label { color: var(--color-text-secondary); } /* ── Milestone titles ──────────────────────────────── */ html.dark .milestone-item .milestone-title { color: #CBD5E1; } html.dark .milestone-item .milestone-desc { color: var(--color-text-secondary); } /* ── Timer ─────────────────────────────────────────── */ html.dark .timer-display { color: #CBD5E1; } /* ── Progress bars ─────────────────────────────────── */ html.dark .progress-custom { background: #334155; } /* ── Buttons ───────────────────────────────────────── */ html.dark .btn-secondary-custom { background: var(--color-card-bg); border-color: #4A6FA5; color: #CBD5E1; } html.dark .btn-secondary-custom:hover { background: #1B365D; color: #ffffff; } /* ── Forms ─────────────────────────────────────────── */ html.dark .form-control, html.dark .form-select { background: #1E293B; border-color: var(--color-border); color: var(--color-text); } html.dark .form-control::placeholder { color: #64748B; } html.dark .form-control:focus, html.dark .form-select:focus { background: #1E293B; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2); } html.dark .form-label { color: var(--color-text); } /* ── Alerts ────────────────────────────────────────── */ html.dark .alert-custom-warning { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); color: #FCD34D; } html.dark .alert-custom-success { background: rgba(22, 163, 74, 0.12); border-color: rgba(22, 163, 74, 0.3); color: #6EE7B7; } html.dark .alert-custom-error { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.3); color: #FCA5A5; } /* ── Navbar ────────────────────────────────────────── */ /* Navy navbar looks fine in dark mode; add subtle separator */ html.dark .navbar-custom { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } /* ── Footer ────────────────────────────────────────── */ /* Navy footer is retained; adjust divider */ html.dark .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); } /* ── Cookie Banner ─────────────────────────────────── */ /* Navy banner is fine in dark mode */ html.dark .cookie-consent-banner { box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.5); } /* ── AdSense empty slots ───────────────────────────── */ html.dark .adsense-slot:empty, html.dark .adsense-slot[data-empty="true"] { background: var(--color-card-bg); border-color: var(--color-border); } /* ── Language / Dark mode toggles in navbar ─────────── */ /* Already transparent with white borders — fine in dark */ /* ── Bootstrap overrides ───────────────────────────── */ html.dark .dropdown-menu { background: #1E293B; border-color: var(--color-border); box-shadow: var(--shadow-elevated); } html.dark .dropdown-item { color: var(--color-text); } html.dark .dropdown-item:hover, html.dark .dropdown-item:focus { background: #334155; color: #F1F5F9; } html.dark .modal-content { background: var(--color-card-bg); border-color: var(--color-border); color: var(--color-text); } html.dark .modal-header, html.dark .modal-footer { border-color: var(--color-border); } html.dark hr { border-color: var(--color-border); opacity: 1; } html.dark .table { color: var(--color-text); border-color: var(--color-border); } html.dark .table > :not(caption) > * > * { background-color: var(--color-card-bg); border-color: var(--color-border); } html.dark .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.04); } /* ── Links ─────────────────────────────────────────── */ html.dark a { color: #2DD4BF; } html.dark a:hover { color: #5EEAD4; } /* ── Breadcrumbs ───────────────────────────────────── */ html.dark .breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-secondary); } html.dark .breadcrumb-item.active { color: var(--color-text-secondary); } /* ── Craving chart ─────────────────────────────────── */ html.dark .craving-bar::after { color: var(--color-text-secondary); } /* ── Scrollbar (WebKit) ────────────────────────────── */ html.dark ::-webkit-scrollbar { width: 8px; height: 8px; } html.dark ::-webkit-scrollbar-track { background: #0F172A; } html.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }