Candidate sourcing
One or two plain sentences.
, so this stays a single-class rule and wins on
source order over .page-hero__lead instead of out-specifying it */
.res-hero__lead{max-width:560px}
@media (max-width:900px){
.res-hero{padding-inline:24px;padding-bottom:48px}
}
@media (max-width:600px){
.res-hero{padding-inline:var(--gutter);padding-bottom:36px}
.res-hero__copy{gap:14px}
/* at 375 the measured lead runs the full column rather than a 400 box */
.res-hero__lead{max-width:none}
}
/* /styles/resources/grid.css */
/* ==========================================================================
Blog index · card grid — all numbers measured from the reference at 1440px
(solva-template.framer.website/company/blog).
section padding 96px 40px (.section) with padding-top ZEROED — the
reference runs its head block and its grid inside one section
64px apart, and this port splits them into two so the head can
be the shared page hero. styles/resources/hero.css supplies that 64
as its padding-bottom; if this section also took the 96 the
gap would be 160. Same trick styles/pricing/plans.css uses.
grid 1200 rail · 3 columns · row gap 24 · column gap 16
(3 x 389.33 + 2 x 16 = 1200 exactly)
card 389.3 x 450 · radius 16 · #f4f2ec fill (= --panel)
padding 12px 12px 24px · column · gap 16
media 365.3 x 274 → aspect-ratio 4/3 · radius 12 · clipped
text padding-inline 12 · column · gap 16
head column · gap 12
meta row · gap 16 · 12px icon + 6px + Onest 14/21 --muted
title Onest 20/27/-0.4 = .t-h3, two lines
footer Onest 14/21
The card's 450 height is NOT restated here. The reference gets equal-height
cards from a fixed height plus a two-line title; this grid gets them from
`align-items:stretch` (the grid default) plus a 2-line clamp on the title
and `margin-top:auto` on the footer row, so a short title still leaves the
footers aligned and a long one cannot push one card taller than its
neighbours. Same result, no magic number, and it survives the 40px title
the real posts will bring.
The reference card has NO excerpt, NO author, NO category chip; the page
has NO featured post, NO filters and NO pagination. Nothing was added
except the content-type chip, which takes the slot the reference gave the
publication date — see the note at the top of sections/resources/grid.html
for why these pages carry no date.
FOUR CARDS IN THREE COLUMNS leaves one alone on the second row. That is
left as it is rather than special-cased to a 2x2: the grid has to hold
five and six as well the moment anything else is published, and a layout
that only looks right at exactly four is a trap.
HOVER / FOCUS: the reference card does almost nothing on hover (a small
arrow slide on "Read more"). This site already has an established
"clickable card that goes to another page" behaviour — styles/features.css:
the whole card is one , a north-east arrow rides the title AT REST, and
on hover or keyboard focus the arrow travels translate(3px,-3px) while the
media panel lifts 3px onto --shadow-card. The a.res-card__inner rules at
the bottom of this sheet are exactly that, so a post card behaves like
every other card on the site rather than like the template.
Those rules are element+class (`a.res-card__inner`) on purpose: a card with
no destination must not look clickable, so the affordance is attached to
the rather than the card. Every card on the page is a link today; a
future placeholder slot can be a