/* ========================================================= The Amaatra Academy — Home Page ========================================================= */ /* ── Toast / Flash messages ── */ .toast-container { position: fixed; top: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 360px; width: calc(100vw - 48px); pointer-events: none; } .toast { pointer-events: all; display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 12px; font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.45; box-shadow: 0 4px 24px rgba(0,0,0,.13); opacity: 1; transform: translateX(0); transition: opacity .4s ease, transform .4s ease; } .toast.is-hiding { opacity: 0; transform: translateX(30px); } .toast-success { background: #fff; border-left: 4px solid #16A34A; color: #14532D; } .toast-error { background: #fff; border-left: 4px solid #B91C1C; color: #7F1D1D; } .toast-warning { background: #fff; border-left: 4px solid #D97706; color: #78350F; } .toast-info { background: #fff; border-left: 4px solid var(--navy); color: var(--navy); } .toast__icon { flex: none; margin-top: 1px; } .toast__close { margin-left: auto; flex: none; background: none; border: none; cursor: pointer; color: inherit; opacity: .45; padding: 0; line-height: 1; transition: opacity .18s; } .toast__close:hover { opacity: 1; } @media (max-width: 480px) { .toast-container { top: 16px; right: 16px; width: calc(100vw - 32px); } } :root { /* Colors */ --navy: #00264D; --navy-deep: #001E3D; --navy-soft: #0A2F58; --orange: #EF7E1A; --orange-dark: #E06E0C; --bg-light: #F1F1F2; --white: #FFFFFF; --ink: #16263B; --body: #5A6573; --body-light: rgba(255,255,255,.72); --line: rgba(255,255,255,.14); /* Type — headings keep the serif; body uses Noto Sans */ --serif: "Playfair Display", Georgia, "Times New Roman", serif; --sans: "Noto Sans", sans-serif; /* Layout */ --header-h: 130px; /* topbar (34) + navbar (96) — used to size full-screen heroes */ --container: 1180px; --radius: 14px; --radius-lg: 22px; --shadow: 0 18px 40px rgba(0,38,77,.10); --shadow-soft: 0 10px 30px rgba(0,0,0,.08); --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *,*::before,*::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } @supports not (overflow: clip) { html, body { overflow-x: hidden; } } body { font-family: var(--sans); color: var(--ink); background: var(--white); line-height: 1.6; /* overflow-x is handled on only (line 49) — setting it here too would make position:sticky descendants (e.g. the mobile "Browse Section Pages" bar) fail to stick, since it turns body into a clipping ancestor that isn't the actual page scroller. */ /* No padding-top reserved here: the topbar+nav sit in normal flow (see .site-header/.nav below) and already push content down by their own height — .nav is what actually stays pinned on scroll, via position:sticky, not the old fixed-header + padding hack. */ } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; } /* Reusable thin rule for separating two same-toned sections (e.g. two light/white sections in a row with no other visual break between them) */ .section-divider { border: none; border-top: 1px solid rgba(0,38,77,.08); margin: 0; } .txt-orange { color: var(--orange); } /* Keeps a hero title's first line from breaking mid-phrase on desktop/tablet; on narrow phones the phrase no longer fits even at the smallest clamped font-size, so it's allowed to wrap normally instead of overflowing. */ .hero-line-nowrap { white-space: nowrap; } @media (max-width: 420px) { .hero-line-nowrap { white-space: normal; } } /* Checkerboard image placeholder (matches Figma empty image fills) */ .ph { background-color: #eceef0; background-image: linear-gradient(45deg, #d6d8dc 25%, transparent 25%), linear-gradient(-45deg, #d6d8dc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d6d8dc 75%), linear-gradient(-45deg, transparent 75%, #d6d8dc 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; } /* ---------- Reveal-on-scroll ---------- body.js-reveal is added synchronously by JS before first paint. In-viewport elements get .is-visible immediately (no flash). Below-fold elements animate in on scroll via IntersectionObserver. GSAP classes are excluded — GSAP manages their own opacity/transform. ----------------------------------------------------------------- */ body.js-reveal .reveal:not(.gsap-top):not(.gsap-rb):not(.gsap-split):not(.gsap-intro):not(.admissions__card) { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1); } body.js-reveal .reveal[data-anim="from-top"] { transform: translateY(-40px) !important; } body.js-reveal .reveal[data-anim="from-left"] { transform: translateX(-60px) !important; } body.js-reveal .reveal[data-anim="from-right"]{ transform: translateX(60px) !important; } body.js-reveal .acad-prog-card.reveal { transform: translate(60px,40px) !important; } body.js-reveal .reveal.is-visible { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* ========================================================= TOP BAR ========================================================= */ .topbar { background: var(--navy); color: #fff; font-size: 12.5px; position: relative; overflow: hidden; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 34px; } .topbar__left { position: relative; display: flex; align-items: center; gap: 10px; font-weight: 500; background: var(--orange); padding-right: 26px; height: 100%; } .topbar__left::before { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 100vw; background: var(--orange); } .topbar__social { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; transition: background .25s, transform .25s; } .topbar__social:hover { background: rgba(255,255,255,.34); transform: translateY(-1px); } .topbar__right { display: flex; align-items: center; gap: 26px; } .topbar__right a { display: inline-flex; align-items: center; gap: 7px; opacity: .96; transition: opacity .2s; } .topbar__right a:hover { opacity: 1; text-decoration: underline; } .topbar__right .topbar__callback { background: var(--orange); color: #fff; padding: 4px 14px; border-radius: 20px; font-weight: 600; opacity: 1; white-space: nowrap; gap: 6px; } .topbar__right .topbar__callback:hover { background: #c55200; text-decoration: none; transform: translateY(-1px); opacity: 1; } /* ========================================================= SITE HEADER — topbar scrolls away in normal flow; only .nav (below) is sticky, so it's the one that stays pinned on scroll. ========================================================= */ .site-header { position: relative; z-index: 60; } /* ========================================================= NAVBAR ========================================================= */ .nav { position: sticky; top: 0; z-index: 60; background: #fff; box-shadow: 0 2px 16px rgba(0,38,77,.06); transition: box-shadow .3s, padding .3s; } .nav__inner { position: relative; display: flex; align-items: stretch; justify-content: space-between; height: 96px; transition: height .3s; } .nav.is-shrunk .nav__inner { height: 74px; } .nav__logo { display: inline-flex; align-items: center; align-self: center; } .nav__logo img { height: 84px; width: auto; transition: height .3s; } .nav.is-shrunk .nav__logo img { height: 64px; } /* Menu stretches evenly across the space from the logo to NEWS; gaps auto-fit */ .nav__menu { display: flex; align-items: stretch; flex: 1 1 auto; justify-content: space-between; margin-left: 46px; } /* Logged-in user profile in the main nav — native
dropdown (no JS needed) */ .nav__account { position: relative; align-self: center; flex: none; margin-left: 22px; } /* Profile card + account links live inside the mobile slide-in menu instead — hidden on desktop */ .nav__menu-profile, .nav__menu-account { display: none; } /* .nav__menu-callback also carries .nav__link, whose own base rule (display:inline-flex, defined later in this file) would otherwise win at equal specificity — the extra class here beats that regardless of source order, so this reliably stays hidden on desktop and only the mobile media query's display:flex brings it back. */ .nav__link.nav__menu-callback { display: none; } .nav__account > summary { list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; display: inline-flex; align-items: center; gap: 6px; color: var(--navy); background: #fff; border: 1.5px solid rgba(0,38,77,.16); padding: 4px 12px 4px 4px; border-radius: 40px; transition: border-color .2s, box-shadow .2s; } .nav__account > summary::-webkit-details-marker { display: none; } .nav__account > summary::marker { content: ""; } .nav__account > summary:hover, .nav__account[open] > summary { border-color: rgba(0,38,77,.34); box-shadow: 0 4px 14px rgba(0,38,77,.1); } .nav__avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; } .nav__account-caret { color: var(--navy); opacity: .75; transition: transform .25s var(--ease); } .nav__account[open] .nav__account-caret { transform: rotate(180deg); } .nav__account-menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 220px; background: #fff; border-radius: 14px; box-shadow: 0 22px 50px rgba(0,38,77,.22); border: 1px solid rgba(0,38,77,.06); padding: 8px; z-index: 90; animation: navacct-pop .18s var(--ease); } @keyframes navacct-pop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .nav__account-email { font-size: 11.5px; color: var(--body); padding: 6px 10px 0; word-break: break-all; line-height: 1.4; } .nav__account-role { font-size: 11.5px; color: var(--body); padding: 2px 10px 9px; line-height: 1.4; } .nav__account-divider { border: none; border-top: 1px solid rgba(0,38,77,.08); margin: 4px 2px; } .nav__account-item { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 9px; color: var(--navy); font-size: 13.5px; font-weight: 500; text-decoration: none; } .nav__account-item:hover { background: rgba(0,38,77,.06); } .nav__account-item svg { flex: none; } .nav__account-item--danger { color: #C0392B; } .nav__account-item--danger:hover { background: rgba(192,57,43,.08); } /* Tablet/mobile: the navbar avatar/dropdown is replaced by the profile card + account links inside the slide-in menu (see .nav__menu-profile and .nav__menu-account) — hide the navbar's own copy so it isn't shown twice. */ @media (max-width: 900px) { .nav__account { display: none; } } .nav__item { position: static; display: flex; } .nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: var(--navy); padding: 8px 0; transition: color .2s; cursor: pointer; } .nav__link::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: 0; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: center; transition: transform .28s var(--ease); } .nav__caret { display: none; /* desktop matches the design (no caret); shown on mobile for the accordion */ width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); opacity: .7; } .nav__item--has-mega:hover .nav__caret { transform: rotate(225deg) translateY(-2px); } .nav__link:hover { color: var(--orange); } .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); } .nav__link.is-active { color: var(--navy); } /* ---- Mega dropdown (right-aligned rounded panel) ---- */ .mega { position: absolute; right: 0; left: auto; top: calc(100% + 0px); width: 74%; max-width: 880px; background: var(--navy); color: #fff; box-shadow: 0 26px 46px rgba(0,38,77,.28); border-top: 3px solid var(--orange); border-radius: 0 0 16px 16px; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; z-index: 50; } .nav__item--has-mega:hover .mega { opacity: 1; visibility: visible; transform: translateY(0); } .mega__inner { padding: 28px 34px 34px; } .mega__label { display: block; color: var(--orange); font-family: var(--serif); font-size: 22px; font-weight: 700; margin-bottom: 20px; } .mega__body { display: grid; grid-template-columns: 290px 1fr; gap: 44px; align-items: stretch; } .mega__media { border-radius: 12px; min-height: 210px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.28); } .mega__media img, .about__hero-strip img, .inst-card__img img, .leader-card__img img, .faculty-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } .mega__list { display: flex; flex-direction: column; justify-content: center; } .mega__list li { border-bottom: 1px solid rgba(255,255,255,.16); } .mega__list li:first-child { border-top: 1px solid rgba(255,255,255,.16); } .mega__list a { position: relative; display: block; padding: 15px 4px; color: #fff; font-size: 15px; font-weight: 500; transition: color .2s, padding-left .2s; } .mega__list a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23EF7E1A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; opacity: 0; transform: translateY(-50%) translateX(-8px); transition: opacity .2s var(--ease), transform .2s var(--ease); } .mega__list a:hover { color: var(--orange); padding-left: 28px; } .mega__list a:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); } /* Wide variant: two-column link list (Athletics) */ .mega--wide { width: 92%; max-width: 1140px; } .mega--wide .mega__body { grid-template-columns: 360px 1fr; gap: 50px; } .mega__list--two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; align-content: center; } .mega__list--two li:first-child { border-top: none; } .nav__toggle { display: none; width: 42px; height: 42px; flex-direction: column; justify-content: center; gap: 5px; } .nav__toggle span { display: block; height: 2.5px; width: 24px; margin: 0 auto; background: var(--navy); border-radius: 3px; transition: .3s; } .nav__toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav__toggle.is-open span:nth-child(2) { opacity: 0; } .nav__toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ========================================================= BUTTONS ========================================================= */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .01em; padding: 13px 24px; border-radius: 40px; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, background .25s, color .25s; white-space: nowrap; } .btn svg { flex: none; } .btn span { transition: transform .25s var(--ease); } .btn:hover span { transform: translateX(4px); } /* shared arrow icon (buttons + "learn more" links) */ .ico-arrow { display: inline-flex; align-items: center; } .ico-arrow svg { width: 1.15em; height: 1.15em; } .btn--orange { background: var(--orange); color: #fff; box-shadow: 0 10px 22px rgba(239,126,26,.34); } .btn--orange:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(239,126,26,.42); } .btn--ghost { background: #fff; color: var(--navy); box-shadow: 0 8px 20px rgba(0,0,0,.10); } .btn--ghost:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.16); } .btn--navy { background: var(--navy); color: #fff; box-shadow: 0 10px 22px rgba(0,38,77,.28); } .btn--navy:hover { background: var(--navy-deep); transform: translateY(-2px); } .btn--block { width: 100%; justify-content: center; padding: 15px; letter-spacing: .06em; } /* ========================================================= SECTION HELPERS ========================================================= */ .section--navy { background: var(--navy); color: #fff; padding: 88px 0; position: relative; } .section--light { background: var(--bg-light); padding: 84px 0; position: relative; } .section__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(28px, 4vw, 40px); line-height: 1.15; text-align: center; } .section__title.light { color: #fff; } .section__sub { text-align: center; max-width: 760px; margin: 16px auto 0; color: var(--body); font-size: 14.5px; } .section__sub.light { color: var(--body-light); } /* Scroll cue */ .scroll-cue { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 auto; color: rgba(255,255,255,.85); animation: bob 1.8s ease-in-out infinite; } .scroll-cue--inline { margin-top: 34px; } .scroll-cue--dark { color: var(--navy); } .scroll-cue--corner { position: absolute; right: 28px; bottom: 24px; } .hero .scroll-cue { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } } @keyframes revealFromTop { from { opacity:0; transform:translateY(-40px); } to { opacity:1; transform:none; } } @keyframes revealFromLeft { from { opacity:0; transform:translateX(-60px); } to { opacity:1; transform:none; } } .hero .scroll-cue { animation: bobx 1.8s ease-in-out infinite; } @keyframes bobx { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } } /* ========================================================= HERO ========================================================= */ .hero { position: relative; min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; overflow: hidden; padding-top: 14%; padding-bottom: 0; } /* Mobile browsers: 100vh includes the collapsing URL bar, so the hero is mis-sized until the first scroll. svh = stable small-viewport height. */ @supports (height: 100svh) { .hero, .about-hero, .acad-hero, .ey-hero, .ms-hero, .ps-hero, .ss-hero, .adm-hero, .ath-hero { min-height: calc(100svh - var(--header-h)); } } .hero__bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0,38,77,0) 60%, rgba(0,38,77,.4) 85%, var(--navy) 100%), linear-gradient(95deg, rgba(241,241,242,.9) 0%, rgba(241,241,242,.66) 26%, rgba(241,241,242,.28) 46%, rgba(241,241,242,0) 62%), url("../assets/images/campus.jpg") center 28% / cover no-repeat; } .hero__bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,38,77,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,38,77,.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(95deg, #000 0%, rgba(0,0,0,.4) 40%, transparent 62%); -webkit-mask-image: linear-gradient(95deg, #000 0%, rgba(0,0,0,.4) 40%, transparent 62%); } .hero__bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: var(--navy); } .hero__inner { position: relative; z-index: 2; width: 100%; } .hero__content { max-width: 620px; } .hero__title { font-family: var(--serif); font-weight: 800; color: var(--navy); font-size: clamp(34px, 5vw, 52px); line-height: 1.12; letter-spacing: -.01em; } .hero__text { margin-top: 20px; color: #3f4b59; font-size: 15px; max-width: 560px; } .hero__actions { margin-top: 30px; display: flex; gap: 16px; flex-wrap: wrap; } /* ========================================================= RESULTS ========================================================= */ .results .section__sub { margin-bottom: 46px; } .rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .ring-card { background: #fff; border-radius: var(--radius); padding: 26px 22px 28px; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; } .ring-card__label { color: var(--navy); font-size: 16px; font-weight: 700; margin-bottom: 16px; } .ring { position: relative; width: 168px; height: 168px; } .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ring__track { fill: none; stroke: #ECECEC; stroke-width: 11; } .ring__bar { fill: none; stroke: var(--orange); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.6s var(--ease); } .ring__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; color: var(--navy); font-size: 40px; } .ring-card__cap { margin-top: 14px; color: var(--body); font-size: 13px; } .ring-card__foot { margin-top: 16px; color: var(--navy); font-size: 13px; font-weight: 500; max-width: 220px; } .stats { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat-box { border: 1.5px solid var(--orange); border-radius: var(--radius); background: rgba(255,255,255,.03); padding: 24px 22px; text-align: center; transition: transform .3s var(--ease), background .3s; } .stat-box:hover { transform: translateY(-5px); background: rgba(239,126,26,.08); } .stat-box__num { font-family: var(--serif); color: #fff; font-size: 26px; font-weight: 700; margin-bottom: 10px; } .stat-box__txt { color: var(--body-light); font-size: 12.5px; } .results__quote { margin-top: 44px; text-align: center; font-family: var(--serif); font-style: italic; color: rgba(255,255,255,.9); font-size: 16px; } /* ========================================================= THE AMAATRA MODEL ========================================================= */ .model__lead { text-align: center; font-family: var(--serif); color: var(--navy); font-size: 19px; margin-top: 8px; font-weight: 600; } .model .section__sub { margin-bottom: 44px; } .domains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .domain-card { position: relative; height: 420px; border-radius: var(--radius); overflow: hidden; background-size: cover; background-position: center; box-shadow: var(--shadow-soft); isolation: isolate; } .domain-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,38,77,0) 30%, rgba(0,30,61,.55) 60%, rgba(0,24,49,.92) 100%); transition: background .4s; } .domain-card:hover::after { background: linear-gradient(180deg, rgba(0,38,77,.25) 0%, rgba(0,30,61,.78) 45%, rgba(0,24,49,.96) 100%); } .domain-card__overlay { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 22px; color: #fff; } .domain-card__title { font-size: 16px; font-weight: 700; line-height: 1.3; display: flex; align-items: flex-start; gap: 9px; } .domain-card__title svg { flex: none; margin-top: 2px; color: var(--orange); } .domain-card__desc { font-size: 12px; color: rgba(255,255,255,.85); margin-top: 8px; } .domain-card__list { margin-top: 0; max-height: 0; overflow: hidden; display: grid; gap: 7px; opacity: 0; transition: max-height .4s var(--ease), opacity .35s, margin-top .35s; } .domain-card:hover .domain-card__list { max-height: 200px; opacity: 1; margin-top: 14px; } .domain-card__list li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.9); padding-left: 0; list-style: none; } .domain-card__list li::before { display: none; } .domain-card__list li svg { flex: none; color: var(--orange); } /* ========================================================= PROGRAMS ========================================================= */ .programs .section__title { margin-bottom: 44px; } .program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .program-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .32s var(--ease), box-shadow .32s; display: flex; flex-direction: column; } .program-card:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(0,0,0,.22); } .program-card__img { height: 200px; background-size: cover; background-position: center; transition: transform .5s var(--ease); } .program-card:hover .program-card__img { transform: scale(1.06); } .program-card__body { padding: 24px 24px 28px; } .program-card__title { font-family: var(--serif); color: var(--navy); font-size: 16px; font-weight: 700; } .program-card__desc { margin-top: 10px; color: var(--body); font-size: 13.5px; } .link-more { margin-top: 18px; display: inline-flex; align-items: center; gap: 7px; color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: .08em; } .link-more span { transition: transform .25s var(--ease); } .link-more:hover span { transform: translateX(5px); } /* ========================================================= SPLIT SECTIONS (Athletics / Residential) ========================================================= */ .split { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; position: relative; overflow: hidden; } .split__media { background-size: cover; background-position: center; min-height: 340px; } .split__panel { display: flex; align-items: center; padding: 70px 64px; min-width: 0; } .split__panel--light { background: var(--bg-light); } .split__panel--navy { background: var(--navy); } .split__content { max-width: 480px; } .split__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(26px, 3.4vw, 36px); line-height: 1.18; } .split__title.light { color: #fff; } .split__text { margin-top: 20px; color: var(--body); font-size: 14.5px; line-height: 1.8; } .split__text.light { color: var(--body-light); } .split__accent { margin-top: 22px; color: var(--orange); font-weight: 600; font-size: 15px; } /* Athletics: image LEFT, panel RIGHT — content starts with gap from image edge */ .split--athletics .split__panel { padding-left: 90px; padding-bottom: 70px; } .split--athletics .split__content { margin-right: auto; text-align: left; } /* Residential: panel LEFT, image RIGHT — content ends with gap before image edge */ .split--residential .split__panel { padding-right: 90px; } .split--residential .split__content { margin-left: auto; text-align: right; } .split--residential .check-list li { flex-direction: row-reverse; justify-content: flex-start; } .split .btn { margin-top: 28px; } .check-list { margin-top: 24px; display: grid; gap: 12px; } .check-list li { display: flex; align-items: center; gap: 10px; color: var(--body-light); font-size: 14px; padding-left: 0; list-style: none; } .check-list li::before { display: none; } .check-list li svg { flex: none; color: var(--orange); } /* ========================================================= CAMPUS ========================================================= */ .campus .section__sub { margin-bottom: 6px; } .campus__accent { text-align: center; color: var(--orange); font-family: var(--serif); font-style: italic; font-size: 16px; margin-bottom: 34px; } .campus__slider { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(0,38,77,.12); background: #fff; box-shadow: var(--shadow-soft); } .campus__track { display: flex; transition: transform .6s var(--ease); } .campus__slide { position: relative; min-width: 100%; } .campus__slide img { width: 100%; height: 460px; object-fit: cover; } .campus__caption { position: absolute; top: 22px; right: 22px; background: rgba(255,255,255,.92); backdrop-filter: blur(4px); padding: 12px 16px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-width: 200px; } .campus__caption h4 { color: var(--navy); font-size: 13px; font-weight: 700; } .campus__caption p { color: var(--body); font-size: 11px; margin-top: 3px; } .campus__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--navy); font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.18); transition: background .2s, transform .2s; z-index: 3; } .campus__nav:hover { background: var(--orange); color: #fff; } .campus__nav--prev { left: 18px; } .campus__nav--next { right: 18px; } .campus__dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; } .campus__dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.6); transition: background .25s, width .25s; } .campus__dots button.is-active { background: var(--orange); width: 22px; border-radius: 5px; } .campus__cta { display: flex; justify-content: center; margin-top: 36px; } /* ========================================================= ADMISSIONS CTA ========================================================= */ .admissions__card { background: var(--navy); border-radius: var(--radius-lg); text-align: center; padding: 64px 40px; box-shadow: 0 30px 60px rgba(0,38,77,.22); } .admissions__title { font-family: var(--serif); color: #fff; font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; } .admissions__text { max-width: 560px; margin: 18px auto 0; color: var(--body-light); font-size: 14.5px; } .admissions__actions { margin-top: 30px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; } .admissions__note { margin-top: 28px; color: rgba(255,255,255,.45); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; } /* ========================================================= FOOTER ========================================================= */ .footer { background: var(--navy); color: #fff; padding: 70px 0 60px; } .footer__top { display: grid; grid-template-columns: 1.1fr .8fr 1.1fr; gap: 50px; } .footer__heading { color: var(--orange); font-size: 18px; font-weight: 700; letter-spacing: .02em; margin-bottom: 18px; } .footer__sub { color: #fff; font-size: 14px; font-weight: 700; margin: 18px 0 4px; } .footer__brand .footer__heading { font-size: 22px; } .footer__muted { color: var(--body-light); font-size: 13.5px; } .footer__map { width: 100%; max-width: 330px; height: 190px; border-radius: 14px; overflow: hidden; margin: 12px 0; } .footer__map iframe { width: 100%; height: 100%; border: 0; display: block; } .footer__links { display: grid; gap: 12px; } .footer__links a { color: var(--body-light); font-size: 14px; transition: color .2s, padding-left .2s; } .footer__links a:hover { color: var(--orange); padding-left: 4px; } .footer__connect .footer__muted { margin-bottom: 18px; } .footer__form input { width: 100%; padding: 16px 20px; border-radius: 30px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font-family: var(--sans); font-size: 14px; margin-bottom: 18px; } .footer__form input::placeholder { color: rgba(255,255,255,.5); } .footer__form input:focus { outline: none; border-color: var(--orange); } .footer__form .btn { max-width: 200px; } .footer__callback-btn { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 200px; padding: 14px; border-radius: 40px; background: transparent; border: 2px solid rgba(255,255,255,.3); color: #fff; font-size: 14px; font-weight: 600; font-family: var(--sans); text-decoration: none; margin-top: 14px; transition: border-color .22s, background .22s, transform .2s; } .footer__callback-btn:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); transform: translateY(-1px); } .footer__divider { border: none; border-top: 1px solid var(--line); margin: 50px 0 44px; } .footer__bottom { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; } /* Back to top */ .to-top { position: fixed; right: 26px; bottom: 26px; width: 46px; height: 46px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(239,126,26,.4); opacity: 0; visibility: hidden; transform: translateY(14px); transition: .3s; z-index: 80; } .to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .to-top:hover { background: var(--orange-dark); transform: translateY(-3px); } /* ========================================================= ABOUT PAGE ========================================================= */ .eyebrow { display: inline-block; color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 2px solid var(--orange); margin-bottom: 18px; } /* Scroll offset so sticky navbar doesn't cover anchor targets */ section[id], .about-sec[id] { scroll-margin-top: 104px; } .admissions.section--light { background: #ffffff; } .about-hero { position: relative; min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; overflow: hidden; } .about-hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; } .about-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,30,61,.92) 0%, rgba(0,30,61,.72) 45%, rgba(0,30,61,.40) 100%); } .about-hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 22%; padding-bottom: 40px; } .about-hero__content { max-width: 720px; } .about-hero__title { font-family: var(--serif); font-weight: 800; color: #fff; font-size: clamp(32px, 4.6vw, 50px); line-height: 1.12; } .about-hero__text { margin-top: 20px; color: rgba(255,255,255,.86); font-size: 15px; max-width: 660px; } .about { background: #fff; overflow-x: clip; } /* About grid — sidebar + content layout */ .about__grid { display: grid; grid-template-columns: 232px 1fr; align-items: start; } /* sidebar — no sticky, scrolls with the page */ .about__side { align-self: stretch; position: relative; background: var(--navy); } .about__side::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; background: var(--navy); } .side-nav { display: flex; flex-direction: column; background: var(--navy); padding: 14px 0; z-index: 1; position: sticky; top: 96px; } .side-nav__link { position: relative; color: rgba(255,255,255,.85); font-size: 15.5px; font-weight: 500; padding: 24px 24px 24px 0; transition: color .25s; text-decoration: none; display: block; } .side-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.14); } .side-nav__link:first-child::after { height: 2px; background: var(--orange); } .side-nav__link:hover { color: #fff; } .side-nav__link.is-active { color: var(--orange); font-weight: 600; } /* content */ .about__content { padding: 0; min-width: 0; } /* Lead section banner: image bleeds to the right screen edge, heading sits over it */ .about-sec.about-sec--lead { padding-top: 0; } .lead-banner { position: relative; margin: 0 calc(50% - 50vw) 32px -56px; min-height: 360px; display: flex; align-items: center; overflow: hidden; } .lead-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .lead-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(241,241,242,.97) 0%, rgba(241,241,242,.9) 30%, rgba(241,241,242,.58) 55%, rgba(241,241,242,.14) 80%, rgba(241,241,242,0) 100%); } .lead-banner__inner { position: relative; z-index: 2; padding: 30px 56px; max-width: 760px; } .lead-banner__inner .about-sec__title, .lead-banner__inner .about-quote { color: var(--navy); } .about-sec { position: relative; padding: 44px 5px 44px 56px; } /* each section's background continues to the right screen edge */ .about-sec::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 100vw; background-color: inherit; } .about-sec:nth-of-type(even) { background: var(--bg-light); } #faculty { background: var(--bg-light); } .about-sec__title { font-family: var(--serif); color: var(--navy); font-size: clamp(24px, 3vw, 32px); font-weight: 700; } .about-sec__eyebrow { color: var(--orange); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; margin-bottom: 22px; } .about-quote { position: relative; padding: 4px 0 4px 22px; border-left: 4px solid var(--orange); margin: 0 0 26px; font-family: var(--serif); font-style: italic; color: var(--navy); font-size: 19px; line-height: 1.5; max-width: 760px; } .about-sec__text { color: var(--body); font-size: 14.5px; line-height: 1.8; max-width: 820px; margin-bottom: 18px; } .ilink { color: var(--orange); font-weight: 600; } .about-list { display: grid; gap: 12px; margin: 0 0 22px; max-width: 760px; } .about-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 24px; } .about-pill { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--navy); border: 1.5px solid rgba(0,38,77,.13); border-radius: 30px; padding: 11px 18px 11px 14px; font-size: 13px; font-weight: 600; line-height: 1; } .about-pill svg { color: var(--orange); flex: none; } /* plain icon + text list — no border/background */ .icon-list { list-style: none; display: grid; gap: 12px; margin: 16px 0 24px; padding: 0; } .icon-list--two { grid-template-columns: 1fr 1fr; } .icon-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--navy); } .icon-list li svg { flex: none; color: var(--orange); } .about-list--two { grid-template-columns: 1fr 1fr; gap: 12px 40px; } .about-list li { position: relative; padding-left: 30px; color: var(--ink); font-size: 14px; } .about-list li::before { content: ""; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--orange); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EF7E1A' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat; } .about-sub { font-family: var(--serif); color: var(--navy); font-size: 22px; font-weight: 700; margin: 28px 0 18px; } .about-sub--plain { font-family: var(--sans); font-size: 18px; font-weight: 600; margin-top: 10px; } /* PES institutions marquee carousel */ .inst-marquee { overflow: hidden; position: relative; margin: 8px 0 30px; } .inst-track { display: flex; width: max-content; animation: inst-scroll 40s linear infinite; } .inst-track:hover { animation-play-state: paused; } .inst-track .inst-card { flex: none; width: 260px; margin-right: 24px; } @keyframes inst-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* inst-card shared styles */ .inst-card { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,38,77,.07); box-shadow: 0 4px 18px rgba(0,38,77,.07); transition: transform .32s var(--ease), box-shadow .32s; } .inst-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(0,38,77,.14); } .inst-card__img { height: 190px; overflow: hidden; } .inst-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .inst-card:hover .inst-card__img img { transform: scale(1.06); } .inst-card__body { padding: 16px 18px 18px; } .inst-card__tag { display: block; font-size: 10px; color: var(--orange); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 5px; } .inst-card__name { font-size: 14px; font-weight: 700; color: var(--navy); margin: 0 0 14px; line-height: 1.45; } .inst-card__link { display: inline-flex; align-items: center; gap: 6px; color: var(--orange); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: gap .22s; } .inst-card__link:hover { gap: 11px; } /* campus slider (PES Legacy section) */ .campus-slider__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .campus-slider__title { margin: 0; } .campus-slider__btns { display: flex; gap: 8px; flex: none; } .campus-slider { position: relative; display: flex; align-items: center; gap: 0; margin: 16px 0 36px; } .campus-slider__wrap { overflow: hidden; flex: 1; min-width: 0; } .campus-slider__track { display: flex; gap: 16px; transition: transform .42s cubic-bezier(.4,0,.2,1); will-change: transform; } .campus-slide { flex: none; width: 260px; height: 286px; border-radius: 18px; overflow: hidden; position: relative; display: block; text-decoration: none; cursor: pointer; } .campus-slide__img { position: absolute; inset: 0; } .campus-slide__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .52s var(--ease); } .campus-slide:hover .campus-slide__img img { transform: scale(1.07); } .campus-slide__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.38) 0%, transparent 38%, rgba(0,0,0,.75) 78%); display: flex; flex-direction: column; justify-content: space-between; padding: 14px 16px 18px; } .campus-slide__tag { align-self: flex-start; background: rgba(0,0,0,.46); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 30px; } .campus-slide__name { color: #fff; font-size: 15.5px; font-weight: 700; line-height: 1.28; margin: 0 0 3px; } .campus-slide__sub { color: rgba(255,255,255,.76); font-size: 12px; margin: 0 0 11px; line-height: 1.4; } .campus-slide__link { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px; transition: gap .2s, border-color .2s; } .campus-slide:hover .campus-slide__link { gap: 8px; border-color: rgba(255,255,255,.9); } .campus-you-are-here { display: inline-flex; align-items: center; gap: 6px; background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border-radius: 30px; } .campus-slider__btn { width: 40px; height: 40px; border-radius: 50%; flex: none; background: #fff; border: 1.5px solid rgba(0,38,77,.14); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.1); transition: background .22s, border-color .22s, box-shadow .22s; } .campus-slider__btn:hover { background: var(--navy); border-color: var(--navy); box-shadow: 0 4px 18px rgba(0,38,77,.28); } .campus-slider__btn svg path { stroke: var(--navy); transition: stroke .22s; } .campus-slider__btn:hover svg path { stroke: #fff; } .campus-slider__btn:disabled { opacity: .35; pointer-events: none; } @media (max-width: 700px) { .campus-slider__header { flex-wrap: wrap; gap: 12px; } .campus-slider__btns { order: 2; } .campus-slider { gap: 0; margin: 16px -22px 32px; padding: 0 22px; overflow: hidden; } .campus-slider__wrap { overflow: visible; flex: none; width: 100%; } .campus-slider__track { gap: 12px; } .campus-slide { width: calc(78vw - 30px); height: 250px; border-radius: 14px; } } /* leadership grid — 3 cards row 1, 2 cards centred row 2 */ .leader-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin: 24px 0 30px; } .leader-card { grid-column: span 2; background: var(--navy); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,38,77,.1); text-align: left; transition: transform .3s var(--ease), box-shadow .3s; border-bottom: 3px solid var(--orange); display: flex; flex-direction: column; } .leader-card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(0,38,77,.18); } .leader-card:nth-child(4) { grid-column: 2 / 4; } .leader-card:nth-child(5) { grid-column: 4 / 6; } .leader-card__img { height: 280px; border-radius: 0; margin-bottom: 0; overflow: hidden; display: block; } .leader-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .5s var(--ease); } .leader-card:hover .leader-card__img img { transform: scale(1.05); } .leader-card__body { padding: 20px 20px 22px; background: var(--navy); display: flex; flex-direction: column; flex: 1; } .leader-card h4 { color: #fff; font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; } .leader-card p { color: rgba(255,255,255,.62); font-size: 12.5px; margin: 0; line-height: 1.5; padding-bottom: 14px; } .leader-card .txt-orange { color: var(--orange); } .leader-card__arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; align-self: flex-start; margin-top: auto; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25); color: #fff; transition: background .22s, border-color .22s, transform .22s; } .leader-card__arrow:hover { background: var(--orange); border-color: var(--orange); transform: translateX(4px); } /* faculty grid */ .faculty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; margin: 16px 0 24px; } .faculty-card { display: grid; grid-template-columns: 120px 1fr; gap: 20px; } .faculty-card__img { height: 120px; border-radius: 8px; } .faculty-card__body h4 { color: var(--navy); font-size: 15px; font-weight: 700; } .faculty-card__role { color: var(--orange); font-size: 11.5px; font-weight: 600; margin: 3px 0 8px; } .faculty-card__desc { color: var(--body); font-size: 12.5px; line-height: 1.65; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1180px) { .split__panel { padding: 56px 44px; } .split__content { max-width: 100%; } .mega { width: 84%; } } @media (max-width: 1024px) { /* faculty-grid / leader-grid keep their desktop layout (single row / 3+2 pyramid) through tablet widths — they only reflow at ≤600px. */ .about-sec { padding: 40px 0 8px 32px; } } @media (max-width: 1100px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__connect { grid-column: 1 / -1; } .footer__bottom { grid-template-columns: repeat(3, 1fr); row-gap: 36px; } } @media (max-width: 900px) { /* Mobile header: topbar shown same as desktop (icon-only, see below). --header-h stays 72px (navbar only, not topbar) — it's used by .psn's sticky top-offset, and by the time .psn scrolls into view the user has already scrolled past .topbar, so .nav (72px) is the only thing .psn needs to clear. .nav__menu (the slide-in panel) handles the topbar-still-visible case itself, see the comment down by its rule. */ :root { --header-h: 72px; } .topbar__inner { height: auto; padding: 8px 0; } .topbar__left { padding: 6px 14px; height: auto; } .topbar__left::before { display: none; } .topbar__right { gap: 14px; } .topbar__social { border-radius: 10px; } /* Prospectus/email: icon only. Request a Callback moves into the toggle menu instead (see .nav__menu-callback). */ .topbar__right a span { display: none; } .topbar__right .topbar__callback { display: none; } /* .nav stays pinned (sticky) on mobile/tablet same as desktop — see the .psn rule above, which sticks at var(--header-h) i.e. just below .nav, consistent on every screen size now. */ .nav { position: sticky; top: 0; } .nav__inner { align-items: center; height: 72px; } .nav__logo img { height: 54px; } .nav.is-shrunk .nav__inner { height: 72px; } .nav.is-shrunk .nav__logo img { height: 54px; } .hero { padding-top: 18%; } .about-hero__inner { padding-top: 18%; } /* ── Slide-in menu panel: position:fixed spanning the full viewport (top:0) so its width is never at the mercy of a positioned ancestor's own padding/max-width — .nav and .topbar both sit at z-index:60, above the panel's z-index:55, so they stay visibly painted on top of the panel's background regardless of scroll state; padding-top just needs to clear whichever of them is currently showing (topbar+navbar when unscrolled, navbar alone once .nav is stuck) so the menu's own link list starts below both, never overlapping either. */ .nav__menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; background: #f0ede8; flex: none; margin-left: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 130px 14px 40px; gap: 8px; transform: translateX(100%); transition: transform .38s var(--ease); z-index: 55; overflow-y: auto; } .nav__menu.is-open { transform: none; } .nav__item { width: 100%; display: block; } /* Profile card at the top of the mobile menu (replaces the navbar avatar) */ .nav__menu-profile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; margin-bottom: 8px; border-radius: 14px; background: #eaf1fb; text-decoration: none; } .nav__menu-profile .nav__avatar { width: 42px; height: 42px; font-size: 15px; } .nav__menu-profile-text { display: flex; flex-direction: column; min-width: 0; } .nav__menu-profile-name { font-size: 15px; font-weight: 700; color: var(--navy); } .nav__menu-profile-email { font-size: 12.5px; color: var(--body); word-break: break-all; } /* Account action links appended after the main menu items */ .nav__menu-account { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; } .nav__menu-account .nav__link { justify-content: flex-start; gap: 10px; } .nav__menu-account .nav__link svg { flex: none; } /* Each top-level link → rounded card */ .nav__link { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-radius: 14px; background: #e6e1d9; border-bottom: none; font-size: 16px; font-weight: 600; color: var(--navy); transition: background .2s, color .2s; } .nav__link::after { display: none; } /* Active page → navy card */ .nav__link.is-active { background: var(--navy); color: #fff; } /* Must come after the base .nav__link rule (same specificity) to win */ .nav__link--danger { background: #FBEAEA; color: #C0392B; } .nav__link--danger:hover { background: #F6D9D9; } .nav__link--signin { background: var(--orange); color: #fff; justify-content: center; } .nav__link--signin:hover { background: var(--orange-dark); } /* .nav__link.nav__menu-callback (two classes) matches the specificity of the desktop-hiding rule outside this media query, so it can actually override it here. */ .nav__link.nav__menu-callback { display: flex; background: var(--orange); color: #fff; justify-content: center; gap: 8px; margin-top: 8px; } .nav__menu-callback:hover { background: var(--orange-dark); } .nav__caret { display: inline-block; transition: transform .25s var(--ease); } .nav__item.is-open .nav__caret { transform: rotate(225deg) translateY(-2px); } .nav__toggle { display: flex !important; /* Plain flex child of .nav__inner, vertically centered via align-self — deliberately NOT position:absolute/fixed, which needed a containing-block or hand-tuned "top" per breakpoint and kept landing in the wrong spot. Flexbox just centers it. .nav__account is hidden on mobile now (profile lives in the slide-in menu instead), so the toggle is the only thing pushed to the right. */ align-self: center; margin-left: auto; /* z-index only affects positioned elements — relative (no offsets, so it doesn't shift from its flex position) keeps the close (×) button paintable above the full-screen slide-in menu when it's open. */ position: relative; z-index: 9999; width: 42px; height: 42px; flex-direction: column; justify-content: center; gap: 5px; } /* ── Sub-menu accordion ── */ .mega { position: static; width: 100%; max-width: none; border-radius: 0; opacity: 1; visibility: visible; transform: none; background: transparent; box-shadow: none; border-top: none; max-height: 0; overflow: hidden; transition: max-height .38s var(--ease); } .nav__item.is-open .mega { max-height: 700px; } .mega__inner { padding: 6px 0 4px; display: flex; flex-direction: column; gap: 6px; } .mega__label, .mega__media { display: none; } .mega__body { display: block; } .mega__list { display: flex; flex-direction: column; gap: 6px; } .mega--wide { width: 100%; max-width: none; } .mega--wide .mega__body { display: block; } .mega__list--two { display: flex; flex-direction: column; gap: 6px; } .mega__list li, .mega__list li:first-child { border: none; } /* Each sub-item → white card */ .mega__list a { display: block; padding: 13px 20px; border-radius: 12px; background: #fff; color: var(--navy); font-size: 15px; font-weight: 500; transition: background .18s, padding-left .18s; } .mega__list a::before { display: none; } .mega__list a:hover { background: rgba(0,38,77,.07); padding-left: 28px; } /* about page stacks */ .about__grid { grid-template-columns: 1fr; background: none; } .about__side { position: static; min-height: auto; margin-left: -32px; margin-right: -32px; } /* About page: no section menu on mobile */ .about__side--hide-mobile { display: none; } .about-sec::after { display: none; } .side-nav { position: sticky; top: 60px; flex-direction: row; overflow-x: auto; } .side-nav__link { border-left: none; border-bottom: 3px solid transparent; } .side-nav__link.is-active { border-bottom-color: var(--orange); background: none; } .about-sec { padding: 36px 32px 8px 32px; margin-left: -32px; margin-right: -32px; } /* lead banner stacks on mobile: image on top, text below */ .lead-banner { margin: 12px -32px 24px; min-height: 0; display: block; } .lead-banner > img { position: relative; inset: auto; width: 100%; height: 220px; border-radius: 0; } .lead-banner::after { display: none; } .lead-banner__inner { padding: 16px 0 0 32px; max-width: none; } .inst-grid { grid-template-columns: repeat(3, 1fr); } .about-hero__media::after { background: linear-gradient(90deg, rgba(0,30,61,.92) 0%, rgba(0,30,61,.66) 100%); } /* rings/stats/domains/program-grid stay a single row through tablet widths — they only drop to fewer columns/stack at ≤600px below. */ .domain-card__list { max-height: 200px; opacity: 1; margin-top: 14px; } .domain-card::after { background: linear-gradient(180deg, rgba(0,38,77,.15) 0%, rgba(0,24,49,.92) 100%); } .split { grid-template-columns: 1fr; } .split--residential { display: flex; flex-direction: column; } .split--residential .split__panel { order: 2; padding-right: 32px; } .split__media { min-height: 320px; order: 1; } .split__panel { padding: 54px 32px; } .split--athletics .split__panel { padding-left: 32px; } .split__content { max-width: 100%; margin: 0 !important; } .split--athletics .split__title, .split--athletics .split__text, .split--athletics .split__accent { text-align: left; } .split--athletics .split__content .btn { float: none; } .scroll-cue--corner { display: none; } } @media (max-width: 768px) { .topbar__right a span, .topbar__left span { font-size: 12px; } .section--navy, .section--light { padding: 64px 0; } .container { padding: 0 22px; } .about-sec { padding: 36px 22px 8px 32px; margin-left: -22px; margin-right: -22px; } .lead-banner { margin: 12px -22px 24px; } .lead-banner__inner { padding-left: 22px; } } @media (max-width: 600px) { .hero { padding-top: 12%; } .about-hero__inner { padding-top: 10%; } .rings { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } .stats { grid-template-columns: 1fr; } .domains { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } .program-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .footer__top { grid-template-columns: 1fr; gap: 36px; } .footer__bottom { grid-template-columns: 1fr 1fr; } .hero__actions .btn { flex: 1; justify-content: center; } .admissions__card { padding: 44px 24px; } .campus__slide img { height: 300px; } .campus__caption { max-width: 150px; padding: 9px 12px; } .inst-grid { grid-template-columns: 1fr 1fr; } .about-list--two { grid-template-columns: 1fr; } .faculty-grid { grid-template-columns: 1fr; } /* Leader cards — horizontal list on mobile, navy color kept */ .leader-grid { grid-template-columns: 1fr; gap: 12px; } .leader-card, .leader-card:nth-child(4), .leader-card:nth-child(5) { grid-column: span 1; grid-row: auto; display: flex; flex-direction: row; border-radius: 12px; } .leader-card__img { width: 96px; height: 96px; flex: none; overflow: hidden; } .leader-card__img img { object-position: center; } .leader-card__body { flex: 1; padding: 12px 14px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: unset; gap: 10px; } .leader-card__body > div { flex: 1; } .leader-card h4 { font-size: 13px; margin-bottom: 3px; } .leader-card p { font-size: 11px; } .leader-card__arrow { display: inline-flex; width: 30px; height: 30px; margin-top: 0; flex: none; } } @media (max-width: 400px) { .footer__bottom { grid-template-columns: 1fr; } } /* ========================================================= ERROR PAGES (404 / 500 / 403 / 400) ========================================================= */ .eh-main { display: flex; align-items: center; justify-content: center; padding: 80px 24px 100px; position: relative; overflow: hidden; min-height: calc(100vh - 260px); background: var(--bg-light); } .eh-watermark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--serif); font-size: clamp(200px, 28vw, 360px); font-weight: 700; color: rgba(0, 38, 77, .05); line-height: 1; user-select: none; pointer-events: none; white-space: nowrap; } .eh-card { position: relative; z-index: 1; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 56px 52px 52px; max-width: 560px; width: 100%; text-align: center; } /* Code pill */ .eh-code { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; padding: 4px 14px; border-radius: 50px; margin-bottom: 20px; } .eh-code--404 { background: rgba(239, 126, 26, .12); color: var(--orange-dark); } .eh-code--500 { background: rgba(220, 53, 69, .10); color: #c82333; } .eh-code--403 { background: rgba(0, 38, 77, .10); color: var(--navy); } .eh-code--400 { background: rgba(239, 126, 26, .12); color: var(--orange-dark); } .eh-code--default { background: var(--bg-light); color: var(--body); } /* Icon badge */ .eh-badge { width: 80px; height: 80px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 28px; } .eh-badge--404 { background: rgba(239, 126, 26, .12); color: var(--orange); } .eh-badge--500 { background: rgba(220, 53, 69, .10); color: #dc3545; } .eh-badge--403 { background: rgba(0, 38, 77, .10); color: var(--navy); } .eh-badge--400 { background: rgba(239, 126, 26, .12); color: var(--orange-dark); } .eh-badge--default { background: rgba(0, 38, 77, .08); color: var(--navy); } .eh-title { font-family: var(--serif); font-size: clamp(26px, 5vw, 34px); font-weight: 600; color: var(--navy); line-height: 1.2; margin-bottom: 14px; } .eh-msg { font-size: 15px; color: var(--body); line-height: 1.7; margin-bottom: 36px; } .eh-divider { border: none; border-top: 1px solid rgba(0, 38, 77, .08); margin-bottom: 36px; } /* Action buttons */ .eh-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .eh-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13.5px; font-weight: 700; letter-spacing: .04em; padding: 11px 26px; border-radius: 50px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s; cursor: pointer; border: none; } .eh-btn:hover { transform: translateY(-2px); } .eh-btn--primary { background: var(--orange); color: var(--white); box-shadow: 0 6px 20px rgba(239, 126, 26, .28); } .eh-btn--primary:hover { background: var(--orange-dark); box-shadow: 0 10px 28px rgba(239, 126, 26, .38); } .eh-btn--outline { background: var(--white); color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset; } .eh-btn--outline:hover { background: var(--navy); color: var(--white); box-shadow: none; } /* Traceback (debug only) */ .eh-traceback { margin-top: 32px; text-align: left; border: 1px solid rgba(0, 38, 77, .10); border-radius: 10px; overflow: hidden; } .eh-traceback summary { padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--body); cursor: pointer; background: var(--bg-light); user-select: none; } .eh-traceback summary:hover { background: #e6e7e9; } .eh-traceback pre { padding: 16px; font-size: 11.5px; line-height: 1.6; color: var(--ink); overflow-x: auto; background: var(--white); white-space: pre-wrap; word-break: break-word; } @media (max-width: 600px) { .eh-card { padding: 40px 24px 36px; border-radius: var(--radius); } .eh-watermark { font-size: clamp(140px, 40vw, 220px); } .eh-actions { flex-direction: column; align-items: stretch; } .eh-btn { justify-content: center; } } @media (prefers-reduced-motion: reduce) { .eh-btn { transition: none; } } /* ========================================================= ACADEMICS PAGE ========================================================= */ /* --- Hero --- */ .acad-hero { position: relative; min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; overflow: hidden; } .acad-hero__bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,30,61,.92) 0%, rgba(0,30,61,.72) 45%, rgba(0,30,61,.40) 100%), url("../assets/images/campus.jpg") center 30% / cover no-repeat; } .acad-hero__inner { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; padding-top: 22%; padding-bottom: 40px; } .acad-hero__content { max-width: 580px; animation: heroSlideLeft .85s var(--ease) both; } .acad-hero__side-label { position: absolute; left: -38px; top: 50%; transform: translateY(-50%) rotate(-90deg); font-size: 10.5px; font-weight: 700; letter-spacing: .22em; color: #fff; opacity: .3; white-space: nowrap; pointer-events: none; } @keyframes heroSlideLeft { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } } .acad-hero__title { font-family: var(--serif); font-weight: 800; color: #fff; font-size: clamp(32px, 4.8vw, 50px); line-height: 1.12; letter-spacing: -.01em; } .acad-hero__text { margin-top: 20px; color: rgba(255,255,255,.86); font-size: 15px; max-width: 540px; line-height: 1.75; } /* bottom scroll cues */ .acad-hero__bottom { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; padding-bottom: 30px; } .acad-hero__cue { color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .65; white-space: nowrap; transition: opacity .2s; } .acad-hero__cue:hover { opacity: 1; } .acad-hero__rule { flex: 1; height: 1px; background: rgba(255,255,255,.28); } /* --- Our Programmes --- */ .acad-programs { background: #fff; padding: 88px 0 84px; } .acad-programs .section__title { margin-bottom: 50px; } .acad-prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .acad-prog-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid rgba(0,38,77,.07); display: flex; flex-direction: column; transition: transform .32s var(--ease), box-shadow .32s; } .acad-prog-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(0,0,0,.14); } .acad-prog-card__img { position: relative; height: 220px; overflow: hidden; } .acad-prog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .acad-prog-card:hover .acad-prog-card__img img { transform: scale(1.05); } .acad-prog-card__tag { position: absolute; top: 14px; left: 14px; background: rgba(0,38,77,.7); backdrop-filter: blur(4px); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 5px 13px; border-radius: 30px; } .acad-prog-card__body { padding: 22px 22px 28px; display: flex; flex-direction: column; flex: 1; } .acad-prog-card__title { font-family: var(--serif); color: var(--navy); font-size: 22px; font-weight: 700; margin-bottom: 10px; } .acad-prog-card__desc { color: var(--body); font-size: 13.5px; line-height: 1.7; flex: 1; } .acad-prog-card .link-more { margin-top: 18px; } /* --- What We Believe --- */ .acad-beliefs { padding: 88px 0 84px; text-align: center; } .acad-beliefs__eyebrow { display: inline-block; color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px; } .acad-beliefs__title { font-family: var(--serif); font-weight: 700; font-style: italic; color: var(--navy); font-size: clamp(30px, 4vw, 46px); line-height: 1.2; margin-bottom: 26px; } .acad-beliefs__text { max-width: 820px; margin: 0 auto 44px; color: var(--body); font-size: 14.5px; line-height: 1.8; } .acad-stats-card { background: var(--navy); border-radius: var(--radius-lg); padding: 50px 60px; display: grid; grid-template-columns: repeat(3, 1fr); box-shadow: 0 24px 50px rgba(0,38,77,.22); margin-bottom: 28px; } .acad-stat { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 24px; border-right: 1px solid rgba(255,255,255,.12); } .acad-stat:last-child { border-right: none; } .acad-stat__num { font-family: var(--serif); font-size: clamp(42px, 5vw, 58px); font-weight: 700; color: var(--orange); line-height: 1; } .acad-stat__label { color: rgba(255,255,255,.7); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.7; text-align: center; } .acad-beliefs__link { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-size: 13.5px; font-weight: 600; transition: gap .22s, color .2s; } .acad-beliefs__link:hover { color: var(--orange); gap: 13px; } /* --- Academics responsive --- */ /* .acad-prog-grid / .acad-stats-card stay a single row through tablet widths — they only stack at ≤600px below. */ @media (max-width: 600px) { .acad-prog-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .acad-stats-card { grid-template-columns: 1fr; padding: 36px 30px; } .acad-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); padding: 0 0 28px; } .acad-stat:last-child { border-bottom: none; padding-bottom: 0; } .acad-hero__bottom { gap: 12px; } .acad-hero__title br { display: none; } } /* ========================================================= EARLY YEARS PAGE ========================================================= */ /* --- Hero --- */ .ey-hero { position: relative; min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; overflow: hidden; } .ey-hero__bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,30,61,.92) 0%, rgba(0,30,61,.72) 45%, rgba(0,30,61,.40) 100%), url("../assets/images/early.jpg") center / cover no-repeat; } .ey-hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 22%; padding-bottom: 40px; } .ey-hero__content { max-width: 640px; } .ey-hero__title { animation: revealFromTop .8s var(--ease) both; } .ey-hero__text { animation: revealFromTop .8s var(--ease) 220ms both; } .ey-hero__btns { animation: revealFromTop .8s var(--ease) 400ms both; } .ey-hero__label { display: inline-block; color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 2px solid var(--orange); margin-bottom: 20px; } .ey-hero__title { font-family: var(--serif); font-weight: 800; color: #fff; font-size: clamp(36px, 5.5vw, 60px); line-height: 1.08; letter-spacing: -.01em; margin-bottom: 20px; } .ey-hero__text { color: rgba(255,255,255,.84); font-size: 15px; max-width: 560px; line-height: 1.8; margin-bottom: 34px; } .ey-hero__btns { display: flex; gap: 14px; flex-wrap: wrap; } .btn--dark { display: inline-flex; align-items: center; gap: 8px; background: var(--navy-deep); color: #fff; font-size: 14px; font-weight: 700; font-family: var(--sans); padding: 14px 26px; border-radius: 50px; text-decoration: none; transition: background .22s, transform .2s; white-space: nowrap; } .btn--dark:hover { background: var(--navy); transform: translateY(-2px); } /* --- Learning Through Doing --- */ .ey-learning { background: #fff; padding: 80px 0; overflow-x: hidden; } .ey-learning__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .ey-learning__media { display: flex; align-items: center; justify-content: flex-start; } .ey-learning__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--radius); } .ey-learning__media::after { display: none; } .ey-learning__panel { background: #fff; display: flex; align-items: center; } .ey-learning__content { max-width: 480px; } .ey-learning__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(26px, 3.2vw, 36px); line-height: 1.22; margin-bottom: 26px; } .ey-learning__text { color: var(--body); font-size: 15px; line-height: 1.84; } /* --- What Fills Our Days (NAVY BG) --- */ .ey-days { background: var(--navy); padding: 90px 0 88px; overflow-x: hidden; } .ey-days__split { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "intro imgrid" "body imgrid"; gap: 0 60px; align-items: start; } .ey-days__intro { grid-area: intro; } .ey-days__body { grid-area: body; } .ey-days__title { font-family: var(--serif); font-weight: 700; color: #fff; font-size: clamp(26px, 3.5vw, 36px); line-height: 1.15; margin-bottom: 14px; } .ey-days__lead { color: var(--orange); font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.55; margin-bottom: 28px; } .ey-days__text { color: rgba(255,255,255,.8); font-size: 14.5px; line-height: 1.84; margin-bottom: 20px; } .ey-days__text:last-child { margin-bottom: 0; } /* 3-image grid: 2 stacked left + 1 tall right */ .ey-days__imgrid { grid-area: imgrid; align-self: center; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ey-days__imgrid-left { display: flex; flex-direction: column; gap: 12px; } .ey-days__img { border-radius: var(--radius); overflow: hidden; flex: 1; min-height: 200px; } .ey-days__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ey-days__img--tall { border-radius: var(--radius); overflow: hidden; min-height: 414px; } .ey-days__img--tall img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- A Glimpse Into Our Day --- */ .ey-glimpse { background: var(--bg-light); padding: 90px 0 80px; } /* Separated rows — each row is its own rounded card */ .ey-sched-table { margin-top: 44px; display: flex; flex-direction: column; gap: 10px; } .ey-sched-row { display: grid; grid-template-columns: 170px 220px 1fr; padding: 18px 28px; border-radius: var(--radius); align-items: center; transition: background .18s; box-shadow: 0 1px 6px rgba(0,38,77,.07); } /* Alternating row colours: odd = warm tint (orange time), even = white (navy time) */ .ey-sched-row:nth-child(odd) { background: rgba(239,126,26,.1); } .ey-sched-row:nth-child(even) { background: #fff; } .ey-sched-row:hover { background: rgba(239,126,26,.16); } .ey-sched-row:nth-child(odd) .ey-sched-time, .ey-sched-row:nth-child(odd) .ey-sched-name { color: var(--orange); } .ey-sched-row:nth-child(even) .ey-sched-time, .ey-sched-row:nth-child(even) .ey-sched-name { color: var(--navy); } .ey-sched-time { font-size: 12px; font-weight: 700; letter-spacing: .03em; } .ey-sched-name { font-size: 14px; font-weight: 700; padding-right: 24px; display: flex; align-items: center; gap: 10px; } .ey-sched-icon { flex: none; color: currentColor; } .ey-sched-desc { font-size: 13px; color: var(--body); line-height: 1.62; } .ey-glimpse__note { margin-top: 20px; font-size: 12px; color: var(--body); font-style: italic; text-align: center; } /* --- Spaces Designed (NAVY BG) --- */ .ey-spaces { background: var(--navy); padding: 90px 0 88px; } .ey-spaces__title { font-family: var(--serif); color: #fff; font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; line-height: 1.2; margin-bottom: 14px; } .ey-spaces__sub { color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.78; max-width: 780px; margin-bottom: 44px; } .ey-spaces__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; } .ey-space-card { background: #fff; border-radius: var(--radius); overflow: hidden; } /* Last (wide) card: full-width, image LEFT — text RIGHT */ .ey-space-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; } .ey-space-card--wide .ey-space-card__img { height: 100%; min-height: 260px; } .ey-space-card--wide .ey-space-card__body { display: flex; flex-direction: column; justify-content: center; padding: 32px 44px; } .ey-space-card__img { height: 190px; overflow: hidden; } .ey-space-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .ey-space-card:hover .ey-space-card__img img { transform: scale(1.05); } .ey-space-card__body { padding: 18px 20px 24px; } .ey-space-card__title { font-family: var(--serif); color: var(--navy); font-size: 15px; font-weight: 700; margin-bottom: 9px; } .ey-space-card__desc { color: var(--body); font-size: 13px; line-height: 1.72; } /* --- The People (LIGHT GRAY BG) --- */ .ey-people { background: var(--bg-light); padding: 90px 0 88px; } .ey-people__title { font-family: var(--serif); color: var(--navy); font-size: clamp(26px, 3.5vw, 40px); font-weight: 700; line-height: 1.15; margin-bottom: 14px; } .ey-people__sub { color: var(--body); font-size: 14.5px; line-height: 1.78; max-width: 820px; margin-bottom: 44px; } .ey-people__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; } /* Horizontal card: image LEFT (square), text RIGHT */ .ey-staff-card { display: grid; grid-template-columns: 140px 1fr; align-items: start; gap: 0; background: transparent; } .ey-staff-card__img { width: 140px; height: 140px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; } .ey-staff-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .ey-staff-card__body { padding: 0 20px 16px; background: transparent; } .ey-staff-card__name { font-family: var(--serif); color: var(--navy); font-size: 17px; font-weight: 700; margin-bottom: 5px; } .ey-staff-card__role { display: block; color: var(--orange); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 12px; } .ey-staff-card__desc { color: var(--body); font-size: 13px; line-height: 1.72; } /* --- Life in Early Years — Month by Month (WHITE BG) --- */ .ey-months { background: #fff; padding: 90px 0 88px; } .ey-months__title { font-family: var(--serif); color: var(--navy); font-size: clamp(26px, 3.5vw, 40px); font-weight: 700; line-height: 1.15; margin-bottom: 14px; } .ey-months__sub { color: var(--body); font-size: 14.5px; line-height: 1.78; max-width: 860px; margin-bottom: 30px; } /* Year tabs — pill buttons */ .ey-months__year-tabs { display: flex; gap: 10px; margin-bottom: 22px; } .ey-months__year-tab { font-size: 13px; font-weight: 700; font-family: var(--sans); padding: 9px 22px; border-radius: 10px; cursor: pointer; border: 2px solid transparent; transition: all .22s; background: var(--bg-light); color: var(--body); } .ey-months__year-tab.is-active { background: var(--orange); color: #fff; border-color: var(--orange); } .ey-months__year-tab:hover:not(.is-active) { border-color: var(--navy); color: var(--navy); } /* Month tabs — text with underline */ .ey-months__month-tabs { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 1px solid rgba(0,38,77,.12); margin-bottom: 30px; } .ey-months__month-tab { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--body); padding: 10px 18px 12px; cursor: pointer; border: none; background: none; font-family: var(--sans); position: relative; bottom: -1px; transition: color .2s; } .ey-months__month-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange); transform: scaleX(0); transition: transform .22s var(--ease); } .ey-months__month-tab.is-active { color: var(--orange); } .ey-months__month-tab.is-active::after { transform: scaleX(1); } /* Photo gallery — Pinterest-style masonry (varied card heights, staggered placement) */ .ey-gallery { columns: 3; column-gap: 14px; } .ey-gallery-item { width: 100%; margin-bottom: 14px; break-inside: avoid; border-radius: var(--radius); background-size: cover; background-position: center; } /* Repeating height rhythm gives the columns their staggered look, whatever photos happen to be in a given month/year — no per-item hardcoding needed. */ .ey-gallery-item:nth-child(6n+1) { height: 380px; } .ey-gallery-item:nth-child(6n+2) { height: 260px; } .ey-gallery-item:nth-child(6n+3) { height: 440px; } .ey-gallery-item:nth-child(6n+4) { height: 300px; } .ey-gallery-item:nth-child(6n+5) { height: 380px; } .ey-gallery-item:nth-child(6n+0) { height: 260px; } .ey-gallery.is-hidden { display: none; } /* --- Joining the Amaatra Early Years Program --- */ .ey-join { background: var(--bg-light); padding: 80px 0; } .ey-join__card { background: var(--navy); border-radius: var(--radius-lg); padding: 64px 60px 52px; } .ey-join__title { font-family: var(--serif); color: #fff; font-size: clamp(26px, 3.5vw, 38px); font-weight: 700; line-height: 1.15; margin-bottom: 16px; } .ey-join__sub { color: rgba(255,255,255,.76); font-size: 15px; line-height: 1.8; max-width: 760px; margin-bottom: 44px; } .ey-join__cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 44px; margin-bottom: 44px; } .ey-join__col-label { color: var(--orange); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 14px; } .ey-join__col-text { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.8; } .ey-join__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; } .btn--ghost-white { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; font-size: 14px; font-weight: 700; font-family: var(--sans); padding: 14px 26px; border-radius: 50px; text-decoration: none; border: 2px solid rgba(255,255,255,.5); transition: border-color .22s, background .22s, transform .2s; white-space: nowrap; } .btn--ghost-white:hover { border-color: #fff; background: rgba(255,255,255,.08); transform: translateY(-2px); } .ey-join__note { color: rgba(255,255,255,.5); font-size: 12.5px; line-height: 1.7; font-style: italic; } /* --- EY Responsive --- */ @media (max-width: 1024px) { .ey-join__cols { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 900px) { .ey-learning__grid { grid-template-columns: 1fr; } .ey-learning__media img { aspect-ratio: 16/9; } .ey-learning__panel { padding-top: 8px; } .ey-days__split { grid-template-columns: 1fr 1fr; grid-template-areas: "intro intro" "imgrid imgrid" "body body"; gap: 24px 12px; } .ey-days__imgrid-left { display: contents; } .ey-days__img { min-height: 180px; } .ey-days__img--tall { grid-column: 1 / -1; min-height: 220px; } .ey-sched-row { grid-template-columns: 140px 1fr; } .ey-sched-desc { display: none; } .ey-spaces__grid { grid-template-columns: 1fr; } .ey-space-card--wide { grid-column: auto; grid-template-columns: 1fr; } .ey-space-card--wide .ey-space-card__img { min-height: 200px; } .ey-people__grid { grid-template-columns: 1fr; gap: 40px; } .ey-staff-card { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; } .ey-staff-card__img { width: 240px; height: 260px; margin: 0 auto; } .ey-staff-card__body { padding: 0; } .ey-join__card { padding: 44px 30px 38px; } .ey-gallery { columns: 2; } } @media (max-width: 600px) { .ey-hero__btns { flex-direction: column; align-items: flex-start; } .ey-days__img { min-height: 150px; } .ey-sched-row { grid-template-columns: 120px 1fr; padding: 14px 16px; } .ey-join__card { padding: 32px 20px 28px; } .ey-join__actions { flex-direction: column; } .ey-gallery { columns: 1; } .ey-months__month-tabs { gap: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ey-months__month-tabs::-webkit-scrollbar { display: none; } .ey-months__month-tab { white-space: nowrap; } } /* ========================================================= MIDDLE SCHOOL PAGE ========================================================= */ /* --- Hero --- */ .ms-hero { position: relative; min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; overflow: hidden; } .ms-hero__img { position: absolute; inset: 0; } .ms-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .ms-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,30,61,.92) 0%, rgba(0,30,61,.72) 45%, rgba(0,30,61,.40) 100%); } .ms-hero__inner { position: relative; z-index: 2; padding-top: 22%; padding-bottom: 40px; width: 100%; } .ms-hero__content { max-width: 490px; } .ms-hero__label { display: inline-block; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 2px solid var(--orange); margin-bottom: 20px; } .ms-hero__title { font-family: var(--serif); font-weight: 800; color: #fff; font-size: clamp(34px, 4.8vw, 58px); line-height: 1.1; margin-bottom: 22px; } .ms-hero__text { color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.82; max-width: 430px; margin-bottom: 36px; } .ms-hero__btns { display: flex; gap: 14px; flex-wrap: wrap; } /* --- Core Beliefs Intro --- */ .ms-intro { padding: 86px 0; background: #f1f1f2; } .ms-intro__inner { text-align: center; } .ms-intro__eyebrow { display: block; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 18px; } .ms-intro__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(24px, 3vw, 38px); line-height: 1.22; margin-bottom: 24px; } .ms-intro__text { color: var(--body); font-size: 15px; line-height: 1.85; max-width: 700px; margin: 0 auto; } /* --- Four Pillars --- */ .ms-pillars { background: #fff; padding: 0 0 80px; overflow: hidden; } .ms-pillars__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(24px, 3vw, 40px); line-height: 1.22; text-align: center; padding: 80px 32px 70px; max-width: var(--container); margin: 0 auto; } /* Inside container — each pillar row is a two-column grid */ .ms-pillar { display: grid; grid-template-columns: 32% 1fr; gap: 56px; align-items: center; max-width: var(--container); margin: 0 auto 64px; padding: 0 32px; } .ms-pillar--flip { grid-template-columns: 1fr 32%; } .ms-pillar__img { height: 340px; border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; } .ms-pillar__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ms-pillar--flip .ms-pillar__img { order: 1; } /* Text fills all remaining container width */ .ms-pillar__content { width: 100%; } .ms-pillar--flip .ms-pillar__content { width: 100%; } .ms-pillar__name { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.2; margin-bottom: 16px; } .ms-pillar__desc { color: var(--body); font-size: 14.5px; line-height: 1.82; } /* --- Athletics --- */ .ms-athletics { background: var(--navy); color: #fff; position: relative; overflow-x: hidden; } .ms-athletics__wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; } .ms-athletics__panel { display: flex; align-items: center; justify-content: flex-end; padding: 80px 60px 80px 32px; } .ms-athletics__content { max-width: 460px; } .ms-athletics__eye { display: block; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 18px; } .ms-athletics__title { font-family: var(--serif); font-weight: 700; color: #fff; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.15; margin-bottom: 20px; } .ms-athletics__text { color: var(--body-light); font-size: 14.5px; line-height: 1.85; } .ms-athletics__img { min-height: 400px; overflow: hidden; } .ms-athletics__img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Quote --- */ .ms-quote { padding: 86px 0; background: #fff; } .ms-quote__text { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(18px, 2.2vw, 26px); color: var(--navy); line-height: 1.65; text-align: center; max-width: 760px; margin: 0 auto; border: none; padding: 0; } /* --- Middle School Responsive --- */ @media (max-width: 1100px) { .ms-hero__content { max-width: 440px; } .ms-athletics__panel { padding: 60px 44px 60px 32px; } } @media (max-width: 900px) { .ms-hero { min-height: auto; padding: 80px 0; } .ms-hero__img::after { background: linear-gradient(90deg, rgba(0,30,61,.94) 0%, rgba(0,30,61,.82) 60%, rgba(0,30,61,.55) 100%); } .ms-hero__title br { display: block; } .ms-pillar { grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; } .ms-pillar--flip { grid-template-columns: 1fr; } .ms-pillar--flip .ms-pillar__img { order: -1; } .ms-pillar__img { height: 260px; } .ms-pillar__content { max-width: 100%; } .ms-pillar--flip .ms-pillar__content { max-width: 100%; } .ms-athletics__wrap { grid-template-columns: 1fr; } .ms-athletics__img { min-height: 320px; order: -1; } .ms-athletics__panel { justify-content: flex-start; padding: 54px 32px; } .ms-athletics__content { max-width: 100%; } } @media (max-width: 600px) { .ms-hero__btns { flex-direction: column; align-items: flex-start; } .ms-pillars__title { padding-bottom: 44px; } .ms-quote { padding: 60px 0; } .ms-quote__text { font-size: 17px; } } /* ========================================================= PRIMARY SCHOOL PAGE (same pattern as Middle School) ========================================================= */ /* --- Hero --- */ .ps-hero { position: relative; min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; overflow: hidden; } .ps-hero__img { position: absolute; inset: 0; } .ps-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .ps-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,30,61,.92) 0%, rgba(0,30,61,.72) 45%, rgba(0,30,61,.40) 100%); } .ps-hero__inner { position: relative; z-index: 2; padding-top: 22%; padding-bottom: 40px; width: 100%; } .ps-hero__content { max-width: 640px; } .ps-hero__label { display: inline-block; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 2px solid var(--orange); margin-bottom: 20px; } .ps-hero__title { font-family: var(--serif); font-weight: 800; color: #fff; font-size: clamp(34px, 4.8vw, 58px); line-height: 1.1; margin-bottom: 22px; } .ps-hero__text { color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.82; max-width: 430px; margin-bottom: 36px; } .ps-hero__btns { display: flex; gap: 14px; flex-wrap: wrap; } /* --- Core Beliefs Intro --- */ .ps-intro { padding: 86px 0; background: #f1f1f2; } .ps-intro__inner { text-align: center; } .ps-intro__eyebrow { display: block; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 18px; } .ps-intro__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(24px, 3vw, 38px); line-height: 1.22; margin-bottom: 24px; } .ps-intro__text { color: var(--body); font-size: 15px; line-height: 1.85; max-width: 700px; margin: 0 auto; } /* --- Four Pillars --- */ .ps-pillars { background: #fff; padding: 0 0 80px; overflow: hidden; } .ps-pillars__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(24px, 3vw, 40px); line-height: 1.22; text-align: center; padding: 80px 32px 70px; max-width: var(--container); margin: 0 auto; } /* Inside container — each pillar row is a two-column grid */ .ps-pillar { display: grid; grid-template-columns: 32% 1fr; gap: 56px; align-items: center; max-width: var(--container); margin: 0 auto 64px; padding: 0 32px; } .ps-pillar--flip { grid-template-columns: 1fr 32%; } .ps-pillar__img { height: 340px; border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; } .ps-pillar__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ps-pillar--flip .ps-pillar__img { order: 1; } /* Text fills all remaining container width */ .ps-pillar__content { width: 100%; } .ps-pillar--flip .ps-pillar__content { width: 100%; } .ps-pillar__name { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.2; margin-bottom: 16px; } .ps-pillar__desc { color: var(--body); font-size: 14.5px; line-height: 1.82; } /* --- Athletics --- */ .ps-athletics { background: var(--navy); color: #fff; position: relative; overflow-x: hidden; } .ps-athletics__wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; } .ps-athletics__panel { display: flex; align-items: center; justify-content: flex-end; padding: 80px 60px 80px 32px; } .ps-athletics__content { max-width: 460px; } .ps-athletics__eye { display: block; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 18px; } .ps-athletics__title { font-family: var(--serif); font-weight: 700; color: #fff; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.15; margin-bottom: 20px; } .ps-athletics__text { color: var(--body-light); font-size: 14.5px; line-height: 1.85; } .ps-athletics__img { min-height: 400px; overflow: hidden; } .ps-athletics__img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Quote --- */ .ps-quote { padding: 86px 0; background: #fff; } .ps-quote__text { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(18px, 2.2vw, 26px); color: var(--navy); line-height: 1.65; text-align: center; max-width: 760px; margin: 0 auto; border: none; padding: 0; } /* --- Primary School Responsive --- */ @media (max-width: 1100px) { .ps-hero__content { max-width: 560px; } .ps-athletics__panel { padding: 60px 44px 60px 32px; } } @media (max-width: 900px) { .ps-hero { min-height: auto; padding: 80px 0; } .ps-hero__img::after { background: linear-gradient(90deg, rgba(0,30,61,.94) 0%, rgba(0,30,61,.82) 60%, rgba(0,30,61,.55) 100%); } .ps-hero__title br { display: block; } .ps-pillar { grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; } .ps-pillar--flip { grid-template-columns: 1fr; } .ps-pillar--flip .ps-pillar__img { order: -1; } .ps-pillar__img { height: 260px; } .ps-pillar__content { max-width: 100%; } .ps-pillar--flip .ps-pillar__content { max-width: 100%; } .ps-athletics__wrap { grid-template-columns: 1fr; } .ps-athletics__img { min-height: 320px; order: -1; } .ps-athletics__panel { justify-content: flex-start; padding: 54px 32px; } .ps-athletics__content { max-width: 100%; } } @media (max-width: 600px) { .ps-hero__btns { flex-direction: column; align-items: flex-start; } .ps-pillars__title { padding-bottom: 44px; } .ps-quote { padding: 60px 0; } .ps-quote__text { font-size: 17px; } } /* ========================================================= SENIOR SCHOOL PAGE ========================================================= */ /* --- Hero (same pattern as Middle School) --- */ .ss-hero { position: relative; min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; overflow: hidden; } .ss-hero__img { position: absolute; inset: 0; } .ss-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ss-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,30,61,.92) 0%, rgba(0,30,61,.72) 45%, rgba(0,30,61,.40) 100%); } .ss-hero__inner { position: relative; z-index: 2; padding-top: 22%; padding-bottom: 40px; width: 100%; } .ss-hero__content { max-width: 520px; } .ss-hero__label { display: inline-block; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 2px solid var(--orange); margin-bottom: 20px; } .ss-hero__title { font-family: var(--serif); font-weight: 800; color: #fff; font-size: clamp(34px, 4.8vw, 56px); line-height: 1.1; margin-bottom: 22px; } .ss-hero__text { color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.82; max-width: 460px; margin-bottom: 36px; } .ss-hero__btns { display: flex; gap: 14px; flex-wrap: wrap; } /* --- Evaluation Framework --- */ /* Change 1: section bg = light, cards bg = white */ .ss-eval { background: var(--bg-light); padding: 84px 0; } .ss-eval__header { margin-bottom: 52px; max-width: 680px; } .ss-eval__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(22px, 2.8vw, 32px); line-height: 1.22; margin-bottom: 14px; } .ss-eval__text { color: var(--body); font-size: 14.5px; line-height: 1.8; } .ss-eval__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .ss-eval-step { background: #fff; border-radius: var(--radius); padding: 28px 24px 30px; position: relative; } .ss-eval-step__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .ss-eval-step__icon { width: 42px; height: 42px; background: var(--orange); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; } .ss-eval-step__num { font-family: var(--serif); font-size: 28px; font-weight: 700; color: rgba(0,38,77,.12); line-height: 1; } .ss-eval-step__name { font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: .1em; margin-bottom: 10px; } .ss-eval-step__desc { color: var(--body); font-size: 13.5px; line-height: 1.75; } /* --- Board Preparation (navy section override) --- */ /* bottom padding is only slightly larger than top — just enough to clear the badge card, which overhangs the image's bottom edge by 25px */ .ss-board.section--navy { padding: 80px 0 110px; overflow-x: hidden; } .ss-board__grid { display: grid; grid-template-columns: 36% 1fr; gap: 140px; align-items: center; } .ss-board__media { position: relative; } .ss-board__img { border-radius: var(--radius); min-height: 580px; box-shadow: 0 24px 56px rgba(0,0,0,.35); width: 100%; display: block; overflow: hidden; position: relative; } .ss-board__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* White card — sits at bottom-right corner, half inside / half below the image */ .ss-board__badge { position: absolute; bottom: -25px; right: -52px; width: 210px; background: #fff; border-radius: var(--radius); padding: 22px 28px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.18); } .ss-board__badge-grade { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 22px; line-height: 1.2; } .ss-board__badge-link { color: var(--orange); font-size: 13px; font-weight: 600; letter-spacing: .02em; } .ss-board__title { font-family: var(--serif); font-weight: 700; color: #fff; font-size: clamp(24px, 3vw, 38px); line-height: 1.18; margin-bottom: 18px; } .ss-board__text { color: var(--body-light); font-size: 14.5px; line-height: 1.82; margin-bottom: 28px; } .ss-board__list { display: flex; flex-direction: column; gap: 20px; list-style: none; } .ss-board__item { display: flex; gap: 14px; align-items: flex-start; background: rgba(255,255,255,.06); border-radius: var(--radius); padding: 16px; } .ss-board__item-ico { flex: none; width: 34px; height: 34px; background: rgba(239,126,26,.18); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--orange); margin-top: 2px; } .ss-board__item-name { display: block; color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 4px; } .ss-board__item-desc { color: var(--body-light); font-size: 13px; line-height: 1.75; } /* --- Grades 11-12 --- */ /* Change 3: section bg = card color (#f1f1f2), image = rectangle (no radius), remove card bg */ .ss-senior { background: var(--bg-light); padding: 84px 0; } .ss-senior__grid { display: grid; grid-template-columns: 38% 1fr; gap: 60px; align-items: center; } .ss-senior__img { border-radius: var(--radius); height: 300px; box-shadow: none; overflow: hidden; } .ss-senior__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ss-senior__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(20px, 2.4vw, 30px); line-height: 1.22; margin-bottom: 32px; } .ss-senior__features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .ss-senior-feat { display: flex; gap: 12px; align-items: flex-start; background: var(--bg); border-radius: var(--radius); padding: 16px; } .ss-senior-feat__ico { flex: none; width: 32px; height: 32px; background: var(--orange); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; margin-top: 1px; } .ss-senior-feat__name { font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 5px; } .ss-senior-feat__desc { color: var(--body); font-size: 12.5px; line-height: 1.72; } /* --- Results: scoped stat-box overrides for senior school --- */ /* Change 4: white cards, navy text, orange bottom border */ .ss-results .stat-box { background: #fff; border: none; border-bottom: 3px solid var(--orange); border-radius: var(--radius); } .ss-results .stat-box:hover { background: #fff; transform: translateY(-5px); } .ss-results .stat-box__num { color: var(--navy); } .ss-results .stat-box__txt { color: var(--body); } /* --- Life Beyond --- */ /* Change 5: center the heading and text */ .ss-beyond { background: #fff; padding: 84px 0; overflow-x: hidden; } .ss-beyond__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(24px, 3vw, 38px); line-height: 1.18; margin-bottom: 18px; text-align: center; } .ss-beyond__text { color: var(--body); font-size: 14.5px; line-height: 1.85; max-width: 820px; margin: 0 auto 44px; text-align: center; } .ss-beyond__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ss-beyond-card { position: relative; border-radius: var(--radius); min-height: 260px; overflow: hidden; background-size: cover; background-position: center; } .ss-beyond-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,24,49,.85) 100%); } .ss-beyond-card__label { position: absolute; bottom: 18px; left: 18px; z-index: 2; color: #fff; font-size: 14px; font-weight: 700; } /* --- Senior School Responsive --- */ @media (max-width: 1024px) { .ss-board__grid { grid-template-columns: 1fr; gap: 40px; } .ss-board__img { min-height: 320px; } .ss-board__badge { position: static; width: auto; margin-top: 16px; right: auto; bottom: auto; border-radius: var(--radius); } .ss-senior__grid { grid-template-columns: 1fr; gap: 36px; } .ss-senior__img { min-height: 280px; } } @media (max-width: 900px) { .ss-hero { min-height: auto; padding: 80px 0; } .ss-hero__title br { display: block; } /* .ss-eval__steps stays a single row through tablet — reduces at ≤600px below */ .ss-beyond__grid { grid-template-columns: 1fr; max-width: 440px; } } @media (max-width: 600px) { .ss-hero__btns { flex-direction: column; align-items: flex-start; } .ss-eval__steps { grid-template-columns: 1fr; } .ss-senior__features { grid-template-columns: 1fr; } .ss-beyond__grid { grid-template-columns: 1fr; } } /* ========================================================= Athletics Page (ath-) ========================================================= */ /* Hero — full viewport, dark gradient overlay, left-aligned (matches about-hero) */ .ath-hero { position: relative; min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; overflow: hidden; } .ath-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center center; } .ath-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,30,61,.92) 0%, rgba(0,30,61,.72) 45%, rgba(0,30,61,.40) 100%); } .ath-hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 22%; padding-bottom: 40px; } .ath-hero__content { max-width: 720px; } .ath-hero__label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); border-bottom: 1.5px solid var(--orange); padding-bottom: 5px; margin-bottom: 16px; } .ath-hero__title { font-family: var(--serif); font-weight: 800; font-size: clamp(32px, 4.6vw, 50px); color: #fff; line-height: 1.12; } .ath-hero__sub { font-family: var(--serif); font-weight: 700; font-size: clamp(16px, 1.8vw, 20px); color: rgba(255,255,255,.85); line-height: 1.4; margin-top: 14px; } .ath-hero__text { color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.82; max-width: 560px; margin-top: 20px; } /* Main — grey bg, sidebar card + content text side by side */ .ath-main { background: var(--bg-light); padding: 32px 0 80px; } .ath-main__grid { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: stretch; } /* Sidebar — navy card, sticky */ .ath-sidebar { background: var(--navy); border-radius: var(--radius); overflow: clip; position: sticky; top: calc(var(--header-h) + 20px); align-self: start; } .ath-sidebar__hd { padding: 18px 22px 16px; position: relative; } .ath-sidebar__hd::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: var(--orange); } .ath-sidebar__hd-title { color: #fff; font-size: 15px; font-weight: 700; margin: 0; } .ath-sidebar__list { list-style: none; padding: 0; } .ath-sidebar__item { display: block; position: relative; } .ath-sidebar__item::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: rgba(255,255,255,.14); } .ath-sidebar__item a { display: block; padding: 14px 22px; color: rgba(255,255,255,.88); font-size: 13.5px; font-weight: 600; transition: color .18s; } .ath-sidebar__item a:hover, .ath-sidebar__item.is-active a { color: var(--orange); } /* Content — no card, plain text on grey section bg */ .ath-content { padding: 4px 0 0; display: flex; flex-direction: column; } .ath-content__title { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; color: var(--navy); margin-bottom: 12px; } .ath-content__body { color: var(--body); font-size: 14px; line-height: 1.82; margin-bottom: 14px; } .ath-content__subhd { font-size: 14px; font-weight: 700; color: var(--body); margin-bottom: 8px; } .ath-content__list { list-style: none; margin-bottom: 16px; padding-left: 4px; } .ath-content__list li { position: relative; padding-left: 14px; color: var(--body); font-size: 14px; line-height: 1.82; margin-bottom: 3px; } .ath-content__list li::before { content: "•"; position: absolute; left: 0; } /* Athletics Responsive */ @media (max-width: 1024px) { .ath-main__grid { grid-template-columns: 220px 1fr; gap: 28px; } } @media (max-width: 900px) { .ath-main__grid { grid-template-columns: 1fr; gap: 24px; } .ath-sidebar { position: static; } .ath-hero { min-height: auto; padding: 80px 0; } .ath-main { padding: 52px 0 80px; } } /* Sport sub-page: image + facilities card */ .ath-sport-img-wrap { position: relative; margin-top: 24px; flex: none; } .ath-sport-img { width: 100%; height: 260px; display: block; object-fit: cover; border-radius: var(--radius); } .ath-facilities { position: absolute; bottom: -28px; right: -32px; background: var(--navy); border-radius: var(--radius); padding: 16px 22px 20px; max-width: 280px; width: 46%; } .ath-facilities__title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 8px; } .ath-facilities__list { list-style: none; } .ath-facilities__list li { position: relative; padding-left: 13px; font-size: 12.5px; color: rgba(255,255,255,.85); line-height: 1.65; margin-bottom: 3px; } .ath-facilities__list li::before { content: "•"; position: absolute; left: 0; } /* These MUST come after the base .ath-sport-img-wrap/.ath-sport-img/ .ath-facilities rules above — the earlier "Athletics Responsive" block used to set position:static here too, but being defined before the unconditional base rule meant the base rule's position:absolute won the cascade regardless of screen width, so the facilities card kept overlapping the image's corner even on mobile instead of stacking below it. */ @media (max-width: 900px) { .ath-sport-img-wrap { margin-top: 0; } .ath-facilities { position: static; width: 100%; max-width: 100%; margin-top: 12px; border-radius: var(--radius); } } @media (max-width: 600px) { .ath-sport-img { height: 200px; } } /* ============================================================ ADMISSIONS PAGE (adm-) ============================================================ */ .adm-section-title { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; color: var(--navy); margin-bottom: 14px; } .adm-section-sub { color: var(--body); font-size: 15px; line-height: 1.78; max-width: 680px; margin-bottom: 36px; } /* ---- Hero ---- */ .adm-hero { position: relative; min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; overflow: hidden; } .adm-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .adm-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,30,61,.92) 0%, rgba(0,30,61,.72) 45%, rgba(0,30,61,.40) 100%); } .adm-hero__inner { position: relative; z-index: 2; max-width: 580px; padding-top: 22%; padding-bottom: 40px; } .adm-hero__title { font-family: var(--serif); font-weight: 800; font-size: clamp(38px, 5.2vw, 50px); color: #fff; line-height: 1.08; margin-bottom: 22px; } .adm-hero__line1 { white-space: nowrap; } .adm-hero__title { animation: revealFromLeft .85s var(--ease) both; } .adm-hero__sub { animation: revealFromLeft .85s var(--ease) 220ms both; } .adm-hero__sub { font-size: 15px; color: rgba(255,255,255,.82); line-height: 1.78; } /* ---- Overview ---- */ .adm-overview { background: var(--bg-light); padding: 72px 0 80px; } .adm-overview__grid { display: grid; grid-template-columns: 1fr 360px; gap: 36px; align-items: stretch; } .adm-overview__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: start; } .adm-overview__card { background: #fff; border-radius: var(--radius); padding: 24px 22px 26px; box-shadow: 0 2px 12px rgba(0,0,0,.07); } .adm-overview__icon { width: 46px; height: 46px; background: var(--navy); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 16px; } .adm-overview__card-title { font-size: 14px; font-weight: 700; color: var(--orange); margin-bottom: 8px; } .adm-overview__card-body { font-size: 13px; color: var(--body); line-height: 1.72; } .adm-overview__img-wrap { border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .adm-overview__img { flex: 1; min-height: 300px; background-size: cover; background-position: center; position: relative; } .adm-overview__img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,10,40,.88) 50%, rgba(0,10,40,.18) 100%); display: flex; align-items: flex-end; padding: 28px; } .adm-overview__img-title { font-family: var(--sans); font-size: clamp(18px, 2vw, 26px); font-weight: 700; color: #fff; margin-bottom: 8px; } .adm-overview__img-sub { font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.65; margin-bottom: 16px; } .adm-overview__img-link { color: #fff; font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; } .adm-overview__img-link:hover { color: var(--orange); } /* ---- 7-Step Journey ---- */ .adm-steps { background: #fff; padding: 80px 0 72px; } .adm-steps__hd { text-align: center; margin-bottom: 60px; } .adm-steps__title { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; color: var(--navy); margin-bottom: 14px; } .adm-steps__line { width: 52px; height: 3px; background: var(--orange); margin: 0 auto; border-radius: 2px; } .adm-steps__timeline { position: relative; max-width: 900px; margin: 0 auto; } .adm-steps__timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #e8e8e8; transform: translateX(-50%); z-index: 0; } .adm-step { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 28px; align-items: center; margin-bottom: 40px; } .adm-step:last-child { margin-bottom: 0; } .adm-step__spacer { } .adm-step__content { } .adm-step--left .adm-step__content { text-align: right; } .adm-step--right .adm-step__content { text-align: left; } .adm-step__content--highlight { background: var(--orange); border-radius: 10px; padding: 18px 22px; text-align: left; } .adm-step__content--outline { border: 2px solid var(--orange); border-radius: 10px; padding: 18px 22px; text-align: right; } .adm-step__title { font-size: 20px; font-weight: 700; font-family: var(--sans); color: var(--navy); margin-bottom: 8px; line-height: 1.45; } .adm-step__title--orange { color: var(--orange); } .adm-step__body { font-size: 12.5px; color: var(--body); line-height: 1.72; } .adm-step__content--highlight .adm-step__title { color: #fff; } .adm-step__content--highlight .adm-step__body { color: rgba(255,255,255,.9); } .adm-step__node { width: 38px; height: 38px; background: var(--orange); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; position: relative; z-index: 2; margin: 0 auto; flex-shrink: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e8e8e8; } /* ---- Entrance Test ---- */ .adm-test { background: #fff; padding: 72px 0 80px; } .adm-test__head { text-align: center; margin-bottom: 48px; } .adm-test__head-sub { color: var(--body); font-size: 14px; line-height: 1.72; max-width: 580px; margin: 10px auto 0; } .adm-test__grid { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; } .adm-test__tabs { display: flex; flex-direction: column; gap: 10px; } .adm-test__tab { background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; width: 100%; } .adm-test__tab:hover { border-color: var(--orange); } .adm-test__tab.is-active { background: var(--navy); border-color: var(--navy); } .adm-test__tab-icon { flex-shrink: 0; color: #bbb; display: flex; align-items: center; justify-content: center; } .adm-test__tab.is-active .adm-test__tab-icon { color: var(--orange); } .adm-test__tab-info { flex: 1; } .adm-test__tab-grade { display: block; font-size: 10.5px; color: var(--body); font-weight: 500; margin-bottom: 2px; } .adm-test__tab-label { display: block; font-size: 13px; color: var(--navy); font-weight: 700; } .adm-test__tab.is-active .adm-test__tab-grade { color: rgba(255,255,255,.55); } .adm-test__tab.is-active .adm-test__tab-label { color: #fff; } .adm-test__content { background: var(--bg-light); border-radius: var(--radius); padding: 36px 32px 32px; } .adm-test__panel { display: none; } .adm-test__panel.is-active { display: block; } .adm-test__intro { background: var(--bg-light); border-radius: var(--radius); padding: 32px 28px; } .adm-test__panel-title { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; color: var(--navy); text-align: center; margin-bottom: 10px; } .adm-test__panel-sub { font-size: 14px; font-weight: 600; color: var(--navy); text-align: center; margin-bottom: 20px; } .adm-test__panel-body { font-size: 14.5px; color: var(--body); line-height: 1.85; text-align: center; max-width: 620px; margin: 0 auto 0; } .adm-test__portions { background: var(--bg-light); border-radius: var(--radius); padding: 28px 28px 32px; margin-top: 22px; } .adm-test__portions-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .adm-test__portions-title { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; color: var(--navy); } .adm-test__pdf-link { font-size: 13px; font-weight: 600; color: var(--orange); text-decoration: none; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .adm-test__pdf-link:hover { text-decoration: underline; } .adm-test__subjects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .adm-test__subject { background: #fff; border-radius: var(--radius); border-left: 4px solid var(--orange); padding: 18px 16px; } .adm-test__subject-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 10px; } .adm-test__subject-list { list-style: disc; padding-left: 16px; } .adm-test__subject-list li { font-size: 13px; color: var(--body); line-height: 1.75; margin-bottom: 2px; } .adm-test__subject-group { margin-bottom: 8px; } .adm-test__subject-group:last-child { margin-bottom: 0; } .adm-test__subject-group-title { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 2px; } .adm-test__subject-pending { font-size: 13px; color: var(--body); opacity: .6; font-style: italic; } /* ---- Admissions Timeline ---- */ .adm-dates { background: var(--navy); padding: 72px 0 80px; overflow-x: hidden; } .adm-dates__note { text-align: center; font-size: 13.5px; color: #fff; margin-bottom: 16px; grid-column: 1 / -1; } .adm-dates__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; align-items: center; } .adm-dates__main-title { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; color: var(--orange); margin-bottom: 12px; } .adm-dates__main-body { font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.72; } .adm-dates__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .adm-dates__card { background: #fff; border-radius: var(--radius); padding: 24px 22px; } .adm-dates__card-label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--orange); text-transform: uppercase; margin-bottom: 10px; } .adm-dates__card-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .adm-dates__card-body { font-size: 13px; color: var(--body); line-height: 1.65; } /* ---- Fees ---- */ .adm-fees { background: #fff; padding: 72px 0 80px; } .adm-fees__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .adm-fees__text .btn { margin-top: 8px; } .adm-fees__list-card { background: var(--bg-light); border-radius: var(--radius); padding: 4px 26px; } .adm-fees__list-item { display: flex; align-items: flex-start; gap: 14px; padding: 20px 0; border-bottom: 1px solid rgba(0,0,0,.06); } .adm-fees__list-item:last-child { border-bottom: none; } .adm-fees__check { width: 32px; height: 32px; background: rgba(239,126,26,.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--orange); flex-shrink: 0; margin-top: 1px; } .adm-fees__item-title { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; } .adm-fees__item-body { font-size: 13px; color: var(--body); line-height: 1.65; } /* ---- FAQ ---- */ .adm-faq { background: var(--bg-light); padding: 72px 0 80px; } .adm-faq__list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .adm-faq__item { background: #fff; border-radius: var(--radius); box-shadow: 0 1px 6px rgba(0,0,0,.06); overflow: hidden; } .adm-faq__q { width: 100%; background: none; border: none; cursor: pointer; padding: 20px 22px; text-align: left; font-size: 14px; font-weight: 600; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 20px; } .adm-faq__icon { font-size: 22px; font-weight: 300; color: var(--navy); flex-shrink: 0; transition: transform .22s; line-height: 1; width: 24px; text-align: center; } .adm-faq__item.is-open .adm-faq__icon { transform: rotate(45deg); } .adm-faq__a { max-height: 0; overflow: hidden; transition: max-height .32s ease; } .adm-faq__item.is-open .adm-faq__a { max-height: 200px; } .adm-faq__a p { font-size: 13.5px; color: var(--body); line-height: 1.82; padding: 0 22px 20px; } /* ---- Admissions Responsive ---- */ @media (max-width: 1024px) { .adm-overview__grid { grid-template-columns: 1fr 300px; } .adm-test__grid { grid-template-columns: 220px 1fr; } .adm-dates__grid { grid-template-columns: 1fr 1.6fr; gap: 36px; } } /* ========================================================= AUTH PAGES (login, forgot password, reset password) ========================================================= */ .auth-body { background: var(--bg-light); display: block; padding-top: 0; overflow-x: hidden; } .auth-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; width: 100%; } .auth-panel { position: relative; overflow: hidden; display: flex; align-items: stretch; } .auth-panel__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .auth-panel__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0,30,61,.90) 0%, rgba(0,30,61,.70) 55%, rgba(239,126,26,.22) 100%); } .auth-panel__inner { position: relative; z-index: 1; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; width: 100%; } .auth-logo img { height: 50px; width: auto; } .auth-panel__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(239,126,26,.18); border: 1px solid rgba(239,126,26,.35); border-radius: 40px; padding: 7px 16px; color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; width: fit-content; } .auth-panel__title { font-family: var(--serif); color: #fff; font-size: clamp(28px, 2.8vw, 42px); font-weight: 700; line-height: 1.18; margin-bottom: 16px; } .auth-panel__sub { color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.75; max-width: 360px; } .auth-panel__stat { display: flex; gap: 32px; margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.14); } .auth-stat__num { font-family: var(--serif); color: #fff; font-size: 28px; font-weight: 700; line-height: 1; } .auth-stat__num span { color: var(--orange); } .auth-stat__label { color: rgba(255,255,255,.6); font-size: 12px; margin-top: 4px; letter-spacing: .04em; } .auth-form-side { display: flex; align-items: center; justify-content: center; background: #fff; padding: 48px 32px; } .auth-form-wrap { width: 100%; max-width: 400px; } .auth-logo-mobile { display: none; align-items: center; gap: 12px; margin-bottom: 36px; color: var(--navy); font-weight: 700; font-size: 15px; } .auth-logo-mobile img { height: 40px; width: auto; } .auth-eyebrow { display: inline-block; color: var(--orange); font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding-bottom: 5px; border-bottom: 2px solid var(--orange); margin-bottom: 14px; } .auth-title { font-family: var(--serif); color: var(--navy); font-size: 30px; font-weight: 700; line-height: 1.2; margin-bottom: 6px; } .auth-subtitle { color: var(--body); font-size: 14px; margin-bottom: 32px; line-height: 1.6; } .auth-messages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; } .auth-msg { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px; border-radius: 10px; font-size: 13.5px; font-weight: 500; line-height: 1.5; } .auth-msg--error { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; } .auth-msg--success { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; } .auth-msg--warning { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; } .auth-msg--info { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; } .auth-form { display: flex; flex-direction: column; gap: 20px; } .auth-field { display: flex; flex-direction: column; gap: 7px; } .auth-label-row { display: flex; align-items: center; justify-content: space-between; } .auth-label { font-size: 13.5px; font-weight: 600; color: var(--ink); } .auth-forgot { font-size: 13px; color: var(--orange); font-weight: 500; transition: color .2s; } .auth-forgot:hover { color: var(--orange-dark); } .auth-input-wrap { position: relative; } .auth-input { width: 100%; padding: 13px 16px; border: 1.5px solid rgba(0,38,77,.15); border-radius: 10px; font-family: var(--sans); font-size: 14.5px; color: var(--ink); background: var(--bg-light); outline: none; transition: border-color .22s, background .22s, box-shadow .22s; } .auth-input-wrap .auth-input { padding-right: 48px; } .auth-input:focus { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(0,38,77,.08); } .auth-input::placeholder { color: rgba(90,101,115,.5); } .auth-input.is-error { border-color: #B91C1C; } .auth-eye { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--body); padding: 5px; border-radius: 6px; transition: color .2s; line-height: 0; } .auth-eye:hover { color: var(--navy); } .auth-error { font-size: 12.5px; color: #B91C1C; display: flex; align-items: center; gap: 5px; } .auth-submit { margin-top: 8px; } .auth-divider { display: flex; align-items: center; gap: 14px; margin: 24px 0 0; color: rgba(90,101,115,.5); font-size: 12.5px; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(0,38,77,.1); } .auth-back { text-align: center; margin-top: 28px; } .auth-back a { display: inline-flex; align-items: center; gap: 6px; color: var(--body); font-size: 13.5px; font-weight: 500; transition: color .2s; } .auth-back a:hover { color: var(--navy); } @media (max-width: 800px) { .auth-wrap { grid-template-columns: 1fr; } .auth-panel { display: none; } .auth-form-side { padding: 36px 24px; min-height: 100vh; } .auth-logo-mobile { display: flex; } } /* Auth redesign v2 — floating card + top-bar layout */ .auth-panel__card { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: calc(100% - 72px); max-width: 380px; background: rgba(255,255,255,.97); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.45); z-index: 2; } .auth-panel__card-nav { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid rgba(0,0,0,.06); } .auth-panel__card-name { font-size: 12.5px; font-weight: 700; color: var(--navy); } .auth-panel__card-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--orange); background: rgba(239,126,26,.1); border-radius: 20px; padding: 5px 12px; text-decoration: none; transition: background .2s; } .auth-panel__card-link:hover { background: rgba(239,126,26,.22); } .auth-panel__card-img { position: relative; aspect-ratio: 16/9; overflow: hidden; } .auth-panel__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .auth-panel__card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,20,60,.65) 0%, transparent 60%); display: flex; align-items: flex-end; padding: 14px 16px; } .auth-panel__card-overlay span { color: rgba(255,255,255,.9); font-size: 12px; font-weight: 600; letter-spacing: .03em; } .auth-panel__card-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 8px; } .auth-panel__card-profile { display: flex; align-items: center; gap: 9px; min-width: 0; } .auth-panel__card-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--navy); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .auth-panel__card-avatar img { width: 22px; height: 22px; object-fit: contain; } .auth-panel__card-info strong { display: block; font-size: 12px; font-weight: 700; color: var(--navy); white-space: nowrap; } .auth-panel__card-info span { font-size: 10.5px; color: rgba(0,38,77,.5); white-space: nowrap; } .auth-panel__card-stats { display: flex; gap: 12px; flex-shrink: 0; } .auth-panel__card-stat { text-align: center; } .auth-panel__card-stat strong { display: block; font-size: 13px; font-weight: 800; color: var(--navy); line-height: 1; } .auth-panel__card-stat span { font-size: 9.5px; color: rgba(0,38,77,.5); display: block; margin-top: 2px; white-space: nowrap; } .auth-form-side--v2 { flex-direction: column; justify-content: space-between; align-items: stretch; padding: 0; } .auth-top-bar { display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; border-bottom: 1px solid rgba(0,38,77,.07); flex-shrink: 0; } .auth-top-bar__logo { display: flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 700; font-size: 15px; text-decoration: none; letter-spacing: -.01em; } .auth-top-bar__logo img { height: 32px; width: auto; } .auth-top-bar__badge { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(0,38,77,.07); color: var(--navy); border-radius: 20px; padding: 5px 13px; } .auth-form-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 44px 48px; } .auth-form-center .auth-form-wrap { max-width: 380px; } .auth-title-xl { font-family: var(--sans); font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 900; color: var(--navy); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 8px; } .auth-divider { margin: 24px 0; } .auth-back-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 20px; border: 1.5px solid rgba(0,38,77,.14); border-radius: 12px; color: var(--navy); font-size: 14px; font-weight: 600; text-decoration: none; background: rgba(0,38,77,.02); transition: border-color .2s, background .2s; } .auth-back-btn:hover { border-color: rgba(0,38,77,.3); background: rgba(0,38,77,.04); } .auth-bottom-bar { border-top: 1px solid rgba(0,38,77,.07); padding: 18px 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .auth-bottom-socials { display: flex; gap: 10px; align-items: center; } .auth-bottom-socials a { color: rgba(0,38,77,.45); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,38,77,.06); transition: background .2s, color .2s; } .auth-bottom-socials a:hover { color: var(--orange); background: rgba(239,126,26,.12); } .auth-panel__card-arrows { display: flex; gap: 6px; } .auth-panel__card-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(0,38,77,.15); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--navy); cursor: pointer; transition: all .2s; } .auth-panel__card-arrow:hover { background: var(--navy); color: #fff; border-color: var(--navy); } .auth-forgot-row { display: flex; justify-content: flex-end; } @media (max-width: 800px) { .auth-form-side--v2 { padding: 0; min-height: 100vh; } .auth-top-bar { padding: 16px 24px; } .auth-form-center { padding: 32px 24px; align-items: flex-start; } .auth-bottom-bar { padding: 16px 24px; } } @keyframes authFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes authFadeIn { from { opacity: 0; } to { opacity: 1; } } .auth-panel__card { animation: authFadeUp .75s cubic-bezier(.22,1,.36,1) .1s both; } .auth-top-bar { animation: authFadeIn .45s ease .05s both; } .auth-title-xl { animation: authFadeUp .65s cubic-bezier(.22,1,.36,1) .2s both; } .auth-subtitle { animation: authFadeUp .65s cubic-bezier(.22,1,.36,1) .3s both; } .auth-messages { animation: authFadeUp .5s ease .35s both; } .auth-form { animation: authFadeUp .65s cubic-bezier(.22,1,.36,1) .38s both; } .auth-divider { animation: authFadeIn .4s ease .52s both; } .auth-back-btn { animation: authFadeUp .5s cubic-bezier(.22,1,.36,1) .56s both; } .auth-bottom-bar { animation: authFadeIn .4s ease .4s both; } /* Admin form extras — select, checkbox */ .auth-select { width: 100%; padding: 13px 40px 13px 16px; border: 1.5px solid rgba(0,38,77,.15); border-radius: 10px; font-family: var(--sans); font-size: 14.5px; color: var(--ink); background: var(--bg-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6573' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center; appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; transition: border-color .22s, background-color .22s, box-shadow .22s; } .auth-select:focus { border-color: var(--navy); background-color: #fff; box-shadow: 0 0 0 3px rgba(0,38,77,.08); } .auth-select.is-error { border-color: #B91C1C; } .auth-check-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid rgba(0,38,77,.1); border-radius: 10px; background: var(--bg-light); cursor: pointer; transition: border-color .2s, background .2s; } .auth-check-row:hover { border-color: rgba(0,38,77,.25); background: #fff; } .auth-check-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--navy); cursor: pointer; flex: none; } .auth-check-row__label { font-size: 14.5px; font-weight: 500; color: var(--ink); user-select: none; } .auth-check-row__sub { font-size: 12px; color: rgba(90,101,115,.7); margin-top: 1px; } .admin-panel-info { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; } .admin-panel-item { display: flex; align-items: center; gap: 12px; } .admin-panel-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; } .admin-panel-item__text { color: rgba(255,255,255,.7); font-size: 13.5px; line-height: 1.45; } /* ── DASHBOARD ── */ .dash-body { margin: 0; display: flex; min-height: 100vh; background: #F4F6F9; font-family: var(--sans); padding-top: 0; } /* Sidebar */ .dash-sidebar { width: 240px; flex: none; background: var(--navy); display: flex; flex-direction: column; min-height: 100vh; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .dash-sidebar__top { padding: 24px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.08); } .dash-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .dash-brand img { width: 34px; height: 34px; object-fit: contain; } .dash-brand span { color: #fff; font-family: var(--serif); font-size: 16px; font-weight: 700; letter-spacing: .3px; } .dash-nav { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; } .dash-nav__label { color: rgba(255,255,255,.35); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 14px 8px 6px; } .dash-nav__link { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.7); font-size: 14px; font-weight: 500; padding: 10px 12px; border-radius: 8px; text-decoration: none; transition: background .18s, color .18s; } .dash-nav__link:hover { background: rgba(255,255,255,.08); color: #fff; } .dash-nav__link.is-active { background: var(--orange); color: #fff; font-weight: 600; } .dash-sidebar__footer { padding: 16px 12px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 10px; } .dash-user { display: flex; align-items: center; gap: 10px; } .dash-user__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; } .dash-user__name { color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.3; } .dash-user__role { color: rgba(255,255,255,.45); font-size: 11.5px; } .dash-logout { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.5); font-size: 13px; font-weight: 500; text-decoration: none; padding: 8px 4px; transition: color .2s; } .dash-logout:hover { color: #fff; } /* Main */ .dash-main { flex: 1; padding: 32px 36px; min-width: 0; } .dash-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; } .dash-topbar__title { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--navy); margin: 0 0 2px; } .dash-topbar__sub { font-size: 14px; color: rgba(90,101,115,.7); margin: 0; } /* Stats */ .dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 36px; } .dash-stat { background: #fff; border-radius: 14px; padding: 24px; display: flex; align-items: center; gap: 18px; box-shadow: 0 1px 4px rgba(0,38,77,.06); } .dash-stat__icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; } .dash-stat__icon--blue { background: rgba(0,38,77,.08); color: var(--navy); } .dash-stat__icon--orange { background: rgba(239,126,26,.12); color: var(--orange); } .dash-stat__icon--green { background: rgba(22,163,74,.1); color: #16A34A; } .dash-stat__num { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--navy); line-height: 1; } .dash-stat__label { font-size: 13px; color: rgba(90,101,115,.7); margin-top: 4px; } /* Dashboard recent-record sections */ .dash-section { background: #fff; border-radius: 16px; box-shadow: 0 1px 4px rgba(0,38,77,.06); overflow: hidden; margin-top: 24px; } .dash-section__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; } .dash-section__title { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--navy); margin: 0; } .dash-section__link { font-size: 13px; font-weight: 600; color: var(--orange); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .dash-section__link:hover { color: var(--navy); } .dash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 14px; } .dash-table thead tr { background: rgba(0,38,77,.03); border-bottom: 1.5px solid rgba(0,38,77,.07); } .dash-table thead th { padding: 10px 24px; color: rgba(0,38,77,.45); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; white-space: nowrap; } .dash-table tbody tr { border-bottom: 1px solid rgba(0,38,77,.055); transition: background .14s; } .dash-table tbody tr:last-child { border-bottom: none; } .dash-table tbody tr:hover { background: rgba(0,38,77,.022); } .dash-table td { padding: 13px 24px; color: var(--ink); vertical-align: middle; } .dash-table td:first-child { font-weight: 600; color: var(--navy); } .dash-table__empty { text-align: center; padding: 40px 20px; color: rgba(90,101,115,.45); font-size: 14px; } .dash-section__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Quick actions */ .dash-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .dash-action { background: #fff; border-radius: 14px; padding: 24px 20px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 4px rgba(0,38,77,.06); border: 1.5px solid transparent; transition: border-color .2s, box-shadow .2s, transform .2s; } .dash-action:hover { border-color: var(--orange); box-shadow: 0 4px 18px rgba(239,126,26,.12); transform: translateY(-2px); } .dash-action__icon { width: 46px; height: 46px; border-radius: 10px; background: rgba(0,38,77,.06); color: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .dash-action__title { font-size: 15px; font-weight: 700; color: var(--navy); } .dash-action__sub { font-size: 12.5px; color: rgba(90,101,115,.65); } .dash-messages { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; } /* Dashboard responsive */ @media (max-width: 1024px) { .dash-actions { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .dash-body { flex-direction: column; } .dash-sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; } .dash-sidebar__top { padding: 12px 16px; } .dash-nav { flex-direction: row; flex-wrap: wrap; padding: 8px 12px; gap: 4px; } .dash-nav__label { display: none; } .dash-main { padding: 20px 16px; } .dash-stats { grid-template-columns: 1fr; gap: 12px; } .dash-actions { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .dash-actions { grid-template-columns: 1fr; } } /* Admin table — groups list & users list */ .admin-table-wrap { background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,38,77,.06); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .admin-table { width: 100%; border-collapse: collapse; font-size: 14px; } .admin-table thead tr { background: var(--navy); } .admin-table thead th { padding: 14px 20px; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; text-align: left; white-space: nowrap; } .admin-table tbody tr { border-bottom: 1px solid rgba(0,38,77,.06); transition: background .15s; } .admin-table tbody tr:last-child { border-bottom: none; } .admin-table tbody tr:hover { background: rgba(0,38,77,.025); } .admin-table td { padding: 14px 20px; color: var(--ink); vertical-align: middle; } .admin-table__id { color: rgba(90,101,115,.45); font-size: 12.5px; font-weight: 600; width: 48px; } .admin-table__name-cell { display: flex; align-items: center; gap: 12px; } .admin-table__avatar { width: 36px; height: 36px; border-radius: 10px; background: rgba(0,38,77,.07); color: var(--navy); display: flex; align-items: center; justify-content: center; flex: none; font-size: 13px; font-weight: 700; } .admin-table__avatar--shield { background: rgba(239,126,26,.1); color: var(--orange); } .admin-table__name { font-weight: 600; color: var(--navy); } .admin-table__email { font-size: 12.5px; color: rgba(90,101,115,.65); margin-top: 1px; } .admin-table__badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; background: rgba(0,38,77,.07); color: var(--navy); } .admin-table__badge--active { background: rgba(22,163,74,.1); color: #15803D; } .admin-table__badge--inactive { background: rgba(185,28,28,.08); color: #B91C1C; } .admin-table__del { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #B91C1C; background: rgba(185,28,28,.07); text-decoration: none; transition: background .18s, color .18s; } .admin-table__del:hover { background: rgba(185,28,28,.14); color: #991B1B; } .admin-table__empty { text-align: center; padding: 60px 20px; color: rgba(90,101,115,.45); } .admin-table__empty svg { display: block; margin: 0 auto 14px; opacity: .3; } .admin-table__empty p { margin: 0 0 18px; font-size: 15px; } .admin-table__email-col { color: rgba(90,101,115,.65); font-size: 13px; } @media (max-width: 680px) { .admin-table { font-size: 13px; } .admin-table thead th { padding: 12px 14px; font-size: 11px; } .admin-table td { padding: 12px 14px; } .admin-table__avatar { width: 30px; height: 30px; font-size: 11px; } } /* ===================================================== DASHBOARD V2 — two-panel sidebar design ===================================================== */ .db-body { margin: 0; padding: 0; padding-top: 0 !important; min-height: 100vh; display: flex; font-family: var(--sans); background: #f0f2f8; } /* ── Icon Rail ── */ .db-rail { width: 64px; flex: none; background: #000e20; display: flex; flex-direction: column; align-items: center; padding: 18px 0 20px; min-height: 100vh; position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 30; } .db-rail__brand { display: flex; align-items: center; justify-content: center; margin-bottom: 26px; } .db-rail__logo { width: 36px; height: 36px; object-fit: contain; } .db-rail__nav { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; width: 100%; padding: 0 10px; } .db-rail__link { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: rgba(255,255,255,.32); text-decoration: none; transition: background .18s, color .18s; } .db-rail__link:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); } .db-rail__link.is-active { background: var(--orange); color: #fff; } .db-rail__sep { width: 32px; height: 1px; background: rgba(255,255,255,.07); margin: 8px 0; flex: none; } .db-rail__logout { margin-top: auto; } /* ── Nav Panel ── */ .db-panel { width: 208px; flex: none; background: var(--navy); display: flex; flex-direction: column; min-height: 100vh; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 29; } .db-panel__head { padding: 22px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.06); } .db-panel__brand { color: #fff; font-family: var(--serif); font-size: 17px; font-weight: 700; text-decoration: none; display: block; } .db-panel__brand-sub { color: rgba(255,255,255,.38); font-size: 11px; font-weight: 500; margin-top: 3px; } .db-panel__nav { flex: 1; padding: 12px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .db-panel__glabel { color: rgba(255,255,255,.3); font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; padding: 12px 8px 6px; } .db-panel__link { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.62); font-size: 13.5px; font-weight: 500; padding: 9px 12px; border-radius: 9px; text-decoration: none; transition: background .18s, color .18s; } .db-panel__link:hover { background: rgba(255,255,255,.07); color: #fff; } .db-panel__link.is-active { background: #fff; color: var(--navy); font-weight: 700; } .db-panel__foot { padding: 14px; border-top: 1px solid rgba(255,255,255,.07); flex: none; } .db-panel__user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .db-panel__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; } .db-panel__uname { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; word-break: break-all; } .db-panel__urole { color: rgba(255,255,255,.38); font-size: 11px; } .db-panel__logout { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.42); font-size: 13px; font-weight: 500; text-decoration: none; padding: 7px 4px; transition: color .18s; } .db-panel__logout:hover { color: #fff; } /* ── Main ── */ .db-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } /* Topbar */ .db-topbar { background: #fff; padding: 0 28px; height: 62px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(0,0,0,.06); position: sticky; top: 0; z-index: 20; flex: none; } .db-topbar__search { position: relative; flex: 1; max-width: 340px; } .db-topbar__search-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: rgba(0,0,0,.3); pointer-events: none; } .db-topbar__search-inp { width: 100%; height: 40px; padding: 0 14px 0 40px; border: 1.5px solid rgba(0,0,0,.09); border-radius: 10px; font-size: 13.5px; font-family: var(--sans); background: #f5f7fb; color: var(--ink); outline: none; transition: border-color .18s, background .18s; box-sizing: border-box; } .db-topbar__search-inp:focus { border-color: var(--navy); background: #fff; } .db-topbar__search-inp::placeholder { color: rgba(0,0,0,.3); } .db-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .db-topbar__bell { width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid rgba(0,0,0,.08); background: #f5f7fb; color: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .18s, color .18s; } .db-topbar__bell:hover { background: #eaedf5; color: var(--navy); } .db-topbar__userbox { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 6px; border-radius: 40px; border: 1.5px solid rgba(0,0,0,.08); background: #f5f7fb; cursor: pointer; transition: background .18s; } .db-topbar__userbox:hover { background: #eaedf5; } .db-topbar__uavatar { width: 32px; height: 32px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; } .db-topbar__uname { font-size: 13px; font-weight: 600; color: var(--ink); } /* Scrollable area */ .db-scroll { flex: 1; overflow-y: auto; padding: 28px; } /* Content grid */ .db-content { display: grid; grid-template-columns: 1fr 284px; gap: 22px; align-items: start; } .db-col-main { display: flex; flex-direction: column; gap: 20px; } .db-col-side { display: flex; flex-direction: column; gap: 16px; } /* Greeting card */ .db-greet { background: linear-gradient(120deg, #dce8ff 0%, #c8d9ff 100%); border-radius: 20px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; } .db-greet__eyebrow { font-size: 11px; font-weight: 700; color: var(--orange); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; } .db-greet__hello { font-family: var(--serif); font-size: 26px; font-weight: 800; color: var(--navy); margin-bottom: 8px; line-height: 1.2; } .db-greet__sub { font-size: 13.5px; color: rgba(0,38,77,.52); line-height: 1.6; max-width: 300px; margin: 0; } .db-greet__illo { flex: none; width: 150px; height: 130px; display: flex; align-items: center; justify-content: flex-end; } /* Stats row */ .db-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .db-stat { background: #fff; border-radius: 16px; padding: 20px 22px; box-shadow: 0 1px 4px rgba(0,0,0,.06); display: flex; align-items: center; gap: 16px; } .db-stat__icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: none; } .db-stat__icon--blue { background: rgba(0,38,77,.08); color: var(--navy); } .db-stat__icon--orange { background: rgba(239,126,26,.12); color: var(--orange); } .db-stat__icon--green { background: rgba(22,163,74,.1); color: #16A34A; } .db-stat__num { font-family: var(--serif); font-size: 28px; font-weight: 800; color: var(--navy); line-height: 1; } .db-stat__lbl { font-size: 12.5px; color: rgba(0,38,77,.5); margin-top: 3px; } .db-stat__link { display: inline-block; font-size: 12px; color: var(--orange); text-decoration: none; margin-top: 5px; font-weight: 600; } .db-stat__link:hover { text-decoration: underline; } /* Section header */ .db-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .db-section__title { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--navy); margin: 0; } /* Quick actions */ .db-qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .db-qa { background: #fff; border-radius: 14px; padding: 20px; text-decoration: none; display: flex; align-items: center; gap: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); border: 1.5px solid transparent; transition: border-color .2s, box-shadow .2s, transform .15s; } .db-qa:hover { border-color: var(--navy); box-shadow: 0 4px 16px rgba(0,38,77,.1); transform: translateY(-1px); } .db-qa__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; } .db-qa__icon--navy { background: rgba(0,38,77,.07); color: var(--navy); } .db-qa__icon--orange { background: rgba(239,126,26,.1); color: var(--orange); } .db-qa__icon--green { background: rgba(22,163,74,.08); color: #16A34A; } .db-qa__icon--purple { background: rgba(109,40,217,.08); color: #6D28D9; } .db-qa__title { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.3; } .db-qa__sub { font-size: 12px; color: rgba(0,38,77,.48); margin-top: 2px; } /* Sidebar widgets */ .db-widget { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.06); } .db-widget__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .db-widget__title { font-size: 14.5px; font-weight: 700; color: var(--navy); margin: 0; } .db-widget__div { height: 1px; background: rgba(0,38,77,.07); margin: 16px 0; } .db-widget__cta { display: inline-flex; align-items: center; gap: 5px; color: var(--orange); font-size: 13px; font-weight: 600; text-decoration: none; } .db-widget__cta:hover { text-decoration: underline; } .db-widget__logout { display: inline-flex; align-items: center; gap: 7px; color: rgba(185,28,28,.7); font-size: 13px; font-weight: 600; text-decoration: none; } .db-widget__logout:hover { color: #B91C1C; } /* Summary items (overview widget) */ .db-wsummary { display: flex; flex-direction: column; gap: 13px; } .db-wsummary-item { display: flex; align-items: center; justify-content: space-between; } .db-wsummary-left { display: flex; align-items: center; gap: 9px; } .db-wdot { width: 10px; height: 10px; border-radius: 3px; flex: none; } .db-wdot--blue { background: var(--navy); } .db-wdot--orange { background: var(--orange); } .db-wdot--green { background: #16A34A; } .db-wsummary-label { font-size: 13px; color: rgba(0,38,77,.58); } .db-wsummary-val { font-size: 15px; font-weight: 700; color: var(--navy); } /* Admin card (signed-in-as widget) */ .db-admin-card { display: flex; align-items: center; gap: 12px; } .db-admin-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; } .db-admin-card__name { font-size: 13.5px; font-weight: 700; color: var(--navy); line-height: 1.3; } .db-admin-card__role { font-size: 11.5px; font-weight: 600; color: var(--orange); margin-top: 1px; } .db-admin-card__email { font-size: 11.5px; color: rgba(0,38,77,.42); margin-top: 1px; } /* Website links widget */ .db-links { display: flex; flex-direction: column; gap: 2px; } .db-link-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(0,38,77,.68); font-weight: 500; text-decoration: none; padding: 8px 10px; border-radius: 8px; transition: background .15s, color .15s; } .db-link-item:hover { background: rgba(0,38,77,.04); color: var(--navy); } /* Flash messages */ .db-msgs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } /* Responsive */ @media (max-width: 1140px) { .db-content { grid-template-columns: 1fr; } .db-col-side { flex-direction: row; flex-wrap: wrap; } .db-widget { flex: 1; min-width: 240px; } } @media (max-width: 900px) { .db-panel { display: none; } } @media (max-width: 680px) { .db-rail { display: none; } .db-stats-row { grid-template-columns: 1fr 1fr; gap: 10px; } .db-qa-grid { grid-template-columns: 1fr; } .db-scroll { padding: 16px; } .db-topbar { padding: 0 16px; } .db-topbar__search { max-width: 200px; } .db-greet { flex-direction: column; gap: 16px; padding: 20px; } .db-greet__hello { font-size: 20px; } .db-greet__illo { display: none; } .db-col-side { flex-direction: column; } .db-widget { min-width: 0; } } @media (max-width: 420px) { .db-stats-row { grid-template-columns: 1fr; } .db-stat { padding: 16px; gap: 12px; } .db-stat__num { font-size: 22px; } } /* ===================================================== SIDEBAR V3 — floating card, rounded corners ===================================================== */ .s3-body { margin: 0; padding: 14px; padding-top: 14px !important; min-height: 100vh; display: flex; gap: 14px; font-family: var(--sans); background: #0b1428; box-sizing: border-box; } /* Sticky sidebar wrapper */ .s3-wrap { width: 272px; flex: none; position: sticky; top: 14px; height: calc(100vh - 28px); } .s3 { display: flex; height: 100%; border-radius: 22px; overflow: hidden; } /* Rail — dark icon strip */ .s3-rail { width: 62px; flex: none; background: #060e1e; display: flex; flex-direction: column; align-items: center; padding: 18px 0 18px; } .s3-rail__brand { display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .s3-rail__logo { width: 34px; height: 34px; object-fit: contain; } .s3-rail__nav { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; width: 100%; padding: 0 9px; } .s3-rail__link { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: rgba(255,255,255,.28); text-decoration: none; transition: background .18s, color .18s; } .s3-rail__link::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: #fff; border-radius: 0 3px 3px 0; transition: height .2s; } .s3-rail__link:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.68); } .s3-rail__link.is-active { color: rgba(255,255,255,.92); } .s3-rail__link.is-active::before { height: 30px; } .s3-rail__sep { width: 28px; height: 1px; background: rgba(255,255,255,.07); margin: 8px 0; flex: none; } .s3-rail__foot { flex: none; width: 100%; padding: 0 9px; } /* Panel — navy label strip */ .s3-panel { flex: 1; background: var(--navy); display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .s3-panel__head { display: flex; align-items: center; gap: 9px; padding: 18px 14px 14px; border-bottom: 1px solid rgba(255,255,255,.07); flex: none; } .s3-panel__head-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.09); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); flex: none; } .s3-panel__title { color: #fff; font-size: 14px; font-weight: 700; font-family: var(--serif); } .s3-panel__nav { flex: 1; padding: 10px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .s3-panel__link { display: block; color: rgba(255,255,255,.52); font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 9px; text-decoration: none; transition: background .18s, color .18s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s3-panel__link:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.88); } .s3-panel__link.is-active { background: rgba(255,255,255,.93); color: var(--navy); font-weight: 700; } .s3-panel__sep-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.25); padding: 10px 12px 3px; } .s3-panel__foot { flex: none; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.07); } .s3-panel__user { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .s3-panel__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; } .s3-panel__uname { color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 118px; } .s3-panel__urole { color: rgba(255,255,255,.38); font-size: 11px; } .s3-panel__logout { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.38); font-size: 12.5px; font-weight: 500; text-decoration: none; padding: 6px 2px; transition: color .18s; } .s3-panel__logout:hover { color: rgba(255,255,255,.75); } /* Main content card */ .s3-main { flex: 1; background: #f0f2f8; border-radius: 22px; min-height: calc(100vh - 28px); overflow: hidden; display: flex; flex-direction: column; min-width: 0; } /* Scrollable area inside s3-main */ .s3-scroll { flex: 1; overflow-y: auto; padding: 28px; } /* Responsive */ @media (max-width: 1100px) { .s3-wrap { width: 230px; } } @media (max-width: 900px) { .s3-panel { display: none; } .s3-wrap { width: 62px; } } /* Mobile bottom nav (hidden on desktop) */ .s3-mob-nav { display: none; } @media (max-width: 680px) { .s3-body { padding: 0 !important; gap: 0; } .s3-wrap { display: none; } .s3-main { border-radius: 0; min-height: 100vh; } .s3-scroll { padding: 16px; padding-bottom: 80px; } .dash-topbar { flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .dash-topbar__title { font-size: 20px; } .dash-topbar__sub { font-size: 13px; } .dash-stats { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } .dash-actions { grid-template-columns: 1fr 1fr; gap: 12px; } .admin-table-wrap { border-radius: 10px; } /* Show mobile bottom nav */ .s3-mob-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #060e1e; border-top: 1px solid rgba(255,255,255,.08); z-index: 200; padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px)); } .s3-mob-nav__link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: rgba(255,255,255,.32); text-decoration: none; font-size: 10px; font-weight: 600; padding: 4px 2px; transition: color .18s; letter-spacing: .04em; } .s3-mob-nav__link.is-active { color: var(--orange); } .s3-mob-nav__link:hover { color: rgba(255,255,255,.7); } } @media (max-width: 440px) { .dash-stats { grid-template-columns: 1fr; } .dash-actions { grid-template-columns: 1fr; } .dash-topbar { flex-direction: column; align-items: flex-start; } .dash-topbar .btn--outline-navy, .dash-topbar .btn--orange { align-self: flex-start; } } /* ── SPLIT LOGIN PAGE ── */ .lsplit-body { margin: 0; padding: 0; min-height: 100vh; padding-top: 0 !important; overflow-x: hidden; background: #eef2f9; display: flex; align-items: center; justify-content: center; font-family: var(--sans); position: relative; } .lsplit-body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(145deg, var(--navy-soft) 0%, var(--navy) 60%, var(--navy-deep) 100%); clip-path: polygon(var(--bg-diag-top, 50%) 0, 100% 0, 100% 100%, var(--bg-diag-bottom, 43%) 100%); z-index: 0; } .lsplit { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; position: relative; z-index: 1; } /* ── Floating background squares — glassy, no animation ── */ .lsplit__shapes { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .lsplit__sq { position: absolute; border-radius: 22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6); } /* Blue glassy squares */ .lsplit__sq--1 { width: 130px; height: 130px; top: 7%; left: 4%; transform: rotate(18deg); background: rgba(147,197,253,.22); border: 1.5px solid rgba(147,197,253,.55); } .lsplit__sq--2 { width: 100px; height: 100px; top: 10%; left: 30%; transform: rotate(-10deg); background: rgba(147,197,253,.18); border: 1.5px solid rgba(147,197,253,.48); } .lsplit__sq--3 { width: 80px; height: 80px; top: 44%; left: 2%; transform: rotate(32deg); background: rgba(147,197,253,.16); border: 1.5px solid rgba(147,197,253,.42); } .lsplit__sq--4 { width: 110px; height: 110px; bottom: 22%; left: 20%; transform: rotate(-22deg); background: rgba(147,197,253,.20); border: 1.5px solid rgba(147,197,253,.50); } /* Orange glassy square */ .lsplit__sq--5 { width: 75px; height: 75px; bottom: 12%; left: 5%; transform: rotate(14deg); background: rgba(239,126,26,.12); border: 1.5px solid rgba(239,126,26,.35); } /* Large square bottom area */ .lsplit__sq--6 { width: 120px; height: 120px; bottom: 6%; left: 32%; transform: rotate(-6deg); background: rgba(147,197,253,.16); border: 1.5px solid rgba(147,197,253,.40); } /* White glassy squares — navy right side */ .lsplit__sq--7 { width: 120px; height: 120px; top: 8%; right: 5%; transform: rotate(15deg); background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.18); } .lsplit__sq--8 { width: 85px; height: 85px; top: 12%; right: 28%; transform: rotate(-12deg); background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.15); } .lsplit__sq--9 { width: 100px; height: 100px; bottom: 18%; right: 4%; transform: rotate(25deg); background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.14); } .lsplit__sq--10 { width: 72px; height: 72px; bottom: 8%; right: 22%; transform: rotate(-18deg); background: rgba(239,126,26,.10); border: 1.5px solid rgba(239,126,26,.28); } /* Card */ .lsplit__card { display: flex; width: 860px; max-width: 100%; min-height: 540px; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); background: var(--navy); position: relative; } /* White brand panel */ .lsplit__brand { flex-shrink: 0; width: 50%; background: linear-gradient(150deg, #ffffff 0%, #eef2f9 100%); clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%); display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; } /* Subtle dot pattern on white panel */ .lsplit__brand::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(0,38,77,.07) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; } .lsplit__brand-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 48px; width: 80%; position: relative; z-index: 1; } .lsplit__logo { width: 160px; height: auto; filter: drop-shadow(0 6px 24px rgba(0,38,77,.18)); transition: transform .3s; } .lsplit__logo:hover { transform: scale(1.04); } /* Navy form panel — gradient + decorative circles */ .lsplit__form { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding: 60px 68px 60px 16px; position: relative; z-index: 1; overflow: hidden; background: linear-gradient(145deg, var(--navy-soft) 0%, var(--navy) 60%, var(--navy-deep) 100%); } /* Decorative ring — top right */ .lsplit__form::before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.06); top: -110px; right: -100px; pointer-events: none; } /* Decorative ring — bottom left */ .lsplit__form::after { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.05); background: rgba(255,255,255,.02); bottom: -70px; left: 10px; pointer-events: none; } .lsplit__form-content { width: 100%; max-width: 300px; position: relative; z-index: 2; } /* Orange accent bar */ .lsplit__accent { width: 38px; height: 3px; background: var(--orange); border-radius: 2px; margin-bottom: 14px; } /* Heading */ .lsplit__heading { margin-bottom: 20px; } .lsplit__desc { font-size: 13px; color: rgba(255,255,255,.45); margin: 0 0 24px; line-height: 1.6; } .lsplit__welcome { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; } .lsplit__title { font-size: 22px; font-weight: 700; color: #fff; margin: 0; line-height: 1.2; font-family: var(--sans); } /* Form */ .lsplit__fform { display: flex; flex-direction: column; gap: 16px; } .lsplit__field { display: flex; flex-direction: column; gap: 7px; } .lsplit__label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); letter-spacing: .05em; text-transform: uppercase; } .lsplit__input { width: 100%; padding: 12px 15px; border: 1.5px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.07); font-family: var(--sans); font-size: 14px; color: #fff; outline: none; transition: background .2s, border-color .2s, box-shadow .2s; box-sizing: border-box; backdrop-filter: blur(4px); } .lsplit__input::placeholder { color: rgba(255,255,255,.25); } .lsplit__input:focus { background: rgba(255,255,255,.12); border-color: var(--orange); box-shadow: 0 0 0 3px rgba(239,126,26,.2); } .lsplit__input.is-error { border-color: #fca5a5; box-shadow: 0 0 0 3px rgba(252,165,165,.15); } .lsplit__err { font-size: 12px; color: #fca5a5; margin-top: 2px; } .lsplit__input-wrap { position: relative; } .lsplit__input-wrap .lsplit__input { padding-right: 46px; } .lsplit__eye { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: rgba(255,255,255,.3); padding: 4px; line-height: 0; transition: color .2s; } .lsplit__eye:hover { color: rgba(255,255,255,.8); } .lsplit__meta { display: flex; justify-content: flex-end; margin-top: -4px; } .lsplit__recover { font-size: 12px; color: rgba(255,255,255,.4); text-decoration: none; transition: color .2s; } .lsplit__recover:hover { color: var(--orange); } .lsplit__submit { width: 100%; padding: 13px; border: none; border-radius: 8px; background: var(--orange); color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .12em; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 4px 20px rgba(239,126,26,.45); margin-top: 4px; } .lsplit__submit:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(239,126,26,.55); } .lsplit__submit:active { transform: translateY(0); } .lsplit__submit:disabled { opacity: .65; cursor: not-allowed; transform: none; box-shadow: none; } .lsplit__back { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 22px; font-size: 12.5px; color: rgba(255,255,255,.3); text-decoration: none; transition: color .2s; } .lsplit__back:hover { color: rgba(255,255,255,.7); } .lsplit__back:hover { color: rgba(255,255,255,.7); } .lsplit__messages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .lsplit__msg { font-size: 13px; padding: 10px 14px; border-radius: 8px; font-weight: 500; } .lsplit__msg--error { background: rgba(185,28,28,.25); color: #fca5a5; border: 1px solid rgba(252,165,165,.2); } .lsplit__msg--success { background: rgba(22,163,74,.2); color: #86efac; border: 1px solid rgba(134,239,172,.2); } .lsplit__msg--warning { background: rgba(180,83,9,.2); color: #fcd34d; border: 1px solid rgba(252,211,77,.2); } /* Shake on error */ .lsplit-shake { animation: loginShake .42s cubic-bezier(.36,.07,.19,.97) both; } /* Responsive */ @media (max-width: 680px) { .lsplit__card { flex-direction: column; border-radius: 14px; } .lsplit__brand { width: 100%; clip-path: none; padding: 40px 32px 32px; } .lsplit__brand-content { width: 100%; padding: 0; flex-direction: row; gap: 16px; justify-content: center; } .lsplit__logo { width: 72px; } .lsplit__form { justify-content: center; padding: 36px 28px 48px; } .lsplit__form-content { max-width: 100%; } } /* lsplit extras — callback page */ .lsplit__card--wide { width: 1100px; } /* Match background diagonal (50%→43% vw) for the wider card at all viewport widths */ .lsplit__card--wide .lsplit__brand { clip-path: polygon(0 0, 100% 0, calc(-7vw + 550px) 100%, 0 100%); } /* Extend the card's diagonal angle to the full viewport so the background line is continuous with the card divider */ .lsplit-body--cb::before { clip-path: polygon(50.9% 0, 100% 0, 100% 100%, 42.2% 100%); } .lsplit__submit--sm { width: auto; display: block; margin: 0 auto; padding: 12px 40px; } .lsplit__form--compact { padding: 44px 52px 44px 16px; } .lsplit__form-content--wide { max-width: 500px; } .lsplit__fform--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .lsplit__field--full { grid-column: 1 / -1; } .lsplit__textarea { width: 100%; padding: 12px 15px; border: 1.5px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.07); font-family: var(--sans); font-size: 14px; color: #fff; outline: none; transition: background .2s, border-color .2s, box-shadow .2s; box-sizing: border-box; backdrop-filter: blur(4px); resize: none; min-height: 72px; } .lsplit__textarea::placeholder { color: rgba(255,255,255,.25); } .lsplit__textarea:focus { background: rgba(255,255,255,.12); border-color: var(--orange); box-shadow: 0 0 0 3px rgba(239,126,26,.2); } .lsplit__textarea.is-error { border-color: #fca5a5; box-shadow: 0 0 0 3px rgba(252,165,165,.15); } .lsplit__brand-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(0,38,77,.08); color: var(--navy); border-radius: 20px; padding: 5px 13px; margin-bottom: 12px; } .lsplit__brand-name { font-family: var(--serif); font-size: 20px; font-weight: 800; color: var(--navy); margin: 14px 0 6px; line-height: 1.2; } .lsplit__brand-sub { font-size: 13px; color: rgba(0,38,77,.52); line-height: 1.65; margin: 0 0 26px; } .lsplit__feats { display: flex; flex-direction: column; gap: 14px; width: 100%; text-align: left; } .lsplit__feat { display: flex; align-items: flex-start; gap: 12px; } .lsplit__feat-icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(0,38,77,.07); color: var(--navy); display: flex; align-items: center; justify-content: center; flex: none; } .lsplit__feat-title { font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.3; } .lsplit__feat-sub { font-size: 12px; color: rgba(0,38,77,.5); margin-top: 2px; } @media (max-width: 680px) { .lsplit__fform--grid { grid-template-columns: 1fr; } .lsplit__field--full { grid-column: auto; } .lsplit__form--compact { padding: 36px 28px 44px; } .lsplit__card--wide .lsplit__brand { clip-path: none; } .lsplit__card--wide .lsplit__brand-content { flex-direction: column; } .lsplit__form-content--wide { max-width: 100%; } } /* ── LOGIN PAGE ── */ .login-side { background: #fff; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; } .login-brand { display: flex; align-items: center; justify-content: space-between; padding: 28px 52px; flex-shrink: 0; } .login-brand__logo { display: flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 700; font-size: 15px; text-decoration: none; letter-spacing: -.01em; } .login-brand__logo img { height: 32px; width: auto; } .login-brand__badge { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(0,38,77,.07); color: var(--navy); border-radius: 20px; padding: 5px 13px; } .login-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 52px; } .login-wrap { width: 100%; max-width: 380px; } .login-heading { font-family: var(--sans); font-size: clamp(2.4rem, 4.5vw, 3.4rem); font-weight: 900; color: var(--navy); line-height: 1.06; letter-spacing: -.04em; margin-bottom: 8px; } .login-sub { font-size: 14px; color: rgba(90,101,115,.65); margin-bottom: 32px; } .login-form { display: flex; flex-direction: column; gap: 18px; } .login-field { display: flex; flex-direction: column; gap: 7px; } .login-label { font-size: 13px; font-weight: 600; color: var(--ink); } .login-input { width: 100%; padding: 13px 16px; border: 1.5px solid #dde1e7; border-radius: 10px; font-family: var(--sans); font-size: 14.5px; color: var(--ink); background: #fff; outline: none; transition: border-color .22s, box-shadow .22s; } .auth-input-wrap .login-input { padding-right: 48px; } .login-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0,38,77,.07); } .login-input::placeholder { color: #b0b8c4; } .login-input.is-error { border-color: #B91C1C; } .login-forgot-row { display: flex; justify-content: flex-end; margin-top: -6px; } .login-forgot { font-size: 13px; color: var(--orange); font-weight: 500; transition: color .2s; } .login-forgot:hover { color: #c55200; } .login-divider { display: flex; align-items: center; gap: 14px; color: rgba(90,101,115,.45); font-size: 13px; margin: 4px 0; } .login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: rgba(0,38,77,.1); } .login-return-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 20px; border: 1.5px solid rgba(0,38,77,.15); border-radius: 12px; color: var(--navy); font-size: 14px; font-weight: 600; text-decoration: none; background: #fff; transition: border-color .2s, background .2s; } .login-return-btn:hover { border-color: rgba(0,38,77,.3); background: rgba(0,38,77,.03); } .login-submit { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 15px 20px; border: none; border-radius: 12px; background: var(--orange); color: #fff; font-family: var(--sans); font-size: 15px; font-weight: 700; cursor: pointer; transition: background .22s, transform .18s, box-shadow .22s; letter-spacing: .02em; box-shadow: 0 4px 18px rgba(239,126,26,.35); } .login-submit:hover { background: #d05800; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(239,126,26,.4); } .login-submit:active { transform: none; } .login-socials { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px 52px; flex-shrink: 0; } .login-socials a { color: rgba(0,38,77,.4); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,38,77,.05); transition: background .2s, color .2s; } .login-socials a:hover { color: var(--orange); background: rgba(239,126,26,.1); } @media (max-width: 900px) { .login-side { min-height: auto; } .login-brand { padding: 20px 28px; } .login-center { padding: 28px 28px; } .login-socials { padding: 20px 28px; } } @media (max-width: 600px) { .login-brand { padding: 18px 20px; } .login-center { padding: 24px 20px; align-items: flex-start; } .login-socials { padding: 18px 20px; } } /* ── CALLBACK LIST PAGE ── */ .cb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .cb-tabs { display: flex; background: #fff; border-radius: 10px; padding: 4px; gap: 4px; box-shadow: 0 1px 4px rgba(0,38,77,.06); } .cb-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: rgba(90,101,115,.7); text-decoration: none; transition: background .18s, color .18s; } .cb-tab:hover { background: rgba(0,38,77,.05); color: var(--navy); } .cb-tab.is-active { background: var(--navy); color: #fff; } .cb-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cb-filter__label { font-size: 12.5px; font-weight: 600; color: rgba(90,101,115,.65); white-space: nowrap; } .cb-filter__input { height: 38px; padding: 0 12px; border: 1.5px solid rgba(0,38,77,.12); border-radius: 8px; font-size: 13px; font-family: var(--sans); color: var(--navy); background: #fff; outline: none; transition: border-color .18s; } .cb-filter__input:focus { border-color: var(--orange); } .cb-filter__btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 18px; border-radius: 8px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 600; font-family: var(--sans); border: none; cursor: pointer; transition: background .18s; } .cb-filter__btn:hover { background: #001d40; } .cb-filter__clear { font-size: 13px; font-weight: 500; color: rgba(185,28,28,.8); text-decoration: none; padding: 4px 8px; border-radius: 6px; transition: background .15s; } .cb-filter__clear:hover { background: rgba(185,28,28,.08); } .cb-table-scroll { overflow-x: auto; } .admin-table__archive { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #92400E; background: rgba(245,158,11,.1); text-decoration: none; transition: background .18s, color .18s; } .admin-table__archive:hover { background: rgba(245,158,11,.2); color: #78350F; } .cb-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cb-address { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: rgba(90,101,115,.75); } .cb-date { white-space: nowrap; font-size: 13px; color: rgba(90,101,115,.65); } .cb-total { margin-top: 16px; font-size: 13.5px; color: rgba(90,101,115,.6); } .cb-total strong { color: var(--navy); } @media (max-width: 900px) { .cb-toolbar { flex-direction: column; align-items: flex-start; } .cb-filter { width: 100%; } } @media (max-width: 480px) { .cb-filter { flex-wrap: wrap; } .cb-filter__input { flex: 1; min-width: 120px; } .cb-tabs { width: 100%; } .cb-tab { flex: 1; justify-content: center; } .dash-section__head { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 14px 0; } .dash-table thead th, .dash-table td { padding: 9px 14px; } .dash-stat { padding: 16px; gap: 12px; } .dash-stat__num { font-size: 26px; } } /* ── ERROR PAGES ── */ .eh-main { min-height: 72vh; display: flex; align-items: center; justify-content: center; padding: 80px 24px; background: var(--bg-light); position: relative; overflow: hidden; } /* Giant watermark number */ .eh-watermark { position: absolute; font-family: var(--serif); font-size: clamp(160px, 28vw, 320px); font-weight: 900; color: rgba(0,38,77,.045); line-height: 1; user-select: none; pointer-events: none; letter-spacing: -8px; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; } /* Card */ .eh-card { position: relative; z-index: 1; background: #fff; border-radius: 20px; box-shadow: 0 8px 48px rgba(0,38,77,.1); padding: 52px 48px; max-width: 520px; width: 100%; text-align: center; } /* Error code pill */ .eh-code { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 24px; } .eh-code--404 { background: rgba(239,126,26,.1); color: var(--orange); } .eh-code--500 { background: rgba(185,28,28,.09); color: #B91C1C; } .eh-code--403 { background: rgba(109,40,217,.09); color: #6D28D9; } .eh-code--400 { background: rgba(217,119,6,.09); color: #B45309; } .eh-code--default { background: rgba(0,38,77,.08); color: var(--navy); } /* Icon badge */ .eh-badge { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; } .eh-badge--404 { background: rgba(239,126,26,.1); color: var(--orange); } .eh-badge--500 { background: rgba(185,28,28,.09); color: #B91C1C; } .eh-badge--403 { background: rgba(109,40,217,.09); color: #6D28D9; } .eh-badge--400 { background: rgba(217,119,6,.09); color: #B45309; } .eh-badge--default { background: rgba(0,38,77,.08); color: var(--navy); } /* Title & message */ .eh-title { font-family: var(--serif); font-size: clamp(26px, 4vw, 34px); font-weight: 800; color: var(--navy); margin: 0 0 14px; line-height: 1.2; } .eh-msg { font-size: 15.5px; color: var(--body); line-height: 1.65; margin: 0; } /* Divider */ .eh-divider { border: none; border-top: 1px solid rgba(0,38,77,.08); margin: 32px 0; } /* Action buttons */ .eh-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .eh-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 50px; font-family: var(--sans); font-size: 14px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; } .eh-btn--primary { background: var(--orange); color: #fff; box-shadow: 0 4px 16px rgba(239,126,26,.28); } .eh-btn--primary:hover { background: var(--orange-dark); box-shadow: 0 6px 20px rgba(239,126,26,.36); } .eh-btn--outline { background: transparent; color: var(--navy); border: 1.5px solid rgba(0,38,77,.18); } .eh-btn--outline:hover { background: rgba(0,38,77,.04); border-color: var(--navy); } /* Traceback (dev only) */ .eh-traceback { margin-top: 28px; text-align: left; border: 1px solid rgba(0,38,77,.1); border-radius: 10px; overflow: hidden; } .eh-traceback summary { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--body); cursor: pointer; background: rgba(0,38,77,.03); } .eh-traceback pre { padding: 16px; font-size: 12px; color: #B91C1C; background: #FFF5F5; overflow-x: auto; margin: 0; line-height: 1.6; } @media (max-width: 600px) { .eh-card { padding: 36px 24px; } .eh-actions { flex-direction: column; } .eh-btn { justify-content: center; } } /* Forgot / Reset password extras */ .forgot-icon { width: 58px; height: 58px; border-radius: 14px; background: rgba(0,38,77,.07); color: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } /* Group suggestion chips */ .group-suggestions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .group-suggestions__label { font-size: 12px; color: rgba(90,101,115,.6); font-weight: 500; } .group-chip { padding: 5px 14px; border: 1.5px solid rgba(0,38,77,.15); border-radius: 20px; background: #fff; color: var(--navy); font-family: var(--sans); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color .18s, background .18s, color .18s; } .group-chip:hover { border-color: var(--orange); background: rgba(239,126,26,.06); color: var(--orange); } /* Request Callback extras */ .auth-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .auth-field--full { grid-column: 1 / -1; } .auth-textarea { width: 100%; padding: 13px 16px; border: 1.5px solid rgba(0,38,77,.15); border-radius: 10px; font-family: var(--sans); font-size: 14.5px; color: var(--ink); background: var(--bg-light); outline: none; resize: vertical; min-height: 90px; transition: border-color .22s, background .22s, box-shadow .22s; } .auth-textarea:focus { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(0,38,77,.08); } .auth-textarea::placeholder { color: rgba(90,101,115,.5); } .auth-textarea.is-error { border-color: #B91C1C; } .cb-features { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; } .cb-feature { display: flex; align-items: flex-start; gap: 14px; } .cb-feature__icon { width: 38px; height: 38px; flex: none; background: rgba(239,126,26,.18); border: 1px solid rgba(239,126,26,.28); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--orange); } .cb-feature__title { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; } .cb-feature__sub { color: rgba(255,255,255,.55); font-size: 12.5px; margin-top: 2px; } @media (max-width: 600px) { .auth-form-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .adm-hero { min-height: 72vh; } .adm-overview__grid { grid-template-columns: 1fr; } .adm-overview__img { flex: none; height: 280px; } .adm-test__grid { grid-template-columns: 1fr; } .adm-fees__grid { grid-template-columns: 1fr; gap: 32px; } .adm-dates__grid { grid-template-columns: 1fr; gap: 28px; } .adm-dates__left { text-align: center; } /* Below 900px there's no room for the desktop zigzag (content / number / content) grid, and a lone empty spacer column was throwing the number circle's vertical position off relative to its title — so the whole steps list goes linear (single column, no circles/line) for the entire mobile/tablet range instead of only kicking in at 640px. */ .adm-steps__timeline::before { display: none; } .adm-step { grid-template-columns: 1fr; gap: 6px; margin-bottom: 24px; } .adm-step__node { display: none; } .adm-step__spacer { display: none; } .adm-step--left .adm-step__content, .adm-step--right .adm-step__content { text-align: left; } .adm-step__content--outline { text-align: left; } } @media (max-width: 640px) { .adm-overview__cards { grid-template-columns: 1fr; } .adm-dates__cards { grid-template-columns: 1fr; } .adm-test__subjects { grid-template-columns: 1fr 1fr; } .adm-test__portions-title { font-size: 18px; } .adm-test__portions-hd { flex-direction: column; align-items: flex-start; gap: 10px; } .adm-fees__grid { gap: 24px; } } @media (max-width: 480px) { .adm-hero__title { font-size: clamp(28px, 8vw, 38px); } .adm-hero__line1 { white-space: normal; } } @media (max-width: 420px) { .adm-test__subjects { grid-template-columns: 1fr; } } /* ========================================================= Residential Life Page ========================================================= */ /* Centered section headings & text */ .res-centered-title { font-family: var(--serif); font-size: clamp(22px, 2.8vw, 32px); font-weight: 700; color: var(--navy); text-align: center; margin-bottom: 14px; line-height: 1.25; } .res-centered-text { font-size: 14.5px; color: var(--body); text-align: center; max-width: 820px; margin: 0 auto 36px; line-height: 1.8; } .res-centered-text--italic { font-style: italic; } /* Feature cards with left orange border */ .res-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 0 8px; } .res-feature { background: #fff; border: 1px solid rgba(0,38,77,.09); border-left: 4px solid var(--orange); border-radius: 6px; padding: 22px 20px 22px 20px; } .res-feature__icon { color: var(--orange); margin-bottom: 12px; } .res-feature__title { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; } .res-feature__text { font-size: 13px; color: var(--body); line-height: 1.7; margin: 0; } /* Daily schedule */ .res-schedule { margin: 8px 0 4px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(0,38,77,.08); } .res-schedule__row { display: grid; grid-template-columns: 155px 1fr 1fr; align-items: center; padding: 13px 18px; border-bottom: 1px solid rgba(0,38,77,.06); gap: 12px; } .res-schedule__row--last { border-bottom: none; } .res-schedule__row--hl { background: rgba(239,126,26,.07); } .res-schedule__row--hl .res-schedule__time { color: var(--orange); font-weight: 700; } .res-schedule__row--hl .res-schedule__act { color: var(--orange); } .res-schedule__time { font-size: 13px; font-weight: 600; color: var(--body); } .res-schedule__act { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--navy); } .res-schedule__desc { font-size: 12.5px; color: var(--body); line-height: 1.55; } .res-schedule__note { font-size: 12px; color: var(--body); font-style: italic; margin-top: 10px; opacity: .75; } /* ── Where Every Student Has a Stage ── */ .res-stage { background: #fff; padding: 60px 5px 60px 56px; position: relative; } .res-stage::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 100vw; background: #fff; } .res-stage__title { font-family: var(--serif); font-size: clamp(26px, 3vw, 40px); font-weight: 800; color: var(--navy); text-align: center; margin-bottom: 12px; } .res-stage__divider { width: 70px; height: 3px; background: var(--orange); margin: 0 auto 48px; border-radius: 2px; } .res-stage__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 56px; } .res-stage__text { font-size: 15px; color: var(--body); line-height: 1.85; } .res-stage__img { border-radius: 16px; overflow: hidden; height: 340px; } .res-stage__img img { width: 100%; height: 100%; object-fit: cover; } .res-arts { display: grid; grid-template-columns: 1fr; gap: 24px; } .res-art { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; } .res-art__title { flex: 0 0 100%; font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 0; } .res-art__img { flex: 0 0 240px; border-radius: 10px; overflow: hidden; height: 160px; margin-bottom: 0; } .res-art__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .res-art:hover .res-art__img img { transform: scale(1.05); } .res-art__text { flex: 1 1 260px; font-size: 13px; color: var(--body); line-height: 1.7; margin: 0; } @media (max-width: 600px) { .res-art__img { flex-basis: 100%; height: 200px; } } /* ── Beyond the Classroom ── */ .res-community { background: var(--bg-light); padding: 60px 5px 60px 56px; position: relative; } .res-community::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 100vw; background: var(--bg-light); } .res-community__title { font-family: var(--serif); font-size: clamp(24px, 2.8vw, 38px); font-weight: 800; color: var(--navy); text-align: center; margin-bottom: 10px; } .res-community__sub { font-size: 15px; color: var(--body); text-align: center; margin-bottom: 44px; } .res-clubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .res-club { background: #fff; border-radius: 14px; padding: 28px 24px; border: 1px solid rgba(0,38,77,.07); } .res-club--wide { grid-column: span 1; } .res-club__icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(239,126,26,.1); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .res-club__title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 10px; } .res-club__text { font-size: 13.5px; color: var(--body); line-height: 1.7; margin-bottom: 16px; } .res-club__grade { font-size: 11.5px; font-weight: 700; color: var(--orange); letter-spacing: .08em; text-transform: uppercase; } /* ── Four Houses ── */ .res-houses-sec { background: #fff; padding: 60px 5px 80px 56px; position: relative; } .res-houses-sec::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 100vw; background: #fff; } .res-houses-sec--alt { background: var(--bg-light); } .res-houses-sec--alt::after { background: var(--bg-light); } .res-houses-sec__title { font-family: var(--serif); font-size: clamp(24px, 3vw, 40px); font-weight: 800; color: var(--navy); margin-bottom: 14px; } .res-houses-sec__text { font-size: 14.5px; color: var(--body); line-height: 1.8; max-width: 900px; margin-bottom: 44px; } .res-houses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .res-house { border-radius: 18px; padding: 28px 20px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; } .res-house__circle { width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.45); margin-bottom: 22px; border: 2px solid rgba(255,255,255,.6); } .res-house__name { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 10px; } .res-house__desc { font-size: 13px; color: var(--navy); line-height: 1.7; opacity: .85; } .res-house--blue { background: #4472C4; } .res-house--blue .res-house__name, .res-house--blue .res-house__desc { color: #fff; } .res-house--gold { background: #D4E157; } .res-house--green { background: #66BB6A; } .res-house--red { background: #EF5350; } .res-house--red .res-house__name, .res-house--red .res-house__desc { color: #fff; } /* Responsive */ /* res-arts/res-clubs/res-houses stay a single row through tablet widths — they only reduce/stack at ≤600px below. */ @media (max-width: 900px) { .res-stage__intro { grid-template-columns: 1fr; } } @media (max-width: 768px) { .res-schedule__row { grid-template-columns: 130px 1fr 1fr; } } @media (max-width: 600px) { .res-stage { padding: 40px 22px; } .res-stage::after { display: none; } .res-community { padding: 40px 22px; } .res-community::after { display: none; } .res-houses-sec { padding: 40px 22px 60px; } .res-houses-sec::after { display: none; } .res-features { grid-template-columns: 1fr; } .res-arts { grid-template-columns: 1fr; } .res-clubs { grid-template-columns: 1fr; } .res-houses { grid-template-columns: 1fr 1fr; } .res-schedule__row { grid-template-columns: 1fr; gap: 3px; padding: 10px 14px; } .res-schedule__desc { display: none; } } /* ========================================================= COMPREHENSIVE MOBILE RESPONSIVE — all public pages ========================================================= */ /* ── Hero: stronger overlay on all small screens ── */ @media (max-width: 768px) { .hero__bg { background: linear-gradient(180deg, rgba(0,38,77,0) 52%, rgba(0,38,77,.55) 78%, var(--navy) 100%), linear-gradient(180deg, rgba(241,241,242,.95) 0%, rgba(241,241,242,.86) 35%, rgba(241,241,242,.58) 60%, rgba(241,241,242,.18) 80%, rgba(241,241,242,0) 100%), url("../assets/images/campus.jpg") center 28% / cover no-repeat; } .hero { padding-top: 10%; padding-bottom: 60px; } .hero__content { max-width: 100%; } .hero__text { font-size: 14px; } .section--navy, .section--light { padding: 56px 0; } } /* ── 480px: small phones ── */ @media (max-width: 480px) { /* Hero */ .hero { padding-top: 6%; padding-bottom: 50px; } .hero__title { font-size: clamp(26px, 7.5vw, 32px); } .hero__text { font-size: 13.5px; margin-top: 14px; } .hero__actions { flex-direction: column; gap: 10px; } .hero__actions .btn { width: 100%; justify-content: center; } .hero .scroll-cue { bottom: 18px; } /* Sections */ .section--navy, .section--light { padding: 44px 0; } .section__title { font-size: clamp(22px, 6vw, 28px); } .container { padding: 0 16px; } /* Results rings — smaller on very small screens */ .rings { max-width: 280px; } .ring { width: 130px; height: 130px; } .ring__track, .ring__bar { stroke-width: 9; } .ring__num { font-size: 28px; } .ring-card { padding: 20px 14px 22px; } .ring-card__label { font-size: 13px; } /* Stats */ .stat-box { padding: 18px 14px; } .stat-box__num { font-size: 20px; } .stat-box__txt { font-size: 12px; } .results__quote { font-size: 14px; margin-top: 28px; } /* Domain cards */ .domain-card { height: 340px; max-width: 100%; } .domains { max-width: 100%; } .domain-card__list { max-height: none; opacity: 1; margin-top: 12px; } /* Program cards */ .program-grid { max-width: 100%; } .program-card__img { height: 170px; } .program-card__title { font-size: 18px; } /* Split sections */ .split__panel { padding: 40px 16px; } .split--athletics .split__panel { padding-left: 16px; } .split--residential .split__panel { padding-right: 16px; } .split__title { font-size: clamp(22px, 6vw, 28px); } .split__text { font-size: 13.5px; margin-top: 14px; } .check-list li { font-size: 13px; } .split__media { min-height: 260px; } /* Campus slider */ .campus__slide img { height: 230px; } .campus__caption { max-width: 130px; padding: 8px 10px; } .campus__caption h4 { font-size: 12px; } /* Admissions card */ .admissions__card { padding: 36px 16px; border-radius: var(--radius); } .admissions__title { font-size: clamp(22px, 6vw, 28px); } .admissions__text { font-size: 13.5px; } .admissions__actions { flex-direction: column; gap: 10px; align-items: stretch; } .admissions__actions .btn { justify-content: center; } /* Nav */ .nav__logo img { height: 44px; } .nav__toggle { width: 38px; height: 38px; } /* Footer */ .footer { padding: 50px 0 40px; } .footer__heading { font-size: 16px; } .footer__map { height: 160px; } /* Academics page */ .acad-hero__inner { padding-top: 6%; padding-bottom: 24px; } .acad-prog-grid { max-width: 100%; } .acad-prog-card__img { height: 180px; } .acad-stats-card { padding: 28px 18px; } /* Early-years / Middle / Senior hero */ .ey-hero__inner { padding-bottom: 50px; } .ey-hero__title { font-size: clamp(28px, 7.5vw, 36px); } .ey-hero__text { font-size: 13.5px; } /* Athletics pages */ .sport-hero__inner { padding-bottom: 50px; } /* Residential */ .res-stage { padding: 36px 16px; } .res-community { padding: 36px 16px; } .res-houses-sec { padding: 36px 16px 50px; } .res-houses { grid-template-columns: 1fr; } .res-house { padding: 22px 16px; } /* About page */ .about-hero__title { font-size: clamp(26px, 7vw, 36px); } .about-hero__text { font-size: 13.5px; } .about-quote { font-size: 16px; } .about-sec__title { font-size: clamp(20px, 5.5vw, 26px); } /* Scroll cue */ .scroll-cue--inline { margin-top: 22px; } } /* ── 375px: tightest phones ── */ @media (max-width: 390px) { .hero__title { font-size: 24px; } .section__title { font-size: 20px; } .container { padding: 0 14px; } .ring { width: 116px; height: 116px; } .ring__num { font-size: 24px; } .btn { padding: 10px 14px; font-size: 13px; } .domain-card { height: 300px; } .split__panel { padding: 32px 14px; } .admissions__card { padding: 28px 14px; } .footer__bottom { grid-template-columns: 1fr; } } /* ── lsplit (login / auth pages) extra mobile polish ── */ @media (max-width: 420px) { .lsplit { padding: 16px; } .lsplit__card { border-radius: 12px; } .lsplit__brand { padding: 28px 20px 22px; } .lsplit__form { padding: 28px 20px 36px; } .lsplit__title { font-size: 18px; } .lsplit__submit { padding: 12px; font-size: 12px; } /* Wide card (callback) also stacks at 420px */ .lsplit__card--wide .lsplit__brand { padding: 28px 20px 22px; } .lsplit__form--compact { padding: 28px 20px 36px; } } /* ── Navbar mobile improvements ── .nav__menu's own padding-top lives with its main rule near .nav's definition — a stale duplicate here (padding-top:100px) was silently overriding it (later in source, same specificity) and left too little clearance once .topbar became visible again on mobile, causing the panel to overlap the header. Removed; only the z-index bits (which don't conflict with anything) stay here. */ @media (max-width: 900px) { /* Close button visible over the slide-in menu */ .nav__toggle { z-index: 9999; } /* Logo stays visible while menu is open */ .nav__logo { position: relative; z-index: 60; } } @media (max-width: 480px) { /* Tighter menu padding on phones — top clearance (130px) must match the main .nav__menu rule so the panel still clears the header; only the side/bottom padding and item gap shrink here. */ .nav__menu { padding: 130px 10px 32px; gap: 6px; } .nav__link { padding: 13px 16px; font-size: 15px; border-radius: 12px; } .mega__list a { padding: 11px 16px; font-size: 14px; } } /* ── Academics subpage heroes ── */ @media (max-width: 600px) { .acad-hero__inner { padding-top: 8%; } .acad-hero__bottom { flex-wrap: wrap; } .acad-hero__rule { display: none; } .acad-hero__cue { font-size: 10px; } } /* ── Sport/athletics subpage heroes (shared .sport-hero pattern) ── */ @media (max-width: 600px) { .ey-hero__inner { padding-bottom: 60px; } .ey-hero__btns { flex-direction: column; gap: 10px; } .ey-hero__btns .btn { width: 100%; justify-content: center; } } /* ── About page — inst grid ── */ @media (max-width: 480px) { .inst-grid { grid-template-columns: 1fr !important; } .about-list--two { grid-template-columns: 1fr; } .icon-list--two { grid-template-columns: 1fr; } .about-pills { gap: 7px; } .about-pill { font-size: 12px; padding: 9px 14px 9px 11px; } .lead-banner { min-height: 0; } .lead-banner > img { height: 180px; } .leader-card__img { width: 80px; height: 80px; } } /* ── Admissions page ── */ @media (max-width: 480px) { .adm-hero__content { max-width: 100%; } .adm-process-grid { grid-template-columns: 1fr !important; } .adm-step { flex-direction: column !important; } } /* Horizontal overflow protection lives on only (line 49) — a duplicate `body { overflow-x: hidden }` used to sit here too, which silently broke position:sticky for .nav/.psn (see the comment on the body rule near the top of this file for why). Do not re-add it here. */ @media (max-width: 768px) { img { max-width: 100%; } table { max-width: 100%; overflow-x: auto; display: block; } pre, code { overflow-x: auto; max-width: 100%; } } /* ========================================================= WEBSITE PAGE MOBILE FIXES — targeted corrections ========================================================= */ /* ── Residential split: reset right-align & reverse icon order ── */ @media (max-width: 900px) { .split--residential .split__content { text-align: left; } .split--residential .split__title.light { text-align: left; } .split--residential .check-list li { flex-direction: row; } .split--residential .check-list li svg { color: var(--orange); } } /* ── Footer: make subscribe & callback buttons full-width on mobile ── */ @media (max-width: 600px) { .footer__form .btn { max-width: 100%; } .footer__callback-btn { max-width: 100%; } .footer__form input { font-size: 16px; } } /* ── About hero: stronger overlay + correct padding on small phones ── */ @media (max-width: 900px) { .about-hero__media::after { background: linear-gradient(180deg, rgba(0,30,61,.88) 0%, rgba(0,30,61,.78) 100%); } .about-hero__inner { padding-top: 22%; padding-bottom: 32px; } } @media (max-width: 480px) { .about-hero__title { font-size: clamp(26px, 7vw, 34px); } .about-hero__inner { padding-top: 16%; padding-bottom: 28px; } .about-hero__text { font-size: 13.5px; } } /* ── Admissions hero: reduce min-height on small phones ── */ @media (max-width: 600px) { .adm-hero { min-height: 60vh; } .adm-hero__title { font-size: clamp(26px, 7.5vw, 36px); } .adm-hero__sub { font-size: 13.5px; } } @media (max-width: 480px) { .adm-hero { min-height: 50vh; } } /* ── Admissions test tabs: 2-up grid of pills on mobile ── */ @media (max-width: 900px) { .adm-test__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .adm-test__tab { padding: 12px 14px; } /* keep just the bold grade label — the small "Grade X" line gets tight at 2-up, so it's dropped rather than wrapped awkwardly */ .adm-test__tab-grade { display: none; } } @media (max-width: 480px) { .adm-test__tab { padding: 10px 12px; gap: 10px; } .adm-test__tab-label { font-size: 12px; } } /* ── Admissions overview cards: full-width on small phones ── */ @media (max-width: 480px) { .adm-overview__cards { grid-template-columns: 1fr; } .adm-overview__card { padding: 20px 16px; } .adm-dates__cards { grid-template-columns: 1fr; } } /* ── Early / Middle / Senior hero: padding fix on phones ── */ @media (max-width: 480px) { .ey-hero__inner { padding-bottom: 44px; } .ey-hero__title { font-size: clamp(28px, 7.5vw, 38px); } .ms-hero__inner { padding-top: 60px; padding-bottom: 50px; } .ms-hero__title { font-size: clamp(28px, 7.5vw, 40px); } .ps-hero__inner { padding-top: 60px; padding-bottom: 50px; } .ps-hero__title { font-size: clamp(28px, 7.5vw, 40px); } .ss-hero__inner { padding-top: 60px; padding-bottom: 50px; } .ss-hero__title { font-size: clamp(28px, 7.5vw, 40px); } .ath-hero__title { font-size: clamp(28px, 7.5vw, 40px); } } @media (max-width: 480px) { .ath-content__title { font-size: 20px; } } /* ── Nav: ensure logo doesn't overlap toggle on very small phones ── */ @media (max-width: 360px) { .nav__logo img { height: 38px; } .nav__toggle { width: 36px; height: 36px; } } /* ── Buttons: prevent text overflow on small phones ── */ @media (max-width: 380px) { .btn { font-size: 13px; padding: 11px 16px; gap: 7px; } .hero__actions .btn, .admissions__actions .btn, .ey-hero__btns .btn, .ms-hero__btns .btn, .ps-hero__btns .btn, .ss-hero__btns .btn { width: 100%; justify-content: center; } } /* ── Section titles: tighter on very small phones ── */ @media (max-width: 360px) { .section__title { font-size: 19px; } .adm-section-title { font-size: 20px; } .container { padding: 0 12px; } } /* ── Campus slider: fix height on small phones ── */ @media (max-width: 380px) { .campus__slide img { height: 200px; } .campus__caption { display: none; } } /* ── Program cards: body text smaller on phone ── */ @media (max-width: 480px) { .program-card__body { padding: 18px 18px 22px; } .program-card__title { font-size: 18px; } .program-card__desc { font-size: 13px; } } /* ── Residential page sections on mobile ── */ @media (max-width: 480px) { .res-centered-title { font-size: 20px; } .res-feature { padding: 18px 16px; } .res-arts { gap: 12px; } .res-clubs { gap: 12px; } } /* ── About page: side nav horizontal on mobile ── */ @media (max-width: 480px) { .side-nav { gap: 6px; } .side-nav__link { font-size: 13px; padding: 12px 14px 12px 0; white-space: nowrap; } } /* ── General scroll-cue: hide on mobile to avoid clutter ── */ @media (max-width: 480px) { .scroll-cue--inline { margin-top: 16px; } } /* ========================================================= MOBILE SECTION DROPDOWN — Athletics sidebar + About side-nav ========================================================= */ /* ── Athletics sidebar: collapses to navy dropdown on mobile ── */ @media (min-width: 901px) { .ath-sidebar__hd-sub { display: none; } .ath-sidebar__hd-chevron { display: none; } } @media (max-width: 900px) { /* Mobile: the psn "Browse Section Pages" bar replaces this sidebar */ .ath-sidebar { display: none; } .ath-sidebar__hd { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; cursor: pointer; user-select: none; } .ath-sidebar__hd::after { display: none; } .ath-sidebar__hd-inner { display: flex; flex-direction: column; } .ath-sidebar__hd-sub { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: 4px; } .ath-sidebar__hd-chevron { color: rgba(255,255,255,.6); flex: none; transition: transform .32s var(--ease); } .ath-sidebar.is-open .ath-sidebar__hd-chevron { transform: rotate(180deg); } .ath-sidebar__list { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); border-top: 1px solid rgba(255,255,255,.1); } .ath-sidebar.is-open .ath-sidebar__list { max-height: 700px; } .ath-sidebar__item a { padding: 13px 20px; font-size: 14px; } .ath-sidebar__item.is-active a { padding-left: 17px; } } /* ── About side-nav: collapses to navy dropdown on mobile ── */ /* Toggle button injected by about.js — hidden on desktop */ .side-nav__toggle { display: none; } @media (max-width: 900px) { .about__side { margin-left: 0 !important; margin-right: 0 !important; } .side-nav__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--navy); color: #fff; padding: 15px 20px; border-radius: var(--radius); border: none; font-family: inherit; cursor: pointer; user-select: none; text-align: left; } .side-nav__toggle-inner { display: flex; align-items: center; gap: 12px; } .side-nav__toggle-icon { width: 34px; height: 34px; background: rgba(255,255,255,.12); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; color: var(--orange); } .side-nav__toggle-texts { display: flex; flex-direction: column; } .side-nav__toggle-title { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; } .side-nav__toggle-sub { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: 3px; } .side-nav__toggle-chevron { color: rgba(255,255,255,.6); flex: none; transition: transform .32s var(--ease); } .about__side.is-open .side-nav__toggle-chevron { transform: rotate(180deg); } /* Override horizontal-scroll row → vertical collapsible */ .side-nav { position: static !important; top: auto !important; flex-direction: column !important; overflow: hidden !important; overflow-x: hidden !important; max-height: 0; transition: max-height .4s var(--ease); background: #f5f5f7; border-radius: 0 0 var(--radius) var(--radius); border: 1px solid rgba(0,38,77,.08); border-top: none; } .about__side.is-open .side-nav { max-height: 500px; } .side-nav__link { border-left: 3px solid transparent !important; border-bottom: 1px solid rgba(0,38,77,.07) !important; padding: 14px 20px !important; color: var(--navy) !important; font-size: 14px !important; font-weight: 600 !important; border-radius: 0 !important; white-space: normal !important; display: block; text-decoration: none; } .side-nav__link:last-child { border-bottom: none !important; } .side-nav__link.is-active { color: var(--orange) !important; border-left-color: var(--orange) !important; background: rgba(239,126,26,.06) !important; } } /* ===================================================================== Section-pages browser ("Browse Section Pages" bar) — shown on pages with sub-navigation; injected by script.js after the site header. Visible on tablet/mobile; desktop keeps the sticky side navs. ===================================================================== */ .psn { background: var(--navy); display: none; /* sticks just below .nav (itself sticky — see .nav__toggle comment above) while scrolling; .topbar has already scrolled away by then */ position: sticky; top: var(--header-h); z-index: 50; } @media (max-width: 992px) { .psn { display: block; } } /* page-group sections (Academics / Athletics) have no desktop side nav, so their browser bar shows on every screen size */ /* (psn bar is mobile-only on every page — no desktop variant) */ .psn__bar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 20px; background: none; border: none; cursor: pointer; text-align: left; } .psn__icon { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; background: var(--orange); display: flex; align-items: center; justify-content: center; } .psn__icon span { display: block; width: 14px; height: 2px; background: #fff; border-radius: 2px; position: relative; } .psn__icon span::before, .psn__icon span::after { content: ""; position: absolute; left: 0; width: 14px; height: 2px; background: #fff; border-radius: 2px; } .psn__icon span::before { top: -5px; } .psn__icon span::after { top: 5px; } .psn__txt { flex: 1; min-width: 0; } .psn__title { display: block; color: #fff; font-size: 15.5px; font-weight: 700; line-height: 1.2; } .psn__sub { display: block; color: rgba(255,255,255,.65); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-top: 2px; } .psn__chev { color: rgba(255,255,255,.85); flex-shrink: 0; transition: transform .25s var(--ease); } .psn.is-open .psn__chev { transform: rotate(180deg); } .psn__panel { display: none; background: #fff; border-bottom: 1px solid #E8EAF3; } .psn.is-open .psn__panel { display: block; } .psn__link { display: flex; align-items: center; gap: 13px; padding: 18px 22px; font-size: 15px; font-weight: 600; color: var(--navy); border-bottom: 1px solid #EDF0F5; border-left: 4px solid transparent; } .psn__link:last-child { border-bottom: none; } .psn__dot { width: 7px; height: 7px; border-radius: 50%; background: #C7CEDA; flex-shrink: 0; } .psn__link.is-active { background: #F1F6FC; border-left-color: var(--orange); } .psn__link.is-active .psn__dot { background: var(--orange); } /* ── Mobile scroll model: .topbar hides on mobile/tablet, but .nav stays sticky same as desktop (see the @media (max-width: 900px) block near .nav's definition), so .psn keeps sticking at var(--header-h) — just below .nav — on every screen size. The hamburger button itself uses its own position:fixed rule (see line ~806) which is independent of any of this, so it needs no special-casing here. ── */ @media (max-width: 900px) { section[id], .about-sec[id] { scroll-margin-top: 72px; } } /* ========================================================= PUBLIC EVENTS & NEWS — matches site (ath-hero + program-card) ========================================================= */ /* Section head row (left title + "View all" link) */ .section__head-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 6px; } .section__title--left { text-align: left; } .section__head-row .link-more { margin-top: 0; } .link-more--light { color: #fff; } /* Grid of post cards (events / news) */ .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; } /* Reuse the site's .program-card, extended for events/news */ .program-card__imgwrap { position: relative; display: block; overflow: hidden; } .program-card__imgwrap .program-card__img { background-color: var(--navy-soft); } .post-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; } .post-badge--muted { background: rgba(0,38,77,.78); } .post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12.5px; color: var(--body); margin-bottom: 12px; } .post-meta__date { color: var(--orange); font-weight: 700; } .post-meta__sep { opacity: .45; } /* Post variant: equal-height cards, link pinned to the bottom */ .program-card--post { text-decoration: none; color: inherit; } .program-card--post .program-card__body { display: flex; flex-direction: column; flex: 1; } .program-card--post .program-card__title { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .program-card--post .program-card__desc { line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .program-card--post .link-more { margin-top: auto; padding-top: 16px; } .program-card--post:hover .link-more span { transform: translateX(5px); } /* Cards sitting on a navy section ("Latest News") */ .section--navy .program-card { background: var(--navy-soft); box-shadow: 0 18px 40px rgba(0,0,0,.30); } .section--navy .program-card__title { color: #fff; } .section--navy .program-card__desc { color: var(--body-light); } .section--navy .post-meta { color: var(--body-light); } .post-empty { text-align: center; color: var(--body); margin-top: 40px; font-size: 15px; } .section--navy .post-empty { color: var(--body-light); } /* ── Event detail ── */ .detail__media { height: 420px; background-size: cover; background-position: center; position: relative; background-color: var(--navy); } .detail__media-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,38,77,.1), rgba(0,38,77,.5)); } .detail__wrap { max-width: 980px; } .detail__head { position: relative; margin-top: -70px; background: #fff; border-radius: var(--radius-lg); padding: 32px 38px; box-shadow: var(--shadow); } .detail__back { display: inline-flex; align-items: center; gap: 6px; color: var(--body); font-size: 13px; font-weight: 600; margin-bottom: 16px; } .detail__back:hover { color: var(--orange); } .detail__badge { position: static; display: inline-block; } .detail__cat { display: inline-block; margin-left: 8px; color: var(--navy); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .detail__title { font-family: var(--serif); font-weight: 800; color: var(--navy); font-size: clamp(26px, 4vw, 40px); line-height: 1.15; margin-top: 14px; } .detail__grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; margin-top: 40px; align-items: start; } .detail__prose { color: var(--ink); font-size: 15.5px; line-height: 1.8; } .detail__prose p { margin-bottom: 16px; } .detail__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; } .detail__gallery img { width: 100%; border-radius: var(--radius); } .detail__side { position: sticky; top: 150px; } .detail__facts { background: var(--bg-light); border-radius: var(--radius); padding: 22px 24px; } .detail__fact { padding: 12px 0; border-bottom: 1px solid rgba(0,38,77,.09); } .detail__fact:last-child { border-bottom: none; } .detail__fact-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--body); margin-bottom: 4px; } .detail__fact-value { color: var(--navy); font-weight: 600; font-size: 14.5px; } .detail__cta { width: 100%; justify-content: center; margin-top: 20px; } .detail__brochure { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--orange); font-weight: 700; font-size: 13px; } /* ── Article (news) detail ── */ .article__wrap { max-width: 820px; } .article__head { padding-top: 44px; } .article__title { font-family: var(--serif); font-weight: 800; color: var(--navy); font-size: clamp(28px, 4.5vw, 46px); line-height: 1.12; margin-top: 14px; } .article__byline { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--body); font-size: 13.5px; } .article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .article__tag { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 20px; } .article__cover { margin-top: 28px; } .article__cover img { width: 100%; border-radius: var(--radius-lg); } .article__body { margin-top: 28px; } .article__lead { font-size: 18px; line-height: 1.7; color: var(--navy); font-weight: 600; margin-bottom: 20px; } /* ── Responsive ── */ @media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .detail__grid { grid-template-columns: 1fr; gap: 28px; } .detail__side { position: static; } .detail__media { height: 300px; } .detail__head { padding: 26px 24px; margin-top: -50px; } } @media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } .detail__gallery { grid-template-columns: 1fr; } .section__head-row { flex-direction: column; align-items: flex-start; gap: 10px; } .detail__head { padding: 22px 20px; } } /* ========================================================= NEWS / BLOG PAGE — featured + latest list + grid + pager ========================================================= */ .blog { background: var(--bg-light); padding: 52px 0 80px; } .blog__head { text-align: center; margin-bottom: 6px; } .blog__title { font-family: var(--serif); font-weight: 800; color: var(--navy); font-size: clamp(30px, 4.5vw, 46px); line-height: 1.1; } /* Category sidebar + content layout */ .blog__layout { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 44px; margin-top: 30px; align-items: start; } .blog__layout .blog__top { margin-top: 0; } .blog__side { position: sticky; top: 150px; } .blog__side-title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 18px; margin-bottom: 8px; } .blog__cats { display: flex; flex-direction: column; margin: 0; padding: 0; } .blog__cats li { list-style: none; } .blog__cat { display: block; padding: 8px 0; color: var(--body); font-size: 14px; font-weight: 500; text-decoration: none; transition: color .2s; } .blog__cat:hover { color: var(--navy); } .blog__cat.is-active { color: var(--orange); font-weight: 700; } @media (max-width: 900px) { .blog__layout { grid-template-columns: 1fr; gap: 22px; margin-top: 24px; } .blog__side { position: static; } .blog__side-title { display: none; } .blog__cats { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; scrollbar-width: none; } .blog__cats::-webkit-scrollbar { display: none; } .blog__cat { white-space: nowrap; padding: 8px 15px; border: 1px solid rgba(0,38,77,.14); border-radius: 20px; } .blog__cat.is-active { border-color: var(--orange); background: var(--secondary-lt); } } /* Category pill with a dot */ .blog-cat { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--navy); background: #fff; border: 1px solid rgba(0,38,77,.12); padding: 4px 11px 4px 9px; border-radius: 20px; } .blog-cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; } .blog-cat--light { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .blog-meta { font-size: 12px; color: var(--body); } .blog-meta--light { color: rgba(255,255,255,.86); } /* Featured + Latest row */ .blog__top { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; margin-top: 34px; align-items: start; } .blog-feat__link { position: relative; display: block; min-height: 448px; border-radius: var(--radius-lg); overflow: hidden; background-size: cover; background-position: center; background-color: var(--navy); box-shadow: var(--shadow-soft); transition: box-shadow .3s var(--ease); } .blog-feat__link:hover { box-shadow: var(--shadow); } .blog-feat__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,20,45,0) 32%, rgba(0,18,40,.85) 100%); } .blog-feat__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; } .blog-feat__title { font-family: var(--serif); font-weight: 800; color: #fff; font-size: clamp(22px, 2.5vw, 31px); line-height: 1.18; } .blog-latest__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 22px; margin-bottom: 8px; } .blog-latest__list { display: flex; flex-direction: column; } .blog-latest__list li { list-style: none; } .blog-latest__item { display: flex; gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid rgba(0,38,77,.09); text-decoration: none; } .blog-latest__list li:last-child .blog-latest__item { border-bottom: none; } .blog-latest__thumb { width: 82px; height: 66px; border-radius: 12px; flex: none; background-size: cover; background-position: center; background-color: var(--navy-soft); } .blog-latest__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .blog-latest__name { font-weight: 600; color: var(--navy); font-size: 14px; line-height: 1.35; transition: color .2s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-latest__item:hover .blog-latest__name { color: var(--orange); } .blog-latest__empty { color: var(--body); font-size: 13.5px; padding: 12px 0; } /* More stories grid */ .blog-sec-head { margin-top: 56px; } .blog-sec-title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(22px, 2.6vw, 30px); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 22px; margin-bottom: 60px; } .blog-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); text-decoration: none; color: inherit; } .blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .blog-card__img { display: block; height: 190px; background-size: cover; background-position: center; background-color: var(--navy-soft); } /* Shown in any image slot when no cover image has been uploaded, instead of a random stock photo */ .img-ph { display: flex !important; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-light), var(--navy-soft)) !important; color: rgba(0,38,77,.28); } .blog-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; flex: 1; } .blog-card__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 18px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-card:hover .blog-card__title { color: var(--orange); } .blog-card__desc { color: var(--body); font-size: 13.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-card .blog-meta { margin-top: auto; } /* Pagination */ .blog-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 46px; } .blog-pager__num { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 10px; color: var(--navy); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .2s, color .2s; } .blog-pager__num:hover { background: rgba(0,38,77,.06); } .blog-pager__num.is-active { background: var(--navy); color: #fff; } .blog-pager__arrow { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(0,38,77,.14); color: var(--navy); text-decoration: none; transition: background .2s, border-color .2s; } .blog-pager__arrow:hover { background: rgba(0,38,77,.06); border-color: rgba(0,38,77,.28); } .blog-pager__arrow.is-disabled { opacity: .35; pointer-events: none; } @media (max-width: 900px) { .blog__top { grid-template-columns: 1fr; gap: 24px; } .blog-feat__link { min-height: 340px; } .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } .blog-feat__link { min-height: 300px; } .blog-feat__body { padding: 20px; } } /* ========================================================= NEWS LISTING — hero + featured grid + filtered card grid ========================================================= */ .nwl-hero { position: relative; padding: 72px 0 88px; text-align: center; overflow: hidden; background: linear-gradient(180deg, #EAF0F6 0%, #F3F6F9 55%, #fff 100%); } .nwl-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(560px 260px at 50% 0%, rgba(0,38,77,.06), transparent 70%); } .nwl-hero__title { position: relative; font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(26px, 3.6vw, 50px); line-height: 1.2; margin: 16px 0 10px; } .nwl-hero__sub { position: relative; color: var(--body); font-size: 14.5px; max-width: 460px; margin: 0 auto; line-height: 1.6; } .nwl { background: #fff; padding: 60px 0 84px; } .nwl-sec-title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 28px; } .nwl-tag { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .nwl-tag__left { display: flex; align-items: center; flex-wrap: wrap; } .nwl-tag__cat { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--navy); } .nwl-tag__time { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--body);} .nwl-tag__time svg { flex: none; color: var(--body); } .nwl-tag__views { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--body); flex: none; } .nwl-tag__views svg { flex: none; } .nwl-more { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); font-weight: 700; font-size: 13px; text-decoration: none; margin-top: auto; } .nwl-more svg { transition: transform .2s; } .nwl-more:hover { color: var(--orange); } .nwl-more:hover svg { transform: translateX(3px); } .nwl-feat-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 26px; margin-bottom: 64px; align-items: stretch; } .nwl-feat-grid--rev { grid-template-columns: 1.2fr 0.8fr; } /* Featured card: excerpt first, photo beneath — one continuous card */ .nwl-feat { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-soft); transition: box-shadow .25s, transform .25s; text-decoration: none; color: inherit; } .nwl-feat:hover { box-shadow: var(--shadow); transform: translateY(-4px); } .nwl-feat__body { padding: 24px 26px 20px; } .nwl-feat__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(19px, 2.2vw, 23px); line-height: 1.32; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nwl-feat:hover .nwl-feat__title { color: var(--orange); } .nwl-feat__desc { color: var(--body); font-size: 13.5px; line-height: 1.6; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nwl-feat__img { display: block; height: 280px; background-size: cover; background-position: center; background-color: var(--navy-soft); } .nwl-side { display: flex; flex-direction: column; gap: 22px; } .nwl-row { display: flex; gap: 20px; border-radius: 14px; flex: 1; box-shadow: var(--shadow-soft); background: #fff; padding: 18px; transition: box-shadow .25s, transform .25s; text-decoration: none; color: inherit; } .nwl-row:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .nwl-row__img { flex: none; width: 210px; border-radius: 12px; background-size: cover; background-position: center; background-color: var(--navy-soft); } .nwl-row__body { display: flex; flex-direction: column; min-width: 0; flex: 1; justify-content: center; } .nwl-row__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 17px; line-height: 1.32; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nwl-row:hover .nwl-row__title { color: var(--orange); } .nwl-row__desc { color: var(--body); font-size: 13.5px; line-height: 1.6; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 560px) { .nwl-row { flex-direction: column; } .nwl-row__img { width: 100%; height: 160px; } } .nwl-insights__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; } .nwl-filters { display: flex; gap: 8px; flex-wrap: wrap; } .nwl-filter { padding: 9px 20px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--navy); background: var(--bg-light); text-decoration: none; transition: background .2s, color .2s; } .nwl-filter:hover { background: rgba(0,38,77,.1); } .nwl-filter.is-active { background: var(--navy); color: #fff; } @media (max-width: 900px) { .nwl-feat-grid { grid-template-columns: 1fr; } .nwl-feat__img { min-height: 220px; } } /* ========================================================= NEWS ARTICLE (detail) — hero + meta bar + two-column body/sidebar ========================================================= */ .article-page { background: #fff; padding: 44px 0 80px; } .ap-wrap { max-width: 980px; margin: 0 auto; } .ap-back { display: inline-flex; align-items: center; gap: 6px; color: var(--body); font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 22px; } .ap-back:hover { color: var(--orange); } .ap-title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(26px, 4vw, 40px); line-height: 1.2; margin-bottom: 14px; } .ap-lead { font-size: 16px; color: var(--body); line-height: 1.65; max-width: 900px; margin-bottom: 26px; } .ap-infobar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; } .ap-infobar__venue { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); font-weight: 600; font-size: 13px; } .ap-infobar__venue svg { color: var(--orange); flex: none; } .ap-infobar__cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 99px; background: var(--orange); color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; transition: background .2s, transform .2s; } .ap-infobar__cta:hover { background: var(--orange-dark); transform: translateY(-1px); } .ap-bottom-cta { margin-top: 36px; padding: 13px 26px; font-size: 14px; } .ap-cover { border-radius: 18px; overflow: hidden; margin-bottom: 26px; } .ap-cover img { width: 100%; max-height: 600px; object-fit: cover; display: block; } .ap-metabar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 26px; margin-bottom: 34px; border-bottom: 1px solid rgba(0,38,77,.1); } .ap-metabar__author { display: flex; align-items: center; gap: 12px; } .ap-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy), #0E4C86); color: #fff; font-weight: 700; font-size: 13px; } .ap-metabar__date { color: var(--navy); font-weight: 600; font-size: 13.5px; } .ap-metabar__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ap-pill { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--orange); background: var(--secondary-lt); padding: 5px 11px; border-radius: 6px; } .ap-pill--sm { font-size: 9.5px; padding: 3px 8px; } .ap-date { font-size: 12.5px; color: var(--body); font-weight: 500; } .ap-icons { display: flex; align-items: center; gap: 8px; } .ap-icon-btn, .ap-socials a { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 3px; background: var(--bg-light); color: var(--navy); border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; transition: background .2s, color .2s, transform .2s; } .ap-icon-btn { width: auto; min-width: 30px; padding: 0 9px; font-size: 12px; font-weight: 700; } .ap-icon-btn:hover, .ap-socials a:hover { background: var(--orange); color: #fff; transform: translateY(-2px); } .ap-like.is-liked { background: var(--orange); color: #fff; } .ap-like svg { transition: transform .15s var(--ease); } .ap-like:active svg { transform: scale(1.3); } .ap-share.is-copied { background: #12B76A; color: #fff; } .ap-like-form { margin: 0; padding: 0; } .ap-share-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--body); } .ap-socials { display: flex; gap: 8px; } .ap-two { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 48px; align-items: start; } .ap-prose { color: var(--ink); font-size: 15.5px; line-height: 1.85; } .ap-prose p { margin-bottom: 18px; } .ap-prose p:last-child { margin-bottom: 0; } .ap-brochure { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--orange); font-weight: 700; font-size: 13px; text-decoration: none; } .ap-brochure:hover { text-decoration: underline; } .ap-gallery-btn { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 12px 22px; border-radius: 11px; border: 1.5px solid rgba(0,38,77,.14); background: #fff; color: var(--navy); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s; } .ap-gallery-btn svg { color: var(--orange); flex: none; } .ap-gallery-btn:hover { background: var(--secondary-lt); border-color: var(--orange); color: var(--orange); transform: translateY(-1px); } .ap-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 28px 0; } .ap-gallery[hidden] { display: none; } .ap-gallery a { display: block; border-radius: 12px; overflow: hidden; } .ap-gallery img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform .3s var(--ease); } .ap-gallery a:hover img { transform: scale(1.04); } .ap-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; } .ap-tag { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 20px; } /* Sidebar: Popular — image-top mini cards, same language as the grid cards */ .ap-side__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 19px; margin-bottom: 20px; } .ap-side__list { display: flex; flex-direction: column; gap: 20px; } .ap-relcard { display: flex; flex-direction: column; text-decoration: none; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow-soft); transition: box-shadow .2s, transform .2s; } .ap-relcard:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .ap-relcard__img { display: block; height: 120px; background-size: cover; background-position: center; background-color: var(--navy-soft); } .ap-relcard__body { display: flex; flex-direction: column; padding: 14px 16px 16px; min-width: 0; } .ap-relcard__title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 14px; line-height: 1.35; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ap-relcard:hover .ap-relcard__title { color: var(--orange); } .ap-relcard__desc { color: var(--body); font-size: 12px; line-height: 1.55; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 860px) { .ap-two { grid-template-columns: 1fr; } .ap-metabar { flex-direction: column; align-items: flex-start; gap: 16px; } } /* ========================================================= EVENTS — courses-dashboard style (featured + tabs + grid) ========================================================= */ .cx { background: #fff; padding: 46px 0 78px; } .cx__top { margin-bottom: 26px; } .cx__pagetitle { font-family: var(--serif); font-weight: 800; color: var(--navy); font-size: clamp(28px, 4vw, 42px); line-height: 1.1; } /* Filter tabs */ .cx-tabs { display: flex; align-items: center; gap: 26px; margin: 30px 0 24px; border-bottom: 1px solid rgba(0,38,77,.1); scroll-margin-top: calc(var(--header-h) + 14px); } .cx-tab { position: relative; padding: 0 2px 14px; color: var(--body); font-weight: 600; font-size: 15px; text-decoration: none; transition: color .2s; background: none; border: none; cursor: pointer; font-family: inherit; } .cx-tab:hover { color: var(--navy); } .cx-tab.is-active { color: var(--navy); } .cx-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; background: var(--orange); border-radius: 2px; } .cx-empty { display: none; } @media (max-width: 760px) { .cx-tabs { gap: 18px; overflow-x: auto; scrollbar-width: none; } .cx-tabs::-webkit-scrollbar { display: none; } .cx-tab { white-space: nowrap; } } /* ========================================================= HOME — Featured Upcoming Events list (theatre-style rows) ========================================================= */ .evl { max-width: 920px; margin: 44px auto 0; } .evl__row { display: flex; align-items: center; gap: 28px; padding: 26px 0; border-bottom: 1px solid rgba(0,38,77,.12); } .evl__row:first-child { border-top: 1px solid rgba(0,38,77,.12); } /* Date block — bordered mini-card with dark time strip footer */ .evl__date { display: flex; flex-direction: column; align-items: center; flex: none; width: 74px; border: 1px solid rgba(0,38,77,.16); border-radius: 8px; overflow: hidden; background: var(--bg-light); padding-top: 9px; } .evl__mon { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--body); } .evl__day { font-family: var(--serif); font-size: 28px; font-weight: 800; color: var(--navy); line-height: 1.05; } .evl__yr { font-size: 10px; color: var(--body); margin-bottom: 8px; } .evl__time { width: 100%; text-align: center; background: var(--navy); color: #fff; font-size: 10px; font-weight: 700; padding: 5px 4px; white-space: nowrap; } /* Info */ .evl__info { flex: 1; min-width: 0; } .evl__cat { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); } .evl__title { font-family: var(--serif); font-size: clamp(18px, 2vw, 23px); font-weight: 700; line-height: 1.25; margin-top: 4px; } .evl__title a { color: var(--navy); text-decoration: none; transition: color .2s; } .evl__title a:hover { color: var(--orange); } .evl__sub { color: var(--body); font-size: 13px; margin-top: 4px; } .evl__more { color: var(--navy); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .evl__more:hover { color: var(--orange); } .evl__img { position: relative; flex: none; width: 220px; height: 140px; border-radius: 6px; background-size: cover; background-position: center; background-color: var(--navy-soft); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; } .evl__img:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); } /* View all button */ .evl__all { text-align: center; margin-top: 36px; } .evl__allbtn { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(0,38,77,.35); color: var(--navy); font-size: 13px; font-weight: 700; padding: 12px 26px; border-radius: 8px; text-decoration: none; transition: background .2s, color .2s, border-color .2s; } .evl__allbtn:hover { background: var(--navy); color: #fff; border-color: var(--navy); } @media (max-width: 700px) { .evl__row { flex-wrap: wrap; gap: 16px 20px; } .evl__img { order: -1; width: 100%; height: 170px; } .evl__date { width: 64px; } .evl__info { flex: 1; } } /* ========================================================= EVENT CARDS — dark carousel/grid cards (home + events page) ========================================================= */ #events.section--light { background: #ffffff; } .evc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: nowrap; } .evc__head > div:first-child { flex: 1 1 auto; min-width: 0; } .evc__head .section__title, .evc__head .section__sub { margin-bottom: 0; text-align: left; } .evc__head .section__sub { margin: 16px 0 0; } .evc__nav { display: flex; align-items: center; gap: 10px; flex: none; } .evc__navbtn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(0,38,77,.18); background: #fff; color: var(--navy); cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .evc__navbtn:hover { background: var(--navy); border-color: var(--navy); color: #fff; } .evc__navbtn:disabled { opacity: .35; cursor: default; } .evc__navbtn:disabled:hover { background: #fff; color: var(--navy); border-color: rgba(0,38,77,.18); } /* Horizontal scroll track (home teaser strip) */ .evc__track { display: flex; gap: 22px; margin-top: 32px; padding-bottom: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .evc__track::-webkit-scrollbar { display: none; } .evc__track .evc-card { flex: none; width: 320px; scroll-snap-align: start; } /* Wrapping grid (full events listing page) */ .evc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; margin-top: 32px; } /* Card — white "ticket" card with a navy ADMIT ONE stub on the right */ .evc-card { position: relative; display: flex; align-items: stretch; background: #fff; border: 1px solid rgba(0,38,77,.1); border-radius: var(--radius-lg); min-height: 230px; box-shadow: var(--shadow-soft); overflow: hidden; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .2s, transform .2s; } .evc-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .evc-card__main { flex: 1; min-width: 0; padding: 20px 18px 18px; display: flex; flex-direction: column; } .evc-card__badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 14px; } .evc-card__badge { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .evc-card__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; box-shadow: 0 0 0 5px rgba(239,126,26,.2); } .evc-card__badge--ongoing { color: var(--orange); } .evc-card__badge--past { color: var(--body); } .evc-card__tag { display: inline-flex; align-items: center; background: var(--bg-light); color: var(--body); font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 14px; } .evc-card__title { font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.32; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; } .evc-card:hover .evc-card__title { color: var(--orange); } .evc-card__sub { color: var(--body); font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .evc-card__divider { border-top: 1px dashed rgba(0,38,77,.2); margin-top: auto; margin-bottom: 14px; } .evc-card__foot { display: flex; align-items: center; } .evc-card__date { color: var(--navy); font-size: 12.5px; font-weight: 700; } .evc-card__arrow { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #fff; transition: background .2s, transform .2s; } .evc-card:hover .evc-card__arrow { background: var(--orange-dark); transform: translate(1px,-1px); } /* Ticket stub — "ADMIT ONE" strip with the arrow button and a single torn-edge notch cut into the middle of the seam */ .evc-card__stub { position: relative; flex: none; width: 64px; background: var(--navy); display: flex; flex-direction: column; align-items: center; padding: 22px 0 16px; } .evc-card__stub::before { content: ""; position: absolute; top: 50%; left: -11px; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: #fff; } .evc-card__stub-text { flex: 1; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); color: rgba(255,255,255,.9); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; } .evc-card__stub .evc-card__arrow { margin-top: 14px; } @media (max-width: 700px) { .evc__track .evc-card { width: 270px; } } /* ========================================================= EVENT DETAIL — hero image + overlapping split ticket card ========================================================= */ .evd { background: #fff; padding-bottom: 70px; } .evd__hero { background-color: var(--navy); } /* Overlapping split card */ .evd__card-wrap { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(50%); /* exactly half own height, any content/viewport */ z-index: 5; } .evd__card { position: relative; display: grid; grid-template-columns: 1.55fr 1fr; background: #fff; border-radius: 14px; box-shadow: 0 24px 54px rgba(0,38,77,.16); overflow: visible; } .evd__main { padding: 34px 38px 30px; } .evd__title { font-family: var(--serif); font-weight: 800; color: var(--navy); font-size: clamp(24px, 3vw, 34px); line-height: 1.15; margin-bottom: 22px; } .evd__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .evd__field { margin-bottom: 18px; } .evd__label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--body); margin-bottom: 6px; } .evd__label svg { color: var(--orange); flex: none; } .evd__value { display: block; color: var(--navy); font-weight: 600; font-size: 14.5px; } .evd__value--link { color: var(--orange); } .evd__time { color: var(--navy); font-weight: 700; font-size: 14px; padding-top: 20px; } .evd__share { margin-top: 8px; } .evd__socials { display: flex; gap: 9px; } .evd__socials a { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,38,77,.06); color: var(--navy); transition: background .2s, color .2s; } .evd__socials a:hover { background: var(--orange); color: #fff; } /* Right CTA half — dashed ticket divider with punched notches */ .evd__cta { position: relative; padding: 34px 32px 30px; border-left: 2px dashed rgba(0,38,77,.18); display: flex; flex-direction: column; align-items: flex-start; } .evd__notch { display: none; } .evd__cta-title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 20px; margin-bottom: 8px; } .evd__cta-text { color: var(--body); font-size: 13px; line-height: 1.6; margin-bottom: 16px; } .evd__cta-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--orange); color: #fff; font-size: 13px; font-weight: 700; padding: 11px 26px; border-radius: 24px; text-decoration: none; box-shadow: 0 10px 22px rgba(239,126,26,.34); transition: background .2s, transform .2s; } .evd__cta-btn:hover { background: var(--orange-dark); transform: translateY(-1px); } .evd__or { display: block; margin: 14px 0 10px; font-size: 11px; font-weight: 700; color: var(--body); } .evd__brochure { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .evd__brochure:hover { color: var(--orange); } /* Body: details + organizer */ .evd__after-card { padding-top: 140px; } .evd__body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; margin-top: 44px; align-items: start; } @media (max-width: 900px) { .evd__after-card { padding-top: 180px; } } /* Events Details / Photos — cards, modern */ .evd__infobox { background: #fff; border-radius: 16px; padding: 28px 30px; margin-bottom: 26px; box-shadow: var(--shadow-soft); transition: box-shadow .25s; } .evd__infobox:hover { box-shadow: var(--shadow); } .evd__infobox--plain { background: none; padding: 0; box-shadow: none; } .evd__infobox--plain:hover { box-shadow: none; } .evd__sec { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 20px; margin: 0 0 16px; } .evd__sec--underline { padding-bottom: 14px; border-bottom: 2px solid rgba(0,38,77,.12); } .evd__sec-bar { width: 5px; height: 20px; border-radius: 3px; background: linear-gradient(180deg, var(--orange), #F79009); flex: none; } .evd__prose { color: var(--body); font-size: 13.5px; line-height: 1.85; } .evd__prose p { margin-bottom: 14px; } .evd__prose p:last-child { margin-bottom: 0; } @media (max-width: 560px) { .evd__infobox { padding: 22px 20px; } } .evd__org { background: #fff; border: 1px solid rgba(0,38,77,.1); border-radius: 12px; padding: 22px 24px; box-shadow: var(--shadow-soft); } .evd__org-head { display: flex; align-items: center; gap: 12px; margin: 10px 0 16px; } .evd__org-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; font-weight: 700; } .evd__org-name { font-weight: 700; color: var(--navy); font-size: 13.5px; } .evd__org-item { padding: 9px 0; color: var(--navy); font-weight: 600; font-size: 13.5px; } .evd__org-item a { color: inherit; text-decoration: none; transition: color .2s; } .evd__org-item a:hover { color: var(--orange); } .evd__org-item span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--body); margin-bottom: 3px; } @media (max-width: 900px) { .evd__card { grid-template-columns: 1fr; -webkit-mask: none; mask: none; } .evd__cta { border-left: none; border-top: 2px dashed rgba(0,38,77,.18); } .evd__body { grid-template-columns: 1fr; gap: 28px; } .evd__main { padding: 24px 22px 20px; } .evd__cta { padding: 24px 22px; } } /* ========================================================= EVENT DETAIL CARD — 3D navy theme override ========================================================= */ @keyframes evd-rise { from { opacity: 0; transform: perspective(1100px) translateY(46px) rotateX(7deg); } to { opacity: 1; transform: perspective(1100px) translateY(0) rotateX(0deg); } } .evd__card { --notch-r: 14px; --notch-x: 60.784%; /* matches the 1.55fr / 1fr column split */ background: linear-gradient(135deg, #00264D 0%, #0A3D6E 58%, #0E4C86 100%); transform-style: preserve-3d; animation: evd-rise .7s var(--ease) both, evd-halo 3.8s ease-in-out infinite; transition: transform .35s var(--ease), box-shadow .35s var(--ease); -webkit-mask: radial-gradient(circle var(--notch-r) at var(--notch-x) 0, #0000 98%, #000 101%) exclude, radial-gradient(circle var(--notch-r) at var(--notch-x) 100%, #0000 98%, #000 101%) exclude, linear-gradient(#000 0 0); mask: radial-gradient(circle var(--notch-r) at var(--notch-x) 0, #0000 98%, #000 101%) exclude, radial-gradient(circle var(--notch-r) at var(--notch-x) 100%, #0000 98%, #000 101%) exclude, linear-gradient(#000 0 0); } .evd__card:hover { transform: perspective(1100px) translateY(-6px) rotateX(1.2deg); } /* soft glow accents inside the card */ .evd__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px 200px at 88% -10%, rgba(239,126,26,.22), transparent 60%), radial-gradient(380px 220px at -6% 110%, rgba(46,144,250,.16), transparent 60%); } /* soft external halo glow that swaps sides continuously — orange / blue, like a neon border glow */ @keyframes evd-halo { 0%, 100% { box-shadow: 0 30px 60px -18px rgba(0,20,45,.55), 0 12px 26px rgba(0,38,77,.28), inset 0 1px 0 rgba(255,255,255,.18), -60px 0 100px -24px rgba(239,126,26,.6), 60px 0 100px -24px rgba(46,144,250,.5); } 50% { box-shadow: 0 30px 60px -18px rgba(0,20,45,.55), 0 12px 26px rgba(0,38,77,.28), inset 0 1px 0 rgba(255,255,255,.18), 60px 0 100px -24px rgba(239,126,26,.6), -60px 0 100px -24px rgba(46,144,250,.5); } } /* continuous highlight travelling all the way around the card's border, same duration/timing as the hero's own auto-running sheen (.evd__hero::after) so they run in sync */ @property --card-angle { syntax: ''; initial-value: 0deg; inherits: false; } .evd__card { --card-angle: 0deg; } .evd__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--card-angle), transparent 0deg, transparent 270deg, var(--orange) 320deg, #fff 335deg, var(--orange) 350deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: card-border-spin 3.8s linear infinite; pointer-events: none; } @keyframes card-border-spin { to { --card-angle: 360deg; } } .evd__title { color: #fff; } /* Date / time — modern glass chips with orange icon tiles */ .evd__chips { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; } .evd__chip { display: inline-flex; align-items: center; gap: 11px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 13px; padding: 10px 16px 10px 10px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .25s, transform .25s; } .evd__chip:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); } .evd__chip-ico { width: 38px; height: 38px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--orange), #F79009); color: #fff; box-shadow: 0 8px 16px -6px rgba(239,126,26,.6); } .evd__chip-txt { display: flex; flex-direction: column; } .evd__chip-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); } .evd__chip-value { color: #fff; font-weight: 700; font-size: 14px; margin-top: 2px; white-space: nowrap; } .evd__addr { display: flex; align-items: center; gap: 8px; color: #FFB36B; font-weight: 600; font-size: 14px; } .evd__addr svg { flex: none; color: var(--orange); } /* Right half on navy */ .evd__cta { border-left-color: rgba(255,255,255,.25); align-items: stretch; } .evd__cta-btn { justify-content: center; gap: 9px; width: 100%; background: linear-gradient(135deg, var(--orange), #F79009); border-radius: 13px; padding: 14px 22px; font-size: 14px; box-shadow: 0 14px 28px -8px rgba(239,126,26,.65); position: relative; overflow: hidden; } .evd__cta-btn::after { content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .55s var(--ease); } .evd__cta-btn:hover::after { left: 130%; } .evd__cta-btn:hover { transform: translateY(-2px); } .evd__cal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 12px; padding: 12px 20px; border-radius: 13px; border: 1.5px solid rgba(255,255,255,.35); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; background: rgba(255,255,255,.06); transition: background .25s, border-color .25s, transform .25s; } .evd__cal-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); transform: translateY(-2px); } .evd__cal-btn svg { color: var(--orange); } .evd__share { margin-top: 20px; } .evd__share-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 9px; } .evd__socials a { background: rgba(255,255,255,.1); color: #fff; } .evd__socials a:hover { background: var(--orange); color: #fff; transform: translateY(-2px); } .evd__brochure { margin-top: 16px; color: rgba(255,255,255,.85); } .evd__brochure:hover { color: var(--orange); } @media (max-width: 900px) { .evd__cta { border-top-color: rgba(255,255,255,.25); } .evd__chip-value { white-space: normal; } } /* ── Event hero: brand-color band with tags + summary (no image) ── */ .evd__hero { height: auto; position: relative; overflow: visible; background: radial-gradient(620px 300px at 86% -8%, rgba(239,126,26,.28), transparent 58%), radial-gradient(560px 320px at -4% 112%, rgba(46,144,250,.2), transparent 58%), linear-gradient(130deg, #001E3D 0%, #00264D 55%, #0A3D6E 100%); padding: 64px 0 40px; } .evd__hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(0,38,77,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,38,77,.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(115deg, #000 20%, transparent 78%); -webkit-mask-image: linear-gradient(115deg, #000 20%, transparent 78%); } .evd__hero-inner { position: relative; z-index: 2; } .evd__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .evd__tag { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); background: rgba(0,38,77,.06); border: 1px solid rgba(0,38,77,.14); padding: 7px 15px; border-radius: 20px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .evd__tag--accent { background: linear-gradient(135deg, var(--orange), #F79009); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -6px rgba(239,126,26,.55); } .evd__summary { color: var(--body); font-size: 15.5px; line-height: 1.7; max-width: 680px; } @media (max-width: 900px) { .evd__hero { padding: 44px 0 260px; } } /* ── Event hero: centered tags + larger summary text (card unchanged) ── */ .evd__hero-inner { text-align: center; } .evd__tags { justify-content: center; } .evd__summary { margin: 0 auto; font-size: clamp(24px, 3vw, 34px); line-height: 1.4; font-family: var(--serif); font-weight: 700; color: var(--navy); max-width: 900px; } /* ── Event poster card + lightbox (scrolls one image at a time when there are multiple posters) ── */ .evd__poster { position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-soft); margin-bottom: 30px; height: 380px; } .evd__poster-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .evd__poster-track::-webkit-scrollbar { display: none; } .evd__poster-slide { position: relative; display: block; flex: 0 0 100%; height: 100%; scroll-snap-align: start; cursor: zoom-in; } .evd__poster-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .4s var(--ease); } .evd__poster-slide:hover img { transform: scale(1.025); } @media (max-width: 560px) { .evd__poster { height: 260px; } } .evd__poster-zoom { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; background: rgba(0,20,45,.72); color: #fff; font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 20px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: .92; transition: opacity .2s, background .2s; pointer-events: none; } .evd__poster-slide:hover .evd__poster-zoom { opacity: 1; background: rgba(0,20,45,.88); } .evd__poster-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 44px; border-radius: 8px; border: none; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background .2s, transform .15s; box-shadow: 0 2px 8px rgba(0,0,0,.25); } .evd__poster-nav:hover { background: var(--orange); } .evd__poster-nav:active { transform: translateY(-50%) scale(.94); } .evd__poster-nav--prev { left: 12px; } .evd__poster-nav--next { right: 12px; } @media (max-width: 560px) { .evd__poster-nav { width: 28px; height: 36px; } } .evd__poster-dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; } .evd__poster-dots button { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: background .2s, transform .2s; } .evd__poster-dots button.is-active { background: #fff; transform: scale(1.3); } .evd__gallery a:hover img { transform: scale(1.04); } .lbx { position: fixed; inset: 0; z-index: 400; background: rgba(0,10,24,.93); display: flex; align-items: center; justify-content: center; cursor: zoom-out; animation: lbx-in .22s ease; } .lbx img { max-width: 94vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: lbx-pop .25s var(--ease); } @keyframes lbx-in { from { opacity: 0; } to { opacity: 1; } } @keyframes lbx-pop { from { transform: scale(.92); opacity: .4; } to { transform: scale(1); opacity: 1; } } .lbx__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 56px; border-radius: 8px; border: none; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, transform .15s; box-shadow: 0 2px 10px rgba(0,0,0,.35); } .lbx__nav:hover { background: var(--orange); } .lbx__nav:active { transform: translateY(-50%) scale(.94); } .lbx__nav--prev { left: 18px; } .lbx__nav--next { right: 18px; } @media (max-width: 560px) { .lbx__nav { width: 34px; height: 44px; } .lbx__nav--prev { left: 8px; } .lbx__nav--next { right: 8px; } } /* ── Event page refinements: half-out card, smaller serif summary, blue-orange hero with auto sheen, brochure button below organizer ── */ .evd__hero { padding: 56px 0 165px; background: var(--bg-light); } /* auto-running sheen sweep (same as the Register button hover effect) */ .evd__hero::after { content: ""; position: absolute; top: 0; left: -60%; width: 42%; height: 100%; background: linear-gradient(100deg, transparent, rgba(0,38,77,.05), transparent); transform: skewX(-18deg); pointer-events: none; animation: evd-sheen 3.8s linear infinite; } @keyframes evd-sheen { to { left: 140%; } } /* summary: smaller, Playfair serif */ .evd__summary { font-family: var(--serif); font-size: clamp(17px, 1.9vw, 23px); font-weight: 600; line-height: 1.5; color: var(--navy); } /* right column: organizer card + brochure "ticket stub" card below it */ .evd__dl { display: flex; align-items: center; gap: 13px; margin-top: 16px; width: 100%; padding: 15px 18px; border-radius: 13px; background: #fff; border: 1px solid rgba(0,38,77,.1); color: var(--navy); text-decoration: none; box-shadow: var(--shadow-soft); position: relative; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; } .evd__dl:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--orange); } .evd__dl-ico { width: 38px; height: 38px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--secondary-lt, #FDECD9); color: var(--orange); transition: background .25s, color .25s, transform .25s; } .evd__dl:hover .evd__dl-ico { background: var(--orange); color: #fff; transform: scale(1.06); } .evd__dl-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; } .evd__dl-title { font-size: 13.5px; font-weight: 700; } .evd__dl-sub { font-size: 11px; color: var(--body); margin-top: 2px; } .evd__dl-arrow { flex: none; color: var(--body); transition: transform .25s var(--ease), color .25s; } .evd__dl:hover .evd__dl-arrow { transform: translateX(3px); color: var(--orange); } @media (max-width: 900px) { .evd__hero { padding: 40px 0 260px; } } /* Events listing page: the ticket card sits fully inside the hero band instead of straddling its bottom edge, so the hero just needs to be taller/roomier rather than leaving space for an overlap. */ .evd--listing .evd__hero { padding: 64px 0 72px; } .evd--listing .evd__hero-inner { margin-bottom: 28px; } .evd--listing .evd__card-wrap { position: static; transform: none; } .evd--listing { padding-bottom: 0; } @media (max-width: 900px) { .evd--listing .evd__hero { padding: 48px 0 56px; } } /* "More Events" section on the event-detail page: white background, less top padding */ #more-events { background: #fff; padding-top: 32px; } /* ===================== Student Life 2 (residential2.html) ===================== */ .r2-sec { padding: 64px 0; } .r2-sec--alt { background: var(--bg-light); } .r2-thematic__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 32px; } .r2-thematic__text p { font-size: 15px; color: var(--body); line-height: 1.85; } .r2-thematic__img { border-radius: 16px; overflow: hidden; height: 340px; } .r2-thematic__img img { width: 100%; height: 100%; object-fit: cover; } .r2-moments__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; } .r2-moments__title, .r2-moments__sub { text-align: left; margin-bottom: 0; } .r2-moments__sub { margin-top: 8px; } .r2-filters { display: flex; gap: 10px; flex-wrap: wrap; } .r2-filters .nwl-filter { border: none; cursor: pointer; font-family: inherit; border-radius: 8px; } .r2-moments { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 270px 270px 340px; gap: 16px; grid-template-areas: "big top" "big bottom" "wide wide"; } .r2-moments > div { border-radius: 16px; background-size: cover; background-position: center; } .r2-moments__big { grid-area: big; } .r2-moments__top { grid-area: top; } .r2-moments__bottom { grid-area: bottom; } .r2-moments__wide { grid-area: wide; } @media (max-width: 800px) { .r2-moments { grid-template-columns: 1fr; grid-template-rows: 260px 200px 200px 260px; grid-template-areas: "big" "top" "bottom" "wide"; } } .r2-dot-list li { position: relative; padding-left: 16px; color: var(--body); font-weight: 400; } .r2-dot-list li::before { content: "\00b7"; position: absolute; left: 0; color: var(--body); font-weight: 700; } #sports-days .res-club { display: flex; flex-direction: column; } #sports-days .res-club__grade { margin-top: auto; padding-top: 16px; } #clubs .res-club { display: flex; flex-direction: column; } #clubs .res-club__grade { margin-top: auto; padding-top: 16px; } .r2-admissions.section--light { background: var(--bg-light); } .r2-mun__title { font-family: var(--serif); font-size: clamp(24px, 3vw, 38px); font-weight: 800; margin-bottom: 14px; } .r2-mun__text { font-size: 14.5px; color: var(--body-light); line-height: 1.8; max-width: 780px; margin-bottom: 40px; } .r2-mun__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .r2-mun__grid--sm { grid-template-columns: repeat(3, 1fr); } .r2-mun__ph { border-radius: 16px; height: 435px; background-size: cover; background-position: center; } .r2-mun__grid--sm .r2-mun__ph { height: 380px; } .r2-fest__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 32px; } .r2-fest__lg { border-radius: 16px; background-size: cover; background-position: center; min-height: 380px; } .r2-fest__sm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .r2-fest__sm { border-radius: 16px; background-size: cover; background-position: center; min-height: 182px; } @media (max-width: 900px) { .r2-thematic__grid { grid-template-columns: 1fr; } .r2-thematic__img { height: 260px; } .r2-fest__grid { grid-template-columns: 1fr; } .r2-fest__lg { min-height: 260px; } } @media (max-width: 700px) { .r2-mun__grid { grid-template-columns: 1fr; } .r2-mun__grid--sm { grid-template-columns: 1fr 1fr; } .r2-mun__ph { height: 260px; } .r2-mun__grid--sm .r2-mun__ph { height: 200px; } } /* ===================== Contact Us (contact.html) ===================== */ .contact-link { color: var(--navy); text-decoration: none; } .contact-link:hover { color: var(--orange); } .contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: stretch; } .contact-form-card { background: #fff; border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow-soft); } .contact-form-card__title { text-align: left; margin-bottom: 8px; } .contact-form-card__sub { font-size: 14px; color: var(--body); margin-bottom: 28px; } .contact-form { display: flex; flex-direction: column; gap: 18px; } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .contact-field { display: flex; flex-direction: column; gap: 7px; } .contact-field label { font-size: 12.5px; font-weight: 700; color: var(--navy); letter-spacing: .03em; text-transform: uppercase; } .contact-field input, .contact-field textarea { font-family: inherit; font-size: 14.5px; color: var(--navy); border: 1.5px solid rgba(0,38,77,.14); border-radius: 10px; padding: 12px 14px; background: var(--bg-light); transition: border-color .2s, background .2s; } .contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: var(--orange); background: #fff; } .contact-field textarea { resize: vertical; min-height: 110px; } .contact-field__error { font-size: 12px; color: #C0392B; } .contact-map { border-radius: var(--radius); overflow: hidden; min-height: 340px; box-shadow: var(--shadow-soft); } .contact-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .contact-form-card { padding: 28px 22px; } .contact-form__row { grid-template-columns: 1fr; } .contact-map { min-height: 280px; } .contact-map iframe { min-height: 280px; } }