From 835eb3306ce586b135475dfe853f4e8b6dcfec19 Mon Sep 17 00:00:00 2001 From: Fuwn Date: Tue, 19 May 2026 01:20:01 +0000 Subject: style(nav): add --base0011-strong for grounded glass on nav surfaces The existing --base0011 glass tint is #ffffff80 / #0c0c0c80 (50% alpha), which is unusually transparent for floating UI. The desktop header and the mobile hamburger sit over scrolling content, so the content bleeds through and reads as distracting. Introduces --base0011-strong at #ffffffcc / #0c0c0ccc (80% alpha) for floating chrome. The backdrop blur still has enough content to soften, but the surface now reads as grounded rather than barely-present. Applied to: desktop .header background, mobile toggle background and hover, mobile open panel background. Other glass cards (CommandPalette dropdown, Dropdown component content, tooltips, hover covers) keep the softer --base0011 since they sit over relatively static surfaces and the see-through effect there is not distracting. --- src/routes/+layout.svelte | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'src/routes') diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 6ebc8b4e..460afcce 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -381,6 +381,7 @@ $: { z-index: 4; position: sticky; top: 1.25rem; + background-color: var(--base0011-strong); transition: transform var(--duration-slow) var(--ease-out-quart); } @@ -489,7 +490,7 @@ $: { padding: 0; border: none; border-radius: 8px; - background: var(--base0011); + background: var(--base0011-strong); box-shadow: var(--shadow-card-emphasized), 0 0 0 5px var(--base02); @@ -499,7 +500,7 @@ $: { } .menu-toggle:hover { - background: var(--base0011); + background: var(--base0011-strong); } .menu-bar { @@ -535,7 +536,7 @@ $: { min-width: 200px; padding: 0.5rem; border-radius: 8px; - background: var(--base0011); + background: var(--base0011-strong); box-shadow: var(--shadow-card-emphasized), 0 0 0 5px var(--base02); -- cgit v1.2.3