/* ═══════════════════════════════════════════════════
LAWRENCE COLLEGE GHORA GALI — MODERN STYLES v2
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── the hidden attribute must actually hide ───────────────────────
The browser's own rule is [hidden] { display: none }, and any class rule
outranks it. So an element styled .vis-detail { display: grid } stayed on
screen after JavaScript set element.hidden = true: the attribute was set,
the panel was visible, and nothing in the code looked wrong. Seven
elements across the site were in that state — the "Shown on the roll"
section, the photograph panel's zoom control, facts and actions, two
buttons in the admissions wizard, and the homepage clock.
!important, because outranking a class rule is the whole point. */
[hidden] { display: none !important; }
:root {
/* ── LCGG Brand Navy ─────────────────────────────── */
--g-dark: #04101f;
--g-deep: #0b1f42;
--g-mid: #163272;
--g-light: #2a5cad;
--g-pale: #c2d2ec;
/* ── Gold ────────────────────────────────────────── */
--gold: #ffcf01;
--gold-lt: #ffe566;
--gold-dk: #d4a901;
--gold-pale: #fffbe0;
/* ── Ghora Gali Pine Green ───────────────────────── */
--pine: #2a6041;
--pine-dk: #1a3d28;
--pine-lt: #458c63;
/* ── Supporting palette ──────────────────────────── */
--green: #3c763d;
--blue: #2a5cad;
--blue-lt: #5b8dd9;
--cream: #f8f6f1;
--cream-d: #eae6dc;
--white: #ffffff;
--surface: #ffffff; /* adaptive card/panel surface (flips in dark) */
--txt-main: #16181d; /* table/body ink (adaptive) */
--navy-deep: #04101f; /* deep navy header fill */
--ink: #0b1f42; /* adaptive heading/body ink on surfaces (flips in dark) */
--txt: #16181d;
--txt-mid: #41444b;
--txt-lt: #575a5f; /* was #6e7178 — only 3.19:1 on the tinted section grounds */
/* Ink tokens. Gold and navy read as TEXT on only one of the two themes,
so these flip. The plain --gold/--g-deep tokens stay put because they
are also used for fills, borders and gradients. */
--gold-ink: #6c5800;
--navy-ink: #0b1f42;
--shd-xs: 0 1px 2px rgba(10,18,34,.05);
--shd-sm: 0 2px 10px rgba(10,18,34,.06), 0 1px 3px rgba(10,18,34,.04);
--shd-md: 0 12px 32px rgba(10,18,34,.10), 0 2px 8px rgba(10,18,34,.05);
--shd-lg: 0 24px 56px rgba(10,18,34,.14), 0 4px 14px rgba(10,18,34,.06);
--shd-xl: 0 32px 80px rgba(4,16,31,.24);
--shd-gold: 0 8px 28px rgba(212,169,1,.22);
/* ══ CATEGORY PALETTE ════════════════════════════════════════════
Navy and gold remain the frame; each part of the college now carries
a colour of its own so the site is not one long cream page. The three
new ones — teal, terracotta and plum — were chosen deep enough to be
read as text, not just used as decoration.
--c-* the accent, safe as text on a light ground (>= 5.2:1)
--c-*-tint a 7% wash of it, for section grounds
--c-*-lt a lighter twin for the dark theme
--c-*-dtint the matching ground for the dark theme
Gold is the exception and always has been: #d4a901 reads at only
2.2:1 on white, so every gold *text* use now takes --c-gold, a deep
antique gold at 5.8:1. The bright gold keeps all its fills and rules. */
--c-navy: #0b1f42; --c-navy-tint: #eeeff2; --c-navy-lt: #7fa8e8; --c-navy-dtint: #071428;
--c-blue: #1d4f9e; --c-blue-tint: #eff3f8; --c-blue-lt: #6fa5f0; --c-blue-dtint: #081a33;
--c-teal: #0f5f5c; --c-teal-tint: #eef4f4; --c-teal-lt: #4fc4bd; --c-teal-dtint: #061d29;
--c-pine: #2a6041; --c-pine-tint: #f0f4f2; --c-pine-lt: #5cc189; --c-pine-dtint: #0a1d24;
--c-gold: #7d6200; --c-gold-tint: #fcf9ed; --c-gold-lt: #ffcf01; --c-gold-dtint: #1e1c14;
--c-terracotta: #a8492c; --c-terracotta-tint: #f9f2f0; --c-terracotta-lt: #f0916f; --c-terracotta-dtint: #1e1921;
--c-plum: #7a4468; --c-plum-tint: #f6f2f4; --c-plum-lt: #d193c0; --c-plum-dtint: #17182b;
/* The colour the current page answers to. Overridden per section below,
so any component can simply say var(--accent) and be right. */
--accent: var(--c-gold);
--accent-tint: var(--c-gold-tint);
--accent-lt: var(--c-gold-lt);
--accent-dtint: var(--c-gold-dtint);
/* ── Type scale (issue 1) ─────────────────────────────────────
The stylesheet had 69 distinct rem font sizes and no scale token
at all, which is why every component invented its own value. These
eight steps are the sizes the design actually uses; new work should
pick one rather than inventing a 70th. 12px is the floor for any
text a visitor is expected to read. */
--fs-xs: .75rem; /* 12px — the smallest permitted body size */
--fs-sm: .82rem; /* 13px — captions, meta, chips */
--fs-base: .95rem; /* 15px — body copy */
--fs-md: 1.05rem; /* 17px — lead paragraphs */
--fs-lg: 1.25rem; /* 20px — card headings */
--fs-xl: 1.6rem; /* 26px — section sub-heads */
--fs-2xl: 2.2rem; /* 35px — section heads */
--fs-3xl: 2.9rem; /* 46px — page titles */
/* ── Radii (issue 3) ──────────────────────────────────────────
50px and 999px were both in use for the same pill shape, on 58
declarations between them. One token now. */
--rad-pill: 999px;
--rad-s: 10px; --rad-m: 14px; --rad-l: 18px; --rad-xl: 28px;
--tr: all .32s cubic-bezier(.4,0,.2,1);
--tr-fast: all .18s cubic-bezier(.4,0,.2,1);
--grad-navy: linear-gradient(135deg, #0b1f42 0%, #163272 100%);
--grad-gold: linear-gradient(115deg, #d4a901 0%, #ffcf01 35%, #ffe566 65%, #ffcf01 100%);
--grad-dark: linear-gradient(155deg, #04101f 0%, #0b1020 100%);
--grad-hero: linear-gradient(155deg, #04101f 0%, #0b1f42 55%, #04101f 100%);
--grad-pine: linear-gradient(135deg, #1a3d28 0%, #2a6041 100%);
}
/* ══════════════════════════════════════════════════════════════════════
Every page carries data-cat on , set from the PAGE_SECTION map
that already drives the active navigation state. One assignment here
and the whole page follows.
══════════════════════════════════════════════════════════════════════ */
[data-cat="overview"] { --accent: var(--c-gold); --accent-tint: var(--c-gold-tint); --accent-lt: var(--c-gold-lt); --accent-dtint: var(--c-gold-dtint); }
[data-cat="campus"] { --accent: var(--c-teal); --accent-tint: var(--c-teal-tint); --accent-lt: var(--c-teal-lt); --accent-dtint: var(--c-teal-dtint); }
[data-cat="schools"] { --accent: var(--c-blue); --accent-tint: var(--c-blue-tint); --accent-lt: var(--c-blue-lt); --accent-dtint: var(--c-blue-dtint); }
[data-cat="sports"] { --accent: var(--c-terracotta); --accent-tint: var(--c-terracotta-tint); --accent-lt: var(--c-terracotta-lt); --accent-dtint: var(--c-terracotta-dtint); }
[data-cat="arts"] { --accent: var(--c-plum); --accent-tint: var(--c-plum-tint); --accent-lt: var(--c-plum-lt); --accent-dtint: var(--c-plum-dtint); }
[data-cat="alumni"] { --accent: var(--c-pine); --accent-tint: var(--c-pine-tint); --accent-lt: var(--c-pine-lt); --accent-dtint: var(--c-pine-dtint); }
[data-cat="admissions"] { --accent: var(--c-navy); --accent-tint: var(--c-navy-tint); --accent-lt: var(--c-navy-lt); --accent-dtint: var(--c-navy-dtint); }
/* Parents and Office split out of Admissions in the nav but keep its navy,
so those pages look exactly as they did before the menu was reorganised. */
[data-cat="parents"] { --accent: var(--c-navy); --accent-tint: var(--c-navy-tint); --accent-lt: var(--c-navy-lt); --accent-dtint: var(--c-navy-dtint); }
[data-cat="office"] { --accent: var(--c-navy); --accent-tint: var(--c-navy-tint); --accent-lt: var(--c-navy-lt); --accent-dtint: var(--c-navy-dtint); }
[data-theme="dark"] { --accent: var(--accent-lt); --accent-tint: var(--accent-dtint); }
/* Cards can carry their own data-cat (the alumni roll does). Without this the
nested block re-introduces the light accent inside dark mode. */
[data-theme="dark"] [data-cat] { --accent: var(--accent-lt); --accent-tint: var(--accent-dtint); }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
color: var(--txt); background: var(--cream);
line-height: 1.7; overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Page-exit transition (used when navigating away) */
body.page-out { opacity: 0; transform: translateY(-6px); transition: opacity .24s ease, transform .24s ease; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.18; letter-spacing: -.015em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 3vw, 2.6rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 600; }h4, h3{ font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-family: 'Inter', sans-serif; }
p { margin-bottom: 1.15em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
button { font-family: inherit; }
hr {
border: none; height: 1px;
background: linear-gradient(to right, transparent, var(--cream-d) 20%, var(--cream-d) 80%, transparent);
margin: 36px 0;
}
/* Elegant blockquote */
blockquote {
border-left: 3px solid var(--gold);
padding: 14px 24px; margin: 28px 0;
background: rgba(255,207,1,.04);
border-radius: 0 var(--rad-m) var(--rad-m) 0;
}
blockquote p { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.05rem; color: var(--g-deep); line-height: 1.75; margin: 0; }
/* ── Custom Scrollbar ────────────────────────────── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(11,31,66,.28); border-radius: 10px; border: 3px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background: rgba(11,31,66,.45); }
/* ── Accessibility: keyboard focus ──────────────────── */
*:focus-visible {
outline: 2px solid var(--gold-dk);
outline-offset: 3px;
border-radius: 2px;
}
*:focus:not(:focus-visible) { outline: none; }
/* ── Gold text contrast on light backgrounds ─────────
--gold (#ffcf01) fails WCAG AA on white/cream (~1.8:1).
These elements appear on light backgrounds, so we use
--gold-dk (#d4a901, ~3.1:1) instead. */
.pe-num, .pe-info span,
.faq-q::after,
.h4-letter, .h4-motto,
.tl-yr, .ti-yr,
.hs-item span,
.ay-yr, .fd-label,
.oo-role,
.ms-mic { color: var(--accent); }
/* ── Preloader ───────────────────────────────────── */
body.pl-lock { overflow: hidden; }
.preloader {
position: fixed; inset: 0; z-index: 99999;
display: flex; align-items: center; justify-content: center;
/* Explicit opacity + visibility so nothing can hide it before pl-out is added */
opacity: 1; visibility: visible;
transition: opacity .65s cubic-bezier(.4,0,.2,1), visibility .65s;
}
.preloader.pl-out { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader p { text-align: center; hyphens: none; }
/* Rich layered background */
.pl-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 25% 60%, rgba(22,50,114,.55) 0%, transparent 55%),
radial-gradient(ellipse at 75% 30%, rgba(255,207,1,.12) 0%, transparent 48%),
radial-gradient(ellipse at 50% 95%, rgba(42,96,65,.2) 0%, transparent 45%),
linear-gradient(155deg, #04101f 0%, #0b1f42 60%, #04101f 100%);
}
/* Subtle animated grain on preloader */
.pl-bg::after {
content: ''; position: absolute; inset: 0; opacity: .04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 200px 200px;
}
.pl-inner {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 0 24px;
/* No group animation — each child animates individually */
}
/* Shared fade-up keyframe */
@keyframes plFadeUp {
from { opacity: 0; transform: translateY(14px); }
}
/* Crest with pulsing ring */
.pl-crest-wrap {
position: relative; width: 110px; height: 110px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 32px;
/* Spring scale-in */
animation: plScaleIn .7s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes plScaleIn {
from { opacity: 0; transform: scale(.6); }
to { opacity: 1; transform: scale(1); }
}
.pl-crest {
width: 90px; height: 90px; object-fit: contain; position: relative; z-index: 1;
filter: drop-shadow(0 4px 24px rgba(255,207,1,.45));
/* Float starts after scale-in completes */
animation: plScaleIn .7s cubic-bezier(.34,1.56,.64,1) both,
plFloat 3s ease-in-out .7s infinite;
}
@keyframes plFloat {
50% { transform: translateY(-7px); }
}
.pl-crest-ring {
position: absolute; inset: 0; border-radius: 50%;
border: 1px solid rgba(255,207,1,.25);
animation: plRing 2.4s ease-in-out .7s infinite;
}
@keyframes plRing {
0% { transform: scale(1); opacity: .5; }
60% { transform: scale(1.35); opacity: 0; }
100% { transform: scale(1.35); opacity: 0; }
}
/* Text block — name slides up after crest */
.pl-text { margin-bottom: 10px; }
.pl-name {
font-family: 'Playfair Display', serif;
font-size: 1.45rem; font-weight: 700; color: var(--white);
letter-spacing: .01em; line-height: 1.2; margin: 0;
animation: plFadeUp .55s cubic-bezier(.4,0,.2,1) .5s both;
}
/* Place tag: letter-spacing expands as it fades in */
.pl-place {
font-size: .75rem; text-transform: uppercase;
color: var(--gold-lt); margin: 6px 0 0;
animation: plExpand .7s cubic-bezier(.4,0,.2,1) .65s both;
}
@keyframes plExpand {
from { opacity: 0; letter-spacing: .04em; transform: translateY(6px); }
to { opacity: 1; letter-spacing: .22em; transform: none; }
}
/* Motto fades in softly */
.pl-motto {
font-family: 'Playfair Display', serif; font-style: italic;
font-size: 1.05rem; color: rgba(255,255,255,.68);
margin: 18px 0 28px; letter-spacing: .02em;
animation: plFadeUp .6s cubic-bezier(.4,0,.2,1) .85s both;
}
/* Loading bar slides up last */
.pl-bar {
width: 200px; height: 2px;
background: rgba(255,255,255,.1); border-radius: 2px;
overflow: hidden; margin-bottom: 14px;
animation: plFadeUp .45s cubic-bezier(.4,0,.2,1) 1.05s both;
}
.pl-fill {
height: 100%; width: 0%;
background: var(--grad-gold); border-radius: 2px;
transition: width .12s cubic-bezier(.4,0,.2,1);
box-shadow: 0 0 8px rgba(255,207,1,.6);
}
/* Hint appears then blinks */
.pl-hint {
font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
color: rgba(255,255,255,.5); margin: 0;
animation: plFadeUp .4s cubic-bezier(.4,0,.2,1) 1.2s both,
plBlink 1.6s ease-in-out 1.6s infinite;
}
@keyframes plBlink { 0%,100%{ opacity:.5 } 50%{ opacity:.8 } }
/* ── Progress Bar ────────────────────────────────── */
.progress-bar {
position: fixed; top: 0; left: 0; height: 2px; width: 0%;
background: var(--gold); z-index: 9999;
transition: width .08s linear;
}
/* ── Utils ───────────────────────────────────────── */
.con { max-width: 1680px; margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 56px); }
.narrow { max-width: 760px; }
.sec-label {
display: inline-flex; align-items: center; gap: 8px;
font-size: .75rem; font-weight: 700;
letter-spacing: .24em; text-transform: uppercase;
color: var(--accent); margin-bottom: 12px;
}
.sec-label::before {
content: ''; display: block; width: 20px; height: 1px;
background: var(--grad-gold); flex-shrink: 0;
}
.sec-h2 {
font-size: clamp(1.75rem, 3.2vw, 2.8rem);
color: var(--g-deep); margin-bottom: 16px; letter-spacing: -.02em;
}
.sec-desc { font-size: 1rem; color: var(--txt-mid); max-width: 620px; line-height: 1.88; }
.sec-hdr { margin-bottom: 56px; }
.sec-hdr.center { text-align: center; }
.sec-hdr.center .sec-desc { margin: 0 auto; }
.sec-hdr.center .sec-label { justify-content: center; }
.sec-hdr.center .sec-label::before { display: none; }
.white { color: var(--white) !important; }
.muted { color: rgba(255,255,255,.65) !important; }
.lead { font-size: 1.08rem; color: var(--txt-mid); line-height: 1.92; margin-bottom: 18px; }
/* Professional number/stat display */
.stat-num { font-family: 'Playfair Display', serif; font-size: 2.6rem; font-weight: 700; color: var(--g-deep); line-height: 1; }
.stat-label { font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--txt-lt); margin-top: 4px; }
/* Inline gold divider */
.gold-rule { display: block; width: 48px; height: 2px; background: var(--grad-gold); margin: 20px 0; }
.gold-rule.center { margin-left: auto; margin-right: auto; }
/* ── Gradient text ───────────────────────────────── */
.grad-text {
background: var(--grad-navy);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.grad-gold-text {
background: var(--grad-gold);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Glass card ──────────────────────────────────── */
.glass {
background: rgba(255,255,255,.07);
backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
border: 1px solid rgba(255,255,255,.14);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.glass-light {
background: rgba(255,255,255,.78);
backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
border: 1px solid rgba(255,255,255,.65);
box-shadow: 0 4px 24px rgba(11,31,66,.06), inset 0 1px 0 rgba(255,255,255,.9);
}
/* ── Scroll reveal ───────────────────────────────── */
.ri {
opacity: 0; transform: translateY(32px);
transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
/* ── Buttons ─────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 30px; border-radius: var(--rad-pill);
font-weight: 600; font-size: .9rem; letter-spacing: .01em;
cursor: pointer; transition: var(--tr); border: 1px solid transparent;
position: relative;
}
.btn-gold {
background: var(--gold); color: var(--g-dark); border-color: transparent;
box-shadow: var(--shd-xs);
}
.btn-gold:hover { background: var(--gold-lt); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(212,169,1,.3); }
/* A 1px line at 40% white over a moving video read as a disabled control
next to the solid gold CTA. Given a real border weight and a faint fill
so it is unmistakably a button, while staying secondary to Apply. */
.btn-ghost {
background: rgba(255,255,255,.12); color: var(--white);
border-width: 1.5px; border-color: rgba(255,255,255,.7);
text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.22); transform: translateY(-1px); }
@media (forced-colors: active) { .btn-ghost { border-width: 2px; } }
.btn-outline { background: transparent; color: var(--g-deep); border-color: rgba(11,31,66,.4); }
/* ══════════════════════════════════════════════════
NAVBAR
══════════════════════════════════════════════════ */
.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
transition: var(--tr); padding: 0;
}
.navbar.scrolled {
background: rgba(5,13,24,.82);
backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
box-shadow: 0 8px 32px rgba(0,0,0,.22);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-inner {
display: flex; align-items: center; justify-content: space-between;
max-width: 1680px; margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 56px); height: 70px;
}
/* The theme toggle, search and hamburger used to sit as separate children
of a space-between flex row, which scattered them across the middle of
the header. They are one functional group and now live in one, pinned to
the right, after the menu in both reading and tab order (issue 22). */
.nav-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: 14px; }
.nav-logo { display: flex; align-items: center; gap: 12px; color: var(--white); transition: var(--tr); }
.nav-logo:hover { opacity: .9; transform: translateX(2px); }
.nav-crest { width: 62px; height: 62px; flex-shrink: 0; }
.nav-crest-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.nb-main { display: block; font-family: 'Playfair Display', serif; font-size: .98rem; font-weight: 700; color: var(--white); line-height: 1.15; letter-spacing: .01em; }
/* Was 9px all-caps across 19 characters — small and uppercase compound,
and a place name reads better in its own case anyway (issues 4, 5). */
.nb-sub { display: block; font-size: .75rem; letter-spacing: .06em; color: var(--gold-lt); margin-top: 2px; }
.nav-toggle {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; cursor: pointer; padding: 6px; z-index: 10;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: var(--tr); }
.nav-menu { display: flex; align-items: center; gap: 4px; } /* was 0 — labels ran into the next chevron (issue 23) */
/* Desktop: dropdown via CSS hover */
.has-dd { position: relative; }
.dd-trigger {
background: none; border: none; cursor: pointer;
color: rgba(255,255,255,.78); font-size: .82rem; font-weight: 500;
padding: 8px 15px; border-radius: 8px; /* was 13px (issue 23) */
transition: var(--tr); letter-spacing: .03em;
display: flex; align-items: center; gap: 5px;
}
.dd-trigger:hover, .has-dd:hover .dd-trigger { color: var(--white); background: rgba(255,255,255,.09); }
.has-dd.active .dd-trigger { color: var(--gold-lt); }
.arr { font-size: .75rem; opacity: .65; transition: transform .22s; }
.has-dd:hover .arr { transform: rotate(180deg); }
.dropdown {
position: absolute; top: calc(100% + 10px); left: 0;
background: rgba(7,16,30,.8);
backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--rad-m); padding: 8px; min-width: 228px;
opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97);
transition: opacity .28s cubic-bezier(.4,0,.2,1) .16s,
visibility .28s cubic-bezier(.4,0,.2,1) .16s,
transform .28s cubic-bezier(.4,0,.2,1) .16s;
box-shadow: 0 20px 48px rgba(0,0,0,.35); z-index: 999;
}
/* Invisible bridge across the gap between trigger and panel while the
menu is open (desktop), so the cursor can travel down into the
dropdown without losing :hover */
@media (min-width: 1341px) {
.has-dd:hover::after,
.has-dd.dd-open::after {
content: ''; position: absolute; left: 0; right: 0;
top: 100%; height: 12px;
}
}
/* Opens on hover (desktop) or .dd-open (click/tap/keyboard); closing is
slightly delayed so brief cursor slips don't dismiss the menu.
NOTE: no pointer-events juggling — visibility:hidden alone blocks
interaction when closed, and a still-fading panel stays hoverable,
which keeps the :hover chain from breaking mid-travel. */
.has-dd.dd-open .dropdown,
.has-dd:hover .dropdown {
opacity: 1; visibility: visible; transform: none;
transition-delay: 0s, 0s, 0s;
}
.has-dd.dd-open .arr,
.has-dd:hover .arr { transform: rotate(180deg); }
.dropdown a {
display: block; padding: 9px 14px; color: rgba(255,255,255,.85);
font-size: .81rem; font-weight: 500; border-radius: 8px; transition: var(--tr-fast);
letter-spacing: .01em;
}
.dropdown a:hover, .dropdown a.current { background: rgba(255,255,255,.08); color: var(--gold-lt); padding-left: 18px; }
.dropdown a.current { color: var(--gold-lt); font-weight: 600; }
.nm-link { /* standalone link (not trigger) */
color: rgba(255,255,255,.82); font-size: .83rem; font-weight: 500;
padding: 8px 15px; border-radius: 7px; transition: var(--tr);
display: inline-block;
}
.nm-link:hover { color: var(--white); background: rgba(255,255,255,.1); }
.nm-link.active { color: var(--gold); }
/* Admissions nav CTA — solid gold pill (class name .nm-wa is historical) */
.nm-wa {
display: inline-flex !important; align-items: center; gap: 7px;
background: var(--gold) !important;
color: var(--g-dark) !important; font-weight: 700 !important; font-size: .78rem !important;
padding: 9px 20px !important; border-radius: var(--rad-pill) !important; margin-left: 10px;
box-shadow: none !important;
letter-spacing: .02em; transform: translateY(0); transition: var(--tr) !important;
}
.nm-wa:hover {
background: var(--gold-lt) !important;
transform: translateY(-1px) !important;
box-shadow: 0 8px 22px rgba(212,169,1,.32) !important;
}
.nm-wa:active { transform: translateY(0) !important; }
/* ══════════════════════════════════════════════════
HERO (Home)
══════════════════════════════════════════════════ */
.hero {
position: relative; min-height: 100vh; min-height: min(100svh, 1000px);
display: flex; flex-direction: column; align-items: center; justify-content: center;
overflow: hidden; background: #0f0f0f; /* neutral, not navy: nothing tints the footage */
padding: 110px 0 90px;
}
.hero-overlay {
position: absolute; inset: 0;
/* lighter, and neutral rather than blue, so the footage reads clearly.
The foot stays dark: the title and buttons sit against it. */
background:
linear-gradient(to bottom,
rgba(12,12,12,.34) 0%,
rgba(12,12,12,.14) 42%,
rgba(12,12,12,.52) 74%,
rgba(11,11,11,.88) 100%);
}
#particles { display: none; }
.hero-content {
position: relative; z-index: 2; text-align: center;
max-width: 960px; width: 100%; padding: 0 24px;
}
.hero-text-col { width: 100%; }
.hero-crest {
width: clamp(150px, 18vw, 230px); height: auto;
display: block; margin: 0 auto 24px;
filter: drop-shadow(0 12px 32px rgba(0,0,0,.5));
}
/* Crest is intentionally static — no float */
.hero-crest.vis { animation: none; }
@media (prefers-reduced-motion: reduce) {
.hero-crest.vis { animation: none; }
}
.hero-counters-wrap {
position: relative; z-index: 2;
width: 100%; max-width: 1080px;
margin: 64px auto 0; padding: 0 24px;
}
.hero-counters {
display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap;
border-top: 1px solid rgba(255,255,255,.16);
padding-top: 30px; gap: 4px 0;
}
.hc-item { display: flex; flex-direction: column; align-items: center; padding: 8px 38px; position: relative; }
.hc-item + .hc-item::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 34px; background: rgba(255,255,255,.14);
}
.hc-num { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: var(--white); line-height: 1; }
.hc-item sup { font-size: .88rem; color: var(--gold); font-weight: 700; vertical-align: super; }
.hc-label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-top: 8px; display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }
.home-sec { padding: 88px 0; }
/* ── Home: Highlights ────────────────────────────── */
.highlights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* ── Home: Alumni Spotlight ──────────────────────── */
.alumni-spot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.as-card {
background: var(--white); border-radius: var(--rad-l); padding: 28px;
border: 1px solid rgba(11,31,66,.08); box-shadow: var(--shd-sm);
text-align: center; transition: var(--tr);
}
.as-card:hover { box-shadow: var(--shd-md); transform: translateY(-4px); }
.as-av {
width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .85rem; color: var(--white);
border: 3px solid var(--gold-pale);
}
.as-name { font-size: 1.05rem; color: var(--g-deep); margin-bottom: 4px; }
.as-role { font-size: .75rem; color: var(--gold); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.as-desc { font-size: .82rem; color: var(--txt-lt); line-height: 1.65; }
/* ══════════════════════════════════════════════════
PAGE HERO (Inner pages)
══════════════════════════════════════════════════ */
.page-hero {
position: relative; min-height: 380px;
display: flex; align-items: flex-end; overflow: hidden;
background: #0f0f0f; /* neutral base: shows while the photo loads, and on heroes with no photo */
padding-top: 70px;
}
/* Blend-into-page gradient at bottom of every page hero */
.page-hero::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
background: linear-gradient(to bottom, transparent, var(--cream));
pointer-events: none; z-index: 3;
}
.ph-overlay {
position: absolute; inset: 0;
background: linear-gradient(155deg, rgba(15,15,15,.94) 0%, rgba(32,32,32,.88) 60%, rgba(15,15,15,.96) 100%);
}
.ph-pattern {
position: absolute; inset: 0; opacity: .055;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='12' x2='12' y2='0' stroke='%23ffffff' stroke-width='.9'/%3E%3C/svg%3E");
background-size: 12px 12px;
}
/* Gold accent glow at top of page hero */
.page-hero::before {
content: ''; position: absolute; top: 70px; left: 0; right: 0; height: 1px;
background: linear-gradient(to right, transparent, rgba(255,207,1,.25), transparent);
z-index: 4; pointer-events: none;
}
.ph-deco {
position: absolute; right: 3%; top: 50%; transform: translateY(-50%);
font-family: 'Playfair Display', serif; font-size: clamp(3rem, 10vw, 11rem); font-weight: 900;
color: rgba(255,255,255,.12); line-height: 1; pointer-events: none;
user-select: none; letter-spacing: .08em; white-space: nowrap; text-align: right;
text-shadow: 0 2px 40px rgba(0,0,0,.35);
}
.ph-content {
position: relative; z-index: 2; padding: 36px clamp(20px,3.5vw,56px) 56px;
max-width: 1680px; margin: 0 auto; width: 100%;
}
/* All text inside any page hero defaults to light — covers bare h1/p tags */
.ph-content h1 {
color: var(--white);
font-size: clamp(2rem, 5vw, 3.6rem);
line-height: 1.12; letter-spacing: -.02em; margin-bottom: 14px;
}
.ph-content h1 em { font-style: italic; color: var(--gold-lt); }
.ph-content h2 { color: var(--white); }
.ph-content > p {
color: rgba(255,255,255,.68);
max-width: 560px; line-height: 1.88; font-size: 1rem;
}
/* Breadcrumb */
.breadcrumb {
display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
font-size: .75rem; color: rgba(255,255,255,.65); margin-bottom: 20px;
letter-spacing: .04em; text-transform: uppercase; font-weight: 500;
}
.breadcrumb a { color: rgba(255,255,255,.68); transition: color .2s;
/* 20px tall missed the 24px target minimum (SC 2.5.8). */
display: inline-flex; align-items: center; min-height: 24px; }
.breadcrumb a:hover { color: var(--gold-lt); }
.breadcrumb span { color: rgba(255,255,255,.5); font-size: .75rem; }
.breadcrumb span:last-child { color: var(--gold-lt); font-weight: 600; text-transform: uppercase; }
.ph-title {
font-size: clamp(2rem, 5vw, 3.6rem); color: var(--white); margin-bottom: 14px;
font-weight: 700; line-height: 1.12; letter-spacing: -.02em;
}
.ph-title em { font-style: italic; color: var(--gold-lt); }
.ph-desc { font-size: 1.02rem; color: rgba(255,255,255,.62); max-width: 560px; line-height: 1.85; }
/* Page accent strips — LCGG navy-based */
/* Photo backgrounds for page heroes */
.ph-overview { background-image: url('images/gallery/campus-01.jpg'); background-size: cover; background-position: center; }
.ph-campus { background-image: url('images/gallery/campus-02.jpg'); background-size: cover; background-position: center; }
.ph-schools { background-image: url('images/gallery/campus-03.jpg'); background-size: cover; background-position: center; }
.ph-sports { background-image: url('images/gallery/jamali-stadium.jpg'); background-size: cover; background-position: center top; }
.ph-arts { background-image: url('images/gallery/campus-04.jpg'); background-size: cover; background-position: center; }
.ph-alumni { background-image: url('images/gallery/events-ceremony.jpg'); background-size: cover; background-position: center; }
.ph-admissions { background-image: url('images/gallery/events-annual.jpg'); background-size: cover; background-position: center; }
.ph-contact { background-image: url('images/gallery/campus-life.jpg'); background-size: cover; background-position: center; }
/* Hero overlays. Neutral by design: these darken the photograph so the
white title and breadcrumb stay legible, but they must not tint it.
Each grey carries the same relative luminance as the navy it replaced,
at the same alpha, so darkening and text contrast are unchanged. */
.ph-overview .ph-overlay { background: linear-gradient(160deg, rgba(15,15,15,.78) 0%, rgba(54,54,54,.72) 100%); }
.ph-campus .ph-overlay { background: linear-gradient(160deg, rgba(15,15,15,.78) 0%, rgba(54,54,54,.70) 100%); }
.ph-schools .ph-overlay { background: linear-gradient(160deg, rgba(15,15,15,.78) 0%, rgba(54,54,54,.72) 100%); }
.ph-sports .ph-overlay { background: linear-gradient(160deg, rgba(15,15,15,.78) 0%, rgba(32,32,32,.74) 100%); }
.ph-arts .ph-overlay { background: linear-gradient(160deg, rgba(15,15,15,.78) 0%, rgba(28,28,28,.70) 100%); }
.ph-alumni .ph-overlay { background: linear-gradient(160deg, rgba(15,15,15,.78) 0%, rgba(32,32,32,.74) 100%); }
.ph-admissions .ph-overlay { background: linear-gradient(160deg, rgba(15,15,15,.78) 0%, rgba(54,54,54,.72) 100%); }
.ph-contact .ph-overlay { background: linear-gradient(160deg, rgba(15,15,15,.82) 0%, rgba(18,18,18,.80) 100%); }
/* School photo grid */
.school-photo-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 1.5rem;
}
.school-photo-grid img {
width: 100%; aspect-ratio: 4/3; object-fit: cover;
border-radius: var(--rad-m); box-shadow: var(--shd-sm);
transition: transform .4s ease, box-shadow .4s ease;
}
.school-photo-grid img:hover { transform: scale(1.03); box-shadow: var(--shd-md); }
@media (max-width: 640px) { .school-photo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .school-photo-grid { grid-template-columns: 1fr; } }
/* Campus photo grid (library, dining, etc.) */
.campus-photo-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 1.25rem;
}
.campus-photo-grid img {
width: 100%; aspect-ratio: 4/3; object-fit: cover;
border-radius: var(--rad-m); box-shadow: var(--shd-sm);
transition: transform .4s ease, box-shadow .4s ease;
}
.campus-photo-grid img:hover { transform: scale(1.03); box-shadow: var(--shd-md); }
/* About-strip campus photo */
.as-campus-photo {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; border-radius: var(--rad-l);
}
/* ── Page body ───────────────────────────────────── */
.page-body { padding: 80px 0 64px; }
.page-body.tight { padding: 52px 0; }
/* ── Related pages ───────────────────────────────── */
.related-pages {
padding: 60px 0; background: var(--cream-d);
border-top: 1px solid rgba(11,31,66,.08);
}
.rp-title {
font-size: .75rem; color: var(--txt-lt); margin-bottom: 18px;
font-family: 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
}
.rp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rp-card {
display: flex; align-items: center; gap: 14px;
background: var(--white); border-radius: var(--rad-m); padding: 16px 20px;
border: 1px solid rgba(11,31,66,.08); box-shadow: var(--shd-xs);
transition: var(--tr); color: var(--txt-mid); font-size: .88rem;
}
.rp-card:hover {
box-shadow: 0 12px 36px rgba(11,31,66,.1);
transform: translateY(-3px); color: var(--g-deep);
border-color: rgba(255,207,1,.25);
}
.rp-icon { font-size: 1.5rem; flex-shrink: 0; }
.rp-name { font-weight: 600; color: var(--g-deep); font-size: .88rem; }
.rp-hint { font-size: .75rem; color: var(--txt-lt); }
/* ══════════════════════════════════════════════════
CONTENT COMPONENTS
══════════════════════════════════════════════════ */
/* ── Section blocks ──────────────────────────────── */
.sec-block { padding: 60px 0; }
.sec-cream { background: var(--cream); }
.sec-white { background: var(--white); }
.sec-dark { background: var(--g-dark); }
.sec-green { background: var(--g-deep); }
.sec-alt { background: #f0ede8; }
/* ── Info card ───────────────────────────────────── */
.info-card {
background: var(--white); border-radius: var(--rad-l); padding: 32px;
border: 1px solid rgba(11,31,66,.08); box-shadow: var(--shd-sm);
transition: var(--tr); position: relative; overflow: hidden;
}
.info-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--grad-gold); opacity: 0; transition: opacity .3s;
}
.info-card:hover { box-shadow: var(--shd-md); transform: translateY(-4px); border-color: rgba(255,207,1,.2); }
.info-card:hover::before { opacity: 1; }
.info-card.dark {
background: rgba(255,255,255,.055);
border-color: rgba(255,255,255,.1);
}
.info-card.dark:hover { background: rgba(255,255,255,.09); border-color: rgba(255,207,1,.28); }
/* ── Two-column layouts ──────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
.two-col.flip { grid-template-columns: 1.25fr 1fr; }
.two-col.equal { grid-template-columns: 1fr 1fr; }
/* ── Visual frame ────────────────────────────────── */
.visual-frame { position: relative; border-radius: var(--rad-l); overflow: hidden; box-shadow: var(--shd-xl); }
.visual-frame svg { display: block; width: 100%; }
.yr-badge {
position: absolute; bottom: 20px; right: 20px;
background: var(--gold); color: var(--g-dark); border-radius: 50%;
width: 78px; height: 78px; display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-family: 'Playfair Display', serif; box-shadow: 0 4px 18px rgba(255,207,1,.55);
}
.yr-badge span { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.yr-badge small { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
/* ── Tags ────────────────────────────────────────── */
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
/* ── Value grid ──────────────────────────────────── */
.values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }.v4 h4, .v4 h3{ font-size: .88rem; color: var(--g-deep); margin-bottom: 4px; }
.v4 p { font-size: .78rem; color: var(--txt-lt); margin: 0; line-height: 1.55; }
/* ── Timeline ────────────────────────────────────── */
.timeline { position: relative; max-width: 860px; margin: 0 auto; padding: 24px 0; }
@keyframes tlLinePulse {
0%, 100% { opacity: .55; }
50% { opacity: 1; }
}
/* Slide left cards from left, right cards from right */
.tl-item.ri { transform: translateX(-44px); }
.tl-item.right.ri { transform: translateX(44px); }
.tl-item.ri.vis { transform: none; }
.tl-item { display: flex; justify-content: flex-start; position: relative; margin-bottom: 36px; padding-right: calc(50% + 34px); }
.tl-item.right { justify-content: flex-end; padding-right: 0; padding-left: calc(50% + 34px); }
.tl-dot {
position: absolute; left: 50%; transform: translateX(-50%);
background: var(--gold); color: var(--g-dark);
font-size: .75rem; font-weight: 700; width: 46px; height: 46px;
border-radius: 50%; display: flex; align-items: center; justify-content: center;
border: 3px solid var(--cream); box-shadow: 0 0 0 4px rgba(11,31,66,.15), var(--shd-sm);
text-align: center; line-height: 1.1; z-index: 1;
animation: dotPulse 2.8s ease-in-out infinite;
}
@keyframes dotPulse {
0% { box-shadow: 0 0 0 0 rgba(255,207,1,.55), 0 0 0 4px rgba(11,31,66,.15); }
60% { box-shadow: 0 0 0 14px rgba(255,207,1,0), 0 0 0 4px rgba(11,31,66,.15); }
100% { box-shadow: 0 0 0 0 rgba(255,207,1,0), 0 0 0 4px rgba(11,31,66,.15); }
}
.tl-card {
background: var(--white); border: 1px solid rgba(11,31,66,.09);
border-radius: var(--rad-m); padding: 22px 26px; max-width: 360px;
box-shadow: var(--shd-sm); transition: var(--tr);
position: relative;
}
.tl-card::after {
content: ''; position: absolute; inset: 0; border-radius: var(--rad-m);
border: 1px solid rgba(255,207,1,0);
transition: border-color .32s ease, box-shadow .32s ease;
pointer-events: none;
}
.tl-card:hover { box-shadow: var(--shd-lg); transform: translateY(-6px) scale(1.015); border-color: transparent; }
.tl-card:hover::after { border-color: rgba(255,207,1,.45); box-shadow: 0 0 28px rgba(255,207,1,.12); }
.tl-yr { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 7px; }
.tl-card h3 { font-size: 1rem; color: var(--g-deep); margin-bottom: 8px; font-weight: 600; transition: color .22s; }
.tl-card:hover h3 { color: var(--g-mid); }
.tl-card p { font-size: .84rem; color: var(--txt-mid); line-height: 1.72; }
/* ── Founder bio ─────────────────────────────────── */
.founder-dates {
display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
border-radius: var(--rad-m); padding: 20px;
}
.founder-bio p { color: rgba(255,255,255,.72); margin-bottom: 14px; font-size: .94rem; line-height: 1.78; }
.asylum-item.hl { border-left-color: var(--gold); background: rgba(255,207,1,.1); }
/* ── Crest panel ─────────────────────────────────── */
.crest-circle svg { width: 200px; height: 200px; display: block; margin: 0 auto 22px; filter: drop-shadow(0 8px 24px rgba(0,0,0,.4)); }
.mp-label { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.mp-motto { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-style: italic; color: var(--white); margin-bottom: 10px; }
.mp-note { font-size: .8rem; color: rgba(255,255,255,.6); line-height: 1.6; }
/* ── Governing body ──────────────────────────────── */
.gov-president {
background: var(--grad-navy); border-radius: var(--rad-l); padding: 32px;
text-align: center; color: var(--white); box-shadow: var(--shd-md); margin-bottom: 24px;
}
.gov-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gov-panel { background: var(--white); border-radius: var(--rad-m); padding: 24px; border: 1px solid rgba(11,31,66,.09); box-shadow: var(--shd-sm); }.gov-panel h4, .gov-panel h3{ font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--cream-d); }
/* ── Principals table ────────────────────────────── */
.pc-current {
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
background: var(--grad-gold); border-radius: var(--rad-m); padding: 22px 28px; margin-bottom: 18px;
box-shadow: var(--shd-md);
}
.pt thead th { background: var(--g-deep); color: var(--white); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; padding: 12px 16px; text-align: left; font-weight: 600; position: sticky; top: 0; }
.pt tbody tr { border-bottom: 1px solid rgba(11,31,66,.06); transition: background .15s; }
.pt tbody tr:hover { background: rgba(11,31,66,.04); }
.pt tbody td { padding: 10px 16px; font-size: .85rem; color: var(--txt-mid); }
.pt tbody td:first-child { color: var(--gold); font-weight: 700; width: 36px; }
.pt .hi td { color: var(--g-deep) !important; font-weight: 600 !important; background: rgba(255,207,1,.06); }
/* ── Song card ───────────────────────────────────── */
.song-card {
background: var(--white); border-radius: var(--rad-xl); padding: 52px;
text-align: center; box-shadow: var(--shd-md); border: 1px solid rgba(11,31,66,.08);
position: relative; overflow: hidden;
}
.song-card::before { content: '♪'; position: absolute; top: -20px; right: 24px; font-size: 9rem; color: rgba(11,31,66,.04); line-height: 1; }
.song-icon { font-size: 2.8rem; color: var(--gold); margin-bottom: 20px; display: block; }
.song-opener { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-style: italic; color: var(--g-deep); margin-bottom: 18px; }
.song-body { font-size: .95rem; color: var(--txt-mid); max-width: 520px; margin: 0 auto 20px; line-height: 1.85; }
.song-close { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-style: italic; color: var(--g-deep); margin-bottom: 22px; }
.song-note { font-size: .78rem; color: var(--txt-lt); font-style: italic; }
/* ── Commemorations ──────────────────────────────── */
.comm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.comm-card h3 { font-size: 1.1rem; color: var(--g-deep); margin-bottom: 10px; }
.comm-card p { font-size: .875rem; color: var(--txt-mid); line-height: 1.72; }
/* ── Pastoral care ───────────────────────────────── */
.camp-card {
background: var(--white); border-radius: var(--rad-l); padding: 30px;
border: 1px solid rgba(11,31,66,.09); box-shadow: var(--shd-sm); transition: var(--tr);
}
.camp-card h3 { font-size: 1.25rem; color: var(--g-deep); margin-bottom: 12px; }.camp-card h4, .camp-card h3{ font-size: .95rem; color: var(--g-deep); margin: 16px 0 8px; }
.camp-card p { font-size: .88rem; color: var(--txt-mid); line-height: 1.72; margin-bottom: 12px; }
.hs-item {
flex: 1; min-width: 60px; background: var(--g-deep); color: var(--white);
border-radius: var(--rad-m); padding: 16px 8px; text-align: center;
}
.hs-item span { display: block; font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--gold); line-height: 1; }
.hs-label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: 5px; }
/* ── School blocks ───────────────────────────────── */
.school-block {
background: var(--white); border-radius: var(--rad-xl); overflow: hidden;
box-shadow: var(--shd-md); border: 1px solid rgba(11,31,66,.08); margin-bottom: 28px;
transition: var(--tr);
}
.school-block:hover { box-shadow: var(--shd-xl); }
.sb-header { display: flex; align-items: center; gap: 16px; padding: 22px 30px; flex-wrap: wrap; }
.sb-icon { font-size: 2rem; flex-shrink: 0; }
.sb-header h3 { font-size: 1.4rem; margin: 0; }
.sb-header span { font-size: .82rem; opacity: .8; display: block; }
.sb-fee { margin-left: auto; font-family: 'Playfair Display', serif; font-size: .92rem; font-weight: 700; white-space: nowrap; }
.sb-green { background: var(--grad-navy); color: var(--white); }
.sb-green .sb-fee { color: var(--gold-lt); }
.sb-gold { background: linear-gradient(135deg, #7a6000, var(--gold)); color: var(--white); }
.sb-gold .sb-fee { color: var(--gold-pale); }
.sb-navy { background: linear-gradient(135deg, #0d1a3a, #1a2e6a); color: var(--white); }
.sb-navy .sb-fee { color: var(--gold-lt); }
.sb-teal { background: linear-gradient(135deg, #0a2a28, #1a4e4a); color: var(--white); }
.sb-body { padding: 28px 30px; }
.sb-two { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; }
.sb-body p { font-size: .88rem; color: var(--txt-mid); margin-bottom: 14px; line-height: 1.72; }.sb-body h4, .sb-body h3{ font-size: .9rem; color: var(--g-deep); margin: 16px 0 10px; font-weight: 600; }
.subj-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.prog-list li { font-size: .84rem; color: var(--txt-mid); padding: 5px 0 5px 16px; position: relative; border-bottom: 1px solid var(--cream-d); }
.prog-list li::before { content: '›'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
/* ── Houses ──────────────────────────────────────── */
.houses-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
.h4-card {
background: var(--white); border-radius: var(--rad-l); padding: 28px 20px;
text-align: center; border: 1px solid rgba(11,31,66,.09); box-shadow: var(--shd-sm);
transition: var(--tr); position: relative; overflow: hidden;
}
.h4-card:hover { box-shadow: var(--shd-lg); transform: translateY(-8px); }
.h4-bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.h4-wright .h4-bar { background: #1252a0; }
.h4-wightwick .h4-bar { background: linear-gradient(to right,#b51c1c 50%,#1a1a1a 50%); }
.h4-walker .h4-bar { background: linear-gradient(to right,#1a6b3c 50%,#f0f0f0 50%); }
.h4-peake .h4-bar { background: linear-gradient(to right,#d4a800 50%,#1a6b3c 50%); }
.h4-letter { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: var(--gold); margin-bottom: 10px; }
.h4-card h3 { font-size: 1.05rem; color: var(--g-deep); margin-bottom: 10px; }
.h4-colours { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 9px; }
.h4-colours span:not(.cl) { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }
.h4-motto { font-style: italic; font-size: .86rem; color: var(--gold); font-family: 'Playfair Display', serif; margin-bottom: 10px; font-weight: 600; }
.h4-card p { font-size: .8rem; color: var(--txt-lt); line-height: 1.6; }
/* ── Sports ──────────────────────────────────────── */
.ms-card {
background: var(--white); border-radius: var(--rad-l); padding: 24px 16px;
text-align: center; border: 1px solid rgba(11,31,66,.09); box-shadow: var(--shd-sm); transition: var(--tr);
}
.ms-card:hover { box-shadow: var(--shd-lg); transform: translateY(-6px); border-color: rgba(255,207,1,.3); }
.ms-emoji { font-size: 2.6rem; margin-bottom: 10px; display: block; }
.ms-card h3 { font-size: 1.05rem; color: var(--g-deep); margin-bottom: 6px; }
.ms-mic { font-size: .75rem; color: var(--gold); font-weight: 600; padding: 3px 10px; background: rgba(255,207,1,.1); border-radius: var(--rad-pill); display: inline-block; margin-bottom: 9px; }
.ms-card p { font-size: .79rem; color: var(--txt-lt); line-height: 1.6; }
.minor-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-bottom: 14px; }
.mi-card span { font-size: .75rem; color: var(--txt-mid); font-weight: 500; display: block; }
.sf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sf-card {
background: var(--cream); border-radius: var(--rad-m); padding: 22px;
border: 1px solid rgba(11,31,66,.09); box-shadow: var(--shd-xs); transition: var(--tr);
}
.sf-card:hover { box-shadow: var(--shd-md); transform: translateY(-4px); }
.sf-icon { font-size: 2rem; margin-bottom: 9px; display: block; }.sf-card h4, .sf-card h3{ font-size: .92rem; color: var(--g-deep); margin-bottom: 7px; }
.sf-card p { font-size: .8rem; color: var(--txt-lt); line-height: 1.6; }.trophy-card h4, .trophy-card h3{ font-size: .88rem; color: var(--g-deep); margin-bottom: 6px; }
.trophy-card p { font-size: .78rem; color: var(--txt-lt); line-height: 1.55; }
/* ── Arts ────────────────────────────────────────── */
.art-card {
background: var(--white); border-radius: var(--rad-l); padding: 30px;
border: 1px solid rgba(11,31,66,.09); box-shadow: var(--shd-sm); transition: var(--tr);
}
.art-card:hover { box-shadow: var(--shd-md); transform: translateY(-4px); }
.art-card h3 { font-size: 1.15rem; color: var(--g-deep); margin-bottom: 16px; }
.art-sub { margin-bottom: 18px; }.art-sub h4, .art-sub h3{ font-size: .88rem; font-weight: 600; color: var(--g-mid); margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }.art-sub h4::before, .art-sub h3::before{ content: ''; width: 3px; height: 14px; background: var(--gold); border-radius: 2px; display: inline-block; }
.art-sub p { font-size: .84rem; color: var(--txt-mid); line-height: 1.72; }
.soc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.soc-card {
background: var(--cream); border-radius: var(--rad-m); padding: 18px;
text-align: center; border: 1px solid rgba(11,31,66,.09); transition: var(--tr);
}
.soc-card:hover { background: var(--g-deep); color: var(--white); transform: translateY(-4px); box-shadow: var(--shd-md); }
.soc-card:hover .soc-name { color: var(--white); }
.soc-card:hover .soc-desc { color: rgba(255,255,255,.7); }
.soc-em { font-size: 1.8rem; margin-bottom: 8px; display: block; }
.soc-name { font-size: .88rem; font-weight: 600; color: var(--g-deep); margin-bottom: 4px; transition: var(--tr); }
.soc-desc { font-size: .75rem; color: var(--txt-lt); transition: var(--tr); }
.tour-item {
display: flex; gap: 16px; padding: 16px 18px; background: var(--cream);
border-radius: var(--rad-m); border-left: 3px solid rgba(11,31,66,.25);
margin-bottom: 12px; transition: var(--tr);
}
.tour-item:hover { background: var(--white); border-left-color: var(--gold); box-shadow: var(--shd-sm); transform: translateX(4px); }
.tour-item.hi { border-left-color: var(--gold); background: rgba(255,207,1,.06); }
.tour-item strong { color: var(--g-deep); display: block; margin-bottom: 3px; font-size: .88rem; }
.tour-item p { font-size: .82rem; color: var(--txt-mid); line-height: 1.6; margin: 0; }
/* ── Alumni ──────────────────────────────────────── */
.al-card strong { display: block; font-family: 'Playfair Display', serif; font-size: .85rem; color: var(--g-deep); margin-bottom: 3px; font-weight: 600; }
.al-card span { font-size: .75rem; color: var(--txt-lt); line-height: 1.5; }
/* ── Admissions ──────────────────────────────────── */
.adm-grid { display: grid; grid-template-columns: 1.2fr 1fr .85fr; gap: 22px; margin-bottom: 36px; }
.adm-box {
background: var(--white); border-radius: var(--rad-l); padding: 28px;
border: 1px solid rgba(11,31,66,.09); box-shadow: var(--shd-sm);
}
.adm-box h3 { font-size: 1.1rem; color: var(--g-deep); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--cream-d); }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }.ps-step h4, .ps-step h3{ font-size: .88rem; color: var(--g-deep); margin-bottom: 3px; }
.ps-step p { font-size: .79rem; color: var(--txt-mid); line-height: 1.55; margin: 0; }
.fee-note { font-size: .76rem; color: var(--txt-lt); font-style: italic; padding: 7px 10px; background: var(--cream); border-radius: 5px; margin-bottom: 12px; border-left: 3px solid var(--g-light); }
.fee-tbl { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: .82rem; border-radius: var(--rad-m); overflow: hidden; }
.fee-tbl thead th { background: var(--g-deep); color: var(--white); padding: 10px 11px; text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fee-tbl tbody tr:nth-child(even) { background: rgba(11,31,66,.03); }
.fee-tbl tbody td { padding: 9px 11px; color: var(--txt-mid); border-bottom: 1px solid var(--cream-d); }
.fee-tbl tbody td:last-child { font-weight: 700; color: var(--g-deep); }
.init-ch strong { display: block; color: var(--g-deep); margin-bottom: 4px; }
.elig-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.elig-tbl thead th { background: var(--g-deep); color: var(--white); padding: 9px 11px; text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.elig-tbl tbody tr:nth-child(even) { background: rgba(11,31,66,.03); }
.elig-tbl tbody td { padding: 8px 11px; color: var(--txt-mid); border-bottom: 1px solid var(--cream-d); }
/* ── FAQ ─────────────────────────────────────────── */
.faq-wrap { border-radius: var(--rad-l); overflow: hidden; border: 1px solid rgba(11,31,66,.1); box-shadow: var(--shd-sm); }
.faq-item { border-bottom: 1px solid rgba(11,31,66,.08); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
width: 100%; text-align: left; background: var(--white); padding: 16px 20px;
font-size: .9rem; font-weight: 600; color: var(--g-deep); border: none; cursor: pointer;
transition: var(--tr); display: flex; justify-content: space-between; align-items: center;
font-family: 'Inter', sans-serif; gap: 16px;
}
.faq-q:hover { background: var(--cream); }
.faq-q.open { background: var(--g-deep); color: var(--white); border-color: transparent; }
.faq-q::after { content: '+'; font-size: 1.2rem; color: var(--gold); flex-shrink: 0; transition: transform .25s, color .2s; font-family: 'Inter', sans-serif; font-weight: 300; line-height: 1; }
.faq-q.open::after { content: '−'; color: var(--gold-lt); }
.faq-panel {
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height .35s ease, opacity .3s ease;
background: var(--cream);
}
.faq-panel p { padding: 16px 20px; font-size: .88rem; color: var(--txt-mid); line-height: 1.78; margin: 0; }
/* ── Contact ─────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 44px; align-items: start; }
.cd-card.wide { grid-column: 1 / -1; background: var(--g-deep); color: var(--white); }.cd-card.wide h4, .cd-card.wide h3{ color: var(--gold); }
.cd-card.wide p { color: rgba(255,255,255,.8); }.cd-card h4, .cd-card h3{ font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.cd-card p { font-size: .86rem; color: var(--txt-mid); line-height: 1.72; }
.map-box { background: var(--cream); border-radius: var(--rad-l); overflow: hidden; box-shadow: var(--shd-md); border: 1px solid rgba(11,31,66,.12); }
.map-box svg { width: 100%; height: auto; display: block; }
.map-cap { text-align: center; padding: 11px; font-size: .78rem; color: var(--txt-lt); font-style: italic; background: var(--white); }
/* ── Footer ──────────────────────────────────────── */
.footer {
background: var(--g-dark); color: var(--white);
position: relative;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
/* Mirror of .page-hero::after — fades page background into footer dark */
.footer::before {
content: ''; position: absolute;
top: -100px; left: 0; right: 0; height: 100px;
background: linear-gradient(to bottom, transparent, var(--g-dark));
pointer-events: none; z-index: 10;
}
.footer-top { padding: 72px 0 48px; }
/* Eight link columns flow into a 5-track grid, so four of them land in a
second row directly beneath another category — Alumni under Overview,
and so on. The row gap was the same order as the gap between links, so
the two groups read as one list. Row gap widened and each heading in a
wrapped row gets a hairline above it (issues 18, 19). */
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 52px 40px; }
.footer-grid .fg-col:nth-child(n+6) h3 {
padding-top: 20px; border-top: 1px solid rgba(255,255,255,.09);
}
.fg-brand { grid-row: 1 / 3; }
.fb-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; color: var(--white); }
.fb-logo-img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.fbl-name { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; display: block; }
/* .625rem rendered at 10px. 12px is the floor the rest of the site keeps. */
.fbl-place { font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); display: block; }
.ft-tagline { font-size: .82rem; color: rgba(255,255,255,.72); font-style: italic; line-height: 1.65; margin-bottom: 18px; }
.ft-social { display: flex; gap: 8px; }
.fts { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); transition: var(--tr); }
.fts:hover { background: var(--gold); border-color: transparent; color: var(--g-dark); transform: translateY(-2px); }
.fg-col h3, .fg-col h4 {
font-size: .65rem; text-transform: uppercase; letter-spacing: .2em;
color: rgba(255,255,255,.7); margin-bottom: 18px; font-family: 'Inter', sans-serif;
font-weight: 600; padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.fg-col ul { display: flex; flex-direction: column; gap: 10px; }
/* ── Two sections sharing one footer cell ─────────────────────────────
The footer is a 5-column grid with nine children, so it lays out as two
exact rows — and a grid row is always as tall as its tallest member, which
here is the brand block in row 1. Sports carries only six links, so it left
a tall column of dead space beneath it, directly above Admissions.
Stacking the two-link Office section into the same cell fills that space
without adding a row. The gap below matches the grid's own 52px row gap so
the two headings sit at the same rhythm as every other column. */
.fg-stack { display: flex; flex-direction: column; gap: 34px; }
@media (max-width: 768px) { .fg-stack { gap: 24px; } }
.fg-col li, .fg-col a { font-size: .81rem; color: rgba(255,255,255,.75); transition: color .2s; }
.fg-col a:hover { color: rgba(255,255,255,.85); padding-left: 4px; }
.ft-contact li { line-height: 1.75; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.06); padding: 20px 0; background: rgba(0,0,0,.2); }
.fbot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.fbot p { font-size: var(--fs-xs); /* was 11.8px (issue 11) */ color: rgba(255,255,255,.75); }
.fbot-motto { font-style: italic; color: rgba(255,207,1,.88) !important; }
/* Legal row — privacy, accessibility, contact, sitemap */
.fbot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; width: 100%; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
/* Was 11.52px at 50% white — under the 12px floor, 4.4:1, and only 20px
tall, so it also missed the 24px target minimum. Padding buys the height
without moving anything: the row is a flex line with its own gap. */
.fbot-legal a { font-size: .75rem; color: rgba(255,255,255,.72); text-decoration: none;
letter-spacing: .04em; transition: color .2s ease;
display: inline-flex; align-items: center; min-height: 24px; padding: 2px 0; }
.fbot-legal a:hover, .fbot-legal a:focus-visible { color: rgba(255,207,1,.95); text-decoration: underline; text-underline-offset: 3px; }
.cookie-link { color: rgba(255,207,1,.92); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cookie-link:hover, .cookie-link:focus-visible { color: #fff; }
@media (max-width: 560px) { .fbot-legal { gap: 6px 14px; } }
.fbot-gift {
width: 100%; display: flex; align-items: center; justify-content: center;
gap: 10px; margin-top: 14px; padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.06);
}
.fbot-gift-label {
/* .7rem rendered at 11.2px; .58 alpha was 4.0:1. */
font-size: .75rem; color: rgba(255,255,255,.72); letter-spacing: .08em; text-transform: uppercase;
}
.fbot-gift-logo {
width: 36px; height: 36px; object-fit: contain; border-radius: 50%;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
transition: transform .3s ease, filter .3s ease;
}
.fbot-gift-link {
display: inline-flex; align-items: center; gap: 8px;
text-decoration: none;
}
.fbot-gift-link:hover .fbot-gift-logo {
transform: rotate(10deg) scale(1.1);
filter: drop-shadow(0 4px 10px rgba(255,207,1,.45));
}
/* The credit now carries a second line, so the name and its note stack
beside the mark rather than running on in one row. */
.fbot-gift-text { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.fbot-gift-note {
font-size: var(--fs-xs); color: rgba(255,255,255,.5);
letter-spacing: .02em; font-style: italic; line-height: 1.4;
}
.fbot-gift-link:hover .fbot-gift-note { color: rgba(255,255,255,.7); }
@media (max-width: 520px) {
.fbot-gift { flex-direction: column; gap: 8px; text-align: center; }
.fbot-gift-text { align-items: center; text-align: center; }
}
.fbot-gift-name {
font-size: .78rem; font-weight: 700; color: rgba(255,207,1,.92);
letter-spacing: .04em; transition: color .3s;
}
.fbot-gift-link:hover .fbot-gift-name { color: rgba(255,207,1,1); }
/* ── Back to top ─────────────────────────────────── */
.btt {
position: fixed; bottom: 28px; right: 28px;
width: 46px; height: 46px; border-radius: 50%;
background: var(--g-deep); color: var(--white); border: 1px solid rgba(255,255,255,.12); cursor: pointer;
font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
box-shadow: var(--shd-md);
/* opacity alone left this button clickable and keyboard-focusable in
the corner of every page before the scroll trigger fired — a real
hit-target and tab-order bug, not just visual noise (issue 24). */
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(14px); transition: opacity .3s, transform .3s, visibility 0s .3s;
z-index: 999;
}
.btt.vis { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.btt:hover { transform: translateY(-3px); background: var(--g-mid); box-shadow: var(--shd-lg); }
/* ══════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.minor-grid { grid-template-columns: repeat(4,1fr); }
.houses-grid { grid-template-columns: repeat(2,1fr); }
.footer-grid { grid-template-columns: 1fr 1fr 1fr; }
.fg-brand { grid-row: auto; }
}
@media (max-width: 960px) {
.two-col, .two-col.flip, .two-col.equal { grid-template-columns: 1fr; }
.sb-two { grid-template-columns: 1fr; }
.gov-2col { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.tl-item, .tl-item.right { padding-left: 56px; padding-right: 0; justify-content: flex-start; }
.tl-dot { left: 20px; }
.tl-card { max-width: 100%; }
.sf-grid { grid-template-columns: 1fr 1fr; }
}
/* The nav bar needs ~1294px to seat nine menus, the logo and the tools.
Below that the hamburger takes over — so this breakpoint tracks what the
bar actually measures, not an arbitrary phone width. */
@media (max-width: 1340px) {
.nav-toggle { display: flex; }
.nav-menu {
position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
background: rgba(11,29,19,.98);
backdrop-filter: blur(20px);
flex-direction: column; padding: 14px; gap: 3px;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: var(--tr); border-top: 1px solid rgba(255,255,255,.08);
box-shadow: 0 12px 36px rgba(0,0,0,.5);
max-height: calc(100svh - 68px); overflow-y: auto;
}
.nav-menu.open { opacity: 1; visibility: visible; transform: none; }
.dd-trigger { width: 100%; justify-content: space-between; padding: 12px 16px; }
.nm-link { width: 100%; display: block; padding: 11px 16px; }
.nm-cta { text-align: center; margin-left: 0; }
.dropdown {
position: static; box-shadow: none; border: none;
background: rgba(255,255,255,.05); border-radius: var(--rad-s);
padding: 4px 8px; opacity: 1; visibility: visible; transform: none;
pointer-events: auto; display: none; margin-top: 4px;
backdrop-filter: none;
max-height: 55vh; overflow-y: auto;
}
.has-dd.dd-open .dropdown { display: block; }
}
@media (max-width: 768px) {
.sports-grid { grid-template-columns: 1fr 1fr; }
.hero-counters { display: grid; grid-template-columns: 1fr 1fr; }
.hc-item + .hc-item::before { display: none; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
.fbot { flex-direction: column; text-align: center; }
.hero-btns { flex-direction: column; align-items: center; }
.btn { width: 200px; justify-content: center; }
}
@media (max-width: 480px) {
.houses-grid { grid-template-columns: 1fr; }
.minor-grid { grid-template-columns: repeat(3,1fr); }
.footer-grid { grid-template-columns: 1fr; }
.adm-grid { grid-template-columns: 1fr; }
.soc-grid { grid-template-columns: 1fr 1fr; }
}
/* ══════════════════════════════════════════════════
ADDITIONS — multipage site components
══════════════════════════════════════════════════ */
/* ── Base utilities ──────────────────────────────── */
.section { padding: 96px 0; }
@media (max-width: 768px) { .section { padding: 72px 0; } }
.center { text-align: center; }
.btn-primary {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 30px; border-radius: var(--rad-pill);
background: var(--gold); color: var(--g-dark);
font-weight: 700; font-size: .9rem; letter-spacing: .01em;
cursor: pointer; transition: var(--tr); border: none;
text-decoration: none; box-shadow: var(--shd-xs);
position: relative;
}
.btn-primary:hover { background: var(--gold-lt); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(212,169,1,.32); }
.btn-outline {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 13px 28px; border-radius: var(--rad-pill);
background: transparent; color: var(--g-deep);
font-weight: 600; font-size: .9rem; letter-spacing: .01em;
cursor: pointer; transition: var(--tr); border: 1px solid rgba(11,31,66,.4);
text-decoration: none;
}
.btn-outline:hover { background: var(--g-deep); border-color: var(--g-deep); color: var(--white); transform: translateY(-1px); box-shadow: var(--shd-md); }
/* ── Section heads ───────────────────────────────── */
.sec-head { margin-bottom: 52px; }
.sec-head.center { text-align: center; }
.sec-head.center .sec-sub { margin: 0 auto; }
.sec-head.center .sec-eye { justify-content: center; }
.sec-eye {
display: inline-flex; align-items: center; gap: 12px;
font-size: var(--fs-xs); font-weight: 600; /* was 11.2px (issue 7) */
letter-spacing: .18em; text-transform: uppercase;
color: var(--accent); margin-bottom: 16px;
}
.sec-eye::before, .sec-eye::after {
content: ''; display: block; height: 1px; width: 22px;
background: var(--gold-dk); opacity: .5; flex-shrink: 0;
}
.sec-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); color: var(--g-deep); margin-bottom: 14px; line-height: 1.12; letter-spacing: -.02em; }
.sec-head h2 em { font-style: italic; color: var(--g-mid); }
.sec-sub { font-size: .98rem; color: var(--txt-mid); max-width: 600px; line-height: 1.9; }
/* ── Inner page layout ───────────────────────────── */
.inner-layout {
display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(40px, 5vw, 88px); align-items: start;
}
.inner-main { min-width: 0; }
/* ── Justified body text ─────────────────────────────────────
Applies to standard readable prose (unclassed ) in the main
content areas. Classed paragraphs (names, captions, labels,
timeline years, etc.), headings, nav, buttons and cards keep
their own alignment. hyphens:auto avoids large word-gaps. */
/* ══════════════ Site-wide justification ══════════════
Justification is set on
and reaches everything by inheritance,
rather than being declared on p/li/dd directly.
That distinction is the whole design. A *declared* value beats an
*inherited* one at any specificity, so an element-level rule silently
un-centres every element whose alignment came from a centred ancestor —
measured at 130 of them across the site, including the preloader wordmark,
the 404 page, the college song verses and every centred card. Setting it on
instead means a centred container simply re-declares centre on
itself and its subtree follows, because the nearer ancestor wins. New
centred components keep working with no exclusion list to maintain.
/ are pulled back out: a table cell holds data, not sentences.
Words are never broken. `hyphens: manual` means the browser will only
hyphenate where the copy itself contains a soft hyphen () — it will
never invent a break inside a word. The cost is measured and real: the
narrow columns pay for it in wider word-spaces, since justification has
nothing but the spaces left to work with. */
body {
text-align: justify;
-webkit-hyphens: manual;
hyphens: manual;
}
/* Headings are set, not justified — 376 of the site's 798 headings wrap to two
or more lines, so leaving them to inherit would justify nearly half of them. */
h1, h2, h3, h4, h5, h6 {
text-align: start;
-webkit-hyphens: manual;
hyphens: manual;
}
/* …except inside the containers that centre their contents, where the reset
above would otherwise drag the heading back to the left. Every one of these
was found by walking the rendered DOM, not guessed. */
:is(.sc-verse, .fi-card, .op-card, .fcc-head, .arc-empty, .error-inner,
.sec-hdr, .sec-head, .pl-text, .pl-inner, .gmap-error, .mag-coming,
.hp-card, .soc-card, .fac-card, .ab-body, .pg-hl-card, .ms-card,
.fb-embed-loading, .sf-follow, .no-tenders)
:is(h1, h2, h3, h4, h5, h6, p, li, dd, figcaption, blockquote) {
text-align: center;
}
/* Tabular data. */
th, td { text-align: start; -webkit-hyphens: manual; hyphens: manual; }
/* Labels are not prose. Names, roles, dates and meta lines sit in 150–260px
columns; measured with justification applied, .nac-role opened a 76px
word-space and .pg-hl-sub a 49px one. They wrap onto two lines, but they are
captions rather than sentences and they read better ragged. */
.nac-name, .nac-role, .na-other-name, .na-other-role, .ab-name, .ab-rank,
.pg-hl-title, .pg-hl-sub, .sf-li-meta, .sf-li-note, .cal-exam-full,
.pv-jl-note, .hb-np-year, .hb-np-house, .fcc-school, .fcc-grades,
.sec-eye, .sec-label, .error-code, .pl-name, .pl-place, .pl-motto, .pl-hint,
.obit-role, .obit-text, .fp-note, .arc-note, .prl-period, .hb-house-feat {
text-align: start;
-webkit-hyphens: manual;
hyphens: manual;
}
.inner-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; }
.content-section { margin-bottom: 52px; }
.content-section h2 {
font-size: clamp(1.35rem, 2.2vw, 1.9rem); color: var(--g-deep);
margin-bottom: 20px; padding-bottom: 14px;
border-bottom: 1px solid var(--cream-d);
position: relative;
}
/* Gold accent under content-section headings */
.content-section h2::after {
content: ''; position: absolute; bottom: -1px; left: 0;
width: 56px; height: 2px; background: var(--grad-gold);
}
.content-section h3 {
font-size: 1.1rem; color: var(--g-deep); margin: 24px 0 10px;
}
.content-section p { color: var(--txt-mid); line-height: 1.88; margin-bottom: 16px; font-size: .95rem; }
.content-section p:last-child { margin-bottom: 0; }
.content-section a { color: var(--g-deep); text-decoration: underline; text-decoration-color: rgba(11,31,66,.25); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.content-section a:hover { color: var(--accent); text-decoration-color: var(--accent); }
/* ── Sidebar cards ───────────────────────────────── */
.sb-card {
background: var(--white); border-radius: var(--rad-l); padding: 24px;
border: 1px solid var(--cream-d); box-shadow: var(--shd-sm);
overflow: hidden;
}
/* Gold top bar on each sidebar card */
.sb-card::before {
content: ''; display: block; height: 3px; width: 100%;
background: var(--grad-gold); margin: -24px -24px 20px;
width: calc(100% + 48px);
}
.sb-card h3 {
font-size: .75rem; font-weight: 700; color: var(--accent);
letter-spacing: .18em; text-transform: uppercase;
margin-bottom: 16px; font-family: 'Inter', sans-serif;
}
.sb-list { display: flex; flex-direction: column; gap: 10px; }
.sb-list li { font-size: .84rem; color: var(--txt-mid); line-height: 1.55; display: flex; gap: 8px; align-items: baseline; }
.sb-list li::before { content: '—'; color: var(--gold); font-size: .75rem; flex-shrink: 0; }
.sb-list strong { color: var(--g-deep); font-weight: 600; white-space: nowrap; }
.sb-nav-list { display: flex; flex-direction: column; gap: 2px; }
.sb-nav-list a {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; font-size: .84rem; color: var(--txt-mid);
border-radius: 7px; transition: var(--tr);
}
.sb-nav-list a::before { content: '›'; color: var(--cream-d); transition: color .2s; font-size: 1rem; }
.sb-nav-list a:hover { background: var(--cream); color: var(--g-deep); padding-left: 14px; }
.sb-nav-list a:hover::before { color: var(--gold); }
.sb-nav-list a.current-page { background: var(--g-deep); color: var(--gold-lt) !important; padding-left: 14px; font-weight: 500; }
.sb-nav-list a.current-page::before { color: var(--gold-lt); }
/* ── Related pages (new multipage version) ───────── */
.rp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rp-card {
display: flex; flex-direction: column; gap: 4px;
background: var(--white); border-radius: var(--rad-m); padding: 16px 18px;
border: 1px solid rgba(11,31,66,.09); box-shadow: var(--shd-xs);
transition: var(--tr); color: var(--txt-mid); text-decoration: none;
}
.rp-card:hover { box-shadow: var(--shd-md); transform: translateY(-3px); border-color: rgba(255,207,1,.3); }
.rpc-label { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-lt); }
.rpc-title { font-size: .9rem; font-weight: 600; color: var(--g-deep); }
.rp-card:hover .rpc-title { color: var(--gold); }
.rp-highlight { background: var(--g-deep) !important; border-color: transparent !important; }
.rp-highlight .rpc-label { color: rgba(255,255,255,.5) !important; }
.rp-highlight .rpc-title { color: var(--gold-lt) !important; }
.rp-highlight:hover { background: #0d2e1a !important; }
/* ── Styled list ─────────────────────────────────── */
.styled-list { padding-left: 0; display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.styled-list li {
font-size: .9rem; color: var(--txt-mid); padding: 9px 0 9px 22px;
position: relative; border-bottom: 1px solid rgba(238,233,223,.7); line-height: 1.65;
}
.styled-list li:last-child { border-bottom: none; }
.styled-list li::before {
content: ''; position: absolute; left: 0; top: 17px;
width: 10px; height: 1.5px; background: var(--grad-gold);
}
.styled-list strong { color: var(--g-deep); font-weight: 600; }
/* ── Pull quote ──────────────────────────────────── */
.pull-quote {
font-family: 'Playfair Display', serif; font-size: clamp(1.2rem, 2.5vw, 1.7rem);
font-style: italic; color: var(--g-deep); text-align: left; line-height: 1.65;
border-left: 3px solid var(--gold); padding: 18px 28px; margin: 32px 0;
background: linear-gradient(to right, rgba(255,207,1,.05), transparent);
border-radius: 0 var(--rad-m) var(--rad-m) 0;
position: relative;
}
.pull-quote::before {
content: '\201C'; position: absolute; top: -10px; left: 20px;
font-size: 4rem; color: var(--gold); opacity: .3; line-height: 1;
font-family: Georgia, serif;
}
.content-quote {
border-left: 4px solid var(--gold); padding: 20px 28px; margin: 28px 0;
background: rgba(11,31,66,.04); border-radius: 0 var(--rad-m) var(--rad-m) 0;
}
.content-quote p { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-style: italic; color: var(--g-deep); margin-bottom: 8px; }
.content-quote cite { font-size: .82rem; color: var(--txt-lt); font-style: normal; }
/* ── Mission Statement — Code of Honour list ─────── */
.ms-code-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.ms-code-list li { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; background: rgba(11,31,66,.04); border-left: 4px solid var(--gold); border-radius: 0 var(--rad-m) var(--rad-m) 0; transition: background .2s; }
.ms-code-list li:hover { background: rgba(11,31,66,.08); }
.ms-code-num { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: var(--gold-ink); min-width: 32px; line-height: 1.4; }
.ms-code-text { font-size: .97rem; color: var(--txt-main); line-height: 1.6; font-weight: 500; }
/* ── Faculty Table ───────────────────────────────── */
.faculty-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .88rem; }
.faculty-table thead th { background: var(--navy-deep,#04101f); color: var(--gold); font-weight: 700; text-align: left; padding: 10px 14px; letter-spacing: .05em; text-transform: uppercase; font-size: .78rem; }
.faculty-table tbody tr { border-bottom: 1px solid rgba(11,31,66,.1); }
.faculty-table tbody tr:hover { background: rgba(11,31,66,.04); }
.faculty-table tbody td { padding: 9px 14px; color: var(--txt-main); vertical-align: top; line-height: 1.5; }
.faculty-table tbody td:first-child { font-weight: 600; color: var(--g-deep); }
.faculty-table .dept-row td { background: rgba(180,145,50,.08); font-weight: 700; color: var(--gold); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; }
@media(max-width:600px){ .faculty-table { font-size: .8rem; } .faculty-table tbody td { padding: 7px 10px; } }
/* ── Info cards grid ─────────────────────────────── */
.info-cards-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 28px 0; }
.info-card.glass-light { padding: 24px; border-radius: var(--rad-m); text-align: center; }
.ic-num { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; line-height: 1.1; margin-bottom: 4px; }
.ic-label { font-size: .78rem; color: var(--txt-lt); font-weight: 500; letter-spacing: .05em; }
.ic-icon { font-size: 1.8rem; margin-bottom: 8px; display: block; }
/* ── Hero section (home page v2) ─────────────────── */
.hero-logo {
display: block; width: clamp(120px, 16vw, 200px); height: auto;
filter: drop-shadow(0 6px 28px rgba(0,0,0,.5));
}
.hero-eyebrow {
font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
color: rgba(255,255,255,.65); margin-bottom: 12px;
}
.hero-title {
font-size: clamp(2.9rem, 7.5vw, 5.6rem); font-weight: 700; line-height: 1.04;
letter-spacing: -.03em; color: var(--white); margin-bottom: 14px; text-align: center;
}
.hero-title em { font-style: italic; color: var(--gold); }
.hero-tagline {
font-family: 'Playfair Display', serif; font-size: clamp(1.15rem, 2.3vw, 1.7rem);
font-style: italic; color: rgba(255,255,255,.85); margin-bottom: 20px; text-align: center;
/* Two lines are reserved. The longest rotating phrase — "Where Character is
Forged, Compassion is Nurtured, and Leaders Rise." — wraps to two lines at
every width from a 1440px desktop down to a 320px phone, while the other
three always fit on one. Measured against the actual Playfair Display
italic subsets in /fonts, not estimated.
Without this the description, both CTA buttons and the counter strip drop
a line and spring back on every cycle of the typewriter — a shift far more
distracting than the animation it belongs to.
In em so it tracks the font-size clamp and both mobile overrides without
needing a separate reserved height at each breakpoint. */
line-height: 1.35;
min-height: 2.7em;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0 auto; width: 100%; }
.hero-scroll-hint {
position: absolute; bottom: 46px; /* was 26px — cramped against the ticker (issue 20) */ left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 7px;
color: rgba(255,255,255,.68); font-size: .75rem; letter-spacing: .18em;
text-transform: uppercase; z-index: 2; text-decoration: none; transition: color .25s;
}
.hero-scroll-hint:hover { color: rgba(255,255,255,.85); }
.hero-scroll-hint svg { animation: bounce 2s ease-in-out infinite; }
.hc-suffix { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: var(--gold); font-weight: 700; vertical-align: top; margin-top: 0; display: inline-block; line-height: 1; }
/* Compact the hero on typical laptop heights so the stat strip
stays above the fold (placed after the base hero rules so the
media-query values win at equal specificity) */
@media (max-height: 940px) {
.hero { padding: 90px 0 64px; }
.hero-crest { width: clamp(110px, 12vw, 150px); margin-bottom: 14px; }
.hero-title { font-size: clamp(2.5rem, 5.6vw, 4.2rem); }
.hero-tagline { font-size: clamp(1.05rem, 2vw, 1.4rem); margin-bottom: 14px; }
.hero-counters-wrap { margin-top: 38px; }
.hero-counters { padding-top: 20px; }
.hc-num, .hc-suffix { font-size: 1.9rem; }
}
@media (max-height: 800px) {
.hero { padding: 82px 0 48px; }
.hero-crest { width: 96px; margin-bottom: 12px; }
.hero-title { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.hero-counters-wrap { margin-top: 28px; }
.hc-item { padding: 6px 28px; }
.hc-label { font-size: .75rem; }
}
/* ── Quick nav grid (home) ───────────────────────── */
.qn-section { background: var(--cream); }
.qn-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.qn-card {
display: flex; flex-direction: column; gap: 10px;
background: var(--white); border-radius: var(--rad-l); padding: 28px;
border: 1px solid rgba(11,31,66,.09); box-shadow: var(--shd-sm);
transition: var(--tr); text-decoration: none; color: var(--txt);
position: relative; overflow: hidden;
min-height: 220px;
}
.qn-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--grad-gold); transform: scaleX(0); transform-origin: left;
transition: transform .3s ease;
}
.qn-card:hover { transform: translateY(-6px); box-shadow: var(--shd-lg); border-color: rgba(255,207,1,.3); }
.qn-card:hover::before { transform: scaleX(1); }
.qnc-icon { color: var(--g-deep); margin-bottom: 4px; }
.qn-card h3 { font-size: 1.15rem; color: var(--g-deep); margin-bottom: 4px; }
.qn-card p { font-size: .84rem; color: var(--txt-lt); line-height: 1.6; flex: 1; }
/* A hairline gold arrow on a large white card was the only signifier
that these are links. Given a filled chip so it carries weight, and it
fills in on hover (issue 25). */
.qnc-arrow {
align-self: flex-end; display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: var(--rad-pill);
font-size: 1rem; line-height: 1; color: var(--navy-ink);
background: rgba(255,207,1,.18); border: 1px solid rgba(197,164,88,.45);
transition: transform .25s, background .25s, color .25s, border-color .25s;
}
.qn-card:hover .qnc-arrow { transform: translateX(5px); background: var(--gold); border-color: var(--gold); color: #1a1206; }
/* QN accent colours */
.qn-overview .qnc-icon { color: #1a4a2e; }
.qn-campus .qnc-icon { color: #2e4a1a; }
.qn-schools .qnc-icon { color: #1a2e6a; }
.qn-sports .qnc-icon { color: #6a2e1a; }
.qn-arts .qnc-icon { color: #4a1a6a; }
.qn-alumni .qnc-icon { color: #1a3a6a; }
/* ── About strip (home) ──────────────────────────── */
.about-strip { background: var(--white); }
.about-strip-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: center; }
.as-img-frame {
position: relative; border-radius: var(--rad-l); overflow: hidden;
background: linear-gradient(135deg, var(--cream) 0%, var(--cream-d) 100%);
box-shadow: var(--shd-xl); aspect-ratio: 4/3;
display: flex; align-items: center; justify-content: center;
}
.as-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 32px; }
.as-logo-img { width: 100%; max-width: 220px; height: auto; object-fit: contain; filter: drop-shadow(0 6px 24px rgba(0,0,0,.18)); }
.as-content p { color: var(--txt-mid); line-height: 1.8; margin-bottom: 16px; font-size: .95rem; }
.as-content h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--g-deep); margin-bottom: 14px; }
.as-content h2 em { font-style: italic; color: var(--gold); }
.as-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 24px 0; }
.ast-item { text-align: center; padding: 14px 8px; background: var(--cream); border-radius: var(--rad-m); }
.ast-item strong { display: block; font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--g-deep); margin-bottom: 3px; }
.ast-item span { font-size: var(--fs-xs); /* was 11.5px (issue 9) */ color: var(--txt-lt); text-transform: uppercase; letter-spacing: .05em; }
/* ── Houses grid (home) ──────────────────────────── */
.houses-strip { background: var(--cream); }
.h4c-crest {
font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700;
color: var(--gold); margin-bottom: 10px; display: block;
}
.h4c-logo { width: 200px; height: 200px; object-fit: contain; display: block; margin: 0 auto 12px; border-radius: var(--rad-s); }
.h4c-color-tag { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-lt); margin-bottom: 8px; display: block; text-align: center; }
/* The motto writes in its house's text colour — one token, --h4-ink, set
per house below and re-set for dark mode, so the light and dark values
can never drift apart. */
.h4c-motto { font-family: 'Georgia', 'Times New Roman', serif; font-size: 1.7rem; font-style: italic; font-weight: 700; letter-spacing: .05em; text-align: center; margin-top: 12px; text-shadow: 0 1px 4px rgba(0,0,0,.18); color: var(--h4-ink, var(--gold)); }
.house-wightwick { border-top: 4px solid #b51c1c; } /* Red & Black */
.house-walker { border-top: 4px solid #1a6b3c; } /* Green & White */
.house-peake { border-top: 4px solid #d4a800; } /* Yellow & Green */
.house-wright { border-top: 4px solid #1252a0; } /* Blue */
/* The four house badges are links but carried no signifier, unlike the
cards above them. A small chevron, in the house ink, keeps the visual
language consistent without adding clutter (issue 27). */
.h4-card::after {
content: '\2192'; position: absolute; right: 14px; bottom: 12px; z-index: 1;
font-size: 1rem; line-height: 1; color: var(--h4-ink, var(--gold));
opacity: .45; transition: opacity .3s, transform .3s;
}
@media (hover: hover) { .h4-card:hover::after { opacity: 1; transform: translateX(4px); } }
.h4-card:focus-visible::after { opacity: 1; transform: translateX(4px); }
@media (forced-colors: active) { .h4-card::after { opacity: 1; } }
/* ── House badge hover: the house colour fades in ────────────────────
Each card carries its house colour as an RGB triple, so one gradient
serves all four. The wash is strongest at the top edge, where the
coloured border already sits, and has faded to nothing by three
quarters down — the crest ends up sitting in its own house colour
while the motto and body text stay on a clean background.
Only opacity is animated, so the whole effect is one composited
layer and costs nothing on scroll. */
/* --h4-rgb paints the wash; --h4-ink writes the text. For three houses
they are the same colour. Peake's yellow reaches only 1.9:1 as text on a
pale card, so its writing takes a deep gold that still reads as Peake
while clearing WCAG AA — the wash and the border stay bright yellow. */
.house-wightwick { --h4-rgb: 181, 28, 28; --h4-ink: #b51c1c; }
.house-walker { --h4-rgb: 26, 107, 60; --h4-ink: #1a6b3c; }
.house-peake { --h4-rgb: 212, 168, 0; --h4-ink: #7d6200; }
.house-wright { --h4-rgb: 18, 82, 160; --h4-ink: #1252a0; }
.h4-card::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
border-radius: inherit;
opacity: 0;
transition: opacity .45s cubic-bezier(.22, 1, .36, 1);
/* Eighty-five parts colour to fifteen parts white — and the colour part
is itself a fade, not a block. It starts deep behind the crest and
thins the whole way down, so by the 85% mark only a breath of house
colour is left and the last stretch is the plain card. Six stops
rather than three: with a linear ramp the eye picks out the straight
line, and a gradient that is meant to look like light needs to ease. */
background: linear-gradient(
to bottom,
rgba(var(--h4-rgb, 197,164,88), .88) 0%,
rgba(var(--h4-rgb, 197,164,88), .74) 15%,
rgba(var(--h4-rgb, 197,164,88), .52) 35%,
rgba(var(--h4-rgb, 197,164,88), .33) 55%,
rgba(var(--h4-rgb, 197,164,88), .19) 72%,
rgba(var(--h4-rgb, 197,164,88), .08) 85%,
rgba(var(--h4-rgb, 197,164,88), 0) 100%);
}
/* Keep the crest, heading, colour tag and motto above the wash. */
.h4-card > * { position: relative; z-index: 1; }
/* Hover on a pointer device, and focus for anyone using the keyboard. */
@media (hover: hover) {
.h4-card:hover::before { opacity: 1; }
}
.h4-card:focus-visible::before { opacity: 1; }
/* A touch screen has no hover, so on a phone or tablet the wash simply
stays on — otherwise the house colour never appears at all there and
the four badges read as identical white cards. Measured at full
strength: every heading, colour tag and motto sits at 71-80% down the
card where the gradient is only .12-.22 alpha, so the closest any of
the twenty-four text/house/theme combinations comes to the AA floor is
4.79:1 against a 4.5 requirement. Nothing needed softening. */
@media (hover: none) {
.h4-card::before { opacity: 1; }
}
/* The wash is light where the writing sits, so the text keeps its house
ink rather than inverting — the colour tag simply warms from grey to
its own house colour as the wash arrives. */
.h4c-color-tag { transition: color .45s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) {
.h4-card:hover .h4c-color-tag { color: var(--h4-ink, var(--gold)); }
}
.h4-card:focus-visible .h4c-color-tag { color: var(--h4-ink, var(--gold)); }
/* ...and on touch the tag carries its house ink from the start, to match */
@media (hover: none) {
.h4c-color-tag { color: var(--h4-ink, var(--gold)); }
}
/* On the dark card (#0d1a2e) the daylight house colours sink into the
background — Wightwick's red managed 2.6:1, Walker's green 2.7:1 and
Wright's blue 2.3:1, all below the 3:1 floor. Each house therefore
keeps a lighter twin for dark mode; the wash colour is unchanged. */
[data-theme="dark"] .house-wightwick { --h4-ink: #e85a5a; }
[data-theme="dark"] .house-walker { --h4-ink: #4fbf7f; }
[data-theme="dark"] .house-peake { --h4-ink: #e8c14a; }
[data-theme="dark"] .house-wright { --h4-ink: #5f9fe0; }
/* Dark theme keeps the same 85/15 shape and the same fade, lifted a little
because these colours have less room to show against a dark card. */
[data-theme="dark"] .h4-card::before {
background: linear-gradient(
to bottom,
rgba(var(--h4-rgb, 197,164,88), .92) 0%,
rgba(var(--h4-rgb, 197,164,88), .78) 15%,
rgba(var(--h4-rgb, 197,164,88), .56) 35%,
rgba(var(--h4-rgb, 197,164,88), .36) 55%,
rgba(var(--h4-rgb, 197,164,88), .21) 72%,
rgba(var(--h4-rgb, 197,164,88), .09) 85%,
rgba(var(--h4-rgb, 197,164,88), 0) 100%);
}
/* Someone who has asked for less motion still gets the colour, at once. */
@media (prefers-reduced-motion: reduce) {
.h4-card::before, .h4c-color-tag { transition: none; }
}
/* In forced-colours mode the wash would fight the user's own palette. */
@media (forced-colors: active) {
.h4-card::before { display: none; }
}
/* ── Highlights (home) ───────────────────────────── */
.highlights-section { background: var(--g-deep); }
.highlights-section .sec-head h2 { color: var(--white); }
.highlights-section .sec-head h2 em { color: var(--gold); }
.highlights-section .sec-eye { color: var(--gold-lt); }
.hl-card h3 { font-size: 1.15rem; color: var(--white); margin-bottom: 10px; }
.hl-card p { font-size: .86rem; color: rgba(255,255,255,.72); line-height: 1.72; margin-bottom: 14px; }
/* ── Alumni spotlight (home) ─────────────────────── */
.alumni-spotlight { background: var(--cream); }.al-card h4, .al-card h3{ font-size: 1.05rem; color: var(--g-deep); margin-bottom: 4px; }
.al-card p { font-size: .84rem; color: var(--txt-lt); line-height: 1.65; }
/* ── Admissions CTA (home) ───────────────────────── */
.adm-cta { background: var(--grad-navy); }
.adm-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.adm-cta-text h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--white); margin-bottom: 12px; }
.adm-cta-text h2 em { font-style: italic; color: var(--gold-lt); }
.adm-cta-text p { font-size: .96rem; color: rgba(255,255,255,.72); line-height: 1.78; max-width: 540px; }
.adm-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; flex-shrink: 0; }
/* ── Founder portrait ────────────────────────────── */
.founder-portrait { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 28px 0; }
.fp-frame { border-radius: var(--rad-l); padding: 16px; display: inline-flex; }
.fp-frame img { width: 240px; height: 300px; object-fit: cover; object-position: top center; border-radius: var(--rad-m); display: block; }
.fp-caption { text-align: center; max-width: 460px; }
.fp-caption em { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1rem; color: var(--navy-ink); line-height: 1.7; display: block; margin-bottom: 6px; }
.fp-caption span { font-size: .82rem; color: var(--txt-lt); }
/* ── History timeline (inner) ────────────────────── */
.timeline { position: relative; padding: 24px 0; }
.tl-item {
display: grid; grid-template-columns: 100px 1fr; gap: 24px;
margin-bottom: 32px; align-items: start;
}
.tl-year {
font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700;
color: var(--gold); text-align: right; padding-top: 2px; flex-shrink: 0;
transition: color .28s, text-shadow .28s;
}
.tl-item:hover .tl-year {
color: var(--gold-lt);
text-shadow: 0 0 18px rgba(255,207,1,.45);
}
.tl-body {
background: var(--white); border-radius: var(--rad-m); padding: 20px 24px;
border: 1px solid rgba(11,31,66,.09); box-shadow: var(--shd-xs);
border-left: 3px solid var(--gold); transition: var(--tr);
}
.tl-body:hover {
box-shadow: var(--shd-md), 0 0 24px rgba(255,207,1,.1);
transform: translateX(8px);
border-left-color: var(--gold-lt);
border-left-width: 4px;
}.tl-body h4, .tl-body h3{ font-size: 1rem; color: var(--g-deep); margin-bottom: 7px; transition: color .22s; }.tl-item:hover .tl-body h4, .tl-item:hover .tl-body h3{ color: var(--g-mid); }
.tl-body p { font-size: .88rem; color: var(--txt-mid); line-height: 1.72; margin: 0; }
/* ── Governing body org chart ────────────────────── */
.gov-org-chart { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 28px 0; }
.goc-box {
border-radius: var(--rad-m); padding: 14px 24px; text-align: center;
min-width: 160px;
}
.goc-top { background: var(--grad-navy) !important; color: var(--white); }
.goc-top .goc-title { color: var(--white); }
.goc-top .goc-sub { color: rgba(255,255,255,.7); }
.goc-title { font-weight: 700; font-size: .95rem; color: var(--g-deep); }
.goc-sub { font-size: .75rem; color: var(--txt-lt); }
.goc-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
/* ── Principals ──────────────────────────────────── */
.principals-grid { display: flex; flex-direction: column; gap: 32px; margin: 28px 0; }
.principal-era h3 { font-size: 1rem; font-weight: 700; letter-spacing: .06em; color: var(--g-deep); margin-bottom: 14px; padding-left: 12px; border-left: 3px solid var(--gold); }
.era-title { font-size: 1rem; font-weight: 700; color: var(--g-deep); margin-bottom: 14px; padding-left: 12px; border-left: 3px solid var(--gold) !important; }
.pe-list { display: flex; flex-direction: column; gap: 10px; }
.pe-item {
display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start;
border-radius: var(--rad-m); padding: 16px 20px;
}
.pe-num { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: var(--gold); }
.pe-info strong { display: block; font-size: .95rem; color: var(--g-deep); margin-bottom: 3px; }
.pe-info span { font-size: .78rem; color: var(--gold); font-weight: 600; display: block; margin-bottom: 5px; }
.pe-info p { font-size: .84rem; color: var(--txt-mid); line-height: 1.6; margin: 0 0 6px; }
.pe-badge {
display: inline-block; margin-top: 6px;
font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--accent); background: rgba(192,154,50,.12);
border: 1px solid rgba(192,154,50,.3); border-radius: var(--rad-pill);
padding: 3px 10px;
}
.pe-badge.pe-badge-current { color: #fff; background: var(--g-deep); border-color: var(--gold); }
.stat-banner { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 28px 0; }
.sb-stat { text-align: center; padding: 20px; background: var(--cream); border-radius: var(--rad-m); border: 1px solid rgba(11,31,66,.1); }
.sbs-num { display: block; font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; line-height: 1.1; margin-bottom: 4px; }
.sbs-label { font-size: .75rem; color: var(--txt-lt); text-transform: uppercase; letter-spacing: .08em; }
/* ── Principals Photo Gallery ────────────────────── */
.prl-featured {
display: flex; gap: 32px; align-items: flex-start;
background: var(--cream); border-radius: var(--rad-l);
border: 1px solid rgba(11,31,66,.08);
box-shadow: var(--shd-md);
padding: 28px; margin: 28px 0 36px;
}
.prl-feat-photo {
flex: 0 0 220px; position: relative;
border-radius: var(--rad-m); overflow: hidden;
}
.prl-feat-photo img {
width: 100%; aspect-ratio: 3/4; object-fit: cover;
display: block;
}
.prl-feat-num {
position: absolute; top: 12px; left: 12px;
font-family: 'Playfair Display', serif;
font-size: 1.4rem; font-weight: 700;
color: var(--g-deep); background: var(--gold);
border-radius: 50%; width: 46px; height: 46px;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shd-sm);
}
.prl-feat-body { flex: 1; min-width: 0; padding: 4px 0; }
.prl-feat-body h3 {
font-family: 'Playfair Display', serif;
font-size: 1.4rem; font-weight: 700;
color: var(--g-deep); margin: 10px 0 6px; line-height: 1.25;
}
.prl-feat-body p { font-size: .9rem; color: var(--txt-mid); line-height: 1.65; }
.prl-period {
display: block; font-size: .82rem; font-weight: 600;
color: var(--accent); margin-bottom: 10px; letter-spacing: .04em;
}
.prl-gallery {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 20px; margin: 0 0 32px;
}
.prl-card {
border-radius: var(--rad-m); overflow: hidden;
box-shadow: var(--shd-sm);
transition: transform .28s ease, box-shadow .28s ease;
}
.prl-card:hover { transform: translateY(-4px); box-shadow: var(--shd-md); }
.prl-photo { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.prl-photo img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .4s ease;
}
.prl-card:hover .prl-photo img { transform: scale(1.04); }
.prl-pos {
position: absolute; top: 8px; right: 8px;
font-family: 'Playfair Display', serif;
font-size: .78rem; font-weight: 700;
color: var(--g-deep); background: var(--gold);
border-radius: 50%; width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.prl-info { padding: 14px 16px 16px; }
.prl-info strong {
display: block; font-size: .88rem; color: var(--g-deep);
font-weight: 600; line-height: 1.3; margin-bottom: 4px;
}
.prl-info span { display: block; font-size: .75rem; color: var(--accent); font-weight: 600; }
@media (max-width: 1100px) { .prl-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
.prl-featured { flex-direction: column; }
.prl-feat-photo { flex: none; width: 100%; max-width: 220px; margin: 0 auto; }
.prl-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) { .prl-gallery { gap: 12px; } }
/* ── College song card ───────────────────────────── */
.song-card { background: var(--white); border-radius: var(--rad-l); padding: 36px; box-shadow: var(--shd-md); border: 1px solid rgba(11,31,66,.08); margin: 28px 0; }
.sc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--cream-d); }
.sc-header h3 { font-size: 1.3rem; color: var(--g-deep); }
.sc-lyrics { max-width: 560px; }
.sc-verse { margin-bottom: 20px; }
.sc-verse p { font-size: .95rem; color: var(--txt-mid); line-height: 1.85; margin-bottom: 2px; font-style: italic; }
.sc-chorus { background: var(--cream); border-radius: var(--rad-s); padding: 14px 18px; margin-bottom: 20px; }
.sc-chorus strong { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.sc-chorus p { font-size: .95rem; color: var(--g-deep); line-height: 1.85; margin-bottom: 2px; font-weight: 500; }
.sc-chorus p em { font-weight: 700; color: var(--gold); }
/* ── Commemorations events ───────────────────────── */
.events-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 28px 0; }
.event-card {
border-radius: var(--rad-m); padding: 22px; border: 1px solid rgba(11,31,66,.1);
box-shadow: var(--shd-xs); transition: var(--tr);
}
.event-card:hover { box-shadow: var(--shd-md); transform: translateY(-4px); }
.ec-month { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 8px; }
.event-card h3 { font-size: 1rem; color: var(--g-deep); margin-bottom: 10px; }
.event-card p { font-size: .84rem; color: var(--txt-mid); line-height: 1.7; }
/* ── Pastoral houses ─────────────────────────────── */
.houses-pastoral { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 28px 0; }
.hp-card { border-radius: var(--rad-m); padding: 20px; text-align: center; }
.hpc-initial { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--gold-ink); display: block; margin-bottom: 6px; }
.hpc-logo { width: 68px; height: 68px; object-fit: contain; display: block; margin: 0 auto 10px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }.hp-card h4, .hp-card h3{ font-size: .95rem; color: var(--g-deep); margin-bottom: 8px; }
.hp-card p { font-size: .82rem; color: var(--txt-mid); line-height: 1.6; }
/* ── Meals grid ──────────────────────────────────── */
.meals-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 28px 0; }
.meal-card { border-radius: var(--rad-m); padding: 20px; transition: var(--tr); }
.meal-card:hover { box-shadow: var(--shd-md); transform: translateY(-3px); }
.mc-time { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 7px; }
.meal-card h3 { font-size: 1rem; color: var(--g-deep); margin-bottom: 8px; }
.meal-card p { font-size: .84rem; color: var(--txt-mid); line-height: 1.68; }
/* ── Faith split ─────────────────────────────────── */
.faith-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0; }
/* ══════════════ Calendar picker ══════════════
The dropdown the browsers cannot agree on, drawn once in the college's own
colours. Enhancement only — the underlying '; inherits: false; initial-value: 0deg;
}
/* ── Gradient ring: the container paints a conic ring behind a 3px pad ── */
.fc-photo {
padding: 3px; border: none;
background:
conic-gradient(from var(--fc-ang, 0deg),
var(--gold) 0deg, rgba(184,134,11,.25) 90deg,
var(--g-mid) 180deg, rgba(184,134,11,.25) 270deg, var(--gold) 360deg);
transition: box-shadow .35s ease;
}
.fc-photo img {
border-radius: 50%;
background: linear-gradient(160deg, #dfe7e2 0%, #c3d1c9 100%);
filter: grayscale(.35) contrast(1.02);
transition: filter .45s ease, transform .45s cubic-bezier(.22,.9,.35,1.2);
}
.fc-photo.fc-noimg::after { inset: 3px; border-radius: 50%;
background: linear-gradient(160deg, #dfe7e2 0%, #c3d1c9 100%); }
[data-theme="dark"] .fc-photo.fc-noimg::after { background: linear-gradient(160deg, #1b2b33 0%, #23383f 100%); }
/* ── Sheen sweep (photo cards only, not initials avatars) ── */
.fc-photo:not(.fc-noimg) { position: relative; }
.fc-photo:not(.fc-noimg)::before {
content: ''; position: absolute; inset: 3px; border-radius: 50%;
background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.45) 48%, transparent 62%);
background-size: 260% 100%; background-position: 120% 0;
z-index: 1; pointer-events: none;
}
/* ── Card hover: lift, ring spin, colour reveal, sheen pass ── */
.faculty-card { transition: transform .3s ease, box-shadow .3s ease; }
.faculty-card:hover, .faculty-card:focus-within {
transform: translateY(-5px);
box-shadow: 0 16px 34px rgba(4,16,31,.16), 0 3px 10px rgba(4,16,31,.08);
}
.faculty-card:hover .fc-photo, .fac-head:hover .fac-head-photo {
animation: fcRingSpin 2.6s linear infinite;
box-shadow: 0 0 0 4px rgba(255,207,1,.12), 0 10px 26px rgba(13,40,24,.28);
}
.faculty-card:hover .fc-photo img, .fac-head:hover .fac-head-photo img {
filter: none; transform: scale(1.07);
}
.faculty-card:hover .fc-photo:not(.fc-noimg)::before {
animation: fcSheen .9s ease .1s both;
}
@keyframes fcRingSpin { to { --fc-ang: 360deg; } }
@keyframes fcSheen { from { background-position: 120% 0; } to { background-position: -60% 0; } }
/* ── Featured heads share the treatment (thicker ring) ── */
.fac-head-photo {
padding: 4px; border: none;
background:
conic-gradient(from var(--fc-ang, 0deg),
var(--gold) 0deg, rgba(184,134,11,.3) 100deg,
var(--g-mid) 200deg, rgba(184,134,11,.3) 300deg, var(--gold) 360deg);
}
.fac-head-photo img {
border-radius: 50%;
background: linear-gradient(160deg, #dfe7e2 0%, #c3d1c9 100%);
filter: grayscale(.25);
transition: filter .45s ease, transform .45s cubic-bezier(.22,.9,.35,1.2);
}
[data-theme="dark"] .fc-photo img,
[data-theme="dark"] .fac-head-photo img { background: linear-gradient(160deg, #1b2b33 0%, #23383f 100%); }
/* ── Staggered entrance when a school tab opens ── */
.fac-panel:not([hidden]) .faculty-card { animation: fcRise .5s cubic-bezier(.2,.7,.3,1) both; }
.fac-panel:not([hidden]) .faculty-grid .faculty-card:nth-child(1) { animation-delay: .05s; }
.fac-panel:not([hidden]) .faculty-grid .faculty-card:nth-child(2) { animation-delay: .1s; }
.fac-panel:not([hidden]) .faculty-grid .faculty-card:nth-child(3) { animation-delay: .15s; }
.fac-panel:not([hidden]) .faculty-grid .faculty-card:nth-child(4) { animation-delay: .2s; }
.fac-panel:not([hidden]) .faculty-grid .faculty-card:nth-child(5) { animation-delay: .25s; }
.fac-panel:not([hidden]) .faculty-grid .faculty-card:nth-child(n+6) { animation-delay: .3s; }
@keyframes fcRise { from { opacity: 0; transform: translateY(14px) scale(.97); } }
/* ── Dark mode card lift shadow ── */
[data-theme="dark"] .faculty-card:hover, [data-theme="dark"] .faculty-card:focus-within {
box-shadow: 0 16px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(255,207,1,.15);
}
/* ── Calm mode: no motion, photos in full colour ── */
@media (prefers-reduced-motion: reduce) {
.fc-photo img, .fac-head-photo img { filter: none; }
.faculty-card:hover .fc-photo, .fac-head:hover .fac-head-photo,
.faculty-card:hover .fc-photo:not(.fc-noimg)::before,
.fac-panel:not([hidden]) .faculty-card { animation: none; }
.faculty-card:hover, .faculty-card:hover .fc-photo img,
.fac-head:hover .fac-head-photo img { transform: none; }
}
@media print {
.fc-photo img, .fac-head-photo img { filter: none !important; }
}
/* ══════════════════════════════════════════════════
MODERN NAVIGATION & SCROLL EFFECTS
1 · Cross-document View Transitions — pages crossfade
instead of hard-reloading. Progressive: browsers
without support keep the JS fade in main.js.
2 · CSS scroll-driven animations — hero parallax and a
self-drawing history-timeline line. Zero JS.
══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .16s; }
::view-transition-new(root) { animation-duration: .3s; }
}
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
/* Inner-page heroes: watermark + texture drift as the page scrolls */
.ph-deco {
animation: sdDecoDrift linear both;
animation-timeline: scroll();
animation-range: 0 80vh;
}
.ph-pattern {
inset: -90px 0 0 0;
animation: sdPatternDrift linear both;
animation-timeline: scroll();
animation-range: 0 80vh;
}
/* Homepage hero: slow cinematic zoom while scrolling away */
.hero-video {
animation: sdHeroZoom linear both;
animation-timeline: scroll();
animation-range: 0 100vh;
}
/* History timeline: gold progress line draws itself as you read.
Sits under the z-index:2 dots, over the faint base line. */
.htl-wrap::after {
content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
background: linear-gradient(to bottom, var(--gold-lt, #ffe066), var(--gold));
box-shadow: 0 0 14px rgba(255,207,1,.4);
transform-origin: top center;
pointer-events: none;
animation: sdLineDraw linear both;
animation-timeline: view();
animation-range: cover 0% cover 82%;
}
}
@media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
.htl-wrap::after { left: 14px; }
}
}
@keyframes sdDecoDrift { to { translate: 0 70px; opacity: .35; } }
@keyframes sdPatternDrift { to { translate: 0 70px; } }
@keyframes sdHeroZoom { to { scale: 1.07; } }
@keyframes sdLineDraw { from { transform: translateX(-50%) scaleY(0); } to { transform: translateX(-50%) scaleY(1); } }
/* ── Homepage hero video (main hero element) ─────── */
.hero-video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center 30%;
opacity: 0; transition: opacity 1.4s ease;
pointer-events: none;
}
.hero-video.hv-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
@media print { .hero-video { display: none !important; } }
/* ── Quick-nav cards: hover photo slides ─────────── */
.qn-card::before { z-index: 3; } /* keep gold top bar above photos */
.qn-card .qnc-icon, .qn-card h3, .qn-card p, .qn-card .qnc-arrow {
position: relative; z-index: 2;
transition: color .35s ease;
}
.qnc-slides {
position: absolute; inset: 0; z-index: 1; display: block;
opacity: 0; transition: opacity .45s ease;
pointer-events: none;
}
.qnc-slides img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: 0; transform: translateX(5%) scale(1.05);
}
.qnc-slides::after { /* scrim for text legibility */
content: ''; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(4,16,31,.93) 0%, rgba(4,16,31,.6) 55%, rgba(4,16,31,.38) 100%);
}
.qn-card:hover .qnc-slides { opacity: 1; }
.qn-card:hover .qnc-slides img { animation: qncSlide 7.5s linear infinite; }
.qn-card:hover .qnc-slides img:nth-child(2) { animation-delay: 2.5s; }
.qn-card:hover .qnc-slides img:nth-child(3) { animation-delay: 5s; }
@keyframes qncSlide {
0% { opacity: 0; transform: translateX(5%) scale(1.05); }
5% { opacity: 1; transform: translateX(0) scale(1.02); }
33.3% { opacity: 1; transform: translateX(-1.5%) scale(1.02); }
39% { opacity: 0; transform: translateX(-4%) scale(1.02); }
100% { opacity: 0; transform: translateX(-4%) scale(1.02); }
}
/* Text flips to light over the photographs */
.qn-card:hover .qnc-icon, .qn-card:hover h3 { color: var(--white); }
.qn-card:hover p { color: rgba(244,239,228,.88); }
[data-theme="dark"] .qn-card:hover .qnc-icon,
[data-theme="dark"] .qn-card:hover h3 { color: var(--white); }
/* Reduced motion: a single steady photo instead of a slideshow */
@media (prefers-reduced-motion: reduce) {
.qn-card:hover .qnc-slides img { animation: none; }
.qn-card:hover .qnc-slides img:first-child { opacity: 1; transform: none; }
}
@media print { .qnc-slides { display: none !important; } }
/* ── Search-overlay hint chips ─────────────────────
The overlay panel is dark in BOTH themes, but the generic `kbd`
rule (shortcuts dialog) sets deep-navy text — illegible here.
Keep the Esc / Ctrl K chips light regardless of theme. */
.so-hint { color: rgba(255,255,255,.65); }
.so-hint kbd,
[data-theme="dark"] .so-hint kbd {
color: #fff;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.28);
box-shadow: none;
}
/* ── Search overlay crest: bigger, hovering in place ── */
.so-crest img {
width: 120px; height: 120px;
animation: soHover 3s ease-in-out infinite;
transition: transform .3s ease, filter .3s ease;
}
.so-crest img:hover {
transform: scale(1.08);
filter: drop-shadow(0 8px 28px rgba(255,207,1,.65));
}
@keyframes soHover {
0%, 100% { translate: 0 0; }
50% { translate: 0 -12px; }
}
@media (prefers-reduced-motion: reduce) { .so-crest img { animation: none; } }
/* ── "Now at Ghora Gali" strip (home) ────────────── */
.now-strip { background: var(--g-dark); border-top: 1px solid rgba(255,207,1,.25); border-bottom: 1px solid rgba(255,255,255,.06); }
.now-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 28px; font-size: .8rem; color: rgba(244,239,228,.85); }
/* The wide tracking, not the margin, was pushing the first pill away
(issue 16). Tightened, and the label now sits on the pill baseline. */
.now-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-right: 2px; }
.now-sep { color: rgba(255,255,255,.3); }
.now-next { color: var(--gold-lt, #ffe066); }
[data-theme="dark"] .now-strip { background: rgba(255,255,255,.03); }
/* ── Faculty quick-filter ─────────────────────────── */
.fac-filter { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.fac-filter input {
flex: 1; max-width: 460px; padding: 12px 18px; font: inherit; font-size: .9rem;
border: 1.5px solid rgba(11,31,66,.18); border-radius: var(--rad-pill);
background: var(--white); color: var(--txt); transition: border-color .25s, box-shadow .25s;
}
.fac-filter input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,207,1,.15); }
.fac-filter-count { font-size: .78rem; color: var(--txt-lt); white-space: nowrap; }
.fc-hide { display: none !important; }
/* while filtering, results are drawn from all three schools at once */
.fac-filtering .fac-panel { display: block !important; }
.fac-filtering .fac-panel[hidden] { display: block !important; }
.fac-filtering .fac-panel.fc-hide,
.fac-filtering .fac-panel[hidden].fc-hide { display: none !important; }
.fac-filtering .faculty-school-heading { margin-top: 1.4rem; }
.fac-nohits {
margin: 4px 0 18px; padding: 14px 18px; border-radius: 12px;
font-size: .88rem; color: var(--txt-mid);
background: var(--cream); border: 1px solid rgba(11,31,66,.09);
}
[data-theme="dark"] .fac-nohits { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .fac-filter input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: var(--txt); }
/* ════════════════ MODERN DESIGN LAYER ════════════════ */
/* 1 · Hero video: film grain + vignette */
.hero::before {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(ellipse at center, transparent 62%, rgba(12,12,12,.28) 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: .5;
}
.hero-content, .hero-counters-wrap, .hero-scroll-hint { z-index: 2; }
/* 2 · Grainy gold-bloom mesh on flat navy sections */
.adm-cta, .footer, .now-strip { position: relative; }
.adm-cta::after, .footer .grain-veil {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(60% 90% at 12% -10%, rgba(255,207,1,.09), transparent 60%),
radial-gradient(50% 80% at 95% 110%, rgba(22,50,114,.35), transparent 65%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.adm-cta .con { position: relative; z-index: 1; }
/* 3 · Editorial photo treatment (ring + navy tint) — faculty imagery exempt */
.news-card-img img,
.content-section > figure img,
.content-section > p > img,
.tn-wrap {
border-radius: var(--rad-m);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), var(--shd-sm);
}
.news-card-img { position: relative; }
.news-card-img::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(160deg, rgba(11,31,66,.14), transparent 55%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
/* 4 · Home quick-nav: uniform modern grid.
Six equal tiles, identical 20px spacing on every side,
photographs appear ONLY on hover (base .qnc-slides behaviour). */
@media (min-width: 900px) {
.qn-grid {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr; /* every row exactly the same height */
gap: 20px; /* equal spacing horizontally & vertically */
}
.qn-card {
min-height: 232px;
border-radius: var(--rad-l);
padding: 26px;
}
}
/* 5 · Oversized watermark wordmark in the footer */
.footer { overflow: hidden; }
.footer::after {
content: 'GALLIANS';
position: absolute; inset: 0; /* fills the entire footer area */
display: flex; align-items: center; justify-content: center;
font-family: 'Playfair Display', serif; font-weight: 900;
font-size: 18.4vw; /* full width on any screen */
letter-spacing: .045em; line-height: 1;
color: rgba(255,255,255,.03); pointer-events: none; user-select: none;
white-space: nowrap; z-index: 0;
}
.footer > * { position: relative; z-index: 1; }
/* 6 · Animated gold link underlines in prose */
.page-body p a:not([class]), .page-body li a:not([class]) {
text-decoration: none;
background-image: linear-gradient(to right, var(--gold-dk), var(--gold));
background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%;
padding-bottom: 2px;
transition: background-size .35s ease;
}
.page-body p a:not([class]):hover, .page-body li a:not([class]):hover,
.page-body p a:not([class]):focus-visible, .page-body li a:not([class]):focus-visible {
background-size: 100% 2px;
}
/* 7 · Border-beam on the Admissions CTA */
@property --bb-ang { syntax: ''; inherits: false; initial-value: 0deg; }
@media (prefers-reduced-motion: no-preference) {
.adm-cta::before {
content: ''; position: absolute; inset: 0; padding: 2px; pointer-events: none;
background: conic-gradient(from var(--bb-ang),
transparent 0deg 320deg, rgba(255,207,1,.9) 342deg, transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: bbSpin 7s linear infinite;
}
@keyframes bbSpin { to { --bb-ang: 360deg; } }
}
/* 8 · Shine sweep on primary buttons */
.btn-primary { overflow: hidden; }
.btn-primary::after {
content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
transform: skewX(-20deg); transition: none; pointer-events: none;
}
.btn-primary:hover::after { left: 130%; transition: left .6s ease; }
/* 9 · News ticker: seamless marquee with soft masked edges */
.nt-items {
-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
/* 18px between headlines read as one continuous sentence; the separator
was also nearly invisible at .4rem (issue 15). */
.nt-track { display: flex; align-items: center; gap: 34px; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
.nt-track { animation: ntScroll 42s linear infinite; }
.nt-items:hover .nt-track { animation-play-state: paused; }
}
@keyframes ntScroll { to { transform: translateX(-50%); } }
/* 10 · Gallian Journey — cards STACK over one another as you scroll */
.gj-wrap { padding-bottom: 8vh; }
.gj-track { display: block; max-width: 720px; margin: 0 auto; padding: 8px 0 0; }
.gj-card {
position: relative;
border-radius: var(--rad-l); padding: 30px 32px;
background: var(--surface); border: 1px solid rgba(11,31,66,.1);
box-shadow: 0 -8px 44px rgba(4,16,31,.18), var(--shd-md);
margin-bottom: 46vh; /* scroll distance between each stack */
transform-origin: 50% 0;
transition: transform .12s linear, filter .12s linear;
will-change: transform;
}
.gj-card:last-child { margin-bottom: 0; }
.gj-card .gj-k { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.gj-card h3 { font-size: 1.45rem; color: var(--ink); margin: 8px 0 8px; }
.gj-card p { font-size: .9rem; color: var(--txt-mid); line-height: 1.75; }
[data-theme="dark"] .gj-card { background: var(--surface); border-color: rgba(255,255,255,.12); box-shadow: 0 -6px 40px rgba(0,0,0,.5), var(--shd-md); }
@media (prefers-reduced-motion: reduce) { .gj-card { position: static; margin-bottom: 20px; } }
@media (max-width: 860px) {
.gj-card { position: sticky; margin-bottom: 42vh; padding: 24px; }
.gj-card:nth-child(n) { top: 80px; }
}
/* 11 · Per-section accent theming */
body[data-accent="campus"] { --accent: #44612a; } /* was #4a6a2e: 4.05:1 on the tinted panel, just under AA */
body[data-accent="schools"] { --accent: #2d3a8c; }
body[data-accent="sports"] { --accent: #8c4a2d; }
body[data-accent="arts"] { --accent: #6a2d8c; }
body[data-accent="alumni"] { --accent: #2d5a8c; }
/* The dark partners for the five above. Same hue, lifted until each clears
4.5:1 against #1b2c42 — the lightest background any of them was measured
sitting on. Without these the light value inherits into dark and the text
disappears. Overview, admissions, parents and office are absent from the
block above, which is why only these five were affected. */
[data-theme="dark"] body[data-accent="campus"] { --accent: #72a04b; }
[data-theme="dark"] body[data-accent="schools"] { --accent: #8590d3; }
[data-theme="dark"] body[data-accent="sports"] { --accent: #c88365; }
[data-theme="dark"] body[data-accent="arts"] { --accent: #b580d2; }
[data-theme="dark"] body[data-accent="alumni"] { --accent: #6a97ca; }
.sec-eye, .sec-label { color: var(--accent, var(--gold-ink)); } /* the --gold-dk fallback was 2.22:1 on white */
.breadcrumb a:hover { color: var(--accent, var(--gold)); }
[data-theme="dark"] body[data-accent] .sec-eye { filter: brightness(1.6); }
/* ════════════════ MOBILE-FRIENDLY LAYER ════════════════ */
/* iOS: form controls under 16px trigger forced page-zoom on focus */
@media (max-width: 760px) {
input, select, textarea { font-size: 16px !important; }
}
/* Every data table becomes swipe-scrollable on small screens */
@media (max-width: 760px) {
.page-body table {
display: block; max-width: 100%;
overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.page-body table th, .page-body table td { white-space: nowrap; }
/* Comparison table: keep the row labels pinned while swiping */
.cmp-table th[scope="row"] {
position: sticky; left: 0; z-index: 1;
background: var(--white); box-shadow: 2px 0 6px rgba(11,31,66,.08);
}
[data-theme="dark"] .cmp-table th[scope="row"] { background: var(--g-dark, #0b1f42); }
}
/* Search overlay on touch devices: no keyboard hints, calmer crest */
@media (pointer: coarse) { .so-hint { display: none; } }
@media (max-width: 640px) {
.so-crest img { width: 84px; height: 84px; }
}
/* Now-strip: stack cleanly, drop the separators */
@media (max-width: 640px) {
.now-inner { flex-direction: column; gap: 4px; padding: 12px 20px; text-align: center; }
.now-sep { display: none; }
.now-label { margin: 0 0 2px; }
}
/* Faculty filter: input and counter wrap gracefully */
.fac-filter { flex-wrap: wrap; }
@media (max-width: 640px) { .fac-filter input { max-width: 100%; } }
/* Footer watermark: smaller floor so it never dominates a phone screen */
/* Fee estimator / wizard controls breathe on small screens */
@media (max-width: 640px) {
#feSchool { width: 100%; }
#wz .btn-primary, #wz .btn.btn-outline { flex: 1; text-align: center; justify-content: center; }
}
/* Gallian Journey: swipe hint instead of scroll hint on touch */
@media (max-width: 860px) {
.gj-track { padding-bottom: 10px; }
.gj-sticky { -webkit-overflow-scrolling: touch; }
}
/* ── Minimal-footprint footer ─────────────────────── */
.footer-top { padding: 34px 0 24px; }
.footer-grid { gap: 20px 28px; }
.footer-grid h3, .footer-grid h4 { margin-bottom: 8px; font-size: .8rem; }
.footer-grid li { line-height: 1.5; }
.footer-grid a, .ft-contact li { font-size: .78rem; }
.ft-tagline { margin-bottom: 10px; font-size: .78rem; }
.footer-bottom { padding: 12px 0; font-size: .72rem; }
.footer-bottom p { margin: 0; }
/* Watermark scales to the slimmer footer: width-spanning but height-capped */
.footer::after { font-size: min(18.4vw, 260px); }
@media (max-width: 640px) {
.footer-top { padding: 26px 0 18px; }
.footer-grid { gap: 16px 20px; }
}
/* ════════════════ VISUAL ENHANCEMENTS LAYER ════════════════ */
/* 2 · Aurora drift behind inner-page hero titles */
@media (prefers-reduced-motion: no-preference) {
.ph-overlay {
background:
radial-gradient(42% 60% at 18% 28%, rgba(255,255,255,.05), transparent 70%),
radial-gradient(55% 75% at 82% 72%, rgba(54,54,54,.55), transparent 70%),
linear-gradient(155deg, rgba(15,15,15,.94) 0%, rgba(32,32,32,.88) 60%, rgba(15,15,15,.96) 100%);
background-size: 220% 220%, 220% 220%, 100% 100%;
background-position: 0% 0%, 100% 100%, 0 0;
animation: phAurora 20s ease-in-out infinite alternate;
}
@keyframes phAurora {
to { background-position: 60% 45%, 40% 40%, 0 0; }
}
}
/* 3 · Cursor spotlight on dark sections */
.spot-layer {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
opacity: 0; transition: opacity .5s ease;
background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 40%),
rgba(255,207,1,.075), transparent 62%);
}
.adm-cta .spot-layer { z-index: 0; }
/* 4 · Gold-wipe photo reveals on scroll */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.content-section > figure img, .content-section > p > img, .tn-wrap {
animation: imgWipe linear both;
animation-timeline: view();
animation-range: entry 5% entry 55%;
}
}
}
@keyframes imgWipe {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
/* ── Museum and Thurley Hospital: no reveal on the photographs ──────────
Requested. Those two pages carry documentary photographs of a room and a
building rather than showcase imagery, and the gold wipe reads as the
picture sliding into place as you scroll — which is a distraction when the
point is simply "here is the hospital".
Both mechanisms are switched off, because both are load-in effects:
· imgWipe — the scroll-driven clip-path wipe on .content-section figures
· .g-lazy — the opacity fade main.js puts on .ng-grid thumbnails
`animation: none` is enough to stop the first, but clip-path is restated so
an unresolved view() timeline cannot leave a figure clipped. The section
fade-and-rise (.ri) is left alone: that belongs to every page on the site,
and removing it from two of them would be the odd thing, not the effect. */
.page-figure img {
animation: none !important;
clip-path: none !important;
}
.museum-gallery .gallery-item img.g-lazy,
.museum-gallery .gallery-item img.g-lazy.g-in {
opacity: 1 !important;
transition: none !important;
}
/* 6 · Ken Burns drift on homepage news photos */
@media (prefers-reduced-motion: no-preference) {
.news-card-img { overflow: hidden; }
.news-card-img img { animation: kenPan 18s ease-in-out infinite alternate; }
@keyframes kenPan {
from { transform: scale(1.02) translateX(0); }
to { transform: scale(1.1) translate(-2.5%, -1.5%); }
}
}
/* 7 · House crest coin-flip on hover */
.hdc-logo { transition: transform .8s cubic-bezier(.3,.7,.25,1); transform-style: preserve-3d; }
.hdc-header:hover .hdc-logo {
transform: rotateY(360deg);
filter: drop-shadow(0 10px 26px rgba(255,207,1,.35));
}
/* 8 · The hero italic used to carry a shimmer sweep whose highlight went
to #fff7cf, and a winter override that turned it pale blue — so "Ghora
Gali" only matched the gold of the Apply for Admission button for part
of the year, and only for part of each animation cycle. It is now the
flat --gold the button is painted in, and nothing repaints it.
Both -webkit-text-fill-color and background-clip are cleared explicitly:
leaving either behind would keep the text transparent. */
.hero-title em {
background: none;
-webkit-background-clip: border-box; background-clip: border-box;
-webkit-text-fill-color: currentColor;
animation: none;
color: var(--gold); /* #ffcf01 — the same token as .btn-primary */
}
/* 9 · Radar ping on campus-map hotspot pills */
@media (prefers-reduced-motion: no-preference) {
.cm-hs-pill { position: relative; }
.cm-hs-pill::after {
content: ''; position: absolute; left: 12px; top: 50%; margin-top: -4px;
width: 8px; height: 8px; border-radius: 50%;
border: 2px solid rgba(255,207,1,.8); opacity: 0;
animation: pinPing 2.6s ease-out infinite;
pointer-events: none;
}
@keyframes pinPing {
0% { transform: scale(.5); opacity: .9; }
70% { transform: scale(2.6); opacity: 0; }
100% { opacity: 0; }
}
}
/* 5 · Lightbox filmstrip + zoom */
.lb-strip {
display: flex; gap: 8px; justify-content: flex-start; overflow-x: auto;
padding: 10px 4px 4px; max-width: min(86vw, 900px); margin: 0 auto;
-webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.lb-th {
flex: none; width: 62px; height: 44px; padding: 0; border: 2px solid transparent;
border-radius: 8px; overflow: hidden; cursor: pointer; background: none;
opacity: .55; transition: opacity .25s, border-color .25s, transform .25s;
}
.lb-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-th:hover { opacity: .9; }
.lb-th.on { opacity: 1; border-color: var(--gold); transform: translateY(-2px); }
.lb-img { cursor: zoom-in; }
.lb-zoom .lb-img-wrap { overflow: auto; }
.lb-zoom .lb-img { transform: scale(1.75); cursor: zoom-out; transform-origin: center; }
@media (max-width: 640px) { .lb-th { width: 48px; height: 36px; } }
@media print { .hero-atmos, .spot-layer, .lb-strip { display: none !important; } }
/* ── Mobile: quick-nav cards run their slideshows automatically ── */
@media (max-width: 899px) {
.qn-card { min-height: 200px; }
.qn-card .qnc-slides { opacity: 1; }
.qn-card .qnc-icon, .qn-card h3 { color: var(--white); }
.qn-card p { color: rgba(244,239,228,.9); }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
.qn-card .qnc-slides img { animation: qncSlide 7.5s linear infinite; }
.qn-card .qnc-slides img:nth-child(2) { animation-delay: 2.5s; }
.qn-card .qnc-slides img:nth-child(3) { animation-delay: 5s; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
.qn-card .qnc-slides img:first-child { opacity: 1; transform: none; }
}
/* Hero layering, stated explicitly: video back, overlay mid, text top */
.hero-video { z-index: 0; }
.hero-overlay { z-index: 1; }
/* ════════════════ VISUAL ROUND TWO ════════════════ */
/* 1 · Rolling-digit counters */
.od { display: inline-flex; align-items: baseline; }
.od-col { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.od-strip { display: block; transform: translateY(0); transition: transform 2.1s cubic-bezier(.16,.8,.24,1); }
.od-strip b { display: block; height: 1em; line-height: 1; font-weight: inherit; }
.od-sep { line-height: 1; }
/* 3 · Ticker inertia origin */
.nt-items { transform-origin: 50% 100%; will-change: transform; }
/* 4 · Nav magic line (desktop only — must not override mobile fixed menu) */
@media (min-width: 1341px) { .nav-menu { position: relative; } } /* desktop only: below this the menu is the absolutely-positioned mobile panel */
.nav-line {
position: absolute; bottom: 6px; left: 0; height: 2px; width: 0;
background: linear-gradient(to right, var(--gold-dk), var(--gold));
border-radius: 2px; opacity: 0; pointer-events: none;
transition: transform .35s cubic-bezier(.3,.8,.3,1), width .35s cubic-bezier(.3,.8,.3,1), opacity .25s;
}
@media (max-width: 1340px) { .nav-line { display: none; } } /* the underline belongs to the desktop bar; below 1341 that bar is the mobile panel */
/* 6 · Seasonal tinting */
html[data-season="winter"] .hero-overlay { filter: saturate(.94) brightness(1.06); }
html[data-season="winter"] .now-strip { border-top-color: rgba(190,220,255,.35); }
/* The winter tint used to recolour the hero italic pale blue from December
to February. The rest of the seasonal treatment stays; the title does not. */
html[data-season="summer"] .hero-overlay { filter: saturate(1.04); }
/* 7 · House-colour washes */
.hdc-h1 { border-left: 5px solid #a32424; background: linear-gradient(100deg, rgba(163,36,36,.10), transparent 55%); }
.hdc-h2 { border-left: 5px solid #2e7d4f; background: linear-gradient(100deg, rgba(46,125,79,.10), transparent 55%); }
.hdc-h3 { border-left: 5px solid #d9a92a; background: linear-gradient(100deg, rgba(217,169,42,.13), transparent 55%); }
.hdc-h4 { border-left: 5px solid #2d5a8c; background: linear-gradient(100deg, rgba(45,90,140,.10), transparent 55%); }
.hdc-h1, .hdc-h2, .hdc-h3, .hdc-h4 { border-radius: var(--rad-m); padding: 14px 16px; }
/* House colours double as ink on the tinted crest header. Green and gold were
under AA on the light card; red, green and blue were under it on the dark
one. Each keeps its hue — only the lightness moves. */
.hdc-h1 .hdc-colour { color: #a32424; }
.hdc-h2 .hdc-colour { color: #2b764a; }
.hdc-h3 .hdc-colour { color: #8a6508; }
.hdc-h4 .hdc-colour { color: #2d5a8c; }
[data-theme="dark"] .hdc-h1 .hdc-colour { color: #d85151; }
[data-theme="dark"] .hdc-h2 .hdc-colour { color: #36935d; }
[data-theme="dark"] .hdc-h3 .hdc-colour { color: #b8860b; }
[data-theme="dark"] .hdc-h4 .hdc-colour { color: #4a84c5; }
[data-theme="dark"] .hdc-h1, [data-theme="dark"] .hdc-h2,
[data-theme="dark"] .hdc-h3, [data-theme="dark"] .hdc-h4 { background-blend-mode: screen; }
/* 8 · 3D prospectus book */
.book3d {
display: inline-flex; align-items: center; gap: 20px;
text-decoration: none; color: inherit; margin: 6px 0 16px;
perspective: 900px;
}
.b3 {
position: relative; width: 132px; height: 170px; flex: none;
transform-style: preserve-3d; transform: rotateY(-26deg);
transition: transform .6s cubic-bezier(.3,.8,.3,1);
filter: drop-shadow(14px 18px 22px rgba(4,16,31,.35));
}
.book3d:hover .b3 { transform: rotateY(-10deg) translateY(-4px); }
.b3-cover {
position: absolute; inset: 0; border-radius: 3px 8px 8px 3px;
background: url('images/prospectus-cover.jpg') center/cover no-repeat;
transform-origin: left center; transform: translateZ(9px);
transition: transform .6s cubic-bezier(.3,.8,.3,1);
box-shadow: inset 3px 0 6px rgba(0,0,0,.25);
}
.book3d:hover .b3-cover { transform: translateZ(9px) rotateY(-26deg); }
.b3-pages {
position: absolute; inset: 3px 0 3px 6px; background:
repeating-linear-gradient(to right, #f4efe4 0 2px, #ddd6c4 2px 3px);
border-radius: 2px 6px 6px 2px; transform: translateZ(0);
}
.b3-label { font-size: .95rem; font-weight: 700; color: var(--g-deep); line-height: 1.45; }
.b3-label em { display: block; font-style: normal; font-weight: 500; font-size: .75rem; color: var(--txt-lt); }
[data-theme="dark"] .b3-label { color: var(--txt); }
.dl-card + .book3d, .book3d + .dl-card { vertical-align: top; }
/* 9 · Route-draw map */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.rt-line {
stroke-dasharray: 1; stroke-dashoffset: 1;
animation: rtDraw linear both;
animation-timeline: view();
animation-range: entry 10% cover 55%;
}
@keyframes rtDraw { to { stroke-dashoffset: 0; } }
}
}
@media (prefers-reduced-motion: no-preference) {
.rt-ping { animation: rtPing 2.4s ease-out infinite; transform-origin: 600px 32px; }
@keyframes rtPing {
0% { transform: scale(1); opacity: .9; }
75%, 100% { transform: scale(3); opacity: 0; }
}
}
/* 10 · Gallery caption reveal */
/* There used to be a masonry override here:
@media (min-width: 700px) {
.gallery-grid { display: block; columns: 3 260px; column-gap: 18px; }
.gallery-grid .gallery-item { break-inside: avoid; margin-bottom: 18px; display: block; }
}
CSS multi-column fills top-to-bottom and only then moves across, so the
photographs read down the first column before starting the second — the
opposite of how a gallery is scanned. Measured at 1440, 1024 and 760px:
the first seven tiles all sat at the same x with descending y.
It also bought nothing. .gallery-item carries aspect-ratio: 4/3, so the
tiles were uniform in either layout and masonry's one advantage — ragged
heights — never applied. Measured both ways at 1440/1024/760px: identical
tiles per row and row count; tiles 1px wider (the 16px grid gap replacing
an 18px margin) and the page 12-25px shorter. Removing it lets the base
grid rule stand at every width, which fills across in rows — which is what
mobile was already doing below 700px, so the two now agree. */
.gallery-item { position: relative; overflow: hidden; border-radius: var(--rad-m); }
.gallery-item::after {
content: attr(data-title);
position: absolute; left: 0; right: 0; bottom: 0;
padding: 26px 14px 12px; font-size: .78rem; font-weight: 600; color: #fff;
background: linear-gradient(to top, rgba(4,16,31,.85), transparent);
transform: translateY(100%); transition: transform .35s ease;
pointer-events: none;
}
.gallery-item:hover::after, .gallery-item:focus-visible::after { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .gallery-item::after { transform: none; background: linear-gradient(to top, rgba(4,16,31,.7), transparent); } }
@media print { .book3d, .route-wrap, .nav-line { display: none !important; } }
/* ── Weather atmosphere (polished, 3-depth layers) ── */
.hero-atmos { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
opacity: 0; transition: opacity 1.6s ease; }
.hero-atmos.on { opacity: 1; }
.hero-atmos::before, .hero-atmos::after { content: ''; position: absolute; inset: 0; }
@media (prefers-reduced-motion: no-preference) {
/* SNOW — far, mid, near depth with sway */
/* RAIN — individually randomised JS drops (see initNowStrip) */
/* Wind: the whole system sways gently, like gusts */
/* MIST / FOG — soft bands drifting at three speeds */
.hero-atmos[data-wx="mist"] {
background-image:
radial-gradient(60% 34% at 30% 68%, rgba(255,255,255,.10), transparent 70%),
radial-gradient(52% 30% at 76% 42%, rgba(255,255,255,.08), transparent 70%);
background-size: 160% 100%, 140% 100%;
filter: blur(6px);
animation: wxFogA 60s linear infinite alternate;
}
.hero-atmos[data-wx="mist"]::after {
background: radial-gradient(70% 40% at 50% 85%, rgba(255,255,255,.12), transparent 72%);
background-size: 180% 100%;
filter: blur(10px);
animation: wxFogB 38s ease-in-out infinite alternate;
}
.hero-atmos[data-wx="mist"]::before {
background:
rgba(255,255,255,.035),
radial-gradient(55% 30% at 20% 30%, rgba(255,255,255,.07), transparent 70%);
background-size: 100% 100%, 150% 100%;
filter: blur(8px);
animation: wxFogC 47s linear infinite alternate, wxBreathe 12s ease-in-out infinite alternate;
}
@keyframes wxFogC { to { background-position: 0 0, 45% 0; } }
@keyframes wxBreathe { from { opacity: .75; } to { opacity: 1; } }
@keyframes wxFogA { to { background-position: 40% 0, -30% 0; } }
@keyframes wxFogB { to { background-position: -35% 0; } }
/* CLEAR — golden motes with a slow twinkle layer */
}
/* ── Weather on the glass (viewport layer, home) ── */
.wx-glass {
position: fixed; inset: 0; z-index: 600; pointer-events: none;
opacity: 1; transition: opacity .9s ease;
}
.wx-glass[data-wx="mist"] {
background: radial-gradient(115% 90% at 50% 48%, transparent 52%, rgba(255,255,255,.10) 86%);
}
@media (max-width: 680px) {
.wx-glass[data-wx="mist"] { background: radial-gradient(115% 90% at 50% 48%, transparent 60%, rgba(255,255,255,.08) 90%); } }
@media print { .wx-glass { display: none !important; } }
/* ── Mobile optimization layer ────────────────────── */
a, button { -webkit-tap-highlight-color: transparent; }
a, button, input, select, textarea, .qn-card, .dl-card { touch-action: manipulation; }
.btn-primary:active, .btn-outline:active, .btn:active, .dl-card:active { transform: scale(.985); }
/* Below-the-fold sections skip layout/paint until approached */
@media (max-width: 900px) {
.page-body .content-section { content-visibility: auto; contain-intrinsic-size: auto 480px; }
.related-pages { content-visibility: auto; contain-intrinsic-size: auto 300px; }
}
/* Notched phones: respect the safe areas */
@supports (padding: env(safe-area-inset-left)) {
.navbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.footer-bottom { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.btt { right: calc(20px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); }
}
/* ── Element-level mobile refinements (full sweep) ── */
@media (max-width: 900px) {
/* The hero strip used to hold five counters, so the odd one out was
stretched across both columns. With four it tiles 2x2 on its own and
the override would wrongly widen the last cell. */
/* faculty tab buttons: comfortable 44px+ touch targets */
.fac-tabs [role="tab"] { padding: 12px 20px; }
}
@media (max-width: 700px) {
/* gallery captions: always visible on touch (no hover there) */
.gallery-item::after {
transform: none;
background: linear-gradient(to top, rgba(4,16,31,.78), transparent 70%);
padding: 18px 12px 10px; font-size: .75rem;
}
}
@media (max-width: 640px) {
/* 3D prospectus book centres itself */
.book3d { width: 100%; justify-content: center; }
/* route map labels stay legible at phone scale */
.route-wrap svg text { font-size: 15px; }
.route-wrap svg text[font-size="13"] { font-size: 17px; }
/* comparison table: tighter cells for swiping */
.cmp-table td, .cmp-table th { padding: 10px 12px; font-size: .82rem; }
/* lightbox arrows: guaranteed thumb-sized targets */
.lb-prev, .lb-next, .lb-close { min-width: 46px; min-height: 46px; }
}
/* ── Compact mobile hero: impactful but not screen-hogging ── */
@media (max-width: 680px) {
.hero { min-height: 76svh; padding: 88px 0 34px; }
.hero-crest { width: 72px; margin-bottom: 10px; }
.hero-title { font-size: clamp(1.9rem, 8.6vw, 2.5rem); line-height: 1.12; }
.hero-tagline { font-size: .95rem; margin-bottom: 10px; }
.hero-cta { gap: 10px; }
.hero-cta .btn-primary, .hero-cta .btn { padding: 11px 22px; font-size: .82rem; }
.hero-counters-wrap { margin-top: 20px; }
.hero-counters { gap: 0; }
.hc-item { padding: 8px 14px; }
.hc-num { font-size: 1.5rem; }
.hc-label { font-size: .75rem; }
.hero-scroll-hint { display: none; }
}
@media (max-width: 680px) and (max-height: 700px) {
.hero { min-height: auto; } /* short landscape phones: content-sized */
}/* Urdu prose: justified Nastaliq reads beautifully */
/* [dir="rtl"] p { text-align: justify } removed — body now covers every
language, and this rule outranked the label exclusions on the Urdu page. */
/* ════════════ CONTEXTUAL LAYER (time, memory, place) ════════════ */
/* 1 · Time-of-day hero grading (dawn/day/dusk/night) */
html[data-tod="dawn"] .hero-overlay { filter: sepia(.10) saturate(1.06) brightness(1.06); }
html[data-tod="dusk"] .hero-overlay { filter: sepia(.12) saturate(1.06) brightness(1.02); }
html[data-tod="night"] .hero-overlay { filter: saturate(.9) brightness(.9); }
html[data-tod="night"] .hero-title em { text-shadow: 0 0 26px rgba(255,207,1,.35); }
/* 2 · Snow caps settle on the UI while it snows */
.wx-snow .navbar.scrolled { box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 8px 30px rgba(0,0,0,.25); }
.wx-snow .qn-card, .wx-snow .news-card {
box-shadow: inset 0 3px 0 rgba(255,255,255,.55), var(--shd-sm);
}
.wx-snow .nt-bar { border-top-color: rgba(255,255,255,.4); }
/* 3 · Clock-tower time */
.now-clock { display: inline-flex; align-items: center; margin-right: 2px; }
.now-clock svg { display: block; filter: drop-shadow(0 1px 4px rgba(0,0,0,.4)); }
/* 5 · Reading-progress crest */
.read-crest {
position: fixed; left: 18px; bottom: 18px; z-index: 800;
width: 44px; height: 44px; pointer-events: none;
}
.read-crest img {
position: absolute; left: 10px; top: 10px; border-radius: 50%;
}
.read-crest.rc-done svg circle#rcRing { filter: drop-shadow(0 0 8px rgba(255,207,1,.7)); }
@media (max-width: 900px) { .read-crest { left: 12px; bottom: 12px; transform: scale(.82); transform-origin: bottom left; } }
@media print { .read-crest { display: none !important; } }
/* 8 · Palette command actions */
.so-action a { border-left: 3px solid var(--gold); }
.so-action .sor-section { color: var(--gold); }
.so-action .sor-title::before { content: '\2192 '; color: var(--gold); }
/* 9 · Continue-exploring strip */
.recent-strip { background: rgba(4,16,31,.97); border-bottom: 1px solid rgba(255,255,255,.06); }
.recent-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 28px; }
.recent-chip {
font-size: var(--fs-xs); /* was 11.8px (issue 6) */ color: rgba(244,239,228,.85); text-decoration: none;
border: 1px solid rgba(255,255,255,.18); border-radius: var(--rad-pill); padding: 5px 14px;
transition: border-color .25s, color .25s, background .25s;
}
.recent-chip:hover { border-color: var(--gold); color: var(--gold); background: rgba(255,207,1,.08); }
/* 4 · Prospectus flipbook */
.flipbook { max-width: 380px; margin: 4px 0 26px; perspective: 1400px; }
.fb-stage { position: relative; aspect-ratio: 380 / 488; }
.fb-stage img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px 10px 10px 4px; }
.fb-base { position: absolute; inset: 0; box-shadow: var(--shd-lg); }
.fb-leaf {
position: absolute; inset: 0; transform-origin: left center;
transition: transform .8s cubic-bezier(.35,.1,.25,1);
transform-style: preserve-3d; backface-visibility: hidden;
box-shadow: 6px 0 18px rgba(4,16,31,.25);
}
.fb-leaf.turned { transform: rotateY(-178deg); }
.fb-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.fb-ctrl .btn { padding: 8px 16px; }
@media (prefers-reduced-motion: reduce) { .fb-leaf { transition: none; } }
/* ── News: collapsed abstract + read-more expand ── */
.nf-more { display: none; }
.news-feature.nf-open .nf-more { display: block; }
@media (prefers-reduced-motion: no-preference) {
.news-feature.nf-open .nf-more { animation: nfReveal .45s ease both; }
@keyframes nfReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
.nf-toggle {
display: inline-flex; align-items: center; gap: 7px;
margin-top: 12px; padding: 8px 20px; cursor: pointer;
font: inherit; font-size: .82rem; font-weight: 700; letter-spacing: .02em;
color: var(--g-deep); background: rgba(255,207,1,.14);
border: 1.5px solid rgba(255,207,1,.5); border-radius: var(--rad-pill);
transition: background .25s, border-color .25s, transform .2s;
}
.nf-toggle:hover { background: rgba(255,207,1,.24); border-color: var(--gold); transform: translateY(-1px); }
.nf-toggle span { transition: transform .3s; }
.news-feature.nf-open .nf-toggle span { transform: translateY(2px); }
[data-theme="dark"] .nf-toggle { color: var(--ink); background: rgba(255,207,1,.1); }
/* ── Gallery: grouped "From the News" section ────── */
.ng-group { margin-bottom: 2.2rem; }
.ng-title { font-size: var(--fs-md); color: var(--g-deep); margin: 0 0 .8rem;
padding-bottom: .5rem; border-bottom: 2px solid rgba(255,207,1,.35); display: flex;
flex-wrap: wrap; align-items: baseline; gap: 10px; }
.ng-meta { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
color: var(--accent); }
[data-theme="dark"] .ng-title { color: var(--ink); }
.ng-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ng-grid .gallery-item { position: relative; aspect-ratio: 4/3; overflow: hidden;
border-radius: 10px; cursor: zoom-in; box-shadow: var(--shd-sm); }
.ng-grid .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .5s ease; }
.ng-grid .gallery-item:hover img { transform: scale(1.06); }
@media (max-width: 600px) { .ng-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); } }
/* ── Museum photographs ───────────────────────────────────────
The page carried no image at all, which is an odd thing for a page about a
museum. The lead sits inside the opening section; the other three reuse
.ng-grid and .gallery-item so they inherit the site's lightbox, keyboard
handling and neighbour preloading rather than growing a second set.
.ng-grid's own 150px minimum is meant for dense news strips — three views
of one room want to be read, not scanned. */
.museum-gallery { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 20px 0 4px; }
/* A plain captioned photograph inside a text section. Named for what it is
rather than for the first page that wanted one — the hospital needed the
same thing a day later, and .mg-lead ("museum gallery lead") on a hospital
page is how stylesheets start lying about themselves.
No forced aspect-ratio: these are documentary photographs and they arrive
at whatever shape the camera was held. Cropping them to a house ratio buys
tidiness and costs content. */
.page-figure { margin: 22px 0 4px; }
.page-figure img {
display: block; width: 100%; height: auto;
border-radius: var(--rad-m); box-shadow: var(--shd-sm);
}
.page-figure-narrow { max-width: 480px; }
.page-figure-cap { margin-top: 8px; font-size: .78rem; color: var(--txt-mid); line-height: 1.6; }
@media (max-width: 600px) { .museum-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
/* ── Gallery: progressive load fade-in on scroll ── */
.g-lazy { opacity: 0; transition: opacity .55s ease; background: var(--cream-d, #e8e2d4); }
.g-lazy.g-in { opacity: 1; }
[data-theme="dark"] .g-lazy { background: rgba(255,255,255,.05); }
@media (prefers-reduced-motion: reduce) { .g-lazy { transition: none; } }
/* ── News cards: gentle up-and-down float on hover ── */
@media (prefers-reduced-motion: no-preference) {
.news-card, .news-feature { transition: box-shadow .3s ease; }
.news-card:hover, .news-feature:hover { animation: newsFloat 1.8s ease-in-out infinite; }
@keyframes newsFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
}
@media (prefers-reduced-motion: reduce) {
.news-card:hover, .news-feature:hover { transform: translateY(-4px); }
}
/* ── Dark mode: every selected/active control turns gold ── */
[data-theme="dark"] .na-filter.active,
[data-theme="dark"] .mc-btn.active,
[data-theme="dark"] .sf-filter-btn.active,
[data-theme="dark"] .gf-btn.active,
[data-theme="dark"] .nf-fbtn.active,
[data-theme="dark"] .fac-tab.is-active,
[data-theme="dark"] .fac-tab[aria-selected="true"],
/* The decade dial had no base rule at all — only a dark-theme rule for the
current button. The rest were unstyled UA buttons: a white background that
dark theme never touches, under text that switches with the theme. Measured
1.32:1. Styled here on the .yr-pill idiom the rest of the site uses. */
.decade-dial { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.decade-dial > span { font-size: .78rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--txt-mid); margin-right: 4px; }
.decade-dial button {
display: inline-flex; align-items: center; min-height: 32px;
padding: 6px 16px; border-radius: var(--rad-pill); font: inherit;
font-size: .82rem; font-weight: 600; cursor: pointer;
background: rgba(11,31,66,.06); color: var(--ink);
border: 1px solid rgba(11,31,66,.14); transition: var(--tr-fast);
}
.decade-dial button:hover { background: var(--ink); color: var(--gold-lt); border-color: var(--ink); }
[data-theme="dark"] .decade-dial button { background: rgba(255,255,255,.07);
color: var(--txt); border-color: rgba(255,255,255,.15); }
[data-theme="dark"] .decade-dial button:hover { background: var(--gold); color: var(--g-dark); border-color: var(--gold); }
/* The selected decade. This used to be painted inline from the script, so the
state had to be restated here when the inline styles came out. Both themes
get it explicitly rather than leaning on the shared "active pill" block
further down — the dial reads aria-current, not .active. */
.decade-dial button[aria-current] { background: var(--gold); color: #04101f; border-color: var(--gold); font-weight: 700; }
[data-theme="dark"] .decade-dial button[aria-current] { background: var(--gold); color: #04101f; border-color: var(--gold); }
[data-theme="dark"] .decade-dial button[aria-current],
[data-theme="dark"] .yr-pill.active {
background: var(--gold) !important;
color: var(--g-dark) !important;
border-color: var(--gold) !important;
box-shadow: 0 4px 16px rgba(255,207,1,.28) !important;
}
[data-theme="dark"] .nm-link.active { color: var(--gold-lt); }
/* ════════════ REFINEMENT LAYER (cohesion & craft) ════════════ */
/* 1 · Fluid type scale + consistent section rhythm */
:root { --section-py: clamp(3rem, 6vw, 5.5rem); --flow: clamp(.9rem, 1.6vw, 1.15rem); }
.section { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.content-section + .content-section { margin-top: clamp(2rem, 4vw, 3.25rem); }
.content-section > p { line-height: 1.8; }
/* 6 · Numbered editorial eyebrows (auto index per page) */
.page-body .inner-main, body.home-fx { counter-reset: seceye; }
.sec-eye::before, .sec-label::before {
counter-increment: seceye;
content: counter(seceye, decimal-leading-zero);
/* The number is a structural marker, so it is allowed to carry weight of
its own rather than being a faded prefix inside the label. It was set
at the label's own 12px and .6 opacity, which left it almost invisible
— the auditor was right, and it is generated by a CSS counter, which is
why searching the markup for "01" finds nothing. */
/* The base rule paints ::before as a 22px × 1px gold dash. When the
homepage swapped its content for a counter, those geometry properties
stayed behind — so the number was being rendered inside a box one
pixel tall, with a gold background behind it. That, not the opacity,
is why "01" was invisible. Reset the dash geometry before styling it
as text. */
display: inline; width: auto; height: auto; background: none; flex-shrink: 1;
font-size: 1.45em; font-weight: 800; opacity: 1;
color: var(--accent); font-variant-numeric: tabular-nums;
line-height: 1; /* .sec-eye already supplies a 12px flex gap */
}
[data-theme="dark"] .sec-eye::before, [data-theme="dark"] .sec-label::before { color: var(--gold); }
.breadcrumb .sec-eye::before, .now-label::before, .nf-flabel::before { content: none; }
/* 2 · Motion budget — soften stacked motion a touch */
.qn-card { transition: transform .35s ease, box-shadow .3s ease; }
@media (prefers-reduced-motion: no-preference) {
.news-card:hover, .news-feature:hover { animation-duration: 2.4s; } /* calmer bob */
}
/* 3 · Pine-ridge divider — dark footer rises as mountains into the section above */
.ftr-ridge { color: var(--g-dark); line-height: 0; margin-top: -59px; position: relative; z-index: 2; pointer-events: none; }
.ftr-ridge svg { display: block; filter: drop-shadow(0 -1px 0 rgba(255,207,1,.12)); }
@media print { .ftr-ridge { display: none; } }
/* 4 · Duotone portrait hover (alumni, head boys, principals) */
.na-card img, .ab-card img, .hb-card img, .pr-card img, .as-photo img {
filter: grayscale(.35) contrast(1.05) sepia(.12) hue-rotate(175deg) saturate(.85);
transition: filter .5s ease, transform .5s ease;
}
.na-card:hover img, .ab-card:hover img, .hb-card:hover img,
.pr-card:hover img, .as-photo:hover img {
filter: none; transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) { .na-card img, .ab-card img, .hb-card img, .pr-card img, .as-photo img { transition: filter .3s ease; } }/* 7 · Consistent gold focus ring for keyboard users */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
a:focus-visible, button:focus-visible, .gf-btn:focus-visible, .nf-fbtn:focus-visible { outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
/* 8 · Skeleton shimmer while gallery images load */
@media (prefers-reduced-motion: no-preference) {
.g-lazy:not(.g-in) {
background-image: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
background-size: 200% 100%;
animation: gShimmer 1.3s linear infinite;
}
[data-theme="dark"] .g-lazy:not(.g-in) {
background-image: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.08) 50%, transparent 80%);
}
@keyframes gShimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }
}
/* ════════════ RESPONSIVE HARDENING (desktop + mobile edges) ════════════ */
/* A long e-mail or URL must still not overflow its container — but nothing
else may break. `break-word` only splits a word that cannot fit on a line
of its own; `anywhere`, which was here before, splits ordinary words to
help justification fill a line, which is exactly what we do not want. */
p, li, td, dd, .news-card p, .gj-card p, .hre-info {
overflow-wrap: break-word; word-break: normal;
}
/* Grid and flex children default to min-width:auto, which resolves to their
min-content width — the longest word. `overflow-wrap: anywhere`, which used
to be on all prose, hid that by making min-content a single character; with
it gone the containers can no longer shrink and two pages gained a 16–18px
overflow at 320px. min-width:0 is the actual fix, and it breaks no words. */
.inner-layout > *, .page-hero > *, .societies-grid > * { min-width: 0; }
.fee-table-wrap, .table-wrap { max-width: 100%; }
/* Addresses and bare URLs are the genuine exception: they have no spaces. */
.fc-mail, .fc-mail a, a[href^="mailto:"], a[href^="http"], code {
overflow-wrap: anywhere;
}
.faculty-table td, .cmp-table td { word-break: normal; overflow-wrap: break-word; }
/* Belt-and-braces: nothing may cause horizontal scroll */
img, video, iframe, svg, canvas { max-width: 100%; }
.con, .page-body, main { min-width: 0; }
/* Ultra-wide desktops: cap reading measure so prose lines stay comfortable */
@media (min-width: 1600px) {
.con { max-width: 1760px; }
}
/* Small phones (≤380px): tighten gutters + type so content isn't cramped */
@media (max-width: 380px) {
.con { padding-left: 14px; padding-right: 14px; }
.hero-title { font-size: clamp(1.7rem, 9vw, 2.1rem); }
.sec-head h2, .content-section > h2 { font-size: 1.35rem; }
.news-filter .nf-flabel { min-width: 100%; }
.nf-fbtn { padding: 6px 12px; font-size: var(--fs-xs); }
.qn-card, .news-card { padding: 20px; }
}
/* Landscape phones: let tall sections size to content instead of forcing 100svh */
@media (max-height: 480px) and (orientation: landscape) {
.hero { min-height: auto; padding: 84px 0 40px; }
.gj-card { top: 68px; }
}
/* ── School-page faculty table: photo/avatar column ── */
.faculty-table .ftp-h { width: 52px; }
.faculty-table td.ftp-cell { width: 52px; padding-right: 6px; }
.ftp-av {
width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: inline-flex;
align-items: center; justify-content: center; vertical-align: middle;
border: 1.5px solid var(--gold); box-shadow: var(--shd-xs); background: var(--g-deep);
}
.ftp-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ftp-av.ftp-i { color: var(--gold); font-size: .75rem; font-weight: 700; letter-spacing: .02em; border-color: rgba(255,207,1,.4); }
@media (max-width: 600px) { .faculty-table .ftp-h, .faculty-table td.ftp-cell { width: 40px; } .ftp-av { width: 30px; height: 30px; } }
/* ════════════ EDITORIAL ENHANCEMENTS ════════════ */
/* 1 · Data tables: zebra rows, sticky header, numeral alignment */
.faculty-table, .fee-table, .cmp-table { border-collapse: separate; border-spacing: 0; }
.faculty-table thead th, .fee-table thead th {
position: sticky; top: 62px; z-index: 3;
background: var(--navy-deep); color: var(--gold);
box-shadow: inset 0 -1px 0 rgba(255,207,1,.35);
}
.faculty-table tbody tr:nth-child(even) td,
.fee-table tbody tr:nth-child(even) td { background: rgba(11,31,66,.035); }
[data-theme="dark"] .faculty-table tbody tr:nth-child(even) td,
[data-theme="dark"] .fee-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.035); }
.faculty-table tbody tr:hover td, .fee-table tbody tr:hover td { background: rgba(255,207,1,.10); }
.fee-table td:not(:first-child), .cmp-table td:not(:first-child) { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .faculty-table thead th, .fee-table thead th { position: static; } }
/* 2 · Drop caps — opening paragraph of heritage pages */
body[data-dropcap] .inner-main > .content-section:first-of-type > p:first-of-type::first-letter {
float: left; font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
font-size: 3.6em; line-height: .82; padding: .06em .12em 0 0;
color: var(--accent); text-shadow: 0 2px 10px rgba(255,207,1,.18);
}
[data-theme="dark"] body[data-dropcap] .inner-main > .content-section:first-of-type > p:first-of-type::first-letter { color: var(--gold); }
/* 3 · Designed pull-quotes */
.page-body blockquote {
position: relative; margin: 1.8rem 0; padding: 1.4rem 1.6rem 1.4rem 3.6rem;
border-left: 3px solid var(--gold); border-radius: 0 var(--rad-m) var(--rad-m) 0;
background: linear-gradient(100deg, rgba(255,207,1,.07), transparent 70%);
}
.page-body blockquote::before {
content: '\201C'; position: absolute; left: .5rem; top: -.2rem;
font-family: 'Playfair Display', serif; font-size: 4.2rem; line-height: 1;
color: var(--gold); opacity: .5;
}
.page-body blockquote p { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.08rem; color: var(--ink); }
/* 4 · Unified form controls */
.page-body input[type="text"], .page-body input[type="email"], .page-body input[type="tel"],
.page-body input[type="date"], .page-body input[type="search"], .page-body select, .page-body textarea {
width: 100%; font: inherit; font-size: .92rem; padding: 12px 16px;
border-radius: 10px; border: 1.5px solid rgba(11,31,66,.18);
background: var(--surface); color: var(--txt);
transition: border-color .25s, box-shadow .25s;
}
.page-body input:focus, .page-body select:focus, .page-body textarea:focus {
outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,207,1,.15);
}
[data-theme="dark"] .page-body input, [data-theme="dark"] .page-body select,
[data-theme="dark"] .page-body textarea { border-color: rgba(255,255,255,.16); }
/* 5 · Themed scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--accent) rgba(11,31,66,.08); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(11,31,66,.06); }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--gold), var(--gold-dk));
border-radius: 99px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); background-clip: padding-box; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
/* 7 · Alternating section bands for page rhythm.
These were a 2.8% navy wash on every page; they now carry the page's own
category colour, which is what gives each part of the site its character
when you scroll. Body text was checked on all seven tints — the weakest
pairing is 15.4:1. */
.page-body .inner-main > .content-section:nth-of-type(even) {
background: var(--accent-tint); border-radius: var(--rad-l);
padding: clamp(18px,2.4vw,30px) clamp(18px,2.6vw,34px);
}
[data-theme="dark"] .page-body .inner-main > .content-section:nth-of-type(even) { background: var(--accent-dtint); }
/* 8 · Magazine cover shelf */
.mag-shelf { display: flex; gap: 26px; align-items: flex-end; flex-wrap: wrap; padding: 24px 24px 0;
background: linear-gradient(180deg, transparent, rgba(11,31,66,.05)); border-radius: var(--rad-l); }
.mag-shelf .shelf-item { text-align: center; text-decoration: none; transition: transform .35s ease; }
.mag-shelf .shelf-item:hover { transform: translateY(-8px) rotate(-1deg); }
.mag-shelf img { width: 130px; height: auto; border-radius: 3px 7px 7px 3px;
box-shadow: 8px 12px 26px rgba(4,16,31,.34), inset 3px 0 6px rgba(0,0,0,.2); }
.mag-shelf .shelf-label { display: block; margin-top: 10px; font-size: .75rem; font-weight: 700; color: var(--ink); }
.mag-shelf-base { height: 12px; border-radius: 0 0 var(--rad-l) var(--rad-l);
background: linear-gradient(180deg, var(--gold-dk), rgba(11,31,66,.25)); margin-top: -4px; box-shadow: var(--shd-sm); }
/* 10 · Alumni portrait cards with era ribbon */
.na-card { position: relative; overflow: hidden; }
.na-card[data-era]::after {
content: attr(data-era); position: absolute; top: 14px; right: -34px;
transform: rotate(38deg); background: var(--gold); color: var(--g-dark);
font-size: .75rem; font-weight: 800; letter-spacing: .1em; padding: 4px 38px;
box-shadow: var(--shd-xs);
}
/* 9 · News story hero banner */
/* 6 · Designed 404 */
.err-crest { display: block; margin: 0 auto 18px; filter: drop-shadow(0 6px 22px rgba(0,0,0,.35)); }
.error-title em { font-style: italic; color: var(--gold); }
.err-search { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 520px; margin: 20px auto 0; }
.err-search input { flex: 1; min-width: 220px; font: inherit; padding: 12px 18px; border-radius: var(--rad-pill);
border: 1.5px solid rgba(11,31,66,.2); background: var(--surface); color: var(--txt); }
.err-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,207,1,.15); }
[data-theme="dark"] .err-search input { border-color: rgba(255,255,255,.18); }
/* ════════ Principals page — refinement ════════ */
/* Era filter bar */
.prl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.prl-fbtn {
font: inherit; font-size: .8rem; padding: 7px 16px; border-radius: var(--rad-pill); cursor: pointer;
border: 1.5px solid rgba(11,31,66,.18); background: var(--surface); color: var(--txt);
transition: all .22s;
}
.prl-fbtn:hover { border-color: var(--gold); }
.prl-fbtn.active { background: var(--gold); border-color: var(--gold); color: var(--g-dark); font-weight: 700; }
[data-theme="dark"] .prl-fbtn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); }
[data-theme="dark"] .prl-fbtn.active { background: var(--gold); color: var(--g-dark); }
.prl-count { font-size: .76rem; color: var(--txt-lt); margin-left: auto; }
/* Refined portrait cards: framed, duotone-at-rest, gold rule under the name */
.prl-card {
background: var(--surface);
border: 1px solid rgba(11,31,66,.09);
border-radius: var(--rad-m);
box-shadow: var(--shd-sm);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.prl-card:hover { transform: translateY(-6px); box-shadow: var(--shd-lg); border-color: rgba(255,207,1,.4); }
.prl-photo::after { /* subtle vignette so faces sit forward */
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(4,16,31,.42), transparent 55%);
opacity: .85; transition: opacity .35s;
}
.prl-card:hover .prl-photo::after { opacity: .5; }
.prl-photo img { filter: grayscale(.28) contrast(1.04); }
.prl-card:hover .prl-photo img { filter: none; }
.prl-info { position: relative; }
.prl-info::before { /* gold hairline over the name */
content: ''; position: absolute; top: 0; left: 16px; width: 26px; height: 2px;
background: var(--gold); border-radius: 2px; transition: width .35s ease;
}
.prl-card:hover .prl-info::before { width: 46px; }
.prl-info strong { font-family: 'Playfair Display', serif; font-size: .92rem; }
.prl-pos { font-size: .8rem; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
[data-theme="dark"] .prl-card { background: var(--surface); border-color: rgba(255,255,255,.1); }
/* Featured current principal — editorial framing */
.prl-featured {
position: relative; border-radius: var(--rad-xl); overflow: hidden;
background: linear-gradient(120deg, rgba(11,31,66,.05), rgba(255,207,1,.07));
border: 1px solid rgba(255,207,1,.28); padding: clamp(18px,2.4vw,28px);
box-shadow: var(--shd-md);
}
.prl-feat-photo img { border-radius: var(--rad-m); box-shadow: var(--shd-lg); }
.prl-feat-num {
font-family: 'Playfair Display', serif; font-weight: 900;
background: var(--gold); color: var(--g-dark);
}
.prl-feat-body h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
[data-theme="dark"] .prl-featured { background: linear-gradient(120deg, rgba(255,255,255,.04), rgba(255,207,1,.06)); }
/* Wider gallery on big screens now that the site is full-width */
@media (min-width: 1400px) { .prl-gallery { grid-template-columns: repeat(5, 1fr); } }
/* Principals: guarantee readable text in both themes (must follow refinement block) */
.prl-info strong { color: var(--g-deep); }
.prl-feat-body h3 { color: var(--g-deep); }
[data-theme="dark"] .prl-info strong,
[data-theme="dark"] .prl-feat-body h3,
[data-theme="dark"] .era-title { color: var(--ink); }
[data-theme="dark"] .prl-info span { color: var(--gold-lt); }
[data-theme="dark"] .prl-period { color: var(--gold-lt); }
[data-theme="dark"] .prl-count { color: var(--txt-mid); }
/* Odometer: layout must win over element defaults (e.g. .sbs-num display:block) */
.od { display: inline-flex !important; align-items: baseline; line-height: 1; overflow: hidden; }
.od .od-col { display: inline-block !important; height: 1em; overflow: hidden; line-height: 1; }
.od .od-strip { display: block !important; }
.od .od-strip b { display: block; height: 1em; line-height: 1; font-weight: inherit; }
/* ════ Principals: portraits fit their cards precisely ════ */
/* Cards stretch to equal height and stack cleanly */
.prl-gallery { align-items: stretch; }
.prl-card { display: flex; flex-direction: column; height: 100%; }
/* Frame matches the source portrait ratio (232×300) so nothing is cropped away */
.prl-photo {
aspect-ratio: 232 / 300;
background: linear-gradient(160deg, rgba(11,31,66,.10), rgba(11,31,66,.04));
flex: none;
}
.prl-photo img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 18%; /* bias to the face, not the chest */
}
[data-theme="dark"] .prl-photo { background: rgba(255,255,255,.05); }
/* Name block fills the remaining height so every card ends level */
.prl-info {
flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px;
padding: 14px 16px 16px;
}
.prl-info strong { line-height: 1.28; }
.prl-info span { line-height: 1.35; }
.prl-info .pe-badge { margin-top: auto; align-self: flex-start; }
/* Featured portrait: show the whole frame, no awkward crop */
.prl-feat-photo { position: relative; }
.prl-feat-photo img {
width: 100%; height: auto; max-height: 420px;
object-fit: cover; object-position: center 15%;
display: block;
}
@media (max-width: 768px) { .prl-feat-photo img { max-height: 340px; } }
/* News: photo count caption above the gallery inside Read more */
.nf-galcap { font-size: .78rem; font-weight: 600; letter-spacing: .02em;
color: var(--accent); margin: .2rem 0 .6rem; }
[data-theme="dark"] .nf-galcap { color: var(--gold-lt); }
/* Button hints that photos are inside */
.nf-toggle { gap: 8px; }
/* News galleries: full photograph visible, letterboxed rather than cropped */
.news-gallery .gallery-item { background: linear-gradient(160deg, rgba(11,31,66,.10), rgba(11,31,66,.04)); }
.news-gallery .gallery-item img { object-fit: contain !important; }
[data-theme="dark"] .news-gallery .gallery-item { background: rgba(255,255,255,.05); }
/* ════ Social page: three live channel embeds ════ */
.sf-embeds { margin-top: 1.6rem; }
.sf-embed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; margin-top: 1.2rem; align-items: start; }
.sf-embed-card { background: var(--surface); border: 1px solid rgba(11,31,66,.1); border-radius: var(--rad-l);
padding: 16px; box-shadow: var(--shd-sm); display: flex; flex-direction: column; }
[data-theme="dark"] .sf-embed-card { background: var(--surface); border-color: rgba(255,255,255,.1); }
.sf-embed-head { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: .84rem;
letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.sf-embed-ic { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center;
justify-content: center; color: #fff; flex: none; }
.sf-ic-fb { background: #1877f2; } .sf-ic-yt { background: #ff0000; } .sf-ic-li { background: #0a66c2; }
.sf-embed-link { margin-top: 12px; align-self: flex-start; font-size: .82rem; font-weight: 700; color: var(--accent); }
.sf-embed-link:hover { color: var(--gold); }
/* YouTube */
.sf-yt-wrap { position: relative; aspect-ratio: 16/9; border-radius: var(--rad-m); overflow: hidden; background: #000; }
.sf-yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* LinkedIn card (LinkedIn blocks feed embeds) */
.sf-li-wrap { flex: 1; display: flex; }
.sf-li-card { flex: 1; text-align: center; padding: 26px 18px; border-radius: var(--rad-m);
background: linear-gradient(160deg, rgba(10,102,194,.08), rgba(11,31,66,.04)); border: 1px dashed rgba(10,102,194,.35); }
.sf-li-card img { margin: 0 auto 12px; display: block; }
.sf-li-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--ink); margin-bottom: 4px; }
.sf-li-meta { font-size: .78rem; color: var(--txt-mid); margin-bottom: 10px; }
.sf-li-note { font-size: .76rem; color: var(--txt-lt); line-height: 1.6; margin-bottom: 14px; }
[data-theme="dark"] .sf-li-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); }
/* Facebook frame inside its card */
.sf-embed-card .fb-embed-wrap { min-height: 640px; }
.sf-embed-card .fb-embed-frame { height: 640px; min-height: 640px; }
@media (max-width: 640px) { .sf-embed-card .fb-embed-wrap, .sf-embed-card .fb-embed-frame { min-height: 560px; height: 560px; } }
/* LinkedIn-styled live panel */
.sf-li-feed { flex: 1; border-radius: var(--rad-m); border: 1px solid rgba(10,102,194,.25);
background: var(--surface); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sf-li-top { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(11,31,66,.1); }
.sf-li-top img { border-radius: 50%; flex: none; }
.sf-li-post { border-radius: 10px; padding: 11px 13px; background: rgba(10,102,194,.05); border: 1px solid rgba(10,102,194,.12); }
.sf-li-post p { font-size: .84rem; color: var(--txt-mid); line-height: 1.62; margin: 0 0 6px; }
.sf-li-when { font-size: .75rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0a66c2; }
.sf-li-post a { font-size: .78rem; font-weight: 700; color: var(--accent); }
.sf-li-follow { display: inline-block; text-align: center; margin-top: 2px; padding: 10px 18px;
border-radius: var(--rad-pill); background: #0a66c2; color: #fff !important; font-weight: 700; font-size: .82rem; }
.sf-li-follow:hover { background: #084d92; }
[data-theme="dark"] .sf-li-feed { border-color: rgba(255,255,255,.14); }
[data-theme="dark"] .sf-li-post { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .sf-li-top { border-bottom-color: rgba(255,255,255,.1); }
/* Facebook embed: loader must never cover a working frame */
.fb-embed-wrap { position: relative; }
.fb-embed-frame { position: relative; z-index: 2; background: transparent; }
.fb-embed-loading { z-index: 1; }
/* ════ "Continue Exploring" — centred on the page ════ */
.related-pages { text-align: center; }
.related-pages .con { display: flex; flex-direction: column; align-items: center; }
.rp-title { text-align: center; width: 100%; display: flex; align-items: center;
justify-content: center; gap: 14px; }
.rp-title::before, .rp-title::after { /* short gold rules either side */
content: ''; height: 1px; width: clamp(24px, 6vw, 70px);
background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.rp-grid {
width: 100%; max-width: 1100px; margin: 0 auto;
justify-content: center; justify-items: stretch;
}
/* keep the row visually centred when a page has fewer than the full set */
.rp-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (min-width: 1100px) { .rp-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 260px)); } }
.rp-card { text-align: left; }
/* ════ Weather widget — six-day forecast strip ════ */
.ww-forecast { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cream-d); }
/* Provenance line: the time the reading is for and the height it was
computed at, so the figures can be checked rather than just believed. */
.ww-stamp {
margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--cream-d);
font-size: var(--fs-xs); color: var(--txt-lt); text-align: center;
letter-spacing: .02em;
}
[data-theme="dark"] .ww-stamp { color: rgba(255,255,255,.55); border-top-color: rgba(255,255,255,.08); }
.ww-fc-head {
font-size: .75rem; font-weight: 800; letter-spacing: .16em;
text-transform: uppercase; color: var(--txt-lt); margin-bottom: 10px;
}
/* The six-day forecast is the tallest thing in the panel and pushes the
term strip and the whole page down. Each day is now a compact row of
short columns rather than a stacked block, which halves the height
without losing a single reading (issue 12). */
.wf-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.wf-day {
text-align: center; padding: 7px 4px 6px; border-radius: var(--rad-s);
background: var(--cream); border: 1px solid transparent;
transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.wf-day:hover { transform: translateY(-3px); box-shadow: var(--shd-sm); background: var(--white); }
.wf-day.is-today { background: rgba(197,164,88,.14); border-color: rgba(197,164,88,.42); }
.wf-name {
font-size: .75rem; font-weight: 800; letter-spacing: .09em;
text-transform: uppercase; color: var(--navy-ink);
}
.wf-date { font-size: .75rem; color: var(--txt-lt); margin-top: 1px; }
.wf-icon { font-size: 1.45rem; line-height: 1; margin: 6px 0 5px; }
.wf-temps { display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.wf-hi { font-size: .92rem; font-weight: 700; color: var(--g-deep); }
.wf-lo { font-size: .75rem; color: var(--txt-lt); }
.wf-pop { font-size: .75rem; color: var(--txt-mid); margin-top: 3px; }
.wf-pop-none { opacity: .35; }
.ww-sun {
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
margin-top: 11px; font-size: .75rem; color: var(--txt-lt);
}
[data-theme="dark"] .ww-forecast { border-top-color: rgba(255,255,255,.10); }
[data-theme="dark"] .wf-day { background: rgba(255,255,255,.05); }
[data-theme="dark"] .wf-day:hover { background: rgba(255,255,255,.09); }
[data-theme="dark"] .wf-day.is-today { background: rgba(197,164,88,.18); border-color: rgba(197,164,88,.42); }
[data-theme="dark"] .wf-name { color: var(--gold); }
[data-theme="dark"] .wf-hi { color: var(--txt); }
[data-theme="dark"] .wf-date, [data-theme="dark"] .wf-lo,
[data-theme="dark"] .ww-sun, [data-theme="dark"] .ww-fc-head { color: var(--txt-mid); }
[data-theme="dark"] .wf-pop { color: var(--txt-mid); }
@media (max-width: 720px) {
.wf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ww-details { margin-left: 0; width: 100%; justify-content: space-between; }
}
@media (max-width: 400px) { .wf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .wf-day:hover { transform: none; } }
/* ══════════════════════════════════════════════════════════════
ACADEMIC CALENDAR 2026 — month-by-month
Design borrowed from the college's printed calendar: azulejo
tile bands, a periwinkle weekday bar, an airy ruled day grid
and a right-aligned "date : activity" list.
══════════════════════════════════════════════════════════════ */
:root {
--cal-bar: #5676b2; /* weekday header bar — white on it now 4.52:1 */
--cal-rule: #8fa4cd; /* grid hairlines */
--cal-navy: #1f3667;
}
[data-theme="dark"] { --cal-bar: #3f5a94; }
/* category accents */
.cat-term { --cal-c: #1f3667; }
.cat-exam { --cal-c: #8c2f39; }
.cat-sport { --cal-c: #1d6b52; }
.cat-culture { --cal-c: #7a4b9c; }
.cat-ceremony { --cal-c: #996f09; }
.cat-national { --cal-c: #0f5f7a; }
.cat-religious { --cal-c: #4a5a2f; }
.cat-observance { --cal-c: #6b6357; }
.cat-admin { --cal-c: #4a5568; }
.cat-trip { --cal-c: #a0522d; }
[data-theme="dark"] .cat-term { --cal-c: #8fa9de; }
[data-theme="dark"] .cat-exam { --cal-c: #e08a94; }
[data-theme="dark"] .cat-sport { --cal-c: #6fc4a2; }
[data-theme="dark"] .cat-culture { --cal-c: #c3a1e0; }
[data-theme="dark"] .cat-ceremony { --cal-c: #e8c46a; }
[data-theme="dark"] .cat-national { --cal-c: #6fc0d8; }
[data-theme="dark"] .cat-religious { --cal-c: #b3c58a; }
[data-theme="dark"] .cat-observance { --cal-c: #c2b8a8; }
[data-theme="dark"] .cat-admin { --cal-c: #a3b1c6; }
[data-theme="dark"] .cat-trip { --cal-c: #dda078; }
/* ── downloads ── */
.cal-dl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cal-dl-btn { font-size: .84rem; padding: 9px 20px; }
/* the pair sitting under the month calendar */
.cal-dl-after {
align-items: center; justify-content: center; gap: 12px;
margin: 26px 0 4px; padding: 20px 24px; border-radius: 16px;
background: var(--cream); border: 1px solid rgba(11,31,66,.09);
}
.cal-dl-lead {
width: 100%; text-align: center; margin: 0 0 4px;
font-size: .75rem; font-weight: 800; letter-spacing: .18em;
text-transform: uppercase; color: var(--txt-lt);
}
[data-theme="dark"] .cal-dl-after { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
@media (max-width: 560px) {
.cal-dl-after { flex-direction: column; align-items: stretch; padding: 18px; }
.cal-dl-after .cal-dl-btn { text-align: center; }
}
/* ── holidays & breaks strip ── */
.cal-breaks {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
margin: 22px 0 8px; padding: 14px 20px; border-radius: 14px;
background: var(--cream); border: 1px solid rgba(11,31,66,.09);
}
.cal-brk-label {
font-size: .75rem; font-weight: 800; letter-spacing: .16em;
text-transform: uppercase; color: var(--txt-lt);
}
.cal-brk { font-size: .84rem; color: var(--txt-mid); }
.cal-brk b { color: var(--ink); font-weight: 700; }
[data-theme="dark"] .cal-breaks { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
/* ── month switcher: clickable scrolling strip ── */
.cal-switch {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center; gap: 8px; margin: 20px 0 14px;
position: sticky; top: 72px; z-index: 20;
padding: 8px 10px; border-radius: 16px;
background: var(--surface);
background: color-mix(in srgb, var(--surface) 90%, transparent);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(11,31,66,.10); box-shadow: var(--shd-xs);
}
[data-theme="dark"] .cal-switch { border-color: rgba(255,255,255,.10); }
.cal-sw-arrow {
width: 34px; height: 34px; flex-shrink: 0; cursor: pointer;
font-size: 1.25rem; line-height: 1; color: var(--ink);
background: var(--cream); border: 1px solid rgba(11,31,66,.12);
border-radius: 50%; transition: var(--tr);
}
.cal-sw-arrow:hover:not(:disabled) { background: var(--cal-navy); color: #fff; border-color: var(--cal-navy); }
.cal-sw-arrow:disabled { opacity: .3; cursor: default; }
[data-theme="dark"] .cal-sw-arrow { background: rgba(255,255,255,.06); color: var(--ink); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .cal-sw-arrow:hover:not(:disabled) { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.cal-strip {
display: flex; gap: 7px; overflow-x: auto; scroll-behavior: smooth;
scroll-snap-type: x proximity; padding: 2px; margin: 0;
scrollbar-width: thin; -ms-overflow-style: none;
}
.cal-strip::-webkit-scrollbar { height: 5px; }
.cal-strip::-webkit-scrollbar-thumb { background: rgba(11,31,66,.2); border-radius: 99px; }
.cal-strip.is-dragging { scroll-behavior: auto; cursor: grabbing; user-select: none; }
.cal-chip {
display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
scroll-snap-align: center; cursor: pointer;
font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
padding: 8px 13px; border-radius: var(--rad-pill);
color: var(--txt-mid); background: var(--cream);
border: 1px solid rgba(11,31,66,.10); transition: var(--tr);
}
.cal-chip:hover { background: var(--cal-navy); color: #fff; border-color: var(--cal-navy); }
.cal-chip-n {
display: inline-flex; align-items: center; justify-content: center;
min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--rad-pill);
font-size: .75rem; letter-spacing: 0;
background: rgba(11,31,66,.09); color: var(--txt-lt);
}
.cal-chip:hover .cal-chip-n { background: rgba(255,255,255,.2); color: #fff; }
.cal-chip.is-active {
background: var(--cal-navy); color: #fff; border-color: var(--cal-navy);
box-shadow: 0 4px 14px rgba(31,54,103,.28);
}
.cal-chip.is-active .cal-chip-n { background: var(--gold); color: #1a1206; }
/* The resting chip: pale cream on gold measured 2.2:1. */
[data-theme="dark"] .cal-chip-n { background: rgba(255,255,255,.16); color: #f4efe4; }
.cal-chip.is-now:not(.is-active) { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(197,164,88,.5); }
.cal-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[data-theme="dark"] .cal-chip { background: rgba(255,255,255,.06); color: var(--txt-mid); border-color: rgba(255,255,255,.10); }
[data-theme="dark"] .cal-chip:hover,
[data-theme="dark"] .cal-chip.is-active { background: var(--gold); color: #1a1206; border-color: var(--gold); }
/* rgba(0,0,0,.25) over gold left cream on #bf9b01 — 2.2:1. Solid ink reads. */
[data-theme="dark"] .cal-chip.is-active .cal-chip-n { background: rgba(0,0,0,.55); color: #fff6d8; }
[data-theme="dark"] .cal-chip-n { background: rgba(255,255,255,.12); color: var(--txt-mid); }
/* one month at a time (only once the switcher is live) */
.cal-months.is-switch .cal-month { display: none; }
.cal-months.is-switch .cal-month.is-active { display: block; animation: calFade .28s ease both; }
@keyframes calFade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.cal-month:focus { outline: none; }
.cal-month:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* previous / next month buttons under the card */
.cal-step {
display: flex; justify-content: space-between; gap: 10px;
margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(11,31,66,.10);
}
[data-theme="dark"] .cal-step { border-top-color: rgba(255,255,255,.10); }
.cal-step-btn {
cursor: pointer; font-size: .75rem; font-weight: 800; letter-spacing: .09em;
text-transform: uppercase; padding: 9px 16px; border-radius: var(--rad-pill);
color: var(--txt-mid); background: transparent;
border: 1px solid rgba(11,31,66,.14); transition: var(--tr);
}
.cal-step-btn:hover { background: var(--cal-navy); color: #fff; border-color: var(--cal-navy); }
[data-theme="dark"] .cal-step-btn { border-color: rgba(255,255,255,.14); }
[data-theme="dark"] .cal-step-btn:hover { background: var(--gold); color: #1a1206; border-color: var(--gold); }
/* ── category legend ── */
.cal-legend-keys { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; }
.cal-key { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; color: var(--txt-mid); }
.cal-sw { width: 11px; height: 11px; border-radius: 3px; background: var(--cal-c, var(--cal-navy)); flex-shrink: 0; }
/* ── month card ── */
.cal-months { display: grid; gap: 26px; margin: 26px 0 8px; }
.cal-month {
position: relative; overflow: hidden;
border-radius: 18px; background: var(--surface);
border: 1px solid rgba(11,31,66,.10); box-shadow: var(--shd-sm);
padding: 22px 24px 24px 40px;
scroll-margin-top: 140px;
}
/* azulejo tile band down the left edge, as on the printed page */
.cal-month::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 22px;
background: url('images/Calanders/Calendar%202026/web/tile-band.jpg') repeat-y center / 22px auto;
opacity: .92;
}
.cal-month.is-current { border-color: rgba(197,164,88,.55); box-shadow: 0 8px 34px rgba(197,164,88,.16); }
[data-theme="dark"] .cal-month { border-color: rgba(255,255,255,.10); }
.cal-m-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; flex-wrap: wrap; border-bottom: 1px solid rgba(11,31,66,.10); padding-bottom: 10px;
}
[data-theme="dark"] .cal-m-head { border-bottom-color: rgba(255,255,255,.10); }
.cal-m-title {
font-family: 'Playfair Display', serif; font-size: clamp(1.4rem, 2.6vw, 1.9rem);
color: var(--ink); margin: 0; letter-spacing: .01em;
}
.cal-m-title em { font-style: normal; color: var(--accent); font-size: .62em; margin-left: 4px; }
[data-theme="dark"] .cal-m-title em { color: var(--gold); }
.cal-m-count {
font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
color: var(--txt-lt); white-space: nowrap;
}
.cal-m-note { font-size: .86rem; color: var(--txt-mid); margin: 10px 0 16px; text-align: left; }
.cal-m-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
/* polaroid-style month photograph */
.cal-m-photo { margin: 0; background: #fff; padding: 9px 9px 12px; border-radius: 6px;
box-shadow: 0 6px 20px rgba(11,31,66,.16); transform: rotate(-1.1deg); }
.cal-m-photo img { display: block; width: 100%; height: auto; aspect-ratio: 620/912; object-fit: cover; border-radius: 2px; }
.cal-m-photo figcaption { font-size: .75rem; color: #5b6472; margin-top: 8px; line-height: 1.45; text-align: center; }
/* "view printed calendar" control in the month header */
.cal-m-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-m-view {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
padding: 8px 14px; border-radius: var(--rad-pill); white-space: nowrap;
color: var(--cal-navy); background: var(--cream);
border: 1px solid rgba(31,54,103,.18); transition: var(--tr);
}
.cal-m-view .ic { width: 14px; height: 14px; }
.cal-m-view:hover { background: var(--cal-navy); color: #fff; border-color: var(--cal-navy); }
.cal-m-view:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[data-theme="dark"] .cal-m-view { background: rgba(255,255,255,.06); color: var(--ink); border-color: rgba(255,255,255,.14); }
[data-theme="dark"] .cal-m-view:hover { background: var(--gold); color: #1a1206; border-color: var(--gold); }
/* printed-calendar viewer */
.cal-lb {
position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center;
justify-content: center; padding: 3vh 3vw; background: rgba(4,16,31,.9);
backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
animation: calLbIn .22s ease both;
}
@keyframes calLbIn { from { opacity: 0 } to { opacity: 1 } }
.cal-lb-panel { max-width: 1280px; width: 100%; }
.cal-lb-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.cal-lb-img {
display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain;
border-radius: 8px; box-shadow: 0 24px 70px rgba(0,0,0,.55);
transition: opacity .2s ease;
}
.cal-lb-img.is-loading { opacity: .25; }
.cal-lb-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 46px; height: 46px; cursor: pointer; font-size: 1.7rem; line-height: 1;
color: #fff; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.28);
border-radius: 50%; transition: var(--tr);
}
.cal-lb-nav:hover { background: rgba(0,0,0,.75); }
.cal-lb-prev { left: 10px; }
.cal-lb-next { right: 10px; }
.cal-lb-bar {
display: flex; align-items: center; justify-content: center; gap: 8px 22px;
flex-wrap: wrap; margin-top: 14px;
}
.cal-lb-cap {
margin: 0; color: #fff; font-family: 'Playfair Display', serif; font-size: 1.05rem;
}
.cal-lb-count {
font-size: .75rem; font-weight: 800; letter-spacing: .14em;
color: rgba(255,255,255,.6);
}
.cal-lb-full {
font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--gold); text-decoration: none; padding: 6px 14px; border-radius: var(--rad-pill);
border: 1px solid rgba(197,164,88,.5); transition: var(--tr);
}
.cal-lb-full:hover { background: var(--gold); color: #1a1206; }
.cal-lb-x {
position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; cursor: pointer;
font-size: 1.7rem; line-height: 1; color: #fff; background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
}
.cal-lb-x:hover { background: rgba(255,255,255,.24); }
@media (max-width: 560px) {
.cal-lb { padding: 2vh 2vw; }
.cal-lb-nav { width: 38px; height: 38px; font-size: 1.35rem; }
.cal-m-view { font-size: .75rem; padding: 7px 11px; }
}
/* day grid */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px 0; }
.cal-dow {
background: var(--cal-bar); color: #fff; text-align: center;
font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
padding: 8px 0;
}
.cal-dow:first-of-type { border-radius: 6px 0 0 6px; }
.cal-dow:nth-of-type(7) { border-radius: 0 6px 6px 0; }
.cal-day {
position: relative; text-align: center; padding: 10px 0 12px;
border-bottom: 1px solid rgba(31,54,103,.14); color: var(--txt-mid); font-size: .92rem;
}
.cal-day b { font-weight: 500; }
.cal-day.cal-we { color: var(--txt-lt); }
.cal-day.cal-blank { border-bottom-color: transparent; }
.cal-has { cursor: default; }
.cal-has b { font-weight: 800; color: var(--ink); }
.cal-has::after {
content: ''; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
width: 5px; height: 5px; border-radius: 50%; background: var(--cal-c, var(--gold-dk));
}
.cal-key-day::after { width: 7px; height: 7px; box-shadow: 0 0 0 2px rgba(197,164,88,.35); }
.cal-day.is-today { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 6px; }
.cal-day.is-lit, .cal-has:hover { background: rgba(197,164,88,.16); border-radius: 6px; }
.cal-has:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-radius: 6px; }
[data-theme="dark"] .cal-day { border-bottom-color: rgba(255,255,255,.10); }
/* activities list — the printed "date : activity" ledger */
.cal-acts-head {
font-size: .75rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
color: var(--cal-navy); margin: 20px 0 10px; padding-bottom: 6px;
border-bottom: 1px solid rgba(31,54,103,.22); display: inline-block;
}
[data-theme="dark"] .cal-acts-head { color: var(--gold); border-bottom-color: rgba(197,164,88,.35); }
.cal-acts { list-style: none; margin: 0; padding: 0; }
.cal-act {
display: grid; grid-template-columns: 62px 12px minmax(0, 1fr);
align-items: baseline; padding: 5px 6px; border-radius: 6px;
font-size: .87rem; color: var(--txt-main); transition: background .2s ease;
}
.cal-act-date { text-align: right; font-weight: 700; font-size: .78rem; color: var(--cal-c, var(--cal-navy)); white-space: nowrap; }
.cal-act-sep { text-align: center; color: var(--txt-lt); }
.cal-act-text { text-align: left; line-height: 1.5; }
.cal-act.is-lit { background: rgba(197,164,88,.16); }
.cal-act:hover { background: rgba(11,31,66,.04); }
[data-theme="dark"] .cal-act:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .cal-act-date { color: var(--cal-c, var(--gold)); }
.cal-acts-none { font-size: .86rem; color: var(--txt-lt); font-style: italic; }
/* ── responsive ── */
@media (max-width: 900px) {
.cal-m-body { grid-template-columns: 1fr; }
.cal-m-photo { max-width: 240px; margin: 0 auto; transform: none; }
.cal-month { padding: 20px 18px 22px 32px; }
.cal-switch { top: 64px; }
}
@media (max-width: 560px) {
.cal-day { font-size: .82rem; padding: 8px 0 11px; }
.cal-dow { font-size: .75rem; letter-spacing: .04em; }
.cal-act { grid-template-columns: 52px 10px minmax(0, 1fr); font-size: .82rem; }
.cal-act-date { font-size: .75rem; }
.cal-m-title { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
.cal-months.is-switch .cal-month.is-active, .cal-lb { animation: none; }
.cal-strip { scroll-behavior: auto; }
.cal-m-photo { transform: none; }
}
/* print: the browser print view of this page */
@media print {
.cal-switch, .cal-step, .cal-dl, .cal-m-view { display: none !important; }
.cal-months.is-switch .cal-month { display: block !important; animation: none !important; }
.cal-month { break-inside: avoid; page-break-inside: avoid; box-shadow: none; }
}
/* ══════════════════════════════════════════════════════════════
FACULTY — one complete record per line
Each row carries photo · name · department · qualification · email
══════════════════════════════════════════════════════════════ */
.fac-list {
margin-top: 1.1rem; border-radius: 14px; overflow: hidden;
border: 1px solid rgba(11,31,66,.10); background: var(--surface);
box-shadow: var(--shd-xs);
}
[data-theme="dark"] .fac-list { border-color: rgba(255,255,255,.10); }
/* column template shared by the header and every row */
.fac-row-head,
.fac-row {
display: grid;
grid-template-columns: 44px minmax(190px, 1.5fr) minmax(110px, .85fr) minmax(170px, 1.5fr) minmax(190px, 1.6fr);
align-items: center; gap: 14px;
padding: 9px 16px;
}
.fac-row-head {
background: var(--cal-navy, #1f3667); color: #fff;
font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
padding-top: 10px; padding-bottom: 10px;
}
[data-theme="dark"] .fac-row-head { background: rgba(255,255,255,.08); color: var(--ink); }
.fac-row {
border-top: 1px solid rgba(11,31,66,.07);
transition: background .18s ease;
}
.fac-row:nth-of-type(odd) { background: rgba(11,31,66,.018); }
.fac-row:hover { background: rgba(197,164,88,.12); }
[data-theme="dark"] .fac-row { border-top-color: rgba(255,255,255,.07); }
[data-theme="dark"] .fac-row:nth-of-type(odd) { background: rgba(255,255,255,.025); }
[data-theme="dark"] .fac-row:hover { background: rgba(197,164,88,.14); }
/* the row versions of the old card fields — all on one line, no wrapping */
.fac-row .fc-photo {
width: 44px; height: 44px; margin: 0; border-radius: 50%;
flex-shrink: 0; overflow: hidden;
}
.fac-row .fc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.fac-row .fc-photo.fc-noimg::after { font-size: .75rem; }
.fac-row .fc-name,
.fac-row .fc-dept,
.fac-row .fc-qual,
.fac-row .fc-mail {
margin: 0; text-align: left; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fac-row .fc-name { font-size: .88rem; font-weight: 700; color: var(--ink); }
.fac-row .fc-dept { font-size: .78rem; color: var(--accent); font-weight: 600; }
.fac-row .fc-qual { font-size: .78rem; color: var(--txt-mid); }
.fac-row .fc-mail { font-size: .75rem; }
.fac-row .fc-mail a { color: var(--g-mid); word-break: normal; }
.fac-row .fc-mail a:hover { text-decoration: underline; }
[data-theme="dark"] .fac-row .fc-dept { color: var(--gold); }
[data-theme="dark"] .fac-row .fc-mail a { color: var(--gold-lt, #e8c46a); }
.fc-hod {
display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: var(--rad-pill);
font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
background: var(--gold); color: #1a1206; vertical-align: middle;
}
.fc-nomail a { color: var(--txt-lt); font-style: italic; }
.fc-nomail a:hover { color: var(--accent); }
/* hover reveals a full-width tooltip for any value the line had to clip */
.fac-row .fc-qual:hover, .fac-row .fc-mail:hover, .fac-row .fc-name:hover { overflow: visible; }
/* ── tablet: drop the department column (the heading above already names it) ── */
@media (max-width: 1000px) {
.fac-row-head, .fac-row { grid-template-columns: 44px minmax(150px, 1.4fr) minmax(150px, 1.4fr) minmax(160px, 1.5fr); }
.fac-row-head span:nth-child(3), .fac-row .fc-dept { display: none; }
}
/* ── phone: stack into a compact record, still one block per member ── */
@media (max-width: 680px) {
.fac-row-head { display: none; }
.fac-row {
grid-template-columns: 44px minmax(0, 1fr);
grid-template-areas: "photo name" "photo qual" "photo mail";
row-gap: 2px; padding: 12px 14px;
}
.fac-row .fc-photo { grid-area: photo; align-self: start; }
.fac-row .fc-name { grid-area: name; }
.fac-row .fc-qual { grid-area: qual; white-space: normal; }
.fac-row .fc-mail { grid-area: mail; white-space: normal; word-break: break-all; }
}
@media print {
.fac-list { border: 1px solid #999; box-shadow: none; }
.fac-row { break-inside: avoid; }
.fac-row .fc-qual, .fac-row .fc-mail { white-space: normal; }
}
/* ── now-strip term progress ── */
.now-progress {
display: block; width: 120px; height: 3px; margin-top: 4px;
border-radius: 99px; background: rgba(11,31,66,.14); overflow: hidden;
}
.now-progress i {
display: block; height: 100%; border-radius: 99px;
background: linear-gradient(to right, var(--gold-dk), var(--gold));
}
[data-theme="dark"] .now-progress { background: rgba(255,255,255,.14); }
/* ── Then & Now comparison ── */
.tn-frame {
position: relative; margin: 22px 0 30px; border-radius: 14px; overflow: hidden;
box-shadow: var(--shd-md); user-select: none;
}
.tn-frame img { display: block; width: 100%; height: auto; }
/* The caption is 34px of the frame's height, which is why .tn-range and
.tn-handle both stop short of it. The clip did not: it covered the whole
frame, so object-fit scaled the 'now' image to a box 34px taller than the
'then' image underneath and the two views no longer lined up across the
wipe. Matching the inset puts both layers on the same geometry. */
.tn-clip { position: absolute; inset: 0 0 34px 0; clip-path: inset(0 0 0 50%); }
.tn-clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tn-range {
position: absolute; inset: 0; width: 100%; height: calc(100% - 34px);
margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; -webkit-appearance: none;
}
.tn-handle {
position: absolute; top: 0; bottom: 34px; left: 50%; width: 3px; z-index: 2;
background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.5); pointer-events: none;
}
.tn-handle::after {
content: '\2194'; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: #fff; color: #0b1f42; font-size: 1.1rem; font-weight: 700;
border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.tn-tag {
position: absolute; top: 12px; z-index: 2; padding: 4px 12px; border-radius: var(--rad-pill);
font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
background: rgba(4,16,31,.72); color: #fff; pointer-events: none;
}
.tn-tag-then { left: 12px; }
.tn-tag-now { right: 12px; }
.tn-frame figcaption {
position: relative; padding: 8px 14px; font-size: .78rem; color: var(--txt-mid);
background: var(--surface); border-top: 1px solid rgba(11,31,66,.08); height: 34px;
display: flex; align-items: center;
}
[data-theme="dark"] .tn-frame figcaption { border-top-color: rgba(255,255,255,.1); }
.tn-range:focus-visible ~ .tn-handle::after { outline: 3px solid var(--gold); }
/* ── decade rail ── */
.decade-rail {
position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 40;
display: flex; flex-direction: column; gap: 4px;
padding: 8px 6px; border-radius: var(--rad-pill);
background: color-mix(in srgb, var(--surface) 88%, transparent);
background-color: var(--surface);
border: 1px solid rgba(11,31,66,.12); box-shadow: var(--shd-sm);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.decade-rail button {
width: 40px; height: 30px; border: 0; border-radius: var(--rad-pill); cursor: pointer;
font-size: .75rem; font-weight: 800; letter-spacing: .04em;
color: var(--txt-mid); background: transparent; transition: var(--tr);
}
.decade-rail button:hover { background: rgba(197,164,88,.18); color: var(--ink); }
.decade-rail button.is-on { background: var(--cal-navy, #1f3667); color: #fff; }
[data-theme="dark"] .decade-rail { border-color: rgba(255,255,255,.14); }
[data-theme="dark"] .decade-rail button.is-on { background: var(--gold); color: #1a1206; }
@media (max-width: 900px) { .decade-rail { display: none; } }
@media print { .decade-rail { display: none !important; } }
/* ── house quiz ── */
.hq-box {
margin-top: 16px; padding: 22px 24px; border-radius: 16px;
background: var(--cream); border: 1px solid rgba(11,31,66,.09);
}
[data-theme="dark"] .hq-box { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
.hq-prompt { font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.hq-q button {
display: block; width: 100%; text-align: left; cursor: pointer;
margin: 0 0 8px; padding: 11px 16px; border-radius: 10px;
font: inherit; font-size: .9rem; color: var(--txt-main);
background: var(--surface); border: 1px solid rgba(11,31,66,.12);
transition: var(--tr);
}
.hq-q button:hover { border-color: var(--gold); background: rgba(197,164,88,.12); transform: translateX(4px); }
[data-theme="dark"] .hq-q button { border-color: rgba(255,255,255,.12); }
.hq-card {
border-radius: 14px; padding: 24px; text-align: center;
background: var(--surface); border-top: 6px solid var(--hq);
box-shadow: var(--shd-md); animation: calLbIn .3s ease both;
}
.hq-house { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--hq); margin: 0 0 4px; }
.hq-motto { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-lt); margin: 0 0 12px; }
.hq-text { font-size: .92rem; color: var(--txt-mid); max-width: 480px; margin: 0 auto 16px; }
.hq-again {
cursor: pointer; padding: 9px 20px; border-radius: var(--rad-pill); font: inherit;
font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--ink); background: transparent; border: 1px solid rgba(11,31,66,.2);
}
.hq-again:hover { background: var(--hq); color: #fff; border-color: var(--hq); }
[data-theme="dark"] .hq-again { border-color: rgba(255,255,255,.2); }
/* ── Urdu pointer chip ── */
.ur-note {
margin: 0 0 6px; font-size: .95rem;
}
.ur-note a {
display: inline-block; padding: 7px 16px; border-radius: var(--rad-pill);
background: rgba(197,164,88,.14); border: 1px solid rgba(197,164,88,.4);
color: var(--ink); text-decoration: none; transition: var(--tr);
}
.ur-note a:hover { background: var(--gold); color: #1a1206; }
/* ── 8a. container queries: cards adapt to their container, not the viewport ── */
.faculty-card, .prl-card, .hb-np-card, .obit-card, .cal-exam-card { container-type: inline-size; }
@container (max-width: 260px) {
.fac-row { grid-template-columns: 44px minmax(0, 1fr); }
.prl-info strong { font-size: .82rem; }
.hb-np-text strong { font-size: .78rem; }
}
/* ── 8b. scroll-driven animations where supported; the JS observer remains the fallback ── */
/* NOTE: a scroll-driven `.ri` animation was tried here and removed.
`animation: riIn both` overrides the `.ri.vis { opacity: 1 }` set by the
IntersectionObserver reveal — animations beat normal declarations — so any
element whose view() timeline did not resolve stayed at the from-state
(opacity 0) and its content, images included, never appeared. The JS
reveal in main.js remains the single mechanism. */
/* ── 10. forced-colors + prefers-contrast ── */
@media (forced-colors: active) {
.hb-np-card, .prl-card, .faculty-card, .obit-card, .cal-month, .fac-row {
border: 1px solid CanvasText;
}
.decade-rail button.is-on, .cal-chip.is-active, .fac-tab.is-active {
forced-color-adjust: none; background: Highlight; color: HighlightText;
}
.now-progress i { background: Highlight; }
.tn-handle, .tn-handle::after { forced-color-adjust: none; }
}
@media (prefers-contrast: more) {
:root { --txt-mid: var(--txt-main, #16181d); --txt-lt: #3c4350; }
[data-theme="dark"] { --txt-mid: #e4e0d8; --txt-lt: #cfc9bd; }
.hb-np-card:hover, .prl-card:hover .prl-info { background-image: none; }
}
/* ══════════════════════════════════════════════════════════════
ADMISSIONS ELIGIBILITY CHECKER (mobile-first)
══════════════════════════════════════════════════════════════ */
.elig-box {
margin-top: 16px; padding: 20px; border-radius: 16px;
background: var(--cream); border: 1px solid rgba(11,31,66,.09);
}
[data-theme="dark"] .elig-box { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
.elig-row { display: flex; flex-direction: column; gap: 10px; }
.elig-row label {
font-size: .75rem; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--txt-lt);
}
.elig-row input[type="date"] {
font: inherit; font-size: 1rem; /* 16px stops iOS zooming on focus */
min-height: 48px; padding: 10px 14px; width: 100%;
border-radius: 10px; border: 1.5px solid rgba(11,31,66,.18);
background: var(--surface); color: var(--txt-main);
}
.elig-row input[type="date"]:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,207,1,.15); }
[data-theme="dark"] .elig-row input[type="date"] { border-color: rgba(255,255,255,.18); }
.elig-row .btn-primary { min-height: 48px; width: 100%; }
.elig-out { margin-top: 16px; }
.elig-hit {
padding: 18px; border-radius: 12px; background: var(--surface);
border: 1px solid rgba(197,164,88,.4); border-left: 5px solid var(--gold);
}
.elig-age { font-size: .8rem; color: var(--txt-lt); margin: 0 0 6px; }
.elig-cls {
font-family: 'Playfair Display', serif; font-size: 1.45rem; color: var(--ink); margin: 0 0 12px;
line-height: 1.2;
}
.elig-cls span { display: block; font-family: 'Inter', sans-serif; font-size: .82rem; color: var(--accent); font-weight: 600; }
.elig-hit ul { list-style: none; padding: 0; margin: 0 0 14px; }
.elig-hit li { font-size: .88rem; color: var(--txt-mid); padding: 5px 0; border-bottom: 1px dashed rgba(11,31,66,.1); }
.elig-hit li strong { color: var(--ink); }
[data-theme="dark"] .elig-hit li { border-bottom-color: rgba(255,255,255,.1); }
.elig-links { font-size: .84rem; margin: 0; }
.elig-miss {
margin: 0; padding: 16px 18px; border-radius: 12px; font-size: .9rem; color: var(--txt-mid);
background: var(--surface); border: 1px solid rgba(11,31,66,.12); border-left: 5px solid var(--txt-lt);
}
[data-theme="dark"] .elig-miss { border-color: rgba(255,255,255,.12); }
@media (min-width: 620px) {
.elig-row { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
.elig-row label { width: 100%; }
.elig-row input[type="date"] { width: auto; flex: 1 1 220px; }
.elig-row .btn-primary { width: auto; flex: 0 0 auto; }
}
/* ══════════════════════════════════════════════════════════════
MOBILE PASS — small-screen behaviour for the newest components
══════════════════════════════════════════════════════════════ */
/* iOS: never let a focused field zoom the page; never flash a grey tap box */
@media (max-width: 768px) {
input, select, textarea, button { font-size: max(16px, 1rem); }
html { -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: rgba(197,164,88,.25); }
}
/* comfortable touch targets */
@media (pointer: coarse) {
.sb-nav-list a { padding: 11px 8px; }
.ur-note a { padding: 11px 18px; }
.nf-fbtn, .cal-chip, .fac-tab, .prl-fbtn { min-height: 40px; }
.hq-q button { padding: 14px 16px; }
.cal-day, .cal-has { min-height: 40px; }
}
/* Then & Now: let a vertical swipe scroll the page, horizontal drag the slider */
/* the frame owns touch gestures: vertical scrolls the page, horizontal
drags the divider (decided in JS), so the slider works on a phone */
.tn-frame { touch-action: pan-y; }
.tn-range { touch-action: pan-y; }
@media (pointer: coarse) {
/* on touch the invisible range would swallow taps before the frame
sees them, so it steps aside and keyboard users still reach it */
.tn-range { pointer-events: none; }
.tn-frame { cursor: ew-resize; }
.tn-handle { width: 4px; }
.tn-handle::after { width: 44px; height: 44px; font-size: 1.15rem; }
}
@media (max-width: 640px) {
.tn-frame { margin: 16px -4px 24px; border-radius: 10px; }
.tn-handle::after { width: 34px; height: 34px; font-size: .95rem; }
.tn-tag { font-size: .75rem; padding: 3px 9px; top: 8px; }
.tn-tag-then { left: 8px; } .tn-tag-now { right: 8px; }
.tn-frame figcaption { font-size: .75rem; padding: 7px 10px; }
}
/* house quiz */
@media (max-width: 560px) {
.hq-box { padding: 16px 14px; }
.hq-prompt { font-size: .95rem; }
.hq-q button { font-size: .86rem; padding: 13px 14px; }
.hq-q button:hover { transform: none; } /* no hover nudge on touch */
.hq-card { padding: 20px 16px; }
.hq-house { font-size: 1.3rem; }
}
/* term progress bar sits comfortably in the narrow now-strip */
@media (max-width: 560px) { .now-progress { width: 92px; } }
/* long words in Urdu / English chips must not force a sideways scroll */
.ur-note a { max-width: 100%; overflow-wrap: anywhere; }
/* full-height sections: use the small viewport unit so mobile browser chrome
does not push content under the address bar */
.error-section { min-height: 100vh; min-height: 100svh; }
/* nothing may exceed the viewport width on a phone */
@media (max-width: 768px) {
.con, .inner-layout, .page-body { max-width: 100%; }
img, video, iframe, table, pre { max-width: 100%; }
.ac-table-wrap, .fee-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* save-data / slow connections: drop the decorative layers */
@media (prefers-reduced-data: reduce) {
.hero-video, .particles, .wx-canvas { display: none !important; }
.qnc-slides { display: none; }
}
/* ══════════════════════════════════════════════════════════════
Alumni registration — photograph field and consent
══════════════════════════════════════════════════════════════ */
.og-photo-field input[type="file"] {
width: 100%; font: inherit; font-size: .9rem; padding: 12px;
border-radius: 10px; border: 1.5px dashed rgba(11,31,66,.22);
background: var(--surface); color: var(--txt-mid); cursor: pointer;
}
.og-photo-field input[type="file"]::file-selector-button {
font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
margin-right: 12px; padding: 8px 14px; border-radius: var(--rad-pill);
border: 0; background: var(--g-deep, #0b1f42); color: #fff;
}
[data-theme="dark"] .og-photo-field input[type="file"] { border-color: rgba(255,255,255,.22); }
/* ══════════════════════════════════════════════════════════════════════
ALUMNI REGISTRATION FORM
Built from the site's own vocabulary rather than a new one: Playfair for
the section headings, the gold pill for the numbers, --rad-* for every
corner, the glass card it already sits in, and — for the house — the four
real house colours the homepage badges and the Head Boys roll use.
══════════════════════════════════════════════════════════════════════ */
.alr-time {
display: inline-flex; align-items: center; gap: 8px;
font-size: var(--fs-sm); font-weight: 600; color: var(--accent);
background: rgba(255,207,1,.12); border: 1px solid rgba(197,164,88,.4);
border-radius: var(--rad-pill); padding: 6px 16px; margin-top: 4px;
}
.alr-time::before { content: '\2713'; font-weight: 800; }
[data-theme="dark"] .alr-time { color: var(--gold); background: rgba(255,207,1,.1); }
/* ── the six-step rail ─────────────────────────────────────────────── */
.alr-rail {
display: flex; flex-wrap: wrap; gap: 6px;
list-style: none; margin: 1.5rem 0 0; padding: 0;
counter-reset: none;
}
.alr-rail a {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px 7px 8px; border-radius: var(--rad-pill);
text-decoration: none; font-size: var(--fs-xs); font-weight: 600;
color: var(--txt-mid); background: var(--cream);
border: 1px solid rgba(11,31,66,.08);
transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.alr-rail a:hover, .alr-rail a:focus-visible {
color: var(--g-deep); border-color: rgba(197,164,88,.6);
background: rgba(255,207,1,.12); transform: translateY(-1px);
}
.alr-rail-n {
flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--rad-pill);
display: inline-flex; align-items: center; justify-content: center;
font-size: .75rem; font-weight: 800;
background: var(--white); color: var(--g-deep);
border: 1px solid rgba(11,31,66,.14);
transition: background .25s, color .25s, border-color .25s;
}
.alr-rail a:hover .alr-rail-n { background: var(--gold); border-color: var(--gold); color: #1a1206; }
.alr-rail li.is-here a { background: var(--g-deep); border-color: var(--g-deep); color: #fff; }
.alr-rail li.is-here .alr-rail-n { background: var(--gold); border-color: var(--gold); color: #1a1206; }
[data-theme="dark"] .alr-rail a { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: var(--txt); }
[data-theme="dark"] .alr-rail-n { background: rgba(255,255,255,.08); color: var(--txt); border-color: rgba(255,255,255,.14); }
@media (max-width: 700px) { .alr-rail-t { display: none; } .alr-rail a { padding: 7px 8px; } }
/* ── the card and its sections ─────────────────────────────────────── */
.alr-card { padding: 8px 28px 28px; }
.alr-set {
border: 0; padding: 22px 0 4px; margin: 0;
border-top: 1px solid rgba(11,31,66,.08);
scroll-margin-top: 96px; /* the rail links land clear of the navbar */
}
.alr-set:first-of-type { border-top: 0; padding-top: 14px; }
[data-theme="dark"] .alr-set { border-top-color: rgba(255,255,255,.09); }
.alr-legend {
display: flex; align-items: center; gap: 12px; width: 100%;
font-family: 'Playfair Display', Georgia, serif;
font-size: var(--fs-lg); font-weight: 700; color: var(--g-deep);
padding: 0; margin-bottom: 18px;
}
[data-theme="dark"] .alr-legend { color: var(--txt); }
.alr-num {
flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--rad-pill);
display: inline-flex; align-items: center; justify-content: center;
font-family: 'Inter', sans-serif; font-size: var(--fs-xs); font-weight: 800;
background: linear-gradient(145deg, var(--gold) 0%, var(--gold-dk) 100%);
color: #1a1206; box-shadow: 0 2px 8px rgba(197,164,88,.35);
}
.alr-req {
font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--accent); background: rgba(255,207,1,.16);
border-radius: var(--rad-pill); padding: 2px 8px; margin-left: 6px; vertical-align: 1px;
}
[data-theme="dark"] .alr-req { color: var(--gold); background: rgba(255,207,1,.12); }
.alr-help { font-size: var(--fs-sm); color: var(--txt-mid); line-height: 1.7; margin: -8px 0 16px; }
[data-theme="dark"] .alr-help { color: rgba(255,255,255,.7); }
/* ── the four houses, in their own colours ─────────────────────────── */
.alr-houses { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.alr-houses > legend {
font-size: .75rem; font-weight: 700; color: var(--g-deep);
letter-spacing: .06em; text-transform: uppercase; padding: 0; margin-bottom: 8px;
}
[data-theme="dark"] .alr-houses > legend { color: var(--txt); }
.alr-house {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
padding: 9px 15px 9px 11px; min-height: 42px;
border-radius: var(--rad-pill); font-size: var(--fs-sm); color: var(--txt-mid);
background: var(--white); border: 1.5px solid var(--cream-d);
transition: border-color .22s, background .22s, color .22s, box-shadow .22s;
}
.alr-house input { position: absolute; opacity: 0; width: 0; height: 0; }
.h-wightwick { --alr-h: 181, 28, 28; }
.h-walker { --alr-h: 26, 107, 60; }
.h-peake { --alr-h: 212, 168, 0; }
.h-wright { --alr-h: 18, 82, 160; }
.alr-house:hover { border-color: rgba(var(--alr-h, 197,164,88), .7); background: rgba(var(--alr-h, 197,164,88), .05); }
.alr-house:has(input:checked) {
border-color: rgb(var(--alr-h, 197,164,88));
background: rgba(var(--alr-h, 197,164,88), .12);
color: var(--g-deep); font-weight: 600;
box-shadow: 0 3px 12px rgba(var(--alr-h, 197,164,88), .22);
}
.alr-house:has(input:focus-visible) { outline: 2px solid var(--gold-dk); outline-offset: 2px; }
[data-theme="dark"] .alr-house { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--txt); }
[data-theme="dark"] .alr-house:has(input:checked) { color: #fff; }
/* ── Schools and house, side by side ───────────────────────────────
The two questions answer the same thing — where the visitor was —
so they share a row instead of stacking. The house is picked by its
crest, which is how an Old Gallian actually recognises it; the
colour dot it replaces carried the same information less clearly.
------------------------------------------------------------------ */
.alr-sh {
display: grid; grid-template-columns: 1fr 1fr;
gap: 20px 26px; align-items: start; margin: 0 0 18px;
}
.alr-sh > .alr-checks { margin: 0; align-content: start; }
/* the fieldset itself stops being the flex container: the legend needs to
sit on its own line above the grid of crests */
.alr-sh > .alr-houses { margin: 0; display: block; }
.alr-hgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.alr-hgrid > .alr-house {
display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
gap: 13px; padding: 11px 16px; text-align: left;
border-radius: var(--rad-m); min-height: 0;
}
/* 52px on screen; the file is 112px so it stays crisp on a 2x display */
.alr-house-crest {
width: 52px; height: 52px; object-fit: contain; display: block; flex-shrink: 0;
opacity: .8; transition: opacity .22s ease, transform .22s ease;
}
.alr-house:hover .alr-house-crest { opacity: 1; }
.alr-house:has(input:checked) .alr-house-crest { opacity: 1; transform: scale(1.06); }
.alr-hgrid .alr-house-name { font-size: var(--fs-sm); line-height: 1.3; }
[data-theme="dark"] .alr-house-crest { opacity: .88; }
[data-theme="dark"] .alr-house:hover .alr-house-crest,
[data-theme="dark"] .alr-house:has(input:checked) .alr-house-crest { opacity: 1; }
/* ── checkbox groups: schools attended, ways to help ───────────────── */
.alr-checks { border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.alr-checks-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.alr-checks > legend {
font-size: .75rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--g-deep); padding: 0; margin-bottom: 8px;
}
[data-theme="dark"] .alr-checks > legend { color: var(--txt); }
.alr-chk {
display: flex; align-items: center; gap: 11px; cursor: pointer;
font-size: var(--fs-sm); line-height: 1.5; color: var(--txt-mid);
padding: 11px 15px; min-height: 46px;
border-radius: var(--rad-m); background: var(--white);
border: 1.5px solid var(--cream-d);
transition: border-color .22s, background .22s, color .22s, box-shadow .22s;
}
.alr-chk input { position: absolute; opacity: 0; width: 0; height: 0; }
/* a drawn tick box, so the control matches the rest of the form */
.alr-chk::before {
content: ''; flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px;
border: 1.5px solid var(--cream-d); background: var(--white);
background-image: none; background-position: center; background-repeat: no-repeat; background-size: 12px;
transition: background .2s, border-color .2s;
}
.alr-chk:hover { border-color: rgba(197,164,88,.65); background: rgba(255,207,1,.05); }
.alr-chk:has(input:checked) {
border-color: var(--gold); background: rgba(255,207,1,.12);
color: var(--g-deep); font-weight: 600;
}
.alr-chk:has(input:checked)::before {
background-color: var(--gold); border-color: var(--gold);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1206' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.alr-chk:has(input:focus-visible) { outline: 2px solid var(--gold-dk); outline-offset: 2px; }
[data-theme="dark"] .alr-chk { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--txt); }
[data-theme="dark"] .alr-chk::before { background-color: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
[data-theme="dark"] .alr-chk:has(input:checked) { color: #fff; }
/* ── the photograph drop zone ──────────────────────────────────────── */
.alr-drop {
position: relative; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 3px;
padding: 26px 18px; text-align: center; cursor: pointer;
border: 1.5px dashed rgba(197,164,88,.55); border-radius: var(--rad-l);
background: rgba(255,207,1,.04); color: var(--txt-mid);
transition: border-color .25s, background .25s, transform .25s;
}
.alr-drop:hover, .alr-drop.is-over {
border-color: var(--gold); background: rgba(255,207,1,.12); transform: translateY(-2px);
}
.alr-drop:focus-within { outline: 2px solid var(--gold-dk); outline-offset: 3px; }
.alr-drop input[type="file"] {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; cursor: pointer;
}
.alr-drop-icon { color: var(--accent); margin-bottom: 4px; }
.alr-drop-main { font-size: var(--fs-sm); font-weight: 700; color: var(--g-deep); }
.alr-drop-sub { font-size: var(--fs-xs); color: var(--txt-lt); }
[data-theme="dark"] .alr-drop { background: rgba(255,207,1,.05); color: var(--txt); }
[data-theme="dark"] .alr-drop-main { color: var(--txt); }
/* ── consent block ─────────────────────────────────────────────────── */
.og-consent {
background: var(--cream); border-left: 3px solid var(--gold);
border-radius: 0 var(--rad-m) var(--rad-m) 0; padding: 16px 18px; margin-top: 6px;
}
[data-theme="dark"] .og-consent { background: rgba(255,255,255,.04); }
/* ── the form's own focus ring, gold like the rest of the site ─────── */
.alumni-form .cf-field input:focus,
.alumni-form .cf-field textarea:focus,
.alumni-form .cf-field select:focus {
border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,207,1,.18);
}
.alumni-form .cf-field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f42' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; background-size: 15px;
padding-right: 40px;
}
[data-theme="dark"] .alumni-form .cf-field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8eaee' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.alumni-form .cf-submit { width: 100%; margin-top: 8px; padding: 16px 30px; font-size: var(--fs-base); }
/* ── Admission notice badges ───────────────────────────────────────────
These were styled only inside the print stylesheet, so on screen
"Upcoming" and "Closed" rendered as plain body text and an open notice
looked identical to a closed one. */
.notice-badge {
display: inline-block; flex-shrink: 0;
font-size: var(--fs-xs); font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
padding: 4px 12px; border-radius: var(--rad-pill);
border: 1px solid transparent; white-space: nowrap;
}
.badge-upcoming { color: #1a6b3c; background: #e8f3ed; border-color: rgba(26,107,60,.28); }
.badge-closed { color: #5f6268; background: #f1f1f2; border-color: rgba(110,113,120,.28); }
[data-theme="dark"] .badge-upcoming { color: #5cc189; background: rgba(92,193,137,.12); border-color: rgba(92,193,137,.3); }
[data-theme="dark"] .badge-closed { color: #a8abb2; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
@media (forced-colors: active) { .notice-badge { border-color: CanvasText; } }
/* ── Mobile refinements for this session's new components ──────────── */
@media (max-width: 700px) {
/* the house badges sit two-up here; the corner arrow needs clearance
from the motto, and the crest can afford to be smaller */
.h4-card { padding: 22px 14px 26px; }
.h4-card::after { right: 10px; bottom: 8px; font-size: .9rem; }
.h4c-logo { width: 140px; height: 140px; }
.h4c-motto { font-size: 1.35rem; }
/* the header utility group: tighter, but every control stays 40px+ */
.nav-tools { margin-left: 8px; gap: 0; }
.nav-theme-btn, .nav-search-btn { min-width: 40px; min-height: 40px; }
/* the weather provenance line wraps rather than pushing the panel wide */
.ww-stamp { line-height: 1.6; }
/* sport cards on both sports pages */
.sport-card { padding: 20px 18px; }
.ms-card { padding: 18px 16px; }
}
@media (max-width: 420px) {
.h4c-logo { width: 116px; height: 116px; }
.h4c-motto { font-size: 1.2rem; }
.arc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
.alr-card { padding: 6px 18px 22px; }
.alr-legend { font-size: var(--fs-md); gap: 9px; }
.alr-num { width: 26px; height: 26px; }
.alr-checks-2 { grid-template-columns: 1fr; }
.alr-houses { gap: 6px; }
.alr-sh { grid-template-columns: 1fr; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.alr-rail a, .alr-drop, .alr-house, .alr-chk, .alr-house-crest { transition: none; }
.alr-house:has(input:checked) .alr-house-crest { transform: none; }
.alr-rail a:hover, .alr-drop:hover { transform: none; }
}
@media (forced-colors: active) {
.alr-chk, .alr-house, .alr-drop, .alr-rail a { border: 1px solid CanvasText; }
.alr-num, .alr-rail-n { border: 1px solid CanvasText; }
.alr-chk::before { border: 1px solid CanvasText; }
}
.og-hint { font-size: .78rem; color: var(--txt-lt); margin: 8px 0 0; line-height: 1.6; }
.og-preview { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.og-preview img {
width: 84px; height: 108px; object-fit: cover; border-radius: 8px;
box-shadow: var(--shd-sm); background: var(--cream-d);
}
.og-clear {
font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer;
padding: 8px 16px; border-radius: var(--rad-pill); color: var(--txt-mid);
background: transparent; border: 1px solid rgba(11,31,66,.18);
}
.og-clear:hover { border-color: #8c2f39; color: #8c2f39; }
.og-consent { margin-top: 6px; }
@media (max-width: 560px) {
.og-preview img { width: 70px; height: 90px; }
.og-photo-field input[type="file"] { font-size: 16px; }
}
/* ══════════════════════════════════════════════════════════════
MOBILE — belt-and-braces guards
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* any table that escaped a wrapper still scrolls rather than
stretching the page */
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table thead, table tbody { display: table; width: 100%; }
/* long unbroken strings (e-mail addresses, URLs) must wrap */
body { overflow-wrap: break-word; }
a[href^="mailto:"], a[href^="http"], code { overflow-wrap: anywhere; }
/* the tallest inline media never exceeds the screen */
.tn-frame, .cal-month, .fac-list, .hq-box, .elig-box { max-width: 100%; }
}
/* one page carries a deliberately wide comparison table */
@media (max-width: 700px) {
.cmp-table { font-size: .8rem; }
.cmp-table th, .cmp-table td { padding: 8px 10px; }
}
/* ── pull-quote inside a news feature ── */
.news-quote {
margin: 14px 0; padding: 14px 18px; border-left: 4px solid var(--gold);
background: var(--cream); border-radius: 0 10px 10px 0;
font-size: var(--fs-md); font-style: italic; color: var(--txt-main); line-height: 1.7;
}
.news-quote cite {
display: block; margin-top: 8px; font-style: normal; font-size: var(--fs-xs);
font-weight: 700; letter-spacing: .04em; color: var(--accent);
}
[data-theme="dark"] .news-quote { background: rgba(255,255,255,.04); }
[data-theme="dark"] .news-quote cite { color: var(--gold); }
@media (max-width: 560px) { .news-quote { padding: 12px 14px; font-size: var(--fs-base); } }
/* ══════════════════════════════════════════════════════════════
HOMEPAGE NEWS CARDS — hover shows the whole photograph
Cropped to a tidy band at rest; on hover the frame opens and the
picture switches to contain so the full shot is visible. Nothing
sits over it — no backdrop, no badge, no tint.
══════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
.news-card-img { transition: height .45s cubic-bezier(.22,1,.36,1), background-color .35s ease; }
.news-card:hover .news-card-img {
height: 250px;
background: var(--white); /* plain card surface behind the photo */
}
.news-card:hover .news-card-img img {
object-fit: contain;
transform: none;
animation: none; /* stop the slow ken-burns pan */
}
[data-theme="dark"] .news-card:hover .news-card-img { background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) {
.news-card-img { transition: none; }
}
/* ══════════════════════════════════════════════════════════════
HEADMASTERS & HEADMISTRESSES — the three school rolls
══════════════════════════════════════════════════════════════ */
.hm-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hm-jump a {
padding: 9px 18px; border-radius: var(--rad-pill); text-decoration: none;
font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--txt-mid); background: var(--cream); border: 1px solid rgba(11,31,66,.12);
transition: var(--tr);
}
.hm-jump a:hover { background: var(--g-deep); color: #fff; border-color: var(--g-deep); }
[data-theme="dark"] .hm-jump a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .hm-jump a:hover { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.hm-count {
display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: var(--rad-pill);
font-size: .75rem; font-weight: 700; letter-spacing: .06em;
background: rgba(197,164,88,.16); color: var(--accent);
}
[data-theme="dark"] .hm-count { color: var(--gold); }
.hm-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 18px; margin-top: 18px;
}
.hm-card {
background: var(--surface); border-radius: 14px; overflow: hidden;
border: 1px solid rgba(11,31,66,.10); box-shadow: var(--shd-xs);
transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
display: flex; flex-direction: column;
}
.hm-card:hover { transform: translateY(-4px); box-shadow: var(--shd-md); }
[data-theme="dark"] .hm-card { border-color: rgba(255,255,255,.10); }
.hm-card.is-current { border-color: rgba(197,164,88,.55); box-shadow: 0 6px 22px rgba(197,164,88,.18); }
.hm-photo { position: relative; aspect-ratio: 250/355; background: var(--cream-d); overflow: hidden; }
.hm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.hm-photo.hm-noimg::after {
content: 'No photograph'; position: absolute; inset: 0; display: flex;
align-items: center; justify-content: center; text-align: center;
font-size: .75rem; color: var(--txt-lt); background: var(--cream-d);
}
[data-theme="dark"] .hm-photo, [data-theme="dark"] .hm-photo.hm-noimg::after { background: rgba(255,255,255,.06); }
.hm-info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.hm-info strong { font-size: .88rem; line-height: 1.3; color: var(--ink); font-weight: 700; }
.hm-years { font-size: .76rem; color: var(--accent); font-weight: 600; }
[data-theme="dark"] .hm-years { color: var(--gold); }
.hm-now {
align-self: flex-start; margin-top: 4px; padding: 2px 10px; border-radius: var(--rad-pill);
font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
background: var(--gold); color: #1a1206;
}
/* Notable tenures — the four heads whose service defined a school. Carried
over when the separate Heads of Schools page was folded into this one. */
.hm-note {
background: var(--cream); border-left: 4px solid var(--gold);
border-radius: 0 12px 12px 0; padding: 18px 22px; margin-top: 16px;
}
.hm-note h3 {
font-family: 'Playfair Display', serif; font-size: 1.12rem;
color: var(--g-deep); margin: 0 0 2px;
}
.hm-note-role {
font-size: .76rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
}
.hm-note p:last-child { margin: 0; font-size: .92rem; line-height: 1.75; color: var(--txt-mid); }
[data-theme="dark"] .hm-note { background: rgba(255,255,255,.04); }
[data-theme="dark"] .hm-note h3 { color: var(--txt); }
[data-theme="dark"] .hm-note-role { color: var(--gold); }
@media (max-width: 560px) {
.hm-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hm-info strong { font-size: .82rem; }
.hm-years { font-size: .75rem; }
.hm-note { padding: 15px 17px; }
}
@media (prefers-reduced-motion: reduce) { .hm-card:hover { transform: none; } }
@media print { .hm-card, .hm-note { break-inside: avoid; box-shadow: none; } }
/* hero text carries its own legibility now that the scrim is lighter */
.hero-title, .hero-motto, .hero-sub, .hero-content .btn-outline {
text-shadow: 0 2px 18px rgba(9,9,9,.72), 0 1px 3px rgba(9,9,9,.6);
}
.hero-crest, .hero-logo { filter: drop-shadow(0 10px 30px rgba(0,0,0,.62)); }
/* ══════════════════════════════════════════════════════════════
HERO LIGHTNING — shown only while the live weather reports rain
A sheet flash lights the whole sky, with a brighter core at the
strike point. Two keyframe sets: a single stroke and a double.
══════════════════════════════════════════════════════════════ */
.hero-bolt {
position: absolute; inset: 0; z-index: 1; /* above video, below text */
pointer-events: none; opacity: 0;
--bx: 50%; --by: 18%; --peak: .6;
background:
radial-gradient(38% 30% at var(--bx) var(--by),
rgba(255,255,255,.95) 0%, rgba(214,232,255,.55) 28%, rgba(180,210,255,0) 70%),
linear-gradient(to bottom,
rgba(206,226,255,.55) 0%, rgba(206,226,255,.22) 38%, rgba(206,226,255,0) 72%);
mix-blend-mode: screen;
will-change: opacity;
}
.hero-bolt.is-lit { animation: boltFlash 1.15s cubic-bezier(.2,.9,.2,1) 1; }
.hero-bolt.is-lit.is-double { animation: boltFlashDouble 1.7s cubic-bezier(.2,.9,.2,1) 1; }
@keyframes boltFlash {
0% { opacity: 0; }
3% { opacity: var(--peak); } /* leader */
8% { opacity: calc(var(--peak) * .18); }
12% { opacity: var(--peak); } /* return stroke, brighter */
26% { opacity: calc(var(--peak) * .32); }
55% { opacity: calc(var(--peak) * .10); }
100% { opacity: 0; }
}
@keyframes boltFlashDouble {
0% { opacity: 0; }
2% { opacity: calc(var(--peak) * .85); }
6% { opacity: calc(var(--peak) * .12); }
10% { opacity: var(--peak); }
18% { opacity: calc(var(--peak) * .20); }
30% { opacity: calc(var(--peak) * .70); } /* second strike */
40% { opacity: calc(var(--peak) * .15); }
62% { opacity: calc(var(--peak) * .08); }
100% { opacity: 0; }
}
/* the crest catches the light a fraction later, as it would in life */
.hero-bolt.is-lit ~ .hero-content .hero-crest,
.hero-bolt.is-lit ~ .hero-content .hero-logo { animation: boltGlint 1.15s ease 1; }
@keyframes boltGlint {
0%, 100% { filter: drop-shadow(0 10px 30px rgba(0,0,0,.62)); }
10% { filter: drop-shadow(0 10px 30px rgba(0,0,0,.62)) drop-shadow(0 0 18px rgba(220,235,255,.75)); }
}
/* nobody wants a strobe: honour the reduced-motion preference */
@media (prefers-reduced-motion: reduce) { .hero-bolt { display: none !important; } }
@media (forced-colors: active) { .hero-bolt { display: none !important; } }
/* ══════════════════════════════════════════════════════════════════════
COLOUR ON THE PAGE
The accent does more than tint a label: it edges the cards, rules the
headings and washes alternate sections, so a visitor can tell Sport
from Arts before reading a word. Everything below reads --accent, so
the whole system is seven declarations wide.
══════════════════════════════════════════════════════════════════════ */
/* the eyebrow rule and the section-number counter */
.sec-eye::before, .sec-eye::after { background: var(--accent); }
/* a heading's italic emphasis carries the colour */
.content-section h2 em, .sec-head h2 em, .as-content h2 em { color: var(--accent); }
/* cards and panels get an edge in the page's colour */
.content-section > h2 { border-left: 0; }
.sb-card, .info-card, .value-card, .camp-card {
border-top-width: 3px; border-top-style: solid; border-top-color: var(--accent);
}
.hm-note, .og-consent { border-left-color: var(--accent); }
/* links inside prose */
.content-section a:not(.btn):not(.btn-primary):not(.rp-card):not(.sb-nav-list a) {
text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
text-underline-offset: 3px;
}
/* the page hero picks up a band of its colour */
.page-hero::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
background: linear-gradient(90deg,
var(--accent) 0%, var(--accent) 42%,
color-mix(in srgb, var(--accent) 40%, transparent) 100%);
}
/* tags and pills answer to the page too */
.news-tag, .ng-meta, .pe-badge, .prl-period { color: var(--accent); }
@media (forced-colors: active) {
.inner-main > .content-section:nth-of-type(even) { background: Canvas; border: 1px solid CanvasText; }
.sb-card, .info-card, .value-card, .camp-card { border-top-color: CanvasText; }
.page-hero::after { background: CanvasText; }
}
/* ══════════════════════════════════════════════════════════════════════
ARCHIVES
An archive that is mostly still to be filled has to look deliberate
rather than broken, so the empty collections state plainly what is
wanted instead of saying "no results". Everything here is built from
the existing card and section furniture.
══════════════════════════════════════════════════════════════════════ */
.arc-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.arc-jump a {
padding: 8px 15px; border-radius: var(--rad-pill);
font-size: var(--fs-xs); font-weight: 600; text-decoration: none;
color: var(--txt-mid); background: var(--cream);
border: 1px solid rgba(11,31,66,.1); transition: var(--tr-fast);
}
.arc-jump a:hover, .arc-jump a:focus-visible {
color: var(--accent); border-color: var(--accent); background: var(--accent-tint); transform: translateY(-1px);
}
[data-theme="dark"] .arc-jump a { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--txt); }
.arc-count {
display: inline-block; font-size: var(--fs-xs); font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
background: var(--accent-tint); border-radius: var(--rad-pill); padding: 3px 12px; margin-left: 4px;
}
/* ── the photograph grid ───────────────────────────────────────────── */
.arc-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 20px; margin-top: 20px;
}
.arc-item {
margin: 0; background: var(--white); border-radius: var(--rad-l); overflow: hidden;
border: 1px solid rgba(11,31,66,.1); box-shadow: var(--shd-xs);
transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
display: flex; flex-direction: column;
}
.arc-item:hover { transform: translateY(-4px); box-shadow: var(--shd-md); }
.arc-img { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--cream-d); }
.arc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.arc-item:hover .arc-img img { transform: scale(1.05); }
.arc-item figcaption { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.arc-date {
font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--accent);
}
.arc-item figcaption strong { font-size: .92rem; line-height: 1.35; color: var(--ink); }
.arc-note { font-size: var(--fs-sm); color: var(--txt-mid); line-height: 1.6; }
[data-theme="dark"] .arc-item { background: #0d1a2e; border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .arc-item figcaption strong { color: var(--txt); }
/* ── cross-reference cards ─────────────────────────────────────────── */
.arc-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 18px 0; }
.arc-link {
display: flex; flex-direction: column; gap: 4px;
padding: 16px 18px; border-radius: var(--rad-m); text-decoration: none;
background: var(--white); border: 1px solid rgba(11,31,66,.1);
border-left: 3px solid var(--accent);
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.arc-link:hover { transform: translateX(3px); box-shadow: var(--shd-sm); }
.arc-link-k {
font-size: .75rem; font-weight: 800; letter-spacing: .12em;
text-transform: uppercase; color: var(--accent);
}
.arc-link strong { font-size: .95rem; color: var(--ink); }
.arc-link span:last-child { font-size: var(--fs-sm); color: var(--txt-mid); line-height: 1.6; }
[data-theme="dark"] .arc-link { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .arc-link strong { color: var(--txt); }
/* ── "wanted" notes and the open collection ────────────────────────── */
.arc-await {
font-size: var(--fs-sm); line-height: 1.75; color: var(--txt-mid);
background: var(--accent-tint); border-left: 3px solid var(--accent);
border-radius: 0 var(--rad-m) var(--rad-m) 0; padding: 14px 18px; margin-top: 6px;
}
.arc-await strong { color: var(--accent); }
.arc-more { font-size: var(--fs-sm); color: var(--txt-lt); margin-top: 16px; }
.arc-empty {
text-align: center; padding: 34px 24px; border-radius: var(--rad-l);
background: var(--accent-tint); border: 1px dashed var(--accent);
}
.arc-empty p { margin: 0 0 10px; color: var(--txt-mid); line-height: 1.75; }
.arc-empty p:last-child { margin: 18px 0 0; }
.arc-empty strong { color: var(--ink); font-size: 1.02rem; }
[data-theme="dark"] .arc-empty strong { color: var(--txt); }
/* ── how to contribute ─────────────────────────────────────────────── */
.arc-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 20px 0; }
.arc-step {
background: var(--white); border: 1px solid rgba(11,31,66,.1);
border-radius: var(--rad-l); padding: 20px 20px 18px; position: relative;
}
.arc-step-n {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: var(--rad-pill); margin-bottom: 10px;
font-size: var(--fs-xs); font-weight: 800;
background: var(--accent); color: #fff;
}
.arc-step strong { display: block; font-size: 1rem; color: var(--ink); margin-bottom: 6px; }
.arc-step p { font-size: var(--fs-sm); color: var(--txt-mid); line-height: 1.7; margin: 0; }
[data-theme="dark"] .arc-step { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .arc-step strong { color: var(--txt); }
[data-theme="dark"] .arc-step-n { color: #04101f; }
.arc-note-block {
font-size: var(--fs-sm); line-height: 1.8; color: var(--txt-mid);
background: var(--cream); border-radius: var(--rad-m); padding: 16px 20px; margin-top: 8px;
}
[data-theme="dark"] .arc-note-block { background: rgba(255,255,255,.04); }
@media (max-width: 620px) {
.arc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.arc-item figcaption { padding: 11px 12px 13px; }
.arc-empty { padding: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) {
.arc-item, .arc-link, .arc-jump a, .arc-img img { transition: none; }
.arc-item:hover, .arc-link:hover, .arc-jump a:hover { transform: none; }
.arc-item:hover .arc-img img { transform: none; }
}
@media (forced-colors: active) {
.arc-item, .arc-link, .arc-step, .arc-empty { border: 1px solid CanvasText; }
.arc-step-n { border: 1px solid CanvasText; }
}
/* ════════════════ ALUMNI REGISTER — STEPPED FORM ════════════════
Thirty fields on one page asked a lot of a voluntary sign-up, so the
register is now paced across four steps and a review.
The whole thing degrades: every field stays in the DOM and every step
is visible until JavaScript adds .alr-js to the form. Without script
the page is exactly the long form it was, and the single submit still
posts all thirty-three controls. */
.alrw-rail { display: none; }
.alr-status { display: none; }
.alr-nav { display: none; }
:is(.alr-js, .adm-js) .alrw-rail,
:is(.alr-js, .adm-js) .alr-status { display: block; }
:is(.alr-js, .adm-js) .alr-nav {
display: flex; gap: 12px; flex-wrap: wrap;
margin-top: 26px; padding-top: 22px;
border-top: 1px solid var(--cream-d);
}
[data-theme="dark"] :is(.alr-js, .adm-js) .alr-nav { border-top-color: rgba(255,255,255,.09); }
:is(.alr-js, .adm-js) .alr-nav .btn-primary { margin-left: auto; }
.alr-js .alr-step { display: none; }
.alr-js .alr-step.is-on { display: block; }
/* ── the progress rail ─────────────────────────────
A numbered track rather than a bare percentage: a Gallian filling this
in can see how much is left and what is still coming. */
:is(.alr-js, .adm-js) .alrw-rail {
display: flex; list-style: none; padding: 0;
margin: 0 0 22px; gap: 4px; counter-reset: none;
}
.alrw-rail-step {
flex: 1 1 0; min-width: 0; position: relative;
display: flex; flex-direction: column; align-items: center; gap: 7px;
font-size: var(--fs-xs);
}
/* the connecting line sits behind the dots */
.alrw-rail-step::before {
content: ''; position: absolute; top: 15px; left: -50%; right: 50%;
height: 2px; background: var(--cream-d); z-index: 0;
}
.alrw-rail-step:first-child::before { display: none; }
[data-theme="dark"] .alrw-rail-step::before { background: rgba(255,255,255,.12); }
.alrw-rail-step.is-done::before { background: var(--accent); }
.alrw-rail-dot {
position: relative; z-index: 1;
width: 30px; height: 30px; border-radius: var(--rad-pill);
display: grid; place-items: center;
background: var(--white); color: var(--txt-lt);
border: 2px solid var(--cream-d);
font-weight: 700; font-size: var(--fs-xs); line-height: 1;
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
[data-theme="dark"] .alrw-rail-dot { background: #0d1a2e; border-color: rgba(255,255,255,.14); }
.alrw-rail-step.is-done .alrw-rail-dot {
background: var(--accent); border-color: var(--accent); color: #fff;
}
.alrw-rail-step.is-now .alrw-rail-dot {
border-color: var(--accent); color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-tint);
}
.alrw-rail-label {
text-align: center; line-height: 1.3; color: var(--txt-lt);
max-width: 12ch;
}
.alrw-rail-step.is-now .alrw-rail-label { color: var(--accent); font-weight: 700; }
.alr-status {
font-size: var(--fs-sm); color: var(--txt-mid);
margin: 0 0 18px;
}
.alr-status strong { color: var(--accent); }
/* ── step panes ────────────────────────────────── */
.alr-js .alr-step.is-on { animation: alrIn .32s cubic-bezier(.22,1,.36,1) both; }
@keyframes alrIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
.alr-js .alr-step.is-on { animation: none; }
.alrw-rail-dot { transition: none; }
}
/* ── inline validation ─────────────────────────── */
.alr-err {
display: block; font-size: var(--fs-xs); font-weight: 600;
color: #a01515; margin-top: 5px;
}
[data-theme="dark"] .alr-err { color: #e48383; }
.cf-field.has-err input,
.cf-field.has-err select,
.cf-field.has-err textarea {
border-color: #a01515;
box-shadow: 0 0 0 3px rgba(160,21,21,.10);
}
[data-theme="dark"] .cf-field.has-err input,
[data-theme="dark"] .cf-field.has-err select,
[data-theme="dark"] .cf-field.has-err textarea { border-color: #e48383; }
/* ── review ───────────────────────────────────── */
.alr-review-h { font-family: 'Playfair Display', serif; font-size: 1.3rem;
color: var(--ink); margin: 0 0 4px; }
[data-theme="dark"] .alr-review-h { color: var(--txt); }
.alr-review-sub { font-size: var(--fs-sm); color: var(--txt-mid); margin: 0 0 18px; }
.alr-review { margin: 0; display: grid; gap: 16px; }
/* ── the review, laid out as the completed form ──────
Grouped by the step each answer came from, with the values sitting in
field-shaped boxes. A Gallian checking his entry then sees the thing he
filled in, not a receipt of it — and each panel carries its own Edit,
so a correction takes one click rather than a hunt. */
.rv-group {
border: 1px solid var(--cream-d); border-radius: var(--rad-m);
background: var(--white); overflow: hidden;
}
[data-theme="dark"] .rv-group { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.rv-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 11px 16px; background: var(--cream);
border-bottom: 1px solid var(--cream-d);
}
[data-theme="dark"] .rv-head { background: rgba(255,255,255,.04); border-bottom-color: rgba(255,255,255,.09); }
/* The Edit button. It used to carry the class .alr-review-edit, left over
from the review this replaced, and no rule anywhere matched that name —
so it rendered as a bare browser button inside a finished-looking header.
release.py now refuses a build where a script sets a class nothing styles. */
.rv-edit {
flex: 0 0 auto; border: 1px solid var(--cream-d); background: var(--white);
color: var(--ink); font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
letter-spacing: .04em; text-transform: uppercase;
padding: 5px 12px; border-radius: 99px; cursor: pointer;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.rv-edit:hover, .rv-edit:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--white); }
[data-theme="dark"] .rv-edit { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--txt); }
[data-theme="dark"] .rv-edit:hover, [data-theme="dark"] .rv-edit:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.rv-head h4 {
margin: 0; font-family: 'Inter', sans-serif;
font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--accent);
}
.rv-grid {
margin: 0; padding: 16px;
display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 16px;
}
.rv-field { min-width: 0; display: grid; gap: 4px; }
.rv-field.rv-wide { grid-column: 1 / -1; }
.rv-field dt {
font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
color: var(--txt-lt); text-transform: uppercase;
}
.rv-field dd {
margin: 0; padding: 9px 13px;
border: 1px solid var(--cream-d); border-radius: var(--rad-s);
background: var(--cream);
font-size: var(--fs-base); color: var(--ink);
line-height: 1.5; word-break: break-word;
}
[data-theme="dark"] .rv-field dd {
background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); color: var(--txt);
}
.rv-empty dd { color: var(--txt-lt); font-style: italic; }
.rv-photo dd { display: flex; align-items: center; gap: 12px; }
.rv-thumb {
width: 46px; height: 60px; flex: none; border-radius: 4px;
object-fit: cover; object-position: top center; border: 1px solid var(--cream-d);
}
/* ══════════════════════════════════════════════════════════════
The review, as a form that can be printed on A4
──────────────────────────────────────────────────────────────
On screen this is a sheet of paper sitting inside the wizard. On
paper it IS the paper: a college letterhead, the photograph at its
true 2in x 3in in the top right corner, the house crest beside the
house, the answers, then a declaration and an office-use block.
══════════════════════════════════════════════════════════════ */
.rvp-sheet {
background: var(--white); border: 1px solid var(--cream-d);
border-radius: var(--rad-m); padding: 22px 24px 20px;
display: grid; gap: 16px;
}
[data-theme="dark"] .rvp-sheet { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.10); }
/* ── letterhead ── */
.rvp-head {
display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: start;
padding-bottom: 14px; border-bottom: 2px solid var(--accent);
}
.rvp-crest { width: 52px; height: 52px; object-fit: contain; }
.rvp-titles { min-width: 0; }
.rvp-college { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); letter-spacing: .01em; }
[data-theme="dark"] .rvp-college { color: var(--txt); }
.rvp-form {
margin: 2px 0 3px; font-family: 'Playfair Display', serif;
font-size: 1.18rem; font-weight: 700; color: var(--accent); line-height: 1.2;
}
.rvp-sub { margin: 0; font-size: var(--fs-xs); color: var(--txt-lt); letter-spacing: .04em; text-transform: uppercase; }
/* ── the photograph, top right ── */
.rvp-photo {
width: 96px; aspect-ratio: 2 / 3; flex: none; position: relative; overflow: hidden;
border: 1px dashed var(--cream-d); border-radius: 4px;
display: grid; place-items: center; background: var(--cream);
}
.rvp-photo img { width: 100%; height: 100%; object-fit: cover; display: none; }
.rvp-photo[data-state="has"] { border-style: solid; }
.rvp-photo[data-state="has"] img { display: block; }
.rvp-photo[data-state="has"] .rvp-photo-note { display: none; }
.rvp-photo-note { font-size: var(--fs-xs); color: var(--txt-lt); text-align: center; line-height: 1.4; }
.rvp-pageno { display: none; }
[data-theme="dark"] .rvp-photo { background: rgba(255,255,255,.05); }
/* ── name, years and house, immediately under the rule ── */
.rvp-ident { display: grid; gap: 3px; }
.rvp-id-name { margin: 0; font-family: 'Playfair Display', serif; font-size: 1.24rem; color: var(--ink); line-height: 1.2; }
[data-theme="dark"] .rvp-id-name { color: var(--txt); }
.rvp-id-line { margin: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
font-size: var(--fs-sm); color: var(--txt-mid); }
.rvp-id-house { display: inline-flex; align-items: center; gap: 7px; }
.rvp-hcrest { width: 26px; height: 26px; object-fit: contain; flex: none; }
/* ── declaration, signatures, office use ── */
.rvp-foot { display: grid; gap: 14px; padding-top: 4px; }
.rvp-decl { margin: 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--txt-mid); }
.rvp-sign, .rvp-office-g { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 26px; }
.rvp-sig { font-size: var(--fs-xs); color: var(--txt-lt); }
.rvp-line { display: block; height: 1px; background: var(--txt-lt); opacity: .55; margin: 26px 0 5px; }
.rvp-office { border: 1px solid var(--cream-d); border-radius: var(--rad-s); padding: 12px 14px 14px; }
[data-theme="dark"] .rvp-office { border-color: rgba(255,255,255,.12); }
.rvp-office-t {
margin: 0 0 2px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--accent);
}
.rvp-ref { margin: 0; font-size: var(--fs-xs); color: var(--txt-lt); text-align: right; }
@media (max-width: 620px) {
.rvp-sheet { padding: 16px 15px 15px; }
.rvp-head { grid-template-columns: 40px 1fr; gap: 10px; }
.rvp-crest { width: 40px; height: 40px; }
.rvp-photo { grid-column: 1 / -1; width: 84px; justify-self: start; }
.rvp-sign, .rvp-office-g { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════
Printing the form on A4
──────────────────────────────────────────────────────────────
Entered by adding .alr-printing to , so the site's own print
rules for ordinary pages are left alone. Everything on the page is
made invisible and only the sheet is painted — visibility rather
than display, because the sheet is nested six levels deep inside
the wizard and hiding its ancestors would hide it too.
══════════════════════════════════════════════════════════════ */
@media print {
/* ── Keyed on the page's own state, not on a class one script sets ─────
Every rule below used to require .alr-printing on , which only
js/alumni-register-4.js adds. If that one file fails to load — or has
simply not been uploaded — the button did nothing and Ctrl+P printed the
whole web page. Measured with the file removed: 459 KB of web page
instead of the 120 KB sheet.
`:has(.alr-review-pane.is-on)` reads the state directly. .is-on comes
from main.js, which every page loads, so the sheet now prints whenever
the review is the step on screen. The page script still runs when it is
there — it stamps the date — but nothing depends on it any more.
With JavaScript off, no step carries .is-on, this does not match, and
the whole form prints. That is the right answer for a form that has not
been stepped through. */
html:is(.alr-printing, :has(.alr-review-pane.is-on)), html:is(.alr-printing, :has(.alr-review-pane.is-on)) body {
background: #fff !important; margin: 0 !important; padding: 0 !important;
}
/* ── Why display, not visibility ─────────────────────────────────────
The first version hid the page with visibility and pulled the sheet out
with position:absolute. Two faults, measured on a real print:
· absolutely positioned content does not paginate — the sheet is
~1780px tall, an A4 page ~1120px, and everything past the first
page boundary was silently never printed;
· hidden ancestors keep their layout space, so the letterhead started
a third of the way down page 1.
The printed result was a single page holding only the letterhead.
Now: everything that is not the sheet, inside it, or an ancestor of it
is display:none — gone from layout, not merely invisible. The ancestors
themselves become display:contents, so their boxes vanish and the sheet
flows from the very top of page 1 as ordinary content, which paginates
across as many pages as it needs. */
html:is(.alr-printing, :has(.alr-review-pane.is-on)) body *:not(.rvp-sheet):not(.rvp-sheet *):not(:has(.rvp-sheet)) { display: none !important; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) body :has(.rvp-sheet) { display: contents !important; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-sheet {
position: relative !important;
width: auto; margin: 0; padding: 0;
border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
background: #fff !important; color: #000 !important;
display: block !important;
font-size: 10pt; line-height: 1.45;
}
/* a row, the letterhead, the signature block and the office box must not
be sliced across a page boundary */
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-head,
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rv-field,
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rv-group,
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-sign,
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-office { break-inside: avoid; page-break-inside: avoid; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-noprint,
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .alr-nav,
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .alrw-rail,
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .alr-status { display: none !important; }
/* the letterhead */
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-head {
display: flex; align-items: flex-start; gap: 10mm;
border-bottom: 1.6pt solid #0b1f42 !important; padding-bottom: 4mm; margin-bottom: 4mm;
}
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-crest { width: 1.33in; height: 2in; object-fit: contain; object-position: top; flex: none; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-titles { flex: 1; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-college { font-size: 11pt; font-weight: 700; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-form { font-size: 16pt; color: #0b1f42 !important; margin: 1mm 0; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-sub { font-size: 8pt; }
/* the photograph, at the size it is actually meant to be.
1.33in × 2in — the same 2:3 shape the crop tool and the server already
enforce, so existing photographs fit the smaller frame unchanged. */
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-photo {
width: 1.33in !important; height: 2in !important; aspect-ratio: auto !important;
flex: none; border: 0.6pt solid #666 !important; border-radius: 0;
overflow: hidden; background: #fff !important;
}
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-photo img { width: 1.33in; height: 2in; object-fit: cover; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-photo[data-state="empty"] { border-style: dashed !important; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-ident { margin-bottom: 3mm; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-id-name { font-size: 14pt; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-id-line { font-size: 9.5pt; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-hcrest { width: 9mm; height: 9mm; }
/* the answers: two columns, boxed, nothing allowed to split across pages */
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .alr-review { display: block; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rv-group {
border: 0.6pt solid #999 !important; border-radius: 0 !important;
background: #fff !important; margin-bottom: 3mm;
break-inside: avoid; page-break-inside: avoid;
}
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rv-head {
background: #f0ece3 !important; border-bottom: 0.6pt solid #999 !important;
padding: 1.6mm 3mm; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rv-head h4 { font-size: 8pt; letter-spacing: .09em; color: #0b1f42 !important; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rv-edit { display: none !important; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rv-grid { padding: 3mm; gap: 2.4mm 5mm; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rv-field dt { font-size: 7.4pt; color: #555 !important; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rv-field dd {
font-size: 9.5pt; padding: 1.2mm 2mm; background: #fff !important;
border: 0.5pt solid #bbb !important; border-radius: 0 !important; color: #000 !important;
}
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rv-thumb { display: none !important; }
/* declaration and office use */
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-foot { margin-top: 4mm; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-decl { font-size: 8pt; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-line { background: #000 !important; opacity: 1; margin: 9mm 0 1mm; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-sig { font-size: 8pt; color: #333 !important; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-office {
border: 0.6pt solid #999 !important; padding: 3mm; break-inside: avoid; page-break-inside: avoid;
}
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-office-t { font-size: 7.6pt; color: #0b1f42 !important; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-ref { font-size: 7.4pt; color: #666 !important; margin-top: 2mm; }
/* ── Page numbers ────────────────────────────────────────────────────
@page is fixed above at A4 with 13mm/14mm vertical margins, so every
page holds exactly 297−13−14 = 270mm of content and the sheet starts at
the very top of page 1 (its ancestors are display:contents). Page n
therefore ends 270×n mm from the top of the sheet, and a marker 8mm
above that line sits at the foot of page n.
The page-2 marker doubles as the guarantee that page 2 exists at its
full height: Chrome extends pagination to reach absolutely-positioned
content, so the marker pins the page open and sits printed at its foot.
For the same reason there must be no marker for a page the form does
not occupy — it would print as a blank numbered page. */
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-pageno {
display: block; position: absolute; right: 0;
font-size: 7.4pt; color: #666 !important; letter-spacing: .04em;
}
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-pageno[data-p="1"] { top: 262mm; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) .rvp-pageno[data-p="2"] { top: 532mm; }
html:is(.alr-printing, :has(.alr-review-pane.is-on)) { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@page { size: A4 portrait; margin: 13mm 12mm 14mm; }
}
@media (max-width: 620px) {
.rv-grid { grid-template-columns: 1fr; padding: 13px; }
}
/* ── saved-progress notice ─────────────────────── */
.alr-resume {
display: none; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 0 0 20px; padding: 12px 16px;
border-radius: var(--rad-m); border-left: 3px solid var(--accent);
background: var(--accent-tint); font-size: var(--fs-sm); color: var(--txt-mid);
}
.alr-resume.is-on { display: flex; }
.alr-resume button {
background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
font-weight: 700; color: var(--accent); text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 620px) {
.alrw-rail-label { display: none; }
.alr-js .alrw-rail { gap: 0; margin-bottom: 16px; }
.alr-review-row { grid-template-columns: 1fr; gap: 3px; padding: 10px 0; }
.alr-review-row dt { font-size: var(--fs-xs); }
.alr-js .alr-nav .btn-primary,
.alr-js .alr-nav .btn-outline { flex: 1 1 auto; justify-content: center; }
}
/* The page already had a jump-link rail to the six sections. With the
wizard running those anchors would scroll to a hidden pane, so the
legacy rail steps aside — and returns intact if JavaScript is off. */
body.alrw-on #alrRail { display: none; }
/* ════════════ ALUMNI REGISTER — PHOTOGRAPH ════════════
Two columns: the frame the portrait will actually appear in on the roll,
and the controls beside it. Showing the real crop up front saves the
Gallian discovering later that his photograph was taken at arm's length
and cropped through the ear. */
.pf { display: grid; grid-template-columns: 190px 1fr; gap: 26px; align-items: start; }
.pf-stage { display: flex; flex-direction: column; gap: 8px; }
.pf-frame {
position: relative; width: 100%; aspect-ratio: 2 / 3; /* 2″ × 3″, as stored */
border-radius: var(--rad-m); overflow: hidden;
background: var(--cream-d);
border: 1px solid rgba(11,31,66,.12);
display: grid; place-items: center;
transition: border-color .25s ease, box-shadow .25s ease;
}
[data-theme="dark"] .pf-frame { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.pf-frame[data-state="has"] { border-color: var(--accent); box-shadow: 0 6px 22px rgba(11,31,66,.14); }
/* The script positions this, so it must not be stretched to the frame: it
keeps its own dimensions and is moved with a transform. */
.pf-img {
position: absolute; top: 0; left: 0; display: none;
max-width: none; max-height: none;
transform-origin: 0 0; user-select: none; -webkit-user-drag: none;
will-change: transform;
}
.pf-frame[data-state="has"] .pf-img { display: block; }
.pf-frame[data-state="has"] .pf-empty { display: none; }
.pf-empty {
display: flex; flex-direction: column; align-items: center; gap: 8px;
color: var(--txt-lt); font-size: var(--fs-xs); text-align: center; padding: 0 10px;
}
.pf-badge {
position: absolute; left: 8px; bottom: 8px;
background: var(--accent); color: #fff;
font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
padding: 3px 9px; border-radius: var(--rad-pill);
}
/* ── the crop itself ───────────────────────────────────────────────
The frame is the crop, and it is 2:3 because that is the shape the
photograph is stored in. What sits inside it is exactly what is written. */
.pf-frame[data-state="has"] { cursor: grab; touch-action: none; }
.pf-frame[data-state="has"].is-dragging { cursor: grabbing; }
.pf-frame:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; }
/* Thirds, to help place the eyes. Over the picture, under the badge. */
.pf-grid { position: absolute; inset: 0; display: none; pointer-events: none; }
.pf-frame[data-state="has"] .pf-grid { display: block; }
.pf-grid::before, .pf-grid::after { content: ''; position: absolute; background: rgba(255,255,255,.32); }
.pf-grid::before { left: 0; right: 0; top: 33.333%; height: 1px; }
.pf-grid::after { top: 0; bottom: 0; left: 33.333%; width: 1px; }
.pf-zoom { display: flex; align-items: center; gap: 8px; }
.pf-zoom input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); height: 24px; }
.pf-zbtn {
width: 30px; height: 30px; flex-shrink: 0; cursor: pointer;
border: 1px solid var(--cream-d); background: var(--white); color: var(--ink);
border-radius: 50%; font: inherit; font-size: var(--fs-sm); line-height: 1;
display: flex; align-items: center; justify-content: center;
}
.pf-zbtn:hover { border-color: var(--accent); color: var(--accent); }
.pf-zreset {
flex-shrink: 0; cursor: pointer; border: 0; background: none; padding: 4px 2px;
font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--txt-lt);
text-decoration: underline; text-underline-offset: 2px;
}
.pf-zreset:hover { color: var(--accent); }
[data-theme="dark"] .pf-zbtn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--txt); }
@media (forced-colors: active) { .pf-zbtn { border: 1px solid CanvasText; } }
.pf-caption { margin: 0; font-size: var(--fs-xs); color: var(--txt-lt); text-align: center; }
.pf-side { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pf-label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
[data-theme="dark"] .pf-label { color: var(--txt); }
.pf-opt {
font-weight: 600; font-size: var(--fs-xs); color: var(--txt-lt);
background: var(--cream-d); border-radius: var(--rad-pill); padding: 2px 8px; margin-left: 6px;
}
[data-theme="dark"] .pf-opt { background: rgba(255,255,255,.08); }
/* the facts replace a bare filename: size and dimensions are what actually
decide whether a photograph will look right */
.pf-facts { display: grid; gap: 6px; margin: 0; }
.pf-facts > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 10px; align-items: baseline; }
.pf-facts dt { font-size: var(--fs-xs); font-weight: 700; color: var(--txt-lt); }
.pf-facts dd { margin: 0; font-size: var(--fs-sm); color: var(--ink); word-break: break-word; }
[data-theme="dark"] .pf-facts dd { color: var(--txt); }
.pf-note { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--txt-mid); }
.pf-note:empty { display: none; }
.pf-note.is-ok { color: #1a6b3c; }
.pf-note.is-warn { color: #8a6508; }
.pf-note.is-err { color: #a01515; font-weight: 600; }
[data-theme="dark"] .pf-note.is-ok { color: #4fbf7f; }
[data-theme="dark"] .pf-note.is-warn { color: #e8c14a; }
[data-theme="dark"] .pf-note.is-err { color: #e48383; }
.pf-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pf-remove {
background: none; border: 0; padding: 6px 2px; cursor: pointer; font: inherit;
font-size: var(--fs-sm); font-weight: 600; color: #a01515;
text-decoration: underline; text-underline-offset: 3px;
}
[data-theme="dark"] .pf-remove { color: #e48383; }
.pf-actions .btn-outline { padding: 8px 16px; font-size: var(--fs-sm); }
.pf-guide {
list-style: none; padding: 0; margin: 4px 0 0;
display: grid; gap: 5px;
font-size: var(--fs-xs); color: var(--txt-lt); line-height: 1.5;
}
.pf-guide li { padding-left: 16px; position: relative; }
.pf-guide li::before {
content: ''; position: absolute; left: 0; top: .5em;
width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .55;
}
@media (max-width: 620px) {
.pf { grid-template-columns: 116px 1fr; gap: 16px; }
.pf-facts > div { grid-template-columns: 5rem 1fr; gap: 8px; }
.pf-guide { grid-column: 1 / -1; }
}
/* ════════════ ALUMNI REGISTER — WHO MAY SEE THE ENTRY ════════════
A checkbox that says "publish me" makes publication the quiet default
for anyone who does not read it. This is an explicit either/or with
Private selected first, and the per-field choices only appear once a
public entry has actually been asked for. */
.vis-block { display: grid; gap: 14px; }
.vis-q { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
[data-theme="dark"] .vis-q { color: var(--txt); }
.vis-choice { display: grid; gap: 10px; }
.vis-opt {
display: flex; gap: 12px; align-items: flex-start;
padding: 14px 16px; cursor: pointer;
border: 1.5px solid var(--cream-d); border-radius: var(--rad-m);
background: var(--white);
transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
[data-theme="dark"] .vis-opt { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.vis-opt:hover { border-color: var(--accent); }
.vis-opt input { margin-top: 3px; flex: none; accent-color: var(--accent); width: 17px; height: 17px; }
.vis-opt:has(input:checked) {
border-color: var(--accent); background: var(--accent-tint);
box-shadow: 0 2px 14px rgba(11,31,66,.08);
}
.vis-opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.vis-body { display: grid; gap: 4px; min-width: 0; }
.vis-head {
display: flex; align-items: center; gap: 8px;
font-size: var(--fs-base); font-weight: 700; color: var(--ink);
}
[data-theme="dark"] .vis-head { color: var(--txt); }
.vis-opt:has(input:checked) .vis-head { color: var(--accent); }
[data-theme="dark"] .vis-opt:has(input:checked) .vis-head { color: var(--gold); }
.vis-note { font-size: var(--fs-sm); color: var(--txt-mid); line-height: 1.55; }
.vis-detail {
border-left: 3px solid var(--accent);
background: var(--cream); border-radius: var(--rad-m);
padding: 15px 18px; display: grid; gap: 10px;
}
[data-theme="dark"] .vis-detail { background: rgba(255,255,255,.04); }
.vis-sub {
margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--accent);
}
.vis-always { margin: 0; font-size: var(--fs-sm); color: var(--txt-mid); line-height: 1.55; }
.vis-always strong { color: var(--ink); }
[data-theme="dark"] .vis-always strong { color: var(--txt); }
.vis-toggles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 18px; }
.vis-never {
margin: 4px 0 0; font-size: var(--fs-sm); line-height: 1.6;
color: var(--txt-mid); padding-top: 10px; border-top: 1px solid var(--cream-d);
}
[data-theme="dark"] .vis-never { border-top-color: rgba(255,255,255,.09); }
.vis-never strong { color: var(--ink); }
[data-theme="dark"] .vis-never strong { color: var(--txt); }
/* ── the visibility panel has two states, and says which one ───────
The panel belongs to the Public option and appears with it. This line
sits above the four tiles and says what ticking them does. */
.vis-state {
margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--txt-mid);
padding: 9px 13px; border-radius: var(--rad-s);
background: var(--accent-tint);
}
[data-theme="dark"] .vis-state { background: rgba(255,255,255,.07); }
.vis-contact { padding-top: 4px; }
@media (max-width: 620px) {
.vis-toggles { grid-template-columns: 1fr; }
.vis-opt { padding: 12px 13px; }
}
/* ══════════════════════════════════════════════════════════════════
PLAN YOUR VISIT
──────────────────────────────────────────────────────────────────
A page for somebody about to drive two hours up a mountain. Every
block answers a question they would otherwise have to telephone to
ask: may I come, how do I get there, what will it be like, what
happens when I arrive, and how do I book.
══════════════════════════════════════════════════════════════════ */
/* ── the five facts, before any prose ───────────────────────────── */
.pv-facts {
display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
gap: 1px; background: var(--cream-d); border: 1px solid var(--cream-d);
border-radius: var(--rad-m); overflow: hidden; margin-bottom: 30px;
}
[data-theme="dark"] .pv-facts { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
.pv-fact {
background: var(--white); padding: 16px 12px; text-align: center;
display: flex; flex-direction: column; gap: 3px; justify-content: center;
}
[data-theme="dark"] .pv-fact { background: var(--bg, #10161f); }
.pv-fact-n {
font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700;
color: var(--accent); line-height: 1;
}
.pv-fact-n small { font-size: .55em; font-weight: 600; margin-left: 2px; letter-spacing: .02em; }
.pv-fact-l { font-size: var(--fs-xs); color: var(--txt-lt); letter-spacing: .03em; }
.pv-fact-cta { gap: 7px; }
.pv-fact-cta a {
font-size: var(--fs-sm); font-weight: 700; color: var(--accent); text-decoration: none;
}
.pv-fact-cta a:hover { text-decoration: underline; }
.pv-fact-tel { font-weight: 600 !important; font-size: var(--fs-xs) !important; color: var(--txt-mid) !important; }
/* ── who is visiting ────────────────────────────────────────────── */
.pv-who { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 4px 0 18px; }
.pv-who-btn {
display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
padding: 13px 15px; min-height: 54px; font: inherit; font-size: var(--fs-sm); font-weight: 600;
color: var(--txt-mid); background: var(--white); border: 1.5px solid var(--cream-d);
border-radius: var(--rad-m); transition: border-color .2s, background .2s, color .2s;
}
.pv-who-btn svg { flex: none; color: var(--txt-lt); }
.pv-who-btn:hover { border-color: var(--accent); }
.pv-who-btn.is-on {
border-color: var(--accent); background: var(--accent-tint); color: var(--ink); font-weight: 700;
box-shadow: 0 3px 14px rgba(11,31,66,.08);
}
.pv-who-btn.is-on svg { color: var(--accent); }
.pv-who-btn:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 2px; }
[data-theme="dark"] .pv-who-btn { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: var(--txt); }
[data-theme="dark"] .pv-who-btn.is-on { color: #fff; }
.pv-panel {
border-left: 3px solid var(--accent); background: var(--cream);
border-radius: var(--rad-m); padding: 17px 20px; display: grid; gap: 11px;
}
[data-theme="dark"] .pv-panel { background: rgba(255,255,255,.04); }
.pv-panel-lead { margin: 0; font-size: var(--fs-base); line-height: 1.65; color: var(--txt-main); }
.pv-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.pv-list li {
position: relative; padding-left: 20px; font-size: var(--fs-sm);
line-height: 1.65; color: var(--txt-mid);
}
.pv-list li::before {
content: ''; position: absolute; left: 2px; top: .62em;
width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.pv-list b { color: var(--ink); }
[data-theme="dark"] .pv-list b { color: var(--txt); }
.pv-panel-foot { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--txt-lt); }
.pv-panel-foot a { font-weight: 600; }
/* ── the journey ────────────────────────────────────────────────── */
.pv-journey {
display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 20px;
margin: 20px 0 6px; align-items: start;
}
.pv-jl { display: grid; gap: 6px; }
.pv-jl-label {
font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--txt-lt); margin-top: 4px;
}
.pv-select {
width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--ink);
padding: 10px 12px; border-radius: var(--rad-s);
border: 1.5px solid var(--cream-d); background: var(--white); cursor: pointer;
}
.pv-select:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 2px; }
[data-theme="dark"] .pv-select { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--txt); }
.pv-jl-note { margin: 8px 0 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--txt-lt); }
.pv-jr {
background: var(--cream); border: 1px solid var(--cream-d);
border-radius: var(--rad-m); padding: 16px 18px; display: grid; gap: 12px;
}
[data-theme="dark"] .pv-jr { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.pv-jstats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.pv-jstat { display: grid; gap: 2px; }
.pv-jstat-n {
font-family: 'Playfair Display', serif; font-size: 1.32rem; font-weight: 700;
color: var(--ink); line-height: 1.1;
}
[data-theme="dark"] .pv-jstat-n { color: var(--txt); }
.pv-jstat-go .pv-jstat-n { color: var(--accent); }
.pv-jstat-l { font-size: var(--fs-xs); color: var(--txt-lt); letter-spacing: .03em; }
.pv-jroute { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--txt-mid); }
.pv-jlinks { margin: 2px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.pv-btn-sm { font-size: var(--fs-xs); padding: 9px 18px; }
.pv-route-art { max-width: 680px; margin: 16px auto 4px; }
.pv-arrive { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 7px; }
.pv-arrive li { font-size: var(--fs-sm); color: var(--txt-mid); line-height: 1.6; }
.pv-arrive b { color: var(--ink); }
[data-theme="dark"] .pv-arrive b { color: var(--txt); }
/* ── weather ────────────────────────────────────────────────────── */
.pv-weather { margin: 16px 0 14px; }
.pv-wear { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.pv-wear li {
font-size: var(--fs-sm); color: var(--txt-mid); line-height: 1.6;
padding-left: 18px; position: relative;
}
.pv-wear li::before {
content: ''; position: absolute; left: 1px; top: .6em;
width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .6;
}
.pv-wear b { color: var(--ink); }
[data-theme="dark"] .pv-wear b { color: var(--txt); }
/* ── the visit, as a timeline ───────────────────────────────────── */
.pv-timeline { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 0; }
.pv-tl {
display: grid; grid-template-columns: 62px 1fr; gap: 16px;
padding: 0 0 20px; position: relative;
}
.pv-tl::before {
content: ''; position: absolute; left: 61px; top: 8px; bottom: -8px;
width: 2px; background: var(--cream-d);
}
[data-theme="dark"] .pv-tl::before { background: rgba(255,255,255,.14); }
.pv-tl-end::before { display: none; }
.pv-tl-time {
font-family: 'Playfair Display', serif; font-size: var(--fs-sm); font-weight: 700;
color: var(--accent); text-align: right; padding-top: 1px; position: relative;
}
.pv-tl-time::after {
content: ''; position: absolute; right: -8px; top: 6px;
width: 11px; height: 11px; border-radius: 50%;
background: var(--white); border: 2.5px solid var(--accent);
}
[data-theme="dark"] .pv-tl-time::after { background: #10161f; }
.pv-tl-body h3 {
margin: 0 0 3px; font-family: 'Inter', sans-serif;
font-size: var(--fs-base); font-weight: 700; color: var(--ink);
}
[data-theme="dark"] .pv-tl-body h3 { color: var(--txt); }
.pv-tl-body p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--txt-mid); }
/* ── before you come ────────────────────────────────────────────── */
.pv-before { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.pv-bcard {
background: var(--white); border: 1px solid var(--cream-d); border-radius: var(--rad-m);
padding: 16px 17px; display: grid; gap: 5px; align-content: start;
transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pv-bcard:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(11,31,66,.08); transform: translateY(-2px); }
[data-theme="dark"] .pv-bcard { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.pv-bicon { font-size: 1.25rem; line-height: 1; }
.pv-bcard h3 {
margin: 0; font-family: 'Inter', sans-serif; font-size: var(--fs-sm);
font-weight: 700; color: var(--ink);
}
[data-theme="dark"] .pv-bcard h3 { color: var(--txt); }
.pv-bcard p { margin: 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--txt-mid); }
/* ── the booking form ───────────────────────────────────────────── */
.pv-form-card { padding: 22px 24px 24px; }
.pv-fs { border: 0; padding: 0; margin: 0 0 20px; }
.pv-fs > legend {
padding: 0; margin-bottom: 11px; font-size: var(--fs-xs); font-weight: 800;
letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.pv-hint { margin: 5px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--txt-lt); }
.pv-hint.is-err { color: #a01515; font-weight: 600; }
[data-theme="dark"] .pv-hint.is-err { color: #e48383; }
.pv-form-note { margin: 12px 0 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--txt-lt); }
/* ── narrower screens ───────────────────────────────────────────── */
@media (max-width: 900px) {
.pv-facts { grid-template-columns: repeat(3, minmax(0,1fr)); }
.pv-fact-cta { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 18px; }
.pv-before { grid-template-columns: repeat(2, minmax(0,1fr)); }
.pv-journey { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
.pv-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
.pv-who { grid-template-columns: 1fr; }
.pv-before { grid-template-columns: 1fr; }
.pv-jstats { grid-template-columns: 1fr; gap: 9px; }
.pv-tl { grid-template-columns: 50px 1fr; gap: 12px; }
.pv-tl::before { left: 49px; }
.pv-panel { padding: 14px 15px; }
}
@media (prefers-reduced-motion: reduce) {
.pv-bcard, .pv-who-btn { transition: none; }
.pv-bcard:hover { transform: none; }
}
@media (forced-colors: active) {
.pv-who-btn, .pv-bcard, .pv-jr, .pv-panel, .pv-select { border: 1px solid CanvasText; }
}
/* Printing a visit plan is a reasonable thing to want. */
@media print {
.pv-who, .pv-jlinks, .pv-form-card, .pv-fact-cta { display: none !important; }
.pv-panel[hidden] { display: block !important; }
.pv-facts, .pv-before { break-inside: avoid; }
.pv-tl { break-inside: avoid; }
}
/* ═══════════════════════════════════════════════════════════════════
RETIRING 'unsafe-inline'
Rules that used to live in an inline style="" attribute or a per-page