/* ============================================================ VenueCast Dark Mode Applied when is present ============================================================ */ /* ── Smooth transitions ─────────────────────────────────────── */ *, *::before, *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease; } /* Exclude transitions on elements that should stay instant */ .dark-toggle-btn, .dark-toggle-btn * { transition: none !important; } /* ── Toggle button ───────────────────────────────────────────── */ .dark-toggle-btn { background: none; border: 1px solid var(--border, #e2ddd5); border-radius: 8px; padding: 0.3rem 0.5rem; font-size: 1rem; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: inherit; flex-shrink: 0; } .dark-toggle-btn:hover { border-color: var(--accent, #e85d26); background: var(--accent-light, #fff0e8); } /* Admin pages – button blends with dark nav */ .nav .dark-toggle-btn, .nav-links .dark-toggle-btn { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #94a3b8; } .nav .dark-toggle-btn:hover, .nav-links .dark-toggle-btn:hover { border-color: #e85d26; color: #fff; background: rgba(232,93,38,0.12); } /* ============================================================ PUBLIC PAGES (index, forecast, events, how-it-works, venue) Variables: --ink, --paper, --card-bg, --border, --muted ============================================================ */ html.dark { --ink: #e8e6e1; --paper: #111827; --accent-light: #2d1a10; --muted: #9ca3af; --border: #374151; --card-bg: #1f2937; --gradient-start: #0d0d1f; --gradient-end: #0a1525; /* Admin page vars (override if present) */ --bg: #0f172a; --text: #e8e6e1; /* Score tier colors: brighter variants for dark backgrounds */ --green: #4ade80; --lime: #a3e635; --red: #f87171; --orange: #fb923c; --amber: #fbbf24; --green-bg: #052e16; --lime-bg: #1a2e05; --red-bg: #450a0a; --orange-bg: #431407; --amber-bg: #422006; } html.dark body { background: var(--paper); color: var(--ink); } /* ── Nav ─────────────────────────────────────────────────────── */ html.dark nav:not(.nav) { background: rgba(17, 24, 39, 0.92) !important; border-bottom-color: var(--border); } /* Mobile nav menu expanded state */ html.dark .nav-menu.active { background: rgba(17, 24, 39, 0.98) !important; } /* Logo color */ html.dark .logo { color: var(--ink); } html.dark .nav-hamburger { color: var(--ink); } html.dark .nav-city { color: var(--muted); } /* ── Cards & surfaces ────────────────────────────────────────── */ html.dark .card, html.dark .strip-day, html.dark .day-card, html.dark .event-card, html.dark .factor-card, html.dark .forecast-card, html.dark .score-card, html.dark .tip-box, html.dark .venue-card, html.dark .stat-block, html.dark .use-case, html.dark .faq-item, html.dark .how-card, html.dark .step-card, html.dark .testimonial, html.dark .promo-card, html.dark .cr-form, html.dark .detail-card, html.dark .weather-block, html.dark .holiday-block, html.dark .modal-inner { background: var(--card-bg) !important; border-color: var(--border) !important; } /* ── Score / status pill colors ──────────────────────────────── */ /* Score colors use CSS variables (--green, --lime, --orange, --red) defined on */ /* html.dark above. ZH locale swaps those variables via body.locale-zh in i18n.js. */ /* No hardcoded overrides here — keeps the locale color-swap working in dark mode. */ /* ── Section backgrounds ─────────────────────────────────────── */ html.dark .section-alt, html.dark .forecast-strip, html.dark .events-section { background: var(--paper); } /* ── Form fields ─────────────────────────────────────────────── */ html.dark input, html.dark select, html.dark textarea { background: #1f2937 !important; color: var(--ink) !important; border-color: var(--border) !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--muted) !important; } /* ── Language selector ───────────────────────────────────────── */ html.dark .lang-selector, html.dark #vc-lang-container select { background: #1f2937 !important; color: var(--ink) !important; border-color: var(--border) !important; } /* ── Inline style hardcoded nav backgrounds ──────────────────── */ /* Mobile overlay */ html.dark .nav-menu-overlay { background: rgba(0, 0, 0, 0.7); } /* ── Specific page elements ──────────────────────────────────── */ /* forecast.html – summary card is already dark (gradient), leave as-is */ /* Pill / tag backgrounds */ html.dark .nav-tag { background: var(--accent-light); color: var(--accent); } /* Events page */ html.dark .events-filter-bar { background: var(--card-bg); border-color: var(--border); } html.dark .month-label { color: var(--muted); } html.dark .event-type-pill { background: var(--card-bg); border-color: var(--border); color: var(--ink); } /* How it works */ html.dark .step-number { background: var(--accent-light); color: var(--accent); } /* Venue page */ html.dark .venue-hero, html.dark .venue-hero-overlay { /* keep the gradient/image, just ensure text stays visible */ } html.dark .weather-day, html.dark .weather-row { background: var(--card-bg) !important; border-color: var(--border) !important; } /* Score bars */ html.dark .score-bar-bg { background: var(--border); } /* Tables */ html.dark table th, html.dark table td { border-color: var(--border) !important; } /* Modals */ html.dark .modal-overlay, html.dark .modal-backdrop { background: rgba(0,0,0,0.75); } html.dark .modal-content, html.dark .modal, html.dark .panel { background: var(--card-bg) !important; border-color: var(--border) !important; color: var(--ink); } /* ============================================================ ADMIN PAGES (admin.html, admin-login.html) Variables: --navy, --text, --bg, --paper, --border, --muted ============================================================ */ /* Admin body */ html.dark body:has(.nav.nav) { background: var(--bg); color: var(--text); } /* Admin nav stays dark (already navy), just darken a touch */ html.dark .nav { background: #07101f; } /* Admin stat cards */ html.dark .stat-card { background: #1e293b !important; border-color: #334155 !important; color: #e8e6e1; } html.dark .stat-card .stat-label { color: #94a3b8; } /* Admin table header */ html.dark thead th { background: #1e293b !important; color: #94a3b8; border-bottom-color: #334155 !important; } html.dark tbody tr:hover td { background: rgba(255,255,255,0.04); } html.dark .table-wrap { background: #1e293b !important; border-color: #334155 !important; } /* Admin form inputs */ html.dark .form-input, html.dark .form-select, html.dark .form-textarea { background: #1e293b !important; border-color: #334155 !important; color: #e8e6e1 !important; } /* CSV textarea */ html.dark .csv-textarea { background: #1e293b !important; border-color: #334155 !important; color: #e8e6e1 !important; } /* Admin modal */ html.dark .modal { background: #1e293b !important; color: #e8e6e1; } html.dark .modal-head, html.dark .modal-foot { border-color: #334155 !important; } html.dark .modal-overlay { background: rgba(0,0,0,0.6); } /* Day labels */ html.dark .day-label { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8; } html.dark .day-label.active, html.dark .day-label.selected { background: #e85d26 !important; border-color: #e85d26 !important; color: #fff; } /* Tabs */ html.dark .tab { color: #94a3b8; } html.dark .tab.active, html.dark .tab-active { color: #e85d26; border-bottom-color: #e85d26; } html.dark .tabs { border-bottom-color: #334155; } /* Admin login card */ html.dark .login-card, html.dark .auth-card { background: #1e293b !important; border-color: #334155 !important; } /* Pill / badge overrides in admin */ html.dark .pill:not(.pill-active):not(.pill-all) { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8; } /* Container backgrounds */ html.dark .container > div, html.dark .card-wrap { background: #1e293b; border-color: #334155; } /* Section headers */ html.dark .form-section { border-bottom-color: #334155 !important; color: #94a3b8; } /* CSV area */ html.dark .csv-area { background: #1e293b !important; border-color: #334155 !important; } /* Buttons */ html.dark .btn-secondary { background: #1e293b !important; border-color: #334155 !important; color: #e8e6e1 !important; } /* Admin text that uses --navy (= #0f172a) as color — invisible on dark bg */ html.dark .page-title, html.dark .stat-val, html.dark .td-name, html.dark .section-title, html.dark .modal-title { color: #e2e8f0 !important; } /* Admin table row dividers: hardcoded #f1f5f9 not covered by th/td border override */ html.dark tbody tr { border-bottom-color: #334155 !important; } /* All-pills (background = --navy = invisible on dark bg) */ html.dark .pill-all { background: #334155 !important; color: #e2e8f0 !important; } /* Unsubscribed badge: hardcoded #f1f5f9 background */ html.dark .sub-unsub-badge { background: #1e293b !important; color: #94a3b8 !important; } /* ── Transition inhibitor: suppress on initial load, only animate on toggle ── */ /* JS adds .dark-transitions-enabled to after DOMContentLoaded */ html:not(.dark-transitions-enabled) *, html:not(.dark-transitions-enabled) *::before, html:not(.dark-transitions-enabled) *::after { transition-duration: 0s !important; transition-delay: 0s !important; } /* ── Footer Feedback Section ── */ .footer-feedback { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border, #e2e8f0); } .footer-feedback-title { font-size: 1rem !important; font-weight: 600 !important; color: var(--accent, #e85d26) !important; margin: 0 0 0.4rem !important; } .footer-feedback-sub { font-size: 0.85rem !important; color: var(--muted, #64748b) !important; margin: 0 0 1rem !important; } .footer-feedback-btn { display: inline-block; padding: 0.45rem 1.2rem; background: var(--accent, #e85d26); color: #fff !important; border-radius: 6px; font-size: 0.85rem; font-weight: 500; text-decoration: none !important; transition: background 0.2s; } .footer-feedback-btn:hover { background: #d4451a; color: #fff !important; } /* Dark mode adjustments */ .dark .footer-feedback { border-bottom-color: var(--border, #334155); }