/* TXKtoday — Dark Mode overrides for the CUSTOM layers (brand.css + events.css). Scoped ENTIRELY under :root[data-color-mode*="dark"], the attribute Blocksy Pro's Color Mode Switch sets on . Light mode is therefore byte-for-byte unchanged, and this file is INERT until the extension is enabled. Blocksy's own chrome (header, base text/bg, entry cards, archive) adapts via the Dark palette set in the Customizer — set its background to ~#15181c and text light so the surfaces below sit cohesively on top. GUIDES (.txk-guide) are intentionally EXCLUDED — they keep their light editorial design. Do NOT add any .txk-guide rule under the dark selector. 2026-06-08 */ :root[data-color-mode*="dark"]{ /* --brand-ink is used as TEXT in ~14 places (titles, names, meta). Flip it here to light; the ONE place it's a background (footer band) is re-darkened below. */ --brand-ink:#e6eaee; /* TXK dark surfaces (brand blues/orange are kept as accents) */ --txk-d-surface:#1e2329; --txk-d-surface2:#232a31; --txk-d-line:#2c333b; --txk-d-muted:#9aa6b2; --txk-d-soft:#c4ccd4; } /* ===== Muted greys -> readable on dark ===== */ :root[data-color-mode*="dark"] .txk-cat-section .wp-block-post-date, :root[data-color-mode*="dark"] .txk-toprow .wp-block-post-date, :root[data-color-mode*="dark"] .txk-side-date, :root[data-color-mode*="dark"] .single .entry-content figcaption, :root[data-color-mode*="dark"] .txk-source, :root[data-color-mode*="dark"] .txk-pullquote cite, :root[data-color-mode*="dark"] .txk-ad-label, :root[data-color-mode*="dark"] .broadstreet-zone-label, :root[data-color-mode*="dark"] .bs-ad-label{ color:var(--txk-d-muted); } :root[data-color-mode*="dark"] .txk-standfirst, :root[data-color-mode*="dark"] .txk-pullquote, :root[data-color-mode*="dark"] .single .entry-content blockquote{ color:var(--txk-d-soft); } /* Content links: lighten the brand-blue-dark link color for contrast on near-black (the token itself is left alone — it doubles as the author-avatar background). */ :root[data-color-mode*="dark"] .single .entry-content a{ color:#5cb8f0; } /* ===== Dividers ===== */ :root[data-color-mode*="dark"] .txk-cat-section .wp-block-post-template > .wp-block-post, :root[data-color-mode*="dark"] .txk-toprow .wp-block-post-template > .wp-block-post, :root[data-color-mode*="dark"] .txk-hero-secondary > .wp-block-post, :root[data-color-mode*="dark"] .txk-side-item{ border-color:var(--txk-d-line); } :root[data-color-mode*="dark"] .txk-hero-cols > .wp-block-column:last-child{ border-left-color:var(--txk-d-line); } /* ===== Ad slots / callouts -> dark surfaces ===== */ :root[data-color-mode*="dark"] .txk-ad-slot{ background:var(--txk-d-surface); border-color:var(--txk-d-line); } :root[data-color-mode*="dark"] .txk-callout{ background:var(--txk-d-surface2); border-color:var(--txk-d-line); } :root[data-color-mode*="dark"] .txk-callout h3{ color:var(--brand-blue); } /* ===== Homepage sidebar ===== */ :root[data-color-mode*="dark"] .txk-side-headline, :root[data-color-mode*="dark"] .txk-side-title{ color:var(--brand-ink); } :root[data-color-mode*="dark"] .txk-side-news{ background:var(--txk-d-surface); border-color:var(--txk-d-line); } :root[data-color-mode*="dark"] .txk-side-news-sub{ color:var(--txk-d-muted); } :root[data-color-mode*="dark"] .txk-news-email{ background:var(--txk-d-surface2); border-color:var(--txk-d-line); color:var(--brand-ink); } /* ===== Author box ===== */ :root[data-color-mode*="dark"] .txk-author-box{ background:var(--txk-d-surface); border-color:var(--txk-d-line); border-top-color:var(--brand-orange); } :root[data-color-mode*="dark"] .txk-author-bio{ color:var(--txk-d-soft); } /* ===== Sticky mobile sneaker ===== */ :root[data-color-mode*="dark"] .txk-sneaker{ background:var(--txk-d-surface); border-top-color:var(--txk-d-line); } /* ===== Footer band: --brand-ink is now light, so re-darken the bottom band ===== */ :root[data-color-mode*="dark"] [data-footer] .ct-footer-bottom, :root[data-color-mode*="dark"] .ct-footer [data-row="bottom"]{ background:#0f1216; } /* ===== Events (txk-events plugin) ===== */ /* events.css sets --ev-line:#e7e9ec on its wrappers; re-point it so every event border that uses var(--ev-line) goes dark in one shot. --ev-ink/orange/blue follow the brand tokens automatically. */ :root[data-color-mode*="dark"] .txk-events, :root[data-color-mode*="dark"] .txk-event-single{ --ev-line:var(--txk-d-line); } :root[data-color-mode*="dark"] .txk-events-intro, :root[data-color-mode*="dark"] .txk-event-loc, :root[data-color-mode*="dark"] .txk-event-excerpt, :root[data-color-mode*="dark"] .txk-events-empty{ color:var(--txk-d-muted); } :root[data-color-mode*="dark"] .txk-event-card{ background:var(--txk-d-surface); } :root[data-color-mode*="dark"] .txk-events-filter .txk-chip{ background:var(--txk-d-surface2); color:var(--brand-ink); } :root[data-color-mode*="dark"] .txk-event-facts{ background:var(--txk-d-surface2); border-left-color:var(--brand-orange); } :root[data-color-mode*="dark"] .txk-event-fact{ border-bottom-color:var(--txk-d-line); } :root[data-color-mode*="dark"] .txk-event-btn{ background:var(--txk-d-surface2); color:var(--brand-blue); border-color:var(--brand-blue); } :root[data-color-mode*="dark"] .txk-event-btn:hover{ background:#2a323a; } :root[data-color-mode*="dark"] .txk-event-content{ color:var(--txk-d-soft); } /* ===== Generic safety net: neutralize the most common hardcoded WHITE/near-white inline backgrounds in legacy tagDiv article bodies so text stays readable. Targets inline style="background:#fff" patterns are impractical via CSS; instead make sure our own content wrappers inherit, and give a soft text color to any element that explicitly set black text on a (now dark) inherited background is left to Blocksy. */ :root[data-color-mode*="dark"] .single .entry-content :is(figure,figcaption){ background:transparent; }