/* * cereview.com / CE Review — dark-mode-only brand stylesheet. * Rewritten 2026-08-25, replacing the earlier light-mode palette entirely * (this is not an additive patch — see cereview_darkmode.md for why). * * Design brief this implements: one color mode only (no light/dark toggle, * no `prefers-color-scheme`), neutral graphite/gray surfaces — NOT the navy * or crimson from the original brand palette darkened, which is exactly * what was rejected ("don't make the background bluish or reddish"). * Reference points: macOS dark mode, Reddit dark, Claude desktop dark. * * Approved in the mockup shown to and confirmed by the site owner * (darkmode_mockup.html) with every pairing below checked against WCAG * contrast ratios — see cereview_darkmode.md for the numbers. * * Loaded in templates/base.html AFTER Bootstrap, so these rules win on * equal specificity. base.html also sets ``, * which switches Bootstrap's own components (tables, dropdowns, forms, * subtle alert/badge variants, etc.) into their dark-mode defaults as a * safety net for anything not explicitly overridden below. */ :root { /* Surfaces, darkest to lightest */ --bg-canvas: #121212; /* page background */ --bg-surface: #18181a; /* navbar, footer */ --bg-card: #1c1c1e; /* content panels, cards, the old .bg-light hero */ --border: #2c2c2e; /* Text, brightest to dimmest — --text-faint is the AA contrast floor (4.5:1 against --bg-canvas); don't introduce anything dimmer. */ --text-primary: #e8e8ea; /* 15.3:1 vs canvas */ --text-secondary: #a8a8ad; /* 7.9:1 vs canvas */ --text-faint: #7c7c81; /* 4.5:1 vs canvas */ /* Interactive blue — the everyday "this is clickable" color */ --btn-blue: #4169e1; /* filled button backgrounds, ~3.9:1 vs canvas */ --btn-blue-hover: #3457c4; --link-blue: #7b9cf5; /* text links directly on canvas, ~7.1:1 */ --link-blue-hover: #9cb4f8; /* Accent crimson, reworked for dark — the original #990000 drops to ~2.1:1 on this background and is unusable as a CTA fill here. Reserved for the single primary call-to-action per page, same as before: use sparingly so it keeps meaning something. */ --cta-red: #e8503f; /* ~5.0:1 vs canvas */ --cta-red-hover: #c93f30; /* Heading colors (2026-08-27, Jhun's spec) — h1/h2 reuse the two brand accents already defined above rather than introducing near-duplicate hexes; h3/h4/h5 were left to our judgment ("I give you the freedom for it"), picked to sit comfortably between the warm h1 and cool h2 without competing with either, all checked against --bg-canvas/ --bg-card for AA-ish legibility at heading weight/size. Scoped to actual

-

tags in static/css/richtext_content.css and the Article title — see that file's own "Headings" section for why a global `h1 { }` etc. here is safe (no other template renders a bare heading tag; everything else uses Bootstrap utility classes on divs/spans instead). */ --heading-h1: var(--cta-red); --heading-h2: var(--link-blue); --heading-h3: #4fd1c5; /* teal */ --heading-h4: #f0b429; /* amber */ --heading-h5: #c792ea; /* soft violet */ } /* ---- Foundation ------------------------------------------------------- */ body { background-color: var(--bg-canvas); color: var(--text-primary); } /* ---- Headings ----------------------------------------------------------- Applies site-wide (not scoped to .rtf-content) — the Article page's own

title (templates/content/article_detail.html) sits outside the .rtf-content wrapper, and this file is only loaded on public-site pages plus the two standalone Question Bank preview pages (never in Django admin itself), where the only bare heading tags in use today are that Article

and the auto-generated

Situation:

/

Solution:

headings (question_preview.html / situation_preview.html) — plus whatever h2-h5 an author puts inside a Filtered/Full HTML rich-text field (see FILTERED_HTML_ALLOWED_TAGS in cereview/settings/base.py). Nothing else on the site renders a real

-

, so this can't accidentally recolor Bootstrap chrome. */ h1 { color: var(--heading-h1); } h2 { color: var(--heading-h2); } h3 { color: var(--heading-h3); } h4 { color: var(--heading-h4); } h5 { color: var(--heading-h5); } a { color: var(--link-blue); } a:hover, a:focus { color: var(--link-blue-hover); } /* Bootstrap's own .text-muted carries !important from its own stylesheet at a similar specificity; its default gray reads too dim against --bg-canvas, so bump it to --text-secondary explicitly. */ .text-muted { color: var(--text-secondary) !important; } /* ---- Footer copyright line (2026-08-27, Jhun's request: "a touch of color", kept consistent with the rest of the palette) — the line stays mostly muted, with just the site name picking up the everyday interactive blue so it doesn't compete with --cta-red anywhere near the nav/hero CTAs. */ .footer-copyright { color: var(--text-faint); } .footer-copyright .footer-brand { color: var(--link-blue); font-weight: 600; } /* ---- Nav bar + footer -------------------------------------------------- Both use Bootstrap's .bg-dark utility in base.html. Deliberately mapped to the neutral --bg-surface token, NOT the old brand-ink navy — a navy-tinted background is exactly the "bluish" look that was rejected. */ .bg-dark { background-color: var(--bg-surface) !important; } .navbar-brand { font-weight: 600; color: var(--text-primary); } .navbar-brand:hover { color: var(--text-primary); } /* Bootstrap's .navbar-dark .navbar-nav .nav-link (three classes, so it outranks the plain `a { color: ... }` above regardless of load order) defaults to a dim rgba(255,255,255,.55) — too faint on --bg-surface. --text-secondary gives a legible-but-quiet default, full --text-primary on hover/focus/the active page for feedback. */ .navbar-dark .navbar-nav .nav-link { color: var(--text-secondary); } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link.active { color: var(--text-primary); } /* The old white-box hero on the homepage (Bootstrap's .bg-light utility) — overriding the utility class directly means home.html's markup didn't need to change. Anywhere else .bg-light shows up gets the same treatment: a raised card, not a glaring white panel. */ .bg-light { background-color: var(--bg-card) !important; color: var(--text-primary); } /* ---- Buttons ------------------------------------------------------------ Ordinary "primary" actions (login, form submits, exam navigation, etc.) use the everyday interactive blue; .btn-cta stays the one place crimson is allowed as a background — the single most important action on a page (homepage's "Take a Practice Exam", the Google sign-in button). */ .btn-primary { background-color: var(--btn-blue); border-color: var(--btn-blue); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--btn-blue-hover) !important; border-color: var(--btn-blue-hover) !important; } .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border); } .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active { background-color: var(--bg-surface) !important; border-color: var(--text-secondary) !important; color: var(--text-primary) !important; } .btn-cta { background-color: var(--cta-red); border-color: var(--cta-red); color: #fff; } .btn-cta:hover, .btn-cta:focus, .btn-cta:active { background-color: var(--cta-red-hover) !important; border-color: var(--cta-red-hover) !important; color: #fff !important; } /* ---- Cards, alerts, tables, forms, dropdowns, list groups --------------- Bootstrap's data-bs-theme="dark" (set on in base.html) already gets most of these into reasonable dark defaults; these rules pin them to the exact approved tokens instead of Bootstrap's own dark grays, so everything reads as one consistent surface system. */ .card { background-color: var(--bg-card); border-color: var(--border); color: var(--text-primary); } .card-header { background-color: transparent; border-bottom-color: var(--border); } .alert-info { background-color: rgba(65, 105, 225, 0.14); border-color: rgba(123, 156, 245, 0.35); color: var(--text-primary); } .alert-warning { background-color: rgba(232, 160, 64, 0.16); border-color: rgba(232, 160, 64, 0.4); color: var(--text-primary); } .alert-danger { background-color: rgba(232, 80, 63, 0.14); border-color: rgba(232, 80, 63, 0.4); color: var(--text-primary); } .alert-success { background-color: rgba(76, 175, 100, 0.14); border-color: rgba(76, 175, 100, 0.4); color: var(--text-primary); } table { color: var(--text-primary); border-color: var(--border); } .table { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border); } .form-control, .form-select { background-color: var(--bg-card); border-color: var(--border); color: var(--text-primary); } .form-control::placeholder { color: var(--text-faint); } .form-control:focus, .form-select:focus { background-color: var(--bg-card); border-color: var(--btn-blue); color: var(--text-primary); box-shadow: 0 0 0 0.25rem rgba(65, 105, 225, 0.25); } .form-control:disabled, .form-select:disabled { background-color: var(--bg-surface); color: var(--text-faint); } .dropdown-menu { background-color: var(--bg-card); border-color: var(--border); } .dropdown-item { color: var(--text-primary); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--bg-surface); color: var(--text-primary); } .list-group-item { background-color: var(--bg-card); border-color: var(--border); color: var(--text-primary); } a.list-group-item:hover, a.list-group-item:focus, label.list-group-item:hover { background-color: var(--bg-surface); color: var(--text-primary); } /* core.editor_widget.BUHtmlWidget (static/css/admin/bu_editor.css), used outside the admin for the first time by accounts.forms.ProfileForm's Bio field (2026-08-29 profile redesign). That stylesheet reads Django-admin CSS variables (--border-color, --darkened-bg, --body-bg, --body-fg, --selected-bg) with light-mode fallbacks, which are simply absent on the front end — remapping them to this file's own dark tokens here (rather than editing the shared admin stylesheet, which would touch every admin ModelAdmin using the same widget) keeps the toolbar readable on this site's dark-only theme. */ .bu-editor { --border-color: var(--border); --darkened-bg: var(--bg-surface); --body-bg: var(--bg-card); --body-fg: var(--text-primary); --selected-bg: var(--bg-surface); }