fix(navigation): ensure active state and hover effect work correctly with HTMX by moving header inside viewport

assets/css/tailwind.css

@@ -99,6 +99,25 @@
     @apply flex flex-col items-center space-y-10 text-4xl;
   }
 
+  /* Navigation Links */
+  .nav-link {
+    @apply relative py-2 px-1 transition-all duration-300 opacity-80 hover:opacity-100 hover:text-[var(--brand-primary)];
+  }
+
+  .nav-link::after {
+    content: "";
+    @apply absolute bottom-0 left-0 w-full h-0.5 bg-[var(--brand-primary)] transform scale-x-0 transition-transform duration-300 ease-out origin-left;
+  }
+
+  .nav-link:hover::after,
+  .nav-current .nav-link::after {
+    @apply scale-x-100;
+  }
+
+  .nav-current .nav-link {
+    @apply text-[var(--brand-primary)] opacity-100 font-semibold;
+  }
+
   /* Button & Link Components */
   .btn-primary {
     @apply inline-flex items-center px-8 py-3 border border-transparent text-base font-semibold rounded-lg shadow-md