/* ============================================================ THE AFFILIATE PROGRAM PAGE — /affiliates/ (body.pubv2.pv2affiliates) RYAN, 2026-08-31: "this needs to be ENTIRELY redone it looks like dogshit" / "erase it and try again. match the creator vibe" / "be CLEAR that these are different" (affiliate vs Creator Program). Everything shared comes 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. What lives here is the creators page's own page-specific vocabulary re-scoped for this route, never a new look: 1. the hero container + stat chips — public-v2-creators.css §1, verbatim geometry. 2. the two-tier compare set — creators §2 (the aff/crt accent pair), with the EMPHASIS flipped: on this page the Affiliate card is the page's own program, so IT takes the strong border and the one gold button, and the Creator card is the dark- chrome pointer out. Colours stay put (aff blue, crt gold) — they are the tiers' identities across the site. 3. the rate line + benefit ticks — creators §2, verbatim. 4. the three earn-cards' inset accent edges — creators §3's treatment (accent added to var(--pv2p-shadow), never instead of it). Scope is body.pubv2.pv2affiliates: pubv2 is the staff gate, pv2affiliates is the route class affiliates.tpl adds under the same public_v2 condition that emits the v2 markup. A customer never downloads this file and the classic page stays byte-identical. SOURCE ORDER: linked in ; public-v2-core.css comes from header.tpl inside and wins ties, so every rule here carries both classes — (0,3,x) beats core's (0,2,x) on specificity. ============================================================ */ /* ---------- 1. page top — the hero is the services pages' own slim parallax + H1, styled entirely by the theme (no bespoke hero rules: Ryan 2026-08-31, "You're reinventing the wheel"). What the old hero held now opens the first dark callout: the stat chips centered on the callout ground, the gold CTA under them. ---------- */ /* ---------- 2. the compare pair — the page's "which one am I?" moment. Two cards, two identities: blue = affiliate, gold = creator, the same accent set the creators page ships. The Affiliate card is the program this page sells, so it carries the strong border, the lift, and the page's one gold button; the Creator card stays dark chrome with a ghost button out to /creators/. ---------- */ body.pubv2.pv2affiliates .pv2af-tier.aff .pv2p-chead { box-shadow: inset 0 2px 0 rgba(88, 166, 255, 0.55); } body.pubv2.pv2affiliates .pv2af-tier.crt .pv2p-chead { box-shadow: inset 0 2px 0 rgba(242, 197, 34, 0.60); } body.pubv2.pv2affiliates .pv2af-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.pv2affiliates .pv2af-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.pv2affiliates .pv2af-tier.aff { border-color: rgba(88, 166, 255, 0.42); box-shadow: 0 2px 18px rgba(0, 0, 0, 0.42); } /* the card is the flex column, the body flexes into the space the head leaves — creators §2 learned this the hard way (overflow:hidden was clipping the pinned button to a 4px sliver). */ body.pubv2.pv2affiliates .pv2af-tier { display: flex; flex-direction: column; } body.pubv2.pv2affiliates .pv2af-tier > .pv2p-cbody { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } body.pubv2.pv2affiliates .pv2af-tier > .pv2p-cbody > .pv2af-cta { margin-top: auto; padding-top: 16px; } /* width:100% here, never `.block` — essentials.css:394 ships a bare `.block{display:block!important}` that kills the button's flex centering (documented in creators §2). */ body.pubv2.pv2affiliates .pv2af-tier > .pv2p-cbody > .pv2af-cta > .pv2p-btn { width: 100%; } body.pubv2.pv2affiliates .pv2af-tier .pv2p-chead > h3 { min-width: 0; overflow-wrap: break-word; } /* the rate line — one number per card, one baseline, tabular so 10% and 15% align digit for digit. */ body.pubv2.pv2affiliates .pv2af-rate { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--pv2-line); } body.pubv2.pv2affiliates .pv2af-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.pv2affiliates .pv2af-rate > span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--pv2-text-muted); } body.pubv2.pv2affiliates .pv2af-tier.crt .pv2af-rate > b { color: var(--pv2-gold); } /* the benefit ticks — CSS-geometry check circles, no font dependency. */ body.pubv2.pv2affiliates .pv2af-ticks { list-style: none; margin: 0; padding: 0; } body.pubv2.pv2affiliates .pv2af-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.pv2affiliates .pv2af-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.pv2affiliates .pv2af-tier.crt .pv2af-ticks > li:before { background: #d9a615; } body.pubv2.pv2affiliates .pv2af-ticks > li b { color: #e9edf0; font-weight: 600; } /* ---------- 3. the three How-It-Works cards — step number in the card head (the .pv2p-step-n chip, static instead of absolute), one line of mechanics in the body. ONE gold accent on all three (Codex 2026-09-01: gold/blue/ green edges read as plan tiers, not steps), no head/body slab: the head strip's fill and divider are gone so a two-word title does not command a full banded row, and the cards size to their own copy instead of the longest sibling (2/4/5-line bodies were manufacturing dead panel). ---------- */ body.pubv2.pv2affiliates .pv2af-how { align-items: start; } body.pubv2.pv2affiliates .pv2af-how > .pv2p-card { height: auto; min-height: 0; box-shadow: inset 3px 0 0 rgba(242, 197, 34, 0.80), var(--pv2p-shadow); } body.pubv2.pv2affiliates .pv2af-how .pv2p-chead { padding: 14px 18px 0; background: transparent; border-bottom: 0; } body.pubv2.pv2affiliates .pv2af-how .pv2p-cbody { padding: 10px 18px 16px; } body.pubv2.pv2affiliates .pv2af-how .pv2p-cbody > p { margin: 0; } body.pubv2.pv2affiliates .pv2af-stepn { position: static; flex: 0 0 auto; } body.pubv2.pv2affiliates .pv2af-how .pv2p-chead > h3 { min-width: 0; } /* the affiliate-tools figure: a PRE-CROPPED capture (v2 asset: the full "Your affiliate link" block + payout card, the duplicate in-shot heading cropped away) behind a slim window titlebar, inset from the rail so it sits IN the page rather than AS the page. The titlebar + inset are what make it read as a screenshot of the panel, not page UI (Ryan 2026-09-01). No CSS cropping: aspect tricks on a 2x shot are what broke both prior treatments. At 1080px wide the capture's 24px panel labels render ~11px - readable. Hidden on mobile (Ryan): a desktop dashboard at 358px is unreadable. */ body.pubv2.pv2affiliates .pv2af-dash { margin: 0 auto; max-width: 1080px; overflow: hidden; border: 1px solid var(--pv2-line); border-radius: var(--pv2-radius, 6px); box-shadow: var(--pv2p-shadow); } body.pubv2.pv2affiliates .pv2af-dash img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; } body.pubv2.pv2affiliates .pv2af-dashbar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--pv2-line); } body.pubv2.pv2affiliates .pv2af-dashbar > span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); } body.pubv2.pv2affiliates .pv2af-dashbar > em { margin-left: 8px; font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--pv2-text-dim); } @media (max-width: 767px) { body.pubv2.pv2affiliates .pv2af-dash { display: none; } } /* ---------- 4. the closing band — the services pages' rent bar, which is the sitewide standard for CTA bands (Ryan 2026-08-31: "our little rent bar that we have on our services pages... that should be the standard"; "Same with the affiliates page"). Mirrors the services .vh-band byte for byte: dark gradient, gold hairlines, 26px pad, h3 22/#f2f4f6, p 14/#b9c0c7 on a 640px measure, right-side OUTLINE gold CTA that fills on hover. The partner pages' .ptn-band is this same bar. ---------- */ body.pubv2.pv2affiliates .aff-band { background: linear-gradient(180deg, #202226 0%, #191b1e 100%); border-top: 1px solid rgba(255, 194, 51, .28); border-bottom: 1px solid rgba(255, 194, 51, .28); padding: 26px 0; } body.pubv2.pv2affiliates .aff-band h3 { color: #f2f4f6; font-size: 22px; margin: 8px 0 0; } body.pubv2.pv2affiliates .aff-band .aff-band-accent { color: rgb(255, 194, 51); } body.pubv2.pv2affiliates .aff-band-ctacol { text-align: right; } body.pubv2.pv2affiliates .aff-band-cta { display: inline-block; margin-top: 10px; padding: 11px 22px; border: 1px solid rgb(255, 194, 51); border-radius: 6px; background: rgba(255, 194, 51, .08); color: rgb(255, 194, 51); font-weight: 700; font-size: 14px; text-decoration: none; transition: background .18s ease, color .18s ease; } body.pubv2.pv2affiliates .aff-band-cta:hover, body.pubv2.pv2affiliates .aff-band-cta:focus { background: rgb(255, 194, 51); color: #17191d; text-decoration: none; } @media (max-width: 767px) { body.pubv2.pv2affiliates .aff-band { padding: 20px 0; text-align: center; } body.pubv2.pv2affiliates .aff-band h3 { margin: 0; } body.pubv2.pv2affiliates .aff-band-ctacol { text-align: center; } body.pubv2.pv2affiliates .aff-band-cta { margin-top: 16px; } } /* ---------- 5. the hero — the creators anatomy on the system's ARTLESS ground as the FALLBACK under the inline key art (the Command Center panel art is gone - "I don't like that"; the bland artless band was rejected too - "looks really bland and boring"): the gold bloom over the fine weave paints only if the art fails to load. Left-anchored like the partner hero ("look similar to the partners page"), the three facts in the SAME pv2p-stat chip family the partner KPI row uses: content-sized boxes on the on-art edge, one height, nothing inside a chip may wrap. ---------- */ body.pubv2.pv2affiliates .pv2af-hero { background-color: #141517; /* scroll, not the theme's parallax drift — and !important is load-bearing: scripts.js _parallax() writes background-attachment:fixed and a live backgroundPosition INLINE on every .parallax-1, which sizes the art to the VIEWPORT and showed a washed-out slice of sky here (2026-09-01). This band opts out so the 2560x741 slider art renders as composed: longhouse right, open field left under the scrim. */ background-attachment: scroll !important; background-position: right center !important; background-size: cover !important; background-image: var(--pv2p-bloom, radial-gradient(560px 240px at 100% 0%, rgba(234, 168, 36, 0.13), rgba(234, 168, 36, 0) 72%)), var(--pv2p-weave, repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.014) 0 1px, rgba(255, 255, 255, 0) 1px 8px)); } /* the approved left-anchored scrim, the partner hero's firmer edition: the art is key-art bright on the right, the text lives on the left */ body.pubv2.pv2affiliates .pv2af-hero > .parallax-overlay { background: linear-gradient(0deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.10) 55%), linear-gradient(90deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.76) 34%, rgba(0, 0, 0, 0.52) 68%, rgba(0, 0, 0, 0.44) 100%); } body.pubv2.pv2affiliates .pv2af-heroc { max-width: 62ch; } /* identity, proof, action: the CTA row follows the KPI chips (Codex 2026-09-01: the button was interrupting the partner hero sequence); each is a stack child, so the shared 26px stack gap spaces all three. */ body.pubv2.pv2affiliates .pv2af-herokpi { display: flex; flex-wrap: wrap; margin-top: 0; } body.pubv2.pv2affiliates .pv2af-herostats { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; max-width: none; } body.pubv2.pv2affiliates .pv2af-herostats > .pv2p-stat { flex: 0 0 auto; background: rgba(12, 12, 13, 0.72); border-color: rgba(255, 255, 255, 0.13); } body.pubv2.pv2affiliates .pv2af-herostats > .pv2p-stat b, body.pubv2.pv2affiliates .pv2af-herostats > .pv2p-stat span { white-space: nowrap; } body.pubv2.pv2affiliates .pv2af-statico { color: var(--pv2-gold, #eaa824); font-size: 14px; margin-right: 2px; } /* mobile: the three chips as one 3-up grid row - the flex wrap was orphaning the third chip under the first two (Codex 2026-09-01). */ @media (max-width: 767px) { body.pubv2.pv2affiliates .pv2af-herostats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; } body.pubv2.pv2affiliates .pv2af-herostats > .pv2p-stat { min-width: 0; padding: 10px 8px; } body.pubv2.pv2affiliates .pv2af-herostats > .pv2p-stat span { white-space: normal; font-size: 10px; line-height: 1.25; } }