From 46879581255afd85cb79f1d5ce11ccde15b9eb95 Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Wed, 28 Jan 2026 09:20:32 -0700
Subject: [PATCH] Soften header aesthetics and fog mask for a truly blurred and
 seamless edge

---
 src/components/UserHeader.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/UserHeader.tsx b/src/components/UserHeader.tsx
index 085a35f..eb4913d 100644
--- a/src/components/UserHeader.tsx
+++ b/src/components/UserHeader.tsx
@@ -214,21 +214,22 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
     <>
       <header className="sticky top-0 z-50 transition-colors duration-300 relative" style={{
         background: theme === 'light'
-          ? 'rgba(255, 255, 255, 0.98)'
-          : 'rgba(10, 10, 20, 0.99)',
-        backdropFilter: 'blur(16px)',
-        borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.12)' : '1px solid rgba(255,255,255,0.04)'
+          ? 'rgba(255, 255, 255, 0.92)'
+          : 'rgba(10, 10, 20, 0.94)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
+        borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.08)' : '1px solid rgba(255,255,255,0.08)'
       }}>
-        {/* Cloudy/Foggy effect overlay with tight edge feathering */}
+        {/* Cloudy/Foggy effect overlay with ultra-soft feathered edges for a blurred look */}
         <div
           className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-opacity duration-500"
           style={{
-            maskImage: 'linear-gradient(to bottom, transparent 0%, black 4%, black 96%, transparent 100%)',
-            WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 4%, black 96%, transparent 100%)'
+            maskImage: 'linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 12%, black 25%, black 75%, rgba(0,0,0,0.4) 88%, transparent 100%)',
+            WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 12%, black 25%, black 75%, rgba(0,0,0,0.4) 88%, transparent 100%)'
           }}
         >
-          <div className="absolute inset-0 fog-layer-1 opacity-[0.25] dark:opacity-[0.2]" />
-          <div className="absolute inset-0 fog-layer-2 opacity-[0.18] dark:opacity-[0.15]" />
+          <div className="absolute inset-0 fog-layer-1 opacity-[0.18] dark:opacity-[0.15]" />
+          <div className="absolute inset-0 fog-layer-2 opacity-[0.12] dark:opacity-[0.1]" />
         </div>
 
         <div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">