/* aibotkit-child · the landing-page section system — U6 * * Hand-authored, like assets/css/chrome.css and for the same reason: these are * the rules a Tailwind utility cannot express. A ground that changes with a * modifier, a radial wash on a pseudo-element, a vertical rhythm driven by * adjacent-sibling margins -- none of those are a utility. * * ⛔ THE CLASS NAMES ARE LOAD-BEARING, AND NOT ONLY FOR STYLING. * ops/measure/check-law.js asserts the law against the RENDERED page using * these exact selectors -- `a.btn`, `.badge`, `figure.figure`, `.draw`. * Its button assertion reads `document.querySelectorAll('a.btn, button.btn')` * and, finding none, reports success while checking nothing. So renaming * `.btn` does not break a check loudly; it switches the check OFF. * That is why this file keeps the prototype's vocabulary. We rebuilt the * CSS; we kept the names the guard measures. * * ⛔ EVERY --wp--custom-- NAME HERE IS WORDPRESS'S OWN KEBAB FORM. * `3xl` becomes `space--3-xl`, not `space--3xl`. A wrong name makes the * declaration invalid and the property falls back SILENTLY. U5 lost the * footer gap to exactly this. Check every name against theme.json. * * ⚠ LOADS AFTER tw.css, deliberately -- it overrides the utilities. */ /* --------------------------------------------------------------------------- 0 · The two ground aliases. The law names the page's two grounds by role, not by colour: the FLOOR is what a section stands on, the PANEL is the inset card it stands on when it wants to be read as a separate surface. Q1 settled which hex each is. --------------------------------------------------------------------------- */ :root { --abk-floor: var(--wp--custom--color--paper); --abk-panel: var(--wp--custom--color--tint); } /* ⛔ `border-box` INSIDE A SECTION, AND IT IS NOT TIDINESS. The prototype's stylesheet opens with a `*` reset that sets it; WordPress does not set it universally. Measured: every fixed-height box came out its padding taller -- the 300px product well painted 348px, and the chip row 35.2px against 27.2px, so the card trio and the whole section grew. ⚠ A height is a PROMISE about the painted box, and under `content-box` it is a promise about something the eye never sees. ⚠ SCOPED TO `.section`. The prototype's own `*` reset could not be ported whole -- it also carries `p { max-width: 68ch }`, which would truncate every paragraph on all 22 pages and in the editor. This takes the one declaration that is safe and leaves the rest where it belongs. */ .section, .section *, .section *::before, .section *::after { box-sizing: border-box; } /* ⛔ A TRACKING TIER IS A TOKEN, NOT AN OVERRIDE. Two type roles cross the 28px display boundary as the viewport narrows, so their tracking has to change with it. Doing that with media-query OVERRIDES cost three separate defects in one day: the rule was correct and lost on source order each time a new section was appended below it. ⭐ SWITCHING THE TOKEN INSTEAD ENDS THE ARGUMENT. Every consumer follows automatically, nothing has to outrank anything, and a section added later cannot break it. ⚠ THE BREAKPOINTS ARE DERIVED, NOT CHOSEN -- each is the exact viewport where that role's own clamp crosses 28px: step--display-small clamp(1.5rem, 2.0834vw, 1.875rem) -> 28px at 1344px step--subsection clamp(1.375rem, 1.6667vw, 1.5rem) -> never: 24px at most ⭐ THE 2026-09-25 LADDER (48/38, Alpesh's pick) MOVED BOTH. Until then display-small crossed at 933.33px and subsection at 1400px. Subsection now tops out at 24px, so it is the LEAD tier at every width, and the variable stays only so its consumers need not change. */ :root { --abk-track-dsm: var(--wp--custom--tracking--display); --abk-track-sub: var(--wp--custom--tracking--lead); } @media (max-width: 1343px) { :root { --abk-track-dsm: var(--wp--custom--tracking--lead); } } /* --------------------------------------------------------------------------- 1 · THE SECTION. Every landing-page section is an inset rounded panel. --------------------------------------------------------------------------- */ .section { /* ⛔ `clip`, never `hidden`. Both clip the same box, but `hidden` makes a SCROLL CONTAINER, and a scroll container is the containing block for every `position: sticky` descendant -- so a sticky child scrolls away with its section and never sticks. The prototype's audit reported "0 sticky elements on the page" for this reason and nobody had failed to build one. The `hidden` line is the fallback for a browser with no `clip`, and must stay ABOVE it. */ overflow: hidden; overflow: clip; margin: 0 var(--wp--custom--space--panel-inset); border-radius: var(--wp--custom--rounded--lg); padding: var(--wp--custom--space--section) var(--wp--custom--width--gutter); background: var(--abk-panel); color: var(--wp--custom--color--body); } /* ⛔ TWO CORE RULES OWN THE SECTION'S MARGINS, AND BOTH OUTRANK A SINGLE CLASS. This is KD46 again, in the place it always shows up: WordPress prints its layout rules with `:root :where(...)`, which is (0,2,0) because `:root` counts and `:where()` does not. A one-class rule loses to it however late the file loads, because LOAD ORDER CANNOT WIN A SPECIFICITY ARGUMENT. 1 · the flow rhythm put 19.2px above the section -- the hero started at 95.2px where the prototype starts at 76px, the bar's own bottom edge. 2 · the `alignfull` rule pulled the section out to the viewport with a -50px inline margin, so the 16px panel inset disappeared and the section painted 1440 wide instead of 1408. ⭐ So this rule is written at (0,3,0) rather than with `!important`: three classes state WHERE the exception applies, which an `!important` does not. ⚠ Only MARGIN needs this. Padding, colour, size, flex and display are untouched by core's layout CSS. */ :root .entry-content > .section { margin-block: 0; margin-inline: var(--wp--custom--space--panel-inset); } /* ⛔ AND THE LAST 19.2px SITS ON `main`, NOT ON THE SECTION. templates/ page-landing.html marks it `.lp-main` for exactly this: core's flow rhythm puts a gap between the header and the main element, and a landing page's first section has to start at the bar's bottom edge -- 76px, the prototype's number. ⚠ SCOPED TO THE LANDING TEMPLATE. The same 19.2px is on all 22 other pages and U0's baseline has it; removing it everywhere would move every page for no reason anybody asked for. */ :root .wp-site-blocks > .lp-main { margin-block-start: 0; } .section--floor { background: var(--abk-floor); } /* ⭐ TWO PANELS IN A ROW ARE ONE GROUND: THE CORNERS WHERE THEY MEET ARE SQUARE. Each panel rounds all four corners, so two tint sections with no gap left four white wedges at the join -- on this site 4925's two `section--generous` panels, and the lead-generation page's features and proof. Critique round 2, 2026-09-25, picked by looking. ⚠ A floor section is the page's own white, so its corners never show; the close paints the floor too. */ :root .section:not(.section--floor, .section--close):has(+ .section:not(.section--floor, .section--close)) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } :root .section:not(.section--floor, .section--close) + .section:not(.section--floor, .section--close) { border-top-left-radius: 0; border-top-right-radius: 0; } .section--tight { padding-block: var(--wp--custom--space--section-tight); } .section--generous { padding-block: var(--wp--custom--space--section-generous); } /* R1 at 390: the inset halves rather than eating a fifth of the screen. The 8px is the law's `spacing.panel-inset-phone` (Round 4, item 21, 2026-10-19). */ @media (max-width: 480px) { :root { --wp--custom--space--panel-inset: var(--wp--custom--space--panel-inset-phone); } } /* ⛔ THE THREE SECTION PADDINGS TAKE A MOBILE VALUE, AND theme.json CANNOT HOLD IT. Each token is a clamp whose MINIMUM is its desktop-ish floor, so at 390 the viewport term has long since bottomed out and the section keeps its full 88px. Measured on the prototype at 390: 60px, not 88px. A clamp cannot express "and below 620px, less than the floor"; only a media query can, so the value lives here beside the rule it changes. */ @media (max-width: 620px) { .section { padding-block: 44px; } .section--tight { padding-block: 32px; } .section--generous { padding-block: 60px; } } /* The measure. `.wrap` is the section's content column. */ .section .wrap { max-width: var(--wp--custom--width--figure); margin-inline: auto; } /* ⛔ CORE INJECTS A 24px margin-block-start ON EVERY FLOW SIBLING, and this section system drives its rhythm from named adjacent-sibling margins instead. Zero core's rhythm first, then state ours. Two classes, so it beats core's `:where(.is-layout-flow) > *`, which is one. */ .section .wrap > * { margin-block: 0; } .section--centred { text-align: center; } .section--centred .wrap > * { margin-inline: auto; } /* ⛔ A SECTION THAT A LINK JUMPS TO STOPS BELOW THE FIXED BAR, not under it. The bar is fixed, so it reserves no space, and a plain `#id` jump puts the section's top edge at the viewport's top -- under the bar. 68px is the same measured bar (8px inset + 60px, since 2026-09-27) that chrome.css reserves on `.wp-site-blocks`. A modifier, not `[id]`, so no existing page changes. */ .section--anchor { scroll-margin-top: 68px; } /* --------------------------------------------------------------------------- 2 · THE LABEL LAYER — the eyebrow and its dot. ⛔ The dot aligns to the FIRST LINE's optical centre, not to the element's, so a two-line eyebrow keeps the dot beside the first word rather than in the gutter between the lines. `1lh` is the element's own line box, so it needs no magic number and survives a change of size or leading. --------------------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: flex-start; gap: var(--wp--custom--space--sm); font-size: var(--wp--custom--step--label); font-weight: var(--wp--custom--weight--emphasis); letter-spacing: var(--wp--custom--tracking--label); line-height: var(--wp--custom--leading--body); color: var(--wp--custom--color--secondary); text-transform: none; /* ⛔ no ALL CAPS — PRODUCT.md refuses it */ } .eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--wp--custom--rounded--full); background: var(--wp--custom--color--brand); margin-top: calc((1lh - 6px) / 2); } .eyebrow--plain::before { display: none; } /* ⭐ THE SECTION OPENING IS A UNIT, and this 16px is most of why the prototype's openings read composed. ⚠ It does NOT collapse into the next element's margin, because `.eyebrow` is inline-flex and margin collapsing is a block-box rule -- so the gap below an eyebrow really is its own 16px ON TOP of whatever the next element asks for. Measured: without it the hero's stat triple sat 15px high and the section came out 15px short. ⚠ Three classes, because the rhythm reset above is two. */ :root .section .eyebrow { margin-bottom: var(--wp--custom--space--md); } /* --------------------------------------------------------------------------- 3 · THE BADGE — the hero's pill. One of exactly TWO components the law lets take the pill radius; check-law.js asserts that list. --------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--wp--custom--space--sm); min-height: 34px; padding: 0 var(--wp--custom--space--md); border-radius: var(--wp--custom--rounded--full); background: var(--abk-panel); box-shadow: var(--wp--custom--shadow--edge); font-size: var(--wp--custom--step--label); font-weight: var(--wp--custom--weight--emphasis); letter-spacing: var(--wp--custom--tracking--label); line-height: var(--wp--custom--leading--body); color: var(--wp--custom--color--secondary); } .badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--wp--custom--rounded--full); background: var(--wp--custom--color--brand); } /* --------------------------------------------------------------------------- 4 · BUTTONS — R17: at least 44×44, and 8px, never a pill. ⭐ U28 (2026-10-01): THREE SIZES, S 44 · M 48 · L 56, and M is the default — every button on 4925 and 6352, the header and the footer included (Alpesh: "it looks small, I want one step bigger"). Label 16 / 500 at S and M. ⚠ The class sits on the ANCHOR, not on core's wrapper div, because that is the element check-law.js measures and the element the user clicks. --------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--wp--custom--button--height-m); min-width: 44px; padding: 0 var(--wp--custom--space--lg); border: 0; border-radius: var(--wp--custom--rounded--sm); font-size: var(--wp--custom--step--body); font-weight: var(--wp--custom--weight--display); line-height: var(--wp--custom--leading--display); letter-spacing: var(--wp--custom--tracking--text); text-decoration: none; cursor: pointer; transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing); } /* ⚠ `color: #fff` AND NOT A LITERAL. check-law.js assertion reads every painted colour and refuses a hex that IS one of our tokens: white is `--paper`, so writing it by hand states the same value twice and the two can drift. The guard caught this one on its first run. */ /* ⭐ THE GREEN BUTTON'S FINISH (U28): an inner light line and a white sheen over the top half — a finish, not the visible gradient the law refuses. ⛔ Hover and active set `background-color` ONLY, so the sheen stays on every state. */ .btn--brand { background-color: var(--wp--custom--color--brand); background-image: var(--wp--custom--button--sheen); box-shadow: var(--wp--custom--button--finish); color: var(--wp--custom--color--paper); } .btn--brand:hover { background-color: var(--wp--custom--color--brand-hover); } .btn--brand:active { background-color: var(--wp--custom--color--brand-active); } .btn--outline { background: transparent; color: var(--wp--custom--color--heading); box-shadow: inset 0 0 0 1px var(--wp--custom--color--hairline); } /* ⭐ THE OUTLINE BUTTON'S HOVER IS `ink` AT 6%, THE SAME AS `banner-2` ON A LIGHT GROUND (Alpesh, 2026-10-19, Round 4, item 15); it had no hover. `.btn.` so it beats `.hero-veil .btn--outline` (0,2,0), which sets the hero's glass fill. */ .btn.btn--outline:hover { background: color-mix(in oklab, var(--wp--custom--color--ink) 6%, transparent); } .btn .ico { /* ⛔ AN ICON IS NEVER THE THING THAT GIVES WAY. The button is an inline-flex box, so its svg is a flex item and shrinks like any other once the label runs out of room -- it was measured at ZERO width at 360px, where the arrow simply disappeared from the closing CTA while every number said the button fit. ⚠ THE SCREENSHOT CAUGHT IT AND THE MEASUREMENTS DID NOT: width, height and overflow were all correct with the arrow already gone. ⭐ `flex: none` makes the LABEL wrap instead, which is the legible half of the pair to sacrifice. Nothing shrinks it above 375px, so no painted button changes anywhere the icon was already visible. */ flex: none; width: 15px; height: 15px; margin-left: var(--wp--custom--space--sm); display: block; fill: none; stroke: currentColor; stroke-width: 1.3333; /* ⛔ one RENDERED stroke: 15 / 20 × 1.3333 = 1.000 (U28: the M button's icon, was --lg's) */ stroke-linecap: round; stroke-linejoin: round; } /* The button row. */ .row { display: flex; flex-wrap: wrap; gap: var(--wp--custom--space--md); } .section--centred .row { justify-content: center; width: max-content; max-width: 100%; } /* --------------------------------------------------------------------------- 5 · THE STAT TRIPLE. ⛔ NO SIDE-STRIPE. A green rule beside each number is a side-stripe border, which the law refuses by name. The separation is PAID FOR WITH AIR: the gap goes from 24px to 64px. Three numbers at 40px with 64px between them read as three things without a line. --------------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--custom--space--lg); list-style: none; margin: 0; padding: 0; } /* ⚠ `margin-block: 0` is not tidiness. Core gives a list's items the theme's block gap -- measured 8px -- which stacked on top of the grid `gap` and made the triple 73.2px tall against the prototype's 65.2px. */ .section .stats > li { margin-block: 0; } .stats > li { display: grid; gap: 2px; align-content: start; padding-left: 0; } .stats strong { font-size: var(--wp--custom--step--subsection); font-weight: var(--wp--custom--weight--display); line-height: var(--wp--custom--leading--display); letter-spacing: var(--abk-track-sub); color: var(--wp--custom--color--heading); } /* The label layer (Alpesh's pick, 2026-10-05): 12px takes 450 and the label tracking. */ .stats span { font-size: var(--wp--custom--step--label); font-weight: var(--wp--custom--weight--emphasis); letter-spacing: var(--wp--custom--tracking--label); color: var(--wp--custom--color--secondary); } .stats--ruled { gap: var(--wp--custom--space--3-xl); } .stats--ruled strong { font-size: var(--wp--custom--step--display-small); letter-spacing: var(--abk-track-dsm); } @media (max-width: 520px) { .stats { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- 6 · THE HERO. ⚠ It does NOT run under the fixed bar. Measured on the prototype at both widths: its page wrapper carries a 76px top offset and the hero's own box starts exactly at the bar's bottom edge. chrome.css already applies that same 76px to `.wp-site-blocks`, so the default is already correct and `.abk-hero-under` must NOT be set on this page. --------------------------------------------------------------------------- */ /* ⛔ EVERY HEADING IN A SECTION BALANCES ITS LINES, and leaving this out is invisible in a token diff. `text-wrap: balance` asks the browser to even out the line lengths instead of filling each line greedily. Measured: without it the problem section's h2 broke as "Your site never sleeps. Your / team does." against the prototype's "Your site never sleeps. / Your team does." -- same width, same size, same tracking, a WORSE break. ⭐ Two cards in the same section broke differently too. ⚠ A computed-style diff of size, tracking and leading passes this cleanly. It was found by putting the two screenshots side by side. */ .section :is(h1, h2, h3, h4, h5, h6) { text-wrap: balance; } /* ⛔ THE SECTION HEADING TAKES ITS OWN RUNG, AND theme.json CANNOT GIVE IT ONE. theme.json's `elements.h2` sets a single size for every h2 on the site, including the footer's column headings at 14px. A landing-page section's h2 is the SECTION rung -- 48px at 1440, 32px at 390. Measured: without this it rendered at 28px against the prototype's 48px. ⚠ `step--section` is clamp(2rem, 3.6vw, 3rem), so its MINIMUM is 32px and it never drops below the 28px display boundary. It needs no tracking breakpoint, unlike `step--subsection` and `step--display-small`. */ .section h2 { font-size: var(--wp--custom--step--section); font-weight: var(--wp--custom--weight--display); line-height: var(--wp--custom--leading--display); letter-spacing: var(--wp--custom--tracking--display); color: var(--wp--custom--color--heading); } .hero .wrap { max-width: 1180px; } .hero h1 { max-width: 20ch; margin-inline: auto; font-size: var(--wp--custom--step--hero); font-weight: var(--wp--custom--weight--display); line-height: var(--wp--custom--leading--display); letter-spacing: var(--wp--custom--tracking--display); color: var(--wp--custom--color--heading); } /* ⛔ THE SECOND SENTENCE GETS A SIZE RUNG, NOT A COLOUR TRICK. And the rung is 40, not 48: at 48 the hero would carry 48 beside the 40 stat numbers -- 1.20 apart, the exact collision the placement rule exists to stop, in the one place a visitor looks hardest. So this line and the stat numbers SHARE 40 and separate by weight and colour: 400 and secondary here, 600 and ink there. */ /* The hero's own rhythm, measured off the prototype at 1440 and 390. */ .hero .wrap > .row { margin-top: var(--wp--custom--space--xl); } .hero .wrap > .eyebrow { margin-top: var(--wp--custom--space--md); } .hero .wrap > .stats { margin-top: var(--wp--custom--space--3-xl); } /* The lead-generation hero has a lead paragraph, which 4925's does not. 62ch is the source's own measure for it. */ .hero .wrap > .lead { margin-top: var(--wp--custom--space--lg); max-width: 62ch; } /* ⭐ 24px UNDER THE BADGE, ON EVERY HERO. The rhythm reset takes every margin and nothing gave one back here, so the badge sat ON the headline, gap 0, at every width on 4925 (Alpesh saw it at 390, 2026-09-26). (0,3,1) beats the reset's (0,2,0). */ .hero .wrap > .badge + h1 { margin-top: var(--wp--custom--space--lg); } /* ⭐ ON A PHONE THE DOT IS INLINE WITH THE FIRST WORD. As an inline-flex item it stayed alone on the left while the wrapped text centred beside it (lead-generation hero at 390). As an inline box it leads the first line. */ @media (max-width: 620px) { .hero .wrap > .eyebrow { display: block; } .hero .wrap > .eyebrow:not(.eyebrow--plain)::before { display: inline-block; vertical-align: middle; margin: -2px var(--wp--custom--space--sm) 0 0; } } .hero .eyebrow { display: inline-flex; } /* ⛔ THE TRIPLE CENTRES ITS OWN COLUMNS. ALPESH, 2026-09-23, LOOKING AT THE PAINTED HERO: "the stats part is not centralized." ⚠ IT WAS `text-align: left`, AND THE BOX WAS ALREADY CENTRED -- 1040px inside an 1180px wrap. That is what made it hard to see: the BOX was centred and the CONTENT was not. Each column is 1fr, so every number started at its column's left edge, and the third label is the longest -- so the painted mass sat left of the hero's axis while the box said otherwise. Everything above it, badge to eyebrow, is centred. ⭐ THREE CANDIDATES WERE PAINTED ON THE REAL PAGE: left as it shipped, the columns centred, and the box pulled in to 820px while staying left. He picked the centred columns. */ .hero .stats { max-width: 1040px; margin-inline: auto; text-align: center; } /* ⛔ THE HERO'S STAT LABELS TAKE THE HEADING INK, AND NOWHERE ELSE DOES. ⚠ MEASURED 2026-09-22, ON THE PAINTED PAGE: the wash runs `to top`, so it is STRONGEST AT THE SECTION'S FLOOR -- and the floor is where the smallest type on the page lives. The ground sampled beside the labels is #C3E5D6, and --secondary #656550 on it is 4.39:1. THE FLOOR IS 4.5. It failed. ⛔ NO CHECKER COULD SEE IT. check-law.js grades a colour against its TOKEN ground, and the token ground here is --tint, where #656550 is 5.64. The wash is a ::before layer, so the real ground is never the token. ⭐ THE WASH IS NOT WEAKENED TO PAY FOR THIS. Easing its bottom stop to 26% buys 4.60 -- a 0.10 margin, the same margin refused on the terracotta gradient -- and visibly drains the band. Four candidates were painted on the real page and Alpesh picked this one. Heading ink measures 14.46:1. ⚠ THE HIERARCHY IS CARRIED BY SIZE AND WEIGHT, NOT BY COLOUR: 40px semibold against 12px regular. That was checked in the paint, not reasoned about. ⛔ SCOPED TO `.hero`. The ink-ground stats remap to --ink-muted above and must not move; a bare `.stats span` rule would take them too. */ .hero .stats span { color: var(--wp--custom--color--heading); } /* --------------------------------------------------------------------------- 7 · THE HERO VEIL -- `hero-veil`, page 4925 only (lp-hero.php). ⭐ Alpesh's F1, 2026-09-30, picked over five painted rounds (docs/landing-pages/ai-chatbot-for-wordpress/drawing-review-2026-09-28/hero-wash/): white paper, one green horizon veil BEHIND THE BUTTONS, and "See it work" in translucent white so the veil's lines do not run through its label. It replaces `wash-bloom` on 4925 ("I don't want the olive tint"). ⭐ THE VEIL HANGS FROM THE BUTTON ROW, NOT FROM THE SECTION. Painted on the section, it scaled with the section's height, and the one-line 56px heading lifted the buttons off it. Here it is the row's ::before, the width of the screen at 16:9, with the row's middle at 55.56 % of its height -- where the row sat at 48px -- so it stays behind the buttons at every width and every heading size. The section clips it (`overflow`) to its own corners; z-index -1 puts it under the content inside the section's isolation. ⭐ The file is ops/assets/gen-veil-hero.js output (`--check`). ⚠ ON A PHONE the row stacks its two buttons, so the veil is 220vw wide: at 100vw the band was thinner than one button. --------------------------------------------------------------------------- */ .hero-veil { position: relative; isolation: isolate; overflow: clip; } /* ⭐ THE HERO GROUND, REDONE 2026-10-03 (Alpesh, after dub.co's hero): "I want the hero gradient ... removed, and the way we had our earlier gradient to be brought back, like the rectangular section we had. I didn't want the olive tint there. We keep it white along with this gradient", then our own white lines in place of dub's grid ("A, go with the veil lines"), and the green first G2 ("A, go with G2", over 34 / 16 and 14 / 6), then R15 below. ⭐ THREE LAYERS on the white panel: the brand-green rise, and over it 22 fine WHITE lines -- the horizon veil's own curves (ops/assets/gen-veil-hero.js, hero-lines.svg). White on white is invisible, so the lines show only where the green is and fade out upward, the way dub's grid fades into its colour. ⭐ THE RAMP IS dub.co's (R15, Alpesh: "the orange travel is still at the top, very faint ... Can we replicate the dubs.co as closely as possible?"; "A"): ONE straight rise, brand 15 % at the foot, clear at 82 % of the height. Measured from his screenshot, dub's colour starts at about 20 % and rises in a line; G2 (22 / 10 %, clear at 68 %) left the top half pure white. R15 follows dub within 1-2 levels at every height. ⛔ The green veil behind the buttons (F1, `.row::before`) is gone. */ .hero-veil::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../img/veil/hero-lines.svg") center bottom / 100% auto no-repeat, linear-gradient(to top, color-mix(in oklab, var(--wp--custom--color--brand) 15%, transparent) 0%, transparent 82%); } .hero-veil .btn--outline { background: color-mix(in oklab, var(--wp--custom--color--paper) 80%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ⭐ THE HERO HEADLINE, A NAMED ONE-TIME EXCEPTION (Alpesh, 2026-09-30): 56px at 1440 on ONE line, over the ladder's `hero` 48 on two. 56 is the source's size, looked at beside 48, 60 and 64. ⛔ NOT A LADDER STEP: he chose "one time exception for this page" over raising `hero` (which would move §3's lines and the lead-generation hero) and over an 11th step. 32px on a phone, as `hero`. ops/measure/check-law.js names it (an h1 with this class, 32–56px) and prints it on every run. ⚠ `tw:text-hero` carried the display tracking and leading WITH the size, so they are restated here from the tokens (check-law.js caught the loss). */ .hero-headline { font-size: clamp(2rem, 3.8889vw, 3.5rem); line-height: var(--wp--custom--leading--display); letter-spacing: var(--wp--custom--tracking--display); } /* --------------------------------------------------------------------------- 7a · THE DOT FIELD -- `hero--dots`, page wordpress-lead-generation only (lg-hero.php). ⭐ Alpesh picked it by looking, 2026-09-26: the source's own hero ground (C of four that impeccable polished and composed on the real page), in place of 4925's wash. ⛔ A GROUND TREATMENT, NOT AN ELEMENT: two pseudo-layers behind the copy, faded by masks, never in the reading order (the Ground-Treatment Rule). ::before is one soft brand glow behind the headline; ::after is the source's 9px dot grid, masked to the two sides. ⭐ THE SOURCE'S NUMBERS, RE-TOKENED: its dot is rgba(12,21,32,.42) at .34 opacity, here the ink at 42% at .34; its glow is its green at 10%, here the brand at 10%. The masks are the source's two 46vw panels, restated as percentages of the section. ⚠ ON A PHONE THE DOTS MOVE TO THE OUTER EDGES. With the source's masks the dots sat under the stat captions, and the darkest pixel under them read 4.35 : 1. Measured on the paint after the move: every text 5.1 or more. ⭐ THE HEADLINE IS TWO LINES FROM 768px UP at the source's 26ch; 4925's 20ch broke it into three. The stat captions step up from `label` to `body-small`: at 12px under 30px numbers they read as footnotes. --------------------------------------------------------------------------- */ .hero--dots { position: relative; isolation: isolate; } .hero--dots::before, .hero--dots::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero--dots::before { background: radial-gradient(ellipse 778px 424px at 50% 40%, color-mix(in oklab, var(--wp--custom--color--brand) 10%, transparent) 0%, transparent 66%); } .hero--dots::after { opacity: .34; background-image: radial-gradient(circle, color-mix(in oklab, var(--wp--custom--color--ink) 42%, transparent) .85px, transparent 1px); background-size: 9px 9px; --hero-dots-mask: radial-gradient(ellipse 21% 48% at 12% 31%, #000 0%, rgba(0, 0, 0, .5) 42%, transparent 74%), radial-gradient(ellipse 17.5% 41% at 19.5% 74%, #000 0%, transparent 72%), radial-gradient(ellipse 20% 50% at 88% 38%, #000 0%, rgba(0, 0, 0, .5) 44%, transparent 76%), radial-gradient(ellipse 15.6% 36% at 80.5% 79%, #000 0%, transparent 70%); -webkit-mask-image: var(--hero-dots-mask); mask-image: var(--hero-dots-mask); } @media (max-width: 720px) { .hero--dots::after { opacity: .22; --hero-dots-mask: radial-gradient(ellipse 16% 30% at 0% 22%, #000 0%, transparent 74%), radial-gradient(ellipse 16% 30% at 100% 48%, #000 0%, transparent 74%); } } .hero--dots .wrap > h1 { max-width: 26ch; } /* ⭐ THE PANEL READS AS A BOX AGAIN, BY ITS EDGE, NOT BY A TINT: on the paper floor a white panel has no visible edge. Alpesh, 2026-09-26: "a light border so that make it look like a rectangular box like earlier" -- the `edge` ring, which the Shadow-Budget Rule leaves unlimited. And 32px of side space on a phone, this hero only (his pick: the rest of the page keeps the gutter). */ .hero--dots { box-shadow: var(--wp--custom--shadow--edge); } @media (max-width: 620px) { .hero--dots { padding-inline: var(--wp--custom--space--xl); } } .hero--dots .stats span { /* 14px is not the label layer, so it keeps the body weight and the text tier. */ font-size: var(--wp--custom--step--body-small); font-weight: var(--wp--custom--weight--body); letter-spacing: var(--wp--custom--tracking--text); margin-top: var(--wp--custom--space--xs); } /* =========================================================================== ⛔ EVERY TYPE SIZE TAKES ITS OWN TRACKING TIER, AND A CLAMP CHANGES THE SIZE WITHOUT CHANGING THE TIER. This block is the correction, and it is the one thing in this file that is easiest to get wrong. The three tiers, and they step ONE WAY ONLY: >= 28px -0.0275em display 20-27px -0.0100em lead < 20px 0 text ⚠ THE BREAKPOINTS ARE DERIVED, NOT CHOSEN. Each role switches at the exact viewport where its own clamp crosses 28px: step--display-small clamp(1.5rem, 2.0834vw, 1.875rem) -> 28px at 1344px step--subsection never crosses: 24px at most (the lead tier everywhere) (the 2026-09-25 ladder; see the variables at the top of this file) ⛔ AND THIS BLOCK SITS AT THE END OF THE FILE ON PURPOSE. A media query adds NO specificity. Put it above the rules it corrects and it loses to them on source order, silently, at one width only -- which is the hardest kind of defect to see. An override must come AFTER the rule it overrides as well as match its shape. ⭐ ops/measure/check-law.js reads the tier off the RENDERED size, so a value that is right at 1440 and wrong at 390 fails there and only there. =========================================================================== */ /* --------------------------------------------------------------------------- 8 · THE CUSTOMER LOGO ROW — U6, section 2. Nine real customer marks, scrolling as one continuous wall. --------------------------------------------------------------------------- */ .marq { position: relative; overflow: hidden; /* ⛔ A CUT EDGE IS A MASK, NEVER A GRADIENT OVERLAY. An overlay has to know the ground it sits on and stops being invisible the moment the section's ground changes; a mask cuts the element itself. */ mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%); } .marq__label { text-align: center; /* ⛔ 48px, NOT 24. ALPESH, 2026-09-23: "I feel there should a bit more spacing between the text and logos." ⚠ 40px WAS PAINTED AND REFUSED -- it is not on the spacing ladder, and an off-ladder value is exactly what check-tokens.sh exists to catch. The legal rungs either side of 24 are 32 and 48; both were painted at 1440 and he took the larger. A 12px caption above a 34px wall of marks needs the room to read as a caption rather than a label stuck to the row. The section's own frame is 64px, so 48 still sits inside it rather than competing with it. */ margin: 0 0 var(--wp--custom--space--2-xl); /* ⛔ BLEED THE FRAME, NEVER THE SENTENCE. `.marq`'s mask fades its outer 6% each side, and the label is inside `.marq`, so a sentence as wide as the row fades out at both ends. Measured 2026-09-25 at 390: the lead-generation label ran 19px into each fade. This padding is the mask's own 6%, so the label wraps inside the opaque band instead. ⚠ Page 4925's shorter label measured 264px in a 294px band: still one line. */ padding-inline: 6%; font-size: var(--wp--custom--step--label); font-weight: var(--wp--custom--weight--emphasis); letter-spacing: var(--wp--custom--tracking--label); line-height: var(--wp--custom--leading--body); color: var(--wp--custom--color--secondary); } .marq__track { display: flex; align-items: center; gap: var(--wp--custom--space--2-xl); width: max-content; margin: 0; padding: 0; list-style: none; animation: marq-run 44s linear infinite; } /* ⛔ -50% AND NOT -100%, AND THE MARKUP IS WHY. The nine marks are printed TWICE, so the track is exactly two identical halves. Moving it by half its own width lands the second nine where the first nine started, and the loop has no seam. Print the nine once and this jumps. */ @keyframes marq-run { to { transform: translateX(-50%); } } /* ⛔ MANDATORY, AND IT DOES NOT SLOW THE ROW -- IT STOPS IT. A marquee that merely runs slower is still motion, and the request was for none. The row wraps into a static centred grid, which keeps all nine visible. The mask also goes: with nothing moving, a cut edge hides marks for no reason. */ @media (prefers-reduced-motion: reduce) { .marq { mask-image: none; } .marq__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; gap: var(--wp--custom--space--xl) var(--wp--custom--space--2-xl); } /* ⛔ AND THE DUPLICATE NINE GO. They exist ONLY to make the loop seamless. With nothing looping they are just repeats, so a visitor who asked for no motion met every customer TWICE -- eighteen marks in a static grid, which reads as a longer customer list than we have. ⚠ THE PROTOTYPE HAS THIS FAULT TOO: its reduced-motion rule wraps the same eighteen. Found by painting the branch rather than by reading the rule. */ .marq__mark[aria-hidden="true"] { display: none; } } /* ⛔ OPTICAL WEIGHT IS NOT PIXEL HEIGHT, AND MATCHING THE HEIGHT DOES NOT DELIVER IT. Measured: the nine source files run from 72px to 484px wide at a common 80px height. Set to one height, `Select Interiors` occupied nearly SEVEN TIMES the width of `Emerald Yards`, and the row read as scattered noise rather than as a wall. ⭐ So every mark gets THE SAME BOX and is contained inside it, which gives the row one rhythm. `data-w` then trims the DENSE marks, which is the only part of optical weight a box cannot do. */ .marq__mark { display: block; flex: none; width: 132px; height: 34px; object-fit: contain; object-position: center; /* Q9 candidate A, and it is what the prototype paints. `brightness(0)` AFTER `grayscale(1)`, so a mark's own colour cannot leak through at any lightness. ⚠ 0.55 measured too faint to read as testimony; 0.68 holds the row together without competing with the line above it. */ filter: grayscale(1) brightness(0) opacity(0.68); } /* ⭐ Q9 SETTLED BY ALPESH, 2026-09-19: GREY AT REST, THEIR OWN COLOURS ON HOVER. Neither camp on its own -- the flat ink holds the row together as a wall, and the colour is there for anyone who stops on a mark, which is the moment it reads as a citation rather than as decoration. ⛔ AND THE ROW HAS TO STOP FOR THE HOVER TO BE USABLE. On a moving strip the mark slides out from under the cursor before the transition finishes, so the colour would only ever be glimpsed. Pausing is what makes the feature work; it is not an extra. ⚠ `@media (hover: hover) and (pointer: fine)` ON PURPOSE. A touch screen reports no hover, and without the guard a tap can leave a mark stuck in colour with no way to clear it. Touch keeps the flat ink, which is the state that was shipped. */ @media (hover: hover) and (pointer: fine) { .marq__mark { transition: filter var(--wp--custom--motion--duration) var(--wp--custom--motion--easing); } .marq:hover .marq__track { animation-play-state: paused; } .marq__mark:hover { filter: none; } } /* R26 again: if motion is refused, nothing pauses because nothing runs. The colour on hover stays -- it is not motion. */ .marq__mark[data-w="xs"] { transform: scale(0.94); } /* thin serif wordmark */ .marq__mark[data-w="s"] { transform: scale(0.86); } .marq__mark[data-w="sm"] { transform: scale(0.90); } .marq__mark[data-w="m"] { transform: scale(0.82); } /* dense script mark */ .marq__mark[data-w="l"] { transform: scale(0.78); } /* solid glyph */ @media (max-width: 720px) { .marq__mark { width: 104px; height: 28px; } } /* --------------------------------------------------------------------------- 9 · THE PROBLEM SECTION — U6, section 3. Five components, and four of them are reused by later sections rather than built again. --------------------------------------------------------------------------- */ /* -- 9a · THE GHOST TRANSCRIPT. ⭐ The cheapest lift device on the page and the one no reference site can copy, because our content IS conversations. It is TEXT, so it costs no asset and no request. ⛔ EVERY LINE IS ALREADY ON THIS PAGE -- the three visitor rows in the drawing below it and the four sentences of the paragraph beside it. The section that carried this device the first time was removed precisely because it INVENTED words. */ .ghost { position: absolute; inset: 0; z-index: -1; width: auto; max-width: none; user-select: none; /* a drag cannot select it */ pointer-events: none; font-size: 13px; line-height: var(--wp--custom--leading--body); letter-spacing: var(--wp--custom--tracking--text); /* ⛔ 0.055 WAS TUNED FOR AN INK GROUND, where light type on black barely shows. On the tint it measured 1.112 : 1 and every line was READABLE -- the one thing this device forbids by name. Read off the paint, halved, and re-read: 1.045 : 1. */ color: var(--wp--custom--color--ink); opacity: 0.026; padding: var(--wp--custom--space--lg); columns: 3; column-gap: var(--wp--custom--space--2-xl); overflow: hidden; /* ⛔ A TREATMENT MUST COVER WHAT IT TREATS. An earlier centre at 50% 30% left the lower half of an 808px section plain. Centred, and wider. */ mask-image: radial-gradient(150% 150% at 50% 50%, #000 45%, transparent 95%); } /* ⛔ ONE ROW PER TURN. Without `display: block` the spans run together and the field reads as a PARAGRAPH -- a thing to read rather than a texture. ⚠ AND NOT `white-space: nowrap`: that made each row 1408px wide, so the columns collapsed and only two rows survived. Measured both ways. */ .ghost span { display: block; } @media (max-width: 760px) { .ghost { columns: 1; } } /* ⛔ CORE'S 24px FLOW RHYTHM, ZEROED ONCE FOR EVERY CONTAINER THIS SECTION INTRODUCES. WordPress prints `:root :where(.is-layout-flow) > *` at (0,2,0), so a single-class reset loses to it however late this file loads -- KD46, again, and only MARGIN behaves this way. ⭐ Then the rhythm is stated positively below, at (0,2,1) or better, which is what makes each gap a decision rather than a leftover. */ :root .section > *, :root .split > *, :root .fgrid > *, :root .f > *, :root .demo__frame > *, :root .split__copy > * { margin-block: 0; } /* ⭐ THE SECTION OPENING IS A UNIT, and this rhythm is a large part of why the prototype's openings read composed rather than merely correct. */ .section h2 + p, .section h2 + .lead { margin-top: var(--wp--custom--space--lg); } /* ⛔ A SECTION'S HEADING PAIR NEVER TOUCHES THE CONTENT BELOW IT. ⚠ AND THIS RULE FIRES THROUGH A HIDDEN ELEMENT, WHICH IS WHY THE MOBILE GAP IS BIGGER THAN THE DESKTOP ONE. The copy ships a long and a short version of the same sentence and hides one by width. At 390 the LONG lead is `display: none`, but it is still the previous SIBLING -- so the short lead matches `.lead + *` and takes 48px where the long one would have taken 24. ⭐ Measured on the prototype at 390 and reproduced deliberately: Alpesh decided this section from that paint, so the paint is the specification. */ /* ⛔ `:root` HERE IS LOAD-BEARING. This rule has to outrank BOTH the rhythm reset above it AND each component's own default top margin -- the definition list asks for 32px on its own and must take 48px when it follows a lead. Measured: without it every one of the four term/definition sections came out 16px short. */ :root .section .lead + * { margin-top: var(--wp--custom--space--2-xl); } /* ⛔ `>` THROUGHOUT, AND IT IS A RULE RATHER THAN A TIDY-UP: A CARD'S TYPE RULES MUST NOT REACH INSIDE A DRAWING IT HOLDS. A drawing states its own type. Measured twice in one section: the card's paragraph colour repainted the widget's white user bubble grey-on-green, and the card's 8px paragraph rhythm repainted the app screen's 2px caption gap, growing every card. ⭐ A card's own copy is its DIRECT children; anything deeper belongs to a drawing. */ .section .f > h3 + p { margin-top: var(--wp--custom--space--sm); } /* -- 9b · THE SPLIT. Two columns on the wide screen, one below 900px. */ .split { display: grid; gap: var(--wp--custom--space--2-xl); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.15fr 1fr; } /* ⭐ 40 / 60, the problem section of `wordpress-lead-generation`: Alpesh, 2026-09-25 -- "more towards 60 for the animation and 40 for the text, so the animation can come out properly." ⚠ The source's near-even 1 : 1.06 was painted and built on 2026-09-26, and he asked for 40 / 60 back the same day: it shrank the animation to 288px at 900. */ .split--40-60 { grid-template-columns: 2fr 3fr; } .split--flip > *:first-child { order: 2; } } /* ⛔ SHOW THE MECHANISM BEFORE THE CLAIM, AND BELOW 900px THERE IS NO LEFT AND NO RIGHT -- the split stacks in DOM ORDER, and the DOM writes the argument first. Measured: all four split sections put the claim first at 390, against three of four that pass at 1440. ⭐ The phone was the worse half and nobody had looked. ⚠ It costs the desktop rhythm nothing, because a stacked column has no side to alternate. */ @media (max-width: 899px) { .split > figure, .split > .demo__frame { order: -1; } } .lead { font-size: var(--wp--custom--step--lead); line-height: var(--wp--custom--leading--body); letter-spacing: var(--wp--custom--tracking--lead); /* ⭐ U27 (2026-09-30): the argument is a darker olive grey, not `secondary` (D1, P-W1). */ color: var(--wp--custom--color--secondary-strong); max-width: 62ch; } /* ⭐ BODY-LARGE -- A SPLIT COLUMN'S PARAGRAPH IS NOT A LEAD (2026-09-25). A lead is one or two sentences under a heading. In a split's text column the same `.lead` paragraph ran three and four lines as body copy, which is the fault Alpesh named: "using the lead font size for a body paragraph is, I think, causing the issue." Applied BY POSITION, so no page's markup had to change: 1 paragraph on the lead-generation page, 5 on 4925. ⛔ IT KEEPS THE LEAD COLOUR (`secondary-strong`) ON PURPOSE: 18 against the 16px ink body is only 1.125, so the colour carries the difference (the law, bodyLarge). ⚠ (0,3,1): it must outrank `.lead` and stay under nothing that sets a size. */ :root .split__copy > p.lead { font-size: var(--wp--custom--step--body-large); letter-spacing: var(--wp--custom--tracking--text); } /* ⭐ ON A PHONE EVERY LEAD IS BODY-LARGE, 2026-09-26 (the law, `lead`). Alpesh, looking at the lead-generation hero at 390: the headline and the lead "look big on mobile, there is no breathing space". At 20px the hero lead ran five lines in a 334px column. ⛔ THE TRACKING STEPS WITH THE SIZE: 18 is under 20, so it takes the TEXT tier, not the lead tier -- check-law.js fails the other pairing by name. Below `tab` (640px), the law's phone layout. */ @media (max-width: 639px) { .lead { font-size: var(--wp--custom--step--body-large); letter-spacing: var(--wp--custom--tracking--text); } } /* -- 9d · THE FIGURE AND THE DRAWING IT HOLDS. ⭐ THE RULE, STATED ONCE: an object takes the light ground its surface is NOT, and anything inside it takes the one the OBJECT is not. Written as a pair because this exact inversion has been got wrong three times. */ .figure { --fig: var(--abk-floor); --fig-in: var(--abk-panel); border-radius: var(--wp--custom--rounded--lg); background: var(--fig); padding: var(--wp--custom--space--xl); overflow: hidden; /* ⛔ the ground clips its own bleed */ margin: 0; } :is(.section--floor, .tw\:bg-paper) .figure { --fig: var(--abk-panel); --fig-in: var(--abk-floor); } /* ⭐ THE SUPPRESSION LADDER, BOLDEST LAST, DONE AS A LAYER and never baked into the artwork. Exactly one thing per drawing carries `.lit`. */ .dim { opacity: 0.35; } @media (max-width: 720px) { .figure { padding: var(--wp--custom--space--md); } } /* -- 9e · THE FEATURE GRID. One component, three densities. This is the reuse test: page 4558 runs SIX consecutive feature sections, and if each needed its own CSS the vocabulary has failed. */ /* ⚠ `:root .section .fgrid` AND NOT `.fgrid`. The rhythm reset on `.section .wrap > *` is (0,2,0) and it zeroed this margin -- the four cards sat flush against the paragraph above them, 48px too high. A positive rhythm rule has to outrank the reset that cleared core's. */ .fgrid { display: grid; gap: var(--wp--custom--space--md); } :root .section .fgrid { margin-top: var(--wp--custom--space--2-xl); } .fgrid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 899px) { .fgrid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .fgrid--3 { grid-template-columns: 1fr; } } /* ⭐ THREE CARDS, THEN TWO -- page `wordpress-lead-generation`, lg-features.php (plan KTD5, Alpesh's call). Six tracks: row 1 spans two each (one third), row 2 spans three each (one half). At 1440 in the 1280 wrap with the 16px gap that is 416px and 632px. ⛔ A MODIFIER, AFTER THE COMPONENT IT EXTENDS, and 4925 does not carry it. ⚠ THE BREAKPOINTS ARE `fgrid--3`'s: two columns at 900 and below, one at 620 and below. Each media rule comes AFTER the base rule (gotcha 74). At 900 the fifth card sits alone, exactly as it would in `fgrid--3`. */ .fgrid--3-2 { grid-template-columns: repeat(6, 1fr); } .fgrid--3-2 > * { grid-column: span 2; } /* ⭐ ROW 2 IS THE SOURCE'S BENTO (Alpesh, 2026-09-26): the brand card at TWO THIRDS, 848px, and the connected tools at ONE THIRD, 416px. It was two halves. */ .fgrid--3-2 > :nth-child(4) { grid-column: span 4; } .fgrid--3-2 > :nth-child(5) { grid-column: span 2; } @media (max-width: 899px) { .fgrid--3-2 { grid-template-columns: repeat(2, 1fr); } .fgrid--3-2 > *, .fgrid--3-2 > :nth-child(5) { grid-column: auto; } /* the wide card keeps a whole row, so its drawing is not halved */ .fgrid--3-2 > :nth-child(4) { grid-column: 1 / -1; } } @media (max-width: 620px) { .fgrid--3-2 { grid-template-columns: 1fr; } } /* ⛔ A CARD IS ALWAYS THE FLOOR, ON EVERY GROUND. An earlier rule read "a card takes the light ground its surface is NOT", which tinted every card on a white section. Alpesh overruled it: the tint is a SECTION-scale token and a card stays white. ⭐ A white card on a white section reads by its EDGE -- `shadow--edge` is ink at 10%, which is exactly the barely-there 1px border he cited two references for, and it costs no shadow budget. */ .f { background: var(--abk-floor); border-radius: var(--wp--custom--rounded--md); padding: var(--wp--custom--space--lg); box-shadow: var(--wp--custom--shadow--edge); margin: 0; } /* ⛔ THIS HEADING RENDERED AT BODY SIZE CARRYING DISPLAY TRACKING AND DISPLAY LEADING, on eleven cards. Two faults in one line: it was the SAME SIZE as the paragraph under it, and it inherited the display tracking from the shared heading rule -- a 72px correction applied to 16px text, which squeezed the letters shut. ⭐ Alpesh picked the LEAD size from four painted candidates. It is not a new rung; the card reuses one of the nine. ⚠ It takes the LEAD tracking because that is 21px's tier, and the DISPLAY line-height because it is a heading, not a paragraph. */ .f > h3 { margin: 0; font-size: var(--wp--custom--step--lead); font-weight: var(--wp--custom--weight--display); letter-spacing: var(--wp--custom--tracking--lead); line-height: var(--wp--custom--leading--display); color: var(--wp--custom--color--heading); } .f > p { margin-top: var(--wp--custom--space--sm); color: var(--wp--custom--color--secondary); max-width: none; } /* --------------------------------------------------------------------------- 10 · THE PUNCH — U6, section 4. One sentence at display size, alone on the floor. No card, no ground, no icon: THE TYPE IS THE SECTION. ⭐ This is the gear change the middle of the page was missing. Eleven sections read heading → lead → row of cards, and both accent grounds were already spent, so the variation had to come from GEOMETRY. --------------------------------------------------------------------------- */ /* ⭐ THE STATEMENT RULE, premium pass U25 (2026-09-30): the source's 40 x 2px green line above §3's two lines, picked by Alpesh on the painted map. ⚠ 40px AND 2px ARE NOT SPACING STEPS. They are the source's own values: a short stroke, like a border width, not a gap. Flagged to Alpesh with the build; the nearest steps are 32px or 48px wide. ⭐ Brand green is spent once in this section, on this line (the Balanced-Accent Rule). */ .statement-rule { display: block; width: 40px; height: 2px; margin: 0 auto var(--wp--custom--space--lg); background: var(--wp--custom--color--brand); } @media (min-width: 640px) { .statement-rule { margin-bottom: var(--wp--custom--space--xl); } } /* ⭐ §3'S TWO LINES, A NAMED EXCEPTION (Alpesh, 2026-09-30, U25): he picked the painted values over the nearest law steps, looking at both on the real page. 34ch keeps each line on ONE line at 1440 (24ch, the `statement` width, broke them 2 + 2). #9A9A92 is the source's faded first line; the `secondary` #656550 read as a second heading. ⚠ NEITHER VALUE IS A LAW STEP YET. The type law (plan U27) decides whether they become steps or go. Until then, only this section uses them. ⛔ #9A9A92 IS 2.834 : 1 ON WHITE, UNDER THE LARGE-TEXT FLOOR OF 3. Alpesh kept it on 2026-09-30 as a ONE-TIME exception on this line only. ops/measure/check-law.js names it (this class AND this colour) and prints it on every run; any other grey here, or this grey anywhere else, fails. */ .statement-line { max-width: var(--wp--custom--width--statement); } .statement-line--faded { color: #9A9A92; } /* ⭐ THE STATEMENT SHEEN, the law's ONE named exception to gradient text (Alpesh, 2026-09-30; the design-system skill, "Don't"; SECTION-MAP §3, option 3). A band of brand-text → brand → brand-text crosses line B ONCE, left to right, as the line rises through the screen, and runs back when the reader scrolls back. At both ends of the pass the band is off the line, so the line at rest is plain ink. ⭐ THE PASS RUNS FROM THE LINE'S ENTRY AT THE BOTTOM (cover 5%) TO JUST UNDER THE HEADER (cover 80%), and the band is ON the line for all of it (Alpesh, on the live page, 2026-09-30: first "too fast … if I am scrolling fast I don't even notice", then "I can only see the gradient when the line is centralized"). ⚠ The keyframes are NOT the source's 150% → -50%: with a 260% image that moves the band across the line in the middle third only. 94% puts the band's right green edge (58% of the image) at the line's left edge; 6% puts its left green edge (42%) at the line's right edge: -1.6 × position + 2.6 × edge = 0 or 1. ⭐ CSS, NOT GSAP: a scroll timeline does exactly this, and 4925 loads no GSAP (the law refuses the 45 KB for one effect). ⛔ LAW GREENS ONLY. The source peaked at #22B98C, 2.50 : 1 on white; brand is 4.50 : 1 and brand-text 6.16 : 1, so every point of the band clears 4.5. `color` stays ink, so a check that reads `color` still reads ink. ⛔ PLAIN INK when the browser has no scroll timeline, under reduced motion, in forced colours, and in a selection. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) and (not (forced-colors: active)) { .statement-line--sheen { background-image: linear-gradient(100deg, var(--wp--custom--color--ink) 0%, var(--wp--custom--color--ink) 30%, var(--wp--custom--color--brand-text) 42%, var(--wp--custom--color--brand) 50%, var(--wp--custom--color--brand-text) 58%, var(--wp--custom--color--ink) 70%, var(--wp--custom--color--ink) 100%); background-size: 260% 100%; background-position: 94% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: statement-sheen linear both; animation-timeline: view(); animation-range: cover 5% cover 80%; } .statement-line--sheen::selection { -webkit-text-fill-color: var(--wp--custom--color--ink); } } } @keyframes statement-sheen { from { background-position: 94% 0; } to { background-position: 6% 0; } } /* --------------------------------------------------------------------------- 11 · HOW WE HELP — U6, section 5. A trio of welled cards, each holding a drawing of the real product, plus a pull quote. ⛔ THE TWO BACKGROUND CURVE OBJECTS ARE NOT BUILT, AND THAT IS MEASURED, NOT AN OMISSION. The prototype carries two `` here, and both compute `display: none`: the curve family is an unpicked experiment gated behind `data-obj="curve"`, and the prototype's own `` sets no `data-obj` at all. Engrave is the default and it has no window in this section. Building inert markup would have looked like faithfulness and painted nothing. --------------------------------------------------------------------------- */ /* The icon. ONE rendered stroke width across the page: an icon drawn at a different size takes a compensating `stroke-width` so the painted line is always 1.000. Two stroke widths read as assembled. */ .ico { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; } /* ⛔ A GREEN GROUND UNDER GREY TEXT IS DECORATION, NOT MEANING. The chip's own text is `--secondary`, so its ground is the neutral tint. */ .chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; } /* ⚠ `margin: 0` because core gives a LIST'S ITEMS the theme's block gap, and the chip row is a flex row with its own `gap`. Measured: each chip came out 8px taller and the row 8px taller with it. */ :root .chips li, .chips li { margin: 0; /* The label layer (Alpesh's pick, 2026-10-05), not a literal 12px. */ font-size: var(--wp--custom--step--label); font-weight: var(--wp--custom--weight--emphasis); letter-spacing: var(--wp--custom--tracking--label); color: var(--wp--custom--color--secondary); padding: 4px 8px; border-radius: var(--wp--custom--rounded--sm); background: var(--wp--custom--color--tint); } /* ⛔ THE STEP NUMERAL GAVE UP ITS PILL. It is neither a badge nor a pill, and those are the only two components the law lets take the full radius -- and it sits outside every drawing root, so the drawn-chrome exemption does not cover it either. The Three-Radii Rule holds on this page with NO exception. */ .step__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--wp--custom--rounded--sm); background: var(--wp--custom--color--ink); color: var(--wp--custom--color--ink-heading); font-size: var(--wp--custom--step--label); font-weight: var(--wp--custom--weight--emphasis); line-height: var(--wp--custom--leading--display); margin-bottom: var(--wp--custom--space--md); } /* -- 11a · THE WELLED CARD, AND ITS MEDIA-FIRST VARIATION. ⛔ `.f--media-first` IS A VARIATION OF `.f--welled`, NOT A SECOND CARD. Only the ORDER changes, so a comparison isolates one attribute. */ .f--welled { padding-bottom: 0; overflow: hidden; display: flex; flex-direction: column; } :root .f--welled > :last-child { margin-top: auto; } :root .f--welled > .step__n { /* ⭐ Inside a welled card the numeral is a LABEL, not a step in a sequence: small, in the accent, on no ground at all. */ width: auto; height: auto; padding: 0; background: none; color: var(--wp--custom--color--brand-text); font-size: var(--wp--custom--step--label); font-weight: var(--wp--custom--weight--emphasis); letter-spacing: var(--wp--custom--tracking--label); display: block; margin-bottom: var(--wp--custom--space--sm); } /* ⭐ THE NUMERAL AS A SEQUENCE -- `step__n--seq`, page `wordpress-lead-generation` only (lg-steps.php). The same accent, at the ladder's `subsection` rung and its own tracking, so "1 · 2 · 3" reads before the headings. Critique round 1, 2026-09-25: Alpesh picked the `subsection` rung by looking (28px then), over 12px and 40px. Under the 48/38 ladder that he approved the same day, the rung paints 24px. ⚠ (0,3,0), like the rule above, and it wins by coming after it. 4925's numerals do not carry the class. */ :root .f--welled > .step__n--seq { font-size: var(--wp--custom--step--subsection); font-weight: var(--wp--custom--weight--display); /* ⛔ THE ROLE'S TRACKING, NOT THE DISPLAY TIER BY HAND: check-law.js failed the first version at 390 (22px tracking -0.0275). `--abk-track-sub` is the lead tier, because `subsection` never reaches 28px under the 48/38 ladder. */ letter-spacing: var(--abk-track-sub); line-height: var(--wp--custom--leading--display); font-variant-numeric: tabular-nums; } :root .f--welled > h3 { margin: 0; } /* ⛔ `:not(.step__n)` BECAUSE THE NUMERAL IS A PARAGRAPH HERE AND A `` in the prototype -- a block editor has no span-level block, so the label had to become a `

`. Without the exclusion it took this 8px and the whole card grew by it. ⭐ A structural difference forced by the editor, absorbed in the stylesheet rather than paid for in the paint. */ :root .f--welled > p:not(.step__n) { margin-top: var(--wp--custom--space--sm); } /* ⭐ TEXT FIRST, WELL LAST: THE TEXT TAKES THE CARD'S OWN PADDING BELOW IT. The card's bottom padding is 0 so the well fuses to its foot, and so the last paragraph ended exactly on the well's top edge (165 = 165px at 1440). Critique round 2, 2026-09-25, picked by looking. ⚠ Only lg-steps.php builds this order; every media-first card is untouched. */ :root .f--welled:not(.f--media-first) > p:has(+ .well:last-child) { margin-bottom: var(--wp--custom--space--lg); } /* ⚠ 16px UNDER THE CHIP ROW TOO. In the prototype that gap is the browser's own default bottom margin on a `