diff --git a/README.md b/README.md index d39581e..641f1ec 100644 --- a/README.md +++ b/README.md @@ -1419,9 +1419,14 @@ Things I chose while building, with the reasoning: (, re-encoded to a 237 kB WebP in `public/aero/` and credited in Settings), with ten drawn bubbles rising over it (`.ice-bubble` — `display: none` outside aero so they cost nothing elsewhere, still under reduced motion). Buttons and segments - are **liquid glass** (translucent, glossed top half, bright rim, backdrop blur), the cards are - pale blue glass, and the helper lines that sit straight on the wallpaper (the keyboard tip, the - AI note) get their own small glass chip — dark text on grass measured 2.5:1. The light/dark + are **liquid glass** — transparent, glossed, with a bright rim — and every surface shows a + **pre-blurred copy of the wallpaper** (`public/aero/background-blur.webp`, 3 kB, glued to the + viewport with `background-attachment: fixed`) instead of blurring the live scene: the bubbles + move behind every surface, so a real `backdrop-filter` re-runs ~60 times a second (measured + 66ms/frame at 2x throttle vs 17ms with nothing blurring). The tint and the gloss ride on top of + that layer, so the look is identical at zero per-frame cost. The helper lines that sit straight + on the wallpaper (the keyboard tip, the AI note) get a small glass chip — dark text on grass + measured 2.5:1. The light/dark toggles (header, rail, chat header) hide while it is on and the picker says why; the PWA status bar follows the wallpaper's sky (#2fa7e6). Covered by the axe and pixel-contrast scans in all three themes. diff --git a/app/globals.css b/app/globals.css index 613d6b6..f46650a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -287,14 +287,12 @@ box-shadow: inset -8px -12px 20px -10px rgb(3 74 124 / 0.5), inset 8px 10px 16px -10px rgb(255 255 255 / 0.95), 0 12px 26px -16px rgb(3 74 124 / 0.55); } -/* The Aero gloss: the classic white top half with a horizon line. */ -.aero .card, +/* The Aero gloss for the floating surfaces (sheets, dropdowns and the sticky + chrome keep a real backdrop-filter — they sit over scrolling content). */ .aero .glass-panel, -.aero .sidebar-surface, .aero .study-chrome, .aero .tabbar, -.aero .glass, -.aero .gate-card { +.aero .glass { background-image: linear-gradient( 180deg, rgb(255 255 255 / 0.75) 0%, @@ -369,28 +367,55 @@ .aero .btn-primary, .aero .segmented > button[aria-pressed="true"], .aero .segmented > a[aria-current="page"] { - background-image: linear-gradient( - 180deg, - rgb(255 255 255 / 0.9) 0%, - rgb(226 245 255 / 0.62) 48%, - rgb(168 224 255 / 0.55) 52%, - rgb(219 242 255 / 0.7) 100% - ); - 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); - /* @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; + border: 1px solid rgb(255 255 255 / 0.6); + color: #04223c; + box-shadow: 0 12px 26px -16px rgb(2 62 110 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.9); + /* The glass itself comes from the pre-blurred wallpaper rule above. */ } -/* The glass itself, a touch more transparent so the wallpaper reads through - it like liquid, still opaque enough for the dark text (contrast scanned). */ +/* Liquid glass: far more transparent than the other themes, with a strong + backdrop blur doing the legibility work — the wallpaper stays visible + through every surface. Contrast is pixel-scanned in all three themes, so + the tint cannot drop below what the text needs. */ .aero { - --glass-bg: rgb(222 244 255 / 0.72); - --glass-solid-bg: rgb(228 246 255 / 0.82); - --glass-sheet-bg: rgb(230 246 255 / 0.92); + --glass-bg: rgb(228 246 255 / 0.34); + --glass-solid-bg: rgb(232 248 255 / 0.46); + --glass-sheet-bg: rgb(232 248 255 / 0.8); + --surface-strong: rgb(255 255 255 / 0.34); + --surface-sunken: rgb(255 255 255 / 0.26); + --nav-active-bg: rgb(255 255 255 / 0.4); +} + +/* Liquid glass without the per-frame cost: every surface shows a pre-blurred + copy of the wallpaper, glued to the viewport (`background-attachment: + fixed`), with the tint and the gloss layered on top. Blurring the live + scene instead measured 66ms per frame at 2x CPU throttle — the bubbles move + behind every surface, so a real backdrop-filter re-runs ~60 times a second + (vs 17ms with nothing blurring). The look is the same; the cost is zero. */ +.aero .card, +.aero .glass-solid, +.aero .sidebar-surface, +.aero .gate-card, +.aero .nav-action, +.aero .btn-primary, +.aero .grad-ice, +.aero .segmented > button[aria-pressed="true"], +.aero .segmented > a[aria-current="page"], +.aero .hint-line { + background-image: + linear-gradient( + 180deg, + rgb(255 255 255 / 0.5) 0%, + rgb(255 255 255 / 0.2) 47%, + rgb(255 255 255 / 0.07) 53%, + rgb(255 255 255 / 0.24) 100% + ), + linear-gradient(rgb(230 247 255 / 0.42), rgb(230 247 255 / 0.42)), + url("/aero/background-blur.webp"); + background-size: 100% 100%, 100% 100%, cover; + background-position: 0 0, 0 0, center 42%; + background-attachment: scroll, scroll, fixed; + background-repeat: no-repeat, no-repeat, no-repeat; } html, diff --git a/package.json b/package.json index 2054746..4e17e9f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "freezmo", - "version": "0.2.4", + "version": "0.2.5", "private": true, "license": "GPL-3.0-only", "scripts": { diff --git a/public/aero/background-blur.webp b/public/aero/background-blur.webp new file mode 100644 index 0000000..7ccbe04 Binary files /dev/null and b/public/aero/background-blur.webp differ diff --git a/public/sw.js b/public/sw.js index b42bc50..48753e6 100644 --- a/public/sw.js +++ b/public/sw.js @@ -9,7 +9,7 @@ * * Bumping CACHE_VERSION is how a new deploy invalidates old assets. */ -const CACHE_VERSION = "freezmo-v57"; +const CACHE_VERSION = "freezmo-v58"; const SHELL_CACHE = `${CACHE_VERSION}-shell`; const ASSET_CACHE = `${CACHE_VERSION}-assets`;