/* * Dark mode (client task 15). The vendored Bootstrap predates data-bs-theme, * so this is a hand-written override sheet scoped under html.theme-dark — the * class an inline script sets from localStorage BEFORE first paint, so * a dark-mode visitor never sees a white flash. Loaded unconditionally; every * rule is inert without the class. * * The banner stays #201e1d in both modes (it is already dark by design), and * the brand red (#ec3013) is shared. Charts and the world map keep their own * colors — recoloring canvas/SVG output is not worth the drift. */ html.theme-dark body, html.theme-dark .main-content-wrapper { background-color: #141312; color: #d9d6d4; } html.theme-dark .main-container { background-color: #1c1a19; } /* Cards and their headers */ html.theme-dark .card { background-color: #242220; color: #d9d6d4; border-color: #38352f; } html.theme-dark .card-header { background-color: #242220; border-color: #38352f; color: #e6e3e0; } html.theme-dark .card-title, html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4, html.theme-dark h5, html.theme-dark h6 { color: #e6e3e0; } /* The second (menu) row of the header */ html.theme-dark .topnav { background-color: #201e1d; border-color: #38352f; } html.theme-dark .topnav .nav-link, html.theme-dark .topnav .nav-link i { color: #d9d6d4; } /* Hover red like light mode, in the brightened dark-readable red (see the link-hover note at the end of this sheet). */ html.theme-dark .topnav .nav-link:hover, html.theme-dark .topnav .nav-link:focus { color: #ff7a5c; } /* Text utilities that hardcode light-mode grays */ html.theme-dark .text-muted { color: #98928d !important; } html.theme-dark .text-dark { color: #d9d6d4 !important; } html.theme-dark .bg-light { background-color: #2c2a27 !important; } html.theme-dark .border, html.theme-dark .border-top, html.theme-dark .border-bottom { border-color: #38352f !important; } /* Tables (incl. DataTables) */ html.theme-dark .table { color: #d9d6d4; border-color: #38352f; --bs-table-bg: transparent; --bs-table-color: #d9d6d4; --bs-table-border-color: #38352f; --bs-table-striped-bg: #262421; --bs-table-striped-color: #d9d6d4; } html.theme-dark .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-color: #38352f; } html.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #262421; color: #d9d6d4; } html.theme-dark .dataTables_wrapper, html.theme-dark .dataTables_info, html.theme-dark .dataTables_length, html.theme-dark .dataTables_filter { color: #d9d6d4; } /* Forms */ html.theme-dark .form-control, html.theme-dark .form-select, html.theme-dark textarea, html.theme-dark input[type="search"] { background-color: #2c2a27; border-color: #45413b; color: #e6e3e0; } html.theme-dark .form-control::placeholder { color: #8a847e; } html.theme-dark .form-control:focus, html.theme-dark .form-select:focus { background-color: #2c2a27; color: #e6e3e0; border-color: #ec3013; box-shadow: 0 0 0 0.25rem rgba(236, 48, 19, 0.2); } html.theme-dark .input-group-text { background-color: #2c2a27; border-color: #45413b; color: #d9d6d4; } /* Dropdowns, modals, alerts */ html.theme-dark .dropdown-menu { background-color: #242220; border-color: #45413b; color: #d9d6d4; } html.theme-dark .dropdown-item { color: #d9d6d4; } html.theme-dark .dropdown-item:hover { background-color: #2c2a27; color: #ffffff; } html.theme-dark .modal-content { background-color: #242220; color: #d9d6d4; } /* Buttons that are light-gray by design */ html.theme-dark .btn-outline-secondary { color: #b5b0ab; border-color: #5a554e; } html.theme-dark .btn-outline-secondary:hover { background-color: #38352f; color: #ffffff; } html.theme-dark .btn-light { background-color: #2c2a27; border-color: #45413b; color: #d9d6d4; } /* Badges on light backgrounds (project tags) */ html.theme-dark .badge.bg-light { background-color: #2c2a27 !important; color: #d9d6d4 !important; } /* Footer + flag borders + logo tiles: logos are mostly dark-on-transparent, give them a light backing plate so they stay readable. */ html.theme-dark footer { border-color: #38352f !important; color: #98928d; } html.theme-dark .card-img-top, html.theme-dark .org-carousel-item img, html.theme-dark .org-directory-logo { background-color: #f4f2f0; border-radius: 4px; } /* Breadcrumbs / pagination */ html.theme-dark .breadcrumb-item.active { color: #98928d; } html.theme-dark .page-link { background-color: #242220; border-color: #45413b; color: #d9d6d4; } /* Global red repaint (client feedback 2026-07-29), dark variant: #ec3013 sits under 4.5:1 on dark surfaces, so the link palette brightens — through the same Bootstrap variables style.css redefines, which recolors every variable-driven consumer (bare links, footer, live feed, pagination hover/focus) with no per-element rules. html.theme-dark outranks :root. */ html.theme-dark { --bs-link-color: #ff7a5c; --bs-link-color-rgb: 255, 122, 92; --bs-link-hover-color: #ff9b85; --bs-link-hover-color-rgb: 255, 155, 133; } /* Pagination: the dark .page-link recolor above wins the cascade tie against Bootstrap's hover/active rules, so both states need explicit dark values. */ html.theme-dark .page-link:hover { color: #ff9b85; } html.theme-dark .page-item.active .page-link { background-color: #ec3013; border-color: #ec3013; color: #ffffff; }