/* CartolaNews NBA — Central NBA frontend styles. Namespaced entirely under .cnba-wrap (spec sections 122-124): no bare .card/.title/.row/.active class names, everything prefixed cnba-. Theme-aware (2026-08 feedback superseded the original dark-only design): light tokens are the default on .cnba-wrap, overridden under body[data-theme="dark"] .cnba-wrap — the same toggle Foxiz's own light/dark switch stamps on , so the visitor's own site-wide choice controls this section too. The Hero stays an intentionally dark, photo- backed band in both themes (like most masthead/hero sections with a background image) — only the content cards below adapt. */ .cnba-wrap-outer, .cnba-wrap { box-sizing: border-box; } .cnba-wrap *, .cnba-wrap *::before, .cnba-wrap *::after { box-sizing: border-box; } .cnba-wrap { --cnba-radius-sm: 6px; --cnba-radius: 10px; --cnba-radius-lg: 16px; --cnba-gap-xs: 6px; --cnba-gap-sm: 10px; --cnba-gap: 16px; --cnba-gap-lg: 24px; --cnba-transition: .2s ease; --cnba-max-width: 1440px; /* Light theme (default) */ --cnba-bg: #f2f4f8; --cnba-card-bg: #ffffff; --cnba-card-hover: #f7f9fc; --cnba-border: rgba(15,23,42,.10); --cnba-text: #101828; --cnba-muted: #5b6472; --cnba-surface-1: rgba(15,23,42,.04); --cnba-surface-2: rgba(15,23,42,.065); --cnba-outline-border: rgba(15,23,42,.18); --cnba-navbar-bg: rgba(255,255,255,.92); --cnba-neutral-indicator: rgba(15,23,42,.22); --cnba-green: #16a34a; --cnba-yellow: #ca8a04; --cnba-red: #dc2626; display: block; background: var(--cnba-bg); color: var(--cnba-text); font-family: inherit; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Dark theme — matches Foxiz's own toggle (body[data-theme="dark"]). */ body[data-theme="dark"] .cnba-wrap { --cnba-bg: #06111f; --cnba-card-bg: #0a1726; --cnba-card-hover: #12263a; --cnba-border: rgba(255,255,255,.08); --cnba-text: #ffffff; --cnba-muted: #98a6b7; --cnba-surface-1: rgba(255,255,255,.05); --cnba-surface-2: rgba(255,255,255,.08); --cnba-outline-border: rgba(255,255,255,.2); --cnba-navbar-bg: rgba(6,17,31,.96); --cnba-neutral-indicator: rgba(255,255,255,.3); --cnba-green: #22c55e; --cnba-yellow: #eab308; --cnba-red: #ef4444; } .cnba-sr-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .cnba-container { max-width: var(--cnba-max-width); margin: 0 auto; padding: 0 20px 48px; } .cnba-empty-state { color: var(--cnba-muted); font-size: 14px; padding: 18px 0; margin: 0; } /* ---------------------------------------------------------------- Buttons */ .cnba-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 10px 16px; border-radius: var(--cnba-radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform var(--cnba-transition), border-color var(--cnba-transition), background var(--cnba-transition); } .cnba-btn-primary { background: var(--cnba-orange, #ff7900); color: #06111f; } .cnba-btn-primary:hover { transform: translateY(-1px); } .cnba-btn-outline { background: transparent; border-color: var(--cnba-outline-border); color: var(--cnba-text); } .cnba-btn-outline:hover { border-color: var(--cnba-orange, #ff7900); } .cnba-btn-ghost { background: var(--cnba-surface-1); color: var(--cnba-muted); cursor: default; } .cnba-btn-sm { padding: 7px 10px; font-size: 10.5px; } .cnba-chip { background: var(--cnba-surface-1); border: 1px solid var(--cnba-border); color: var(--cnba-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: all var(--cnba-transition); } .cnba-chip:hover { border-color: rgba(255,121,0,.4); color: var(--cnba-text); } .cnba-chip.is-active { background: var(--cnba-orange, #ff7900); border-color: var(--cnba-orange, #ff7900); color: #06111f; } /* ------------------------------------------------------------------- Card */ .cnba-card { background: var(--cnba-card-bg); border: 1px solid var(--cnba-border); border-radius: var(--cnba-radius); box-shadow: 0 8px 24px rgba(15,23,42,.08); padding: 20px; transition: border-color var(--cnba-transition), transform var(--cnba-transition); min-width: 0; } body[data-theme="dark"] .cnba-card { box-shadow: 0 8px 24px rgba(0,0,0,.15); } .cnba-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .cnba-card-title { font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin: 0; position: relative; padding-bottom: 8px; } .cnba-card-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--cnba-orange, #ff7900); } .cnba-card-link { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--cnba-orange, #ff7900); text-decoration: none; } .cnba-card-link:hover { text-decoration: underline; } .cnba-card-link-static { color: var(--cnba-muted); cursor: default; } .cnba-card-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cnba-muted); margin-bottom: 10px; } .cnba-team-initials { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; } .cnba-team-initials-lg { width: 56px; height: 56px; font-size: 16px; flex-shrink: 0; } /* -------------------------------------------------------------------- Hero */ /* Intentionally always dark (photo-backed masthead) — not themed, see file header note. */ .cnba-hero { position: relative; min-height: 460px; background-color: #06111f; background-image: var(--cnba-hero-bg, none); background-size: cover; background-position: center; display: flex; align-items: center; color: #ffffff; } .cnba-hero.has-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,12,24,.96) 0%, rgba(3,12,24,.82) 38%, rgba(3,12,24,.35) 70%, rgba(3,12,24,.65) 100%); } .cnba-hero.no-image { background: radial-gradient(circle at 15% 20%, #12263a 0%, #06111f 60%); } .cnba-hero-inner { position: relative; z-index: 1; max-width: var(--cnba-max-width); margin: 0 auto; width: 100%; padding: 48px 20px; display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px, .9fr); gap: var(--cnba-gap-lg); align-items: start; } .cnba-hero-badge { font-size: 32px; margin-bottom: 8px; } .cnba-hero-title { font-size: clamp(40px, 6vw, 64px); font-weight: 800; margin: 0 0 4px; line-height: 1; color: #ffffff; } .cnba-hero-subtitle { font-size: 18px; color: #d7dee6; margin: 0 0 6px; } .cnba-hero-season { color: var(--cnba-orange, #ff7900); font-weight: 700; font-size: 15px; margin: 0 0 14px; } .cnba-hero-description { color: #b7c2cf; max-width: 520px; margin: 0 0 24px; font-size: 14px; } .cnba-hero-info-cards { display: flex; gap: var(--cnba-gap-sm); flex-wrap: wrap; } .cnba-hero-info-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--cnba-radius-sm); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 130px; } .cnba-hero-info-icon { font-size: 16px; } .cnba-hero-info-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #b7c2cf; } .cnba-hero-info-value { font-weight: 700; font-size: 13.5px; color: #ffffff; } .cnba-hero-right { display: flex; flex-direction: column; gap: var(--cnba-gap-sm); } .cnba-hero-right .cnba-card { background: rgba(13,27,42,.85); backdrop-filter: blur(2px); border-color: rgba(255,255,255,.1); padding: 16px; color: #ffffff; box-shadow: none; } .cnba-hero-right .cnba-card-eyebrow { color: #b7c2cf; } .cnba-favorite-body { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .cnba-favorite-empty { font-size: 13px; color: #b7c2cf; margin: 0 0 10px; } .cnba-favorite-btn { width: 100%; } .cnba-team-picker { margin-top: 12px; max-height: 220px; overflow-y: auto; display: grid; gap: 4px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; } .cnba-team-picker-item { display: flex; align-items: center; gap: 8px; background: transparent; border: none; color: #ffffff; font-size: 13px; padding: 6px 4px; border-radius: 4px; cursor: pointer; text-align: left; } .cnba-team-picker-item:hover { background: rgba(255,255,255,.08); } .cnba-next-game-body { margin-bottom: 10px; } .cnba-next-game-teams { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; margin-bottom: 4px; color: #ffffff; } .cnba-next-game-vs { font-size: 12px; color: #b7c2cf; font-weight: 500; } .cnba-next-game-meta { color: #b7c2cf; font-size: 13px; } .cnba-next-game-venue { color: #b7c2cf; font-size: 12px; } .cnba-next-game-card .cnba-btn { width: 100%; margin-top: 4px; } /* ------------------------------------------------------------------- Nav */ .cnba-nav-bar { position: sticky; top: var(--wp-admin--admin-bar--height, 0); z-index: 50; background: var(--cnba-navbar-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--cnba-border); display: flex; align-items: center; justify-content: space-between; gap: var(--cnba-gap); padding: 0 20px; } .cnba-nav { display: flex; gap: 4px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .cnba-nav::-webkit-scrollbar { display: none; } .cnba-nav-link { display: inline-block; padding: 14px 12px; font-size: 13px; font-weight: 700; color: var(--cnba-muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--cnba-transition), border-color var(--cnba-transition); } .cnba-nav-link:hover, .cnba-nav-link.is-active { color: var(--cnba-text); border-color: var(--cnba-orange, #ff7900); } .cnba-season-select-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .cnba-season-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--cnba-muted); font-weight: 700; } .cnba-season-select { background: var(--cnba-surface-1); border: 1px solid var(--cnba-border); color: var(--cnba-text); border-radius: var(--cnba-radius-sm); padding: 6px 10px; font-size: 13px; font-weight: 700; } /* --------------------------------------------------------------- Grids */ .cnba-main-grid, .cnba-secondary-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: var(--cnba-gap-lg); margin-top: var(--cnba-gap-lg); align-items: start; } .cnba-quaternary-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.85fr); gap: var(--cnba-gap-lg); margin-top: var(--cnba-gap-lg); align-items: start; } /* Grid items default to min-width:auto, so a wide unconstrained table/scroller inside a card can grow past its track and visually spill into the next column ("Classificação ficando por cima de Playoffs" — 2026-08 feedback). min-width:0 lets the item shrink to its track instead. */ .cnba-main-grid > *, .cnba-secondary-grid > *, .cnba-quaternary-grid > * { min-width: 0; } .cnba-teams-card, .cnba-leaders-card { margin-top: var(--cnba-gap-lg); } .cnba-history-stack { display: flex; flex-direction: column; gap: var(--cnba-gap-lg); margin-top: var(--cnba-gap-lg); } /* ----------------------------------------------------------- Games / cards */ .cnba-games-date-filter, .cnba-games-status-filter, .cnba-teams-filter { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .cnba-games-status-filter { margin-bottom: 16px; } .cnba-games-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--cnba-gap-sm); } .cnba-games-list-item[data-cnba-status] { display: block; } .cnba-game-card { background: var(--cnba-surface-1); border: 1px solid var(--cnba-border); border-radius: var(--cnba-radius); padding: 14px; transition: border-color var(--cnba-transition), transform var(--cnba-transition); min-width: 0; } .cnba-game-card:hover { border-color: rgba(255,121,0,.3); transform: translateY(-2px); } .cnba-game-time { font-size: 13px; font-weight: 700; color: var(--cnba-muted); margin-bottom: 8px; } .cnba-game-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; margin-bottom: 8px; } .cnba-game-badge--live { background: rgba(239,68,68,.15); color: #ef4444; } .cnba-game-badge--final { background: var(--cnba-surface-2); color: var(--cnba-muted); } .cnba-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; display: inline-block; animation: cnba-pulse 1.4s infinite; } @keyframes cnba-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } } .cnba-game-clock { font-size: 11px; color: var(--cnba-muted); margin-bottom: 8px; } .cnba-game-teams { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .cnba-game-team { display: flex; align-items: center; gap: 8px; } .cnba-game-team-name { font-size: 13px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cnba-game-score { font-size: 18px; font-weight: 800; } .cnba-game-vs { font-size: 10px; color: var(--cnba-muted); text-transform: uppercase; padding-left: 40px; } .cnba-game-actions { display: flex; gap: 6px; } .cnba-game-actions .cnba-btn { flex: 1; } /* -------------------------------------------------------------- NBA Agora */ .cnba-live-summary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .cnba-live-summary-list li { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--cnba-border); padding-bottom: 10px; } .cnba-live-summary-list li:last-child { border-bottom: none; padding-bottom: 0; } .cnba-live-summary-label { font-size: 11.5px; color: var(--cnba-muted); text-transform: uppercase; letter-spacing: .03em; } .cnba-live-summary-value { font-size: 15px; font-weight: 700; } /* ------------------------------------------------------------- Standings */ .cnba-standings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cnba-gap-lg); min-width: 0; } .cnba-standings-col { min-width: 0; } .cnba-standings-conf-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--cnba-muted); margin: 0 0 10px; } .cnba-table-scroll { overflow-x: auto; max-width: 100%; } .cnba-standings-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .cnba-standings-table th { text-align: left; color: var(--cnba-muted); font-weight: 700; font-size: 10.5px; text-transform: uppercase; padding: 6px 6px; border-bottom: 1px solid var(--cnba-border); white-space: nowrap; } .cnba-standings-table td { padding: 8px 6px; border-bottom: 1px solid var(--cnba-border); white-space: nowrap; } .cnba-col-team { display: flex; align-items: center; gap: 6px; min-width: 130px; white-space: nowrap; } .cnba-standings-row.cnba-playoff-playoff td:first-child { box-shadow: inset 3px 0 0 var(--cnba-green); } .cnba-standings-row.cnba-playoff-play-in td:first-child { box-shadow: inset 3px 0 0 var(--cnba-yellow); } .cnba-standings-row.cnba-playoff-out td:first-child { box-shadow: inset 3px 0 0 var(--cnba-neutral-indicator); } .cnba-standings-legend { display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--cnba-muted); } .cnba-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; } .cnba-legend-dot.cnba-playoff-playoff { background: var(--cnba-green); } .cnba-legend-dot.cnba-playoff-play-in { background: var(--cnba-yellow); } .cnba-legend-dot.cnba-playoff-out { background: var(--cnba-neutral-indicator); } /* --------------------------------------------------------------- Playoffs */ .cnba-playoffs-rounds { display: grid; gap: 16px; } .cnba-playoffs-round-title { font-size: 11px; text-transform: uppercase; color: var(--cnba-muted); margin: 0 0 8px; letter-spacing: .04em; } .cnba-playoffs-series { background: var(--cnba-surface-1); border-radius: var(--cnba-radius-sm); padding: 8px 10px; margin-bottom: 6px; } .cnba-playoffs-team { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; color: var(--cnba-muted); } .cnba-playoffs-team.is-winning { color: var(--cnba-text); font-weight: 700; } /* ---------------------------------------------------------------- Leaders */ .cnba-leaders-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; } .cnba-leaders-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(200px,.7fr); gap: var(--cnba-gap-lg); align-items: center; } .cnba-leader-featured { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, rgba(255,121,0,.14), transparent); border-radius: var(--cnba-radius); padding: 16px; } .cnba-leader-rank { font-size: 22px; font-weight: 800; color: var(--cnba-orange, #ff7900); } .cnba-leader-featured img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .cnba-leader-name { display: block; font-size: 20px; font-weight: 800; } .cnba-leader-team { display: block; font-size: 12.5px; color: var(--cnba-muted); } .cnba-leader-value { margin-left: auto; text-align: right; } .cnba-leader-number { display: block; font-size: 30px; font-weight: 800; } .cnba-leader-unit { font-size: 11px; color: var(--cnba-muted); text-transform: uppercase; } .cnba-leader-rest { list-style: none; margin: 0; padding: 0; counter-reset: cnba-rank 1; display: grid; gap: 8px; } .cnba-leader-rest li { display: flex; align-items: center; gap: 8px; font-size: 13px; } .cnba-leader-rest li::before { counter-increment: cnba-rank; content: counter(cnba-rank) 'º'; color: var(--cnba-muted); font-weight: 700; width: 22px; } .cnba-leader-rest-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cnba-leader-rest-team { color: var(--cnba-muted); font-size: 11.5px; } .cnba-leader-rest-value { font-weight: 700; } /* ------------------------------------------------------------------ Teams */ .cnba-teams-scroller { display: flex; gap: var(--cnba-gap-sm); overflow-x: auto; padding-bottom: 6px; } .cnba-team-tile { flex: 0 0 auto; width: 108px; background: var(--cnba-surface-1); border: 1px solid var(--cnba-border); border-radius: var(--cnba-radius); padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: border-color var(--cnba-transition), transform var(--cnba-transition); } .cnba-team-tile:hover { border-color: rgba(255,121,0,.3); transform: translateY(-2px); } .cnba-team-tile img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; } .cnba-team-tile-name { font-size: 12.5px; } .cnba-team-tile-city { font-size: 10.5px; color: var(--cnba-muted); } /* -------------------------------------------------------- Champions/records/legends */ /* All three render as full-width horizontal scrollers, stacked (see .cnba-history-stack) — Maiores Campeões and Recordes moved above Lendas per 2026-08 feedback. */ .cnba-champions-scroller { display: flex; gap: var(--cnba-gap-sm); overflow-x: auto; padding-bottom: 6px; } .cnba-champion-tile { flex: 0 0 auto; width: 118px; background: var(--cnba-surface-1); border: 1px solid var(--cnba-border); border-radius: var(--cnba-radius); padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; position: relative; } .cnba-champion-tile-rank { position: absolute; top: 8px; left: 10px; font-size: 11px; font-weight: 800; color: var(--cnba-muted); } .cnba-champion-tile img { width: 44px; height: 44px; object-fit: contain; margin-top: 8px; flex-shrink: 0; } .cnba-champion-tile-name { font-size: 12.5px; margin-top: 2px; } .cnba-champion-tile-titles { font-size: 11px; color: var(--cnba-orange, #ff7900); font-weight: 700; } .cnba-records-scroller { display: flex; gap: var(--cnba-gap-sm); overflow-x: auto; padding-bottom: 6px; } .cnba-record-tile { flex: 0 0 auto; width: 180px; background: var(--cnba-surface-1); border: 1px solid var(--cnba-border); border-radius: var(--cnba-radius); padding: 14px; } .cnba-record-tile-label { font-size: 11px; color: var(--cnba-muted); margin-bottom: 6px; min-height: 28px; } .cnba-record-tile-value { font-size: 22px; font-weight: 800; margin-bottom: 4px; } .cnba-record-tile-value span { font-size: 11px; color: var(--cnba-muted); font-weight: 500; margin-left: 4px; } .cnba-record-tile-holder { font-size: 12.5px; font-weight: 600; } .cnba-records-active-badge { font-size: 9px; text-transform: uppercase; background: rgba(34,197,94,.15); color: #16a34a; padding: 1px 6px; border-radius: 999px; margin-left: 4px; } body[data-theme="dark"] .cnba-records-active-badge { color: #4ade80; } .cnba-legends-scroller { display: flex; gap: var(--cnba-gap-sm); overflow-x: auto; padding: 4px 4px 10px; } .cnba-legend-tile { flex: 0 0 auto; width: 116px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; } .cnba-legend-tile img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; } .cnba-legend-name { font-size: 12.5px; } .cnba-legend-period, .cnba-legend-team { font-size: 10.5px; color: var(--cnba-muted); } /* ------------------------------------------------------- Brasileiros/Lesões */ .cnba-brazilians-scroller { display: flex; gap: var(--cnba-gap-sm); overflow-x: auto; padding-bottom: 6px; } .cnba-brazilian-tile { flex: 0 0 auto; width: 190px; background: var(--cnba-surface-1); border: 1px solid var(--cnba-border); border-radius: var(--cnba-radius); padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .cnba-brazilian-tile img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .cnba-brazilian-name { font-size: 13px; } .cnba-brazilian-period, .cnba-brazilian-teams { font-size: 10.5px; color: var(--cnba-muted); } .cnba-brazilian-bio { font-size: 11px; color: var(--cnba-muted); margin: 4px 0 0; line-height: 1.4; } .cnba-injuries-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .cnba-injuries-table th { text-align: left; color: var(--cnba-muted); font-weight: 700; font-size: 10.5px; text-transform: uppercase; padding: 6px; border-bottom: 1px solid var(--cnba-border); white-space: nowrap; } .cnba-injuries-table td { padding: 8px 6px; border-bottom: 1px solid var(--cnba-border); white-space: nowrap; } .cnba-injuries-table .cnba-col-team { min-width: 160px; } .cnba-injuries-table .cnba-col-team img { border-radius: 50%; object-fit: cover; } .cnba-injury-badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--cnba-surface-2); } .cnba-injury-status-out .cnba-injury-badge { background: rgba(220,38,38,.15); color: var(--cnba-red); } .cnba-injury-status-questionable .cnba-injury-badge { background: rgba(202,138,4,.15); color: var(--cnba-yellow); } /* -------------------------------------------------------------------- News */ .cnba-season-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; } .cnba-season-summary-label { display: block; font-size: 10.5px; text-transform: uppercase; color: var(--cnba-muted); } .cnba-season-summary-value { display: block; font-weight: 700; font-size: 13.5px; } .cnba-season-picker-wrap { margin-bottom: 4px; } .cnba-season-picker { width: 100%; background: var(--cnba-surface-1); border: 1px solid var(--cnba-border); color: var(--cnba-text); border-radius: var(--cnba-radius-sm); padding: 8px 10px; font-weight: 700; } .cnba-news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .cnba-news-item { display: flex; gap: 10px; text-decoration: none; color: inherit; } .cnba-news-item img { border-radius: var(--cnba-radius-sm); object-fit: cover; flex-shrink: 0; } .cnba-news-item-body { display: flex; flex-direction: column; justify-content: center; gap: 2px; } .cnba-news-item-title { font-size: 13px; font-weight: 700; line-height: 1.3; } .cnba-news-item:hover .cnba-news-item-title { color: var(--cnba-orange, #ff7900); } .cnba-news-item-meta { font-size: 11px; color: var(--cnba-muted); } /* --------------------------------------------------------------- Extra cards */ .cnba-extra-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cnba-gap); margin-top: var(--cnba-gap-lg); } .cnba-extra-card { background: var(--cnba-card-bg); border: 1px solid var(--cnba-border); border-radius: var(--cnba-radius); padding: 18px; text-decoration: none; color: var(--cnba-text); display: flex; flex-direction: column; gap: 4px; transition: border-color var(--cnba-transition), transform var(--cnba-transition); } .cnba-extra-card:hover { border-color: rgba(255,121,0,.35); transform: translateY(-2px); } .cnba-extra-card-icon { font-size: 20px; } .cnba-extra-card strong { font-size: 13px; display: flex; align-items: center; gap: 6px; } .cnba-extra-card span:last-child { font-size: 11.5px; color: var(--cnba-muted); } /* ---------------------------------------------------------------- Tablet */ @media (max-width: 1024px) { .cnba-hero-inner { grid-template-columns: 1fr; } .cnba-main-grid, .cnba-secondary-grid, .cnba-quaternary-grid { grid-template-columns: 1fr; } .cnba-leaders-body { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- Mobile */ @media (max-width: 767px) { .cnba-container { padding: 0 14px 40px; } .cnba-hero { min-height: 0; } .cnba-hero-inner { padding: 32px 16px; } .cnba-hero-title { font-size: 40px; } .cnba-standings-grid { grid-template-columns: 1fr; } .cnba-extra-cards { grid-template-columns: 1fr 1fr; } .cnba-games-list { grid-template-columns: 1fr; } .cnba-col-secondary { display: none; } .cnba-nav-bar { flex-direction: column; align-items: stretch; padding: 10px 14px; gap: 8px; } .cnba-season-select-wrap { justify-content: flex-end; } } @media (max-width: 430px) { .cnba-hero-title { font-size: 32px; } .cnba-extra-cards { grid-template-columns: 1fr; } .cnba-hero-info-cards { flex-direction: column; } }