/** * Featured Bulleted List — TC2 Engineer & Design "Core Engineering Capabilities" * * Section chrome plus the pill treatment on a plain core/list. Frames: * docs/design/bulleted-list/{desktop,tablet,mobile}.png — 43324:16321 / * 43324:16100 / 43324:15936, all three exported @2x and all three CROPPED TO THE * CONTENT BOX, not the viewport (1400 / 688 / 288 logical). build-knowledge * §16a trap 2: their x=0 is the section's left edge, so normalise to that edge * before comparing against a full-viewport render. * * Breakpoints are written at the token values with the token named in a comment * (CSS vars cannot be used in @media conditions). Mobile-first, min-width only. * * Colour tokens are `--wp--custom--color----`, DOUBLE dash. There * is no `--wp--preset--color--tertiary-600` / `--neutral-200` — the theme * palette holds only the nine `scheme-*` entries, so preset spellings fall * through to their literals every time (build-knowledge corrections log). * * The eyebrow is the shared `.tc-eyebrow` micro-kit in style.css. Pattern CSS is * glob-loaded and unconditional (§1), so it is NOT redefined here — only the bar * colour is pinned, exactly as brand-grid and the media family do. * * @package WordPress * @subpackage FTM_Theme */ /* ── Header ───────────────────────────────────────────────────────────────── Written at (0,2,0) to beat WP's flow-layout blockGap. That rule is `:root :where(.is-layout-flow) > *` — `:where()` contributes nothing, so it lands at (0,1,0), the same as a bare `.tc-bulleted-list__header`, and a tie is decided by load order. Beat it on specificity, never on order (build-knowledge corrections log, heading-banner 2026-07-28). One flex column, one gap: the frames draw eyebrow->heading and heading->intro at 16 apiece, flat at all three widths (desktop 20->36 and 84->100; tablet 20->36 and 84->100; mobile 20->36 and 92->108). No nested titles group is needed here — brand-grid only has one because its link sits beside the titles at desktop. */ .tc-bulleted-list .tc-bulleted-list__header { display: flex; flex-direction: column; gap: var( --wp--preset--spacing--normal, 1rem ); /* 16 */ } /* The header's TEXT is 800 wide and flush left, on the same edge as the 1400 * grid — the frame draws both at x=0. Three readings of WP's constrained layout * were needed to land it, and the first two are worth keeping because each is * the obvious move: * * > .alignwide { max-width: wide-size } * > :where(:not(.alignleft):not(.alignright):not(.alignfull)) * { max-width: content-size; margin-left: auto !important; * margin-right: auto !important } * * 1. Leave the header UNALIGNED and let contentSize give 800 for free. The * second rule also CENTRES it: measured x=300 inside the 1400 box. * 2. Mark it `align:wide` and cap the width back to contentSize here. Note * what that second selector excludes — alignleft, alignright, alignfull, * but NOT alignwide — so the header matched both rules and was still * auto-margined: 800 wide, still at x=300. Killing the start margin then * sent it to x=-220, because the auto margins are what centre an alignwide * track inside the group's padding box in the first place. Beating them * does not move the header to the track; it moves it off the track. * 3. What is actually wanted is the alignwide box left ALONE — auto margins * and all, so it stays on the 1400 track — and the TEXT capped inside it. * Which is also the truer reading of the frame: it draws an 800 text * column, not an 800 container. * * So the cap lands on the children, at (0,2,0) against nothing that contests * it, and there is no `!important` and no specificity fight anywhere. Under the * flex column's default `align-items: stretch` a capped child sits at the start * edge, which is the 1400 track's left edge — x=0 normalised, as drawn. * * Inert below desktop: the track is 688 and 288 there, both under the cap. * * The token is the one reading 1 would have used, so the 800 is not hard-coded; * the literal is only a fallback. */ .tc-bulleted-list .tc-bulleted-list__header > * { max-inline-size: var( --wp--style--global--content-size, 800px ); margin-block: 0; /* flow layout injects margins the flex column must not inherit */ } /* ── Type stand-ins ───────────────────────────────────────────────────────── The theme's typeStyles block is inert site-wide (DECISIONS, H2), so headings render at weight 400 without this. F23 — the heading-medium clamp has to be restated per pattern; this is the family's fifth stand-in and the third copy of the clamp. Byte-identical to brand-grid's and the media family's `--tc-heading-medium-size`. */ .tc-bulleted-list .tc-bulleted-list__heading { font-weight: 700; letter-spacing: -0.02em; /* frame: -0.82px on 41px */ } .tc-bulleted-list .has-heading-medium-font-size { /* 23px @320 -> 41px, max reached at breakpoint/md: 23 + 18 * (100vw - 320px) / 448. `!important` beats the fluid preset. */ font-size: clamp(1.4375rem, 0.634rem + 4.018vw, 2.5625rem) !important; line-height: 1.171; /* 48/41 */ } /* The intro is a TOKEN GAP, found by measuring and not by reading. `body-large` is fluid 1rem -> 1.125rem (theme.json:258-265) and the frames draw 16 at 320 and 18 at BOTH 768 and 1920 — but WP's fluid engine ramps over a 768 -> 1600 VIEWPORT range, not to the breakpoint, so the preset is 16.83 at 768. Right at two of the three widths and 1.17px short at the third, which compounded to 4.7px over the three-line block and failed tolerance. Restated as the frame's own curve, same treatment as the heading clamp above and as DECISIONS F3/F4: when no token lands within tolerance at every breakpoint, a measured clamp beats a token that is right at one width and wrong at another. 16px @320 -> 18px @768, flat after: 16 + 2 * (100vw - 320px) / 448. The LINE-HEIGHT is a second gap in the same element and no single ratio expresses it: 20 at mobile (100/5 lines) and 24 at tablet and desktop (72/3 and 48/2), i.e. 1.25 then 1.3333. One ratio everywhere would overshoot mobile by 1.3px per line and 6.5px over five lines, which §18.3 says to check rather than wave through. Two steps, exact at all three measured widths. */ .tc-bulleted-list .tc-bulleted-list__intro { font-size: clamp(1rem, 0.9107rem + 0.4464vw, 1.125rem) !important; line-height: 1.25; /* 20/16 */ } /* The shared `.tc-eyebrow` kit paints its 20x4 bar from `currentcolor`. All three frames draw it at primary-600 (#123B9E, and the Figma variable on 43324:16325 is literally `color/primary/600`), and the inherited text colour on this white band is not that — so the family pins it, exactly as brand-grid and the media family do. The fix belongs in the kit; pinning here keeps it off every other consumer until that is a designer decision. */ .tc-bulleted-list .tc-eyebrow::before { background-color: var( --wp--custom--color--primary--600, #123b9e ); } /* ── Header -> grid ───────────────────────────────────────────────────────── 24 base, 48 from breakpoint/md. Frames: mobile 208 -> 232, tablet 172 -> 220, desktop 148 -> 196. 48 is a documented LITERAL, not a preset — no preset resolves to a flat 48 (`xxlarge` is 4rem/64, `xxxlarge` a 48->96 clamp). Same treatment as brand-grid's chrome->grid gap, the media band padding and the hero 5rem. (0,2,0) again, same blockGap contest as the header above. */ .tc-bulleted-list .tc-bulleted-list__grid { margin-block-start: var( --wp--preset--spacing--large, 1.5rem ); /* 24 */ } /* ── Grid tracks ──────────────────────────────────────────────────────────── 3 -> 2 -> 1, and all three are DRAWN, not defaulted: the desktop grid is 456x3 + 16x2 = 1400 (43324:16329), the tablet 336x2 + 16 = 688 (43887:32643), the mobile a single 288 column (43887:32672). 16px gap on both axes at every breakpoint. `1fr` tracks, not the frame's fixed 456/336 — the fixed widths and the containers agree exactly, so `1fr` reproduces them and survives a container that is not exactly 1400/688. Deliberately NOT core/columns: inside `.page-section` the design system rewrites every `.wp-block-columns` into `repeat(auto-fit, minmax(...))` with its own gap (core-blocks.css:117-126), so column widths and the 3->2->1 curve would both be out of this pattern's hands (environment-facts §14). A core/list emits a plain