From cb95ecc9e62dc6dde2cecbb6d07efeb0df69865d Mon Sep 17 00:00:00 2001
From: Deeman <hendriknote@gmail.com>
Date: Mon, 23 Feb 2026 18:37:58 +0100
Subject: [PATCH] feat(web): add .stats-strip CSS component for pSEO article
 hero metrics
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 web/src/padelnomics/static/css/input.css | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/web/src/padelnomics/static/css/input.css b/web/src/padelnomics/static/css/input.css
index b406778..ab1c5b1 100644
--- a/web/src/padelnomics/static/css/input.css
+++ b/web/src/padelnomics/static/css/input.css
@@ -477,6 +477,29 @@
     @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 h2 {
     @apply text-2xl mt-10 mb-4;