/* * fworks — dark mode skeleton. * State lives on : absent = follow system, "light", "dark". * The dark variable set is applied for BOTH: * (A) html[data-fw-theme="dark"] * (B) no attribute (system) AND @media (prefers-color-scheme: dark) * Raw dark colors live ONLY in the :root --fw-d-* block below; every other rule * references tokens. Values are a first, "won't-break" pass — tune later. */ :root { /* Dark source palette (the only place raw dark colors are defined). */ --fw-d-bg: #14181f; /* page background */ --fw-d-surface: #1b212b; /* cards / raised panels */ --fw-d-text: #c3cad2; /* body text (Blocksy color-3) */ --fw-d-ink: #e8ecf1; /* headings / strong text (color-4, --fw-ink) */ --fw-d-ink-soft: #9aa7b5; /* muted text */ --fw-d-border: #2a313b; /* borders / dividers */ --fw-d-link: #6ab0ff; /* links (was blue #0066cc/#2d7bf4/#0073aa) */ --fw-d-link-hover: #93c7ff; --fw-d-selection: #33405a; --fw-d-vermilion: #e5314f; /* brand red, brightened so it doesn't sink on dark */ /* Light defaults for the new tokens referenced by dark overrides. */ --fw-surface: #ffffff; --fw-link: #0066cc; /* Text on the vermilion accent — white in both themes (not remapped). */ --fw-on-vermilion: #ffffff; } /* ============================================================ * Variable remaps — keep (A) and (B) in sync. * ============================================================ */ html[data-fw-theme="dark"] { color-scheme: dark; /* Blocksy palette + direct-value semantics */ --theme-palette-color-7: var(--fw-d-bg); --theme-palette-color-8: var(--fw-d-bg); --theme-palette-color-6: var(--fw-d-surface); --theme-palette-color-5: var(--fw-d-border); --theme-palette-color-4: var(--fw-d-ink); --theme-palette-color-3: var(--fw-d-text); --theme-link-initial-color: var(--fw-d-link); /* content links were direct #000000 */ --theme-link-hover-color: var(--fw-d-link-hover); --theme-selection-background-color: var(--fw-d-selection); /* Child tokens */ --fw-paper: var(--fw-d-bg); --fw-ink: var(--fw-d-ink); --fw-ink-soft: var(--fw-d-ink-soft); --fw-border: var(--fw-d-border); --fw-surface: var(--fw-d-surface); --fw-link: var(--fw-d-link); --fw-vermilion: var(--fw-d-vermilion); --fw-vermilion-ink: var(--fw-d-vermilion); /* -ink was too dark (#a30d26) on dark */ } @media (prefers-color-scheme: dark) { html:not([data-fw-theme]) { color-scheme: dark; --theme-palette-color-7: var(--fw-d-bg); --theme-palette-color-8: var(--fw-d-bg); --theme-palette-color-6: var(--fw-d-surface); --theme-palette-color-5: var(--fw-d-border); --theme-palette-color-4: var(--fw-d-ink); --theme-palette-color-3: var(--fw-d-text); --theme-link-initial-color: var(--fw-d-link); /* content links were direct #000000 */ --theme-link-hover-color: var(--fw-d-link-hover); --theme-selection-background-color: var(--fw-d-selection); --fw-paper: var(--fw-d-bg); --fw-ink: var(--fw-d-ink); --fw-ink-soft: var(--fw-d-ink-soft); --fw-border: var(--fw-d-border); --fw-surface: var(--fw-d-surface); --fw-link: var(--fw-d-link); --fw-vermilion: var(--fw-d-vermilion); --fw-vermilion-ink: var(--fw-d-vermilion); /* -ink was too dark (#a30d26) on dark */ } } /* ============================================================ * Per-selector overrides for HARDCODED colors (audit b/c). * Selectors listed once; the whole block is duplicated for (A)/(B). * All values reference tokens — no raw colors here. * ============================================================ */ /* (A) explicit dark */ html[data-fw-theme="dark"] .fworks-card, html[data-fw-theme="dark"] .fworks-guide, html[data-fw-theme="dark"] .fworks-author, html[data-fw-theme="dark"] .fworks-toc-panel, html[data-fw-theme="dark"] .fworks-toc-panel__head, html[data-fw-theme="dark"] .fworks-toc__link, html[data-fw-theme="dark"] .fworks-allposts__filter select, html[data-fw-theme="dark"] .fworks-allposts__pagination a.page-numbers, html[data-fw-theme="dark"] .fworks-allposts__pagination span.page-numbers, html[data-fw-theme="dark"] .card, html[data-fw-theme="dark"] .quick-links, html[data-fw-theme="dark"] .custom-toc { border-color: var(--fw-border); } html[data-fw-theme="dark"] .fworks-card__thumb, html[data-fw-theme="dark"] .card, html[data-fw-theme="dark"] .card .thumb, html[data-fw-theme="dark"] .custom-toc, html[data-fw-theme="dark"] .quick-links, html[data-fw-theme="dark"] .fancy-quote, html[data-fw-theme="dark"] .quote-label, html[data-fw-theme="dark"] .inner-link-capsule, html[data-fw-theme="dark"] .category-hero-box, html[data-fw-theme="dark"] .fworks-toc-panel__body .fworks-toc__link:hover { background-color: var(--fw-surface); color: var(--fw-ink); } html[data-fw-theme="dark"] .my-breadcrumbs a, html[data-fw-theme="dark"] .breadcrumb a, html[data-fw-theme="dark"] .quick-links a, html[data-fw-theme="dark"] .custom-toc ul li a, html[data-fw-theme="dark"] a.page-numbers, html[data-fw-theme="dark"] .inner-link-capsule { color: var(--fw-link); } html[data-fw-theme="dark"] .my-breadcrumbs a:hover, html[data-fw-theme="dark"] .quick-links a:hover, html[data-fw-theme="dark"] .custom-toc ul li a:hover { color: var(--fw-d-link-hover); } /* (B) system dark — identical selectors */ @media (prefers-color-scheme: dark) { html:not([data-fw-theme]) .fworks-card, html:not([data-fw-theme]) .fworks-guide, html:not([data-fw-theme]) .fworks-author, html:not([data-fw-theme]) .fworks-toc-panel, html:not([data-fw-theme]) .fworks-toc-panel__head, html:not([data-fw-theme]) .fworks-toc__link, html:not([data-fw-theme]) .fworks-allposts__filter select, html:not([data-fw-theme]) .fworks-allposts__pagination a.page-numbers, html:not([data-fw-theme]) .fworks-allposts__pagination span.page-numbers, html:not([data-fw-theme]) .card, html:not([data-fw-theme]) .quick-links, html:not([data-fw-theme]) .custom-toc { border-color: var(--fw-border); } html:not([data-fw-theme]) .fworks-card__thumb, html:not([data-fw-theme]) .card, html:not([data-fw-theme]) .card .thumb, html:not([data-fw-theme]) .custom-toc, html:not([data-fw-theme]) .quick-links, html:not([data-fw-theme]) .fancy-quote, html:not([data-fw-theme]) .quote-label, html:not([data-fw-theme]) .inner-link-capsule, html:not([data-fw-theme]) .category-hero-box, html:not([data-fw-theme]) .fworks-toc-panel__body .fworks-toc__link:hover { background-color: var(--fw-surface); color: var(--fw-ink); } html:not([data-fw-theme]) .my-breadcrumbs a, html:not([data-fw-theme]) .breadcrumb a, html:not([data-fw-theme]) .quick-links a, html:not([data-fw-theme]) .custom-toc ul li a, html:not([data-fw-theme]) a.page-numbers, html:not([data-fw-theme]) .inner-link-capsule { color: var(--fw-link); } html:not([data-fw-theme]) .my-breadcrumbs a:hover, html:not([data-fw-theme]) .quick-links a:hover, html:not([data-fw-theme]) .custom-toc ul li a:hover { color: var(--fw-d-link-hover); } } /* ============================================================ * Dark logo swap. * The live header logo is a DB-set image (Site Identity) with a srcset. * `content: url()` replaces the whole rendered image AND overrides srcset, * and keeps the replacement's own aspect ratio (constrained by Blocksy's * --logo-max-height), so no distortion. Light restores automatically. * ============================================================ */ html[data-fw-theme="dark"] .site-logo-container img { content: url(../img/title-dark.png); } @media (prefers-color-scheme: dark) { html:not([data-fw-theme]) .site-logo-container img { content: url(../img/title-dark.png); } } /* ============================================================ * Article-body inline-styled boxes (Quick Links / note callouts / table * header rows / blue "which one" boxes). These carry inline background/border * (e.g. #f9f9f9, #fcfcfc, #efefef, #f7fbff, #f8fbfd, border #ddd/#ccc/#d6e4f0) * that only !important can beat. Matched via [style*="#hex"] so ONLY those * exact boxes are hit, and ONLY under dark scope — light is never touched. * ============================================================ */ html[data-fw-theme="dark"] .quick-links, html[data-fw-theme="dark"] [style*="#f9f9f9"], html[data-fw-theme="dark"] [style*="#fcfcfc"], html[data-fw-theme="dark"] [style*="#efefef"], html[data-fw-theme="dark"] [style*="#f7fbff"], html[data-fw-theme="dark"] [style*="#f8fbfd"] { background-color: var(--fw-surface) !important; color: var(--fw-ink) !important; border-color: var(--fw-border) !important; } html[data-fw-theme="dark"] .quick-links a, html[data-fw-theme="dark"] [style*="#f9f9f9"] a, html[data-fw-theme="dark"] [style*="#fcfcfc"] a, html[data-fw-theme="dark"] [style*="#efefef"] a, html[data-fw-theme="dark"] [style*="#f7fbff"] a, html[data-fw-theme="dark"] [style*="#f8fbfd"] a { color: var(--fw-link) !important; } /* Old-article inline body/heading colors (legacy pipeline puts them on the * element itself):
and

. * Dark scope only, so light keeps its dark-grey body + red headings. */ html[data-fw-theme="dark"] [style*="color: #333"] { color: var(--fw-d-text) !important; } html[data-fw-theme="dark"] [style*="color: #cc0000"] { color: var(--fw-ink) !important; } /* Category (Blocksy) current page number uses --theme-link-hover-color as its * background, which is remapped to light blue in dark. Re-pin it to the * vermilion accent so it matches the All Posts red highlight. */ html[data-fw-theme="dark"] .ct-pagination .page-numbers.current, html[data-fw-theme="dark"] .page-numbers.current { background: var(--fw-vermilion); color: var(--fw-on-vermilion); } @media (prefers-color-scheme: dark) { html:not([data-fw-theme]) .quick-links, html:not([data-fw-theme]) [style*="#f9f9f9"], html:not([data-fw-theme]) [style*="#fcfcfc"], html:not([data-fw-theme]) [style*="#efefef"], html:not([data-fw-theme]) [style*="#f7fbff"], html:not([data-fw-theme]) [style*="#f8fbfd"] { background-color: var(--fw-surface) !important; color: var(--fw-ink) !important; border-color: var(--fw-border) !important; } html:not([data-fw-theme]) .quick-links a, html:not([data-fw-theme]) [style*="#f9f9f9"] a, html:not([data-fw-theme]) [style*="#fcfcfc"] a, html:not([data-fw-theme]) [style*="#efefef"] a, html:not([data-fw-theme]) [style*="#f7fbff"] a, html:not([data-fw-theme]) [style*="#f8fbfd"] a { color: var(--fw-link) !important; } html:not([data-fw-theme]) [style*="color: #333"] { color: var(--fw-d-text) !important; } html:not([data-fw-theme]) [style*="color: #cc0000"] { color: var(--fw-ink) !important; } html:not([data-fw-theme]) .ct-pagination .page-numbers.current, html:not([data-fw-theme]) .page-numbers.current { background: var(--fw-vermilion); color: var(--fw-on-vermilion); } } /* ============================================================ * Mobile TOC slide-up panel (features.css). Its base uses --fw-paper, which in * dark equals the page background, so the panel vanishes into the page. Lift it * to the surface tone, fix the hardcoded light hairline/hover, raise item * contrast, and mark the current item with a vermilion bar (matches the PC * sidebar TOC). Dark scope only — the light panel is unchanged. * (The scrollspy in main.js now also marks the panel's cloned current link.) * ============================================================ */ html[data-fw-theme="dark"] .fworks-toc__link:not(.is-active) { border-color: var(--fw-border); /* left rail was hardcoded light #e7ebf0 */ } html[data-fw-theme="dark"] .fworks-toc-panel { background: var(--fw-surface); } html[data-fw-theme="dark"] .fworks-toc-panel__head { border-bottom-color: var(--fw-border); } html[data-fw-theme="dark"] .fworks-toc-panel__body .fworks-toc__link { color: var(--fw-ink); } html[data-fw-theme="dark"] .fworks-toc-panel__body .fworks-toc__item--h3 .fworks-toc__link { color: var(--fw-d-text); } html[data-fw-theme="dark"] .fworks-toc-panel__body .fworks-toc__link:hover, html[data-fw-theme="dark"] .fworks-toc-panel__body .fworks-toc__link:focus-visible { background: var(--fw-d-selection); color: var(--fw-vermilion); } html[data-fw-theme="dark"] .fworks-toc-panel__body .fworks-toc__link.is-active { color: var(--fw-vermilion); font-weight: 600; border-left: 3px solid var(--fw-vermilion); padding-left: calc(0.6rem - 3px); background: var(--fw-d-selection); } @media (prefers-color-scheme: dark) { html:not([data-fw-theme]) .fworks-toc__link:not(.is-active) { border-color: var(--fw-border); } html:not([data-fw-theme]) .fworks-toc-panel { background: var(--fw-surface); } html:not([data-fw-theme]) .fworks-toc-panel__head { border-bottom-color: var(--fw-border); } html:not([data-fw-theme]) .fworks-toc-panel__body .fworks-toc__link { color: var(--fw-ink); } html:not([data-fw-theme]) .fworks-toc-panel__body .fworks-toc__item--h3 .fworks-toc__link { color: var(--fw-d-text); } html:not([data-fw-theme]) .fworks-toc-panel__body .fworks-toc__link:hover, html:not([data-fw-theme]) .fworks-toc-panel__body .fworks-toc__link:focus-visible { background: var(--fw-d-selection); color: var(--fw-vermilion); } html:not([data-fw-theme]) .fworks-toc-panel__body .fworks-toc__link.is-active { color: var(--fw-vermilion); font-weight: 600; border-left: 3px solid var(--fw-vermilion); padding-left: calc(0.6rem - 3px); background: var(--fw-d-selection); } } /* ============================================================ * Theme toggle button — integrated at the top of the footer. * Output via blocksy:footer:before (directly above the footer menu). The wrap * takes the footer's own background so it reads as part of the footer; the * button is a quiet outline pill that echoes the uppercase footer links and * adapts to light/dark purely through --fw-* tokens. * ============================================================ */ .fworks-theme-toggle-wrap { display: flex; justify-content: center; margin: 0; padding: 1.5rem 1rem 1.1rem; background: var(--theme-palette-color-6); /* footer bg (remaps in dark) */ } .fworks-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 34px; padding: 0.4rem 1rem; border: 1px solid var(--fw-border); border-radius: 999px; background: transparent; color: var(--fw-ink-soft); font-family: var(--fw-font-sans); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .fworks-theme-toggle:hover, .fworks-theme-toggle:focus-visible { border-color: var(--fw-vermilion); color: var(--fw-vermilion); } .fworks-theme-toggle:focus-visible { outline: 3px solid var(--fw-vermilion); outline-offset: 2px; } .fworks-theme-toggle__icon { font-size: 0.95rem; line-height: 1; text-transform: none; } /* Mobile: icon-only, circular 44px tap target. The text label is hidden * visually only — the button's aria-label still conveys the current state to * screen readers, and the JS keeps updating both label + aria-label for desktop. */ @media (max-width: 689.98px) { .fworks-theme-toggle { height: 44px; min-height: 44px; padding: 0 1.4rem; gap: 0; border-radius: 999px; /* capsule, not a full circle */ } .fworks-theme-toggle__label { display: none; } .fworks-theme-toggle__icon { font-size: 1.2rem; } }