/* =================================================================== Dark mode override layer ------------------------------------------------------------------- The site ships a pre-compiled Tailwind build that uses raw utility classes (bg-white, text-gray-900, …) without dark: variants. Rather than re-author every page, this stylesheet remaps the common light utilities to dark equivalents whenever carries .dark. Loaded AFTER tailwind.min.css; selectors are prefixed with `html.dark` so they out-specify the single-class utilities and win without !important (except where inline styles must be beaten). Theme palette (slate/zinc blend): base bg .......... #0f1623 (body / page) panel ............ #1a2333 (cards, nav, surfaces = bg-white) panel-raised ..... #232f42 (bg-gray-100 / hover) border ........... #2c3a52 text strong ...... #f1f5f9 text muted ....... #b6c2d4 text faint ....... #8595ac =================================================================== */ html.dark { color-scheme: dark; background-color: #0f1623; } html.dark body { background-color: #0f1623; color: #e5ebf3; } /* ── Surfaces ───────────────────────────────────────────────────── */ html.dark .bg-white { background-color: #1a2333; } html.dark .bg-gray-50 { background-color: #0f1623; } html.dark .bg-gray-100 { background-color: #232f42; } html.dark .bg-gray-200 { background-color: #2c3a52; } html.dark .bg-gray-300 { background-color: #34465f; } html.dark .bg-gray-800, html.dark .bg-gray-900, html.dark .bg-gray-950 { background-color: #0a0f1a; } /* Hover surface shifts */ html.dark .hover\:bg-gray-50:hover { background-color: #232f42; } html.dark .hover\:bg-gray-100:hover { background-color: #2c3a52; } html.dark .hover\:bg-gray-200:hover { background-color: #34465f; } html.dark .hover\:bg-white:hover { background-color: #232f42; } /* ── Text ───────────────────────────────────────────────────────── */ html.dark .text-gray-900, html.dark .text-gray-800 { color: #f1f5f9; } html.dark .text-gray-700, html.dark .text-gray-600 { color: #b6c2d4; } html.dark .text-gray-500, html.dark .text-gray-400 { color: #8595ac; } html.dark .text-gray-300 { color: #6b7a93; } /* text-white stays white; black text needs lifting */ html.dark .text-black { color: #f1f5f9; } html.dark .hover\:text-gray-900:hover { color: #f1f5f9; } html.dark .hover\:text-gray-700:hover { color: #cdd7e6; } /* ── Borders / dividers / rings ─────────────────────────────────── */ html.dark .border-gray-50, html.dark .border-gray-100, html.dark .border-gray-200 { border-color: #2c3a52; } html.dark .border-gray-300 { border-color: #3a4a66; } html.dark .border-white { border-color: #2c3a52; } html.dark .divide-gray-50 > * + *, html.dark .divide-gray-100 > * + * { border-color: #2c3a52; } html.dark .ring-white { --tw-ring-color: #1a2333; } html.dark .hover\:border-gray-300:hover { border-color: #46587a; } /* ── Soft accent tints (bg-*-50 / bg-*-100) ─────────────────────── */ html.dark .bg-red-50, html.dark .bg-red-100 { background-color: rgba(220,38,38,.16); } html.dark .bg-green-50, html.dark .bg-green-100 { background-color: rgba(5,150,105,.16); } html.dark .bg-blue-50, html.dark .bg-blue-100 { background-color: rgba(37,99,235,.18); } html.dark .bg-yellow-50 { background-color: rgba(234,179,8,.16); } html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: rgba(249,115,22,.16); } html.dark .bg-purple-50, html.dark .bg-purple-100 { background-color: rgba(147,51,234,.18); } html.dark .bg-indigo-50 { background-color: rgba(79,70,229,.18); } html.dark .bg-pink-50 { background-color: rgba(219,39,119,.16); } /* Darken mid-tone accent text so it stays legible on dark tints */ html.dark .text-yellow-600 { color: #fbbf24; } html.dark .text-yellow-700 { color: #fcd34d; } html.dark .text-green-700 { color: #34d399; } html.dark .text-orange-700 { color: #fb923c; } html.dark .text-gray-700.bg-gray-100 { color: #cdd7e6; } /* ── Form fields ────────────────────────────────────────────────── */ html.dark input, html.dark select, html.dark textarea { background-color: #131c2b; border-color: #2c3a52; color: #e5ebf3; } html.dark input::placeholder, html.dark textarea::placeholder { color: #6b7a93; } html.dark .form-input:focus { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.18); } /* keep checkbox / radio / range accent visible */ html.dark input[type="checkbox"], html.dark input[type="radio"] { accent-color: #f87171; } /* ── Inline-style elements from head.php that need re-theming ───── */ html.dark { background-color: #0f1623 !important; } /* beats inline html{background:#f9fafb} */ html.dark .btn-secondary { border-color: #60a5fa; color: #93c5fd; } html.dark .btn-secondary:hover { background: #2563EB; color: #fff; } html.dark #ata-ptr { background: #1a2333; } html.dark #ata-ptr svg { color: #f87171; } html.dark .nav-link:hover { color: #f87171; } html.dark .nav-link.active::after { background: #f87171; } /* Shadows read as near-invisible on dark; deepen them */ html.dark .shadow-sm { box-shadow: 0 1px 4px rgba(0,0,0,.45); } html.dark .shadow, html.dark .shadow-md { box-shadow: 0 2px 10px rgba(0,0,0,.5); } html.dark .shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,.55); } html.dark .shadow-xl, html.dark .shadow-2xl { box-shadow: 0 16px 40px rgba(0,0,0,.6); } /* Gradient stops that resolve to gray (cards/sections) */ html.dark .from-gray-50 { --tw-gradient-from: #0f1623 var(--tw-gradient-from-position); } html.dark .from-gray-100 { --tw-gradient-from: #232f42 var(--tw-gradient-from-position); } html.dark .to-white { --tw-gradient-to: #1a2333 var(--tw-gradient-to-position); } html.dark .to-gray-50 { --tw-gradient-to: #0f1623 var(--tw-gradient-to-position); } /* Logo / imagery: keep as-is, but knock back pure-white photo edges a touch */ html.dark img { filter: brightness(.96); } html.dark img[src*="Logo"], html.dark img[alt*="ATA"] { filter: none; } /* ── Header logo: swap colour ⇄ white variant per theme ─────────── */ .site-logo.logo-dark { display: none; } html.dark .site-logo.logo-light { display: none; } html.dark .site-logo.logo-dark { display: inline-block; filter: none; } /* ── Partner logos ────────────────────────────────────────────────── Most partner artwork is dark/black on transparent, so it vanishes on a dark surface and there are no white variants. Sit each logo on a light "chip" so the original colours stay intact and readable. */ html.dark .partner-logo { background: #eef2f7; padding: .45rem .6rem; border-radius: .6rem; opacity: 1 !important; filter: none; box-shadow: 0 1px 3px rgba(0,0,0,.35); } /* ── Article body (.prose-ata defines hard-coded light-theme colours) ── */ html.dark .prose-ata { color: #c3cdda; } html.dark .prose-ata h2, html.dark .prose-ata h3, html.dark .prose-ata strong { color: #f1f5f9; } html.dark .prose-ata blockquote { color: #9aa7b8; } html.dark .prose-ata a { color: #fb923c; } html.dark .prose-ata a:hover { color: #fdba74; } html.dark .prose-ata hr { border-color: #2c3a52; } html.dark .prose-ata code, html.dark .prose-ata pre { background: #131c2b; color: #e5ebf3; } /* Smooth the switch so toggling doesn't flash harshly */ html.dark body, html.dark .bg-white, html.dark .bg-gray-50, html.dark .bg-gray-100 { transition: background-color .25s ease, border-color .25s ease, color .25s ease; } /* =================================================================== Theme toggle control + discoverability hint =================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; color: #4b5563; background: transparent; cursor: pointer; transition: background-color .2s ease, color .2s ease; flex-shrink: 0; position: relative; } .theme-toggle:hover { background: #f3f4f6; color: #111827; } html.dark .theme-toggle { color: #b6c2d4; } html.dark .theme-toggle:hover { background: #232f42; color: #f1f5f9; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html.dark .theme-toggle .icon-sun { display: block; } html.dark .theme-toggle .icon-moon { display: none; } /* Mobile drawer toggle row */ .theme-toggle-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .85rem 1rem; border-radius: .75rem; background: #f9fafb; color: #374151; font-weight: 500; font-size: 1rem; } html.dark .theme-toggle-row { background: #232f42; color: #e5ebf3; } .theme-toggle-row .switch { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #d1d5db; transition: background-color .25s ease; flex-shrink: 0; } html.dark .theme-toggle-row .switch { background: #f87171; } .theme-toggle-row .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s ease; box-shadow: 0 1px 3px rgba(0,0,0,.3); } html.dark .theme-toggle-row .switch::after { transform: translateX(20px); } .theme-toggle-row .label-wrap { display: flex; align-items: center; gap: .6rem; } /* Footer theme toggle — discreet pill in the (always-dark) footer */ .theme-toggle-footer { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #9ca3af; font-size: .8125rem; font-weight: 500; font-family: inherit; padding: .45rem .85rem; border-radius: .6rem; transition: color .2s ease, border-color .2s ease, background-color .2s ease; } .theme-toggle-footer:hover { color: #fff; border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .06); } .theme-toggle-footer .icon-sun { display: none; } .theme-toggle-footer .icon-moon { display: block; } html.dark .theme-toggle-footer .icon-sun { display: block; } html.dark .theme-toggle-footer .icon-moon { display: none; } .theme-toggle-footer .tt-label-light { display: none; } html.dark .theme-toggle-footer .tt-label-dark { display: none; } html.dark .theme-toggle-footer .tt-label-light { display: inline; }