/* ========================================================================== Kingdom Foundation Institute Design system + page styles ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Brand — taken from the school crest */ --navy-950: #070d26; --navy-900: #0c1433; --navy-800: #131e4d; --navy-700: #1b2a68; --navy-600: #27397f; --navy-500: #3a4d99; --crimson-700: #8f0f1c; --crimson-600: #b01523; --crimson-500: #c8202f; --crimson-400: #e0454f; --gold-600: #b07d18; --gold-500: #d29a22; --gold-400: #e8b845; --gold-200: #f5dda2; /* Neutrals */ --paper: #ffffff; --cream: #fbf8f2; --cream-2:#f4efe4; --line: #e4ddcf; --line-2: #d6cdb9; --ink: #12172b; --body: #3f4761; --muted: #6b7391; /* On-dark */ --on-dark: #f6f4ee; --on-dark-muted: #b3bad4; --on-dark-line: rgba(255, 255, 255, .14); /* Type */ --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Space */ --wrap: 1200px; --gutter: clamp(1.15rem, 4vw, 2.5rem); /* Applied top AND bottom, so the gap between two sections is double this. */ --section-y: clamp(2.5rem, 5vw, 4.25rem); /* Effects */ --radius: 4px; --radius-lg: 8px; --shadow-sm: 0 1px 2px rgba(12, 20, 51, .06), 0 2px 8px rgba(12, 20, 51, .05); --shadow-md: 0 4px 12px rgba(12, 20, 51, .07), 0 12px 32px rgba(12, 20, 51, .08); --shadow-lg: 0 8px 24px rgba(12, 20, 51, .1), 0 28px 64px rgba(12, 20, 51, .13); --ease: cubic-bezier(.22, .61, .36, 1); } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; /* The closed mobile nav is a position:fixed panel parked off-screen to the right. Being fixed, it escapes any clipping on , so it has to be clipped here or it adds ~315px of horizontal scroll on phones. `clip` (unlike `hidden`) creates no scroll container, so the sticky masthead keeps working. */ overflow-x: clip; } body { margin: 0; background: var(--paper); color: var(--body); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } /* Fallback for engines without `overflow: clip`. Scoped to the breakpoint where the off-screen nav exists, to limit the effect on sticky. */ @supports not (overflow: clip) { @media (max-width: 1180px) { html, body { overflow-x: hidden; } } } img, svg, video { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -.015em; color: var(--ink); font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } a { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { color: var(--crimson-600); } ul, ol { margin: 0; padding: 0; } li { list-style: none; } button { font: inherit; color: inherit; } :focus-visible { outline: 2.5px solid var(--gold-500); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; left: -9999px; z-index: 999; padding: .75rem 1.25rem; background: var(--navy-800); color: #fff; border-radius: 0 0 var(--radius) 0; text-decoration: none; } .skip-link:focus { left: 0; top: 0; color: #fff; } /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 860px; } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(1.85rem, 3.5vw, 2.85rem); } .section--cream { background: var(--cream); } .section--cream-2 { background: var(--cream-2); } .section--navy { background: radial-gradient(120% 100% at 12% 0%, var(--navy-700) 0%, transparent 55%), radial-gradient(90% 80% at 100% 100%, #241a4a 0%, transparent 60%), var(--navy-900); color: var(--on-dark-muted); } .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--on-dark); } .icon { width: 1.5rem; height: 1.5rem; flex: none; } .icon--sm { width: 1.0625rem; height: 1.0625rem; } /* -------------------------------------------------------------------------- 4. Type helpers -------------------------------------------------------------------------- */ .kicker { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem; font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--crimson-600); } .kicker::before { content: ""; width: 1.75rem; height: 2px; background: var(--gold-500); flex: none; } .kicker--center { justify-content: center; } .kicker--light { color: var(--gold-400); } .h-display { font-size: clamp(2.5rem, 5.6vw, 4.25rem); font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 1; line-height: 1.05; letter-spacing: -.025em; } .h-1 { font-size: clamp(2.1rem, 4.4vw, 3.25rem); font-variation-settings: "opsz" 90; } .h-2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-variation-settings: "opsz" 60; } .h-3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-variation-settings: "opsz" 30; } .lede { font-size: clamp(1.09rem, 1.55vw, 1.3rem); line-height: 1.62; color: var(--muted); } .section--navy .lede { color: var(--on-dark-muted); } .prose p + p { margin-top: 0; } .prose > * + * { margin-top: 1.15em; } .rule { width: 3.5rem; height: 3px; margin: 1.6rem 0; background: var(--gold-500); border: 0; } .rule--center { margin-inline: auto; } .section-head { max-width: 720px; margin-bottom: clamp(1.5rem, 2.8vw, 2.25rem); } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .kicker { justify-content: center; } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { --btn-bg: var(--navy-800); --btn-fg: #fff; --btn-bd: var(--navy-800); display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.6rem; border: 1.5px solid var(--btn-bd); border-radius: var(--radius); background: var(--btn-bg); color: var(--btn-fg); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--btn-fg); } .btn:active { transform: translateY(0); } .btn--primary { --btn-bg: var(--crimson-600); --btn-bd: var(--crimson-600); } .btn--primary:hover { --btn-bg: var(--crimson-700); --btn-bd: var(--crimson-700); } .btn--navy { --btn-bg: var(--navy-800); --btn-bd: var(--navy-800); } .btn--navy:hover { --btn-bg: var(--navy-900); --btn-bd: var(--navy-900); } .btn--outline { --btn-bg: transparent; --btn-fg: var(--navy-800); --btn-bd: var(--line-2); } .btn--outline:hover { --btn-bg: var(--navy-800); --btn-fg: #fff; --btn-bd: var(--navy-800); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-bd: var(--on-dark-line); } .btn--ghost:hover { --btn-bg: rgba(255,255,255,.09); --btn-bd: rgba(255,255,255,.35); } .btn--lg { padding: 1.05rem 2rem; font-size: .875rem; } .link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--crimson-600); } .link-arrow .icon { width: 1.15rem; transition: transform .2s var(--ease); } .link-arrow:hover .icon { transform: translateX(5px); } /* -------------------------------------------------------------------------- 6. Utility bar -------------------------------------------------------------------------- */ .utility { background: var(--navy-950); color: var(--on-dark-muted); font-size: .8125rem; } .utility__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 2.75rem; flex-wrap: wrap; } .utility__spacer { margin-left: auto; } .utility__item { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; transition: color .16s var(--ease); } .utility__item:hover { color: var(--gold-400); } .utility__item .icon { color: var(--gold-500); } .utility__social .icon { width: 1.1rem; height: 1.1rem; } /* The full campus address is the longest item here; drop it before the row is forced to wrap onto a second line. */ @media (max-width: 1100px) { .utility__inner > .utility__item:first-child { display: none; } .utility__spacer { margin-left: 0; } .utility__inner { justify-content: center; gap: 1.15rem; } } /* On a phone even phone + email + Facebook will not fit on one line, and the icon was dropping to a second row on its own. Keep the two things a parent would actually tap; Facebook is still linked in the footer. */ @media (max-width: 620px) { .utility { font-size: .75rem; } .utility__inner { gap: .9rem; min-height: 2.4rem; flex-wrap: nowrap; } .utility__item.utility__social { display: none; } .utility__item { white-space: nowrap; } } /* -------------------------------------------------------------------------- 7. Masthead & nav -------------------------------------------------------------------------- */ .masthead { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .25s var(--ease); } /* * Critical: backdrop-filter makes an element a containing block for its * position:fixed descendants. The off-canvas menu lives inside the masthead, * so with the filter on it was being sized against the 73px-tall header * instead of the viewport — opening as a small clipped box with the links * scrolling inside it. Drop the filter wherever that menu exists. * The background is already 96% opaque, so nothing visible is lost. */ @media (max-width: 1180px) { .masthead { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } } .masthead.is-stuck { box-shadow: var(--shadow-md); } .masthead__inner { display: flex; align-items: center; /* Guaranteed breathing room between the crest lockup and the first menu item, even when the nav is at its widest. */ gap: clamp(1.75rem, 4vw, 3.5rem); min-height: 5rem; } .brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; margin-right: auto; /* Critical: without this the brand is shrunk below its own content and the school name spills out of its box and collides with the menu. */ flex-shrink: 0; } .brand__mark { width: 2.85rem; height: auto; flex: none; } .brand__text { display: flex; flex-direction: column; justify-content: center; } .brand__name { font-family: var(--display); font-size: 1.02rem; font-weight: 600; line-height: 1.2; letter-spacing: -.012em; color: var(--navy-900); font-variation-settings: "opsz" 30; white-space: nowrap; } /* Below the desktop nav breakpoint there is room to wrap onto two lines. */ @media (max-width: 1180px) { .brand__name { white-space: normal; } .brand__break { display: block; } } /* Base motto styles must come before the overrides below, or the media queries lose to this rule on source order. */ .brand__motto { font-size: .56rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-600); margin-top: .22rem; white-space: nowrap; } /* On phones the brand sits beside the menu button, so it must be able to shrink rather than run underneath it. */ @media (max-width: 620px) { .brand { gap: .65rem; min-width: 0; flex-shrink: 1; } .brand__text { min-width: 0; } .brand__mark { width: 2.6rem; } .brand__name { font-size: .975rem; } .brand__motto { font-size: .5rem; letter-spacing: .11em; white-space: normal; } } /* Very narrow phones: the crest already carries the motto, so drop the text version rather than let it crowd the menu button. */ @media (max-width: 400px) { .brand__motto { display: none; } } .nav { display: flex; align-items: center; gap: 1.5rem; } .nav__list { display: flex; align-items: center; gap: 1.3rem; } .nav__link { position: relative; display: block; padding: .4rem 0; font-size: .845rem; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; transition: color .16s var(--ease); } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.1rem; height: 2px; background: var(--crimson-500); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); } .nav__link:hover { color: var(--crimson-600); } .nav__link:hover::after, .nav__link.is-current::after { transform: scaleX(1); } .nav__link.is-current { color: var(--navy-900); font-weight: 600; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 2.85rem; height: 2.85rem; padding: 0; background: transparent; border: 1.5px solid var(--line-2); border-radius: var(--radius); color: var(--navy-900); cursor: pointer; } .nav-toggle__close { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; } /* Last squeeze before the menu collapses. */ @media (max-width: 1320px) { .nav__list { gap: 1.05rem; } .nav { gap: 1.15rem; } .nav__link { font-size: .815rem; } } /* Eight menu items, a long school name and a CTA cannot sit on one line below roughly 1180px without colliding, so the menu collapses here. */ @media (max-width: 1180px) { .nav-toggle { display: inline-flex; } .masthead__inner { min-height: 4.5rem; } .nav { position: fixed; inset: 0 0 0 auto; width: min(21rem, 84vw); flex-direction: column; align-items: stretch; gap: 0; padding: 5.5rem 1.75rem 2rem; background: var(--navy-900); box-shadow: -12px 0 48px rgba(7, 13, 38, .35); transform: translateX(100%); visibility: hidden; transition: transform .34s var(--ease), visibility .34s; overflow-y: auto; } .nav.is-open { transform: translateX(0); visibility: visible; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__link { padding: .95rem 0; font-size: 1.0625rem; color: var(--on-dark); border-bottom: 1px solid var(--on-dark-line); } .nav__link::after { display: none; } .nav__link.is-current { color: var(--gold-400); } .nav__cta { margin-top: 1.75rem; } .nav-backdrop { position: fixed; inset: 0; z-index: 99; background: rgba(7, 13, 38, .5); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; } .nav-backdrop.is-open { opacity: 1; visibility: visible; } body.nav-open { overflow: hidden; } } /* -------------------------------------------------------------------------- 8. Shared action row -------------------------------------------------------------------------- */ .actions { display: flex; flex-wrap: wrap; gap: .85rem; } .actions--center { justify-content: center; } .crumbs { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.15rem; font-size: .8125rem; color: var(--on-dark-muted); } .crumbs a { color: var(--gold-400); text-decoration: none; } .crumbs a:hover { text-decoration: underline; } .crumbs span[aria-hidden] { opacity: .45; } /* -------------------------------------------------------------------------- 10. Cards & grids -------------------------------------------------------------------------- */ .grid { display: grid; gap: clamp(1.15rem, 2.2vw, 1.75rem); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 940px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .card { position: relative; display: flex; flex-direction: column; padding: clamp(1.6rem, 2.6vw, 2.1rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease); } .card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: linear-gradient(90deg, var(--crimson-500), var(--gold-500)); opacity: 0; transition: opacity .24s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .card:hover::after { opacity: 1; } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem; margin-bottom: 1.4rem; border-radius: 50%; background: var(--cream-2); color: var(--navy-700); transition: background-color .24s var(--ease), color .24s var(--ease); } .card:hover .card__icon { background: var(--navy-800); color: var(--gold-400); } .card__title { margin-bottom: .6rem; font-size: 1.185rem; font-variation-settings: "opsz" 30; } .card__body { font-size: .96rem; color: var(--muted); } .card__link { margin-top: 1.35rem; } /* -------------------------------------------------------------------------- 11. Split (text + panel) -------------------------------------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .split--wide-left { grid-template-columns: 1.15fr 1fr; } .split--wide-right { grid-template-columns: 1fr 1.15fr; } .split--top { align-items: start; } @media (max-width: 900px) { .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; } } /* Figure with offset gold frame */ .figure { position: relative; } .figure img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .figure::before { content: ""; position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem; border: 2px solid var(--gold-500); border-radius: var(--radius-lg); z-index: -1; } .figure__caption { margin-top: 1.5rem; font-size: .8125rem; letter-spacing: .04em; color: var(--muted); } @media (max-width: 900px) { .figure::before { inset: 1rem -1rem -1rem 1rem; } } /* Photo placeholder — marks where the school should add real pictures */ .photo-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 18rem; padding: 2rem; text-align: center; background: repeating-linear-gradient(45deg, var(--cream-2) 0 12px, var(--cream) 12px 24px); border: 1.5px dashed var(--line-2); border-radius: var(--radius-lg); color: var(--muted); } .photo-slot__label { font-family: var(--display); font-size: 1.05rem; color: var(--navy-700); } .photo-slot__hint { font-size: .8125rem; max-width: 26ch; } .photo-slot .icon { color: var(--line-2); width: 2.25rem; height: 2.25rem; } /* -------------------------------------------------------------------------- 13. Timeline -------------------------------------------------------------------------- */ .timeline { position: relative; max-width: 780px; } .timeline::before { content: ""; position: absolute; left: 5.5rem; top: .6rem; bottom: .6rem; width: 2px; background: linear-gradient(180deg, var(--gold-500), var(--line)); } .tl-item { position: relative; display: grid; grid-template-columns: 5.5rem 1fr; gap: 2.25rem; padding-bottom: 1.85rem; } .tl-item:last-child { padding-bottom: 0; } .tl-item__year { font-family: var(--display); font-size: 1.185rem; font-weight: 600; color: var(--crimson-600); text-align: right; padding-top: .1rem; font-variation-settings: "opsz" 30; } .tl-item__dot { position: absolute; left: 5.5rem; top: .55rem; width: 11px; height: 11px; margin-left: -4.5px; background: var(--paper); border: 2.5px solid var(--gold-500); border-radius: 50%; } .tl-item__title { margin-bottom: .5rem; font-size: 1.14rem; font-variation-settings: "opsz" 30; } .tl-item__body { font-size: .96rem; color: var(--muted); } @media (max-width: 640px) { .timeline::before { left: 5px; } .tl-item { grid-template-columns: 1fr; gap: .4rem; padding-left: 2rem; } .tl-item__year { text-align: left; } .tl-item__dot { left: 5px; top: .5rem; } } /* -------------------------------------------------------------------------- 14. Divisions (accordion-ish panels) -------------------------------------------------------------------------- */ .division { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(1.5rem, 2.8vw, 2.25rem); border-top: 1px solid var(--line); } .division:last-child { border-bottom: 1px solid var(--line); } .division__aside .kicker { margin-bottom: .7rem; } .division__name { font-size: clamp(1.5rem, 2.6vw, 2rem); font-variation-settings: "opsz" 60; } .division__grades { margin-top: .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .division__lede { font-family: var(--display); font-size: 1.28rem; font-style: italic; color: var(--navy-700); margin-bottom: 1rem; font-variation-settings: "opsz" 40, "SOFT" 60; } .division__points { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1.5rem; margin-top: 1.5rem; } .division__points li { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--body); } .division__points .icon { width: 1.05rem; height: 1.05rem; margin-top: .3rem; color: var(--crimson-500); } @media (max-width: 860px) { .division { grid-template-columns: 1fr; } .division__points { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 15. Program rows -------------------------------------------------------------------------- */ .program { display: grid; grid-template-columns: 4.5rem 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); scroll-margin-top: 7rem; transition: box-shadow .24s var(--ease), border-color .24s var(--ease); } .program:hover { box-shadow: var(--shadow-md); border-color: var(--line-2); } .program__num { font-family: var(--display); font-size: 2.35rem; font-weight: 600; line-height: 1; color: var(--cream-2); font-variation-settings: "opsz" 90; } .program__kicker { font-size: .6875rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--crimson-600); } .program__title { margin: .5rem 0 .8rem; font-size: 1.4rem; font-variation-settings: "opsz" 40; } .program__meta { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--line); font-size: .8125rem; letter-spacing: .04em; color: var(--muted); } @media (max-width: 640px) { .program { grid-template-columns: 1fr; gap: .75rem; } } /* -------------------------------------------------------------------------- 16. Steps -------------------------------------------------------------------------- */ .step { position: relative; padding-top: 2.5rem; } .step__n { position: absolute; top: 0; left: 0; font-family: var(--display); font-size: 2.75rem; font-weight: 600; line-height: 1; color: var(--gold-200); font-variation-settings: "opsz" 90; } .step__title { position: relative; margin-bottom: .55rem; font-size: 1.14rem; font-variation-settings: "opsz" 30; } .step__body { font-size: .94rem; color: var(--muted); } /* -------------------------------------------------------------------------- 17. People -------------------------------------------------------------------------- */ .person { text-align: center; } .person__photo, .person__initials { width: 9.5rem; height: 9.5rem; margin: 0 auto 1.35rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--gold-500), var(--shadow-md); } .person__initials { display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--navy-700), var(--navy-900)); color: var(--gold-400); font-family: var(--display); font-size: 2.15rem; font-weight: 600; letter-spacing: .02em; font-variation-settings: "opsz" 60; } .person__name { font-size: 1.115rem; font-variation-settings: "opsz" 30; } .person__role { margin-top: .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--crimson-600); } .person__bio { margin-top: .9rem; font-size: .9rem; color: var(--muted); } /* -------------------------------------------------------------------------- 19. Accordion (FAQ) -------------------------------------------------------------------------- */ .accordion { border-top: 1px solid var(--line); } .acc-item { border-bottom: 1px solid var(--line); } .acc-item__btn { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; padding: 1.5rem 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--display); font-size: 1.08rem; font-weight: 600; color: var(--ink); font-variation-settings: "opsz" 30; transition: color .16s var(--ease); } .acc-item__btn:hover { color: var(--crimson-600); } .acc-item__btn .icon { color: var(--crimson-600); transition: transform .28s var(--ease); } .acc-item__btn[aria-expanded="true"] .icon { transform: rotate(45deg); } .acc-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); } .acc-item__panel[data-open="true"] { grid-template-rows: 1fr; } .acc-item__panel > div { overflow: hidden; } .acc-item__panel p { padding-bottom: 1.6rem; font-size: .96rem; color: var(--muted); max-width: 68ch; } /* -------------------------------------------------------------------------- 20. News -------------------------------------------------------------------------- */ .post { /* Required: .post__link::after stretches to fill this card, so the whole card is clickable. Without it the overlay would escape to the page. */ position: relative; display: flex; flex-direction: column; height: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .24s var(--ease), box-shadow .24s var(--ease); } .post:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .post__thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: linear-gradient(150deg, var(--navy-700), var(--navy-900)); color: rgba(232, 184, 69, .35); } .post__thumb .icon { width: 2.75rem; height: 2.75rem; } /* Photo variant. Falls back to the panel above when a story has no picture. */ .post__thumb--photo { display: block; overflow: hidden; } .post__thumb--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .post:hover .post__thumb--photo img { transform: scale(1.05); } .post__body { display: flex; flex-direction: column; flex: 1; padding: 1.75rem; } .post__kicker { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--crimson-600); } .post__title { margin: .6rem 0 .7rem; font-size: 1.14rem; font-variation-settings: "opsz" 30; } .post__excerpt { flex: 1; font-size: .94rem; color: var(--muted); } .post__date { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.35rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); } /* The title carries the link, but the whole card is the click target. */ .post__link { color: inherit; text-decoration: none; } .post__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .post:hover .post__link { color: var(--crimson-600); } .post__more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .7rem; color: var(--crimson-600); white-space: nowrap; } .post__more .icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease); } .post:hover .post__more .icon { transform: translateX(4px); } /* -------------------------------------------------------------------------- 20b. Single story -------------------------------------------------------------------------- */ .story__kicker { display: inline-block; margin: 0 0 .9rem; padding: .4rem 1rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 100px; background: rgba(255, 255, 255, .07); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-200); } .story__date { display: flex; align-items: center; gap: .5rem; margin: 1.15rem 0 0; font-size: .875rem; color: var(--on-dark-muted); } .story__date .icon { color: var(--gold-500); } .story { font-size: 1.06rem; line-height: 1.78; color: var(--body); } .story > * + * { margin-top: 1.15em; } .story__lede { font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.5; color: var(--navy-800); font-variation-settings: "opsz" 40, "SOFT" 40; padding-bottom: 1.35rem; border-bottom: 1px solid var(--line); } .story__figure { margin: clamp(2rem, 4vw, 3rem) 0 0; } .story__figure img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .story__figure figcaption { margin-top: .9rem; font-size: .8125rem; color: var(--muted); text-align: center; } .story__share { display: flex; align-items: center; gap: .75rem; margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: 1.5rem; border-top: 1px solid var(--line); } .story__share-label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: .25rem; } .story__share-link { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 1.5px solid var(--line-2); border-radius: 50%; color: var(--navy-700); transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .story__share-link:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; transform: translateY(-2px); } /* Previous / next */ .story-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 640px) { .story-nav { grid-template-columns: 1fr; } } .story-nav__item { display: flex; flex-direction: column; gap: .45rem; padding: 1.25rem 1.35rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .story-nav__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); } .story-nav__item--next { text-align: right; } .story-nav__label { display: inline-flex; align-items: center; gap: .4rem; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--crimson-600); } .story-nav__item--next .story-nav__label { justify-content: flex-end; } .story-nav__item--prev .story-nav__label .icon { transform: rotate(180deg); } .story-nav__title { font-family: var(--display); font-size: 1.02rem; font-weight: 600; line-height: 1.3; color: var(--ink); font-variation-settings: "opsz" 30; } /* Empty state */ .empty { padding: clamp(3rem, 6vw, 4.5rem) 2rem; text-align: center; background: var(--cream); border: 1.5px dashed var(--line-2); border-radius: var(--radius-lg); } .empty .icon { width: 2.5rem; height: 2.5rem; margin: 0 auto 1.15rem; color: var(--line-2); } .empty__title { font-size: 1.25rem; margin-bottom: .55rem; font-variation-settings: "opsz" 30; } .empty__body { font-size: .96rem; color: var(--muted); max-width: 44ch; margin-inline: auto; } /* -------------------------------------------------------------------------- 21. Gallery -------------------------------------------------------------------------- */ /* A uniform square grid. Row-spanning "tall" tiles were tried and removed: without fixed grid-auto-rows they leave the grid ragged, and the school's photographs are mostly square anyway, so square tiles crop the least. */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(.7rem, 1.4vw, 1.1rem); } .gallery__item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-lg); background: var(--cream-2); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .gallery__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .gallery__item:hover img { transform: scale(1.06); } /* The whole tile is a button, so the viewer opens by click or keyboard. */ .gallery__btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .gallery__zoom { position: absolute; right: .6rem; bottom: .6rem; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(7, 13, 38, .72); backdrop-filter: blur(4px); color: var(--gold-400); opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease); } .gallery__item:hover .gallery__zoom, .gallery__btn:focus-visible .gallery__zoom { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 21b. Lightbox -------------------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(5, 9, 26, .94); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; /* also removes it from the a11y tree */ transition: opacity .28s var(--ease), visibility .28s; } .lightbox.is-open { opacity: 1; visibility: visible; } body.lightbox-open { overflow: hidden; } .lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 100%; } .lightbox__img { max-width: min(92vw, 1100px); max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-lg); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); transform: scale(.97); transition: transform .28s var(--ease), opacity .2s var(--ease); } .lightbox.is-open .lightbox__img { transform: scale(1); } .lightbox__img.is-swapping { opacity: 0; } .lightbox__caption { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; font-family: var(--display); font-size: 1.05rem; color: var(--on-dark); text-align: center; font-variation-settings: "opsz" 30; } .lightbox__count { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .12em; color: var(--gold-400); } .lightbox__close, .lightbox__nav { position: absolute; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1.5px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--on-dark); cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .lightbox__close:hover, .lightbox__nav:hover { background: var(--crimson-600); border-color: var(--crimson-600); } .lightbox__close { top: clamp(.85rem, 2.5vw, 1.75rem); right: clamp(.85rem, 2.5vw, 1.75rem); width: 3rem; height: 3rem; } .lightbox__nav { top: 50%; width: 3.25rem; height: 3.25rem; margin-top: -1.625rem; } .lightbox__nav--prev { left: clamp(.5rem, 2.5vw, 2rem); } .lightbox__nav--next { right: clamp(.5rem, 2.5vw, 2rem); } .lightbox__nav--prev .icon { transform: rotate(180deg); } .lightbox__nav:hover { transform: scale(1.06); } @media (max-width: 620px) { .lightbox__nav { width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; } .lightbox__img { max-height: 64vh; } .lightbox__caption { font-size: .95rem; } } /* -------------------------------------------------------------------------- 22. Forms -------------------------------------------------------------------------- */ .form { display: grid; gap: 1.25rem; } .form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } @media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: .45rem; } .field__label { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); } .field__label span { color: var(--crimson-600); } .field input, .field select, .field textarea { width: 100%; padding: .85rem 1rem; font: inherit; /* Must stay at 16px or larger: iOS Safari zooms the whole page when a visitor taps a field with smaller text. */ font-size: 1rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-2); border-radius: var(--radius); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); } .field textarea { min-height: 9rem; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: #9aa1b8; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3.5px rgba(39, 57, 127, .13); } .field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--crimson-500); } .field__error { font-size: .8125rem; color: var(--crimson-600); } .honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .alert { display: flex; align-items: flex-start; gap: .85rem; padding: 1.15rem 1.35rem; border-radius: var(--radius); border: 1.5px solid; font-size: .96rem; } .alert--ok { background: #edf7f0; border-color: #a9d6ba; color: #17603a; } .alert--ok .icon { color: #22834f; } .alert--bad { background: #fdf0f1; border-color: #f0b6bb; color: #8f0f1c; } .alert--bad .icon { color: var(--crimson-600); } /* -------------------------------------------------------------------------- 23. Contact blocks -------------------------------------------------------------------------- */ .contact-card { padding: clamp(1.6rem, 2.6vw, 2.1rem); background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--crimson-500); border-radius: var(--radius-lg); } .contact-card__dept { font-size: 1.14rem; margin-bottom: .3rem; font-variation-settings: "opsz" 30; } .contact-card__person { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.15rem; } .contact-card__list { display: grid; gap: .6rem; } .contact-card__list li { display: flex; align-items: flex-start; gap: .7rem; font-size: .94rem; } .contact-card__list .icon { margin-top: .28rem; color: var(--navy-600); } .contact-card__list a { color: var(--body); text-decoration: none; } .contact-card__list a:hover { color: var(--crimson-600); text-decoration: underline; } .hours { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1.25rem; font-size: .94rem; border-bottom: 1px solid var(--line); } .hours li:last-child { border-bottom: 0; } .hours li:nth-child(odd) { background: var(--cream); } .hours span:first-child { font-weight: 500; color: var(--ink); } .hours span:last-child { color: var(--muted); } /* -------------------------------------------------------------------------- 24. Feature list & callouts -------------------------------------------------------------------------- */ .feature-list { display: grid; gap: .85rem; } .feature-list li { display: flex; align-items: flex-start; gap: .85rem; } .feature-list .icon { width: 1.35rem; height: 1.35rem; margin-top: .22rem; padding: .18rem; border-radius: 50%; background: var(--cream-2); color: var(--crimson-600); } .section--navy .feature-list .icon { background: rgba(255,255,255,.09); color: var(--gold-400); } .callout { padding: clamp(1.6rem, 3vw, 2.25rem); background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); } .callout--gold { background: linear-gradient(160deg, #fdf6e6, var(--cream)); border-color: var(--gold-200); } .callout__title { font-size: 1.14rem; margin-bottom: .6rem; font-variation-settings: "opsz" 30; } .pill-row { display: flex; flex-wrap: wrap; gap: .55rem; } .pill { display: inline-flex; align-items: center; padding: .42rem .9rem; border: 1px solid var(--line-2); border-radius: 100px; background: var(--paper); font-size: .8125rem; font-weight: 500; color: var(--navy-800); } /* Curriculum table */ .curric { border-top: 1px solid var(--line); } .curric li { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); } .curric__name { font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--ink); font-variation-settings: "opsz" 30; } .curric__note { font-size: .94rem; color: var(--muted); } @media (max-width: 620px) { .curric li { grid-template-columns: 1fr; gap: .25rem; } } /* -------------------------------------------------------------------------- 25. Admissions band -------------------------------------------------------------------------- */ .band { position: relative; overflow: hidden; padding-block: clamp(2.25rem, 4vw, 3.25rem); background: radial-gradient(100% 120% at 0% 50%, var(--crimson-700) 0%, transparent 60%), var(--navy-900); color: var(--on-dark-muted); } .band::before { content: ""; position: absolute; right: -8%; top: -60%; width: 42rem; aspect-ratio: 1; border: 1px solid rgba(232, 184, 69, .18); border-radius: 50%; } .band__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: clamp(1.75rem, 4vw, 3.5rem); flex-wrap: wrap; } .band__text { max-width: 42rem; } .band__title { color: var(--on-dark); font-size: clamp(1.65rem, 3.2vw, 2.35rem); font-variation-settings: "opsz" 60; } .band__lede { margin-top: .85rem; color: var(--on-dark-muted); font-size: 1.0625rem; } .band__actions { display: flex; flex-wrap: wrap; gap: .85rem; } /* -------------------------------------------------------------------------- 26. Footer -------------------------------------------------------------------------- */ .footer { background: var(--navy-950); color: var(--on-dark-muted); padding-top: clamp(2.25rem, 4vw, 3.25rem); } .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.35fr; gap: clamp(1.75rem, 3.5vw, 2.75rem); padding-bottom: clamp(1.85rem, 3.5vw, 2.5rem); } @media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } } /* Give the footer links a comfortable thumb target on phones. */ @media (max-width: 620px) { .footer__list { gap: .2rem; } .footer__list a { display: inline-block; padding-block: .5rem; } .footer__contact li { padding-block: .2rem; } } .brand--footer { margin-right: 0; margin-bottom: 1.35rem; } .brand--footer .brand__name { color: var(--on-dark); font-size: 1.05rem; } .brand--footer .brand__motto { color: var(--gold-500); } .footer__blurb { font-size: .9rem; line-height: 1.65; color: var(--on-dark-muted); max-width: 40ch; } .footer__social { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.35rem; font-size: .875rem; color: var(--gold-400); text-decoration: none; } .footer__social:hover { color: var(--gold-200); text-decoration: underline; } .footer__head { margin-bottom: 1.25rem; font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--on-dark); } .footer__list { display: grid; gap: .7rem; } .footer__list a { font-size: .9rem; color: var(--on-dark-muted); text-decoration: none; transition: color .16s var(--ease), padding-left .16s var(--ease); } .footer__list a:hover { color: var(--gold-400); padding-left: .3rem; } .footer__contact { display: grid; gap: .85rem; } .footer__contact li { display: flex; align-items: flex-start; gap: .7rem; font-size: .9rem; line-height: 1.55; } .footer__contact .icon { margin-top: .22rem; color: var(--gold-500); } .footer__contact a { color: var(--on-dark-muted); text-decoration: none; } .footer__contact a:hover { color: var(--gold-400); } .footer__base { display: flex; align-items: center; justify-content: space-between; gap: .85rem 1.5rem; flex-wrap: wrap; padding-block: 1.6rem; border-top: 1px solid var(--on-dark-line); font-size: .8125rem; } .footer__base p { margin: 0; } .footer__credit { display: inline-flex; align-items: center; gap: .4rem; color: var(--on-dark-muted); } .footer__credit a { color: var(--on-dark); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .28); padding-bottom: 1px; transition: color .18s var(--ease), border-color .18s var(--ease); } .footer__credit a:hover { color: var(--gold-400); border-color: var(--gold-400); } .footer__heart { color: var(--crimson-500); animation: heartbeat 2.4s var(--ease) infinite; } @keyframes heartbeat { 0%, 82%, 100% { transform: scale(1); } 86% { transform: scale(1.22); } 90% { transform: scale(1); } 94% { transform: scale(1.16); } } @media (prefers-reduced-motion: reduce) { .footer__heart { animation: none; } } /* Three items is a lot for one line on a phone — stack and centre them. */ @media (max-width: 780px) { .footer__base { justify-content: center; text-align: center; } } .footer__motto { font-family: var(--display); font-style: italic; color: var(--gold-500); font-variation-settings: "opsz" 20, "SOFT" 60; } /* -------------------------------------------------------------------------- 26b. Scroll progress bar -------------------------------------------------------------------------- */ .progress { position: fixed; inset: 0 0 auto 0; z-index: 200; height: 3px; background: transparent; pointer-events: none; } .progress__bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--crimson-500), var(--gold-500) 65%, var(--gold-200)); box-shadow: 0 0 12px rgba(210, 154, 34, .55); transition: width .08s linear; } /* -------------------------------------------------------------------------- 26c. Pointer follower -------------------------------------------------------------------------- */ .cursor { display: none; } /* Only on devices with a precise pointer that can hover. */ @media (hover: hover) and (pointer: fine) { body.has-cursor { cursor: none; } body.has-cursor a, body.has-cursor button, body.has-cursor input, body.has-cursor select, body.has-cursor textarea, body.has-cursor [role="button"] { cursor: none; } body.has-cursor .cursor { display: block; position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; mix-blend-mode: normal; } .cursor__dot, .cursor__ring { position: absolute; top: 0; left: 0; border-radius: 50%; transform: translate(-50%, -50%); } .cursor__dot { width: 7px; height: 7px; background: var(--crimson-500); transition: width .2s var(--ease), height .2s var(--ease), background-color .2s var(--ease); } .cursor__ring { width: 34px; height: 34px; border: 1.5px solid var(--navy-600); transition: width .28s var(--ease), height .28s var(--ease), border-color .28s var(--ease), opacity .28s var(--ease), background-color .28s var(--ease); } /* Over a link or button */ body.cursor-active .cursor__ring { width: 62px; height: 62px; border-color: var(--gold-500); background: rgba(210, 154, 34, .12); } body.cursor-active .cursor__dot { width: 0; height: 0; } /* Over a dark section */ body.cursor-dark .cursor__ring { border-color: rgba(245, 221, 162, .7); } body.cursor-dark .cursor__dot { background: var(--gold-400); } /* Pressed */ body.cursor-down .cursor__ring { width: 26px; height: 26px; } /* Hidden when the pointer leaves the window */ body.cursor-out .cursor { opacity: 0; } .cursor { transition: opacity .2s var(--ease); } } /* -------------------------------------------------------------------------- 26d. Hero slider Layout rule: only the artwork is absolutely positioned. The text stage and the controls both sit in normal flow, so the slider's height is always driven by its tallest slide and the controls can never be overlapped. -------------------------------------------------------------------------- */ .slider { position: relative; overflow: hidden; background: var(--navy-950); display: flex; flex-direction: column; justify-content: center; min-height: clamp(24rem, 56vh, 33rem); padding-top: clamp(1.5rem, 3.5vw, 2.5rem); /* Lower padding also leaves room for the facts strip that overlaps below. */ padding-bottom: clamp(5.25rem, 8vw, 6.5rem); } /* --- artwork layer (the only absolute part) --- */ /* overflow:hidden is essential — the Ken Burns zoom scales the photo beyond its box, and on mobile this layer sits in normal flow where the slider's own clipping no longer contains it. */ .slider__media { position: absolute; inset: 0; overflow: hidden; } .slider__frame { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); } .slider__frame.is-active { opacity: 1; } .slider__frame img { width: 100%; height: 100%; object-fit: cover; /* Per-slide focal point, set inline from SLIDES['focus']. */ object-position: var(--focus, center); transform: scale(1.06); transition: transform 7.5s linear; } .slider__frame.is-active img { transform: scale(1.14); } /* Legibility scrim — strongest on the left, where the text sits. */ .slider__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,13,38,.95) 0%, rgba(7,13,38,.85) 34%, rgba(7,13,38,.46) 64%, rgba(7,13,38,.3) 100%), linear-gradient(0deg, rgba(7,13,38,.72) 0%, transparent 48%); } /* --- text stage: all slides stacked in one grid cell --- */ .slider__stage { position: relative; z-index: 2; display: grid; } .slide { grid-area: 1 / 1; /* stacked, so the cell is as tall as the tallest */ opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility .9s; } .slide.is-active { opacity: 1; visibility: visible; } .slide__body { max-width: 46rem; } .slide__kicker { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.35rem; padding: .5rem 1.15rem; border: 1px solid rgba(255,255,255,.2); border-radius: 100px; background: rgba(255,255,255,.06); backdrop-filter: blur(6px); font-size: clamp(.66rem, 1.5vw, .72rem); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-200); } .slide__title { margin: 0; color: var(--on-dark); font-family: var(--display); font-weight: 600; font-size: clamp(1.85rem, 4.6vw, 3.85rem); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1; line-height: 1.05; letter-spacing: -.026em; } .slide__title em { display: block; font-style: italic; color: var(--gold-400); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; } .slide__text { max-width: 44ch; margin: 1.25rem 0 0; font-size: clamp(.96rem, 1.4vw, 1.16rem); line-height: 1.6; color: #d5dbef; } .slide__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.85rem; } /* Staggered entrance for the active slide */ .slide__kicker, .slide__title, .slide__text, .slide__actions { opacity: 0; transform: translateY(22px); } .slide.is-active .slide__kicker, .slide.is-active .slide__title, .slide.is-active .slide__text, .slide.is-active .slide__actions { opacity: 1; transform: none; transition: opacity .75s var(--ease), transform .75s var(--ease); } .slide.is-active .slide__kicker { transition-delay: .18s; } .slide.is-active .slide__title { transition-delay: .30s; } .slide.is-active .slide__text { transition-delay: .42s; } .slide.is-active .slide__actions { transition-delay: .54s; } /* --- controls: in normal flow, under the stage --- */ .slider__ui { position: relative; z-index: 3; margin-top: clamp(1.5rem, 3vw, 2.25rem); } .slider__ui-inner { display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; } .slider__dots { display: flex; align-items: center; gap: .55rem; } .slider__dot { position: relative; width: clamp(1.5rem, 4vw, 2.75rem); height: 3px; padding: 0; border: 0; border-radius: 100px; background: rgba(255,255,255,.26); cursor: pointer; overflow: hidden; transition: background-color .2s var(--ease); } .slider__dot:hover { background: rgba(255,255,255,.45); } .slider__dot::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--gold-400); border-radius: 100px; } .slider__dot.is-active::after { width: 100%; transition: width var(--slide-ms, 6500ms) linear; } .slider__dot.is-active.no-fill::after { width: 100%; transition: none; } .slider__arrows { display: flex; gap: .5rem; margin-left: auto; } .slider__arrow { display: inline-flex; align-items: center; justify-content: center; width: 2.85rem; height: 2.85rem; padding: 0; border: 1.5px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(255,255,255,.06); backdrop-filter: blur(6px); color: var(--on-dark); cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .slider__arrow:hover { background: var(--crimson-600); border-color: var(--crimson-600); transform: translateY(-2px); } .slider__arrow--prev .icon { transform: rotate(180deg); } .slider__count { margin: 0; font-family: var(--display); font-size: .85rem; color: var(--on-dark-muted); letter-spacing: .06em; white-space: nowrap; } .slider__count b { color: var(--gold-400); font-size: 1.1rem; } /* Tablet and below: drop the arrows, swipe and dots remain. */ @media (max-width: 860px) { .slider__arrows { display: none; } .slide__text { max-width: none; } } /* Phones and small tablets: stack the photo above the text. These are wide 2.33:1 group photographs. Laid over a tall narrow hero they crop to about a quarter of their width — one child's face instead of the class. Stacking shows the picture almost whole and puts the text on solid navy where it is easiest to read. */ @media (max-width: 820px) { .slider { display: block; min-height: 0; padding-top: 0; padding-bottom: clamp(4.5rem, 14vw, 5.5rem); background: radial-gradient(120% 90% at 10% 100%, var(--navy-700) 0%, transparent 60%), var(--navy-900); } .slider__media { position: relative; inset: auto; width: 100%; aspect-ratio: 2 / 1; } .slider__frame img { object-position: center; } /* Text sits below the photo now, so the scrim only has to blend the bottom edge rather than darken the whole image. */ .slider__scrim { background: linear-gradient(0deg, rgba(12, 20, 51, .92) 0%, rgba(12, 20, 51, .15) 38%, transparent 68%); } .slider__stage { padding-top: clamp(1.25rem, 4vw, 1.75rem); } .slide__actions { gap: .65rem; } .slide__actions .btn { flex: 1 1 100%; justify-content: center; } .slider__ui-inner { gap: .85rem; justify-content: space-between; } } /* -------------------------------------------------------------------------- 26e. Interior page cover -------------------------------------------------------------------------- */ .cover { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(13rem, 27vh, 18rem); background: radial-gradient(110% 100% at 15% 0%, var(--navy-700) 0%, transparent 60%), var(--navy-900); color: var(--on-dark-muted); } .cover__art { position: absolute; inset: -12% 0 -12% 0; will-change: transform; } .cover__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } .cover__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,13,38,.95) 0%, rgba(7,13,38,.8) 42%, rgba(7,13,38,.45) 100%), linear-gradient(0deg, rgba(7,13,38,.85) 0%, transparent 55%); } /* A crisp gold hairline reads better than a white fade over dark artwork. */ .cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 4; background: linear-gradient(90deg, var(--crimson-600), var(--gold-500) 55%, var(--gold-200)); } .cover__inner { position: relative; z-index: 3; max-width: 780px; padding-block: clamp(1.85rem, 3.5vw, 2.75rem); } .cover__title { color: var(--on-dark); } .cover__lede { margin-top: 1.15rem; max-width: 56ch; color: #cdd4ec; font-size: clamp(1.02rem, 1.45vw, 1.2rem); line-height: 1.6; } /* -------------------------------------------------------------------------- 26f. Quick facts strip -------------------------------------------------------------------------- */ .facts-strip { position: relative; z-index: 4; margin-top: -3.5rem; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .fact { display: flex; align-items: center; gap: .95rem; padding: 1.5rem 1.35rem; border-right: 1px solid var(--line); } .fact:last-child { border-right: 0; } .fact__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; background: var(--cream-2); color: var(--navy-700); } .fact__label { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .fact__value { display: block; margin-top: .15rem; font-family: var(--display); font-size: 1.02rem; font-weight: 600; color: var(--ink); font-variation-settings: "opsz" 30; } @media (max-width: 860px) { .facts-strip { grid-template-columns: repeat(2, 1fr); margin-top: -2rem; } .fact:nth-child(2) { border-right: 0; } .fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); } } @media (max-width: 460px) { .facts-strip { grid-template-columns: 1fr; margin-top: -1.25rem; } .fact { border-right: 0; border-bottom: 1px solid var(--line); } .fact:last-child { border-bottom: 0; } } /* -------------------------------------------------------------------------- 26g. Card tilt & magnetic buttons -------------------------------------------------------------------------- */ .card, .post, .program { transform-style: preserve-3d; will-change: transform; } .tilt { transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .btn { will-change: transform; } /* Sheen sweep across primary buttons */ .btn--primary { position: relative; overflow: hidden; } .btn--primary::before { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); transition: left .65s var(--ease); } .btn--primary:hover::before { left: 135%; } /* -------------------------------------------------------------------------- 26h. Back to top -------------------------------------------------------------------------- */ .to-top { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 90; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--paper); color: var(--navy-800); box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background-color .2s var(--ease), color .2s var(--ease); } .to-top.is-in { opacity: 1; visibility: visible; transform: none; } .to-top:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); } .to-top .icon { transform: rotate(-90deg); } /* -------------------------------------------------------------------------- 26i. Section rhythm & school texture -------------------------------------------------------------------------- */ /* Notebook rule, used sparingly to give a scholastic texture. */ .section--ruled { background-color: var(--cream); background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 2.25rem; position: relative; } .section--ruled::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(1.5rem, 6vw, 5rem); width: 2px; background: rgba(200, 32, 47, .22); } /* Decorative crest divider */ .divider { display: flex; align-items: center; gap: 1.15rem; justify-content: center; color: var(--gold-500); } .divider::before, .divider::after { content: ""; height: 1px; flex: 1; max-width: 8rem; background: linear-gradient(90deg, transparent, var(--line-2)); } .divider::after { background: linear-gradient(90deg, var(--line-2), transparent); } /* -------------------------------------------------------------------------- 27. Motion -------------------------------------------------------------------------- */ /* The hidden state is applied only when JS has confirmed it can run (html.js-reveal, set by an inline script in ). If scripting is off or the observer never fires, content simply renders as normal. */ .js-reveal .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js-reveal .reveal.is-in { opacity: 1; transform: none; } /* Reveal variants */ .js-reveal .reveal--left { transform: translateX(-28px); } .js-reveal .reveal--right { transform: translateX(28px); } .js-reveal .reveal--zoom { transform: scale(.94); } .js-reveal .reveal--left.is-in, .js-reveal .reveal--right.is-in, .js-reveal .reveal--zoom.is-in { transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .js-reveal .reveal { opacity: 1; transform: none; } /* Keep the slider usable but still: no Ken Burns, no auto-advance fill. */ .slider__frame img { transform: none !important; } .slide__kicker, .slide__title, .slide__text, .slide__actions { opacity: 1 !important; transform: none !important; } .cover__art { transform: none !important; } body.has-cursor { cursor: auto; } body.has-cursor .cursor { display: none; } } /* -------------------------------------------------------------------------- 28. Print -------------------------------------------------------------------------- */ @media print { .utility, .masthead, .band, .footer, .nav-toggle { display: none !important; } body { color: #000; font-size: 11pt; } .section { padding-block: 1rem; } .js-reveal .reveal { opacity: 1; transform: none; } }