, so there's no link target.
Synthetic rows come from the config.json `cancelled_seasons`
dict; the year + reason are shown in place of champion + matchup.
============================================================ */
.rss-season-card-cancelled {
opacity: 0.45;
cursor: default;
}
.rss-season-card-cancelled:hover {
/* Override the lift + shadow that .rss-season-card:hover applies,
so the deactivated card stays visually inert on mouseover. */
transform: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
/* -----------------------------------
13. League Page — Every Franchise list
-----------------------------------
Multi-column list of team names with years-of-existence underneath.
3 columns on desktop, 2 on tablet, 1 on mobile. Compact, scannable —
the page is a directory, not a stats dashboard (each franchise's own
page handles the detailed stats). Active and Defunct each get their
own white panel so the two groups read as distinct sections.
*/
/* White panel wrapper around each group (Active list, Defunct list, or
the UEFA-style "Browse former members" link). Matches the visual
treatment of the page's other content cards. */
.rss-franchise-panel {
background-color: white;
border-radius: 12px;
padding: 20px 24px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
/* Spacing between consecutive panels (Active → Defunct, or Active → link). */
.rss-franchise-panel + .rss-franchise-panel {
margin-top: 14px;
}
/* The "Browse former members" panel is small — only contains a link —
so it gets less vertical padding than a list panel. */
.rss-franchise-panel-link {
padding: 16px 24px;
}
.rss-franchise-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px 32px;
}
.rss-franchise-item {
line-height: 1.2;
}
.rss-franchise-name {
font-family: 'Bebas Neue', sans-serif;
font-size: 24px;
letter-spacing: 1px;
color: #002744;
text-decoration: none;
line-height: 1;
display: inline-block;
}
.rss-franchise-name:hover {
text-decoration: underline;
}
.rss-franchise-years {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 400;
color: #888;
margin: 4px 0 0;
line-height: 1.2;
}
.rss-franchise-section-label {
font-family: 'Inter Tight', sans-serif;
font-size: 14px;
font-weight: 600;
color: #555;
text-transform: uppercase;
letter-spacing: 1.2px;
margin: 0 0 14px;
}
/* "Browse former members" link — sits alone inside its own panel for
UEFA-style sports that don't list defunct teams inline. */
.rss-franchise-defunct-link {
display: inline-flex;
align-items: baseline;
gap: 8px;
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #002744;
text-decoration: none;
}
.rss-franchise-defunct-link:hover {
text-decoration: underline;
}
.rss-franchise-defunct-count {
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 14px;
color: #888;
font-variant-numeric: tabular-nums;
}
.rss-franchise-defunct-link-arrow {
font-size: 14px;
margin-left: 2px;
}
/* -----------------------------------
14. League Page — Browse by Team Callout
----------------------------------- */
.rss-browse-callout {
background-color: white;
border-radius: 10px;
padding: 20px 28px;
margin: 0 0 32px;
border-left: 6px solid #B8860B;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.rss-browse-title {
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 20px;
color: #1C1C1C;
letter-spacing: 0.5px;
margin: 0 0 2px;
}
.rss-browse-subtitle {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #555;
margin: 0;
}
.rss-browse-btn {
font-family: 'Bebas Neue', sans-serif;
font-size: 14px;
letter-spacing: 1.5px;
color: white;
background: #002744;
padding: 10px 18px;
border-radius: 6px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: background 0.15s ease;
}
.rss-browse-btn:hover {
background: #003a64;
color: white;
text-decoration: none;
}
/* -----------------------------------
14. Placeholder Pages (Coming Soon)
----------------------------------- */
.rss-coming-soon {
background-color: white;
border-radius: 10px;
padding: 60px 40px;
margin: 24px 0;
text-align: center;
border-left: 6px solid #B8860B;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.rss-coming-soon-icon {
font-size: 56px;
color: #B8860B;
display: block;
margin: 0 0 16px;
line-height: 1;
}
.rss-coming-soon-title {
font-family: 'Graduate', serif;
font-size: 36px;
color: #A4161A;
letter-spacing: 1.5px;
margin: 0 0 6px;
line-height: 1.1;
}
.rss-coming-soon-subtitle {
font-family: 'Bebas Neue', sans-serif;
font-size: 14px;
letter-spacing: 2px;
color: #555;
text-transform: uppercase;
margin: 0 0 16px;
}
.rss-coming-soon-text {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #555;
line-height: 1.55;
margin: 0 auto 24px;
max-width: 480px;
}
/* -----------------------------------
15. Season Detail Page — Header & Tabs
----------------------------------- */
.rss-season-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin: 24px 0;
flex-wrap: wrap;
}
.rss-season-header-title {
display: flex;
align-items: center;
gap: 16px;
}
.rss-season-header-icon {
width: 44px;
height: 44px;
display: block; /* removes inline whitespace alignment quirks */
flex-shrink: 0; /* parent is flex; never shrink the icon */
border: 0; /* override global img { border: 1px solid #999 } */
margin: 0; /* override global img { margin: 20px auto } */
max-width: none; /* override global img { max-width: 100% } */
}
.rss-season-title {
font-family: 'Graduate', serif;
font-size: 36px;
color: #A4161A;
letter-spacing: 1.5px;
margin: 0;
line-height: 1.1;
}
.rss-season-subtitle {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #555;
margin: 4px 0 0;
line-height: 1.4; /* match rss-league-page-subtitle so the icon centers identically */
}
.rss-season-status-badge {
display: inline-block;
font-family: 'Bebas Neue', sans-serif;
font-size: 12px;
letter-spacing: 1.5px;
padding: 5px 14px;
border-radius: 999px;
}
.rss-status-final {
background: #002744;
color: white;
}
.rss-status-live {
background: #A4161A;
color: white;
}
/* Tab navigation */
.rss-tab-nav {
display: flex;
gap: 0;
border-bottom: 1px solid #ddd;
margin: 0 0 28px;
flex-wrap: wrap;
}
.rss-tab {
font-family: 'Bebas Neue', sans-serif;
font-size: 16px;
letter-spacing: 1.5px;
color: #555;
padding: 12px 18px;
text-decoration: none;
border-bottom: 3px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
margin-bottom: -1px;
}
.rss-tab:hover {
color: #A4161A;
text-decoration: none;
}
.rss-tab.active {
color: #A4161A;
border-bottom-color: #A4161A;
}
/* Tab content panes — only the active one is visible */
.rss-tab-pane {
display: none;
}
.rss-tab-pane.active {
display: block;
}
/* -----------------------------------
16. Season Detail Page — Headline Cards
----------------------------------- */
.rss-headline-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 0 0 36px;
}
.rss-headline-card {
background-color: white;
border-radius: 10px;
padding: 18px 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
border-top: 4px solid #ddd;
position: relative;
}
.rss-headline-card-icon {
font-size: 24px;
color: #555;
position: absolute;
top: 16px;
right: 18px;
line-height: 1;
}
.rss-headline-card-label {
font-family: 'Bebas Neue', sans-serif;
font-size: 16px;
letter-spacing: 1.5px;
color: #555;
text-transform: uppercase;
margin: 0 0 8px;
}
.rss-headline-card-team {
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 24px;
color: #1C1C1C;
letter-spacing: 0.3px;
margin: 0 0 6px;
line-height: 1.2;
}
.rss-headline-card-detail {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #555;
margin: 0;
line-height: 1.4;
}
/* Optional second line under the detail — used by the Champion and
Runner-Up cards to show "Last: YYYY" historical context. Smaller and
dimmer so it reads as supporting info, not a second headline. The
is omitted entirely (not just hidden) when the value is empty,
so first-title and first-appearance cases naturally show only the
single detail line. */
.rss-headline-card-subdetail {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: #888;
margin: 2px 0 0;
line-height: 1.3;
}
/* Accent variants */
.rss-headline-champion {
border-top-color: #B8860B;
}
.rss-headline-champion .rss-headline-card-icon {
color: #B8860B;
}
.rss-headline-overachiever {
border-top-color: #002744;
}
.rss-headline-overachiever .rss-headline-card-icon {
color: #002744;
}
.rss-headline-underachiever {
border-top-color: #A4161A;
}
.rss-headline-underachiever .rss-headline-card-icon {
color: #A4161A;
}
.rss-headline-runnerup {
border-top-color: #64748B;
}
.rss-headline-runnerup .rss-headline-card-icon {
color: #64748B;
}
/* UEFA accent variants: Promoted / Relegated.
Used in place of Runner-up on UEFA pages (where promotion and
relegation are the natural counterparts to a champion). Promoted
matches the champion gold (#B8860B) because it's a "going up"
positive outcome. Relegated matches Runner-up slate gray (#64748B)
— relegation is a "secondary outcome" for the season alongside the
champion, the same role Runner-up plays on USA pages. Using slate
instead of red also avoids a color conflict with the existing
Biggest Disappointment tile (#A4161A) which shares the page. */
.rss-headline-promoted {
border-top-color: #B8860B;
}
.rss-headline-promoted .rss-headline-card-icon {
color: #B8860B;
}
.rss-headline-relegated {
border-top-color: #64748B;
}
.rss-headline-relegated .rss-headline-card-icon {
color: #64748B;
}
/* Accent variants for the country-page headline cards.
The country page renders 4 stat cards (Current Elo / UEFA Rank /
Historical Avg / Peak Elo) using the same .rss-headline-card base
as season-page tiles, but with no semantic role like "champion" —
so we use position-based variant classes cycling through brand
colors. Card icons also pick up the matching accent color.
country_page_render.py assigns these in _format_header_stats(). */
.rss-headline-card-navy {
border-top-color: #002744;
}
.rss-headline-card-navy .rss-headline-card-icon {
color: #002744;
}
.rss-headline-card-slate {
border-top-color: #64748B;
}
.rss-headline-card-slate .rss-headline-card-icon {
color: #64748B;
}
.rss-headline-card-red {
border-top-color: #A4161A;
}
.rss-headline-card-red .rss-headline-card-icon {
color: #A4161A;
}
.rss-headline-card-gold {
border-top-color: #B8860B;
}
.rss-headline-card-gold .rss-headline-card-icon {
color: #B8860B;
}
/* Extra teams (Promoted/Relegated multi-team cards). The first team is
the headline; additional teams stack below a horizontal divider as
"Name · detail" inline rows (left-justified, no bullets). */
.rss-headline-card-extras {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #e8eaed;
}
.rss-headline-card-extra-row {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: #333;
margin: 2px 0;
line-height: 1.5;
text-align: left;
}
.rss-headline-card-extra-name {
font-weight: 500;
}
.rss-headline-card-extra-sep {
color: #999;
margin: 0 6px;
}
.rss-headline-card-extra-detail {
color: #666;
}
/* -----------------------------------
17. Season Detail Page — Standings Table
----------------------------------- */
/* Division switcher buttons */
.rss-division-nav {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 0 0 16px;
}
.rss-division-btn {
background: white;
border: 1.5px solid #ddd;
border-radius: 6px;
padding: 6px 14px;
font-family: 'Inter Tight', sans-serif;
font-size: 14px;
font-weight: 500;
color: #555;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rss-division-btn:hover {
border-color: #002744;
color: #002744;
}
.rss-division-btn.active {
background: #002744;
color: white;
border-color: #002744;
}
.rss-division-btn.active:hover {
color: white;
}
/* Standings block — only the .active one is shown */
.rss-standings-block {
display: none;
}
.rss-standings-block.active {
display: block;
/* Mobile: the standings table has a 180px-min team column plus 9-11 other
columns, which exceeds typical phone viewport widths. Allow horizontal
scroll on the wrapper rather than clipping or compressing the table. */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* Card styling moved here from .rss-standings-table because the table's
`overflow: hidden` was breaking sticky positioning on rank/team cells.
Now the rounded corners + shadow are on the wrapper and sticky works. */
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
/* Standings table */
.rss-standings-table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.rss-standings-table thead th {
background: #002744;
color: white;
font-family: 'Bebas Neue', sans-serif;
font-size: 14px;
letter-spacing: 1px;
padding: 10px 12px;
text-align: left;
font-weight: normal;
}
.rss-standings-table thead th.num {
text-align: right;
}
.rss-standings-table thead th.rank {
width: 36px;
min-width: 36px;
text-align: center;
}
/* Mirror the th.rank width on td.rank so the column stays at exactly
36px regardless of padding (mobile shrinks horizontal padding, which
would otherwise let the rank column narrow below the hardcoded
`left: 36px` used by the sticky team column — producing a visible
gap between rank and team on phones). */
.rss-standings-table tbody td.rank {
width: 36px;
min-width: 36px;
}
.rss-standings-table thead th.team {
min-width: 180px;
}
.rss-standings-table tbody td {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #1C1C1C;
padding: 10px 12px;
border-bottom: 1px solid #eee;
}
.rss-standings-table tbody td.num {
text-align: right;
}
.rss-standings-table tbody td.rank {
text-align: center;
color: #777;
font-weight: 500;
}
.rss-standings-table tbody tr:last-child td {
border-bottom: none;
}
.rss-team-name {
font-size: 14px;
font-weight: 500;
}
/* Cell color hints for over/under performance */
.rss-standings-table .rss-overperform {
color: #00642E;
font-weight: 500;
}
.rss-standings-table .rss-underperform {
color: #A4161A;
font-weight: 500;
}
/* Badges */
.rss-badge {
display: inline-block;
font-family: 'Bebas Neue', sans-serif;
font-size: 10px;
letter-spacing: 1px;
padding: 2px 7px;
border-radius: 3px;
margin-left: 8px;
color: white;
text-transform: uppercase;
vertical-align: middle;
}
.rss-badge-playoff {
background: #B8860B;
}
.rss-badge-div {
background: #002744;
}
.rss-badge-wc {
background: #555;
}
.rss-badge-champ {
background: #A4161A;
}
/* -----------------------------------
18. Season Detail Page — Playoff Bracket
----------------------------------- */
.rss-bracket {
display: flex;
flex-direction: column;
gap: 24px;
}
.rss-bracket-league {
background-color: white;
border-radius: 10px;
padding: 20px 24px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
border-left: 6px solid #002744;
}
.rss-bracket-al { border-left-color: #002744; }
.rss-bracket-nl { border-left-color: #A4161A; }
.rss-bracket-league-title {
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 24px;
color: #002744;
letter-spacing: 1px;
margin: 0 0 18px;
}
.rss-bracket-al .rss-bracket-league-title { color: #002744; }
.rss-bracket-nl .rss-bracket-league-title { color: #A4161A; }
/* Rounds: arrange horizontally on desktop, vertically on phones.
Uses flexbox so rounds auto-distribute width based on how many there
are — 3 rounds (NHL/MLB/NBA pre-2020) → ~33% each, 4 rounds
(NBA with Play-In Tournament) → ~25% each, 5 rounds (MLS, future)
→ ~20% each. No per-format CSS overrides needed. */
.rss-bracket-league {
display: flex;
flex-wrap: wrap;
}
.rss-bracket-league .rss-bracket-league-title {
flex: 1 1 100%; /* h3 takes the full top row of the flex container */
}
.rss-bracket-league .rss-bracket-round {
flex: 1 1 0; /* equal share of available width */
min-width: 0; /* allow flex shrink below content's intrinsic width */
margin-right: 12px;
}
.rss-bracket-league .rss-bracket-round:last-child {
margin-right: 0;
}
/* Single-round bracket cards (AAFC 1949 / AFL 1969) — when there's only
one round inside the league card, give it the full row width instead
of the equal-share-among-multiple-rounds default. Without this rule,
the round's flex-basis: 0 plus the title's flex-basis: 100% adds up
to exactly 100%, so flex-wrap leaves them on the same row and the
round gets squeezed to ~0px wide. :only-of-type matches because the
h3 title is a different element type and doesn't count toward the
"div.rss-bracket-round" count.
max-width caps the matchup tile width to match .rss-bracket-matchup-big
(the championship centerpiece, also 480px) — this keeps the visual
weight of the round consistent with the championship card below it,
rather than stretching the tiles uncomfortably wide across the page. */
.rss-bracket-league .rss-bracket-round:only-of-type {
flex: 1 1 100%;
max-width: 480px;
margin: 0 auto;
}
.rss-bracket-round-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 16px;
letter-spacing: 2px;
color: #555;
text-transform: uppercase;
margin: 0 0 10px;
}
/* Individual matchup card */
.rss-bracket-matchup {
background: #fafafa;
border-radius: 6px;
padding: 10px 14px;
margin-bottom: 10px;
border-left: 3px solid #ddd;
}
.rss-bracket-matchup:last-child {
margin-bottom: 0;
}
.rss-bracket-team {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
color: #777;
}
.rss-bracket-team-name {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 400;
}
.rss-bracket-team-score {
font-family: 'Inter', sans-serif;
font-size: 18px;
color: #999;
}
/* Winner row gets emphasis */
.rss-bracket-winner {
color: #1C1C1C;
}
.rss-bracket-winner .rss-bracket-team-name {
font-weight: 600;
}
.rss-bracket-winner .rss-bracket-team-score {
color: #002744;
font-weight: bold;
}
.rss-bracket-matchup:has(.rss-bracket-winner) {
border-left-color: #002744;
}
.rss-bracket-matchup-meta {
font-family: 'Inter Tight', sans-serif;
font-size: 12px;
color: #999;
margin: 6px 0 0;
text-align: right;
}
/* World Series centerpiece */
.rss-bracket-ws {
background-color: white;
border-radius: 10px;
padding: 24px 28px;
box-shadow: 0 2px 8px rgba(0, 100, 46, 0.15);
border-left: 6px solid #00642E;
text-align: center;
}
.rss-bracket-ws-title {
font-family: 'Graduate', serif;
font-size: 24px;
color: #00642E;
letter-spacing: 1.5px;
margin: 0 0 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.rss-bracket-ws-title i {
font-size: 24px;
color: #B8860B;
}
.rss-bracket-matchup-big {
max-width: 480px;
margin: 0 auto;
background: #fafafa;
padding: 14px 20px;
border-radius: 8px;
border-left: 4px solid #00642E;
}
.rss-bracket-matchup-big .rss-bracket-team-name {
font-size: 20px;
}
.rss-bracket-matchup-big .rss-bracket-team-score {
font-size: 20px;
}
/* -----------------------------------
19. Season Detail Page — Regular Season Tab
(leaderboards, streaks, distribution)
----------------------------------- */
/* Detailed standings — slightly more compact version of the standings table.
Currently unused (UEFA's standings_table macro no longer applies this class
to match the USA font size), but kept here for backwards compat in case any
external use exists. */
.rss-standings-detailed thead th,
.rss-standings-detailed tbody td {
padding: 8px 10px;
font-size: 12px;
}
/* Split-system group boundary — thicker top border on the row that
begins a new group (e.g. the 7th-place row in Scotland's Premiership,
the first relegation-group team). Applied via a row class set by the
rendering layer when it detects a championship-to-relegation boundary
in the row sequence. The 3px solid is enough to read as a section
divider without competing with the table header underline. */
.rss-standings-table tbody tr.rss-group-boundary td {
border-top: 3px solid #002744;
}
/* Wrapper around the division nav inside the Regular Season tab */
.rss-division-nav-wrap {
margin-bottom: 14px;
}
/* Side-by-side leaderboards (Overachievers + Disappointments) */
.rss-leaderboard-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.rss-leaderboard-row:last-child {
margin-bottom: 0;
}
.rss-leaderboard {
background-color: white;
border-radius: 8px;
padding: 18px 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
/* Mobile: wide leaderboard tables — especially the playoff Stochastic
Outcomes and Bracket Simulation tables with many per-round columns —
overflow phone viewports. Scroll horizontally instead of clipping.
No-op on narrow leaderboards (Top Playoff Probs, Recent Elo Movers)
since their 3-4 columns fit easily. */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.rss-leaderboard-title {
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 18px;
color: #1C1C1C;
letter-spacing: 0.5px;
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 8px;
}
.rss-leaderboard-title i {
font-size: 18px;
}
.rss-leaderboard:first-child .rss-leaderboard-title i {
color: #00642E;
}
.rss-leaderboard:last-child .rss-leaderboard-title i {
color: #A4161A;
}
.rss-leaderboard-table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.rss-leaderboard-table thead th {
font-family: 'Bebas Neue', sans-serif;
font-size: 14px;
letter-spacing: 1px;
color: #555;
text-align: left;
padding: 6px 8px;
border-bottom: 1px solid #eee;
font-weight: normal;
}
.rss-leaderboard-table thead th.num {
text-align: right;
}
.rss-leaderboard-table thead th.rank {
width: 28px;
text-align: center;
}
.rss-leaderboard-table tbody td {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #1C1C1C;
padding: 8px;
border-bottom: 1px solid #f5f5f5;
}
.rss-leaderboard-table tbody td.num {
text-align: right;
}
.rss-leaderboard-table tbody td.rank {
text-align: center;
color: #777;
}
.rss-leaderboard-table tbody tr:last-child td {
border-bottom: none;
}
.rss-leaderboard-table .rss-overperform {
color: #00642E;
font-weight: 500;
}
.rss-leaderboard-table .rss-underperform {
color: #A4161A;
font-weight: 500;
}
/* ════════════════════════════════════════════════════════════════════
LEADERBOARD MOVERS TABLES — mobile horizontal scroll
────────────────────────────────────────────────────────────────────
WHAT THIS DOES
The Recent Elo Movers and Playoff Odds Movers tables (Gainers / Losers)
have four columns. On a phone they get cramped, so on small screens the
# and Team columns freeze and the Δ / value columns scroll sideways —
the same behavior as the Top Streaks tables, just for these leaderboards.
Desktop is untouched.
HOW IT'S SCOPED
Only tables wrapped in