/** * Dark mode overrides for Tailwind arbitrary utility classes used across the site. * Activated by class="dark" on — no per-page template changes required. */ html:not(.dark) { color-scheme: light; } html.dark { color-scheme: dark; } html.dark body { background-color: #0b1420 !important; color: #e2e8f0 !important; } /* Backgrounds */ html.dark .bg-white { background-color: #1a2433 !important; } html.dark .bg-white\/95 { background-color: rgb(26 36 51 / 0.95) !important; } html.dark .bg-\[\#F5F8FC\] { background-color: #121c2a !important; } html.dark .bg-\[\#E8F1FC\] { background-color: #1a3050 !important; } html.dark .hover\:bg-\[\#F5F8FC\]:hover { background-color: #1e2d42 !important; } html.dark .hover\:bg-\[\#FAFBFD\]:hover { background-color: #1e2d42 !important; } html.dark .focus\:bg-white:focus { background-color: #243044 !important; } /* Gradients */ html.dark .from-\[\#F5F8FC\] { --tw-gradient-from: #121c2a var(--tw-gradient-from-position); --tw-gradient-to: rgb(18 28 42 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html.dark .to-white { --tw-gradient-to: #0b1420 var(--tw-gradient-to-position); } /* Text */ html.dark .text-\[\#0F1E33\] { color: #e2e8f0 !important; } html.dark .text-\[\#5B6472\] { color: #94a3b8 !important; } html.dark .hover\:text-\[\#0F1E33\]:hover { color: #e2e8f0 !important; } html.dark .hover\:text-\[\#1A5FBB\]:hover { color: #5eb3ff !important; } /* Borders */ html.dark .border-\[\#E2E8F0\] { border-color: #2a3648 !important; } html.dark .hover\:border-\[\#1A5FBB\]:hover { border-color: #1a5fbb !important; } /* Form fields without explicit Tailwind bg-* (login, checkboxes, etc.) */ html:not(.dark) input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']), html:not(.dark) textarea, html:not(.dark) select { background-color: #ffffff; } html:not(.dark) input[type='checkbox'], html:not(.dark) input[type='radio'] { appearance: none; -webkit-appearance: none; width: 1rem; height: 1rem; flex-shrink: 0; border: 1px solid #e2e8f0; background-color: #f5f8fc; cursor: pointer; vertical-align: middle; } html:not(.dark) input[type='checkbox'] { border-radius: 0.25rem; } html:not(.dark) input[type='radio'] { border-radius: 9999px; } html:not(.dark) input[type='checkbox']:checked { background-color: #1a5fbb; border-color: #1a5fbb; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } html:not(.dark) input[type='radio']:checked { background-color: #f5f8fc; border-color: #1a5fbb; background-image: radial-gradient(circle, #1a5fbb 45%, transparent 50%); } html:not(.dark) input[type='checkbox']:focus-visible, html:not(.dark) input[type='radio']:focus-visible { outline: 2px solid rgba(26, 95, 187, 0.3); outline-offset: 2px; border-color: #1a5fbb; } /* Checkboxes & radios — match form field palette in dark mode (native controls stay gray/brown) */ html.dark input[type='checkbox'], html.dark input[type='radio'] { appearance: none; -webkit-appearance: none; width: 1rem; height: 1rem; flex-shrink: 0; border: 1px solid #2a3648; background-color: #121c2a; cursor: pointer; vertical-align: middle; } html.dark input[type='checkbox'] { border-radius: 0.25rem; } html.dark input[type='radio'] { border-radius: 9999px; } html.dark input[type='checkbox']:checked { background-color: #1a5fbb; border-color: #1a5fbb; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } html.dark input[type='radio']:checked { background-color: #121c2a; border-color: #1a5fbb; background-image: radial-gradient(circle, #1a5fbb 45%, transparent 50%); } html.dark input[type='checkbox']:focus-visible, html.dark input[type='radio']:focus-visible { outline: 2px solid rgba(26, 95, 187, 0.35); outline-offset: 2px; } /* Form fields (shared inputClass strings) */ html.dark input, html.dark textarea, html.dark select { color: #e2e8f0; } html.dark input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']):not([class*='bg-']), html.dark textarea:not([class*='bg-']), html.dark select:not([class*='bg-']) { background-color: #243044; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; } /* Error states */ html.dark .bg-red-50 { background-color: #3f1d24 !important; } html.dark .border-red-200 { border-color: #7f1d1d !important; } html.dark .text-red-800 { color: #fecaca !important; } html.dark .text-red-600 { color: #f87171 !important; } html.dark .border-red-400 { border-color: #f87171 !important; } /* Decorative mock UI on home page */ html.dark .opacity-40 { opacity: 0.2; } /* Footer is already dark — deepen slightly for contrast with page */ html.dark footer.bg-\[\#0F1E33\] { background-color: #070d14 !important; } /* Theme toggle button */ html.dark [data-theme-toggle] { color: #94a3b8; } html.dark [data-theme-toggle]:hover { background-color: #1e2d42 !important; color: #e2e8f0 !important; } html.dark [data-mobile-menu-toggle] { color: #e2e8f0 !important; }