/* Shared chrome for /test/ pages — top banner with league name + nav strip, plus the SSR-only pages (teams, schedule, leaders) that aren't React-built. The custom property defaults below mirror src/shared/styles/base.scss; the per-league theme.php emits a higher-specificity override before this loads. */ :root { --brand-primary: #de1c34; --brand-primary-dark: #b51729; --brand-dark: #000333; --brand-on-primary: #ffffff; --bg: #f3f4f6; --text: #111827; --muted: #6b7280; --border: #e5e7eb; --row-stripe: #fafafb; --row-hover: #fff5f7; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* On the full-site shells the scorebug and nav are wrapped in .site-top so they pin to the viewport as a single unit. This matters on the schedule page, whose widget auto-scrolls the window to today's game on load — without a sticky wrapper the scorebug would scroll out of view. The wrapper owns the stickiness here; the nested .site-nav reverts to static so the two don't fight over top: 0. */ .site-top { position: sticky; top: 0; z-index: 100; } .site-top .site-nav { position: static; z-index: auto; } /* Reserve the scorebug's height so hydration doesn't shove the page down. The CDN bundle mounts a frame or two after first paint; #scorebug-root is empty until then. The strip is a single fixed-height row of cards (~6.4rem) and always renders at least a one-line status, so reserving this height eliminates the layout shift. Paint the brand-dark background so the reserved band already looks like the bar before React fills it. */ #scorebug-root { min-height: 6.5rem; background: var(--brand-dark); } .site-nav { background: var(--brand-dark); color: var(--brand-on-primary); border-bottom: 4px solid var(--brand-primary); padding: 0.7rem 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; /* Pin to the top of the viewport. position: sticky keeps it in normal flow at first paint (so the body height is correct for the React widgets' auto-scroll calculations) and then pins on scroll. The high z-index keeps it above table headers and the schedule month bars. (Pages that wrap the nav in .site-top override this to static.) */ position: sticky; top: 0; z-index: 100; } .site-nav-logo { height: 36px; width: auto; max-width: 120px; object-fit: contain; display: block; flex: 0 0 auto; } .site-nav-title { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; } .site-nav-links { display: flex; flex-wrap: wrap; gap: 1.4rem; } .site-nav-link { color: var(--brand-on-primary); text-decoration: none; opacity: 0.7; font-size: 0.95rem; padding: 0.25rem 0; border-bottom: 2px solid transparent; } .site-nav-link:hover { opacity: 1; } .site-nav-link.is-active { opacity: 1; border-bottom-color: var(--brand-primary); } /* Page wrapper used by the SSR pages (teams, schedule, leaders). The React widget pages (standings, team, player, game) lay out their own root element directly under and don't use this class. */ .site-main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1rem; } .site-h1 { font-size: 1.4rem; margin: 0 0 1rem; color: var(--brand-dark); border-bottom: 2px solid var(--brand-primary); padding-bottom: 0.4rem; } .site-h2 { font-size: 1rem; margin: 1.5rem 0 0.5rem; color: var(--brand-dark); letter-spacing: 0.04em; text-transform: uppercase; } .site-card { background: #fff; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } .site-empty { padding: 1.5rem; text-align: center; color: var(--muted); font-style: italic; } /* Generic data table — used by teams/schedule/leaders. */ .site-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; color: var(--text); } .site-table th { text-align: left; padding: 0.5rem 0.75rem; background: #fff; color: var(--brand-dark); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); white-space: nowrap; } .site-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); } .site-table tbody tr:nth-child(even) td { background: var(--row-stripe); } .site-table tbody tr:hover td { background: var(--row-hover); } .site-table tbody tr:last-child td { border-bottom: none; } .site-table .num { text-align: right; font-variant-numeric: tabular-nums; } .site-table .center { text-align: center; } .site-table .bold { font-weight: 700; } .site-table a { color: var(--brand-dark); text-decoration: none; } .site-table a:hover { color: var(--brand-primary); } .site-team-logo { width: 1.5rem; height: 1.5rem; vertical-align: middle; margin-right: 0.4rem; object-fit: contain; } /* Teams grid (cards) — alternative layout for the teams page. */ .site-teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; } .site-team-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; background: #fff; border: 1px solid var(--border); border-radius: 4px; text-decoration: none; color: var(--text); } .site-team-card:hover { border-color: var(--brand-primary); background: var(--row-hover); } .site-team-card .site-team-logo { width: 2.2rem; height: 2.2rem; margin: 0; } .site-team-card .site-team-name { font-weight: 600; color: var(--brand-dark); } /* League home page — news feed. */ .site-nav-logo-link, .site-nav-title-link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; } .home-news-list { display: flex; flex-direction: column; gap: 1.5rem; } .home-news-item { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.25rem 1.25rem; } .home-news-image { display: block; width: 100%; max-height: 360px; object-fit: cover; border-radius: 3px; margin: -0.25rem 0 1rem; } .home-news-title { font-size: 1.25rem; margin: 0 0 0.25rem; color: var(--brand-dark); } .home-news-meta { color: var(--muted); font-size: 0.8rem; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; } .home-news-body { font-size: 0.95rem; line-height: 1.5; color: var(--text); } .home-news-body p { margin: 0 0 0.75rem; } .home-news-body p:last-child { margin-bottom: 0; } .home-news-body a { color: var(--brand-primary); } .home-news-body img { max-width: 100%; height: auto; } .home-news-body ul, .home-news-body ol { padding-left: 1.5rem; margin: 0 0 0.75rem; }