/* Theme tokens. Light values here match the site's original (pre-dark-mode) hardcoded colors exactly, so light mode is unchanged. Dark values apply in two cases: (1) the visitor is in "auto" mode (the default — see ThemeToggleButton.razor/theme.js) and their OS prefers dark (`@media` block, guarded by `:not([data-theme="light"])` so an explicit light override still wins), or (2) theme.js has stamped `data-theme="dark"` on because the visitor picked "dark" (or "time" mode resolved to dark for the current hour) — persisted via the `dfl-theme-mode` cookie and re-applied server-side by App.razor on every request, so there's no flash of the wrong theme on load (except for "time" mode, which the server can't resolve — see App.razor's ThemeAttr). --dfl-on-brand is intentionally IDENTICAL in both themes: it's the text/icon color used on top of an already-colored chip/button/hero background (e.g. white text on the brand-blue button), never on the page's own background — those chip backgrounds (the standings hero gradient, header masthead, solid sport-accent pills) are fixed brand colors left unthemed, so the text sitting on them must stay constant too. --dfl-tint-mix / --dfl-accent-text-mix exist because per-sport (SportBranding.cs) and per-member (MemberBranding.cs) colors are set as INLINE custom properties per element (e.g. --sport-accent, --sport-accent-soft, --member-bg/-fg) — a stylesheet rule can never override a custom property an element already sets inline on itself, so app.css can't just redeclare --sport-accent-soft for dark mode the way it does --dfl-surface etc. Instead, every CONSUMING rule blends the inline color via color-mix() against one of these two ratios: --dfl-tint-mix controls how much of an inline "soft" pastel background survives after mixing toward the page surface (100% = untouched in light mode; a low percentage in dark mode mutes what would otherwise be a bright pastel patch on a dark page), and --dfl-accent-text-mix controls how much white gets blended into an inline accent color used as plain text (0% = untouched in light mode; darker sport accents are otherwise hard to read as text on a dark page — see SportBranding.cs's UEFACL comment for a case this ratio alone couldn't fix). Solid, non-soft accent fills (pills/buttons/borders paired with --dfl-on-brand text) are left unmixed, same reasoning as the hero gradient — EXCEPT --dfl-table-header-bg, used only for the "Overall"/"Money"/section-header table bars that sit directly beside the (now near-black) per-sport columns: the fully vivid brand blue read as too jarring/saturated next to them, so this one gets its own darker, muted-navy value in dark mode instead of either the vivid fixed blue or a full brighten. */ :root { --dfl-bg: #f4f6f8; --dfl-surface: #ffffff; --dfl-surface-alt: #eef4f9; --dfl-surface-hover: #f8fafc; --dfl-border: #e5e7eb; --dfl-border-strong: #cbd5e1; --dfl-table-header-bg: #1a5490; --dfl-text: #1f2937; --dfl-text-muted: #6b7280; --dfl-brand: #1a5490; --dfl-brand-dark: #0f3d6b; --dfl-on-brand: #ffffff; --dfl-on-brand-rgb: 255, 255, 255; --dfl-success: #15803d; --dfl-success-strong: #14532d; --dfl-success-bg: #dcfce7; --dfl-success-rgb: 21, 128, 61; --dfl-danger: #b91c1c; --dfl-danger-bg: #fee2e2; --dfl-danger-rgb: 220, 38, 38; --dfl-warning: #d97706; --dfl-warning-text: #92400e; --dfl-warning-bg: #fef3c7; --dfl-shadow-rgb: 0, 0, 0; --dfl-gold-rgb: 255, 215, 0; --dfl-silver-rgb: 192, 192, 192; --dfl-bronze-rgb: 205, 127, 50; /* 4th/5th money places (see LeagueSeedData.cs payouts) — deliberately NOT more "metals" (pewter/ copper read too close to silver/bronze, and a blue "sapphire" for 5th still read too close to bronze/3rd in practice); emerald/ruby break into a different hue family entirely so all five rows stay visually distinct at a glance. Sport.razor only — Home.razor's overall standings stays gold/silver/bronze (top 3 only). */ --dfl-emerald-rgb: 46, 139, 87; --dfl-ruby-rgb: 244, 114, 137; --dfl-info-bg: #dbeafe; --dfl-info-border: #bfdbfe; --dfl-info-text: #003e7e; --dfl-purple-bg: #ede9fe; --dfl-purple-text: #4c1d95; --dfl-purple-border: #7c3aed; --dfl-tint-mix: 100%; --dfl-accent-text-mix: 0%; /* Scoreboard/TeamDetail win-loss cell tint (rendered by .scoreboard-cell--win/--loss, near the bottom of this file, as two stacked background layers using these four custom properties). --dfl-scoreboard-win-rgb/--dfl-scoreboard-loss-rgb/--dfl-scoreboard-tint-alpha are the tint itself and are NEVER redeclared per theme, unlike --dfl-success-rgb/--dfl-danger-rgb above — this tint is meant to read as the same washed-out rgba() in both themes, not the more saturated colors (or a much higher alpha) the rest of dark-mode UI switches to; both alternatives were tried and read as too vivid/saturated. --dfl-scoreboard-brighten-alpha drives a SECOND layer painted behind that tint, only to lift the near-black dark-mode page a little before the tint lands on it — 0 here (no effect in light mode), overridden to a real value only in the two dark-mode blocks below. It deliberately reuses --dfl-success-rgb/--dfl-danger-rgb (the theme's own lighter shade of the SAME hue) rather than plain white for that layer's color — a white wash under a translucent color tint was tried first and read as a gray/desaturated cast rather than a brighter green/red. */ --dfl-scoreboard-tint-alpha: 0.16; --dfl-scoreboard-win-rgb: 21, 128, 61; --dfl-scoreboard-loss-rgb: 220, 38, 38; --dfl-scoreboard-brighten-alpha: 0; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dfl-bg: #0e1116; --dfl-surface: #1a1f27; --dfl-surface-alt: #1c2a3a; --dfl-surface-hover: #232a35; --dfl-border: #2d333d; --dfl-border-strong: #3d4552; --dfl-text: #e5e7eb; --dfl-text-muted: #9aa4b2; --dfl-brand: #5b9bd5; --dfl-brand-dark: #7fb2e8; --dfl-success: #4ade80; --dfl-success-strong: #86efac; --dfl-success-bg: #14532d; --dfl-success-rgb: 74, 222, 128; --dfl-danger: #f87171; --dfl-danger-bg: #450a0a; --dfl-danger-rgb: 248, 113, 113; --dfl-warning: #fbbf24; --dfl-warning-text: #fde68a; --dfl-warning-bg: #451a03; --dfl-gold-rgb: 191, 149, 0; --dfl-silver-rgb: 148, 148, 148; --dfl-bronze-rgb: 153, 94, 37; --dfl-emerald-rgb: 63, 168, 114; --dfl-ruby-rgb: 244, 63, 94; --dfl-info-bg: #1e3a5f; --dfl-info-border: #2f5a8a; --dfl-info-text: #93c5fd; --dfl-purple-bg: #3b2a5c; --dfl-purple-text: #c4b5fd; --dfl-purple-border: #8b5cf6; --dfl-table-header-bg: #14304a; --dfl-tint-mix: 0%; --dfl-accent-text-mix: 30%; /* Only defined for dark mode, deliberately absent from :root — every consuming rule below falls back to its own original light-mode opacity value via var(..., ), so light mode's "washed out" inactive-sport look is untouched. In dark mode this same reduced dimming applies everywhere uniformly instead of each rule's own (much lower) value, since opacity toward a dark page background reads as "too dim to see", not just "de-emphasized" the way it does against a light background. */ --dfl-inactive-opacity: 0.9; --dfl-scoreboard-brighten-alpha: 0.15; } } :root[data-theme="dark"] { --dfl-bg: #0e1116; --dfl-surface: #1a1f27; --dfl-surface-alt: #1c2a3a; --dfl-surface-hover: #232a35; --dfl-border: #2d333d; --dfl-border-strong: #3d4552; --dfl-text: #e5e7eb; --dfl-text-muted: #9aa4b2; --dfl-brand: #5b9bd5; --dfl-brand-dark: #7fb2e8; --dfl-success: #4ade80; --dfl-success-strong: #86efac; --dfl-success-bg: #14532d; --dfl-success-rgb: 74, 222, 128; --dfl-danger: #f87171; --dfl-danger-bg: #450a0a; --dfl-danger-rgb: 248, 113, 113; --dfl-warning: #fbbf24; --dfl-warning-text: #fde68a; --dfl-warning-bg: #451a03; --dfl-gold-rgb: 191, 149, 0; --dfl-silver-rgb: 148, 148, 148; --dfl-bronze-rgb: 153, 94, 37; --dfl-emerald-rgb: 63, 168, 114; --dfl-ruby-rgb: 244, 63, 94; --dfl-info-bg: #1e3a5f; --dfl-info-border: #2f5a8a; --dfl-info-text: #93c5fd; --dfl-purple-bg: #3b2a5c; --dfl-purple-text: #c4b5fd; --dfl-purple-border: #8b5cf6; --dfl-table-header-bg: #14304a; --dfl-tint-mix: 0%; --dfl-accent-text-mix: 30%; --dfl-inactive-opacity: 0.9; --dfl-scoreboard-brighten-alpha: 0.15; } html, body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--dfl-bg, #f4f6f8); color: var(--dfl-text, #1f2937); overflow-x: clip; max-width: 100%; } /* Baseline for plain, unclassed tags (e.g. the Commissioner index's link table, inline prose links) — without this they fall back to the browser's default link-blue/visited-purple, which never adapts to the theme tokens above. Scoped to `:not([class])` deliberately, NOT just left as a bare `a, a:visited` — a *classed* button-styled anchor (e.g. .draft-link-btn, which sets white text via --dfl-on-brand) would otherwise still lose that fight once visited: `a:visited` carries an extra type-selector (a) on top of its pseudo-class, giving it higher specificity than a single class selector like `.draft-link-btn`, so it beat the button's own color rule for any link the browser considered visited (e.g. Commissioner dashboard "Manage"/"Scoring Math" links after you'd clicked them once) — text silently went from white to --dfl-brand's blue, in both themes. Any *classed* anchor now falls outside this rule entirely and keeps its own styling regardless of visited state. */ a:not([class]), a:visited:not([class]) { color: var(--dfl-brand, #1a5490); } /* Theme toggle button (Components/Shared/ThemeToggleButton.razor, mounted twice by HeaderNavPanel.razor). Lives here rather than HeaderNavPanel.razor.css because it's rendered by a separate child component — reaching into it from a CSS-isolated parent stylesheet would need ::deep on every rule for no benefit, since nothing else here is component-private. Sits on the colored header bar, so it uses --dfl-on-brand like the rest of the header's icons/text. */ .dfl-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; padding: 0; border: none; border-radius: 999px; background: rgba(var(--dfl-on-brand-rgb, 255, 255, 255), 0.12); color: var(--dfl-on-brand, #fff); cursor: pointer; flex-shrink: 0; } .dfl-theme-toggle:hover { background: rgba(var(--dfl-on-brand-rgb, 255, 255, 255), 0.22); } /* Only one icon shows at a time, directly naming the CURRENT mode (not the resolved light/dark appearance, and not what clicking will do next) — "A" for auto, sun for light, moon for dark, hourglass for time. Keyed off data-theme-mode, which theme.js always sets to one of these four explicit values (default "auto"), so this doesn't need the @media-query cascade the color tokens use — there's no ambiguity to resolve here. */ .dfl-theme-toggle__icon--auto, .dfl-theme-toggle__icon--sun, .dfl-theme-toggle__icon--moon, .dfl-theme-toggle__icon--time { display: none; } :root[data-theme-mode="auto"] .dfl-theme-toggle__icon--auto, :root[data-theme-mode="light"] .dfl-theme-toggle__icon--sun, :root[data-theme-mode="dark"] .dfl-theme-toggle__icon--moon, :root[data-theme-mode="time"] .dfl-theme-toggle__icon--time { display: block; } .dfl-theme-toggle-wrap { display: inline-flex; align-items: center; gap: 0.5rem; } /* Descriptor text next to the toggle, naming the current mode in words (icon-only isn't always obvious). Hidden on the desktop header — no room, and the icon alone carries the meaning there — shown only in the hamburger dropdown via the same 1900px breakpoint MainLayout.razor.css/ HeaderNavPanel.razor.css duplicate; keep this in sync with those if that breakpoint ever moves. */ .dfl-theme-toggle-label { display: none; } .dfl-theme-toggle-label span { display: none; } @media (max-width: 1900px) { .dfl-theme-toggle-label { display: inline-block; font-size: 0.8rem; opacity: 0.85; } } :root[data-theme-mode="auto"] .dfl-theme-toggle-label--auto, :root[data-theme-mode="light"] .dfl-theme-toggle-label--sun, :root[data-theme-mode="dark"] .dfl-theme-toggle-label--moon, :root[data-theme-mode="time"] .dfl-theme-toggle-label--time { display: inline; } h1, h2, h3 { color: var(--dfl-brand, #1a5490); } .dfl-card { background: var(--dfl-surface, #fff); border-radius: 8px; box-shadow: 0 1px 4px rgba(var(--dfl-shadow-rgb, 0, 0, 0), 0.08); padding: 0.5rem; margin-bottom: 0.5rem; } .dfl-banner { background: var(--dfl-surface-alt, #e8f4f8); border-left: 4px solid var(--dfl-brand, #1a5490); padding: 0.425rem 0.5rem; border-radius: 4px; margin-bottom: 0.5rem; } .dfl-banner.warn { background: var(--dfl-warning-bg, #fff8e1); border-left-color: var(--dfl-warning, #f59e0b); } .dfl-install-banner { display: none; position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 1000; align-items: center; gap: 0.75rem; background: var(--dfl-surface, #fff); border-radius: 10px; box-shadow: 0 4px 16px rgba(var(--dfl-shadow-rgb, 0, 0, 0), 0.2); padding: 0.375rem 0.5rem; max-width: 420px; margin: 0 auto; } .dfl-install-banner.is-visible { display: flex; } .dfl-install-banner__icon { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; } .dfl-install-banner__copy { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 0.85rem; } .dfl-install-banner__copy strong { color: var(--dfl-brand, #1a5490); } /* Fixed brand-blue fill in both themes — see .dfl-standings-hero's comment for why (this is the same "primary action" brand color used for buttons/badges/header-bars throughout the app, always paired with the theme-constant --dfl-on-brand text). */ .dfl-install-banner__install { background: #1a5490; color: var(--dfl-on-brand, #fff); border: none; border-radius: 6px; padding: 0.5rem 0.85rem; font-weight: 600; cursor: pointer; flex-shrink: 0; } .dfl-install-banner__dismiss { background: none; border: none; cursor: pointer; font-size: 0.9rem; padding: 0.25rem; flex-shrink: 0; color: var(--dfl-text-muted, #888); } .dfl-table-wrap { overflow-x: auto; } table.dfl-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } table.dfl-table th, table.dfl-table td { padding: 0.275rem 0.325rem; border-bottom: 1px solid var(--dfl-border, #e5e7eb); text-align: left; white-space: nowrap; } table.dfl-table th { background: var(--dfl-surface-alt, #eef4f9); color: var(--dfl-brand-dark, #0f3d6b); font-weight: 600; } table.dfl-table tr:hover td { background: var(--dfl-surface-hover, #f9fbfd); } /* Shared delta coloring (MyTeams.razor, DraftBoardCore.razor history columns, etc.) — pair these ONLY with a sizing class that does NOT itself set `color` (e.g. a dedicated `__delta` class), never with an existing `__proj`/value class that sets color. Same-specificity CSS rules resolve by source order, not which class "sounds more specific" — a `color` rule defined later in this file (most component-specific rules are, since these three are declared near the top) wins over these regardless of which element also has score-positive/-negative/-inactive. */ .score-positive { color: var(--dfl-success, #15803d); } .score-negative { color: var(--dfl-danger, #b91c1c); } .score-inactive { color: var(--dfl-text-muted, #6b7280); } /* Standings heat-map shading for streak / last-10 columns */ .heat-pos-strong { background-color: rgba(var(--dfl-success-rgb, 22, 163, 74), 0.22); } .heat-pos-med { background-color: rgba(var(--dfl-success-rgb, 22, 163, 74), 0.13); } .heat-pos-weak { background-color: rgba(var(--dfl-success-rgb, 22, 163, 74), 0.07); } .heat-neg-strong { background-color: rgba(var(--dfl-danger-rgb, 220, 38, 38), 0.22); } .heat-neg-med { background-color: rgba(var(--dfl-danger-rgb, 220, 38, 38), 0.13); } .heat-neg-weak { background-color: rgba(var(--dfl-danger-rgb, 220, 38, 38), 0.07); } .sync-ok { color: var(--dfl-success, #15803d); font-size: 0.75rem; } .sync-fail { color: var(--dfl-danger, #b91c1c); font-size: 0.75rem; } .dfl-sport-nav { display: flex; gap: 0.35rem; padding: 0.65rem 1.5rem; background: var(--dfl-surface, #fff); border-bottom: 1px solid var(--dfl-border, #e5e7eb); overflow-x: auto; width: 100%; max-width: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch; } .dfl-sport-nav a { text-decoration: none; color: var(--dfl-brand-dark, #0f3d6b); font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--dfl-border, #d1d9e0); white-space: nowrap; } .dfl-sport-nav a:hover { background: var(--dfl-surface-alt, #eef4f9); } .dfl-sport-nav a.active { background: var(--sport-accent, var(--dfl-brand, #1a5490)); border-color: var(--sport-accent, var(--dfl-brand, #1a5490)); color: var(--sport-tab-text, var(--dfl-surface, #fff)); } .dfl-sport-nav a:not(.inactive):not(.active) { /* Unlike other --sport-accent-soft consumers in this file, this pill is deliberately NOT muted toward --dfl-surface in dark mode (--dfl-tint-mix overridden back to 100% here) — it's a small chip, same reasoning as the fixed-color header/hero chips in the top-of-file comment, so the pastel stays visible and matches light mode exactly (e.g. MLB stays light red). Text color is likewise pinned to the light-mode --dfl-brand-dark value instead of the token, which flips to a light blue in dark mode and would be unreadable on a light pastel chip. */ --dfl-tint-mix: 100%; background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); border-color: transparent; color: #0f3d6b; } .dfl-sport-nav a.inactive { opacity: var(--dfl-inactive-opacity, 0.45); } /* Wraps DflTicker + NewsTicker (see MainLayout.razor) so the pair sticks and scrolls as one unit below the header, instead of each .dfl-ticker fighting over the same sticky offset. */ .dfl-ticker-stack { position: sticky; /* Sits flush against the bottom of the sticky site header — this is dfl-header's actual height (MainLayout.razor.css: 3rem logo + 2 x 0.375rem padding), NOT the 4.75rem offset draft-clock-card/dfl-chat--sidebar use (which leaves a 1rem cushion). Keep equal to dfl-header's height. -1px kills a sub-pixel hairline at the seam. */ top: calc(3.75rem - 1px); z-index: 1050; } @media (max-width: 1900px) { .dfl-ticker-stack { /* dfl-header's mobile-shrink height: 2.5rem logo + 2 x 0.325rem padding = 3.15rem */ top: calc(3.15rem - 1px); } } .dfl-ticker { overflow: hidden; background: linear-gradient(90deg, var(--dfl-surface-alt, #e8f0f8), var(--dfl-surface-alt, #f2f7fb)); color: var(--dfl-brand-dark, #0f3d6b); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--dfl-border, #e5e7eb); cursor: grab; touch-action: pan-y; /* let vertical page scroll pass through; ticker.js owns horizontal drag */ -webkit-user-select: none; user-select: none; } /* Set by ticker.js while a drag is in progress (see js/ticker.js) */ .dfl-ticker--dragging { cursor: grabbing; } /* Movement is entirely JS-driven (see js/ticker.js) so it can be paused/dragged/resumed — plain CSS animation can't be interrupted by a pointer gesture and smoothly resumed later. */ .dfl-ticker__track { display: flex; width: max-content; will-change: transform; } .dfl-ticker__text { display: inline-flex; align-items: center; padding: 0.45rem 2rem; white-space: nowrap; } .dfl-ticker__game { display: inline-flex; align-items: center; gap: 0.3rem; } /* NewsTicker.razor's per-headline equivalent of .dfl-ticker__game above. */ .dfl-ticker__headline { display: inline-flex; align-items: center; gap: 0.4rem; } .dfl-ticker__headline a { color: inherit; text-decoration: none; cursor: pointer; } .dfl-ticker__headline a:hover { text-decoration: underline; } /* Shown once per sport (see DflTicker.razor's IsFirstOfSport), not once per game — a visually distinct "sport change" marker rather than a label repeated on every entry. */ .dfl-ticker__sport-marker { color: #b45309; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.14em; margin: 0 0.6rem; } .dfl-ticker__sep { opacity: 0.55; } .dfl-ticker__status { font-size: 0.62rem; opacity: 0.8; margin-left: 0.1rem; } .dfl-ticker__status.is-live { color: var(--dfl-success, #15803d); opacity: 1; } .dfl-ticker__divider { opacity: 0.35; margin: 0 1rem; } .dfl-ticker .team-logo { width: 1.1rem; height: 1.1rem; vertical-align: middle; } .member-badge-link { display: inline-flex; color: inherit; text-decoration: none; } .member-badge { display: inline-flex; align-items: center; gap: 0.5rem; } .member-badge__avatar, .member-badge__photo { width: var(--member-badge-size, 36px); height: var(--member-badge-size, 36px); border-radius: 999px; flex-shrink: 0; box-sizing: border-box; border: 2.5px solid var(--member-chart-color, var(--member-bg, var(--dfl-border, #e5e7eb))); } .member-badge__avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--member-bg, var(--dfl-border, #e5e7eb)); color: var(--member-fg, var(--dfl-text, #1f2937)); font-size: calc(var(--member-badge-size, 36px) * 0.34); font-weight: 800; letter-spacing: 0.02em; } .member-badge__photo { display: block; object-fit: contain; object-position: center; background: var(--dfl-surface, #fff); image-rendering: auto; } .member-badge__name { font-weight: 600; } .team-logo-link { display: inline-flex; line-height: 0; } .team-logo { width: 1.75rem; height: 1.75rem; object-fit: contain; flex-shrink: 0; } /* A handful of team crests across MLB/NFL/NHL/NCAAF/NCAAB/UEFACL (see each catalog's own GetLocalDarkLogoUrl — MlbTeamCatalog, ProTeamLogoCatalog, CollegeTeamLogoCatalog, UefaclTeamLogoCatalog) are entirely (or almost entirely) navy/black on a transparent PNG and nearly disappear against the dark theme's near-black page background. For those teams only, TeamLogo.razor renders BOTH the normal logo (tagged --light-variant) and ESPN's own official dark-mode crest (tagged --dark-variant, downloaded from their 500-dark CDN endpoint — see MlbTeamCatalog.GetLocalDarkLogoUrl for why that's the source, not a hand-recolor) as sibling elements, and this pair of rules toggles which one is visible — mirrors the --dfl-bg dark-mode pattern at the top of this file: auto/OS-dark vs. explicit data-theme="dark". Every other team only ever renders the plain .team-logo (no variant class), so it's unaffected and still always visible. SportLogo.razor reuses these same two class names (on its .sport-logo elements) for the same problem on UEFACL's sport-wide crest — see SportLogoCatalog.GetLocalDarkLogoUrl. ScoreboardSportPanel.razor reuses them a third time (on its .scoreboard-broadcast-logo elements) for the same problem on broadcast-network logos — see BroadcastLogoCatalog. Base rule below is qualified with the img type (not just .team-logo--dark-variant) so its specificity beats .sport-logo's own `display: block` — .sport-logo sets display itself (unlike .team-logo, which doesn't), and without the type qualifier the two rules tie on specificity and .sport-logo (later in this file) would win the cascade, showing the dark variant even outside dark mode. */ img.team-logo--dark-variant { display: none; } /* Summary.razor's .summary-matrix__sport-head .sport-logo rule (below, in this same file) also sets its own `display: block` and outranks the plain img.team-logo--dark-variant rule above on specificity (two classes beats one class + type) — this targeted rule keeps the default-off state winning there too. Still below the dark-mode "on" overrides' specificity, so the toggle itself is unaffected. */ img.sport-logo.team-logo--dark-variant { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .team-logo--light-variant { display: none; } :root:not([data-theme="light"]) .team-logo--dark-variant { display: inline-block; } } :root[data-theme="dark"] .team-logo--light-variant { display: none; } :root[data-theme="dark"] .team-logo--dark-variant { display: inline-block; } .team-name-cell { display: flex; align-items: center; gap: 0.45rem; } .sport-banner { border-left-color: var(--sport-accent, var(--dfl-brand, #1a5490)); background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #e8f4f8)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); } .sport-banner__brand { display: flex; align-items: center; gap: 0.85rem; } .sport-banner__text { min-width: 0; } .sport-panel__title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; } .sport-panel__title h1 { margin: 0; font-size: 1.1rem; } .sport-panel h1, .sport-panel h2 { color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand, #1a5490))); } .sport-panel h2 { margin: 0 0 0.35rem; font-size: 1.1rem; } .dfl-card.sport-panel { padding: 0.3rem 0.375rem; margin-bottom: 0.325rem; } .dfl-banner.sport-banner--page { padding: 0.3rem 0.425rem; margin-bottom: 0.325rem; } /* Sport.razor's Scores/Standings pill toggle + its per-view sub-toggle (Current/Projected or Overall/League-Conference/Division). Same visual language as .draft-sport-pill's active-state ring, just larger since these are primary page navigation rather than a compact filter row. --sub is a touch smaller/lighter than the primary row so the two-level hierarchy reads clearly. */ .sport-view-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.65rem; } .sport-view-pills--sub { margin-top: -0.25rem; } .sport-view-pill { display: inline-block; padding: 0.3rem 0.9rem; border-radius: 999px; background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); font-size: 0.85rem; font-weight: 700; border: 1px solid transparent; cursor: pointer; } .sport-view-pills--sub .sport-view-pill { padding: 0.2rem 0.7rem; font-size: 0.78rem; } .sport-view-pill.active { background: var(--sport-accent, var(--dfl-brand, #1a5490)); color: var(--dfl-on-brand, #fff); border-color: var(--sport-accent, var(--dfl-brand-dark, #0f3d6b)); } .sport-panel__footnote { margin: 0.45rem 0 0; } .sport-panel .dfl-sheet-note { margin: 0 0 0.4rem; } .sport-panel table.dfl-table th, .sport-panel table.dfl-table td { padding: 0.14rem 0.225rem; line-height: 1.2; vertical-align: middle; text-align: right; } .sport-panel table.dfl-table .col-text { text-align: left; } /* flex (not inline vertical-align) so the logo/name/badges genuinely center as a group against taller neighboring cells (e.g. the Owner column's avatar) — inline vertical-align only aligns elements relative to each other on the line, not the line as a whole within a taller cell. Same technique already used successfully for .scoreboard-owner-cell/.scoreboard-opponent-cell. */ .sport-panel table.dfl-table td.team-name-cell { display: flex; align-items: center; line-height: normal; text-align: left; } .sport-panel table.dfl-table td.team-name-cell .team-logo { margin-right: 0.35rem; } .sport-panel table.dfl-table td.pick-list { line-height: normal; text-align: center; } .sport-panel table.dfl-table td:has(.member-badge) { line-height: normal; text-align: left; } /* Caps the unfrozen name column's growth on wide desktop viewports — table-layout:auto (this table's default; nothing overrides it) hands ALL of a table's leftover width to whichever column has no explicit width, which is this one (freeze-col-2 right before it also now has its own width+min-width fix, further down this file, so it can't absorb any of the leftover either). width+max-width alone wasn't enough to stop the browser from still inflating this column — same class of quirk as the freeze-col-1 comment describes ("table auto-layout treats a bare `width` as only a *preferred* size"), confirmed here too. min-width matching width is what actually holds it, mirroring freeze-col-1's exact proven recipe (width+min-width+box-sizing:border-box) instead of width+max-width. overflow/ellipsis (nowrap already comes from table.dfl-table's base rule) truncates gracefully if a name is longer than this. Sport.razor's Member Scores tables share the same 4rem as Home.razor's Overall Standings/Score Trends tables below (shrunk from 6rem once the league's longest member display name went from "Charlie H." to "Charlie" — comfortably fits well under 4rem), and the narrower column matters most on mobile, where every column competes for the same limited viewport width before .dfl-table-wrap's overflow-x:auto kicks in. */ .sport-panel table.dfl-member-scores-table td.col-text { width: 4rem; min-width: 4rem; max-width: 4rem; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; } .dfl-standings-table--sheet td.col-text, .dfl-trend-table td.col-text { width: 4rem; min-width: 4rem; max-width: 4rem; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; } .sport-panel table.dfl-table td:has(.member-pick-logos) { line-height: normal; text-align: center; } .sport-panel .member-badge { gap: 0.35rem; vertical-align: middle; } .sport-panel .member-pick-logos { display: inline-flex; gap: 0.2rem; vertical-align: middle; align-items: center; } .sport-panel table.dfl-table .team-logo, .sport-panel table.dfl-table .member-badge__photo, .sport-panel table.dfl-table .member-badge__avatar { vertical-align: middle; } .sport-panel .scoring-detail-table td.tier-breakdown-cell { vertical-align: top; text-align: left; padding-top: 0.35rem; padding-bottom: 0.35rem; } /* Same display:flex-on- fix as .dfl-team-standings-table above — this table's Tier Breakdown column routinely wraps to multiple lines, making the row tall, and without this override the Team cell (flex, so no longer a real table-cell) stopped centering against that taller row. */ .sport-panel table.dfl-table.scoring-detail-table td.team-name-cell { display: table-cell; vertical-align: middle; } .scoring-detail-table .team-name-inner { display: flex; align-items: center; gap: 0.35rem; } .sport-panel .tier-breakdown-list { padding-left: 0.95rem; line-height: 1.25; } .sport-panel .tier-breakdown-list li + li { margin-top: 0.1rem; } table.dfl-table tr.sport-head th, .sport-panel table.dfl-table thead th { background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); } /* Deep muted navy in dark mode (--dfl-table-header-bg) rather than the vivid fixed brand blue used for buttons/badges elsewhere — see that token's comment above for why. */ .dfl-standings-table .section-overall, .dfl-standings-table .section-money { text-align: center; background: var(--dfl-table-header-bg, #1a5490); color: var(--dfl-on-brand, #fff); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; } .dfl-standings-table .section-sport { text-align: center; background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; } .dfl-standings-table .section-sport.is-inactive { opacity: var(--dfl-inactive-opacity, 0.55); } .section-sport__head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; } .dfl-sport-leader-card__sport { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .dfl-standings-table tr.subhead th { font-size: 0.78rem; background: var(--dfl-surface-hover, #f8fafc); text-align: right; } .dfl-standings-table tr.subhead th:first-child { text-align: right; } .dfl-standings-table tr.subhead th.col-text { text-align: left; } .dfl-standings-table .score-cell strong { color: var(--dfl-brand-dark, #0f3d6b); } table.dfl-table.dfl-standings-table td { text-align: right; } table.dfl-table.dfl-standings-table tbody td.col-text { text-align: left; } /* Frozen leading columns for the site's scrollable data tables, so a row stays identifiable while scrolling right through stat columns on a narrow screen. `.freeze-col-1`/`.freeze-col-2` freeze a 2-column identity pair (e.g. Rk+Member, #+Team); `.freeze-col-solo` freezes a single leading column (e.g. just a Team or Member column). freeze-col-1 gets a fixed border-box width PLUS a matching min-width — table auto-layout treats a bare `width` as only a *preferred* size and will shrink the column toward its min-content width once the table overflows its container (exactly the narrow-screen/overflow-x:auto case this feature targets), which silently produces a real gap between freeze-col-1's shrunk right edge and freeze-col-2's `left` offset (still computed from the wider assumed width) — min-width is what actually holds the column at that width. Two width groups by known max content width: 2rem for 1-2 digit rank/AP-poll numbers (Home.razor Overall Standings + Projection Trends, Sport.razor Member Scores, SportTeamStandingsTable.razor — all centered, see the freeze-col-1 text-align rules below), 3rem for MyTeams.razor's "#", an overall draft pick number up to DraftConstants.TotalPicks=210, genuinely needing the extra digit. In Home.razor's two tables (Overall Standings + Projection Trends) and Sport.razor's Member Scores table, freeze-col-2 holds ONLY the member avatar (`MemberBadge ShowName="false"`) — the member's name is a separate, deliberately unfrozen `.col-text` column right after it (`MemberBadge ShowAvatar="false"`) so the name scrolls away while the avatar stays pinned for row identification. Same split in SportTeamStandingsTable.razor and MyTeams.razor (one table per sport), but for the Team column instead of Member: freeze-col-2 holds only ``, and the team name/badges (formerly combined with the logo in one `.team-name-cell` / `.my-teams-team-name` cell) live in their own unfrozen `.col-text` column right after it. Don't recombine any of these back into one freeze-col-2 cell without re-checking that request. Home.razor's merged colspan=5 "Overall" header cell is split into a blank frozen colspan=2 segment (Rk+Avatar) + a blank unfrozen colspan=1 segment (Member name column) + a labeled colspan=3 segment, so the banner still reads as one continuous bar while only Rk+Avatar freeze; same trick for its tfoot "Total" label (colspan=2, exactly the frozen zone's width, followed by an empty td for the unfrozen name column). position:sticky on table cells doesn't composite cleanly against the collapsed-border layer (Chrome/Firefox both show a hairline see-through gap between sticky cells) — switch every frozen table to the separate border model so the sticky columns paint with solid edges. */ .dfl-standings-table--sheet, .dfl-trend-table, .dfl-member-scores-table, .dfl-team-standings-table, .dfl-my-teams-table, .dfl-sidebet-balances-table, .scoring-detail-table, .dfl-login-history-table, .draft-report-card-table { border-collapse: separate; border-spacing: 0; } .draft-report-card-table .freeze-col-solo { min-width: 9rem; } /* Side-Bets balances table: every cell bold; the numeric columns (everything but Member) right-aligned. */ .dfl-sidebet-balances-table th, .dfl-sidebet-balances-table td { font-weight: 700; } .dfl-sidebet-balances-table th:not(.freeze-col-solo), .dfl-sidebet-balances-table td:not(.freeze-col-solo) { text-align: right; } /* Best steal / Worst bust cells: team logo left of the name + pick detail, bold and sport-accent coloured (--sport-accent set inline per row). */ .draft-report-card__pick { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); } .dfl-standings-table--sheet .freeze-col-1, .dfl-standings-table--sheet .freeze-col-2, .dfl-trend-table .freeze-col-1, .dfl-trend-table .freeze-col-2, .dfl-member-scores-table .freeze-col-1, .dfl-member-scores-table .freeze-col-2, .dfl-team-standings-table .freeze-col-1, .dfl-team-standings-table .freeze-col-2, .dfl-my-teams-table .freeze-col-1, .dfl-my-teams-table .freeze-col-2, .freeze-col-solo, .section-overall--frozen, .standings-total-label--frozen { position: sticky; z-index: 1; } th.freeze-col-1, th.freeze-col-2, th.freeze-col-solo, .section-overall--frozen { z-index: 2; } .dfl-standings-table--sheet .freeze-col-1, .dfl-member-scores-table .freeze-col-1, .dfl-team-standings-table .freeze-col-1, .dfl-trend-table .freeze-col-1, .dfl-my-teams-table .freeze-col-1, .freeze-col-solo, .section-overall--frozen, .standings-total-label--frozen { left: 0; } .dfl-standings-table--sheet .freeze-col-1, .dfl-member-scores-table .freeze-col-1, .dfl-team-standings-table .freeze-col-1, .dfl-trend-table .freeze-col-1 { width: 2rem; min-width: 2rem; box-sizing: border-box; } .dfl-standings-table--sheet .freeze-col-2, .dfl-member-scores-table .freeze-col-2, .dfl-team-standings-table .freeze-col-2, .dfl-trend-table .freeze-col-2 { left: 2rem; } /* These three tables' freeze-col-2 (the avatar-only cell right before the name column) gets its own explicit width — same width+min-width+box-sizing recipe as freeze-col-1 above, not just a bare width, for the same reason: table-layout:auto's extra-space-distribution step doesn't reliably respect a bare width/max-width as a real cap (confirmed by this column visibly getting an equal share of the table's leftover desktop width alongside every other flexible column before this was added). Left off .dfl-team-standings-table deliberately — that table's freeze-col-2 holds a Team logo, not a member avatar, and hasn't shown this problem. */ .dfl-standings-table--sheet .freeze-col-2, .dfl-member-scores-table .freeze-col-2, .dfl-trend-table .freeze-col-2 { width: 2.75rem; min-width: 2.75rem; box-sizing: border-box; } .dfl-my-teams-table .freeze-col-1 { width: 3rem; min-width: 3rem; box-sizing: border-box; } .dfl-my-teams-table .freeze-col-2 { left: 3rem; } /* Rk/AP column always centered (not the table's default right/left alignment) — these selectors need to out-specificity .dfl-standings-table tr.subhead th:first-child (hence the matching tr.subhead prefix below, tied specificity resolved by this block coming later in the file), table.dfl-table.dfl-standings-table td, and .sport-panel table.dfl-table th/td (all of which would otherwise right-align it) by matching or exceeding their class+element count. */ .dfl-standings-table--sheet tr.subhead th.freeze-col-1, table.dfl-table.dfl-standings-table td.freeze-col-1, .dfl-trend-table th.freeze-col-1, .dfl-trend-table td.freeze-col-1, .sport-panel table.dfl-table th.freeze-col-1, .sport-panel table.dfl-table td.freeze-col-1 { text-align: center; } /* Sport.razor's Member Scores tables (Current Score / Vegas Proj) header alignment. Rk is already centered via the shared freeze-col-1 rule above. Member (avatar header is blank/frozen-col-2, separate from the "Member" text header right after it — kept as two real cells rather than a colspan="2" merge, since a merged header cell can't be marked sticky without covering the Teams column while scrolling; a merged header also isn't sticky the way freeze-col-2 is, so the space above the frozen avatar visibly scrolled away independently of the body — confirmed broken, don't redo the merge) stays left via the base .col-text rule, no override needed. nth-child counts DOM elements: with the header split back into two cells, both tables share the same [1]Rk [2]blank-avatar [3]Member [4]Teams [5..]stat-columns shape. Teams centers (its body cells are centered separately below, via td.pick-list); everything right of Teams right-justifies its header to match those columns' already-right-aligned body cells (.sport-panel table.dfl-table td's base). The .sport-panel prefix is required to out-specificity .sport-panel table.dfl-table .col-text (3 classes) for the Teams th, which carries col-text. */ .sport-panel table.dfl-member-scores-table thead th:nth-child(4) { text-align: center; } .sport-panel table.dfl-member-scores-table thead th:nth-child(n+5) { text-align: right; } .dfl-standings-table--sheet .freeze-col-1, .dfl-standings-table--sheet .freeze-col-2, .dfl-member-scores-table .freeze-col-1, .dfl-member-scores-table .freeze-col-2, .dfl-team-standings-table .freeze-col-1, .dfl-team-standings-table .freeze-col-2, .dfl-my-teams-table .freeze-col-1, .dfl-my-teams-table .freeze-col-2, .freeze-col-solo { background-color: var(--dfl-surface, #fff); } /* Derived from the exact same --dfl-X-rgb + opacity the plain `.standings-row-X td` rule below uses (color-mix'd onto --dfl-surface since these cells need an OPAQUE fill to hide scrolled-away columns underneath, unlike the translucent rgba() the rest of the row can use directly) — a single source of truth so these two columns can never drift out of sync with the rest of the row again. They previously used separate hand-picked --dfl-X-bg hex constants that were supposed to approximate this same blend but went stale for emerald/ruby, producing a visibly different tint in the frozen columns vs. the rest of the row. */ .standings-row-gold .freeze-col-1, .standings-row-gold .freeze-col-2 { background-color: color-mix(in srgb, rgb(var(--dfl-gold-rgb, 255, 215, 0)) 20%, var(--dfl-surface, #fff)); } .standings-row-silver .freeze-col-1, .standings-row-silver .freeze-col-2 { background-color: color-mix(in srgb, rgb(var(--dfl-silver-rgb, 192, 192, 192)) 24%, var(--dfl-surface, #fff)); } .standings-row-bronze .freeze-col-1, .standings-row-bronze .freeze-col-2 { background-color: color-mix(in srgb, rgb(var(--dfl-bronze-rgb, 205, 127, 50)) 20%, var(--dfl-surface, #fff)); } .standings-row-emerald .freeze-col-1, .standings-row-emerald .freeze-col-2 { background-color: color-mix(in srgb, rgb(var(--dfl-emerald-rgb, 46, 139, 87)) 20%, var(--dfl-surface, #fff)); } .standings-row-ruby .freeze-col-1, .standings-row-ruby .freeze-col-2 { background-color: color-mix(in srgb, rgb(var(--dfl-ruby-rgb, 244, 114, 137)) 20%, var(--dfl-surface, #fff)); } /* Override .sport-panel table.dfl-table td.team-name-cell's display:flex (same fix as table.dfl-draft-pool-table's td.team-name-cell below) — a with display:flex stops being a table-cell, so it drops out of vertical-align:middle with its Rk/Logo/Owner row-siblings and the whole row looks shifted. Flex moves to this inner wrapper div instead; see the scoreboard-team-flex comment for the original diagnosis of this exact symptom. Selector must match that rule's specificity (.sport-panel + table.dfl-table + td.team-name-cell) or the override silently loses the cascade. */ .sport-panel table.dfl-table.dfl-team-standings-table td.team-name-cell { display: table-cell; vertical-align: middle; } .dfl-team-standings-table .team-name-inner { display: flex; align-items: center; gap: 0.45rem; } /* Fixed brand-blue gradient in both themes (same reasoning as .dfl-header's masthead gradient in MainLayout.razor.css) — tokenizing the stops to --dfl-brand/--dfl-brand-dark made this wash out to a pale, low-contrast blue in dark mode, since those tokens brighten for their more common role as readable text/accent color on a dark page. Only the on-top text color is themed (and it's a no-op: --dfl-on-brand is constant white). */ .dfl-standings-hero, .dfl-standings-hero__group { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1rem; padding: 1.25rem 1.5rem; border-radius: 12px; background: linear-gradient(135deg, #0f3d6b 0%, #1a5490 45%, #2563eb 100%); color: var(--dfl-on-brand, #fff); box-shadow: 0 8px 24px rgba(15, 61, 107, 0.25); } /* Home's hero (Home.razor) nests the blue bar in .dfl-standings-hero__group and adds the .dfl-sport-leaders strip as a second child of .dfl-standings-hero--home. Below 1440px this outer wrapper collapses (display:contents) so the bar and the strip render as independent siblings — byte-identical to the layout before this nesting existed. color:inherit stops the strip inheriting the bar's white text through the collapsed wrapper. The override that pulls the strip *into* the bar is the @media (min-width: 1440px) block further down. */ .dfl-standings-hero--home { display: contents; color: inherit; } /* Home only — tighter top/bottom so the sport-card row isn't floating on a thick blue margin. Applies to the >=1440px bar (--home) and the <1440px bar (__group). Sits before the 720px block so the phone padding still wins there. MyTeams' bare .dfl-standings-hero keeps the base padding. */ .dfl-standings-hero--home, .dfl-standings-hero__group { padding-top: 0.625rem; padding-bottom: 0.625rem; } .dfl-standings-hero__text { display: flex; align-items: center; gap: 1.25rem; } .dfl-standings-hero__logo { display: block; flex-shrink: 0; height: 8rem; width: auto; object-fit: contain; } /* 1900px matches the header nav's hamburger breakpoint (MainLayout.razor.css / HeaderNavPanel.razor.css) — hide the hero logo once the site is in mobile-nav mode so the hero doesn't dominate the viewport on narrow screens. */ @media (max-width: 1900px) { .dfl-standings-hero__logo { display: none; } } .dfl-standings-hero__copy { display: flex; flex-direction: column; justify-content: center; } .dfl-standings-hero__eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; } .dfl-standings-hero__title { margin: 0.2rem 0 0; font-size: 1.85rem; color: var(--dfl-on-brand, #fff); } .dfl-standings-hero__phase { margin: 0.35rem 0 0; opacity: 0.9; font-size: 0.9rem; } .dfl-podium { display: flex; align-items: flex-end; gap: 0.6rem; } .dfl-podium__slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 5.25rem; } /* The pedestal is now the tiered colored riser that contains the info inside the color */ .dfl-podium__pedestal { width: 100%; border-radius: 10px 10px 4px 4px; backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* data lives near the top of the colored riser */ padding: 0.4rem 0.3rem 0.3rem; gap: 0.12rem; text-align: center; box-sizing: border-box; } /* Tiered heights: 1st tallest/highest (gold), 2nd medium (silver), 3rd shortest/lowest (bronze). Content sits inside the colored areas (at the top). Gold and silver have extra riser height below the labels so they visibly rise higher than bronze (bronze is kept snug to fit its content without shrinking further). */ .dfl-podium__slot--1 .dfl-podium__pedestal { min-height: 10rem; background: rgba(var(--dfl-gold-rgb, 255, 215, 0), 0.52); box-shadow: inset 0 0 0 1px rgba(var(--dfl-gold-rgb, 255, 215, 0), 0.55); } .dfl-podium__slot--2 .dfl-podium__pedestal { min-height: 9rem; background: rgba(var(--dfl-silver-rgb, 192, 192, 192), 0.50); box-shadow: inset 0 0 0 1px rgba(var(--dfl-silver-rgb, 192, 192, 192), 0.55); } .dfl-podium__slot--3 .dfl-podium__pedestal { min-height: 8rem; background: rgba(var(--dfl-bronze-rgb, 205, 127, 50), 0.50); box-shadow: inset 0 0 0 1px rgba(var(--dfl-bronze-rgb, 205, 127, 50), 0.55); } .dfl-podium__medal { font-size: 1.05rem; font-weight: 900; line-height: 1; margin-bottom: 0.1rem; } .dfl-podium__name { font-size: 0.68rem; font-weight: 700; text-align: center; max-width: 5.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.05; } .dfl-podium__score { font-size: 1.0rem; font-weight: 800; line-height: 1; } .dfl-podium__delta { font-size: 0.68rem; font-weight: 700; line-height: 1; } /* True-phone breakpoint (matches .summary-hero__title's own 720px cutoff). The desktop podium's tiered risers (up to 10rem tall) are the whole space problem, not the layout — so below 720px this keeps the same stacked "text row, podium wrapped below" shape and 3-up row/DOM order as desktop, and just collapses every riser to one small flat height instead of restructuring into stacked rows (a stacked-rows-within-the-podium attempt read worse than the plain tall version — flattening each riser in place is the safer, smaller change). Rank tint backgrounds (.dfl-podium__slot--1/2/3 .dfl-podium__pedestal) are untouched so color still signals place without height doing it. Only .dfl-standings-hero's own vertical padding/gap is trimmed beyond that — text and podium chip sizes stay exactly as flattened above; the container's padding is the actual source of extra banner height, not the content inside it. */ @media (max-width: 720px) { .dfl-standings-hero, .dfl-standings-hero__group { padding: 0.65rem 0.9rem; gap: 0.4rem; } .dfl-standings-hero__title { font-size: 1.3rem; } .dfl-podium { gap: 0.35rem; } .dfl-podium__slot { min-width: 0; flex: 1 1 0; } .dfl-podium__pedestal { padding: 0.5rem 0.3rem 0.55rem; gap: 0.05rem; border-radius: 8px; } /* The tiered min-height (10rem/9rem/8rem) is set on these higher-specificity .dfl-podium__slot--N .dfl-podium__pedestal selectors (2 classes), not on the bare .dfl-podium__pedestal rule above (1 class) — a min-height: 0 on the bare rule loses the cascade to these regardless of source order, so it must be overridden here directly. */ .dfl-podium__slot--1 .dfl-podium__pedestal, .dfl-podium__slot--2 .dfl-podium__pedestal, .dfl-podium__slot--3 .dfl-podium__pedestal { min-height: 0; } .dfl-podium__medal { font-size: 0.72rem; margin-bottom: 0; } .dfl-podium__pedestal .member-badge__avatar, .dfl-podium__pedestal .member-badge__photo { width: 24px !important; height: 24px !important; font-size: 0.55rem !important; } .dfl-podium__name { font-size: 0.58rem; max-width: 100%; } .dfl-podium__score { font-size: 0.78rem; } .dfl-podium__delta { font-size: 0.56rem; } } /* Home hero, 1440px and up. --home stops being display:contents and becomes the blue bar itself; .dfl-standings-hero__group collapses, so the logo/text and the podium become direct flex items alongside the .dfl-sport-leaders row. Order is text | cards | podium. The cards keep the base .dfl-sport-leaders flex row (only order/grow/margin/text-color differ from the standalone strip) and are pinned to a non-shrinking 6rem here. Below 1440px this block is inert and the strip renders below the bar. */ @media (min-width: 1440px) { .dfl-standings-hero--home { display: flex; flex-wrap: nowrap; align-items: center; gap: 1.5rem; color: var(--dfl-on-brand, #fff); } .dfl-standings-hero--home > .dfl-standings-hero__group { display: contents; } .dfl-standings-hero--home > .dfl-sport-leaders { order: 1; flex: 1 1 auto; min-width: 0; margin: 0; /* undo the bar's white text so the MemberBadge name (which only sets font-weight) reads on the light cards; card elements with their own color are unaffected */ color: var(--dfl-text, #16202e); } /* fixed 6rem, no shrink (the base card is 6rem but shrinkable) */ .dfl-standings-hero--home > .dfl-sport-leaders .dfl-sport-leader-card { flex: 0 0 6rem; } .dfl-standings-hero--home .dfl-podium { order: 2; } } .dfl-standings-card__header { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.75rem; } .dfl-standings-card__header h2 { margin: 0; } .dfl-sheet-tag { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--dfl-surface-alt, #e8f4f8); color: var(--dfl-brand-dark, #0f3d6b); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .dfl-sheet-tag--live { background: var(--dfl-warning-bg, #fef3c7); color: var(--dfl-warning-text, #92400e); animation: dfl-live-pulse 2s ease-in-out infinite; } /* Pulse without the amber "Live" color swap - for tags that are live-refreshed data but keep their own color scheme (e.g. Home.razor's "Current Score" pill). */ .dfl-sheet-tag--pulse { animation: dfl-live-pulse 2s ease-in-out infinite; } @keyframes dfl-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } .dfl-standings-card--proj { border-top: 4px solid var(--dfl-brand, #1a5490); } .dfl-standings-table--sheet .rank-cell { font-weight: 800; color: var(--dfl-brand-dark, #0f3d6b); } .dfl-standings-table--sheet th, .dfl-standings-table--sheet td { padding: 0.28rem 0.45rem; line-height: 1.2; vertical-align: middle; } /* Make data rows in overall standings match the compact sizing and row height used on individual sport pages (e.g. MLB standings inside .sport-panel + dfl-table-compact). This keeps text the same size (0.82rem from compact) and tight row height. */ .dfl-standings-table--sheet tbody td { padding: 0.28rem 0.45rem; line-height: 1.2; vertical-align: middle; font-size: 0.82rem; } .dfl-standings-table--sheet td:has(.member-badge) { line-height: normal; } .dfl-standings-table td.sport-col, .dfl-standings-table th.sport-col { background: color-mix(in srgb, var(--sc-bg, transparent) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); } .dfl-standings-table tr.subhead th.sport-col { background: color-mix(in srgb, var(--sc-bg, var(--dfl-surface-hover, #f8fafc)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sc-fg, var(--dfl-brand-dark, #0f3d6b))); } .standings-row-gold td { background: rgba(var(--dfl-gold-rgb, 255, 215, 0), 0.2); } .standings-row-gold td.sport-col { background: linear-gradient(rgba(var(--dfl-gold-rgb, 255, 215, 0), 0.3), rgba(var(--dfl-gold-rgb, 255, 215, 0), 0.3)), color-mix(in srgb, var(--sc-bg, white) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); } .standings-row-silver td { background: rgba(var(--dfl-silver-rgb, 192, 192, 192), 0.24); } .standings-row-silver td.sport-col { background: linear-gradient(rgba(var(--dfl-silver-rgb, 192, 192, 192), 0.35), rgba(var(--dfl-silver-rgb, 192, 192, 192), 0.35)), color-mix(in srgb, var(--sc-bg, white) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); } .standings-row-bronze td { background: rgba(var(--dfl-bronze-rgb, 205, 127, 50), 0.2); } .standings-row-bronze td.sport-col { background: linear-gradient(rgba(var(--dfl-bronze-rgb, 205, 127, 50), 0.3), rgba(var(--dfl-bronze-rgb, 205, 127, 50), 0.3)), color-mix(in srgb, var(--sc-bg, white) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); } .standings-row-emerald td { background: rgba(var(--dfl-emerald-rgb, 46, 139, 87), 0.2); } .standings-row-emerald td.sport-col { background: linear-gradient(rgba(var(--dfl-emerald-rgb, 46, 139, 87), 0.3), rgba(var(--dfl-emerald-rgb, 46, 139, 87), 0.3)), color-mix(in srgb, var(--sc-bg, white) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); } .standings-row-ruby td { background: rgba(var(--dfl-ruby-rgb, 244, 114, 137), 0.2); } .standings-row-ruby td.sport-col { background: linear-gradient(rgba(var(--dfl-ruby-rgb, 244, 114, 137), 0.3), rgba(var(--dfl-ruby-rgb, 244, 114, 137), 0.3)), color-mix(in srgb, var(--sc-bg, white) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); } .standings-total-row td { border-top: 2px solid var(--dfl-border-strong, #cbd5e1); background: var(--dfl-surface-hover, #f8fafc); font-size: 0.8rem; } .standings-total-label { font-weight: 700; text-align: left; } .sport-score-hot { font-weight: 700; color: var(--dfl-brand-dark, #0f3d6b); } .money-cell { font-weight: 700; color: var(--dfl-success-strong, #14532d); } .payout-balance--ok td { color: var(--dfl-success-strong, #14532d); } .payout-balance--warn td { color: var(--dfl-danger, #b91c1c); } .dfl-standings-footnote { margin-top: 0.75rem; } .dfl-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem 1rem; margin-bottom: 1rem; } .dfl-form-grid--single { grid-template-columns: minmax(12rem, 20rem); } .dfl-profile-avatar-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .dfl-profile-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .dfl-profile-nav a { color: var(--dfl-brand, #1a5490); text-decoration: none; font-weight: 600; font-size: 0.9rem; } .dfl-profile-nav a.active { color: var(--dfl-brand-dark, #0f3d6b); text-decoration: underline; } .dfl-form-grid label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; color: var(--dfl-brand-dark, #0f3d6b); } .dfl-input { padding: 0.4rem 0.55rem; border: 1px solid var(--dfl-border, #d1d9e0); border-radius: 4px; font-size: 0.9rem; } .dfl-input--narrow { max-width: 5.5rem; } .dfl-checkbox-label { flex-direction: row !important; align-items: center; gap: 0.45rem !important; } .dfl-file-input { font-size: 0.78rem; max-width: 10rem; } .member-inactive-row td { opacity: 0.55; } .commissioner-member-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; } /* The "View As" impersonation control is a real
(needs an HTTP POST to swap the auth cookie) — let its button sit in the flex row like the sibling