/* The webfonts are NOT imported here. An @import inside the stylesheet
chains a second blocking request behind the first, so the type can't
start downloading until this file has parsed. The lives in the
document head instead, next to its preconnects — see functions.php
(WordPress) and the of each prototype page. */
/* ============================================================
TRU BLU GAMES — Design System
Direction: "Matchday Program" — light paper, broadcast type,
fixture-list structure. Signature = the Matchday Rail.
============================================================ */
:root{
/* Ink & paper */
/* "Tru Blu" is the brand name, so the palette is blue. Navy carries
the type and the dark surfaces; the electric blue is held back for
actions only, so the Wishlist button never loses its punch. The warm
accent is sampled from the key art itself. */
--ink: #12224A; /* body text — deep navy (15.5:1 on white) */
--ink-2: #4A5878; /* secondary text (7.1:1) */
--ink-3: #5F6B87; /* captions — 4.9:1 on the tint, 5.3:1 on white.
The old #6B7793 only cleared AA on white; on a
tinted band it fell to 4.1:1, and captions,
struck-through prices and the newsletter fine
print all sit on tinted bands. */
--paper: #FFFFFF;
--paper-2: #F2F5FA; /* first tint step */
--paper-3: #E9EDF6; /* second tint step — see "the tonal arc" below */
--card: #FFFFFF;
--rule: #E3E8F1; /* hairlines */
--rule-2: #CBD3E0;
/* Brand */
--navy: #1E3465; /* raised navy surface / hover */
--navy-dp: #0C1836; /* footer, top bar */
--blu: #2340F0; /* THE action colour — CTA only (6.9:1) */
--blu-dp: #1A2FB8;
--blu-soft: #EBEEFE;
/* Status */
--heat: #F2650C; /* graphic accent, rules, dots */
--heat-dp: #C2410C; /* text + badges (5.2:1 on white) */
--live: #067647; /* out now */
--live-soft: #E7F5EE;
/* Type */
--display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
--body: 'Barlow', -apple-system, 'Segoe UI', sans-serif;
/* Space & shape */
--gut: 24px;
--max: 1240px;
--r: 4px; /* deliberately tight — programme print, not app UI */
--nav-h: 66px;
--rail-h: 42px;
--shadow-1: 0 1px 2px rgba(12,24,54,.06), 0 4px 14px rgba(12,24,54,.05);
--shadow-2: 0 2px 6px rgba(12,24,54,.08), 0 18px 42px rgba(12,24,54,.11);
/* Two curves, used with discipline. --ease is the settle: everything
that arrives, resolves or fades. --ease-snap overshoots by a hair and
belongs only to things that respond to a deliberate input — the arrow
that nudges, the filter that takes. */
--ease: cubic-bezier(.22,.61,.36,1);
--ease-snap: cubic-bezier(.2,.9,.25,1.06);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--body);
font-size:18px;
line-height:1.7;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* height:auto is essential — images carry width/height attributes for
layout stability, and without it a square 1080x1080 keeps its 1080px
height while max-width squeezes the width, stretching it vertically. */
img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
:focus-visible{
outline:3px solid var(--blu);
outline-offset:3px;
border-radius:2px;
}
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.skip{
position:absolute; left:-9999px; top:0; z-index:100;
background:var(--ink); color:#fff; padding:12px 20px; font-family:var(--display);
text-transform:uppercase; letter-spacing:.1em;
}
.skip:focus{ left:12px; top:12px; }
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* The angled flash — the page's sport motif, reused on section
eyebrows so the tiles don't carry it alone. */
.sect-head .eyebrow::before{
content:""; width:14px; height:14px; flex:none;
background:var(--heat-dp); transform:skewX(-12deg);
}
/* ---------- Type scale ---------------------------------- */
.h-xl,.h-lg,.h-md,.h-sm{
font-family:var(--display);
font-weight:700;
text-transform:uppercase;
letter-spacing:-.005em;
line-height:.93;
margin:0;
text-wrap:balance;
}
/* The big statements lean, the small ones stay upright. Oblique
condensed caps are the type of the scoreboard and the jersey — it is
what makes the page read as sport rather than as a brochure. */
.h-xl,.h-lg{ font-style:italic; }
.h-xl{ font-size:clamp(2.7rem, 7.6vw, 7.2rem); }
.h-lg{ font-size:clamp(2.2rem, 4.4vw, 3.6rem); }
.h-md{ font-size:clamp(1.65rem, 2.8vw, 2.5rem); line-height:1; }
.h-sm{ font-size:1.3rem; line-height:1.08; }
/* The utility voice — scoreboard captions, labels, chips, metadata */
.util{
font-family:var(--display);
font-weight:600;
text-transform:uppercase;
letter-spacing:.08em;
font-size:.84rem;
line-height:1;
}
.lede{ font-size:1.18rem; color:var(--ink-2); max-width:56ch; }
p{ margin:0 0 1em; max-width:68ch; }
.muted{ color:var(--ink-2); }
/* ---------- Top utility bar ------------------------------ */
.topbar{
background:var(--navy-dp); color:#C3CEE4;
font-family:var(--display); text-transform:uppercase;
letter-spacing:.12em; font-size:.72rem; font-weight:500;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:34px; }
.topbar a{ text-decoration:none; opacity:.85; }
.topbar a:hover{ opacity:1; color:#fff; }
.topbar-social{ display:flex; align-items:center; gap:14px; }
.topbar-social svg{ width:16px; height:16px; fill:currentColor; display:block; }
/* The mark stays 16px — anything bigger fights a 34px bar — but on a
touch screen the link itself grows to a 44px target around it. The
icons were 16×16 hit areas on a phone, which is a quarter of the
recommended minimum. */
/* Both conditions, not just the first: a touch screen anywhere, and any
narrow viewport — some touch devices still report a fine pointer, and
the narrow layout is where the bar has room to grow anyway. */
@media (pointer: coarse), (max-width: 860px){
.topbar .wrap{ height:auto; padding-block:1px; }
.topbar-social{ gap:0; }
.topbar-social a{
display:inline-flex; align-items:center; justify-content:center;
min-width:44px; min-height:44px;
}
}
/* ---------- Nav ------------------------------------------ */
.nav{
position:sticky; top:0; z-index:50;
background:rgba(255,255,255,.94);
backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid var(--rule);
}
.nav .wrap{ display:flex; align-items:center; gap:22px; height:var(--nav-h); }
/* Logo only — the mark carries the name, so the wordmark beside it was
saying it twice. Given a touch more height now that it stands alone. */
.brand{ display:flex; align-items:center; text-decoration:none; margin-right:auto; }
.brand img{ height:46px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav-links a{
display:block; padding:9px 13px; text-decoration:none;
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.1em; font-size:.85rem; color:var(--ink);
border-radius:var(--r); transition:background .18s var(--ease), color .18s var(--ease);
}
.nav-links a:hover{ background:var(--paper-2); }
.nav-links a[aria-current="page"]{ color:var(--blu); box-shadow:inset 0 -3px 0 var(--blu); border-radius:0; }
.burger{
display:none; width:44px; height:44px; align-items:center; justify-content:center;
background:none; border:1px solid var(--rule); border-radius:var(--r);
cursor:pointer; color:var(--ink);
}
.burger svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; }
/* ---------- SIGNATURE: The Matchday Rail ----------------- */
/* A broadcast lower-third pinned under the nav. It is the only
element on the site allowed to be loud, and it exists to do
one job: move people to the next release. */
.rail{
position:sticky; top:var(--nav-h); z-index:45;
background:var(--paper-2); color:var(--ink);
border-bottom:1px solid var(--rule);
}
.rail .wrap{
display:flex; align-items:center; gap:20px; height:var(--rail-h);
overflow:hidden; white-space:nowrap;
}
.rail-tag{
display:flex; align-items:center; gap:8px; flex:none;
color:var(--heat-dp); padding-right:20px; border-right:1px solid var(--rule-2);
}
.rail-dot{
width:7px; height:7px; border-radius:50%; background:var(--heat); flex:none;
box-shadow:0 0 0 0 rgba(242,101,12,.7); animation:pulse 2.4s infinite;
}
@keyframes pulse{
0%{ box-shadow:0 0 0 0 rgba(242,101,12,.65); }
70%{ box-shadow:0 0 0 9px rgba(242,101,12,0); }
100%{ box-shadow:0 0 0 0 rgba(242,101,12,0); }
}
.rail-title{
flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.04em; font-size:.95rem; color:var(--ink);
}
.rail-title em{ font-style:normal; color:var(--ink-3); }
.rail-clock{ display:flex; align-items:center; gap:5px; flex:none; }
.rail-clock .seg{
min-width:34px; text-align:center; background:#fff;
border:1px solid var(--rule-2); border-radius:3px; padding:3px 5px;
font-family:var(--display); font-weight:700; font-size:.95rem; line-height:1;
font-variant-numeric:tabular-nums;
}
.rail-clock .seg i{
display:block; font-style:normal; font-size:.5rem; letter-spacing:.1em;
color:var(--ink-3); font-weight:600; margin-top:2px;
}
.rail-cta{
flex:none; text-decoration:none; background:var(--blu); color:#fff;
padding:8px 17px; border-radius:0;
clip-path:polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
font-family:var(--display); font-weight:700; text-transform:uppercase;
letter-spacing:.09em; font-size:.8rem; line-height:1;
transition:background .18s var(--ease);
}
.rail-cta:hover{ background:#4360FF; }
/* ---------- Buttons -------------------------------------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
min-height:48px; padding:12px 22px; border-radius:var(--r);
font-family:var(--display); font-weight:700; text-transform:uppercase;
letter-spacing:.09em; font-size:.95rem; line-height:1;
text-decoration:none; cursor:pointer; border:1px solid transparent;
transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn svg{ width:19px; height:19px; fill:currentColor; flex:none; }
/* Solid buttons cut on the −12° — the same angle as the chips and the
sport flashes, so every call to action reads as a broadcast graphic.
Outlined buttons stay rectangular: clipping a border cuts its corners. */
.btn-primary,.btn-dark{
clip-path:polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
border-radius:0;
}
.btn-primary{ background:var(--blu); color:#fff; position:relative; overflow:hidden; }
.btn-primary:hover{ background:var(--blu-dp); }
.btn-primary::after{
content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
transform:skewX(-18deg); transition:left .5s var(--ease);
}
.btn-primary:hover::after{ left:120%; }
@media (prefers-reduced-motion: reduce){ .btn-primary::after{ display:none; } }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--rule-2); }
.btn-ghost:hover{ background:var(--card); border-color:var(--ink); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--navy); }
.btn-sm{ min-height:40px; padding:9px 15px; font-size:.84rem; }
.btn-lg{ min-height:64px; padding:18px 34px; font-size:1.2rem; letter-spacing:.07em; }
.btn-lg svg{ width:24px; height:24px; }
/* Hero wishlist CTA: the PS + Xbox marks inside the button say where
the wishlist lives without a second line of copy. The sheen runs ONCE,
shortly after arrival, so a phone that can't hover still sees the
button is live. It used to loop every 4.6s forever, which is what a
banner ad does — an animation with no end reads as cheap no matter how
well it's drawn. After the one pass, hover takes over. */
.btn-wish svg + svg{ margin-left:-4px; }
.btn-wish::after{ animation:wish-sheen 2.2s var(--ease) 1.2s 1; }
@keyframes wish-sheen{ 0%,62%{ left:-60%; } 92%,100%{ left:120%; } }
.textlink{
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.1em; font-size:.85rem; color:var(--blu);
text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px;
transition:border-color .18s var(--ease);
}
.textlink:hover{ border-bottom-color:var(--blu); }
/* ---------- Store button row (the conversion component) --- */
/* One component, four states, used in hero / cards / hub / footer */
.stores{ display:flex; flex-wrap:wrap; gap:10px; }
.store{
display:inline-flex; align-items:center; gap:9px;
min-height:48px; padding:10px 18px; border-radius:var(--r);
background:var(--ink); color:#fff; text-decoration:none;
border:1px solid var(--ink);
transition:background .18s var(--ease), transform .18s var(--ease);
}
.store:hover{ background:var(--navy); }
/* Solid store buttons take the angle too; the soft (outlined) variant
keeps its rectangle for the same border reason as .btn-ghost. */
.store:not(.store--soft){
clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
border-radius:0;
}
.store svg{ width:20px; height:20px; fill:currentColor; flex:none; }
.store i{ font-style:normal; display:block; }
.store .s-act{
display:block;
font-family:var(--display); font-weight:700; text-transform:uppercase;
letter-spacing:.09em; font-size:.87rem; line-height:1.1;
}
.store .s-plat{
display:block;
font-family:var(--display); font-weight:500; text-transform:uppercase;
letter-spacing:.13em; font-size:.6rem; color:#A9B6D2; line-height:1.1; margin-top:2px;
}
.store--wish{ background:var(--blu); border-color:var(--blu); }
.store--wish:hover{ background:var(--blu-dp); }
.store--wish .s-plat{ color:#C3CCFF; }
.store--soft{ background:transparent; color:var(--ink); border-color:var(--rule-2); }
.store--soft:hover{ background:var(--card); border-color:var(--ink); }
.store--soft .s-plat{ color:var(--ink-3); }
/* Hero-sized store buttons — the page's primary action */
.stores--lg{ gap:14px; }
.stores--lg .store{ min-height:70px; padding:14px 30px; border-radius:5px; }
.stores--lg .store svg{ width:28px; height:28px; }
.stores--lg .store .s-act{ font-size:1.18rem; letter-spacing:.06em; }
.stores--lg .store .s-plat{ font-size:.72rem; margin-top:4px; }
.stores--lg .store--wish{ box-shadow:0 6px 20px rgba(35,64,240,.28); }
.stores--lg .store--wish:hover{ box-shadow:0 8px 26px rgba(35,64,240,.36); }
/* ---------- Status chips --------------------------------- */
.chip{
display:inline-flex; align-items:center; gap:7px;
font-family:var(--display); font-weight:700; text-transform:uppercase;
letter-spacing:.13em; font-size:.72rem; line-height:1;
padding:7px 16px; border-radius:0; white-space:nowrap;
/* clip-path rather than skew, so the shape angles but the text
stays upright and readable at 12px. */
clip-path:polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.chip--soon{ background:var(--heat-dp); color:#fff; }
.chip--live{ background:var(--live); color:#fff; }
.chip--sale{ background:var(--heat-dp); color:#fff; }
.chip--tbc{ background:var(--rule-2); color:var(--ink); }
.chip--licence{ background:var(--blu); color:#fff; }
/* ---------- Platform chips ------------------------------- */
.plats{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.plat{
display:inline-flex; align-items:center; gap:6px;
padding:5px 9px; border:1px solid var(--rule-2); border-radius:3px;
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.1em; font-size:.68rem; line-height:1; color:var(--ink-2);
background:var(--card);
}
.plat svg{ width:14px; height:14px; fill:currentColor; }
/* ---------- Section header lockup ------------------------ */
.sect{ padding:clamp(56px, 7vw, 96px) 0; }
/* Used where a section has to start early — Where to buy on a game page,
which must clear the banner and still show its heading above the fold. */
.sect--compact{ padding-block:clamp(34px, 3.4vw, 48px); }
.sect--compact .sect-head{ margin-bottom:clamp(22px, 2.4vw, 30px); }
/* ---------- The tonal arc -------------------------------- */
/* The page used to alternate white / tint / white / tint, so every band
below the hero carried identical weight and the lower half read as one
long grey zone. It now steps down instead: white → tint → deeper tint →
navy newsletter → navy footer. The dark end of the page is somewhere
you arrive at, not a wall you hit. */
.sect--tint,
.sect--tint-2{
position:relative;
/* A light source, then the tint. The band now has a direction instead
of being a flat fill — that alone is most of the difference between
a surface that looks lit and one that looks filled. The jersey
hooping is NOT in this stack: it belongs to the ::before below,
where it can be masked to the edges. */
background:
radial-gradient(125% 95% at 10% -25%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%),
var(--paper-2);
/* The oldest expensive trick there is: one pixel of light on the top
edge, so the band looks lit rather than filled. */
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.sect--tint-2{ background-color:var(--paper-3); }
.sect--white{ background:var(--card); }
/* The hooping, masked to the outer quarter of the band. Tiled edge to
edge it was wallpaper — visible behind every paragraph and reading as
screen noise. Bounded, it becomes a deliberate graphic margin with
clean paper in the middle, where the words are. Pitched wider too
(34px, was 22px): wide and quiet reads expensive, tight reads moiré. */
@supports (mask-image: linear-gradient(#000, #000)){
.sect--tint::before,
.sect--tint-2::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
background:repeating-linear-gradient(115deg, rgba(18,34,74,.032) 0 3px, transparent 3px 34px);
-webkit-mask-image:linear-gradient(90deg, #000 0, transparent 24%, transparent 76%, #000 100%);
mask-image:linear-gradient(90deg, #000 0, transparent 24%, transparent 76%, #000 100%);
}
.sect--tint > .wrap,
.sect--tint-2 > .wrap{ position:relative; z-index:1; }
}
/* ---------- The touchline -------------------------------- */
/* Every sport Tru Blu publishes is played on a marked field, so the
device that separates two sections is a sideline: a 2px rule with a
metre mark every 120px. One pseudo-element, no images, and it says
something true about the content — which a gradient never does. */
.sect--field{ position:relative; }
.sect--field::after{
content:""; position:absolute; left:0; right:0; top:0; height:11px;
pointer-events:none;
background:
linear-gradient(var(--rule-2), var(--rule-2)) 0 0 / 100% 2px no-repeat,
repeating-linear-gradient(90deg,
var(--rule-2) 0 2px, transparent 2px 120px) 0 0 / 100% 9px no-repeat;
opacity:.55;
}
.sect-head{ margin-bottom:38px; }
.sect-head .eyebrow{
display:flex; align-items:center; gap:14px; color:var(--heat-dp); margin-bottom:14px;
}
.sect-head .eyebrow::after{
content:""; flex:1; height:1px; background:var(--rule-2);
}
.sect-head p{ margin-top:14px; }
.sect-head--split{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
/* ---------- HERO ----------------------------------------- */
/* Type sits on white (left) so the blue CTA lands on light;
footage fills a tall panel that bleeds off the right edge. */
.hero{ background:var(--card); border-bottom:1px solid var(--rule); overflow:hidden; }
.hero-grid{
display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px);
align-items:center; min-height:clamp(480px, 68vh, 660px);
padding-block:clamp(40px,5vw,64px);
}
/* ---------- HERO BANNER (home page) ----------------------
Full-bleed key art with a white info bar straddling its
lower edge. The art already carries the game logo, so the
bar carries the name, the one-liner and the wishlist CTAs. */
.hbanner{ position:relative; background:var(--card); }
/* Bare variant: the key art already carries the logo, the date and the
platform lockup, so no info bar is laid over it. */
.hbanner--bare .hbanner-art{ display:block; }
.hbanner--bare .hbanner-art::after{ display:none; }
.hbanner-art{ position:relative; width:100%; overflow:hidden; background:var(--ink); }
.hbanner-art img{
/* height:auto is required — the img carries width/height attributes
(good for CLS) and without it the 750px presentational height wins
over aspect-ratio and the banner renders enormous. */
width:100%; height:auto; object-fit:cover; object-position:center;
aspect-ratio:2400/750; min-height:260px;
}
/* The info bar is inset to the container, so the art's own bottom strip
("COMING SOON", the platform logos) still shows in the side gutters.
Fade it out rather than cropping the artwork. */
.hbanner-art::after{
content:""; position:absolute; inset:auto 0 0 0; height:42%;
background:linear-gradient(180deg, rgba(12,24,54,0) 0%, rgba(12,24,54,.62) 48%, rgba(12,24,54,.97) 100%);
pointer-events:none;
}
.hbanner .wrap{ position:relative; }
.hbanner-bar{
position:relative; z-index:2; margin-top:clamp(-120px, -8vw, -56px);
background:var(--card); border:1px solid var(--rule); border-radius:var(--r);
box-shadow:var(--shadow-2);
overflow:hidden;
display:flex; align-items:center; justify-content:space-between; gap:20px 28px;
padding:14px 22px; flex-wrap:wrap;
}
.hbanner-name{
flex:1 1 420px; min-width:0;
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
/* Angled flash down the left edge — the same −12° used everywhere. */
.hbanner-bar::before{
content:""; position:absolute; left:-14px; top:-10%; width:26px; height:120%;
background:var(--heat); transform:skewX(-12deg);
}
/* With an eyebrow present the row-wrap gets ambiguous, so stack the
block explicitly instead of relying on where the flex line breaks. */
.hbanner-name:has(.hbanner-eyebrow){
flex-direction:column; align-items:flex-start; gap:9px;
}
.hbanner-eyebrow{ margin:0; color:var(--heat-dp); }
.hbanner-bar h1{
font-family:var(--display); font-weight:700; text-transform:uppercase;
font-size:clamp(1.45rem, 2.3vw, 2rem); line-height:1; letter-spacing:-.005em;
font-style:italic; margin:0; color:var(--ink);
}
/* The title is the second door into the game page — the Wishlist button
only offers the store. Underlined on hover so it reads as a link. */
.hbanner-bar h1 a{ color:inherit; text-decoration:none; }
.hbanner-bar h1 a:hover{ color:var(--blu); text-decoration:underline; text-underline-offset:4px; }
.hbanner-bar .stores{ flex:none; }
/* --- Banner variant: the homepage headline act ------------ */
.hero--banner .hero-grid{
grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
min-height:clamp(560px, 82vh, 820px);
gap:clamp(32px,4vw,72px);
}
.hero--banner .hero-media{
aspect-ratio:auto; align-self:center;
height:clamp(360px, 64vh, 660px);
/* bleed to the right edge of the viewport */
margin-right:calc((100vw - min(100vw, var(--max))) / -2 - var(--gut));
border-radius:var(--r) 0 0 var(--r);
}
/* The title-screen loop puts the player in the left third — hold him
in frame when the panel crops a 16:9 source to a portrait shape. */
.hero--banner .hero-media video,
.hero--banner .hero-media img{ object-position:28% center; }
.hero--banner h1{ margin-bottom:4px; }
.hero--banner .hero-kicker{ margin-bottom:26px; }
.hero--banner .lede{ margin:22px 0 32px; font-size:1.3rem; max-width:34ch; }
/* Countdown, hero-sized. This is the homepage's urgency device
now that the dark rail is gone from the front page. */
.hero-clock{ display:flex; align-items:flex-end; gap:10px; margin:0 0 26px; }
.hero-clock .seg{
min-width:76px; text-align:center; background:var(--paper-2);
border:1px solid var(--rule-2); border-radius:var(--r); padding:12px 8px 9px;
font-family:var(--display); font-weight:700; font-size:2.5rem; line-height:.9;
font-variant-numeric:tabular-nums; color:var(--ink);
}
.hero-clock .seg i{
display:block; font-style:normal; font-size:.68rem; letter-spacing:.1em;
color:var(--ink-3); font-weight:600; margin-top:7px;
}
.hero-clock .lbl{
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.08em; font-size:.84rem; color:var(--ink-3);
padding-bottom:14px; max-width:8ch; line-height:1.2;
}
.hero-kicker{ display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.hero h1{ margin-bottom:8px; }
.hero h1 .sub{
display:block; font-size:.42em; letter-spacing:.16em; color:var(--heat-dp);
font-weight:600; margin-top:12px;
}
.hero .lede{ margin:20px 0 26px; font-size:1.18rem; }
.hero .stores{ margin-bottom:16px; }
.hero-note{ font-size:.92rem; color:var(--ink-2); margin:0; }
.hero-media{
position:relative; border-radius:var(--r); overflow:hidden;
background:var(--ink); box-shadow:var(--shadow-2);
aspect-ratio:4/3;
}
.hero-media video,.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(190deg, rgba(12,24,54,0) 42%, rgba(12,24,54,.55) 100%);
}
.hero-caption{
position:absolute; left:0; right:0; bottom:0; z-index:2;
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:14px 16px; color:#fff;
}
.hero-caption .util{ color:#fff; opacity:.9; }
.hero-caption .util b{ color:var(--heat); font-weight:700; }
/* ---------- Platform bar --------------------------------- */
.platbar{ background:var(--paper-2); color:var(--ink); border-block:1px solid var(--rule); }
.platbar .wrap{
display:flex; align-items:center; justify-content:center; gap:clamp(20px,4vw,54px);
flex-wrap:wrap; padding-block:22px;
}
.platbar span{ display:inline-flex; align-items:center; gap:9px; color:var(--ink-2); }
.platbar svg{ width:22px; height:22px; fill:currentColor; }
.platbar .util{ letter-spacing:.1em; }
/* ---------- Game cards (fixture cards) ------------------- */
.games-grid{
display:grid; gap:20px;
grid-template-columns:repeat(auto-fill, minmax(268px,1fr));
}
/* Home page shows exactly three latest releases — hold the row. */
.games-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:900px){ .games-grid--3{ grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); } }
/* ---------- SHOWCASE TILES ------------------------------- */
/* The line-up, the way a sports broadcast would cut it: art edge to
edge, the title laid over it in oblique condensed caps, and a
skewed sport flash. Sports graphics are built on the diagonal —
jersey numbers, lower-thirds, ticker wipes — so the angle is the
one motif carried across the whole page. */
/* Every card the same size, whatever the game is called.
A grid row is only as tall as its own tallest cell, so on the catalogue page
one two-line title made its whole row 35px taller than the two rows under
it — the cards below it no longer lined up with anything. grid-auto-rows:1fr
makes every row take the height of the tallest, and a card whose title runs
to one line simply carries a little more room under it.
Dropped again below 760px: one card per row makes "the same height" mean
nothing there except wasted scroll. */
.tiles{
display:grid; gap:22px;
grid-template-columns:repeat(2, minmax(0,1fr));
grid-auto-rows:1fr;
}
.tiles--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:1000px){ .tiles--3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:760px){ .tiles{ grid-template-columns:1fr; gap:16px; grid-auto-rows:auto; } }
.tile{
position:relative; display:flex; flex-direction:column; overflow:hidden;
border-radius:var(--r); background:var(--navy-dp);
text-decoration:none; color:#fff;
box-shadow:var(--shadow-1);
transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.tile:hover{ box-shadow:var(--shadow-2); transform:translateY(-3px); }
/* Art is left alone — the key art carries the game logo, so nothing
is laid over it. The name sits on a scoreboard slab underneath. */
.tile-art{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--navy); }
.tile-art img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.tile:hover .tile-art img{ transform:scale(1.06); }
.tile-flag{ position:absolute; top:14px; left:14px; z-index:2; }
/* Titles with no key art supplied yet. */
.tile-art--tbd{
background:
repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--navy) 0%, var(--navy-dp) 100%);
}
.tile-body{
position:relative; padding:30px clamp(20px,2.2vw,26px) clamp(20px,2.2vw,26px);
background:var(--navy-dp);
display:flex; align-items:center; gap:18px;
}
.tile-text{ flex:1 1 auto; min-width:0; }
/* Arrow: the "there is more behind this" signal. It nudges on hover so
the whole tile reads as clickable, not just the title. */
.tile-go{
flex:none; width:46px; height:46px; border-radius:50%;
border:2px solid rgba(255,255,255,.28); color:#fff;
display:flex; align-items:center; justify-content:center;
transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.tile-go svg{ width:20px; height:20px; stroke:currentColor; stroke-width:2.4; fill:none; }
.tile:hover .tile-go{ background:var(--heat-dp); border-color:var(--heat-dp); transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){ .tile:hover .tile-go{ transform:none; } }
/* The sport flash straddles the join between art and slab — the way a
broadcast name-plate sits half over the picture. */
.tile-sport{
position:absolute; top:0; left:clamp(20px,2.2vw,26px); transform:translateY(-50%);
background:var(--heat-dp); color:#fff; padding:8px 20px;
clip-path:polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
font-family:var(--display); font-weight:700; text-transform:uppercase;
letter-spacing:.1em; font-size:.76rem; line-height:1; white-space:nowrap;
}
.tile h3{
margin:0; color:#fff;
font-family:var(--display); font-weight:700; font-style:italic;
text-transform:uppercase; letter-spacing:-.005em; line-height:.94;
font-size:clamp(1.55rem, 2.5vw, 2.4rem);
}
.tile-plats{
display:block; margin:11px 0 0; color:#94A2C2;
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.1em; font-size:.78rem; line-height:1.3;
}
/* The wipe: a colour bar running along the join on hover. It grows out
from wherever the pointer crossed the edge (--ox, set in site.js), not
from the left corner every time — so the bar answers the cursor
instead of playing the same canned animation. */
.tile-body::before{
content:""; position:absolute; left:0; top:0; height:4px; width:100%;
background:var(--heat);
transform:scaleX(0); transform-origin:var(--ox, 0%) 50%;
transition:transform .45s var(--ease);
}
.tile:hover .tile-body::before,
.tile:focus-within .tile-body::before{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
.tile:hover .tile-art img{ transform:none; }
.tile-body::before{ display:none; }
}
.gcard{
display:flex; flex-direction:column;
background:var(--card); border:1px solid var(--rule); border-radius:var(--r);
overflow:hidden; transition:box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.gcard:hover{ box-shadow:var(--shadow-2); border-color:var(--rule-2); }
.gcard-art{
position:relative; aspect-ratio:16/10; background:var(--paper-2);
overflow:hidden; display:block;
}
.gcard-art img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gcard:hover .gcard-art img{ transform:scale(1.035); }
.gcard-flag{ position:absolute; top:12px; left:12px; z-index:2; }
/* Titles whose key art hasn't been supplied yet — a deliberate
typographic panel rather than a broken image. */
.gcard-art--tbd{
display:flex; align-items:center; justify-content:center; text-align:center;
background:
repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 13px),
linear-gradient(150deg, var(--navy) 0%, var(--navy-dp) 100%);
}
.gcard-art--tbd .tbd-title{
font-family:var(--display); font-weight:700; text-transform:uppercase;
font-size:1.55rem; line-height:1.02; letter-spacing:.02em; color:#fff;
padding:0 20px; text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.gcard-body{ padding:18px; display:flex; flex-direction:column; gap:12px; flex:1; }
.gcard-sport{ color:var(--ink-3); }
.gcard h3{ margin:0; }
.gcard h3 a{ text-decoration:none; }
.gcard h3 a:hover{ color:var(--blu); }
.gcard-blurb{ font-size:.95rem; color:var(--ink-2); margin:0; flex:1; }
.gcard-price{
display:flex; align-items:baseline; gap:9px;
font-family:var(--display); line-height:1;
}
.gcard-price .now{ font-size:1.5rem; font-weight:700; }
.gcard-price .was{ font-size:1rem; color:var(--ink-3); text-decoration:line-through; }
/* Tile variant: art, title and the platforms it runs on. The tile
links to the game page, which is where the store buttons live. */
.gcard--tile .gcard-body{ gap:7px; padding:16px 18px 18px; }
.gcard--tile .gcard-art{ aspect-ratio:16/9; }
.gcard-plats{
margin:3px 0 0; color:var(--ink-3); font-weight:500;
letter-spacing:.07em; font-size:.74rem; line-height:1.35;
}
/* A centred button closing a section — the section's own bottom
padding supplies the space below it. */
/* max-width:none overrides the global 68ch measure on
, which would
otherwise centre the button inside a narrow box rather than the page. */
.sect-cta{ margin:32px 0 0; text-align:center; max-width:none; }
.sect:has(> .wrap > .sect-cta){ padding-bottom:clamp(40px, 4.5vw, 64px); }
.gcard-foot{ border-top:1px solid var(--rule); padding:14px 18px; }
.gcard-foot .stores{ gap:8px; }
.gcard-foot .store{ min-height:42px; padding:8px 13px; flex:1; justify-content:center; }
.gcard-foot .store .s-act{ font-size:.8rem; }
/* ---------- Feature blocks (game modes) ------------------ */
.fblock{
display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px);
align-items:center; padding-block:clamp(32px,4vw,52px);
border-bottom:1px solid var(--rule);
}
.fblock:last-child{ border-bottom:0; }
.fblock:nth-child(even) .fblock-media{ order:-1; }
.fblock-media{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-1); background:var(--paper-2); }
.fblock-media img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.fblock-num{
font-family:var(--display); font-weight:700; font-size:.8rem; letter-spacing:.16em;
color:var(--heat-dp); margin-bottom:10px; display:block;
}
.fblock h3{ margin:0 0 12px; }
.fblock p{ color:var(--ink-2); margin-bottom:0; }
/* ---------- Pillars (why our games play different) ------- */
.pillars{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.pillar{
background:var(--card); border:1px solid var(--rule); border-radius:var(--r);
padding:26px 24px; display:flex; flex-direction:column; gap:12px;
}
.pillar-ic{
width:46px; height:46px; border-radius:var(--r);
background:var(--blu-soft); color:var(--blu-dp);
display:flex; align-items:center; justify-content:center;
}
.pillar-ic svg{ width:24px; height:24px; fill:currentColor; }
.pillar h3{ margin:0; }
.pillar p{ margin:0; color:var(--ink-2); font-size:.97rem; }
.pillar blockquote{
margin:4px 0 0; padding-left:14px; border-left:3px solid var(--heat);
font-size:.93rem; color:var(--ink); font-style:italic;
}
.pillar blockquote cite{
display:block; font-style:normal; margin-top:6px;
font-family:var(--display); text-transform:uppercase; letter-spacing:.12em;
font-size:.68rem; color:var(--ink-3);
}
/* ---------- Heritage / publishing history ---------------- */
/* Light now. The box art is the loud thing here — the shelf of
covers IS the argument, so the surface around it stays quiet. */
/* Same treatment as the second tint step on the home page, so the About
page sits at the same point on the tonal arc. The border-block is gone:
a tone change this size is its own seam, and a hairline on top of it
just draws attention to the join. */
.heritage{
position:relative; color:var(--ink);
background:
radial-gradient(125% 95% at 10% -25%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%),
var(--paper-3);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.heritage-grid{
display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center;
}
.timeline{ display:flex; flex-wrap:wrap; gap:0; margin:26px 0 0; padding:0; list-style:none; }
.timeline li{
flex:1 1 150px; padding:16px 18px 16px 0; border-top:2px solid var(--rule-2);
margin-right:18px;
}
.timeline b{
display:block; font-family:var(--display); font-weight:700; font-size:1.6rem;
line-height:1; color:var(--heat-dp); margin-bottom:6px;
}
.timeline span{ font-size:.94rem; color:var(--ink-2); }
.heritage-stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hstat{
background:var(--card); border:1px solid var(--rule);
border-radius:var(--r); padding:22px 20px;
}
.hstat b{
display:block; font-family:var(--display); font-weight:700;
font-size:clamp(2rem,4vw,2.9rem); line-height:1; color:var(--ink); margin-bottom:8px;
}
.hstat span{ color:var(--ink-2); }
/* ---------- The shelf: 25 years of box art --------------- */
/* Six to a row — auto-fill packed seven or eight in at desktop widths and
the wall of covers stopped reading as individual games. */
.shelf{
display:grid; gap:18px;
grid-template-columns:repeat(6, minmax(0, 1fr));
margin-top:34px;
}
@media (max-width:1040px){ .shelf{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:760px){ .shelf{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:520px){ .shelf{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.shelf figure{
margin:0; border-radius:var(--r); overflow:hidden; background:var(--card);
border:1px solid var(--rule); box-shadow:var(--shadow-1);
transition:transform .25s var(--ease), box-shadow .25s var(--ease);
display:flex; flex-direction:column;
}
.shelf figure:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); }
.shelf img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.shelf figure[hidden]{ display:none; }
/* The title has to exist as real text, not just pixels inside the
cover — that is the whole point of the section for search. */
.shelf figcaption{ padding:11px 12px 13px; border-top:1px solid var(--rule); }
.shelf figcaption b{
display:block; font-family:var(--display); font-weight:700; text-transform:uppercase;
font-size:.95rem; line-height:1.08; color:var(--ink);
}
.shelf-more{ display:flex; justify-content:center; margin-top:30px; }
.shelf-tabs{ display:flex; gap:9px; flex-wrap:wrap; margin-top:26px; }
/* ---------- News cards ----------------------------------- */
/* Fixed at three so six stories fill two whole rows — auto-fit gave
four across and left a ragged last row. */
.news-grid{ display:grid; gap:20px; grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:900px){ .news-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .news-grid{ grid-template-columns:1fr; } }
.ncard{
background:var(--card); border:1px solid var(--rule); border-radius:var(--r);
overflow:hidden; display:flex; flex-direction:column;
transition:box-shadow .22s var(--ease);
}
.ncard:hover{ box-shadow:var(--shadow-2); }
.ncard img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
/* A post published without a Featured image: hold the card's shape with an
empty tile rather than let the browser draw a broken-image icon. */
.ncard-noart{ width:100%; aspect-ratio:16/9; background:var(--paper-3); }
.ncard-body{ position:relative; padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
/* The wipe on the join between image and copy — same move as the game
tiles, so the newsroom belongs to the same broadcast. */
.ncard-body::before{
content:""; position:absolute; left:0; top:0; height:3px; width:100%;
background:var(--heat);
transform:scaleX(0); transform-origin:var(--ox, 0%) 50%;
transition:transform .45s var(--ease);
}
.ncard:hover .ncard-body::before,
.ncard:focus-within .ncard-body::before{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){ .ncard-body::before{ display:none; } }
/* Date left, name-plate hard right. */
.ncard-meta{
display:flex; gap:12px; align-items:center; justify-content:space-between;
min-height:25px; color:var(--ink-3);
}
.ncard-meta time,.ncard-meta span{ white-space:nowrap; }
/* Story category set as a broadcast name-plate, not plain text. */
.ncard-meta span:last-child{
background:var(--navy-dp); color:#fff; padding:5px 11px;
clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
font-weight:700; letter-spacing:.11em; font-size:.66rem; line-height:1.4;
}
.ncard h3{ margin:0; font-size:1.18rem; }
.ncard h3 a{ text-decoration:none; }
.ncard h3 a:hover{ color:var(--blu); }
.ncard p{ margin:0; font-size:.95rem; color:var(--ink-2); flex:1; }
/* The rule above is a type selector, so it also catches the date line and
grew it to soak up the leftover space in short cards — which pushed every
headline to a different height. Needs to out-specify it, not just follow
it: titles must start on one line across the row. */
.ncard p.ncard-meta{ flex:0 0 auto; }
.ncard[hidden]{ display:none; }
.news-more{ display:flex; justify-content:center; margin-top:30px; }
/* ---------- Newsletter ----------------------------------- */
/* Grey, with the jersey hooping running right across it — owner's call.
The hooping keeps the refined 34px pitch used by the other tint bands
so the whole page reads as one kit, and it runs edge to edge here
rather than being masked to the margins: this block is a single lockup
of headline and form, not a column of body copy the stripes could sit
behind. */
.subscribe{
position:relative; overflow:hidden; color:var(--ink);
border-top:1px solid var(--rule);
background:
repeating-linear-gradient(115deg, rgba(18,34,74,.028) 0 3px, transparent 3px 34px),
var(--paper-2);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.subscribe::after{
content:""; position:absolute; left:0; top:0; bottom:0; width:10px;
background:var(--heat); transform:skewX(-12deg) translateX(-6px);
}
.subscribe .h-md{
font-size:clamp(2rem, 3.6vw, 3.1rem); font-style:italic; line-height:.95;
}
.subscribe .wrap{
position:relative; z-index:2;
display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,56px);
align-items:center; padding-block:clamp(44px,5vw,68px);
}
.subscribe .h-md{ color:var(--ink); margin-bottom:12px; }
.subscribe p{ color:var(--ink-2); margin:0; }
.subscribe .eyebrow{ color:var(--heat-dp); margin-bottom:14px; }
.sub-form{ display:flex; gap:10px; flex-wrap:wrap; }
.sub-form label{
position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.sub-form input{
flex:1 1 240px; min-height:52px; padding:12px 16px;
background:#fff; border:1px solid var(--rule-2);
border-radius:var(--r); color:var(--ink); font-family:var(--body); font-size:1rem;
transition:border-color .2s var(--ease);
}
.sub-form input::placeholder{ color:var(--ink-3); }
.sub-form input:hover{ border-color:var(--ink-2); }
.sub-form input:focus{ border-color:var(--blu); outline:none; box-shadow:0 0 0 3px var(--blu-soft); }
.sub-form .btn{ flex:none; }
/* 4.9:1 on the tint with the corrected --ink-3 — it reads as fine print
without falling under AA, which the old #6B7793 did. */
.sub-fine{ font-size:.9rem; color:var(--ink-3); margin:14px 0 0; }
/* ---------- Gallery + lightbox --------------------------- */
/* Four across so eight screenshots fill two whole rows — auto-fill gave
five and left a ragged last row. */
.gallery{ display:grid; gap:14px; grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:900px){ .gallery{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:600px){ .gallery{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.gallery button{
padding:0; border:1px solid var(--rule); border-radius:var(--r); overflow:hidden;
background:var(--paper-2); cursor:pointer; display:block; position:relative;
transition:border-color .18s var(--ease);
}
.gallery button:hover{ border-color:var(--ink); }
.gallery img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.gallery button::after{
content:""; position:absolute; inset:0; background:rgba(12,24,54,0);
transition:background .18s var(--ease);
}
.gallery button:hover::after{ background:rgba(12,24,54,.12); }
.lightbox{
position:fixed; inset:0; z-index:90; background:rgba(12,8,24,.94);
display:none; align-items:center; justify-content:center; padding:24px;
}
.lightbox[open], .lightbox.is-open{ display:flex; }
.lightbox img{ max-width:min(1200px,94vw); max-height:86vh; object-fit:contain; border-radius:var(--r); }
.lightbox-close{
position:absolute; top:18px; right:18px; width:48px; height:48px;
background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
border-radius:var(--r); color:#fff; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.lightbox-close svg{ width:22px; height:22px; stroke:currentColor; stroke-width:2; fill:none; }
.lightbox-nav{
position:absolute; top:50%; transform:translateY(-50%);
width:52px; height:52px; background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.25); border-radius:var(--r);
color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lightbox-nav svg{ width:24px; height:24px; stroke:currentColor; stroke-width:2; fill:none; }
.lightbox-prev{ left:18px; } .lightbox-next{ right:18px; }
/* ---------- Metadata / spec table ------------------------ */
.spec{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:0; border-top:2px solid var(--ink); }
.spec div{ padding:16px 18px 16px 0; border-bottom:1px solid var(--rule); }
.spec dt{ color:var(--ink-3); margin-bottom:6px; }
.spec dd{ margin:0; font-family:var(--display); font-weight:600; font-size:1.12rem; text-transform:uppercase; letter-spacing:.02em; }
.notice{
margin-top:26px; padding:16px 18px; background:var(--paper-2);
border-left:3px solid var(--rule-2); border-radius:0 var(--r) var(--r) 0;
font-size:.92rem; color:var(--ink-2);
}
.notice p{ margin:0; max-width:none; }
/* ---------- Sport band (interior page header) ------------
A navy field with jersey hooping running through it, a leaning
headline, and the key facts set as scoreboard tiles. Gives the
text-only pages the same energy as the game tiles. */
.band{
position:relative; overflow:hidden;
background:
repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 3px, transparent 3px 22px),
linear-gradient(140deg, var(--navy) 0%, var(--navy-dp) 70%);
color:#fff; padding-block:clamp(46px,6vw,84px);
}
/* A lighter wedge, not an orange one — warm over navy muddies to brown.
White at low alpha reads as a clean diagonal division. */
.band::after{
content:""; position:absolute; right:-8%; top:-30%; width:46%; height:180%;
background:rgba(255,255,255,.05); transform:skewX(-12deg);
border-left:2px solid rgba(242,101,12,.55);
pointer-events:none;
}
.band .wrap{ position:relative; z-index:2; }
.band .eyebrow{ display:flex; align-items:center; gap:14px; color:var(--heat); margin-bottom:16px; }
.band .eyebrow::before{
content:""; width:14px; height:14px; flex:none;
background:var(--heat); transform:skewX(-12deg);
}
.band h1,.band h2{
font-family:var(--display); font-weight:700; font-style:italic;
text-transform:uppercase; letter-spacing:-.005em; line-height:.93;
font-size:clamp(2.4rem, 5.4vw, 4.4rem); margin:0; color:#fff;
}
.band p{ color:#A9B6D2; margin:18px 0 0; font-size:1.14rem; max-width:52ch; }
/* Listing pages carry a shorter band so the first story's headline is
above the fold on a laptop — the full-height band pushed it off. */
.band--tight{ padding-block:clamp(32px,3.8vw,52px); }
.band--tight h1,.band--tight h2{ font-size:clamp(1.9rem, 3.9vw, 2.9rem); }
/* Scoreboard tiles — the facts, set like a match panel. */
.scoreboard{
display:grid; gap:14px; margin-top:clamp(28px,3.4vw,44px);
grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
}
.scoreboard div{
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
border-left:4px solid var(--heat); padding:18px 20px;
}
.scoreboard dt{
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.12em; font-size:.72rem; color:#8494B4; margin-bottom:8px;
}
.scoreboard dd{
margin:0; font-family:var(--display); font-weight:700; font-style:italic;
text-transform:uppercase; font-size:1.35rem; line-height:1.05; color:#fff;
}
.scoreboard dd a{ text-decoration:none; }
.scoreboard dd a:hover{ color:var(--heat); }
.scoreboard .plain dd{ font-style:normal; text-transform:none; font-size:1.15rem; }
/* Square brand graphic — hold the 1:1 and cap it so it never towers
over the column beside it. */
.brandshot{
width:100%; max-width:460px; aspect-ratio:1/1; object-fit:cover;
border-radius:var(--r); box-shadow:var(--shadow-2);
margin-inline:auto;
}
/* ---------- Page header (interior pages) ----------------- */
.phead{ background:var(--card); border-bottom:1px solid var(--rule); padding-block:clamp(38px,5vw,64px); }
.phead .eyebrow{ display:flex; align-items:center; gap:14px; color:var(--heat-dp); margin-bottom:14px; }
.phead .eyebrow::after{ content:""; flex:1; height:1px; background:var(--rule-2); max-width:170px; }
.phead .lede{ margin-top:16px; }
/* ---------- Filters -------------------------------------- */
.filters{ display:flex; gap:26px; flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid var(--rule); margin-bottom:30px; }
.fgroup{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.fgroup > .util{ color:var(--ink-3); margin-right:3px; }
/* Filtering is the one thing a visitor actually does on this page, so
the state change is worth animating: the fill takes the chip from the
left on --ease-snap instead of flicking on. */
.fbtn{
position:relative; z-index:0; overflow:hidden;
min-height:38px; padding:8px 14px; border:1px solid var(--rule-2); background:var(--card);
border-radius:var(--r); cursor:pointer; color:var(--ink);
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.09em; font-size:.8rem; line-height:1;
transition:color .2s var(--ease), border-color .18s var(--ease);
}
.fbtn::before{
content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
transform:scaleX(0); transform-origin:left center;
transition:transform .24s var(--ease-snap);
}
.fbtn:hover{ border-color:var(--ink); }
.fbtn[aria-pressed="true"]{ color:#fff; border-color:var(--ink); }
.fbtn[aria-pressed="true"]::before{ transform:scaleX(1); }
.fcount{ color:var(--ink-3); margin-bottom:22px; }
.empty{
background:var(--card); border:1px solid var(--rule); border-radius:var(--r);
padding:44px 32px; text-align:center;
}
.empty .h-sm{ margin:0 0 10px; }
.empty p{ margin:0 auto 18px; color:var(--ink-2); max-width:46ch; }
/* ---------- Press kit rows ------------------------------- */
.krow{
display:grid; grid-template-columns:118px 1fr auto; gap:22px; align-items:center;
padding:20px 0; border-bottom:1px solid var(--rule);
}
.krow img{ width:118px; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r); border:1px solid var(--rule); }
.krow h3{ margin:0 0 6px; }
.krow p{ margin:0; font-size:.95rem; color:var(--ink-2); }
/* ---------- Contact routing ------------------------------ */
.routes{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.route{
background:var(--card); border:1px solid var(--rule); border-radius:var(--r);
padding:26px 24px; display:flex; flex-direction:column; gap:12px;
}
.route h3{ margin:0; }
.route p{ margin:0; font-size:.96rem; color:var(--ink-2); flex:1; }
.route a.textlink{ align-self:flex-start; }
.form-grid{ display:grid; gap:18px; grid-template-columns:1fr 1fr; max-width:720px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1/-1; }
.field label{ font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; color:var(--ink-2); }
.field input,.field select,.field textarea{
min-height:50px; padding:12px 14px; border:1px solid var(--rule-2); border-radius:var(--r);
background:var(--card); font-family:var(--body); font-size:1rem; color:var(--ink);
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--blu); outline:none; box-shadow:0 0 0 3px var(--blu-soft); }
/* The form is whatever the site's form plugin renders, so the field styling
above is restated here by element rather than by class — that much holds
no matter which plugin draws it.
The three class rules are the parts element selectors can't reach: the
field wrapper, the inline validation tip and the submit response. Both
plugins are named because dev and live don't have the same one — dev has
FormLayer (Softaculous, shortcode [formlayer id="N"]) and trublu.com.au
has Contact Form 7. A selector matching nothing costs nothing; a missing
one leaves an unstyled error message sitting in the middle of the page. */
.tb-form .wpcf7-form-control-wrap,
.tb-form .formlayer-field-wrap{ display:block; }
.tb-form input[type=text],.tb-form input[type=email],.tb-form input[type=tel],
.tb-form select,.tb-form textarea{
width:100%; min-height:50px; padding:12px 14px; border:1px solid var(--rule-2); border-radius:var(--r);
background:var(--card); font-family:var(--body); font-size:1rem; color:var(--ink);
}
.tb-form textarea{ min-height:140px; resize:vertical; }
.tb-form input:focus,.tb-form select:focus,.tb-form textarea:focus{
border-color:var(--blu); outline:none; box-shadow:0 0 0 3px var(--blu-soft);
}
.tb-form .wpcf7-not-valid-tip,
.tb-form .formlayer-error-message{ color:var(--heat-dp); font-size:.86rem; margin-top:6px; }
.tb-form .wpcf7-response-output,
.tb-form .formlayer-success-message{
margin:18px 0 0; padding:12px 14px; border:1px solid var(--rule-2); border-radius:var(--r); font-size:.95rem;
}
/* The submit button is the one control a form plugin ships fully dressed:
FormLayer draws it Arial, 10px-rounded and in its own violet (#5525D6),
which is the only thing on the site that is neither Tru Blu blue nor the
heat orange. Measured on dev 05.08.2026 with the form finally on the page.
Restated here as .btn-primary rather than @extend-ed, because the button
belongs to the plugin's markup and cannot be given our class. */
.tb-form .formlayer-submit-btn,
.tb-form .wpcf7-submit{
display:inline-flex; align-items:center; justify-content:center;
min-height:48px; padding:12px 26px; border:1px solid transparent; border-radius:0;
clip-path:polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
background:var(--blu); color:#fff;
font-family:var(--display); font-weight:700; text-transform:uppercase;
letter-spacing:.09em; font-size:.95rem; line-height:1; cursor:pointer;
transition:background .18s var(--ease);
}
.tb-form .formlayer-submit-btn:hover,
.tb-form .wpcf7-submit:hover{ background:var(--blu-dp); }
/* Nothing here for the per-field captions ("FIRST NAME" under a name box).
.formlayer-sub-field measures 18px in body ink and looks like the thing to
fix — but it is the flex wrapper holding the input, so styling it shrinks
the field itself. The caption is .formlayer-sub-label, and the plugin
already draws it 11px, uppercase, #64748b: a caption that reads as one. */
/* An editor-only note; a visitor never reaches this branch. */
.tb-note{ margin-top:18px; padding:12px 14px; border-left:3px solid var(--heat); background:var(--paper-2); font-size:.92rem; }
/* ---------- Footer --------------------------------------- */
.foot{ background:var(--navy-dp); color:#C3CEE4; padding-block:clamp(44px,5vw,64px) 0; }
.foot-grid{ display:grid; gap:34px; grid-template-columns:1.4fr 1fr 1fr 1.15fr; }
.foot h4{ font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; color:#fff; margin:0 0 16px; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot a{ text-decoration:none; color:#C3CEE4; font-size:.96rem; transition:color .18s var(--ease); }
.foot a:hover{ color:#fff; }
.foot img{ height:52px; width:auto; margin-bottom:16px; }
.foot p{ font-size:.94rem; color:#94A2C2; }
/* Address / phone / hours sit in the same column rhythm as the link lists,
but they are facts rather than links, so they get the muted body colour. */
.foot-contact{ gap:12px; }
.foot-contact span{ color:#94A2C2; font-size:.96rem; display:block; }
.foot-contact li:last-child span{
font-family:var(--display); text-transform:uppercase;
letter-spacing:.09em; font-size:.76rem; color:#8494B4;
}
.foot-social{ display:flex; gap:10px; margin-top:18px; }
.foot-social a{
width:42px; height:42px; border-radius:var(--r);
background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
display:flex; align-items:center; justify-content:center; color:#fff;
transition:background .18s var(--ease);
}
.foot-social a:hover{ background:var(--blu); }
.foot-social svg{ width:19px; height:19px; fill:currentColor; }
.foot-base{
margin-top:44px; border-top:1px solid rgba(255,255,255,.14); padding-block:22px;
display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
font-size:.86rem; color:#8494B4;
}
.foot-base p{ margin:0; font-size:.86rem; max-width:64ch; }
/* ============================================================
MOTION
Everything that moves on scroll lives here. It used to be one
inline style in site.js — opacity 0→1 plus translateY(14px),
the same half-second ease-out on seven different kinds of
element, no stagger. That is the house style of every drop-in
scroll library, and it is the single loudest "templated" tell
on an otherwise hand-built page. Three behaviours replace it,
each matched to what the element actually is.
JS only ever adds .rv-* classes; if it never runs, nothing is
hidden. See initReveal() in site.js.
============================================================ */
/* 1. Headings wipe. The leading edge is cut on the same −12° as the
flashes, chips and buttons, so the reveal is the page's own shape in
motion rather than a slide borrowed from somewhere else. */
.rv-head :is(h1,h2,h3){
clip-path:polygon(0 0, 0 0, -14% 100%, 0 100%);
}
.rv-head.is-in :is(h1,h2,h3){
clip-path:polygon(0 0, 114% 0, 100% 100%, 0 100%);
transition:clip-path .66s var(--ease) 60ms;
}
/* The eyebrow's hairline draws itself out to the right — the section
ruling itself off, which is what a programme page does. */
.rv-head .eyebrow::after{ transform:scaleX(0); transform-origin:left center; }
.rv-head.is-in .eyebrow::after{
transform:scaleX(1); transition:transform .7s var(--ease) .18s;
}
.rv-head :is(p,.btn,.textlink,.sect-cta){ opacity:0; }
.rv-head.is-in :is(p,.btn,.textlink,.sect-cta){
opacity:1; transition:opacity .45s var(--ease) .26s;
}
/* 2. Cards settle. The fade finishes early and the rise finishes late,
so the last thing the eye catches is the card coming to rest — an
object landing on paper, not a layer fading up. --rv-d staggers by
column index (set in JS), which makes a row land like a dealt hand. */
.rv-card{ opacity:0; transform:translate3d(0,10px,0) scale(.988); }
.rv-card.is-in{
opacity:1; transform:none;
transition:opacity .34s linear var(--rv-d, 0ms),
transform .6s var(--ease) var(--rv-d, 0ms);
}
/* Where a card has a resting shadow, resolve it too: the shadow arriving
a beat after the card is what sells the weight. */
.shelf figure.rv-card{ box-shadow:0 0 0 rgba(12,24,54,0); }
.shelf figure.rv-card.is-in{
box-shadow:var(--shadow-1);
transition:opacity .34s linear var(--rv-d, 0ms),
transform .6s var(--ease) var(--rv-d, 0ms),
box-shadow .7s var(--ease) calc(var(--rv-d, 0ms) + 120ms);
}
/* 3. The shelf tilts. Fifty pieces of box art is the strongest argument
on the site and it was completely inert. Tracking the pointer with a
≤5° tilt and a shadow that leans with it makes the covers read as
physical objects on a shelf, which is precisely what the section is
claiming. Angles come from JS as --rx/--ry. */
.shelf{ perspective:1100px; }
.shelf figure{ transform-style:preserve-3d; }
.shelf figure.is-tilt{
transform:
perspective(1100px)
rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
translateY(-5px) scale(1.02);
box-shadow:var(--shadow-2);
transition:transform .12s linear, box-shadow .25s var(--ease);
z-index:2;
}
.shelf figure.is-tilt img{ transform:translateZ(18px); }
.shelf figure img{ transition:transform .25s var(--ease); }
/* Keyboard users get the designed state, not just an outline box: a card
reached by Tab does what a card under the pointer does. */
.tile:focus-within{ box-shadow:var(--shadow-2); transform:translateY(-3px); }
.gcard:focus-within{ box-shadow:var(--shadow-2); border-color:var(--rule-2); }
.ncard:focus-within{ box-shadow:var(--shadow-2); }
.shelf figure:focus-within{ transform:translateY(-5px); box-shadow:var(--shadow-2); }
@media (prefers-reduced-motion: reduce){
.rv-head :is(h1,h2,h3){ clip-path:none; }
.rv-head :is(p,.btn,.textlink,.sect-cta),
.rv-card{ opacity:1; transform:none; }
.rv-head .eyebrow::after{ transform:none; }
.shelf figure.is-tilt{ transform:none; box-shadow:var(--shadow-2); }
.shelf figure.is-tilt img{ transform:none; }
}
/* ---------- Responsive ----------------------------------- */
@media (max-width:1000px){
.hero-grid{ grid-template-columns:1fr; min-height:0; gap:32px; }
.hero-media{ aspect-ratio:16/9; }
/* .hero--banner sets its own columns and a negative bleed margin, and
out-specifies the rules above — it has to be unwound explicitly or
the video panel lands on top of the headline. */
.hero--banner .hero-grid{ grid-template-columns:1fr; min-height:0; gap:28px; }
.hero--banner .hero-media{
margin-right:0; height:auto; aspect-ratio:16/10;
border-radius:var(--r); align-self:auto;
}
.hero--banner .lede{ max-width:none; font-size:1.16rem; }
.hero--banner .hero-kicker{ margin-bottom:18px; }
/* Banner: the art is 3.2:1. Cropping it to a portrait shape on a
tablet throws away ~70% of the frame, so go only as tall as 16:9
and hold the game logo (centred around 45%) in view. Below 700px
a purpose-made square crop takes over — see the phone block. */
.hbanner-art img{ aspect-ratio:16/9; object-position:45% center; min-height:200px; }
.hbanner-bar{ margin-top:0; border-radius:0; border-inline:0; box-shadow:none; padding:22px var(--gut); }
/* Skewing a tall stacked bar throws the flash right across the
headline — keep it a straight edge marker on small screens. */
.hbanner-bar::before{ left:0; top:0; height:100%; width:6px; transform:none; }
.subscribe::after{ width:6px; transform:none; }
.hbanner .wrap{ padding-inline:0; }
.hbanner-bar .stores{ width:100%; }
.hbanner-bar .stores .store{ flex:1 1 100%; justify-content:center; }
.heritage-grid{ grid-template-columns:1fr; }
.subscribe .wrap{ grid-template-columns:1fr; }
.fblock{ grid-template-columns:1fr; gap:24px; }
.fblock:nth-child(even) .fblock-media{ order:0; }
.foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:700px){
/* Phones get the purpose-made 1:1 crop (hero-banner-mobile.jpg,
served via ) — full art height, logo centred, nothing
squashed. Kill the tablet 16:9 override so the square breathes. */
.hbanner-art img{ aspect-ratio:1/1; object-position:center; min-height:0; }
}
@media (max-width:860px){
:root{ --gut:18px; --nav-h:60px; }
.nav-links{
position:fixed; inset:calc(var(--nav-h) + 34px) 0 auto 0;
background:var(--card); border-bottom:1px solid var(--rule);
flex-direction:column; align-items:stretch; gap:0; padding:8px;
box-shadow:var(--shadow-2); display:none;
}
.nav-links.is-open{ display:flex; }
.nav-links a{ padding:14px 16px; font-size:1rem; }
.nav-links a[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--blu); }
.burger{ display:flex; }
.rail{ position:static; }
.rail .wrap{ height:auto; padding-block:10px; flex-wrap:wrap; gap:10px 14px; }
.rail-tag{ border-right:0; padding-right:0; }
.rail-title{ flex:1 1 100%; white-space:normal; font-size:.84rem; }
.rail-title em{ display:none; } /* platform + date already sit in the hero */
.rail-cta{ flex:1 1 auto; text-align:center; }
.krow{ grid-template-columns:82px 1fr; }
.krow > .btn{ grid-column:2; justify-self:start; }
.krow img{ width:82px; }
.form-grid{ grid-template-columns:1fr; }
.heritage-stats{ grid-template-columns:1fr 1fr; }
.topbar .wrap{ justify-content:center; }
.topbar-phone{ display:none; }
}
@media (max-width:560px){
body{ font-size:16px; }
/* The clamp's vw term collapses on a phone, so the game name landed at
23px — the smallest headline on a page whose whole argument is big
confident type. Give the floor a phone-specific value instead. */
.hbanner-bar h1{ font-size:1.72rem; }
.foot-grid{ grid-template-columns:1fr; }
.gallery{ grid-template-columns:1fr 1fr; }
.stores{ flex-direction:column; align-items:stretch; }
.store{ justify-content:center; }
.gcard-foot .store{ flex:1 1 100%; }
.timeline li{ flex:1 1 100%; margin-right:0; }
/* The diagonal wedge is a wide-screen flourish; on a phone it just
slices through the scoreboard tiles. */
.band::after{ display:none; }
/* Only the day count earns its space on a phone. */
.rail-clock .seg:nth-child(n+3){ display:none; }
/* Wrap first — the label claims a full row, so without wrapping it
squeezes the three segments down to nothing. */
.hero-clock{ flex-wrap:wrap; gap:8px; }
.hero-clock .seg{ min-width:0; flex:1 1 0; font-size:2.1rem; padding:11px 4px 8px; }
.hero-clock .lbl{ flex:1 1 100%; padding-bottom:0; max-width:none; }
.stores--lg .store{ min-height:62px; padding:12px 20px; }
.stores--lg .store .s-act{ font-size:1.05rem; }
.lightbox-nav{ width:44px; height:44px; }
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important;
}
}
/* ============================================================
PRODUCT PAGE
Full-width video band, then one job: get people to a store.
Tru Blu does not sell here — the platforms and the retailers do.
============================================================ */
/* ---------- Hero: wide, not tall ------------------------- */
/* Art full-bleed at a fixed 2.4:1, information on a scoreboard slab
underneath. Nothing is laid over the artwork, so a key art that
already carries the game logo works as designed. */
.phero{ position:relative; background:var(--navy-dp); }
.phero-media{ position:relative; overflow:hidden; }
.phero-media img{
width:100%; height:auto; display:block;
aspect-ratio:2880/1200; object-fit:cover; object-position:center;
/* Sized against the one thing that must survive: "Where to buy — Digital
or physical" has to be on the first screen. That heading sits about
185px below the banner once Where-to-buy is on its compact padding, so
the cap is ~62vh, not the height the art would like to be. Raise it and
the heading falls off a 720px laptop. */
max-height:min(46vw, 62vh, 700px);
}
.phero-media::after{
content:""; position:absolute; inset:auto 0 0 0; height:22%;
background:linear-gradient(180deg, rgba(12,24,54,0) 0%, rgba(12,24,54,.5) 100%);
pointer-events:none;
}
/* One CTA, centred over the lower third of the key art. Everything the
slab used to carry — name, blurb, platforms — now lives in "The game"
and "Additional information" instead of being said twice. */
/* CTA overlaid, centred in the lower third of the key art. The artwork
is designed with this strip left clear — see ASSET-SIZES.md §2b. */
.phero-cta{
position:absolute; left:0; right:0; bottom:clamp(24px,3.4vw,46px); z-index:3;
display:flex; justify-content:center; padding-inline:var(--gut);
}
.phero .wrap{ position:relative; z-index:2; }
.phero-kicker{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.phero h1{
font-family:var(--display); font-weight:700; font-style:italic;
text-transform:uppercase; letter-spacing:-.005em; line-height:.92;
font-size:clamp(2rem, 4.2vw, 3.6rem); margin:0; color:#fff; max-width:22ch;
}
.phero .lede{ color:#A9B6D2; margin:16px 0 0; max-width:62ch; font-size:1.1rem; }
.phero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
/* Platform icon row — the "what can I play it on" glance */
.platrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; }
.platrow .util{ color:#8494B4; margin-right:2px; }
.platrow span.pill{
display:inline-flex; align-items:center; gap:8px;
padding:9px 15px; background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.2); color:#fff;
clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.09em; font-size:.78rem; line-height:1;
}
.platrow svg{ width:18px; height:18px; fill:currentColor; }
/* ---------- Where to buy --------------------------------- */
/* Stacked, not side by side. A title with two digital stores and five
physical retailers would leave one column half-empty next to the
other; stacking lets each block use the full width and wrap on its
own terms. */
.buy-grid{ display:flex; flex-direction:column; gap:clamp(30px,3.4vw,46px); }
.buy-col{ min-width:0; }
.buy-kind{
display:flex; align-items:center; gap:12px; margin:0 0 18px;
font-family:var(--display); font-weight:700; font-style:italic;
text-transform:uppercase; letter-spacing:.02em; font-size:1.5rem; color:var(--ink);
}
.buy-kind::before{
content:""; width:14px; height:22px; flex:none;
background:var(--heat-dp); transform:skewX(-12deg);
}
.buy-kind small{
font-family:var(--body); font-style:normal; font-weight:500; text-transform:none;
letter-spacing:0; font-size:.92rem; color:var(--ink-3);
}
.buy-list{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(268px,1fr)); }
.buyrow{
display:flex; align-items:center; gap:14px;
padding:16px 18px; text-decoration:none;
background:var(--card); border:1px solid var(--rule-2); border-radius:var(--r);
color:var(--ink);
transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.buyrow:hover{ border-color:var(--ink); background:var(--paper-2); transform:translateX(3px); }
.buyrow .ic{
flex:none; width:42px; height:42px; border-radius:var(--r);
background:var(--ink); color:#fff;
display:flex; align-items:center; justify-content:center;
}
.buyrow .ic svg{ width:24px; height:24px; fill:currentColor; }
/* Real retailer/platform logos keep their own colours (unlike the
fill:currentColor line icons above), so the chip just frames them. */
.buyrow .ic img{ width:100%; height:100%; object-fit:contain; border-radius:inherit; }
.buyrow b{
flex:1 1 auto; min-width:0;
font-family:var(--display); font-weight:700; text-transform:uppercase;
letter-spacing:.04em; font-size:1.08rem; line-height:1.15;
}
.buyrow b span{
display:block; font-weight:500; font-size:.72rem; letter-spacing:.1em;
color:var(--ink-3); margin-top:4px;
}
.buyrow .go{ flex:none; color:var(--ink-3); transition:color .2s var(--ease), transform .2s var(--ease); }
.buyrow:hover .go{ color:var(--heat-dp); transform:translateX(3px); }
.buyrow .go svg{ width:20px; height:20px; stroke:currentColor; stroke-width:2.4; fill:none; }
.buy-note{ margin:18px 0 0; font-size:.94rem; color:var(--ink-3); }
@media (prefers-reduced-motion: reduce){
.buyrow:hover, .buyrow:hover .go{ transform:none; }
}
/* ---------- Overview: pack shot + copy ------------------- */
.overview{
display:grid; gap:clamp(30px,4vw,64px); align-items:center;
grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
}
@media (max-width:900px){ .overview{ grid-template-columns:1fr; } }
.overview-pack{ display:flex; justify-content:center; }
.overview-pack img{
width:100%; max-width:400px;
filter:drop-shadow(0 26px 44px rgba(12,24,54,.30));
}
/* The sport, set as an orange plate rather than a quiet grey label — it is
the one word that tells you what this game is, so it gets the heat colour
and the same −12° skew the rest of the site's tags use. */
.sport-tag{
display:inline-block; margin:0 0 16px; padding:8px 16px;
background:var(--heat-dp); color:#fff;
clip-path:polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
font-family:var(--display); font-weight:700; text-transform:uppercase;
letter-spacing:.1em; font-size:.76rem; line-height:1; white-space:nowrap;
}
.overview h2{ margin-bottom:20px; }
.overview .lede{ max-width:none; }
.overview-meta{
display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;
}
.overview-meta span{
display:inline-flex; align-items:center; gap:8px;
padding:10px 16px; background:var(--paper-2); color:var(--ink-2);
clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.09em; font-size:.78rem; line-height:1;
}
.overview-meta svg{ width:17px; height:17px; fill:currentColor; }
/* The eyebrow above the in-section screenshot grid */
.overview + .util.eyebrow, .sect .util.eyebrow[style]{ display:flex; align-items:center; gap:14px; color:var(--heat-dp); }
.sect .util.eyebrow[style]::before{ content:""; width:14px; height:14px; flex:none; background:var(--heat-dp); transform:skewX(-12deg); }
.sect .util.eyebrow[style]::after{ content:""; flex:1; height:1px; background:var(--rule-2); }
/* ---------- Region switcher ------------------------------
Storefronts differ by country — the Nintendo eShop has a separate
URL per region, and the physical retailers are different companies
entirely. One list per region, switched here. */
.regions{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
margin:0 0 clamp(28px,3vw,40px);
}
.regions > .util{ color:#8494B4; margin-right:4px; }
/* The country is worked out for the visitor, so the default state is one
quiet line of prose rather than a row of buttons demanding a decision.
The buttons are still the same .rbtn — they just wait behind Change. */
.region-note{
width:100%; margin:0; color:#8494B4;
font-size:.9rem; line-height:1.5;
}
.region-note b{ color:#fff; font-weight:600; }
.region-change{
padding:0; border:0; background:none; cursor:pointer;
color:#8494B4; font:inherit; text-decoration:underline;
text-underline-offset:3px; transition:color .18s var(--ease);
}
.region-change:hover{ color:#fff; }
.region-list{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
width:100%; margin-top:14px;
}
.region-list[hidden]{ display:none; }
/* Not one of the country buttons — it undoes a choice rather than making one,
so it reads as the same quiet text link as Change. */
.region-auto{
padding:0; border:0; background:none; cursor:pointer;
color:#8494B4; font:inherit; font-size:.9rem; text-decoration:underline;
text-underline-offset:3px; transition:color .18s var(--ease);
}
.region-auto:hover{ color:#fff; }
.region-auto[hidden]{ display:none; }
.rbtn{
min-height:40px; padding:10px 18px; cursor:pointer;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
color:#fff; clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.09em; font-size:.8rem; line-height:1;
transition:background .18s var(--ease), color .18s var(--ease);
}
.rbtn:hover{ background:rgba(255,255,255,.15); }
/* Same take-from-the-left fill as the catalogue filters. */
.rbtn{ position:relative; z-index:0; }
.rbtn::before{
content:""; position:absolute; inset:0; z-index:-1; background:var(--heat-dp);
transform:scaleX(0); transform-origin:left center;
transition:transform .24s var(--ease-snap);
}
.rbtn[aria-pressed="true"]{ border-color:var(--heat-dp); color:#fff; }
.rbtn[aria-pressed="true"]::before{ transform:scaleX(1); }
.rbtn[hidden]{ display:none; }
.buyrow[hidden], .buy-col[hidden]{ display:none; }
/* ---------- Trailer -------------------------------------- */
/* Capped, not full-bleed. Our trailers are 720p masters and the posters are
1200–1400px wide, so a full-width 1200px+ box was scaling both UP — softest
of all on a 2× screen. At 980px the source is downscaled instead, which is
what makes an image look sharp. A 1080p master would allow a wider box. */
.trailer{
position:relative; display:block; width:100%; max-width:980px; margin-inline:auto;
padding:0; border:0;
border-radius:var(--r); overflow:hidden; background:var(--navy-dp);
aspect-ratio:16/9; cursor:pointer;
}
.trailer img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.trailer:hover img{ transform:scale(1.04); }
.trailer::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(12,24,54,.18) 0%, rgba(12,24,54,.62) 100%);
}
.trailer-play{
position:absolute; inset:0; z-index:2;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
color:#fff;
}
.trailer-play i{
width:88px; height:88px; border-radius:50%;
background:var(--heat-dp); display:flex; align-items:center; justify-content:center;
box-shadow:0 10px 40px rgba(194,65,12,.45);
transition:transform .25s var(--ease);
}
.trailer:hover .trailer-play i{ transform:scale(1.08); }
.trailer-play svg{ width:34px; height:34px; fill:#fff; margin-left:5px; }
.trailer-play b{
font-family:var(--display); font-weight:700; font-style:italic;
text-transform:uppercase; letter-spacing:.04em; font-size:1.5rem;
}
.trailer-play span{
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.12em; font-size:.8rem; color:#C3CEE4;
}
/* Once playing it is the YouTube player and nothing else — no gradient
scrim over it, no hover scale, no pointer cursor. */
.trailer--playing{ cursor:default; }
.trailer--playing::after{ display:none; }
.trailer--playing iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (prefers-reduced-motion: reduce){
.trailer:hover img,.trailer:hover .trailer-play i{ transform:none; }
}
/* ---------- Feature blocks (sport dressing) -------------- */
.feat{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.fcard{
position:relative; overflow:hidden; border-radius:var(--r);
background:var(--card); border:1px solid var(--rule);
display:flex; flex-direction:column;
}
.fcard img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.fcard-body{ position:relative; padding:26px 24px 28px; }
.fcard-tag{
position:absolute; top:0; left:24px; transform:translateY(-50%);
background:var(--navy-dp); color:#fff; padding:8px 18px;
clip-path:polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
font-family:var(--display); font-weight:700; text-transform:uppercase;
letter-spacing:.1em; font-size:.72rem; line-height:1; white-space:nowrap;
}
.fcard h3{
margin:12px 0 10px; font-family:var(--display); font-weight:700; font-style:italic;
text-transform:uppercase; font-size:1.45rem; line-height:1; color:var(--ink);
}
.fcard p{ margin:0; color:var(--ink-2); font-size:.99rem; }
/* ---------- Additional information ----------------------- */
/* Navy, with the jersey hooping — the spec table is the one place
on the page that is pure data, so it gets its own field. */
/* Navy field with jersey hooping — shared by "Where to buy" and
"Additional information". */
.sect--navy{
position:relative; overflow:hidden; color:#fff;
background:
repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 3px, transparent 3px 22px),
var(--navy-dp);
}
.sect--navy .sect-head .eyebrow{ color:var(--heat); }
.sect--navy .sect-head .eyebrow::before{ background:var(--heat); }
.sect--navy .sect-head .eyebrow::after{ background:rgba(255,255,255,.22); }
.sect--navy .h-lg{ color:#fff; }
.sect--navy .lede{ color:#A9B6D2; }
.sect--navy .info{ border-top-color:var(--heat); }
.sect--navy .info > div{ border-bottom-color:rgba(255,255,255,.16); }
.sect--navy .info dt{ color:#8494B4; }
.sect--navy .info dd{ color:#fff; }
.sect--navy .notice{
background:rgba(255,255,255,.06); border-left-color:rgba(255,255,255,.3); color:#A9B6D2;
}
.sect--navy .notice strong{ color:#fff; }
/* Store rows on navy */
.sect--navy .buyrow{
background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:#fff;
}
.sect--navy .buyrow:hover{ background:rgba(255,255,255,.13); border-color:#fff; }
.sect--navy .buyrow .ic{ background:#fff; color:var(--navy-dp); }
.sect--navy .buyrow b span{ color:#8494B4; }
.sect--navy .buyrow .go{ color:#8494B4; }
.sect--navy .buyrow:hover .go{ color:var(--heat); }
.sect--navy .buy-note{ color:#8494B4; }
.sect--navy .buy-kind{ color:#fff; }
.sect--navy .buy-kind small{ color:#8494B4; }
.info{
display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
border-top:3px solid var(--ink);
}
.info > div{ padding:20px 22px 20px 0; border-bottom:1px solid var(--rule); }
.info dt{
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.11em; font-size:.74rem; color:var(--ink-3); margin-bottom:8px;
}
.info dd{
margin:0; font-family:var(--display); font-weight:700; font-style:italic;
text-transform:uppercase; font-size:1.16rem; line-height:1.1; color:var(--ink);
}
/* Questions block. Same rule-and-eyebrow furniture as .info, but the
answers are sentences rather than spec values, so they stay in the
body face at a readable measure and the rows run full width instead
of tiling into columns. */
.faq{ border-top:3px solid var(--ink); max-width:74ch; }
.faq > div{ padding:22px 0; border-bottom:1px solid var(--rule); }
.faq dt{
font-family:var(--display); font-weight:700; font-style:italic;
text-transform:uppercase; letter-spacing:.02em;
font-size:1.16rem; line-height:1.15; color:var(--ink); margin-bottom:9px;
}
.faq dd{ margin:0; color:var(--ink-2); line-height:1.6; }
@media (max-width:860px){
.phero-media img{ aspect-ratio:16/10; max-height:52vh; object-position:66% center; }
/* The art's own baked-in bottom strip ("COMING SOON", platform
lockup) can't be cropped out of a 2.4:1 frame on a phone, and a
right-sized CTA no longer hides it — fade the strip into navy so
the button owns that band. */
.phero-media::after{
height:56%;
background:linear-gradient(180deg, rgba(12,24,54,0) 0%, rgba(12,24,54,.55) 38%, rgba(12,24,54,.99) 68%, rgb(12,24,54) 100%);
}
.phero-slab::before{ width:6px; transform:none; }
/* The full-bleed 64px bar read as an ad banner on phones. Keep the
tap target ≥48px but let the button hug its label, centred over
the art like the desktop layout. */
.phero-cta{ bottom:20px; }
.phero-cta .btn-lg{ flex:0 1 auto; min-height:50px; padding:13px 22px; font-size:.98rem; }
.phero-cta .btn-lg svg{ width:20px; height:20px; }
.trailer-play i{ width:66px; height:66px; }
.trailer-play svg{ width:26px; height:26px; }
.trailer-play b{ font-size:1.15rem; }
}
/* ============================================================
RELEASE HISTORY + RELEASE ARTICLE
============================================================ */
/* ---------- Release history (fixture list) --------------- */
.rel-year{
display:flex; align-items:center; gap:16px;
margin:clamp(34px,3.4vw,48px) 0 6px;
font-family:var(--display); font-weight:700; font-style:italic;
text-transform:uppercase; font-size:1.9rem; line-height:1; color:var(--ink);
}
.rel-year:first-of-type{ margin-top:0; }
.rel-year::before{
content:""; width:14px; height:22px; flex:none;
background:var(--heat-dp); transform:skewX(-12deg);
}
.rel-year::after{ content:""; flex:1; height:2px; background:var(--rule); }
.rel-year small{
font-family:var(--body); font-style:normal; font-weight:500;
text-transform:none; font-size:.92rem; color:var(--ink-3); flex:none;
}
.rel-list{ margin:0; padding:0; list-style:none; }
.rel-item{
display:grid; gap:6px 22px; align-items:baseline;
grid-template-columns:130px minmax(0,1fr) auto;
padding:15px 0; border-bottom:1px solid var(--rule);
}
.rel-item time{
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.09em; font-size:.82rem; color:var(--heat-dp);
}
.rel-item .t{
font-family:var(--display); font-weight:700; text-transform:uppercase;
letter-spacing:.01em; font-size:1.12rem; line-height:1.15; color:var(--ink);
}
.rel-item .t a{ text-decoration:none; }
.rel-item .t a:hover{ color:var(--blu); }
.rel-item .p{
font-family:var(--display); font-weight:500; text-transform:uppercase;
letter-spacing:.09em; font-size:.76rem; color:var(--ink-3); text-align:right;
}
.rel-item .tag{
display:inline-block; margin-left:10px; padding:4px 9px; vertical-align:2px;
background:var(--paper-2); color:var(--ink-2);
clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.1em; font-size:.62rem; line-height:1.4;
}
.rel-item .tag--soon{ background:var(--heat-dp); color:#fff; }
.rel-item .tag--tbc{ background:var(--rule-2); color:var(--ink); }
@media (max-width:760px){
.rel-item{ grid-template-columns:1fr; gap:5px; }
.rel-item .p{ text-align:left; }
}
/* ---------- Release article ------------------------------ */
.article{ max-width:78ch; }
/* The story used to share a grid row with a media rail. Standing alone it
keeps its reading measure and centres in the wrap instead of hugging the
left edge of a column that is no longer there. */
.article--solo{ margin-inline:auto; }
.article-dateline{
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.12em; font-size:.82rem; color:var(--ink-3);
padding-bottom:20px; border-bottom:2px solid var(--ink); margin-bottom:28px;
}
.article-lead{
font-size:1.28rem; line-height:1.6; color:var(--ink); font-weight:500;
margin-bottom:26px;
}
.article p{ margin-bottom:1.15em; }
.article h2{
font-family:var(--display); font-weight:700; font-style:italic;
text-transform:uppercase; font-size:1.7rem; line-height:1;
margin:38px 0 16px; color:var(--ink);
}
.article ul{ margin:0 0 1.3em; padding-left:0; list-style:none; }
.article ul li{
position:relative; padding-left:26px; margin-bottom:10px; color:var(--ink-2);
}
.article ul li::before{
content:""; position:absolute; left:0; top:.62em;
width:10px; height:10px; background:var(--heat-dp); transform:skewX(-12deg);
}
.factbox{
background:var(--paper-2); border-left:4px solid var(--heat-dp);
padding:26px 28px; margin:34px 0;
}
.factbox h3{
margin:0 0 16px; font-family:var(--display); font-weight:700; font-style:italic;
text-transform:uppercase; font-size:1.25rem; color:var(--ink);
}
.factbox dl{ display:grid; gap:12px 26px; grid-template-columns:auto 1fr; margin:0; }
.factbox dt{
font-family:var(--display); font-weight:600; text-transform:uppercase;
letter-spacing:.1em; font-size:.74rem; color:var(--ink-3);
}
.factbox dd{ margin:0; font-weight:500; }
/* Pictures inside the story.
The editor's own alignment classes are honoured, so a picture can sit
full width between two paragraphs or be pushed to one side with the copy
running past it — which is the whole point of putting pictures in the
body instead of in a rail the editor cannot reach. */
.article figure,.article .wp-block-image{ margin:34px 0; }
.article img{ max-width:100%; height:auto; display:block; border-radius:var(--r); }
.article figcaption,.article .wp-element-caption{
margin-top:10px; font-family:var(--display); font-weight:600;
text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; color:var(--ink-3);
}
.article .alignleft{ float:left; margin:6px 30px 24px 0; max-width:min(46%,340px); }
.article .alignright{ float:right; margin:6px 0 24px 30px; max-width:min(46%,340px); }
.article .aligncenter{ margin-inline:auto; }
.article .alignwide,.article .alignfull{ width:100%; }
/* A floated picture near the end of the copy must not run into the footer
block or the related-posts band below it. */
.article .boiler,.article::after{ clear:both; }
.article::after{ content:""; display:table; }
@media (max-width:640px){
.article .alignleft,.article .alignright{ float:none; max-width:100%; margin-inline:0; }
}
.boiler{
border-top:1px solid var(--rule); margin-top:44px; padding-top:28px;
font-size:.97rem; color:var(--ink-2);
}
.boiler h3{
margin:0 0 12px; font-family:var(--display); font-weight:600;
text-transform:uppercase; letter-spacing:.1em; font-size:.86rem; color:var(--ink);
}
/* ---------- Press release: copy + media rail ------------- */
.release{
display:grid; gap:clamp(32px,4vw,64px);
grid-template-columns:minmax(0,1fr) minmax(0,.7fr);
/* stretch, not start: a sticky child only travels if its containing
block is taller than it is. */
align-items:stretch;
}
@media (max-width:980px){ .release{ grid-template-columns:1fr; } }
.release .article{ max-width:none; }
.rail-inner{ position:sticky; top:calc(var(--nav-h) + 22px); display:grid; gap:16px; }
@media (max-width:980px){ .rail-inner{ position:static; } }
.rail-media figure{
margin:0; position:relative; overflow:hidden;
border-radius:var(--r); background:var(--navy-dp);
box-shadow:var(--shadow-1);
}
.rail-media img{ width:100%; display:block; }
.rail-media figcaption{
position:absolute; left:0; bottom:0; z-index:2;
background:var(--navy-dp); color:#fff; padding:8px 18px;
clip-path:polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
font-family:var(--display); font-weight:700; text-transform:uppercase;
letter-spacing:.1em; font-size:.68rem; line-height:1;
}