From f950545ae01af103982e5d29c945803d55658254 Mon Sep 17 00:00:00 2001 From: kirukib Date: Mon, 8 Jun 2026 16:08:42 +0300 Subject: [PATCH] x --- app/globals.css | 51 +++++++++++++++--- app/layout.tsx | 28 +++------- components/layout/NavTicketsCta.tsx | 4 +- components/tickets/TicketCard.tsx | 2 +- lib/fonts/antebas.ts | 39 ++++++++++++++ lib/fonts/hero.ts | 25 +++++++++ public/fonts/.gitkeep | 0 .../fonts/Fontspring-DEMO-antebas-black.otf | Bin 0 -> 13644 bytes .../Fontspring-DEMO-antebas-blackitalic.otf | Bin 0 -> 13872 bytes public/fonts/Fontspring-DEMO-antebas-bold.otf | Bin 0 -> 13564 bytes .../Fontspring-DEMO-antebas-bolditalic.otf | Bin 0 -> 13940 bytes .../Fontspring-DEMO-antebas-extralight.otf | Bin 0 -> 13676 bytes .../fonts/Fontspring-DEMO-antebas-heavy.otf | Bin 0 -> 13740 bytes .../Fontspring-DEMO-antebas-heavyitalic.otf | Bin 0 -> 13996 bytes .../fonts/Fontspring-DEMO-antebas-light.otf | Bin 0 -> 13568 bytes .../fonts/Fontspring-DEMO-antebas-medium.otf | Bin 0 -> 13504 bytes .../Fontspring-DEMO-antebas-mediumitalic.otf | Bin 0 -> 13852 bytes .../fonts/Fontspring-DEMO-antebas-regular.otf | Bin 0 -> 13380 bytes public/fonts/Fontspring-DEMO-antebas-thin.otf | Bin 0 -> 13512 bytes .../Fontspring-DEMO-antebas-thinitalic.otf | Bin 0 -> 13804 bytes 20 files changed, 117 insertions(+), 32 deletions(-) create mode 100644 lib/fonts/antebas.ts create mode 100644 lib/fonts/hero.ts create mode 100644 public/fonts/.gitkeep create mode 100644 public/fonts/Fontspring-DEMO-antebas-black.otf create mode 100644 public/fonts/Fontspring-DEMO-antebas-blackitalic.otf create mode 100644 public/fonts/Fontspring-DEMO-antebas-bold.otf create mode 100644 public/fonts/Fontspring-DEMO-antebas-bolditalic.otf create mode 100644 public/fonts/Fontspring-DEMO-antebas-extralight.otf create mode 100644 public/fonts/Fontspring-DEMO-antebas-heavy.otf create mode 100644 public/fonts/Fontspring-DEMO-antebas-heavyitalic.otf create mode 100644 public/fonts/Fontspring-DEMO-antebas-light.otf create mode 100644 public/fonts/Fontspring-DEMO-antebas-medium.otf create mode 100644 public/fonts/Fontspring-DEMO-antebas-mediumitalic.otf create mode 100644 public/fonts/Fontspring-DEMO-antebas-regular.otf create mode 100644 public/fonts/Fontspring-DEMO-antebas-thin.otf create mode 100644 public/fonts/Fontspring-DEMO-antebas-thinitalic.otf 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 ( - - + +
diff --git a/components/layout/NavTicketsCta.tsx b/components/layout/NavTicketsCta.tsx index 911ea21..cd535bf 100644 --- a/components/layout/NavTicketsCta.tsx +++ b/components/layout/NavTicketsCta.tsx @@ -21,7 +21,7 @@ export function TicketsMarqueeCta({ "aria-label": ariaLabel = "Get tickets", }: MarqueeProps) { const repeated = Array.from({ length: 8 }, (_, i) => ( - + {TICKET_MARQUEE_SEGMENT} )); @@ -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", diff --git a/components/tickets/TicketCard.tsx b/components/tickets/TicketCard.tsx index d60324d..35ad027 100644 --- a/components/tickets/TicketCard.tsx +++ b/components/tickets/TicketCard.tsx @@ -103,7 +103,7 @@ export function TicketCard({ tier, index, featured, compact }: Props) {