/* ===================================================================
ZINGA CRICKET — core design system
The shared layer for all 21 pages. Tokens, typography, header,
hamburger index, footer, buttons, sections, forms and the reusable
content blocks the inner pages are built from.
Tokens are lifted verbatim from the approved homepage build so the
new pages and the homepage are the same system, not a lookalike.
Loaded first on every page. The homepage then loads its own
style.css / sponsors.css / finish.css on top, unchanged.
=================================================================== */
/* ----------------------------- tokens ----------------------------- */
:root {
--navy: #03182b;
--ink: #03182b;
--blue: #0062ff;
--blue-deep: #004ac4;
--cyan: #00caff;
--zcyan: #00cfff;
--white: #f7fbff;
--chalk: #f7fbff;
--muted: #9fb0c2; /* on dark surfaces */
--muted-on-light: #6c7884; /* same hue, 4.51:1 on white */
--body-text: #334760;
--body-text-dark: #cfe0f3;
--line: #d7e4ee;
--line-dark: #123458;
--body: "Barlow", Arial, sans-serif;
--display: "Barlow Condensed", "Arial Narrow", sans-serif;
/* Site design system (13 Oct 2026): one headline face, one heading
scale and one section rhythm for every page. Applied in system.css. */
--headline: "Anton", "Barlow Condensed", "Arial Narrow", sans-serif;
--h1: var(--ds-hero);
--h2: var(--ds-title);
--h3: var(--ds-card);
--section-y: var(--ds-pad);
/* Type scale — roughly a 1.3 ratio, declared once.
Before this, every component set its own heading size and an h3
measured anywhere from 19px to 32px depending on which block it
happened to sit in. Same semantic level, six different sizes: that
is what makes a page feel unresolved even when nothing is broken.
--text-card is a deliberate step below --text-3, for titles inside
a card or tier where a full section heading would overpower the
copy next to it. */
--text-meta: clamp(13px, 0.85vw, 14px); /* labels, captions */
--text-small: 1rem; /* copy inside a card */
--text-body: var(--ds-copy);
--text-lede: var(--ds-lead);
--text-card: var(--ds-card);
--text-3: clamp(23px, 1.95vw, 29px);
--text-2: clamp(30px, 3.1vw, 46px);
--text-1: clamp(40px, min(5vw, 8.4svh), 72px);
--pad-x: var(--ds-gutter);
--radius: 5px;
--maxw: 1360px;
/* ---------------- interactive surfaces: one transition ----------------
An element has exactly ONE transition list, so every `transition`
shorthand written for a card overwrites the last one. Three sheets
were each writing their own — the hover lift in polish.css, the
electric edge in visual-motion.css, and the staggered reveal, which
comes last in polish.css and therefore won. The result on any
`.tier.v-electric` was `transition-property: opacity, transform`:
border-colour and shadow had no transition at all, so the highlight
snapped on instantly, and the lift inherited the reveal's 70ms-per-
card delay, so the third card in a row hovered 140ms late.
So the list is defined once, here, and used verbatim by every sheet
that styles these surfaces. Anything that needs to animate on a card
belongs in this list.
The reveal deliberately does NOT appear in it: it animates
`translate`, which is a separate property from `transform`, so it
can run as a fill-mode animation without ever blocking the hover. */
--surface-ease: cubic-bezier(0.22, 0.8, 0.28, 1);
--surface-dur: 360ms;
--surface-transition:
transform var(--surface-dur) var(--surface-ease),
translate var(--surface-dur) var(--surface-ease),
border-color var(--surface-dur) ease,
box-shadow var(--surface-dur) ease,
filter var(--surface-dur) ease,
background-color var(--surface-dur) ease;
}
/* ------------------------------ reset ----------------------------- */
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 24px;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--white);
color: var(--ink);
font-family: var(--body);
font-size: 16px;
overflow-x: hidden;
}
/* height:auto is load-bearing, not tidying. renderPage() stamps every
with no width or height falls
back to its intrinsic 300x150, and on a card that filled the entire
tile and dwarfed the title next to it. The homepage stylesheet had
such a rule; this one did not, so every icon outside the two
contexts that happened to set a size rendered enormous.
Each context that wants a different size states it here, so there is
one place to look. */
.icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
display: inline-block;
vertical-align: middle;
color: var(--blue);
}
.dark .icon { color: var(--cyan); }
.hero-mark .icon { width: 20px; height: 20px; }
.feature .icon { width: 26px; height: 26px; }
.card-n .icon { width: 30px; height: 30px; }
.tier-level .icon { width: 17px; height: 17px; vertical-align: -3px; margin-right: 3px; }
.path-dot .icon { width: 24px; height: 24px; color: inherit; }
.empty-state .icon { width: 34px; height: 34px; }
.faq .icon { width: 20px; height: 20px; }
/* ----------------------------- buttons ---------------------------- */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 48px;
padding: 13px 22px;
border: 1px solid var(--blue);
border-radius: var(--radius);
background: var(--blue);
color: #fff;
font: 600 18px/1.2 var(--display);
letter-spacing: 0.01em;
transition: background 0.2s, transform 0.2s, border-color 0.2s;
position: relative;
z-index: 8;
}
.button:hover { background: var(--blue-deep); transform: translateY(-2px); }
.button.outline, .button.outline-blue { background: transparent; }
.button.outline { border-color: rgba(104, 193, 255, 0.5); color: #fff; }
.button.outline:hover { background: rgba(104, 193, 255, 0.12); }
.button.outline-blue { color: var(--blue); border-color: rgba(0, 98, 255, 0.5); }
.button.outline-blue:hover { background: #e7f0ff; }
.button.compact { font-size: 16px; min-height: 44px; padding: 11px 18px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.skip { position: fixed; top: -100px; left: 20px; background: #fff; padding: 14px; z-index: 100; }
.skip:focus { top: 12px; }
/* ----------------------------- header ----------------------------- */
.header {
position: absolute;
inset: 0 0 auto;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 26px;
color: #fff;
padding: 22px var(--pad-x);
}
.logo { display: block; width: 165px; flex-shrink: 0; }
.logo img { width: 100%; height: auto; }
.header nav, .header-actions { display: flex; align-items: center; gap: 24px; }
/* The header's flat link row became the three dropdown menus in
styles/nav-neon.css, which brings its own type and hover colour.
The old `.header nav a` rules are gone rather than overridden: they
out-specified the new ones and were repainting every panel link
cyan on hover. */
.header-actions { gap: 15px; }
/* The hamburger is shown at every width: the header stays small while
the complete 21-page index stays one tap away. */
.menu-toggle {
width: 42px;
height: 42px;
background: rgba(6, 23, 43, 0.53);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: var(--radius);
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
align-items: center;
}
.menu-toggle span { width: 18px; height: 1px; background: #fff; }
@media (max-width: 900px) {
.header nav { display: none; }
}
@media (max-width: 560px) {
.header-actions .button.compact { display: none; }
}
/* ------------------------- hamburger index ------------------------ */
.menu-dialog {
width: min(1100px, 94vw);
max-height: 90vh;
border: 0;
border-radius: 8px;
padding: 0;
background: var(--navy);
color: var(--white);
}
.menu-dialog::backdrop { background: rgba(2, 12, 24, 0.82); backdrop-filter: blur(4px); }
.menu-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 28px;
border-bottom: 1px solid var(--line-dark);
}
.menu-head img { width: 150px; height: auto; }
.menu-close {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: var(--radius);
color: #fff;
padding: 9px 14px;
font-size: 14px;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 28px 34px;
padding: 30px 28px 38px;
}
.menu-col .col-title {
font-size: 13px;
font-family: var(--body);
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--cyan);
margin-bottom: 14px;
}
.menu-col ul { margin: 0; }
.menu-col li + li { margin-top: 2px; }
.menu-col a {
display: block;
padding: 7px 0;
font-family: var(--display);
font-size: 21px;
font-weight: 600;
color: #edf6ff;
}
.menu-col a:hover { color: var(--cyan); }
/* ---------------------------- sections ---------------------------- */
.section {
position: relative;
padding: clamp(44px, 6svh, 80px) var(--pad-x);
overflow: hidden;
isolation: isolate;
}
.light { background: var(--white); }
.dark { background: var(--navy); color: var(--white); }
.section-copy { position: relative; z-index: 3; min-width: 0; }
.section-copy > p:not(.eyebrow) { font-size:var(--ds-eyebrow); color: var(--body-text); }
.dark .section-copy > p:not(.eyebrow) { color: var(--body-text-dark); }
.section-head { max-width: 900px; margin-bottom: clamp(28px, 4svh, 48px); }
.wrap { max-width: var(--maxw); margin-inline: auto; }
/* --------------------- inner-page hero (~70svh) ------------------- */
/* Shorter than the homepage's full-screen hero: the same photograph,
gradient, typography and button pair, sized so the first section is
already peeking and the reader knows to continue. */
.page-hero {
position: relative;
min-height: 460px;
height: 70svh;
max-height: 760px;
color: #fff;
background: #02101f;
display: flex;
align-items: flex-end;
overflow: hidden;
isolation: isolate;
}
.page-hero-art { position: absolute; inset: 0; z-index: 0; }
.page-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.page-hero-shade {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, rgba(3, 18, 36, 0.92), rgba(3, 18, 36, 0.35) 58%, transparent 78%),
linear-gradient(0deg, rgba(2, 17, 35, 0.75), transparent 42%);
}
.page-hero-copy {
position: relative;
z-index: 3;
width: min(760px, 58%);
padding: 0 0 clamp(44px, 7svh, 78px) var(--pad-x);
}
.page-hero .eyebrow { color: #99daff; }
.page-hero-lede { font-size: var(--text-lede); color: #e7f0ff; max-width: 56ch; margin: 20px 0 0; }
/* Trust markers under the hero copy. */
.hero-marks { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; }
@media (max-width: 560px) {
/* One per line on a narrow screen: a ragged two-up wrap reads as a
mistake, a stacked list reads as a list. */
.hero-marks { flex-direction: column; gap: 9px; }
}
.hero-mark { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #b9d5e7; }
.hero-mark .icon { color: var(--cyan); }
@media (max-width: 900px) {
/* On a phone the copy sits over the photograph rather than beside
it, so the gradient has to do two jobs: keep the text readable at
the bottom and leave the top of the image clearly visible. The
previous version ran 0.94 → 0.5 across the whole panel, which
flattened the photograph into a dark block — the hero read as an
empty box. This keeps the image open at the top and only darkens
under the text. */
.page-hero {
height: auto;
min-height: 82svh;
max-height: none;
padding-top: 108px;
}
.page-hero-copy { width: 100%; padding-right: var(--pad-x); padding-bottom: 42px; }
.page-hero-shade {
background:
linear-gradient(0deg,
rgba(2, 17, 35, 0.95) 0%,
rgba(2, 17, 35, 0.86) 34%,
rgba(2, 17, 35, 0.42) 62%,
rgba(2, 17, 35, 0.22) 100%),
linear-gradient(0deg, transparent 55%, rgba(2, 17, 35, 0.45) 100%);
}
/* Pull the focal point up so the subject is in the open part of the
frame rather than behind the copy. */
.page-hero-art img { object-position: 60% 28%; }
}
@media (max-width: 560px) {
.page-hero { min-height: 88svh; padding-top: 96px; }
}
/* ---------------------------- reveal ------------------------------ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
/* Scaled with transform rather than width, so it never triggers layout
while scrolling. Matches the approved homepage's implementation. */
.page-progress {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
background: linear-gradient(90deg, var(--blue), var(--cyan));
z-index: 60;
pointer-events: none;
}
/* ----------------------------- media ------------------------------ */
/* A photograph in a fixed-ratio frame.
object-fit: cover means the image always fills the frame exactly —
it cannot leave a gap and it cannot overflow, whatever the source
dimensions are. `--focus` moves the visible window over the subject,
which is the only thing a page ever needs to set.
aspect-ratio reserves the space before the image loads, so there is
no layout shift. */
.media {
position: relative;
aspect-ratio: var(--ratio, 4 / 3);
overflow: hidden;
border-radius: 10px;
margin: 0;
background: #0b1f38;
isolation: isolate;
}
.media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--focus, 50% 50%);
transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* A slow, small push-in on hover. Scale only — never width/height. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.media:hover img { transform: scale(1.04); }
}
/* A soft inner edge so a photograph never sits flat against the page. */
.media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 -60px 70px -50px rgba(4, 22, 44, 0.75);
}
/* The homepage keeps its own .photo-crop system: its artwork is
composite, and each offset was measured against one specific image.
Left exactly as approved. */
.photo-crop {
position: relative;
aspect-ratio: var(--crop-ratio, 4/3);
overflow: hidden;
isolation: isolate;
border-radius: 6px;
}
.photo-crop > img {
position: absolute;
width: var(--crop-width, 100%);
max-width: none;
height: auto;
left: var(--crop-left, 0);
top: var(--crop-top, 0);
/* Safety net. The percentage offsets were measured at desktop; at
some intermediate widths the computed height fell short of the box
and left a visible hole (the homepage "gap" section did this at
768px). These floors cost nothing when the image already overflows
— which is the normal case — and prevent a gap when it does not.
object-fit keeps the aspect ratio rather than stretching. */
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
/* ===================================================================
Reusable content blocks. The inner pages are assembled from these
rather than each inventing its own layout.
=================================================================== */
/* Two-column: copy beside a visual. */
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(30px, 4vw, 64px);
align-items: center;
}
.split.narrow-art { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
@media (max-width: 900px) { .split, .split.narrow-art { grid-template-columns: 1fr; } }
/* Numbered steps, as on the homepage's "Four steps" section. */
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 20px;
counter-reset: step;
}
.step-card {
position: relative;
padding: 26px 22px 24px;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
}
.dark .step-card { border-color: var(--line-dark); background: rgba(255, 255, 255, 0.04); }
.step-card .step-n {
font-family: var(--display);
font-size: 34px;
font-weight: 700;
color: var(--blue);
line-height: 1;
margin-bottom: 14px;
display: block;
}
.dark .step-card .step-n { color: var(--cyan); }
.step-card h3 { margin-bottom: 8px; }
.step-card p { margin: 0; font-size:1rem; color: var(--body-text); }
.dark .step-card p { color: var(--body-text-dark); }
/* Feature grid with icons. */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px 30px; }
.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature .icon { margin-top: 2px; }
.feature h3 { margin-bottom: 5px; }
.feature p { margin: 0; font-size:1rem; color: var(--body-text); }
.dark .feature p { color: var(--body-text-dark); }
/* A simple checked list, used for "what you get" blocks. */
.check-list { display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.check-list li::before {
content: "";
flex-shrink: 0;
width: 20px; height: 20px;
margin-top: 2px;
border-radius: 50%;
background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.dark .check-list li::before { background-color: var(--cyan); }
/* Tier ladder — Warriors / Commanders / Kings / Lords, championships. */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
/* A cup image inside a tier. Without an explicit height the 1024x1536
artwork rendered at full column width, which made the tournaments
ladder two and a half screens tall on its own. */
.tier-cup-art {
display: flex;
align-items: flex-end;
justify-content: center;
height: clamp(120px, 15svh, 168px);
margin-bottom: 12px;
}
.tier-cup-art img {
height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45));
}
.tier {
padding: 24px 22px;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
}
.dark .tier { border-color: var(--line-dark); background: rgba(255, 255, 255, 0.04); }
.tier .tier-level {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: var(--blue);
margin-bottom: 10px;
}
.dark .tier .tier-level { color: var(--cyan); }
.tier h3 { margin-bottom: 8px; }
.tier p { margin: 0 0 12px; font-size:var(--ds-copy); color: var(--body-text); }
.dark .tier p { color: var(--body-text-dark); }
.tier .tier-req {
font-size: 13px;
font-weight: 600;
padding-top: 12px;
border-top: 1px solid var(--line);
color: var(--ink);
}
.dark .tier .tier-req { border-color: var(--line-dark); color: #cfe0f3; }
/* Definition-style rows, for "what you know before you pay" blocks. */
.rows { border-top: 1px solid var(--line); }
.dark .rows { border-color: var(--line-dark); }
.rows > li {
display: grid;
grid-template-columns: minmax(150px, 0.34fr) 1fr;
gap: 10px 30px;
padding: 18px 0;
border-bottom: 1px solid var(--line);
}
.dark .rows > li { border-color: var(--line-dark); }
.rows dt, .rows .row-k { font-family: var(--display); font-size: 21px; font-weight: 600; }
.rows dd, .rows .row-v { margin: 0; font-size: 16px; color: var(--body-text); line-height: 1.5; }
.dark .rows .row-v, .dark .rows dd { color: var(--body-text-dark); }
@media (max-width: 700px) { .rows > li { grid-template-columns: 1fr; } }
/* FAQ — mirrors the FAQPage schema emitted for the same content. */
.faq { border-top: 1px solid var(--line); }
.dark .faq { border-color: var(--line-dark); }
.faq details { border-bottom: 1px solid var(--line); }
.dark .faq details { border-color: var(--line-dark); }
.faq summary {
list-style: none;
cursor: pointer;
padding: 20px 40px 20px 0;
position: relative;
font-family: var(--display);
font-size: clamp(19px, 1.7vw, 25px);
font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
position: absolute;
right: 6px; top: 50%;
transform: translateY(-50%);
font-size: 26px;
color: var(--blue);
line-height: 1;
}
.dark .faq summary::after { color: var(--cyan); }
.faq details[open] summary::after { content: "–"; }
.faq details > p { margin: 0 0 22px; max-width: 74ch; color: var(--body-text); }
.dark .faq details > p { color: var(--body-text-dark); }
/* Entry cards — the "find your way in" pattern, reused for club types. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.card {
display: block;
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
background: #fff;
transition: transform 0.25s, border-color 0.25s;
}
.dark .card { border-color: var(--line-dark); background: rgba(255, 255, 255, 0.04); }
a.card:hover { transform: translateY(-4px); border-color: var(--blue); }
.card-body { padding: 20px 20px 22px; }
.card-n {
font-family: var(--display);
font-size: 13px;
letter-spacing: 0.14em;
color: var(--blue);
font-weight: 700;
display: block;
margin-bottom: 8px;
}
.dark .card-n { color: var(--cyan); }
.card h3 { margin-bottom: 6px; }
.card p { margin: 0; font-size:1rem; color: var(--body-text); }
.dark .card p { color: var(--body-text-dark); }
/* Progression path — beginner to championship player, local player to
selection. A connecting line runs behind the markers. */
.path {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 0;
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.path-step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
padding: 0 8px;
}
/* The connector sits behind every marker except the first. */
.path-step::before {
content: "";
position: absolute;
top: 27px;
right: 50%;
left: -50%;
height: 2px;
background: linear-gradient(90deg, var(--blue), var(--cyan));
opacity: 0.35;
}
.path-step:first-child::before { display: none; }
.path-dot {
position: relative;
z-index: 2;
width: 54px;
height: 54px;
border-radius: 50%;
display: grid;
place-items: center;
background: #fff;
border: 2px solid var(--blue);
color: var(--blue);
}
.dark .path-dot { background: var(--navy); border-color: var(--cyan); color: var(--cyan); }
.path-step.is-final .path-dot { background: var(--blue); color: #fff; }
.dark .path-step.is-final .path-dot { background: var(--cyan); color: var(--navy); }
.path-label {
font-family: var(--display);
font-size: clamp(16px, 1.4vw, 21px);
font-weight: 600;
line-height: 1.15;
}
@media (max-width: 680px) {
.path { grid-auto-flow: row; gap: 4px; justify-items: start; }
.path-step { flex-direction: row; align-items: center; text-align: left; padding: 8px 0; }
.path-step::before { inset: -8px auto 50% 26px; width: 2px; height: auto; right: auto; }
.path-dot { width: 46px; height: 46px; }
}
/* A quiet callout for supporting lines and publishing notes. */
.note {
border-left: 3px solid var(--blue);
padding: 4px 0 4px 18px;
font-size: 16px;
color: var(--body-text);
max-width: 72ch;
}
.dark .note { border-color: var(--cyan); color: var(--body-text-dark); }
/* Empty states, for pages waiting on real pilot data. */
.empty-state {
border: 1px dashed var(--line);
border-radius: 8px;
padding: 36px 28px;
text-align: center;
color: var(--body-text);
}
.dark .empty-state { border-color: var(--line-dark); color: var(--body-text-dark); }
.empty-state h3 { margin-bottom: 8px; }
/* ----------------------------- forms ------------------------------ */
.form-card {
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
padding: clamp(20px, 2.2vw, 30px);
}
.dark .form-card { border-color: var(--line-dark); background: rgba(255, 255, 255, 0.05); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--body-text); }
.dark .field label { color: #b5c8dc; }
.field input, .field select, .field textarea {
font: inherit;
font-size: 16px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
color: var(--ink);
width: 100%;
}
.dark .field input, .dark .field select, .dark .field textarea {
background: rgba(2, 16, 32, 0.6);
border-color: var(--line-dark);
color: #fff;
}
.field textarea { resize: vertical; min-height: 76px; }
/* --muted (#9fb0c2) is correct on the dark sections, but the form
card is white: it lands at 2.22:1 there, half of what 13-14px
helper text needs. --muted-on-light is the same hue taken down
to 4.51:1 on white. The token stays, so dark surfaces are
unaffected. */
.field .hint { font-size: 13px; color: var(--muted-on-light); font-weight: 400; text-transform: none; letter-spacing: 0; }
.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.form-note { font-size: 14px; color: var(--muted-on-light); margin: 0; }
.form-status { margin: 16px 0 0; font-size: 15px; min-height: 1.4em; }
.form-status[data-state="ok"] { color: #1a9d54; }
.form-status[data-state="error"] { color: #d1453b; }
.dark .form-status[data-state="ok"] { color: #5be08f; }
.dark .form-status[data-state="error"] { color: #ff8b80; }
/* Honeypot: hidden from people, filled by bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ----------------------------- footer ----------------------------- */
.footer { position: relative; background: var(--navy); color: var(--white); padding: clamp(52px, 7svh, 82px) var(--pad-x) 26px; overflow: hidden; }
.footer-glow {
position: absolute;
top: -40%; left: 50%;
transform: translateX(-50%);
width: 120%; height: 90%;
background: radial-gradient(ellipse at center, rgba(0, 98, 255, 0.22), transparent 62%);
pointer-events: none;
}
.footer-inner { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; }
.footer-top { display: grid; grid-template-columns: minmax(230px, 1.25fr) repeat(4, minmax(130px, 1fr)); gap: 34px 26px; }
.footer-brand img { width: 168px; height: auto; margin-bottom: 16px; }
.footer-brand p { font-size:var(--ds-copy); color: #b5c8dc; max-width: 32ch; }
.footer-col .col-title {
font-family: var(--body);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cyan);
margin-bottom: 14px;
}
.footer-col ul { margin: 0; }
.footer-col a { display: block; padding: 6px 0; font-size: 15px; color: #cfe0f3; }
.footer-col a:hover { color: var(--cyan); }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.social-mark { width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 6px; display: block; opacity: 0.55; }
a .social-mark { opacity: 1; }
a:hover .social-mark { border-color: var(--cyan); }
.footer-big-text { margin: clamp(34px, 5svh, 58px) 0 18px; text-align: center; }
.zinga-reveal {
font-family: var(--display);
font-weight: 800;
font-size: clamp(42px, 12vw, 170px);
letter-spacing: 0.12em;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px rgba(133, 190, 240, 0.4);
display: block;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-top: 20px;
border-top: 1px solid var(--line-dark);
font-size: 13px;
color: #8fb0cc;
}
.footer-bottom p { margin: 0; }
.footer-top-btn {
width: 38px; height: 38px;
border: 1px solid var(--line-dark);
border-radius: var(--radius);
display: grid;
place-items: center;
}
.footer-top-btn:hover { border-color: var(--cyan); color: var(--cyan); }
@media (max-width: 1050px) {
.footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.footer-top { grid-template-columns: 1fr; gap: 26px; }
}
/* ------------------------- reduced motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
.button:hover, a.card:hover { transform: none; }
.page-progress { display: none; }
}
/* ------------------ form sections: fit one screen -----------------
A lead form sat in the narrower of the two tracks, so eight fields
wrapped to two columns and four rows and pushed the section past the
screen on a 768px-tall laptop. Giving the form the wider track lets
the fields sit three across in three rows, which fits.
:has() is the right tool here — only sections that actually contain
a form should flip their proportions. */
@media (min-width: 1100px) {
.split.narrow-art:has(.form-card) {
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}
}
.form-card .form-note { margin-top: 12px; }
.form-card .actions { margin-top: 16px; }
/* The remaining form sections were a couple of percent over on a
768px-tall laptop; the lede is the easiest thing to give back. */
@media (max-height: 820px) {
.form-card .lede { font-size: 15px; margin: 6px 0 14px; }
.form-card h2 { font-size:var(--ds-title); }
}
/* Drawn arrows in buttons and links (replaced the "→" text glyph, which the button fonts do not
contain and which fell back to another font, sitting low). Centred on the lowercase letters
(x-height), which is where labels like "Book a Quick Play match" carry their visual weight. */
.zi-arrow{--zi:1em;display:inline-block;flex:none;width:var(--zi);height:var(--zi);vertical-align:-.25em;vertical-align:calc(.5ex - var(--zi) / 2);overflow:visible}
/* Components that size the arrow themselves set --zi to the same size so it stays centred. */
.znf-button .zi-arrow{--zi:23px}
/* Buttons whose arrow is centred on the button box: Barlow's line box sits ~.13em above the
middle of the lowercase letters, so nudge the arrow down to line up with the text. Uses the
separate `translate` property, so hover transforms on these arrows still work. */
.zh-cta .zh-arrow,.zs-button>svg,.znh-button>svg,.zc-cta>svg,.zc-criteria-link>svg,.button>svg.icon,.explore-card>svg.icon,.nav-trigger .nav-chevron{translate:0 .13em}
.zgf-cta>span{translate:0 2.5px}
.explore-label .circle-arrow{translate:0 .15em}
@media(max-width:700px){.znf-button .zi-arrow{translate:0 .09em}}
.z4-button .zi-arrow{translate:0 .05em}