/* * bd-membership front end, the site-design generation: the members gate's CARD (templates/gate.php, inside the * article) and its full-screen MEMBERSHIP SHEET (templates/sheet.php, at the end of ). No build step. * * Source: docs/paywall/design/mockups/proposed.css (v1 and the "v2" section, with the v2.1 diff of commit 82f9eccb8), * ported for the build on 2026-10-13. Specification: docs/paywall/design/PROPOSAL.md sections 1-6 (v1), V2 and V2.1. * Every token and component rule names its * source in the site (single.php = wordpress/themes/Newspaper-child/single.php, the regular article template). * * Journalism purpose: the gate is rolled out on regular articles; a reader must meet it as part of the paper they are * reading (same type, same yellow, same buttons and card as the article and its membership band), and a reader who * decides to pay gets one task on screen, over the article, with every exit returning to the same paragraph. * * Differences from proposed.css, each for a reason: * - Scope: .bd-gate (the card, and the sheet's body, which carries class bd-gate) and .bd-sheet only. The * .bd-membership-page rules (/account/, /membership-terms/) are NOT here: those pages are served by the * membership service and still load the frozen legacy pair membership.css/.js (see includes/content-filters.php * bd_membership_enqueue_gate_assets); their redesign is decision G-15, built with membership/templates. * - Removed with v2 (PROPOSAL.md V2-6): the in-card plan tiles (.bd-plan*, .bd-gate__plans, __plan-grid), the * in-card step head and "(change)" link, the free-account note, the in-card sign-in panel, the free-article ask. * - Added: the card title's two variants in one grid cell (no shift when "You're out of free articles." swaps in), * the Stripe test-mode notice, the cadence switch's .is-selected fallback (browsers without :has()), h4 inside * the terms step (the terms' h3 sections move one level down under the step's h2), the card's own progress line * (progress that lands in the article while the sheet is closed, PROPOSAL.md V2-2). * - Not ported: the `not-prose` opt-out and the --brand-* tokens (DEBT-site-design-tokens.md D6/D8): they need * single.php and a token file, which this build does not change. Rules stay scoped under .bd-gate (0,2,0), which * beats single.php's .article__body prose rules (0,1,1), as in the mockups. * - overflow-fix.css (the legacy phone sheet) no longer matches inside .bd-gate / .bd-sheet: fixed at its source * (debt D-1553), not by out-specifying it here. * * Layout stability (CLS): the card is in the cached HTML; the sheet is position:fixed (it moves nothing in the * article). Inside the sheet, the wallet slot keeps 48px and the card form keeps its reserved min-height * (--bdm-pe-min and the container queries below); heights were measured with Space Grotesk and are UNVERIFIED with * Inter (PROPOSAL.md section 4). */ .bd-gate, .bd-unlock-note, .bd-sheet, .bd-cut { --bdm-bg: var(--bg-primary, #0a0a0a); /* single.php:183; live body background rgb(10,10,10) */ --bdm-surface: var(--bg-secondary, #141414); /* single.php:184; live .trending / .footer background rgb(20,20,20) */ --bdm-field: var(--bg-tertiary, #1a1a1a); /* single.php:185; live .bd-newsletter__input background rgb(26,26,26) */ --bdm-text: var(--text-primary, #ffffff); /* single.php:186; live body colour */ --bdm-soft: var(--text-secondary, #a0a0a0); /* single.php:187; live .article__subtitle colour rgb(160,160,160) */ --bdm-accent: var(--accent, #ffe135); /* single.php:189; live .article__body a colour rgb(255,225,53) */ --bdm-accent-hover: var(--accent-hover, #ffd700); /* single.php:190 */ --bdm-rule: var(--border, #2a2a2a); /* single.php:191; live header border-bottom rgb(42,42,42) */ --bdm-line: #707070; /* overflow-fix.css:28 (--bd-gray-500); live iPhone .bd-newsletter__input border rgb(112,112,112). The site's only input border that meets WCAG 1.4.11 (3.51:1 on #1a1a1a); #2a2a2a is 1.21:1. */ --bdm-on-accent: #0a0a0a; /* single.php:680 (.bd-member-band__btn colour) */ --bdm-danger: #ffb3ac; /* wordpress/mu-plugins/bd-forms/assets/bd-forms.css:806 (error text) */ --bdm-danger-line: #e0564d; /* bd-forms.css:830 (invalid field border) */ --bdm-font-head: var(--font-headline, 'Satoshi', system-ui, -apple-system, sans-serif); /* single.php:192 */ --bdm-font-ui: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif); /* single.php:193 */ --bdm-radius-btn: 2px; /* single.php:681 (.bd-member-band__btn border-radius) */ --bdm-radius-card: 8px; /* single.php:654 (.bd-member-band border-radius) */ --bdm-radius-tile: 4px; /* single.php:935 (.trending) and :881 (.post-nav__link) */ --bdm-gate-fade: 4.5rem; /* membership.css:55 (unchanged) */ --bdm-pe-min: 366px; /* the card form's height with Inter, measured 2026-10-13 in Stripe test mode (membership_sheet_browser_test.py part B): 366px in the desktop panel (Chromium 1440), 392px / 393px at iPhone 13 (Chromium / WebKit, the 392px container rule below). Was 296px (Space Grotesk). */ color-scheme: dark; } /* ───────────────────────── shared primitives ───────────────────────── */ .bd-gate [hidden] { display: none !important; } .bd-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Primary button = the article's membership button (.bd-member-band__btn, single.php:679-685): Inter 800, .92rem, .04em, uppercase, #0a0a0a on #ffe135, radius 2px; hover #ffd700; focus 3px white ring offset 3px. */ .bd-gate .bd-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 48px; padding: 0 1.7rem; font-family: var(--bdm-font-ui); font-size: .92rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; text-align: center; text-decoration: none; border-radius: var(--bdm-radius-btn); border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; -webkit-appearance: none; appearance: none; } .bd-gate .bd-btn--primary { background: var(--bdm-accent); border-color: var(--bdm-accent); color: var(--bdm-on-accent); } .bd-gate .bd-btn--primary:hover { background: var(--bdm-accent-hover); border-color: var(--bdm-accent-hover); } /* Secondary = the site's outlined control (.bd-nav-support, bd-support-cta.php:27: 1px #ffe135 border, #ffe135 text, Inter 700 uppercase), at the primary button's height and radius. */ .bd-gate .bd-btn--secondary { background: transparent; border-color: var(--bdm-accent); color: var(--bdm-accent); font-weight: 700; } .bd-gate .bd-btn--secondary:hover { background: var(--bdm-accent); color: var(--bdm-on-accent); } .bd-gate .bd-btn[aria-busy='true'] { cursor: progress; opacity: .75; } .bd-gate .bd-btn[disabled] { cursor: not-allowed; opacity: .55; } /* Text links: the article's in-body link (single.php:605-613: accent, underline, offset 2px). */ .bd-gate .bd-link { display: inline-flex; align-items: center; min-height: 24px; /* WCAG 2.5.8 target size (24px); inline text links are exempt, buttons are not */ padding: 0 .15rem; margin: 0; background: none; border: 0; font: inherit; font-weight: 600; color: var(--bdm-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .bd-gate .bd-link:hover { color: var(--bdm-accent-hover); } .bd-gate .bd-link[disabled] { color: var(--bdm-soft); text-decoration: none; cursor: default; font-weight: 400; } /* Quiet link = .bd-member-band__secondary (single.php:687-688): #a0a0a0, Inter 500, underline offset 3px. */ .bd-gate .bd-link--quiet { color: var(--bdm-soft); font-weight: 500; text-underline-offset: 3px; } .bd-gate .bd-link--quiet:hover { color: var(--bdm-accent); } .bd-gate a:not(.bd-btn) { color: var(--bdm-accent); text-decoration: underline; text-underline-offset: 2px; } /* Focus: the site's two rings. Yellow-filled buttons: 3px white, offset 3px (single.php:685). Everything else: 2px accent, offset 3px (single.php:690). Never removed. */ .bd-gate :focus-visible { outline: 2px solid var(--bdm-accent); outline-offset: 3px; } .bd-gate .bd-btn--primary:focus-visible, .bd-gate[data-bd-wallets='none'] .bd-gate__card-toggle[aria-expanded='false']:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .bd-gate [tabindex='-1']:focus { outline: none; } .bd-gate [tabindex='-1']:focus-visible { outline: 2px dashed var(--bdm-accent); outline-offset: 6px; } /* Focus Not Obscured (2.4.11): single.php's sticky header is 135px (live, 1440) / 85px (live, iPhone 13). */ .bd-gate input, .bd-gate button, .bd-gate a, .bd-gate iframe, .bd-gate [tabindex] { scroll-margin-top: 160px; scroll-margin-bottom: 24px; } .bd-gate .bd-field { display: grid; gap: .35rem; margin: 0 0 1rem; } .bd-gate .bd-field__label { font-family: var(--bdm-font-ui); font-size: .85rem; font-weight: 600; color: var(--bdm-text); } .bd-gate .bd-field__hint { margin: 0; font-family: var(--bdm-font-ui); font-size: .85rem; line-height: 1.5; color: var(--bdm-soft); } /* Field = the site's email input (.bd-newsletter__input / .newsletter-popup__input, single.php:1353-1372) with the WCAG border (#707070) and 16px text (no iOS zoom; live iPhone computed 16px). */ .bd-gate .bd-field__input { width: 100%; min-height: 48px; padding: .75rem 1rem; font-family: var(--bdm-font-ui); font-size: 1rem; color: var(--bdm-text); background: var(--bdm-field); border: 1px solid var(--bdm-line); border-radius: var(--bdm-radius-btn); -webkit-appearance: none; appearance: none; } .bd-gate .bd-field__input::placeholder { color: var(--bdm-soft); } .bd-gate .bd-field__input:focus-visible { border-color: var(--bdm-accent); } .bd-gate .bd-field__input[aria-invalid='true'] { border-color: var(--bdm-danger-line); box-shadow: 0 0 0 1px var(--bdm-danger-line); } .bd-gate .bd-field__input--code { max-width: 12rem; font-size: 1.375rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; } .bd-gate .bd-error { margin: 0; font-family: var(--bdm-font-ui); font-size: .9rem; line-height: 1.45; font-weight: 500; color: var(--bdm-danger); } .bd-gate .bd-error:empty { display: none; } .bd-gate .bd-error:not(:empty)::before { content: 'Error: '; font-weight: 700; } .bd-gate .bd-check { width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; accent-color: var(--bdm-accent); cursor: pointer; flex: none; } /* ───────────────────────── the gate: an in-article card ───────────────────────── */ /* The card is the membership band's family (single.php:654-664: 1px #2a2a2a border, 8px radius, 3px yellow rule, band padding), on the site's surface colour, left-aligned like the band and the article column. */ .bd-gate { position: relative; margin: 2.75rem 0; /* single.php:654 (.bd-member-band margin) */ padding: clamp(1.7rem, 4vw, 2.75rem) clamp(1.4rem, 4vw, 2.75rem); /* single.php:664 (.bd-member-band__inner) */ background: linear-gradient(var(--bdm-accent), var(--bdm-accent)) top / 100% 3px no-repeat, var(--bdm-surface); border: 1px solid var(--bdm-rule); border-radius: var(--bdm-radius-card); color: var(--bdm-text); font-family: var(--bdm-font-ui); font-size: 1rem; line-height: 1.55; text-align: left; scroll-margin-top: 160px; } /* The public lead fades into the gate (decoration over public text, absolutely positioned: no layout space). */ .bd-gate::before { content: ''; position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); height: var(--bdm-gate-fade); background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 0%, var(--bdm-bg) 100%); pointer-events: none; } .bd-gate .bd-gate__head { position: relative; max-width: 36rem; scroll-margin-top: 160px; } .bd-gate .bd-gate__alias { display: block; height: 0; overflow: hidden; scroll-margin-top: 160px; } /* Title = the site's membership headline voice (.bd-member-band__title / .bd-member-rail__title, single.php:668-670 and :1025-1027): Satoshi 900 italic uppercase, the second half in yellow. Sizes: the rail's 1.7rem on phones, the band's minimum 2.1rem from 600px. */ .bd-gate .bd-gate__title { margin: 0 0 .85rem; font-family: var(--bdm-font-head); font-size: 1.7rem; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: .95; letter-spacing: -.02em; color: var(--bdm-text); } .bd-gate .bd-gate__title em { font-style: italic; color: var(--bdm-accent); } /* Paid gates print both titles ("Subscribe to read the full story." and variant C "You're out of free articles.") in one grid cell, so the box is as tall as the taller one and the swap for a signed-in reader moves nothing. */ .bd-gate .bd-gate__title[data-bd-title-on] { display: grid; } .bd-gate .bd-gate__title[data-bd-title-on] > .bd-gate__title-text { grid-area: 1 / 1; } .bd-gate .bd-gate__title[data-bd-title-on='start'] > [data-bd-title='member'], .bd-gate .bd-gate__title[data-bd-title-on='member'] > [data-bd-title='start'] { visibility: hidden; } @media (min-width: 600px) { .bd-gate .bd-gate__title { font-size: 2.1rem; line-height: .92; letter-spacing: -.03em; } } /* The "section is in the members-only part" note: the band eyebrow's type (single.php:665-666). */ .bd-gate .bd-gate__jump { margin: 0 0 1rem; font-family: var(--bdm-font-ui); font-size: .9rem; font-weight: 600; color: var(--bdm-accent); } .bd-gate .bd-gate__jump:empty { display: none; } .bd-gate .bd-gate__body { max-width: 36rem; } .bd-gate .bd-gate__form { margin: 0; } .bd-gate .bd-gate__step { display: flow-root; } /* the card's step swap (bd-membership.js pinHeight/settleHeight) relies on it */ /* Stripe test mode only: the dashed notice of the account page's mode badge (proposed.css .bd-account__mode). */ .bd-gate .bd-gate__mode { margin: 0 0 1.25rem; padding: .6rem .85rem; font-size: .85rem; line-height: 1.5; color: var(--bdm-text); border: 1px dashed var(--bdm-accent); } /* Lede = .bd-member-band__sub (single.php:671-672). */ .bd-gate .bd-gate__lede { margin: 0 0 1.25rem; max-width: 46ch; font-size: clamp(.96rem, 1.2vw, 1.08rem); line-height: 1.55; color: var(--bdm-soft); } .bd-gate .bd-gate__row { display: flex; flex-wrap: wrap; gap: .5rem; } .bd-gate .bd-gate__row > .bd-field__input { flex: 999 1 14rem; width: auto; min-width: 0; } .bd-gate .bd-gate__row > .bd-field__input--code { flex-basis: 9rem; } .bd-gate .bd-gate__row > .bd-btn { flex: 1 0 auto; width: auto; min-width: 10.5rem; } .bd-gate .bd-gate__row + .bd-error { margin-top: .5rem; } /* S1 = the site's newsletter signup point (owner decision 2026-10-13); the signup is required, with no box (owner, 2026-10-13). The address and the newsletter line are one group, in reading and tab order before Continue. */ .bd-gate .bd-gate__signup { display: grid; gap: .75rem; max-width: 30rem; } .bd-gate .bd-gate__signup .bd-error { margin: -.25rem 0 0; } .bd-gate .bd-gate__start > .bd-btn { width: auto; min-width: 10.5rem; margin-top: 1.25rem; } @media (max-width: 480px) { .bd-gate .bd-gate__start > .bd-btn { width: 100%; } /* the rail button's metrics (single.php:1029-1031: .82rem, padding .85rem 1rem), so "Subscribe for $6.99 a month" is one line */ .bd-gate .bd-btn { font-size: .82rem; padding-left: 1rem; padding-right: 1rem; } } /* The newsletter line under the address (owner, 2026-10-13: "small and not obnoxious"): quiet fine print, close under the field (the grid's .75rem gap less .4rem). The gate's fine-print size (.bd-gate__fine, .bd-gate__legal: .8rem), regular weight, the soft colour (#a0a0a0 on the dark card #141414: 7.04:1; on the yellow block see .bd-cut below). */ .bd-gate .bd-gate__newsletter { margin: -.4rem 0 0; font-size: .8rem; font-weight: 400; line-height: 1.45; color: var(--bdm-soft); } /* Step lines (S2a "We emailed a code…", S2b "Choose a plan, …"): the author-card name voice (single.php:833-836). */ .bd-gate .bd-gate__step-title { margin: 0 0 1rem; font-family: var(--bdm-font-head); font-size: 1.25rem; font-weight: 700; line-height: 1.35; color: var(--bdm-text); } /* The masked address (r…@example.com) wraps as one piece; only an address longer than the line breaks inside. */ .bd-gate .bd-gate__step-title strong { display: inline-block; max-width: 100%; font-weight: 700; color: var(--bdm-accent); overflow-wrap: anywhere; } .bd-gate .bd-nowrap { white-space: nowrap; } .bd-gate .bd-gate__code-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .75rem; margin: .75rem 0 0; font-size: .85rem; color: var(--bdm-soft); } .bd-gate .bd-gate__code-wait { margin: 0; font-size: .85rem; line-height: 1.45; color: var(--bdm-soft); } /* consent: the 527-a disclosure, word for word, white Inter 1rem (clear and conspicuous next to the box) */ .bd-gate .bd-gate__consent { display: grid; grid-template-columns: auto 1fr; column-gap: .85rem; row-gap: .5rem; align-items: start; margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--bdm-rule); background: var(--bdm-bg); border-radius: var(--bdm-radius-tile); } .bd-gate .bd-gate__consent.has-error { border-color: var(--bdm-danger-line); } .bd-gate .bd-gate__disclosure { font-size: 1rem; line-height: 1.6; color: var(--bdm-text); cursor: pointer; min-width: 0; overflow-wrap: anywhere; } .bd-gate .bd-gate__consent-error { grid-column: 2; } .bd-gate .bd-gate__legal { margin: .6rem 0 0; font-size: .8rem; color: var(--bdm-soft); } .bd-gate .bd-gate__legal a { display: inline-flex; align-items: center; min-height: 24px; color: var(--bdm-soft); } /* pay area */ .bd-gate .bd-gate__pay { display: grid; gap: .75rem; margin-top: 1.25rem; } .bd-gate .bd-gate__express { position: relative; min-height: 48px; border-radius: var(--bdm-radius-btn); } .bd-gate .bd-gate__express.has-focus, .bd-gate .bd-gate__express:focus-within { outline: 2px solid var(--bdm-accent); outline-offset: 3px; } .bd-gate .bd-gate__express[data-state='loading'] { background: linear-gradient(90deg, var(--bdm-field) 0%, #222 50%, var(--bdm-field) 100%); background-size: 200% 100%; animation: bdm-shimmer 1.6s ease-in-out infinite; } .bd-gate .bd-gate__express-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 .75rem; font-size: .85rem; line-height: 1.3; text-align: center; color: var(--bdm-soft); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .bd-gate .bd-gate__express[data-state='none-visible'], .bd-gate .bd-gate__express[data-state='error'] { border: 1px dashed var(--bdm-line); } .bd-gate .bd-gate__express[data-state='none-visible'] .bd-gate__express-note, .bd-gate .bd-gate__express[data-state='error'] .bd-gate__express-note { opacity: 1; pointer-events: auto; } .bd-gate .bd-gate__express[data-state='error'] .bd-gate__express-note { color: var(--bdm-danger); } .bd-gate .bd-gate__express[data-state='none'] { display: none; } .bd-gate .bd-gate__express[data-state='none-visible'] .bd-gate__express-mount, .bd-gate .bd-gate__express[data-state='error'] .bd-gate__express-mount { display: none; } /* No wallet: "Pay with card" is the primary yellow button. A wallet on screen: the quiet link (owner rule 2026-10-12). */ .bd-gate .bd-gate__card-toggle { border-color: var(--bdm-accent); color: var(--bdm-accent); } .bd-gate[data-bd-wallets='none'] .bd-gate__card-toggle[aria-expanded='false'] { background: var(--bdm-accent); color: var(--bdm-on-accent); border-color: var(--bdm-accent); font-weight: 800; } .bd-gate[data-bd-wallets~='applePay'] .bd-gate__card-toggle[aria-expanded='false'], .bd-gate[data-bd-wallets~='googlePay'] .bd-gate__card-toggle[aria-expanded='false'] { background: transparent; border-color: transparent; color: var(--bdm-soft); font-weight: 500; letter-spacing: normal; text-transform: none; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; } .bd-gate[data-bd-wallets~='applePay'] .bd-gate__card-toggle[aria-expanded='false']:hover, .bd-gate[data-bd-wallets~='googlePay'] .bd-gate__card-toggle[aria-expanded='false']:hover { color: var(--bdm-accent); } .bd-gate .bd-gate__card { padding-top: 1rem; border-top: 1px solid var(--bdm-rule); container-type: inline-size; container-name: bdm-card; } .bd-gate .bd-gate__card[hidden] { display: none; } .bd-gate .bd-gate__payment-mount { min-height: var(--bdm-pe-min); margin: .25rem 0 1rem; } @container bdm-card (max-width: 449px) { .bd-gate .bd-gate__payment-mount { min-height: 372px; } } @container bdm-card (max-width: 399px) { .bd-gate .bd-gate__payment-mount { min-height: 392px; } } @container bdm-card (max-width: 279px) { .bd-gate .bd-gate__payment-mount { min-height: 492px; } } .bd-gate .bd-gate__payment-mount[data-state='loading'] { background: linear-gradient(90deg, var(--bdm-field) 0%, #222 50%, var(--bdm-field) 100%); background-size: 200% 100%; animation: bdm-shimmer 1.6s ease-in-out infinite; } .bd-gate .bd-gate__submit { min-height: 52px; } /* D-1545: the alert line now sits directly under the button that failed (one slot per action, in the markup), and keeps one line of space while its panel is open, so a one-line decline message moves nothing below it. */ .bd-gate .bd-gate__alert { margin-top: .6rem; } .bd-gate .bd-gate__card .bd-gate__alert:empty { display: block; min-height: 1.45em; margin-top: .6rem; } .bd-gate .bd-gate__progress:not(:empty) { margin-top: .6rem; } .bd-gate .bd-gate__progress { margin: 0; font-size: .9rem; color: var(--bdm-soft); } .bd-gate .bd-gate__progress:empty { display: none; } /* The card's own progress line (#bd-gate-card-progress): progress that lands in the article while the sheet is closed (a payment the reader left with Back, a redirect-based payment resuming). */ .bd-gate > .bd-gate__body > .bd-gate__progress:not(:empty) { margin-top: 1rem; } .bd-gate .bd-gate__closed { margin: 0; padding: 1rem; font-size: .95rem; line-height: 1.5; color: var(--bdm-text); border: 1px solid var(--bdm-rule); } /* member line + sign-in */ .bd-gate .bd-gate__member-line { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--bdm-soft); } .bd-gate .bd-gate__member-line strong { color: var(--bdm-text); font-weight: 600; } .bd-gate .bd-gate__member-line[hidden] { display: none; } .bd-gate .bd-gate__note { margin: .75rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--bdm-soft); } .bd-gate .bd-gate__note:empty { display: none; } .bd-gate .bd-signin__step[hidden] { display: none; } .bd-gate .bd-signin__sent { margin: 0 0 1rem; font-size: 1rem; line-height: 1.55; color: var(--bdm-text); } .bd-gate .bd-signin__sent strong { color: var(--bdm-accent); font-weight: 600; overflow-wrap: anywhere; } .bd-gate .bd-signin__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .75rem; margin: .75rem 0 0; font-size: .85rem; color: var(--bdm-soft); } .bd-gate .bd-signin__notice { margin: 0 0 .75rem; font-size: .95rem; font-weight: 600; color: var(--bdm-accent); } .bd-gate .bd-signin__notice:empty { display: none; } /* fine print = the footer text size (single.php:1235, .8rem), in #a0a0a0 (the site's #666 is 3.45:1, under AA) */ .bd-gate .bd-gate__fine { margin: 1.25rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--bdm-soft); } .bd-gate .bd-gate__noscript { margin: 1rem 0 0; font-size: .9rem; color: var(--bdm-text); } .bd-gate[data-bd-state='checking'] .bd-gate__start, .bd-gate[data-bd-state='checking'] .bd-gate__form, .bd-gate[data-bd-state='processing'] .bd-gate__consent { opacity: .6; pointer-events: none; } /* Unlocked text (B1's .bd-paywalled wrapper; the article body's own styles apply to it). */ .bd-paywalled { display: contents; } .bd-paywalled.bd-just-unlocked > * { animation: bdm-arrive .5s ease-out both; } /* After a payment only: one confirmation line where the gate was (eyebrow dot: single.php:667). */ .bd-unlock-note { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.5rem; padding: .75rem 1rem; border: 1px solid var(--bdm-rule); border-radius: var(--bdm-radius-tile); background: var(--bdm-surface); font-family: var(--bdm-font-ui); font-size: .9rem; line-height: 1.45; color: var(--bdm-text); } .bd-unlock-note::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bdm-accent); box-shadow: 0 0 0 3px rgba(255, 225, 53, .18); } /* Focus lands here after a payment (tabindex -1, so a screen reader reads it); it is not a control, so no ring (WCAG 2.4.7 covers operable components), as for the sheet's step headings. */ .bd-unlock-note[tabindex='-1']:focus { outline: none; } @media (max-width: 480px) { .bd-gate .bd-gate__consent { padding: .85rem .8rem; } } @keyframes bdm-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @keyframes bdm-arrive { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .bd-gate *, .bd-sheet, .bd-sheet * { transition: none !important; animation: none !important; } } @media (forced-colors: active) { .bd-gate .bd-btn { border: 1px solid ButtonText; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ v2 (owner decisions 2026-10-13): the inline card holds S1 only; every later step happens in a full-screen sheet. PROPOSAL.md section V2 is the specification; each rule below names the decision (V2-n) or token it implements. Journalism purpose: the reader who decides to pay gets one task on screen, on the article they came to read. ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── the card: the signed-in non-member step (V2-1: variant C headline, the signed-in line, "See plans"; the sheet does not open by itself) */ .bd-gate .bd-gate__lede--member { max-width: 40ch; } .bd-gate .bd-gate__lede strong { color: var(--bdm-text); font-weight: 600; overflow-wrap: anywhere; } .bd-gate .bd-gate__see-plans { width: auto; min-width: 10.5rem; } .bd-gate .bd-gate__step--member .bd-gate__member-line { margin-top: 1rem; } @media (max-width: 480px) { .bd-gate .bd-gate__see-plans { width: 100%; } } /* ── the sheet (V2-2). z-index above every fixed layer the article prints: progress bar 9999 (single.php:263), newsletter popup 10000 (single.php:1278), Support button 99990 (bd-support-cta.php:21). */ .bd-sheet { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: stretch; justify-content: center; font-family: var(--bdm-font-ui); font-size: 1rem; line-height: 1.55; color: var(--bdm-text); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } .bd-sheet[hidden] { display: none; } .bd-sheet *, .bd-sheet *::before, .bd-sheet *::after { box-sizing: border-box; } .bd-sheet [hidden] { display: none !important; } /* Phones: the page is not visible at all (opaque), as in Ghost Portal on a phone (research 27 F4: 100% opaque). */ .bd-sheet__scrim { position: absolute; inset: 0; background: var(--bdm-bg); opacity: 0; transition: opacity .18s ease; } .bd-sheet__panel { position: relative; display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; /* follows Safari's moving toolbars (100vh does not) */ padding-top: env(safe-area-inset-top, 0px); /* 0 unless the page opts into viewport-fit=cover (V2-2) */ background: linear-gradient(var(--bdm-accent), var(--bdm-accent)) top / 100% 3px no-repeat, var(--bdm-bg); opacity: 0; transform: translateY(16px); transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .18s ease; /* transform/opacity only: no CLS */ } .bd-sheet.is-open .bd-sheet__scrim, .bd-sheet.is-open .bd-sheet__panel { opacity: 1; transform: none; } /* Top bar: "← Back" (previous step, V2-2), the wordmark (single.php:1517-1540, the site’s own mark), the close X. */ .bd-sheet__bar { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 56px; margin-top: 3px; /* under the 3px yellow rule (the card family, single.php:666-673) */ padding: 0 max(4px, env(safe-area-inset-right, 0px)) 0 max(4px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--bdm-rule); } .bd-sheet__back { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding: 0 .75rem; background: none; border: 0; border-radius: 2px; font: 600 .95rem/1 var(--bdm-font-ui); color: var(--bdm-text); cursor: pointer; } .bd-sheet__back:hover, .bd-sheet__close:hover { color: var(--bdm-accent); } .bd-sheet__mark { grid-column: 2; display: block; width: 132px; line-height: 0; } .bd-sheet__mark svg { display: block; width: 100%; height: auto; } .bd-sheet__close { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: none; border: 0; border-radius: 2px; color: var(--bdm-text); cursor: pointer; } .bd-sheet__close[aria-disabled='true'], .bd-sheet__back[aria-disabled='true'] { opacity: .35; cursor: progress; } /* a payment is processing (V2-2; Back: v2.1) */ /* v2.1: in-sheet navigation waits while a payment processes ("Change", the terms link); the JS guard is in the gate */ .bd-sheet.is-busy [data-bd-sheet-goto] { opacity: .35; pointer-events: none; } .bd-sheet__bar :focus-visible { outline: 2px solid var(--bdm-accent); outline-offset: -2px; } /* single.php:702 ring */ /* The only scrolling box while the sheet is open; it never hands its scroll to the page (V2-2). */ .bd-sheet__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* The step content reuses the gate's component rules (.bd-gate scope), without the in-article card's box. */ .bd-gate.bd-gate--sheet { max-width: 34rem; margin: 0 auto; padding: 1.75rem max(16px, env(safe-area-inset-right, 0px)) calc(2rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: none; border: 0; border-radius: 0; scroll-margin-top: 0; } .bd-gate.bd-gate--sheet::before { display: none; } /* Focus Not Obscured (2.4.11): inside the sheet nothing sits over the scroll box (the bar is outside it). */ .bd-gate--sheet input, .bd-gate--sheet button, .bd-gate--sheet a, .bd-gate--sheet iframe, .bd-gate--sheet [tabindex] { scroll-margin-top: 16px; scroll-margin-bottom: 96px; /* clears the pinned action bar on phones */ } /* Headline = the site's membership headline voice (.bd-member-band__title, single.php:680-682): Satoshi 900 italic uppercase, second half yellow; 2.1rem is the band's minimum, 2.75rem on wide screens (inside its clamp). */ .bd-sheet .bd-sheet__title { margin: 0 0 .85rem; font-family: var(--bdm-font-head); font-size: 2.1rem; font-weight: 900; font-style: italic; line-height: .92; letter-spacing: -.03em; text-transform: uppercase; color: var(--bdm-text); } .bd-sheet .bd-sheet__title em { font-style: italic; color: var(--bdm-accent); } /* Line under it = .bd-member-band__sub (single.php:683-684), prices and the address in white. */ .bd-sheet .bd-sheet__lede { margin: 0 0 1.5rem; max-width: 46ch; font-size: 1.05rem; line-height: 1.55; color: var(--bdm-soft); } .bd-sheet .bd-sheet__lede strong { color: var(--bdm-text); font-weight: 600; overflow-wrap: anywhere; } .bd-sheet .bd-sheet__lede--big { margin: 0 0 .5rem; font-family: var(--bdm-font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--bdm-text); } /* Step titles ("Payment", "Sign in", S2a's line) = the article h3 (single.php:600-615: Satoshi 700 1.5rem). */ .bd-sheet .bd-sheet__step-title, .bd-sheet .bd-gate__step-title { margin: 0 0 1.25rem; font-family: var(--bdm-font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--bdm-text); } /* The step heading takes focus when a step opens (V2-2) so a screen reader announces it; it is not a control, so it draws no ring (WCAG 2.4.7 applies to operable components). */ .bd-sheet [data-bd-sheet-heading]:focus, .bd-sheet [data-bd-sheet-heading]:focus-visible { outline: none; } /* ── plans (V2-4): a Monthly / Yearly switch, the saving in dollars ("Save $13.88", gate.php), one plan card. */ .bd-sheet .bd-cadence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; min-width: 0; margin: 0 0 1rem; padding: 4px; border: 1px solid var(--bdm-line); /* #707070: 3.72:1 on the page, WCAG 1.4.11 (v1 token table) */ border-radius: var(--bdm-radius-tile); } .bd-sheet .bd-cadence__opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: .35rem .5rem; border-radius: 2px; color: var(--bdm-soft); /* #a0a0a0 on #0a0a0a: 7.57:1 (section 6.1) */ text-align: center; cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } /* The native radio covers its option (invisible), so the option is the hit area and keyboard arrows work as usual. */ .bd-sheet .bd-cadence__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .bd-sheet .bd-cadence__name { font-size: .85rem; font-weight: 800; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; } .bd-sheet .bd-cadence__save { margin-top: .15rem; font-size: .8rem; font-weight: 600; line-height: 1.2; color: var(--bdm-accent); } .bd-sheet .bd-cadence__opt:hover { background: var(--bdm-field); color: var(--bdm-text); } /* v2.1-1: the chosen option is a SELECTED STATE, not a second button. v2 filled it with #ffe135 and #0a0a0a uppercase 800 text, the same computed background, colour, weight and case as Continue, so the plans step showed two yellow "buttons" and the first one did nothing when tapped (PROPOSAL.md V2.1-1). Now: the card surface, white text and a 2px yellow ring (v1's selected-tile token; #ffe135 vs #141414 14.10:1, vs #0a0a0a 15.15:1, WCAG 1.4.11). The unchosen option's name is #a0a0a0. Continue is the step's only yellow fill. .is-selected (set by bd-membership.js) is the same state for browsers without :has() (Safari < 15.4, Firefox < 121). */ .bd-sheet .bd-cadence__opt.is-selected, .bd-sheet .bd-cadence__opt:has(.bd-cadence__input:checked) { background: var(--bdm-surface); color: var(--bdm-text); box-shadow: inset 0 0 0 2px var(--bdm-accent); } .bd-sheet .bd-cadence__opt:has(.bd-cadence__input:focus-visible) { outline: 2px solid var(--bdm-text); outline-offset: 2px; } /* The plan card = the card family (single.php:666-673: 1px #2a2a2a, 8px radius, 3px yellow rule) on #141414. */ .bd-sheet .bd-offer { padding: 1.25rem 1.25rem 1.35rem; background: linear-gradient(var(--bdm-accent), var(--bdm-accent)) top / 100% 3px no-repeat, var(--bdm-surface); border: 1px solid var(--bdm-rule); border-radius: var(--bdm-radius-card); } /* name = the article kicker (single.php:440-452: Inter 600, .1em, uppercase) */ .bd-sheet .bd-offer__name { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bdm-text); } .bd-sheet .bd-offer__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .2rem; margin: .4rem 0 0; } /* price = the band's price voice (.bd-member-band__price, single.php:698: Satoshi 900 italic) */ .bd-sheet .bd-offer__amount { font-family: var(--bdm-font-head); font-size: 2.75rem; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums; } .bd-sheet .bd-offer__per { font-size: .95rem; color: var(--bdm-soft); } .bd-sheet .bd-offer__basis { margin: .35rem 0 0; font-size: .875rem; line-height: 1.45; color: var(--bdm-soft); } .bd-sheet .bd-offer__why { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--bdm-rule); font-size: .95rem; line-height: 1.5; color: var(--bdm-text); } .bd-sheet .bd-offer__label { margin: 1rem 0 .5rem; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bdm-soft); } .bd-sheet .bd-offer__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; } /* = the band's perk line (.bd-member-band__perks li, single.php:686-689: Inter 600, #e8e8e8, 6px yellow dot) as a list */ .bd-sheet .bd-offer__list li { position: relative; padding-left: 1.1rem; font-size: .9rem; font-weight: 600; line-height: 1.45; color: #e8e8e8; } .bd-sheet .bd-offer__list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--bdm-accent); } /* The primary action is pinned to the bottom of the sheet on phones (V2-2), so "Continue" is on screen on any phone height; in flow from 768px. */ .bd-sheet .bd-sheet__actions { position: sticky; bottom: 0; z-index: 1; margin: 1.25rem calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0; padding: .75rem max(16px, env(safe-area-inset-right, 0px)) calc(.75rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--bdm-bg); border-top: 1px solid var(--bdm-rule); } .bd-sheet .bd-sheet__step .bd-gate__member-line { margin-top: 1rem; } .bd-sheet .bd-gate__member-line .bd-link { padding-right: 0; } /* "Sign out, then …": no gap before the comma */ /* ── payment (V2-3): summary, the 527-a consent (verbatim, above both pay buttons), the black wallet button, the "Pay with card" link, the card form, Subscribe with its error line directly under it (D-1545). */ /* v2.1-2: the summary IS the step's heading. v2 spent 182 px of the 605 px phone scroll box on a "Payment" title and a boxed summary before the consent box, so the 527-a disclosure ran past the first screen and Apple Pay sat 171 px below it (PROPOSAL.md V2.1-2). Now three lines, no box: the kicker "Payment", the price in the band's price voice with Change beside it, and "{Plan} membership for {email}" (Stripe Checkout's header shape: research 28, hg-5). */ .bd-sheet .bd-sheet__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: end; margin: 0 0 1rem; } .bd-sheet .bd-sheet__summary-head { grid-column: 1; grid-row: 1; margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.3; color: var(--bdm-text); } /* kicker = the plan card's label (.bd-offer__label: Inter 600 .7rem .1em uppercase #a0a0a0) */ .bd-sheet .bd-sheet__kicker { display: block; margin: 0 0 .3rem; font-family: var(--bdm-font-ui); font-size: .7rem; font-style: normal; font-weight: 600; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; color: var(--bdm-soft); } /* price = the band's price voice (.bd-member-band__price, single.php:698: Satoshi 900 italic) at the article h3 size (1.5rem) */ .bd-sheet .bd-sheet__summary-price { display: block; font-family: var(--bdm-font-head); font-size: 1.5rem; font-weight: 900; font-style: italic; line-height: 1.1; letter-spacing: -.01em; } .bd-sheet .bd-sheet__summary-change { grid-column: 2; grid-row: 1; align-self: end; } .bd-sheet .bd-sheet__summary-for { grid-column: 1 / -1; grid-row: 2; margin: .3rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--bdm-soft); overflow-wrap: anywhere; } .bd-sheet .bd-sheet__summary-for strong, .bd-sheet .bd-sheet__summary-plan { color: var(--bdm-text); font-weight: 600; } .bd-gate--sheet .bd-gate__consent { margin-top: 0; } /* No wallet in this browser: the card form is already open and is the only path, so its toggle is not shown. */ .bd-gate--sheet[data-bd-wallets='none'] .bd-gate__card-toggle { display: none; } /* A wallet on screen: "Pay with card" is a centred text link under the black button (owner, 2026-10-13). */ .bd-gate--sheet[data-bd-wallets~='applePay'] .bd-gate__card-toggle[aria-expanded='false'], .bd-gate--sheet[data-bd-wallets~='googlePay'] .bd-gate__card-toggle[aria-expanded='false'] { justify-content: center; min-height: 44px; } /* Layout stability on the payment step (build, 2026-10-13): when Stripe answers (more than 500 ms after the reader's click, so outside the input window), the wallet slot settles and, with no wallet, the card form opens at once (V2-3). The fine print is the only element below that point, so it stays out of the layout until the wallets are known: it then appears in place and nothing already on screen moves. (Measured before this rule and the desktop rule below: CLS 0.203 on desktop, verify_static.py J.) */ .bd-gate--sheet[data-bd-wallets='pending'] .bd-gate__fine { display: none; } /* The privacy link and the terms' page links open in a new tab and say so (PROPOSAL.md V2-3, V2.1-7). */ .bd-sheet .bd-ext { margin-left: .2em; text-decoration: none; display: inline-block; } /* ── membership terms in the sheet (V2-3): the terms body, at reading size */ .bd-sheet .bd-sheet__terms { font-size: 1rem; line-height: 1.7; color: var(--bdm-text); } .bd-sheet .bd-sheet__terms h3 { margin: 2rem 0 .75rem; font-family: var(--bdm-font-head); font-size: 1.2rem; font-weight: 700; line-height: 1.3; } .bd-sheet .bd-sheet__terms p, .bd-sheet .bd-sheet__terms li { margin: 0 0 .9rem; } .bd-sheet .bd-sheet__terms ul { margin: 0 0 1rem; padding-left: 1.25rem; } .bd-sheet .bd-sheet__terms a { color: var(--bdm-accent); } /* The terms' subsections (h3 on /membership-terms/) are h4 here, one level under the sections: the article kicker voice. */ .bd-sheet .bd-sheet__terms h4 { margin: 1.5rem 0 .6rem; font-size: 1rem; font-weight: 700; line-height: 1.4; } /* ── success (V2-1) */ .bd-sheet .bd-sheet__step--done { padding-top: 1rem; } .bd-sheet .bd-sheet__receipt { margin: 0 0 1.75rem; font-size: .95rem; line-height: 1.5; color: var(--bdm-soft); } .bd-sheet .bd-sheet__receipt strong { color: var(--bdm-text); font-weight: 600; overflow-wrap: anywhere; } /* ── wide screens (the site's breakpoint, single.php:320): a large centred panel over the dimmed, blurred page */ @media (min-width: 768px) { .bd-sheet { align-items: center; padding: 2rem; } .bd-sheet__scrim { background: rgba(10, 10, 10, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .bd-sheet__panel { width: min(48rem, 100%); height: auto; max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); padding-top: 0; overflow: hidden; border: 1px solid var(--bdm-rule); border-radius: var(--bdm-radius-card); box-shadow: 0 40px 120px rgba(0, 0, 0, .65); } /* The payment step grows when Stripe answers (above). A centred panel would then move as a whole; on this step the panel is anchored at the top (the .bd-sheet padding, 2rem) and grows downwards. Every other step stays centred. */ .bd-sheet[data-bd-sheet-at='pay'] { align-items: flex-start; } .bd-sheet__bar { padding: 0 .5rem; } .bd-sheet__mark { width: 150px; } .bd-gate.bd-gate--sheet { max-width: 40rem; padding: 1.75rem 2.5rem 2rem; } .bd-sheet .bd-sheet__title { font-size: 2.75rem; } .bd-sheet .bd-sheet__actions { position: static; margin: 1rem 0 0; padding: 0; background: none; border: 0; } .bd-sheet .bd-offer__why { margin-top: .85rem; padding-top: .85rem; } } @media (forced-colors: active) { .bd-sheet__panel { border: 1px solid CanvasText; } .bd-sheet .bd-cadence__opt.is-selected, .bd-sheet .bd-cadence__opt:has(.bd-cadence__input:checked) { outline: 3px solid Highlight; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ The cut (2026-10-13): the WordPress gate's container (api.php bd_membership_cut_html: div.bd-cut, the teaser when lead_mode is teaser, the card, then whatever bd_membership_after_gate prints) and, in lead_mode fade, the free paragraphs' container (content-filters.php bd_membership_free_html: div.bd-free). Every rule is scoped to .bd-cut or .bd-free, so the static DiMieri page, which prints the card without them, is unchanged. Journalism purpose (owner, 2026-10-13): "Readers will think that bushwick daily has 1 paragraph stories and not need or necessarily know that they need to pay." The story must visibly stop at a paywall, not end in a footer-like box. So the card is a full-bleed, solid block in the paper's yellow (the site's own big yellow band, .adcta, single.php:1439-1447: #ffe135 under #0a0a0a text, the 22px dot texture, the Satoshi 900 italic uppercase title at clamp(2.4rem, 6.4vw, 4.4rem), a black button with yellow text), wider than the text column, and it says how much of the story is behind it. Four layouts, one per lead mode (settings.php BD_MEMBERSHIP_LEAD_MODES): fade (the default) the free paragraphs' last lines dissolve into the page under the card, which overlaps them (404 Media's .post-sneak-peek.fading); teaser the next paragraph's first words, cut with "…", fade to the page under the card, which overlaps their last line; paragraphs a clean break after complete paragraphs (Hell Gate's paid gate); none the card right under the article header. In every mode the block ends in a wave (mockup A, below), and the wordmark band hooked after it (includes/brand-reveal.php, assets/bd-reveal.css) sits directly under that wave. No layout shift: the container, the teaser and the card are in the cached HTML and this stylesheet is in ; nothing here changes size after first paint. Nothing here animates. ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ .bd-cut { /* How far the card reaches past the text column on each side. Below 1024px the article is one column inside .main's 1.5rem padding (single.php:367-371, :399-407): exactly that, so the card runs edge to edge (html and body clip horizontal overflow: overflow-fix.css:63-66). */ --bdm-cut-bleed: 1.5rem; /* fade and teaser: how far the card's top edge rises over the last line of the free text (about half of it: one line is 1.2rem x 1.8 = 2.16rem, single.php:589-593), so the card visibly lies on the text */ --bdm-cut-overlap: 1.1rem; /* The wave's height under the block (mockup A, docs/paywall/design/mockups/modes.css .bdx-reveal --bdx-wave: clamp(26px, 5.5vw, 84px), there on a 100vw block): 5.5% of THIS block's width, between 26 and 84px. The % is resolved where it is used, on .bd-cut's children (the card's margin, the band's margin), whose containing block is .bd-cut: 100% + 2 x the bleed is then the block's width. */ --bdm-cut-wave: clamp(26px, calc((100% + 2 * var(--bdm-cut-bleed)) * .055), 84px); position: relative; margin: 2.75rem 0; /* single.php:654 (.bd-member-band margin), the old card's margin */ } @media (min-width: 1024px) { /* Two columns (single.php:409-413: the text column, a 4rem gap, the 320px sidebar). The card reaches 3rem past both sides of the column: into the gap on the right (1rem short of the sidebar), into .main's padding and the page margin on the left, never past the screen edge (from 1024px to 1152px the left side has only 1.5rem). */ .bd-cut { --bdm-cut-bleed: min(3rem, max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem))); } } .bd-cut--teaser { margin-top: 0; } /* the teaser follows the lead at the paragraph gap (single.php:596-598) */ .bd-cut--none { margin-top: 1.5rem; } /* fade: the card rises over the free text's last line. The last paragraph's 1.5rem bottom margin (single.php:596-598) collapses with this negative margin through div.bd-free (which makes no formatting context), so the card's top lies --bdm-cut-overlap above the bottom of the last line. */ .bd-free + .bd-cut--fade { margin-top: calc(-1 * (1.5rem + var(--bdm-cut-overlap))); } /* The card on the yellow block: the tokens the card's rules use, re-pointed (contrast on #ffe135, WCAG 2.2: #0a0a0a 15.15:1; soft text rgba(10,10,10,.8) 9.4:1; error text #7a1610 8.24:1; invalid border #b3261e 5.0:1 on the yellow and 3.03:1 on the black field; the black field 15.15:1 on the yellow, 1.4.11). Primary actions turn black with yellow text, as .adcta__btn (single.php:1446). */ .bd-cut > .bd-gate { --bdm-text: #0a0a0a; --bdm-soft: rgba(10, 10, 10, .8); --bdm-accent: #0a0a0a; --bdm-accent-hover: #2a2a2a; --bdm-on-accent: #ffe135; --bdm-rule: rgba(10, 10, 10, .35); --bdm-field: #0a0a0a; --bdm-line: #0a0a0a; --bdm-danger: #7a1610; --bdm-danger-line: #b3261e; /* the bottom margin is the wave's room (::after below hangs in it): nothing after the card is covered by the wave; the wordmark band's equal negative top margin cancels it (bd-reveal.css), so the band starts at the card's edge */ margin: 0 calc(-1 * var(--bdm-cut-bleed)) var(--bdm-cut-wave); padding: clamp(2.6rem, 5.5vw, 4.2rem) var(--bdm-cut-bleed); /* .adcta__inner's block padding; the content keeps the column's edges */ /* .adcta + .adcta::before; the dots are anchored at the card's BOTTOM edge so they run on into the wave unbroken */ background: radial-gradient(rgba(0, 0, 0, .07) 1.1px, transparent 1.4px) 0 100% / 22px 22px, #ffe135; border: 0; border-radius: 0; color: #0a0a0a; } .bd-cut > .bd-gate::before { display: none; } /* the old card's fade over the lead: replaced by the modes below */ /* The block's lower edge is a wave (mockup A, approved by the owner 2026-10-13; docs/paywall/design/img/modes/ paragraphs-reveal-iphone13.webp, paragraphs-gate-desktop.webp). Technique and numbers from docs/paywall/design/mockups/modes.css `.bdx-reveal__wave` and docs/paywall/design/build_modes.py WAVE: the same path (viewBox 1440 x 100, preserveAspectRatio none, so it stretches to the block's width), the same height (clamp(26px, 5.5% of the block's width, 84px): here padding-top %, which an absolutely positioned box resolves against its containing block's width, the card's), the same 1px overlap onto the block (top: -1px there) and the same place in z-order: in front of the wordmark (z-index 2 over the mark's 1 there; here z-index 1 over the band's stacking context at 0, bd-reveal.css). One difference, for a reason: the mockup draws the wave as an inline