TudorandClaude Opus 5
8d50afef1e
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m11s
PR Checks / Backend Smoke (pull_request) Successful in 9s
PR Checks / Build Backend (no push) (pull_request) Successful in 12s
PR Checks / Build Frontend (no push) (pull_request) Successful in 52s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 11s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 3m6s
Full audit across home, search, rankings, admissions, compare, and primary / secondary / special / no-data school pages, in both themes, measuring computed styles rather than reading CSS. Contrast: the status hues were specced against --bg-primary, but they are used as chip text on their own tint, which sits on cards and secondary surfaces rather than the page ground. Measured in the wild they were 3.85–4.44:1 — under AA — on Ofsted badges, delta chips, report-card chips and metric values, i.e. most of the product's actual signal. Darkened the light hues (#0e6e66 → #0b625a, #9a5b00 → #7f4a00) and lifted the dark teal (#3fb3a4 → #4fc0b0) so each clears AA on its own tint, which is the worst case rather than the easy one. Chart and series ramps follow. The footer was painting itself with a text token and lettering itself with a background token: `background: var(--text-primary); color: var(--bg-secondary)`. That reads correctly in one theme and inverts in the other — in dark mode it became a light slab at the bottom of a dark page, with amber section headings at 1.98:1. Added --surface-sunken and its on-* companions, which stay dark in BOTH themes (deliberately not --surface-inverse, whose whole job is to flip), and moved the footer onto them. Section headings were also using a status hue purely as decoration; they are now a muted on-surface token. The "Open full map" pill was a fixed white background with a themed text colour, so in dark mode it rendered light violet on white at 1.84:1. Both sides are token-driven now. Tabular numerals are now the default for .main rather than per-component opt-in, with prose opting back out — a handful of figures (miniNatPill, compareRowVal, factVal) had been missed by the class-name-based pass. Added a two-theme AA gate over home, rankings and admissions. It waits for `transition: color` to settle first: an earlier measurement pass read mid-transition values and reported seven failures that did not exist at rest. Worth stating plainly — most of what a naive audit flags here is its own artifact, and the check has to account for that to be worth having. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
114 lines
1.7 KiB
CSS
114 lines
1.7 KiB
CSS
.footer {
|
|
background: var(--surface-sunken);
|
|
color: var(--on-sunken);
|
|
margin-top: auto;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 3rem 1.5rem 2rem;
|
|
}
|
|
|
|
.content {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr 1fr 1fr;
|
|
gap: 2rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: var(--on-sunken);
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
.description {
|
|
margin: 0;
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
color: var(--on-sunken-muted);
|
|
}
|
|
|
|
.sectionTitle {
|
|
margin: 0;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--on-sunken-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.links {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.link {
|
|
font-size: 0.875rem;
|
|
color: var(--on-sunken-muted);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.link:hover {
|
|
color: var(--on-sunken);
|
|
}
|
|
|
|
.linkDisabled {
|
|
font-size: 0.875rem;
|
|
color: var(--on-sunken-faint);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.bottom {
|
|
padding-top: 2rem;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.copyright,
|
|
.disclaimer {
|
|
margin: 0;
|
|
font-size: 0.875rem;
|
|
color: var(--on-sunken-muted);
|
|
}
|
|
|
|
.disclaimer .link {
|
|
color: var(--on-sunken-link);
|
|
}
|
|
|
|
.disclaimer .link:hover {
|
|
color: var(--on-sunken);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 2rem 1rem 1.5rem;
|
|
}
|
|
|
|
.content {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.bottom {
|
|
text-align: center;
|
|
}
|
|
}
|