/* ============================================================ THE CREATOR PROGRAM PAGE — /creators/ (body.pubv2.pv2creators) RYAN, 2026-08-05: "Our creator program needs to totally be redone. It looks like dog shit, and it just doesn't match the fit, finish, and feel of our new control panel, Panel V2." Everything shared is taken from public-v2-core.css — the card, the card head, the icon chip, the grid, the stat chip, the steps, the button, the pill, the accordion, the callout band. Only the four things this page has that no other page has live here, and each one is the vocabulary of an ALREADY-APPROVED treatment re-scoped, never a second palette: 1. the three-tier accent set — Part 6.2's welcome-card treatment (2px inset top edge on the .pv2p-chead + a matching icon chip), so a visitor reads three different choices instead of three identical boxes. 2. the benefit tick — Part 5.3b's .pv2p-feat4 gold-circle tick, tinted to its column. Same geometry, same colours. 3. the creator chip — Part 6.7's home-page creator strip, which Ryan sized up himself ("the creators need to be more highlighted, like bigger basically"). Keyed on the

this page already has instead of the home page's , so the heading outline is unchanged. 4. the rate line — the one thing neither page has: the headline number a tier is chosen on. Scope is body.pubv2.pv2creators. pubv2 is the staff gate; pv2creators is the route class creators.tpl adds under the same {public_v2} condition that emits the v2 markup, so a customer never downloads this file and the classic page is byte-identical. SOURCE ORDER: this sheet is linked in ; public-v2-core.css is linked from header.tpl INSIDE and therefore wins every tie. Every rule here carries .pv2creators as well as .pubv2 — (0,3,x) against core's (0,2,x) — so specificity, not order, decides. Contract: ~/survivalservers/goals/2026-08-04-public-v2-redesign/ design-contract.md + CLAUDE-DESIGN-SYSTEM.md. ============================================================ / / ------------------------------------------------------------ 1. THE HERO The band itself is Part 5.1's approved game-page hero — a left-anchored scrim with a 26px/400 title — and it is left alone. Two things it does not own: a) THE LEDE'S MEASURE. Part 5.1 gives .parallax-content p no cap, and the page runs .pv2p-w-wide, so at 1600 the one-line lede measured 1420px / ~190 characters. That is the same uncapped-measure defect Part 3 fixed for the .callout lede. 68ch, left-aligned with the title, so both start on one edge. b) THE STAT ROW USED TO BE THREE
s. Part 5.1 styles h1 AND h2 in this band identically, so "Creator Program", "25M+", "100+" and "36K+" all rendered as the same 26px/400 white line — four equal voices and nowhere for the eye to land. They are .pv2p-stat chips now (core's component: 19/700 number over an 11.5 muted label), so the title is the only band-size line in the band. ------------------------------------------------------------ / body.pubv2.pv2creators .pv2cr-heroc { max-width: 68ch; } body.pubv2.pv2creators .pv2cr-heroc .pv2p-label { margin-bottom: 10px; color: var(--pv2-accent); } / the CTA row needs air under the lede; .pv2p-btnrow owns only its own internal gap. / body.pubv2.pv2creators .pv2cr-heroc .pv2p-btnrow { margin-top: 20px; } / the chips are proof, not the subject: hold them to the copy's own measure so the row cannot stretch to a 1560px rail and turn three four-character numbers into three near-empty banners (the "80% empty" rejection .pv2p-stat exists to avoid). / body.pubv2.pv2creators .pv2cr-herostats { max-width: 680px; } / the parallax band is a dark photo; the chips' --pv2-field fill is nearly the same value, so they need their own edge to read as objects sitting ON the art rather than holes punched through it. / body.pubv2.pv2creators .pv2cr-herostats > .pv2p-stat { background: rgba(12, 12, 13, 0.72); border-color: rgba(255, 255, 255, 0.13); } / ------------------------------------------------------------ 2. THE THREE TIERS — the reason this page exists. Ryan's brief: the three programs must read as three distinct choices, not three identical boxes. Three levers, in the order a visitor uses them: colour — a 2px inset accent edge on the head + a matching icon chip + matching ticks. Blue / gold / purple, Part 6.2's approved welcome-card set, no colour beside itself. emphasis — the Creator card (this page's own program) takes the strong border and the one gold button. The other two are dark chrome. That is the system's "the gold is spent on the ONE primary action per view" rule doing the recommending, with no extra copy. number — one headline figure per card, on one baseline across all three, so the tiers can be compared at a glance without reading a sentence. ------------------------------------------------------------ / / the head bar's accent edge. box-shadow, not a border: .pv2p-card clips its overflow and already draws the hairline, so a border here would move the head 2px down inside the clip and misalign the three heads against each other. / body.pubv2.pv2creators .pv2cr-tier.aff .pv2p-chead { box-shadow: inset 0 2px 0 rgba(88, 166, 255, 0.55); } body.pubv2.pv2creators .pv2cr-tier.crt .pv2p-chead { box-shadow: inset 0 2px 0 rgba(242, 197, 34, 0.60); } body.pubv2.pv2creators .pv2cr-tier.ptr .pv2p-chead { box-shadow: inset 0 2px 0 rgba(155, 92, 246, 0.55); } body.pubv2.pv2creators .pv2cr-tier.aff .pv2p-chead .pv2p-icon { background: rgba(88, 166, 255, 0.10); border-color: rgba(88, 166, 255, 0.32); color: #58a6ff; } body.pubv2.pv2creators .pv2cr-tier.crt .pv2p-chead .pv2p-icon { background: rgba(242, 197, 34, 0.10); border-color: rgba(242, 197, 34, 0.34); color: #f2c522; } body.pubv2.pv2creators .pv2cr-tier.ptr .pv2p-chead .pv2p-icon { background: rgba(155, 92, 246, 0.12); border-color: rgba(155, 92, 246, 0.34); color: #b98cf9; } / the card this page IS. A stronger border and a hair more lift — the same two properties .pv2p-card.accent already uses, so this is that component turned up, not a new surface. / body.pubv2.pv2creators .pv2cr-tier.crt { border-color: rgba(242, 197, 34, 0.42); box-shadow: 0 2px 18px rgba(0, 0, 0, 0.42); } / The CTA is pinned to the bottom of all three cards regardless of how many tick lines each carries — .pv2p-grid.even equalises the CARD heights, not the content inside them, so without this the three buttons land on three different baselines (the ragged-edge pattern the contract rejects). THE CARD HAS TO BE THE FLEX COLUMN, NOT THE BODY. The first cut gave the body `height: 100%`, which resolves against the CARD — so the body was as tall as the whole card, the head's 44px pushed it past the bottom, and .pv2p-card's `overflow: hidden` clipped the button to a 4px sliver on all three cards. Measured at 1600: card 363px tall, button top at 359. The body flexes to the space the head leaves instead. / body.pubv2.pv2creators .pv2cr-tier { display: flex; flex-direction: column; } body.pubv2.pv2creators .pv2cr-tier > .pv2p-cbody { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } body.pubv2.pv2creators .pv2cr-tier > .pv2p-cbody > .pv2cr-cta { margin-top: auto; padding-top: 16px; } / THE FULL-WIDTH CTA IS SET HERE, NOT WITH `.pv2p-btn.block`. essentials.css:394 ships a bare utility `.block { display: block !important }`, which beats the component outright: the button stops being an inline-flex box, so `justify-content: center` and `align-items: center` both go dead and the label renders left-aligned on a 14px line box inside a 40px button. Measured at 1600 with `.block` on: display `block`, label at x=153 in a button spanning 132-524. `.pv2p-btn.block` only ever declares `width: 100%`, so declaring that here loses nothing and dodges the collision. Reported for the shared sheet — this page was the only user of that modifier. / body.pubv2.pv2creators .pv2cr-tier > .pv2p-cbody > .pv2cr-cta > .pv2p-btn { width: 100%; } / the head's pill sits in .pv2p-chead-actions, which is margin-left:auto — on a narrow track the tier name and the pill collide, so the name is allowed to wrap and the pill is not. / body.pubv2.pv2creators .pv2cr-tier .pv2p-chead > h4 { min-width: 0; overflow-wrap: break-word; } / ---------- the rate line ---------- ONE number per card, on one baseline. 26px is the band size from the type ramp — deliberately the same rung as the page title, because on this page the three numbers ARE the decision. Weight is 600, not 400: a figure is chrome you compare, not prose you read (the ramp reserves 600 for exactly that). tabular-nums so 10% and 15% align. / body.pubv2.pv2creators .pv2cr-rate { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--pv2-line); } body.pubv2.pv2creators .pv2cr-rate > b { display: block; font-family: var(--pv2p-font); font-size: 26px; font-weight: 600; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } body.pubv2.pv2creators .pv2cr-rate > span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--pv2-text-muted); } body.pubv2.pv2creators .pv2cr-tier.crt .pv2cr-rate > b { color: var(--pv2-gold); } / ---------- the benefit ticks ---------- Part 5.3b's .pv2p-feat4 tick, verbatim geometry: an 18px filled circle holding a \2713 drawn in the page font, absolutely positioned in the 27px indent. It is CSS geometry with no font dependency, which is the contract's icon rule — fa-subset carries no guarantee for a check mark and the classic page loads nothing else. / body.pubv2.pv2creators .pv2cr-ticks { list-style: none; margin: 0; padding: 0; } body.pubv2.pv2creators .pv2cr-ticks > li { position: relative; margin: 0; padding: 5px 0 5px 27px; font-size: 13.5px; line-height: 1.5; color: #c9cfd5; list-style: none; } body.pubv2.pv2creators .pv2cr-ticks > li:before { content: '\2713'; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; margin: 0; border: 0; border-radius: 50%; transform: none; background: #4f9be8; color: #17191d; font-family: var(--pv2p-font); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; } body.pubv2.pv2creators .pv2cr-tier.crt .pv2cr-ticks > li:before { background: #d9a615; } body.pubv2.pv2creators .pv2cr-tier.ptr .pv2cr-ticks > li:before { background: #9b5cf6; } body.pubv2.pv2creators .pv2cr-ticks > li b { color: #e9edf0; font-weight: 600; } / ------------------------------------------------------------ 3. THE TWO BENEFIT PANELS — "What You Get". Was two 64px Font Awesome glyphs floating in the middle of a dark band with a centred paragraph under each. Now the same two facts on the .pv2p-card the whole system is built from, with Part 5.3b's inset accent edge so the pair reads as one designed band rather than two stray icons. Green for the server, gold for the money — the same two accents the game pages use for those two ideas. ------------------------------------------------------------ / / the accent edge is added TO the card's own drop shadow, not instead of it — .pv2p-card ships var(--pv2p-shadow) and a bare `box-shadow: inset` here would silently delete it and flatten the card against the band. / body.pubv2.pv2creators .pv2cr-get > .pv2p-card:nth-child(1) { box-shadow: inset 3px 0 0 rgba(46, 224, 110, 0.80), var(--pv2p-shadow); } body.pubv2.pv2creators .pv2cr-get > .pv2p-card:nth-child(2) { box-shadow: inset 3px 0 0 rgba(242, 197, 34, 0.85), var(--pv2p-shadow); } body.pubv2.pv2creators .pv2cr-get > .pv2p-card:nth-child(1) .pv2p-chead .pv2p-icon { background: rgba(46, 224, 110, 0.10); border-color: rgba(46, 224, 110, 0.30); color: #2ee06e; } body.pubv2.pv2creators .pv2cr-get > .pv2p-card:nth-child(2) .pv2p-chead .pv2p-icon { background: rgba(242, 197, 34, 0.10); border-color: rgba(242, 197, 34, 0.32); color: #f2c522; } / a card inside .callout.dark sits on --pv2-raised, which is the card's own body colour — the surface would vanish. Drop it one rung so the hairline and the accent edge both have something to sit against. (layout.css:252's opaque #252525 on the band's own text is already neutralised in Part 3, which is what makes a raised surface legal in a dark callout at all.) / body.pubv2.pv2creators .callout.dark .pv2p-card { background: var(--pv2-panel); } body.pubv2.pv2creators .callout.dark .pv2p-chead { background: var(--pv2-surface); } / the band's own
rule is (0,3,1) and would repaint the card copy muted-and-capped at 960px; the card owns its body copy. / body.pubv2.pv2creators .callout.dark .pv2p-cbody p { max-width: none; font-size: 13.5px; line-height: 1.6; color: var(--pv2-text-soft); } / ------------------------------------------------------------ 4. WHO CAN APPLY — the platform cells and the section divider. The four platform cells were 64px brand logos in grey boxes with a one-word body ("Subscribers"), i.e. four near-empty banners. Same words, on the icon-chip card the system already has: a 38px chip in the brand's own colour, the platform name, the count noun under it. The brand colours are the platforms' own and are NOT part of this site's palette — they are content (that is which platform it is), the same way the creator strip's Twitch purple and YouTube red are. ------------------------------------------------------------ / body.pubv2.pv2creators .pv2cr-plat { text-align: center; } body.pubv2.pv2creators .pv2cr-plat .pv2p-icon { width: 46px; height: 46px; margin: 0 auto 12px; font-size: 20px; border-radius: 50%; } body.pubv2.pv2creators .pv2cr-plat.yt .pv2p-icon { background: rgba(255, 0, 0, 0.10); border-color: rgba(255, 0, 0, 0.34); color: #ff4d4d; } body.pubv2.pv2creators .pv2cr-plat.tw .pv2p-icon { background: rgba(145, 70, 255, 0.12); border-color: rgba(145, 70, 255, 0.36); color: #a970ff; } body.pubv2.pv2creators .pv2cr-plat.xx .pv2p-icon { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); color: #e8e8e8; } body.pubv2.pv2creators .pv2cr-plat.kk .pv2p-icon { background: rgba(83, 252, 24, 0.10); border-color: rgba(83, 252, 24, 0.32); color: #53fc18; } body.pubv2.pv2creators .pv2cr-plat h4 { margin: 0 0 3px; font-family: var(--pv2p-font); font-size: 14.5px; font-weight: 600; line-height: 1.3; color: #fff; } body.pubv2.pv2creators .pv2cr-plat p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--pv2-text-muted); } / the same icon-feature cell, left aligned, for a run that sits in a band rather than inside a card body ("Got a Bigger Community?"). One cell component, two alignments — not two components. / body.pubv2.pv2creators .pv2cr-feat h4 { margin: 0 0 4px; font-family: var(--pv2p-font); font-size: 14.5px; font-weight: 600; line-height: 1.35; color: #fff; } body.pubv2.pv2creators .pv2cr-feat p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--pv2-text-muted); } / the
between the two halves of "Who Can Apply?". Core already draws it as a quiet --pv2-line rule; what it cannot know is that this one sits inside a .pv2p-stack, which already owns a 26px gap on both sides of it. Core's own 26px margins would make that 78px of air between two cards. / body.pubv2.pv2creators .pv2cr-who hr { margin: 4px 0; } / ------------------------------------------------------------ 5. THE CREATOR PARTNER STRIP Part 6.7 from the home page, re-scoped. Ryan reviewed that strip and sized it up himself — "the creators need to be more highlighted, like bigger basically" — so this is his own approved geometry: four across, a 72px avatar, the platform as a badge notched into the avatar's corner, the name at card scale. TWO differences from 6.7, both deliberate: - the name is the
this page already ships rather than 6.7's , so the heading outline is untouched. That also means the chip cannot use 6.7's flex `gap`: an
and a
are separate flex items, so one gap would push the platform label 13px off its own name. The spacing is margins on the elements instead. - the anchor wraps the WHOLE chip rather than only the 96px image. The image-only link measured 96x96 inside a 200px row, and on a phone the name and the platform were not part of the target at all. ------------------------------------------------------------ / body.pubv2.pv2creators .pv2cr-crew { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } body.pubv2.pv2creators .pv2cr-crew:before, body.pubv2.pv2creators .pv2cr-crew:after { content: none; } / the li stretches to the grid row but the is content-height, so a row where only one name wraps comes out ragged. The anchor fills the cell. / body.pubv2.pv2creators .pv2cr-crew > li { margin: 0; display: flex; } / (0,4,1). body.pubv2 .pv2p a is (0,2,2) and would otherwise repaint the whole chip gold inside the shell — the trap the contract names. / body.pubv2.pv2creators .pv2cr-crew a { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 14px 20px; background: var(--pv2-raised); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-lg); color: #fff; text-decoration: none; transition: border-color 0.18s ease, background-color 0.18s ease; } body.pubv2.pv2creators .pv2cr-crew a:hover, body.pubv2.pv2creators .pv2cr-crew a:focus { background: var(--pv2-hover); border-color: var(--pv2-border-strong); color: #fff; text-decoration: none; } body.pubv2.pv2creators .pv2cr-crew .pv2cr-ava { position: relative; flex: 0 0 auto; width: 72px; height: 72px; margin-bottom: 13px; } / the image is sized in CSS as well as attributed in the markup, so the row cannot reflow while four pictures decode. / body.pubv2.pv2creators .pv2cr-crew .pv2cr-ava img { display: block; width: 72px; height: 72px; margin: 0; border-radius: 50%; object-fit: cover; background: var(--pv2-panel); border: 1px solid var(--pv2-border); } body.pubv2.pv2creators .pv2cr-crew .pv2cr-ava i { position: absolute; right: -1px; bottom: -1px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; font-style: normal; color: #fff; / ringed in the chip's own fill so the badge reads as sitting ON the avatar rather than punched through it / box-shadow: 0 0 0 2px var(--pv2-raised); } body.pubv2.pv2creators .pv2cr-crew .pv2cr-ava.tw i { background: #9146ff; } body.pubv2.pv2creators .pv2cr-crew .pv2cr-ava.yt i { background: #ff0000; } / the chip lightens on hover, so the badge's ring has to follow it or a dark halo appears around the badge on exactly the state drawing the eye. / body.pubv2.pv2creators .pv2cr-crew a:hover .pv2cr-ava i, body.pubv2.pv2creators .pv2cr-crew a:focus .pv2cr-ava i { box-shadow: 0 0 0 2px var(--pv2-hover); } body.pubv2.pv2creators .pv2cr-crew a:hover .pv2cr-ava img, body.pubv2.pv2creators .pv2cr-crew a:focus .pv2cr-ava img { border-color: var(--pv2-border-strong); } / the name WRAPS rather than ellipsing: at 768 the chips are ~177px and "Canal do Pigman" clipped to "Canal do Pigm..." — truncated copy on a marketing page reads as a bug. The chips are grid items in one row, so a two-line name grows all four together and the row stays deliberate. / body.pubv2.pv2creators .pv2cr-crew h4 { display: block; min-width: 0; margin: 0; font-family: var(--pv2p-font); font-size: 16px; font-weight: 600; line-height: 1.3; color: #fff; overflow-wrap: break-word; } body.pubv2.pv2creators .pv2cr-crew p { display: block; margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--pv2-text-muted); } / ------------------------------------------------------------ 6. RESPONSIVE Nothing below is a different layout — it is the same layout narrowed, which is why the phone reads. Zero horizontal page overflow is a hard rule at every width. ------------------------------------------------------------ / @media only screen and (max-width: 991px) { body.pubv2.pv2creators .pv2cr-crew { grid-template-columns: repeat(2, minmax(0, 1fr)); } } / the four platform cells hold an icon and two words each. Core's .pv2p-grid.cols-4 drops to ONE track below 700, which at 390 spends ~480px of scroll on eight words in four near-empty full-width rows — the "80% empty" read. They are the one grid on this page small enough to stay 2-up on a phone, so they do. / @media only screen and (max-width: 699px) { body.pubv2.pv2creators .pv2cr-plats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } / .pv2p-grid.even equalises card heights, which is exactly right for a ROW of cards and pure waste for a stacked column: at 390 every card in these three grids was sized to the tallest one, so the Affiliate tier carried ~120px of empty space under its last tick and the two "What You Get" panels both grew to the longer one. Nothing is side by side below 700, so nothing needs equalising. Both rules name .pv2p-grid as well as the page class: core's `body.pubv2 .pv2p-grid.even` is (0,3,0) and so was the first cut of this rule, and core is linked from header.tpl INSIDE — later in source order, so it won the tie and grid-auto-rows stayed 1fr. Measured at 390 before: autoRows "1fr", all three tiers 358px. / body.pubv2.pv2creators .pv2p-grid.pv2cr-tiers, body.pubv2.pv2creators .pv2p-grid.pv2cr-get, body.pubv2.pv2creators .pv2p-grid.pv2cr-big { grid-auto-rows: auto; } body.pubv2.pv2creators .pv2p-grid.pv2cr-tiers > , body.pubv2.pv2creators .pv2p-grid.pv2cr-get > , body.pubv2.pv2creators .pv2p-grid.pv2cr-big > { height: auto; } } @media only screen and (max-width: 767px) { /* the hero's two CTAs go full width and stack; core already does this for a .pv2p-btn inside a shell at <=560, but the hero band is not a shell and the buttons are 46px .lg, so the row is pinned here. */ body.pubv2.pv2creators .pv2cr-heroc .pv2p-btnrow { flex-direction: column; align-items: stretch; } body.pubv2.pv2creators .pv2cr-heroc .pv2p-btnrow > .pv2p-btn { width: 100%; } } @media only screen and (max-width: 560px) { body.pubv2.pv2creators .pv2cr-rate > b { font-size: 23px; } body.pubv2.pv2creators .pv2cr-crew a { padding: 16px 10px 14px; } body.pubv2.pv2creators .pv2cr-crew .pv2cr-ava, body.pubv2.pv2creators .pv2cr-crew .pv2cr-ava img { width: 58px; height: 58px; } body.pubv2.pv2creators .pv2cr-crew .pv2cr-ava { margin-bottom: 10px; } body.pubv2.pv2creators .pv2cr-crew h4 { font-size: 14.5px; } }