x

app/globals.css

@@ -26,8 +26,8 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
-  --font-sans: var(--font-body);
-  --font-display: var(--font-display);
+  --font-sans: var(--font-antebas);
+  --font-display: var(--font-antebas);
   --font-wordmark: "Google Sans Flex Variable", system-ui, sans-serif;
   --font-hero-serif: var(--font-hero-serif);
   --color-brand-primary: #37a47a;
@@ -85,15 +85,33 @@
   }
   body {
     @apply bg-background text-foreground antialiased;
-    font-family: var(--font-body), system-ui, sans-serif;
+    font-family: var(--font-antebas), system-ui, sans-serif;
   }
   h1,
   h2,
   h3,
   h4 {
-    font-family: var(--font-display), system-ui, sans-serif;
+    font-family: var(--font-antebas), system-ui, sans-serif;
     letter-spacing: -0.02em;
   }
+
+  /* Landing hero — keep Syne / DM Sans / Playfair (see lib/fonts/hero.ts) */
+  [data-section-hero],
+  [data-section-hero] .topo-content-layer,
+  [data-section-hero] .topo-content-readable {
+    font-family: var(--font-hero-body), system-ui, sans-serif;
+  }
+
+  [data-section-hero] h1,
+  [data-section-hero] h2,
+  [data-section-hero] h3,
+  [data-section-hero] h4 {
+    font-family: var(--font-hero-display), system-ui, sans-serif;
+  }
+
+  [data-section-hero] .font-display {
+    font-family: var(--font-hero-display), system-ui, sans-serif;
+  }
 }
 
 @layer utilities {
@@ -805,10 +823,8 @@
   .section-green [data-slot="card"] .topo-card-link,
   .section-green .topo-card-surface .text-foreground,
   .section-green [data-slot="card"] .text-foreground,
-  .section-green [data-slot="card"] [data-slot="button"],
   .section-green [data-slot="card"] [data-slot="button"][data-variant="ghost"],
   .section-green [data-slot="card"] [data-slot="button"][data-variant="link"],
-  .section-green .topo-card-surface [data-slot="button"],
   .section-green .topo-card-surface [data-slot="button"][data-variant="ghost"],
   .section-green .topo-card-surface [data-slot="button"][data-variant="link"],
   .section-green .bg-white [data-slot="button"][data-variant="ghost"],
@@ -844,16 +860,35 @@
     color: currentColor;
   }
 
-  .section-green .topo-on-green-bg [data-slot="button"][data-variant="default"]:not([class*="bg-white"]) {
+  .section-green .topo-on-green-bg [data-slot="button"][data-variant="default"]:not([class*="bg-white"]):not(
+      [class*="bg-primary"]
+    ):not([class*="bg-[#37a47a"]]) {
     background-color: var(--brand-white);
     color: var(--brand-tertiary);
   }
 
-  .section-green .topo-on-green-bg [data-slot="button"][data-variant="default"]:not([class*="bg-white"]):hover {
+  .section-green .topo-on-green-bg [data-slot="button"][data-variant="default"]:not([class*="bg-white"]):not(
+      [class*="bg-primary"]
+    ):not([class*="bg-[#37a47a"]]):hover {
     background-color: var(--brand-white-soft);
     color: var(--brand-tertiary);
   }
 
