TudorandClaude Opus 5
f614414070
The site had no author, no statement of why it exists and nobody accountable for its numbers, which is most of why it reads as machine generated. The page states plainly that its author is not an education expert. The credibility claim is lived experience — a parent going through primary admissions — plus stated provenance for every figure, which is true and cannot be undermined by someone noticing there is no teaching qualification behind it. First name only: the Person JSON-LD carries no familyName, worksFor or affiliation, and a test asserts it stays that way. The footer gains a fourth column, with a tablet breakpoint so four columns pair up rather than crushing before the 768px collapse. The nav is deliberately untouched — its mobile tab bar already carries four items. public/brand/tudor.jpg is NOT in this commit. The page references it and will show a broken image until the photograph is supplied; a stock portrait would defeat the entire point of the work. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017YmbBhr8s7GusjDE12hrZM
220 lines
4.9 KiB
CSS
220 lines
4.9 KiB
CSS
/*
|
|
* The footer band.
|
|
*
|
|
* --surface-sunken is deep teal in BOTH themes on purpose, so nothing in here
|
|
* may read a --text-* or --bg-* token: those invert with the theme and would
|
|
* put dark ink on the teal (or teal on teal) in one of the two. Every
|
|
* foreground below comes from the --on-sunken-* family, which is pinned to the
|
|
* band rather than to the page.
|
|
*/
|
|
|
|
.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;
|
|
/* Brand column plus three link columns: Product, Resources, About. */
|
|
grid-template-columns: 1.6fr 1fr 1fr 1fr;
|
|
gap: 2rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* ─── Brand lockup ──────────────────────────────────────────────── */
|
|
|
|
.lockup {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
margin: 0;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.lockupMark {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
/* Height drives; the artwork is taller than it is wide. */
|
|
height: 34px;
|
|
}
|
|
|
|
.lockupMark img {
|
|
display: block;
|
|
height: 100%;
|
|
width: auto;
|
|
}
|
|
|
|
/* Same wordmark as the header, inverted: "school" in the band's foreground,
|
|
"compare" in sage — the one accent that reads cleanly on deep teal. */
|
|
.wordmark {
|
|
font-family: var(--font-display);
|
|
font-size: var(--step-2);
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
letter-spacing: -0.035em;
|
|
color: var(--on-sunken);
|
|
}
|
|
|
|
.wordmarkAccent {
|
|
color: var(--sage);
|
|
}
|
|
|
|
/* Key messaging, so this is the one place in the footer that takes Manrope
|
|
for a full sentence. */
|
|
.tagline {
|
|
margin: 0;
|
|
font-family: var(--font-display);
|
|
font-size: var(--step-1);
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
letter-spacing: -0.015em;
|
|
color: var(--on-sunken);
|
|
}
|
|
|
|
.description {
|
|
margin: -0.5rem 0 0;
|
|
font-size: var(--step--1);
|
|
line-height: 1.6;
|
|
color: var(--on-sunken-muted);
|
|
max-width: 34ch;
|
|
}
|
|
|
|
/*
|
|
* Quieter than .description, but by size only — not by contrast.
|
|
*
|
|
* --on-sunken-faint measured 4.71:1 here, which clears AA by 0.21. That is a
|
|
* fine margin for decorative text and the wrong one for a disclaimer, whose
|
|
* whole job is to be legible to someone checking whether this is a government
|
|
* site. --on-sunken-muted is 5.66:1 on the same band.
|
|
*/
|
|
.independence {
|
|
margin: 0;
|
|
font-size: var(--step--2);
|
|
line-height: 1.6;
|
|
color: var(--on-sunken-muted);
|
|
max-width: 38ch;
|
|
}
|
|
|
|
.sectionTitle {
|
|
margin: 0;
|
|
font-family: var(--font-display);
|
|
font-size: var(--step--1);
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
/* --sage flips with the theme; this band does not (it is teal in both), so
|
|
the pairing only held in one of them — the dark sage measured 4.08:1 here
|
|
against a 4.5 floor, on every page. The --on-sunken-* family exists
|
|
precisely because this surface is theme-invariant. */
|
|
color: var(--on-sunken-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.links {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.link {
|
|
font-family: var(--font-ui);
|
|
font-size: var(--step--1);
|
|
color: var(--on-sunken-muted);
|
|
text-decoration: none;
|
|
border-radius: var(--radius-sm);
|
|
transition: color var(--transition);
|
|
}
|
|
|
|
.link:hover {
|
|
color: var(--on-sunken);
|
|
}
|
|
|
|
.linkDisabled {
|
|
font-size: var(--step--1);
|
|
color: var(--on-sunken-faint);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ─── Bottom rule ───────────────────────────────────────────────── */
|
|
|
|
/*
|
|
* The divider is drawn as a pseudo-element at low opacity rather than as an
|
|
* rgba() border: there is no channel token for --on-sunken, and every literal
|
|
* that would work here (rgba(255,255,255,…)) is exactly the kind of hardcoded
|
|
* colour the token layer exists to remove.
|
|
*/
|
|
.bottom {
|
|
position: relative;
|
|
padding-top: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.bottom::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: var(--on-sunken);
|
|
opacity: 0.16;
|
|
}
|
|
|
|
.copyright,
|
|
.disclaimer {
|
|
margin: 0;
|
|
font-size: var(--step--1);
|
|
color: var(--on-sunken-muted);
|
|
}
|
|
|
|
.disclaimer .link {
|
|
color: var(--on-sunken-link);
|
|
}
|
|
|
|
.disclaimer .link:hover {
|
|
color: var(--on-sunken);
|
|
}
|
|
|
|
/* Four columns crush between the tablet range and the 768px collapse, so
|
|
pair them up first rather than jumping straight to a single column. */
|
|
@media (max-width: 960px) {
|
|
.content {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 2rem 1rem 1.5rem;
|
|
}
|
|
|
|
.content {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.bottom {
|
|
text-align: center;
|
|
}
|
|
}
|