feat(destinations): the After Year 11 section
Question cards over one bar, with the cards acting as a lens on the bar rather than a summary beside it — focusing a card dims everything it is not made of, so the grouping we chose is inspectable rather than asserted. The bar renders only when canRenderBar allows it. Where a category is withheld the section says so and shows the table instead: the categories sum to the cohort, so a bar drawn from the published segments leaves a gap whose width is the withheld figure. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BvdDKvFFSZuMVDH5fEyTob
This commit is contained in:
TudorandClaude Opus 5 committed
1 parent
68b6417149
commit
cef2f77149
7 files changed
+680
-2
No files matched your search
@@ -0,0 +1,299 @@
|
||||
/*
|
||||
* Destination sections.
|
||||
*
|
||||
* Every colour comes from the --dest-* tokens in globals.css, which are
|
||||
* defined in both themes. Nothing here is a literal colour — see
|
||||
* __tests__/components/darkThemeSafety.test.ts for why.
|
||||
*/
|
||||
|
||||
.view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* ── Cohort switch ─────────────────────────────────────────────────────── */
|
||||
|
||||
.switchRow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.switchLabel {
|
||||
font-size: var(--step--2);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.switchButtons {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px;
|
||||
padding: 2px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.switchButton {
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
font-size: var(--step--1);
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
padding: 0.5rem 0.9rem;
|
||||
border-radius: calc(var(--radius-md) - 2px);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
|
||||
.switchButton:hover { color: var(--text-primary); }
|
||||
.switchButton:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
|
||||
|
||||
.switchButton[aria-checked='true'] {
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.switchCount {
|
||||
margin-left: 0.4rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ── Question cards ────────────────────────────────────────────────────── */
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
background: var(--brand-bg);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.15rem 1.25rem;
|
||||
cursor: pointer;
|
||||
transition: border-color var(--transition), opacity var(--transition);
|
||||
}
|
||||
|
||||
.card:hover { border-color: var(--brand); }
|
||||
.card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
|
||||
|
||||
.cardWithheld {
|
||||
background: var(--bg-secondary);
|
||||
border-style: dashed;
|
||||
border-color: var(--border-strong);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.cardQuestion {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.cardValue {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--step-3);
|
||||
font-weight: 800;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.02em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.cardWithheldValue {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--step-1);
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.cardHint {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.cardKeys {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.cardKeys .swatch {
|
||||
width: 1.5rem;
|
||||
height: 0.35rem;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* ── Bar ───────────────────────────────────────────────────────────────── */
|
||||
|
||||
.barBlock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* 2px surface gaps between segments so adjacent fills stay distinguishable
|
||||
without a border darkening the palette. */
|
||||
.bar {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
height: 3rem;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.segment {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 2px;
|
||||
overflow: hidden;
|
||||
color: var(--text-inverse);
|
||||
font-size: var(--step--2);
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.barScale {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ── Category colours ──────────────────────────────────────────────────── */
|
||||
|
||||
.higher_education,
|
||||
.school_sixth_form { background: var(--dest-sixthform); }
|
||||
.sixth_form_college { background: var(--dest-sfcollege); }
|
||||
.further_education,
|
||||
.other_education { background: var(--dest-fecollege); color: var(--text-primary); }
|
||||
.apprenticeship { background: var(--dest-apprentice); }
|
||||
.employment { background: var(--dest-employment); }
|
||||
|
||||
/* The absence is hatched neutral, never a colour: "activity not captured"
|
||||
covers independent schools, moving abroad and training the department holds
|
||||
no data on, so a red segment would state something false. The hatch is also
|
||||
the secondary encoding that separates it from the employment blue. */
|
||||
.not_sustained,
|
||||
.not_captured {
|
||||
background-color: var(--bg-card);
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
var(--dest-none-hatch) 0 3px,
|
||||
transparent 3px 7px
|
||||
);
|
||||
box-shadow: inset 0 0 0 1px var(--dest-none);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.swatch {
|
||||
display: inline-block;
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
border-radius: 3px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* ── Dimming, for the card-to-bar linkage ──────────────────────────────── */
|
||||
|
||||
.dim { opacity: 0.3; }
|
||||
|
||||
/* ── Withheld panel ────────────────────────────────────────────────────── */
|
||||
|
||||
.withheldPanel {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.15rem 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.withheldTitle {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.withheldBody {
|
||||
margin: 0;
|
||||
font-size: var(--step--1);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.withheldMark {
|
||||
display: inline-block;
|
||||
font-size: var(--step--2);
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px dashed var(--border-strong);
|
||||
border-radius: 999px;
|
||||
padding: 0.1rem 0.5rem;
|
||||
}
|
||||
|
||||
/* ── Table ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.tableWrap { overflow-x: auto; }
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.55rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
font-size: var(--step--2);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table th:first-child { text-align: left; }
|
||||
|
||||
.rowName {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.footnote {
|
||||
margin: 0;
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
Reference in new issue
Block a user