feat(web): add .stats-strip CSS component for pSEO article hero metrics

Grid layout (2-col mobile, 4-col sm+) with label/value/unit slots.
Baked into static HTML at article generation time — no JS needed.
output.css is git-ignored (rebuild with: bin/tailwindcss -i ... -o ...).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Deeman
2026-02-23 18:37:58 +01:00
parent b3afd414a4
commit cb95ecc9e6

View File

@@ -477,6 +477,29 @@
@apply text-sm font-semibold text-electric hover:text-electric-hover; @apply text-sm font-semibold text-electric hover:text-electric-hover;
} }
/* ── Article Body Typography ── */
/* ── Stats Strip — pSEO article hero metrics ── */
/* Baked into static HTML at generation time; no JS needed. */
.stats-strip {
@apply grid grid-cols-2 gap-3 mb-8;
}
@media (min-width: 640px) {
.stats-strip { grid-template-columns: repeat(4, 1fr); }
}
.stats-strip__item {
@apply bg-soft-white border border-light-gray rounded-lg p-4;
}
.stats-strip__label {
@apply text-xs text-slate uppercase tracking-wide mb-1;
}
.stats-strip__value {
@apply text-2xl font-extrabold text-navy;
font-family: 'Bricolage Grotesque', sans-serif;
}
.stats-strip__unit {
@apply text-sm text-slate font-normal ml-1;
}
/* ── Article Body Typography ── */ /* ── Article Body Typography ── */
.article-body h2 { .article-body h2 {
@apply text-2xl mt-10 mb-4; @apply text-2xl mt-10 mb-4;