:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* ==========================================================================
NGSM GROUP — SHARED DESIGN SYSTEM (core.css)
Used identically by ngsm.* , evo.* and lac.*
Brand colours are NOT defined here. Each site supplies them via theme.css
by overriding the --brand-* / --accent-* custom properties.
========================================================================== */
/* ---------- 1. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; }
/* the hidden attribute must beat any component display rule */
[hidden] { display: none !important; }
/* ---------- 2. TOKENS ---------- */
:root {
/* Neutral ink scale — shared across all three sites */
--ink-900:#0e1117;
--ink-800:#1b2029;
--ink-700:#333a47;
--ink-600:#4d5563;
--ink-500:#6b7382;
--ink-400:#98a0ad;
--ink-300:#c3c9d2;
--ink-200:#e0e4ea;
--ink-100:#eef1f5;
--ink-050:#f7f9fb;
--white:#ffffff;
/* Brand fallbacks — every site's theme.css overrides these */
--brand-900:#0d2436;
--brand-800:#123249;
--brand-700:#17415f;
--brand-600:#1d5478;
--brand-500:#2a6d96;
--brand-300:#8fb6cd;
--brand-100:#dbe8f0;
--brand-050:#f1f7fa;
--accent-600:#b8860b;
--accent-500:#d4a017;
--accent-100:#faf1d8;
--brand-contrast:#ffffff; /* text colour that sits on --brand-800 */
--brand-gradient: linear-gradient(135deg, var(--brand-800), var(--brand-600));
/* Semantic */
--surface:var(--white);
--surface-alt:var(--ink-050);
--surface-deep:var(--brand-900);
--text:var(--ink-800);
--text-muted:var(--ink-600);
--line:var(--ink-200);
/* Type */
--font-display:"Source Serif 4", Georgia, "Times New Roman", serif;
--font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-arabic:"IBM Plex Sans Arabic", "Noto Kufi Arabic", Tahoma, sans-serif;
--fs-xs:0.75rem; --fs-sm:0.875rem; --fs-base:1rem; --fs-md:1.0625rem;
--fs-lg:1.25rem; --fs-xl:1.5rem; --fs-2xl:1.875rem; --fs-3xl:2.375rem;
--fs-4xl:3rem; --fs-5xl:3.75rem;
/* Space */
--s-1:0.25rem; --s-2:0.5rem; --s-3:0.75rem; --s-4:1rem; --s-5:1.5rem;
--s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;
/* Layout */
--container:1240px;
--container-narrow:820px;
--radius-sm:6px; --radius:12px; --radius-lg:20px; --radius-pill:999px;
/* Elevation */
--shadow-sm:0 1px 2px rgba(14,17,23,.06), 0 1px 3px rgba(14,17,23,.04);
--shadow:0 4px 12px rgba(14,17,23,.07), 0 2px 4px rgba(14,17,23,.04);
--shadow-lg:0 18px 40px rgba(14,17,23,.10), 0 6px 14px rgba(14,17,23,.05);
--shadow-xl:0 30px 70px rgba(14,17,23,.16);
--ease:cubic-bezier(.22,.61,.36,1);
--dur:.28s;
--header-h:76px;
}
@media (max-width:900px){ :root{ --fs-3xl:2rem; --fs-4xl:2.375rem; --fs-5xl:2.75rem; --header-h:64px; } }
/* ---------- 3. BASE ---------- */
body {
font-family:var(--font-body);
font-size:var(--fs-md);
line-height:1.7;
color:var(--text);
background:var(--surface);
}
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:600; line-height:1.15; letter-spacing:-.015em; color:var(--ink-900); }
h1{font-size:var(--fs-4xl);} h2{font-size:var(--fs-3xl);} h3{font-size:var(--fs-xl);} h4{font-size:var(--fs-lg);}
p{ max-width:72ch; }
a{ text-decoration:none; transition:color var(--dur) var(--ease); }
:focus-visible{ outline:3px solid var(--accent-500); outline-offset:3px; border-radius:3px; }
/* ---------- 4. LAYOUT ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--s-5); }
.container--narrow{ max-width:var(--container-narrow); }
.section{ padding-block:var(--s-9); }
.section--tight{ padding-block:var(--s-8); }
.section--alt{ background:var(--surface-alt); }
.section--brand{ background:var(--brand-900); color:rgba(255,255,255,.86); }
.section--brand h1,.section--brand h2,.section--brand h3,.section--brand h4{ color:#fff; }
.grid{ display:grid; gap:var(--s-5); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8); align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:var(--s-6);} }
/* ---------- 5. TYPE UTILITIES ---------- */
.eyebrow{
font-family:var(--font-body); font-size:var(--fs-xs); font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--brand-600);
display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-4);
}
.eyebrow::before{ content:""; width:28px; height:2px; background:var(--accent-500); flex:none; }
.section--brand .eyebrow{ color:var(--accent-500); }
.lead{ font-size:var(--fs-lg); line-height:1.6; color:var(--text-muted); }
.section--brand .lead{ color:rgba(255,255,255,.8); }
.section-head{ max-width:760px; margin-bottom:var(--s-7); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }
.muted{ color:var(--text-muted); }
.rule{ height:3px; width:56px; background:var(--accent-500); border-radius:2px; margin:var(--s-4) 0; }
/* ---------- 6. BUTTONS ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; letter-spacing:.01em;
padding:.85rem 1.6rem; border-radius:var(--radius-pill); border:1.5px solid transparent;
cursor:pointer; transition:all var(--dur) var(--ease); white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition:transform var(--dur) var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
[dir="rtl"] .btn:hover svg{ transform:translateX(-3px); }
.btn--primary{ background:var(--brand-700); color:#fff; }
.btn--primary:hover{ background:var(--brand-800); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn--accent{ background:var(--accent-500); color:var(--ink-900); }
.btn--accent:hover{ filter:brightness(1.06); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn--ghost{ border-color:var(--ink-300); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--brand-700); color:var(--brand-700); background:var(--brand-050); }
.btn--light{ border-color:rgba(255,255,255,.45); color:#fff; background:transparent; }
.btn--light:hover{ background:#fff; color:var(--brand-900); border-color:#fff; }
.btn--sm{ padding:.6rem 1.15rem; font-size:var(--fs-xs); }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }
.arrow-link{ display:inline-flex; align-items:center; gap:var(--s-2); font-weight:600; font-size:var(--fs-sm); color:var(--brand-700); }
.arrow-link::after{ content:"→"; transition:transform var(--dur) var(--ease); }
[dir="rtl"] .arrow-link::after{ content:"←"; }
.arrow-link:hover::after{ transform:translateX(4px); }
[dir="rtl"] .arrow-link:hover::after{ transform:translateX(-4px); }
/* ---------- 7. HEADER / NAV ---------- */
.topbar{
background:var(--brand-900); color:rgba(255,255,255,.72);
font-size:var(--fs-xs); letter-spacing:.02em;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); min-height:38px; flex-wrap:wrap; }
.topbar a{ color:rgba(255,255,255,.72); }
.topbar a:hover{ color:#fff; }
.topbar-group{ display:flex; align-items:center; gap:var(--s-4); }
.topbar-sep{ opacity:.3; }
.family-switch{ display:flex; align-items:center; gap:var(--s-3); white-space:nowrap; }
.family-switch span{ opacity:.55; }
@media (max-width:720px){
.topbar .container{ gap:0; }
.family-switch{ overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; max-width:100%; padding-block:6px; }
.family-switch::-webkit-scrollbar{ display:none; }
.topbar-group{ white-space:nowrap; }
}
.family-switch a[aria-current="true"]{ color:#fff; font-weight:600; }
.site-header{
position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid var(--line); transition:box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck{ box-shadow:var(--shadow); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); min-height:var(--header-h); }
/* Brand block = school logo + permanently locked accreditation marks */
.brand-block{ display:flex; align-items:center; gap:var(--s-4); flex:none; min-width:0; }
.header-accred{
display:flex; align-items:center; gap:var(--s-4);
padding-inline-start:var(--s-4); border-inline-start:1px solid var(--line);
}
.header-accred img{ height:var(--ah,30px); width:auto; flex:none; }
@media (max-width:1240px){ .header-accred{ gap:var(--s-3); padding-inline-start:var(--s-3); } .header-accred img{ height:calc(var(--ah,30px) * .85); } }
@media (max-width:560px){ .header-accred{ gap:10px; padding-inline-start:10px; } .header-accred img{ height:calc(var(--ah,30px) * .68); } }
.brand-lockup{ display:flex; align-items:center; gap:var(--s-3); flex:none; }
.brand-lockup img{ height:var(--logo-h,46px); width:auto; }
.brand-lockup .bl-text{ display:flex; flex-direction:column; line-height:1.15; }
.bl-name{ font-family:var(--font-display); font-size:1.0625rem; font-weight:700; color:var(--brand-900); letter-spacing:-.01em; }
.bl-sub{ font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); }
@media (max-width:900px){ .brand-lockup img{ height:var(--logo-h-sm,38px); } .bl-name{ font-size:.95rem; } .bl-sub{ font-size:.625rem; } }
.nav{ display:flex; align-items:center; gap:var(--s-1); }
.nav-item{ position:relative; }
.nav-link{
display:flex; align-items:center; gap:6px; padding:.55rem .8rem; border-radius:var(--radius-sm);
font-size:.9375rem; font-weight:500; color:var(--ink-700); white-space:nowrap;
}
/* Sites carrying accreditation marks in the header need a tighter nav rhythm */
@media (min-width:1081px) and (max-width:1400px){
.nav-link{ padding:.55rem .58rem; font-size:.9rem; }
}
.nav-link:hover,.nav-item:hover>.nav-link{ color:var(--brand-700); background:var(--brand-050); }
.nav-link[aria-current="page"]{ color:var(--brand-700); font-weight:600; }
.nav-link .caret{ width:9px; height:9px; opacity:.5; transition:transform var(--dur) var(--ease); }
.nav-item:hover .caret{ transform:rotate(180deg); }
.dropdown{
position:absolute; top:calc(100% + 10px); inset-inline-start:0; min-width:250px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg);
padding:var(--s-2); opacity:0; visibility:hidden; transform:translateY(8px);
transition:all var(--dur) var(--ease); z-index:120;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:.6rem .8rem; border-radius:var(--radius-sm); font-size:.9rem; color:var(--ink-700); }
.dropdown a:hover{ background:var(--brand-050); color:var(--brand-700); }
.dropdown-label{ padding:.5rem .8rem .25rem; font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); font-weight:600; }
.header-cta{ display:flex; align-items:center; gap:var(--s-3); flex:none; }
.lang-switch{ display:flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:var(--radius-pill); padding:3px; }
.lang-switch button{
border:0; background:transparent; cursor:pointer; padding:.28rem .6rem; border-radius:var(--radius-pill);
font-size:var(--fs-xs); font-weight:600; color:var(--ink-500); transition:all var(--dur) var(--ease);
}
.lang-switch button:hover{ color:var(--brand-700); }
.lang-switch button[aria-pressed="true"]{ background:var(--brand-700); color:#fff; }
.nav-toggle{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink-800); position:relative; transition:all var(--dur) var(--ease); }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink-800); transition:all var(--dur) var(--ease); }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
@media (max-width:1140px){
.nav-toggle{ display:flex; }
/* The drawer covers the whole screen and sits ABOVE the page, while the
top bar and the header — and so the close button — stay above the
drawer. Without the stacking order the hero and the news ticker painted
straight through the open menu. */
/* The header uses backdrop-filter, and an element with a backdrop filter
becomes the containing block for its position:fixed children — which is
why the drawer was being measured against the header instead of the
screen. Drop the blur on a phone and the drawer fills the viewport. */
.topbar{ position:relative; z-index:1300; }
.site-header{
z-index:1300; background:#fff;
backdrop-filter:none; -webkit-backdrop-filter:none;
}
/* The drawer is a child of the header, so the logo and the close button
have to be lifted above it or they disappear behind the open menu. */
.brand-block, .header-cta{ position:relative; z-index:1400; }
.nav{
position:fixed; inset:0; z-index:1200; background:#fff; flex-direction:column;
align-items:stretch; gap:0; overflow-y:auto; overscroll-behavior:contain;
padding:calc(var(--header-h) + 62px) var(--s-5) var(--s-7);
transform:translateX(100%); transition:transform var(--dur) var(--ease);
border-top:1px solid var(--line);
}
.nav.is-open{ transform:translateX(0); }
.nav-link{ padding:.9rem .25rem; font-size:1.05rem; border-bottom:1px solid var(--ink-100); border-radius:0; justify-content:space-between; }
.dropdown{
position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0;
border-inline-start:2px solid var(--brand-100); border-radius:0; margin-inline-start:var(--s-3);
padding:var(--s-1) 0 var(--s-3); display:none;
}
.nav-item.is-expanded .dropdown{ display:block; }
.header-cta .btn{ display:none; }
}
/* ---------- 8. HERO ---------- */
.hero{ position:relative; background:var(--brand-900); color:#fff; overflow:hidden; }
.hero::after{
content:""; position:absolute; inset:0;
background:radial-gradient(1000px 500px at 78% 12%, rgba(255,255,255,.10), transparent 60%);
pointer-events:none;
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
/* Pattern variant — used until real campus photography is supplied.
Swap the ![]()
for a photograph and remove --pattern to get the photo treatment. */
.hero-media--pattern img{ opacity:1; }
.hero-media--pattern::after{ background:none; }
.hero-media::after{
content:""; position:absolute; inset:0;
background:linear-gradient(100deg, var(--brand-900) 8%, rgba(13,36,54,.78) 48%, rgba(13,36,54,.42) 100%);
}
[dir="rtl"] .hero-media::after{ background:linear-gradient(260deg, var(--brand-900) 8%, rgba(13,36,54,.78) 48%, rgba(13,36,54,.42) 100%); }
.hero-inner{ position:relative; z-index:2; padding-block:var(--s-10) var(--s-9); max-width:760px; }
.hero h1{ color:#fff; font-size:var(--fs-5xl); margin-bottom:var(--s-5); }
.hero .lead{ color:rgba(255,255,255,.85); max-width:60ch; }
.hero .eyebrow{ color:var(--accent-500); }
.hero-stats{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:var(--s-8); padding-block:var(--s-6); border-top:1px solid rgba(255,255,255,.16); }
.hero-stat .n{ font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:700; color:#fff; line-height:1; }
.hero-stat .l{ font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-top:var(--s-2); }
@media (max-width:900px){ .hero-inner{ padding-block:var(--s-8) var(--s-7);} .hero-stats{ gap:var(--s-5); } }
/* Interior page banner */
.page-banner{ background:var(--brand-gradient); color:#fff; padding-block:var(--s-8) var(--s-7); position:relative; overflow:hidden; }
.page-banner::after{ content:""; position:absolute; inset-inline-end:-80px; top:-80px; width:340px; height:340px; border-radius:50%; background:rgba(255,255,255,.05); }
.page-banner h1{ color:#fff; position:relative; z-index:2; }
.page-banner .lead{ color:rgba(255,255,255,.82); position:relative; z-index:2; margin-top:var(--s-4); }
.breadcrumb{ font-size:var(--fs-xs); color:rgba(255,255,255,.65); margin-bottom:var(--s-4); position:relative; z-index:2; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span{ opacity:.5; margin-inline:.4rem; }
/* ---------- 9. CARDS ---------- */
.card{
background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--s-6);
transition:all var(--dur) var(--ease); display:flex; flex-direction:column; gap:var(--s-3);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--brand-300); }
.card h3{ font-size:var(--fs-lg); }
.card p{ font-size:var(--fs-base); color:var(--text-muted); flex:1; }
.card-icon{
width:52px; height:52px; border-radius:14px; background:var(--brand-050); color:var(--brand-700);
display:flex; align-items:center; justify-content:center; margin-bottom:var(--s-2);
}
.card-icon svg{ width:24px; height:24px; }
.card--media{ padding:0; overflow:hidden; }
.card--media img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.card--media .card-body{ padding:var(--s-5) var(--s-6) var(--s-6); display:flex; flex-direction:column; gap:var(--s-3); flex:1; }
.card--flat{ border:0; background:var(--surface-alt); }
.card--flat:hover{ transform:none; box-shadow:none; }
/* Brand architecture cards (NGSM home) */
.brand-card{
position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
background:#fff; display:flex; flex-direction:column; transition:all var(--dur) var(--ease);
}
.brand-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-xl); }
.brand-card .bc-bar{ height:5px; background:var(--bc-color,var(--brand-600)); }
.brand-card .bc-body{ padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-3); flex:1; }
.brand-card .bc-logo{ height:56px; width:auto; align-self:flex-start; margin-bottom:var(--s-2); }
.brand-card--future{ border-style:dashed; background:var(--surface-alt); }
.brand-card--future:hover{ transform:none; box-shadow:none; }
/* Brand architecture diagram */
.arch-tier{ display:flex; justify-content:center; }
.arch-node{
background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
padding:var(--s-5) var(--s-7); text-align:center; box-shadow:var(--shadow-sm); max-width:420px;
}
.arch-node--root{ border-top:4px solid var(--brand-700); }
.arch-node p{ font-size:var(--fs-sm); color:var(--text-muted); margin:var(--s-2) auto 0; }
.arch-logo{ height:52px; width:auto; margin-inline:auto; }
.arch-connector{ display:flex; justify-content:center; align-items:center; height:46px; position:relative; }
.arch-connector span{ position:absolute; background:var(--line); }
.arch-connector span:first-child{ width:2px; height:100%; }
.arch-connector span:last-child{ height:2px; width:52%; top:50%; }
.arch-connector--sub span:last-child{ width:52%; }
.arch-label{
text-align:center; font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-400); font-weight:600; margin-bottom:var(--s-5);
}
/* Stat band */
.stat-band{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s-5); }
.stat{ text-align:center; padding:var(--s-5) var(--s-3); }
.stat .n{ font-family:var(--font-display); font-size:var(--fs-4xl); font-weight:700; color:var(--brand-700); line-height:1; }
.section--brand .stat .n{ color:var(--accent-500); }
.stat .l{ font-size:var(--fs-sm); color:var(--text-muted); margin-top:var(--s-2); }
.section--brand .stat .l{ color:rgba(255,255,255,.7); }
/* Value / pillar list */
.pillar{ display:flex; gap:var(--s-4); align-items:flex-start; }
.pillar .p-num{
flex:none; width:38px; height:38px; border-radius:50%; background:var(--brand-050); color:var(--brand-700);
display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-sm);
}
.section--brand .pillar .p-num{ background:rgba(255,255,255,.1); color:var(--accent-500); }
.pillar h4{ margin-bottom:var(--s-1); }
.section--brand .pillar p{ color:rgba(255,255,255,.75); }
/* Accreditation strip — every mark sits in an identical white chip so logos
with baked-in white backgrounds match those with transparency. */
.accred-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s-5); padding-block:var(--s-6); }
.accred-strip > img, .accred-item{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
padding:var(--s-4) var(--s-5); box-shadow:var(--shadow-sm);
/* Never let flex shrink a mark: a squeezed logo reads as a broken image.
The row wraps instead. */
flex:0 0 auto;
}
/* content-box so the declared height is the LOGO's height, not the chip's.
Under border-box a wide, short mark (CIS) lost almost all of its height to
the chip padding and collapsed to a smudge. */
.accred-strip > img{ object-fit:contain; width:auto; box-sizing:content-box; }
.accred-item{ display:flex; align-items:center; gap:var(--s-3); color:var(--ink-600); font-size:var(--fs-sm); font-weight:600; }
/* Every chip's second line is a caption, not a headline. */
.accred-item .muted{ display:block; font-weight:500; font-size:var(--fs-xs); color:var(--ink-500); margin-top:2px; }
.ai-badge{
width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:#fff;
display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
font-weight:700; font-size:.8rem; color:var(--brand-700);
}
/* The licensing chip carries two lines of text rather than a monogram, so it
is allowed to be wider and its badge holds an icon instead of letters. */
.accred-item--licence{ text-align:start; line-height:1.3; max-width:none; }
.accred-item--licence > span:last-child{ max-width:24ch; }
.accred-item--licence strong{
display:block; color:var(--brand-800); font-weight:700; font-size:var(--fs-sm);
}
.ai-badge--seal{ width:38px; height:38px; color:var(--brand-600); }
.ai-badge--seal svg{ width:21px; height:21px; }
.footer-licence{
/* Body copy carries a reading measure; this line is a caption and must span
the band so it centres under the marks. */
max-width:none; margin:var(--s-3) auto 0; text-align:center;
font-size:var(--fs-xs); letter-spacing:.04em; color:rgba(255,255,255,.62);
}
/* ---------- 10. UPDATES + SOCIAL (home page modules) ---------- */
.updates{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s-5); }
.update{
background:#fff; border:1px solid var(--line); border-inline-start:4px solid var(--brand-600);
border-radius:var(--radius); padding:var(--s-5); transition:all var(--dur) var(--ease);
display:flex; flex-direction:column; gap:var(--s-2);
}
.update:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.update.is-priority{ border-inline-start-color:var(--accent-500); background:var(--accent-100); }
.update-meta{ display:flex; align-items:center; gap:var(--s-3); font-size:var(--fs-xs); color:var(--ink-500); }
.tag{
display:inline-block; padding:.2rem .6rem; border-radius:var(--radius-pill); font-size:var(--fs-xs);
font-weight:600; letter-spacing:.04em; background:var(--brand-050); color:var(--brand-700);
}
.tag--accent{ background:var(--accent-100); color:var(--accent-600); }
.tag--evo{ background:#e7f1fa; color:#0b4a8f; }
.tag--lac{ background:#fdeaec; color:#9b1c2b; }
.update h4{ font-size:var(--fs-base); font-family:var(--font-body); font-weight:600; }
.update p{ font-size:var(--fs-sm); color:var(--text-muted); }
.social-tabs{ display:flex; gap:var(--s-2); flex-wrap:wrap; margin-bottom:var(--s-6); }
.social-tab{
padding:.6rem 1.2rem; border-radius:var(--radius-pill); border:1.5px solid var(--line);
background:#fff; cursor:pointer; font-size:var(--fs-sm); font-weight:600; color:var(--ink-600);
transition:all var(--dur) var(--ease); display:inline-flex; align-items:center; gap:var(--s-2);
}
.social-tab:hover{ border-color:var(--brand-500); color:var(--brand-700); }
.social-tab[aria-selected="true"]{ background:var(--brand-700); border-color:var(--brand-700); color:#fff; }
.social-panel[hidden]{ display:none; }
.social-embed-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s-5); align-items:start; }
.embed-frame{
border:1px solid var(--line); border-radius:var(--radius); background:#fff; overflow:hidden;
min-height:420px; display:flex; flex-direction:column;
}
.embed-frame-head{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line); }
.embed-frame-head .ef-icon{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; flex:none; }
.embed-frame-head .ef-name{ font-weight:600; font-size:var(--fs-sm); }
.embed-frame-head .ef-handle{ font-size:var(--fs-xs); color:var(--ink-500); }
.embed-frame-body{ flex:1; position:relative; min-height:340px; }
.embed-frame-body iframe{ width:100%; height:100%; min-height:340px; border:0; }
.embed-placeholder{
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:var(--s-3); text-align:center; padding:var(--s-6); color:var(--ink-500); font-size:var(--fs-sm);
background:var(--surface-alt);
}
.social-links-row{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }
.social-chip{
display:inline-flex; align-items:center; gap:var(--s-2); padding:.55rem 1rem; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff; font-size:var(--fs-sm); font-weight:600; color:var(--ink-700);
transition:all var(--dur) var(--ease);
}
.social-chip:hover{ border-color:var(--brand-500); color:var(--brand-700); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.social-chip svg{ width:16px; height:16px; }
/* ---------- 11. CTA BAND ---------- */
.cta-band{ background:var(--brand-gradient); color:#fff; border-radius:var(--radius-lg); padding:var(--s-8); text-align:center; position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset-inline-start:-60px; bottom:-90px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.06); }
.cta-band > *{ position:relative; z-index:2; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.85); max-width:56ch; margin-inline:auto; }
.cta-band .btn-row{ justify-content:center; }
/* ---------- 12. FOOTER ---------- */
.site-footer{ background:var(--ink-900); color:rgba(255,255,255,.62); padding-top:var(--s-8); font-size:var(--fs-sm); }
.site-footer h5{
font-family:var(--font-body); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
color:#fff; font-weight:600; margin-bottom:var(--s-4);
}
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:var(--s-7); padding-bottom:var(--s-7); }
@media (max-width:960px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--s-6);} }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand img{ height:var(--footer-logo-h,48px); width:auto; margin-bottom:var(--s-4); }
.footer-brand p{ font-size:var(--fs-sm); line-height:1.65; max-width:36ch; }
.site-footer ul li{ margin-bottom:.55rem; }
.site-footer a:hover{ color:#fff; }
.footer-contact li{ display:flex; gap:var(--s-3); align-items:flex-start; }
.footer-contact svg{ width:15px; height:15px; flex:none; margin-top:5px; opacity:.6; }
.footer-social{ display:flex; gap:var(--s-3); margin-top:var(--s-5); }
.footer-social a{
width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
display:flex; align-items:center; justify-content:center; transition:all var(--dur) var(--ease);
}
.footer-social a:hover{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; transform:translateY(-2px); }
.footer-social svg{ width:16px; height:16px; }
/* Footer accreditation band — white chips so marks with baked-in white
backgrounds sit correctly on the dark footer. */
.footer-accred{ border-top:1px solid rgba(255,255,255,.1); padding-block:var(--s-5); }
.footer-accred-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s-5); }
.fa-marks{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s-4); }
.fa-chip{
display:inline-flex; align-items:center; justify-content:center;
background:#fff; border-radius:var(--radius); padding:var(--s-3) var(--s-4);
}
.fa-chip img{ height:var(--ah,34px); width:auto; }
.footer-family{ border-top:1px solid rgba(255,255,255,.1); padding-block:var(--s-5); }
.footer-family-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-5); justify-content:center; }
.footer-family-label{ font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; opacity:.5; }
.footer-family-inner a{ font-family:var(--font-display); font-weight:600; color:rgba(255,255,255,.8); font-size:var(--fs-base); }
.footer-family-inner a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-block:var(--s-5); }
.footer-bottom-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-4); font-size:var(--fs-xs); opacity:.6; }
.footer-legal{ display:flex; gap:var(--s-4); flex-wrap:wrap; }
/* ---------- 13. MISC COMPONENTS ---------- */
.prose h2{ margin-top:var(--s-7); margin-bottom:var(--s-4); font-size:var(--fs-2xl); }
.prose h3{ margin-top:var(--s-6); margin-bottom:var(--s-3); }
.prose p{ margin-bottom:var(--s-4); }
.prose ul{ margin:0 0 var(--s-5); padding-inline-start:1.3rem; list-style:disc; color:var(--text-muted); }
.prose ul li{ margin-bottom:.5rem; }
.prose blockquote{
border-inline-start:4px solid var(--accent-500); padding:var(--s-2) var(--s-5); margin:var(--s-6) 0;
font-family:var(--font-display); font-size:var(--fs-lg); font-style:italic; color:var(--ink-700);
}
.prose blockquote cite{ display:block; font-size:var(--fs-sm); font-style:normal; color:var(--ink-500); margin-top:var(--s-3); font-family:var(--font-body); }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
th,td{ padding:.85rem 1rem; text-align:start; border-bottom:1px solid var(--line); }
th{ background:var(--surface-alt); font-weight:600; color:var(--ink-800); font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; }
tr:last-child td{ border-bottom:0; }
.accordion{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.accordion + .accordion{ margin-top:var(--s-3); }
.accordion summary{
padding:var(--s-4) var(--s-5); cursor:pointer; font-weight:600; list-style:none;
display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); background:#fff;
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{ content:"+"; font-size:1.4rem; color:var(--brand-600); line-height:1; flex:none; }
.accordion[open] summary::after{ content:"–"; }
.accordion summary:hover{ background:var(--brand-050); }
.accordion .acc-body{ padding:0 var(--s-5) var(--s-5); color:var(--text-muted); font-size:var(--fs-base); }
.timeline{ position:relative; padding-inline-start:var(--s-6); }
.timeline::before{ content:""; position:absolute; inset-inline-start:7px; top:6px; bottom:6px; width:2px; background:var(--line); }
.tl-item{ position:relative; padding-bottom:var(--s-6); }
.tl-item::before{ content:""; position:absolute; inset-inline-start:calc(-1 * var(--s-6) + 1px); top:7px; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--brand-600); }
.tl-year{ font-family:var(--font-display); font-weight:700; color:var(--brand-700); font-size:var(--fs-lg); }
.contact-card{ background:var(--surface-alt); border-radius:var(--radius-lg); padding:var(--s-6); }
.contact-card ul li{ display:flex; gap:var(--s-3); align-items:flex-start; margin-bottom:var(--s-3); font-size:var(--fs-base); }
.contact-card svg{ width:18px; height:18px; color:var(--brand-600); flex:none; margin-top:4px; }
.map-embed{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); min-height:340px; }
.map-embed iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:var(--s-2); }
.field--full{ grid-column:1/-1; }
.field label{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-700); }
.field input,.field select,.field textarea{
padding:.75rem .9rem; border:1.5px solid var(--ink-200); border-radius:var(--radius-sm);
background:#fff; font-size:var(--fs-base); transition:border-color var(--dur) var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--brand-600); outline:none; box-shadow:0 0 0 3px var(--brand-050); }
.notice{ background:var(--brand-050); border:1px solid var(--brand-100); border-radius:var(--radius); padding:var(--s-4) var(--s-5); font-size:var(--fs-sm); color:var(--brand-800); }
/* ---------- 14. MOTION ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
.reveal{ opacity:1; transform:none; }
}
/* ---------- 15. RTL / ARABIC ---------- */
[dir="rtl"]{ font-family:var(--font-arabic); }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{ font-family:var(--font-arabic); letter-spacing:0; line-height:1.35; }
[dir="rtl"] .eyebrow{ letter-spacing:0; }
[dir="rtl"] .timeline::before{ inset-inline-start:7px; }
[lang="ar"] body, body[dir="rtl"]{ line-height:1.9; }
/* ---------- 16. UTILITIES ---------- */
.skip-link{
position:absolute; inset-inline-start:-9999px; top:0; z-index:999; background:var(--brand-900); color:#fff;
padding:.75rem 1.25rem; border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{ inset-inline-start:0; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mt-0{margin-top:0}.mt-4{margin-top:var(--s-4)}.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}.mt-7{margin-top:var(--s-7)}
.mb-4{margin-bottom:var(--s-4)}.mb-5{margin-bottom:var(--s-5)}.mb-6{margin-bottom:var(--s-6)}
.text-center{text-align:center}
.no-scroll{ overflow:hidden; }
/* ==========================================================================
LEADER MESSAGE — a signed word from the chairman, director or proviseur
========================================================================== */
.split--leader{ grid-template-columns:minmax(240px,360px) 1fr; align-items:start; gap:var(--s-8); }
.split--leader.split--photo-first{ direction:ltr; }
.leader-photo{
margin:0; border-radius:var(--radius-lg,18px); overflow:hidden;
background:var(--surface-alt); box-shadow:var(--shadow-lg);
position:relative;
}
.leader-photo img{ width:100%; height:auto; display:block; aspect-ratio:1; object-fit:cover; }
/* A quiet brand bar under the portrait ties it to the school it speaks for. */
.leader-photo::after{
content:""; position:absolute; inset-block-end:0; inset-inline:0; height:6px;
background:var(--brand-gradient,var(--brand-700));
}
.leader-body p{ margin-bottom:var(--s-4); }
.leader-body p:last-child{ margin-bottom:0; }
.leader-body p:first-child{ font-size:var(--fs-lg); line-height:1.6; color:var(--text); }
.leader-sign{ display:flex; align-items:center; gap:var(--s-4); margin-top:var(--s-6); }
.leader-sign .ls-rule{ width:44px; height:2px; background:var(--accent-500); flex:none; }
.leader-sign strong{
display:block; font-family:var(--font-display); font-size:var(--fs-lg);
font-weight:600; color:var(--brand-900); line-height:1.2;
}
.leader-sign span{
display:block; font-size:var(--fs-xs); letter-spacing:.1em;
text-transform:uppercase; color:var(--ink-500); margin-top:2px;
}
.section--brand .leader-sign strong{ color:#fff; }
.section--brand .leader-sign span{ color:rgba(255,255,255,.6); }
.section--brand .leader-body p:first-child{ color:rgba(255,255,255,.92); }
/* The message runs long; the portrait keeps pace with it rather than
scrolling away and leaving a column of white beside the text. */
@media (min-width:901px){
.split--leader > :first-child{ position:sticky; top:calc(var(--header-h) + 28px); }
}
@media (max-width:900px){
.split--leader{ grid-template-columns:1fr; gap:var(--s-6); }
.leader-photo{ max-width:320px; }
}
/* ==========================================================================
JOURNEY BAND — the whole school pathway, drawn to the age scale
Each segment is as wide as the years it covers, so the shape of a child's
time at the school is honest: five years of Primary really is wider than
two years of Diploma.
========================================================================== */
.journey-band{ margin-block:var(--s-6); }
.jb-track{ display:flex; gap:4px; align-items:stretch; }
.jb-seg{
flex:0 0 var(--jw); min-width:0; display:block; text-decoration:none;
border-radius:var(--radius); overflow:hidden; background:var(--surface-alt);
padding:0 0 var(--s-4); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.jb-seg:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.jb-bar{ display:block; height:8px; background:var(--jc); }
.jb-txt{ display:block; padding:var(--s-4) var(--s-4) 0; }
.jb-name{
display:block; font-family:var(--font-display); font-size:var(--fs-lg);
font-weight:600; color:var(--ink-900); line-height:1.2;
}
.jb-sub{ display:block; font-size:var(--fs-xs); color:var(--text-muted); margin-top:4px; line-height:1.4; }
.jb-age{
display:inline-block; margin-top:var(--s-3); padding:.15rem .5rem;
border-radius:var(--radius-pill); background:var(--jc); color:#fff;
font-size:var(--fs-xs); font-weight:700; font-variant-numeric:tabular-nums;
}
/* Pale stage colours (the Early Years yellow) need dark text on the chip. */
.jb-seg[style*="--jc:var(--stage-early)"] .jb-age,
.jb-seg[style*="--jc:var(--stage-mat)"] .jb-age{ color:var(--ink-900); }
.jb-scale{
position:relative; height:26px; margin-top:var(--s-3);
border-top:1px solid var(--line);
}
.jb-tick{
position:absolute; top:6px; inset-inline-start:var(--jp); transform:translateX(-50%);
font-size:var(--fs-xs); color:var(--ink-400); font-variant-numeric:tabular-nums;
}
.jb-tick::before{
content:""; position:absolute; inset-inline-start:50%; top:-7px;
width:1px; height:5px; background:var(--ink-300);
}
[dir="rtl"] .jb-tick{ transform:translateX(50%); }
/* On a narrow screen the band stacks: proportion stops being readable at
phone width, and a legible list beats an unreadable diagram. */
@media (max-width:820px){
.jb-track{ flex-direction:column; gap:var(--s-3); }
.jb-seg{ flex:1 1 auto; }
.jb-scale{ display:none; }
}
/* ============================================================= FACILITIES */
.fac-grid{ display:grid; gap:var(--s-5); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.fac{ display:flex; gap:var(--s-4); align-items:flex-start; }
.fac-ico{
width:46px; height:46px; flex:none; border-radius:13px;
background:var(--brand-050); color:var(--brand-700);
display:grid; place-items:center;
}
.fac-ico svg{ width:22px; height:22px; }
.fac h3{ font-size:var(--fs-base); font-family:var(--font-body); font-weight:600; }
.fac p{ font-size:var(--fs-sm); color:var(--text-muted); margin-top:2px; }
/* ============================================== FIGURES (exam results etc) */
.fig-row{ display:grid; gap:var(--s-5); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.fig{
background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
padding:var(--s-6); text-align:center;
}
.section--brand .fig{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
.fig-n{
font-family:var(--font-display); font-size:clamp(2.5rem,6vw,3.5rem); font-weight:700;
line-height:1; color:var(--brand-700); font-variant-numeric:tabular-nums;
}
.section--brand .fig-n{ color:var(--accent-500); }
.fig-l{ font-size:var(--fs-sm); font-weight:600; color:var(--text); margin-top:var(--s-3); }
.section--brand .fig-l{ color:#fff; }
.fig-note{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:var(--s-2); }
.section--brand .fig-note{ color:rgba(255,255,255,.6); }
/* =========================================================== DESTINATIONS */
.dest-grid{ display:grid; gap:var(--s-5); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.dest{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s-5) var(--s-6); }
.dest h3{
font-family:var(--font-body); font-size:var(--fs-xs); letter-spacing:.1em;
text-transform:uppercase; font-weight:700; color:var(--brand-700);
padding-bottom:var(--s-3); border-bottom:1px solid var(--line);
}
.dest ul{ list-style:none; margin:var(--s-4) 0 0; padding:0; }
.dest li{ font-size:var(--fs-sm); color:var(--text-muted); padding:.3rem 0; }
/* ================================================================= EVENTS */
.ev-list{ list-style:none; margin:0; padding:0; counter-reset:none; }
.ev{
display:grid; grid-template-columns:160px 1fr; gap:var(--s-5);
padding:var(--s-5) 0; border-bottom:1px solid var(--line);
}
.ev:last-child{ border-bottom:0; }
.ev-when{
font-family:var(--font-display); font-size:var(--fs-lg); font-weight:600;
color:var(--brand-700); line-height:1.25;
}
.ev-body h3{ font-family:var(--font-body); font-size:var(--fs-base); font-weight:600; }
.ev-body p{ font-size:var(--fs-sm); color:var(--text-muted); margin-top:4px; }
@media (max-width:640px){
.ev{ grid-template-columns:1fr; gap:var(--s-2); }
.ev-when{ font-size:var(--fs-base); }
}
/* A leader whose portrait has not arrived yet — a set monogram, not a gap. */
.leader-photo--mono{
display:grid; place-items:center; aspect-ratio:1;
background:var(--brand-gradient,var(--brand-800));
}
.leader-photo--mono span{
font-family:var(--font-display); font-size:clamp(3.5rem,9vw,5.5rem);
font-weight:700; color:#fff; letter-spacing:.02em; line-height:1;
}
/* ==========================================================================
NGSM GROUP — BRAND THEME
Palette sampled directly from the LVNG mark (4-square logo):
Red #E4122A Green #004224
Navy #181E42 Yellow #EAC618
Navy leads (structure, headers, footers); yellow is the accent.
Red and green identify the group's verticals in the architecture module.
========================================================================== */
:root{
--brand-900:#0e1230;
--brand-800:#141838;
--brand-700:#181e42; /* LVNG navy — core */
--brand-600:#262e5e;
--brand-500:#3a447e;
--brand-300:#9199be;
--brand-100:#dbdeec;
--brand-050:#f2f3f9;
--accent-600:#a8890a;
--accent-500:#eac618; /* LVNG yellow */
--accent-100:#fdf6da;
--brand-contrast:#ffffff;
--brand-gradient:linear-gradient(135deg,#0e1230 0%,#181e42 55%,#262e5e 100%);
/* LVNG quadrant colours, reused as vertical identifiers */
--lvng-red:#e4122a;
--lvng-green:#004224;
--lvng-navy:#181e42;
--lvng-yellow:#eac618;
--evo-color:#1e3c30;
--lac-color:#de1e24;
--future-color:#6b7382;
/* The header lockup stacks two lines of type, so it carries more height */
--logo-h:52px;
--logo-h-sm:40px;
/* Footer and small placements use the square LVNG mark */
--footer-logo-h:62px;
}
/* Yellow accent on white needs dark text for contrast */
.btn--accent{ color:#181e42; }
.tag--evo{ background:#e4ece8; color:#1e3c30; }
.tag--lac{ background:#fce9ea; color:#a8161b; }
/* ==========================================================================
UNIFIED JOB APPLICATION PORTAL
A form people abandon is worse than no form. Four numbered steps, a
teaching / non-teaching fork that hides the half that does not apply, and
a file field big enough to hit on a phone.
========================================================================== */
.cv-head{
display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
gap:var(--s-5); margin-bottom:var(--s-6);
}
.cv-head > div{ max-width:60ch; }
.cv-head .lang-switch{ background:var(--surface); flex:none; }
/* ------------------------------------------------------------------ form */
.cv-form{
background:var(--surface); border:1px solid var(--line);
border-radius:var(--radius-lg); overflow:hidden;
counter-reset:cvstep;
}
.cv-step{ border:0; border-top:1px solid var(--line); margin:0; padding:var(--s-6); }
.cv-step:first-of-type{ border-top:0; }
.cv-step[hidden]{ display:none; }
.cv-step legend{
display:flex; align-items:center; gap:var(--s-3); padding:0;
font-family:var(--font-display); font-size:var(--fs-xl); font-weight:600;
color:var(--brand-900); margin-bottom:var(--s-5);
}
/* The teaching / non-teaching step is hidden until the candidate chooses, so
the numbers are counted, not written. A display:none step does not
increment a counter, which is exactly the behaviour wanted here: the
sequence reads 1-2-3 before the choice and 1-2-3-4 after it. */
.cv-num{
width:30px; height:30px; flex:none; border-radius:50%;
background:var(--brand-700); color:#fff;
display:grid; place-items:center;
font-family:var(--font-body); font-size:var(--fs-sm); font-weight:700;
counter-increment:cvstep;
}
.cv-num::before{ content:counter(cvstep); }
.cv-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.cv-form .field{ margin-bottom:var(--s-4); }
.cv-form .row .field{ margin-bottom:0; }
.cv-form .row + .row,
.cv-form .row + .field{ margin-top:var(--s-4); }
.cv-form .hint{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:var(--s-2); }
@media (max-width:640px){ .cv-form .row{ grid-template-columns:1fr; gap:var(--s-4); } }
/* --------------------------------------------- the one branching question */
.cv-choice{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
@media (max-width:640px){ .cv-choice{ grid-template-columns:1fr; } }
.cv-pick{
display:block; cursor:pointer; border:1.5px solid var(--line);
border-radius:var(--radius); padding:var(--s-4) var(--s-5);
transition:all var(--dur) var(--ease); position:relative;
}
.cv-pick:hover{ border-color:var(--brand-300); background:var(--brand-050); }
.cv-pick input{ position:absolute; opacity:0; width:0; height:0; }
.cv-pick-body strong{ display:block; font-size:var(--fs-base); color:var(--text); }
.cv-pick-body em{
display:block; font-style:normal; font-size:var(--fs-xs);
color:var(--text-muted); margin-top:4px; line-height:1.45;
}
.cv-pick:has(input:checked){
border-color:var(--brand-700); background:var(--brand-050);
box-shadow:inset 0 0 0 1px var(--brand-700);
}
.cv-pick:has(input:checked) .cv-pick-body strong{ color:var(--brand-800); }
.cv-pick:has(input:focus-visible){ outline:3px solid var(--accent-500); outline-offset:2px; }
/* ------------------------------------------------------------- languages */
.cv-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cv-tag{ cursor:pointer; }
.cv-tag input{ position:absolute; opacity:0; width:0; height:0; }
.cv-tag span{
display:inline-block; padding:.5rem 1rem; border-radius:var(--radius-pill);
border:1.5px solid var(--line); font-size:var(--fs-sm); font-weight:600;
color:var(--ink-600); transition:all var(--dur) var(--ease);
}
.cv-tag:hover span{ border-color:var(--brand-300); color:var(--brand-700); }
.cv-tag input:checked + span{ background:var(--brand-700); border-color:var(--brand-700); color:#fff; }
.cv-tag input:focus-visible + span{ outline:3px solid var(--accent-500); outline-offset:2px; }
/* ---------------------------------------------------------- the CV field */
.cv-drop{
position:relative; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:var(--s-2); text-align:center;
min-height:120px; padding:var(--s-5);
border:2px dashed var(--ink-300); border-radius:var(--radius);
background:var(--surface-alt); transition:all var(--dur) var(--ease);
}
.cv-drop:hover, .cv-drop.is-over{ border-color:var(--brand-600); background:var(--brand-050); }
.cv-drop input{
position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
}
.cv-drop-txt{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-600); }
.cv-drop-name{
display:inline-flex; align-items:center; gap:.5rem; max-width:100%;
padding:.4rem .9rem; border-radius:var(--radius-pill);
background:var(--brand-700); color:#fff; font-size:var(--fs-xs); font-weight:600;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cv-drop.has-file{ border-style:solid; border-color:var(--brand-600); background:var(--brand-050); }
.cv-drop.has-file .cv-drop-txt{ display:none; }
.cv-drop.is-bad{ border-color:#b3261e; background:#fdecea; }
/* ---------------------------------------------------------------- consent */
.cv-consent{
display:flex; gap:var(--s-3); align-items:flex-start; cursor:pointer;
font-size:var(--fs-sm); color:var(--text-muted); line-height:1.55;
}
.cv-consent input{
appearance:none; -webkit-appearance:none; margin:.2rem 0 0; flex:none;
width:18px; height:18px; border:1.5px solid var(--ink-300); border-radius:5px;
background:var(--surface); cursor:pointer; transition:all var(--dur) var(--ease);
}
.cv-consent input:checked{ background:var(--brand-700); border-color:var(--brand-700); }
.cv-consent input:checked::after{
content:""; display:block; width:4px; height:9px; margin:2px auto 0;
border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.cv-consent input:focus-visible{ outline:3px solid var(--accent-500); outline-offset:2px; }
/* ----------------------------------------------------------------- submit */
.cv-submit{
display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4);
padding:var(--s-6); background:var(--surface-alt); border-top:1px solid var(--line);
}
.cv-submit .btn{ min-width:220px; justify-content:center; }
.cv-status{ font-size:var(--fs-sm); color:var(--text-muted); margin:0; flex:1; min-width:200px; }
.cv-status.is-bad{ color:#b3261e; font-weight:600; }
.cv-status.is-busy::before{
content:""; display:inline-block; width:13px; height:13px; margin-inline-end:.5rem;
border:2px solid var(--ink-300); border-top-color:var(--brand-700); border-radius:50%;
animation:cvSpin .7s linear infinite; vertical-align:-2px;
}
@keyframes cvSpin{ to{ transform:rotate(360deg) } }
/* A field the browser has rejected, once the candidate has tried to submit.
Scoped to real controls: a