/* ========================================================================= Basket Update — mobile-first theme (light by default, dark mode optional) Palette: Black / White / Red (#E53935) ========================================================================= */ :root { /* Light theme — the default. Dark is opt-in via [data-theme="dark"]. */ --red: #e53935; --red-700: #c62828; --bg: #ffffff; --bg-2: #f4f5f7; --card: #ffffff; --card-2: #f1f3f5; --line: #e4e7eb; --text: #0b0d10; --muted: #5a616b; --muted-2: #99a1ab; --white: #ffffff; --grad: #f2f4f7; /* hero gradient top */ --appbar-bg: rgba(255, 255, 255, 0.82); --nav-bg: rgba(255, 255, 255, 0.92); --radius: 14px; --radius-sm: 10px; --gap: 14px; --wrap: 1100px; --appbar-h: 56px; --bottomnav-h: 64px; --shadow: 0 6px 22px rgba(20, 23, 28, 0.10); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* Dark theme — secondary, applied when is set. */ [data-theme="dark"] { --bg: #0a0a0a; --bg-2: #121212; --card: #161616; --card-2: #1d1d1d; --line: #262626; --text: #f5f5f5; --muted: #9a9a9a; --muted-2: #6f6f6f; --grad: #141414; --appbar-bg: rgba(10, 10, 10, 0.82); --nav-bg: rgba(14, 14, 14, 0.92); --shadow: 0 6px 22px rgba(0, 0, 0, 0.45); } html { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } body { transition: background-color 0.25s var(--ease), color 0.25s var(--ease); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom)); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; } button { font: inherit; cursor: pointer; } .nba-skip { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--red); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; } .nba-skip:focus { left: 0; } /* ---------- layout ---------- */ .nba-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; } .nba-main { min-height: 60vh; } .nba-stack { display: flex; flex-direction: column; gap: 26px; padding-top: 18px; padding-bottom: 30px; } /* ---------- app bar ---------- */ .nba-appbar { position: sticky; top: 0; z-index: 100; height: var(--appbar-h); background: var(--appbar-bg); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); } .nba-appbar__inner { max-width: var(--wrap); margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; } .nba-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; letter-spacing: -0.03em; } .nba-brand__mark { background: var(--red); color: #fff; padding: 3px 8px; border-radius: 7px; font-size: 15px; line-height: 1; box-shadow: 0 2px 10px rgba(229, 57, 53, 0.45); } .nba-brand__text { font-size: 17px; } .nba-brand--sm .nba-brand__mark { font-size: 13px; } .nba-topnav { display: none; gap: 4px; } .nba-topnav__link { padding: 8px 12px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 14px; transition: color 0.2s, background 0.2s; } .nba-topnav__link:hover { color: var(--text); } .nba-topnav__link.is-active { color: var(--text); background: var(--card-2); } /* ---------- hero ---------- */ .nba-hero { background: radial-gradient(120% 120% at 100% 0%, rgba(229, 57, 53, 0.22), transparent 55%), linear-gradient(180deg, var(--grad), var(--bg)); border-bottom: 1px solid var(--line); padding: 26px 0 28px; } .nba-hero__eyebrow { margin: 0 0 8px; color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; } .nba-hero__title { font-size: clamp(24px, 7vw, 38px); max-width: 18ch; } .nba-hero__sub { color: var(--muted); margin: 10px 0 0; font-size: 15px; } /* ---------- section ---------- */ .nba-section { animation: fadeUp 0.5s var(--ease) both; } .nba-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .nba-section__title { font-size: 19px; position: relative; padding-left: 12px; } .nba-section__title::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; background: var(--red); border-radius: 4px; } .nba-section__link { color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; } .nba-section__link:hover { color: var(--red); } .nba-empty { color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); padding: 22px 16px; text-align: center; font-size: 14px; } /* ---------- grids ---------- */ .nba-grid--games { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); } .nba-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } /* ---------- game card ---------- */ .nba-game { background: linear-gradient(180deg, var(--card), var(--card-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; transition: transform 0.18s var(--ease), border-color 0.2s; } .nba-game:active { transform: scale(0.99); } .nba-game.is-live { border-color: rgba(229, 57, 53, 0.5); } .nba-game__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; min-height: 18px; } .nba-game__period { color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .nba-game__status { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .nba-game__status--final { color: var(--text); } .nba-game__row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; } .nba-game__row + .nba-game__row { border-top: 1px solid var(--line); } .nba-game__team { display: flex; align-items: center; gap: 10px; min-width: 0; } .nba-game__abbr { font-weight: 800; font-size: 14px; width: 38px; } .nba-game__name { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nba-game__score { font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; } .nba-game__dash { color: var(--muted-2); } .nba-game__row.is-leading .nba-game__score, .nba-game__row.is-leading .nba-game__abbr { color: var(--text); } .nba-game__row:not(.is-leading) .nba-game__score { color: var(--muted); } /* competition / round line (EuroLeague) */ .nba-game__meta { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* live badge */ .nba-live { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-weight: 800; font-size: 11px; letter-spacing: 0.08em; } .nba-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.7); animation: pulse 1.6s infinite; } /* logos */ .nba-logo { width: 28px; height: 28px; object-fit: contain; flex: none; } /* club crests (EuroLeague) arrive at mixed aspect ratios and often carry a white plate, so keep them contained and let them breathe. */ .nba-logo--crest { object-fit: contain; border-radius: 4px; background: transparent; } /* ---------- standings ---------- */ .nba-standings { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .nba-standings__conf { padding: 12px 14px; font-size: 14px; border-bottom: 1px solid var(--line); background: var(--card-2); } .nba-standings__table { width: 100%; border-collapse: collapse; font-size: 13px; } .nba-standings__table th { color: var(--muted-2); font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; padding: 8px 6px; text-align: center; } .nba-standings__table th:nth-child(2) { text-align: left; } .nba-standings__table td { padding: 8px 6px; text-align: center; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; } .nba-standings__seed { color: var(--muted); font-weight: 700; width: 28px; } .nba-standings__team { display: flex; align-items: center; gap: 8px; text-align: left; } .nba-standings__team .nba-logo { width: 22px; height: 22px; } .nba-standings__abbr { font-weight: 800; } .nba-standings__name { color: var(--muted); display: none; } .nba-standings__pct { color: var(--muted); } .nba-standings tr.in-playoffs .nba-standings__seed { box-shadow: inset 3px 0 0 var(--red); } .nba-standings tr.in-playin .nba-standings__seed { box-shadow: inset 3px 0 0 #f9a825; } .nba-legend { display: flex; gap: 18px; color: var(--muted); font-size: 12px; } .nba-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .dot--playoffs { background: var(--red); } .dot--playin { background: #f9a825; } /* ---------- leaders ---------- */ .nba-leaders { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .nba-leaders__col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; } .nba-leaders__cat { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); margin-bottom: 6px; } .nba-leaders__cat small { color: var(--muted-2); font-weight: 600; text-transform: none; letter-spacing: 0; } .nba-leaders__list { list-style: none; margin: 0; padding: 0; } .nba-leader { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); } .nba-leader:first-child { border-top: 0; } .nba-leader__rank { width: 18px; color: var(--muted-2); font-weight: 800; font-size: 13px; } .nba-leader .nba-logo { width: 26px; height: 26px; } .nba-leader__info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .nba-leader__name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nba-leader__team { color: var(--muted); font-size: 12px; } .nba-leader__val { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--red); } /* ---------- news ---------- */ .nba-news { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .nba-news__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.2s, transform 0.15s; } .nba-news__item:active { transform: scale(0.995); } .nba-news__item:hover { border-color: #333; } .nba-news__link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; } .nba-news__bullet { width: 36px; height: 36px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line); flex: none; position: relative; } .nba-news__bullet::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--red); } .nba-news__body { display: flex; flex-direction: column; min-width: 0; } .nba-news__title { font-weight: 700; font-size: 14px; } .nba-news__meta { color: var(--muted); font-size: 12px; margin-top: 2px; } /* ---------- bracket ---------- */ .nba-bracket { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } .nba-bracket__title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px; } .nba-series { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; position: relative; overflow: hidden; } .nba-series.is-live { border-color: rgba(229, 57, 53, 0.5); } .nba-series.is-live::after { content: "LIVE"; position: absolute; top: 8px; right: 10px; color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; } .nba-series__round { color: var(--muted-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .nba-series__row { display: flex; align-items: center; gap: 10px; padding: 5px 0; } .nba-series__row .nba-logo { width: 26px; height: 26px; } .nba-series__abbr { font-weight: 800; flex: 1; } .nba-series__w { font-weight: 800; font-variant-numeric: tabular-nums; width: 22px; text-align: center; color: var(--muted); } .nba-series__row.is-winner .nba-series__abbr, .nba-series__row.is-winner .nba-series__w { color: var(--text); } .nba-series__row.is-winner .nba-series__w { color: var(--red); } /* ---------- teams grid ---------- */ .nba-teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .nba-team-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 8px; transition: transform 0.16s var(--ease), border-color 0.2s, background 0.2s; position: relative; overflow: hidden; } .nba-team-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--team, var(--red)); opacity: 0.9; } .nba-team-card:hover { transform: translateY(-3px); border-color: #333; background: var(--card-2); } .nba-team-card .nba-logo { width: 52px; height: 52px; } .nba-team-card__name { font-weight: 800; font-size: 13px; } .nba-team-card__city { color: var(--muted); font-size: 11px; } /* ---------- players grid ---------- */ .nba-search { margin-bottom: 14px; } .nba-search__input { width: 100%; background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 13px 18px; font-size: 15px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .nba-search__input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.2); } .nba-search__input::placeholder { color: var(--muted-2); } .nba-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .nba-player { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.16s var(--ease), border-color 0.2s; } .nba-player:hover { transform: translateY(-3px); border-color: #333; } /* photo / media area */ .nba-player__media { position: relative; aspect-ratio: 1 / 1; display: flex; overflow: hidden; background: var(--card-2); background: linear-gradient(180deg, color-mix(in srgb, var(--team) 28%, var(--card-2)), var(--bg)); } .nba-player__media .nba-photo { position: absolute; inset: 0; width: 100%; height: 100%; } .nba-player__media img.nba-photo { object-fit: contain; object-position: bottom center; } .nba-player__media img.nba-photo.is-fallback { object-fit: contain; padding: 24%; opacity: 0.4; } .nba-player__media .nba-photo--avatar { display: flex; align-items: center; justify-content: center; font-size: clamp(30px, 11vw, 48px); font-weight: 800; color: #fff; letter-spacing: 0.02em; background: linear-gradient(180deg, var(--team), #0b0b0b); } .nba-player__logo { position: absolute; top: 8px; left: 8px; z-index: 2; } .nba-player__logo .nba-logo { width: 26px; height: 26px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); } .nba-player__pos { position: absolute; top: 8px; right: 8px; z-index: 2; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0,0,0,0.55); border-radius: 999px; padding: 2px 9px; backdrop-filter: blur(4px); } .nba-player__body { padding: 12px 14px 14px; } .nba-player__name { font-size: 15px; } .nba-player__team { color: var(--muted); font-size: 12px; } .nba-player__stats { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .nba-player__stats span { display: flex; flex-direction: column; align-items: center; font-size: 10px; color: var(--muted); letter-spacing: 0.04em; gap: 2px; } .nba-player__stats b { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; } /* shared photo helpers (also used in leaders) */ .nba-photo--round { border-radius: 50%; object-fit: cover; object-position: top center; } .nba-leader__photo { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line); object-fit: cover; object-position: top center; } .nba-leader__photo.is-fallback { object-fit: contain; padding: 5px; } span.nba-leader__photo.nba-photo--avatar { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(180deg, var(--team), #0b0b0b); } /* ---------- tabs ---------- */ .nba-tabs { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; align-self: flex-start; } .nba-tab { border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; padding: 9px 18px; border-radius: 999px; transition: color 0.2s, background 0.2s; } .nba-tab.is-active { color: #fff; background: var(--red); } .nba-tabpane { animation: fadeUp 0.35s var(--ease) both; } /* ---------- page heads ---------- */ .nba-page__head { padding-top: 4px; } .nba-page__title { font-size: clamp(22px, 6vw, 32px); } .nba-page__title span { color: var(--red); } .nba-page__sub { color: var(--muted); margin: 8px 0 0; font-size: 14px; } .nba-updated { color: var(--muted-2); font-size: 12px; margin: 4px 0 0; } /* prose */ .nba-prose { color: var(--text); line-height: 1.7; } .nba-prose a { color: var(--red); } .nba-article__media img { border-radius: var(--radius); } .nba-pagination a, .nba-pagination .current { display: inline-block; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; margin: 2px; color: var(--text); } .nba-pagination .current { background: var(--red); border-color: var(--red); } /* ---------- footer ---------- */ .nba-footer { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: 20px; } .nba-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 26px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .nba-footer__note { color: var(--muted); font-size: 13px; margin: 0; } .nba-footer__copy { color: var(--muted-2); font-size: 12px; margin: 0; } /* ---------- bottom nav ---------- */ .nba-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; height: calc(var(--bottomnav-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--nav-bg); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-top: 1px solid var(--line); } .nba-bottomnav__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; -webkit-tap-highlight-color: transparent; transition: color 0.2s; position: relative; } .nba-bottomnav__link .nba-ico { width: 23px; height: 23px; transition: transform 0.2s var(--ease); } .nba-bottomnav__link.is-active { color: var(--text); } .nba-bottomnav__link.is-active .nba-ico { color: var(--red); transform: translateY(-1px) scale(1.08); } .nba-bottomnav__link.is-active::before { content: ""; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--red); } /* ---------- animations ---------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.6); } 70% { box-shadow: 0 0 0 7px rgba(229, 57, 53, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ========================================================================= Responsive — tablet & desktop ========================================================================= */ @media (min-width: 600px) { .nba-grid--games { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nba-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .nba-leaders { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nba-bracket { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .nba-teams { grid-template-columns: repeat(5, minmax(0, 1fr)); } .nba-players { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nba-standings__name { display: inline; } } @media (min-width: 900px) { body { padding-bottom: 0; } .nba-topnav { display: inline-flex; } .nba-bottomnav { display: none; } .nba-grid--games { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nba-teams { grid-template-columns: repeat(6, minmax(0, 1fr)); } .nba-players { grid-template-columns: repeat(4, minmax(0, 1fr)); } .nba-hero { padding: 40px 0; } } /* ========================================================================= Team profile (/team/{abbr}/) ========================================================================= */ .nba-team-hero { background: var(--card-2); background: linear-gradient(180deg, color-mix(in srgb, var(--team) 42%, var(--card-2)), var(--bg)); border-bottom: 1px solid var(--line); padding: 24px 0; } .nba-team-hero__inner { display: flex; align-items: center; gap: 16px; } .nba-team-hero__logo { width: 80px; height: 80px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.55)); } .nba-team-hero__conf { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 4px; } .nba-team-hero__name { font-size: clamp(22px, 6vw, 34px); } .nba-team-hero__sub { color: var(--text); margin: 8px 0 0; font-size: 14px; font-weight: 600; } .nba-statgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .nba-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 8px; text-align: center; } .nba-stat b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; } .nba-stat span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .nba-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .nba-rost { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; transition: border-color 0.2s; } .nba-rost:hover { border-color: #333; } .nba-rost__photo { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line); object-fit: cover; object-position: top center; } .nba-rost__photo.is-fallback { object-fit: contain; padding: 6px; } span.nba-rost__photo.nba-photo--avatar { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(180deg, var(--team), #0b0b0b); } .nba-rost__info { display: flex; flex-direction: column; min-width: 0; } .nba-rost__name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nba-rost__meta { color: var(--muted); font-size: 12px; } .nba-sched { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .nba-sched__row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; } .nba-sched__date { color: var(--muted); font-size: 12px; font-weight: 700; } .nba-sched__opp { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; } .nba-sched__opp .nba-logo { width: 24px; height: 24px; } .nba-sched__at { color: var(--muted-2); font-size: 12px; min-width: 20px; } .nba-sched__res { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; } .nba-sched__wl { font-weight: 800; } .nba-sched__wl--w { color: #2ecc71; } .nba-sched__wl--l { color: var(--red); } .nba-sched__score { font-weight: 700; } .nba-sched__time { color: var(--muted); font-size: 13px; } .nba-standings__link { display: flex; align-items: center; gap: 8px; color: inherit; } .nba-standings__link:hover .nba-standings__abbr { color: var(--red); } .nba-backlink a { color: var(--muted); font-weight: 600; } .nba-backlink a:hover { color: var(--red); } @media (min-width: 600px) { .nba-statgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .nba-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .nba-roster { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- team about / franchise history ---------- */ .nba-about { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } .nba-about__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .nba-fact { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm); } .nba-fact--wide { grid-column: 1 / -1; } .nba-fact__k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .nba-fact__v { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nba-fact__count { font-size: 22px; color: var(--red); font-variant-numeric: tabular-nums; } .nba-rings { display: flex; flex-wrap: wrap; gap: 5px; } .nba-ring { font-size: 11px; font-weight: 700; background: rgba(229,57,53,0.14); color: #ff9a98; border: 1px solid rgba(229,57,53,0.3); border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; } .nba-about__text { color: var(--text); line-height: 1.7; margin: 14px 0 0; font-size: 14px; } @media (min-width: 600px) { .nba-about__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ========================================================================= Player profile (/player/{id}/) ========================================================================= */ .nba-photolink { display: inline-block; line-height: 0; } .nba-photolink:hover { opacity: 0.92; } .nba-player__media .nba-photolink { position: absolute; inset: 0; } .nba-player__media .nba-photolink .nba-photo { position: absolute; inset: 0; width: 100%; height: 100%; } .nba-player-hero { background: var(--card-2); background: linear-gradient(180deg, color-mix(in srgb, var(--team) 42%, var(--card-2)), var(--bg)); border-bottom: 1px solid var(--line); padding: 24px 0; } .nba-player-hero__inner { display: flex; align-items: center; gap: 16px; } .nba-player-hero__photo { width: 92px; height: 92px; flex: none; border-radius: 50%; object-fit: cover; object-position: top center; background: var(--card-2); border: 2px solid var(--line); } .nba-player-hero__photo.is-fallback { object-fit: contain; padding: 10px; } span.nba-player-hero__photo.nba-photo--avatar { display: inline-flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: #fff; background: linear-gradient(180deg, var(--team), #0b0b0b); } .nba-player-hero__team { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 4px; } .nba-player-hero__team .nba-logo { width: 20px; height: 20px; } .nba-player-hero__name { font-size: clamp(22px, 6vw, 34px); } .nba-player-hero__sub { color: var(--text); margin: 6px 0 0; font-size: 14px; font-weight: 600; } .nba-statgrid--player { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nba-stat--hl b { color: var(--red); } @media (min-width: 600px) { .nba-statgrid--player { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* ========================================================================= News sidebar (desktop two-column layout) ========================================================================= */ .nba-layout__main { min-width: 0; } .nba-layout__aside { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; } /* Mobile: hide the sidebar (home keeps its inline news section instead). */ @media (max-width: 999px) { .nba-layout__aside { display: none; } } @media (min-width: 1000px) { .nba-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; } .nba-layout__aside { margin-top: 18px; position: sticky; top: calc(var(--appbar-h) + 16px); /* Keep the whole sidebar (news + Top Players) pinned and fully reachable: if it's taller than the viewport, scroll inside it rather than cutting the Top Players widget off below the fold. */ max-height: calc(100vh - var(--appbar-h) - 28px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding-right: 4px; } .nba-layout__aside::-webkit-scrollbar { width: 6px; } .nba-layout__aside::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; } .nba-layout__aside::-webkit-scrollbar-track { background: transparent; } .nba-hide-desktop { display: none !important; } } .nba-sidebar__panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; } .nba-sidebar__title { font-size: 14px; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .nba-sidebar__bar { width: 4px; height: 16px; background: var(--red); border-radius: 4px; flex: none; } .nba-sidebar .nba-news { gap: 6px; } .nba-sidebar .nba-news__item { background: var(--card-2); } .nba-sidebar .nba-news__link { padding: 9px 10px; gap: 10px; } .nba-sidebar .nba-news__bullet { width: 30px; height: 30px; } .nba-sidebar .nba-news__title { font-size: 13px; line-height: 1.35; } .nba-sidebar .nba-news__meta { font-size: 11px; } .nba-sidebar__leaders { list-style: none; margin: 0; padding: 0; } .nba-sbl { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--line); } .nba-sbl:first-child { border-top: 0; } .nba-sbl__rank { width: 16px; color: var(--muted-2); font-weight: 800; font-size: 12px; text-align: center; flex: none; } .nba-sbl__photo { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; object-position: top center; background: var(--card-2); border: 1px solid var(--line); } .nba-sbl__photo.is-fallback { object-fit: contain; padding: 4px; } span.nba-sbl__photo.nba-photo--avatar { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(180deg, var(--team), #0b0b0b); } .nba-sbl__name { flex: 1; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nba-sbl__val { font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; font-size: 13px; } .nba-sidebar__more { display: inline-block; margin-top: 10px; color: var(--muted); font-size: 12px; font-weight: 600; } .nba-sidebar__more:hover { color: var(--red); } /* ---------- theme toggle ---------- */ .nba-appbar__actions { display: flex; align-items: center; gap: 4px; } .nba-themetoggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; margin-left: 8px; background: var(--card-2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s, border-color 0.2s, color 0.2s; } .nba-themetoggle:hover { border-color: var(--red); color: var(--red); } .nba-themetoggle svg { width: 19px; height: 19px; } /* Show the moon (switch-to-dark hint) in light mode, the sun in dark mode. */ .nba-themetoggle__sun { display: none; } .nba-themetoggle__moon { display: block; } [data-theme="dark"] .nba-themetoggle__sun { display: block; } [data-theme="dark"] .nba-themetoggle__moon { display: none; } /* ========================================================================= Hero animation — spinning basketball with dribble float + live chip ========================================================================= */ .nba-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nba-hero__copy { flex: 1; min-width: 0; } .nba-hero__art { position: relative; flex: none; width: 168px; height: 168px; display: none; place-items: center; } @media (min-width: 760px) { .nba-hero__art { display: grid; } } /* pulsing red glow behind the ball */ .nba-hero__art::before { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(229, 57, 53, 0.40), transparent 68%); animation: nba-glow 2.6s ease-in-out infinite; } /* slow rotating dashed ring */ .nba-hero__art::after { content: ""; position: absolute; width: 162px; height: 162px; border-radius: 50%; border: 2px dashed rgba(229, 57, 53, 0.35); animation: nba-spin 11s linear infinite; } .nba-ball { position: relative; width: 116px; height: 116px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ff7b77, var(--red) 58%, var(--red-700)); box-shadow: 0 16px 30px rgba(229, 57, 53, 0.45), inset -10px -12px 24px rgba(0, 0, 0, 0.38), inset 7px 8px 16px rgba(255, 255, 255, 0.20); animation: nba-dribble 1.5s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite; will-change: transform; } .nba-ball__spin { position: absolute; inset: 0; animation: nba-spin 6s linear infinite; } .nba-ball__spin svg { position: absolute; inset: 0; width: 100%; height: 100%; } .nba-ball__seam { fill: none; stroke: rgba(0, 0, 0, 0.55); stroke-width: 2.6; stroke-linecap: round; } .nba-hero__live { position: absolute; top: 2px; right: -2px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: var(--card); color: var(--red); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; box-shadow: var(--shadow); animation: nba-float 3s ease-in-out infinite; } @keyframes nba-dribble { 0%, 100% { transform: translateY(-18px) scaleY(1); } 44% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(3px) scaleY(0.92); } /* squash at the floor */ 56% { transform: translateY(0) scaleY(1); } } @keyframes nba-spin { to { transform: rotate(360deg); } } @keyframes nba-glow { 0%, 100% { opacity: 0.55; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.06); } } @keyframes nba-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* ---------- footer links ---------- */ .nba-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 4px 0 2px; } .nba-footer__links a { color: var(--muted); font-size: 13px; font-weight: 600; transition: color 0.2s; } .nba-footer__links a:hover { color: var(--red); }