x

apps/website/src/app/globals.css

@@ -214,6 +214,10 @@
     z-index: 1;
   }
 
+  .site-footer-stage {
+    @apply relative;
+  }
+
   .site-footer-brand-finale {
     @apply flex min-h-[55svh] items-center justify-center overflow-hidden border-t border-line-primary/20 bg-surface-page px-6 py-20 text-center;
   }
@@ -240,13 +244,21 @@
     }
 
     .site-footer-with-finale {
-      padding-top: 100svh;
+      min-height: 100svh;
+    }
+
+    .site-footer-stage {
+      position: fixed;
+      inset: 0;
+      z-index: 0;
+      display: grid;
+      grid-template-rows: minmax(0, 1fr) auto;
+      min-height: 100svh;
+      pointer-events: none;
     }
 
     .site-footer-brand-finale {
-      @apply fixed inset-0 min-h-[100svh] py-24;
+      @apply min-h-0 py-16;
-      z-index: 0;
-      pointer-events: none;
     }
 
     .site-footer-finale-logo {
@@ -256,15 +268,20 @@
     .site-footer-finale-wordmark {
       @apply text-8xl;
     }
+
+    .site-footer-navigation {
+      pointer-events: auto;
+    }
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .site-footer-brand-finale {
+    .site-footer-stage {
       position: relative;
+      display: block;
     }
 
     .site-footer-with-finale {
-      padding-top: 0;
+      min-height: 0;
     }
   }
 

apps/website/src/components/Footer.tsx

@@ -58,28 +58,29 @@ export default function Footer({
 
   return (
     <footer className={`site-footer text-text-main${hasBrandFinale ? ' site-footer-with-finale' : ''}`}>
-      {hasBrandFinale && (
+      <div className="site-footer-stage">
-        <section
+        {hasBrandFinale && (
-          className="site-footer-brand-finale"
+          <section
-          aria-label={brandName || t('footer.brand', 'Brand')}
+            className="site-footer-brand-finale"
-        >
+            aria-label={brandName || t('footer.brand', 'Brand')}
-          {settings?.logoUrl ? (
+          >
-            <Image
+            {settings?.logoUrl ? (
-              src={settings.logoUrl}
+              <Image
-              alt=""
+                src={settings.logoUrl}
-              width={640}
+                alt=""
-              height={240}
+                width={640}
-              unoptimized
+                height={240}
-              className="site-footer-finale-logo"
+                unoptimized
-            />
+                className="site-footer-finale-logo"
-          ) : (
+              />
-            <p className="site-footer-finale-wordmark">{brandName}</p>
+            ) : (
-          )}
+              <p className="site-footer-finale-wordmark">{brandName}</p>
-        </section>
+            )}
-      )}
+          </section>
+        )}
 
-      <div className="site-footer-navigation">
+        <div className="site-footer-navigation">
-        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-12 md:grid-cols-4">
+          <div className="mx-auto grid max-w-7xl grid-cols-1 gap-12 md:grid-cols-4">
 
           {/* Col 1 — Brand */}
           <div className="space-y-6">
@@ -208,6 +209,7 @@ export default function Footer({
             </div>
           </div>
 
+          </div>
         </div>
       </div>
     </footer>