/* ============================================================ PARTNER PAGES - /partners// (body.pubv2.ptn; /p// 301s here) The creators page's sibling: the page is COMPOSED from creators.tpl's own section grammar (5.1 parallax hero, `pv2p pv2p-w-wide` bands alternating with `callout dark`) and public-v2-core.css components (.pv2p-shead, .pv2p-card/.pv2p-chead, .pv2p-grid, .pv2p-stats, .pv2p-pill, .pv2p-btn, .pv2p-well). The closing band and the video framing follow the SERVICES pages' own patterns (vh-band, the 2/8/2 centered embed). This sheet holds ONLY what no other page has: the partner seal, the hero logo block, the hero's extra film, the mod-card internals, the icon-only socials, the facade's geometry, the preview pill. SOURCE ORDER: this sheet is linked in ; public-v2-core.css is linked from header.tpl INSIDE and wins every tie on order. Every rule here carries .ptn as well as .pubv2 - (0,3,x) against core's (0,2,x) - so specificity, not order, decides (the creators page's contract, same comment there). Contract: CLAUDE-DESIGN-SYSTEM.md ("NEW PUBLIC ROUTES: V2 CHROME AT BIRTH" + the layout rules). ============================================================ */ .ptn { background: #131314; } /* ---- the staff preview pill (dark-launch only; the news pill's posture: a fixed badge OUTSIDE the layout, swallowing no pointer events) ---- */ .ptn-preview { position: fixed; right: 18px; bottom: 18px; z-index: 1200; display: flex; align-items: flex-start; gap: 10px; max-width: 380px; padding: 12px 16px; background: rgba(30, 26, 16, .96); border: 1px solid #eaa824; border-radius: 8px; color: #e8d9b0; font-size: 12.5px; line-height: 1.5; pointer-events: none; } .ptn-preview .fa { color: #eaa824; margin-top: 2px; } .ptn-preview b { color: #fff; font-weight: 700; } .ptn-pv-txt { display: flex; flex-direction: column; gap: 2px; } .ptn-pv-url { color: #b6a877; word-break: break-all; } /* ------------------------------------------------------------ THE HERO - 5.1's band. The partner's logo rides BIG on the left, vertically centered against the text stack ("i want his icon big here vert aligned left", Ryan 2026-08-31); a logo is optional, and without one the text stack simply owns the band - no plate, no gap. Page-scoped adjustments to the band itself: 1. Partner art is commissioned/creator art, brighter than game key art, so the approved left-anchored scrim gets a firmer right edge and a floor film. Same shape, same direction, just less window. ------------------------------------------------------------ */ body.pubv2.ptn .ptn-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.ptn .ptn-herorow { display: flex; align-items: center; gap: 34px; } body.pubv2.ptn .ptn-herotxt { max-width: 62ch; min-width: 0; } body.pubv2.ptn .ptn-herologo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 136px; height: 136px; padding: 14px; background: rgba(12, 12, 13, 0.72); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 16px; box-shadow: 0 4px 24px rgba(0, 0, 0, .45); } body.pubv2.ptn .ptn-herologo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } body.pubv2.ptn .ptn-herologo.round { border-radius: 50%; padding: 0; overflow: hidden; } body.pubv2.ptn .ptn-herologo.round img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* ------------------------------------------------------------ THE PARTNER SEAL - the designation only partner pages carry ("some sort of special notation... kind of the whole point of these types of pages", Ryan 2026-08-31). Built from the system's chip vocabulary: gold plate for the Creator Program mark (fa-video, the /creators/ family icon), letterspaced designation, verified check. The seal IS the link to /creators/. One per page, hero only; .sm is the reduced future variant (cards, embeds). ------------------------------------------------------------ */ body.pubv2.ptn a.ptn-seal, body.pubv2.ptn .ptn-seal { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 7px 15px; background: linear-gradient(180deg, rgba(41, 33, 15, .92), rgba(27, 23, 12, .92)); border: 1px solid rgba(234, 168, 36, .55); border-radius: 999px; box-shadow: 0 1px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05); color: #d9cba4; font-size: 11px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; white-space: nowrap; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; } body.pubv2.ptn a.ptn-seal:hover, body.pubv2.ptn a.ptn-seal:focus-visible { border-color: var(--pv2-gold, #eaa824); box-shadow: 0 1px 14px rgba(234, 168, 36, .25), inset 0 1px 0 rgba(255, 255, 255, .05); color: #f4e8c8; text-decoration: none; } body.pubv2.ptn .ptn-seal-txt b { color: var(--pv2-gold, #eaa824); font-weight: 800; } body.pubv2.ptn .ptn-seal-check { color: var(--pv2-gold, #eaa824); font-size: 13px; } body.pubv2.ptn .ptn-seal.sm { gap: 6px; padding: 4px 11px; font-size: 9.5px; letter-spacing: 1.6px; } body.pubv2.ptn .ptn-seal.sm .ptn-seal-check { font-size: 11px; } /* ONE KPI line, ONE chip family ("The 2 on the left look nothing like the 7 on the right. Those need to be all looking the same. Also, no word dropping.", Ryan 2026-08-31): every chip - stat or social - is the same pv2p-stat box on the on-art edge, value line over label line, sized to its own content, and NOTHING inside a chip may wrap; narrow viewports flow whole chips to the next line. A social's value is its brand icon plus its public count (icon alone when a platform reports none), its label the platform name; the anchor owns the padding so the whole chip is the link. */ body.pubv2.ptn .ptn-herokpi { display: flex; flex-wrap: wrap; margin-top: 26px; } body.pubv2.ptn .ptn-herostats { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; max-width: none; } body.pubv2.ptn .ptn-herostats > .pv2p-stat { flex: 0 0 auto; background: rgba(12, 12, 13, 0.72); border-color: rgba(255, 255, 255, 0.13); } body.pubv2.ptn .ptn-herostats > .pv2p-stat b, body.pubv2.ptn .ptn-herostats > .pv2p-stat span { white-space: nowrap; } body.pubv2.ptn .ptn-statico { color: var(--pv2-gold, #eaa824); font-size: 14px; margin-right: 2px; } /* the social members of the family: same box, the link fills it */ body.pubv2.ptn .ptn-kpisoc { padding: 0; } body.pubv2.ptn .ptn-kpisoc-a { display: block; padding: 11px 12px; color: inherit; text-decoration: none; } body.pubv2.ptn .ptn-kpisoc-a b i { font-size: 15px; color: var(--pv2-text-muted, #999); margin-right: 3px; vertical-align: 1px; transition: color .14s ease; } body.pubv2.ptn .ptn-kpisoc-a span { transition: color .14s ease; } body.pubv2.ptn .ptn-kpisoc:hover { border-color: var(--pv2-border-strong, #4c4c4d); } body.pubv2.ptn .ptn-kpisoc:hover .ptn-kpisoc-a span { color: #bbb; } /* game icons wherever a game is named ("we need game icon there in a nice way"): the game's own key art as a small cover-cropped square, inside CTAs */ body.pubv2.ptn .ptn-gamebtn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; } body.pubv2.ptn .ptn-gameico { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); } /* section-head icon: gold, one per head, the classic creators page's own heading treatment (fa-video/fa-code in gold inside the h3) */ body.pubv2.ptn .ptn-shead-ico { color: var(--pv2-gold, #eaa824); font-size: 0.82em; margin-right: 6px; } /* the video head sits centered over the centered player - the services pages' video-band alignment; the sub keeps its measure, centered */ body.pubv2.ptn .ptn-vidhead { text-align: center; } body.pubv2.ptn .ptn-vidhead .pv2p-shead-sub { margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------ THE BIO card - internals only; the card is core's. One card, capped at a reading measure (a lone full-width card at wide-rail width is a wall of prose). ------------------------------------------------------------ */ /* the bio: head, then ONE flowing single-column block, left-aligned, at the news article's reading treatment - 16.5px/1.75 near-white on the 68ch-at-16.5px measure (~708px, stated in px for the same ch-resolution trap news.css documents). The column experiments are DONE: balanced columns fragmented the money-link sentence, break-protected columns packed 2 lines against 5, the authored lede/body grid read as two disconnected blocks (Ryan: "This still looks absolutely awful"). Simplest thing that can't be wrong. */ body.pubv2.ptn .ptn-bio-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; } body.pubv2.ptn .ptn-bio-head h3 { margin: 0; color: #fff; font-size: 16px; font-weight: 600; } body.pubv2.ptn .ptn-bio-body { max-width: 708px; font-size: 16.5px; line-height: 1.75; color: #f0f0f0; } body.pubv2.ptn .ptn-bio-body p { margin: 0 0 1.15em; line-height: 1.75; } body.pubv2.ptn .ptn-bio-body p:last-child { margin-bottom: 0; } /* the promo code chip, inline in the rent strip's line */ body.pubv2.ptn .ptn-promo-code { padding: 3px 11px; background: rgba(12, 12, 13, .55); border: 1px dashed var(--pv2-gold, #eaa824); border-radius: var(--pv2-radius, 6px); color: var(--pv2-gold, #eaa824); font-size: 13px; letter-spacing: 2px; white-space: nowrap; } /* the brand declares itself on hover (the creators platform colors) — the ptn-br-* class rides the social chip's li in the hero KPI row */ body.pubv2.ptn .ptn-br-yt:hover i { color: #FF0000; } body.pubv2.ptn .ptn-br-tw:hover i { color: #9146FF; } body.pubv2.ptn .ptn-br-dc:hover i { color: #5865F2; } body.pubv2.ptn .ptn-br-pt:hover i { color: #FF424D; } body.pubv2.ptn .ptn-br-ts:hover i { color: #00b976; } body.pubv2.ptn .ptn-br-gh:hover i { color: #fff; } /* ------------------------------------------------------------ THE MOD CARD - an a.pv2p-card; only the internals are this page's. Six cards at the site's card proportions (64px icon, --pv2p-pad). ------------------------------------------------------------ */ body.pubv2.ptn a.ptn-mod { display: flex; gap: var(--pv2p-s3, 14px); align-items: flex-start; padding: var(--pv2p-pad, 18px); text-decoration: none; transition: border-color .12s ease; } body.pubv2.ptn a.ptn-mod:hover { border-color: var(--pv2-border-strong, #4c4c4d); text-decoration: none; } body.pubv2.ptn .ptn-mod-icon { width: 64px; height: 64px; border-radius: var(--pv2-radius, 6px); flex: 0 0 auto; object-fit: cover; background: var(--pv2p-deep, #131314); } body.pubv2.ptn .ptn-mod-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; } body.pubv2.ptn .ptn-mod-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; } body.pubv2.ptn .ptn-mod-name { color: #fff; font-size: 15px; font-weight: 600; min-width: 0; } body.pubv2.ptn .ptn-mod-desc { color: var(--pv2-text-muted, #999); font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* the view-all button row breathes above the grid it summarises */ body.pubv2.ptn .callout .pv2p-btnrow { margin-top: var(--pv2p-s5, 26px); } /* ------------------------------------------------------------ THE VIDEO - the services pages' centered 16:9 embed, click-to-load (js/news-video.js binds on .nws-ytwrap[data-yt]). At rest the facade is indistinguishable from a real YouTube embed: poster + the platform's own red badge, dead-centered, nothing else. ------------------------------------------------------------ */ body.pubv2.ptn .ptn-embed { border-radius: var(--pv2-radius, 6px); overflow: hidden; border: 1px solid var(--pv2-line, #2c2c2d); background: #000; } body.pubv2.ptn .nws-ytwrap { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } body.pubv2.ptn .nws-ytposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } body.pubv2.ptn .nws-ytbtn { position: absolute; inset: 0; width: 100%; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; cursor: pointer; } body.pubv2.ptn .ptn-ytbadge { display: block; opacity: .92; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); transition: opacity .12s ease; } body.pubv2.ptn .nws-ytbtn:hover .ptn-ytbadge, body.pubv2.ptn .nws-ytbtn:focus-visible .ptn-ytbadge { opacity: 1; } body.pubv2.ptn .nws-ytframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ------------------------------------------------------------ THE CLOSING BAND - the services pages' call-to-action language (vh-band: dark gradient, gold hairlines, h3 + muted line left, outline-to-fill gold CTA right), partner twist kept. ------------------------------------------------------------ */ body.pubv2.ptn .ptn-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.ptn .ptn-band h3 { color: #f2f4f6; font-size: 22px; margin: 0 0 6px; } body.pubv2.ptn .ptn-band .ptn-band-name { color: rgb(255, 194, 51); } body.pubv2.ptn .ptn-band p { color: #b9c0c7; font-size: 14px; margin: 0; max-width: 640px; } body.pubv2.ptn .ptn-band-ctacol { text-align: right; } body.pubv2.ptn .ptn-band-cta { display: inline-flex; align-items: center; gap: 9px; 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.ptn .ptn-band-cta:hover, body.pubv2.ptn .ptn-band-cta:focus { background: rgb(255, 194, 51); color: #17191d; text-decoration: none; } /* NO solid variant. The services pages' rent bar is the standard (Ryan 2026-08-31: "our little rent bar that we have on our services pages... that should be the standard and not this one") - .ptn-band mirrors the services .vh-band byte for byte: dark gradient, gold hairlines, 26px pad, h3 22/#f2f4f6, p 14/#b9c0c7 on 640px, and the OUTLINE gold CTA that fills on hover. Both strips wear it; a services page's bars carry no solid golds and neither does this page. */ /* ---- phones ---- */ @media (max-width: 640px) { body.pubv2.ptn .ptn-herorow { gap: 18px; } body.pubv2.ptn .ptn-herologo { width: 86px; height: 86px; padding: 9px; border-radius: 12px; } body.pubv2.ptn .ptn-herostats { flex-wrap: wrap; } .ptn-preview { left: 12px; right: 12px; max-width: none; } /* the seal at phone scale: tighter tracking so the designation fits a 360px viewport on one line */ body.pubv2.ptn .ptn-seal { font-size: 10px; letter-spacing: 1px; gap: 8px; padding-right: 11px; } body.pubv2.ptn .ptn-seal-mark { width: 22px; height: 22px; font-size: 10.5px; } body.pubv2.ptn .ptn-ytbadge { width: 56px; height: 40px; } } @media (max-width: 767px) { body.pubv2.ptn .ptn-band { padding: 20px 0; text-align: center; } body.pubv2.ptn .ptn-band p { margin: 0 auto; } body.pubv2.ptn .ptn-band-ctacol { text-align: center; } body.pubv2.ptn .ptn-band-cta { display: inline-flex; margin-top: 16px; } }