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 ++++---
 src/styles/colours.css    | 2 ++
 2 files changed, 6 insertions(+), 3 deletions(-)

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);
diff --git a/src/styles/colours.css b/src/styles/colours.css
index e7ac3474..694807b4 100644
--- a/src/styles/colours.css
+++ b/src/styles/colours.css
@@ -2,6 +2,7 @@
 	--base00: #f8f8f8;
 	--base001: #ffffff;
 	--base0011: #ffffff80;
+	--base0011-strong: #ffffffcc;
 	--base01: #e8e8e8;
 	--base02: #d8d8d8;
 	--base03: #b8b8b8;
@@ -32,6 +33,7 @@
 		--base00: #080808;
 		--base001: #0c0c0c;
 		--base0011: #0c0c0c80;
+		--base0011-strong: #0c0c0ccc;
 		--base01: #181818;
 		--base02: #282828;
 		--base03: #484848;
-- 
cgit v1.2.3