From 78a7dbe9231adecabb6df2af15f362f310a2230d Mon Sep 17 00:00:00 2001 From: Nibu Date: Mon, 9 Nov 2026 20:17:35 +0000 Subject: [PATCH] auth: login card fill 50% -> 54% so 4.5:1 holds without backdrop-filter Co-Authored-By: Claude Sonnet 5.5 --- src/app/pages/auth/styles.css.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/pages/auth/styles.css.ts b/src/app/pages/auth/styles.css.ts index b45539a6..9a4240f0 100644 --- a/src/app/pages/auth/styles.css.ts +++ b/src/app/pages/auth/styles.css.ts @@ -56,9 +56,9 @@ export const AuthFooter = style({ // signed-out ground is clear and the card is a translucent, blurred pane shaped like a message // bubble (BubbleContent: radius R500, no border), filled with the sky's bubble colour. The // --sky-bubble variables come from the sky theme (PR #22); the plain colours are the fallback -// until it lands. The fill is 50%: the 18px blur carries the readability, flattening the sky and -// ridges behind the text. Without the blur, text is 4.15:1 over the brightest backdrop (the horizon -// glow; 4.5:1 needs 54%) and >= 7.3:1 elsewhere in the scene. +// until it lands. The fill is 54%, the least that gives 4.5:1 text over the brightest backdrop (the +// horizon glow) without depending on the blur; it is >= 7.3:1 elsewhere in the scene. The 18px blur +// only softens the sky and ridges behind the text. // The card is also made shorter so it leaves more of the scene visible on a phone. const scene = ':root[data-scene]'; globalStyle(`${scene} ${AuthLayout}`, { @@ -67,8 +67,8 @@ globalStyle(`${scene} ${AuthLayout}`, { }); globalStyle(`${scene} ${AuthCard}`, { backgroundColor: [ - 'rgba(13, 26, 38, 0.5)', - 'color-mix(in srgb, var(--sky-bubble, #0d1a26) 50%, transparent)', + 'rgba(13, 26, 38, 0.54)', + 'color-mix(in srgb, var(--sky-bubble, #0d1a26) 54%, transparent)', ], color: 'var(--sky-bubble-text, #b7c7d9)', borderRadius: config.radii.R500,