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
|
|
@ -41,7 +41,9 @@ export function CookieConsent() {
|
|||
<div
|
||||
role="region"
|
||||
aria-label={t("consent.title")}
|
||||
className="card pointer-events-auto flex max-w-xl flex-wrap items-center gap-3 p-3"
|
||||
/* Floating glass (blurred backdrop + rim + shadow): as a plain card it
|
||||
read as part of the page background instead of a notice above it. */
|
||||
className="glass-panel pointer-events-auto flex max-w-xl flex-wrap items-center gap-3 p-3"
|
||||
>
|
||||
<p className="min-w-0 flex-1 text-[12.5px] leading-snug text-[var(--text-muted)]">
|
||||
{t("consent.body")}{" "}
|
||||
|
|
|
|||
|
|
@ -31,6 +31,18 @@ export function IceBackdrop() {
|
|||
<span className="ice-orb ice-orb-3" />
|
||||
<span className="ice-orb ice-orb-4" />
|
||||
<span className="ice-orb ice-orb-5" />
|
||||
{/* Aero-only bubbles: display:none unless the aero theme is on, so they
|
||||
cost nothing in the other themes (see .ice-bubble in globals.css). */}
|
||||
<span className="ice-bubble ice-bubble-1" />
|
||||
<span className="ice-bubble ice-bubble-2" />
|
||||
<span className="ice-bubble ice-bubble-3" />
|
||||
<span className="ice-bubble ice-bubble-4" />
|
||||
<span className="ice-bubble ice-bubble-5" />
|
||||
<span className="ice-bubble ice-bubble-6" />
|
||||
<span className="ice-bubble ice-bubble-7" />
|
||||
<span className="ice-bubble ice-bubble-8" />
|
||||
<span className="ice-bubble ice-bubble-9" />
|
||||
<span className="ice-bubble ice-bubble-10" />
|
||||
<span className="ice-grain" />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { MoonIcon, SunIcon } from "@/components/icons";
|
|||
|
||||
const STORAGE_KEY = "freezmo.theme";
|
||||
|
||||
const THEME_COLORS = { light: "#f4f7fd", dark: "#0e1424", aero: "#3fa3e0" } as const;
|
||||
const THEME_COLORS = { light: "#f4f7fd", dark: "#0e1424", aero: "#2fa7e6" } as const;
|
||||
|
||||
/** The three themes. Aero is not a dark/light variant: it replaces the palette
|
||||
* and the scene, and the light/dark toggles hide while it is on. */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue