/* ============================================================================
CFFL Almanac — "The Reference" (Direction B)
Drop-in stylesheet for the static site. Written against the existing class
vocabulary (.masthead, .block, .card, .seasonlog, .yr-row/.wk-row, .champ,
.num, .sortable, .two-col, .champ-grid …) so the port stays mechanical.
Font: Archivo (Google Fonts). Add to each template's :
========================================================================== */
:root {
/* brand */
--navy: #14306e; /* primary: headers, key numbers, links-ish */
--navy-deep: #0f2657; /* the Pts column header / strongest emphasis */
--red: #c8202a; /* RESERVED: records + championship markers + brand chrome only */
/* ink */
--ink: #16181d;
--muted: #6b7280; /* secondary text, column labels */
--faint: #9aa1ab; /* losses, de-emphasized numbers, DNP/FA rows */
/* surfaces */
--bg: #eef0f3; /* page background */
--paper: #ffffff; /* cards / table surfaces */
--line: #e3e6ea; /* card + section borders */
--hair: #eef0f3; /* in-table row separators */
/* table accents */
--head: #f0f2f6; /* light table-header band (front / manager tables) */
--zebra: #f4f6f9; /* even-row stripe */
--row-hover: #e6eefb; /* row hover */
--tint: #eaf0fa; /* season-summary row background (player log) */
--tint-line: #d3dcec; /* season-summary row borders */
--champ: #e4ecfb; /* champion row highlight */
--link: #16387a;
--sans: 'Archivo', system-ui, -apple-system, Segoe UI, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-variant-numeric: tabular-nums;
line-height: 1.5;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
main { max-width: 1180px; margin: 0 auto; padding: 26px 28px 56px; }
/* ── Masthead: full-width navy bar ─────────────────────────────────────────
Markup change from the old centered broadsheet masthead — see TEMPLATES.md. */
.masthead {
display: flex; align-items: center; gap: 18px;
padding: 20px 32px; background: var(--navy); color: #fff;
}
.masthead .logo { height: 60px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.masthead .brand { flex: 1; }
.masthead .wordmark { font-weight: 800; font-size: 24px; letter-spacing: .02em; line-height: 1; }
.masthead-sub {
font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
color: #aebfe0; margin-top: 5px;
}
/* On player/manager pages the logo is a bit smaller (52px) — optional: */
.masthead.is-sub .logo { height: 52px; }
.masthead.is-sub .wordmark { font-size: 21px; }
.topnav { display: flex; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.topnav a { color: #cdd8ef; padding: 7px 14px; border-radius: 3px; }
.topnav a:hover { color: #fff; text-decoration: none; }
.topnav a.active { color: #fff; background: var(--red); }
/* ── Stat cards (front page) ───────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 28px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.card-label {
background: #eef1f6; padding: 8px 16px; border-bottom: 1px solid var(--line);
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.card-body { padding: 16px; }
.card-value { font-size: 32px; font-weight: 800; line-height: 1; color: var(--ink); }
.card-value.is-name { color: var(--navy); } /* champion / manager name */
.card-value.is-record { color: var(--red); } /* an all-time record number */
.card-value .x { font-size: 19px; color: var(--navy); } /* e.g. "6×" */
.card-note { font-size: 13px; color: var(--muted); margin-top: 8px; }
/* ── Section blocks ────────────────────────────────────────────────────── */
.block { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin: 0 0 22px; }
/* Use on a block whose table has a sticky (the player log): overflow:hidden would
trap the sticky header, so this block must not clip. */
.block.no-clip { overflow: visible; }
.block > h2 {
display: flex; align-items: center; gap: 9px; margin: 0;
padding: 15px 18px 12px; border-bottom: 2px solid var(--navy);
font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--navy);
}
.block > h2::before { content: ""; width: 6px; height: 15px; background: var(--red); display: inline-block; flex: none; }
.qualifier { font-size: 10px; color: var(--faint); font-weight: 500; letter-spacing: .04em; text-transform: none; }
/* If a block wraps its table edge-to-edge, pad the h2 but let the table bleed.
Blocks that contain free-flow content (champions) get inner padding: */
.block.padded { padding: 0 20px 16px; }
.block.padded > h2 { padding-left: 0; padding-right: 0; }
/* ── Tables (shared) ───────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
position: sticky; top: 0; z-index: 3; /* sticky headers on long tables */
text-align: left; background: var(--head); color: var(--muted);
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
padding: 10px; border-bottom: 1px solid #d9dde3; white-space: nowrap;
}
td { padding: 9px 10px; border-bottom: 1px solid var(--hair); }
.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:nth-child(even) { background: var(--zebra); } /* zebra */
tbody tr:hover { background: var(--row-hover); } /* hover */
tbody tr.champ td, tbody tr.champ-row td { background: var(--champ); } /* champion highlight wins over zebra */
/* "Key" numbers — the ones that should pop (PF, Pts, Titles) */
.num.key { font-weight: 700; color: var(--navy); }
.col-muted { color: var(--faint); } /* losses / secondary */
table caption, .footnote {
text-align: left; font-size: 11px; color: var(--faint);
padding: 11px 18px 14px; line-height: 1.55;
}
/* ── Champions: two-column flow (front page) ───────────────────────────── */
.champ-grid { column-count: 2; column-gap: 40px; margin-top: 10px; }
@media (max-width: 620px) { .champ-grid { column-count: 1; } }
.champ-item {
break-inside: avoid; display: flex; align-items: baseline; gap: 11px;
padding: 7px 0; border-bottom: 1px solid var(--hair);
}
.champ-item .yr {
flex: none; width: 2.9em; text-align: center; font-weight: 700; font-size: 13px;
font-variant-numeric: tabular-nums; color: var(--ink); background: #eef1f6;
border-radius: 3px; padding: 2px 0;
}
.champ-item .ch { font-weight: 600; font-size: 14px; }
.champ-item .ch a { color: var(--ink); }
.champ-item .mvp-i { margin-left: auto; text-align: right; color: var(--faint); font-size: 12.5px; }
.champ-item .mvp-i a { color: var(--faint); }
/* ── Two-column lower section ──────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }
/* manager page: season (wide) + head-to-head (narrow) */
.two-col.season-h2h { grid-template-columns: 1.7fr 1fr; }
@media (max-width: 820px) { .two-col.season-h2h { grid-template-columns: 1fr; } }
/* ── Sortable affordance ───────────────────────────────────────────────── */
table.sortable thead th { cursor: pointer; user-select: none; }
table.sortable thead th[data-sorted="asc"]::after { content: " \25B2"; font-size: .7em; opacity: .8; }
table.sortable thead th[data-sorted="desc"]::after { content: " \25BC"; font-size: .7em; opacity: .8; }
/* ── Player / Manager header ───────────────────────────────────────────── */
.player-head {
display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
padding: 6px 0 20px; border-bottom: 2px solid var(--navy); margin-bottom: 22px;
}
.player-head h1 { font-size: 36px; font-weight: 800; margin: 0; letter-spacing: -.015em; line-height: 1; }
.player-head .pos { /* "RB" / "MANAGER" badge */
align-self: center; background: var(--navy); color: #fff;
font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 5px 10px; border-radius: 3px;
}
.player-head .champ-pill { /* "★ 6× CHAMPION" */
align-self: center; background: var(--red); color: #fff;
font-size: 12px; font-weight: 700; letter-spacing: .05em; padding: 5px 11px; border-radius: 3px;
}
.player-head .meta { align-self: center; color: var(--muted); font-size: 13px; }
/* draft history — compact table under a player header */
.draft-history { margin: 0 0 24px; }
.draft-history .dh-label {
display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .1em; color: var(--faint); margin-bottom: 7px;
}
.draft-history table { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.draft-history th {
text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--faint); border-bottom: 2px solid #dde3ee;
padding: 4px 18px 5px 0;
}
.draft-history th.num, .draft-history td.num { text-align: right; }
.draft-history td { padding: 5px 18px 5px 0; border-bottom: 1px dotted var(--hair); color: #3a4150; }
.draft-history td.key { font-weight: 700; color: var(--navy); }
.draft-history tr:hover td { background: #eef4ff; }
/* ── Season & Week log (the player accordion) ──────────────────────────── */
.log-controls { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; border-bottom: 1px solid var(--hair); }
.log-controls h2 { /* same look as .block>h2 but inline in the control bar */
display: flex; align-items: center; gap: 9px; margin: 0;
font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--navy);
}
.log-controls h2::before { content: ""; width: 6px; height: 15px; background: var(--red); display: inline-block; }
.log-controls .btns { display: flex; gap: 7px; }
.btn {
font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .03em;
border-radius: 3px; padding: 5px 11px; cursor: pointer;
color: var(--muted); background: #f3f4f6; border: 1px solid #e0e3e8;
}
.btn.primary { color: var(--navy); background: #eef2f9; border-color: #d3dcec; }
.seasonlog { font-size: 12px; }
/* dark header band; Pts column gets the deepest navy */
.seasonlog thead th { background: var(--navy); color: #dfe7f6; padding: 9px 8px; }
.seasonlog thead th.col-pts { background: var(--navy-deep); color: #fff; padding: 9px 10px; }
/* season SUMMARY row — heavier, tinted, the "parent" */
tr.yr-row { cursor: pointer; }
tr.yr-row > td {
background: var(--tint); border-top: 1px solid var(--tint-line); border-bottom: 1px solid var(--tint-line);
font-weight: 600; padding: 8px;
}
tr.yr-row > td.col-pts { background: #dde7f8; font-weight: 800; color: var(--navy-deep); font-size: 13px; padding: 8px 10px; }
tr.yr-row > td.bench { color: var(--red); font-weight: 700; }
tr.yr-row:hover > td { background: #e2eafa; }
tr.yr-row:hover > td.col-pts { background: #d4e0f6; }
.yr-cell { white-space: nowrap; color: var(--navy); font-weight: 700; }
.yr-cell::before { content: "\25B8"; display: inline-block; width: 1.1em; color: var(--navy); font-size: .85em; }
tr.yr-row.open .yr-cell::before { content: "\25BE"; }
/* week DETAIL rows — lighter, indented, the "children" */
tr.wk-row > td { font-size: 12px; padding: 5px 8px; border-bottom: 1px dotted #e7eaee; }
tr.wk-row .wk-cell { padding-left: 28px; color: var(--faint); white-space: nowrap; }
tr.wk-row td.col-pts { font-weight: 700; color: var(--navy); }
tr.wk-row td.bench { color: var(--red); font-weight: 700; text-align: right; }
tr.wk-row:hover > td { background: #eef4ff; }
/* states */
tr.wk-row.is-bench > td { color: var(--faint); } /* DNP — benched, zero production */
tr.wk-row.is-fa > td { color: var(--faint); font-style: italic; } /* free-agent week */
.wk-tag { font-size: 9px; font-weight: 700; letter-spacing: .05em; color: var(--faint); }
/* keep zebra OUT of the accordion (rows set their own backgrounds) */
.seasonlog tbody tr:nth-child(even) { background: transparent; }
/* ── Season-by-season (manager) result cell ────────────────────────────── */
.result-champ { color: var(--navy); font-weight: 700; }
.result-champ .star { color: var(--red); }
.finish-first { font-weight: 800; color: var(--navy); }
/* ── Draft history grouped by year (manager) ───────────────────────────── */
.draft-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px 0; }
@media (max-width: 820px) { .draft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .draft-grid { grid-template-columns: 1fr; } }
.draft-year { padding: 10px 18px 14px; border-right: 1px solid var(--hair); break-inside: avoid; }
.draft-year > h3 {
display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px;
padding: 4px 0 6px; border-bottom: 2px solid #dde3ee;
font-size: 14px; font-weight: 800; color: var(--navy);
}
.draft-year > h3 .count { font-size: 10px; font-weight: 600; color: var(--faint); letter-spacing: .03em; }
.draft-year table { font-size: 12.5px; }
.draft-year td { padding: 4px 0; border-bottom: 1px dotted var(--hair); }
.draft-year td.slot { color: var(--faint); white-space: nowrap; width: 3.4em; padding-right: 6px; }
.draft-year tr:hover { background: #eef4ff; }
/* ── Bump chart (finish by year) — emphasis form: gray lines, one navy ─────
Two SVGs per page (desktop / compact); CSS shows one so phone text stays
legible. Red dots are championship seasons (red = championship marker). */
.bump-wrap { padding: 10px 14px 2px; }
svg.bump { width: 100%; height: auto; display: block; font-family: var(--sans); overflow: visible; }
svg.bump.bump-mobile { display: none; }
@media (max-width: 640px) {
svg.bump.bump-desktop { display: none; }
svg.bump.bump-mobile { display: block; }
.bump-wrap { padding: 8px 6px 0; }
}
svg.bump .grid { stroke: var(--hair); stroke-width: 1; }
svg.bump .axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
svg.bump .bump-s path.line {
fill: none; stroke: #c9ced6; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
transition: stroke .12s;
}
svg.bump .bump-s path.hit { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; }
svg.bump .bump-s circle.pt { fill: #c9ced6; stroke: var(--paper); stroke-width: 2; cursor: pointer; }
svg.bump .bump-s circle.pt.champ { fill: var(--red); }
svg.bump .bump-s text.name { fill: var(--ink); }
svg.bump .bump-s a:hover text.name { text-decoration: underline; }
svg.bump .bump-s.hl path.line { stroke: var(--navy); stroke-width: 3; }
svg.bump .bump-s.hl circle.pt { fill: var(--navy); }
svg.bump .bump-s.hl circle.pt.champ { fill: var(--red); }
svg.bump .bump-s.hl text.name { font-weight: 700; }
svg.bump.has-hl .bump-s:not(.hl) { opacity: .38; }
svg.bump .bump-s { transition: opacity .12s; }
/* ── Definitions block (How VOR Works) ─────────────────────────────────── */
.defs { margin: 12px 0 0; font-size: 13px; line-height: 1.55; }
.defs dt { font-weight: 700; color: var(--navy); margin-top: 10px; }
.defs dd { margin: 2px 0 0; color: #3a4150; }
/* ── Best seasons / careers: four position tables in a 2×2 grid ─────────── */
.best-grid { display: grid; grid-template-columns: 1fr 1fr; }
.best-pos { border-bottom: 1px solid var(--hair); min-width: 0; }
.best-pos:nth-child(odd) { border-right: 1px solid var(--hair); }
.best-pos > h3 {
margin: 0; padding: 10px 12px 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em;
color: var(--navy);
}
.best-pos table { font-size: 12.5px; }
.best-pos th, .best-pos td { padding: 6px 8px; }
@media (max-width: 900px) {
.best-grid { grid-template-columns: 1fr; }
.best-pos:nth-child(odd) { border-right: 0; }
}
/* ── Players index (alphabetical link grid) ────────────────────────────────
Not part of the original redesign pack (which covered front/player/manager);
added here so the players list page stays on-brand. */
.players-index { column-count: 3; column-gap: 30px; padding-top: 8px; }
@media (max-width: 720px) { .players-index { column-count: 2; } }
@media (max-width: 480px) { .players-index { column-count: 1; } }
.players-index a {
display: block; padding: 4px 0; color: var(--ink);
break-inside: avoid; border-bottom: 1px solid var(--hair);
}
.players-index a:hover { color: var(--navy); text-decoration: none; }
.players-index .pi-pos { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }
/* ── Keepers page ──────────────────────────────────────────────────────────
Year-by-manager grid (one line per keeper: name + "R6" cost) + a sortable
detail table. The grid is 8 columns wide, so it scrolls inside .table-scroll
on narrow screens instead of overflowing the page. */
.table-scroll { overflow-x: auto; }
.keeper-grid th.yr { text-align: left; }
.keeper-grid td { vertical-align: top; font-size: 12.5px; white-space: nowrap; }
.keeper-grid td.key { font-weight: 700; }
.keeper-grid td.key a { color: var(--navy); }
.keeper-grid .kp { padding: 1px 0; }
.keeper-grid .kp-cost { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; margin-left: 3px; }
.tag-derived {
display: inline-block; vertical-align: middle; margin-left: 4px; padding: 1px 5px; border-radius: 3px;
background: #fbe9d7; color: #9a4b12; font-size: 9px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase;
}
/* ── Mobile ────────────────────────────────────────────────────────────────
Most of the league reads this on a phone. Rules: nothing may overflow the
page sideways (wide tables scroll inside .table-scroll instead), the
masthead stacks, cards go single-column, type and padding tighten. */
html { -webkit-text-size-adjust: 100%; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.nowrap td, table.nowrap th { white-space: nowrap; } /* let the row scroll rather than wrap names */
@media (max-width: 760px) { .sm-hide { display: none; } } /* secondary columns drop out on phones */
.block.no-clip .table-scroll { overflow: visible; } /* desktop: keep the player log's sticky header */
/* Keeper grid: the manager column stays put while the years scroll. */
.keeper-grid th:first-child, .keeper-grid td.key {
position: sticky; left: 0; z-index: 2; background: var(--paper); box-shadow: 1px 0 0 var(--line);
}
.keeper-grid th:first-child { z-index: 4; background: var(--head); }
.keeper-grid tbody tr:nth-child(even) td.key { background: var(--zebra); }
.keeper-grid tbody tr:hover td.key { background: var(--row-hover); }
@media (max-width: 760px) {
main { padding: 14px 12px 40px; }
.masthead { flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px; }
.masthead .logo, .masthead.is-sub .logo { height: 40px; }
.masthead .wordmark, .masthead.is-sub .wordmark { font-size: 18px; }
.masthead-sub { display: none; }
.topnav { width: 100%; gap: 4px; }
.topnav a { flex: 1; text-align: center; padding: 8px 4px; font-size: 12px; }
.cards { grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.card-value { font-size: 26px; }
.block { margin-bottom: 14px; }
.block > h2 { padding: 12px 12px 10px; font-size: 12px; flex-wrap: wrap; }
.block.padded { padding: 0 12px 12px; }
table { font-size: 12px; }
thead th { padding: 8px; }
td { padding: 7px 8px; }
table caption, .footnote { padding: 9px 12px 12px; }
.player-head { padding: 4px 0 12px; margin-bottom: 14px; gap: 8px; }
.player-head h1 { font-size: 26px; width: 100%; }
.block.no-clip .table-scroll { overflow-x: auto; } /* phone: the log scrolls; sticky header gives way */
.log-controls { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
.draft-year { padding: 8px 12px 10px; border-right: 0; }
.two-col, .two-col.season-h2h { gap: 14px; }
.champ-item .mvp-i { font-size: 11.5px; }
footer { padding: 16px 12px; }
}
/* ── Footer ────────────────────────────────────────────────────────────── */
footer { max-width: 1180px; margin: 0 auto; padding: 22px 28px; text-align: center; }
footer p { font-size: 11px; color: var(--faint); margin: 0; }