/* * Light-mode theme overrides for pages authored with dark-mode Tailwind utilities. * * Convention: pages default to light (no .dark on ). When .dark is added * (via the theme toggle), the original Tailwind utility classes take effect. * When .dark is absent, these rules re-skin those utilities for a light palette. */ html:not(.dark) body { background-color: #ffffff; color: #18181b; } /* Page background — soft off-white so white cards stand out */ html:not(.dark) body { background-color: #fafafa; } /* Backgrounds — layered: - Main card surfaces (bg-zinc-800/30): pure white + hairline border + subtle shadow - Nested rows/chips (bg-zinc-800/50, /60, /80): zinc-100 - Icon tiles / hover states (bg-zinc-700, bg-zinc-700/50): zinc-200 - Page bg (bg-black, bg-zinc-900): the soft off-white from body rule above */ html:not(.dark) .bg-black { background-color: #fafafa !important; } html:not(.dark) .bg-black\/80 { background-color: rgba(255,255,255,0.85) !important; } html:not(.dark) .bg-black\/90 { background-color: rgba(255,255,255,0.92) !important; } html:not(.dark) .bg-zinc-900, html:not(.dark) .bg-zinc-900\/30, html:not(.dark) .bg-zinc-900\/50, html:not(.dark) .bg-zinc-900\/80, html:not(.dark) .bg-zinc-900\/95 { background-color: #fafafa !important; } html:not(.dark) .bg-zinc-800, html:not(.dark) .bg-zinc-800\/30 { background-color: #ffffff !important; border: 1px solid #e4e4e7 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } html:not(.dark) .bg-zinc-800\/50, html:not(.dark) .bg-zinc-800\/60, html:not(.dark) .bg-zinc-800\/80 { background-color: #f4f4f5 !important; } html:not(.dark) .bg-zinc-700, html:not(.dark) .bg-zinc-700\/50 { background-color: #e4e4e7 !important; } html:not(.dark) .hover\:bg-zinc-800:hover { background-color: #e4e4e7 !important; } html:not(.dark) .hover\:bg-zinc-800\/80:hover { background-color: #e4e4e7 !important; } html:not(.dark) .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important; } html:not(.dark) .bg-white\/10 { background-color: rgba(0,0,0,0.06) !important; } html:not(.dark) .bg-zinc-500\/10 { background-color: rgba(0,0,0,0.05) !important; } /* Tailwind gradient color-stop overrides (bg-gradient-to-* pulls these CSS vars) */ html:not(.dark) .from-zinc-900 { --tw-gradient-from: #ffffff var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html:not(.dark) .via-zinc-900 { --tw-gradient-to: rgb(244 244 245 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), #f4f4f5 var(--tw-gradient-via-position), var(--tw-gradient-to) !important; } html:not(.dark) .to-black { --tw-gradient-to: #e4e4e7 var(--tw-gradient-to-position) !important; } /* Card-style gradients used by connection tiles: from-zinc-800/40 → to-zinc-900/60 */ html:not(.dark) .from-zinc-800\/40 { --tw-gradient-from: #ffffff var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html:not(.dark) .to-zinc-900\/60 { --tw-gradient-to: #f4f4f5 var(--tw-gradient-to-position) !important; } html:not(.dark) .hover\:from-zinc-700\/50:hover { --tw-gradient-from: #f9fafb var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html:not(.dark) .hover\:to-zinc-800\/70:hover { --tw-gradient-to: #e4e4e7 var(--tw-gradient-to-position) !important; } /* Shadows — dark-shadow tokens become subtle neutral shadows in light mode */ html:not(.dark) .shadow-black\/20, html:not(.dark) .shadow-black\/40, html:not(.dark) .shadow-black\/50 { --tw-shadow-color: rgba(15, 23, 42, 0.06) !important; --tw-shadow: var(--tw-shadow-colored) !important; } /* Give connection tiles a clear card edge in light mode */ html:not(.dark) .connection-card, html:not(.dark) .ghost-card { border: 1px solid #e4e4e7 !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04) !important; } html:not(.dark) .connection-card:hover { border-color: #d4d4d8 !important; box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04) !important; } /* Primary CTA buttons — only invert when an element explicitly carries BOTH `bg-white` AND `text-black`. The previous rule ran on every `.bg-white` element and silently painted entire white cards/menus dark in light mode, which is the opposite of what users expect. */ html:not(.dark) button.bg-white.text-black, html:not(.dark) a.bg-white.text-black, html:not(.dark) [type="button"].bg-white.text-black, html:not(.dark) [type="submit"].bg-white.text-black { background-color: #18181b !important; color: #ffffff !important; } html:not(.dark) button.bg-white.text-black:hover, html:not(.dark) a.bg-white.text-black:hover { background-color: #27272a !important; } /* Text */ html:not(.dark) .text-white { color: #18181b !important; } html:not(.dark) .text-zinc-200, html:not(.dark) .text-gray-200 { color: #27272a !important; } html:not(.dark) .text-zinc-300, html:not(.dark) .text-gray-300 { color: #3f3f46 !important; } html:not(.dark) .text-zinc-400, html:not(.dark) .text-gray-400 { color: #52525b !important; } html:not(.dark) .text-zinc-500, html:not(.dark) .text-gray-500 { color: #71717a !important; } html:not(.dark) .text-zinc-600, html:not(.dark) .text-gray-600 { color: #a1a1aa !important; } html:not(.dark) .placeholder-zinc-500::placeholder, html:not(.dark) .placeholder-gray-500::placeholder { color: #a1a1aa !important; } html:not(.dark) .hover\:text-white:hover { color: #18181b !important; } /* Borders */ html:not(.dark) .border-zinc-700, html:not(.dark) .border-gray-700 { border-color: #d4d4d8 !important; } html:not(.dark) .border-zinc-800, html:not(.dark) .border-gray-800 { border-color: #e4e4e7 !important; } html:not(.dark) .border-zinc-800\/50, html:not(.dark) .border-gray-800\/50 { border-color: rgba(228,228,231,0.7) !important; } html:not(.dark) .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; } html:not(.dark) .border-white\/10 { border-color: rgba(0,0,0,0.08) !important; } html:not(.dark) .border-white\/20 { border-color: rgba(0,0,0,0.12) !important; } html:not(.dark) .hover\:border-zinc-700:hover { border-color: #a1a1aa !important; } /* Form input focus ring */ html:not(.dark) .focus\:border-zinc-600:focus { border-color: #71717a !important; } html:not(.dark) .focus\:ring-zinc-600:focus { --tw-ring-color: #71717a !important; } /* Autofill — keep inputs light instead of forcing dark */ html:not(.dark) input:-webkit-autofill, html:not(.dark) input:-webkit-autofill:hover, html:not(.dark) input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px #ffffff inset !important; -webkit-text-fill-color: #18181b !important; } /* ================================================================ Theme toggle button — always rendered as #theme-toggle in the DOM. Light mode: white background, black outline, black icon. Dark mode: keeps the page's native dark styling. ================================================================ */ #theme-toggle .sun-icon { display: none; } html.dark #theme-toggle .sun-icon { display: block; } html.dark #theme-toggle .moon-icon { display: none; } html:not(.dark) #theme-toggle { background-color: #ffffff !important; border-color: #000000 !important; color: #000000 !important; } html:not(.dark) #theme-toggle:hover { background-color: #f4f4f5 !important; border-color: #000000 !important; color: #000000 !important; }