/* ============================================================
ISA Design System — Indian Society of Anaesthesiologists
Colors: Base #EDF7FF | Surface #FFF | Content #0F0F0F | Accent #0049DB
Fonts: Plus Jakarta Sans (display) | Inter (body)
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
/* ── Custom Properties ─────────────────────────────────────── */
:root {
--base: #EDF7FF;
--surface: #FFFFFF;
--content: #0F0F0F;
--accent: #0049DB;
--accent-dark: #0037A8;
--accent-light: #DCE8FF;
--navy: #0A1C6E;
--navy-light: #1630A0;
--gold: #D4960A;
--gold-light: #FFF3D4;
--muted: #5A6478;
--muted-light: #8E97A8;
--border: #D0E4F7;
--border-dark: #A8C4E0;
--success: #10B981;
--error: #EF4444;
--font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
--font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
--space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
--space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
--space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
--radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px;
--radius-xl: 32px; --radius-full: 9999px;
--shadow-sm: 0 1px 3px rgba(0,73,219,.08),0 1px 2px rgba(0,0,0,.04);
--shadow-md: 0 4px 16px rgba(0,73,219,.12),0 2px 6px rgba(0,0,0,.06);
--shadow-lg: 0 12px 40px rgba(0,73,219,.14),0 4px 12px rgba(0,0,0,.06);
--shadow-xl: 0 24px 64px rgba(0,73,219,.16),0 8px 20px rgba(0,0,0,.08);
--ease-out: cubic-bezier(0.16,1,0.3,1);
--ease-spring:cubic-bezier(0.34,1.56,0.64,1);
--duration: 280ms;
}
/* Rotating Border Animation */
@keyframes borderRotate {
0% {
box-shadow:
0 0 0 2px transparent,
inset 0 0 20px rgba(255,255,255,0),
0 0 20px rgba(255,255,255,0.6);
}
25% {
box-shadow:
0 0 0 2px rgba(255,255,255,0.8),
inset 0 0 20px rgba(255,255,255,0.1),
0 0 20px rgba(255,255,255,0.4);
}
50% {
box-shadow:
0 0 0 2px rgba(255,255,255,0.6),
inset 0 0 20px rgba(255,255,255,0.2),
0 0 20px rgba(255,255,255,0.6);
}
75% {
box-shadow:
0 0 0 2px rgba(255,255,255,0.8),
inset 0 0 20px rgba(255,255,255,0.1),
0 0 20px rgba(255,255,255,0.4);
}
100% {
box-shadow:
0 0 0 2px transparent,
inset 0 0 20px rgba(255,255,255,0),
0 0 20px rgba(255,255,255,0.6);
}
}
.hero-card-animated {
/* rotating border glow removed */
}
/* Leadership card "Read More" text link hover */
.ldr-readmore { transition: gap .25s var(--ease-out), color .2s ease; }
.ldr-readmore:hover { gap: 12px !important; color: #0037A8; }
.ldr-readmore svg { transition: transform .25s var(--ease-out); }
.ldr-readmore:hover svg { transform: translateX(3px); }
/* Hero "Upcoming Events" auto-scroll ticker (date tag + 2-line title) */
.hero-evt-ticker {
height: 72px;
overflow: hidden;
position: relative;
margin: 12px 0 10px 11px;
padding: 0 12px;
background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.22) 100%);
border-radius: 8px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.28), inset 0 -1px 0 rgba(255,255,255,0.07);
}
.hero-evt-ticker__list {
display: flex;
flex-direction: column;
animation: heroEvtTicker 14s ease-in-out infinite;
}
.hero-evt-ticker__item {
height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 8px 0;
}
.hero-evt-ticker__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.82rem;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.35);
line-height: 1.25;
white-space: normal;
}
.hero-evt-ticker__tag {
display: inline-flex;
align-self: flex-start;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(255,255,255,.85);
background: rgba(255,255,255,.16);
padding: 1px 7px;
border-radius: 4px;
line-height: 1.5;
flex-shrink: 0;
}
@keyframes heroEvtTicker {
0%, 18% { transform: translateY(0); }
25%, 43% { transform: translateY(-72px); }
50%, 68% { transform: translateY(-144px); }
75%, 93% { transform: translateY(-216px); }
100% { transform: translateY(-288px); }
}
/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;}
body{font-family:var(--font-body);background:var(--base);color:var(--content);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,video{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
input,textarea,select{font-family:var(--font-body);border:none;outline:none;}
/* ── Typography ────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.2;color:var(--content);letter-spacing:-0.02em;}
h1{font-size:clamp(2rem,5vw,3.75rem);font-weight:800;}
h2{font-size:clamp(1.5rem,3.5vw,2.5rem);}
h3{font-size:clamp(1.15rem,2.5vw,1.5rem);}
h4{font-size:1.125rem;}
p{color:var(--muted);line-height:1.7;}
.lead{font-size:1.125rem;line-height:1.75;}
.caption{font-size:0.8rem;color:var(--muted-light);}
.overline{font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#0049DB;}
/* ── Layout ────────────────────────────────────────────────── */
.container{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--space-6);}
.container--wide{max-width:1400px;}
.container--narrow{max-width:760px;}
.section{padding:var(--space-20) 0;}
.section--sm{padding:var(--space-12) 0;}
.section--lg{padding:var(--space-24) 0;}
.grid{display:grid;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);}
.flex{display:flex;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.gap-2{gap:var(--space-2);}.gap-3{gap:var(--space-3);}.gap-4{gap:var(--space-4);}
.gap-6{gap:var(--space-6);}.gap-8{gap:var(--space-8);}
/* ── Section Headers ───────────────────────────────────────── */
.section-header{text-align:center;margin-bottom:var(--space-12);}
.section-header h2{margin-top:var(--space-2);margin-bottom:var(--space-3);}
.section-header p{max-width:560px;margin:0 auto;}
.section.bg-base .section-header h2{color:var(--text-primary) !important;}
.section.bg-base .section-header p{color:var(--text-secondary) !important;}
.section.bg-base .section-header .overline{color:#0049DB !important;}
/* ── Buttons ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:0.75rem 1.75rem;border-radius:var(--radius-full);font-family:var(--font-display);font-size:0.9rem;font-weight:600;transition:all var(--duration) var(--ease-out);white-space:nowrap;}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 16px rgba(0,73,219,.3);}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,73,219,.4);}
/* ── Fancy CTA button ────────────────────────────────────────── */
.btn-fancy {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
background: linear-gradient(115deg, #0037A8 0%, #0049DB 50%, #1E63FF 100%);
color: #fff !important;
border-radius: var(--radius-full);
padding: 0.75rem 2rem;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
box-shadow: 0 8px 28px rgba(0,73,219,.4), 0 4px 16px rgba(0,73,219,.2), 0 2px 8px rgba(0,0,0,.15);
border: none;
cursor: pointer;
text-decoration: none;
transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
position: relative;
overflow: hidden;
width: fit-content;
}
/* Top glow shimmer */
.btn-fancy::before {
content: '';
position: absolute;
inset: 0;
height: 50%;
background: linear-gradient(to bottom, rgba(255,255,255,.16), transparent);
border-radius: var(--radius-full) var(--radius-full) 0 0;
pointer-events: none;
z-index: 0;
}
/* Rotating spotlight border — 2px inset, circular */
.btn-fancy:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,73,219,.45), 0 6px 22px rgba(0,73,219,.28), 0 4px 12px rgba(0,0,0,.18); }
/* Hero CTAs — full orange on the gradient hero */
.hero .btn-fancy {
background: linear-gradient(135deg, #0037A8 0%, #0049DB 100%);
box-shadow: none;
}
.hero .btn-fancy:hover { box-shadow: none; }
.btn-fancy:active { transform: translateY(0); }
.btn-fancy__circle { display: none; }
.btn-outline{border:2px solid var(--accent);color:var(--accent);background:transparent;}
.btn-outline:hover{background:var(--accent);color:#fff;transform:translateY(-2px);}
.btn-ghost{color:var(--accent);padding:0.75rem 1rem;}
.btn-ghost:hover{background:var(--accent-light);border-radius:var(--radius-sm);}
.btn-white{background:#fff;color:var(--accent);box-shadow:0 4px 16px rgba(0,0,0,.15);}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2);}
.btn-gold{background:var(--gold);color:#fff;box-shadow:0 4px 16px rgba(212,150,10,.3);}
.btn-gold:hover{background:#B87D08;transform:translateY(-2px);}
.btn-sm{padding:0.5rem 1.25rem;font-size:0.8rem;}
.btn-lg{padding:1rem 2.25rem;font-size:1rem;}
.btn svg{width:16px;height:16px;}
.btn-lg svg{width:18px;height:18px;}
/* ── Navigation ────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;border-bottom:1px solid transparent;transition:all 0.35s var(--ease-out);}
.nav.scrolled{background:#ffffff;border-bottom-color:var(--border);box-shadow:0 2px 16px rgba(0,0,0,.08);}
/* Floating glassmorphism nav (all pages) */
.nav {
top: 14px; left: 50%; right: auto;
transform: translateX(-50%);
width: calc(100% - 28px);
max-width: 1500px;
border-radius: 20px;
border-bottom: none;
background: rgba(255,255,255,.55);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(255,255,255,.4);
box-shadow: 0 12px 40px rgba(10,28,110,.18);
overflow: visible; /* dropdowns must paint outside the glass shell */
}
.nav.scrolled {
background: rgba(255,255,255,.85);
border-color: rgba(10,28,110,.08);
box-shadow: 0 12px 40px rgba(10,28,110,.14);
}
@media (max-width: 768px) {
.nav { top: 8px; width: calc(100% - 16px); border-radius: 16px; }
.nav__mobile { border-radius: 0 0 16px 16px; }
}
.nav__inner{display:flex;align-items:center;justify-content:center;height:72px;max-width:1500px;margin:0 auto;padding:0 var(--space-8);gap:var(--space-4);}
.nav__right{display:flex;align-items:center;justify-content:flex-end;gap:10px;}
.nav__logo{display:flex;align-items:center;flex-shrink:0;padding:5px 12px;border-radius:10px;transition:background .35s var(--ease-out),box-shadow .35s var(--ease-out);}
.nav__logo img{height:52px;width:auto;}
.nav__logo-text{display:none;}
/* Utility bar (Row 1): logo + quick-action buttons, sitting above the
main nav row on every page. Sitewide (moved here from a page-scoped
override that only existed on index.html originally). */
.isa-topbar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:12px var(--space-8);box-sizing:border-box;border-bottom:1px solid rgba(10,28,110,.12);}
.isa-topbar__logo{display:flex;align-items:center;}
.isa-topbar__logo img{height:66px;width:auto;display:block;transition:height 0.3s ease;}
.nav.scrolled .isa-topbar__logo img{height:42px;}
.isa-topbar__links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.isa-topbar__btn{display:inline-flex;align-items:center;padding:11px 20px;border-radius:999px;background:linear-gradient(135deg, #0049DB 0%, #0095FF 100%);color:#fff !important;font-size:0.76rem;font-weight:700;white-space:nowrap;text-decoration:none;transition:filter .2s ease, transform .2s ease;}
.isa-topbar__btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.isa-topbar__btn-icon{width:20px;height:20px;border-radius:50%;object-fit:cover;background:#fff;margin-right:7px;flex-shrink:0;transition:width .3s ease,height .3s ease;}
.isa-topbar__btn--icon{padding:0;}
.isa-topbar__btn--icon .isa-topbar__btn-icon{width:80px;height:80px;margin-right:0;border:1px solid #0049DB;}
.isa-topbar__btn--icon:hover{filter:brightness(1.08);transform:translateY(-1px) scale(1.04);}
.nav.scrolled .isa-topbar__btn--icon{padding:0;}
.nav.scrolled .isa-topbar__btn--icon .isa-topbar__btn-icon{width:56px;height:56px;}
@media (max-width: 900px){
/* Compact the topbar before ~790px so Join ISA cannot wrap under the badges */
.isa-topbar{padding:10px var(--space-4);flex-wrap:nowrap;row-gap:8px;}
.isa-topbar__links{flex-wrap:nowrap;gap:6px;}
.isa-topbar__logo img{height:38px;}
.nav.scrolled .isa-topbar__logo img{height:26px;}
.isa-topbar__btn{padding:6px 12px;font-size:0.7rem;}
.isa-topbar__btn-icon{width:16px;height:16px;margin-right:5px;}
.isa-topbar__btn--icon{padding:0;}
.isa-topbar__btn--icon .isa-topbar__btn-icon{width:32px;height:32px;margin-right:0;}
.nav.scrolled .isa-topbar__btn--icon{padding:0;}
.nav.scrolled .isa-topbar__btn--icon .isa-topbar__btn-icon{width:24px;height:24px;}
}
.nav__links{display:flex;align-items:center;justify-content:center;gap:2px;}
.nav__links a{display:inline-flex;align-items:center;gap:6px;font-size:0.86rem;font-weight:700;color:var(--navy);padding:6px 12px;border-radius:var(--radius-sm);transition:all var(--duration) var(--ease-out);position:relative;white-space:nowrap;}
.nav__link-icon{width:15px;height:15px;flex-shrink:0;}
.nav__links a:hover,.nav__links a.active{color:var(--accent);background:var(--accent-light);}
.nav__links a.active:not(.nav__dropdown-toggle)::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:16px;height:2px;background:var(--accent);border-radius:var(--radius-full);}
/* ── Nav Dropdown ───────────────────────────────────────────── */
.nav__dropdown { position: relative; }
/* invisible strip bridging the visible gap below, so the hover chain survives moving the cursor from the nav item down into the menu */
.nav__dropdown::after {
content: '';
position: absolute;
left: 0; right: 0;
top: 100%;
height: 10px;
}
.nav__dropdown-toggle { cursor: pointer; gap: 4px; }
.nav__dropdown-toggle.active { color: #0049DB !important; background: #EEF4FF !important; display: flex; align-items: center; }
.nav__dropdown-toggle::after {
content: '';
display: inline-block;
width: 7px; height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-left: 6px;
margin-top: -4px;
vertical-align: middle;
opacity: 0.4;
}
.nav__dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 10px);
/* Left-align under the trigger so menus stay inside the floating nav /
viewport (centered menus were clipped by html/body overflow-x). */
left: 0;
right: auto;
transform: none;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 8px 32px rgba(0,0,0,.12);
min-width: 240px;
max-width: min(320px, calc(100vw - 40px));
z-index: 200;
overflow: hidden;
padding: 6px;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu { display: block; }
/* Right-edge items (Events, More): open leftward so they aren't cropped */
.nav__links > .nav__dropdown:nth-last-of-type(2) .nav__dropdown-menu,
.nav__links > .nav__dropdown:last-child .nav__dropdown-menu {
left: auto;
right: 0;
transform: none;
}
.nav__dropdown-menu a {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 10px 14px;
font-size: 0.82rem;
font-weight: 500;
color: var(--navy);
border-radius: var(--radius-md);
white-space: nowrap;
transition: background var(--duration) var(--ease-out), color var(--duration);
text-decoration: none;
background: transparent;
}
.nav__dropdown-menu a:hover { background: #EEF4FF !important; color: #0049DB !important; }
.nav__dropdown-menu a.active { color: #0049DB !important; background: #EEF4FF !important; font-weight: 700; }
.nav__dropdown-menu a svg { width: 16px; height: 16px; flex-shrink: 0; color: #0049DB; opacity: 0.7; }
/* ── Mega menu (grouped columns) ───────────────────────────── */
.nav__dropdown-menu--mega {
min-width: auto;
width: max-content;
max-width: min(720px, calc(100vw - 48px));
padding: 10px 16px 12px;
}
.nav__mega { display: grid; grid-auto-flow: column; gap: 0 20px; }
.nav__mega-col { min-width: 200px; }
.nav__mega-col + .nav__mega-col { border-left: 1px solid var(--border); padding-left: 20px; }
.nav__mega-col h6 {
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #8A94A6;
margin: 0 0 2px;
padding: 4px 12px 2px;
}
.nav__dropdown-menu--mega a { padding: 7px 12px; }
.nav__mega-divider {
border: none;
border-top: 1px solid var(--border);
margin: 10px 12px 8px;
}
.nav__mobile .nav__mega-divider { display: none; }
.nav__links > .nav__dropdown:first-child .nav__dropdown-menu--mega { left: 0; transform: none; }
.nav__mobile .nav__mega { display: block; }
.nav__mobile .nav__mega-col + .nav__mega-col { border-left: none; padding-left: 0; }
/* ── Mobile submenu accordion (tap to expand, no :hover on touch) ── */
.nav__mobile .nav__dropdown-toggle::after { transition: transform var(--duration) var(--ease-out); }
.nav__mobile .nav__dropdown.open .nav__dropdown-toggle::after { transform: rotate(225deg); }
.nav__mobile .nav__dropdown-menu {
display: none !important;
position: static !important;
transform: none !important;
background: transparent;
border: none;
box-shadow: none;
min-width: 0;
width: 100%;
max-width: 100%;
padding: 0 0 0 var(--space-5);
margin-top: 4px;
}
.nav__mobile .nav__dropdown.open .nav__dropdown-menu { display: block !important; }
.nav__mobile .nav__dropdown-menu a { padding: 8px 10px; border-radius: 0; }
.nav__mobile .nav__mega-col h6 { padding: 4px 10px 2px; }
a.nav-login{display:inline-flex;align-items:center;justify-content:center;min-width:120px;background:transparent;border:1.5px solid #0049DB;border-radius:var(--radius-full);padding:10px 18px;color:#0049DB;font-size:0.82rem;font-weight:600;transition:all var(--duration) var(--ease-out);white-space:nowrap;}
a.nav-login:hover{background:#EEF4FF;border-color:#0037A8;color:#0037A8;}
a.nav-join{display:inline-flex;align-items:center;justify-content:center;min-width:120px;background:#0049DB;border:1.5px solid #0049DB;border-radius:var(--radius-full);padding:10px 18px;color:#fff;font-size:0.82rem;font-weight:700;transition:all var(--duration) var(--ease-out);white-space:nowrap;box-shadow:0 4px 14px rgba(0,73,219,.25);}
a.nav-join:hover{background:#0037A8;border-color:#0037A8;color:#fff;transform:translateY(-1px);}
.nav__cta{display:none;}
.nav__hamburger{
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
width:36px;
height:36px;
padding:0;
grid-column:3;
background:rgba(255,255,255,.82);
border:1px solid rgba(255,255,255,.95);
border-radius:4px;
box-shadow:0 1px 4px rgba(10,28,110,.08);
cursor:pointer;
}
.nav__hamburger span{width:16px;height:2px;background:var(--navy);border-radius:var(--radius-full);transition:all var(--duration) var(--ease-out);}
.nav__hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav__hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav__hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.nav__mobile{
display:none;
flex-direction:column;
background:#fff;
padding:var(--space-4) var(--space-6) var(--space-6);
border-top:1px solid var(--border);
/* Match floating .nav corners so the solid panel does not square them off */
border-radius:0 0 20px 20px;
max-height:70vh;
max-height:min(70vh, calc(100dvh - 120px));
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
}
.nav__mobile.open{display:flex;}
/* Clip the open drawer to the glass nav shell (desktop mega menus stay unclipped) */
.nav:has(.nav__mobile.open){overflow:hidden;}
.nav__mobile a{display:flex;align-items:center;gap:8px;color:var(--navy);font-size:0.95rem;font-weight:500;padding:var(--space-3) 0;border-bottom:1px solid var(--border);transition:color var(--duration) var(--ease-out);}
.nav__mobile a:hover{color:var(--accent);}
.nav__mobile .btn{margin-top:var(--space-4);text-align:center;justify-content:center;}
/* Quick links match other mobile menu rows (not pill CTAs) */
.nav__mobile .nav-quick{
display:flex;
width:100%;
justify-content:flex-start;
align-items:center;
gap:8px;
padding:var(--space-3) 0;
margin:0;
background:transparent;
border:none;
border-bottom:1px solid var(--border);
border-radius:0;
font-size:0.95rem;
font-weight:500;
color:var(--navy);
text-decoration:none;
}
.nav__mobile .nav-quick:hover{color:var(--accent);background:transparent;}
.nav__mobile .nav-login,
.nav__mobile .nav-join {
display: flex; width: 100%; justify-content: center;
padding: 12px 18px; font-size: 0.9rem;
min-width: 0;
border-bottom: none;
border-radius: var(--radius-full);
font-weight: 700;
text-decoration: none;
}
.nav__mobile .nav-login {
margin-top: var(--space-4);
border: 1.5px solid #0049DB;
color: #0049DB;
background: transparent;
}
.nav__mobile .nav-login:hover {
background: #EEF4FF;
border-color: #0037A8;
color: #0037A8;
}
.nav__mobile .nav-join {
margin-top: var(--space-3);
border: 1.5px solid #0049DB;
background: #0049DB;
color: #fff;
}
.nav__mobile .nav-join:hover {
background: #0037A8;
border-color: #0037A8;
color: #fff;
}
/* ── Hero — Light theme with background ─────────────────────── */
.hero {
position: relative;
min-height: calc(100vh - 58px); /* leaves room for the running-text bar in the first viewport */
display: flex;
flex-direction: column;
overflow: visible;
padding-top: 0; /* hero background extends behind the fixed navbar */
background:
radial-gradient(ellipse 45% 40% at 0% 0%, rgba(0,176,83,.10) 0%, transparent 55%),
linear-gradient(125deg, #0057B8 0%, #3D6BC4 45%, #1E63FF 100%);
}
/* Background image carousel */
.hero__bg-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
filter: brightness(0.58);
opacity: 0;
transition: opacity 1.2s ease;
z-index: 0;
}
.hero__bg-slide--active { opacity: 1; }
/* Hero 2-slide horizontal carousel */
.hero__carousel { position: relative; z-index: 1; flex: 1; overflow: hidden; display: flex; }
.hero__track { display: flex; width: 200%; flex-shrink: 0; transition: transform .7s cubic-bezier(.7, 0, .3, 1); }
.hero__slide { position: relative; width: 50%; flex-shrink: 0; display: flex; }
.hero__slide-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center top; background-repeat: no-repeat;
filter: brightness(0.58); z-index: 0;
}
.hero__slide-bg--gradient {
background: radial-gradient(ellipse 40% 35% at 82% 12%, rgba(255,255,255,.06) 0%, transparent 60%);
filter: none;
}
.hero__slide-bg--gradient + .hero__bg-overlay { display: none; } /* dark overlay not needed on the gradient hero */
/* ── Hero centered redesign (white background) ──────────────── */
.hero__layout--center { justify-content: center; }
.hero-x { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.hero-x__badge {
display: inline-flex; align-items: center; gap: 9px;
font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: #fff;
border: none; background: rgba(255,255,255,.10);
padding: 9px 20px; border-radius: 999px;
margin-bottom: var(--space-8);
}
.hero-x__badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #00E676; box-shadow: 0 0 8px rgba(0,230,118,.8); }
.hero .hero-x__title { color: #fff; max-width: 980px; margin-bottom: var(--space-2); }
.hero-x__grad {
background: linear-gradient(90deg, #fff 0%, #fff 28%, #ffe9cc 38%, #FFB020 50%, #ffe9cc 62%, #fff 72%, #fff 100%);
background-size: 260% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent;
animation: heroTitleShine 4.5s linear infinite;
}
@keyframes heroTitleShine {
0% { background-position: 200% 0; }
100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-x__grad { animation: none; background: none; color: #fff; }
}
.hero-x__sub {
color: rgba(255,255,255,.9); max-width: 620px;
margin: var(--space-2) auto 0; font-size: 1.02rem; line-height: 1.75; font-weight: 600;
}
.hero-x__cta {
display: flex;
gap: var(--space-4);
margin-top: var(--space-8);
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.hero-x__cta .btn-fancy,
.hero-x__cta .hero-btn-ghost {
padding: 0.75rem 2rem;
font-size: 1rem;
font-weight: 700;
font-family: var(--font-display);
line-height: 1.25;
min-height: 48px;
box-sizing: border-box;
}
.hero-x__stats {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: clamp(18px, 4vw, 52px);
margin-top: var(--space-12); padding: 20px 40px;
border: 1px solid var(--border); background: #fff;
box-shadow: 0 10px 36px rgba(10,28,110,.08);
border-radius: 18px;
}
.hero-x__stat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hero-x__num { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.hero-x__lbl { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.hero-x__divider { width: 1px; height: 38px; background: var(--border); }
/* info cards row below CTAs (the "floating" cards, now inline) */
.hero-x__cards { display: flex; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; }
.hero-info-card {
width: 300px; max-width: 100%;
background: rgba(255,255,255,.85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,.5); border-radius: 14px;
padding: 14px 18px;
box-shadow: none;
text-decoration: none;
color: inherit;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
a.hero-info-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(10,28,110,.12);
background: rgba(255,255,255,.95);
}
.hero-info-card__head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(10,28,110,.15); }
.hero-info-card__head > svg { width: 15px; height: 15px; color: #0049DB; flex-shrink: 0; }
.hero-info-card__label { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap; }
.hero-info-card__arrow {
margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
background: #EEF4FF; color: #0049DB !important;
display: inline-flex; align-items: center; justify-content: center;
transition: background .2s ease, color .2s ease, transform .2s ease;
flex-shrink: 0;
}
.hero-info-card__arrow svg { width: 13px; height: 13px; }
a.hero-info-card:hover .hero-info-card__arrow,
.hero-info-card__arrow:hover { background: #0049DB; color: #fff !important; transform: translateX(2px); }
.hero-info-card .hero-evt-ticker { margin: 10px 0 0; padding: 0 10px; background: rgba(255,255,255,.35); border: none; box-shadow: none; }
.hero-info-card .hero-evt-ticker__title { color: var(--navy); text-shadow: none; font-weight: 600; }
.hero-info-card .hero-evt-ticker__tag { color: #0049DB; background: rgba(0,73,219,.1); }
/* split variant: text left, media right */
.hero-x--split { flex-direction: row; align-items: center; text-align: left; gap: var(--space-8); }
@media (max-width: 1080px) {
.hero-x--split { align-items: flex-start; }
}
.hero-x--split .hero-x__content { flex: 6; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hero-x--split .hero-x__title { font-size: clamp(2rem, 3.6vw, 3.4rem); }
.hero-x--split .hero-x__sub { margin-left: 0; }
.hero-x--split .hero-x__cta { justify-content: flex-start; }
.hero-x--split .hero-x__stats { justify-content: flex-start; padding: 18px 28px; gap: clamp(16px, 2.5vw, 42px); }
.hero-x__media { flex: 6; min-width: 0; }
.hero-x__media-box {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
min-height: 420px; border-radius: 20px;
border: 2px dashed rgba(0,73,219,.3); background: rgba(0,73,219,.04);
color: #8A94A6; font-size: 0.85rem; font-weight: 600;
}
.hero-x__media-box svg { width: 44px; height: 44px; color: rgba(0,73,219,.35); }
.hero-x__media-box--photo {
border: 1px solid rgba(255,255,255,.5); background: none; overflow: hidden;
box-shadow: none;
aspect-ratio: 4 / 5; /* portrait */
min-height: 0;
width: 100%;
max-height: min(520px, calc(100vh - 280px)); /* scale down on short viewports so content isn't clipped */
margin: 0 0 0 auto;
box-sizing: border-box;
}
.hero-x__media-box--photo img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 0% 45%;
display: block;
animation: heroKenBurnsPan 6s ease-in-out infinite alternate;
will-change: object-position;
backface-visibility: hidden;
}
/* subtle horizontal pan across the landscape image (no scaling, no empty space) */
@keyframes heroKenBurnsPan {
from { object-position: 0% 45%; }
to { object-position: 100% 45%; }
}
@media (prefers-reduced-motion: reduce) {
.hero-x__media-box--photo img { animation: none; object-position: 50% 45%; }
}
/* Stack split hero only on tablet/phone — keep side-by-side through ~desktop widths */
@media (max-width: 1024px) {
.hero-x--split { flex-direction: column; }
.hero-x--split .hero-x__content { order: 1; }
.hero-x__media { width: 100%; order: 2; display: block; }
.hero-x__media-box { min-height: 240px; }
/* Full-bleed width under the copy — avoid the skinny centered portrait look */
.hero-x__media-box--photo {
margin: 0;
max-width: none;
width: 100%;
aspect-ratio: 16 / 10;
max-height: min(420px, 48vh);
}
.hero-x__media-box--photo img {
object-position: 50% 40%;
animation: none; /* pan reads poorly on the wide stacked crop */
}
}
@media (max-width: 640px) {
.hero-x__media-box--photo {
aspect-ratio: 4 / 3;
max-height: min(320px, 42vh);
}
}
@media (max-width: 768px) {
.hero-x__divider { display: none; }
.hero-x__stats { gap: 22px 30px; padding: 18px 22px; }
.hero-x__num { font-size: 1.3rem; }
/* Events / News cards: use full content width (no leftover side gaps) */
.hero-x--split .hero-x__content { align-items: stretch; width: 100%; }
.hero-x__cards {
width: 100%;
flex-direction: column;
flex-wrap: nowrap;
gap: var(--space-3);
}
.hero-info-card { width: 100%; max-width: none; }
/* CTA buttons: full width, stacked, center-aligned */
.hero-x__cta,
.hero-x--split .hero-x__cta {
width: 100%;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: var(--space-3);
}
.hero-x__cta .btn-fancy,
.hero-x__cta .btn {
width: 100%;
justify-content: center;
text-align: center;
white-space: normal;
padding: 0.75rem 2rem;
font-size: 1rem;
font-weight: 700;
min-height: 48px;
}
}
/* ── Hero Stage: two full-screen slides, auto-playing horizontal transition ───
Use min-height (not fixed height) so tall side-by-side content is never
clipped by overflow:hidden. Stage still prefers one viewport minus the
running-text bar; it only grows when content needs more room. */
.hero-stage {
position: relative;
min-height: calc(100vh - 58px);
height: auto;
}
.hero-stage__pin {
position: relative;
min-height: inherit;
height: auto;
overflow-x: hidden; /* required for horizontal slide transition */
overflow-y: visible;
}
.hero-stage__track {
display: flex;
width: 200%;
min-height: calc(100vh - 58px);
height: auto;
align-items: stretch;
transition: transform .85s cubic-bezier(.65, 0, .35, 1);
will-change: transform;
}
.hero-stage__track.is-slide2 { transform: translateX(-50%); }
.hero-stage__slide {
width: 50%;
flex-shrink: 0;
min-height: inherit;
height: auto;
display: flex;
flex-direction: column;
}
.hero-stage__slide > .hero {
flex: 1;
width: 100%;
}
@media (prefers-reduced-motion: reduce) {
.hero-stage__track { transition: none; }
}
/* Stacked (tablet/phone): drop the forced viewport min-height so the
column layout can size naturally without empty space or clipping. */
@media (max-width: 1024px) {
.hero-stage { min-height: 0; }
.hero-stage__track { min-height: 0; }
.hero { min-height: 0; }
.hero__carousel { flex: none; overflow-x: hidden; overflow-y: visible; }
.hero__track { height: auto; }
.hero__slide { height: auto; }
}
/* Short laptop viewports: tighten vertical rhythm so the split hero
prefers to fit without growing past the first screen. */
@media (max-height: 900px) and (min-width: 1025px) {
.hero__layout {
padding-top: calc(72px + var(--space-8));
padding-bottom: var(--space-12);
}
.hero-x--split { gap: var(--space-6); }
.hero-x__cta { margin-top: var(--space-5); }
.hero-x__cards { margin-top: var(--space-5); }
.hero-x__media-box--photo { max-height: min(440px, calc(100vh - 260px)); }
.hero-stage__nav { bottom: 14px; }
}
/* Hero-stage bottom controls: prev arrow · scroll-down cue · next arrow, all centred */
.hero-stage__nav {
position: absolute;
left: 50%; bottom: 22px;
transform: translateX(-50%);
z-index: 30;
display: flex;
align-items: center;
gap: var(--space-3);
}
.hero-stage__nav-btn {
width: 42px; height: 42px;
border-radius: 50%;
background: rgba(255,255,255,.55);
border: 1px solid rgba(10,28,110,.12);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
color: var(--navy);
cursor: pointer;
box-shadow: 0 8px 24px rgba(10,28,110,.1);
transition: background .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.hero-stage__nav-btn svg { width: 18px; height: 18px; }
.hero-stage__nav-btn:hover { background: #fff; box-shadow: 0 10px 30px rgba(10,28,110,.16); transform: translateY(-2px); }
.hero-stage__nav-btn:active { transform: translateY(0); }
/* Hero 2 event meta (date / venue) — same slot as Hero 1's info cards */
.hero-x__event-meta {
display: flex; align-items: center; gap: var(--space-6);
margin-top: var(--space-8);
padding: var(--space-4) var(--space-6);
background: rgba(255,255,255,.85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,.5);
border-radius: 16px; box-shadow: none;
width: fit-content; max-width: 100%;
}
.hero-x__event-meta-item { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.hero-x__event-meta-icon {
width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
background: rgba(0,73,219,.08); color: #0049DB;
display: flex; align-items: center; justify-content: center;
}
.hero-x__event-meta-icon svg { width: 18px; height: 18px; }
.hero-x__event-meta-text { display: flex; flex-direction: column; min-width: 0; }
.hero-x__event-meta-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.hero-x__event-meta-value { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--navy); margin-top: 2px; white-space: nowrap; }
.hero-x__event-meta-divider { width: 1px; height: 34px; background: var(--border); flex-shrink: 0; }
@media (max-width: 640px) {
.hero-x__event-meta { flex-direction: column; align-items: flex-start; gap: var(--space-3); width: 100%; }
.hero-x__event-meta-divider { display: none; }
}
.hero__slide .hero__bg-overlay { z-index: 0; }
.hero__slide .hero__layout { position: relative; z-index: 2; }
/* Hero carousel navigation */
.hero__nav { position: absolute; left: 50%; transform: translateX(-50%); bottom: var(--space-6); display: flex; align-items: center; gap: 14px; z-index: 40; }
.hero__dots { display: flex; gap: 8px; }
.hero__dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; transition: all .3s ease; }
.hero__dot--active { width: 28px; border-radius: 5px; background: #fff; }
.hero__nav-arrow { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.hero__nav-arrow:hover { background: rgba(255,255,255,.28); }
/* Hero event slide extras */
.hero__event-badge { align-self: flex-start; display: inline-block; background: #0049DB; color: #fff; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; box-shadow: 0 2px 12px rgba(0,73,219,0.45); }
.hero__event-meta { display: flex; gap: 22px; margin: 22px 0 28px; flex-wrap: wrap; }
.hero__event-meta-item { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 0.95rem; font-weight: 600; }
.hero__event-meta-item svg { width: 18px; height: 18px; stroke: #0049DB; flex-shrink: 0; }
.hero__bg-overlay {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse 45% 40% at 92% 12%, rgba(0,176,83,.14) 0%, transparent 60%),
linear-gradient(90deg, rgba(2,12,56,.86) 0%, rgba(0,33,150,.66) 30%, rgba(10,28,110,.4) 55%, rgba(10,28,110,.22) 75%, rgba(0,49,219,.36) 100%);
pointer-events: none;
}
/* Decorative glowing blobs */
.hero__blob1,
.hero__blob2 {
position: absolute;
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
z-index: 0;
animation: blobFloat 8s ease-in-out infinite;
}
.hero__blob1 {
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(0,170,255,.35) 0%, transparent 70%);
top: -80px; left: -80px;
}
.hero__blob2 {
width: 350px; height: 350px;
background: radial-gradient(circle, rgba(0,73,219,.3) 0%, transparent 70%);
bottom: 60px; right: -60px;
animation-delay: -4s;
animation-duration: 10s;
}
/* Small twinkling sparkle accents scattered across the gradient hero */
.hero__sparkle {
position: absolute;
color: rgba(255,255,255,.55);
pointer-events: none;
z-index: 0;
animation: heroSparkleTwinkle 3.2s ease-in-out infinite;
}
.hero__sparkle svg { display: block; width: 100%; height: 100%; }
.hero__sparkle--1 { top: 14%; left: 6%; width: 14px; height: 14px; animation-delay: 0s; }
.hero__sparkle--2 { top: 62%; left: 46%; width: 10px; height: 10px; animation-delay: 1.1s; color: rgba(255,181,64,.6); }
.hero__sparkle--3 { top: 24%; left: 44%; width: 18px; height: 18px; animation-delay: 2s; }
@keyframes heroSparkleTwinkle {
0%, 100% { opacity: .25; transform: scale(.85); }
50% { opacity: .9; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.hero__sparkle { animation: none; opacity: .5; }
}
@keyframes blobFloat {
0%,100% { transform: translate(0,0) scale(1); }
33% { transform: translate(20px,-15px) scale(1.05); }
66% { transform: translate(-15px,10px) scale(0.96); }
}
/* Subtle film-grain noise texture over the gradient hero */
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.5;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100px 100px;
}
/* Floating stat badges */
.hero-float {
position: absolute;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255,255,255,.72);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(0,73,219,.15);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-5);
box-shadow: 0 8px 32px rgba(0,73,219,.1);
pointer-events: none;
opacity: 0;
animation: floatIn .6s var(--ease-out) forwards, floatBob 6s ease-in-out infinite;
}
@keyframes floatIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes floatBob {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.hero-float__num {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 800;
color: var(--accent);
line-height: 1;
}
.hero-float__label {
font-size: 0.7rem;
color: var(--muted);
font-weight: 500;
margin-top: 3px;
white-space: nowrap;
}
/* Positions */
.hero-float--1 { top: 22%; left: 5%; animation-delay: .8s, .8s; animation-duration: .6s, 7s; }
.hero-float--2 { top: 18%; right: 6%; animation-delay: 1s, 1s; animation-duration: .6s, 8s; }
.hero-float--3 { top: 52%; left: 3%; animation-delay: 1.2s, 1.2s; animation-duration: .6s, 6.5s; }
.hero-float--4 { top: 48%; right: 4%; animation-delay: 1.4s, 1.4s; animation-duration: .6s, 7.5s; }
/* ── Hero two-column layout ──────────────────────────────────── */
.hero__layout {
position: relative;
z-index: 2;
display: flex;
align-items: center;
max-width: 1500px; /* matches .nav__inner */
margin: 0 auto;
padding: calc(72px + var(--space-16)) var(--space-8) var(--space-20) var(--space-8); /* clears the fixed navbar; side padding matches .nav__inner */
width: 100%;
flex: 1;
}
.hero__left {
display: flex;
flex-direction: column;
gap: 0;
max-width: 760px;
width: 100%;
padding-top: 80px;
}
.hero__left .hero__actions { margin-top: 0; }
/* Hero Labels Image */
.hero__labels {
position: absolute;
bottom: 0px;
right: -260px;
width: 660px;
height: auto;
z-index: 3;
opacity: 0.95;
animation: heroFadeUp .7s var(--ease-out) .6s both;
}
/* Mini features */
/* Statistics Grid Container */
.hero__features {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 32px;
margin-top: var(--space-10);
margin-bottom: var(--space-8);
padding: 0;
width: 100%;
}
.hero__feature {
flex: 0 1 auto;
}
/* Individual Statistic Item */
.hero__feature {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
padding: 0;
position: static;
}
/* Icon Container - Fixed Size */
.hero__feature-icon {
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
max-width: 50px;
max-height: 50px;
flex: 0 0 50px;
background: linear-gradient(135deg, rgba(0,73,219,.3) 0%, rgba(0,73,219,.1) 100%);
border: 1.5px solid rgba(0,73,219,.6);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
flex-grow: 0;
color: var(--accent);
}
.hero__feature-icon svg { width: 24px; height: 24px; }
/* Content Container - Flexible */
.hero__feature > div {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.hero__feature-title {
font-size: 0.95rem;
font-weight: 700;
color: #fff;
white-space: nowrap;
margin: 0;
line-height: 1.2;
}
.hero__feature-sub {
font-size: 0.8rem;
color: rgba(255,255,255,.75);
margin: 0;
white-space: nowrap;
line-height: 1.2;
}
/* Remove pseudo-element overlap */
.hero__feature:not(:last-child)::after {
display: none;
}
/* Right mosaic */
.hero__right { position: relative; overflow: visible; }
.hero__mosaic {
display: flex;
flex-direction: column;
gap: 12px;
height: 580px;
}
.hero__mosaic-cell {
border-radius: var(--radius-xl);
overflow: hidden;
position: relative;
background: #E8ECF4;
border: 1px solid var(--border);
}
.hero__mosaic-cell img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform .4s var(--ease-out);
}
.hero__mosaic-cell:hover img { transform: scale(1.04); }
/* Top merged cell */
.hero__mosaic-cell--top { flex: 1.4; }
/* Bottom row */
.hero__mosaic-bottom {
display: flex;
gap: 12px;
flex: 1;
}
.hero__mosaic-cell--bl { flex: 1; }
.hero__mosaic-cell--br { flex: 1.2; }
/* Badge on TL */
.hero__mosaic-badge {
position: absolute;
bottom: var(--space-3); left: var(--space-3);
background: #fff;
border-radius: var(--radius-full);
padding: 6px 12px;
display: flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
font-weight: 600;
color: var(--navy);
box-shadow: var(--shadow-md);
}
/* Info card on TR */
.hero__mosaic-info {
position: absolute;
bottom: var(--space-3); right: var(--space-3);
background: #fff;
border-radius: var(--radius-md);
padding: 8px 12px;
display: flex;
align-items: center;
gap: 8px;
box-shadow: var(--shadow-md);
min-width: 180px;
}
.hero__mosaic-info-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--accent-light);
color: var(--accent);
font-size: 0.65rem;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.hero__mosaic-info-name { font-size: 0.72rem; font-weight: 700; color: var(--navy); }
.hero__mosaic-info-sub { font-size: 0.62rem; color: var(--muted-light); }
/* Accent card BR */
.hero__mosaic-cell--br { background: #DCE8FF; border-color: rgba(0,73,219,.2); }
/* ECG continuous scroll */
.hero__ecg {
width: 100%;
overflow: hidden;
height: 56px;
margin: var(--space-3) 0;
}
.hero__ecg-scroll {
width: 200%;
animation: ecgScroll 6s linear infinite;
}
.hero__ecg-svg {
width: 100%;
height: 56px;
display: block;
}
.hero__ecg-line {
fill: none;
stroke: var(--accent);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
@keyframes ecgScroll {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
.hero__mosaic-accent {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
}
.hero__mosaic-accent p {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 800;
color: var(--navy);
line-height: 1.3;
margin: 0;
}
.hero__mosaic-accent-arrow {
align-self: flex-end;
width: 32px; height: 32px;
background: var(--accent);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff;
font-size: 1rem;
font-weight: 700;
}
/* Old top block (now replaced) */
.hero__top {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-16) var(--space-6) 0;
position: relative;
z-index: 1;
}
/* Social proof bar */
.hero__social-proof {
display: inline-flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
animation: heroFadeUp .6s var(--ease-out) .1s both;
}
.hero__avatars {
display: flex;
align-items: center;
}
.hero__avatar {
width: 40px; height: 40px;
border-radius: 50%;
border: 2.5px solid #fff;
background: var(--accent-light);
display: flex; align-items: center; justify-content: center;
color: var(--accent);
margin-left: -12px;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.hero__avatar:first-child { margin-left: 0; }
.hero__avatar img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
}
.hero__social-proof-text {
display: flex;
flex-direction: column;
gap: 1px;
}
.hero__social-proof-num {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 800;
color: #fff;
line-height: 1;
}
.hero__social-proof-label {
font-size: 0.72rem;
color: rgba(255,255,255,.72);
font-weight: 500;
}
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes gradientShift {
0% { background-position: 100% 50%; }
100% { background-position: -100% 50%; }
}
.hero h1 {
color: #fff;
font-size: clamp(2.4rem, 5vw, 4.5rem);
letter-spacing: -0.04em;
line-height: 1.08;
margin-bottom: var(--space-5);
animation: heroFadeUp .7s var(--ease-out) .25s both;
}
.hero h1 .highlight {
background: linear-gradient(90deg, #0049DB, #4D8FFF, #00B053, #4D8FFF, #0049DB);
background-size: 250% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: heroFadeUp .7s var(--ease-out) .25s both, gradientShift 5s ease infinite;
}
.hero__desc {
color: #fff;
font-size: 1.1rem;
font-weight: 500;
line-height: 1.7;
margin-bottom: 0;
animation: heroFadeUp .7s var(--ease-out) .4s both;
}
/* Inline stats row */
.hero-inline-stats {
display: flex;
align-items: center;
gap: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-full);
overflow: hidden;
margin-bottom: var(--space-8);
box-shadow: var(--shadow-sm);
animation: heroFadeUp .7s var(--ease-out) .52s both;
}
.hero-inline-stat {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
}
.hero-inline-stat__num {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 800;
color: var(--accent);
line-height: 1;
}
.hero-inline-stat__label {
font-size: 0.75rem;
color: var(--muted);
font-weight: 500;
}
.hero-inline-divider {
width: 1px;
height: 28px;
background: var(--border);
flex-shrink: 0;
}
.hero__actions {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
justify-content: flex-start;
margin-top: var(--space-8);
padding-top: var(--space-8);
animation: heroFadeUp .7s var(--ease-out) .55s both;
}
.hero__actions .btn { padding: 0.85rem 2rem; font-size: 0.95rem; }
.hero-btn-ghost {
background: transparent;
border: 1.5px solid rgba(255,255,255,.45);
color: #fff;
border-radius: var(--radius-full);
}
.hero-btn-ghost:hover {
background: rgba(255,255,255,.12);
border-color: #fff;
color: #fff;
transform: translateY(-2px);
}
/* Staggered image strip — inside container */
.hero__strip {
display: flex;
align-items: flex-end;
gap: var(--space-3);
padding: 0 var(--space-6) var(--space-16);
max-width: 1320px;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 2;
animation: heroFadeUp .9s var(--ease-out) .7s both;
}
.hero__strip-img {
overflow: hidden;
border-radius: var(--radius-lg);
flex: 1;
box-shadow: var(--shadow-lg);
transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
min-width: 0;
}
.hero__strip-img:hover { transform: translateY(-6px); }
.hero__strip-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.hero__strip-img--a { height: 260px; }
.hero__strip-img--c { height: 320px; flex: 1.3; }
.hero__strip-img--e { height: 280px; }
/* ── Hero Ticker ─────────────────────────────────────────────── */
.hero-ticker {
position: absolute;
bottom: 0; left: 0; right: 0;
z-index: 6;
display: flex;
align-items: center;
background: var(--navy);
border-top: 1px solid rgba(255,255,255,.08);
overflow: hidden;
}
.hero-ticker__track-wrap { width: 100%; overflow: hidden; }
.hero-ticker__track {
display: flex;
align-items: center;
gap: var(--space-5);
animation: ticker 28s linear infinite;
white-space: nowrap;
padding: 10px var(--space-4);
}
.hero-ticker__track:hover { animation-play-state: paused; }
.hero-ticker__item {
font-size: 0.78rem;
font-weight: 500;
color: rgba(255,255,255,.85);
cursor: pointer;
white-space: nowrap;
transition: color var(--duration);
}
.hero-ticker__item:hover { color: #fff; }
.hero-ticker__sep { color: var(--accent); font-size: 0.45rem; flex-shrink: 0; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ── Stats Section ─────────────────────────────────────────── */
.stats-section {
background: var(--surface);
padding: var(--space-12) 0;
border-bottom: 1px solid var(--border);
}
.stats-section__inner {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
align-items: center;
}
.stats-section__stat { text-align: center; padding: var(--space-4) var(--space-6); }
.stats-section__num {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 800;
color: var(--accent);
line-height: 1;
margin-bottom: var(--space-2);
}
.stats-section__label { font-size: 0.82rem; color: var(--muted); font-weight: 500; letter-spacing: 0.04em; }
.stats-section__divider { width: 1px; height: 52px; background: var(--border); }
.hero-glass-stats { display: none; }
/* ── College of ISA — Leadership ────────────────────────────── */
/* Senior 4 — horizontal profile cards */
.leader-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.leader-profile {
background: var(--navy);
border-radius: var(--radius-xl);
padding: var(--space-5) var(--space-6);
display: flex;
align-items: flex-start;
gap: var(--space-4);
transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
position: relative;
overflow: hidden;
}
.leader-profile::after {
content: '';
position: absolute;
right: -30px; bottom: -30px;
width: 90px; height: 90px;
background: rgba(255,255,255,.04);
border-radius: 50%;
pointer-events: none;
}
.leader-profile:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(10,28,110,.3); }
.leader-profile__avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,.1);
border: 1.5px solid rgba(255,255,255,.18);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.leader-profile__avatar svg { width: 22px; height: 22px; color: rgba(255,255,255,.65); }
.leader-profile__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.leader-profile__role {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
}
.leader-profile__name {
font-family: var(--font-display);
font-size: 0.82rem;
font-weight: 700;
color: #fff;
line-height: 1.35;
word-break: break-word;
hyphens: auto;
}
.leader-profile__contact {
display: flex;
flex-direction: column;
gap: 1px;
margin-top: 4px;
}
.leader-profile__contact span {
font-size: 0.68rem;
color: rgba(255,255,255,.45);
}
/* Deans — compact accent-bordered list */
.dean-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
.dean-item {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--space-4) var(--space-5);
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: var(--space-1) var(--space-4);
align-items: center;
transition: all var(--duration) var(--ease-out);
}
.dean-item:hover { box-shadow: var(--shadow-sm); border-left-color: var(--navy); }
.dean-item__role {
font-size: 0.7rem;
font-weight: 700;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.06em;
grid-column: 1;
}
.dean-item__name {
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 700;
color: var(--navy);
grid-column: 1;
word-break: break-word;
}
.dean-item__contact {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
grid-column: 2;
grid-row: 1 / 3;
}
.dean-item__contact span {
font-size: 0.7rem;
color: var(--muted-light);
white-space: nowrap;
}
@media(max-width:1024px) { .leader-row { grid-template-columns: repeat(2,1fr); } }
@media(max-width:768px) {
.leader-row { grid-template-columns: 1fr; }
.dean-list { grid-template-columns: 1fr; }
.dean-item { grid-template-columns: 1fr; }
.dean-item__contact { align-items: flex-start; grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
}
/* ── What We Offer — 3-col reference layout ─────────────────── */
.wwo-grid {
display: grid;
grid-template-columns: 1fr 1.6fr 1fr;
gap: var(--space-4);
align-items: stretch;
}
.wwo-col {
display: flex;
flex-direction: column;
gap: var(--space-4);
height: 100%;
}
/* ── What We Offer — Feature Cards ─────────────────────────── */
.wwo-feat-card {
background: #fff;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
border-left: 4px solid #0049DB;
padding: var(--space-5) var(--space-6);
display: flex;
align-items: flex-start;
gap: var(--space-4);
transition: box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.wwo-feat-card:hover { box-shadow: var(--shadow-md); transform: translateX(3px); }
.wwo-feat-card--green { border-left-color: #00B053; }
.wwo-feat-card--orange { border-left-color: #0037A8; }
.wwo-feat-card__icon {
flex-shrink: 0;
width: 28px; height: 28px;
color: #0049DB;
margin-top: 2px;
}
.wwo-feat-card--green .wwo-feat-card__icon { color: #00B053; }
.wwo-feat-card--orange .wwo-feat-card__icon { color: #0037A8; }
.wwo-feat-card__icon svg { width: 100%; height: 100%; }
.wwo-feat-card__body { display: flex; flex-direction: column; gap: 4px; }
.wwo-feat-card__title { font-size: 0.95rem; font-weight: 700; color: var(--navy); line-height: 1.3; margin: 0; }
.wwo-feat-card__desc { font-size: 0.8rem; color: var(--muted); line-height: 1.65; margin: 0; }
.wwo-small-card { flex: 1; }
/* Center col fills height */
.wwo-col--center { justify-content: space-between; }
.wwo-center-visual { flex: 1.2; }
.wwo-center-content { flex: 1; }
/* Small cards (left & right cols) */
.wwo-small-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-4);
transition: box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.wwo-small-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.wwo-small-card__visual {
background: var(--base);
border-radius: var(--radius-lg);
padding: var(--space-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: 80px;
}
.wwo-small-card__icon-wrap {
width: 52px; height: 52px;
background: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
display: flex; align-items: center; justify-content: center;
color: var(--navy);
}
.wwo-small-card__icon-wrap svg { width: 26px; height: 26px; }
.wwo-small-card__badge {
font-size: 0.65rem;
font-weight: 700;
color: #0049DB;
background: #fff;
border: 1px solid #C7D9FF;
padding: 4px 10px;
border-radius: var(--radius-full);
letter-spacing: 0.08em;
box-shadow: 0 1px 4px rgba(0,73,219,.08);
}
/* Color variants — badge */
.wwo-badge--green { color: #00B053; border-color: #A8E6C4; box-shadow: 0 1px 4px rgba(0,176,83,.1); }
.wwo-badge--orange { color: #0037A8; border-color: #C7D9FF; box-shadow: 0 1px 4px rgba(0,73,219,.1); }
/* Color variants — icon */
.wwo-icon--green { background: rgba(0,176,83,.10) !important; color: #00B053 !important; border-color: #00B053 !important; }
.wwo-icon--orange { background: rgba(0,55,168,.10) !important; color: #0037A8 !important; border-color: #0049DB !important; }
/* Color variants — card box */
.wwo-small-card--green { border-color: #A8E6C4; }
.wwo-small-card--green:hover { box-shadow: 0 8px 32px rgba(0,176,83,.15); }
.wwo-small-card--orange { border-color: #C7D9FF; }
.wwo-small-card--orange:hover { box-shadow: 0 8px 32px rgba(0,73,219,.15); }
.wwo-small-card--blue { border-color: #C7D9FF; }
.wwo-small-card--blue:hover { box-shadow: 0 8px 32px rgba(0,73,219,.12); }
/* Visual strip tint */
.wwo-small-card--green .wwo-small-card__visual { background: rgba(0,176,83,.07); }
.wwo-small-card--orange .wwo-small-card__visual { background: rgba(0,73,219,.08); }
.wwo-small-card--blue .wwo-small-card__visual { background: rgba(0,73,219,.06); }
.wwo-small-card__title { font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
.wwo-small-card__sub { font-size: 0.72rem; color: var(--muted-light); }
/* Center column */
.wwo-center-visual {
background: var(--base);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-8);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-6);
text-align: center;
}
.wwo-stat-display__num {
font-family: var(--font-display);
font-size: 5rem;
font-weight: 900;
color: var(--navy);
line-height: 1;
letter-spacing: -0.04em;
}
.wwo-stat-display__num span { font-size: 2.5rem; color: var(--accent); }
.wwo-stat-display__label { font-size: 0.82rem; color: var(--muted); line-height: 1.5; margin-top: var(--space-2); }
.wwo-stat-row {
display: flex;
gap: var(--space-6);
padding-top: var(--space-5);
border-top: 1px solid var(--border);
width: 100%;
justify-content: center;
}
.wwo-stat-mini { text-align: center; }
.wwo-stat-mini strong { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--navy); }
.wwo-stat-mini span { font-size: 0.65rem; color: var(--muted-light); }
.wwo-center-content {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.wwo-feature h4 { font-size: 0.95rem; font-weight: 700; color: var(--navy); margin-bottom: var(--space-2); }
.wwo-feature p { font-size: 0.8rem; color: var(--muted); line-height: 1.65; }
.wwo-checks {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-4);
border-top: 1px solid var(--border);
}
.wwo-checks span {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 0.78rem;
font-weight: 600;
color: var(--muted);
}
@media(max-width:1024px) { .wwo-grid { grid-template-columns: 1fr 1fr; } .wwo-col--right { display: none; } }
@media(max-width:768px) { .wwo-grid { grid-template-columns: 1fr; } .wwo-col--right { display: flex; } }
/* ── News Magazine Layout ────────────────────────────────────── */
.news-magazine {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
align-items: stretch;
}
/* Featured big card */
.news-mag-feat {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-10);
display: flex;
flex-direction: column;
gap: var(--space-5);
border-left: 4px solid #0049DB;
transition: box-shadow var(--duration) var(--ease-out);
}
.news-mag-feat:hover { box-shadow: var(--shadow-lg); }
.news-mag-feat__tag {
font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; color: #0049DB;
background: #EEF4FF; padding: 4px 12px;
border-radius: var(--radius-full); width: fit-content;
}
.news-mag-feat__title {
font-size: 1.3rem; font-weight: 800; color: var(--navy);
line-height: 1.3; flex: 1;
}
.news-mag-feat__desc { font-size: 0.875rem; color: var(--muted); line-height: 1.8; }
.news-mag-feat__footer {
display: flex; align-items: center; justify-content: space-between;
padding-top: var(--space-5); border-top: 1px solid var(--border);
margin-top: auto;
}
.news-mag-feat__date { font-size: 0.75rem; color: var(--muted-light); font-weight: 500; }
.news-mag-feat__link { font-size: 0.82rem; font-weight: 700; color: #0049DB; text-decoration: none; }
/* Stacked items */
.news-mag-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.news-mag-item {
display: flex;
gap: var(--space-4);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
flex: 1;
transition: all var(--duration) var(--ease-out);
}
.news-mag-item:hover { transform: translateX(4px); box-shadow: var(--shadow-md); border-color: transparent; }
.news-mag-item__accent {
width: 3px; border-radius: 99px;
background: #0049DB; flex-shrink: 0;
}
.news-mag-item__body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.news-mag-item__meta { display: flex; align-items: center; gap: var(--space-3); }
.news-mag-item__tag {
font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
color: #0049DB; background: #EEF4FF; padding: 2px 8px;
border-radius: var(--radius-full); letter-spacing: 0.08em;
}
.news-mag-item__date { font-size: 0.7rem; color: var(--muted-light); }
.news-mag-item__title { font-size: 0.875rem; font-weight: 700; color: var(--navy); line-height: 1.4; flex: 1; }
.news-mag-item__link { font-size: 0.75rem; font-weight: 700; color: var(--accent); text-decoration: none; width: fit-content; }
/* ── Latest Updates image strip ──────────────────────────────── */
.news-img-strip {
margin-top: var(--space-10);
height: 380px;
border-radius: var(--radius-xl);
background-image: url('../images/pic6.webp');
background-size: cover;
background-position: 50% 35%;
background-repeat: no-repeat;
overflow: hidden;
}
/* ── News Equal Grid ─────────────────────────────────────────── */
.news-grid {
display: flex !important;
flex-wrap: nowrap;
gap: var(--space-6);
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 10px;
width: 100%;
}
.news-grid::-webkit-scrollbar {
display: none;
}
.news-card {
flex: 0 0 350px;
min-width: 350px;
opacity: 1;
transition: opacity 0.3s ease;
}
.news-card {
background: linear-gradient(135deg, #FFFFFF 0%, #F8FBFF 100%) !important;
border: 1.5px solid rgba(0, 73, 219, 0.15) !important;
border-radius: 24px;
overflow: visible;
display: flex !important;
flex-direction: column !important;
gap: var(--space-5);
padding: 30px !important;
transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
position: relative;
}
.news-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(0, 73, 219, 0.2), transparent);
pointer-events: none;
border-radius: 24px 24px 0 0;
}
.news-card:hover {
transform: translateY(-6px);
border-color: rgba(0, 73, 219, 0.3);
background: linear-gradient(135deg, #FFFFFF 0%, #EEEFFF 100%);
}
.news-card--blue { }
.news-card--orange { }
.news-card--green { }
.news-card--navy { }
.news-card--blue .news-card__media { background: linear-gradient(135deg, #EAF1FF 0%, #C7D9FF 100%); }
.news-card--orange .news-card__media { background: linear-gradient(135deg, #EAF1FF 0%, #C7D9FF 100%); }
.news-card--green .news-card__media { background: linear-gradient(135deg, #EAF1FF 0%, #C7D9FF 100%); }
.news-card--navy .news-card__media { background: linear-gradient(135deg, #EAF1FF 0%, #C7D9FF 100%); }
.news-card--blue:hover { }
.news-card--orange:hover { }
.news-card--green:hover { }
.news-card--navy:hover { }
.news-card--blue .news-card__link { color: #0049DB; }
.news-card--orange .news-card__link { color: #0049DB; }
.news-card--green .news-card__link { color: #0049DB; }
.news-card--navy .news-card__link { color: #0049DB; }
.news-card__media {
width: 280px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--base) 0%, var(--surface) 100%);
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 16/9;
}
.news-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: 3px;
}
.news-card__media svg { width: 30px; height: 30px; }
.news-card__body {
padding: 0;
display: flex !important;
flex-direction: column !important;
gap: var(--space-3);
flex: 1;
min-width: 0;
}
.news-card__top {
display: flex !important;
flex-direction: row !important;
align-items: center;
gap: 8px;
}
.news-card__top::before { display: none; }
.news-card__date {
font-size: 0.73rem; font-weight: 700; letter-spacing: 0.035em;
padding: 8px 16px; border-radius: 8px;
background: linear-gradient(135deg, #0049DB 0%, #0033A0 100%);
color: #FFFFFF; text-transform: uppercase;
border: none;
display: inline-block;
box-shadow: 0 4px 12px rgba(0, 73, 219, 0.2);
transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}
.news-card:hover .news-card__date {
box-shadow: 0 6px 16px rgba(0, 73, 219, 0.28);
transform: translateY(-2px);
}
.news-card__title {
font-size: 1.15rem; font-weight: 800; color: #0A1C6E; line-height: 1.55; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
letter-spacing: -0.35px;
transition: color 0.3s ease;
}
.news-card:hover .news-card__title {
color: #0049DB;
}
.news-card__desc {
font-size: 0.9rem; color: #5a6b7a; line-height: 1.7; margin: 0; flex: 1;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
letter-spacing: 0.25px;
transition: color 0.3s ease;
}
.news-card:hover .news-card__desc {
color: #3a4b5a;
}
.news-card__link {
display: inline-flex !important; align-items: center; gap: 6px;
font-size: 0.86rem; font-weight: 700; color: #0049DB; text-decoration: none;
margin-top: 8px;
transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
padding: 8px 12px;
position: relative;
border-radius: 6px;
background: rgba(0, 73, 219, 0.05);
}
.news-card__link::after {
content: '';
position: absolute;
bottom: 0;
left: 12px;
width: 0;
height: 2px;
background: #0049DB;
transition: width 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}
.news-card:hover .news-card__link {
color: #0033A0;
background: rgba(0, 73, 219, 0.1);
}
.news-card:hover .news-card__link::after {
width: calc(100% - 24px);
}
.news-card__link svg {
width: 16px; height: 16px; transition: transform 0.3s cubic-bezier(0.23, 1, 0.320, 1);
stroke-width: 2.5;
}
.news-card:hover .news-card__link svg {
transform: translateX(4px);
}
@media(max-width: 720px) {
.news-grid { grid-template-columns: 1fr; }
.news-card { flex-direction: column !important; }
.news-card__media { width: 100%; aspect-ratio: 16/9; border-right: none; border-bottom: 1px solid var(--border); }
}
@media(max-width:1024px) { .news-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px) { .news-grid { grid-template-columns: 1fr; } }
/* News item color variants */
.news-mag-item--blue { border-color: #C7D9FF; }
.news-mag-item--blue:hover { border-color: #0049DB; box-shadow: 0 6px 24px rgba(0,73,219,.12); }
.news-mag-item--blue .news-mag-item__accent { background: #0049DB; }
.news-mag-item--blue .news-mag-item__tag { color: #0049DB; background: #EEF4FF; }
.news-mag-item--blue .news-mag-item__link { color: #0049DB; }
.news-mag-item--orange { border-color: #C7D9FF; }
.news-mag-item--orange:hover { border-color: #0049DB; box-shadow: 0 6px 24px rgba(0,73,219,.15); }
.news-mag-item--orange .news-mag-item__accent { background: #0049DB; }
.news-mag-item--orange .news-mag-item__tag { color: #0037A8; background: #DCE8FF; }
.news-mag-item--orange .news-mag-item__link { color: #0037A8; }
.news-mag-item--green { border-color: #A8E6C4; }
.news-mag-item--green:hover { border-color: #00B053; box-shadow: 0 6px 24px rgba(0,176,83,.15); }
.news-mag-item--green .news-mag-item__accent { background: #0049DB; }
.news-mag-item--green .news-mag-item__tag { color: #00B053; background: #E8F8EF; }
.news-mag-item--green .news-mag-item__link { color: #00B053; }
@media(max-width:1024px) { .news-magazine { grid-template-columns: 1fr; } }
/* ── News Redesign ──────────────────────────────────────────── */
.news-redesign {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
align-items: start;
}
/* Featured card */
.news-feat {
background: var(--navy);
border-radius: var(--radius-xl);
padding: var(--space-10);
display: flex;
flex-direction: column;
gap: var(--space-4);
height: 100%;
position: relative;
overflow: hidden;
}
.news-feat::after {
content: '';
position: absolute;
right: -30px; bottom: -30px;
width: 150px; height: 150px;
background: rgba(255,255,255,.04);
border-radius: 50%;
pointer-events: none;
}
.news-feat__badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
color: var(--accent);
background: rgba(0,73,219,.15);
padding: 4px 12px;
border-radius: var(--radius-full);
width: fit-content;
letter-spacing: 0.06em;
}
.news-feat__title {
font-size: 1.25rem;
font-weight: 700;
color: #fff;
line-height: 1.35;
}
.news-feat__desc {
font-size: 0.875rem;
color: rgba(255,255,255,.62);
line-height: 1.75;
flex: 1;
}
.news-feat__tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
font-weight: 600;
color: rgba(255,255,255,.45);
margin-top: auto;
padding-top: var(--space-5);
border-top: 1px solid rgba(255,255,255,.08);
}
/* List items */
.news-list {
display: flex;
flex-direction: column;
gap: 0;
}
.news-list-item {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-5) 0;
border-bottom: 1px solid var(--border);
transition: background var(--duration);
}
.news-list-item:first-child { border-top: 1px solid var(--border); }
.news-list-item:hover { background: var(--base); padding-left: var(--space-3); border-radius: var(--radius-md); }
.news-list-item__dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
margin-top: 6px;
}
.news-list-item__date { font-size: 0.72rem; color: var(--muted-light); margin-bottom: var(--space-1); }
.news-list-item__title { font-size: 0.9rem; font-weight: 700; color: var(--navy); line-height: 1.4; margin-bottom: var(--space-2); }
.news-list-item__desc { font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
@media(max-width:1024px) { .news-redesign { grid-template-columns: 1fr; } }
/* ── News Grid (old — removed) ──────────────────────────────── */
.news-item {
background: var(--base);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: all var(--duration) var(--ease-out);
cursor: pointer;
}
.news-item:hover {
border-color: var(--accent);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.news-item__icon {
width: 40px; height: 40px;
background: var(--accent-light);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
color: var(--accent);
flex-shrink: 0;
}
.news-item__icon svg { width: 20px; height: 20px; }
.news-item__title {
font-size: 0.875rem;
font-weight: 600;
color: var(--content);
line-height: 1.5;
flex: 1;
}
.news-item__date {
font-size: 0.75rem;
color: var(--muted-light);
font-style: italic;
}
/* ── Bento Grid ─────────────────────────────────────────────── */
.bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(220px, auto);
gap: var(--space-4);
}
.bento-card {
display: flex;
flex-direction: column;
border-radius: var(--radius-xl);
padding: var(--space-8);
position: relative;
overflow: hidden;
gap: var(--space-5);
}
/* Variants */
.bento-card--dark {
background: linear-gradient(135deg, var(--navy) 0%, #1630A0 100%);
color: #fff;
}
.bento-card--gold {
background: linear-gradient(135deg, #0F3460 0%, #1A5276 100%);
color: #fff;
}
.bento-card--light {
background: var(--surface);
border: 1px solid var(--border);
color: var(--content);
}
.bento-card--accent {
background: linear-gradient(135deg, var(--accent) 0%, #1D6FFF 100%);
color: #fff;
}
/* Grid placement */
.bento-card--wide { grid-column: span 2; }
.bento-card--tall { grid-row: span 2; }
/* Inner elements */
.bento-card__icon {
width: 48px; height: 48px;
border-radius: var(--radius-md);
background: rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
margin-bottom: auto;
}
.bento-card--light .bento-card__icon { background: var(--accent-light); color: var(--accent); }
.bento-card__icon svg { width: 22px; height: 22px; }
.bento-card__content { margin-top: var(--space-5); }
.bento-card__tag {
display: inline-flex;
align-items: center;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.28);
color: rgba(255,255,255,.9);
border-radius: var(--radius-full);
padding: 4px 12px;
margin-bottom: var(--space-3);
width: fit-content;
}
.bento-card--light .bento-card__tag {
background: var(--accent-light);
border-color: rgba(0,73,219,.15);
color: var(--accent);
}
.bento-card__title {
font-size: 1.2rem;
font-weight: 700;
color: inherit;
margin-bottom: var(--space-2);
line-height: 1.2;
}
.bento-card--light .bento-card__title { color: var(--navy); }
.bento-card__desc {
font-size: 0.82rem;
line-height: 1.6;
color: rgba(255,255,255,.72);
}
.bento-card--light .bento-card__desc { color: var(--muted); }
.bento-card__badge {
display: inline-flex;
align-items: center;
background: rgba(255,255,255,.15);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
padding: 4px 12px;
color: #fff;
width: fit-content;
margin-top: auto;
}
.bento-card__spacer { flex: 1; }
.bento-card__bottom {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.bento-card__stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.bento-card__stat span {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 800;
color: #fff;
line-height: 1;
}
.bento-card__stat small { font-size: 0.72rem; color: rgba(255,255,255,.6); margin-top: 2px; }
.bento-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.3);
color: #fff;
font-family: var(--font-display);
font-size: 0.82rem;
font-weight: 600;
padding: 0.55rem 1.25rem;
border-radius: var(--radius-full);
transition: background var(--duration) var(--ease-out);
width: fit-content;
text-decoration: none;
}
.bento-card__btn:hover { background: rgba(255,255,255,.3); }
/* Decorative circle */
.bento-card::after {
content: '';
position: absolute;
right: -40px; bottom: -40px;
width: 140px; height: 140px;
border-radius: 50%;
background: rgba(255,255,255,.05);
pointer-events: none;
}
@media(max-width:1024px) {
.bento-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.bento-card--wide { grid-column: span 2; }
.bento-card--tall { grid-row: span 1; }
}
@media(max-width:640px) {
.bento-grid { grid-template-columns: 1fr; }
.bento-card--wide { grid-column: span 1; }
}
/* ── Pillars Section ────────────────────────────────────────── */
.pillar-section {
background: var(--base);
position: relative;
}
.pillar-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle, rgba(0,73,219,.05) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}
.pillar-header {
text-align: center;
margin-bottom: var(--space-12);
position: relative;
z-index: 1;
}
.pillar-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
position: relative;
z-index: 1;
}
.pillar-item {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-8) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.pillar-item:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.pillar-item__icon {
width: 48px; height: 48px;
background: rgba(0,73,219,.08);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
color: #0049DB;
transition: background var(--duration);
}
.pillar-item:hover .pillar-item__icon { background: rgba(0,73,219,.14); }
/* Pillar color variants */
.pillar-item--blue .pillar-item__icon { background: rgba(0,73,219,.08); color: #0049DB; border-color: #C7D9FF; }
.pillar-item--green .pillar-item__icon { background: rgba(0,176,83,.08); color: #00B053; }
.pillar-item--orange .pillar-item__icon { background: rgba(0,73,219,.09); color: #0037A8; }
.pillar-item--blue { border-color: #C7D9FF; }
.pillar-item--green { border-color: #A8E6C4; }
.pillar-item--orange { border-color: #C7D9FF; }
.pillar-item--blue:hover { box-shadow: 0 8px 32px rgba(0,73,219,.12); }
.pillar-item--green:hover { box-shadow: 0 8px 32px rgba(0,176,83,.12); }
.pillar-item--orange:hover { box-shadow: 0 8px 32px rgba(0,73,219,.12); }
.pillar-item__icon svg { width: 22px; height: 22px; }
.pillar-item__title {
font-size: 1rem;
font-weight: 700;
color: var(--navy);
line-height: 1.3;
}
.pillar-item__desc {
font-size: 0.85rem;
color: var(--muted);
line-height: 1.7;
}
@media(max-width:1024px) { .pillar-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:640px) { .pillar-grid { grid-template-columns: 1fr; } }
/* ── Mission & Vision Cards ─────────────────────────────────── */
.mv-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.mv-card {
border-radius: var(--radius-xl);
padding: var(--space-10);
display: flex;
flex-direction: column;
gap: var(--space-5);
position: relative;
overflow: hidden;
}
.mv-card--mission {
background: linear-gradient(160deg, #eef4ff 0%, #fff 70%);
border: 1px solid #C7D9FF;
}
.mv-card--vision {
background: linear-gradient(160deg, #edfff5 0%, #fff 70%);
border: 1px solid #A8E6C4;
}
.mv-card::after {
content: '';
position: absolute;
right: -40px; bottom: -40px;
width: 160px; height: 160px;
border-radius: 50%;
background: rgba(0,73,219,.04);
pointer-events: none;
}
.mv-card--vision::after { background: rgba(0,176,83,.04); }
.mv-card__header {
display: flex;
align-items: center;
gap: var(--space-3);
}
.mv-card__icon {
width: 44px; height: 44px;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.mv-card--mission .mv-card__icon { background: rgba(0,73,219,.1); color: #0049DB; }
.mv-card--vision .mv-card__icon { background: rgba(0,176,83,.1); color: #00B053; }
.mv-card__icon svg { width: 22px; height: 22px; }
.mv-card__label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.mv-card--mission .mv-card__label { color: #0049DB; }
.mv-card--vision .mv-card__label { color: #00B053; }
.mv-card__heading {
font-size: 1.3rem;
font-weight: 700;
line-height: 1.25;
color: var(--navy);
}
.mv-card__text {
font-size: 0.9rem;
line-height: 1.8;
color: var(--muted);
}
.mv-card__pillars {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: auto;
padding-top: var(--space-4);
border-top: 1px solid rgba(0,0,0,.06);
}
.mv-card__pillars span {
font-size: 0.72rem;
font-weight: 600;
padding: 4px 12px;
border-radius: var(--radius-full);
}
.mv-card--mission .mv-card__pillars span { background: #EEF4FF; color: #0049DB; border: 1px solid #C7D9FF; }
.mv-card--vision .mv-card__pillars span { background: #E8F8EF; color: #00B053; border: 1px solid #A8E6C4; }
@media(max-width:768px) { .mv-grid { grid-template-columns: 1fr; } }
/* ── About ISA v2 ────────────────────────────────────────────── */
.isa-about2 {
background: var(--navy);
overflow: hidden;
padding: 0 0 var(--space-16);
}
/* Scrolling marquee */
.isa-about2__marquee {
border-top: 1px solid rgba(255,255,255,.08);
border-bottom: 1px solid rgba(255,255,255,.08);
padding: var(--space-4) 0;
overflow: hidden;
margin-bottom: var(--space-16);
}
.isa-about2__marquee-track {
display: flex;
align-items: center;
gap: var(--space-6);
white-space: nowrap;
animation: runningText 18s linear infinite;
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,.35);
}
.isa-about2__dot { color: var(--accent); font-size: 0.6rem; }
.isa-about2__body {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
/* Top */
.isa-about2__top {
display: flex;
align-items: flex-start;
gap: var(--space-8);
flex-wrap: wrap;
}
.isa-about2__tag {
display: inline-block;
background: var(--accent);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
padding: 6px 14px;
border-radius: var(--radius-full);
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
margin-top: 8px;
flex-shrink: 0;
}
.isa-about2__heading {
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 800;
color: #fff;
line-height: 1.15;
letter-spacing: -0.03em;
flex: 1;
}
.isa-about2__heading em {
font-style: normal;
color: var(--accent);
}
/* Middle */
.isa-about2__mid {
display: flex;
align-items: center;
gap: var(--space-10);
flex-wrap: wrap;
padding: var(--space-8) 0;
border-top: 1px solid rgba(255,255,255,.08);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.isa-about2__desc {
font-size: 0.9rem;
color: rgba(255,255,255,.6);
line-height: 1.75;
max-width: 340px;
flex-shrink: 0;
}
.isa-about2__pills {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
flex: 1;
}
.isa-about2__pill {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
min-width: 90px;
}
.isa-about2__pill strong {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 900;
color: #fff;
line-height: 1;
}
.isa-about2__pill span {
font-size: 0.65rem;
color: rgba(255,255,255,.45);
margin-top: 4px;
text-align: center;
}
.isa-about2__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: 0.875rem;
font-weight: 700;
color: var(--accent);
white-space: nowrap;
transition: gap var(--duration) var(--ease-out);
text-decoration: none;
flex-shrink: 0;
}
.isa-about2__cta:hover { gap: var(--space-4); }
.isa-about2__cta svg { width: 16px; height: 16px; }
/* Bottom strips */
.isa-about2__strips {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-1);
background: rgba(255,255,255,.06);
border-radius: var(--radius-xl);
overflow: hidden;
}
.isa-about2__strip {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-8);
background: rgba(255,255,255,.03);
border-right: 1px solid rgba(255,255,255,.06);
transition: background var(--duration);
}
.isa-about2__strip:last-child { border-right: none; }
.isa-about2__strip:hover { background: rgba(255,255,255,.07); }
.isa-about2__strip-icon {
width: 40px; height: 40px;
background: var(--accent);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
color: #fff;
flex-shrink: 0;
}
.isa-about2__strip-icon svg { width: 20px; height: 20px; }
.isa-about2__strip h5 { font-size: 0.9rem; font-weight: 700; color: #fff; }
.isa-about2__strip p { font-size: 0.8rem; color: rgba(255,255,255,.5); line-height: 1.6; }
@media(max-width:1024px) { .isa-about2__strips { grid-template-columns: 1fr; } .isa-about2__strip { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); } }
@media(max-width:768px) { .isa-about2__mid { flex-direction: column; align-items: flex-start; } }
/* ── About ISA — Full Viewport Split ─────────────────────────── */
.about-vp {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
/* Left: accent gradient panel */
.about-vp__left {
background: linear-gradient(160deg, #EDF7FF 0%, #dbeafe 50%, #e0ecff 100%);
display: flex;
align-items: center;
padding: var(--space-16) var(--space-12) var(--space-16) var(--space-16);
position: relative;
overflow: hidden;
}
.about-vp__left::after {
content: '75';
position: absolute;
right: -20px; bottom: -40px;
font-family: var(--font-display);
font-size: 220px;
font-weight: 900;
color: rgba(0,73,219,.05);
line-height: 1;
pointer-events: none;
user-select: none;
}
.about-vp__left-inner { position: relative; z-index: 1; }
.about-vp__tag {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
background: rgba(0,73,219,.1);
border-radius: var(--radius-full);
padding: 5px 14px;
margin-bottom: var(--space-6);
}
.about-vp__heading {
font-size: clamp(2.5rem, 4.5vw, 4rem);
font-weight: 900;
color: var(--navy);
line-height: 1.05;
letter-spacing: -0.04em;
margin-bottom: var(--space-6);
}
.about-vp__accent { color: var(--accent); }
.about-vp__desc {
font-size: 0.95rem;
color: var(--muted);
line-height: 1.8;
max-width: 380px;
margin-bottom: var(--space-8);
}
.about-vp__btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 700;
color: #fff;
background: var(--navy);
border-radius: var(--radius-full);
padding: 0.7rem 1.6rem;
transition: all var(--duration) var(--ease-out);
text-decoration: none;
}
.about-vp__btn:hover { background: var(--accent); transform: translateY(-2px); }
.about-vp__btn svg { width: 16px; height: 16px; }
/* Right: white panel */
.about-vp__right {
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-10);
padding: var(--space-16) var(--space-16) var(--space-16) var(--space-12);
border-left: 1px solid var(--border);
}
/* Big stat */
.about-vp__big-stat {
display: flex;
align-items: baseline;
gap: var(--space-4);
padding-bottom: var(--space-10);
border-bottom: 1px solid var(--border);
}
.about-vp__big-num {
font-family: var(--font-display);
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 900;
color: var(--navy);
letter-spacing: -0.04em;
line-height: 1;
}
.about-vp__big-label {
font-size: 0.875rem;
color: var(--muted);
line-height: 1.5;
font-weight: 500;
}
/* Feature rows */
.about-vp__features { display: flex; flex-direction: column; gap: var(--space-6); }
.about-vp__feature {
display: flex;
align-items: flex-start;
gap: var(--space-4);
}
.about-vp__feature-icon {
width: 40px; height: 40px;
background: var(--accent-light);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
color: var(--accent);
flex-shrink: 0;
}
.about-vp__feature-icon svg { width: 18px; height: 18px; }
.about-vp__feature h5 { font-size: 0.875rem; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.about-vp__feature p { font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
/* Mini stats */
.about-vp__mini-stats {
display: flex;
gap: var(--space-6);
padding-top: var(--space-8);
border-top: 1px solid var(--border);
}
.about-vp__mini-stats div { display: flex; flex-direction: column; }
.about-vp__mini-stats strong { font-family: var(--font-display); font-size: 1.4rem; font-weight: 900; color: var(--navy); line-height: 1; }
.about-vp__mini-stats span { font-size: 0.7rem; color: var(--muted-light); margin-top: 3px; }
@media(max-width:1024px) { .about-vp { grid-template-columns: 1fr; } .about-vp__left { padding: var(--space-12) var(--space-6); } .about-vp__right { padding: var(--space-12) var(--space-6); border-left: none; border-top: 1px solid var(--border); } }
/* ── Horizontal Timeline ─────────────────────────────────────── */
.isa-htl {
position: relative;
margin-top: var(--space-16);
padding: var(--space-4) 0 var(--space-8);
overflow-x: hidden; /* only clip horizontally */
}
/* Connecting line */
.isa-htl__line {
position: absolute;
top: calc(var(--space-4) + 10px); /* aligns with dot centres */
left: 0; right: 0;
height: 2px;
background: var(--border);
z-index: 0;
}
.isa-htl__scroll {
overflow: visible; /* don't clip dots */
width: 100%;
}
.isa-htl__track {
display: flex;
gap: var(--space-8);
width: max-content;
animation: htlScroll 30s linear infinite;
padding: 4px var(--space-4) 0; /* 4px top so dot shadow shows */
}
.isa-htl__track:hover { animation-play-state: paused; }
@keyframes htlScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.isa-htl__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 180px;
flex-shrink: 0;
position: relative;
z-index: 1;
cursor: default;
}
.isa-htl__dot {
width: 14px; height: 14px;
border-radius: 50%;
background: var(--border);
border: 3px solid #fff;
box-shadow: 0 0 0 2px var(--border);
margin-bottom: var(--space-4);
flex-shrink: 0;
transition: all var(--duration);
}
.isa-htl__dot--active,
.isa-htl__item:hover .isa-htl__dot {
background: #0049DB;
box-shadow: 0 0 0 3px rgba(0,73,219,.25);
border-color: #fff;
}
.isa-htl__year {
font-family: var(--font-display);
font-size: 0.72rem;
font-weight: 800;
color: var(--navy);
letter-spacing: 0.08em;
margin-bottom: var(--space-2);
}
.isa-htl__item--active .isa-htl__year { color: #0049DB; }
.isa-htl__item h5 {
font-size: 0.825rem;
font-weight: 700;
color: var(--navy);
margin-bottom: var(--space-1);
line-height: 1.3;
}
.isa-htl__item p {
font-size: 0.72rem;
color: var(--muted-light);
line-height: 1.5;
}
/* Fade edges */
.isa-htl__fade-l,
.isa-htl__fade-r {
position: absolute;
top: 0; bottom: 0;
width: 80px;
z-index: 2;
pointer-events: none;
}
.isa-htl__fade-l { left: 0; background: linear-gradient(to right, #fff, transparent); }
.isa-htl__fade-r { right: 0; background: linear-gradient(to left, #fff, transparent); }
/* Past Office Bearers row — Presidents, Secretaries & Treasurers by year */
.isa-htl--gc { margin-top: var(--space-6); cursor: pointer; }
.isa-htl--gc:hover .isa-htl__item--active .isa-htl__year,
.isa-htl--gc:hover .isa-htl__role--lead { color: #0037A8 !important; }
.isa-htl--gc .isa-htl__track { animation-duration: 220s; animation-direction: reverse; }
.isa-htl--gc .isa-htl__year { color: #0049DB; font-size: 0.66rem; }
.isa-htl--gc .isa-htl__item { width: 220px; }
.isa-htl__role { font-size: 0.7rem; color: var(--muted-light); line-height: 1.5; }
.isa-htl__item p.isa-htl__role--lead { font-family: var(--font-display); font-size: 0.85rem; font-weight: 800; color: var(--navy) !important; margin-bottom: var(--space-1); line-height: 1.3; }
/* ── About ISA — Clean two-column ───────────────────────────── */
.about-clean { background: #fff; }
.about-clean__wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
}
.about-clean__h2 {
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 800;
color: var(--navy);
line-height: 1.15;
letter-spacing: -0.03em;
margin: var(--space-3) 0 var(--space-5);
}
.about-clean__p { font-size: 0.95rem; color: var(--muted); line-height: 1.8; margin-bottom: var(--space-6); }
.about-clean__checks { display: flex; flex-direction: column; gap: var(--space-3); }
.about-clean__check {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: 0.875rem;
font-weight: 500;
color: var(--content);
}
/* Right card */
.about-clean__card {
background: linear-gradient(135deg, #d0e8ff 0%, #d0f0e8 50%, #d8f0ff 100%);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-10);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
}
.about-clean__logo img { height: 100px; width: auto; }
.about-clean__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
width: 100%;
}
.about-clean__stat {
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: var(--radius-lg);
padding: var(--space-4);
text-align: center;
display: flex;
flex-direction: column;
gap: 4px;
box-shadow: 0 4px 15px rgba(10, 28, 110, 0.06);
}
.about-clean__num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; color: var(--navy); line-height: 1; }
.about-clean__lbl { font-size: 0.7rem; color: var(--muted-light); font-weight: 500; }
@media(max-width:1024px) { .about-clean__wrap { grid-template-columns: 1fr; } }
/* ── About ISA — Editorial Redesign ─────────────────────────── */
.isa-about {
position: relative;
background: #fff;
padding: var(--space-20) 0 0;
overflow: hidden;
}
.isa-about__watermark {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-display);
font-size: clamp(120px, 20vw, 220px);
font-weight: 900;
color: rgba(0,73,219,.04);
letter-spacing: -0.05em;
user-select: none;
white-space: nowrap;
z-index: 0;
line-height: 1;
}
.isa-about__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
align-items: center;
position: relative;
z-index: 1;
padding-bottom: var(--space-12);
}
.isa-about__est { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-6); }
.isa-about__est-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.isa-about__est-year { font-family: var(--font-display); font-size: 3rem; font-weight: 900; color: var(--navy); letter-spacing: -0.04em; line-height: 1; }
.isa-about__heading { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; color: var(--navy); line-height: 1.05; letter-spacing: -0.04em; margin-bottom: var(--space-6); }
.isa-about__accent { color: var(--accent); }
.isa-about__desc { font-size: 0.95rem; color: var(--muted); line-height: 1.8; max-width: 400px; margin-bottom: var(--space-8); }
.isa-about__btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--navy); border-bottom: 2px solid var(--accent); padding-bottom: 4px; transition: gap var(--duration) var(--ease-out), color var(--duration); text-decoration: none; }
.isa-about__btn:hover { gap: var(--space-4); color: var(--accent); }
.isa-about__btn svg { width: 18px; height: 18px; }
.isa-about__right { display: flex; flex-direction: column; gap: 0; }
.isa-about__pillar { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-6) 0; }
.isa-about__pillar-num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 900; color: var(--accent); line-height: 1; min-width: 48px; letter-spacing: -0.04em; }
.isa-about__pillar-body h4 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: var(--space-2); }
.isa-about__pillar-body p { font-size: 0.875rem; color: var(--muted); line-height: 1.7; }
.isa-about__divider { height: 1px; background: var(--border); }
.isa-about__stats { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; background: var(--navy); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-8) var(--space-10); position: relative; z-index: 1; }
.isa-about__stat { text-align: center; }
.isa-about__stat-num { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: #fff; line-height: 1; margin-bottom: var(--space-1); }
.isa-about__stat-label { font-size: 0.72rem; color: rgba(255,255,255,.5); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.isa-about__stat-sep { width: 1px; height: 36px; background: rgba(255,255,255,.12); }
@media(max-width:1024px){ .isa-about__grid { grid-template-columns: 1fr; gap: var(--space-10); } }
@media(max-width:768px){ .isa-about__stats { grid-template-columns: 1fr 1fr; gap: var(--space-4); } .isa-about__stat-sep { display: none; } }
/* ── About Section ──────────────────────────────────────────── */
.about-section { /* background set via bg-base or bg-surface utility */ }
.about-section__header {
text-align: center;
max-width: 720px;
margin: 0 auto var(--space-10);
}
.about-section__title {
margin: var(--space-2) 0 var(--space-4);
}
.about-section__lead {
font-size: 1rem;
line-height: 1.8;
color: var(--muted);
}
/* Stats strip */
.about-section__stats {
display: flex;
align-items: center;
justify-content: center;
background: var(--navy);
border-radius: var(--radius-xl);
padding: var(--space-8) var(--space-6);
margin-bottom: var(--space-12);
gap: 0;
}
.about-section__stat {
flex: 1;
text-align: center;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.about-section__stat-num {
font-family: var(--font-display);
font-size: 2.25rem;
font-weight: 800;
color: #fff;
line-height: 1;
}
.about-section__stat-label {
font-size: 0.78rem;
color: rgba(255,255,255,.55);
font-weight: 500;
letter-spacing: 0.04em;
}
.about-section__stat-div {
width: 1px;
height: 44px;
background: rgba(255,255,255,.15);
}
/* What We Do cards */
.about-section__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-bottom: var(--space-10);
}
.about-card {
background: var(--base);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-8);
transition: all var(--duration) var(--ease-out);
}
.about-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: transparent;
background: var(--surface);
}
.about-card__icon {
width: 52px; height: 52px;
background: var(--accent);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--space-5);
color: #fff;
flex-shrink: 0;
transition: transform var(--duration) var(--ease-spring);
}
.about-card:hover .about-card__icon { transform: scale(1.08) rotate(-4deg); }
.about-card__icon svg { width: 24px; height: 24px; }
.about-card__title {
font-size: 1rem;
font-weight: 700;
color: var(--navy);
margin-bottom: var(--space-3);
}
.about-card__desc {
font-size: 0.875rem;
color: var(--muted);
line-height: 1.75;
}
.about-section__cta { text-align: center; }
@media(max-width:768px) {
.about-section__cards { grid-template-columns: 1fr; }
.about-section__stats { flex-wrap: wrap; gap: var(--space-4); border-radius: var(--radius-lg); }
.about-section__stat-div { display: none; }
}
/* ── ISA Programs ───────────────────────────────────────────── */
/* ── Minimal program rows with thumbnail ── */
.isa-programs-grid { display: flex; flex-direction: column; }
.isa-programs-grid .isa-program-card:last-child { border-bottom: none; }
.isa-program-card {
display: flex; align-items: center; gap: var(--space-6);
padding: var(--space-6) var(--space-4);
border-bottom: 1px solid var(--border);
border-left: 4px solid transparent;
transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.isa-program-card:hover { background: var(--base); transform: translateX(6px); }
.isa-prog-img {
position: relative;
width: 88px; height: 88px; flex-shrink: 0;
border-radius: var(--radius-lg);
background-color: #fff;
background-size: 62%;
background-repeat: no-repeat;
background-position: center center;
border: 1px solid var(--border);
box-shadow: 0 6px 18px rgba(10,28,110,.08);
transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.isa-program-card:hover .isa-prog-img { transform: scale(1.06); }
/* Vertical card layout for programs page */
.programs-grid .isa-programs-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
flex-direction: unset !important;
}
.programs-grid .isa-program-card {
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
border-bottom: none !important;
border-left: none !important;
border: 1px solid #E8EDF5 !important;
border-radius: 0 !important;
overflow: visible !important;
background: #fff !important;
gap: 0 !important;
align-items: stretch !important;
}
.programs-grid .isa-program-card:hover {
background: #fff !important;
transform: translateY(-4px) !important;
box-shadow: var(--shadow-lg) !important;
border-color: #0049DB !important;
}
.programs-grid .isa-prog-img {
width: 100% !important;
height: 160px !important;
flex-shrink: unset !important;
border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
border: none !important;
box-shadow: none !important;
background-size: cover !important;
background-position: center !important;
}
.programs-grid .isa-program-card__body {
padding: var(--space-5) var(--space-4) !important;
gap: var(--space-3) !important;
}
.programs-grid .isa-program-card__name {
margin: 0 !important;
}
.programs-grid .isa-prog-desc {
margin: 0 !important;
color: var(--muted) !important;
}
.programs-grid .isa-program-card__link {
margin-top: auto !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
font-size: 0.875rem !important;
color: #0049DB !important;
}
@media (max-width: 1024px) {
.programs-grid .isa-programs-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 768px) {
.programs-grid .isa-programs-grid {
grid-template-columns: 1fr !important;
}
}
.isa-prog-img__overlay { display: none; }
.isa-program-card__body { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.isa-program-card__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--navy); line-height: 1.3; transition: color var(--duration) var(--ease-out); }
.isa-prog-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.6; max-width: 640px; }
.isa-prog-icon { display: none; }
.isa-program-card__link {
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
font-size: 0.8rem; font-weight: 700; text-decoration: none;
padding: 9px 18px; border-radius: var(--radius-full); border: 1px solid var(--border);
transition: gap var(--duration) var(--ease-out), background var(--duration) var(--ease-out), color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.isa-program-card__link svg { width: 14px; height: 14px; }
.isa-program-card:hover .isa-program-card__link { gap: 9px; }
/* Color themes — left bar, link accent */
.isa-program-card--blue:hover { border-left-color: #0049DB; }
.isa-program-card--orange:hover { border-left-color: #0037A8; }
.isa-program-card--green:hover { border-left-color: #00B053; }
.isa-program-card--navy:hover { border-left-color: var(--navy); }
.isa-program-card--blue:hover .isa-program-card__name { color: #0049DB; }
.isa-program-card--orange:hover .isa-program-card__name { color: #0037A8; }
.isa-program-card--green:hover .isa-program-card__name { color: #00B053; }
.isa-program-card--navy:hover .isa-program-card__name { color: var(--navy); }
.isa-program-card--blue:hover .isa-prog-img { box-shadow: 0 10px 26px rgba(0,73,219,.22); }
.isa-program-card--orange:hover .isa-prog-img { box-shadow: 0 10px 26px rgba(0,55,168,.22); }
.isa-program-card--green:hover .isa-prog-img { box-shadow: 0 10px 26px rgba(0,176,83,.22); }
.isa-program-card--navy:hover .isa-prog-img { box-shadow: 0 10px 26px rgba(10,28,110,.22); }
.isa-program-card--blue .isa-program-card__link { color: #0049DB; }
.isa-program-card--orange .isa-program-card__link { color: #0037A8; }
.isa-program-card--green .isa-program-card__link { color: #00B053; }
.isa-program-card--navy .isa-program-card__link { color: var(--navy); }
.isa-program-card--blue:hover .isa-program-card__link { background: #0049DB; border-color: #0049DB; color: #fff; }
.isa-program-card--orange:hover .isa-program-card__link { background: #0037A8; border-color: #0037A8; color: #fff; }
.isa-program-card--green:hover .isa-program-card__link { background: #00B053; border-color: #00B053; color: #fff; }
.isa-program-card--navy:hover .isa-program-card__link { background: var(--navy); border-color: var(--navy); color: #fff; }
@media(max-width:640px) {
.isa-program-card { flex-wrap: wrap; }
.isa-program-card__link { margin-left: calc(76px + var(--space-5)); }
}
/* ── Running Text Bar ───────────────────────────────────────── */
.running-text-bar {
position: relative;
margin: 0;
background: #050F3C;
border-top: 1px solid rgba(255,255,255,.07);
border-bottom: 1px solid rgba(255,255,255,.07);
padding: 18px 0;
overflow: hidden;
}
@keyframes barGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Left/right fade edges */
.running-text-bar::before,
.running-text-bar::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 100px;
z-index: 2;
pointer-events: none;
}
.running-text-bar::before {
left: 0;
background: linear-gradient(to right, #050F3C 0%, transparent 100%);
}
.running-text-bar::after {
right: 0;
background: linear-gradient(to left, #050F3C 0%, transparent 100%);
}
.running-text__track {
display: flex;
align-items: center;
gap: var(--space-6);
white-space: nowrap;
animation: runningText 40s linear infinite; /* slow scroll */
position: relative;
z-index: 1;
}
.running-text__track:hover { animation-play-state: paused; }
.running-text__item {
font-size: 0.9rem;
font-weight: 600;
color: rgba(255,255,255,.9);
flex-shrink: 0;
cursor: default;
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* spinning 4-point sparkle separator */
.running-text__sep {
width: 13px; height: 13px;
border-radius: 0;
background: linear-gradient(135deg, #0049DB, #4D8FFF);
clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
flex-shrink: 0;
display: inline-block;
animation: sepSpin 7s linear infinite;
}
@keyframes sepSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes runningText {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ── Message Grid (stacked one by one) ──────────────────────── */
.msg-grid {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* ── Leadership Section Background ──────────────────────────── */
.ldr-bg-section {
position: relative;
background:
radial-gradient(ellipse 80% 70% at 0% 0%, rgba(0,73,219,.6) 0%, transparent 60%),
radial-gradient(ellipse 60% 60% at 100% 100%, rgba(0,176,83,.5) 0%, transparent 55%),
radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,73,219,.45) 0%, transparent 65%),
radial-gradient(ellipse 70% 60% at 100% 0%, rgba(0,119,182,.45) 0%, transparent 50%),
linear-gradient(160deg, #dde9ff 0%, #e0fef5 40%, #fff4d9 70%, #dde9ff 100%);
background-size: 220% 220%, 220% 220%, 220% 220%, 220% 220%, 220% 220%;
animation: ldrGradientShift 10s ease infinite;
overflow: visible;
padding: var(--space-16) var(--space-6);
}
@keyframes ldrGradientShift {
0% { background-position: 0% 50%, 100% 50%, 50% 50%, 0% 0%, 0% 50%; }
50% { background-position: 100% 50%, 0% 50%, 50% 50%, 100% 100%, 100% 50%; }
100% { background-position: 0% 50%, 100% 50%, 50% 50%, 0% 0%, 0% 50%; }
}
.ldr-bg-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40L40 0M-10 10L10 -10M30 50L50 30' stroke='rgba(0%2C73%2C219%2C0.03)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L40 40M-10 -10L10 10M30 30L50 50' stroke='rgba(224%2C125%2C16%2C0.03)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='2' fill='rgba(255%2C149%2C32%2C0.55)'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='2.4s' begin='0s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='120' cy='80' r='1.6' fill='rgba(0%2C73%2C219%2C0.5)'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='3.1s' begin='1.1s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='80' cy='140' r='2' fill='rgba(0%2C176%2C83%2C0.45)'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='2.8s' begin='0.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='20' cy='110' r='1.4' fill='rgba(255%2C149%2C32%2C0.4)'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='3.6s' begin='1.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
background-size: 40px 40px, 40px 40px, 220px 220px;
pointer-events: none;
z-index: 0;
}
.ldr-bg-section::after {
content: '';
position: absolute;
width: 500px; height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,55,168,.14) 0%, transparent 65%);
top: -160px; right: -100px;
pointer-events: none;
z-index: 0;
}
/* extra glow blob bottom-left */
.ldr-bg-section > .ldr-blob-bl {
position: absolute;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,176,83,.12) 0%, transparent 65%);
bottom: -120px; left: -80px;
pointer-events: none;
z-index: 0;
}
.ldr-bg-section > * { position: relative; z-index: 1; }
/* ── Leadership Message Cards ────────────────────────────────── */
.lmsg-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.lmsg-card {
background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
border: none;
border-radius: 0;
overflow: visible;
display: flex;
flex-direction: column;
transition: box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
box-shadow: none;
}
.lmsg-card:hover { }
/* Content: message area */
.lmsg-card__content {
padding: var(--space-8);
flex: 1;
display: flex;
flex-direction: column;
}
.lmsg-card__role {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
color: #0049DB;
text-transform: uppercase;
color: #0049DB;
background: #EEF4FF;
border-radius: var(--radius-full);
padding: 4px 12px;
margin-bottom: var(--space-5);
width: fit-content;
}
.lmsg-card__quote {
font-family: Georgia, serif;
font-size: 64px;
line-height: 0.6;
color: var(--accent);
opacity: .3;
margin-bottom: var(--space-4);
user-select: none;
}
.lmsg-card__salute {
font-size: 0.95rem;
font-weight: 700;
color: var(--navy);
margin-bottom: var(--space-4);
line-height: 1.4;
}
.lmsg-card__text {
font-size: 0.875rem;
color: var(--muted);
line-height: 1.85;
margin-bottom: var(--space-3);
}
.lmsg-card__text strong { color: var(--navy); }
.lmsg-card__sign {
font-size: 0.875rem;
font-weight: 700;
color: #00B053;
font-style: italic;
margin-top: auto;
padding-top: var(--space-5);
border-top: 1px solid var(--border);
}
/* Read more button */
.lmsg-card__readmore {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: 0.82rem;
font-weight: 700;
color: var(--accent);
margin: 0 var(--space-8) var(--space-6);
text-decoration: none;
transition: gap var(--duration) var(--ease-out);
}
.lmsg-card__readmore:hover { gap: var(--space-3); }
/* Photo: small contained area at bottom */
.lmsg-card__photo {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
border-top: 1px solid var(--border);
background: linear-gradient(135deg, #d0e8ff 0%, #d0f0e8 50%, #d8f0ff 100%);
}
.lmsg-card__photo img {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
object-position: center top;
flex-shrink: 0;
border: 2px solid var(--border);
}
.lmsg-card__photo-name h4 { font-size: 0.9rem; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.lmsg-card__photo-name p { font-size: 0.72rem; color: var(--muted-light); line-height: 1.4; }
@media(max-width:1024px) { .lmsg-grid { grid-template-columns: 1fr; } }
@media(max-width:768px) { .lmsg-card__photo { min-height: 220px; } }
/* ── President Message Card ─────────────────────────────────── */
.pres-msg-card {
display: grid;
grid-template-columns: 200px 1px 1fr;
gap: var(--space-10);
align-items: start;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-10);
box-shadow: var(--shadow-sm);
}
.pres-msg-card__left {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-4);
}
.pres-msg-card__avatar {
width: 96px; height: 96px;
border-radius: 50%;
background: var(--accent-light);
border: 3px solid var(--border);
display: flex; align-items: center; justify-content: center;
}
.pres-msg-card__avatar svg { width: 46px; height: 46px; color: var(--accent); }
.pres-msg-card__identity {
display: flex;
flex-direction: column;
gap: 3px;
}
.pres-msg-card__identity strong { font-size: 0.95rem; color: var(--content); }
.pres-msg-card__identity span { font-size: 0.75rem; color: var(--muted); }
.pres-msg-card__tag {
display: inline-block;
background: var(--accent-light);
color: var(--accent);
font-size: 0.7rem;
font-weight: 700;
padding: 3px 10px;
border-radius: var(--radius-full);
margin-top: var(--space-2);
}
.pres-msg-card__divider {
width: 1px;
background: var(--border);
align-self: stretch;
}
.pres-msg-card__body { display: flex; flex-direction: column; gap: var(--space-4); }
.pres-msg-card__quote {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
color: var(--navy);
border-left: 3px solid var(--accent);
padding-left: var(--space-4);
margin: 0;
}
.pres-msg-card__text { font-size: 0.925rem; color: var(--muted); line-height: 1.8; }
@media(max-width:768px) {
.pres-msg-card { grid-template-columns: 1fr; }
.pres-msg-card__divider { display: none; }
.pres-msg-card__left { flex-direction: row; text-align: left; }
}
/* ── Announcement Banner ───────────────────────────────────── */
.announcement{background:linear-gradient(135deg,var(--navy) 0%,var(--accent-dark) 100%);padding:var(--space-3) 0;overflow:hidden;}
.announcement__track{display:flex;align-items:center;gap:var(--space-10);white-space:nowrap;animation:marquee 35s linear infinite;}
.announcement__item{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0;}
.announcement__item span{font-size:0.85rem;color:rgba(255,255,255,.9);font-weight:500;}
.announcement__item .new-badge{background:var(--gold);color:#fff;font-size:0.65rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:0.08em;}
.announcement__sep{color:rgba(255,255,255,.3);font-size:1.2rem;}
/* ── About Section ─────────────────────────────────────────── */
.about-visual{position:relative;padding:var(--space-8);}
.about-visual__img{width:100%;border-radius:var(--radius-xl);object-fit:cover;aspect-ratio:4/3;}
.about-visual__badge{position:absolute;bottom:var(--space-4);right:var(--space-4);background:var(--surface);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:var(--space-3);}
.about-visual__badge .num{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--accent);}
.about-visual__badge .label{font-size:0.8rem;color:var(--muted);font-weight:500;}
.about-content{padding:var(--space-8) 0;}
.about-content h2{margin-bottom:var(--space-5);}
.about-content p{margin-bottom:var(--space-4);}
.about-list{display:flex;flex-direction:column;gap:var(--space-3);margin:var(--space-6) 0;}
.about-list__item{display:flex;align-items:flex-start;gap:var(--space-3);font-size:0.9rem;color:var(--muted);}
.about-list__icon{width:20px;height:20px;background:var(--accent-light);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.about-list__icon svg{width:10px;height:10px;color:var(--accent);}
/* ── Timeline ──────────────────────────────────────────────── */
.timeline{position:relative;padding-left:var(--space-10);}
.timeline-item{position:relative;margin-bottom:var(--space-8);opacity:1;transform:none;}
.timeline-item:last-child{margin-bottom:0;}
.timeline-item.visible{opacity:1;transform:none;}
/* Dot */
.timeline-item::before{
content:'';
position:absolute;
left:calc(-1 * var(--space-10) + var(--space-4) - 6px);
top:6px;
width:12px;height:12px;
border-radius:50%;
background:#0049DB;
border:2px solid var(--surface);
box-shadow:0 0 0 3px rgba(0,73,219,.2);
z-index:1;
}
/* Line — runs from this dot to the next dot, not beyond */
.timeline-item::after{
content:'';
position:absolute;
left:calc(-1 * var(--space-10) + var(--space-4) - 1px);
top:18px;
height:calc(100% + var(--space-8) - 6px);
width:2px;
background:linear-gradient(to bottom,#0049DB,#C7D9FF);
}
.timeline-item:last-child::after{display:none;} /* no line after final dot */
.timeline-item__year{font-family:var(--font-display);font-size:0.75rem;font-weight:700;color:#0049DB;letter-spacing:0.08em;margin-bottom:var(--space-1);}
.timeline-item:nth-child(3n+2) .timeline-item__year { color: #0049DB; }
.timeline-item:nth-child(3n+3) .timeline-item__year { color: #0049DB; }
.timeline-item h4{margin-bottom:var(--space-2);}
.timeline-item p{font-size:0.875rem;}
/* ── Membership ────────────────────────────────────────────── */
.membership-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-8);position:relative;transition:all var(--duration) var(--ease-out);}
.membership-card.featured{border-color:var(--accent);background:var(--navy);color:#fff;}
.membership-card.featured p{color:rgba(255,255,255,.7);}
.membership-card.featured h3{color:#fff;}
.membership-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--gold);color:#fff;font-size:0.7rem;font-weight:700;padding:4px 16px;border-radius:var(--radius-full);letter-spacing:0.08em;white-space:nowrap;}
.membership-price{display:flex;align-items:baseline;gap:var(--space-1);margin:var(--space-4) 0;}
.membership-price .amount{font-family:var(--font-display);font-size:2.5rem;font-weight:800;color:var(--accent);}
.membership-card.featured .membership-price .amount{color:var(--gold);}
.membership-price .period{font-size:0.85rem;color:var(--muted);}
.membership-card.featured .membership-price .period{color:rgba(255,255,255,.6);}
.membership-features{display:flex;flex-direction:column;gap:var(--space-3);margin:var(--space-6) 0;}
.membership-feature{display:flex;align-items:center;gap:var(--space-3);font-size:0.875rem;}
.membership-feature svg{width:16px;height:16px;color:var(--success);flex-shrink:0;}
.membership-card.featured .membership-feature{color:rgba(255,255,255,.85);}
/* ── Journal / Publications ─────────────────────────────────── */
.journal-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--accent-dark) 100%);border-radius:var(--radius-xl);padding:var(--space-12) var(--space-10);position:relative;overflow:hidden;}
.journal-hero::before{content:'';position:absolute;right:-60px;bottom:-60px;width:300px;height:300px;background:rgba(255,255,255,.04);border-radius:50%;}
.journal-cover{background:var(--surface);border-radius:var(--radius-lg);padding:var(--space-6);aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow-xl);text-align:center;}
.journal-cover__label{font-size:0.65rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);}
.journal-cover__title{font-family:var(--font-display);font-size:1.1rem;font-weight:800;color:var(--navy);margin:var(--space-2) 0;}
.journal-cover__vol{font-size:0.75rem;color:var(--muted);}
/* ── News Cards ─────────────────────────────────────────────── */
.news-card{display:grid;grid-template-columns:80px 1fr;gap:var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);transition:all var(--duration) var(--ease-out);}
.news-card:hover{transform:translateX(4px);box-shadow:none;border-color:var(--accent);}
.news-card__img{border-radius:var(--radius-md);aspect-ratio:1;object-fit:cover;background:var(--base);display:flex;align-items:center;justify-content:center;align-self:center;}
.news-card__img svg{width:26px;height:26px;color:var(--border-dark);}
.news-card__content{display:flex;flex-direction:column;gap:var(--space-1);justify-content:center;}
.news-card__date{font-size:0.7rem;font-weight:600;color:var(--accent);background:var(--accent-light);padding:2px 8px;border-radius:var(--radius-full);width:fit-content;}
.news-card h4{font-size:1.05rem;line-height:1.4;color:var(--content);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-card p{font-size:0.875rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* ── Leadership ─────────────────────────────────────────────── */
/* Always 4 per row on tablet+ */
.leader-grid { grid-template-columns: repeat(4, 1fr) !important; gap: var(--space-4) !important; }
.leader-card {
text-align: center;
background: linear-gradient(135deg, #FFFFFF 0%, #F8FBFF 100%) !important;
border: 1.5px solid rgba(0, 73, 219, 0.15) !important;
border-radius: 16px !important;
padding: var(--space-5) var(--space-4);
transition: all var(--duration) var(--ease-out);
position: relative;
box-shadow: 0 4px 16px rgba(0, 73, 219, 0.06) !important;
}
.leader-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(0, 73, 219, 0.3), transparent);
border-radius: 16px 16px 0 0;
}
.leader-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(0, 73, 219, 0.15) !important;
border-color: rgba(0, 73, 219, 0.25) !important;
background: linear-gradient(135deg, #FFFFFF 0%, #EEEFFF 100%) !important;
}
.leader-card__avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#EEF4FF 0%,var(--base) 100%);margin:0 auto var(--space-3);display:flex;align-items:center;justify-content:center;border:3px solid #C7D9FF;overflow:hidden;}
.leader-card__avatar svg{width:36px;height:36px;color:#0049DB;}
.leader-card__avatar img{width:100%;height:100%;object-fit:cover;}
.leader-card__name{font-size:1rem;margin-bottom:var(--space-1);}
.leader-card__title{font-size:0.8rem;color:#0049DB;font-weight:600;margin-bottom:var(--space-2);}
.leader-card__org{font-size:0.75rem;color:var(--muted-light);}
/* ── Chapter Grid ───────────────────────────────────────────── */
/* Our Reach Section */
.reach-section {
background: linear-gradient(135deg, #e8f1ff 0%, #e8f5f0 50%, #eff5ff 100%);
position: relative;
}
.chapter-pill{display:flex;align-items:center;gap:var(--space-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);font-size:0.8rem;font-weight:500;color:var(--content);transition:all var(--duration) var(--ease-out);}
.chapter-pill:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px);}
.chapter-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.chapter-pill:hover .dot{background:rgba(255,255,255,.6);}
/* ── India Map ─────────────────────────────────────────────── */
.india-map-wrap {
position: relative;
display: flex;
justify-content: center;
margin-top: var(--space-8);
}
.india-map-svg {
width: 100%;
max-width: 480px;
height: auto;
display: block;
}
.india-outline {
fill: rgba(0,73,219,.05);
stroke: #0049DB;
stroke-width: 1.5;
stroke-linejoin: round;
}
/* State dots */
.sdot circle {
r: 5;
fill: #0049DB;
stroke: #fff;
stroke-width: 2;
cursor: pointer;
transition: r 0.2s ease, fill 0.2s ease, filter 0.2s ease;
}
.sdot:hover circle {
r: 8;
fill: #0049DB;
filter: drop-shadow(0 0 6px rgba(0,73,219,.5));
}
/* Tooltip */
.india-map-tooltip {
position: fixed;
background: var(--navy);
color: #fff;
font-size: 0.78rem;
font-weight: 600;
padding: 6px 14px;
border-radius: var(--radius-full);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
white-space: nowrap;
z-index: 9999;
box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
/* Coming soon — Join ISA / Member Login / Apply actions */
.isa-coming-soon {
cursor: not-allowed;
}
.isa-coming-soon-tip {
position: fixed;
z-index: 10050;
padding: 9px 16px;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.02em;
color: #fff;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
border-radius: 10px;
box-shadow:
0 10px 28px rgba(10, 28, 110, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.1);
pointer-events: none;
opacity: 0;
transform: translateY(6px) scale(0.96);
transition: opacity 0.2s var(--ease-out, ease), transform 0.2s var(--ease-out, ease);
white-space: nowrap;
}
.isa-coming-soon-tip--show {
opacity: 1;
transform: translateY(0) scale(1);
}
.isa-coming-soon-tip::before {
content: "";
position: absolute;
left: 50%;
bottom: -6px;
margin-left: -6px;
border: 6px solid transparent;
border-top-color: var(--navy-light);
}
.isa-coming-soon-tip--below::before {
bottom: auto;
top: -6px;
border-top-color: transparent;
border-bottom-color: var(--navy);
}
@media (prefers-reduced-motion: reduce) {
.isa-coming-soon-tip {
transition: none;
transform: none;
}
.isa-coming-soon-tip--show {
transform: none;
}
}
/* ── Contact Form ───────────────────────────────────────────── */
.form-group{margin-bottom:var(--space-5);}
.form-label{display:block;font-size:0.85rem;font-weight:600;color:var(--content);margin-bottom:var(--space-2);}
.form-input{width:100%;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:0.9rem;color:var(--content);transition:all var(--duration) var(--ease-out);}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,73,219,.1);}
.form-input::placeholder{color:var(--muted-light);}
textarea.form-input{resize:vertical;min-height:140px;}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235A6478' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:20px;cursor:pointer;}
/* ── Page Heroes ────────────────────────────────────────────── */
.page-hero{background:linear-gradient(125deg,#0057B8 0%,#3D6BC4 45%,#1E63FF 100%);padding:calc(170px + 60px) 0 48px;position:relative;overflow:hidden;}
.page-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px;}
.page-hero__inner{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:0 var(--space-6);height:180px;display:flex;flex-direction:column;justify-content:center;text-align:center;align-items:center;overflow:hidden;}
.page-hero h1{color:#fff;margin-bottom:var(--space-4);}
.page-hero p{color:rgba(255,255,255,.72);max-width:560px;margin-bottom:0;}
.breadcrumb{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);font-size:0.75rem;}
.breadcrumb a{color:rgba(255,255,255,.6);}
.breadcrumb a:hover{color:rgba(255,255,255,.9);}
.breadcrumb span{color:rgba(255,255,255,.35);}
.breadcrumb .current{color:rgba(255,255,255,.9);font-weight:500;}
/* ── Tabs ───────────────────────────────────────────────────── */
.tabs{display:flex;gap:var(--space-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);padding:var(--space-1);width:fit-content;}
.tab{padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);font-size:0.875rem;font-weight:600;color:var(--muted);transition:all var(--duration) var(--ease-out);cursor:pointer;}
.tab.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(0,73,219,.3);}
.tab:not(.active):hover{background:var(--base);color:var(--content);}
/* ── Accordion / FAQ ────────────────────────────────────────── */
.faq-item{border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:var(--space-3);overflow:hidden;transition:all var(--duration) var(--ease-out);}
.faq-item.open{border-color:var(--accent);box-shadow:var(--shadow-sm);}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);background:var(--surface);font-family:var(--font-display);font-size:0.925rem;font-weight:600;color:var(--content);text-align:left;transition:background var(--duration);}
.faq-question:hover{background:var(--base);}
.faq-question svg{width:20px;height:20px;color:var(--accent);transition:transform var(--duration) var(--ease-out);flex-shrink:0;}
.faq-item.open .faq-question svg{transform:rotate(180deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out);}
.faq-item.open .faq-answer{max-height:400px;}
.faq-answer__inner{padding:0 var(--space-6) var(--space-5);font-size:0.875rem;color:var(--muted);}
/* ── Member Voices Section Background ───────────────────────── */
.mv-section {
position: relative;
background-attachment: fixed;
background-image: url('../images/doctors.jpeg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
isolation: isolate;
}
.mv-section::before {
content: '';
position: absolute;
inset: 0;
background: rgba(237,247,255,0.90);
z-index: 0;
pointer-events: none;
}
.mv-section > * { position: relative; z-index: 1; }
/* ── Member Voices — Modern Centered Carousel ───────────────── */
.mv-wrap {
max-width: 800px;
margin: 0 auto;
text-align: center;
padding: 0 var(--space-6);
}
.mv-label { margin-bottom: var(--space-12); }
.mv-label h2 { margin-top: var(--space-2); }
.mv-carousel { position: relative; overflow: hidden; }
.mv-track {
display: flex;
transition: transform .55s var(--ease-out);
}
.mv-slide {
min-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 var(--space-4);
}
.mv-qmark {
font-family: Georgia, serif;
font-size: 80px;
line-height: 1;
color: #0049DB;
opacity: .45;
user-select: none;
margin-bottom: 0;
height: 40px;
overflow: hidden;
display: flex;
align-items: flex-start;
}
.mv-quote {
font-size: 1.15rem;
font-style: italic;
color: var(--navy);
line-height: 1.85;
margin-bottom: var(--space-8);
font-weight: 500;
letter-spacing: -0.01em;
}
.mv-author {
display: inline-flex;
align-items: center;
gap: var(--space-3);
background: var(--base);
border: 1px solid var(--border);
border-radius: var(--radius-full);
padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
}
.mv-author__avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #0049DB 0%, #1630A0 100%);
color: #fff;
font-family: var(--font-display);
font-size: 0.8rem;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.mv-author__name { font-size: 0.875rem; font-weight: 700; color: var(--navy); text-align: left; }
.mv-author__role { font-size: 0.72rem; color: var(--muted-light); text-align: left; }
.mv-nav {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-10);
}
.mv-nav__btn {
width: 38px; height: 38px;
border-radius: 50%;
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--navy);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all var(--duration) var(--ease-out);
}
.mv-nav__btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.mv-nav__btn svg { width: 16px; height: 16px; }
.mv-nav__dots { display: flex; gap: var(--space-2); }
.mv-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--border-dark);
border: none;
cursor: pointer;
padding: 0;
transition: all var(--duration) var(--ease-out);
}
.mv-dot.active { background: #0049DB; width: 24px; border-radius: 99px; }
/* ── Testimonials (horizontal cards) ────────────────────────── */
.testimonial-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.testimonial-h {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-8);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-6);
position: relative;
overflow: hidden;
transition: all var(--duration) var(--ease-out);
}
.testimonial-h::before {
content: '\201C';
position: absolute;
top: -8px;
left: var(--space-6);
font-size: 6rem;
font-family: Georgia, serif;
color: var(--accent);
opacity: 0.12;
line-height: 1;
pointer-events: none;
}
.testimonial-h:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--accent);
}
.testimonial-h:hover::before { opacity: 0.2; }
.testimonial-h__text {
font-size: 0.9rem;
color: var(--content);
line-height: 1.8;
margin-top: var(--space-4);
}
.testimonial-h__footer {
display: flex;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-5);
border-top: 1px solid var(--border);
}
.testimonial__avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-light), var(--base));
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-weight: 800;
font-size: 0.85rem;
color: var(--accent);
flex-shrink: 0;
border: 2px solid var(--border);
}
.testimonial__name { font-weight: 700; font-size: 0.875rem; color: var(--content); }
.testimonial__role { font-size: 0.72rem; color: var(--muted-light); margin-top: 1px; }
@media(max-width:768px) { .testimonial-row { grid-template-columns: 1fr; } }
/* ── CTA Sections ───────────────────────────────────────────── */
.cta-section{
background: linear-gradient(270deg, #060E40, #0049DB, #0037A8, #0049DB, #060E40);
background-size: 400% 400%;
animation: ctaGradient 40s ease infinite;
border-radius: var(--radius-xl);
padding: var(--space-16) var(--space-12);
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
inset: 0;
background: url('../images/vecteezy_group-of-mixed-races-professional-surgeons-operating-in_11046279.jpg') center/cover no-repeat;
opacity: 0.22;
border-radius: var(--radius-xl);
pointer-events: none;
z-index: 0;
}
.cta-section > * { position: relative; z-index: 1; }
.cta-section .btn-fancy { background: #fff; color: #0049DB !important; box-shadow: 0 8px 28px rgba(255,255,255,.3), 0 2px 8px rgba(0,0,0,.1); }
.cta-section .btn-fancy:hover { box-shadow: 0 14px 36px rgba(255,255,255,.5), 0 4px 12px rgba(0,0,0,.15); }
@keyframes ctaGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* old cta circle removed — replaced by image ::before above */
.cta-section h2{color:#fff;margin-bottom:var(--space-4);}
.cta-section p{color:rgba(255,255,255,.75);max-width:480px;margin:0 auto var(--space-8);}
.cta-section__actions{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;}
/* ── Cards ─────────────────────────────────────────────────── */
.card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;transition:all var(--duration) var(--ease-out);}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent;}
.card__body{padding:var(--space-6);}
.card__img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.card__tag{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:var(--space-3);}
.card__tag--blue{background:var(--accent-light);color:var(--accent);}
.card__tag--gold{background:var(--gold-light);color:var(--gold);}
.card__tag--navy{background:rgba(10,28,110,.08);color:var(--navy);}
.card__tag--green{background:rgba(16,185,129,.1);color:var(--success);}
.card h3{margin-bottom:var(--space-2);}
.card p{font-size:0.9rem;}
.card__meta{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border);font-size:0.8rem;color:var(--muted-light);}
.card__meta svg{width:14px;height:14px;}
.card__footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
/* ── Feature Cards ─────────────────────────────────────────── */
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-8);transition:all var(--duration) var(--ease-out);position:relative;overflow:hidden;}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#60A5FA);opacity:0;transition:opacity var(--duration) var(--ease-out);}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:transparent;}
.feature-card:hover::before{opacity:1;}
.feature-card__icon{width:56px;height:56px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-5);transition:transform var(--duration) var(--ease-spring);}
.feature-card:hover .feature-card__icon{transform:scale(1.1) rotate(-3deg);}
.feature-card__icon--blue{background:var(--accent-light);color:var(--accent);}
.feature-card__icon--gold{background:var(--gold-light);color:var(--gold);}
.feature-card__icon--navy{background:rgba(10,28,110,.08);color:var(--navy);}
.feature-card__icon--green{background:rgba(16,185,129,.1);color:var(--success);}
.feature-card__icon svg{width:28px;height:28px;}
.feature-card h3{margin-bottom:var(--space-3);}
.feature-card p{font-size:0.9rem;margin-bottom:var(--space-5);}
.feature-card__link{display:inline-flex;align-items:center;gap:var(--space-2);font-size:0.875rem;font-weight:600;color:var(--accent);transition:gap var(--duration) var(--ease-out);}
.feature-card:hover .feature-card__link{gap:var(--space-3);}
/* ── Event Cards ───────────────────────────────────────────── */
.event-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--duration) var(--ease-out);}
.event-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.event-card__header{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);padding:var(--space-6);position:relative;overflow:hidden;}
.event-card__header::after{content:'';position:absolute;right:-20px;top:-20px;width:120px;height:120px;background:rgba(255,255,255,.04);border-radius:50%;}
.event-card__date{display:inline-flex;flex-direction:column;align-items:center;background:var(--gold);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);margin-bottom:var(--space-4);}
.event-card__date-day{font-family:var(--font-display);font-size:1.75rem;font-weight:800;color:#fff;line-height:1;}
.event-card__date-month{font-size:0.7rem;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:0.1em;text-transform:uppercase;}
.event-card__header h3{color:#fff;font-size:1.1rem;margin-bottom:var(--space-2);}
.event-card__header p{color:rgba(255,255,255,.65);font-size:0.85rem;}
.event-card__body{padding:var(--space-5) var(--space-6);}
.event-card__info{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5);}
.event-card__info-item{display:flex;align-items:center;gap:var(--space-2);font-size:0.85rem;color:var(--muted);}
.event-card__info-item svg{width:14px;height:14px;color:var(--accent);flex-shrink:0;}
/* ── Footer ─────────────────────────────────────────────────── */
.footer{
position: relative;
overflow: hidden;
background:
linear-gradient(rgba(0,6,30,.8), rgba(0,6,30,.8)),
radial-gradient(ellipse 45% 40% at 0% 0%, rgba(0,176,83,.10) 0%, transparent 55%),
linear-gradient(125deg, rgba(0,126,255,.85) 0%, rgba(82,141,240,.8) 45%, rgba(0,55,168,.85) 100%);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
border-top: 1px solid rgba(255,255,255,.15);
color:rgba(255,255,255,.85);
padding:var(--space-16) 0 var(--space-8);
}
.footer::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.12;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100px 100px;
}
.footer > .container, .footer__grid, .footer__bottom { position: relative; z-index: 2; }
.footer > .container { max-width: 1500px; padding: 0 var(--space-8); }
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1.3fr;gap:var(--space-10);margin-bottom:var(--space-12);}
.footer__brand{max-width:100%;padding-right:10px;}
.footer__brand img{height:52px;margin-bottom:var(--space-4);background:#fff;border-radius:var(--radius-md);padding:6px 10px;}
.footer__brand p{font-size:0.92rem;line-height:1.7;color:rgba(255,255,255,.85);margin-bottom:var(--space-5);}
.footer__socials{display:flex;gap:var(--space-3);}
.footer__social{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;transition:all var(--duration) var(--ease-out);}
.footer__social:hover{background:var(--accent);transform:translateY(-2px);}
.footer__social svg{width:16px;height:16px;color:rgba(255,255,255,.8);}
.footer__col h5{font-family:var(--font-display);font-size:0.875rem;font-weight:700;color:#fff;margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:1px solid rgba(0,73,219,.35);}
.footer__links{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:var(--space-6);row-gap:var(--space-3);}
.footer__links a{font-size:0.9rem;font-weight:600;color:#fff;transition:color var(--duration);display:flex;align-items:center;gap:var(--space-2);}
.footer__links a:hover{color:#fff;}
.footer__links a::before{content:'→';font-size:0.7rem;opacity:0.45;transition:opacity var(--duration),color var(--duration);}
.footer__links a:hover::before{opacity:1;color:#fff;}
.footer__quicklinks {
border-top: 1px solid rgba(255,255,255,.2);
padding: var(--space-5) 0;
}
.footer__quicklinks-title {
font-family: var(--font-display);
font-size: 0.8rem;
font-weight: 700;
color: #fff;
margin-bottom: var(--space-3);
letter-spacing: 0.05em;
text-align: left;
}
.footer__quicklinks-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: var(--space-2);
}
.footer__quicklinks-list a {
font-size: 0.75rem;
color: rgba(255,255,255,.85);
transition: color var(--duration);
white-space: nowrap;
}
.footer__quicklinks-list a:hover { color: #fff; }
.footer__quicklinks-list span {
color: rgba(255,255,255,.4);
font-size: 0.75rem;
}
.footer__bottom{border-top:1px solid rgba(255,255,255,.2);padding-top:var(--space-6);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);}
.footer__bottom p{font-size:0.9rem;color:rgba(255,255,255,.7);}
.footer__bottom-links{display:flex;gap:var(--space-5);justify-content:center;}
.footer__bottom-links a{font-size:0.8rem;color:rgba(255,255,255,.7);transition:color var(--duration);}
.footer__bottom-links a:hover{color:rgba(255,255,255,.8);}
/* Powered-by Communa lockup (text + SVG; Axiforma via axiforma.css) */
.footer__powered{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:0;
text-decoration:none;
line-height:1;
flex-shrink:0;
}
.footer__powered-label{
display:block;
font-family:var(--font-body);
font-size:0.6875rem;
font-weight:400;
letter-spacing:0.01em;
color:rgba(255,255,255,.55);
white-space:nowrap;
margin-bottom:5px;
}
.footer__powered-brand{
display:inline-flex;
align-items:center;
gap:7px;
}
.footer__powered-mark{
width:20px;
height:20px;
display:block;
flex-shrink:0;
}
.footer__powered-name{
font-family:'Axiforma', var(--font-body), system-ui, sans-serif;
font-size:1.25rem;
font-weight:300;
letter-spacing:-0.015em;
color:#fff;
line-height:1;
white-space:nowrap;
}
.footer__powered:hover .footer__powered-name{opacity:.88;}
@media(max-width:768px){.footer__bottom{grid-template-columns:1fr;text-align:center;}.footer__bottom-links{justify-content:center;}.footer__powered{align-items:center;}}
.footer__contact-item{display:flex;align-items:flex-start;gap:var(--space-3);font-size:0.9rem;font-weight:500;color:rgba(255,255,255,.85);margin-bottom:var(--space-3);}
.footer__contact-item svg{width:14px;height:14px;color:#fff;flex-shrink:0;margin-top:2px;}
.footer__contact-block { display: flex; flex-direction: column; gap: 3px; }
.footer__contact-person { font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: var(--space-1); }
.footer__contact-sub { font-size: 0.85rem; color: rgba(255,255,255,.85); line-height: 1.5; }
/* ── Utilities ──────────────────────────────────────────────── */
.text-accent{color:var(--accent);}.text-gold{color:var(--gold);}.text-navy{color:var(--navy);}.text-muted{color:var(--muted);}.text-white{color:#fff;}
.text-center{text-align:center;}.text-right{text-align:right;}
.bg-base{background:var(--base);}.bg-surface{background:var(--surface);}.bg-navy{background:var(--navy);}.bg-accent{background:var(--accent);}.bg-white{background:#ffffff;}
.rounded{border-radius:var(--radius-md);}.rounded-lg{border-radius:var(--radius-lg);}.rounded-xl{border-radius:var(--radius-xl);}
.shadow-sm{box-shadow:var(--shadow-sm);}.shadow-md{box-shadow:var(--shadow-md);}.shadow-lg{box-shadow:var(--shadow-lg);}
.w-full{width:100%;}
.mt-4{margin-top:var(--space-4);}.mt-6{margin-top:var(--space-6);}.mt-8{margin-top:var(--space-8);}
.mb-4{margin-bottom:var(--space-4);}.mb-6{margin-bottom:var(--space-6);}.mb-8{margin-bottom:var(--space-8);}
.pt-8{padding-top:var(--space-8);}.pb-8{padding-bottom:var(--space-8);}
.divider{height:1px;background:var(--border);margin:var(--space-8) 0;}
.tag{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:0.7rem;font-weight:700;letter-spacing:0.06em;}
/* ── Scroll Animations ──────────────────────────────────────── */
.fade-up{opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.fade-up.visible{opacity:1;transform:translateY(0);}
.fade-in{opacity:0;transition:opacity .6s var(--ease-out);}
.fade-in.visible{opacity:1;}
.slide-left{opacity:0;transform:translateX(-40px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.slide-left.visible{opacity:1;transform:translateX(0);}
.slide-right{opacity:0;transform:translateX(40px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.slide-right.visible{opacity:1;transform:translateX(0);}
.delay-1{transition-delay:.1s;}.delay-2{transition-delay:.2s;}.delay-3{transition-delay:.3s;}
.delay-4{transition-delay:.4s;}.delay-5{transition-delay:.5s;}.delay-6{transition-delay:.6s;}
/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.6;transform:scale(1.3);}}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes shimmer{0%{background-position:-200% center;}100%{background-position:200% center;}}
@keyframes countUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
/* ── Back to Top ────────────────────────────────────────────── */
.back-top{position:fixed;bottom:var(--space-6);right:var(--space-6);width:44px;height:44px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transform:translateY(16px);transition:all var(--duration) var(--ease-out);z-index:900;}
.back-top.visible{opacity:1;pointer-events:all;transform:translateY(0);}
.back-top:hover{background:var(--accent-dark);transform:translateY(-2px);}
.back-top svg{width:20px;height:20px;color:#fff;}
/* ── Leadership Carousel ────────────────────────────────────── */
.lmsg-carousel {
position: relative;
width: 100%;
overflow: hidden;
}
.lmsg-carousel__track {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 28px;
width: 100%;
transform: none !important;
}
.lmsg-carousel__slide {
width: 100%;
min-width: 0;
overflow: visible;
display: grid;
grid-template-columns: 0.6fr 1.4fr;
}
/* The two columns are built with fixed inline padding/font-sizes and no
responsive treatment of their own — below tablet width the 0.6fr/1.4fr
grid squeezes both columns too narrow and the text clips against the
edge of the viewport. Collapse to a single stacked column and rein in
the inline sizing (needs !important to beat the inline styles). */
@media (max-width: 900px) {
.lmsg-carousel__slide { grid-template-columns: 1fr; }
.lmsg-carousel__slide > div { padding: var(--space-6) !important; }
.lmsg-carousel__slide h1 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
/* The photo frame is 70% of its column width inline — fine when that
column was a narrow 0.6fr grid track, huge now that the column is the
full card width in the stacked layout. Cap it to a sensible size. */
.lmsg-carousel__slide > div:first-child > div:first-child {
width: 180px !important;
max-width: 45% !important;
}
.lmsg-carousel__slide > div:last-child { text-align: center !important; }
/* The column is flex-direction:column, so text-align doesn't govern this
link's own cross-axis position — it's a flex item with an explicit
width:fit-content, which keeps it flex-start (left) by default. */
.lmsg-carousel__slide > div:last-child > a { align-self: center !important; }
}
.lmsg-carousel__controls {
display: none;
}
.lmsg-carousel__dots {
display: flex;
gap: 8px;
}
.lmsg-carousel__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(0, 73, 219, 0.2);
border: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}
.lmsg-carousel__dot--active {
background: #0049DB;
width: 28px;
border-radius: 5px;
}
.lmsg-carousel__dot:hover {
background: rgba(0, 73, 219, 0.4);
}
.lmsg-carousel__arrow {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(0, 73, 219, 0.1);
border: 1px solid rgba(0, 73, 219, 0.3);
color: #0049DB;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}
.lmsg-carousel__arrow:hover {
background: rgba(0, 73, 219, 0.2);
border-color: #0049DB;
transform: translateY(-2px);
}
.lmsg-carousel__arrow svg {
width: 20px;
height: 20px;
}
/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:1024px){
.grid-4{grid-template-columns:repeat(2,1fr);}
.leader-grid{grid-template-columns:repeat(4,1fr) !important;}
.footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-8);}
.hero__strip-img--a{height:170px;}
.hero__strip-img--b{height:210px;}
.hero__strip-img--c{height:240px;}
.hero__strip-img--d{height:190px;}
.hero h1{font-size:clamp(2.2rem,5vw,3.5rem);}
}
/* Laptop densify: keep the full desktop nav through 1200px
by tightening top-level labels only — dropdown panels keep their size. */
@media(max-width:1440px){
.nav__inner{padding:0 var(--space-4);gap:var(--space-2);}
.nav__links{gap:0;}
.nav__links > a,
.nav__links > .nav__dropdown > .nav__dropdown-toggle{gap:4px;}
.nav__links > a .nav__link-icon,
.nav__links > .nav__dropdown > .nav__dropdown-toggle .nav__link-icon{width:14px;height:14px;}
.nav__dropdown-toggle::after{margin-left:4px;}
}
@media(max-width:1280px){
.nav__inner{padding:0 10px;}
.nav__links > a,
.nav__links > .nav__dropdown > .nav__dropdown-toggle{
font-size:0.76rem;
padding:6px 7px;
gap:3px;
}
.nav__links > a .nav__link-icon,
.nav__links > .nav__dropdown > .nav__dropdown-toggle .nav__link-icon{width:13px;height:13px;}
.nav__dropdown-toggle::after{margin-left:3px;width:6px;height:6px;}
}
/* Collapse to hamburger at 1200px and below.
Overlay the control on the topbar row (grid) so it stays put when the
drawer opens — top:50% of .nav would jump the close icon down the panel. */
@media(max-width:1200px){
.nav{
display:grid;
grid-template-columns:1fr;
grid-template-rows:auto auto;
}
.isa-topbar{grid-area:1 / 1;}
.nav__links,.nav__right,.nav__cta{display:none;}
.nav__inner{
grid-area:1 / 1;
height:auto;
min-height:0;
padding:0 14px 0 0;
margin:0;
overflow:visible;
display:flex;
align-items:center;
justify-content:flex-end;
pointer-events:none;
z-index:6;
}
.isa-topbar{padding-right:64px;}
.isa-topbar__links{flex-wrap:nowrap;}
.nav__hamburger{
display:flex;
position:relative;
top:auto;
right:auto;
transform:none;
pointer-events:auto;
}
.nav__mobile{grid-row:2;}
}
@media(max-width:768px){
.isa-topbar{padding-right:56px;}
.nav__inner{padding-right:12px;}
.nav__hamburger{
width:32px;
height:32px;
}
.nav__hamburger span{width:14px;}
:root{--space-20:3.5rem;--space-16:3rem;--space-12:2.5rem;}
.grid-2,.grid-3{grid-template-columns:1fr;}
.stats-section__inner{grid-template-columns:1fr 1fr;gap:1rem;}
.stats-section__divider{display:none;}
.footer__grid{grid-template-columns:1fr;}
.cta-section{padding:var(--space-12) var(--space-6);}
.news-card{grid-template-columns:80px 1fr;gap:var(--space-3);}
.section-header{margin-bottom:var(--space-8);}
.journal-hero{padding:var(--space-8) var(--space-6);}
.hero__strip{gap:var(--space-2);}
.hero__strip-img--a{height:200px;}
.hero__strip-img--c{height:240px;}
.hero__strip-img--e{height:210px;}
}
/* Hide circular topbar badges before the full links row collapses */
@media(max-width:520px){
.isa-topbar__btn--icon{display:none;}
}
@media(max-width:480px){
.container{padding:0 var(--space-4);}
.hero__actions{flex-direction:column;align-items:center;}
.cta-section__actions{flex-direction:column;align-items:center;}
.footer__bottom{flex-direction:column;text-align:center;}
.tabs{flex-wrap:wrap;border-radius:var(--radius-lg);}
.hero__strip{display:none;}
/* Single-row topbar: logo + hamburger only; quick links live in the menu */
.isa-topbar{
flex-wrap:nowrap;
padding-right:52px;
}
.isa-topbar__links{display:none;}
.nav__inner{padding-right:10px;}
.nav__hamburger{
width:30px;
height:30px;
}
.nav__hamburger span{width:13px;}
}
/* ── Footer "How To" Modal ─────────────────────────────────── */
.howto-modal-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,.45); z-index: 2000;
align-items: center; justify-content: center;
padding: 20px;
}
.howto-modal-overlay.open { display: flex; }
.howto-modal {
background: #fff; border-radius: 16px;
width: 100%; max-width: 760px;
max-height: 85vh; display: flex; flex-direction: column;
box-shadow: 0 24px 64px rgba(0,0,0,.25);
overflow: hidden;
}
.howto-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 24px; border-bottom: 1px solid #E8EDF5;
background: #fff; flex-shrink: 0;
}
.howto-modal-title { font-size: 1.05rem; font-weight: 700; color: #0A1C6E; }
.howto-modal-close {
width: 32px; height: 32px; border-radius: 50%;
border: none; background: #F3F4F6; cursor: pointer;
font-size: 1rem; color: #6b7280; display: flex;
align-items: center; justify-content: center; flex-shrink: 0;
transition: background 0.2s;
}
.howto-modal-close:hover { background: #E5E7EB; color: #111; }
.howto-modal-body {
overflow-y: auto; flex: 1; padding: var(--space-5);
font-size: 0.88rem; line-height: 1.7; color: #374151;
}
.howto-modal-body h4 {
font-size: 0.95rem; font-weight: 700; color: #0A1C6E;
margin: var(--space-5) 0 var(--space-2);
}
.howto-modal-body h4:first-child { margin-top: 0; }
.howto-modal-body p { margin: 0 0 var(--space-3); }