From f74135c8be846b25a34ad5cd2bab65cdec1d0e42 Mon Sep 17 00:00:00 2001 From: William Zujkowski Date: Tue, 31 Mar 2026 23:58:32 -0400 Subject: [PATCH] fix(a11y): fix dark mode contrast on chapter page sticky headers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sticky section headers used gray-950 (#030712) in dark mode which was nearly black against the navy-dark (#112F4E) page background — poor contrast and visually jarring. Now uses navy-dark to match the page background, with teal-bright border for visibility. Also updated light mode to use warm-white for consistency with the USWDS civic palette. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/web/src/styles/global.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css index fdb207f..ae6c687 100644 --- a/apps/web/src/styles/global.css +++ b/apps/web/src/styles/global.css @@ -164,14 +164,15 @@ position: sticky; top: 0; z-index: 10; - background: var(--color-white, #fff); + background: var(--color-warm-white, #FAFAF8); padding-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-teal); } :where(.dark, .dark *) .sticky-section-header { - background: var(--color-gray-950, #030712); + background: var(--color-navy-dark, #112F4E); + border-bottom-color: var(--color-teal-bright); } /* Anchor link scroll clearance for sticky headers */