From a3d593cbae1fbe18c96ad9b4cd07ce549f8abdfe Mon Sep 17 00:00:00 2001 From: Srushti Panara Date: Sun, 31 May 2026 10:26:59 +0530 Subject: [PATCH 1/2] fix: improve footer icon alignment and visibility --- src/theme/Footer/Layout/enhanced-footer.css | 40 ++++++++++++--------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/src/theme/Footer/Layout/enhanced-footer.css b/src/theme/Footer/Layout/enhanced-footer.css index 97386f34..4d852a42 100644 --- a/src/theme/Footer/Layout/enhanced-footer.css +++ b/src/theme/Footer/Layout/enhanced-footer.css @@ -776,9 +776,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); @@ -812,15 +813,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; @@ -830,7 +831,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; @@ -848,23 +849,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 { @@ -1674,26 +1678,30 @@ html[data-theme="light"] .enhanced-footer.light-theme { .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; } .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 { @@ -1704,7 +1712,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; @@ -1713,7 +1721,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); } From e5d66f41d9ccff2a8680e99c4ba93a947d0ddc79 Mon Sep 17 00:00:00 2001 From: Srushti Panara Date: Mon, 1 Jun 2026 09:31:55 +0530 Subject: [PATCH 2/2] fix: improve footer responsiveness and styling --- src/theme/Footer/Layout/enhanced-footer.css | 34 +++++++++++++++------ 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/src/theme/Footer/Layout/enhanced-footer.css b/src/theme/Footer/Layout/enhanced-footer.css index 4d852a42..b3bc21cd 100644 --- a/src/theme/Footer/Layout/enhanced-footer.css +++ b/src/theme/Footer/Layout/enhanced-footer.css @@ -1126,19 +1126,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 */ @@ -1601,12 +1610,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) { @@ -1621,12 +1629,12 @@ html[data-theme="light"] .enhanced-footer.light-theme { .footer-links-grid { grid-template-columns: repeat(2, 1fr); - gap: 28px; + gap: 24px; } .newsletter-column { - grid-column: span 2; - margin-top: 20px; + grid-column: span 1; + margin-top: 0; } } @@ -1672,8 +1680,8 @@ 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 { @@ -1685,6 +1693,9 @@ html[data-theme="light"] .enhanced-footer.light-theme { 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 { @@ -1803,12 +1814,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; } }