/* ============================================================================= WMB 2026 HOMEPAGE — style.css Mobile-first cascade. 375px is the design baseline; min-width media queries step up to 768 / 1024 / 1280 / 1920. Editorial-brutalist, sharp corners, hairline borders, red is decisive. ========================================================================== */ /* ----------------------------------------------------------------------------- FONTS Latin CT (Not Wide) is the display face. File ships in /fonts/. Bebas Neue + JetBrains Mono pulled from Google CDN by index.html . --------------------------------------------------------------------------- */ @font-face { font-family: "Latin CT"; src: url("../../fonts/LatinCT-NotWide.otf") format("opentype"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ----------------------------------------------------------------------------- TOKENS — locked. Do not add new colors. --------------------------------------------------------------------------- */ :root { /* Palette */ --black: #000000; --black-2: #0a0a0a; --surface: #111111; --surface-2: #1a1a1a; --border: #1a1a1a; --border-2: #2a2a2a; --white: #ffffff; --text-muted: #888888; --text-muted-2: #555555; --red: #c8102e; --red-2: #e63946; --gold: #c9a14a; /* reigning-champion accent only */ /* Type */ --f-display: "Latin CT", "Roboto Slab", "Bree Serif", Georgia, serif; --f-ui: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Spacing scale */ --gutter: 18px; --section-y: 64px; --max-w: 1440px; /* Motion */ --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-in: cubic-bezier(0.6, 0, 0.8, 0.4); --dur: 200ms; --dur-fast: 120ms; } @media (min-width: 768px) { :root { --gutter: 24px; --section-y: 80px; } } @media (min-width: 1024px) { :root { --gutter: 32px; --section-y: 96px; } } @media (min-width: 1280px) { :root { --gutter: 40px; --section-y: 120px; } } /* ----------------------------------------------------------------------------- BASE --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--black); color: var(--white); font-family: var(--f-ui); font-size: 16px; line-height: 1.45; letter-spacing: 0.04em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } ::selection { background: var(--red); color: var(--white); } .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------------- ATOMS — eyebrow, headline, rule, button, chip --------------------------------------------------------------------------- */ .eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; display: inline-block; } .eyebrow::before { content: "// "; color: var(--red); } @media (min-width: 768px) { .eyebrow { font-size: 12px; } } h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; } .h-display { font-family: var(--f-display); text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.92; font-weight: 400; } .section-rule { display: block; width: 64px; height: 4px; background: var(--red); margin: 20px 0 24px; } .section-head { margin-bottom: 40px; } .section-head h2 { font-family: var(--f-display); font-size: clamp(38px, 9vw, 64px); line-height: 0.92; letter-spacing: 0.005em; text-transform: uppercase; margin-top: 14px; } .section-head .deck { max-width: 64ch; margin: 0; font-size: 15px; letter-spacing: 0.04em; color: var(--text-muted); line-height: 1.55; } .section-head .red { color: var(--red); } @media (min-width: 768px) { .section-head { margin-bottom: 56px; } .section-head h2 { font-size: clamp(48px, 6vw, 80px); } .section-head .deck { font-size: 17px; } } @media (min-width: 1280px) { .section-head h2 { font-size: clamp(64px, 5vw, 96px); } } /* Button */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 22px; font-family: var(--f-ui); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--red); color: var(--white); border: 1px solid var(--red); border-radius: 0; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out); } .btn:hover { background: var(--red-2); border-color: var(--red-2); } .btn:active { background: #8a0a1e; border-color: #8a0a1e; transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--red-2); outline-offset: 2px; } .btn--ghost { background: transparent; color: var(--white); border-color: var(--white); } .btn--ghost:hover { background: transparent; color: var(--red-2); border-color: var(--red-2); } .btn--black { background: #000000; color: var(--white); border-color: var(--border-2); } .btn--black:hover { background: #111111; color: var(--white); border-color: var(--white); } .btn--black:active { background: #000; border-color: var(--white); } .btn--sm { min-height: 44px; padding: 10px 16px; font-size: 12px; letter-spacing: 0.14em; } .btn--lg { min-height: 56px; padding: 18px 28px; font-size: 15px; } @media (min-width: 1024px) { .btn--lg { min-height: 60px; padding: 20px 32px; font-size: 16px; } } /* Chip */ .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 14px; font-family: var(--f-ui); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; background: transparent; color: var(--text-muted); border: 1px solid var(--border-2); border-radius: 0; } /* ----------------------------------------------------------------------------- UTILITY STRIP — top of page, live indicator + lang --------------------------------------------------------------------------- */ .utility { position: relative; z-index: 60; background: #050505; border-bottom: 1px solid var(--border); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; } .utility__inner { display: flex; align-items: center; justify-content: space-between; min-height: 36px; gap: 12px; } .utility__live { display: flex; align-items: center; gap: 10px; color: var(--white); } .utility__dot { width: 7px; height: 7px; background: var(--red); animation: pulse 1.6s var(--ease-out) infinite; } .utility__right { display: flex; align-items: center; gap: 16px; color: var(--text-muted); } .utility__right a { color: var(--text-muted); transition: color var(--dur-fast); } .utility__right a:hover { color: var(--red-2); } /* Social icons, moved into the utility strip in front of "Promoters Portal". */ .utility__social { display: none; list-style: none; margin: 0; padding: 0; align-items: center; gap: 12px; } .utility__social-link { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); transition: color var(--dur-fast); } .utility__social-link:hover { color: var(--red-2); } .utility__social svg { display: block; width: 14px; height: 14px; } @media (min-width: 768px) { .utility__social { display: inline-flex; } } .utility__right .desktop-only { display: none; } @media (min-width: 768px) { .utility { font-size: 11px; } .utility__inner { min-height: 38px; } .utility__right .desktop-only { display: inline; } .utility__right .sep { color: var(--border-2); } } @media (max-width: 767px) { /* Mobile utility: trim to live status + EN/DE only. Promoters/Press move into the drawer. */ .utility__inner { min-height: 32px; } } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } } /* ----------------------------------------------------------------------------- NAV Mobile: burger left, logo center, CTA right. Desktop: logo left, links center, CTA right. --------------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 100; background: var(--black); border-bottom: 1px solid var(--border); overflow: visible; } .nav__inner { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 60px; gap: 8px; overflow: visible; position: relative; } .nav__burger { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; color: var(--white); border: 1px solid var(--border-2); border-radius: 0; } .nav__burger:hover { border-color: var(--white); } .nav__burger svg { width: 18px; height: 18px; } .nav__logo { grid-column: 2; justify-self: center; display: flex; align-items: center; justify-content: center; min-width: 0; position: relative; z-index: 200; height: 60px; overflow: visible; } .nav__logo img { height: 160px; width: auto; max-width: none; /* logo is height-driven; never let the global img max-width:100% squish it */ filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); margin: -50px 0; position: relative; } .nav__links { display: none; } .nav__cta { white-space: nowrap; } @media (min-width: 1024px) { .nav__inner { /* logo left · empty centre · burger right (until the menu fits at >=1440) */ grid-template-columns: 1fr auto 1fr; min-height: 76px; gap: 24px; } .nav__logo { grid-column: 1; justify-self: start; height: 76px; } .nav__logo img { height: 200px; margin: -62px 0; } } @media (min-width: 1440px) { /* Wide enough to seat the full inline menu beside the logo without overlap. Below this, the burger + drawer handle navigation. */ .nav__burger { display: none; } .nav__links { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 0; } .nav__link { padding: 14px 14px; font-family: var(--f-ui); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); border-bottom: 2px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast); } .nav__link:hover { color: var(--white); } .nav__link--active { color: var(--white); border-bottom-color: var(--red); } } /* Mobile nav drawer */ .drawer { position: fixed; inset: 0; z-index: 100; background: var(--black); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 300ms var(--ease-out); visibility: hidden; } .drawer.is-open { transform: translateX(0); visibility: visible; } /* Drawer CONTENT (.menu-head / .v2-list / .v2-item / .menu-foot) is styled in assets/css/drawer.css — single source of truth, loaded on every page. */ @media (min-width: 1440px) { .drawer { display: none; } } /* ----------------------------------------------------------------------------- HERO Mobile: stacked, headline / sub / CTAs / 5 stats (2-2-1 grid). Desktop: left-aligned content, stat strip 1x5 below. --------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: var(--black); padding: 48px 0 56px; } .hero__bg { position: absolute; inset: 0; background: url("../img/hero.jpg") center/cover no-repeat; /* scroll by default — a fixed bg judders on touch/tablet scroll; the parallax is re-enabled only on desktop-with-a-pointer below. */ background-attachment: scroll; filter: brightness(0.75) contrast(1.08) saturate(1.05); opacity: 0.95; } @media (min-width: 1025px) and (hover: hover) { .hero__bg { background-attachment: fixed; } } .hero__overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 30%, rgba(200,16,46,0.10) 0%, transparent 55%), linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.85) 100%); } .hero__content { position: relative; z-index: 2; } .hero__meta { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); opacity: 0.78; margin-bottom: 28px; line-height: 1.5; } .hero__meta::before { content: "// "; color: var(--red); } .hero__title { font-family: var(--f-display); font-size: clamp(34px, 9vw, 56px); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; text-shadow: 0 3px 12px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.45); } .hero__title .l1, .hero__title .l2, .hero__title .l3 { display: block; } .hero__title .l1 { color: var(--white); } .hero__title .l2 { color: var(--black); -webkit-text-stroke: 1.5px var(--white); text-stroke: 1.5px var(--white); } .hero__title .l3 { color: var(--red); } .hero__rule { display: block; width: 64px; height: 4px; background: var(--red); margin: 24px 0 22px; } .hero__sub { margin: 0; max-width: 56ch; font-size: 16px; letter-spacing: 0.04em; line-height: 1.55; color: var(--white); opacity: 0.86; } .hero__ctas { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .hero__ctas .btn { width: 100%; } /* FOLLOW US strip — visible on mobile / tablet, hidden on desktop where the social icons live in the header rail instead. */ .hero__social { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border-2); } .hero__social-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .hero__social-label::before { content: "// "; color: var(--red); } .hero__social-rule { flex: 1; height: 1px; background: var(--border-2); } .hero__social-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; } .hero__social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--white); border: 1px solid var(--border-2); transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); } .hero__social-link:hover { color: var(--red-2); border-color: var(--red-2); } .hero__social-link:active { background: rgba(200,16,46,0.08); } @media (min-width: 1024px) { /* Desktop has icons in the header — hide the in-hero strip */ .hero__social { display: none; } } /* Stat strip */ .stats { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border-2); border-left: 1px solid var(--border-2); background: rgba(0,0,0,0.88); } .stat { background: rgba(0,0,0,0.85); border-right: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); padding: 20px 16px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; transition: background var(--dur) var(--ease-out); } .stat:hover { background: rgba(0,0,0,0.95); } .stat--full { grid-column: 1 / -1; } .stat__n { font-family: var(--f-display); font-size: clamp(34px, 8vw, 48px); line-height: 1; letter-spacing: 0.01em; color: var(--white); } .stat__n .small { font-size: 0.55em; opacity: 0.6; margin-left: 4px; } .stat__l { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); } @media (min-width: 414px) { .hero__ctas { flex-direction: row; flex-wrap: wrap; } .hero__ctas .btn { width: auto; flex: 1 1 0; min-width: 200px; } } @media (min-width: 768px) { .hero { padding: 80px 0 96px; } .hero__meta { font-size: 11px; } .hero__sub { font-size: 18px; } .stats { grid-template-columns: repeat(5, 1fr); } .stat { min-height: 120px; padding: 24px 20px; } .stat--full { grid-column: auto; } } @media (min-width: 1024px) { .hero { padding: 120px 0 140px; min-height: 760px; } .hero__bg { opacity: 1; } .hero__title { font-size: clamp(52px, 6.2vw, 80px); } .hero__title .l2 { -webkit-text-stroke-width: 2px; } .hero__sub { font-size: 19px; max-width: 60ch; } .stat__n { font-size: clamp(44px, 4vw, 60px); } .stat { padding: 28px 24px; min-height: 144px; } } @media (min-width: 1280px) { .hero__title { font-size: clamp(64px, 6.4vw, 96px); } } /* ----------------------------------------------------------------------------- GENERIC SECTION --------------------------------------------------------------------------- */ section.s { padding: var(--section-y) 0; position: relative; } section.s--alt { background: var(--black-2); } section.s--alt + section.s--alt { border-top: 1px solid var(--border); } /* ----------------------------------------------------------------------------- LINEUP --------------------------------------------------------------------------- */ .lineup__progress { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .lineup__progress-count { font-family: var(--f-display); font-size: 36px; line-height: 1; letter-spacing: 0.02em; color: var(--white); } .lineup__progress-count .of { color: var(--text-muted); } .lineup__progress-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); } .lineup__progress-bar { flex: 1 1 100%; height: 4px; background: var(--surface); border: 1px solid var(--border); position: relative; min-width: 160px; } .lineup__progress-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--progress, 32%); background: var(--red); } .lineup__grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .lineup__cta { margin-top: 36px; display: flex; } @media (min-width: 600px) { .lineup__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .lineup__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { .lineup__grid { grid-template-columns: repeat(4, 1fr); } } /* ----------------------------------------------------------------------------- FUNNEL --------------------------------------------------------------------------- */ .funnel { display: grid; grid-template-columns: 1fr; gap: 32px; } .funnel__callout { background: var(--red); color: var(--white); padding: 36px 28px; display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; gap: 28px; } .funnel__callout-eye { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.78); } .funnel__callout-eye::before { content: "// "; color: var(--white); } .funnel__callout-n { font-family: var(--f-display); font-size: clamp(72px, 22vw, 132px); line-height: 0.9; letter-spacing: 0.02em; } .funnel__callout-l { font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.15; margin-top: 18px; font-family: var(--f-ui); } .funnel__callout-sub { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.85); padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.28); } .funnel__bars { display: flex; flex-direction: column; gap: 18px; } .fb__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 12px; } .fb__l { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); } .fb__n { font-family: var(--f-display); font-size: 24px; line-height: 1; color: var(--white); letter-spacing: 0.02em; } .fb__fill { height: 18px; background: var(--red); } .fb__track { position: relative; height: 18px; background: var(--surface); border: 1px solid var(--border); } .fb__track .fb__fill { position: absolute; inset: 0 auto 0 0; height: 100%; border: 0; } @media (min-width: 768px) { .funnel__callout-l { font-size: 22px; } .fb__n { font-size: 30px; } } @media (min-width: 1024px) { .funnel { grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: stretch; } .funnel__callout { padding: 48px 40px; min-height: 0; } } /* ----------------------------------------------------------------------------- GLOBE / GLOBAL REACH --------------------------------------------------------------------------- */ .reach { display: grid; grid-template-columns: 1fr; gap: 40px; } .reach__copy { max-width: 62ch; } .reach__title { font-family: var(--f-display); font-size: clamp(36px, 5.4vw, 58px); line-height: 1.0; letter-spacing: 0.01em; text-transform: uppercase; color: var(--white); margin: 0; font-weight: 400; } .reach__deck { margin-top: 0 !important; } .reach__globe-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 600px; margin: 0 auto; overflow: visible; } .reach__globe-wrap svg { display: block; width: 100%; height: 100%; } .reach__globe-meta { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); background: var(--black); padding: 6px 10px; border: 1px solid var(--border); z-index: 2; } .reach__globe-meta .live-dot { display: inline-block; width: 6px; height: 6px; background: var(--red); animation: pulse 1.6s var(--ease-out) infinite; margin-right: 8px; vertical-align: middle; } .reach__stats { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); } .reach__stat { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 18px 0 16px; border-bottom: 1px solid var(--border); } .reach__stat-n { font-family: var(--f-display); font-size: clamp(40px, 7vw, 64px); line-height: 1; letter-spacing: 0.02em; color: var(--white); } .reach__stat-l { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); text-align: right; max-width: 220px; line-height: 1.4; } @media (min-width: 1024px) { .reach { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } /* Cap the globe so it stays roughly in line with the copy column instead of filling the full grid cell and overflowing below the text. */ .reach__globe-wrap { max-width: 440px; } } @media (min-width: 1280px) { .reach__stat-n { font-size: 72px; } } /* GLOBE (D3 orthographic) ---------------------------------------------------- */ .globe-stage { position: relative; width: 100%; height: 100%; aspect-ratio: 1 / 1; } .globe-stage svg { overflow: visible; } .globe-ocean { fill: #0a0a0a; } .globe-country { fill: #1a1a1a; stroke: #2a2a2a; stroke-width: 0.5; vector-effect: non-scaling-stroke; } .globe-country.active { fill: var(--red); } .globe-label { position: absolute; top: 0; left: 0; color: var(--red-2); font-family: var(--f-mono); font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; will-change: opacity, transform; } .globe-label::before { content: ""; display: inline-block; width: 14px; height: 1px; background: var(--red-2); vertical-align: middle; margin-right: 8px; transform: translateY(-1px); } @media (max-width: 599px) { .globe-label { font-size: 9px; letter-spacing: 0.14em; } .globe-label::before { width: 10px; margin-right: 6px; } } /* ----------------------------------------------------------------------------- HALL OF FAME --------------------------------------------------------------------------- */ .hall__scroll-cue { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); } .hall { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 16px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } .hall::-webkit-scrollbar { height: 6px; } .hall::-webkit-scrollbar-track { background: transparent; } .hall::-webkit-scrollbar-thumb { background: var(--border-2); } .champ { flex: 0 0 80vw; max-width: 360px; scroll-snap-align: start; background: var(--black); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; transition: transform var(--dur) var(--ease-out); } .champ:hover { transform: translateY(-2px); } .champ__photo { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #0f0f0f; overflow: hidden; border-bottom: 1px solid var(--border); } /* Match the band-card treatment: muted by default, full colour on hover. */ .champ__img { filter: grayscale(0.8) contrast(1.02); transition: filter 0.45s ease; } .champ:hover .champ__img { filter: grayscale(0) contrast(1); } .champ__ph { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 14px), radial-gradient(circle at 50% 35%, rgba(200,16,46,0.10) 0%, transparent 60%), #0f0f0f; display: flex; align-items: center; justify-content: center; } .champ__ph span { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted-2); padding: 6px 10px; border: 1px solid var(--border-2); background: rgba(0,0,0,0.6); } .champ__ph--gap { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 13px), #0a0a0a; } /* Top scrim just dark enough so year + status pill read on top of photo */ .champ__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.30) 38%, rgba(0,0,0,0.05) 70%, rgba(0,0,0,0.55) 100%); } .champ__shade--gap { background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.85) 100%); } /* Metadata row year — gold for the reigning champion, red otherwise */ .champ__meta-year { font-family: var(--f-display); font-size: 18px; line-height: 1; letter-spacing: 0.02em; color: var(--red); } .champ--reigning .champ__meta-year { color: var(--gold); } .champ--gap .champ__meta-year { color: var(--text-muted-2); } .champ__sep { color: var(--red); } .champ__meta-flag { display: inline-flex; align-items: center; } /* Info row beneath the photo — name left, country right */ .champ__info { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 12px; border-top: 0; } .champ__name { font-family: var(--f-display); font-size: 22px; line-height: 1.02; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); margin: 0; overflow-wrap: anywhere; } .champ--gap .champ__name { color: var(--text-muted-2); font-size: 18px; } .champ__country-row { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); } .champ__country { font-family: var(--f-ui); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); } .champ--archive { opacity: 0.78; } .hall__cta { margin-top: 32px; } @media (min-width: 768px) { .champ { flex-basis: 380px; max-width: 380px; } } @media (min-width: 1280px) { .champ { flex-basis: 440px; max-width: 440px; } .champ__name { font-size: 24px; } } /* ----------------------------------------------------------------------------- REASONS --------------------------------------------------------------------------- */ .reasons { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .reason { padding: 32px 24px 32px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 18px; min-height: 260px; position: relative; background: var(--black); transition: background var(--dur) var(--ease-out); } .reason:hover { background: var(--surface); } .reason__n { font-family: var(--f-display); font-size: 64px; line-height: 0.9; letter-spacing: 0.02em; color: var(--red); } .reason__title { font-family: var(--f-display); font-size: 22px; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; color: var(--white); } .reason__body { margin: 0; font-size: 14px; letter-spacing: 0.04em; line-height: 1.55; color: var(--text-muted); } .reason__body strong { color: var(--white); font-weight: inherit; } @media (min-width: 768px) { .reasons { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .reasons { grid-template-columns: repeat(5, 1fr); } .reason { padding: 32px 22px; } .reason__title { font-size: 20px; } } @media (min-width: 1280px) { .reason__title { font-size: 22px; } .reason__n { font-size: 72px; } } /* ----------------------------------------------------------------------------- PARTNERS --------------------------------------------------------------------------- */ .partners { padding: 56px 0; background: var(--black-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .partners__inner { text-align: center; } .partners__eye { margin-bottom: 28px; } .partners__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 0; } .partners__name { font-family: var(--f-display); font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 0 16px; position: relative; transition: color var(--dur-fast); } .partners__name:hover { color: var(--white); } .partners__name + .partners__name::before { content: "·"; position: absolute; left: -3px; color: var(--red); } @media (min-width: 768px) { .partners { padding: 72px 0; } .partners__name { font-size: 22px; padding: 0 22px; } } /* ----------------------------------------------------------------------------- FOOTER --------------------------------------------------------------------------- */ .footer { background: var(--black); padding: 64px 0 28px; border-top: 1px solid var(--border); } .footer__cols { display: grid; grid-template-columns: 1fr; gap: 40px; } .footer__brand-name { font-family: var(--f-display); font-size: 28px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); line-height: 0.95; } .footer__rule { display: block; width: 64px; height: 4px; background: var(--red); margin: 18px 0; } .footer__tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); max-width: 360px; line-height: 1.6; margin: 0 0 24px; } .footer__nl { display: flex; flex-direction: column; gap: 10px; max-width: 420px; } .footer__nl-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); } .footer__nl-label::before { content: "// "; color: var(--red); } .footer__nl-row { display: flex; gap: 0; } .footer__nl input { flex: 1; min-width: 0; background: var(--black-2); border: 1px solid var(--border-2); border-right: 0; padding: 14px 16px; font-family: var(--f-ui); font-size: 14px; letter-spacing: 0.1em; color: var(--white); outline: none; border-radius: 0; min-height: 48px; } .footer__nl input::placeholder { color: var(--text-muted-2); text-transform: uppercase; } .footer__nl input:focus { border-color: var(--red); } .footer__nl button { background: var(--red); color: var(--white); border: 1px solid var(--red); padding: 14px 22px; font-family: var(--f-ui); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; min-height: 48px; } .footer__nl button:hover { background: var(--red-2); border-color: var(--red-2); } .footer__col-title { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; } .footer__col-title::before { content: "// "; color: var(--red); } .footer__col a { display: block; padding: 10px 0; font-family: var(--f-ui); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); transition: color var(--dur-fast); min-height: 44px; line-height: 1.6; } .footer__col a:hover { color: var(--red-2); } .footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted-2); } .footer__bottom-links { display: flex; flex-wrap: wrap; gap: 0; } .footer__bottom-links a { padding: 4px 14px; border-right: 1px solid var(--border); } .footer__bottom-links a:first-child { padding-left: 0; } .footer__bottom-links a:last-child { border-right: 0; } @media (min-width: 768px) { .footer__cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } } @media (min-width: 1024px) { .footer { padding: 96px 0 32px; } .footer__brand-name { font-size: 36px; } } /* ============================================================================= MOBILE POLISH — overrides for ≤599px to make the small viewport feel intentional and editorial rather than a shrunken desktop. Key moves: - kill background-attachment:fixed (iOS Safari renders it poorly) - convert dense grids → horizontal snap-scrollers (stats, lineup) - tighten section padding, funnel callout, reason min-heights - reduce headline display sizes so they breathe on a 375px viewport ========================================================================== */ @media (max-width: 599px) { :root { --gutter: 18px; --section-y: 56px; } body { font-size: 15px; } /* HERO ---------------------------------------------------------------- */ .hero { padding: 28px 0 44px; } .hero__bg { background-attachment: scroll; /* iOS-safe; bg scrolls with hero */ background-position: 50% 30%; filter: brightness(0.78) contrast(1.1) saturate(1.05); opacity: 1; } .hero__overlay { background: radial-gradient(ellipse at 60% 25%, rgba(200,16,46,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.92) 100%); } .hero__meta { font-size: 9.5px; margin-bottom: 22px; letter-spacing: 0.18em; } .hero__title { font-size: clamp(36px, 11vw, 56px); line-height: 0.92; } .hero__title .l2 { -webkit-text-stroke-width: 1.25px; } .hero__rule { margin: 20px 0 18px; } .hero__sub { font-size: 15px; line-height: 1.5; } .hero__ctas { margin-top: 24px; gap: 10px; } .hero__ctas .btn { min-height: 50px; padding: 14px 18px; font-size: 13px; } /* HERO STATS — horizontal snap-scroll. 5 cards in a strip rather than a 2-2-1 grid. */ .stats { margin-top: 28px; display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; border: 0; background: transparent; /* let the strip break out of the wrap's gutter so it bleeds right */ margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter); gap: 0; scroll-padding-left: var(--gutter); } .stats::-webkit-scrollbar { display: none; } .stats { scrollbar-width: none; } .stat { flex: 0 0 64%; max-width: 240px; scroll-snap-align: start; background: rgba(0,0,0,0.88); border: 1px solid var(--border-2); border-right: 0; min-height: 120px; padding: 18px 18px; } .stat:last-child { border-right: 1px solid var(--border-2); } .stat--full { grid-column: auto; } .stat__n { font-size: 40px; } .stat__l { font-size: 10px; letter-spacing: 0.22em; } /* SECTION HEADS — tighter rhythm on mobile */ .section-head { margin-bottom: 32px; } .section-head h2 { font-size: clamp(34px, 10vw, 48px); line-height: 0.92; } .section-head .deck { font-size: 14px; line-height: 1.55; } .section-rule { width: 56px; height: 3px; margin: 16px 0 18px; } .eyebrow { font-size: 10.5px; } section.s { padding: var(--section-y) 0; } /* LINEUP — horizontal snap-scroll for the band cards. Cards keep their internal structure but become a horizontal river. */ .lineup__progress { margin-bottom: 24px; padding-bottom: 18px; gap: 12px 16px; } .lineup__progress-count { font-size: 32px; } .lineup__progress-label { font-size: 10px; } .lineup__progress-bar { flex-basis: 100%; } .lineup__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; border: 0; gap: 0; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter) 12px; scroll-padding-left: var(--gutter); } .lineup__grid::-webkit-scrollbar { height: 4px; } .lineup__grid::-webkit-scrollbar-thumb { background: var(--border-2); } .lineup__grid::-webkit-scrollbar-track { background: transparent; } .band-card { flex: 0 0 78%; max-width: 280px; scroll-snap-align: start; border: 1px solid var(--border); background: var(--black-2); } .band-card + .band-card { border-left: 0; } .band-card:last-child { border-right: 1px solid var(--border); } .band-card__photo { aspect-ratio: 4 / 3; } .band-card__body { padding: 16px 16px 18px; gap: 8px; } .band-card__name { font-size: 22px; } .band-card__time { font-size: 11px; } .band-card__stage { font-size: 12px; letter-spacing: 0.18em; } .band-card__meta { font-size: 9.5px; letter-spacing: 0.18em; padding-top: 12px; } .lineup__cta { margin-top: 28px; } .lineup__cta .btn { width: 100%; } /* FUNNEL — tighten the giant 0.31% callout so it doesn't dominate the screen. */ .funnel { gap: 24px; } .funnel__callout { padding: 28px 22px; min-height: 0; gap: 20px; } .funnel__callout-eye { font-size: 10px; } .funnel__callout-n { font-size: clamp(64px, 18vw, 88px); } .funnel__callout-l { font-size: 15px; margin-top: 14px; } .funnel__callout-sub { font-size: 10px; padding-top: 14px; } .funnel__bars { gap: 14px; } .fb__head { margin-bottom: 6px; } .fb__l { font-size: 10px; } .fb__n { font-size: 22px; } .fb__fill { height: 14px; } /* GLOBAL REACH — keep stacked, but reduce padding + bigger globe presence */ .reach { gap: 32px; } .reach__title { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.05 !important; } .reach__globe-wrap { max-width: 100%; margin: 0 -6px; } .reach__stats { margin-top: 22px; } .reach__stat { padding: 14px 0 12px; gap: 14px; } .reach__stat-n { font-size: 32px; } .reach__stat-l { font-size: 9.5px; letter-spacing: 0.18em; max-width: 140px; } /* HALL OF FAME — 16:9 photo top, info below */ .hall__scroll-cue { font-size: 10px; margin-bottom: 14px; } .champ { flex-basis: 78vw; max-width: 300px; } .champ__name { font-size: 20px; } .champ__country { font-size: 12px; letter-spacing: 0.16em; } .champ__info { padding: 14px 14px 16px; gap: 10px; } .hall__cta { margin-top: 24px; } .hall__cta .btn { width: 100%; } /* REASONS — tighter cards, denser body text */ .reason { padding: 28px 22px 26px; min-height: 0; gap: 14px; } .reason__n { font-size: 56px; } .reason__title { font-size: 20px; } .reason__body { font-size: 14px; line-height: 1.55; } /* PARTNERS */ .partners { padding: 44px 0; } .partners__name { font-size: 16px; padding: 0 14px; } /* FOOTER */ .footer { padding: 48px 0 24px; } .footer__cols { grid-template-columns: repeat(3, 1fr); gap: 20px 14px; } .footer__brand { grid-column: 1 / -1; margin-bottom: 8px; } .footer__brand-name { font-size: 26px; } .footer__rule { margin: 14px 0; } .footer__tag { font-size: 10.5px; } .footer__col-title { font-size: 9.5px; letter-spacing: 0.18em; margin-bottom: 8px; } .footer__col a { font-size: 11.5px; padding: 6px 0; min-height: 32px; letter-spacing: 0.12em; line-height: 1.4; } .footer__bottom { margin-top: 36px; gap: 8px; } .footer__bottom-links a { padding: 4px 10px; } /* UTILITY */ .utility { font-size: 9.5px; letter-spacing: 0.18em; } .utility__inner { min-height: 30px; gap: 10px; } .utility__live { gap: 8px; } .utility__dot { width: 6px; height: 6px; } /* NAV — keep tight on phones */ .nav__inner { min-height: 56px; gap: 6px; } .nav__logo { height: 56px; } .nav__logo img { height: 150px; margin: -47px 0; } } /* Tablet zone polish ≤ 767px — for 600–767 widths, soften some leftovers */ @media (max-width: 767px) { .hero__bg { background-attachment: scroll; } .stats { grid-template-columns: repeat(5, 1fr); } }