/* =====================================================================
CITADEL CULEBRA · School of Reptila
Silver / black premium. Matches the Cerebro umbrella system.
===================================================================== */
/* ---------- TOKENS ---------- */
:root{
--bg: #000000;
--bg-2: #060708;
--bg-3: #0c0d10;
--ink: #f3f4f6;
--ink-soft: #d6d9de;
--ink-mute: #8e939c;
--ink-deep: #5b6068;
--silver: #cfd3d9;
--silver-2: #aab0b8;
--platinum: #e7e9ec;
--graphite: #1a1c1f;
--line: rgba(255,255,255,.08);
--line-2: rgba(255,255,255,.16);
--line-3: rgba(255,255,255,.04);
--glow: rgba(180,200,230,.18);
--grad-chrome: linear-gradient(180deg, #ffffff 0%, #cfd3d9 35%, #6f747c 100%);
--shadow: 0 30px 60px rgba(0,0,0,.55);
--ff-display: "Inter", "Helvetica Neue", system-ui, sans-serif;
--ff-body: "Inter", system-ui, sans-serif;
--ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
--ff-serif: "Cormorant Garamond", "Times New Roman", serif;
--r-sm: 4px;
--r-md: 10px;
--r-lg: 18px;
--pad-x: clamp(20px, 4vw, 80px);
--pad-y: clamp(80px, 12vh, 160px);
--max: 1440px;
/* light section gradients */
--light-1: linear-gradient(180deg, #eef0f4 0%, #e3e6ec 100%);
--light-2: linear-gradient(180deg, #e9ecf0 0%, #dfe3e9 100%);
--light-3: linear-gradient(180deg, #f1f3f6 0%, #e2e5ec 100%);
}
/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{
background:#000;
color-scheme: dark;
-webkit-text-size-adjust:100%;
}
body{
font-family: var(--ff-body);
font-weight: 300;
font-size: 16px;
line-height: 1.55;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
letter-spacing: .005em;
}
img,svg,video,canvas{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; padding:0; margin:0; }
input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:#fff; color:#000; }
section[id]{ scroll-margin-top: 84px; }
/* ---------- TYPOGRAPHY UTILS ---------- */
.eyebrow{
display:inline-block;
font-family: var(--ff-mono);
font-size: 11px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--silver-2);
padding-bottom: 18px;
position: relative;
}
.eyebrow::after{
content:""; position:absolute; left:0; bottom:8px;
width:36px; height:1px;
background: linear-gradient(90deg, var(--silver), transparent);
}
/* ---------- NAV ---------- */
.nav{
position: fixed; top:0; left:0; right:0; z-index: 100;
padding: 14px var(--pad-x);
border-bottom: 1px solid transparent;
transition: background .35s, backdrop-filter .35s, border-color .35s, padding .35s;
}
.nav[data-state="scrolled"]{
background: rgba(8,9,11,.72);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom-color: var(--line);
padding-top: 10px; padding-bottom: 10px;
}
.nav__inner{
display:grid;
grid-template-columns: auto 1fr auto auto;
gap: clamp(14px, 2vw, 28px);
align-items:center;
width:100%; max-width: var(--max); margin: 0 auto;
}
.nav__parent{
display:inline-flex; align-items:center; gap: 6px;
font-family: var(--ff-mono);
font-size: 10px; letter-spacing:.25em; text-transform: uppercase;
color: var(--ink-mute);
transition: color .25s;
white-space: nowrap;
}
.nav__parent:hover{ color: var(--silver); }
.nav__parent-arrow{ color: var(--silver); }
.nav__brand{
display:flex; align-items:center; gap: 10px;
color: var(--ink);
justify-self: center;
}
.nav__brand-mark{
width: 30px; height: 30px; display:grid; place-items:center;
color: var(--silver);
}
.nav__brand-mark img{ max-width:100%; max-height:100%; object-fit: contain; }
.nav__brand-text{ display:flex; align-items:baseline; gap: 8px; font-family: var(--ff-display); }
.nav__brand-text b{ font-weight: 500; letter-spacing: .22em; font-size: 13px; }
.nav__brand-text i{ font-style: normal; color: var(--ink-mute); font-weight: 300; letter-spacing: .25em; font-size: 11px; }
.nav__links{
display:flex; align-items:center; gap: clamp(14px, 1.6vw, 24px);
font-family: var(--ff-mono);
font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--ink-soft);
}
.nav__links a{ position: relative; padding: 6px 0; transition: color .25s; }
.nav__links a:hover{ color: #fff; }
.nav__links a::after{
content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
background: linear-gradient(90deg, var(--silver), transparent);
transition: right .35s;
}
.nav__links a:hover::after{ right:0; }
.nav__cta{ display:flex; gap: 10px; }
.nav__btn{
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
padding: 11px 18px;
border-radius: 999px;
transition: background .25s, color .25s, border-color .25s;
border: 1px solid var(--line-2);
white-space: nowrap;
}
.nav__btn--ghost{ color: var(--ink-soft); }
.nav__btn--ghost:hover{ color:#fff; border-color:#fff; }
.nav__btn--solid{
background: var(--grad-chrome);
color: #000;
border-color: transparent;
font-weight: 500;
}
.nav__btn--solid:hover{ filter: brightness(1.1); }
.nav__hamburger{ display:none; width: 36px; height: 36px; position: relative; }
.nav__hamburger span{
position:absolute; left:8px; right:8px; height:1px; background:#fff;
transition: transform .3s, opacity .3s;
}
.nav__hamburger span:nth-child(1){ top:13px; }
.nav__hamburger span:nth-child(2){ top:18px; }
.nav__hamburger span:nth-child(3){ top:23px; }
/* ---------- HERO · SCROLL SEQUENCE ---------- */
.hero{
position: relative;
min-height: 500vh; /* 5x viewport — scroll distance for sequence */
background: #000;
}
.hero__sticky{
position: sticky; top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
isolation: isolate;
}
.hero__canvas{
position: absolute; inset: 0;
width: 100%; height: 100%;
background: #000;
display: block;
}
.hero__veil{
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.0) 18%, rgba(0,0,0,.0) 65%, rgba(0,0,0,.85) 100%),
radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0,0,0,.25) 100%);
}
.hero__grain{
position:absolute; inset:0; pointer-events:none; opacity:.22; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.hero__overlay{
position: absolute; inset: 0;
display:grid;
grid-template-rows: auto 1fr auto;
padding: clamp(80px, 9vh, 110px) var(--pad-x) clamp(28px, 3vh, 40px);
z-index: 2;
}
.hero__top{
display:flex; justify-content: space-between; align-items: center;
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--silver);
}
.hero__eyebrow{
display:inline-flex; gap: 8px;
padding: 6px 12px;
border: 1px solid var(--line-2);
border-radius: 999px;
background: rgba(0,0,0,.35);
backdrop-filter: blur(6px);
}
.hero__count{ font-variant-numeric: tabular-nums; }
.hero__center{
align-self: center;
display:grid; gap: 18px;
justify-items: center;
text-align: center;
max-width: 1100px;
margin: 0 auto;
}
.hero__crest{
width: clamp(170px, 20vw, 260px);
filter: drop-shadow(0 0 60px rgba(180,200,230,.20));
}
.hero__crest img{ width:100%; height:auto; }
.hero__title{
font-family: var(--ff-display);
font-weight: 200;
font-size: clamp(28px, 4.4vw, 60px);
line-height: 1.05;
letter-spacing: -.02em;
color: #fff;
margin: 0;
max-width: 22ch;
position: relative;
min-height: 2.4em;
}
.hero__title span{
position: absolute;
inset: 0;
display: block;
opacity: 0;
transform: translateY(8px);
transition: opacity .55s ease, transform .55s ease;
pointer-events: none;
}
.hero__title span.is-on{
position: static;
opacity: 1;
transform: translateY(0);
}
.hero__sub{
font-size: clamp(14px, 1.05vw, 17px);
color: var(--silver);
max-width: 64ch;
margin: 0 auto;
}
.hero__bottom{
display:flex; align-items:center; gap: 18px;
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--ink-mute);
}
.hero__bottom-bar{
flex: 1 1 auto;
height: 1px;
background: rgba(255,255,255,.08);
position: relative; overflow: hidden;
}
.hero__bottom-bar i{
position: absolute; left:0; top:0; height:100%; width: 0%;
background: linear-gradient(90deg, transparent, var(--silver), #fff);
transition: width .12s linear;
}
.hero__preload{
position: absolute; inset: 0;
background: #000;
display:grid; place-items: center;
gap: 16px;
z-index: 5;
transition: opacity .8s ease, visibility .8s;
}
.hero__preload.is-out{ opacity: 0; visibility: hidden; }
.hero__preload-text{
font-family: var(--ff-display);
font-weight: 200;
font-size: clamp(20px, 2.4vw, 28px);
letter-spacing: .2em;
color: var(--platinum);
}
.hero__preload-bar{
width: min(360px, 60vw);
height: 1px;
background: rgba(255,255,255,.08);
position: relative; overflow: hidden;
}
.hero__preload-bar i{
position:absolute; left:0; top:0; height:100%; width: 0%;
background: linear-gradient(90deg, transparent, var(--silver), #fff);
}
.hero__preload-meta{
font-family: var(--ff-mono);
font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
color: var(--ink-mute);
}
/* ---------- PROOF BAR ---------- */
.proof{
background: #050608;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 20px var(--pad-x);
overflow: hidden;
}
.proof__inner{
display:flex; gap: clamp(24px, 5vw, 64px);
flex-wrap: wrap; justify-content: center; align-items: center;
font-family: var(--ff-mono);
font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
color: var(--ink-mute);
}
/* ---------- SECTION BASE ---------- */
.section{
position: relative;
padding: var(--pad-y) var(--pad-x);
isolation: isolate;
}
.section__content{
max-width: var(--max);
margin: 0 auto;
display:grid;
gap: clamp(40px, 6vh, 80px);
position: relative;
}
.section__index{
position: absolute;
top: clamp(40px, 8vh, 80px);
right: var(--pad-x);
display:flex; align-items:center; gap: 14px;
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--ink-mute);
z-index: 3;
}
.section__index::before{
content:""; width: 60px; height:1px;
background: linear-gradient(90deg, transparent, var(--silver));
}
.section__num{
font-family: var(--ff-display);
font-size: 13px;
color: var(--ink-soft);
}
.section__title{
font-family: var(--ff-display);
font-weight: 200;
font-size: clamp(34px, 5.4vw, 76px);
line-height: 1.04;
letter-spacing: -.02em;
color: var(--platinum);
margin: 0;
max-width: 22ch;
}
.section__lede{
font-size: clamp(15px, 1.15vw, 19px);
color: var(--ink-soft);
max-width: 68ch;
margin: 0;
}
.section__head{ display:grid; gap: 20px; max-width: 80ch; }
/* light theme bg overrides per section */
.section--halves{ background: var(--light-1); }
.section--doctrine{ background: linear-gradient(180deg, #000 0%, #0a0c10 100%); }
.section--compare{ background: var(--light-2); }
.section--faculty{ background: linear-gradient(180deg, #000, #050608); }
.section--stats{ background: linear-gradient(180deg, #050608, #000); padding: clamp(60px, 8vh, 100px) var(--pad-x); }
.section--curriculum{ background: var(--light-3); }
.section--library{ background: linear-gradient(180deg, #000, #050608); }
.section--circle{ background: var(--light-1); }
.section--governance{ background: #000; }
.section--enroll{ background: linear-gradient(180deg, #000, #060708); }
/* light-section overrides */
.section--halves, .section--compare, .section--curriculum, .section--circle{ color: #0a0b0d; }
.section--halves .section__title,
.section--compare .section__title,
.section--curriculum .section__title,
.section--circle .section__title{ color: #07090b; }
.section--halves .section__lede,
.section--compare .section__lede,
.section--curriculum .section__lede,
.section--circle .section__lede{ color: #2a2d33; }
.section--halves .eyebrow,
.section--compare .eyebrow,
.section--curriculum .eyebrow,
.section--circle .eyebrow{ color: #5a5f67; }
.section--halves .section__index,
.section--compare .section__index,
.section--curriculum .section__index,
.section--circle .section__index{ color: #5a5f67; }
.section--halves .section__num,
.section--compare .section__num,
.section--curriculum .section__num,
.section--circle .section__num{ color: #1a1c1f; }
.section--halves .section__index::before,
.section--compare .section__index::before,
.section--curriculum .section__index::before,
.section--circle .section__index::before{ background: linear-gradient(90deg, transparent, #4a4e54); }
/* ---------- HALVES (school + circle) ---------- */
.halves{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.halves__card{
display:grid; gap: 14px;
padding: clamp(28px, 3.5vw, 44px);
border: 1px solid rgba(0,0,0,.10);
border-radius: var(--r-lg);
background: linear-gradient(180deg, #ffffff 0%, #eef1f5 100%);
color: #0a0b0d;
transition: border-color .35s, transform .35s, box-shadow .35s;
}
.halves__card:hover{
border-color: rgba(0,0,0,.22);
transform: translateY(-4px);
box-shadow: 0 30px 60px rgba(20,30,50,.08);
}
.halves__card--circle{
background: linear-gradient(180deg, #0a0b0d 0%, #14171b 100%);
color: #f3f4f6;
border-color: rgba(255,255,255,.10);
}
.halves__num{
font-family: var(--ff-mono);
font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
color: #5a5f67;
}
.halves__card--circle .halves__num{ color: var(--silver); }
.halves__card h3{
font-family: var(--ff-display);
font-weight: 300;
font-size: clamp(28px, 3vw, 42px);
letter-spacing: -.01em;
color: #07090b;
margin: 4px 0 0;
}
.halves__card--circle h3{ color: #fff; }
.halves__card p{
font-size: 15px; line-height: 1.65;
color: #2a2d33;
margin: 4px 0 0;
}
.halves__card--circle p{ color: var(--silver); }
.halves__bullets{
display:grid; gap: 10px;
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid rgba(0,0,0,.10);
}
.halves__card--circle .halves__bullets{ border-top-color: rgba(255,255,255,.10); }
.halves__bullets li{
font-size: 14px; color: #2a2d33;
position: relative; padding-left: 20px;
line-height: 1.5;
}
.halves__bullets li::before{
content: "→";
position:absolute; left:0; top:0;
color: #4a4e54;
font-family: var(--ff-mono);
}
.halves__card--circle .halves__bullets li{ color: var(--silver); }
.halves__card--circle .halves__bullets li::before{ color: var(--silver-2); }
.halves__cta{
margin-top: 14px;
font-family: var(--ff-mono);
font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
color: #07090b;
}
.halves__card--circle .halves__cta{ color: #fff; }
.halves__cta em{ font-style: normal; transition: transform .25s; }
.halves__card:hover .halves__cta em{ transform: translate(3px, -3px); }
/* ---------- DOCTRINE ---------- */
.section__content--doctrine{ display:grid; gap: clamp(40px, 6vh, 80px); }
.doctrine__lede{ display:grid; gap: 18px; max-width: 80ch; }
.doctrine__pillars{
display:grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border-top: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
}
.pillar{
padding: clamp(28px, 3vw, 40px);
display:grid; gap: 12px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.pillar:nth-child(2n){ border-right: 0; }
.pillar:nth-last-child(-n+2){ border-bottom: 0; }
.pillar__num{
font-family: var(--ff-serif);
font-size: 28px;
font-weight: 400;
font-style: italic;
color: var(--silver);
letter-spacing: -.02em;
}
.pillar h4{
font-family: var(--ff-display);
font-weight: 300;
font-size: clamp(20px, 1.8vw, 26px);
line-height: 1.2;
color: #fff;
margin: 0;
letter-spacing: -.01em;
max-width: 32ch;
}
.pillar p{
font-size: 14px;
line-height: 1.65;
color: var(--silver);
margin: 0;
max-width: 50ch;
}
/* ---------- COMPARE TABLE ---------- */
.compare__grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid rgba(0,0,0,.10);
border-radius: var(--r-md);
overflow: hidden;
background: linear-gradient(180deg, #ffffff, #eef1f5);
}
.compare__col{
padding: clamp(24px, 3vw, 36px);
display:grid; gap: 16px;
}
.compare__col--a{ background: rgba(0,0,0,.04); }
.compare__col--b{
background: linear-gradient(180deg, rgba(120,140,180,.10), transparent);
border-left: 1px solid rgba(0,0,0,.10);
}
.compare__col-head{
font-family: var(--ff-mono);
font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
color: #5a5f67;
padding-bottom: 14px;
border-bottom: 1px solid rgba(0,0,0,.10);
}
.compare__col--b .compare__col-head{ color: #07090b; font-weight: 500; }
.compare__col ul{ display:grid; gap: 12px; }
.compare__col li{
font-family: var(--ff-display);
font-size: 15px; font-weight: 300;
color: #2a2d33;
line-height: 1.5;
padding-left: 22px;
position: relative;
}
.compare__col--b li::before{
content: "→";
position:absolute; left:0; top:0;
color: #4a4e54;
font-family: var(--ff-mono);
}
.compare__col--a li{ color: #6b6f76; }
.compare__col--a li::before{
content: "—";
position:absolute; left:0; top:0;
color: #6b6f76;
font-family: var(--ff-mono);
}
@media (max-width: 900px){
.compare__grid{ grid-template-columns: 1fr; }
.compare__col--b{ border-left: 0; border-top: 1px solid rgba(0,0,0,.10); }
}
/* ---------- FACULTY ---------- */
.faculty{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.faculty-card{
border: 1px solid var(--line);
border-radius: var(--r-md);
background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
overflow: hidden;
transition: border-color .35s, transform .35s, box-shadow .35s;
display:grid;
grid-template-rows: auto 1fr;
}
.faculty-card:hover{
border-color: var(--line-2);
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.faculty-card__photo{
aspect-ratio: 5 / 6;
display:grid; place-items:center;
font-size: clamp(60px, 8vw, 110px);
color: var(--silver-2);
background:
radial-gradient(ellipse at 50% 40%, #15171b, #050607 80%),
repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px);
border-bottom: 1px solid var(--line);
}
.faculty-card__body{ padding: 22px; display:grid; gap: 10px; }
.faculty-card__role{
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
color: var(--silver);
}
.faculty-card__body h4{
font-family: var(--ff-display);
font-weight: 300;
font-size: clamp(20px, 1.8vw, 26px);
letter-spacing: -.01em;
color: #fff;
margin: 0;
}
.faculty-card__body p{
font-size: 13px; color: var(--silver);
margin: 0; line-height: 1.55;
max-width: 36ch;
}
.faculty-card__meta{
display:grid; gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--line);
margin-top: 4px;
}
.faculty-card__meta li{
display:flex; justify-content: space-between; gap: 12px;
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
}
.faculty-card__meta i{ font-style: normal; color: var(--ink-mute); }
.faculty-card__meta span{ color: var(--silver); text-align: right; }
.faculty__footnote{
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
color: var(--ink-mute);
margin: 0;
text-align: center;
}
/* ---------- STATS ---------- */
.section__content--stats{
display:grid; grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
max-width: var(--max); margin: 0 auto;
}
.stat{
padding: clamp(28px, 3.5vw, 44px);
border-right: 1px solid var(--line);
display:grid; gap: 8px;
}
.stat:last-child{ border-right: 0; }
.stat__num{
font-family: var(--ff-display);
font-weight: 200;
font-size: clamp(40px, 5vw, 76px);
letter-spacing: -.03em;
color: var(--platinum);
line-height: 1;
}
.stat i{
font-style: normal;
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
color: var(--ink-mute);
max-width: 28ch;
line-height: 1.4;
}
/* ---------- CURRICULUM ---------- */
.curriculum{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid rgba(0,0,0,.10);
border-radius: var(--r-md);
overflow: hidden;
background: linear-gradient(180deg, #ffffff, #eef1f5);
}
.curriculum-card{
padding: clamp(22px, 2.4vw, 32px);
border-right: 1px solid rgba(0,0,0,.10);
border-bottom: 1px solid rgba(0,0,0,.10);
display:grid; gap: 10px;
transition: background .3s;
}
.curriculum-card:hover{ background: rgba(0,0,0,.025); }
.curriculum-card:nth-child(4n){ border-right: 0; }
.curriculum-card:nth-last-child(-n+4){ border-bottom: 0; }
.curriculum-card--feature{
background: linear-gradient(180deg, rgba(120,140,180,.10), transparent);
}
.curriculum-card__tag{
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: #4a4e54;
align-self: flex-start;
padding: 4px 10px;
border: 1px solid rgba(0,0,0,.16);
border-radius: 999px;
}
.curriculum-card h5{
font-family: var(--ff-display);
font-weight: 300;
font-size: 19px;
color: #07090b;
margin: 4px 0 0;
}
.curriculum-card p{
font-size: 13px; color: #2a2d33; margin: 0; line-height: 1.55;
}
.curriculum-card__meta{
display:flex; gap: 6px; flex-wrap: wrap;
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
color: #5a5f67;
margin-top: 6px;
}
/* ---------- LIBRARY (volumes) ---------- */
.library{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.library-card{
display:grid; gap: 8px;
padding: clamp(22px, 2.4vw, 30px);
border: 1px solid var(--line);
border-radius: var(--r-md);
background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
transition: border-color .3s, transform .3s, background .3s;
position: relative;
min-height: 220px;
}
.library-card:hover{
border-color: var(--line-2);
transform: translateY(-3px);
}
.library-card--feature{
background: linear-gradient(180deg, rgba(180,200,230,.08), transparent);
border-color: var(--line-2);
}
.library-card__num{
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--silver);
}
.library-card h5{
font-family: var(--ff-display);
font-weight: 300;
font-size: 24px;
color: #fff;
margin: 6px 0 0;
}
.library-card__sub{
font-family: var(--ff-serif);
font-style: italic;
font-size: 14px;
color: var(--silver);
}
.library-card p{
font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; line-height: 1.55;
}
.library-card__status{
position: absolute; top: 18px; right: 18px;
font-family: var(--ff-mono);
font-size: 9px; letter-spacing: .25em; text-transform: uppercase;
padding: 4px 10px;
border: 1px solid var(--line-2);
border-radius: 999px;
color: var(--ink-mute);
}
.library-card__status.is-live{
color: #000;
background: var(--silver);
border-color: var(--silver);
}
.library__footnote{
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
color: var(--ink-mute);
margin: 0;
text-align: center;
}
/* ---------- CIRCLE GRID ---------- */
.circle-grid{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid rgba(0,0,0,.10);
border-radius: var(--r-md);
overflow: hidden;
background: linear-gradient(180deg, #ffffff, #eef1f5);
}
.circle-card{
padding: clamp(22px, 2.4vw, 32px);
border-right: 1px solid rgba(0,0,0,.10);
border-bottom: 1px solid rgba(0,0,0,.10);
display:grid; gap: 10px;
transition: background .3s;
}
.circle-card:hover{ background: rgba(0,0,0,.025); }
.circle-card:nth-child(4n){ border-right: 0; }
.circle-card:nth-last-child(-n+4){ border-bottom: 0; }
.circle-card h5{
font-family: var(--ff-display);
font-weight: 400;
font-size: 17px;
color: #07090b;
margin: 0;
}
.circle-card p{
font-size: 13px; color: #2a2d33; margin: 0; line-height: 1.55;
}
/* ---------- GOVERNANCE ---------- */
.governance{
display:grid; gap: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.governance__row{
display:grid;
grid-template-columns: 240px 1fr;
gap: clamp(20px, 4vw, 60px);
padding: clamp(22px, 2.6vw, 36px) 0;
border-bottom: 1px solid var(--line);
align-items: start;
}
.governance__row:last-child{ border-bottom: 0; }
.governance__label{
font-family: var(--ff-mono);
font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
color: var(--silver);
padding-top: 4px;
}
.governance__row p{
font-family: var(--ff-display);
font-weight: 300;
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.5;
color: var(--ink-soft);
margin: 0;
max-width: 70ch;
}
@media (max-width: 800px){
.governance__row{ grid-template-columns: 1fr; gap: 8px; }
}
/* ---------- ENROLL ---------- */
.section__content--enroll{ display:grid; gap: clamp(30px, 5vh, 60px); }
.enroll__head{ display:grid; gap: 16px; max-width: 70ch; }
.enroll__grid{
display:grid;
grid-template-columns: 1.4fr 1fr;
gap: 28px;
align-items: start;
}
.enroll__form{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: clamp(24px, 3vw, 40px);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
}
.enroll__form label{ display:grid; gap: 8px; }
.enroll__form-full{ grid-column: 1 / -1; }
.enroll__form i{
font-style: normal;
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--silver);
}
.enroll__form input,
.enroll__form select,
.enroll__form textarea{
background: transparent;
border: 0;
border-bottom: 1px solid var(--line-2);
padding: 10px 0;
font-family: var(--ff-display);
font-size: 16px;
color: #fff;
width: 100%;
outline: none;
appearance: none;
transition: border-color .3s;
}
.enroll__form select{ background: #000; }
.enroll__form textarea{ resize: vertical; }
.enroll__form input:focus,
.enroll__form select:focus,
.enroll__form textarea:focus{ border-color: #fff; }
.enroll__aside{ display:grid; gap: 24px; }
.enroll__aside-block{
padding: 26px;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
display:grid; gap: 12px;
}
.enroll__paths{ display:grid; gap: 10px; }
.enroll__paths a{
display:flex; justify-content:space-between; align-items:center;
padding: 12px 14px;
border: 1px solid var(--line-2);
border-radius: 999px;
font-family: var(--ff-mono);
font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--ink-soft);
transition: border-color .3s, color .3s, background .3s;
}
.enroll__paths a:hover{ border-color: #fff; color:#fff; background: rgba(255,255,255,.03); }
.enroll__paths em{ font-style: normal; }
.enroll__email{
font-family: var(--ff-display);
font-weight: 300;
font-size: 22px;
color: #fff;
margin: 0;
}
.enroll__note{
font-family: var(--ff-mono);
font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
color: var(--ink-mute);
line-height: 1.7;
margin: 0;
}
/* ---------- BTN ---------- */
.btn{
display:inline-flex; align-items:center; gap: 12px;
padding: 16px 24px;
font-family: var(--ff-mono);
font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
border-radius: 999px;
transition: transform .25s, background .25s, color .25s, border-color .25s, filter .25s;
border: 1px solid transparent;
white-space: nowrap;
}
.btn em{ font-style: normal; transition: transform .25s; }
.btn:hover em{ transform: translate(2px, -2px); }
.btn--silver{
background: var(--grad-chrome);
color: #000;
font-weight: 500;
}
.btn--silver:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.btn--full{ width:100%; justify-content:center; padding: 18px; }
/* ---------- FOOTER ---------- */
.footer{
padding: clamp(60px, 8vh, 100px) var(--pad-x) 30px;
background: #000;
border-top: 1px solid var(--line);
}
.footer__top{
display:grid;
grid-template-columns: auto 1fr;
gap: clamp(30px, 6vw, 80px);
align-items: end;
max-width: var(--max);
margin: 0 auto;
padding-bottom: clamp(40px, 6vh, 80px);
border-bottom: 1px solid var(--line);
}
.footer__brand{ display:flex; align-items:center; gap: 16px; }
.footer__brand-mark{ width: 64px; height: 64px; display:grid; place-items:center; }
.footer__brand-mark img{ max-width:100%; max-height:100%; object-fit: contain; }
.footer__brand-text{ display:grid; gap: 4px; }
.footer__brand-text b{
font-family: var(--ff-display);
font-weight: 500;
font-size: 14px;
letter-spacing: .25em;
color: #fff;
}
.footer__brand-text i{
font-style: normal;
font-family: var(--ff-mono);
font-size: 10px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--ink-mute);
}
.footer__manifesto{
font-size: 14px;
color: var(--ink-soft);
max-width: 60ch;
margin: 0;
line-height: 1.65;
}
.footer__cols{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: var(--max);
margin: 0 auto;
padding: clamp(40px, 6vh, 80px) 0;
}
.footer__col h6{
font-family: var(--ff-mono);
font-weight: 400;
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--silver);
margin: 0 0 16px;
}
.footer__col ul{ display:grid; gap: 10px; }
.footer__col a{
font-family: var(--ff-display);
font-weight: 300;
font-size: 14px;
color: var(--ink-soft);
transition: color .25s;
}
.footer__col a:hover{ color:#fff; }
.footer__bottom{
display:flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 14px;
max-width: var(--max);
margin: 0 auto;
padding-top: 26px;
border-top: 1px solid var(--line);
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
color: var(--ink-mute);
}
.footer__bottom-tag{ color: var(--silver); }
/* ---------- REVEALS ---------- */
[data-reveal]{
opacity: 0;
transform: translateY(28px);
transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
will-change: opacity, transform;
}
[data-reveal].is-in{
opacity: 1;
transform: translateY(0);
}
[data-reveal-stagger] > *{
opacity: 0;
transform: translateY(22px);
transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
[data-reveal-stagger].is-in > *{ opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-in > *:nth-child(1){ transition-delay: 0s }
[data-reveal-stagger].is-in > *:nth-child(2){ transition-delay: .08s }
[data-reveal-stagger].is-in > *:nth-child(3){ transition-delay: .16s }
[data-reveal-stagger].is-in > *:nth-child(4){ transition-delay: .24s }
[data-reveal-stagger].is-in > *:nth-child(5){ transition-delay: .32s }
[data-reveal-stagger].is-in > *:nth-child(6){ transition-delay: .40s }
[data-reveal-stagger].is-in > *:nth-child(7){ transition-delay: .48s }
[data-reveal-stagger].is-in > *:nth-child(8){ transition-delay: .56s }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px){
.nav__links{ display:none; }
.nav__cta{ display:none; }
.nav__hamburger{ display: block; }
.nav__inner{ grid-template-columns: auto 1fr auto; }
.halves{ grid-template-columns: 1fr; }
.doctrine__pillars{ grid-template-columns: 1fr; }
.pillar{ border-right: 0; }
.pillar:nth-last-child(-n+2){ border-bottom: 1px solid var(--line); }
.pillar:last-child{ border-bottom: 0; }
.faculty{ grid-template-columns: repeat(2, 1fr); }
.section__content--stats{ grid-template-columns: repeat(2, 1fr); }
.stat:nth-child(2n){ border-right: 0; }
.stat:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
.curriculum{ grid-template-columns: repeat(2, 1fr); }
.curriculum-card{ border-right: 1px solid rgba(0,0,0,.10); }
.curriculum-card:nth-child(2n){ border-right: 0; }
.library{ grid-template-columns: repeat(2, 1fr); }
.circle-grid{ grid-template-columns: repeat(2, 1fr); }
.enroll__grid{ grid-template-columns: 1fr; }
.enroll__form{ grid-template-columns: 1fr; }
.footer__top{ grid-template-columns: 1fr; align-items: start; }
.footer__cols{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
:root{ --pad-y: 80px; }
.hero__title{ font-size: clamp(22px, 6.5vw, 32px); }
.hero__crest{ width: 140px; }
.section__index{ position: static; padding-bottom: 18px; }
.section__index::before{ display:none; }
.faculty{ grid-template-columns: 1fr; }
.section__content--stats{ grid-template-columns: 1fr; }
.stat{ border-right: 0; }
.curriculum{ grid-template-columns: 1fr; }
.curriculum-card{ border-right: 0; }
.library{ grid-template-columns: 1fr; }
.circle-grid{ grid-template-columns: 1fr; }
.circle-card{ border-right: 0; }
.footer__cols{ grid-template-columns: 1fr; }
}
/* mobile nav */
body.is-menu-open{ overflow: hidden; }
.nav.is-menu-open .nav__links{
display:flex;
flex-direction: column;
position: fixed;
inset: 64px 0 0 0;
background: rgba(0,0,0,.96);
backdrop-filter: blur(20px);
padding: 40px var(--pad-x);
gap: 22px;
font-size: 13px;
align-items: flex-start;
border-top: 1px solid var(--line);
}
.nav.is-menu-open .nav__cta{
display:flex;
position: fixed;
bottom: 24px; left: var(--pad-x); right: var(--pad-x);
justify-content: center;
}
@media (prefers-reduced-motion: reduce){
*{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* =====================================================================
v2 ADDITIONS — translucent hero crest, faculty videos, field studies
===================================================================== */
/* translucent culebra mark already includes its own silver halo —
strip the extra drop-shadow we added for the solid logo */
.hero__crest--glow{ filter: none; }
/* faculty card with footage — poster by default, video on hover/in-view */
.faculty-card{ overflow: hidden; }
.faculty-card__media{
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: #050608;
border-bottom: 1px solid var(--line);
}
.faculty-card__poster{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(.35) contrast(1.05) brightness(.65);
transition: filter .35s ease, transform .6s ease;
}
.faculty-card__video{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .4s ease;
}
.faculty-card--video:hover .faculty-card__poster,
.faculty-card--video.is-playing .faculty-card__poster{
filter: grayscale(0) contrast(1.05) brightness(.9);
transform: scale(1.02);
}
.faculty-card--video:hover .faculty-card__video,
.faculty-card--video.is-playing .faculty-card__video{
opacity: 1;
}
.faculty-card__live{
position: absolute; top: 12px; left: 12px;
font-family: var(--ff-mono);
font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
color: #fff;
padding: 5px 10px;
background: rgba(0,0,0,.55);
backdrop-filter: blur(8px);
border-radius: 999px;
border: 1px solid rgba(255,255,255,.20);
z-index: 2;
}
.faculty-card__placeholder{
position: absolute; inset: 0;
display: grid; place-items: center;
background:
radial-gradient(ellipse at 50% 35%, #1a1d22, #050607 80%),
repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
font-family: var(--ff-display);
font-weight: 200;
font-size: clamp(48px, 5vw, 84px);
letter-spacing: .12em;
color: var(--silver-2);
}
.faculty-card__placeholder--council{
font-family: var(--ff-mono);
font-size: 56px; font-weight: 300; letter-spacing: 0;
color: var(--silver);
}
.faculty-card--council .faculty-card__placeholder{
background:
radial-gradient(ellipse at 50% 40%, rgba(180,200,230,.10), transparent 70%),
radial-gradient(ellipse at 50% 35%, #1a1d22, #050607 80%);
}
/* clean up the old emoji-based photo container if any leftover */
.faculty-card__photo{ display: none; }
/* tighten faculty grid to 4 columns (12 cards now) */
.faculty{ grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1300px){ .faculty{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px){ .faculty{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .faculty{ grid-template-columns: 1fr; } }
/* =====================================================================
FIELD STUDIES — horizontal scroll-snap gallery of autoplay loops
===================================================================== */
.field{
position: relative;
padding: clamp(80px, 12vh, 140px) 0;
background: linear-gradient(180deg, #060708 0%, #0e1014 100%);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.field::before{
content:""; position:absolute; inset:0;
background: radial-gradient(ellipse at 50% 0%, rgba(180,200,230,.06), transparent 60%);
pointer-events:none;
}
.field__head{
display:grid; gap: 16px;
max-width: var(--max);
margin: 0 auto clamp(40px, 5vh, 60px);
padding: 0 var(--pad-x);
position: relative; z-index: 2;
}
.field__title{
font-family: var(--ff-display);
font-weight: 200;
font-size: clamp(30px, 4.6vw, 64px);
line-height: 1.05;
letter-spacing: -.02em;
color: #fff;
margin: 0;
max-width: 22ch;
}
.field__lede{
font-size: clamp(15px, 1.1vw, 18px);
color: var(--silver);
max-width: 64ch;
margin: 0;
}
.field__grid{
display:flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 0 var(--pad-x) clamp(20px, 3vh, 40px);
scrollbar-width: none;
position: relative; z-index: 2;
}
.field__grid::-webkit-scrollbar{ display: none; }
.field__tile{
flex: 0 0 clamp(240px, 28vw, 380px);
margin: 0;
border-radius: var(--r-md);
overflow: hidden;
position: relative;
scroll-snap-align: start;
border: 1px solid var(--line);
background: #050608;
aspect-ratio: 9 / 16;
transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.field__tile:hover{
transform: translateY(-4px);
border-color: var(--line-2);
box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 60px rgba(180,200,230,.06);
}
.field__video{
width: 100%; height: 100%;
object-fit: cover;
display: block;
background: #050608;
}
.field__cap{
position: absolute; left: 14px; right: 14px; bottom: 14px;
display:flex; justify-content: space-between; align-items: flex-end;
gap: 10px;
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
color: #fff;
padding: 10px 12px;
background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
border-radius: var(--r-sm);
pointer-events: none;
}
.field__cap-num{ color: var(--silver); }
.field__cap-label{ text-align: right; max-width: 22ch; line-height: 1.4; }
.field__footnote{
text-align: center;
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
color: var(--ink-mute);
margin: 12px var(--pad-x) 0;
position: relative; z-index: 2;
}
@media (max-width: 700px){
.field__tile{ flex: 0 0 78vw; }
}
/* =====================================================================
v3 ADDITIONS
- Faculty PHOTO cards (static image, hover zoom)
- Full-bleed background video on Doctrine + Circle sections
- Atmospheric horizontal photo marquee strip
- Proof bar marquee animation
- Global subtle motion (gradient drift, stat pulse, hero overlay shimmer)
===================================================================== */
/* faculty PHOTO card — uses the same photo behavior as the video poster
but without the video layer */
.faculty-card--photo .faculty-card__poster{
filter: grayscale(.10) contrast(1.05) brightness(.85);
}
.faculty-card--photo:hover .faculty-card__poster{
filter: grayscale(0) contrast(1.05) brightness(.95);
transform: scale(1.04);
}
.faculty-card--photo .faculty-card__media::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55));
pointer-events: none;
}
/* =====================================================================
SECTION BACKGROUND VIDEO (full-bleed under content with gradient veil)
===================================================================== */
.section--doctrine, .section--circle{ overflow: hidden; }
.section__bg-video{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(.6) contrast(1.05) brightness(.55);
z-index: 0;
}
.section__bg-video--light{
filter: grayscale(.4) contrast(1.05) brightness(.85);
opacity: .75;
}
.section__bg-veil{
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 25%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.95) 100%),
radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.3) 100%);
z-index: 1;
}
.section__bg-veil--light{
background:
linear-gradient(180deg, rgba(238,240,244,.6) 0%, rgba(238,240,244,.4) 30%, rgba(238,240,244,.65) 70%, rgba(238,240,244,.92) 100%);
}
.section--doctrine .section__index,
.section--doctrine .section__content,
.section--circle .section__index,
.section--circle .section__content{ position: relative; z-index: 2; }
/* =====================================================================
ATMOSPHERIC PHOTO MARQUEE — keepers + animals strip
===================================================================== */
.atmos{
position: relative;
background: #000;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
padding: clamp(40px, 6vh, 80px) 0;
}
.atmos::before, .atmos::after{
content:""; position:absolute; top:0; bottom:0; width: 14vw; z-index: 2;
pointer-events:none;
}
.atmos::before{ left:0; background: linear-gradient(90deg, #000 0%, transparent 100%); }
.atmos::after{ right:0; background: linear-gradient(90deg, transparent 0%, #000 100%); }
.atmos__track{
display:flex; gap: 16px;
width: max-content;
animation: atmosMarquee 80s linear infinite;
will-change: transform;
}
.atmos:hover .atmos__track{ animation-play-state: paused; }
.atmos__cell{
flex: 0 0 clamp(280px, 32vw, 460px);
margin: 0;
position: relative;
border-radius: var(--r-md);
overflow: hidden;
border: 1px solid var(--line);
aspect-ratio: 4 / 3;
background: #050608;
}
.atmos__cell img{
width: 100%; height: 100%;
object-fit: cover;
display: block;
filter: grayscale(.2) contrast(1.05) brightness(.75);
transition: filter .5s ease, transform .8s ease;
}
.atmos__cell:hover img{
filter: grayscale(0) contrast(1.05) brightness(.95);
transform: scale(1.04);
}
.atmos__cell figcaption{
position: absolute; bottom: 0; left: 0; right: 0;
padding: 14px 16px;
background: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--silver);
}
@keyframes atmosMarquee{
from{ transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 700px){
.atmos__cell{ flex: 0 0 80vw; }
}
/* =====================================================================
PROOF BAR MARQUEE
===================================================================== */
.proof{ overflow: hidden; padding: 18px 0; }
.proof__inner{
display: inline-flex;
flex-wrap: nowrap;
gap: clamp(36px, 4vw, 64px);
white-space: nowrap;
animation: proofMarquee 50s linear infinite;
padding-left: 100%; /* start off-screen right, scroll left */
will-change: transform;
}
.proof:hover .proof__inner{ animation-play-state: paused; }
@keyframes proofMarquee{
from{ transform: translate3d(0, 0, 0); }
to { transform: translate3d(-100%, 0, 0); }
}
.proof__inner span{ flex-shrink: 0; }
/* dot separators between items */
.proof__inner span + span::before{
content:"·";
margin-right: clamp(36px, 4vw, 64px);
color: var(--silver);
}
/* =====================================================================
GLOBAL MOTION POLISH
===================================================================== */
/* slow drifting silver radial behind dark sections (subtle) */
.section--doctrine::before,
.section--governance::before,
.section--enroll::before,
.section--faculty::before,
.section--library::before{
content:""; position: absolute; inset: -10%;
background: radial-gradient(ellipse at 30% 30%, rgba(180,200,230,.06), transparent 50%);
pointer-events: none; z-index: 0;
animation: ambientDrift 24s ease-in-out infinite alternate;
}
@keyframes ambientDrift{
0% { transform: translate(0,0) scale(1); opacity: .6; }
50% { transform: translate(4%, -3%) scale(1.05); opacity: 1; }
100% { transform: translate(-3%, 5%) scale(0.98); opacity: .7; }
}
/* faint pulse on stat numbers when in view (already counted up) */
.stat__num{
background: linear-gradient(180deg, var(--platinum) 0%, var(--silver-2) 60%, var(--ink-mute) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 100% 200%;
animation: statShimmer 6s ease-in-out infinite;
}
@keyframes statShimmer{
0%, 100%{ background-position: 0% 0%; }
50% { background-position: 0% 100%; }
}
/* hero progress bar — pulsing right edge dot */
.hero__bottom-bar i::after{
content:""; position:absolute; right: -2px; top: -3px; width: 7px; height: 7px;
border-radius: 50%; background: #fff;
box-shadow: 0 0 12px rgba(255,255,255,.8);
animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse{
0%,100% { transform: scale(1); opacity: .9; }
50% { transform: scale(1.4); opacity: 1; }
}
/* nav silver mark — subtle hover scale */
.nav__brand-mark img{ transition: transform .35s ease, filter .35s ease; }
.nav__brand:hover .nav__brand-mark img{ transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(180,200,230,.4)); }
/* CTA buttons — silver shimmer on hover */
.btn--silver{
background-size: 200% 100%;
background-position: 0% 0%;
transition: background-position .6s ease, transform .25s ease, filter .25s ease;
}
.btn--silver:hover{
background-position: 100% 0%;
}
/* faculty photo card — inner border glow on hover */
.faculty-card{ position: relative; }
.faculty-card::after{
content:""; position:absolute; inset:0; border-radius: var(--r-md);
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(180,200,230,0);
transition: box-shadow .35s ease;
}
.faculty-card:hover::after{
box-shadow: inset 0 0 0 1px rgba(180,200,230,.35), 0 0 40px rgba(180,200,230,.12);
}
/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
.atmos__track, .proof__inner{ animation: none !important; }
.section--doctrine::before,
.section--governance::before,
.section--enroll::before,
.section--faculty::before,
.section--library::before{ animation: none !important; }
.stat__num{ animation: none !important; }
.hero__bottom-bar i::after{ animation: none !important; }
}
/* =====================================================================
v3.1 — PREDATOR-ENERGY POLISH (slick institutional + primal)
- Cinematic color grade on inline videos (CSS filter, no re-encode)
- Snap-fast hover transitions (predator strike timing)
- Tighter marquee tempo
- Subtle "stalk → strike" pulse on faculty cards in view
===================================================================== */
/* cinematic grade — applied to all inline videos */
.field__video,
.faculty-card__video,
.section__bg-video{
filter: contrast(1.15) saturate(.78) brightness(.92);
}
.field__tile:hover .field__video,
.faculty-card--video.is-playing .faculty-card__video{
filter: contrast(1.10) saturate(.95) brightness(1.00);
transition: filter .25s cubic-bezier(.85, 0, .15, 1);
}
/* snap-fast hover transitions on cards (predator strike curve) */
.faculty-card{
transition:
border-color .18s cubic-bezier(.85, 0, .15, 1),
transform .18s cubic-bezier(.85, 0, .15, 1),
box-shadow .25s cubic-bezier(.85, 0, .15, 1);
}
.faculty-card__poster{
transition:
filter .22s cubic-bezier(.85, 0, .15, 1),
transform .35s cubic-bezier(.2, .85, .25, 1);
}
.faculty-card__video{
transition: opacity .22s cubic-bezier(.85, 0, .15, 1);
}
.faculty-card:hover{ transform: translateY(-5px); }
/* field tile snap on hover (faster lift, cleaner shadow) */
.field__tile{
transition:
transform .22s cubic-bezier(.85, 0, .15, 1),
border-color .22s cubic-bezier(.85, 0, .15, 1),
box-shadow .35s cubic-bezier(.2, .85, .25, 1);
}
/* citadel cards inherit faster timing too */
.halves__card,
.curriculum-card,
.library-card,
.circle-card{
transition:
border-color .22s cubic-bezier(.85, 0, .15, 1),
transform .22s cubic-bezier(.85, 0, .15, 1),
box-shadow .35s cubic-bezier(.2, .85, .25, 1),
background .25s ease;
}
/* tighten marquees — institutional urgency */
.proof__inner { animation-duration: 36s; }
.atmos__track { animation-duration: 60s; }
/* stalk → strike pulse on faculty cards (one subtle pulse on viewport entry) */
@keyframes strikePulse{
0% { box-shadow: 0 0 0 0 rgba(180,200,230,0); }
35% { box-shadow: 0 0 0 0 rgba(180,200,230,.12); }
60% { box-shadow: 0 0 0 14px rgba(180,200,230,0); }
100% { box-shadow: 0 0 0 0 rgba(180,200,230,0); }
}
.faculty-card.is-in{ animation: strikePulse 1.4s ease-out both; }
/* sharp accent line under section titles in dark sections — institutional */
.section--doctrine .section__title::after,
.section--faculty .section__title::after,
.section--library .section__title::after,
.section--governance .section__title::after,
.section--enroll .section__title::after,
.field__title::after{
content:"";
display: block;
margin-top: 16px;
width: 56px;
height: 1px;
background: linear-gradient(90deg, var(--silver), transparent 80%);
animation: lineDraw 1.4s cubic-bezier(.85, 0, .15, 1) .2s both;
}
@keyframes lineDraw{
from{ width: 0; opacity: 0; }
to { width: 56px; opacity: 1; }
}
/* hero progress bar — sharper end edge */
.hero__bottom-bar i{ transition: width .08s linear; }
@media (prefers-reduced-motion: reduce){
.faculty-card.is-in{ animation: none !important; }
.section--doctrine .section__title::after,
.section--faculty .section__title::after,
.section--library .section__title::after,
.section--governance .section__title::after,
.section--enroll .section__title::after,
.field__title::after{ animation: none !important; width: 56px; opacity: 1; }
}
/* =====================================================================
v4 — APEX SPECIMENS section + AI background imagery wiring
===================================================================== */
/* shared section background image (curriculum + library now use it) */
.section--curriculum, .section--library{ overflow: hidden; position: relative; }
.section__bg-img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(.45) contrast(1.05) brightness(.62);
z-index: 0;
}
.section--library .section__bg-img{ filter: grayscale(.5) contrast(1.05) brightness(.55); }
.section--curriculum .section__bg-img{ filter: grayscale(.4) contrast(1.05) brightness(.85); }
.section--curriculum .section__index,
.section--curriculum .section__content,
.section--library .section__index,
.section--library .section__content{ position: relative; z-index: 2; }
/* light-veil over light-themed (curriculum) section so text stays readable */
.section--curriculum .section__bg-veil--light{
background:
linear-gradient(180deg, rgba(238,240,244,.78) 0%, rgba(238,240,244,.55) 30%, rgba(238,240,244,.78) 70%, rgba(238,240,244,.95) 100%);
}
/* dark veil over library */
.section--library .section__bg-veil{
background:
linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.92) 100%);
}
/* =====================================================================
APEX SPECIMENS SECTION
===================================================================== */
.specimens{
position: relative;
background: #000;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* full-bleed predator hero */
.specimens__hero{
position: relative;
height: clamp(420px, 70vh, 720px);
overflow: hidden;
}
.specimens__hero-img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(.25) contrast(1.10) brightness(.78);
transform: scale(1.05);
animation: heroPan 30s ease-in-out infinite alternate;
}
@keyframes heroPan{
from{ transform: scale(1.04) translate(0, 0); }
to { transform: scale(1.10) translate(-2%, 1%); }
}
.specimens__hero-veil{
position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 40%, transparent 70%),
linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.0) 30%, rgba(0,0,0,.85) 100%);
}
.specimens__hero-content{
position: absolute;
left: var(--pad-x);
bottom: clamp(40px, 8vh, 80px);
max-width: 60ch;
display:grid; gap: 16px;
z-index: 2;
}
.specimens__hero-title{
font-family: var(--ff-display);
font-weight: 200;
font-size: clamp(32px, 4.6vw, 64px);
line-height: 1.02;
letter-spacing: -.02em;
color: #fff;
margin: 0;
}
.specimens__hero-sub{
font-size: clamp(15px, 1.1vw, 18px);
color: var(--silver);
max-width: 56ch;
margin: 0;
}
/* species grid */
.specimens__grid-wrap{
padding: clamp(60px, 8vh, 100px) var(--pad-x);
max-width: var(--max);
margin: 0 auto;
}
.specimens__grid{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.specimen{
display:grid; grid-template-rows: auto 1fr;
border: 1px solid var(--line);
border-radius: var(--r-md);
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
transition: border-color .22s cubic-bezier(.85,0,.15,1), transform .22s cubic-bezier(.85,0,.15,1), box-shadow .35s cubic-bezier(.2,.85,.25,1);
}
.specimen:hover{
border-color: var(--line-2);
transform: translateY(-4px);
box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 60px rgba(180,200,230,.06);
}
.specimen__media{
aspect-ratio: 16 / 9;
overflow: hidden;
position: relative;
background: #050608;
border-bottom: 1px solid var(--line);
}
.specimen__media img{
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(.20) contrast(1.08) brightness(.82);
transition: filter .35s ease, transform .8s cubic-bezier(.2,.85,.25,1);
}
.specimen:hover .specimen__media img{
filter: grayscale(0) contrast(1.10) brightness(.95);
transform: scale(1.05);
}
.specimen__body{
padding: 18px 20px 22px;
display:grid; gap: 8px;
}
.specimen__sci{
font-family: var(--ff-serif);
font-style: italic;
font-weight: 400;
font-size: 13px;
color: var(--silver);
letter-spacing: .01em;
}
.specimen__body h4{
font-family: var(--ff-display);
font-weight: 300;
font-size: clamp(18px, 1.5vw, 22px);
letter-spacing: -.005em;
color: #fff;
margin: 0;
}
.specimen__body p{
font-size: 13px;
line-height: 1.6;
color: var(--ink-soft);
margin: 4px 0 0;
max-width: 38ch;
}
.specimens__footnote{
text-align: center;
font-family: var(--ff-mono);
font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
color: var(--ink-mute);
margin: clamp(40px, 6vh, 60px) 0 0;
}
@media (max-width: 1100px){ .specimens__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .specimens__grid{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){
.specimens__hero-img{ animation: none !important; transform: scale(1.04); }
}
/* =====================================================================
v4.1 — AI VIDEO clips wired into Specimens section + hero
===================================================================== */
/* hero video — same treatment as the previous img element */
video.specimens__hero-img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(.25) contrast(1.10) brightness(.78);
transform: scale(1.05);
animation: heroPan 30s ease-in-out infinite alternate;
}
/* specimen card video — mirror img treatment */
.specimen__media video{
width: 100%; height: 100%;
object-fit: cover;
display: block;
filter: grayscale(.20) contrast(1.08) brightness(.82);
transition: filter .35s ease, transform .8s cubic-bezier(.2,.85,.25,1);
}
.specimen:hover .specimen__media video{
filter: grayscale(0) contrast(1.10) brightness(.95);
transform: scale(1.05);
}
/* "▶ MOTION" badge on video specimen cards */
.specimen--video .specimen__media::after{
content: "Motion";
position: absolute;
top: 12px; left: 12px;
font-family: var(--ff-mono);
font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
color: #fff;
padding: 5px 10px;
background: rgba(0,0,0,.55);
backdrop-filter: blur(8px);
border-radius: 999px;
border: 1px solid rgba(255,255,255,.20);
z-index: 2;
pointer-events: none;
}
/* =====================================================================
v5 — FULL TYPOGRAPHIC + HERO REDESIGN
- Font token swap: --ff-mono now points to Inter (no more "computer font")
- Intro loader (TI-style) for Culebra
- Rotating hero carousel (augment-style) — 5 species tiles
- Scroll-pulse shimmer sweep on titles
- Mobile single-tile hero
===================================================================== */
/* font token redirect — eliminates the JetBrains Mono "computer font" look
while keeping every existing letter-spaced eyebrow/label rule cascading. */
:root{
--ff-mono: "Inter", "Helvetica Neue", system-ui, sans-serif;
--ff-display: "Inter", "Helvetica Neue", system-ui, sans-serif;
--ff-body: "Inter", "Helvetica Neue", system-ui, sans-serif;
--ff-serif: "Cormorant Garamond", "Times New Roman", serif;
}
/* anywhere we used --ff-mono, slightly bump weight so letter-spaced labels still feel
precise and premium without monospace tracking. */
.eyebrow,
.nav__btn,
.nav__links,
.nav__parent,
.nav__brand-text b,
.nav__brand-text i,
.btn,
.section__index,
.hero__count,
.hero__eyebrow,
.hero__bottom,
.faculty-card__role,
.faculty-card__live,
.faculty-card__meta li,
.specimens__hero-content .eyebrow,
.specimen__sci,
.specimen--video .specimen__media::after,
.field__cap-num,
.field__cap-label,
.field__footnote,
.atmos__cell figcaption,
.proof__inner,
.curriculum-card__tag,
.curriculum-card__meta,
.library-card__num,
.library-card__status,
.library__footnote,
.governance__label,
.dashboard__head,
.contact__form i,
.enroll__form i,
.enroll__paths a,
.enroll__note,
.contact__paths a,
.footer__col h6,
.footer__bottom,
.footer__brand-text b,
.footer__brand-text i,
.faculty__footnote,
.experts-meta i,
.expert-card__num,
.expert-card__status,
.expert-card__meta li,
.compare__col-head,
.parallel__row span,
.core__stats i,
.core__chips li,
.halves__num,
.halves__cta,
.pillar__num,
.dashboard__foot{
font-weight: 500;
font-feature-settings: "ss01" on;
}
/* =====================================================================
INTRO LOADER (TI-style)
===================================================================== */
body.is-loading{ overflow: hidden; }
.loader{
position: fixed; inset: 0;
background: #000;
z-index: 9999;
display: grid; place-items: center;
isolation: isolate;
}
.loader__grid{
position: absolute; inset: 0;
background:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0/100% 80px,
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0/80px 100%,
radial-gradient(ellipse at center, rgba(180,200,230,.08), transparent 60%);
mask-image: radial-gradient(ellipse at center, black, transparent 75%);
}
.loader__inner{
width: min(900px, 92vw);
display: grid;
gap: clamp(40px, 8vh, 80px);
text-align: center;
position: relative;
}
.loader__top, .loader__bottom{
display: flex; justify-content: space-between;
font-size: 10px;
letter-spacing: .3em;
color: var(--ink-mute);
text-transform: uppercase;
font-weight: 500;
}
.loader__bottom{ gap: 24px; }
.loader__center{ display: grid; gap: clamp(24px, 4vh, 48px); }
.loader__wordmark{
display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
gap: clamp(8px, 1.4vw, 18px);
font-family: var(--ff-display);
font-size: clamp(28px, 6vw, 64px);
font-weight: 200;
letter-spacing: .15em;
color: var(--platinum);
}
.loader__wordmark span{
display: inline-block;
opacity: 0;
transform: translateY(14px);
animation: letterIn .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.loader__wordmark span:nth-child(2){ animation-delay:.05s }
.loader__wordmark span:nth-child(3){ animation-delay:.10s }
.loader__wordmark span:nth-child(4){ animation-delay:.15s }
.loader__wordmark span:nth-child(5){ animation-delay:.20s }
.loader__wordmark span:nth-child(6){ animation-delay:.25s }
.loader__wordmark span:nth-child(7){ animation-delay:.30s }
.loader__wordmark span:nth-child(8){ animation-delay:.35s }
.loader__wordmark span:nth-child(9){ animation-delay:.40s }
.loader__wordmark span:nth-child(10){ animation-delay:.45s }
.loader__wordmark span:nth-child(11){ animation-delay:.50s }
.loader__wordmark span:nth-child(12){ animation-delay:.55s }
.loader__wordmark span:nth-child(13){ animation-delay:.60s }
.loader__wordmark span:nth-child(14){ animation-delay:.65s }
.loader__wordmark span:nth-child(15){ animation-delay:.70s }
.loader__sep{ color: var(--ink-mute); font-weight: 300; }
@keyframes letterIn{ to{ opacity: 1; transform: translateY(0); } }
.loader__progress{
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 18px;
font-size: 12px;
letter-spacing: .2em;
color: var(--silver);
font-weight: 500;
}
.loader__count{ font-variant-numeric: tabular-nums; }
.loader__count--end{ color: var(--ink-deep); }
.loader__bar{
position: relative;
height: 1px;
background: rgba(255,255,255,.08);
overflow: hidden;
}
.loader__bar i{
position: absolute; left: 0; top: 0; height: 100%;
width: 0%;
background: linear-gradient(90deg, transparent, #fff 50%, transparent);
background-size: 200% 100%;
animation: barShimmer 1.4s linear infinite;
}
@keyframes barShimmer{
0%{ background-position: 0 0; }
100%{ background-position: -200% 0; }
}
.loader__lines{
font-size: 11px;
letter-spacing: .25em;
color: var(--ink-mute);
text-transform: uppercase;
display: grid; gap: 6px; min-height: 90px;
font-weight: 500;
}
.loader__lines li{ opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; list-style: none; }
.loader__lines li.is-on{ opacity: 1; transform: translateY(0); color: var(--silver); }
.loader.is-out{
pointer-events: none;
animation: loaderOut .9s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes loaderOut{
0%{ opacity: 1; clip-path: inset(0 0 0 0); }
100%{ opacity: 0; clip-path: inset(50% 0 50% 0); }
}
/* =====================================================================
ROTATING HERO (augment-style)
===================================================================== */
.rotor{
position: relative;
background: #000;
overflow: hidden;
padding: clamp(110px, 14vh, 160px) var(--pad-x) clamp(60px, 8vh, 100px);
border-bottom: 1px solid var(--line);
}
.rotor::before{
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse at 30% 50%, rgba(180,200,230,.08), transparent 60%);
pointer-events: none;
}
.rotor__inner{
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: clamp(40px, 6vw, 100px);
align-items: center;
max-width: var(--max);
margin: 0 auto;
position: relative;
min-height: 70vh;
}
/* LEFT: copy column */
.rotor__copy{ display: grid; gap: 24px; max-width: 60ch; }
.rotor__title{
font-family: var(--ff-display);
font-weight: 200;
font-size: clamp(36px, 5vw, 78px);
line-height: 1.0;
letter-spacing: -.025em;
color: var(--platinum);
margin: 4px 0 0;
max-width: 18ch;
}
.rotor__sub{
font-size: clamp(15px, 1.15vw, 18px);
color: var(--silver);
max-width: 60ch;
margin: 0;
line-height: 1.55;
}
.rotor__ctas{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.rotor__pills{
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: 8px;
}
.rotor__pills span{
font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
color: var(--silver);
padding: 8px 14px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
background: rgba(255,255,255,.02);
font-weight: 500;
}
/* RIGHT: stage with rotating tiles + dots */
.rotor__stage{
display: grid;
gap: 16px;
align-items: end;
}
.rotor__tiles{
position: relative;
aspect-ratio: 16 / 11;
border-radius: var(--r-md);
overflow: hidden;
background: #050608;
border: 1px solid var(--line-2);
box-shadow:
0 30px 80px rgba(0,0,0,.55),
0 0 60px rgba(180,200,230,.06);
}
.rotor-tile{
position: absolute; inset: 0;
margin: 0;
opacity: 0;
transform: scale(1.04);
transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform 1.4s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
}
.rotor-tile.is-active{
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.rotor-tile__video{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(.20) contrast(1.10) brightness(.82);
}
.rotor-tile__veil{
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 55%, rgba(0,0,0,.85) 100%),
linear-gradient(90deg, rgba(0,0,0,.4) 0%, transparent 40%, transparent 100%);
}
.rotor-tile__cap{
position: absolute;
left: 22px; right: 22px; bottom: 22px;
display: grid; gap: 4px;
z-index: 2;
}
.rotor-tile__num{
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--silver);
font-weight: 500;
}
.rotor-tile__sci{
font-family: var(--ff-serif);
font-style: italic;
font-size: 14px;
color: var(--silver);
}
.rotor-tile__name{
font-family: var(--ff-display);
font-weight: 300;
font-size: clamp(22px, 2.2vw, 30px);
letter-spacing: -.005em;
color: #fff;
margin: 0;
line-height: 1.05;
}
/* DOT STRIP (clickable thumbs with progress fill) */
.rotor__dots{
display: flex; gap: 10px;
margin: 0; padding: 0;
list-style: none;
align-items: stretch;
}
.rotor__dots li{
position: relative;
flex: 1;
aspect-ratio: 16/9;
max-height: 64px;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--line);
background: #050608;
transition: border-color .3s, transform .3s, opacity .3s;
opacity: .55;
}
.rotor__dots li:hover{ opacity: .85; transform: translateY(-2px); }
.rotor__dots li.is-active{
opacity: 1;
border-color: var(--silver-2);
}
.rotor__dots li img{
width: 100%; height: 100%;
object-fit: cover;
display: block;
filter: grayscale(.30) contrast(1.05) brightness(.75);
}
.rotor__dots li.is-active img{ filter: grayscale(0) contrast(1.05) brightness(.95); }
.rotor__dots li i{
position: absolute; left: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg, var(--silver), #fff);
width: 0%;
transition: width 0s linear;
}
.rotor__dots li.is-active i{
width: 100%;
transition: width var(--rotor-duration, 6s) linear;
}
/* Mobile rotor — stacked vertical, dots become a row of small bars */
@media (max-width: 1100px){
.rotor__inner{
grid-template-columns: 1fr;
min-height: auto;
gap: 32px;
}
.rotor__copy{ max-width: none; order: 2; }
.rotor__stage{ order: 1; }
.rotor__tiles{ aspect-ratio: 4 / 5; }
.rotor-tile__cap{ left: 18px; right: 18px; bottom: 18px; }
.rotor__dots{ gap: 6px; }
.rotor__dots li{ max-height: 44px; }
}
@media (max-width: 600px){
.rotor__tiles{ aspect-ratio: 3 / 4; }
.rotor__dots li{ max-height: 36px; aspect-ratio: 4/3; }
}
/* =====================================================================
SCROLL-PULSE SHIMMER on titles
===================================================================== */
.scroll-pulse{
position: relative;
display: inline-block;
isolation: isolate;
}
.scroll-pulse::after{
content: ""; position: absolute; inset: 0;
background: linear-gradient(120deg,
transparent 30%,
rgba(255,255,255,.45) 48%,
rgba(255,255,255,.45) 52%,
transparent 70%);
background-size: 220% 100%;
background-position: 100% 0;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
opacity: 0;
}
.scroll-pulse.is-pulsing::after{
animation: scrollPulseSweep 1.4s cubic-bezier(.85, 0, .15, 1) forwards;
}
@keyframes scrollPulseSweep{
0% { opacity: 0; background-position: 100% 0; }
10% { opacity: 1; }
60% { opacity: 1; }
100% { opacity: 0; background-position: -120% 0; }
}
/* gracefully reduce motion */
@media (prefers-reduced-motion: reduce){
.rotor-tile{ transition: opacity .2s ease; transform: none !important; }
.rotor__dots li.is-active i{ width: 100%; transition: none; }
.scroll-pulse.is-pulsing::after{ animation: none !important; }
.loader__wordmark span{ animation: none !important; opacity: 1; transform: none; }
}
/* =====================================================================
v5.1 — REAL HERO VIDEOS + TILE DESIGN UPGRADE
- Richer per-tile caption (location + scene + description + faculty)
- 01 / 05 numbered indicator top-right of active tile
- Prev/Next arrow buttons
- Named dot strip (replaces image thumbnails)
===================================================================== */
/* tile caption — augment-style hierarchy */
.rotor-tile__cap{
position: absolute;
left: clamp(20px, 3vw, 32px);
right: clamp(20px, 3vw, 32px);
bottom: clamp(20px, 3vh, 32px);
display: grid; gap: 8px;
z-index: 2;
max-width: 70ch;
}
.rotor-tile__loc{
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--silver);
font-weight: 500;
}
.rotor-tile__name{
font-family: var(--ff-display);
font-weight: 300;
font-size: clamp(22px, 2.4vw, 32px);
letter-spacing: -.01em;
color: #fff;
margin: 0;
line-height: 1.05;
max-width: 24ch;
}
.rotor-tile__desc{
font-size: clamp(13px, 1vw, 15px);
color: rgba(255,255,255,.85);
line-height: 1.5;
margin: 4px 0 0;
max-width: 56ch;
}
.rotor-tile__faculty{
font-family: var(--ff-serif);
font-style: italic;
font-size: 13px;
color: var(--silver);
margin-top: 6px;
}
/* numbered counter top-right of active tile */
.rotor-tile__index{
position: absolute;
top: clamp(16px, 2.5vh, 24px);
right: clamp(20px, 3vw, 32px);
font-family: var(--ff-display);
font-weight: 200;
font-size: clamp(22px, 2vw, 30px);
letter-spacing: .04em;
color: #fff;
z-index: 2;
font-variant-numeric: tabular-nums;
}
.rotor-tile__index i{
font-style: normal;
color: rgba(255,255,255,.4);
margin: 0 4px;
font-weight: 100;
}
/* PREV / NEXT arrow buttons (sit over the tile, fade in on hover) */
.rotor__nav{
position: absolute;
top: 50%; transform: translateY(-50%);
width: 48px; height: 48px;
display: grid; place-items: center;
border: 1px solid var(--line-2);
border-radius: 50%;
background: rgba(0,0,0,.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
font-size: 28px;
line-height: 1;
cursor: pointer;
z-index: 5;
opacity: 0;
transition: opacity .35s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
.rotor__stage:hover .rotor__nav{ opacity: .85; }
.rotor__nav:hover{ opacity: 1; border-color: #fff; background: rgba(0,0,0,.7); }
.rotor__nav:active{ transform: translateY(-50%) scale(.96); }
.rotor__nav--prev{ left: clamp(8px, 1vw, 16px); }
.rotor__nav--next{ right: clamp(8px, 1vw, 16px); }
.rotor__nav span{ display: inline-block; transform: translateY(-2px); }
/* DOT STRIP rebuild — named pills with progress fill */
.rotor__dots{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin: 0; padding: 0;
list-style: none;
}
.rotor__dots li{
position: relative;
padding: 14px 16px 16px;
cursor: pointer;
border-radius: 6px;
background: rgba(255,255,255,.03);
border: 1px solid var(--line);
display: grid; gap: 4px;
transition: background .25s ease, border-color .25s ease, transform .25s ease;
overflow: hidden;
}
.rotor__dots li:hover{
background: rgba(255,255,255,.06);
border-color: var(--line-2);
transform: translateY(-2px);
}
.rotor__dots li.is-active{
background: rgba(180,200,230,.08);
border-color: var(--silver-2);
}
.rotor__dot-num{
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
}
.rotor__dots li.is-active .rotor__dot-num{ color: var(--silver); }
.rotor__dot-name{
font-family: var(--ff-display);
font-weight: 300;
font-size: 14px;
letter-spacing: -.005em;
color: var(--silver);
}
.rotor__dots li.is-active .rotor__dot-name{ color: #fff; }
.rotor__dots li i{
position: absolute; left: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg, var(--silver), #fff);
width: 0%;
transition: width 0s linear;
}
.rotor__dots li.is-active i{
width: 100%;
transition: width var(--rotor-duration, 6s) linear;
}
/* mobile dot strip — hide pill names, keep number + bar (very tight) */
@media (max-width: 700px){
.rotor__dots{ gap: 6px; }
.rotor__dots li{ padding: 10px 8px 12px; }
.rotor__dot-name{ display: none; }
.rotor__dot-num{ font-size: 9px; letter-spacing: .25em; text-align: center; }
.rotor__nav{ width: 40px; height: 40px; font-size: 22px; opacity: .7; }
}
/* === reduce-motion guards === */
@media (prefers-reduced-motion: reduce){
.rotor-tile{ transition: opacity .2s ease; transform: none !important; }
.rotor__dots li.is-active i{ transition: none; width: 100%; }
}
/* =====================================================================
v5.3 — PROMINENT CULEBRA CREST in rotor hero (moved from cobra scroll)
===================================================================== */
.rotor__crest{
width: clamp(180px, 22vw, 300px);
margin: -12px 0 8px;
filter: drop-shadow(0 0 80px rgba(180,200,230,.28));
pointer-events: none;
}
.rotor__crest img{ width: 100%; height: auto; display: block; }
/* on mobile (where copy stacks below the stage), crest centers above headline */
@media (max-width: 1100px){
.rotor__crest{
width: clamp(160px, 30vw, 240px);
margin: 0 auto 4px;
align-self: center;
}
.rotor__copy{ justify-items: center; text-align: center; }
.rotor__copy .rotor__pills{ justify-content: center; }
.rotor__copy .rotor__ctas{ justify-content: center; }
}
/* =====================================================================
v6 — GENESIS HERO (full-bleed brain-to-serpent journey)
Replaces the rotor entirely. Single, focused, flowing.
===================================================================== */
.genesis{
position: relative;
min-height: 100vh;
background: #000;
overflow: hidden;
isolation: isolate;
display: grid; place-items: center;
padding: clamp(110px, 14vh, 160px) var(--pad-x) clamp(60px, 8vh, 100px);
}
/* full-bleed video background */
.genesis__video{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: contrast(1.08) brightness(.78);
z-index: 0;
}
/* dual-direction veil so center copy stays legible regardless of frame */
.genesis__veil{
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.78) 100%),
linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.0) 35%, rgba(0,0,0,.0) 65%, rgba(0,0,0,.85) 100%);
z-index: 1;
}
.genesis__grain{
position: absolute; inset: 0; z-index: 1;
pointer-events: none; opacity: .22; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* CENTERED stack */
.genesis__inner{
position: relative; z-index: 2;
display: grid;
gap: 22px;
justify-items: center;
text-align: center;
max-width: 920px;
margin: 0 auto;
}
.genesis__crest{
width: clamp(220px, 26vw, 360px);
filter: drop-shadow(0 0 80px rgba(180,200,230,.30));
margin-bottom: 8px;
pointer-events: none;
}
.genesis__crest img{ width: 100%; height: auto; display: block; }
.genesis__title{
font-family: var(--ff-display);
font-weight: 200;
font-size: clamp(40px, 6.4vw, 96px);
line-height: 1.0;
letter-spacing: -.025em;
color: var(--platinum);
margin: 4px 0 0;
max-width: 18ch;
}
.genesis__sub{
font-size: clamp(15px, 1.2vw, 19px);
color: var(--silver);
max-width: 60ch;
margin: 0 auto;
line-height: 1.55;
}
.genesis__ctas{ display:flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.genesis__pills{
display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px;
}
.genesis__pills span{
font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
color: var(--silver);
padding: 8px 14px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
background: rgba(255,255,255,.02);
font-weight: 500;
}
/* SCROLL CUE — small animated indicator at bottom-center */
.genesis__cue{
position: absolute;
left: 50%; transform: translateX(-50%);
bottom: clamp(20px, 4vh, 40px);
z-index: 3;
display: grid; gap: 8px; justify-items: center;
font-size: 10px; letter-spacing: .35em; text-transform: uppercase;
color: var(--silver);
font-weight: 500;
text-decoration: none;
opacity: .8;
transition: opacity .3s, transform .3s;
}
.genesis__cue:hover{ opacity: 1; transform: translateX(-50%) translateY(-2px); }
.genesis__cue i{
width: 1px; height: 36px;
background: linear-gradient(180deg, var(--silver), transparent);
position: relative; overflow: hidden;
}
.genesis__cue i::after{
content: ""; position: absolute; left: -1px; top: -10px; width: 3px; height: 10px;
background: #fff;
animation: cueFall 1.8s ease-in-out infinite;
}
@keyframes cueFall{
0% { transform: translateY(0); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateY(46px); opacity: 0; }
}
/* mobile tightening */
@media (max-width: 700px){
.genesis{ padding-top: 100px; padding-bottom: 80px; }
.genesis__title{ font-size: clamp(34px, 9vw, 54px); }
.genesis__crest{ width: clamp(180px, 40vw, 240px); }
}
@media (prefers-reduced-motion: reduce){
.genesis__cue i::after{ animation: none !important; }
}
/* =====================================================================
v6.1 — CINEMATIC video section (replaces canvas scroll-sequence)
+ Loader wordmark fix (no more 2nd-line wrap)
===================================================================== */
/* CINEMATIC section — full-bleed video, single take, plays naturally */
.cinematic{
position: relative;
height: 100vh;
min-height: 600px;
background: #000;
overflow: hidden;
isolation: isolate;
}
.cinematic__video{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: contrast(1.05) brightness(.78);
z-index: 0;
}
.cinematic__veil{
position: absolute; inset: 0;
z-index: 1;
background:
linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.0) 25%, rgba(0,0,0,.0) 60%, rgba(0,0,0,.85) 100%),
linear-gradient(90deg, rgba(0,0,0,.4) 0%, transparent 50%);
}
.cinematic__inner{
position: absolute; inset: 0;
z-index: 2;
display: flex; flex-direction: column; justify-content: space-between;
padding: clamp(80px, 12vh, 120px) var(--pad-x) clamp(40px, 6vh, 60px);
pointer-events: none;
}
.cinematic__top, .cinematic__bottom{ pointer-events: auto; }
.cinematic__bottom{ display: grid; gap: 12px; max-width: 60ch; }
.cinematic__title{
font-family: var(--ff-display);
font-weight: 200;
font-size: clamp(30px, 4.4vw, 60px);
line-height: 1.05;
letter-spacing: -.02em;
color: #fff;
margin: 0;
}
.cinematic__sub{
font-size: clamp(15px, 1.1vw, 18px);
color: var(--silver);
max-width: 56ch;
margin: 0;
line-height: 1.55;
}
.cinematic__meta{
font-family: var(--ff-serif);
font-style: italic;
font-size: 14px;
color: var(--silver);
margin-top: 4px;
}
/* =====================================================================
LOADER WORDMARK — no more wrapping to second line
===================================================================== */
.loader__wordmark{
flex-wrap: nowrap; /* never break to second line */
white-space: nowrap;
/* tighter letters + smaller font on narrow viewports */
gap: clamp(2px, 0.8vw, 14px);
font-size: clamp(18px, 5vw, 56px);
letter-spacing: .12em;
/* allow letters to shrink slightly if viewport is very narrow */
min-width: 0;
}
.loader__wordmark span{ flex-shrink: 0; }
@media (max-width: 380px){
.loader__wordmark{
font-size: clamp(16px, 4.2vw, 22px);
gap: 1px;
letter-spacing: .08em;
}
}
/* loader crest above wordmark */
.loader__crest{
width: clamp(140px, 18vw, 220px);
margin: 0 auto;
filter: drop-shadow(0 0 60px rgba(180,200,230,.30));
pointer-events: none;
opacity: 0;
transform: translateY(8px);
animation: crestIn 1.2s cubic-bezier(.2,.8,.2,1) .1s forwards;
}
.loader__crest img{ width: 100%; height: auto; display: block; }
@keyframes crestIn{ to{ opacity: 1; transform: translateY(0); } }
@media (max-width: 600px){
.loader__crest{ width: clamp(120px, 32vw, 160px); }
}
@media (prefers-reduced-motion: reduce){
.loader__crest{ opacity: 1; transform: none; animation: none !important; }
}
/* =====================================================================
v6.3 — MOBILE VIDEO FRAMING
16:9 landscape videos cropped too aggressively on portrait mobile.
Shrink hero heights + tune object-position so subjects stay centered.
===================================================================== */
@media (max-width: 700px){
/* Genesis hero — brain→serpent journey, central composition */
.genesis{
min-height: 78vh;
padding-top: 96px;
padding-bottom: 60px;
}
.genesis__video{
object-position: center 38%;
}
.genesis__crest{ width: clamp(160px, 38vw, 220px); }
/* Cinematic — Tom + George + monocled cobra (subjects at frame center) */
.cinematic{
height: 75vh;
min-height: 520px;
}
.cinematic__video{
object-position: center 42%;
}
.cinematic__inner{
padding-top: 80px;
padding-bottom: 32px;
}
.cinematic__title{ font-size: clamp(24px, 7vw, 36px); }
/* Apex Specimens hero — stock crocodile (jaws + body span horizontally) */
.specimens__hero{
height: clamp(360px, 56vh, 540px);
}
.specimens__hero-img{
object-position: center 45%;
}
/* Faculty card video posters — mostly hover-only on desktop, but on mobile
a tap activates them; ensure faces aren't cropped */
.faculty-card__media video,
.faculty-card__media img{
object-position: center 30%;
}
}
/* very narrow phones — pull subjects up further */
@media (max-width: 420px){
.genesis__video{ object-position: center 32%; }
.cinematic__video{ object-position: center 38%; }
.specimens__hero-img{ object-position: center 40%; }
}
/* =====================================================================
v6.4 — Cobra cinematic full-frame on mobile (no more side-cut)
===================================================================== */
@media (max-width: 700px){
.cinematic{
height: auto;
min-height: 0;
aspect-ratio: 16 / 11; /* container respects video aspect */
padding: 0;
background: #000;
}
.cinematic__video{
object-fit: contain; /* full 16:9 frame visible */
object-position: center center;
background: #000;
}
.cinematic__inner{
padding: 56px var(--pad-x) 28px;
pointer-events: none;
}
.cinematic__top, .cinematic__bottom{
pointer-events: auto;
background: linear-gradient(180deg, rgba(0,0,0,.6), transparent 40%);
padding: 6px 12px;
border-radius: 6px;
}
.cinematic__bottom{
background: linear-gradient(180deg, transparent, rgba(0,0,0,.7) 30%);
}
.cinematic__title{ font-size: clamp(20px, 5.6vw, 28px); }
.cinematic__sub{ font-size: 13px; }
}
/* =====================================================================
v6.5 — MOBILE NAV MENU FIX
- iOS-safe scroll lock (position: fixed body + scroll restore via JS)
- Hamburger animates to X when open
- Menu top respects actual nav height + has explicit z-index
- overscroll-behavior: contain to prevent body scroll bleed
===================================================================== */
/* iOS-safe scroll lock — body stays in place, scroll position restored via JS */
body.is-menu-open{
overflow: hidden;
position: fixed;
left: 0; right: 0;
width: 100%;
}
/* fixed open menu — covers viewport below nav, explicit positioning */
.nav.is-menu-open .nav__links{
display: flex !important;
flex-direction: column;
position: fixed;
top: 56px;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
background: rgba(0,0,0,.96);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
padding: 32px var(--pad-x) 120px;
gap: 18px;
font-size: 14px;
align-items: flex-start;
border-top: 1px solid var(--line);
z-index: 200;
overflow-y: auto;
overscroll-behavior: contain;
pointer-events: auto;
}
.nav.is-menu-open .nav__links a{
display: block;
width: 100%;
padding: 14px 0;
pointer-events: auto;
color: #fff;
}
/* Hamburger animates to X when open */
.nav__hamburger span{ transition: transform .25s ease, opacity .15s ease, top .25s ease; }
.nav.is-menu-open .nav__hamburger span:nth-child(1){
top: 18px; transform: rotate(45deg);
}
.nav.is-menu-open .nav__hamburger span:nth-child(2){
opacity: 0;
}
.nav.is-menu-open .nav__hamburger span:nth-child(3){
top: 18px; transform: rotate(-45deg);
}
/* Bigger tap target for hamburger — easier to hit on phone */
.nav__hamburger{
width: 44px; height: 44px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.nav__hamburger span{ left: 12px; right: 12px; }
.nav__hamburger span:nth-child(1){ top: 17px; }
.nav__hamburger span:nth-child(2){ top: 22px; }
.nav__hamburger span:nth-child(3){ top: 27px; }
.nav.is-menu-open .nav__hamburger span:nth-child(1){ top: 22px; transform: rotate(45deg); }
.nav.is-menu-open .nav__hamburger span:nth-child(3){ top: 22px; transform: rotate(-45deg); }