/* ============================================================= FIZ — Editorial design system (landing page) Run-club aesthetic (matches the transactional email template): alternating black/white surfaces, italic uppercase display type, hairline rules, ghost CTAs, one red accent moment per spread. Section background is driven by [data-theme="dark"|"light"]. ============================================================= */ /* ====== RESET ====== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* overflow-x: clip (not hidden) — `hidden` makes / a scroll container, which silently breaks `position: sticky` on the masthead. `clip` stops the same horizontal overflow without creating that container. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #FFFFFF; color: #0A0A0A; overflow-x: clip; max-width: 100vw; } /* Belt + braces against grid items whose intrinsic content (italic display type with negative letter-spacing) would otherwise prevent the column from shrinking and force horizontal scroll. */ .hero__grid > *, .spread > *, .three-col > *, .pricing > *, .quote > *, .s-header > * { min-width: 0; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } a { text-decoration: none; color: inherit; } ul { list-style: none; } ::selection { background: #FF4848; color: #FFFFFF; } /* ====== TOKENS ====== --accent stays the signature Fiz red. --accent-warm / --accent-sun are an energetic warm pair (already living in the vibe-mesh gradients) surfaced onto the page itself so the brand reads happy and inclusive, not just severe. */ :root { --accent: #FF4848; --accent-warm: #FF7A29; --accent-sun: #FFB020; --energy: linear-gradient(100deg, #FF4848 0%, #FF7A29 55%, #FFB020 100%); } /* ====== DISPLAY FACE ====== Archivo Black — the app's poster/headline face (workout posters, WOW takeover, badge cards). Self-hosted from the same TTFs the Flutter app bundles so the web's big italic headlines match the app exactly. Google Fonts only serves the upright cut, so its italic would be a faux slant — we ship the real ArchivoBlack-Italic instead. */ @font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ArchivoBlack-Regular.woff2') format('woff2'), url('/fonts/ArchivoBlack-Regular.ttf') format('truetype'); } @font-face { font-family: 'Archivo Black'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/ArchivoBlack-Italic.woff2') format('woff2'), url('/fonts/ArchivoBlack-Italic.ttf') format('truetype'); } /* ====== SECTION THEMING ====== */ .section { padding: clamp(80px, 12vw, 160px) 0; border-top: 1px solid; position: relative; } .section:first-of-type { border-top: 0; } .section[data-theme="dark"] { background: #000000; color: #FFFFFF; border-color: #1F1F1F; --hairline: #1F1F1F; --text-muted: #A0A0A0; --text-footnote: #5C5C5C; --invert: #FFFFFF; --invert-on: #000000; } .section[data-theme="light"] { background: #FFFFFF; color: #0A0A0A; border-color: #E5E5E5; --hairline: #E5E5E5; --text-muted: #525252; --text-footnote: #A3A3A3; --invert: #0A0A0A; --invert-on: #FFFFFF; } /* Warm theme — a bright, friendly cream surface for the welcome beats. Same editorial type system, just sunnier; breaks up the black/white alternation so the page feels inviting rather than severe. */ .section[data-theme="warm"] { background: #FFF6EE; color: #1A130B; border-color: #F1E2D2; --hairline: #F0E0CF; --text-muted: #6A5645; --text-footnote: #B79C85; --invert: #1A130B; --invert-on: #FFF6EE; } /* ====== CONTAINER ====== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } @media (min-width: 1024px) { .container { padding: 0 32px; } } /* ====== BREADCRUMB — slim dark bar under the masthead (mirrors BreadcrumbList JSON-LD). Dark chrome so it reads as part of the header above the dark hero, never as a white band wedged between two dark elements. ====== */ .breadcrumb-bar { background: #000; border-bottom: 1px solid #1F1F1F; } .breadcrumb { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; } .breadcrumb li { display: inline-flex; align-items: center; gap: 6px; color: #A0A0A0; } .breadcrumb li:not(:last-child)::after { content: "/"; color: #3A3A3A; font-weight: 400; } .breadcrumb a { color: #A0A0A0; transition: color .15s ease; } .breadcrumb a:hover { color: var(--accent, #FF4848); } .breadcrumb [aria-current] { color: #fff; } @media (min-width: 1024px) { .breadcrumb { padding: 12px 32px; } } /* ====== TYPE PRIMITIVES ====== */ .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-muted); } .eyebrow::before { content: '—'; color: var(--accent); margin-right: 14px; } h1.h-hero { font-family: 'Archivo Black', 'Inter', sans-serif; font-size: clamp(56px, 9.5vw, 132px); font-weight: 400; font-style: italic; line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; overflow-wrap: anywhere; } .h-section { font-family: 'Archivo Black', 'Inter', sans-serif; font-size: clamp(32px, 5.4vw, 76px); font-weight: 400; font-style: italic; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; overflow-wrap: anywhere; } .h-sub { font-family: 'Archivo Black', 'Inter', sans-serif; font-size: clamp(22px, 2.4vw, 34px); font-weight: 400; font-style: italic; line-height: 1.05; letter-spacing: -0.015em; text-transform: uppercase; overflow-wrap: anywhere; } .lead { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--text-muted); max-width: 560px; } .body { font-size: 16px; line-height: 1.7; color: var(--text-muted); } .footnote { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-footnote); } .serial { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-footnote); } .accent { color: var(--accent); } /* Inline em-dash mark before micro-labels */ .mark::before { content: '—'; color: var(--accent); margin-right: 10px; } /* ====== HAIRLINE RULE ====== */ .hairline { border-top: 1px solid var(--hairline); } /* ====== BUTTONS ====== */ .btn { display: inline-flex; align-items: center; gap: 14px; padding: 17px 30px 16px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .btn:hover { background: var(--invert); color: var(--invert-on); transform: translateY(-2px); } .btn .arrow { transition: transform 0.2s ease; } .btn:hover .arrow { transform: translateX(4px); } /* Primary CTA — solid high-contrast fill so one button clearly wins the pair. Rest: white-on-dark (invert) for max prominence; hover brings in the red accent as the interaction moment. Keeps red reserved for accents elsewhere. */ .btn--primary { background: var(--invert); border-color: var(--invert); color: var(--invert-on); } .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; } /* Secondary CTA — muted ghost outline, subordinate to the primary. */ .btn--ghost { color: var(--text-muted); } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: color 0.15s ease; } .link-arrow:hover { color: var(--invert); } /* ====== MASTHEAD ====== */ .masthead { position: sticky; top: 0; z-index: 100; background: #000000; color: #FFFFFF; border-bottom: 1px solid #1F1F1F; } .masthead__inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .wordmark { display: inline-flex; align-items: center; line-height: 0; color: #FFFFFF; } .wordmark__img { height: 22px; width: auto; display: block; } .nav { display: none; gap: 36px; align-items: center; } .nav a { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #FFFFFF; opacity: 0.65; transition: opacity 0.15s ease; } .nav a:hover { opacity: 1; } /* Persistent corner actions: "Get the app" CTA stays visible at every width; the hamburger only toggles the link menu on mobile. */ .masthead__actions { display: flex; align-items: center; gap: 12px; } .nav__cta { display: inline-flex; align-items: center; opacity: 1; border: 1px solid #FFFFFF; border-radius: 999px; color: #FFFFFF; padding: 10px 18px; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .nav__cta:hover { background: #FFFFFF; color: #000000; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid #FFFFFF; border-radius: 12px; color: #FFFFFF; padding: 10px 13px; } .nav-toggle__icon { display: block; } /* Desktop: full link nav shows, hamburger hides. This MUST come after the base .nav-toggle rule above — at equal specificity, source order decides, and an earlier @media block was previously losing to the later display:inline-flex. */ @media (min-width: 880px) { .nav { display: flex; } .nav-toggle { display: none; } } /* ====== MOBILE NAV ====== */ .mobile-nav { display: none; position: fixed; inset: 0; background: #000000; z-index: 200; padding: 96px 24px 24px; flex-direction: column; gap: 4px; } .mobile-nav.is-open { display: flex; } .mobile-nav a { font-family: 'Archivo Black', 'Inter', sans-serif; font-size: 22px; font-weight: 400; font-style: italic; text-transform: uppercase; letter-spacing: -0.025em; color: #FFFFFF; padding: 18px 0; border-bottom: 1px solid #1F1F1F; } .mobile-nav__close { position: absolute; top: 18px; right: 24px; background: none; border: 1px solid #FFFFFF; color: #FFFFFF; padding: 8px 14px; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } /* ====== HERO ====== */ .hero { padding: clamp(96px, 12vw, 168px) 0 clamp(96px, 12vw, 168px) 0; position: relative; overflow: hidden; isolation: isolate; } /* The first section on every page is the hero, sitting directly under the sticky masthead. Trim its top padding so the eyebrow/headline/CTAs stay above the fold; the bottom padding (rhythm to the next section) is kept. */ main > section:first-of-type { padding-top: clamp(40px, 5vw, 80px); } .hero .container { position: relative; z-index: 1; } .hero__grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: stretch; } .hero__main { max-width: 880px; } /* Hero background slot. Until a video/image is dropped in this is a flat black slab — intentionally clean. When media is added it sits behind the content with a vertical scrim so headlines stay legible. */ .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; } .hero__bg-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Was grayscale(1) — let the photo breathe in colour so the hero reads alive and energetic instead of moody-monochrome. Slight warmth + pop. */ filter: contrast(1.04) saturate(1.08) brightness(1.02); } .hero__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 8% 100%, rgba(255,122,41,0.22) 0%, rgba(255,122,41,0) 50%), linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.15) 65%, rgba(0,0,0,0.05) 100%), linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.85) 100%); pointer-events: none; } .hero__main { display: flex; flex-direction: column; gap: 28px; } .hero__headline { margin-top: 4px; } .hero__lead { max-width: 520px; color: #EDEDED; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 8px; } .hero__meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; padding-top: 36px; margin-top: auto; border-top: 1px solid var(--hairline); } .hero__meta dt { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #C8C8C8; margin-bottom: 6px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .hero__meta dd { font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; font-style: italic; letter-spacing: -0.025em; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } /* ====== PHOTO BLOCK ====== */ .photo { background: var(--hairline); overflow: hidden; border-radius: 18px; position: relative; } .photo--portrait { aspect-ratio: 3 / 4; } .photo--landscape { aspect-ratio: 3 / 2; } .photo--square { aspect-ratio: 1 / 1; } .photo--tall { aspect-ratio: 4 / 5; } .photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); } .photo::after { content: attr(data-caption); position: absolute; bottom: 14px; left: 14px; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-footnote); background: inherit; padding: 0; pointer-events: none; } .photo:not([data-caption])::after { content: none; } /* ====== TICKER ====== */ .ticker { background: #000; color: #FFFFFF; padding: 22px 0; overflow: hidden; border-top: 1px solid #1F1F1F; border-bottom: 1px solid #1F1F1F; } .ticker__track { display: flex; gap: 56px; white-space: nowrap; width: max-content; animation: ticker 50s linear infinite; } .ticker__item { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; opacity: 0.45; } .ticker__item--accent { color: var(--accent-warm); opacity: 1; } .ticker__item--strong { opacity: 1; } @keyframes ticker { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } } /* ====== SECTION HEADER ====== */ .s-header { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: clamp(48px, 6vw, 80px); } @media (min-width: 900px) { .s-header { grid-template-columns: 1.3fr 1fr; gap: 80px; } } .s-header__title { max-width: 760px; } .s-header__intro { padding-top: 6px; align-self: end; } /* ====== THREE-COL OVERVIEW ====== */ .three-col { display: grid; grid-template-columns: 1fr; gap: 48px; padding-top: 56px; border-top: 1px solid var(--hairline); } @media (min-width: 800px) { .three-col { grid-template-columns: repeat(3, 1fr); gap: 56px; } } .three-col__item { display: flex; flex-direction: column; gap: 14px; } /* Stacked (mobile) the three columns read as one long text chunk — compress into hairline-separated rows so the section stays a beat, not a chapter. */ @media (max-width: 799px) { .three-col { gap: 0; padding-top: 24px; } .three-col__item { gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--hairline); } .three-col__item:last-child { border-bottom: 0; padding-bottom: 0; } .three-col__body { font-size: 14px; line-height: 1.55; } } .three-col__num { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; color: var(--accent-warm); background: var(--energy); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .three-col__title { font-family: 'Archivo Black', 'Inter', sans-serif; font-size: 21px; font-weight: 400; font-style: italic; letter-spacing: -0.02em; text-transform: uppercase; } .three-col__body { font-size: 15px; line-height: 1.65; color: var(--text-muted); } /* ====== 2-COL SPREAD ====== */ .spread { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; } @media (min-width: 720px) { .spread { grid-template-columns: 1fr 1fr; gap: 64px; } } @media (min-width: 900px) { .spread { gap: 96px; } } .spread--reverse > .photo, .spread--reverse > .poster { order: 2; } @media (max-width: 719px) { .spread--reverse > .photo, .spread--reverse > .poster { order: 0; } .spread > .poster { max-width: 420px; width: 100%; margin: 0 auto; justify-self: center; } } .spread__body { display: flex; flex-direction: column; gap: 24px; } .spread__list { display: flex; flex-direction: column; gap: 0; padding-top: 16px; border-top: 1px solid var(--hairline); } .spread__list li { padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; line-height: 1.55; color: var(--text-muted); } .spread__list li::before { content: '+'; color: var(--accent); margin-right: 14px; font-weight: 800; } /* ====== PRICING ====== */ .pricing { display: grid; grid-template-columns: 1fr; border: 1px solid var(--hairline); border-radius: 20px; overflow: hidden; } @media (min-width: 800px) { .pricing { grid-template-columns: 1fr 1fr; } } .plan { padding: 56px 36px; border-bottom: 1px solid var(--hairline); } .plan:last-child { border-bottom: 0; } @media (min-width: 800px) { .plan { border-right: 1px solid var(--hairline); border-bottom: none; } .plan:last-child { border-right: 0; } } .plan__name { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-muted); } .plan__price { font-family: 'Archivo Black', 'Inter', sans-serif; font-size: clamp(64px, 9vw, 88px); font-weight: 400; font-style: italic; letter-spacing: -2px; line-height: 1; margin: 28px 0 8px; } .plan__period { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); } .plan__lead { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin: 16px 0 0; max-width: 380px; } .plan__features { margin: 36px 0 36px; display: flex; flex-direction: column; } .plan__features li { font-size: 14px; line-height: 1.55; padding: 14px 0; border-bottom: 1px solid var(--hairline); color: var(--text-muted); } .plan__features li::before { content: '↳'; color: var(--accent); margin-right: 14px; font-weight: 700; } .plan--feature { background: #0A0A0A; color: #FFFFFF; } .plan--feature { --hairline: #1F1F1F; --text-muted: #A0A0A0; --invert: #FFFFFF; --invert-on: #0A0A0A; } .plan--feature .plan__name { color: #FF4848; } /* ====== ATHLETE QUOTE ====== */ .quote { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; } @media (min-width: 900px) { .quote { grid-template-columns: 1fr 1.5fr; gap: 80px; } } .quote__body { display: flex; flex-direction: column; gap: 32px; } .quote__text { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; font-style: italic; line-height: 1.12; letter-spacing: -0.02em; } .quote__text::before { content: '“'; color: var(--accent); margin-right: 4px; } .quote__text::after { content: '”'; color: var(--accent); margin-left: 2px; } .quote__attr { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); } .quote__attr strong { color: inherit; font-weight: 800; } /* ====== FAQ ====== */ .faq__list { border-top: 1px solid var(--hairline); } .faq__item { border-bottom: 1px solid var(--hairline); padding: 28px 0; } .faq__q { font-family: 'Archivo Black', 'Inter', sans-serif; font-size: clamp(18px, 1.7vw, 24px); font-weight: 400; font-style: italic; letter-spacing: -0.025em; text-transform: uppercase; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; color: inherit; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: '+'; font-size: 28px; font-weight: 400; color: var(--text-muted); font-style: normal; line-height: 1; } .faq__item[open] .faq__q::after { content: '–'; } .faq__a { margin-top: 16px; max-width: 800px; font-size: 15px; line-height: 1.7; color: var(--text-muted); } /* ====== FINAL CTA ====== */ .final { text-align: center; padding: clamp(120px, 16vw, 200px) 0; position: relative; overflow: hidden; } /* Warm energy wash behind the closing call — happy, not severe. */ .final::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 70% at 50% 0%, rgba(255,122,41,0.20) 0%, rgba(255,122,41,0) 60%), radial-gradient(50% 60% at 80% 100%, rgba(255,72,72,0.16) 0%, rgba(255,72,72,0) 60%); pointer-events: none; } .final .container { position: relative; z-index: 1; } .final__headline { font-family: 'Archivo Black', 'Inter', sans-serif; font-size: clamp(48px, 10vw, 144px); font-weight: 400; font-style: italic; line-height: 0.94; letter-spacing: -0.02em; text-transform: uppercase; max-width: 1000px; margin: 0 auto 48px; overflow-wrap: anywhere; } .final__meta { margin-top: 28px; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-muted); } /* ============================================================= WORKOUT POSTER MOCKUP — used wherever a hero photo would sit. Stays on-brand when no real imagery is loaded. ============================================================= */ .poster { position: relative; background: var(--bg); color: inherit; border: 1px solid var(--hairline); border-radius: 18px; padding: 32px 28px; display: flex; flex-direction: column; gap: 22px; font-family: 'Inter', sans-serif; overflow: hidden; max-width: 100%; min-width: 0; } /* Poster cards size to their content. We don't pin a rigid aspect-ratio because content density varies (a 4-movement card vs an 8-movement card shouldn't stretch to fill the same shape — they should sit at their natural height). The min-width-0 above keeps them from forcing horizontal scroll; min-height-0 here keeps any inherited flexbox-stretch behaviour from re-introducing the dead-space issue. */ .poster--portrait, .poster--tall { aspect-ratio: auto; } @media (max-width: 600px) { .poster { padding: 24px 20px; gap: 18px; } .poster__serial { top: 22px; right: 20px; } .poster__movement { grid-template-columns: 60px 1fr; gap: 12px; } } .section[data-theme="dark"] .poster { background: #0A0A0A; } .poster__category { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); } .poster__serial { position: absolute; top: 28px; right: 28px; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-footnote); } .poster__title { font-family: 'Archivo Black', 'Inter', sans-serif; font-size: clamp(32px, 4vw, 56px); font-weight: 400; font-style: italic; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; margin-top: -4px; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } /* Card grids (workout index pages, hyrox, etc.) — cards are narrower, so scale titles down and tighten letter-spacing to prevent multi-word titles like "STATION REHEARSAL" or "COMPROMISED RUN" from breaking mid-word. */ .wo-grid .poster__title, .cat-grid .poster__title, .hero-grid .poster__title { font-size: clamp(22px, 2.2vw, 36px); letter-spacing: -0.045em; } .poster__meta { font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-muted); padding-bottom: 16px; border-bottom: 1px solid var(--hairline); } .poster__section-label { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-footnote); } .poster__movements { display: flex; flex-direction: column; } .poster__movement { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--hairline); } .poster__movement:last-child { border-bottom: 0; } .poster__movement-num { font-size: 14px; font-weight: 800; font-style: italic; letter-spacing: -0.01em; } .poster__movement-name { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); align-self: center; } .poster__footer { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-footnote); padding-top: 14px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 16px; } /* Leaderboard rows used inside a poster card */ .lb { display: flex; flex-direction: column; } .lb__row { display: grid; grid-template-columns: 22px 1fr 64px; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--hairline); align-items: center; } .lb__row:last-child { border-bottom: 0; } .lb__rank { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-footnote); } .lb__rank--1 { color: var(--accent); } .lb__name { font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-muted); } .lb__score { font-weight: 800; font-style: italic; letter-spacing: -0.01em; text-align: right; font-size: 13px; } /* ============================================================= MOTION — restrained editorial reveals + scroll progress ============================================================= */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal[data-delay="100"] { transition-delay: 100ms; } .reveal[data-delay="200"] { transition-delay: 200ms; } .reveal[data-delay="300"] { transition-delay: 300ms; } .reveal[data-delay="400"] { transition-delay: 400ms; } .reveal[data-delay="500"] { transition-delay: 500ms; } .reveal[data-delay="600"] { transition-delay: 600ms; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .ticker__track { animation: none; } .btn .arrow { transition: none; } } /* Scroll progress hairline at the very top */ .progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 300; pointer-events: none; } /* Card hover lift */ .plan, .three-col__item, .poster { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease; } .plan:hover, .poster:hover { transform: translateY(-6px); } .three-col__item:hover .three-col__title { color: var(--accent); transition: color 0.2s ease; } /* Headline letter-spacing settle (subtle) */ .h-hero, .h-section, .final__headline { transition: letter-spacing 0.8s ease; } .reveal.is-visible .h-hero, .reveal.is-visible .h-section, .reveal.is-visible .final__headline { letter-spacing: -0.04em; } /* Stat counter — JS swaps the value but no layout shift */ .hero__meta dd { font-variant-numeric: tabular-nums; } /* Ticker pause on hover (desktop) */ @media (hover: hover) { .ticker:hover .ticker__track { animation-play-state: paused; } } /* ====== FOOTER ====== */ .footer { background: #000; color: #FFFFFF; padding: 96px 0 40px; } .footer__grid { display: grid; grid-template-columns: 1fr; gap: 48px; } @media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .footer__brand { display: flex; flex-direction: column; gap: 18px; } .footer__brand .wordmark__img { height: 26px; } .footer__tag { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #5C5C5C; max-width: 280px; line-height: 1.65; } .footer__col h4 { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #5C5C5C; margin-bottom: 20px; } .footer__col ul { display: flex; flex-direction: column; gap: 10px; } .footer__col a { font-size: 12px; color: #A0A0A0; transition: color 0.15s ease; } .footer__col a:hover { color: #FFFFFF; } .footer__legal { margin-top: 72px; padding-top: 32px; border-top: 1px solid #1F1F1F; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #5C5C5C; } .footer__social { display: flex; gap: 12px; } .footer__social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #1F1F1F; color: #A0A0A0; transition: all 0.2s ease; } .footer__social a:hover { border-color: #FFFFFF; color: #FFFFFF; } /* ============================================================================= FOUNDING 100 WAITLIST — modal + counter (waitlist.js) ============================================================================= */ .hero__founding { display: inline-flex; align-items: center; align-self: flex-start; /* hero content is a flex column — don't stretch full-width */ width: fit-content; /* fallback for non-flex parents */ gap: 10px; margin-top: 24px; padding: 9px 16px; border: 1px solid rgba(255, 72, 72, 0.35); border-radius: 999px; background: rgba(255, 72, 72, 0.08); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #C9C9CF; } /* Pulsing "live" dot. */ .hero__founding::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255, 72, 72, 0.55); animation: foundingPulse 2s infinite; flex: none; } .hero__founding span { color: #FAFAFA; font-weight: 800; } /* The live claimed count is the hook — make it pop in the accent. */ .hero__founding [data-waitlist-claimed] { color: var(--accent); } @keyframes foundingPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 72, 72, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(255, 72, 72, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 72, 72, 0); } } @media (prefers-reduced-motion: reduce) { .hero__founding::before { animation: none; } } .wl-overlay { /* The modal is mounted at (outside any data-theme section), so pin the muted/footnote text colours here — otherwise they inherit near-black values and the eyebrow / share label vanish on the dark card. */ --text-muted: #A0A0A0; --text-footnote: #8A8A8A; position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5, 5, 6, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: wlFade 0.22s ease both; } .wl-overlay[hidden] { display: none; } @keyframes wlFade { from { opacity: 0; } to { opacity: 1; } } .wl-card { position: relative; width: 100%; max-width: 440px; background: #121214; border: 1px solid #27272A; border-radius: 4px; padding: 40px 32px 32px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); animation: wlRise 0.28s cubic-bezier(.16, 1, .3, 1) both; } @keyframes wlRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .wl-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: #71717A; font-size: 15px; line-height: 1; transition: color 0.15s ease; } .wl-close:hover { color: #FAFAFA; } .wl-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-footnote); margin: 0 0 16px; } .wl-eyebrow::before { content: '—'; color: var(--accent); margin-right: 12px; } .wl-title { font-size: 30px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; color: #FAFAFA; margin: 0 0 14px; } .wl-accent { color: var(--accent); } .wl-lead { font-size: 14px; line-height: 1.55; color: #A0A0A0; margin: 0 0 22px; } .wl-lead strong { color: #FAFAFA; } .wl-row { display: flex; flex-direction: column; gap: 12px; } .wl-input { width: 100%; box-sizing: border-box; padding: 14px 16px; background: #0A0A0B; border: 1px solid #27272A; border-radius: 4px; color: #FAFAFA; font-size: 15px; font-family: inherit; transition: border-color 0.15s ease; } .wl-input::placeholder { color: #525252; } .wl-input:focus { outline: none; border-color: var(--accent); } .wl-turnstile:empty { display: none; } .wl-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; background: var(--accent); border: 1px solid var(--accent); border-radius: 4px; color: #FFFFFF; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; cursor: pointer; font-family: inherit; transition: background 0.18s ease, transform 0.18s ease; } .wl-submit:hover { background: var(--accent-dark, #E03030); } .wl-submit .wl-arrow { transition: transform 0.2s ease; } .wl-submit:hover .wl-arrow { transform: translateX(4px); } .wl-submit.is-loading { opacity: 0.6; pointer-events: none; } .wl-submit.is-loading .wl-submit-label::after { content: '…'; animation: wlDots 1s steps(4) infinite; } @keyframes wlDots { to { opacity: 0.4; } } .wl-error { margin: 14px 0 0; font-size: 13px; color: var(--accent); line-height: 1.4; } .wl-fineprint { margin: 18px 0 0; font-size: 11px; color: #6E6E6E; line-height: 1.4; } .wl-share { margin-top: 8px; } .wl-share-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-footnote); margin: 0 0 10px; } .wl-share-row { display: flex; gap: 8px; } .wl-share-input { flex: 1; font-size: 13px; color: #A0A0A0; } .wl-copy { padding: 0 18px; background: transparent; border: 1px solid #27272A; border-radius: 4px; color: #FAFAFA; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; font-family: inherit; white-space: nowrap; transition: border-color 0.15s ease; } .wl-copy:hover { border-color: var(--accent); } @media (max-width: 480px) { .wl-card { padding: 36px 22px 26px; } .wl-title { font-size: 26px; } } /* ============================================================= VIBE MESH — opt-in nebula field for poster cards. Web port of the app's WorkoutMeshBackground "nebula" style: a type-keyed saturated gradient field that turns an imageless poster into the app's signature artwork. Opt in per card with data-vibe="conditioning|strength|engine|pulse|ladder|neutral". Forces light chrome + a legibility scrim so it reads on both light and dark sections. Static per-vibe field (the worker adds per-workout jitter; here a handful of showcase cards is enough). ============================================================= */ .poster[data-vibe] { color: #fff; border-color: rgba(255, 255, 255, 0.14); } .section[data-theme="dark"] .poster[data-vibe], .section[data-theme="light"] .poster[data-vibe] { background: #0A0A0A; } .poster[data-vibe] > * { position: relative; z-index: 1; } /* The serial must NOT inherit the relative-positioning above (that knocked its `right` offset off the left edge — appearing cut off). On a nebula poster it joins the flow as a centered Nº directly above the title, echoing the app share-poster masthead (centered Nº + title). */ .poster[data-vibe] > .poster__serial { position: static; z-index: 1; display: block; margin-bottom: -12px; } .poster[data-vibe] .poster__category, .poster[data-vibe] .poster__serial, .poster[data-vibe] .poster__title, .poster[data-vibe] .poster__meta { text-align: center; } /* Mesh field + scrim/striation as stacked pseudo-layers behind content. */ .poster[data-vibe]::before { content: ''; position: absolute; inset: 0; z-index: 0; } .poster[data-vibe]::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.38) 55%, rgba(0,0,0,0.62) 100%), repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 9px); mix-blend-mode: normal; pointer-events: none; } /* Re-tint the editorial chrome for a dark field, keeping the red accent. */ .poster[data-vibe] .poster__title { color: #fff; } .poster[data-vibe] .poster__serial { color: rgba(255,255,255,0.6); } .poster[data-vibe] .poster__meta, .poster[data-vibe] .poster__movement-name, .poster[data-vibe] .poster__footer { color: rgba(255,255,255,0.80); } .poster[data-vibe] .poster__movement-num { color: #fff; } .poster[data-vibe] .poster__movement { border-color: rgba(255,255,255,0.12); } .poster[data-vibe] .poster__section-label { color: rgba(255,255,255,0.62); } .poster[data-vibe] .poster__category { color: var(--accent); } /* Per-vibe fields (base coords mirror the app blob layout). */ .poster[data-vibe="conditioning"]::before { background: radial-gradient(38% 36% at 92% 12%, rgba(255,255,255,0.6), rgba(255,255,255,0) 55%), radial-gradient(95% 90% at 92% 12%, #FF6A2C, #FF6A2C00 56%), radial-gradient(92% 86% at 14% 46%, #E11D2E, #E11D2E00 56%), radial-gradient(96% 90% at 70% 94%, #FF3D77, #FF3D7700 56%), radial-gradient(62% 56% at 8% 96%, rgba(0,0,0,0.88), rgba(0,0,0,0) 60%), #1C0707; } .poster[data-vibe="strength"]::before { background: radial-gradient(38% 36% at 92% 12%, rgba(255,255,255,0.6), rgba(255,255,255,0) 55%), radial-gradient(95% 90% at 92% 12%, #2E6BFF, #2E6BFF00 56%), radial-gradient(92% 86% at 14% 46%, #6A3DFF, #6A3DFF00 56%), radial-gradient(96% 90% at 70% 94%, #18C8FF, #18C8FF00 56%), radial-gradient(62% 56% at 8% 96%, rgba(0,0,0,0.88), rgba(0,0,0,0) 60%), #080E22; } .poster[data-vibe="engine"]::before { background: radial-gradient(38% 36% at 92% 12%, rgba(255,255,255,0.6), rgba(255,255,255,0) 55%), radial-gradient(95% 90% at 92% 12%, #14B8A6, #14B8A600 56%), radial-gradient(92% 86% at 14% 46%, #2BD46E, #2BD46E00 56%), radial-gradient(96% 90% at 70% 94%, #19D3E0, #19D3E000 56%), radial-gradient(62% 56% at 8% 96%, rgba(0,0,0,0.88), rgba(0,0,0,0) 60%), #03130E; } .poster[data-vibe="pulse"]::before { background: radial-gradient(38% 36% at 92% 12%, rgba(255,255,255,0.6), rgba(255,255,255,0) 55%), radial-gradient(95% 90% at 92% 12%, #8B3DFF, #8B3DFF00 56%), radial-gradient(92% 86% at 14% 46%, #D62BD4, #D62BD400 56%), radial-gradient(96% 90% at 70% 94%, #FF4DA6, #FF4DA600 56%), radial-gradient(62% 56% at 8% 96%, rgba(0,0,0,0.88), rgba(0,0,0,0) 60%), #130720; } .poster[data-vibe="ladder"]::before { background: radial-gradient(38% 36% at 92% 12%, rgba(255,255,255,0.6), rgba(255,255,255,0) 55%), radial-gradient(95% 90% at 92% 12%, #FFB02E, #FFB02E00 56%), radial-gradient(92% 86% at 14% 46%, #FF7A1A, #FF7A1A00 56%), radial-gradient(96% 90% at 70% 94%, #F0392B, #F0392B00 56%), radial-gradient(62% 56% at 8% 96%, rgba(0,0,0,0.88), rgba(0,0,0,0) 60%), #1B0F03; } .poster[data-vibe="neutral"]::before { background: radial-gradient(38% 36% at 92% 12%, rgba(255,255,255,0.6), rgba(255,255,255,0) 55%), radial-gradient(95% 90% at 92% 12%, #5B6CFF, #5B6CFF00 56%), radial-gradient(92% 86% at 14% 46%, #9B5BFF, #9B5BFF00 56%), radial-gradient(96% 90% at 70% 94%, #4FA8E0, #4FA8E000 56%), radial-gradient(62% 56% at 8% 96%, rgba(0,0,0,0.88), rgba(0,0,0,0) 60%), #101019; } /* Inline-styled note paragraphs inside a meshed poster need light ink too. */ .poster[data-vibe] p { color: rgba(255, 255, 255, 0.78) !important; } .poster[data-vibe] .lb__name { color: rgba(255, 255, 255, 0.82); } .poster[data-vibe] .lb__score { color: #fff; } /* Showcase cards inside a homepage spread carry few elements by design — give the sparse composition air and poster stature. Auto margins above the detail block and the footer split the slack, so the masthead sits high, details ride the lower middle, footer anchors the base. */ .spread .poster[data-vibe], .ai-stage .poster[data-vibe], .gallery .poster[data-vibe] { min-height: 480px; padding: 48px 36px; gap: 26px; } .spread .poster[data-vibe] .poster__movements, .spread .poster[data-vibe] .podium, .spread .poster[data-vibe] .lb, .ai-stage .poster[data-vibe] .poster__movements, .gallery .poster[data-vibe] .poster__movements { margin-top: auto; } .spread .poster[data-vibe] .podium + .lb { margin-top: 0; } /* ============================================================= AI STAGE — sentence-to-poster cinematic section. A centred prompt pill, a hairline connector, and the generated poster landing beneath it over a conditioning-red glow. ============================================================= */ .ai-stage { position: relative; overflow: hidden; } .ai-stage .container { position: relative; z-index: 1; } .ai-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42% 30% at 50% 62%, rgba(225, 29, 46, 0.24), rgba(225, 29, 46, 0) 70%), radial-gradient(28% 24% at 39% 50%, rgba(255, 106, 44, 0.16), rgba(255, 106, 44, 0) 70%), radial-gradient(26% 22% at 63% 58%, rgba(255, 61, 119, 0.14), rgba(255, 61, 119, 0) 70%); } .ai-stage__flow { margin-top: 44px; text-align: center; } .ai-stage__prompt { display: inline-block; padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(255, 255, 255, 0.04); font-size: 14px; font-style: italic; color: rgba(255, 255, 255, 0.92); } .ai-stage__prompt::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 7px; vertical-align: -0.15em; background: var(--accent); animation: prompt-caret 1.1s steps(1) infinite; } @keyframes prompt-caret { 50% { opacity: 0; } } .ai-stage__connector { position: relative; width: 1px; height: 26px; margin: 10px auto 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.30), var(--accent)); } .ai-stage__connector::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); transform: translateX(-50%) rotate(45deg); } .ai-stage__card { max-width: 400px; margin: 0 auto; text-align: left; } /* Wide screens: the transformation reads left-to-right — sentence, arrow, poster — instead of stacking in a narrow centre column. */ @media (min-width: 880px) { .ai-stage__flow { display: flex; align-items: center; justify-content: center; margin-top: 56px; } .ai-stage__prompt { white-space: nowrap; } .ai-stage__connector { width: 120px; height: 1px; margin: 0; flex-shrink: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.30), var(--accent)); } .ai-stage__connector::after { left: auto; right: 0; top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg); } .ai-stage__card { margin: 0; max-width: 440px; flex-shrink: 0; } } /* ============================================================= GALLERY WALL — three posters, centre elevated, sides staggered down like a hung exhibition. Sides hide on small screens. ============================================================= */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1160px; margin: 72px auto 0; align-items: start; } /* Cards are wrapped in real links to their /w/ pages — stagger and visibility rules target the wrappers, chrome stays on the poster. */ .gallery__link { display: block; min-width: 0; color: inherit; text-decoration: none; } .gallery > :first-child, .gallery > :last-child { margin-top: 56px; } .gallery .poster[data-vibe]:not(.gallery__main) { min-height: 420px; padding: 40px 30px; gap: 22px; } .gallery .gallery__main[data-vibe] { min-height: 500px; } @media (max-width: 860px) { .gallery { grid-template-columns: 1fr; max-width: 420px; } .gallery > :first-child, .gallery > :last-child { display: none; } .gallery > :first-child { margin-top: 0; } } @media (prefers-reduced-motion: reduce) { .ai-stage__prompt::after { animation: none; } } /* ============================================================= PODIUM — web port of the app leaderboard's staggered 2-1-3 top three (1st tallest, centre). Medal hues mirror the app: gold (--accent-sun), silver #B8BABF, bronze #CD7F32. Steps rise from the baseline when the host .reveal card enters the viewport; avatars/names/scores ("riders") fade in after. ============================================================= */ .podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: end; } .podium__slot { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .podium__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); } .podium__slot--1 .podium__avatar { width: 48px; height: 48px; font-size: 13px; } .podium__name { font-size: 9px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .podium__score { font-size: 14px; font-weight: 800; font-style: italic; letter-spacing: -0.01em; color: #fff; } .podium__slot--1 .podium__score { font-size: 17px; } .podium__step { width: 100%; margin-top: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px 6px 3px 3px; transform: scaleY(0); transform-origin: bottom; transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .podium__step--1 { height: 86px; border-top: 2px solid rgba(255, 176, 32, 0.70); } .podium__step--2 { height: 58px; border-top: 2px solid rgba(184, 186, 191, 0.70); } .podium__step--3 { height: 42px; border-top: 2px solid rgba(205, 127, 50, 0.75); } .podium__step span { font-size: 18px; font-weight: 900; font-style: italic; } .podium__step--1 span { color: var(--accent-sun); } .podium__step--2 span { color: #B8BABF; } .podium__step--3 span { color: #CD7F32; } .podium__rider { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } /* Choreography once the host card reveals: bronze step, silver, gold — then each slot's riders land in the same rank order. */ .reveal.is-visible .podium__step { transform: scaleY(1); } .reveal.is-visible .podium__rider { opacity: 1; transform: none; } .reveal.is-visible .podium__step--3 { transition-delay: 0.15s; } .reveal.is-visible .podium__step--2 { transition-delay: 0.30s; } .reveal.is-visible .podium__step--1 { transition-delay: 0.45s; } .reveal.is-visible .podium__slot--3 .podium__rider { transition-delay: 0.55s; } .reveal.is-visible .podium__slot--2 .podium__rider { transition-delay: 0.70s; } .reveal.is-visible .podium__slot--1 .podium__rider { transition-delay: 0.85s; } @media (prefers-reduced-motion: reduce) { .podium__step, .podium__rider { transform: none !important; opacity: 1 !important; transition: none !important; } } /* ============================================================= PODIUM STAGE — full-bleed cinematic communities section. The podium leaves the poster card and becomes the centrepiece: centered masthead, scaled-up 2-1-3 podium over a soft nebula glow, overflow rows beneath, feature strip along the base. ============================================================= */ .podium-stage { position: relative; overflow: hidden; } .podium-stage .container { position: relative; z-index: 1; } /* Soft nebula field behind the stage — neutral palette, heavy falloff so it reads as stadium light, not a poster fill. */ .podium-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(44% 32% at 50% 60%, rgba(91, 108, 255, 0.30), rgba(91, 108, 255, 0) 70%), radial-gradient(30% 26% at 37% 52%, rgba(155, 91, 255, 0.22), rgba(155, 91, 255, 0) 70%), radial-gradient(28% 24% at 64% 56%, rgba(79, 168, 224, 0.18), rgba(79, 168, 224, 0) 70%); } .podium-stage__head { text-align: center; } .podium-stage__lead { max-width: 560px; margin: 28px auto 0; } .stage { max-width: 780px; margin: 72px auto 0; text-align: center; } .stage__title { font-family: 'Archivo Black', 'Inter', sans-serif; font-size: clamp(22px, 2.4vw, 30px); font-style: italic; text-transform: uppercase; letter-spacing: -0.02em; color: #fff; } .stage__meta { margin-top: 10px; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); } .podium--stage { margin-top: 44px; gap: 20px; } .podium--stage .podium__avatar { width: 52px; height: 52px; font-size: 13px; } .podium--stage .podium__slot--1 .podium__avatar { width: 64px; height: 64px; font-size: 15px; } .podium--stage .podium__name { font-size: 10px; } .podium--stage .podium__score { font-size: 17px; } .podium--stage .podium__slot--1 .podium__score { font-size: 21px; } .podium--stage .podium__step { margin-top: 10px; } .podium--stage .podium__step--1 { height: 128px; } .podium--stage .podium__step--2 { height: 88px; } .podium--stage .podium__step--3 { height: 64px; } .podium--stage .podium__step span { font-size: 24px; } .stage__tail { max-width: 440px; margin: 26px auto 0; text-align: left; } /* Wide screens: overflow rows sit two-up under the podium instead of stacking — symmetric top hairlines, half the height. */ @media (min-width: 720px) { .stage__tail { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; max-width: 680px; } .stage__tail .lb__row { border-bottom: 0; border-top: 1px solid var(--hairline); } } .stage__points { max-width: 1080px; margin: 80px auto 0; padding-top: 24px; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); text-align: center; } @media (max-width: 720px) { .stage__points { grid-template-columns: repeat(2, 1fr); row-gap: 18px; } .podium--stage .podium__step--1 { height: 96px; } .podium--stage .podium__step--2 { height: 66px; } .podium--stage .podium__step--3 { height: 48px; } } .podium-stage__cta { margin-top: 44px; text-align: center; } /* "You" tag on a leaderboard row — mirrors the app's accent micro-tag. */ .lb__you { display: inline-block; margin-left: 8px; padding: 2px 5px 1px; font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); background: rgba(255, 72, 72, 0.16); border: 1px solid rgba(255, 72, 72, 0.50); border-radius: 4px; vertical-align: 1px; }