/*----------------------------------------------------------------------------- * GTFL league styles * Loaded after custom.css. The dashboard chrome, cards and tables come from the * cloned Porto Admin theme; this file only adds league components. * * Colors come ONLY from colors.css variables (brief v3.1 section 2): * --blue (primary), --red (secondary), --silver (borders/backgrounds only, never * text on white), --gold (champion accents; --gold-hover when gold must be text), * --accessibility-blue (inline links). No hex values in this file. *---------------------------------------------------------------------------*/ :root { --gtfl-muted: var(--bs-gray-700); /* muted text, 9:1 on white */ --gtfl-tint: color-mix(in srgb, var(--silver-light) 35%, white); --gtfl-border: var(--silver-light); } /* Chivo Mono: the alt font on record, used for numbers and scores */ .alt-font3, .gtfl-num { font-family: "Chivo Mono", "Overpass Mono", monospace; } /* ---- League fonts (Change Order 04, bought by Kenny 2026-10-08, self-hosted in css/fonts/) ---- Windsor Bold: the Garbage Pail Kids card nameplate face, for item titles and names (was Chewy). Garbage Pail Kids: the dripping logo lettering, caps only, for big display text and page titles. Sources: ~/.build/WindsorBOLD.ttf and ~/.build/GarbagePailKidsFontFiles.zip. */ @font-face { font-family: "Windsor"; src: url("fonts/windsor-bold.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Garbage Pail Kids"; src: url("fonts/garbage-pail-kids.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } :root { --gtfl-font-title: "Windsor", "Chewy", Georgia, serif; --gtfl-font-drip: "Garbage Pail Kids", "Windsor", "Chewy", system-ui, sans-serif; } .alt-font6 { font-family: var(--gtfl-font-title) !important; font-weight: 400 !important; letter-spacing: .01em; } /* The drip font's ink sits high in its box. A line box .3em taller than Porto's fixed 50px title box lowers the lettering .15em to center it in the bar, while the box (and its accent border) stays put. The title's w-100 is undone so the accent border spans only the title; the header's flex layout keeps its buttons on the right. */ .page-header h2 { font-family: var(--gtfl-font-drip) !important; font-weight: 400 !important; font-size: 1.75rem !important; line-height: calc(50px + .3em) !important; letter-spacing: .04em !important; } .page-header h2.w-100 { width: auto !important; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: visible; } @media (max-width: 575px) { .page-header h2 { font-size: 1.3rem !important; letter-spacing: .02em !important; } } /* "Championship History" fits at 360px */ /* ---- Dark chrome: page header title and sidebar icons need a light tint ---- */ .page-header h2.text-desert, .page-header h2 { color: white !important; border-bottom-color: var(--red); } html .text-gtfl-ice { color: var(--silver-light) !important; } /* sidebar icons on the dark rail */ .content-body a:not(.btn):not(.nav-link):not(.page-link):not(.gtfl-manager-link):not(.gtfl-h2h-cell):not([class*="text-"]) { color: var(--accessibility-blue); } .content-body a:not(.btn):not(.nav-link):not(.page-link):not(.gtfl-manager-link):not(.gtfl-h2h-cell):not([class*="text-"]):hover { color: var(--accessibility-blue-hover); } html .text-gold-dark { color: var(--gold-hover) !important; } /* gold as text: 5.0:1 */ html .border-gold { border-color: var(--gold) !important; } html .badge-gold { background: var(--gold-hover); color: white; } ul.nav-main > li.nav-active > a { box-shadow: 3px 0 0 var(--red) inset; } .sidebar-left .sidebar-header .sidebar-title { color: var(--silver-light); } /* ---- Avatars ---- */ .gtfl-avatar { object-fit: cover; flex-shrink: 0; display: inline-block; vertical-align: middle; } .gtfl-avatar-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: white; font-family: "Kanit", sans-serif; font-weight: 600; letter-spacing: .02em; border: 2px solid white; box-shadow: 0 0 0 1px var(--blue); } .gtfl-manager-link { color: inherit; text-decoration: none; font-weight: 600; } .gtfl-manager-link:hover, .gtfl-manager-link:focus { color: var(--red); text-decoration: underline; } /* ---- Stat tiles ---- */ .gtfl-stat { border-left: 4px solid var(--blue); background: var(--gtfl-tint); padding: .6rem .8rem; height: 100%; } .gtfl-stat.is-red { border-left-color: var(--red); } .gtfl-stat .gtfl-stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gtfl-muted); } .gtfl-stat .gtfl-stat-value { font-family: "Chivo Mono", monospace; font-size: 1.35rem; font-weight: 700; color: var(--blue); line-height: 1.2; } .gtfl-stat .gtfl-stat-sub { font-size: .8rem; color: var(--gtfl-muted); } /* ---- Standings ---- */ .gtfl-playoff-line td { border-bottom: 3px dashed var(--red) !important; } .gtfl-me { background: color-mix(in srgb, var(--gold-light) 18%, white) !important; } .gtfl-rank { width: 2.5rem; } .streak-W { color: var(--bs-success); font-weight: 700; } .streak-L { color: var(--red); font-weight: 700; } /* ---- Matchup cards ---- */ .gtfl-matchup { border: 1px solid var(--gtfl-border); border-radius: .25rem; padding: .5rem .75rem; background: white; } .gtfl-matchup .gtfl-side { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .15rem 0; } .gtfl-matchup .gtfl-side.is-winner { font-weight: 700; } .gtfl-matchup .gtfl-side.is-winner .gtfl-score { color: var(--blue); } .gtfl-matchup .gtfl-side.is-loser .gtfl-score { color: var(--gtfl-muted); } .gtfl-score { font-family: "Chivo Mono", monospace; font-size: 1.05rem; } .gtfl-team-sub { font-size: .75rem; color: var(--gtfl-muted); display: block; line-height: 1.1; } /* ---- Record broken callout ---- */ .gtfl-record-broken { background: linear-gradient(90deg, var(--red), var(--red-hover)); color: white; border-radius: .25rem; padding: .9rem 1rem; display: flex; gap: 1rem; align-items: center; } .gtfl-record-broken a { color: white; text-decoration: underline; } .gtfl-record-broken .fa-duotone { font-size: 2rem; } /* ---- Head-to-head matrix ---- */ .gtfl-h2h th, .gtfl-h2h td { text-align: center; white-space: nowrap; font-size: .85rem; } .gtfl-h2h th.gtfl-h2h-rowhead { text-align: left; } .gtfl-h2h td.is-self { background: var(--gtfl-tint); } /* The shade is on the cell (fills it edge to edge); the link fills the cell so the whole square is clickable */ .gtfl-h2h a.gtfl-h2h-cell { display: block; padding: .45rem .5rem; text-decoration: none; font-family: "Chivo Mono", monospace; color: var(--bs-body-color); } .gtfl-h2h a.gtfl-h2h-cell:hover, .gtfl-h2h a.gtfl-h2h-cell:focus { outline: 2px solid var(--blue); outline-offset: -2px; } .gtfl-h2h td.is-winning { --bs-table-bg: color-mix(in srgb, var(--blue) 14%, white); background: var(--bs-table-bg); } .gtfl-h2h td.is-losing { --bs-table-bg: color-mix(in srgb, var(--red) 14%, white); background: var(--bs-table-bg); } .gtfl-h2h td.is-self { --bs-table-bg: var(--gtfl-tint); } .gtfl-h2h td.is-selected { outline: 3px solid var(--red); outline-offset: -3px; } /* ---- Playoff bracket ---- */ .gtfl-bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; } .gtfl-bracket-round { display: flex; flex-direction: column; justify-content: space-around; gap: .75rem; } .gtfl-bracket-round h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gtfl-muted); margin: 0 0 .25rem; } .gtfl-bracket .gtfl-matchup { border-left: 4px solid var(--blue); } .gtfl-bracket .gtfl-matchup.is-final { border-left-color: var(--gold); } .gtfl-bracket .gtfl-matchup.is-toilet { border-left-color: var(--gold-hover); } /* ---- Hall of Fame: trophy and nameplate stack ---- */ .gtfl-trophy { max-width: 320px; margin: 0 auto; text-align: center; } .gtfl-trophy-photo { aspect-ratio: 3 / 4; background: repeating-linear-gradient(135deg, var(--blue-light) 0 12px, var(--blue) 12px 24px); border-radius: .5rem .5rem 0 0; display: flex; align-items: center; justify-content: center; color: white; } .gtfl-trophy-photo img { /* transparent cutout standing in the display case */ width: 100%; height: 100%; object-fit: contain; padding: 1.5rem 1.25rem .75rem; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); } .gtfl-plates { background: var(--blue); padding: .75rem; border-radius: 0 0 .5rem .5rem; display: grid; gap: .45rem; } .gtfl-plate { background: linear-gradient(180deg, var(--gold-light-hover), var(--gold) 55%, var(--gold-hover)); color: var(--blue-hover); border-radius: .2rem; padding: .35rem .5rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.4); font-family: "Chivo Mono", monospace; line-height: 1.2; } .gtfl-plate .gtfl-plate-year { font-weight: 700; letter-spacing: .1em; } .gtfl-plate .gtfl-plate-team { font-size: .78rem; display: block; } .gtfl-plate.is-empty { opacity: .55; font-style: italic; } /* ---- Takes ---- */ /* Garbage Take card (status stripe layout, 2026-10-09): the status is the left edge plus a pill in the footer row, where the pill, Co-Sign, Fade and Rule all share one height */ .gtfl-take { border-left: 6px solid #e0a800; } .gtfl-take.status-garbage { border-left-color: var(--red); } .gtfl-take.status-called-it { border-left-color: var(--bs-success); } .gtfl-take-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; font-size: .8rem; color: var(--gtfl-muted); margin-bottom: .45rem; } .gtfl-take .gtfl-take-text { margin-bottom: .75rem; } .gtfl-take-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; } .gtfl-take-conf { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; color: var(--gtfl-muted); } .gtfl-take-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } .gtfl-take-actions .btn, .gtfl-status-pill, .gtfl-react-tally { height: 2rem; display: inline-flex; align-items: center; gap: .35rem; padding: 0 .7rem; font-size: .8rem; font-weight: 600; line-height: 1; border-radius: var(--bs-border-radius); white-space: nowrap; } .gtfl-status-pill { border: 1px solid; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; } .gtfl-status-pill.is-pending { background: #fff3cd; border-color: #e0a800; color: #664d03; } .gtfl-status-pill.is-called-it { background: #d1e7dd; border-color: var(--bs-success); color: #0a3622; } .gtfl-status-pill.is-garbage { background: #f8d7da; border-color: var(--red); color: #58151c; } .gtfl-react-tally { border: 1px solid var(--gtfl-border); background: var(--gtfl-tint); color: var(--gtfl-muted); } .gtfl-react-tally .gtfl-count { background: var(--gtfl-muted); color: #fff; } .gtfl-take-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: .7rem; padding-top: .55rem; border-top: 1px solid var(--gtfl-border); font-size: .8rem; color: var(--gtfl-muted); } .gtfl-take-sub:empty { display: none; } .gtfl-take-sub .gtfl-ie { display: inline; } .gtfl-take-text { font-size: 1.05rem; font-weight: 600; color: var(--bs-body-color); } .gtfl-fires .fa-duotone { margin-right: 1px; } .gtfl-receipt { font-size: .75rem; color: var(--gtfl-muted); } /* ---- Draft board ---- */ .gtfl-draftboard th, .gtfl-draftboard td { font-size: .78rem; min-width: 110px; vertical-align: top; } .gtfl-draftboard .pos-QB { background: color-mix(in srgb, var(--red) 12%, white); } .gtfl-draftboard .pos-RB { background: color-mix(in srgb, var(--bs-success) 12%, white); } .gtfl-draftboard .pos-WR { background: color-mix(in srgb, var(--blue) 10%, white); } .gtfl-draftboard .pos-TE { background: color-mix(in srgb, var(--gold) 16%, white); } .gtfl-draftboard .pos-K, .gtfl-draftboard .pos-DEF { background: var(--gtfl-tint); } .gtfl-grade { font-family: "Chivo Mono", monospace; font-weight: 700; } /* ---- Rank movement ---- */ .gtfl-move-up { color: var(--bs-success); } .gtfl-move-down { color: var(--red); } .gtfl-move-same { color: var(--gtfl-muted); } /* ---- Printable rules ---- */ @media print { .header, .sidebar-left, .sidebar-right, .page-header, #footer, .gtfl-no-print, .alert { display: none !important; } html.fixed .content-body, .content-body { margin: 0 !important; padding: 0 !important; } .card { border: 0 !important; box-shadow: none !important; } .gtfl-rule { break-inside: avoid; } a { color: black !important; text-decoration: none !important; } } /* ---- Readability: roomier compact tables, larger small text (content area only) ---- * Porto's .small is 87.5% of a 13px body (11.4px) and .table-sm cells pad 4px. */ .content-body .small, .content-body small, .content-body caption { font-size: .95em; } /* 12.35px */ .content-body .small .badge, .content-body small .badge, .content-body caption .badge { font-size: .79em; } /* badges stay 9.75px */ .content-body .table-sm > :not(caption) > * > * { padding: .45rem .5rem; } /* 4px -> 7px / 8px */ /* ---- Badges: cut corners (not rounded, not square) ---- * clip-path trims all four corners at 45 degrees. --gtfl-badge-cut is in em so the chamfer * scales with the badge. Anything drawn with a border loses its corner border, so bordered * badges use a fill (badge-silver-light) instead. */ html .badge, html .badge.rounded-pill { --gtfl-badge-cut: .4em; border-radius: 0; clip-path: polygon( var(--gtfl-badge-cut) 0, calc(100% - var(--gtfl-badge-cut)) 0, 100% var(--gtfl-badge-cut), 100% calc(100% - var(--gtfl-badge-cut)), calc(100% - var(--gtfl-badge-cut)) 100%, var(--gtfl-badge-cut) 100%, 0 calc(100% - var(--gtfl-badge-cut)), 0 var(--gtfl-badge-cut) ); padding-left: calc(.65em + var(--gtfl-badge-cut) / 2); padding-right: calc(.65em + var(--gtfl-badge-cut) / 2); text-transform: uppercase; letter-spacing: .04em; } html .badge .gtfl-ie-input { text-transform: none; letter-spacing: normal; } /* inline-edit controls inside a badge */ /* ---- Card body copy (descriptions under a title) ---- * Porto's .small.text-muted is 80% size in #999 (2.8:1 on white, fails AA). This is * near body size in --gtfl-muted (gray-700, about 9:1). */ .gtfl-copy { font-size: .95rem; line-height: 1.55; color: var(--gtfl-muted); } /* ---- Count badges inside Co-Sign / Fade buttons ---- * Inverse of the button: solid color on an outline button, white on a filled (or hovered) one. */ .btn-outline-success .gtfl-count { background: var(--bs-success); color: white; } .btn-outline-danger .gtfl-count { background: var(--bs-danger); color: white; } .btn-success .gtfl-count, .btn-outline-success:hover .gtfl-count, .btn-outline-success:active .gtfl-count { background: white; color: var(--bs-success); } .btn-danger .gtfl-count, .btn-outline-danger:hover .gtfl-count, .btn-outline-danger:active .gtfl-count { background: white; color: var(--bs-danger); } /* Co-Sign / Fade: colors.css trims outline btn-sm padding to 0.25rem, so the unpicked (outline) button sat shorter than the picked (solid) one */ html .gtfl-react.btn-sm { padding: 0.3rem 0.65rem; } /* ---- King of the Hill ---- */ /* King of the Hill colors, picked by Cody (Change Order 04): Xbox 360 Green, Coors Banquet Gold, Pumpkin Orange, Liverpool Red. Off-palette on purpose, like the --badge-* tokens. Dark text on green, gold and orange, white on red (all 5.8:1 or better). OUT is black with red: Liverpool Red itself is only 3.6:1 on black, so the border is the true red and the text is lightened to 5.1:1. */ :root { --koth-safe: #92c83e; --koth-strike-1: #f4bd00; --koth-strike-2: #ff7518; --koth-strike-3: #c8102e; --koth-ink: #1b1b1b; --koth-out-bg: #000; --koth-out-text: color-mix(in srgb, var(--koth-strike-3) 75%, white); --koth-safe-tint: color-mix(in srgb, var(--koth-safe) 22%, white); } .gtfl-koth td.gtfl-koth-safe { background: var(--koth-safe-tint); } .gtfl-koth td.gtfl-koth-s1 { background: var(--koth-strike-1); color: var(--koth-ink); font-weight: 700; } .gtfl-koth td.gtfl-koth-s2 { background: var(--koth-strike-2); color: var(--koth-ink); font-weight: 700; } .gtfl-koth td.gtfl-koth-s3 { background: var(--koth-strike-3); color: white; font-weight: 700; } .gtfl-koth td.gtfl-koth-out { background: var(--koth-out-bg); color: var(--koth-out-text); } .gtfl-koth td.gtfl-koth-tie { box-shadow: inset 0 0 0 2px var(--blue); } .gtfl-koth-badge { display: inline-block; padding: .3em .6em; border-radius: .25rem; font-size: .75em; font-weight: 700; letter-spacing: .04em; line-height: 1; border: 1px solid transparent; } .gtfl-koth-badge.is-0 { background: var(--koth-safe); color: var(--koth-ink); } .gtfl-koth-badge.is-1 { background: var(--koth-strike-1); color: var(--koth-ink); } .gtfl-koth-badge.is-2 { background: var(--koth-strike-2); color: var(--koth-ink); } .gtfl-koth-badge.is-3 { background: var(--koth-strike-3); color: white; } .gtfl-koth-badge.is-out { background: var(--koth-out-bg); color: var(--koth-out-text); border-color: var(--koth-strike-3); } .gtfl-koth-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .8rem; margin-top: .6rem; } .gtfl-koth-legend span { display: inline-flex; align-items: center; gap: .35rem; } .gtfl-koth-legend i { display: inline-block; width: 1.1rem; height: .85rem; border-radius: .15rem; border: 1px solid rgba(0,0,0,.15); } /* ---- Median result badge on matchup cards ---- */ .gtfl-median { font-size: .65rem; font-weight: 600; vertical-align: middle; margin-left: .25rem; } /* ---- Moments timeline ---- */ .gtfl-timeline { border-left: 3px solid var(--gold); padding-left: 1.25rem; margin-left: .5rem; } .gtfl-timeline-year { position: relative; } .gtfl-timeline-year::before { content: ""; position: absolute; left: calc(-1.25rem - 9px); top: .35rem; width: 15px; height: 15px; border-radius: 50%; background: var(--blue); border: 3px solid var(--gold); } .gtfl-timeline-item { border-bottom: 1px solid var(--gtfl-border); padding-bottom: .75rem; } /* ---- Logo vote ---- */ .gtfl-logo-frame { aspect-ratio: 1 / 1; background: white; border-bottom: 1px solid var(--gtfl-border); display: flex; align-items: center; justify-content: center; overflow: hidden; } .gtfl-logo-img { width: 100%; height: 100%; object-fit: contain; background: white; } .gtfl-logo-winner { width: 220px; border: 3px solid var(--gold); border-radius: .5rem; flex-shrink: 0; } .gtfl-logo-card { cursor: default; border: 2px solid var(--gtfl-border); transition: border-color .15s, box-shadow .15s; } label.gtfl-logo-card { cursor: pointer; } label.gtfl-logo-card:hover { border-color: var(--blue-light); } .gtfl-logo-card:has(input:checked), .gtfl-logo-card.is-mine { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); } .gtfl-logo-card:has(input:focus-visible) { outline: 3px solid var(--accessibility-blue); outline-offset: 2px; } .gtfl-your-pick { display: none; } .gtfl-logo-card input:checked ~ .gtfl-your-pick { display: inline-block; } .gtfl-logo-card input:checked ~ .gtfl-pick-label { display: none; } .gtfl-pitch p:last-child { margin-bottom: 0; } /* Sticky side card (Constitution contents). Only sticky where there are two columns, and the offset applies only while sticky, so the card lines up with its neighbor at the top. */ @media (min-width: 1200px) { .gtfl-sticky-xl { position: sticky; top: calc(var(--gtfl-header-h, 110px) + 1rem); z-index: 1; } } /* Porto's .inner-wrapper uses overflow: hidden, which makes it a scroll container and kills position: sticky everywhere inside it. clip paints the same but isn't a scroll container, so sticky cards work. */ html .inner-wrapper { overflow: clip; } /* ---- Inline editing ---- */ [data-ie-card] .gtfl-ie-toggle { white-space: nowrap; } /* Edit/Save/Cancel inside a card title bar (gtfl_cardTitle(..., actions: ...)): readable on blue and red */ .gtfl-title-bar .btn { --bs-btn-padding-y: .15rem; --bs-btn-font-size: .8rem; line-height: 1.4; } .gtfl-title-bar .gtfl-ie-toggle.btn-outline-blue { background: white; border-color: white; color: var(--blue); } .gtfl-title-bar .gtfl-ie-toggle.btn-outline-blue:hover { background: var(--silver-light-hover); border-color: var(--silver-light-hover); } .gtfl-title-bar .gtfl-ie-toggle.btn-blue { background: var(--gold-hover); border-color: var(--gold-hover); color: white; } html .gtfl-title-bar .btn.gtfl-ie-cancel { background: transparent; border-color: white; color: white; } html .gtfl-title-bar .btn.gtfl-ie-cancel:hover { background: white; color: var(--blue); } .gtfl-ie-editing { outline: 2px dashed var(--accessibility-blue); outline-offset: 4px; border-radius: .25rem; } .gtfl-ie-editing .gtfl-ie { display: inline-block; min-width: 6rem; } .gtfl-ie-editing .gtfl-ie textarea, .gtfl-ie-editing .gtfl-ie input[type="text"], .gtfl-ie-editing .gtfl-ie input[type="url"] { min-width: 14rem; } .gtfl-ie-editing td .gtfl-ie, .gtfl-ie-editing dd .gtfl-ie { display: block; } /* Rule editor modal (/rules/): the CMS editor opens short; give the rule text room */ #gtfl-rule-modal .mce-edit-area iframe { min-height: 340px; } /* =========================================================================== * Change Order 03, Phase A: Luck, Bench Shame, Achievements, The Wire, Wrapped * ========================================================================= */ /* Luck Index scatter (server-rendered SVG) */ .gtfl-scatter { width: 100%; height: auto; font-family: "Overpass Mono", monospace; font-size: 11px; } .gtfl-scatter .grid { stroke: var(--gtfl-border); stroke-width: 1; } .gtfl-scatter .fair { stroke: var(--gtfl-muted); stroke-width: 1.5; stroke-dasharray: 6 4; } .gtfl-scatter text { fill: var(--gtfl-muted); } .gtfl-scatter .axis { font-family: "Poppins", sans-serif; font-size: 12px; fill: var(--blue); } .gtfl-scatter .pt circle { fill: var(--blue); stroke: white; stroke-width: 2; } .gtfl-scatter .pt text { fill: var(--blue); font-family: "Poppins", sans-serif; font-size: 11px; paint-order: stroke; stroke: white; stroke-width: 3px; stroke-linejoin: round; } .gtfl-scatter .pt.is-blessed circle { fill: var(--bs-success); } .gtfl-scatter .pt.is-robbed circle { fill: var(--red); } /* Optimal lineup text (Bench Shame, report preview) */ .gtfl-lineup { white-space: pre-wrap; background: var(--gtfl-tint); padding: .5rem .75rem; font-family: "Overpass Mono", monospace; } /* Achievement chips and cards */ .gtfl-achv { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; font-size: .8rem; font-weight: 600; border: 2px solid var(--gtfl-border); background: white; color: var(--blue); clip-path: polygon(.4em 0, calc(100% - .4em) 0, 100% .4em, 100% calc(100% - .4em), calc(100% - .4em) 100%, .4em 100%, 0 calc(100% - .4em), 0 .4em); } .gtfl-achv.is-rare { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, white); } .gtfl-achv.is-legendary { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, white); color: var(--gold-hover); } .gtfl-achv-wrap { position: relative; display: inline-flex; align-items: center; } .gtfl-achv-count { font-family: "Overpass Mono", monospace; font-size: .75rem; color: var(--gtfl-muted); margin-left: .2rem; } .gtfl-badge-card { border: 1px solid var(--gtfl-border); border-left: 4px solid var(--silver); padding: .75rem 1rem; background: white; } .gtfl-badge-card.is-rare { border-left-color: var(--blue); } .gtfl-badge-card.is-legendary { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, white); } .gtfl-badge-card .gtfl-badge-icon { color: var(--blue); font-size: 3.5rem; width: 4.75rem; text-align: center; flex-shrink: 0; align-self: center; } .gtfl-badge-card.is-legendary .gtfl-badge-icon { color: var(--gold-hover); } .gtfl-badge-card.is-rare .gtfl-badge-icon { --fa-secondary-color: var(--red); --fa-secondary-opacity: .55; } .gtfl-rarity.is-common { background: var(--silver-light-hover); color: var(--bs-body-color); } .gtfl-rarity.is-rare { background: var(--blue); color: white; } .gtfl-rarity.is-legendary { background: var(--gold-hover); color: white; } /* The Wire */ /* The Wire (2026-10-09): days on a timeline; type-colored dots; trade sides as panels */ .gtfl-wire-day { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gtfl-muted); margin: 1.1rem 0 .4rem; padding-left: 2.6rem; } .gtfl-wire-item { --tone: var(--blue); position: relative; display: flex; gap: .85rem; align-items: flex-start; padding: .2rem 0 1rem; } .gtfl-wire-item::before { content: ""; position: absolute; left: 1rem; top: 2.2rem; bottom: 0; width: 2px; background: var(--gtfl-border); } .gtfl-wire-item.is-hidden { opacity: .5; } .gtfl-wire-item.is-green { --tone: #198754; } .gtfl-wire-item.is-red { --tone: var(--red); } .gtfl-wire-item.is-gold { --tone: var(--gold-hover); } .gtfl-wire-item.is-purple { --tone: var(--badge-mythic, #6b30a6); } .gtfl-wire-item.is-gray { --tone: var(--gtfl-muted); } .gtfl-wire-dot { flex: 0 0 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--tone) 12%, white); border: 2px solid var(--tone); color: var(--tone); position: relative; z-index: 1; } .gtfl-wire-dot i { --fa-primary-color: var(--tone); --fa-secondary-color: var(--tone); --fa-secondary-opacity: .4; font-size: .9rem; } .gtfl-wire-item.is-pinned .gtfl-wire-dot { box-shadow: 0 0 0 3px #fff3cd; } .gtfl-wire-main { flex: 1 1 auto; min-width: 0; } .gtfl-wire-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; font-size: .75rem; color: var(--gtfl-muted); margin-bottom: .15rem; } .gtfl-wire-tag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #fff; background: var(--tone); padding: .12rem .4rem; border-radius: 3px; } .gtfl-wire-headline { font-size: 1rem; font-weight: 600; line-height: 1.35; margin: 0 0 .35rem; } html .gtfl-wire-headline a, html .gtfl-wire-headline a:visited { color: var(--blue); text-decoration: none; } html .gtfl-wire-headline a:hover, html .gtfl-wire-headline a:focus-visible { color: var(--red); text-decoration: underline; } .gtfl-wire-body { font-size: .85rem; color: var(--gtfl-muted); margin: 0; } .gtfl-wire-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; } .gtfl-wire-side { border: 1px solid var(--gtfl-border); background: var(--gtfl-tint); padding: .45rem .6rem; } .gtfl-wire-side-head { display: flex; align-items: center; gap: .4rem; font-size: .85rem; margin-bottom: .3rem; } .gtfl-wire-grade { font-family: "Chivo Mono", monospace; font-weight: 700; font-size: .78rem; color: #fff; background: var(--blue); border-radius: 3px; padding: .05rem .35rem; } .gtfl-wire-grade.is-a { background: #198754; } .gtfl-wire-grade.is-c { background: var(--gold-hover); } .gtfl-wire-grade.is-d, .gtfl-wire-grade.is-f { background: var(--red); } .gtfl-wire-assets { display: flex; flex-wrap: wrap; gap: .3rem; } .gtfl-wire-assets span { font-size: .78rem; background: #fff; border: 1px solid var(--gtfl-border); border-radius: 999px; padding: .1rem .55rem; } .gtfl-wire-links { font-size: .75rem; margin-top: .35rem; } .gtfl-wire-admin { display: flex; gap: .25rem; flex-shrink: 0; } /* Season Wrapped card sequence: swipe (scroll-snap), buttons or arrow keys */ .gtfl-wr-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .gtfl-wr-track::-webkit-scrollbar { display: none; } .gtfl-wr-track:focus-visible { outline: 3px solid var(--accessibility-blue); outline-offset: 2px; } .gtfl-wr-slide { flex: 0 0 100%; scroll-snap-align: start; min-height: 360px; padding: 2rem 1.5rem; text-align: center; color: white; background: repeating-linear-gradient(135deg, var(--blue-light) 0 14px, var(--blue) 14px 28px); display: flex; flex-direction: column; align-items: center; justify-content: center; } .gtfl-wr-slide:nth-child(even) { background: var(--blue); } .gtfl-wr-slide h3 { color: var(--gold); font-size: 2rem; margin-bottom: .75rem; } .gtfl-wr-slide .fa-2x { color: var(--gold); } .gtfl-wr-slide p { max-width: 34rem; font-size: 1.05rem; } .gtfl-wr-slide ul { max-width: 34rem; } .content-body .gtfl-wr-slide p, .content-body .gtfl-wr-slide li, .content-body .gtfl-wr-slide strong { color: white; } .content-body .gtfl-wr-slide .gtfl-wr-big { font-family: var(--gtfl-font-drip); font-size: 4rem; line-height: 1; margin-bottom: .5rem; color: white; } .gtfl-wr-slide .fa-duotone { --fa-primary-color: var(--gold); --fa-secondary-color: var(--gold); --fa-secondary-opacity: .5; } .gtfl-wire-row { display: flex; gap: .75rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--gtfl-border); } .gtfl-wire-row:last-child { border-bottom: 0; } .gtfl-wire-row > i { margin-top: .25rem; width: 1.25rem; text-align: center; flex-shrink: 0; } /* Garbage Report preview */ .gtfl-report-preview { width: 100%; height: 900px; border: 1px solid var(--gtfl-border); background: white; } /* =========================================================================== * Knowledge Base (/kb/) * ========================================================================= */ .gtfl-kb-card { border: 1px solid var(--gtfl-border); border-left: 4px solid var(--blue); padding: .75rem 1rem; background: white; transition: border-color .15s, box-shadow .15s; } .gtfl-kb-card:hover, .gtfl-kb-card:focus-within { border-left-color: var(--red); box-shadow: 0 2px 8px color-mix(in srgb, var(--blue) 15%, transparent); } .gtfl-kb-card a { color: var(--blue); } .gtfl-kb-body { font-size: 1rem; line-height: 1.65; } .gtfl-kb-body h3 { font-size: 1.15rem; color: var(--blue); margin: 1.5rem 0 .5rem; } .gtfl-kb-body ul, .gtfl-kb-body ol { padding-left: 1.4rem; } .gtfl-kb-body li { margin-bottom: .3rem; } .gtfl-kb-body code { background: var(--gtfl-tint); color: var(--blue); padding: .1rem .35rem; } /* =========================================================================== * The Locker Room: the right-hand flyout (#sidebar-right). includes/league/locker-room.php * ========================================================================= */ /* The Locker Room: near-black (Kenny, 2026-10-09) so every line reads; a shade lighter than the page header */ html .sidebar-right { background: #15171b; } html .sidebar-right .mobile-close { background: #23262c; color: white; } .gtfl-locker p { color: inherit; } .gtfl-locker { color: white; padding: .25rem .25rem 1.5rem; font-size: .85rem; } .gtfl-locker a { color: var(--gold-light, var(--gold)); } .gtfl-locker a:hover, .gtfl-locker a:focus { color: white; } .gtfl-locker-head { text-align: center; padding: .5rem 0 .75rem; border-bottom: 2px solid var(--gold); margin-bottom: .75rem; } .gtfl-locker-title { font-family: var(--gtfl-font-drip); font-size: 1.9rem; line-height: 1; color: var(--gold); } .gtfl-locker-sub { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: color-mix(in srgb, white 75%, transparent); margin-top: .25rem; } .gtfl-locker-sec { padding: .75rem 0; border-bottom: 1px solid color-mix(in srgb, white 15%, transparent); } .gtfl-locker-sec:last-child { border-bottom: 0; } .gtfl-locker-h { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin: 0 0 .4rem; font-weight: 700; } .gtfl-locker-h i { margin-right: .3rem; } .gtfl-locker-name { font-family: var(--gtfl-font-title); font-size: 1.35rem; line-height: 1.1; } .gtfl-locker-muted { color: #b9c0c9; font-size: .78rem; } .gtfl-locker-note { background: #20242a; border-left: 3px solid var(--gold); padding: .55rem .7rem; } .gtfl-locker-note p { margin: 0; color: #e6e9ed; line-height: 1.45; } .gtfl-locker-tag { display: inline-block; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #15171b; background: var(--gold); padding: .12rem .4rem; border-radius: 2px; margin-bottom: .3rem; } .gtfl-locker-series { display: flex; justify-content: space-between; gap: .5rem; font-weight: 600; font-size: .95rem; margin-top: .2rem; } .gtfl-locker-series b { font-family: "Chivo Mono", monospace; } .gtfl-locker-series .is-lead { color: var(--gold); } /* Series bar: the leader's share is gold, the other side gray (even: both gray) */ .gtfl-locker-bar { height: 6px; background: #5d646d; border-radius: 3px; overflow: hidden; margin: .35rem 0; } .gtfl-locker-bar > span { display: block; height: 100%; background: #5d646d; border-right: 2px solid #15171b; } .gtfl-locker-bar.a-leads > span, .gtfl-locker-bar.b-leads { background: var(--gold); } .gtfl-locker-div { font-size: .56rem; font-weight: 700; letter-spacing: .06em; border: 1px solid var(--gold); color: var(--gold); padding: 0 .25rem; border-radius: 2px; text-decoration: none; margin-left: .3rem; vertical-align: 1px; cursor: help; } .gtfl-locker-big { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .35rem; } .gtfl-locker-big b { font-family: "Chivo Mono", monospace; font-size: 2.1rem; line-height: 1; color: var(--toxic); } .gtfl-locker-big span { font-family: "Chivo Mono", monospace; font-size: 1rem; color: #b9c0c9; } .gtfl-locker-big em { flex-basis: 100%; font-style: normal; font-size: .78rem; color: #b9c0c9; margin-top: .15rem; } .gtfl-locker-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; } .gtfl-locker-chips span { background: rgba(213, 10, 10, .22); border: 1px solid rgba(240, 98, 98, .6); color: #ffd9d9; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; } .gtfl-locker-vs { font-weight: 600; font-size: .95rem; } .gtfl-locker-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin-bottom: .6rem; } .gtfl-locker-stats div { background: color-mix(in srgb, white 9%, transparent); padding: .3rem .2rem; text-align: center; } .gtfl-locker-stats span { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, white 70%, transparent); } .gtfl-locker-stats strong { font-family: "Overpass Mono", monospace; font-size: .8rem; } .gtfl-locker .is-bad { color: color-mix(in srgb, var(--red) 45%, white); } .gtfl-locker .is-good { color: var(--gold); } .gtfl-locker-card { border-left: 3px solid var(--gold); padding: .4rem .6rem; background: color-mix(in srgb, white 6%, transparent); margin-bottom: .6rem; } .gtfl-locker-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); } .gtfl-locker-todo { list-style: none; padding: 0; margin: 0; } .gtfl-locker-todo li { padding: .2rem 0; } .gtfl-locker-standings { margin: 0 0 .3rem; padding: 0; list-style: none; counter-reset: lr; } .gtfl-locker-standings li { display: flex; justify-content: space-between; gap: .5rem; padding: .15rem 0; counter-increment: lr; } .gtfl-locker-standings li > span:first-child::before { content: counter(lr) ". "; color: color-mix(in srgb, white 60%, transparent); font-family: "Overpass Mono", monospace; font-size: .75rem; } .gtfl-locker-standings li > span:last-child { font-family: "Overpass Mono", monospace; } .gtfl-locker-standings li[aria-current] { color: var(--gold); font-weight: 700; } .gtfl-locker-standings li.is-gap { margin-top: .35rem; border-top: 1px dashed color-mix(in srgb, white 25%, transparent); padding-top: .35rem; } .gtfl-locker-wire { list-style: none; padding: 0; margin: 0; } .gtfl-locker-wire li { padding: .4rem 0; line-height: 1.4; } .gtfl-locker-wire li + li { border-top: 1px solid rgba(255, 255, 255, .08); } .gtfl-locker-wire li > a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; } .gtfl-locker-wire a { color: white; text-decoration: none; } .gtfl-locker-wire a:hover, .gtfl-locker-wire a:focus { text-decoration: underline; color: var(--gold); } .gtfl-locker-countdown { font-family: "Overpass Mono", monospace; color: var(--gold); } .gtfl-locker-links { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; } .gtfl-locker-links a { display: block; padding: .4rem .55rem; background: #23262c; color: white; text-decoration: none; font-size: .8rem; } .gtfl-locker-links a:hover, .gtfl-locker-links a:focus { background: var(--gold-hover); color: white; } .gtfl-locker-take .form-control, .gtfl-locker-take .form-select { background: white; } /* Header button that opens it */ .page-header .gtfl-locker-toggle { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: var(--gold) !important; } .page-header .gtfl-locker-toggle:hover, .page-header .gtfl-locker-toggle:focus-visible { color: white !important; outline: 2px solid var(--gold); outline-offset: 2px; } /* ---- Badge icon colors: each badge gets a color that matches its icon (Kenny, 2026-10-02: "poop should be brown"). * These are the only off-palette colors on the site; they are used for badge icons and nothing else. */ :root { --badge-brown: hsl(25 45% 30%); --badge-flame: hsl(28 95% 46%); --badge-fire: hsl(12 85% 45%); --badge-green: hsl(140 55% 30%); --badge-gold: hsl(43 75% 38%); --badge-porcelain: hsl(203 60% 44%); --badge-purple: hsl(272 45% 45%); --badge-charcoal: hsl(220 10% 22%); --badge-teal: hsl(185 55% 30%); --badge-wool: hsl(30 12% 50%); } [data-badge="stinker"] { --badge-color: var(--badge-brown); } [data-badge="streaker"] { --badge-color: var(--badge-flame); } [data-badge="century"] { --badge-color: var(--badge-flame); } [data-badge="garbage_man"] { --badge-color: var(--badge-fire); } [data-badge="heartbreak"] { --badge-color: var(--red); } [data-badge="skid"] { --badge-color: var(--red); } [data-badge="lucky"] { --badge-color: var(--badge-gold); } [data-badge="thief"] { --badge-color: var(--badge-green); } [data-badge="perfect"] { --badge-color: var(--badge-green); } [data-badge="spite"] { --badge-color: var(--badge-porcelain); } [data-badge="fraud"] { --badge-color: var(--badge-purple); } [data-badge="called_it"] { --badge-color: var(--badge-purple); } [data-badge="robbed"] { --badge-color: var(--badge-charcoal); } [data-badge="benchwarmer"] { --badge-color: var(--badge-teal); } [data-badge="fleeced"] { --badge-color: var(--badge-wool); } [data-badge="survivor"] { --badge-color: var(--blue); } [data-badge="koth"] { --badge-color: var(--gold-hover); } .gtfl-badge-card[data-badge] .gtfl-badge-icon, .gtfl-achv[data-badge] > i { color: var(--badge-color, var(--blue)); --fa-primary-color: var(--badge-color, var(--blue)); --fa-secondary-color: var(--badge-color, var(--blue)); --fa-secondary-opacity: .45; } /* ---- Logo vote: click a logo for the full-screen lightbox (includes/league/logo-vote.php) ---- */ .gtfl-logo-zoom { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: white; cursor: zoom-in; } .gtfl-logo-zoom:focus-visible { outline: 3px solid var(--accessibility-blue); outline-offset: -3px; } .gtfl-logo-zoom-hint { position: absolute; right: .5rem; bottom: .5rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--blue) 85%, transparent); color: white; border-radius: 50%; opacity: .75; transition: opacity .15s, transform .15s; } .gtfl-logo-zoom:hover .gtfl-logo-zoom-hint, .gtfl-logo-zoom:focus-visible .gtfl-logo-zoom-hint { opacity: 1; transform: scale(1.1); } .gtfl-lightbox { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; background: transparent; color: white; } .gtfl-lightbox::backdrop { background: color-mix(in srgb, var(--blue-hover, var(--blue)) 94%, black); } .gtfl-lb-inner { height: 100%; display: flex; flex-direction: column; padding: 1rem 1rem 1.5rem; } .gtfl-lb-top { display: flex; justify-content: space-between; align-items: center; min-height: 2.75rem; } .gtfl-lb-count { font-family: "Overpass Mono", monospace; color: color-mix(in srgb, white 80%, transparent); } .gtfl-lb-close, .gtfl-lb-nav { border: 0; background: color-mix(in srgb, white 14%, transparent); color: white; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.35rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; } .gtfl-lb-close:hover, .gtfl-lb-nav:hover, .gtfl-lb-close:focus-visible, .gtfl-lb-nav:focus-visible { background: var(--gold-hover); outline: 2px solid white; outline-offset: 2px; } .gtfl-lb-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 1rem; } .gtfl-lb-imgwrap { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; } .gtfl-lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: white; border-radius: .5rem; padding: 1rem; box-shadow: 0 10px 40px color-mix(in srgb, black 45%, transparent); } .gtfl-lb-caption { text-align: center; max-width: 46rem; margin: 1rem auto 0; } .gtfl-lb-title { color: var(--gold); font-size: 2rem; margin-bottom: .35rem; } .gtfl-lb-text { color: color-mix(in srgb, white 88%, transparent); font-size: 1.05rem; margin-bottom: .75rem; } @media (max-width: 575.98px) { .gtfl-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; z-index: 2; background: color-mix(in srgb, var(--blue) 85%, transparent); box-shadow: 0 2px 6px color-mix(in srgb, black 35%, transparent); } /* over the white logo panel on phones */ .gtfl-lb-prev { left: .25rem; } .gtfl-lb-next { right: .25rem; } .gtfl-lb-title { font-size: 1.5rem; } } @media (prefers-reduced-motion: reduce) { .gtfl-logo-zoom-hint { transition: none; } } /* ---- NFL ticker (Change Order 04): a 32px strip above the fixed header, every page ---- includes/league/nfl-ticker.php + js/gtfl-ticker.js. The fixed header, page header and left sidebar shift down by the ticker's height only while html.has-nfl-ticker is set (collapsed = no shift). */ :root { --gtfl-ticker-h: 32px; } .gtfl-ticker { position: fixed; top: 0; left: 0; right: 0; z-index: 1031; height: var(--gtfl-ticker-h); display: flex; align-items: stretch; background: var(--blue-hover); color: white; font-size: .8rem; line-height: 1; border-bottom: 2px solid var(--gold); } .gtfl-ticker[hidden], .gtfl-ticker-seg[hidden], .gtfl-ticker-reopen[hidden] { display: none !important; } .gtfl-ticker-stage { flex: 1 1 auto; min-width: 0; display: flex; } .gtfl-ticker-seg { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; } .gtfl-ticker-label { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; padding: 0 .75rem; background: var(--gold-light-hover); color: var(--blue); font-family: "Kanit", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } .gtfl-ticker-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; height: 100%; display: flex; align-items: center; } .gtfl-ticker-viewport:focus-visible { outline: 2px solid var(--gold-light-hover); outline-offset: -2px; } .gtfl-ticker-track { display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; white-space: nowrap; will-change: transform; } .gtfl-ticker-track li { padding: 0 1.1rem; font-size: .85rem; border-right: 1px solid rgba(255, 255, 255, .18); font-family: "Chivo Mono", monospace; color: var(--silver-light); } .gtfl-ticker-track li strong, .gtfl-ticker-track li .is-win { color: white; font-weight: 700; } .gtfl-ticker-track .gtfl-ticker-at { opacity: .7; } .gtfl-ticker-track .gtfl-ticker-note { color: var(--silver-light); font-family: "Poppins", sans-serif; font-size: .72rem; margin-left: .25rem; } .gtfl-ticker-track .gtfl-ticker-note.is-live { color: var(--gold-light-hover); font-weight: 700; } .gtfl-ticker-track .gtfl-ticker-note.is-live::before { content: "\25CF"; margin-right: .25rem; } .gtfl-ticker-track .gtfl-ticker-seed { display: inline-block; min-width: 1.1em; text-align: center; color: var(--gold-light-hover); font-weight: 700; } .gtfl-ticker-track .gtfl-ticker-disclaimer { font-family: "Poppins", sans-serif; font-style: italic; color: var(--silver-light); } .gtfl-ticker-track.is-running { animation: gtfl-ticker-scroll linear 1 both; } /* Pause on a mouse hover or on keyboard focus only (Cody, 2026-10-09: it stopped dead). A tap leaves a sticky :hover on phones and a clicked button keeps focus, which used to freeze it on that segment for good. */ .gtfl-ticker.is-paused .gtfl-ticker-track, .gtfl-ticker:has(:focus-visible) .gtfl-ticker-track { animation-play-state: paused; } @media (hover: hover) and (pointer: fine) { .gtfl-ticker:hover .gtfl-ticker-track { animation-play-state: paused; } } /* Same colors on every device: phone dark modes and iOS auto-links don't get to recolor it */ .gtfl-ticker { color-scheme: only light; } .gtfl-ticker-track li, .gtfl-ticker-track li a, .gtfl-ticker-track a[x-apple-data-detectors] { color: var(--silver-light) !important; text-decoration: none !important; } .gtfl-ticker-track li strong, .gtfl-ticker-track li .is-win { color: white !important; } @keyframes gtfl-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(var(--gtfl-to, 0)); } } .gtfl-ticker-controls { flex: 0 0 auto; display: flex; align-items: stretch; border-left: 1px solid rgba(255, 255, 255, .18); } .gtfl-ticker-btn { background: transparent; border: 0; color: white; width: 2rem; padding: 0; cursor: pointer; font-size: .75rem; } .gtfl-ticker-btn:hover { background: var(--blue-light); } .gtfl-ticker-btn:focus-visible { outline: 2px solid var(--gold-light-hover); outline-offset: -2px; } .gtfl-ticker-reopen { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 1031; background: var(--blue-hover); color: white; border: 0; border-bottom: 2px solid var(--gold); border-radius: 0 0 .4rem .4rem; font-size: .72rem; padding: .2rem .7rem; cursor: pointer; } .gtfl-ticker-reopen:focus-visible { outline: 2px solid var(--gold-light-hover); outline-offset: 2px; } /* Reduced motion: nothing moves; the strip scrolls sideways by hand */ @media (prefers-reduced-motion: reduce) { .gtfl-ticker-track.is-running { animation: none; } .gtfl-ticker-viewport { overflow-x: auto; scrollbar-width: thin; } } /* Make room for it. Desktop: Porto's fixed header, page header and sidebar move down. */ @media (min-width: 768px) { html.fixed.has-nfl-ticker .header { top: var(--gtfl-ticker-h); } html.fixed.has-nfl-ticker .page-header, html.fixed.has-nfl-ticker .sidebar-left { top: calc(60px + var(--gtfl-ticker-h)); } html.fixed.has-nfl-ticker .inner-wrapper { padding-top: calc(110px + var(--gtfl-ticker-h)); } html.has-nfl-ticker .sidebar-right { top: var(--gtfl-ticker-h); } html.has-nfl-ticker { --gtfl-header-h: calc(110px + var(--gtfl-ticker-h)); } } /* Phones: Porto pins only the logo bar; push it and the page below the ticker. Labels shrink. */ @media (max-width: 767px) { html.has-nfl-ticker .header .logo-container { top: var(--gtfl-ticker-h); } html.has-nfl-ticker body { padding-top: var(--gtfl-ticker-h); } .gtfl-ticker-label { padding: 0 .5rem; font-size: .7rem; } .gtfl-ticker-btn[data-ticker-prev] { display: none; } /* Next stays: reduced-motion phones page with it */ } /* ---- Power Lines (Change Order 04, Phase B): js/gtfl-power-lines.js ---- Twelve lines are past what distinct hues can carry, so all are gray context and up to three traced lines take the validated highlight slots (blue, orange, aqua; aqua is under 3:1 on white, so the names at the line ends and the table carry identity). */ .gtfl-pl { --pl-s1: #2a78d6; --pl-s2: #eb6834; --pl-s3: #1baf7a; --pl-context: var(--silver-light); --pl-grid: #eef1f4; --pl-ink: #495057; --pl-surface: #fff; position: relative; } .gtfl-pl-scroll { position: relative; overflow-x: auto; overflow-y: hidden; } .gtfl-pl-plot svg { display: block; } .gtfl-pl-grid { stroke: var(--pl-grid); stroke-width: 1; } .gtfl-pl-grid.is-current { stroke: var(--silver-light); } .gtfl-pl-axis { fill: var(--pl-ink); font: 600 11px "Kanit", sans-serif; letter-spacing: .04em; } .gtfl-pl-axis.is-current { fill: var(--blue); } .gtfl-pl-playoff { stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 6 4; } .gtfl-pl-playoff-label { fill: var(--red); font: 700 10px "Kanit", sans-serif; letter-spacing: .08em; } .gtfl-pl-line { fill: none; stroke: var(--pl-context); stroke-width: 2; stroke-linecap: round; cursor: pointer; } .gtfl-pl-ring { fill: none; stroke: var(--pl-surface); stroke-width: 7; stroke-linecap: round; } .gtfl-pl-line.is-s1, .gtfl-pl-line.is-s2, .gtfl-pl-line.is-s3 { stroke-width: 3; } .gtfl-pl-line.is-s1, .gtfl-pl-dot.is-s1 { stroke: var(--pl-s1); } .gtfl-pl-dot.is-s1 { fill: var(--pl-s1); } .gtfl-pl-line.is-s2, .gtfl-pl-dot.is-s2 { stroke: var(--pl-s2); } .gtfl-pl-dot.is-s2 { fill: var(--pl-s2); } .gtfl-pl-line.is-s3, .gtfl-pl-dot.is-s3 { stroke: var(--pl-s3); } .gtfl-pl-dot.is-s3 { fill: var(--pl-s3); } .gtfl-pl-dot { stroke: var(--pl-surface) !important; stroke-width: 2; } .gtfl-pl-end { cursor: pointer; } .gtfl-pl-avatar { fill: var(--blue); stroke: var(--pl-surface); stroke-width: 2; } .gtfl-pl-end.is-s1 .gtfl-pl-avatar { stroke: var(--pl-s1); stroke-width: 3; } .gtfl-pl-end.is-s2 .gtfl-pl-avatar { stroke: var(--pl-s2); stroke-width: 3; } .gtfl-pl-end.is-s3 .gtfl-pl-avatar { stroke: var(--pl-s3); stroke-width: 3; } .gtfl-pl-initials { fill: white; font: 700 10px "Poppins", sans-serif; pointer-events: none; } .gtfl-pl-name { fill: var(--pl-ink); font: 500 12px "Poppins", sans-serif; paint-order: stroke; stroke: var(--pl-surface); stroke-width: 3px; stroke-linejoin: round; } .gtfl-pl-end[class*="is-s"] .gtfl-pl-name { fill: #0b0b0b; font-weight: 700; } .gtfl-pl-cross { stroke: var(--blue); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; } .gtfl-pl-hit { fill: transparent; cursor: crosshair; } .gtfl-pl-tip { position: absolute; z-index: 5; min-width: 11rem; padding: .45rem .6rem; background: white; border: 1px solid var(--silver-light); border-radius: .35rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); font-size: .75rem; pointer-events: none; } .gtfl-pl-tip-h { font: 700 .72rem "Kanit", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); margin-bottom: .2rem; } .gtfl-pl-tip-row { display: grid; grid-template-columns: 1.4rem .9rem 1fr auto; align-items: center; gap: .3rem; line-height: 1.55; color: var(--pl-ink); } .gtfl-pl-tip-row strong { color: #0b0b0b; font-family: "Chivo Mono", monospace; } .gtfl-pl-tip-rank { font-family: "Chivo Mono", monospace; text-align: right; } .gtfl-pl-key { display: inline-block; width: .8rem; height: 0; border-top: 2px solid var(--pl-context); } .is-s1 > .gtfl-pl-key { border-top: 3px solid var(--pl-s1); } .is-s2 > .gtfl-pl-key { border-top: 3px solid var(--pl-s2); } .is-s3 > .gtfl-pl-key { border-top: 3px solid var(--pl-s3); } .gtfl-pl-tip-row[class*="is-s"] .gtfl-pl-tip-name { color: #0b0b0b; font-weight: 600; } .gtfl-pl-scrub { display: flex; align-items: center; gap: .75rem; margin: .6rem 0 .5rem; } .gtfl-pl-range { flex: 1 1 auto; accent-color: var(--blue); } .gtfl-pl-wk { min-width: 4.5rem; text-align: right; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: .05em; } .gtfl-pl-chips { display: flex; flex-wrap: wrap; gap: .35rem; } .gtfl-pl-chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--silver-light); background: white; border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; color: var(--pl-ink); } .gtfl-pl-chip:hover { border-color: var(--blue); } .gtfl-pl-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .gtfl-pl-chip[aria-pressed="true"] { border-color: #0b0b0b; color: #0b0b0b; font-weight: 600; } .gtfl-pl-chip[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } /* Power rankings table: tier bands */ .gtfl-pr-table .gtfl-pr-tier th { background: var(--gtfl-tint); color: var(--blue); font: 600 .72rem "Kanit", sans-serif; text-transform: uppercase; letter-spacing: .08em; padding: .2rem .5rem; } .gtfl-pr-table tr.gtfl-pr-alt > td { background: color-mix(in srgb, var(--gtfl-tint) 45%, white); } .gtfl-pr-table tr.gtfl-pr-me > td:first-child { box-shadow: inset 3px 0 0 var(--blue); } /* ---- Mythic badges (Change Order 04): above Legendary. A purple-and-gold border that slowly shimmers; still under prefers-reduced-motion. Text stays dark ink (no colored text). ---- */ :root { --badge-mythic: hsl(272 55% 42%); } .gtfl-achv.is-mythic, .gtfl-badge-card.is-mythic { border: 2px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(110deg, var(--badge-mythic), var(--gold), var(--badge-mythic), var(--gold-light-hover), var(--badge-mythic)) border-box; background-size: 100% 100%, 300% 100%; animation: gtfl-mythic 6s linear infinite; color: var(--badge-mythic); } .gtfl-badge-card.is-mythic { border-left-width: 4px; } .gtfl-badge-card.is-mythic .gtfl-badge-icon { color: var(--badge-mythic); --fa-primary-color: var(--badge-mythic); --fa-secondary-color: var(--gold); --fa-secondary-opacity: .8; } .gtfl-rarity.is-mythic { background: var(--badge-mythic); color: white; } @keyframes gtfl-mythic { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 300% 0; } } @media (prefers-reduced-motion: reduce) { .gtfl-achv.is-mythic, .gtfl-badge-card.is-mythic { animation: none; } } [data-badge="record_breaker"] { --badge-color: var(--badge-flame); } [data-badge="need_weapon"] { --badge-color: var(--badge-green); } [data-badge="nice"] { --badge-color: var(--badge-porcelain); } [data-badge="mvp_award"], [data-badge="tom_brady_award"] { --badge-color: var(--gold-hover); } [data-badge="lebron_award"] { --badge-color: var(--badge-purple); } [data-badge="bell_cow"] { --badge-color: var(--badge-brown); } [data-badge="diva"] { --badge-color: var(--badge-fire); } [data-badge="step_bro"] { --badge-color: var(--badge-teal); } /* ---- Trade votes (Change Order 04, Phase D): "who won it" bar ---- */ .gtfl-tv-bar { display: flex; height: 1.4rem; border-radius: .25rem; overflow: hidden; background: var(--gtfl-tint); font-size: .72rem; } .gtfl-tv-bar > span { display: flex; align-items: center; padding: 0 .4rem; white-space: nowrap; overflow: hidden; color: white; } .gtfl-tv-bar > span + span { border-left: 2px solid white; } .gtfl-tv-bar .is-a { background: var(--blue); } .gtfl-tv-bar .is-b { background: var(--red); } .gtfl-tv-bar .is-even { background: var(--silver-hover); color: #0b0b0b; } .gtfl-comp-row td { background: color-mix(in srgb, var(--gold) 12%, white); } /* ---- Card pattern (.gtfl-xcard): a navy header band (badge, who, icon), a grid of stat tiles, and a footer. Used by /championships/, /seasons/ and /managers/. Tiles: dt label + dd value (mono; .is-text for names). ---- */ .gtfl-xcard { display: flex; flex-direction: column; border: 1px solid var(--gold); border-radius: .5rem; overflow: hidden; background: white; } .gtfl-xcard-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: .85rem 1rem; background: var(--blue); color: white; } .gtfl-xcard-badge { font-family: var(--gtfl-font-drip); font-size: 2.1rem; line-height: 1; color: var(--gold-light-hover); letter-spacing: .03em; } .gtfl-xcard-who { display: flex; align-items: center; gap: .6rem; min-width: 0; } .gtfl-xcard-who .min-w-0 { min-width: 0; } .gtfl-xcard-avatar { box-shadow: 0 0 0 2px var(--gold-light-hover); flex-shrink: 0; } .gtfl-xcard-name { font-family: var(--gtfl-font-title); font-size: 1.25rem; line-height: 1.1; margin: 0; } .gtfl-xcard-name a { color: white !important; text-decoration: none; } .gtfl-xcard-name a:hover, .gtfl-xcard-name a:focus-visible { text-decoration: underline; } .gtfl-xcard-team { font-size: .8rem; color: var(--silver-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gtfl-xcard-icon { font-size: 1.9rem; color: var(--gold-light-hover); --fa-primary-color: var(--gold-light-hover); --fa-secondary-color: var(--gold); --fa-secondary-opacity: .7; } .gtfl-xcard-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--gtfl-border); } .gtfl-xcard-stats > div { padding: .55rem .75rem; box-shadow: inset -1px 0 0 var(--gtfl-border), inset 0 -1px 0 var(--gtfl-border); } .gtfl-xcard-stats > div:nth-child(3n) { box-shadow: inset 0 -1px 0 var(--gtfl-border); } .gtfl-xcard-stats dt { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gtfl-muted); margin: 0; } .gtfl-xcard-stats dd { font-family: "Chivo Mono", monospace; font-size: 1rem; font-weight: 700; color: var(--blue); margin: .1rem 0 0; white-space: nowrap; } .gtfl-xcard-note { margin: 0; padding: .7rem 1rem; font-size: .85rem; color: var(--gtfl-muted); } .gtfl-xcard-foot { position: relative; padding: .6rem 1rem; margin-top: auto; font-size: .85rem; min-height: 2.6rem; } .gtfl-xcard-more { padding-right: 9rem; } /* room for the season link on the summary line */ .gtfl-xcard-more[open] { padding-right: 0; } .gtfl-xcard-more[open] summary { margin-right: 9rem; } .gtfl-xcard-more summary { font-weight: 600; cursor: pointer; color: var(--blue); } .gtfl-xcard-more ul { list-style: none; padding: .5rem 0 0; margin: .5rem 0 0; border-top: 1px dashed var(--gtfl-border); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem 1rem; } .gtfl-xcard-more li { display: flex; gap: .5rem; min-width: 0; } .gtfl-xcard-more li span { font-family: "Chivo Mono", monospace; font-size: .75rem; color: var(--accessibility-blue); min-width: 2.6rem; } .gtfl-xcard-link { position: absolute; top: .6rem; right: 1rem; font-weight: 600; white-space: nowrap; } @media (max-width: 400px) { .gtfl-xcard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gtfl-xcard-stats > div:nth-child(3n) { box-shadow: inset -1px 0 0 var(--gtfl-border), inset 0 -1px 0 var(--gtfl-border); } .gtfl-xcard-stats > div:nth-child(2n) { box-shadow: inset 0 -1px 0 var(--gtfl-border); } .gtfl-xcard-more ul { grid-template-columns: 1fr; } } /* xcard variants: season and manager cards (/seasons/, /managers/) */ .gtfl-xcard-kicker { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-light-hover); line-height: 1.2; } .gtfl-xcard-stats dd.is-text { font-family: "Poppins", sans-serif; font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; } .gtfl-xcard-stats dd.is-text a { color: var(--blue); text-decoration: none; } .gtfl-xcard-stats dd.is-text a:hover, .gtfl-xcard-stats dd.is-text a:focus-visible { text-decoration: underline; } .gtfl-xcard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; } .gtfl-xcard-foot > .gtfl-xcard-link { position: static; margin-left: auto; } .gtfl-xcard-chips { display: flex; flex-wrap: wrap; gap: .3rem; } .gtfl-xcard-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--gtfl-tint); color: var(--blue); } .gtfl-xcard-chip.is-gold { background: color-mix(in srgb, var(--gold) 22%, white); color: var(--gold-hover); } .gtfl-xcard-chip.is-live { background: var(--bs-success); color: white; } .gtfl-xcard.is-live .gtfl-xcard-head { background: linear-gradient(120deg, var(--blue), var(--blue-light)); } /* Manager card: avatar leads the header, a trophy count on the right; the whole card links to the profile */ .gtfl-xcard.is-person { position: relative; transition: transform .15s ease, box-shadow .15s ease; } .gtfl-xcard.is-person:hover, .gtfl-xcard.is-person:focus-within { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(1, 43, 93, .14); } .gtfl-xcard.is-person .gtfl-xcard-head { grid-template-columns: auto 1fr auto; } .gtfl-xcard.is-person .gtfl-xcard-name a:focus-visible { outline: 2px solid var(--gold-light-hover); outline-offset: 2px; } .gtfl-xcard-count { display: inline-flex; align-items: center; gap: .3rem; font-family: "Chivo Mono", monospace; font-weight: 700; font-size: 1.1rem; color: var(--gold-light-hover); --fa-primary-color: var(--gold-light-hover); --fa-secondary-color: var(--gold); --fa-secondary-opacity: .7; } .gtfl-xcard.is-former { border-color: var(--silver); } .gtfl-xcard.is-former .gtfl-xcard-head { background: var(--blue-light); } .gtfl-xcard.is-former .gtfl-xcard-avatar { filter: grayscale(.6); } @media (prefers-reduced-motion: reduce) { .gtfl-xcard.is-person, .gtfl-xcard.is-person:hover { transition: none; transform: none; } } /* Circle-i detail button: the detail lives in a tooltip (hover or keyboard focus) */ .gtfl-info { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; margin-left: .1rem; border: 0; border-radius: 50%; background: transparent; color: var(--accessibility-blue); vertical-align: middle; cursor: help; } .gtfl-info:hover { background: var(--gtfl-tint); } .gtfl-info:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } /* Recently Unlocked feed (/achievements/): grouped by week, avatar with the badge icon on its corner, a rail joining the avatars, badge name in its own color, detail underneath */ .gtfl-feed-when { font: 600 .72rem "Kanit", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--gtfl-muted); margin: .9rem 0 .4rem; } .gtfl-feed-when:first-of-type { margin-top: .25rem; } .gtfl-feed { list-style: none; margin: 0; padding: 0; position: relative; } .gtfl-feed::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--gtfl-border); } .gtfl-feed-item { position: relative; display: flex; gap: .75rem; align-items: flex-start; padding: .4rem 0; } .gtfl-feed-pic { position: relative; flex-shrink: 0; width: 36px; height: 36px; } .gtfl-feed-pic .gtfl-avatar { box-shadow: 0 0 0 3px white; } .gtfl-feed-badge { position: absolute; right: -6px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: white; box-shadow: 0 0 0 2px var(--badge-color, var(--blue)); font-size: .62rem; color: var(--badge-color, var(--blue)); --fa-primary-color: var(--badge-color, var(--blue)); --fa-secondary-color: var(--badge-color, var(--blue)); --fa-secondary-opacity: .45; } .gtfl-feed-body { min-width: 0; font-size: .88rem; line-height: 1.35; padding-top: .1rem; } .gtfl-feed-verb { color: var(--gtfl-muted); } .gtfl-feed-name { color: color-mix(in srgb, var(--badge-color, var(--blue)) 72%, black); } /* darkened so every badge color passes 4.5:1 as text */ .gtfl-feed-item.is-legendary .gtfl-feed-badge { box-shadow: 0 0 0 2px var(--gold); background: color-mix(in srgb, var(--gold) 18%, white); } .gtfl-feed-item.is-mythic .gtfl-feed-badge { box-shadow: 0 0 0 2px var(--badge-mythic); } .gtfl-feed-body .badge.gtfl-rarity { font-size: .6rem; vertical-align: 1px; } .gtfl-feed-detail { font-size: .78rem; color: var(--gtfl-muted); margin-top: .1rem; } /* ---- Card headings (Kenny, 2026-10-09): Porto card-featured-primary cards with a card-title; the colored bar is only for section dividers now (gtfl_sectionBar) ---- */ html .card.card-featured { border-top-width: 3px; } .gtfl-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; padding-bottom: .65rem; border-bottom: 1px solid var(--gtfl-border); } .gtfl-card-head .card-title { font-size: 1.15rem; line-height: 1.25; letter-spacing: -.01em; display: flex; align-items: center; min-width: 0; } .gtfl-card-head .card-title i { font-size: 1.05em; flex-shrink: 0; } .gtfl-card-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; } .gtfl-card-actions .btn { --bs-btn-padding-y: .15rem; --bs-btn-font-size: .8rem; line-height: 1.4; } .gtfl-card-link { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: var(--blue) !important; background: var(--gtfl-tint); text-decoration: none; } .gtfl-card-link:hover { background: var(--blue); color: white !important; } .gtfl-card-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .gtfl-section-bar { margin: 1.25rem 0 .75rem; } .gtfl-section-bar:first-child { margin-top: 0; } /* Same column widths in every copy of a repeated table (/awards/ All-Pro tables line up year to year) */ .gtfl-fixed-cols { table-layout: fixed; width: 100%; } .gtfl-fixed-cols td, .gtfl-fixed-cols th { overflow-wrap: anywhere; } /* ---- Award plaques (/awards/): a medallion, the award, the winner large, the manager chip, a prize ribbon. Tones: gold (MVP, King of the Hill), blue (Manager of the Year), red (Rookie of the Year). ---- */ .gtfl-plaque { --tone: var(--gold); --tone-ink: var(--gold-hover); --tone-soft: color-mix(in srgb, var(--gold) 14%, white); position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.1rem 1rem 0; border-radius: .6rem; border: 1px solid color-mix(in srgb, var(--tone) 45%, white); background: radial-gradient(120% 70% at 50% 0%, var(--tone-soft), white 70%); } .gtfl-plaque.is-blue { --tone: var(--blue); --tone-ink: var(--blue); --tone-soft: color-mix(in srgb, var(--blue) 10%, white); } .gtfl-plaque.is-red { --tone: var(--red); --tone-ink: var(--red-hover); --tone-soft: color-mix(in srgb, var(--red) 10%, white); } .gtfl-plaque-medal { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tone) 55%, white), var(--tone) 60%, color-mix(in srgb, var(--tone) 70%, black)); box-shadow: 0 0 0 4px white, 0 0 0 6px color-mix(in srgb, var(--tone) 40%, white), 0 6px 14px rgba(0, 0, 0, .15); --fa-primary-color: white; --fa-secondary-color: white; --fa-secondary-opacity: .55; } .gtfl-plaque-award { margin: .75rem 0 .35rem; font: 600 .72rem "Kanit", sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--tone-ink); } .gtfl-plaque-face { margin-bottom: .35rem; } .gtfl-plaque-face .gtfl-avatar { box-shadow: 0 0 0 3px white, 0 0 0 5px color-mix(in srgb, var(--tone) 40%, white); } .gtfl-plaque-winner { font-family: var(--gtfl-font-title); font-size: 1.35rem; line-height: 1.15; color: #0b0b0b; } .gtfl-plaque-winner a { color: #0b0b0b !important; text-decoration: none; } .gtfl-plaque-winner a:hover, .gtfl-plaque-winner a:focus-visible { text-decoration: underline; } .gtfl-plaque-winner.is-tbd { color: var(--gtfl-muted); } .gtfl-plaque-who { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; font-size: .85rem; font-weight: 600; } .gtfl-plaque-who.is-team { font-weight: 400; color: var(--gtfl-muted); font-size: .8rem; margin-top: .15rem; } .gtfl-plaque > .gtfl-plaque-who:nth-last-child(2) { margin-bottom: .9rem; } /* space above the ribbon */ .gtfl-plaque-prize { margin: auto -1rem 0; width: calc(100% + 2rem); padding: .4rem .75rem; /* margin-top auto pins the ribbon to the bottom */ font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: white; background: var(--tone-ink); } .gtfl-plaque.is-gold .gtfl-plaque-prize { color: #0b0b0b; background: linear-gradient(90deg, var(--gold-light-hover), var(--gold-light), var(--gold-light-hover)); } .gtfl-plaque.is-empty { opacity: .7; } /* A gloss sweeps across on hover; nothing moves under reduced motion */ .gtfl-plaque::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; } .gtfl-plaque:hover::after { transition: transform .9s ease; transform: translateX(120%); } @media (prefers-reduced-motion: reduce) { .gtfl-plaque:hover::after { transition: none; transform: translateX(-120%); } } .gtfl-plaque-team { font-weight: 400; color: var(--gtfl-muted); } /* manager awards: the chip carries the team name */ /* ---- Award payouts (/awards/): a prize ladder. FAAB bars share one scale; King of the Hill (cash) has chips instead of a bar ---- */ .gtfl-payouts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .gtfl-payouts li { --tone: var(--blue); display: grid; grid-template-columns: 2.4rem minmax(9rem, 14rem) 1fr 5.5rem; align-items: center; gap: .9rem; padding: .55rem .8rem; border-radius: .5rem; background: color-mix(in srgb, var(--tone) 6%, white); border: 1px solid color-mix(in srgb, var(--tone) 22%, white); } .gtfl-payouts li.is-gold { --tone: var(--gold); } .gtfl-payouts li.is-red { --tone: var(--red); } .gtfl-payouts li.is-silver { --tone: var(--silver-hover); } .gtfl-pay-icon { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tone) 55%, white), var(--tone) 65%, color-mix(in srgb, var(--tone) 75%, black)); --fa-primary-color: white; --fa-secondary-color: white; --fa-secondary-opacity: .55; } .gtfl-pay-label { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .gtfl-pay-label strong { font-size: .92rem; color: #0b0b0b; } .gtfl-pay-label small { font-size: .74rem; color: var(--gtfl-muted); } .gtfl-pay-track { height: .85rem; border-radius: 999px; background: color-mix(in srgb, var(--tone) 12%, white); overflow: hidden; } .gtfl-pay-bar { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 70%, white), var(--tone)); } .gtfl-pay-amt { font-family: "Chivo Mono", monospace; font-size: 1.15rem; font-weight: 700; color: #0b0b0b; text-align: right; white-space: nowrap; } .gtfl-pay-amt small { font-size: .62em; font-weight: 600; color: var(--gtfl-muted); } .gtfl-pay-extra { display: flex; flex-wrap: wrap; gap: .35rem; } .gtfl-pay-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: white; color: var(--gold-hover); border: 1px solid color-mix(in srgb, var(--gold) 45%, white); } @media (max-width: 575px) { .gtfl-payouts li { grid-template-columns: 2.4rem 1fr auto; gap: .6rem; } .gtfl-pay-track, .gtfl-pay-extra { grid-column: 2 / -1; grid-row: 2; } } /* In-place swaps (js/gtfl-ajax-swap.js): dim while the new content loads */ [data-ajax-swap].gtfl-swapping { opacity: .55; transition: opacity .15s; pointer-events: none; } /* ---- NFL / American palette pass (Kenny, 2026-10-09) ---- Light gray text: Porto's .text-muted (#999, 2.8:1) and friends darken to --gtfl-muted (gray-700, 8:1). Garbage Pail Kids lettering: neon --toxic where it sits on black or navy; Windsor headings on white use the readable --toxic-ink (5.5:1). Neon is never used on a light background. */ html .text-muted, html .small.text-muted, .table caption, .form-text, .text-body-secondary { color: var(--gtfl-muted) !important; } .page-header h2, .page-header h2.text-desert { color: var(--toxic) !important; text-shadow: 0 0 10px color-mix(in srgb, var(--toxic) 35%, transparent); } .gtfl-xcard-badge, .gtfl-locker-title, .content-body .gtfl-wr-slide .gtfl-wr-big { color: var(--toxic) !important; } .alt-font6, .alt-font6.text-blue, .gtfl-plaque-winner, .gtfl-plaque-winner a { color: var(--toxic-ink) !important; } .gtfl-xcard-name a, .gtfl-locker-name { color: var(--toxic) !important; } /* Week in Review (CO-04 Feature 16): award tiles, Game of the Week, title odds */ /* Weekly Winners (Cody, 2026-10-09): flip cards, front = week, category, icon, winner; back = criteria and numbers */ .gtfl-ww-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; background: var(--gtfl-tint); border-radius: 1rem; padding: .6rem; } @media (min-width: 576px) { .gtfl-ww-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .gtfl-ww-board { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; padding: .85rem; } } .gtfl-ww-card { display: block; width: 100%; min-height: 13.5rem; padding: 0; border: 0; background: none; perspective: 900px; text-align: center; cursor: pointer; color: inherit; font: inherit; } .gtfl-ww-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: .85rem; } .gtfl-ww-inner { position: relative; display: block; width: 100%; height: 100%; min-height: inherit; transition: transform .45s ease; transform-style: preserve-3d; } .gtfl-ww-card.is-flipped .gtfl-ww-inner { transform: rotateY(180deg); } .gtfl-ww-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .55rem; background: #fff; border: 1px solid var(--gtfl-border); border-radius: .85rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; } .gtfl-ww-back { transform: rotateY(180deg); align-items: flex-start; text-align: left; overflow-y: auto; } .gtfl-ww-card.is-current .gtfl-ww-face { border: 2px solid var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); } .gtfl-ww-week { font-family: "Kanit", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--blue); } .gtfl-ww-name { font-weight: 600; text-transform: uppercase; font-size: .78rem; letter-spacing: .03em; line-height: 1.2; color: var(--gtfl-ink, #212529); min-height: 2.4em; } .gtfl-ww-icon { display: flex; align-items: center; justify-content: center; width: 4.25rem; height: 4.25rem; border-radius: 50%; background: var(--gtfl-tint); font-size: 2rem; margin: .1rem 0 .2rem; --fa-primary-color: var(--blue); --fa-secondary-color: var(--red); --fa-secondary-opacity: .55; color: var(--blue); } .gtfl-ww-who { margin-top: auto; font-family: "Kanit", sans-serif; font-weight: 700; text-transform: uppercase; font-size: .95rem; line-height: 1.15; color: var(--blue); overflow-wrap: anywhere; } .gtfl-ww-card.is-open .gtfl-ww-who { color: var(--gtfl-muted); } .gtfl-ww-what { font-size: .82rem; line-height: 1.3; margin-bottom: .25rem; } .gtfl-ww-results { display: block; width: 100%; } .gtfl-ww-result { font-size: .78rem; line-height: 1.3; padding-top: .3rem; border-top: 1px dashed var(--gtfl-border); margin-top: .3rem; } .gtfl-ww-num { font-family: "Chivo Mono", monospace; font-weight: 700; color: var(--blue); white-space: nowrap; } .gtfl-ww-detail { display: block; font-size: .72rem; color: var(--gtfl-muted); overflow-wrap: anywhere; } @media (max-width: 575px) { .gtfl-ww-card { min-height: 16rem; } .gtfl-ww-what { font-size: .76rem; } .gtfl-ww-face { padding: .6rem .45rem; } } @media (prefers-reduced-motion: reduce) { .gtfl-ww-inner { transition: none; } } .gtfl-gotw { display: flex; align-items: center; justify-content: space-around; gap: .5rem; text-align: center; } .gtfl-gotw-side { flex: 1 1 0; min-width: 0; } .gtfl-gotw-vs { font-family: var(--gtfl-font-title); font-size: 1.4rem; color: var(--red); } .gtfl-gotw-pct { font-family: "Chivo Mono", monospace; font-weight: 700; font-size: 1.6rem; color: var(--blue); } .gtfl-gotw-bar { height: 10px; background: var(--red); border-radius: 5px; overflow: hidden; margin-top: .6rem; } .gtfl-gotw-bar > span { display: block; height: 100%; background: var(--blue); border-right: 2px solid #fff; } .gtfl-odds-barcell { width: 22%; min-width: 80px; } .gtfl-odds-bar { display: block; height: 10px; min-width: 2px; background: var(--blue); border-radius: 0 4px 4px 0; } .gtfl-odds-up { color: var(--toxic-ink); font-weight: 600; } .gtfl-odds-down { color: var(--red); font-weight: 600; } /* AI weekly recap (CO-04 Feature 15): sections, scoreboard, player cards, meme spots, embeds */ .gtfl-recap-body .gtfl-recap-h { font-family: var(--gtfl-font-title); color: var(--blue); font-size: 1.35rem; margin: 1.6rem 0 .6rem; padding-bottom: .3rem; border-bottom: 3px solid var(--red); } .gtfl-recap-body .gtfl-recap-mh { font-size: 1.1rem; font-weight: 700; color: var(--blue); margin: 1.2rem 0 .15rem; } .gtfl-recap-body .gtfl-recap-score { font-family: "Chivo Mono", monospace; font-size: .85rem; color: var(--gtfl-muted); margin-bottom: .4rem; } .gtfl-recap-body .gtfl-recap-muted { color: var(--gtfl-muted); font-size: .875em; } .gtfl-recap-body .gtfl-recap-scoreboard td { font-family: "Chivo Mono", monospace; } .gtfl-recap-body .gtfl-recap-scoreboard td.is-winner { font-weight: 700; color: var(--blue); } .gtfl-recap-body .gtfl-recap-power td, .gtfl-recap-body .gtfl-recap-odds td { vertical-align: top; } .gtfl-recap-body .gtfl-recap-awards { padding-left: 1.1rem; } .gtfl-recap-body .gtfl-recap-awards li { margin-bottom: .3rem; } .gtfl-recap-card { background: var(--blue); color: #fff; border-left: 6px solid var(--toxic); padding: .75rem 1rem; margin: .4rem 0 1rem; max-width: 34rem; } .gtfl-recap-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; } .gtfl-recap-card-name { font-weight: 700; font-size: 1.1rem; } .gtfl-recap-card-pts { font-family: "Chivo Mono", monospace; font-weight: 700; color: var(--toxic); font-size: 1.15rem; white-space: nowrap; } .gtfl-recap-card-meta { font-size: .8rem; color: #d0d4d5; } .gtfl-recap-body .gtfl-recap-card .gtfl-recap-card-line { margin: .4rem 0 .3rem; font-style: italic; color: #fff; } .gtfl-recap-card-box { font-family: "Chivo Mono", monospace; font-size: .8rem; color: #fff; border-top: 1px solid rgba(255,255,255,.25); padding-top: .3rem; } .gtfl-recap-meme { border: 2px dashed var(--red); padding: .5rem .75rem; margin: .6rem 0; font-size: .9rem; background: #fff6f6; } .gtfl-recap-embed { margin: 1rem 0; max-width: 36rem; } .gtfl-recap-embed figcaption { font-size: .8rem; color: var(--gtfl-muted); margin-top: .3rem; } .gtfl-recap-linkcard { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--gtfl-border); padding: .5rem .75rem; font-weight: 600; } /* Trophy shelf (CO-04 Phase F): a 760 x 780 drawing scaled to fit; items and editor spots are positioned in % */ .gtfl-shelf-wrap { width: 100%; max-width: 300px; margin-inline: auto; } .gtfl-shelf-col .gtfl-shelf-wrap { max-width: 560px; } .gtfl-shelf-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .gtfl-shelf-open:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } .gtfl-shelf-stage { position: relative; width: 100%; aspect-ratio: 760 / 780; } .gtfl-shelf-view .gtfl-shelf-stage, .gtfl-shelf-ed-stagewrap .gtfl-shelf-stage { max-width: 760px; margin-inline: auto; } .gtfl-shelf-bg { position: absolute; inset: 0; width: 100%; height: 100%; } .gtfl-shelf-item, .gtfl-shelf-slot { position: absolute; aspect-ratio: 1; margin: 0; padding: 0; } .gtfl-shelf-item svg, .gtfl-shelf-item img, .gtfl-shelf-slot svg, .gtfl-shelf-slot img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; pointer-events: none; } .gtfl-shelf-item.is-wall img, .gtfl-shelf-slot.is-wall img { object-position: center; } .gtfl-shelf-item.is-upload img, .gtfl-shelf-slot img { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .45)); } .gtfl-shelf-slot { background: transparent; border: 2px dashed rgba(255, 255, 255, .28); border-radius: 6px; cursor: pointer; } .gtfl-shelf-slot.is-filled { border-color: transparent; } .gtfl-shelf-slot.is-hook:not(.is-filled) { border-radius: 50%; } .gtfl-shelf-slot.is-target { border: 2px solid var(--toxic); background: rgba(57, 255, 20, .14); } .gtfl-shelf-slot.is-held { opacity: .35; } .gtfl-shelf-slot.is-selected { outline: 3px solid #ffd23f; outline-offset: 1px; } .gtfl-shelf-slot:disabled { cursor: not-allowed; opacity: .55; } .gtfl-shelf-slot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .gtfl-shelf-ed-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-bottom: .4rem; } .gtfl-shelf-ed-msg { min-height: 1.5em; color: var(--blue); font-weight: 600; } .gtfl-shelf-ed-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; } .gtfl-shelf-ed-opts { position: sticky; top: 0; z-index: 3; margin-bottom: .6rem; padding: .6rem .75rem; border: 1px solid var(--gtfl-border); background: var(--gtfl-tint); box-shadow: 0 4px 10px rgba(0, 0, 0, .12); } /* The red X on a selected shelf item (Cody, 2026-10-10: take one thing off without a reset) */ .gtfl-shelf-x { position: absolute; z-index: 2; transform: translate(-60%, -40%); width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; background: var(--red); color: #fff; font-size: .9rem; line-height: 1; padding: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); cursor: pointer; } .gtfl-shelf-x:hover { background: var(--red-hover, #a00); } .gtfl-shelf-x:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; } .gtfl-shelf-ed-palette { max-height: 72vh; overflow: auto; padding-right: 4px; } .gtfl-shelf-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; } .gtfl-shelf-chip { display: grid; gap: 2px; padding: 4px; border: 1px solid var(--gtfl-border); background: #fff; border-radius: 4px; text-align: center; cursor: grab; } .gtfl-shelf-chip .art { display: block; aspect-ratio: 1; } .gtfl-shelf-chip .art svg, .gtfl-shelf-chip .art img { width: 100%; height: 100%; object-fit: contain; } .gtfl-shelf-chip .nm { font-size: .68rem; line-height: 1.15; color: var(--gtfl-muted); } .gtfl-shelf-chip.is-placed { background: var(--gtfl-tint); } .gtfl-shelf-chip.is-placed .nm::after { content: " \2713"; color: var(--toxic-ink); font-weight: 700; } .gtfl-shelf-chip.is-held { outline: 3px solid var(--toxic-ink); } .gtfl-shelf-chip:focus-visible { outline: 3px solid var(--blue); } @media (max-width: 991.98px) { .gtfl-shelf-ed-grid { grid-template-columns: minmax(0, 1fr); } .gtfl-shelf-ed-palette { max-height: none; } } /* Profile details beside the shelf: the label column sizes to its longest label (no mid-word wrapping) */ @media (min-width: 576px) { .gtfl-profile-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1.25rem; margin-inline: 0; } .gtfl-profile-dl > dt, .gtfl-profile-dl > dd { width: auto; max-width: none; padding-inline: 0; } } /* An edit toggle started from the page header's edit icon: hidden until editing (it shows as Save beside Cancel). On phones the header buttons are hidden, so the in-card button stays. */ @media (min-width: 768px) { .gtfl-ie-proxied { display: none; } } .gtfl-ie-editing .gtfl-ie-proxied { display: block; } /* Compact take (profiles, home page): the same stripe card, smaller and read-only */ .gtfl-take-compact { background: var(--bs-body-bg, #fff); border-top: 1px solid var(--gtfl-border); border-right: 1px solid var(--gtfl-border); border-bottom: 1px solid var(--gtfl-border); padding: .65rem .8rem; } .gtfl-take-compact .gtfl-take-text { font-size: .95rem; margin-bottom: .5rem; } .gtfl-take-compact .gtfl-take-sub { margin-top: .5rem; padding-top: .45rem; } /* Trades: the automatic value grade (CO-03 Feature 7), above the league's vote */ .gtfl-autograde { border-left: 3px solid var(--gold); padding-left: .6rem; } .gtfl-autograde-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-hover); } /* Dynasty values (CO-03 Feature 7) */ .gtfl-window { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .45rem; border-radius: 3px; border: 1px solid; white-space: nowrap; } .gtfl-window.is-contender { color: #0a3622; background: #d1e7dd; border-color: var(--bs-success); } .gtfl-window.is-middle { color: #3d4a5b; background: var(--gtfl-tint); border-color: var(--gtfl-border); } .gtfl-window.is-rebuilder { color: #664d03; background: #fff3cd; border-color: #e0a800; } .gtfl-dv-chartwrap { overflow-x: auto; } .gtfl-dv-chart { width: 100%; min-width: 520px; height: auto; display: block; } .gtfl-dv-chart .grid { stroke: var(--gtfl-border); stroke-width: 1; } .gtfl-dv-chart .ax { font-size: 11px; fill: var(--gtfl-muted); font-family: "Chivo Mono", monospace; } .gtfl-dv-chart .line { fill: none; stroke: #a5acaf; stroke-width: 2; stroke-linejoin: round; } .gtfl-dv-chart .line.is-me { stroke: var(--gold-hover); stroke-width: 3; } .gtfl-dv-chart .lbl { font-size: 11px; fill: var(--gtfl-muted); } .gtfl-dv-chart .lbl.is-me { fill: var(--gold-hover); font-weight: 700; } .gtfl-dv-team { border: 1px solid var(--gtfl-border); padding: .6rem .75rem; height: 100%; background: #fff; } .gtfl-dv-assets { margin: 0; padding-left: 1.2rem; font-size: .85rem; } .gtfl-dv-assets li { padding: .1rem 0; } .gtfl-dv-assets li > span:first-child { display: inline-block; width: calc(100% - 4.5rem); } .gtfl-dv-assets li > span:last-child { float: right; } .gtfl-spark { width: 160px; height: 36px; } .gtfl-spark polyline { fill: none; stroke: var(--gold-hover); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } /* Trade trees (CO-03 Feature 8): nested branches with connector lines */ .gtfl-tree-side { border: 1px solid var(--gtfl-border); padding: .75rem; height: 100%; background: #fff; } .gtfl-tree, .gtfl-tree ul { list-style: none; margin: 0; padding-left: 0; } .gtfl-tree ul { margin-left: .9rem; padding-left: .9rem; border-left: 2px solid var(--gtfl-border); } .gtfl-tree li { position: relative; padding: .2rem 0; } .gtfl-tree ul > li::before { content: ""; position: absolute; left: -.9rem; top: 1.05rem; width: .75rem; border-top: 2px solid var(--gtfl-border); } .gtfl-tree-node { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; padding: .3rem .55rem; border: 1px solid var(--gtfl-border); border-left: 4px solid var(--blue); background: var(--gtfl-tint); font-size: .85rem; } .gtfl-tree-node.is-pick { border-left-color: var(--gold); } .gtfl-tree-name a { font-weight: 600; text-decoration: none; } .gtfl-tree-value { font-family: "Chivo Mono", monospace; font-size: .78rem; color: var(--blue); font-weight: 700; } .gtfl-tree-trade { font-size: .75rem; } .gtfl-tree-end { font-size: .72rem; color: var(--gtfl-muted); font-style: italic; } .gtfl-tree-end.is-kept { color: var(--toxic-ink); font-style: normal; font-weight: 600; } .gtfl-tree-end.is-cut { color: var(--red); } .gtfl-tree-moves { padding-left: 1.2rem; font-size: .85rem; margin: 0; } .gtfl-tree-moves li { padding: .15rem 0; } /* Draft Day Hub (CO-03 Feature 10) */ .gtfl-dd-clock { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; background: #15171b; color: #fff; border-left: 6px solid var(--toxic); padding: .8rem 1rem; margin-bottom: 1rem; } .gtfl-dd-clock-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); } .gtfl-dd-clock-team { font-family: var(--gtfl-font-title); font-size: 1.6rem; line-height: 1.1; } .gtfl-dd-clock-team span { font-family: var(--bs-body-font-family); font-size: .85rem; color: #b9c0c9; } .gtfl-dd-clock-live { margin-left: auto; font-size: .8rem; color: #b9c0c9; display: flex; align-items: center; gap: .4rem; } .gtfl-dd-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--toxic); animation: gtfl-dd-pulse 1.4s infinite; } @keyframes gtfl-dd-pulse { 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .gtfl-dd-dot { animation: none; } } .gtfl-dd-pick { border: 1px solid var(--gtfl-border); border-left: 4px solid var(--blue); background: #fff; padding: .55rem .7rem; height: 100%; } .gtfl-dd-pick.is-steal { border-left-color: var(--bs-success); } .gtfl-dd-pick.is-reach { border-left-color: var(--red); } .gtfl-dd-pick-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; } .gtfl-dd-no { font-family: "Chivo Mono", monospace; font-weight: 700; color: var(--blue); } .gtfl-dd-player { font-weight: 700; } .gtfl-dd-flag { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .35rem; border-radius: 3px; } .gtfl-db-value { display: block; margin-top: .15rem; font-size: .72rem; color: var(--gtfl-muted); } .gtfl-db-value.is-steal { color: #146c43; font-weight: 700; } .gtfl-db-value.is-reach { color: var(--red); font-weight: 700; } .gtfl-dd-flag.is-steal { background: #d1e7dd; color: #0a3622; } .gtfl-dd-flag.is-reach { background: #f8d7da; color: #58151c; } .gtfl-dd-pick-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: .3rem 0; } .gtfl-dd-react { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; } .gtfl-dd-emoji { border: 1px solid var(--gtfl-border); background: var(--gtfl-tint); border-radius: 999px; padding: .05rem .45rem; font-size: .85rem; line-height: 1.5; min-width: 2.2rem; } .gtfl-dd-emoji.is-mine { border-color: var(--gold-hover); background: #fff3cd; } .gtfl-dd-emoji:disabled { opacity: .55; } .gtfl-dd-n { font-family: "Chivo Mono", monospace; font-size: .72rem; } .gtfl-dd-grade { display: inline-flex; align-items: center; gap: .35rem; } .gtfl-dd-grade .form-select { width: auto; } .gtfl-dd-board th { font-size: .75rem; white-space: nowrap; } .gtfl-dd-board thead th { max-width: 6.5rem; } .gtfl-dd-cell { min-width: 6.5rem; font-size: .75rem; line-height: 1.2; padding: .3rem .35rem; } .gtfl-dd-cell a { display: block; text-decoration: none; color: inherit; } .gtfl-dd-cell .nm { display: block; font-weight: 600; } .gtfl-dd-cell .ps { display: block; color: var(--gtfl-muted); font-size: .68rem; } .gtfl-dd-cell.pos-qb { background: #fde2e2; } .gtfl-dd-cell.pos-rb { background: #dff3e4; } .gtfl-dd-cell.pos-wr { background: #dbe9fb; } .gtfl-dd-cell.pos-te { background: #fff1d6; } .gtfl-dd-cell.is-steal { box-shadow: inset 0 0 0 2px var(--bs-success); } .gtfl-dd-cell.is-reach { box-shadow: inset 0 0 0 2px var(--red); } .gtfl-dd-cell.is-clock { box-shadow: inset 0 0 0 3px var(--toxic-ink); background: #eaffe4; } .gtfl-dd-cell.is-comp { background: #f3e8ff; } .gtfl-dd-key { display: inline-block; width: .8rem; height: .8rem; vertical-align: -1px; margin-left: .4rem; } .gtfl-dd-key.is-steal { box-shadow: inset 0 0 0 2px var(--bs-success); } .gtfl-dd-key.is-reach { box-shadow: inset 0 0 0 2px var(--red); } /* AI recap writer: recent runs */ .gtfl-ai-runs { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .gtfl-ai-run { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .65rem; border: 1px solid var(--gtfl-border); border-left: 4px solid var(--blue); background: #fff; } .gtfl-ai-run.is-ok { border-left-color: var(--bs-success); } .gtfl-ai-run.is-error { border-left-color: var(--red); background: #fff8f8; } .gtfl-ai-run.is-busy { border-left-color: #e0a800; background: #fffbea; } .gtfl-ai-run-icon { font-size: 1.1rem; margin-top: .1rem; color: var(--blue); width: 1.2rem; text-align: center; } .gtfl-ai-run.is-ok .gtfl-ai-run-icon { color: var(--bs-success); } .gtfl-ai-run.is-error .gtfl-ai-run-icon { color: var(--red); } .gtfl-ai-run.is-busy .gtfl-ai-run-icon { color: #b38600; } .gtfl-ai-run-main { flex: 1 1 auto; min-width: 0; } .gtfl-ai-run-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; font-size: .9rem; } .gtfl-ai-run-status { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gtfl-muted); } .gtfl-ai-run.is-error .gtfl-ai-run-status { color: var(--red); } .gtfl-ai-run.is-ok .gtfl-ai-run-status { color: var(--toxic-ink); } .gtfl-ai-run-cost { margin-left: auto; font-family: "Chivo Mono", monospace; font-size: .8rem; color: var(--gtfl-muted); } .gtfl-ai-run-sub { font-size: .78rem; color: var(--gtfl-muted); } .gtfl-ai-run-why { font-size: .8rem; color: #58151c; margin-top: .15rem; } @media (prefers-reduced-motion: reduce) { .gtfl-ai-run-icon.fa-beat-fade { animation: none; } } /* Place medals (Kenny's kit icons): each is always its own metal, wherever it sits; the ribbon is a lighter tint */ .fa-kit-duotone.fa-gtfl-medal-gold { color: var(--gold) !important; --fa-primary-color: var(--gold) !important; --fa-secondary-color: var(--gold) !important; --fa-secondary-opacity: .45 !important; } .fa-kit-duotone.fa-gtfl-medal-silver { color: var(--silver-hover) !important; --fa-primary-color: var(--silver-hover) !important; --fa-secondary-color: var(--silver-hover) !important; --fa-secondary-opacity: .45 !important; } .fa-kit-duotone.fa-gtfl-medal-bronze { color: #a5683a !important; --fa-primary-color: #a5683a !important; --fa-secondary-color: #a5683a !important; --fa-secondary-opacity: .45 !important; } /* ...except on the award payouts ladder, where the circle already shows the metal and every icon is white */ .gtfl-pay-icon .fa-kit-duotone[class*="fa-gtfl-medal-"] { color: #fff !important; --fa-primary-color: #fff !important; --fa-secondary-color: #fff !important; --fa-secondary-opacity: .55 !important; } /* Records: total (median game included), head to head in parentheses */ .gtfl-rec-h2h { font-size: .82em; opacity: .7; font-weight: 400; }