/* ════════════════════════════════════════════════════════════════
EduPlus International — Component Styles
Requires design-system.css to be loaded first.
════════════════════════════════════════════════════════════════ */
/* ── Boxed Layout ────────────────────────────────────────────────── */
.site-box {
max-width: 1600px;
margin-inline: auto;
overflow: hidden;
box-shadow: 0 0 120px rgba(0,0,0,0.6);
position: relative;
}
/* ── Fixed atmospheric grid ──────────────────────────────────────── */
/* position: fixed means it stays pinned to the viewport — content
scrolls past it rather than carrying its own tiling texture.
Opacity: 3% + radial vignette mask keeps it subconscious, not seen.
Sections with explicit background-color occlude this layer (expected);
those sections carry their own ::before grid at the same spec. */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: var(--grid-bg-light);
background-size: var(--grid-size);
opacity: 0.03;
-webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
pointer-events: none;
z-index: 0;
}
/* Suppress on full-bleed saturated accent sections */
.no-grid::before { display: none; }
/* ── Header ─────────────────────────────────────────────────────── */
.site-header {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 1600px;
height: var(--header-height);
background: rgba(10, 22, 40, 0.04);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
z-index: var(--z-header);
transition:
background var(--duration-slow) var(--ease-out),
border-color var(--duration-slow) var(--ease-out),
box-shadow var(--duration-slow) var(--ease-out);
}
.site-header.is-scrolled {
background: var(--header-bg-scroll);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid rgba(247, 138, 39, 0.14);
box-shadow: 0 4px 40px rgba(0, 0, 0, 0.35);
}
.header__inner {
display: flex;
align-items: center;
gap: var(--space-4);
height: 100%;
}
/* Logo */
.header__logo {
display: inline-flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
}
.logo__img {
height: 160px;
width: auto;
object-fit: contain;
display: block;
margin-block: -32px;
}
/* Desktop Nav */
.header__nav { display: none; }
@media (min-width: 1024px) { .header__nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: var(--space-1); }
.nav__link {
font-family: var(--font-heading);
font-weight: 400;
display: flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
color: rgba(255,255,255,0.65);
text-decoration: none;
letter-spacing: 0.025em;
position: relative;
transition: color var(--duration-fast) var(--ease-out);
}
/* Slide-in underline */
.nav__link::after {
content: '';
position: absolute;
bottom: 0;
left: var(--space-4);
right: var(--space-4);
height: 1.5px;
background: var(--gold-500);
border-radius: var(--radius-full);
transform: scaleX(0);
transform-origin: left;
transition: transform 200ms var(--ease-out);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--white); font-weight: 600; }
.nav__link.is-active::after { transform: scaleX(1); }
.nav__chevron {
opacity: 0.6;
transition: transform var(--duration-base) var(--ease-out),
opacity var(--duration-fast) var(--ease-out);
}
.nav__link:hover .nav__chevron { opacity: 1; }
.nav__item--mega:hover .nav__chevron { transform: rotate(180deg); opacity: 1; }
/* Mega Menu */
.nav__item--mega { position: relative; }
.mega-menu {
position: absolute;
top: calc(100% + var(--space-3));
left: 50%;
background: rgba(13, 18, 50, 0.96);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(247, 138, 39, 0.15);
border-radius: var(--radius-xl);
padding: var(--space-5);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(var(--space-3));
transition:
opacity var(--duration-base) var(--ease-out),
visibility var(--duration-base),
transform var(--duration-base) var(--ease-out);
min-width: 480px;
}
.nav__item--mega:hover .mega-menu,
.nav__item--mega:focus-within .mega-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.mega-menu__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
.mega-menu__item {
display: grid;
grid-template-columns: 2rem 1fr auto;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
text-decoration: none;
transition: background var(--duration-fast) var(--ease-out);
}
.mega-menu__item:hover { background: rgba(255,255,255,0.07); }
.mega-menu__flag { font-size: var(--text-xl); }
.mega-menu__country { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--white); }
.mega-menu__count { font-size: var(--text-xs); color: var(--gold-400); white-space: nowrap; }
/* Header Actions */
.header__logo { flex: 1; }
.header__actions {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 1;
justify-content: flex-end;
}
.header__actions .btn--gold {
border-radius: var(--radius-full);
padding-inline: var(--space-6);
font-weight: 600;
letter-spacing: 0.03em;
transition: transform var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.header__actions .btn--gold:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(247, 138, 39, 0.4);
}
/* Contact ghost button — hidden on mobile, shown desktop */
.btn--nav-ghost {
display: none;
align-items: center;
justify-content: center;
height: 2.25rem;
padding-inline: var(--space-5);
border-radius: var(--radius-full);
border: 1px solid rgba(255, 255, 255, 0.22);
background: transparent;
color: rgba(255, 255, 255, 0.78);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.025em;
text-decoration: none;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
@media (min-width: 1024px) { .btn--nav-ghost { display: inline-flex; } }
.btn--nav-ghost:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.45);
color: var(--white);
}
/* Vertical separator */
.header__actions-sep {
display: none;
width: 1px;
height: 1.25rem;
background: rgba(255, 255, 255, 0.15);
}
@media (min-width: 1024px) {
.header__actions-sep { display: block; }
}
/* Hamburger */
.nav__toggle {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
border-radius: var(--radius-md);
transition: background var(--duration-fast);
}
.nav__toggle:hover { background: rgba(255,255,255,0.08); }
@media (min-width: 1024px) { .nav__toggle { display: none; } }
.nav__burger { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.nav__burger span { display: block; height: 2px; background: var(--white); border-radius: var(--radius-full); transition: var(--transition-base); transform-origin: center; }
/* Mobile Nav Overlay */
.nav-overlay {
position: fixed;
inset: 0;
z-index: calc(var(--z-header) + 10);
background: var(--navy-950);
opacity: 0;
visibility: hidden;
transform: translateX(100%);
transition: opacity var(--duration-slow) var(--ease-out), visibility var(--duration-slow), transform var(--duration-slow) var(--ease-out);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; transform: translateX(0); }
.nav-overlay__inner { padding: var(--space-8) var(--space-6); height: 100%; overflow-y: auto; }
.nav-overlay__close {
position: absolute;
top: var(--space-5);
right: var(--space-5);
background: rgba(255,255,255,0.08);
border: none;
color: var(--white);
cursor: pointer;
padding: var(--space-2);
border-radius: var(--radius-md);
display: flex;
transition: background var(--duration-fast);
}
.nav-overlay__close:hover { background: rgba(255,255,255,0.16); }
.nav-overlay__list { margin-top: var(--space-12); display: flex; flex-direction: column; gap: var(--space-2); }
.nav-overlay__link {
display: block;
padding: var(--space-4) var(--space-3);
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--white);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.06);
transition: color var(--duration-fast);
}
.nav-overlay__link:hover { color: var(--gold-500); }
.nav-overlay__group-label { display: block; padding: var(--space-4) var(--space-3) var(--space-1); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-400); font-weight: var(--weight-semi); }
.nav-overlay__sub { padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-2); }
.nav-overlay__sub-link { display: block; padding: var(--space-2) var(--space-3); font-size: var(--text-lg); color: rgba(255,255,255,0.75); text-decoration: none; border-radius: var(--radius-md); transition: var(--transition-color); }
.nav-overlay__sub-link:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.nav-overlay__cta { margin-top: var(--space-6); }
/* ── Hero Section ──────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════
HERO — Full-viewport immersive two-column redesign
════════════════════════════════════════════════════════════════ */
/* ── Container ────────────────────────────────────────────────── */
.hero {
position: relative;
min-height: 100dvh;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
background: #0A1628;
}
/* ── Background layers ────────────────────────────────────────── */
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
/* Noise texture — adds tactility, prevents flat digital feel */
.hero__noise {
position: absolute;
inset: 0;
opacity: 0.045;
background-image: url("data:image/svg+xml,");
background-repeat: repeat;
background-size: 200px 200px;
}
/* Drifting mesh gradient — 12-second seamless loop */
.hero__mesh {
position: absolute;
inset: -20%;
width: 140%;
height: 140%;
background:
radial-gradient(ellipse 70% 65% at 20% 25%, rgba(37,99,235,0.14) 0%, transparent 60%),
radial-gradient(ellipse 55% 55% at 82% 75%, rgba(201,168,76,0.09) 0%, transparent 58%),
radial-gradient(ellipse 50% 60% at 58% 42%, rgba(16,24,65,0.55) 0%, transparent 68%);
background-size: 100% 100%;
animation: heroMeshDrift 12s ease-in-out infinite;
will-change: transform;
}
@keyframes heroMeshDrift {
0%, 100% { transform: translate(0, 0); }
33% { transform: translate(3%, 2%); }
66% { transform: translate(-2%, 3%); }
}
/* Atmospheric reactive glow — colour shifts with active destination */
.hero__atmo {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 70% at 28% 48%, rgba(196,18,48,0.08) 0%, transparent 65%);
transition: background 600ms ease;
will-change: background;
pointer-events: none;
}
/* ── Two-column grid ──────────────────────────────────────────── */
.hero__cols {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
min-height: 100dvh;
min-height: 100vh;
padding-top: var(--header-height);
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
}
@media (min-width: 860px) {
.hero__cols { grid-template-columns: 52fr 48fr; }
}
/* Below 860px: globe becomes full-bleed background behind text */
@media (max-width: 859px) {
.hero__cols::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(10,22,40,0.96) 0%, rgba(10,22,40,0.62) 100%);
pointer-events: none;
z-index: 0;
}
}
/* ── Left column ──────────────────────────────────────────────── */
.hero__left {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-16) var(--space-8) var(--space-16) clamp(var(--space-6), 5.5vw, 80px);
position: relative;
z-index: 1;
}
@media (max-width: 859px) {
.hero__left {
padding: var(--space-12) var(--space-6) var(--space-10);
align-items: flex-start;
text-align: left;
}
}
@media (max-width: 480px) {
.hero__left {
padding: var(--space-10) var(--space-5) var(--space-8);
align-items: center;
text-align: center;
}
}
/* ── Right column ─────────────────────────────────────────────── */
.hero__right {
display: none;
align-items: center;
justify-content: center;
padding: var(--space-16) clamp(var(--space-6), 4vw, 56px) var(--space-16) var(--space-6);
position: relative;
z-index: 1;
}
@media (min-width: 860px) { .hero__right { display: flex; } }
/* Below 860px: globe as faint background */
@media (max-width: 859px) {
.hero__right {
display: block;
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.18;
overflow: hidden;
z-index: 0;
}
.hero__globe-wrap {
width: 100%;
height: 100%;
max-width: none;
aspect-ratio: auto;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.hero__globe {
width: min(480px, 100vw);
height: auto;
}
}
/* ── Trust badge ──────────────────────────────────────────────── */
.hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: 11px;
font-weight: var(--weight-semi);
font-family: var(--font-ui);
color: var(--gold-400);
letter-spacing: 0.07em;
text-transform: uppercase;
border: 1px solid rgba(201,168,76,0.28);
border-radius: var(--radius-full);
padding: var(--space-1-5) var(--space-4);
margin-bottom: var(--space-7);
width: fit-content;
background: rgba(201,168,76,0.04);
}
/* ── Heading ──────────────────────────────────────────────────── */
.hero__heading {
font-family: var(--font-display);
font-size: clamp(2rem, 4.4vw, 5.5rem);
font-weight: var(--fw-display);
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--white);
margin-bottom: var(--space-6);
display: flex;
flex-direction: column;
}
@media (max-width: 859px) {
.hero__heading { font-size: clamp(1.9rem, 6vw, 3.2rem); }
}
@media (max-width: 480px) {
.hero__heading { font-size: clamp(1.75rem, 8vw, 2.8rem); }
}
.hero__h-line { display: block; }
/* Destination word slot — fixed height so surrounding lines don't shift */
.hero__h-dest {
display: block;
height: 1.12em;
position: relative;
overflow: hidden;
}
/* ── Destination word switcher ────────────────────────────────── */
.hero__dest-wrap {
display: block;
position: absolute;
inset: 0;
}
.hero__dest-word {
display: block;
color: var(--dest-clr, var(--gold-500));
white-space: nowrap;
position: absolute;
top: 0; left: 0;
width: 100%;
/* Default hidden state: clipped from top, shifted below */
clip-path: inset(100% 0 0 0);
transform: translateY(28px);
transition: none; /* snap reset — no transition on default state */
will-change: transform, clip-path;
}
.hero__dest-word.is-active {
clip-path: inset(0 0 0 0);
transform: translateY(0);
transition:
clip-path 400ms cubic-bezier(0.4, 0, 0.2, 1),
transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__dest-word.is-leaving {
clip-path: inset(0 0 100% 0);
transform: translateY(-28px);
transition:
clip-path 400ms cubic-bezier(0.4, 0, 0.2, 1),
transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 859px) {
.hero__dest-word { white-space: nowrap; }
}
/* ── Subheading ───────────────────────────────────────────────── */
.hero__sub {
font-size: var(--text-md);
color: rgba(255,255,255,0.70);
line-height: 1.72;
max-width: 510px;
margin-bottom: var(--space-8);
}
@media (max-width: 859px) { .hero__sub { max-width: 100%; } }
/* ── CTA buttons ──────────────────────────────────────────────── */
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-10);
}
@media (max-width: 640px) {
.hero__actions { flex-direction: column; width: 100%; }
}
/* Primary: gold with shimmer sweep on hover */
.hero__cta-primary {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.875rem var(--space-7);
background: var(--gold-500);
color: var(--navy-900);
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
letter-spacing: 0.02em;
border-radius: var(--radius-md);
text-decoration: none;
overflow: hidden;
transition: background 200ms ease, box-shadow 200ms ease;
}
.hero__cta-primary:hover {
background: var(--gold-400);
box-shadow: 0 8px 32px rgba(247,138,39,0.38);
}
.hero__cta-primary:active { transform: scale(0.97); transition: transform 80ms ease; }
/* Shimmer streak travels left→right on hover */
.hero__cta-primary::after {
content: '';
position: absolute;
top: 0; bottom: 0;
left: -70%;
width: 45%;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.36), transparent);
transform: skewX(-18deg);
pointer-events: none;
}
.hero__cta-primary:hover::after {
animation: heroCtaShimmer 400ms cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes heroCtaShimmer {
from { left: -70%; }
to { left: 120%; }
}
@media (max-width: 640px) { .hero__cta-primary { justify-content: center; } }
/* Ghost: border draws in from left on hover, retraces on exit */
.hero__cta-ghost {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.875rem var(--space-7);
background: transparent;
color: rgba(255,255,255,0.78);
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: var(--weight-semi);
border-radius: var(--radius-md);
text-decoration: none;
transition: color 200ms ease;
}
.hero__cta-ghost:hover { color: var(--white); }
.hero__cta-ghost:active { transform: scale(0.97); transition: transform 80ms ease; }
/* Resting border — always visible, faint */
.hero__cta-ghost::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgba(255,255,255,0.18);
border-radius: inherit;
pointer-events: none;
}
/* Active border — draws in from left on hover */
.hero__cta-ghost::after {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgba(255,255,255,0.62);
border-radius: inherit;
clip-path: inset(0 100% 0 0 round var(--radius-md));
transition: clip-path 400ms cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.hero__cta-ghost:hover::after {
clip-path: inset(0 0% 0 0 round var(--radius-md));
}
/* ── KPI stats strip ──────────────────────────────────────────── */
.hero__kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
}
@media (max-width: 640px) { .hero__kpis { grid-template-columns: repeat(2, 1fr); } }
.hero__kpi {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-4) var(--space-4);
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-lg);
overflow: hidden;
isolation: isolate;
}
/* Orbiting border shimmer — highlight sweeps across card face */
.hero__kpi::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
108deg,
transparent 35%,
rgba(201,168,76,0.14) 50%,
transparent 65%
);
background-size: 220% 100%;
background-position: 220% 0;
animation: kpiShimmer 3s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
@keyframes kpiShimmer {
0%, 100% { background-position: 220% 0; }
50% { background-position: -60% 0; }
}
.hero__kpi-num {
position: relative;
z-index: 1;
font-family: var(--font-display);
font-size: var(--display-md);
font-weight: var(--fw-display);
color: var(--gold-400);
line-height: 1;
letter-spacing: -0.02em;
}
.hero__kpi-label {
position: relative;
z-index: 1;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.42);
font-weight: var(--weight-medium);
font-family: var(--font-ui);
}
/* ── Globe wrap ───────────────────────────────────────────────── */
.hero__globe-wrap {
width: min(440px, 88%);
aspect-ratio: 1;
position: relative;
border-radius: 50%;
overflow: hidden; /* clips canvas content to circle */
filter: drop-shadow(0 0 48px rgba(37,99,235,0.22));
}
/* Three.js canvas fills the wrap */
.hero__globe-wrap canvas {
display: block;
width: 100% !important;
height: 100% !important;
}
/* SVG fallback (low-end / reduced-motion) */
.hero__globe-wrap svg {
display: block;
width: 100%;
height: 100%;
}
/* Legacy SVG globe — kept for reference, no longer rendered */
.hero__globe {
width: 100%;
height: 100%;
}
/* ── Globe markers ────────────────────────────────────────────── */
.globe-marker .gm-dot {
opacity: 0.42;
transition: opacity 600ms ease;
}
.globe-marker .gm-ring,
.globe-marker .gm-pulse {
transform-box: fill-box;
transform-origin: center;
opacity: 0;
}
/* Idle pulse — ring expands from center outward */
.globe-marker .gm-ring { animation: gmRing 3s ease-out infinite; }
.globe-marker .gm-pulse { animation: gmPulse 3s ease-out infinite 0.4s; }
@keyframes gmRing {
0% { opacity: 0; transform: scale(0.45); }
18% { opacity: 0.38; }
100% { opacity: 0; transform: scale(1); }
}
@keyframes gmPulse {
0% { opacity: 0; transform: scale(0.32); }
15% { opacity: 0.20; }
100% { opacity: 0; transform: scale(1); }
}
/* Stagger delays so markers pulse independently */
.globe-marker[data-marker="uk"] .gm-ring { animation-delay: 0s; }
.globe-marker[data-marker="uk"] .gm-pulse { animation-delay: 0.4s; }
.globe-marker[data-marker="ie"] .gm-ring { animation-delay: 0.55s; }
.globe-marker[data-marker="ie"] .gm-pulse { animation-delay: 0.95s; }
.globe-marker[data-marker="ca"] .gm-ring { animation-delay: 1.1s; }
.globe-marker[data-marker="ca"] .gm-pulse { animation-delay: 1.5s; }
.globe-marker[data-marker="us"] .gm-ring { animation-delay: 1.6s; }
.globe-marker[data-marker="us"] .gm-pulse { animation-delay: 2.0s; }
.globe-marker[data-marker="au"] .gm-ring { animation-delay: 2.1s; }
.globe-marker[data-marker="au"] .gm-pulse { animation-delay: 2.5s; }
.globe-marker[data-marker="nz"] .gm-ring { animation-delay: 2.6s; }
.globe-marker[data-marker="nz"] .gm-pulse { animation-delay: 3.0s; }
/* Active marker — intensifies for 600ms, JS adds/removes .is-active */
.globe-marker.is-active .gm-dot { opacity: 0.95; }
.globe-marker.is-active .gm-ring { animation-name: gmRingActive; animation-duration: 1.8s; }
.globe-marker.is-active .gm-pulse { animation-name: gmPulseActive; animation-duration: 1.8s; }
@keyframes gmRingActive {
0% { opacity: 0; transform: scale(0.45); }
22% { opacity: 0.82; }
100% { opacity: 0; transform: scale(1); }
}
@keyframes gmPulseActive {
0% { opacity: 0; transform: scale(0.32); }
18% { opacity: 0.48; }
100% { opacity: 0; transform: scale(1); }
}
/* ── Staggered entry choreography ─────────────────────────────── */
[data-hero-seq] {
opacity: 0;
transform: translateY(24px);
transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
[data-hero-seq].is-visible {
opacity: 1;
transform: translateY(0);
}
/* ── Scroll indicator ─────────────────────────────────────────── */
.hero__scroll {
position: absolute;
bottom: var(--space-8);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
color: rgba(255,255,255,0.32);
font-size: 9px;
font-family: var(--font-ui);
letter-spacing: 0.12em;
text-transform: uppercase;
z-index: 2;
}
.hero__scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, rgba(201,168,76,0.55), transparent);
animation: heroScrollLine 1.6s ease-in-out infinite;
}
@keyframes heroScrollLine {
0% { transform: scaleY(0); transform-origin: top; }
48% { transform: scaleY(1); transform-origin: top; opacity: 1; }
49% { transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}
/* ── Bottom fade transition into next section ─────────────────── */
.hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 60px;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.12));
pointer-events: none;
z-index: 3;
}
/* ── prefers-reduced-motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.hero__mesh { animation: none; }
.hero__globe { animation: none; }
.hero__kpi::before { animation: none; }
.hero__scroll-line { animation: none; }
.gm-ring, .gm-pulse { animation: none; display: none; }
.hero__cta-primary:hover::after { animation: none; }
/* Entry: skip motion, just fade */
[data-hero-seq] {
transform: none !important;
transition: opacity 200ms ease !important;
}
/* Word switcher: opacity crossfade only */
.hero__dest-word {
clip-path: none !important;
transform: none !important;
transition: opacity 200ms ease !important;
opacity: 0;
}
.hero__dest-word.is-active { opacity: 1; }
.hero__dest-word.is-leaving { opacity: 0; }
}
/* ── Section Shared Styles ─────────────────────────────────────── */
.section {
padding-block: var(--section-py);
position: relative;
}
.section--dark { background: var(--navy-900); color: var(--white); }
.section--offwhite {
background-color: var(--off-white);
}
.section--grid-light {
position: relative;
overflow: hidden;
}
.section--grid-light::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--grid-bg-light);
background-size: var(--grid-size);
opacity: 0.04;
-webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
pointer-events: none;
z-index: 0;
}
.section--grid-light > .container { position: relative; z-index: 1; }
.section-header { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-16); }
.section-header--light .section-title { color: var(--white); }
.section-header--light .section-sub { color: rgba(255,255,255,0.7); }
.section-eyebrow {
font-family: var(--font-ui);
letter-spacing: var(--ls-eyebrow);
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-semi);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--navy-600);
margin-bottom: var(--space-3);
}
.section-eyebrow--gold { color: var(--gold-500); }
.section-eyebrow::before {
content: '';
width: 20px;
height: 2px;
background: currentColor;
border-radius: var(--radius-full);
}
.section-title {
font-family: var(--font-display);
font-size: var(--display-lg);
font-weight: var(--fw-display);
line-height: var(--lh-display);
letter-spacing: var(--ls-display-lg);
color: var(--navy-900);
margin-bottom: var(--space-4);
}
.section--dark .section-title { color: var(--white); }
.section-sub {
font-size: var(--text-md);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
.section-cta { text-align: center; margin-top: var(--space-12); }
/* ── Destination Strip ─────────────────────────────────────────── */
.dest-strip { background: var(--navy-950); padding-block: var(--space-4); }
.dest-strip__inner { display: flex; overflow-x: auto; gap: var(--space-1); scrollbar-width: none; -ms-overflow-style: none; }
.dest-strip__inner::-webkit-scrollbar { display: none; }
.dest-strip__item {
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
border: 1px solid rgba(201, 168, 76, 0.2);
color: rgba(255,255,255,0.75);
text-decoration: none;
transition: var(--transition-base);
white-space: nowrap;
}
.dest-strip__item:hover { background: rgba(201, 168, 76, 0.08); border-color: var(--gold-600); color: var(--white); }
.dest-strip__flag { font-size: var(--text-md); }
.dest-strip__name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.dest-strip__count { font-size: var(--text-xs); color: var(--gold-400); }
/* ── Services Journey (Your Path to Success) ───────────────────── */
.svc-journey {
position: relative;
background: var(--off-white);
overflow: hidden;
}
.svc-journey::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 250px 250px;
opacity: 0.50;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 0;
}
.svc-journey > * { position: relative; z-index: 1; }
/* ── Services Section ──────────────────────────────────────────── */
.services-section {
background-color: var(--navy-50);
/* Both ::before and ::after are taken by orb decorations, so the grid
is applied inline. Opacity embedded in rgba since we can't isolate it
via a pseudo-element here. */
background-image:
linear-gradient(rgba(16,24,65,0.03) 0.5px, transparent 0.5px),
linear-gradient(90deg, rgba(16,24,65,0.03) 0.5px, transparent 0.5px);
background-size: var(--grid-size);
padding-block: var(--section-py);
position: relative;
overflow: hidden;
}
.services-section::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 520px; height: 520px;
background: radial-gradient(circle, rgba(247, 138, 39, 0.09) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.services-section::after {
content: '';
position: absolute;
bottom: -100px; left: -100px;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(247, 138, 39, 0.06) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.services-section > .container { position: relative; z-index: 1; }
.services-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-8);
margin-bottom: var(--space-12);
}
.services-header__text { max-width: 540px; }
.services-header__text .section-title { margin-bottom: var(--space-3); }
.services-header__text .section-sub { margin-bottom: 0; }
.services-header__cta {
flex-shrink: 0;
align-self: flex-end;
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--navy-800);
text-decoration: none;
transition: gap var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.services-header__cta svg { transition: transform var(--duration-base) var(--ease-out); }
.services-header__cta:hover { color: var(--gold-600); gap: var(--space-3); }
.services-header__cta:hover svg { transform: translateX(4px); }
@media (max-width: 768px) {
.services-header { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}
/* ── Services Grid — 3 columns, 2 balanced rows ─────────────── */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .services-grid { grid-template-columns: 1fr; } }
/* ── Service Card ───────────────────────────────────────────── */
.service-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--off-white);
border-radius: 16px;
padding: var(--space-8);
border: 1px solid var(--navy-100);
overflow: hidden;
transition: transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
}
.service-card::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 250px 250px;
opacity: 0.50;
mix-blend-mode: multiply;
pointer-events: none;
border-radius: inherit;
z-index: 0;
}
.service-card > *,
.service-card__num { position: relative; z-index: 1; }
.service-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(16,24,65,0.10);
border-color: var(--navy-200);
}
/* Number badge */
.service-card__num {
position: absolute;
top: var(--space-6);
right: var(--space-6);
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 700;
color: var(--navy-300);
line-height: 1;
user-select: none;
}
.service-card__icon {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
color: var(--navy-700);
margin-bottom: var(--space-6);
flex-shrink: 0;
}
.service-card__icon svg {
width: 52px;
height: 52px;
stroke-width: 1.2;
}
.service-card__title {
font-family: var(--font-heading);
font-size: var(--heading-xl);
font-weight: var(--fw-heading-active);
color: var(--navy-900);
line-height: var(--leading-snug);
margin-bottom: var(--space-3);
}
.service-card__desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
flex: 1;
margin-bottom: var(--space-6);
}
/* Text-link CTA */
.service-card__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-heading);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gold-600);
text-decoration: none;
align-self: flex-start;
transition: gap var(--duration-base) var(--ease-out);
}
.service-card__cta svg { transition: transform var(--duration-base) var(--ease-out); flex-shrink: 0; }
.service-card__cta:hover { gap: var(--space-3); color: var(--gold-600); }
.service-card__cta:hover svg { transform: translateX(4px); }
/* ── Destination Cards ─────────────────────────────────────────── */
.dest-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
margin-top: var(--space-12);
}
.dest-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 420px;
border-radius: var(--radius-2xl);
overflow: hidden;
text-decoration: none;
color: var(--white);
background-color: var(--dest-color, var(--navy-700));
background-image: var(--dest-img);
background-size: cover;
background-position: center;
transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.dest-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(0,0,0,0.45); color: var(--white); }
.dest-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(10,18,40,0.15) 0%,
rgba(10,18,40,0.45) 35%,
rgba(10,18,40,0.93) 100%);
transition: background var(--duration-slow) var(--ease-out);
}
.dest-card:hover .dest-card__overlay {
background: linear-gradient(180deg,
rgba(10,18,40,0.25) 0%,
rgba(10,18,40,0.55) 35%,
rgba(10,18,40,0.97) 100%);
}
.dest-card__flag-badge {
position: absolute;
top: var(--space-5);
left: var(--space-5);
z-index: 2;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
background: rgba(255,255,255,0.15);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.25);
border-radius: var(--radius-lg);
}
.dest-card__content {
position: relative;
z-index: 2;
padding: var(--space-6);
}
.dest-card__name {
font-family: var(--font-serif);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--white);
margin-bottom: var(--space-2);
line-height: 1.15;
}
.dest-card__stats {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-xs);
color: rgba(255,255,255,0.6);
margin-bottom: var(--space-4);
letter-spacing: 0.03em;
}
.dest-card__stat-sep {
width: 3px;
height: 3px;
background: rgba(255,255,255,0.35);
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.dest-card__highlights {
margin-bottom: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-1-5);
}
.dest-card__highlights li {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: rgba(255,255,255,0.65);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.dest-card__highlights li::before {
content: '';
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gold-400);
flex-shrink: 0;
}
.dest-card__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--weight-semi);
color: var(--gold-500);
transition: gap var(--duration-fast) var(--ease-out), color var(--duration-fast);
}
.dest-card:hover .dest-card__cta { gap: var(--space-3); color: var(--gold-400); }
@media (max-width: 900px) { .dest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .dest-grid { grid-template-columns: 1fr; } .dest-card { min-height: 340px; } }
/* ── Process Section ───────────────────────────────────────────── */
.process-section {
background: var(--off-white);
padding-block: var(--section-py);
position: relative;
}
.process-section::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 250px 250px;
opacity: 0.50;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 0;
}
.process-section > * { position: relative; z-index: 1; }
/* Two-column wrapper: Why Us | How It Works */
.whyus-process-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: start;
}
@media (max-width: 1024px) { .whyus-process-layout { grid-template-columns: 1fr; gap: var(--space-12); } }
/* Why Us panel */
.whyus-panel { position: sticky; top: calc(var(--header-height) + var(--space-8)); padding-top: var(--space-8); }
@media (max-width: 1024px) { .whyus-panel { position: static; } }
.whyus-panel .section-eyebrow { margin-bottom: var(--space-3); }
.whyus-panel__title {
font-family: var(--font-display);
font-size: var(--heading-xl);
font-weight: var(--fw-display);
color: var(--navy-800);
line-height: var(--lh-heading);
margin-bottom: var(--space-6);
}
.whyus-panel__body p {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-4);
}
.whyus-panel__body p:last-child { margin-bottom: 0; }
.whyus-panel__body strong { color: var(--navy-800); font-weight: 700; }
.whyus-panel__tagline {
font-family: var(--font-display);
font-weight: var(--fw-display);
color: var(--gold-600);
font-size: var(--text-base);
}
.whyus-stats {
display: flex;
gap: var(--space-6);
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--navy-100);
}
.whyus-stat {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.whyus-stat__num {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-2xl);
color: var(--navy-800);
line-height: 1;
}
.whyus-stat__plus { font-size: 1.2rem; color: var(--gold-500); }
.whyus-stat__label { font-size: var(--text-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
/* Right side: process content wrapper */
.process-right {
background: var(--navy-50);
border-radius: 20px;
padding: var(--space-8);
}
.agenda-title {
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
color: var(--navy-800);
line-height: var(--leading-tight);
margin-bottom: var(--space-8);
}
.process-content__cta { border-radius: var(--radius-full); margin-top: var(--space-8); display: flex; width: fit-content; margin-inline: auto; }
/* ── Agenda layout ──────────────────────────────────────────────── */
.agenda {
position: relative;
}
.agenda__steps {
list-style: none;
padding: 0;
margin: 0;
position: relative;
z-index: 1;
}
.agenda__step {
display: grid;
grid-template-columns: 2rem 2rem 1fr;
align-items: start;
gap: 0 var(--space-3);
padding-block: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.agenda__step:last-child { border-bottom: none; }
.agenda__step-num {
font-family: var(--font-ui);
font-size: 0.65rem;
font-weight: 700;
color: var(--navy-400);
text-transform: uppercase;
letter-spacing: 0.05em;
padding-top: 3px;
line-height: 1;
}
.agenda__step-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--navy-100);
display: flex;
align-items: center;
justify-content: center;
color: var(--navy-700);
flex-shrink: 0;
}
.agenda__step-title {
display: block;
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 700;
color: var(--navy-800);
margin-bottom: var(--space-1);
line-height: 1.3;
}
.agenda__step-desc {
font-size: var(--text-xs);
color: var(--color-text-secondary);
line-height: var(--lh-body);
}
@media (max-width: 640px) {
.process-content__cta { width: 100%; justify-content: center; }
.process-right { padding: var(--space-5); border-radius: 14px; }
.agenda-title { font-size: var(--text-xl); margin-bottom: var(--space-5); }
.whyus-stats { gap: var(--space-4); }
}
@media (max-width: 380px) {
.whyus-stats { flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
.whyus-stat { flex: 1 1 calc(50% - var(--space-4)); min-width: 0; }
.whyus-stat__num { font-size: var(--text-xl); }
}
/* ── Testimonials Carousel ─────────────────────────────────────── */
.testimonials-carousel { position: relative; overflow: hidden; }
.testimonials-track {
display: flex;
transition: transform var(--duration-slower) var(--ease-out);
gap: var(--space-6);
}
.testimonial-card {
min-width: 100%;
background: var(--white);
border: 1px solid var(--color-border);
border-radius: var(--card-radius);
padding: var(--space-10) var(--space-8);
box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
.testimonials-track { gap: 0; }
.testimonial-card { min-width: 100%; }
}
.testimonial-card__stars { display: flex; gap: var(--space-1); color: var(--gold-600); margin-bottom: var(--space-5); }
.testimonial-card__text {
font-family: var(--font-serif);
font-size: var(--text-lg);
font-style: italic;
line-height: var(--leading-relaxed);
color: var(--neutral-800);
margin-bottom: var(--space-8);
max-width: 720px;
margin-inline: auto;
}
.testimonial-card__text p::before { content: '\201C'; color: var(--gold-400); font-size: var(--text-3xl); line-height: 0; vertical-align: -0.4em; margin-right: var(--space-1); }
.testimonial-card__text p::after { content: '\201D'; color: var(--gold-400); font-size: var(--text-3xl); line-height: 0; vertical-align: -0.4em; margin-left: var(--space-1); }
.testimonial-card__footer { display: flex; align-items: center; justify-content: center; gap: var(--space-4); }
.testimonial-card__avatar {
width: 3rem;
height: 3rem;
border-radius: var(--radius-full);
background: var(--avatar-bg, var(--navy-800));
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--weight-bold);
font-size: var(--text-sm);
flex-shrink: 0;
}
.testimonial-card__name { display: block; font-weight: var(--weight-semi); color: var(--neutral-900); font-style: normal; }
.testimonial-card__detail { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); }
.testimonial-card__course { display: block; font-size: var(--text-xs); color: var(--gold-600); font-weight: var(--weight-medium); }
/* Carousel Controls */
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }
.carousel-btn {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-full);
border: 2px solid var(--color-border);
background: var(--white);
color: var(--navy-800);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-base);
}
.carousel-btn:hover { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.carousel-dots { display: flex; gap: var(--space-2); }
.carousel-dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--neutral-300);
border: none;
cursor: pointer;
transition: var(--transition-base);
padding: 0;
}
.carousel-dot.is-active { background: var(--gold-600); width: 24px; }
/* ── Blog Grid ─────────────────────────────────────────────────── */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
}
.blog-grid--full { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.blog-card {
background: var(--white);
border-radius: var(--card-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border);
transition: var(--transition-base);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.blog-card__image {
height: 200px;
background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
position: relative;
overflow: hidden;
}
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.blog-card:hover .blog-card__image img { transform: scale(1.04); }
.blog-card__image-link { display: block; }
.blog-card__category {
position: absolute;
top: var(--space-4);
left: var(--space-4);
background: var(--gold-600);
color: var(--navy-900);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.blog-card__body { padding: var(--space-6); }
.blog-card__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.blog-card__title { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.blog-card__title a { color: var(--navy-900); text-decoration: none; }
.blog-card__title a:hover { color: var(--gold-700); }
.blog-card__excerpt { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); }
.blog-card__read-more { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--gold-700); transition: gap var(--duration-fast); }
.blog-card__read-more:hover { gap: var(--space-2); color: var(--gold-700); }
/* ── CTA Banner ────────────────────────────────────────────────── */
.cta-banner {
position: relative;
background: var(--navy-900);
padding-block: var(--space-14);
overflow: hidden;
}
/* Grid pattern background */
.cta-banner::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,1) 0.5px, transparent 0.5px),
linear-gradient(90deg, rgba(255,255,255,1) 0.5px, transparent 0.5px);
background-size: var(--grid-size);
opacity: 0.04;
-webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
pointer-events: none;
z-index: 0;
}
.cta-banner__bg { position: absolute; inset: 0; z-index: 0; }
.cta-banner__orb {
position: absolute;
top: -120px; right: -120px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(201, 168, 76, 0.14) 0%, transparent 70%);
border-radius: var(--radius-full);
}
.cta-banner__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--space-6);
align-items: center;
text-align: center;
}
@media (min-width: 768px) {
.cta-banner__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}
.cta-banner__content { }
@media (min-width: 768px) { .cta-banner__content { max-width: 560px; } }
.cta-banner__heading { font-size: var(--text-3xl); color: var(--white); margin-bottom: var(--space-3); }
.cta-banner__sub { font-size: var(--text-base); color: rgba(255,255,255,0.7); margin-bottom: var(--space-6); }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
@media (min-width: 768px) { .cta-banner__actions { justify-content: flex-start; } }
/* ── Page Hero ─────────────────────────────────────────────────── */
.page-hero {
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-top: calc(var(--header-height) + var(--space-8));
padding-bottom: var(--space-12);
}
@media (min-width: 768px) { .page-hero { min-height: 260px; } }
@media (min-width: 1024px) { .page-hero { min-height: 320px; } }
@media (min-width: 1280px) { .page-hero { min-height: 360px; } }
.page-hero--navy {
background:
linear-gradient(135deg, rgba(6,10,28,0.93) 0%, rgba(16,24,65,0.89) 50%, rgba(26,48,96,0.91) 100%),
url('/assets/images/main-bg.png') center 65% / cover no-repeat;
position: relative;
overflow: hidden;
}
/* Grid lines */
.page-hero--navy::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(201,168,76,1) 0.5px, transparent 0.5px),
linear-gradient(90deg, rgba(201,168,76,1) 0.5px, transparent 0.5px);
background-size: var(--grid-size);
opacity: 0.04;
-webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
pointer-events: none;
z-index: 0;
}
/* Gold orb top-right + blue orb bottom-left */
.page-hero--navy::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 520px 520px at top right, rgba(201,168,76,0.09) 0%, transparent 65%),
radial-gradient(ellipse 380px 380px at bottom left, rgba(58,100,168,0.14) 0%, transparent 65%),
linear-gradient(to bottom, transparent calc(100% - 80px), rgba(255,255,255,0.45) 100%);
pointer-events: none;
z-index: 0;
}
/* Keep inner content above pseudo-elements */
.page-hero--navy .container { position: relative; z-index: 1; }
.page-hero__inner { display: flex; align-items: center; }
.page-hero__content { max-width: 640px; }
.page-hero__heading { font-size: var(--text-5xl); color: var(--white); margin-bottom: var(--space-4); }
.page-hero__sub { font-size: var(--text-xs); color: rgba(255,255,255,0.75); line-height: var(--leading-relaxed); }
/* ── Two Column Layout ─────────────────────────────────────────── */
.two-col {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-12);
align-items: center;
}
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; } }
.two-col__text h2 { font-size: var(--text-4xl); color: var(--navy-900); margin-bottom: var(--space-5); }
.two-col__text p { color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.about-eduplus-section {
position: relative;
background: var(--off-white);
padding-bottom: var(--space-10);
}
.about-eduplus-section::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 250px 250px;
opacity: 0.50;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 0;
}
.about-eduplus-section > * { position: relative; z-index: 1; }
.about-eduplus-section .two-col { align-items: start; }
.about-stat-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
margin-top: var(--space-10);
}
@media (max-width: 900px) { .about-stat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .about-stat-cards { grid-template-columns: 1fr; } }
.about-stat-card {
background: var(--navy-50);
border-radius: 20px;
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-1);
position: relative;
overflow: hidden;
transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}
.about-stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(16,24,65,0.1); }
.about-stat-card--featured {
background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-950) 100%);
}
.about-stat-card--featured:hover { box-shadow: 0 12px 32px rgba(16,24,65,0.3); }
.about-stat-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(16,24,65,0.08);
color: var(--navy-600);
margin-bottom: var(--space-3);
flex-shrink: 0;
}
.about-stat-card--featured .about-stat-card__icon {
background: rgba(255,255,255,0.12);
color: rgba(255,255,255,0.9);
}
.about-stat-card__num {
display: flex;
align-items: baseline;
gap: 2px;
font-family: var(--font-display);
font-size: clamp(2.2rem, 4vw, 3rem);
font-weight: 700;
color: var(--navy-800);
line-height: 1;
}
.about-stat-card--featured .about-stat-card__num { color: var(--white); }
.about-stat-card__unit {
font-size: 0.45em;
font-weight: 600;
line-height: 1;
}
.about-stat-card__label {
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 600;
color: var(--navy-700);
margin-top: var(--space-1);
}
.about-stat-card--featured .about-stat-card__label { color: rgba(255,255,255,0.92); }
.about-stat-card__desc {
font-size: var(--text-xs);
color: var(--navy-400);
line-height: var(--leading-relaxed);
margin: var(--space-2) 0 0;
}
.about-stat-card--featured .about-stat-card__desc { color: rgba(255,255,255,0.45); }
.about-stat-card__source {
font-size: 0.65rem;
font-family: var(--font-ui);
color: var(--navy-300);
letter-spacing: 0.04em;
margin-top: auto;
padding-top: var(--space-3);
}
.about-stat-card--featured .about-stat-card__source { color: rgba(255,255,255,0.28); }
.about-visual { position: relative; height: 360px; }
.about-visual__card {
position: absolute;
background: var(--navy-900);
color: var(--white);
border-radius: var(--radius-xl);
padding: var(--space-4) var(--space-6);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(201, 168, 76, 0.2);
}
.about-visual__card strong { display: block; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--gold-400); }
.about-visual__card span { font-size: var(--text-sm); color: rgba(255,255,255,0.7); }
.about-visual__card--1 { top: 20px; left: 0; animation: floatCard 3.5s ease-in-out infinite; }
.about-visual__card--2 { top: 150px; right: 0; animation: floatCard 3.5s ease-in-out infinite 1s; }
.about-visual__card--3 { bottom: 20px; left: 60px; animation: floatCard 3.5s ease-in-out infinite 2s; }
.about-visual__bg {
position: absolute;
inset: 40px;
background: var(--gold-100);
border-radius: var(--radius-3xl);
z-index: -1;
}
/* About image slider */
.about-slider {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
aspect-ratio: 3 / 4;
}
@media (min-width: 1024px) {
.about-slider { aspect-ratio: unset; height: 100%; min-height: 520px; }
}
.about-slider__track {
position: absolute;
inset: 0;
}
.about-slider__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.65s ease;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
.about-slider__slide.is-active { opacity: 1; }
.about-slider__img { display: none; }
.about-slider__overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
.about-slider__caption {
position: absolute;
bottom: var(--space-14);
left: var(--space-5);
right: var(--space-5);
display: flex;
align-items: center;
gap: var(--space-3);
background: rgba(13,18,50,0.82);
backdrop-filter: blur(12px);
border: 1px solid rgba(247,138,39,0.25);
border-radius: var(--radius-xl);
padding: var(--space-3) var(--space-4);
}
.about-slider__caption svg { color: var(--gold-400); flex-shrink: 0; }
.about-slider__caption span { font-family: var(--font-heading); font-size: var(--text-xs); line-height: 1.5; color: rgba(255,255,255,0.85); }
/* Prev / Next buttons */
.about-slider__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--navy-800);
box-shadow: 0 2px 14px rgba(0,0,0,0.18);
transition: background var(--duration-fast), transform var(--duration-fast);
z-index: 3;
}
.about-slider__btn:hover { background: var(--white); transform: translateY(-50%) scale(1.1); }
.about-slider__btn--prev { left: var(--space-4); }
.about-slider__btn--next { right: var(--space-4); }
/* Dots */
.about-slider__dots {
position: absolute;
bottom: var(--space-5);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--space-2);
z-index: 3;
}
.about-slider__dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.4);
cursor: pointer;
padding: 0;
transition: background var(--duration-fast), width var(--duration-base);
}
.about-slider__dot.is-active {
background: var(--white);
width: 24px;
border-radius: 4px;
}
/* Support grid (What We Offer) */
.support-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-top: var(--space-12);
}
@media (max-width: 900px) { .support-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .support-grid { grid-template-columns: 1fr; } }
.support-card {
padding: var(--space-7);
background: var(--white);
border-radius: var(--card-radius);
border: 1px solid var(--color-border);
transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base);
}
.support-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--gold-300);
}
.support-card__icon {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
background: var(--gold-50);
border-radius: var(--radius-lg);
color: var(--gold-600);
margin-bottom: var(--space-5);
}
.support-card__title { font-family: var(--font-heading); font-size: var(--heading-sm); font-weight: 600; color: var(--navy-900); margin-bottom: var(--space-3); }
.support-card__desc { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--lh-body); }
/* ── Pillars Showcase ──────────────────────────────────────────── */
.pillars-showcase {
position: relative;
background: var(--off-white);
overflow: hidden;
}
.pillars-showcase::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 250px 250px;
opacity: 0.50;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 0;
}
.pillars-showcase__inner { position: relative; z-index: 1; }
.pillars-showcase__inner {
display: grid;
grid-template-columns: 1fr 220px;
gap: var(--space-8);
align-items: center;
min-height: 560px;
padding-block: var(--space-4);
}
.pillars-showcase__quote {
display: block;
font-family: var(--font-display);
font-size: 6rem;
line-height: 0.55;
color: var(--gold-500);
opacity: 0.35;
margin-bottom: var(--space-5);
user-select: none;
}
.pillars-showcase__slides { position: relative; }
.pillars-slide { display: none; flex-direction: column; }
.pillars-slide.is-active {
display: flex;
animation: pillarIn 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes pillarIn {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
.pillars-slide__tag {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
color: var(--gold-500);
margin-bottom: var(--space-5);
}
.pillars-slide__title {
font-family: var(--font-display);
font-size: clamp(3rem, 5.5vw, 5rem);
font-weight: 700;
color: var(--navy-900);
line-height: 1.04;
letter-spacing: -0.03em;
margin-bottom: var(--space-6);
}
.pillars-slide__body {
font-size: var(--text-md);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
max-width: 500px;
}
.pillars-showcase__nav {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-10);
}
.pillar-dot {
width: 8px; height: 8px;
border-radius: 999px;
background: var(--navy-200);
border: none; cursor: pointer; padding: 0;
transition: width 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.25s;
}
.pillar-dot.is-active { width: 30px; background: var(--gold-500); }
.pillar-dot:hover:not(.is-active) { background: var(--navy-400); }
.pillars-showcase__deco {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-5);
height: 100%;
}
.pillars-arrow {
width: 160px;
height: 270px;
animation: pillarArrowFloat 3.6s ease-in-out infinite;
transform-origin: 50% 40%;
}
@keyframes pillarArrowFloat {
0%,100% { transform: translateY(0) rotate(-4deg); }
50% { transform: translateY(-22px) rotate(5deg); }
}
.pillars-arrow__stroke {
stroke-dasharray: 7 5;
stroke-dashoffset: 480;
animation: pillarArrowDraw 1.8s 0.3s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes pillarArrowDraw {
to { stroke-dashoffset: 0; }
}
.pillars-arrow__head {
opacity: 0;
animation: pillarHeadFade 0.4s 2s ease forwards;
}
@keyframes pillarHeadFade { to { opacity: 1; } }
.pillars-counter {
font-family: var(--font-display);
font-size: var(--text-sm);
color: var(--navy-400);
display: flex;
align-items: baseline;
gap: 2px;
}
.pillars-counter__cur {
font-size: 1.5rem;
font-weight: 700;
color: var(--navy-800);
transition: all 0.3s ease;
}
@media (max-width: 900px) {
.pillars-showcase__inner { grid-template-columns: 1fr; min-height: auto; }
.pillars-showcase__deco { display: none; }
.pillars-slide__title { font-size: clamp(2.4rem, 9vw, 3.5rem); }
}
/* Values Grid */
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.value-card { padding: var(--space-8); background: var(--white); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); text-align: center; }
.value-card__icon { font-size: 2.5rem; margin-bottom: var(--space-4); }
.value-card__title { font-size: var(--text-lg); color: var(--navy-900); margin-bottom: var(--space-3); }
/* Team Grid */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
.team-card { padding: var(--space-8) var(--space-6); background: var(--white); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); text-align: center; transition: var(--transition-base); }
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.team-card__avatar {
width: 5rem;
height: 5rem;
border-radius: var(--radius-full);
background: var(--avatar-bg, var(--navy-800));
color: var(--white);
font-size: var(--text-xl);
font-weight: var(--weight-bold);
display: flex;
align-items: center;
justify-content: center;
margin-inline: auto;
margin-bottom: var(--space-4);
}
.team-card__name { font-size: var(--text-lg); color: var(--navy-900); margin-bottom: var(--space-1); }
.team-card__role { font-size: var(--text-sm); color: var(--gold-700); font-weight: var(--weight-medium); margin-bottom: var(--space-3); }
.team-card__bio { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
/* ── Destination Detail ────────────────────────────────────────── */
.dest-detail-hero { position: relative; padding-top: var(--header-height); overflow: hidden; }
.dest-detail-hero__bg { position: absolute; inset: 0; }
.dest-detail-hero__inner { position: relative; z-index: 1; padding-block: var(--space-16); }
.dest-detail-hero__content { max-width: 640px; }
.dest-detail-hero__flag { font-size: 5rem; margin-bottom: var(--space-4); }
.dest-detail-hero__heading { font-size: var(--text-5xl); color: var(--white); margin-bottom: var(--space-4); }
.dest-detail-hero__sub { font-size: var(--text-md); color: rgba(255,255,255,0.8); margin-bottom: var(--space-8); }
.dest-detail-hero__quick-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-8); max-width: 400px; }
@media (min-width: 640px) { .dest-detail-hero__quick-stats { grid-template-columns: repeat(4, 1fr); max-width: 100%; } }
.dest-detail-hero__quick-stats > div { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; }
.dest-detail-hero__quick-stats strong { display: block; font-size: var(--text-xl); color: var(--gold-400); font-weight: var(--weight-bold); margin-bottom: var(--space-1); }
.dest-detail-hero__quick-stats span { font-size: var(--text-xs); color: rgba(255,255,255,0.6); }
.dest-detail-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
@media (min-width: 1024px) { .dest-detail-grid { grid-template-columns: 1fr 320px; } }
.dest-detail-block { margin-bottom: var(--space-10); }
.dest-detail-block h2 { font-size: var(--text-3xl); color: var(--navy-900); margin-bottom: var(--space-5); }
.dest-detail-block p { color: var(--color-text-secondary); }
.highlights-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.highlights-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-md); color: var(--color-text); }
.highlights-list svg { flex-shrink: 0; color: var(--color-success); margin-top: 3px; }
.course-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.course-tag { background: var(--navy-100); color: var(--navy-800); font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-weight: var(--weight-medium); }
.course-tag--sm { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }
.dest-sidebar-card { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: var(--space-6); margin-bottom: var(--space-5); }
.dest-sidebar-card h3 { font-size: var(--text-lg); color: var(--navy-900); margin-bottom: var(--space-5); }
.dest-sidebar-card--navy { background: var(--navy-900); border-color: var(--navy-800); }
.dest-sidebar-card--navy h3 { color: var(--white); }
.dest-facts { display: flex; flex-direction: column; gap: 0; }
.dest-fact { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); gap: var(--space-4); }
.dest-fact:last-child { border-bottom: none; }
.dest-fact dt { font-size: var(--text-sm); color: var(--color-text-secondary); }
.dest-fact dd { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--navy-900); text-align: right; }
.dest-sidebar-link { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.75); font-size: var(--text-sm); }
.dest-sidebar-link:hover { color: var(--gold-400); }
/* ── Universities Page ─────────────────────────────────────────── */
.filter-bar { margin-bottom: var(--space-10); }
.filter-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.filter-bar__label { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--neutral-600); }
.filter-bar__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-btn { padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--neutral-600); border: 1px solid var(--color-border); text-decoration: none; transition: var(--transition-base); }
.filter-btn:hover, .filter-btn.is-active { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.unis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); }
.uni-card { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: var(--transition-base); }
.uni-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.uni-card__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.uni-card__initials { width: 3rem; height: 3rem; border-radius: var(--radius-lg); background: var(--navy-100); color: var(--navy-800); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); font-size: var(--text-xs); flex-shrink: 0; letter-spacing: -0.05em; }
.uni-card__country { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--neutral-600); }
.uni-card__city { display: block; font-size: var(--text-xs); color: var(--neutral-400); }
.uni-card__name { font-size: var(--text-lg); color: var(--navy-900); margin-bottom: var(--space-3); }
.uni-card__meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.uni-badge { background: var(--gold-100); color: var(--gold-900); font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-weight: var(--weight-semi); }
.uni-card__rank { font-size: var(--text-xs); color: var(--neutral-500); }
.uni-card__courses { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-5); }
.uni-card__cta { margin-top: auto; }
.empty-state { text-align: center; padding: var(--space-16); color: var(--color-text-secondary); }
/* ── Application Form ──────────────────────────────────────────── */
.form-container { max-width: 800px; margin-inline: auto; }
/* Step Indicator */
.step-indicator {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-10);
overflow-x: auto;
padding-bottom: var(--space-2);
}
.step-indicator__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.step-indicator__circle {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-full);
border: 2px solid var(--neutral-300);
background: var(--white);
color: var(--neutral-400);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--weight-bold);
font-size: var(--text-sm);
transition: var(--transition-base);
}
.step-indicator__item.is-active .step-indicator__circle { background: var(--navy-900); border-color: var(--navy-900); color: var(--gold-400); }
.step-indicator__item.is-done .step-indicator__circle { background: var(--color-success); border-color: var(--color-success); color: var(--white); }
.step-indicator__label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--neutral-400); white-space: nowrap; }
.step-indicator__item.is-active .step-indicator__label { color: var(--navy-900); }
.step-indicator__line { flex: 1; height: 2px; min-width: var(--space-6); background: var(--neutral-200); margin-bottom: var(--space-5); }
/* Form Steps */
.form-step { display: none; border: none; padding: 0; }
.form-step.is-active { display: block; animation: fadeInUp var(--duration-slow) var(--ease-out); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.form-step__legend { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-2xl); font-family: var(--font-heading); font-weight: var(--weight-bold); color: var(--navy-900); margin-bottom: var(--space-8); width: 100%; }
.form-step__num { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: var(--gold-600); color: var(--navy-900); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-bold); flex-shrink: 0; }
.form-step__intro { margin-bottom: var(--space-6); color: var(--color-text-secondary); }
/* Form Elements */
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.form-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-group--full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--neutral-700); }
.required { color: var(--color-error); margin-left: 2px; }
.form-input, .form-select, .form-textarea {
width: 100%;
height: var(--input-height);
padding: 0 var(--input-pad-x);
border: var(--input-border);
border-radius: var(--input-radius);
font-family: var(--font-sans);
font-size: var(--text-base);
color: var(--neutral-900);
background: var(--input-bg);
transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
appearance: none;
}
.form-textarea { height: auto; padding: var(--space-3) var(--input-pad-x); resize: vertical; }
.form-textarea--tall { min-height: 400px; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none;
border: var(--input-border-focus);
box-shadow: var(--input-shadow-focus);
}
.form-input.is-invalid { border-color: var(--color-error); }
.form-error { font-size: var(--text-xs); color: var(--color-error); }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-10); }
.form-nav { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
/* Checkbox Cards */
.checkbox-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px) { .checkbox-grid { grid-template-columns: 1fr 1fr; } }
.checkbox-card {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-5);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-xl);
cursor: pointer;
transition: var(--transition-base);
}
.checkbox-card:hover { border-color: var(--gold-600); background: var(--gold-50); }
.checkbox-card input[type="checkbox"] { margin-top: 2px; accent-color: var(--gold-600); width: 1rem; height: 1rem; flex-shrink: 0; }
.checkbox-card input[type="checkbox"]:checked + .checkbox-card__body { color: var(--navy-900); }
.checkbox-card:has(input:checked) { border-color: var(--gold-600); background: var(--gold-50); }
.checkbox-card__title { display: block; font-weight: var(--weight-semi); color: var(--neutral-800); margin-bottom: var(--space-1); }
.checkbox-card__desc { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); }
.checkbox-label { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--neutral-600); cursor: pointer; }
.form-consent { margin-top: var(--space-4); }
/* Review Panel */
.review-panel { background: var(--off-white); border-radius: var(--radius-xl); padding: var(--space-8); margin-bottom: var(--space-6); min-height: 200px; }
.review-panel__placeholder { color: var(--neutral-400); font-style: italic; }
.review-section { margin-bottom: var(--space-6); }
.review-section h4 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--gold-700); margin-bottom: var(--space-3); }
.review-row { display: flex; gap: var(--space-4); justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--neutral-200); font-size: var(--text-sm); }
.review-row dt { color: var(--neutral-500); }
.review-row dd { font-weight: var(--weight-medium); color: var(--neutral-800); }
/* Trust signals */
.form-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
.form-trust__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.form-trust__item svg { color: var(--color-success); flex-shrink: 0; }
/* Alert */
.alert {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-lg);
margin-bottom: var(--space-6);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.alert svg { flex-shrink: 0; margin-top: 1px; }
.alert--success { background: #DCFCE7; color: #15803D; border: 1px solid #86EFAC; }
.alert--error { background: #FEE2E2; color: #B91C1C; border: 1px solid #FCA5A5; }
/* ── Contact Page ──────────────────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-12); }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 360px 1fr; } }
.contact-info { background: var(--navy-900); border-radius: var(--card-radius); padding: var(--space-10); color: var(--white); }
.contact-info__heading { font-size: var(--text-2xl); color: var(--white); margin-bottom: var(--space-8); }
.contact-info__item { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.contact-info__icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); background: rgba(201, 168, 76, 0.15); color: var(--gold-400); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info__item strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semi); color: rgba(255,255,255,0.6); margin-bottom: var(--space-1); }
.contact-info__item a, .contact-info__item address { color: var(--white); font-size: var(--text-base); }
.contact-info__item a:hover { color: var(--gold-400); }
.contact-info__hours { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.1); }
.contact-info__hours strong { display: block; font-size: var(--text-sm); color: rgba(255,255,255,0.6); margin-bottom: var(--space-2); }
.contact-info__hours p { font-size: var(--text-sm); color: rgba(255,255,255,0.8); line-height: var(--leading-relaxed); }
.contact-social { display: flex; gap: var(--space-3); margin-top: var(--space-8); }
.contact-form-wrap { padding-block: var(--space-4); }
.contact-form { display: flex; flex-direction: column; gap: 0; }
/* ── Blog Post Page ─────────────────────────────────────────────── */
.post-hero { padding-top: calc(var(--header-height) + var(--space-12)); padding-bottom: var(--space-12); background: var(--navy-900); }
.post-hero__inner { max-width: 800px; margin-inline: auto; }
.post-hero__meta { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.post-category { background: var(--gold-600); color: var(--navy-900); font-size: var(--text-xs); font-weight: var(--weight-bold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.post-date { font-size: var(--text-sm); color: rgba(255,255,255,0.6); }
.post-hero__heading { font-size: clamp(2rem, 4vw, 3.5rem); color: var(--white); margin-bottom: var(--space-4); }
.post-hero__excerpt { font-size: var(--text-md); color: rgba(255,255,255,0.75); margin-bottom: var(--space-6); }
.post-hero__byline { display: flex; align-items: center; gap: var(--space-3); }
.post-author-avatar { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); background: var(--gold-600); color: var(--navy-900); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); }
.post-author-name { display: block; font-weight: var(--weight-semi); color: var(--white); font-size: var(--text-sm); }
.post-author-role { display: block; font-size: var(--text-xs); color: rgba(255,255,255,0.5); }
.post-featured-image { padding-block: var(--space-8); background: var(--navy-900); }
.post-featured-image img { border-radius: var(--radius-2xl); max-height: 500px; width: 100%; object-fit: cover; }
.post-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-12); padding-block: var(--section-py); }
@media (min-width: 1024px) { .post-layout { grid-template-columns: 1fr 300px; } }
.post-content {
font-size: var(--text-md);
line-height: var(--leading-relaxed);
color: var(--neutral-800);
max-width: 100%;
}
.post-content h2 { font-size: var(--text-3xl); color: var(--navy-900); margin-block: var(--space-8) var(--space-4); }
.post-content h3 { font-size: var(--text-2xl); color: var(--navy-900); margin-block: var(--space-6) var(--space-3); }
.post-content p { margin-bottom: var(--space-5); }
.post-content ul, .post-content ol { padding-left: var(--space-6); margin-bottom: var(--space-5); }
.post-content li { margin-bottom: var(--space-2); }
.post-content blockquote { border-left: 4px solid var(--gold-600); padding-left: var(--space-6); margin: var(--space-8) 0; font-family: var(--font-serif); font-size: var(--text-xl); font-style: italic; color: var(--navy-800); }
.post-sidebar-card { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: var(--space-6); margin-bottom: var(--space-5); }
.post-sidebar-card h3 { font-size: var(--text-lg); color: var(--navy-900); margin-bottom: var(--space-4); }
.post-sidebar-card p { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.post-sidebar-card--navy { background: var(--navy-900); border-color: var(--navy-800); }
.post-sidebar-card--navy h3 { color: var(--white); }
.post-sidebar-card--navy ul { display: flex; flex-direction: column; gap: var(--space-2); }
.post-sidebar-card--navy a { color: rgba(255,255,255,0.75); font-size: var(--text-sm); }
.post-sidebar-card--navy a:hover { color: var(--gold-400); }
/* ── Service Detail ─────────────────────────────────────────────── */
/* ── Service Journey Page ──────────────────────────────────────── */
@keyframes svcSpineReveal {
from { clip-path: inset(0 0 100% 0); }
to { clip-path: inset(0 0 0% 0); }
}
@keyframes svcNodePop {
0% { opacity: 0; transform: scale(0.3) rotate(-15deg); }
65% { opacity: 1; transform: scale(1.12) rotate(3deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes svcIconFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-7px); }
}
.svc-journey__intro {
text-align: left;
max-width: 580px;
margin: 0 0 var(--space-16);
}
.svc-journey__intro .section-sub {
font-size: var(--text-base);
color: var(--color-text-secondary);
margin-top: var(--space-4);
}
/* Track + spine */
.svc-journey__track { position: relative; }
.svc-journey__spine {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1.5px;
transform: translateX(-50%);
background: var(--navy-200);
clip-path: inset(0 0 100% 0);
animation: svcSpineReveal 1.8s ease-out 0.3s forwards;
pointer-events: none;
}
@keyframes svcSpineReveal { to { clip-path: inset(0 0 0% 0); } }
/* Step row */
.svc-step {
display: grid;
grid-template-columns: 1fr 40px 1fr;
grid-template-areas: "side node gap";
align-items: start;
margin-bottom: var(--space-10);
}
.svc-step--alt { grid-template-areas: "gap node side"; }
.svc-step__side { grid-area: side; }
.svc-step__node-wrap { grid-area: node; display: flex; justify-content: center; padding-top: 16px; }
.svc-step__gap { grid-area: gap; }
/* Icon + dashed connector */
.svc-step__connector {
display: flex;
align-items: center;
margin-bottom: var(--space-4);
}
.svc-step--alt .svc-step__connector { flex-direction: row-reverse; }
.svc-step__icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--navy-900);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
flex-shrink: 0;
}
.svc-step__icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.svc-step__dash {
flex: 1;
height: 0;
border-top: 2px dashed rgba(16, 24, 65, 0.2);
}
/* Node dot on spine */
.svc-step__node {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--navy-800);
border: 2.5px solid var(--off-white);
box-shadow: 0 0 0 2px var(--navy-300);
position: relative;
z-index: 2;
opacity: 0;
transform: scale(0);
transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.svc-step__node.is-visible { opacity: 1; transform: scale(1); }
/* Text */
.svc-step__text { padding-inline: var(--space-3); }
.svc-step:not(.svc-step--alt) .svc-step__text { text-align: right; }
.svc-step__label {
display: block;
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--gold-500);
margin-bottom: var(--space-2);
}
.svc-step__title {
font-family: var(--font-display);
font-size: clamp(1.2rem, 2vw, 1.5rem);
font-weight: 700;
color: var(--navy-900);
line-height: 1.2;
margin-bottom: var(--space-2);
}
.svc-step__desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--lh-body);
}
@media (max-width: 640px) {
.svc-journey__spine,
.svc-step__connector,
.svc-step__node-wrap,
.svc-step__gap { display: none; }
.svc-step { grid-template-columns: 1fr; grid-template-areas: "side"; margin-bottom: var(--space-6); }
.svc-step--alt { grid-template-areas: "side"; }
.svc-step:not(.svc-step--alt) .svc-step__text { text-align: left; }
.svc-step__text { padding-inline: 0; }
}
/* ── Who It's For ───────────────────────────────────────────────── */
.svc-personas {
position: relative;
background: var(--off-white);
overflow: hidden;
}
.svc-personas::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 250px 250px;
opacity: 0.50;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 0;
}
.svc-personas > * { position: relative; z-index: 1; }
.svc-personas__intro { text-align: left; max-width: 640px; margin-inline: 0; margin-bottom: var(--space-16); }
.svc-personas__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
@media (max-width: 900px) { .svc-personas__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.persona-card {
background: var(--white);
border: 1px solid var(--navy-100);
border-radius: var(--radius-xl);
padding: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-4);
transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base);
}
.persona-card:hover {
box-shadow: 0 8px 32px rgba(16,24,65,0.1);
border-color: var(--gold-300);
}
.persona-card__icon {
width: 52px; height: 52px;
border-radius: var(--radius-lg);
background: var(--gold-50);
display: flex; align-items: center; justify-content: center;
color: var(--gold-600);
flex-shrink: 0;
}
.persona-card__title {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--navy-900);
line-height: var(--leading-snug);
}
.persona-card__body {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
flex: 1;
}
/* ── FAQ ────────────────────────────────────────────────────────── */
.svc-faq {
background: var(--navy-900);
padding-block: var(--section-py);
position: relative;
overflow: hidden;
}
.svc-faq__layout {
display: grid;
grid-template-columns: 320px 1fr;
gap: var(--space-16);
align-items: start;
}
/* Sidebar */
.svc-faq__sidebar {
position: sticky;
top: calc(var(--header-height) + var(--space-8));
}
.svc-faq__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: rgba(247,138,39,0.12);
color: var(--gold-400);
border: 1px solid rgba(247,138,39,0.25);
border-radius: var(--radius-full);
padding: var(--space-1-5) var(--space-4);
font-size: var(--text-xs);
font-weight: var(--weight-semi);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
margin-bottom: var(--space-6);
}
.svc-faq__heading {
font-family: var(--font-display);
font-size: clamp(2.4rem, 4vw, 3.8rem);
font-weight: 700;
color: var(--white);
line-height: 1.08;
letter-spacing: -0.02em;
margin-bottom: var(--space-5);
}
.svc-faq__accent { color: var(--gold-400); }
.svc-faq__sub {
font-size: var(--text-base);
color: rgba(255,255,255,0.55);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-10);
}
.svc-faq__contact {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-xl);
padding: var(--space-8);
}
.svc-faq__contact-title {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: var(--white);
margin-bottom: var(--space-3);
}
.svc-faq__contact-body {
font-size: var(--text-sm);
color: rgba(255,255,255,0.55);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-6);
}
.svc-faq__contact-btn {
display: inline-flex;
align-items: center;
padding: var(--space-3) var(--space-6);
border: 1.5px solid var(--gold-500);
border-radius: var(--radius-full);
color: var(--gold-400);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
letter-spacing: 0.04em;
text-decoration: none;
transition: background var(--duration-base), color var(--duration-base);
}
.svc-faq__contact-btn:hover {
background: var(--gold-500);
color: var(--navy-900);
}
/* Accordion grid */
.svc-faq__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
align-items: start;
}
.faq-item {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.09);
border-radius: var(--radius-xl);
overflow: hidden;
transition: border-color var(--duration-base) var(--ease-out);
}
.faq-item[open] { border-color: rgba(247,138,39,0.35); }
.faq-item__summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
cursor: pointer;
list-style: none;
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--white);
line-height: var(--leading-snug);
user-select: none;
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary:hover { color: var(--gold-300); }
.faq-item__chevron {
flex-shrink: 0;
color: var(--gold-400);
margin-top: 2px;
transition: transform var(--duration-base) var(--ease-out);
}
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__a {
padding: 0 var(--space-6) var(--space-5);
font-size: var(--text-sm);
color: rgba(255,255,255,0.6);
line-height: var(--leading-relaxed);
margin: 0;
border-top: 1px solid rgba(255,255,255,0.07);
padding-top: var(--space-4);
}
/* Responsive */
@media (max-width: 1024px) {
.svc-faq__layout { grid-template-columns: 1fr; gap: var(--space-12); }
.svc-faq__sidebar { position: static; }
.svc-faq__heading { font-size: clamp(2rem, 5vw, 2.8rem); }
}
@media (max-width: 640px) {
.svc-faq__grid { grid-template-columns: 1fr; }
}
/* ── Mobile: single column, spine on left ──────────────────────── */
@media (max-width: 768px) {
.svc-journey__spine {
left: 28px;
transform: none;
}
.svc-step {
grid-template-columns: 56px 1fr;
grid-template-areas: "node card";
gap: 0 var(--space-5);
margin-bottom: var(--space-10);
}
.svc-step--alt { grid-template-areas: "node card"; }
.svc-step__gap { display: none; }
.svc-step__node-wrap { padding-top: var(--space-3); }
.svc-step__node { width: 48px; height: 48px; }
}
/* ── Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin-bottom: var(--space-6); }
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: rgba(255,255,255,0.5); }
.breadcrumb a { color: rgba(255,255,255,0.7); }
.breadcrumb a:hover { color: var(--gold-400); }
.breadcrumb [aria-current="page"] { color: rgba(255,255,255,0.9); }
/* ── Error Page ─────────────────────────────────────────────────── */
.error-page { padding-top: calc(var(--header-height) + var(--space-20)); padding-bottom: var(--space-20); text-align: center; }
.error-page__number { font-family: var(--font-display); font-size: clamp(6rem, 20vw, 12rem); font-weight: var(--weight-bold); color: var(--gold-200); line-height: 1; margin-bottom: var(--space-4); }
.error-page__heading { font-size: var(--text-4xl); color: var(--navy-900); margin-bottom: var(--space-4); }
.error-page__sub { font-size: var(--text-md); color: var(--color-text-secondary); max-width: 480px; margin-inline: auto; margin-bottom: var(--space-8); }
.error-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-bottom: var(--space-8); }
.error-page__links { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.error-page__links a { font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: underline; }
/* ── Pagination ─────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-12); }
.pagination__num, .pagination__btn {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-lg);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--neutral-600);
border: 1px solid var(--color-border);
text-decoration: none;
transition: var(--transition-base);
}
.pagination__num:hover, .pagination__btn:hover { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.pagination__num.is-active { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
/* ── Social Links ───────────────────────────────────────────────── */
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-full);
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.7);
transition: var(--transition-base);
text-decoration: none;
}
.social-link:hover { background: var(--gold-600); color: var(--navy-900); }
/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer {
background-color: #0D1232;
color: rgba(255,255,255,0.7);
position: relative;
overflow: hidden;
}
.site-footer::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(201,168,76,1) 0.5px, transparent 0.5px),
linear-gradient(90deg, rgba(201,168,76,1) 0.5px, transparent 0.5px);
background-size: var(--grid-size);
opacity: 0.04;
-webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
pointer-events: none;
z-index: 0;
}
/* Orbs on the footer body */
.footer__body {
position: relative;
}
.footer__body::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 480px 480px at top right, rgba(201,168,76,0.07) 0%, transparent 65%),
radial-gradient(ellipse 360px 360px at bottom left, rgba(58,100,168,0.1) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
.footer__body > .container { position: relative; z-index: 1; }
/* Campus illustration — fades into footer */
.footer__silhouette {
position: relative;
line-height: 0;
font-size: 0;
display: block;
}
.footer__silhouette img {
display: block;
width: 100%;
height: auto;
max-height: 340px;
object-fit: cover;
object-position: center bottom;
}
.footer__silhouette::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 55%;
background: linear-gradient(to bottom, #F8F6F2, transparent);
pointer-events: none;
z-index: 1;
}
.footer__silhouette::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 55%;
background: linear-gradient(to bottom, transparent, #0D1232);
pointer-events: none;
}
/* Three-column body */
.footer__body { padding-block: var(--space-14) var(--space-10); }
.footer__inner {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
align-items: start;
}
.footer__col { padding-inline: var(--space-10); }
.footer__col--nav { padding-left: 0; }
.footer__col--contact { padding-right: 0; }
.footer__col--nl { border-inline: 1px solid rgba(255,255,255,0.1); }
/* Col 1: Nav links */
.footer__nav-links {
list-style: none;
padding: 0;
margin: 0 0 var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.footer__nav-links a {
color: rgba(255,255,255,0.6);
text-decoration: none;
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 500;
transition: color var(--duration-fast);
}
.footer__nav-links a:hover { color: var(--gold-400); }
/* Social icons */
.footer__social { display: flex; gap: var(--space-3); }
.footer__social-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.2);
color: rgba(255,255,255,0.6);
text-decoration: none;
flex-shrink: 0;
transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}
.footer__social-btn:hover { border-color: var(--gold-500); color: var(--gold-500); background: rgba(247,138,39,0.08); }
/* Col 2: Stat */
.footer__col--nl { text-align: center; }
.footer__stat { display: flex; flex-direction: column; align-items: center; }
.footer__stat-num {
font-family: var(--font-display);
font-size: clamp(4.5rem, 8vw, 6.5rem);
font-weight: 700;
color: var(--gold-500);
line-height: 1;
letter-spacing: -0.03em;
margin-bottom: var(--space-2);
}
.footer__stat-suffix { font-size: 0.65em; vertical-align: super; }
.footer__stat-label {
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 600;
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-4);
}
.footer__stat-sub {
font-family: var(--font-editorial);
font-style: italic;
font-size: var(--text-sm);
color: rgba(255,255,255,0.6);
line-height: 1.7;
max-width: 260px;
margin-bottom: var(--space-6);
}
.footer__stat-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--gold-400);
text-decoration: none;
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 600;
border-bottom: 1px solid rgba(247,138,39,0.3);
padding-bottom: var(--space-1);
transition: color var(--duration-fast), border-color var(--duration-fast);
margin-bottom: var(--space-5);
}
.footer__stat-cta:hover { color: var(--gold-500); border-color: var(--gold-500); }
.footer__stat-source {
font-size: var(--ui-xs);
color: rgba(255,255,255,0.2);
font-style: italic;
}
/* Col 3: Contact */
.footer__col--contact { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-6); }
.footer__contact-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--gold-400);
text-decoration: none;
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-sm);
letter-spacing: 0.04em;
text-transform: uppercase;
border-bottom: 1px solid rgba(247,138,39,0.3);
padding-bottom: var(--space-1);
transition: color var(--duration-fast), border-color var(--duration-fast);
}
.footer__contact-cta:hover { color: var(--gold-500); border-color: var(--gold-500); }
/* Contact detail list */
.footer__contact-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
width: 100%;
}
.footer__contact-item {
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: var(--space-3);
text-align: right;
}
.footer__contact-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(247,138,39,0.1);
border: 1px solid rgba(247,138,39,0.2);
color: var(--gold-400);
flex-shrink: 0;
order: 2;
}
.footer__contact-icon--top { align-self: flex-start; margin-top: 2px; }
.footer__contact-link {
color: rgba(255,255,255,0.82);
text-decoration: none;
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.01em;
order: 1;
transition: color var(--duration-fast);
}
.footer__contact-link:hover { color: var(--gold-400); }
.footer__contact-address {
font-style: normal;
font-size: var(--text-sm);
color: rgba(255,255,255,0.55);
line-height: 1.65;
order: 1;
}
/* Responsive: contact col left-aligns on mobile */
@media (max-width: 900px) {
.footer__col--contact { align-items: flex-start; }
.footer__contact-item { justify-content: flex-start; }
.footer__contact-icon { order: 1; }
.footer__contact-link { order: 2; }
.footer__contact-address { order: 2; }
}
.footer__logo-img {
width: 160px;
height: auto;
object-fit: contain;
opacity: 0.85;
display: block;
}
/* Bottom bar */
.footer__bar { border-top: 1px solid rgba(255,255,255,0.08); padding-block: var(--space-5); }
.footer__bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.footer__credit { font-size: var(--text-xs); color: rgba(255,255,255,0.35); margin: 0; }
.footer__credit strong { color: rgba(255,255,255,0.55); font-weight: 500; }
.footer__legal-links {
display: flex;
gap: var(--space-5);
list-style: none;
padding: 0;
margin: 0;
}
.footer__legal-links a {
font-size: var(--text-xs);
color: rgba(255,255,255,0.35);
text-decoration: none;
transition: color var(--duration-fast);
}
.footer__legal-links a:hover { color: rgba(255,255,255,0.7); }
/* Responsive */
@media (max-width: 900px) {
.footer__inner { grid-template-columns: 1fr; gap: var(--space-8); }
.footer__col { padding-inline: 0; }
.footer__col--nl { display: none; }
/* Col 1 — Nav + Social: centred */
.footer__col--nav { align-items: center; text-align: center; }
.footer__nav-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2) var(--space-8);
text-align: center;
}
.footer__social { justify-content: center; }
/* Col 3 — Contact: logo floats to top, everything centred */
.footer__col--contact {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Move the logo anchor (last child of col--contact) to the top */
.footer__col--contact > a:last-of-type { order: -1; margin-bottom: var(--space-5); }
/* "Send Us A Message" link centred */
.footer__contact-cta { align-self: center; }
/* Contact list: icon left, text left, whole list centred */
.footer__contact-list { align-items: flex-start; width: 100%; max-width: 320px; }
.footer__contact-item {
justify-content: flex-start;
text-align: left;
}
.footer__contact-icon { order: 1; }
.footer__contact-link { order: 2; text-align: left; }
.footer__contact-address { order: 2; text-align: left; }
/* Bottom bar */
.footer__bar-inner { flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.footer__legal-links { justify-content: center; }
}
/* ── WhatsApp FAB ───────────────────────────────────────────────── */
.whatsapp-fab {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
z-index: var(--z-overlay);
width: 3.5rem;
height: 3.5rem;
border-radius: var(--radius-full);
background: #25D366;
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
transition: transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-base) var(--ease-out);
text-decoration: none;
}
.whatsapp-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55); color: var(--white); }
/* ── Scroll Animation ───────────────────────────────────────────── */
[data-animate] {
opacity: 0;
transform: translateY(24px);
transition: opacity var(--duration-slower) var(--ease-out), transform var(--duration-slower) var(--ease-out);
}
[data-animate="fade-left"] { transform: translateX(24px); }
[data-animate].is-visible { opacity: 1; transform: none; }
/* ── Admin Styles ───────────────────────────────────────────────── */
.admin-body { background: var(--neutral-100); font-family: var(--font-sans); }
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar { width: 240px; background: var(--navy-900); flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.admin-sidebar__brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-6); border-bottom: 1px solid rgba(255,255,255,0.08); color: var(--white); font-weight: var(--weight-bold); font-family: var(--font-heading); }
.admin-sidebar__nav { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.admin-nav__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: rgba(255,255,255,0.65); border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; transition: var(--transition-base); }
.admin-nav__link:hover, .admin-nav__link.is-active { background: rgba(255,255,255,0.08); color: var(--white); }
.admin-nav__link--danger { color: rgba(239, 68, 68, 0.75); margin-top: auto; }
.admin-nav__link--danger:hover { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
.admin-main { flex: 1; padding: var(--space-8); overflow-y: auto; }
.admin-page__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-8); flex-wrap: wrap; gap: var(--space-4); }
.admin-page__title { font-size: var(--text-3xl); color: var(--navy-900); }
.admin-page__sub { color: var(--neutral-500); font-size: var(--text-sm); margin-top: var(--space-1); }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-8); }
.admin-stat-card { background: var(--white); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: var(--space-4); }
.admin-stat-card__icon { width: 3rem; height: 3rem; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.admin-stat-card__icon--gold { background: var(--gold-100); color: var(--gold-800); }
.admin-stat-card__icon--navy { background: var(--navy-100); color: var(--navy-800); }
.admin-stat-card__icon--green { background: #DCFCE7; color: #15803D; }
.admin-stat-card__num { display: block; font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--navy-900); line-height: 1; }
.admin-stat-card__label { display: block; font-size: var(--text-xs); color: var(--neutral-500); margin-top: var(--space-1); }
.admin-section { background: var(--white); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); margin-bottom: var(--space-6); }
.admin-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.admin-section__header h2 { font-size: var(--text-xl); color: var(--navy-900); }
.admin-empty { color: var(--neutral-400); font-style: italic; padding: var(--space-6) 0; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.admin-table th { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--neutral-500); font-weight: var(--weight-semi); border-bottom: 2px solid var(--neutral-200); }
.admin-table td { padding: var(--space-4); border-bottom: 1px solid var(--neutral-100); vertical-align: top; color: var(--neutral-700); }
.admin-table td div { font-size: var(--text-xs); color: var(--neutral-400); margin-top: var(--space-1); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--neutral-50); }
.admin-table__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.status-badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semi); }
.status-badge--pending { background: #FEF3C7; color: #92400E; }
.status-badge--published { background: #DCFCE7; color: #166534; }
.status-badge--draft { background: var(--neutral-100); color: var(--neutral-600); }
.status-badge--reviewing { background: #DBEAFE; color: #1E40AF; }
.admin-flash { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-6); }
.admin-flash--success { background: #DCFCE7; color: #15803D; }
.admin-flash--error { background: #FEE2E2; color: #B91C1C; }
.admin-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--navy-950); }
.admin-login__card { width: 100%; max-width: 400px; background: var(--white); border-radius: var(--radius-2xl); padding: var(--space-10) var(--space-8); box-shadow: var(--shadow-2xl); }
.admin-login__logo { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); }
.admin-login__logo h1 { font-size: var(--text-xl); color: var(--navy-900); }
.admin-form__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 1024px) { .admin-form__grid { grid-template-columns: 1fr 280px; } }
.admin-form__card { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); margin-bottom: var(--space-4); }
.admin-form__card h3 { font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--navy-900); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
/* Admin CSS file for admin.css alias */
.btn--danger { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
.btn--danger:hover { background: #EF4444; color: var(--white); border-color: #EF4444; }
/* ── Accessibility Helpers ─────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ══════════════════════════════════════════════════════════════════
ALUMNI PAGE
══════════════════════════════════════════════════════════════════ */
.alumni-section { padding-top: var(--space-12); }
.alumni-filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
margin-bottom: var(--space-6);
}
/* 4-col desktop → 3 → 2 → 1 */
.alumni-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
@media (max-width: 1200px) { .alumni-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .alumni-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .alumni-grid { grid-template-columns: 1fr; } }
/* Alumni card */
.alumni-card {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--navy-100);
border-radius: 16px;
overflow: hidden;
transition: transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.alumni-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(16, 24, 65, 0.10);
}
/* Avatar */
.alumni-card__avatar-wrap {
display: flex;
justify-content: center;
padding: var(--space-8) var(--space-6) var(--space-5);
background: linear-gradient(145deg, color-mix(in srgb, var(--av-color, #101841) 12%, white), color-mix(in srgb, var(--av-color, #101841) 6%, white));
}
.alumni-card__avatar {
width: 76px;
height: 76px;
border-radius: 50%;
background: var(--av-color, var(--navy-800));
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.02em;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
flex-shrink: 0;
}
/* Body */
.alumni-card__body {
padding: var(--space-5) var(--space-5) var(--space-6);
display: flex;
flex-direction: column;
flex: 1;
}
.alumni-card__name {
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: var(--fw-heading-active);
color: var(--navy-900);
margin-bottom: 2px;
text-align: center;
}
.alumni-card__course {
font-size: var(--text-xs);
color: var(--color-text-secondary);
text-align: center;
margin-bottom: 2px;
}
.alumni-card__uni {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--gold-600);
text-align: center;
margin-bottom: var(--space-4);
}
/* Flags row */
.alumni-card__flags {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
.alumni-flag-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: var(--navy-50);
border: 1px solid var(--navy-100);
border-radius: var(--radius-full);
font-size: 11px;
color: var(--navy-700);
white-space: nowrap;
}
.alumni-flag-chip--dest {
background: var(--gold-50);
border-color: var(--gold-200);
color: var(--gold-700);
}
.alumni-flag-chip__name { font-weight: 500; }
.alumni-card__arrow { color: var(--navy-300); flex-shrink: 0; }
.alumni-card__year {
margin-left: auto;
font-size: 11px;
font-weight: 600;
color: var(--navy-400);
background: var(--navy-50);
border: 1px solid var(--navy-100);
border-radius: var(--radius-full);
padding: 2px 7px;
white-space: nowrap;
}
/* Quote */
.alumni-card__quote {
flex: 1;
border-left: 3px solid var(--gold-300);
padding-left: var(--space-4);
margin: 0;
}
.alumni-card__quote p {
font-size: var(--text-xs);
color: var(--color-text-secondary);
line-height: 1.65;
font-style: italic;
}
/* Fallback for color-mix in older browsers */
@supports not (background: color-mix(in srgb, red, white)) {
.alumni-card__avatar-wrap { background: var(--navy-50); }
}
/* ══════════════════════════════════════════════════════════════════
EVENTS PAGE
══════════════════════════════════════════════════════════════════ */
.events-section { padding-top: var(--space-12); }
/* Controls row */
.events-controls {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.events-sort-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-5);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 500;
color: var(--navy-700);
background: var(--white);
border: 1.5px solid var(--navy-200);
border-radius: var(--radius-full);
cursor: pointer;
white-space: nowrap;
align-self: flex-end;
transition: border-color var(--duration-fast), color var(--duration-fast);
}
.events-sort-btn:hover { border-color: var(--navy-600); color: var(--navy-900); }
/* Events grid — 2 col desktop, 1 col mobile */
.events-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
@media (max-width: 720px) { .events-grid { grid-template-columns: 1fr; } }
/* ── Event card ────────────────────────────────────────────────── */
.event-card {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--navy-100);
border-radius: 16px;
padding: var(--space-6);
cursor: pointer;
transition: transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
text-align: left;
}
.event-card:hover, .event-card:focus-visible {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(16, 24, 65, 0.10);
border-color: var(--navy-200);
outline: none;
}
/* Live state */
.event-card--live {
border-color: var(--gold-400);
box-shadow: 0 0 0 3px rgba(247, 138, 39, 0.12);
}
.event-card--live:hover { border-color: var(--gold-500); }
/* Past state */
.event-card--past {
opacity: 0.65;
filter: saturate(0.4);
}
.event-card--past:hover {
opacity: 0.82;
filter: saturate(0.6);
}
/* Card top */
.event-card__top { margin-bottom: var(--space-4); }
.event-card__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Live badge with pulse */
.event-live-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--gold-500);
color: var(--navy-950);
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.event-live-badge__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--navy-950);
animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
/* Event type badges — colour-coded from existing tokens */
.event-type-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-size: 11px;
font-weight: var(--weight-semibold);
letter-spacing: 0.03em;
white-space: nowrap;
}
.event-type-badge--meet-greet { background: var(--gold-50); color: var(--gold-700); border: 1px solid var(--gold-200); }
.event-type-badge--webinar { background: #EEF2FF; color: #3730A3; border: 1px solid #C7D2FE; }
.event-type-badge--workshop { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.event-type-badge--panel { background: var(--navy-50); color: var(--navy-700); border: 1px solid var(--navy-200); }
/* Date block */
.event-card__date-block {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.event-card__date-day {
font-family: var(--font-display);
font-size: 3rem;
font-weight: 700;
color: var(--navy-900);
line-height: 1;
flex-shrink: 0;
}
.event-card__date-right {
display: flex;
flex-direction: column;
gap: 2px;
}
.event-card__date-month {
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--navy-700);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.event-card__time {
font-size: var(--text-xs);
color: var(--navy-400);
}
/* Title, location, desc */
.event-card__title {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--fw-heading-active);
color: var(--navy-900);
line-height: var(--leading-snug);
margin-bottom: var(--space-2);
}
.event-card__location {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--navy-500);
margin-bottom: var(--space-3);
}
.event-card__location svg { flex-shrink: 0; }
.event-card__desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
flex: 1;
margin-bottom: var(--space-4);
}
/* Capacity bar */
.event-card__capacity {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.event-card__capacity-bar {
flex: 1;
height: 4px;
background: var(--navy-100);
border-radius: 2px;
overflow: hidden;
}
.event-card__capacity-fill {
height: 100%;
background: var(--gold-400);
border-radius: 2px;
transition: width 0.6s var(--ease-out);
}
.event-card__capacity-label {
font-size: 11px;
color: var(--navy-400);
white-space: nowrap;
}
.event-card__capacity-label--solo { margin-bottom: var(--space-3); }
/* Card footer CTA */
.event-card__footer {
margin-top: auto;
padding-top: var(--space-4);
border-top: 1px solid var(--navy-100);
}
.event-card__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-heading);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gold-600);
transition: gap var(--duration-base) var(--ease-out);
}
.event-card:hover .event-card__cta { gap: var(--space-3); }
.event-card:hover .event-card__cta svg { transform: translateX(3px); }
.event-card__cta svg { transition: transform var(--duration-base) var(--ease-out); }
.event-card__cta--live { color: var(--gold-600); }
.event-card__cta--past { color: var(--navy-500); }
.event-card__cta--ended { color: var(--navy-300); cursor: default; }
/* ── Event modal extras ───────────────────────────────────────── */
.ev-modal__inner { grid-template-columns: 1fr 280px; }
.ev-modal__datetime {
font-size: var(--text-sm);
color: var(--navy-500);
margin-bottom: 4px;
}
.ev-modal__location {
font-size: var(--text-sm);
color: var(--navy-500);
margin-bottom: var(--space-5);
}
/* Countdown */
.ev-countdown {
display: flex;
flex-direction: column;
gap: var(--space-3);
background: var(--navy-50);
border: 1px solid var(--navy-100);
border-radius: 12px;
padding: var(--space-5) var(--space-6);
margin-bottom: var(--space-6);
}
.ev-countdown__label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--navy-400);
}
.ev-countdown__units {
display: flex;
gap: var(--space-4);
}
.ev-countdown__unit {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.ev-countdown__unit span {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 700;
color: var(--navy-900);
line-height: 1;
}
.ev-countdown__unit small {
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--navy-400);
}
/* Agenda */
.ev-agenda {
display: flex;
flex-direction: column;
gap: 0;
border-left: 2px solid var(--navy-100);
padding-left: var(--space-5);
}
.ev-agenda div {
display: grid;
grid-template-columns: 60px 1fr;
gap: var(--space-3);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--navy-50);
}
.ev-agenda div:last-child { border-bottom: none; }
.ev-agenda dt {
font-size: var(--text-xs);
font-weight: 600;
color: var(--navy-500);
white-space: nowrap;
padding-top: 2px;
}
.ev-agenda dd { font-size: var(--text-sm); color: var(--color-text-secondary); }
/* Speakers */
.ev-speakers { display: flex; flex-direction: column; gap: var(--space-5); }
.ev-speaker {
display: flex;
gap: var(--space-4);
align-items: flex-start;
}
.ev-speaker__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--navy-800);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
flex-shrink: 0;
}
.ev-speaker strong { display: block; font-size: var(--text-sm); color: rgba(255,255,255,0.9); margin-bottom: 2px; }
.ev-speaker p { font-size: var(--text-xs); color: rgba(255,255,255,0.55); margin-bottom: 4px; }
.ev-speaker span { font-size: var(--text-xs); color: rgba(255,255,255,0.45); line-height: 1.5; }
/* Share */
.ev-share__btns { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ev-share__btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-5);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 500;
color: var(--navy-700);
background: var(--navy-50);
border: 1px solid var(--navy-200);
border-radius: var(--radius-full);
cursor: pointer;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
.ev-share__btn:hover { background: var(--navy-100); border-color: var(--navy-300); }
/* Sidebar dark tweaks */
.ev-sidebar .uni-modal__key-dl dt { color: rgba(255,255,255,0.4); }
.ev-sidebar .uni-modal__key-dl dd { color: rgba(255,255,255,0.9); }
/* Responsive event modal */
@media (max-width: 820px) {
.ev-modal__inner { grid-template-columns: 1fr; }
}
/* Mobile events controls */
@media (max-width: 640px) {
.events-controls { flex-direction: column; }
.events-sort-btn { align-self: flex-start; }
}
/* ══════════════════════════════════════════════════════════════════
UNIVERSITIES / COURSE SEARCH PAGE
══════════════════════════════════════════════════════════════════ */
/* ── Search bar ─────────────────────────────────────────────────── */
.uni-search-section { padding-top: var(--space-12); }
.uni-searchbar { margin-bottom: var(--space-8); }
.uni-searchbar__wrap {
position: relative;
display: flex;
align-items: center;
}
.uni-searchbar__icon {
position: absolute;
left: var(--space-5);
color: var(--navy-400);
pointer-events: none;
flex-shrink: 0;
}
.uni-searchbar__input {
width: 100%;
height: 60px;
padding: 0 var(--space-12) 0 calc(var(--space-5) + 28px);
font-family: var(--font-heading);
font-size: var(--text-base);
color: var(--navy-900);
background: var(--white);
border: 1.5px solid var(--navy-200);
border-radius: 14px;
outline: none;
transition: border-color var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
-webkit-appearance: none;
}
.uni-searchbar__input::placeholder { color: var(--navy-300); }
.uni-searchbar__input:focus {
border-color: var(--navy-800);
box-shadow: 0 0 0 3px rgba(16, 24, 65, 0.08);
}
.uni-searchbar__clear {
position: absolute;
right: var(--space-4);
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: var(--navy-100);
border-radius: 50%;
color: var(--navy-600);
cursor: pointer;
transition: background var(--duration-fast);
}
.uni-searchbar__clear:hover { background: var(--navy-200); }
/* ── Filters ─────────────────────────────────────────────────────── */
.uni-filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
margin-bottom: var(--space-6);
}
.uni-filter-group {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.uni-filter-group__label {
font-family: var(--font-heading);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--navy-400);
white-space: nowrap;
}
.uni-filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.uni-pill {
padding: var(--space-2) var(--space-4);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 500;
color: var(--navy-600);
background: var(--white);
border: 1.5px solid var(--navy-150, var(--navy-200));
border-radius: var(--radius-full);
cursor: pointer;
transition: background var(--duration-fast), color var(--duration-fast),
border-color var(--duration-fast);
white-space: nowrap;
}
.uni-pill:hover { border-color: var(--navy-400); color: var(--navy-900); }
.uni-pill.is-active {
background: var(--navy-800);
color: var(--white);
border-color: var(--navy-800);
}
/* ── Results count ───────────────────────────────────────────────── */
.uni-results-count {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
}
.uni-results-count strong { color: var(--navy-900); }
/* ── Course grid ─────────────────────────────────────────────────── */
.uni-course-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 1024px) { .uni-course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .uni-course-grid { grid-template-columns: 1fr; } }
/* ── Course card ─────────────────────────────────────────────────── */
.course-card {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--navy-100);
border-radius: 16px;
padding: var(--space-6);
cursor: pointer;
transition: transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
text-align: left;
}
.course-card:hover, .course-card:focus-visible {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(16, 24, 65, 0.10);
border-color: var(--navy-300);
outline: none;
}
.course-card:focus-visible { box-shadow: 0 0 0 3px rgba(16, 24, 65, 0.15), 0 16px 48px rgba(16, 24, 65, 0.10); }
.course-card__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.course-card__flag { font-size: 1.25rem; line-height: 1; }
.course-card__uni {
font-family: var(--font-heading);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gold-600);
margin-bottom: var(--space-2);
}
.course-card__title {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: var(--fw-heading-active);
color: var(--navy-900);
line-height: var(--leading-snug);
margin-bottom: var(--space-1);
}
.course-card__code {
font-size: var(--text-xs);
color: var(--navy-400);
margin-bottom: var(--space-4);
}
.course-card__divider {
height: 1px;
background: var(--navy-100);
margin-bottom: var(--space-4);
}
/* Key info 2×2 grid */
.course-card__meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
}
.course-card__meta div { display: flex; flex-direction: column; gap: 2px; }
.course-card__meta dt {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--navy-400);
}
.course-card__meta dd {
font-size: var(--text-sm);
color: var(--navy-800);
font-weight: 500;
}
.course-card__tuition { color: var(--gold-700); }
.course-card__entry {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--color-text-secondary);
line-height: 1.5;
margin-bottom: var(--space-2);
flex: 1;
}
.course-card__entry svg { flex-shrink: 0; color: var(--color-success); margin-top: 1px; }
.course-card__accred {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--navy-500);
margin-bottom: var(--space-4);
}
.course-card__accred svg { flex-shrink: 0; color: var(--gold-500); }
.course-card__footer {
margin-top: auto;
padding-top: var(--space-4);
border-top: 1px solid var(--navy-100);
}
.course-card__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-heading);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gold-600);
transition: gap var(--duration-base) var(--ease-out);
}
.course-card:hover .course-card__cta { gap: var(--space-3); }
.course-card:hover .course-card__cta svg { transform: translateX(3px); }
.course-card__cta svg { transition: transform var(--duration-base) var(--ease-out); }
/* ── Mode badges ─────────────────────────────────────────────────── */
.mode-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-size: 11px;
font-weight: var(--weight-semibold);
letter-spacing: 0.03em;
white-space: nowrap;
}
.mode-badge--on-campus { background: var(--gold-50); color: var(--gold-700); border: 1px solid var(--gold-200); }
.mode-badge--online { background: #EEF2FF; color: #3730A3; border: 1px solid #C7D2FE; }
.mode-badge--hybrid { background: var(--navy-50); color: var(--navy-700); border: 1px solid var(--navy-200); }
.mode-badge--neutral { background: var(--navy-50); color: var(--navy-600); border: 1px solid var(--navy-150, var(--navy-200)); text-transform: capitalize; }
.mode-badge--accred { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
/* ── Empty state ─────────────────────────────────────────────────── */
.uni-empty[hidden] { display: none; }
.uni-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-20) var(--space-8);
color: var(--navy-400);
gap: var(--space-4);
}
.uni-empty h3 { color: var(--navy-800); font-size: var(--text-xl); }
.uni-empty p { color: var(--color-text-secondary); max-width: 380px; }
/* ── Modal overlay ───────────────────────────────────────────────── */
.uni-modal-overlay {
position: fixed;
inset: 0;
background: rgba(6, 10, 28, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
overflow-y: auto;
}
.uni-modal-overlay[hidden] { display: none; }
.uni-modal {
position: relative;
background: var(--white);
border-radius: 20px;
width: 100%;
max-width: 1020px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 32px 80px rgba(6, 10, 28, 0.35);
animation: modalSlideIn 0.28s var(--ease-out) both;
}
@keyframes modalSlideIn {
from { opacity: 0; transform: translateY(24px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.uni-modal__close {
position: absolute;
top: var(--space-5);
right: var(--space-5);
z-index: 10;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--navy-50);
border: none;
border-radius: 50%;
color: var(--navy-700);
cursor: pointer;
transition: background var(--duration-fast);
}
.uni-modal__close:hover { background: var(--navy-100); }
.uni-modal__inner {
display: grid;
grid-template-columns: 1fr 300px;
min-height: 0;
}
/* Main content pane */
.uni-modal__main {
padding: var(--space-10) var(--space-10) var(--space-10) var(--space-10);
border-right: 1px solid var(--navy-100);
overflow-y: auto;
}
.uni-modal__header { margin-bottom: var(--space-6); }
.uni-modal__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.uni-modal__uni-name {
font-family: var(--font-heading);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--gold-600);
margin-bottom: var(--space-2);
}
.uni-modal__title {
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: var(--fw-heading-active);
color: var(--navy-900);
line-height: var(--leading-snug);
margin-bottom: var(--space-2);
}
.uni-modal__code { font-size: var(--text-sm); color: var(--navy-400); }
.uni-modal__desc {
font-size: var(--text-base);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-8);
}
.uni-modal__section { margin-bottom: var(--space-8); }
.uni-modal__section-heading {
font-family: var(--font-heading);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--navy-400);
margin-bottom: var(--space-4);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--navy-100);
}
.uni-modal__outcomes {
display: flex;
flex-direction: column;
gap: var(--space-3);
list-style: none;
}
.uni-modal__outcomes li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: 1.55;
}
.uni-modal__outcomes li::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold-500);
flex-shrink: 0;
margin-top: 6px;
}
.uni-modal__module-group { margin-bottom: var(--space-5); }
.uni-modal__module-group strong {
display: block;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--navy-800);
margin-bottom: var(--space-2);
}
.uni-modal__module-group ul {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
list-style: none;
}
.uni-modal__module-group li {
padding: 4px 12px;
background: var(--navy-50);
border: 1px solid var(--navy-100);
border-radius: var(--radius-full);
font-size: var(--text-xs);
color: var(--navy-700);
}
.uni-modal__assess-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--space-3);
}
.uni-modal__assess-grid div {
background: var(--navy-50);
border: 1px solid var(--navy-100);
border-radius: 12px;
padding: var(--space-3) var(--space-4);
}
.uni-modal__assess-grid dt { font-size: 11px; color: var(--navy-400); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.uni-modal__assess-grid dd { font-size: var(--text-lg); font-weight: 700; color: var(--navy-900); }
.uni-modal__careers { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.career-chip {
padding: var(--space-2) var(--space-4);
background: var(--gold-50);
border: 1px solid var(--gold-200);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 500;
color: var(--gold-700);
}
/* Sidebar */
.uni-modal__sidebar {
padding: var(--space-10) var(--space-7);
background: var(--navy-950);
border-radius: 0 20px 20px 0;
overflow-y: auto;
}
.uni-modal__sidebar .uni-modal__section-heading { color: rgba(255,255,255,0.4); border-bottom-color: rgba(255,255,255,0.08); }
.uni-modal__key-dl { display: flex; flex-direction: column; gap: var(--space-3); }
.uni-modal__key-dl div { display: flex; flex-direction: column; gap: 2px; }
.uni-modal__key-dl dt { font-size: var(--text-xs); color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.05em; }
.uni-modal__key-dl dd { font-size: var(--text-sm); color: rgba(255,255,255,0.9); font-weight: 500; }
.uni-modal__key-dl a { color: var(--gold-400); text-decoration: none; }
.uni-modal__key-dl a:hover { color: var(--gold-300); text-decoration: underline; }
.uni-modal__entry {
font-size: var(--text-sm);
color: rgba(255,255,255,0.75);
line-height: 1.6;
}
.uni-modal__deadline {
font-size: var(--text-sm);
color: rgba(255,255,255,0.75);
margin-bottom: var(--space-4);
line-height: 1.5;
}
.uni-modal__apply-btn { display: block; text-align: center; margin-bottom: var(--space-3); }
.uni-modal__map iframe { display: block; }
/* ── Responsive modal ─────────────────────────────────────────────── */
@media (max-width: 820px) {
.uni-modal__inner { grid-template-columns: 1fr; }
.uni-modal__main { border-right: none; border-bottom: 1px solid var(--navy-100); padding: var(--space-8) var(--space-6); }
.uni-modal__sidebar { border-radius: 0 0 20px 20px; padding: var(--space-8) var(--space-6); }
}
@media (max-width: 600px) {
.uni-modal-overlay { padding: 0; align-items: flex-end; }
.uni-modal { border-radius: 20px 20px 0 0; max-height: 92vh; }
}
/* ── Filters mobile ─────────────────────────────────────────────── */
@media (max-width: 640px) {
.uni-filters { flex-direction: column; gap: var(--space-4); }
.uni-filter-group { flex-wrap: wrap; }
}
/* ══════════════════════════════════════════════════════════
COURSES & ALUMNI PAGE
══════════════════════════════════════════════════════════ */
.ca-section-header { margin-bottom: var(--space-8); }
.ca-section-header--flush { margin-bottom: var(--space-6); }
.ca-section-header .section-eyebrow { margin-bottom: var(--space-2); }
.ca-section-title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--display-md); color: var(--navy-800); line-height: var(--lh-heading); margin-bottom: var(--space-3); }
.ca-section-sub { font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 600px; }
.ca-courses-section {
position: relative;
background: var(--off-white);
}
.ca-courses-section::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 250px 250px;
opacity: 0.50;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 0;
}
.ca-courses-section > * { position: relative; z-index: 1; }
.ca-alumni-section { background: var(--navy-50); }
.ca-alumni-filters { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.ca-alumni-count-line { margin-bottom: 0; }
/* Alumni carousel */
.alumni-carousel-wrap { position: relative; }
.alumni-carousel { overflow: hidden; }
.alumni-carousel__track {
display: flex;
gap: 20px;
transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.alumni-carousel__track .alumni-card { flex-shrink: 0; }
.alumni-carousel__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid var(--navy-200);
background: var(--white);
color: var(--navy-700);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 12px rgba(16,24,65,0.10);
transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
z-index: 2;
}
.alumni-carousel__btn--prev { left: -22px; }
.alumni-carousel__btn--next { right: -22px; }
.alumni-carousel__btn:hover:not(:disabled) { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); transform: translateY(-50%) scale(1.08); }
.alumni-carousel__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.alumni-carousel__nav { display: flex; justify-content: center; margin-top: var(--space-6); }
.alumni-carousel__dots { display: flex; gap: 6px; align-items: center; }
.alumni-carousel__dot {
width: 8px; height: 8px; border-radius: 50%; border: none;
background: var(--navy-200); cursor: pointer; padding: 0;
transition: background var(--duration-fast), width var(--duration-base);
}
.alumni-carousel__dot.is-active { background: var(--navy-800); width: 24px; border-radius: 4px; }
/* ══════════════════════════════════════════════════════════
MEDIA PAGE
══════════════════════════════════════════════════════════ */
.media-layout { background: var(--off-white); position: relative; overflow: hidden; }
.media-layout::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 250px 250px;
opacity: 0.50;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 0;
}
.media-layout .container { position: relative; z-index: 1; }
.media-layout__inner { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-12); align-items: start; }
@media (max-width: 1100px) { .media-layout__inner { grid-template-columns: 1fr 300px; gap: var(--space-8); } }
@media (max-width: 860px) { .media-layout__inner { grid-template-columns: 1fr; } }
.media-main { min-width: 0; }
.media-events-block { margin-bottom: var(--space-10); }
/* ── Redesigned event cards ─────────────────────────────── */
.mev-list { display: flex; flex-direction: column; gap: var(--space-4); }
.mev-card {
display: flex;
align-items: stretch;
background: var(--white);
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--navy-100);
box-shadow: 0 2px 12px rgba(16,24,65,0.06);
cursor: pointer;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
position: relative;
}
.mev-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(16,24,65,0.13); border-color: transparent; }
.mev-card--live { border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(247,138,39,0.15); }
/* Date column */
.mev-card__date-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 88px;
padding: var(--space-6) var(--space-4);
background: linear-gradient(160deg, var(--navy-900), #1a2b6e);
color: var(--white);
flex-shrink: 0;
}
.mev-card--webinar .mev-card__date-col { background: linear-gradient(160deg, #1D4ED8, #1E40AF); }
.mev-card--workshop .mev-card__date-col { background: linear-gradient(160deg, #065F46, #047857); }
.mev-card--panel .mev-card__date-col { background: linear-gradient(160deg, #6D28D9, #5B21B6); }
.mev-card__day { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--white); }
.mev-card__mon { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.6); margin-top: 2px; }
.mev-card__yr { font-size: 0.62rem; color: rgba(255,255,255,0.38); letter-spacing: 0.08em; margin-top: 6px; }
/* Body */
.mev-card__body {
flex: 1;
padding: var(--space-5) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
}
.mev-card__badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.mev-card__title {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 700;
color: var(--navy-900);
line-height: 1.3;
margin-top: var(--space-1);
}
.mev-card__meta {
display: flex;
flex-wrap: wrap;
column-gap: var(--space-5);
row-gap: var(--space-1);
}
.mev-card__meta-item {
display: flex;
align-items: center;
gap: 5px;
font-size: var(--text-xs);
color: var(--navy-400);
}
.mev-card__meta-item svg { color: var(--navy-300); flex-shrink: 0; }
.mev-card__capacity { color: var(--gold-600); }
.mev-card__capacity svg { color: var(--gold-500); }
.mev-card__desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: var(--space-1);
}
/* CTA column */
.mev-card__cta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-5) var(--space-6) var(--space-5) 0;
flex-shrink: 0;
}
.mev-card__cta-label {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--gold-500);
white-space: nowrap;
}
.mev-card__cta-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
border: 1.5px solid var(--gold-400);
color: var(--gold-500);
transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}
.mev-card:hover .mev-card__cta-arrow { background: var(--gold-500); color: var(--white); border-color: var(--gold-500); transform: translateX(3px); }
@media (max-width: 600px) {
.mev-card { flex-direction: column; }
.mev-card__date-col { flex-direction: row; min-width: unset; padding: var(--space-3) var(--space-5); gap: var(--space-3); }
.mev-card__yr { margin-top: 0; margin-left: auto; }
.mev-card__cta { flex-direction: row; padding: 0 var(--space-5) var(--space-4); justify-content: flex-start; }
}
/* ── Gallery Section ─────────────────────────────────────────── */
.gallery-section { margin-bottom: var(--space-12); }
/* Three-column masonry grid; native CSS masonry where supported */
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 8px;
gap: 14px;
align-items: start;
}
@supports (grid-template-rows: masonry) {
.gallery-grid {
grid-template-rows: masonry;
grid-auto-rows: unset;
align-items: unset;
}
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; gap: 10px; } }
/* Entry animation — stagger applied via JS setTimeout on .is-visible */
.gallery-item {
opacity: 0;
transform: translateY(20px);
transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
min-width: 0;
}
.gallery-item.is-visible { opacity: 1; transform: translateY(0); }
/* Card container — overflow clips the scale-up image */
.gallery-item__inner {
position: relative;
overflow: hidden;
border-radius: 14px;
cursor: pointer;
background: var(--navy-100);
box-shadow:
0 1px 3px rgba(0,0,0,0.10),
0 4px 12px rgba(0,0,0,0.06);
transition: box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item__inner:hover {
box-shadow:
0 4px 16px rgba(0,0,0,0.18),
0 12px 40px rgba(0,0,0,0.14);
}
/* Image scales on hover — applied to ![]()
, not the card, so grid stays stable */
.gallery-item__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.gallery-item__inner:hover .gallery-item__img,
.gallery-item:focus-visible .gallery-item__img { transform: scale(1.04); }
/* Bottom-to-top dark gradient overlay */
.gallery-item__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(8, 12, 32, 0.90) 0%,
rgba(8, 12, 32, 0.30) 48%,
transparent 100%
);
opacity: 0;
transition: opacity 300ms ease;
display: flex;
align-items: flex-end;
}
.gallery-item__inner:hover .gallery-item__overlay,
.gallery-item:focus-visible .gallery-item__overlay { opacity: 1; }
/* Caption slides up and fades in together with the overlay */
.gallery-item__caption {
padding: 20px 16px 18px;
transform: translateY(8px);
opacity: 0;
transition: transform 300ms ease, opacity 300ms ease;
width: 100%;
}
.gallery-item__inner:hover .gallery-item__caption,
.gallery-item:focus-visible .gallery-item__caption {
transform: translateY(0);
opacity: 1;
}
/* Gold accent pill tag */
.gallery-item__tag {
display: inline-block;
font-size: 0.6rem;
font-weight: 700;
color: var(--gold-400);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 6px;
background: rgba(247, 138, 39, 0.14);
padding: 2px 8px;
border-radius: 4px;
border: 1px solid rgba(247, 138, 39, 0.28);
}
/* Event/location title — white Montserrat medium */
.gallery-item__title {
display: block;
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.93);
line-height: 1.45;
}
/* Focus ring */
.gallery-item:focus-visible {
outline: 2px solid var(--gold-400);
outline-offset: 3px;
border-radius: 14px;
}
@media (prefers-reduced-motion: reduce) {
.gallery-item { opacity: 1; transform: none; transition: none; }
.gallery-item__img,
.gallery-item__overlay,
.gallery-item__caption { transition: none; }
}
/* ── Gallery Reel tile ───────────────────────────────────────── */
.gallery-item--reel .gallery-item__reel-bg {
position: absolute; inset: 0;
background: linear-gradient(160deg, #3a1c71 0%, #d76d77 50%, #ffaf7b 100%);
display: flex; align-items: center; justify-content: center;
}
.gallery-item__reel-play {
width: 56px; height: 56px; border-radius: 50%;
background: rgba(255,255,255,.2); backdrop-filter: blur(4px);
border: 2px solid rgba(255,255,255,.5);
display: flex; align-items: center; justify-content: center;
color: #fff;
transition: transform var(--duration-fast), background var(--duration-fast);
}
.gallery-item--reel:hover .gallery-item__reel-play,
.gallery-item--reel:focus-visible .gallery-item__reel-play {
transform: scale(1.12); background: rgba(255,255,255,.35);
}
.gallery-item__reel-logo {
position: absolute; bottom: 12px; left: 12px;
display: flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 700; color: rgba(255,255,255,.85);
letter-spacing: .3px;
}
/* ── Reel Modal ──────────────────────────────────────────────── */
.reel-modal {
position: fixed; inset: 0; z-index: 1200;
display: flex; align-items: center; justify-content: center;
padding: var(--space-4);
}
.reel-modal__bg {
position: absolute; inset: 0;
background: rgba(10, 14, 33, .88);
backdrop-filter: blur(6px);
}
.reel-modal__box {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
animation: reelFadeIn 280ms cubic-bezier(.4,0,.2,1);
}
@keyframes reelFadeIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.reel-modal__close {
position: absolute; top: -40px; right: 0;
width: 32px; height: 32px; border-radius: 50%;
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background var(--duration-fast);
}
.reel-modal__close:hover { background: rgba(255,255,255,.25); }
.reel-modal__embed {
width: min(326px, 90vw);
max-height: 86vh;
overflow-y: auto;
border-radius: 12px;
box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.reel-modal__embed iframe { display: block; }
/* ── Gallery Lightbox ────────────────────────────────────────── */
/* z-index above header (400) */
.gal-lb {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
flex-direction: column;
align-items: stretch;
}
.gal-lb[hidden] { display: none; }
/* Full-bleed dark backdrop with blur */
.gal-lb__bg {
position: absolute;
inset: 0;
background: rgba(5, 8, 24, 0.96);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Close button — top-right, rotates on hover */
.gal-lb__close {
position: absolute;
top: 20px; right: 20px;
z-index: 10;
width: 44px; height: 44px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.07);
color: var(--white);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 220ms ease, border-color 220ms ease, transform 280ms ease;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.gal-lb__close:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.45);
transform: rotate(90deg);
}
.gal-lb__close:focus-visible {
outline: 2px solid var(--gold-400);
outline-offset: 3px;
}
/* Stage — flex row: [prev] [viewport] [next] */
.gal-lb__stage {
position: relative;
z-index: 5;
display: flex;
align-items: center;
gap: 16px;
padding: 62px 20px 10px;
flex: 1;
min-height: 0;
}
/* Viewport clips and centres the dual-slot images */
.gal-lb__viewport {
flex: 1;
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 0;
}
/* Both image slots sit absolute inside the viewport */
.gal-lb__img {
position: absolute;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transform-origin: center;
user-select: none;
-webkit-user-drag: none;
border-radius: 3px;
}
/* Subtle loading pulse — shown while the next image hasn't loaded yet */
.gal-lb__pulse {
position: absolute;
width: 32px; height: 32px;
border-radius: 50%;
border: 2px solid rgba(247, 138, 39, 0.2);
border-top-color: var(--gold-400);
opacity: 0;
pointer-events: none;
transition: opacity 150ms ease;
animation: galPulse 700ms linear infinite;
}
.gal-lb__viewport.is-loading .gal-lb__pulse { opacity: 1; }
@keyframes galPulse {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.gal-lb__pulse { display: none; }
}
/* Prev / next arrow buttons */
.gal-lb__nav {
flex-shrink: 0;
width: 52px; height: 52px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.07);
color: var(--white);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
z-index: 10;
transition: background 200ms ease, border-color 200ms ease, transform 180ms ease;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.gal-lb__nav:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.45);
}
.gal-lb__nav--prev:hover { transform: translateX(-3px); }
.gal-lb__nav--next:hover { transform: translateX(3px); }
.gal-lb__nav:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }
@media (max-width: 600px) { .gal-lb__nav { width: 38px; height: 38px; } }
/* Footer — info row + filmstrip */
.gal-lb__footer {
position: relative;
z-index: 5;
padding: 10px 84px 22px;
display: flex;
flex-direction: column;
gap: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 600px) { .gal-lb__footer { padding: 10px 16px 18px; } }
/* Meta row: tag · title · counter */
.gal-lb__info {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
/* Category pill — matches grid item pill style */
.gal-lb__tag {
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--gold-400);
background: rgba(247, 138, 39, 0.14);
padding: 2px 8px;
border-radius: 4px;
border: 1px solid rgba(247, 138, 39, 0.28);
white-space: nowrap;
}
/* Image title */
.gal-lb__title {
font-family: var(--font-heading);
font-size: 0.875rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.88);
letter-spacing: 0.01em;
}
/* 1 / 9 counter — right-aligned */
.gal-lb__counter {
margin-left: auto;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.28);
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
white-space: nowrap;
}
/* ── Filmstrip ── */
.gal-lb__strip {
display: flex;
gap: 7px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
padding: 3px 0 5px;
/* allow strip to be centred by JS scrollTo */
scroll-padding-inline: 50%;
}
.gal-lb__strip::-webkit-scrollbar { display: none; }
.gal-lb__thumb {
flex-shrink: 0;
width: 62px; height: 44px;
border-radius: 7px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
background: none;
padding: 0;
opacity: 0.42;
transform: scale(1);
transition: border-color 200ms ease, opacity 200ms ease, transform 220ms ease;
}
.gal-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-lb__thumb.is-active {
border-color: var(--white);
opacity: 1;
transform: scale(1.1);
}
.gal-lb__thumb:hover:not(.is-active) { opacity: 0.78; }
.gal-lb__thumb:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.gal-lb__img { transition: none !important; }
.gal-lb__bg { transition: none !important; }
.gal-lb__thumb { transition: none; }
}
.media-past-block { margin-bottom: var(--space-10); }
.media-past-heading { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--text-base); color: var(--navy-600); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--navy-100); }
.media-past-list { display: flex; flex-direction: column; }
.media-past-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--navy-50); cursor: pointer; border-radius: 8px; transition: background var(--duration-fast); }
.media-past-item:hover { background: var(--navy-50); }
.media-past-item__date { font-size: var(--text-xs); color: var(--color-text-secondary); white-space: nowrap; width: 80px; flex-shrink: 0; }
.media-past-item__title { flex: 1; font-size: var(--text-sm); color: var(--navy-800); font-weight: 500; }
.media-past-item__cta { font-size: var(--text-xs); color: var(--gold-600); white-space: nowrap; }
/* ── Video Section ───────────────────────────────────────────── */
.media-videos-section { margin-bottom: var(--space-12); }
/* Flexbox grid — guaranteed 2 equal columns at every viewport width */
.video-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.video-card {
flex: 0 0 calc(50% - 10px); /* exactly half minus half the 20px gap */
min-width: 0;
background: #fff;
border-radius: 14px;
border: 1px solid #e8e9ed;
overflow: hidden;
box-shadow: 0 2px 8px rgba(16,24,65,.08);
opacity: 0;
transform: translateY(18px);
transition: opacity 480ms ease-out, transform 480ms ease-out, box-shadow 260ms ease;
}
.video-card.is-visible { opacity: 1; transform: translateY(0); }
.video-card.is-visible:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(16,24,65,.15); }
/* ── Video well ── */
.video-card__wrap {
position: relative;
background: #0d1232; /* navy-900 hardcoded — critical for overlay to read */
overflow: hidden;
line-height: 0; /* kills the inline-block gap that produces the rogue ▶ */
}
.video-card__player {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: contain;
background: #0d1232;
}
/* ── Overlay — solid dark tint so the play btn is always legible ── */
.video-card__play-cover {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(10, 18, 48, 0.52);
cursor: pointer;
transition: background 200ms ease;
}
.video-card__play-cover:hover { background: rgba(10, 18, 48, 0.64); }
.video-card.is-playing .video-card__play-cover { opacity: 0; pointer-events: none; }
/* ── Play button ── */
.video-card__play-btn {
width: 52px;
height: 52px;
border-radius: 50%;
background: #f78a27;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
box-shadow: 0 4px 18px rgba(247,138,39,.50), 0 0 0 7px rgba(247,138,39,.16);
transition: transform 220ms ease, background 180ms ease, box-shadow 180ms ease;
}
.video-card__play-cover:hover .video-card__play-btn {
transform: scale(1.12);
background: #d47518;
box-shadow: 0 6px 24px rgba(247,138,39,.60), 0 0 0 9px rgba(247,138,39,.22);
}
/* ── Meta: tag pill stacked above title ── */
.video-card__meta {
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
gap: 5px;
}
.video-card__tag {
align-self: flex-start;
display: inline-block;
background: #f78a27;
color: #101841;
font-size: 0.62rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 100px;
text-transform: uppercase;
letter-spacing: 0.07em;
line-height: 1.6;
white-space: nowrap;
}
.video-card__title {
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 600;
color: #101841;
line-height: 1.4;
padding-top: 1px;
}
@media (max-width: 768px) {
.video-grid { gap: 14px; }
.video-card { flex: 0 0 calc(50% - 7px); }
}
@media (max-width: 480px) {
.video-grid { gap: 10px; }
.video-card { flex: 0 0 calc(50% - 5px); }
.video-card__meta { padding: 10px 12px 12px; gap: 4px; }
.video-card__tag { font-size: 0.6rem; padding: 1px 6px; }
.video-card__title { font-size: 0.72rem; }
}
/* ── Blog / Insights ─────────────────────────────────────────── */
.media-blog-section { margin-top: var(--space-2); }
.media-blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 640px) { .media-blog-grid { grid-template-columns: 1fr !important; } }
.media-no-posts { color: var(--color-text-secondary); font-size: var(--text-sm); padding: var(--space-8) 0; }
.media-sidebar { position: sticky; top: calc(var(--header-height) + var(--space-6)); display: flex; flex-direction: column; gap: var(--space-6); }
@media (max-width: 860px) { .media-sidebar { position: static; } }
.social-feed-card { background: var(--white); border: 1.5px solid var(--navy-100); border-radius: 16px; padding: var(--space-5); overflow: hidden; }
.social-feed-card__header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--navy-50); }
.social-feed-card__icon--x { color: #000; flex-shrink: 0; }
.social-feed-card__icon--ig { color: #E1306C; flex-shrink: 0; }
.social-feed-card__platform { font-size: var(--text-sm); font-weight: 600; color: var(--navy-800); flex: 1; }
.social-feed-card__follow { font-size: var(--text-xs); font-weight: 700; color: var(--white); background: var(--navy-800); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); text-decoration: none; transition: background var(--duration-fast); }
.social-feed-card__follow:hover { background: var(--gold-500); }
.social-feed-card__view-all { display: block; font-size: var(--text-xs); color: var(--gold-600); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--navy-50); text-decoration: none; }
.social-feed-card__view-all:hover { color: var(--gold-700); }
.social-feed-card__posts { display: flex; flex-direction: column; gap: var(--space-4); }
.social-post { display: flex; gap: var(--space-3); }
.social-post__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--av, var(--navy-800)); color: var(--white); font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.social-post__body { flex: 1; min-width: 0; }
.social-post__meta { font-size: var(--text-xs); color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.social-post__meta strong { color: var(--navy-800); }
.social-post__text { font-size: var(--text-xs); color: var(--navy-700); line-height: 1.5; margin-bottom: var(--space-2); }
.social-post__actions { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-secondary); }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: 8px; overflow: hidden; }
.ig-post { aspect-ratio: 1; background: var(--ig-color, var(--navy-200)); position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ig-post__icon { font-size: 1.5rem; position: relative; z-index: 1; }
.ig-post__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--duration-fast); }
.ig-post:hover .ig-post__overlay { opacity: 1; }
.ig-post__likes { color: var(--white); font-size: var(--text-xs); font-weight: 600; }
/* ── Instagram Feed Card ─────────────────────────────────────────────────── */
.ig-feed-card { background: var(--white); border: 1.5px solid var(--navy-100); border-radius: 16px; overflow: hidden; }
.ig-feed-card__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--navy-50); }
.ig-feed-card__avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: var(--white); }
.ig-feed-card__handle-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ig-feed-card__handle { font-size: var(--text-sm); font-weight: 700; color: var(--navy-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-feed-card__platform-label { font-size: 11px; color: var(--color-text-secondary); }
.ig-feed-card__follow-btn { font-size: var(--text-xs); font-weight: 700; color: var(--white); background: linear-gradient(135deg, #f09433 0%, #dc2743 50%, #bc1888 100%); padding: 6px 14px; border-radius: var(--radius-full); text-decoration: none; transition: opacity var(--duration-fast); white-space: nowrap; flex-shrink: 0; }
.ig-feed-card__follow-btn:hover { opacity: .85; }
.ig-feed-card__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; text-decoration: none; }
.ig-feed-card__tile { aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.ig-feed-card__tile-icon { font-size: 1.6rem; position: relative; z-index: 1; transition: transform var(--duration-fast); filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.ig-feed-card__tile-hover { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--duration-fast); z-index: 2; color: var(--white); }
.ig-feed-card__grid:hover .ig-feed-card__tile-hover,
.ig-feed-card__tile:hover .ig-feed-card__tile-hover { opacity: 1; }
.ig-feed-card__tile:hover .ig-feed-card__tile-icon { transform: scale(1.15); }
.ig-feed-card__view-all { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--navy-600); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--navy-50); text-decoration: none; transition: color var(--duration-fast); }
.ig-feed-card__view-all:hover { color: #bc1888; }
.ig-feed-card__view-all svg { color: #E1306C; flex-shrink: 0; }
.media-sidebar-cta {
position: relative;
overflow: hidden;
background: linear-gradient(145deg, var(--navy-900) 0%, #1a2b6e 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: var(--space-7) var(--space-6);
text-align: center;
}
.media-sidebar-cta__orb {
position: absolute;
top: -60px;
right: -60px;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(247,138,39,0.18) 0%, transparent 70%);
pointer-events: none;
}
.media-sidebar-cta__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 14px;
background: rgba(247,138,39,0.15);
border: 1px solid rgba(247,138,39,0.3);
color: var(--gold-500);
margin: 0 auto var(--space-4);
}
.media-sidebar-cta__heading {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-lg);
color: var(--white);
margin-bottom: var(--space-2);
line-height: 1.3;
}
.media-sidebar-cta__sub {
font-size: var(--text-sm);
color: rgba(255,255,255,0.65);
margin-bottom: var(--space-5);
line-height: 1.6;
}
.media-sidebar-cta__perks {
list-style: none;
padding: 0;
margin: 0 0 var(--space-5);
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-block: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
text-align: left;
}
.media-sidebar-cta__perks li {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: rgba(255,255,255,0.8);
}
.media-sidebar-cta__perks li svg { color: var(--gold-500); flex-shrink: 0; }
.media-sidebar-cta__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.media-sidebar-cta__actions .btn--block { display: flex; width: 100%; }
.media-sidebar-cta__actions .btn--ghost-white {
border: 1.5px solid rgba(255,255,255,0.25);
color: rgba(255,255,255,0.8);
background: transparent;
}
.media-sidebar-cta__actions .btn--ghost-white:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.45);
color: var(--white);
}
.media-sidebar-cta__trust {
margin-top: var(--space-4);
font-size: var(--text-xs);
color: rgba(255,255,255,0.4);
letter-spacing: 0.02em;
}
/* ════════════════════════════════════════════════════════════════
SECTION TRANSITION GRADIENTS
════════════════════════════════════════════════════════════════ */
/* CTA banner: top fade — very faint bleed from the preceding section */
.cta-banner::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 80px;
background: linear-gradient(to bottom, rgba(255,255,255,0.38), transparent);
pointer-events: none;
z-index: 0;
}
/* Ensure inner content stays above the fade */
.cta-banner__inner { z-index: 2; }
/* ════════════════════════════════════════════════════════════════
BREADCRUMB
════════════════════════════════════════════════════════════════ */
/* Default: hidden until JS moves it into the hero */
.breadcrumb {
display: none;
}
/* When JS appends it inside .page-hero__content, show it in normal flow */
.page-hero__content .breadcrumb {
display: block;
position: static;
margin-top: var(--space-5);
pointer-events: auto;
}
.breadcrumb__list {
display: flex;
align-items: center;
gap: var(--space-1);
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumb__item {
display: flex;
align-items: center;
gap: var(--space-1);
opacity: 0;
transform: translateX(-8px);
animation: crumbIn 300ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
animation-delay: var(--crumb-delay, 0ms);
pointer-events: auto;
}
@keyframes crumbIn {
to { opacity: 1; transform: translateX(0); }
}
.breadcrumb__link {
font-size: var(--text-xs);
color: rgba(255,255,255,0.5);
text-decoration: none;
position: relative;
white-space: nowrap;
transition: color var(--duration-fast);
}
.breadcrumb__link::after {
content: '';
position: absolute;
bottom: -1px; left: 0; right: 0;
height: 1px;
background: var(--gold-400);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-fast);
}
.breadcrumb__link:hover { color: var(--gold-300); }
.breadcrumb__link:hover::after { transform: scaleX(1); }
.breadcrumb__sep {
color: rgba(255,255,255,0.25);
flex-shrink: 0;
display: block;
}
.breadcrumb__current {
font-size: var(--text-xs);
font-weight: 600;
color: rgba(255,255,255,0.82);
white-space: nowrap;
}
/* ════════════════════════════════════════════════════════════════
SCHOLARSHIPS PAGE
════════════════════════════════════════════════════════════════ */
.sch-intro-section {
position: relative;
background: var(--off-white);
}
.sch-intro-section::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 250px 250px;
opacity: 0.50;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 0;
}
.sch-intro-section > * { position: relative; z-index: 1; }
.sch-help-section {
position: relative;
background: var(--off-white);
}
.sch-help-section::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 250px 250px;
opacity: 0.50;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 0;
}
.sch-help-section > * { position: relative; z-index: 1; }
/* Scholarships page — left-align all section headers */
.sch-intro-section .section-header,
.sch-help-section .section-header,
[aria-labelledby="sch-programmes-heading"] .section-header {
text-align: left;
margin-inline: 0;
}
/* Intro stats grid */
.sch-intro-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.sch-stat-card {
background: var(--white);
border: 1px solid var(--navy-100);
border-radius: var(--radius-xl);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.sch-stat-card--featured {
background: var(--navy-800);
border-color: var(--navy-800);
}
.sch-stat-card--featured .sch-stat-card__num,
.sch-stat-card--featured .sch-stat-card__label { color: var(--white); }
.sch-stat-card__num {
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 700;
color: var(--navy-800);
line-height: 1;
}
.sch-stat-card__label {
font-size: var(--text-xs);
color: var(--color-text-secondary);
line-height: var(--leading-snug);
}
@media (max-width: 480px) { .sch-intro-stats { grid-template-columns: 1fr; } }
/* Scholarship card grid */
.sch-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
margin-top: var(--space-12);
}
@media (max-width: 1024px) { .sch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sch-grid { grid-template-columns: 1fr; } }
.sch-card {
background: var(--white);
border: 1px solid var(--navy-100);
border-radius: var(--radius-xl);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow var(--duration-base), border-color var(--duration-base);
}
.sch-card:hover {
box-shadow: 0 8px 32px rgba(16,24,65,0.10);
border-color: var(--gold-300);
}
.sch-card__header {
background: color-mix(in srgb, var(--sch-color, #101841) 90%, transparent);
padding: var(--space-5) var(--space-6);
display: flex;
align-items: center;
gap: var(--space-3);
position: relative;
}
.sch-card__flag {
font-size: 2rem;
line-height: 1;
flex-shrink: 0;
}
.sch-card__name {
font-size: var(--text-base);
font-weight: 700;
color: var(--white);
margin: 0;
line-height: var(--leading-snug);
}
.sch-card__country {
font-size: var(--text-xs);
color: rgba(255,255,255,0.65);
display: block;
margin-top: 2px;
}
.sch-card__badge {
margin-left: auto;
background: rgba(247,138,39,0.20);
border: 1px solid rgba(247,138,39,0.40);
color: var(--gold-300);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 3px 10px;
border-radius: 100px;
white-space: nowrap;
flex-shrink: 0;
}
.sch-card__body {
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-4);
flex: 1;
}
.sch-card__body p {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
margin: 0;
}
.sch-card__covers {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.sch-card__covers li {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.sch-card__covers svg { color: var(--gold-500); flex-shrink: 0; }
.sch-card__meta {
display: flex;
flex-direction: column;
gap: var(--space-1);
font-size: var(--text-xs);
color: var(--color-text-secondary);
border-top: 1px solid var(--navy-100);
padding-top: var(--space-4);
}
.sch-card__meta strong { color: var(--navy-800); }
.sch-card__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
color: var(--gold-600);
text-decoration: none;
margin-top: auto;
transition: gap var(--duration-fast), color var(--duration-fast);
}
.sch-card__cta:hover { gap: var(--space-3); color: var(--gold-700); }
/* How we help grid */
.sch-help-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
margin-top: var(--space-12);
}
@media (max-width: 900px) { .sch-help-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .sch-help-grid { grid-template-columns: 1fr; } }
.sch-help-card {
background: var(--white);
border: 1px solid var(--navy-100);
border-radius: var(--radius-xl);
padding: var(--space-7);
display: flex;
flex-direction: column;
gap: var(--space-4);
transition: box-shadow var(--duration-base), border-color var(--duration-base);
}
.sch-help-card:hover {
box-shadow: 0 4px 20px rgba(16,24,65,0.08);
border-color: var(--gold-200);
}
.sch-help-card__icon {
width: 48px;
height: 48px;
border-radius: var(--radius-lg);
background: var(--gold-50);
color: var(--gold-600);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sch-help-card__title {
font-size: var(--text-base);
font-weight: 700;
color: var(--navy-800);
margin: 0;
}
.sch-help-card__body {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
margin: 0;
}
/* ════════════════════════════════════════════════════════════════
LANGUAGE SWITCHER
════════════════════════════════════════════════════════════════ */
.lang-switcher {
position: relative;
display: none; /* hidden on mobile — shown ≥1024px */
}
@media (min-width: 1024px) { .lang-switcher { display: block; } }
.lang-switcher__btn {
display: flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1-5) var(--space-2-5);
background: transparent;
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-md);
color: rgba(255,255,255,0.65);
font-size: var(--text-xs);
font-family: var(--font-ui);
font-weight: 700;
cursor: pointer;
line-height: 1;
white-space: nowrap;
transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}
.lang-switcher__btn:hover {
border-color: rgba(255,255,255,0.38);
color: rgba(255,255,255,0.9);
background: rgba(255,255,255,0.04);
}
.lang-switcher__icon { flex-shrink: 0; }
.lang-switcher__label { letter-spacing: 0.06em; }
.lang-switcher__chevron { transition: transform var(--duration-fast); flex-shrink: 0; }
.lang-switcher.is-open .lang-switcher__chevron { transform: rotate(180deg); }
.lang-switcher__dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
background: var(--navy-900);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-lg);
min-width: 192px;
padding: var(--space-1);
box-shadow: 0 12px 40px rgba(0,0,0,0.5);
display: none;
z-index: var(--z-overlay);
animation: dropIn 180ms var(--ease-out) both;
}
@keyframes dropIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.lang-switcher.is-open .lang-switcher__dropdown { display: block; }
.lang-switcher__option {
display: flex;
align-items: center;
gap: var(--space-2-5);
width: 100%;
padding: var(--space-2) var(--space-3);
border: none;
background: transparent;
color: rgba(255,255,255,0.72);
font-size: var(--text-sm);
font-family: var(--font-ui);
cursor: pointer;
border-radius: var(--radius-md);
text-align: left;
transition: background var(--duration-fast), color var(--duration-fast);
}
.lang-switcher__option:hover {
background: rgba(255,255,255,0.07);
color: var(--white);
}
.lang-switcher__option.is-active {
color: var(--gold-300);
background: rgba(247,138,39,0.1);
}
.lang-switcher__flag { font-size: 1.1rem; line-height: 1; }
/* Loading toast */
.lang-toast {
position: fixed;
bottom: var(--space-5);
left: 50%;
transform: translateX(-50%);
background: rgba(13,18,50,0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-full);
padding: var(--space-2) var(--space-6);
color: rgba(255,255,255,0.9);
font-size: var(--text-sm);
font-family: var(--font-ui);
z-index: var(--z-toast);
white-space: nowrap;
pointer-events: none;
animation: toastUp 0.2s var(--ease-out) both;
}
@keyframes toastUp {
from { opacity: 0; transform: translateX(-50%) translateY(10px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* ── Course card filter animation ─────────────────────────────── */
.course-card {
transition: opacity 200ms ease, transform 200ms ease;
}
.course-card.ca-card--out {
opacity: 0;
transform: scale(0.97) translateY(6px);
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════
SCHOLARSHIP CTA
═══════════════════════════════════════════════════════════ */
.schol-cta {
position: relative;
overflow: hidden;
background: linear-gradient(150deg, #060a1e 0%, #101841 50%, #0d1437 100%);
padding: clamp(4rem, 8vw, 7rem) 0;
}
/* ── Background layers ── */
.schol-cta__bg { position: absolute; inset: 0; pointer-events: none; }
.schol-cta__bg-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
}
.schol-cta__bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
will-change: transform;
}
.schol-cta__bg-orb--1 {
width: 560px; height: 560px;
background: radial-gradient(circle, rgba(247,138,39,.18) 0%, transparent 70%);
top: -160px; left: -120px;
animation: scholOrbFloat 9s ease-in-out infinite alternate;
}
.schol-cta__bg-orb--2 {
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(30,50,140,.35) 0%, transparent 70%);
bottom: -100px; right: 15%;
animation: scholOrbFloat 12s ease-in-out infinite alternate-reverse;
}
.schol-cta__bg-orb--3 {
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(247,138,39,.1) 0%, transparent 70%);
top: 40%; right: -60px;
animation: scholOrbFloat 7s ease-in-out infinite alternate;
animation-delay: -4s;
}
@keyframes scholOrbFloat {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(18px, -22px) scale(1.12); }
}
/* ── Inner grid ── */
.schol-cta__inner {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: center;
}
/* ── LEFT ── */
.schol-cta__left { display: flex; flex-direction: column; }
.schol-cta__pill {
display: inline-flex;
align-items: center;
gap: .5rem;
background: rgba(247,138,39,.1);
border: 1px solid rgba(247,138,39,.3);
border-radius: 999px;
padding: .3rem 1rem;
font-size: .72rem;
font-weight: 700;
color: #f78a27;
letter-spacing: .06em;
text-transform: uppercase;
width: fit-content;
margin-bottom: 1.75rem;
}
.schol-cta__pill-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #f78a27;
animation: scholDotPulse 2.2s ease-in-out infinite;
}
@keyframes scholDotPulse {
0%,100% { opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(247,138,39,.5); }
50% { opacity:.7; transform:scale(1.3); box-shadow:0 0 0 5px rgba(247,138,39,0); }
}
/* Headline */
.schol-cta__heading {
display: flex; flex-direction: column;
margin: 0 0 1.5rem; line-height: 1;
}
.schol-cta__head-sm {
font-family: var(--font-display);
font-size: clamp(1.2rem, 2.5vw, 1.75rem);
font-weight: 500;
color: rgba(255,255,255,.65);
letter-spacing: .03em;
margin-bottom: .15em;
}
.schol-cta__head-pct { display: flex; align-items: flex-start; line-height: .85; }
.schol-cta__pct-num {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(6.5rem, 14vw, 11rem);
background: linear-gradient(130deg, #ffb347 0%, #f78a27 40%, #e8700d 70%, #f78a27 100%);
background-size: 300% 100%;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
animation: scholGoldShimmer 4s linear infinite;
letter-spacing: -.04em;
tabular-nums: true;
}
.schol-cta__pct-sym {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(3rem, 6vw, 5rem);
background: linear-gradient(130deg, #ffb347, #f78a27);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
margin-top: .4em;
}
@keyframes scholGoldShimmer {
0% { background-position: 0% 50%; }
100% { background-position: 300% 50%; }
}
.schol-cta__head-lg {
font-family: var(--font-display);
font-size: clamp(2.2rem, 4.5vw, 3.5rem);
font-weight: 800;
color: #fff;
letter-spacing: -.02em;
margin-top: -.1em;
}
/* Price */
.schol-cta__price {
display: flex; align-items: baseline; gap: .25rem;
margin-bottom: 1.75rem;
}
.schol-cta__price-val {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700; color: #fff;
}
.schol-cta__price-per { font-size: .95rem; color: rgba(255,255,255,.4); }
/* Inclusions */
.schol-cta__incl { margin-bottom: 1.75rem; }
.schol-cta__incl-lbl {
font-size: .72rem; font-weight: 700;
color: rgba(255,255,255,.4);
text-transform: uppercase; letter-spacing: .1em;
margin-bottom: .75rem;
}
.schol-cta__incl-list {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: 1fr 1fr;
gap: .55rem 1.5rem;
}
.schol-cta__incl-list li {
display: flex; align-items: center; gap: .55rem;
font-size: .95rem; color: rgba(255,255,255,.8); font-weight: 500;
}
.schol-cta__incl-list li::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: #f78a27; flex-shrink: 0;
}
.schol-cta__degrees {
font-size: .8rem; color: rgba(255,255,255,.4);
font-weight: 500; letter-spacing: .04em;
}
/* ── RIGHT: glass card ── */
.schol-cta__right { display: flex; justify-content: flex-end; }
.schol-cta__card {
position: relative; overflow: hidden;
width: 100%; max-width: 440px;
background: rgba(255,255,255,.055);
backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
border: 1px solid rgba(255,255,255,.11);
border-radius: 24px;
padding: clamp(1.75rem, 4vw, 2.5rem);
transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.schol-cta__card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 64px rgba(0,0,0,.4), 0 0 0 1px rgba(247,138,39,.15);
}
/* Top gold border sweep */
.schol-cta__card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(247,138,39,.7) 50%, transparent 100%);
}
.schol-cta__card-glow {
position: absolute; top: -80px; right: -80px;
width: 220px; height: 220px; border-radius: 50%;
background: radial-gradient(circle, rgba(247,138,39,.18) 0%, transparent 70%);
pointer-events: none;
}
.schol-cta__card-eyebrow {
display: flex; align-items: center; gap: .4rem;
font-size: .7rem; font-weight: 700; color: #f78a27;
text-transform: uppercase; letter-spacing: .1em;
margin-bottom: 1rem;
}
.schol-cta__card-title {
font-family: var(--font-display);
font-size: clamp(1.35rem, 2.5vw, 1.7rem);
font-weight: 700; color: #fff;
line-height: 1.25; margin: 0 0 .9rem;
}
.schol-cta__card-title-em {
font-style: normal; color: #f78a27;
}
.schol-cta__card-body {
font-size: .9rem; color: rgba(255,255,255,.6);
line-height: 1.7; margin-bottom: 1.5rem;
}
/* Stats row */
.schol-cta__stats {
display: flex; align-items: center; gap: 0;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
padding: 1rem;
margin-bottom: 1.5rem;
}
.schol-cta__stat { flex: 1; text-align: center; }
.schol-cta__stat-num {
display: block;
font-family: var(--font-display);
font-size: clamp(1.15rem, 2vw, 1.4rem);
font-weight: 800; color: #fff; line-height: 1;
margin-bottom: 3px;
}
.schol-cta__stat-sup { font-size: .65em; color: #f78a27; }
.schol-cta__stat-lbl {
display: block; font-size: .6rem;
color: rgba(255,255,255,.4);
text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.schol-cta__stat-div {
width: 1px; height: 32px; flex-shrink: 0;
background: rgba(255,255,255,.1);
}
/* Apply button */
.schol-cta__btn {
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center; gap: .5rem;
width: 100%;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, #f78a27 0%, #e8700d 100%);
color: #fff; font-weight: 700; font-size: 1rem;
font-family: var(--font-ui);
border-radius: 12px; text-decoration: none;
box-shadow: 0 4px 24px rgba(247,138,39,.4), 0 1px 4px rgba(0,0,0,.3);
transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
margin-bottom: .85rem;
}
.schol-cta__btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 36px rgba(247,138,39,.55), 0 2px 8px rgba(0,0,0,.3);
}
.schol-cta__btn:active { transform: translateY(0); }
.schol-cta__btn-shine {
position: absolute; top: 0; left: -110%; width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
transform: skewX(-18deg);
animation: scholBtnShine 3.5s ease-in-out infinite;
}
@keyframes scholBtnShine {
0%,55% { left: -110%; }
75% { left: 160%; }
100% { left: 160%; }
}
/* Consult link */
.schol-cta__consult {
display: flex; align-items: center; justify-content: center; gap: .3rem;
font-size: .85rem; color: rgba(255,255,255,.45);
text-decoration: none;
transition: color .2s;
margin-bottom: 1.25rem;
}
.schol-cta__consult:hover { color: rgba(255,255,255,.85); }
/* Urgency note */
.schol-cta__note {
display: flex; align-items: center; justify-content: center; gap: .5rem;
font-size: .72rem; color: rgba(255,255,255,.35);
border-top: 1px solid rgba(255,255,255,.07);
padding-top: 1rem; margin: 0;
}
.schol-cta__note-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #22c55e; flex-shrink: 0;
animation: scholDotPulse 2.4s ease-in-out infinite;
}
/* ── Responsive ── */
@media (max-width: 900px) {
.schol-cta__inner { grid-template-columns: 1fr; }
.schol-cta__right { justify-content: center; }
.schol-cta__card { max-width: 100%; }
}
@media (max-width: 640px) {
.schol-cta__pct-num { font-size: clamp(4.5rem, 18vw, 6.5rem); }
.schol-cta__pct-sym { font-size: clamp(2rem, 8vw, 3rem); }
.schol-cta__head-lg { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.schol-cta__card { padding: 1.5rem; }
}
@media (max-width: 480px) {
.schol-cta { padding: 2.5rem 0; }
.schol-cta__pct-num { font-size: clamp(3.5rem, 20vw, 4.5rem); }
.schol-cta__pct-sym { font-size: clamp(1.6rem, 9vw, 2rem); }
.schol-cta__head-sm { font-size: 1rem; }
.schol-cta__head-lg { font-size: clamp(1.4rem, 7vw, 1.8rem); }
.schol-cta__heading { margin-bottom: 1rem; }
.schol-cta__pill { font-size: .65rem; padding: .25rem .75rem; margin-bottom: 1.25rem; }
.schol-cta__price-val { font-size: 1.35rem; }
.schol-cta__incl-list { grid-template-columns: 1fr; }
.schol-cta__card { padding: 1.25rem; border-radius: 16px; }
}