/* ==========================================================================
Jain Public School, Tumakuru — site stylesheet
--------------------------------------------------------------------------
Hand-written design system. No framework, no build step.
HOW TO RE-THEME THIS SITE
- Colours .............. section 1a (brand) and 1b (light/dark themes)
- Fonts ................ section 1c, plus the in each page
- Spacing scale ........ section 1d (8px system)
- Radius / shadows ..... section 1e
Nothing below section 1 hard-codes a colour, so editing a token there
updates the whole site at once.
TOKEN NAMING
--navy / --gold / ... brand constants. Identical in light and dark.
--surface / --fg / ... semantic. These FLIP between light and dark.
Use the semantic tokens for anything that must stay readable in both
themes; use the brand ones only for surfaces that are dark in both.
CONTENTS
1. Design tokens 10. Prose (inner page bodies)
2. Reset 11. Tables + accordion
3. Typography 12. Gallery + lightbox
4. Layout primitives 13. Slider, marquee, embeds
5. Buttons 14. Contact + forms
6. Topbar / header / nav 15. CTA band + footer
7. Heroes 16. Utilities + animation
8. Cards, features, stats 17. Responsive
9. Split media + text 18. Print
========================================================================== */
/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
/* --- 1a. BRAND CONSTANTS -------------------------------------------------
These never change between light and dark. They are the school's colours.
The navy surfaces (topbar, footer, CTA band) stay dark in both themes. */
--navy: #10203f; /* primary brand navy */
--navy-deep: #081428; /* deepest shade — topbar, hero scrims */
--navy-800: #18305a; /* raised navy — gradients, hover states */
--blue: #2a6d96; /* mid blue — focus rings */
--blue-600: #23577a; /* darker blue — gradient partner */
--gold: #ffc20e; /* the JGI logo gold — small accents only */
--gold-warm: #e9a72c; /* warmer gold — buttons, larger surfaces */
--gold-100: #fdf3d9; /* gold tint — icon plates */
/* --- 1b. SEMANTIC TOKENS — LIGHT THEME (the default) ------------------- */
--surface: #ffffff; /* page background */
--surface-alt: #faf7f1; /* alternating section background (warm cream) */
--card: #ffffff; /* raised surfaces: cards, dropdowns, inputs */
--card-2: #ffffff; /* second-level raised surface */
--fg-strong: #10203f; /* headings and strong text */
--fg: #4a5262; /* body text */
--fg-mute: #707a8c; /* captions, secondary text */
--line: #e6e2d9; /* hairlines and borders */
--link: #23577a; /* inline links in prose */
--accent-ink: #8a6d05; /* gold that is legible as TEXT on --surface */
--tint: #e9f1f7; /* pale wash — dropdown + table row hover */
--header-bg: rgba(255, 255, 255, .90);
--header-bg-solid: rgba(255, 255, 255, .98);
--scrim: rgba(8, 14, 30, .55); /* behind the mobile nav drawer */
/* --- 1c. TYPE ---------------------------------------------------------- */
--font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--head: "Fraunces", Georgia, "Times New Roman", serif;
/* --- 1d. SPACING — an 8px scale ---------------------------------------- */
--sp-1: .5rem; /* 8px */
--sp-2: 1rem; /* 16px */
--sp-3: 1.5rem; /* 24px */
--sp-4: 2rem; /* 32px */
--sp-5: 3rem; /* 48px */
--sp-6: 4rem; /* 64px */
--sp-7: 6rem; /* 96px */
/* --- 1e. SHAPE + ELEVATION --------------------------------------------- */
--radius: 18px;
--radius-sm: 10px;
--radius-lg: 26px;
--shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .05);
--shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 10px 22px -6px rgba(16, 24, 40, .11);
--shadow-lg: 0 4px 8px rgba(16, 24, 40, .04), 0 24px 48px -12px rgba(16, 24, 40, .18);
/* --- 1f. MEASURE + CHROME ---------------------------------------------- */
/* The layout runs the full width of the screen. The gutter is the only
thing holding content off the edges, so it grows with the viewport. */
--wrap: 100%;
--gutter: clamp(16px, 2.6vw, 56px);
--topbar-h: 42px;
--header-h: 80px;
/* --- 1g. MOTION --------------------------------------------------------
One easing curve and three durations keep every transition on-brand. */
--ease: cubic-bezier(.22, .61, .36, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--t-fast: .18s;
--t-med: .3s;
--t-slow: .6s;
color-scheme: light; /* the site ships light-only */
}
/* ==========================================================================
2. RESET
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 110px; /* keeps anchor targets clear of the header */
}
body {
margin: 0;
font-family: var(--font);
font-size: 1rem;
line-height: 1.75;
color: var(--fg);
background: var(--surface);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
ul, ol { padding-left: 1.25em; }
figure { margin: 0; }
table { border-collapse: collapse; }
button { font: inherit; }
/* A single focus style for the whole site — gold reads on light and dark. */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
/* ==========================================================================
3. TYPOGRAPHY
Display serif for h1/h2 (voice), sans for h3 down (clarity).
Every size uses clamp(), so type scales fluidly with no breakpoint jumps.
========================================================================== */
h1, h2, h3, h4, h5, h6 {
color: var(--fg-strong);
line-height: 1.22;
margin: 0 0 .6em;
text-wrap: balance;
}
h1, h2 {
font-family: var(--head);
font-weight: 600;
font-variation-settings: "SOFT" 0, "WONK" 0;
letter-spacing: -.015em;
}
h1 { font-size: clamp(2.15rem, 1.35rem + 2.6vw, 3.5rem); line-height: 1.1; }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.6rem); }
h3, h4, h5, h6 { font-family: var(--font); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: clamp(1.2rem, 1.05rem + .55vw, 1.45rem); }
h4 { font-size: 1.1rem; }
h5 { font-size: 1.02rem; }
h6 { font-size: .94rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong, b { color: var(--fg-strong); font-weight: 700; }
.lead { font-size: 1.14rem; line-height: 1.7; color: var(--fg); }
/* Small uppercase kicker that sits above a heading */
.eyebrow {
display: inline-flex; align-items: center; gap: .55rem;
font-size: .76rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: var(--accent-ink);
margin-bottom: var(--sp-1);
}
.eyebrow::before {
content: ""; width: 22px; height: 2px; border-radius: 2px;
background: var(--gold-warm); flex: none;
}
/* over permanently-dark surfaces the kicker needs the brighter logo gold */
.hero .eyebrow, .section--navy .eyebrow, .page-hero .eyebrow { color: var(--gold); }
.hero .eyebrow::before, .section--navy .eyebrow::before { background: var(--gold); }
/* ==========================================================================
4. LAYOUT PRIMITIVES
========================================================================== */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap); }
/* Body copy still needs a readable line length even though its container
is full width, so the text itself is capped rather than the box.
Remove this rule if you want prose to run edge to edge as well. */
.wrap--narrow .prose > p,
.wrap--narrow .prose > ul,
.wrap--narrow .prose > ol,
.wrap--narrow .prose > blockquote { max-width: 92ch; }
.section { padding: clamp(3.2rem, 1.6rem + 5vw, var(--sp-7)) 0; }
.section--tight { padding: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem) 0; }
.section--alt { background: var(--surface-alt); }
.section--navy { background: var(--navy); color: #c9d2e4; }
.section--navy h1, .section--navy h2, .section--navy h3,
.section--navy h4, .section--navy h5 { color: #fff; }
.section--navy .section-head p { color: #aab6cd; }
.section-head {
max-width: 720px;
margin: 0 auto clamp(2.2rem, 1.4rem + 1.8vw, 3.4rem);
text-align: center;
}
.section-head p { color: var(--fg-mute); font-size: 1.05rem; }
.section-head--left { margin-inline: 0; text-align: left; }
/* The gold rule that marks every section head */
.rule {
width: 54px; height: 3px; border: 0; border-radius: 99px;
background: linear-gradient(90deg, var(--gold), var(--gold-warm));
margin: 0 auto 1.15rem;
position: relative;
}
/* a small dot trailing the rule — a quiet signature mark */
.rule::after {
content: ""; position: absolute; left: 50%; top: 50%;
transform: translate(38px, -50%);
width: 5px; height: 5px; border-radius: 50%; background: var(--gold-warm);
}
.rule--left, .section-head--left .rule { margin-inline: 0; }
/* auto-fit grids — columns reflow on their own, no media queries needed */
.grid { display: grid; gap: clamp(1.1rem, .8rem + .9vw, var(--sp-4)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); }
/* ==========================================================================
5. BUTTONS
One shape, five variants. Each lifts 2px and deepens its shadow on hover,
so the whole site answers a pointer in the same way.
========================================================================== */
.btn {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
padding: .82rem 1.7rem;
border: 2px solid transparent;
border-radius: var(--radius-sm);
font-family: var(--font); font-weight: 700; font-size: .94rem; line-height: 1.2;
cursor: pointer; text-align: center;
transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
background var(--t-med) var(--ease), color var(--t-med) var(--ease),
border-color var(--t-med) var(--ease);
}
/* a light sweep travels across the button on hover */
.btn::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
transform: translateX(-100%);
transition: transform .65s var(--ease-out);
pointer-events: none;
}
.btn:hover::after { transform: translateX(100%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1em; height: 1em; fill: currentColor; flex: none; position: relative; }
.btn--primary { background: var(--gold-warm); color: var(--navy); box-shadow: 0 4px 12px rgba(233, 167, 44, .34); }
.btn--primary:hover { background: var(--gold); color: var(--navy); box-shadow: 0 8px 22px rgba(233, 167, 44, .46); }
.btn--solid { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }
.btn--solid:hover { background: var(--navy-800); color: #fff; box-shadow: var(--shadow); }
.btn--ghost { border-color: var(--line); color: var(--fg-strong); background: var(--card); }
.btn--ghost:hover { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: var(--shadow); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--gold); color: var(--navy); }
.btn--on-dark { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--on-dark:hover { background: #fff; color: var(--navy); border-color: #fff; }
/* ==========================================================================
6. TOPBAR / HEADER / NAVIGATION
========================================================================== */
/* --- scroll progress bar (pinned above everything) ---------------------- */
.scroll-progress {
position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120;
background: linear-gradient(90deg, var(--gold), var(--gold-warm), var(--blue));
transform: scaleX(0); transform-origin: 0 50%;
will-change: transform;
pointer-events: none;
}
/* --- utility strip above the header ------------------------------------- */
.topbar {
background: var(--navy-deep);
color: #b8c3d8;
font-size: .84rem; line-height: 1.4;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar__inner {
min-height: var(--topbar-h);
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-2); flex-wrap: wrap; padding-block: .4rem;
}
.topbar__list { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.topbar__address { display: inline-flex; align-items: center; gap: .45rem; }
.topbar a { color: #d5dded; display: inline-flex; align-items: center; gap: .45rem; }
.topbar a:hover { color: var(--gold); }
.topbar svg { width: 14px; height: 14px; fill: var(--gold); flex: none; }
.topbar__social { display: flex; gap: .55rem; }
.topbar__social a {
width: 28px; height: 28px; border-radius: 50%;
background: rgba(255,255,255,.1);
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.topbar__social a:hover { background: var(--gold); transform: translateY(-2px); }
.topbar__social a:hover svg { fill: var(--navy); }
.topbar__social svg { width: 14px; height: 14px; fill: #fff; }
/* --- sticky header ------------------------------------------------------
JS adds .is-stuck past 8px of scroll: the bar shrinks and solidifies. */
.site-header {
position: sticky; top: 0; z-index: 60;
border-bottom: 1px solid var(--line);
transition: box-shadow var(--t-med) var(--ease);
}
/* The frosted background lives on a pseudo-element, NOT on .site-header
itself. backdrop-filter (like transform and filter) makes an element the
containing block for any position:fixed descendant — and the mobile nav
drawer is a fixed descendant of this header. With the filter on the
header, the drawer's top/right/bottom resolved against the header box
instead of the viewport, so it rendered ~65px tall inside the header
rather than full height down the side of the screen.
A pseudo-element is not an ancestor of the drawer, so it is safe here. */
.site-header::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: var(--header-bg);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
transition: background var(--t-med) var(--ease);
pointer-events: none;
}
.site-header__inner { position: relative; z-index: 1; }
.site-header.is-stuck { box-shadow: var(--shadow); }
.site-header.is-stuck::before { background: var(--header-bg-solid); }
.site-header__inner {
min-height: var(--header-h);
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
transition: min-height var(--t-med) var(--ease);
}
/* the header shrinks once the page has scrolled */
.site-header.is-stuck .site-header__inner { min-height: 64px; }
/* --- brand mark ----------------------------------------------------------
jps-logo.png is the navy JGi badge + wordmark on a transparent ground
(265x105). It reads correctly on the light header as-is; on the dark
header the navy would disappear, so it sits on a white plate there. */
.brand { display: inline-flex; align-items: center; gap: .7rem; flex: none; }
.brand img {
height: 52px; width: auto; /* height, not max-height, so the
box never depends on load order */
transition: height var(--t-med) var(--ease);
}
.site-header.is-stuck .brand img { height: 42px; }
.brand__text { display: none; }
/* --- desktop navigation -------------------------------------------------- */
/* Close button. Only exists in drawer mode — on desktop the nav is inline
and there is nothing to close. */
.nav-close { display: none; }
.nav { display: flex; align-items: center; gap: .15rem; }
.nav > ul { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav a {
position: relative; display: block;
padding: .55rem .82rem;
color: var(--fg-strong); font-weight: 600; font-size: .92rem;
border-radius: 8px; white-space: nowrap;
transition: color var(--t-fast) var(--ease);
}
/* animated underline that grows from the left on hover */
.nav > ul > li > a::before {
content: ""; position: absolute; left: .82rem; right: .82rem; bottom: .3rem;
height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--gold), var(--gold-warm));
transform: scaleX(0); transform-origin: left;
transition: transform var(--t-med) var(--ease-out);
}
.nav > ul > li > a:hover::before,
.nav > ul > li.is-current > a::before { transform: scaleX(1); }
.nav > ul > li > a:hover { color: var(--link); }
.nav li.is-current > a { color: var(--link); }
/* dropdown parents get a chevron that flips when the menu opens */
.nav .has-sub { position: relative; }
.nav .has-sub > a::after {
content: ""; display: inline-block; vertical-align: middle;
width: .38em; height: .38em; margin-left: .45em; margin-top: -.25em;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); opacity: .55;
transition: transform var(--t-fast) var(--ease);
}
.nav .sub {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 5;
min-width: 252px; padding: .5rem;
list-style: none; margin: 0;
background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98);
transform-origin: top left;
transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out), visibility var(--t-fast);
}
/* :focus-within keeps the menu reachable by keyboard, not just mouse */
.nav .has-sub:hover > .sub,
.nav .has-sub:focus-within > .sub { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.nav .sub a { padding: .58rem .8rem; font-size: .9rem; font-weight: 500; color: var(--fg); }
.nav .sub a:hover { background: var(--tint); color: var(--fg-strong); }
/* The right-hand controls travel together, so the header only ever splits
three ways: brand | nav | actions. */
.header-actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.header-cta { flex: none; }
/* --- hamburger (mobile only) --------------------------------------------- */
.nav-toggle {
display: none; flex: none;
width: 46px; height: 46px; padding: 0;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--card); cursor: pointer;
align-items: center; justify-content: center;
}
.nav-toggle span { position: relative; display: block; width: 20px; height: 2px; background: var(--fg-strong); border-radius: 2px; transition: background var(--t-fast) var(--ease); }
.nav-toggle span::before, .nav-toggle span::after {
content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--fg-strong); border-radius: 2px;
transition: transform var(--t-med) var(--ease), top var(--t-med) var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
/* the three bars morph into an X */
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
.nav-scrim {
position: fixed; inset: 0; z-index: 70;
background: var(--scrim);
opacity: 0; visibility: hidden;
transition: opacity var(--t-med) var(--ease), visibility var(--t-med);
}
body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }
/* .site-header carries z-index:60 and so forms a stacking context: the
drawer's z-index:80 only ranks INSIDE that context, which left the whole
header below the scrim's z-index:70. The scrim then covered the drawer
and swallowed taps on the menu links. Lift the header over the scrim
while the drawer is open. */
body.nav-open .site-header { z-index: 90; }
/* ==========================================================================
7. HEROES
========================================================================== */
/* --- homepage hero ------------------------------------------------------- */
.hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: -8% 0 0; z-index: -3; will-change: transform; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Two stacked layers: a directional scrim for legibility, plus a warm gold
wash from the corner that ties the photograph to the brand. */
.hero::after {
content: ""; position: absolute; inset: 0; z-index: -2;
background:
radial-gradient(120% 90% at 92% 8%, rgba(233, 167, 44, .20) 0%, transparent 58%),
linear-gradient(100deg, rgba(8, 20, 40, .94) 0%, rgba(12, 30, 62, .82) 42%, rgba(20, 45, 82, .5) 100%);
}
/* --- slow-drifting blobs behind the hero copy ---------------------------- */
.hero__shapes { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__shape {
position: absolute; border-radius: 50%;
filter: blur(60px); opacity: .35;
will-change: transform;
}
.hero__shape--1 { width: 380px; height: 380px; top: -8%; left: -6%; background: radial-gradient(circle, rgba(233,167,44,.75), transparent 70%); animation: drift-a 22s var(--ease) infinite alternate; }
.hero__shape--2 { width: 300px; height: 300px; bottom: -12%; left: 34%; background: radial-gradient(circle, rgba(42,109,150,.8), transparent 70%); animation: drift-b 27s var(--ease) infinite alternate; }
.hero__shape--3 { width: 260px; height: 260px; top: 12%; right: 6%; background: radial-gradient(circle, rgba(255,194,14,.55), transparent 70%); animation: drift-c 19s var(--ease) infinite alternate; }
@keyframes drift-a { to { transform: translate3d(70px, 50px, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-60px, -40px, 0) scale(1.2); } }
@keyframes drift-c { to { transform: translate3d(-50px, 60px, 0) scale(.88); } }
/* The element is also a .wrap, so capping IT at 760px would let the wrap's
auto margins centre the whole block and pull the copy away from the left
edge the logo and nav sit on. Cap the children instead: the block keeps
the page gutter, the text keeps a readable measure. */
.hero__inner { padding-block: clamp(4.5rem, 2rem + 10vw, 9rem); position: relative; }
.hero__inner > * { max-width: 760px; }
.hero h1 { color: #fff; margin-bottom: 1.1rem; }
.hero p { font-size: 1.14rem; color: #d3ddee; margin-bottom: var(--sp-4); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }
/* --- inner page banner --------------------------------------------------- */
.page-hero { position: relative; isolation: isolate; color: #fff; background: var(--navy); overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.page-hero::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(110% 100% at 95% 0%, rgba(233, 167, 44, .16) 0%, transparent 60%),
linear-gradient(100deg, rgba(12, 24, 50, .94), rgba(31, 73, 112, .74));
}
.page-hero__inner { padding-block: clamp(3rem, 1.8rem + 4vw, 4.5rem); }
.page-hero h1 { color: #fff; margin-bottom: 0; }
.page-hero__sub { color: #d3ddee; max-width: 60ch; margin: .9rem 0 0; font-size: 1.05rem; }
/* --- breadcrumb ----------------------------------------------------------
Sits above the page title as the trail the visitor arrived by. Marked up
as nav > ol so it is announced as a list and can be skipped by landmark. */
.breadcrumb { font-size: .85rem; margin: 0 0 .9rem; }
.breadcrumb ol {
display: flex; flex-wrap: wrap; align-items: center;
gap: .55rem; list-style: none; margin: 0; padding: 0;
}
.breadcrumb li { display: flex; align-items: center; gap: .55rem; color: #aebbd4; }
/* chevron separator, drawn rather than typed so it never wraps alone */
.breadcrumb li + li::before {
content: ""; flex: none;
width: 5px; height: 5px;
border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
transform: rotate(45deg); opacity: .5;
}
.breadcrumb a { color: #dfe7f4; border-radius: 3px; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb [aria-current] { color: #fff; font-weight: 600; }
/* ==========================================================================
8. CARDS, FEATURES, STATS
========================================================================== */
/* --- icon card ----------------------------------------------------------- */
.card {
position: relative; overflow: hidden;
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.7rem;
box-shadow: var(--shadow-sm);
transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
/* a gold bar wipes across the top edge on hover */
.card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--gold), var(--gold-warm));
transform: scaleX(0); transform-origin: left;
transition: transform var(--t-med) var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--gold-warm); }
.card:hover::before { transform: scaleX(1); }
.card h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.card h3:last-child { margin-bottom: 0; }
.card p { font-size: .95rem; color: var(--fg-mute); margin-bottom: 0; }
.card__icon {
width: 58px; height: 58px; margin-bottom: 1.1rem;
display: grid; place-items: center;
background: var(--gold-100); border-radius: 14px;
transition: background var(--t-med) var(--ease), transform var(--t-med) var(--ease-out);
}
.card:hover .card__icon { background: #fbe9b8; transform: scale(1.08) rotate(-4deg); }
.card__icon img { width: 32px; height: 32px; object-fit: contain; }
/* --- image + caption card ------------------------------------------------ */
.feature {
display: flex; flex-direction: column; overflow: hidden;
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-sm);
transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.feature__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-alt); }
.feature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.feature:hover .feature__img img { transform: scale(1.07); }
.feature__body { padding: 1.3rem 1.45rem 1.55rem; }
.feature__body h3, .feature__body h4 { margin-bottom: .35rem; font-size: 1.06rem; }
.feature__body p { font-size: .93rem; color: var(--fg-mute); margin-bottom: 0; }
/* --- stat strip ----------------------------------------------------------
JS counts these up when they scroll into view (see data-count in the HTML). */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); }
.stat { text-align: center; position: relative; }
/* hairline separators between stats, never before the first */
.stat + .stat::before {
content: ""; position: absolute; left: -.8rem; top: 15%; bottom: 15%;
width: 1px; background: rgba(255,255,255,.14);
}
.stat__num {
display: block;
font-family: var(--head); font-weight: 600;
font-size: clamp(2.1rem, 1.5rem + 2vw, 3.1rem);
color: var(--gold); line-height: 1.05;
font-variant-numeric: tabular-nums; /* stops the width jittering while counting */
}
.stat__label { font-size: .9rem; color: #aab6cd; }
/* ==========================================================================
9. SPLIT (media beside text)
========================================================================== */
.split { display: grid; gap: clamp(1.8rem, 1rem + 3vw, 3.8rem); align-items: center; }
@media (min-width: 900px) {
.split { grid-template-columns: 1fr 1fr; }
.split--wide-text { grid-template-columns: 1.1fr 1fr; }
}
.split__media { position: relative; }
/* Explicit layers: the image on 1, the decorative frame on 0. Negative
z-index would escape the parent on some backgrounds and vanish. */
.split__media img {
position: relative; z-index: 1;
width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
transition: transform var(--t-slow) var(--ease-out);
}
.split__media:hover img { transform: scale(1.02); }
.split__media::before {
content: ""; position: absolute; inset: auto auto -14px -14px;
width: 58%; height: 58%; z-index: 0;
border-left: 3px solid var(--gold-warm); border-bottom: 3px solid var(--gold-warm);
border-bottom-left-radius: var(--radius-lg);
opacity: .55;
}
.split--reverse .split__media { order: 2; }
/* --- pull quote ---------------------------------------------------------- */
.quote-card {
background: var(--card); border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: clamp(1.7rem, 1.2rem + 1.4vw, 2.8rem);
border-top: 4px solid var(--gold-warm);
}
.quote-card blockquote { margin: 0 0 1.3rem; font-size: 1.04rem; color: var(--fg); }
.quote-card blockquote p:first-child::before {
content: "\201C"; color: var(--gold-warm); font-size: 2.6rem; line-height: 0;
vertical-align: -.35em; margin-right: .08em; font-family: var(--head);
}
.quote-card cite { display: block; font-style: normal; }
.quote-card cite b { display: block; color: var(--fg-strong); font-size: 1.05rem; font-family: var(--head); font-weight: 600; }
.quote-card cite span { font-size: .88rem; color: var(--fg-mute); }
.portrait { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }
/* ==========================================================================
10. PROSE — the body of the generated inner pages
========================================================================== */
.prose { font-size: 1.04rem; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2.3em; }
.prose h3, .prose h4 { margin-top: 1.9em; }
.prose h2:first-child, .prose h3:first-child, .prose h4:first-child { margin-top: 0; }
/* h4 in prose is a sub-sub-heading: a gold tick makes the level legible */
.prose h4 { padding-left: .85rem; border-left: 3px solid var(--gold-warm); line-height: 1.4; }
.prose img { border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-inline: auto; }
.prose figure img { width: 100%; }
/* portraits pasted in at native pixel size used to render tiny — cap them */
.prose img[width][height] { max-width: 100%; }
.prose > img { max-width: min(100%, 720px); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--accent-ink); }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
.prose a:hover { text-decoration-color: currentColor; }
.prose blockquote {
margin: 1.7em 0; padding: .3em 0 .3em 1.5em;
border-left: 4px solid var(--gold-warm); color: var(--fg); font-size: 1.05rem;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
/* Name / role pairs recovered from the original site */
.prose .byline { margin-top: .8em; padding-left: var(--sp-2); border-left: 3px solid var(--gold-warm); }
.prose .byline b { display: block; font-family: var(--head); font-size: 1.06rem; color: var(--fg-strong); font-weight: 600; }
.prose .byline span { display: block; font-size: .89rem; color: var(--fg-mute); }
/* Blocks dropped into prose keep the prose rhythm */
.prose .grid, .prose .gallery-grid, .prose .video-embed, .prose .table-wrap { margin-top: 2.1em; }
.prose .grid + h2, .prose .gallery-grid + h2, .prose .table-wrap + h3 { margin-top: 2.3em; }
.prose .card p, .prose .feature__body p { margin-bottom: 0; }
.prose .video-embed video { width: 100%; height: 100%; object-fit: cover; }
/* --- tick list ----------------------------------------------------------- */
.checklist { list-style: none; padding: 0; display: grid; gap: .85rem; }
.checklist li { position: relative; padding-left: 2.2rem; }
.checklist li::before {
content: ""; position: absolute; left: 0; top: .32em;
width: 1.4rem; height: 1.4rem; border-radius: 50%;
background: var(--gold-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6d05' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / .85rem no-repeat;
}
.checklist li::marker { content: none; }
/* ==========================================================================
11. TABLES + ACCORDION
========================================================================== */
.table-wrap {
overflow-x: auto; -webkit-overflow-scrolling: touch;
border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.table-wrap table { width: 100%; min-width: 620px; font-size: .93rem; background: var(--card); }
.table-wrap th, .table-wrap td { padding: .85rem 1.05rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap thead th {
background: var(--navy); color: #fff; font-weight: 700; font-size: .84rem;
letter-spacing: .04em; text-transform: uppercase; border-bottom: 0;
}
.table-wrap tbody tr:nth-child(even) { background: var(--surface-alt); }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr { transition: background var(--t-fast) var(--ease); }
.table-wrap tbody tr:hover { background: var(--tint); }
/* --- mandatory disclosure (CBSE Appendix-IX) -----------------------------
A long compliance page: five lettered sections of tables. The headings
need to be findable at a glance, and every row must stay legible, so
nothing here is hidden behind a disclosure widget. */
/* Each lettered section is an accordion panel. The summary carries the gold
diamond that used to mark the standalone headings, so the page still reads
as a set of numbered sections rather than a generic FAQ. */
.accordion--disclosure { gap: .65rem; }
.accordion--disclosure > details { scroll-margin-top: 120px; }
.accordion--disclosure summary {
font-size: clamp(1.02rem, .96rem + .35vw, 1.18rem);
padding-block: 1.15rem;
}
.accordion--disclosure summary::before {
content: ""; display: inline-block; vertical-align: middle;
width: 8px; height: 8px; margin-right: .65rem; border-radius: 2px;
background: var(--gold-warm); transform: rotate(45deg);
}
/* an open panel gets a tinted header strip so the section in view is obvious */
.accordion--disclosure details[open] > summary {
background: var(--surface-alt);
border-bottom: 1px solid var(--line);
}
.accordion--disclosure details.is-closing > summary { background: transparent; border-bottom-color: transparent; }
.accordion--disclosure .accordion__body { padding-top: 1.2rem; }
.accordion--disclosure .table-wrap { box-shadow: none; }
.disclosure__sub { margin: 1.8rem 0 .8rem; font-size: 1.02rem; color: var(--fg-strong); }
.disclosure__note { margin-top: .9rem; font-size: .88rem; color: var(--fg-mute); }
/* Column sizing. Left to itself the browser hands the serial-number column
as much room as its "Sl. No." heading wants, opening a wide empty gutter
before the real content. Every disclosure table pins that first column;
the rest depends on the table's shape, hence the three modifiers. */
.table-wrap--disclosure th:first-child,
.table-wrap--disclosure td:first-child {
width: 64px; text-align: center; white-space: nowrap;
}
/* key/value tables (A, B, C, E): label then value */
.table-wrap--kv th:nth-child(2) { width: 44%; }
/* staff table (D): label, a narrow count, then names */
.table-wrap--staff th:nth-child(2) { width: 30%; }
.table-wrap--staff th:nth-child(3) { width: 16%; }
/* result tables: a narrow year, then four even numeric columns */
.table-wrap--result th:nth-child(2) { width: 12%; }
.table-wrap--result th:nth-child(n+3) { width: 19%; }
.table-wrap--result td:nth-child(n+2) { text-align: center; }
/* Prescribed Books. Same reasoning as the disclosure tables: left to itself
the browser hands the serial column the full width of its "SL.NO." heading
and opens a dead gutter before the real content.
A width on a cell is only a hint in an auto-layout table — surplus space is
still shared out across every column, which is why 64px alone did nothing
here. Making one content column greedy absorbs that surplus instead, so the
serial column keeps its width. The greedy column differs per shape, hence a
modifier each; a single nth-child rule would mis-size the other shape. */
.table-wrap--index th:first-child,
.table-wrap--index td:first-child {
width: 64px; text-align: center; white-space: nowrap;
}
/* supply lists: SL.NO. | PARTICULARS | COMPANY NAME | SET QTY.
Keeping the headings on one line gives the right-hand columns a sensible
minimum, so the greedy PARTICULARS column cannot squeeze them to nothing. */
.table-wrap--supply th:nth-child(2) { width: 100%; }
.table-wrap--supply thead th { white-space: nowrap; }
/* four-column booklists: SL.NO. | Code | Subject | Book Name */
.table-wrap--booklist th:last-child { width: 100%; }
.table-wrap--booklist thead th { white-space: nowrap; }
.table-wrap--booklist td:nth-child(2) { text-align: center; white-space: nowrap; }
/* sub-rows under "Total No. of Teachers" (PGT / TGT / PRT / NTT) */
.table-wrap td.is-sub { padding-left: 2.4rem; position: relative; color: var(--fg-mute); }
.table-wrap td.is-sub::before {
content: ""; position: absolute; left: 1.35rem; top: 1.35em;
width: .55rem; height: 1px; background: var(--gold-warm);
}
/* a document link, so a PDF never looks like ordinary body text */
.doc-link {
display: inline-flex; align-items: center; gap: .45rem;
padding: .3rem .7rem .3rem .3rem;
border-radius: 99px;
color: var(--link); font-weight: 600; font-size: .9rem;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.doc-link::before {
content: ""; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
background: var(--gold-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6d05' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 12l5 5 5-5'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E") center / .72rem no-repeat;
}
.doc-link:hover { background: var(--tint); color: var(--fg-strong); }
/* the format label (PDF / YouTube) rides along quietly */
.doc-link__meta {
font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--fg-mute); border: 1px solid var(--line); border-radius: 4px; padding: 0 .3rem;
}
/* two documents in one cell stack rather than run together */
.table-wrap td .doc-link + .doc-link { margin-top: .35rem; }
/* An outstanding item, worded ("To be uploaded"). Deliberately visible
rather than blank, so an inspector — and the school — can see the gap. */
.pending {
display: inline-block; white-space: nowrap;
font-size: .82rem; font-style: italic; color: var(--fg-mute);
background: color-mix(in srgb, var(--fg-mute) 7%, transparent);
border: 1px dashed var(--line); border-radius: 4px;
padding: .1rem .5rem;
}
/* A cell with genuinely nothing in it. A quiet dash, not a chip — these are
numerous, and 27 hatched boxes would read as damage rather than as data. */
.empty { color: var(--fg-mute); opacity: .55; }
/* --- accordion (FAQ, mandatory disclosure) -------------------------------
Uses native . The body is wrapped in a grid row that animates
from 0fr to 1fr, which gives a smooth open/close at any content height. */
.accordion { display: grid; gap: .8rem; }
.accordion details {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-sm); overflow: hidden;
transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.accordion details[open] { border-color: var(--gold-warm); box-shadow: var(--shadow); }
.accordion summary {
list-style: none; cursor: pointer;
padding: 1.1rem 3.3rem 1.1rem 1.4rem;
position: relative;
font-weight: 700; font-size: 1rem; color: var(--fg-strong);
transition: background var(--t-fast) var(--ease);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
content: ""; position: absolute; right: 1.3rem; top: 50%;
width: .58rem; height: .58rem; margin-top: -.42rem;
border-right: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink);
transform: rotate(45deg);
transition: transform var(--t-med) var(--ease), margin-top var(--t-med) var(--ease);
}
.accordion details[open] summary::after { transform: rotate(-135deg); margin-top: -.15rem; }
.accordion summary:hover { background: var(--surface-alt); }
.accordion__body { padding: 0 1.4rem 1.4rem; font-size: .98rem; }
.accordion__body > *:first-child { margin-top: 0; }
.accordion__body .table-wrap { margin-top: .4rem; }
/* JS wraps the body so it can animate; this is the animating row */
.accordion details .accordion__wrap {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows var(--t-med) var(--ease-out);
}
.accordion details[open] .accordion__wrap { grid-template-rows: 1fr; }
.accordion details .accordion__wrap > * { overflow: hidden; }
/* While closing, the panel still has [open] (so its content is still in the
box) but the row is collapsing. JS drops [open] once this finishes.
Must come after the [open] rule above — same specificity, source order
decides. */
.accordion details.is-closing .accordion__wrap { grid-template-rows: 0fr; }
/* the chevron turns back in step with the collapse */
.accordion details.is-closing > summary::after { transform: rotate(45deg); margin-top: -.42rem; }
.accordion details.is-closing > summary { background: transparent; }
/* ==========================================================================
12. GALLERY + LIGHTBOX
========================================================================== */
.gallery-filters { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; margin-bottom: 2.2rem; }
.gallery-filters button {
padding: .55rem 1.3rem; border-radius: 99px;
border: 1px solid var(--line); background: var(--card); color: var(--fg);
font-size: .89rem; font-weight: 700; cursor: pointer;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.gallery-filters button:hover { border-color: var(--gold-warm); color: var(--fg-strong); transform: translateY(-2px); }
.gallery-filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; }
.gallery-grid figure {
position: relative; margin: 0; overflow: hidden;
border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--surface-alt);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.gallery-grid figure:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.gallery-grid figure:hover img { transform: scale(1.08); }
.gallery-grid figcaption {
position: absolute; inset: auto 0 0 0; padding: 1.8rem .95rem .85rem;
font-size: .87rem; color: #fff;
background: linear-gradient(transparent, rgba(8, 16, 36, .88));
opacity: 0; transform: translateY(6px);
transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.gallery-grid figure:hover figcaption { opacity: 1; transform: none; }
.gallery-grid button {
position: absolute; inset: 0; width: 100%; height: 100%;
border: 0; background: transparent; padding: 0; cursor: zoom-in;
}
.gallery-grid figure[hidden] { display: none; }
.lightbox {
position: fixed; inset: 0; z-index: 130;
background: rgba(6, 12, 26, .95);
display: none; align-items: center; justify-content: center; padding: 2.5rem var(--sp-2);
}
.lightbox[open], .lightbox.is-open { display: flex; animation: fade-in var(--t-med) var(--ease); }
.lightbox img { max-width: min(1100px, 94vw); max-height: 84vh; width: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); animation: zoom-in var(--t-med) var(--ease-out); }
.lightbox__cap { position: absolute; left: 0; right: 0; bottom: 1.1rem; text-align: center; color: #d5dded; font-size: .9rem; }
.lightbox__btn {
position: absolute; top: 50%; transform: translateY(-50%);
width: 48px; height: 48px; border-radius: 50%;
border: 0; background: rgba(255, 255, 255, .13); color: #fff;
font-size: 1.5rem; line-height: 1; cursor: pointer;
display: grid; place-items: center;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lightbox__btn:hover { background: var(--gold); color: var(--navy); }
.lightbox__prev { left: 1.2rem; }
.lightbox__next { right: 1.2rem; }
.lightbox__close { top: 1.1rem; right: 1.2rem; transform: none; width: 42px; height: 42px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes zoom-in { from { opacity: 0; transform: scale(.94); } }
/* ==========================================================================
13. SLIDER, MARQUEE, EMBEDS
========================================================================== */
.slider { position: relative; overflow: hidden; }
.slider__track { display: flex; transition: transform .6s var(--ease-out); }
.slider__slide { flex: 0 0 100%; }
.slider__dots { position: absolute; left: 0; right: 0; bottom: 1.1rem; display: flex; gap: .45rem; justify-content: center; }
.slider__dots button {
width: 10px; height: 10px; padding: 0; border-radius: 50%;
border: 0; background: rgba(255, 255, 255, .45); cursor: pointer;
transition: width var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.slider__dots button[aria-current="true"] { background: var(--gold); width: 26px; border-radius: 99px; }
.marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: var(--sp-5); width: max-content; animation: marquee 38s linear infinite; }
.marquee img { height: 52px; width: auto; object-fit: contain; opacity: .6; filter: grayscale(1); transition: opacity var(--t-fast) var(--ease), filter var(--t-fast) var(--ease); }
.marquee img:hover { opacity: 1; filter: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-embed { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); line-height: 0; border: 1px solid var(--line); }
.map-embed iframe { width: 100%; height: 440px; border: 0; }
/* ==========================================================================
14. CONTACT + FORMS
========================================================================== */
.contact-grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, var(--sp-5)); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.15fr; } }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.info-list li { display: flex; gap: 1.05rem; align-items: flex-start; }
.info-list__icon {
flex: none; width: 48px; height: 48px; border-radius: 14px;
background: var(--gold-100); display: grid; place-items: center;
transition: transform var(--t-med) var(--ease-out);
}
.info-list li:hover .info-list__icon { transform: scale(1.08) rotate(-4deg); }
.info-list__icon svg { width: 20px; height: 20px; fill: #8a6d05; }
/* h3 or h4 depending on the page's heading depth — both look the same here */
.info-list h3, .info-list h4 { margin-bottom: .2rem; font-size: 1rem; padding: 0; border: 0; }
.info-list p, .info-list a { margin: 0; font-size: .97rem; color: var(--fg); display: block; }
.info-list a:hover { color: var(--link); }
/* --- form ----------------------------------------------------------------
Validation states are driven by JS adding .is-invalid / .is-valid to the
field wrapper, so the styling never depends on :invalid firing too early. */
.form { display: grid; gap: 1.05rem; }
.form__row { display: grid; gap: 1.05rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__field { position: relative; }
.form label { display: block; font-size: .87rem; font-weight: 700; color: var(--fg-strong); margin-bottom: .38rem; }
.form input, .form select, .form textarea {
width: 100%; padding: .8rem 1rem;
font: inherit; font-size: .95rem; color: var(--fg-strong);
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus {
outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
}
.form textarea { min-height: 140px; resize: vertical; }
.form__note { font-size: .82rem; color: var(--fg-mute); }
/* invalid */
.form__field.is-invalid input,
.form__field.is-invalid select,
.form__field.is-invalid textarea { border-color: #d1424a; background: color-mix(in srgb, #d1424a 6%, var(--card)); }
.form__field.is-invalid input:focus,
.form__field.is-invalid textarea:focus { box-shadow: 0 0 0 3px rgba(209, 66, 74, .2); }
.form__error {
display: none;
margin: .4rem 0 0; font-size: .82rem; font-weight: 600; color: #d1424a;
animation: shake .35s var(--ease);
}
.form__field.is-invalid .form__error { display: block; }
/* valid — a small tick fades in at the end of the field */
.form__field.is-valid input,
.form__field.is-valid select,
.form__field.is-valid textarea { border-color: #2f9e6b; }
.form__field.is-valid::after {
content: ""; position: absolute; right: .9rem; top: 2.45rem;
width: 1.1rem; height: 1.1rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f9e6b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
animation: pop var(--t-med) var(--ease-out);
pointer-events: none;
}
/* the textarea tick would sit over the text, so it is placed at the corner */
.form__field.is-valid:has(textarea)::after { top: auto; bottom: .9rem; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } }
/* --- submission success --------------------------------------------------- */
.form__success {
display: none;
margin-top: var(--sp-2); padding: 1.1rem 1.3rem;
background: color-mix(in srgb, #2f9e6b 12%, var(--card));
border: 1px solid color-mix(in srgb, #2f9e6b 45%, transparent);
border-radius: var(--radius-sm);
color: var(--fg-strong); font-size: .94rem;
align-items: center; gap: .8rem;
}
.form__success.is-shown { display: flex; animation: slide-up var(--t-med) var(--ease-out); }
.form__success svg { width: 22px; height: 22px; flex: none; fill: none; stroke: #2f9e6b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* the tick draws itself on */
.form__success.is-shown svg polyline {
stroke-dasharray: 26; stroke-dashoffset: 26;
animation: draw .5s var(--ease-out) .15s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(10px); } }
/* ==========================================================================
15. CTA BAND + FOOTER
========================================================================== */
.cta-band {
position: relative; overflow: hidden;
background: linear-gradient(115deg, var(--navy-deep) 0%, var(--navy) 48%, var(--blue-600) 100%);
color: #fff;
}
/* soft gold glow drifting in the top-right corner */
.cta-band::before {
content: ""; position: absolute; top: -40%; right: -8%;
width: 46%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, rgba(233, 167, 44, .22), transparent 68%);
pointer-events: none;
animation: drift-c 24s var(--ease) infinite alternate;
}
.cta-band__inner {
position: relative;
display: grid; gap: var(--sp-3); align-items: center;
padding-block: clamp(2.6rem, 1.6rem + 2.6vw, var(--sp-6));
}
@media (min-width: 860px) { .cta-band__inner { grid-template-columns: 1fr auto; } }
.cta-band h2 { color: #fff; margin-bottom: .4rem; }
.cta-band p { color: #c4d0e6; margin: 0; }
.cta-band__actions { display: flex; gap: .85rem; flex-wrap: wrap; }
.site-footer { background: var(--navy); color: #9dabc4; font-size: .93rem; position: relative; }
.site-footer::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--gold), var(--gold-warm), #8a6d05);
}
.site-footer__main { padding-block: clamp(2.8rem, 1.8rem + 2.8vw, 4.4rem); }
.site-footer__grid { display: grid; gap: 2.2rem; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1040px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.site-footer h2 { color: #fff; font-size: .96rem; margin-bottom: 1.15rem; position: relative; padding: 0 0 .68rem; border: 0; letter-spacing: .02em; }
.site-footer h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; border-radius: 2px; background: var(--gold-warm); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a { color: #b0bdd4; display: inline-block; }
/* footer links nudge right on hover, a cheap but legible affordance */
.site-footer a:hover { color: var(--gold); transform: translateX(3px); }
.site-footer ul a { transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
/* the footer is always dark, so the mark always needs its light plate */
.site-footer__brand img {
height: 54px; width: auto;
background: #fff; padding: .5rem .7rem;
border-radius: var(--radius-sm); box-sizing: content-box;
margin-bottom: 1.2rem;
}
.site-footer__contact li { display: flex; gap: .75rem; align-items: flex-start; }
.site-footer__contact svg { width: 16px; height: 16px; fill: var(--gold-warm); flex: none; margin-top: .32em; }
.site-footer__bottom {
border-top: 1px solid rgba(255, 255, 255, .12);
padding: 1.3rem 0; font-size: .85rem;
display: flex; flex-wrap: wrap; gap: .6rem var(--sp-3); align-items: center; justify-content: space-between;
}
.site-footer__bottom p { margin: 0; }
/* back-to-top; JS toggles .is-visible past a scroll threshold */
.to-top {
position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 50;
width: 46px; height: 46px; border: 0; border-radius: 50%;
background: var(--gold-warm); color: var(--navy); cursor: pointer;
display: grid; place-items: center; box-shadow: var(--shadow);
opacity: 0; visibility: hidden; transform: translateY(10px) scale(.85);
transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease-out),
visibility var(--t-med), background var(--t-fast) var(--ease);
}
.to-top:hover { background: var(--gold); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 18px; height: 18px; fill: currentColor; }
/* ==========================================================================
16. UTILITIES + ANIMATION
========================================================================== */
.visually-hidden {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
z-index: 200; padding: .7rem 1.35rem; background: var(--navy); color: #fff;
border-radius: 0 0 var(--radius-sm) var(--radius-sm); transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-4); }
.mb-3 { margin-bottom: 2.5rem; }
.pt-5 { padding-top: var(--sp-5); }
.flow-actions { display: flex; gap: .85rem; flex-wrap: wrap; }
/* --- page load ----------------------------------------------------------
Pure CSS, so it never depends on JS and can never leave a blank page. */
@keyframes page-in { from { opacity: 0; } }
body { animation: page-in .5s var(--ease) both; }
/* --- scroll reveal -------------------------------------------------------
JS adds .is-in when the element enters the viewport. --d staggers a group
(set inline as style="--d:2" or by JS on grid children). */
.reveal {
opacity: 0; transform: translateY(22px);
transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal--left { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal--zoom { transform: scale(.94); }
.reveal--left.is-in, .reveal--right.is-in, .reveal--zoom.is-in { transform: none; }
/* --- hero entrance -------------------------------------------------------
Each child animates up behind a mask. Runs on load, not on scroll. */
.hero-in > * { animation: hero-rise .9s var(--ease-out) both; }
.hero-in > *:nth-child(1) { animation-delay: .15s; }
.hero-in > *:nth-child(2) { animation-delay: .28s; }
.hero-in > *:nth-child(3) { animation-delay: .41s; }
.hero-in > *:nth-child(4) { animation-delay: .54s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(26px); } }
/* The headline runs its own per-line reveal, so it opts out of the block
entrance above — otherwise the two animations would stack. */
.hero-in > h1 { animation: none; }
/* Headline reveal: each line wipes up from behind its own clipping box. */
.reveal-text { display: block; overflow: hidden; padding-bottom: .06em; }
.reveal-text > span {
display: block;
animation: line-rise 1s var(--ease-out) both;
animation-delay: calc(.2s + var(--i, 0) * .12s);
}
/* Stagger the headline lines by position rather than an inline style. */
.reveal-text:nth-of-type(1) > span { --i: 0; }
.reveal-text:nth-of-type(2) > span { --i: 1; }
.reveal-text:nth-of-type(3) > span { --i: 2; }
.reveal-text:nth-of-type(4) > span { --i: 3; }
@keyframes line-rise { from { transform: translateY(105%); } }
/* --- reduced motion ------------------------------------------------------
Honour the OS setting: kill every decorative animation, keep everything
readable and in its final state. Nothing here is essential to meaning. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
body { animation: none; }
.reveal { opacity: 1; transform: none; transition: none; }
.hero-in > *, .reveal-text > span { animation: none; }
.hero__shape, .marquee__track, .cta-band::before { animation: none; }
.hero__media { transform: none !important; } /* cancels JS parallax */
.btn::after { display: none; }
/* the staggered menu items must not be held invisible by a delay */
body.nav-open .nav > ul > li { animation: none !important; opacity: 1 !important; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
transition-delay: 0s !important;
}
}
/* ==========================================================================
17. RESPONSIVE
The layout above is fluid, so only the navigation — which genuinely
changes mode — needs breakpoints.
========================================================================== */
/* tighten the nav before it has to collapse */
@media (max-width: 1140px) {
.nav a { padding: .55rem .6rem; font-size: .86rem; }
.nav > ul > li > a::before { left: .6rem; right: .6rem; }
.nav .sub { min-width: 220px; }
}
/* --- below 980px the nav becomes a slide-in drawer ----------------------- */
@media (max-width: 980px) {
.nav-toggle { display: inline-flex; }
.header-cta { display: none; } /* the CTA moves inside the drawer */
.nav {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
width: min(370px, 88vw);
/* top padding leaves room for the close button */
padding: 4.6rem 1.3rem 2.5rem;
background: var(--card); box-shadow: -12px 0 44px rgba(8, 14, 30, .28);
display: block; overflow-y: auto;
transform: translateX(102%);
transition: transform var(--t-med) var(--ease-out);
}
/* The open drawer covers the hamburger, so it needs its own way out.
Pinned inside the panel and kept above the scrolling list. */
.nav-close {
display: grid; place-items: center;
position: absolute; top: 1rem; right: 1.2rem; z-index: 2;
width: 44px; height: 44px; padding: 0;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--card); color: var(--fg-strong); cursor: pointer;
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav-close:hover { background: var(--surface-alt); border-color: var(--gold-warm); }
.nav-close svg { width: 15px; height: 15px; fill: currentColor; }
body.nav-open .nav { transform: none; }
.nav > ul { display: block; }
.nav > ul > li { border-bottom: 1px solid var(--line); }
.nav a { padding: .9rem .35rem; font-size: 1rem; border-radius: 0; }
.nav > ul > li > a::before { display: none; }
.nav li.is-current > a { color: var(--link); }
/* menu items slide in one after another once the drawer opens */
body.nav-open .nav > ul > li {
animation: nav-item .4s var(--ease-out) both;
animation-delay: calc(.06s * var(--n, 0) + .1s);
}
@keyframes nav-item { from { opacity: 0; transform: translateX(18px); } }
/* the chevron floats right and flips when its submenu opens */
.nav .has-sub > a::after { float: right; margin-top: .6em; }
.nav .has-sub.is-open > a::after { transform: rotate(-135deg); margin-top: .8em; }
.nav .sub {
position: static; opacity: 1; visibility: visible; transform: none;
border: 0; box-shadow: none; border-radius: 0;
padding: 0 0 .6rem .85rem; min-width: 0;
display: none;
}
.nav .has-sub.is-open > .sub { display: block; }
.nav .sub a { padding: .62rem .35rem; }
.nav__cta { margin-top: 1.5rem; display: block; }
.nav__cta .btn { width: 100%; }
}
/* the in-drawer CTA only ever shows in drawer mode */
@media (min-width: 981px) { .nav__cta { display: none; } }
/* --- tablets ------------------------------------------------------------- */
@media (max-width: 1024px) {
.map-embed iframe { height: 380px; }
}
/* --- phones -------------------------------------------------------------- */
@media (max-width: 760px) {
.topbar__inner { justify-content: center; text-align: center; }
.topbar__list { gap: .9rem; justify-content: center; font-size: .8rem; }
.topbar__address { display: none; } /* too long for a phone strip */
.brand img { max-height: 44px; }
/* full-width tap targets for the primary actions */
.hero__actions .btn, .cta-band__actions .btn { flex: 1 1 100%; }
.stat + .stat::before { display: none; }
.split__media::before { display: none; }
.map-embed iframe { height: 320px; }
.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .75rem; }
.lightbox__prev { left: .4rem; }
.lightbox__next { right: .4rem; }
.accordion summary { padding: 1rem 2.8rem 1rem 1.1rem; font-size: .96rem; }
.accordion__body { padding: 0 1.1rem 1.1rem; }
.hero__shape { filter: blur(44px); opacity: .28; }
}
/* --- very small phones (360px) ------------------------------------------- */
@media (max-width: 400px) {
.brand img { max-height: 38px; }
.nav-toggle { width: 42px; height: 42px; }
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
18. PRINT
Strip the chrome, keep the content, expose link targets.
========================================================================== */
@media print {
.topbar, .site-header, .site-footer, .to-top, .cta-band,
.nav-scrim, .lightbox, .scroll-progress, .hero__shapes { display: none !important; }
body { color: #000; background: #fff; animation: none; }
.section { padding: 1rem 0; }
.section--alt, .section--navy { background: #fff !important; color: #000 !important; }
.reveal { opacity: 1 !important; transform: none !important; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}