From 41cefeedf66cfe1b84945e93512408c47667ccdc Mon Sep 17 00:00:00 2001 From: Tudor Sitaru Date: Wed, 8 Apr 2026 12:00:45 +0100 Subject: [PATCH] polish(school-detail): align hero stat numbers on a shared baseline MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The three at-a-glance stats were misaligned — the serif "Outstanding" tile sat noticeably above the "70%" and "64%" numerals because the serif variant used a smaller font. That pushed its label row ("INSPECTED NOVEMBER 2023") up too, breaking the horizontal rhythm across the row. - Give .heroStatNumber and .heroStatNumberSerif a shared min-height tied to the largest clamp value, plus display: flex; align-items: flex-end. Content bottom-aligns inside the box, so every stat's label sits at the same Y regardless of how tall the actual glyph is. - Bump the serif variant up slightly (1.75rem → 2.25rem clamp) so it feels closer in weight to the numerals while still leaving room for longer words like "Requires Improvement". Co-Authored-By: Claude Opus 4.6 --- .../components/SchoolDetailView.module.css | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css index 359084c..8367523 100644 --- a/nextjs-app/components/SchoolDetailView.module.css +++ b/nextjs-app/components/SchoolDetailView.module.css @@ -801,21 +801,29 @@ flex: 0 0 auto; } -.heroStatNumber { +.heroStatNumber, +.heroStatNumberSerif { font-family: var(--font-playfair), 'Playfair Display', serif; - font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; line-height: 1; color: var(--text-primary, #1a1612); + /* Fixed height so every stat's label row sits at the same Y, regardless + of whether the content is a short numeral or a longer word. Each + stat's content is bottom-aligned within this box. */ + min-height: clamp(2rem, 4vw, 2.75rem); + display: flex; + align-items: flex-end; +} + +.heroStatNumber { + font-size: clamp(2rem, 4vw, 2.75rem); font-variant-numeric: tabular-nums; } .heroStatNumberSerif { - font-family: var(--font-playfair), 'Playfair Display', serif; - font-size: clamp(1.5rem, 3vw, 2rem); - font-weight: 700; - line-height: 1.1; - color: var(--text-primary, #1a1612); + /* Slightly smaller so long words like "Requires Improvement" still fit, + but aligned on the same bottom baseline as the numeric stats. */ + font-size: clamp(1.75rem, 3.5vw, 2.25rem); } .heroStatNumberSerif.tone-teal,