/* ========================================================================
EdWagon — Design tokens, layout primitives, and section styles
Improved on top of the original Claude Design handoff prototype.
======================================================================== */
:root {
/* Light-theme palette. Token names preserved so existing rules keep working,
but values now describe the light surface instead of dark. */
--ink: #FBF5F6; /* primary page bg (was deep ink) */
--ink-2: #F8ECEE; /* alternate section bg */
--ink-3: #F2DFE3; /* tertiary section bg */
--forest: #3A0610; /* DARK accent kept; used for dark-feature cards on light */
--forest-2: #4d0a1a;
--forest-3: #580f22;
--forest-line:#EEC9D2; /* general subtle border on light surfaces */
--cream: #30060F; /* primary text color on light bg (was light text on dark) */
--cream-2: #471423;
--cream-3: #5c1d2f;
--paper: #FBF4F5; /* literal cream bg for accent surfaces */
--paper-2: #F5E8EA;
--text-on-dark: #FBEEF1; /* light text used on dark feature cards */
--mute-on-dark: #cfa8b2;
--lime: #F00237; /* original lime accent fill */
--lime-soft: #AB0226; /* deeper olive for accent text/icons on light — WCAG AA */
--lime-glow: #F94E6E;
--sage: #7c4a57; /* muted label text — WCAG AA */
--sage-2: #7c4a57; /* muted body text — WCAG AA */
--alert: #B5471F; /* slightly deepened for light-bg contrast */
--muted: #9a707b;
--hair: rgba(58,6,16,0.10);
--hair-strong:rgba(58,6,16,0.18);
--hair-soft: rgba(58,6,16,0.05);
--shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 22px 48px -28px rgba(58,6,16,0.18);
--shadow-lift: 0 30px 60px -30px rgba(58,6,16,0.22), 0 1px 0 rgba(255,255,255,0.6) inset;
--shadow-cream:0 30px 60px -30px rgba(58,6,16,0.14);
--r-sm: 6px;
--r-md: 8px;
--r-lg: 10px;
--r-xl: 14px;
--t-fast: .15s ease;
--t-med: .25s ease;
--t-slow: .45s cubic-bezier(.2,.7,.2,1);
}
/* ---------- Skip link (accessibility) ---------- */
.skip-link {
position: absolute;
left: 16px;
top: -48px;
z-index: 100;
padding: 10px 16px;
background: var(--cream);
color: var(--paper);
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: top var(--t-fast);
}
.skip-link:focus { top: 16px; outline: 2px solid var(--lime-soft); outline-offset: 2px; }
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--ink); color: var(--cream);
font-family: "Inter", system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--lime); color: #FFFFFF; }
/* ---------- Layout primitives ---------- */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 48px; }
.section { position: relative; padding: 120px 0; }
.section-tight { padding: 96px 0; }
@media (max-width: 1100px) {
.wrap { padding: 0 32px; }
.section { padding: 88px 0; }
}
@media (max-width: 700px) {
.wrap { padding: 0 20px; }
.section { padding: 64px 0; }
}
/* ---------- Type ---------- */
.mono {
font-family: "JetBrains Mono", monospace;
font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase;
font-size: 11px; color: var(--sage);
}
.display {
font-family: "Fraunces", serif;
font-weight: 400; letter-spacing: -0.012em; line-height: 1.0;
color: var(--cream-2);
}
.h2 {
font-family: "Fraunces", serif;
font-weight: 400; letter-spacing: -0.012em;
font-size: clamp(36px, 4.4vw, 60px);
line-height: 1.05; margin: 0;
color: var(--cream-2);
}
.lead {
font-size: 17px; line-height: 1.55;
color: var(--sage-2); max-width: 620px;
margin: 18px 0 0;
}
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
color: var(--lime-soft);
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 18px; height: 14px;
background-color: var(--lime-soft);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
display: inline-block;
flex-shrink: 0;
}
.eyebrow.alert { color: var(--alert); }
.eyebrow.alert::before { background-color: var(--alert); }
.eyebrow.dark { color: #3a0610; }
.eyebrow.dark::before { background-color: #3a0610; }
.marker {
width: 22px; height: 17px;
background-color: var(--lime-soft);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
position: absolute;
}
.dot-lime { width: 6px; height: 6px; border-radius: 50%; background: var(--lime-soft); display: inline-block; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
height: 52px; padding: 0 22px; border-radius: 999px;
font-weight: 600; font-size: 15px;
transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
transform: translateX(-110%);
transition: transform .7s ease;
pointer-events: none;
z-index: -1;
}
.btn:hover::before { transform: translateX(110%); }
.btn-primary { background: var(--lime); color: #FFFFFF; }
.btn-primary:hover { background: var(--lime-glow); transform: translateY(-1px); }
.btn-primary::before {
background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%);
}
.btn-ghost { border: 1px solid var(--hair-strong); color: var(--cream); }
.btn-ghost:hover { border-color: var(--lime-soft); color: var(--lime-soft); }
.btn-cream { background: var(--paper); color: #30060F; border: 1px solid var(--hair); }
.btn-cream:hover { background: #fff; }
.btn-dark { background: var(--forest); color: var(--text-on-dark); }
.btn-dark:hover { background: #320c16; }
.btn-arrow {
width: 22px; height: 22px;
display: inline-grid; place-items: center;
border-radius: 50%; background: #FFFFFF; color: var(--lime);
}
.btn-sm { height: 42px; font-size: 14px; padding: 0 18px; }
/* ---------- Pill ---------- */
.pill {
position: absolute;
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 14px;
border-radius: 999px;
border: 1px solid var(--hair-strong);
background: rgba(255,255,255,0.78);
font-size: 13px; color: var(--cream);
backdrop-filter: blur(10px) saturate(140%);
white-space: nowrap;
box-shadow: 0 10px 30px -15px rgba(58,6,16,0.18);
animation: floaty 9s ease-in-out infinite;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime-soft); box-shadow: 0 0 8px rgba(171,2,38,0.45); }
.pill.delay-1 { animation-delay: -1.5s; }
.pill.delay-2 { animation-delay: -3s; }
.pill.delay-3 { animation-delay: -4.5s; }
.pill.delay-4 { animation-delay: -6s; }
.pill.delay-5 { animation-delay: -7.5s; }
.pill.delay-6 { animation-delay: -2.2s; }
@keyframes floaty {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* ---------- Background textures ---------- */
.grain::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
opacity: .35; mix-blend-mode: multiply;
background-image: radial-gradient(rgba(58,6,16,0.05) 1px, transparent 1px);
background-size: 3px 3px;
}
.dotted {
background-image:
linear-gradient(rgba(58,6,16,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.05) 1px, transparent 1px),
radial-gradient(rgba(171,2,38,0.10) 1px, transparent 1px);
background-size: 64px 64px, 64px 64px, 22px 22px;
background-position: 0 0, 0 0, 0 0;
}
.gridlines::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(58,6,16,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.06) 1px, transparent 1px);
background-size: 60px 60px;
}
/* =========================================================
NAV
========================================================= */
.nav { position: relative; z-index: 5; border-bottom: 1px solid var(--hair); }
.nav-inner {
display: flex; align-items: center; justify-content: space-between;
height: 78px;
}
.nav-left {
display: flex; align-items: center; gap: 18px;
}
.nav-courses-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 18px;
background: #FFFFFF;
border: 1px solid var(--hair);
border-radius: 999px;
font-size: 14px;
font-weight: 600;
color: var(--cream);
cursor: pointer;
font-family: inherit;
transition: border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
box-shadow: 0 4px 12px -6px rgba(58,6,16,0.10);
}
.nav-courses-pill:hover,
.nav-dropdown:hover .nav-courses-pill,
.nav-dropdown[data-open] .nav-courses-pill {
border-color: var(--lime-soft);
color: var(--lime-soft);
}
.nav-courses-pill svg { transition: transform var(--t-med); }
.nav-dropdown:hover .nav-courses-pill svg,
.nav-dropdown[data-open] .nav-courses-pill svg { transform: rotate(180deg); }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; color: #5c1d2f; }
.nav-links a { position: relative; padding: 8px 0; transition: color var(--t-fast); }
.nav-links a::after {
content: ""; position: absolute;
left: 0; bottom: 2px;
width: 100%; height: 1px;
background: var(--lime-soft);
transform: scaleX(0); transform-origin: right;
transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover { color: var(--lime-soft); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links .has-caret::after {
content: ""; display: inline-block; margin-left: 6px;
border-left: 4px solid transparent; border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transform: translateY(-1px); vertical-align: middle;
}
/* ---------- Locations dropdown (inside .nav-links) ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: 0; padding: 8px 0;
font: inherit; font-size: 14px; color: #5c1d2f;
cursor: pointer;
transition: color var(--t-fast);
}
.nav-dropdown-toggle svg { transition: transform var(--t-med); }
.nav-dropdown-toggle:hover,
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown[data-open] .nav-dropdown-toggle {
color: var(--lime-soft);
}
.nav-dropdown:hover .nav-dropdown-toggle svg,
.nav-dropdown[data-open] .nav-dropdown-toggle svg {
transform: rotate(180deg);
}
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 10px); left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: 220px;
background: #FFFFFF;
border: 1px solid var(--hair);
border-radius: var(--r-md);
box-shadow: var(--shadow-lift);
padding: 6px;
opacity: 0; visibility: hidden;
transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown[data-open] .nav-dropdown-menu {
opacity: 1; visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
}
.nav-dropdown-menu a {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px;
border-radius: var(--r-sm);
font-size: 13.5px;
color: var(--cream);
letter-spacing: -0.005em;
transition: background var(--t-fast), color var(--t-fast);
}
.nav-dropdown-menu a:hover {
background: rgba(171,2,38,0.06);
color: var(--lime-soft);
}
.nav-dropdown-menu img {
width: 20px; height: 20px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(58,6,16,0.08);
}
.nav-dropdown-menu a::after { display: none; }
/* ---------- Courses mega-menu (AlmaBetter-inspired, anchored left to pill) ---------- */
.nav-mega-menu {
position: absolute;
top: calc(100% + 12px);
left: 0;
transform: translateY(-6px);
width: 820px;
background: #FFFFFF;
border: 1px solid var(--hair);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lift);
opacity: 0; visibility: hidden;
transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
z-index: 60;
overflow: hidden;
}
.nav-dropdown:hover .nav-mega-menu,
.nav-dropdown:focus-within .nav-mega-menu,
.nav-dropdown[data-open] .nav-mega-menu {
opacity: 1; visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
.nav-mega-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px 0;
}
.nav-mega-head-eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sage);
}
.nav-mega-head-count {
font-size: 11.5px;
color: var(--sage);
letter-spacing: 0.02em;
}
.nav-mega-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding: 16px 20px 20px;
}
.nav-mega-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 22px 22px 20px;
background: #FFFFFF;
border: 1px solid var(--hair);
border-radius: var(--r-lg);
text-decoration: none;
color: var(--cream);
transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
position: relative;
overflow: hidden;
}
.nav-mega-card:hover {
border-color: var(--lime-soft);
transform: translateY(-2px);
box-shadow: 0 18px 30px -16px rgba(58,6,16,0.22);
background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F9 100%);
}
.nav-mega-card::after { display: none; }
.nav-mega-card-head {
display: flex; align-items: center; gap: 12px;
}
.nav-mega-card-head {
align-items: center;
flex-wrap: wrap;
row-gap: 10px;
}
.nav-mega-card .nav-mega-logo {
height: 40px;
width: auto;
flex-shrink: 0;
display: inline-flex; align-items: center;
background: none;
border: 0;
padding: 0;
}
.nav-mega-card .nav-mega-logo img {
height: 100%;
width: auto;
max-width: 180px;
object-fit: contain;
border-radius: 0;
box-shadow: none;
display: block;
}
.nav-mega-badge {
display: inline-flex; align-items: center; gap: 7px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--lime-soft);
}
.nav-mega-badge-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 0 4px rgba(240,2,55,0.18);
}
.nav-mega-card-title-row {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px;
}
.nav-mega-title {
font-family: "Fraunces", serif;
font-weight: 400;
font-size: 19px;
letter-spacing: -0.015em;
line-height: 1.18;
color: var(--cream);
margin: 0;
}
.nav-mega-arrow {
width: 28px; height: 28px;
border-radius: 50%;
display: inline-grid; place-items: center;
color: var(--sage);
background: rgba(58,6,16,0.04);
flex-shrink: 0;
margin-top: 4px;
transition: color var(--t-fast), background var(--t-fast);
}
.nav-mega-card:hover .nav-mega-arrow {
color: #FFFFFF;
background: var(--lime);
}
.nav-mega-arrow svg { width: 12px; height: 12px; }
.nav-mega-meta {
display: flex; align-items: center; gap: 10px;
font-size: 12px;
color: var(--sage);
margin-top: 2px;
flex-wrap: wrap;
}
.nav-mega-meta strong { color: var(--cream); font-weight: 600; }
.nav-mega-meta-sep {
display: inline-block;
width: 3px; height: 3px;
border-radius: 50%;
background: rgba(58,6,16,0.30);
}
.nav-mega-foot {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--hair);
background: #FBF4F5;
}
.nav-mega-cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
font-size: 13.5px;
font-weight: 600;
color: var(--cream);
text-decoration: none;
background: transparent;
border: 0;
border-right: 1px solid var(--hair);
font-family: inherit;
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast);
}
.nav-mega-cta:last-child { border-right: 0; }
.nav-mega-cta:hover { background: rgba(171,2,38,0.06); color: var(--lime-soft); }
.nav-mega-cta::after { display: none; }
.nav-mega-cta-ic {
width: 26px; height: 26px;
border-radius: 50%;
background: rgba(240,2,55,0.10);
color: var(--lime-soft);
display: inline-grid; place-items: center;
flex-shrink: 0;
}
.nav-mega-cta-ic svg { width: 12px; height: 12px; }
/* ---------- Courses dropdown — richer two-line items (legacy) ---------- */
.nav-dropdown-menu--courses { min-width: 320px; padding: 8px; }
.nav-dropdown-menu--courses a {
align-items: flex-start;
padding: 10px 12px;
gap: 12px;
}
.nav-course-mark {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: var(--r-md);
background: rgba(240,2,55,0.10);
color: var(--lime-soft);
display: inline-grid; place-items: center;
transition: background var(--t-fast);
}
.nav-course-mark svg { width: 16px; height: 16px; }
.nav-course-text {
display: flex; flex-direction: column; gap: 2px;
line-height: 1.25;
}
.nav-course-text strong {
font-weight: 600;
font-size: 13.5px;
color: var(--cream);
letter-spacing: -0.005em;
}
.nav-course-text em {
font-style: normal;
font-size: 11.5px;
color: var(--sage);
letter-spacing: 0.01em;
}
.nav-dropdown-menu--courses a:hover .nav-course-mark {
background: rgba(171,2,38,0.18);
}
.nav-dropdown-menu--courses a:hover .nav-course-text strong {
color: var(--lime-soft);
}
@media (max-width: 1100px) {
.nav-dropdown { display: none; }
}
.logo {
display: inline-flex; align-items: center;
color: var(--cream); text-decoration: none;
}
.logo .logo-img {
height: 48px; width: auto;
display: block;
}
.foot-brand .logo .logo-img { height: 40px; }
.nav-cta { display: flex; align-items: center; gap: 18px; }
.nav-login { font-size: 14px; color: #5c1d2f; }
.nav-burger { display: none; }
.nav-regions {
display: inline-flex;
align-items: center;
gap: 14px;
margin-right: 4px;
}
.nav-region {
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 2px;
font-size: 13px;
color: #5c1d2f;
letter-spacing: -0.005em;
transition: color var(--t-fast);
}
.nav-region img {
width: 18px;
height: 18px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(58,6,16,0.08);
}
.nav-region::after {
content: "";
position: absolute;
left: 25px; right: 0; bottom: 2px;
height: 1px;
background: var(--lime-soft);
transform: scaleX(0);
transform-origin: right;
transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav-region:hover { color: var(--lime-soft); }
.nav-region:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 1100px) {
.nav-regions { display: none; }
}
@media (max-width: 1100px) {
.nav-links { display: none; }
.nav-burger {
display: inline-grid; place-items: center;
width: 40px; height: 40px; border-radius: 10px;
border: 1px solid var(--hair-strong);
}
}
/* =========================================================
HERO
========================================================= */
.hero { position: relative; background: var(--ink); overflow: hidden; padding-bottom: 56px; }
.hero-frame {
position: relative;
margin: 24px 24px 0;
border-radius: var(--r-xl);
background-color: var(--paper);
background-image:
linear-gradient(rgba(58,6,16,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.05) 1px, transparent 1px),
radial-gradient(rgba(171,2,38,0.10) 1.2px, transparent 1.2px),
radial-gradient(1200px 600px at 50% -10%, #F8DCE4 0%, var(--paper) 60%);
background-size: 64px 64px, 64px 64px, 22px 22px, 100% 100%;
background-position: 0 0, 0 0, 0 0, 0 0;
overflow: hidden;
border: 1px solid var(--hair);
}
.hero-inner {
position: relative;
padding: 110px 0 120px;
text-align: center;
}
.hero h1 {
font-family: "Fraunces", serif;
font-weight: 400;
font-size: clamp(46px, 8vw, 104px);
line-height: 0.98; letter-spacing: -0.025em;
margin: 0 auto; max-width: 1100px; color: var(--cream);
}
.hero h1 em {
font-style: italic; color: inherit; font-weight: 500;
}
.hero-sub {
margin: 28px auto 0; max-width: 640px;
color: var(--sage-2); font-size: 18px; line-height: 1.6;
}
.hero-cta {
display: flex; justify-content: center; gap: 14px;
margin-top: 36px; flex-wrap: wrap;
}
@media (max-width: 1100px) {
.hero { padding-bottom: 56px; }
.hero-frame { margin: 16px; }
.hero-inner { padding: 64px 0; }
}
@media (max-width: 700px) {
.hero { padding-bottom: 40px; }
}
/* ---------- Partnership card (sits under hero sub) ---------- */
.partner-card {
max-width: 680px;
margin: 36px auto 0;
padding: 18px 28px 22px;
background: rgba(255,255,255,0.82);
border: 1px solid var(--hair-strong);
border-radius: var(--r-md);
box-shadow: 0 10px 30px -18px rgba(58,6,16,0.18);
backdrop-filter: blur(6px);
position: relative;
text-align: center;
}
.partner-card::before {
/* very subtle grid texture matching the hero frame */
content: "";
position: absolute; inset: 0;
pointer-events: none;
border-radius: inherit;
background-image:
linear-gradient(rgba(58,6,16,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.04) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: radial-gradient(100% 100% at 50% 50%, #000 30%, transparent 85%);
-webkit-mask-image: radial-gradient(100% 100% at 50% 50%, #000 30%, transparent 85%);
opacity: .9;
}
.partner-card > .partner-eyebrow {
position: relative;
display: block;
margin: 0 0 14px;
}
.partner-card-row {
position: relative;
display: grid;
grid-template-columns: 1fr 1px 1fr;
align-items: center;
gap: 22px;
}
.partner-cell {
display: flex; flex-direction: column; align-items: center;
gap: 8px;
min-width: 0;
text-align: center;
}
.partner-logo {
height: 54px; width: auto; max-width: 100%;
object-fit: contain;
display: block;
}
.partner-eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--sage);
}
.partner-name {
font-family: "Clash Grotesk", "Inter", sans-serif;
font-weight: 600; font-size: 14.5px;
color: var(--cream); letter-spacing: -0.005em;
}
.partner-divider {
width: 1px; height: 60px;
background: var(--hair-strong);
align-self: center;
justify-self: center;
}
@media (max-width: 700px) {
.partner-card { margin-top: 28px; padding: 16px 18px 20px; }
.partner-card-row {
grid-template-columns: 1fr;
gap: 16px;
}
.partner-divider {
width: 60%; height: 1px;
background: var(--hair);
}
.partner-logo { height: 46px; }
}
/* ---------- Stats strip ---------- */
.stats-strip {
margin: 28px 24px 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border: 1px solid var(--hair); border-radius: var(--r-lg);
background: #FFFFFF; overflow: hidden;
box-shadow: var(--shadow-card);
}
.stat { padding: 28px 32px; display: flex; align-items: center; gap: 16px; border-right: 1px solid var(--hair); }
.stat:last-child { border-right: 0; }
.stat-num {
font-family: "Fraunces", serif;
font-size: 38px; font-weight: 400;
color: var(--lime-soft); letter-spacing: -0.02em;
line-height: 1;
}
.stat-label { font-size: 13px; color: var(--sage-2); line-height: 1.4; margin-top: 4px; }
.stat-icon {
width: 42px; height: 42px; border-radius: 50%;
border: 1px solid var(--forest-line); display: grid; place-items: center;
color: var(--lime-soft); flex-shrink: 0;
}
@media (max-width: 1100px) {
.stats-strip { grid-template-columns: 1fr; margin: 16px 16px 0; }
.stat { border-right: 0; border-bottom: 1px solid var(--hair); }
.stat:last-child { border-bottom: 0; }
}
/* =========================================================
IMAGE PLACEHOLDERS
These are designed to be swapped with ![]()
later. Keep aspect.
========================================================= */
.img-slot {
position: relative;
background:
radial-gradient(420px 200px at 30% 30%, rgba(171,2,38,0.10), transparent 60%),
linear-gradient(160deg, #F5E2E8 0%, #EECFD8 60%, #E8BFC8 100%);
overflow: hidden;
}
.img-slot::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(58,6,16,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.05) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
}
.img-slot::after {
content: "";
position: absolute; inset: 0;
background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(58,6,16,0.04) 18px 19px);
pointer-events: none;
}
.img-slot .label {
position: absolute; left: 12px; bottom: 10px;
z-index: 2;
font-family: "JetBrains Mono", monospace;
font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(124, 74, 87, 0.55);
}
.img-slot.cream {
background:
radial-gradient(420px 200px at 30% 30%, rgba(58,6,16,0.06), transparent 60%),
linear-gradient(160deg, #F1DDE3 0%, #eacdd5 100%);
}
.img-slot.cream::before {
background-image:
linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px);
}
.img-slot.cream::after {
background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(0,0,0,0.04) 18px 19px);
}
.img-slot.cream .label { color: rgba(124, 74, 87, 0.55); }
/* Portrait variant — taller, person-shaped suggestion */
.img-portrait {
aspect-ratio: 4 / 5;
}
.img-portrait .silhouette {
position: absolute;
left: 50%; bottom: -10%;
transform: translateX(-50%);
width: 80%; height: 90%;
background:
radial-gradient(45% 30% at 50% 24%, rgba(77,10,26,0.55), transparent 65%),
radial-gradient(70% 60% at 50% 90%, rgba(77,10,26,0.55), transparent 60%);
filter: blur(8px);
pointer-events: none;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.mentor:hover .silhouette { transform: translateX(-50%) scale(1.08); }
/* =========================================================
COURSES (formerly PROGRAMS — section frame + headers reused)
========================================================= */
.courses,
.programs {
background: var(--ink-2);
position: relative;
overflow: clip; /* clip instead of hidden — keeps sticky working on descendants */
}
.courses::before,
.programs::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(58,6,16,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.04) 1px, transparent 1px);
background-size: 64px 64px;
pointer-events: none;
z-index: 0;
}
.courses::after,
.programs::after {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(70% 50% at 50% 0%, rgba(171,2,38, 0.06), transparent 65%),
radial-gradient(60% 40% at 50% 100%, rgba(58,6,16, 0.05), transparent 70%);
pointer-events: none;
z-index: 0;
}
.courses .wrap,
.programs .wrap { position: relative; z-index: 1; }
.programs-head {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 56px; gap: 48px;
}
.programs-head .h2 { max-width: 680px; }
/* ---------- Switcher (sticky left tabs + right detail card) ---------- */
.courses-switcher {
display: grid;
grid-template-columns: 320px 1fr;
gap: 28px;
align-items: start; /* lets the sticky wrapper actually pin */
}
.course-tabs-wrap {
position: sticky;
top: 24px; /* nav is non-sticky and will have scrolled away by now */
align-self: start;
}
.course-tabs {
display: flex; flex-direction: column;
gap: 12px;
}
/* ---------- Tab card (subtle, restrained) ---------- */
.course-tab {
position: relative;
display: flex; flex-direction: column;
gap: 10px;
text-align: left;
width: 100%;
padding: 18px 18px 16px 20px;
background: #FFFFFF;
border: 1px solid var(--hair);
border-radius: var(--r-md);
color: var(--cream);
font-family: "Clash Grotesk", "Inter", sans-serif;
cursor: pointer;
overflow: hidden;
transition: border-color var(--t-fast), background var(--t-fast);
}
.course-tab:hover { border-color: var(--hair-strong); }
.course-tab.is-active {
border-color: rgba(171,2,38,0.22);
background: linear-gradient(180deg, #FFFFFF 0%, #FFF5F7 100%);
}
/* Top: small certification badge */
.course-tab-badge {
display: inline-flex; align-items: center; gap: 7px;
align-self: flex-start;
font-family: "JetBrains Mono", monospace;
font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--sage);
font-weight: 600;
}
.ct-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--hair-strong);
}
.course-tab.is-active .course-tab-badge { color: var(--lime-soft); }
.course-tab.is-active .ct-dot { background: var(--lime); }
/* Middle row: title + arrow circle */
.course-tab-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
}
.course-tab-label {
font-weight: 600;
font-size: 16.5px;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--cream);
flex: 1;
min-width: 0;
}
.course-tab-arrow {
display: inline-grid; place-items: center;
width: 28px; height: 28px;
border-radius: 50%;
color: var(--muted);
background: transparent;
border: 1px solid var(--hair-strong);
transition: color var(--t-fast), border-color var(--t-fast),
background var(--t-fast);
flex-shrink: 0;
}
.course-tab.is-active .course-tab-arrow {
color: #FFFFFF;
background: var(--lime);
border-color: var(--lime);
}
/* Bottom: meta line */
.course-tab-meta {
margin: 0;
display: flex; align-items: center; flex-wrap: wrap;
gap: 8px;
font-family: "Inter", sans-serif;
font-size: 12.5px;
color: var(--sage);
font-weight: 400;
}
.course-tab-meta strong { color: var(--cream-2); font-weight: 600; }
.ct-sep {
display: inline-block;
width: 3px; height: 3px; border-radius: 50%;
background: var(--hair-strong);
}
/* Progress bar element retained in markup but hidden — switching is manual now. */
.course-tab-progress { display: none; }
/* Right detail card — light, on-brand */
.course-panels { position: relative; }
.course-panel {
position: relative;
padding: 44px 44px 38px;
color: var(--cream);
background: #FFFFFF;
border: 1px solid var(--hair);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--shadow-card);
animation: courseFade .35s ease both;
}
.course-panel::before {
/* hair-thin red bracket frame to echo the modal */
content: "";
position: absolute; inset: 14px;
pointer-events: none;
border: 1px solid rgba(171,2,38,0.10);
border-radius: calc(var(--r-xl) - 6px);
}
.course-panel::after {
/* very soft rose blush in the top-right corner */
content: "";
position: absolute;
top: -120px; right: -120px;
width: 360px; height: 360px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(249,78,110,0.16), transparent 70%);
pointer-events: none;
}
@keyframes courseFade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.course-panel > * { position: relative; z-index: 1; }
/* Campus banner inside each course panel — sits inside the inner border */
.course-panel-campus {
margin: 0 0 28px;
height: 260px;
position: relative;
overflow: hidden;
border-radius: var(--r-lg);
border: 1px solid var(--hair);
box-shadow: var(--shadow-card);
}
.course-panel-campus img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
.course-panel-campus-logo {
position: absolute;
left: 20px; bottom: 18px;
height: 64px;
display: inline-flex; align-items: center; justify-content: center;
background: #FFFFFF;
border-radius: var(--r-md);
padding: 10px 18px;
box-shadow: 0 10px 24px -8px rgba(58,6,16,0.35);
z-index: 1;
}
.course-panel-campus-logo img {
height: 100%;
width: auto;
max-width: 220px;
object-fit: contain;
display: block;
}
@media (max-width: 700px) {
.course-panel-campus { height: 200px; margin-bottom: 22px; }
.course-panel-campus-logo { height: 52px; left: 14px; bottom: 14px; padding: 8px 14px; }
}
.course-panel-head {
display: grid; grid-template-columns: 1fr auto;
gap: 32px;
align-items: flex-end;
}
.course-panel-meta { min-width: 0; }
.course-panel-eyebrow {
display: inline-block;
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--lime-soft);
white-space: nowrap;
}
.course-panel-title {
font-family: "Fraunces", serif; font-weight: 400;
font-size: clamp(28px, 3vw, 44px);
line-height: 1.06; letter-spacing: -0.022em;
margin: 14px 0 0;
color: var(--cream);
}
.course-panel-stats {
display: flex; align-items: center; gap: 22px;
flex-shrink: 0;
}
.cps { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cps-val {
font-family: "Fraunces", serif;
font-weight: 400; font-size: 32px;
line-height: 1;
color: var(--cream);
letter-spacing: -0.02em;
}
.cps-lbl {
font-size: 11.5px;
color: var(--sage);
letter-spacing: 0.01em;
}
.cps-divider {
width: 1px; height: 42px;
background: var(--hair-strong);
}
.course-panel-rule {
height: 1px;
background: linear-gradient(90deg, transparent, var(--hair-strong), transparent);
margin: 28px 0;
}
.course-panel-block { display: flex; flex-direction: column; gap: 16px; }
.course-panel-sub {
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--sage);
}
.course-panel-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 14px;
}
.course-panel-list li {
display: grid;
grid-template-columns: 36px 1fr;
gap: 14px;
align-items: flex-start;
}
.cpl-num {
font-family: "Fraunces", serif;
font-weight: 500; font-size: 16px;
color: var(--lime-soft);
padding-top: 2px;
}
.course-panel-list p {
margin: 0;
font-size: 15px; line-height: 1.55;
color: var(--cream-2);
}
.course-panel-list strong {
color: var(--cream);
font-weight: 600;
}
.course-panel-roles {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 12px;
}
.course-panel-roles li {
position: relative;
padding-left: 18px;
font-size: 15px; line-height: 1.55;
color: var(--cream-2);
}
.course-panel-roles li::before {
content: "";
position: absolute;
left: 0; top: 11px;
width: 8px; height: 1.5px;
background: var(--lime-soft);
}
.course-panel-roles strong { color: var(--cream); font-weight: 600; }
.course-panel-cta {
display: flex; flex-wrap: wrap; gap: 10px;
margin-top: 28px;
}
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.programs-head { flex-direction: column; align-items: flex-start; margin-bottom: 40px; gap: 24px; }
.courses-switcher { grid-template-columns: 1fr; gap: 18px; }
.course-tabs-wrap { position: static; }
.course-tabs { flex-direction: row; flex-wrap: wrap; }
.course-tab { flex: 1 1 280px; padding: 18px 18px 16px 22px; gap: 10px; }
.course-tab-label { font-size: 17px; }
.course-panel { padding: 36px 30px 30px; }
.course-panel-head { grid-template-columns: 1fr; gap: 18px; align-items: flex-start; }
.course-panel-stats { gap: 16px; }
.cps { align-items: flex-start; }
}
@media (max-width: 600px) {
.course-panel { padding: 28px 22px 26px; }
.course-panel-list li { grid-template-columns: 30px 1fr; gap: 10px; }
.course-panel-cta .btn { width: 100%; justify-content: center; }
.course-tab-meta { font-size: 12.5px; }
/* eyebrow on phones: allow wrap or it'll overflow the card */
.course-panel-eyebrow { white-space: normal; font-size: 10px; letter-spacing: 0.12em; }
}
/* =========================================================
EDUCATION POWERED BY TOP ACADEMIA
========================================================= */
.academia {
background: var(--ink);
position: relative;
overflow: clip;
}
.academia::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(58,6,16,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.04) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
}
.academia .wrap { position: relative; z-index: 1; }
.academia-switcher { margin-top: 12px; }
/* ---------- Tabs (two pills inside one rounded container) ---------- */
.academia-tabs {
display: flex; flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 10px;
margin: 0 auto 40px;
background: rgba(255,255,255,0.78);
border: 1px solid var(--hair);
border-radius: 999px;
width: max-content;
max-width: 100%;
backdrop-filter: blur(6px);
box-shadow: var(--shadow-card);
}
.academia-tab {
display: inline-flex; align-items: center; gap: 14px;
padding: 12px 26px 12px 16px;
border-radius: 999px;
background: transparent;
border: 1px solid transparent;
color: var(--cream);
font-family: "Clash Grotesk", "Inter", sans-serif;
font-weight: 600; font-size: 16px;
letter-spacing: -0.005em;
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast),
border-color var(--t-fast), box-shadow var(--t-fast);
}
.academia-tab img {
height: 34px; width: auto; max-width: 40px;
display: block;
object-fit: contain;
opacity: 0.85;
transition: opacity var(--t-fast);
}
.academia-tab:hover { background: rgba(171,2,38,0.05); }
.academia-tab.is-active {
background: linear-gradient(180deg, #FFFFFF 0%, #FFF1F4 100%);
color: var(--cream);
border-color: rgba(171,2,38,0.18);
box-shadow: 0 6px 18px -10px rgba(58,6,16,0.20);
}
.academia-tab.is-active img { opacity: 1; }
/* ---------- Panel ---------- */
.academia-panel {
animation: courseFade .35s ease both;
display: flex; flex-direction: column; gap: 28px;
}
/* Browser default [hidden] is display: none; our display: flex above
would override it, so explicitly hide hidden panels. */
.academia-panel[hidden] { display: none; }
/* Title block (logo × logo) — glass pill overlaid at the top of the image */
.academia-headline {
position: absolute;
top: 28px; left: 50%;
transform: translateX(-50%);
z-index: 2;
padding: 22px 44px;
background: rgba(255,255,255,0.94);
border: 1px solid rgba(255,255,255,0.6);
border-radius: var(--r-lg);
box-shadow: 0 24px 50px -24px rgba(58,6,16,0.45);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
max-width: calc(100% - 56px);
}
.academia-headline-logos {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 30px;
flex-wrap: nowrap;
}
.ah-logo {
height: 68px;
width: auto;
max-width: 100%;
object-fit: contain;
display: block;
}
.ah-logo-edwagon { height: 50px; }
.ah-x {
font-family: "Fraunces", serif;
font-size: 38px;
font-weight: 400;
color: var(--muted);
line-height: 1;
letter-spacing: -0.02em;
}
@media (max-width: 760px) {
.academia-headline { top: 16px; padding: 14px 22px; max-width: calc(100% - 32px); }
.academia-headline-logos { gap: 18px; }
.ah-logo { height: 46px; }
.ah-logo-edwagon { height: 34px; }
.ah-x { font-size: 26px; }
}
/* Campus image with faculty bar overlaid at the bottom */
.academia-stage {
position: relative;
margin: 0;
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid var(--hair);
box-shadow: var(--shadow-card);
aspect-ratio: 16 / 10;
background: linear-gradient(160deg, #FFF1F4 0%, #F6CDD4 100%);
}
.academia-stage > img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.academia-stage::before {
/* soft dark fade at the top so the white headline pill lifts cleanly off the image */
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 28%;
background: linear-gradient(180deg, rgba(58,6,16,0.32) 0%, rgba(58,6,16,0) 100%);
pointer-events: none;
z-index: 1;
}
.academia-stage::after {
/* strong dark fade at the bottom so faculty text reads cleanly off the image */
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 70%;
background: linear-gradient(180deg, rgba(58,6,16,0) 0%, rgba(58,6,16,0.55) 55%, rgba(58,6,16,0.85) 100%);
pointer-events: none;
z-index: 1;
}
/* Faculty bar overlaid at the bottom of the campus image (no card background) */
.academia-faculty-card {
position: absolute;
left: 28px; right: 28px; bottom: 28px;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
display: flex; flex-direction: column;
gap: 18px;
z-index: 2;
}
.academia-faculty-card .academia-block-eyebrow {
text-align: center;
color: var(--paper);
text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.academia-faculty-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
list-style: none; padding: 0; margin: 0;
}
.academia-faculty-row li {
display: flex; flex-direction: column; align-items: center;
gap: 10px;
min-width: 0;
text-align: center;
}
.academia-faculty-row .af-portrait {
width: 132px; height: 132px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(160deg, #FFF1F4 0%, #F6CDD4 100%);
border: 4px solid #FFFFFF;
box-shadow: 0 16px 32px -12px rgba(58,6,16,0.5);
flex-shrink: 0;
display: flex; align-items: flex-end; justify-content: center;
}
.academia-faculty-row .af-portrait img {
width: 100%; height: 112%;
object-fit: cover;
object-position: top center;
display: block;
}
.academia-faculty-row .af-label {
display: flex; flex-direction: column; align-items: center;
text-align: center;
max-width: 100%;
}
.academia-faculty-row .af-label strong {
font-family: "Clash Grotesk", "Inter", sans-serif;
font-weight: 600; font-size: 14px;
color: var(--paper);
letter-spacing: -0.005em;
line-height: 1.25;
text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.academia-faculty-row .af-label span {
font-size: 12px;
color: var(--mute-on-dark);
line-height: 1.4;
margin-top: 2px;
text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
/* ---------- Certificate strip (separated below the hero) ---------- */
.academia-cert-strip {
position: relative;
display: grid;
grid-template-columns: 0.95fr 1.15fr;
gap: 56px;
align-items: center;
padding: 56px;
background: #FFFFFF;
border: 1px solid var(--hair);
border-radius: var(--r-xl);
box-shadow: var(--shadow-card);
overflow: hidden;
}
/* subtle grid texture across the whole strip */
.academia-cert-strip::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(58,6,16,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.035) 1px, transparent 1px),
radial-gradient(rgba(171,2,38,0.08) 1px, transparent 1px);
background-size: 56px 56px, 56px 56px, 22px 22px;
pointer-events: none;
mask-image: radial-gradient(110% 100% at 50% 50%, #000 30%, transparent 88%);
-webkit-mask-image: radial-gradient(110% 100% at 50% 50%, #000 30%, transparent 88%);
z-index: 0;
}
/* soft red blush from the top-right corner */
.academia-cert-strip::after {
content: "";
position: absolute;
top: -180px; right: -180px;
width: 420px; height: 420px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(249,78,110,0.16), transparent 70%);
pointer-events: none;
z-index: 0;
}
.academia-cert-info,
.academia-cert-strip .academia-cert-card {
position: relative;
z-index: 1;
}
.academia-cert-info { min-width: 0; display: flex; flex-direction: column; }
.academia-block-eyebrow {
display: inline-block;
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--lime-soft);
}
.academia-cert-info h4 {
font-family: "Fraunces", serif; font-weight: 400;
font-size: clamp(24px, 2.4vw, 30px);
line-height: 1.18; letter-spacing: -0.015em;
margin: 18px 0 18px;
color: var(--cream);
}
.academia-cert-info p {
margin: 0;
font-size: 15px; line-height: 1.65;
color: var(--sage-2);
max-width: 56ch;
}
.academia-cert-info strong { color: var(--cream); font-weight: 600; }
.academia-cert-points {
list-style: none; padding: 0; margin: 28px 0 0;
display: flex; flex-direction: column; gap: 14px;
}
.academia-cert-points li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13.5px; line-height: 1.5;
color: var(--cream-2);
}
.academia-cert-points .check {
flex-shrink: 0;
width: 18px; height: 18px;
display: inline-grid; place-items: center;
border-radius: 50%;
background: rgba(171,2,38,0.10);
color: var(--lime-soft);
border: 1px solid rgba(171,2,38,0.25);
margin-top: 1px;
}
.academia-cert-points .check svg { width: 10px; height: 10px; }
.academia-cert-card {
position: relative;
display: block;
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--hair);
background: #FFFFFF;
/* Two-layer drop shadow: tight + wide soft, both warm-neutral */
box-shadow:
0 12px 24px -14px rgba(58,6,16,0.18),
0 30px 80px -30px rgba(58,6,16,0.22);
isolation: isolate;
}
/* Diagonal shine sweep that crosses the cert every few seconds */
.academia-cert-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg,
transparent 30%,
rgba(255,255,255,0.45) 48%,
rgba(255,255,255,0.65) 50%,
rgba(255,255,255,0.45) 52%,
transparent 70%);
transform: translateX(-120%);
pointer-events: none;
z-index: 2;
animation: certShine 6s cubic-bezier(.55,.2,.4,1) infinite;
}
/* Small foil ribbon in the top-left corner */
.academia-cert-card::after {
content: "★ Sample";
position: absolute;
top: 14px; left: -42px;
transform: rotate(-32deg);
padding: 4px 48px;
background: linear-gradient(110deg, var(--lime-soft) 0%, var(--lime) 50%, var(--lime-glow) 100%);
color: #FFFFFF;
font-family: "JetBrains Mono", monospace;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
font-weight: 700;
box-shadow: 0 6px 14px -6px rgba(58,6,16,0.55);
z-index: 3;
pointer-events: none;
}
.academia-cert-card img {
position: relative;
z-index: 1;
width: 100%; height: auto;
display: block;
aspect-ratio: 1.4 / 1;
object-fit: contain;
object-position: center;
}
@keyframes certShine {
0% { transform: translateX(-120%); }
55% { transform: translateX(120%); }
100% { transform: translateX(120%); }
}
/* =========================================================
CERTIFICATES — dedicated section showing both credentials
========================================================= */
.certificates {
background: var(--ink-2);
position: relative;
overflow: clip;
}
.certificates::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(58,6,16,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.04) 1px, transparent 1px);
background-size: 64px 64px;
pointer-events: none;
}
.certificates .wrap { position: relative; z-index: 1; }
.certificates .programs-head { margin-bottom: 56px; align-items: center; }
.cert-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.cert-card-block {
position: relative;
display: flex;
flex-direction: column;
gap: 28px;
padding: 32px;
background: #FFFFFF;
border: 1px solid var(--hair);
border-radius: var(--r-xl);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.cert-card-block::before {
/* subtle grid texture matching the section feel */
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(58,6,16,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.035) 1px, transparent 1px),
radial-gradient(rgba(171,2,38,0.07) 1px, transparent 1px);
background-size: 48px 48px, 48px 48px, 20px 20px;
pointer-events: none;
mask-image: radial-gradient(110% 100% at 50% 50%, #000 30%, transparent 90%);
-webkit-mask-image: radial-gradient(110% 100% at 50% 50%, #000 30%, transparent 90%);
z-index: 0;
}
.cert-card-block > * { position: relative; z-index: 1; }
.cert-card-info {
display: flex;
flex-direction: column;
}
.cert-card-info h3 {
font-family: "Fraunces", serif;
font-weight: 400;
font-size: clamp(22px, 2vw, 28px);
line-height: 1.18;
letter-spacing: -0.015em;
margin: 14px 0 14px;
color: var(--cream);
}
.cert-card-info p {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: var(--sage-2);
}
.cert-card-info .academia-cert-points {
margin-top: 22px;
}
@media (max-width: 1100px) {
.cert-grid { grid-template-columns: 1fr; gap: 28px; }
.cert-card-block { padding: 24px; }
}
@media (max-width: 600px) {
.cert-card-block { padding: 20px; gap: 22px; }
.cert-card-info h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.academia-cert-card::before { animation: none; }
}
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.academia-stage { aspect-ratio: 5 / 4; }
.academia-faculty-card { left: 20px; right: 20px; bottom: 20px; }
.academia-faculty-row { gap: 14px; }
.academia-faculty-row .af-portrait { width: 110px; height: 110px; }
.academia-faculty-row .af-label strong { font-size: 13px; }
.academia-faculty-row .af-label span { font-size: 11px; }
.academia-cert-strip { grid-template-columns: 1fr; gap: 32px; padding: 36px; }
}
@media (max-width: 760px) {
.academia-stage { aspect-ratio: 3 / 4; }
.academia-faculty-card { left: 16px; right: 16px; bottom: 16px; }
.academia-faculty-row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.academia-faculty-row .af-portrait { width: 96px; height: 96px; border-width: 3px; }
.academia-faculty-row .af-label strong { font-size: 12.5px; }
.academia-faculty-row .af-label span { font-size: 10.5px; }
.academia-tab { padding: 10px 20px 10px 12px; font-size: 14px; gap: 10px; }
.academia-tab img { height: 28px; max-width: 32px; }
}
/* =========================================================
GLOBAL PROGRAM ADVANTAGE
========================================================= */
.global {
background: var(--ink);
position: relative;
overflow: clip;
padding-bottom: 96px;
}
.global .wrap { position: relative; z-index: 1; }
.global .programs-head { margin-bottom: 36px; align-items: center; }
/* ---------- Map (cropped to eastern hemisphere) + pointers, side-by-side ---------- */
.globe-layout {
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 56px;
align-items: center;
margin-bottom: 56px;
}
.globe-band {
position: relative;
width: 100%;
aspect-ratio: 1.15 / 1;
max-height: 560px;
overflow: hidden;
border-radius: var(--r-lg);
}
.globe-band::before {
/* faint radial blush behind the map */
content: "";
position: absolute; inset: 0;
background:
radial-gradient(60% 70% at 55% 55%, rgba(249,78,110,0.12) 0%, transparent 70%);
pointer-events: none;
}
.globe-map {
position: absolute; inset: 0;
z-index: 1;
width: 100%; height: 100%;
object-fit: cover;
object-position: right center;
display: block;
opacity: 0.9;
pointer-events: none;
}
/* City label pill sits beside the dot on the map */
.hot-label {
position: relative;
display: inline-block;
padding: 6px 14px;
background: #FFFFFF;
border: 1px solid var(--hair-strong);
border-radius: 10px;
font-family: "Clash Grotesk", "Inter", sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--cream);
letter-spacing: -0.005em;
white-space: nowrap;
box-shadow: 0 8px 22px -10px rgba(58,6,16,0.35);
}
.hot-label::before {
content: "";
position: absolute;
left: -5px; top: 50%;
width: 9px; height: 9px;
background: #FFFFFF;
border-left: 1px solid var(--hair-strong);
border-bottom: 1px solid var(--hair-strong);
transform: translateY(-50%) rotate(45deg);
}
/* ---------- Hotspots (map pins) ---------- */
.hotspot {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 10px;
transform: translate(-50%, -50%);
pointer-events: none;
}
/* The dot is the center of the pin (red badge with a white inner ring) */
.hot-dot {
position: relative;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--lime);
border: 3px solid #FFFFFF;
box-shadow: 0 4px 10px -2px rgba(240,2,55,0.45);
flex-shrink: 0;
z-index: 1;
}
.hot-dot::before,
.hot-dot::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--lime);
opacity: 0;
animation: hotPulse 2.4s ease-out infinite;
}
.hot-dot::after { animation-delay: 1.2s; }
@keyframes hotPulse {
0% { transform: scale(0.8); opacity: 0.65; }
100% { transform: scale(3); opacity: 0; }
}
/* ---------- Benefit pointers (vertical stack, right of map) ---------- */
.global-benefits {
list-style: none; padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.global-benefits li {
position: relative;
display: grid;
grid-template-columns: 40px 1fr;
align-items: start;
column-gap: 16px;
padding: 18px 22px 18px 20px;
background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F9 100%);
border: 1px solid var(--hair);
border-radius: var(--r-md);
box-shadow: var(--shadow-card);
transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-med);
overflow: hidden;
}
.global-benefits li::before {
content: "";
position: absolute; top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--lime-soft), transparent);
opacity: 0;
transition: opacity var(--t-med);
}
.global-benefits li:hover {
border-color: var(--hair-strong);
transform: translateY(-2px);
box-shadow: 0 18px 36px -22px rgba(58,6,16,0.22);
}
.global-benefits li:hover::before { opacity: 1; }
.gb-num {
position: absolute;
top: 12px; right: 16px;
font-family: "Fraunces", serif;
font-weight: 400; font-size: 22px;
line-height: 1;
color: rgba(171,2,38,0.18);
letter-spacing: -0.02em;
user-select: none;
}
.gb-icon {
width: 40px; height: 40px;
display: inline-grid; place-items: center;
border-radius: 10px;
background: linear-gradient(180deg, #FFF1F4 0%, #FCE2E7 100%);
border: 1px solid rgba(171,2,38,0.14);
color: var(--lime-soft);
flex-shrink: 0;
}
.gb-icon svg { width: 20px; height: 20px; }
.gb-body { min-width: 0; padding-right: 28px; }
.global-benefits h4 {
font-family: "Fraunces", serif;
font-weight: 400; font-size: 18px;
letter-spacing: -0.012em;
line-height: 1.2;
margin: 0 0 4px;
color: var(--cream-2);
}
.global-benefits p {
margin: 0;
font-size: 13px; line-height: 1.5;
color: var(--sage);
}
@media (max-width: 1100px) {
.globe-layout { grid-template-columns: 1fr; gap: 32px; }
.globe-band { max-height: 480px; }
}
@media (max-width: 600px) {
.globe-band { max-height: 320px; }
.globe-layout { gap: 24px; margin-bottom: 40px; }
.hot-dot { width: 8px; height: 8px; }
.hot-label { font-size: 11px; padding: 4px 10px; }
.global-benefits li { grid-template-columns: 36px 1fr; padding: 14px 18px 14px 16px; column-gap: 12px; }
.gb-icon { width: 36px; height: 36px; }
.global-benefits h4 { font-size: 16.5px; }
}
.cohorts {
background: var(--ink);
position: relative;
overflow: hidden;
}
.cohorts::before {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(rgba(171,2,38,0.10) 1px, transparent 1.4px);
background-size: 28px 28px;
background-position: 14px 14px;
pointer-events: none;
z-index: 0;
}
.cohorts::after {
content: "";
position: absolute; left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(171,2,38,0.35) 50%, transparent 100%);
pointer-events: none;
z-index: 1;
}
.cohorts > .wrap { position: relative; z-index: 2; }
.cohorts-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.cohort {
border-radius: var(--r-lg);
background: #FFFFFF; border: 1px solid var(--hair);
padding: 28px;
display: flex; flex-direction: column; gap: 14px;
position: relative; min-height: 300px;
box-shadow: var(--shadow-card);
transition: border-color var(--t-med), transform var(--t-med);
}
.cohort:hover { border-color: var(--lime-soft); transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(171,2,38, 0.18); }
.cohort-date {
position: absolute; top: 24px; right: 24px;
display: flex; flex-direction: column; align-items: center;
background: rgba(240,2,55, .22);
border: 1px solid rgba(171,2,38, .28);
border-radius: 12px;
padding: 8px 14px;
}
.cohort-date .cd-month {
font-family: "JetBrains Mono", monospace;
font-size: 10px; letter-spacing: 0.18em; color: var(--lime-soft);
}
.cohort-date .cd-day {
font-family: "Fraunces", serif;
font-size: 26px; font-weight: 500; color: var(--cream-2);
line-height: 1; margin-top: 2px; letter-spacing: -0.01em;
}
.cohort-tag {
display: inline-flex; align-items: center; gap: 6px;
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--lime-soft); max-width: 70%;
}
.cohort-tag::before { content: ""; width: 6px; height: 6px; background: currentColor; display: inline-block; }
.cohort h3 {
font-family: "Fraunces", serif; font-weight: 400;
font-size: 22px; line-height: 1.2; letter-spacing: -0.01em;
margin: 0; color: var(--cream); max-width: 80%;
}
.cohort-info {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--sage-2);
}
.cohort-info .sep { color: var(--lime-soft); margin: 0 8px; opacity: 0.6; }
.cohort-fill { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.cohort-bar {
height: 6px; border-radius: 999px;
background: rgba(58,6,16,0.08); overflow: hidden;
}
.cohort-bar span {
display: block; height: 100%;
width: 0;
background: var(--lime); border-radius: 999px;
box-shadow: 0 0 10px rgba(240,2,55, 0.55);
transition: width 1.4s cubic-bezier(.2,.7,.2,1);
}
.cohort-seats {
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.08em; color: var(--sage-2);
}
.cohort-cta {
display: inline-flex; align-items: center; gap: 8px;
color: var(--lime-soft); font-size: 14px; font-weight: 600;
transition: gap var(--t-fast);
}
.cohort:hover .cohort-cta { gap: 12px; }
@media (max-width: 1100px) {
.cohorts-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
.cohorts-grid { grid-template-columns: 1fr; }
}
/* =========================================================
MASTERCLASS (free live sessions)
========================================================= */
.masterclass {
background: var(--ink);
position: relative;
overflow: clip;
padding: 0; /* banner is the whole section */
}
/* ---------- Featured banner (full-bleed, light band with grid) ---------- */
.mc-banner {
position: relative;
width: 100%;
margin: 0;
background:
radial-gradient(50% 80% at 100% 50%, rgba(249,78,110,0.10) 0%, transparent 65%),
linear-gradient(180deg, #FBF4F5 0%, #F5E8EA 100%);
border-top: 1px solid var(--hair-strong);
border-bottom: 1px solid var(--hair-strong);
overflow: hidden;
color: var(--cream);
isolation: isolate;
}
.mc-banner::after {
/* faint grid lines + dot lattice overlay */
content: "";
position: absolute; inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(58,6,16,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.05) 1px, transparent 1px),
radial-gradient(rgba(171,2,38,0.10) 1px, transparent 1px);
background-size: 56px 56px, 56px 56px, 22px 22px;
mask-image: radial-gradient(120% 100% at 30% 50%, #000 30%, transparent 90%);
-webkit-mask-image: radial-gradient(120% 100% at 30% 50%, #000 30%, transparent 90%);
opacity: 0.85;
}
.mc-banner-inner {
position: relative; z-index: 2;
max-width: 1320px;
margin: 0 auto;
padding: 0 48px;
display: grid;
grid-template-columns: 1fr 1.1fr;
align-items: end;
gap: 32px;
}
/* MASTERCLASS diagonal ribbon */
.mc-ribbon {
position: absolute;
top: 26px; left: -58px;
width: 220px;
z-index: 4;
padding: 7px 0;
background: linear-gradient(180deg, #C9A55F 0%, #A37C36 100%);
color: #2a1804;
font-family: "JetBrains Mono", monospace;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.22em;
text-align: center;
transform: rotate(-32deg);
box-shadow: 0 8px 18px -8px rgba(58,6,16,0.30);
}
.mc-banner-body {
padding: 88px 0 88px;
display: flex; flex-direction: column;
justify-content: center;
gap: 18px;
}
.mc-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--lime-soft);
font-weight: 600;
width: max-content;
}
.mc-eyebrow .live-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 0 4px rgba(240,2,55,0.18);
animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(240,2,55,0.18); }
50% { box-shadow: 0 0 0 6px rgba(240,2,55,0.05); }
}
.mc-banner-body h3 {
font-family: "Fraunces", serif;
font-weight: 400;
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1.14; letter-spacing: -0.012em;
margin: 4px 0 0;
color: var(--cream);
max-width: 22ch;
}
.mc-banner-lead {
margin: 0;
font-size: 14.5px; line-height: 1.6;
color: var(--sage-2);
max-width: 50ch;
}
.mc-banner-meta {
list-style: none; padding: 0; margin: 0;
display: flex; flex-wrap: wrap;
gap: 16px 28px;
color: var(--sage-2);
font-size: 14px;
font-weight: 500;
}
.mc-banner-meta li { display: inline-flex; align-items: center; gap: 10px; }
.mc-icon {
width: 32px; height: 32px;
display: inline-grid; place-items: center;
border-radius: 8px;
background: rgba(255,255,255,0.85);
border: 1px solid rgba(171,2,38,0.18);
color: var(--lime-soft);
}
.mc-icon svg { width: 17px; height: 17px; }
.mc-banner-cta {
display: flex; flex-wrap: wrap; gap: 12px;
margin-top: 6px;
}
/* Right side: speaker portrait + caption card + decorative graphics */
.mc-banner-visual {
position: relative;
padding: 0;
display: flex; flex-direction: column;
align-items: center;
align-self: end;
gap: 14px;
min-height: 520px;
}
.mc-deco {
position: absolute;
inset: 0;
width: 100%; height: 100%;
z-index: 0;
pointer-events: none;
/* very gentle drift animation to make the rings/dots feel alive */
animation: mcDrift 14s ease-in-out infinite alternate;
}
@keyframes mcDrift {
from { transform: translateY(-6px); }
to { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
.mc-deco { animation: none; }
}
.mc-banner-portrait {
position: relative;
width: 100%;
display: flex; align-items: flex-end; justify-content: center;
min-height: 520px;
z-index: 1;
}
.mc-banner-glow {
position: absolute;
left: 50%; bottom: 40px;
transform: translateX(-50%);
width: 70%; aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(closest-side, rgba(249,78,110,0.28), rgba(249,78,110,0.06) 60%, transparent 75%);
filter: blur(8px);
pointer-events: none;
z-index: 0;
}
.mc-banner-portrait img {
position: relative; z-index: 1;
height: 100%;
max-height: 560px;
width: auto;
max-width: 100%;
object-fit: contain;
object-position: bottom center;
filter: drop-shadow(0 24px 36px rgba(58,6,16,0.22));
}
/* Speaker caption card sits at the bottom of the portrait */
.mc-speaker-card {
position: absolute;
bottom: 28px; left: 50%;
transform: translateX(-50%);
z-index: 3;
display: inline-flex; align-items: center; gap: 12px;
padding: 10px 18px 10px 10px;
background: rgba(255,255,255,0.94);
border: 1px solid rgba(171,2,38,0.18);
border-radius: 999px;
box-shadow: 0 14px 30px -12px rgba(58,6,16,0.30);
backdrop-filter: blur(8px);
white-space: nowrap;
}
.mc-speaker-avatar {
width: 40px; height: 40px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(160deg, #FFF1F4 0%, #F6CDD4 100%);
flex-shrink: 0;
display: flex; align-items: flex-end; justify-content: center;
}
.mc-speaker-avatar img {
width: 100%; height: 112%;
object-fit: cover; object-position: top center;
}
.mc-speaker-meta {
display: flex; flex-direction: column; gap: 1px;
min-width: 0;
}
.mc-speaker-label {
font-family: "JetBrains Mono", monospace;
font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--sage);
font-weight: 600;
}
.mc-speaker-meta strong {
font-family: "Clash Grotesk", "Inter", sans-serif;
font-weight: 600; font-size: 14px;
color: var(--cream);
line-height: 1.15;
}
.mc-speaker-meta > span:last-child {
font-size: 12px;
color: var(--sage);
}
/* ---------- Upcoming list (3-column row below banner) ---------- */
.mc-upcoming { display: flex; flex-direction: column; gap: 18px; }
.mc-upcoming-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* ---------- Pill chip ---------- */
.mc-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px;
border-radius: 999px;
background: rgba(171,2,38,0.08);
border: 1px solid rgba(171,2,38,0.20);
color: var(--lime-soft);
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
font-weight: 600;
width: max-content;
}
.mc-pill-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--lime);
}
.mc-list-eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--sage);
}
.mc-item {
position: relative;
display: grid;
grid-template-columns: 56px 1fr;
grid-template-rows: auto auto;
gap: 12px 14px;
align-items: center;
padding: 18px;
background: #FFFFFF;
border: 1px solid var(--hair);
border-radius: var(--r-md);
box-shadow: var(--shadow-card);
transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.mc-item:hover {
border-color: rgba(171,2,38,0.30);
background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F9 100%);
transform: translateY(-2px);
}
.mc-item-portrait {
grid-row: 1 / 2;
width: 56px; height: 56px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(160deg, #FFF1F4 0%, #F6CDD4 100%);
border: 2px solid #FFFFFF;
box-shadow: 0 4px 10px -4px rgba(58,6,16,0.20);
flex-shrink: 0;
display: flex; align-items: flex-end; justify-content: center;
}
.mc-item-portrait img {
width: 100%; height: 112%;
object-fit: cover; object-position: top center;
}
.mc-item-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mc-item h4 {
font-family: "Fraunces", serif;
font-weight: 500; font-size: 16px;
line-height: 1.25; letter-spacing: -0.01em;
margin: 0;
color: var(--cream);
}
.mc-item-meta {
display: flex; align-items: center; flex-wrap: wrap;
gap: 8px;
font-size: 12px;
color: var(--sage);
}
.mc-item-meta strong { color: var(--cream-2); font-weight: 600; }
.mc-sep {
width: 3px; height: 3px; border-radius: 50%;
background: var(--hair-strong);
display: inline-block;
}
.mc-rsvp {
grid-column: 1 / -1;
justify-self: stretch;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 10px 16px;
border-radius: 999px;
background: transparent;
border: 1px solid var(--hair-strong);
color: var(--cream);
font-family: "Clash Grotesk", "Inter", sans-serif;
font-weight: 600; font-size: 13px;
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.mc-rsvp:hover {
background: var(--lime);
color: #FFFFFF;
border-color: var(--lime);
}
@media (max-width: 1100px) {
.mc-banner-inner { grid-template-columns: 1fr; padding: 0 32px; gap: 24px; }
.mc-banner-body { padding: 80px 0 16px; }
.mc-banner-visual { padding: 0 0 56px; }
.mc-banner-portrait { min-height: 320px; }
.mc-banner-portrait img { max-height: 360px; }
}
@media (max-width: 680px) {
.mc-banner-inner { padding: 0 20px; }
.mc-banner-body { padding: 72px 0 12px; }
.mc-banner-body h3 { font-size: 26px; }
.mc-banner-meta { gap: 12px 20px; font-size: 13px; }
.mc-ribbon { font-size: 10px; padding: 6px 0; }
.mc-speaker-card { padding: 8px 14px 8px 8px; }
.mc-speaker-avatar { width: 34px; height: 34px; }
.mc-speaker-meta strong { font-size: 13px; }
.mc-speaker-meta > span:last-child { font-size: 11px; }
}
/* =========================================================
ALUMNI TESTIMONIALS
========================================================= */
.alumni { background: var(--ink-2); position: relative; overflow: clip; }
.alumni::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(60% 50% at 0% 0%, rgba(249,78,110,0.08) 0%, transparent 60%),
radial-gradient(60% 50% at 100% 100%, rgba(171,2,38,0.08) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.alumni .wrap { position: relative; z-index: 1; }
/* ---------- Video grid ---------- */
.alumni-videos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 56px;
}
.alumni-vid {
position: relative;
background: #FFFFFF;
border: 1px solid var(--hair);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: transform var(--t-med), box-shadow var(--t-med);
display: flex; flex-direction: column;
}
.alumni-vid:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.av-thumb {
position: relative;
aspect-ratio: 16 / 10;
border-bottom: 1px solid var(--hair);
}
.av-play {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 56px; height: 56px;
border-radius: 50%;
background: var(--lime);
color: #FFFFFF;
display: grid; place-items: center;
box-shadow: 0 12px 28px -10px rgba(240,2,55,0.55);
z-index: 2;
transition: transform var(--t-fast);
}
.alumni-vid:hover .av-play { transform: translate(-50%, -50%) scale(1.08); }
.av-play svg { width: 24px; height: 24px; margin-left: 3px; }
.av-duration {
position: absolute;
bottom: 12px; right: 12px;
z-index: 2;
padding: 4px 10px;
border-radius: 999px;
background: rgba(20,2,6,0.78);
color: #FFFFFF;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.05em;
}
.av-region {
position: absolute;
top: 12px; left: 12px;
z-index: 2;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.94);
color: var(--lime-soft);
font-family: "JetBrains Mono", monospace;
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
font-weight: 600;
border: 1px solid rgba(171,2,38,0.2);
}
.av-body {
padding: 20px 22px 22px;
display: flex; flex-direction: column; gap: 8px;
position: relative;
}
.av-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
}
.av-body h3 {
font-family: "Fraunces", serif; font-weight: 400;
font-size: 22px; letter-spacing: -0.01em;
line-height: 1.1;
margin: 0; color: var(--cream);
}
.av-hike {
padding: 3px 10px;
border-radius: 999px;
background: rgba(171,2,38,0.10);
color: var(--lime-soft);
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
}
.av-transition {
display: inline-flex; align-items: center; flex-wrap: wrap;
gap: 8px;
font-size: 13px;
color: var(--sage);
}
.av-transition .av-after { color: var(--cream-2); font-weight: 600; }
.av-arrow {
display: inline-grid; place-items: center;
width: 20px; height: 20px;
border-radius: 50%;
background: rgba(171,2,38,0.10);
color: var(--lime-soft);
}
.av-body p {
margin: 6px 0 0;
font-size: 13.5px; line-height: 1.55;
color: var(--sage-2);
}
.av-co-logo {
margin-top: 14px;
height: 16px;
width: auto;
max-width: 90px;
object-fit: contain;
object-position: left center;
opacity: 0.55;
filter: brightness(0) saturate(100%) invert(22%) sepia(8%) saturate(900%) hue-rotate(320deg);
}
/* ---------- LinkedIn posts strip ---------- */
.alumni-linkedin {
margin-bottom: 48px;
}
.al-strip-head {
display: flex; align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
}
.al-strip-sub {
font-size: 13px;
color: var(--sage);
}
/* Auto-scrolling marquee — full-bleed band, infinite horizontal scroll */
.al-marquee {
position: relative;
overflow: hidden;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 4px 0 18px;
-webkit-mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.al-posts {
display: flex;
gap: 18px;
width: max-content;
padding-left: 18px; /* small lead-in so first card isn't flush with mask edge */
animation: alScroll 90s linear infinite;
will-change: transform;
}
.al-marquee:hover .al-posts { animation-play-state: paused; }
@keyframes alScroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(-50% - 9px), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.al-posts { animation: none; }
}
.al-post {
position: relative;
flex: 0 0 320px;
align-self: stretch;
padding: 22px 22px 22px;
background:
radial-gradient(120% 60% at 0% 0%, rgba(249,78,110,0.08) 0%, transparent 60%),
linear-gradient(180deg, #FFFFFF 0%, #FFF8F9 100%);
border: 1px solid var(--hair);
border-radius: 14px;
box-shadow: 0 2px 0 rgba(58,6,16,0.04), 0 12px 28px -20px rgba(58,6,16,0.18);
transition: transform var(--t-fast), box-shadow var(--t-med);
overflow: hidden;
isolation: isolate;
}
/* faint dot lattice texture behind content */
.al-post::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background-image: radial-gradient(rgba(171,2,38,0.10) 1px, transparent 1px);
background-size: 18px 18px;
mask-image: radial-gradient(120% 100% at 80% 110%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(120% 100% at 80% 110%, #000 30%, transparent 80%);
opacity: 0.55;
z-index: 0;
}
/* top accent strip — red gradient hairline */
.al-post::after {
content: "";
position: absolute; top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--lime-soft) 30%, var(--lime) 50%, var(--lime-soft) 70%, transparent);
opacity: 0.6;
}
.al-post > * { position: relative; z-index: 1; }
/* Card variants — subtle hue rotation so the row doesn't feel monotonous */
.al-post:nth-child(3n+1) {
background:
radial-gradient(120% 60% at 0% 0%, rgba(249,78,110,0.08) 0%, transparent 60%),
linear-gradient(180deg, #FFFFFF 0%, #FFF8F9 100%);
}
.al-post:nth-child(3n+2) {
background:
radial-gradient(120% 60% at 100% 0%, rgba(249,78,110,0.10) 0%, transparent 60%),
linear-gradient(180deg, #FFFDFC 0%, #FFF1EC 100%);
}
.al-post:nth-child(3n+3) {
background:
radial-gradient(120% 60% at 50% 100%, rgba(171,2,38,0.07) 0%, transparent 60%),
linear-gradient(180deg, #FFFCFD 0%, #FBF0F4 100%);
}
.al-post:hover {
transform: translateY(-2px);
box-shadow: 0 4px 0 rgba(58,6,16,0.05), 0 20px 36px -22px rgba(58,6,16,0.24);
}
/* LinkedIn icon, top-right corner of each card */
.al-li-icon {
position: absolute;
top: 18px; right: 18px;
width: 22px; height: 22px;
border-radius: 50%;
display: block;
}
/* Post head: avatar + name/role/time */
.al-post-head {
display: grid;
grid-template-columns: 44px 1fr;
gap: 12px;
align-items: flex-start;
padding-right: 32px; /* clear the LinkedIn icon */
margin-bottom: 12px;
}
.al-avatar {
width: 44px; height: 44px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(160deg, #FFF1F4 0%, #F6CDD4 100%);
border: 1px solid var(--hair);
flex-shrink: 0;
display: flex; align-items: flex-end; justify-content: center;
}
.al-avatar img {
width: 100%; height: 112%;
object-fit: cover; object-position: top center;
}
.al-meta {
display: flex; flex-direction: column;
min-width: 0;
gap: 1px;
}
.al-meta strong {
font-family: "Inter", sans-serif;
font-weight: 700; font-size: 14px;
color: var(--cream);
letter-spacing: -0.005em;
line-height: 1.25;
}
.al-role {
font-size: 12px;
color: var(--sage);
line-height: 1.35;
}
.al-time {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11.5px;
color: var(--muted);
margin-top: 2px;
}
.al-globe {
display: inline-grid; place-items: center;
color: var(--muted);
}
.al-globe svg { width: 12px; height: 12px; }
/* Post body */
.al-post p {
margin: 0;
font-family: "Inter", sans-serif;
font-size: 13.5px; line-height: 1.55;
color: var(--cream-2);
}
/* Engagement footer removed — keep selectors as no-op so any leftover
markup doesn't render. */
.al-stats { display: none; }
/* ---------- Placement Report CTA ---------- */
.alumni-cta {
position: relative;
display: grid;
grid-template-columns: 1.4fr 1fr;
align-items: center;
gap: 32px;
padding: 64px 64px;
margin-top: 56px;
min-height: 320px;
background:
radial-gradient(60% 120% at 100% 50%, rgba(249,78,110,0.12) 0%, transparent 65%),
linear-gradient(180deg, #FFFFFF 0%, #FFF1F4 100%);
border: 1px solid var(--hair-strong);
border-radius: var(--r-xl);
box-shadow: 0 30px 60px -30px rgba(58,6,16,0.20);
overflow: hidden;
isolation: isolate;
}
/* Subtle dot lattice across the whole card */
.alumni-cta::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(rgba(171,2,38,0.10) 1px, transparent 1px);
background-size: 22px 22px;
mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 88%);
-webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 88%);
opacity: 0.65;
}
.alumni-cta-body {
position: relative; z-index: 2;
min-width: 0;
display: flex; flex-direction: column;
gap: 14px;
}
.alumni-cta-body h3 {
font-family: "Fraunces", serif; font-weight: 400;
font-size: clamp(24px, 2.4vw, 30px);
line-height: 1.18;
letter-spacing: -0.018em;
margin: 4px 0 0;
color: var(--cream);
}
.alumni-cta-body p {
margin: 0;
font-size: 14.5px; line-height: 1.6;
color: var(--sage-2);
max-width: 60ch;
}
.alumni-cta-btn {
align-self: flex-start;
margin-top: 14px;
}
/* Right side — brand mark with decorative graphics behind it */
.alumni-cta-mark {
position: relative;
z-index: 1;
display: flex; align-items: center; justify-content: center;
height: 100%;
min-height: 280px;
animation: alumniDeco 14s ease-in-out infinite alternate;
}
@keyframes alumniDeco {
from { transform: translateY(-4px); }
to { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
.alumni-cta-mark { animation: none; }
}
.alumni-cta-mark-deco {
position: absolute;
inset: 0;
width: 100%; height: 100%;
z-index: 0;
pointer-events: none;
}
.alumni-cta-mark-logo {
position: relative;
z-index: 1;
width: 200px;
height: auto;
color: var(--lime);
opacity: 1;
filter: drop-shadow(0 16px 24px rgba(240,2,55,0.28));
}
@media (max-width: 1100px) {
.alumni-videos { grid-template-columns: 1fr; }
.alumni-cta { grid-template-columns: 1fr; padding: 48px 32px; min-height: 0; gap: 28px; }
.alumni-cta-mark { order: -1; min-height: 200px; }
.alumni-cta-mark-logo { width: 140px; }
}
@media (max-width: 540px) {
.al-post { flex: 0 0 280px; }
.al-strip-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* =========================================================
HIRING PARTNERS
========================================================= */
.hiring {
background: var(--ink);
position: relative;
overflow: clip;
}
.hiring::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(58,6,16,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.045) 1px, transparent 1px),
radial-gradient(rgba(171,2,38,0.10) 1px, transparent 1px);
background-size: 64px 64px, 64px 64px, 22px 22px;
pointer-events: none;
mask-image: radial-gradient(110% 100% at 50% 50%, #000 40%, transparent 92%);
-webkit-mask-image: radial-gradient(110% 100% at 50% 50%, #000 40%, transparent 92%);
z-index: 0;
}
.hiring > .wrap,
.hiring > .hiring-marquee { position: relative; z-index: 1; }
.hiring .programs-head {
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 48px;
}
.hiring .programs-head .h2,
.hiring .programs-head .lead { text-align: center; }
.hiring .programs-head .lead { max-width: 60ch; margin: 16px auto 0; }
.hiring-marquee { padding: 24px 0; }
.hiring-marquee + .hiring-marquee { padding-top: 6px; padding-bottom: 16px; }
/* Don't pause on hover for the hiring marquees */
.hiring-marquee:hover .co-track { animation-play-state: running; }
/* =========================================================
OUR APPROACH — Sticky-scroll showcase (Scaler-style)
========================================================= */
.approach {
background: #FFFFFF;
position: relative;
overflow: clip;
}
.approach .wrap { position: relative; z-index: 1; }
.approach-head {
flex-direction: column; align-items: center; text-align: center;
margin-bottom: 36px;
}
.approach-head .h2, .approach-head .lead { text-align: center; }
.approach-head .lead { max-width: 56ch; margin: 16px auto 0; }
/* Two-col container: sticky stage left, scrollable steps right */
.approach-scroll {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
/* ----- Sticky visual stage ----- */
.approach-stage {
position: sticky;
top: 80px;
align-self: start;
height: calc(100vh - 160px);
max-height: 720px;
min-height: 480px;
}
.approach-stage-inner {
position: relative;
width: 100%; height: 100%;
border-radius: var(--r-xl);
background:
radial-gradient(60% 80% at 30% 0%, rgba(249,78,110,0.10) 0%, transparent 60%),
linear-gradient(180deg, #FBF4F5 0%, #F8ECEE 100%);
border: 1px solid var(--hair);
overflow: hidden;
isolation: isolate;
}
.approach-stage-inner::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(58,6,16,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.045) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(110% 100% at 50% 50%, #000 40%, transparent 92%);
-webkit-mask-image: radial-gradient(110% 100% at 50% 50%, #000 40%, transparent 92%);
}
/* Each visual fades in when its step is active */
.ap-visual {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
margin: 0;
padding: 36px;
opacity: 0;
transform: translateY(14px) scale(0.985);
transition: opacity .35s ease, transform .35s ease;
pointer-events: none;
}
.ap-visual.is-active {
opacity: 1;
transform: translateY(0) scale(1);
}
/* ----- Window mockup chrome ----- */
.ap-mock {
width: 100%;
max-width: 460px;
background: #FFFFFF;
border-radius: 14px;
border: 1px solid var(--hair-strong);
box-shadow: 0 30px 60px -28px rgba(58,6,16,0.30),
0 8px 16px -10px rgba(58,6,16,0.16);
overflow: hidden;
}
.ap-mock-bar {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
background: linear-gradient(180deg, #FBF4F5 0%, #F5E8EA 100%);
border-bottom: 1px solid var(--hair);
}
.ap-dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.ap-dot-r { background: #FF5F57; }
.ap-dot-y { background: #FEBC2E; }
.ap-dot-g { background: #28C840; }
.ap-mock-url {
flex: 1;
text-align: center;
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.04em;
color: var(--sage);
}
.ap-live {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px;
border-radius: 999px;
background: rgba(240,2,55,0.10);
color: var(--lime-soft);
font-family: "JetBrains Mono", monospace;
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
font-weight: 700;
}
.ap-live-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 0 3px rgba(240,2,55,0.15);
animation: livePulse 1.6s ease-in-out infinite;
}
.ap-mock-body {
padding: 18px 18px 20px;
display: flex; flex-direction: column; gap: 12px;
min-height: 240px;
}
.ap-row { display: flex; align-items: center; gap: 8px; }
.ap-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(171,2,38,0.10);
color: var(--lime-soft);
font-family: "JetBrains Mono", monospace;
font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
font-weight: 600;
}
.ap-line {
height: 8px;
background: rgba(58,6,16,0.06);
border-radius: 4px;
overflow: hidden;
}
.ap-line span {
display: block; height: 100%;
background: linear-gradient(90deg, rgba(249,78,110,0.45), rgba(171,2,38,0.55));
border-radius: 4px;
}
.ap-grid-2 {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin-top: 6px;
}
.ap-card {
display: flex; flex-direction: column; gap: 2px;
padding: 12px 14px;
background: linear-gradient(180deg, #FFFFFF 0%, #FBF4F5 100%);
border: 1px solid var(--hair);
border-radius: 10px;
}
.ap-card-eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--sage);
font-weight: 600;
}
.ap-card strong {
font-family: "Clash Grotesk", "Inter", sans-serif;
font-weight: 600; font-size: 13px;
color: var(--cream);
}
.ap-card span:last-child { font-size: 11.5px; color: var(--sage); }
/* Floating badges on top of the mockup */
.ap-float {
position: absolute;
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: #FFFFFF;
border: 1px solid var(--hair-strong);
border-radius: 999px;
font-family: "Clash Grotesk", "Inter", sans-serif;
font-weight: 600; font-size: 12px;
color: var(--cream);
box-shadow: 0 14px 24px -10px rgba(58,6,16,0.30);
z-index: 2;
}
.ap-float-tl { top: 18px; left: 18px; }
.ap-float-br { bottom: 22px; right: 18px; }
.ap-float-icon {
display: inline-grid; place-items: center;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--lime);
color: #FFFFFF;
}
.ap-float-icon svg { width: 12px; height: 12px; }
.ap-float-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 0 3px rgba(240,2,55,0.15);
}
/* Live class mock */
.ap-live-main {
position: relative;
height: 160px;
border-radius: 10px;
background: linear-gradient(160deg, #2a040b 0%, #4d0a1a 100%);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.ap-live-stage {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ap-avatar-lg {
width: 84px; height: 84px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(160deg, #FFF1F4 0%, #F6CDD4 100%);
border: 3px solid #FFFFFF;
display: flex; align-items: flex-end; justify-content: center;
}
.ap-avatar-lg img { width: 100%; height: 112%; object-fit: cover; object-position: top center; }
.ap-live-tag {
padding: 4px 10px;
background: rgba(255,255,255,0.16);
color: #FFFFFF;
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 10px; letter-spacing: 0.1em;
}
.ap-live-row {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.ap-tile {
aspect-ratio: 4 / 3;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(160deg, #FFF1F4 0%, #F6CDD4 100%);
display: flex; align-items: flex-end; justify-content: center;
}
.ap-tile img { width: 100%; height: 112%; object-fit: cover; object-position: top center; }
.ap-tile-plus {
align-items: center;
font-family: "JetBrains Mono", monospace;
font-size: 13px; font-weight: 700;
color: var(--lime-soft);
}
/* Kanban mock */
.ap-kanban {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.ap-col {
display: flex; flex-direction: column; gap: 8px;
padding: 10px;
background: linear-gradient(180deg, #FBF4F5 0%, #F5E8EA 100%);
border-radius: 10px;
min-height: 180px;
}
.ap-col-head {
font-family: "JetBrains Mono", monospace;
font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--sage);
font-weight: 700;
}
.ap-task {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
background: #FFFFFF;
border: 1px solid var(--hair);
border-radius: 8px;
font-family: "Inter", sans-serif;
font-size: 11.5px;
color: var(--cream-2);
font-weight: 500;
}
.ap-task.is-active {
border-color: var(--lime);
box-shadow: 0 0 0 3px rgba(240,2,55,0.10);
}
.ap-task.done { opacity: 0.65; text-decoration: line-through; text-decoration-color: rgba(58,6,16,0.30); }
.ap-task-tag {
display: inline-grid; place-items: center;
padding: 1px 6px;
border-radius: 6px;
font-family: "JetBrains Mono", monospace;
font-size: 9px; letter-spacing: 0.06em;
font-weight: 700;
}
/* IDE / coding playground mock */
.ap-ide {
padding: 0;
min-height: 240px;
background: #1a0a12;
border-radius: 0 0 14px 14px;
display: flex; flex-direction: column;
overflow: hidden;
}
.ap-code {
flex: 1;
margin: 0;
padding: 18px 18px 12px;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
line-height: 1.65;
color: rgba(255,255,255,0.85);
white-space: pre;
overflow: hidden;
}
.ap-ln {
display: inline-block;
width: 22px;
color: rgba(255,255,255,0.30);
user-select: none;
}
.ap-tok-k { color: var(--lime-glow); font-weight: 600; }
.ap-tok-fn { color: #FFC85C; }
.ap-tok-c { color: rgba(255,255,255,0.45); font-style: italic; }
.ap-ide-foot {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 18px;
background: rgba(0,0,0,0.30);
border-top: 1px solid rgba(255,255,255,0.08);
}
.ap-ide-status {
display: inline-flex; align-items: center; gap: 8px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: rgba(255,255,255,0.85);
}
.ap-ide-status-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #28C840;
box-shadow: 0 0 8px rgba(40,200,64,0.55);
}
/* Community / alumni grid mock */
.ap-comm-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.ap-comm-tile {
aspect-ratio: 1;
border-radius: 10px;
overflow: hidden;
background: linear-gradient(160deg, #FFF1F4 0%, #F6CDD4 100%);
display: flex; align-items: flex-end; justify-content: center;
}
.ap-comm-tile img { width: 100%; height: 112%; object-fit: cover; object-position: top center; }
.ap-comm-tile-plus {
align-items: center;
background: var(--lime);
color: #FFFFFF;
font-family: "Clash Grotesk", "Inter", sans-serif;
font-weight: 700;
font-size: 14px;
}
/* Placement / offer cards mock */
.ap-offer {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: linear-gradient(180deg, #FFFFFF 0%, #FBF4F5 100%);
border: 1px solid var(--hair);
border-radius: 10px;
}
.ap-offer + .ap-offer { margin-top: 8px; }
.ap-offer-logo {
width: 36px; height: 22px; object-fit: contain; object-position: left center;
filter: brightness(0) saturate(100%) invert(13%) sepia(85%) saturate(3500%) hue-rotate(335deg);
opacity: 0.7;
}
.ap-offer-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ap-offer-meta strong { font-family: "Clash Grotesk", "Inter", sans-serif; font-weight: 600; font-size: 12.5px; color: var(--cream); }
.ap-offer-meta span { font-size: 11px; color: var(--sage); }
.ap-offer-cta {
padding: 5px 12px;
border-radius: 999px;
background: var(--lime);
color: #FFFFFF;
font-family: "Clash Grotesk", "Inter", sans-serif;
font-weight: 600; font-size: 11px;
}
/* ----- Right-column scrollable steps ----- */
.approach-steps {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column;
}
.approach-step {
min-height: 80vh;
display: flex; align-items: flex-start;
padding: 24px 0;
scroll-snap-align: start;
}
.approach-step:first-child { padding-top: 0; }
.as-card {
position: relative;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.as-tag {
display: inline-block;
font-family: "JetBrains Mono", monospace;
font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--lime-soft);
font-weight: 600;
margin-bottom: 14px;
}
.as-card h3 {
font-family: "Fraunces", serif;
font-weight: 400;
font-size: clamp(26px, 2.8vw, 34px);
letter-spacing: -0.018em;
line-height: 1.16;
margin: 0 0 16px;
color: var(--cream);
}
.as-card p {
margin: 0;
font-size: 16px; line-height: 1.65;
color: var(--sage-2);
max-width: 52ch;
}
.as-list {
list-style: none; padding: 0; margin: 22px 0 0;
display: flex; flex-direction: column; gap: 10px;
}
.as-list li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 14.5px; line-height: 1.5;
color: var(--cream-2);
}
.as-list .check {
flex-shrink: 0;
width: 20px; height: 20px;
display: inline-grid; place-items: center;
border-radius: 50%;
background: rgba(171,2,38,0.10);
color: var(--lime-soft);
border: 1px solid rgba(171,2,38,0.25);
margin-top: 1px;
}
.as-list .check svg { width: 11px; height: 11px; }
/* Footer note under the steps (outside the sticky-scroll grid) */
.approach-foot {
text-align: center;
max-width: 64ch;
margin: 72px auto 0;
}
.approach-foot p {
margin: 12px 0 0;
font-family: "Fraunces", serif;
font-weight: 400;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.35;
letter-spacing: -0.015em;
color: var(--cream);
}
.approach-foot strong { color: var(--lime-soft); font-weight: 600; }
/* ----- Responsive: sticky disabled, visual moves above text ----- */
@media (max-width: 1000px) {
.approach-scroll { grid-template-columns: 1fr; gap: 24px; }
.approach-stage { position: static; height: 380px; min-height: 0; max-height: 420px; }
.approach-step { min-height: 0; padding: 36px 0; }
.as-card h3 { font-size: 24px; }
}
/* =========================================================
MENTORS (Scaler "People Behind" style cards)
========================================================= */
.mentors {
background: var(--ink);
position: relative;
overflow: clip;
}
.mentors-head {
flex-direction: column; align-items: center; text-align: center;
margin-bottom: 56px;
}
.mentors-head .h2,
.mentors-head .lead { text-align: center; }
.mentors-head .lead { max-width: 60ch; margin: 16px auto 0; }
/* Marquee container — full bleed */
.mentors-marquee {
position: relative;
overflow: hidden;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 14px 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.mentors-track {
display: flex;
gap: 22px;
padding-left: 22px;
width: max-content;
animation: mentorsScroll 80s linear infinite;
will-change: transform;
}
.mentors-marquee.reverse .mentors-track {
animation: mentorsScrollRev 100s linear infinite;
}
@keyframes mentorsScroll {
from { transform: translate3d(0,0,0); }
to { transform: translate3d(calc(-50% - 11px), 0, 0); }
}
@keyframes mentorsScrollRev {
from { transform: translate3d(calc(-50% - 11px), 0, 0); }
to { transform: translate3d(0,0,0); }
}
@media (prefers-reduced-motion: reduce) {
.mentors-track { animation: none; }
}
/* Mentor card — compact white card, grid texture, portrait inside */
.mentor-card {
position: relative;
flex: 0 0 360px;
height: 200px;
display: grid;
grid-template-columns: 1fr 140px;
align-items: end;
gap: 10px;
padding: 18px 0 16px 20px;
background: #FFFFFF;
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--shadow-card);
border: 1px solid var(--hair);
isolation: isolate;
}
/* Faint grid + dot lattice on every card */
.mentor-card::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(58,6,16,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.04) 1px, transparent 1px),
radial-gradient(rgba(171,2,38,0.08) 1px, transparent 1px);
background-size: 44px 44px, 44px 44px, 18px 18px;
mask-image: radial-gradient(110% 100% at 30% 50%, #000 35%, transparent 90%);
-webkit-mask-image: radial-gradient(110% 100% at 30% 50%, #000 35%, transparent 90%);
opacity: 0.85;
}
/* Soft pink corner accent — top-right of every card */
.mentor-card::after {
content: "";
position: absolute;
top: -80px; right: -80px;
width: 220px; height: 220px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(249,78,110,0.18), transparent 70%);
pointer-events: none;
z-index: 0;
}
.mc-meta {
position: relative; z-index: 2;
display: flex; flex-direction: column;
gap: 4px;
align-self: flex-start;
}
.mc-meta h3 {
font-family: "Fraunces", serif;
font-weight: 400;
font-size: 19px;
line-height: 1.1;
letter-spacing: -0.01em;
margin: 0;
color: var(--cream);
}
.mc-meta p {
margin: 2px 0 0;
font-size: 12.5px; line-height: 1.35;
color: var(--cream-2);
font-weight: 500;
max-width: 20ch;
}
.mc-prev {
margin-top: 2px;
font-family: "JetBrains Mono", monospace;
font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--sage);
}
/* Portrait anchored bottom-right, sized to fit */
.mc-portrait {
position: absolute;
right: 0;
bottom: 0;
width: 150px;
height: 92%;
z-index: 1;
display: flex; align-items: flex-end; justify-content: center;
overflow: hidden;
}
.mc-portrait img {
width: auto;
height: 100%;
max-width: none;
object-fit: contain;
object-position: bottom center;
filter: drop-shadow(0 16px 22px rgba(58,6,16,0.20));
}
/* Company logo bottom-left */
.mc-logo {
position: absolute;
left: 20px; bottom: 16px;
z-index: 2;
height: 16px;
width: auto;
max-width: 110px;
object-fit: contain;
object-position: left center;
opacity: 0.6;
filter: brightness(0) saturate(100%) invert(22%) sepia(8%) saturate(900%) hue-rotate(320deg);
}
/* Color variants now share the white card — variant adds a tiny top-stripe accent */
.mentor-card.mc-1::after,
.mentor-card.mc-4::after { background: radial-gradient(closest-side, rgba(249,78,110,0.18), transparent 70%); }
.mentor-card.mc-2::after,
.mentor-card.mc-5::after { background: radial-gradient(closest-side, rgba(171,2,38,0.14), transparent 70%); }
.mentor-card.mc-3::after,
.mentor-card.mc-6::after { background: radial-gradient(closest-side, rgba(240,2,55,0.16), transparent 70%); }
@media (max-width: 700px) {
.mentor-card { flex: 0 0 300px; height: 180px; padding: 16px 0 14px 16px; }
.mc-portrait { width: 124px; height: 90%; }
.mc-meta h3 { font-size: 17px; }
}
/* =========================================================
COMMUNITY (Retreat / Bento grid)
========================================================= */
.community {
background: var(--ink-2);
position: relative;
overflow: clip;
}
.community::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(58,6,16,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.045) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(110% 100% at 50% 50%, #000 40%, transparent 92%);
-webkit-mask-image: radial-gradient(110% 100% at 50% 50%, #000 40%, transparent 92%);
z-index: 0;
}
.community .wrap { position: relative; z-index: 1; }
.community-head {
flex-direction: column; align-items: center; text-align: center;
margin-bottom: 36px;
}
.community-head .h2,
.community-head .lead { text-align: center; }
.community-head .lead { max-width: 62ch; margin: 16px auto 0; }
/* Pills: when / where / why */
.community-pills {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 14px;
margin: 0 auto 48px;
}
.cp {
display: inline-flex; align-items: center; gap: 14px;
padding: 12px 22px 12px 14px;
background: #FFFFFF;
border: 1px solid var(--hair-strong);
border-radius: 999px;
box-shadow: 0 4px 12px -6px rgba(58,6,16,0.18);
}
.cp-icon {
width: 38px; height: 38px;
display: inline-grid; place-items: center;
border-radius: 10px;
background: linear-gradient(180deg, #FFF1F4 0%, #FCE2E7 100%);
border: 1px solid rgba(171,2,38,0.18);
color: var(--lime-soft);
}
.cp-icon svg { width: 20px; height: 20px; }
.cp-text { display: flex; flex-direction: column; gap: 1px; }
.cp-text strong {
font-family: "Clash Grotesk", "Inter", sans-serif;
font-weight: 600; font-size: 14px;
color: var(--cream);
letter-spacing: -0.005em;
}
.cp-text span {
font-size: 12px;
color: var(--sage);
}
/* Bento photo grid */
.community-bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 220px 220px 220px;
gap: 16px;
position: relative;
}
.community-bento::before {
/* very soft pink glow framing the whole grid */
content: "";
position: absolute; inset: -24px;
border-radius: 14px;
background: radial-gradient(60% 60% at 50% 50%, rgba(249,78,110,0.06), transparent 70%);
pointer-events: none;
z-index: -1;
}
.cb-tile {
position: relative;
margin: 0;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--hair);
background:
radial-gradient(120% 80% at 50% 100%, rgba(249,78,110,0.18) 0%, transparent 70%),
linear-gradient(160deg, #FFF1F4 0%, #FCE0E5 100%);
display: flex; align-items: center; justify-content: center;
}
.cb-tile-1 { grid-column: 1 / span 3; grid-row: 1 / span 2; }
.cb-tile-2 { grid-column: 4 / span 2; grid-row: 1 / span 1; }
.cb-tile-3 { grid-column: 6 / span 1; grid-row: 1 / span 2; }
.cb-tile-4 { grid-column: 4 / span 2; grid-row: 2 / span 1; }
.cb-tile-5 { grid-column: 1 / span 2; grid-row: 3 / span 1; }
.cb-tile-6 { grid-column: 3 / span 2; grid-row: 3 / span 1; }
.cb-tile-7 { grid-column: 5 / span 2; grid-row: 3 / span 1; }
/* Vary the tile gradients subtly */
.cb-tile-2 { background: radial-gradient(120% 80% at 50% 100%, rgba(171,2,38,0.14) 0%, transparent 70%), linear-gradient(160deg, #FCE0E5 0%, #F6CDD4 100%); }
.cb-tile-3 { background: radial-gradient(120% 80% at 50% 100%, rgba(249,78,110,0.18) 0%, transparent 70%), linear-gradient(160deg, #FFE9E0 0%, #F8C3B3 100%); }
.cb-tile-5 { background: radial-gradient(120% 80% at 50% 100%, rgba(171,2,38,0.14) 0%, transparent 70%), linear-gradient(160deg, #FFEFEB 0%, #F4B8A5 100%); }
.cb-tile-6 { background: radial-gradient(120% 80% at 50% 100%, rgba(249,78,110,0.14) 0%, transparent 70%), linear-gradient(160deg, #FFF5EE 0%, #F7C9B3 100%); }
.cb-tile-7 { background: radial-gradient(120% 80% at 50% 100%, rgba(171,2,38,0.14) 0%, transparent 70%), linear-gradient(160deg, #F8ECEE 0%, #EEB8C0 100%); }
.cb-tile img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
.cb-ph {
display: inline-grid; place-items: center;
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(255,255,255,0.78);
color: var(--lime-soft);
border: 1px solid rgba(171,2,38,0.18);
}
.cb-ph svg { width: 26px; height: 26px; }
.cb-tag {
position: absolute;
top: 14px; left: 14px;
padding: 5px 12px;
background: rgba(255,255,255,0.92);
border: 1px solid rgba(171,2,38,0.18);
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--lime-soft);
font-weight: 600;
z-index: 2;
}
@media (max-width: 900px) {
.community-bento {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 200px 200px 200px 200px;
}
.cb-tile-1 { grid-column: 1 / span 4; grid-row: 1 / span 1; }
.cb-tile-2 { grid-column: 1 / span 2; grid-row: 2 / span 1; }
.cb-tile-3 { grid-column: 3 / span 2; grid-row: 2 / span 1; }
.cb-tile-4 { grid-column: 1 / span 4; grid-row: 3 / span 1; }
.cb-tile-5 { grid-column: 1 / span 2; grid-row: 4 / span 1; }
.cb-tile-6 { grid-column: 3 / span 2; grid-row: 4 / span 1; }
.cb-tile-7 { display: none; }
}
@media (max-width: 540px) {
.community-bento {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.cb-tile,
.cb-tile-1, .cb-tile-2, .cb-tile-3, .cb-tile-4, .cb-tile-5, .cb-tile-6 {
grid-column: span 1; grid-row: auto;
aspect-ratio: 1;
}
.cb-tile-1 { grid-column: 1 / -1; aspect-ratio: 16/10; }
.cp { padding: 10px 18px 10px 12px; }
.cp-text strong { font-size: 13px; }
}
/* Bigger logos than the hero partners strip */
.hiring-marquee .ls-cell {
height: 64px;
padding: 0 48px;
opacity: 0.7;
}
.hiring-marquee .ls-cell img {
height: 40px;
max-width: 200px;
}
@media (max-width: 700px) {
.hiring-marquee .ls-cell { height: 52px; padding: 0 28px; }
.hiring-marquee .ls-cell img { height: 32px; max-width: 150px; }
}
/* =========================================================
PRACTITIONERS
========================================================= */
.pract { background: var(--ink); overflow: hidden; }
.pract-rail {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 8px 0 24px;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, black 120px, black calc(100% - 120px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, black 120px, black calc(100% - 120px), transparent 100%);
}
.pract-track {
display: flex;
gap: 18px;
width: max-content;
animation: pract-scroll 70s linear infinite;
will-change: transform;
}
.pract-rail:hover .pract-track { animation-play-state: paused; }
@keyframes pract-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(-50% - 9px), 0, 0); }
}
.mentor {
flex: 0 0 280px;
border-radius: var(--r-md);
background: #FFFFFF; border: 1px solid var(--hair);
padding: 18px; position: relative;
box-shadow: var(--shadow-card);
transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.mentor:hover { border-color: var(--lime-soft); transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(171,2,38, 0.20); }
.mentor .ph {
width: 100%;
aspect-ratio: 4 / 5;
height: auto;
border-radius: 12px;
position: relative; overflow: hidden;
margin-bottom: 16px;
background-color: #F8DEE6;
background-image:
linear-gradient(rgba(58,6,16,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.04) 1px, transparent 1px),
radial-gradient(120% 80% at 50% 115%, rgba(240,2,55,0.55) 0%, rgba(240,2,55,0.20) 35%, transparent 65%),
radial-gradient(140% 100% at 50% 0%, rgba(255,255,255,0.55) 0%, transparent 55%),
linear-gradient(180deg, #FAE6EC 0%, #F0C8D4 100%);
background-size: 22px 22px, 22px 22px, 100% 100%, 100% 100%, 100% 100%;
background-position: center, center, center, center, center;
border: 1px solid rgba(58,6,16,0.06);
}
.mentor .ph::before {
content: "";
position: absolute;
left: 50%; bottom: 0;
transform: translateX(-50%);
width: 80%; height: 22%;
background: radial-gradient(60% 60% at 50% 80%, rgba(171,2,38,0.45), transparent 75%);
filter: blur(18px);
pointer-events: none;
z-index: 0;
}
.mentor .ph::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 70%, rgba(58,6,16,0.10) 100%);
pointer-events: none;
z-index: 2;
}
.mentor .ph img {
position: absolute;
z-index: 1;
left: 50%;
bottom: -2px;
transform: translateX(-50%);
width: auto;
height: 108%;
max-width: none;
object-fit: contain;
object-position: center bottom;
display: block;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.mentor:hover .ph img { transform: translateX(-50%) scale(1.04); }
.mentor h3 {
font-family: "Fraunces", serif; font-weight: 400;
font-size: 20px; margin: 0 0 4px;
color: var(--cream); letter-spacing: -0.01em;
}
.mentor .role { font-size: 13px; color: var(--sage-2); }
.mentor .tags { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.mentor .tag {
font-family: "JetBrains Mono", monospace;
font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
padding: 4px 8px; border-radius: 999px;
border: 1px solid var(--hair-strong); color: var(--cream);
}
/* =========================================================
PROBLEMS
========================================================= */
.problems { background: var(--ink-2); position: relative; }
.problems-grid {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
}
.prob:nth-child(1) { grid-column: span 4; }
.prob:nth-child(2) { grid-column: span 2; }
.prob:nth-child(3) { grid-column: span 2; }
.prob:nth-child(4) { grid-column: span 4; }
.prob {
border-radius: var(--r-md);
background: #FFFFFF;
border: 1px solid var(--hair);
padding: 28px; position: relative; min-height: 240px;
display: flex; flex-direction: column; gap: 14px;
box-shadow: var(--shadow-card);
transition: border-color var(--t-fast), transform var(--t-fast);
}
.prob:nth-child(1) h3,
.prob:nth-child(4) h3 { font-size: 30px; max-width: 70%; }
.prob:nth-child(1) p,
.prob:nth-child(4) p { font-size: 14.5px; max-width: 60%; }
@media (max-width: 1100px) {
.problems-grid { grid-template-columns: 1fr 1fr; }
.prob:nth-child(1),
.prob:nth-child(2),
.prob:nth-child(3),
.prob:nth-child(4) { grid-column: span 1; }
}
@media (max-width: 600px) {
.problems-grid { grid-template-columns: 1fr; }
}
.prob:hover { border-color: var(--alert); transform: translateY(-3px); }
.prob-num {
font-family: "JetBrains Mono", monospace;
font-size: 11px; color: var(--alert); letter-spacing: 0.15em;
}
.prob h3 {
font-family: "Fraunces", serif; font-size: 24px; font-weight: 400;
color: var(--cream); margin: 0; line-height: 1.2; letter-spacing: -0.01em;
}
.prob p { font-size: 13.5px; line-height: 1.55; color: var(--sage-2); margin: 0; }
.prob .arr {
position: absolute; top: 24px; right: 24px;
color: var(--alert); width: 22px; height: 22px;
}
.problems-arrow { display: flex; justify-content: center; margin-top: 60px; }
.problems-arrow .a-block {
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.2em;
color: var(--lime-soft); text-transform: uppercase;
display: flex; align-items: center; gap: 14px;
}
.problems-arrow .line { width: 1px; height: 40px; background: var(--lime-soft); }
@media (max-width: 1100px) {
.problems-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.problems-grid { grid-template-columns: 1fr; }
}
/* =========================================================
THE EDWAGON WAY
========================================================= */
.way {
background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink-3) 100%);
position: relative; overflow: hidden;
}
.way .wrap { position: relative; }
.way-head { text-align: center; max-width: 780px; margin: 0 auto 64px; }
.way-head .lead { margin-left: auto; margin-right: auto; }
.way-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.way-card {
grid-column: span 2;
border-radius: var(--r-lg);
background: rgba(255,255,255, 0.85);
border: 1px solid var(--hair);
padding: 32px; position: relative; min-height: 280px;
backdrop-filter: blur(6px);
box-shadow: var(--shadow-card);
transition: border-color var(--t-med), transform var(--t-med), box-shadow var(--t-med);
}
.way-card:hover { border-color: var(--lime-soft); transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(171,2,38, 0.20); }
/* Lime corner brackets (top-left + bottom-right via ::before, top-right + bottom-left via ::after) */
.way-card::before,
.way-card::after {
content: "";
position: absolute; inset: 10px;
pointer-events: none;
opacity: 0;
transition: opacity .35s ease;
border-radius: calc(var(--r-lg) - 6px);
}
.way-card::before {
background:
linear-gradient(var(--lime-soft), var(--lime-soft)) top left / 18px 1.6px no-repeat,
linear-gradient(var(--lime-soft), var(--lime-soft)) top left / 1.6px 18px no-repeat,
linear-gradient(var(--lime-soft), var(--lime-soft)) bottom right / 18px 1.6px no-repeat,
linear-gradient(var(--lime-soft), var(--lime-soft)) bottom right / 1.6px 18px no-repeat;
}
.way-card::after {
background:
linear-gradient(var(--lime-soft), var(--lime-soft)) top right / 18px 1.6px no-repeat,
linear-gradient(var(--lime-soft), var(--lime-soft)) top right / 1.6px 18px no-repeat,
linear-gradient(var(--lime-soft), var(--lime-soft)) bottom left / 18px 1.6px no-repeat,
linear-gradient(var(--lime-soft), var(--lime-soft)) bottom left / 1.6px 18px no-repeat;
}
.way-card:hover::before,
.way-card:hover::after { opacity: 1; }
.way-card:nth-child(-n+2) { grid-column: span 3; }
.way-card .ico {
width: 48px; height: 48px;
border-radius: 12px; border: 1px solid var(--hair);
display: grid; place-items: center;
color: var(--lime-soft); margin-bottom: 24px;
background: rgba(240,2,55,0.18);
}
.way-card h3 {
font-family: "Fraunces", serif; font-size: 28px; font-weight: 400;
letter-spacing: -0.01em; color: var(--cream); margin: 0 0 10px;
}
.way-card p {
font-size: 14px; line-height: 1.6;
color: var(--sage-2); margin: 0; max-width: 380px;
}
.way-card .num {
position: absolute; top: 24px; right: 28px;
font-family: "JetBrains Mono", monospace;
font-size: 12px; color: var(--lime-soft); letter-spacing: 0.1em;
}
@media (max-width: 1100px) {
.way-grid { grid-template-columns: 1fr 1fr; }
.way-card,
.way-card:nth-child(-n+2) { grid-column: span 1; }
.way-card:last-child { grid-column: span 2; }
}
@media (max-width: 600px) {
.way-grid { grid-template-columns: 1fr; }
.way-card,
.way-card:nth-child(-n+2),
.way-card:last-child { grid-column: span 1; }
}
/* =========================================================
PARTNERS STRIP (compact logo bar after hero)
========================================================= */
.partners {
padding: 28px 0 32px;
background: var(--ink-2);
position: relative;
overflow: hidden;
border-top: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
}
.partners-head {
text-align: center;
margin-bottom: 18px;
}
.partners-title {
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sage-2);
margin: 0;
}
.partners-strip { padding: 6px 0; }
.partners-strip .co-track { animation-duration: 50s; }
.ls-cell {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 38px;
opacity: 0.55;
transition: opacity var(--t-fast);
}
.ls-cell:hover { opacity: 1; }
.ls-cell img {
height: 28px;
width: auto;
max-width: 160px;
display: block;
object-fit: contain;
filter: brightness(0) saturate(100%) invert(13%) sepia(85%) saturate(3500%) hue-rotate(335deg);
}
@media (max-width: 700px) {
.partners { padding: 22px 0 26px; }
.partners-head { margin-bottom: 14px; }
.ls-cell { padding: 0 22px; height: 42px; }
.ls-cell img { height: 24px; max-width: 130px; }
}
/* =========================================================
COMPANIES
========================================================= */
.companies {
background: var(--ink);
position: relative;
overflow: hidden;
}
.companies::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(60% 70% at 50% 0%, rgba(240,2,55,0.18), transparent 60%),
radial-gradient(50% 60% at 50% 100%, rgba(240,2,55,0.10), transparent 65%);
pointer-events: none;
z-index: 0;
}
.companies > .wrap, .companies > .co-marquee { position: relative; z-index: 1; }
.live-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
}
.live-eyebrow::before { display: none; }
.live-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--lime-soft);
box-shadow: 0 0 0 0 rgba(171,2,38, 0.55);
animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
0% { box-shadow: 0 0 0 0 rgba(171,2,38, 0.45); }
70% { box-shadow: 0 0 0 10px rgba(171,2,38, 0); }
100% { box-shadow: 0 0 0 0 rgba(171,2,38, 0); }
}
.co-stats {
display: grid; grid-template-columns: repeat(3, 1fr);
margin-top: 56px;
border-top: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
}
.co-stat {
padding: 22px 28px;
border-right: 1px solid var(--hair);
display: flex; flex-direction: column; gap: 6px;
}
.co-stat:last-child { border-right: none; }
.co-stat-num {
font-family: "Fraunces", serif; font-weight: 500;
font-size: 40px; line-height: 1; color: var(--cream);
letter-spacing: -0.02em;
}
.co-stat-label {
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--sage-2);
}
.co-marquee {
position: relative;
overflow: hidden;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 28px 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0, black 120px, black calc(100% - 120px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, black 120px, black calc(100% - 120px), transparent 100%);
}
.co-marquee + .co-marquee { padding-top: 4px; padding-bottom: 12px; }
.co-track {
display: flex;
gap: 14px;
width: max-content;
animation: co-scroll 60s linear infinite;
will-change: transform;
}
.co-marquee.reverse .co-track {
animation: co-scroll-rev 80s linear infinite;
}
.co-marquee:hover .co-track { animation-play-state: paused; }
@keyframes co-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(-50% - 7px), 0, 0); }
}
@keyframes co-scroll-rev {
from { transform: translate3d(calc(-50% - 6px), 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
/* Placement pill — alum → company → role */
.co-place {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 12px;
height: 44px;
padding: 0 18px;
border: 1px solid var(--hair);
border-radius: 999px;
background: rgba(255,255,255, 0.85);
font-size: 13px;
margin-right: 12px;
transition: border-color var(--t-fast), background var(--t-fast);
}
.co-place:hover {
border-color: var(--lime-soft);
background: rgba(240,2,55, 0.18);
}
.co-place-name {
color: var(--cream); font-weight: 500;
}
.co-place-arrow { color: var(--lime-soft); font-weight: 600; }
.co-place-co {
font-family: "Fraunces", serif; font-weight: 500;
color: var(--cream); font-size: 14px;
}
.co-place-role {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--sage-2);
padding-left: 12px;
border-left: 1px solid var(--hair);
}
.co-foot {
margin-top: 24px;
display: flex; justify-content: center;
}
.co-cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 22px;
border: 1px solid var(--hair-strong);
border-radius: 999px;
color: var(--cream);
font-size: 13.5px;
text-decoration: none;
transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.co-cta:hover {
border-color: var(--lime-soft);
color: var(--lime-soft);
background: rgba(240,2,55, 0.18);
transform: translateY(-1px);
}
.co-cta span { transition: transform var(--t-fast); }
.co-cta:hover span { transform: translateX(4px); }
.co-cell {
flex: 0 0 260px;
height: 144px;
border: 1px solid var(--hair); border-radius: 14px;
background: #FFFFFF; padding: 18px 22px;
display: flex; flex-direction: column; gap: 14px; justify-content: space-between;
position: relative;
box-shadow: var(--shadow-card);
transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-med);
}
.co-cell:hover {
border-color: var(--lime-soft); transform: translateY(-3px);
box-shadow: 0 20px 40px -20px rgba(171,2,38, 0.20);
}
.co-cell:hover .co-logo img {
opacity: 0.85;
transform: translateY(-1px);
}
.co-logo {
height: 44px;
display: inline-flex; align-items: center;
flex: 0 0 auto;
}
.co-logo img {
height: 38px;
width: auto;
max-width: 170px;
display: block;
object-fit: contain;
opacity: 0.62;
filter: brightness(0) saturate(100%) invert(13%) sepia(85%) saturate(3500%) hue-rotate(335deg);
transition: opacity var(--t-fast), transform var(--t-fast);
}
.co-text { display: flex; flex-direction: column; gap: 4px; }
.co-name {
font-family: "Fraunces", serif; font-size: 22px; font-weight: 500;
color: var(--cream); letter-spacing: -0.01em; line-height: 1.1;
}
.co-role {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; color: var(--lime-soft); letter-spacing: 0.1em; text-transform: uppercase;
}
.co-cell .marker { top: 12px; right: 12px; width: 6px; height: 6px; }
@media (max-width: 1100px) {
.co-stats { grid-template-columns: repeat(3, 1fr); }
.co-stat { padding: 18px 22px; }
.co-stat-num { font-size: 32px; }
}
@media (max-width: 700px) {
.co-cell { flex-basis: 220px; height: 130px; padding: 16px 18px; gap: 12px; }
.co-name { font-size: 19px; }
.co-logo { width: 36px; height: 36px; font-size: 14px; }
.co-stats { grid-template-columns: 1fr; }
.co-stat { border-right: none; border-bottom: 1px solid var(--hair); padding: 16px 22px; }
.co-stat:last-child { border-bottom: none; }
.co-stat-num { font-size: 28px; }
.co-place { font-size: 12px; height: 40px; padding: 0 14px; gap: 8px; }
.co-place-role { font-size: 10px; padding-left: 8px; }
}
/* =========================================================
FAQ — sticky left rail + grouped accordion on the right
========================================================= */
.faq { background: var(--ink-2); position: relative; overflow: clip; }
.faq::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(58,6,16,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.04) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(110% 100% at 50% 50%, #000 40%, transparent 92%);
-webkit-mask-image: radial-gradient(110% 100% at 50% 50%, #000 40%, transparent 92%);
z-index: 0;
}
.faq .wrap { position: relative; z-index: 1; }
.faq-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 56px;
align-items: start;
}
/* Left aside — sticky on desktop */
.faq-aside {
position: sticky;
top: 80px;
align-self: start;
}
.faq-aside .h2 { max-width: 14ch; }
.faq-contact {
margin-top: 8px;
padding: 24px;
background: #FFFFFF;
border: 1px solid var(--hair);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
}
.faq-contact-avatars {
display: inline-flex; margin-bottom: 14px;
}
.fca {
width: 36px; height: 36px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(160deg, #FFF1F4 0%, #F6CDD4 100%);
border: 2px solid #FFFFFF;
margin-right: -10px;
display: inline-flex; align-items: flex-end; justify-content: center;
}
.fca img { width: 100%; height: 112%; object-fit: cover; object-position: top center; }
.faq-contact strong {
display: block;
font-family: "Clash Grotesk", "Inter", sans-serif;
font-weight: 600; font-size: 16px;
color: var(--cream);
letter-spacing: -0.005em;
}
.faq-contact p {
margin: 4px 0 16px;
font-size: 13.5px; line-height: 1.55;
color: var(--sage-2);
}
/* Right list + grouping */
.faq-list { display: flex; flex-direction: column; gap: 24px; }
.faq-group {
display: flex; flex-direction: column;
gap: 10px;
}
.faq-group-label {
display: inline-flex; align-items: center; gap: 10px;
margin-bottom: 4px;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--sage);
font-weight: 600;
}
.fgl-num {
display: inline-grid; place-items: center;
width: 24px; height: 24px;
border-radius: 50%;
background: rgba(171,2,38,0.10);
color: var(--lime-soft);
font-family: "Fraunces", serif;
font-weight: 500;
font-size: 12px;
border: 1px solid rgba(171,2,38,0.20);
}
.faq-item {
border-radius: var(--r-md);
background: #FFFFFF; border: 1px solid var(--hair);
box-shadow: var(--shadow-card);
transition: border-color var(--t-fast), transform var(--t-fast);
overflow: hidden;
}
.faq-item:hover { border-color: var(--hair-strong); }
.faq-item[open] {
border-color: rgba(171,2,38,0.30);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 20px 24px;
display: flex; justify-content: space-between; align-items: center;
gap: 20px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
font-family: "Inter", sans-serif;
font-size: 16px; font-weight: 500; color: var(--cream-2);
letter-spacing: -0.005em; line-height: 1.35;
}
.faq-icon {
width: 30px; height: 30px; flex-shrink: 0;
border-radius: 50%; border: 1px solid var(--hair-strong);
position: relative;
transition: border-color var(--t-fast), background var(--t-fast);
}
.faq-icon::before, .faq-icon::after {
content: ""; position: absolute; left: 50%; top: 50%;
background: var(--lime-soft);
transform: translate(-50%, -50%);
transition: background var(--t-fast);
}
.faq-icon::before { width: 11px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 11px; transition: transform var(--t-med), background var(--t-fast); }
.faq-item[open] .faq-icon {
border-color: var(--lime);
background: var(--lime);
}
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after { background: #FFFFFF; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a {
padding: 0 24px 22px;
font-size: 14.5px; line-height: 1.65;
color: var(--cream-2);
}
.faq-a strong { color: var(--cream); font-weight: 600; }
@media (max-width: 1000px) {
.faq-grid { grid-template-columns: 1fr; gap: 32px; }
.faq-aside { position: static; }
}
@media (max-width: 700px) {
.faq-item summary { padding: 16px 20px; }
.faq-q { font-size: 15px; }
.faq-a { padding: 0 20px 18px; font-size: 14px; }
}
/* =========================================================
FINAL CTA
========================================================= */
.final { padding: 120px 0; background: var(--ink); }
.final-block {
position: relative;
background-color: var(--paper);
background-image:
linear-gradient(rgba(58,6,16,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.05) 1px, transparent 1px),
radial-gradient(rgba(171,2,38,0.10) 1.2px, transparent 1.2px),
radial-gradient(1200px 600px at 50% -10%, #F8DCE4 0%, var(--paper) 60%);
background-size: 64px 64px, 64px 64px, 22px 22px, 100% 100%;
background-position: 0 0, 0 0, 0 0, 0 0;
border: 1px solid var(--hair);
border-radius: var(--r-xl);
padding: 110px 48px; text-align: center; overflow: hidden;
color: var(--cream);
}
.final-block .h2 {
font-size: clamp(48px, 7vw, 96px);
max-width: 1000px; margin: 0 auto; position: relative;
color: var(--cream);
}
.final-block .lead {
margin: 24px auto 36px;
color: var(--sage-2); position: relative;
}
.final-cta {
display: flex; justify-content: center; gap: 14px; position: relative;
flex-wrap: wrap;
}
.final-block .pill {
position: absolute;
background: rgba(255,255,255,0.78);
border-color: var(--hair-strong);
color: var(--cream);
}
.final-block .eyebrow { color: var(--lime-soft); }
.final-block .eyebrow::before { background-color: var(--lime-soft); }
.pcard.dark .btn-ghost,
.trust-card.feat .btn-ghost {
border: 1px solid rgba(251,238,241,0.32);
color: var(--text-on-dark);
}
.pcard.dark .btn-ghost:hover,
.trust-card.feat .btn-ghost:hover {
border-color: var(--lime);
color: var(--lime);
}
.final-block .fp1 { top: 60px; left: 8%; }
.final-block .fp2 { top: 80px; right: 10%; }
.final-block .fp3 { bottom: 80px; left: 14%; }
.final-block .fp4 { bottom: 80px; right: 14%; }
.final-block .star {
position: absolute; width: 6px; height: 6px;
background: var(--lime-soft); border-radius: 50%;
box-shadow: 0 0 12px rgba(171,2,38,0.45);
animation: twinkle 4s ease-in-out infinite;
}
.final-block .s1 { top: 30%; left: 20%; }
.final-block .s2 { top: 60%; right: 18%; animation-delay: -1s; }
.final-block .s3 { top: 25%; right: 30%; animation-delay: -2s; }
.final-block .s4 { bottom: 25%; left: 30%; animation-delay: -3s; }
@keyframes twinkle {
0%, 100% { opacity: 0.4; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
@media (max-width: 1100px) {
.final-block { padding: 64px 24px; }
.final-block .pill { display: none; }
}
/* =========================================================
FOOTER
========================================================= */
footer {
background: var(--ink-2); border-top: 1px solid var(--hair);
padding: 80px 0 40px;
color: var(--cream);
}
.foot-top {
display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
gap: 40px; padding-bottom: 60px; border-bottom: 1px solid var(--hair);
}
.foot-social {
display: flex;
gap: 10px;
margin-top: 22px;
}
.foot-social a {
width: 38px; height: 38px;
border-radius: 50%;
background: #FFFFFF;
border: 1px solid var(--hair);
display: inline-grid; place-items: center;
color: var(--cream);
transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.foot-social a:hover {
border-color: var(--lime-soft);
color: var(--lime-soft);
transform: translateY(-2px);
}
.foot-social a::after { display: none; }
.foot-social svg { width: 16px; height: 16px; }
.foot-flag {
display: inline-block;
width: auto;
height: 16px;
max-width: 28px;
border-radius: 2px;
margin-right: 10px;
object-fit: contain;
flex-shrink: 0;
}
.foot-col-icon {
display: inline-flex; align-items: center; gap: 8px;
color: var(--sage); margin-right: 8px;
}
.foot-col-icon svg { width: 13px; height: 13px; }
@media (max-width: 1200px) {
.foot-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.foot-top .foot-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
.foot-top { grid-template-columns: 1fr 1fr; gap: 28px; }
.foot-top .foot-brand { grid-column: 1 / -1; }
.foot-top .foot-col:last-child { grid-column: auto; }
}
.foot-link-btn {
display: inline-flex; align-items: center;
padding: 0;
background: transparent; border: 0;
font-family: inherit;
font-size: 14px;
color: var(--cream-3);
cursor: pointer;
transition: color var(--t-fast);
text-align: left;
}
.foot-link-btn:hover { color: var(--lime-soft); }
.foot-brand .logo { font-size: 24px; }
.foot-brand p {
margin: 18px 0 0; color: var(--sage-2);
font-size: 14px; line-height: 1.6; max-width: 300px;
}
.foot-col h3 {
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
color: var(--lime-soft); margin: 0 0 18px;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.foot-col a {
display: inline-flex; align-items: center;
font-size: 14px; color: var(--cream-3); transition: color var(--t-fast);
}
.foot-col a:hover { color: var(--lime-soft); }
.foot-bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 32px; font-size: 13px; color: var(--sage-2);
flex-wrap: wrap; gap: 16px;
}
.foot-bottom .links { display: flex; gap: 24px; flex-wrap: wrap; }
@media (max-width: 1100px) {
.foot-top { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
.foot-brand { grid-column: span 3; margin-bottom: 16px; }
}
@media (max-width: 700px) {
.foot-top { grid-template-columns: 1fr 1fr; }
.foot-brand { grid-column: span 2; }
}
/* =========================================================
Scroll-in animations
========================================================= */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.pill, .final-block .star, .co-track, .pract-track, .live-dot { animation: none; }
.btn::before, .nav-links a::after, .mentor .silhouette,
.cohort-bar span { transition: none; }
}
/* =========================================================
Apply / Counselling Modal — light, mentor-led variant
========================================================= */
.modal[hidden],
.modal [hidden] { display: none !important; }
.modal {
position: fixed; inset: 0;
z-index: 200;
display: grid; place-items: center;
padding: 24px;
isolation: isolate;
}
.modal-backdrop {
position: absolute; inset: 0;
background:
radial-gradient(60% 80% at 50% 40%, rgba(171,2,38,0.18), rgba(58,6,16,0.42));
backdrop-filter: blur(10px) saturate(130%);
animation: modalFade .25s ease both;
}
.modal-shell {
position: relative;
width: min(1000px, 100%);
max-height: calc(100vh - 48px);
display: grid;
grid-template-columns: 0.95fr 1fr;
background: #fff;
border-radius: 14px;
border: 1px solid var(--hair);
overflow: hidden;
box-shadow:
0 40px 100px -30px rgba(58,6,16,0.30),
0 1px 0 rgba(255,255,255,0.8) inset;
animation: modalRise .35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalRise {
from { opacity: 0; transform: translateY(18px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
position: absolute; top: 14px; right: 14px;
width: 36px; height: 36px; border-radius: 50%;
display: grid; place-items: center;
background: #fff;
color: var(--cream);
border: 1px solid var(--hair-strong);
z-index: 4;
transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.modal-close:hover { color: var(--lime-soft); border-color: var(--lime-soft); transform: rotate(90deg); }
.modal-close:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* ---------- Left visual panel — light rose with soft grid ---------- */
.modal-visual {
position: relative;
padding: 40px 36px 32px;
display: flex; flex-direction: column;
color: var(--cream);
background:
radial-gradient(120% 70% at 100% 0%, rgba(249,78,110,0.18) 0%, transparent 55%),
radial-gradient(120% 70% at 0% 100%, rgba(171,2,38,0.10) 0%, transparent 55%),
linear-gradient(155deg, #FFF1F4 0%, #FCE2E7 55%, #F6CDD4 100%);
overflow: hidden;
}
.modal-visual::before {
/* very light grid lines + dot lattice — matches the site's .dotted texture */
content: "";
position: absolute; inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(58,6,16,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.05) 1px, transparent 1px),
radial-gradient(rgba(171,2,38,0.10) 1px, transparent 1px);
background-size: 56px 56px, 56px 56px, 22px 22px;
background-position: 0 0, 0 0, 0 0;
mask-image: radial-gradient(110% 100% at 50% 30%, #000 50%, transparent 88%);
-webkit-mask-image: radial-gradient(110% 100% at 50% 30%, #000 50%, transparent 88%);
opacity: .9;
}
.modal-visual::after {
/* hair-thin red bracket frame */
content: "";
position: absolute; inset: 18px;
border: 1px solid rgba(171,2,38,0.18);
border-radius: 8px;
pointer-events: none;
}
.modal-trust-tag {
position: relative; z-index: 2;
align-self: flex-start;
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 13px;
border-radius: 999px;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(171,2,38,0.18);
color: var(--cream);
font-size: 12px; font-weight: 600;
backdrop-filter: blur(6px);
}
.modal-trust-mark {
display: inline-grid; place-items: center;
color: var(--lime);
width: 10px; height: 10px;
filter: drop-shadow(0 0 4px rgba(240,2,55,0.45));
}
.modal-visual-headline {
position: relative; z-index: 2;
margin: 18px 0 8px;
font-family: "Fraunces", serif;
font-weight: 400;
font-size: clamp(22px, 2vw, 28px);
line-height: 1.2;
letter-spacing: -0.012em;
color: var(--cream);
}
.modal-visual-sub {
position: relative; z-index: 2;
margin: 0 0 18px;
font-size: 14px;
line-height: 1.5;
color: var(--sage);
max-width: 36ch;
}
.modal-visual-image {
position: relative; z-index: 2;
margin: auto 0 0;
flex: 1;
min-height: 220px;
display: flex; align-items: flex-end; justify-content: center;
}
.modal-visual-halo {
position: absolute;
left: 50%; bottom: 60px;
transform: translateX(-50%);
width: 78%; aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(closest-side, rgba(249,78,110,0.32), rgba(249,78,110,0.06) 60%, transparent 75%);
filter: blur(2px);
pointer-events: none;
}
.modal-visual-image img {
position: relative;
max-width: 86%;
max-height: 330px;
object-fit: contain;
object-position: bottom center;
filter: drop-shadow(0 24px 30px rgba(58,6,16,0.22));
}
.modal-visual-cap {
position: relative; z-index: 2;
margin-top: 14px;
text-align: center;
display: flex; flex-direction: column; gap: 2px;
}
.mcap-name {
font-family: "Clash Grotesk", "Inter", sans-serif;
font-weight: 600;
font-size: 15px;
color: var(--cream);
letter-spacing: -0.005em;
}
.mcap-role {
font-size: 12.5px;
color: var(--sage);
}
/* ---------- Right form panel ---------- */
.modal-form-pane {
padding: 44px 36px 32px;
background: #fff;
overflow-y: auto;
max-height: calc(100vh - 48px);
}
.modal-title {
font-family: "Fraunces", serif;
font-weight: 400;
font-size: clamp(22px, 2.1vw, 28px);
line-height: 1.2;
letter-spacing: -0.012em;
color: var(--cream);
margin: 0 0 10px;
}
.modal-sub {
display: inline-flex; align-items: center; gap: 8px;
margin: 0 0 24px;
font-size: 13.5px;
color: var(--sage);
}
.modal-sub strong { color: var(--lime-soft); font-weight: 700; }
.modal-pulse {
width: 8px; height: 8px; border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 0 0 rgba(240,2,55,0.55);
animation: modalPulse 1.8s ease-out infinite;
flex-shrink: 0;
}
@keyframes modalPulse {
0% { box-shadow: 0 0 0 0 rgba(240,2,55,0.55); }
70% { box-shadow: 0 0 0 9px rgba(240,2,55,0); }
100% { box-shadow: 0 0 0 0 rgba(240,2,55,0); }
}
/* ---------- Form fields ---------- */
.modal-form { display: flex; flex-direction: column; gap: 12px; }
/* Restore [hidden] behavior — explicit display: flex above otherwise wins. */
.modal-form[hidden], .modal-success[hidden] { display: none !important; }
.mfield {
display: flex; align-items: center; gap: 10px;
height: 50px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid var(--hair-strong);
background: #fff;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mfield:focus-within {
border-color: var(--lime-soft);
box-shadow: 0 0 0 4px rgba(171,2,38,0.08);
}
.mfield-icon {
width: 18px; height: 18px;
display: inline-grid; place-items: center;
color: var(--sage);
flex-shrink: 0;
}
.mfield-prefix {
font-weight: 600;
font-size: 14px;
color: var(--cream-2);
padding-right: 8px;
border-right: 1px solid var(--hair);
margin-right: 4px;
height: 22px;
display: inline-flex; align-items: center;
}
.mfield input {
flex: 1;
height: 100%;
min-width: 0;
border: 0; background: transparent;
font: inherit;
font-size: 14px;
color: var(--cream);
outline: none;
}
.mfield input::placeholder { color: var(--muted); }
.mfield-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
/* ---------- Radio group ---------- */
.mfield-radio {
border: 0; padding: 0; margin: 6px 0 4px;
display: flex; flex-direction: column; gap: 8px;
}
.mfield-radio legend {
padding: 0; margin: 0 0 6px;
font-size: 13px; color: var(--cream-2); font-weight: 600;
}
.mfield-radio .req { color: var(--lime); }
.mfield-radio-row { display: flex; gap: 28px; }
.mradio {
position: relative;
display: inline-flex; align-items: center; gap: 10px;
font-size: 14px; color: var(--cream);
cursor: pointer;
user-select: none;
}
.mradio input {
position: absolute;
width: 1px; height: 1px;
opacity: 0; pointer-events: none;
}
.mradio-dot {
width: 18px; height: 18px; border-radius: 50%;
border: 1.6px solid var(--hair-strong);
display: inline-grid; place-items: center;
transition: border-color var(--t-fast);
flex-shrink: 0;
}
.mradio-dot::after {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--lime);
transform: scale(0);
transition: transform var(--t-fast);
}
.mradio input:checked ~ .mradio-dot { border-color: var(--lime); }
.mradio input:checked ~ .mradio-dot::after { transform: scale(1); }
.mradio input:focus-visible ~ .mradio-dot { outline: 2px solid var(--lime); outline-offset: 2px; }
/* ---------- Submit + foot ---------- */
.modal-submit {
width: 100%;
justify-content: center;
height: 54px;
margin-top: 6px;
font-size: 15px;
}
.modal-foot {
display: inline-flex; align-items: center; gap: 8px;
margin: 14px 0 0;
color: var(--sage);
font-size: 12.5px;
font-weight: 500;
}
.modal-foot-icon {
display: inline-grid; place-items: center;
color: var(--lime-soft);
flex-shrink: 0;
}
/* ---------- Hiring partners strip (under form footer) ---------- */
.modal-hiring {
margin-top: 18px;
padding-top: 16px;
border-top: 1px dashed var(--hair-strong);
}
.modal-hiring-label {
display: block;
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sage);
margin-bottom: 10px;
}
.modal-hiring-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
gap: 20px;
}
.modal-hiring-row img {
display: block;
width: 100%;
height: 24px;
max-width: 100%;
object-fit: contain;
object-position: left center;
opacity: 0.42;
/* Soft warm-gray tint — keeps logos legible without screaming red. */
filter: brightness(0) saturate(100%) invert(22%) sepia(8%) saturate(900%) hue-rotate(320deg);
transition: opacity var(--t-fast), transform var(--t-fast);
}
.modal-hiring-row img:hover {
opacity: 0.72;
transform: translateY(-1px);
}
.modal-success {
display: flex; align-items: flex-start; gap: 12px;
padding: 16px 16px;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #FBEEF1 100%);
border: 1px solid rgba(171,2,38,0.22);
color: var(--cream);
font-size: 13.5px;
animation: modalRise .3s ease both;
margin-top: 8px;
}
.modal-success .ms-icon { color: var(--lime-soft); flex-shrink: 0; padding-top: 1px; }
.modal-success strong { display: block; font-weight: 700; color: var(--cream); margin-bottom: 2px; }
.modal-success span { color: var(--sage); }
/* ---------- Body-locked scroll ---------- */
body.modal-open { overflow: hidden; }
/* ---------- Clickable card triggers feel actionable ---------- */
.pcard[data-modal-trigger] { cursor: pointer; }
.pcard[data-modal-trigger]:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
/* ---------- Responsive ---------- */
@media (max-width: 860px) {
.modal { padding: 12px; }
.modal-shell {
grid-template-columns: 1fr;
max-height: calc(100vh - 24px);
overflow-y: auto;
}
.modal-visual {
padding: 28px 24px 24px;
min-height: 240px;
}
.modal-visual-image { min-height: 180px; }
.modal-visual-image img { max-height: 200px; }
.modal-form-pane { padding: 28px 22px 24px; max-height: none; }
.modal-close { top: 10px; right: 10px; }
}
@media (max-width: 460px) {
.mfield-row { grid-template-columns: 1fr; }
.modal-title { font-size: 20px; }
.modal-visual-headline { font-size: 19px; }
.mfield-radio-row { gap: 18px; }
}
/* =========================================================
HERO V2 — Avatar cluster (left) + Editorial content (right)
========================================================= */
.hero-v2 {
position: relative;
background: var(--ink);
overflow: hidden;
padding: 24px 0 80px;
}
.hero-v2-frame {
position: relative;
margin: 0 24px;
border-radius: var(--r-xl);
background-color: var(--paper);
background-image:
linear-gradient(rgba(58,6,16,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,6,16,0.04) 1px, transparent 1px),
radial-gradient(rgba(171,2,38,0.08) 1.1px, transparent 1.1px),
radial-gradient(900px 540px at 18% 110%, #F8DCE4 0%, var(--paper) 65%);
background-size: 64px 64px, 64px 64px, 22px 22px, 100% 100%;
border: 1px solid var(--hair);
overflow: hidden;
}
.hero-v2-inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 56px;
align-items: stretch;
padding: 88px 64px 72px;
min-height: 640px;
}
/* Compact inline partnership row in the V2 content column */
.hv2-partners {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--hair);
}
.hv2-partners-eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sage);
}
.hv2-partners-row {
display: inline-flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
.hv2-partner {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.hv2-partner img {
height: 32px;
width: auto;
object-fit: contain;
display: block;
}
.hv2-partner span {
font-family: "Clash Grotesk", "Inter", sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--cream);
letter-spacing: -0.005em;
white-space: nowrap;
}
.hv2-partner-divider {
width: 1px;
height: 32px;
background: var(--hair-strong);
}
@media (max-width: 700px) {
.hv2-partners-row { gap: 14px; }
.hv2-partner img { height: 28px; }
.hv2-partner-divider { display: none; }
}
/* ---------- LEFT — Visual stage ---------- */
.hv2-visual {
position: relative;
min-height: 560px;
align-self: stretch;
}
.hv2-deco {
position: absolute;
inset: 0;
z-index: 0;
color: var(--lime-soft);
pointer-events: none;
animation: hv2Drift 16s ease-in-out infinite alternate;
}
@keyframes hv2Drift {
from { transform: translateY(-4px); }
to { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
.hv2-deco { animation: none; }
}
.hv2-glow {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 62%; aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(249,78,110,0.32), rgba(249,78,110,0.06) 60%, transparent 75%);
filter: blur(10px);
}
.hv2-spark {
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--lime-soft);
box-shadow: 0 0 14px rgba(171,2,38,0.5);
opacity: .55;
}
.hv2-spark.sp-a { bottom: 38%; left: 6%; }
.hv2-spark.sp-b { bottom: 22%; right: 8%; width: 4px; height: 4px; }
.hv2-spark.sp-c { bottom: 12%; left: 14%; width: 5px; height: 5px; }
/* Hero portrait */
.hv2-hero-portrait {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 78%; max-width: 500px;
z-index: 2;
display: flex; justify-content: center; align-items: center;
filter: drop-shadow(0 30px 44px rgba(58,6,16,0.24));
}
.hv2-hero-portrait img {
width: 100%;
height: auto;
max-height: 620px;
object-fit: contain;
object-position: bottom center;
-webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0.7) 78%, rgba(0,0,0,0.15) 92%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0.7) 78%, rgba(0,0,0,0.15) 92%, transparent 100%);
}
@keyframes hv2Floaty {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Floating chips */
.hv2-chip {
position: absolute;
display: inline-flex; align-items: center; gap: 9px;
padding: 9px 14px 9px 12px;
background: rgba(255,255,255,0.92);
border: 1px solid var(--hair-strong);
border-radius: 999px;
font-size: 12.5px;
color: var(--cream);
font-weight: 500;
letter-spacing: -0.005em;
box-shadow: 0 14px 28px -14px rgba(58,6,16,0.24);
backdrop-filter: blur(8px) saturate(140%);
z-index: 4;
white-space: nowrap;
animation: hv2Floaty 9s ease-in-out infinite;
}
.hv2-chip-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 0 4px rgba(240,2,55,0.16);
}
.hv2-chip-flag {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--lime-soft);
}
.hv2-chip.ch-status { top: 6%; left: 0; animation-delay: -1.4s; }
.hv2-chip.ch-role { top: 44%; right: 0; animation-delay: -3.2s; }
.hv2-chip.ch-logo { bottom: 6%; left: 2%; padding: 7px 14px 7px 8px; animation-delay: -5.1s; }
.hv2-chip.ch-logo img {
width: 18px; height: 18px;
object-fit: contain;
}
/* ---------- RIGHT — Content column ---------- */
.hv2-content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
text-align: left;
}
.hv2-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--lime-soft);
margin-bottom: 26px;
}
.hv2-eyebrow-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--lime-soft);
box-shadow: 0 0 0 3px rgba(171,2,38,0.14);
}
/* ---------- Country hero: Upcoming Cohorts — single compact line ---------- */
.hv2-cohorts {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
background: rgba(255,255,255,0.86);
border: 1px solid var(--hair-strong);
border-radius: 999px;
box-shadow: var(--shadow-card);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-size: 12.5px;
color: var(--cream);
margin-bottom: 26px;
flex-wrap: wrap;
row-gap: 6px;
}
.hv2-cohorts-eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--lime-soft);
font-weight: 600;
}
.hv2-cohort-chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px;
color: var(--cream);
text-decoration: none;
transition: color var(--t-fast);
}
.hv2-cohort-chip::after { display: none; }
.hv2-cohort-chip:hover { color: var(--lime-soft); }
.hv2-cohort-chip strong { font-weight: 600; color: inherit; }
.hv2-cohort-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(58,6,16,0.30);
flex-shrink: 0;
}
.hv2-cohort-dot.live {
background: var(--lime);
box-shadow: 0 0 0 3px rgba(240,2,55,0.16);
}
.hv2-cohort-divider {
width: 1px; height: 14px;
background: rgba(58,6,16,0.14);
flex-shrink: 0;
}
.hv2-cohort-live {
font-family: "JetBrains Mono", monospace;
font-size: 9px;
letter-spacing: 0.16em;
font-weight: 600;
color: var(--lime-soft);
padding: 2px 6px;
border-radius: 999px;
background: rgba(240,2,55,0.14);
}
.hv2-headline {
font-family: "Fraunces", serif;
font-weight: 400;
font-size: clamp(38px, 4.6vw, 64px);
line-height: 1.02;
letter-spacing: -0.022em;
color: var(--cream);
margin: 0;
}
.hv2-headline em {
font-style: italic;
font-weight: 400;
color: var(--lime-soft);
}
.hv2-sub {
margin: 24px 0 0;
max-width: 540px;
font-size: 17px; line-height: 1.6;
color: var(--sage-2);
}
/* Proof line with avatar stack */
.hv2-proof {
display: flex; align-items: center; gap: 16px;
margin-top: 28px;
}
.hv2-proof-stack {
display: flex;
flex-direction: row;
}
.hv2-proof-stack img {
width: 38px; height: 38px;
border-radius: 50%;
border: 2px solid var(--paper);
background: linear-gradient(160deg, #FFF1F4 0%, #F6CDD4 100%);
object-fit: cover;
object-position: top center;
box-shadow: 0 6px 14px -6px rgba(58,6,16,0.22);
}
.hv2-proof-stack img + img { margin-left: -12px; }
.hv2-proof-text {
margin: 0;
font-size: 13.5px; line-height: 1.45;
color: var(--sage-2);
}
.hv2-proof-text strong {
color: var(--cream);
font-weight: 600;
}
/* CTA row */
.hv2-cta {
display: flex; gap: 14px;
margin-top: 32px;
flex-wrap: wrap;
}
/* Feature tick list */
.hv2-ticks {
list-style: none;
margin: 28px 0 0;
padding: 0;
display: flex; flex-wrap: nowrap;
gap: 18px;
white-space: nowrap;
}
.hv2-ticks li {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13.5px;
color: var(--cream-3);
flex-shrink: 0;
}
.hv2-tick {
width: 18px; height: 18px;
border-radius: 50%;
display: inline-grid; place-items: center;
background: rgba(171,2,38,0.10);
color: var(--lime-soft);
}
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.hero-v2 { padding: 16px 0 64px; }
.hero-v2-frame { margin: 0 16px; }
.hero-v2-inner {
grid-template-columns: 1fr;
gap: 32px;
padding: 64px 40px 48px;
min-height: 0;
}
.hv2-content {
order: 1;
padding: 0;
text-align: left;
}
.hv2-visual {
order: 2;
min-height: 520px;
}
.hv2-headline { font-size: clamp(34px, 6vw, 52px); }
}
@media (max-width: 700px) {
.hero-v2 { padding: 12px 0 48px; }
.hero-v2-frame { margin: 0 12px; }
.hero-v2-inner { padding: 48px 24px 36px; gap: 24px; }
.hv2-ticks { flex-wrap: wrap; white-space: normal; gap: 10px 18px; }
.hv2-visual { min-height: 460px; }
.hv2-hero-portrait { width: 88%; max-width: 380px; }
.hv2-chip { font-size: 11.5px; padding: 7px 11px; }
.hv2-chip.ch-status { top: 4%; left: 0; }
.hv2-chip.ch-role { top: 42%; right: 0; }
.hv2-chip.ch-logo { bottom: 4%; left: 2%; }
.hv2-sub { font-size: 16px; }
.hv2-cta .btn { flex: 1; justify-content: center; }
}