/* * WildGuard Kerala — Light / Dark theme overrides * Applied when is set by the toggle button. * Dark mode is the default (no class needed). */ /* ── Smooth transitions for all theme-sensitive properties ─────────────────── */ *, *::before, *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } /* Don't transition things that shouldn't animate */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow; } /* ═══════════════════════════════════════════════════════════════════════════════ LIGHT MODE OVERRIDES Every selector below only fires when ═══════════════════════════════════════════════════════════════════════════════ */ /* ── Page base ──────────────────────────────────────────────────────────────── */ html.light body { background:#f8fafc !important; color:#0f172a !important; } /* ── Hero section: always stays dark, never affected by light mode ──────────── */ html.light #hero-section .text-white { color: #ffffff !important; } html.light #hero-section .text-green-400 { color: #4ade80 !important; } html.light #hero-section .text-gray-300 { color: rgb(209,213,219) !important; } html.light #hero-section .text-gray-400 { color: rgb(156,163,175) !important; } html.light #hero-section .text-gray-500 { color: rgb(107,114,128) !important; } /* ── Navbar ─────────────────────────────────────────────────────────────────── */ html.light #main-nav.scrolled { background:rgba(248,250,252,0.95) !important; border-bottom-color:rgba(21,128,61,0.25) !important; } html.light #main-nav { background:rgba(248,250,252,0.0); } /* ── Tailwind background overrides ─────────────────────────────────────────── */ html.light .bg-gray-950 { background-color:#f8fafc !important; } html.light .bg-gray-900 { background-color:#f1f5f9 !important; } html.light .bg-gray-800 { background-color:#e2e8f0 !important; } html.light .bg-gray-700 { background-color:#cbd5e1 !important; } html.light .bg-gray-600 { background-color:#94a3b8 !important; } html.light .bg-black { background-color:#f1f5f9 !important; } /* ── Text overrides ─────────────────────────────────────────────────────────── */ html.light .text-white { color:#0f172a !important; } html.light .text-gray-100 { color:#0f172a !important; } html.light .text-gray-200 { color:#1e293b !important; } html.light .text-gray-300 { color:#334155 !important; } html.light .text-gray-400 { color:#475569 !important; } html.light .text-gray-500 { color:#64748b !important; } html.light .text-gray-600 { color:#475569 !important; } html.light .text-gray-700 { color:#334155 !important; } html.light .text-gray-800 { color:#1e293b !important; } /* ── Green accents — darken for white bg readability ───────────────────────── */ html.light .text-green-400 { color:#16a34a !important; } html.light .text-green-300 { color:#15803d !important; } html.light .text-green-200 { color:#166534 !important; } html.light .bg-green-900\/60 { background-color:rgba(220,252,231,0.9) !important; } html.light .border-green-700\/60 { border-color:rgba(21,128,61,0.4) !important; } html.light .text-green-300 { color:#15803d !important; } /* ── Border overrides ───────────────────────────────────────────────────────── */ html.light .border-gray-800 { border-color:#e2e8f0 !important; } html.light .border-gray-700 { border-color:#cbd5e1 !important; } html.light .border-gray-600 { border-color:#94a3b8 !important; } html.light [style*="border-color:#0d1117"] { border-color:#e2e8f0 !important; } html.light [style*="border:#0d1117"] { border-color:#e2e8f0 !important; } /* ── Divide lines ───────────────────────────────────────────────────────────── */ html.light .divide-gray-800 > * + * { border-color:#e2e8f0 !important; } /* ── Ring / shadow ──────────────────────────────────────────────────────────── */ html.light .ring-gray-700 { --tw-ring-color:#cbd5e1 !important; } /* ── Hover states ───────────────────────────────────────────────────────────── */ html.light .hover\:bg-gray-800:hover { background-color:#e2e8f0 !important; } html.light .hover\:bg-gray-900:hover { background-color:#f1f5f9 !important; } /* ── Table ──────────────────────────────────────────────────────────────────── */ html.light table { color:#0f172a; } html.light thead { background-color:#e2e8f0 !important; } html.light .bg-gray-800.sticky { background-color:#e2e8f0 !important; } html.light tr:hover { background-color:#f1f5f9 !important; } /* ── Inline style overrides (footer uses style="background:#000") ───────────── */ html.light footer { background:#f1f5f9 !important; border-top-color:#e2e8f0 !important; } html.light footer * { border-color:#e2e8f0 !important; } /* ── Home page content sections (all use .wg-s + inline background:#000) ────── */ html.light .wg-s { background:#f8fafc !important; } html.light .wg-s .text-gray-500 { color:#475569 !important; } html.light .wg-s .text-gray-600 { color:#334155 !important; } html.light .wg-s .text-gray-700 { color:#475569 !important; } html.light .wg-s .border-gray-900 { border-color:#e2e8f0 !important; } html.light .wg-s [style*="#0d1117"] { border-color:#e2e8f0 !important; } /* ── Scrollbar ──────────────────────────────────────────────────────────────── */ html.light ::-webkit-scrollbar-track { background:#f1f5f9; } html.light ::-webkit-scrollbar-thumb { background:#94a3b8; } /* ── Alert / badge colors — keep their hue but lighten bg ──────────────────── */ html.light .bg-red-950 { background-color:#fff1f2 !important; } html.light .border-red-700 { border-color:#fca5a5 !important; } html.light .text-red-200 { color:#b91c1c !important; } html.light .text-red-300 { color:#dc2626 !important; } html.light .text-red-400 { color:#ef4444 !important; } html.light .text-red-500 { color:#f87171 !important; } html.light .bg-red-900 { background-color:#fee2e2 !important; } html.light .bg-orange-900 { background-color:#fff7ed !important; } html.light .text-orange-300 { color:#c2410c !important; } html.light .bg-blue-900 { background-color:#eff6ff !important; } html.light .text-blue-400 { color:#1d4ed8 !important; } html.light .text-blue-300 { color:#1e40af !important; } /* ── Code block background ──────────────────────────────────────────────────── */ html.light [style*="background:#0f0f0f"] { background:#f8fafc !important; } html.light [style*="F0F0F0"] { background-color:#f1f5f9 !important; } html.light [style*="background:#1a1a1a"] { background:#f1f5f9 !important; } /* ── Progress / confidence bars ─────────────────────────────────────────────── */ html.light .bg-gray-700.rounded-full { background-color:#e2e8f0 !important; } /* ── Upload zone / drag area ────────────────────────────────────────────────── */ html.light #drop-zone { background:#f8fafc !important; border-color:#94a3b8 !important; } /* ── Monospace / code text ──────────────────────────────────────────────────── */ html.light .font-mono { color:#334155 !important; } /* ── Image placeholder boxes ────────────────────────────────────────────────── */ html.light [style*="background:#111"] { background:#f1f5f9 !important; } /* ── Toggle button itself ───────────────────────────────────────────────────── */ #theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(74,222,128,0.3); background: transparent; cursor: pointer; color: #4ade80; transition: border-color 0.3s, color 0.3s, background 0.3s; flex-shrink: 0; } #theme-toggle:hover { border-color: rgba(74,222,128,0.7); background: rgba(74,222,128,0.08); } html.light #theme-toggle { border-color: rgba(21,128,61,0.4); color: #15803d; } html.light #theme-toggle:hover { background: rgba(21,128,61,0.08); } /* Moon icon — shown in dark mode */ #theme-toggle .icon-moon { display: block; } #theme-toggle .icon-sun { display: none; } /* Sun icon — shown in light mode */ html.light #theme-toggle .icon-moon { display: none; } html.light #theme-toggle .icon-sun { display: block; }