/*-------------------------------------------------------------- # Dark Mode -------------------------------------------------------------- Loaded after main.css. The theme in main.css is entirely driven by the CSS custom properties declared on :root and by the .light-background / .dark-background preset classes, so dark mode is mostly a matter of re-declaring those same variables under [data-theme="dark"]. The theme is set on by the inline script in base.html (before first paint, to avoid a flash of light theme) and toggled by static/js/theme.js. Bootstrap 5.3 components are handled separately by the data-bs-theme attribute set alongside it. The rules after the variable blocks patch the handful of places in main.css that hardcode a colour instead of using a variable. --------------------------------------------------------------*/ :root[data-theme="dark"] { --background-color: #05201f; --default-color: #c3d6d4; --heading-color: #f1f8f7; --accent-color: #12b5b1; --surface-color: #0c2c2b; --contrast-color: #ffffff; --nav-color: #c3d6d4; --nav-hover-color: #12b5b1; --nav-mobile-background-color: #0c2c2b; --nav-dropdown-background-color: #0c2c2b; --nav-dropdown-color: #c3d6d4; --nav-dropdown-hover-color: #12b5b1; /* Shadows are near-invisible on dark surfaces, so elevated elements get a hairline border instead (see the .card / header rules below). */ --dark-border-color: rgba(255, 255, 255, 0.08); color-scheme: dark; } /* Section presets. In the light theme .light-background is a tinted *lighter* panel; on dark it has to become a slightly *raised* panel instead, otherwise those sections stay near-white. */ :root[data-theme="dark"] .light-background { --background-color: #0a2726; --surface-color: #103433; } :root[data-theme="dark"] .dark-background { --background-color: #031413; --surface-color: #0c2c2b; } /*-------------------------------------------------------------- # Patches for hardcoded colours in main.css --------------------------------------------------------------*/ /* .btn-secondary hardcodes `background-color: white` */ :root[data-theme="dark"] .btn-secondary, :root[data-theme="dark"] .btn-secondary:hover { background-color: var(--surface-color); } /* Elevation: swap the invisible drop shadows for hairline borders. */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .header .header-container { border: 1px solid var(--dark-border-color); } :root[data-theme="dark"] .card { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35); } :root[data-theme="dark"] .header .header-container { box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.4); } /* Same problem for the floating nav panels: they sit on a page whose background is close to their own, and their shadow does not read. Breakpoints mirror the desktop/mobile navmenu blocks in main.css -- the mobile dropdown is a static inline list and deliberately keeps `box-shadow: none`, so it is left alone. */ @media (min-width: 1200px) { :root[data-theme="dark"] .navmenu .dropdown ul { border: 1px solid var(--dark-border-color); box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.45); } } @media (max-width: 1199px) { :root[data-theme="dark"] .navmenu > ul { border: 1px solid var(--dark-border-color); box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.45); } } /* Status pills on the features/compliance cards use fixed Bootstrap brand colours that fall below a readable contrast on a dark panel. */ :root[data-theme="dark"] .features-cards .compliance-card .status.in-progress { background-color: rgba(110, 168, 254, 0.16); color: #6ea8fe; } :root[data-theme="dark"] .features-cards .compliance-card .status.compliant { background-color: rgba(75, 194, 138, 0.16); color: #4bc28a; } :root[data-theme="dark"] .features-cards .compliance-card .status.planned { background-color: rgba(166, 175, 184, 0.16); color: #a6afb8; } /* Django messages / Bootstrap alerts sit inside
and pick up data-bs-theme, but the dismiss button needs the white variant. */ :root[data-theme="dark"] .alert .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /*-------------------------------------------------------------- # Theme toggle button --------------------------------------------------------------*/ /* The toggle and the Contact button are one unit in the header. Without this wrapper they are separate children of a `justify-content-between` row, which spreads them apart on desktop. */ .header .header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } /* main.css gives .btn-getstarted `margin: 0 0 0 30px` to separate it from the navmenu; inside the wrapper the gap above does that job instead. The mobile right margin is left intact - it clears the hamburger. */ .header .header-actions .btn-getstarted { margin-left: 0; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; padding: 0; border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%); border-radius: 50%; background-color: transparent; color: var(--default-color); font-size: 18px; line-height: 1; cursor: pointer; transition: color 0.3s, border-color 0.3s, background-color 0.3s; } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--accent-color); border-color: var(--accent-color); background-color: color-mix(in srgb, var(--accent-color), transparent 92%); } .theme-toggle:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; } .theme-toggle i { pointer-events: none; } /* main.css re-orders the header below 1200px as logo (1) / Contact (2) / navmenu (3). The Contact button now lives inside .header-actions, so the order has to move to the wrapper or it would fall back behind the nav. */ @media (max-width: 1200px) { .header .header-actions { order: 2; gap: 8px; } .theme-toggle { width: 34px; height: 34px; font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }