/* The web fonts are linked from each base template's rather than imported here: an import inside a stylesheet cannot start downloading until this file has itself arrived and been parsed, which puts two render-blocking requests in series. */ /* ========================================================================== IL RITRATTO — the cinematic, photo-first theme (redesign approved 2026-08-27). Warm paper, one serif voice for everything that carries emotion (the name, the lede, the numbers, the chapter years) and a neutral grotesk for reading. The home page opens on a full-bleed photograph with the navigation laid over it — but ONLY when that photo carries its author and licence (see `_blocks.html.j2`); otherwise the page opens on paper and nothing is claimed that we cannot attribute. Alignment contract, same as the other two themes: one spacing scale, numeric columns right-aligned with tabular figures, every image in a fixed box. ========================================================================== */ :root { --pap: #f5f3ef; --pap-2: #eceae4; --ink: #100f0d; --ink-2: #43403b; /* Contrast measured with Lighthouse on real generated pages, 2026-09-17: the previous value failed WCAG AA for normal text (#8b857d on the page ground gave 3.29, the floor is 4.5) across 35 elements per page — captions, table headers, the table of contents label. Darkened the minimum that clears it, hue and saturation untouched, so the theme reads the same. */ --mut: #736e67; --hair: #d9d4cc; /* Contrast measured with Lighthouse on real generated pages, 2026-09-17: the previous value failed WCAG AA for normal text (#cf3a1e on the page ground gave 4.43, the floor is 4.5) across 9 elements per page — captions, table headers, the table of contents label. Darkened the minimum that clears it, hue and saturation untouched, so the theme reads the same. */ --red: #cb391d; --maxw: 1240px; --measure: 72ch; --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2.25rem; --s7: 3.5rem; --font-display: "Instrument Serif", Georgia, "Times New Roman", serif; --font-body: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { position: relative; margin: 0; background: var(--pap); color: var(--ink); font-family: var(--font-body); font-size: 1.05rem; line-height: 1.62; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--red); text-underline-offset: 2px; } a:hover { color: var(--ink); } :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(var(--s4), 4vw, var(--s7)); } .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; } .skip { position: absolute; left: -9999px; } .skip:focus { left: var(--s4); top: var(--s2); z-index: 60; background: var(--ink); color: var(--pap); padding: var(--s2) var(--s3); } .ser { font-family: var(--font-display); font-weight: 400; line-height: .96; margin: 0; } .lab { font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; } /* ---------- the shell: over the photograph, or on paper ---------- */ .site-header { border-bottom: 1px solid var(--hair); } .site-header__inner { display: flex; align-items: center; gap: var(--s5); min-height: 64px; } .site-brand { font-family: var(--font-display); font-size: 1.2rem; color: inherit; text-decoration: none; white-space: nowrap; } .site-nav { margin-left: auto; min-width: 0; } .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s1); flex-wrap: wrap; } .site-nav a { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: inherit; text-decoration: none; opacity: .72; padding: var(--s2) var(--s3); border-bottom: 1px solid transparent; } .site-nav a:hover { opacity: 1; } .site-nav a[aria-current="page"] { opacity: 1; border-bottom-color: currentColor; } /* Laid over the band: absolute, transparent, white — the photograph is the background. */ .onimg .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; border-bottom: 0; color: #fff; } /* ---------- the band ---------- */ .band { position: relative; overflow: hidden; background: #0d0c0b; } .band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) contrast(1.12) brightness(.94); } /* The veil has to earn legibility against a BRIGHT photograph, not just a dark one: the live band is a floodlit arena, where a 5% wash left the kicker unreadable. It darkens hard from the middle down, where all the text sits. */ .band .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 9, 8, .6) 0 15%, rgba(10, 9, 8, .18) 32%, rgba(10, 9, 8, .74) 62%, rgba(10, 9, 8, .93)); } .band__in { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(420px, 76vh, 760px); padding-bottom: clamp(var(--s5), 4vw, var(--s6)); } .band__kick { color: #f3c9bd; margin: 0 0 var(--s4); } .band__h1 { color: #fff; font-size: clamp(2.6rem, 10vw, 7.4rem); letter-spacing: -.015em; text-wrap: balance; } .band__facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s5) 0 0; color: #e6e1da; font-size: .94rem; } .band__facts b { color: #fff; font-weight: 600; } .cap { font-size: .74rem; color: var(--mut); padding-block: var(--s3) 0; margin: 0; } /* ---------- the page body ---------- */ .longread { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(var(--s5), 4vw, var(--s7)); padding-block: clamp(var(--s5), 4vw, var(--s6)) var(--s7); align-items: start; } /* `min-width: 0` and a link that may break anywhere: without both, a long page title in the index sets the grid track's min-content width and the whole page scrolls sideways at 360px. Measured live; test-guarded. */ .toc { position: sticky; top: var(--s5); min-width: 0; font-size: .88rem; } .toc__list a, .toc__nav a { overflow-wrap: anywhere; } .toc__label { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); margin: 0 0 var(--s3); } .toc__label + * + .toc__label, .toc__list + .toc__label { margin-top: var(--s5); } .toc__list, .toc__nav { list-style: none; margin: 0 0 var(--s4); padding: 0; } .toc__list li, .toc__nav li { margin-bottom: var(--s2); } .toc a { color: var(--ink-2); text-decoration: none; } .toc a:hover, .toc a[aria-current="page"] { color: var(--red); } .longform { max-width: 100%; } .kicker { color: var(--mut); margin: 0 0 var(--s4); } .lr-title { font-size: clamp(2.1rem, 6vw, 4.2rem); letter-spacing: -.015em; margin: 0 0 var(--s5); text-wrap: balance; } .lr-portrait { margin: 0 0 var(--s5); max-width: 420px; } .lr-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--pap-2); } .lede { padding-block: clamp(var(--s5), 5vw, var(--s7)) clamp(var(--s4), 3vw, var(--s5)); } .lede p { font-family: var(--font-display); font-size: clamp(1.4rem, 3.2vw, 2.4rem); line-height: 1.18; margin: 0; max-width: 26ch; } .lead { font-size: 1.1rem; color: var(--ink-2); } /* A club's opening slot keeps its own `

` (the disambiguation contract needs it — see club_index.html.j2), so it cannot go headingless like a player's `.lede`; this only gives its first paragraph the same weight a lead paragraph gets elsewhere. */ .lede-section > p:first-of-type { font-size: 1.2rem; color: var(--ink-2); } /* ---------- the figure row ---------- */ .figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); border-block: 1px solid var(--hair); } .figs div { padding: var(--s5) var(--s2); border-right: 1px solid var(--hair); } .figs div:last-child { border-right: 0; } .figs b { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: .95; font-variant-numeric: tabular-nums; } .figs b i { font-style: normal; font-size: .45em; color: var(--mut); } .figs span { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin-top: var(--s2); } /* ---------- prose ---------- */ /* The reading column is CENTRED, not left-hugged. Left-aligned inside a wide container it piled every spare pixel on the right — at a 1250 px window that is nearly half the screen, and it reads as a broken layout rather than as a margin. Centred, the same whitespace reads as a page. The measure is also wider than the classic 64ch: these are short sections with headings, not a novel. */ .prose { max-width: var(--measure); margin-inline: auto; padding-block: clamp(var(--s5), 3vw, var(--s6)) 0; } /* A heading must never wrap beside a floated figure: its first line ends up alone and off to one side, which reads as a broken page. Clear first, then set. */ .prose h2 { clear: both; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.08; margin: 0 0 var(--s4); text-wrap: balance; } .prose h3 { clear: both; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: var(--s5) 0 var(--s3); } .prose p { margin: 0 0 var(--s4); color: var(--ink-2); } .prose ul, .prose ol { margin: 0 0 var(--s4) var(--s5); padding: 0; } .prose li { margin-bottom: var(--s2); } .note { font-size: .84rem; color: var(--mut); margin: var(--s4) 0 0; } /* ---------- palmarès and the split ---------- */ .pal { padding-block: clamp(var(--s5), 5vw, var(--s6)); } .pal h2, .sec h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2.3rem); margin: 0 0 var(--s5); } .pal ul, .pal-split { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); } .pal li, .pal-split li { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) auto; gap: var(--s4); align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--hair); } .pal b, .pal-split b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--red); font-variant-numeric: tabular-nums; } .pal span, .pal-split span { font-size: 1.05rem; } .pal em, .pal-split em { font-style: normal; font-size: .8rem; color: var(--mut); font-variant-numeric: tabular-nums; text-align: right; } /* ---------- tables ---------- The numeric class and the nowrap modifier stay separate: merged, a 300-character trophy list cannot wrap and the page scrolls sideways. That was a live defect; it is test-guarded. ---------------------------------------------------------------------------------- */ .sec { padding-block: clamp(var(--s5), 5vw, var(--s6)); } .data-figure__caption, .tbl-cap { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin: var(--s5) 0 var(--s3); } .table-scroll { overflow-x: auto; } .table-scroll:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .data-table, .meta-row { width: 100%; border-collapse: collapse; font-size: .95rem; } .data-table caption { text-align: left; } .data-table th, .meta-row th { text-align: left; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--ink); white-space: nowrap; } .data-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--hair); vertical-align: top; overflow-wrap: anywhere; } .meta-row td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--hair); vertical-align: top; overflow-wrap: anywhere; } .data-table td:first-child { overflow-wrap: break-word; } .data-table tr.now td { color: var(--red); } .data-table__num { text-align: right; font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; } .data-table__numh { text-align: right; } .data-table__nowrap { white-space: nowrap; } /* Club pages (Plan A2): the squad list reads as this theme's own data table, warm paper ground and a serif-red accent link, matching .data-table's idiom exactly. */ table.squad { width: 100%; border-collapse: collapse; font-size: .95rem; margin-bottom: var(--s6); } table.squad th { text-align: left; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--ink); white-space: nowrap; } table.squad td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--hair); overflow-wrap: anywhere; } table.squad a { color: var(--red); font-weight: 600; text-decoration: none; } table.squad a:hover { text-decoration: underline; } .data-table--kv { max-width: 640px; } .cell-list { list-style: none; margin: 0; padding: 0; } .cell-list li { font-size: .9rem; overflow-wrap: anywhere; } .stats-kv { list-style: none; margin: 0; padding: 0; } .stats-kv li { font-size: .9rem; overflow-wrap: anywhere; } .trophies { margin: 0; padding-left: var(--s5); } .trophies li { margin-bottom: var(--s2); overflow-wrap: anywhere; } .src.small { font-size: .8rem; color: var(--mut); } /* ---------- figures in the prose ---------- */ .inline-figure { margin: 0 0 var(--s4); max-width: 240px; } /* `height: auto` is load-bearing, not tidiness: the macro emits the image's real `width`/`height` attributes (good for layout stability), and without this the ATTRIBUTE height wins over `aspect-ratio` — a 3840x2571 photo rendered 240px wide and 2571px TALL, a sliver down the whole page. That is the defect the 2026-09-16 review reported as "вторая картинка вытянута вниз, заезжает на текст". */ .inline-figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--pap-2); } /* A landscape source gets a landscape box. Forcing a 4/5 portrait crop on a wide photo keeps a vertical sliver of it and throws the subject away. */ .inline-figure--wide { max-width: 380px; } .inline-figure--wide img { aspect-ratio: 3 / 2; } .inline-figure--right { float: right; margin-left: var(--s5); } .inline-figure--left { float: left; margin-right: var(--s5); } .credit { font-size: .72rem; color: var(--mut); margin-top: var(--s2); line-height: 1.4; } /* ---------- news ---------- */ .news-list { list-style: none; margin: var(--s5) 0 0; padding: 0; border-top: 1px solid var(--hair); } .news-item { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s2) var(--s5); padding-block: var(--s5); border-bottom: 1px solid var(--hair); align-items: baseline; } .news__date { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); font-variant-numeric: tabular-nums; } .news__link { grid-column: 2; font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.8rem); line-height: 1.12; color: var(--ink); text-decoration: none; box-shadow: inset 0 -1px 0 var(--red); overflow-wrap: anywhere; } a.news__link:hover { color: var(--red); } .news__link--plain { box-shadow: inset 0 -1px 0 var(--hair); } .news__src { grid-column: 2; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); } .news__prose, .news__summary { grid-column: 2; margin: 0; color: var(--ink-2); max-width: var(--measure); } .news-archive { padding-block: clamp(var(--s5), 4vw, var(--s6)); } .news-archive h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 var(--s4); } .news-item--archive { padding-block: var(--s3); } /* ---------- FAQ, see also, colophon ---------- */ .faq { padding-block: clamp(var(--s5), 4vw, var(--s6)); } .faq h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2.3rem); margin: 0 0 var(--s5); } .faq__list { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } .faq__item { border-top: 1px solid var(--hair); padding-top: var(--s4); } .faq__q { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.15; margin: 0 0 var(--s2); } .faq__a { margin: 0; color: var(--ink-2); } .see-also { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; padding-top: clamp(var(--s5), 3vw, var(--s6)); } .see-also__label { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); margin: 0; } .see-also__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); } .see-also__list a { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none; border: 1px solid var(--ink); padding: var(--s2) var(--s4); } .see-also__list a:hover { background: var(--ink); color: var(--pap); } .site-footer { border-top: 1px solid var(--hair); } .site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding-block: var(--s5) var(--s6); font-size: .78rem; color: var(--mut); align-items: baseline; } .site-footer__updated, .site-footer__disclaimer { margin: 0; } .site-footer__disclaimer { max-width: 62ch; } .site-footer__disclaimer strong { color: var(--ink-2); } .site-footer__nav { margin-left: auto; } .site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s4); } .site-footer__nav a { color: var(--mut); text-decoration: none; } .site-footer__nav a:hover { color: var(--red); } @media (max-width: 900px) { /* Wrapped, eight uppercase links turn the bar into a block that fills the screen. */ .site-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .site-nav ul::-webkit-scrollbar { display: none; } /* `1fr` is `minmax(auto, 1fr)` and still floors at min-content, which is exactly how the TOC widened the page at 390px. The zero floor is the whole fix. */ .longread { grid-template-columns: minmax(0, 1fr); } .toc { position: static; border-bottom: 1px solid var(--hair); padding-bottom: var(--s4); } .news-item { grid-template-columns: 1fr; } .news__link, .news__src, .news__prose, .news__summary { grid-column: 1; } .pal li, .pal-split li { grid-template-columns: 4.4rem minmax(0, 1fr); } .pal em, .pal-split em { grid-column: 2; text-align: left; } .inline-figure--right, .inline-figure--left { float: none; margin-inline: 0; max-width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* --------------------------------------------------------------------------- Club squad grid, squad filter and the home page's section doors (2026-09-16 design review). Three rules matter here and are repeated in every theme because each expresses them in its own tokens: 1. A squad is faces, not a list of names. `_shared/_squad_grid.html.j2`. 2. A portrait tile is 3:4 and the photo is cropped to it from the TOP — a centred crop on a 4:3 source cuts heads off. 3. Nothing here may be the only route to a player's card: with JavaScript off every `.pc` is visible and the filter is inert. --------------------------------------------------------------------------- */ .sqfilter { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s5); } .sqchip { font: inherit; font-size: .88rem; cursor: pointer; padding: var(--s1) var(--s3); border-radius: 999px; transition: background-color .14s ease, color .14s ease, border-color .14s ease; background: #fff; color: var(--mut); border: 1px solid var(--hair); } .sqchip i { font-style: normal; opacity: .62; margin-left: .35em; font-variant-numeric: tabular-nums; } .sqchip:hover { border-color: var(--red); color: var(--ink); } .sqchip.is-on { background: var(--red); border-color: var(--red); color: #fff; } .pgrid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: var(--s4); } .pc { margin: 0; } .pc[hidden] { display: none; } .pc-in { display: flex; flex-direction: column; height: 100%; text-decoration: none; overflow: hidden; background: #fffdf9; border: 1px solid var(--hair); border-radius: 2px; } .pc--link .pc-in { transition: transform .15s ease, border-color .15s ease; } .pc--link .pc-in:hover { transform: translateY(-3px); border-color: var(--red); } .pc-ph { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #ece8e1; } .pc-ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; } .pc-initials { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; letter-spacing: .04em; color: var(--mut); font-family: var(--font-display); } .pc-body { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); } .pc-pos { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); } .pc-name { font-size: .96rem; font-weight: 600; line-height: 1.25; color: var(--ink); } .pc-site { margin-top: var(--s1); font-size: .74rem; font-weight: 600; overflow-wrap: anywhere; color: var(--red); } .doors__lead { color: var(--mut); margin: 0 0 var(--s5); } .doorgrid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: var(--s4); } .door { margin: 0; } .door a { display: flex; flex-direction: column; gap: var(--s2); height: 100%; padding: var(--s4); text-decoration: none; transition: border-color .15s ease, transform .15s ease; background: #fffdf9; border: 1px solid var(--hair); border-radius: 2px; } .door a:hover { transform: translateY(-2px); border-color: var(--red); } .door__k { font-size: 1.05rem; font-weight: 700; color: var(--ink); } .door__p { font-size: .86rem; line-height: 1.5; color: var(--mut); } .door__go { margin-top: auto; padding-top: var(--s1); font-weight: 700; color: var(--red); } @media (prefers-reduced-motion: reduce) { .pc--link .pc-in, .door a { transition: none; } .pc--link .pc-in:hover, .door a:hover { transform: none; } } /* A club crest is a badge, not a portrait: fixed plate, CONTAINED, on a light ground so a dark emblem stays visible in every theme (2026-09-16 review). */ .lr-crest { margin: 0 0 var(--s4); width: 128px; } .lr-crest img { width: 128px; height: 128px; object-fit: contain; background: #fff; border: 1px solid var(--hair); border-radius: 3px; padding: var(--s2); aspect-ratio: auto; } .lr-crest figcaption { font-size: .68rem; color: var(--mut); margin-top: var(--s1); } /* Sibling club sites — the league's other clubs, on every club page. Quiet by design: it is a way out of the site, not a call to action, so it reads as a footnote rail. */ .siblings { max-width: var(--maxw); margin: var(--s7) auto var(--s6); padding-inline: clamp(var(--s4), 4vw, var(--s7)); border-top: 1px solid var(--hair); padding-top: var(--s5); } .siblings__h { font-family: var(--font-body); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin: 0 0 var(--s3); } .siblings__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); } .siblings__item { display: flex; align-items: baseline; gap: var(--s2); } .siblings__link { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); } .siblings__link:hover { color: var(--red); border-bottom-color: var(--red); } .siblings__city { font-size: .78rem; color: var(--mut); } /* Provenance rail — the club's own site and its Wikidata item, checkable by the reader. Set below the content and above the siblings row, quieter than either. */ .sources { max-width: var(--maxw); margin: var(--s6) auto 0; padding-inline: clamp(var(--s4), 4vw, var(--s7)); } .sources__h { font-family: var(--font-body); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin: 0 0 var(--s2); } .sources__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: .85rem; } .sources__list a { color: var(--ink-2); } .sources__list a:hover { color: var(--red); } /* Arena data on the arena page — a definition list, set as a two-column rail on wide screens and stacked rows on a phone. */ .arenafacts { margin: 0 0 var(--s5); padding: var(--s4) 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3) var(--s5); } .arenafacts__row { display: flex; flex-direction: column; gap: var(--s1); } .arenafacts dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); } .arenafacts dd { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; } /* ========================================================================== Club blocks on the longread home page — the numbers band, the squad snapshot and the news preview. These partials are shared with the other two themes; before 2026-09-16 longread's home page simply did not include them, so none of their classes had a rule here and they degraded to raw lists. Longread's take: no cards and no fills, only rules and the display face — the same restraint the rest of this theme keeps. ========================================================================== */ .numbers { margin: var(--s6) 0; } .numgrid { list-style: none; margin: 0; padding: var(--s4) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s4); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); } .numgrid li { display: flex; flex-direction: column; gap: var(--s1); } .numgrid b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: .9; font-variant-numeric: tabular-nums; } .numgrid span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); } .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); border-bottom: 1px solid var(--ink); padding-bottom: var(--s2); margin-bottom: var(--s4); } .sec-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1; margin: 0; } .more { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .snapshot { margin: var(--s6) 0; } .snapgrid { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s4); } .snapgrid b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; } .snapgrid b i { font-style: normal; font-size: .45em; color: var(--mut); margin-left: .15em; } .snapgrid span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); } .snaprow { margin: 0 0 var(--s2); font-size: .92rem; color: var(--ink-2); } .snaprow b { color: var(--ink); } .snaprow .c { font-variant-numeric: tabular-nums; color: var(--red); } .faces { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--s3); } .faces a, .faces > li > span { display: flex; flex-direction: column; gap: var(--s2); text-decoration: none; color: var(--ink); } .faces img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--pap-2); filter: grayscale(1); transition: filter .2s ease; } .faces a:hover img { filter: none; } .faces .ini { display: grid; place-items: center; aspect-ratio: 3 / 4; background: var(--pap-2); font-family: var(--font-display); font-size: 1.6rem; color: var(--mut); } .faces em { font-style: normal; font-size: .8rem; line-height: 1.25; } .faces a:hover em { color: var(--red); } .newsprev { margin: var(--s6) 0; } .nprev { list-style: none; margin: 0; padding: 0; } .nprev li { border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) 0; color: var(--ink); } .nmeta { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-variant-numeric: tabular-nums; } .ntitle { font-size: 1.02rem; line-height: 1.35; } /* ---------- breadcrumb ---------- See the editorial sheet for why this arrived late: the partial shipped unstyled on every sub-page of all 151 sites, rendering as a numbered list. */ .breadcrumb { margin: 0 0 var(--s4); } .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); } .breadcrumb li + li::before { content: "/"; margin-right: var(--s2); color: var(--hair); } .breadcrumb a { color: var(--mut); text-decoration: none; border-bottom: 1px solid transparent; } .breadcrumb a:hover { color: var(--ink); border-bottom-color: currentColor; } .breadcrumb [aria-current="page"] { color: var(--ink-2); } /* ---------- club transfers ---------- see editorial.css for why a season is one row. */ .transfers { padding-block: var(--s5); border-top: 1px solid var(--hair); } .tablewrap { overflow-x: auto; } .tt { width: 100%; border-collapse: collapse; font-size: .95rem; } .tt th { text-align: left; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--ink); white-space: nowrap; } .tt tbody th { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--hair); } .tt td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--hair); vertical-align: top; width: 40%; } .mv { list-style: none; margin: 0; padding: 0; } .mv li { padding-left: var(--s4); position: relative; margin-bottom: 2px; } .mv li::before { position: absolute; left: 0; font-weight: 700; } .mv.in li::before { content: "+"; color: var(--red); } .mv.out li::before { content: "\2212"; color: var(--mut); } .tt .none { color: var(--mut); }