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 {

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">