/* ============================================================ Imperial College of Engineering — shared site styles Fable overhaul: one mobile-first system. Direction: "drafting film over the blueprint," recomposed. Deep-navy blueprint fields (header, heroes, contact, footer) carry the institution; between them a quiet warm-paper document. The final-loaded ICE system pairs an institutional display serif with a neutral sans and one shared hierarchy for editorial and utility roles. Crimson acts (CTAs, live chips); terracotta annotates (kickers, icons, rules); navy structures; paper reads. Architecture: 1 tokens · 2 base + a11y · 3 rails · 4 type roles 5 buttons · 6 navy field · 7 header (contact row, nav, drawer, dropdowns, theme, ribbon) · 8 heroes · 9 news panel 10 quickbar · 11 admission welcome · 12 fact strips 13 sections + statement · 14 cards + media · 15 ledgers 16 content components · 17 footer · 18 sticky CTA 19 wide-screen composition · 20 reduced motion Base styles target a ~360px column; @media (min-width:*) adds complexity. Content-driven breakpoints: 560 760 1000 1181 1440. Nothing essential is hidden by CSS or animation. ============================================================ */ /* ---------- 1 · tokens ---------- */ :root{ /* ── ICE Brand Palette ───────────────────────────────────────────────── Source: ICE Brand Guidelines §02 — Color Palette Navy leads. Crimson = CTAs. Terracotta = highlights. Never crimson + terracotta side-by-side at equal size. */ /* PRIMARY */ --navy:#13234B; /* Primary — headlines, nav, primary UI */ --navy-deep:#0C1A38; /* Deeper navy for overlays / hero fields */ --navy-ink:#070D1E; /* Near-black — footers, deepest surfaces */ /* ACCENTS */ --crimson:#C41E3A; /* CTAs, emphasis, LIVE badge */ --crimson-hover:#A81830; /* Hover state for crimson buttons */ --crimson-soft:#E8526A; /* Lighter tint for use on dark backgrounds */ --terracotta:#D9702C; /* Highlights, kickers, photo overlays */ --terracotta-soft:#E8915A;/* Lighter tint for text on dark surfaces */ /* NEUTRALS */ --bg:#FAF7F2; /* Warm off-white — page background */ --card:#FFFFFF; /* Card / surface background */ --field:#F3EFE9; /* Input / field background */ --ink:#17181C; /* Primary text */ --slate:#6B6F76; /* Secondary / supporting text */ --hairline:#E7E1D6; /* Borders, rules, dividers */ --surface-tint:#F3EFE9; --band-bg:#F3EFE9; /* Alternating section tint */ /* Stable navy for dark-mode surfaces (never overridden by theme) */ --navy-mid:#13234B; /* ── Hull ↔ ICE brand token aliases ─────────────────────────────────── hull-system.css and course-typography.css reference --hull-* tokens from a prior design system. These aliases map them to the canonical ICE palette so every --hull-* reference resolves correctly. §02: lime has no ICE equivalent → falls back to warm off-white. */ --hull-blue:var(--navy); /* #13234B */ --hull-blue-dark:var(--navy-deep); /* #0C1A38 */ --hull-blue-light:var(--bg); /* #FAF7F2 warm off-white */ --hull-black:var(--navy-ink); /* #070D1E deepest navy */ --hull-grey:var(--band-bg); /* #F3EFE9 warm section tint */ --hull-lime:var(--bg); /* no ICE lime — use bg */ /* Accent ink: text colour on crimson/terracotta fills */ --accent-ink:#FFFFFF; /* Sweep animation dim colour */ --sweep-dim:rgba(19,35,75,.45); /* glass — for surfaces floating over dark media */ --glass:rgba(255,255,255,.07); --glass-strong:rgba(255,255,255,.13); --glass-brd:rgba(255,255,255,.2); --glass-hi:rgba(255,255,255,.38); /* Surface shadow */ --surface-shadow:0 10px 28px rgba(19,35,75,.08); /* header chrome — navy glass in both themes */ --header-tint:rgba(19,35,75,.72); --header-tint-solid:rgba(19,35,75,.92); --header-tint-scrolled:rgba(12,26,56,.9); --header-tint-scrolled-solid:rgba(12,26,56,.97); --header-scrim:linear-gradient(180deg,rgba(7,13,30,.5),rgba(7,13,30,.2) 56%,transparent); --header-ink:#fff; --header-ink-soft:rgba(255,255,255,.82); --header-ink-dim:rgba(255,255,255,.62); --header-eyebrow:var(--terracotta-soft); --header-hair:rgba(255,255,255,.14); --header-glass-bg:rgba(255,255,255,.07); --header-glass-bg-strong:rgba(255,255,255,.13); --header-focus-ring:#fff; --chrome:rgba(12,26,56,.8); --chrome-solid:rgba(12,26,56,.96); /* geometry */ --u:8px; --r-s:4px; --r-m:8px; --r-l:12px; --gutter:clamp(20px,4.5vw,72px); --contact-h:44px; --nav-main-h:76px; --tu-bar-h:30px; --nav-h:calc(var(--contact-h) + var(--nav-main-h) + var(--tu-bar-h)); /* type — system font stack per §03 */ --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif; --display:Georgia,"Times New Roman",ui-serif,serif; --news-serif:var(--display); --t-display:clamp(2.75rem,1.6rem + 5vw,4.75rem); --t-h1:clamp(2.125rem,1.4rem + 3.2vw,3.5rem); --t-h2:clamp(1.625rem,1.2rem + 1.9vw,2.5rem); --t-h3:clamp(1.1875rem,1.05rem + .6vw,1.5rem); --t-body:1rem; --t-body-lg:1.0625rem; --t-meta:.8125rem; --t-micro:.75rem; /* rhythm */ --sec:clamp(52px,5vw + 24px,96px); --sec-lg:clamp(72px,8vw,140px); --sec-sm:clamp(36px,4vw,56px); /* motion */ --dur-fast:180ms; --dur-med:240ms; --dur-reveal:420ms; --dur-hero:550ms; --ease:cubic-bezier(.2,.7,.2,1); } html[data-theme="dark"]{ --navy:#E8EAF2; --navy-deep:#0C1A38; --navy-ink:#040924; --crimson:#C41E3A; --crimson-hover:#A81830; --crimson-soft:#E8526A; --terracotta:#E8915A; --terracotta-soft:#E8915A; --accent-ink:#FAF7F2; --sweep-dim:rgba(232,234,242,.42); --bg:#0C1A38; --card:var(--navy-mid); --field:#1A2B52; --ink:#F0EDE8; --slate:#A8ACBA; --hairline:#2A3A62; --surface-tint:#1A2B52; --surface-shadow:0 14px 36px rgba(0,0,0,.28); --band-bg:var(--navy-mid); --header-tint:rgba(7,13,30,.86); --header-tint-solid:rgba(7,13,30,.93); --header-tint-scrolled:rgba(7,13,30,.93); --header-tint-scrolled-solid:rgba(7,13,30,.98); --header-scrim:linear-gradient(180deg,rgba(7,13,25,.5),rgba(7,13,25,.22) 56%,transparent); --chrome:rgba(10,17,32,.8); --chrome-solid:rgba(10,17,32,.95); color-scheme:dark; } /* ---------- 2 · base + a11y ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-main-h) + 72px)} html.motion-static{scroll-behavior:auto} html.motion-static *,html.motion-static *::before,html.motion-static *::after{ animation:none!important; transition-duration:0s!important; transition-delay:0s!important; } body{ overflow-x:clip; font-family:var(--sans); background:var(--bg);color:var(--ink); font-size:var(--hs-body-size);font-weight:450;line-height:var(--hs-body-line); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit} h1,h2{font-family:var(--hs-font-display,var(--display));color:var(--navy)} h1{font-weight:400} h2{font-weight:500} h3,h4{font-family:var(--sans);font-weight:600;color:var(--navy)} img{max-width:100%} main{display:block} .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--crimson);color:var(--accent-ink);font-weight:700;padding:12px 20px;border-radius:0 0 var(--r-s) 0;text-decoration:none} .skip-link:focus{left:0} .sr-only{ position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important; overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important } a,button,input,select{touch-action:manipulation} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{ outline:3px solid var(--crimson);outline-offset:3px } header.site a:focus-visible,header.site button:focus-visible{outline-color:var(--header-focus-ring)} .sticky-cta a:focus-visible,footer a:focus-visible{outline-color:#fff} .tu-ribbon:focus-visible{outline-color:#fff;outline-offset:-3px} /* ---------- 3 · rails ---------- Standard rail restored to 1320px (production parity — never narrower than before); wide rail 1560px for editorial heroes/footers; prose 72ch. */ .wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--gutter)} .wrap--wide{max-width:1560px;margin-inline:auto;padding-inline:var(--gutter)} .wrap--prose{max-width:72ch;margin-inline:auto;padding-inline:var(--gutter)} /* asymmetric splits — single column first, split from 760px (see §19) */ .split,.media-row,.two-col,.adm-grid,.article-layout,.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,52px)} /* ---------- 4 · type roles ---------- */ .label{font-size:var(--hs-eyebrow-size);font-weight:600;letter-spacing:var(--hs-eyebrow-track);line-height:var(--hs-eyebrow-line);text-transform:uppercase} .lede{font-size:var(--hs-lede-size);line-height:var(--hs-lede-line);font-weight:500;color:var(--ink);margin-bottom:var(--hs-space-22)} .body-copy p{color:var(--slate);font-size:var(--hs-body-size);line-height:var(--hs-body-line);margin-bottom:var(--hs-space-20)} .fineprint{margin-top:var(--hs-space-24);font-size:var(--t-meta);color:var(--slate)} .fineprint a{font-weight:650;color:var(--navy)} /* ---------- 5 · buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;min-height:var(--hs-cta-min);padding:var(--hs-space-14) var(--hs-space-24); border:none;cursor:pointer; font:700 var(--hs-button-size)/var(--hs-button-line) var(--sans);letter-spacing:var(--hs-button-track);text-decoration:none;text-align:center; border-radius:var(--r-s); transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease) } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-primary{background:var(--crimson);color:var(--accent-ink);box-shadow:0 10px 24px rgba(196,30,58,.24)} .btn-primary:hover{background:var(--crimson-hover);color:var(--accent-ink);box-shadow:0 14px 30px rgba(196,30,58,.3)} .btn-ghost{border:1px solid var(--navy);color:var(--navy);background:transparent;padding:12px 25px} .btn-ghost:hover{background:var(--navy);color:var(--bg)} .hero .btn-ghost,.page-hero .btn-ghost,.cta-banner .btn-ghost,.contact-sec .btn-ghost{ border:2px solid rgba(255,255,255,.75);color:#fff;background:var(--glass) } .hero .btn-ghost:hover,.page-hero .btn-ghost:hover,.cta-banner .btn-ghost:hover,.contact-sec .btn-ghost:hover{ background:var(--glass-strong);border-color:#fff;color:#fff } .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch} .cta-row .btn{flex:1 1 auto} @media(min-width:560px){ .cta-row{align-items:center} .cta-row .btn{flex:0 0 auto} } /* ---------- 6 · the drafting field ---------- */ /* Navy blueprint ground: faint drawing grid + two instrument-lamp glows. */ .hero,.page-hero,.stats,.contact-sec{ color:#fff; background: radial-gradient(1100px 520px at 82% -12%,rgba(217,112,44,.16),transparent 62%), radial-gradient(900px 520px at -10% 112%,rgba(196,30,58,.14),transparent 58%), linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px), var(--navy-deep); background-size:auto,auto,44px 44px,44px 44px,auto; } /* Phase 6: Hull's live pages use clear, flat section fields rather than the former blueprint grid. Homepage video remains media-led; inner templates select a measured editorial, title, or photo-split treatment below. */ .page-hero{background:var(--hull-blue-dark)} .contact-sec{background:var(--hull-blue-dark)} /* ---------- 7 · header ---------- The whole stack (contact row · nav row · TU ribbon) sits absolute and transparent over the hero. Once the contact row scrolls away, js/site-20260716.js sets .is-scrolled and the nav row alone condenses to fixed navy chrome — the mobile fixed-chrome budget drops from ~140px to the nav row only. */ header.site{ position:absolute;top:0;left:0;right:0;z-index:50;color:var(--header-ink) } header.site::before{ content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;pointer-events:none; background:var(--header-scrim) } /* 7a · contact utility row — static, nothing auto-scrolls, nothing clips. Mobile: Call + WhatsApp thumb buttons + "All contacts" disclosure. Desktop (≥1181): inline priority links + the same disclosure. */ .top-contact{ position:relative;z-index:6;min-height:var(--contact-h); border-bottom:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03)) } .top-contact__inner{ min-height:var(--contact-h);display:flex;align-items:center;gap:10px; padding-inline:clamp(14px,3vw,var(--gutter)); max-width:1560px;margin-inline:auto; font-size:12px;line-height:1;color:rgba(255,255,255,.85) } .top-contact__label{ flex:none;padding-right:10px;border-right:1px solid rgba(255,255,255,.16); color:var(--terracotta-soft);font-weight:800;font-size:12px;letter-spacing:.16em; text-transform:uppercase;white-space:nowrap } .tc-links{display:none} .tc-actions{display:flex;align-items:center;gap:8px;flex:1;min-width:0} .tc-btn{ display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 14px; border:1px solid rgba(255,255,255,.28);border-radius:99px; color:#fff;text-decoration:none;font-weight:700;font-size:12px;white-space:nowrap; background:rgba(255,255,255,.08); transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease) } .tc-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)} .tc-btn--wa{border-color:rgba(87,208,127,.5)} .tc-btn--wa .tc-ico{color:#57d07f;opacity:1} .tc-ico{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.8} .tc-more{ margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px; min-height:44px;padding:8px 12px;border:0;border-radius:var(--r-s); background:none;color:rgba(255,255,255,.85);cursor:pointer; font:700 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap } .tc-more:hover{color:#fff;background:rgba(255,255,255,.1)} .tc-more__long{display:none} @media(min-width:560px){ .tc-more__long{display:inline} .tc-more__short{display:none} } @media(max-width:399px){ .top-contact__label{display:none} .top-contact__inner{gap:8px} } .tc-more svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-fast) var(--ease)} .tc-more[aria-expanded="true"] svg{transform:rotate(180deg)} /* full contact sheet — all six official lines, one tap away */ .tc-panel{ position:absolute;top:100%;left:0;right:0;z-index:7; padding:6px clamp(14px,3vw,var(--gutter)) 14px; background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.16); box-shadow:0 24px 48px rgba(4,10,24,.44) } .tc-panel[hidden]{display:none} .tc-panel ul{list-style:none;max-width:1560px;margin-inline:auto} .tc-panel a{ display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 4px; border-bottom:1px solid rgba(255,255,255,.1); color:#fff;text-decoration:none;font-size:14px } .tc-panel li:last-child a{border-bottom:0} .tc-panel a:hover b{text-decoration:underline;text-underline-offset:3px} .tc-panel .tc-ico{width:16px;height:16px} .tc-panel .tc-role{flex:1;color:rgba(255,255,255,.8);font-size:12.5px;font-weight:600} .tc-panel b{font-weight:750;letter-spacing:.01em} /* 7b · nav row */ .nav{ position:relative;display:flex;align-items:center;gap:12px;height:var(--nav-main-h); padding-inline:clamp(14px,3vw,var(--gutter)); transition:background var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease) } /* condensed chrome once the utility row is gone */ header.site.is-scrolled .nav,header.site.menu-open .nav{ position:fixed;top:0;left:0;right:0;z-index:8; background:var(--header-tint-scrolled-solid); border-bottom:1px solid var(--header-hair); box-shadow:0 14px 40px rgba(4,10,24,.35) } @supports (backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px)){ header.site.is-scrolled .nav,header.site.menu-open .nav{ background:var(--header-tint-scrolled); -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4) } } .brand-block{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 auto;overflow:hidden} .brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:var(--header-ink)} .brand img{ width:50px;height:50px;flex:none; filter:drop-shadow(0 3px 8px rgba(0,0,0,.55)) } .brand b{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:.02em;line-height:1.05;text-shadow:0 2px 12px rgba(2,8,20,.55)} .brand b>span{display:block;white-space:nowrap} .brand small{display:block;margin-top:5px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.9;text-shadow:0 1px 8px rgba(2,8,20,.6)} @media(min-width:560px){.brand small{font-size:12px;letter-spacing:.1em}} /* Phone lockup: preserve the full institutional name, then remove the lower-priority location line before it can wrap into the theme/menu controls. The location remains available in the TU ribbon, page content and footer. */ @media(max-width:559px){ :root{--nav-main-h:72px} .nav{gap:8px} .brand{gap:10px} .brand img{width:44px;height:44px} .brand b{font-size:14px;line-height:1.08;letter-spacing:.025em} .brand small{display:none} .nav .nav-controls{gap:8px} } /* TU chip rides only in the desktop row; the mobile ribbon carries it below */ .affiliation-mark{display:none} .nav-controls{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none} .menu-btn{ position:relative;display:flex;justify-content:center;align-items:center;flex:none; width:44px;height:44px;padding:0; background:var(--header-glass-bg);border:1px solid var(--glass-brd);color:var(--header-ink); border-radius:var(--r-s);cursor:pointer; transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease) } .menu-btn::before{content:"";position:absolute;inset:-2px} .menu-btn:hover{background:var(--header-glass-bg-strong);border-color:rgba(255,255,255,.5)} .menu-btn__text{display:none} .menu-btn__icon{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* 7c · drawer (base: phones/tablets/small laptops) */ nav.links{ display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0; max-height:calc(100dvh - var(--nav-main-h));overflow-y:auto; padding:10px clamp(20px,5vw,40px) 20px;background:var(--navy-deep);border-top:1px solid var(--glass-brd); box-shadow:0 24px 48px rgba(4,10,24,.44) } nav.links.open{display:flex} nav.links a{padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.1);text-decoration:none;font-size:15px;font-weight:650;color:var(--header-ink-soft)} nav.links a:hover{color:#fff} nav.links a.active{border-left:3px solid var(--crimson);padding-left:12px;color:#fff} .nav-item{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid rgba(255,255,255,.1)} .nav-item .nav-link{flex:1;min-width:0;padding:14px 4px;border-bottom:0} .nav-caret{ flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center; background:none;border:0;color:#fff;cursor:pointer } .nav-caret svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-fast) var(--ease)} .nav-item.is-open .nav-caret svg{transform:rotate(180deg)} .nav-dropdown{display:none;flex-basis:100%;flex-direction:column;gap:0;padding:0 0 10px 14px;border-left:2px solid rgba(255,255,255,.16);margin-left:2px} .nav-item.is-open .nav-dropdown{display:flex} .nav-item .nav-dropdown a{padding:12px 10px;border-bottom:0;color:rgba(255,255,255,.76);font-size:14px;font-weight:600} .nav-item .nav-dropdown a:hover,.nav-item .nav-dropdown a:focus-visible{color:#fff} nav.links a.nav-cta{border-bottom:0;margin-top:6px;padding:14px 4px;border-radius:var(--r-s);background:var(--crimson);color:var(--accent-ink);text-align:center;font-weight:750} nav.links a.nav-vacancy{display:flex;align-items:center;gap:9px} .nav-vacancy__icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85} nav.links a.nav-vacancy:hover,nav.links a.nav-vacancy:focus-visible{background:rgba(217,112,44,.14);color:#fff} nav.links a.nav-vacancy.active{border-left:3px solid var(--terracotta);padding-left:12px;background:rgba(217,112,44,.1)} /* 7d · theme switch — track-and-thumb, driven by html[data-theme] */ .theme-btn{ position:relative;display:inline-flex;align-items:center;gap:9px;flex:none; min-height:44px;padding:0;margin:0;border:0;background:none;cursor:pointer; color:var(--header-ink);font:700 12px var(--sans);letter-spacing:.02em } .theme-btn::before{content:"";position:absolute;inset:-9px -3px} .theme-track{ position:relative;flex:none;width:46px;height:25px;border-radius:99px; background:linear-gradient(180deg,#8fb2e0,#6f96d2); border:1px solid rgba(255,255,255,.34); box-shadow:inset 0 1px 3px rgba(0,0,0,.24); transition:background var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease) } html[data-theme="dark"] .theme-track{ background:linear-gradient(180deg,#141c30,#0a0e1a); border-color:rgba(255,255,255,.2) } .theme-btn:focus-visible .theme-track{outline:3px solid var(--header-focus-ring);outline-offset:3px} .theme-star{ position:absolute;border-radius:50%;background:#fff;opacity:0; transition:opacity var(--dur-med) var(--ease) 50ms,transform var(--dur-med) var(--ease) 50ms; transform:scale(.4) } .theme-star--a{width:3px;height:3px;top:6px;left:8px} .theme-star--b{width:2px;height:2px;top:15px;left:14px} html[data-theme="dark"] .theme-star{opacity:.9;transform:scale(1)} .theme-thumb{ position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%; display:grid;place-items:center;overflow:hidden; background:linear-gradient(180deg,#fff8e8,#ffd889); box-shadow:0 2px 6px rgba(0,0,0,.38); transition:left var(--dur-med) var(--ease),background var(--dur-med) var(--ease) } html[data-theme="dark"] .theme-thumb{left:24px;background:linear-gradient(180deg,#eef1f8,#cbd3e4)} .theme-icon{position:absolute;width:13px;height:13px;transition:opacity var(--dur-med) var(--ease),transform var(--dur-med) var(--ease)} .theme-icon--sun{color:#d9702c;opacity:0;transform:rotate(45deg) scale(.55)} .theme-icon--moon{color:#3d4a63;opacity:1;transform:rotate(0deg) scale(1)} html[data-theme="dark"] .theme-icon--sun{opacity:1;transform:rotate(0deg) scale(1)} html[data-theme="dark"] .theme-icon--moon{opacity:0;transform:rotate(-45deg) scale(.55)} .theme-btn::after{display:none} /* 7e · full-width crimson TU affiliation ribbon (mobile/tablet trust line) */ .tu-ribbon{ position:relative;z-index:1; display:flex;align-items:center;justify-content:center;gap:.4ch; height:var(--tu-bar-h);padding:0 16px;text-align:center;text-decoration:none;color:#fff; font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.02em; background:linear-gradient(180deg,rgba(158,34,51,.92),rgba(124,21,37,.92)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14) } .tu-ribbon strong{font-weight:750} .tu-ribbon:active{background:linear-gradient(180deg,#8d1d2d,#6c111f)} /* ---------- 8 · heroes ---------- */ /* home hero — the locked concept: campus video, typing headline, status, CTAs */ .hero{position:relative;padding:calc(var(--nav-h) + 40px) 0 30px;overflow:hidden;display:flex;align-items:stretch} .hero-video{position:absolute;inset:0;z-index:0;pointer-events:none} .hero-video video,.hero-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero-video::after{ content:"";position:absolute;inset:0; background: radial-gradient(900px 500px at 78% 34%,rgba(70,92,145,.24),transparent 66%), linear-gradient(180deg,rgba(3,12,28,.72) 0%,rgba(5,17,38,.66) 45%,rgba(3,12,28,.92) 100%), linear-gradient(90deg,rgba(4,15,34,.48),rgba(8,22,48,.18),rgba(4,13,30,.34)) } .hero>.wrap--wide{position:relative;z-index:1} .hero-grid{display:flex;min-height:100%;flex:1;flex-direction:column;align-items:center;justify-content:space-between;gap:40px} .hero-content{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center} .former{ display:inline-block;padding:7px 14px;margin-bottom:20px; font-size:12px;font-weight:750;letter-spacing:.14em;text-transform:uppercase; color:#F2C598;background:rgba(8,18,39,.46);border:1px solid rgba(233,148,90,.42);border-radius:99px } .hero h1{margin-bottom:14px;color:#fff;font-size:var(--t-display);line-height:.98;letter-spacing:-.038em;text-wrap:balance;text-shadow:0 12px 34px rgba(1,8,20,.46)} .study-heading{width:100%;min-height:2.68em} .study-copy{display:flex;flex-direction:column;align-items:center;gap:.06em} .study-lead{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05em;min-height:1.62em} .hero h1 .study-static{ display:block;font-family:var(--display);font-style:italic;font-weight:600; font-size:.55em;line-height:1;letter-spacing:-.008em;text-transform:none; background:linear-gradient(96deg,#FDF1E4,#EFB78A 82%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; filter:drop-shadow(0 8px 22px rgba(2,8,20,.32)) } .study-dynamic{ position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:11.4ch; font-family:var(--display);font-size:.97em;font-weight:600;font-style:normal;line-height:.94;letter-spacing:-.03em;color:#F3B382 } .hero h1 .typing-word{color:#F3B382;text-shadow:0 8px 28px rgba(0,0,0,.34)} .hero h1 .study-engineering{display:block;font-family:var(--display);font-size:1.02em;font-style:normal;font-weight:600;line-height:.9;letter-spacing:-.048em;color:#fff} .study-dynamic::after{ content:"";position:absolute;left:5%;right:5%;bottom:-8px;height:3px;border-radius:3px; background:linear-gradient(90deg,transparent,#F3B382 18%,#F3B382 82%,transparent); transform:scaleX(0);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease) } .study-dynamic.is-complete::after{transform:scaleX(1);opacity:.85} .typing-cursor{ width:2px;height:.76em;margin-left:.12em;border-radius:2px;background:#F3B382; box-shadow:0 0 14px rgba(233,148,90,.72);animation:typing-cursor 1s steps(1,end) infinite } @keyframes typing-cursor{0%,48%{opacity:1}49%,100%{opacity:.16}} .hero-divider{display:flex;align-items:center;justify-content:center;gap:16px;width:min(480px,68vw);margin:2px 0 14px} .hero-divider i{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(233,148,90,.56))} .hero-divider i:last-child{background:linear-gradient(90deg,rgba(233,148,90,.56),transparent)} .hero p.sub{max-width:720px;margin-bottom:22px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.88);text-wrap:balance} .hero .adm-status{ display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;padding:7px 14px; font-size:12px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#fff; background:rgba(196,30,58,.3);border:1px solid rgba(242,201,207,.45);border-radius:99px } .hero .adm-status i{width:7px;height:7px;border-radius:50%;background:var(--crimson-soft)} .hero-content .cta-row{justify-content:center;width:100%} @media(min-width:560px){.hero-content .cta-row{width:auto}} /* the fact strip floats over footage — the one legitimate glass surface */ .hero-highlights{ width:100%;display:grid;grid-template-columns:1fr 1fr; background:linear-gradient(145deg,rgba(20,39,80,.72),rgba(7,17,37,.84)); border:1px solid rgba(255,255,255,.19);border-radius:var(--r-m); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 20px 60px rgba(1,8,20,.36) } @supports (backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px)){ .hero-highlights{-webkit-backdrop-filter:blur(18px) saturate(1.18);backdrop-filter:blur(18px) saturate(1.18)} } .hero-highlight{display:flex;align-items:center;gap:12px;min-width:0;padding:16px 14px} .hero-highlight:nth-child(odd){border-right:1px solid rgba(255,255,255,.11)} .hero-highlight:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.11)} .hero-highlight__icon{width:42px;height:42px;flex:none;display:grid;place-items:center;border:1px solid rgba(233,148,90,.7);border-radius:50%;color:#F0A56D} .hero-highlight__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round} .hero-highlight b{display:block;margin-bottom:2px;font-size:13px;font-weight:700;color:#fff} .hero-highlight small{display:block;max-width:200px;font-size:12px;line-height:1.4;color:rgba(255,255,255,.86);text-shadow:0 1px 6px rgba(2,8,20,.5)} /* page hero (inner pages) — one composed field: breadcrumb, display title, sub, typographic facts; the line-art floats behind as a drafting layer */ .page-hero{position:relative;padding:calc(var(--nav-h) + 44px) 0 52px;overflow:hidden} .page-hero-grid{position:relative} .page-hero .crumb{margin-bottom:var(--hs-space-34);font-size:var(--hs-breadcrumb-size);line-height:var(--hs-breadcrumb-line);font-weight:500;color:rgba(255,255,255,.72)} .page-hero .crumb a{color:inherit;text-decoration:none} .page-hero .crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:var(--hs-space-4)} .page-hero h1{max-width:22ch;margin-bottom:var(--hs-space-16);color:#fff;font-size:var(--hs-display-h1-size);line-height:var(--hs-display-h1-line);letter-spacing:var(--hs-display-h1-track);font-weight:400;text-wrap:balance} .page-hero h1 .h1-code{color:var(--terracotta-soft);white-space:nowrap} .page-hero p.sub{max-width:58ch;font-size:var(--hs-lede-size);line-height:var(--hs-lede-line);font-weight:500;color:rgba(255,255,255,.78)} .page-hero .cta-row{margin-top:calc(var(--u)*4)} /* facts — typographic ledger, no boxes */ .page-hero .facts{display:flex;gap:0;margin-top:30px;flex-wrap:wrap} .page-hero .facts div{ min-width:104px;padding:2px 22px 2px 14px;margin-bottom:10px; border-left:2px solid rgba(233,148,90,.55) } .page-hero .facts div b{display:block;font-family:var(--display);font-size:var(--hs-stat-size);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:#fff} .page-hero .facts div span{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72)} /* line-art: a drafting layer behind the content, not a competing column */ .lineart{position:absolute;right:calc(-1*var(--gutter)/2);bottom:-6%;z-index:0;width:min(430px,52vw);opacity:.3;pointer-events:none} .page-hero .crumb,.page-hero h1,.page-hero p.sub,.page-hero .cta-row,.page-hero .facts{position:relative;z-index:1} .lineart svg{display:block;width:100%;height:auto} .lineart .st{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .lineart .st.acc{stroke:var(--terracotta-soft)} .lineart .st.thin{stroke-width:1.1;opacity:.5} .lineart .st.dash{stroke-dasharray:5 6;opacity:.45} .lineart text{fill:rgba(255,255,255,.55)} .page-hero .lineart{display:none} /* Compact title template: Contact, policy, guides and utility pages mirror Hull's solid-blue title fields and put photography in the content bands. */ .page-contact .page-hero, .page-admissions .page-hero, .page-fees .page-hero, .page-guide .page-hero{background:var(--hull-blue)} /* About is Hull's editorial exception: a high-impact lime statement, with documentary photography deliberately deferred to the narrative below. */ .page-about .page-hero{display:flex;min-height:min(80vh,820px);align-items:center;background:var(--hull-lime);color:var(--hull-blue-dark)} .page-about .page-hero .crumb{color:rgba(14,22,71,.72)} .page-about .page-hero .crumb a:hover{color:var(--hull-blue-dark)} .page-about .page-hero h1{max-width:16ch;color:var(--hull-blue);font-size:clamp(3.5rem,8.6vw,8.4rem);line-height:.9;letter-spacing:-.05em} .page-about .page-hero p.sub{max-width:58ch;color:var(--hull-blue-dark)} .page-about .page-hero .btn-ghost{border-color:rgba(14,22,71,.42);color:var(--hull-blue-dark);background:transparent} .page-about .page-hero .btn-ghost:hover{border-color:var(--hull-blue-dark);background:var(--hull-blue-dark);color:#fff} .page-about .page-hero-grid::after{color:rgba(14,22,71,.48)} /* Photo-split title template for high-intent pages with honest ICE imagery. */ .page-hero-grid:has(.editorial-hero-media){display:grid;gap:var(--hs-space-32);align-items:end} .editorial-hero-media{position:relative;margin:0;overflow:hidden;background:var(--hull-black)} .editorial-hero-media picture,.editorial-hero-media img{display:block;width:100%;height:100%} .editorial-hero-media img{aspect-ratio:4/3;object-fit:cover} .editorial-hero-media figcaption{padding:var(--hs-space-10) 0 0;color:rgba(255,255,255,.76);font-size:12.5px;line-height:1.45} /* Reusable Hull editorial imagery: sticky lead photograph and story cards. */ .editorial-lead{display:grid;gap:var(--hs-space-32);align-items:start} .editorial-lead__media{margin:0} .editorial-lead__media img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover} .editorial-lead__media figcaption{padding-top:var(--hs-space-10);font-size:12.5px;line-height:1.5;color:var(--slate)} .editorial-story-grid{display:grid;grid-template-columns:1fr;gap:var(--hs-space-20)} .editorial-story{display:flex;flex-direction:column;background:var(--card);border-top:2px solid var(--navy);text-decoration:none} .editorial-story img{display:block;width:100%;height:auto;aspect-ratio:16/11;object-fit:cover} .editorial-story__body{display:flex;flex-direction:column;flex:1;padding:var(--hs-space-18) 0} .editorial-story .label{margin-bottom:var(--hs-space-8);color:var(--terracotta)} .editorial-story h3{margin-bottom:var(--hs-space-8);font-size:var(--hs-related-title-size);line-height:var(--hs-related-title-line)} .editorial-story p{color:var(--slate);font-size:14.5px;line-height:1.6} .editorial-story .go{margin-top:auto;padding-top:var(--hs-space-14);color:var(--crimson);font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase} /* Admissions lower-page retrofit: the hero already follows Hull's campaign field; these bands bring the decision journey into the same editorial language instead of falling back to the former boxed ICE dashboard. */ .page-admissions #how{background:var(--bg)} .page-admissions #how .adm-grid{align-items:start} .page-admissions #how .steps{border-top:2px solid var(--navy)} .page-admissions #how .steps li{background:transparent;border-bottom:1px solid var(--hairline);border-radius:0;padding:var(--hs-space-18) 0} .page-admissions #how .steps li::before{border-radius:0;background:var(--navy);color:#fff} .page-admissions #how .steps li:last-child{border-bottom:0} .page-admissions #how .scholar{margin-top:var(--hs-space-18);padding:var(--hs-space-18) 0 var(--hs-space-18) var(--hs-space-18);border-top:2px solid var(--navy);border-left:var(--hs-rule-active) solid var(--crimson);border-radius:0;background:transparent;color:var(--ink)} .page-admissions #how .scholar h3,.page-admissions #how .scholar p,.page-admissions #how .scholar a{color:inherit} .page-admissions #how .elig{padding:0 0 0 var(--hs-space-24);border-top:2px solid var(--navy)} .page-admissions #how .elig>div{border-bottom:1px solid var(--hairline)} .page-admissions #how .inquiry-form{margin-top:var(--hs-space-24);padding:var(--hs-space-18) 0 0;border-top:2px solid var(--navy);border-radius:0;background:transparent;box-shadow:none} .page-admissions #programs{background:var(--hull-grey)} .page-admissions #programs .prog{border:0;border-top:2px solid var(--navy);border-radius:0;background:var(--card);box-shadow:none} .page-admissions #programs .prog:hover{transform:none;border-top-color:var(--crimson);box-shadow:none} .page-admissions #programs .prog-photo{border-radius:0;border-bottom:0} .page-admissions #programs .prog-body{padding:var(--hs-space-18) var(--hs-space-20) var(--hs-space-22)} .page-admissions #programs .video-frame{margin-top:var(--hs-space-32);border-radius:0;box-shadow:none} .page-admissions #faq{background:var(--bg)} .page-admissions #faq .faq{max-width:900px;border-top:2px solid var(--navy)} .page-admissions #notices-cta{background:var(--hull-lime);color:var(--hull-blue-dark)} .page-admissions #notices-cta .cta-banner{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} .page-admissions #notices-cta .cta-banner h3,.page-admissions #notices-cta .cta-banner p{color:var(--hull-blue-dark)} .page-admissions #notices-cta .btn-ghost{border-color:var(--hull-blue-dark);color:var(--hull-blue-dark);background:transparent} .page-admissions #notices-cta .btn-ghost:hover{background:var(--hull-blue-dark);color:#fff} /* Dark-mode contrast repair. Under data-theme=dark both --hull-lime (=--bg) and --hull-blue-dark (=--navy-deep) resolve to the same dark navy, so the #notices-cta band rendered dark-on-dark; the #how step boxes went light while their numbers stayed white. Restore legible foreground on the dark field (light mode is untouched). */ html[data-theme="dark"] .page-admissions #how .steps li::before{background:var(--navy);color:var(--navy-ink)} html[data-theme="dark"] .page-admissions #notices-cta{color:#fff} html[data-theme="dark"] .page-admissions #notices-cta .cta-banner h3{color:#fff} html[data-theme="dark"] .page-admissions #notices-cta .cta-banner p{color:rgba(255,255,255,.76)} html[data-theme="dark"] .page-admissions #notices-cta .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} html[data-theme="dark"] .page-admissions #notices-cta .btn-ghost:hover{background:#fff;color:var(--navy-deep)} @media(min-width:760px){ .page-admissions #how .adm-grid>div:nth-child(2){padding-left:var(--hs-space-24)} .page-admissions #programs .prog-grid{align-items:start} .page-admissions #programs .prog:nth-child(2){margin-top:var(--hs-space-20)} .page-admissions #programs .prog:nth-child(3){margin-top:var(--hs-space-40)} } @media(min-width:760px){ .page-hero-grid:has(.editorial-hero-media){grid-template-columns:minmax(0,7fr) minmax(300px,5fr);gap:clamp(40px,6vw,90px)} .editorial-hero-media{align-self:stretch;margin-bottom:calc(var(--hs-space-64) * -1)} .editorial-hero-media img{min-height:430px} .editorial-lead{grid-template-columns:minmax(280px,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px)} .editorial-lead__media{position:sticky;top:calc(var(--nav-main-h) + var(--hs-space-24))} .editorial-story-grid{grid-template-columns:repeat(2,1fr);gap:var(--hs-space-32)} } @media(min-width:1024px){.editorial-story-grid{grid-template-columns:repeat(3,1fr)}} /* drafting title-block tag, bottom-right of every inner hero */ .page-courses{--hero-label:"PROGRAMS / 01"} .page-admissions{--hero-label:"ADMISSIONS / 02"} .page-careers{--hero-label:"CAREERS / 03"} .page-civil{--hero-label:"CIVIL / BCE"} .page-computer{--hero-label:"COMPUTER / BCT"} .page-electronics{--hero-label:"ELECTRONICS / BEI"} .page-tu{--hero-label:"AFFILIATION / TU"} .page-fees{--hero-label:"FEES / SCHOLARSHIPS"} .page-guide{--hero-label:"GUIDE / IOE 2083"} .page-blog{--hero-label:"RESOURCES / STUDENTS"} .page-about{--hero-label:"ABOUT / ICE + JEC"} .page-location{--hero-label:"CAMPUS / TATHALI"} .page-contact{--hero-label:"CONTACT / BHAKTAPUR"} .page-not-found{--hero-label:"404 / FIND YOUR WAY"} .page-hero-grid::after{ content:var(--hero-label,"ICE");position:absolute;right:0;bottom:-30px; font:750 12px var(--sans);letter-spacing:.2em;color:rgba(255,255,255,.38) } /* ---------- 9 · announcement ticker (infinite marquee) ---------- A continuous scroll ticker: items flow left endlessly. JS duplicates the track for a seamless loop, and marks the panel with .ticker-ready once the duplicate is in place. Pauses on hover/focus/reduced-motion. */ .news-panel{ position:relative;z-index:2;width:100%;overflow:hidden; background: radial-gradient(600px 160px at 8% 50%,rgba(29,76,242,.13),transparent 60%), radial-gradient(400px 120px at 92% 50%,rgba(217,112,44,.11),transparent 60%), linear-gradient(90deg,var(--navy-ink) 0%,var(--navy-deep) 30%,var(--navy-deep) 70%,var(--navy-ink) 100%); /* Accent top rule: crimson → terracotta shimmer */ border-top:2px solid transparent; border-bottom:1px solid rgba(255,255,255,.1); /* layered background-image trick: gradient on top of bg-color for the top border */ background-clip:padding-box; } /* Glowing top-border using ::before so border-radius works cleanly */ .news-panel::before{ content:""; position:absolute;inset:0 0 auto;height:2px; background:linear-gradient(90deg,var(--crimson),var(--crimson-soft) 55%,transparent 100%); /* §02: one accent per composition */ z-index:3; animation:ticker-shimmer 4s linear infinite; background-size:200% 100%; } @keyframes ticker-shimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} } .news-panel__inner{ display:flex;align-items:center;min-height:56px; max-width:none;margin-inline:0;padding:0; /* badge is sticky-left, track scrolls right of it */ } /* ── LIVE badge ─────────────────────────────────────────────────────── */ .news-panel__badge{ flex:none; position:relative;z-index:2; display:inline-flex;align-items:center;gap:8px; padding:7px 16px 7px 12px; background:var(--crimson); color:var(--accent-ink); font-size:11px;font-weight:850;letter-spacing:.18em;text-transform:uppercase; /* right-side fade into the ticker track */ clip-path:none; box-shadow:4px 0 24px 4px rgba(29,76,242,.35); white-space:nowrap; } .news-panel__badge i{ position:relative; width:7px;height:7px;border-radius:50%; background:#fff; flex:none; } /* Ripple ring around the live dot */ .news-panel__badge i::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid rgba(255,255,255,.65); animation:live-ripple 2s ease-out infinite; } @keyframes live-ripple{ 0% {transform:scale(1); opacity:.9} 100%{transform:scale(2.6);opacity:0} } /* ── Scrolling track ──────────────────────────────────────────────── */ .news-rail{ flex:1 1 0%;min-width:0; display:flex;align-items:center; overflow:hidden; /* slight left gradient fade out of the badge */ mask-image:linear-gradient(90deg,transparent 0%,#000 3%,#000 94%,transparent 100%); -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 3%,#000 94%,transparent 100%); } /* The inner list of items — duplicated by JS for infinite loop */ .news-rail__track{ display:flex;align-items:center;gap:0; white-space:nowrap; /* animation is added by JS once duplicate is ready */ } .news-panel.ticker-ready .news-rail__track{ animation:ticker-scroll 38s linear infinite; } .news-panel:hover .news-rail__track, .news-panel:focus-within .news-rail__track{ animation-play-state:paused; } @keyframes ticker-scroll{ 0% {transform:translateX(0)} 100% {transform:translateX(-50%)} } /* ── Individual ticker item ────────────────────────────────────────── */ .news-item{ display:inline-flex;align-items:center;gap:10px; padding:10px 28px 10px 20px; border-right:1px solid rgba(255,255,255,.08); color:#fff;text-decoration:none; flex:none; transition:background var(--dur-fast) var(--ease); position:relative; } .news-item:hover{ background:rgba(255,255,255,.06); } /* chip badges */ .news-item .ticker-chip{ flex:none; display:inline-flex;align-items:center;gap:5px; padding:4px 10px 4px 8px; border-radius:99px; color:#fff; font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; white-space:nowrap; } .ticker-chip--vacancy{background:var(--crimson);box-shadow:0 0 10px rgba(29,76,242,.4)} .ticker-chip--admission{background:var(--terracotta);box-shadow:0 0 10px rgba(217,112,44,.35)} .ticker-chip--notice{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.9); } html[data-theme="dark"] .ticker-chip--vacancy, html[data-theme="dark"] .ticker-chip--admission{color:var(--accent-ink)} /* Dark-mode action labels stay warm-white across every primary button, including the fixed mobile action bar. */ html[data-theme="dark"] :is(.btn-primary,.sticky-cta .btn,.nav-cta,.apply-mini){ color:#FFF8F0!important; } /* dot indicator inside chip */ .ticker-chip::before{ content:""; width:5px;height:5px;border-radius:50%; background:rgba(255,255,255,.75); flex:none; display:inline-block; } .ticker-chip--notice::before{background:rgba(255,255,255,.5)} /* item text */ .news-item .ticker-text{ font-family:var(--sans); font-size:13.5px; font-weight:500; line-height:1.35; color:rgba(255,255,255,.82); white-space:nowrap; max-width:480px; overflow:hidden; text-overflow:ellipsis; } .news-item:hover .ticker-text{ color:#fff; } /* arrow indicator on hover */ .news-item::after{ content:"→"; position:absolute;right:10px; font-size:11px; color:var(--terracotta-soft); opacity:0; transform:translateX(-4px); transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease); pointer-events:none; } .news-item:hover::after{ opacity:1; transform:translateX(0); } /* Hide old prev/next controls — no longer needed with infinite scroll */ .news-controls{display:none} .news-count{display:none} /* Reduced motion: freeze the track, show items statically stacked */ @media(prefers-reduced-motion:reduce){ .news-panel.ticker-ready .news-rail__track{animation:none} .news-panel::before{animation:none} .news-panel__badge i::after{animation:none} .news-rail{ overflow-x:auto;scrollbar-width:none; mask-image:none;-webkit-mask-image:none; } } /* ---------- 10 · quick admission bar ---------- */ .quickbar{background:var(--card);border-bottom:1px solid var(--hairline)} .quickbar .wrap--wide{display:grid;grid-template-columns:1fr 1fr;padding-inline:0;max-width:1560px} .quickbar a{ display:flex;flex-direction:column;gap:2px;min-width:0; padding:14px 16px;text-decoration:none; border-bottom:1px solid var(--hairline); transition:background var(--dur-fast) var(--ease) } .quickbar a:nth-child(odd){border-right:1px solid var(--hairline)} .quickbar a:hover{background:var(--bg)} .quickbar b{font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.3} .quickbar span{font-size:12.5px;color:var(--slate);line-height:1.4} /* ---------- 11 · admission inquiry welcome ---------- */ html.admission-welcome-is-open{overflow:hidden} .admission-welcome{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:12px} .admission-welcome[hidden]{display:none} .admission-welcome__scrim{position:absolute;inset:0;background:rgba(4,10,24,.76);opacity:0;transition:opacity var(--dur-med) ease} @supports (backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px)){ .admission-welcome__scrim{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} } .admission-welcome__dialog{ position:relative;z-index:1;width:min(960px,100%);max-height:calc(100dvh - 24px);overflow:auto; display:grid;grid-template-columns:1fr;padding:0;background:#FFF9F0;color:#17181C; border:1px solid rgba(255,255,255,.45);border-radius:10px; box-shadow:0 34px 110px rgba(0,0,0,.5); opacity:0;transform:translateY(20px) scale(.98); transition:opacity var(--dur-med) ease,transform var(--dur-med) var(--ease) } .admission-welcome.is-open .admission-welcome__scrim{opacity:1} .admission-welcome.is-open .admission-welcome__dialog{opacity:1;transform:none} .admission-welcome__close{ position:absolute;right:14px;top:14px;z-index:4;width:46px;height:46px;display:grid;place-items:center; border:1px solid rgba(19,35,75,.16);border-radius:50%;background:#fff;color:#13234B;cursor:pointer; box-shadow:0 8px 20px rgba(7,13,30,.16); transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease) } .admission-welcome__close:hover{background:#C41E3A;color:#fff;transform:rotate(6deg)} .admission-welcome__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round} .admission-welcome__poster{ position:relative;min-height:172px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden; padding:22px;color:#fff;background: radial-gradient(circle at 88% 17%,rgba(217,112,44,.28),transparent 25%), linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px), #0C1A38; background-size:auto,28px 28px,28px 28px,auto } .admission-welcome__poster::after{ content:"";position:absolute;right:-60px;bottom:-112px;width:250px;height:250px;border:54px solid rgba(255,255,255,.055);border-radius:50% } .admission-welcome__edition{position:relative;z-index:1;font-size:10px;font-weight:800;letter-spacing:.18em;color:rgba(255,255,255,.72)} .admission-welcome__poster>strong{ position:relative;z-index:1;align-self:flex-start;margin:12px 0 8px; font:800 clamp(74px,23vw,122px)/.72 var(--sans);letter-spacing:-.09em;color:#fff } .admission-welcome__poster>strong span{color:#E8915A} .admission-welcome__poster-foot{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:22px} .admission-welcome__stamp{width:48px;height:48px;display:grid;place-items:center;flex:none;border:1px solid rgba(255,255,255,.55);border-radius:50%;font:800 13px var(--sans);letter-spacing:.12em} .admission-welcome__poster-foot p{color:rgba(255,255,255,.82);font-size:11px;font-weight:750;line-height:1.35;letter-spacing:.12em;text-align:right;text-transform:uppercase} .admission-welcome__content{padding:26px 22px 22px;background:#FFF9F0} .admission-welcome__eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 15px;color:#A81830;font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase} .admission-welcome__eyebrow i{position:relative;width:7px;height:7px;flex:none;border-radius:50%;background:#C41E3A} .admission-welcome__eyebrow i::after{content:"";position:absolute;inset:-4px;border:1px solid rgba(196,30,58,.5);border-radius:50%;animation:admission-welcome-pulse 2s ease-out infinite} @keyframes admission-welcome-pulse{0%{transform:scale(.65);opacity:1}100%{transform:scale(2.1);opacity:0}} .admission-welcome__content h2{max-width:580px;margin:0;color:#13234B;font:500 clamp(30px,8vw,50px)/.98 var(--display);letter-spacing:-.035em;text-wrap:balance} .admission-welcome__content h2 em{color:#C41E3A;font-weight:500} .admission-welcome__intro{max-width:620px;margin-top:15px;color:#555B66;font-size:14px;line-height:1.58} .admission-welcome__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:20px} .admission-welcome__facts>div{min-width:0;padding:11px 9px;border:1px solid #E2D9CC;background:#fff} .admission-welcome__facts span{display:block;margin-bottom:5px;color:#A81830;font-size:9px;font-weight:850;letter-spacing:.14em;text-transform:uppercase} .admission-welcome__facts b{display:block;color:#13234B;font-size:14px;line-height:1.2} .admission-welcome__facts small{display:none;margin-top:4px;color:#6B6F76;font-size:11px;line-height:1.4} .admission-welcome__actions{display:grid;gap:9px;margin-top:20px} .admission-welcome__primary,.admission-welcome__explore{ min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px; border:1px solid transparent;text-decoration:none;cursor:pointer; transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease) } .admission-welcome__primary{background:#C41E3A;color:#fff;font-size:13px;font-weight:800;letter-spacing:.02em} .admission-welcome__primary:hover{background:#A81830;color:#fff;transform:translateY(-2px)} .admission-welcome__label-mobile,.admission-welcome__explore .admission-welcome__label-mobile{display:none} .admission-welcome__primary svg,.admission-welcome__explore svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .admission-welcome__explore{background:transparent;border-color:#CFC5B7;color:#13234B;text-align:left;font-family:var(--sans)} .admission-welcome__explore:hover{background:#13234B;border-color:#13234B;color:#fff} .admission-welcome__explore span{display:flex;flex-direction:column;gap:2px} .admission-welcome__explore b{font-size:12px} .admission-welcome__explore small{font-size:10px;color:#6B6F76} .admission-welcome__explore:hover small{color:rgba(255,255,255,.72)} .admission-welcome__note{margin-top:12px;color:#7A746C;font-size:10px;text-align:center;letter-spacing:.04em} /* ---------- 12 · fact strips (typographic stats — no boxes) ---------- */ .stats{padding:40px 0 48px} .stats .wrap,.stats .wrap--wide{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px} .stat{padding:4px 16px 4px 16px;border-left:2px solid rgba(233,148,90,.55)} .stat b{display:block;font-family:var(--display);font-size:var(--hs-stat-size);font-weight:600;letter-spacing:-.03em;line-height:1.05;color:#fff} .stat span{display:block;max-width:220px;margin-top:5px;font-size:12.5px;font-weight:600;line-height:1.45;color:rgba(255,255,255,.76)} /* paper equivalent under article heroes */ .trust-strip{display:grid;grid-template-columns:1fr;gap:var(--hs-space-16);margin-top:calc(var(--hs-space-20) * -1);position:relative;z-index:2;padding:var(--hs-space-20) var(--hs-space-0) var(--hs-space-0)} .trust-strip>div{padding:var(--hs-space-4) var(--hs-space-0) var(--hs-space-4) var(--hs-space-16);border-left:var(--hs-rule-active) solid var(--terracotta)} .trust-strip b{display:block;font-family:var(--display);font-size:19px;color:var(--navy)} .trust-strip span{display:block;margin-top:var(--hs-space-3);font-size:13px;line-height:1.5;color:var(--slate)} /* ---------- 13 · sections + statement ---------- */ section{padding:var(--sec) 0} .band{background:var(--band-bg)} .band + .band,.band + #admissions{border-top:1px solid var(--hairline)} .sec-head{max-width:760px;margin-bottom:28px} .sec-head .label{margin-bottom:10px;color:var(--terracotta)} .sec-head h2{margin-bottom:var(--hs-space-12);font-size:var(--hs-feature-h2-size);line-height:var(--hs-feature-h2-line);letter-spacing:var(--hs-feature-h2-track);font-weight:500;text-wrap:balance} .sec-head p{max-width:var(--hs-measure-lede);color:var(--slate);font-size:var(--hs-body-size);line-height:var(--hs-body-line)} .sec-head h2::after{ content:"";display:block;margin-top:12px;height:2px;width:56px;background:var(--terracotta); transform-origin:left;transition:transform .6s var(--ease) .1s } html.motion-ok .sec-head h2::after{transform:scaleX(0)} html.motion-ok .sec-head.in h2::after{transform:scaleX(1)} /* feature bands carry more weight */ #admissions,#scholarships,#choose-college{padding:var(--sec-lg) 0;background:var(--band-bg)} /* scroll-sweep statement — editorial full-width moment */ .statement{position:relative;padding:var(--sec) 0 calc(var(--sec) * .7)} .statement::after{ content:"";position:absolute;left:50%;bottom:0;width:min(1460px,calc(100% - 40px));height:1px; transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--hairline) 14%,var(--hairline) 86%,transparent) } .statement+#about{padding-top:calc(var(--sec) * .75)} .statement .label{margin-bottom:16px;color:var(--terracotta)} .statement-text{ max-width:24ch; font-family:var(--display);font-weight:600; font-size:clamp(1.5rem,1rem + 2.9vw,2.875rem); line-height:1.18;letter-spacing:-.02em; color:var(--navy) } .sweep-line{ background-image:linear-gradient(90deg, var(--navy) 45%, var(--terracotta) 46%,var(--terracotta) 54%, var(--sweep-dim) 55%); background-size:250% 100%; background-position:100% 50%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent } /* ---------- 14 · cards + media ---------- */ /* program cards — photo-led, quiet chrome */ .prog-grid{display:grid;grid-template-columns:1fr;gap:var(--hs-space-18)} .prog{ position:relative;display:flex;flex-direction:column;overflow:hidden;text-decoration:none; background:var(--card);border:var(--hs-rule) solid var(--hairline);border-radius:var(--r-m); box-shadow:var(--surface-shadow); transition:transform var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease) } .prog:hover{transform:translateY(-4px);border-color:var(--navy);box-shadow:0 22px 44px rgba(19,35,75,.12)} .prog-photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:var(--hs-rule) solid var(--hairline)} .prog-body{display:flex;flex-direction:column;flex:1;padding:var(--hs-space-20) var(--hs-space-22)} .prog .code{font-size:12px;font-weight:750;letter-spacing:.18em;color:var(--terracotta);margin-bottom:var(--hs-space-10);text-transform:uppercase} .prog h3{font-size:22px;line-height:1.14;margin-bottom:var(--hs-space-8)} .prog p{color:var(--slate);font-size:14px;line-height:1.6;flex:1} .prog .meta{display:flex;justify-content:space-between;gap:var(--hs-space-12);margin-top:var(--hs-space-16);padding-top:var(--hs-space-14);border-top:var(--hs-rule) solid var(--hairline)} .prog .meta div b{display:block;font-family:var(--display);font-size:19px;font-weight:600;color:var(--navy)} .prog .meta div span{font-size:12px;color:var(--slate);font-weight:600} .prog .go{margin-top:14px;font-size:12px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--crimson)} .prog:hover .go{text-decoration:underline;text-underline-offset:4px} /* program index — numbered editorial rows (courses page) */ .prog-index{display:grid;gap:0;border-top:2px solid var(--navy)} .prog-row{ display:grid;grid-template-columns:1fr;gap:18px; padding:26px 0;border-bottom:1px solid var(--hairline);text-decoration:none; transition:background var(--dur-fast) var(--ease) } .prog-row:hover{background:var(--surface-tint)} .prog-row__media{margin:0;overflow:hidden;border-radius:var(--r-s)} .prog-row__media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform var(--dur-med) var(--ease)} .prog-row:hover .prog-row__media img{transform:scale(1.02)} .prog-row__body{position:relative;min-width:0} .prog-row__index{ font-family:var(--display);font-size:var(--hs-stat-size);font-weight:600;line-height:1; color:var(--terracotta);opacity:.55;margin-bottom:8px } .prog-row .code{font-size:12px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta);margin-bottom:8px} .prog-row h3{font-size:var(--hs-program-title-size);line-height:var(--hs-program-title-line);margin-bottom:8px} .prog-row>.prog-row__body>p:not(.code):not(.go):not(.prog-row__index){color:var(--slate);font-size:14.5px;line-height:1.65;max-width:56ch} .prog-row__meta{display:flex;gap:28px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);max-width:420px} .prog-row__meta div b{display:block;font-family:var(--display);font-size:20px;font-weight:600;color:var(--navy)} .prog-row__meta div span{font-size:12px;color:var(--slate);font-weight:600} .prog-row .go{margin-top:14px;font-size:12px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--crimson)} .prog-row:hover .go{text-decoration:underline;text-underline-offset:4px} @media(min-width:760px){ .prog-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:center;padding:34px 0} .prog-row:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)} .prog-row:nth-child(even) .prog-row__media{order:2} .prog-row__index{position:absolute;right:0;top:0;margin:0} .prog-row .code,.prog-row h3{padding-right:76px} } /* generic link/content cards (guides, 404 destinations) */ .seo-grid{display:grid;grid-template-columns:1fr;gap:var(--hs-space-16)} .seo-card{ display:flex;flex-direction:column;min-height:100%;padding:var(--hs-space-24);background:var(--card); border:var(--hs-rule) solid var(--hairline);border-radius:var(--r-m); box-shadow:var(--surface-shadow) } a.seo-card{text-decoration:none;transition:transform var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease)} a.seo-card:hover{transform:translateY(-3px);border-color:var(--navy);box-shadow:0 22px 46px rgba(19,35,75,.13)} .seo-card .label{display:none} .seo-card h3{margin-bottom:var(--hs-space-9);font-size:var(--hs-section-h3-size);line-height:var(--hs-section-h3-line)} .seo-card p{font-size:14.5px;line-height:1.65;color:var(--slate)} .seo-card .go{margin-top:auto;padding-top:var(--hs-space-18);font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--crimson)} /* guide index: the two highest-intent guides lead as a featured pair */ @media(min-width:760px){ .seo-grid.seo-grid--feature{grid-template-columns:repeat(6,1fr)} .seo-grid.seo-grid--feature .seo-card{grid-column:span 2} .seo-grid.seo-grid--feature .seo-card:nth-child(-n+2){grid-column:span 3;padding:var(--hs-space-32)} .seo-grid.seo-grid--feature .seo-card:nth-child(-n+2) h3{font-size:var(--hs-section-h3-size);line-height:var(--hs-section-h3-line)} .seo-grid.seo-grid--feature .seo-card:nth-child(-n+2) .label{display:block;margin-bottom:10px;color:var(--terracotta)} } /* editorial split with photograph */ .media-row{align-items:center} .media-row .sec-head{margin-bottom:0} .media-row .sec-head p{margin-bottom:14px} .media-row .sec-head p:last-of-type{margin-bottom:0} .media-row figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r-m);border:1px solid var(--hairline);box-shadow:0 18px 44px rgba(4,10,24,.14)} .media-row figure img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:16/11} .media-row figcaption{ position:absolute;left:0;right:0;bottom:0;padding:26px 18px 12px; font-size:12.5px;color:rgba(255,255,255,.88); background:linear-gradient(180deg,transparent,rgba(4,10,24,.72)) } .media-row figure{order:-1} .about-card{padding:30px 0 0;border-top:2px solid var(--navy)} .about-card .label{color:var(--terracotta);margin-bottom:14px} .about-card h3{max-width:430px;margin-bottom:14px;font-size:26px;line-height:1.16} .about-card p{color:var(--slate);font-size:15.5px;line-height:1.75} /* framed video figure */ .video-frame{ position:relative;margin:0;overflow:hidden; border-radius:var(--r-m);background:var(--navy-ink); border:var(--hs-rule) solid var(--hairline); box-shadow:0 24px 60px rgba(4,10,24,.16) } .video-frame video,.video-frame img{display:block;width:100%;height:auto} .video-frame figcaption{ display:flex;flex-wrap:wrap;gap:var(--hs-space-6) var(--hs-space-12);align-items:baseline; padding:var(--hs-space-12) var(--hs-space-14);background:var(--card);border-top:var(--hs-rule) solid var(--hairline); font-size:13px;line-height:1.5;color:var(--slate) } .video-frame figcaption b{ font-family:var(--sans);font-size:12px;font-weight:750; letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta) } .about-media{margin-top:var(--hs-space-28)} .labs-media,.adm-media{margin-top:var(--hs-space-36)} .tour-frame{margin-top:var(--hs-space-8)} /* ---------- 15 · ledgers (hairline rows under a navy rule) ---------- */ /* notices */ .notice-list{list-style:none;border-top:var(--hs-rule-active) solid var(--navy)} .notice-list li{border-bottom:var(--hs-rule) solid var(--hairline)} .notice-list a{display:block;padding:15px 2px;text-decoration:none;transition:padding var(--dur-fast) var(--ease)} .notice-list a:hover{padding-left:var(--hs-space-12)} .notice-list .date{display:block;width:auto;margin-bottom:var(--hs-space-6);font-size:12.5px;font-weight:650;color:var(--terracotta);font-variant-numeric:tabular-nums;letter-spacing:.04em} .notice-list b{font-family:var(--display);font-size:17px;font-weight:600;color:var(--navy)} .notice-list p{margin-top:2px;font-size:13.5px;color:var(--slate)} /* facilities */ .fac-grid{display:grid;grid-template-columns:1fr;gap:0} .fac{display:flex;gap:var(--hs-space-16);align-items:flex-start;padding:17px var(--hs-space-0);border-top:var(--hs-rule) solid var(--hairline)} .fac svg{flex:none;width:var(--hs-space-24);height:var(--hs-space-24);stroke:var(--terracotta);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:var(--hs-space-4)} .fac b{display:block;font-family:var(--display);font-size:18px;font-weight:600;color:var(--navy)} .fac span{display:block;margin-top:2px;font-size:13.5px;line-height:1.5;color:var(--slate)} /* highlights list (program strengths) */ .highlights{list-style:none;padding:var(--hs-space-6) var(--hs-space-0);border-top:var(--hs-rule-active) solid var(--navy)} .highlights li{display:flex;flex-wrap:wrap;gap:var(--hs-space-6) var(--hs-space-12);padding:var(--hs-space-13) 2px;border-bottom:var(--hs-rule) solid var(--hairline);font-size:14.5px;line-height:1.55;color:var(--slate)} .highlights li:last-child{border-bottom:none} .highlights li b{color:var(--navy);font-weight:700} .highlights li::before{content:"—";color:var(--terracotta);font-weight:700;flex:none} /* admission steps */ .steps{counter-reset:step;list-style:none} .steps li{counter-increment:step;display:flex;gap:var(--hs-space-18);padding:var(--hs-space-22) var(--hs-space-0);border-bottom:var(--hs-rule) solid var(--hairline)} .steps li:last-child{border-bottom:none} .steps li::before{ content:counter(step);flex:none;width:38px;height:38px;margin-top:2px;border-radius:var(--r-s); display:flex;align-items:center;justify-content:center; background:var(--navy-deep);color:#fff;font:600 18px var(--display) } html[data-theme="dark"] .steps li::before{background:var(--navy);color:var(--navy-ink)} .steps b{color:var(--navy)} .steps p{color:var(--slate);font-size:14.5px} .steps a{color:var(--navy);font-weight:650} /* eligibility panel */ .elig{background:var(--card);border:var(--hs-rule) solid var(--hairline);border-radius:var(--r-m);padding:var(--hs-space-24) var(--hs-space-22);box-shadow:var(--surface-shadow)} .elig h3{font-size:20px;margin-bottom:var(--hs-space-14)} .elig ul+h3{margin-top:var(--hs-space-26)} .elig ul{list-style:none} .elig li{padding:var(--hs-space-10) var(--hs-space-0) var(--hs-space-10) var(--hs-space-26);border-bottom:var(--hs-rule) solid var(--hairline);font-size:14.5px;color:var(--slate);position:relative} .elig li:last-child{border-bottom:none} .elig li::before{content:"";position:absolute;left:2px;top:var(--hs-space-18);width:var(--hs-space-12);height:var(--hs-space-7);border-left:var(--hs-rule-active) solid var(--terracotta);border-bottom:var(--hs-rule-active) solid var(--terracotta);transform:rotate(-45deg)} /* semester curriculum — column ledgers, not boxed cards */ .sem-grid{display:grid;grid-template-columns:1fr;gap:26px} .sem{padding:0 0 6px;border-top:2px solid var(--navy)} .sem .yr{display:block;margin-top:12px;font-size:12px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta)} .sem h3{font-size:19px;margin:5px 0 8px} .sem ul{list-style:none} .sem li{font-size:13.5px;color:var(--slate);padding:7px 0;border-bottom:1px solid var(--hairline)} .sem li:last-child{border-bottom:none} /* career prospects */ .chip-grid{display:grid;grid-template-columns:1fr;gap:0} .chip{padding:15px 2px;border-top:var(--hs-rule) solid var(--hairline);background:none;border-radius:0;box-shadow:none} .chip b{display:block;font-family:var(--display);font-size:18px;font-weight:600;color:var(--navy);margin-bottom:var(--hs-space-3)} .chip span{font-size:13.5px;color:var(--slate)} /* careers — vacancy ledger rows */ .job-list{display:grid;grid-template-columns:1fr;gap:0;border-top:var(--hs-rule-active) solid var(--navy)} .job{ position:relative;display:flex;flex-direction:column;gap:var(--hs-space-12);padding:var(--hs-space-20) var(--hs-space-0); background:none;border:0;border-bottom:var(--hs-rule) solid var(--hairline);border-radius:0;box-shadow:none; transition:background var(--dur-fast) var(--ease) } .job:hover{background:var(--surface-tint)} .job>div{flex:1} .job h3{font-size:var(--hs-related-title-size);line-height:var(--hs-related-title-line);margin-bottom:var(--hs-space-4)} .job .dept{font-size:12px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta)} .job p{color:var(--slate);font-size:14px;line-height:1.55;margin-top:var(--hs-space-6);max-width:64ch} .job .btn{position:relative;z-index:1;align-self:flex-start;min-height:var(--hs-control-min);padding:var(--hs-space-10) var(--hs-space-20)} .job .btn::after{content:"";position:absolute;inset:0} .job .tags{display:flex;gap:var(--hs-space-8);margin:var(--hs-space-10) var(--hs-space-0) var(--hs-space-0);flex-wrap:wrap} .job .tags span{font-size:12px;font-weight:600;color:var(--navy);border:var(--hs-rule) solid var(--hairline);background:var(--bg);border-radius:99px;padding:var(--hs-space-4) var(--hs-space-12)} .job .tags span.due{color:var(--crimson);border-color:var(--crimson)} /* hiring / admission mini-steps */ .mini-steps{display:grid;grid-template-columns:1fr;gap:0;counter-reset:ms;border-top:var(--hs-rule-active) solid var(--navy)} .mini-steps div{counter-increment:ms;display:grid;grid-template-columns:44px 1fr;gap:2px var(--hs-space-14);padding:var(--hs-space-16) var(--hs-space-0);border-bottom:var(--hs-rule) solid var(--hairline);background:none;border-radius:0;box-shadow:none} .mini-steps div::before{content:"0" counter(ms);grid-row:1/span 2;align-self:start;font:600 22px/1.1 var(--display);letter-spacing:.04em;color:var(--terracotta)} .mini-steps b{display:block;color:var(--navy);font-size:15px} .mini-steps span{font-size:13.5px;line-height:1.5;color:var(--slate)} /* FAQ */ .faq{max-width:820px;border-top:var(--hs-rule-active) solid var(--navy)} .faq details{border-bottom:var(--hs-rule) solid var(--hairline)} .faq summary{ position:relative;min-height:var(--hs-control-min);padding:var(--hs-space-14) var(--hs-space-40) var(--hs-space-14) 2px;cursor:pointer;list-style:none; font-size:15.5px;font-weight:650;color:var(--navy) } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";position:absolute;right:var(--hs-space-8);top:50%;transform:translateY(-50%); font:400 22px/1 var(--sans);color:var(--terracotta) } .faq details[open] summary::after{content:"–"} .faq details>p{padding:0 2px var(--hs-space-16);max-width:70ch;font-size:14.5px;line-height:1.7;color:var(--slate)} .faq details>p a{color:var(--navy);font-weight:650} /* ---------- 16 · content components ---------- */ /* course sub-nav */ .subnav{position:sticky;top:var(--nav-main-h);z-index:40;border-bottom:1px solid var(--hairline);background:var(--card)} @supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))) and (background:color-mix(in srgb,red 50%,blue)){ .subnav{ background:color-mix(in srgb,var(--card) 72%,transparent); -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3) } } .subnav .wrap{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none} .subnav .wrap::-webkit-scrollbar{display:none} .subnav a{ flex:none;padding:16px 13px;text-decoration:none;font-size:13px;font-weight:650;color:var(--slate); border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast),border-color var(--dur-fast) } .subnav a:hover{color:var(--navy)} .subnav a.on{color:var(--navy);border-bottom-color:var(--crimson)} .subnav .apply-mini{ margin-left:auto;margin-bottom:0;padding:8px 16px;border-bottom:none;border-radius:var(--r-s); background:var(--crimson);color:var(--accent-ink);font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase } .subnav .apply-mini:hover{background:var(--crimson-hover);color:var(--accent-ink)} /* contact section (navy field) */ .contact-sec{color:#fff} .contact-sec .sec-head .label{color:var(--terracotta-soft)} .contact-sec .sec-head h2{color:#fff} .contact-sec .sec-head h2::after{background:var(--terracotta-soft)} .contact-sec .sec-head p{color:rgba(255,255,255,.72)} .contact-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:var(--hs-rule) solid rgba(255,255,255,.18)} .contact-card{padding:var(--hs-space-20) 2px;border-bottom:var(--hs-rule) solid rgba(255,255,255,.18);background:none;border-radius:0;box-shadow:none} .contact-card .label{color:var(--terracotta-soft);margin-bottom:var(--hs-space-6)} .contact-card>a{font-family:var(--display);font-size:var(--hs-stat-size);font-weight:600;color:#fff;text-decoration:none} .contact-card>a:hover{text-decoration:underline;text-underline-offset:4px} .contact-card p{font-size:14px;color:rgba(255,255,255,.72);margin-top:var(--hs-space-6)} .contact-card .map-link{font-size:13px;font-weight:650;color:#fff;text-underline-offset:3px} .map-embed{position:relative;margin-top:var(--hs-space-32);border:var(--hs-rule) solid var(--glass-brd);border-radius:var(--r-m);overflow:hidden} .map-embed iframe{display:block;width:100%;height:300px;border:0} .map-embed__prompt{ position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--hs-space-12); width:100%;border:0;margin:0;cursor:pointer;color:#fff;font-family:inherit; background:linear-gradient(180deg,rgba(10,17,32,.5),rgba(10,17,32,.68)); transition:background var(--dur-fast) var(--ease) } .map-embed__prompt:hover{background:linear-gradient(180deg,rgba(10,17,32,.58),rgba(10,17,32,.76))} .map-embed__prompt svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9} .map-embed__prompt span{ padding:var(--hs-space-11) var(--hs-space-20);border:var(--hs-rule) solid rgba(255,255,255,.4);border-radius:var(--r-s); background:rgba(255,255,255,.12);font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase } .map-embed.is-active .map-embed__prompt{display:none} /* CTA banner — a full-width navy statement band */ .cta-banner{ display:flex;flex-direction:column;gap:22px; padding:clamp(30px,5vw,52px) clamp(22px,4vw,56px);color:#fff;border-radius:var(--r-s); background: radial-gradient(620px 300px at 88% -20%,rgba(217,112,44,.2),transparent 60%), linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px), var(--navy-deep); background-size:auto,44px 44px,44px 44px,auto; border:1px solid var(--glass-brd);box-shadow:0 24px 56px rgba(19,35,75,.22) } .cta-banner h3{color:#fff;font-size:var(--hs-section-h2-size);line-height:var(--hs-section-h2-line);margin-bottom:var(--hs-space-8);letter-spacing:-.02em} .cta-banner p{color:rgba(255,255,255,.76);font-size:14.5px;max-width:52ch} .cta-banner .btn-primary{flex:none} /* compare table — real table ≥760px, stacked ledger below */ .table-scroll{border-radius:var(--r-m)} .cmp{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--hairline);font-size:14.5px} .cmp th,.cmp td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--hairline)} .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .cmp tr{display:block;padding:6px 0} .cmp td{display:block;border-bottom:0;padding:4px 16px} .cmp td:first-child{padding-top:12px} .cmp td:last-child{padding-bottom:14px} .cmp tr+tr{border-top:1px solid var(--hairline)} .cmp td b{color:var(--navy)} .cmp .num{font-family:var(--display);font-weight:600;font-size:16px;color:var(--navy)} .cmp td[data-th]::before{content:attr(data-th);display:block;font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--terracotta);margin-bottom:1px} /* admissions page grids */ .adm-grid .mini-steps span a{color:var(--navy);font-weight:650} .adm-grid>div>.cta-row{margin-top:var(--hs-space-20)} .adm-grid .scholar:first-child{margin-top:0} .adm-grid .scholar+.scholar{margin-top:var(--hs-space-14)} /* panels — the two accent containers allowed in body copy */ .scholar{margin-top:var(--hs-space-24);padding:var(--hs-space-24);color:#fff;border-radius:var(--r-s);border-left:var(--hs-accent-rule) solid var(--crimson);background:var(--navy-deep)} .scholar h3{color:#fff;font-size:19px;margin-bottom:var(--hs-space-8)} .scholar p{font-size:14.5px;color:rgba(255,255,255,.8)} .scholar a{color:#fff;font-weight:650;text-underline-offset:3px} .scholar#scholarships{background:var(--navy-deep);padding:var(--hs-space-24)} .source-note{padding:var(--hs-space-16) var(--hs-space-18);border-left:var(--hs-accent-rule) solid var(--terracotta);background:var(--surface-tint);border-radius:0 var(--r-s) var(--r-s) 0;font-size:13.5px;color:var(--slate)} .source-note a{font-weight:650;color:var(--navy)} .fee-note{display:flex;gap:var(--hs-space-14);align-items:flex-start;margin-top:var(--hs-space-18);padding:var(--hs-space-18) var(--hs-space-20);background:var(--surface-tint);border-radius:var(--r-s)} .fee-note svg{width:var(--hs-space-24);height:var(--hs-space-24);flex:none;fill:none;stroke:var(--terracotta);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .fee-note b{display:block;color:var(--navy)} .fee-note span{display:block;font-size:13.5px;color:var(--slate)} /* inquiry form */ .inquiry-form{margin-top:var(--hs-space-22);padding-top:var(--hs-space-22);border-top:var(--hs-rule) solid var(--hairline)} .inquiry-form label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:var(--hs-space-14)} .inquiry-form input,.inquiry-form select{ margin-top:var(--hs-space-6);width:100%;min-height:var(--hs-control-standard);padding:var(--hs-space-11) var(--hs-space-13);font:inherit;font-size:16px; background:var(--field);color:var(--ink);border:var(--hs-rule) solid var(--hairline);border-radius:var(--r-s) } .inquiry-form input:focus,.inquiry-form select:focus{outline:2px solid var(--navy);outline-offset:1px} .inquiry-form .btn{margin-top:0;width:100%;border:none;cursor:pointer} .inquiry-alt{display:block;text-align:center;margin-top:12px;padding:8px;font-size:13px;color:var(--slate);text-decoration:none} .inquiry-alt:hover{text-decoration:underline;color:var(--navy)} .apply-steps{margin-bottom:var(--hs-space-20)} .apply-card{background:var(--card);border:var(--hs-rule) solid var(--hairline);border-radius:var(--r-m);padding:var(--hs-space-22);box-shadow:var(--surface-shadow)} .apply-card .fineprint{margin-top:var(--hs-space-16)} /* article layout (guides / SEO pages) */ .article-body{max-width:var(--hs-measure-prose-wide)} /* article prose is primary reading content — never reveal-hidden */ .article-body.rv{opacity:1!important;visibility:visible!important;transform:none!important} .article-body h2{margin:var(--hs-space-40) var(--hs-space-0) var(--hs-space-12);font-size:var(--hs-feature-h2-size);line-height:var(--hs-feature-h2-line);letter-spacing:var(--hs-feature-h2-track);font-weight:500} .article-body h2:first-child{margin-top:var(--hs-space-0)} .article-body h3{margin:var(--hs-space-26) var(--hs-space-0) var(--hs-space-8);font-size:var(--hs-section-h3-size);line-height:var(--hs-section-h3-line);font-weight:600} .article-body p,.article-body li{font-size:var(--hs-body-size);line-height:var(--hs-body-line);color:var(--slate)} .article-body p{margin-bottom:var(--hs-gap-prose)} .article-body ul,.article-body ol{margin:var(--hs-space-0) var(--hs-space-0) var(--hs-space-20) var(--hs-space-22)} .article-body a{font-weight:650;color:var(--navy);text-underline-offset:3px} .article-aside{display:grid;gap:var(--hs-space-14)} .fact-panel{padding:var(--hs-space-22);background:var(--surface-tint);border:0;border-top:var(--hs-rule-active) solid var(--navy);border-radius:0;box-shadow:none} .fact-panel h3{margin-bottom:var(--hs-space-12);font-size:19px} .fact-panel ul{list-style:none} .fact-panel li{padding:var(--hs-space-9) var(--hs-space-0);border-bottom:var(--hs-rule) solid var(--hairline);font-size:13.5px;color:var(--slate)} .fact-panel li:last-child{border-bottom:0} .fact-panel a{font-weight:650;color:var(--navy)} .article-aside .scholar{margin-top:0} /* ---------- 17 · footer — compact institutional directory ---------- */ .site-footer{ position:relative;overflow:hidden;color:#fff;background: radial-gradient(680px 300px at 12% 0%,rgba(217,112,44,.11),transparent 65%), linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px), var(--navy-ink); background-size:auto,44px 44px,44px 44px,auto } .site-footer::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--terracotta),var(--terracotta-soft) 60%,transparent 100%)} /* §02: terracotta only */ .footer-shell{position:relative;width:min(1280px,100%);margin-inline:auto;padding-inline:var(--gutter)} .footer-top{position:relative;display:grid;gap:20px;padding:28px 0 22px;border-bottom:1px solid rgba(255,255,255,.13)} .footer-brand{min-width:0} .footer-brand__head{display:flex;align-items:center;gap:12px;margin-bottom:20px} .footer-brand__mark{width:70px;height:70px;display:grid;place-items:center;flex:none;padding:5px;border-radius:50%;background:linear-gradient(155deg,var(--terracotta),var(--navy-deep) 55%);box-shadow:0 8px 20px rgba(0,0,0,.35)} /* §02: terracotta+navy only, no raw hex */ .footer-brand__mark::before{content:"";position:absolute} .footer-brand__mark img{display:block;width:60px;height:60px;padding:4px;border-radius:50%;object-fit:contain;background:#fff} .footer-brand__rule{width:1px;align-self:stretch;background:rgba(255,255,255,.16)} .footer-lockup{min-width:0} .footer-lockup>span,.footer-lockup>small{display:block;color:rgba(255,255,255,.66);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase} .footer-lockup>strong{display:block;color:var(--terracotta-soft);font-family:var(--display);font-size:clamp(1.45rem,3vw,1.75rem);font-style:italic;line-height:1.05} .footer-lockup>small{margin-top:4px;color:rgba(217,112,44,.88);font-size:12px;letter-spacing:.1em} .footer-brand h2{max-width:34ch;margin-bottom:8px;color:#fff;font-size:clamp(1.25rem,1.05rem + .8vw,1.55rem);line-height:1.26} .footer-brand>p{max-width:58ch;color:rgba(255,255,255,.72);font-size:14px;line-height:1.6} .footer-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} .footer-badges span{padding:5px 10px;border:1px solid rgba(255,255,255,.15);border-radius:99px;color:rgba(255,255,255,.82);font-size:12px;font-weight:650;line-height:1.2} .footer-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-self:start} .footer-stats>div,.footer-cta,.footer-affiliation{border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(255,255,255,.05)} .footer-stats>div{padding:13px 14px} .footer-stats strong{display:block;color:var(--terracotta-soft);font-family:var(--display);font-size:1.45rem;line-height:1} .footer-stats span{display:block;margin-top:5px;color:rgba(255,255,255,.68);font-size:12px;line-height:1.35} .footer-cta{align-self:start;padding:18px} .footer-cta .label{margin-bottom:7px;color:var(--terracotta-soft)} .footer-cta h3{max-width:24ch;margin-bottom:14px;color:#fff;font-size:1.1rem;font-style:italic;line-height:1.35} .footer-cta__actions{display:flex;flex-wrap:wrap;gap:8px} .footer-cta .btn-primary,.footer-secondary{min-height:44px;padding:10px 16px} .footer-secondary{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-s);color:#fff;text-decoration:none;font-size:13px;font-weight:650} .footer-secondary:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)} .footer-join{display:none} .footer-contact{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.13)} .footer-contact-card{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:6px;min-height:56px;padding:7px 8px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(255,255,255,.05);color:#fff;text-decoration:none;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)} .footer-contact-card--primary{border-color:rgba(196,30,58,.35);background:rgba(196,30,58,.12)} .footer-contact-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)} .footer-icon{width:30px;height:36px;display:grid;place-items:center;color:var(--terracotta-soft)} .footer-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .footer-contact-card small{display:block;margin-bottom:2px;color:rgba(255,255,255,.68);font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase} .footer-contact-card b{display:block;overflow:hidden;color:#fff;font-size:14px;font-weight:650;line-height:1.25;text-overflow:ellipsis;white-space:nowrap} .footer-directory{display:grid;gap:18px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.13)} .footer-link-groups{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px} .footer-link-group h3{margin-bottom:7px;color:var(--terracotta-soft);font-family:var(--sans);font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase} .footer-link-group a{display:flex;align-items:center;min-height:40px;color:rgba(255,255,255,.76);font-size:14px;line-height:1.35;text-decoration:none} .footer-link-group a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px} .footer-affiliation{display:flex;align-items:center;gap:12px;align-self:start;padding:14px} .footer-affiliation img{width:34px;height:auto;flex:none} .footer-eyebrow{display:block;margin-bottom:3px;color:var(--terracotta-soft);font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase} .footer-affiliation strong{display:block;color:#fff;font-family:var(--display);font-size:16px;line-height:1.25} .footer-affiliation p{margin-top:4px;color:rgba(255,255,255,.7);font-size:13px;line-height:1.45} .foot-base{position:relative;background:rgba(0,0,0,.18);color:rgba(255,255,255,.68);font-size:12.5px;line-height:1.5} .foot-base__inner{width:min(1280px,100%);margin-inline:auto;padding:14px var(--gutter);display:flex;flex-direction:column;align-items:flex-start;gap:12px} .foot-base a{color:rgba(255,255,255,.82);text-decoration:none} .foot-base a:hover{text-decoration:underline;text-underline-offset:3px} .footer-social{display:flex;align-items:center;gap:9px} .footer-social>span{color:var(--terracotta-soft);font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase} .footer-social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;color:#fff;transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)} .footer-social a:hover{transform:translateY(-2px);background:var(--crimson);border-color:transparent} /* §02: crimson for CTAs, single accent */ .footer-social svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .foot-base__nav{display:flex;flex-wrap:wrap;gap:6px 18px} .foot-base__nav a{display:inline-flex;align-items:center;min-height:40px} /* ---------- 18 · sticky mobile action bar ---------- */ .sticky-cta{ position:fixed;left:0;right:0;bottom:0;z-index:60;display:none; grid-template-columns:1fr auto auto;gap:8px;align-items:stretch; padding:9px 12px calc(9px + env(safe-area-inset-bottom)); background:var(--chrome-solid);border-top:1px solid rgba(255,255,255,.14) } @supports (backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px)){ .sticky-cta{background:var(--chrome);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} } .sticky-cta .btn{min-height:44px;padding:11px 18px} .sticky-cta .sticky-ico{ display:grid;place-items:center;width:46px;border:1px solid var(--glass-brd);border-radius:var(--r-s); background:var(--glass);color:#fff } .sticky-cta .sticky-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} @media(max-width:719px){ .sticky-cta{display:grid} body{padding-bottom:64px} } /* ============================================================ 19 · wide-screen composition — enhancement tiers ============================================================ */ /* --- ≥560px: two-up rhythms --- */ @media(min-width:560px){ .fac-grid{grid-template-columns:1fr 1fr;gap:0 44px} .chip-grid{grid-template-columns:1fr 1fr;gap:0 44px} .seo-grid{grid-template-columns:1fr 1fr} .sem-grid{grid-template-columns:1fr 1fr;gap:32px 40px} .notice-list a{display:flex;gap:24px;align-items:baseline} .notice-list .date{flex:none;width:92px;margin-bottom:0} .footer-cta__actions{flex-direction:row;align-items:center} .footer-cta .btn,.footer-secondary{flex:0 0 auto} .footer-link-groups{grid-template-columns:1fr 1fr;gap:18px 28px} .admission-welcome__facts>div{padding:13px 14px} .admission-welcome__facts small{display:block} .admission-welcome__actions{grid-template-columns:1.15fr .85fr} .stats .wrap,.stats .wrap--wide{grid-template-columns:repeat(4,1fr)} .trust-strip{grid-template-columns:repeat(3,1fr)} } /* --- ≥760px: splits activate; tables become tables --- */ @media(min-width:760px){ :root{--tu-bar-h:34px} .split,.media-row{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center} .media-row figure{order:0} .two-col{grid-template-columns:1.15fr .85fr;align-items:start} .adm-grid{grid-template-columns:1.2fr .8fr;align-items:start} .about-grid{grid-template-columns:1fr 1fr} .article-layout{grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,5vw,72px);align-items:start} .article-aside{position:sticky;top:calc(var(--nav-main-h) + var(--hs-space-28))} .prog-grid{grid-template-columns:repeat(3,1fr)} .seo-grid{grid-template-columns:repeat(3,1fr)} .contact-grid{grid-template-columns:repeat(3,1fr);gap:0 var(--hs-space-32);border-top:0} .contact-card{border-top:var(--hs-rule) solid rgba(255,255,255,.18);border-bottom:0;padding:var(--hs-space-22) 2px} .quickbar .wrap--wide{grid-template-columns:repeat(3,1fr)} .quickbar a:nth-child(odd){border-right:0} .quickbar a:not(:nth-child(3n)){border-right:1px solid var(--hairline)} .mini-steps{grid-template-columns:1fr 1fr;gap:0 var(--hs-space-40);border-top:0} .mini-steps div{border-top:var(--hs-rule-active) solid var(--navy);border-bottom:0;margin-bottom:var(--hs-space-18)} .adm-grid .mini-steps{grid-template-columns:1fr 1fr} .job{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"body action" "tags action";align-items:center;gap:var(--hs-space-8) var(--hs-space-32);padding:var(--hs-space-20) var(--hs-space-8)} .job>div{grid-area:body} .job .tags{grid-area:tags;margin:0} .job .btn{grid-area:action;align-self:center;justify-self:end} .footer-top{grid-template-columns:minmax(0,1.35fr) minmax(180px,.65fr);align-items:start} .footer-brand{grid-row:1/span 2} .footer-cta{grid-column:2} .footer-directory{grid-template-columns:minmax(0,1fr) 240px;align-items:start} .footer-link-groups{grid-template-columns:1fr 1fr} .foot-base__inner{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap} .cta-banner{flex-direction:row;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap} .map-embed iframe{height:360px} .admission-welcome{padding:24px} .admission-welcome__dialog{max-height:calc(100dvh - 48px);grid-template-columns:minmax(260px,.76fr) minmax(0,1.42fr);overflow:hidden} .admission-welcome__poster{min-height:560px;padding:30px} .admission-welcome__poster>strong{margin-top:auto;margin-bottom:auto;font-size:clamp(92px,10vw,140px);transform:rotate(-90deg) translateY(-2%);transform-origin:center;align-self:center} .admission-welcome__content{max-height:calc(100dvh - 48px);overflow:auto;padding:48px 44px 34px} .admission-welcome__eyebrow{margin-right:52px} /* compare table becomes a real table */ .table-scroll{overflow-x:auto} .cmp{border-radius:var(--r-m);overflow:hidden} .cmp thead{position:static;width:auto;height:auto;overflow:visible;clip:auto} .cmp tr{display:table-row;padding:0} .cmp td{display:table-cell;border-bottom:1px solid var(--hairline);padding:14px 16px} .cmp tr+tr{border-top:0} .cmp th{background:var(--navy-deep);color:#fff;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase} html[data-theme="dark"] .cmp th{background:var(--navy-ink)} .cmp tr:last-child td{border-bottom:none} .cmp td[data-th]::before{display:none} .hero-highlights{grid-template-columns:repeat(4,1fr)} .hero-highlight{border-bottom:0!important;padding:14px 18px} .hero-highlight:nth-child(odd){border-right:0} .hero-highlight:not(:last-child){border-right:1px solid rgba(255,255,255,.11)} .page-hero{padding:calc(var(--nav-h) + 64px) 0 64px} .page-hero .facts div{padding-right:34px} .lineart{right:var(--gutter);bottom:8%;width:min(430px,36vw);opacity:.42} .statement-text{max-width:none} } /* --- ≥1000px: multi-column ledgers, quiet asymmetry --- */ /* Phone admission welcome: compact enough to avoid nested scrolling on common iPhone portrait viewports while preserving 44px touch targets. */ @media(max-width:759px){ .admission-welcome{ padding: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important; overscroll-behavior:contain } .admission-welcome__dialog{ width:min(430px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch } .admission-welcome__close{right:10px;top:10px;width:44px;height:44px} .admission-welcome__poster{ min-height:96px;padding:13px 16px;display:grid; grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr; column-gap:14px;align-items:center } .admission-welcome__edition{grid-column:1;grid-row:1;font-size:8px;letter-spacing:.14em} .admission-welcome__poster>strong{ grid-column:2;grid-row:1/span 2;align-self:center;justify-self:end;margin:0; font-size:clamp(58px,18vw,72px);line-height:.72;transform:none } .admission-welcome__poster-foot{ grid-column:1;grid-row:2;align-items:center;justify-content:flex-start;gap:9px;margin-top:7px } .admission-welcome__stamp{width:34px;height:34px;font-size:10px} .admission-welcome__poster-foot p{font-size:8px;line-height:1.2;letter-spacing:.1em;text-align:left} .admission-welcome__content{max-height:none;overflow:visible;padding:16px} .admission-welcome__eyebrow{gap:7px;margin:0 48px 8px 0;font-size:8px;letter-spacing:.11em} .admission-welcome__eyebrow i{width:6px;height:6px} .admission-welcome__content h2{font-size:clamp(27px,7.6vw,32px);line-height:1;letter-spacing:-.03em} .admission-welcome__intro{margin-top:8px;font-size:13px;line-height:1.42} .admission-welcome__facts{gap:4px;margin-top:12px} .admission-welcome__facts>div{padding:7px 6px} .admission-welcome__facts span{margin-bottom:4px;font-size:7px;letter-spacing:.1em} .admission-welcome__facts b{font-size:11px;line-height:1.18} .admission-welcome__facts small{display:none} .admission-welcome__actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:14px} .admission-welcome__primary,.admission-welcome__explore{min-height:52px;gap:8px;padding:8px 10px;touch-action:manipulation} .admission-welcome__primary{font-size:11px;line-height:1.2} .admission-welcome__explore b{font-size:11px;line-height:1.15} .admission-welcome__label-desktop,.admission-welcome__explore .admission-welcome__label-desktop,.admission-welcome__explore small{display:none} .admission-welcome__label-mobile,.admission-welcome__explore .admission-welcome__label-mobile{display:inline} .admission-welcome__primary svg,.admission-welcome__explore svg{width:20px;height:20px} .admission-welcome__note{margin-top:8px;font-size:9px} } @media(max-width:360px){ .admission-welcome__poster,.admission-welcome__facts{display:none} .admission-welcome__content{padding:14px 16px} .admission-welcome__content h2{font-size:26px} } /* Safari's visible viewport can become much shorter while its browser chrome is expanded. Decorative details collapse first; both decisions stay visible. */ @media(max-width:759px) and (max-height:560px){ .admission-welcome__poster,.admission-welcome__facts{display:none} .admission-welcome__content{padding:14px 16px} .admission-welcome__content h2{font-size:clamp(26px,7vw,30px)} } /* Wide phones in landscape cross the desktop width breakpoint but still have phone-height viewports. Keep those as a compact single-panel dialog. */ @media(min-width:760px) and (max-height:599px){ .admission-welcome{ padding: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important } .admission-welcome__dialog{width:min(680px,100%);max-height:100%;grid-template-columns:1fr;overflow:auto} .admission-welcome__poster,.admission-welcome__facts{display:none} .admission-welcome__content{max-height:none;overflow:visible;padding:18px 22px} .admission-welcome__eyebrow{margin:0 52px 8px 0} .admission-welcome__content h2{font-size:clamp(28px,4vw,36px);line-height:1} .admission-welcome__intro{margin-top:8px;font-size:13px;line-height:1.42} .admission-welcome__actions{grid-template-columns:1.15fr .85fr;gap:8px;margin-top:14px} .admission-welcome__primary,.admission-welcome__explore{min-height:48px;touch-action:manipulation} .admission-welcome__label-desktop,.admission-welcome__explore .admission-welcome__label-desktop,.admission-welcome__explore small{display:none} .admission-welcome__label-mobile,.admission-welcome__explore .admission-welcome__label-mobile{display:inline} .admission-welcome__note{margin-top:8px} } @media(min-width:1000px){ .sem-grid{grid-template-columns:repeat(4,1fr);gap:0 36px} .chip-grid{grid-template-columns:repeat(3,1fr);gap:0 44px} .mini-steps{grid-template-columns:repeat(4,1fr);gap:0 var(--hs-space-32)} .adm-grid .mini-steps{grid-template-columns:1fr 1fr} .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} .split--rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} .media-row{gap:clamp(36px,5vw,72px)} .footer-top{grid-template-columns:minmax(0,1.1fr) minmax(170px,.7fr) minmax(280px,1fr);gap:24px} .footer-brand{grid-row:auto} .footer-cta{grid-column:auto} .footer-contact{grid-template-columns:repeat(4,1fr);gap:10px} .footer-directory{grid-template-columns:minmax(0,1fr) minmax(190px,1.1fr)} .footer-link-groups{grid-template-columns:repeat(4,1fr);gap:18px} .footer-join{display:block;position:absolute;z-index:0;right:0;bottom:10px;width:54%;overflow:hidden;color:rgba(255,255,255,.11);font-family:var(--display);font-size:clamp(3rem,5vw,4rem);font-style:italic;font-weight:700;line-height:1;pointer-events:none;text-align:center} .footer-brand,.footer-stats,.footer-cta{position:relative;z-index:1} .job p{max-width:72ch} .quickbar .wrap--wide{grid-template-columns:repeat(6,1fr)} .quickbar a{border-right:1px solid var(--hairline);border-bottom:0;padding:16px 18px} .quickbar a:nth-child(3n){border-right:1px solid var(--hairline)} .quickbar a:last-child{border-right:0} .news-panel__inner{min-height:60px} .news-item .ticker-text{font-size:15.5px;-webkit-line-clamp:1} } /* --- ≥1181px: desktop header — full-width, full-height cells --- */ @media(min-width:1181px){ :root{--nav-main-h:72px;--contact-h:36px} /* contact utility row: inline priority links, no buttons */ .tc-actions{display:none} .tc-links{display:flex;flex:1;min-width:0;align-items:center;gap:clamp(14px,2vw,34px)} .tc-links a{ display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 2px; color:#fff;text-decoration:none;font-weight:650;font-size:12px;white-space:nowrap } .tc-links a:hover b{text-decoration:underline;text-underline-offset:3px} .tc-links .tc-role{color:rgba(255,255,255,.78);font-weight:600;font-size:12px;letter-spacing:.02em} .tc-links b{font-weight:750;letter-spacing:.01em} .tc-links .tc-line--wa .tc-ico{color:#57d07f;opacity:1} .nav{gap:0;padding-right:0} header.site .nav{box-shadow:inset 0 -1px 0 var(--header-hair)} .brand-block{gap:14px;flex:0 0 auto;overflow:visible} .brand{gap:11px} .brand img{width:60px;height:60px;filter:none} .brand b{font-size:17.5px;letter-spacing:.04em;line-height:1} .brand small{margin-top:6px;font-size:12px;letter-spacing:.14em} /* TU affiliation — plain mark: divider + emblem + two-line name */ .affiliation-mark{ display:flex;align-items:center;gap:10px;min-width:max-content; padding:0;text-decoration:none;color:var(--header-ink) } .affiliation-mark::before{content:"";align-self:stretch;width:1px;background:var(--header-hair)} .affiliation-mark>img{width:22px;height:26px;object-fit:contain} .affiliation-mark small,.affiliation-mark strong{display:block;font-family:var(--sans);line-height:1.3} .affiliation-mark small{margin-bottom:3px;font-size:12px;font-weight:650;color:var(--header-ink-dim)} .affiliation-mark strong{font-size:12.5px;font-weight:700;color:var(--header-ink);white-space:nowrap} .tu-ribbon{display:none} :root{--tu-bar-h:0px} .menu-btn{display:none} nav.links{ display:flex;position:static;flex-direction:row;gap:0;align-self:stretch;height:100%; max-height:none;overflow:visible;padding:0;background:none;border:0;box-shadow:none } nav.links>a,.nav-item{position:relative;height:100%;display:flex;align-items:center;border-bottom:0} nav.links>a:not(.nav-cta),.nav-item .nav-link,.nav-item .nav-caret{ color:var(--header-ink-soft);font-size:15px;font-weight:500;letter-spacing:.005em; transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease) } nav.links>a:not(.nav-cta){padding:0 clamp(8px,1vw,22px)} nav.links>a:not(.nav-cta):hover{background:var(--header-glass-bg);color:var(--header-ink)} nav.links>a.active:not(.nav-cta){background:transparent;color:var(--header-ink);border-left:0;padding-left:clamp(8px,1vw,22px);position:relative} nav.links>a.active:not(.nav-cta)::after{content:"";position:absolute;bottom:0;left:15%;right:15%;height:3px;background:var(--crimson)} nav.links a.active{border-left:0;padding-left:clamp(8px,1vw,22px)} nav.links>a.nav-vacancy{gap:clamp(4px,.4vw,9px)} .nav-vacancy__icon{width:clamp(12px,1vw,16px);height:clamp(12px,1vw,16px)} nav.links>a.nav-vacancy:hover,nav.links>a.nav-vacancy:focus-visible{background:rgba(217,112,44,.16);color:var(--header-ink)} nav.links>a.nav-vacancy.active{background:rgba(217,112,44,.24);color:var(--header-ink);border-left:0} .nav-item{flex-wrap:nowrap;border-bottom:0} .nav-item .nav-link{height:100%;display:flex;align-items:center;padding:0 2px 0 clamp(10px,1.3vw,24px);border-bottom:0} .nav-caret{ height:100%;width:44px;min-width:44px;flex:none; opacity:.75;transition:opacity var(--dur-fast) var(--ease) } .nav-caret svg{width:13px;height:13px} .nav-item:hover,.nav-item:focus-within,.nav-item.is-open{background:var(--header-glass-bg)} .nav-item:has(.nav-link.active){background:transparent} .nav-item:has(.nav-link.active)::after{content:"";position:absolute;bottom:0;left:15%;right:15%;height:3px;background:var(--crimson)} .nav-item:hover .nav-link,.nav-item:hover .nav-caret, .nav-item:focus-within .nav-link,.nav-item:focus-within .nav-caret, .nav-item.is-open .nav-link,.nav-item.is-open .nav-caret, .nav-item .nav-link.active{color:var(--header-ink);opacity:1} .nav-item:hover .nav-caret svg,.nav-item:focus-within .nav-caret svg,.nav-item.is-open .nav-caret svg{transform:rotate(180deg)} /* dropdown: crisp warm-paper extension flush to its parent cell */ .nav-dropdown{ position:absolute;top:100%;left:0;margin:0;min-width:270px;padding:0; display:flex;flex-direction:column;flex-basis:auto;border-left:0; background:var(--bg); border:1px solid var(--hairline);border-top:0;border-radius:0 0 4px 4px; box-shadow:0 16px 32px rgba(19,35,75,.18); opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px); transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility 0s linear var(--dur-fast); z-index:5 } .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.is-open .nav-dropdown{ opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0); transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility 0s } .nav-item .nav-dropdown a{ display:flex;align-items:center;min-height:54px;padding:0 22px; border-bottom:1px solid var(--hairline);border-left:0; color:var(--navy);text-decoration:none;font-size:14px;font-weight:650; transition:background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),padding-left var(--dur-fast) var(--ease) } .nav-item .nav-dropdown a:last-child{border-bottom:0} .nav-item .nav-dropdown a:hover,.nav-item .nav-dropdown a:focus-visible{ background:var(--surface-tint);padding-left:28px;box-shadow:inset 3px 0 0 var(--terracotta);color:var(--navy) } header.site .nav-dropdown a:focus-visible{outline-color:var(--crimson)} .nav-controls{height:100%;flex:0 0 auto;margin-left:auto} .theme-btn{height:100%;padding:0 clamp(6px,.8vw,10px);color:var(--header-ink-soft);border-radius:0} .theme-btn::before{display:none} .theme-btn:hover{background:var(--header-glass-bg);color:var(--header-ink)} .theme-btn::after{content:"Dark";white-space:nowrap;display:inline} html[data-theme="dark"] .theme-btn::after{content:"Light"} nav.links a.nav-cta{ margin:0 0 0 16px;padding:8px 20px !important;border-radius:4px !important; height:36px !important;align-self:center !important; background:rgba(255, 255, 255, 0.08) !important; border:1px solid rgba(255, 255, 255, 0.2) !important; color:#fff !important; font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; transition:all var(--dur-fast) var(--ease) } nav.links a.nav-cta:hover{ background:rgba(255, 255, 255, 0.16) !important; border-color:rgba(255, 255, 255, 0.4) !important; } } @media(min-width:1181px) and (max-width:1320px){ nav.links>a:not(.nav-cta){padding-inline:var(--hs-space-8)} nav.links>a.active:not(.nav-cta),nav.links a.active{padding-left:var(--hs-space-8)} .nav-item .nav-link{padding-left:var(--hs-space-8)} } @media(min-width:1360px){ .theme-btn{padding:0 20px} .theme-btn::after{content:"Switch to dark mode"} html[data-theme="dark"] .theme-btn::after{content:"Switch to light mode"} } /* --- ≥1440px: wide-rail editorial refinements --- */ @media(min-width:1440px){ .sec-head{max-width:820px} .statement .wrap>*{margin-left:8.33%} .page-hero h1{max-width:26ch} } /* mobile drawer boundary: everything below 1181px keeps the drawer; nav row and ribbon sizes step down on small phones */ @media(max-width:360px){ .nav{padding-inline:12px} .brand{gap:8px} .brand img{width:40px;height:40px} .brand b{font-size:12.5px;letter-spacing:.015em} .brand small{display:none} .nav-controls{gap:6px} } /* Desktop tight band: at the 12px type floor the ESTD line is wider than the brand name, so between the 1181px nav breakpoint and the 1320px content rail it would widen the single header row into horizontal overflow. Cap the brand text block there so the ESTD wraps to two balanced lines instead; at ≥1320px there is room for it on one line again. */ @media(min-width:1181px) and (max-width:1319px){ .brand b{max-width:195px} .brand small{text-wrap:balance} } /* ---------- 21 · Visual Resource Hub (Blog Redesign) ---------- */ .resource-hub { margin-top: var(--hs-space-32); } .resource-tab-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; margin-bottom: var(--hs-space-32); scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .resource-tab-row::-webkit-scrollbar { display: none; /* Safari/Chrome */ } .resource-tab { flex: 0 0 auto; padding: 10px 20px; font-family: var(--sans); font-size: 13px; font-weight: 650; color: var(--navy); background: var(--surface-tint); border: 1px solid var(--hairline); border-radius: 30px; cursor: pointer; transition: all var(--dur-fast) var(--ease); } .resource-tab:hover { border-color: var(--terracotta); background: var(--card); transform: translateY(-1px); } .resource-tab.is-active { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 4px 12px rgba(14, 22, 71, 0.15); } html[data-theme="dark"] .resource-tab { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.05); } html[data-theme="dark"] .resource-tab:hover { border-color: var(--terracotta); background: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .resource-tab.is-active { background: var(--navy-mid); /* §02: terracotta is a highlight, not a UI fill */ color: #fff; border-color: var(--navy-mid); box-shadow: 0 4px 12px rgba(19, 35, 75, 0.4); } /* Resource Grid */ .resource-grid { display: grid; grid-template-columns: 1fr; gap: var(--hs-space-24); } @media(min-width:640px) { .resource-grid { grid-template-columns: repeat(2, 1fr); } } @media(min-width:1024px) { .resource-grid { grid-template-columns: repeat(3, 1fr); } } /* Resource Card */ .resource-card { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-l); overflow: hidden; text-decoration: none; box-shadow: var(--surface-shadow); transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); } .resource-card:hover { transform: translateY(-6px); border-color: var(--terracotta); box-shadow: 0 20px 38px rgba(14, 22, 71, 0.08); } html[data-theme="dark"] .resource-card:hover { box-shadow: 0 20px 38px rgba(0, 0, 0, 0.35); border-color: var(--terracotta); } .resource-card__media { position: relative; overflow: hidden; aspect-ratio: 16/10; border-bottom: 1px solid var(--hairline); } .resource-card__media .ice-picture { display: block; width: 100%; height: 100%; } .resource-card__media .ice-picture img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease); } .resource-card:hover .resource-card__media .ice-picture img { transform: scale(1.05); } .resource-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--hs-space-20); } .resource-card__body .label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--terracotta); margin-bottom: var(--hs-space-8); } .resource-card__body h3 { font-family: var(--display); /* §03: use design system token, not bare stack */ font-size: 19px; font-weight: 500; line-height: 1.4; color: var(--navy); margin: 0 0 var(--hs-space-12) 0; transition: color var(--dur-fast) var(--ease); } html[data-theme="dark"] .resource-card__body h3 { color: #fff; } .resource-card:hover .resource-card__body h3 { color: var(--terracotta); } .resource-card__body p { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--slate); margin: 0 0 var(--hs-space-20) 0; flex-grow: 1; } html[data-theme="dark"] .resource-card__body p { color: rgba(255, 255, 255, 0.7); } .resource-card__body .go { font-family: var(--sans); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--crimson); display: inline-flex; align-items: center; gap: 4px; margin-top: auto; transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease); } html[data-theme="dark"] .resource-card__body .go { color: var(--terracotta); } .resource-card:hover .resource-card__body .go { color: var(--navy); gap: 8px; } html[data-theme="dark"] .resource-card:hover .resource-card__body .go { color: #fff; } /* Filtering Animations */ .resource-card.is-hidden { display: none; } .resource-card { animation: fadeIn var(--dur-med) var(--ease) forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---------- 20 · reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} html.motion-ok .sec-head h2::after{transform:scaleX(1)} .hero-video{display:none} .video-ambient{display:none} .typing-cursor{display:none} .news-rail{scroll-behavior:auto} }