diff --git a/app/globals.css b/app/globals.css index a262978..613d6b6 100644 --- a/app/globals.css +++ b/app/globals.css @@ -359,8 +359,8 @@ border-radius: 0.75rem; background: var(--glass-bg); border: 1px solid var(--glass-border); - backdrop-filter: blur(8px) saturate(1.4); - -webkit-backdrop-filter: blur(8px) saturate(1.4); + /* Same trap as the buttons above: use the Tailwind utilities. */ + @apply backdrop-blur-md backdrop-saturate-150; } /* Liquid glass buttons: translucent, glossed top half, bright rim — the @@ -379,8 +379,10 @@ border: 1px solid rgb(255 255 255 / 0.9); color: #05243d; box-shadow: 0 10px 24px -14px rgb(2 62 110 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.98), inset 0 -8px 14px -10px rgb(255 255 255 / 0.7); - backdrop-filter: blur(10px) saturate(1.5); - -webkit-backdrop-filter: blur(10px) saturate(1.5); + /* @apply, not a hand-written backdrop-filter: the minifier keeps only the + -webkit- prefix of a hand-written one, which paints nothing (see decision + 19). This is what makes the buttons read as liquid glass. */ + @apply backdrop-blur-lg backdrop-saturate-150; } /* The glass itself, a touch more transparent so the wallpaper reads through