Fix navbar overflow and tame light-mode card hover

src/css/custom.css

@@ -373,6 +373,18 @@ html {
   min-height: calc(100vh - var(--ifm-navbar-height) - var(--ifm-secondary-nav-height) - var(--ifm-announcement-bar-height));
 }
 
+/* On narrow widths the secondary nav is replaced by the hamburger
+   menu, so its 48px shouldn't be reserved as empty space above the
+   breadcrumbs. Zero it out under 997px. Also align hamburger and
+   article column to a shared 20px left edge. */
+@media (max-width: 996px) {
+  :root {
+    --ifm-secondary-nav-height: 0px;
+    --ifm-navbar-padding-horizontal: 20px;
+    --ifm-spacing-horizontal: 20px;
+  }
+}
+
 /* Ensure sidebar container has correct height calculation */
 .theme-doc-sidebar-container {
   position: sticky;
@@ -519,11 +531,6 @@ html[data-theme='dark'] [class^=docMainContainer_] .card {
 }
 
 @media(min-width: 997px) {
-  /* On desktop, account for secondary nav in total navbar height */
-  :root {
-    --ifm-navbar-height: calc(37px + var(--ifm-secondary-nav-height));
-  }
-
   .theme-doc-sidebar-container {
     --ifm-toc-border-color: var(--ifm-section-divider-color);
   }

src/theme/DocCard/styles.module.css

@@ -19,7 +19,7 @@
 
 .cardContainer:hover {
   background-color: var(--neo-surfaces-white);
-  border-color: var(--brand-digital-blue);
+  border-color: transparent;
   box-shadow: var(--neo-shadow-card);
 }
 

src/theme/Footer/styles.module.css

@@ -8,28 +8,6 @@
   -webkit-backdrop-filter: blur(12px);
 }
 
-/* Sticky to viewport bottom only on top-level category index pages */
-:global(body:has([class*='topLevelCategory'])) .footer {
-  position: sticky;
-  bottom: 0;
-  z-index: 50;
-}
-
-/* On desktop docs pages, scope the footer to the main content column only */
-@media (min-width: 997px) {
-  :global(html.docs-wrapper) .footer {
-    margin-left: 307px;
-  }
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  gap: 1.5rem;
-}
-
-
-
 /* Blurred gradient image, faded from top (transparent) to bottom (visible) */
 .footer::before {
   content: '';
@@ -51,16 +29,14 @@
   align-items: center;
   justify-content: space-between;
   gap: 2rem;
-  width: 83%;
-  margin: 0 auto;
+  width: 100%;
   padding: 0 var(--neo-spacing_3_1_4);
-  transform: translateX(-120px);
 }
 
-@media (max-width: 996px) {
-  .container {
-    transform: none;
-  }
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
 }
 
 .social {
@@ -89,7 +65,7 @@
   display: flex;
   align-items: center;
   gap: 2rem;
-  font-size: 1rem;
+  font-size: 15px;
   font-family: var(--ifm-font-family-base);
 }
 
@@ -133,14 +109,31 @@
   pointer-events: none;
 }
 
-@media (max-width: 768px) {
+/* Below 1060px stack vertically: links → Give feedback → social icons */
+@media (max-width: 1060px) {
+  .footer {
+    --ifm-footer-padding-horizontal: 0px;
+  }
+
   .container {
     flex-direction: column;
-    gap: 1.5rem;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 0 20px;
   }
 
   .links {
-    flex-wrap: wrap;
-    justify-content: center;
+    order: 1;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    gap: 0.5rem;
+  }
+
+  .actions {
+    order: 2;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.5rem;
   }
 }

src/theme/Navbar/Content/styles.module.css

@@ -60,7 +60,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0;
+  gap: 20px;
 }
 
 /* Desktop: Center search bar absolutely */
@@ -88,7 +88,14 @@
   .mobileControls {
     display: flex;
     align-items: center;
-    gap: var(--neo-spacing_2);
+    gap: 24px;
+  }
+
+  /* NavbarSearch renders a div with [class*='navbarSearchContainer'] —
+     give it explicit right margin so the search icon never collides
+     with the color-mode toggle next to it. */
+  .mobileControls :global([class*='navbarSearchContainer']) {
+    margin-right: 24px;
   }
 }
 

src/theme/Navbar/Logo/styles.module.css

@@ -72,20 +72,13 @@
    keeps the edges crisp until the new asset lands. */
 .wordmarkImage {
   display: block;
-  height: 41px;
-  width: 297px;
+  height: 32px;
+  width: 232px;
   flex-shrink: 0;
   color: var(--ifm-navbar-link-color);
   shape-rendering: geometricPrecision;
 }
 
-@media (min-width: 1280px) {
-  .wordmarkImage {
-    height: 46px;
-    width: 334px;
-  }
-}
-
 /* Dark mode logo colors */
 :global(html[data-theme='dark']) .symbolImage {
   color: var(--neo-surfaces-white);