From dfa44eef3396a9145200705be3c5558948126057 Mon Sep 17 00:00:00 2001
From: Shivank Gupta <krish.gupta@adypu.edu.in>
Date: Mon, 17 Nov 2025 11:45:52 +0530
Subject: [PATCH] Enhance footer link interactivity with animated hover effect

- Added a subtle animated underline and color transition on hover for all footer links in .main-footer and .intro-footer.
- Improves visual feedback and interactivity, making links more engaging and consistent with modern UI practices.
- CSS changes are scoped to footer links for clarity and maintainability.
---
 docs/style.css | 62 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/docs/style.css b/docs/style.css
index 94123ceb9..5c31ee21f 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -77,6 +77,38 @@ pre code {
   background-color: transparent;
   font-size: 0.8rem !important;
 }
+/* Footer link hover effect styles - top level */
+.main-footer a,
+.intro-footer a {
+  color: #fff;
+  position: relative;
+  text-decoration: none;
+  transition: color 0.3s;
+}
+
+.main-footer a::after,
+.intro-footer a::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 100%;
+  height: 2px;
+  background: #ff5722;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s;
+}
+
+.main-footer a:hover,
+.intro-footer a:hover {
+  color: #ff5722;
+}
+
+.main-footer a:hover::after,
+.intro-footer a:hover::after {
+  transform: scaleX(1);
+}
 
 /*-----------------------------------*\
   $TYPOGRAPHY
@@ -285,7 +317,35 @@ blockquote {
 
   font-size: 0.75rem;
   text-align: center;
-}
+  }
+
+  .intro-footer a {
+    color: #fff;
+    position: relative;
+    text-decoration: none;
+    transition: color 0.3s;
+  }
+
+  .intro-footer a::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -2px;
+    width: 100%;
+    height: 2px;
+    background: #ff5722;
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.3s;
+  }
+
+  .intro-footer a:hover {
+    color: #ff5722;
+  }
+
+  .intro-footer a:hover::after {
+    transform: scaleX(1);
+  }
 
 .animation-item {
   cursor: pointer;