/* ============================================================ ============================================================ PUBLIC V2 — THE GAME SERVERS MEGA (and the rail's other panels) ============================================================ Skin for the shared rail that themes/epona/tpl/panel-sitenav.tpl renders. Linked FROM header.tpl inside its {if $hdrPubV2} branch, immediately AFTER that include — the public-v2-footer.css precedent — so it loads after css/sspanel/panel-sitenav.css and wins ties by source order as well as on specificity. EVERY RULE IS SCOPED body.pubv2. That class is only ever set for a STAFF member on a public marketing page (header.tpl line 34); it is never true inside a panel, for a customer, for a logged-out visitor or for a crawler. So the customer panel and the Death Star keep the #c2sitenav look Ryan approved on 2026-07-31 / 08-01, byte for byte — the sash geometry, the tinted chip, the 38px filter — and only the public site's copy of the rail changes. Nothing here is a "fix" to that approved panel work; it is the public surface's own pass. Content is untouched: no game name, description, href, placeholder, heading or alt text is changed anywhere. The builder (sspanel/includes/header-menu-data.inc.php) is not touched at all. Only colour, size, position and surface. ------------------------------------------------------------ THE FIVE MEASURED DEFECTS THIS SHEET FIXES. Everything else in the mega is left alone on purpose (design contract 1b: fix what is broken, do not restyle what is chosen). 1. THE LABEL IS DIVORCED FROM THE GAME IT LABELS. `margin-left:auto` parks every catalog chip on the far right of its column, so the gap between the end of the game NAME and the start of its chip — measured with a Range rect over the name's text node, live, on the 32 labelled rows the catalog renders: 390 min 8 median 39 max 70 768 min 110 median 219 max 253 1100 min 20 median 58 max 88 1440 min 13 median 48 max 79 1600 min 30 median 71 max 105 1920 min 13 median 95 max 129 At 768 the catalog is two ~350px columns, so "7 Days to Die" and its "1.0" end up a QUARTER OF A METRE of pixels apart. The chips stop reading as attributes of their rows and become a second, ragged right edge running down each column. 2. THE CHIP HAS NO SHAPE. It is a 10% tint inside a 40%-alpha border. Flattened over the sheet (#252526) that fill measures 1.18:1 against the sheet it sits on — the box is, for practical purposes, invisible, and only the 10px text carries the label. The legacy public menu shipped these as SOLID label-danger / label-success / label-primary blocks and Ryan asked for exactly that vocabulary back by name on 2026-08-01 ("I liked how they had certain colors and we had different labels for different things"). After: 2.80 to 7.71:1 depending on the family, every one with AA ink on it. 3. THE SEARCH FIELD SITS ON NOTHING. The search band, the featured band and the catalog are all one flat #252526 slab, so the field's own #2d2d2e fill measures 1.11:1 against the band it is in. At 1600 that is a 1352 x 38 grey bar whose placeholder ink covers about 180px — 13% of its own width — with no surface, no weight and no colour anywhere in it. The mega has no visual grouping at all, against a footer whose entire structure comes from surfaces and hairlines. 4. THE SEARCH FIELD IS UNDER THE SITE'S OWN CONTROL HEIGHT. 38px measured at every width, against `--pv2p-ctl` 40px / 44px on a coarse pointer, and the contract's hard 44px phone tap floor. 5. THE FEATURED SASH IS THE SMALLEST TYPE ON THE SITE. 9px, on the element Ryan calls the most important thing in the panel, against a system whose smallest documented label is 10.5px. NOT FIXED HERE, on purpose: - the sash TREATMENT (Ryan: "I like the little new sashes"), the colour-by-type vocabulary, the six families, the absence of a FEATURED caption, the absence of a "See all N games" foot, the phone icon-grid, the wrapped catalog names, the tab rail, the build-art-on-open rule. All chosen, all measured, all Ryan's. - the panel copy of any of this. See the scope note above. ------------------------------------------------------------ */ /* ============================================================ 1 — THE MASTHEAD ============================================================ Defect 3 and 4. The search band becomes the sheet's masthead: one step DARKER than the sheet it opens (--pv2-surface #1a1a1b against --pv2-raised #252526), which is the same move public-v2-footer.css makes to seat the footer under a lighter page, and it is what finally gives the #2d2d2e field something to sit on. field fill vs its band 1.11:1 -> 1.36:1 The gold hairline across the top edge is the footer's signature, built the same way for the same reason: a layered BACKGROUND, never a positioned pseudo, because the contract forbids putting a new stacking context on anything that can sit above a payment form. Here it rides the STICKY band rather than the sheet, so it stays pinned to the top of the mega while 102 games scroll under it — and because the band's top edge is the mega's top edge, the gold lands directly under the tab that opened it and ties the two together. ------------------------------------------------------------ */ body.pubv2 #c2sitenav .hdrnav-gsearch-wrap { background-color: var(--pv2-surface, #1a1a1b); /* .45 rather than the footer's .30, and this is not taste. Both draw the same line on the same #1a1a1b: at .30 the peak flattens to rgb(82,69,41), which is what the footer ships. But the footer's line has --pv2-border #3a3a3b directly above it and this one has the mega's own --pv2-border-strong #4c4c4d — rgb(76,76,77), a BRIGHTER neighbour than the gold itself, which swallowed it (sampled off the render: the edge read as a warm tint on the border, not as a gold line). At .45 the peak is rgb(110,90,48) and it reads as the same line the footer does. Match the perceived result, not the number. */ background-image: linear-gradient(90deg, rgba(213, 168, 74, 0) 0%, rgba(213, 168, 74, .45) 50%, rgba(213, 168, 74, 0) 100%); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 0; /* the colour step IS the divider now; a #3a3a3b line on top of it is two separators doing one job. Down to the sheet's own hairline. */ border-bottom: 1px solid var(--pv2-line, #2c2c2d); padding: 13px 18px; } /* ---------- the field ---------- 44px is `--pv2p-ctl` at its coarse-pointer value and the contract's phone floor, and it is the one control in this sheet, so it takes the public surface's full control height at every width rather than the panel's 38px toolbar height. Type steps 13.5 -> 14.5 with it. */ body.pubv2 #c2sitenav .hdrnav-gsearch { height: 44px; line-height: 44px; padding: 0 110px 0 42px; font-size: 14.5px; border-color: var(--pv2-border-strong, #4c4c4d); } /* #7d7d7e on #2d2d2e is 3.34:1 — under AA for a placeholder that is the only ink in a 1352px field. --pv2-text-muted takes it to 4.77:1. */ body.pubv2 #c2sitenav .hdrnav-gsearch::placeholder { color: var(--pv2-text-muted, #999); } /* the ONE gold mark in the band. A gold magnifier is what says "this is the thing to use" in a field that is otherwise 87% empty. */ body.pubv2 #c2sitenav .hdrnav-gsearch-wrap > i.fa { left: 33px; font-size: 14px; color: var(--pv2-accent, #d5a84a); } /* focus was a 1px gold border on a field that is nearly as wide as the sheet — at that width a hairline is not a state change you can see. The ring is the same gold at 14%, 3px out, which reads from across the panel and costs no layout. */ body.pubv2 #c2sitenav .hdrnav-gsearch:focus { border-color: var(--pv2-gold, #eaa824); box-shadow: 0 0 0 3px rgba(234, 168, 36, .14); } /* the live match count (JS-written: "7 matches" / "1 match", empty until a query) is the only thing that ever occupies the right end of the field. Given the field's new height it needs to sit on the same optical line as the placeholder. */ body.pubv2 #c2sitenav .hdrnav-gsearch-count { right: 32px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--pv2-text-muted, #999); } /* ============================================================ 2 — THE CATALOG CHIP ============================================================ Defects 1 and 2. POSITION. The chip moves from the column's right edge to immediately after the name: `margin-left` 6px, and the auto margin moves to the RIGHT so the row still fills its column. The row is a flex box with its own `gap: 6px`, so the chip lands a flat **12px** off the name's border box on every labelled row at every width 768 and up — measured, all 32 of them, no exceptions. (A two-line name still shows a wider gap to the *ink* on its shorter line; that is the ragged right of a wrap, not separation, and the box gap under it is still 12.) Measured after, same method as the table above, the ink gap: BEFORE (median / max) AFTER (median / max) 768 219 / 253 12 / 12 990 254 / 364 12 / 12 1100 58 / 140 12 / 19 1440 48 / 79 12 / 79* 1600 71 / 105 12 / 65* 1920 95 / 129 12 / 57* * = the wrapped-name ragged right described above; box gap 12. TREATMENT. Solid fill per family, which is what the legacy public menu shipped and what Ryan asked for back. The colour still comes from the TYPE and never from the text, and the closed set is unchanged: new red a brand-new game version green 1.0 / UPDATE 8 / 1.4.5 platform blue NOW ON PS5 / PS4/5 / XBOX preorder amber PRE-ORDER / coming soon offer gold DERIVED - an active offer's % OFF popular gold DERIVED - a top-8 recent seller INK follows the fill's luminance, which is the rule the featured sash already uses: dark families take white, light families take near-black. Measured (WCAG, ink on fill / fill on the #252526 sheet): new #c9302c white 5.37 2.80 version #5cb85c #0e2410 6.66 6.09 platform #2a72ad white 5.14 2.93 preorder #f0ad4e #2e1f06 8.50 7.71 offer #eaa824 #1a1a1b 8.55 7.25 HEIGHT IS PINNED AT 16px AND MUST STAY THERE. The catalog row is 24.25px; tk-pill's native 21px box once made 15 of 102 rows stand 6.75px taller than their neighbours, which is a broken list. The type goes 10 -> 10.5px INSIDE the same 16px box, so nothing moves. The rule is scoped `.hdrnav-glist` and not `.hdrnav-lbl` alone. Bare `body.pubv2 #c2sitenav .hdrnav-lbl` is (1,2,0) — the SAME weight as panel-sitenav.css's `#c2sitenav .hdrnav-feat .hdrnav-lbl`, and this sheet loads later, so a bare rule here would silently repaint the featured SASHES as flat chips and delete the treatment Ryan named. ------------------------------------------------------------ */ body.pubv2 #c2sitenav .hdrnav-glist .hdrnav-lbl { /* the DEFAULT pair, and it is load-bearing: an unrecognised games.menu_label_type would otherwise resolve `background: var(--lbl-fill)` to an invalid value, which computes to `unset` and ships a transparent chip with black ink on it. A new family that nobody styled falls back to the gold DERIVED look instead. */ --lbl-fill: var(--pv2-gold, #eaa824); --lbl-ink: #1a1a1b; margin-left: 6px; margin-right: auto; padding: 0 6px; font-size: 10.5px; letter-spacing: .045em; color: var(--lbl-ink); background: var(--lbl-fill); /* a 1px darker rim keeps the block crisp on the sheet AND on the #333 row hover, where a borderless chip loses its own edges */ border-color: rgba(0, 0, 0, .28); } body.pubv2 #c2sitenav .hdrnav-glist .hdrnav-lbl-new { --lbl-fill: #c9302c; --lbl-ink: #fff; } body.pubv2 #c2sitenav .hdrnav-glist .hdrnav-lbl-version { --lbl-fill: #5cb85c; --lbl-ink: #0e2410; } body.pubv2 #c2sitenav .hdrnav-glist .hdrnav-lbl-platform { --lbl-fill: #2a72ad; --lbl-ink: #fff; } body.pubv2 #c2sitenav .hdrnav-glist .hdrnav-lbl-preorder { --lbl-fill: #f0ad4e; --lbl-ink: #2e1f06; } /* soon #7a5cd0 white 4.92 3.11 — the forthcoming tense. Violet is the one hue left that cannot be read as any of the five above, and that matters more here than anywhere: `version` green is the family it must never be mistaken for, because green states what a game IS and this states what is coming. Both numbers clear the floors the table above sets (new is 5.33 / 2.88, platform 5.11 / 3.00). */ body.pubv2 #c2sitenav .hdrnav-glist .hdrnav-lbl-soon { --lbl-fill: #7a5cd0; --lbl-ink: #fff; } body.pubv2 #c2sitenav .hdrnav-glist .hdrnav-lbl-offer, body.pubv2 #c2sitenav .hdrnav-glist .hdrnav-lbl-popular { --lbl-fill: #eaa824; --lbl-ink: #1a1a1b; } /* panel-sitenav.css brightens the TINT on row hover (`rgba(rgb,.18)` fill, `.62` border), which on a solid chip does not brighten it — it paints a 62%-alpha border over a fill that is already opaque and washes the block out. The chip holds still; the row's own #333 hover is the feedback, and a static label does not need a state of its own. */ body.pubv2 #c2sitenav .hdrnav-glist li > a:hover .hdrnav-lbl { background: var(--lbl-fill); border-color: rgba(0, 0, 0, .28); } /* ============================================================ 3 — THE FEATURED SASH ============================================================ Defect 5. The TREATMENT does not change — this is still layout.css's .corner-ribbon at tile scale, still derived from the same two numbers, still clipped by the tile's own overflow so both ends read as folded fabric. Only the scale moves, and it moves the way the geometry note in panel-sitenav.css says to move it: change d and len, recompute pad, do not re-derive anything. d 28 -> 31 chord 2d 56 -> 62px len 76 -> 88 fold (len-2d)/2 10 -> 13px each end pad 10 -> 13 content box = the chord exactly, so text can never reach a clipped end band 15 -> 17px type f1 9 -> 10.5px (the system's label floor) f2 8.5 -> 9.5 f3 7.5 -> 8.5 The band now meets each tile edge 43.8px (d * sqrt 2) from the corner, against a 64px tile and a ~205px tile width at six-up — well inside both. The name's corner reservation grows 26 -> 30px to match, since at the name's top edge the sash's inner boundary is now 33.8px in. Longest label that lands on f1 is 7 characters ("POPULAR"), which at 10.5px/700 with .5px tracking measures ~56px against a 62px content box. Asserted live at every width: scrollWidth - clientWidth === 0 on every sash, and zero name/sash collisions. ------------------------------------------------------------ */ body.pubv2 #c2sitenav .hdrnav-feat .hdrnav-lbl { --c2sash-d: 31px; --c2sash-len: 88px; --c2sash-pad: 13px; height: 17px; line-height: 17px; font-size: 10.5px; } body.pubv2 #c2sitenav .hdrnav-feat .hdrnav-lbl-f2 { font-size: 9.5px; letter-spacing: .3px; } body.pubv2 #c2sitenav .hdrnav-feat .hdrnav-lbl-f3 { font-size: 8.5px; letter-spacing: .1px; } body.pubv2 #c2sitenav .hdrnav-feat-row:has(.hdrnav-lbl) { padding-right: 30px; } @supports not selector(:has(*)) { body.pubv2 #c2sitenav .hdrnav-feat-row { padding-right: 30px; } } /* ============================================================ 4 — THE CATALOG'S COLUMNS GET HAIRLINES ============================================================ The footer's structure comes entirely from hairlines: four groups you can see the edges of instead of four columns of equal-weight grey. The catalog is the same problem at six times the density — 102 names in six columns across 1,352px with nothing but a 20px gutter between them, which reads as a wall rather than as six lists. A `column-rule` is the cheapest possible answer: it is drawn in the gutter, it costs no layout, it adds no element and no content, and it is the same hairline idea the footer separates its groups with. The gutter goes 20 -> 24px so the rule has air on both sides; at 1600 that takes each column 208.7 -> 205.3px, which changes which names wrap by nothing (asserted). --pv2-border, NOT the footer's --pv2-line, and the reason is the same one as the gold hairline above: a hairline token has to be picked for the surface it is drawn ON, never copied across by name. The footer draws --pv2-line #2c2c2d on --pv2-surface #1a1a1b, a 1.35:1 step you can see. The same token on this sheet's --pv2-raised #252526 is 1.09:1 — sampled off the render at rgb(44,44,45) against rgb(37,37,38), which is not a line, it is nothing. --pv2-border #3a3a3b restores the footer's 1.35:1 on this lighter surface. Not applied below 600, where .hdrnav-glist stops being a multicol and becomes the phone icon grid. ------------------------------------------------------------ */ @media (min-width: 601px) { body.pubv2 #c2sitenav .hdrnav-glist { column-gap: 24px; column-rule: 1px solid var(--pv2-border, #3a3a3b); } } /* ---------- and the sixth column waits for the width to pay for it ---------- panel-sitenav.css goes to six columns the moment the rail widens at 1400. That was affordable while the chip lived on the column's right edge and cost the name nothing. Tethered, it is not: MEASURED at 1440, six columns of a 1192px catalog is 178.7px each, and once the row's 14px padding, its 15px caret and a 46px chip with its 6px tether are paid, the name is left 124px. "ARK: Survival Evolved (PC)" needs ~155px at 12.5px, so it took a THIRD line and stood 72px tall in a list of 24px rows. Six columns is right once the catalog passes ~1300px (205px a column at 1600, where the same row measures 40px on two lines like its neighbours). That happens at a 1540px viewport, so the fifth-to-sixth step moves there from 1400. Measured after at 1440: five columns at 219px, rowHeights {24, 25, 40} — no row taller than a two-line one at any width. The query is bounded at BOTH ends and that is not decoration. This rule is (1,2,0) against panel-sitenav.css's (1,1,0), so a bare `max-width: 1540` would out-specify — and therefore silently undo — its own 4-column step at 1199 and its 3-column step at 1099 from inside their media queries. Touch only the band that is broken. */ @media (min-width: 1400px) and (max-width: 1540px) { body.pubv2 #c2sitenav .hdrnav-glist { column-count: 5; } } /* ============================================================ 5 — THE RAIL'S OTHER SEARCH FIELD ============================================================ CLAUDE-DESIGN-SYSTEM.md records that the GUIDES / FORUM panel search is not a second dialect — its metrics ARE the GAME SERVERS filter's, copied property for property because Ryan named that field as the reference. Restyling the mega's filter alone would break that on the public site the moment it shipped, so the same step is applied here. Same 44px control height, same 14.5px type, same gold glyph, same focus ring, same placeholder colour. ------------------------------------------------------------ */ body.pubv2 #c2sitenav .hdrnav-srch-in { height: 44px; line-height: 44px; padding: 0 74px 0 42px; font-size: 14.5px; border-color: var(--pv2-border-strong, #4c4c4d); } body.pubv2 #c2sitenav .hdrnav-srch-in::placeholder { color: var(--pv2-text-muted, #999); } body.pubv2 #c2sitenav .hdrnav-srch-ic { left: 15px; font-size: 14px; color: var(--pv2-accent, #d5a84a); } body.pubv2 #c2sitenav .hdrnav-srch-in:focus { border-color: var(--pv2-gold, #eaa824); box-shadow: 0 0 0 3px rgba(234, 168, 36, .14); } body.pubv2 #c2sitenav .hdrnav-srch-note { font-size: 11px; color: var(--pv2-text-muted, #999); } /* ============================================================ 6 — PHONE AND TABLET ============================================================ The mega is a full-width sheet below 990 and the legacy two-up icon grid below 600. Both are Ryan's, both stay. What changes is only what sections 1-3 above changed, re-fitted to the narrower insets that panel-sitenav.css already declares. ------------------------------------------------------------ */ @media (max-width: 767px) { /* panel-sitenav.css drops the wrap to `padding: 10px 12px` here, so the glyph's 15px-inside-the-field inset lands at 12 + 1 + 14 = 27. */ body.pubv2 #c2sitenav .hdrnav-gsearch-wrap { padding: 11px 12px; } body.pubv2 #c2sitenav .hdrnav-gsearch-wrap > i.fa { left: 27px; } /* the count is display:none at this width, so the field's right inset is padding only — but it must clear a 44px tap on the field itself */ body.pubv2 #c2sitenav .hdrnav-gsearch { padding-right: 14px; } body.pubv2 #c2sitenav .hdrnav-srch-ic { left: 15px; } } @media (max-width: 600px) { /* THE TETHER IS OFF HERE, and this is a measured retreat rather than an oversight. panel-sitenav.css already records the rule for this grid: "a two-up row is ~170px wide, so the chip has to give first — the game name is what the eye is scanning for." Tethering it proves that exactly. MEASURED at 390 with `margin-left: 6px` on this grid: the chip takes 46px out of a 180px cell and rows went to two and three lines — rowHeights {38, 39, 54, 69} against a uniform {38, 39} before, at 360 and 390 both. The chip stays on the right, where the gap it can open is bounded by the cell (median 39px, max 70) rather than by a 350px column. What the phone DOES take from section 2 is the whole point of it: the solid fill, 6.17:1 against the sheet instead of 1.18:1. `display:block` and the 62px cap are theirs — that is what makes the ellipsis work — so the vertical centring has to come from line-height matching the box rather than from flex. */ body.pubv2 #c2sitenav .hdrnav-glist .hdrnav-lbl { margin-left: auto; margin-right: 0; padding: 0 5px; font-size: 9px; line-height: 15px; } /* the phone card is ~115px wide and its sash is scaled to it. Same two-number move as section 3, one size smaller: d 22 -> 23 (chord 44 -> 46) len 60 -> 64 pad 8 -> 9 "POPULAR" at 8.5px/700 with .3px tracking measures ~45px against a 46px content box; asserted unclipped at 360 / 390 / 414. */ body.pubv2 #c2sitenav .hdrnav-feat .hdrnav-lbl { --c2sash-d: 23px; --c2sash-len: 64px; --c2sash-pad: 9px; height: 14px; line-height: 14px; font-size: 8.5px; letter-spacing: .3px; } body.pubv2 #c2sitenav .hdrnav-feat .hdrnav-lbl-f2 { font-size: 8px; letter-spacing: .05px; } body.pubv2 #c2sitenav .hdrnav-feat .hdrnav-lbl-f3 { font-size: 7px; letter-spacing: 0; } }