/* ══════════════════════════════════════════════════════════════ EliteSteer — Runtime Theme Overrides Theme is driven by data-theme on . elite (default) — slate-900 base + cyan accent, no overrides needed obsidian — pure black + white / grey monochrome midnight-gold — deep navy + amber / gold pearl — soft white + cyan (light mode, brand-consistent) ══════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ THEME: OBSIDIAN (Black & White) ════════════════════════════════════════════════════════════ */ [data-theme="obsidian"], [data-theme="obsidian"] body { background-color: #000 !important; color: #e0e0e0 !important; } /* — Backgrounds — */ [data-theme="obsidian"] .bg-slate-950 { background-color: #000 !important; } [data-theme="obsidian"] .bg-slate-900 { background-color: #0a0a0a !important; } [data-theme="obsidian"] .bg-slate-800 { background-color: #141414 !important; } [data-theme="obsidian"] .bg-slate-700 { background-color: #1e1e1e !important; } [data-theme="obsidian"] .bg-slate-600 { background-color: #2a2a2a !important; } [data-theme="obsidian"] .bg-slate-500 { background-color: #3a3a3a !important; } [data-theme="obsidian"] .bg-slate-400 { background-color: #505050 !important; } [data-theme="obsidian"] .bg-white { background-color: #141414 !important; } [data-theme="obsidian"] .bg-cyan-400 { background-color: #484848 !important; } [data-theme="obsidian"] .bg-cyan-500 { background-color: #3a3a3a !important; } [data-theme="obsidian"] .bg-cyan-600 { background-color: #2e2e2e !important; } [data-theme="obsidian"] .bg-cyan-700 { background-color: #242424 !important; } [data-theme="obsidian"] .bg-blue-400 { background-color: #484848 !important; } [data-theme="obsidian"] .bg-blue-500 { background-color: #3a3a3a !important; } [data-theme="obsidian"] .bg-blue-600 { background-color: #2e2e2e !important; } [data-theme="obsidian"] .bg-blue-700 { background-color: #242424 !important; } [data-theme="obsidian"] .bg-indigo-500 { background-color: #363636 !important; } [data-theme="obsidian"] .bg-indigo-600 { background-color: #2a2a2a !important; } [data-theme="obsidian"] .bg-purple-500 { background-color: #3a3a3a !important; } [data-theme="obsidian"] .bg-purple-600 { background-color: #2e2e2e !important; } /* Opacity variants */ [data-theme="obsidian"] .bg-slate-900\/20 { background-color: rgb(0 0 0 / 0.20) !important; } [data-theme="obsidian"] .bg-slate-900\/40 { background-color: rgb(0 0 0 / 0.40) !important; } [data-theme="obsidian"] .bg-slate-800\/50 { background-color: rgb(20 20 20 / 0.50) !important; } [data-theme="obsidian"] .bg-slate-800\/80 { background-color: rgb(20 20 20 / 0.80) !important; } [data-theme="obsidian"] .bg-slate-700\/30 { background-color: rgb(30 30 30 / 0.30) !important; } [data-theme="obsidian"] .bg-slate-700\/50 { background-color: rgb(30 30 30 / 0.50) !important; } [data-theme="obsidian"] .bg-slate-700\/80 { background-color: rgb(30 30 30 / 0.80) !important; } [data-theme="obsidian"] .bg-cyan-500\/10 { background-color: rgb(60 60 60 / 0.30) !important; } [data-theme="obsidian"] .bg-cyan-500\/20 { background-color: rgb(60 60 60 / 0.45) !important; } [data-theme="obsidian"] .bg-cyan-600\/10 { background-color: rgb(50 50 50 / 0.30) !important; } [data-theme="obsidian"] .bg-cyan-600\/20 { background-color: rgb(50 50 50 / 0.45) !important; } /* — Text — */ [data-theme="obsidian"] .text-slate-100 { color: #f0f0f0 !important; } [data-theme="obsidian"] .text-slate-200 { color: #e0e0e0 !important; } [data-theme="obsidian"] .text-slate-300 { color: #c8c8c8 !important; } [data-theme="obsidian"] .text-slate-400 { color: #a0a0a0 !important; } [data-theme="obsidian"] .text-slate-500 { color: #707070 !important; } [data-theme="obsidian"] .text-slate-600 { color: #545454 !important; } [data-theme="obsidian"] .text-slate-700 { color: #3c3c3c !important; } [data-theme="obsidian"] .text-cyan-300 { color: #e8e8e8 !important; } [data-theme="obsidian"] .text-cyan-400 { color: #d8d8d8 !important; } [data-theme="obsidian"] .text-cyan-500 { color: #c0c0c0 !important; } [data-theme="obsidian"] .text-cyan-600 { color: #a8a8a8 !important; } [data-theme="obsidian"] .text-blue-300 { color: #d0d0d0 !important; } [data-theme="obsidian"] .text-blue-400 { color: #c8c8c8 !important; } [data-theme="obsidian"] .text-blue-600 { color: #a0a0a0 !important; } [data-theme="obsidian"] .text-indigo-400 { color: #c0c0c0 !important; } [data-theme="obsidian"] .text-purple-300 { color: #c8c8c8 !important; } [data-theme="obsidian"] .text-purple-400 { color: #b8b8b8 !important; } [data-theme="obsidian"] .text-purple-500 { color: #a0a0a0 !important; } [data-theme="obsidian"] .hover\:text-cyan-400:hover { color: #e0e0e0 !important; } [data-theme="obsidian"] .group:hover .group-hover\:text-cyan-400 { color: #e0e0e0 !important; } /* — Borders — */ [data-theme="obsidian"] .border-slate-700 { border-color: #1e1e1e !important; } [data-theme="obsidian"] .border-slate-600 { border-color: #2a2a2a !important; } [data-theme="obsidian"] .border-slate-500 { border-color: #3a3a3a !important; } [data-theme="obsidian"] .border-slate-400 { border-color: #4c4c4c !important; } [data-theme="obsidian"] .border-slate-300 { border-color: #606060 !important; } [data-theme="obsidian"] .border-cyan-400 { border-color: #585858 !important; } [data-theme="obsidian"] .border-cyan-500 { border-color: #484848 !important; } [data-theme="obsidian"] .border-cyan-600 { border-color: #383838 !important; } [data-theme="obsidian"] .border-blue-400 { border-color: #484848 !important; } [data-theme="obsidian"] .border-blue-500 { border-color: #3c3c3c !important; } [data-theme="obsidian"] .border-purple-400 { border-color: #484848 !important; } [data-theme="obsidian"] .border-purple-500 { border-color: #3c3c3c !important; } [data-theme="obsidian"] .border-slate-700\/50 { border-color: rgb(30 30 30 / 0.50) !important; } [data-theme="obsidian"] .border-slate-700\/60 { border-color: rgb(30 30 30 / 0.60) !important; } [data-theme="obsidian"] .border-cyan-500\/20 { border-color: rgb(72 72 72 / 0.40) !important; } [data-theme="obsidian"] .border-cyan-500\/40 { border-color: rgb(72 72 72 / 0.60) !important; } [data-theme="obsidian"] .hover\:border-cyan-500:hover { border-color: #686868 !important; } [data-theme="obsidian"] .hover\:border-cyan-500\/40:hover { border-color: rgb(100 100 100 / 0.40) !important; } /* — Gradients — */ [data-theme="obsidian"] .from-slate-900 { --tw-gradient-from:#0a0a0a; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(10 10 10/0)); } [data-theme="obsidian"] .from-slate-800 { --tw-gradient-from:#141414; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(20 20 20/0)); } [data-theme="obsidian"] .from-slate-700 { --tw-gradient-from:#1e1e1e; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(30 30 30/0)); } [data-theme="obsidian"] .via-slate-800 { --tw-gradient-via:#141414; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-via),var(--tw-gradient-to,rgb(20 20 20/0)); } [data-theme="obsidian"] .to-slate-900 { --tw-gradient-to:#0a0a0a; } [data-theme="obsidian"] .to-slate-800 { --tw-gradient-to:#141414; } [data-theme="obsidian"] .to-slate-700 { --tw-gradient-to:#1e1e1e; } [data-theme="obsidian"] .from-cyan-400,[data-theme="obsidian"] .from-cyan-500,[data-theme="obsidian"] .from-cyan-600 { --tw-gradient-from:#484848; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(72 72 72/0)); } [data-theme="obsidian"] .from-blue-400,[data-theme="obsidian"] .from-blue-500,[data-theme="obsidian"] .from-blue-600 { --tw-gradient-from:#303030; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(48 48 48/0)); } [data-theme="obsidian"] .to-cyan-400,[data-theme="obsidian"] .to-cyan-500,[data-theme="obsidian"] .to-cyan-600 { --tw-gradient-to:#383838; } [data-theme="obsidian"] .to-blue-400,[data-theme="obsidian"] .to-blue-500,[data-theme="obsidian"] .to-blue-600 { --tw-gradient-to:#242424; } /* — Shadows & Rings — */ [data-theme="obsidian"] .shadow-cyan-500\/50 { --tw-shadow-color:rgba(80,80,80,.50); --tw-shadow:var(--tw-shadow-colored); } [data-theme="obsidian"] .hover\:shadow-cyan-500\/50:hover { --tw-shadow-color:rgba(80,80,80,.50); --tw-shadow:var(--tw-shadow-colored); } [data-theme="obsidian"] .ring-cyan-500 { --tw-ring-color:rgb(72 72 72) !important; } /* — booking-redesign.css overrides — */ [data-theme="obsidian"] #bookingSearchStep { background:linear-gradient(135deg,#000 0%,#0a0a0a 100%) !important; } [data-theme="obsidian"] #bookingSearchForm input, [data-theme="obsidian"] #bookingSearchForm select { background:rgba(14,14,14,.9) !important; border-color:#2a2a2a !important; color:#e0e0e0 !important; } [data-theme="obsidian"] #bookingSearchForm input:focus, [data-theme="obsidian"] #bookingSearchForm select:focus { border-color:#585858 !important; box-shadow:0 0 0 3px rgba(80,80,80,.20) !important; } [data-theme="obsidian"] #bookingVehicleStep { background:linear-gradient(180deg,#000 0%,#0a0a0a 100%) !important; } /* — custom.css overrides — */ [data-theme="obsidian"] .auth-card { background:#111 !important; } [data-theme="obsidian"] .auth-input-login:focus, [data-theme="obsidian"] .auth-input-signup:focus { border-color:#585858 !important; box-shadow:0 0 0 3px rgba(80,80,80,.20) !important; } [data-theme="obsidian"] .auth-tab-btn { color:#707070 !important; } [data-theme="obsidian"] .auth-tab-btn.auth-tab-active { color:transparent !important; background:linear-gradient(90deg,#c8c8c8,#a0a0a0,#c8c8c8); -webkit-background-clip:text; background-clip:text; } [data-theme="obsidian"] .auth-tab-btn.auth-tab-active::after { background:linear-gradient(90deg,#888,#aaa,#888) !important; } [data-theme="obsidian"] .fleet-cat-inner-a { background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 45%,#222 100%) !important; } [data-theme="obsidian"] .fleet-cat-inner-b { background:linear-gradient(135deg,#0a0a0a 0%,#1e1e1e 45%,#161616 100%) !important; } [data-theme="obsidian"] .fleet-cat-inner-c { background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 45%,#111 100%) !important; } /* — Scrollbar — */ [data-theme="obsidian"] ::-webkit-scrollbar-track { background:#0a0a0a; } [data-theme="obsidian"] ::-webkit-scrollbar-thumb { background:#2a2a2a; border-color:#0a0a0a; } [data-theme="obsidian"] ::-webkit-scrollbar-thumb:hover { background:#3a3a3a; } /* ════════════════════════════════════════════════════════════ THEME: MIDNIGHT GOLD (Deep Navy + Amber / Gold) ════════════════════════════════════════════════════════════ */ [data-theme="midnight-gold"], [data-theme="midnight-gold"] body { background-color:#07091a !important; color:#e2e8f0 !important; } /* — Backgrounds — */ [data-theme="midnight-gold"] .bg-slate-950 { background-color:#04050f !important; } [data-theme="midnight-gold"] .bg-slate-900 { background-color:#07091a !important; } [data-theme="midnight-gold"] .bg-slate-800 { background-color:#0d1224 !important; } [data-theme="midnight-gold"] .bg-slate-700 { background-color:#141d36 !important; } [data-theme="midnight-gold"] .bg-slate-600 { background-color:#1c2848 !important; } [data-theme="midnight-gold"] .bg-slate-500 { background-color:#25345e !important; } [data-theme="midnight-gold"] .bg-slate-400 { background-color:#2f4076 !important; } [data-theme="midnight-gold"] .bg-white { background-color:#0d1224 !important; } [data-theme="midnight-gold"] .bg-cyan-400 { background-color:#fbbf24 !important; } [data-theme="midnight-gold"] .bg-cyan-500 { background-color:#f59e0b !important; } [data-theme="midnight-gold"] .bg-cyan-600 { background-color:#d97706 !important; } [data-theme="midnight-gold"] .bg-cyan-700 { background-color:#b45309 !important; } [data-theme="midnight-gold"] .bg-blue-400 { background-color:#f59e0b !important; } [data-theme="midnight-gold"] .bg-blue-500 { background-color:#d97706 !important; } [data-theme="midnight-gold"] .bg-blue-600 { background-color:#b45309 !important; } [data-theme="midnight-gold"] .bg-blue-700 { background-color:#92400e !important; } [data-theme="midnight-gold"] .bg-indigo-500 { background-color:#d97706 !important; } [data-theme="midnight-gold"] .bg-indigo-600 { background-color:#b45309 !important; } [data-theme="midnight-gold"] .bg-purple-500 { background-color:#d97706 !important; } [data-theme="midnight-gold"] .bg-purple-600 { background-color:#b45309 !important; } /* Opacity variants */ [data-theme="midnight-gold"] .bg-slate-900\/20 { background-color:rgb(7 9 26/0.20) !important; } [data-theme="midnight-gold"] .bg-slate-900\/40 { background-color:rgb(7 9 26/0.40) !important; } [data-theme="midnight-gold"] .bg-slate-800\/50 { background-color:rgb(13 18 36/0.50) !important; } [data-theme="midnight-gold"] .bg-slate-800\/80 { background-color:rgb(13 18 36/0.80) !important; } [data-theme="midnight-gold"] .bg-slate-700\/30 { background-color:rgb(20 29 54/0.30) !important; } [data-theme="midnight-gold"] .bg-slate-700\/50 { background-color:rgb(20 29 54/0.50) !important; } [data-theme="midnight-gold"] .bg-slate-700\/80 { background-color:rgb(20 29 54/0.80) !important; } [data-theme="midnight-gold"] .bg-cyan-500\/10 { background-color:rgb(245 158 11/0.10) !important; } [data-theme="midnight-gold"] .bg-cyan-500\/20 { background-color:rgb(245 158 11/0.20) !important; } [data-theme="midnight-gold"] .bg-cyan-600\/10 { background-color:rgb(217 119 6/0.10) !important; } [data-theme="midnight-gold"] .bg-cyan-600\/20 { background-color:rgb(217 119 6/0.20) !important; } /* — Text — */ [data-theme="midnight-gold"] .text-slate-100 { color:#f0f4ff !important; } [data-theme="midnight-gold"] .text-slate-200 { color:#e2e8f0 !important; } [data-theme="midnight-gold"] .text-slate-300 { color:#cbd5e1 !important; } [data-theme="midnight-gold"] .text-slate-400 { color:#94a3b8 !important; } [data-theme="midnight-gold"] .text-slate-500 { color:#64748b !important; } [data-theme="midnight-gold"] .text-slate-600 { color:#3d5070 !important; } [data-theme="midnight-gold"] .text-slate-700 { color:#2a3a56 !important; } [data-theme="midnight-gold"] .text-cyan-300 { color:#fde68a !important; } [data-theme="midnight-gold"] .text-cyan-400 { color:#fbbf24 !important; } [data-theme="midnight-gold"] .text-cyan-500 { color:#f59e0b !important; } [data-theme="midnight-gold"] .text-cyan-600 { color:#d97706 !important; } [data-theme="midnight-gold"] .text-blue-300 { color:#fde68a !important; } [data-theme="midnight-gold"] .text-blue-400 { color:#fbbf24 !important; } [data-theme="midnight-gold"] .text-blue-600 { color:#d97706 !important; } [data-theme="midnight-gold"] .text-indigo-400 { color:#fbbf24 !important; } [data-theme="midnight-gold"] .text-purple-300 { color:#fde68a !important; } [data-theme="midnight-gold"] .text-purple-400 { color:#fbbf24 !important; } [data-theme="midnight-gold"] .text-purple-500 { color:#f59e0b !important; } [data-theme="midnight-gold"] .hover\:text-cyan-400:hover { color:#fbbf24 !important; } [data-theme="midnight-gold"] .group:hover .group-hover\:text-cyan-400 { color:#fbbf24 !important; } /* — Borders — */ [data-theme="midnight-gold"] .border-slate-700 { border-color:#1a2845 !important; } [data-theme="midnight-gold"] .border-slate-600 { border-color:#1e3060 !important; } [data-theme="midnight-gold"] .border-slate-500 { border-color:#2a3d70 !important; } [data-theme="midnight-gold"] .border-slate-400 { border-color:#354d85 !important; } [data-theme="midnight-gold"] .border-slate-300 { border-color:#405a9a !important; } [data-theme="midnight-gold"] .border-cyan-400 { border-color:#fbbf24 !important; } [data-theme="midnight-gold"] .border-cyan-500 { border-color:#f59e0b !important; } [data-theme="midnight-gold"] .border-cyan-600 { border-color:#d97706 !important; } [data-theme="midnight-gold"] .border-blue-400 { border-color:#fbbf24 !important; } [data-theme="midnight-gold"] .border-blue-500 { border-color:#f59e0b !important; } [data-theme="midnight-gold"] .border-purple-400 { border-color:#fbbf24 !important; } [data-theme="midnight-gold"] .border-purple-500 { border-color:#f59e0b !important; } [data-theme="midnight-gold"] .border-slate-700\/50 { border-color:rgb(26 40 69/0.50) !important; } [data-theme="midnight-gold"] .border-slate-700\/60 { border-color:rgb(26 40 69/0.60) !important; } [data-theme="midnight-gold"] .border-cyan-500\/20 { border-color:rgb(245 158 11/0.20) !important; } [data-theme="midnight-gold"] .border-cyan-500\/40 { border-color:rgb(245 158 11/0.40) !important; } [data-theme="midnight-gold"] .hover\:border-cyan-500:hover { border-color:#f59e0b !important; } [data-theme="midnight-gold"] .hover\:border-cyan-500\/40:hover { border-color:rgb(245 158 11/0.40) !important; } /* — Gradients — */ [data-theme="midnight-gold"] .from-slate-900 { --tw-gradient-from:#07091a; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(7 9 26/0)); } [data-theme="midnight-gold"] .from-slate-800 { --tw-gradient-from:#0d1224; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(13 18 36/0)); } [data-theme="midnight-gold"] .from-slate-700 { --tw-gradient-from:#141d36; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(20 29 54/0)); } [data-theme="midnight-gold"] .via-slate-800 { --tw-gradient-via:#0d1224; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-via),var(--tw-gradient-to,rgb(13 18 36/0)); } [data-theme="midnight-gold"] .to-slate-900 { --tw-gradient-to:#07091a; } [data-theme="midnight-gold"] .to-slate-800 { --tw-gradient-to:#0d1224; } [data-theme="midnight-gold"] .to-slate-700 { --tw-gradient-to:#141d36; } [data-theme="midnight-gold"] .from-cyan-400,[data-theme="midnight-gold"] .from-cyan-500,[data-theme="midnight-gold"] .from-cyan-600 { --tw-gradient-from:#f59e0b; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(245 158 11/0)); } [data-theme="midnight-gold"] .from-blue-400,[data-theme="midnight-gold"] .from-blue-500,[data-theme="midnight-gold"] .from-blue-600 { --tw-gradient-from:#d97706; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(217 119 6/0)); } [data-theme="midnight-gold"] .to-cyan-400,[data-theme="midnight-gold"] .to-cyan-500,[data-theme="midnight-gold"] .to-cyan-600 { --tw-gradient-to:#f59e0b; } [data-theme="midnight-gold"] .to-blue-400,[data-theme="midnight-gold"] .to-blue-500,[data-theme="midnight-gold"] .to-blue-600 { --tw-gradient-to:#b45309; } /* — Shadows & Rings — */ [data-theme="midnight-gold"] .shadow-cyan-500\/50 { --tw-shadow-color:rgba(245,158,11,.50); --tw-shadow:var(--tw-shadow-colored); } [data-theme="midnight-gold"] .hover\:shadow-cyan-500\/50:hover { --tw-shadow-color:rgba(245,158,11,.50); --tw-shadow:var(--tw-shadow-colored); } [data-theme="midnight-gold"] .ring-cyan-500 { --tw-ring-color:rgb(245 158 11) !important; } /* — booking-redesign.css overrides — */ [data-theme="midnight-gold"] #bookingSearchStep { background:linear-gradient(135deg,#07091a 0%,#0d1224 100%) !important; } [data-theme="midnight-gold"] #bookingSearchForm input, [data-theme="midnight-gold"] #bookingSearchForm select { background:rgba(7,9,26,.80) !important; border-color:#1a2845 !important; color:#e2e8f0 !important; } [data-theme="midnight-gold"] #bookingSearchForm input:focus, [data-theme="midnight-gold"] #bookingSearchForm select:focus { border-color:#f59e0b !important; box-shadow:0 0 0 3px rgba(245,158,11,.15) !important; } [data-theme="midnight-gold"] #bookingVehicleStep { background:linear-gradient(180deg,#07091a 0%,#0d1224 100%) !important; } /* — custom.css overrides — */ [data-theme="midnight-gold"] .auth-card { background:#0d1224 !important; } [data-theme="midnight-gold"] .auth-input-login:focus { border-color:#f59e0b !important; box-shadow:0 0 0 3px rgba(245,158,11,.15) !important; } [data-theme="midnight-gold"] .auth-input-signup:focus { border-color:#f59e0b !important; box-shadow:0 0 0 3px rgba(245,158,11,.15) !important; } [data-theme="midnight-gold"] .auth-tab-btn { color:#64748b !important; } [data-theme="midnight-gold"] .auth-tab-btn.auth-tab-active { color:transparent !important; background:linear-gradient(90deg,#fbbf24,#f59e0b,#d97706); -webkit-background-clip:text; background-clip:text; } [data-theme="midnight-gold"] .auth-tab-btn.auth-tab-active::after { background:linear-gradient(90deg,#f59e0b,#d97706,#f59e0b) !important; } [data-theme="midnight-gold"] .fleet-cat-inner-a { background:linear-gradient(135deg,#07091a 0%,#0d1b34 45%,#0d1f3c 100%) !important; } [data-theme="midnight-gold"] .fleet-cat-inner-b { background:linear-gradient(135deg,#07091a 0%,#100d2e 45%,#0c1a38 100%) !important; } [data-theme="midnight-gold"] .fleet-cat-inner-c { background:linear-gradient(135deg,#07091a 0%,#1a0d26 45%,#160d1e 100%) !important; } /* — Scrollbar — */ [data-theme="midnight-gold"] ::-webkit-scrollbar-track { background:#07091a; } [data-theme="midnight-gold"] ::-webkit-scrollbar-thumb { background:#1a2845; border-color:#07091a; } [data-theme="midnight-gold"] ::-webkit-scrollbar-thumb:hover { background:#253660; } /* ════════════════════════════════════════════════════════════ THEME: PEARL (Soft White + Brand Cyan — Light Mode) Philosophy: pure white cards on off-white page, retain brand cyan as the accent colour (just use darker shades where necessary for WCAG contrast on white backgrounds). ════════════════════════════════════════════════════════════ */ [data-theme="pearl"], [data-theme="pearl"] body { background-color:#f0f4f8 !important; color:#0f172a !important; } /* — Backgrounds (dark → light) — */ [data-theme="pearl"] .bg-slate-950 { background-color:#e8edf2 !important; } [data-theme="pearl"] .bg-slate-900 { background-color:#f0f4f8 !important; } [data-theme="pearl"] .bg-slate-800 { background-color:#ffffff !important; box-shadow:0 1px 4px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04); } [data-theme="pearl"] .bg-slate-700 { background-color:#f1f5f9 !important; } [data-theme="pearl"] .bg-slate-600 { background-color:#e2e8f0 !important; } [data-theme="pearl"] .bg-slate-500 { background-color:#cbd5e1 !important; } [data-theme="pearl"] .bg-slate-400 { background-color:#94a3b8 !important; } [data-theme="pearl"] .bg-white { background-color:#ffffff !important; } /* Cyan/blue accent backgrounds stay — they are already dark enough on white. We only make icon-circle tints slightly richer for light backgrounds. */ [data-theme="pearl"] .bg-cyan-500\/10 { background-color:rgb(8 145 178/0.08) !important; } [data-theme="pearl"] .bg-cyan-500\/20 { background-color:rgb(8 145 178/0.14) !important; } [data-theme="pearl"] .bg-cyan-600\/10 { background-color:rgb(8 145 178/0.08) !important; } [data-theme="pearl"] .bg-cyan-600\/20 { background-color:rgb(8 145 178/0.14) !important; } /* Opacity backgrounds */ [data-theme="pearl"] .bg-slate-900\/20 { background-color:rgb(0 0 0 /0.03) !important; } [data-theme="pearl"] .bg-slate-900\/40 { background-color:rgb(0 0 0 /0.05) !important; } [data-theme="pearl"] .bg-slate-800\/50 { background-color:rgb(255 255 255/0.85) !important; } [data-theme="pearl"] .bg-slate-800\/80 { background-color:rgb(255 255 255/0.96) !important; } [data-theme="pearl"] .bg-slate-700\/30 { background-color:rgb(0 0 0 /0.03) !important; } [data-theme="pearl"] .bg-slate-700\/50 { background-color:rgb(0 0 0 /0.04) !important; } [data-theme="pearl"] .bg-slate-700\/80 { background-color:rgb(0 0 0 /0.06) !important; } /* — Text — */ /* text-white: flip to near-black on light surfaces. Restored to white below for elements that genuinely sit on a dark/coloured bg. */ [data-theme="pearl"] .text-white { color:#0f172a !important; } [data-theme="pearl"] .text-slate-100 { color:#1e293b !important; } [data-theme="pearl"] .text-slate-200 { color:#334155 !important; } [data-theme="pearl"] .text-slate-300 { color:#475569 !important; } [data-theme="pearl"] .text-slate-400 { color:#64748b !important; } [data-theme="pearl"] .text-slate-500 { color:#94a3b8 !important; } [data-theme="pearl"] .text-slate-600 { color:#64748b !important; } [data-theme="pearl"] .text-slate-700 { color:#475569 !important; } /* Cyan-300/400 are too bright for white backgrounds — use darker shades */ [data-theme="pearl"] .text-cyan-300 { color:#0e7490 !important; } [data-theme="pearl"] .text-cyan-400 { color:#0891b2 !important; } /* cyan-500/600 are already dark enough for white bg — keep as-is */ [data-theme="pearl"] .hover\:text-cyan-400:hover { color:#0891b2 !important; } [data-theme="pearl"] .group:hover .group-hover\:text-cyan-400 { color:#0891b2 !important; } /* blue-300/400 gradient text helpers */ [data-theme="pearl"] .text-blue-300 { color:#1d4ed8 !important; } [data-theme="pearl"] .text-blue-400 { color:#2563eb !important; } /* ── Restore white text inside / on any element that keeps a dark background ── Specificity (0,3,0) wins over the (0,2,0) global text-white flip. */ [data-theme="pearl"] .bg-cyan-400.text-white, [data-theme="pearl"] .bg-cyan-400 .text-white, [data-theme="pearl"] .bg-cyan-500.text-white, [data-theme="pearl"] .bg-cyan-500 .text-white, [data-theme="pearl"] .bg-cyan-600.text-white, [data-theme="pearl"] .bg-cyan-600 .text-white, [data-theme="pearl"] .bg-cyan-700.text-white, [data-theme="pearl"] .bg-cyan-700 .text-white, [data-theme="pearl"] .bg-blue-500.text-white, [data-theme="pearl"] .bg-blue-500 .text-white, [data-theme="pearl"] .bg-blue-600.text-white, [data-theme="pearl"] .bg-blue-600 .text-white, [data-theme="pearl"] .from-cyan-600.text-white, [data-theme="pearl"] .from-cyan-600 .text-white, [data-theme="pearl"] .from-cyan-500.text-white, [data-theme="pearl"] .from-cyan-500 .text-white, [data-theme="pearl"] .from-blue-600.text-white, [data-theme="pearl"] .from-blue-600 .text-white, [data-theme="pearl"] .bg-indigo-600.text-white, [data-theme="pearl"] .bg-indigo-600 .text-white, [data-theme="pearl"] .bg-emerald-500.text-white, [data-theme="pearl"] .bg-emerald-500 .text-white, [data-theme="pearl"] .bg-emerald-600.text-white, [data-theme="pearl"] .bg-emerald-600 .text-white, [data-theme="pearl"] .bg-red-500.text-white, [data-theme="pearl"] .bg-red-500 .text-white, [data-theme="pearl"] .bg-red-600.text-white, [data-theme="pearl"] .bg-red-600 .text-white, [data-theme="pearl"] .bg-amber-500.text-white, [data-theme="pearl"] .bg-amber-500 .text-white, [data-theme="pearl"] .bg-amber-600.text-white, [data-theme="pearl"] .bg-amber-600 .text-white { color:#ffffff !important; } /* Calendar icon (.rp-date-icon, responsive-primitives.css): white by default everywhere is only correct on dark surfaces. Most date-input backgrounds lighten under pearl (.bg-slate-700/.bg-slate-600 above), so their icon needs to darken here too — except .dt-compact fields, whose own bg-slate-900/70 background has no pearl override and stays dark in every theme, so their icon stays white. Same "one dark-bg exception, restored after a blanket flip" pattern as the text-white block above, just for this one non-text property instead of color-inside-text. */ [data-theme="pearl"] .rp-date-icon { color:#0f172a !important; } [data-theme="pearl"] .rp-date-wrap:has(input.dt-compact) .rp-date-icon { color:#fff !important; } /* — Borders (dark → light) — */ [data-theme="pearl"] .border-slate-700 { border-color:#e2e8f0 !important; } [data-theme="pearl"] .border-slate-600 { border-color:#cbd5e1 !important; } [data-theme="pearl"] .border-slate-500 { border-color:#94a3b8 !important; } [data-theme="pearl"] .border-slate-400 { border-color:#64748b !important; } [data-theme="pearl"] .border-slate-300 { border-color:#475569 !important; } /* Cyan borders stay — they are vivid enough on white */ [data-theme="pearl"] .border-slate-700\/50 { border-color:rgb(226 232 240/1.00) !important; } [data-theme="pearl"] .border-slate-700\/60 { border-color:rgb(226 232 240/1.00) !important; } /* Cyan opacity borders → slightly stronger for visibility on white */ [data-theme="pearl"] .border-cyan-500\/20 { border-color:rgb(8 145 178/0.25) !important; } [data-theme="pearl"] .border-cyan-500\/40 { border-color:rgb(8 145 178/0.40) !important; } /* — Gradients (slate = light; cyan/blue stays brand-coloured) — */ [data-theme="pearl"] .from-slate-900 { --tw-gradient-from:#f0f4f8; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(240 244 248/0)); } [data-theme="pearl"] .from-slate-800 { --tw-gradient-from:#ffffff; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(255 255 255/0)); } [data-theme="pearl"] .from-slate-700 { --tw-gradient-from:#f1f5f9; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(241 245 249/0)); } [data-theme="pearl"] .via-slate-800 { --tw-gradient-via:#ffffff; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-via),var(--tw-gradient-to,rgb(255 255 255/0)); } [data-theme="pearl"] .to-slate-900 { --tw-gradient-to:#f0f4f8; } [data-theme="pearl"] .to-slate-800 { --tw-gradient-to:#ffffff; } [data-theme="pearl"] .to-slate-700 { --tw-gradient-to:#f1f5f9; } /* Accent gradient text: use darker cyan so it pops on white */ [data-theme="pearl"] .from-cyan-400 { --tw-gradient-from:#0891b2; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(8 145 178/0)); } [data-theme="pearl"] .to-blue-400 { --tw-gradient-to:#1d4ed8; } /* — Shadows — */ [data-theme="pearl"] .shadow-cyan-500\/50 { --tw-shadow-color:rgba(8,145,178,.18); --tw-shadow:var(--tw-shadow-colored); } [data-theme="pearl"] .hover\:shadow-cyan-500\/50:hover { --tw-shadow-color:rgba(8,145,178,.22); --tw-shadow:var(--tw-shadow-colored); } /* — booking-redesign.css overrides — */ [data-theme="pearl"] #bookingSearchStep { background:linear-gradient(135deg,#e8f4fd 0%,#f0f9ff 100%) !important; } [data-theme="pearl"] #bookingSearchForm input, [data-theme="pearl"] #bookingSearchForm select { background:rgba(248,250,252,.95) !important; border-color:#cbd5e1 !important; color:#0f172a !important; } [data-theme="pearl"] #bookingSearchForm input:focus, [data-theme="pearl"] #bookingSearchForm select:focus { border-color:#0891b2 !important; box-shadow:0 0 0 3px rgba(8,145,178,.14) !important; } [data-theme="pearl"] #bookingVehicleStep { background:linear-gradient(180deg,#f0f4f8 0%,#ffffff 100%) !important; } /* — custom.css overrides — */ [data-theme="pearl"] .auth-card { background:#ffffff !important; background-image:none !important; } [data-theme="pearl"] .auth-input-login:focus { border-color:#0891b2 !important; box-shadow:0 0 0 3px rgba(8,145,178,.14) !important; } [data-theme="pearl"] .auth-input-signup:focus { border-color:#0891b2 !important; box-shadow:0 0 0 3px rgba(8,145,178,.14) !important; } [data-theme="pearl"] .auth-tab-strip { border-color:rgba(203,213,225,.70) !important; } [data-theme="pearl"] .auth-tab-btn { color:#94a3b8 !important; } [data-theme="pearl"] .auth-tab-btn.auth-tab-active { color:transparent !important; background:linear-gradient(90deg,#0891b2,#0369a1,#1e40af); -webkit-background-clip:text; background-clip:text; } [data-theme="pearl"] .auth-tab-btn.auth-tab-active::after { background:linear-gradient(90deg,#0891b2,#0369a1,#1e40af) !important; } [data-theme="pearl"] .fleet-cat-inner-a { background:linear-gradient(135deg,#e0f2fe 0%,#bae6fd 45%,#dbeafe 100%) !important; } [data-theme="pearl"] .fleet-cat-inner-b { background:linear-gradient(135deg,#ede9fe 0%,#ddd6fe 45%,#dbeafe 100%) !important; } [data-theme="pearl"] .fleet-cat-inner-c { background:linear-gradient(135deg,#fce7f3 0%,#f5d0fe 45%,#ede9fe 100%) !important; } /* — Scrollbar — */ [data-theme="pearl"] ::-webkit-scrollbar-track { background:#f0f4f8; } [data-theme="pearl"] ::-webkit-scrollbar-thumb { background:#cbd5e1; border-color:#f0f4f8; } [data-theme="pearl"] ::-webkit-scrollbar-thumb:hover { background:#94a3b8; } /* ════════════════════════════════════════════════════════════ THEME SWATCH ACTIVE INDICATOR Uses inset box-shadow so the ring always fills the entire button area without shifting layout or clipping corners. ════════════════════════════════════════════════════════════ */ .theme-swatch { width: 100%; min-width: 0; overflow: hidden; border: 1px solid transparent; border-radius: 0.5rem; box-shadow: inset 0 0 0 0 transparent; transition: box-shadow 0.15s ease, background-color 0.15s ease; } /* EliteSteer: cyan inset ring */ [data-theme="elite"] [data-theme-btn="elite"] { box-shadow: inset 0 0 0 2px rgba(34,211,238,0.65) !important; background-color: rgba(34,211,238,0.07) !important; } /* Obsidian: grey inset ring */ [data-theme="obsidian"] [data-theme-btn="obsidian"] { box-shadow: inset 0 0 0 2px rgba(200,200,200,0.55) !important; background-color: rgba(200,200,200,0.07) !important; } /* Midnight Gold: amber inset ring */ [data-theme="midnight-gold"] [data-theme-btn="midnight-gold"] { box-shadow: inset 0 0 0 2px rgba(245,158,11,0.80) !important; background-color: rgba(245,158,11,0.10) !important; } /* Pearl: cyan inset ring (on light bg) */ [data-theme="pearl"] [data-theme-btn="pearl"] { box-shadow: inset 0 0 0 2px rgba(8,145,178,0.65) !important; background-color: rgba(8,145,178,0.08) !important; }