fix heading colors on dark-OS systems, increase logo size

The heading color override (bare h1 selector, specificity 0,0,1) was
losing to Pico's theme-scoped heading rules ([data-theme=light] h1,
specificity 0,1,1). On systems with prefers-color-scheme: dark, Pico's
dark heading colors (#f0f1f3 — near white) leaked through, making
headings invisible on the light background.

Fix: scope heading overrides under [data-theme="light"] to match Pico's
specificity. Also bump nav logo from 24px to 32px, footer to 24px.

Visual tests now run with color_scheme="dark" to catch this class of bug.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

padelnomics/src/padelnomics/static/css/custom.css

@@ -44,8 +44,15 @@
   --pico-form-element-focus-color: #3B82F6;
 }
 
-/* Headings — Deep Navy, Inter (belt-and-suspenders override) */
-h1, h2, h3, h4, h5, h6 {
+/* 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;
   font-family: 'Inter', system-ui, -apple-system, sans-serif;

padelnomics/src/padelnomics/templates/base.html

@@ -20,7 +20,7 @@
   <!-- Navigation -->
   <nav class="container">
     <ul>
-      <li><a href="{{ url_for('public.landing') }}" style="display:flex;align-items:center;text-decoration:none"><img src="{{ url_for('static', filename='images/logo.png') }}" alt="{{ config.APP_NAME }}" style="height:24px;width:auto"></a></li>
+      <li><a href="{{ url_for('public.landing') }}" style="display:flex;align-items:center;text-decoration:none"><img src="{{ url_for('static', filename='images/logo.png') }}" alt="{{ config.APP_NAME }}" style="height:32px;width:auto"></a></li>
     </ul>
     <ul>
       {% if user %}
@@ -67,7 +67,7 @@
   <footer class="container" style="margin-top: 4rem; padding: 2rem 0; border-top: 1px solid var(--pico-muted-border-color);">
     <div class="grid">
       <div>
-        <div style="margin-bottom:0.25rem"><img src="{{ url_for('static', filename='images/logo.png') }}" alt="{{ config.APP_NAME }}" style="height:20px;width:auto"></div>
+        <div style="margin-bottom:0.25rem"><img src="{{ url_for('static', filename='images/logo.png') }}" alt="{{ config.APP_NAME }}" style="height:24px;width:auto"></div>
         <p><small>Plan, finance, and build your padel business.</small></p>
       </div>
       <div>

padelnomics/tests/test_visual.py

@@ -92,8 +92,11 @@ def browser():
 
 @pytest.fixture
 def page(browser):
-    """Create a new browser page with consistent viewport."""
-    pg = browser.new_page(viewport={"width": 1280, "height": 900})
+    """Create a page with dark OS preference to catch theme leaks."""
+    pg = browser.new_page(
+        viewport={"width": 1280, "height": 900},
+        color_scheme="dark",
+    )
     yield pg
     pg.close()