needs to keep
.hl-avatar-placeholder's own `display: inline-flex` for its initials
to stay centered; overriding to `block` here would break that. */
width: 100%;
height: 100%;
border-radius: inherit;
font-size: 44px;
}
.lh-masthead-body {
position: relative;
}
.lh-masthead-eyebrow {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 6px;
margin: 0 0 4px;
}
/* Share button (core/_share_button.html) - ghost icon buttons (no filled
pill behind them) so they read as quiet corner controls against the
masthead's own gradient card rather than a second "tab" competing with
it. Lives in .lh-masthead-top-row's normal flex flow (right-aligned via
that row's justify-content), not absolutely positioned over the
eyebrow/title - that row sits above .lh-masthead-row, so this never
competes for width with the eyebrow or the title on any line, at any
viewport. */
/* User request: the link-share and image-share actions (core/
_share_button.html renders them as two adjacent .hl-share wrappers
inside one .hl-share-group) used to sit as two visually distinct
circular buttons with a bold divider between them - now merged into one
seamless transparent pill (single outer border, not two individually-
bordered buttons touching each other). Each icon is still its own
click target/popover (that logic lives in the shared partial and isn't
touched here). A faint hairline divider (below) marks the midpoint
without breaking the merged-pill look.
Bug fix: this originally also had `overflow: hidden` on this container
to keep each button's hover-fill from squaring off past the pill's
rounded corners - but .hl-share-popover (core/_share_button.html) is
`position: absolute` and a DESCENDANT of this element, so overflow:
hidden was silently clipping the popover to this ~70px pill's own tiny
box any time a visitor's browser fell back to it (no navigator.share
support, or a canShare({files}) miss) - the popover computed a real
size/position but painted nowhere, reading as "the button does
nothing". Fixed by rounding the first/last button's own OUTER corners
to match the pill instead of clipping the whole container. */
.lh-masthead-actions {
display: inline-flex;
align-items: center;
gap: 0;
background: transparent;
border: 1px solid rgba(245, 241, 236, 0.4);
border-radius: 999px;
padding: 3px;
}
.lh-masthead-actions .hl-share:first-child .hl-share-btn {
border-radius: 999px 0 0 999px;
}
.lh-masthead-actions .hl-share:last-child .hl-share-btn {
border-radius: 0 999px 999px 0;
}
.lh-masthead-actions .hl-share-group {
gap: 0;
}
/* Hairline separator between the two actions - sits exactly on the
boundary between the two adjacent .hl-share wrappers (gap: 0 above, so
`right: 0` on the first one lands right at that seam). Faint on
purpose (0.25 alpha vs. the outer pill border's 0.4) so it reads as a
quiet mid-point mark, not a second border splitting the pill in two. */
.lh-masthead-actions .hl-share:first-child::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 1px;
height: 16px;
background: rgba(245, 241, 236, 0.25);
}
/* The two buttons/popovers inside are core/_share_button.html's own
shared markup (used across every public page) - restyled here, scoped
under `.lh-masthead-actions`, so only this instance loses its own
circular dark background/border (each button is transparent with no
border of its own now - the outer container above carries the one
shared border/pill shape) in favor of sitting as bare icons on the
masthead's own background. Deliberately no `transform` on hover
(Phase 24 fix: a `scale()`/`translateY()` hover lift here was found to
break the share popover on narrow screens - static/css/share.css's own
@media (max-width: 560px) rule makes .hl-share-popover
`position: fixed` specifically so it centers on the VIEWPORT, but per
spec ANY ancestor with a non-none `transform` becomes the containing
block for a `position: fixed` descendant INSTEAD of the viewport -
since a mouse user has to be hovering this button to click it, that
transform was reliably active at the exact moment the popover opened,
centering it against this small icon instead of the screen. Background/
color transitions carry no such risk - never add `transform` back to
this element or its ancestors without checking this). */
.lh-masthead-actions .hl-share-btn {
background: transparent;
border: none;
border-radius: 0;
color: var(--text);
padding: 7px 9px;
/* A `drop-shadow` (not `box-shadow` - this needs to hug the icon glyph
itself, not the button's square/circular box) so the icon stays
readable against BOTH ends of the masthead's gradient - the bright
orange corner and the near-black corner - without needing an actual
background fill behind it. */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
transition: background 0.15s ease, color 0.15s ease;
}
.lh-masthead-actions .hl-share-btn:hover {
background: rgba(245, 241, 236, 0.14);
color: var(--primary);
}
.lh-masthead-actions .hl-share-btn:active {
transform: scale(0.92);
}
.lh-masthead-actions .hl-share-btn svg {
width: 16px;
height: 16px;
}
@media (max-width: 560px) {
.lh-masthead-actions .hl-share-btn {
padding: 6px 8px;
}
.lh-masthead-actions .hl-share-btn svg {
width: 14px;
height: 14px;
}
}
/* Phase 19: Seasons Hosted/Awards Given folded into the eyebrow line as
quiet metadata (see league_home.html's own comment for why - "make the
logo much more visible" meant removing the Phase 18 stat panel, not
just re-skinning it) - muted, not the eyebrow's own bold brand-orange,
so "OFFICIAL LEAGUE PAGE" still reads as the one thing this line is
actually saying and these are a quieter aside. */
.lh-masthead-eyebrow-fact {
color: var(--text-muted);
font-weight: 600;
}
.lh-masthead-eyebrow-dot {
margin-right: 6px;
opacity: 0.6;
}
.lh-masthead-name {
margin: 0 0 var(--space-2);
font-size: clamp(26px, 4vw, 38px);
}
.lh-masthead-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.lh-masthead-pill {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
background: var(--bg-raised);
border: 1px solid var(--border-strong);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
color: var(--text-secondary);
white-space: nowrap;
}
.lh-masthead-pill strong {
color: var(--text);
font-weight: 700;
margin-right: 3px;
}
.lh-masthead-pill-icon {
margin-right: 5px;
opacity: 0.75;
flex-shrink: 0;
}
.lh-masthead-desc {
position: relative;
margin: var(--space-4) 0 0;
padding-top: var(--space-4);
border-top: 1px solid var(--border);
max-width: 720px;
color: var(--text-secondary);
font-size: 15px;
line-height: 1.6;
}
/* ─── Season section (Phase 22: merged into the masthead) ──────────────
Was its own separate card (.lh-hero - a full second background/border/
border-radius/margin, "Season hero" below is its own history) sitting
under the masthead; user asked to combine the two into one component.
Now a section INSIDE .lh-masthead, closed off only by a hairline
divider (padding-top + border-top), same lightweight pattern
.lh-masthead-desc already used for the description above it - one
card, one border, reads as a single continuous "this league, right
now" block instead of two stacked panels. The divider itself "draws
in" left-to-right (::before, animated width) once the whole card
reveals, and this section's own content fades in a beat after the
identity area above it - see the `html.lh-anim-ready` rules near the
bottom of this file for both. */
.lh-masthead-season {
position: relative;
margin-top: var(--space-4);
padding-top: var(--space-4);
}
.lh-masthead-season::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 100%;
background: var(--border);
}
/* ─── Season hero (Phase 16 compact rewrite) - history kept for context
─────────────────────────────────────────────────────────────────────
Was a taller card with a giant faint ball-motif watermark, a separate
date sub-line, and a pulsating "LIVE" treatment on its own row - user
feedback asked for compact + the LIVE label gone + more useful info in
its place. Now two tight rows: identity+picker, then a single
dot-separated facts line (dates, team count, current leader) - about
half the old vertical footprint for strictly more information. Phase
22 above then dropped the card shell entirely in favor of
.lh-masthead-season's divider. */
.lh-hero-top {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
}
.lh-hero-identity {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
min-width: 0;
}
.lh-hero-title {
margin: 0;
}
/* ─── Season picker (Phase 13) ────────────────────────────────────────
Pinned to the end of .lh-hero-top (same margin-left: auto push
.lh-masthead-actions above uses) so it reads as a control on the
season heading, not another fact about it. */
.lh-season-picker {
margin-left: auto;
}
.lh-season-select {
appearance: none;
cursor: pointer;
background: var(--bg-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C7266' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
border: 1px solid var(--border-strong);
border-radius: 999px;
color: var(--text);
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
padding: 8px 32px 8px 14px;
max-width: 220px;
}
.lh-season-select:hover {
border-color: var(--primary);
}
.lh-hero-facts {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text-secondary);
}
.lh-hero-fact {
color: var(--text-secondary);
text-decoration: none;
}
.lh-hero-dot {
color: var(--text-muted);
opacity: 0.6;
}
.lh-hero-leader {
color: var(--text-secondary);
transition: color 0.15s ease;
}
.lh-hero-leader strong {
color: var(--text);
font-weight: 700;
}
.lh-hero-leader:hover {
color: var(--primary);
}
.lh-hero-leader:hover strong {
color: var(--primary);
}
/* Below ~480px, "2026 SUMMER LEAGUE" + its status badge rarely both fit
.lh-hero-identity's one line, and the season picker (already
margin-left: auto) was left to wrap wherever flex-wrap happened to
break it - sometimes trailing half off its own line. Force the picker
onto its own guaranteed full-width row instead of leaving that to
chance (Phase 22: the wordmark mark this comment used to also drop
here is gone from the template entirely now - see
.lh-masthead-season's own comment for why). */
@media (max-width: 480px) {
.lh-season-picker {
flex-basis: 100%;
margin-left: 0;
}
.lh-season-select {
width: 100%;
max-width: none;
}
.lh-hero-facts {
font-size: 11.5px;
}
}
/* ─── League at a Glance stats (Phase 19 redesign) ─────────────────────
User feedback, three rounds now: "looks AI generated." Phase 17
already moved from six separate bordered cards to one hairline-divided
panel, but left-aligned icon-then-number-then-label stacks read as a
left-justified form, not a stats display. Centered per the user's own
request, plus restrained "actually designed" details instead of the
generic filled-icon-chip look. Phase 20 (user feedback: "having a
circle border is not good") dropped the outlined-ring icon container
from the Phase 19 pass too - the icon is bare now (just colored,
slightly larger to still carry presence without a container), with a
gentle scale-up on hover for the linked cells so it doesn't go
completely inert. The number's short accent underline is the one
remaining per-stat accent mark, doing double duty as what used to be
the icon ring's job too. */
.lh-glance-panel {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
/* Faint top-left highlight - the one bit of depth this panel gets,
instead of the old per-tile radial glows. Subtle enough to read as
"this card catches light" rather than as its own visible shape. */
background-image: radial-gradient(480px 160px at 0% 0%, rgba(245, 241, 236, 0.035), transparent 65%);
overflow: hidden;
}
.lh-glance-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: var(--space-4) var(--space-3);
text-align: center;
text-decoration: none;
color: inherit;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
transition: background 0.15s ease;
}
/* Last column of each row (every 3rd cell) and the final row (the last
3 cells, since 6 stats / 3 columns = exactly 2 rows) drop their
trailing dividers - a hairline grid, not a hairline-bordered box
floating inside a second outer border. */
.lh-glance-cell:nth-child(3n) {
border-right: none;
}
.lh-glance-cell:nth-last-child(-n+3) {
border-bottom: none;
}
.lh-glance-cell-link:hover {
background: var(--bg-raised);
}
.lh-glance-cell-icon {
display: inline-flex;
color: var(--tile-accent, var(--text-muted));
margin-bottom: 4px;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lh-glance-cell-link:hover .lh-glance-cell-icon {
transform: scale(1.15) translateY(-1px);
}
.lh-glance-cell-value {
position: relative;
display: inline-block;
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
color: var(--text);
line-height: 1.15;
padding-bottom: 8px;
}
/* The short accent underline - centered, thin, half-opacity so it reads
as a mark under the number rather than a bar competing with it. Widens
slightly and brightens on hover (linked cells only) as the one small
piece of interactive feedback tying the icon's own hover animation
together with the number it sits under. */
.lh-glance-cell-value::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 2px;
border-radius: 999px;
background: var(--tile-accent, var(--primary));
opacity: 0.55;
transition: width 0.2s ease, opacity 0.2s ease;
}
.lh-glance-cell-link:hover .lh-glance-cell-value::after {
width: 28px;
opacity: 0.85;
}
/* ─── Count-up "landing" flourish ───────────────────────────────────────
static/js/league-home.js already counts every [data-lh-countup]
numeral up from 0 on reveal (League at a Glance, Top Performers, the
season facts' team count) - .lh-count-settle (base rule further down,
near .lh-leader-row) adds a small settle pop right as each one lands
on its real value instead of just stopping cold, the class added by
that same script at the exact moment counting finishes (not a CSS
animation-delay guess - cells count up on independently staggered
starts, so there's no one fixed delay that would land on "done" for
all of them). Glance cells specifically also have an accent underline
to brighten in sync, tying the two together as one small moment
instead of two coincidentally timed ones. */
.lh-glance-cell-value.lh-count-settle::after {
animation: lh-count-settle-underline 0.5s ease;
}
@keyframes lh-count-settle-pop {
0% { transform: scale(1); }
45% { transform: scale(1.16); }
100% { transform: scale(1); }
}
@keyframes lh-count-settle-underline {
0%, 100% { width: 18px; opacity: 0.55; }
45% { width: 30px; opacity: 1; }
}
.lh-glance-cell-label {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Was a 6-color rotation (violet/teal/orange/gold/alert/lime) assigned
by nth-child position across six unrelated metrics (Teams/Active
Players/Games Played/Upcoming Games/Avg Pts/Highest Score) - no
category linked those metrics to a particular color, so it read as
decoration rather than meaning. --tile-accent already falls back to
var(--primary) (see the rule using it below), so removing the
per-cell overrides here is enough to make every tile the one brand
accent instead of six. */
@media (max-width: 640px) {
.lh-glance-panel {
grid-template-columns: repeat(2, 1fr);
}
/* Re-open the 3rd/6th-cell right border the 3-column rule above
closed, then re-close it for the actual last column of a 2-column
grid (every even cell) - and the last ROW is now the last 2 cells,
not 3. */
.lh-glance-cell:nth-child(3n) {
border-right: 1px solid var(--border);
}
.lh-glance-cell:nth-child(2n) {
border-right: none;
}
.lh-glance-cell:nth-last-child(-n+3) {
border-bottom: 1px solid var(--border);
}
.lh-glance-cell:nth-last-child(-n+2) {
border-bottom: none;
}
}
/* ─── Season progress bar ─────────────────────────────────────────── */
.lh-progress {
margin-top: var(--space-4);
}
.lh-progress-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-2);
font-size: 12px;
}
.lh-progress-head span:first-child {
color: var(--text-secondary);
font-weight: 600;
}
.lh-progress-count {
font-family: var(--font-mono);
color: var(--text-muted);
white-space: nowrap;
}
.lh-progress-track {
height: 6px;
border-radius: 999px;
background: var(--bg-card);
border: 1px solid var(--border);
overflow: hidden;
}
.lh-progress-fill {
height: 100%;
min-width: 2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--orange-deep), var(--primary));
transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Real end_date/status context (see league_home.html's comment above this
block's markup for why this is date-based rather than the Playbook
mock's fabricated Playoffs/Finals ticks) - same muted/mono treatment as
.lh-progress-count, just on its own line under the track instead of
competing with the games-played count for the head row's width. */
.lh-progress-eta {
display: block;
margin-top: var(--space-2);
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
/* ─── Standings snapshot table (Phase 16 rewrite) ──────────────────────
User request: "reverting to a table with the same layout in the
landing page of the system" - matches templates/core/landing.html's
hero scoreboard mockup (.landing-standings/.landing-scoreboard,
static/css/landing.css) structurally: rank chip + team, W, L, PCT
(its own cell doubles as a win% fill-bar via the `--pct` custom
property set inline per row), Streak (colored, arrow-prefixed, cold
below .500 this game). This page's own `.lh-standings-*` classes, not
a reuse of `.landing-*` (those are redeclared/scoped under
`.landing-page`, and a real team has a real logo/color to show - not
the landing mockup's flat fake "team-dot" swatch) - same read, this
page's own component. */
/* Phase 20 compact/polish pass (user request: "compact", "headers text
align center", "professional and readable"). The four numeric
columns' headers AND body cells are centered (both, so they actually
line up with each other - was right-aligned body under a left-aligned
header before), padding/row height trimmed down throughout for a
denser feel. Phase 26 (user request: "text align to center it" for
ALL headers, "fit the table 100% in the web view") reverted Phase 20's
own Team-header-stays-left-aligned exception - see that rule's own
history below - and dropped the 480px cap in favor of the table
filling its section's actual width. */
/* ─── Standings leader row emphasis ─────────────────────────────────
User request: give Standings a bigger visual anchor than the rest of
the page - every other section here already converged on the same
bordered-panel/hairline-rows shape, so a plain 4th copy of that
treatment wouldn't have stood out. First attempt was a separate
"leader spotlight" card above the table, but that just repeated the
exact same name/record/PCT/streak the table's own row 1 shows two
lines down - redundant, not "bigger". Replaced with baking the
emphasis directly INTO row 1 (`tr.lh-standings-leader`, already the
rank===1 row): a noticeably bigger crest, bigger name, and a
"League Leader" tag - one representation of the leader, not two. */
.lh-standings-name-col {
display: flex;
flex: 1;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.lh-standings-leader-tag {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--primary);
}
.lh-standings-table tr.lh-standings-leader td {
padding-top: 12px;
padding-bottom: 12px;
}
.lh-standings-table tr.lh-standings-leader .hl-avatar,
.lh-standings-table tr.lh-standings-leader .hl-avatar-placeholder {
width: 44px;
height: 44px;
border-radius: 10px;
}
/* User request: one consistent color for every no-logo team placeholder
in this table, not base.css's `[data-accent]` teal/violet/lime/gold/
coral rotation (apps.core.templatetags.badges.accent_rotate) and not a
team's own `primary_color` override (both still apply everywhere else -
team_detail/game_detail/season_calendar/box score/full standings all
keep the per-team look; templates/leagues/league_home.html's markup for
this table drops both the `data-accent` attribute and the
`primary_color` inline style so nothing here can win over this rule by
source order or specificity).
Follow-up user request: dark/near-black instead of the league's
--primary tint - deliberately built from the fixed neutral tokens
(--bg/--border-strong/--text), never --primary/--primary-rgb, so it
reads as a plain dark chip that pairs with any theme_palette rather
than needing to individually look good against all 10 - the same
reasoning theme.py's own docstring gives for why backgrounds/borders/
text stay fixed while only 4 tokens vary per league. */
.lh-standings-table .hl-avatar-placeholder {
background: var(--bg);
color: var(--text);
border-color: var(--border-strong);
}
.lh-standings-table tr.lh-standings-leader .lh-standings-name {
font-size: 15px;
}
.lh-standings-table {
width: 100%;
/* Fixed layout + explicit (px, not %) widths on the four short numeric
columns below, so the Team column (left with no explicit width)
always absorbs whatever's left - without this, table auto-layout
sizes every column to its own content's natural width, and on a
narrow phone that squeezed Team down below "Demo Ballers"'s own
width and wrapped it to two lines mid-word instead of leaving it the
room it needs (or ellipsis-truncating a genuinely long team name,
see .lh-standings-name below). Percentages here (tried first)
compounded badly with each cell's own padding - box-sizing: border-
box below makes a column's declared width its full on-screen
footprint, padding included, so this math stays true at any table
width instead of silently eating into Team's share. */
table-layout: fixed;
border-collapse: collapse;
font-size: 12.5px;
}
.lh-standings-table th,
.lh-standings-table td {
box-sizing: border-box;
}
.lh-standings-table th:nth-child(2),
.lh-standings-table td:nth-child(2) {
width: 46px;
}
.lh-standings-table th:nth-child(3),
.lh-standings-table td:nth-child(3) {
width: 46px;
}
/* DIFF (Phase 27) - "+17"/"-17", occasionally 3 digits, still short
enough for the same rough width as PCT/W-L. */
.lh-standings-table th:nth-child(4),
.lh-standings-table td:nth-child(4) {
width: 46px;
}
.lh-standings-table th:last-child,
.lh-standings-table td:last-child {
width: 58px;
}
/* Phase 25/27: PCT and DIFF are the two columns that give way first on a
narrow phone - PCT is pure arithmetic on W-L (not new information),
and while DIFF IS new information, at this width it's still the more
dispensable of the four numeric columns compared to the record (W-L)
and the "hot/cold right now" read (Streak). Team gets the freed-up
width automatically either way (table-layout: fixed drops a
`display: none` column from its own track calculation entirely, it
doesn't just go blank and waste the space). Full standings (linked
above) always has both. */
@media (max-width: 400px) {
.lh-standings-pct-col,
.lh-standings-diff-col {
display: none;
}
/* A few more px reclaimed for Team specifically - the rank chip/avatar/
name gap and the table's own left inset were tuned for the roomier
5-and-6-column versions this table used to be. */
.lh-standings-team {
gap: 6px;
}
.lh-standings-table th:first-child,
.lh-standings-table td:first-child {
padding-left: 6px;
}
}
/* Every header centered (Team included - Phase 26, see this block's own
history above) with real breathing room on all four sides, not just
bottom - `10px 12px 14px` reads as an actual header ROW now rather
than text crammed against the divider it sits above. Team's body data
(name + logo) stays left-aligned underneath its own centered label -
normal for a compact table where the header names the column and the
data reads left-to-right beneath it, same convention this table's own
W-L/PCT/Streak columns already used before this change (centered
header, centered data - Team is centered header, left data, which is
just as common a pairing). */
.lh-standings-table th {
text-align: center;
font-weight: 600;
color: var(--text-muted);
font-size: 10.5px;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 10px 12px 14px;
border-bottom: 1px solid var(--border);
}
.lh-standings-table td {
padding: 8px;
border-bottom: 1px solid var(--border);
color: var(--text);
}
.lh-standings-table th.num,
.lh-standings-table td.num {
text-align: center;
padding-left: 4px;
padding-right: 4px;
}
.lh-standings-table tbody tr:last-child td {
border-bottom: none;
}
.lh-standings-table tbody tr {
transition: background 0.15s ease;
}
.lh-standings-table tbody tr:hover {
background: rgba(245, 241, 236, 0.035);
}
.lh-standings-table tr.lh-standings-leader {
background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.1), transparent 65%);
box-shadow: inset 3px 0 0 var(--primary);
}
.lh-standings-table tr.lh-standings-leader:hover {
background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.14), transparent 65%);
}
.lh-standings-team {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
text-decoration: none;
color: inherit;
/* Lets .lh-standings-name's ellipsis actually take effect inside a
table-layout: fixed cell - flex children default to min-width: auto
(their content's natural width), which overrides a descendant's own
overflow/text-overflow entirely until the flex container itself is
told it's allowed to shrink below that. */
min-width: 0;
}
.lh-standings-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lh-standings-table tr.lh-standings-leader .lh-standings-team {
font-weight: 700;
}
.lh-standings-rank {
flex: none;
width: 18px;
height: 18px;
border-radius: 5px;
background: var(--bg-raised);
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 10px;
}
.lh-standings-table tr.lh-standings-leader .lh-standings-rank {
background: var(--primary);
color: var(--on-primary);
}
/* Was a static `background-image` gradient with a hard color-stop at
`--pct` - correct, but a gradient stop position isn't something CSS
transitions can animate, so the fill always just appeared instantly.
Switched to a `::before` sized to `--pct` via `width` (still not
itself animatable) with a `transform: scaleX()` reveal on top (scaling
an already-correctly-sized box between 0 and 1 sidesteps needing the
percentage inside the animated property at all) - same technique
`.lh-progress-fill`/`.lh-standings-pct::before` siblings elsewhere on
this page already use for their own draw-in. `z-index: -1` (not the
default stacking order a plain `position: absolute` child would get)
is load-bearing: this cell's real content is a bare text node with no
wrapping span of its own to lift above the fill via a positive
z-index, and an absolutely-positioned pseudo-element with z-index:auto
paints AFTER a table cell's own in-flow text in stacking order, which
would sit the fill on top of and partly obscure the ".778" text. */
.lh-standings-pct {
position: relative;
overflow: hidden;
}
.lh-standings-pct::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
width: var(--pct, 0%);
background: rgba(var(--primary-rgb), 0.14);
transform: scaleX(0);
transform-origin: left;
transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
html.lh-anim-ready [data-lh-reveal].lh-is-visible .lh-standings-pct::before {
transform: scaleX(1);
}
.lh-standings-streak {
display: inline-flex;
align-items: center;
color: var(--teal);
font-weight: 700;
font-family: var(--font-mono);
}
.lh-standings-streak::before {
content: "\25b2";
font-size: 8px;
margin-right: 3px;
position: relative;
top: -1px;
}
.lh-standings-streak.cold {
color: var(--alert);
}
.lh-standings-streak.cold::before {
content: "\25bc";
}
/* ─── Announcements section-head count badge ─────────────────────────
Lives INSIDE the