From b8f2bb462e9e2bc0f5df2894866ee13f51ec7e9c Mon Sep 17 00:00:00 2001 From: Nibu Date: Sat, 7 Nov 2026 18:22:19 +0000 Subject: [PATCH] auth: login card fill 50% with 18px blur and a faint edge The blur flattens the sky and ridges behind the text, so the fill can be half as opaque and let the scene show through. Text over the unblurred horizon glow is 4.15:1 (4.5 needs 54%); measured over the real blurred backdrop at 390x844 it is >= 4.94:1. Co-Authored-By: Claude Sonnet 5.5 --- src/app/pages/auth/styles.css.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/app/pages/auth/styles.css.ts b/src/app/pages/auth/styles.css.ts index a9733ef0..b45539a6 100644 --- a/src/app/pages/auth/styles.css.ts +++ b/src/app/pages/auth/styles.css.ts @@ -56,7 +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. 85% fill keeps text >= 4.5:1 over the scene's brightest and darkest backdrops. +// 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. // 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}`, { @@ -65,13 +67,14 @@ globalStyle(`${scene} ${AuthLayout}`, { }); globalStyle(`${scene} ${AuthCard}`, { backgroundColor: [ - 'rgba(13, 26, 38, 0.85)', - 'color-mix(in srgb, var(--sky-bubble, #0d1a26) 85%, transparent)', + 'rgba(13, 26, 38, 0.5)', + 'color-mix(in srgb, var(--sky-bubble, #0d1a26) 50%, transparent)', ], color: 'var(--sky-bubble-text, #b7c7d9)', borderRadius: config.radii.R500, - borderColor: 'transparent', - backdropFilter: 'blur(12px)', + // A faint inner edge, so a pane this clear still reads as a surface. + borderColor: 'rgba(183, 199, 217, 0.14)', + backdropFilter: 'blur(18px)', }); globalStyle(`${scene} ${AuthHeader}`, { backgroundColor: 'transparent',