From bdaa05cd542f563ef74c45307cd8f7fc465193c9 Mon Sep 17 00:00:00 2001 From: Tudor Date: Fri, 14 Aug 2026 22:26:23 +0100 Subject: [PATCH] style(home): lift the hero artwork's dark-theme brightness to 0.75 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit At 0.52 the scene was legible but heavily suppressed; 0.75 lets the hills, path and schoolhouse read while the white H1 stays comfortably the brightest thing on the panel. Re-measured rather than assumed, because in the dark theme the text is light and the artwork is behind it — brightening the image lowers text contrast rather than raising it. Off rendered pixels, sampling background up to 120px past each line's right edge: brightness title body 0.52 11.01:1 6.44:1 0.75 9.48:1 5.21:1 Both still clear the 4.5:1 floor, body being the binding one. The trade is recorded next to the value so the next person to reach for it knows it has a floor and not just a taste range. Co-Authored-By: Claude Opus 5 --- nextjs-app/components/HomeView.module.css | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/nextjs-app/components/HomeView.module.css b/nextjs-app/components/HomeView.module.css index a964d3e..a710b98 100644 --- a/nextjs-app/components/HomeView.module.css +++ b/nextjs-app/components/HomeView.module.css @@ -161,10 +161,22 @@ * page and out-shouts the H1 and the search box. Dimming it in CSS is the * whole treatment, and the scrim then fades it into the dark panel instead of * into cream. + * + * Raising the brightness raises the background under light dark-theme text, so + * this value has a contrast floor, not just a taste range. Measured off + * rendered pixels, sampling background up to 120px past each line: + * + * brightness title body + * 0.52 11.01:1 6.44:1 + * 0.75 9.48:1 5.21:1 ← current + * + * Body text is the binding one. Going much above 0.75 walks it toward the + * 4.5:1 floor, and at that point the scrim needs to carry further right rather + * than the artwork being dimmed less. */ @media (prefers-color-scheme: dark) { .heroArt img { - filter: brightness(0.52) saturate(0.72) contrast(1.02); + filter: brightness(0.75) saturate(0.72) contrast(1.02); } .heroPanel::before { background: linear-gradient(