From 835eb3306ce586b135475dfe853f4e8b6dcfec19 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.net>
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/+layout.svelte')

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

