/* ============================================================================ SUFC FOUNDATIONS — the panel + the type system ---------------------------------------------------------------------------- Goes into style.css, above everything else. Adds tokens and four component blocks. Touches NO existing selector except .panel-title, .site-footer and the numeral list in §5 — all three deliberately, all three called out in the migration notes. No build step. No new font family. Plain CSS custom properties. ============================================================================ */ /* --------------------------------------------------------------------------- 1. TOKENS Inert until something consumes them, so this whole block is safe to ship on day one against all 47 templates. --------------------------------------------------------------------------- */ :root{ /* -- the two canonical stacks. Nothing else declares a font-family. ------- */ --font-serif:'Playfair Display','Iowan Old Style',Georgia,'Times New Roman',serif; --font-sans:'Source Sans 3','Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-num:var(--font-sans); --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* -- the scale: 9 steps, replacing 77 values ----------------------------- */ --fs-micro:0.75rem; /* 12px — uppercase micro-labels ONLY, never prose */ --fs-xs:0.8125rem; /* 13px — dense table cells, footnotes */ --fs-s:0.875rem; /* 14px — small print, meta lines, table headers */ --fs-m:1rem; /* 16px — body. The default. Never go below on prose. */ --fs-l:1.125rem; /* 18px — lede, intro paragraph */ --fs-xl:1.375rem; /* 22px — h3 / panel title / card title */ --fs-2xl:1.75rem; /* 28px — h2 / section head */ --fs-3xl:clamp(2rem,1.4rem + 2.6vw,2.75rem); /* h1 */ --fs-4xl:clamp(2.25rem,1.5rem + 3.6vw,3.5rem); /* display figures only */ /* -- line-heights -------------------------------------------------------- */ --lh-tight:1.08; /* display + h1 */ --lh-head:1.22; /* h2–h4 */ --lh-body:1.65; /* prose. Older eyes: generous, not fashionable. */ --lh-ui:1.35; /* labels, table cells, buttons */ /* -- weights. NOTE: Source Sans 3 is loaded at 300/400/600 only. --------- */ --fw-body:400; --fw-med:600; /* strongest sans weight currently loaded */ --fw-head:700; /* Playfair */ --fw-display:900; /* Playfair */ --tracking-label:0.16em; /* uppercase micro-labels */ --tracking-head:-0.015em; /* Playfair at large sizes needs pulling in */ /* -- panel --------------------------------------------------------------- */ --panel-bg:var(--white,#fff); --panel-line:var(--border,#d1d9ee); --panel-line-strong:#c8cfe0; --panel-radius:6px; --panel-shadow:0 1px 2px rgba(0,32,90,.04),0 8px 28px -14px rgba(0,32,90,.22); --panel-shadow-lift:0 2px 4px rgba(0,32,90,.06),0 16px 40px -16px rgba(0,32,90,.34); --panel-pad:24px; --panel-pad-tight:16px; } @media (max-width:520px){ :root{--panel-pad:18px;--panel-pad-tight:14px} } /* --------------------------------------------------------------------------- 2. THE PANEL — one component, four variants. Choose: is it clickable? --nav. Does it hold controls? --filter. Does it hold a table edge-to-edge? --flush. Otherwise plain .sufc-panel. --------------------------------------------------------------------------- */ .sufc-panel{ background:var(--panel-bg); border:1px solid var(--panel-line); border-radius:var(--panel-radius); box-shadow:var(--panel-shadow); padding:var(--panel-pad); } .sufc-panel + .sufc-panel{margin-top:var(--panel-pad)} /* ...but not inside a grid or flex row, where gap already does the spacing. Without this the adjacent-sibling margin pushed every card except the first down by 24px, so a row of three gallery cards sat in a staircase. */ .sufc-grid > .sufc-panel + .sufc-panel{margin-top:0} /* -- variant: filter. Controls, not content. Recessed, not raised. --------- */ .sufc-panel--filter{ background:var(--off-white,#f4f6fb); box-shadow:none; padding:var(--panel-pad-tight) var(--panel-pad); } /* -- variant: flush. Panel holds a full-bleed table or list. --------------- */ .sufc-panel--flush{padding:0;overflow:hidden} .sufc-panel--flush > .sufc-panel-head{padding:var(--panel-pad-tight) var(--panel-pad)} .sufc-panel--flush > .sufc-panel-foot{padding:var(--panel-pad-tight) var(--panel-pad)} /* -- variant: nav. The whole card is the link. ----------------------------- */ .sufc-panel--nav{ display:flex;flex-direction:column;gap:6px; position:relative;min-height:44px; color:inherit;text-decoration:none; border-top:3px solid var(--royal-blue,#003087); transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease; } .sufc-panel--nav:hover{box-shadow:var(--panel-shadow-lift);transform:translateY(-2px)} .sufc-panel--nav:hover .sufc-panel-title{text-decoration:underline;text-underline-offset:3px} .sufc-panel--nav .sufc-panel-cue{ margin-top:6px;padding-top:12px; display:flex;align-items:center;justify-content:space-between;gap:12px; font-size:var(--fs-s);font-weight:var(--fw-med);color:var(--royal-blue,#003087); } /* -- panel header row ------------------------------------------------------ */ .sufc-panel-head{ display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; padding-bottom:12px;margin-bottom:var(--panel-pad-tight); border-bottom:1px solid var(--panel-line); } .sufc-panel-head-note{margin-left:auto;font-size:var(--fs-s);color:var(--text-light,#6b7280)} /* -- panel title. Replaces all four definitions of .panel-title. ----------- */ .sufc-panel-title,.panel-title{ font-family:var(--font-serif); font-size:var(--fs-xl); font-weight:var(--fw-head); line-height:var(--lh-head); letter-spacing:var(--tracking-head); color:var(--royal-blue,#003087); margin:0; } /* the gold rule is the brand mark — keep it, but only on section-level titles */ .sufc-panel > .sufc-panel-title:first-child, .sufc-panel > .panel-title:first-child{ padding-bottom:8px;margin-bottom:var(--panel-pad-tight); border-bottom:2px solid var(--gold-accent,#c8a84b); width:fit-content;max-width:100%; } /* :first-child on the left-hand side as well, so this beats the gold-rule selector above at equal specificity instead of losing to it by one pseudo-class. It only ever lost when the title WAS the first child, which on /visuals and /data-cleansing it never was — an icon
sat in front of it. Removing those icons made the title first, and eight nav cards silently grew the section-title gold rule this line exists to prevent. */ .sufc-panel--nav .sufc-panel-title, .sufc-panel--nav > .sufc-panel-title:first-child{border-bottom:none;padding-bottom:0;margin-bottom:2px;font-size:var(--fs-xl)} /* -- the card header bar --------------------------------------------------- The royal-blue rule across the top of a --flush panel: "Top Scorers", "Goalkeeper Records", "Record by Day of Year". Fourteen templates each declared their own near-copy of it under their own prefix — the same fourteen lines the panel refactor found seventeen of. Same fix, same list: one rule, the old class names kept as aliases so page CSS and scripts that target them still work. The fourteen had drifted, and three of them are therefore CHANGED rather than merely replaced. Eleven were identical; .gk-card-header and .att-table-header had no letter-spacing and now get the other twelve's 0.02em; .record-card-header had 0.04em and 0.7rem padding and now gets 0.02em and 0.8rem. None of the three looks like a decision — they look like a paste that lost a line — but they were differences, so they are named here rather than absorbed silently. flex/baseline is .record-card-header's, taken for all of them: several of these headers carry a trailing instruction ("Click any row to see the individual matches"), which was running on as body text inline. It now has a class and sits on the heading's baseline. line-height is --lh-body, which is what all fourteen already inherited from .sufc-type. Stated rather than inherited so the bar keeps its height on a page that has not been typed. */ .sufc-cardhead, .goals-card-header,.gk-card-header,.att-table-header,.fn-card-header, .sl-card-header,.gbs-card-header,.gt-card-header,.wdl-card-header, .dbd-card-header,.app-table-header,.discipline-card-header, .record-card-header,.sc-card-header{ display:flex;align-items:baseline;flex-wrap:wrap; column-gap:12px;row-gap:2px; margin:0;padding:.8rem 1.2rem; background:var(--royal-blue,#003087);color:#fff; font-family:var(--font-serif);font-size:var(--fs-m); font-weight:var(--fw-head);line-height:var(--lh-body); letter-spacing:.02em; } /* The instruction some of them carry. Sans and italic, so it reads as an aside to the heading rather than part of it. */ .sufc-cardhead-note{ font-family:var(--font-sans);font-size:var(--fs-s);font-weight:var(--fw-body); font-style:italic;letter-spacing:0;color:rgba(255,255,255,.82); } /* --------------------------------------------------------------------------- 3. TYPE ROLES Element selectors are scoped to .sufc-type so an unmigrated page's stray

is never restyled from under it. Add the class to
to opt in. --------------------------------------------------------------------------- */ /* font-family and font-size only: both are no-ops today (style.css already sets the family, and 1rem is the browser default), so this states intent without moving anything. line-height moved to .sufc-type — as a bare body rule it cascaded into all 47 templates and grew every page: /statistics +156px, the home page +180px, pages this same design system had just been measured against. Migrated pages get the generous leading; the rest are untouched, which is what the rest of this file promises. */ body{font-family:var(--font-sans);font-size:var(--fs-m);-webkit-text-size-adjust:100%} .sufc-type{line-height:var(--lh-body)} /* Two strengths, deliberately. The CLASS form (.sufc-h1, .sufc-body, …) is an instruction: you asked for this role, you get it, and it beats the page's own rules at (0,1,0). The ELEMENT form is only a DEFAULT, so it is wrapped in :where() and carries no specificity at all — any class the page already puts on that element wins. This is not tidiness. Typing
on the home page put `.sufc-type h1` (0,1,1) over `.hp-title` (0,1,0) and turned a white hero headline royal blue on a navy photograph, took the gold off the eyebrow, and widened the lede from its own measure to 72ch. Three pages on this site — the home page, /statistics and /season — carry complete design languages of their own, and the type system's job on those pages is to supply what they have not said, not to overrule what they have. */ .sufc-h1,:where(.sufc-type h1){font-family:var(--font-serif);font-size:var(--fs-3xl);font-weight:var(--fw-display);line-height:var(--lh-tight);letter-spacing:var(--tracking-head);color:var(--royal-blue,#003087);margin:0} .sufc-h2,:where(.sufc-type h2){font-family:var(--font-serif);font-size:var(--fs-2xl);font-weight:var(--fw-head);line-height:var(--lh-head);letter-spacing:var(--tracking-head);color:var(--royal-blue,#003087);margin:0} .sufc-h3,:where(.sufc-type h3){font-family:var(--font-serif);font-size:var(--fs-xl);font-weight:var(--fw-head);line-height:var(--lh-head);color:var(--royal-blue,#003087);margin:0} .sufc-h4,:where(.sufc-type h4){font-family:var(--font-sans);font-size:var(--fs-m);font-weight:var(--fw-med);line-height:var(--lh-head);color:var(--text-dark,#111827);margin:0} /* A lede sits beside its heading when there is room and drops beneath it when there is not — one flex line with wrapping, so no media query has to guess where the break falls. Top-aligned, not baseline: baseline alignment drops the lede's first line to sit on the title's baseline, which on a 44px Playfair heading pushes it most of a line down the block. The small padding-top is optical — the heading's tight 1.08 leading puts its cap very near the top of its box, while the lede's 1.5 leaves space above the x-height. The residual is half-leading and cannot be cancelled proportionally in CSS: it is larger under a 42px h1 than a 22px h2. Tuned by eye against the 42px case, which is the one most pages have — an earlier -.3em was measured as near-perfect on line boxes and still read as too high, because Playfair's cap sits lower in its box than the italic sans does and the boxes are not what anyone looks at. Short copy only. A page whose intro runs to forty words of instructions wants .sufc-body underneath, not this: it will never fit on the line, and italic grey at 14px is the wrong voice for something a reader must follow. */ .sufc-pagehead{ display:flex;flex-wrap:wrap;align-items:flex-start; column-gap:14px;row-gap:2px; margin-bottom:var(--panel-pad-tight); } .sufc-pagehead > .sufc-lede{margin:0;padding-top:.1em} /* A panel holding nothing but its heading does not need the gap that separates a heading from content below it. /onthisday is one. */ .sufc-panel > .sufc-pagehead:only-child{margin-bottom:0} .sufc-lede{ font-size:var(--fs-s); font-style:italic; line-height:1.5; /* The deeper gold, not --gold-accent. #c8a84b is a highlight against navy and fails badly as small text on white; #8f7420 is the same hue carrying enough contrast to read at 14px. This is the colour the eyebrow used. */ color:#8f7420; max-width:62ch; text-wrap:pretty; } .sufc-body,:where(.sufc-type p){font-size:var(--fs-m);line-height:var(--lh-body);color:var(--text-mid,#374151);max-width:72ch;text-wrap:pretty} :where(.sufc-type p + p){margin-top:1em} .sufc-small{font-size:var(--fs-s);line-height:1.5;color:var(--text-light,#6b7280)} .sufc-label{font-size:var(--fs-micro);font-weight:var(--fw-med);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-light,#6b7280);line-height:var(--lh-ui)} .sufc-th,:where(.sufc-type th){font-size:var(--fs-s);font-weight:var(--fw-med);line-height:var(--lh-ui);color:var(--text-mid,#374151);text-align:left} .sufc-td,:where(.sufc-type td){font-size:var(--fs-xs);line-height:var(--lh-ui);color:var(--text-dark,#111827)} @media (min-width:768px){.sufc-td,:where(.sufc-type td){font-size:var(--fs-s)}} /* links — defined so editor-added links never render browser blue */ :where(.sufc-type) a{color:var(--royal-blue,#003087)} /* The underline is for PROSE, and only prose. As a blanket `.sufc-type a` rule it beat every control on the site — (0,1,1) against the (0,1,0) of .back-link, .alpha-btn, .sn-back and the rest — so the A–Z buttons, the back links and every player name in a 500-row results table all gained an underline the moment their page was typed. Scoping it to the prose roles keeps the affordance where a reader needs it and leaves controls alone; the colour above still applies everywhere, so no link renders browser blue. */ :where(.sufc-type :is(p,li,dd,blockquote)) a, .sufc-body a,.sufc-lede a,.sufc-small a{ text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px; } /* ...except a nav card, where the whole panel is the : the prose-link underline was striking through the title, the description and the cue. The variant already underlines its title on hover, which is the affordance. */ .sufc-type a.sufc-panel--nav,.sufc-type a.sufc-panel--nav:hover{text-decoration:none;color:inherit} :where(.sufc-type) a:hover{color:#001f5c} :where(.sufc-type :is(p,li,dd,blockquote)) a:hover, .sufc-body a:hover,.sufc-lede a:hover,.sufc-small a:hover{text-decoration-thickness:2px} :where(a,button,summary,[role=button]):focus-visible{outline:3px solid var(--gold-accent,#c8a84b);outline-offset:2px;border-radius:3px} /* --------------------------------------------------------------------------- 4. DISPLAY FIGURE — the one place a number gets to be big. Still sans. Size does the work that the serif used to. --------------------------------------------------------------------------- */ .sufc-fig{font-family:var(--font-num);font-size:var(--fs-4xl);font-weight:var(--fw-med);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;color:var(--royal-blue,#003087)} .sufc-fig-s{font-size:var(--fs-2xl)} /* --------------------------------------------------------------------------- 5. THE NUMERAL RULE — safe to ship globally on day one. RULE: if it is a number a reader might compare with another number, it is sans with tabular figures. Playfair is for words. This selector list is the 40 audited serif-numeral rules, minus the seven that belong to shipped components (listed separately in the migration notes). --------------------------------------------------------------------------- */ /* .pm-stats-header and .stats-card-header were in the delivered list and are NOT numerals — both read "Career Statistics at Southend United". They were false positives in the audit I supplied, which matched class names on "stat". Left on Playfair, where headings belong. */ .sufc-num, /* The shipped components' figures. Excluded from the first pass because changing them looked like a redesign rather than a refactor — but .ss-value is the stat strip, which is the most numeric thing on the site and appears on /season, /onthisday, /opponent and /h2h. Headings that happen to contain digits are deliberately NOT here: "Season 2024/25" and "9 August" are words, and Playfair is for words. */ /* The eleven .*-stat-value classes that used to be listed here — .app-, .att-, .dbd-, .discipline-, .sc-, .fn-, .gt-, .gk-, .goals-, .gbs-, .sl-, .wdl- — are gone. Each was one page's copy of the row of bordered summary boxes, and all fifteen of those pages now render .ss-value through renderStatStrip, which is already first in this list. */ .ss-value,.ss-score,.sh-fig b,.sh-land-val,.sh-feature-fig b,.sh-card-cue b,.vp-score, .record-row-value,.hp-otd-year,.hp-otd-score,.hp-total-fig,.hp-card-count{ font-family:var(--font-num); font-variant-numeric:tabular-nums lining-nums; font-weight:var(--fw-med); letter-spacing:-.01em; } /* every table figure aligns, without needing a class per page */ .sufc-type td,.sufc-type th{font-variant-numeric:tabular-nums lining-nums} /* --------------------------------------------------------------------------- 6. FOOTER — one footer. Replaces .site-footer and .site-footer.hp. Drop the .hp modifier from the three templates that use it; no other markup change is needed. --------------------------------------------------------------------------- */ .site-footer{ margin-top:56px; background:var(--royal-blue,#003087); border-top:3px solid var(--gold-accent,#c8a84b); color:rgba(255,255,255,.78); } .site-footer .hp-inner,.sufc-footer-inner{ max-width:1200px;margin:0 auto;padding:22px 24px; display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px; font-size:var(--fs-s);line-height:var(--lh-ui); } .site-footer p{margin:0} /* , not : that is what all three templates using the name emit. */ .site-footer b,.site-footer strong,.sufc-footer-name{color:#fff;font-weight:var(--fw-med)} .sufc-footer-meta{margin-left:auto;font-variant-numeric:tabular-nums} .site-footer a{color:var(--gold-accent,#c8a84b);text-decoration:none;display:inline-block;min-height:44px;line-height:44px} .site-footer a:hover{text-decoration:underline;text-underline-offset:3px} @media (max-width:640px){ .site-footer .hp-inner,.sufc-footer-inner{display:block} .sufc-footer-meta{margin:6px 0 0} /* 14px, not the delivered 12px: at 12 the link measured 41px and the brief sets 44 as the floor. */ .site-footer a{line-height:1.4;min-height:0;padding:14px 0} } /* --------------------------------------------------------------------------- 7. UTILITY --------------------------------------------------------------------------- */ .sufc-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .sufc-grid{display:grid;gap:var(--panel-pad-tight);align-items:start} .sufc-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} .sufc-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:900px){.sufc-grid--4,.sufc-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.sufc-grid--4,.sufc-grid--3{grid-template-columns:minmax(0,1fr)}} /* ============================================= SOUTHEND UNITED HISTORY - STYLESHEET Royal Blue & White | Classic Football Archive ============================================= */ :root { --royal-blue: #003087; --blue-mid: #004abf; --blue-light: #1a5ccc; --blue-pale: #e8eef8; --white: #ffffff; --off-white: #f4f6fb; --text-dark: #111827; --text-mid: #374151; --text-light: #6b7280; --border: #d1d9ee; --gold-accent: #c8a84b; --win: #1a7a3c; --draw: #b07a00; --loss: #9b1c1c; --shadow: 0 4px 24px rgba(0, 48, 135, 0.10); --shadow-lg: 0 8px 40px rgba(0, 48, 135, 0.18); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Source Sans 3', sans-serif; background: var(--off-white); color: var(--text-dark); min-height: 100vh; display: flex; flex-direction: column; } /* ---- HEADER ---- see the redesign block appended at the end of this file ----*/ /* ---- MAIN ---- */ .main-content { max-width: 1200px; margin: 2rem auto; padding: 0 1.5rem; flex: 1; width: 100%; } /* ---- PANEL TITLES ---- */ .panel-title { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; color: var(--royal-blue); margin-bottom: 1.2rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--gold-accent); display: inline-block; } /* ---- FILTERS PANEL ---- The frame now comes from .sufc-panel, and on the nineteen pages that hold nothing but controls, from .sufc-panel--filter. All that is left here is the gap between the panel and whatever the page renders under it. */ .filters-panel { margin-bottom: 2rem; } .filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .filter-group { display: flex; flex-direction: column; gap: 0.4rem; } .filter-group label { font-size: var(--fs-micro); font-weight: var(--fw-med); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); } .filter-group select, .filter-group input[type="text"] { /* 44px, not the 37px this used to compute to. Every filter panel on the site is built from these two, so every one of them had a sub-target control in it; the readership is not one to forgive a 37px hit area. */ min-height: 44px; padding: 0.55rem 0.8rem; border: 1.5px solid var(--border); border-radius: 7px; font-family: var(--font-sans); font-size: var(--fs-m); color: var(--text-dark); background: var(--white); transition: border-color 0.2s, box-shadow 0.2s; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23003087' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; padding-right: 2.2rem; } .filter-group input[type="text"] { background-image: none; padding-right: 0.8rem; } .filter-group select:focus, .filter-group input[type="text"]:focus { outline: none; border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(26, 92, 204, 0.15); } .filter-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .btn-primary { background: var(--royal-blue); color: var(--white); border: none; /* was 43px tall — one pixel under, on every filter panel on the site */ min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 2rem; border-radius: 7px; font-family: var(--font-sans); font-size: var(--fs-m); font-weight: var(--fw-med); cursor: pointer; transition: background 0.2s, transform 0.1s; letter-spacing: 0.04em; } .btn-primary:hover { background: var(--blue-light); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: transparent; color: var(--royal-blue); border: 1.5px solid var(--royal-blue); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.5rem; border-radius: 7px; font-family: var(--font-sans); font-size: var(--fs-m); font-weight: var(--fw-med); cursor: pointer; transition: background 0.2s, color 0.2s; } .btn-secondary:hover { background: var(--blue-pale); } /* ---- RESULTS PANEL ---- Now .sufc-panel. The class stays on the element as the hook these rules and the page scripts still target. */ .results-header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; } .match-count { font-size: 0.9rem; color: var(--text-light); font-weight: 400; } /* Filters beside the programme thumbnail on the opponent page. The grid's min column is 220px and the thumbnail is a non-shrinking 130px, so with the gap they cannot both fit a phone; let the row break instead. */ .opp-filters-row { display: flex; gap: 1.5rem; align-items: flex-start; } @media (max-width: 700px) { .opp-filters-row { flex-wrap: wrap; gap: 1rem; } } /* Played / Won / Drawn / Lost / GF / GA / Diff on the opponent page. Was an inline repeat(7,1fr), which squeezed each card to ~50px on a phone and ran off-screen; auto-fit lets it fall to 4 and then 3 columns. */ .om-stat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.75rem; } @media (max-width: 700px) { .om-stat-grid { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } } @media (max-width: 420px) { .om-stat-grid { grid-template-columns: repeat(3, 1fr); } } /* auto, not visible: these wrap tables far wider than a phone screen (the /onthisday table is 1041px), and with `visible` the overflow escapes the wrapper and scrolls the whole document sideways instead of just the table. .app-table-card on /appearances already does this correctly. */ .table-wrapper { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border); } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } thead { background: var(--royal-blue); color: var(--white); } thead th { padding: 0.75rem 0.9rem; text-align: left; font-weight: 600; letter-spacing: 0.05em; font-size: 0.8rem; text-transform: uppercase; white-space: nowrap; } tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s; cursor: pointer; } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: var(--blue-pale); } tbody td { padding: 0.65rem 0.9rem; color: var(--text-mid); white-space: nowrap; } tbody tr:nth-child(even) { background: var(--off-white); } tbody tr:nth-child(even):hover { background: var(--blue-pale); } .placeholder-row td { text-align: center; color: var(--text-light); padding: 3rem; font-style: italic; cursor: default; } /* Result badges */ .badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; } .badge-W { background: #d1fae5; color: var(--win); } .badge-D { background: #fef3c7; color: var(--draw); } .badge-L { background: #fee2e2; color: var(--loss); } .badge-other { background: var(--blue-pale); color: var(--royal-blue); } /* ---- SORTABLE COLUMNS ---- */ th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { background: var(--blue-mid); } th.sort-asc .sort-icon::after { content: ' ▲'; } th.sort-desc .sort-icon::after { content: ' ▼'; } th.sort-asc .sort-icon, th.sort-desc .sort-icon { opacity: 1; } .sort-icon { opacity: 0.4; font-size: 0.75rem; } /* ---- MODAL OVERLAY ---- */ /* ============================================= VINTAGE PROGRAMME MODAL ============================================= */ /* Override modal box for vintage look */ /* Close button vintage style */ /* Wrapper */ /* ---- MASTHEAD ---- */ /* ---- THREE COLUMNS ---- */ /* Goalscorers */ /* Players */ /* ============================================= RECORDS PAGE ============================================= */ .records-loading { text-align: center; padding: 4rem; color: var(--text-light); font-style: italic; font-size: 1rem; } .records-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } /* .record-card is .sufc-panel--flush; the frame it used to declare here would have won on source order over the shared component. The header bar that stood here is gone: it was a THIRD definition of the same fourteen lines, at --fs-s where every other page used --fs-m, and it never rendered — records.html carried its own copy in an inline