. ============================================================================= */ .page { max-width: 1060px; margin: 0 auto; padding: 28px 24px 60px; animation: fadeUp .22s ease; flex: 1 0 auto; /* grow to push footer down, never shrink below content */ width: 100%; display: flex; flex-direction: column; min-height: 0; } .page-header { margin-bottom: 20px; } .page-eyebrow { font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .page-title { font-size: 1.1rem; font-weight: 500; color: var(--text); letter-spacing: -.01em; margin-bottom: 3px; } .page-sub { font-size: .78rem; color: var(--muted); } /* ============================================================================= SERVER FILTER BAR Row of pill buttons for filtering by server. Hidden by default (.visible is toggled on via JS once there's more than one server to filter by). ============================================================================= */ .server-bar { display: none; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .server-bar.visible { display: flex; } .server-bar-label { font-family: var(--mono); font-size: .68rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; flex-shrink: 0; } .server-pills { display: flex; gap: 6px; flex-wrap: wrap; } .server-pill { padding: 4px 12px; font-size: .74rem; font-family: var(--mono); cursor: pointer; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: all .15s; } .server-pill:hover { color: var(--text); border-color: rgba(255,255,255,.15); } .server-pill.active { border-color: var(--accent-border); color: var(--accent); background: var(--accent-dim); } /* ============================================================================= TABS Generic tab-row pattern, reusable anywhere (leaderboard categories, profile sections, etc). ============================================================================= */ .tab-row { display: flex; gap: 2px; margin-bottom: 16px; overflow-x: auto; flex-wrap: wrap; } .tab-row::-webkit-scrollbar { height: 0; } .tab-btn { padding: 0 14px; height: 34px; font-size: .78rem; border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--muted); border-radius: 5px; white-space: nowrap; transition: color .15s, background .15s, border-color .15s; } .tab-btn:hover { color: var(--text); border-color: rgba(255,255,255,.15); } .tab-btn.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); font-weight: 500; } /* ============================================================================= PANEL / CARD (e.g. leaderboard wrapper, any boxed content section) ============================================================================= */ .lb-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; flex: 1; display: flex; flex-direction: column; min-height: 0; } .lb-meta { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border2); flex-wrap: wrap; gap: 8px; background: var(--surface2); } .lb-meta-title { font-size: .82rem; font-weight: 500; color: var(--text); letter-spacing: -.01em; } .lb-meta-note { font-family: var(--mono); font-size: .74rem; color: var(--muted); } .lb-meta-refresh { font-family: var(--mono); font-size: .72rem; color: var(--muted); } /* ============================================================================= TABLE Generic data table styling - used for leaderboards, and reusable for any other tabular data (match history, player lists, etc). ============================================================================= */ .table-scroll { overflow-x: auto; flex: 1; display: flex; flex-direction: column; } .table-scroll > table { flex-shrink: 0; } table { width: 100%; border-collapse: collapse; font-size: .84rem; } thead tr { background: var(--surface2); } th { padding: 10px 16px; text-align: left; font-family: var(--mono); font-size: .63rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); border-bottom: 1px solid var(--border2); white-space: nowrap; } th.num, td.num { text-align: right; white-space: nowrap; } th.center, td.center { text-align: center; white-space: nowrap; } tr.row-click { cursor: pointer; } tr.row-click:hover { background: rgba(255,255,255,.03); } /* Stat columns (Matches/Rank/Level/Achievements) on the player search table: no fixed widths, so a long rank name (e.g. "Lieutenant") or a large XP/ achievement number can grow the column instead of wrapping or truncating. Separated by generous spacing, not ruled lines - vertical gridlines between every column is what made this read as a spreadsheet rather than a page. */ .stat-th, td.stat-td { text-align: center; white-space: nowrap; padding-left: 22px; padding-right: 22px; } td.stat-td-platform .platform-icon { width: 30px; height: 30px; border-radius: 6px; padding: 0; } td.stat-td-platform .platform-icon.platform-unknown { font-size: .8rem; border: 1px dashed rgba(255,255,255,.18); } /* Steam is the only clickable variant here — at rest it should look identical to the inert (non-clickable) icons next to it: no border, no background. Only on hover does it reveal the clickable affordance. Border must stay 1px solid transparent (not `none`) at rest so the existing a.platform-icon.steam:hover rule — which only swaps border-color/background, not border-width — has something to reveal without the icon jumping size on hover. */ td.stat-td-platform a.platform-icon.steam { border: 1px solid transparent; background: transparent; } td.stat-td-platform a.platform-icon.steam:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); } td { padding: 11px 16px; border-bottom: 1px solid var(--border2); vertical-align: middle; } tr:last-child td { border-bottom: none; } tr:hover td { background: rgba(255,255,255,.025); } /* Rank column + medal badges for top 3 */ td.rank { font-family: var(--mono); font-size: .76rem; color: var(--muted2); width: 52px; text-align: center; } .rank-medal { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-family: var(--mono); font-weight: 500; font-size: .74rem; } .rank-1 { background: rgba(197,146,42,.12); color: var(--gold); border: 1px solid rgba(197,146,42,.35); } .rank-2 { background: rgba(122,136,152,.1); color: var(--silver); border: 1px solid rgba(122,136,152,.3); } .rank-3 { background: rgba(138,92,46,.12); color: var(--bronze); border: 1px solid rgba(138,92,46,.3); } /* Player cell: avatar + name + hover-revealed action buttons. Reusable anywhere a player needs to be displayed inline (tables, lists). */ .player-cell { display: flex; align-items: center; gap: 16px; } .lb-wrap .player-cell { gap: 10px; } .list-av { width: 44px; height: 44px; /* No rounded corners on avatars anywhere in the product — keep this square. */ border-radius: 0; border: 1px solid rgba(255,255,255,.1); background: var(--surface2); object-fit: cover; flex-shrink: 0; display: block; } .lb-wrap .list-av { width: 44px; height: 44px; } @media (max-width: 640px) { .list-av { width: 32px; height: 32px; } .pid-mini-wrap { width: 115px; } } .player-name { font-weight: 500; font-size: .86rem; color: var(--text); text-decoration: none; transition: color .15s; /* Was unset, inheriting the browser's default line-height (~1.5), which padded extra whitespace under the text on top of player-id-block's own gap below — the id/icon row read as farther from the name than the gap value alone suggested. 1.2 matches what .results-panel already sets on this same element (see override further down); pulled up here so every use of .player-name gets it, not just the search results panel. */ line-height: 1.2; } /* Player identity block: name on top, platform ID + copy/steam buttons underneath as a quiet secondary line. Buttons stay small and low-contrast at rest, matching the row's baseline chrome, and only sharpen on hover - same principle as .act-btns but permanently visible (not hover-revealed), since the ID is core identifying info, not an incidental action. */ .player-id-block { display: flex; flex-direction: column; /* Was 3px. .results-panel already tightens this exact relationship to 1px (see override further down) — brought the base value in line so every page showing a name-over-id/icon block gets the same tight spacing, not just the search results panel. */ gap: 1px; min-width: 0; } .player-sub { display: flex; align-items: center; gap: 5px; min-width: 0; } .results-panel .act-btn-mini { width: 32px; height: 32px; padding: 4px; position: relative; top: -1px; } .results-panel .act-btn-mini svg { width: 24px; height: 24px; } .results-panel .player-sub { gap: 12px; } .pid-mini-wrap { /* Fixed-width column so the platform icon that follows always starts at the same x on every row, regardless of that row's ID string length - the pill itself (.pid-mini, nested inside) still hugs its own text rather than stretching to fill this. NOTE: this only lines up correctly because .pid-mini has font-variant-numeric: tabular-nums - if that's ever removed, same-length IDs will render at different pixel widths (Inter is proportional) and this fixed width will stop being reliable. Width bumped up from the old 158px: tabular digits in Inter render wider per-character than the previous monospace font did, so the full "SteamNWI:xxxxxxxxxxxxxxxxx" string was landing right at (sometimes past) the old box edge, leaving ~0px of breathing room before the platform icon that follows. */ display: inline-block; width: 186px; flex-shrink: 0; } .pid-mini { font-family: var(--mono); /* Inter is proportional (a "1" is narrower than an "8"), unlike the old monospace stack --mono used to point to. The platform icon after this pill relies on every same-length ID rendering at the same pixel width (see .pid-mini-wrap's fixed width below) to line up consistently - tabular-nums forces Inter's digits to a uniform width so that still holds, without reintroducing a real monospace font (and its slashed zeros). */ font-variant-numeric: tabular-nums; font-size: .68rem; color: var(--muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: color .12s, background .12s; max-width: 100%; width: max-content; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 4px; padding: 1px 6px; } .pid-mini:hover { color: var(--text); background: rgba(255,255,255,.07); } .pid-mini.copied { color: #6fcf97; } .act-btn-mini { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 4px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--muted2); cursor: pointer; flex-shrink: 0; transition: color .12s, border-color .12s, background .12s; } .act-btn-mini:hover { color: var(--text); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); } .act-btn-mini.copy.copied { color: #6fcf97; border-color: rgba(111,207,151,.35); background: rgba(111,207,151,.08); } .act-btn-mini svg { width: 15px; height: 15px; } a.act-btn-mini.steam:hover { color: #a0b8cc; border-color: rgba(160,184,204,.3); background: rgba(160,184,204,.08); } /* Numeric cell color variants - apply alongside td.num */ td.num { font-family: var(--mono); font-size: .86rem; font-weight: 500; letter-spacing: -.01em; } td.num.hi, td.center.hi { color: var(--text); } /* primary stat, e.g. kills */ td.num.lo, td.center.lo { color: var(--muted); } /* secondary stat, e.g. deaths */ td.num.em, td.center.em { color: var(--text); font-weight: 600; } /* emphasized-but-neutral stat */ td.num.kd, td.center.kd { color: var(--green); } /* ratio-style positive stat */ /* Level badge (e.g. XP leaderboard) */ .level-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; background: var(--accent-dim); border: 1px solid var(--accent-border); font-family: var(--mono); font-size: .68rem; color: var(--accent); } .title-str { font-family: var(--mono); font-size: .72rem; color: var(--muted); } /* Rank icon (chevron/star badge) + level pill, shown together in tables. Icon source assets are arbitrary native resolution (pre-generated webp, see build_rank_assets.py) - always constrain display size here, never rely on the asset's own dimensions. */ .rank-cell { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .rank-icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; display: block; } @media (max-width: 640px) { .rank-icon { width: 18px; height: 18px; } } /* Rank display: two rows, no box/border - icon + tier name on top, level/xp underneath. Sits inline in the table like any other cell. Tier name and level/xp share the same mono font as the rest of the table (.pid, td.num, etc.) rather than a heavier display font. */ .rank-block { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; } .rank-block-top { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .rank-inline-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; display: block; } .rank-inline-tier { font-family: var(--mono); font-size: .86rem; font-weight: 500; color: var(--text); line-height: 1; } .rank-inline-meta { font-family: var(--mono); font-size: .68rem; color: var(--muted); line-height: 1; } .level-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; } .level-lv { font-weight: 700; font-size: .98rem; letter-spacing: -.01em; color: var(--text); line-height: 1.2; } .level-xp { font-size: .96rem; font-weight: 500; color: var(--text); line-height: 1.2; } /* Achievements cell: count / total on one line, small progress bar below - replaces the old bare "X / 128" text so partial progress reads at a glance. */ .ach-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; text-align: center; } .ach-count { display: block; width: 100%; text-align: center; font-weight: 700; font-size: .98rem; color: var(--text); line-height: 1; } .ach-count small { font-weight: 500; font-size: .78rem; color: var(--muted2); margin-left: 1px; } .ach-bar { display: block; width: 52px; height: 5px; border-radius: 2.5px; background: var(--surface2); overflow: hidden; } .ach-bar i { display: block; height: 100%; background: var(--green); } @media (max-width: 640px) { .rank-inline-icon { width: 22px; height: 22px; } .rank-inline-tier { font-size: .76rem; } .rank-inline-meta { font-size: .62rem; } } /* Platform ID cell: platform icon (links out where possible) + copyable ID. Icon is a link for platforms we can deep-link (Steam); a plain non-link glyph otherwise, so the column layout stays consistent either way. */ .platform-cell { display: flex; align-items: center; justify-content: center; gap: 10px; } .platform-actions { display: flex; align-items: center; gap: 6px; } .platform-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 5px; color: var(--text); flex-shrink: 0; transition: color .15s, border-color .15s, background .15s; } .platform-icon img, .act-btn-mini img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 3px; } a.platform-icon.steam { border: 1px solid rgba(255,255,255,.14); background: var(--surface2); } a.platform-icon.steam:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); } /* Non-Steam platforms (Epic/Windows today) show their real icon but can't deep-link anywhere yet - keep them visually quiet and non-interactive rather than styled like a clickable control. Still carries the same transparent 1px border as the Steam variant above so the icon box is the exact same size either way and every row's badge lines up in the same spot instead of the borderless ones sitting inset. */ span.platform-icon.not-clickable, span.act-btn-mini.not-clickable { cursor: default; opacity: .75; border: 1px solid transparent; } span.platform-icon.not-clickable:hover, span.act-btn-mini.not-clickable:hover { border-color: transparent; background: transparent; opacity: .75; } .platform-icon.platform-unknown { font-family: var(--mono); font-size: .7rem; border: 1px dashed rgba(255,255,255,.18); } /* ============================================================================= LOADING / EMPTY / ERROR STATES Generic centered state box - reuse for any async content area. ============================================================================= */ @keyframes spin { to { transform: rotate(-360deg); } } .state-box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 52px 20px; gap: 10px; flex: 1; min-height: min(60vh, 480px); } /* Accent-filled spinner: solid accent color masked to spinner_thumb.webp's shape, rather than a bordered ring. Using mask-image (not a plain or background-image) so the glyph's fill tracks var(--accent) instead of being baked into the asset's own pixel colors - same trick as any other single-color icon that needs to follow the theme. */ .spinner { width: 20px; height: 20px; background-color: var(--accent); -webkit-mask-image: url('https://api.joinambush.com/static/misc/spinner_thumb.webp'); mask-image: url('https://api.joinambush.com/static/misc/spinner_thumb.webp'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; animation: spin .7s linear infinite; } .state-icon { font-size: 1.4rem; color: var(--muted2); } .state-msg { font-family: var(--mono); font-size: .76rem; color: var(--muted); text-align: center; } .state-err .state-msg { color: #e05555; } /* error variant, add class="state-box state-err" */ /* ============================================================================= FOOTER Loaded via /partials/footer.js into #footer-placeholder. ============================================================================= */ footer { border-top: 1px solid var(--border); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: .68rem; color: var(--muted2); flex-shrink: 0; } footer a { color: var(--muted2); text-decoration: none; transition: color .15s; } footer a:hover { color: var(--accent); } /* ── Shared animations ───────────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================================= ACTION BUTTONS (e.g. "open Steam profile", "copy ID") Small icon buttons that appear inline with a row, revealed on hover by default; add .always to keep them visible without hovering. ============================================================================= */ .act-btns { display: flex; align-items: center; gap: 3px; opacity: 0; pointer-events: none; transition: opacity .12s; } tr:hover .act-btns { opacity: 1; pointer-events: auto; } .act-btns.always { opacity: 1; pointer-events: auto; } .act-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 26px; width: 26px; padding: 0; border-radius: 5px; border: 1px solid rgba(255,255,255,.14); background: var(--surface2); color: var(--text); font-family: var(--mono); font-size: .62rem; letter-spacing: .02em; text-decoration: none; cursor: pointer; flex-shrink: 0; transition: color .12s, border-color .12s, background .12s; white-space: nowrap; } .act-btn:hover { color: var(--text); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); } .act-btn.steam:hover { color: #a0b8cc; border-color: rgba(160,184,204,.35); background: rgba(160,184,204,.08); } .act-btn.copy.copied { color: #6fcf97; border-color: rgba(111,207,151,.4); background: rgba(111,207,151,.1); } /* ============================================================================= RESPONSIVE Add page-specific breakpoints below this shared block, or in a page's own