x

apps/website/src/app/globals.css

@@ -209,6 +209,65 @@
     @apply flex h-9 w-9 items-center justify-center rounded-full border border-line-primary/20 bg-surface-page text-[10px] font-bold text-text-main transition-all duration-300 hover:border-brand-primary hover:bg-brand-primary hover:text-surface-card;
   }
 
+  .site-footer {
+    @apply relative bg-surface-page;
+    z-index: 1;
+  }
+
+  .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;
+  }
+
+  .site-footer-finale-logo {
+    @apply h-auto max-h-32 w-auto max-w-[min(82vw,32rem)] object-contain;
+  }
+
+  .site-footer-finale-wordmark {
+    @apply max-w-full break-words text-5xl font-semibold uppercase text-text-main md:text-7xl;
+    letter-spacing: 0;
+  }
+
+  .site-footer-navigation {
+    @apply relative border-t border-line-primary/20 bg-surface-card px-6 py-20;
+    z-index: 3;
+  }
+
+  @media (min-width: 1024px) {
+    .global-main {
+      position: relative;
+      z-index: 2;
+      background: var(--color-surface-page);
+    }
+
+    .site-footer-with-finale {
+      padding-top: 100svh;
+    }
+
+    .site-footer-brand-finale {
+      @apply fixed inset-0 min-h-[100svh] py-24;
+      z-index: 0;
+      pointer-events: none;
+    }
+
+    .site-footer-finale-logo {
+      @apply max-h-48 max-w-[min(68vw,48rem)];
+    }
+
+    .site-footer-finale-wordmark {
+      @apply text-8xl;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .site-footer-brand-finale {
+      position: relative;
+    }
+
+    .site-footer-with-finale {
+      padding-top: 0;
+    }
+  }
+
   .ui-section-band {
     @apply px-6 py-20 md:py-24;
   }