/* ============================================================================
frutiger-aero.css — "Cascadia Aero" skin (EXPLORATION / preview)
----------------------------------------------------------------------------
A non-destructive reskin that walks the Cascadia OS chrome forward ~a decade,
from flat Windows-95 bevels into the early-2000s glossy-glass OS look:
Mac OS X "Aqua" — lickable lozenge gloss, gel controls + scrollbars,
water-droplet reflections, the reflective dock
Windows XP "Luna" — candy taskbar, rounded glossy pills, Bliss sky/hill
Windows Vista/7 "Aero"— frosted glass (backdrop-filter), bright top sheen,
the superbar with big glossy pinned icons, aurora
OUR TWIST: it stays Cascadia / Pacific-Northwest, rendered in glossy chrome — not
XP's literal blue-and-green. The 2026-06-26 palette is multi-hue (see L38-46 + docs/
aero-design-system.md "## Locked palette"): SKY (#5AB4EC/#1E7FC4/#125E9E) is the
chrome on title bars/taskbar/orb/selection; EVERGREEN (#1B7A3F/#43C463) is the link +
accent pop; AQUA (#3FC4DA/#0FA3B1/#0A5C6A) is the gel-icon/disc hue. There is NO
orange/tangerine/coral in Aero. Structure, layout, and behaviour are UNTOUCHED;
this only restyles surfaces.
ACTIVATION: everything is scoped under :root[data-skin="aero"]. With no skin
attribute the base Win95 look is byte-for-byte unchanged. Imported LAST in
Layout.astro so the cascade lands on top.
⚠ STRUCTURE RULE (learned the hard way): Astro's dev CSS pipeline DROPS a whole
rule that mixes custom properties with regular declarations. So every token
block below is PURE custom-properties; real declarations (font-smoothing) live
in their own rule (§2). Don't merge them.
Font discipline (the "layered-era" call): chrome + reading text become a
humanist sans (the actual era faces). --font-mono (Departure Mono) is left
ALONE, so the genuinely-retro surfaces that already use it — the contact
terminal, BBS reader, LCD clock, timestamps, code — keep their period type.
That mismatch then reads as "old app running on a newer OS", which is exactly
the lived-in computing texture we want.
============================================================================ */
/* ============================================================
1. TOKENS — LIGHT ("Cascadia Aero — Daylight") [pure custom-props]
------------------------------------------------------------
PALETTE (multi-hue, refactored 2026-06-26 — full ramps + role split + tokens
live in docs/aero-design-system.md "## Locked palette"). Cascadia / PNW landscape:
Glacier #F4FBFE glass white — paper, gloss highlights
Mist #DFF1FA pale sky — chrome surface / light fills
SKY #5AB4EC / #1E7FC4 / deep #125E9E chrome: titlebars, taskbar, orb, buttons, selection
AQUA #3FC4DA / #0FA3B1 / #0A5C6A gel icons + disc transport (support hue, the old teal)
EVERGREEN #1B7A3F links / #43C463 bright the accent/pop — replaces the retired tangerine
Deep Fjord #06212F night ground + ink
THERE IS NO ORANGE IN AERO. (Cascadia 95 retro keeps teal+tangerine — base tokens.css.)
============================================================ */
:root[data-skin="aero"] {
--color-desktop: #BFEFFF;
--color-surface: #E4F2FC;
--color-surface-2: #FBFDFF;
--color-surface-sunken: #D5E8F5;
--color-surface-hover: #F3FAFF;
--color-text: #0E2A38;
--color-text-muted: #45616F;
--color-text-inverse: #FFFFFF;
--color-on-accent: #FFFFFF;
--color-titlebar-a: #0C7C8C;
--color-titlebar-b: #41C4D7;
--color-titlebar-text: #FFFFFF;
--color-titlebar-inactive: #9FBEC8;
/* === Frutiger Aero multi-hue palette (Elisha 2026-06-26) ===
Retire the static teal-everything + the tangerine pop. Three nature-grounded
hues so the UI reads as the Cascadia landscape, not one flat color:
SKY chrome — titlebars, taskbar, primary buttons, start orb
AQUA gel — icons, scrollbar (the existing teal, demoted to a support hue)
EVERGREEN accent — links, CTAs, selected/active (the pop; replaces orange)
Rolling out surface by surface (proof: home chrome first). */
--aero-sky-light: #5AB4EC;
--aero-sky: #1E7FC4;
--aero-sky-deep: #125E9E;
--aero-green-bright: #43C463;
--aero-green: #2E9E4F;
--aero-green-deep: #1B7A3F;
/* Accent = evergreen (links/pop). Deep enough for AA on the near-white paper;
bright grass for decorative/hover. Tangerine is retired. */
--color-accent: #1B7A3F;
--color-accent-hover: #14622F;
--color-accent-soft: #DCF2E2;
--color-accent-bright: #43C463;
/* Category-chip tints stay a VARIED set (they color-code media types), but the
two that were tied to the old tangerine accent (book, art-music) are recolored
to cool/nature hues so no orange survives. Retro keeps the base terracotta. */
--tint-book: #2C6FA8; /* lake blue (was terracotta) */
--tint-art-music: #11857C; /* deep teal-green (was coral) */
/* Bevels → gloss/glass edges (the ~50-surface lever). */
--bevel-light: rgba(255, 255, 255, 0.95);
--bevel-dark: rgba(70, 130, 170, 0.42);
--bevel-darker: rgba(86, 150, 190, 0.55);
--bevel-out: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -9px 13px -9px rgba(12, 70, 110, 0.18);
--bevel-in: inset 0 1px 3px rgba(12, 70, 110, 0.20), inset 0 -1px 0 rgba(255, 255, 255, 0.55);
--shadow-hard: 0 2px 8px rgba(16, 70, 110, 0.22);
--shadow-hard-lg: 0 10px 30px rgba(16, 70, 110, 0.32);
/* Humanist sans for chrome + reading; mono left untouched on purpose. */
--font-display-mega: "Segoe UI", "Lucida Grande", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
--font-display: "Segoe UI", "Lucida Grande", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
--font-body: "Segoe UI", "Lucida Grande", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
/* Aero body stays 20px: its humanist outline face scales cleanly; the base
token dropped to 16px for retro's bitmap grid (tokens.css). */
--text-base: 1.25rem;
/* SHELL BLUR — one knob for the big glass surfaces (windows, dialogs,
menus; formerly hardcoded blur(18px) on each). 14px is visually
indistinguishable from 18px over the photo wallpapers (A/B verified)
and meaningfully cheaper to composite; phones drop to 10px because the
weakest GPUs pay the most for backdrop re-sampling on scroll. */
--aero-shell-blur: 14px;
--window-border: 1px;
/* Skin-local helpers. */
--aero-radius: 8px;
--aero-radius-lg: 13px;
--aero-pill: 999px;
/* Button gloss: a SOFT convex sheen (calmed from the old hard-break "candy cap"
so on-paper buttons read like the player's gel, not plastic). Gentle white
top, smooth midbody, faint rim-bounce — NO glary 50% specular step. */
--aero-gloss:
linear-gradient(180deg,
rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.36) 24%,
rgba(255,255,255,0.10) 50%, rgba(222,239,250,0.03) 62%,
rgba(198,226,244,0.16) 83%, rgba(223,240,251,0.40) 100%);
--aero-gloss-hover:
linear-gradient(180deg,
rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.48) 24%,
rgba(255,255,255,0.16) 50%, rgba(226,242,252,0.05) 62%,
rgba(206,232,248,0.24) 83%, rgba(232,245,255,0.50) 100%);
--aero-gloss-press:
linear-gradient(180deg,
rgba(255,255,255,0.28) 0%, rgba(190,224,243,0.48) 42%,
rgba(166,210,236,0.50) 72%, rgba(186,222,243,0.56) 100%);
/* Sky candy base (chrome) — primary buttons / start orb / active tab / selected.
Was Aurora-Teal; moved to sky so chrome reads blue, green carries links/life. */
--aero-sky-base: linear-gradient(180deg, #5AB4EC 0%, #2E8FCE 49%, #1E7FC4 50%, #1668AE 100%);
--aero-sky-base-hover: linear-gradient(180deg, #6FC2F2 0%, #3C9CD8 49%, #2589CE 50%, #1B72BA 100%);
--aero-sky-base-press: linear-gradient(180deg, #1A72B6 0%, #155F9C 100%);
--aero-teal-gloss:
linear-gradient(180deg,
rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 18%,
rgba(255,255,255,0.18) 45%, rgba(255,255,255,0.05) 50%,
rgba(255,255,255,0.00) 50%, rgba(255,255,255,0.10) 82%,
rgba(255,255,255,0.22) 100%);
--aero-teal-gloss-hover:
linear-gradient(180deg,
rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.66) 18%,
rgba(255,255,255,0.24) 45%, rgba(255,255,255,0.08) 50%,
rgba(255,255,255,0.00) 50%, rgba(255,255,255,0.14) 82%,
rgba(255,255,255,0.30) 100%);
/* Bigger bar in Aero (Elisha: retro's 44px reads too small here). This wins over
the :root base on the same element, so --taskbar-height recomputes and
every layout calc that references it follows. Retro stays 44px. */
--taskbar-core-height: 52px;
/* Dark-glass taskbar (the bar reads dark-glass in BOTH themes — Skyweaver redux). */
--aero-tb-blur: blur(20px) saturate(1.6) brightness(1.06);
--aero-tb-base: rgba(14, 34, 52, 0.62);
--aero-tb-base-2: rgba(8, 22, 38, 0.74);
--aero-tb-hair: rgba(255, 255, 255, 0.85);
--aero-tb-glow: rgba(150, 205, 245, 0.22);
/* Gel app-tile + scrollbar thumb (Aqua-dock convex). */
--gel-spec:
radial-gradient(140% 90% at 50% -28%,
rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.78) 18%,
rgba(255,255,255,0.30) 40%, rgba(255,255,255,0.04) 50%,
rgba(255,255,255,0) 52%);
--gel-floor:
radial-gradient(120% 70% at 50% 122%,
rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.10) 34%, rgba(255,255,255,0) 60%);
--gel-tint:
linear-gradient(180deg,
rgba(232,246,255,0.30) 0%, rgba(190,226,248,0.16) 50%, rgba(150,205,240,0.22) 100%);
--gel-shadow:
inset 0 1px 0 rgba(255,255,255,0.92),
inset 0 -3px 6px -2px rgba(12,70,110,0.22),
0 2px 3px rgba(16,70,110,0.16),
0 6px 14px -4px rgba(16,70,110,0.26);
--gel-glow: 0 0 16px rgba(80,200,230,0.55);
/* Shared idioms (the critic's "tokenize first" — stops 40 selectors drifting):
ONE focus ring, ONE hover signal, a 3-step elevation scale, a reusable specular
sweep gradient for interior ::before pseudos. */
--aero-focus: #0E7C93; /* darkened from #1F9DC4: the lighter cyan was only 2.5:1 on sunken fills (WCAG 1.4.11 wants 3:1); still reads Aero-cyan, clears 3:1 on all light fills + the dark taskbar */
/* Unified HOVER signal (Elisha: the outer cyan bloom read cliché; the music-track
row that "kinda works" lights up CONTAINED inside its well). So this is no longer
an outer halo — it's a Win7-explorer-style contained edge: a crisp 1px inner
cyan border + a soft inner bottom-up fill-light. Pairs with each surface's own
background:hover fill. Reused ~45 places, so they all stay consistent. */
--aero-glow-cyan:
inset 0 0 0 1px rgba(130, 208, 234, 0.52),
inset 0 -8px 10px -8px rgba(120, 208, 234, 0.34);
--aero-elev-1: 0 2px 6px rgba(16, 70, 110, 0.16);
--aero-elev-2: 0 6px 16px rgba(16, 70, 110, 0.22);
--aero-elev-3: 0 14px 38px rgba(16, 70, 110, 0.30);
--aero-sweep:
radial-gradient(140% 100% at 50% -28%,
rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 80%);
}
/* ============================================================
1b. TOKENS — DARK ("Cascadia Aero — Nightfall") [pure custom-props]
============================================================ */
:root[data-skin="aero"][data-theme="dark"] {
--color-desktop: #061A2A;
--color-surface: #103247;
--color-surface-2: #0E2B3D;
--color-surface-sunken: #0A2334;
--color-surface-hover: #16455F;
--color-text: #DCEEF6;
--color-text-muted: #93B6C6;
--color-text-inverse: #FFFFFF;
--color-on-accent: #04141F;
--color-titlebar-a: #12568C;
--color-titlebar-b: #2E84C0;
--color-titlebar-text: #EAF6FF;
--color-titlebar-inactive: #243F5A;
/* accent = bright evergreen for dark (links on dark glass + green-on-dark CTAs) */
--color-accent: #45C46E;
--color-accent-hover: #6AD98D;
--color-accent-soft: #123424;
--color-accent-bright: #5BD082;
--bevel-light: rgba(160, 220, 245, 0.35);
--bevel-dark: rgba(2, 14, 24, 0.65);
--bevel-darker: rgba(120, 195, 225, 0.30);
--bevel-out: inset 0 1px 0 rgba(180, 230, 250, 0.30), inset 0 -9px 13px -9px rgba(0, 10, 20, 0.55);
--bevel-in: inset 0 1px 4px rgba(0, 12, 22, 0.55), inset 0 -1px 0 rgba(160, 220, 245, 0.18);
--shadow-hard: 0 2px 10px rgba(0, 14, 26, 0.5);
--shadow-hard-lg: 0 12px 36px rgba(0, 14, 26, 0.62);
/* dark candy (white-blue sheen over dark surfaces so buttons aren't blinding) */
--aero-gloss:
linear-gradient(180deg,
rgba(200,238,255,0.40) 0%, rgba(150,205,235,0.22) 18%,
rgba(110,170,205,0.10) 45%, rgba(40,90,120,0.06) 50%,
rgba(20,60,84,0.00) 50%, rgba(20,60,84,0.30) 82%, rgba(28,72,100,0.46) 100%);
--aero-gloss-hover:
linear-gradient(180deg,
rgba(210,244,255,0.52) 0%, rgba(160,212,240,0.30) 18%,
rgba(120,180,212,0.14) 45%, rgba(48,100,130,0.08) 50%,
rgba(24,66,90,0.00) 50%, rgba(28,74,100,0.40) 82%, rgba(36,84,112,0.56) 100%);
--aero-gloss-press:
linear-gradient(180deg,
rgba(20,60,84,0.55) 0%, rgba(14,46,66,0.6) 50%, rgba(20,60,84,0.5) 100%);
--aero-tb-blur: blur(22px) saturate(1.5) brightness(1.02);
--aero-tb-base: rgba(6, 20, 34, 0.70);
--aero-tb-base-2: rgba(3, 12, 24, 0.82);
--aero-tb-hair: rgba(190, 232, 255, 0.55);
--aero-tb-glow: rgba(120, 190, 230, 0.16);
--gel-spec:
radial-gradient(140% 90% at 50% -28%,
rgba(190,235,255,0.70) 0%, rgba(190,235,255,0.46) 18%,
rgba(190,235,255,0.18) 40%, rgba(190,235,255,0.03) 50%,
rgba(190,235,255,0) 52%);
--gel-tint:
linear-gradient(180deg,
rgba(34,86,118,0.34) 0%, rgba(18,56,82,0.22) 50%, rgba(12,46,68,0.30) 100%);
--gel-shadow:
inset 0 1px 0 rgba(180,230,250,0.30),
inset 0 -3px 6px -2px rgba(0,12,22,0.40),
0 2px 3px rgba(0,12,22,0.30),
0 6px 14px -4px rgba(0,12,22,0.55);
--gel-glow: 0 0 16px rgba(70,190,225,0.45);
--aero-focus: #6FDDF2;
--aero-glow-cyan:
inset 0 0 0 1px rgba(125, 205, 235, 0.42),
inset 0 -8px 10px -8px rgba(110, 198, 228, 0.30);
--aero-elev-1: 0 2px 8px rgba(0, 12, 22, 0.40);
--aero-elev-2: 0 6px 18px rgba(0, 12, 22, 0.50);
--aero-elev-3: 0 14px 40px rgba(0, 14, 26, 0.55);
--aero-sweep:
radial-gradient(140% 100% at 50% -28%,
rgba(190,235,255,0.30) 0%, rgba(190,235,255,0.10) 50%, rgba(190,235,255,0) 80%);
}
@media (prefers-color-scheme: dark) {
:root[data-skin="aero"]:not([data-theme]) {
--color-desktop: #061A2A;
--color-surface: #103247;
--color-surface-2: #0E2B3D;
--color-surface-sunken: #0A2334;
--color-surface-hover: #16455F;
--color-text: #DCEEF6;
--color-text-muted: #93B6C6;
--color-text-inverse: #FFFFFF;
--color-on-accent: #04141F;
--color-titlebar-a: #12568C;
--color-titlebar-b: #2E84C0;
--color-titlebar-text: #EAF6FF;
--color-titlebar-inactive: #243F5A;
--color-accent: #45C46E;
--color-accent-hover: #6AD98D;
--color-accent-soft: #123424;
--color-accent-bright: #5BD082;
--bevel-light: rgba(160, 220, 245, 0.35);
--bevel-dark: rgba(2, 14, 24, 0.65);
--bevel-darker: rgba(120, 195, 225, 0.30);
--bevel-out: inset 0 1px 0 rgba(180, 230, 250, 0.30), inset 0 -9px 13px -9px rgba(0, 10, 20, 0.55);
--bevel-in: inset 0 1px 4px rgba(0, 12, 22, 0.55), inset 0 -1px 0 rgba(160, 220, 245, 0.18);
--shadow-hard: 0 2px 10px rgba(0, 14, 26, 0.5);
--shadow-hard-lg: 0 12px 36px rgba(0, 14, 26, 0.62);
--aero-gloss:
linear-gradient(180deg,
rgba(200,238,255,0.40) 0%, rgba(150,205,235,0.22) 18%,
rgba(110,170,205,0.10) 45%, rgba(40,90,120,0.06) 50%,
rgba(20,60,84,0.00) 50%, rgba(20,60,84,0.30) 82%, rgba(28,72,100,0.46) 100%);
--aero-gloss-hover:
linear-gradient(180deg,
rgba(210,244,255,0.52) 0%, rgba(160,212,240,0.30) 18%,
rgba(120,180,212,0.14) 45%, rgba(48,100,130,0.08) 50%,
rgba(24,66,90,0.00) 50%, rgba(28,74,100,0.40) 82%, rgba(36,84,112,0.56) 100%);
--aero-gloss-press:
linear-gradient(180deg,
rgba(20,60,84,0.55) 0%, rgba(14,46,66,0.6) 50%, rgba(20,60,84,0.5) 100%);
--aero-tb-blur: blur(22px) saturate(1.5) brightness(1.02);
--aero-tb-base: rgba(6, 20, 34, 0.70);
--aero-tb-base-2: rgba(3, 12, 24, 0.82);
--aero-tb-hair: rgba(190, 232, 255, 0.55);
--aero-tb-glow: rgba(120, 190, 230, 0.16);
--gel-spec:
radial-gradient(140% 90% at 50% -28%,
rgba(190,235,255,0.70) 0%, rgba(190,235,255,0.46) 18%,
rgba(190,235,255,0.18) 40%, rgba(190,235,255,0.03) 50%,
rgba(190,235,255,0) 52%);
--gel-tint:
linear-gradient(180deg,
rgba(34,86,118,0.34) 0%, rgba(18,56,82,0.22) 50%, rgba(12,46,68,0.30) 100%);
--gel-shadow:
inset 0 1px 0 rgba(180,230,250,0.30),
inset 0 -3px 6px -2px rgba(0,12,22,0.40),
0 2px 3px rgba(0,12,22,0.30),
0 6px 14px -4px rgba(0,12,22,0.55);
--gel-glow: 0 0 16px rgba(70,190,225,0.45);
--aero-focus: #6FDDF2;
--aero-glow-cyan:
inset 0 0 0 1px rgba(125, 205, 235, 0.42),
inset 0 -8px 10px -8px rgba(110, 198, 228, 0.30);
--aero-elev-1: 0 2px 8px rgba(0, 12, 22, 0.40);
--aero-elev-2: 0 6px 18px rgba(0, 12, 22, 0.50);
--aero-elev-3: 0 14px 40px rgba(0, 14, 26, 0.55);
--aero-sweep:
radial-gradient(140% 100% at 50% -28%,
rgba(190,235,255,0.30) 0%, rgba(190,235,255,0.10) 50%, rgba(190,235,255,0) 80%);
}
}
/* ============================================================
2. FONT RENDERING [real-props only — kept separate by the structure rule]
Base :root forces -webkit-font-smoothing:none for the pixel bitmap; a humanist
sans needs antialiasing. (No `font-smooth` — it's the non-standard prop that
helped poison the mixed rule.)
============================================================ */
:root[data-skin="aero"] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* ============================================================
3. WINDOWS / DIALOGS — frosted glass frame + curved specular sweep
(no overflow:hidden — the ::before self-clips via its own radius, and
clipping the window would eat resize/maximize/mobile-sheet affordances)
============================================================ */
:root[data-skin="aero"] .window,
:root[data-skin="aero"] .os-dialog {
position: relative;
/* §41 LIGHT-MODE GLASS: the old near-white, low-range surface read as flat
frosted-plastic. Deeper tonal range top→bottom + a crisp dark bottom edge +
a soft inner-bottom deepening give the body real glass depth, and the
specular below now has a mid-tone to pop against. (Dark mode is unaffected —
it's overridden at L401.) */
border: 1px solid rgba(70, 136, 178, 0.62);
border-radius: var(--aero-radius-lg);
background:
linear-gradient(180deg,
rgba(247, 252, 255, 0.66) 0%,
rgba(212, 233, 247, 0.56) 46%,
rgba(190, 218, 239, 0.62) 100%);
-webkit-backdrop-filter: blur(var(--aero-shell-blur, 14px)) saturate(1.6) brightness(1.02);
backdrop-filter: blur(var(--aero-shell-blur, 14px)) saturate(1.6) brightness(1.02);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.90),
inset 0 0 0 1px rgba(255, 255, 255, 0.20),
inset 0 -14px 22px rgba(60, 122, 168, 0.12),
inset 0 -1px 0 rgba(16, 70, 110, 0.22),
0 12px 34px rgba(16, 70, 110, 0.32),
0 2px 8px rgba(16, 70, 110, 0.20);
}
:root[data-skin="aero"] .window.is-active,
:root[data-skin="aero"] .os-dialog {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.92),
inset 0 0 0 1px rgba(255, 255, 255, 0.22),
0 18px 48px rgba(16, 70, 110, 0.38),
0 3px 10px rgba(16, 70, 110, 0.22);
}
:root[data-skin="aero"] .window::before,
:root[data-skin="aero"] .os-dialog::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 38%;
pointer-events: none;
z-index: 0;
border-radius: calc(var(--aero-radius-lg) - 1px) calc(var(--aero-radius-lg) - 1px) 0 0;
background:
radial-gradient(140% 100% at 50% -28%,
rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.55) 34%,
rgba(255, 255, 255, 0.16) 62%, rgba(255, 255, 255, 0) 80%),
linear-gradient(180deg,
rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.10) 50%,
rgba(255, 255, 255, 0) 100%);
mix-blend-mode: screen;
}
:root[data-skin="aero"][data-theme="dark"] .window,
:root[data-skin="aero"][data-theme="dark"] .os-dialog {
border-color: rgba(120, 195, 225, 0.30);
background:
linear-gradient(180deg,
rgba(16, 50, 71, 0.62) 0%, rgba(14, 43, 61, 0.55) 46%, rgba(10, 35, 52, 0.58) 100%);
-webkit-backdrop-filter: blur(var(--aero-shell-blur, 14px)) saturate(1.5) brightness(0.92);
backdrop-filter: blur(var(--aero-shell-blur, 14px)) saturate(1.5) brightness(0.92);
box-shadow:
inset 0 1px 0 rgba(180, 230, 250, 0.28),
inset 0 0 0 1px rgba(160, 220, 245, 0.10),
0 14px 40px rgba(0, 14, 26, 0.55),
0 3px 10px rgba(0, 14, 26, 0.40);
}
:root[data-skin="aero"][data-theme="dark"] .window::before,
:root[data-skin="aero"][data-theme="dark"] .os-dialog::before {
background:
radial-gradient(140% 100% at 50% -28%,
rgba(190, 235, 255, 0.30) 0%, rgba(190, 235, 255, 0.16) 38%,
rgba(190, 235, 255, 0) 78%),
linear-gradient(180deg,
rgba(190, 235, 255, 0.14) 0%, rgba(190, 235, 255, 0) 100%);
}
/* ---- Text selection → cool deep-teal (the base highlights with the warm accent;
in a cool Aero OS that clashes, and real Aero/Vista used a cool selection). #0E7C93
is the AQUA-family / --aero-focus(light) value — deliberately a different hue family
from the SKY-chrome selected rows/tabs (selection is reading-text highlight, not a
selected control). Outranks the bare base `::selection` (0,0,0,1) via the skin scope.
Retro keeps its tangerine. -------- */
:root[data-skin="aero"] ::selection {
/* #0E7C93 (was #1C8CA6): white-on = 4.86:1, clears WCAG 2.1 SC 1.4.3 (4.5:1) for
selected reading text in BOTH themes; the old teal was 3.92:1. Same token as
--aero-focus(light). Adversarial-audit finding #1 (2026-06-27). */
background: #0E7C93;
color: #fff;
text-shadow: none;
}
/* ============================================================
4. TITLE BARS + BODY — teal glass titlebar w/ specular; near-opaque
reading body (translucent enough to read as glass, opaque enough for text)
============================================================ */
:root[data-skin="aero"] .window__titlebar,
:root[data-skin="aero"] .os-dialog__bar {
position: relative;
z-index: 1;
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.12) 46%,
rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.08) 100%),
linear-gradient(90deg, rgba(18, 94, 158, 0.92), rgba(90, 180, 236, 0.88));
border-bottom: 1px solid rgba(10, 58, 96, 0.45);
border-radius: calc(var(--aero-radius-lg) - 1px) calc(var(--aero-radius-lg) - 1px) 0 0;
/* Full-perimeter bright inner rim (the doc's glass tell: a perimeter rim
sandwiched by the dark bottom hairline) — not a top-only highlight. */
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
text-shadow: 0 1px 1px rgba(0, 40, 55, 0.45);
}
:root[data-skin="aero"] .window__titlebar::before,
:root[data-skin="aero"] .os-dialog__bar::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
/* Gentle top REFLECTION band (a glass tell), not the strong painted spotlight
that read as the "fake highlighted top." */
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 42%,
rgba(255, 255, 255, 0) 62%);
}
:root[data-skin="aero"] .window:not(.is-active) .window__titlebar {
/* inactive = ghostlier glass (more transmissive, desaturated) than the active bar */
background:
linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 50%),
linear-gradient(90deg, rgba(150,180,192,0.44), rgba(186,208,216,0.30));
}
/* Title TEXT — kill the inherited Win95 treatment (UPPERCASE + 1.5px tracking +
hard 1px black shadow). Real Aqua/Aero titlebars are TITLE-CASE, ~semibold,
with a soft cool shadow. The titles are already nicely cased in source
("Build Log", "CD Player", "resume.doc"), so text-transform:none reads right. */
:root[data-skin="aero"] .window__title,
:root[data-skin="aero"] .os-dialog__title {
text-transform: none;
letter-spacing: normal;
font-weight: 600;
/* dark halo (not a single soft shadow) — carries AA for the white glyphs now
that the glass bar lets the bright wallpaper through behind them. .os-dialog__title
shares the identical transmissive glass bar (404 page, contact "Message sent" toast)
so it needs the same halo — it was missing it. Adversarial-audit finding #2. */
text-shadow:
0 1px 1px rgba(0, 30, 42, 0.70),
0 0 4px rgba(0, 26, 38, 0.55);
}
:root[data-skin="aero"] .window__body,
:root[data-skin="aero"] .os-dialog__body {
position: relative;
z-index: 1;
/* §41 LIGHT-MODE BODY: a subtle top-light → bottom-blue gradient + a faint inner
edge so the body reads as glass with depth, not a flat white plastic panel.
Stays light enough for body-text AA. */
background:
linear-gradient(180deg,
rgba(253, 254, 255, 0.96) 0%,
rgba(237, 247, 254, 0.94) 42%,
rgba(224, 240, 251, 0.93) 100%);
border-radius: 0 0 calc(var(--aero-radius-lg) - 2px) calc(var(--aero-radius-lg) - 2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.70),
inset 0 2px 6px rgba(16, 70, 110, 0.12),
inset 0 0 0 1px rgba(120, 175, 210, 0.12);
}
:root[data-skin="aero"][data-theme="dark"] .window__titlebar,
:root[data-skin="aero"][data-theme="dark"] .os-dialog__bar {
background:
linear-gradient(180deg,
rgba(190,235,255,0.30) 0%, rgba(190,235,255,0.08) 46%,
rgba(255,255,255,0) 50%, rgba(10,40,60,0.20) 100%),
linear-gradient(90deg, rgba(14,74,124,0.92), rgba(46,124,180,0.88));
}
:root[data-skin="aero"][data-theme="dark"] .window__body,
:root[data-skin="aero"][data-theme="dark"] .os-dialog__body {
background:
linear-gradient(180deg, rgba(16,50,71,0.95) 0%, rgba(14,43,61,0.93) 100%);
box-shadow:
inset 0 1px 0 rgba(160, 220, 245, 0.16),
inset 0 2px 5px rgba(0, 12, 22, 0.45);
}
/* ============================================================
5. GLOSSY CANDY BUTTONS — .btn / .window__btn / .btn--primary (3-state)
(.taskbar__item is NOT here — it's a dark-bar glass lozenge in §6)
============================================================ */
:root[data-skin="aero"] .btn,
:root[data-skin="aero"] .window__btn {
border: 1px solid rgba(120, 170, 205, 0.75);
border-radius: var(--aero-radius);
background: var(--aero-gloss), var(--color-surface);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -6px 8px -6px rgba(255, 255, 255, 0.55),
inset 0 0 0 1px rgba(255, 255, 255, 0.30),
0 1px 2px rgba(16, 70, 110, 0.22);
transition: background var(--speed-fast) var(--ease-soft),
box-shadow var(--speed-fast) var(--ease-soft);
}
:root[data-skin="aero"] .btn:hover,
:root[data-skin="aero"] .window__btn:hover {
background: var(--aero-gloss-hover), var(--color-surface-hover);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -7px 9px -6px rgba(255, 255, 255, 0.70),
inset 0 0 0 1px rgba(255, 255, 255, 0.40),
0 2px 5px rgba(16, 70, 110, 0.26);
}
:root[data-skin="aero"] .btn:active,
:root[data-skin="aero"] .window__btn:active {
background: var(--aero-gloss-press), var(--color-surface-sunken);
box-shadow:
inset 0 1px 3px rgba(16, 70, 110, 0.34),
inset 0 -1px 0 rgba(255, 255, 255, 0.45),
0 1px 1px rgba(16, 70, 110, 0.16);
}
:root[data-skin="aero"] .window.is-maximized .window__btn[data-action="maximize"] {
background: var(--aero-gloss-press), var(--color-surface-hover);
box-shadow:
inset 0 1px 3px rgba(16, 70, 110, 0.30),
inset 0 -1px 0 rgba(255, 255, 255, 0.50),
inset 0 0 0 1px rgba(63, 196, 214, 0.55);
}
:root[data-skin="aero"] .window__btn { border-radius: 7px; }
/* R4-2 — CTA buttons read as convex Aqua/Vista GLASS buttons, not flat uppercase
lozenges. (a) title-case text on every .btn (kills the base Win95 uppercase +
1px tracking); (b) secondary .btn (not primary) gets a wet pale-aqua body + a
teal bottom rim-bounce so it reads convex, not white-on-white. .window__btn is a
separate element (untouched); .btn--primary keeps its teal gel (excluded). */
:root[data-skin="aero"] .btn {
text-transform: none;
letter-spacing: normal;
font-size: var(--text-sm);
font-weight: 600;
}
:root[data-skin="aero"] .btn:not(.btn--primary) {
color: #0b4754;
background:
var(--aero-gloss),
linear-gradient(180deg, #FCFEFF 0%, #ECF7FD 54%, #DBEEF8 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -7px 9px -7px rgba(120, 205, 232, 0.55),
inset 0 0 0 1px rgba(255, 255, 255, 0.45),
0 2px 5px rgba(16, 70, 110, 0.20),
0 1px 1px rgba(16, 70, 110, 0.14);
}
:root[data-skin="aero"] .btn:not(.btn--primary):hover {
background:
var(--aero-gloss-hover),
linear-gradient(180deg, #FFFFFF 0%, #F1FAFE 54%, #E2F4FC 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -8px 10px -7px rgba(130, 212, 238, 0.60),
inset 0 0 0 1px rgba(255, 255, 255, 0.55),
0 3px 7px rgba(16, 70, 110, 0.24),
0 1px 1px rgba(16, 70, 110, 0.16);
}
:root[data-skin="aero"] .btn:not(.btn--primary):active {
background:
var(--aero-gloss-press),
linear-gradient(180deg, #DCEFF8 0%, #CCE6F3 100%);
box-shadow:
inset 0 1px 3px rgba(16, 70, 110, 0.30),
inset 0 -1px 0 rgba(255, 255, 255, 0.50),
0 1px 1px rgba(16, 70, 110, 0.14);
}
/* DARK siblings (audit: the secondary .btn hardcoded a near-white body + #0b4754 ink
with NO dark variant, so the "About me" / "Read the blog" / "Read on Substack" CTAs
blew out white on Nightfall. Mirror the §17 .work-item dark teal-glass: deep teal
body, light-cyan ink, light-cyan inner sheen instead of white. */
:root[data-skin="aero"][data-theme="dark"] .btn:not(.btn--primary) {
color: rgba(214, 244, 255, 0.96);
background: linear-gradient(180deg, rgba(120,200,235,0.16) 0%, rgba(20,58,80,0.42) 54%, rgba(12,40,58,0.52) 100%);
box-shadow:
inset 0 1px 0 rgba(160,220,245,0.22),
inset 0 -7px 9px -7px rgba(70,165,195,0.38),
inset 0 0 0 1px rgba(160,220,245,0.14),
0 2px 5px rgba(0,14,26,0.42),
0 1px 1px rgba(0,14,26,0.30);
}
:root[data-skin="aero"][data-theme="dark"] .btn:not(.btn--primary):hover {
background: linear-gradient(180deg, rgba(140,212,245,0.22) 0%, rgba(26,66,90,0.48) 54%, rgba(16,46,64,0.56) 100%);
box-shadow:
inset 0 1px 0 rgba(180,230,250,0.30),
inset 0 -8px 10px -7px rgba(90,185,215,0.44),
inset 0 0 0 1px rgba(170,225,248,0.20),
0 3px 7px rgba(0,14,26,0.46),
0 1px 1px rgba(0,14,26,0.32);
}
:root[data-skin="aero"][data-theme="dark"] .btn:not(.btn--primary):active {
background: linear-gradient(180deg, rgba(14,44,62,0.60) 0%, rgba(10,34,50,0.66) 100%);
box-shadow:
inset 0 1px 3px rgba(0,16,28,0.50),
inset 0 -1px 0 rgba(160,220,245,0.16),
0 1px 1px rgba(0,14,26,0.30);
}
:root[data-skin="aero"] .btn--primary {
color: #fff;
border-color: rgba(8, 90, 110, 0.60);
background: var(--aero-teal-gloss), var(--aero-sky-base);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.80),
inset 0 -7px 9px -7px rgba(255, 255, 255, 0.40),
0 1px 2px rgba(6, 60, 74, 0.40);
text-shadow: 0 1px 1px rgba(0, 40, 55, 0.45);
}
:root[data-skin="aero"] .btn--primary:hover {
background: var(--aero-teal-gloss-hover), var(--aero-sky-base-hover);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.92),
inset 0 -8px 10px -7px rgba(255, 255, 255, 0.55),
0 2px 6px rgba(6, 60, 74, 0.44);
}
:root[data-skin="aero"] .btn--primary:active {
background:
linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.16) 100%),
var(--aero-sky-base-press);
box-shadow:
inset 0 1px 4px rgba(0, 40, 55, 0.45),
inset 0 -1px 0 rgba(255, 255, 255, 0.30),
0 1px 1px rgba(6, 60, 74, 0.30);
}
/* ============================================================
6. TASKBAR / START — Aero "redux" DARK glass bar (in BOTH themes)
============================================================ */
:root[data-skin="aero"] .taskbar {
/* NB: base .taskbar is position:fixed (full-width, welded to the bottom). Do
NOT set position here — it drops the bar out of fixed into grid flow. The
::after anchors to the base-fixed element fine. */
background:
radial-gradient(140% 90% at 50% -28%,
rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.10) 26%,
rgba(255, 255, 255, 0) 52%),
linear-gradient(180deg,
var(--aero-tb-base) 0%, var(--aero-tb-base) 46%, var(--aero-tb-base-2) 100%);
-webkit-backdrop-filter: var(--aero-tb-blur);
backdrop-filter: var(--aero-tb-blur);
border-top: 1px solid var(--aero-tb-hair);
box-shadow:
inset 0 1px 0 var(--aero-tb-hair),
inset 0 6px 14px -6px var(--aero-tb-glow),
inset 0 -1px 0 rgba(0, 0, 0, 0.35),
0 -3px 18px rgba(10, 40, 70, 0.30);
}
:root[data-skin="aero"] .taskbar::after {
content: "";
position: absolute;
inset: 1px 0 auto 0;
height: 60%;
pointer-events: none;
background:
radial-gradient(120% 200% at 18% -120%,
rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.08) 34%,
rgba(255, 255, 255, 0) 60%);
mix-blend-mode: screen;
}
:root[data-skin="aero"]:not([data-theme="dark"]) .taskbar {
--aero-tb-base: rgba(14, 34, 52, 0.58);
--aero-tb-base-2: rgba(8, 22, 38, 0.70);
}
:root[data-skin="aero"] .taskbar__start {
color: #fff;
/* R4-4: the start button IS a round Win7-style Aero orb now — no pill, no
shouty wordmark. Keeps the teal gel + gloss it already had; the conifer
emblem + the a11y-only label are below. Retro keeps its pill + "CASCADIA OS".
46px (was 40) — Elisha wanted the orb bigger + more prominent; still clears the
52px taskbar core with a few px of margin. */
width: 46px;
min-width: 46px;
height: 46px;
padding: 0;
gap: 0;
justify-content: center;
flex-shrink: 0;
border: 1px solid rgba(12, 70, 116, 0.65);
border-radius: 50%;
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.18) 46%,
rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.06) 100%),
linear-gradient(180deg, #5AB4EC 0%, #1E7FC4 50%, #1668AE 51%, #135A98 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -7px 9px -5px rgba(120, 235, 255, 0.55),
0 1px 2px rgba(6, 30, 50, 0.45),
0 0 0 1px rgba(6, 60, 78, 0.35);
text-shadow: 0 1px 1px rgba(0, 40, 55, 0.5);
position: relative;
overflow: hidden;
transition: filter var(--speed) var(--ease-soft),
box-shadow var(--speed) var(--ease-soft);
}
:root[data-skin="aero"] .taskbar__start::before {
content: "";
position: absolute;
left: 16%; right: 16%; top: 8%;
height: 42%;
border-radius: 50%;
pointer-events: none;
/* round wet-orb top cap (its own inset shape — a sliver of rim shows around it) */
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.12) 100%);
}
:root[data-skin="aero"] .taskbar__start:hover {
/* contained gel response (brighten + inner under-glow), no outer cyan halo */
filter: brightness(1.08) saturate(1.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -8px 11px -5px rgba(140, 240, 255, 0.7),
0 2px 5px rgba(6, 30, 50, 0.5),
0 0 0 1px rgba(6, 60, 78, 0.4);
}
:root[data-skin="aero"] .taskbar__start:active {
filter: brightness(0.94);
box-shadow:
inset 0 2px 6px rgba(0, 40, 60, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.35),
0 1px 2px rgba(6, 30, 50, 0.4);
}
/* R4-4 — the Cascadia conifer emblem inside the orb (white vector, engraved). */
:root[data-skin="aero"] .taskbar__start::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 25px;
height: 25px;
pointer-events: none;
background: #fff;
-webkit-mask: center / contain no-repeat;
mask: center / contain no-repeat;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.30)) drop-shadow(0 -1px 1px rgba(6, 33, 47, 0.45));
opacity: 0.96;
}
/* Keep the "Cascadia OS" wordmark for screen readers; the orb carries it visually. */
:root[data-skin="aero"] .taskbar__start > span:not(.taskbar__start-led) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
:root[data-skin="aero"] .taskbar__item {
color: #DBEDF6;
text-transform: none;
letter-spacing: normal;
/* base tabs are 30px/10px — too small in the bigger Aero bar; scale to match */
height: 36px;
font-size: 12px;
/* Win7 Superbar tab (adapted to our dark-teal bar): tight radius + a dual
border (dark outer hairline + light inner rim) + a diagonal lit-glass sheen
+ the Superbar inset top line. Not the old 8px candy lozenge. */
border: 1px solid rgba(6, 18, 30, 0.55);
border-radius: 3px;
background:
linear-gradient(-40deg, rgba(255, 255, 255, 0) 66%, rgba(196, 232, 250, 0.13) 102%),
linear-gradient(180deg, rgba(116, 168, 208, 0.16) 0%, rgba(24, 60, 92, 0.30) 100%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.16),
inset 0 1px 0.3px rgba(0, 0, 0, 0.30),
0 1px 2px rgba(6, 30, 50, 0.32);
text-shadow: 0 1px 1px rgba(0, 28, 44, 0.50);
position: relative;
transition: background var(--speed) var(--ease-soft),
box-shadow var(--speed) var(--ease-soft);
}
/* Superbar HOVER bloom — HOT-TRACKING (audit §6, Elisha-approved): the soft
radial pool now FOLLOWS the pointer. aero-peek.js stamps the pointer's
in-tab position as --mx/--my on pointermove; the fallbacks (50% 110%) ARE
the previous static bottom-centre bloom, so no-JS and keyboard hover keep
exactly the old look. Win7 tinted the pool from the icon's hue — Cascadia's
tab glyphs are one aqua/sky gel by palette design, so the single sky tint
IS the faithful derivation. Contained inside the tab (not an outer halo),
hidden at rest, faded in on hover. */
:root[data-skin="aero"] .taskbar__item::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
/* Sky-family bloom (was cyan rgba(190,236,255) — a pre-refactor leftover that sat
~5-7° off the new sky chrome). rgba(150,210,255) brightens within the sky family
so hover reads as the active sky tab lifting, not a competing cyan. Audit #6. */
background: radial-gradient(82% 92% at var(--mx, 50%) var(--my, 110%),
rgba(150, 210, 255, 0.45) 0%, rgba(150, 210, 255, 0) 64%);
transition: opacity var(--speed) var(--ease-soft);
}
:root[data-skin="aero"] .taskbar__item:hover::after { opacity: 1; }
:root[data-skin="aero"] .taskbar__item:hover {
border-color: rgba(180, 225, 248, 0.30);
background:
linear-gradient(-40deg, rgba(255, 255, 255, 0) 62%, rgba(210, 240, 255, 0.18) 102%),
linear-gradient(180deg, rgba(140, 190, 226, 0.22) 0%, rgba(30, 70, 104, 0.36) 100%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.26),
inset 0 1px 0.3px rgba(0, 0, 0, 0.26),
0 1px 3px rgba(6, 30, 50, 0.36);
}
:root[data-skin="aero"] .taskbar__item:active:not(.is-active) {
background:
linear-gradient(180deg, rgba(20, 50, 76, 0.50) 0%, rgba(14, 40, 62, 0.55) 100%);
box-shadow:
inset 0 2px 5px rgba(0, 26, 44, 0.50),
inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
:root[data-skin="aero"] .taskbar__item:active:not(.is-active)::after { opacity: 0.4; }
:root[data-skin="aero"] .taskbar__item.is-active {
color: #fff;
border-color: rgba(6, 60, 76, 0.60);
/* The lit, "running + focused" Superbar tab: a strong diagonal glass sheen + a
bottom up-glow over a saturated sky body (#5AB4EC→#155F9C), with the inset top line. */
background:
linear-gradient(-40deg, rgba(255, 255, 255, 0) 56%, rgba(222, 248, 255, 0.50) 104%),
radial-gradient(120% 84% at 50% 116%, rgba(150, 210, 255, 0.34) 0%, rgba(150, 210, 255, 0) 60%),
linear-gradient(180deg, #5AB4EC 0%, #1E7FC4 52%, #155F9C 100%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.32),
inset 0 1px 0.3px rgba(0, 0, 0, 0.25),
0 1px 2px rgba(6, 30, 50, 0.45);
}
/* Kill the base orange "running" LED square (.is-active::before, an 8px
--color-accent block) — Elisha flagged the orange on the active tab. The lit
teal Superbar tab above IS the active indicator (Win7 idiom: no separate LED),
so the square is redundant + clashing. Retro keeps its square. */
:root[data-skin="aero"] .taskbar__item.is-active::before { display: none; }
/* Per-window taskbar glyphs (Elisha: real little icons for the windows, not the
square). Injected by windows.js as .taskbar__item-ic[data-tbicon]; base hides it
so retro stays text-only. Teal gel on the dark bar; the flex gap handles spacing. */
:root[data-skin="aero"] .taskbar__item-ic {
display: inline-block;
width: 18px;
height: 18px;
flex: none;
background-repeat: no-repeat;
background-position: center;
background-image:
radial-gradient(120% 80% at 38% 28%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 44%),
radial-gradient(130% 130% at 50% 28%, #54CFE6 0%, #1A9AB1 52%, #0A6376 100%);
filter: drop-shadow(0 0 1px rgba(150,225,250,0.35)) drop-shadow(0 1px 1px rgba(0,18,30,0.55));
}
:root[data-skin="aero"] .taskbar__item-ic[data-tbicon="person"] { -webkit-mask: var(--gico-about) center / 17px no-repeat; mask: var(--gico-about) center / 17px no-repeat; }
:root[data-skin="aero"] .taskbar__item-ic[data-tbicon="doc"] { -webkit-mask: var(--gico-blog) center / 16px no-repeat; mask: var(--gico-blog) center / 16px no-repeat; }
:root[data-skin="aero"] .taskbar__item-ic[data-tbicon="cup"] { -webkit-mask: var(--gico-cup) center / 17px no-repeat; mask: var(--gico-cup) center / 17px no-repeat; }
:root[data-skin="aero"] .taskbar__item-ic[data-tbicon="star"] { -webkit-mask: var(--gico-star) center / 18px no-repeat; mask: var(--gico-star) center / 18px no-repeat; }
:root[data-skin="aero"] .taskbar__item-ic[data-tbicon="folder"] { -webkit-mask: var(--gico-folder) center / 18px no-repeat; mask: var(--gico-folder) center / 18px no-repeat; }
:root[data-skin="aero"] .taskbar__item-ic[data-tbicon="camera"] { -webkit-mask: var(--gico-camera) center / 18px no-repeat; mask: var(--gico-camera) center / 18px no-repeat; }
:root[data-skin="aero"] .taskbar__item-ic[data-tbicon="note"] { -webkit-mask: var(--gico-note) center / 18px no-repeat; mask: var(--gico-note) center / 18px no-repeat; }
:root[data-skin="aero"] .taskbar__item-ic[data-tbicon="tag"] { -webkit-mask: var(--gico-tag) center / 17px no-repeat; mask: var(--gico-tag) center / 17px no-repeat; }
:root[data-skin="aero"] .taskbar__item-ic[data-tbicon="envelope"] { -webkit-mask: var(--gico-contact) center / 18px no-repeat; mask: var(--gico-contact) center / 18px no-repeat; }
/* Hovering the ACTIVE task: brighten the inner rim (the bottom bloom also fades
in via the shared :hover::after) so the focused tab still responds. */
:root[data-skin="aero"] .taskbar__item.is-active:hover {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.42),
inset 0 1px 0.3px rgba(0, 0, 0, 0.25),
0 1px 3px rgba(6, 30, 50, 0.45);
}
/* (active gloss cap removed — the active sheen now lives in the background
diagonal; the shared ::after is the Superbar hover bloom, which the active tab
reuses on hover. Its ::before LED dot is unchanged.) */
@media (prefers-reduced-motion: reduce) {
:root[data-skin="aero"] .taskbar__start,
:root[data-skin="aero"] .taskbar__item { transition: none; }
}
:root[data-skin="aero"] .systray {
border: 1px solid rgba(120, 175, 210, 0.55);
border-radius: var(--aero-radius);
background: rgba(255, 255, 255, 0.22);
box-shadow: inset 0 1px 5px rgba(16, 70, 110, 0.20);
}
:root[data-skin="aero"] .taskbar__clock {
border-radius: 6px;
border: 1px solid rgba(8, 70, 90, 0.5);
}
/* ============================================================
7. START MENU — frosted panel + curved sweep + aqua candy rows
============================================================ */
:root[data-skin="aero"] .start-menu {
/* base .start-menu is position:fixed (anchored above the Start button) — keep
it; isolation:isolate gives the -z sweep a stacking context without it. */
isolation: isolate;
border: 1px solid rgba(255, 255, 255, 0.65);
border-radius: var(--aero-radius-lg);
background-color: rgba(228, 244, 254, 0.62);
background-image:
radial-gradient(125% 70% at 50% -22%,
rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 18%,
rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 52%),
linear-gradient(180deg,
rgba(244,251,254,0.55) 0%, rgba(223,241,250,0.30) 30%,
rgba(206,232,250,0.18) 60%, rgba(196,228,248,0.34) 100%);
background-repeat: no-repeat;
-webkit-backdrop-filter: blur(var(--aero-shell-blur, 14px)) saturate(1.55) brightness(1.06);
backdrop-filter: blur(var(--aero-shell-blur, 14px)) saturate(1.55) brightness(1.06);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.92),
inset 0 0 0 1px rgba(255,255,255,0.28),
inset 0 -10px 16px -10px rgba(12,70,110,0.20),
0 18px 46px rgba(16,70,110,0.34),
0 2px 8px rgba(16,70,110,0.20);
}
:root[data-skin="aero"] .start-menu::before {
content: "";
position: absolute;
left: 1px; right: 1px; top: 1px;
height: 42%;
z-index: -1;
pointer-events: none;
border-radius: calc(var(--aero-radius-lg) - 1px) calc(var(--aero-radius-lg) - 1px) 0 0;
background: radial-gradient(140% 90% at 50% -34%,
rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.40) 30%,
rgba(255,255,255,0.10) 55%, rgba(255,255,255,0) 72%);
}
:root[data-skin="aero"] .start-menu__item {
position: relative;
border-radius: 6px;
transition: background var(--speed-fast) var(--ease-soft),
box-shadow var(--speed-fast) var(--ease-soft);
}
:root[data-skin="aero"] .start-menu__item:hover,
:root[data-skin="aero"] .start-menu__item:focus-visible,
:root[data-skin="aero"] .start-menu__item[aria-expanded="true"] {
color: #fff;
border-color: rgba(8,96,118,0.55);
/* Kill the green flash on hover-OUT: the base rule sets background:var(--color-accent)
(now evergreen) as the background-COLOR; our aqua gradient only overrides the
background-IMAGE. Image can't animate so it snaps away instantly on un-hover,
but the green color DOES animate via the `background` transition — exposing a
green fade. Setting the color transparent here means there's no green underneath
the gradient to reveal. (Elisha: start-menu flashed green on hover-out.) */
background-color: transparent;
background-image:
linear-gradient(180deg,
rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.34) 8%,
rgba(255,255,255,0.08) 46%, rgba(255,255,255,0) 50%),
linear-gradient(180deg, #5BD0E2 0%, #34BBD0 49%, #1597AD 50%, #0E8197 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.85),
inset 0 -7px 9px -6px rgba(120,235,255,0.50),
inset 0 0 0 1px rgba(255,255,255,0.18),
0 1px 2px rgba(8,60,84,0.30);
text-shadow: 0 1px 1px rgba(0,42,56,0.42);
outline: none;
}
:root[data-skin="aero"] .start-menu__item:active,
:root[data-skin="aero"] .fl-menu__pop button:active:not([disabled]) {
background-color: transparent; /* same green-flash guard as :hover above */
background-image:
linear-gradient(180deg,
rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.06) 46%, rgba(255,255,255,0) 50%),
linear-gradient(180deg, #1294AA 0%, #128FA6 49%, #0C7A8F 50%, #0A6E82 100%);
box-shadow:
inset 0 1px 3px rgba(6,46,66,0.45),
inset 0 -1px 0 rgba(255,255,255,0.20);
}
/* Green-flash guard (the same bug as start-menu, "elsewhere across the UI" — Elisha).
Every menu/list item whose BASE :hover/active/expanded sets background:var(--color-accent)
(now evergreen) but whose AERO override swaps only the background-IMAGE will flash green
on un-hover (image snaps, the green color animates out). Force the backing color
transparent on each so there's no green to reveal. Only image-only overrides are listed
— rules that use the `background` shorthand (e.g. .filelist__row:hover) already set their
own color and must NOT be forced transparent. */
:root[data-skin="aero"] .fl-menu__pop button:hover:not([disabled]),
:root[data-skin="aero"] .fl-menu__pop button:focus-visible,
:root[data-skin="aero"] .filelist__menu-item:hover,
:root[data-skin="aero"] .filelist__menu-item[aria-expanded="true"],
:root[data-skin="aero"] .readme__reveal:hover {
background-color: transparent;
}
@media (max-width: 520px) {
:root[data-skin="aero"] .start-menu::before { display: none; }
/* W7 "small taskbar" mode: at phone widths the tab LABELS come off and the
gel glyph carries the button (Win7's icon-only Superbar). font-size:0 hides
the text node (windows.js appends the title as a text node); the glyph span
keeps its own 18px box, textContent + title= still give the a11y name and
the long-press tooltip. Only tabs that HAVE a glyph collapse — an unmatched
window title keeps its text (:has guard). Kills the off-screen-tab scroll
on 3-window pages (About/Art). Retro keeps its text tabs. */
:root[data-skin="aero"] .taskbar__item:has(.taskbar__item-ic) {
font-size: 0;
min-width: 44px;
flex: 0 1 auto;
justify-content: center;
padding: 0 12px;
}
}
/* ============================================================
8. SIDEBAR ICONS → teal-gel GLYPHS on a bubble-on-demand tile
The launcher icons are gel OBJECTS (see below) sitting directly on the
wallpaper — no resting tile, so the colours read against the background
(Elisha's call: the gel "bubble" is an affordance, not a frame). The tile
materialises on hover/focus and stays lit for the current page only.
============================================================ */
:root[data-skin="aero"] .desktop-icon {
position: relative;
border-radius: 14px;
border: 1px solid transparent; /* REST: bare — no tile, no frame */
transition:
transform var(--speed) var(--ease-soft),
box-shadow var(--speed) var(--ease-soft),
border-color var(--speed) var(--ease-soft),
background var(--speed) var(--ease-soft);
}
:root[data-skin="aero"] .desktop-icon::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--gel-spec);
opacity: 0; /* tile sheen hidden until the bubble shows */
pointer-events: none;
z-index: 0;
transition: opacity var(--speed) var(--ease-soft);
}
:root[data-skin="aero"] .desktop-icon__img,
:root[data-skin="aero"] .desktop-icon__label { position: relative; z-index: 1; }
:root[data-skin="aero"] .desktop-icon:hover,
:root[data-skin="aero"] .desktop-icon:focus-visible {
transform: translateY(-2px) scale(1.03);
border-color: rgba(255,255,255,0.65);
background: var(--gel-floor), var(--gel-tint); /* the bubble materialises */
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
inset 0 -3px 7px -2px rgba(12,70,110,0.26),
0 3px 5px rgba(16,70,110,0.20),
0 10px 22px -4px rgba(16,70,110,0.34);
}
:root[data-skin="aero"] .desktop-icon:hover::before,
:root[data-skin="aero"] .desktop-icon:focus-visible::before {
opacity: 1;
background:
radial-gradient(150% 96% at 50% -26%,
rgba(255,255,255,1) 0%, rgba(255,255,255,0.88) 18%,
rgba(255,255,255,0.38) 42%, rgba(255,255,255,0.06) 50%,
rgba(255,255,255,0) 53%);
}
:root[data-skin="aero"] .desktop-icon:active {
transform: translateY(0) scale(0.99);
box-shadow:
inset 0 2px 5px rgba(12,70,110,0.30),
inset 0 1px 0 rgba(255,255,255,0.5),
0 1px 2px rgba(16,70,110,0.18);
}
:root[data-skin="aero"] .desktop-icon:active::before { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
:root[data-skin="aero"] .desktop-icon,
:root[data-skin="aero"] .desktop-icon:hover,
:root[data-skin="aero"] .desktop-icon:focus-visible,
:root[data-skin="aero"] .desktop-icon:active { transform: none; }
}
/* Label: legible chip on the bright wallpaper, glassier than the flat black pill. */
:root[data-skin="aero"] .desktop-icon__label {
background: rgba(8, 40, 58, 0.62);
border-radius: 5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
/* LIGHT theme (audit §4): over the day wallpaper's snowfield the 0.62 chip
washes toward mid-gray and the white glyphs lose their footing ("ABOUT" on
the snow). Denser plate in light only; dark keeps 0.62 — the night sky is
its own contrast. */
:root[data-skin="aero"]:not([data-theme="dark"]) .desktop-icon__label {
background: rgba(8, 40, 58, 0.82);
}
/* Launcher GLYPHS — one wet-teal gel body, six silhouettes.
The gel body (3 radials, one light @ 38%/30%, bottom rim-bounce) is shared on
.desktop-icon__img; each [data-icon] only swaps the mask that clips it. A white
object knocked out of teal gel — the same idiom as the Start orb + the home
house Elisha approved. License-clean (no PNG), works in both themes. The
injected pixel SVG/img is hidden. Masks live in --gico-* so the same silhouettes
can be reused by other surfaces (favorites, start menu) later. */
:root[data-skin="aero"] {
--gico-home: url("data:image/svg+xml;utf8,");
--gico-about: url("data:image/svg+xml;utf8,");
--gico-work: url("data:image/svg+xml;utf8,");
--gico-blog: url("data:image/svg+xml;utf8,");
--gico-contact: url("data:image/svg+xml;utf8,");
--gico-art: url("data:image/svg+xml;utf8,");
/* utility glyphs (start menu / readme). Disc-with-cutout reads at small sizes. */
--gico-info: url("data:image/svg+xml;utf8,");
--gico-power: url("data:image/svg+xml;utf8,");
--gico-folder: url("data:image/svg+xml;utf8,");
/* trophy-case glyphs (cup / rosette / star) — the one place the warm accent earns its keep. */
--gico-cup: url("data:image/svg+xml;utf8,");
--gico-rosette: url("data:image/svg+xml;utf8,");
--gico-star: url("data:image/svg+xml;utf8,");
/* Work app glyphs (placeholders for her project brand marks). */
--gico-q: url("data:image/svg+xml;utf8,");
--gico-play: url("data:image/svg+xml;utf8,");
--gico-bot: url("data:image/svg+xml;utf8,");
--gico-cap: url("data:image/svg+xml;utf8,");
--gico-camera: url("data:image/svg+xml;utf8,");
/* beamed double eighth-note (♫): two filled heads + stems + a slanted beam.
Redrawn from simple shapes — the old hand-pathed version read "messed up"
at small sizes (Elisha). */
--gico-note: url("data:image/svg+xml;utf8,");
/* luggage/price tag with a punched hole (blog Tags taskbar tab). */
--gico-tag: url("data:image/svg+xml;utf8,");
/* mini-player transport glyphs (replace the ◄◄ ► ►► text arrows, vector-matching §39). */
--gico-prev: url("data:image/svg+xml;utf8,");
--gico-next: url("data:image/svg+xml;utf8,");
--gico-play: url("data:image/svg+xml;utf8,");
--gico-pause: url("data:image/svg+xml;utf8,");
}
:root[data-skin="aero"] .desktop-icon__img > svg,
:root[data-skin="aero"] .desktop-icon__img > img { display: none; }
:root[data-skin="aero"] .desktop-icon__img {
background-repeat: no-repeat;
background-position: center;
background-image:
radial-gradient(120% 80% at 38% 30%, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0) 40%),
radial-gradient(135% 120% at 50% 122%, #7FE0F0 0%, rgba(127,224,240,0) 46%),
radial-gradient(130% 130% at 50% 30%, #3FC4DA 0%, #0FA3B1 52%, #0A5C6A 100%);
filter:
drop-shadow(0 1px 0 rgba(255,255,255,0.45))
drop-shadow(0 1px 2px rgba(6,33,47,0.50));
}
/* LIGHT MODE only: the bright sky wallpaper washes the teal glyphs out (Elisha
flagged the CONTACT envelope reading faint; dark mode is clean). Deepen + saturate
the gel ramp so the body separates from the pale sky, and add a crisp dark contour
halo so both the silhouette edges AND the negative-space cutouts (envelope crease,
doc lines) get definition. Dark mode keeps the lighter ramp above. */
:root[data-skin="aero"]:not([data-theme="dark"]) .desktop-icon__img {
background-image:
radial-gradient(120% 80% at 38% 30%, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0) 40%),
radial-gradient(135% 120% at 50% 122%, #5ECEE5 0%, rgba(94,206,229,0) 46%),
radial-gradient(130% 130% at 50% 30%, #2BA6BE 0%, #0B7C90 52%, #06404B 100%);
/* The dark contour handles the pale-sky zone; the faint BRIGHT ambient
(3px glacier bloom) handles the opposite case — the deepened gel was
sinking into the dark forest band at the bottom of the Rainier photo
(WORK/BLOG/CONTACT sit over trees at most viewports). Low alpha so the
sky zone doesn't wash. */
filter:
drop-shadow(0 0 1.4px rgba(4, 38, 52, 0.82))
drop-shadow(0 0 3px rgba(226, 248, 255, 0.55))
drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5))
drop-shadow(0 2px 3px rgba(6, 33, 47, 0.55));
}
/* Glyph sizes bumped (Elisha: make the icons more prominent without growing the
88px hover tile). The mask only fills part of the 48px --icon-size box, so a
larger mask = bigger glyph, same container, same hover perimeter. 40px (denser
person/doc glyphs at 38px) still leaves ~4px for the drop-shadow bloom. */
:root[data-skin="aero"] .desktop-icon__img[data-icon="home"] { -webkit-mask: var(--gico-home) center / 40px no-repeat; mask: var(--gico-home) center / 40px no-repeat; }
:root[data-skin="aero"] .desktop-icon__img[data-icon="about"] { -webkit-mask: var(--gico-about) center / 38px no-repeat; mask: var(--gico-about) center / 38px no-repeat; }
:root[data-skin="aero"] .desktop-icon__img[data-icon="work"] { -webkit-mask: var(--gico-work) center / 40px no-repeat; mask: var(--gico-work) center / 40px no-repeat; }
:root[data-skin="aero"] .desktop-icon__img[data-icon="blog"] { -webkit-mask: var(--gico-blog) center / 38px no-repeat; mask: var(--gico-blog) center / 38px no-repeat; }
:root[data-skin="aero"] .desktop-icon__img[data-icon="contact"] { -webkit-mask: var(--gico-contact) center / 40px no-repeat; mask: var(--gico-contact) center / 40px no-repeat; }
:root[data-skin="aero"] .desktop-icon__img[data-icon="art"] { -webkit-mask: var(--gico-art) center / 40px no-repeat; mask: var(--gico-art) center / 40px no-repeat; }
/* Poetry .txt document icon (icons-view, 30px) → reuse the document glyph: hide the
injected pixel SVG, paint the shared gel body clipped to the lined-page mask. The
visual poem keeps its painted thumbnail (.filelist__icon--art, untouched). The
16px viewer-header icons (.np__ic / .vpv__ic) stay as-is — gel muddies <=16px;
those want a flat treatment, queued for the icon-library phase. */
:root[data-skin="aero"] .filelist__icon[data-icon="poem"] > svg { display: none; }
:root[data-skin="aero"] .filelist__icon[data-icon="poem"] {
background-repeat: no-repeat;
background-image:
radial-gradient(120% 80% at 38% 30%, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0) 40%),
radial-gradient(135% 120% at 50% 122%, #7FE0F0 0%, rgba(127,224,240,0) 46%),
radial-gradient(130% 130% at 50% 30%, #3FC4DA 0%, #0FA3B1 52%, #0A5C6A 100%);
-webkit-mask: var(--gico-blog) center / 26px no-repeat;
mask: var(--gico-blog) center / 26px no-repeat;
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4)) drop-shadow(0 1px 2px rgba(6,33,47,0.5));
}
/* Light mode: same wash-out fix as the sidebar glyphs — deeper ramp + dark contour
so the doc + its text-line cutouts read on the pale Poetry window body. */
:root[data-skin="aero"]:not([data-theme="dark"]) .filelist__icon[data-icon="poem"] {
background-image:
radial-gradient(120% 80% at 38% 30%, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0) 40%),
radial-gradient(135% 120% at 50% 122%, #5ECEE5 0%, rgba(94,206,229,0) 46%),
radial-gradient(130% 130% at 50% 30%, #2BA6BE 0%, #0B7C90 52%, #06404B 100%);
filter: drop-shadow(0 0 1.2px rgba(4,38,52,0.8)) drop-shadow(0 1px 2px rgba(6,33,47,0.55));
}
/* The dashed active outline made sense for flat pixel icons; drop it on the gel
tile in favour of a resting LIT tile body (below) that marks the current page. */
:root[data-skin="aero"] .desktop-icon.is-active .desktop-icon__img { outline: none; }
/* Current-page tile reads SELECTED at rest: a teal-tinted frame + soft under-glow
+ a gentle top sheen — deliberately weaker than :hover (which adds the lift +
scale + brighter bloom), so the hierarchy is rest < current(lit) < hover. Scoped
:not(:hover):not(:focus-visible) so hovering the current icon still lifts above
its lit state instead of fighting it. (Fixes the old comment's false claim that a
lit state already existed — it did not; a hovered non-current icon out-sang the
current page.) */
:root[data-skin="aero"] .desktop-icon.is-active:not(:hover):not(:focus-visible) {
border-color: rgba(120, 200, 225, 0.62);
background: var(--gel-floor), var(--gel-tint); /* "you are here" keeps a calm lit tile */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.82),
inset 0 -3px 7px -3px rgba(63, 196, 214, 0.50),
0 2px 5px rgba(16, 70, 110, 0.18),
0 0 0 1px rgba(63, 196, 214, 0.22);
}
:root[data-skin="aero"] .desktop-icon.is-active:not(:hover):not(:focus-visible)::before {
background: radial-gradient(150% 96% at 50% -26%,
rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.42) 24%,
rgba(255, 255, 255, 0.10) 46%, rgba(255, 255, 255, 0) 52%);
opacity: 1;
}
/* Active/hover label: base uses var(--color-on-accent) which is DARK in the dark
theme (the "some labels dark, some white" bug). Pin a glossy teal chip + white
text so every label state is consistent and legible in both themes. */
:root[data-skin="aero"] .desktop-icon:hover .desktop-icon__label,
:root[data-skin="aero"] .desktop-icon:focus-visible .desktop-icon__label,
:root[data-skin="aero"] .desktop-icon.is-active .desktop-icon__label {
background: linear-gradient(180deg, rgba(63,196,214,0.94) 0%, rgba(14,130,149,0.96) 100%);
color: #fff;
text-shadow: 0 1px 1px rgba(0,40,55,0.55);
}
/* ============================================================
8b. AERO ICON SYSTEM — reusable .aero-ico tile (R4-7 Phase 0 foundation)
------------------------------------------------------------
A wet teal GEL object (Aqua-dock / Win7 glass-button idiom), NOT a tinted
square. Per-icon, only the hue tokens + the inline