diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css index 9c03702..c963585 100644 --- a/nextjs-app/components/SchoolDetailView.module.css +++ b/nextjs-app/components/SchoolDetailView.module.css @@ -1203,55 +1203,58 @@ } /* ── Admissions Q&A list ── */ -.admissionsQa { +/* 2×2 stat tiles — number and label grouped together so the eye + doesn't travel the full card width. Hairline grid via gap + bg. */ +.admissionsTiles { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1px; + background: var(--border-color, #e5dfd5); + border: 1px solid var(--border-color, #e5dfd5); + border-radius: 10px; + overflow: hidden; + margin: 0; +} + +.admissionsTile { + background: var(--bg-card, #fff); + padding: 1.15rem 1.25rem; display: flex; flex-direction: column; - margin: 0; } -.admissionsQaRow { - display: flex; - justify-content: space-between; - align-items: baseline; - padding: 0.85rem 0; - border-bottom: 1px solid var(--border-color, #e5dfd5); - gap: 1rem; -} - -.admissionsQaRow:first-child { - padding-top: 0.35rem; -} - -.admissionsQaRow:last-child { - border-bottom: none; - padding-bottom: 0.35rem; -} - -.admissionsQaQuestion { - font-size: 0.92rem; - color: var(--text-secondary, #5c564d); - line-height: 1.35; - margin: 0; -} - -.admissionsQaAnswer { +.admissionsTileNum { font-family: var(--font-playfair), "Playfair Display", Georgia, serif; - font-size: 1.4rem; + font-size: 2.4rem; font-weight: 700; - color: var(--text-primary, #1a1612); line-height: 1; - white-space: nowrap; - flex-shrink: 0; + color: var(--text-primary, #1a1612); font-variant-numeric: tabular-nums; margin: 0; + display: flex; + align-items: baseline; + gap: 0.4rem; + flex-wrap: wrap; } -.admissionsQaAnswerSub { - font-size: 0.7rem; +.admissionsTileSub { + font-family: var(--font-dm-sans), "DM Sans", sans-serif; + font-size: 0.85rem; font-weight: 500; color: var(--text-muted, #6d685f); - margin-left: 0.35rem; - font-family: var(--font-dm-sans), "DM Sans", sans-serif; +} + +.admissionsTileLabel { + margin: 0.55rem 0 0; + font-size: 0.78rem; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--text-muted, #6d685f); +} + +.admissionsTileAccent .admissionsTileNum { + color: var(--accent-coral-dark, #c45a3f); } .admissionsVerdict { @@ -1283,15 +1286,12 @@ } @media (max-width: 480px) { - .admissionsQaRow { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - padding: 0.7rem 0; + .admissionsTile { + padding: 0.95rem 1rem; } - .admissionsQaAnswer { - white-space: normal; + .admissionsTileNum { + font-size: 2rem; } } @@ -1361,15 +1361,15 @@ pointer-events: none; } -/* The this-year rows spread to fill the height reserved by the taller view. */ +/* The tile grid fills the height reserved by the taller (trend) view. */ .admissionsViewYear { display: flex; flex-direction: column; } -.admissionsViewYear .admissionsQa { +.admissionsViewYear .admissionsTiles { flex: 1; - justify-content: space-between; + grid-template-rows: 1fr 1fr; } .admissionsChartCap { diff --git a/nextjs-app/components/SchoolDetailView.tsx b/nextjs-app/components/SchoolDetailView.tsx index 7a37e36..5ac6716 100644 --- a/nextjs-app/components/SchoolDetailView.tsx +++ b/nextjs-app/components/SchoolDetailView.tsx @@ -905,40 +905,40 @@ export function SchoolDetailView({