From 79414061639efd98fb0b10c0d414976063389c69 Mon Sep 17 00:00:00 2001
From: KoyoNoguchi <koo.ooy504405@gmail.com>
Date: Wed, 21 Oct 2026 21:49:52 +0900
Subject: [PATCH] Make the nav bar material nearly opaque

Content scrolled beneath the translucent nav bar showed through as
blurry gray patches behind the back button. Give the bar its own denser
material so it reads as a solid surface with only a hint of blur.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/assets/style.css | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/public/assets/style.css b/public/assets/style.css
index abc95e0..ee44117 100644
--- a/public/assets/style.css
+++ b/public/assets/style.css
@@ -43,6 +43,8 @@
   --material-thin: rgba(255, 255, 255, 0.55);
   --material: rgba(250, 250, 252, 0.74);
   --material-thick: rgba(246, 246, 249, 0.86);
+  /* ナビゲーションバー: 下に潜った中身がぼやけた模様として透けないよう、ほぼ不透明に */
+  --material-bar: rgba(242, 242, 247, 0.94);
   --material-edge: rgba(255, 255, 255, 0.7);
   --plate: rgba(255, 255, 255, 0.84);
   --scrim: rgba(0, 0, 0, 0.3);
@@ -110,6 +112,7 @@
     --material-thin: rgba(44, 44, 46, 0.5);
     --material: rgba(30, 30, 32, 0.7);
     --material-thick: rgba(24, 24, 26, 0.84);
+    --material-bar: rgba(12, 12, 13, 0.94);
     --material-edge: rgba(255, 255, 255, 0.09);
     --plate: rgba(28, 28, 30, 0.8);
     --scrim: rgba(0, 0, 0, 0.5);
@@ -127,6 +130,7 @@
     --material-thin: #f2f2f7;
     --material: #f7f7f9;
     --material-thick: #f2f2f7;
+    --material-bar: #f2f2f7;
     --plate: #ffffff;
   }
 }
@@ -135,6 +139,7 @@
     --material-thin: #2c2c2e;
     --material: #1c1c1e;
     --material-thick: #1c1c1e;
+    --material-bar: #0c0c0d;
     --plate: #1c1c1e;
   }
 }
@@ -250,9 +255,9 @@ a {
   content: "";
   position: absolute;
   inset: 0;
-  background: var(--material);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
-  backdrop-filter: blur(20px) saturate(180%);
+  background: var(--material-bar);
+  -webkit-backdrop-filter: blur(30px) saturate(150%);
+  backdrop-filter: blur(30px) saturate(150%);
   opacity: 0;
   transition: opacity 0.2s ease;
 }
@@ -264,7 +269,7 @@ a {
   top: 100%;
   height: 16px;
   pointer-events: none;
-  background: linear-gradient(var(--material), transparent);
+  background: linear-gradient(var(--material-bar), transparent);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   -webkit-mask-image: linear-gradient(#000, transparent);