/* ============================================================
POWERPLAY ONE — Sport brand rebuild
Nike/F1/DAZN energy · squared blocks · high contrast
Cream ↔ Ink alternation · Orange as signal · Motion
============================================================ */
:root {
/* --- Core — canonical brand tokens from powerscoar-leagues-beta app --- */
--ink: #0F2A28; /* dominant dark green from the live app */
--ink-2: #0A1F1D; /* deeper for shadows/footer */
--ink-3: #14403B; /* Ink-deep, mid green for tone layering */
--teal: #1F6162; /* accent green */
--paper: #FBF7EB; /* Paper — ground */
--cream: #F8F1E1; /* Cream — card ground */
--sand: #F2EAD8; /* Sand — subtle depth */
--white: #FFFFFF;
/* --- Orange signal for website CTAs (not from app, custom for contrast) --- */
--orange: #E86D34;
--orange-hot: #FF7A3D;
--orange-soft: #F4A57A;
/* --- Supporting accents from PowerSCOAR palette --- */
--gold: #B8893A;
--gold-soft: #C9A05E;
--coral: #E08F75;
--coral-dark: #A53A2A;
/* --- Text --- */
--muted: #5C5648;
--muted-light: #A8A18A;
/* --- Lines --- */
--line: #C8BFA8;
--line-soft: #E5DCC4;
--line-dark: rgba(248, 241, 225, 0.14);
/* --- Fonts --- */
--font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
--font-body: 'Archivo', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* --- Type scale (MOBILE default, < 720px) --- */
--text-xs: 0.6875rem; /* 11px */
--text-sm: 0.8125rem; /* 13px */
--text-base: 1rem; /* 16px */
--text-lg: 1.0625rem; /* 17px */
--text-xl: 1.375rem; /* 22px */
--text-2xl: 1.75rem; /* 28px */
--text-3xl: 2.25rem; /* 36px */
--text-mega: 2.75rem; /* 44px */
--text-monster: 4rem; /* 64px */
/* --- Spacing (fixed rem, no vw) --- */
--s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem;
--s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem;
--s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem;
/* --- Motion --- */
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
/* --- Frame (fixed rem, no vw) --- */
--frame: 1.25rem;
--frame-tight: 1rem;
/* --- Container --- */
--container: 1200px;
--container-wide: 1400px;
/* --- Section padding block --- */
--section-py: 4rem;
}
/* --- Tablet: 720–1099px --- */
@media (min-width: 720px) {
:root {
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 2rem; /* 32px */
--text-3xl: 2.75rem; /* 44px */
--text-mega: 3.75rem; /* 60px */
--text-monster: 6rem; /* 96px */
--frame: 2rem;
--frame-tight: 1.5rem;
--section-py: 5.5rem;
}
}
/* --- Desktop: ≥ 1100px --- */
@media (min-width: 1100px) {
:root {
--text-lg: 1.1875rem; /* 19px */
--text-xl: 1.75rem; /* 28px */
--text-2xl: 2.375rem; /* 38px */
--text-3xl: 3.5rem; /* 56px */
--text-mega: 5rem; /* 80px */
--text-monster: 9rem; /* 144px */
--frame: 2.5rem;
--frame-tight: 1.75rem;
--section-py: 7rem;
}
}
/* ============================================================
BASE / typography
============================================================ */
body {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--ink);
background: var(--paper);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "cv11";
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 900;
line-height: 0.92;
letter-spacing: -0.03em;
text-transform: uppercase;
color: var(--ink);
}
.tag,
.section-num,
.nav-num,
.field-label,
.edition-tag,
.edition-time,
.seg-role,
.seg-outcome-label,
.team-num,
.team-country,
.footer-meta,
.hero-stat dt,
.fw-stage-num,
.fw-stage-name,
.seg-btn-num {
font-family: var(--font-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Selection */
::selection {
background: var(--orange);
color: var(--paper);
}
/* ============================================================
MARQUEE TICKER
============================================================ */
.ticker {
background: var(--ink);
color: var(--paper);
overflow: hidden;
border-bottom: 1px solid var(--ink-3);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.55rem 0;
}
.ticker-track {
display: inline-flex;
gap: 2rem;
white-space: nowrap;
animation: ticker 60s linear infinite;
padding-left: 2rem;
}
.ticker-track > span {
flex-shrink: 0;
}
.ticker-dot {
color: var(--orange);
}
.ticker-hook {
color: var(--orange);
font-weight: 700;
letter-spacing: 0.16em;
}
@keyframes ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ============================================================
HEADER
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--paper);
border-bottom: 1px solid transparent;
transition: border-color 0.3s ease, background 0.3s ease;
}
.site-header.is-scrolled {
border-bottom-color: var(--ink);
background: rgba(251, 247, 235, 0.94);
backdrop-filter: saturate(180%) blur(10px);
}
.header-inner {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: var(--s-4);
padding: 0;
}
.brand {
display: inline-flex;
align-items: center;
padding: var(--s-4) var(--frame);
border-right: 1px solid var(--ink);
color: var(--ink);
}
.brand-word {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 900;
letter-spacing: 0.005em;
text-transform: uppercase;
color: var(--ink);
}
.brand-word-one { color: var(--orange); }
.primary-nav {
display: none;
gap: var(--s-4);
align-items: center;
padding: 0 var(--s-4);
}
.primary-nav a {
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink);
padding: 0.4rem 0;
border-bottom: 2px solid transparent;
transition: border-color 0.2s ease, color 0.2s ease;
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
}
.primary-nav a:hover { border-bottom-color: var(--orange); }
.nav-num {
font-family: var(--font-mono);
font-size: 0.65rem;
color: var(--muted);
letter-spacing: 0.06em;
}
.primary-nav a:hover .nav-num { color: var(--orange); }
.header-cta { display: none; }
@media (min-width: 720px) {
.primary-nav { display: inline-flex; }
.header-cta { display: inline-flex; align-self: stretch; border-radius: 0; }
}
@media (min-width: 720px) and (max-width: 979px) {
.primary-nav { gap: 0.9rem; }
.primary-nav a { font-size: 0.72rem; white-space: nowrap; }
.primary-nav .nav-num { display: none; }
.brand { padding: var(--s-4) var(--s-5); }
.header-cta { padding: 0.7rem 1rem; font-size: 0.7rem; white-space: nowrap; }
}
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.85rem 1.4rem;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
border-radius: 0;
border: 2px solid transparent;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--ease), border-color 0.2s ease;
white-space: nowrap;
position: relative;
}
.btn-sm { padding: 0.7rem 1.15rem; font-size: 0.72rem; }
.btn-lg { padding: 1.05rem 1.7rem; font-size: 0.875rem; }
.btn:hover { transform: translate(-1px, -1px); }
.btn:active { transform: translate(0, 0); }
.btn-dot {
width: 8px; height: 8px;
background: currentColor;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
.btn-arrow {
font-size: 1em;
transition: transform 0.25s var(--ease);
}
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn-primary {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
box-shadow: 4px 4px 0 var(--orange);
}
.btn-primary:hover { box-shadow: 6px 6px 0 var(--orange); }
/* Header CTA sits flush against right edge; drop the outward shadow */
.header-cta.btn-primary { box-shadow: none; border-top: 4px solid var(--orange); border-color: var(--ink); border-top-color: var(--orange); }
.header-cta.btn-primary:hover { box-shadow: none; background: var(--orange); color: var(--ink); }
.btn-primary .btn-dot { background: var(--orange); }
.btn-orange {
background: var(--orange);
color: var(--ink);
border-color: var(--orange);
box-shadow: 4px 4px 0 var(--ink);
}
.btn-orange:hover {
background: var(--orange-hot);
border-color: var(--orange-hot);
box-shadow: 6px 6px 0 var(--ink);
}
.btn-orange .btn-dot { background: var(--ink); }
.btn-ghost {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-outline-light {
background: transparent;
color: var(--paper);
border-color: var(--paper);
}
.btn-outline-light:hover { background: var(--paper); color: var(--ink); }
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(1.15); }
}
/* ============================================================
SECTION HEADS
============================================================ */
.section-head {
padding: 0 var(--frame);
margin: 0 auto var(--s-16);
max-width: 1600px;
}
.section-num {
display: inline-block;
font-size: var(--text-xs);
color: var(--muted);
margin-bottom: var(--s-6);
padding-left: var(--s-3);
border-left: 3px solid var(--orange);
padding-top: 0.15rem;
padding-bottom: 0.15rem;
}
.section-num--light { color: var(--paper); }
.section-heading {
font-size: var(--text-3xl);
max-width: 20ch;
}
.section-heading--light { color: var(--paper); }
.section-heading .heading-line { display: block; hyphens: manual; overflow-wrap: normal; word-break: normal; }
.heading-line--accent { color: var(--orange); }
.section-lede {
font-size: var(--text-lg);
color: var(--ink-3);
max-width: 60ch;
margin-top: var(--s-6);
line-height: 1.45;
font-weight: 500;
}
.section-lede--light { color: rgba(248, 241, 225, 0.75); }
.tag {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: var(--s-6);
}
.tag-dot {
width: 10px; height: 10px;
background: var(--orange);
animation: pulse 2s ease-in-out infinite;
}
/* ============================================================
BLOCK 1 · HERO
============================================================ */
.hero {
position: relative;
background: var(--paper);
padding: var(--s-6) 0 var(--s-12);
overflow: hidden;
border-bottom: 1px solid var(--ink);
}
/* Athlete ensemble illustration — always visible, but its role changes with screen size.
Wide screens: sits to the right of the text.
Narrow screens: sits behind the text as a soft, low-opacity backdrop. */
/* -------- DESKTOP OVERLAY (≥1100px) --------
Athletes ensemble as absolute overlay to the right of the text.
Only visible on desktop — hidden below 1100px because on narrower screens
the text/buttons occupy the same space, so we use the .hero-athletes-banner
below instead. */
.hero-athletes--desktop {
display: none;
}
@media (min-width: 1100px) {
.hero-athletes--desktop {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 8rem;
width: 62%;
background-image: url('assets/hero_athletes.webp');
background-repeat: no-repeat;
background-position: right bottom;
background-size: auto 62vh;
pointer-events: none;
z-index: 0;
opacity: 0.88;
-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 55%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0) 92%);
mask-image: linear-gradient(to left, rgba(0,0,0,1) 55%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0) 92%);
}
}
@media (min-width: 1440px) {
.hero-athletes--desktop { width: 58%; background-size: auto 66vh; }
}
@media (min-width: 1800px) {
.hero-athletes--desktop { width: 55%; }
}
/* -------- MOBILE/TABLET BANNER (<1100px) --------
Athletes ensemble as an inline banner sitting directly under the H1 heading, so it reads
as the visual subject of the question 'Where does your organisation actually stand?'. */
.hero-athletes-banner {
display: block;
width: 100%;
height: 20vh;
min-height: 130px;
max-height: 220px;
margin: var(--s-6) 0 var(--s-8);
background-image: url('assets/hero_athletes.webp');
background-repeat: no-repeat;
/* Left-aligned so the ensemble anchors visually to the heading text above it */
background-position: left center;
background-size: contain;
pointer-events: none;
}
@media (min-width: 720px) {
.hero-athletes-banner {
height: 24vh;
max-height: 280px;
margin: var(--s-8) 0 var(--s-10);
}
}
@media (min-width: 1100px) {
/* Desktop uses the absolute overlay, not the inline banner */
.hero-athletes-banner { display: none; }
}
/* Ensure hero content sits above the illustration */
.hero-grid { position: relative; z-index: 1; }
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-12);
align-items: center;
padding: 0 var(--frame);
max-width: 1600px;
margin: 0 auto;
}
@media (min-width: 900px) {
/* Hero is now single-column since the diagram moved to its own dedicated section */
.hero-grid { grid-template-columns: 1fr; gap: var(--s-16); }
}
.hero-copy { min-width: 0; }
.hero-heading {
font-size: 2rem;
color: var(--ink);
margin-bottom: var(--s-6);
line-height: 0.98;
word-spacing: -0.04em;
}
.hero-heading .heading-line { display: block; }
.hero-heading .heading-line--accent { color: var(--orange); }
.hero-lede {
font-size: var(--text-lg);
color: var(--ink-3);
max-width: 46ch;
margin-top: var(--s-5);
line-height: 1.5;
font-weight: 500;
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
margin-top: var(--s-10);
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin-top: var(--s-10);
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
}
.hero-stat {
padding: var(--s-5) var(--s-4);
border-right: 1px solid var(--ink);
min-width: 0;
}
.hero-stat:last-child { border-right: none; }
@media (max-width: 720px) {
.hero-stats { margin-top: var(--s-8); }
.hero-stat { padding: var(--s-6) var(--s-3); }
.hero-stat dt { margin-bottom: 0.55rem; }
}
.hero-stat dt {
font-size: var(--text-xs);
color: var(--muted);
margin-bottom: 0.25rem;
}
.hero-stat dd {
font-family: var(--font-display);
font-size: 1.5rem;
line-height: 1;
color: var(--ink);
}
/* Method variant: shorter text needs smaller size to breathe */
.hero-stats--method .hero-stat dd {
font-size: 1rem;
line-height: 1.15;
letter-spacing: -0.005em;
padding-right: 0.5rem;
}
.stat-sub {
font-size: 0.5em;
color: var(--muted);
font-weight: 500;
margin-left: 0.15em;
}
.hero-visual {
position: relative;
aspect-ratio: 1 / 1;
max-width: 520px;
width: 100%;
margin: 0 auto;
border: 2px solid var(--ink);
background: var(--ink);
overflow: hidden;
animation: heroFloat 8s ease-in-out infinite;
}
.hero-visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-visual-label {
position: absolute;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--paper);
padding: 0.35rem 0.7rem;
background: rgba(15, 42, 40, 0.65);
border: 1px solid var(--paper);
backdrop-filter: blur(6px);
}
.hvl-1 { top: 8%; left: 6%; border-color: var(--orange); color: var(--orange); }
.hvl-2 { top: 46%; right: 6%; }
.hvl-3 { bottom: 10%; left: 12%; }
@keyframes heroFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* ============================================================
HERO GRAVITATIONAL METHOD DIAGRAM
============================================================ */
.hero-visual--diagram {
aspect-ratio: auto;
max-width: 560px;
background: var(--ink);
border: 2px solid var(--ink);
overflow: visible;
padding: var(--s-5) var(--s-5) var(--s-6);
display: flex;
flex-direction: column;
gap: var(--s-4);
animation: heroFloat 10s ease-in-out infinite;
}
.gm-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--orange-soft);
align-self: flex-start;
padding: 0.35rem 0.65rem;
border: 1px solid rgba(244, 165, 122, 0.35);
}
.gm-svg {
width: 100%;
height: auto;
display: block;
}
.gm-svg circle {
transition: opacity 0.4s ease;
}
.gm-caption {
font-family: var(--font-body);
font-size: 0.82rem;
line-height: 1.55;
color: rgba(248, 241, 225, 0.78);
margin: 0;
padding: var(--s-4) 0 0;
border-top: 1px solid var(--line-dark);
}
.gm-tagline {
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--ink);
background: var(--orange);
padding: 0.5rem 0.9rem;
align-self: flex-start;
border: 1px solid var(--orange);
}
@media (max-width: 720px) {
.hero-visual--diagram {
padding: var(--s-4);
max-width: 100%;
}
.gm-caption {
font-size: 0.78rem;
}
.gm-svg text[font-size="10"] { font-size: 12px; }
.gm-svg text[font-size="8"] { font-size: 10px; }
.gm-svg text[font-size="9"] { font-size: 11px; }
}
/* ============================================================
OFFER (DARK BLOCK)
============================================================ */
.offer {
background: var(--ink);
color: var(--paper);
padding: var(--section-py) 0;
position: relative;
}
.offer .section-heading { color: var(--paper); }
.offer .section-num { color: rgba(248, 241, 225, 0.65); }
.offer .section-lede { color: rgba(248, 241, 225, 0.8); }
.offer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
padding: 0 var(--frame);
max-width: 1600px;
margin: 0 auto;
border: 1px solid var(--line-dark);
}
@media (min-width: 780px) {
.offer-grid { grid-template-columns: repeat(3, 1fr); }
}
.edition {
display: flex;
flex-direction: column;
padding: var(--s-10) var(--s-8) var(--s-6);
min-height: 320px;
border-right: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
transition: background 0.25s ease;
position: relative;
}
.edition:last-child { border-right: none; }
@media (max-width: 779px) {
.edition { border-right: none; }
}
.edition::before {
content: '';
position: absolute;
top: -1px; left: -1px;
width: 40px;
height: 4px;
background: var(--orange);
transition: width 0.3s var(--ease);
}
.edition-clubs::before { background: var(--orange); }
.edition-leagues::before { background: var(--coral); }
.edition-events::before { background: var(--gold); }
.edition:hover { background: rgba(232, 109, 52, 0.06); }
.edition:hover::before { width: 100%; }
.edition-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--s-10);
}
.edition-num {
font-family: var(--font-display);
font-size: 2.5rem;
line-height: 1;
color: var(--orange);
}
.edition-tag {
font-size: 0.7rem;
color: rgba(248, 241, 225, 0.65);
}
.edition-title {
/* Fixed sizing across all four cards, both viewports */
font-size: 1.5rem;
line-height: 1.05;
color: var(--paper);
margin-bottom: var(--s-4);
min-height: 2.4em;
display: block;
}
.edition-body {
color: rgba(248, 241, 225, 0.75);
font-size: var(--text-sm);
line-height: 1.55;
margin-bottom: var(--s-8);
}
.edition-foot {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--line-dark);
padding-top: var(--s-4);
}
.edition-time { font-size: 0.7rem; color: var(--muted-light); white-space: nowrap; }
.edition-go {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--orange);
text-transform: uppercase;
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.edition:hover .edition-go .btn-arrow { transform: translateX(4px); }
/* ---------- CALIBRATION PROOF STRIP ---------- */
.calib {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: var(--s-12) var(--frame);
max-width: 1600px;
border: 1px solid var(--line-dark);
}
@media (min-width: 780px) {
.calib {
grid-template-columns: repeat(3, 1fr);
margin: var(--s-16) var(--frame);
}
}
.calib-item {
padding: var(--s-10) var(--s-6);
border-bottom: 1px solid var(--line-dark);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.calib-item:last-child { border-bottom: none; }
@media (min-width: 780px) {
.calib-item {
padding: var(--s-10) var(--s-8);
border-bottom: none;
border-right: 1px solid var(--line-dark);
}
.calib-item:last-child { border-right: none; }
}
.calib-num {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.4rem;
line-height: 1.15;
color: var(--orange);
letter-spacing: -0.01em;
display: block;
margin-bottom: 0.2rem;
}
.calib-num-sep { color: rgba(232, 109, 52, 0.55); font-weight: 700; margin: 0 0.08em; }
.calib-label {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-base);
color: var(--paper);
margin-top: 0.35rem;
line-height: 1.35;
}
.calib-sub {
font-family: var(--font-body);
font-size: var(--text-sm);
color: rgba(248, 241, 225, 0.7);
line-height: 1.55;
margin-top: 0.15rem;
}
/* ---------- FULL DIAGNOSTIC (main calibrated offer) ---------- */
.full-diag {
margin: 0 var(--frame) var(--s-12);
max-width: 1600px;
border: 1px solid var(--line-dark);
padding: var(--s-10) var(--s-6);
background: linear-gradient(135deg, rgba(232, 109, 52, 0.10), rgba(232, 109, 52, 0.02));
}
@media (min-width: 780px) {
.full-diag { padding: var(--s-16) var(--s-12); margin-bottom: var(--s-16); }
}
.full-diag-copy { max-width: 62ch; }
.full-diag-tag {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--orange);
}
.full-diag-title {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.75rem;
line-height: 1.05;
color: var(--paper);
margin-top: var(--s-4);
letter-spacing: -0.01em;
}
.full-diag-body {
margin-top: var(--s-4);
color: rgba(248, 241, 225, 0.82);
font-size: var(--text-base);
line-height: 1.6;
}
.full-diag-stats {
list-style: none;
padding: 0;
margin: var(--s-6) 0 var(--s-6);
display: grid;
grid-template-columns: 1fr;
gap: var(--s-4);
border-top: 1px solid rgba(248, 241, 225, 0.14);
padding-top: var(--s-6);
}
@media (min-width: 620px) {
.full-diag-stats { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
}
.full-diag-stats li { display: flex; flex-direction: column; gap: 0.25rem; }
.fd-k {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.6rem;
line-height: 1;
color: var(--paper);
letter-spacing: -0.01em;
}
.fd-v {
font-family: var(--font-body);
font-size: var(--text-sm);
color: rgba(248, 241, 225, 0.7);
line-height: 1.4;
}
/* ---------- FAST LANE intro strip ---------- */
.fast-lane-intro {
margin: 0 var(--frame) var(--s-8);
max-width: 1600px;
padding: 0 var(--s-2);
}
@media (min-width: 780px) {
.fast-lane-intro { padding: 0 var(--s-4); margin-bottom: var(--s-12); }
}
.fast-lane-tag {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--orange);
}
.fast-lane-title {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.4rem;
margin-top: var(--s-3);
color: var(--paper);
letter-spacing: -0.005em;
line-height: 1.1;
}
.fast-lane-body {
margin-top: var(--s-3);
color: rgba(248, 241, 225, 0.75);
max-width: 62ch;
font-size: var(--text-sm);
line-height: 1.55;
}
/* ============================================================
PROOF (BASKETBALL FULL-BLEED)
============================================================ */
.proof {
position: relative;
background: var(--ink);
color: var(--paper);
overflow: hidden;
isolation: isolate;
/* Visual break from the preceding products section (both are on --ink) */
border-top: 1px solid rgba(248, 241, 225, 0.14);
}
.proof-image {
position: absolute;
inset: 0;
z-index: 0;
}
.proof-image img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
opacity: 0.55;
filter: contrast(1.05) saturate(0.9);
}
.proof-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 42, 40, 0.6) 0%, rgba(15, 42, 40, 0.85) 60%, var(--ink) 100%);
}
.proof-inner {
position: relative;
z-index: 1;
padding: calc(var(--section-py) * 1.4) 0 var(--section-py);
}
.section-head--light { color: var(--paper); }
.section-head--light .section-heading { color: var(--paper); }
/* Ensure number and lede become readable on any dark-surface section */
.section-head--light .section-num { color: rgba(248, 241, 225, 0.85); }
.section-head--light .section-lede { color: rgba(248, 241, 225, 0.85); }
.proof-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
padding: 0 var(--frame);
max-width: 1600px;
margin: 0 auto;
border: 1px solid var(--line-dark);
background: rgba(15, 42, 40, 0.7);
backdrop-filter: blur(8px);
}
@media (min-width: 780px) {
.proof-grid { grid-template-columns: repeat(3, 1fr); }
}
.proof-card {
padding: var(--s-10) var(--s-8);
border-right: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.proof-card:last-child { border-right: none; }
@media (max-width: 779px) {
.proof-card { border-right: none; }
}
.proof-num {
font-family: var(--font-display);
font-size: 3.5rem;
line-height: 0.9;
color: var(--orange);
letter-spacing: -0.04em;
display: block;
margin-bottom: var(--s-4);
}
.proof-num-unit {
font-size: 0.55em;
color: var(--paper);
margin-left: 0.1em;
}
.proof-metric {
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--paper);
text-transform: uppercase;
line-height: 1;
}
.proof-sub {
font-size: var(--text-sm);
color: var(--orange-soft);
font-weight: 500;
}
.proof-context {
margin-top: auto;
padding-top: var(--s-4);
border-top: 1px solid var(--line-dark);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--muted-light);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* ============================================================
SEGMENTS (CREAM BLOCK)
============================================================ */
.segments {
background: var(--paper);
padding: var(--section-py) 0;
}
.segment-switcher {
display: flex;
flex-wrap: wrap;
padding: 0 var(--frame);
margin: 0 auto var(--s-8);
max-width: 1600px;
gap: 0;
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
}
.seg-btn {
flex: 1;
min-width: 140px;
padding: var(--s-4) var(--s-5);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink);
text-transform: uppercase;
letter-spacing: 0.02em;
background: transparent;
border: none;
border-right: 1px solid var(--ink);
transition: background 0.2s ease, color 0.2s ease;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
justify-content: center;
text-align: left;
}
.seg-btn:last-child { border-right: none; }
.seg-btn-num {
font-family: var(--font-mono);
font-size: 0.65rem;
color: var(--muted);
}
.seg-btn:hover { background: var(--sand); }
.seg-btn.is-active {
background: var(--ink);
color: var(--paper);
}
.seg-btn.is-active .seg-btn-num { color: var(--orange); }
.segment-panels {
padding: 0 var(--frame);
max-width: 1600px;
margin: 0 auto;
}
.seg-panel {
display: none;
grid-template-columns: 1fr;
gap: var(--s-8);
padding: var(--s-12) var(--s-8);
background: var(--white);
border: 2px solid var(--ink);
box-shadow: 8px 8px 0 var(--ink);
animation: segIn 0.4s var(--ease);
}
@media (min-width: 900px) {
.seg-panel { grid-template-columns: 1fr auto; gap: var(--s-16); }
}
.seg-panel.is-active { display: grid; }
@keyframes segIn {
from { opacity: 0; transform: translate(-4px, 4px); }
to { opacity: 1; transform: translate(0, 0); }
}
.seg-role {
font-size: var(--text-xs);
color: var(--orange);
margin-bottom: var(--s-4);
}
.seg-headline {
font-size: var(--text-2xl);
max-width: 22ch;
color: var(--ink);
}
.seg-body {
margin-top: var(--s-6);
color: var(--ink-3);
max-width: 62ch;
line-height: 1.55;
font-size: var(--text-base);
}
.seg-outcome {
margin-top: var(--s-8);
padding: var(--s-5) var(--s-6);
background: var(--paper);
border-left: 4px solid var(--orange);
color: var(--ink);
font-size: var(--text-base);
font-weight: 500;
}
.seg-outcome-label {
display: block;
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--orange);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.seg-badge {
align-self: flex-start;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: var(--s-6);
background: var(--ink);
color: var(--paper);
min-width: 140px;
}
.seg-badge-num {
font-family: var(--font-display);
font-size: 3.5rem;
line-height: 1;
color: var(--orange);
}
.seg-badge-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ============================================================
FULL-BLEED (STADIUM)
============================================================ */
.fullbleed {
position: relative;
height: 360px;
overflow: hidden;
isolation: isolate;
background: var(--ink);
}
.fullbleed img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
opacity: 0.65;
transform: scale(1.02);
transition: transform 8s ease-out;
}
.fullbleed:hover img { transform: scale(1.06); }
.fullbleed::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(15, 42, 40, 0.85) 0%, rgba(15, 42, 40, 0.35) 60%);
z-index: 1;
}
.fullbleed-overlay {
position: relative;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
padding: 0 var(--frame);
max-width: 1600px;
margin: 0 auto;
}
.fullbleed-quote {
font-family: var(--font-display);
font-size: 1.75rem;
line-height: 1.05;
color: var(--paper);
text-transform: uppercase;
letter-spacing: -0.02em;
max-width: 20ch;
}
.quote-line { display: block; }
.quote-line--accent { color: var(--orange); }
/* ============================================================
METHOD (CREAM)
============================================================ */
.method {
background: var(--paper);
padding: var(--section-py) 0;
border-top: 1px solid var(--ink);
}
.method-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-16);
align-items: center;
padding: 0 var(--frame);
max-width: 1600px;
margin: 0 auto;
}
@media (min-width: 900px) {
.method-grid { grid-template-columns: 1.1fr 1fr; }
}
.method-copy .section-head { margin-bottom: var(--s-10); padding: 0; }
.method-body {
font-size: var(--text-base);
color: var(--ink-3);
margin-top: var(--s-5);
line-height: 1.6;
max-width: 55ch;
}
.method-body--emph {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--ink);
text-transform: uppercase;
letter-spacing: -0.01em;
line-height: 1.15;
margin-top: var(--s-6);
border-left: 4px solid var(--orange);
padding-left: var(--s-4);
}
.pullquote {
margin-top: var(--s-8);
padding: var(--s-6) var(--s-8);
background: var(--sand);
border: 2px solid var(--ink);
}
.pullquote p {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--ink);
line-height: 1.5;
font-weight: 500;
font-style: italic;
}
.pullquote cite {
display: block;
margin-top: var(--s-4);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--orange);
letter-spacing: 0.08em;
text-transform: uppercase;
font-style: normal;
}
/* ============================================================
FLYWHEEL
============================================================ */
.flywheel-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--s-4) var(--s-4);
gap: var(--s-6);
}
/* NEW all-SVG flywheel. Everything (cards, arcs, arrows, ring) lives inside the same viewBox,
so it can never drift between HTML and SVG coordinate systems. Scales cleanly at any viewport. */
.fw-svg-full {
width: 100%;
max-width: 640px;
height: auto;
display: block;
margin: 0 auto;
}
/* ============================================================
GRAVITATIONAL METHOD dedicated section (dark, full-width)
============================================================ */
.gm-section {
background: var(--ink);
color: var(--paper);
padding: var(--section-py) 0;
border-top: 3px solid var(--orange);
border-bottom: 1px solid var(--line-dark);
}
.gm-section-inner {
max-width: 1600px;
margin: 0 auto;
padding: 0 var(--frame);
}
.gm-section-head {
max-width: 62rem;
margin-bottom: var(--s-6);
}
.gm-section-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--orange);
margin-bottom: var(--s-6);
}
.gm-section-heading {
font-family: var(--font-display);
font-weight: 900;
color: var(--paper);
font-size: var(--text-3xl);
line-height: 1;
letter-spacing: -0.03em;
text-transform: uppercase;
margin-bottom: var(--s-6);
}
.gm-section-heading .heading-line { display: block; }
.gm-section-heading .heading-line--accent { color: var(--orange); }
.gm-section-lede {
font-size: var(--text-lg);
line-height: 1.55;
color: rgba(248, 241, 225, 0.82);
max-width: 62ch;
}
.gm-section-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-10);
align-items: stretch;
}
@media (min-width: 900px) {
.gm-section-grid { grid-template-columns: 1.15fr 1fr; gap: var(--s-10); }
}
.gm-diagram-wrap {
padding: var(--s-4) var(--s-6);
background: rgba(15, 42, 40, 0.6);
border: 1px solid var(--line-dark);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.gm-svg--big {
width: 100%;
height: auto;
display: block;
max-height: 100%;
}
.gm-zones {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: 1fr;
gap: 0;
border: 1px solid var(--line-dark);
background: rgba(15, 42, 40, 0.6);
border-radius: 4px;
height: 100%;
}
.gm-zone {
display: grid;
grid-template-columns: 3rem 1fr;
gap: var(--s-4);
padding: var(--s-5) var(--s-6);
border-bottom: 1px solid var(--line-dark);
align-items: start;
}
.gm-zone:last-child { border-bottom: none; }
.gm-zone-num {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.14em;
color: var(--muted-light);
line-height: 1.5;
padding-top: 0.2rem;
}
.gm-zone-body { min-width: 0; }
.gm-zone-name {
font-family: var(--font-display);
font-weight: 900;
font-size: 1rem;
color: var(--paper);
letter-spacing: -0.005em;
text-transform: uppercase;
margin-bottom: 0.35rem;
line-height: 1;
}
.gm-zone-desc {
font-size: 0.9rem;
line-height: 1.55;
color: rgba(248, 241, 225, 0.72);
margin: 0;
}
.gm-zone--accent { background: rgba(232, 109, 52, 0.08); }
.gm-zone--accent .gm-zone-num { color: var(--orange); }
.gm-zone--accent .gm-zone-name { color: var(--orange); }
.gm-section-outro {
margin-top: var(--s-8);
padding-top: 0;
border-top: none;
font-size: var(--text-lg);
line-height: 1.55;
color: rgba(248, 241, 225, 0.9);
max-width: 72ch;
}
.gm-section-outro strong { color: var(--paper); font-weight: 700; }
.gm-section .pp-name { color: var(--paper); }
.flywheel {
position: relative;
width: min(440px, 100%);
max-width: 100%;
aspect-ratio: 1 / 1;
color: var(--ink);
margin: 0 auto;
}
.fw-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fw-center {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 42%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--ink);
color: var(--paper);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--s-4);
border: 3px solid var(--orange);
}
.fw-center-label {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.16em;
color: var(--orange);
margin-bottom: 0.5rem;
}
.fw-center-sub {
font-family: var(--font-body);
font-size: 0.72rem;
color: rgba(248, 241, 225, 0.75);
line-height: 1.35;
max-width: 15ch;
}
.fw-stage {
position: absolute;
width: 84px;
height: 84px;
border-radius: 50%;
background: var(--paper);
border: 2px solid var(--ink);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: transform 0.4s var(--ease), background 0.3s ease, border-color 0.3s ease;
}
.fw-stage:hover {
background: var(--orange);
border-color: var(--orange);
transform: scale(1.08);
}
.fw-stage-num {
font-family: var(--font-display);
font-size: 1.1rem;
color: var(--orange);
line-height: 1;
}
.fw-stage:hover .fw-stage-num { color: var(--ink); }
.fw-stage-name {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.08em;
color: var(--ink);
margin-top: 0.15rem;
}
/* Legacy 3-stage layout (kept in case old markup returns) */
.fw-stage-top { top: 0; left: 50%; transform: translateX(-50%); }
.fw-stage-right { top: 50%; right: 0; transform: translateY(-50%); }
.fw-stage-left { top: 50%; left: 0; transform: translateY(-50%); }
/* New 4-stage flywheel cards */
.fw-center {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 38%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--sand);
border: 2px solid var(--line);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.15rem;
}
.fw-center .fw-center-label {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--muted);
line-height: 1.1;
}
.fw-card {
position: absolute;
width: 160px;
height: 4rem;
padding: 0.6rem 0.75rem 0.6rem 0.9rem;
background: var(--cream);
border: 2px solid var(--line);
border-radius: 6px;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 0.55rem;
row-gap: 0.1rem;
align-items: center;
align-content: center;
transition: transform 0.25s var(--ease), border-color 0.25s ease;
z-index: 2;
box-sizing: border-box;
}
.fw-card::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 5px;
border-radius: 4px 0 0 4px;
}
/* Cards sit AT the four cardinal points on the ring, straddling the ring line.
Ring radius = 180 in the 460 viewBox = 78.26% of container. Card centre sits exactly on ring. */
.fw-card-top { top: 6%; left: 50%; transform: translate(-50%, -50%); }
.fw-card-right { top: 50%; left: 92%; transform: translate(-50%, -50%); }
.fw-card-bottom { top: 94%; left: 50%; transform: translate(-50%, -50%); }
.fw-card-left { top: 50%; left: 8%; transform: translate(-50%, -50%); }
.fw-card-top:hover { transform: translate(-50%, -50%) translateY(-3px); }
.fw-card-right:hover { transform: translate(-50%, -50%) translateX(3px); }
.fw-card-bottom:hover { transform: translate(-50%, -50%) translateY(3px); }
.fw-card-left:hover { transform: translate(-50%, -50%) translateX(-3px); }
/* Below 900px the ring cards would clip; drop the circle and stack them */
@media (max-width: 900px) {
.flywheel {
width: 100%;
aspect-ratio: auto;
max-width: 460px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
}
.flywheel > svg,
.fw-center { display: none !important; }
.fw-card {
position: relative !important;
transform: none !important;
max-width: 100% !important;
width: 100%;
margin-bottom: 0;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
}
/* Vertical connector between stacked cards, with a downward chevron */
.fw-card::after {
content: '';
display: block;
position: absolute;
left: 17px;
bottom: -24px;
width: 14px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
z-index: 1;
}
.fw-card:last-child::after { display: none; }
.fw-card:not(:last-child) {
margin-bottom: 28px;
}
.fw-card:not(:last-child)::before {
/* keep the color strip on the left */
}
/* Colour of the connector line: takes the source card's colour.
Top (Attention/gold) -> Right (Commercial). Right (Commercial/coral) -> Bottom (Headroom).
Bottom (Headroom) is skipped: connector still shows Commercial's coral,
so it visually flows past Headroom into Sport. */
.fw-card-top { color: var(--gold); }
.fw-card-right { color: var(--coral-dark); }
.fw-card--transitional { color: var(--coral-dark); } /* borrow prior colour */
.fw-card-left { color: var(--playr, #15661D); }
.fw-card:hover { transform: translateX(3px) !important; }
}
.fw-card-top::before { background: var(--gold); }
.fw-card-right::before { background: var(--coral-dark); }
.fw-card-bottom::before { background: var(--teal); }
.fw-card-left::before { background: var(--playr, #15661D); }
/* Mobile-only loop-back indicator so the flywheel reads as a closed loop when stacked */
.fw-loop-back { display: none; }
@media (max-width: 900px) {
.fw-loop-back {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 1rem;
padding-left: 0.2rem;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--playr, #15661D);
position: relative;
}
.fw-loop-line {
display: block;
width: 3px;
height: 3rem;
background: var(--playr, #15661D);
margin-left: 18px;
position: relative;
border-radius: 2px;
}
/* Upward chevron at the top of the line indicating loop back to Attention */
.fw-loop-line::before {
content: '';
position: absolute;
top: -6px;
left: -4px;
width: 11px;
height: 11px;
border-top: 3px solid var(--playr, #15661D);
border-right: 3px solid var(--playr, #15661D);
transform: rotate(-45deg);
border-radius: 2px;
}
.fw-loop-label { display: inline-block; }
}
/* Transitional (Headroom) card: dimmed text, no colour strip, dashed border, opaque paper bg */
.fw-card--transitional {
background: var(--paper) !important;
border-color: var(--line) !important;
border-style: dashed !important;
opacity: 1;
}
.fw-card--transitional::before {
display: none !important;
}
.fw-card--transitional .fw-card-name,
.fw-card--transitional .fw-card-sub {
color: var(--muted) !important;
}
.fw-card-num {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
font-family: var(--font-display);
font-size: 1.35rem;
line-height: 1;
color: var(--ink);
}
.fw-card-top .fw-card-num { color: var(--gold); }
.fw-card-right .fw-card-num { color: var(--coral-dark); }
.fw-card-left .fw-card-num { color: var(--playr, #15661D); }
.fw-card-num--muted {
color: var(--muted-light) !important;
font-family: var(--font-body);
font-weight: 700;
font-size: 1.1rem;
}
.fw-card-name {
grid-column: 2; grid-row: 1;
font-family: var(--font-display);
font-size: 0.95rem;
color: var(--ink);
line-height: 1;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.fw-card-sub {
grid-column: 2; grid-row: 2;
font-family: var(--font-body);
font-size: 0.68rem;
color: var(--muted);
line-height: 1.25;
}
.fw-caption {
max-width: 46ch;
margin: var(--s-12) auto 0;
text-align: center;
font-size: var(--text-sm);
color: var(--ink-3);
line-height: 1.5;
padding: 0 var(--s-4);
clear: both;
}
.fw-caption strong {
color: var(--coral-dark);
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.02em;
font-weight: 900;
margin-right: 0.3rem;
}
.method-body--lead {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--ink);
text-transform: none;
line-height: 1.35;
letter-spacing: -0.005em;
font-weight: 900;
margin-top: 0 !important;
}
.subdims-title {
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--ink);
text-transform: uppercase;
line-height: 1;
margin-bottom: var(--s-3);
letter-spacing: -0.015em;
}
.subdim-note {
display: block;
margin-top: 0.2rem;
font-family: var(--font-body);
font-size: 0.72rem;
color: var(--muted);
font-weight: 400;
line-height: 1.35;
}
.subdim-item::before { display: none; }
.subdim-item {
font-weight: 700;
color: var(--ink);
padding: 0.55rem 0;
border-bottom: 1px solid var(--line-soft);
}
.subdim-item:last-child { border-bottom: none; }
/* Cibona case */
.case-cibona {
padding: 0 var(--frame);
max-width: 1600px;
margin: 0 auto;
}
.case-cibona-head {
padding: var(--s-8) 0;
border-top: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
background: rgba(15, 42, 40, 0.55);
backdrop-filter: blur(6px);
padding-left: var(--s-8);
padding-right: var(--s-8);
}
.case-tag {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold);
display: inline-block;
margin-bottom: var(--s-3);
}
.case-name {
font-family: var(--font-display);
font-size: 2rem;
color: var(--paper);
text-transform: uppercase;
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: var(--s-4);
}
.case-flow {
font-family: var(--font-body);
font-size: var(--text-base);
color: rgba(248, 241, 225, 0.85);
font-weight: 500;
}
.case-outputs {
display: grid;
grid-template-columns: 1fr;
gap: 0;
background: rgba(15, 42, 40, 0.7);
backdrop-filter: blur(8px);
border: 1px solid var(--line-dark);
border-top: none;
}
@media (min-width: 720px) { .case-outputs { grid-template-columns: repeat(4, 1fr); } }
.case-out {
padding: var(--s-8);
border-right: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
/* 3 fixed rows in rem so the four cards share exact baselines
regardless of viewport width or content length */
display: grid;
grid-template-rows: 3.5rem 4rem 2.5rem;
row-gap: var(--s-3);
align-content: start;
}
.case-out:last-child { border-right: none; }
@media (max-width: 719px) { .case-out { border-right: none; } }
.case-num {
grid-row: 1;
font-family: var(--font-display);
font-size: 3rem;
line-height: 1;
color: var(--gold);
letter-spacing: -0.04em;
align-self: end;
display: flex;
align-items: flex-end;
}
.case-num--live {
color: var(--gold);
font-family: var(--font-display);
font-size: 3rem;
line-height: 1;
letter-spacing: -0.04em;
text-transform: none;
padding: 0;
border: 0;
align-self: end;
display: flex;
align-items: flex-end;
}
.case-num-unit {
font-size: 0.4em;
color: var(--paper);
margin-left: 0.1em;
font-weight: 500;
}
.case-metric {
grid-row: 2;
font-family: var(--font-display);
font-size: 0.95rem;
color: var(--paper);
text-transform: uppercase;
line-height: 1.2;
align-self: start;
margin: 0;
}
.case-sub {
grid-row: 3;
font-family: var(--font-body);
font-size: var(--text-xs);
color: var(--muted-light);
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.35;
margin: 0;
align-self: start;
}
.case-caption {
margin-top: var(--s-8);
padding: var(--s-5);
border-left: 3px solid var(--gold);
color: rgba(248, 241, 225, 0.9);
font-size: var(--text-base);
font-style: italic;
line-height: 1.5;
max-width: 78ch;
}
.hero-lede--big {
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--gold);
text-transform: none;
line-height: 1.15;
letter-spacing: -0.015em;
margin-top: var(--s-4) !important;
font-weight: 900;
}
/* Sub-dimensions accordion */
.subdims {
padding: 0 var(--frame);
max-width: 1600px;
margin: var(--s-16) auto 0;
border-top: 1px solid var(--ink);
padding-top: var(--s-10);
}
.subdims-head { max-width: 800px; margin-bottom: var(--s-8); }
.subdims-lede {
font-size: var(--text-base);
color: var(--ink-3);
max-width: 60ch;
margin: var(--s-4) 0 var(--s-6);
line-height: 1.5;
}
.subdim-switcher {
display: inline-flex;
flex-wrap: wrap;
border: 1px solid var(--ink);
max-width: 100%;
}
.subdim-btn {
padding: 0.65rem 1.1rem;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink);
text-transform: uppercase;
letter-spacing: 0.03em;
background: transparent;
border: none;
border-right: 1px solid var(--ink);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
flex: 1 1 auto;
min-width: 0;
}
@media (max-width: 480px) {
.subdim-btn { flex: 1 1 50%; padding: 0.6rem 0.5rem; font-size: 0.8rem; }
.subdim-btn:nth-child(2) { border-right: none; }
.subdim-btn:nth-child(1),
.subdim-btn:nth-child(2) { border-bottom: 1px solid var(--ink); }
}
.subdim-btn:last-child { border-right: none; }
.subdim-btn:hover { background: var(--sand); }
.subdim-btn.is-active { background: var(--ink); color: var(--paper); }
/* Stack panels in a CSS grid so the container adopts the tallest panel's height
and stays that height for every edition switch. Prevents layout jump. */
.subdim-panels {
border: 2px solid var(--ink);
background: var(--white);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.subdim-panel {
grid-column: 1;
grid-row: 1;
display: grid;
grid-template-columns: 1fr;
gap: 0;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
@media (min-width: 720px) {
.subdim-panel { grid-template-columns: repeat(3, 1fr); }
}
.subdim-panel.is-active {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.subdim-col {
padding: var(--s-8) var(--s-6);
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.subdim-col:last-child { border-right: none; }
@media (max-width: 719px) { .subdim-col { border-right: none; } }
.subdim-kpi {
font-family: var(--font-display);
font-size: var(--text-lg);
text-transform: uppercase;
color: var(--ink);
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: var(--s-3);
padding-bottom: var(--s-3);
border-bottom: 2px solid var(--orange);
}
.subdim-kpi-num {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--orange);
letter-spacing: 0.06em;
}
.subdim-item {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--ink-3);
padding: 0.35rem 0;
font-weight: 500;
}
.subdim-item::before {
content: '→ ';
color: var(--orange);
font-weight: 700;
}
/* Products section */
.products {
background: var(--ink);
color: var(--paper);
padding: var(--section-py) 0;
border-top: 3px solid var(--orange);
}
.products .section-heading { color: var(--paper); }
.products .section-num { color: rgba(248, 241, 225, 0.65); }
.products .section-lede { color: rgba(248, 241, 225, 0.85); }
.product-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
padding: 0 var(--frame);
max-width: 1600px;
margin: 0 auto;
}
@media (min-width: 780px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
/* Rigid grid so the three cards share pixel-exact zone positions:
row 1: head (status + step) — fixed 2.4rem
row 2: name (Power*) — fixed 2.2rem
row 3: verb (Diagnoses./Builds./) — fixed 2.6rem
row 4: body (paragraph) — fixed 11rem (auto on mobile)
row 5: features (bullet list) — auto, sits at fixed offset from top */
.product-card {
padding: var(--s-10) var(--s-8);
/* Light dividers between cards only; no outer frame */
border-right: 1px solid rgba(248, 241, 225, 0.14);
border-bottom: none;
/* Position-based layout so the feature-list divider lands at a pixel-fixed offset
from the card top on all three cards, whatever the body length or head layout. */
position: relative;
min-height: 34rem;
padding-top: 24rem;
transition: background 0.25s ease;
}
@media (min-width: 1100px) {
.product-card { padding-top: 22rem; min-height: 32rem; }
}
@media (max-width: 779px) {
.product-card {
padding-top: var(--s-10);
min-height: 0;
display: flex;
flex-direction: column;
gap: var(--s-4);
}
}
.product-card:last-child { border-right: none; }
@media (max-width: 779px) { .product-card { border-right: none; } }
/* Per-product accent using the same suffix palette used inline */
.product-card--scoar { background: rgba(232, 109, 52, 0.08); border-top: 3px solid var(--orange); }
.product-card--buildr { background: rgba(184, 137, 58, 0.05); border-top: 3px solid var(--gold); }
.product-card--playr { background: rgba(224, 143, 117, 0.05); border-top: 3px solid var(--coral); }
/* Head/name/verb/body pinned absolutely from card top; features flow at the padding-top boundary.
Divider lands at the exact same pixel on all three cards. */
@media (min-width: 780px) {
.product-card .product-head { position: absolute; top: var(--s-10); left: var(--s-8); right: var(--s-8); margin: 0; }
.product-card .product-name { position: absolute; top: calc(var(--s-10) + 3.6rem); left: var(--s-8); right: var(--s-8); margin: 0; }
.product-card .product-verb { position: absolute; top: calc(var(--s-10) + 6.4rem); left: var(--s-8); right: var(--s-8); margin: 0; }
.product-card .product-body { position: absolute; top: calc(var(--s-10) + 10rem); left: var(--s-8); right: var(--s-8); margin: 0; }
.product-card .product-features { margin: 0; }
}
.product-card--scoar:hover { background: rgba(232, 109, 52, 0.14); }
.product-card--buildr:hover { background: rgba(184, 137, 58, 0.12); }
.product-card--playr:hover { background: rgba(224, 143, 117, 0.12); }
/* Product name with coloured suffix; Power inherits its container colour */
.pp-name { color: inherit; font-weight: inherit; letter-spacing: inherit; }
.pp-scoar { color: var(--orange); }
.pp-buildr { color: var(--gold-soft); }
.pp-playr { color: var(--coral); }
/* On dark surfaces the Power reads paper-white regardless of parent text colour */
.ticker .pp-name,
.offer .pp-name,
.products .pp-name,
.gm-caption .pp-name,
.footer-mega .pp-name { color: var(--paper); }
/* Big verb underneath the product name */
.product-verb {
font-family: var(--font-display);
font-size: 1.6rem;
line-height: 0.95;
letter-spacing: -0.02em;
color: var(--paper);
margin: 0 0 var(--s-3);
}
.product-card--scoar .product-verb { color: var(--orange); }
.product-card--buildr .product-verb { color: var(--gold-soft); }
.product-card--playr .product-verb { color: var(--coral); }
/* Status pill matches accent */
.product-card--buildr .product-status--soon { color: var(--gold-soft); border-color: var(--gold-soft); }
.product-card--playr .product-status--later { color: var(--coral); border-color: var(--coral); }
.product-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-3);
margin-bottom: var(--s-4);
flex-wrap: wrap;
}
.product-status {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--orange);
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.7rem;
border: 1px solid var(--orange);
}
.product-status--soon,
.product-status--later {
color: var(--muted-light);
border-color: var(--muted-light);
}
.product-step {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(248, 241, 225, 0.6);
}
.product-name {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--paper);
line-height: 1;
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
}
/* On tablet columns the name would wrap; shrink slightly so it stays on one line */
@media (min-width: 780px) and (max-width: 1099px) {
.product-name { font-size: 1.25rem; }
}
.product-tag {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--orange-soft);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: -0.2rem;
display: none; /* legacy .product-tag is no longer used; hide if any remain */
}
.product-body {
color: rgba(248, 241, 225, 0.8);
font-size: var(--text-sm);
line-height: 1.55;
margin-top: var(--s-3);
}
/* Hero visual caption */
.hero-visual-caption {
position: absolute;
right: -1px;
bottom: -1px;
padding: 0.5rem 0.9rem;
background: var(--orange);
color: var(--ink);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
z-index: 2;
border: 2px solid var(--ink);
}
/* ============================================================
PUBLISHED (MMA FULL-BLEED)
============================================================ */
.published {
position: relative;
background: var(--ink);
color: var(--paper);
overflow: hidden;
isolation: isolate;
}
.published-image {
position: absolute;
inset: 0;
z-index: 0;
}
.published-image img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
opacity: 0.35;
filter: contrast(1.08) saturate(0.85);
}
.published-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 42, 40, 0.7) 0%, rgba(15, 42, 40, 0.9) 100%);
}
.published-inner {
position: relative;
z-index: 1;
padding: var(--section-py) var(--frame);
max-width: 1400px;
margin: 0 auto;
}
.published-body-wrap {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
margin-top: var(--s-10);
padding-left: 0;
max-width: 780px;
}
.published-body {
font-size: var(--text-lg);
color: rgba(248, 241, 225, 0.85);
line-height: 1.5;
font-weight: 500;
}
.published-line {
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--orange);
text-transform: uppercase;
line-height: 1.15;
padding-left: var(--s-4);
border-left: 4px solid var(--orange);
}
.published-ctas {
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
margin-top: var(--s-10);
}
/* ============================================================
TEAM
============================================================ */
.team {
background: var(--paper);
padding: var(--section-py) 0;
border-top: 1px solid var(--ink);
}
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
padding: 0 var(--frame);
max-width: 1600px;
margin: 0 auto;
/* No outer frame */
}
@media (min-width: 780px) {
.team-grid { grid-template-columns: repeat(3, 1fr); }
}
.team-card {
padding: var(--s-10) var(--s-8);
background: var(--white);
/* Light grey dividers between cards only, no outer frame */
border-right: 1px solid rgba(15, 42, 40, 0.12);
border-bottom: 1px solid rgba(15, 42, 40, 0.12);
transition: background 0.25s ease;
display: grid;
grid-template-rows: auto auto auto auto 1fr;
align-content: start;
}
.team-card:last-child { border-right: none; }
@media (max-width: 779px) {
.team-card { border-right: none; }
.team-card:last-child { border-bottom: none; }
}
@media (min-width: 780px) {
.team-card { border-bottom: none; }
}
.team-card:hover { background: var(--sand); }
.team-card-head {
display: flex;
justify-content: space-between;
margin-bottom: var(--s-8);
}
.team-num {
font-size: 0.75rem;
color: var(--orange);
}
.team-country {
font-size: 0.7rem;
color: var(--muted);
}
.team-portrait {
width: 92px; height: 92px;
background: var(--ink);
color: var(--paper);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--s-6);
border: 3px solid var(--orange);
}
.team-initial {
font-family: var(--font-display);
font-size: 1.65rem;
letter-spacing: 0.02em;
}
.team-name {
font-size: var(--text-xl);
color: var(--ink);
margin-bottom: 0.4rem;
line-height: 1.05;
min-height: 2.2em;
display: flex;
align-items: flex-end;
}
.team-role {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--orange);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: var(--s-5);
min-height: 2.6em;
line-height: 1.4;
}
.team-bio {
color: var(--ink-3);
font-size: var(--text-sm);
line-height: 1.55;
}
/* ============================================================
CONTACT (DARK)
============================================================ */
.contact {
background: var(--ink);
color: var(--paper);
padding: var(--section-py) 0;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-12);
align-items: start;
padding: 0 var(--frame);
max-width: 1600px;
margin: 0 auto;
}
@media (min-width: 900px) {
.contact-grid { grid-template-columns: 1fr 1.1fr; gap: var(--s-16); }
}
.contact-copy .section-head { padding: 0; margin-bottom: var(--s-8); }
.contact-copy .btn { margin-top: var(--s-6); }
.contact-form {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-4);
padding: var(--s-8);
background: var(--ink-2);
border: 2px solid var(--orange);
position: relative;
}
@media (min-width: 640px) {
.contact-form { grid-template-columns: 1fr 1fr; padding: var(--s-10); }
}
.field {
display: flex;
flex-direction: column;
gap: 0.4rem;
grid-column: 1 / -1;
}
@media (min-width: 640px) { .field:not(.field-wide) { grid-column: span 1; } }
.field-label {
font-size: var(--text-xs);
color: var(--orange);
}
.field input,
.field select,
.field textarea {
padding: 0.8rem 0.95rem;
border: 1px solid var(--line-dark);
background: transparent;
border-radius: 0;
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--paper);
transition: border-color 0.2s ease, background 0.2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--orange);
background: rgba(232, 109, 52, 0.05);
}
.field select { color: var(--paper); }
.field select option { background: var(--ink); }
.field textarea { resize: vertical; min-height: 110px; }
.contact-form .btn { grid-column: 1 / -1; justify-self: start; margin-top: var(--s-2); }
.form-sent {
grid-column: 1 / -1;
display: none;
padding: var(--s-4);
border-left: 4px solid var(--orange);
color: var(--orange);
font-family: var(--font-mono);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.contact-form.is-sent .form-sent { display: block; }
/* ============================================================
FOOTER
============================================================ */
.site-footer {
background: var(--ink-2);
color: var(--paper);
border-top: 1px solid var(--orange);
overflow: hidden;
}
.footer-mega {
font-family: var(--font-display);
/* POWERPLAY/01 sized to fit its container width */
font-size: 2.5rem;
line-height: 0.85;
letter-spacing: -0.04em;
color: transparent;
-webkit-text-stroke: 1.5px var(--paper);
padding: var(--s-8) var(--frame) 0;
white-space: nowrap;
overflow: hidden;
display: block;
text-align: left;
max-width: 1600px;
margin: 0 auto;
box-sizing: border-box;
}
.footer-mega-slash { color: var(--orange); -webkit-text-stroke: 1.5px var(--orange); }
/* Clean 2-column footer: nav on the left, meta on the right.
Everything aligned to the same top baseline. */
.footer-inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-10);
padding: var(--s-10) var(--frame);
border-top: 1px solid var(--line-dark);
align-items: start;
max-width: 1600px;
margin: 0 auto;
box-sizing: border-box;
}
@media (min-width: 780px) {
.footer-inner { grid-template-columns: 1fr 1fr; gap: var(--s-12); }
}
.footer-brand {
display: flex;
flex-direction: column;
gap: var(--s-4);
align-items: flex-start;
}
.footer-tag {
color: var(--orange-soft);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0;
}
.footer-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3) var(--s-6);
justify-content: start;
margin-top: var(--s-2);
}
.footer-nav a {
font-family: var(--font-body);
font-size: var(--text-sm);
color: rgba(248, 241, 225, 0.75);
transition: color 0.2s ease;
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
font-weight: 600;
}
.footer-nav a:hover { color: var(--orange); }
.footer-nav .nav-num { color: var(--muted-light); font-family: var(--font-mono); font-size: 0.7rem; }
.footer-nav a:hover .nav-num { color: var(--orange); }
.footer-meta {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--muted-light);
text-align: left;
letter-spacing: 0.03em;
line-height: 1.9;
margin: 0;
}
@media (min-width: 780px) {
.footer-meta { text-align: right; }
}
/* ============================================================
STICKY OFFER
============================================================ */
.sticky-offer {
position: fixed;
right: 1rem;
bottom: 1rem;
max-width: calc(100% - 2rem);
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.9rem 1.35rem;
background: var(--orange);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
box-shadow: 4px 4px 0 var(--ink);
border: 2px solid var(--ink);
z-index: 30;
opacity: 0;
pointer-events: none;
transform: translateY(12px);
transition: opacity 0.3s ease, transform 0.3s var(--ease), box-shadow 0.2s ease;
}
.sticky-offer.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sticky-offer:hover { box-shadow: 6px 6px 0 var(--ink); transform: translate(-1px, -1px); }
@media (max-width: 480px) {
.sticky-offer { padding: 0.7rem 0.9rem; font-size: 0.7rem; letter-spacing: 0.02em; gap: 0.4rem; }
.sticky-offer .btn-arrow { display: none; }
}
.sticky-offer-dot {
width: 8px; height: 8px;
background: var(--ink);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
/* ============================================================
SCROLL REVEAL
============================================================ */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
/* Number counter animation baseline */
.counter { display: inline-block; }
/* ============================================================
FOCUS + SKIP LINK
============================================================ */
:focus-visible {
outline: 3px solid var(--orange);
outline-offset: 3px;
border-radius: 0;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
padding: 0.75rem 1rem;
background: var(--orange);
color: var(--ink);
z-index: 999;
font-weight: 700;
text-transform: uppercase;
}
.skip-link:focus { left: 1rem; top: 1rem; }
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
.hero-visual { animation: none; }
.ticker-track { animation: none; }
}
/* ============================================================
TRUST BAR
============================================================ */
.trustbar {
background: var(--ink);
color: var(--paper);
padding: var(--s-10) 0 var(--s-8);
border-top: 1px solid var(--orange);
border-bottom: 1px solid var(--line-dark);
}
.trust-inner {
display: grid;
grid-template-columns: 1fr;
gap: 0;
padding: 0 var(--frame);
max-width: 1600px;
margin: 0 auto;
border: 1px solid var(--line-dark);
}
@media (min-width: 620px) { .trust-inner { grid-template-columns: repeat(5, 1fr); } }
.trust-item {
padding: var(--s-6) var(--s-5);
border-right: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.trust-item:last-child { border-right: none; }
@media (max-width: 619px) { .trust-item { border-right: none; } }
.trust-num {
font-family: var(--font-display);
font-size: 2.25rem;
line-height: 1;
color: var(--orange);
letter-spacing: -0.03em;
}
.trust-num-plus {
font-size: 0.6em;
color: var(--paper);
margin-left: 0.05em;
font-weight: 500;
}
.trust-label {
font-family: var(--font-display);
font-size: 0.85rem;
color: var(--paper);
text-transform: uppercase;
letter-spacing: -0.005em;
line-height: 1.1;
margin-top: 0.35rem;
}
.trust-sub {
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--muted-light);
letter-spacing: 0.05em;
line-height: 1.35;
}
.trust-footnote {
padding: 0 var(--frame);
max-width: 1600px;
margin: var(--s-4) auto 0;
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--orange-soft);
letter-spacing: 0.03em;
text-align: right;
text-transform: uppercase;
}
@media (max-width: 619px) { .trust-footnote { text-align: left; } }
/* ============================================================
REFERENCE LOGOS
============================================================ */
.refs {
background: var(--paper);
padding: var(--section-py) 0;
border-bottom: 1px solid var(--ink);
}
.refs-lede {
padding: 0 var(--frame);
max-width: 1600px;
margin: 0 auto var(--s-8);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.refs-lede .tag-dot {
width: 10px; height: 10px;
background: var(--orange);
animation: pulse 2s ease-in-out infinite;
}
.refs-grid {
list-style: none;
padding: 0 var(--frame);
max-width: 1600px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border: 1px solid var(--ink);
}
@media (min-width: 720px) { .refs-grid { grid-template-columns: repeat(4, 1fr); } }
.ref-logo {
padding: var(--s-8) var(--s-6);
background: var(--white);
border-right: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
display: grid;
grid-template-rows: 5rem auto auto;
row-gap: var(--s-3);
justify-items: center;
text-align: center;
min-height: 180px;
transition: background 0.25s ease;
}
.ref-logo:last-child { border-right: none; }
@media (max-width: 719px) {
.ref-logo:nth-child(2n) { border-right: none; }
.ref-logo:not(:nth-child(2n)) { border-right: 1px solid var(--ink); }
}
.ref-logo:hover { background: var(--sand); }
.ref-logo img {
grid-row: 1;
align-self: center;
max-width: 110px;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
margin: 0;
}
.ref-logo--fnc img {
max-width: 140px;
max-height: 3.25rem;
filter: brightness(0) saturate(100%) invert(9%) sepia(52%) saturate(1350%) hue-rotate(139deg) brightness(94%) contrast(100%);
}
.ref-name {
grid-row: 2;
font-family: var(--font-display);
font-size: 0.9rem;
color: var(--ink);
text-transform: uppercase;
letter-spacing: -0.005em;
line-height: 1;
height: 1rem;
display: flex;
align-items: center;
}
.ref-sub {
grid-row: 3;
font-family: var(--font-mono);
font-size: 0.65rem;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
height: 0.8rem;
display: flex;
align-items: center;
line-height: 1;
}
/* ============================================================
OFFER GRID 4 (4 editions)
============================================================ */
@media (min-width: 780px) {
.offer-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
.offer-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.edition-promotions::before { background: var(--sage, #1F6162) !important; }
/* fallback for --sage: coral-dark already claimed by leagues, gold by clubs, ink by events; promotions gets teal */
.edition-promotions::before { background: var(--teal) !important; }
/* ============================================================
PRODUCT FEATURES LIST
============================================================ */
.product-features {
list-style: none;
padding: 0;
margin: var(--s-5) 0 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
border-top: 1px solid var(--line-dark);
padding-top: var(--s-5);
}
.product-features li {
font-family: var(--font-body);
font-size: 0.78rem;
color: rgba(248, 241, 225, 0.75);
padding-left: 1.1rem;
position: relative;
line-height: 1.4;
}
.product-features li::before {
content: '→';
position: absolute;
left: 0;
color: var(--orange);
font-weight: 700;
}
/* ============================================================
LEGAL STRIP
============================================================ */
.legal-strip {
background: var(--ink-2);
border-top: 1px solid var(--line-dark);
}
.legal-inner {
padding: var(--s-6) var(--frame);
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: var(--s-4);
}
@media (min-width: 780px) { .legal-inner { grid-template-columns: 1.5fr 1fr; } }
.legal-inner p {
font-family: var(--font-body);
font-size: 0.72rem;
color: var(--muted-light);
line-height: 1.55;
}
.legal-privacy { color: rgba(248, 241, 225, 0.5); }
/* ============================================================
RESPONSIVE FONT BUMPS — replaces the old clamp() fluid sizes
with explicit values per breakpoint
============================================================ */
@media (min-width: 720px) {
.hero-heading { font-size: 3rem; }
.cibona-num { font-size: 2.75rem; }
.case-num, .case-num--live { font-size: 3.75rem; }
.method-body--emph, .method-body--lead { font-size: 1.85rem; }
.segments-heading, .flywheel-headline { font-size: 2.75rem; }
.footer-mega { font-size: 4.5rem; }
.proof-heading, .contact-heading, .team-heading { font-size: 2.75rem; }
.section-lede { font-size: 1.125rem; }
.fw-card-name { font-size: 1.05rem; }
.cibona-eyebrow { font-size: 0.8rem; }
.proof-num { font-size: 2.5rem; }
.quote { font-size: 1.6rem; }
.case-name { font-size: 1.75rem; }
.edition-title, .fast-lane-title { font-size: 1.6rem; }
.full-diag-title { font-size: 2rem; }
.fd-k { font-size: 1.8rem; }
.subdims-title { font-size: 1.75rem; }
.hero-lede--big { font-size: 1.6rem; }
}
@media (min-width: 1100px) {
.hero-heading { font-size: 3.75rem; }
.cibona-num { font-size: 3.25rem; }
.case-num, .case-num--live { font-size: 4.5rem; }
.method-body--emph, .method-body--lead { font-size: 2.2rem; }
.segments-heading, .flywheel-headline { font-size: 3.25rem; }
.footer-mega { font-size: 6rem; }
.proof-heading, .contact-heading, .team-heading { font-size: 3.25rem; }
.section-lede { font-size: 1.1875rem; }
.fw-card-name { font-size: 1.15rem; }
.cibona-eyebrow { font-size: 0.85rem; }
.proof-num { font-size: 3rem; }
.quote { font-size: 1.9rem; }
.case-name { font-size: 2rem; }
.edition-title, .fast-lane-title { font-size: 1.85rem; }
.full-diag-title { font-size: 2.5rem; }
.fd-k { font-size: 2.1rem; }
.subdims-title { font-size: 2rem; }
.hero-lede--big { font-size: 2rem; }
}
/* ============================================================
LEGAL MODAL (Imprint / Privacy / Terms) with bilingual two-column layout
============================================================ */
.legal-modal {
border: none;
padding: 0;
background: var(--paper);
color: var(--ink);
width: min(1200px, 92vw);
max-height: 88vh;
border-radius: 4px;
box-shadow: 0 20px 60px rgba(15, 42, 40, 0.25);
}
.legal-modal::backdrop {
background: rgba(10, 31, 29, 0.7);
}
.legal-modal-inner {
display: flex;
flex-direction: column;
max-height: 88vh;
}
.legal-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding: var(--s-6) var(--s-8);
border-bottom: 1px solid var(--line-dark);
background: var(--paper);
}
.legal-modal-title {
font-family: var(--font-display);
font-weight: 900;
font-size: 1.25rem;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ink);
margin: 0;
}
.legal-modal-close {
background: transparent;
border: 1px solid var(--ink);
color: var(--ink);
padding: 0.5rem 1rem;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.legal-modal-close:hover {
background: var(--ink);
color: var(--paper);
}
.legal-modal-body {
padding: var(--s-6) var(--s-8) var(--s-8);
overflow-y: auto;
font-size: 0.9rem;
line-height: 1.55;
color: var(--ink);
}
.legal-modal-body h3 {
font-family: var(--font-display);
font-weight: 900;
font-size: 0.85rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ink);
margin: var(--s-5) 0 var(--s-2);
}
.legal-modal-body h3:first-child { margin-top: 0; }
.legal-modal-body p { margin: 0 0 var(--s-3); }
.legal-modal-body a { color: var(--orange); text-decoration: underline; }
/* Two-column bilingual layout */
.legal-cols {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
}
@media (min-width: 780px) {
.legal-cols { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
.legal-col {
position: relative;
padding: var(--s-5);
background: rgba(15, 42, 40, 0.03);
border: 1px solid rgba(15, 42, 40, 0.1);
}
.legal-col--en { border-left: 3px solid var(--orange); }
.legal-col--de { border-left: 3px solid var(--teal); }
.legal-lang-tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.15em;
color: var(--muted);
margin-bottom: var(--s-3);
}
.legal-col--en .legal-lang-tag { color: var(--orange); }
.legal-col--de .legal-lang-tag { color: var(--teal); }
.legal-binding-note {
margin-top: var(--s-6);
padding-top: var(--s-4);
border-top: 1px solid var(--line-dark);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
color: var(--muted);
text-align: center;
}