Aero uses the real wallpaper + liquid glass buttons
The wallpaper is the one from the mockup: "The S Aesthetic That You Definitely Recognize Frutiger Aero" via WallpaperSafari (https://wallpapersafari.com/w/IlWuz7) — the URL in the request pointed at a different (teal abstract) wallpaper, this is the grass/sky/water one that matches the screenshot. Re-encoded to a 237 kB WebP in public/aero/, used as the scene in aero only (light/dark never download it), and credited in Settings next to the theme picker. The drawn CSS scene (rays, reeds, skyline, caustics) is off over the photo; the ten rising bubbles stay, and the orbs became extra bubbles. Buttons and segments are liquid glass now — translucent, glossed top half, bright rim, backdrop blur — instead of the solid aqua fill. 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. Also carries: the underwater scene + bubbles work, the floating cookie notice, the Czech title (Tvůj mrazák) and the review-suite fix that made the last deploy fail its gate. Contrast: 0 below-minimum findings, 0 axe violations across all three themes. Version 0.2.2, SW -> freezmo-v56.
This commit is contained in:
parent
67e2cefcfe
commit
f1c4a89adc
10 changed files with 83 additions and 78 deletions
110
app/globals.css
110
app/globals.css
|
|
@ -257,27 +257,25 @@
|
|||
--ice-grain-opacity: 0.02;
|
||||
}
|
||||
|
||||
/* The water: sun shafts through a bright surface, deepening below. */
|
||||
/* The scene is the wallpaper itself: Frutiger Aero 4k Wallpaper (1920x1200)
|
||||
via WallpaperSafari — https://wallpapersafari.com/w/sgI2Dq — credited in
|
||||
Settings and the README. Only the moving bubbles are drawn on top; the
|
||||
photo already has grass, sun, water and clouds. */
|
||||
.aero .ice-scene {
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
102deg,
|
||||
rgb(255 255 255 / 0) 0px,
|
||||
rgb(255 255 255 / 0.13) 46px,
|
||||
rgb(255 255 255 / 0) 104px
|
||||
),
|
||||
linear-gradient(180deg, #45b3ec 0%, #93daf9 26%, #d8f2ff 34%, #58b6e8 37%, #3f9ad4 66%, #2b86c4 100%);
|
||||
background-image: url("/aero/background.webp");
|
||||
background-size: cover;
|
||||
background-position: center 42%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* The blobs are caustic light patches here, not glacier gradients. */
|
||||
.aero .ice-blob-a,
|
||||
.aero .ice-blob-b,
|
||||
.aero .ice-blob-c,
|
||||
.aero .ice-blob-d {
|
||||
background: radial-gradient(circle, rgb(255 255 255 / 0.85) 0%, rgb(191 240 255 / 0.5) 45%, transparent 74%);
|
||||
/* The drawn extras belong to the old CSS scene: off over the photo. */
|
||||
.aero .ice-scene::before,
|
||||
.aero .ice-scene::after,
|
||||
.aero .ice-blob {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* The orbs are the big soap bubbles: a glassy rim with a bright specular. */
|
||||
/* The orbs become extra bubbles over the photo. */
|
||||
.aero .ice-orb {
|
||||
background: radial-gradient(
|
||||
circle at 32% 28%,
|
||||
|
|
@ -289,48 +287,6 @@
|
|||
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);
|
||||
}
|
||||
|
||||
/* Reeds on the left, drawn on the scene's own pseudo-elements (the grain
|
||||
layer is at 2% opacity, so anything drawn on it is invisible). */
|
||||
.aero .ice-scene::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -6vw;
|
||||
bottom: -4vh;
|
||||
width: 40vw;
|
||||
height: 52vh;
|
||||
opacity: 0.75;
|
||||
background:
|
||||
linear-gradient(74deg, transparent 40%, rgb(34 150 84 / 0.85) 40% 41.6%, transparent 41.6%),
|
||||
linear-gradient(84deg, transparent 58%, rgb(74 222 128 / 0.7) 58% 59.4%, transparent 59.4%),
|
||||
linear-gradient(64deg, transparent 22%, rgb(20 130 74 / 0.8) 22% 23.6%, transparent 23.6%),
|
||||
linear-gradient(92deg, transparent 70%, rgb(56 189 116 / 0.6) 70% 71.2%, transparent 71.2%),
|
||||
linear-gradient(52deg, transparent 8%, rgb(15 110 64 / 0.7) 8% 9.8%, transparent 9.8%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* A city silhouette on the right: a row of blocks of different heights,
|
||||
anchored to the water line and fading upward. */
|
||||
.aero .ice-scene::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 3vw;
|
||||
bottom: 33vh;
|
||||
width: 36vw;
|
||||
height: 17vh;
|
||||
opacity: 0.38;
|
||||
background:
|
||||
linear-gradient(rgb(7 58 104 / 0.95), rgb(7 58 104 / 0.95)) 0% 100% / 9% 64% no-repeat,
|
||||
linear-gradient(rgb(7 58 104 / 0.95), rgb(7 58 104 / 0.95)) 12% 100% / 12% 100% no-repeat,
|
||||
linear-gradient(rgb(7 58 104 / 0.95), rgb(7 58 104 / 0.95)) 27% 100% / 8% 52% no-repeat,
|
||||
linear-gradient(rgb(7 58 104 / 0.95), rgb(7 58 104 / 0.95)) 38% 100% / 11% 78% no-repeat,
|
||||
linear-gradient(rgb(7 58 104 / 0.95), rgb(7 58 104 / 0.95)) 52% 100% / 7% 44% no-repeat,
|
||||
linear-gradient(rgb(7 58 104 / 0.95), rgb(7 58 104 / 0.95)) 62% 100% / 13% 88% no-repeat,
|
||||
linear-gradient(rgb(7 58 104 / 0.95), rgb(7 58 104 / 0.95)) 78% 100% / 9% 58% no-repeat,
|
||||
linear-gradient(rgb(7 58 104 / 0.95), rgb(7 58 104 / 0.95)) 90% 100% / 10% 72% no-repeat;
|
||||
mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.45) 75%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* The Aero gloss: the classic white top half with a horizon line. */
|
||||
.aero .card,
|
||||
.aero .glass-panel,
|
||||
|
|
@ -394,13 +350,45 @@
|
|||
.aero .ice-bubble-9 { width: 24px; height: 24px; left: 87%; --bubble-duration: 14s; --bubble-delay: -6s; --bubble-sway: -3vw; }
|
||||
.aero .ice-bubble-10 { width: 120px; height: 120px; left: 92%; --bubble-duration: 27s; --bubble-delay: -20s; --bubble-sway: -5vw; --bubble-opacity: 0.75; }
|
||||
|
||||
/* Glossy aqua primary buttons and segments. */
|
||||
/* Helper lines that sit straight on the wallpaper (the keyboard tip, the AI
|
||||
note) need their own surface in Aero: dark text on the grass measured
|
||||
2.5:1. A small glass chip fixes it without hiding the wallpaper. */
|
||||
.aero .hint-line {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.6rem;
|
||||
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);
|
||||
}
|
||||
|
||||
/* Liquid glass buttons: translucent, glossed top half, bright rim — the
|
||||
Vista/Aero button, not a solid fill. */
|
||||
.aero .grad-ice,
|
||||
.aero .btn-primary,
|
||||
.aero .segmented > button[aria-pressed="true"],
|
||||
.aero .segmented > a[aria-current="page"] {
|
||||
background-image: linear-gradient(180deg, #a5e4ff 0%, #38bdf8 52%, #0ea5e9 53%, #0284c7 100%);
|
||||
color: #052437;
|
||||
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);
|
||||
backdrop-filter: blur(10px) saturate(1.5);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(1.5);
|
||||
}
|
||||
|
||||
/* The glass itself, a touch more transparent so the wallpaper reads through
|
||||
it like liquid, still opaque enough for the dark text (contrast scanned). */
|
||||
.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);
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue