/* ========================================================================== black-theme.css — OLED "Black" theme layer Black is dark mode with a different palette, not a separate theme. The `black-mode` class is applied alongside `dark-mode` on and , so every existing `html.dark-mode` rule still matches and only the tokens move. Load order caveat: for the custom properties in the first block, order is irrelevant — they are declared on and `html.dark-mode.black-mode` outranks `html.dark-mode`, so no later sheet can steal them. That is NOT true for the element rules further down. Several stylesheets load after this file (modern-user-menu, mobile-menu-modern, widgets, footer, and all page-specific CSS), so an override down there must genuinely out-specify its target, not merely tie it. See the .site-footer note at the bottom. Companion pieces that live elsewhere: - First-paint backgrounds are inline in head-common-includes.jspf, dark-mode-init.jspf and dark-mode-vars.jspf. - The mobile menu keeps a private --tn-mm-* palette in mobile-menu-modern.css. Cache-bust: version_css_main ========================================================================== */ html.dark-mode.black-mode { /* Canvas and columns: true black for OLED panels */ --dm-dark-base: #000; --dm-bg-primary: #000; --dm-bg-secondary: #0a0a0a; --dm-bg-tertiary: #141414; --dm-bg-base: #000; --dm-bg-column: #000; /* Elevated surfaces. Shadows read as nothing against #000, so the card hierarchy is carried by these steps plus the borders below. */ --dm-bg-card: #0d0d0d; --dm-bg-elevated: #171717; --dm-section-header: #171717; /* Referenced by game-predictions.css and football-player-stats.css but never declared by the dark theme, so those panels fall through to a #222 fallback. Declaring it here keeps them in step. */ --dm-bg-surface: #0d0d0d; /* Borders do the structural work that shadows cannot. A drop shadow is invisible against #000, so these are deliberately lighter than the dark theme's equivalents — otherwise every card puddles into the canvas. */ --dm-border: #383838; --dm-border-light: #4d4d4d; --dm-border-subtle: rgba(255, 255, 255, 0.14); --dm-bg-stripe: rgba(255, 255, 255, 0.05); /* Neutral text — no brand purple on black (see dark-mode-text-contrast) */ --dm-text-primary: #f5f5f5; --dm-text-secondary: #d4d4d4; --dm-text-muted: #a3a3a3; --dm-text-link: rgba(255, 255, 255, 0.92); /* --dm-accent-text is deliberately NOT overridden. site-vars.css.jspf computes it per site and blends dim brand colors toward white so they clear WCAG; hardcoding the raw brand color here would put Bears navy or Bulls red straight onto #000. TigerNet orange passes that gate already. */ --dm-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.6); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.6); /* Semantic aliases that dark mode builds from brand color rather than from the --dm-* surfaces, so a token override alone would miss them. --color-bg-body is the important one: dark mode makes it a purple gradient, which would otherwise keep the whole canvas Clemson purple. */ --color-bg-body: #000; --color-bg-nav: #000; --color-scrollbar-track: #000; --color-scrollbar-thumb: #4d4d4d; /* Dark mode builds this from the brand gradient, so it stays an orange-to-purple slab behind the header search field even once the surfaces go black. */ --user-search-popover-bg: #0d0d0d; --user-search-popover-border: rgba(255, 255, 255, 0.18); /* Dark mode darkens quick-link hover with black at 22%, which is a no-op once the nav itself is black. Lift instead of darken. */ --header-quick-link-hover-bg: rgba(255, 255, 255, 0.1); --header-quick-link-hover-border: rgba(255, 255, 255, 0.18); --tmail-emoji-bg-rgb: 10, 10, 10; } /* -------------------------------------------------------------------------- Beat the inline first-paint rules head-common-includes.jspf and dark-mode-init.jspf hardcode the header and column backgrounds with !important so there is no #fafafa flash. Those rules are keyed on `html.dark-mode`, which black mode still carries, so they have to be re-beaten once this file lands. -------------------------------------------------------------------------- */ html.dark-mode.black-mode { background-color: #000; } html.dark-mode.black-mode body { background-color: #000 !important; } html.dark-mode.black-mode .tn-header { background-color: #000 !important; } html.dark-mode.black-mode #left_column, html.dark-mode.black-mode #right_column, html.dark-mode.black-mode #layout_right, html.dark-mode.black-mode .layout_body, html.dark-mode.black-mode .forum-right-rail { background-color: #000 !important; } html.dark-mode.black-mode #board-header-inner { background-color: #000 !important; } /* -------------------------------------------------------------------------- Surface corrections for rules that hardcode a purple-gray fill These paint a literal hex instead of reading a --dm-* token, so the token layer above cannot reach them and they would sit as purple islands on an otherwise black page. Scoped to black-mode only, so dark mode keeps the palette it was designed with. Deliberately NOT changed here (brand accents, not surfaces): the forum Reply button, premium medals, and the header topbar. Those are intentional brand fills with white text that still pass contrast on black. -------------------------------------------------------------------------- */ /* My Feed masthead — keeps its gold double border, loses the purple parchment */ html.dark-mode.black-mode .myfeed-board-header-frame { background-color: #0d0d0d !important; background-image: radial-gradient(rgba(201, 160, 99, 0.04) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.95)) !important; } /* Forum board header Select2 dropdown arrows */ html.dark-mode.black-mode #board-header-inner .forum-filter-container .MultiCheckBox .select2-arrow, html.dark-mode.black-mode #board-header-inner .board-opt .select2-container .select2-choice .select2-arrow, html.dark-mode.black-mode #board-header-inner .sort-by-form .select2-container .select2-choice .select2-arrow { background: var(--dm-bg-elevated) !important; background-image: none !important; } /* Mention chips in the post form — orange ring already carries the accent */ html.dark-mode.black-mode .jive-post-form .select2-container-multi .select2-choices .select2-search-choice { background: var(--dm-bg-elevated) !important; } html.dark-mode.black-mode .jive-post-form .select2-container-multi .select2-choices .select2-search-choice-focus { background: #2b2b2b !important; } /* Score prediction leaderboard header + scored/locked pills. The pill text was #c4b5fd lavender on a purple wash, which is exactly the purple-ink-on-dark case dark-mode-text-contrast warns about. */ html.dark-mode.black-mode .gp-picks__list .gp-lb__header { background: var(--dm-section-header) !important; } html.dark-mode.black-mode .gp-picks__status--scored, html.dark-mode.black-mode .gp-picks__status--locked { color: var(--dm-text-secondary) !important; background: rgba(255, 255, 255, 0.08) !important; } /* Footer bottom stripe is rgba(0,0,0,0.18) over the nav color, which is a no-op once the nav is black. Lift it so the stripe still reads. The .site-footer ancestor is required: footer.css uses html.dark-mode .site-footer .footer-bottom, which ties this on specificity, and footer.css is linked after this file. */ html.dark-mode.black-mode .site-footer .footer-bottom { background: rgba(255, 255, 255, 0.05); }