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>
- Trim logo background to transparent, use inline style height to
override Pico's img { height: auto } — nav 24px, footer 20px
- Fix heading colors by setting --pico-h1-color through --pico-h6-color
variables and --pico-color override on heading elements
- Add white-space:nowrap on nav CTA button to prevent wrapping
- Add Playwright visual test suite (11 tests): screenshots of landing,
login, signup, mobile; assertions for light background, dark headings,
logo presence, nav layout, no dark remnants
- Screenshots saved to tests/screenshots/ for manual review
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
