From c617934a5489d63e2cc43969429b0ed14a4ec41d Mon Sep 17 00:00:00 2001
From: Nicholai <nicholaivogelfilms@gmail.com>
Date: Mon, 20 Oct 2025 13:31:39 -0600
Subject: [PATCH] fix: Correct banner and navigation positioning with proper
 spacing

- Set explicit 60px height on construction banner
- Use proper flexbox centering in banner container
- Apply top: 60px to navigation when banner is present
- Add smooth transition for banner show/hide
---
 app/globals.css                    | 12 +++++++++---
 components/construction-banner.tsx |  4 ++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index d4a9cf1fc..f774283a8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,9 +3,15 @@
 
 @custom-variant dark (&:is(.dark *));
 
-/* Construction banner spacing - push content down instead of nav */
-body:has(.construction-banner) {
-  padding-top: 60px;
+/* Construction banner - fixed height */
+.construction-banner {
+  height: 60px;
+}
+
+/* Push navigation down when banner is visible */
+body:has(.construction-banner) nav {
+  top: 60px !important;
+  transition: top 0.3s ease;
 }
 
 :root {
diff --git a/components/construction-banner.tsx b/components/construction-banner.tsx
index 05d0a0e8c..7239b3ef8 100644
--- a/components/construction-banner.tsx
+++ b/components/construction-banner.tsx
@@ -31,8 +31,8 @@ export function ConstructionBanner() {
 
   return (
     <div className="construction-banner fixed top-0 left-0 right-0 bg-amber-500/10 border-b border-amber-500/20 backdrop-blur-sm z-[60]">
-      <div className="container mx-auto px-4 py-3">
-        <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 text-amber-200/90">
+      <div className="container mx-auto px-4 h-full flex items-center">
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 text-amber-200/90 w-full">
           <div className="flex items-center gap-2 text-center sm:text-left">
             <AlertTriangle className="h-5 w-5 text-amber-400 flex-shrink-0" />
             <p className="text-sm font-medium">