/* =========================================================================== * DetailIQ colour themes. Scoped by [data-theme] on ; overrides the * compiled Tailwind utility classes used across the portal. 'default' needs no * rules (the base design IS the default lime-on-dark theme). * ======================================================================== */ /* ============================ MONO — sleek black & white ============================ */ [data-theme="mono"] { --brand: #ffffff; } [data-theme="mono"] .text-accent { color: #ffffff !important; } [data-theme="mono"] .bg-accent { background-color: #ffffff !important; color: #0a0a0a !important; } [data-theme="mono"] .bg-accent.text-primary, [data-theme="mono"] .bg-accent .text-primary { color: #0a0a0a !important; } [data-theme="mono"] .border-accent, [data-theme="mono"] .border-accent\/20, [data-theme="mono"] .border-accent\/30, [data-theme="mono"] .border-accent\/40, [data-theme="mono"] .border-accent\/50 { border-color: rgba(255,255,255,0.35) !important; } [data-theme="mono"] .bg-accent\/10, [data-theme="mono"] .bg-accent\/15, [data-theme="mono"] .bg-accent\/20 { background-color: rgba(255,255,255,0.12) !important; } [data-theme="mono"] .ring-accent\/20, [data-theme="mono"] .ring-accent\/30 { --tw-ring-color: rgba(255,255,255,0.3) !important; } /* tone the ambient lime glow down to a neutral white wash */ [data-theme="mono"] .glow-bg::before { background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%) !important; } /* hover glow shadows that used lime */ [data-theme="mono"] [class*="shadow-[0_0_"] { box-shadow: 0 0 20px rgba(255,255,255,0.18) !important; } /* ============================ LIGHT — light body, dark sidebar/header ============================ */ [data-theme="light"] body { background: #eef0f3 !important; color: #1f2937 !important; } [data-theme="light"] .glow-bg::before { display: none !important; } [data-theme="light"] .bg-primary { background-color: #eef0f3 !important; } [data-theme="light"] .bg-primary\/60, [data-theme="light"] .bg-primary\/50, [data-theme="light"] .bg-primary\/40 { background-color: #f7f8fa !important; } [data-theme="light"] .bg-secondary, [data-theme="light"] .bg-secondary\/60, [data-theme="light"] .bg-secondary\/40, [data-theme="light"] .bg-secondary\/30 { background-color: #ffffff !important; } [data-theme="light"] .text-white { color: #111827 !important; } [data-theme="light"] .text-tertiary { color: #1f2937 !important; } [data-theme="light"] .text-gray-300 { color: #374151 !important; } [data-theme="light"] .text-gray-400 { color: #6b7280 !important; } [data-theme="light"] .text-gray-500 { color: #6b7280 !important; } [data-theme="light"] .text-gray-600 { color: #9ca3af !important; } [data-theme="light"] .border-white\/5, [data-theme="light"] .border-white\/10, [data-theme="light"] .border-gray-700, [data-theme="light"] .border-gray-800 { border-color: #e5e7eb !important; } /* form fields */ [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select { background-color: #ffffff !important; color: #111827 !important; border-color: #d1d5db !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #9ca3af !important; } /* white hover surfaces become subtle grey on light */ [data-theme="light"] .hover\:bg-white\/5:hover, [data-theme="light"] .hover\:bg-white\/10:hover { background-color: #f3f4f6 !important; } /* keep the sidebar + sticky top header DARK (the requested "dark aspect") */ [data-theme="light"] #portal-sidebar, [data-theme="light"] header.sticky { background-color: #0F1115 !important; border-color: rgba(255,255,255,0.06) !important; } [data-theme="light"] #portal-sidebar .bg-secondary\/70 { background-color: transparent !important; } [data-theme="light"] #portal-sidebar .text-white, [data-theme="light"] header.sticky .text-white, [data-theme="light"] #portal-sidebar [data-biz-name] { color: #ffffff !important; } [data-theme="light"] #portal-sidebar .text-gray-400, [data-theme="light"] header.sticky .text-gray-400, [data-theme="light"] header.sticky .text-gray-500 { color: #9ca3af !important; } [data-theme="light"] #portal-sidebar .border-white\/5, [data-theme="light"] header.sticky .border-white\/5 { border-color: rgba(255,255,255,0.08) !important; } /* accent in light stays the brand lime but with dark text on buttons (already the case) */