diff --git a/app/globals.css b/app/globals.css index a841e24..f907245 100644 --- a/app/globals.css +++ b/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%, diff --git a/app/layout.tsx b/app/layout.tsx index 5e85dbf..97dfcd4 100644 --- a/app/layout.tsx +++ b/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 ( - -
+ +