/* --------------------------------------------------------------------------- NASTAR leaderboard component — skiracing.nastar.com. MIRROR of the leaderboard, racer-photo and own-row blocks of /home/nastar_com/public_html/theme/css/home.css. Same class names, same values, same reasoning — so the leaderboard on this site's Rankings page and the one on the nastar.com homepage are the same component, not two look-alikes. Kept in step the same way theme_2026/css/nastar.css is kept in step with its counterpart. Every colour, space and radius is a token from theme_2026/css/nastar.css, so this cannot drift from the approved theme. Two deliberate differences from home.css, both required to RENDER the same rather than to read the same (project instructions, "Identical rendered, not identical source"): 1. `rem` is replaced with the equivalent px. Legacy nastar_2019.css carries `* { font-size: 14px }`, which lands on too, so the root font here is 14px against nastar.com's 16px and rem cannot express matching sizes. Only two values were affected: the leaderboard row's rank column, 2.5rem/2rem, written here as 40px/32px. 2. A "legacy resets" section at the end. That same `* { … }` rule in nastar_2019.css sets font-family and colour on EVERY element directly, which beats inheritance regardless of specificity, and theme_2026/css/nastar.css underlines every link inside .main-container. Neither applies on nastar.com. The resets restore the intended rendering; they add nothing new. --------------------------------------------------------------------------- */ /* ----------------------------------------------------------- leaderboard */ .lb { border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--white); } /* Three distinct states, per David's reference (2026-08-20): default navy / white hover lighter blue-grey / white, hovered item only active gold / dark navy text, persistent The gap lets the container colour through as hairline dividers, which also separates the two rows the tabs wrap onto at phone widths. */ .lb__tabs { display: flex; flex-wrap: wrap; gap: 1px; background: var(--nastar-gold); } .lb__tab { flex: 1 1 auto; min-height: var(--tap-min); padding: var(--space-3) var(--space-4); border: 0; background: var(--nastar-blue-dark); color: var(--white); font: 700 14px/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color .12s ease, color .12s ease; } @media (prefers-reduced-motion: reduce) { .lb__tab { transition: none; } } /* `:not([aria-pressed="true"])` is the whole behavioural rule: hover must never visually replace or obscure the selected family. Both the server- rendered path and leaderboard.js set aria-pressed, so keying off it (rather than a class) means the two paths cannot disagree about which tab is active. */ .lb__tab:hover:not([aria-pressed="true"]) { background: var(--nastar-blue-light); color: var(--white); } .lb__tab[aria-pressed="true"] { /* Gold on navy text measures 5.08:1 — above the 4.5:1 needed at this size. */ background: var(--nastar-gold); color: var(--nastar-blue-dark); } /* Keyboard users get an equivalent, and it stays visible on the gold fill. */ .lb__tab:focus-visible { outline: 3px solid var(--white); outline-offset: -5px; } .lb__tab[aria-pressed="true"]:focus-visible { outline-color: var(--nastar-blue-dark); } .lb__controls { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: end; padding: var(--space-4) var(--space-5); background: var(--gray-100); border-bottom: 1px solid var(--gray-200); } /* `min-width: 0` overrides the flex default of `auto`, which sizes an item to its min-content. A