/* ============================================================================ Fewer Zeros — design tokens Ported from https://www.tonyrobbins.com (reference picked 2026-09-19). Measured on the live page at 1440x900 and 390x844 on 2026-09-19 with getComputedStyle, plus its three stylesheets (/_next/static/chunks/*.css). Rule 32: we port STRUCTURE, RHYTHM and MOTION. We do not port their brand colour (#2764ff blue / #022886 hero gradient), their media, or their words. Every colour below is sampled from OUR persona and hero artwork. Every clamp(), size, radius and duration below is measured on the reference. ========================================================================= */ :root { /* -------------------------------------------------------------------- CANVAS + SURFACES Reference: --tr-black #000, --tr-black-1 #232325, --tr-black-2 #303134, --tr-white #fff, --tr-white-1 #f6f6f7, --tr-white-2 #dadbdf. Ours: the same four-step ladder, warmed. Sampled from the darkest 5% of app/public/img/hero/hero-A|B|C-1600.webp (#0c0a0a, #100d10, #110e13). -------------------------------------------------------------------- */ --canvas: #0b0a0a; /* = .theme--dark bg. Our hero shadow, not their pure #000 */ --canvas-1: #1a1715; /* = --tr-black-1. Card/placeholder fill on dark */ --canvas-2: #2a2522; /* = --tr-black-2. Hairline blocks, inactive chips */ --paper: #ffffff; /* = .theme--light bg (--tr-white) */ --paper-1: #f7f5f3; /* = --tr-white-1, warmed. Light card fill */ --paper-2: #dcd8d4; /* = --tr-white-2, warmed. Light divider block */ /* -------------------------------------------------------------------- TEXT Reference flips --tr-contrast per band: .theme--dark = white text on black, .theme--light = black text on white. Muted text is done with opacity utilities (opacity-60, text-black/70), not a separate hex. -------------------------------------------------------------------- */ --ink-on-dark: #ffffff; /* = .theme--dark colour */ --ink-on-light: #0b0a0a; /* = .theme--light colour, our warm black */ --muted-on-dark: rgba(255,255,255,.62); /* = footer/caption .opacity-60 on dark */ --muted-on-light: rgba(11,10,10,.70); /* = stat number colour srgb(0 0 0 / 0.7) */ /* -------------------------------------------------------------------- ACCENT — ours, not theirs. Reference accent is #2764ff (--tr-blue) with a #022886 hero gradient. Ours is sampled from the sunset highlight in our own hero frames: hero-A #fca127, hero-B #f6a045, hero-C #ea9556 -> settled on #f5a03c. The deep tone is the warm shadow in hero-A (#311e0f). -------------------------------------------------------------------- */ --accent: #b56ed9; /* Miami purple, sampled from our showroom prop (media/props/07-the-bot.png: #a967cc), lifted for legibility. Nicolas 2026-09-19: purple or pink, not amber */ --accent-deep: #2b1240; /* deep purple; base of the hero shade (the reference uses a deep blue there) */ --accent-ink: #0b0a0a; /* text that sits ON the accent (contrast ≈ 4.9:1) */ /* -------------------------------------------------------------------- GLASS + LINES Reference: bg-white/10 with hover:bg-white/20 and backdrop-blur(8px) on the hero card's Watch button; the video card itself is bg-white/10. -------------------------------------------------------------------- */ --glass: rgba(255,255,255,.10); /* = bg-white/10 (video card fill, glass pill) */ --glass-hover: rgba(255,255,255,.20); /* = hover:bg-white/20 */ --glass-blur: blur(8px); /* = backdrop-blur, measured backdrop-filter: blur(8px) */ --hairline-dark: rgba(255,255,255,.14); /* divider on a dark band */ --hairline-light: rgba(11,10,10,.12); /* divider on a light band */ /* -------------------------------------------------------------------- BUTTON FILL Reference pill: border border-contrast + bg-contrast + text-primary, i.e. on a dark band it is a WHITE pill with BLACK text. One pill, repeated. -------------------------------------------------------------------- */ --btn-fill: #ffffff; /* = bg-contrast on .theme--dark */ --btn-ink: #0b0a0a; /* = text-primary on .theme--dark */ --btn-fill-hover: rgba(255,255,255,.80); /* = hover:bg-contrast/80 */ /* -------------------------------------------------------------------- HERO SHADE Reference: .absolute.inset-x-0.top-1/3.bottom-0.bg-gradient-to-t from-[#022886] — a brand-coloured gradient rising from the bottom edge, starting at 1/3 down the frame. We keep the geometry, swap the colour, and bias it to the bottom-LEFT because our headline sits there. -------------------------------------------------------------------- */ --hero-shade-start: 33.333%; /* = top-1/3 */ --hero-shade: linear-gradient(to top, var(--accent-deep) 0%, rgba(43,18,64,0) 100%); --hero-shade-left: linear-gradient(to top right, rgba(11,10,10,.86) 0%, rgba(11,10,10,0) 62%); /* -------------------------------------------------------------------- TYPE FAMILIES — OFL stand-ins, self-hosted. Reference loads Suisse Intl (commercial: UltraLight 100 / Regular 400 / Medium 500 / SemiBold 600) as `sans`, IBM Plex Sans 400 as `plexSans`, IBM Plex Mono 500 as `mono`. sans -> SCHIBSTED GROTESK (OFL, Google Fonts, 400-900 variable). Closest free neo-grotesque to Suisse Intl: same tight apertures, same flat terminals. Inter Tight is the fallback pick if Schibsted reads too narrow at 75px. plex -> IBM PLEX SANS (OFL, Google Fonts) — identical to reference. mono -> IBM PLEX MONO (OFL, Google Fonts) — identical to reference. SELF-HOST PLAN: pull latin + latin-ext woff2 (we ship fr/es/pt) from Google Fonts, drop in app/public/fonts/, declare @font-face with font-display:swap, and add a ` Fallback` face with ascent/descent/size-adjust overrides over local(Arial) — the reference does exactly this to kill the swap shift. No Google CDN at runtime. -------------------------------------------------------------------- */ --font-sans: "Switzer", "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; /* Switzer (Fontshare, free) stands in for the reference's Suisse Intl since 2026-09-20; Schibsted kept as the fallback */ --font-body: var(--font-sans); /* the site face everywhere (audit item 31, 2026-09-27); IBM Plex Sans was the lesson, legal, sign-in and checkout face */ --font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace; --fw-regular: 400; /* = SuisseIntl_Regular */ --fw-medium: 500; /* = SuisseIntl_Medium — every heading and button on the reference */ --fw-semi: 600; /* = SuisseIntl_SemiBold — used sparingly */ /* -------------------------------------------------------------------- TYPE SCALE — the reference's own clamps, copied exactly. These are layout maths, not brand. Verified against computed pixels: xxxl -> 75.2px @1440 / 48px @390. xxl -> 60.8px @1440. xl -> 45.6px @1440. sm -> 14.6px @1440 / 12.8px @390. xs -> 14px. -------------------------------------------------------------------- */ --fs-xs: clamp(.75rem, .17vw + .76rem, .875rem); /* mono kickers ("NEXT EVENT"), fine print */ --fs-sm: clamp(.875rem, .17vw + .76rem, 1rem); /* button label, footer, captions */ --fs-base: clamp(1rem, .34vw + .91rem, 1.25rem); /* body copy */ --fs-md: clamp(1.25rem, .5vw + 1.2rem, 1.5rem); /* card headings */ --fs-lg: clamp(1.5rem, 1vw + 1.25rem, 2.5rem); /* small section headings (34.4px @1440) */ --fs-xl: clamp(1.75rem, 1.5vw + 1.5rem, 3.5rem); /* pull quotes, stat numbers (45.6px @1440) */ --fs-xxl: clamp(2.25rem, 2vw + 2rem, 4.5rem); /* section headings, .h2-large (60.8px @1440) */ --fs-xxxl: clamp(3rem, 3vw + 2rem, 6rem); /* hero headline only (75.2px @1440) */ /* Measured letter-spacing / line-height on the reference */ --track-display: -.05em; /* headline 75.2px @ -3.76px; quote 45.6px @ -2.28px */ --track-tight: -.02em; /* .tracking-tighter on smaller headings */ --track-wide: .025em; /* buttons: 14.608px @ 0.3652px */ --lh-display: .9; /* headline 67.68/75.2 and 43.2/48 — identical ratio */ --lh-heading: 1.0; /* quote 45.6/45.6 */ --lh-body: 1.5; /* body 24/16 */ --lh-label: 1.5; /* mono kicker 21/14 */ /* -------------------------------------------------------------------- SPACING — reference is Tailwind v4 with --spacing:.25rem. -------------------------------------------------------------------- */ --space: .25rem; /* = --spacing base unit */ --wrap-max: 1600px; /* = .wrapper max-width */ --wrap-narrow: 800px; /* = .wrapper--half max-width */ --gutter: 20px; /* = .wrapper padding-inline (spacing*5) on phone */ --gutter-lg: 40px; /* = .wrapper padding-inline (spacing*10) from 768px */ --gutter-wide: 10px; /* = .wrapper--wide on phone — the hero frame's outer margin */ --gutter-wide-lg: 20px; /* = .wrapper--wide from 768px */ --band-y: 40px; /* = section py-10 on phone */ --band-y-lg: 80px; /* = section md:py-20 */ --band-y-big: 128px; /* = statement band pt-32/pb-32 on phone */ --band-y-big-lg: 224px; /* = statement band md:pt-56/md:pb-56 */ --stack: 20px; /* = gap-5 / p-5 — the reference's default inner gap */ --stack-sm: 10px; /* = space-y-2.5 (kicker to card) */ /* -------------------------------------------------------------------- HEADER + HERO GEOMETRY Reference header: sticky top-0, z-40, always solid black, NO shrink and NO hide-on-scroll (measured: bg and height identical at scrollY 0/1200/1600). -------------------------------------------------------------------- */ --nav-h: 4rem; /* = --height-nav on phone (64px measured) */ --nav-h-lg: 5rem; /* = --height-nav from 768px (80px measured) */ --nav-z: 40; /* = z-40 */ --hero-h: calc(100dvh - var(--nav-h)); /* = .h-screen-no-nav; 760px @390, 800px @1440 */ /* -------------------------------------------------------------------- RADII — reference uses exactly three plus the pill. -------------------------------------------------------------------- */ --r-frame: 16px; /* = rounded-2xl — hero photo frame AND the 300px event card */ --r-media: 12px; /* = rounded-xl — the hero video card */ --r-sm: 8px; /* = rounded-lg — inputs, small chips */ --r-pill: 9999px; /* = rounded-full — every button on the page */ /* -------------------------------------------------------------------- COMPONENT METRICS — measured, not guessed. -------------------------------------------------------------------- */ --pill-pad: 12px 24px; /* = py-3 px-6 on phone (45px tall measured) */ --pill-pad-lg: 16px 32px; /* = md:py-4 md:px-8 (56px tall measured) */ --pill-pad-sm: 10px 16px; /* = header pill py-2.5 px-4 (43px tall measured) */ --pill-gap: 8px; /* = gap-2 between label and arrow/play glyph */ --pill-h: 45px; /* measured @390 */ --pill-h-lg: 56px; /* measured @1440 */ --pill-h-sm: 43px; /* header pill, measured @1440 */ --video-card-w: 384px; /* = lg:w-96 — the "NEXT EVENT" card */ --video-card-aspect: 16 / 9; /* = aspect-video (216px tall at 384px wide) */ --video-card-pad: 20px; /* = p-5 on the content layer */ --video-card-title-max: 160px; /* = max-w-[160px] on the title lockup */ --card-w: 300px; /* = .swiper-slide max-w-[300px] event card */ --card-aspect: 2 / 3; /* = aspect-portrait (450px tall at 300px wide) */ --card-pad: 24px 40px; /* = px-10 py-6 on the card's content layer */ --card-veil: linear-gradient(to top, rgba(11,10,10,.80) 0%, rgba(11,10,10,0) 100%); /* = bg-linear-to-t from-black/80 over every card photo */ /* -------------------------------------------------------------------- MOTION — the reference has no scroll-reveal and no scroll library. Everything is a 500ms CSS transition on hover, plus Swiper for the swimlanes and a Radix accordion for expanding panels. -------------------------------------------------------------------- */ --dur: .5s; /* = duration-500 — every hover on the page */ --dur-fast: .15s; /* = duration-150 — focus rings, small state flips */ --dur-accordion: .2s; /* = @keyframes accordion-down/up */ --ease: cubic-bezier(.4,0,.2,1); /* = --ease-in-out */ --ease-out: cubic-bezier(0,0,.2,1); /* = --ease-out */ --hover-scale: 1.05; /* = group-hover:scale-105 on card photos */ --hover-fade: .5; /* = hover:opacity-50 on nav links */ /* Shadows: the reference uses NONE. Depth comes from the photo veil and the 16px frame, never from a drop shadow. One shadow exists, for the video modal we add. */ --shadow-none: none; --shadow-modal: 0 24px 64px rgba(0,0,0,.55); } /* Reference header is 4rem on phone, 5rem from 768px (--height-nav override). */ @media (min-width: 768px) { :root { --nav-h: var(--nav-h-lg); --gutter: var(--gutter-lg); --gutter-wide: var(--gutter-wide-lg); --band-y: var(--band-y-lg); --band-y-big: var(--band-y-big-lg); } } /* -------------------------------------------------------------------------- BAND THEMES — the reference alternates .theme--dark / .theme--light and flips two variables; every component reads --bg / --fg / --muted / --line. Port this: it is why one button style works on both bands. -------------------------------------------------------------------------- */ .band-dark, .theme-dark, .hero { --bg: var(--canvas); --surface: var(--canvas-1); --fg: var(--ink-on-dark); --muted: var(--muted-on-dark); --line: var(--hairline-dark); background-color: var(--bg); color: var(--fg); } .band-light, .theme-light { --bg: var(--paper); --surface: var(--paper-1); --fg: var(--ink-on-light); --muted: var(--muted-on-light); --line: var(--hairline-light); background-color: var(--bg); color: var(--fg); } /* Reference honours prefers-reduced-motion with one blanket rule. */ @media (prefers-reduced-motion: reduce) { :root { --dur: .01ms; --dur-fast: .01ms; --dur-accordion: .01ms; --hover-scale: 1; } }