:root { --brand-navy: #081D38; --brand-navy-2: #0e2f54; --brand-green: #36EF11; --brand-green-ink: #0b8a00; --brand-white: #ffffff; --card-bg: var(--mud-palette-surface); --card-border: var(--mud-palette-divider); --bracket-line: var(--mud-palette-lines-default); --bracket-gap: 26px; } /* ---------- Dark theme: override MudBlazor palette variables ---------- Driven by the data-theme attribute on , set before paint by the inline script in App.razor. The attribute selector outranks MudBlazor's own :root rules, so these win without any interactive render mode. */ html[data-theme="dark"] { color-scheme: dark; --brand-green-ink: #5ef53e; --card-bg: #11314f; --card-border: rgba(255, 255, 255, .10); --mud-palette-background: #061528; --mud-palette-background-gray: #04101f; --mud-palette-surface: #0C2742; --mud-palette-text-primary: #EAF1FA; --mud-palette-text-secondary: #9FB2C8; --mud-palette-text-disabled: rgba(234, 241, 250, .38); --mud-palette-action-default: #9FB2C8; --mud-palette-action-disabled: rgba(234, 241, 250, .26); --mud-palette-action-disabled-background: rgba(234, 241, 250, .12); --mud-palette-divider: rgba(255, 255, 255, .10); --mud-palette-divider-light: rgba(255, 255, 255, .06); --mud-palette-lines-default: rgba(255, 255, 255, .14); --mud-palette-lines-inputs: rgba(255, 255, 255, .28); --mud-palette-table-lines: rgba(255, 255, 255, .10); --mud-palette-table-striped: rgba(255, 255, 255, .02); --mud-palette-table-hover: rgba(255, 255, 255, .06); /* MudThemeProvider only emits the LIGHT palette in static SSR, so its primary stays navy. Re-point primary to the brand green here (matching BrandTheme.PaletteDark) so every Color.Primary button/chip/icon/link stays readable on dark surfaces instead of rendering navy-on-navy. */ --mud-palette-primary: #36EF11; --mud-palette-primary-text: #081D38; --mud-palette-primary-darken: #2bc40d; --mud-palette-primary-lighten: #66f546; --mud-palette-primary-hover: rgba(54, 239, 17, .10); --mud-palette-primary-rgb: 54, 239, 17; --mud-palette-surface-rgb: 12, 39, 66; } /* Flag placeholder reads as a faint light block on dark surfaces; tone it down. */ html[data-theme="dark"] .team-flag--placeholder { background: repeating-linear-gradient(45deg, #13314e, #13314e 4px, #183a5b 4px, #183a5b 8px); } html, body { margin: 0; font-family: 'Roboto', 'Segoe UI', 'Helvetica', 'Arial', sans-serif; background: var(--mud-palette-background); color: var(--mud-palette-text-primary); } /* Guard against accidental horizontal scroll from full-width content (e.g. the picks selectors). Prefer 'clip' (no scroll-container side effects, so the flag dropdown still spills out vertically); the 'hidden' first value is the fallback for older engines (iOS Safari <16 etc.) that don't support 'clip'. Designated inner scrollers (.standings-scroll etc.) keep their own overflow-x regardless. */ .page-body { overflow-x: hidden; overflow-x: clip; } /* ---------- App bar / brand ---------- */ .brand-appbar { background: linear-gradient(100deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%) !important; border-bottom: 3px solid var(--brand-green); color: var(--brand-white) !important; padding-top: env(safe-area-inset-top); } /* Compensate for the safe-area-inset-top padding added to the header. MudMainContent already accounts for the base appbar height, but not for the additional safe-area padding on devices with notches/Dynamic Island. */ .mud-main-content { margin-top: env(safe-area-inset-top) !important; } /* MudLink applies .mud-*-text with !important; force the brand to stay white on the navy app bar in both themes so the wordmark never goes navy-on-navy. */ .brand-appbar .brand-logo, .brand-appbar .brand-logo:hover, .brand-appbar .brand-logo__text, .brand-appbar .brand-logo__badge { color: var(--brand-white) !important; } .brand-logo { display: inline-flex; align-items: center; gap: .5rem; color: var(--brand-white); } .brand-logo__badge { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--brand-green); background: rgba(8, 29, 56, .6); font-family: 'Outfit', 'Roboto', sans-serif; font-weight: 800; font-size: 1.05rem; line-height: 1; color: var(--brand-white); } .brand-logo__text { font-family: 'Outfit', 'Roboto', sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: .2px; line-height: 1; } .brand-appbar .brand-logo__accent { color: var(--brand-green) !important; font-weight: 700; } .top-nav { gap: .1rem; } .brand-cta { font-weight: 700; box-shadow: 0 6px 16px rgba(54, 239, 17, .35) !important; } .brand-cta:hover { filter: brightness(1.03); } /* ---------- Theme toggle ---------- */ .theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; margin: 0 .15rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--brand-white); cursor: pointer; transition: background .15s ease; } .theme-toggle:hover { background: rgba(255, 255, 255, .18); } .theme-toggle .theme-toggle__sun { display: none; } html[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; } html[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: inline-flex; color: var(--brand-green); } /* ---------- Footer ---------- */ .footer { padding: 1.5rem 0; margin-top: 2rem; border-top: 1px solid var(--mud-palette-divider); background: var(--mud-palette-background); } .footer__inner { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .footer__brand { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; } .footer__logo { height: 28px; width: auto; display: block; } .footer__text { font-size: .82rem; color: var(--mud-palette-text-secondary); } .footer__link { color: var(--brand-green-ink); text-decoration: none; font-weight: 600; } .footer__link:hover { text-decoration: underline; } .footer__fs { display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; } .footer__fs-logo { height: 18px; width: auto; display: inline-block; } /* ---------- Bottom navigation (mobile) ---------- */ .bottom-nav { position: fixed; inset: auto 0 0 0; z-index: 1300; justify-content: space-around; align-items: stretch; background: linear-gradient(100deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%); border-top: 2px solid var(--brand-green); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 18px rgba(0, 0, 0, .25); } .bottom-nav__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: .45rem .1rem; text-decoration: none; color: rgba(255, 255, 255, .72); font-size: .68rem; font-weight: 600; } .bottom-nav__item:hover { color: #fff; } .bottom-nav__item.active { color: var(--brand-green); } .bottom-nav__item.active .mud-icon-root { color: var(--brand-green); } /* Keep page content clear of the fixed bar on small screens. The footer is the last in-flow element (it follows .page-body), so the clearance belongs on it — padding on .page-body would only open a gap above the footer while the footer itself stayed hidden behind the bar. env(safe-area-inset-bottom) covers notched devices where the bar is taller. */ @media (max-width: 959.95px) { .footer { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(1.5rem, 5vw, 3.75rem); background: radial-gradient(circle at 85% -20%, var(--brand-navy-2) 0%, var(--brand-navy) 55%); color: var(--brand-white); box-shadow: 0 24px 60px -28px rgba(8, 29, 56, .7); } .hero__glow { position: absolute; inset: auto -120px -160px auto; width: 360px; height: 360px; background: radial-gradient(circle, rgba(54, 239, 17, .35) 0%, transparent 70%); filter: blur(8px); pointer-events: none; } .hero__content { position: relative; max-width: 640px; } .hero__badge { display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: .85rem; border-radius: 20px; border: 3px solid var(--brand-green); background: rgba(8, 29, 56, .5); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 2.2rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); } .hero__title { font-weight: 800; line-height: 1.05; } .hero__accent { color: var(--brand-green); } .hero__subtitle { color: #c3d2e6; margin: .75rem 0 1.75rem; max-width: 30rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; } .hero__ghost { color: var(--brand-white) !important; border-color: rgba(255, 255, 255, .4) !important; } /* ---------- Kick-off countdown ---------- */ .countdown { margin-top: 2rem; display: flex; flex-direction: column; gap: .6rem; } .countdown__label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-green); } .countdown__units { display: flex; gap: .6rem; flex-wrap: wrap; } .countdown__unit { display: grid; place-items: center; min-width: 4.25rem; padding: .55rem .35rem; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(8, 29, 56, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } .countdown__num { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 5vw, 2.25rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--brand-white); } .countdown__cap { margin-top: .3rem; font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #9fb3cc; } .countdown__match { font-size: .85rem; font-weight: 600; color: #c3d2e6; } /* When countdown.js flags zero, swap the units/match line for a single "live" banner. */ .countdown__live { display: none; font-weight: 700; color: var(--brand-green); } .countdown[data-countdown-done="true"] .countdown__units, .countdown[data-countdown-done="true"] .countdown__match { display: none; } .countdown[data-countdown-done="true"] .countdown__live { display: inline; } /* ---------- Feature cards ---------- */ .feature-card { height: 100%; background: var(--card-bg); border: 1px solid var(--card-border); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(8, 29, 56, .55); border-color: var(--brand-green); } .feature-card__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--accent, var(--brand-green)) 18%, transparent); } .feature-card__icon .mud-icon-root { color: var(--accent, var(--brand-green)); } .feature-card__text { color: var(--mud-palette-text-secondary); min-height: 3rem; } /* ---------- Presented by ---------- */ .presented-by { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; } .presented-by__label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mud-palette-text-secondary); } .presented-by__brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--mud-palette-text-primary); transition: opacity .18s ease; } .presented-by__brand:hover { opacity: .75; } .presented-by__logo { height: 40px; width: auto; } .presented-by__name { font-weight: 600; } /* ---------- Section heading ---------- */ .page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; } /* ---------- Team flag + label ---------- */ .team-label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; min-width: 0; } .team-label__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-label--reverse { flex-direction: row-reverse; } .team-flag { width: 26px; height: 20px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(8, 29, 56, .12); flex: 0 0 auto; } .team-flag--placeholder { display: inline-block; background: repeating-linear-gradient(45deg, #e7edf5, #e7edf5 4px, #f4f7fb 4px, #f4f7fb 8px); } /* ---------- Results score pill ---------- */ .score-pill { display: inline-flex; align-items: center; gap: .15rem; font-family: 'Outfit', sans-serif; font-weight: 800; background: var(--brand-navy); color: var(--brand-white); padding: .15rem .6rem; border-radius: 999px; min-width: 3rem; justify-content: center; } .score-pill__sep { opacity: .55; margin: 0 .1rem; } /* ---------- Infinite scroll (reusable component) ---------- Sentinel container styling. The component lives in Web.Client/Components/Shared and is generic, so this is a shared rule (not Fixtures-specific) — keep it here even if the Fixtures slice changes. */ .infinite-scroll { display: flex; align-items: center; justify-content: center; padding: 1rem; } /* ---------- Results (infinite-scroll div-grid) ---------- */ .rgrid { width: 100%; } .rgrid__head, .rgrid__row { display: grid; grid-template-columns: 96px 132px minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; gap: .5rem; padding: .4rem .6rem; border-bottom: 1px solid var(--mud-palette-divider); box-sizing: border-box; } .rgrid__head { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); } .rgrid__row { min-height: 48px; } .rgrid__row:hover { background: var(--mud-palette-table-hover); } .rgrid__date { color: var(--mud-palette-text-secondary); font-size: .85rem; white-space: nowrap; } .rgrid .ra { justify-self: end; text-align: right; } .rgrid .ca { justify-self: center; text-align: center; } .rgrid__ph { display: flex; align-items: center; min-height: 48px; padding: .4rem .6rem; border-bottom: 1px solid var(--mud-palette-divider); box-sizing: border-box; } .rgrid__ph .mud-skeleton { width: 100%; } @media (max-width: 599.95px) { .rgrid__head, .rgrid__row { grid-template-columns: 64px minmax(0, 1fr) 48px minmax(0, 1fr); gap: .35rem; padding: .4rem .35rem; } .rgrid__stage { display: none; } .rgrid__date { font-size: .78rem; } } /* ---------- Cards / surfaces ---------- */ .surface-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; } /* ---------- Fixtures (date-grouped, infinite scroll) ---------- No here: the bounded upcoming list is grouped into day bands and revealed in batches by an IntersectionObserver (infinitescroll.js), which frees the row from a single uniform height. Desktop is one line per match (Kick-off | Home vs Away | Stage); on medium-and-smaller screens the same markup reflows (grid-template-areas) so the two teams stack on the left (home over away — long country names no longer overflow) with the kick-off time and stage moved to the right. */ .fxlist { width: 100%; } .fxlist__head, .fxrow { display: grid; grid-template-columns: 125px minmax(0, 1fr) 150px; grid-template-areas: "time match stage"; align-items: center; gap: .5rem; padding: .45rem .6rem; box-sizing: border-box; } .fxlist__head { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); border-bottom: 1px solid var(--mud-palette-divider); } /* Place the header cells by the same named areas the rows use, so they can't drift apart if the track/area order ever changes. */ .fxlist__head .fxlist__time { grid-area: time; } .fxlist__head .fxlist__match { grid-area: match; text-align: center; } .fxlist__head .fxlist__stage { grid-area: stage; text-align: right; } /* Day grouping: a band above each day's matches; today's reads in the accent colour. */ .fxday { display: flex; align-items: baseline; gap: .5rem; padding: .85rem .6rem .35rem; border-bottom: 1px solid var(--mud-palette-divider); } .fxday__label { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; color: var(--mud-palette-text-primary); } .fxday__sub { font-size: .78rem; font-weight: 600; color: var(--mud-palette-text-secondary); } .fxday--today .fxday__label { color: var(--mud-palette-primary); } .fxrow { min-height: 48px; border-bottom: 1px solid var(--mud-palette-divider); } .fxrow:hover { background: var(--mud-palette-table-hover); } .fxrow + .fxday { margin-top: 1rem; } /* Today's matches get a subtle accent so they stand out at a glance. */ .fxrow--today { background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); box-shadow: inset 3px 0 0 0 var(--mud-palette-primary); } .fxrow--today:hover { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); } .fxrow__time { grid-area: time; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .92rem; color: var(--mud-palette-text-primary); white-space: nowrap; } /* Desktop: a fixed 3-track grid — each team gets an equal 42% share with the "vs" pinned to a centred auto track — so the home/away split (and the "vs" pivot) lands at the SAME x on every row regardless of name length. Without this, a centred flex block drifts left/right per row as the names vary. Home is right-aligned (up against the vs), away left-aligned. */ .fxrow__match { grid-area: match; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; min-width: 0; } .fxrow__match .team-label--reverse { justify-self: end; } .fxrow__match .team-label:not(.team-label--reverse) { justify-self: start; } /* min-width:0 + max-width:100% let a long country name ellipsize within its track instead of overflowing the row edge (the original complaint) — on the desktop row and, crucially, in the stacked mobile column where the label would otherwise size to its content. */ .fxrow__match .team-label { min-width: 0; max-width: 100%; } .fxrow__vs { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .78rem; color: var(--mud-palette-text-secondary); flex: 0 0 auto; } .fxrow__stage { grid-area: stage; justify-self: end; } .fxlist__ph { display: flex; align-items: center; min-height: 48px; padding: .45rem .6rem; border-bottom: 1px solid var(--mud-palette-divider); box-sizing: border-box; } .fxlist__ph .mud-skeleton { width: 100%; } /* Medium-and-smaller: stack the two teams on the left (home over away) so long names never run off the edge, and move the kick-off time + stage to the right. */ @media (max-width: 899.95px) { .fxlist__head { display: none; } .fxrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "match time" "match stage"; column-gap: .75rem; row-gap: .15rem; padding: .55rem .5rem; } /* Stacked layout: drop the desktop 3-track grid back to a single left-aligned column. */ .fxrow__match { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .35rem; } /* Home is reversed on desktop (flags meet in the middle); stacked, both read flag-then-name. */ .fxrow__match .team-label--reverse { flex-direction: row; } .fxrow__vs { display: none; } .fxrow__time { justify-self: end; text-align: right; font-size: .85rem; } .fxrow__stage { justify-self: end; align-self: end; } .team-label__name { font-size: .92rem; } } /* ---------- Standings ---------- */ .standings-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; } .standings-card__head { display: flex; align-items: center; gap: .6rem; } .standings-card__badge { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-family: 'Outfit', sans-serif; font-weight: 800; color: var(--brand-white); background: var(--brand-navy); } .standings-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .standings-table { width: 100%; border-collapse: collapse; font-size: .88rem; } .standings-table th, .standings-table td { padding: .45rem .35rem; text-align: center; white-space: nowrap; } .standings-table thead th { font-family: 'Outfit', sans-serif; font-size: .72rem; color: var(--mud-palette-text-secondary); text-transform: uppercase; border-bottom: 1px solid var(--mud-palette-divider); } .standings-table tbody tr + tr td { border-top: 1px solid var(--mud-palette-divider-light); } .standings-table .col-team { text-align: left; width: 100%; } .standings-table .col-pos { width: 34px; } .standings-table .col-pts { font-weight: 800; font-family: 'Outfit', sans-serif; } .standings-pos { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; font-weight: 700; font-size: .82rem; } .standings-pos--qualify { color: var(--brand-green-ink); background: color-mix(in srgb, var(--brand-green) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-green) 45%, transparent); } .standings-legend { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--mud-palette-text-secondary); } .standings-legend .dot { width: 12px; height: 12px; border-radius: 4px; background: color-mix(in srgb, var(--brand-green) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-green) 45%, transparent); } /* ---------- Knockout bracket ---------- Always a horizontal, left-to-right bracket (rounds as side-by-side columns), the same on every screen size — narrow screens simply scroll it horizontally (overflow-x) instead of collapsing to a vertical stack. Each round distributes its matches with space-around, which mathematically centres every later-round match between its two feeders — a clean bracket tree with no fragile absolute connectors. */ .kbracket-hint { font-size: .8rem; color: var(--mud-palette-text-secondary); margin-bottom: .75rem; } .kbracket { display: flex; flex-direction: row; align-items: stretch; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 1rem; } .kbracket__round { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 232px; padding: 0 16px; } .kbracket__round-title { align-self: center; margin: 0 0 .9rem; padding: .26rem .8rem; border-radius: 999px; background: var(--mud-palette-action-disabled-background); text-align: center; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); } .kbracket__round--final .kbracket__round-title { background: color-mix(in srgb, var(--brand-green) 20%, transparent); color: var(--brand-green-ink); } .kbracket__matches { display: flex; flex-direction: column; justify-content: space-around; flex: 1 1 auto; gap: 1rem; } .kmatch { position: relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: .5rem .65rem; } .kmatch--final { border-color: var(--brand-green); box-shadow: 0 0 0 1px var(--brand-green), 0 10px 26px -16px rgba(54, 239, 17, .6); } .kmatch__team { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .14rem 0; } .kmatch__team .team-label { font-size: .88rem; min-width: 0; } .kmatch__team + .kmatch__team { border-top: 1px dashed var(--mud-palette-divider); margin-top: .22rem; padding-top: .3rem; } .kmatch__team.is-win .team-label__name { font-weight: 800; } .kmatch__team.is-win .kmatch__score { color: var(--brand-green-ink); } .kmatch__team.is-out { opacity: .5; } .kmatch__score { font-family: 'Outfit', sans-serif; font-weight: 800; min-width: 1.2rem; text-align: right; } .kmatch__kickoff { font-size: .72rem; color: var(--mud-palette-text-secondary); margin-top: .3rem; text-align: center; } .kmatch__champion { display: flex; align-items: center; justify-content: center; gap: .3rem; margin-top: .45rem; padding-top: .4rem; border-top: 1px solid var(--card-border); color: var(--brand-green-ink); font-family: 'Outfit', sans-serif; font-weight: 800; } .kbracket__round--third { margin-top: 1.5rem; max-width: 380px; } /* Subtle connector ticks signalling the left-to-right progression between rounds. Scoped to the bracket's own rounds (DIRECT children of .kbracket) so the standalone third-place play-off — a sibling rendered OUTSIDE .kbracket — never grows ticks that would dangle off its lone card pointing at nothing. (A descendant-selector suppression loses on specificity to the :not() rules.) */ .kbracket > .kbracket__round:not(.kbracket__round--final) .kmatch::after { content: ""; position: absolute; left: 100%; top: 50%; width: 16px; height: 2px; background: var(--bracket-line); transform: translateY(-1px); } .kbracket > .kbracket__round:not(:first-child) .kmatch::before { content: ""; position: absolute; right: 100%; top: 50%; width: 16px; height: 2px; background: var(--bracket-line); transform: translateY(-1px); } /* Narrow screens: tighten each round a touch so more of the bracket shows per swipe. */ @media (max-width: 599.95px) { .kbracket__round { min-width: 204px; padding: 0 12px; } } /* ---------- Fantasy leaderboard ---------- */ .lb { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; } .lb__head, .lb__row { display: grid; grid-template-columns: 50px 1fr 64px 64px 70px; align-items: center; gap: .3rem; padding: .55rem .9rem; } .lb__head { font-family: 'Outfit', sans-serif; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--mud-palette-text-secondary); border-bottom: 1px solid var(--mud-palette-divider); } .lb__row { border-top: 1px solid var(--mud-palette-divider-light); min-height: 52px; /* Rows accumulate as the sentinel loads each fixed-size window on scroll. */ } .lb__row:first-of-type { border-top: 0; } .lb__row:hover { background: var(--mud-palette-table-hover); } /* Signed-in user's own row — highlighted so they can spot themselves in the list. */ .lb__row--me { background: color-mix(in srgb, var(--brand-green) 12%, transparent); box-shadow: inset 3px 0 0 var(--brand-green); } .lb__row--me:hover { background: color-mix(in srgb, var(--brand-green) 18%, transparent); } .lb__num { text-align: right; font-variant-numeric: tabular-nums; } .lb__total { font-weight: 800; font-family: 'Outfit', sans-serif; } .lb__name { display: flex; align-items: center; gap: .5rem; min-width: 0; font-weight: 500; } .lb__name-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .lb__name-line { display: flex; align-items: center; gap: .4rem; min-width: 0; } .lb__name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .lb__games { font-size: .72rem; color: var(--mud-palette-text-secondary); white-space: nowrap; } /* Rank cell stacks the rank pill above its movement arrow. */ .lb__rankcell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } /* Movement since the last finalized match. */ .lb-move { display: inline-flex; align-items: center; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .66rem; line-height: 1; } .lb-move--up { color: var(--brand-green-ink); } .lb-move--down { color: #e5484d; } /* "You" badge on the signed-in user's row + summary card. */ .lb-you { flex: 0 0 auto; padding: .04rem .4rem; border-radius: 999px; font-family: 'Outfit', sans-serif; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-navy); background: var(--brand-green); } /* "Your position" summary card above the table. */ .lb-me { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: .85rem 1.1rem; background: var(--card-bg); border: 1px solid var(--brand-green); border-radius: 16px; box-shadow: 0 10px 26px -18px rgba(54, 239, 17, .6); } .lb-me__rank { display: flex; flex-direction: column; align-items: center; gap: 3px; } .lb-me__id { display: flex; align-items: center; gap: .7rem; min-width: 0; } .lb-me__text { min-width: 0; } .lb-me__name { display: flex; align-items: center; gap: .4rem; min-width: 0; font-family: 'Outfit', sans-serif; font-weight: 800; } .lb-me__name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .lb-me__sub { font-size: .82rem; color: var(--mud-palette-text-secondary); } .lb-me__stat { display: flex; flex-direction: column; align-items: center; line-height: 1.1; } .lb-me__pts { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--brand-green-ink); } .lb-me__stat small { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); } .lb-rank { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; font-size: .82rem; color: var(--brand-navy); background: var(--mud-palette-action-disabled-background); } html[data-theme="dark"] .lb-rank--n { color: var(--mud-palette-text-primary); } .lb-rank--1 { background: #FFD55E; color: #5b4a00; } .lb-rank--2 { background: #D7DEE8; color: #2b3340; } .lb-rank--3 { background: #E8B27A; color: #4a2d10; } @media (max-width: 599.95px) { .lb__head, .lb__row { grid-template-columns: 46px 1fr 56px; } .lb__col-base, .lb__col-bonus { display: none; } .lb-me { gap: .7rem; padding: .75rem .85rem; } } /* ---------- Fantasy picks ---------- */ .picks-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 1rem 1.1rem; } .pick-row { display: flex; align-items: center; gap: .75rem; padding: .35rem 0; } .pick-row + .pick-row { border-top: 1px solid var(--mud-palette-divider-light); } .fantasy-slot-badge { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: .8rem; color: var(--brand-white); background: var(--brand-navy); flex: 0 0 auto; } .fantasy-slot-badge--top { background: var(--brand-green); color: var(--brand-navy); } /* ---------- Fantasy squad (view a player's picks, reached from a leaderboard row) ---------- */ /* Leaderboard rows are links to /fantasy/squad/{userId}; keep them looking like plain rows. */ a.lb__row { color: inherit; text-decoration: none; cursor: pointer; } .squad-pick__score { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; } .squad-pick__pts { font-family: 'Outfit', sans-serif; font-weight: 800; color: var(--brand-green-ink); font-variant-numeric: tabular-nums; } .squad-pick__pts--neg { color: #e5484d; } .squad-pick__meta { font-size: .72rem; color: var(--mud-palette-text-secondary); white-space: nowrap; } .fantasy-pick-form .fantasy-select { display: block; width: 100%; min-width: 0; max-width: 100%; padding: 0.55rem 0.6rem; margin-top: 0.15rem; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 10px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-size: .95rem; } .fantasy-pick-form .fantasy-select:focus { outline: none; border-color: var(--brand-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-green) 30%, transparent); } .fantasy-pick-form label { font-size: 0.85rem; color: var(--mud-palette-text-secondary); font-weight: 600; } /* Flag-aware custom dropdown (flagselect.js). The native is the only fallback, so the menu must never paint under the bar. */ z-index: 1310; top: calc(100% + 4px); left: 0; right: 0; max-width: 100%; max-height: 300px; overflow-y: auto; scroll-padding-top: 2.9rem; /* clear the sticky search header on scrollIntoView */ background: var(--mud-palette-surface); border: 1px solid var(--card-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); } /* Flip upward when there isn't room below (lower slots near the bottom nav). */ .flagselect--up .flagselect__menu { top: auto; bottom: calc(100% + 4px); } .flagselect__list { margin: 0; padding: 0 .25rem .25rem; list-style: none; } /* Sticky search header inside the menu (flagselect.js builds the input). */ .flagselect__search { position: sticky; top: 0; z-index: 1; padding: .4rem .25rem .35rem; background: var(--mud-palette-surface); } .flagselect__search input { width: 100%; padding: .4rem .55rem; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 8px; background: var(--mud-palette-background); color: var(--mud-palette-text-primary); font-size: .9rem; } .flagselect__search input:focus { outline: none; border-color: var(--brand-green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-green) 28%, transparent); } .flagselect__empty { padding: .75rem .55rem; color: var(--mud-palette-text-disabled); font-size: .85rem; text-align: center; } .flagselect__group[hidden], .flagselect__option[hidden], .flagselect__empty[hidden] { display: none; } .flagselect__group { padding: .4rem .55rem .2rem; font-family: 'Outfit', sans-serif; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); } .flagselect__option { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; border-radius: 8px; cursor: pointer; } .flagselect__option.is-active, .flagselect__option:hover { background: color-mix(in srgb, var(--brand-green) 16%, transparent); } .flagselect__option[aria-selected="true"] { font-weight: 700; } .flagselect__option--placeholder { color: var(--mud-palette-text-disabled); } .pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .85rem; } /* Picks: intro, progress and per-slot rows */ .picks-intro { background: var(--card-bg); border: 1px solid var(--card-border); border-left: 4px solid var(--brand-green); border-radius: 14px; padding: 1rem 1.1rem; } .picks-intro__title { display: flex; align-items: center; gap: .5rem; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.05rem; } .picks-intro ul { margin: .6rem 0 0; padding-left: 1.15rem; } .picks-intro li { margin: .28rem 0; color: var(--mud-palette-text-secondary); font-size: .9rem; } .picks-intro strong { color: var(--mud-palette-text-primary); } .pick-progress { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Outfit', sans-serif; font-weight: 700; } .pick-slots { display: flex; flex-direction: column; gap: .6rem; } .pick-slot { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: .75rem; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: .55rem .7rem; } .pick-slot__main { min-width: 0; } .pick-slot__label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary); } .pick-slot__weight { color: var(--brand-green-ink); font-weight: 800; font-family: 'Outfit', sans-serif; } .pick-slot__preview { min-width: 0; } .pick-slot__empty { color: var(--mud-palette-text-disabled); font-size: .85rem; } @media (max-width: 599.95px) { .pick-slot { grid-template-columns: 28px 1fr; row-gap: .35rem; } .pick-slot__preview { grid-column: 2 / -1; } } /* ---------- How it works / scoring ---------- */ .howto-section { margin-bottom: 1.75rem; } .scoring-table { width: 100%; border-collapse: collapse; } .scoring-table th, .scoring-table td { padding: .55rem .6rem; text-align: center; } .scoring-table th:first-child, .scoring-table td:first-child { text-align: left; } .scoring-table thead th { font-family: 'Outfit', sans-serif; font-size: .76rem; text-transform: uppercase; color: var(--mud-palette-text-secondary); border-bottom: 2px solid var(--mud-palette-divider); } .scoring-table tbody tr + tr td { border-top: 1px solid var(--mud-palette-divider-light); } .pts { font-family: 'Outfit', sans-serif; font-weight: 800; } .pts--pos { color: var(--brand-green-ink); } .pts--neg { color: #e5484d; } .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { position: relative; padding: 0 0 1.1rem 1.6rem; border-left: 2px solid var(--mud-palette-divider); } .timeline li:last-child { border-left-color: transparent; padding-bottom: 0; } .timeline li::before { content: ""; position: absolute; left: -7px; top: .15rem; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 3px var(--mud-palette-background); } .timeline strong { display: block; font-family: 'Outfit', sans-serif; } .example-card { background: var(--card-bg); border: 1px solid var(--card-border); border-left: 4px solid var(--brand-green); border-radius: 12px; padding: .9rem 1rem; } /* ---------- Avatars & account ---------- */ .user-avatar { display: inline-flex; flex: 0 0 auto; border-radius: 50%; overflow: hidden; vertical-align: middle; line-height: 0; } .user-avatar svg { display: block; } .header-user { display: inline-flex; align-items: center; gap: .5rem; color: var(--brand-white) !important; } .header-user__name { font-weight: 600; font-size: .9rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-avatar-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 1.5rem 1rem; } .account-label { display: block; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .85rem; margin-bottom: .3rem; color: var(--mud-palette-text-secondary); } .account-form .fantasy-select { max-width: 420px; } /* Read-only "Account details" card (email / provider / status). */ .account-info-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 1.1rem 1.25rem; } .account-info-card__title { display: flex; align-items: center; gap: .45rem; margin: 0 0 .9rem; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1rem; } .account-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem 1.5rem; margin: 0; } .account-info > div { display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .account-info dt { font-family: 'Outfit', sans-serif; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); } .account-info dd { margin: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .account-muted { color: var(--mud-palette-text-secondary); } .account-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 700; background: var(--mud-palette-action-disabled-background); } .account-badge .mud-icon-root { font-size: 1rem; } .account-badge--ok { color: var(--brand-green-ink); background: color-mix(in srgb, var(--brand-green) 16%, transparent); } /* Avatar style family chips (face / robot / pattern…). */ .avatar-style-chips { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 520px; } .avatar-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem .35rem .35rem; border: 1px solid var(--card-border); border-radius: 999px; cursor: pointer; transition: border-color .15s ease, background .15s ease; background: transparent; color: inherit; font: inherit; } .avatar-chip:hover { border-color: var(--brand-green); } .avatar-chip.is-selected { border-color: var(--brand-green); background: color-mix(in srgb, var(--brand-green) 12%, transparent); } .avatar-chip__name { font-size: .82rem; font-weight: 600; } /* "Pick your avatar" gallery — many ready-made options to choose from. */ .avatar-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: .55rem; max-width: 520px; } .avatar-gallery__item { display: grid; place-items: center; padding: .3rem; border: 2px solid transparent; border-radius: 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .12s ease; background: var(--card-bg); } .avatar-gallery__item:hover { border-color: color-mix(in srgb, var(--brand-green) 50%, transparent); transform: translateY(-2px); } .avatar-gallery__item.is-selected { border-color: var(--brand-green); background: color-mix(in srgb, var(--brand-green) 12%, transparent); } /* ---------- Legal pages ---------- */ .legal-page { max-width: 780px; } .legal-page section { margin-bottom: 1.5rem; } .legal-page ul { padding-left: 1.2rem; margin: .4rem 0; } .legal-page li { margin: .3rem 0; } .legal-updated { color: var(--mud-palette-text-secondary); font-size: .85rem; margin: 0 0 1.5rem; } .legal-link { color: var(--brand-green-ink); text-decoration: none; font-weight: 600; } .legal-link:hover { text-decoration: underline; } #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 0.75rem 1.25rem; background: #b32121; color: #fff; z-index: 2000; }