Aero goes underwater with rising bubbles; floating cookie notice; Czech title
Frutiger Aero, closer to the mock: - The scene is water now: sun shafts through a bright surface, caustic patches, reeds on the left, a city silhouette on the right, and ten soap bubbles that actually rise (own keyframes, varied sizes/speeds/sway; the spans are display:none outside aero so they cost nothing elsewhere, and they sit still under reduced motion). - Pale blue glass at 0.8: still reads as glass, but dark navy text clears 4.5:1 over the water. The phone tab bar mixes the sheet glass instead of the page — in aero the page *is* the water, which left its labels at 3.9:1. - The aero page-level text (muted/subtle) is much darker for the same reason. - The PWA status bar follows the new water blue (#2fa7e6). The cookie notice is floating glass now (blurred backdrop, rim, shadow): as a plain card it read as part of the page background instead of a notice. Czech: "Tvoje mraznička" -> "Tvůj mrazák" (library title), test updated. Contrast: 0 below-minimum findings and 0 axe violations across every screen, all three themes. Version 0.2.1, SW -> freezmo-v55.
This commit is contained in:
parent
e56653dae1
commit
67e2cefcfe
11 changed files with 194 additions and 71 deletions
210
app/globals.css
210
app/globals.css
|
|
@ -196,93 +196,138 @@
|
|||
--ice-grain-opacity: 0.045;
|
||||
}
|
||||
|
||||
/* Frutiger Aero — the third theme (Settings → Theme). A bright sky with
|
||||
clouds and a strip of grass, glossy glass with the classic horizon gloss,
|
||||
aqua accents. Token-driven like light/dark; the light/dark toggles hide
|
||||
while it is on (components/ThemeToggle.tsx). */
|
||||
/* Frutiger Aero — the third theme (Settings → Theme). An underwater scene:
|
||||
sunlight shafts, caustic patches, reeds on the left, a city silhouette on
|
||||
the right and bubbles rising through it; glass is a pale blue with the
|
||||
classic horizon gloss. Token-driven like light/dark; the light/dark toggles
|
||||
hide while it is on (components/ThemeToggle.tsx). */
|
||||
.aero {
|
||||
color-scheme: light;
|
||||
--page: #bfe4fb;
|
||||
--sidebar: #e3f4ff;
|
||||
--page: #1f86c9;
|
||||
--sidebar: #d6efff;
|
||||
--surface: #ffffff;
|
||||
--surface-raised: #ffffff;
|
||||
--surface-strong: rgb(255 255 255 / 0.72);
|
||||
--card-hover-bg: rgb(255 255 255 / 0.9);
|
||||
--surface-sunken: rgb(255 255 255 / 0.55);
|
||||
--hairline: rgb(255 255 255 / 0.8);
|
||||
--surface-sunken: rgb(255 255 255 / 0.5);
|
||||
--hairline: rgb(255 255 255 / 0.75);
|
||||
--card-border: var(--glass-border);
|
||||
--sidebar-divider: rgb(255 255 255 / 0.7);
|
||||
--hairline-soft: rgb(255 255 255 / 0.6);
|
||||
--sidebar-divider: rgb(255 255 255 / 0.65);
|
||||
--hairline-soft: rgb(255 255 255 / 0.55);
|
||||
--glass-tint: rgb(255 255 255 / 0.6);
|
||||
--text: #05203a; /* 12.6:1 on the aero glass */
|
||||
--text-muted: #1b3a54; /* 8.4:1 */
|
||||
--text-subtle: #16324a; /* 7.6:1 on glass, 5.4:1 on the sky */
|
||||
--text: #05203a; /* 10.9:1 on the aero glass */
|
||||
--text-muted: #0a2137; /* 11.5:1 on glass, 5.0:1 on the water */
|
||||
--text-subtle: #061726; /* 13.6:1 on glass, 5.5:1 on the water */
|
||||
/* A few components use the frost scale directly (hero descriptions, the
|
||||
wizard's step help): darker here, because they sit on the sky. */
|
||||
--color-frost-600: #1d3a55;
|
||||
--color-frost-700: #16324a;
|
||||
--hover: rgb(255 255 255 / 0.5);
|
||||
--focus: #0284c7;
|
||||
wizard's step help): darker here, because they sit on the water. */
|
||||
--color-frost-600: #16324a;
|
||||
--color-frost-700: #102a41;
|
||||
--hover: rgb(255 255 255 / 0.45);
|
||||
--focus: #0369a1;
|
||||
|
||||
--glass-bg: rgb(255 255 255 / 0.62);
|
||||
/* Pale blue glass, like the mock: bright enough for dark navy text. */
|
||||
--glass-bg: rgb(228 246 255 / 0.8);
|
||||
--glass-border: rgb(255 255 255 / 0.9);
|
||||
--glass-highlight: rgb(255 255 255 / 0.98);
|
||||
--glass-shadow: 0 18px 44px -20px rgb(2 90 150 / 0.5);
|
||||
--glass-solid-bg: rgb(255 255 255 / 0.82);
|
||||
--glass-sheet-bg: rgb(255 255 255 / 0.9);
|
||||
--glass-fallback: rgb(238 248 255 / 0.97);
|
||||
--glass-shadow: 0 18px 44px -20px rgb(2 62 110 / 0.55);
|
||||
--glass-solid-bg: rgb(232 248 255 / 0.9);
|
||||
--glass-sheet-bg: rgb(232 246 255 / 0.94);
|
||||
--glass-fallback: rgb(226 242 253 / 0.97);
|
||||
--nav-active-bg: rgb(255 255 255 / 0.85);
|
||||
--nav-active-border: rgb(14 165 233 / 0.65);
|
||||
--gate-card: rgb(255 255 255 / 0.66);
|
||||
--nav-active-border: rgb(14 165 233 / 0.7);
|
||||
--gate-card: rgb(226 244 255 / 0.7);
|
||||
--gate-callout-bg: rgb(255 255 255 / 0.6);
|
||||
--gate-callout-border: rgb(56 189 248 / 0.4);
|
||||
--field: rgb(255 255 255 / 0.75);
|
||||
--gate-callout-border: rgb(56 189 248 / 0.45);
|
||||
--field: rgb(255 255 255 / 0.78);
|
||||
--field-border: rgb(255 255 255 / 0.95);
|
||||
--shadow-gate: 0 30px 70px -34px rgb(2 62 110 / 0.45), 0 1px 2px rgb(2 62 110 / 0.08);
|
||||
--install-sheet: rgb(255 255 255 / 0.65);
|
||||
--install-card: rgb(255 255 255 / 0.75);
|
||||
--install-chip: rgb(255 255 255 / 0.6);
|
||||
--install-border: rgb(255 255 255 / 0.85);
|
||||
--shadow-card: 0 2px 4px rgb(2 62 110 / 0.1), 0 12px 28px -14px rgb(2 62 110 / 0.35);
|
||||
--shadow-gate: 0 30px 70px -34px rgb(2 62 110 / 0.5), 0 1px 2px rgb(2 62 110 / 0.08);
|
||||
--install-sheet: rgb(226 244 255 / 0.7);
|
||||
--install-card: rgb(236 248 255 / 0.78);
|
||||
--install-chip: rgb(255 255 255 / 0.62);
|
||||
--install-border: rgb(255 255 255 / 0.88);
|
||||
--shadow-card: 0 2px 4px rgb(2 62 110 / 0.12), 0 14px 30px -16px rgb(2 62 110 / 0.4);
|
||||
--card-shadow: var(--shadow-card);
|
||||
--shadow-card-hover: 0 26px 60px -26px rgb(2 90 150 / 0.55), 0 3px 8px rgb(2 90 150 / 0.2);
|
||||
--shadow-card-hover: 0 26px 60px -26px rgb(2 90 150 / 0.6), 0 3px 8px rgb(2 90 150 / 0.25);
|
||||
|
||||
/* The scene: sky, clouds, bubbles, grass. */
|
||||
--ice-base-top: #3fa3e0;
|
||||
--ice-base-bottom: #d9f1ff;
|
||||
--ice-blob-opacity: 0.55;
|
||||
--ice-orb-opacity: 0.55;
|
||||
/* Scene tokens: the water itself is painted below. */
|
||||
--ice-base-top: #2fa7e6;
|
||||
--ice-base-bottom: #0a5490;
|
||||
--ice-blob-opacity: 0.5;
|
||||
--ice-orb-opacity: 0.6;
|
||||
--ice-grain-opacity: 0.02;
|
||||
}
|
||||
|
||||
/* The blobs are clouds here, not glacier gradients. */
|
||||
/* The water: sun shafts through a bright surface, deepening below. */
|
||||
.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%);
|
||||
}
|
||||
|
||||
/* 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.95) 0%, rgb(255 255 255 / 0.6) 42%, transparent 72%);
|
||||
background: radial-gradient(circle, rgb(255 255 255 / 0.85) 0%, rgb(191 240 255 / 0.5) 45%, transparent 74%);
|
||||
}
|
||||
|
||||
/* The orbs are soap bubbles: a glassy rim with a bright specular. */
|
||||
/* The orbs are the big soap bubbles: a glassy rim with a bright specular. */
|
||||
.aero .ice-orb {
|
||||
background: radial-gradient(
|
||||
circle at 30% 25%,
|
||||
circle at 32% 28%,
|
||||
rgb(255 255 255 / 0.95) 0%,
|
||||
rgb(224 247 255 / 0.45) 20%,
|
||||
rgb(125 211 252 / 0.2) 52%,
|
||||
rgb(56 189 248 / 0.35) 100%
|
||||
rgb(226 248 255 / 0.4) 22%,
|
||||
rgb(125 211 252 / 0.14) 56%,
|
||||
rgb(56 189 248 / 0.38) 100%
|
||||
);
|
||||
box-shadow: 0 16px 34px -18px rgb(2 90 150 / 0.4), inset 0 -8px 18px -10px rgb(2 90 150 / 0.35);
|
||||
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);
|
||||
}
|
||||
|
||||
/* A strip of grass along the bottom, like the wallpapers it comes from. */
|
||||
/* 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;
|
||||
inset-inline: 0;
|
||||
bottom: 0;
|
||||
height: 18vh;
|
||||
background: linear-gradient(180deg, rgb(134 239 172 / 0) 0%, rgb(74 222 128 / 0.5) 55%, rgb(22 163 74 / 0.6) 100%);
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -296,13 +341,59 @@
|
|||
.aero .gate-card {
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
rgb(255 255 255 / 0.7) 0%,
|
||||
rgb(255 255 255 / 0.28) 46%,
|
||||
rgb(255 255 255 / 0.04) 47%,
|
||||
rgb(255 255 255 / 0.22) 100%
|
||||
rgb(255 255 255 / 0.75) 0%,
|
||||
rgb(255 255 255 / 0.3) 46%,
|
||||
rgb(255 255 255 / 0.06) 47%,
|
||||
rgb(255 255 255 / 0.24) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Rising bubbles. Hidden entirely in the other themes, so they cost nothing
|
||||
there; under reduced motion they sit still instead of rising. */
|
||||
.ice-bubble {
|
||||
display: none;
|
||||
}
|
||||
.aero .ice-bubble {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -14vh;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
background: radial-gradient(
|
||||
circle at 32% 28%,
|
||||
rgb(255 255 255 / 0.95) 0%,
|
||||
rgb(226 248 255 / 0.38) 24%,
|
||||
rgb(125 211 252 / 0.12) 58%,
|
||||
rgb(56 189 248 / 0.34) 100%
|
||||
);
|
||||
box-shadow: inset -6px -10px 16px -8px rgb(3 74 124 / 0.45), inset 6px 8px 14px -8px rgb(255 255 255 / 0.9), 0 10px 22px -14px rgb(3 74 124 / 0.5);
|
||||
animation: aero-bubble-rise var(--bubble-duration, 20s) linear infinite;
|
||||
animation-delay: var(--bubble-delay, 0s);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
.ice-paused .ice-bubble {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes aero-bubble-rise {
|
||||
0% { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0; }
|
||||
6% { opacity: var(--bubble-opacity, 0.9); }
|
||||
50% { transform: translate3d(var(--bubble-sway, 3vw), -52vh, 0) scale(1); }
|
||||
94% { opacity: var(--bubble-opacity, 0.9); }
|
||||
100% { transform: translate3d(calc(var(--bubble-sway, 3vw) * -0.5), -104vh, 0) scale(1.06); opacity: 0; }
|
||||
}
|
||||
|
||||
.aero .ice-bubble-1 { width: 104px; height: 104px; left: 7%; --bubble-duration: 19s; --bubble-delay: -2s; --bubble-sway: 4vw; }
|
||||
.aero .ice-bubble-2 { width: 34px; height: 34px; left: 16%; --bubble-duration: 13s; --bubble-delay: -7s; --bubble-sway: -3vw; }
|
||||
.aero .ice-bubble-3 { width: 64px; height: 64px; left: 28%; --bubble-duration: 22s; --bubble-delay: -12s; --bubble-sway: 3vw; }
|
||||
.aero .ice-bubble-4 { width: 20px; height: 20px; left: 38%; --bubble-duration: 11s; --bubble-delay: -4s; --bubble-sway: 2vw; }
|
||||
.aero .ice-bubble-5 { width: 88px; height: 88px; left: 48%; --bubble-duration: 25s; --bubble-delay: -16s; --bubble-sway: -4vw; }
|
||||
.aero .ice-bubble-6 { width: 28px; height: 28px; left: 58%; --bubble-duration: 12s; --bubble-delay: -9s; --bubble-sway: 3vw; }
|
||||
.aero .ice-bubble-7 { width: 72px; height: 72px; left: 68%; --bubble-duration: 20s; --bubble-delay: -5s; --bubble-sway: -2vw; }
|
||||
.aero .ice-bubble-8 { width: 46px; height: 46px; left: 78%; --bubble-duration: 16s; --bubble-delay: -13s; --bubble-sway: 4vw; }
|
||||
.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. */
|
||||
.aero .grad-ice,
|
||||
.aero .btn-primary,
|
||||
|
|
@ -465,6 +556,8 @@ body:has(.overlay-open) :is(.app-header, .segmented, .tabbar, .cookie-notice) {
|
|||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ice-blob { animation: none; }
|
||||
/* Bubbles sit still (and visible) instead of rising. */
|
||||
.aero .ice-bubble { animation: none; opacity: 0.55; transform: translate3d(0, -60vh, 0); }
|
||||
/* Orbs go back to the pre-rise static layout (a paused animation is not
|
||||
applied at all in Chrome, which would leave them parked below the fold)
|
||||
and give their composited layers back. */
|
||||
|
|
@ -736,6 +829,11 @@ body:has(.overlay-open) :is(.app-header, .segmented, .tabbar, .cookie-notice) {
|
|||
.tabbar {
|
||||
background: color-mix(in oklab, var(--page) 84%, transparent);
|
||||
}
|
||||
/* Aero's page is the water itself, so mixing it would leave a saturated
|
||||
blue bar under dark labels (measured ~3.9:1). Mix the pale sheet glass. */
|
||||
.aero .tabbar {
|
||||
background: color-mix(in oklab, var(--glass-sheet-bg) 84%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
/* Soft tinted chip for activity types (a hint of colour, not a rainbow) -- */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue