TudorandClaude Opus 4.8
ed8c396eb9
Religious character now sits with the other labelled header details (near
County / Constituency) as "Religious character: <denomination>" ("None" for
Does not apply / None), instead of as an identity chip.
On mobile/tablet (≤768px) the header details block was hidden outright; it's
now collapsed behind a "Show all details" toggle that reveals the full block
(headteacher, website, pupils, trust, phone, religious character, county,
constituency). Applied to both the primary and secondary detail views for
parity. Extends the e2e journey with the mobile toggle behaviour.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1186 lines
26 KiB
CSS
1186 lines
26 KiB
CSS
/* SecondarySchoolDetailView — borrows heavily from SchoolDetailView.module.css */
|
|
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Standalone back link, sits above the header card on the page background. */
|
|
.topBack {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
margin: 0 0 0.75rem;
|
|
padding: 0.25rem 0;
|
|
font-size: 1.0625rem;
|
|
font-weight: 600;
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
line-height: 1.2;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.topBack:hover {
|
|
color: var(--accent-coral-dark, #c85a3e);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
/* ── Header ──────────────────────────────────────────── */
|
|
.header {
|
|
position: relative;
|
|
background: var(--bg-card, white);
|
|
border: 1px solid var(--border-color, #e5dfd5);
|
|
border-radius: 10px;
|
|
/* Padding lives on .headerContent so the map band can bleed to the edges. */
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
box-shadow: var(--shadow-soft);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.headerContent {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1.5rem;
|
|
padding: 1.25rem 1.5rem;
|
|
}
|
|
|
|
/* With a map band above, slide the title up under the fade so map and title
|
|
read as one object; the Compare button floats glassy over the map. */
|
|
.headerHasMap .headerContent {
|
|
padding-top: 0;
|
|
margin-top: -0.5rem;
|
|
}
|
|
|
|
/* The title (not the whole content row) rises above the map fade. Keeping
|
|
.headerContent unpositioned matters: .actions must anchor to .header so it
|
|
floats over the map band, not over the title. */
|
|
.headerHasMap .titleSection {
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.headerHasMap .actions {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 14px;
|
|
z-index: 6;
|
|
margin: 0;
|
|
/* Beat the mobile `.actions { width: 100% }` rule — a floating button
|
|
must never stretch across the title. */
|
|
width: auto;
|
|
}
|
|
|
|
.headerHasMap .actions .btnAdd {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
border-color: transparent;
|
|
-webkit-backdrop-filter: blur(6px);
|
|
backdrop-filter: blur(6px);
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
|
|
}
|
|
|
|
.headerHasMap .actions .btnAdd:hover {
|
|
background: #fff;
|
|
}
|
|
|
|
/* Full label by default; phones over the map get an icon-only button
|
|
(same compact treatment as the section-nav compare icon). */
|
|
.btnCompareGlyph {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.headerHasMap .actions .btnCompareLabel {
|
|
display: none;
|
|
}
|
|
|
|
.headerHasMap .actions .btnCompareGlyph {
|
|
display: inline;
|
|
}
|
|
|
|
.headerHasMap .actions .btnAdd,
|
|
.headerHasMap .actions .btnRemove {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 0;
|
|
border-radius: 999px;
|
|
font-size: 1.375rem;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
/* Inline "View on map ↗" trigger next to the address. */
|
|
.mapLink {
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
font: inherit;
|
|
font-weight: 600;
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mapLink:hover {
|
|
color: var(--accent-coral-dark, #c45a3f);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.titleSection {
|
|
flex: 1;
|
|
}
|
|
|
|
.schoolName {
|
|
font-size: clamp(2rem, 5vw, 3.25rem);
|
|
font-weight: 700;
|
|
color: var(--text-primary, #1a1612);
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.15;
|
|
font-family: var(--font-playfair), "Playfair Display", serif;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.badge {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
padding: 0.125rem 0.5rem;
|
|
background: var(--bg-secondary, #f3ede4);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.badgeSelective {
|
|
background: rgba(180, 120, 0, 0.1);
|
|
color: #8a6200;
|
|
}
|
|
|
|
.badgeFaith {
|
|
background: rgba(45, 125, 125, 0.1);
|
|
color: var(--accent-teal, #2d7d7d);
|
|
}
|
|
|
|
.address {
|
|
font-size: 0.875rem;
|
|
color: var(--text-muted, #8a847a);
|
|
margin: 0 0 0.75rem;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.headerDetails {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem 1.25rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.headerDetail {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
}
|
|
|
|
.headerDetail strong {
|
|
color: var(--text-primary, #1a1612);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.headerDetail a {
|
|
color: var(--accent-teal, #2d7d7d);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.headerDetail a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* "Show all details" reveal — only rendered on mobile/tablet, where the
|
|
header details block is collapsed below the fold. Hidden on desktop. */
|
|
.detailsToggle {
|
|
display: none;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
margin-top: 0.5rem;
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: var(--accent-teal, #2d7d7d);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.btnAdd,
|
|
.btnRemove {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btnAdd {
|
|
background: var(--accent-coral-dark, #b04a2e);
|
|
color: white;
|
|
}
|
|
|
|
.btnAdd:hover {
|
|
background: var(--accent-coral-darker, #9c3f26);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btnRemove {
|
|
background: var(--accent-teal, #2d7d7d);
|
|
color: white;
|
|
}
|
|
|
|
.btnRemove:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* ── Tab Navigation (sticky) ─────────────────────────── */
|
|
.tabNav {
|
|
position: sticky;
|
|
top: 4rem;
|
|
z-index: 10;
|
|
background: var(--bg-card, white);
|
|
border: 1px solid var(--border-color, #e5dfd5);
|
|
border-top: none;
|
|
border-radius: 0 0 10px 10px;
|
|
padding: 0.5rem 1rem;
|
|
margin-bottom: 1rem;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.tabNav::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.tabNavInner {
|
|
display: inline-flex;
|
|
gap: 0.25rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.backBtn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.3rem 0.625rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
background: none;
|
|
border: 1px solid var(--border-color, #e5dfd5);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: all 0.15s ease;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.backBtn:hover {
|
|
background: var(--bg-secondary, #f3ede4);
|
|
border-color: var(--accent-coral, #e07256);
|
|
}
|
|
|
|
.tabNavDivider {
|
|
width: 1px;
|
|
height: 1rem;
|
|
background: var(--border-color, #e5dfd5);
|
|
margin: 0 0.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tabBtn {
|
|
display: inline-block;
|
|
padding: 0.3rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary, #5c564d);
|
|
background: none;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tabBtn:hover {
|
|
background: var(--bg-secondary, #f3ede4);
|
|
color: var(--text-primary, #1a1612);
|
|
}
|
|
|
|
.tabBtnActive {
|
|
background: var(--accent-coral-dark, #b04a2e);
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tabBtnActive:hover {
|
|
background: var(--accent-coral-darker, #9c3f26);
|
|
color: white;
|
|
}
|
|
|
|
/* ── Card ────────────────────────────────────────────── */
|
|
.card {
|
|
background: var(--bg-card, white);
|
|
border: 1px solid var(--border-color, #e5dfd5);
|
|
border-radius: 10px;
|
|
padding: 1.25rem 1.5rem;
|
|
margin-bottom: 1rem;
|
|
box-shadow: var(--shadow-soft);
|
|
scroll-margin-top: 6rem;
|
|
}
|
|
|
|
/* ── Section Title ───────────────────────────────────── */
|
|
.sectionTitle {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #1a1612);
|
|
margin-bottom: 0.875rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 2px solid var(--border-color, #e5dfd5);
|
|
font-family: var(--font-playfair), "Playfair Display", serif;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
flex-wrap: wrap;
|
|
overflow-wrap: break-word;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sectionTitle::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 3px;
|
|
height: 1em;
|
|
background: var(--accent-coral, #e07256);
|
|
border-radius: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sectionSubtitle {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted, #8a847a);
|
|
margin: -0.5rem 0 1rem;
|
|
}
|
|
|
|
.subSectionTitle {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary, #5c564d);
|
|
margin: 1.25rem 0 0.75rem;
|
|
}
|
|
|
|
/* ── Progress 8 suspension banner ───────────────────── */
|
|
.p8Banner {
|
|
background: rgba(180, 120, 0, 0.1);
|
|
border: 1px solid rgba(180, 120, 0, 0.3);
|
|
color: #8a6200;
|
|
border-radius: 6px;
|
|
padding: 0.625rem 0.875rem;
|
|
font-size: 0.825rem;
|
|
margin-bottom: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ── Metrics Grid & Cards ────────────────────────────── */
|
|
.metricsGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.metricCard {
|
|
background: var(--bg-secondary, #f3ede4);
|
|
border: 1px solid var(--border-color, #e5dfd5);
|
|
border-radius: 6px;
|
|
padding: 0.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.metricLabel {
|
|
font-size: 0.6875rem;
|
|
color: var(--text-muted, #8a847a);
|
|
margin-bottom: 0.25rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.metricValue {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary, #1a1612);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.25rem;
|
|
overflow-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.metricHint {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted, #8a847a);
|
|
margin-top: 0.3rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ── Progress score colours ──────────────────────────── */
|
|
.progressPositive {
|
|
color: var(--accent-teal, #2d7d7d);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.progressNegative {
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ── Status colours ──────────────────────────────────── */
|
|
.statusGood {
|
|
background: var(--accent-teal-bg);
|
|
color: var(--accent-teal, #2d7d7d);
|
|
}
|
|
|
|
.statusWarn {
|
|
background: var(--accent-gold-bg);
|
|
color: var(--accent-gold-text, #7a6800);
|
|
}
|
|
|
|
/* ── Metric table (row-based) ────────────────────────── */
|
|
.metricTable {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.metricRow {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.375rem 0.625rem;
|
|
background: var(--bg-secondary, #f3ede4);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.metricName {
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
}
|
|
|
|
.metricRow .metricValue {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--accent-teal, #2d7d7d);
|
|
}
|
|
|
|
/* ── Charts & Map ────────────────────────────────────── */
|
|
.chartContainer {
|
|
width: 100%;
|
|
/* Taller on desktop so the trend lines have vertical room to separate
|
|
and read clearly. Mobile overrides this to height:auto below (the
|
|
max-width:768px query), so this only affects desktop. */
|
|
height: 380px;
|
|
position: relative;
|
|
}
|
|
|
|
/* ── History table ───────────────────────────────────── */
|
|
.tableWrapper {
|
|
overflow-x: auto;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.historicalSubtitle {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted, #8a847a);
|
|
margin: 1.25rem 0 0.25rem;
|
|
}
|
|
|
|
.dataTable {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.dataTable thead {
|
|
background: var(--bg-secondary, #f3ede4);
|
|
}
|
|
|
|
.dataTable th {
|
|
padding: 0.625rem 0.75rem;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
font-size: 0.6875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: var(--text-primary, #1a1612);
|
|
border-bottom: 2px solid var(--border-color, #e5dfd5);
|
|
}
|
|
|
|
.dataTable td {
|
|
padding: 0.5rem 0.75rem;
|
|
border-bottom: 1px solid var(--border-color, #e5dfd5);
|
|
color: var(--text-secondary, #5c564d);
|
|
}
|
|
|
|
.dataTable tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.dataTable tbody tr:hover {
|
|
background: var(--bg-secondary, #f3ede4);
|
|
}
|
|
|
|
.yearCell {
|
|
font-weight: 600;
|
|
color: var(--accent-gold, #c9a227);
|
|
}
|
|
|
|
/* ── Ofsted ──────────────────────────────────────────── */
|
|
.ofstedHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.ofstedGrade {
|
|
display: inline-block;
|
|
padding: 0.35rem 0.75rem;
|
|
font-size: 1rem;
|
|
line-height: 1.4;
|
|
font-weight: 700;
|
|
border-radius: 6px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ofstedGrade1 {
|
|
background: var(--accent-teal-bg);
|
|
color: var(--accent-teal, #2d7d7d);
|
|
}
|
|
.ofstedGrade2 {
|
|
background: rgba(60, 140, 60, 0.12);
|
|
color: #2f7a2f;
|
|
}
|
|
.ofstedGrade3 {
|
|
background: var(--accent-gold-bg);
|
|
color: var(--accent-gold-text, #7a6800);
|
|
}
|
|
.ofstedGrade4 {
|
|
background: var(--accent-coral-bg);
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
}
|
|
|
|
.rcGrade1 {
|
|
background: var(--accent-teal-bg);
|
|
color: var(--accent-teal, #2d7d7d);
|
|
}
|
|
.rcGrade2 {
|
|
background: rgba(60, 140, 60, 0.12);
|
|
color: #2f7a2f;
|
|
}
|
|
.rcGrade3 {
|
|
background: var(--accent-gold-bg);
|
|
color: var(--accent-gold-text, #7a6800);
|
|
}
|
|
.rcGrade4 {
|
|
background: rgba(249, 115, 22, 0.12);
|
|
color: #c2410c;
|
|
}
|
|
.rcGrade5 {
|
|
background: var(--accent-coral-bg);
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
}
|
|
|
|
.safeguardingMet {
|
|
display: inline-block;
|
|
padding: 0.2rem 0.6rem;
|
|
border-radius: 4px;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
background: var(--accent-teal-bg);
|
|
color: var(--accent-teal, #2d7d7d);
|
|
}
|
|
|
|
.safeguardingNotMet {
|
|
display: inline-block;
|
|
padding: 0.2rem 0.6rem;
|
|
border-radius: 4px;
|
|
font-size: 0.8125rem;
|
|
font-weight: 700;
|
|
background: var(--accent-coral-bg);
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
}
|
|
|
|
/* ── Ofsted grade grids (Report Card + OEIF) ──
|
|
Uniform, vertically-aligned grade chips. Labels reserve two lines so
|
|
single- and double-line labels put their chips on the same baseline;
|
|
every chip (Met, Strong, Expected standard, …) shares one font size,
|
|
padding and min-height regardless of how many lines its text wraps to. */
|
|
.gradeGrid .metricCard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.85rem 0.75rem;
|
|
}
|
|
.gradeGrid .metricLabel {
|
|
min-height: 2.6em;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
.gradeGrid .metricValue {
|
|
margin-top: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
max-width: 100%;
|
|
min-height: 2.6em;
|
|
padding: 0.3rem 0.7rem;
|
|
border-radius: 5px;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
text-align: center;
|
|
}
|
|
|
|
.ofstedDisclaimer {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted, #8a847a);
|
|
font-style: italic;
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
.ofstedDate {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted, #8a847a);
|
|
}
|
|
|
|
.ofstedPrevious {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted, #8a847a);
|
|
font-style: italic;
|
|
}
|
|
|
|
.ofstedReportLink {
|
|
font-size: 0.8125rem;
|
|
color: var(--accent-teal, #2d7d7d);
|
|
text-decoration: none;
|
|
margin-left: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ofstedReportLink:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ── Admissions ──────────────────────────────────────── */
|
|
.admissionsTypeBadge {
|
|
border-radius: 6px;
|
|
padding: 0.5rem 0.875rem;
|
|
font-size: 0.8125rem;
|
|
margin-bottom: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.admissionsSelective {
|
|
background: rgba(180, 120, 0, 0.1);
|
|
color: #8a6200;
|
|
border: 1px solid rgba(180, 120, 0, 0.25);
|
|
}
|
|
|
|
.admissionsFaith {
|
|
background: rgba(45, 125, 125, 0.08);
|
|
color: var(--accent-teal, #2d7d7d);
|
|
border: 1px solid rgba(45, 125, 125, 0.2);
|
|
}
|
|
|
|
.admissionsBadge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.3rem 0.75rem;
|
|
border-radius: 6px;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.sixthFormNote {
|
|
margin-top: 1rem;
|
|
padding: 0.625rem 0.875rem;
|
|
background: var(--bg-secondary, #f3ede4);
|
|
border-radius: 6px;
|
|
font-size: 0.825rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
border-left: 3px solid var(--accent-teal, #2d7d7d);
|
|
}
|
|
|
|
/* ── Deprivation ─────────────────────────────────────── */
|
|
.deprivationDots {
|
|
display: flex;
|
|
gap: 0.375rem;
|
|
margin: 0.75rem 0 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.deprivationDot {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
border-radius: 50%;
|
|
background: var(--bg-secondary, #f3ede4);
|
|
border: 2px solid var(--border-color, #e5dfd5);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.deprivationDotFilled {
|
|
background: var(--accent-teal, #2d7d7d);
|
|
border-color: var(--accent-teal, #2d7d7d);
|
|
}
|
|
|
|
.deprivationDesc {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.deprivationScaleLabel {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted, #8a847a);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* ── Ofsted all-same collapse ────────────────────────── */
|
|
.ofstedAllSame {
|
|
font-size: 0.9375rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
margin: 0.5rem 0 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.ofstedAllSame strong {
|
|
color: var(--text-primary, #1a1612);
|
|
}
|
|
|
|
/* .heroStatLabel is shared by the GCSE / Pupils stat cards below. */
|
|
.heroStatLabel {
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary, #5c564d);
|
|
}
|
|
|
|
/* ── GCSE hero stat cards (mirrors primary heroStatCard) ─ */
|
|
.heroStatGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 0.85rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.heroStatCard {
|
|
background: rgba(45, 125, 125, 0.1);
|
|
border: 1px solid rgba(45, 125, 125, 0.2);
|
|
border-radius: 12px;
|
|
padding: 1rem 1.1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.heroStatCard .heroStatLabel {
|
|
font-size: 0.6rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-muted, #6d685f);
|
|
}
|
|
|
|
.heroStatCard .heroStatValue {
|
|
font-family: var(--font-playfair), "Playfair Display", serif;
|
|
font-size: 2.1rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
color: var(--accent-teal, #2d7d7d);
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.4rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.heroStatCard .heroStatHint {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted, #6d685f);
|
|
font-style: normal;
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Gender split — attached beneath the Total pupils stat value */
|
|
.genderBar {
|
|
display: flex;
|
|
height: 4px;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
background: rgba(0, 0, 0, 0.08);
|
|
margin-top: 0.45rem;
|
|
}
|
|
|
|
.genderBarGirls {
|
|
background: #a04a68;
|
|
}
|
|
|
|
.genderBarBoys {
|
|
background: var(--accent-teal, #2d7d7d);
|
|
}
|
|
|
|
.genderSplitHint {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted, #6d685f);
|
|
margin-top: 0.35rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.genderSplitGirls {
|
|
color: #a04a68;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.genderSplitBoys {
|
|
color: var(--accent-teal, #2d7d7d);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.genderSplitSep {
|
|
color: var(--border-color, #e5dfd5);
|
|
}
|
|
|
|
/* ── Attainment 8 visual bar ─────────────────────────── */
|
|
.att8Viz {
|
|
margin: 1.25rem 0 0.5rem;
|
|
}
|
|
|
|
.att8VizLabel {
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
color: var(--text-muted, #6d685f);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.att8VizTrack {
|
|
position: relative;
|
|
height: 14px;
|
|
background: rgba(45, 125, 125, 0.08);
|
|
border: 1px solid var(--border-color, #e5dfd5);
|
|
border-radius: 4px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.att8VizFill {
|
|
height: 100%;
|
|
background: var(--accent-teal, #2d7d7d);
|
|
border-radius: 4px 0 0 4px;
|
|
transition: width 0.6s ease;
|
|
}
|
|
|
|
.att8VizNatLine {
|
|
position: absolute;
|
|
top: -4px;
|
|
bottom: -4px;
|
|
width: 2px;
|
|
background: var(--accent-coral, #e07256);
|
|
border-radius: 2px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.att8VizNatPill {
|
|
position: absolute;
|
|
top: -20px;
|
|
transform: translateX(-50%);
|
|
background: var(--accent-coral-dark, #b04a2e);
|
|
color: #fff;
|
|
font-size: 0.6rem;
|
|
font-weight: 700;
|
|
padding: 0.1rem 0.3rem;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.att8VizTicks {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 0.25rem;
|
|
font-size: 0.6rem;
|
|
color: var(--text-muted, #6d685f);
|
|
}
|
|
|
|
/* ── Progress 8 number line ──────────────────────────── */
|
|
.p8Viz {
|
|
margin: 1.25rem 0 0.5rem;
|
|
}
|
|
|
|
.p8VizLabel {
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
color: var(--text-muted, #6d685f);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.p8VizTrack {
|
|
position: relative;
|
|
height: 14px;
|
|
background: rgba(45, 125, 125, 0.06);
|
|
border: 1px solid var(--border-color, #e5dfd5);
|
|
border-radius: 4px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.p8VizCi {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: rgba(45, 125, 125, 0.18);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.p8VizZero {
|
|
position: absolute;
|
|
top: -4px;
|
|
bottom: -4px;
|
|
width: 2px;
|
|
background: var(--border-color, #e5dfd5);
|
|
z-index: 1;
|
|
}
|
|
|
|
.p8VizDot {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: var(--accent-teal, #2d7d7d);
|
|
border: 2px solid white;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
|
z-index: 3;
|
|
}
|
|
|
|
.p8VizDotNeg {
|
|
background: var(--accent-coral, #e07256);
|
|
}
|
|
|
|
.p8VizTicks {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 0.25rem;
|
|
font-size: 0.6rem;
|
|
color: var(--text-muted, #6d685f);
|
|
}
|
|
|
|
/* ── History accordion ───────────────────────────────── */
|
|
.historyDisclosure {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.historyToggle {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: var(--text-muted, #6d685f);
|
|
padding: 0.5rem 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
user-select: none;
|
|
}
|
|
|
|
.historyToggle::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.historyToggle::before {
|
|
content: "▶";
|
|
font-size: 0.6rem;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.historyDisclosure[open] .historyToggle::before {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* ── Responsive ──────────────────────────────────────── */
|
|
@media (max-width: 768px) {
|
|
.header {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.headerContent {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.actions {
|
|
width: 100%;
|
|
}
|
|
|
|
.btnAdd,
|
|
.btnRemove {
|
|
flex: 1;
|
|
}
|
|
|
|
.schoolName {
|
|
word-break: break-word;
|
|
}
|
|
|
|
.badges {
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.badge {
|
|
font-size: 0.75rem;
|
|
padding: 0.1rem 0.375rem;
|
|
}
|
|
|
|
/* Collapsed below the fold on phones/tablets; revealed via "Show all
|
|
details" so the metrics surface sooner. */
|
|
.detailsToggle {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.headerDetails {
|
|
display: none;
|
|
}
|
|
|
|
.headerDetailsOpen {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.metricsGrid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.metricValue {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.heroStatGrid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.heroStatCard .heroStatValue {
|
|
font-size: 1.85rem;
|
|
}
|
|
|
|
/* On mobile let the chart container flow naturally — PerformanceChart's
|
|
own .chartWrapper carries the definite canvas height (220px) plus the
|
|
chip strip above it. A fixed 220px here double-constrained the two and
|
|
clipped the chips onto the plot area. */
|
|
.chartContainer {
|
|
height: auto;
|
|
}
|
|
|
|
.dataTable {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.dataTable th,
|
|
.dataTable td {
|
|
padding: 0.5rem 0.375rem;
|
|
}
|
|
|
|
.card {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.sectionTitle {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.ofstedReportLink {
|
|
margin-left: 0;
|
|
display: block;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.admissionsTypeBadge {
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.metricsGrid {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.metricCard {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.metricLabel {
|
|
font-size: 0.625rem;
|
|
}
|
|
|
|
.card {
|
|
padding: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* GIAS "Open, but proposed to close" notice strip */
|
|
.closingStrip {
|
|
background: #fdf6e3;
|
|
border-left: 4px solid #e2c96f;
|
|
border-radius: 0 6px 6px 0;
|
|
padding: 0.55rem 0.9rem;
|
|
margin: 0.5rem 0;
|
|
font-size: 0.88rem;
|
|
color: #6e5a00;
|
|
max-width: 68ch;
|
|
}
|
|
.closingStrip strong {
|
|
color: #8a6200;
|
|
}
|