TudorandClaude Fable 5
a1fa4fe874
Live axe-core inventory found 13 failing fg/bg pairs (3.12:1 coral text/ fills, 4.0-4.5 teal near-misses, 2.7 gold badge, 1.9 chart-colour text). All replacement values validated ≥4.5:1 against every background they sit on: - --accent-coral-dark deepened to #b04a2e and used for coral text roles (nav active, back/map links, kickers, chips) and coral fills under white text (btn-primary, phase tabs, section-nav compare, chart chips); new --accent-coral-darker #9c3f26 for their hovers. Decorative coral (pins, bars, borders, focus ring) keeps the brand #e07256. - --accent-teal darkened to #296f6f (rankings values, metric rows, ofsted grades, eyebrows all pass). - Ofsted green #3c8c3c→#2f7a2f; off-token gold #b8920e→--accent-gold-text. - Gender-split pink text #b45778→#a04a68; admissions tip numerals to a 3.8:1 muted brown (28px display text). - New CHART_TEXT_COLORS: AA-dark counterparts of the Chart.js series palette for compare-card values (swatch dots keep true series colour). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
39 lines
707 B
CSS
39 lines
707 B
CSS
.chip {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 0.25rem;
|
|
padding: 0.2rem 0.55rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
border-radius: 999px;
|
|
white-space: nowrap;
|
|
letter-spacing: 0.01em;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.sm {
|
|
padding: 0.1rem 0.4rem;
|
|
font-size: 0.6875rem;
|
|
}
|
|
|
|
.suffix {
|
|
font-weight: 500;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.good {
|
|
background: var(--accent-teal-bg, rgba(45, 125, 125, 0.12));
|
|
color: var(--accent-teal, #2d7d7d);
|
|
}
|
|
|
|
.bad {
|
|
background: var(--accent-coral-bg, rgba(224, 114, 86, 0.12));
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
}
|
|
|
|
.neutral {
|
|
background: var(--bg-secondary, #f3ede4);
|
|
color: var(--text-muted, #8a847a);
|
|
}
|