/** * User Guides — TC2 User Manuals * * Frames: `User Manuals Desktop` 43943:11239, `User Manuals Tablet` * 43943:11008, `User Manuals Smartphone` 43943:10779 — all on * `Mockups - Client`. Sections `Frame 334` 43943:11242 (search), * `Frame 380` 43943:11263 (grid), `Frame 390` 43943:11445 (pagination). * * ⚠ ALL THREE BREAKPOINTS HAVE A BOUND COMP AND ALL THREE ARE THE SPEC. * * Most of this family derives below 1400 because no board exists — rep-directory * says so at the top of its own stylesheet. This pattern is the other case, the * product-grid case, and the difference is not cosmetic: THE SMARTPHONE CARD IS * A DIFFERENT COMPONENT. It is 288x134 with the thumbnail on the LEFT and the * text left-aligned, against 267x397 with the image on top and the text centred * at desktop. Deriving from desktop would have produced a ~460px-tall stacked * card and been wrong by 330px each, twenty times down the page. * * Breakpoints are literal `rem` in the conditions (CSS vars cannot be used in * @media conditions). Mobile-first, min-width only. * * Colour tokens are `--wp--custom--color----`, DOUBLE dash. * * ⚠ THIS CARD IS NOT THE rep-directory CARD, AND THE VALUES WERE RE-MEASURED * RATHER THAN CARRIED. T-FR-1 shipped an invisible card by reusing a fill that * had been pixel-verified on a different section, and its report's lesson is * that "pixel-verified" is a claim about one node. So every surface below was * scanned on a 1x export of THIS board (docs/design/user-guides/): * * card x=0 #dee2e6 -> x=1 #ffffff … x=265 #ffffff -> x=266 #dee2e6 -> x=267 #ffffff * y=0 #dee2e6 -> y=1 #ffffff … y=396 #dee2e6 -> y=397 #ffffff * * White fill with a 1px neutral-200 border, flat white outside it at every * distance sampled — no shadow. rep-directory's sales card is secondary-50 with * a secondary-100 border. They are different cards on different grounds. * * @package WordPress * @subpackage FTM_Theme */ .tc-user-guides { /* Chevrons for prev/next. Defined here, not consumed from a shared layer: there is no global `--tc-icon-*` layer in this theme (build-knowledge §6 — the contract layer is dead), so every pattern that needs one defines it on its own root. Same stroked shape blog-archive uses for the identical control, copied deliberately rather than re-drawn. */ --tc-icon-chevron-left: url("data:image/svg+xml;utf8,"); --tc-icon-chevron-right: url("data:image/svg+xml;utf8,"); --tc-icon-search: url("data:image/svg+xml;utf8,"); } /* ── ⚠ EVERY RULE BELOW IS SCOPED UNDER `.tc-user-guides`, AND IT HAS TO BE ── * * Not a style preference and not defensive habit. The first pass wrote single * class selectors and the cards came out 40px too tall at every breakpoint, * because WordPress emits: * * :root :where(p) { margin-bottom: var(--wp--preset--spacing--normal, 1rem) } * * `:where()` contributes ZERO specificity, so that selector is (0,1,0) — the * same as a bare `.tc-user-guides__type` — and it loads AFTER the pattern * stylesheet, so a tie goes to it. `margin: 0` was being applied and beaten, * which is why the shorthand looked correct in the file and wrong in the * browser. Found with `CSS.getMatchedStylesForNode`, not by reading. * * rep-directory.css records the same trap with the opposite polarity — there * `style.css` loads FIRST, so a tie lost the other way. Either direction, the * lesson is that a single-class rule in a pattern stylesheet is a coin toss. * Two classes make it (0,2,0) and the question does not arise. */ /* ── Section rhythm ───────────────────────────────────────────────────────── * * Measured off all three boards, as gaps between section bounds: * * hero -> search search -> grid grid -> rule rule -> footer * 320 24 32 40 48 * 768 48 64 56 112 * 1920 48 64 56 112 * * Tablet and desktop are IDENTICAL on all four. Only base steps down, so this * is a two-tier rhythm and not a three-tier one — worth stating because the * rest of the file does have three tiers. */ .tc-user-guides-section { padding-block: 1.5rem 3rem; /* 24 / 48 — board 43943:10779 */ } @media (min-width: 48rem) { /* --wp--custom--breakpoint--md */ .tc-user-guides-section { padding-block: 3rem 7rem; /* 48 / 112 — boards 43943:11008 and 11239 */ } } /* * The section's own top padding IS the hero -> search gap. Gary, Zoho * 2026-10-19: 48 at tablet and desktop. It was rendering 144 (96 at 390+24 = * 79.5 on phones) because the `ftm/page-section` wrapping this group also * takes style.css's hero-adjacent rhythm — `:root :is(.page-section-hero, …) * + .page-section` → `--ftps-space-section-rhythm`, 96 from 768, 55.5 at 390 — * stacked on top of the padding above. Zeroed here for this section only, so * the gap is the padding alone: 48, and 24 on phones. Every other page's hero * boundary is untouched. * * (0,6,0), to outrank that (0,5,0) rule on specificity rather than on this * sheet loading after style.css. Keyed on the group's class, not the * section's `layout`, because both pages build the section from content * (tools/create-user-guides-page.php, create-reference-guides-page.php) and * the class is the part this stylesheet owns. Bottom margin is not touched. */ :root .page-section.page-section-hero + .page-section:has(> .wp-block-group.tc-user-guides-section) { margin-block-start: 0; } /* ── Search ───────────────────────────────────────────────────────────────── * * `Frame 334` 43943:11242. Label 151x24 over a 665x48 input, gap 8, both on the * content's left edge — the input is NOT full width at desktop and that is the * board, not an oversight. At tablet and mobile it fills the container. */ .tc-user-guides .tc-user-guides__search { margin-block: 0 2rem; /* 32 — search -> grid at base */ } @media (min-width: 48rem) { /* --wp--custom--breakpoint--md */ .tc-user-guides .tc-user-guides__search { margin-block-end: 4rem; /* 64 */ } } .tc-user-guides .tc-user-guides__search-label { display: block; margin-block-end: var(--wp--preset--spacing--xsmall, 0.5rem); /* 8 */ /* Label/Large. The token binds line-height 20 in the mobile variable mode and 24 in the desktop one — same token, two modes — so the line box steps at md rather than the size doing so. */ font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--label-large, 0.9375rem); /* 15, flat */ font-weight: 500; line-height: 1.3333; /* 20 */ letter-spacing: 0.002em; color: var(--wp--custom--color--base--black, #0a205b); } @media (min-width: 48rem) { /* --wp--custom--breakpoint--md */ .tc-user-guides .tc-user-guides__search-label { line-height: 1.6; /* 24 */ } } /* * Full width at base and md. The 665 cap is a DESKTOP value and only applies at * lg — the tablet board draws the input across its whole 688 container, so a * cap written here without a breakpoint would render tablet 23px short of its * own comp. Measured, not assumed: the first pass did exactly that. */ .tc-user-guides .tc-user-guides__search-field { position: relative; } @media (min-width: 64rem) { /* --wp--custom--breakpoint--lg */ .tc-user-guides .tc-user-guides__search-field { max-inline-size: 41.5625rem; /* 665 — board 43943:11249 */ } } /* * ⚠ `max-inline-size` AND NOT `width`, ON THE FIELD AND NOT THE FORM. * * T-FR-1 measured its equivalent input at 1400 instead of 665 because the form * carried `alignwide` and WordPress emits `.alignwide { max-width: … !important }` * — the SAME property as `max-inline-size` in a horizontal writing mode, and * `!important` beats a plain declaration whatever the specificity. The width * lives on an inner element the alignment rule does not touch. Same trap, same * fix, recorded here so the next person does not re-find it. */ .tc-user-guides .tc-user-guides__search-input { box-sizing: border-box; inline-size: 100%; block-size: 3rem; /* 48 */ padding-inline: 2.75rem var(--wp--preset--spacing--normal, 1rem); /* 44 leaves room for the icon */ border: 1px solid var(--wp--custom--color--neutral--200, #dee2e6); border-radius: 2px; background-color: var(--wp--custom--color--neutral--50, #f8f9fa); /* ⚠ neutral-50 fill and neutral-200 border, and BOTH were wrong on T-FR-1's first pass — it shipped a white fill, and a `neutral-300` token whose own fallback was #dee2e6, so the border painted a step too dark whenever the custom property resolved and looked right only when it did not. Re-measured on THIS board rather than copied from that fix. */ font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--label-medium, 0.875rem); /* 14 */ line-height: 1.4286; /* 20 */ color: var(--wp--custom--color--base--black, #0a205b); } /* * The magnifier is the SUBMIT BUTTON, not decoration. * * The board draws the icon inside the field's leading edge and draws no button * at all. But this page has no JavaScript, so a form with no submit control is * usable only by someone who guesses that Enter works — and a keyboard user * tabbing through would find no way out of the field. Painting the button where * the board paints the icon satisfies both: it looks like the comp and it is a * real control with an accessible name. */ .tc-user-guides .tc-user-guides__search-submit { position: absolute; inset-block-start: 50%; inset-inline-start: var(--wp--preset--spacing--normal, 1rem); /* 16 */ display: flex; align-items: center; justify-content: center; inline-size: 1.25rem; /* 20 */ block-size: 1.25rem; padding: 0; border: 0; background: none; transform: translateY(-50%); cursor: pointer; } .tc-user-guides .tc-user-guides__search-submit::before { content: ""; inline-size: 100%; block-size: 100%; background-color: var(--wp--custom--color--base--black, #0a205b); /* stylelint-disable-next-line property-no-vendor-prefix -- mask needs the prefix pair; scoped exception per the header/media precedent */ -webkit-mask: var(--tc-icon-search) center / contain no-repeat; mask: var(--tc-icon-search) center / contain no-repeat; } .tc-user-guides .tc-user-guides__search-input:focus-visible, .tc-user-guides .tc-user-guides__search-submit:focus-visible { outline: 2px solid var(--wp--custom--color--secondary--600, #057db9); outline-offset: 2px; } /* ── Grid ─────────────────────────────────────────────────────────────────── * * 1 / 2 / 5 across, gap 16 at every breakpoint, off all three boards: * * 320 1 x 288 row pitch 150 (134 + 16) * 768 2 x 336, gap 16 (352 - 336) row pitch 482 (466 + 16) * 1920 5 x 267, gap 16 (283 - 267) row pitch 413 (397 + 16) * * FIVE at desktop, not four and not six. product-grid is 6/3/2 and * rep-directory is 4/2/1; this board is its own number and 1400 = 5x267 + 4x16 * confirms it arithmetically. */ .tc-user-guides .tc-user-guides__grid { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--normal, 1rem); /* 16 */ margin: 0; padding: 0; list-style: none; } @media (min-width: 48rem) { /* --wp--custom--breakpoint--md */ .tc-user-guides .tc-user-guides__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { /* --wp--custom--breakpoint--lg */ .tc-user-guides .tc-user-guides__grid { grid-template-columns: repeat(5, 1fr); } } /* ── Card ─────────────────────────────────────────────────────────────────── * * BASE IS A ROW, md AND UP IS A COLUMN. This is the whole reason the * smartphone board matters, so the base case is written first and completely * rather than being a set of overrides on a desktop rule. */ .tc-user-guides .tc-user-guides__card { display: flex; gap: var(--wp--preset--spacing--xsmall, 0.5rem); /* 8 — board: 116 - (8 + 100) */ align-items: flex-start; box-sizing: border-box; padding: var(--wp--preset--spacing--normal, 1rem) var(--wp--preset--spacing--xsmall, 0.5rem); /* 16 / 8 */ border: 1px solid var(--wp--custom--color--neutral--200, #dee2e6); border-radius: 2px; background-color: var(--wp--custom--color--base--white, #fff); } @media (min-width: 48rem) { /* --wp--custom--breakpoint--md */ .tc-user-guides .tc-user-guides__card { flex-direction: column; /* Asymmetric, and measured rather than tidied: the image sits at y=8 and the button's box ends at y=381 in a 397 card, so the board really does pad 8 at the top and 16 at the bottom. Normalising it would move every row of the grid. */ padding: var(--wp--preset--spacing--xsmall, 0.5rem) var(--wp--preset--spacing--xsmall, 0.5rem) var(--wp--preset--spacing--normal, 1rem); /* 8 / 8 / 16 */ } } /* ── Card media ───────────────────────────────────────────────────────────── * * ⚠ THIS BOX IS OFTEN EMPTY, AND THAT IS THE DESIGNED STATE, NOT A FAILURE. * * The image is the LINKED PRODUCT's featured image — a document cannot carry * one, the pod ships `supports_thumbnail = 0`. Measured across the 252 manuals * on 2026-08-28: 54 have a linked product with a photo and 197 have nothing. * SEVENTY-EIGHT PER CENT OF THIS PAGE RENDERS AN EMPTY BOX. * * The empty state is the box with NO inside it, following * includes/woocommerce.php:104, which records why an absent image beats a * placeholder file here: the placeholder is missing from uploads and the * request 302s to a host answering 401, so an would be a broken image * announcing the site title. * * ⚠ AND NO IMAGE RENDERS IN THIS CODESPACE AT ALL. All 54 resolve to real * attachment rows and NONE of the 54 files exists on disk (environment-facts * §15). So the two states are visually identical locally and only the markup * tells them apart. Do not diagnose an empty grid as a build defect, and do not * assert pixels — assert the presence or absence of the . */ .tc-user-guides .tc-user-guides__media { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; box-sizing: border-box; inline-size: 6.25rem; /* 100 — board 43943:10828 */ block-size: 6.25rem; overflow: hidden; } @media (min-width: 48rem) { /* --wp--custom--breakpoint--md */ .tc-user-guides .tc-user-guides__media { inline-size: 100%; /* Square, tracking the column rather than a fixed 320/251 — the two boards' values are just what 336 and 267 minus their padding come to, so the ratio is the spec and the pixel counts are consequences. */ block-size: auto; aspect-ratio: 1; } } /* * ⚠ THE TINT IS BORROWED FROM ANOTHER PAGE'S BOARD, AND THAT IS SAID OUT LOUD. * * None of the three User Manuals boards draws an empty image slot — every card * on them carries a photograph the designer supplied by hand, two of which are * for a product (`BTPRO-1000`) that does not exist in the catalogue. So the * design states NOTHING about what 197 of the 252 cards actually look like. * * Reserving the square and leaving it white was the first pass, and 197 blank * voids inside white cards read as a broken grid rather than as a missing * photo. `neutral-200` on `neutral-100` is the theme's existing answer to * exactly this question — product-detail.css's no-image fence, where the value * IS bound on the tablet and mobile boards for the empty gallery — so it is * reused here as the nearest thing the design system says. * * THAT IS A BORROWED VALUE, NOT A VERIFIED ONE FOR THIS BOARD, and the * distinction is the whole of T-FR-1's lesson: a value pixel-verified in one * context is a claim about that context. This is flagged in the report as a * designer question rather than presented as measured. * * A MODIFIER CLASS, NOT `:empty`. The div holds whitespace from the template * even with no image, so `:empty` would never match — it would look right in * the file and do nothing, which is the same failure shape as the max_num_pages * clamp in includes/user-guides.php. */ .tc-user-guides .tc-user-guides__media--empty { background-color: var(--wp--custom--color--neutral--200, #dee2e6); border: 1px solid var(--wp--custom--color--neutral--100, #e9ecef); border-radius: 2px; color: var(--wp--custom--color--neutral--500, #6c757d); /* the outline, 3.7:1 on the tile */ } /* ── The document outline in an empty box (I26, 2026-09-30) ───────────────── * * Gary read the bare tile as an empty card. The outline is a STAND-IN, on the * designer list: neither the theme nor the design system's 90 icons has a * document glyph. Sized as a share of the box so it scales with it — 40 in the * 100 phone box, about 100 in the 251-wide desktop one. */ .tc-user-guides .tc-user-guides__placeholder { inline-size: 40%; block-size: 40%; } .tc-user-guides .tc-user-guides__image { inline-size: 100%; block-size: 100%; /* `contain`, NOT `cover`. DECISIONS 2026-08-06: cropping a spec-sheet photograph of a piece of equipment destroys information. Same ruling the PDP gallery runs under, and the same reason — these are catalogue photos of hardware, not lifestyle imagery. */ object-fit: contain; } /* ── Gary's backup image in an empty box (I26, 2026-10-15) ────────────────── * * Supplied 2026-10-13, "for now" — replaces the outline above wherever the * theme file exists (render.php guards it; no file, the outline returns). * * FILLS THE BOX, LIKE A PRODUCT PHOTO — NOT THE BLOG CARD'S INSET MARK. The * blog card's backup (`post-card-placeholder.png`, 650x275) is a mark, wider * than its 440:289 panel, set at 56% x 50% of a tinted panel and contained. * This one is 800x800: the 1:1 shape of this box at product-photo size, so it * reads as a stand-in photo, and the blog card's proportion would shrink it * to a quarter of the box's area. Same rule as `.tc-user-guides__image`: * 100% of the box, `contain`, centred by the box's flex. With a 1:1 file in a * 1:1 box `contain` and `cover` paint the same pixels; `contain` is kept so a * different file can never be cropped or stretched. * * The grey tile and its border are the empty state's own surface, and a * product photo sits on the white card, so `--fallback` drops both. The box * is `border-box` and fixed-size (100 square below md, square to the column * above), so its size does not change. */ .tc-user-guides .tc-user-guides__media--fallback { background-color: transparent; border: 0; } .tc-user-guides .tc-user-guides__placeholder--image { inline-size: 100%; block-size: 100%; object-fit: contain; } /* ── Card body ────────────────────────────────────────────────────────────── * * Left-aligned at base, centred from md — both off the boards. The text block * insets 8 further than the image does at every breakpoint (board: image at * x=8, text at x=16 desktop / x=124 against a body at x=116 mobile). */ .tc-user-guides .tc-user-guides__body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; min-inline-size: 0; padding-inline: var(--wp--preset--spacing--xsmall, 0.5rem); /* 8 */ text-align: start; } @media (min-width: 48rem) { /* --wp--custom--breakpoint--md */ .tc-user-guides .tc-user-guides__body { align-items: center; inline-size: 100%; text-align: center; } } .tc-user-guides .tc-user-guides__type { margin: 0; /* Label/Medium. The document's OWN spelling reaches this element — the data carries both "Users Manual" and "User Manual" and the board draws both, so nothing here normalises case or wording. */ font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--label-medium, 0.875rem); /* 14 */ font-weight: 500; line-height: 1.4286; /* 20 */ color: var(--wp--custom--color--base--black, #0a205b); } .tc-user-guides .tc-user-guides__model { margin-block: 0.375rem 0; /* 6 — label -> model, off the board's 26 - 20 */ /* ⚠ Title/Small, WRITTEN FLAT BECAUSE THE FLUID PRESET LANDS WRONG AT MD. The boards bind Title/Small at 18/24 on smartphone and 20/28 on BOTH tablet and desktop — get_variable_defs on 43943:10827 and 43943:11058 says so directly. `--wp--preset--font-size--title-small` is fluid (theme.json `"fluid": true`), and measured it renders 18 at 320 — which is right by coincidence — 18.83 at 768 and 20 at 1920. The tablet value is a step short of the board and nothing in the curve fixes it, so the size is flat here and the breakpoint does the stepping. blog-archive.css reaches the same conclusion for label-small and says so in the same terms. */ font-family: var(--wp--preset--font-family--heading); font-size: 1.125rem; /* 18, flat */ font-weight: 700; line-height: 1.3333; /* 24 */ letter-spacing: -0.02em; color: var(--wp--custom--color--base--black, #0a205b); /* Long model numbers break rather than widen the track. `anywhere` and not `break-word` because these are unspaced strings like `HEA-40-1220/42` where there is no opportunity for the softer rule to take. */ overflow-wrap: anywhere; } @media (min-width: 48rem) { /* --wp--custom--breakpoint--md */ .tc-user-guides .tc-user-guides__model { font-size: 1.25rem; /* 20, flat — see the note above */ line-height: 1.4; /* 28 */ /* I26, 2026-09-30: the 24 that used to be the button's top margin, so the button can take `auto` (below) and keep this as its minimum. */ margin-block-end: var(--wp--preset--spacing--large, 1.5rem); /* 24 */ /* A THREE-LINE CLAMP, VISUAL ONLY — the full title stays in the DOM and in the button's aria-label. Same approach as the product card (#296, shop-archive.css I17), which clamps the title and pins the button. The longest reference title, "Typical Cable Attenuation Chart in db/100 feet @ 68° F (20° C)", runs past three lines at 1440 and is two at 768 (measured 2026-09-30), so today only desktop clips. The model is a bare

with no inline-block child, so line-clamp applies to it directly — the trap #296 hit on its link does not arise. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } } /* * The button is pushed to the bottom so cards in a row end level. * * ⚠ CORRECTED 2026-09-30 (I26): THIS PARAGRAPH WAS TRUE OF NO SHIPPED RULE. * The md block below set a fixed 24 top margin, so every button sat 24 under * its own title and a wrapped title pushed it down — the misalignment Gary * reported. The md block now sets `auto`, and the 24 moved to the title's * bottom margin as the minimum. Below md each card is its own row, so there is * nothing to align and the 16 stands. * * Cards are equal-height per row via the grid, not fixed-height: the boards' * 397 / 466 / 134 are consequences of one-line titles, and a two-line model * must grow the card rather than overflow it. `margin-block-start: auto` is * what keeps the CTAs on one baseline once that happens. */ .tc-user-guides .tc-user-guides__cta { display: flex; align-items: center; justify-content: center; box-sizing: border-box; block-size: 2.25rem; /* 36 */ margin-block-start: var(--wp--preset--spacing--normal, 1rem); /* 16 — model -> button, base */ padding-inline: var(--wp--preset--spacing--normal, 1rem); /* 16 */ border-radius: 2px; background-color: var(--wp--custom--color--secondary--600, #057db9); color: var(--wp--custom--color--base--white, #fff); text-decoration: none; /* secondary-600 against white at 14px clears AA at 4.53:1. The old "CTAs at 700" rule is withdrawn — reports/secondary-600-ada.md, DECISIONS 2026-08-06. */ font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--label-medium, 0.875rem); /* 14 */ font-weight: 500; /* G01, corrected to 500 on 2026-09-15 */ line-height: 1.4286; /* 20 */ } @media (min-width: 48rem) { /* --wp--custom--breakpoint--md */ .tc-user-guides .tc-user-guides__cta { inline-size: 100%; margin-block-start: auto; /* pinned; the board's 24 (78 - 54) is the model's margin-block-end now */ } } .tc-user-guides .tc-user-guides__cta:hover, .tc-user-guides .tc-user-guides__cta:focus { color: var(--wp--custom--color--base--white, #fff); text-decoration: underline; } .tc-user-guides .tc-user-guides__cta:focus-visible { outline: 2px solid var(--wp--custom--color--base--black, #0a205b); outline-offset: 2px; } /* ── Empty state ─────────────────────────────────────────────────────────── */ .tc-user-guides .tc-user-guides__empty { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--body, 1rem); color: var(--wp--custom--color--base--black, #0a205b); } /* ── Pagination ───────────────────────────────────────────────────────────── * * ⚠ THIS IS THE SAME COMPONENT AS THE BLOG AND SHOP ARCHIVES, AND THE RULES * BELOW ARE DELIBERATELY THE SAME RULES. * * `patterns/blog-archive/blog-archive.css:213-337` styles `core/query-pagination` * for `43869:19275`; this styles `paginate_links()` for `43943:11445`. The two * boards draw one control, and every value below was re-scanned on THIS board * and came back identical: * * frame top edge y=0 #dee2e6 <- the rule above the row * ordinary cell x=512 #dee2e6, 40 wide * current cell x=560..561 and 598..599 #057db9 <- 2px, and no #dee2e6 * ellipsis cell x=744..800 flat #ffffff <- no border at all * * They are two renderings of one component. CHANGE BOTH OR NEITHER. They are * not shared because the class contracts differ — core's block markup there, * core's generic `.page-numbers` contract here — and faking the block's class * names from a block that is not that block would be worse than this * duplication. */ .tc-user-guides .tc-user-guides__pagination { display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--normal, 1rem); /* 16 — rule -> count -> row */ margin-block-start: 2.5rem; /* 40 — grid -> rule at base */ padding-block-start: var(--wp--preset--spacing--large, 1.5rem); /* 24 */ border-block-start: 1px solid var(--wp--custom--color--neutral--200, #dee2e6); } @media (min-width: 48rem) { /* --wp--custom--breakpoint--md */ .tc-user-guides .tc-user-guides__pagination { margin-block-start: 3.5rem; /* 56 */ } } .tc-user-guides .tc-user-guides__page-count { margin: 0; text-align: center; /* Literals: the board binds Label/Small at weight 500, and `caption` — the only role on label-small — is 400. Nothing in the system fits. Same finding blog-archive.css records for the same line. */ font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--label-small, 0.75rem); /* 12, flat */ font-weight: 500; line-height: 1.3333; /* 16 */ letter-spacing: 0.002em; color: var(--wp--custom--color--base--black, #0a205b); } .tc-user-guides .tc-user-guides__pages { display: flex; gap: var(--wp--preset--spacing--xsmall, 0.5rem); /* 8 */ align-items: center; justify-content: center; flex-wrap: wrap; } /* * One box. The number cells, the ellipsis and the two arrows are the same * 32x32 (40x40 from md) so they sit on one baseline; the ellipsis then drops * its border and the arrows swap their text for a chevron. */ .tc-user-guides .tc-user-guides__pages .page-numbers { display: flex; align-items: center; justify-content: center; box-sizing: border-box; inline-size: 2rem; /* 32 — board 43943:10783 */ block-size: 2rem; border: 1px solid var(--wp--custom--color--neutral--200, #dee2e6); border-radius: 2px; color: var(--wp--custom--color--base--black, #0a205b); text-decoration: none; /* Label/Extra Large, bold. `label-x-large` is emitted as a preset and no `.ftm-type-*` role consumes it — blog-archive found the same and said so — so size comes from the preset and the rest are literals. */ font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--label-x-large, 1rem); /* 16, flat */ font-weight: 700; line-height: 1.5; /* 24 */ letter-spacing: 0.002em; } @media (min-width: 48rem) { /* --wp--custom--breakpoint--md */ .tc-user-guides .tc-user-guides__pages .page-numbers { inline-size: 2.5rem; /* 40 */ block-size: 2.5rem; } } .tc-user-guides .tc-user-guides__pages .page-numbers.current { border: 2px solid var(--wp--custom--color--secondary--600, #057db9); color: var(--wp--custom--color--secondary--600, #057db9); } /* The only cell on the board with no border — scanned at x=744..800, flat white where every sibling shows #dee2e6 at its edges. */ .tc-user-guides .tc-user-guides__pages .page-numbers.dots { border-color: transparent; } /* * Icon-only arrows. The links carry real text ("Previous page" / "Next page") * because that text is the control's accessible name, so it is pushed out of * the box rather than removed. `display: none` or `font-size: 0` would leave * the two controls unnamed. */ .tc-user-guides .tc-user-guides__pages .prev, .tc-user-guides .tc-user-guides__pages .next { position: relative; overflow: hidden; text-indent: 110%; white-space: nowrap; } .tc-user-guides .tc-user-guides__pages .prev::before, .tc-user-guides .tc-user-guides__pages .next::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 1.25rem; /* 20 */ block-size: 1.25rem; transform: translate(-50%, -50%); background-color: var(--wp--custom--color--base--black, #0a205b); } .tc-user-guides .tc-user-guides__pages .prev::before { /* stylelint-disable-next-line property-no-vendor-prefix -- mask needs the prefix pair; scoped exception per the header/media precedent */ -webkit-mask: var(--tc-icon-chevron-left) center / contain no-repeat; mask: var(--tc-icon-chevron-left) center / contain no-repeat; } .tc-user-guides .tc-user-guides__pages .next::before { /* stylelint-disable-next-line property-no-vendor-prefix -- as above */ -webkit-mask: var(--tc-icon-chevron-right) center / contain no-repeat; mask: var(--tc-icon-chevron-right) center / contain no-repeat; } .tc-user-guides .tc-user-guides__pages a:focus-visible { outline: 2px solid var(--wp--custom--color--secondary--600, #057db9); outline-offset: 2px; } /* ── Phone tap targets (QA batch F, 2026-09-28) ────────────────────────────── * * The batch's sweep of the draft page at 360 and 390 found three controls that * owned no 44×44 square: the magnifier submit (20×20), every Download button * (99×36) and the pager (32×32 cells, 8 apart). * * - SUBMIT: its box reaches 16 left to the field's edge and 8 right, which is * exactly the field's 44px icon zone (`padding-inline-start: 2.75rem`), and * 44 tall inside the 48 field. A tap on the icon zone searches; the text * area still focuses the field, which keeps far more than 44 of its own. * - DOWNLOAD: 4px above and below, transparent. * - PAGER: the compact row (render.php) below md, drawn with the Shop * Archive's compact chrome: 44×44 cells, 4px gaps, a 16-wide borderless * ellipsis, chevron arrows whose text stays the accessible name, and the * fill rule's 320 fallback. VISIBLE, phone only: D-QA-1, the same change * the shop and search pagers made. The full row is unchanged from md up. * ────────────────────────────────────────────────────────────────────────── */ .tc-user-guides .tc-user-guides__pages--compact { display: none; } @media (max-width: 47.9375rem) { .tc-user-guides .tc-user-guides__search-submit::after { content: ""; position: absolute; inset-block: -12px; inset-inline: -16px -8px; } .tc-user-guides .tc-user-guides__cta { position: relative; } .tc-user-guides .tc-user-guides__cta::after { content: ""; position: absolute; inset-block: min(0px, calc(50% - 22px)); inset-inline: 0; } .tc-user-guides .tc-user-guides__pages--full { display: none; } .tc-user-guides .tc-user-guides__pages--compact { display: flex; flex-wrap: nowrap; gap: 4px; } .tc-user-guides .tc-user-guides__pages--compact .page-numbers { flex-shrink: 0; inline-size: 44px; block-size: 44px; } .tc-user-guides .tc-user-guides__pages--compact .page-numbers.dots { inline-size: 16px; } /* The fill rule, as on the Shop Archive and search: the page from 360, the ellipsis below it; gaps 2 on a seven-cell row. */ .tc-user-guides .tc-user-guides__pages--compact .dots--fill { display: none; } .tc-user-guides .tc-user-guides__pages--compact:has(.page-numbers--fill ~ .page-numbers--fill) { gap: 2px; } } @media (max-width: 22.4375rem) { .tc-user-guides .tc-user-guides__pages--compact .page-numbers--fill { display: none; } .tc-user-guides .tc-user-guides__pages--compact .dots--fill { display: flex; } }