From b8f931a0a022211ea4397293717551c39ee3e4d0 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 21:16:49 +0000
Subject: [PATCH] Make the website header sticky and visually enhanced

Implement a sticky header with improved styling, including background blur and border, across multiple pages by changing CSS classes and ensuring proper positioning.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 051a65da-1176-4478-a61c-c662f2a15536
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/051a65da-1176-4478-a61c-c662f2a15536/qNN47yK
---
 client/src/index.css               | 16 ++++----
 client/src/pages/FolxStadlPage.tsx |  2 +-
 client/src/pages/VideoPage.tsx     |  2 +-
 client/src/pages/home.tsx          | 59 +++++++++++++++++++-----------
 client/src/pages/not-found.tsx     |  2 +-
 5 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index 549287b..57d4a68 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -335,14 +335,14 @@ input[data-testid*="search"]::placeholder {
   filter: blur(0.5px);
 }
 
-/* Force header to be non-sticky */
-.header-non-sticky {
-  position: static !important;
-  top: auto !important;
-  left: auto !important;
-  right: auto !important;
-  bottom: auto !important;
-  z-index: auto !important;
+/* Sticky header */
+.header-sticky {
+  position: sticky !important;
+  top: 0 !important;
+  z-index: 50 !important;
+  backdrop-filter: blur(8px);
+  background: rgba(30, 20, 40, 0.85) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 /* Test grid overlay */
diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index d947a9d..4366ac7 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -57,7 +57,7 @@ export default function FolxStadlPage() {
   return (
     <div className="min-h-screen bg-bunny-dark text-white" style={{position: 'static'}}>
       {/* Header */}
-      <div className="bg-transparent relative overflow-hidden header-non-sticky" style={{position: 'static'}}>
+      <div className="header-sticky bg-transparent relative overflow-hidden">
         <div className="max-w-7xl mx-auto px-4 py-4">
           <div className="flex items-center justify-between">
             {/* Left side - Logo */}
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 5221e07..bd07cfd 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -203,7 +203,7 @@ export default function VideoPage() {
   return (
     <div className="min-h-screen bunny-dark static-triangles" style={{position: 'static'}}>
       {/* Header */}
-      <div className="bg-transparent relative overflow-hidden header-non-sticky" style={{position: 'static'}}>
+      <div className="header-sticky bg-transparent relative overflow-hidden">
         <div className="max-w-7xl mx-auto px-4 py-4">
           <div className="flex items-center justify-between">
             {/* Left side - Logo */}
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 9325bc3..d83fb9b 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -74,28 +74,45 @@ export default function Home() {
 
   return (
     <div style={{minHeight: '100vh', background: 'linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%)', color: 'white', position: 'static'}}>
-      {/* SIMPLE HEADER - NO CSS CLASSES */}
-      <div style={{position: 'static', display: 'block', width: '100%', padding: '16px 0', background: 'transparent'}}>
-        <div style={{maxWidth: '1200px', margin: '0 auto', padding: '0 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
-          {/* Logo */}
-          <Link href="/" style={{display: 'flex', alignItems: 'center', gap: '8px', color: 'white', textDecoration: 'none'}}>
-            <div style={{width: '36px', height: '36px', background: 'linear-gradient(135deg, hsl(200, 100%, 60%) 0%, hsl(280, 80%, 60%) 100%)', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 6px rgba(0,0,0,0.1)'}}>
-              <div style={{width: '0', height: '0', borderLeft: '10px solid white', borderTop: '7px solid transparent', borderBottom: '7px solid transparent', marginLeft: '4px'}}></div>
+      {/* STICKY HEADER */}
+      <div className="header-sticky bg-transparent relative overflow-hidden">
+        <div className="max-w-7xl mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            {/* Left side - Logo */}
+            <div className="flex items-center space-x-4">
+              <Link href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
+                <div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
+                  <div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
+                </div>
+                <h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
+              </Link>
+            </div>
+
+            {/* Right side - Navigation + Search */}
+            <div className="flex items-center gap-4">
+              {/* Desktop navigation */}
+              <div className="hidden md:flex items-center space-x-6">
+                <nav className="flex space-x-6">
+                  <Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors">
+                    Home
+                  </Link>
+                  <Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors">
+                    FOLX STADL
+                  </Link>
+                </nav>
+                
+                <div className="relative">
+                  <Input
+                    type="search"
+                    placeholder="Search videos..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-64"
+                  />
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                </div>
+              </div>
             </div>
-            <h1 style={{fontSize: '24px', fontWeight: 'bold', color: 'white', margin: '0'}}>go4.video</h1>
-          </Link>
-          
-          {/* Navigation */}
-          <div style={{display: 'flex', alignItems: 'center', gap: '24px'}}>
-            <Link href="/" style={{color: 'white', textDecoration: 'none'}}>Home</Link>
-            <Link href="/folx-stadl" style={{color: 'white', textDecoration: 'none'}}>FOLX STADL</Link>
-            <input 
-              type="search"
-              placeholder="Search videos..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              style={{background: 'white', border: '1px solid #ccc', borderRadius: '8px', padding: '8px 12px', width: '200px', fontSize: '14px'}}
-            />
           </div>
         </div>
       </div>
diff --git a/client/src/pages/not-found.tsx b/client/src/pages/not-found.tsx
index f19937f..641693e 100644
--- a/client/src/pages/not-found.tsx
+++ b/client/src/pages/not-found.tsx
@@ -7,7 +7,7 @@ export default function NotFound() {
   return (
     <div className="min-h-screen bunny-dark static-triangles" style={{position: 'static'}}>
       {/* Header - same as other pages */}
-      <div className="bg-transparent relative overflow-hidden header-non-sticky" style={{position: 'static'}}>
+      <div className="header-sticky bg-transparent relative overflow-hidden">
         {/* Triangle decorations in header */}
         <div className="absolute top-2 right-20 w-0 h-0 border-l-[35px] border-l-transparent border-r-[35px] border-r-transparent border-b-[50px] border-b-blue-400/15 rotate-12"></div>
         <div className="absolute top-3 left-1/3 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-purple-400/12 -rotate-6"></div>