/** * Section: Care category cards * * Ported from _mockups/industries.html `.in-grid`, and only `.in-grid`. * * Tokens only, no literals. No colour, no pixel size and no hardcoded font size * anywhere below. * * --------------------------------------------------------------------------- * THIS STYLESHEET IS SHORT ON PURPOSE, AND THAT IS THE POINT. * * The card itself is `.pasia-cat-card` in components.css, where it has TWO * consumers: this section and taxonomy-helper_category.php's related-category * row, which is the same card without the "Suits:" line. That template renders * no section stack at all, so `pasia_preload_section_styles()` enqueues nothing * for it and a copy of the card here would ship the category landing pages * bare. Inventory §0 and §F8. * * So components.css owns all of this and none of it is repeated below: * * .pasia-cat-card paper ground, hairline, radius, resting shadow, the * hover lift, `overflow: hidden` and the * `scroll-margin-top: calc(var(--header-h) + var(--s-4))` * that clears the sticky header, plus a gutter, when a * card is deep-linked. * .pasia-cat-card .media the 3 / 2 frame and the covering image. * … .body, h2, h3 the padded column and both heading levels, because * the level is derived from the page: h2 when the card * is the page's own content, h3 under a section * heading. * … .suits, .suits strong the hairline-topped "Suits:" line and its gold lead. * … .go, .go:hover the arrow link, its gap animation and the gold hover * that the whole card triggers. * * And in tokens.css: `.eyebrow`, `.container` and `.section`. In base.css: * `.head`, `.head h2`, `.head h2 em` and `.head p`. * * `.in-media.duo`, industries.html's two-photograph split on the Household * card, is deliberately not ported. That card covered two `helper_category` * terms at once in a mock-up that predates the taxonomy; the terms are separate * now and each carries its own photograph, so the split frame has nothing left * to do. Settled above the `photo` field in inc/data/fields-terms.php. * * --------------------------------------------------------------------------- * CONTRAST, MEASURED AND COMPOSITED, NOT ESTIMATED * * Every card sits on `--paper`; the band itself is `--mist`. Nothing in this * section paints a translucent fill, so no figure here needs compositing, and * that is stated rather than assumed. * * ON THE CARD (--paper #ffffff) * --ink #14231f 16.28:1 the category name * --ink-soft #45524d 8.18:1 the description and "Suits:" * --gold-deep #7e622e 5.72:1 the bold "Suits:" lead * --pine #16564b 8.51:1 the arrow link * --gold-deep #7e622e 5.72:1 that link, hovered * * ON THE BAND (--mist #f7f4ee) * --gold-deep #7e622e 5.21:1 the eyebrow and `h2 em` * --ink-soft #45524d 7.45:1 the lead paragraph * * All clear WCAG AA for normal text. NEVER a tint token as a text colour. * 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. The card carries `overflow: hidden`, so the ring on the * arrow link was checked rather than assumed: `.body` has `var(--s-5)` of * padding on every side and the ring is 3px of outline plus a 6px halo, so it * clears the clip with room to spare. * ------------------------------------------------------------------------- */ /* --- the grid ------------------------------------------------------------- Two across, fixed, which is industries.html's `.in-grid { 1fr 1fr }` exactly. THE COLUMN COUNT IS NOT DERIVED HERE, AND THAT IS THE CONSIDERED ANSWER rather than an omission. `helper-cards` does derive it, because index.html's `.c-helpers` is `auto-fit`, which literally means "collapse the empty tracks and fill the row", and a compact `.hcard` stretches gracefully. `.in-grid` is fixed, so a lone card sits at half the row, and this card is the reason why: it carries a 3 / 2 photograph, and stretched across a 1200px container that is a roughly 700px-tall image, which is a treatment nobody signed off. At the designed half-row width the card is the card in the mock-up. Each grid reproduces its own signed-off behaviour rather than a house rule applied to both. The gap is `--s-5` rather than the `--s-4` the helper grid uses, which is what the mock-up does: these are larger cards and they are given more air. The three-up variant on helper-category.html belongs to taxonomy-helper_category.php and is that template's own grid, not this one. */ .category-cards .category-cards-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); } /* --- the reveal wrapper --------------------------------------------------- ONE ELEMENT, TWO JOBS, SEPARATED. This carries `.reveal` and its delay; the `.pasia-cat-card` inside carries the component. It exists because `.pasia-cat-card` 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-delay: 0s, 0s, 0s` and no opacity transition at all: the fade was gone and the stagger was a no-op. That is a components.css problem shared with taxonomy-helper_category.php, 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 two cards of different lengths still square up and `.body { flex-grow: 1 }` still bottom-aligns the "Suits:" line. */ .category-cards .category-cards-item { display: grid; } /* --- breakpoints ---------------------------------------------------------- 860 is the canonical point in tokens.css where a multi-column band stacks, and it is where industries.html drops this grid to one column. */ @media (max-width: 860px) { .category-cards .category-cards-grid { grid-template-columns: minmax(0, 1fr); } }