: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;
}
/* ==========================================================================
EVOLUTION INTERNATIONAL SCHOOL — BRAND THEME
Source: EVO Brand Manual / Style Guide (2026 rebrand)
"One Journey. Always Evolving."
THE FIVE-COLOUR SYSTEM (exact values from the manual)
Light Grey #E6E6E6 Foundation — institutional communication, clarity
Pastel Yellow#F4D589 Secondary highlight — early years, curiosity, joy
IB Blue I #2FB4E9 PYP — guided inquiry, transition into formal growth
IB Blue II #004587 MYP — independence, critical thinking
Hunter Green #1E3F33 IB Diploma — leadership, sophistication, readiness
Deep Green #173A2A Emblem / typographic anchor
Page ground #F7F7F7
The palette deepens as students progress — the site uses the same logic:
each programme stage is colour-coded to its manual colour.
TYPOGRAPHY (per manual)
Cormorant Garamond — titles + headlines (elegance, academic heritage)
Cabinet Grotesk — subheadings + long-form text (clarity, modernity)
========================================================================== */
:root{
/* Hunter Green leads the interface */
--brand-900:#122c20;
--brand-800:#173a2a; /* deep green — emblem anchor */
--brand-700:#1e3f33; /* Hunter Green — core brand */
--brand-600:#2b5745;
--brand-500:#3f7660;
--brand-300:#95b7a8;
--brand-100:#dbe8e1;
--brand-050:#f1f6f3;
/* Pastel yellow is the manual's highlight colour */
--accent-600:#a8801f;
--accent-500:#f4d589;
--accent-100:#fdf6e6;
/* Stage colours — used to signpost the four-stage journey */
--stage-early:#f4d589; /* Montessori / Early Years */
--stage-pyp:#2fb4e9; /* IB Blue I — PYP */
--stage-myp:#004587; /* IB Blue II — MYP */
--stage-dp:#1e3f33; /* Hunter Green — DP */
--brand-contrast:#ffffff;
--brand-gradient:linear-gradient(135deg,#122c20 0%,#1e3f33 55%,#2b5745 100%);
/* Manual's neutral foundation */
--surface-alt:#f7f7f7;
--line:#e6e6e6;
--evo-color:#1e3f33;
--lac-color:#de1e24;
/* Brand typography */
--font-display:"Cormorant Garamond", Garamond, Georgia, serif;
--font-body:"Cabinet Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Cormorant is a light, high-contrast serif — it needs more size and weight
than the default stack to hold the same visual authority. */
h1,h2,h3,h4{ font-weight:600; letter-spacing:-.005em; }
h1{ font-size:3.5rem; line-height:1.06; }
h2{ font-size:2.75rem; line-height:1.12; }
h3{ font-size:1.6rem; }
.hero h1{ font-size:4.5rem; }
@media (max-width:900px){
h1{ font-size:2.6rem; } h2{ font-size:2.1rem; } .hero h1{ font-size:3rem; }
}
.eyebrow, .arch-label, .bl-sub, .site-footer h5{ font-weight:500; }
/* Pastel yellow accent carries dark green text */
.btn--accent{ color:#173a2a; }
.btn--accent:hover{ filter:brightness(1.04); }
/* Stage tags */
.tag--early{ background:#fdf6e6; color:#8a6a12; }
.tag--pyp{ background:#e3f5fd; color:#0a6f9c; }
.tag--myp{ background:#e0ebf5; color:#004587; }
.tag--dp{ background:#e1ece7; color:#1e3f33; }
.tag--ib{ background:#e0ebf5; color:#004587; }
.tag--lac{ background:#fce9ea; color:#a8161b; }
/* Stage card — colour-coded top bar reflecting the deepening palette */
.stage-card{
position:relative; background:#fff; border:1px solid var(--line);
border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
transition:all var(--dur) var(--ease);
}
.stage-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.stage-card .sc-bar{ height:6px; background:var(--sc-color,var(--brand-700)); }
.stage-card .sc-body{ padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-3); flex:1; }
.stage-card .sc-step{
font-family:var(--font-body); font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--sc-color,var(--brand-700));
}
/* The journey rail on the home page */
.journey{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); position:relative; }
.journey::before{
content:""; position:absolute; top:-18px; inset-inline:8%; height:4px; border-radius:2px;
background:linear-gradient(90deg,#f4d589 0%,#2fb4e9 34%,#004587 67%,#1e3f33 100%);
}
[dir="rtl"] .journey::before{ background:linear-gradient(270deg,#f4d589 0%,#2fb4e9 34%,#004587 67%,#1e3f33 100%); }
@media (max-width:900px){
.journey{ grid-template-columns:1fr; }
.journey::before{ display:none; }
}
/* ==========================================================================
ACADEMIC YEAR CALENDAR
Loaded only on the calendar page. Inherits every token from core.css and
the site's theme.css — the five category hues below are the only new colour.
Category palette was validated with the dataviz palette checker
(light surface, all-pairs): lightness band, chroma floor, normal-vision
separation and 3:1 contrast all pass. The teal/magenta pair sits at
ΔE 7.2 under deuteranopia — inside the band that requires secondary
encoding, which is satisfied here: every event carries a visible text
label in the day cell, the agenda and the tooltip, so colour is never
the only thing distinguishing two entries.
========================================================================== */
.cal{ --cal-gap:3px; }
/* ---------- Term summary ---------- */
.cal-terms{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s-4); margin-bottom:var(--s-6); }
.cal-term{
background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-2); position:relative; overflow:hidden;
}
.cal-term::before{ content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--brand-700); }
.cal-term.is-now::before{ background:var(--accent-500); }
.cal-term-name{ font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; color:var(--brand-800); }
.cal-term-dates{ font-size:var(--fs-sm); color:var(--text-muted); }
.cal-term-days{ font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); font-weight:600; margin-top:auto; padding-top:var(--s-2); }
.cal-term-state{ font-size:var(--fs-sm); font-weight:600; color:var(--brand-600); }
.cal-term.is-now .cal-term-state{ color:var(--accent-600); }
.cal-term.is-done .cal-term-state{ color:var(--ink-400); font-weight:500; }
.cal-term.is-done .cal-term-bar i{ background:var(--ink-300); }
.cal-term-bar{ height:5px; border-radius:3px; background:var(--ink-100); overflow:hidden; margin-top:var(--s-2); }
.cal-term-bar i{ display:block; height:100%; background:var(--brand-600); border-radius:3px; }
/* ---------- Toolbar ---------- */
.cal-bar{
display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3);
padding:var(--s-4) 0; margin-bottom:var(--s-5);
border-block:1px solid var(--line); position:sticky; top:var(--header-h);
background:var(--surface); z-index:20;
}
.cal-legend{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.cal-chip{
display:inline-flex; align-items:center; gap:7px; padding:.42rem .82rem;
border:1.5px solid var(--line); border-radius:var(--radius-pill); background:#fff;
font-size:var(--fs-sm); font-weight:600; color:var(--ink-600); cursor:pointer;
transition:all var(--dur) var(--ease); white-space:nowrap;
}
.cal-chip .sw{ width:11px; height:11px; border-radius:3px; background:var(--c); flex:none; }
.cal-chip:hover{ border-color:var(--c); color:var(--ink-800); }
.cal-chip[aria-pressed="true"]{ border-color:var(--c); background:color-mix(in srgb, var(--c) 9%, #fff); color:var(--ink-900); }
.cal-chip[aria-pressed="false"]{ opacity:.42; }
.cal-actions{ margin-inline-start:auto; display:flex; gap:var(--s-2); flex-wrap:wrap; }
.cal-view{ display:flex; gap:2px; border:1.5px solid var(--line); border-radius:var(--radius-pill); padding:3px; background:#fff; }
.cal-view button{
border:0; background:none; padding:.36rem .9rem; border-radius:var(--radius-pill);
font-size:var(--fs-sm); font-weight:600; color:var(--ink-500); cursor:pointer;
}
.cal-view button[aria-pressed="true"]{ background:var(--brand-700); color:#fff; }
/* ---------- Month grid ---------- */
.cal-months{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:var(--s-5); }
.cal-month{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.cal-month-head{
padding:.7rem var(--s-4); background:var(--brand-700); color:#fff;
font-family:var(--font-display); font-size:1.05rem; font-weight:700; letter-spacing:.01em;
display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3);
}
.cal-month-head .yr{ font-family:var(--font-body); font-size:var(--fs-xs); font-weight:500; opacity:.7; letter-spacing:.06em; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:var(--cal-gap); padding:var(--s-3); }
.cal-dow{
text-align:center; font-size:.625rem; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--ink-400); padding-bottom:2px;
}
.cal-day{
position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
border-radius:7px; font-size:.8125rem; font-weight:500; color:var(--ink-700);
font-variant-numeric:tabular-nums; background:transparent; border:1px solid transparent;
}
.cal-day.is-blank{ visibility:hidden; }
.cal-day.is-weekend{ color:var(--ink-400); background:var(--ink-050); }
.cal-day.has-event{ cursor:pointer; font-weight:700; }
.cal-day.has-event:hover{ box-shadow:0 0 0 2px var(--c, var(--brand-600)); z-index:2; }
.cal-day.has-event:focus-visible{ outline:3px solid var(--accent-500); outline-offset:2px; }
/* filled when the day is closed or a milestone; dotted when school is open */
.cal-day.is-filled{ background:var(--c); color:#fff; border-color:var(--c); }
.cal-day.is-dotted::after{
content:""; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
width:6px; height:6px; border-radius:50%; background:var(--c);
}
.cal-day.is-dotted{ background:color-mix(in srgb, var(--c) 8%, #fff); border-color:color-mix(in srgb, var(--c) 26%, #fff); }
.cal-day.is-today{ box-shadow:0 0 0 2px var(--accent-500); }
.cal-day.is-muted{ opacity:.22; }
.cal-day.is-selected{ box-shadow:0 0 0 3px var(--ink-900); z-index:3; }
/* ---------- Day detail ---------- */
.cal-detail{
background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
padding:var(--s-5); margin-bottom:var(--s-5); display:flex; flex-wrap:wrap;
align-items:center; gap:var(--s-4);
}
.cal-detail-date{
font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700;
color:var(--brand-800); min-width:170px;
}
.cal-detail-items{ display:flex; flex-wrap:wrap; gap:var(--s-3); flex:1; }
.cal-detail-item{ display:flex; align-items:flex-start; gap:9px; }
.cal-detail-item .sw{ width:10px; height:10px; border-radius:3px; background:var(--c); flex:none; margin-top:6px; }
.cal-detail-item strong{ display:block; font-size:var(--fs-base); font-weight:600; }
.cal-detail-item span{ font-size:var(--fs-sm); color:var(--text-muted); }
.cal-detail .cal-close{ margin-inline-start:auto; }
/* ---------- Agenda ---------- */
.cal-agenda{ display:flex; flex-direction:column; gap:var(--s-6); }
.cal-agenda-month h3{
font-family:var(--font-display); font-size:var(--fs-lg); color:var(--brand-800);
padding-bottom:var(--s-2); border-bottom:2px solid var(--line); margin-bottom:var(--s-3);
}
.cal-row{
display:grid; grid-template-columns:160px 1fr auto; gap:var(--s-4);
align-items:baseline; padding:.7rem 0; border-bottom:1px solid var(--ink-100);
}
.cal-row:last-child{ border-bottom:0; }
.cal-row .d{ font-weight:700; font-size:var(--fs-sm); color:var(--ink-800); font-variant-numeric:tabular-nums; }
.cal-row .t{ font-size:var(--fs-base); }
.cal-row .t em{ display:block; font-style:normal; font-size:var(--fs-sm); color:var(--text-muted); }
.cal-row .c{
font-size:var(--fs-xs); font-weight:600; padding:.2rem .62rem; border-radius:var(--radius-pill);
background:color-mix(in srgb, var(--c) 12%, #fff); color:var(--c); white-space:nowrap;
}
.cal-row.is-hidden{ display:none; }
@media (max-width:640px){
.cal-row{ grid-template-columns:1fr; gap:3px; padding:.65rem 0; }
.cal-row .c{ justify-self:start; }
}
.cal-empty{ padding:var(--s-7); text-align:center; color:var(--ink-500); }
/* ---------- Print ---------- */
@media print{
.site-header,.topbar,.site-footer,.cal-bar,.cal-detail,.page-banner .breadcrumb,.notice{ display:none !important; }
.cal-months{ grid-template-columns:repeat(3,1fr); gap:8px; }
.cal-month{ break-inside:avoid; border-color:#999; }
.cal-month-head{ background:#fff !important; color:#000 !important; border-bottom:2px solid #000; }
.cal-day.is-filled{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.section{ padding-block:0 !important; }
}
/* ==========================================================================
GALLERY — photo grid + lightbox
Brand-neutral: every colour comes from the host theme's tokens, so the same
file dresses EVO in hunter green and the Lycée in navy without a fork.
========================================================================== */
.gal-nav{
display:flex; flex-wrap:wrap; gap:var(--s-2);
padding-bottom:var(--s-6); margin-bottom:var(--s-2);
border-bottom:1px solid var(--line);
}
.gal-jump{
display:inline-flex; align-items:center; gap:.5rem;
padding:.5rem 1rem; border-radius:var(--radius-pill);
border:1px solid var(--line); font-size:var(--fs-sm); font-weight:600; color:var(--ink-700);
transition:all var(--dur) var(--ease);
}
.gal-jump:hover{ border-color:var(--brand-700); background:var(--brand-050); color:var(--brand-700); }
.gal-jump span{
font-size:.7rem; font-weight:700; color:var(--ink-400);
background:var(--surface-alt); border-radius:var(--radius-pill); padding:.05rem .4rem;
}
.gal-album{ padding-top:var(--s-8); scroll-margin-top:calc(var(--header-h) + 24px); }
.gal-album .section-head{ margin-bottom:var(--s-5); }
.gal-grid{
display:grid; gap:var(--s-3);
grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
grid-auto-rows:1fr;
}
/* One feature tile per seven — two columns wide and two rows tall, so it fills
the block exactly instead of pushing a taller row. Enough rhythm to stop the
grid reading like a contact sheet, with no masonry library and no jitter. */
.gal-grid > .gal-tile:nth-child(7n+1){
grid-column:span 2; grid-row:span 2; aspect-ratio:auto; height:100%;
}
@media (max-width:640px){
.gal-grid > .gal-tile:nth-child(7n+1){
grid-column:span 1; grid-row:span 1; aspect-ratio:4/3; height:auto;
}
}
.gal-tile{
position:relative; display:block; padding:0; border:0; background:var(--surface-alt);
border-radius:var(--radius); overflow:hidden; cursor:zoom-in; aspect-ratio:4/3;
transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gal-tile img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .5s var(--ease), filter var(--dur) var(--ease);
}
.gal-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.gal-tile:hover img{ transform:scale(1.05); }
.gal-tile:focus-visible{ outline:3px solid var(--brand-500); outline-offset:3px; }
.gal-tile[hidden]{ display:none; }
.gal-zoom{
position:absolute; inset-block-end:10px; inset-inline-end:10px;
width:34px; height:34px; border-radius:50%;
display:grid; place-items:center;
background:rgba(255,255,255,.92); color:var(--brand-800);
opacity:0; transform:translateY(6px); transition:all var(--dur) var(--ease);
}
.gal-zoom svg{ width:16px; height:16px; }
.gal-tile:hover .gal-zoom, .gal-tile:focus-visible .gal-zoom{ opacity:1; transform:none; }
/* ------------------------------------------------------------------ video */
.gal-videos{ display:grid; gap:var(--s-6); grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.gal-video{ margin:0; }
.gal-embed{
position:relative; aspect-ratio:16/9; border-radius:var(--radius);
overflow:hidden; background:var(--ink-900);
}
.gal-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.gal-video figcaption{ margin-top:var(--s-3); font-size:var(--fs-sm); color:var(--text-muted); }
.gal-soon{
padding:var(--s-6); border:1px dashed var(--line); border-radius:var(--radius);
color:var(--text-muted); font-size:var(--fs-sm); text-align:center; background:var(--surface-alt);
}
/* -------------------------------------------------------------- lightbox */
.gal-lightbox{
position:fixed; inset:0; z-index:200;
display:grid; place-items:center;
background:rgba(10,14,12,.94); padding:clamp(1rem,4vw,3rem);
animation:galIn .18s var(--ease);
}
.gal-lightbox[hidden]{ display:none; }
@keyframes galIn{ from{ opacity:0 } to{ opacity:1 } }
.gal-lightbox img{
max-width:100%; max-height:88vh; width:auto; height:auto;
border-radius:var(--radius); box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.gal-lightbox button{
position:absolute; border:0; background:rgba(255,255,255,.1); color:#fff;
border-radius:50%; cursor:pointer; display:grid; place-items:center;
transition:background var(--dur) var(--ease); font-family:inherit;
}
.gal-lightbox button:hover{ background:rgba(255,255,255,.24); }
.gal-lightbox button:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.gal-close{ top:16px; inset-inline-end:16px; width:44px; height:44px; font-size:1.8rem; line-height:1; }
.gal-prev,.gal-next{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:2.2rem; line-height:1; }
.gal-prev{ inset-inline-start:16px; }
.gal-next{ inset-inline-end:16px; }
.gal-counter{
position:absolute; inset-block-end:18px; inset-inline:0; text-align:center;
color:rgba(255,255,255,.7); font-size:var(--fs-sm); font-variant-numeric:tabular-nums;
}
@media (max-width:640px){
.gal-prev,.gal-next{ width:42px; height:42px; font-size:1.7rem; }
.gal-prev{ inset-inline-start:6px; } .gal-next{ inset-inline-end:6px; }
}
@media print{ .gal-lightbox{ display:none !important; } }
/* ==========================================================================
PHOTO STRIP — a band of small pictures on the home page
Small tiles on purpose: a photograph nobody has art-directed is safe at this
size and would not be at hero size. It reads as a glimpse, and the button
sends anyone who wants more to the gallery.
========================================================================== */
.ps-head{
display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
gap:var(--s-5); margin-bottom:var(--s-6);
}
.ps-head > div{ max-width:640px; }
.ps-rail{
display:grid; gap:var(--s-3);
grid-template-columns:repeat(6,1fr);
}
.ps-tile{
display:block; aspect-ratio:1; border-radius:var(--radius); overflow:hidden;
background:var(--surface-alt);
transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ps-tile img{ width:100%; height:100%; object-fit:cover; display:block;
transition:transform .5s var(--ease); }
.ps-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.ps-tile:hover img{ transform:scale(1.06); }
/* The first tile earns twice the width — it stops the band reading as a filmstrip. */
.ps-rail > .ps-tile:first-child{ grid-column:span 2; aspect-ratio:2/1; }
@media (max-width:900px){
.ps-rail{ grid-template-columns:repeat(3,1fr); }
.ps-rail > .ps-tile:first-child{ grid-column:span 3; aspect-ratio:16/7; }
}
@media (max-width:520px){
.ps-rail{ grid-template-columns:repeat(2,1fr); }
.ps-rail > .ps-tile:first-child{ grid-column:span 2; aspect-ratio:16/9; }
}
/* ==========================================================================
HOME-PAGE MODULES — news ticker, updates carousel, Instagram wall, popup
All four take their colour from the host theme, so each school gets its own
brand and spirit from the same stylesheet.
========================================================================== */
/* =========================================================== NEWS TICKER
A single running line under the header. Decorative by design: it is built
from the announcement cards further down the page, so nothing is lost if
it never appears. */
.ticker{
background:var(--brand-800); color:#fff; overflow:hidden;
border-bottom:1px solid rgba(255,255,255,.12);
}
.ticker[hidden]{ display:none; }
.ticker .container{ display:flex; align-items:stretch; gap:0; padding-inline:0; }
.ticker-label{
display:flex; align-items:center; gap:.5rem; flex:none;
padding:.7rem clamp(1rem,3vw,1.6rem);
background:var(--accent-500); color:var(--accent-on,#173a2a);
font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.ticker-label .pulse{
width:7px; height:7px; border-radius:50%; background:currentColor;
animation:tickPulse 1.8s var(--ease) infinite;
}
@keyframes tickPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.ticker-view{ flex:1; overflow:hidden; position:relative; display:flex; align-items:center; min-width:0; }
.ticker-view::after{
content:""; position:absolute; inset-block:0; inset-inline-end:0; width:60px;
background:linear-gradient(to left,var(--brand-800),transparent); pointer-events:none;
}
.ticker-track{
display:flex; align-items:center; gap:0; white-space:nowrap; will-change:transform;
animation:tickRun var(--tick-dur,42s) linear infinite;
}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track{ animation-play-state:paused; }
@keyframes tickRun{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.ticker-item{
display:inline-flex; align-items:center; gap:.55rem;
padding:.7rem 1.4rem; font-size:var(--fs-sm); color:rgba(255,255,255,.9);
}
.ticker-item::before{
content:""; width:5px; height:5px; border-radius:50%;
background:var(--accent-500); flex:none;
}
.ticker-item b{ color:#fff; font-weight:600; }
.ticker-item .when{ color:rgba(255,255,255,.55); font-size:var(--fs-xs); }
a.ticker-item:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
@media (prefers-reduced-motion:reduce){
.ticker-track{ animation:none; }
.ticker-view{ overflow-x:auto; }
}
@media (max-width:720px){ .ticker-label span:not(.pulse){ display:none; } }
/* ======================================================= UPDATES CAROUSEL
Enhances the existing announcement grid in place. With JavaScript off the
cards stay a plain, complete grid. */
.news-carousel{ position:relative; }
.news-carousel .updates{ display:block; }
.news-viewport{ overflow:hidden; margin-inline:-4px; padding:4px; }
.news-track{
display:flex; gap:var(--s-5);
transition:transform .55s cubic-bezier(.4,0,.2,1); will-change:transform;
}
.news-track > .update{ flex:0 0 var(--news-w,calc((100% - var(--s-5) * 2) / 3)); margin:0; }
.news-ctrl{
display:flex; align-items:center; justify-content:space-between;
gap:var(--s-4); margin-top:var(--s-6);
}
.news-dots{ display:flex; gap:.4rem; }
.news-dots button{
width:9px; height:9px; padding:0; border:0; border-radius:50%;
background:var(--ink-300); cursor:pointer; transition:all var(--dur) var(--ease);
}
.news-dots button:hover{ background:var(--brand-500); }
.news-dots button[aria-current="true"]{ width:26px; border-radius:5px; background:var(--brand-700); }
.news-arrows{ display:flex; gap:.4rem; }
.news-arrows button{
width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
background:var(--surface); color:var(--ink-700); cursor:pointer;
display:grid; place-items:center; transition:all var(--dur) var(--ease);
}
.news-arrows button:hover:not(:disabled){ border-color:var(--brand-700); color:var(--brand-700); background:var(--brand-050); }
.news-arrows button:disabled{ opacity:.35; cursor:default; }
.news-arrows svg{ width:16px; height:16px; }
.news-progress{ height:2px; background:var(--line); border-radius:1px; overflow:hidden; flex:1; max-width:140px; }
.news-progress i{ display:block; height:100%; width:0; background:var(--brand-600); }
@media (max-width:980px){ .news-track > .update{ flex-basis:calc((100% - var(--s-5)) / 2); } }
@media (max-width:640px){ .news-track > .update{ flex-basis:100%; } }
/* ========================================================= INSTAGRAM WALL */
.ig{ position:relative; }
.ig-head{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:var(--s-4); margin-bottom:var(--s-6);
}
.ig-id{ display:flex; align-items:center; gap:var(--s-4); }
.ig-ring{
width:56px; height:56px; border-radius:50%; flex:none; display:grid; place-items:center;
background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); padding:3px;
}
.ig-ring img{ width:100%; height:100%; border-radius:50%; object-fit:contain;
background:#fff; padding:5px; }
.ig-handle{ font-family:var(--font-display); font-size:var(--fs-xl); font-weight:600; color:var(--text); line-height:1.15; }
.ig-sub{ font-size:var(--fs-sm); color:var(--text-muted); }
.ig-wall{ display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start; }
.ig-post{
border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
background:var(--surface); min-height:420px; display:flex;
}
.ig-post blockquote{ margin:0 !important; border:0 !important; box-shadow:none !important; flex:1; }
/* Shown until Instagram's embed script replaces the blockquote — and shown
permanently to anyone whose network or extension blocks that script. It has
to look deliberate, because for some readers it is the only thing they see. */
.ig-post .ig-fallback{
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:var(--s-4); padding:var(--s-7); min-height:420px; text-align:center;
}
.ig-post .ig-fallback::before{
content:""; width:52px; height:52px; border-radius:15px; flex:none;
background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);
-webkit-mask:var(--ig-glyph) center/28px no-repeat; mask:var(--ig-glyph) center/28px no-repeat;
box-shadow:inset 0 0 0 99px rgba(0,0,0,0);
}
.ig-post .ig-fallback{
--ig-glyph:url("data:image/svg+xml;utf8,");
}
.ig-post .ig-fallback a{
display:inline-flex; align-items:center; gap:.5rem;
padding:.6rem 1.2rem; border-radius:var(--radius-pill);
border:1px solid var(--line); font-size:var(--fs-sm); font-weight:600; color:var(--brand-700);
transition:all var(--dur) var(--ease); max-width:100%;
}
.ig-post .ig-fallback a:hover{ border-color:var(--brand-700); background:var(--brand-050); }
.ig-empty{
display:grid; gap:var(--s-4); justify-items:center; text-align:center;
padding:var(--s-9) var(--s-6); border:1px dashed var(--line);
border-radius:var(--radius); background:var(--surface-alt);
}
.ig-empty p{ max-width:52ch; margin:0; color:var(--text-muted); font-size:var(--fs-sm); }
/* ================================================================= POPUP */
.pop-scrim{
position:fixed; inset:0; z-index:300; display:grid; place-items:center;
background:rgba(10,14,12,.62); backdrop-filter:blur(3px);
padding:clamp(1rem,4vw,2.5rem); animation:popFade .22s var(--ease);
}
.pop-scrim[hidden]{ display:none; }
@keyframes popFade{ from{ opacity:0 } to{ opacity:1 } }
.pop{
position:relative; width:min(520px,100%); max-height:90vh; overflow:auto;
background:var(--surface); border-radius:var(--radius-lg,18px);
box-shadow:0 30px 80px rgba(0,0,0,.35); animation:popRise .3s var(--ease);
}
@keyframes popRise{ from{ opacity:0; transform:translateY(18px) scale(.985) } to{ opacity:1; transform:none } }
.pop-band{
background:var(--brand-gradient,var(--brand-800)); color:#fff;
padding:var(--s-7) var(--s-7) var(--s-6); position:relative; overflow:hidden;
}
.pop-band::after{
content:""; position:absolute; inset-inline-end:-60px; top:-70px;
width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.07);
}
.pop-band img{ height:40px; width:auto; margin-bottom:var(--s-5); position:relative; z-index:2; }
.pop-eyebrow{
display:inline-flex; align-items:center; gap:.5rem; position:relative; z-index:2;
font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase;
font-weight:600; color:var(--accent-500); margin-bottom:var(--s-3);
}
.pop-band h2{ color:#fff; margin:0; font-size:var(--fs-2xl); position:relative; z-index:2; }
.pop-body{ padding:var(--s-7); display:flex; flex-direction:column; gap:var(--s-4); }
.pop-body p{ margin:0; color:var(--text-muted); }
.pop-body .btn-row{ margin-top:var(--s-2); }
.pop-close{
position:absolute; top:12px; inset-inline-end:12px; z-index:3;
width:36px; height:36px; border:0; border-radius:50%;
background:rgba(255,255,255,.16); color:#fff; font-size:1.5rem; line-height:1;
cursor:pointer; display:grid; place-items:center; transition:background var(--dur) var(--ease);
}
.pop-close:hover{ background:rgba(255,255,255,.3); }
.pop-dismiss{
background:none; border:0; padding:0; font:inherit; font-size:var(--fs-xs);
color:var(--ink-400); cursor:pointer; text-decoration:underline;
text-underline-offset:3px; align-self:flex-start;
}
.pop-dismiss:hover{ color:var(--ink-700); }
@media print{ .pop-scrim, .ticker{ display:none !important; } }
/* A live feed widget, when the school has one configured. */
.ig-feed{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.ig-feed iframe{ display:block; width:100%; height:var(--ig-h,520px); border:0; }/* ==========================================================================
OPEN DAYS — the announcement popup, the date picker, the carousel
Appended to each site's site.css. Uses only existing brand tokens, so it
inherits Evolution's hunter green and the Lycée's navy without a fork.
========================================================================== */
/* ------------------------------------------------------------- the dates */
.od-dates{
display:grid; gap:var(--s-4);
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.od-card{
background:var(--surface); border:1px solid var(--line);
border-top:4px solid var(--brand-700); border-radius:var(--radius-lg);
padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-1);
}
.od-card .od-day{
font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:700;
color:var(--brand-800); line-height:1; font-variant-numeric:tabular-nums;
}
.od-card .od-mon{ font-size:var(--fs-base); font-weight:600; color:var(--text); }
.od-card .od-time{
font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
color:var(--ink-500); margin-top:var(--s-2);
}
/* --------------------------------------------------------- the date picker */
.od-choice{ display:grid; gap:var(--s-3); }
.od-pick{
display:flex; align-items:center; gap:var(--s-4); cursor:pointer;
border:1.5px solid var(--line); border-radius:var(--radius);
padding:var(--s-4) var(--s-5); position:relative;
transition:all var(--dur) var(--ease);
}
.od-pick:hover{ border-color:var(--brand-300); background:var(--brand-050); }
.od-pick input{ position:absolute; opacity:0; width:0; height:0; }
/* The chosen date is stated twice — border and inset rule — so it survives a
greyscale print and a screen read at low contrast. */
.od-pick:has(input:checked){
border-color:var(--brand-700); background:var(--brand-050);
box-shadow:inset 0 0 0 1px var(--brand-700);
}
.od-pick:has(input:focus-visible){ outline:3px solid var(--accent-500); outline-offset:2px; }
.od-body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.od-body strong{
font-family:var(--font-display); font-size:var(--fs-lg); font-weight:600;
color:var(--brand-900); line-height:1.25;
}
.od-body em{
font-style:normal; font-size:var(--fs-sm); font-weight:700; color:var(--brand-700);
font-variant-numeric:tabular-nums;
}
.od-note{ font-size:var(--fs-sm); color:var(--text-muted); line-height:1.5; }
.od-pick--notify{ border-style:dashed; }
.od-pick--notify .od-body strong{
font-family:var(--font-body); font-size:var(--fs-base); font-weight:600; color:var(--text);
}
.od-choice.is-notify-only .od-pick--notify{
border-style:solid; border-color:var(--brand-100); background:var(--brand-050); cursor:default;
}
/* ------------------------------------------------------------------- form */
.od-form{
background:var(--surface); border:1px solid var(--line);
border-radius:var(--radius-lg); overflow:hidden; counter-reset:odstep;
}
.od-step{ border:0; border-top:1px solid var(--line); margin:0; padding:var(--s-6); }
.od-step:first-of-type{ border-top:0; }
.od-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);
}
.od-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:odstep;
}
.od-num::before{ content:counter(odstep); }
.od-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.od-form .field{ margin-bottom:var(--s-4); }
.od-form .row .field{ margin-bottom:0; }
.od-form .row + .row, .od-form .row + .field{ margin-top:var(--s-4); }
.od-form .hint{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:var(--s-2); }
@media (max-width:640px){ .od-form .row{ grid-template-columns:1fr; } }
/* The one branching question: is this family already with us? */
.od-two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
@media (max-width:640px){ .od-two{ grid-template-columns:1fr; } }
.od-opt{
display:block; cursor:pointer; border:1.5px solid var(--line);
border-radius:var(--radius); padding:var(--s-4) var(--s-5); position:relative;
transition:all var(--dur) var(--ease);
}
.od-opt:hover{ border-color:var(--brand-300); background:var(--brand-050); }
.od-opt input{ position:absolute; opacity:0; width:0; height:0; }
.od-opt strong{ display:block; font-size:var(--fs-base); color:var(--text); }
.od-opt em{
display:block; font-style:normal; font-size:var(--fs-xs);
color:var(--text-muted); margin-top:4px; line-height:1.45;
}
.od-opt:has(input:checked){
border-color:var(--brand-700); background:var(--brand-050);
box-shadow:inset 0 0 0 1px var(--brand-700);
}
.od-opt:has(input:checked) strong{ color:var(--brand-800); }
.od-opt:has(input:focus-visible){ outline:3px solid var(--accent-500); outline-offset:2px; }
.od-when[hidden]{ display:none; }
.od-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;
}
.od-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);
}
.od-consent input:checked{ background:var(--brand-700); border-color:var(--brand-700); }
.od-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);
}
.od-consent input:focus-visible{ outline:3px solid var(--accent-500); outline-offset:2px; }
.od-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);
}
.od-submit .btn{ min-width:220px; justify-content:center; }
.od-status{ font-size:var(--fs-sm); color:var(--text-muted); margin:0; flex:1; min-width:200px; }
.od-status.is-bad{ color:#b3261e; font-weight:600; }
.od-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:odSpin .7s linear infinite; vertical-align:-2px;
}
@keyframes odSpin{ to{ transform:rotate(360deg) } }
/* Scoped to real controls: a