/* ============================================================ Brand override — replace the orange `accent` palette with teal #0094bf. Applies in both light and dark mode. No webpack rebuild needed; this just shadows the compiled Tailwind classes. ============================================================ */ .bg-accent-50 { background-color: #E6F6FB !important; } .bg-accent-100 { background-color: #C4EAF3 !important; } .bg-accent-200 { background-color: #8FD7E7 !important; } .bg-accent-300 { background-color: #4FC0DA !important; } .bg-accent-400 { background-color: #1AABD8 !important; } .bg-accent-500 { background-color: #0094BF !important; } .bg-accent-600 { background-color: #007BA3 !important; } .bg-accent-700 { background-color: #006184 !important; } .hover\:bg-accent-400:hover { background-color: #1AABD8 !important; } .hover\:bg-accent-500:hover { background-color: #0094BF !important; } .hover\:bg-accent-600:hover { background-color: #007BA3 !important; } .hover\:bg-accent-700:hover { background-color: #006184 !important; } .text-accent-500 { color: #0094BF !important; } .text-accent-600 { color: #007BA3 !important; } .text-accent-700 { color: #006184 !important; } .hover\:text-accent-600:hover { color: #007BA3 !important; } .border-accent-500 { border-color: #0094BF !important; } .border-accent-600 { border-color: #007BA3 !important; } .ring-accent-500 { --tw-ring-color: #0094BF !important; } .focus\:ring-accent-500:focus { --tw-ring-color: #0094BF !important; } /* CTA glow shadow uses the orange colour-stops — replace with teal */ .shadow-cta { box-shadow: 0 8px 20px -6px rgba(0, 148, 191, 0.45) !important; } /* ============================================================ Dark theme — applied via `class="theme-dark"` on . The class is set by an inline script in layouts/marketing.blade.php based on (1) localStorage preference or (2) OS prefers-color-scheme. The toggle button in partials/marketing-nav.blade.php flips the class and persists the choice. ============================================================ */ html.theme-dark body { background-color: #0F172A !important; color: #E2E8F0 !important; } /* Surfaces & whites */ html.theme-dark .bg-white { background-color: #1E293B !important; } html.theme-dark .bg-surface { background-color: #0F172A !important; } html.theme-dark .bg-surface-alt { background-color: #1E293B !important; } /* Ink scale (page chrome) */ html.theme-dark .bg-ink-50 { background-color: #1E293B !important; } html.theme-dark .bg-ink-100 { background-color: #334155 !important; } html.theme-dark .bg-ink-200 { background-color: #475569 !important; } html.theme-dark .bg-ink-800 { background-color: #0B1220 !important; } html.theme-dark .bg-ink-900 { background-color: #060A14 !important; } /* Text */ html.theme-dark .text-white { color: #F8FAFC !important; } html.theme-dark .text-ink-900 { color: #F8FAFC !important; } html.theme-dark .text-ink-800 { color: #F1F5F9 !important; } html.theme-dark .text-ink-700 { color: #E2E8F0 !important; } html.theme-dark .text-ink-600 { color: #CBD5E1 !important; } html.theme-dark .text-ink-500 { color: #94A3B8 !important; } html.theme-dark .text-ink-400 { color: #64748B !important; } /* Borders */ html.theme-dark .border-white { border-color: #1E293B !important; } html.theme-dark .border-ink-100 { border-color: #334155 !important; } html.theme-dark .border-ink-200 { border-color: #475569 !important; } html.theme-dark .border-ink-300 { border-color: #64748B !important; } html.theme-dark .border-t, html.theme-dark .border-b, html.theme-dark .border-l, html.theme-dark .border-r, html.theme-dark .border { border-color: #334155 !important; } /* Common hover states */ html.theme-dark .hover\:bg-white:hover { background-color: #334155 !important; } html.theme-dark .hover\:bg-ink-50:hover { background-color: #1E293B !important; } html.theme-dark .hover\:bg-ink-100:hover { background-color: #334155 !important; } html.theme-dark .hover\:text-ink-900:hover { color: #F8FAFC !important; } html.theme-dark .hover\:text-ink-800:hover { color: #F1F5F9 !important; } html.theme-dark .hover\:text-ink-700:hover { color: #E2E8F0 !important; } /* Brand tints used as soft backgrounds — mute them */ html.theme-dark .bg-brand-50 { background-color: #0B1F3A !important; } html.theme-dark .bg-brand-100 { background-color: #122A4D !important; } html.theme-dark .bg-accent-50 { background-color: #052430 !important; } html.theme-dark .bg-accent-100 { background-color: #082F3D !important; } /* Gradients — kill light gradients and fall back to a flat dark surface */ html.theme-dark [class*="bg-gradient-to-"] { background-image: none !important; background-color: #0F172A !important; } /* Brand pill text on dark needs lighter brand colours */ html.theme-dark .text-brand-900 { color: #BFDBFE !important; } html.theme-dark .text-brand-800 { color: #BFDBFE !important; } html.theme-dark .text-brand-700 { color: #93C5FD !important; } html.theme-dark .text-brand-600 { color: #60A5FA !important; } html.theme-dark .text-brand-500 { color: #3B82F6 !important; } /* Info-alert pattern (bg-brand-50 + border-brand-100 + text-brand-800) is used for "This information will be displayed..." style banners. The bg/border get bumped to mid-navy in dark mode so the lighter text stands off the surface. */ html.theme-dark .border-brand-100 { border-color: #1E3A8A !important; } html.theme-dark .border-brand-200 { border-color: #1E40AF !important; } /* Section/card whites a notch above body */ html.theme-dark section.bg-white, html.theme-dark .bg-white { background-color: #1E293B !important; } /* Shadows toned down on dark */ html.theme-dark .shadow-card { box-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.45) !important; } html.theme-dark .shadow-card-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.45) !important; } html.theme-dark .shadow-hero { box-shadow: 0 30px 60px -15px rgba(0,0,0,0.6), 0 18px 36px -18px rgba(37,99,235,0.25) !important; } /* Inputs / forms */ html.theme-dark input, html.theme-dark select, html.theme-dark textarea { background-color: #1E293B !important; color: #F1F5F9 !important; border-color: #475569 !important; } html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: #94A3B8 !important; } /* Logo swap — invert dark logos so they're visible on dark backgrounds */ html.theme-dark img[src*="logo-black"] { filter: brightness(0) invert(1); } /* Tone images slightly so they don't blast against dark */ html.theme-dark img:not([src*="logo"]) { filter: brightness(0.92); } /* ============================================================ Theme toggle button — sits in the marketing nav, left of Log in. ============================================================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; color: #475569; background: transparent; border: 1px solid transparent; cursor: pointer; transition: background-color 150ms, color 150ms, border-color 150ms; } .theme-toggle:hover { background-color: #F1F5F9; color: #0F172A; } .theme-toggle:focus { outline: none; border-color: #0094BF; } html.theme-dark .theme-toggle { color: #CBD5E1; } html.theme-dark .theme-toggle:hover { background-color: #334155; color: #F8FAFC; } html.theme-dark .theme-toggle .icon-moon { display: none; } html:not(.theme-dark) .theme-toggle .icon-sun { display: none; } .theme-toggle svg { width: 1.125rem; height: 1.125rem; }