From cd5e26a3314747a2c1c834bd27dba73848b201f4 Mon Sep 17 00:00:00 2001
From: pari-dubey1 <paridubeyy00@gmail.com>
Date: Mon, 18 May 2026 14:48:57 +0530
Subject: [PATCH] style: improve navbar hover underline animation

---
 static/style.css | 69 +++++++++++++++++++++++++++++++++++-------------
 1 file changed, 51 insertions(+), 18 deletions(-)

diff --git a/static/style.css b/static/style.css
index 3b11ca9..87d7174 100644
--- a/static/style.css
+++ b/static/style.css
@@ -87,7 +87,7 @@ body {
 }
 img { display: block; max-width: 100%; }
 a { color: var(--indigo-500); text-decoration: none; }
-a:hover { text-decoration: underline; }
+a:hover { text-decoration: none; }
 ul, ol { list-style: none; }
 
 /* ---- Shared utilities -------------------------------------- */
@@ -210,22 +210,38 @@ ul, ol { list-style: none; }
   font-weight: 500;
   color: rgba(255,255,255,0.7);
   transition: color var(--t);
+
+  text-decoration: none;
+  display: inline-block;
 }
 
 /* Animated underline effect */
 .nav-link::after {
   content: '';
   position: absolute;
+
+  left: 50%;
   bottom: -4px;
-  left: 0;
-  width: 100%;
+
+  width: 75%;
   height: 2px;
-  background: linear-gradient(90deg, var(--indigo-400, #60a5fa), var(--yellow-400));
-  transform: scaleX(0);
-  transform-origin: left;
-  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), 
-              opacity 0.35s ease;
+
+  background: linear-gradient(
+    90deg,
+    var(--indigo-400, #60a5fa),
+    var(--yellow-400)
+  );
+
+  border-radius: 999px;
+
+  transform: translateX(-50%) scaleX(0);
+  transform-origin: center;
+
   opacity: 0;
+
+  transition:
+    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.25s ease;
 }
 
 .nav-link:hover {
@@ -234,7 +250,7 @@ ul, ol { list-style: none; }
 }
 
 .nav-link:hover::after {
-  transform: scaleX(1);
+  transform: translateX(-50%) scaleX(1);
   opacity: 1;
 }
 
@@ -298,21 +314,28 @@ ul, ol { list-style: none; }
 .nav-mobile-link::after {
   content: '';
   position: absolute;
-  bottom: 0;
   left: 0;
-  width: 100%;
+  bottom: 0;
+
+  width: 75%;
   height: 2px;
-  background: linear-gradient(90deg, var(--indigo-400, #60a5fa), var(--yellow-400));
+
+  background: linear-gradient(
+    90deg,
+    var(--indigo-400, #60a5fa),
+    var(--yellow-400)
+  );
+
+  border-radius: 999px;
+
   transform: scaleX(0);
   transform-origin: left;
-  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), 
-              opacity 0.35s ease;
+
   opacity: 0;
-}
 
-.nav-mobile-link:hover {
-  color: var(--white);
-  text-decoration: none;
+  transition:
+    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.25s ease;
 }
 
 .nav-mobile-link:hover::after {
@@ -320,6 +343,16 @@ ul, ol { list-style: none; }
   opacity: 1;
 }
 
+@media (max-width: 768px) {
+  .nav-links {
+    display: none;
+  }
+
+  .nav-mobile-toggle {
+    display: flex;
+  }
+}
+
 .nav-mobile-link:last-child { border-bottom: none; }
 
 /* ---- Hero Section ----------------------------------------- */