From 60ca78b9d8e7247a9dad577498d10bf998760039 Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Sat, 31 Jan 2026 19:30:07 -0700
Subject: [PATCH] UI: Refactor header layers for instant video visibility and
 fix layering issues

---
 src/components/UserHeader.tsx | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/UserHeader.tsx b/src/components/UserHeader.tsx
index 2225fda..3a25427 100644
--- a/src/components/UserHeader.tsx
+++ b/src/components/UserHeader.tsx
@@ -229,28 +229,35 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
 
   return (
     <>
-      <header className="sticky top-0 z-50 transition-colors duration-300 relative overflow-hidden" style={{
-        background: theme === 'light'
-          ? 'rgba(255, 255, 255, 0.5)'
-          : 'rgba(10, 10, 20, 0.4)',
-        backdropFilter: 'blur(12px)',
-        WebkitBackdropFilter: 'blur(12px)',
+      <header className="sticky top-0 z-50 relative overflow-hidden h-16 sm:h-20" style={{
         borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.08)' : '1px solid rgba(255,255,255,0.08)'
       }}>
-        {/* Smoke Video Background */}
-        <div className="absolute inset-0 z-[-1] overflow-hidden pointer-events-none">
+        {/* Background Layers */}
+        <div className="absolute inset-0 z-[-1] pointer-events-none overflow-hidden">
+          {/* Base Color & Blur Layer */}
+          <div
+            className="absolute inset-0 transition-colors duration-500"
+            style={{
+              background: theme === 'light' ? 'rgba(255, 255, 255, 0.4)' : 'rgba(10, 10, 20, 0.35)',
+              backdropFilter: 'blur(20px)',
+              WebkitBackdropFilter: 'blur(20px)',
+            }}
+          />
+
+          {/* Smoke Video background */}
           <video
             ref={videoRef}
             autoPlay
             loop
             muted
             playsInline
-            className="absolute min-w-full min-h-full object-cover scale-110 opacity-70 dark:opacity-50 brightness-[1.0] dark:brightness-[0.8]"
+            className="absolute inset-0 w-full h-full object-cover scale-110 opacity-70 dark:opacity-50 brightness-[1.1] dark:brightness-[0.85] transition-opacity duration-1000"
           >
             <source src="/videos/smoke.mp4" type="video/mp4" />
           </video>
-          {/* Subtle Dark Overlay for Text Readability */}
-          <div className="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/20 dark:from-black/40 dark:via-transparent dark:to-black/40" />
+
+          {/* Vignette/Readability Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/30 dark:from-black/40 dark:via-transparent dark:to-black/50" />
         </div>
 
         <div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">