) — same scale + dim as the other buttons. */ @media (hover: none), (pointer: coarse) { .wp-block-query-pagination a.page-numbers:active, a.wp-block-query-pagination-previous:active, a.wp-block-query-pagination-next:active { background-color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); transform: scale(0.94); filter: brightness(0.92); } } /* Ellipsis: bare, no box. */ .wp-block-query-pagination .page-numbers.dots { border-color: transparent; background: transparent; min-width: 0; } /* ========================================================================== 5. CARDS ========================================================================== */ .is-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; border-radius: var(--wp--custom--radius--lg); background: var(--mks-card-surface); border: 3px solid var(--mks-card-border); /* Promote to its own compositor layer so the hover/press transforms animate without re-rasterising. */ transform: translateZ(0); backface-visibility: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease; } /* -------------------------------------------------------------------------- 5a. EQUAL-HEIGHT FILL -------------------------------------------------------------------------- Grid cards in a row are already equal height; this stretches each card's content group to fill its card, so the slack a short title leaves sits below the excerpt — where the JS clamp (excerpt-clamp.js) measures it and fills it with extra lines. Row cards are excluded: single column, nothing to fill. Gated on .mks-clamp-fill, which inc/assets.php adds to only when MKS_CLAMP_FILL is on and a clamp script is loaded — without the script the stretch would just move the dead space, not remove it. Do NOT give this group `display:flex`. It's a constrained-layout group, so core sets margin-inline:auto on every child; inside a flex column those margins become horizontal centring — the text centres and the

and wraps every post in its own

. FAILSAFE: drop 'row' from patterns/feed-row.php and all of this stops matching; the card reverts to the plain stacked card in a 2-up grid. -------------------------------------------------------------------------- */ .wp-block-post-template.is-layout-grid:has(.is-card--row) { grid-template-columns: 1fr; } /* * Below the breakpoint there is deliberately NO shape rule — the card falls * through to the plain stacked card, so it matches a grid card exactly. * * It is capped and centred, though. The column rule above holds this feed to one * card per row at every width, so an uncapped stacked card would span the full * 1100px alignwide container and its 16:9 image would be 619px tall — the * oversized-single-card problem from before any of this. The cap holds it to * 371px. * * If two-up would suit this band better than a capped single column, that is * exactly what .is-card--adaptive does: set $mks_card_variant to 'adaptive' in * patterns/feed-row.php and delete this whole section, since search would then be * the category feed. */ .is-card--row { max-width: var(--wp--style--global--content-size, 660px); margin-inline: auto; } /* -------------------------------------------------------------------------- 5f. ROW RESERVATIONS (both row shapes) -------------------------------------------------------------------------- A row card's height IS its text column's height — there is no grid row to equalise against, and below MKS_CARD_ROW_MIN the image stretches to whatever that height turns out to be. So both variable-height elements are reserved at their full budget, off the same custom properties the clamps use: change a budget and the reservations follow. Applied to .is-card--row at every width, and to .is-card--adaptive only in its row state (the min-width block below) — a stacked adaptive card is in a grid row and has MKS_CLAMP_FILL to level it. -------------------------------------------------------------------------- */ /* * Title: reserve the budget, and bottom-align inside it so a 1-line title sits * against the date with the slack ABOVE it, tucked under the card's top padding * where it reads as spacing. Reserving without aligning leaves the hole below the * title, between it and the date, where it reads as a mistake. * * The flex container is on the h2 only; its single child is the that carries * -webkit-line-clamp. A flex item's display is blockified, and -webkit-box is * already block-level, so the clamp survives — worth a look on iOS if titles ever * stop truncating. */ @media (min-width: 1140px) { .is-card--row .wp-block-post-title { min-height: calc(var(--mks-card-title-lines, 2) * 1.2em); display: flex; flex-direction: column; justify-content: flex-end; } .is-card--row .wp-block-post-excerpt { min-height: calc(var(--mks-card-excerpt-lines, 5) * 1.6em); } } /* * Excerpt: reserve the budget too. The excerpt is display:-webkit-box for the CSS * clamp, so an empty one is zero pixels tall, which collapsed the whole card. * 1.6 is the root line-height from theme.json; em resolves against the excerpt's * own font size, so this tracks the type scale. * * Only a floor. A JS-clamped excerpt (.is-js-clamped) is block again and taller * than this whenever MKS_CLAMP_FILL gave it extra lines, so nothing is capped. * * Both reservations are scoped to the ROW state for .is-card--row: stacked, it is * one card per row with nothing to level against, so reserving there would only * reintroduce the dead space §5g exists to remove. */ /* -------------------------------------------------------------------------- 5g. LEADING TRIM (both row shapes) -------------------------------------------------------------------------- Recovers ~21px from the text column without touching a budget, a font size or the column split. Every line of text sits centred in a box of font-size x line-height, so the leftover splits evenly above and below the glyphs. Inside a paragraph that is the line spacing and it earns its place; at the OUTER edge of a block it is dead height that reads as padding: title 24px x 1.2 = 28.8px box -> 2.4px per edge date 14px x 1.6 = 22.4px box -> 4.2px per edge excerpt 18px x 1.6 = 28.8px box -> 5.4px per edge The date is the worst of the three relative to its size: a 14px line that never wraps, carrying body leading it has no use for, spending 8.4px on nothing. It gets its line-height cut rather than a negative margin, since there is no second line for the spacing to matter to. The other two get negative block margins pulling the first and last lines back by exactly their half-leading. The em unit tracks each element's own font size, so the trims stay correct if the type scale moves. Values are half of (line-height - 1): 1.2 -> 0.1em, 1.6 -> 0.3em. -------------------------------------------------------------------------- */ /* Title is the first child, so the layout has already zeroed its margin-block-start and there is no gap to preserve. */ .is-card--row .wp-block-post-title, .is-card--adaptive .wp-block-post-title { margin-block-start: -0.1em; margin-block-end: -0.1em; } .is-card--row .wp-block-post-date, .is-card--adaptive .wp-block-post-date { line-height: 1.2; } /* The excerpt's margin-block-start IS the blockGap from partials/card.php, so it has to be restated minus the trim — setting a bare negative value here would out-specify the layout rule and drop the gap entirely. margin-block-end was already zero (last child), so it can take the trim directly. */ .is-card--row .wp-block-post-excerpt, .is-card--adaptive .wp-block-post-excerpt { margin-block-start: calc(var(--wp--preset--spacing--20) - 0.3em); margin-block-end: -0.3em; } /* * ROW STATE (>= MKS_CARD_ROW_MIN, card always 1100px wide). * * The same geometry as §5d's row state, so a search result and a category row are * the same object. The cap above is lifted here; at this width the card uses the * full alignwide container. * * align-self:center, NOT stretch. Stretching the figure to the card height is what * made every earlier version crop: object-fit:cover absorbs the mismatch by * cutting the image's sides, and the mismatch grows as the text grows. Unstretched * the figure is its own ratio box and cannot crop at all, and centring splits what * little surface is left over evenly above and below it. * * .wp-block-group prefix on the image rule is for specificity, not clarity: the * image carries alignfull, and core's .is-layout-constrained > .alignfull is * itself 0-2-0. The extra class wins regardless of stylesheet order. */ @media (min-width: 1140px) { .is-card--row { max-width: none; margin-inline: 0; flex-direction: row; } .wp-block-group.is-card--row > .wp-block-post-featured-image { flex: 0 0 47%; align-self: center; margin: 0; } /* min-width:0 lets a long title wrap instead of pushing the image column. */ .is-card--row > .wp-block-group { flex: 1 1 auto; min-width: 0; } } /* * Hover / keyboard-focus lift (desktop). Both :hover and :focus-within are * gated behind (hover:hover): tapping a real link inside the card on a * touchscreen moves focus onto it, which would satisfy :focus-within and show * the hover lift on the press. On a hover-capable device, focus moving without * a tap means keyboard navigation, where the lift is wanted. Touch feedback is * handled by .is-card--pressed below. */ @media (hover: hover) { .is-card--hover:hover, .is-card--hover:focus-within { transform: translate3d(0, -3px, 0); border-color: var(--wp--preset--color--primary); } .is-card--hover:hover { box-shadow: 0 10px 26px rgba(33, 28, 28, 0.12); } .is-card--hover:hover .wp-block-post-title a { color: var(--wp--preset--color--primary); } } /* * Touch press feedback. Driven by the JS-toggled .is-card--pressed class * (card.js), not CSS :active, because iOS doesn't reliably match :active on a * non-interactive
. * * The feel is asymmetric: the press DOWN is fast and linear (the finger is in * contact, so it should track instantly), while the release SPRINGS back with a * slight overshoot past 1.0 — the cubic-bezier below ends above 1, giving a * small tactile "pop" instead of a flat settle. The release curve is set on the * base .is-card--hover (used when .is-card--pressed is removed); the pressed * rule overrides it with the quick press-down timing. */ @media (hover: none), (pointer: coarse) { .is-card--hover { transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease; } .is-card--hover.is-card--pressed { transform: scale(0.97); border-color: var(--wp--preset--color--primary); box-shadow: 0 6px 18px rgba(33, 28, 28, 0.16); filter: brightness(0.97); transition: transform 0.08s ease-out, box-shadow 0.1s ease, border-color 0.1s ease, filter 0.1s ease; } .is-card--hover.is-card--pressed .wp-block-post-title a { color: var(--wp--preset--color--primary); } } /* Respect reduced-motion: keep the colour/shadow feedback, drop the scale and the spring so nothing scales or bounces under the finger. */ @media (prefers-reduced-motion: reduce) { .is-card--hover, .is-card--hover.is-card--pressed, .mks-topnav .wp-block-navigation__responsive-container .wp-block-navigation-item__content, .mks-topnav .wp-block-navigation__responsive-container .wp-block-navigation-item__content:active, .mks-topnav .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-open:active, .mks-topnav .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close:active, .mks-topnav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-icon:active { transform: none !important; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } } /* The clickable surface. touch-action:manipulation drops double-tap-zoom and other gesture ambiguity over the card (notably the image). */ .is-card--clickable { position: relative; cursor: pointer; touch-action: manipulation; } .is-card--clickable .wp-block-post-featured-image, .is-card--clickable .wp-block-post-featured-image a, .is-card--clickable .wp-block-post-featured-image img { touch-action: manipulation; } /* Hold the card image still — no core/theme zoom or fade on it. */ .is-card .wp-block-post-featured-image img { transform: none !important; transition: none !important; } /* -------------------------------------------------------------------------- 5c. FEED LIST (mks/feed-list) -------------------------------------------------------------------------- Image-free row: date pill, title, primary rule. No image column, so none of the ratio/height negotiation in §5 applies here — a row is as tall as its title and nothing else. -------------------------------------------------------------------------- */ /* The rule between rows. A border rather than a separator block: the post-template's blockGap is 0, so rows sit flush and each row owns the line below it. The last row keeps its line, closing the list. */ .mks-list-row { border-bottom: 2px solid var(--wp--preset--color--primary); } /* Date pill. min-width holds the column even for a 1-digit day, so titles line up down the list; tabular-nums stops the digits from shifting width. */ .mks-list-row .mks-list-date { flex: 0 0 auto; min-width: 6.5rem; padding: 0.15rem 0.5rem; border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); text-align: center; font-variant-numeric: tabular-nums; } /* Headings carry their own vertical margins, which would break the flex row's centring. min-width:0 lets a long title wrap rather than push the pill. */ .mks-list-row .wp-block-post-title { margin: 0; min-width: 0; } /* Same hover language as the cards: the title takes the primary colour. Gated on (hover:hover) so a tap on a touchscreen doesn't leave it stuck. */ @media (hover: hover) { .mks-list-row:hover .wp-block-post-title a { color: var(--wp--preset--color--primary); } } /* A 6.5rem pill plus a medium title runs out of room around 600px; stack the pill above the title and let it shrink to its content. */ @media (max-width: 600px) { .mks-list-row { flex-wrap: wrap; } .mks-list-row .mks-list-date { min-width: 0; } } /* ========================================================================== 6. PAGE HEADINGS (page / archive / search) ========================================================================== */ .mks-page-head { text-align: center; margin: 0; } .mks-page-head > *, .mks-page-head :is(h1, h2, h3, .wp-block-post-title, .wp-block-query-title) { margin: 0; } /* ========================================================================== 7. LAYOUT ========================================================================== */ /* Sticky footer: footer stays at the viewport bottom even on short pages. */ .wp-site-blocks { display: flex; flex-direction: column; min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); } .wp-site-blocks > footer { margin-top: auto; } /* Body-copy hyphenation, paired with the justified paragraphs from theme.json. */ p { hyphens: auto; } /* ========================================================================== 8. SEARCH ========================================================================== */ /* Input and its wrapper sit on the page background rather than the card surface. */ .wp-block-search input, .wp-block-search__inside-wrapper { background: var(--wp--preset--color--background); } /* Wrapper border-radius, worked around here because WordPress core drops it: core/search (wp-includes/blocks/search.php, styles_for_block_core_search()) only applies the wrapper's border-radius when buttonPosition is button-inside AND `intval( $border_radius ) !== 0`. Our radius is a design token — var(--wp--custom--radius--lg) — and intval() on that string is 0 (it isn't a leading number), so the check silently fails and the wrapper (the element that actually has the visible border) never gets rounded, even though the block editor UI shows it set. Reproduces core's own intended "radius + padding" math so the corner still nests correctly around the input/button; overflow:hidden clips their square corners to it. Re-check this if a future core release changes that intval() check. */ .wp-block-search__button-inside .wp-block-search__inside-wrapper { border-radius: calc(var(--wp--custom--radius--lg) + 4px); overflow: hidden; } /* core/search renders a real