/* ==========================================================================
why-book.css — "Why Book Through SplitMart?": heading block left, five
benefit rows right. Untinted section; it is meant to sit between two
tinted bands, so it carries no background of its own.
Markup:
========================================================================== */
/* ── Kicker: pill off, flanking hairline on ────────────────────────────────
Same local pass categories.css makes, in this section's own scope: the
filled chip from kicker.css comes off and the eyebrow is marked with a
hairline instead. Left-aligned here, so only the right side draws — there
is nothing on the left for a second line to balance against, and the label
sits flush with the h2 below it.
96px is the line measure, the same constant the flanking pair in
categories.css uses, so the two eyebrows read as one mark at any width. */
.wb-section .kicker {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--space-12);
padding: 0;
background: none;
border-radius: 0;
line-height: 1;
white-space: nowrap;
}
.wb-section .kicker::after {
content: '';
flex: 0 1 96px;
height: 1px;
align-self: center;
background: rgba(var(--brand-rgb), .18);
}
/* ── Two-column shell ──────────────────────────────────────────────────── */
/* The head is the narrower column: it holds three short blocks and the list
holds five sentences, so the measure split follows the word count rather
than splitting the container in half. `start` keeps the head at the top of
the section instead of floating it against the list's full height. */
.wb-grid {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: var(--space-56);
align-items: start;
}
.wb-head h2 {
margin: 0 0 var(--space-14);
font-size: var(--fs-h2);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
font-weight: var(--fw-bold);
color: var(--ink);
/* The heading is one long sentence; a measure keeps it to three or four
lines instead of one very wide two-liner. */
max-width: 20ch;
}
/* "With SplitMart you can:" — a hand-off into the list, not a lead
paragraph, so it is set at body weight and colour rather than --fs-lead. */
.wb-lead {
margin: 0;
color: var(--ink-3);
font-size: var(--fs-lead);
line-height: var(--lh-body);
max-width: 34ch;
}
/* ── Benefit rows ──────────────────────────────────────────────────────── */
.wb-list {
list-style: none;
margin: 0;
padding: 0;
}
/* Icon column + text column. The hairline goes on the row rather than
between icon and text: it separates the five statements, which is the only
division in this list. First row has none — a rule above the first item
would read as the list's own top border and box it in. */
.wb-item {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: var(--space-18);
align-items: start;
padding: var(--space-22) 0;
}
.wb-item:first-child { padding-top: 0; }
.wb-item:last-child { padding-bottom: 0; }
.wb-item + .wb-item { border-top: 1px solid var(--line-2); }
/* ── Icon tile ─────────────────────────────────────────────────────────────
The product's canonical "icon inside a tinted square" primitive lives in
components/icon-tile.css as `.icon-tile` (+ `.icon-tile--lg`), but that
sheet is not among the ones index.html links for the landing page, so the
recipe is rebuilt here under wb-* names rather than reached for across a
sheet the page does not load. Values are copied verbatim from the --lg
step so the two stay one component if the sheets are ever merged:
tile 48px · radius 12px · glyph 24px
background --brand-soft (#d6f1fb, Ice Azure) · glyph --brand-ink
--brand-ink rather than --brand for the glyph is also from the primitive,
and it matters more here than usual: these are Solar bold-duotone cuts, so
half the mark is drawn at 50% opacity, and the lighter --brand underlayer
would nearly vanish against the Ice Azure fill behind it.
Flush top alignment, not optical centring on the title line: the tile is a
hard-edged square, so matching its top edge to the text block's top edge
reads cleaner than floating it against the title's cap height, and it
leaves the row's own top edge straight. */
.wb-item__tile {
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: 12px;
background: var(--brand-soft);
color: var(--brand-ink);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Doubled selector (0-2-0): base.css sizes every rendered icon through
`svg.lucide` (0-1-1), which a lone .wb-item__icon (0-1-0) would lose to
once the loader swaps the placeholder for the Solar SVG. */
.wb-item__tile .wb-item__icon,
.wb-item__tile svg.wb-item__icon {
width: 24px;
height: 24px;
display: block;
}
.wb-item__text h3 {
margin: 0 0 var(--space-6);
font-size: var(--fs-h4);
line-height: var(--lh-card);
letter-spacing: var(--ls-tight);
font-weight: var(--fw-semibold);
color: var(--ink);
}
.wb-item__text p {
margin: 0;
color: var(--ink-3);
font-size: var(--fs-body);
line-height: var(--lh-body);
max-width: 62ch;
}
/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
.wb-grid {
grid-template-columns: 1fr;
gap: var(--space-32);
}
/* Full width once stacked: the 20ch measure was there to stop the heading
spanning its own column, and a single column already caps it. */
.wb-head h2 { max-width: 28ch; }
}
@media (max-width: 720px) {
.wb-head h2 {
font-size: var(--fs-h2-sm);
max-width: none;
}
.wb-lead { max-width: none; }
/* One step down the primitive's own scale — icon-tile's default 40/10/22
rather than an off-scale shrink — so the tile keeps the text a usable
measure on a 328px content column. */
.wb-item {
grid-template-columns: 40px minmax(0, 1fr);
gap: var(--space-14);
padding: var(--space-18) 0;
}
.wb-item__tile {
width: 40px;
height: 40px;
flex-basis: 40px;
border-radius: 10px;
}
.wb-item__tile .wb-item__icon,
.wb-item__tile svg.wb-item__icon {
width: 22px;
height: 22px;
}
.wb-item__text h3 { font-size: var(--fs-body-lg); }
}