/* ============================================================ PUBLIC SITE — Panel V2 token layer + PUBLIC DESIGN SYSTEM (STAFF ONLY). Linked only from header.tpl's {if $hdrPubV2} gate, which is only ever true for a verified staff session on an allowlisted public route (includes/public-v2-gate.inc.php). A customer, a logged-out visitor and a crawler never download this file and never see this class. Three jobs: 1. carry the --pv2-* palette onto public pages. header-v2-preview.css deliberately writes hex because the tokens are absent out here, but panel-sitenav.css — the shared #c2sitenav rail — is written against the tokens, so they have to exist for the rail to render correctly. 2. the handful of public-page corrections the panel chrome needs. 3. THE PUBLIC DESIGN SYSTEM (.pv2p-*) every redesigned marketing page is built from. See "PART 2" below and design-contract.md. The public site's layout.css is NOT edited. Everything here is additive and scoped under body.pubv2, exactly the separation panel-sitenav.css already keeps. SCOPING RULE THAT MAKES THIS SAFE: body.pubv2 is on EVERY allowlisted public route the moment a staff member is signed in — including pages nobody has redesigned yet. So this file contains NO bare-element rule under body.pubv2 alone. Everything in PART 2 is scoped through an opt-in class (.pv2p / .pv2p-band / .pv2p-*), so an unconverted page is byte-identical to what it was before. Design contract: CLAUDE-DESIGN-SYSTEM.md + ~/survivalservers/goals/2026-08-04-public-v2-redesign/design-contract.md. Values mirror css/sspanel/panel-v2-core.css — one palette, not a second copy with drift. ============================================================ */ /* ============================================================ PART 1 — tokens + shared chrome (unchanged behaviour) ============================================================ */ body.pubv2 { --pv2-surface: #1a1a1b; /* deep chrome: toolbars, card headers */ --pv2-panel: #212122; /* card body */ --pv2-raised: #252526; /* raised sections */ --pv2-field: #2d2d2e; /* inputs, wells, chips */ --pv2-hover: #333333; --pv2-border: #3a3a3b; --pv2-border-strong: #4c4c4d; --pv2-line: #2c2c2d; --pv2-text: #ffffff; --pv2-text-soft: #cccccc; --pv2-text-muted: #999999; --pv2-text-dim: #666666; --pv2-accent: #d5a84a; --pv2-gold: #eaa824; --pv2-gold-deep: #db9b15; --pv2-ok: #64d977; --pv2-ok-bg: rgba(100, 217, 119, 0.10); --pv2-warn: #f0ad4e; --pv2-warn-bg: rgba(240, 173, 78, 0.10); --pv2-danger: #f25757; --pv2-danger-bg: rgba(242, 87, 87, 0.10); --pv2-info: #5bc0de; --pv2-info-bg: rgba(91, 192, 222, 0.10); --pv2-radius: 4px; --pv2-radius-lg: 6px; --pv2-mono: Consolas, 'Courier New', Monaco, monospace; --pv2-ctl-h: 32px; } /* ---------- the account door ---------- The panels suppress the brand-row chip because their own submenu carries the account cell. A public page has no submenu, so the chip is the only account door here and has to come back. */ body.pubv2.v2hdr.v2hdr-panel #c2brand .c2chip { display: inline-block !important; } /* ---------- the brand row gets the same rail the panels give it ---------- The rail ellipsises its own labels rather than overflow the page, which is correct — but on a public page it was doing it at 1920, because the public .container is bootstrap's FIXED 1170px while both panels widen theirs above 1400 (the design contract's one content rail). Same rule, same number, so the header lines up with the page band underneath it instead of sitting inside a narrower box. Scoped to #c2brand: each page still owns its own body rail. */ @media (min-width: 1400px) { body.pubv2 #c2brand .container { width: 100%; /* --pv2p-rail-wide is declared with the rail variants in PART 2. It is a token and not a literal because the header rail and the page rail have to be the SAME number: Ryan's first note on the game-page preview was that the chrome widened to 1560 and the body stayed at bootstrap's 1170, which reads as a half-converted page. Two copies of one number is how that comes back. */ max-width: var(--pv2p-rail-wide); } } /* The public brand row carries an account door the panel rows do not, so its right-hand group is ~150px heavier and the rail runs out of room a breakpoint earlier. The socials go first — they are decoration, they are in the footer, and panel-sitenav.css already drops them at 1199 for the same reason. The rail needs ~766px for six full labels; below 1600 the row cannot pay for both. */ @media (max-width: 1599px) { body.pubv2 #c2brand .c2rgt .c2socials { display: none !important; } } /* The short-label step USED TO BE HERE, at 991-1399, and it was right — but scoped body.pubv2 it only ever reached the public site, so the SAME rail inside the two panels kept its full labels and ellipsised them instead ("Game Server...", "Location..." measured at 1280 and 1366 on the customer panel, 2026-08-04). It now lives with the rail it belongs to, in css/sspanel/panel-sitenav.css's 1399 step, which all three surfaces load. Same numbers, same result out here — one rail, one behaviour. The logo step below stays: it pays for the account door that only the public brand row carries. */ @media (min-width: 991px) and (max-width: 1199px) { body.pubv2 #c2brand .c2logo img { height: 26px; } } /* ---------- the rail is the nav ---------- #topBar and #topNav are already suppressed by the panel-chrome rules the v2hdr-panel class brings with it, which leaves the classic bar's own bottom margin behind on templates that lean on it. Close the gap so the page band starts flush under the rail, the way it does on both panels. */ body.pubv2 #header { margin-bottom: 0; } body.pubv2 #header + section.page-title, body.pubv2 #header + section { margin-top: 0; } /* ---------- the footer joins the rail ---------- *** MOVED OUT, 2026-08-04. Now css/public-v2-footer.css §10. *** The rule was `body.pubv2 #wrapper #footer .container` at >=1400, plus the >=1710 no-container-query fallback for the game list's third column. Both were correct and both were unreachable where they were needed most: THIS FILE IS LINKED ONLY FROM header.tpl's {if $hdrPubV2} gate, so it exists on public pages and nowhere else. The customer panel and the Death Star include the same footer.tpl and got neither. Everything that skins the footer now lives in the one sheet footer.tpl links for itself, scoped to the footer element's own class rather than to a body class, so all three surfaces get the identical footer. Do not re-add a footer rule here — a rule in this file can only ever reach one of the three surfaces, which is the exact bug that split the footer in two. */ /* ============================================================ ============================================================ PART 2 — THE PUBLIC DESIGN SYSTEM (.pv2p-*) ============================================================ Derived, not invented. Three sources, in this order of authority: - css/sspanel/panel-v2-core.css the token set + component vocabulary - css/about-v2.css the one public page Ryan approved - CLAUDE-DESIGN-SYSTEM.md the fit/finish contract HOW A PAGE OPTS IN — two classes on markup that already exists, and nothing else. There is no body class to add and no per-page stylesheet required:
the title band
the content shell Both take the SAME width variant so the band title and the content below it share one left edge. Inside .pv2p, put components. THREE RULES THAT ARE NOT NEGOTIABLE 1. Hierarchy comes from COMPONENTS, never from changing a heading level. Every public page's heading outline is SEO content and is frozen. .pv2p-chead styles whatever heading tag it is handed, so a section that must stay an

can still read as a section head. 2. Any -based component must be written a.pv2p-btn / a.pv2p-chip / a.pv2p-card. `body.pubv2 .pv2p a` is (0,3,1) and repaints a bare (0,2,1) component gold-on-gold — the exact trap about-v2.css hit. 3. The public site loads css/fa-subset.min.css, NOT full Font Awesome. An icon outside the subset renders as literally nothing. Every glyph this file draws is CSS geometry (borders/masks), so the system has zero font dependency. Check the subset before adding an . FIVE MORE, FROM THE ORDER-FLOW AUDIT (2026-08-04) — NON-NEGOTIABLE The order page runs ~800 lines of inline JS on 100% of its traffic that pulls the legacy Bootstrap form apart and rebuilds it as the checkout console. It matches nodes by tag, by class, by DOM position and by regex on heading text. Any failed assumption calls rollback() and the visitor silently gets the 2013 form — no PHP error, no console error, nothing in any log. Revenue degrades with no alarm. These five exist so a SHARED sheet can never reach into that page through a class it happens to share: 4. NEVER restyle a bare Bootstrap structural class. .panel, .panel-body, .panel-title, .row, .col-md-* are the JS's hooks and they are on every page on the site. Every rule here is scoped body.pubv2 PLUS a component class we added — including the two places this file does touch bootstrap markup (`.pv2p > .container` for the rail, and the `.pv2p-split` grid neutralisers), both of which only ever match inside a section a page opted in. 5. RENAME NOTHING. A page ADDS .pv2p-* beside the classes that are already there; it never swaps one for the other. Any component that needs a rename to work is the wrong component. 6. NEVER put transform / filter / contain / a new stacking context on a wrapper that could sit above a payment form. The codebase already carries a parallax `transform` that trapped the Stripe modal below the footer. This is why .callout's bloom is a layered BACKGROUND and not an absolutely-positioned ::before with `> * { z-index: 1 }`. 7. `visibility: hidden` is load-bearing — JS reads .css('visibility') to decide a grid layout. Never "tidy" one into `display: none`. Equally: never set `display` on .toggle-content (the accordion's jQuery owns it inline). 8. There is a global `.alert-success { display: none !important }` on the order page. Do NOT build a success/confirmation component on that class name — the public note component is .pv2p-note. ============================================================ */ body.pubv2 { /* --- vertical rhythm. One scale, used everywhere. --- */ --pv2p-s1: 6px; --pv2p-s2: 10px; --pv2p-s3: 14px; --pv2p-s4: 18px; /* card padding, list gaps */ --pv2p-s5: 26px; /* between cards */ --pv2p-s6: 36px; /* between sections */ --pv2p-s7: 52px; /* shell top/bottom */ /* --- type. Same ramp about-v2.css was approved on: 14px/1.62 body, growing to 15.5px/1.66 once the rail widens at 1400 (character count is what matters, so the box and the type grow together). --- */ --pv2p-font: 'Open Sans', Arial, sans-serif; --pv2p-fs-body: 14px; --pv2p-lh-body: 1.62; --pv2p-fs-band: 26px; /* --- the reading measure. In ch, so it tracks the font size instead of rotting when the ramp steps at 1400. 74ch of Open Sans is ~82 characters of English prose, which is the top of the comfortable band for a long legal document. --- */ --pv2p-measure: 74ch; /* --- ONE control height for the public surface. The panel's 32px is a TOOLBAR height and reads thin on a marketing page; the auth surface documented 38px for the same reason. 40px is what Ryan approved on the About page's CTA (.ab-btn), stepping to 44 on touch. --- */ --pv2p-ctl: 40px; --pv2p-pad: var(--pv2p-s4); /* card padding, 26px at >=1400 */ --pv2p-rail: 1170px; /* overridden by the width variants */ /* THE WIDE RAIL — ONE definition, used by three things that must never disagree: the header brand row (PART 1), the .pv2p-w-wide variant below, and the page rail Part 5 gives an unconverted marketing page. Same expression about-v2.css was approved on. */ --pv2p-rail-wide: min(1560px, calc(100vw - 180px)); /* THE READING COLUMN. Was baked into .pv2p-w-doc's rail; it is a token now because the rail and the column are two different numbers above 1400 — the band goes to --pv2p-rail-wide and the column does not. The value is unchanged: 74ch + the card's own padding = 718px at 1920, which is what /privacy/ and /terms/ measured before this change. */ --pv2p-doc-col: calc(var(--pv2p-measure) + (var(--pv2p-pad) * 2)); --pv2p-shadow: 0 10px 26px rgba(0, 0, 0, 0.30); /* --- THE WEAVE. One definition, and it is the DEFAULT for flat dark surfaces, not a decoration three components opted into. This is the treatment Ryan named ("that little grid style background that's cool on our main pages", "it has like a cool design"). It was living as three near-copies with three different alphas and two different gaps — .callout at .014/8px, .pv2p-hero at .016/8px, .pv2p-chead.bloom at .018/7px — which is how a house style turns into three house styles. It is one token now and every user references it, so the next surface that needs it cannot invent a fourth value. .014 white at a 8px pitch is deliberately at the edge of visible: it has to kill "flat" at a glance and still never compete with a line of body copy sitting on it. --- */ --pv2p-weave: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.014) 0 1px, rgba(255, 255, 255, 0) 1px 8px); /* the gold rise that pairs with it on an EMPHASIS surface — a band or a card head, never the page. Kept separate so the weave can be used on its own, which is what a page field wants. */ --pv2p-bloom: radial-gradient(560px 240px at 100% 0%, rgba(234, 168, 36, 0.13), rgba(234, 168, 36, 0) 72%); /* the rung BELOW the page — the CTA band's stage. One step down from --pv2-surface by the ladder's own interval (surface→panel is +7 RGB units; this is −7), so the gold bloom sits on the darkest field on the page. Exists because the CTA callout used to sit ON the page fill: measured across the 323-page crawl (2026-08-05), the band's #1a1a1b equalled its neighbour's on 711 adjacencies over 289 pages — the single largest source of "two same-toned bands read as one slab". A rung of its own can only ever collide with another CTA band, which is a deliberate stack (the ARK/SE platform rows). */ --pv2p-deep: #131314; } /* ------------------------------------------------------------ THE RAIL — one content width, shared by the band and the body. layout.css pins .container to a FIXED 1170px above 1216px, so a max-width alone can never widen OR narrow it; `width` has to be reset alongside. Same fix about-v2.css carries, generalised into variants so every page picks a width instead of inventing one. .pv2p-w-doc a document. Card = the reading measure + its own padding, centred. Legal/policy pages. Deliberately narrow: a 1560px line of body copy is unreadable, and a text page has no figure to spend the width on. .pv2p-w-read an article or a question list. Wider than a document because the lines are short and the rows are chrome. .pv2p-w-wide the About-page rail: min(1560px, 100vw - 180px) above 1400. For pages with grids, cards or media that can honestly use the width. (no variant) the theme container, untouched. ------------------------------------------------------------ */ body.pubv2 .pv2p > .container, body.pubv2 .pv2p-band > .container { width: 100%; max-width: var(--pv2p-rail); margin-left: auto; margin-right: auto; } /* `ch` in --pv2p-rail is resolved AT USE, against the font-size of the element using it. The band's own font-size is the theme's, the content shell's is the v2 ramp — so a ch-derived rail silently gave the band a NARROWER container than the page under it and the title sat 22px inboard of its own card (measured on /terms/ at 1440: title 398, card edge 376). Pinning the band to the same ramp makes both resolve identically. The band's own heading sizes itself, so nothing visible changes here. */ body.pubv2 .pv2p-band { font-size: var(--pv2p-fs-body); } /* .pv2p-w-doc WAS `--pv2p-doc-col + 30px` — the reading measure used as a RAIL, which made the page-title band 748px wide at 1920 and 658px at 768. Retired 2026-08-04 for the same reason as .pv2p-w-read below, and kept in place for the same reason (five templates carry it). THE MEASURE IS NOT RETIRED — it moved to the element that should always have owned it. `.pv2p-doc` sets `max-width: min(100%, --pv2p-doc-col)`, so the document column is byte-identical at every width (718px at 1920, 628px at 768) while the band above it now starts on the page rail with the logo, the nav and the footer. The design contract's rule holds exactly as written: THE CARD IS THE MEASURE. What changed is that the BAND is no longer forced to be the card's width too. This is the one width decision on this pass that is a judgement rather than a repair, so it is worth stating what it trades: the band title on /privacy/, /terms/ and the three error pages no longer shares a left edge with the column under it (195 vs 601 at 1920). It shares one with every other element on the page instead. The alternative — widening the column to the rail — is the rejected pattern, twice over: a 1560px line of legal copy, and the "74ch cap inside a full-width card / weird indentation on the right" note in CLAUDE-DESIGN-SYSTEM.md. */ /* .pv2p-w-read WAS a fixed 980px. RETIRED 2026-08-04 — it now inherits the page rail and the class is left in place because four templates carry it and markup is not this file's to edit. Why it went: 980 is narrower than the theme container from 992px up, so on /faq/, /jobs/, /locations/ and /locations// the reading rail disagreed with the page's own shared CTA band. Measured at 1100: the accordion and the location cards started at x=75 while the `.callout.styleBackgroundColor` under them started at x=15 and the footer at x=15 — three left edges on one page, the middle one being the content. Above 1400 the same 980 left it 580px inboard of the header. The reading measure it was protecting is still protected, in the place the design contract says it belongs: THE CARD IS THE MEASURE (`.pv2p-doc`, 718px). A 980 RAIL was never that — it was a rail that happened to be narrow, and it made the band disagree with the page. */ /* ---- THE PAGE RAIL ABOVE 1400 — every page's left edge is the SITE's left edge. Ryan, 2026-08-04: "a lot of the pages are still not using the full width." MEASURED AT 1920 BEFORE THIS BLOCK. `#c2brand .container` (the header) is 180@1560 on every page. The body was: home 1170 (opted in, named no variant) faq / jobs / locations / city 980 (.pv2p-w-read) privacy / terms / 404 / 502 / 504 748 (.pv2p-w-doc) about / affiliates / hytale / games browser / 295 game pages 1560 (correct) So the pages that got the MOST design attention were the narrowest: a page that opted in but named no width fell back to the 1170 theme default, and Part 5.0's `:not(:has(.pv2p))` deliberately leaves an opted-in page alone. The header logo sat at x=200 with the page title at x=485 (faq) or x=600 (privacy) under it — three different left edges on one screen, plus the footer's. WHAT THIS FIXES, AS A NUMBER: the band container's left edge vs `#c2brand .container`'s left edge. 180 vs 470 (faq) and 180 vs 586 (privacy/terms/404) at 1920. Every page now resolves the SAME --pv2p-rail-wide token the header does, so the two can never disagree. THE MEASURE IS NOT SPENT ON THE RAIL. This widens the BAND — the section, its background, its rhythm — not the line length. Every block whose job is reading keeps its own measure INSIDE the wide rail: `.pv2p-doc` (the legal column, unchanged at 718px), `.pv2p-prose` on a full-rail card, and the accordion's answer body. That is the pattern the 295 game pages already ship and Ryan approved — /valheim/'s "What is Valheim?" paragraph is a ~940px column centred in a 1560 band. Declared on `body.pubv2` (0,1,1) so it is a DEFAULT, not an override: a variant declared on the element itself is (0,2,0) and still wins. Only `.pv2p-w-wide` is re-stated here — it is the one variant that still declares a rail, and it has to, because 1560 is wider than the 1170 this default falls back to below 1400. `-read` and `-doc` declare nothing at all now (see the notes above them), so they inherit this line. ---- */ @media only screen and (min-width: 1400px) { body.pubv2 { --pv2p-rail: var(--pv2p-rail-wide); } body.pubv2 .pv2p-w-wide { --pv2p-rail: var(--pv2p-rail-wide); } } /* ---- THE HOME HERO'S CAPTION RAIL — `.css-hero-inner`. mobile-responsive.css:2034 pins it to a flat `max-width: 1170px`. The `.css-hero` behind it is full-bleed, so that box is the only thing deciding where the slide's logo, tagline and the two CTA buttons land — all three are absolutely positioned against it. With the bands on the 1560 rail the caption sat on a 1170 one and the hero visibly stepped INBOARD of everything under it: measured at 1920, tagline left edge 375 against a band content edge of 195, a 180px step on the first thing above the fold. The number is the container's CONTENT box, not its border box — a Bootstrap `.container` spends 15px of gutter each side, and an absolutely-positioned child resolves `left: 0` against the padding box, so the caption has to be 30px narrower than the rail to share the same left edge. Verified at 1920: 195 = 195. Stepped on Bootstrap 3's own container breakpoints below 1400 because the mismatch is there too and it is the same defect: 1200-1399 was 15px out (375 vs 390), 992-1199 was 80px out (0 vs 80). Below 992 the theme deliberately makes the tagline a full-bleed bar (`max-width: none`, `left/right: 0`) and that is left alone. ---- */ @media only screen and (min-width: 992px) { body.pubv2 .css-hero-inner { max-width: 940px; } } @media only screen and (min-width: 1200px) { body.pubv2 .css-hero-inner { max-width: 1140px; } } @media only screen and (min-width: 1400px) { body.pubv2 .css-hero-inner { max-width: calc(var(--pv2p-rail-wide) - 30px); } } /* ---- THE HOME HERO'S TWO TOUCH FAILURES. Measured at 390 with everything else on the page passing: /home/ had 19 sub-44px targets against a sitewide floor of 3 (the promo bar and the staff toggle, both template-owned — see the design contract §9 — plus one footer social that passes by hit-extender and only LOOKS small to a rect probe). All 16 of the extras are in this hero. 1. THE SLIDE TAGLINE, x8 — the measured 19x366 inside a 43px bar. The bar's 12px of vertical padding sat on the DIV, so it was dead space: `.css-hero-tagline` carries z-index 2 and therefore paints ABOVE `.css-hero-link` (z-index 1, the full-slide anchor), so a tap on the bar's padding hit neither. Moving the same padding onto the anchor makes the whole bar the link and takes it to 45px. Total box is unchanged (13+19+13 = 45 against 12+19+12 = 43, +2px) and the ellipsis rules mobile-responsive.css puts on both elements still apply — the anchor is already `display: block` there. 2. THE ROTATOR DOTS, x8 — 10x10 at a 17px pitch (12x12 / 21px above 600). Third case of the hit rule: a dense horizontal run keeps its mark and takes a hit CELL exactly one pitch wide, so the cells tile edge to edge and no dot can fire its neighbour. THE INSET IS HALF THE PITCH PLUS THE BORDER, not half the gap. The dot is `border: 1px` and `box-sizing: border-box`, so its 10px rect is an 8px PADDING box — and an absolutely positioned pseudo resolves left/right against the padding box, not the border box. Inset by half the gap (3.5px) the cell measured 15px against a 17px pitch and elementFromPoint 8px off centre fell through to `.css-hero-link`. 4.5px a side (5.5 above 600) puts it back on the pitch exactly. The cell is anchored to the dot's BOTTOM and grows upward, which is the one place this differs from the flexslider dots in PART 5.8. Centring a 44px cell on a dot 48px off the hero's bottom edge would have run it from 31px to 75px, and the tagline bar occupies 0-45px: the bottom 14px of every cell would have stolen taps from the tagline link fixed directly above. Anchored at `bottom: -2px` the cell runs 46-90 and clears it by 1px. Verified with elementFromPoint, not by reading a rect — the rect stays 10x10. ---- */ @media (hover: none) and (pointer: coarse), (max-width: 900px) { body.pubv2 .css-hero-tagline { padding-top: 0; padding-bottom: 0; } body.pubv2 .css-hero-tagline > a { display: block; padding: 13px 22px; } body.pubv2 .css-hero-dot { position: relative; } body.pubv2 .css-hero-dot:after { content: ''; position: absolute; left: -5.5px; right: -5.5px; bottom: -2px; height: 44px; pointer-events: auto; } } @media (max-width: 991px) { /* the theme drops the tagline's side padding to 15px here and makes it a full-bleed bar; the anchor has to carry the same number or the caption shifts 7px. */ body.pubv2 .css-hero-tagline > a { padding-left: 15px; padding-right: 15px; } } @media (max-width: 600px) { /* gap goes 9px -> 7px, dot 12px -> 10px, so the pitch is 17 not 21 */ body.pubv2 .css-hero-dot:after { left: -4.5px; right: -4.5px; } } /* ------------------------------------------------------------ THE SHELL — everything the theme does to a public page that the v2 layout assumes is zero. Treat every bare-element rule in layout.css / essentials.css as hostile inside .pv2p. ------------------------------------------------------------ */ body.pubv2 .pv2p { font-family: var(--pv2p-font); font-size: var(--pv2p-fs-body); line-height: var(--pv2p-lh-body); color: var(--pv2-text-soft); padding: var(--pv2p-s7) 0 var(--pv2p-s6); /* Inherited, so this covers every descendant. A bare URL used as its own link text has no break opportunity in it — measured on /privacy/ at 390, three of them (a PayPal policy URL the worst at 345px) ran 9px past the card, and because .pv2p-card clips its overflow the page did NOT scroll: the URL was silently CUT OFF instead. No page-width alarm would ever have caught it. */ overflow-wrap: break-word; } body.pubv2 .pv2p *, body.pubv2 .pv2p *:before, body.pubv2 .pv2p *:after { box-sizing: border-box; } /* layout.css: `section header { margin-bottom: 60px }`. Every card head on a public page is a
inside a
, so each one silently carries a 60px void between its title bar and its body. */ body.pubv2 .pv2p header, body.pubv2 .pv2p-band header { margin: 0; } /* layout.css: `input, select, textarea { margin-bottom: 10px }` inflates every wrapper past the control it holds — the bug class that put the panel's search glyphs 5px low on three separate pages. Zero it once. */ body.pubv2 .pv2p input, body.pubv2 .pv2p select, body.pubv2 .pv2p textarea { margin-bottom: 0; } /* links. Declared HERE, before every component, so a component can out-specify it by tag (a.pv2p-btn) rather than by !important. */ body.pubv2 .pv2p a { color: var(--pv2-accent); text-decoration: none; transition: color .12s; } body.pubv2 .pv2p a:hover, body.pubv2 .pv2p a:focus { color: var(--pv2-gold); text-decoration: none; } body.pubv2 .pv2p a:focus-visible { outline: 2px solid rgba(213, 168, 74, .45); outline-offset: 2px; border-radius: 2px; } /* ------------------------------------------------------------ THE BAND — section.page-title. Site chrome stays site chrome: it keeps its own background and position, only its type comes onto the v2 ramp. The theme spends a `padding-bottom:15px` on a hairline underline that is invisible on a dark background, so it is cancelled and the spacing is set explicitly (about-v2.css found this first). ------------------------------------------------------------ */ body.pubv2 .pv2p-band { padding: 22px 0 20px; } body.pubv2 .pv2p-band h1, body.pubv2 .pv2p-band h2 { font-family: var(--pv2p-font); font-size: var(--pv2p-fs-band); font-weight: 400; color: #fff; letter-spacing: .01em; line-height: 1.25; margin: 0; padding-bottom: 0; border-bottom: 0; display: block; } body.pubv2 .pv2p-band .pv2p-band-sub { margin: 9px 0 0; padding: 0; border: 0; font-size: 13.5px; line-height: 1.5; color: var(--pv2-text-muted); } /* ------------------------------------------------------------ PROSE — the bare-element ramp. Applied inside .pv2p-prose so a page can hand a whole region of untouched editorial markup to the system without adding a class to 400 paragraphs. Headings are sized BY LEVEL here because that is all a prose region knows. When a page needs a different visual weight for a level it must NOT change, it wraps that block in a component (.pv2p-chead, .pv2p-sec) and the component wins. ------------------------------------------------------------ */ body.pubv2 .pv2p-prose { font-size: var(--pv2p-fs-body); line-height: var(--pv2p-lh-body); color: var(--pv2-text-soft); } body.pubv2 .pv2p-prose > *:first-child { margin-top: 0; } body.pubv2 .pv2p-prose > *:last-child { margin-bottom: 0; } /* THE NEUTRALISER — declare, never inherit. Two bare-element rules in the shared theme beat inheritance outright, because an inherited value loses to ANY declared rule no matter how weak the selector: essentials.css:853 `p { line-height: 22px }` a hardcoded PIXEL leading. At the 15.5px ramp that is 1.42, so paragraphs rendered visibly tighter than the list items beside them (measured: p 22px vs li 25.73px in the same card). layout-dark.css:~35 `p, ul, li, ol li, cite, blockquote cite, h1-h6 { color: #fff }` which painted an entire legal document pure white, flattening it against its own white headings. Both are invisible in a diff and neither throws anything. Any new element type added to the prose ramp must be added to this list too. */ body.pubv2 .pv2p-prose p, body.pubv2 .pv2p-prose ul, body.pubv2 .pv2p-prose ol, body.pubv2 .pv2p-prose li, body.pubv2 .pv2p-prose dl, body.pubv2 .pv2p-prose dd, body.pubv2 .pv2p-prose cite, body.pubv2 .pv2p-prose blockquote cite { color: var(--pv2-text-soft); line-height: var(--pv2p-lh-body); } body.pubv2 .pv2p-prose h1, body.pubv2 .pv2p-prose h2, body.pubv2 .pv2p-prose h3, body.pubv2 .pv2p-prose h4, body.pubv2 .pv2p-prose h5, body.pubv2 .pv2p-prose h6 { font-family: var(--pv2p-font); color: #fff; margin: var(--pv2p-s5) 0 var(--pv2p-s2); padding: 0; border: 0; text-transform: none; letter-spacing: 0; } body.pubv2 .pv2p-prose h1 { font-size: 24px; font-weight: 400; line-height: 1.25; } body.pubv2 .pv2p-prose h2 { font-size: 19px; font-weight: 600; line-height: 1.3; } body.pubv2 .pv2p-prose h3 { font-size: 16px; font-weight: 600; line-height: 1.35; } body.pubv2 .pv2p-prose h4 { font-size: 14.5px; font-weight: 600; line-height: 1.4; } body.pubv2 .pv2p-prose h5, body.pubv2 .pv2p-prose h6 { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--pv2-text-muted); margin-bottom: var(--pv2p-s1); } body.pubv2 .pv2p-prose p { margin: 0 0 var(--pv2p-s3); } body.pubv2 .pv2p-prose strong, body.pubv2 .pv2p-prose b { color: #fff; font-weight: 600; } /* `i` is BOTH the italic element and Font Awesome's carrier tag on this site. `body.pubv2 .pv2p-prose i` is (0,2,2) and fa-subset's `.fa { font-style: normal }` is (0,1,0), so the prose ramp skewed every icon inside it — which is why two pages could not put .pv2p-prose on any block that carries an icon, and reported it rather than half-applying the ramp. Exclude anything wearing an fa class: FA6 always needs a family class AND an icon class, and both match [class*="fa-"]. */ body.pubv2 .pv2p-prose em, body.pubv2 .pv2p-prose i:not([class*="fa-"]) { font-style: italic; } body.pubv2 .pv2p-prose i[class*="fa-"] { font-style: normal; } body.pubv2 .pv2p-prose small { font-size: 11.5px; color: var(--pv2-text-dim); } body.pubv2 .pv2p-prose code, body.pubv2 .pv2p-mono { font-family: var(--pv2-mono); font-size: 12.5px; background: var(--pv2-field); border: 1px solid var(--pv2-line); border-radius: 3px; padding: 1px 5px; color: #e6e6e6; } /* the theme's separator. On dark it was an invisible rgba hairline doing nothing but spending vertical space — make it a real, quiet divider. */ body.pubv2 .pv2p-prose hr, body.pubv2 .pv2p hr { height: 1px; border: 0; background: var(--pv2-line); margin: var(--pv2p-s5) 0; opacity: 1; } body.pubv2 .pv2p-prose hr.invisible, body.pubv2 .pv2p hr.invisible { background: transparent; } /* lists. `list-style-position: outside` keeps the marker in the gutter so a wrapped line stays flush with the first, and the marker is dimmed so it never outweighs the sentence it numbers. */ body.pubv2 .pv2p-prose ul, body.pubv2 .pv2p-prose ol { margin: 0 0 var(--pv2p-s3); padding-left: 22px; list-style-position: outside; } body.pubv2 .pv2p-prose li { margin: 0 0 var(--pv2p-s1); padding-left: 2px; } body.pubv2 .pv2p-prose li:last-child { margin-bottom: 0; } body.pubv2 .pv2p-prose li::marker { color: var(--pv2-text-dim); } body.pubv2 .pv2p-prose li > p { margin-bottom: var(--pv2p-s1); } body.pubv2 .pv2p-prose ul ul, body.pubv2 .pv2p-prose ol ol, body.pubv2 .pv2p-prose ul ol, body.pubv2 .pv2p-prose ol ul { margin-top: var(--pv2p-s1); margin-bottom: var(--pv2p-s2); } body.pubv2 .pv2p-prose blockquote { margin: 0 0 var(--pv2p-s3); padding: 11px 14px; border: 0; border-left: 3px solid var(--pv2-accent); background: rgba(255, 255, 255, 0.026); border-radius: 0 var(--pv2-radius) var(--pv2-radius) 0; font-size: 13.5px; line-height: 1.55; color: #dcdcdc; } body.pubv2 .pv2p-prose img { max-width: 100%; height: auto; } /* ------------------------------------------------------------ SPACING BLOCKS ------------------------------------------------------------ */ body.pubv2 .pv2p-sec { margin: 0 0 var(--pv2p-s6); } body.pubv2 .pv2p-sec:last-child { margin-bottom: 0; } body.pubv2 .pv2p-stack { display: flex; flex-direction: column; gap: var(--pv2p-s5); } /* ------------------------------------------------------------ CARD — the one surface. Mirrors .pv2-card / .ab-card exactly: --pv2-panel body, --pv2-border hairline, 6px radius, --pv2-surface head. ------------------------------------------------------------ */ body.pubv2 .pv2p-card { background: var(--pv2-panel); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-lg); box-shadow: var(--pv2p-shadow); overflow: hidden; } /* The stacked-card gap. It is a FLOW rule and it must not fire inside a layout container that already owns its own spacing — in a grid the adjacent-sibling margin lands on grid ITEMS, so cards 2 and 3 of a three-across row sit 26px lower than card 1 (measured on /locations/ at 1440: y = 751 / 777 / 777, and the page had to wrap every card in a bare
to stop them being siblings). In a .pv2p-stack it doubles the 26px gap to 52. Reset it in all four containers rather than making every page work around it. */ body.pubv2 .pv2p-card + .pv2p-card { margin-top: var(--pv2p-s5); } body.pubv2 .pv2p-grid > .pv2p-card + .pv2p-card, body.pubv2 .pv2p-stack > .pv2p-card + .pv2p-card, body.pubv2 .pv2p-split > .pv2p-card + .pv2p-card, body.pubv2 .pv2p-media > .pv2p-card + .pv2p-card { margin-top: 0; } body.pubv2 .pv2p-card.flat { box-shadow: none; background: transparent; } body.pubv2 .pv2p-card.accent { border-color: var(--pv2-border-strong); } /* the card head bar. Styles WHATEVER heading tag it is handed — that is how a frozen heading level still reads as a section head. */ body.pubv2 .pv2p-chead { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--pv2p-s2); min-height: 44px; padding: 11px var(--pv2p-pad); margin: 0; background: var(--pv2-surface); border-bottom: 1px solid var(--pv2-line); } body.pubv2 .pv2p-chead > h1, body.pubv2 .pv2p-chead > h2, body.pubv2 .pv2p-chead > h3, body.pubv2 .pv2p-chead > h4, body.pubv2 .pv2p-chead > h5, body.pubv2 .pv2p-chead > h6 { position: relative; margin: 0; padding: 0; border: 0; font-family: var(--pv2p-font); font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff; letter-spacing: 0; text-transform: none; min-width: 0; } body.pubv2 .pv2p-chead-actions { margin-left: auto; display: flex; align-items: center; gap: var(--pv2p-s2); flex-shrink: 0; } /* a head with no artwork gets a deliberate treatment, not a bare strip: a gold bloom from the top right over a fine diagonal weave. Same idea as the About cards without band art and the dashboard game cards. */ body.pubv2 .pv2p-chead.bloom:before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(150px 90px at 100% -30%, rgba(234, 168, 36, 0.16), rgba(234, 168, 36, 0) 70%), var(--pv2p-weave); } body.pubv2 .pv2p-cbody { padding: var(--pv2p-pad); } body.pubv2 .pv2p-cbody > *:first-child { margin-top: 0; } body.pubv2 .pv2p-cbody > *:last-child { margin-bottom: 0; } /* ------------------------------------------------------------ DOCUMENT — a long single-column read (policy, terms, an article). The CARD is the measure: the reading column is the card body, so nothing is a narrow block floating inside a wide box. That is the "weird indentation on the right" rejection in CLAUDE-DESIGN-SYSTEM.md, avoided by construction rather than by a max-width on the paragraphs. ------------------------------------------------------------ */ body.pubv2 .pv2p-doc { margin: 0 auto; max-width: min(100%, var(--pv2p-doc-col)); } body.pubv2 .pv2p-doc .pv2p-cbody { padding: var(--pv2p-s5) var(--pv2p-pad); } /* a document's own dateline / revision note, above the first section. Carries NO rule of its own — a legal page already ships an
after the dateline and two dividers in 30px reads as a mistake. */ body.pubv2 .pv2p-docmeta { margin: 0; padding: 0; border: 0; font-size: 12px; line-height: 1.5; color: var(--pv2-text-dim); } body.pubv2 .pv2p-docmeta em, body.pubv2 .pv2p-docmeta i { font-style: normal; } /* ---------- LEGAL — a numbered document (.pv2p-legal on the prose) ---------- The clause numbering is CONTENT: it is what a support reply or a chargeback response cites. It comes from `
    ` and its nested `
      `, and the markers are drawn by the browser, so the only safe way to make the outline read is to style ::marker and hang it in a gutter — never to restructure the list. The top-level headings are `

    1. …

      2. ` inside the
        . That is invalid nesting the parser keeps as-is, so the
      1. is still a list item of the
          and still increments its counter. Style it in place; do NOT "fix" the nesting — moving the
        1. renumbers the contract. */ body.pubv2 .pv2p-legal > ol { padding-left: 46px; margin-bottom: var(--pv2p-s4); } body.pubv2 .pv2p-legal > ol > h4 { margin: var(--pv2p-s6) 0 var(--pv2p-s3); padding: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: #fff; } body.pubv2 .pv2p-legal > ol > h4:first-child { margin-top: 0; } body.pubv2 .pv2p-legal > ol > h4 > li { margin: 0; padding: 0; } body.pubv2 .pv2p-legal > ol > h4 > li::marker { color: var(--pv2-gold); font-weight: 700; font-size: 15px; } /* clause bodies: a hair smaller and quieter than the section heads, with the marker dim so the sentence outweighs its own number. */ body.pubv2 .pv2p-legal ol ol { padding-left: 26px; } body.pubv2 .pv2p-legal ol ol > li { margin-bottom: var(--pv2p-s2); } body.pubv2 .pv2p-legal ol ol > li::marker { color: var(--pv2-text-muted); font-weight: 600; } body.pubv2 .pv2p-legal ol ol ol > li::marker { color: var(--pv2-text-dim); font-weight: 400; } /* the separators between clauses sit INSIDE the
            , so they are list children with no marker of their own — keep them quiet and tight. */ body.pubv2 .pv2p-legal > ol > hr { margin: var(--pv2p-s5) 0 0; } body.pubv2 .pv2p-legal > ol > p { margin-bottom: var(--pv2p-s3); } @media only screen and (max-width: 560px) { body.pubv2 .pv2p-legal > ol { padding-left: 30px; } body.pubv2 .pv2p-legal > ol > h4 { font-size: 16px; } body.pubv2 .pv2p-legal ol ol { padding-left: 21px; } } /* ---------- CONTENTS — the block a long document opens with (.pv2p-toc) ---- /terms/ is 13 sections of numbered clauses with nothing to navigate by; the reader arriving from a support reply is looking for ONE clause. The markup is Smarty-gated ({if $ssPubV2}) in the template — same as the id anchors it points at — so the classic render stays byte-identical. Built for /terms/ AND /privacy/: both document pages use this one component, never a per-page lookalike. */ body.pubv2 nav.pv2p-toc { margin: var(--pv2p-s4) 0 var(--pv2p-s2); padding: var(--pv2p-s3) var(--pv2p-s4); background: var(--pv2-field); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-lg); } body.pubv2 .pv2p-toc-label { display: block; margin: 0 0 var(--pv2p-s1); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pv2-text-muted); } /* the ol tag is load-bearing: .pv2p-prose ol is (0,2,2) and a bare .pv2p-toc-list would be (0,2,1) and lose its list-style/padding reset to the prose ramp. Declared after the prose + legal blocks so the (0,2,2) ties resolve here. */ body.pubv2 ol.pv2p-toc-list { list-style: none; margin: 0; padding: 0; } @media only screen and (min-width: 600px) { /* 13 single-line rows in one column is a screen of chrome before the document starts; two balanced columns halve it. break-inside on the rows keeps a link from splitting across the gap. */ body.pubv2 ol.pv2p-toc-list { columns: 2; column-gap: var(--pv2p-s5); } } body.pubv2 ol.pv2p-toc-list > li { margin: 0; padding: 0; break-inside: avoid; } body.pubv2 ol.pv2p-toc-list > li > a { display: flex; align-items: baseline; gap: 9px; padding: 3px 2px; color: var(--pv2-text-soft); } body.pubv2 ol.pv2p-toc-list > li > a:hover, body.pubv2 ol.pv2p-toc-list > li > a:focus { color: var(--pv2-gold); } /* the numeral mirrors the document's own gold clause markers (.pv2p-legal > ol > h4 > li::marker), right-aligned in a fixed gutter so the titles share one left edge. */ body.pubv2 .pv2p-toc-n { flex: 0 0 26px; text-align: right; font-size: 12px; font-weight: 600; color: var(--pv2-gold); } /* the rows own their line -> grow the row (hit-rule case 1). Padding, not min-height: a min-height box under align-items:baseline parks the text at the top of the 44px cell instead of centring it. 22.7px line box + 2x11px = 44.7px. */ @media (hover: none) and (pointer: coarse), (max-width: 900px) { body.pubv2 ol.pv2p-toc-list > li > a { padding: 11px 2px; } } /* anchor landing: a heading that jumps flush against the viewport edge reads as cut off; 14px of scroll margin keeps a breath above it. On .pv2p-doc so /privacy/ inherits it for its own anchors. */ body.pubv2 .pv2p-doc [id] { scroll-margin-top: 14px; } /* ------------------------------------------------------------ GRID + SPLIT ------------------------------------------------------------ */ body.pubv2 .pv2p-grid { display: grid; gap: var(--pv2p-s5); grid-template-columns: minmax(0, 1fr); align-items: start; } /* FIXED track counts, never auto-fit: `repeat(auto-fit, minmax(Npx,1fr))` silently wraps 5+1 when the tiles do not divide into the rail, and a ragged wrap reads as sloppy (KPI strip rejection, CLAUDE-DESIGN-SYSTEM). */ @media only screen and (min-width: 700px) { body.pubv2 .pv2p-grid.cols-2, body.pubv2 .pv2p-grid.cols-3, body.pubv2 .pv2p-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media only screen and (min-width: 1000px) { body.pubv2 .pv2p-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.pubv2 .pv2p-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* THE ORPHAN. Fixed track counts stop the *silent* 5+1 wrap, but they cannot stop 3 cards landing in 2 tracks — measured on /affiliates/ and /hytale-creators/ at 768: a cols-3 grid rendering 2 + 1 with a half-empty last row, which is the same ragged read this contract rejects. When the last item would sit alone on its row it spans the full width instead, so the row reads as a deliberate wide card. Positional selectors are fine HERE — this is our own component with a known DOM, not a game-page section with 64 different orderings. */ @media only screen and (min-width: 700px) and (max-width: 999px) { body.pubv2 .pv2p-grid.cols-2 > *:last-child:nth-child(odd), body.pubv2 .pv2p-grid.cols-3 > *:last-child:nth-child(odd), body.pubv2 .pv2p-grid.cols-4 > *:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media only screen and (min-width: 1000px) { body.pubv2 .pv2p-grid.cols-2 > *:last-child:nth-child(odd) { grid-column: 1 / -1; } body.pubv2 .pv2p-grid.cols-3 > *:last-child:nth-child(3n + 1) { grid-column: 1 / -1; } body.pubv2 .pv2p-grid.cols-4 > *:last-child:nth-child(4n + 1) { grid-column: 1 / -1; } } /* `.even` means equal-height cards. `grid-auto-rows: 1fr` sizes the TRACK; the item still has to fill it, and .pv2p-grid's own `align-items: start` was stopping that — so `.even` did nothing visible and pages measured ragged card bottoms. Both halves are needed. */ body.pubv2 .pv2p-grid.even { grid-auto-rows: 1fr; align-items: stretch; } body.pubv2 .pv2p-grid.even > *, body.pubv2 .pv2p-grid.even > * > .pv2p-card { height: 100%; } /* Bootstrap 3 .row uses ::before/::after as a clearfix. Inside a grid container those pseudos become GRID ITEMS and take real cells, which pushes every card one slot right and leaves a ragged tail. .pv2p-split has always killed them; .pv2p-grid and .pv2p-media did not, so neither could be laid over an existing `.row` — the gap the home-page agent hit. Harmless when the element is not a .row (there is no pseudo to remove). */ body.pubv2 .pv2p-grid:before, body.pubv2 .pv2p-grid:after, body.pubv2 .pv2p-media:before, body.pubv2 .pv2p-media:after { content: none; } body.pubv2 .pv2p-grid, body.pubv2 .pv2p-media { margin-left: 0; margin-right: 0; } /* .pv2p-cell — what .pv2p-main / .pv2p-aside are to .pv2p-split, for the other two grids. A page ADDS it beside the .col-md-* that is already on the element (RENAME NOTHING): the class stays, its float, width and gutter padding stop applying, and the grid owns the track. */ body.pubv2 .pv2p-cell { min-width: 0; float: none; width: auto; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } body.pubv2 .pv2p-cell:before, body.pubv2 .pv2p-cell:after { content: none; } /* .pv2p-nest — a .container nested inside another .container pays the 15px gutter twice and lands its content 30px inboard of everything above it. On the game pages `.container > .container.margin-top60` does exactly that on 293 templates. Add this beside the inner .container. */ body.pubv2 .pv2p-nest { width: auto; max-width: none; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } /* main + aside. One column below 900 with the aside AFTER the main — a sidebar is never the first thing a phone shows. THE BOOTSTRAP CLASSES STAY ON THE MARKUP. `.row` / `.col-md-*` are matched by JS elsewhere on this site (the order page rebuilds its form by walking exactly those hooks), so a page ADDS .pv2p-split / .pv2p-main / .pv2p-aside beside them and never renames them. Which means this component has to neutralise the float grid it is layered over — and it does that HERE, once, through its own class, never with a bare `.row` or `.col-md-6` rule. */ body.pubv2 .pv2p-split { display: grid; gap: var(--pv2p-s5); grid-template-columns: minmax(0, 1fr); align-items: start; margin-left: 0; margin-right: 0; /* the .row negative gutter */ } /* Bootstrap 3 .row uses ::before/::after as a clearfix; inside a grid container those pseudos become GRID ITEMS and occupy real cells, which lands the cards in the wrong columns (the exact trap the Death Star KPI row hit). Kill them in grid mode only. */ body.pubv2 .pv2p-split:before, body.pubv2 .pv2p-split:after { content: none; } body.pubv2 .pv2p-main, body.pubv2 .pv2p-aside { min-width: 0; float: none; width: auto; padding-left: 0; padding-right: 0; } /* a bare .row wrapping content that is NOT a bootstrap column: the -15px gutter would push the block past the container's own padding and, on a phone, straight to the viewport edge. Scoped through .pv2p-plain, which the page adds; the .row class itself is left on the element. */ body.pubv2 .pv2p .pv2p-plain { margin-left: 0; margin-right: 0; } body.pubv2 .pv2p .pv2p-plain:before, body.pubv2 .pv2p .pv2p-plain:after { content: none; } @media only screen and (min-width: 900px) { body.pubv2 .pv2p-split { grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 340px); gap: var(--pv2p-s5) var(--pv2p-s6); } body.pubv2 .pv2p-split.rev { grid-template-columns: clamp(260px, 30%, 340px) minmax(0, 1fr); } body.pubv2 .pv2p-split.rev > .pv2p-main { order: 2; } body.pubv2 .pv2p-split.rev > .pv2p-aside { order: 1; } } /* ------------------------------------------------------------ WELL / NOTE / QUOTE `.alert` is a Bootstrap class and must never be used as a modifier (CLAUDE-DESIGN-SYSTEM) — the public note component is .pv2p-note. ------------------------------------------------------------ */ body.pubv2 .pv2p-well { background: var(--pv2-field); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius); padding: var(--pv2p-s3) var(--pv2p-s4); } body.pubv2 .pv2p-note { position: relative; padding: 12px 14px; margin: 0 0 var(--pv2p-s3); background: var(--pv2-field); border: 1px solid var(--pv2-border); border-left: 3px solid var(--pv2-border-strong); border-radius: var(--pv2-radius); font-size: 13.5px; line-height: 1.55; color: var(--pv2-text-soft); } body.pubv2 .pv2p-note > *:first-child { margin-top: 0; } body.pubv2 .pv2p-note > *:last-child { margin-bottom: 0; } body.pubv2 .pv2p-note.ok { border-left-color: var(--pv2-ok); background: var(--pv2-ok-bg); } body.pubv2 .pv2p-note.warn { border-left-color: var(--pv2-warn); background: var(--pv2-warn-bg); } body.pubv2 .pv2p-note.danger { border-left-color: var(--pv2-danger); background: var(--pv2-danger-bg); } body.pubv2 .pv2p-note.info { border-left-color: var(--pv2-info); background: var(--pv2-info-bg); } body.pubv2 .pv2p-quote { margin: 0 0 var(--pv2p-s3); padding: 11px 14px; border: 0; border-left: 3px solid var(--pv2-accent); background: rgba(255, 255, 255, 0.026); border-radius: 0 var(--pv2-radius) var(--pv2-radius) 0; font-size: 13.5px; line-height: 1.55; color: #dcdcdc; } body.pubv2 .pv2p-quote p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; } body.pubv2 .pv2p-quote cite { display: block; margin: 7px 0 0; font-size: 11.5px; font-style: normal; color: var(--pv2-text-dim); } /* ------------------------------------------------------------ TYPE HELPERS ------------------------------------------------------------ */ body.pubv2 .pv2p-lede { margin: 0 0 var(--pv2p-s4); font-size: 15.5px; line-height: 1.6; font-weight: 400; color: #e8e8e8; } body.pubv2 .pv2p-label { display: block; margin: 0 0 var(--pv2p-s2); padding: 0; font-family: var(--pv2p-font); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--pv2-text-dim); } body.pubv2 .pv2p-meta { font-size: 11.5px; line-height: 1.45; color: var(--pv2-text-dim); } /* .pv2p-shead — THE MARKETING SECTION HEAD. The third size the system was missing: .pv2p-chead is a 15px chrome bar for a card, .pv2p-prose h2 is a 19px heading inside running copy, and neither is the 22-26px head that opens a marketing band. Styles WHATEVER heading tag it is handed, for the same reason .pv2p-chead does — the outline is frozen SEO content. Put it on the wrapper, or directly on the heading. */ body.pubv2 .pv2p-shead { margin: 0 0 var(--pv2p-s4); padding: 0; border: 0; } body.pubv2 .pv2p-shead > h1, body.pubv2 .pv2p-shead > h2, body.pubv2 .pv2p-shead > h3, body.pubv2 .pv2p-shead > h4, body.pubv2 .pv2p-shead > h5, body.pubv2 .pv2p-shead > h6, body.pubv2 h1.pv2p-shead, body.pubv2 h2.pv2p-shead, body.pubv2 h3.pv2p-shead, body.pubv2 h4.pv2p-shead, body.pubv2 h5.pv2p-shead, body.pubv2 h6.pv2p-shead { font-family: var(--pv2p-font); font-size: 20px; font-weight: 400; line-height: 1.35; color: #fff; margin: 0 0 var(--pv2p-s2); padding: 0; border: 0; text-transform: none; letter-spacing: .005em; } body.pubv2 .pv2p-shead-sub, body.pubv2 .pv2p-shead > p { margin: 0; padding: 0; border: 0; font-size: 14.5px; line-height: 1.6; color: var(--pv2-text-muted); max-width: 78ch; } @media only screen and (min-width: 1400px) { body.pubv2 .pv2p-shead > h1, body.pubv2 .pv2p-shead > h2, body.pubv2 .pv2p-shead > h3, body.pubv2 .pv2p-shead > h4, body.pubv2 h1.pv2p-shead, body.pubv2 h2.pv2p-shead, body.pubv2 h3.pv2p-shead, body.pubv2 h4.pv2p-shead { font-size: 22px; } } @media only screen and (max-width: 560px) { body.pubv2 .pv2p-shead > h1, body.pubv2 .pv2p-shead > h2, body.pubv2 .pv2p-shead > h3, body.pubv2 .pv2p-shead > h4, body.pubv2 h1.pv2p-shead, body.pubv2 h2.pv2p-shead, body.pubv2 h3.pv2p-shead, body.pubv2 h4.pv2p-shead { font-size: 18px; } } /* ------------------------------------------------------------ BUTTONS — mirror .pv2-btn / .ab-btn. The gold is spent on the ONE primary action per view; everything else is dark chrome. Three solid gold buttons in a row is the "way too bright" rejection. ------------------------------------------------------------ */ /* SCOPE: the button does NOT require a .pv2p shell. It was originally written `body.pubv2 .pv2p .pv2p-btn` for every variant, which meant a CTA in an absolutely-positioned hero overlay — where a .pv2p shell cannot go — got the base rule and silently lost its hover, its variants and its 44px touch floor. Reported by the home-page agent; the page correctly left bootstrap buttons in place rather than half-apply a component. The `a.` / `button.` companions are not decoration. `body.pubv2 .pv2p a` is (0,2,2) and `body.pubv2 .pv2p a:hover` is (0,3,2); a bare `.pv2p-btn` (0,2,1) and `.pv2p-btn:hover` (0,3,1) both LOSE to them inside a shell and the button repaints gold-on-gold. The tagged forms tie and win on source order, which is why they are declared after the link rule. The .primary/.ghost/.sm/.lg variants are (0,3,1)+ and clear the link rule on their own. */ body.pubv2 .pv2p-btn, body.pubv2 a.pv2p-btn, body.pubv2 button.pv2p-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--pv2p-ctl); padding: 0 20px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--pv2-radius); color: #fff; font-family: var(--pv2p-font); font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: .01em; white-space: nowrap; text-decoration: none; text-shadow: none; box-shadow: none; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; } body.pubv2 .pv2p-btn:hover, body.pubv2 .pv2p-btn:focus, body.pubv2 a.pv2p-btn:hover, body.pubv2 a.pv2p-btn:focus, body.pubv2 button.pv2p-btn:hover, body.pubv2 button.pv2p-btn:focus { background-color: var(--pv2-hover); border-color: rgba(255, 255, 255, 0.5); color: #fff; text-decoration: none; } /* The variants carry the tag too, and this one is measured, not theoretical: Part 3's `.callout .btn` is (0,3,1) and Part 3 is LATER in this file, so a bare `.pv2p-btn.lg` (0,3,1) tied with it and lost — the "Learn More About Creator Program" button inside the /affiliates/ callout dropped from 46px to 40px the moment the variants stopped requiring a .pv2p shell. The tagged forms are (0,3,2) and clear the shared-vocabulary layer outright. */ body.pubv2 .pv2p-btn.primary, body.pubv2 a.pv2p-btn.primary, body.pubv2 button.pv2p-btn.primary { background: var(--pv2-gold); border-color: var(--pv2-gold); color: #fff; font-weight: 600; } body.pubv2 .pv2p-btn.primary:hover, body.pubv2 .pv2p-btn.primary:focus, body.pubv2 a.pv2p-btn.primary:hover, body.pubv2 a.pv2p-btn.primary:focus, body.pubv2 button.pv2p-btn.primary:hover, body.pubv2 button.pv2p-btn.primary:focus { background: var(--pv2-gold-deep); border-color: var(--pv2-gold-deep); color: #fff; } body.pubv2 .pv2p-btn.ghost, body.pubv2 a.pv2p-btn.ghost, body.pubv2 button.pv2p-btn.ghost { background: transparent; border-color: var(--pv2-border-strong); color: var(--pv2-text-soft); } body.pubv2 .pv2p-btn.ghost:hover, body.pubv2 a.pv2p-btn.ghost:hover, body.pubv2 button.pv2p-btn.ghost:hover { background: var(--pv2-hover); color: #fff; } body.pubv2 .pv2p-btn.sm, body.pubv2 a.pv2p-btn.sm, body.pubv2 button.pv2p-btn.sm { height: 32px; padding: 0 14px; font-size: 13px; } body.pubv2 .pv2p-btn.lg, body.pubv2 a.pv2p-btn.lg, body.pubv2 button.pv2p-btn.lg { height: 46px; padding: 0 26px; font-size: 15px; } body.pubv2 .pv2p-btn.block, body.pubv2 a.pv2p-btn.block, body.pubv2 button.pv2p-btn.block { width: 100%; } body.pubv2 .pv2p-btn[disabled], body.pubv2 .pv2p-btn.disabled { opacity: .45; cursor: not-allowed; } body.pubv2 .pv2p-btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pv2p-s2); } /* ------------------------------------------------------------ PILLS + CHIPS ------------------------------------------------------------ */ body.pubv2 .pv2p-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; font-family: var(--pv2p-font); font-size: 11px; font-weight: 600; letter-spacing: .03em; white-space: nowrap; background: var(--pv2-field); color: var(--pv2-text-soft); border: 1px solid var(--pv2-border); } body.pubv2 .pv2p-pill.ok { background: var(--pv2-ok-bg); color: var(--pv2-ok); border-color: rgba(100, 217, 119, 0.35); } body.pubv2 .pv2p-pill.warn { background: var(--pv2-warn-bg); color: var(--pv2-warn); border-color: rgba(240, 173, 78, 0.35); } body.pubv2 .pv2p-pill.danger { background: var(--pv2-danger-bg); color: var(--pv2-danger); border-color: rgba(242, 87, 87, 0.35); } body.pubv2 .pv2p-pill.info { background: var(--pv2-info-bg); color: var(--pv2-info); border-color: rgba(91, 192, 222, 0.35); } body.pubv2 .pv2p-pill.gold { background: var(--pv2-surface); color: var(--pv2-gold); border-color: var(--pv2-border-strong); } body.pubv2 .pv2p-chiplist { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; } body.pubv2 .pv2p-chiplist > li { margin: 0; } body.pubv2 .pv2p-chip, body.pubv2 .pv2p a.pv2p-chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--pv2-field); border: 1px solid var(--pv2-border); color: var(--pv2-text-soft); font-family: var(--pv2p-font); font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color .12s, border-color .12s, color .12s; } body.pubv2 .pv2p a.pv2p-chip:hover { background: var(--pv2-hover); border-color: var(--pv2-border-strong); color: #fff; } /* ------------------------------------------------------------ FORM CONTROLS — every control on a row shares ONE explicit height (design-system HARD RULE: never rely on padding math to line them up). ------------------------------------------------------------ */ body.pubv2 .pv2p-field { margin: 0 0 var(--pv2p-s3); } body.pubv2 .pv2p-flabel { display: block; margin: 0 0 var(--pv2p-s1); font-family: var(--pv2p-font); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pv2-text-muted); } body.pubv2 .pv2p-input, body.pubv2 .pv2p-select, body.pubv2 .pv2p-textarea { width: 100%; height: var(--pv2p-ctl); padding: 0 12px; background: var(--pv2-field); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius); color: #fff; box-shadow: none; font-family: var(--pv2p-font); font-size: 14px; font-weight: 400; margin: 0; transition: border-color .12s; } body.pubv2 .pv2p-textarea { height: auto; min-height: 110px; padding: 10px 12px; line-height: 1.55; resize: vertical; } body.pubv2 .pv2p-input::placeholder, body.pubv2 .pv2p-textarea::placeholder { color: var(--pv2-text-dim); } /* ONE focus indicator: the accent border. No outline, no halo — the same call the auth surface locked in for the field people actually type in. */ body.pubv2 .pv2p-input:focus, body.pubv2 .pv2p-select:focus, body.pubv2 .pv2p-textarea:focus { outline: none; border-color: var(--pv2-accent); box-shadow: none; } body.pubv2 .pv2p-ctlrow { display: flex; align-items: stretch; gap: var(--pv2p-s2); flex-wrap: wrap; } body.pubv2 .pv2p-ctlrow > * { margin: 0; } /* THE checkbox — the product-wide standard from panel-v2-core.css, so the public site can never grow a second one. Never write a per-page box. */ body.pubv2 .pv2p input[type="checkbox"], body.pubv2 .pv2p input[type="radio"] { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0; padding: 0; background: var(--pv2-field); border: 1px solid var(--pv2-border-strong); border-radius: 3px; cursor: pointer; position: relative; vertical-align: middle; flex-shrink: 0; transition: background-color .12s, border-color .12s; } body.pubv2 .pv2p input[type="radio"] { border-radius: 50%; } body.pubv2 .pv2p input[type="checkbox"]:hover, body.pubv2 .pv2p input[type="radio"]:hover { border-color: var(--pv2-accent); } body.pubv2 .pv2p input[type="checkbox"]:checked, body.pubv2 .pv2p input[type="radio"]:checked { background: var(--pv2-gold); border-color: var(--pv2-gold); } /* the tick is CSS geometry, not a glyph — fa-subset carries no guarantee for a page that later drops the subset link. */ body.pubv2 .pv2p input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 50%; top: 46%; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); } body.pubv2 .pv2p input[type="radio"]:checked::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); } body.pubv2 .pv2p input[type="checkbox"]:focus-visible, body.pubv2 .pv2p input[type="radio"]:focus-visible { outline: 2px solid rgba(213, 168, 74, .4); outline-offset: 1px; } /* ------------------------------------------------------------ TABLES — fixed layout + border-box, the two cures every DataTables right-edge bleed in this codebase came back to. On phones the table scrolls INSIDE its wrapper, never the page. ------------------------------------------------------------ */ body.pubv2 .pv2p-tablewrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } body.pubv2 .pv2p-table { width: 100%; border-collapse: collapse; table-layout: fixed; } body.pubv2 .pv2p-table th, body.pubv2 .pv2p-table td { box-sizing: border-box !important; } body.pubv2 .pv2p-table th { text-align: left; padding: 10px 12px; background: var(--pv2-surface); font-family: var(--pv2p-font); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pv2-text-muted); border-bottom: 1px solid var(--pv2-border); } body.pubv2 .pv2p-table td { padding: 11px 12px; font-size: 13px; color: var(--pv2-text-soft); border-bottom: 1px solid var(--pv2-line); vertical-align: top; } body.pubv2 .pv2p-table tr:last-child td { border-bottom: 0; } body.pubv2 .pv2p-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); } /* label / value rows — the non-tabular alternative to a two-column table */ body.pubv2 .pv2p-dl { margin: 0; display: grid; gap: 0; } body.pubv2 .pv2p-dl > div { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--pv2p-s2) var(--pv2p-s4); padding: 10px 0; border-bottom: 1px solid var(--pv2-line); } body.pubv2 .pv2p-dl > div:last-child { border-bottom: 0; } body.pubv2 .pv2p-dl dt { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--pv2-text-muted); } body.pubv2 .pv2p-dl dd { margin: 0; font-size: 13.5px; color: var(--pv2-text-soft); min-width: 0; } @media only screen and (max-width: 560px) { body.pubv2 .pv2p-dl > div { grid-template-columns: minmax(0, 1fr); gap: 3px; } } /* stat tiles are CHIPS, not banners — a 400px tile holding a 4-character number is 80% empty (About page finding). BUT a flex-wrap chip row IS the ragged wrap this contract rejects for tile strips: measured, a 4-up wrapped 3+1 at 1100 and a 3-up wrapped 2+1 at 768. The strip is now a grid on FIXED track counts stepped at breakpoints, same rule as .pv2p-grid, and the chip idea survives as the track width — the tiles stay narrow, they just stop wrapping raggedly. `.pv2p-stats.flow` keeps the old free-wrapping behaviour for a genuinely variable-length run. */ body.pubv2 .pv2p-stats { display: grid; gap: var(--pv2p-s2); margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); align-items: stretch; } body.pubv2 .pv2p-stats:before, body.pubv2 .pv2p-stats:after { content: none; } /* The ramp NEVER passes through a track count the tile count does not divide by — a stat strip is always an exact 2, 3 or 4, so it should never orphan in the first place. That is why cols-3 goes 1 -> 3 and skips 2 (a 3-up in 2 tracks is the 2+1 that was reported), and why the orphan-span trick used on .pv2p-grid is NOT used here: a double-width tile holding a four-character number is the "80% empty" rejection this component exists to avoid. */ @media only screen and (min-width: 600px) { body.pubv2 .pv2p-stats.cols-2, body.pubv2 .pv2p-stats.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media only screen and (min-width: 640px) { body.pubv2 .pv2p-stats, body.pubv2 .pv2p-stats.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media only screen and (min-width: 1000px) { body.pubv2 .pv2p-stats.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } body.pubv2 .pv2p-stats.flow { display: flex; flex-wrap: wrap; } body.pubv2 .pv2p-stats.flow > .pv2p-stat { min-width: 200px; } body.pubv2 .pv2p-stat { /* min-width is 0 for the grid: a 200px floor on a grid item overflows a narrow track instead of shrinking. .flow puts the chip floor back. */ flex: 0 1 300px; min-width: 0; margin: 0; background: var(--pv2-field); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius); padding: 11px 12px; } body.pubv2 .pv2p-stat b { display: block; font-family: var(--pv2p-font); font-size: 19px; font-weight: 700; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; } body.pubv2 .pv2p-stat span { display: block; margin: 5px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--pv2-text-muted); } /* ------------------------------------------------------------ .pv2p-table.rows — THE PHONE ROW-CARD. Reported as the single biggest remaining defect on the locations pages: a four-column server table inside a 360px rail either scrolls sideways inside its wrapper (so half the row is always off-screen and there is no affordance saying so) or squeezes IP:Port into 80px. Below 560 each becomes a card and each a label/value row. The label comes from `data-label` on the , which the page adds — a presentation attribute, and the string is the that is already in the DOM directly above it, so no new copy enters the page. THE IS NOT `display: none`. It is visually hidden and left in the accessibility tree: hiding it outright would delete the column names for a screen reader, which IS a content change. Same reason `visibility:hidden` is load-bearing elsewhere in this sheet. A with no data-label (an empty-state `colspan` row) renders as a plain full-width line, no label gutter. ------------------------------------------------------------ */ @media only screen and (max-width: 560px) { body.pubv2 .pv2p-table.rows { table-layout: auto; width: 100%; } body.pubv2 .pv2p-table.rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } body.pubv2 .pv2p-table.rows tbody, body.pubv2 .pv2p-table.rows tr, body.pubv2 .pv2p-table.rows td { display: block; width: auto; } body.pubv2 .pv2p-table.rows tr { background: var(--pv2-field); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius); margin: 0 0 var(--pv2p-s2); padding: 3px 0; } body.pubv2 .pv2p-table.rows tr:last-child { margin-bottom: 0; } body.pubv2 .pv2p-table.rows tbody tr:hover { background: var(--pv2-field); } body.pubv2 .pv2p-table.rows td { display: flex; align-items: baseline; gap: var(--pv2p-s3); border: 0; padding: 7px 12px; font-size: 13px; min-width: 0; } body.pubv2 .pv2p-table.rows td[data-label]:before { content: attr(data-label); flex: 0 0 38%; min-width: 0; font-family: var(--pv2p-font); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--pv2-text-muted); } body.pubv2 .pv2p-table.rows td > * { min-width: 0; } } /* ------------------------------------------------------------ .pv2p-map — a frame for a map or any other JS-drawn canvas the page does not control the internals of. It owns the border, the surface and the clip; it deliberately owns NO height, because the plugins that draw into these (jvectormap and friends) write an inline height and would win anyway. Pair it with a width query if the drawing is not responsive. ------------------------------------------------------------ */ body.pubv2 .pv2p-map { position: relative; overflow: hidden; background: var(--pv2-surface); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-lg); } body.pubv2 .pv2p-map > img, body.pubv2 .pv2p-map > svg { display: block; width: 100%; height: auto; max-width: 100%; } body.pubv2 .pv2p-map-cap { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--pv2-text-dim); } /* ------------------------------------------------------------ .pv2p-steps / .pv2p-step — a numbered "how it works" run. The badge takes whatever the page puts in .pv2p-step-n, so the numeral stays real markup. `.pv2p-steps.autonum` generates it from a CSS counter instead, for a page that genuinely has no numeral to keep — use that only where no number exists today, never to replace one that does. ------------------------------------------------------------ */ body.pubv2 .pv2p-steps { display: grid; gap: var(--pv2p-s5); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; counter-reset: pv2pstep; } body.pubv2 .pv2p-steps:before, body.pubv2 .pv2p-steps:after { content: none; } @media only screen and (min-width: 700px) { body.pubv2 .pv2p-steps, body.pubv2 .pv2p-steps.cols-2, body.pubv2 .pv2p-steps.cols-3, body.pubv2 .pv2p-steps.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media only screen and (min-width: 1000px) { body.pubv2 .pv2p-steps, body.pubv2 .pv2p-steps.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.pubv2 .pv2p-steps.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } body.pubv2 .pv2p-step { position: relative; margin: 0; padding: 0 0 0 48px; min-width: 0; } body.pubv2 .pv2p-step-n { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pv2-field); border: 1px solid var(--pv2-border-strong); color: var(--pv2-gold); font-family: var(--pv2p-font); font-size: 13px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } body.pubv2 .pv2p-steps.autonum > .pv2p-step:before { counter-increment: pv2pstep; content: counter(pv2pstep); position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pv2-field); border: 1px solid var(--pv2-border-strong); color: var(--pv2-gold); font-family: var(--pv2p-font); font-size: 13px; font-weight: 700; line-height: 1; } body.pubv2 .pv2p-step > h1, body.pubv2 .pv2p-step > h2, body.pubv2 .pv2p-step > h3, body.pubv2 .pv2p-step > h4, body.pubv2 .pv2p-step > h5, body.pubv2 .pv2p-step > h6, body.pubv2 .pv2p-step-title { margin: 6px 0 var(--pv2p-s1); padding: 0; border: 0; font-family: var(--pv2p-font); font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff; text-transform: none; letter-spacing: 0; } body.pubv2 .pv2p-step p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--pv2-text-muted); } /* ------------------------------------------------------------ .pv2p-icon — the icon chip an "icon feature" card is built from. It is NOT a component of its own: compose it with .pv2p-card + .pv2p-cbody, or with .pv2p-step. Font-style is forced normal because `i` is both the italic element and Font Awesome's carrier tag on this site. ------------------------------------------------------------ */ body.pubv2 .pv2p-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--pv2-radius); background: var(--pv2-field); border: 1px solid var(--pv2-border); color: var(--pv2-accent); font-size: 16px; line-height: 1; margin: 0 0 var(--pv2p-s3); } body.pubv2 .pv2p-icon.round { border-radius: 50%; } body.pubv2 .pv2p-icon.gold { background: rgba(234, 168, 36, 0.10); border-color: rgba(234, 168, 36, 0.32); color: var(--pv2-gold); } body.pubv2 .pv2p-icon i, body.pubv2 .pv2p-icon em { font-style: normal; line-height: 1; } /* ------------------------------------------------------------ LISTS — .pv2p-list is the marker-free list. `.check` draws its tick with CSS borders. The theme's ul.list-icon asks for `font-family: FontAwesome` (FA4) with weight 400 — a family the public site does not load at all, so those bullets render as NOTHING today. Anywhere .pv2p-list.check is applied over that markup it also repairs it. ------------------------------------------------------------ */ body.pubv2 .pv2p-list { margin: 0 0 var(--pv2p-s3); padding: 0; list-style: none; } body.pubv2 .pv2p-list > li { position: relative; margin: 0 0 var(--pv2p-s2); padding: 0 0 0 24px; font-size: 13.5px; line-height: 1.55; color: var(--pv2-text-soft); } body.pubv2 .pv2p-list > li:last-child { margin-bottom: 0; } body.pubv2 .pv2p-list > li:before { content: none; } /* kill the theme's dead FA4 bullet */ body.pubv2 .pv2p-list.check > li:after { content: ''; position: absolute; left: 3px; top: 6px; width: 5px; height: 9px; border: solid var(--pv2-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); } body.pubv2 .pv2p-list.dot > li:after { content: ''; position: absolute; left: 4px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--pv2-text-dim); } body.pubv2 .pv2p-list.plain > li { padding-left: 0; } body.pubv2 .pv2p-list.inline { display: flex; flex-wrap: wrap; gap: var(--pv2p-s2) var(--pv2p-s4); } body.pubv2 .pv2p-list.inline > li { margin: 0; } /* ------------------------------------------------------------ ACCORDION — rides the theme's existing div.toggle markup and its jQuery (_toggle() in js/scripts.js), which slideDown/slideUp the .toggle-content and flips .active on the item. Two consequences that are load-bearing: - NEVER set `display` on .toggle-content. The animation writes an inline display and an !important here would freeze a panel open. - The open/closed state class is the theme's `.active`, not one of ours, so the chevron and the gold edge key off `.active`. The chevron is drawn from borders. fa-subset ships no chevron-down / angle-down / plus / minus at all, so a glyph here would render as nothing on the live site and nobody would see it in a diff. ------------------------------------------------------------ */ body.pubv2 .pv2p-acc { margin: 0; background: var(--pv2-panel); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-lg); box-shadow: var(--pv2p-shadow); overflow: hidden; } body.pubv2 .pv2p-acc-item { margin: 0; position: relative; clear: none; border-top: 1px solid var(--pv2-line); } body.pubv2 .pv2p-acc > .pv2p-acc-item:first-child { border-top: 0; } body.pubv2 .pv2p-acc-item > label { position: relative; display: flex; align-items: center; gap: var(--pv2p-s3); margin: 0; padding: 14px 46px 14px var(--pv2p-pad); min-height: 52px; background: transparent; border: 0; border-bottom: 0; border-radius: 0; color: #fff; font-family: var(--pv2p-font); font-size: 14.5px; font-weight: 600; line-height: 1.45; cursor: pointer; user-select: none; transition: background-color .12s, color .12s; } body.pubv2 .pv2p-acc-item > label:hover { background: rgba(255, 255, 255, 0.03); color: var(--pv2-gold); } body.pubv2 .pv2p-acc-item > label:focus-visible { outline: 2px solid rgba(213, 168, 74, .45); outline-offset: -2px; } /* the theme draws its own CSS triangle on both states — remove both */ body.pubv2 .pv2p-acc-item > label:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border: 0; margin: 0; right: auto; background: transparent; transition: background-color .14s; } /* THE OPEN EDGE RUNS THE FULL HEIGHT OF THE OPEN ITEM, not just its question row. It used to be a 3px bar on the label's :before, which stopped at the label's bottom edge — so an open panel read as a gold question with an unrelated paragraph under it rather than as one object. Ryan on the game-page copy of this component: "I don't like the way it looks." An inset shadow, not a border-left: a border would shift every label 3px right on open and the rows would twitch. The label's :before stays declared and transparent because it is the THEME's triangle being suppressed — deleting the rule brings the triangle back. */ body.pubv2 .pv2p-acc-item.active { box-shadow: inset 3px 0 0 var(--pv2-gold); } body.pubv2 .pv2p-acc-item.active > label:before { background: transparent; border: 0; margin: 0; } body.pubv2 .pv2p-acc-item.active > label { color: var(--pv2-gold); background: rgba(234, 168, 36, 0.045); } /* the chevron */ body.pubv2 .pv2p-acc-item > label:after { content: ''; position: absolute; right: 21px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--pv2-text-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transform-origin: 50% 50%; transition: transform .18s ease, border-color .12s; } body.pubv2 .pv2p-acc-item.active > label:after { border-color: var(--pv2-gold); margin-top: -2px; transform: rotate(225deg); } /* THE ANSWER'S TOP PADDING WAS 2px AGAINST A BOTTOM OF 18px. Measured on /services/game_servers/7_days_to_die/ and identical here: `2px 18px 18px`, so the answer's first line sat 2px under the question row it belongs to and then floated 18px clear of the card's bottom edge. Ryan: "The top margin where the text reads is really weird." The asymmetry was the bug — an answer has to breathe from its question. 14/18 now, the bottom still carrying the card's closing edge. */ body.pubv2 .pv2p-acc-item > .toggle-content, body.pubv2 .pv2p-acc-body { margin: 0; padding: var(--pv2p-s3) var(--pv2p-pad) var(--pv2p-s4); background: transparent; border: 0; border-radius: 0; font-size: var(--pv2p-fs-body); line-height: var(--pv2p-lh-body); color: var(--pv2-text-soft); } body.pubv2 .pv2p-acc-item > .toggle-content > *:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { body.pubv2 .pv2p-acc-item > label:after { transition: none; } } /* ------------------------------------------------------------ HERO + MEDIA ------------------------------------------------------------ */ body.pubv2 .pv2p-hero { position: relative; overflow: hidden; background: var(--pv2-panel); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-lg); box-shadow: var(--pv2p-shadow); padding: var(--pv2p-s6) var(--pv2p-pad); } body.pubv2 .pv2p-hero:before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 220px at 100% -20%, rgba(234, 168, 36, 0.14), rgba(234, 168, 36, 0) 70%), var(--pv2p-weave); } body.pubv2 .pv2p-hero > * { position: relative; } body.pubv2 .pv2p-hero-title { margin: 0 0 var(--pv2p-s2); padding: 0; border: 0; font-family: var(--pv2p-font); font-size: 24px; font-weight: 600; line-height: 1.25; color: #fff; text-transform: none; } body.pubv2 .pv2p-hero-sub { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--pv2-text-muted); } /* figure + copy. Two columns above 760, picture FIRST when it stacks — a figure stranded under its own body copy reads as an afterthought. */ body.pubv2 .pv2p-media { display: grid; gap: var(--pv2p-s4); align-items: start; grid-template-columns: minmax(0, 1fr); } @media only screen and (min-width: 760px) { body.pubv2 .pv2p-media { grid-template-columns: minmax(0, 1fr) clamp(250px, 40%, 420px); gap: var(--pv2p-s4) var(--pv2p-s5); } body.pubv2 .pv2p-media.rev { grid-template-columns: clamp(250px, 40%, 420px) minmax(0, 1fr); } body.pubv2 .pv2p-media.rev > .pv2p-fig { order: -1; } } body.pubv2 .pv2p-fig { margin: 0; padding: 0; min-width: 0; } body.pubv2 .pv2p-fig img { display: block; width: 100%; height: auto; max-width: 100%; border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius); background: var(--pv2-surface); } body.pubv2 .pv2p-fig figcaption { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--pv2-text-dim); font-style: normal; } /* .bare — a cut-out render on transparency (a product shot, a logo, a character PNG) does not want a hairline box drawn around its bounding rectangle and a surface fill behind it. Screenshots keep the frame. */ body.pubv2 .pv2p-fig.bare img { border: 0; background: transparent; border-radius: 0; } /* ------------------------------------------------------------ SLIDE DOTS — paging for a carousel or a hero rotator. THE HIT RULE, third case: this is a horizontal run, so the row cannot grow (the strip is centred under the slide and the dots would push each other apart). Each dot keeps a 9px MARK and takes a 24 x 44 hit CELL — the cells tile edge to edge with no overlap, so no dot can fire its neighbour, and the vertical band is the full 44. Same call as the footer socials, opposite call to the footer link list. ------------------------------------------------------------ */ body.pubv2 .pv2p-dots { display: flex; align-items: center; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; } body.pubv2 .pv2p-dots > li { margin: 0; padding: 0; } body.pubv2 .pv2p-dot, body.pubv2 a.pv2p-dot, body.pubv2 button.pv2p-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 44px; padding: 0; margin: 0; background: transparent; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; font-size: 0; line-height: 0; text-indent: 0; overflow: hidden; } body.pubv2 .pv2p-dot:before { content: ''; display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.30); box-shadow: none; transition: background-color .14s, transform .14s; } body.pubv2 .pv2p-dot:hover:before { background: rgba(255, 255, 255, 0.55); } body.pubv2 .pv2p-dot.active:before, body.pubv2 .pv2p-dot[aria-current="true"]:before { background: var(--pv2-gold); } body.pubv2 .pv2p-dot:focus-visible { outline: 2px solid rgba(213, 168, 74, .45); outline-offset: -6px; border-radius: 3px; } @media only screen and (max-width: 759px) { /* picture first when it stacks. The 480px cap stops a wide screenshot from dwarfing the copy under it — and it has to centre, or the figure sits left while the block around it reads as a unit. Same class of bug as the callout lede; found in the same audit. */ body.pubv2 .pv2p-media > .pv2p-fig { order: -1; max-width: 480px; margin-left: auto; margin-right: auto; } } /* ------------------------------------------------------------ CTA — the closing strip. Replaces the theme's .callout, which paints a flat brand-colour band with white text and a bootstrap button. ------------------------------------------------------------ */ body.pubv2 .pv2p-cta { display: flex; align-items: center; gap: var(--pv2p-s5); flex-wrap: wrap; background: var(--pv2-panel); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-lg); padding: 20px var(--pv2p-pad); margin: 0; } body.pubv2 .pv2p-cta-txt { flex: 1 1 300px; min-width: 0; } body.pubv2 .pv2p-cta-txt > h1, body.pubv2 .pv2p-cta-txt > h2, body.pubv2 .pv2p-cta-txt > h3, body.pubv2 .pv2p-cta-txt > h4 { margin: 0; padding: 0; border: 0; font-family: var(--pv2p-font); font-size: 18px; font-weight: 600; line-height: 1.3; color: #fff; text-transform: none; } body.pubv2 .pv2p-cta-txt p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--pv2-text-muted); } body.pubv2 .pv2p-cta .pv2p-btn { flex: 0 0 auto; } /* the theme's .callout, when a page keeps that wrapper for layout. Kill the brand band and let .pv2p-cta inside it carry the design. */ body.pubv2 .pv2p-callout { background: transparent; padding: 0; margin: 0; border: 0; } /* ------------------------------------------------------------ EMPTY STATE ------------------------------------------------------------ */ body.pubv2 .pv2p-empty { text-align: center; padding: 46px 20px; color: var(--pv2-text-muted); } body.pubv2 .pv2p-empty strong { display: block; color: var(--pv2-text-soft); font-size: 15px; font-weight: 600; margin-bottom: 5px; } /* ============================================================ RESPONSIVE — mobile FIRST is the default above; these are the two steps up and the phone comfort pass. Nothing reflows into a different layout at any breakpoint: the phone gets the same design narrowed. ============================================================ */ /* the widened rail. Measure and TYPE grow together — growing the box without growing the type is how you end up with a 100-character line. */ @media only screen and (min-width: 1400px) { /* Declared on body.pubv2, NOT on .pv2p — the band has to resolve the same ramp or the two rails disagree (see the band rule above). These are tokens: nothing paints until a .pv2p-* component consumes them. */ body.pubv2 { --pv2p-fs-body: 15.5px; --pv2p-lh-body: 1.66; --pv2p-pad: var(--pv2p-s5); } body.pubv2 .pv2p-chead { padding: 12px var(--pv2p-s5); } body.pubv2 .pv2p-hero { padding: var(--pv2p-s7) var(--pv2p-s5); } body.pubv2 .pv2p-cta { padding: 22px var(--pv2p-s5); } body.pubv2 .pv2p-acc-item > label { padding-left: var(--pv2p-s5); font-size: 15px; } body.pubv2 .pv2p-acc-item > .toggle-content { padding-left: var(--pv2p-s5); padding-right: var(--pv2p-s5); } } /* tablet / small laptop */ @media only screen and (max-width: 900px) { body.pubv2 .pv2p { padding-top: var(--pv2p-s6); } } /* phone comfort */ @media only screen and (max-width: 560px) { body.pubv2 { --pv2p-pad: var(--pv2p-s3); --pv2p-s5: 20px; --pv2p-s6: 28px; --pv2p-s7: 32px; } body.pubv2 .pv2p-band { padding: 18px 0 16px; } body.pubv2 .pv2p-band h1, body.pubv2 .pv2p-band h2, body.pubv2 .parallax.parallax-1:not(.text-center) h1, body.pubv2 .parallax.parallax-1:not(.text-center) h2, body.pubv2 section.page-title:not(.pv2p-band) h1, body.pubv2 section.page-title:not(.pv2p-band) h2 { font-size: 22px; } body.pubv2 .pv2p-doc .pv2p-cbody { padding: var(--pv2p-s4) var(--pv2p-s3); } body.pubv2 .pv2p-acc-item > label { padding: 13px 42px 13px var(--pv2p-s3); font-size: 14px; } body.pubv2 .pv2p-acc-item > .toggle-content { padding-left: var(--pv2p-s3); padding-right: var(--pv2p-s3); } body.pubv2 .pv2p-cta { flex-direction: column; align-items: stretch; gap: var(--pv2p-s3); text-align: left; } body.pubv2 .pv2p .pv2p-btn { width: 100%; } body.pubv2 .pv2p .pv2p-btn.sm { width: auto; } /* .block is the explicit opt-in for a full-width button OUTSIDE a shell — a hero CTA must not go full-bleed just because it is on a phone. */ body.pubv2 .pv2p-stat { flex: 1 1 100%; min-width: 0; } body.pubv2 .pv2p-stats.flow > .pv2p-stat { flex: 1 1 100%; } body.pubv2 .pv2p-hero { padding: var(--pv2p-s5) var(--pv2p-s3); } body.pubv2 .pv2p-hero-title { font-size: 21px; } } /* ============================================================ TOUCH HIT FLOOR — 44px, coarse pointers plus the 900px width mirror. Headless Chromium drops `hover: none` after the first navigation in a Playwright context, so a pointer-only rule ships unverified; the panel files carry the same doubled query for the same reason. Everything here either grows a control that owns its own row, or adds an invisible hit extender. No layout moves and nothing can widen the page at 390. ============================================================ */ @media (hover: none) and (pointer: coarse), (max-width: 900px) { body.pubv2 .pv2p-btn { min-height: 44px; } body.pubv2 .pv2p-acc-item > label { min-height: 48px; } /* inline prose links: extend the tap band vertically only. A wide extender in running text would steal the neighbouring line's taps. */ body.pubv2 .pv2p-list > li > a, body.pubv2 .pv2p-chip { position: relative; } body.pubv2 .pv2p-list > li > a:after, body.pubv2 .pv2p-chip:after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); pointer-events: auto; } body.pubv2 .pv2p-chip { height: 32px; } /* the 16px product-standard checkbox must not grow — it gets the tap area instead, on ::before (the tick owns ::after). */ body.pubv2 .pv2p input[type="checkbox"]:before, body.pubv2 .pv2p input[type="radio"]:before { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); pointer-events: auto; } body.pubv2 .pv2p-input, body.pubv2 .pv2p-select, body.pubv2 .pv2p-textarea { --pv2p-ctl: 44px; font-size: 16px; } /* 16px: iOS zooms a smaller field on focus */ } /* ============================================================ #toTop — shared public chrome, same finding and same fix as the two panels (panel-v2-core.css / deathstar-v2-core.css). The theme ships a 48x35 opaque grey slab pinned to the bottom edge with square corners and no shadow; being fixed it paints over whatever row happens to be at the bottom of the viewport and reads as a broken box. Owned here so no public page re-solves it. It is chrome, not a page component, which is why it is scoped to body.pubv2 rather than .pv2p. ============================================================ */ @media (max-width: 900px) { body.pubv2 #toTop { width: 44px; height: 44px; right: 12px; bottom: 14px; padding: 0; line-height: 44px; border-radius: 50%; background: rgba(33, 33, 34, 0.94); border: 1px solid var(--pv2-border-strong); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); color: var(--pv2-text-soft); opacity: 1; } body.pubv2 #toTop:before { font-size: 15px; line-height: inherit; } } /* ============================================================ ============================================================ PART 3 — THE SHARED VOCABULARY LAYER ** HIGH BLAST RADIUS ** ============================================================ Measured across the 328 public templates (home-page audit, 2026-08-04): .callout 304 templates .flexslider 318 templates section.alternate 300 templates ul.list-icon 296 templates These four ARE the public site. Everything else is page furniture. That cuts both ways and this section is written for both edges: UPSIDE — a good rule here is inherited by ~300 game pages with nobody editing a template. It is the difference between this project taking days and taking weeks. DANGER — there is no such thing as a small change to .callout. Any edit below moves ~300 pages on one deploy, and today it moves every allowlisted page the moment a staff member signs in. Treat this section as production infrastructure: conservative changes only, no structural rules, and re-measure the four text pages plus /affiliates/ and /locations// after ANY edit. WHAT IS DELIBERATELY NOT HERE .flexslider — a jQuery-initialised carousel whose slide widths, clones and nav are written by the plugin at runtime. Restyling it from a shared sheet means fighting inline styles the plugin owns. It needs a page-scoped skin by whoever takes the carousel pages, not a sitewide rule. Do not add one here. THE INVISIBLE-CONTENT TRAP (read before touching any band) essentials.css ships `.animate_fade_in { opacity: 0 }` and the .animate_from_top / _bottom / _left / _right siblings, plus `[data-animation]` blocks. NOTHING in CSS ever turns them back on: js/scripts.js _animate() reveals them with jQuery .appear() + .animate({opacity:1}). Three consequences: - the [data-animation] path only runs above 767px wide; - an element that never scrolls into view stays at opacity 0; - drop or rename one of those classes in a template and its content is gone with no error anywhere. If a redesign removes the class it must ALSO stop relying on the JS — set opacity to 1 in your page scope in the same commit. Everything below is a colour/type change on markup that already exists. No layout property, no display, no position, no width. ============================================================ */ /* ------------------------------------------------------------ 3.0 THE SURFACE LADDER — why the site read as "stale" and "grey". Ryan on /services/game_servers/7_days_to_die/: "I hate the way this looks. It looks really stale. Also, I hate the background. It has like a cool design, but it's usurped by the overall gray feeling of the website." MEASURED, AND THE LADDER WAS UPSIDE DOWN: body / #wrapper (layout-dark.css:9) #2d2d2d (45,45,45) LIGHTEST section (no class) inherits #2d2d2d section.alternate #252526 .callout.dark #252526 section.ss-wg #1a1a1b The PAGE was the lightest surface on it, and every band sat DARKER — the exact inverse of the panel, where `--pv2-surface` #1a1a1b is the page and every panel steps UP from it. With the page that light the whole ramp is compressed into 20 RGB units at the pale end, which is what "overall gray feeling" is: there is no black anywhere for the gold and the artwork to sit against, and the `.callout` weave and bloom Ryan likes ("it has like a cool design") are washed out by the surface behind them. Worse, two of the values were IDENTICAL AND ADJACENT: `section.alternate` immediately followed by `.callout.dark`, both #252526, reading as one continuous field with no boundary at all. That is the "adjacent sections read as one grey field" report. THE LADDER NOW — the panel's, by token, not by hex: .callout (CTA band) --pv2p-deep #131314 one rung BELOW body / #wrapper --pv2-surface #1a1a1b the page section (no class) inherits #1a1a1b section.alternate --pv2-panel #212122 alternating band .callout.dark --pv2-raised #252526 emphasis band section.ss-wg --pv2-panel #212122 (was the page colour, which now merges) The CTA rung was added 2026-08-05 by the rhythm sweep: the plain .callout used to share the page's #1a1a1b, which the 323-page crawl measured as 711 same-fill adjacencies on 289 pages. See the rule and the rhythm guard further down. Plus a hairline at the top of every banded section: a 7-unit step is a soft edge, and the panel draws its surfaces with borders, not with colour alone. Inset shadow rather than border-top — a border adds a pixel to the box and pushes every band one pixel down the page. THIS TOUCHES NO CARD, NO PRICING TIER AND NO TEXT COLOUR. .pv2p-card was already --pv2-panel on a lighter page, i.e. a card DARKER than the page under it; it is unchanged and now reads correctly as raised. The order widget's four tier cards are untouched — see 1b. ------------------------------------------------------------ */ body.pubv2, body.pubv2 #wrapper { background-color: var(--pv2-surface); } /* THE PAGE FIELD CARRIES THE WEAVE. This is the "plain dark gray background that looks boring, bland" note: the largest surface on every page — 1600 x 9982 on /terms/, measured — was a single flat fill, while the one treatment on the page that Ryan actually likes was rationed out to a CTA band. The default is now the other way round: the field is woven, and a surface has to opt OUT by painting its own opaque fill. On #wrapper and not on body, because both are painted --pv2-surface and #wrapper spans the full document height — putting it on both would stack the gradient twice and double the alpha wherever they overlap. body keeps the flat fill so the overscroll gutter still matches. */ body.pubv2 #wrapper { background-image: var(--pv2p-weave); } /* The banded sections paint their own opaque fill OVER #wrapper, so each one would have punched a flat rectangle out of the woven field. They take the weave with them and the page reads as one material. */ body.pubv2 section.ss-wg { background-color: var(--pv2-panel); } body.pubv2 section.alternate, body.pubv2 section.ss-wg { background-image: var(--pv2p-weave); } /* `section.alternate` takes the same rung, declared with the rest of that class further down so there is one rule per class, not two. */ body.pubv2 section.alternate, body.pubv2 section.ss-wg { box-shadow: inset 0 1px 0 var(--pv2-line); } /* the page-title band gets BOTH edges. Its fill is the theme's and on /about/ it is opaque --pv2-surface, i.e. exactly the page colour now — without a bottom rule the band would have no edge at all there. */ body.pubv2 section.page-title { box-shadow: inset 0 1px 0 var(--pv2-line), inset 0 -1px 0 var(--pv2-line); } /* ---------- .callout — the CTA band ---------- Today: a full-bleed brand-gold band (.styleBackgroundColor takes its fill from color_scheme/yellow.css `.styleBackgroundColor`, 0-1-0) with white text and a ghost-outlined button. A solid gold band is the same "way too bright" note the gold-button stack got, and it is the only light-coloured element left on a dark page. v2: the band becomes deep chrome with a gold bloom drifting in from the right, and the gold is spent on the ONE button instead. Structure, grid and padding are untouched. */ /* The bloom is LAYERED BACKGROUNDS on the band itself, deliberately not an absolutely-positioned ::before with `.callout > * { z-index: 1 }`. That pattern would stamp a stacking context onto whatever wrapper a band happens to contain, and a stacking context above a payment form is how you make a Stripe modal invisible with no error anywhere (order-flow audit rule 3). Backgrounds cost nothing and trap nothing. */ /* THE FILL IS ONE RUNG BELOW THE PAGE, NOT THE PAGE'S OWN. The first version painted this --pv2-surface, and the crawl measured the cost: the CTA band sat against a plain section (same #1a1a1b) on 711 adjacencies across 289 of 323 public pages — hairlines and bloom on an identical fill still read as one slab, which is the "no establishment of order" report. --pv2p-deep is the band's own rung: darker stage, gold bloom pops harder, and by construction it can only ever sit flush against another CTA band (the deliberate ARK/Space Engineers platform stacks). .callout.dark re-declares its own fill below and is untouched. */ body.pubv2 .callout { background-color: var(--pv2p-deep); background-image: var(--pv2p-bloom), var(--pv2p-weave); border-top: 1px solid var(--pv2-line); border-bottom: 1px solid var(--pv2-line); } body.pubv2 .callout h2, body.pubv2 .callout h3, body.pubv2 .callout h4, body.pubv2 .callout.styleBackgroundColor h2, body.pubv2 .callout.styleBackgroundColor h3, body.pubv2 .callout.styleBackgroundColor h4 { font-family: var(--pv2p-font); /* 400, not 600 — see the weight note in PART 5.4. A band head is the loudest line in ITS band, which colour already says; adding weight on top of that is what made the whole page read as bold. */ font-size: 20px; font-weight: 400; line-height: 1.35; color: #fff; margin: 0 0 6px; text-transform: none; letter-spacing: .005em; } body.pubv2 .callout p, body.pubv2 .callout.styleBackgroundColor p { font-family: var(--pv2p-font); font-size: 14.5px; font-weight: 400; line-height: 1.55; color: var(--pv2-text-muted); margin: 0; padding: 0; } /* .callout.dark keeps its own darker fill; retint the arrow pseudo- elements with it or the notch reads as a stray black triangle. */ body.pubv2 .callout.dark { background-color: var(--pv2-raised); } /* layout.css:252 paints `#252525` on the dark callout's HEADINGS AND PARAGRAPHS, not just on the band: .callout.dark, .callout.dark h2, h3, h4, p { background-color:#252525 } Every one of those is an opaque strip the exact width of its line box, punched through whatever is behind it — a visible dark rectangle across the gold bloom behind every dark-callout heading on ~300 templates, and an absolute block on putting any raised surface inside a dark callout. The band keeps its fill; its text does not get one. */ body.pubv2 .callout.dark h2, body.pubv2 .callout.dark h3, body.pubv2 .callout.dark h4, body.pubv2 .callout.dark h5, body.pubv2 .callout.dark h6, body.pubv2 .callout.dark p { background-color: transparent; } body.pubv2 .callout.dark p { color: var(--pv2-text-muted); max-width: 960px; } /* ---- A CAPPED MEASURE INSIDE A CENTRED BAND MUST CENTRE ITSELF. ---- MEASURED ON /services/game_servers/7_days_to_die/ AT 1920, and the same on all 288 files that ship this band: H2 "Our 7 Days to Die server hosting plans..." 195 -> 1725, centre 960 P "Your game server will come with..." 195 -> 1155, centre 675 The band is `.container.text-center`, so the heading centres across the full 1530 rail. The lede under it carries the 960px cap directly above and `margin: 0`, so the BOX was pinned left and the text centred inside the box — leaving the two lines 285px out of alignment with each other. Ryan: "look at that second line... It's off alignment. It looks really bad." It was invisible while the rail was 1170 and the cap barely bit; widening the rail to 1560 is what exposed it. Auto margins, not a cap removal: a 1530px line of 14.5px copy is 175 characters and the cap is the right call. It just has to centre. AUDIT OF EVERY OTHER SYSTEM-IMPOSED CAP IN THIS FILE, done at the same time because one missing auto-margin means there are others: .pv2p-doc margin: 0 auto OK .css-hero-inner margin: 0 auto (theme) OK .pv2p > .container margin-left/right: auto OK section > header > h4/h5 96ch, LEFT-aligned header — correct pinned left; the h2 above it is left-aligned too and they share an edge at x=195. .pv2p-shead > p 78ch, left-aligned component, no centred usage in any template. Correct as-is. .pv2p-media > .pv2p-fig 480px when the figure stacks above the copy below 760 — that one WAS pinned left in a block that reads as centred. Fixed below. */ body.pubv2 .callout > .container.text-center > p { margin-left: auto; margin-right: auto; } body.pubv2 .callout.dark.arrow-down:after { border-top-color: var(--pv2-raised); } body.pubv2 .callout.dark.arrow-up:after { border-bottom-color: var(--pv2-raised); } /* the band's button. .btn-primary is the ONE gold thing in the band; everything else in it is dark chrome. Height is pinned, never padding math (design-system HARD RULE). */ body.pubv2 .callout .btn, body.pubv2 .callout.styleBackgroundColor .btn { display: inline-flex; align-items: center; justify-content: center; height: var(--pv2p-ctl); padding: 0 22px; margin-top: 0; background: transparent; border: 1px solid var(--pv2-border-strong); border-radius: var(--pv2-radius); color: #fff; font-family: var(--pv2p-font); font-size: 14px; font-weight: 400; line-height: 1; text-shadow: none; box-shadow: none; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s; } body.pubv2 .callout .btn:hover, body.pubv2 .callout .btn:focus { background: var(--pv2-hover); color: #fff; } body.pubv2 .callout .btn.btn-primary, body.pubv2 .callout.styleBackgroundColor .btn.btn-primary { background: var(--pv2-gold); border-color: var(--pv2-gold); color: #fff; font-weight: 600; } body.pubv2 .callout .btn.btn-primary:hover, body.pubv2 .callout .btn.btn-primary:focus { background: var(--pv2-gold-deep); border-color: var(--pv2-gold-deep); color: #fff; } /* Ryan, repeatedly: "Order button issue. I've mentioned this so many times before. It needs to be over to the right." MEASURED on /services/game_servers/minecraft/ at 1600: the band's rail runs 105 -> 1510, and the button ended at x=1276. 234px of dead space to its right, because the button sits in a bare `.col-md-3` and inherits the row's left alignment — so it reads as floating in the middle of the band instead of anchored to the page edge. The heading is NOT mis-railed: it measures x=105, the same pixel as the feature band above it. `:has(> .btn)` keeps this off any band whose last column holds copy rather than a control — text-align is the whole fix, no layout property is touched, which is the Part 3 contract. */ body.pubv2 .callout .row > [class*="col-"]:last-child:not(:only-child):has(> .btn) { text-align: right; } @media only screen and (max-width: 990px) { /* stacked: the button is full width here, so right-alignment would only shift its label */ body.pubv2 .callout .row > [class*="col-"]:last-child:not(:only-child):has(> .btn) { text-align: center; } } /* the .btn-lg the bands use is 100% width below 990 in the theme; keep the full-width tap on a phone and clear the 44px floor. `width: 100%` ON ITS OWN NEVER LANDED, and this is the trap: mobile-responsive.css §1.18 ships @media (max-width:600px) { .col-sm-3.col-md-3, .col-md-3:not(.col-sm-6):not(.col-sm-12) { width:50% !important } } aimed at the ARK mod-tile grid. The callout's button column is a bare `.col-md-3` with no `col-sm-*`, so it matches, and a 100%-wide button in a 50%-wide column measured 185px at 390 — not full width, and it looked deliberate. §1.18 also takes the column to 33.333% at <=990, which is why the CTA read as a stub on tablets. The column is widened THROUGH .callout, never as a bare `.col-md-3` rule: `.col-md-3` is one of the order page's JS hooks and a bare rule on it is forbidden. Both sides carry !important, so specificity decides — this is (0,4,1) against §1.18's (0,3,0). */ @media only screen and (max-width: 990px) { body.pubv2 .callout .row > .col-md-3 { width: 100% !important; float: none !important; padding-left: 15px !important; padding-right: 15px !important; } /* 561-900 was landing at exactly 40px: Part 3 pins the height and the phone rule that raises it stops at 560. The floor belongs on the whole touch band, not just the phone. */ body.pubv2 .callout .btn { min-height: 44px; } } @media only screen and (max-width: 560px) { body.pubv2 .callout .btn { width: 100%; min-height: 44px; margin-top: 14px; } body.pubv2 .callout h2, body.pubv2 .callout h3, body.pubv2 .callout h4 { font-size: 18px; } } /* ---------- section.alternate — the banding surface ---------- layout-dark.css paints it #373737, which is lighter than every v2 surface and reads as a grey stripe against --pv2-panel cards. --pv2-raised was the first fix and it collided: `.callout.dark` is --pv2-raised too, and on a standard game page the two are ADJACENT (locations band immediately followed by the "What is ?" band), so they rendered as one continuous field with no boundary. This is the middle rung of the ladder in 3.0 — one step above the page, one below the emphasis band. Declared here rather than in 3.0 because this is the rule that owns the class; 3.0 would have had to out-specify it. */ body.pubv2 section.alternate { background-color: var(--pv2-panel); } /* ---------- THE RHYTHM GUARD — no two adjacent bands share a fill ---------- Ryan, 2026-08-05: "it goes from one to the other, back and forth, back and forth. I want to make sure that's the case across all pages." The class→rung ladder above gets ~95% of the way there, but 64 distinct section orderings mean some templates put two same-rung bands flush against each other. Measured on the 323-page crawl: 10 alternate+alternate pairs, 11 alternate→wiki pairs, 1 wiki→alternate, 2 dark+dark callout pairs, 5 pairs of bare
            s, 5 video-band→bare-
            pairs, 3 shader-section pairs. Every rule below targets the PATTERN of two same-rung bands adjacent — not a positional slot — so it is self-correcting for any ordering and inert on pages that already alternate. Part 5's "no positional selectors" ban forbids picking a SPECIFIC section by position because orderings differ; these rules are the opposite: whatever the ordering, the element they hit is by definition the one breaking the rhythm. Sibling reality, verified in the live DOM on every affected page (2026-08-05): the pairs named here are direct element siblings except the wiki band, which always has exactly one