/* ═══════════════════════════════════════════════════════════════════════════ football.antonabyzov.com, site design system "Floodlight" (night pitch, broadcast graphics) with three grafts from the matchday programme: the sticky data line inside the score bug, the vertical season ledger, and chalk/paper-light sections alternating with dark pitch sections so the page is never one slab. Two families only: "Anton" (display, poster grotesque) and "Archivo" (variable body + UI, its width axis drives the condensed labels). Motion policy: the document's resting state IS its final state. Scroll reveals and counters only arm after a real gesture, so print, PDF export and headless capture always get complete, correct content. Section order in this file: 1 tokens 6 hero 11 ledger (vertical) 2 reset + a11y 7 stat tiles 12 quote 3 themes 8 video facade 13 gallery 4 furniture 9 chapters 14 cta band + footer 5 score bug 10 honours board 15 motion 16 clip rail 17 layered home (scroll-driven) ═══════════════════════════════════════════════════════════════════════════ */ /* ═══ 1. TOKENS ═══════════════════════════════════════════════════════════ */ :root{ /* night pitch */ --pitch-000:#030a07; --pitch-900:#06120e; --pitch-800:#0a1a14; --pitch-700:#0f251c; /* chalk ink on the dark sections */ --chalk:#eaf3ee; --chalk-dim:#a9bfb4; --chalk-fade:#7d968a; --line-soft:rgba(232,241,236,.11); --line-volt:rgba(200,255,46,.18); /* paper sections, lifted from the matchday programme */ --paper:#f2eee3; --paper-2:#e7e1d2; --ink:#16150f; --ink-soft:#4a4638; --ink-fade:#5f5a4a; --rule:rgba(22,21,15,.20); /* accents. --gold is reserved: it marks a real trophy, title or medal. */ --volt:#c8ff2e; --volt-deep:#9ed400; --volt-glow:rgba(200,255,46,.32); --flood:#fff4d6; --gold:#ffc24a; --gold-ink:#8a6410; --live:#ff4438; --live-ink:#b3261e; /* type */ --display:"Anton","Haettenschweiler","Arial Narrow",system-ui,sans-serif; --body:"Archivo",system-ui,-apple-system,"Helvetica Neue",sans-serif; /* type scale, fluid between 375px and 1280px */ --t-mega:clamp(58px,15vw,164px); --t-h1:clamp(44px,11vw,124px); --t-h2:clamp(29px,5.2vw,58px); --t-h3:clamp(20px,2.6vw,28px); --t-lede:clamp(15px,1.6vw,18px); --t-body:clamp(14.5px,1.35vw,16px); --t-small:13px; --t-label:11px; --t-micro:9.5px; /* metrics */ --gut:16px; --max:1240px; --r:2px; --ease:cubic-bezier(.2,.7,.25,1); /* section theme defaults = pitch */ --bg:var(--pitch-900); --fg:var(--chalk); --fg-dim:var(--chalk-dim); --fg-fade:var(--chalk-fade); --hair:var(--line-soft); --accent:var(--volt); --accent-ink:#07150f; } @media (min-width:768px){ :root{ --gut:32px; } } @media (min-width:1200px){ :root{ --gut:48px; } } /* ═══ 2. RESET + ACCESSIBILITY ════════════════════════════════════════════ */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--pitch-900); color:var(--chalk); font-family:var(--body); font-size:16px; line-height:1.62; overflow-x:hidden; -webkit-font-smoothing:antialiased; font-synthesis-weight:none; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; } figure{ margin:0; } h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:.94; letter-spacing:.005em; margin:0; text-transform:uppercase; } h1{ font-size:var(--t-h1); } h2{ font-size:var(--t-h2); } h3{ font-size:var(--t-h3); } .sr-only{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .skip{ position:absolute;left:8px;top:-72px;z-index:300; background:var(--volt);color:#0a1a14;padding:11px 18px; font:600 14px/1 var(--body);text-decoration:none;border-radius:var(--r); transition:top .2s var(--ease); } .skip:focus{ top:8px; } :focus-visible{ outline:2px solid var(--volt); outline-offset:3px; border-radius:1px; } .sec--paper :focus-visible{ outline-color:var(--ink); } /* atmosphere, decorative only */ .fx{ position:fixed; inset:0; pointer-events:none; z-index:90; } .fx--grain{ opacity:.13; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } /* ═══ 3. SECTION THEMES ═══════════════════════════════════════════════════ Every section is either .sec--pitch (near-black) or .sec--paper (chalk light). Components read the theme tokens, never the raw colours, so the same component works in both. Alternate them down the page. */ .sec{ position:relative; padding:clamp(56px,7.5vw,104px) var(--gut); } .sec__in{ max-width:var(--max); margin-inline:auto; } .sec--pitch{ --bg:var(--pitch-900); --fg:var(--chalk); --fg-dim:var(--chalk-dim); --fg-fade:var(--chalk-fade); --hair:var(--line-soft); --accent:var(--volt); --accent-ink:#07150f; background:var(--bg); color:var(--fg); } .sec--pitch-deep{ background:var(--pitch-000); } .sec--paper{ --bg:var(--paper); --fg:var(--ink); --fg-dim:var(--ink-soft); --fg-fade:var(--ink-fade); --hair:var(--rule); --accent:var(--pitch-700); --accent-ink:var(--paper); background:var(--bg); color:var(--fg); } /* newsprint tooth, only on the paper sections */ .sec--paper::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.45; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.3'/%3E%3C/svg%3E"); } .sec--paper > *{ position:relative; z-index:1; } section[id]{ scroll-margin-top:118px; } /* ═══ 4. SHARED FURNITURE ════════════════════════════════════════════════ */ .sec-head{ margin:0 0 clamp(26px,3.4vw,44px); } .sec-kick{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 14px; font:600 var(--t-label)/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--fg-fade); } .pill{ display:inline-block; padding:5px 10px 4px; border-radius:1px; background:var(--live-ink); color:#fff; font:700 var(--t-micro)/1 var(--body); letter-spacing:.16em; text-transform:uppercase; } .pill--out{ background:transparent; color:var(--accent); border:1px solid currentColor; } .pill--gold{ background:var(--gold); color:#2a1d02; } .muted{ color:var(--fg-fade); } .lede{ margin:0; max-width:56ch; font-size:var(--t-lede); line-height:1.66; color:var(--fg-dim); } .prose{ margin:0 0 1em; max-width:62ch; font-size:var(--t-body); color:var(--fg-dim); } .prose:last-child{ margin-bottom:0; } .prose strong{ color:var(--fg); font-weight:700; } .prose a, .lede a{ color:var(--accent); text-underline-offset:3px; } .sec--pitch .prose a:hover, .sec--pitch .lede a:hover{ color:#dcff6b; } .note{ margin:18px 0 0; max-width:66ch; font-size:12.5px; line-height:1.6; color:var(--fg-fade); border-left:2px solid var(--hair); padding-left:14px; } .btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; text-decoration:none; border-radius:var(--r); font:600 12px/1 var(--body); letter-spacing:.13em; text-transform:uppercase; border:1px solid transparent; cursor:pointer; transition:transform .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease); } .btn__ico{ font-size:10px; transform:translateY(-.5px); } .btn--volt{ background:var(--volt); color:#07150f; } .btn--volt:hover{ background:#dcff6b; transform:translateY(-2px); box-shadow:0 10px 30px -10px var(--volt-glow); } .btn--ghost{ border-color:color-mix(in srgb, var(--fg) 30%, transparent); color:var(--fg); } .btn--ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); } .sec--paper .btn--ghost{ border-color:var(--ink); } .sec--paper .btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); } .btn--ink{ background:var(--ink); color:var(--paper); box-shadow:4px 4px 0 var(--pitch-700); } .btn--ink:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--pitch-700); } .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; } /* breadcrumbs */ .crumbs{ max-width:var(--max); margin:0 auto; padding:12px var(--gut) 0; } .crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0 8px; font:600 var(--t-micro)/1.6 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--chalk-fade); } .crumbs a{ text-decoration:none; color:var(--chalk-dim); } .crumbs a:hover{ color:var(--volt); } .crumbs li+li::before{ content:"/"; margin-right:8px; color:var(--chalk-fade); } /* ═══ 5. SCORE BUG (sticky header + merged data line) ════════════════════ */ .bug{ position:sticky; top:0; z-index:100; } .bug__bar{ display:flex; align-items:center; gap:14px; padding:9px var(--gut); background:rgba(6,18,14,.9); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--line-soft); } .bug__crest{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; } .bug__mark{ display:grid; place-items:center; width:32px; height:32px; background:var(--volt); color:#07150f; font:400 17px/1 var(--display); letter-spacing:.01em; clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%); } .bug__id{ display:flex; flex-direction:column; line-height:1; } .bug__id b{ font:400 16px/1 var(--display); letter-spacing:.06em; } .bug__id i{ font:500 var(--t-micro)/1.4 var(--body); font-style:normal; letter-spacing:.14em; color:var(--chalk-fade); text-transform:uppercase; } .bug__nav{ display:none; margin-inline:auto; gap:24px; } .bug__nav a{ position:relative; text-decoration:none; padding:6px 0; font:600 var(--t-label)/1 var(--body); letter-spacing:.15em; text-transform:uppercase; color:var(--chalk-dim); transition:color .2s var(--ease); } .bug__nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--volt); transition:width .28s var(--ease); } .bug__nav a:hover,.bug__nav a[aria-current="page"]{ color:var(--chalk); } .bug__nav a:hover::after,.bug__nav a[aria-current="page"]::after{ width:100%; } .bug__toggle{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--line-soft); color:var(--chalk); padding:8px 12px; border-radius:var(--r); cursor:pointer; font:600 var(--t-micro)/1 var(--body); letter-spacing:.14em; text-transform:uppercase; } .bug__toggle:hover{ border-color:var(--volt); color:var(--volt); } .bug__burger{ display:block; width:15px; height:9px; position:relative; } .bug__burger::before,.bug__burger::after,.bug__burger i{ content:""; position:absolute; left:0; right:0; height:1.5px; background:currentColor; } .bug__burger::before{ top:0; } .bug__burger i{ top:4px; } .bug__burger::after{ bottom:0; } /* the graft: matchday's data line, merged into the bug */ .dataline{ margin:0; display:flex; flex-wrap:nowrap; gap:0 18px; padding:6px var(--gut) 7px; background:var(--pitch-000); color:var(--chalk-dim); border-bottom:1px solid var(--line-soft); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .dataline::-webkit-scrollbar{ display:none; } .dataline > div{ display:flex; align-items:baseline; gap:6px; white-space:nowrap; } .dataline dt{ font:600 var(--t-micro)/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--chalk-fade); } .dataline dd{ margin:0; font:600 11px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--chalk); } .dataline .is-live dd{ color:var(--volt); } .bug .dataline:focus-visible{ outline:2px solid var(--volt); outline-offset:-2px; } .dot{ width:6px; height:6px; border-radius:50%; background:var(--volt); display:inline-block; animation:ping 2.4s infinite; } @keyframes ping{ 0%{ box-shadow:0 0 0 0 var(--volt-glow) } 70%{ box-shadow:0 0 0 7px rgba(200,255,46,0) } 100%{ box-shadow:0 0 0 0 rgba(200,255,46,0) } } @media (min-width:980px){ .bug__bar{ padding:11px var(--gut); } .bug__nav{ display:flex; } .bug__toggle{ display:none; } .dataline{ justify-content:flex-start; gap:0 30px; overflow:visible; padding-inline:calc((100vw - var(--max)) / 2 + var(--gut)); } } @media (max-width:979px){ /* The dataline is a silent horizontal scroller below 980px (~954-984px of content in a 375px box, scrollbar hidden). Three things make that usable, and they belong here rather than duplicated per page: * tabindex="0" in the markup so a keyboard user can scroll it (WCAG 2.1.1); * the ring below, so that focus is visible when they land on it; * a right-edge mask plus snap points, so the cut reads as an affordance. The mask is dropped while focused, or it would fade out the ring. */ .bug .dataline{ padding-right:calc(var(--gut) + 30px); scroll-snap-type:x proximity; scroll-padding-inline:var(--gut); } .bug .dataline > div{ scroll-snap-align:start; } .bug .dataline:not(:focus-visible){ --cut:linear-gradient(90deg,#000 calc(100% - 28px),transparent); -webkit-mask-image:var(--cut); mask-image:var(--cut); } .bug__panel[hidden]{ display:none; } .bug__panel{ display:grid; background:var(--pitch-800); border-bottom:1px solid var(--line-soft); padding:6px var(--gut) 14px; } .bug__panel a{ padding:11px 0; text-decoration:none; border-bottom:1px solid var(--line-soft); font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--chalk); } .bug__panel a:last-child{ border-bottom:0; } } @media (min-width:980px){ .bug__panel{ display:none!important; } } /* ═══ 6. HERO ════════════════════════════════════════════════════════════ */ .hero{ position:relative; overflow:hidden; padding:clamp(34px,6vw,76px) var(--gut) clamp(92px,12vw,140px); background: radial-gradient(120% 80% at 78% -10%, rgba(255,244,214,.18) 0%, rgba(255,244,214,.05) 32%, transparent 62%), radial-gradient(90% 60% at 8% 4%, rgba(200,255,46,.11) 0%, transparent 55%), linear-gradient(180deg,#081812 0%,#06120e 55%,#050f0b 100%); } .hero__pitch{ position:absolute; inset:-10% -5% 0; pointer-events:none; background-image: repeating-linear-gradient(94deg, rgba(255,255,255,.016) 0 62px, transparent 62px 124px), radial-gradient(circle at 74% 34%, transparent 0 168px, rgba(200,255,46,.12) 168px 169.5px, transparent 170px), radial-gradient(circle at 74% 34%, rgba(200,255,46,.16) 0 4px, transparent 5px); } .hero__flood{ position:absolute; top:-30%; right:-10%; width:70vw; height:90vh; pointer-events:none; background:conic-gradient(from 195deg at 60% 0%, transparent 0deg, rgba(255,244,214,.13) 14deg, transparent 40deg); filter:blur(28px); } .hero__ghost{ position:absolute; left:-2vw; bottom:3.4vw; margin:0; font:400 clamp(90px,22vw,300px)/.76 var(--display); letter-spacing:-.01em; text-transform:uppercase; color:transparent; -webkit-text-stroke:1.5px rgba(200,255,46,.17); white-space:nowrap; pointer-events:none; user-select:none; } @supports not ((-webkit-text-stroke:1px black)){ .hero__ghost{ color:rgba(200,255,46,.08); } } .hero__in{ position:relative; z-index:2; max-width:var(--max); margin-inline:auto; display:grid; gap:clamp(26px,4vw,44px); } @media (min-width:920px){ .hero__in{ grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr); align-items:end; } } .kicker{ display:flex; flex-wrap:wrap; gap:0 10px; margin:0 0 16px; } .kicker span{ font:600 10px/1.5 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--volt); } .kicker span+span::before{ content:"/"; margin-right:10px; color:var(--chalk-fade); } .hero h1{ margin:0; font-size:var(--t-mega); line-height:.84; letter-spacing:-.005em; } .hero h1 .n1{ display:block; color:var(--chalk-dim); font-size:.62em; letter-spacing:.02em; } .hero h1 .n2{ display:block; color:var(--chalk); text-shadow:0 0 62px rgba(255,244,214,.18); } .hero__role{ margin:16px 0 0; padding-left:14px; border-left:3px solid var(--volt); font:400 clamp(17px,3vw,26px)/1.14 var(--display); letter-spacing:.02em; text-transform:uppercase; color:var(--volt); } .hero__sub{ margin:18px 0 0; max-width:48ch; font-size:var(--t-lede); line-height:1.66; color:var(--chalk-dim); } .hero__shot{ position:relative; align-self:end; } .hero__shot img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 35%; filter:grayscale(.72) contrast(1.2) brightness(.8) saturate(.85); -webkit-mask-image:linear-gradient(180deg,#000 68%,rgba(0,0,0,.4) 90%,transparent 100%); mask-image:linear-gradient(180deg,#000 68%,rgba(0,0,0,.4) 90%,transparent 100%); } .hero__shot::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(200deg,rgba(200,255,46,.18),transparent 44%), linear-gradient(0deg,rgba(6,18,14,.92),rgba(6,18,14,.2) 46%,transparent 64%); mix-blend-mode:screen; } .hero__shot::after{ content:""; position:absolute; left:-7px; top:-7px; width:56px; height:56px; border-left:2px solid var(--volt); border-top:2px solid var(--volt); } .third{ position:absolute; left:-8px; bottom:14px; z-index:2; display:flex; flex-direction:column; } .third__bar{ background:var(--volt); color:#07150f; padding:5px 15px 4px; font:400 20px/1.1 var(--display); letter-spacing:.03em; text-transform:uppercase; } .third__sub{ align-self:flex-start; background:rgba(6,18,14,.94); border-left:3px solid var(--volt); padding:6px 13px; font:600 var(--t-micro)/1.3 var(--body); letter-spacing:.13em; text-transform:uppercase; color:var(--chalk-dim); } /* The home hero carries a SECOND photograph: Nantes airport, 5 July 2009, the morning after the European Championship final. The Patagonia portrait keeps the hero slot because it is the only 3:4 frame in the archive and the column is 3:4; the cup frame is 3:2 and reads as a document, so it is the card laid over the portrait's left edge rather than the bed under the type. It only goes absolute from 1180px up: between 920 and 1180 the two hero columns are close enough in width that a card protruding left lands on the end of the role line, so there it simply follows the portrait in normal flow, the same way it does on a phone. Home page only for now. SHARED FIX: fold into a .hero--pair modifier if a second page wants it. */ .hero__stack{ position:relative; align-self:end; } /* the bottom margin keeps the caption clear of the best-goals rail, which the home page pulls up over the hero's floor */ .hero__cup{ position:relative; margin:20px 0 40px; } .hero__cup picture{ display:block; overflow:hidden; } .hero__cup img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; filter:grayscale(.12) contrast(1.14) brightness(1.03) saturate(.96); } .hero__cup figcaption{ display:flex; flex-direction:column; gap:3px; margin-top:9px; } .hero__cup figcaption b{ font:400 clamp(15px,1.6vw,19px)/1.12 var(--display); letter-spacing:.035em; text-transform:uppercase; color:var(--volt); } .hero__cup figcaption span{ font:600 var(--t-micro)/1.35 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--chalk-dim); } @media (min-width:1180px){ .hero__cup{ position:absolute; left:-38%; top:10%; width:58%; margin:0; z-index:4; padding:10px 10px 12px; background:rgba(5,15,11,.94); border:1px solid rgba(200,255,46,.24); box-shadow:0 26px 54px rgba(0,0,0,.58); } } /* ═══ 7. STAT TILES ══════════════════════════════════════════════════════ */ .numbers{ padding:0 var(--gut); margin-top:clamp(-68px,-7vw,-50px); position:relative; z-index:3; } .tiles{ list-style:none; margin:0 auto; padding:0; max-width:var(--max); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-volt); box-shadow:0 40px 90px -50px #000; } @media (min-width:720px){ .tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (min-width:1100px){ .tiles{ grid-template-columns:repeat(6,minmax(0,1fr)); } } .tile{ background:linear-gradient(170deg,#0c1f18,#081712); padding:20px 14px 18px; display:flex; flex-direction:column; gap:8px; transition:background .3s var(--ease); } .tile:hover{ background:linear-gradient(170deg,#12291f,#0a1c15); } .tile__n{ font:400 clamp(38px,6.4vw,54px)/.86 var(--display); letter-spacing:0; color:var(--volt); font-variant-numeric:tabular-nums; } .tile--gold .tile__n{ color:var(--gold); } .tile__l{ font:600 11px/1.38 var(--body); letter-spacing:.07em; text-transform:uppercase; color:var(--chalk); } .tile__l em{ display:block; margin-top:5px; font:400 10.5px/1.35 var(--body); font-style:normal; letter-spacing:.04em; text-transform:none; color:var(--chalk-fade); } /* ═══ 8. VIDEO FACADE ════════════════════════════════════════════════════ */ .tape__grid{ display:grid; gap:clamp(20px,2.6vw,30px); } @media (min-width:940px){ .tape__grid{ grid-template-columns:minmax(0,1.62fr) minmax(280px,1fr); } } .player__frame{ position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line-volt); background:#08130f; box-shadow:0 50px 100px -60px #000; } .player__poster{ position:absolute; inset:0; } .player__poster picture{ display:block; width:100%; height:100%; } .player__poster img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.06) brightness(.66); } /* drawn poster, for a facade with no frame grab available yet */ .player__poster--chalk{ background: radial-gradient(70% 120% at 50% 0%, rgba(255,244,214,.13), transparent 60%), repeating-linear-gradient(96deg, rgba(255,255,255,.022) 0 44px, transparent 44px 88px), linear-gradient(160deg,#0d241b,#061410 70%); } .player__poster--chalk::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(46%,300px); aspect-ratio:1; border-radius:50%; border:1px solid rgba(200,255,46,.14); } .player__poster--chalk::after{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(200,255,46,.12); } .player__scoreline{ position:absolute; left:12px; top:12px; z-index:2; display:inline-flex; gap:8px; align-items:center; padding:7px 12px 6px; background:rgba(3,10,7,.82); border-left:3px solid var(--volt); font:500 var(--t-micro)/1 var(--body); letter-spacing:.15em; text-transform:uppercase; color:var(--chalk-dim); } .player__scoreline b{ font-weight:700; color:var(--volt); } /* .player__play is an to the real YouTube URL, so the tape still works with JS off; site.js intercepts the click and swaps in the facade iframe. */ .player__play{ position:absolute; inset:0; z-index:3; width:100%; background:radial-gradient(52% 58% at 50% 46%, rgba(3,10,7,.62), rgba(3,10,7,.12) 72%, rgba(3,10,7,.1)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; text-decoration:none; color:var(--chalk); border:0; cursor:pointer; font:inherit; transition:background-color .3s var(--ease); } .player__play:hover{ background:rgba(200,255,46,.07); } .player__tri{ width:70px; height:70px; display:grid; place-items:center; border:2px solid var(--volt); border-radius:50%; background:rgba(6,18,14,.5); transition:transform .28s var(--ease), background-color .28s var(--ease), box-shadow .28s var(--ease); } .player__tri::before{ content:""; border-left:18px solid var(--volt); border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:6px; } .player__play:hover .player__tri{ transform:scale(1.07); background:var(--volt); box-shadow:0 0 46px -6px var(--volt-glow); } .player__play:hover .player__tri::before{ border-left-color:#07150f; } .player__cta{ display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; font:400 16px/1.1 var(--display); letter-spacing:.1em; text-transform:uppercase; text-shadow:0 2px 14px rgba(0,0,0,.7); } .player__cta em{ font:400 10px/1.3 var(--body); font-style:normal; letter-spacing:.12em; color:var(--chalk-dim); text-transform:uppercase; } .player__note{ margin:10px 0 0; font-size:11.5px; color:var(--chalk-fade); } .player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4; } /* small facade, used for the secondary embeds */ .reels{ list-style:none; margin:clamp(28px,4vw,44px) 0 0; padding:0; display:grid; gap:18px; } @media (min-width:720px){ .reels{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .reel .player__frame{ box-shadow:none; } .reel .player__tri{ width:52px; height:52px; } .reel .player__tri::before{ border-left-width:14px; border-top-width:9px; border-bottom-width:9px; } /* the small posters are frame grabs that already carry a burned-in lower third, so the facade keeps only the play control and the label goes to assistive tech; the caption underneath says what the clip is. */ .reel .player__cta{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .reel__cap{ margin:11px 0 0; font-size:13px; line-height:1.5; color:var(--chalk-dim); } .reel__cap b{ display:block; color:var(--chalk); font-weight:700; letter-spacing:.02em; } /* pending slot: an honest, labelled placeholder */ .pending{ position:relative; display:grid; place-items:center; gap:8px; text-align:center; padding:26px 18px; aspect-ratio:16/9; border:1px dashed rgba(200,255,46,.42); background:repeating-linear-gradient(45deg, rgba(200,255,46,.05) 0 9px, transparent 9px 18px), #0b1d16; } .pending b{ font:400 clamp(17px,2.4vw,24px)/1.1 var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--volt); } .pending span{ max-width:44ch; font:400 12px/1.5 var(--body); color:var(--chalk-dim); } /* ═══ 9. CHAPTER LIST ════════════════════════════════════════════════════ */ .chapters__h{ font-size:15px; letter-spacing:.12em; color:var(--chalk-fade); padding-bottom:8px; border-bottom:1px solid var(--line-soft); margin:0 0 2px; } .chapters__h--alt{ margin-top:24px; } .chapters__list{ list-style:none; margin:0; padding:0; } .chapters__list li{ border-bottom:1px solid var(--line-soft); } .chapters__list button,.chapters__list a{ display:flex; align-items:baseline; gap:14px; width:100%; padding:12px 8px; text-align:left; text-decoration:none; background:transparent; border:0; cursor:pointer; color:inherit; font:inherit; transition:background-color .2s var(--ease), padding-left .2s var(--ease); } .chapters__list button:hover,.chapters__list a:hover{ background:rgba(200,255,46,.06); padding-left:14px; } .ts{ font:400 15px/1 var(--display); letter-spacing:.04em; color:var(--volt); font-variant-numeric:tabular-nums; min-width:50px; } .cap{ font:600 12.5px/1.35 var(--body); letter-spacing:.05em; text-transform:uppercase; color:var(--chalk); } .cap em{ display:block; margin-top:3px; font:400 10.5px/1.35 var(--body); font-style:normal; letter-spacing:.03em; text-transform:none; color:var(--chalk-fade); } /* ═══ 10. HONOURS BOARD ══════════════════════════════════════════════════ Gold is earned, not decorative: .hon--gold marks a real title, trophy or medal. Everything else gets the plain rule. */ .honours__grid{ display:grid; gap:clamp(28px,4vw,52px); } @media (min-width:980px){ .honours__grid{ grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr); align-items:start; } } .hon{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); } .hon li{ position:relative; display:grid; grid-template-columns:1fr; gap:4px; padding:15px 0 14px 0; border-bottom:1px solid var(--hair); transition:background-color .22s var(--ease), padding-left .22s var(--ease); } .hon li:hover{ padding-left:8px; background:color-mix(in srgb, var(--accent) 7%, transparent); } .hon__t{ font:400 clamp(16px,2.1vw,21px)/1.2 var(--display); letter-spacing:.03em; text-transform:uppercase; color:var(--fg); } .hon__d{ margin:0; font-size:13px; line-height:1.55; color:var(--fg-dim); max-width:62ch; } .hon__y{ font:600 var(--t-micro)/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-fade); } .hon li.hon--gold{ padding-left:14px; } .hon--gold::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; background:var(--gold); } .hon--gold .hon__t{ color:var(--fg); } .hon--gold .hon__y{ color:var(--gold-ink); } .sec--pitch .hon--gold .hon__y{ color:var(--gold); } .hon li.hon--gold:hover{ padding-left:20px; } .honours__aside figure{ border:1px solid var(--hair); } .honours__aside figcaption{ padding:11px 13px; font-size:11.5px; line-height:1.5; color:var(--fg-fade); border-top:1px solid var(--hair); } .honours__aside figcaption b{ display:block; color:var(--fg); font-weight:700; } /* ═══ 11. VERTICAL SEASON LEDGER (graft from the matchday programme) ═════ Marginal year column, hairline rules, an accent bar on the career-defining rows. Replaces Floodlight's horizontal film strip. */ .ledger{ list-style:none; margin:0; padding:0; border-top:1.5px solid var(--fg); } .ledger li{ position:relative; display:grid; grid-template-columns:4.2rem 1fr; gap:2px 14px; padding:18px 0 17px; border-bottom:1px solid var(--hair); transition:background-color .3s var(--ease); } .ledger li:hover{ background:color-mix(in srgb, var(--accent) 6%, transparent); } .ledger__yr{ margin:0; grid-row:1 / span 2; font:400 clamp(20px,3vw,30px)/1 var(--display); letter-spacing:.01em; color:var(--accent); font-variant-numeric:tabular-nums; } .sec--pitch .ledger__yr{ color:var(--volt); } .ledger__h{ margin:0 0 4px; font:400 clamp(17px,2.2vw,22px)/1.14 var(--display); letter-spacing:.03em; text-transform:uppercase; color:var(--fg); } .ledger__p{ margin:0; font-size:13.5px; line-height:1.56; color:var(--fg-dim); max-width:62ch; } .ledger__tag{ grid-column:2; justify-self:start; align-self:start; margin:8px 0 0; font:600 var(--t-micro)/1 var(--body); letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--hair); padding:4px 7px; color:var(--fg-fade); } .ledger li.is-key::before{ content:""; position:absolute; left:-10px; top:10px; bottom:10px; width:3px; background:var(--accent); } .sec--pitch .ledger li.is-key::before{ background:var(--volt); } .ledger li.is-gold::before{ background:var(--gold); } .ledger li.is-gold .ledger__yr{ color:var(--gold); } @media (min-width:820px){ .ledger li{ grid-template-columns:7rem 1fr 9rem; padding:22px 0; } .ledger__tag{ grid-column:3; grid-row:1; justify-self:end; text-align:right; margin:3px 0 0; } .ledger li.is-key::before{ left:-1.4rem; } } /* ═══ 12. QUOTE ══════════════════════════════════════════════════════════ */ .quote{ margin:0; padding:22px 0 0; border-top:1px solid var(--hair); } .quote p{ margin:0; font:400 clamp(18px,2.4vw,26px)/1.22 var(--display); letter-spacing:.02em; text-transform:uppercase; color:var(--fg); } .quote footer{ margin-top:11px; font-size:11.5px; line-height:1.55; color:var(--fg-fade); } .quote footer b{ display:block; color:var(--accent); font-weight:600; } .sec--pitch .quote footer b{ color:var(--volt); } /* ═══ 13. GALLERY GRID ═══════════════════════════════════════════════════ */ .grid{ list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); } .shot{ position:relative; overflow:hidden; border:1px solid var(--hair); background:var(--pitch-800); } .shot picture{ display:block; } .shot img{ width:100%; height:100%; object-fit:cover; display:block; background-size:cover; background-position:center; transition:transform .5s var(--ease), filter .4s var(--ease); } .shot--34 img{ aspect-ratio:3/4; } .shot--32 img{ aspect-ratio:3/2; } .shot--45 img{ aspect-ratio:4/5; } .shot--169 img{ aspect-ratio:16/9; } .shot:hover img{ transform:scale(1.03); } .shot figcaption{ position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px; background:linear-gradient(0deg,rgba(3,10,7,.94),rgba(3,10,7,.55) 55%,transparent); font:600 10.5px/1.45 var(--body); letter-spacing:.09em; text-transform:uppercase; color:#eaf3ee; } .shot figcaption em{ display:block; margin-top:4px; font:400 9.5px/1.4 var(--body); font-style:normal; letter-spacing:.05em; text-transform:none; color:#a9bfb4; } /* ═══ 14. CTA BAND, CITATIONS, FOOTER ════════════════════════════════════ */ .band{ padding:clamp(56px,8vw,110px) var(--gut); background: radial-gradient(90% 80% at 12% 0%, rgba(255,244,214,.1), transparent 58%), radial-gradient(70% 70% at 96% 100%, rgba(200,255,46,.12), transparent 60%), linear-gradient(170deg,#081a13,#050f0b); border-top:1px solid var(--line-volt); color:var(--chalk); } .band__in{ max-width:var(--max); margin-inline:auto; } .band h2{ font-size:clamp(32px,6.4vw,76px); margin:0 0 22px; } .band__cols{ display:grid; gap:18px 44px; max-width:96ch; } @media (min-width:800px){ .band__cols{ grid-template-columns:1fr 1fr; } } .band__cols p{ margin:0; font-size:var(--t-body); line-height:1.7; color:var(--chalk-dim); } .cites{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:7px; } .cites li{ font-size:11.5px; line-height:1.5; color:var(--fg-fade); padding-left:16px; position:relative; } .cites li::before{ content:"›"; position:absolute; left:0; color:var(--accent); } .cites a{ color:inherit; text-underline-offset:2px; } .cites a:hover{ color:var(--accent); } .foot{ padding:clamp(40px,5vw,64px) var(--gut) 40px; border-top:1px solid var(--line-soft); background:var(--pitch-000); color:var(--chalk); } .foot__in{ max-width:var(--max); margin-inline:auto; display:grid; gap:26px; } @media (min-width:800px){ .foot__in{ grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); align-items:start; } .foot__fine{ grid-column:1/-1; } } .foot__name{ margin:0; font:400 clamp(30px,4.4vw,46px)/1 var(--display); letter-spacing:.01em; text-transform:uppercase; } .foot__role{ margin:8px 0 0; font:600 var(--t-micro)/1.6 var(--body); letter-spacing:.17em; text-transform:uppercase; color:var(--chalk-fade); } .foot__nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); } @media (min-width:560px){ .foot__nav{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .foot__nav a{ background:var(--pitch-000); padding:13px 13px 12px; text-decoration:none; font:400 13px/1.1 var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--chalk); transition:background-color .22s var(--ease), color .22s var(--ease); } .foot__nav a em{ display:block; margin-top:6px; font:400 var(--t-micro)/1 var(--body); font-style:normal; letter-spacing:.1em; color:var(--chalk-fade); text-transform:uppercase; } .foot__nav a:hover{ background:var(--volt); color:#07150f; } .foot__nav a:hover em{ color:#07150f; } .foot__fine{ margin:0; font-size:11px; line-height:1.7; letter-spacing:.06em; color:var(--chalk-fade); } .foot__fine a{ color:var(--chalk-dim); } /* ═══ 15. MOTION ═════════════════════════════════════════════════════════ .rise runs on load and only transforms, so a cold paint or a capture taken mid-animation still shows every word. .reveal uses CSS scroll-driven animation only (see below); JS never hides content. */ .rise{ animation:rise .6s var(--ease) both; animation-delay:calc(var(--i,0) * 70ms); } @keyframes rise{ from{ transform:translateY(20px); } to{ transform:none; } } .hero__ghost,.hero__flood,.hero__pitch{ animation:soak .5s var(--ease) both; } @keyframes soak{ from{ opacity:0; } to{ opacity:1; } } /* Scroll-driven reveal: pure CSS, transform only. Opacity is never animated and content is never JS-hidden, so a print, a PDF or a full-page headless capture (where the viewport is taller than the document and view() progress never advances) still contains every row, fully legible. */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){ .reveal > *{ animation:reveal-rise linear both; animation-timeline:view(); animation-range:entry 0% entry 40%; } } } @keyframes reveal-rise{ from{ transform:translateY(18px); } to{ transform:none; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms!important; animation-delay:0ms!important; transition-duration:.001ms!important; } .rise,.reveal > *{ opacity:1!important; transform:none!important; } .dot{ animation:none; } } /* ═══ 16. CLIP RAIL (self-hosted goals) ══════════════════════════════════ The goals that exist as files on this domain, not as YouTube embeds. A horizontal scroll-snap rail so a series reads as a series; it is a plain overflow scroller, so keyboard, touch and a no-JS browser all work, and the progress line under it is driven by the rail's own scroll timeline. */ .rail{ position:relative; padding:clamp(30px,4.4vw,58px) var(--gut) clamp(34px,4.6vw,62px); background: radial-gradient(90% 60% at 12% 0%, rgba(200,255,46,.07), transparent 58%), linear-gradient(180deg,#081812 0%,#061310 62%,#050f0b 100%); color:var(--chalk); } .rail__in{ max-width:var(--max); margin-inline:auto; } /* Same idiom as .sec-head everywhere else on the site: kicker, then the heading, then the lede under it. That also means the thing that peeks above the fold on the home page is a section title, not half a sentence. */ .rail__head{ margin:0 0 clamp(18px,2.4vw,28px); } .rail__head .lede{ margin-top:clamp(12px,1.4vw,18px); max-width:66ch; } .rail__head h2{ margin:0; font-size:clamp(28px,4.4vw,52px); line-height:.92; letter-spacing:-.005em; color:var(--chalk); } .rail__head h2 .muted{ color:var(--chalk-fade); } .rail__head .lede{ color:var(--chalk-dim); } /* the rail itself */ .clips{ list-style:none; margin:0; padding:0 0 4px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(268px,78vw); gap:clamp(14px,1.8vw,22px); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--line-volt) transparent; scroll-timeline-name:--rail; scroll-timeline-axis:inline; } @media (min-width:700px){ .clips{ grid-auto-columns:minmax(300px,42vw); } } @media (min-width:1080px){ .clips{ grid-auto-columns:minmax(320px,31%); } } .clips::-webkit-scrollbar{ height:6px; } .clips::-webkit-scrollbar-thumb{ background:var(--line-volt); } .clip{ scroll-snap-align:start; min-width:0; } .clip__fig{ margin:0; } /* the