+  /* Filled primary CTAs (e.g. Get tickets) — white label + icon on green */
+  .section-green [data-slot="button"][data-variant="default"][class*="text-white"],
+  .section-green [data-slot="button"][data-variant="default"][class*="text-[#ffffff]"],
+  .section-green [data-slot="button"][data-variant="default"][class*="text-primary-foreground"] {
+    color: var(--brand-white);
+  }
+
+  .section-green [data-slot="button"][data-variant="default"][class*="text-white"] svg,
+  .section-green [data-slot="button"][data-variant="default"][class*="text-[#ffffff]"] svg,
+  .section-green
+    [data-slot="button"][data-variant="default"][class*="text-primary-foreground"]
+    svg {
+    color: currentColor;
+  }
+
   .topo-pattern-clearance-section {
     -webkit-mask-image: radial-gradient(
       ellipse min(92%, 44rem) min(58%, 540px) at 50% 44%,

app/layout.tsx

@@ -1,4 +1,5 @@
-import { Syne, DM_Sans, Playfair_Display } from "next/font/google";
+import { antebas } from "@/lib/fonts/antebas";
+import { heroFontVariables } from "@/lib/fonts/hero";
 import { RiftPageFlow } from "@/components/brand/RiftPageFlow";
 import { JsonLd } from "@/components/seo/JsonLd";
 import { SiteHeader } from "@/components/layout/SiteHeader";
@@ -9,32 +10,17 @@ import "./globals.css";
 
 export const metadata = rootMetadata;
 
-const display = Syne({
-  subsets: ["latin"],
-  variable: "--font-display",
-  weight: ["600", "700", "800"],
-});
-
-const body = DM_Sans({
-  subsets: ["latin"],
-  variable: "--font-body",
-});
-
-/** Monumental serif for hero / display moments */
-const playfair = Playfair_Display({
-  subsets: ["latin"],
-  variable: "--font-hero-serif",
-  weight: ["600", "700", "800"],
-});
-
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className={`${display.variable} ${body.variable} ${playfair.variable}`}>
-      <body className="min-h-screen flex flex-col">
+    <html
+      lang="en"
+      className={`${antebas.variable} ${heroFontVariables}`}
+    >
+      <body className={`${antebas.className} min-h-screen flex flex-col`}>
         <JsonLd />
         <SiteHeader />
         <main className="relative flex-1">

components/layout/NavTicketsCta.tsx

@@ -21,7 +21,7 @@ export function TicketsMarqueeCta({
   "aria-label": ariaLabel = "Get tickets",
 }: MarqueeProps) {
   const repeated = Array.from({ length: 8 }, (_, i) => (
-    <span key={i} className="shrink-0 px-1 font-bold whitespace-nowrap">
+    <span key={i} className="shrink-0 px-1 font-bold whitespace-nowrap text-white">
       {TICKET_MARQUEE_SEGMENT}
     </span>
   ));
@@ -32,7 +32,7 @@ export function TicketsMarqueeCta({
       onClick={onNavigate}
       aria-label={ariaLabel}
       className={cn(
-        "relative flex items-center overflow-hidden rounded-full bg-[#37a47a] text-[#ffffff]",
+        "relative flex items-center overflow-hidden rounded-full bg-[#37a47a] text-white",
         "shadow-md transition-colors hover:bg-[#37a47a]/90",
         "[&:hover_.ticket-menu-marquee]:[animation-duration:6s]",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#37a47a] focus-visible:ring-offset-2",

components/tickets/TicketCard.tsx

@@ -103,7 +103,7 @@ export function TicketCard({ tier, index, featured, compact }: Props) {
               <TicketInclusionsPopover tier={tier} serial={serial} />
               <Button
                 className={cn(
-                  "w-full rounded-full bg-[#37a47a] text-[#ffffff] hover:bg-[#37a47a]/90",
+                  "w-full rounded-full bg-[#37a47a] text-white hover:bg-[#37a47a]/90 [&_svg]:text-white",
                   featured && "ticket-cta-pulse"
                 )}
                 disabled={tier.soldOut}

lib/fonts/antebas.ts

@@ -0,0 +1,39 @@
+import localFont from "next/font/local";
+
+/** Antebas — primary site typeface (self-hosted from public/fonts). */
+export const antebas = localFont({
+  src: [
+    {
+      path: "../../public/fonts/Fontspring-DEMO-antebas-thin.otf",
+      weight: "100",
+      style: "normal",
+    },
+    {
+      path: "../../public/fonts/Fontspring-DEMO-antebas-light.otf",
+      weight: "300",
+      style: "normal",
+    },
+    {
+      path: "../../public/fonts/Fontspring-DEMO-antebas-regular.otf",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../../public/fonts/Fontspring-DEMO-antebas-medium.otf",
+      weight: "500",
+      style: "normal",
+    },
+    {
+      path: "../../public/fonts/Fontspring-DEMO-antebas-bold.otf",
+      weight: "700",
+      style: "normal",
+    },
+    {
+      path: "../../public/fonts/Fontspring-DEMO-antebas-black.otf",
+      weight: "900",
+      style: "normal",
+    },
+  ],
+  variable: "--font-antebas",
+  display: "swap",
+});

lib/fonts/hero.ts

@@ -0,0 +1,25 @@
+import { DM_Sans, Playfair_Display, Syne } from "next/font/google";
+
+/** Hero-only pairing — unchanged from pre-Antebas layout. */
+export const heroDisplay = Syne({
+  subsets: ["latin"],
+  variable: "--font-hero-display",
+  weight: ["600", "700", "800"],
+});
+
+export const heroBody = DM_Sans({
+  subsets: ["latin"],
+  variable: "--font-hero-body",
+});
+
+export const heroSerif = Playfair_Display({
+  subsets: ["latin"],
+  variable: "--font-hero-serif",
+  weight: ["600", "700", "800"],
+});
+
+export const heroFontVariables = [
+  heroDisplay.variable,
+  heroBody.variable,
+  heroSerif.variable,
+].join(" ");