/* Theme custom properties (advisory P5, D5). * * `:root` carries the technical-dark values — the site's original look, * copied EXACTLY from the inline navbar CSS that used to live in * base.html. The default render must stay pixel-identical: change these * eight values and you have changed the stock site. * * `[data-theme="technical-light"]` overrides BACKGROUNDS (plus the * foreground sitting directly on each overridden background, without * which a light navbar would render white-on-white). The attribute is * stamped on from `brand.theme`; only org branding (P6) ever sets * it to anything but technical-dark. Accent greens/golds are shared * brand constants and stay literal in navbar.css. */ :root { --theme-nav-bg: linear-gradient(90deg, #1a1a1a, #2a2a2a); --theme-nav-fg: #ffffff; --theme-surface-bg: #2a2a2a; --theme-surface-border: #444; --theme-surface-fg: #ffffff; } [data-theme="technical-light"] { --theme-nav-bg: linear-gradient(90deg, #f7f7f7, #e9e9e9); --theme-nav-fg: #1a1a1a; --theme-surface-bg: #ffffff; --theme-surface-border: #cccccc; --theme-surface-fg: #1a1a1a; } /* Light-theme page surfaces (owner rulings 2026-08-09). This sheet loads * AFTER styles.css, so these direct rules override its dark literals. * The wallpaper swap keeps the dark theme's scoping — it rides the * paper-mode body, whose dark wallpaper it replaces. ⚠ ASSET: * static/images/paper_mode_wallpaper_light.png (user-supplied). */ /* LIVE mode on the light theme: off-white page — lighter than the * header/footer chrome (#e9e9e9) so the frame still reads as a frame. * Paper mode's more specific rule below still wins and carries the * light wallpaper. */ body[data-theme="technical-light"] { background-color: #f4f4f4; } body[data-theme="technical-light"].paper-mode-body { background-color: #f5f5f5; /* fallback behind wallpaper */ background-image: url("../../images/paper_mode_wallpaper_light.402b8648dedb.png"); } /* Footer inverts with the theme: off-white like the navbar's light * gradient, black text (the brand-green links stay). */ body[data-theme="technical-light"] footer { background-color: #e9e9e9; color: #000000; } /* Page titles invert to black — body-level headings inherit the dark * theme's white body color and vanish on a light background. Scoped to * headings that sit DIRECTLY on the page: cards, modals, and the footer * set their own colors and are untouched. */ body[data-theme="technical-light"] h1, body[data-theme="technical-light"] h2, body[data-theme="technical-light"] h3, body[data-theme="technical-light"] h4, body[data-theme="technical-light"] h5, body[data-theme="technical-light"] h6 { color: #000000; } body[data-theme="technical-light"] .card h1, body[data-theme="technical-light"] .card h2, body[data-theme="technical-light"] .card h3, body[data-theme="technical-light"] .card h4, body[data-theme="technical-light"] .card h5, body[data-theme="technical-light"] .card h6, body[data-theme="technical-light"] .modal h1, body[data-theme="technical-light"] .modal h2, body[data-theme="technical-light"] .modal h3, body[data-theme="technical-light"] .modal h4, body[data-theme="technical-light"] .modal h5, body[data-theme="technical-light"] .modal h6, body[data-theme="technical-light"] footer h1, body[data-theme="technical-light"] footer h2, body[data-theme="technical-light"] footer h3 { color: inherit; }