/* ============================================================
JEN TV.my — homepage, version 2
Fixture-led layout: the next broadcast is the headline and the
schedule carries the page. Same logo palette as v1 — blue is the
brand, gold is the action, red means live — on a deeper navy base.
============================================================ */
:root{
--ink: #070a11;
--panel: #0d131e;
--panel-2: #131b29;
--line: #1e2838;
--line-2: #2a3547;
--blue: #3a8dd0;
--blue-lo: #1b4f9c;
--blue-hi: #6fb4ea;
--gold: #ffc33b;
--gold-lo: #e0972a;
--red: #e0262e;
--paper: #eef1f6;
--muted: #8c96a6;
--muted-2: #5c6678;
--wrap: 1200px;
--gut: clamp(18px, 4.5vw, 48px);
/* The bar is fixed, so it contributes no height to the flow. Anything that
has to start below it measures from here: 12px + 52px logo + 12px, plus
the 1px bottom border. */
--bar-h: 77px;
--r: 6px;
--ease: cubic-bezier(.2,.7,.3,1);
--sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
--mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
color-scheme: dark;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--bar-h) + 20px); }
body{
margin:0; background:var(--ink); color:var(--paper);
font-family:var(--sans);
font-size:clamp(15px,.5vw + 13.6px,16.5px); line-height:1.6;
-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue-hi); text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }
.sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap{ width:min(100% - var(--gut)*2, var(--wrap)); margin-inline:auto; }
.skip{
position:absolute; left:16px; top:-60px; z-index:200;
background:var(--gold); color:#170f00; padding:10px 16px; border-radius:var(--r);
font-weight:700; text-decoration:none; transition:top .18s var(--ease);
}
.skip:focus{ top:16px; }
/* Micro-labels are set in mono throughout: they are data, not prose. */
.mono{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; }
/* ------------------------------------------------------------ header */
.bar{
position:fixed; inset:0 0 auto; z-index:100;
border-bottom:1px solid transparent; transition:background .3s var(--ease), border-color .3s;
}
.bar.is-stuck{
background:color-mix(in srgb, var(--ink) 88%, transparent);
backdrop-filter:blur(14px) saturate(1.25);
border-bottom-color:var(--line);
}
.bar-in{ display:flex; align-items:center; gap:22px; padding:12px 0; }
.brand{ flex:none; display:flex; align-items:center; }
.brand img{ width:auto; height:52px; transition:height .3s var(--ease); }
.bar.is-stuck .brand img{ height:42px; }
.nav{ display:flex; align-items:center; gap:22px; margin-left:auto; }
.nav a:not(.btn){
color:var(--paper); text-decoration:none; font-size:14.5px; font-weight:600;
position:relative; padding:5px 0;
}
.nav a:not(.btn)::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold);
transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease);
}
.nav a:not(.btn):hover::after, .nav a:not(.btn):focus-visible::after{ transform:scaleX(1); }
/* The pill lives outside .nav so the burger can't swallow it — see
template-parts/chrome/bar.php. Only one of its two labels is ever
painted; the long one, until the bar runs out of room for it. */
.bar-cta{ flex:none; }
.bar-cta-short{ display:none; }
.burger{ display:none; }
/* ------------------------------------------------------------ buttons */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
padding:13px 24px; border-radius:var(--r); border:1px solid transparent;
font:inherit; font-weight:800; font-size:14.5px; white-space:nowrap;
text-decoration:none; cursor:pointer;
transition:transform .15s var(--ease), box-shadow .22s, background .2s, color .2s, border-color .2s;
}
.btn-sm{ padding:9px 16px; font-size:13.5px; }
.btn-gold{ background:linear-gradient(160deg,var(--gold),var(--gold-lo)); color:#170f00; }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 10px 28px -10px color-mix(in srgb,var(--gold) 70%,transparent); }
.btn-ghost{ border-color:var(--line-2); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue-hi); }
.btn-live{ background:var(--red); color:#fff; }
.btn-live:hover{ transform:translateY(-2px); box-shadow:0 10px 28px -10px color-mix(in srgb,var(--red) 70%,transparent); }
/* The beacon on a Live Now button — jt_icon( 'live' ) / LIVE_ICON in
theme.js. The dot is solid; the two pairs of arcs pulse in turn, inner
then outer, so the signal reads as travelling outwards. Reduced motion
collapses the animation (see the bottom of this file) and leaves every
arc at full strength, which still reads as a signal. */
.live-sig{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.live-sig circle{ fill:currentColor; stroke:none; }
.live-sig path{ animation:beacon 1.6s ease-in-out infinite; }
.live-sig path + path{ animation-delay:.35s; }
@keyframes beacon{ 0%,100%{ opacity:.2; } 45%{ opacity:1; } }
.btn:active{ transform:none; }
/* ------------------------------------------------------------ hero */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.lights{
position:absolute; inset:0;
background:
radial-gradient(42% 38% at 12% -6%, color-mix(in srgb,var(--blue) 34%,transparent), transparent 70%),
radial-gradient(38% 34% at 88% -8%, color-mix(in srgb,var(--gold-lo) 20%,transparent), transparent 70%),
radial-gradient(90% 70% at 50% 120%, color-mix(in srgb,var(--blue-lo) 26%,transparent), transparent 70%),
var(--ink);
}
/* The still, under the scrim and the grain stacked above it. The dark
ground shows while a large image is still decoding, rather than a white
flash over a dark page. */
.hero-img{ position:absolute; inset:0; overflow:hidden; pointer-events:none; background:#05070c; }
.hero-img picture{ display:block; width:100%; height:100%; }
/* Crop to fill, the way the video layer does — the hero's height comes from
its copy, so the artwork can never be relied on to set it. */
.hero-img-el{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
/* Holds the copy legible over artwork */
.hero-scrim{
position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(92deg, var(--ink) 4%, color-mix(in srgb,var(--ink) 92%,transparent) 38%, color-mix(in srgb,var(--ink) 62%,transparent) 66%, color-mix(in srgb,var(--ink) 42%,transparent)),
linear-gradient(0deg, var(--ink) 2%, color-mix(in srgb,var(--ink) 30%,transparent) 32%, color-mix(in srgb,var(--ink) 30%,transparent) 70%, color-mix(in srgb,var(--ink) 80%,transparent));
}
.grain{
position:absolute; inset:0; pointer-events:none;
background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.02) 3px 4px);
}
.hero-in{
position:relative; z-index:3;
padding:clamp(150px,22vh,230px) 0 clamp(64px,9vw,110px);
}
.hero-copy{ max-width:min(100%, 42rem); }
/* With a video beside it the copy stops being a measure inside a full-width
band and becomes a real column, so the 42rem cap comes off and the track
is what holds the line length. Without the video nothing here applies and
the hero is exactly what it was. */
.hero-in.has-media{
display:grid; align-items:center;
grid-template-columns:minmax(0,1fr) minmax(0,44%);
gap:clamp(28px,4vw,56px);
}
.hero-in.has-media .hero-copy{ max-width:none; }
.hero-in.has-media .hero-note{ max-width:none; }
/* The column is the measure now, so the 18ch cap comes off — and the type
comes down with it, because 74px in a 40rem column is four words a line
and a headline taller than the video beside it. */
.hero-in.has-media .hero-h{ max-width:none; font-size:clamp(34px,3.9vw,58px); }
.hero-media{ position:relative; min-width:0; }
/* The sound toggle theme.js drops onto a mounted player, bottom-right so it
sits clear of YouTube's own top-corner chrome. A pill rather than a bare
icon: "Unmute" in words is the one thing that tells a visitor the video
they can see playing is silent. The two states swap which paths of the
speaker glyph are drawn — the waves when audible, the cross when muted. */
.hero-sound{
position:absolute; right:14px; bottom:14px; z-index:2;
display:inline-flex; align-items:center; gap:7px;
padding:8px 13px 8px 10px; border-radius:999px;
background:color-mix(in srgb,var(--ink) 72%,transparent); color:var(--paper);
border:1px solid color-mix(in srgb,var(--paper) 22%,transparent);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
font:inherit; font-size:12.5px; font-weight:700; letter-spacing:.02em;
cursor:pointer; transition:background .2s, border-color .2s;
}
.hero-sound:hover{ background:color-mix(in srgb,var(--ink) 88%,transparent); border-color:color-mix(in srgb,var(--gold) 60%,transparent); }
.hero-sound:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.hero-sound svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.hero-sound .hs-body{ fill:currentColor; }
.hero-sound .hs-x{ display:none; }
.hero-sound.is-muted .hs-wave{ display:none; }
.hero-sound.is-muted .hs-x{ display:block; }
.hero-sound.is-muted{ color:var(--gold); border-color:color-mix(in srgb,var(--gold) 55%,transparent); }
/* The facade: poster frame, play button, and the same box the player will
take over. aspect-ratio rather than a padding hack so the iframe that
replaces the button inherits the panel's height without a reflow. */
.hero-play{
position:relative; display:block; width:100%; padding:0;
aspect-ratio:16/9; overflow:hidden; cursor:pointer;
background:#05070c; border:1px solid var(--line-2); border-radius:14px;
box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
transition:border-color .2s, transform .2s;
}
.hero-play:hover{ border-color:color-mix(in srgb,var(--gold) 55%,transparent); }
.hero-play-img{
display:block; width:100%; height:100%;
object-fit:cover; object-position:center;
transition:transform .4s, opacity .2s;
}
.hero-play:hover .hero-play-img{ transform:scale(1.03); opacity:.86; }
.hero-play-btn{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
display:grid; place-content:center;
width:74px; height:74px; border-radius:50%;
background:linear-gradient(160deg,var(--gold),var(--gold-lo));
box-shadow:0 14px 34px -12px rgba(0,0,0,.8);
transition:transform .2s;
}
.hero-play:hover .hero-play-btn{ transform:translate(-50%,-50%) scale(1.07); }
/* Nudged right of centre: the triangle's visual mass sits left of its box. */
.hero-play-btn svg{ width:34px; height:34px; margin-left:3px; fill:#170f00; }
.hero-play-frame{
display:block; width:100%; aspect-ratio:16/9;
border:1px solid var(--line-2); border-radius:14px; background:#05070c;
}
.hero-play-fallback{ display:inline-block; color:var(--gold); font-weight:600; }
.pill{
display:inline-flex; align-items:center; gap:9px; margin:0 0 20px;
padding:7px 15px 7px 12px; border-radius:100px;
background:color-mix(in srgb,var(--gold) 15%,transparent);
border:1px solid color-mix(in srgb,var(--gold) 42%,transparent);
color:var(--gold);
font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.pill i{ width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none; }
.hero-h{
margin:0 0 22px; max-width:18ch;
font-size:clamp(36px,5.4vw,74px); font-weight:900;
line-height:.98; letter-spacing:-.03em;
}
/* Fixture meta. The hero lost its list when it stopped leading on a
fixture; single-event.php is what renders this now. */
.meta{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 26px; margin:0 0 18px; padding:0; }
.meta li{ display:flex; align-items:center; gap:9px; color:#b7c0cd; font-size:14.5px; }
.meta svg{ width:15px; height:15px; flex:none; stroke:var(--muted-2); fill:none; stroke-width:1.6; }
/* Socials, under the tagline. They used to close the footer; up here they
are read on the way down to the buttons, so the gap under the list is the
tighter one and .hero-h gives up some of its own margin to keep the
tagline and its links reading as one block. */
.social{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px; padding:0; }
.social a{
display:inline-block; padding:7px 14px; border-radius:100px;
border:1px solid var(--line-2); color:var(--muted);
font-size:13px; font-weight:600; text-decoration:none;
transition:color .2s, border-color .2s;
}
.social a:hover{ color:var(--gold); border-color:var(--gold); }
.hero-do{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 34px; }
.hero-note{
margin:0; max-width:64ch; color:var(--muted); font-size:14.5px;
padding-top:22px; border-top:1px solid var(--line);
}
/* The colour, size and measure above inherit; these only replace the
browser's own margins with the gap the design uses, and close it
after the last one so the hero does not end on dead space. */
.hero-note p{ margin:0 0 14px; }
.hero-note p:last-child{ margin-bottom:0; }
/* status tags */
.tag{
font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
padding:5px 10px; border-radius:4px; white-space:nowrap; border:1px solid transparent;
}
.tag.live{ background:var(--red); color:#fff; animation:blink 1.6s infinite; }
@keyframes blink{ 50%{ opacity:.25; } }
.tag.soon{ color:var(--gold); border-color:color-mix(in srgb,var(--gold) 45%,transparent); }
.tag.sched{ color:var(--muted-2); border-color:var(--line-2); }
/* ------------------------------------------------------------ sections */
.sec{ padding:clamp(56px,7vw,96px) 0; }
.sec-alt{ background:var(--panel); border-block:1px solid var(--line); }
.h2{
margin:0 0 10px; font-size:clamp(26px,3.2vw,42px); font-weight:900;
line-height:1.05; letter-spacing:-.02em; text-wrap:balance;
}
.lede{ margin:0; color:var(--muted); max-width:54ch; }
.sec-head{
display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:flex-end;
margin-bottom:clamp(26px,3.5vw,40px);
}
.filters{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
font:inherit; font-size:13px; font-weight:700; cursor:pointer;
padding:8px 15px; border-radius:100px; background:transparent;
color:var(--muted); border:1px solid var(--line-2);
transition:color .2s, border-color .2s, background .2s;
text-decoration:none;
}
.chip:hover{ color:var(--paper); border-color:var(--blue); }
.chip.is-on{ background:var(--gold); border-color:var(--gold); color:#170f00; }
/* [jt_past_events]'s pager — paginate_links() markup, in the chips' look. */
.past-pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:clamp(26px,3.5vw,40px); }
.past-pager .page-numbers{
font-size:13px; font-weight:700; min-width:38px; text-align:center;
padding:8px 13px; border-radius:100px;
color:var(--muted); border:1px solid var(--line-2); text-decoration:none;
transition:color .2s, border-color .2s, background .2s;
}
.past-pager a.page-numbers:hover{ color:var(--paper); border-color:var(--blue); }
.past-pager .page-numbers.current{ background:var(--gold); border-color:var(--gold); color:#170f00; }
.past-pager .page-numbers.dots{ border-color:transparent; min-width:0; padding-inline:4px; }
/* ------------------------------------------------------------ affiliate box
A notice between the hero and the schedule, not a section of its own: the
band is slimmer than a .sec for the same reason .sec-banners is, and the
card carries the whole of the treatment so the strip around it stays the
page background either side.
Gold throughout — the heading, the border tint and the link — because gold
is the action colour everywhere else on the site, and a box asking for a
sign-up is the same kind of ask as the hero's own gold button. */
.sec-affil{ padding:clamp(34px,4.2vw,54px) 0; }
.affil{
background:var(--panel-2);
border:1px solid color-mix(in srgb,var(--gold) 32%,transparent);
border-radius:var(--r);
padding:clamp(22px,2.8vw,34px) clamp(22px,3vw,38px);
}
/* .mono already sets the family, size, tracking and case — the heading only
states what that rule leaves to the element: its colour, its weight and
the margins an
brings with it. */
.affil-h{ margin:0 0 12px; color:var(--gold); font-weight:700; }
.affil-body{ margin:0; color:var(--muted); max-width:62ch; }
.affil-do{ margin:16px 0 0; }
.affil-cta{
display:inline-flex; align-items:center; gap:9px;
color:var(--gold); font-weight:700; text-decoration:none;
transition:color .2s var(--ease);
}
.affil-cta:hover{ color:var(--gold-lo); }
.affil-cta:hover .affil-arrow{ transform:translateX(4px); }
.affil-arrow{
width:19px; height:19px; flex:none;
fill:none; stroke:currentColor; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round;
transition:transform .2s var(--ease);
}
/* ------------------------------------------------------------ matchweek rows */
.week{ margin-bottom:34px; }
/* line-height is declared rather than inherited — the same 1.6 the body
sets, so nothing moves on the homepage — because inheriting it is what
let the article column restyle the label when [jt_schedule] put the
schedule inside one. A label this small states its own type. */
.week-h{
display:flex; align-items:center; gap:14px; margin:0 0 12px;
font-family:var(--mono); font-size:11.5px; font-weight:600; line-height:1.6;
letter-spacing:.15em; text-transform:uppercase; color:var(--muted-2);
}
.week-h::after{ content:""; flex:1; height:1px; background:var(--line); }
/* A query container, because a fixture row's layout is a question about the
width of the box it is in, not the width of the window. On the homepage
the two agree; inside a page's reading column, or any other narrow slot
[jt_schedule] is dropped into, they do not — and a viewport media query
would leave the desktop grid running in a 604px box, squeezing the one
flexible track to 64px. See the @container block in the responsive
section. */
.fixtures{
list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;
container-type:inline-size; container-name:fixtures;
}
.fx{
display:grid; align-items:center; gap:20px;
grid-template-columns:132px minmax(0,1fr) 150px;
padding:16px 18px;
background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
transition:border-color .22s var(--ease), background .22s var(--ease);
}
.fx:hover{ border-color:var(--line-2); background:var(--panel-2); }
/* display:grid above would otherwise beat the hidden attribute, exactly as
it does for .brail-nav below. theme.js hides rows by setting .hidden —
when a sport filter is on, and when a fixture's live window closes while
the tab is open — and without this the row stays on screen. A week that
empties completely still vanished (.week sets no display), so the symptom
was a filtered week showing the wrong sport's fixtures alongside the
right ones. */
.fx[hidden]{ display:none; }
.fx.is-live{ border-color:color-mix(in srgb,var(--red) 62%,transparent); background:color-mix(in srgb,var(--red) 7%,transparent); }
.fx-when{
border:1px solid var(--line); border-radius:5px; padding:10px 12px; text-align:center;
background:color-mix(in srgb,var(--ink) 60%,transparent);
}
.fx-when b{
display:block; font-family:var(--mono); font-size:12px; font-weight:600;
letter-spacing:.08em; color:var(--gold); text-transform:uppercase;
}
.fx-when span{
display:block; margin-top:5px; font-family:var(--mono); font-size:16px; font-weight:600;
font-variant-numeric:tabular-nums;
}
.fx-mid{ min-width:0; }
.fx-sides{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.fx-team b{ font-size:16.5px; font-weight:800; }
.fx-v{ font-family:var(--mono); font-size:12px; color:var(--muted-2); }
.fx-solo{ font-size:17px; font-weight:800; }
.fx-sub{
display:flex; flex-wrap:wrap; gap:6px 18px; margin:9px 0 0;
font-size:13px; color:var(--muted);
}
.fx-sub span{ display:flex; align-items:center; gap:7px; }
.fx-sub svg{ width:13px; height:13px; flex:none; stroke:var(--muted-2); fill:none; stroke-width:1.7; }
/* Only a row with a poster gets the column for it, so a fixture without one
keeps the three-column layout it has always had — no reserved slot, no
wider gap where a picture would have been. */
.fx.has-media{ grid-template-columns:132px minmax(0,1fr) 160px 150px; }
/* No aspect-ratio on the slot: it takes the shape of the poster in it, so a
square or portrait one is shown whole rather than cropped to a strip. The
cap is what keeps a 9:16 poster from setting the height of the whole row —
past it the picture is fitted inside the box instead of growing, which is
still the whole picture, just letterboxed against the panel. */
.fx-thumb{
position:relative; display:block; overflow:hidden;
border:1px solid var(--line); border-radius:5px;
background:color-mix(in srgb,var(--ink) 60%,transparent);
}
.fx-thumb-img{ display:block; width:100%; height:auto; max-height:210px; object-fit:contain; }
/* The magnifier. Over a scrim, because a stroked glyph alone disappears
into whatever the poster happens to be light or busy under it. */
.fx-thumb-zoom{
position:absolute; inset:0; display:grid; place-items:center;
background:color-mix(in srgb,var(--ink) 58%,transparent);
opacity:0; transition:opacity .22s var(--ease);
}
.fx-thumb-zoom svg{
width:24px; height:24px; stroke:var(--paper); fill:none;
stroke-width:1.7; stroke-linecap:round;
}
.fx-thumb:focus-visible .fx-thumb-zoom{ opacity:1; }
@media (hover:hover){
.fx-thumb:hover .fx-thumb-zoom{ opacity:1; }
}
/* A touch screen has no hover to reveal it with, so the magnifier sits in
the corner permanently rather than the poster looking inert. */
@media (hover:none){
.fx-thumb-zoom{
inset:auto 6px 6px auto; width:28px; height:28px; border-radius:5px;
opacity:1; background:color-mix(in srgb,var(--ink) 74%,transparent);
}
.fx-thumb-zoom svg{ width:16px; height:16px; }
}
.fx-act{ display:flex; justify-content:flex-end; }
.fx-act .btn{ width:100%; }
/* ------------------------------------------------------------ lightbox */
/* Filled and opened by theme.js from a .fx-thumb; empty until then. */
.lb{
width:min(92vw,1080px); max-width:none; padding:0; border:0;
background:transparent; overflow:visible;
}
.lb::backdrop{ background:color-mix(in srgb,#000 82%,transparent); }
.lb-img{
width:100%; max-height:86vh; object-fit:contain;
border:1px solid var(--line-2); border-radius:var(--r);
background:var(--panel);
}
.lb-x{
position:absolute; top:-14px; right:-14px; z-index:1;
display:grid; place-items:center; width:38px; height:38px; padding:0;
border:1px solid var(--line-2); border-radius:999px;
background:var(--panel-2); color:var(--paper); cursor:pointer;
transition:background .22s var(--ease), border-color .22s var(--ease);
}
.lb-x:hover{ background:var(--line); border-color:var(--muted-2); }
.lb-x svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; }
.empty{ margin:0; padding:40px 0; text-align:center; color:var(--muted); }
/* ------------------------------------------------------------ banner rail
Portrait artwork, and not all of it the same shape — a 4:5 poster and a
9:16 story both get posted. So the tiles share a height and take their
width from the picture rather than being cropped into one frame: nothing
an editor uploads is ever cut off, and the rail still reads as a level
row because the one dimension that lines up is the one the eye follows.
A native scroller. overflow-x plus scroll-snap does the whole job, and
the arrows only nudge it along — nothing here is transformed or taken out
of flow, so a phone keeps its own inertial swipe, which is the
interaction that matters most for a strip like this.
A slimmer band than a full .sec: the rail sits between two real sections
and should read as a divider between them, not as a third section
competing for the same attention. */
.sec-banners{
padding:clamp(34px,4.2vw,54px) 0;
--brail-gap:clamp(12px,1.6vw,20px);
--brail-h:clamp(300px,34vw,430px);
}
.brail-wrap{ position:relative; }
.brail{
/* Positioned so a tile's offsetLeft is measured from the rail's own
padding box — the same origin as scrollLeft, which is what lets the
arrows scroll to a tile edge exactly when every tile is a different
width. */
position:relative;
list-style:none; margin:0; display:flex; gap:var(--brail-gap);
/* Vertical room for the hover lift: overflow-x:auto makes the cross axis
clip, so a tile rising 3px would be shaved without it. */
padding:5px 0;
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scroll-behavior:smooth;
scrollbar-width:none;
}
.brail::-webkit-scrollbar{ display:none; }
.bslide{ flex:0 0 auto; scroll-snap-align:start; }
.bslide-link{
display:block; border-radius:var(--r);
transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bslide-link:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -20px #000; }
.bslide-link:hover .brail-img{ border-color:var(--blue); }
.brail-img{
height:var(--brail-h); width:auto;
/* The global img rule caps width at 100%, and here it is the height that
is fixed and the width that follows the picture — so that cap has to
go. What replaces it is a guard: a landscape upload in a rail meant for
posters would otherwise stretch one tile across the whole strip.
cover, not contain, for the moment that guard bites: a landscape photo
held to 520px loses a little off its sides, where contain would letterbox
it against the panel and read as a mistake. Portrait artwork never
reaches the cap, so its tile matches the picture exactly and cover
crops nothing at all. */
/* 86vw, not 100%: the tile is shrink-to-fit, so a percentage here has no
containing block to resolve against and never bites. The viewport unit
does, which is what keeps a stray landscape upload from running wider
than a phone screen. */
max-width:min(520px, 86vw); object-fit:cover;
background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
transition:border-color .2s;
}
.brail-nav{
position:absolute; top:50%; translate:0 -50%; z-index:2;
width:42px; height:42px; padding:0; border-radius:100px; cursor:pointer;
display:grid; place-content:center;
font:inherit; font-size:26px; line-height:1;
color:var(--paper); background:color-mix(in srgb,var(--ink) 84%,transparent);
border:1px solid var(--line-2); backdrop-filter:blur(8px);
transition:color .2s, border-color .2s, opacity .2s;
}
.brail-nav:hover{ color:var(--gold); border-color:var(--gold); }
.brail-nav[disabled]{ opacity:.28; cursor:default; }
.brail-nav[disabled]:hover{ color:var(--paper); border-color:var(--line-2); }
/* display:grid would otherwise beat the hidden attribute, and the arrows
start hidden until theme.js finds there is something to scroll to. */
.brail-nav[hidden]{ display:none; }
.brail-prev{ left:-10px; }
.brail-next{ right:-10px; }
/* ------------------------------------------------------------ production kit */
.kit{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.kit li{ background:var(--ink); padding:24px 22px; display:flex; flex-direction:column; gap:7px; }
.kit b{ font-size:17px; font-weight:800; }
.kit span{ color:var(--muted); font-size:14px; }
/* Optional editor-chosen image under the kit, the Production counterpart
of .about-media: full width of the wrap, same frame. */
.kit-media{ margin:22px 0 0; }
.kit-media img{ display:block; width:100%; height:auto; border-radius:var(--r); border:1px solid var(--line); }
/* ------------------------------------------------------------ about */
.about{ display:grid; grid-template-columns:1.3fr .8fr; gap:clamp(30px,5vw,64px); align-items:start; }
.about p{ margin:0 0 16px; color:#b7c0cd; max-width:60ch; }
/* Optional editor-chosen image, under the heading. Sits at the column's
full width rather than the 60ch measure the copy uses, because it reads
as the section's image, not as an illustration inside a paragraph. */
.about-media{ margin:0 0 22px; }
.about-media img{ width:100%; border-radius:var(--r); border:1px solid var(--line); }
.stats{ margin:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.stats > div{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:17px 20px; border-bottom:1px solid var(--line); background:var(--panel); }
.stats > div:last-child{ border-bottom:0; }
.stats dt{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.stats dd{ margin:0; font-size:clamp(24px,2.6vw,32px); font-weight:900; line-height:1; color:var(--gold); font-variant-numeric:tabular-nums; }
/* ------------------------------------------------------------ news & insights
Featured story on the left, compact list on the right.
------------------------------------------------------------ */
.eyebrow{
display:flex; align-items:center; gap:14px; margin:0 0 14px;
font-family:var(--mono); font-size:11.5px; font-weight:600;
letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.eyebrow i{ width:34px; height:2px; background:var(--gold); flex:none; }
.h2.big{ font-size:clamp(34px,5vw,62px); letter-spacing:-.03em; margin-bottom:clamp(26px,3.4vw,40px); }
.news{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; }
/* Placeholder frame-grab until real images exist — swap for ![]()
in POSTS */
.thumb{
position:relative; overflow:hidden; border-radius:var(--r);
background:
radial-gradient(78% 68% at var(--x,50%) var(--y,36%), color-mix(in srgb,var(--blue) 32%,transparent), transparent 70%),
linear-gradient(var(--a,145deg), color-mix(in srgb,var(--blue-lo) 72%,transparent), #070c16 78%),
repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.05) 3px 4px);
border:1px solid var(--line);
transition:border-color .2s var(--ease);
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
/* --- featured --- */
.feat{ min-width:0; }
.feat .thumb{ aspect-ratio:16/10; }
.feat-body{
margin-top:22px; padding-left:clamp(18px,2vw,26px);
border-left:3px solid var(--gold);
}
.pmeta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 14px; }
.kind{
font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
color:var(--gold); background:color-mix(in srgb,var(--gold) 16%,transparent);
border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
padding:4px 10px; border-radius:4px;
}
.pdate{ font-family:var(--mono); font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.feat h3{
margin:0 0 14px; font-size:clamp(22px,2.4vw,30px); font-weight:900;
line-height:1.16; letter-spacing:-.015em;
}
.feat-excerpt{
margin:0 0 20px; color:var(--muted); max-width:56ch;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.readmore{
display:inline-flex; align-items:center; gap:10px;
font-weight:800; font-size:15px; color:var(--paper); text-decoration:none;
padding-bottom:7px; border-bottom:1px solid var(--line-2);
transition:color .2s var(--ease), border-color .2s var(--ease);
}
.readmore svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; transition:transform .22s var(--ease); }
.readmore:hover{ color:var(--gold); border-color:var(--gold); }
.readmore:hover svg{ transform:translateX(4px); }
/* --- list --- */
.plist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.plist li{ border-bottom:1px solid var(--line); }
.plist a{
display:grid; grid-template-columns:clamp(120px,13vw,165px) 1fr; gap:18px; align-items:center;
padding:18px 0; text-decoration:none; color:inherit;
}
.plist .thumb{ aspect-ratio:3/2; }
.plist .pmeta{ margin:0 0 8px; gap:12px; }
.plist h4{
margin:0; font-size:16.5px; font-weight:800; line-height:1.28;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
transition:color .2s var(--ease);
}
.plist a:hover h4{ color:var(--gold); }
.plist a:hover .thumb{ border-color:var(--line-2); }
.news-all{ margin:clamp(30px,4vw,46px) 0 0; }
.btn-pill{ border-radius:100px; border-color:var(--line-2); color:var(--paper); padding:14px 28px; }
.btn-pill:hover{ border-color:var(--gold); color:var(--gold); }
/* ------------------------------------------------------------ audience
Two ranked cards, countries and sources. Each row is label and count on
one line with a thin bar under it, scaled by PHP to the card's top row.
------------------------------------------------------------ */
.aud{ display:grid; grid-template-columns:1fr; gap:clamp(14px,2vw,22px); }
@media (min-width:760px){ .aud{ grid-template-columns:1fr 1fr; } }
.aud-card{
background:var(--ink); border:1px solid var(--line);
border-radius:calc(var(--r)*2); padding:20px 22px; min-width:0;
}
.aud-card h3{ margin:0 0 14px; color:var(--muted); font-weight:600; }
.aud-card ol{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.aud-card li{ display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:baseline; }
.aud-l{ min-width:0; overflow-wrap:anywhere; font-weight:700; }
.aud-n{ font-family:var(--mono); color:var(--muted); font-variant-numeric:tabular-nums; }
.aud-bar{ grid-column:1 / -1; height:6px; border-radius:3px; background:var(--line-2); overflow:hidden; }
.aud-bar i{ display:block; height:100%; border-radius:3px; }
.aud-c .aud-bar i{ background:var(--red); }
.aud-s .aud-bar i{ background:var(--blue); }
@media (prefers-reduced-motion:no-preference){ .aud-bar i{ transition:width .6s var(--ease); } }
.aud-credit{ margin:16px 0 0; font-size:12px; color:var(--muted-2); }
.aud-credit a{ color:inherit; }
/* ------------------------------------------------------------ book */
.book{
padding:clamp(56px,7vw,96px) 0; border-top:1px solid var(--line);
background:radial-gradient(66% 100% at 6% 0%, color-mix(in srgb,var(--blue-lo) 26%,transparent), transparent 70%), var(--ink);
}
.book-in{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,60px); align-items:start; }
.contacts{ margin:28px 0 0; border-top:1px solid var(--line); }
.contacts > div{ display:flex; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid var(--line); }
.contacts dt{ font-family:var(--mono); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted-2); padding-top:3px; }
/* The optional label under a contact's role. Its look is .kind's — the same
chip a post wears for its category — so this rule only places it:
display:block puts it on its own line, and width:max-content keeps the
box hugging its text instead of filling the column. */
.pill-tag{ display:block; width:max-content; max-width:100%; margin:8px 0 0; }
.contacts dd{ margin:0; font-weight:700; text-align:right; }
.who{
display:block; margin-top:3px; font-weight:400; font-size:12.5px;
color:var(--muted-2); letter-spacing:.01em;
}
.wa-note{ margin:16px 0 0; font-size:13px; color:var(--muted-2); }
/* The WhatsApp button. .btn already lays the mark and the number out as an
inline-flex row with a 9px gap, so only the glyph needs saying: it is a
filled brand mark, where every other icon in the theme is a stroked
outline. Letting the digits wrap keeps the button inside the column on a
narrow screen, where .btn's own nowrap would push it past the edge. */
.wa-btn{ font-variant-numeric:tabular-nums; white-space:normal; text-align:left; }
.wa-btn svg{ width:16px; height:16px; flex:none; fill:currentColor; stroke:none; }
.wa-btn:hover svg{ fill:currentColor; }
/* [jt_contacts] in page content. The list keeps the homepage's look, so
only the article's prose defaults need answering: its dimmer body colour,
which the bold names inherit, and the 66ch column, which is wide enough
already — a contact row reads best near the width it has beside the form. */
.contacts-embed{ max-width:560px; color:var(--paper); }
.contacts-embed .contacts{ margin-top:0; }
.form{
display:grid; grid-template-columns:1fr 1fr; gap:14px;
background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,3vw,30px);
}
.f{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.f-wide, .f-actions, .f-done{ grid-column:1/-1; }
.form label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.form input, .form select, .form textarea{
font:inherit; color:var(--paper); background:var(--ink); width:100%;
border:1px solid var(--line-2); border-radius:5px; padding:11px 13px;
transition:border-color .2s, box-shadow .2s;
}
.form textarea{ resize:vertical; }
.form input:focus, .form select:focus, .form textarea:focus{
outline:none; border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent);
}
.form ::placeholder{ color:var(--muted-2); }
.form .is-bad{ border-color:var(--red); }
.err{ margin:0; font-size:12.5px; color:#ff8a8f; }
.f-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:2px; }
.f-note{ font-size:12.5px; color:var(--muted-2); }
.f-done{
margin:0; padding:13px 15px; border-radius:5px; font-weight:600;
background:color-mix(in srgb,var(--blue) 16%,transparent);
border:1px solid color-mix(in srgb,var(--blue) 42%,transparent);
animation:rise .35s var(--ease) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
/* ------------------------------------------------------------ footer */
.foot{ padding:46px 0 34px; border-top:1px solid var(--line); background:var(--panel); }
.foot-in{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; }
.foot-logo{ width:230px; }
.foot-nav{ display:flex; flex-wrap:wrap; gap:20px; }
.foot-nav a{ color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; }
.foot-nav a:hover{ color:var(--gold); }
.foot-tag{
display:block; margin-bottom:6px; color:var(--paper);
font-size:14.5px; font-weight:700;
}
.foot-c{ width:100%; margin:0; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted-2); }
/* ------------------------------------------------------------ single post & page
The .wrap keeps its 1200px so the section padding and gutters are
unchanged; everything inside it is centred here instead. .lede could not
do that — its 54ch max-width has no auto margins, so the whole article sat
against the left edge of a wide wrap.
Two nested measures, both centred: .entry is the article column, wide
enough for the featured image to carry the page, and .entry-body holds the
copy to a readable line length inside it. Doing it this way — rather than
one narrow column with a wider image inside — keeps the image centred
without a negative-margin breakout, which never survives a narrow screen.
The header and any image are centred; body copy keeps its ragged right,
because centring every line of a long article costs far more in
readability than it buys in symmetry.
------------------------------------------------------------ */
.entry{ width:min(100%, 840px); margin-inline:auto; }
.entry-head{ text-align:center; margin-bottom:clamp(22px,3vw,30px); }
.entry-head .pmeta{ justify-content:center; }
.entry-head .h2{ margin-bottom:0; }
.entry-media{ margin:0 0 clamp(24px,3.4vw,36px); }
.entry-media img{ margin-inline:auto; border-radius:var(--r); border:1px solid var(--line); }
.entry-body{ width:min(100%, 66ch); margin-inline:auto; color:#b7c0cd; }
/* These are defaults for prose an editor types, so they are written inside
:where() and carry no specificity at all. Selected on the element, they
used to outrank any component class rendered into the same box — the whole
point of .entry-body h3 (0,1,1) beating .week-h (0,1,0) is an accident of
how the selector is spelled, not a decision. [jt_schedule] is what made it
visible: the schedule's week headings came out as 21px white article
subheads instead of 11.5px mono labels, and its section heading shrank
from the .h2 scale to the article's. At zero specificity a bare an
editor writes still gets all of this, and anything carrying a class of its
own keeps it. */
:where(.entry-body) > *{ margin:0 0 1.15em; }
:where(.entry-body) > :where(:last-child){ margin-bottom:0; }
:where(.entry-body) :where(h2, h3, h4){
color:var(--paper); font-weight:800; line-height:1.2; letter-spacing:-.015em;
margin:1.8em 0 .55em;
}
:where(.entry-body) :where(h2){ font-size:clamp(21px,2.2vw,27px); }
:where(.entry-body) :where(h3){ font-size:clamp(18px,1.7vw,21px); }
:where(.entry-body) :where(h4){ font-size:17px; }
:where(.entry-body) :where(ul, ol){ padding-left:1.35em; }
:where(.entry-body) :where(li){ margin-bottom:.4em; }
:where(.entry-body) :where(blockquote){
margin-inline:0; padding-left:clamp(16px,2vw,22px);
border-left:3px solid var(--gold); color:var(--paper);
}
:where(.entry-body) :where(img){ margin-inline:auto; border-radius:var(--r); }
:where(.entry-body) :where(figure){ margin-inline:0; }
:where(.entry-body) :where(figcaption), .entry-media figcaption{
margin-top:10px; text-align:center; font-size:13px; color:var(--muted-2);
}
/* Core's alignment classes, so the block and classic editors both behave. */
.entry-body .aligncenter{ margin-inline:auto; }
.entry-body .alignleft{ margin-inline:0 auto; }
.entry-body .alignright{ margin-inline:auto 0; }
/* alignwide/alignfull break out of the copy measure to the article column,
which is as wide as anything on this page gets. */
.entry-body .alignwide, .entry-body .alignfull{
width:min(840px, 100vw - var(--gut)*2);
max-width:none;
margin-inline:calc(50% - min(840px, 100vw - var(--gut)*2) / 2);
}
/* ------------------------------------------------- a section inside a page
[jt_schedule] renders template-parts/section-schedule.php inside
.entry-body — a 66ch reading column — and every piece of the section's
chrome was written for a direct child of : .sec's block padding
nests inside the page's own, .wrap nests inside a .wrap, and the fixture
rows inherit a 722px measure the desktop grid cannot fit.
So the embedded section drops the chrome and breaks out to the page's own
.wrap measure, by the same arithmetic .alignwide uses above — the rows
then read at the width they read at on the homepage. The band is the one
thing that does not come along: .sec-alt is a full-bleed stripe on the
homepage, and a 1200px panel floating inside a page is not that.
------------------------------------------------------------ */
.sec-embed{ padding-block:0; background:none; border-block:0; }
.sec-embed > .wrap{ width:100%; }
/* The article column's own .wrap is the measure to break out to, so it is
made a query container and 100cqw reads that width directly.
The obvious `100vw - var(--gut)*2` — what .alignwide above uses — is wrong
by exactly the width of a scrollbar, because a classic scrollbar sits
inside vw and outside the layout. Measured at a 390px viewport it made the
section 354px against a 339px .wrap and hung 7.5px into each gutter. cqw
is the layout's own width, so the section lands on the gutter exactly, at
every width, scrollbar or not.
:has() keeps the container on the two templates that have an .entry —
page.php and single.php — rather than on every .wrap in the theme, because
container-type makes an element a containing block for positioned
descendants and the bar, the hero and the banner rail all rely on theirs. */
.entry-body > .sec-embed{ margin-block:clamp(34px,4.5vw,56px); }
/* The break-out is behind @supports because a cqw with no container in sight
resolves against the viewport, not against nothing — so a browser with
container queries but without :has() (Firefox 110 to 120) would read
100cqw as the full window and push the page sideways. Guarded, that
browser simply keeps the section in the copy measure, where the container
query on .fixtures stacks the rows and it still reads correctly. */
@supports selector(:has(*)){
.wrap:has(> .entry){ container-type:inline-size; container-name:page; }
.entry-body > .sec-embed{
width:100cqw;
max-width:none;
margin-inline:calc(50% - 50cqw);
}
}
/* Two prose defaults that no component class competes with, so lowering the
specificity above cannot settle them: the article's dimmer body colour,
which the section inherits and the homepage's does not, and the copy's
list spacing, which lands on every fixture row on top of .fixtures' own
gap. The posters are the same story — .fx-thumb-img sets neither margin
nor radius, so the article's image treatment reaches them unopposed. */
.entry-body .sec-embed{ color:var(--paper); }
.entry-body .sec-embed li{ margin-bottom:0; }
.entry-body .sec-embed img{ margin-inline:0; border-radius:0; }
/* ------------------------------------------------------------ clearing the bar
The homepage opens with .hero, which is built to run underneath the fixed
bar and carries its own clearance in .hero-in. Every other template opens
straight into a .sec, whose own padding was all that stood between the
fixed bar and the first line of the page: about 20px at desktop, and at
mobile widths less than the bar is tall, so the h1 sat under the menu.
Reserve the bar's height there, and let the section keep its normal
padding underneath it, so the gap reads the same as every other section
break on the site.
------------------------------------------------------------ */
#main > .sec:first-child{ padding-top:calc(var(--bar-h) + clamp(56px,7vw,96px)); }
/* A template that is nothing but one section — an article, a page, an
archive — also gets a little more room before the footer, so a short entry
doesn't sit hard against it. */
#main > .sec:only-child{ padding-bottom:clamp(72px,8vw,120px); }
/* ------------------------------------------------------------ inner pages
The Affiliate and Help & Guides templates under page-templates/, built
to the same structure as the client's AFL+ sibling site, recoloured for
this one: the sibling's green accent is gold here, its navy-light panels
are --panel, and its three text tones map to --paper, --muted and
--muted-2. Both open on a .sec, so the bar clearance above applies.
A narrow centred column rather than the homepage's 1200px wrap, because
these are pages to read: 768px for the affiliate page, 1024px for the
help page, which spends 240px of that on a sticky menu down the left.
------------------------------------------------------------ */
.pg-col{ width:min(100%, 768px); margin-inline:auto; }
.pg-col-wide{ width:min(100%, 1024px); margin-inline:auto; }
.crumbs{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:14px; color:var(--muted); }
.crumbs a{ color:var(--paper); text-decoration:none; transition:color .2s; }
.crumbs a:hover{ color:var(--gold); }
.crumbs svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; color:var(--muted-2); }
.pg-h1{ margin:24px 0 12px; font-size:30px; font-weight:700; line-height:1.2; letter-spacing:-.01em; }
.pg-lede{ margin:0; color:var(--muted); line-height:1.65; }
.pg-lede + .pg-do{ margin-top:24px; }
/* An intro the editor typed takes the lede's place, flush left under the heading. */
.pg-intro{ width:auto; max-width:none; margin-inline:0; }
.pg-do{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0; }
.pg-rule{ border:0; border-top:1px solid var(--line); margin:32px 0; }
/* The Watch page (page-templates/watch.php): the player at the wide
column's width, the ad stack under it at the same width. The player
keeps 16:9 with aspect-ratio so the iframe never sits in a zero-height
box before it loads; the offline panel is a .pnl like the affiliate
cards. A banner takes the column's full width and its own height from
the artwork — nothing is cropped, a 728×90 and a 1200×400 both fit. */
/* Breadcrumb at the left, membership button at the right; on a narrow
screen the button drops under the crumbs rather than squeezing them. */
.watch-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; }
.watch-h1{ margin-bottom:20px; }
.watch-player{
position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
background:#05070c; border:1px solid var(--line-2); border-radius:14px;
}
.watch-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.watch-offline{ text-align:center; padding:clamp(40px,7vw,72px) 24px; }
.watch-offline-h{ margin:0 0 8px; font-size:22px; font-weight:700; }
.watch-offline p{ margin:0; color:var(--muted); }
.watch-body{ margin-top:28px; }
.watch-ads{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:16px; }
.watch-ad{ margin:0; }
.watch-ad-link{ display:block; border-radius:var(--r); transition:transform .2s, box-shadow .2s; }
.watch-ad-link:hover{ transform:translateY(-2px); box-shadow:0 12px 32px -14px rgba(0,0,0,.8); }
.watch-ad-img{ display:block; width:100%; height:auto; border-radius:var(--r); border:1px solid var(--line); }
/* --- watch on TV: the TV-code box under the player (page-templates/watch.php) --- */
.btn-blue{ background:var(--blue); color:#fff; }
.btn-blue:hover{ transform:translateY(-2px); box-shadow:0 10px 28px -10px color-mix(in srgb,var(--blue) 70%,transparent); }
.btn-blue:disabled{ opacity:.6; cursor:progress; transform:none; box-shadow:none; }
.tv{ margin-top:28px; border:1px solid var(--line); }
.tv-head{ display:flex; align-items:center; gap:16px; padding:20px clamp(18px,3vw,28px); border-bottom:1px solid var(--line); }
.tv-ico{ width:34px; height:34px; flex:none; fill:none; stroke:#3ddc84; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tv-h{ margin:0; font-size:19px; font-weight:800; }
.tv-sub{ margin:3px 0 0; font-size:14px; color:var(--muted); }
.tv-form{ padding:20px clamp(18px,3vw,28px) 18px; }
.tv-label{ display:block; margin:0 0 10px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.tv-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.tv-code{
width:100%; min-width:0; padding:14px 16px; color:var(--paper); background:var(--ink);
border:1px solid var(--line-2); border-radius:5px;
font:inherit; font-family:var(--mono); font-size:18px; letter-spacing:.14em; text-align:center;
transition:border-color .2s, box-shadow .2s;
}
.tv-code::placeholder{ color:var(--muted-2); letter-spacing:.14em; }
.tv-code:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent); }
.tv-code.is-bad{ border-color:var(--red); }
.tv-row .btn{ width:100%; padding-block:14px; }
.tv-msg{ margin:12px 0 0; min-height:1.5em; font-size:13.5px; line-height:1.5; color:var(--muted); }
.tv-msg.is-ok{ color:#3ddc84; }
.tv-msg.is-bad{ color:#ff8a8f; }
.tv-help-btn{
display:flex; align-items:center; gap:9px; width:100%; padding:15px clamp(18px,3vw,28px);
border:0; border-top:1px solid var(--line); border-radius:0 0 var(--r) var(--r); background:none;
font:inherit; font-size:14.5px; color:var(--muted); text-align:left; cursor:pointer;
transition:color .2s, background .2s;
}
.tv-help-btn:hover{ color:var(--paper); background:var(--panel-2); }
.tv-help-btn svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:640px){
.tv-row{ grid-template-columns:1fr; }
}
/* The how-to dialog. Native