Tudor Sitaru
5abab067a1
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 13s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 50s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 1m4s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
The "How Hard to Get Into This School" tile mixed a progress bar (places vs first-choice) with three text metric cards, making the data feel fragmented and hiding the real narrative. The progress bar also broke visually when undersubscribed and didn't scale to different school sizes. Replace with a typographic Q&A list that answers the questions parents actually ask — "How many places were offered?", "How many families wanted this school first?", "How many got their first choice?", "How many applied in total?" — with a verdict footer (Oversubscribed / Not oversubscribed + one-sentence explanation). The third row now uses first_preference_offers (already in the API response) to show "27 of 42 (64.3%)" instead of just the percentage, giving the raw count parents actually want. Each row is independently null-gated; rows stack vertically under 480px so the Playfair numeral stays legible. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1042 lines
20 KiB
CSS
1042 lines
20 KiB
CSS
.container {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Header Section */
|
|
.header {
|
|
background: var(--bg-card, white);
|
|
border: 1px solid var(--border-color, #e5dfd5);
|
|
border-radius: 10px;
|
|
padding: 1.25rem 1.5rem;
|
|
margin-bottom: 0;
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
.headerContent {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.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.1;
|
|
letter-spacing: -0.01em;
|
|
font-family: var(--font-playfair), 'Playfair Display', serif;
|
|
}
|
|
|
|
.meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.metaItem {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
padding: 0.125rem 0.5rem;
|
|
background: var(--bg-secondary, #f3ede4);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.address {
|
|
font-size: 0.875rem;
|
|
color: var(--text-muted, #8a847a);
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
|
|
/* Expanded header details (headteacher, website, trust, pupils) */
|
|
.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;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-shrink: 0;
|
|
align-self: center;
|
|
}
|
|
|
|
.btnAdd,
|
|
.btnRemove {
|
|
padding: 0.75rem 1.25rem;
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
white-space: nowrap;
|
|
box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.08));
|
|
}
|
|
|
|
.btnAdd {
|
|
background: var(--accent-coral, #e07256);
|
|
color: white;
|
|
}
|
|
|
|
.btnAdd:hover {
|
|
background: var(--accent-coral-dark, #c45a3f);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btnRemove {
|
|
background: var(--accent-teal, #2d7d7d);
|
|
color: white;
|
|
}
|
|
|
|
.btnRemove:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* ── Sticky Section Navigation ──────────────────────── */
|
|
.sectionNav {
|
|
position: sticky;
|
|
top: 3.5rem;
|
|
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);
|
|
}
|
|
|
|
.sectionNav::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.sectionNavInner {
|
|
display: inline-flex;
|
|
gap: 0.375rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.sectionNavBack {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.3rem 0.625rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--accent-coral, #e07256);
|
|
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;
|
|
}
|
|
|
|
.sectionNavBack:hover {
|
|
background: var(--bg-secondary, #f3ede4);
|
|
border-color: var(--accent-coral, #e07256);
|
|
}
|
|
|
|
.sectionNavDivider {
|
|
width: 1px;
|
|
height: 1rem;
|
|
background: var(--border-color, #e5dfd5);
|
|
margin: 0 0.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sectionNavLink {
|
|
display: inline-block;
|
|
padding: 0.3rem 0.625rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary, #5c564d);
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
transition: all 0.15s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sectionNavLink:hover {
|
|
background: var(--bg-secondary, #f3ede4);
|
|
color: var(--text-primary, #1a1612);
|
|
}
|
|
|
|
.sectionNavLinkActive {
|
|
background: var(--accent-coral, #e07256);
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sectionNavLinkActive:hover {
|
|
background: var(--accent-coral-dark, #c45a3f);
|
|
color: white;
|
|
}
|
|
|
|
/* Unified card for all content sections */
|
|
.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;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Response count badge */
|
|
.responseBadge {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
font-family: var(--font-dm-sans), sans-serif;
|
|
color: var(--text-muted, #8a847a);
|
|
background: var(--bg-secondary, #f3ede4);
|
|
padding: 0.1rem 0.5rem;
|
|
border-radius: 999px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.subSectionTitle {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary, #5c564d);
|
|
margin: 1.25rem 0 0.75rem;
|
|
}
|
|
|
|
/* Parent recommendation line in Ofsted section */
|
|
.parentRecommendLine {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
margin: 0.5rem 0 0;
|
|
}
|
|
|
|
.parentRecommendLine strong {
|
|
color: var(--accent-teal, #2d7d7d);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.metricHint {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted, #8a847a);
|
|
margin-top: 0.3rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Progress score colour coding */
|
|
.progressPositive {
|
|
color: var(--accent-teal, #2d7d7d);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.progressNegative {
|
|
color: var(--accent-coral, #e07256);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ── Semantic status colours (unified) ────────────── */
|
|
.statusGood {
|
|
background: var(--accent-teal-bg);
|
|
color: var(--accent-teal, #2d7d7d);
|
|
}
|
|
|
|
.statusWarn {
|
|
background: var(--accent-gold-bg);
|
|
color: #b8920e;
|
|
}
|
|
|
|
.statusBad {
|
|
background: var(--accent-coral-bg);
|
|
color: var(--accent-coral, #e07256);
|
|
}
|
|
|
|
/* Charts Section */
|
|
.chartContainer {
|
|
width: 100%;
|
|
height: 280px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Detailed Metrics - Compact Grid Layout */
|
|
.metricGroupsGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.metricGroup {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.metricGroupTitle {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #1a1612);
|
|
margin-bottom: 0.5rem;
|
|
padding-bottom: 0.375rem;
|
|
border-bottom: 1px solid var(--border-color, #e5dfd5);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* Map */
|
|
.mapContainer {
|
|
width: 100%;
|
|
height: 250px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-color, #e5dfd5);
|
|
isolation: isolate;
|
|
z-index: 0;
|
|
position: relative;
|
|
}
|
|
|
|
/* History Table */
|
|
.tableWrapper {
|
|
overflow-x: auto;
|
|
max-width: 100%;
|
|
margin-top: 0.5rem;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.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: #3c8c3c; }
|
|
.ofstedGrade3 { background: var(--accent-gold-bg); color: #b8920e; }
|
|
.ofstedGrade4 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); }
|
|
|
|
/* Report Card grade colours (5-level scale, lower = better) */
|
|
.rcGrade1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); } /* Exceptional */
|
|
.rcGrade2 { background: rgba(60, 140, 60, 0.12); color: #3c8c3c; } /* Strong */
|
|
.rcGrade3 { background: var(--accent-gold-bg); color: #b8920e; } /* Expected standard */
|
|
.rcGrade4 { background: rgba(249, 115, 22, 0.12); color: #c2410c; } /* Needs attention */
|
|
.rcGrade5 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); } /* Urgent improvement */
|
|
|
|
/* Safeguarding value (used inside a standard metricCard) */
|
|
.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, #e07256);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Parent View */
|
|
.parentViewGrid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.parentViewRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.parentViewLabel {
|
|
flex: 0 0 18rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.parentViewBar {
|
|
flex: 1;
|
|
height: 0.5rem;
|
|
background: var(--bg-secondary, #f3ede4);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.parentViewFill {
|
|
height: 100%;
|
|
background: var(--accent-teal, #2d7d7d);
|
|
border-radius: 4px;
|
|
transition: width 0.4s ease;
|
|
}
|
|
|
|
.parentViewPct {
|
|
flex: 0 0 2.75rem;
|
|
text-align: right;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #1a1612);
|
|
}
|
|
|
|
/* Admissions badge — uses unified status colours */
|
|
.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;
|
|
}
|
|
|
|
/* Deprivation dot scale */
|
|
.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;
|
|
}
|
|
|
|
/* Progress note */
|
|
.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);
|
|
}
|
|
|
|
.progressNote {
|
|
margin-top: 0.75rem;
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
/* ── Responsive ──────────────────────────────────────── */
|
|
@media (max-width: 768px) {
|
|
.headerContent {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.actions {
|
|
width: 100%;
|
|
}
|
|
|
|
.btnAdd,
|
|
.btnRemove {
|
|
flex: 1;
|
|
}
|
|
|
|
.schoolName {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.meta {
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.metricsGrid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.metricGroupsGrid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.chartContainer {
|
|
height: 220px;
|
|
}
|
|
|
|
.mapContainer {
|
|
height: 200px;
|
|
}
|
|
|
|
.dataTable {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.dataTable th,
|
|
.dataTable td {
|
|
padding: 0.5rem 0.375rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.parentViewRow {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.parentViewLabel {
|
|
flex: none;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.parentViewBar {
|
|
width: 100%;
|
|
}
|
|
|
|
.parentViewPct {
|
|
flex: none;
|
|
}
|
|
|
|
.card {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
|
|
/* ── Hero signal chip strip (A2) ─────────────────────────────────────── */
|
|
.heroChips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-top: 1.25rem;
|
|
}
|
|
|
|
.heroChip {
|
|
flex: 0 0 240px;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 8px;
|
|
border-left: 3px solid var(--border-color, #e5dfd5);
|
|
background: var(--bg-secondary, #f3ede4);
|
|
color: var(--text-primary, #1a1612);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.heroChipTitle {
|
|
font-size: 0.9375rem;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.heroChipSub {
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.heroChipDetail {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
/* Hero tone scheme — independent of the .ofstedGrade{N} / .rcGrade{N} badges
|
|
so the same tone class can be applied to a chip (background tint + border)
|
|
or a serif number (colour only) without one bleeding into the other. */
|
|
.tone-teal { --hero-tone: var(--accent-teal, #2d7d7d); }
|
|
.tone-green { --hero-tone: #3c8c3c; }
|
|
.tone-gold { --hero-tone: var(--accent-gold, #c9a227); }
|
|
.tone-coral { --hero-tone: var(--accent-coral, #e07256); }
|
|
.tone-neutral { --hero-tone: var(--text-muted, #8a847a); }
|
|
|
|
.heroChip.tone-teal,
|
|
.heroChip.tone-green,
|
|
.heroChip.tone-gold,
|
|
.heroChip.tone-coral,
|
|
.heroChip.tone-neutral {
|
|
border-left-color: var(--hero-tone);
|
|
background: color-mix(in srgb, var(--hero-tone) 10%, var(--bg-card, white));
|
|
}
|
|
|
|
.heroChip.tone-neutral {
|
|
background: var(--bg-secondary, #f3ede4);
|
|
}
|
|
|
|
/* ── Hero at-a-glance stats (A3) ─────────────────────────────────────── */
|
|
.heroStats {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1.25rem 3rem;
|
|
margin-top: 1.5rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--border-color, #e5dfd5);
|
|
}
|
|
|
|
.heroStat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
min-width: 0;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.heroStatNumber,
|
|
.heroStatNumberSerif {
|
|
font-family: var(--font-playfair), 'Playfair Display', serif;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
color: var(--text-primary, #1a1612);
|
|
/* Fixed height so every stat's label row sits at the same Y, regardless
|
|
of whether the content is a short numeral or a longer word. Each
|
|
stat's content is bottom-aligned within this box. */
|
|
min-height: clamp(2rem, 4vw, 2.75rem);
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.heroStatNumber {
|
|
font-size: clamp(2rem, 4vw, 2.75rem);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.heroStatNumberSerif {
|
|
/* Slightly smaller so long words like "Requires Improvement" still fit,
|
|
but aligned on the same bottom baseline as the numeric stats. */
|
|
font-size: clamp(1.75rem, 3.5vw, 2.25rem);
|
|
}
|
|
|
|
.heroStatNumberSerif.tone-teal,
|
|
.heroStatNumberSerif.tone-green,
|
|
.heroStatNumberSerif.tone-gold,
|
|
.heroStatNumberSerif.tone-coral,
|
|
.heroStatNumberSerif.tone-neutral {
|
|
color: var(--hero-tone);
|
|
}
|
|
|
|
.heroStatLabel {
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary, #5c564d);
|
|
}
|
|
|
|
.heroStatFoot {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted, #8a847a);
|
|
}
|
|
|
|
.heroDataNote {
|
|
margin: 0.5rem 0 0;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted, #8a847a);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.heroChips {
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.heroChip {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.heroStats {
|
|
gap: 1rem 1.5rem;
|
|
}
|
|
|
|
.heroSummary {
|
|
font-size: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
/* ── Progress scores row (below SatsChart) ── */
|
|
.progressScoresRow {
|
|
margin-top: 1.25rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--border-color, #e5dfd5);
|
|
}
|
|
|
|
.progressScoresGrid {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.progressScoreItem {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.progressScoreLabel {
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
color: var(--text-muted, #6d685f);
|
|
}
|
|
|
|
.progressScoreValue {
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary, #1a1612);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ── Admissions Q&A list ── */
|
|
.admissionsQa {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0;
|
|
}
|
|
|
|
.admissionsQaRow {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
padding: 0.85rem 0;
|
|
border-bottom: 1px solid var(--border-color, #e5dfd5);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.admissionsQaRow:first-child {
|
|
padding-top: 0.35rem;
|
|
}
|
|
|
|
.admissionsQaRow:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0.35rem;
|
|
}
|
|
|
|
.admissionsQaQuestion {
|
|
font-size: 0.92rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
line-height: 1.35;
|
|
margin: 0;
|
|
}
|
|
|
|
.admissionsQaAnswer {
|
|
font-family: var(--font-playfair), 'Playfair Display', Georgia, serif;
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary, #1a1612);
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
font-variant-numeric: tabular-nums;
|
|
margin: 0;
|
|
}
|
|
|
|
.admissionsQaAnswerSub {
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
color: var(--text-muted, #6d685f);
|
|
margin-left: 0.35rem;
|
|
font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
|
|
}
|
|
|
|
.admissionsVerdict {
|
|
margin-top: 1rem;
|
|
padding-top: 0.9rem;
|
|
border-top: 1px solid var(--border-color, #e5dfd5);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.admissionsVerdictText {
|
|
line-height: 1.4;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.admissionsQaRow {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.25rem;
|
|
padding: 0.7rem 0;
|
|
}
|
|
|
|
.admissionsQaAnswer {
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
/* ── History accordion ── */
|
|
.historyDisclosure {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.historyToggle {
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: var(--text-muted, #6d685f);
|
|
cursor: pointer;
|
|
padding: 0.5rem 0;
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.historyToggle::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.historyToggle::before {
|
|
content: '▸';
|
|
display: inline-block;
|
|
transition: transform 0.2s ease;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.historyDisclosure[open] > .historyToggle::before {
|
|
transform: rotate(90deg);
|
|
}
|