From 9c2465e4c5d01d3cf84566ce5f69aec3dbb7d959 Mon Sep 17 00:00:00 2001 From: Deeman Date: Sat, 14 Feb 2026 02:11:53 +0100 Subject: [PATCH] force heading colors with !important to beat Pico's cascade The variable-based overrides (--pico-h1-color, --pico-color) weren't reliably winning against Pico's multi-layer cascade of theme selectors, prefers-color-scheme media queries, and variable indirection. Headings were rendering near-white (#f0f1f3) on dark-OS systems despite data-theme="light". Using !important on color is the pragmatic fix. Co-Authored-By: Claude Opus 4.6 --- .../src/padelnomics/static/css/custom.css | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/padelnomics/src/padelnomics/static/css/custom.css b/padelnomics/src/padelnomics/static/css/custom.css index ade5d97..0c5a6e7 100644 --- a/padelnomics/src/padelnomics/static/css/custom.css +++ b/padelnomics/src/padelnomics/static/css/custom.css @@ -45,18 +45,15 @@ } /* Headings — Deep Navy, Inter - Specificity must match Pico's [data-theme=light] h1 (0,1,1) - to win over dark-mode heading colors on dark-OS systems. */ -[data-theme="light"] h1, -[data-theme="light"] h2, -[data-theme="light"] h3, -[data-theme="light"] h4, -[data-theme="light"] h5, -[data-theme="light"] h6 { - --pico-color: #0F172A; - color: #0F172A; + Force heading colors with !important to beat Pico's multi-layer + variable cascade (theme selectors + prefers-color-scheme media). */ +h1, h2, h3, h4, h5, h6 { + color: #0F172A !important; font-family: 'Inter', system-ui, -apple-system, sans-serif; } +h4, h5, h6 { + color: #1E293B !important; +} /* Data & metrics use monospace */ .metric, .mono, [data-mono] {