/** * Section: Helper cards * * Ported from _mockups/helper-pooling.html `.pl-pool`, which renders the * canonical `.hcard` from _mockups/css/site.css. _mockups/index.html's * `.c-helper` is a private earlier copy of the same card and is drift * (inventory §E1), so nothing from its style block is reproduced here. * * Tokens only, no literals. No colour, no pixel size and no hardcoded font size * anywhere below. * * --------------------------------------------------------------------------- * WHAT IS DELIBERATELY NOT HERE, because components.css already owns it and two * owners for one rule is how the button system broke in Phase 0: * * .hcard the paper ground, hairline, radius, resting shadow, the * hover lift, `.top`, the 60px `.avatar` and its gold ring, * `.who h3`, `.who .sub`, `.chips`, `.foot` with its * `margin-top: auto`, and now the profile button * (`.hcard .btn` and `.hcard .foot ~ .btn`). Labelled * "canonical, reused site-wide" and shared with * archive-helper.php, taxonomy-helper_category.php and * single-helper.php, none of which renders a section stack, * so a copy of it here would ship those three pages * unstyled. * .sep the inline `·` between facts. One global default in * components.css, with `.crumbs` documented there as the * one exception. * .note the small grey line under the cards, which this * stylesheet only positions. * .grid-auto not used. The column count here is derived from the * number of published helpers, see below. * * And in tokens.css, which loads first and owns the primitives: * * .btn .btn-ghost the outlined button, both on the card and under the grid. * .tag the chips, including `.tag--active` (gold, "available") * and `.tag--new` (green, "newly listed"). Which one a card * gets is derived from the stored `availability_status`, * never from a field. * .price the hiring-route chip in the card footer. It is the ROUTE * and never a salary: `salary_range` exists on the post type * and no signed-off mock-up puts money on a card. * .eyebrow including its gold rule, and `.head` / `.head h2 em` in * base.css. * * --------------------------------------------------------------------------- * THE THREE SHARED RULES THAT USED TO BE SCOPED HERE HAVE MOVED, AND MUST NOT * COME BACK. * * `.hcard .btn`, `.hcard .foot ~ .btn` and `.hcard .sep` are now in * components.css, unscoped, beside the rest of `.hcard` and beside the * separator's one global default. They were scoped to `.helper-cards` here, * which reached one of four consumers: the mock-ups declare the button rule * four times, identically, and three of the four are hand-built templates that * render NO section stack, so a section stylesheet is never enqueued for them. * * helper-pooling.html:89 `.pl-pool .hcard .btn` -> this section * find-a-helper.html:84 `.fh-grid .hcard .btn` -> archive-helper.php * helper-category.html:139 `.hc-grid .hcard .btn` -> taxonomy-helper_category.php * helper-profile.html:108 `.hp-similar .hcard .btn`-> single-helper.php * * parts/helper-card.php emits the markup for all four, and while the rules sat * here those three pages shipped the profile button with no width, no centring * and no `--text-sm`, and their `·` separators collapsed. Inventory §0 and §F8. * If you find yourself needing one of them scoped again, the answer is a fourth * consumer for the shared rule, not a second owner of it. * * --------------------------------------------------------------------------- * CONTRAST, MEASURED AND COMPOSITED, NOT ESTIMATED * * Every card sits on `--paper`; the band itself is `--mist`. Translucent fills * are measured AS COMPOSITED over the ground they actually land on, because a * figure taken against a bare token is not a measurement of the component. * * ON THE CARD (--paper #ffffff) * --ink #14231f 16.28:1 the helper's name * --ink-faint #5f6b66 5.55:1 the sub line and the reference * --forest #0e4038 11.61:1 the outlined button's label * --forest on forest-tint-05 10.64:1 that button, hovered * --gold-deep on gold-tint-20 4.74:1 `.tag--active`, composited * --price #1c6b4a 6.46:1 `.tag--new` and `.price` * --ink-soft on --surface-2 6.81:1 the plain `.tag` * * ON THE BAND (--mist #f7f4ee) * --gold-deep #7e622e 5.21:1 the eyebrow and `h2 em` * --ink-soft #45524d 7.45:1 the lead and the note * --forest #0e4038 10.57:1 the footer button * * All clear WCAG AA for normal text. The one figure that does not is * `--gold-deep` on gold-tint-20 composited over MIST, 4.39:1, and it is not * reachable from this section: `.tag--active` only ever appears inside the * card, whose ground is paper. NEVER a tint token as a text colour here. * AGENTS.md §1.7. * * The focus ring is `--gold-deep` with a `--gold-tint-20` halo from tokens.css, * 5.72:1 on the card and 5.21:1 on the band. Nothing in this section sets * `overflow: hidden`, so no ring is clipped. * ------------------------------------------------------------------------- */ /* --- the grid ------------------------------------------------------------- The column count is DERIVED FROM THE CONTENT and arrives as `helper-cards-cols-1` through `-3` from the renderer, so one or two published helpers fill the row instead of leaving a hole beside a third of a grid. It is never a field: the client does not choose this, the number of published helpers does. THREE ACROSS IS WHAT BOTH SIGNED-OFF PAGES RENDER, and the ceiling here was four, which was the port defect. It rested on the claim that `.grid-auto` "resolves to FOUR tracks in the 1200px container". That arithmetic is wrong: `.container` is 1200px of BOX and its `--gutter` is 4rem a side at 1440, so the track is 1072px, not 1200px. Four cards at the `.hcard` floor of 280px plus three `--s-4` gaps need 1192px; three plus two gaps need 888px. `repeat(auto-fill, minmax(280px, 1fr))` therefore resolves to THREE. Measured in Chromium at 1440 against the signed-off files rather than argued from them: helper-pooling.html `.pl-pool .grid-auto` 3 tracks at 341.3px, its four cards over TWO rows, 3 + 1. index.html `.c-helpers` 3 tracks at 346.7px, on a narrower `--s-3` gap than this grid uses. That page's seed says "Four cards is the design" and it is right: four is a count of CARDS, which is the `limit` field. It was read as a count of COLUMNS. What four cost was not cosmetic, and no width sweep catches it. A fourth track squeezes the card to 250px, 30px under the width the component was drawn at, and the `.foot` then runs out of room: measured on /helper-pooling/ at 1440, `.ref` is 104.6px and the route chip 96px against a 200px content box. The chip wrapped on three of the four cards. It is a flex item, so it is blockified into ONE box two lines tall rather than two inline fragments, and its `linear-gradient(transparent 62%, ...)` underline is painted once over the pair: the rule lands between the two lines instead of under each. At 341.3px every route chip measures one line and the underline sits correctly. components.css reached this same conclusion for this same card at this same container width, in the note above `.hc-grid`, and departed from helper-category.html's four across for it. `.fh-grid` on archive-helper.php and `.hc-grid` on taxonomy-helper_category.php both build on `.grid-auto` and so already honour the 280px floor. This section was the one consumer of four that did not; the change brings it into line rather than widening a selector. Deriving the count instead of copying `.grid-auto` outright is the one deliberate departure, and it is why `auto-fill` is not used: it keeps its empty tracks, so two published helpers sit in two tracks of three. `auto-fit` makes the track count depend on container width rather than on a breakpoint, which is not what the rest of this design does. */ .helper-cards .helper-cards-grid { display: grid; gap: var(--s-4); } .helper-cards .helper-cards-cols-1 { grid-template-columns: minmax(0, 1fr); } .helper-cards .helper-cards-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .helper-cards .helper-cards-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* --- the reveal wrapper --------------------------------------------------- ONE ELEMENT, TWO JOBS, SEPARATED. This carries `.reveal` and its delay; the `.hcard` inside carries the component. It exists because `.hcard` in components.css declares its hover animation as a `transition` SHORTHAND, components.css loads after base.css, and a shorthand resets every longhand it does not name. With `.reveal` on the card itself Chrome computed `transition-property: border-color, box-shadow, transform` and `transition-delay: 0s, 0s, 0s`: the fade was gone and the stagger was a no-op. That is a components.css problem with four consumers, three of them Phase 4 templates whose mock-up markup is already `
`, so it is reported rather than patched from here. `display: grid` with one child makes the card stretch to the row height, the way it did as a grid item, so the footers still line up. THE MEASUREMENT ABOVE IS NOW HISTORY, AND THE WRAPPER IS NOT. base.css has since rebuilt `.reveal` as an ANIMATION rather than a transition, so `.hcard`'s `transition` shorthand no longer eats it and parts/helper-card.php's own `reveal` argument is safe again. The wrapper is kept because it is layout-neutral and because the reveal and the hover lift still want separate `transform` owners. Do not re-derive the transition argument from this block: check `.reveal` in base.css first. */ .helper-cards .helper-cards-item { display: grid; } /* --- the note and the button under the grid ------------------------------- `.note` carries the client's line about photographs and consent. The measure matches `.head` so the two read as one column. */ .helper-cards .helper-cards-note { max-width: 64ch; margin-top: var(--s-4); } .helper-cards .helper-cards-cta { display: flex; justify-content: center; margin-top: var(--s-5); } /* --- breakpoints ---------------------------------------------------------- THE MOCK-UP'S OWN, not this theme's house pair. `.hc-grid` in helper-category.html steps to two columns at 1024 and to one at 620, and the mock-up is the signed-off artefact. This grid used 860/620, which held three columns down to 861px on a page whose design had already dropped to two. 620 is unchanged and agrees with both. KNOWN DELTA, LEFT AS IT STANDS. At a 1024 viewport the container gives 921.6px, and `.grid-auto` keeps THREE tracks there at 291.2px, which is still above the 280px floor: measured, `.pl-pool` is 3 across at 1024 and `.c-helpers` is too. This grid drops to two at 448.8px instead, which is roomier than the design rather than tighter, and the 1024 step is a recorded decision taken from helper-category.html. Changing it is a separate question from the card width above and is not answered here. */ @media (max-width: 1024px) { .helper-cards .helper-cards-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .helper-cards .helper-cards-cols-2, .helper-cards .helper-cards-cols-3 { grid-template-columns: minmax(0, 1fr); } }