/* ============================================================ PANEL TOP SITE-NAVIGATION (#c2sitenav) — customer panel + Death Star. Markup: themes/epona/tpl/panel-sitenav.tpl (one source, both panels). Behavior: js/sspanel/panel-sitenav.js. This is the TOP nav. The tab rail under it (the panel submenu on the customer side, .dsv2-rail on the Death Star) is the SUB nav, so this row is deliberately louder: 13px/600 against the rail's 12.5px/400, near-white against #a7a7a8, full brand-row height against 46px, and a gold underline that grows out of the tab on hover. The panels inside it are built by {header_menu} — the same builder the public marketing rail uses — so their .hdrnav-* class names are shared with header-v2-preview.css. That sheet loads on the customer panel and NOT on the Death Star, so every rule here is scoped under the #c2sitenav id: an id (100) out-specifies its body.v2hdr .hdrnav-* (21) selectors, and the two panels render identically. Palette: the design contract's warm grays + gold #eaa824. --pv2-* exist under body.pnv2 and body.dsv2; every use carries a literal fallback. ============================================================ */ /* ---------- the brand row that hosts it ---------- logo | badge | site nav ......................... socials The logo's auto right-margin moves to the utility group so the nav can sit beside the mark; the logo itself does not move. */ body.v2hdr #c2brand .container.c2snav-row, body.dsv2 #c2brand .container.c2snav-row { position: relative; height: 62px; } body.v2hdr #c2brand .container.c2snav-row > .c2logo, body.dsv2 #c2brand .container.c2snav-row > .c2logo { margin-right: 14px; } body.v2hdr #c2brand .container.c2snav-row > .c2rgt, body.dsv2 #c2brand .container.c2snav-row > .c2rgt { margin-left: auto; } /* ---------- the panel badge (DEATH STAR / CONTROL PANEL) ---------- One rule for both panels so the two badges can never drift. It is a LINK to its own panel's dashboard (Ryan): with the Home tab gone, the wordmark goes to the public site and the badge goes back to the panel you are standing in. Still a on any surface that has no dashboard to point at, so both element types are styled here. */ #c2brand .c2tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid var(--pv2-gold, #eaa824); border-radius: 4px; color: var(--pv2-gold, #eaa824); font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1; white-space: nowrap; flex-shrink: 0; margin-right: 22px; text-decoration: none; } a#c2brand .c2tag, #c2brand a.c2tag { cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } #c2brand a.c2tag:hover, #c2brand a.c2tag:focus-visible { background: rgba(234, 168, 36, 0.14); border-color: var(--pv2-gold, #eaa824); color: #ffd479; text-decoration: none; } /* ============================================================ THE NAV ============================================================ */ #c2sitenav { display: flex; align-items: stretch; align-self: stretch; min-width: 0; margin: 0; padding: 0; } #c2sitenav .c2snav-item { position: relative; display: flex; align-items: stretch; min-width: 0; } /* the games mega spans the whole content rail, so its cell must not be a positioning context — the mega anchors to .c2snav-row instead */ #c2sitenav .c2snav-item.c2snav-wide { position: static; } #c2sitenav .c2snav-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 15px; background: transparent; border: 0; text-decoration: none; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .075em; text-transform: uppercase; line-height: 1; color: #d2d2d3; white-space: nowrap; min-width: 0; transition: color .14s ease, background-color .14s ease; } /* last-resort squeeze guard: a flex item defaults to min-width:auto and would rather push past its container than shrink, which is how a nav one word too wide puts a scrollbar on the whole page. Let the label ellipsis instead. */ #c2sitenav .c2snav-full, #c2sitenav .c2snav-short { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #c2sitenav .c2snav-tab > i:first-child { font-size: 13px; color: #8f8f90; transition: color .14s ease; } #c2sitenav .c2snav-tab:hover, #c2sitenav .c2snav-tab:focus, #c2sitenav .c2snav-item.open > .c2snav-tab { color: #fff; background: rgba(255, 255, 255, .04); text-decoration: none; outline: none; } #c2sitenav .c2snav-tab:hover > i:first-child, #c2sitenav .c2snav-tab:focus > i:first-child, #c2sitenav .c2snav-item.open > .c2snav-tab > i:first-child { color: var(--pv2-gold, #eaa824); } #c2sitenav .c2snav-tab:focus-visible { box-shadow: inset 0 0 0 1px var(--pv2-border-strong, #4c4c4d); } /* the gold underline grows out of the tab — the one flourish that marks this row as the top nav rather than another tab rail */ #c2sitenav .c2snav-tab::after { content: ''; position: absolute; bottom: 0; left: 50%; right: 50%; height: 2px; background: var(--pv2-gold, #eaa824); border-radius: 1px 1px 0 0; transition: left .2s cubic-bezier(.22, .61, .36, 1), right .2s cubic-bezier(.22, .61, .36, 1); } #c2sitenav .c2snav-tab:hover::after, #c2sitenav .c2snav-tab:focus::after, #c2sitenav .c2snav-item.open > .c2snav-tab::after { left: 12px; right: 12px; } #c2sitenav .c2snav-cv { font-size: 9.5px; color: #7a7a7b; margin-left: -2px; transition: transform .18s ease, color .14s ease; } #c2sitenav .c2snav-item.open .c2snav-cv { transform: rotate(180deg); color: var(--pv2-gold, #eaa824); } #c2sitenav .c2snav-short { display: none; } /* ============================================================ PANEL SURFACES (approved chrome: #252526 / #4c4c4d / 6px / deep shadow) ============================================================ */ #c2sitenav .hdrnav-mega, #c2sitenav .hdrnav-panel { position: absolute; top: 100%; left: 0; margin: 0; background: var(--pv2-raised, #252526); border: 1px solid var(--pv2-border-strong, #4c4c4d); border-radius: 0 var(--pv2-radius-lg, 6px) var(--pv2-radius-lg, 6px) var(--pv2-radius-lg, 6px); box-shadow: 0 20px 46px rgba(0, 0, 0, .6); z-index: 1200; text-align: left; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility 0s .16s; } #c2sitenav .c2snav-item.open > .hdrnav-mega, #c2sitenav .c2snav-item.open > .hdrnav-panel { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .16s ease, transform .16s ease, visibility 0s 0s; } /* A panel near the right edge anchors right so it never widens the page. A CLOSED panel is visibility:hidden, which still lays out — a fixed-width panel hanging off the right edge grows document.scrollWidth and puts a horizontal scrollbar on the whole page while nothing is even open. Two defences, because one is not enough: 1. the LAST cell is always the rightmost, so it is right-anchored in CSS from the first paint, before any script has run; 2. panel-sitenav.js re-tests every cell on load, after fonts settle and on resize, and flips any other one that would cross the edge. :last-of-type carries defence 1, not :last-child — the row ends with plain link cells (ABOUT), so the last cell that actually OWNS a panel is the last div.c2snav-item, and :last-child quietly stopped covering it the moment a link was appended after it. */ #c2sitenav .c2snav-item.c2snav-edge > .hdrnav-panel, #c2sitenav .c2snav-item:last-of-type > .hdrnav-panel, #c2sitenav .c2snav-item:last-child > .hdrnav-panel { left: auto; right: 0; border-radius: var(--pv2-radius-lg, 6px) 0 var(--pv2-radius-lg, 6px) var(--pv2-radius-lg, 6px); } /* shared section headings + footer links */ #c2sitenav .hdrnav-panel-h { font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #8a8a8b; margin: 0 0 8px; } #c2sitenav .hdrnav-panel-foot { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pv2-border, #3a3a3b); font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--pv2-gold, #eaa824); text-decoration: none; } #c2sitenav .hdrnav-panel-foot:hover { color: var(--pv2-gold-deep, #db9b15); text-decoration: none; } #c2sitenav .hdrnav-arrow { font-size: 14px; line-height: 1; transition: transform .15s ease; } #c2sitenav .hdrnav-panel-foot:hover .hdrnav-arrow { transform: translateX(3px); } /* ---------- per-game labels: ONE chip, a COLOURED vocabulary ---------- The catalog row chip IS the panel's dense-row chip — .tkv2 .tk-pill in its gold "st-answered" variant, metric for metric (10px/700, .05em, 2px 8px, 3px radius, 1px border, tinted fill). That component is what a staff member reads all day in the ticket tables, so a nav chip that copies it needs no introduction. This chip used to be gold for all three of its texts, on the argument that % OFF / NEW / POPULAR all just mean "this row is flagged". That held while there were only three texts, and stopped holding the moment the label became a real per-game field (games.menu_label): the vocabulary is now version milestones, console launches, pre-orders and new titles, which ARE different kinds of news and which the legacy menu had always coloured apart. Ryan asked for those colours back by name. The colour comes from the TYPE, never from the text, and the set is closed: new red a brand-new game (legacy label-danger) version green 1.0 / UPDATE 8 / 1.4.5 (legacy label-success) platform blue NOW ON PS5 / NOW ON PS4/5 / NOW ON XBOX (legacy label-primary) preorder amber PRE-ORDER / coming soon (legacy label-warning) offer gold DERIVED — an active offer's % OFF popular gold DERIVED — a top-8 recent seller Gold stays reserved for the two DERIVED labels, which is also the badge sitting 8px away in this same brand row (.c2tag): staff-written news is coloured, machine-inferred news is gold. Two deliberate deviations from tk-pill, both forced by a 24.25px catalog row: line-height is 1 inside a pinned 16px box instead of 1.7 (tk-pill's own 21px box made a labelled row 31px and broke the list's rhythm — 15 of 102 rows standing 6.75px taller than their neighbours), and the padding is 0 7px rather than 2px 8px. Optical alignment: a small-caps chip beside larger mixed-case text cannot be BOX-centred. Mixed-case ink has two candidate midlines — the cap band and the x-height band — and the eye reads the average. Measured live: box-centred puts the chip's cap midline 0.62px off that average and reads high (the old 8.5px chip measured -0.62px). The -0.5px nudge lands it at 0.13px. Swept -1..+1 in 0.25 steps; see the tuning table in the report. */ #c2sitenav .hdrnav-lbl { --lbl-ink: var(--pv2-gold, #eaa824); --lbl-rgb: 234, 168, 36; display: inline-flex; align-items: center; justify-content: center; position: relative; top: -0.5px; margin-left: auto; flex-shrink: 0; box-sizing: border-box; height: 16px; padding: 0 7px; font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: .05em; border-radius: 3px; white-space: nowrap; color: var(--lbl-ink); background: rgba(var(--lbl-rgb), .10); border: 1px solid rgba(var(--lbl-rgb), .4); } /* one line per type: the ink and the tint both derive from --lbl-rgb, so a new type is two values, never a new rule block */ #c2sitenav .hdrnav-lbl-new { --lbl-ink: #ff8b87; --lbl-rgb: 217, 83, 79; } #c2sitenav .hdrnav-lbl-version { --lbl-ink: #74c97a; --lbl-rgb: 92, 184, 92; } #c2sitenav .hdrnav-lbl-platform { --lbl-ink: #6fb6f0; --lbl-rgb: 71, 143, 206; } #c2sitenav .hdrnav-lbl-preorder { --lbl-ink: #f0ad4e; --lbl-rgb: 240, 173, 78; } /* SOON — the forthcoming claim. Violet because it has to be unmistakable against `version` green at chip size: those two are the pair the eye must never confuse, since one says "the game is on this version" and the other says "this is coming". Ink 5.81:1 on its own tint, matching `new`'s 5.93. */ #c2sitenav .hdrnav-lbl-soon { --lbl-ink: #b79bf0; --lbl-rgb: 122, 92, 208; } #c2sitenav .hdrnav-lbl-offer, #c2sitenav .hdrnav-lbl-popular { --lbl-ink: var(--pv2-gold, #eaa824); --lbl-rgb: 234, 168, 36; } #c2sitenav .hdrnav-glist li > a:hover .hdrnav-lbl { background: rgba(var(--lbl-rgb), .18); border-color: rgba(var(--lbl-rgb), .62); } /* ============================================================ GAME SERVERS MEGA — full content rail, sticky search, sticky footer ============================================================ */ #c2sitenav .hdrnav-mega-games { left: 15px; right: 15px; width: auto; max-width: none; padding: 0; border-radius: 0 0 var(--pv2-radius-lg, 6px) var(--pv2-radius-lg, 6px); max-height: calc(100vh - 150px); overflow-y: auto; overflow-x: hidden; } #c2sitenav .hdrnav-mega-inner { display: block; padding: 0; } /* the instant filter */ #c2sitenav .hdrnav-gsearch-wrap { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; padding: 14px 18px; background: var(--pv2-raised, #252526); border-bottom: 1px solid var(--pv2-border, #3a3a3b); } #c2sitenav .hdrnav-gsearch-wrap > i.fa { position: absolute; left: 31px; color: #8a8a8b; font-size: 13px; pointer-events: none; } #c2sitenav .hdrnav-gsearch { width: 100%; height: 38px; box-sizing: border-box; padding: 0 96px 0 36px; margin: 0; background: var(--pv2-field, #2d2d2e); border: 1px solid var(--pv2-border, #3a3a3b); border-radius: var(--pv2-radius, 4px); color: #f0f0f0; font-family: 'Open Sans', Arial, sans-serif; font-size: 13.5px; line-height: 38px; transition: border-color .14s ease, background-color .14s ease; } #c2sitenav .hdrnav-gsearch:focus { outline: none; border-color: var(--pv2-gold, #eaa824); background: #313132; } #c2sitenav .hdrnav-gsearch::placeholder { color: #7d7d7e; } #c2sitenav .hdrnav-gsearch-count { position: absolute; right: 30px; color: #8a8a8b; pointer-events: none; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } /* ---------- featured tiles — real art, corner sashes ---------- There is no FEATURED caption. It was a full-width strip (35px of height for one 62px word), then the grid's left rail — and as a rail it was taking the width the tile NAMES needed: "ARK: Survival Evolve..." and "RuneScape: Dragon..." both ellipsised at 1920. Ryan, 2026-08-01: "I want to show all the featured games with their full name", and offered the word itself as the thing to give up. Six bordered art tiles at the top of a game catalog do not need to be captioned as featured. The row is six equal columns now, and the names get every pixel the rail was holding. */ #c2sitenav .hdrnav-feat { flex: none; width: auto; border-right: 0; border-bottom: 1px solid var(--pv2-border, #3a3a3b); padding: 13px 18px 14px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: center; } #c2sitenav .hdrnav-feat-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; margin: 0; border-radius: var(--pv2-radius-lg, 6px); background: var(--pv2-panel, #212122); border: 1px solid var(--pv2-border, #3a3a3b); text-decoration: none; min-width: 0; overflow: hidden; transition: background-color .14s ease, border-color .14s ease, transform .14s ease; } /* a labelled tile reserves the corner the sash cuts across */ #c2sitenav .hdrnav-feat-row:has(.hdrnav-lbl) { padding-right: 26px; } /* no :has() -> reserve on every tile rather than let one name run under a sash */ @supports not selector(:has(*)) { #c2sitenav .hdrnav-feat-row { padding-right: 26px; } } #c2sitenav .hdrnav-feat-row:hover { background: var(--pv2-hover, #333); border-color: var(--pv2-border-strong, #4c4c4d); transform: translateY(-1px); text-decoration: none; } #c2sitenav .hdrnav-feat-art { flex: 0 0 42px; width: 42px; height: 42px; border-radius: var(--pv2-radius, 4px); overflow: hidden; background: #1a1a1b; display: block; } #c2sitenav .hdrnav-feat-art img { width: 42px !important; height: 42px !important; max-width: 42px !important; object-fit: cover; display: block; } /* The name WRAPS rather than ellipsising. Two lines of 12.5/1.25 is 31px, which still fits inside the 42px art block, so a wrapped tile is exactly as tall as an unwrapped one and the row keeps its rhythm. Two lines plus the width the FEATURED rail gave back carries every title we actually feature — the longest is "ARK: Survival Evolved (PC)" — and the clamp is the backstop, not the plan. */ #c2sitenav .hdrnav-feat-nm { font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; font-size: 12.5px; color: #f0f0f0; line-height: 1.25; min-width: 0; white-space: normal; overflow: hidden; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ---------- the featured tile's label is a CORNER SASH ---------- Ours already, not a new invention: this is layout.css's .corner-ribbon (order.tpl / sspanel.tpl / neworder) rebuilt at tile scale. layout.css is the public site's sheet and is not edited — the geometry is mirrored here, scoped to #c2sitenav, on the markup the shared builder already emits, so the public rail keeps its flat chip. GEOMETRY, rebuilt 2026-08-01. The old band was pinned with literal offsets (top 8.75px / right -15.75px) that only worked out to a corner sash for one band length. It also centred the text in the WHOLE 64px band while only the middle 46px was visible, so "25% OFF" and "POPULAR" had their first and last glyphs sliced off by the tile's own overflow — at every width, not just on a phone. It is now derived from two numbers and clips nothing: --c2sash-d perpendicular distance from the tile's corner to the band's centreline. The visible chord across the corner is 2d, and the band meets each tile edge d*sqrt(2) from the corner. --c2sash-len the band's full length. len - chord is fold, split between the two ends, and it is the fold that falls outside the tile and gets clipped — which is what reads as folded fabric rather than a rotated rectangle. The transform is what makes it length-independent. translate(50%,-50%) is applied LAST, in page axes, so whatever the band's size its centre lands exactly on the corner; rotate then translateY(d) slides it down the diagonal by d. Change the length and the sash stays a sash. Horizontal padding is (len - chord) / 2, so the band's CONTENT BOX is exactly the visible chord: text can never reach the clipped ends. Anything wider than the chord ellipsises inside it — see the fit steps below, which keep real labels well clear of that. Defaults: d 28 -> a 56px chord meeting each edge 39.6px from the corner (the tile's padding box is 62px tall), len 76 -> 10px of fold at each end. */ #c2sitenav .hdrnav-feat .hdrnav-lbl { --c2sash-d: 28px; --c2sash-len: 76px; --c2sash-pad: 10px; position: absolute; top: 0; right: 0; left: auto; bottom: auto; display: block; box-sizing: border-box; width: var(--c2sash-len); height: 15px; padding: 0 var(--c2sash-pad); margin: 0; transform: translate(50%, -50%) rotate(45deg) translateY(var(--c2sash-d)); transform-origin: 50% 50%; text-align: center; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; font-size: 9px; line-height: 15px; letter-spacing: .5px; text-transform: uppercase; border: 0; border-radius: 0; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); box-shadow: 0 2px 4px rgba(0, 0, 0, .25); background: linear-gradient(#ff6b6b 0%, #d9534f 100%); } /* ---------- fit steps ---------- The tile carries a SHORT form of the label (the builder drops a leading "NOW ON", exactly as the legacy menu did by hand: PS5 on the tile, NOW ON PS5 in the A-Z row), so most sashes are 3-7 characters. Past that the type size steps down rather than the text being cut — the class is set server-side from the character count, so there is no measuring pass and no layout thrash. The ellipsis above is the backstop nobody should ever see. */ #c2sitenav .hdrnav-feat .hdrnav-lbl-f2 { font-size: 8.5px; letter-spacing: .3px; } #c2sitenav .hdrnav-feat .hdrnav-lbl-f3 { font-size: 7.5px; letter-spacing: .1px; } /* the fold triangles sit under the two clipped ends */ #c2sitenav .hdrnav-feat .hdrnav-lbl::before, #c2sitenav .hdrnav-feat .hdrnav-lbl::after { content: ''; position: absolute; bottom: -3px; border-top: 3px solid #9e2b25; border-left: 3px solid transparent; border-right: 3px solid transparent; } #c2sitenav .hdrnav-feat .hdrnav-lbl::before { left: 0; } #c2sitenav .hdrnav-feat .hdrnav-lbl::after { right: 0; } /* sash variants — one per label type, same families as the flat chip above. The two derived labels (offer / popular) share the gold sash with dark ink, because white on gold does not carry. */ #c2sitenav .hdrnav-feat .hdrnav-lbl-new { background: linear-gradient(#ff6b6b 0%, #d9534f 100%); } #c2sitenav .hdrnav-feat .hdrnav-lbl-new::before, #c2sitenav .hdrnav-feat .hdrnav-lbl-new::after { border-top-color: #9e2b25; } #c2sitenav .hdrnav-feat .hdrnav-lbl-version { background: linear-gradient(#6ec96e 0%, #4a9c4a 100%); } #c2sitenav .hdrnav-feat .hdrnav-lbl-version::before, #c2sitenav .hdrnav-feat .hdrnav-lbl-version::after { border-top-color: #2f6b2f; } #c2sitenav .hdrnav-feat .hdrnav-lbl-platform { background: linear-gradient(#5aa9e6 0%, #2f7fbf 100%); } #c2sitenav .hdrnav-feat .hdrnav-lbl-platform::before, #c2sitenav .hdrnav-feat .hdrnav-lbl-platform::after { border-top-color: #1d5786; } #c2sitenav .hdrnav-feat .hdrnav-lbl-preorder { background: linear-gradient(#ffc078 0%, #f0ad4e 100%); color: #241a08; text-shadow: 0 1px 0 rgba(255, 255, 255, .18); } #c2sitenav .hdrnav-feat .hdrnav-lbl-preorder::before, #c2sitenav .hdrnav-feat .hdrnav-lbl-preorder::after { border-top-color: #c77c11; } #c2sitenav .hdrnav-feat .hdrnav-lbl-soon { background: linear-gradient(#a184e4 0%, #7a5cd0 100%); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .22); } #c2sitenav .hdrnav-feat .hdrnav-lbl-soon::before, #c2sitenav .hdrnav-feat .hdrnav-lbl-soon::after { border-top-color: #513a92; } #c2sitenav .hdrnav-feat .hdrnav-lbl-offer, #c2sitenav .hdrnav-feat .hdrnav-lbl-popular { background: linear-gradient(#f0b64a 0%, #db9b15 100%); color: #1a1a1b; text-shadow: 0 1px 0 rgba(255, 255, 255, .18); } #c2sitenav .hdrnav-feat .hdrnav-lbl-offer::before, #c2sitenav .hdrnav-feat .hdrnav-lbl-offer::after, #c2sitenav .hdrnav-feat .hdrnav-lbl-popular::before, #c2sitenav .hdrnav-feat .hdrnav-lbl-popular::after { border-top-color: #8a6210; } /* the A-Z catalog. The bottom padding used to be 6px because a sticky footer sat under it; with that gone the list needs its own floor. */ #c2sitenav .hdrnav-cols { flex: none; min-width: 0; padding: 16px 18px 14px; } #c2sitenav .hdrnav-glist { list-style: none; margin: 0; padding: 0; column-count: 6; column-gap: 20px; } #c2sitenav .hdrnav-glist li { break-inside: avoid; margin: 0 !important; padding: 0 !important; float: none !important; line-height: normal !important; list-style: none; } /* WHERE THE COLUMNS ACTUALLY BREAK. `column-fill: balance` equalises column HEIGHT, and height is not rows: a wrapped two-line name is one entry but two rows, so six columns of identical pixel height carry different row counts — measured at 18|17|17|17|17|18 at 1920, with the longest column LAST, which is the complaint. No multicol property can express "never taller than the column to my left", so the split is computed from the rendered geometry in panel-sitenav.js and handed back here as a forced break. Nothing about the look changes; only where the columns divide. Removing this class makes the list balance by height again. */ #c2sitenav .hdrnav-glist li.c2snav-colbrk { break-after: column; } #c2sitenav .hdrnav-glist li > a { display: flex !important; align-items: center; gap: 6px; padding: 4px 7px !important; margin: 0 !important; height: auto !important; min-height: 0 !important; line-height: 1.3 !important; border-radius: var(--pv2-radius, 4px); text-decoration: none; background: transparent; } #c2sitenav .hdrnav-glist li > a:hover { background: var(--pv2-hover, #333) !important; text-decoration: none; } #c2sitenav .hdrnav-glist li > a i.fa { color: #666; font-size: 9px; flex-shrink: 0; } #c2sitenav .hdrnav-glist li > a:hover i.fa { color: var(--pv2-accent, #d5a84a); } /* Every catalog row carries an art SLOT for the phone icon grid, empty until panel-sitenav.js fills it on first open. display:none here is presentation only and is no longer load-bearing: the slot holds no to fetch, and the script skips building catalog art entirely above the phone breakpoint. (The old comment here claimed a lazy image inside display:none is never loaded. It is — that was worth 1.07 MB per phone page load. See the builder.) */ #c2sitenav .hdrnav-gart { display: none; } /* Full names, never an ellipsis. The catalog is a fixed-column grid, so a long name next to its label chip ("ARK: Survival Evolved" + POPULAR) ran out of column and got cut. It wraps to a second line instead - the row grows, the grid stays aligned because the items are stretched to the tallest in the row. */ #c2sitenav .hdrnav-gnm { font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 12.5px; color: #c4c4c5; min-width: 0; white-space: normal; overflow-wrap: break-word; line-height: 1.28; } #c2sitenav .hdrnav-glist li > a:hover .hdrnav-gnm { color: #fff; } #c2sitenav .hdrnav-glist li > a { align-items: flex-start; } #c2sitenav .hdrnav-glist li > a > i.fa { margin-top: 3px; flex: 0 0 auto; } /* the label sits with the name rather than competing with it for the row */ #c2sitenav .hdrnav-glist .hdrnav-lbl { flex: 0 0 auto; align-self: flex-start; margin-top: 1px; } /* search empty state */ #c2sitenav .hdrnav-gsearch-empty { display: none; padding: 26px 18px 30px; text-align: center; font-family: 'Open Sans', Arial, sans-serif; font-size: 13px; color: #999; } #c2sitenav .hdrnav-gsearch-empty a { color: var(--pv2-gold, #eaa824); } #c2sitenav .hdrnav-mega-games.c2snav-searching .hdrnav-feat { display: none; } #c2sitenav .hdrnav-mega-games.c2snav-noresults .hdrnav-cols { display: none; } #c2sitenav .hdrnav-mega-games.c2snav-noresults .hdrnav-gsearch-empty { display: block; } /* There is no "See all N games" footer. It was a sticky bar at the bottom of a panel that already lists every one of the 102 games, so it read as a promise of more behind a link — Ryan, 2026-08-01: "I still see this at the bottom. We should show all games." On a phone it was also 44px of sticky chrome taken off the catalog it was pointing away from. The games index keeps its door in the no-match state above. */ /* ============================================================ LOCATIONS / GUIDES / FORUM panels ============================================================ */ #c2sitenav .hdrnav-panel { width: 320px; max-width: calc(100vw - 24px); padding: 14px 16px; } #c2sitenav .hdrnav-panel-loc { width: 470px; } /* GUIDES + FORUM own their own internal padding: the hero and the search control are full-width bands inside the sheet, the lists are inset. The sheet caps its own height and scrolls, because a live search can return a longer list than the static one it replaces and a laptop is not always 1080 tall. */ #c2sitenav .hdrnav-panel-guides, #c2sitenav .hdrnav-panel-forum { width: 430px; padding: 0; max-height: calc(100vh - 130px); overflow-y: auto; overflow-x: hidden; } #c2sitenav .hdrnav-panel-loc .hdrnav-panel-inner { display: flex; gap: 24px; } #c2sitenav .hdrnav-locgrp { min-width: 0; } #c2sitenav .hdrnav-loclist { list-style: none; margin: 0; padding: 0; } #c2sitenav .hdrnav-loclist li { margin: 0 !important; padding: 0 !important; float: none !important; line-height: normal !important; list-style: none; } #c2sitenav .hdrnav-loclist li > a { display: flex !important; align-items: center; gap: 8px; padding: 5px 7px !important; margin: 0 !important; height: auto !important; min-height: 0 !important; line-height: 1.3 !important; border-radius: var(--pv2-radius, 4px); text-decoration: none; background: transparent; } #c2sitenav .hdrnav-loclist li > a:hover { background: var(--pv2-hover, #333) !important; text-decoration: none; } #c2sitenav .hdrnav-loclist a span { font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 12.5px; color: #c4c4c5; white-space: nowrap; } #c2sitenav .hdrnav-loclist a:hover span { color: #fff; } #c2sitenav .hdrnav-flag { width: 18px; height: 12px; object-fit: cover; border-radius: 2px; display: block; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); } #c2sitenav .hdrnav-linklist { list-style: none; margin: 0; padding: 0; } #c2sitenav .hdrnav-linklist li { margin: 0 !important; padding: 0 !important; float: none !important; line-height: normal !important; list-style: none; } #c2sitenav .hdrnav-linklist li > a { display: flex !important; align-items: center; gap: 8px; padding: 6px 7px !important; margin: 0 !important; height: auto !important; min-height: 0 !important; line-height: 1.35 !important; border-radius: var(--pv2-radius, 4px); text-decoration: none; background: transparent; } #c2sitenav .hdrnav-linklist li > a:hover { background: var(--pv2-hover, #333) !important; text-decoration: none; } #c2sitenav .hdrnav-linklist li > a i.fa { color: #666; font-size: 10px; flex-shrink: 0; } #c2sitenav .hdrnav-linklist li > a:hover i.fa { color: var(--pv2-accent, #d5a84a); } #c2sitenav .hdrnav-linklist li > a span, #c2sitenav .hdrnav-linklist li > a .hdrnav-ttl { font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 12.5px; color: #c4c4c5; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } #c2sitenav .hdrnav-linklist li > a:hover span, #c2sitenav .hdrnav-linklist li > a:hover .hdrnav-ttl { color: #fff; } #c2sitenav .hdrnav-repl { margin-left: auto; flex-shrink: 0; font-family: 'Open Sans', Arial, sans-serif; font-size: 10.5px; font-weight: 600; color: #8a8a8b; background: var(--pv2-field, #2d2d2e); border-radius: 9px; padding: 1px 7px; min-width: 20px; text-align: center; } /* ============================================================ GUIDES + FORUM — hero door, live search, game-art rows ============================================================ */ /* ---------- the hero: the panel's PRIMARY action ---------- The old panels only offered the wiki/forum as a small foot link under the list. The door to the destination is now the first thing in the sheet, at card scale, and the foot link is gone — one door per panel, not the same door twice. */ #c2sitenav .hdrnav-hero { display: flex; align-items: center; gap: 12px; margin: 14px 14px 0; padding: 12px 13px; border-radius: var(--pv2-radius-lg, 6px); background: linear-gradient(180deg, rgba(234, 168, 36, .10) 0%, rgba(234, 168, 36, .04) 100%); border: 1px solid rgba(234, 168, 36, .34); text-decoration: none; transition: background-color .14s ease, border-color .14s ease; } #c2sitenav .hdrnav-hero:hover { border-color: var(--pv2-gold, #eaa824); background: linear-gradient(180deg, rgba(234, 168, 36, .18) 0%, rgba(234, 168, 36, .07) 100%); text-decoration: none; } #c2sitenav .hdrnav-hero-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--pv2-radius, 4px); display: flex; align-items: center; justify-content: center; background: rgba(234, 168, 36, .14); border: 1px solid rgba(234, 168, 36, .3); } #c2sitenav .hdrnav-hero-ic > i.fa { font-size: 15px; color: var(--pv2-gold, #eaa824); } #c2sitenav .hdrnav-hero-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #c2sitenav .hdrnav-hero-t { font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; color: #fff; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #c2sitenav .hdrnav-hero-s { font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 11px; color: #9a9a9b; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #c2sitenav .hdrnav-hero .hdrnav-arrow { margin-left: auto; color: var(--pv2-gold, #eaa824); } #c2sitenav .hdrnav-hero:hover .hdrnav-arrow { transform: translateX(3px); } /* ---------- the search control ---------- Metrics are the GAME SERVERS mega filter's, not a second dialect: 38px tall, 13.5px/38px text, 36px left inset, --pv2-field on --pv2-border at 4px, gold border + #313132 on focus. The glyph sits 13px in from the FIELD edge, which is exactly where the mega puts it (wrap padding 18 + left 31). The control is a DIV — the classic theme pads every
0 15px, and that padding is what pushed the old magnifier 5px outside its own field. */ #c2sitenav .hdrnav-srch { position: relative; margin: 12px 14px; } #c2sitenav .hdrnav-srch-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #8a8a8b; font-size: 13px; line-height: 1; pointer-events: none; z-index: 1; } #c2sitenav .hdrnav-srch-in { display: block; width: 100%; height: 38px; box-sizing: border-box; padding: 0 74px 0 36px; margin: 0 !important; background: var(--pv2-field, #2d2d2e); border: 1px solid var(--pv2-border, #3a3a3b); border-radius: var(--pv2-radius, 4px); color: #f0f0f0; font-family: 'Open Sans', Arial, sans-serif; font-size: 13.5px; line-height: 38px; transition: border-color .14s ease, background-color .14s ease; } #c2sitenav .hdrnav-srch-in:focus { outline: none; border-color: var(--pv2-gold, #eaa824); background: #313132; } #c2sitenav .hdrnav-srch-in::placeholder { color: #7d7d7e; } #c2sitenav .hdrnav-srch-note { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #8a8a8b; pointer-events: none; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } /* ---------- live results ---------- The static list stays in the DOM and is only hidden while a query is live, so clearing the box restores it instantly with no second fetch and no reflow of the panel's height from empty. */ #c2sitenav .hdrnav-srch-out { display: none; padding: 0 14px 14px; } #c2sitenav .hdrnav-panel.c2snav-q .hdrnav-srch-out { display: block; } #c2sitenav .hdrnav-panel.c2snav-q .hdrnav-srch-base { display: none; } #c2sitenav .hdrnav-srch-msg { padding: 20px 8px 22px; text-align: center; font-family: 'Open Sans', Arial, sans-serif; font-size: 12.5px; color: #999; line-height: 1.5; } #c2sitenav .hdrnav-srch-msg a { color: var(--pv2-gold, #eaa824); } #c2sitenav .hdrnav-srch-msg .hdrnav-srch-sub { display: block; font-size: 11.5px; color: #7d7d7e; margin-top: 4px; } /* ---------- game-art rows ---------- 22px art slot with a neutral glyph underneath. A wiki page or a forum topic we cannot attribute to a game keeps the glyph — we never guess a game, and we never ship a row with a hole where an icon should be. */ #c2sitenav .hdrnav-art { position: relative; flex: 0 0 24px; width: 24px; height: 24px; border-radius: var(--pv2-radius, 4px); overflow: hidden; background: #1a1a1b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); display: flex; align-items: center; justify-content: center; } #c2sitenav .hdrnav-artlist li > a .hdrnav-art > i.fa { font-size: 11px; color: #6f6f70; flex-shrink: 0; } #c2sitenav .hdrnav-artlist li > a:hover .hdrnav-art > i.fa { color: var(--pv2-accent, #d5a84a); } #c2sitenav .hdrnav-art > img { position: absolute; top: 0; left: 0; width: 24px !important; height: 24px !important; max-width: 24px !important; object-fit: cover; display: block; } #c2sitenav .hdrnav-artlist li > a { align-items: center; padding: 5px 7px !important; } #c2sitenav .hdrnav-artlist .hdrnav-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; } #c2sitenav .hdrnav-artlist .hdrnav-sub { font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 10.5px; color: #7d7d7e; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } #c2sitenav .hdrnav-artlist li > a:hover .hdrnav-sub { color: #9a9a9b; } /* ---------- the matched context line under a guides result ---------- Two lines, hard-clamped. A third line turns an 8-result list into a scroll marathon in a 430px sheet, so the clamp is the contract, not a nicety — `-webkit-line-clamp` needs all four of its companions or the box silently falls back to unbounded height. The row is top-aligned because a two-line block centred against a 24px icon leaves the art floating in the middle of the text. */ #c2sitenav .hdrnav-artlist li > a:has(.hdrnav-snip) { align-items: flex-start; } #c2sitenav .hdrnav-artlist .hdrnav-snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; min-width: 0; font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 11px; color: #86868a; line-height: 1.38; margin-top: 1px; } #c2sitenav .hdrnav-artlist li > a:hover .hdrnav-snip { color: #a0a0a3; } /* the art keeps its own line beside a two-line block */ #c2sitenav .hdrnav-artlist li > a:has(.hdrnav-snip) .hdrnav-art { margin-top: 1px; } #c2sitenav .hdrnav-artlist li > a:has(.hdrnav-snip) .hdrnav-age { margin-top: 2px; } /* ---------- last activity, not a reply count ---------- A time in a rounded count-badge reads as a count, so the pill chrome is dropped: plain dim mono-ish text, right-aligned, fixed min-width so a column of 12s/4m/3h/6d stays flush. */ #c2sitenav .hdrnav-age { margin-left: auto; flex-shrink: 0; align-self: center; font-family: 'Open Sans', Arial, sans-serif; font-size: 10.5px; font-weight: 600; color: #77777a; letter-spacing: .02em; white-space: nowrap; min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; } #c2sitenav .hdrnav-artlist li > a:hover .hdrnav-age { color: #9a9a9b; } /* the lists are inset; the hero and the search band own the full width */ #c2sitenav .hdrnav-panel-guides .hdrnav-panel-inner, #c2sitenav .hdrnav-panel-forum .hdrnav-panel-inner { padding: 0 14px 14px; } #c2sitenav .hdrnav-panel-guides .hdrnav-panel-h, #c2sitenav .hdrnav-panel-forum .hdrnav-panel-h { margin: 0 0 6px 7px; } /* ============================================================ STEP-DOWNS — the rail is 1170 at 1200-1399 and grows past 1400, so the catalog columns and the tab padding step with it. ============================================================ */ /* Six tiles, stepping 6 -> 4 -> 3 -> 2 with the rail. No first column to span any more, so the tiles just re-flow. */ @media (max-width: 1399px) { #c2sitenav .hdrnav-glist { column-count: 5; } #c2sitenav .hdrnav-feat { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ---------- THE SHORT LABELS START HERE, NOT AT 1099 ---------- GAME SERVERS becomes GAMES for the whole band the rail is stuck at bootstrap's 1170. The switch used to sit in the 1099 block, and the public site carried its OWN copy of this step at 991-1399 scoped body.pubv2 in public-v2-core.css — a file no panel ever loads. So the three surfaces disagreed across a 300px band, and the customer panel got the worst of it: measured 2026-08-04 at 1280 and 1366, "Game Servers" ellipsised to "Game Server...", "Locations" to "Location...", every one of the five labels clipped, because the row is 1170 and the logo, the five full labels and the right-hand group need ~1153 plus gaps. The public site showed "GAMES" at those exact widths and fitted. One rule for all three now; the public copy is gone. ONLY the labels move up to 1399. The padding, type-size, socials and catalog-column steps stay where they were measured. */ #c2sitenav .c2snav-full { display: none; } #c2sitenav .c2snav-short { display: inline; } } @media (max-width: 1199px) { #c2sitenav .c2snav-tab { padding: 0 11px; gap: 7px; letter-spacing: .05em; font-size: 12.5px; } #c2sitenav .hdrnav-glist { column-count: 4; } #c2sitenav .hdrnav-feat { grid-template-columns: repeat(3, minmax(0, 1fr)); } #c2brand .c2tag { margin-right: 14px; } body.v2hdr #c2brand .container.c2snav-row > .c2logo, body.dsv2 #c2brand .container.c2snav-row > .c2logo { margin-right: 10px; } } @media (max-width: 1099px) { /* below this the socials are the first thing to give: the nav is the point of the row and the same links live in the footer. The tabs are already on their short labels by here — that step moved up to 1399, see the block above — so what is left to give is the tab padding and the type size. */ body.v2hdr #c2brand .container.c2snav-row > .c2rgt .c2socials, body.dsv2 #c2brand .container.c2snav-row > .c2rgt .c2socials { display: none; } #c2sitenav .c2snav-tab { padding: 0 8px; gap: 6px; font-size: 12px; } #c2sitenav .hdrnav-glist { column-count: 3; } #c2brand .c2tag { margin-right: 12px; } body.v2hdr #c2brand .container.c2snav-row > .c2logo, body.dsv2 #c2brand .container.c2snav-row > .c2logo { margin-right: 8px; } } /* ============================================================ COLLAPSED (<=990) — the width at which the customer panel's brand row is .hide_mobile and both rails collapse. The nav becomes its own full-width strip of equal cells and the panels become in-flow sheets. ============================================================ */ @media (max-width: 990px) { /* customer panel: the brand row is hidden at this width, so it comes back as the site-nav strip ONLY — the logo lives in the collapsed panel header (.pv2-mobrand) and must not appear twice. */ body.v2hdr.v2hdr-panel #c2brand.hide_mobile { display: block !important; } body.v2hdr.v2hdr-panel #c2brand .container.c2snav-row > .c2logo, body.v2hdr.v2hdr-panel #c2brand .container.c2snav-row > .c2tag, body.v2hdr.v2hdr-panel #c2brand .container.c2snav-row > .c2rgt { display: none !important; } /* Death Star: the brand row keeps its mark and utilities on line one and the nav drops to a full-width strip on line two. */ body.v2hdr #c2brand .container.c2snav-row, body.dsv2 #c2brand .container.c2snav-row { height: auto; flex-wrap: wrap; padding-left: 0; padding-right: 0; } body.dsv2 #c2brand .container.c2snav-row > .c2logo { order: 1; margin: 8px 0 8px 14px; } body.dsv2 #c2brand .container.c2snav-row > .c2tag { order: 2; } body.dsv2 #c2brand .container.c2snav-row > .c2rgt { order: 3; margin-right: 14px; } #c2sitenav { order: 4; flex: 1 0 100%; width: 100%; position: relative; border-top: 1px solid var(--pv2-line, #2c2c2d); } /* every panel now hangs off the full-width strip, not off its own cell */ #c2sitenav .c2snav-item { flex: 1 1 0; min-width: 0; position: static; } #c2sitenav .c2snav-tab { flex: 1 1 0; min-width: 0; justify-content: center; flex-direction: column; gap: 5px; height: 54px; padding: 0 4px; font-size: 9.5px; letter-spacing: .06em; } #c2sitenav .c2snav-tab > i:first-child { font-size: 16px; } #c2sitenav .c2snav-tab::after { bottom: 0; } #c2sitenav .c2snav-tab:hover::after, #c2sitenav .c2snav-item.open > .c2snav-tab::after { left: 6px; right: 6px; } #c2sitenav .c2snav-cv { display: none; } #c2sitenav .c2snav-full { display: none; } #c2sitenav .c2snav-short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* panels become full-width sheets under the strip */ #c2sitenav .hdrnav-mega, #c2sitenav .hdrnav-panel, #c2sitenav .c2snav-item.c2snav-edge > .hdrnav-panel, #c2sitenav .c2snav-item:last-of-type > .hdrnav-panel, #c2sitenav .c2snav-item:last-child > .hdrnav-panel { position: absolute; top: 100%; left: 0; right: 0; width: auto !important; max-width: none; border-left: 0; border-right: 0; border-radius: 0; max-height: calc(100vh - 190px); overflow-y: auto; overflow-x: hidden; } #c2sitenav .hdrnav-mega-games { left: 0; right: 0; } #c2sitenav .hdrnav-feat { grid-template-columns: repeat(3, minmax(0, 1fr)); } #c2sitenav .hdrnav-glist { column-count: 2; } #c2sitenav .hdrnav-panel-loc .hdrnav-panel-inner { display: block; } #c2sitenav .hdrnav-locgrp + .hdrnav-locgrp { margin-top: 10px; } /* touch floors */ #c2sitenav .hdrnav-glist li > a, #c2sitenav .hdrnav-loclist li > a, #c2sitenav .hdrnav-linklist li > a { min-height: 40px !important; } #c2sitenav .hdrnav-feat-row { min-height: 44px; } } @media (max-width: 767px) { #c2sitenav .hdrnav-gsearch-count { display: none; } #c2sitenav .hdrnav-gsearch { padding-right: 12px; } /* two across, not one: six full-width tiles ate the entire sheet at this width and left a single game row under them */ #c2sitenav .hdrnav-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } #c2sitenav .hdrnav-cols, #c2sitenav .hdrnav-feat { padding-left: 12px; padding-right: 12px; } #c2sitenav .hdrnav-gsearch-wrap { padding: 10px 12px; } #c2sitenav .hdrnav-gsearch-wrap > i.fa { left: 25px; } #c2sitenav .hdrnav-panel { padding: 12px; } /* GUIDES + FORUM keep their own internal padding at every width — the blanket 12px above would double it against the hero/search bands */ #c2sitenav .hdrnav-panel-guides, #c2sitenav .hdrnav-panel-forum { padding: 0; } #c2sitenav .hdrnav-hero { margin: 12px 12px 0; } #c2sitenav .hdrnav-srch { margin: 10px 12px; } #c2sitenav .hdrnav-panel-guides .hdrnav-panel-inner, #c2sitenav .hdrnav-panel-forum .hdrnav-panel-inner, #c2sitenav .hdrnav-srch-out { padding-left: 12px; padding-right: 12px; } } /* ============================================================ PHONE (<=600) — the GAME SERVERS mega becomes the legacy icon menu. Ryan, 2026-08-01: "I don't like how it doesn't show very many games when you click game servers on mobile. I kind of like how we had it before on the legacy." Measured at 390 before this block: the search field plus six full-width 64px featured tiles used the whole sheet and left exactly FOUR catalog rows on screen above the footer. What the legacy mobile menu did better, and what is taken from it: - the catalog was a COMPACT ICON GRID, art + name, two-up, not a list of full-width rows; you could see a dozen games without scrolling - the featured strip was small square art, several across, not a stack - the search box sat at the top (that part was already right, and stays) Same DOM at every width — the builder emits one
  • per game and the phone just re-flows it — so the instant filter in panel-sitenav.js keeps working untouched, including its hide/show of individual rows. ============================================================ */ @media (max-width: 600px) { /* ---- featured: six small vertical cards, three across, two rows ---- */ #c2sitenav .hdrnav-feat { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 12px 12px; /* the grid centres its items at every other width, which here left the one-line cards floating inside a row sized by a two-line one */ align-items: stretch; } #c2sitenav .hdrnav-feat-row { flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 9px 5px 8px !important; min-height: 0; text-align: center; } #c2sitenav .hdrnav-feat-art { flex: 0 0 40px; width: 40px; height: 40px; } #c2sitenav .hdrnav-feat-art img { width: 40px !important; height: 40px !important; max-width: 40px !important; } /* the clamp bounds the height on its own; the old max-height was 26px against two 13.1px lines and shaved the descenders off the second one */ #c2sitenav .hdrnav-feat-nm { font-size: 10.5px; line-height: 1.25; width: 100%; } #c2sitenav .hdrnav-feat-row:hover { transform: none; } /* the sash comes in with the card: a 40px art block centred in a ~105px card leaves the corner free only out to about 30px, so the chord drops from 56 to 44 and the fold from 10 to 8 (len 60, pad 8). Same two numbers, same transform — nothing else about the sash changes. */ #c2sitenav .hdrnav-feat .hdrnav-lbl { --c2sash-d: 22px; --c2sash-len: 60px; --c2sash-pad: 8px; height: 13px; line-height: 13px; font-size: 8px; letter-spacing: .3px; } #c2sitenav .hdrnav-feat .hdrnav-lbl-f2 { font-size: 7px; letter-spacing: .05px; } #c2sitenav .hdrnav-feat .hdrnav-lbl-f3 { font-size: 6px; letter-spacing: 0; } /* ---- catalog: two-up icon grid ---- */ #c2sitenav .hdrnav-cols { padding-top: 8px; } #c2sitenav .hdrnav-glist { column-count: auto; column-gap: normal; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6px; } #c2sitenav .hdrnav-glist li > a { gap: 7px; padding: 4px 6px !important; min-height: 38px !important; } /* the caret was the row's only left mark; the art is a better one */ #c2sitenav .hdrnav-glist li > a i.fa { display: none; } #c2sitenav .hdrnav-gart { display: block; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 3px; overflow: hidden; background: #1a1a1b; } #c2sitenav .hdrnav-gart img { width: 22px !important; height: 22px !important; max-width: 22px !important; object-fit: cover; display: block; } #c2sitenav .hdrnav-gnm { font-size: 12px; } /* a two-up row is ~170px wide, so the chip has to give first — the game name is what the eye is scanning for */ #c2sitenav .hdrnav-glist .hdrnav-lbl { height: 15px; padding: 0 5px; font-size: 9px; letter-spacing: .03em; max-width: 62px; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 13px; } } @media (max-width: 480px) { /* the badge is the way back to the dashboard now, not decoration, so it stays - just tighter. Hiding it here left small phones with no route back. */ #c2brand .c2tag { padding: 0 6px; margin-right: 10px; font-size: 10px; letter-spacing: .06em; } #c2sitenav .c2snav-tab { font-size: 9px; padding: 0 2px; letter-spacing: .03em; } } /* ============================================================ LOCATIONS — the world map panel (.hdrnav-geo) One inline SVG, no map library, no tile service, no CDN, no request at render time. The land is a single dissolved from the 176-country world outline already in this repo and simplified to 6.3KB; the graticule is 15 hairlines in the same projection. Markers are real elements positioned in PERCENT on top of the SVG, not SVG nodes. The SVG is width:100%/height:auto so its box is exactly its viewBox aspect, which makes a percentage and a projected coordinate the same thing — and it buys a focusable link, a normal CSS hover card and a real hit area for free. This section is appended whole so the GAME SERVERS / GUIDES / FORUM rules above it are never touched. Its media queries come after the sheet's own, so they win at equal specificity. ============================================================ */ #c2sitenav .hdrnav-panel.hdrnav-geo { width: 812px; padding: 0; overflow: hidden; } #c2sitenav .hdrnav-geo-body { display: flex; align-items: stretch; } #c2sitenav .hdrnav-geo-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } /* ---------- the map surface ---------- */ /* With the stat strip gone the map is the only thing in the main column, and the rail is the taller of the two — so the map centres in the height the rail sets instead of hanging off the top with dead space under it. Padding is even now that nothing sits below it. */ #c2sitenav .hdrnav-geo-map { flex: 1 1 auto; padding: 12px 10px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(120% 120% at 42% 30%, #2c2c2f 0%, #252527 58%, #1f1f21 100%); } #c2sitenav .hdrnav-geo-stage { width: 100%; } #c2sitenav .hdrnav-geo-stage { position: relative; } #c2sitenav .hdrnav-geo-svg { display: block; width: 100%; height: auto; } #c2sitenav .hdrnav-geo-land { fill: #34343a; stroke: #40404a; stroke-width: .9; stroke-linejoin: round; } #c2sitenav .hdrnav-geo-grat path { fill: none; stroke: #2a2a2e; stroke-width: .6; } /* ---------- markers ---------- */ #c2sitenav .hdrnav-geo-pin { position: absolute; z-index: 3; transform: translate(-50%, -50%); display: flex !important; align-items: center; justify-content: center; width: 26px; height: 26px; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 50%; background: transparent; text-decoration: none; } #c2sitenav .hdrnav-geo-pin::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--pv2-gold, #eaa824); box-shadow: 0 0 0 3px rgba(234, 168, 36, .18), 0 0 10px 2px rgba(234, 168, 36, .45); transition: transform .16s ease, box-shadow .16s ease; } #c2sitenav .hdrnav-geo-pin:hover::before, #c2sitenav .hdrnav-geo-pin:focus::before, #c2sitenav .hdrnav-geo-pin.hdrnav-geo-lit::before { transform: scale(1.45); box-shadow: 0 0 0 4px rgba(234, 168, 36, .26), 0 0 16px 4px rgba(234, 168, 36, .6); } #c2sitenav .hdrnav-geo-pin:focus { outline: none; } #c2sitenav .hdrnav-geo-pin:focus-visible { outline: 2px solid var(--pv2-gold, #eaa824); outline-offset: 1px; } /* the slow outward ping that makes the map read as live rather than printed */ #c2sitenav .hdrnav-geo-ring { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 1.5px solid rgba(234, 168, 36, .55); animation: c2geoPulse 3s ease-out infinite; } @keyframes c2geoPulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(3.4); opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { #c2sitenav .hdrnav-geo-ring { animation: none; } } /* ---------- always-on city labels ---------- sides are set per city in PHP so the five North American markers do not stack their labels on top of each other */ #c2sitenav .hdrnav-geo-lbl { position: absolute; z-index: 2; transform: translate(0, -50%); pointer-events: none; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; font-size: 9.5px; letter-spacing: .02em; color: #9a9a9c; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); transition: color .14s ease; } #c2sitenav .hdrnav-geo-lbl-r { margin-left: 11px; } #c2sitenav .hdrnav-geo-lbl-l { transform: translate(-100%, -50%); margin-left: -11px; } #c2sitenav .hdrnav-geo-lbl-b { transform: translate(-50%, 0); margin-top: 9px; } #c2sitenav .hdrnav-geo-lbl.hdrnav-geo-lit { color: #fff; } /* ---------- the hover card ---------- Two bands, in the order a person actually asks the questions: which city is this and where in the world is it, then what is MY ping to it. The arrow rides in the title row rather than on a third band of its own — the card sits ON a map of eight cities and every extra row of it hides another one. The pin is the link; the card is presentation on top of it (pointer-events: none), so the pointer can never fall into a gap between the two and snap it shut. */ #c2sitenav .hdrnav-geo-card { position: absolute; z-index: 6; display: block; width: 186px; padding: 0; background: linear-gradient(180deg, #212123 0%, #1a1a1b 100%); border: 1px solid #5a5a60; border-radius: var(--pv2-radius-lg, 6px); box-shadow: 0 14px 34px rgba(0, 0, 0, .72), 0 0 0 1px rgba(234, 168, 36, .12); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(6px) scale(.97); pointer-events: none; transition: opacity .15s ease, transform .15s cubic-bezier(.2, .8, .3, 1), visibility 0s .15s; } #c2sitenav .hdrnav-geo-pin:hover + .hdrnav-geo-card, #c2sitenav .hdrnav-geo-pin:focus + .hdrnav-geo-card, #c2sitenav .hdrnav-geo-pin.hdrnav-geo-lit + .hdrnav-geo-card { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition-delay: 0s; } /* gold hairline along the top edge, the same accent the pins carry */ #c2sitenav .hdrnav-geo-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(234, 168, 36, 0) 0%, var(--pv2-gold, #eaa824) 45%, rgba(234, 168, 36, .25) 100%); } #c2sitenav .hdrnav-geo-card-h { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 11px 2px; font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; font-size: 13px; line-height: 1.25; color: #fff; } #c2sitenav .hdrnav-geo-card-h .hdrnav-flag { width: 20px; height: 14px; } #c2sitenav .hdrnav-geo-card-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the arrow is the "this is a link" tell, and it lives in the title row rather than on a band of its own so the card stays two rows tall over the map */ #c2sitenav .hdrnav-geo-card-h .hdrnav-arrow { margin-left: auto; color: var(--pv2-gold, #eaa824); font-weight: 400; transition: transform .16s ease; } #c2sitenav .hdrnav-geo-pin:hover + .hdrnav-geo-card .hdrnav-arrow, #c2sitenav .hdrnav-geo-pin:focus + .hdrnav-geo-card .hdrnav-arrow, #c2sitenav .hdrnav-geo-pin.hdrnav-geo-lit + .hdrnav-geo-card .hdrnav-arrow { transform: translateX(3px); } #c2sitenav .hdrnav-geo-card-r { display: block; padding: 0 11px 9px; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: #8a8a8b; } /* ---------- the latency band ---------- Ships as a dash and stays a dash unless a real figure arrives from sitenav_latency.php. The colours and the 60ms break are the order form's, to the millisecond, so the two surfaces read as one number. */ #c2sitenav .hdrnav-geo-lat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 11px 7px; border-top: 1px solid #333338; background: rgba(255, 255, 255, .03); } #c2sitenav .hdrnav-geo-lat-k { font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: #8a8a8b; white-space: nowrap; } #c2sitenav .hdrnav-geo-lat .hdrnav-geo-ms { display: inline-flex; align-items: center; gap: 5px; font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; color: #7d7d80; white-space: nowrap; } #c2sitenav .hdrnav-geo-lat .hdrnav-geo-ms i { font-size: 9px; opacity: .75; } /* only a figure we actually received gets a colour */ #c2sitenav .hdrnav-geo-lat.latency-low .hdrnav-geo-ms { color: #00cc66; } #c2sitenav .hdrnav-geo-lat.latency-med .hdrnav-geo-ms { color: #ff914d; } /* ---------- the rail's latency chip ---------- The same figure, in the list, so the list is not a second reading of the map but the same reading in a different shape. */ #c2sitenav .hdrnav-geo .hdrnav-loclist li > a { gap: 7px; } #c2sitenav .hdrnav-geo .hdrnav-loclist .hdrnav-geo-ms { margin-left: auto; flex-shrink: 0; font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; font-size: 10.5px; font-variant-numeric: tabular-nums; color: #6e6e71; white-space: nowrap; } #c2sitenav .hdrnav-geo .hdrnav-loclist a .hdrnav-geo-ms .hdrnav-geo-ms-v { color: inherit; font-size: inherit; font-weight: inherit; } #c2sitenav .hdrnav-geo .hdrnav-loclist a.latency-low .hdrnav-geo-ms { color: #00cc66; } #c2sitenav .hdrnav-geo .hdrnav-loclist a.latency-med .hdrnav-geo-ms { color: #ff914d; } #c2sitenav .hdrnav-geo .hdrnav-loclist a:hover .hdrnav-geo-ms, #c2sitenav .hdrnav-geo .hdrnav-loclist a.hdrnav-geo-lit .hdrnav-geo-ms { filter: brightness(1.18); } /* Removed 2026-07-31 (Ryan): the stat strip (.hdrnav-geo-stats/-stat), the availability dot (.hdrnav-geo-dot/-off) and its card line (.hdrnav-geo-f), and the "Start a server in any location" door (.hdrnav-geo .hdrnav-panel-foot). Order-acceptance state does not belong in a nav panel; the strip was overdone. The PHP that computed availability went with them — see ssHdrLocationsData(). */ /* ---------- the rail: every location, coordinate or not ---------- */ #c2sitenav .hdrnav-geo-rail { flex: 0 0 226px; min-width: 0; padding: 10px 9px 9px; background: #232324; border-left: 1px solid var(--pv2-border, #3a3a3b); } #c2sitenav .hdrnav-geo .hdrnav-locgrp + .hdrnav-locgrp { margin-top: 7px; } #c2sitenav .hdrnav-geo .hdrnav-panel-h { margin: 0 0 3px; padding: 0 6px; } #c2sitenav .hdrnav-geo .hdrnav-loclist li > a.hdrnav-geo-lit { background: var(--pv2-hover, #333) !important; } #c2sitenav .hdrnav-geo .hdrnav-loclist li > a.hdrnav-geo-lit span { color: #fff; } /* ---------- step-downs: the panel must still fit beside its own tab ---------- */ @media (max-width: 1399px) { #c2sitenav .hdrnav-panel.hdrnav-geo { width: 760px; } } @media (max-width: 1199px) { #c2sitenav .hdrnav-panel.hdrnav-geo { width: 700px; } } @media (max-width: 1099px) { #c2sitenav .hdrnav-panel.hdrnav-geo { width: 660px; } #c2sitenav .hdrnav-geo-rail { flex-basis: 200px; } } /* ============================================================ COLLAPSED (<=990) — the panel is a full-width sheet. MOBILE DECISION: the map SCALES, it does not get replaced by a list — but it stops being the interactive surface. France and Germany are 2.4% of the map apart, which is 9px at 390: no honest 44px touch target can be built there, and overlapping hit areas are worse than none. So the markers become presentation (pointer-events off, taken out of the tab order by the script) and the region rail underneath — which already lists every location, with a 40px row floor — is the ONE thing you tap. Nothing is lost: the rail carries every location the map does, plus any that has no coordinate at all. ============================================================ */ @media (max-width: 990px) { #c2sitenav .hdrnav-geo-body { display: block; } #c2sitenav .hdrnav-geo-map { padding: 8px; } #c2sitenav .hdrnav-geo-rail { flex: none; width: auto; border-left: 0; border-top: 1px solid var(--pv2-border, #3a3a3b); } #c2sitenav .hdrnav-geo-pin { pointer-events: none; } #c2sitenav .hdrnav-geo-card { display: none; } } @media (max-width: 600px) { /* under ~570px of map the North American labels start to touch, so the names live in the rail only and the markers stay as plotted dots */ #c2sitenav .hdrnav-geo-lbl { display: none; } } /* ---------- the badge as a right-slot button ---------- The surface badge used to sit at the far LEFT next to the wordmark on the Death Star and on the customer panel, and nowhere at all on the public site. So the header rearranged itself as staff moved between the three, which is what Ryan was reacting to. It is one control in one position now: the right-hand slot is always "where your stuff is", and only its label changes with who you are. */ #c2brand .c2rgt .c2tag-btn { margin-right: 12px; height: 30px; padding: 0 12px; gap: 7px; font-size: 10.5px; } #c2brand .c2rgt .c2tag-btn i { font-size: 11px; } /* Below 1500 the five nav labels start ellipsising ("GAME SERVE...", "LOCATI..."), because this button is 120px the nav used to have. The nav labels are the navigation; this button is a shortcut staff already know. So the button gives the width back and keeps only its shield. The ceiling is 1700, not 1500: the nav swaps to its LONG labels ("GAME SERVERS" for "GAMES") on the wide rail, so 1600 is tighter than 1440 even though the viewport is bigger. */ @media (max-width: 1699px) { #c2brand .c2rgt .c2tag-btn { padding: 0; width: 30px; justify-content: center; margin-right: 10px; } #c2brand .c2rgt .c2tag-btn span { display: none; } } @media (max-width: 991px) { #c2brand .c2rgt .c2tag-btn { margin-right: 8px; } } /* ---------- the logo's warm glow, on the Death Star too ---------- The soft orange bloom behind the wordmark is defined in header-v2-preview.css against `body.v2hdr`, which is the public site and the customer panel. The Death Star's body carries `dsv2` instead, so its logo was the one wordmark on the site with no glow at all. Same geometry, same colour, same hover-only behaviour Ryan asked for - this only widens who gets it. */ body.dsv2 #c2brand .c2logo { position: relative; } body.dsv2 #c2brand .c2logo::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 230px; height: 120px; pointer-events: none; opacity: 0; transition: opacity .25s ease; background: radial-gradient(ellipse at center, rgba(234, 168, 36, 0.13) 0%, rgba(234, 168, 36, 0.055) 38%, rgba(234, 168, 36, 0) 72%); } body.dsv2 #c2brand .c2logo:hover::before { opacity: 1; } body.dsv2 #c2brand .c2logo img { position: relative; z-index: 1; } /* Ryan, twice: the bloom is still too strong. A radial wash behind the mark lights the BAR as much as the logo, and at any opacity you can see it as a patch. Replaced with a glow that follows the letterforms - it cannot spill onto the header because it never leaves the glyphs - at roughly half the old strength. The wash above is kept but never shown, so switching back is one line. */ body.dsv2 #c2brand .c2logo img { transition: filter .22s ease; } body.dsv2 #c2brand .c2logo:hover img { filter: drop-shadow(0 0 5px rgba(234, 168, 36, 0.34)) drop-shadow(0 0 12px rgba(234, 168, 36, 0.16)); }