/* 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 PALAZZETTO — the broadcast-graphic theme (redesign approved 2026-08-27). A dark arena ground; the page opens with identity (jersey, club, series) and a scoreboard of the player's real career figures, then charts, then prose. Anton for headlines, Barlow for reading, Barlow Semi Condensed for labels and data. ALIGNMENT IS A REQUIREMENT HERE, not taste — it is what separates "published" from "generated", and it is enforced by three rules this file never breaks: 1. every gap and pad comes from the --s scale below (no ad-hoc pixel values); 2. every numeric table cell is right-aligned with tabular figures, so digits form a straight edge; 3. every image sits in a fixed aspect-ratio box with object-fit: cover, so a portrait and a wide action shot never change the page's rhythm. The club colours arrive as --club/--club2 on , from `Dossier.club_colors`. ========================================================================== */ :root { --ink: #0a0c10; --ink-2: #11151c; --card: #161b24; --line: #232a35; --txt: #f2f4f7; --txt-2: #a8b1bf; /* Contrast measured with Lighthouse on real generated pages, 2026-09-17: the previous value failed WCAG AA for normal text (#6f7889 on the page ground gave 4.40, the floor is 4.5) across 8 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. */ --muted: #727b8c; --club: #12305e; /* overridden per club on */ --club2: #f5c531; --maxw: 1180px; --measure: 74ch; /* The one spacing scale. Nothing in this file spaces itself any other way. */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2.25rem; --s7: 3.5rem; --font-display: "Anton", Impact, "Haettenschweiler", sans-serif; --font-body: "Barlow", -apple-system, "Segoe UI", system-ui, sans-serif; --font-cond: "Barlow Semi Condensed", "Barlow", sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--txt); font-family: var(--font-body); font-size: 1.03rem; line-height: 1.62; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--club2); text-underline-offset: 2px; } a:hover { color: var(--txt); } :focus-visible { outline: 2px solid var(--club2); outline-offset: 2px; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(var(--s4), 3vw, var(--s6)); } .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(--club2); color: var(--ink); padding: var(--s2) var(--s3); } /* ---------- top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 40; background: rgba(10, 12, 16, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); } .topbar__in { display: flex; align-items: center; gap: var(--s4); min-height: 58px; } .ident { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: inherit; } .ident__badge { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; background: var(--club2); color: var(--club); font-family: var(--font-display); font-size: 1.15rem; } .ident__text { display: flex; flex-direction: column; line-height: 1.1; } .ident__name { font-family: var(--font-cond); font-weight: 700; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .ident__meta { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; } .mainnav { margin-left: auto; } .mainnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); } .mainnav a { font-family: var(--font-cond); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; color: var(--txt-2); text-decoration: none; padding: var(--s2) var(--s3); border-bottom: 2px solid transparent; display: block; } .mainnav a:hover { color: var(--txt); } .mainnav a[aria-current="page"] { color: var(--club2); border-bottom-color: var(--club2); } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; background: #05070a; } .hero__ph { position: absolute; inset: 0; } .hero__ph img { position: absolute; right: 0; bottom: 0; height: 118%; width: auto; filter: grayscale(1) contrast(1.22) brightness(1.04); mix-blend-mode: screen; opacity: .5; } .hero__ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 82% 105%, color-mix(in srgb, var(--club) 85%, transparent), transparent 62%); } .hero__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(75deg, #05070a 0 38%, rgba(5, 7, 10, .7) 66%, rgba(5, 7, 10, .15)); } .hero__in { position: relative; z-index: 2; padding-block: clamp(var(--s6), 6vw, var(--s7)) 0; } .hero__no { position: absolute; right: clamp(var(--s4), 4vw, var(--s7)); top: clamp(var(--s4), 3vw, var(--s6)); z-index: 1; font-family: var(--font-display); font-size: clamp(7rem, 20vw, 17rem); line-height: .8; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--club2) 34%, transparent); } .hero__h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 8vw, 6rem); line-height: .94; letter-spacing: .005em; margin: 0; text-wrap: balance; } .hero__dek { max-width: 46ch; color: var(--txt-2); font-size: clamp(1rem, 1.6vw, 1.14rem); margin: var(--s4) 0 0; } .hero__cap { position: relative; z-index: 2; padding-block: var(--s5) var(--s4); margin: 0; font-family: var(--font-cond); font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; } .chiprow { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); padding: 0; } .chip { font-family: var(--font-cond); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; padding: var(--s1) var(--s2); background: var(--club2); color: var(--club); } .chip--ghost { background: transparent; color: var(--txt-2); border: 1px solid var(--line); } /* page heroes (every non-index page) */ .pagehero { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--ink-2), var(--ink)); } .pagehero .wrap { padding-block: clamp(var(--s5), 4vw, var(--s6)); } .pagehero__h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.9rem, 5vw, 3.3rem); line-height: .98; margin: 0; text-wrap: balance; } .pagehero__dek { max-width: var(--measure); color: var(--txt-2); margin: var(--s4) 0 0; } /* ---------- scoreboard ---------- */ .board { background: var(--club); border-block: 1px solid rgba(255, 255, 255, .1); } .board__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .board__c { padding: var(--s4) var(--s2) var(--s4) 0; border-right: 1px solid rgba(255, 255, 255, .12); } .board__c:last-child { border-right: 0; } .board__lab { display: block; font-family: var(--font-cond); font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: color-mix(in srgb, #fff 62%, var(--club)); } .board__val { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1; margin-top: var(--s1); font-variant-numeric: tabular-nums; } .board__val i { font-style: normal; font-size: .55em; color: color-mix(in srgb, #fff 62%, var(--club)); } /* ---------- blocks ---------- */ main { padding-bottom: var(--s7); } .blk { padding-block: clamp(var(--s5), 4vw, var(--s6)); } /* 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. */ .blkhead { clear: both; display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s5); border-bottom: 1px solid var(--line); padding-bottom: var(--s3); } .blkhead h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.25rem, 2.6vw, 1.8rem); line-height: 1; margin: 0; } .blkhead__c { margin-left: auto; font-family: var(--font-cond); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--club2); } .note { font-size: .84rem; color: var(--muted); margin: var(--s4) 0 0; } /* 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; } .prose p { margin: 0 0 var(--s4); color: #dfe4ea; } .prose h3 { clear: both; font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 1rem; letter-spacing: .04em; margin: var(--s5) 0 var(--s2); } .prose ul, .prose ol { margin: 0 0 var(--s4) var(--s5); padding: 0; } .prose li { margin-bottom: var(--s2); } /* ---------- chart (CSS only; percentages come from the Dossier) ---------- */ /* `1fr` is `minmax(auto, 1fr)`: it floors at min-content, so a player with eleven closed seasons pushed the chart — and the whole page — past a 390px viewport. Michieletto has five bars and fit, which is exactly why this needed a sweep over all twenty sites. */ .chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(var(--s2), 2vw, var(--s5)); align-items: end; height: 210px; } .chart__b { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; height: 100%; gap: var(--s2); text-align: center; } .chart__fill { background: linear-gradient(180deg, var(--club2), color-mix(in srgb, var(--club2) 62%, #000)); position: relative; min-height: 3px; } .chart__fill b { position: absolute; top: -1.5rem; left: 0; right: 0; font-family: var(--font-display); font-size: 1.05rem; color: var(--txt); font-variant-numeric: tabular-nums; } .chart__b span { font-family: var(--font-cond); font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; overflow-wrap: anywhere; } /* ---------- trophy cabinet ---------- */ .cab { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .cab li { background: var(--card); padding: var(--s4); } .cab b { display: block; font-family: var(--font-display); font-size: 2.3rem; line-height: .9; color: var(--club2); font-variant-numeric: tabular-nums; } .cab strong { display: block; font-family: var(--font-cond); font-weight: 600; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; margin-top: var(--s2); } .cab span { display: block; font-size: .78rem; color: var(--muted); margin-top: var(--s1); font-variant-numeric: tabular-nums; } /* ---------- points split ---------- */ .split { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); } .split__r { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 5rem 4rem; align-items: center; gap: var(--s3); } .split__r em { font-style: normal; font-family: var(--font-cond); font-size: .86rem; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-2); } .split__t { height: 12px; background: var(--ink-2); border: 1px solid var(--line); } .split__t i { display: block; height: 100%; background: var(--club2); } .split__r b { text-align: right; font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; } .split__r small { text-align: right; font-family: var(--font-cond); font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; } /* ---------- tables: one look for every table on the site ---------- These rules carry a live fix forward and must not be merged into shorthand selectors: the `statistiche` tables once ran off the right edge because the numeric class also carried `nowrap`, so a 300-character trophy list could not wrap. Numerals and nowrap stay SEPARATE classes, every cell may wrap, and the scroll region is the safety net. Regression-guarded by tests/test_site_generator_render.py. ---------------------------------------------------------------------------------- */ .tbl-cap { font-family: var(--font-cond); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--club2); margin: var(--s5) 0 var(--s3); } .table-scroll { overflow-x: auto; } .table-scroll:focus-visible { outline: 2px solid var(--club2); outline-offset: 2px; } table.data { width: 100%; border-collapse: collapse; font-size: .93rem; } table.data--kv { max-width: 640px; } table.data caption { text-align: left; } table.data th { text-align: left; font-family: var(--font-cond); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); white-space: nowrap; } table.data td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; } /* `anywhere` split "Riconoscimen|ti" mid-word; the label column breaks only at need. */ table.data td:first-child { overflow-wrap: break-word; } table.data tbody tr:hover td { background: var(--ink-2); } table.data tr.is-now td { color: var(--club2); } /* Rule 2 of the alignment contract: numbers right, tabular figures, never centred. */ .data__num { text-align: right; font-family: var(--font-cond); font-variant-numeric: tabular-nums; } .data__numh { text-align: right; font-family: var(--font-cond); } .data__nowrap { white-space: nowrap; } .cell-list { list-style: none; margin: 0; padding: 0; } .cell-list li { font-family: var(--font-cond); font-size: .86rem; overflow-wrap: anywhere; } .stats-kv { list-style: none; margin: 0; padding: 0; } .stats-kv li { font-family: var(--font-cond); font-size: .86rem; overflow-wrap: anywhere; } .src.small { font-size: .8rem; color: var(--muted); } .trophies { margin: 0; padding-left: var(--s5); } .trophies li { margin-bottom: var(--s2); overflow-wrap: anywhere; } /* ---------------------------------------------------------------------------------- Club pages (Plan A2). Same broadcast idiom as table.data — dark ground, condensed caps headers, club-colour accent — because a club fact card and squad list ARE scoreboard-shaped data, not prose. ---------------------------------------------------------------------------------- */ .identrow { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); } /* White, not `--card`: Perugia's wordmark is dark graphics on transparency and disappeared entirely against the dark ground (2026-09-16 review). */ .club-crest { width: 88px; height: 88px; flex: 0 0 88px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: var(--s2); } /* A dedicated one-image section (the arena) never floats — `.inline-figure` is built to sit BESIDE prose, and a figure alone in its own section with nothing to wrap around it would just float into empty space. */ .club-figure { max-width: 640px; margin: 0 0 var(--s4); } /* `height: auto` for the same reason as `.inline-figure img`: the markup carries the image's real `height` attribute, which otherwise beats `aspect-ratio`. */ .club-figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink-2); } .factcard { width: 100%; max-width: 640px; border-collapse: collapse; font-size: .93rem; margin-bottom: var(--s6); } .factcard th, .factcard td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .factcard th { font-family: var(--font-cond); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); white-space: nowrap; } table.squad { width: 100%; border-collapse: collapse; font-size: .93rem; margin-bottom: var(--s6); } table.squad th { text-align: left; font-family: var(--font-cond); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); } table.squad td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; } table.squad tbody tr:hover td { background: var(--ink-2); } table.squad a { color: var(--club2); font-weight: 600; text-decoration: none; } table.squad a:hover { text-decoration: underline; } /* ---------- figures: rule 3 — one aspect box, always ---------- */ .inline-figure { margin: 0 0 var(--s4); max-width: 260px; } /* `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(--ink-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: 360px; } .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-family: var(--font-cond); font-size: .68rem; color: var(--muted); margin-top: var(--s2); line-height: 1.4; } /* ---------- news ---------- */ .news-list { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: var(--s4); } .news-item { background: var(--card); border: 1px solid var(--line); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); } .news__date { font-family: var(--font-cond); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--club2); font-variant-numeric: tabular-nums; } .news__link { font-family: var(--font-cond); font-weight: 700; font-size: 1.06rem; line-height: 1.22; text-transform: uppercase; letter-spacing: .01em; color: var(--txt); text-decoration: none; overflow-wrap: anywhere; } a.news__link:hover { color: var(--club2); } .news__link--plain { cursor: default; } .news__src { font-family: var(--font-cond); font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .news__prose { margin: 0; font-size: .93rem; color: var(--txt-2); } .news__summary { margin: 0; font-size: .93rem; color: var(--txt-2); } .news-archive { padding-block: clamp(var(--s5), 4vw, var(--s6)); } .news-archive h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin: 0 0 var(--s4); } .news-list--archive { grid-template-columns: 1fr; gap: var(--s2); } .news-item--archive { background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: var(--s3) 0; display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; } /* ---------- FAQ ---------- */ .faq { padding-block: clamp(var(--s5), 4vw, var(--s6)); } .faq h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.25rem, 2.6vw, 1.8rem); margin: 0 0 var(--s5); } .faq__list { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } .faq__item { border-left: 3px solid var(--club2); padding-left: var(--s4); } .faq__q { font-family: var(--font-cond); font-weight: 700; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 var(--s2); } .faq__a { margin: 0; color: var(--txt-2); } /* ---------- see also + footer ---------- */ .see-also { border-top: 1px solid var(--line); padding-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; } .see-also__label { font-family: var(--font-cond); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0; } .see-also__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); } .see-also__list a { font-family: var(--font-cond); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--txt); text-decoration: none; border: 1px solid var(--line); padding: var(--s2) var(--s3); display: block; } .see-also__list a:hover { border-color: var(--club2); color: var(--club2); } .sitefoot { border-top: 1px solid var(--line); background: #05070a; color: var(--muted); font-size: .84rem; } .sitefoot__in { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding-block: var(--s5); align-items: baseline; } .sitefoot__upd, .sitefoot__disc { margin: 0; } .sitefoot__disc { max-width: 62ch; } .sitefoot__disc strong { color: var(--txt-2); } .sitefoot__nav { margin-left: auto; } .sitefoot__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); } .sitefoot__nav a { color: var(--muted); text-decoration: none; font-family: var(--font-cond); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; } .sitefoot__nav a:hover { color: var(--club2); } @media (max-width: 720px) { /* The sticky bar must stay ONE row. Wrapped, eight nav links turned it into a five-row block that ate the whole first screen. The links scroll sideways inside their own track instead, and the club/position line — already in the hero's chip row — is dropped rather than wrapped to four lines beside a 34px badge. */ .topbar__in { gap: var(--s3); } .ident__meta { display: none; } .ident__name { font-size: .9rem; } .mainnav { margin-left: auto; min-width: 0; } .mainnav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .mainnav ul::-webkit-scrollbar { display: none; } .mainnav a { padding-inline: var(--s2); font-size: .76rem; } /* The outlined jersey number is a desktop flourish: at 390px it sat straight across the chip row. The badge in the bar already carries the number. */ .hero__no { display: none; } .board__c { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); } .chart { height: 160px; gap: var(--s1); } .chart__b span { font-size: .62rem; letter-spacing: 0; } .split__r { grid-template-columns: 5.5rem minmax(0, 1fr) 4rem; } .split__r small { display: none; } .inline-figure--right, .inline-figure--left { float: none; margin-inline: 0; max-width: 100%; } .news-item--archive { grid-template-columns: 1fr; gap: var(--s1); } } @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: var(--card); color: var(--muted); border: 1px solid var(--line); } .sqchip i { font-style: normal; opacity: .62; margin-left: .35em; font-variant-numeric: tabular-nums; } .sqchip:hover { border-color: var(--club); color: var(--txt); } .sqchip.is-on { background: var(--club); border-color: var(--club); 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: var(--card); border: 1px solid var(--line); border-radius: 3px; } .pc--link .pc-in { transition: transform .15s ease, border-color .15s ease; } .pc--link .pc-in:hover { transform: translateY(-3px); border-color: var(--club); } .pc-ph { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #10151d; } .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(--muted); 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(--muted); } .pc-name { font-size: .96rem; font-weight: 600; line-height: 1.25; color: var(--txt); } .pc-site { margin-top: var(--s1); font-size: .74rem; font-weight: 600; overflow-wrap: anywhere; color: #4d86d8; } .doors__lead { color: var(--muted); 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: var(--card); border: 1px solid var(--line); border-radius: 3px; } .door a:hover { transform: translateY(-2px); border-color: var(--club); } .door__k { font-size: 1.05rem; font-weight: 700; color: var(--txt); } .door__p { font-size: .86rem; line-height: 1.5; color: var(--muted); } .door__go { margin-top: auto; padding-top: var(--s1); font-weight: 700; color: #4d86d8; } @media (prefers-reduced-motion: reduce) { .pc--link .pc-in, .door a { transition: none; } .pc--link .pc-in:hover, .door a:hover { transform: none; } } /* --------------------------------------------------------------------------- Club home page, rebuilt 2026-09-16. The old page had three different left edges — centred `.prose`, a 640px-capped figure and a content-width table — which is what "картинка съехала, текст по центру" described. Everything below shares the wrap's edges and one grid. --------------------------------------------------------------------------- */ .ident-kick { font-family: var(--font-cond); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s1); } .identrow h1 { margin: 0; } .club-band { margin: 0 0 var(--s5); } .club-band img { width: 100%; height: auto; max-height: min(52vh, 460px); aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink-2); border-radius: 3px; } .club-band figcaption { font-size: .68rem; color: var(--muted); margin-top: var(--s2); } /* The numbers strip: countable facts above the fold, the way the pages that win these queries open. */ .numbers { padding-block: 0 var(--s5); } .numgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .numgrid li { background: var(--card); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s1); } .numgrid b { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--txt); font-variant-numeric: tabular-nums; } .numgrid span { font-family: var(--font-cond); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* Main column + sticky data rail, sharing one left edge. */ .sheet { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s6); align-items: start; } .sheet-main { min-width: 0; } .sheet-rail { position: sticky; top: var(--s5); display: grid; gap: var(--s5); } .prose--flush { max-width: none; margin-inline: 0; } .sheet .factcard { width: 100%; } .railblk { border: 1px solid var(--line); background: var(--card); padding: var(--s4); } .railhead { font-family: var(--font-cond); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s3); } .railpalm { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s2); } .railpalm li { display: flex; gap: var(--s3); align-items: baseline; } .railpalm b { font-family: var(--font-display); font-size: 1.2rem; color: #4d86d8; min-width: 1.8ch; font-variant-numeric: tabular-nums; } .railpalm span { font-size: .86rem; color: var(--txt); } .railnote { font-size: .74rem; color: var(--muted); margin: 0; } .railnote a { color: #4d86d8; } /* Squad snapshot: what the team IS, not only who is in it. */ .snapshot { padding-block: var(--s5); border-top: 1px solid var(--line); } .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); } .sec-head h2 { margin: 0; } .more { font-family: var(--font-cond); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: #4d86d8; text-decoration: none; white-space: nowrap; } .more:hover { text-decoration: underline; } .snapgrid { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s3); } .snapgrid li { background: var(--card); border: 1px solid var(--line); padding: var(--s3); } .snapgrid b { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--txt); font-variant-numeric: tabular-nums; } .snapgrid b i { font-style: normal; font-size: .9rem; color: var(--muted); margin-left: 2px; } .snapgrid span { font-family: var(--font-cond); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .snaprow { font-size: .9rem; color: #dfe4ea; margin: 0 0 var(--s2); } .snaprow b { font-family: var(--font-cond); text-transform: uppercase; font-size: .76rem; letter-spacing: .07em; color: var(--muted); margin-right: var(--s2); } .snaprow .c { color: #4d86d8; font-variant-numeric: tabular-nums; } .faces { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s3); } .faces a, .faces > li > span { display: block; text-decoration: none; } .faces img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 18%; background: var(--ink-2); border-radius: 3px; } .faces .ini { display: grid; place-items: center; aspect-ratio: 3 / 4; background: var(--ink-2); font-family: var(--font-display); color: var(--muted); border-radius: 3px; } .faces em { display: block; font-style: normal; font-size: .78rem; line-height: 1.25; margin-top: var(--s2); color: var(--txt); } .faces a:hover em { color: #4d86d8; } /* Latest news on the front door. */ .newsprev { padding-block: var(--s5); border-top: 1px solid var(--line); } .nprev { list-style: none; margin: 0; padding: 0; } .nprev li { border-top: 1px solid var(--line); display: grid; gap: var(--s1); padding: var(--s3) 0; } .nprev li:last-child { border-bottom: 1px solid var(--line); } .nmeta { font-family: var(--font-cond); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .ntitle { font-size: .98rem; line-height: 1.35; color: var(--txt); } @media (max-width: 900px) { .sheet { grid-template-columns: 1fr; } .sheet-rail { position: static; } } /* Sibling club sites — see longread.css. Factsheet keeps it tabular, like everything else on the sheet: a labelled row of entries, no cards, no ornament. */ .siblings { max-width: var(--maxw); margin: var(--s6) auto var(--s5); padding-inline: clamp(var(--s4), 4vw, var(--s6)); border-top: 1px solid var(--line); padding-top: var(--s4); } .siblings__h { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s2); } .siblings__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); } .siblings__item { display: flex; align-items: baseline; gap: var(--s2); } .siblings__link { font-weight: 600; color: var(--txt); text-decoration: none; border-bottom: 1px solid var(--line); } .siblings__link:hover { color: var(--club2); border-bottom-color: currentColor; } .siblings__city { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; } /* Provenance rail — see longread.css. */ .sources { max-width: var(--maxw); margin: var(--s5) auto 0; padding-inline: clamp(var(--s4), 4vw, var(--s6)); } .sources__h { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); 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: .82rem; } .sources__list a { color: var(--txt-2); } .sources__list a:hover { color: var(--club2); } /* Arena data on the arena page — see longread.css. */ .arenafacts { margin: 0 0 var(--s5); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .arenafacts__row { background: var(--card); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s1); } .arenafacts dt { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .arenafacts dd { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--txt); font-variant-numeric: tabular-nums; } /* ---------- 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-family: var(--font-cond); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .breadcrumb li + li::before { content: "/"; margin-right: var(--s2); color: var(--line); } .breadcrumb a { color: var(--txt-2); text-decoration: none; border-bottom: 1px solid transparent; } .breadcrumb a:hover { color: var(--club2); border-bottom-color: currentColor; } .breadcrumb [aria-current="page"] { color: var(--txt-2); } /* ---------- club transfers ---------- see editorial.css for why a season is one row. */ .transfers { padding-block: var(--s5); border-top: 1px solid var(--line); } .tablewrap { overflow-x: auto; } .tt { width: 100%; border-collapse: collapse; font-size: .93rem; } .tt th { text-align: left; font-family: var(--font-cond); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); white-space: nowrap; } .tt tbody th { font-size: .93rem; letter-spacing: 0; text-transform: none; color: inherit; font-variant-numeric: tabular-nums; } .tt td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; width: 40%; } .tt a { color: var(--club2); font-weight: 600; text-decoration: none; } .tt a:hover { text-decoration: underline; } .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(--club2); } .mv.out li::before { content: "\2212"; color: var(--muted); } .tt .none { color: var(--muted); }