From c35834401151c8d73ccf0a692b6cc781002a8cc4 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 21:34:36 +0000
Subject: [PATCH] Improve mobile header appearance with background and blur
 effects

Add media query for mobile devices to apply sticky header styling with a blurred background and adjusted padding.

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/xbALwBu
---
 client/src/index.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/client/src/index.css b/client/src/index.css
index 4a58d2b..f0c386a 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -353,6 +353,18 @@ input[data-testid*="search"]::placeholder {
   padding-top: 80px;
 }
 
+/* Mobile specific adjustments for header */
+@media (max-width: 768px) {
+  .header-sticky {
+    background: rgba(30, 20, 40, 0.95) !important;
+    backdrop-filter: blur(10px);
+  }
+  
+  .has-fixed-header {
+    padding-top: 70px; /* Slightly less padding on mobile */
+  }
+}
+
 /* Test grid overlay */
 body.show-grid::after {
   content: '';