Merge pull request #1827 from srushti-panara/bug/footer

fix: improve footer responsiveness and UI consistencyBug/footer

Author: Adez017

src/theme/Footer/Layout/enhanced-footer.css

@@ -810,9 +810,10 @@ html[data-theme="light"] .enhanced-footer.light-theme {
 }
 
 .footer-column {
+  height: 100%;
   display: flex;
   flex-direction: column;
-  padding: 24px;
+  padding: 18px;
   border-radius: 16px;
   background: #ffffff;
   border: 1px solid rgba(17, 17, 17, 0.08);
@@ -846,15 +847,15 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   border-color: rgba(17, 17, 17, 0.12);
   transform: translateY(-4px);
   box-shadow:
-    0 12px 40px rgba(0, 0, 0, 0.08),
+    0 12px 40px rgb(15 1 1 / 8%),
     0 6px 20px rgba(0, 0, 0, 0.04);
 }
 
 .footer-column-title {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 18px;
+  gap: 12px;
+  font-size: 20px;
   /* slightly bigger to stand out */
   font-weight: 700;
   color: #111111;
@@ -864,7 +865,7 @@ html[data-theme="light"] .enhanced-footer.light-theme {
 }
 
 .footer-icon {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
@@ -882,23 +883,26 @@ html[data-theme="light"] .enhanced-footer.light-theme {
 }
 
 .column-icon {
-  width: 20px;
-  height: 20px;
+  width: 30px;
+  height: 30px;
   border-radius: 6px;
   color: #111111;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   color: #111111;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .column-icon .footer-icon {
-  width: 12px;
-  height: 12px;
+  width: 18px;
+  height: 18px;
 }
 
 .resources-icon {
-  background: #111111;
+  background: linear-gradient(135deg, #38e1da 0%, #139caa 100%);
 }
 
 .company-icon {
@@ -1156,19 +1160,28 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   font-weight: 400;
   backdrop-filter: none;
   transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 31%);
 }
 
 .newsletter-input:focus {
   outline: none;
-  border-color: #111111;
+  border-color: #9393933b;
   background: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08);
+  box-shadow: 0 0 0 2px rgb(17 17 17 / 50%);
+  border-radius: 10px;
+  transition: all 0.3s ease;
 }
 
 .newsletter-input::placeholder {
   color: #6b7280;
 }
 
+.newsletter-input:hover {
+  border-color: #6b72807a;
+  box-shadow: 0 4px 10px rgb(0 0 0 / 20%);
+  transform: translateY(-1px);
+}
+
 .newsletter-button {
   padding: 16px 28px;
   /* slightly larger for touch */
@@ -1631,12 +1644,11 @@ html[data-theme="light"] .enhanced-footer.light-theme {
     grid-template-columns: repeat(2, 1fr);
     gap: 32px;
     margin-top: 30px;
-    margin-bottom: 36px;
+    margin-bottom: 36px;}
     /* extra separation from footer links */
 
     .newsletter-column {
-      grid-column: span 2;
-    }
+      grid-column: span 1;
   }
 
   @media (max-width: 1024px) {
@@ -1653,29 +1665,38 @@ html[data-theme="light"] .enhanced-footer.light-theme {
       flex: none;
       align-items: center;
     }
-  
+    .footer-links-grid {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 24px;
+    }
+    
+    .newsletter-column {
+      grid-column: span 1;
+      margin-top: 0;
+    }
+    
     .footer-logo {
       justify-content: center;
     }
-  
+    
     .footer-brand-header {
       align-items: center;
     }
-  
+    
     .footer-hero-right {
       width: 100%;
       justify-content: center;
       margin-top: 0;
     }
-  
+    
     .footer-cta-buttons {
       justify-content: center;
       flex-wrap: wrap;
     }
-  
+    
     .second-line {
       display: block;
-    }
+    }    }
   }
 
   @media (max-width: 768px) {
@@ -1720,32 +1741,39 @@ html[data-theme="light"] .enhanced-footer.light-theme {
     }
 
     .footer-links-grid {
-      grid-template-columns: 1fr;
-      gap: 24px;
+      grid-template-columns: 1fr !important;
+      width: 100%;
     }
 
     .footer-column {
       background: rgba(255, 255, 255, 0.04);
-      border: 1px solid rgba(255, 255, 255, 0.1);
+      border: 1px solid rgb(16 7 7 / 15%);
       border-radius: 16px;
       padding: 24px;
       backdrop-filter: blur(20px);
       transition: all 0.3s ease;
+      box-shadow: 0 8px 25px rgb(0 0 0 / 17%);
       overflow: visible;
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
     }
 
     .footer-column:hover {
-      background: rgba(255, 255, 255, 0.08);
+      background: rgb(95 88 88 / 19%);
       border-color: rgba(255, 255, 255, 0.15);
       transform: translateY(-2px);
-      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+      box-shadow: 0 8px 25px rgb(0 0 0 / 46%);
     }
 
     .footer-column-title {
+      display: flex;
+      align-items: center;
+      justify-content: left;
       text-align: center;
       margin-bottom: 20px;
       padding-bottom: 12px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      border-bottom: 1px solid rgb(21 2 2 / 10%);
     }
 
     .footer-links {
@@ -1756,7 +1784,7 @@ html[data-theme="light"] .enhanced-footer.light-theme {
       width: 100%;
       justify-content: flex-start;
       background: rgba(255, 255, 255, 0.02);
-      border: 1px solid rgba(255, 255, 255, 0.05);
+      border: 1px solid rgb(69 62 62 / 22%);
       border-radius: 10px;
       margin: 0;
       white-space: nowrap;
@@ -1765,7 +1793,7 @@ html[data-theme="light"] .enhanced-footer.light-theme {
     }
 
     .footer-link:hover {
-      background: rgba(255, 255, 255, 0.08);
+      background: rgb(84 75 75 / 69%);
       border-color: rgba(255, 255, 255, 0.15);
       transform: translateX(4px);
     }
@@ -1847,12 +1875,15 @@ html[data-theme="light"] .enhanced-footer.light-theme {
       padding: 18px 24px;
       /* larger CTA for mobile */
       font-size: 15px;
+      width: 100%;
+      box-sizing: border-box;
     }
 
     .newsletter-input {
       padding: 16px 18px;
       font-size: 15px;
       width: 100%;
+      box-sizing: border-box;
     }
   }
 
@@ -2140,5 +2171,5 @@ html[data-theme="light"] .enhanced-footer.light-theme {
     -webkit-text-fill-color: #111111 !important;
     text-shadow: none !important;
   }
-}
+