/* ══ the public price grid ═════════════════════════════════════════ Loaded by the four product pages. Its own file rather than a block inside each page, because site.css is not loaded by index.html and a rule that lives in only some of the pages that need it has already caused three bugs here. Shared behaviour, shared file, loaded by everything that uses it. Component names are .pr-* so nothing collides with the .bk-* booker rules still sitting in site.css. ═══════════════════════════════════════════════════════════════════ */ /* ── product-page hero ─────────────────────────────────────────── What replaced the booker. No price on it: the product pages explain, /pricing quotes, so a figure exists in exactly one public place. Two actions — into the app, or to the numbers. ──────────────────────────────────────────────────────────────── */ .ph{max-width:760px;margin:0 auto;padding:8px 0 6px;text-align:center} .ph h1{margin:12px 0 14px;font-size:clamp(32px,5.4vw,52px);line-height:1.06;letter-spacing:-.032em} .ph-sub{margin:0 auto;max-width:640px;color:var(--muted-2);font-size:16.5px;line-height:1.68} .ph .bk-eyebrow{justify-content:center} .ph-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:26px 0 0} .ph-nb{margin:14px 0 0;color:var(--muted);font-size:13px} /* the storefront's .pill has no outlined variant — the secondary action here must not compete with the one that goes to the app */ .pill.gho{background:none;border:1px solid rgba(255,255,255,.22);color:var(--text)} .pill.gho:hover{border-color:var(--green,#4ad6ff);color:var(--green,#4ad6ff);background:rgba(74,214,255,.06)} /* The follower pages used to left-align this, because their hero was a two-column .pdp-left panel that centred text fought. They now use the same centred .ph hero as /twitch and /kick, so the override is gone with the markup it selected. */ /* ── /pricing page ──────────────────────────────────────────────── */ /* This hero starts 14px lower than the identical one on /twitch — measured nav→hero 95px here against 79px there. The h1 is this section's FIRST child (the product pages open with a .bk-eyebrow), so its 12px top margin collapses straight out through the section and pushes the whole thing down. The old `padding-top:14px` was not spacing, it was a margin-collapse guard that happened to reinstate the same gap. Zero the margin instead and both heroes begin on the same line. */ .pc-hero{padding-top:0} .pc-hero h1{margin-top:0} /* One column, and it is the same one the rest of the site uses. This was `max-width:1080px;margin:0 auto`, which put every section at L=115 W=1080 while .cl-panel — sharing its rules with the product pages — sat at L=65 W=1180. The closing panel visibly jutted out 50px on each side of everything above it, and none of it lined up with the nav. On /twitch the band box and the closing panel are both exactly L=65 W=1180; letting .wrap set the width here puts /pricing on that same edge. The measure of the text is capped by .pc-head, not by the section, so the ledes do not get longer as a result. */ /* Rhythm, the opener and the 36px rail are NOT set here. .pc-sec is added to the `main.page .sec` rules further down instead, so this page cannot drift from the product pages again — one set of numbers, four selectors. Two things that went wrong before doing it that way: `padding:88px 0 0` with no bottom left 88px between bands where the product pages have 184px, and only 40px above the closing panel; and `.pc-sec:first-of-type` matched nothing at all, because the first
inside .wrap is the hero. */ /* 34px under the heading, matching the product bands — this was 22px. */ .pc-head{max-width:720px;margin:0 0 34px} /* site.css styles .sec-q only inside .sec — these headings live in .pc-sec, so the eyebrow arrived as plain body text. Same treatment, stated here. */ .pc-head .sec-q{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--muted)} /* The same heading as every other band on the site. This was Inter at clamp(25px,3.4vw,34px)/1.14/-.028em while `main.page .sec h2` is Space Grotesk at 34px desktop, 26px below 900, 1.12/-.025em — so the two page types disagreed on family, and on size by up to 4.6px through the middle widths. Sizes come from the shared rule now; only the margins are local. */ .pc-head h2{margin:14px 0 0;font-family:'Space Grotesk',var(--head); font-size:34px;letter-spacing:-.025em;line-height:1.12} /* 60ch, as on the product pages. .pc-head's 720px cap let this run to ~96 characters a line, half again past a comfortable measure. */ .pc-lede{margin:14px 0 0;color:var(--muted-2);font-size:15px;line-height:1.6;max-width:60ch} /* platform switch — two options, so a segmented control rather than tabs */ .pr-plats{display:inline-flex;gap:4px;padding:4px;margin:0 0 16px; border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.03)} .pr-plat{appearance:none;border:0;background:none;color:var(--muted-2);border-radius:999px; padding:9px 22px;font:inherit;font-size:14px;font-weight:650;cursor:pointer; transition:background .16s,color .16s} .pr-plat:hover{color:#fff} .pr-plat.on{background:var(--green,#4ad6ff);color:#08080a} /* ── monthly tier cards ───────────────────────────────────────── A tier is a claim about who it is for, so the card leads with the name and the sentence, and the tick list answers "what do I get" before the button asks for a decision. ──────────────────────────────────────────────────────────────── */ /* min() so the track can go narrower than its own minimum on a 320px screen — a bare minmax(250px,1fr) refuses to shrink below 250 and pushes the card past the right edge instead, which is what made the page scroll sideways */ .pk2-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))} /* Four tiers into an auto-fit track gives three columns between 810 and 1181px, which strands the fourth card alone with two thirds of the row empty — iPad landscape, a half-screen laptop window, and 1280 at 110% browser zoom all land in it. Step straight from four to two so a row is never part-filled. */ @media(min-width:810px) and (max-width:1181px){ .pk2-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } .pk2{display:flex;flex-direction:column;padding:24px 22px;border-radius:20px; border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.028); transition:border-color .16s,background .16s} .pk2:hover{border-color:rgba(74,214,255,.36);background:rgba(74,214,255,.04)} .pk2-name{color:var(--green,#4ad6ff);font-size:14px;font-weight:700;letter-spacing:.01em} .pk2-price{display:flex;align-items:baseline;gap:6px;margin:10px 0 0} .pk2-price b{font-size:34px;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .pk2-price span{color:var(--muted);font-size:13px} .pk2-blurb{margin:10px 0 0;color:var(--muted-2);font-size:13.5px;line-height:1.6} .pk2-list{display:grid;gap:9px;margin:18px 0 22px} .pk2-tick{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.5;color:var(--muted-2)} .pk2-tick svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--green,#4ad6ff)} .pk2-go{margin-top:auto;justify-content:center;text-align:center} .pr{max-width:1080px;margin:0 auto;padding:0 0 8px} .pr-head{max-width:720px;margin:0 0 26px} .pr-head h1{margin:10px 0 12px;font-size:clamp(30px,4.6vw,46px);line-height:1.08;letter-spacing:-.03em} .pr-sub{color:var(--muted-2);font-size:16px;line-height:1.65;margin:0} /* ── duration tabs ──────────────────────────────────────────────── */ .pr-durs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px} .pr-dur{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03); color:var(--muted-2);border-radius:999px;padding:9px 16px;font:inherit;font-size:14px; font-weight:600;cursor:pointer;transition:border-color .16s,background .16s,color .16s} .pr-dur:hover{border-color:rgba(255,255,255,.24);color:#fff} .pr-dur.on{background:var(--green,#4ad6ff);border-color:transparent;color:#08080a} /* ── the cards ────────────────────────────────────────────────────── Six packages, so the track has to divide into six: at 300px minimum the 1080 wrapper fits three across and the grid runs 3+3. Letting it fit four left two cards alone on the second row beside two empty cells, which reads as a page that failed to load the rest. Below ~940px it steps to two (3+3 -> 2+2+2), then one. */ .pr-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .pr-card{display:flex;flex-direction:column;gap:14px;padding:20px;text-decoration:none; border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.028); color:inherit;transition:transform .16s,border-color .16s,background .16s} .pr-card:hover{transform:translateY(-3px);border-color:rgba(74,214,255,.42);background:rgba(74,214,255,.05)} .pr-card:focus-visible{outline:2px solid var(--green,#4ad6ff);outline-offset:3px} /* The card that pricing.js widens to close a short last row. Stacked content in a full-width card leaves a long empty right-hand side, so it turns on its side: size on the left, price and action pushed to the right. */ .pr-card.wide{flex-direction:row;align-items:center;gap:26px;flex-wrap:wrap} .pr-card.wide .pr-n{flex:1 1 auto} .pr-card.wide .pr-p{margin-top:0} .pr-n{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px} /* tabular figures: these are numbers read down a column of cards, and proportional digits made 1,000 and 2,500 start at visibly different offsets */ .pr-n b{font-size:21px;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums} .pr-n > span{color:var(--muted-2);font-size:13.5px} .pr-badge{border:1px solid rgba(74,214,255,.4);color:var(--green,#4ad6ff);border-radius:999px; padding:2px 8px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .pr-p{display:flex;align-items:baseline;gap:8px;margin-top:auto} /* The price leads the card. It used to be 23px under a 26px quantity, same weight and same colour, so the two competed and neither won. */ .pr-p b{font-size:26px;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1} .pr-p span{color:var(--muted-2);font-size:12.5px} .pr-go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:650; color:var(--green,#4ad6ff)} .pr-go::after{content:"→";transition:transform .16s} .pr-card:hover .pr-go::after{transform:translateX(3px)} /* ── the note under the grid ────────────────────────────────────── */ /* 60ch. Uncapped this ran the full 1180px band — about 138 characters a line, against a lede three times shorter directly above it. */ .pr-foot{margin:18px 0 0;color:var(--muted-2);font-size:13.5px;line-height:1.65;max-width:60ch} .pr-foot a{color:var(--green,#4ad6ff)} @media (prefers-reduced-motion:reduce){ .pr-card,.pr-go::after{transition:none} .pr-card:hover{transform:none} } /* ══ anchors wearing button clothes ═══════════════════════════════ site.css assumes a button; these are , which carries an underline and shrink-wraps. .buy-btn is still built by plans.js and variants.js. The .fp-pack and .fp-hand rules that sat here went with the follower pages' package picker, which moved into the dashboard. ══════════════════════════════════════════════════════════════════ */ a.buy-btn{display:block;text-align:center;text-decoration:none;box-sizing:border-box} /* ══ product-page layout repairs ═══════════════════════════════════ Loaded by /twitch, /kick and both follower pages. These are faults left behind when the order widget moved into the dashboard and the pages became information rather than shopfronts. ═════════════════════════════════════════════════════════════════ */ /* ── the FAQ band ────────────────────────────────────────────── .fq is capped at 760px and left-aligned inside a 1285px section, so the whole right half of the band was empty — the single worst hole on the page. The cap is right (an accordion 1285px wide is unreadable); what was missing was anything beside it. So the band becomes two columns: the question and the heading hold a narrow left rail, the accordion takes the rest. No markup change — the three children are placed explicitly. */ /* This used to be scoped `body:not(.is-followers)`, because the follower pages shared the #faq id but had completely different children (a .faq-list of cards) that the grid dragged out of shape. They are now .sec bands with the same three children as the viewer pages, so the exclusion is gone and all four product pages get this layout. The help line sits INSIDE .fq on purpose: a fourth direct child would be auto-placed into the grid. */ /* 1200, not 900. The accordion is capped at 760px when it is full width, but a 320px rail plus a 64px gap left it only 412px at 900 — so crossing 899→900 made the answers NARROWER as the window got wider, which is the one thing a breakpoint must never do. At 1200 (and with a slimmer rail) it lands at ~650px, close enough that the step is no longer visible. */ @media (min-width: 1200px) { main.page #faq { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); /* The accordion spans both rows, so without explicit rows its height is shared between them — row 1 stretched and dropped the heading into the middle of the band, away from the eyebrow it belongs to. Row 1 hugs the eyebrow; row 2 takes the slack. */ grid-template-rows: auto 1fr; column-gap: 56px; align-items: start; } main.page #faq > .sec-q, main.page #faq > .pc-head { grid-column: 1; grid-row: 1; } main.page #faq > h2 { grid-column: 1; grid-row: 2; margin: 0; } main.page #faq > .fq { grid-column: 2; grid-row: 1 / -1; margin-top: 0; max-width: none; } /* Deliberately NOT sticky: the band is only as tall as seven collapsed rows, so sticking buys nothing and detaches the heading from the question it answers. It sits with the first row instead. */ } /* The follower-page hero used to be a .pdp-grid holding a 460px column open for an order widget that had already moved to the dashboard, wrapped around a .pdp-hero-box purple gradient panel. About 40 lines lived here to collapse that dead column, pair the two loose cards, and lift muted text to AA against the gradient. All of it went when those pages were rebuilt as .sec bands — they use the same .ph hero as /twitch and /kick now, on the same near-black page, so none of it has anything left to select. Removed rather than left dangling; it is in git if the old hero is ever wanted back. */ /* ── the closing CTA ─────────────────────────────────────────── .cl-cta had NO rules of its own — .order-widget (a card class) was the only thing styling it, so the band ended on a bordered panel wrapped around two buttons. It is also a , i.e. inline, which is why the buttons sat on top of each other. */ .cl-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; } @media (max-width: 520px) { .cl-cta { flex-direction: column; align-items: stretch; } .cl-cta .pill { width: 100%; justify-content: center; } } /* ── page backdrop ───────────────────────────────────────────── The product pages were flat #08080a edge to edge — no depth, and nothing tying a page to the platform it sells for. Two fixed layers behind everything: ::before a wash tinted with --pg (Twitch purple, Kick green, cyan on /pricing — set per page on ), plus a cool lift off pure black so the panels have something to sit on ::after a faint grid, masked out before it reaches the reading content — it belongs behind the hero, not behind body copy Fixed rather than scrolling so it reads as the room the page is in rather than a texture sliding past. Both are pointer-events:none and z-index 0, with the real content lifted to 1. ─────────────────────────────────────────────────────────────── */ body { --pg: var(--green); } body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 62% at 50% -10%, color-mix(in srgb, var(--pg) 34%, transparent) 0%, transparent 62%), radial-gradient(60% 42% at 88% 0%, rgba(74, 214, 255, .16) 0%, transparent 60%), radial-gradient(70% 50% at 8% 20%, color-mix(in srgb, var(--pg) 12%, transparent) 0%, transparent 60%), linear-gradient(180deg, #101019 0%, #0a0a10 34%, #08080a 62%); } body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .055) 1px, transparent 1px); background-size: 76px 76px; /* Reaches further down the page than before — it was fading out almost immediately, which is why it read as "very subtle". */ -webkit-mask-image: radial-gradient(95% 78% at 50% -4%, #000 0%, rgba(0,0,0,.35) 52%, transparent 88%); mask-image: radial-gradient(95% 78% at 50% -4%, #000 0%, rgba(0,0,0,.35) 52%, transparent 88%); } /* Everything real sits above the two backdrop layers. header.nav is deliberately NOT in this list. site.css gives it position:fixed; z-index:60 so its dropdown menus paint over the page — including it here reset that to 1, which put the nav on the same level as main and, since main comes later in the DOM, the hero headline rendered straight over an open dropdown. The nav already sits above the backdrop on its own; it needed nothing from this rule. */ main.page, footer { position: relative; z-index: 1; } /* The follower pages used to dim this to .55, because their gradient hero already read as a surface and the wash muddied its edges. That hero is gone, so they take the same full-strength wash as every other product page. */ /* ══ band rhythm ══════════════════════════════════════════════════ Every band was separated by an identical 1px hairline, including the very first one — which put a rule directly under the hero CTA, so the page opened on a divider. Four identical rules down a page also makes it read as a list rather than a document: nothing tells you which band matters, because they all weigh the same. Hairlines out. Rhythm comes from surface and space instead: alternate bands sit on a faint raised panel, so the page reads as blocks with air between them. Specificity has to beat the inline