/* Light Theme Overrides */ /* Applied via [data-theme="light"] on */ [data-theme="light"] { --glass-bg: rgba(255, 255, 255, 0.8); --glass-border: rgba(0, 0, 0, 0.08); --glass-glow: 0 0 35px -5px rgba(99, 102, 241, 0.1); } /* --- Page & Body Backgrounds --- */ [data-theme="light"], [data-theme="light"] body { background-color: #f8fafc !important; } [data-theme="light"] .bg-\[#030712\] { background-color: #f8fafc; } [data-theme="light"] .bg-\[#020617\] { background-color: #f8fafc; } [data-theme="light"] .bg-\[#030712\]\/85 { background-color: rgba(248, 250, 252, 0.85); } /* --- Panel & Card Backgrounds --- */ [data-theme="light"] .bg-slate-950 { background-color: #ffffff; } [data-theme="light"] .bg-slate-950\/60 { background-color: rgba(255, 255, 255, 0.6); } [data-theme="light"] .bg-slate-900 { background-color: #f1f5f9; } [data-theme="light"] .bg-slate-900\/95 { background-color: rgba(241, 245, 249, 0.95); } [data-theme="light"] .bg-slate-800 { background-color: #e2e8f0; } /* --- Admin Specific Backgrounds --- */ [data-theme="light"] .admin-sidebar { background-color: #f1f5f9 !important; border-right-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .glass-panel { background: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .glass-card { background: rgba(241, 245, 249, 0.6); border-color: rgba(0, 0, 0, 0.05); } [data-theme="light"] .glass-card:hover { background: rgba(255, 255, 255, 0.9); border-color: rgba(99, 102, 241, 0.3); } /* --- Text Colors --- */ [data-theme="light"] .text-white:not([class*="bg-"]) { color: #0f172a; } [data-theme="light"] .text-slate-100 { color: #1e293b; } [data-theme="light"] .text-slate-200 { color: #334155; } [data-theme="light"] .text-slate-300 { color: #475569; } [data-theme="light"] .text-slate-400 { color: #64748b; } [data-theme="light"] .text-slate-500 { color: #94a3b8; } [data-theme="light"] .text-slate-600 { color: #cbd5e1; } [data-theme="light"] .text-slate-700 { color: #e2e8f0; } [data-theme="light"] .text-slate-800 { color: #f1f5f9; } /* --- Border Colors --- */ [data-theme="light"] .border-slate-900 { border-color: #cbd5e1; } [data-theme="light"] .border-slate-900\/60 { border-color: rgba(203, 213, 225, 0.6); } [data-theme="light"] .border-slate-850 { border-color: #e2e8f0; } [data-theme="light"] .border-slate-800 { border-color: #f1f5f9; } [data-theme="light"] .border-slate-800\/80 { border-color: rgba(241, 245, 249, 0.8); } [data-theme="light"] .border-slate-700 { border-color: #f8fafc; } [data-theme="light"] .border-slate-950 { border-color: #e2e8f0; } /* --- Divide Colors --- */ [data-theme="light"] .divide-slate-900\/60 > * + * { border-color: rgba(203, 213, 225, 0.6); } [data-theme="light"] .divide-slate-900 > * + * { border-color: #cbd5e1; } /* --- Input Fields --- */ [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select { background-color: #ffffff; border-color: #e2e8f0; color: #0f172a; } [data-theme="light"] input:focus, [data-theme="light"] textarea:focus, [data-theme="light"] select:focus { border-color: #26ACE2; } [data-theme="light"] input::placeholder { color: #94a3b8; } /* --- Gradient Text --- */ [data-theme="light"] .bg-gradient-to-r.bg-clip-text.text-transparent { -webkit-text-fill-color: transparent; } /* --- Toast Notifications --- */ [data-theme="light"] .toast-purchased { background-color: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.1) !important; } /* --- Exit Intent Modal --- */ [data-theme="light"] .exit-intent-overlay { background-color: rgba(248, 250, 252, 0.85); } [data-theme="light"] #exit-intent-modal .bg-slate-900 { background-color: #ffffff; border-color: #e2e8f0; } /* --- Header / Navbar --- */ [data-theme="light"] .sticky { background-color: rgba(248, 250, 252, 0.85) !important; border-bottom-color: #e2e8f0 !important; } [data-theme="light"] .bg-slate-950.border-b { background-color: #f1f5f9; border-bottom-color: #e2e8f0; } /* --- Footer --- */ [data-theme="light"] footer, [data-theme="light"] .bg-slate-950.border-t { background-color: #f1f5f9 !important; border-top-color: #e2e8f0 !important; } [data-theme="light"] footer .bg-slate-900 { background-color: #e2e8f0; border-color: #cbd5e1; } [data-theme="light"] footer .border-slate-900 { border-color: #e2e8f0; } /* --- Dropdown Menus --- */ [data-theme="light"] .glass-panel[class*="absolute"] { border-color: rgba(0, 0, 0, 0.1); } /* --- Badge / Status pills --- */ [data-theme="light"] .bg-slate-950.text-slate-500 { background-color: #f1f5f9; color: #64748b; } [data-theme="light"] .bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.1); } [data-theme="light"] .bg-rose-500\/10 { background-color: rgba(244, 63, 94, 0.1); } [data-theme="light"] .bg-indigo-500\/10 { background-color: rgba(99, 102, 241, 0.1); } /* --- Sidebar hover states --- */ [data-theme="light"] .hover\:bg-slate-950:hover { background-color: #e2e8f0; } [data-theme="light"] .hover\:text-white:hover:not([class*="bg-"]) { color: #0f172a; } /* Admin sidebar: hover:bg-slate-950 maps to light gray, so text needs to be dark */ [data-theme="light"] .admin-sidebar a.hover\:text-white:hover { color: #0f172a; } /* --- Admin Dashboard Specific --- */ [data-theme="light"] .admin-sidebar .border-slate-900 { border-color: #e2e8f0; } [data-theme="light"] .admin-sidebar .text-slate-300 { color: #475569; } [data-theme="light"] .admin-sidebar .text-slate-400 { color: #64748b; } [data-theme="light"] .admin-sidebar a:hover .text-slate-300, [data-theme="light"] .admin-sidebar a:hover .text-slate-400 { color: #0f172a; } /* --- Logout button in sidebar --- */ [data-theme="light"] .bg-rose-600\/10 { background-color: rgba(244, 63, 94, 0.08); } [data-theme="light"] .hover\:bg-rose-600:hover { background-color: #e11d48; } /* --- Scrollbar for light mode --- */ [data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Dropdown hover bridge — fills gap between trigger and menu */ .dropdown-bridge::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } /* --- Logo Visibility --- */ .logo-dark { display: block; } .logo-light { display: none; } [data-theme="light"] .logo-dark { display: none; } [data-theme="light"] .logo-light { display: block; } /* --- Logo Blue Accent Palette --- */ /* Maps all indigo-* utility classes to the logo's sky-blue (#26ACE2) */ /* Text colors */ [data-theme] .text-indigo-400, [data-theme] .text-indigo-405 { color: #5BC4ED; } [data-theme] .text-indigo-600 { color: #1A8AB8; } /* Background solid */ [data-theme] .bg-indigo-400 { background-color: #5BC4ED; } [data-theme] .bg-indigo-500 { background-color: #26ACE2; } [data-theme] .bg-indigo-600 { background-color: #1A8AB8; } [data-theme] .bg-indigo-700 { background-color: #156E94; } [data-theme] .bg-indigo-950 { background-color: #0A2A38; } /* Background opacity variants */ [data-theme] .bg-indigo-500\/10 { background-color: rgba(38, 172, 226, 0.1); } [data-theme] .bg-indigo-500\/20 { background-color: rgba(38, 172, 226, 0.2); } [data-theme] .bg-indigo-500\/30 { background-color: rgba(38, 172, 226, 0.3); } [data-theme] .bg-indigo-600\/5 { background-color: rgba(26, 138, 184, 0.05); } [data-theme] .bg-indigo-600\/10 { background-color: rgba(26, 138, 184, 0.10); } [data-theme] .bg-indigo-600\/25 { background-color: rgba(26, 138, 184, 0.25); } [data-theme] .bg-indigo-950\/20 { background-color: rgba(10, 42, 56, 0.20); } /* Borders */ [data-theme] .border-indigo-500 { border-color: #26ACE2; } [data-theme] .border-indigo-500\/10 { border-color: rgba(38, 172, 226, 0.1); } [data-theme] .border-indigo-500\/20 { border-color: rgba(38, 172, 226, 0.2); } [data-theme] .border-indigo-500\/40 { border-color: rgba(38, 172, 226, 0.4); } [data-theme] .border-indigo-600 { border-color: #1A8AB8; } [data-theme] .border-indigo-900\/30 { border-color: rgba(12, 58, 78, 0.3); } /* Gradients */ [data-theme] .from-indigo-400 { --tw-gradient-from: #5BC4ED; } [data-theme] .from-indigo-500 { --tw-gradient-from: #26ACE2; } [data-theme] .from-indigo-600 { --tw-gradient-from: #1A8AB8; } [data-theme] .to-indigo-600 { --tw-gradient-to: #1A8AB8; } [data-theme] .to-indigo-700 { --tw-gradient-to: #156E94; } /* Shadows */ [data-theme] .shadow-indigo-500\/20 { box-shadow: 0 0 15px -3px rgba(38, 172, 226, 0.2); } [data-theme] .shadow-indigo-500\/25 { box-shadow: 0 0 15px -3px rgba(38, 172, 226, 0.25); } /* Hover states */ [data-theme] .hover\:text-indigo-400:hover { color: #5BC4ED; } [data-theme] .hover\:bg-indigo-600:hover { background-color: #1A8AB8; } [data-theme] .hover\:bg-indigo-700:hover { background-color: #156E94; } /* Focus states */ [data-theme] .focus\:border-indigo-500:focus { border-color: #26ACE2; } /* Selection */ [data-theme] .selection\:bg-indigo-500 *::selection, [data-theme] *::selection { background-color: #26ACE2; color: #ffffff; }