/* ============================================================ Light theme overrides — activated by the `light` class on . Remaps the app's dark palette to light equivalents WITHOUT touching any markup. Dark stays the default (no class = dark, as before). Brand/accent colors (rose, emerald, red, blue) are intentionally left unchanged so buttons/badges look the same in both themes. ============================================================ */ /* ---- Page background ---- */ html.light body, html.light .bg-darkBg, html.light .bg-surface, html.light .bg-zinc-950 { background-color: #f4f4f5 !important; } html.light body { color: #18181b; } /* connect.html / gradient backgrounds */ html.light .from-zinc-950 { --tw-gradient-from: #f4f4f5 !important; } html.light .to-black { --tw-gradient-to: #e7e7ea !important; } /* ---- Cards / panels ---- */ html.light .bg-cardBg, html.light .bg-card, html.light .bg-cardHover, html.light .bg-zinc-900, html.light .bg-zinc-900\/50, html.light .bg-zinc-900\/60, html.light .bg-zinc-900\/70, html.light .bg-zinc-800\/50 { background-color: #ffffff !important; } /* ---- Secondary surfaces ---- */ html.light .bg-zinc-800 { background-color: #e9e9ec !important; } html.light .bg-zinc-700 { background-color: #d4d4d8 !important; } /* ---- Subtle white-alpha fills → light dark-tints ---- */ html.light .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important; } html.light .bg-white\/10 { background-color: rgba(0,0,0,0.06) !important; } /* ---- Subtle black-alpha insets (used on dark) → soft light insets ---- */ html.light .bg-black\/20, html.light .bg-black\/30, html.light .bg-black\/40 { background-color: rgba(0,0,0,0.035) !important; } /* ---- Modal overlays — keep a dim scrim ---- */ html.light .bg-black\/60, html.light .bg-black\/70, html.light .bg-black\/80 { background-color: rgba(0,0,0,0.45) !important; } /* ---- Text (light mode: keep every shade clearly dark & readable) ---- */ html.light .text-white, html.light .text-zinc-100, html.light .text-zinc-200 { color: #0b0b0d !important; } html.light .text-zinc-300 { color: #1c1c21 !important; } html.light .text-zinc-400 { color: #2b2b31 !important; } html.light .text-zinc-500 { color: #3a3a42 !important; } html.light .text-zinc-600 { color: #4b4b54 !important; } /* ---- Hero banner sits on a dark image in BOTH themes → keep its text light ---- */ html.light #hero .text-white { color: #ffffff !important; } html.light #hero .text-zinc-300, html.light #hero .text-zinc-400 { color: #e4e4e7 !important; } /* ---- Sidebar tabs (light mode: dark inactive text, obvious selected pill) ---- */ html.light .tab-btn { color: #3f3f46 !important; } html.light .tab-btn:hover { color: #0b0b0d !important; background: rgba(0,0,0,0.045) !important; } html.light .tab-active { background: rgba(244,63,94,0.12) !important; color: #be123c !important; font-weight: 600 !important; } /* ---- Borders ---- */ html.light .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; } html.light .border-white\/10 { border-color: rgba(0,0,0,0.10) !important; } html.light .border-white\/20 { border-color: rgba(0,0,0,0.15) !important; } html.light .border-zinc-700, html.light .border-zinc-800 { border-color: #e4e4e7 !important; } /* ---- Placeholders ---- */ html.light .placeholder-zinc-600::placeholder, html.light .placeholder-zinc-500::placeholder { color: #a1a1aa !important; } /* ---- Hover states ---- */ html.light .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.04) !important; } html.light .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.07) !important; } html.light .hover\:bg-zinc-800:hover { background-color: #e4e4e7 !important; } html.light .hover\:bg-zinc-700:hover { background-color: #d4d4d8 !important; } html.light .hover\:text-white:hover { color: #18181b !important; } /* ---- Divide borders ---- */ html.light .divide-white\/5 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(0,0,0,0.06) !important; } /* ---- Floating theme toggle button (injected by theme.js) ---- */ #theme-toggle { position: fixed; bottom: 18px; right: 18px; z-index: 9999; width: 44px; height: 44px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.15); background: #18181b; color: #fff; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.35); font-size: 20px; line-height: 1; transition: transform .15s ease, background .2s ease; } #theme-toggle:hover { transform: scale(1.06); } html.light #theme-toggle { background: #ffffff; color: #18181b; border-color: rgba(0,0,0,0.12); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }