/* ISRA marketing site — page-level styles.
Component-level styles live inline in JSX (kept small + colocated). */
@import url('colors_and_type.css');
:root {
/* console cyan — shared by status dots/corners across pages */
--crew-cyan: #6fd2e0;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--isra-parchment);
color: var(--isra-ink);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
line-height: 1.5;
/* Transform-based reveals (translateX) must never create sideways scroll. */
overflow-x: clip;
}
a {
color: inherit;
text-decoration: none;
}
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }
button {
font-family: var(--font-sans);
cursor: pointer;
}
::selection {
background: var(--isra-sun-300);
color: var(--isra-navy-900);
}
/* --- Layout containers --- */
.container {
max-width: 1240px;
margin: 0 auto;
padding: 0 32px;
}
.section {
padding: 96px 0;
}
@media (max-width: 720px) {
.container { padding: 0 20px; }
.section { padding: 64px 0; }
.supporters-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}
/* --- Reusable split layouts (collapse to one column on tablet/mobile) --- */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; }
.split-1-1_6 { grid-template-columns: 1fr 1.6fr; }
.split-1_3-1 { grid-template-columns: 1.3fr 1fr; }
@media (max-width: 860px) {
.split-2 { grid-template-columns: 1fr !important; gap: 32px !important; }
}
.eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--isra-graphite);
}
.eyebrow-accent {
color: var(--isra-sun-500);
}
/* Hero display headline */
.display {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(44px, 6.2vw, 80px);
line-height: 1.06;
letter-spacing: -0.025em;
color: var(--isra-ink);
margin: 0;
padding-bottom: 8px;
/* No text-wrap:balance here — the hero headline uses explicit
line
breaks and a height-reserving ghost; balance would recompute wrapping as
the typed text grows and reintroduce layout shift. */
}
.display em {
font-style: italic;
color: var(--isra-sun-500);
}
.tw-cursor {
display: inline-block;
/* Zero layout width (glyph overflows right) so the cursor can't tip onto a
second line — mirrors .tw-cursor-fade. Used only on the Missions title. */
width: 0;
overflow: visible;
white-space: nowrap;
transform: translateX(0.08em);
font-weight: 300;
color: var(--isra-sun-500);
animation: tw-blink 1s steps(1) infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }
/* --- Zero-CLS typewriter scaffold ---
.tw-ghost holds the FULL final text in normal flow (reserving the exact
height/width the finished headline will occupy) but is invisible. .tw-live
is overlaid on top and is what actually types. Because the ghost never
changes, the layout below never moves — no matter how many characters have
been typed. Both share the heading's font, so they wrap identically. */
.tw-wrap {
position: relative;
display: inline-block;
/* Tiny right padding gives the absolutely-positioned .tw-live (containing
block = this padding box) a sliver of slack over the in-flow ghost, so the
live copy never tips onto a second line from sub-pixel rounding. It still
wraps naturally on narrow/mobile widths where the text genuinely overflows. */
padding-right: 0.2em;
}
.tw-ghost {
visibility: hidden;
pointer-events: none;
user-select: none;
}
.tw-live {
position: absolute;
inset: 0;
}
@media (prefers-reduced-motion: reduce) {
/* Static fallback: drop the overlay scaffold, show the ghost directly so the
finished headline is visible without any animation. */
.tw-ghost { visibility: visible; }
.tw-live { display: none; }
/* With typing disabled the headline shows instantly, so any cursor —
ghost-baked or live — is just a frozen pipe. Hide them all. */
.tw-cursor,
.tw-cursor-fade { display: none; }
}
/* framer-motion-style cursor: instant opacity flip held ~0.4s each state
(mirrors cursorAnimationVariants: duration 0.01, repeatDelay 0.4, reverse). */
.tw-cursor-fade {
display: inline-block;
/* Zero layout width (glyph overflows to the right via translate) so the cursor
can never push past the line edge and wrap onto a second line by itself —
it always trails the last typed character on the same (first) line. */
width: 0;
overflow: visible;
white-space: nowrap;
transform: translateX(0.08em);
font-weight: 300;
color: var(--isra-sun-500);
animation: tw-blink-fade 0.82s steps(1, end) infinite;
}
@keyframes tw-blink-fade { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
/* Re-assert the hide AFTER the base .tw-cursor-fade rule above (which now sets
display:inline-block) so reduced-motion users still get no frozen pipe. */
.tw-cursor-fade { animation: none; display: none; }
}
/* --- Intro splash ("Ascent" — From Classrooms to Cosmos) ---
Full-screen pre-flight console shown at the bare URL. The page reads as a
vertical journey: warm parchment at ground level rising through a dawn
horizon into deep navy ink and a faint starfield — literally classroom to
cosmos. A mono altitude rail (0 KM → Kármán line) tracks the entrance, an
orbital ellipse with a sun dot turns slowly behind the masked-rise
headline, and console boot lines stagger in before the Launch button arms.
--intro-* custom props theme the dark variant; .intro-screen--light keeps
the old all-parchment look as a one-class fallback. */
.intro-screen {
--intro-fg: var(--isra-parchment);
--intro-fg-dim: var(--isra-navy-300);
--intro-rule: rgba(197, 209, 224, 0.28);
position: relative;
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(90% 36% at 50% 80%, rgba(217, 122, 51, 0.16), transparent 70%),
linear-gradient(180deg,
var(--isra-ink) 0%,
var(--isra-navy-900) 32%,
var(--isra-navy-700) 56%,
var(--isra-navy-500) 70%,
var(--isra-navy-300) 80%,
var(--isra-parchment-2) 91%,
var(--isra-parchment) 100%);
}
/* Light fallback — the pre-ascent parchment intro, kept switchable. */
.intro-screen--light {
--intro-fg: var(--isra-ink);
--intro-fg-dim: var(--isra-graphite);
--intro-rule: var(--isra-hairline-strong);
background:
radial-gradient(120% 80% at 50% -10%, rgba(217, 122, 51, 0.10), transparent 60%),
radial-gradient(90% 70% at 50% 115%, rgba(44, 74, 36, 0.08), transparent 60%),
var(--isra-parchment);
}
.intro-screen--light .intro-sky { display: none; }
.intro-screen--light .intro-eyebrow { color: var(--isra-forest-500); }
.intro-screen--light .it-word--accent { color: var(--isra-sun-500); }
.intro-screen--light .ic-ok { color: var(--isra-forest-500); }
.intro-screen--light .intro-title { text-shadow: none; }
/* Starfield — two repeating dot layers confined to the ink zone by a mask.
The whole layer drifts a few px with the pointer (parallax via --px/--py). */
.intro-sky {
position: absolute;
inset: -40px;
z-index: -1;
pointer-events: none;
transform: translate3d(calc(var(--px, 0) * 0.6px), calc(var(--py, 0) * 0.6px), 0);
}
.intro-sky::before,
.intro-sky::after {
content: "";
position: absolute;
inset: 0;
background-repeat: repeat;
-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.9) 42%, transparent 66%);
mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.9) 42%, transparent 66%);
}
.intro-sky::before {
background-image:
radial-gradient(1px 1px at 12% 18%, rgba(244, 239, 230, 0.9), transparent),
radial-gradient(1px 1px at 34% 8%, rgba(244, 239, 230, 0.7), transparent),
radial-gradient(1.5px 1.5px at 56% 24%, rgba(244, 239, 230, 0.8), transparent),
radial-gradient(1px 1px at 73% 12%, rgba(236, 171, 123, 0.75), transparent),
radial-gradient(1px 1px at 88% 30%, rgba(244, 239, 230, 0.65), transparent),
radial-gradient(1.5px 1.5px at 23% 38%, rgba(197, 209, 224, 0.7), transparent),
radial-gradient(1px 1px at 64% 42%, rgba(244, 239, 230, 0.55), transparent),
radial-gradient(1px 1px at 44% 33%, rgba(244, 239, 230, 0.6), transparent);
background-size: 520px 520px;
}
.intro-sky::after {
background-image:
radial-gradient(1px 1px at 8% 28%, rgba(244, 239, 230, 0.5), transparent),
radial-gradient(1px 1px at 29% 14%, rgba(197, 209, 224, 0.45), transparent),
radial-gradient(1px 1px at 47% 6%, rgba(244, 239, 230, 0.5), transparent),
radial-gradient(1px 1px at 62% 35%, rgba(244, 239, 230, 0.4), transparent),
radial-gradient(1px 1px at 79% 20%, rgba(244, 239, 230, 0.45), transparent),
radial-gradient(1px 1px at 93% 9%, rgba(197, 209, 224, 0.4), transparent);
background-size: 780px 780px;
animation: intro-twinkle 7s ease-in-out infinite alternate;
}
@keyframes intro-twinkle { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes intro-appear { from { opacity: 0; } to { opacity: 1; } }
/* Altitude rail — 0 KM (classroom) at the bottom, Kármán line at the top.
The rocket marker rides the rail during the entrance sequence. */
.intro-altitude {
position: absolute;
left: clamp(20px, 4.5vw, 56px);
top: 9vh;
bottom: 9vh;
width: 1px;
z-index: 1;
pointer-events: none;
}
.ia-line {
position: absolute;
inset: 0;
width: 1px;
background: linear-gradient(180deg,
rgba(197, 209, 224, 0.38) 0%,
rgba(197, 209, 224, 0.3) 58%,
rgba(14, 31, 51, 0.22) 82%,
rgba(14, 31, 51, 0.3) 100%);
}
.ia-tick {
position: absolute;
left: 0;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--isra-navy-200);
opacity: 0;
animation: intro-appear 700ms var(--ease-entry) both;
}
.ia-tick i {
display: block;
width: 7px;
height: 1px;
background: currentColor;
opacity: 0.7;
}
.ia-tick--top { top: -5px; animation-delay: 1500ms; }
.ia-tick--mid { top: calc(50% - 6px); animation-delay: 1100ms; }
.ia-tick--base { bottom: -5px; color: var(--isra-graphite); animation-delay: 700ms; }
.ia-marker {
position: absolute;
left: -10px;
bottom: 0;
width: 21px;
height: 21px;
display: grid;
place-items: center;
color: var(--isra-sun-400);
animation: ia-ascend 2400ms var(--ease-entry) 300ms forwards;
}
.ia-marker svg { transform: rotate(-45deg); }
@keyframes ia-ascend { to { transform: translateY(calc(-82vh + 21px)); } }
@media (max-width: 767px) {
.intro-altitude { display: none; }
}
/* Grain overlay — subtle SVG noise multiplied over the gradient. */
.intro-noise {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.5;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
.intro-inner {
position: relative;
text-align: center;
padding: 32px 24px;
display: flex;
flex-direction: column;
align-items: center;
}
/* Orbital ellipse — echoes the logo's orbital ring. A flattened circle with
a sun-dot carrier rotating inside it (pure CSS transform, so it pauses
cleanly under reduced motion). Sits behind the headline. */
.intro-orbit {
position: absolute;
left: 50%;
top: 36%;
width: min(680px, 92vw);
aspect-ratio: 1;
z-index: -1;
pointer-events: none;
transform: translate(-50%, -50%)
translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0)
rotate(-16deg) scaleY(0.42);
opacity: 0;
animation: intro-appear 1200ms var(--ease-entry) 900ms forwards;
}
.io-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid var(--intro-rule);
}
.io-carrier {
position: absolute;
inset: 0;
animation: io-orbit 30s linear infinite;
}
.io-planet {
position: absolute;
left: 50%;
top: -4px;
width: 8px;
height: 8px;
margin-left: -4px;
border-radius: 50%;
background: var(--isra-sun-500);
box-shadow: 0 0 12px rgba(217, 122, 51, 0.85);
}
@keyframes io-orbit { to { transform: rotate(360deg); } }
.intro-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--isra-sun-300);
margin-bottom: 28px;
opacity: 0;
animation: intro-fade 700ms var(--ease-entry) 120ms both;
}
/* Headline — per-word masked rise. Words sit in normal flow inside clipped
line wrappers (transform-only, zero CLS), staggered via --wd. */
.intro-title {
font-family: var(--font-display);
font-size: clamp(44px, 9vw, 104px);
line-height: 1.04;
letter-spacing: -0.03em;
color: var(--intro-fg);
margin: 0 0 26px;
text-shadow: 0 2px 30px rgba(11, 22, 35, 0.35);
}
.it-line {
display: block;
overflow: hidden;
padding-bottom: 0.06em;
margin-bottom: -0.06em;
}
.it-word {
display: inline-block;
transform: translateY(112%);
animation: it-rise 860ms var(--ease-entry) calc(260ms + var(--wd, 0ms)) forwards;
}
.it-word--accent {
font-style: italic;
color: var(--isra-sun-400);
padding-right: 0.06em; /* italic overhang would clip on the line wrapper */
}
@keyframes it-rise { to { transform: translateY(0); } }
/* Console boot lines — launch-console mono readout, staggered via --cd.
Height is reserved up front so the Launch button never moves. */
.intro-console {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-height: 64px;
margin: 0 0 38px;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--intro-fg-dim);
}
.ic-line {
opacity: 0;
animation: intro-fade 360ms var(--ease-entry) var(--cd, 0ms) forwards;
}
.ic-ok { color: var(--isra-forest-300); }
.ic-cursor {
display: inline-block;
margin-left: 0.4em;
color: var(--isra-sun-500);
animation: tw-blink-fade 0.82s steps(1, end) infinite;
}
/* The scroll cue is hidden until the console sequence completes
(.is-ready is added). Scroll/swipe/keys trigger the exit at any time;
the cue is a real button so keyboard and SR users keep a direct path. */
.intro-cue {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 8px 16px;
border: 0;
background: none;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--intro-fg-dim);
cursor: pointer;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: color 200ms var(--ease-standard);
}
.intro-screen.is-ready .intro-cue {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition: opacity 520ms var(--ease-entry), transform 520ms var(--ease-entry),
color 200ms var(--ease-standard);
}
.intro-cue:hover { color: var(--intro-fg); }
.intro-cue:focus-visible {
outline: 2px solid var(--isra-sun-400);
outline-offset: 4px;
border-radius: 4px;
}
.intro-cue:active { transform: translateY(1px); }
.icu-track {
display: block;
width: 1px;
height: 36px;
background: var(--intro-rule);
overflow: hidden;
}
.icu-dot {
display: block;
width: 3px;
height: 10px;
margin-left: -1px;
border-radius: 2px;
background: var(--isra-sun-400);
animation: icu-drift 2s var(--ease-standard) infinite;
}
@keyframes icu-drift {
from { transform: translateY(-12px); opacity: 0; }
30% { opacity: 1; }
to { transform: translateY(40px); opacity: 0; }
}
@keyframes intro-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* Liftoff exit — a scroll/swipe/key lifts the content away before routing
to #home. JS adds .is-exiting, waits ~600ms, then navigates. */
.intro-screen.is-exiting .intro-inner {
transform: translateY(-48px);
opacity: 0;
transition: transform 560ms var(--ease-exit), opacity 460ms var(--ease-exit);
}
.intro-screen.is-exiting .intro-altitude {
opacity: 0;
transition: opacity 360ms var(--ease-exit);
}
.intro-screen.is-exiting .intro-orbit {
animation: none;
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.intro-eyebrow,
.ic-line,
.ia-tick,
.intro-orbit { animation: none; opacity: 1; }
.it-word { animation: none; transform: none; }
.ia-marker { animation: none; transform: translateY(calc(-82vh + 21px)); }
.io-carrier,
.ic-cursor,
.intro-sky::after { animation: none; }
.intro-cue { transition: color 200ms; }
.intro-screen.is-ready .intro-cue { transition: color 200ms; }
.icu-dot { animation: none; opacity: 1; transform: translateY(14px); }
.intro-screen.is-exiting .intro-inner,
.intro-screen.is-exiting .intro-altitude { transition: none; }
}
/* ---- Route transition overlay (intro → home ink dissolve) ---- */
#route-overlay {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
background: var(--isra-ink);
opacity: 0;
transition: opacity 420ms var(--ease-standard);
}
#route-overlay.is-covering {
opacity: 1;
}
#route-overlay.is-uncovering {
opacity: 0;
transition: opacity 700ms var(--ease-entry);
}
@media (prefers-reduced-motion: reduce) {
#route-overlay { transition: none !important; }
}
/* --- Buttons (reusable across screens) --- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 18px;
border: 0;
border-radius: 4px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: background var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--isra-sun-500);
color: #FFFFFF;
}
.btn-primary:hover { background: var(--isra-sun-700); text-decoration: none; }
.btn-navy {
background: var(--isra-navy-700);
color: var(--isra-parchment);
}
.btn-navy:hover { background: var(--isra-navy-900); text-decoration: none; }
.btn-ghost {
background: transparent;
color: var(--isra-ink);
padding: 11px 0;
}
.btn-ghost:hover { color: var(--isra-sun-500); text-decoration: none; }
.btn-outline {
background: transparent;
color: var(--isra-ink);
border: 1px solid rgba(14, 31, 51, 0.22);
}
.btn-outline:hover { border-color: var(--isra-navy-700); text-decoration: none; }
/* --- Sticky header --- */
.app-header {
position: sticky;
top: 0;
z-index: 50;
/* Transparent at the top so the page's own night sky reads straight through —
the bar blends with each page's color instead of being a parchment slab.
A dark frosted panel fades in on scroll (body.nav-scrolled) so the links
stay legible once the lighter, lower sections pass underneath. */
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid transparent;
transition:
background 300ms var(--ease-standard),
border-color 300ms var(--ease-standard),
backdrop-filter 300ms var(--ease-standard);
}
body.nav-scrolled .app-header {
background: rgba(9, 18, 31, 0.72);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(197, 209, 224, 0.12);
}
/* 3px gradient accent bar at top */
.app-header::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--isra-sun-500) 0%, var(--isra-forest-700) 100%);
z-index: 1;
}
/* 3 tracks: brand (left) · nav (centered) · burger (right). The 1fr side
columns let the nav sit dead-center regardless of brand/burger width. */
.app-header .row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: 68px;
}
/* Brand logo in a white disc (mirrors the footer) so the mark stays visible
against the dark sky the transparent bar now sits on. */
.app-header .brand {
grid-column: 1;
justify-self: start;
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 22px;
letter-spacing: -0.01em;
color: var(--isra-parchment);
transition: color 300ms var(--ease-standard);
}
.app-header .brand-logo {
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; flex-shrink: 0;
background: #fff; border-radius: 50%;
animation: brand-pulse 4s ease-in-out infinite;
transition: transform 300ms var(--ease-entry), filter 300ms var(--ease-standard);
}
.app-header .brand img {
width: 26px; height: 26px;
}
.app-header .brand:hover .brand-logo {
filter: drop-shadow(0 0 10px rgba(217, 122, 51, 0.8));
transform: scale(1.08) rotate(-3deg);
animation: none;
}
@keyframes brand-pulse {
0%, 100% { filter: drop-shadow(0 0 2px rgba(217, 122, 51, 0.0)); }
50% { filter: drop-shadow(0 0 8px rgba(217, 122, 51, 0.55)); }
}
/* Nav links with sliding underline */
.app-header nav {
grid-column: 2;
justify-self: center;
display: flex;
gap: 32px;
font-size: 14px;
color: var(--isra-navy-200);
}
.app-header nav a {
position: relative;
padding-bottom: 4px;
color: inherit;
transition: color 200ms var(--ease-standard);
}
/* Underline that slides in from left on hover */
.app-header nav a::after {
content: "";
position: absolute;
bottom: 0; left: 0;
height: 2px;
width: 0;
background: var(--isra-sun-500);
border-radius: 1px;
transition: width 220ms var(--ease-entry);
}
.app-header nav a:hover { color: var(--isra-parchment); text-decoration: none; }
.app-header nav a:hover::after { width: 100%; }
/* Active: full underline with sun glow */
.app-header nav a.active {
color: var(--isra-parchment);
font-weight: 500;
}
.app-header nav a.active::after {
width: 100%;
background: linear-gradient(90deg, var(--isra-sun-500), var(--isra-sun-700));
box-shadow: 0 0 8px rgba(217, 122, 51, 0.45);
}
@media (prefers-reduced-motion: reduce) {
.app-header .brand img { animation: none; }
.app-header nav a::after { transition: none; }
.app-header { transition: none; }
}
/* --- Mobile nav: burger + console dropdown (≤720px) --- */
.nav-burger {
display: none;
grid-column: 3;
justify-self: end;
position: relative;
width: 44px;
height: 44px;
margin-right: -8px;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
border-radius: 8px;
}
.nav-burger:focus-visible { outline: 2px solid var(--isra-sun-500); outline-offset: 2px; }
.nav-burger:active { background: rgba(197, 209, 224, 0.1); }
.nav-burger-line {
position: absolute;
left: 11px;
width: 22px;
height: 2px;
border-radius: 1px;
background: var(--isra-parchment);
transition: transform 280ms var(--ease-standard), opacity 200ms var(--ease-standard);
}
.nav-burger-line:nth-child(1) { top: 15px; }
.nav-burger-line:nth-child(2) { top: 21px; }
.nav-burger-line:nth-child(3) { top: 27px; }
.nav-burger.is-open .nav-burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.is-open .nav-burger-line:nth-child(2) { opacity: 0; }
.nav-burger.is-open .nav-burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu {
display: none;
flex-direction: column;
background: linear-gradient(170deg, var(--isra-navy-800), var(--isra-navy-900));
border-top: 1px solid rgba(111, 210, 224, 0.25);
padding: 10px 0 14px;
opacity: 0;
transform: translateY(-8px);
transition: opacity 260ms var(--ease-standard), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu.is-open { opacity: 1; transform: translateY(0); }
.mobile-menu-link {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 24px;
font-family: var(--font-sans);
font-size: 16px;
color: var(--isra-parchment);
border-bottom: 1px solid rgba(111, 210, 224, 0.08);
opacity: 0;
transform: translateY(-6px);
transition: opacity 240ms var(--ease-standard), transform 260ms cubic-bezier(0.16, 1, 0.3, 1), background 160ms var(--ease-standard);
transition-delay: var(--md, 0ms);
}
.mobile-menu.is-open .mobile-menu-link { opacity: 1; transform: translateY(0); }
.mobile-menu-link:last-child { border-bottom: 0; }
.mobile-menu-link:hover, .mobile-menu-link:active { background: rgba(111, 210, 224, 0.08); text-decoration: none; color: var(--isra-parchment); }
.mobile-menu-link:focus-visible { outline: 2px solid var(--isra-sun-500); outline-offset: -2px; }
.mobile-menu-link.active { color: var(--isra-sun-400); box-shadow: inset 3px 0 0 var(--isra-sun-500); }
.mobile-menu-n {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: rgba(111, 210, 224, 0.7);
}
@media (max-width: 720px) {
.app-header nav { display: none; }
.nav-burger { display: block; }
.mobile-menu:not([hidden]) { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
.nav-burger-line, .mobile-menu, .mobile-menu-link { transition: none; }
}
/* --- Footer --- */
.app-footer {
background: var(--isra-navy-900);
color: var(--isra-parchment);
padding: 80px 0 40px;
margin-top: 29px;
}
.app-footer a { color: var(--isra-navy-200); }
.app-footer .grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
@media (max-width: 720px) {
.app-footer .grid { grid-template-columns: 1fr 1fr; }
}
.app-footer h4 {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--isra-navy-300);
margin: 0 0 14px 0;
}
.app-footer ul {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 8px;
font-size: 14px;
}
.app-footer .meta {
border-top: 1px solid rgba(244, 239, 230, 0.12);
padding-top: 24px;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--isra-navy-300);
}
/* --- Unified image hover system --- */
.img-hover-wrap {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
display: block;
}
.img-hover-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition:
filter 400ms var(--ease-standard),
transform 500ms var(--ease-standard);
}
.img-hover-overlay {
position: absolute;
inset: 0;
background: rgba(14, 31, 51, 0.84);
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
opacity: 0;
transition: opacity 380ms var(--ease-standard);
}
.img-hover-wrap:hover img {
filter: brightness(0.28) saturate(0.7);
transform: scale(1.03);
}
.img-hover-wrap:hover .img-hover-overlay { opacity: 1; }
.img-hover-note {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(14px, 1.5vw, 19px);
line-height: 1.65;
color: var(--isra-parchment);
text-align: center;
max-width: 520px;
border: 1px solid rgba(244, 239, 230, 0.2);
padding: 28px 32px;
border-radius: var(--radius-md);
background: rgba(10, 20, 36, 0.45);
backdrop-filter: blur(6px);
margin: 0;
}
/* Contain variant: portrait/odd-ratio photos that must not be cropped are
letterboxed without a colored panel so vector logos display on white. */
.img-hover-wrap.is-contain {
background: transparent;
}
.img-hover-wrap.is-contain img { object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
.img-hover-wrap img { transition: none; }
.img-hover-overlay { transition: none; }
}
/* Styled placeholder block (stands in for removed photographs).
Fills its wrapper with a branded parchment->navy panel + faint diagonal
hatch, and a centered mono caption. No raster assets. */
.img-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(135deg, var(--isra-parchment-2), var(--isra-parchment-3));
overflow: hidden;
}
.img-placeholder::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
45deg,
rgba(14, 31, 51, 0.05) 0,
rgba(14, 31, 51, 0.05) 1px,
transparent 1px,
transparent 11px
);
pointer-events: none;
}
.img-placeholder::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(70% 90% at 50% 0%, rgba(217, 122, 51, 0.10), rgba(217, 122, 51, 0) 70%);
pointer-events: none;
}
.img-placeholder .ph-label {
position: relative;
z-index: 1;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--isra-navy-600);
border: 1px solid rgba(14, 31, 51, 0.16);
border-radius: var(--radius-md);
padding: 10px 16px;
background: rgba(244, 239, 230, 0.5);
text-align: center;
max-width: 80%;
}
/* Placeholder wrappers don't need overflow/hover-image behavior */
.img-hover-wrap.is-placeholder { background: var(--isra-parchment-2); }
/* Mission detail hero: portrait photo (full, letterboxed — never cropped)
beside the italic summary lede. */
.mission-detail-hero {
gap: 48px;
align-items: stretch;
margin-bottom: 48px;
}
.mission-detail-photo .img-hover-wrap {
height: 100%;
min-height: 320px;
aspect-ratio: 4 / 5;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
}
.mission-detail-lede {
display: flex;
align-items: center;
}
.mission-detail-lede p { max-width: 32ch; }
@media (max-width: 860px) {
.mission-detail-hero { margin-bottom: 36px; }
.mission-detail-photo .img-hover-wrap { aspect-ratio: 3 / 4; }
}
/* Failure tag */
.tag-failure {
background: var(--isra-sun-100);
color: var(--isra-sun-900);
border: 1px solid rgba(178, 94, 32, 0.2);
}
/* Team lead photo (wide band above the member grid) */
.team-lead {
margin: 32px 0 8px;
display: block;
}
.team-lead .img-hover-wrap {
aspect-ratio: 16 / 7;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-3);
}
@media (max-width: 720px) {
.team-lead .img-hover-wrap { aspect-ratio: 4 / 3; }
}
/* ===== Supporters — advisory board ===== */
.adv-board { margin: 0 0 72px; }
.adv-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
max-width: 760px;
margin: 0 auto;
}
.adv-card {
display: flex;
align-items: center;
gap: 22px;
padding: 24px 28px;
background: var(--isra-parchment-2);
border-radius: var(--radius-lg);
border-top: 3px solid var(--isra-forest-500);
box-shadow: var(--shadow-1);
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms var(--ease-standard), border-top-color 300ms var(--ease-standard);
}
.adv-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 40px rgba(14, 31, 51, 0.14), 0 4px 10px rgba(14, 31, 51, 0.07);
border-top-color: var(--isra-sun-500);
}
.adv-photo {
position: relative;
flex-shrink: 0;
width: 84px;
height: 84px;
border-radius: 50%;
overflow: hidden;
background: url("content/bg.jpg") center / cover no-repeat, var(--isra-navy-900);
box-shadow: 0 0 0 3px var(--isra-parchment), 0 0 0 5px var(--isra-forest-300);
}
.adv-photo .crew-silhouette { width: 78%; bottom: -4%; }
.adv-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.adv-name {
font-family: var(--font-display);
font-size: 21px;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--isra-ink);
margin: 0;
}
.adv-role {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--isra-forest-700);
line-height: 1.6;
margin: 7px 0 0;
}
@media (max-width: 640px) {
.adv-grid { grid-template-columns: 1fr; gap: 18px; }
.adv-card { padding: 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
.adv-card, .adv-card:hover { transform: none; transition: none; }
}
.crew-grain::before,
.crew-grain::after {
content: "";
position: absolute;
border-radius: 50%;
border: 1px dashed rgba(111, 210, 224, 0.16);
}
.crew-grain::before {
width: 1100px; height: 1100px;
top: -780px; right: -340px;
}
.crew-grain::after {
width: 720px; height: 720px;
bottom: -520px; left: -260px;
border-color: rgba(232, 148, 62, 0.14);
}
/* gold/cyan top accent line */
.crew-grain {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
/* console corner ticks */
.crew-corner {
position: absolute;
width: 16px; height: 16px;
border: 1.5px solid rgba(111, 210, 224, 0.55);
z-index: 3;
}
.crew-corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.crew-corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.crew-corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.crew-corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.crew-status-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--crew-cyan);
box-shadow: 0 0 0 0 rgba(111, 210, 224, 0.6);
animation: crew-pulse 2.4s var(--ease-standard) infinite;
}
@keyframes crew-pulse {
0% { box-shadow: 0 0 0 0 rgba(111, 210, 224, 0.5); }
70% { box-shadow: 0 0 0 7px rgba(111, 210, 224, 0); }
100% { box-shadow: 0 0 0 0 rgba(111, 210, 224, 0); }
}
.crew-group { margin-top: clamp(34px, 4vw, 48px); }
.crew-group:first-of-type { margin-top: clamp(28px, 3.4vw, 40px); }
.crew-subhead {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.crew-subhead-n {
font-size: 11px;
color: var(--isra-sun-400);
}
.crew-subhead-label {
font-size: 12px;
color: var(--isra-parchment);
}
.crew-subhead-rule {
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(111, 210, 224, 0.4), rgba(111, 210, 224, 0.05));
}
.crew-subhead-count {
font-size: 10px;
color: rgba(111, 210, 224, 0.8);
border: 1px solid rgba(111, 210, 224, 0.3);
border-radius: 999px;
padding: 2px 9px;
}
.crew-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: clamp(10px, 1.2vw, 16px);
margin-top: 18px;
}
@media (max-width: 1024px) { .crew-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .crew-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .crew-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.crew-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--radius-md);
padding: 7px 7px 13px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
border: 1px solid rgba(244, 239, 230, 0.1);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
transition: transform 320ms var(--ease-standard), border-color 320ms var(--ease-standard), box-shadow 320ms var(--ease-standard);
}
.crew-card:hover,
.crew-card:focus-within {
transform: translateY(-6px);
border-color: rgba(111, 210, 224, 0.5);
box-shadow:
0 22px 44px -20px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(111, 210, 224, 0.25),
0 0 26px -6px rgba(111, 210, 224, 0.35);
}
.crew-photo {
position: relative;
aspect-ratio: 3 / 4;
border-radius: calc(var(--radius-md) - 4px);
overflow: hidden;
background: url("content/bg.jpg") center / cover no-repeat, var(--isra-navy-900);
}
.crew-photo img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
transition: transform 500ms var(--ease-standard);
}
.crew-card:hover .crew-photo img { transform: scale(1.04); }
.crew-photo.is-placeholder {
display: flex;
align-items: center;
justify-content: center;
}
/* Bust silhouette — anchored to the frame bottom so it reads like a portrait. */
.crew-silhouette {
position: absolute;
bottom: -2%;
left: 50%;
transform: translateX(-50%);
width: 74%;
color: var(--isra-sun-300);
opacity: 0.55;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
.crew-vacant-mark {
font-family: var(--font-mono);
font-size: clamp(24px, 2.4vw, 30px);
font-weight: 300;
color: rgba(111, 210, 224, 0.45);
}
.crew-card.is-vacant {
opacity: 0.55;
border-style: dashed;
border-color: rgba(244, 239, 230, 0.16);
}
.crew-card.is-vacant .crew-photo {
background:
linear-gradient(rgba(7, 18, 31, 0.78), rgba(7, 18, 31, 0.78)),
url("content/bg.jpg") center / cover no-repeat, var(--isra-navy-900);
}
.crew-card.is-vacant:hover,
.crew-card.is-vacant:focus-within {
transform: none;
border-color: rgba(244, 239, 230, 0.24);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.crew-group.is-inactive .crew-card {
opacity: 0.5;
}
.crew-group.is-inactive .crew-photo img {
filter: grayscale(0.85) brightness(0.85);
}
.crew-scrim {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to top, rgba(7, 18, 31, 0.85) 0%, rgba(7, 18, 31, 0.15) 32%, transparent 55%);
}
.crew-tick {
position: absolute;
width: 8px; height: 8px;
border: 1.5px solid rgba(111, 210, 224, 0.7);
z-index: 2;
pointer-events: none;
}
.crew-tick--tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.crew-tick--br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.crew-idx {
position: absolute;
top: 6px; right: 8px;
z-index: 2;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.12em;
color: rgba(244, 239, 230, 0.75);
}
.crew-meta {
padding: 11px 4px 0;
text-align: center;
}
.crew-name {
font-family: var(--font-display);
font-size: 14px;
line-height: 1.15;
color: var(--isra-parchment);
margin: 0;
}
.crew-role {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--isra-sun-400);
line-height: 1.5;
margin: 6px 0 0;
/* Reserve two lines so metas align across a row despite 1–3-line titles. */
min-height: 2.4em;
}
@media (prefers-reduced-motion: reduce) {
.crew-card, .crew-card:hover, .crew-card:focus-within { transform: none; }
.crew-card:hover .crew-photo img { transform: none; }
.crew-status-dot { animation: none; }
}
/* ===== Home — featured-mission telemetry panel ===== */
.fm-panel {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--radius-lg);
padding: clamp(40px, 5vw, 72px) clamp(24px, 4.5vw, 72px);
background: var(--isra-navy-900);
box-shadow: inset 0 1px 0 rgba(111, 210, 224, 0.18), 0 30px 70px -28px rgba(5, 12, 22, 0.7);
}
.fm-media { position: absolute; inset: 0; z-index: -1; }
.fm-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.fm-media-tint { position: absolute; inset: 0; background: var(--isra-navy-700); mix-blend-mode: multiply; opacity: 0.82; }
.fm-media-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 18, 31, 0.92) 0%, rgba(7, 18, 31, 0.55) 55%, rgba(7, 18, 31, 0.35) 100%); }
.fm-inner { max-width: 640px; }
.fm-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #6fd2e0;
}
.fm-title {
font-family: var(--font-display);
font-size: clamp(34px, 4.4vw, 54px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--isra-parchment);
margin: 16px 0 0;
}
.fm-title em { font-style: italic; color: var(--isra-sun-400); }
.fm-body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.7;
color: rgba(244, 239, 230, 0.78);
max-width: 54ch;
margin: 18px 0 0;
}
.fm-readout {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 26px 0 0;
}
.fm-stat {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 16px;
border: 1px solid rgba(244, 239, 230, 0.16);
border-radius: 8px;
background: rgba(7, 18, 31, 0.55);
backdrop-filter: blur(4px);
}
.fm-stat b { font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--isra-parchment); letter-spacing: 0.01em; }
.fm-stat i { font-family: var(--font-mono); font-style: normal; font-size: 9px; letter-spacing: 0.14em; color: rgba(244, 239, 230, 0.55); }
.fm-stat--next { border-color: rgba(111, 210, 224, 0.45); }
.fm-stat--next i { color: #6fd2e0; }
.fm-ctas { display: flex; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.fm-link {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--isra-parchment);
border-bottom: 1px solid rgba(244, 239, 230, 0.35);
padding-bottom: 3px;
transition: color 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
}
.fm-link:hover { color: var(--isra-sun-400); border-color: var(--isra-sun-400); text-decoration: none; }
.fm-link:focus-visible { outline: 2px solid var(--isra-sun-500); outline-offset: 3px; }
/* Missions feature section (replaces cohort+orbital on home) */
.missions-feature {
background: var(--isra-parchment-2);
border-radius: 16px;
padding: 56px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
@media (max-width: 900px) {
.missions-feature { grid-template-columns: 1fr; padding: 32px; }
}
/* grid children must be allowed to shrink below their content's intrinsic
width, or the orbital/text forces the card wider than the viewport */
.missions-feature > * { min-width: 0; }
@media (max-width: 520px) {
.missions-feature { padding: 24px 20px; }
}
.missions-feature-orbital {
align-self: center;
display: flex;
justify-content: center;
}
.missions-feature-orbital .orbital {
width: 100%;
max-width: 460px;
aspect-ratio: 3 / 2;
min-height: 300px;
}
@media (max-width: 900px) {
.missions-feature-orbital .orbital { min-height: 240px; }
}
/* Cap orbital if still used anywhere */
.cohort .orbital { max-height: 320px; overflow: hidden; }
/* Pulse shared by the flight-record video player (REC dot, play ring)
and the ascent-log LIVE dot. */
@keyframes ms-pulse {
0% { box-shadow: 0 0 0 0 rgba(217,122,51,0.55); }
70% { box-shadow: 0 0 0 7px rgba(217,122,51,0); }
100% { box-shadow: 0 0 0 0 rgba(217,122,51,0); }
}
/* --- Telemetry --- */
.telemetry {
background: var(--isra-navy-900);
color: var(--isra-parchment);
border-radius: 10px;
padding: 24px 28px;
font-family: var(--font-mono);
}
.telemetry .head {
display: flex; justify-content: space-between; align-items: center;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--isra-navy-300);
border-bottom: 1px solid rgba(244,239,230,0.12);
padding-bottom: 14px;
margin-bottom: 16px;
}
.telemetry .head .title { color: var(--isra-sun-500); }
.telemetry .line {
display: grid;
grid-template-columns: 80px 1fr;
gap: 16px;
font-size: 13px;
padding: 4px 0;
line-height: 1.6;
}
.telemetry .line .t { color: var(--isra-sun-500); }
.telemetry .line .body { color: var(--isra-parchment); }
.telemetry .line.event-end { color: var(--isra-forest-300); }
.telemetry .line.event-end .body { color: var(--isra-forest-300); }
/* --- Cohort callout --- */
.cohort {
background: var(--isra-parchment-2);
border-radius: 16px;
padding: 56px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
@media (max-width: 900px) {
.cohort { grid-template-columns: 1fr; padding: 32px; }
}
/* --- Orbital motif (decorative) ---
Smooth: satellites trace static ellipses via SVG . */
.orbital {
position: relative;
width: 100%;
aspect-ratio: 1.5 / 1;
overflow: hidden; /* keep the orbit motif inside its box — never bleed past the section */
}
.orbital svg {
width: 100%;
height: 100%;
}
@media (prefers-reduced-motion: reduce) {
.orbital animateMotion,
.orbital animate { display: none; }
}
/* Apply page layout (info column + form). The markup is intentionally left
untouched; this CSS-only rule collapses its two-column wrapper to a single
column on small screens so the form never runs off-screen. Purely visual —
no change to the form, validation, or submission. */
@media (max-width: 860px) {
.container > div[style*="grid-template-columns:1fr 1.3fr"] {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
}
/* --- Apply form --- */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px 24px;
}
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field label {
font-size: 13px;
font-weight: 500;
color: var(--isra-ink);
}
.field input,
.field select,
.field textarea {
font-family: var(--font-sans);
font-size: 14px;
padding: 10px 12px;
background: #fff;
border: 1px solid rgba(14, 31, 51, 0.18);
border-radius: 4px;
color: var(--isra-ink);
outline: none;
/* Specific properties only — never transition-all. Motion stays on transform. */
transition: border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard);
}
/* Hover: subtle border lift + tiny upward shift */
.field input:hover:not(:focus),
.field textarea:hover:not(:focus) {
border-color: rgba(14, 31, 51, 0.34);
transform: translateY(-1px);
}
/* Focus: accent glow + stronger border */
.field input:focus,
.field select:focus,
.field textarea:focus {
border: 1.5px solid var(--isra-sun-500);
padding: 9.5px 11.5px;
box-shadow: 0 0 0 3px rgba(217, 122, 51, 0.16);
}
@media (prefers-reduced-motion: reduce) {
.field input:hover:not(:focus),
.field textarea:hover:not(:focus) { transform: none; }
}
.field .help {
font-size: 12px;
color: var(--isra-mute);
margin-top: 8px;
}
.field.full { grid-column: 1 / -1; }
/* invalid state — warm rust, matches brand danger token */
.field input.invalid,
.field select.invalid,
.field textarea.invalid {
border-color: var(--color-danger);
}
.field input.invalid:focus,
.field select.invalid:focus,
.field textarea.invalid:focus {
border: 1.5px solid var(--color-danger);
padding: 9.5px 11.5px;
}
.field .field-error {
font-size: 12px;
color: var(--color-danger);
font-family: var(--font-mono);
letter-spacing: 0.02em;
}
/* --- Track selector (single-select pill groups) --- */
.track-field { gap: 10px; }
.track-field.invalid > label { color: var(--color-danger); }
.pill-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pill {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
padding: 9px 16px;
background: var(--isra-parchment-2);
color: var(--isra-ink);
border: 1px solid transparent;
border-radius: var(--radius-pill);
cursor: pointer;
user-select: none;
/* Specific properties only — never transition-all. */
transition: transform var(--dur-fast) var(--ease-entry),
box-shadow var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
background var(--dur-fast) var(--ease-standard),
opacity var(--dur-fast) var(--ease-standard);
}
.pill:hover:not(.is-selected):not(:disabled) {
transform: translateY(-2px);
border-color: var(--isra-sun-500);
box-shadow: 0 4px 12px rgba(217, 122, 51, 0.16);
}
.pill:focus-visible {
outline: none;
border-color: var(--isra-sun-500);
box-shadow: 0 0 0 3px rgba(217, 122, 51, 0.20);
}
.pill:active:not(:disabled) { transform: translateY(0); }
.pill.is-selected {
background: var(--isra-navy-900);
color: var(--isra-parchment);
border-color: var(--isra-navy-900);
box-shadow: var(--shadow-2);
}
.pill:disabled {
opacity: 0.4;
cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
.pill { transition: opacity var(--dur-fast) linear, background var(--dur-fast) linear; }
.pill:hover:not(.is-selected):not(:disabled),
.pill:active:not(:disabled) { transform: none; }
}
/* submit button while a request is in flight */
.btn[aria-busy="true"] {
opacity: 0.7;
pointer-events: none;
}
.btn .spinner {
width: 14px;
height: 14px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.45);
border-top-color: #fff;
animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.btn .spinner { animation: none; }
}
/* --- Toasts --- */
.toast-host {
position: fixed;
top: 84px;
right: 24px;
z-index: 200;
display: flex;
flex-direction: column;
gap: 12px;
max-width: min(360px, calc(100vw - 48px));
pointer-events: none;
}
@media (max-width: 720px) {
.toast-host { top: auto; bottom: 20px; right: 16px; left: 16px; max-width: none; }
}
.toast {
pointer-events: auto;
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px 14px 18px;
background: var(--isra-white);
color: var(--isra-ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow-3), inset 0 0 0 1px var(--isra-hairline);
font-size: 14px;
line-height: 1.45;
overflow: hidden;
transform: translateX(12px);
opacity: 0;
transition: transform var(--dur-base) var(--ease-entry),
opacity var(--dur-base) var(--ease-entry);
}
.toast::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--isra-navy-700);
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.hide { transform: translateX(12px); opacity: 0; }
.toast-success::before { background: var(--isra-forest-500); }
.toast-error::before { background: var(--color-danger); }
.toast .toast-icon {
flex-shrink: 0;
margin-top: 1px;
display: inline-flex;
}
.toast-success .toast-icon { color: var(--isra-forest-500); }
.toast-error .toast-icon { color: var(--color-danger); }
.toast .toast-title {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--isra-mute);
margin: 0 0 2px;
}
.toast .toast-msg { margin: 0; color: var(--isra-ink); }
@media (prefers-reduced-motion: reduce) {
.toast { transition: opacity var(--dur-fast) linear; transform: none; }
.toast.show { transform: none; }
.toast.hide { transform: none; }
}
/* --- Tags --- */
.tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 2px;
background: var(--isra-parchment-2);
color: var(--isra-ink);
white-space: nowrap;
}
.tag-success { background: var(--isra-forest-100); color: var(--isra-forest-900); }
.tag-warn { background: var(--isra-sun-100); color: var(--isra-sun-900); }
.tag-dark { background: var(--isra-navy-900); color: var(--isra-parchment); }
.tag-outline { background: transparent; box-shadow: inset 0 0 0 1px rgba(14,31,51,0.18); }
.tag-planning { background: var(--isra-navy-100); color: var(--isra-navy-700); box-shadow: inset 0 0 0 1px rgba(30,58,95,0.16); }
/* ===== About — gallery lightbox ===== */
.gallery-lightbox {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
background: rgba(8, 16, 28, 0.92);
backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.gallery-lightbox.open {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
.gallery-lb-stage {
margin: 0;
max-width: min(1080px, 86vw);
max-height: 86vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.gallery-lb-img {
max-width: 100%;
max-height: 78vh;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
transform: scale(1);
opacity: 1;
transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-lb-img.swapping { opacity: 0; transform: scale(0.97); }
.gallery-lb-cap {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--isra-navy-200);
}
.gallery-lb-close,
.gallery-lb-nav {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid rgba(244, 239, 230, 0.18);
background: rgba(244, 239, 230, 0.06);
color: var(--isra-parchment);
cursor: pointer;
transition: transform 0.2s var(--ease-entry), background 0.2s ease, border-color 0.2s ease;
}
.gallery-lb-close:hover,
.gallery-lb-nav:hover {
background: rgba(244, 239, 230, 0.14);
border-color: var(--isra-sun-500);
transform: scale(1.06);
}
.gallery-lb-close:active,
.gallery-lb-nav:active { transform: scale(0.96); }
.gallery-lb-close:focus-visible,
.gallery-lb-nav:focus-visible { outline: 2px solid var(--isra-sun-500); outline-offset: 2px; }
.gallery-lb-close { top: 24px; right: 24px; }
.gallery-lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.gallery-lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.gallery-lb-prev:hover { transform: translateY(-50%) scale(1.06); }
.gallery-lb-next:hover { transform: translateY(-50%) scale(1.06); }
.gallery-lb-counter {
position: absolute;
bottom: 26px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.14em;
color: var(--isra-navy-200);
}
@media (max-width: 640px) {
.gallery-lb-close { top: 14px; right: 14px; }
.gallery-lb-prev { left: 10px; }
.gallery-lb-next { right: 10px; }
}
/* --- Section dividers --- */
.section-divider {
height: 1px;
background: var(--isra-hairline);
margin: 0;
border: 0;
}
/* --- Stats strip --- */
.stats-strip {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: var(--isra-navy-900);
color: var(--isra-parchment);
border-radius: 10px;
overflow: hidden;
isolation: isolate;
}
/* Ambient shimmer: slow, low-opacity sun/navy glow drifting behind the cells.
Animates only transform + opacity. Disabled under reduced-motion. */
.stats-strip::before {
content: "";
position: absolute;
inset: -40%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(38% 60% at 22% 30%, rgba(217,122,51,0.22), rgba(217,122,51,0) 70%),
radial-gradient(34% 55% at 78% 68%, rgba(69,105,160,0.26), rgba(69,105,160,0) 72%),
radial-gradient(30% 50% at 55% 50%, rgba(236,171,123,0.12), rgba(236,171,123,0) 70%);
opacity: 0.85;
will-change: transform, opacity;
animation: stats-drift 22s ease-in-out infinite;
}
@keyframes stats-drift {
0% { transform: translate3d(-4%, -3%, 0) scale(1.05); opacity: 0.7; }
50% { transform: translate3d(5%, 4%, 0) scale(1.12); opacity: 1; }
100% { transform: translate3d(-4%, -3%, 0) scale(1.05); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
.stats-strip::before { animation: none; opacity: 0.6; }
}
@media (max-width: 720px) { .stats-strip { grid-template-columns: 1fr 1fr; } }
.stats-strip .cell {
position: relative;
z-index: 1;
padding: 32px 28px;
border-right: 1px solid rgba(244,239,230,0.10);
border-bottom: 1px solid rgba(244,239,230,0.10);
transition: transform 260ms cubic-bezier(0.16,1,0.3,1),
background 260ms ease,
box-shadow 260ms ease;
}
.stats-strip .cell:last-child { border-right: 0; }
.stats-strip .cell:hover {
transform: translateY(-4px);
background: radial-gradient(120% 120% at 50% 0%, rgba(217,122,51,0.14), rgba(217,122,51,0) 70%);
box-shadow: inset 0 1px 0 rgba(236,171,123,0.18);
}
.stats-strip .cell:hover .num { color: var(--isra-sun-300); }
.stats-strip .num {
font-family: var(--font-display);
font-size: 56px;
line-height: 1;
letter-spacing: -0.025em;
color: var(--isra-parchment);
transition: color 260ms ease;
font-variant-numeric: tabular-nums; /* digits hold width during count-up */
}
.stats-strip .num .unit {
font-size: 22px;
color: var(--isra-sun-500);
vertical-align: top;
margin-left: 4px;
}
.stats-strip .label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--isra-navy-300);
margin-top: 10px;
}
/* --- Apply page quote --- */
.apply-quote {
text-align: center;
margin-bottom: 56px;
}
.apply-quote-text {
font-family: var(--font-display);
font-size: 48px;
font-weight: 400;
font-style: italic;
line-height: 1.2;
letter-spacing: -0.03em;
color: var(--isra-ink);
margin: 0;
}
.apply-quote-attr {
display: block;
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--isra-mute);
margin-top: 12px;
font-style: normal;
}
@media (max-width: 720px) {
.apply-quote-text { font-size: 32px; }
.apply-quote { margin-bottom: 48px; }
}
/* --- Application timeline --- */
.timeline {
width: 100%;
margin-bottom: 56px;
}
.timeline-track {
display: flex;
position: relative;
padding-top: 2px;
}
/* trajectory line connecting node centres (steps are flex:1, centred) */
.timeline-track::before {
content: "";
position: absolute;
top: 16px; /* node radius (32/2) */
left: 16.66%;
right: 16.66%;
height: 2px;
background: linear-gradient(90deg, var(--isra-sun-500), var(--isra-forest-500));
opacity: 0.55;
z-index: 0;
}
.timeline-step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
outline: none;
cursor: default;
}
.timeline-node {
position: relative;
z-index: 1;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--isra-white);
box-shadow: inset 0 0 0 1px var(--isra-hairline-strong), var(--shadow-1);
color: var(--isra-sun-500);
transition: transform var(--dur-fast) var(--ease-entry),
box-shadow var(--dur-fast) var(--ease-standard);
}
.timeline-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--isra-navy-700);
}
.timeline-node.is-launch { color: var(--isra-sun-500); }
.timeline-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
margin-top: 12px;
text-align: center;
}
.timeline-stage {
font-family: var(--font-display);
font-size: 24px;
line-height: 1.1;
color: var(--isra-ink);
}
.timeline-meaning {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--isra-mute);
}
/* hover/focus: subtle node emphasis (transform/opacity + ring) */
.timeline-step:hover .timeline-node,
.timeline-step:focus-visible .timeline-node {
transform: translateY(-2px);
box-shadow: inset 0 0 0 1.5px var(--isra-sun-500), var(--shadow-2);
}
.timeline-step:focus-visible { outline: none; }
.timeline-step:focus-visible .timeline-node {
box-shadow: inset 0 0 0 1.5px var(--isra-sun-500), 0 0 0 3px rgba(217, 122, 51, 0.18);
}
@media (max-width: 720px) {
.timeline-stage { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.timeline-node,
.timeline-step:hover .timeline-node,
.timeline-step:focus-visible .timeline-node { transform: none; }
}
/* --- Timeline inline description (always visible, text swaps on hover) --- */
.timeline-description {
background: transparent;
border-radius: var(--radius-md);
border-top: 1px solid var(--isra-hairline);
border-bottom: 1px solid var(--isra-hairline);
padding: 14px 24px;
margin-top: 20px;
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-description-text {
font-family: var(--font-display);
font-style: italic;
font-size: 18px;
line-height: 1.55;
color: var(--isra-graphite);
text-align: center;
opacity: 1;
transition: opacity 180ms ease;
}
.timeline-description-text.fading {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.timeline-description-text { transition: none; }
}
/* --- "What we look for" / "What you should expect" card hover --- */
[style*="background:var(--isra-parchment-2)"] {
transition: transform 250ms var(--ease-standard), box-shadow 250ms var(--ease-standard);
}
[style*="background:var(--isra-parchment-2)"]:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(14, 31, 51, 0.12), inset 0 0 0 1px rgba(217, 122, 51, 0.15);
}
/* Item-level hover: left accent bar + subtle shift */
.look-item {
position: relative;
padding: 8px 12px;
border-radius: 6px;
border-left: 2px solid transparent;
transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.look-item:hover {
border-left-color: var(--isra-sun-500);
background: rgba(217, 122, 51, 0.06);
transform: translateX(4px);
}
.look-item-ic {
display: inline-flex;
transform-origin: center;
transition: transform 200ms cubic-bezier(.22, 1, .36, 1);
}
.look-item:hover .look-item-ic { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
.look-item-ic,
.look-item:hover .look-item-ic { transform: none; }
}
/* --- Page/view entry transition (route switch only) --- */
@keyframes page-enter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: page-enter 460ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@media (prefers-reduced-motion: reduce) {
.page-enter { animation: none; }
}
/* --- Scroll-reveal ---
Base is a soft fade-up; modifier classes (assigned by initScrollReveal) give
each element a distinct entrance so reveals read as intentional, not uniform.
All variants resolve to the same rest state (.in) and collapse under
prefers-reduced-motion. Easing matches the site's --ease-entry. */
.reveal {
opacity: 0;
transform: translateY(18px);
/* One shared spring-out curve so every entrance decelerates the same way. */
transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1), transform 740ms cubic-bezier(0.16, 1, 0.3, 1),
filter 640ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal--left { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal--scale { transform: translateY(12px) scale(0.965); }
.reveal--blur { transform: translateY(10px); filter: blur(6px); }
.reveal--rise { transform: translateY(34px); }
.reveal.in {
opacity: 1;
transform: none;
filter: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal--left, .reveal--right, .reveal--scale, .reveal--blur, .reveal--rise {
opacity: 1; transform: none; filter: none; transition: none;
}
}
/* =====================================================================
SRM mission page — bespoke, scroll-animated detail layout
===================================================================== */
.srm-page { --srm-title-h: clamp(82px, 13vw, 184px); }
/* ---- Hero ---- */
.srm-hero {
position: relative;
overflow: hidden;
padding: 40px 0 64px;
min-height: 86vh;
display: flex;
align-items: center;
background:
radial-gradient(80% 55% at 78% 22%, rgba(217,122,51,0.16), rgba(217,122,51,0) 60%),
linear-gradient(180deg, var(--isra-ink) 0%, var(--isra-navy-900) 64%, var(--isra-navy-800) 100%);
}
.fr-sky { position: absolute; inset: 0; pointer-events: none; isolation: isolate; }
.srm-hero-grain {
position: absolute; inset: 0; pointer-events: none; opacity: 0.35; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.srm-hero-inner {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 1.25fr 0.75fr;
gap: 40px;
align-items: center;
}
.srm-back {
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: 0; padding: 0; cursor: pointer;
color: var(--isra-navy-200); font-size: 13px; margin-bottom: 26px;
transition: color 160ms var(--ease-standard), gap 160ms var(--ease-standard);
}
.srm-back:hover { color: var(--isra-parchment); gap: 10px; }
.srm-eyebrow {
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--isra-sun-500); margin-bottom: 14px;
}
/* ---- Title with hover-reveal full form (zero layout shift) ---- */
.srm-title {
position: relative;
display: block;
width: 100%;
height: var(--srm-title-h);
margin-bottom: 22px;
outline: none;
cursor: default;
}
.srm-acro, .srm-full {
position: absolute; left: 0; top: 0;
transition: opacity 420ms var(--ease-standard), transform 480ms cubic-bezier(0.16,1,0.3,1), filter 420ms var(--ease-standard);
}
.srm-acro {
font-family: var(--font-display);
font-size: clamp(82px, 13vw, 184px);
line-height: 0.86;
letter-spacing: -0.04em;
color: var(--isra-parchment);
text-shadow: 0 2px 40px rgba(2, 8, 16, 0.45);
}
.srm-acro::after { /* subtle accent dot */
content: "."; color: var(--isra-sun-500);
}
.srm-full {
display: flex; flex-direction: column; gap: 2px;
justify-content: center; height: 100%;
opacity: 0; pointer-events: none;
}
.srm-word {
position: relative;
width: fit-content;
font-family: var(--font-display);
font-size: clamp(26px, 4.2vw, 52px);
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--isra-parchment);
opacity: 0;
transform: translateX(-22px);
transition: opacity 460ms var(--ease-standard), transform 520ms cubic-bezier(0.16,1,0.3,1);
transition-delay: var(--d, 0ms);
}
.srm-word .srm-i { color: var(--isra-sun-500); }
.srm-word::after {
content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
background: var(--isra-sun-500); transform: scaleX(0); transform-origin: left;
transition: transform 520ms cubic-bezier(0.16,1,0.3,1); transition-delay: var(--d, 0ms);
}
.srm-title:hover .srm-acro,
.srm-title:focus-within .srm-acro {
opacity: 0; transform: translateX(-10px) scale(0.96); filter: blur(3px);
}
.srm-title:hover .srm-full,
.srm-title:focus-within .srm-full { opacity: 1; }
.srm-title:hover .srm-word,
.srm-title:focus-within .srm-word { opacity: 1; transform: none; }
.srm-title:hover .srm-word::after,
.srm-title:focus-within .srm-word::after { transform: scaleX(1); }
.srm-hero-lede {
font-family: var(--font-display); font-style: italic;
font-size: clamp(19px, 2.2vw, 26px); line-height: 1.4;
color: var(--isra-navy-200); max-width: 460px; margin: 0 0 24px;
}
.srm-meta {
display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--isra-navy-300);
}
.srm-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.srm-scroll-cue {
display: flex; align-items: center; gap: 12px; margin-top: 44px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--isra-navy-300);
}
.srm-scroll-line {
width: 54px; height: 1px; background: rgba(197, 209, 224, 0.3); position: relative; overflow: hidden;
}
.srm-scroll-line::after {
content: ""; position: absolute; inset: 0; width: 40%;
background: var(--isra-sun-500); animation: srm-scroll 2.2s ease-in-out infinite;
}
@keyframes srm-scroll { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(360%); } }
/* ---- Hero rocket ---- */
.srm-hero-rocket { position: relative; display: flex; justify-content: center; align-items: center; min-height: 60vh; }
.srm-hero-glow {
position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, rgba(217,122,51,0.22), rgba(217,122,51,0) 70%);
filter: blur(10px);
}
.srm-rocket-stage {
position: relative; display: inline-block; outline: none;
animation: srm-float 6s ease-in-out infinite;
}
.srm-rocket-img {
display: block; max-width: none; width: auto; height: min(72vh, 600px);
filter: drop-shadow(0 30px 44px rgba(2, 8, 16, 0.55));
}
@keyframes srm-float { 0%,100% { transform: translateY(0) rotate(0.001deg); } 50% { transform: translateY(-16px); } }
/* ---- Hero rocket callout labels (reveal on hover) ---- */
.srm-labels { position: absolute; inset: 0; pointer-events: none; }
.srm-label {
position: absolute; top: var(--y); transform: translateY(-50%);
display: flex; align-items: center; gap: 9px; white-space: nowrap;
}
.srm-label--r { left: 50%; }
.srm-label--l { right: 50%; flex-direction: row-reverse; }
.srm-label-dot {
flex: none; width: 9px; height: 9px; border-radius: 50%;
background: var(--isra-sun-500); box-shadow: 0 0 0 4px rgba(217,122,51,0.18);
transform: scale(0); transition: transform 360ms cubic-bezier(0.16,1,0.3,1); transition-delay: var(--d);
}
.srm-label-line {
height: 1px; width: 0; background: rgba(197, 209, 224, 0.35);
transition: width 420ms cubic-bezier(0.16,1,0.3,1); transition-delay: var(--d);
}
.srm-label-tag {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--isra-navy-200);
opacity: 0; transform: translateX(-6px);
transition: opacity 360ms, transform 360ms; transition-delay: var(--d);
}
.srm-label--l .srm-label-tag { transform: translateX(6px); }
.srm-rocket-stage:hover .srm-label-dot,
.srm-rocket-stage:focus-within .srm-label-dot { transform: scale(1); }
.srm-rocket-stage:hover .srm-label-line,
.srm-rocket-stage:focus-within .srm-label-line { width: clamp(34px, 5vw, 62px); }
.srm-rocket-stage:hover .srm-label-tag,
.srm-rocket-stage:focus-within .srm-label-tag { opacity: 1; transform: none; }
/* ---- Shared type ---- */
.srm-kicker {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--isra-sun-500);
}
.srm-h2 {
font-family: var(--font-display); font-size: clamp(30px, 4vw, 48px);
line-height: 1.05; letter-spacing: -0.02em; color: var(--isra-ink); margin: 8px 0 14px;
}
.srm-p { font-size: 16px; line-height: 1.7; color: var(--isra-graphite); margin: 0 0 16px; max-width: 56ch; }
/* padding-bottom only — must NOT reset .container's horizontal padding, or the
Launch section drifts 32px left of The record (both live inside .container). */
.srm-body { padding-bottom: 72px; }
/* ---- Launch: video + flight log ---- */
.srm-launch { padding: 60px 0 8px; }
.srm-launch-head { max-width: 640px; margin: 0 0 30px; }
.srm-launch-grid { display: grid; grid-template-columns: 320px minmax(320px, 460px); gap: 40px; align-items: stretch; justify-content: center; }
/* Landscape footage (e.g. Homis-1) — wide 16:9 video beside a narrower log. */
.srm-launch-grid.is-landscape { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 360px); }
.srm-launch-grid.is-landscape .srm-video { aspect-ratio: 16 / 9; max-height: 60vh; }
/* Custom video player */
.srm-video-frame {
margin: 0; border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
background: linear-gradient(160deg, var(--isra-navy-800), var(--isra-navy-900));
box-shadow: 0 40px 80px -36px rgba(11,22,35,0.7), inset 0 0 0 1px rgba(197,209,224,0.12);
}
.srm-video-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px; border-bottom: 1px solid rgba(197,209,224,0.12);
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--isra-navy-300); flex: none;
}
.srm-rec { display: inline-flex; align-items: center; gap: 7px; color: var(--isra-sun-300); }
.srm-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--isra-sun-500); animation: ms-pulse 1.6s ease-out infinite; }
.srm-video-frame.is-playing .srm-rec-dot { background: var(--isra-sun-500); }
.srm-video-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.srm-video { display: block; width: 100%; height: 100%; aspect-ratio: 9 / 16; max-height: 56vh; object-fit: cover; background: #000; cursor: pointer; }
.srm-video-cta {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 14px;
background: radial-gradient(60% 60% at 50% 45%, rgba(11,22,35,0.30), rgba(11,22,35,0.6));
border: 0; cursor: pointer; color: var(--isra-parchment);
transition: opacity 320ms var(--ease-standard);
}
.srm-video-frame.is-playing .srm-video-cta { opacity: 0; pointer-events: none; }
.srm-cta-ring {
display: inline-flex; align-items: center; justify-content: center;
width: 66px; height: 66px; border-radius: 50%;
color: var(--isra-parchment); background: rgba(217,122,51,0.92);
box-shadow: 0 0 0 0 rgba(217,122,51,0.5); animation: ms-pulse 2.2s ease-out infinite;
}
.srm-cta-ring svg { margin-left: 3px; }
.srm-cta-text {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--isra-parchment);
}
.srm-video-ctrls {
display: flex; align-items: center; gap: 12px; flex: none;
padding: 11px 16px; border-top: 1px solid rgba(197,209,224,0.12);
}
.srm-pp {
flex: none; width: 30px; height: 30px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid rgba(197,209,224,0.3);
color: var(--isra-parchment); cursor: pointer;
transition: background 160ms, border-color 160ms;
}
.srm-pp:hover { background: rgba(217,122,51,0.2); border-color: var(--isra-sun-400); }
.srm-prog { flex: 1 1 auto; height: 4px; border-radius: 99px; background: rgba(197,209,224,0.2); cursor: pointer; }
.srm-prog-fill { height: 100%; width: 0; border-radius: 99px; background: var(--isra-sun-500); transition: width 120ms linear; }
.srm-time { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--isra-navy-300); }
/* Flight log — navy card that fills the column height (no empty gutter) */
.srm-flightlog {
display: flex; flex-direction: column; gap: 18px;
background: var(--isra-navy-900); color: var(--isra-parchment);
border-radius: 16px; padding: 24px 26px;
box-shadow: 0 40px 80px -36px rgba(11,22,35,0.6), inset 0 0 0 1px rgba(197,209,224,0.10);
font-family: var(--font-mono);
}
.srm-fl-head {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 14px; border-bottom: 1px solid rgba(244,239,230,0.12);
}
.srm-fl-status {
font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
padding: 4px 10px; border-radius: 99px; color: var(--isra-navy-200);
background: rgba(197,209,224,0.12);
transition: color 240ms, background 240ms;
}
.srm-fl-status.is-countdown { color: var(--isra-navy-200); background: rgba(197,209,224,0.14); }
.srm-fl-status.is-nominal { color: var(--isra-sun-300); background: rgba(217,122,51,0.14); }
.srm-fl-status.is-anomaly { color: #FFB37A; background: rgba(178,94,32,0.28); }
.srm-fl-status.is-safe { color: var(--isra-forest-300); background: rgba(67,110,55,0.26); }
.srm-fl-status.is-failure { color: #FF9A8A; background: rgba(150,40,28,0.30); }
.srm-fl-clockwrap { display: flex; flex-direction: column; gap: 8px; }
.srm-fl-clock {
font-family: var(--font-display); font-size: clamp(40px, 6vw, 60px);
line-height: 0.9; color: var(--isra-parchment); letter-spacing: -0.01em;
}
.srm-fl-sign { color: var(--isra-sun-500); }
.srm-fl-hint {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--isra-navy-300);
}
.srm-flightlog.is-live .srm-fl-hint { display: none; }
.srm-fl-steps { display: flex; flex-direction: column; justify-content: space-evenly; gap: 2px; flex: 1 1 auto; }
.srm-step {
display: grid; grid-template-columns: 16px 76px 1fr; align-items: start; gap: 12px;
padding: 9px 0; font-size: 12.5px; line-height: 1.5;
border-top: 1px solid rgba(244,239,230,0.08);
opacity: 0; transform: translateY(8px);
transition: opacity 460ms var(--ease-standard), transform 460ms var(--ease-standard);
}
.srm-step.revealed { opacity: 1; transform: none; }
.srm-step-dot {
width: 8px; height: 8px; margin-top: 5px; border-radius: 50%;
background: var(--isra-sun-500); box-shadow: 0 0 0 3px rgba(217,122,51,0.18);
}
.srm-step.is-end .srm-step-dot { background: var(--isra-forest-500); box-shadow: 0 0 0 3px rgba(67,110,55,0.22); }
.srm-step-t { color: var(--isra-sun-500); }
.srm-step-body { color: var(--isra-parchment); }
.srm-step.is-end .srm-step-t, .srm-step.is-end .srm-step-body { color: var(--isra-forest-300); }
.srm-flightlog .btn { margin-top: 4px; align-self: flex-start; }
/* ---- Responsive ---- */
@media (max-width: 860px) {
.srm-hero { min-height: auto; padding: 24px 0 48px; }
.srm-hero-inner { grid-template-columns: 1fr; gap: 8px; }
.srm-hero-rocket { order: -1; min-height: 42vh; }
.srm-rocket-img { height: 40vh; }
.srm-labels { display: none; }
.srm-launch-grid { grid-template-columns: 1fr; gap: 28px; align-items: stretch; }
/* The landscape grid (.srm-launch-grid.is-landscape, 2-col) has higher
specificity than the single-`.srm-launch-grid` rule above, so it must be
overridden by name — otherwise the flight-log column keeps its 280px min and
the video column collapses to 0px wide (Homis-1's video disappeared). */
.srm-launch-grid.is-landscape { grid-template-columns: 1fr; }
.srm-video-frame { max-width: 380px; margin: 0 auto; width: 100%; }
.srm-launch-grid.is-landscape .srm-video-frame { max-width: none; }
/* Stacked single column gives the frame no definite height, so let the video's
aspect-ratio drive its height from the (definite) width rather than height:100%. */
.srm-video { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
.srm-rocket-stage, .srm-scroll-line::after, .srm-rec-dot,
.srm-cta-ring { animation: none; }
.srm-acro, .srm-full, .srm-word, .srm-word::after,
.srm-label-dot, .srm-label-line, .srm-label-tag, .srm-step { transition: none; }
.srm-label-dot { transform: scale(1); }
.srm-label-line { width: clamp(34px, 5vw, 62px); }
.srm-label-tag { opacity: 1; transform: none; }
.srm-step { opacity: 1; transform: none; }
}
/* ================================================================
HOME TEXT NAV — full-width typographic navigation sections
================================================================ */
/* Keyframes */
@keyframes about-small-fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Big duotone word — gentle rise + left→right unmask + fade (shared by both sections) */
@keyframes lx-word-reveal {
from {
opacity: 0;
transform: translateY(28px) scale(0.985);
clip-path: inset(0 14% 0 0);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
clip-path: inset(0 0% 0 0);
}
}
/* Rocket rises into the type from just below, then settles */
@keyframes rocket-liftoff {
0% { opacity: 0; transform: translateY(54px) scale(0.965); }
60% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Gentle perpetual hover-float — transform only */
@keyframes rocket-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
.home-text-nav {
display: block;
width: 100%;
padding: 72px 24px 64px;
cursor: pointer;
border: none;
background: transparent;
text-align: left;
position: relative;
overflow: hidden;
transition: background 0.3s ease;
}
.home-text-nav:hover,
.home-text-nav:focus-visible {
background: rgba(30, 58, 95, 0.025);
outline: none;
}
/* ===== Shared "photo woven into the word" sections (Launches + About) ===== */
.home-text-nav--launches,
.home-text-nav--isra {
padding: 72px 0 56px;
}
.lx-inner {
display: flex;
flex-direction: column;
}
/* Kicker + serif lead word sit as a quiet header above the giant word */
.lx-top {
display: flex;
align-items: baseline;
gap: 18px;
margin-bottom: 6px;
}
.lx-kicker {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--isra-mute);
transition: color 0.3s ease;
}
.lx-lead {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(30px, 4.4vw, 56px);
line-height: 1;
color: var(--isra-graphite);
}
/* The word — natural letterforms (no stretching), photo clipped inside */
.lx-wordwrap {
position: relative;
width: 100%;
}
.lx-word {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.lx-clip-text {
font-family: 'Anton', 'Bebas Neue', sans-serif;
font-weight: 400;
/* Anton caps ≈ 0.74em (+~2% overshoot on S/O): 238px caps top ≈ y190 − 176
= 14px inside the 200-high viewBox, so round glyphs clear the clip rect. */
font-size: 238px;
letter-spacing: -0.005em;
}
/* ISRA is only 4 letters — larger so it spans the row like LAUNCHES */
.lx-clip-text--isra {
font-size: 480px;
letter-spacing: 0.01em;
}
/* SRM rocket — small, quiet accent parked at the end of the word */
.lx-rocket {
position: absolute;
right: -1.8%;
bottom: 3%;
height: 126%;
width: auto;
z-index: 2;
pointer-events: none;
filter: drop-shadow(0 16px 22px rgba(178, 94, 32, 0.22))
drop-shadow(0 3px 8px rgba(11, 22, 35, 0.16));
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.lx-hint {
margin-top: 22px;
}
/* Hover — kicker warms on both sections */
.home-text-nav:hover .lx-kicker,
.home-text-nav:focus-visible .lx-kicker {
color: var(--isra-sun-700);
}
/* Launches hover — rocket gives a small lift */
.home-text-nav--launches:hover .lx-rocket,
.home-text-nav--launches:focus-visible .lx-rocket {
transform: translateY(-10px) scale(1.03);
}
/* Hint text */
.htn-hint {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--isra-sun-500);
opacity: 0;
margin-top: 8px;
transition: opacity 0.25s ease, transform 0.25s ease;
transform: translateY(4px);
}
.home-text-nav:hover .htn-hint,
.home-text-nav:focus-visible .htn-hint {
opacity: 0.75;
transform: translateY(0);
}
/* Override the generic .reveal fade — home-text-nav animates its children, not itself */
.home-text-nav.reveal {
opacity: 1;
transform: none;
transition: none;
}
/* Initial hidden state for children (before scroll trigger fires) — both sections */
.home-text-nav .lx-kicker,
.home-text-nav .lx-lead,
.home-text-nav .lx-word,
.home-text-nav .lx-rocket {
opacity: 0;
}
/* Refined staggered reveal — triggered by .in (added by initScrollReveal) on either section */
.home-text-nav.in .lx-kicker {
animation: about-small-fade 0.55s ease 0.05s both;
}
.home-text-nav.in .lx-lead {
animation: about-small-fade 0.6s ease 0.15s both;
}
/* The big duotone word rises + unmasks left→right + fades in */
.home-text-nav.in .lx-word {
animation: lx-word-reveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}
/* Rocket (Launches only) lifts up into place, then floats gently forever */
.home-text-nav--launches.in .lx-rocket {
animation: rocket-liftoff 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both,
rocket-float 6s ease-in-out 1.6s infinite;
}
/* Reduced motion: skip the reveals/float, just show everything */
@media (prefers-reduced-motion: reduce) {
.home-text-nav .lx-kicker,
.home-text-nav .lx-lead,
.home-text-nav .lx-word,
.home-text-nav .lx-rocket {
opacity: 1;
animation: none !important;
}
}
@media (max-width: 720px) {
.home-text-nav {
padding: 28px 20px 16px;
}
/* Container handles horizontal padding; tighten vertical rhythm on both */
.home-text-nav--launches,
.home-text-nav--isra {
padding: 64px 0 56px;
}
.lx-top {
gap: 12px;
}
.lx-rocket {
height: 116%;
right: -2%;
}
}
/* ============================================================
APPLY — crew intake dossier. All rules scoped under
.apply-intake; shared .field/.pill/.form-grid are untouched.
============================================================ */
/* the mono manifest box */
.ai-manifest {
border: 1px solid var(--isra-hairline-strong);
border-radius: var(--radius-md);
background: var(--isra-parchment-2);
padding: 20px 22px;
box-shadow: var(--shadow-1);
}
.ai-manifest-h {
display: block;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--isra-mute);
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px dashed var(--isra-hairline-strong);
}
.ai-manifest dl { margin: 0; display: flex; flex-direction: column; gap: 11px; }
.ai-manifest dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ai-manifest dt {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--isra-mute);
}
.ai-manifest dd {
margin: 0;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--isra-ink);
text-align: right;
}
/* mono note heading — reused by the Apply brief cards */
.ai-note-h {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* ============================================================
SHARED FORM TREATMENT — Apply intake + Contact comms.
Numbered mono labels, ledger-line inputs, dark launch bar.
============================================================ */
.apply-intake .form-grid, .contact-comms .form-grid { counter-reset: ai-field; align-content: start; }
.ai-form-h {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--isra-mute);
margin-bottom: -4px;
}
.ai-form-h i { flex: 1; height: 1px; background: var(--isra-hairline-strong); }
.apply-intake .field > label, .contact-comms .field > label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--isra-graphite);
}
.apply-intake .field > label::before, .contact-comms .field > label::before {
counter-increment: ai-field;
content: counter(ai-field, decimal-leading-zero) " / ";
color: var(--isra-sun-500);
letter-spacing: 0.06em;
}
.apply-intake .field input, .apply-intake .field textarea,
.contact-comms .field input, .contact-comms .field textarea {
background: transparent;
border: 0;
border-bottom: 1px solid rgba(14, 31, 51, 0.3);
border-radius: 0;
padding: 10px 2px;
font-size: 15px;
}
.apply-intake .field input:hover:not(:focus), .apply-intake .field textarea:hover:not(:focus),
.contact-comms .field input:hover:not(:focus), .contact-comms .field textarea:hover:not(:focus) {
border-bottom-color: rgba(14, 31, 51, 0.55);
transform: none;
}
.apply-intake .field input:focus, .apply-intake .field textarea:focus,
.contact-comms .field input:focus, .contact-comms .field textarea:focus {
border: 0;
border-bottom: 1.5px solid var(--isra-sun-500);
padding: 10px 2px 9.5px;
box-shadow: 0 10px 18px -14px rgba(217, 122, 51, 0.5);
}
.apply-intake .field input.invalid, .apply-intake .field textarea.invalid,
.contact-comms .field input.invalid, .contact-comms .field textarea.invalid {
border-bottom-color: var(--color-danger);
}
.apply-intake .field input.invalid:focus, .apply-intake .field textarea.invalid:focus,
.contact-comms .field input.invalid:focus, .contact-comms .field textarea.invalid:focus {
border: 0;
border-bottom: 1.5px solid var(--color-danger);
padding: 10px 2px 9.5px;
box-shadow: none;
}
/* launch bar — dark strip carrying the submit action */
.ai-launchbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
background: var(--isra-navy-900);
border-radius: var(--radius-md);
padding: 16px 20px;
box-shadow: inset 0 1px 0 rgba(236, 171, 123, 0.16), 0 18px 40px -20px rgba(5, 12, 22, 0.55);
}
.ai-launchbar-note {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--isra-navy-300);
}
.ai-launchbar-note strong { color: var(--isra-parchment); font-weight: 500; }
.ai-launchbar-note .crew-status-dot { background: var(--isra-sun-400); }
/* ============================================================
MISSIONS — "The Ascent Log". One night-sky page: the intro
gradient stretched over the whole log, a sticky rocket riding
the altitude rail, and full-width flight-record rows that
alternate sides as the sky descends to parchment.
============================================================ */
/* Dark page base: shows in the strip behind the now-transparent sticky header
(and on overscroll), so the bar blends seamlessly into each page's night sky.
The parchment "ground" still comes from the .cosmic-page gradient itself. */
body.missions-cosmic { background: var(--isra-ink); }
body.flight-cosmic { background: var(--isra-ink); }
.asc-page {
position: relative;
isolation: isolate;
/* background comes from the shared .cosmic-page recipe (end of file) */
}
.asc-sky {
position: absolute;
top: 0; left: 0; right: 0;
height: clamp(560px, 90vh, 820px);
pointer-events: none;
isolation: isolate;
}
/* Head zone */
.asc-head { padding: 56px 0 8px; position: relative; }
.asc-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--isra-sun-400);
margin-bottom: 14px;
}
.asc-h1 {
font-family: var(--font-display);
font-size: clamp(40px, 6.2vw, 68px);
line-height: 1.06;
letter-spacing: -0.025em;
color: var(--isra-parchment);
margin: 0 0 20px;
text-shadow: 0 2px 36px rgba(2, 8, 16, 0.4);
}
.asc-h1 .tw-cursor { color: var(--isra-sun-400); }
.asc-lede {
max-width: 560px;
color: var(--isra-navy-200);
font-size: 17px;
line-height: 1.65;
margin: 0 0 36px;
}
/* Mission-control readout (the old status strip, re-imagined) */
.asc-ctrl {
border-radius: 12px;
padding: 18px 24px;
background: rgba(244, 239, 230, 0.045);
box-shadow: inset 0 0 0 1px rgba(197, 209, 224, 0.16);
backdrop-filter: blur(2px);
}
.asc-ctrl-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 12px;
border-bottom: 1px solid rgba(197, 209, 224, 0.12);
}
.asc-ctrl-eyebrow {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--isra-navy-300);
}
.asc-live {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--isra-sun-300);
}
.asc-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--isra-sun-500);
animation: ms-pulse 2s ease-out infinite;
}
.asc-ctrl-stats { display: flex; }
.asc-stat {
flex: 1 1 0;
display: flex;
align-items: baseline;
gap: 14px;
padding: 16px 22px 4px 0;
}
.asc-stat + .asc-stat { padding-left: 22px; border-left: 1px solid rgba(197, 209, 224, 0.12); }
.asc-stat-value {
font-family: var(--font-display);
font-size: clamp(30px, 3vw, 40px);
line-height: 0.9;
color: var(--isra-parchment);
}
.asc-stat-label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--isra-navy-200);
}
.asc-stat-note {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--isra-navy-300);
margin-top: 4px;
}
/* Log: altitude rail + rows */
.asc-log { padding: 24px 0 72px; }
.asc-log-grid {
display: grid;
grid-template-columns: clamp(48px, 6vw, 84px) minmax(0, 1fr);
}
.asc-railcol { position: relative; }
.asc-rail-line {
position: absolute;
top: 12px; bottom: 12px; left: 50%;
width: 1px;
background: linear-gradient(180deg,
rgba(197, 209, 224, 0.38) 0%,
rgba(197, 209, 224, 0.28) 45%,
rgba(14, 31, 51, 0.25) 78%,
rgba(217, 122, 51, 0.45) 100%);
}
.asc-tick {
position: absolute;
left: 50%;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.asc-tick i { display: block; width: 7px; height: 1px; background: currentColor; opacity: 0.7; }
.asc-tick--top { top: 6px; color: var(--isra-navy-200); }
.asc-tick--base { bottom: 6px; color: var(--isra-graphite); }
/* The rocket rides the rail as you scroll — pure CSS sticky, zero JS. */
.asc-marker {
position: sticky;
top: 46vh;
display: block;
width: 24px;
margin: 0 auto;
color: var(--isra-sun-400);
filter: drop-shadow(0 0 8px rgba(217, 122, 51, 0.45));
}
.asc-marker svg { transform: rotate(-45deg); display: block; margin: 0 auto; }
.asc-row {
position: relative;
padding: clamp(44px, 6vw, 72px) 0;
border-top: 1px solid rgba(197, 209, 224, 0.12);
}
.asc-rows .asc-row:first-child { border-top: 0; }
.asc-row-inner {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
.asc-row:nth-child(even) .asc-row-stage { order: -1; }
.asc-row:nth-child(even) .asc-row-inner {
grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
}
.asc-row[data-go] { cursor: pointer; }
.asc-row[data-go]:focus-visible {
outline: 2px solid var(--isra-sun-500);
outline-offset: 4px;
border-radius: 8px;
}
.asc-row-top {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.asc-no {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--isra-sun-400);
}
.asc-name {
font-family: var(--font-display);
font-size: clamp(44px, 7vw, 92px);
line-height: 0.92;
letter-spacing: -0.03em;
color: var(--isra-parchment);
margin: 0 0 12px;
transition: text-shadow 400ms var(--ease-standard);
}
.asc-name::after { content: "."; color: var(--isra-sun-500); }
.asc-headline {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(18px, 2vw, 24px);
line-height: 1.35;
color: var(--isra-navy-200);
margin: 0 0 18px;
max-width: 480px;
}
.asc-chips {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--isra-navy-300);
margin-bottom: 16px;
}
.asc-chips > span {
display: inline-flex;
align-items: center;
gap: 6px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(197, 209, 224, 0.18);
}
.asc-summary {
font-size: 15.5px;
line-height: 1.65;
color: var(--isra-navy-200);
max-width: 52ch;
margin: 0 0 22px;
}
.asc-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--isra-sun-400);
}
.asc-cta-arrow { display: inline-block; transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.asc-row[data-go]:hover .asc-cta-arrow,
.asc-row[data-go]:focus-visible .asc-cta-arrow { transform: translateX(6px); }
.asc-row[data-go]:hover .asc-name,
.asc-row[data-go]:focus-visible .asc-name { text-shadow: 0 0 28px rgba(217, 122, 51, 0.35); }
.asc-cta--plan { color: var(--isra-graphite); }
/* Stage panel — each rocket parked on its own patch of night sky */
.asc-row-stage {
position: relative;
isolation: isolate;
border-radius: 16px;
padding: 28px 20px;
min-height: 320px;
display: grid;
place-items: center;
overflow: hidden;
background:
radial-gradient(120% 100% at 70% 0%, rgba(217, 122, 51, 0.12), transparent 55%),
linear-gradient(165deg, var(--isra-navy-800), var(--isra-navy-900));
box-shadow: 0 40px 80px -36px rgba(2, 8, 16, 0.8), inset 0 0 0 1px rgba(197, 209, 224, 0.12);
}
.asc-stage-sky { position: absolute; inset: 0; isolation: isolate; pointer-events: none; }
.asc-rocket {
position: relative;
height: clamp(240px, 34vh, 340px);
width: auto;
max-width: 100%;
object-fit: contain;
filter: drop-shadow(0 24px 36px rgba(2, 8, 16, 0.6));
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.asc-row[data-go]:hover .asc-rocket,
.asc-row[data-go]:focus-visible .asc-rocket { transform: translateY(-10px); }
/* Ground row — the gradient has landed on parchment by the time the
planning mission renders (planning rows stay last in MISSIONS). */
.asc-row--ground { border-top-color: var(--isra-hairline-strong); }
.asc-row--ground .asc-name { color: var(--isra-ink); }
.asc-row--ground .asc-headline { color: var(--isra-graphite); }
.asc-row--ground .asc-summary { color: var(--isra-graphite); }
.asc-row--ground .asc-chips { color: var(--isra-mute); }
.asc-row--ground .asc-chips > span { border-bottom-color: var(--isra-hairline-strong); }
.asc-row--ground .asc-no { color: var(--isra-sun-700); }
.asc-blueprint {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
height: 100%;
min-height: 264px;
color: var(--isra-navy-200);
}
.asc-bp-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(197, 209, 224, 0.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(197, 209, 224, 0.10) 1px, transparent 1px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(80% 80% at 50% 45%, #000 55%, transparent 100%);
mask-image: radial-gradient(80% 80% at 50% 45%, #000 55%, transparent 100%);
}
.asc-bp-mark {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px; height: 56px;
border-radius: 50%;
color: var(--isra-sun-400);
box-shadow: inset 0 0 0 1px rgba(236, 171, 123, 0.45);
background: rgba(217, 122, 51, 0.10);
}
.asc-bp-stamp {
position: relative;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--isra-navy-300);
}
.asc-bp-num {
position: absolute;
bottom: 10px; right: 14px;
font-family: var(--font-display);
font-size: 40px;
line-height: 1;
color: rgba(197, 209, 224, 0.16);
}
@media (max-width: 900px) {
.asc-log-grid { grid-template-columns: 1fr; }
.asc-railcol { display: none; }
.asc-row-inner,
.asc-row:nth-child(even) .asc-row-inner { grid-template-columns: 1fr; gap: 24px; }
.asc-row-stage,
.asc-row:nth-child(even) .asc-row-stage { order: -1; min-height: 240px; }
.asc-rocket { height: 200px; }
.asc-name { font-size: clamp(40px, 13vw, 64px); }
}
@media (max-width: 680px) {
.asc-ctrl-stats { flex-direction: column; }
.asc-stat { padding: 14px 0 0; }
.asc-stat + .asc-stat { padding-left: 0; border-left: 0; border-top: 1px solid rgba(197, 209, 224, 0.12); padding-top: 14px; margin-top: 12px; }
}
/* ============================================================
FLIGHT RECORD — additions to the bespoke mission detail page:
chapter rail, telemetry strip, static index line, and the
photographic record that descends from night sky to parchment.
============================================================ */
.srm-page { position: relative; }
.fr-rail {
position: absolute;
top: 0; bottom: 0;
left: clamp(18px, 3vw, 44px);
width: 1px;
pointer-events: none;
z-index: 2;
}
.fr-rail-line {
position: absolute;
inset: 24px 0;
width: 1px;
background: linear-gradient(180deg,
rgba(197, 209, 224, 0.32) 0%,
rgba(197, 209, 224, 0.22) 55%,
rgba(14, 31, 51, 0.22) 80%,
rgba(217, 122, 51, 0.4) 100%);
}
.fr-rail-tick {
position: absolute;
left: 0;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--isra-navy-300);
}
.fr-rail-tick i { display: block; width: 7px; height: 1px; background: currentColor; opacity: 0.7; }
@media (max-width: 1100px) { .fr-rail { display: none; } }
.fr-telem {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--isra-navy-300);
padding: 8px 0;
border-top: 1px solid rgba(197, 209, 224, 0.14);
border-bottom: 1px solid rgba(197, 209, 224, 0.14);
margin-bottom: 18px;
}
/* Static index line (the old ticker's words, standing still) */
.fr-index {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: 10px 18px;
padding: 18px clamp(20px, 4vw, 48px);
background: var(--isra-navy-900);
border-top: 1px solid rgba(197, 209, 224, 0.12);
border-bottom: 1px solid rgba(197, 209, 224, 0.12);
font-family: var(--font-display);
font-style: italic;
font-size: clamp(16px, 2vw, 24px);
color: var(--isra-navy-100);
text-align: center;
}
.fr-index-sep { font-style: normal; color: var(--isra-sun-500); }
/* The record — sky descends to parchment across this section */
.fr-record {
padding: 72px 0 64px;
background:
/* dawn glow at the horizon — same warmth as the intro sky */
radial-gradient(90% 40% at 50% 62%, rgba(217, 122, 51, 0.16), transparent 70%),
linear-gradient(180deg,
var(--isra-navy-800) 0%,
var(--isra-navy-500) 38%,
var(--isra-navy-300) 60%,
var(--isra-parchment-2) 84%,
var(--isra-parchment) 100%);
}
.fr-record-head { margin-bottom: 8px; }
.fr-record-head .srm-kicker { color: var(--isra-sun-400); }
.fr-h2 { color: var(--isra-parchment); }
/* Asymmetric collage — static, scroll-revealed, hover-zoom only */
.fr-collage {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 28px 24px;
margin: 36px 0 56px;
}
.fr-fig { margin: 0; }
.fr-fig--0 { grid-column: 1 / span 7; }
.fr-fig--1 { grid-column: 8 / span 5; margin-top: 64px; }
.fr-fig--2 { grid-column: 2 / span 5; margin-top: -16px; }
.fr-fig--3 { grid-column: 7 / span 6; margin-top: 40px; }
.fr-fig-media {
position: relative;
overflow: hidden;
border-radius: 12px;
aspect-ratio: 4 / 3;
background: linear-gradient(160deg, var(--isra-navy-800), var(--isra-navy-900));
box-shadow: 0 30px 60px -30px rgba(2, 8, 16, 0.6), inset 0 0 0 1px rgba(197, 209, 224, 0.10);
}
.fr-fig--1 .fr-fig-media { aspect-ratio: 3 / 4; }
.fr-fig-media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fr-fig:hover .fr-fig-media img { transform: scale(1.05); }
/* Sideways shot (7.jpg): rotate -90 and scale to cover without distortion */
.fr-fig-media .srm-rot {
position: absolute; top: 50%; left: 50%;
width: auto; height: 100%; max-width: none; object-fit: cover;
transform: translate(-50%, -50%) rotate(-90deg) scale(1.4);
}
.fr-fig:hover .fr-fig-media .srm-rot { transform: translate(-50%, -50%) rotate(-90deg) scale(1.46); }
/* Caption chip — legible at any altitude of the gradient */
.fr-fig-cap {
display: inline-flex;
flex-direction: column;
gap: 2px;
margin-top: 12px;
padding: 9px 14px;
border-radius: 8px;
background: rgba(11, 22, 35, 0.82);
box-shadow: inset 0 0 0 1px rgba(197, 209, 224, 0.14);
color: var(--isra-parchment);
font-family: var(--font-display);
font-size: 18px;
backdrop-filter: blur(6px);
}
.fr-fig-cap .srm-kicker { color: var(--isra-sun-400); }
/* Dossier — the brief / the outcome */
.fr-dossier {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 980px;
margin: 0 auto;
}
.fr-note {
border-radius: 14px;
padding: 26px 28px;
background: var(--isra-navy-900);
color: var(--isra-parchment);
box-shadow: inset 0 0 0 1px rgba(197, 209, 224, 0.12), 0 30px 60px -32px rgba(2, 8, 16, 0.55);
}
.fr-note-head {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--isra-sun-400);
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(244, 239, 230, 0.12);
}
.fr-note p { font-size: 15px; line-height: 1.7; margin: 0; }
@media (max-width: 860px) {
.fr-collage { display: flex; flex-direction: column; gap: 28px; }
.fr-fig { margin-top: 0 !important; }
.fr-dossier { grid-template-columns: 1fr; }
.fr-index { font-size: 16px; }
.fr-telem { font-size: 9.5px; letter-spacing: 0.16em; }
}
/* Reduced motion — still the night sky, just still */
@media (prefers-reduced-motion: reduce) {
.asc-sky .intro-sky::after,
.asc-stage-sky .intro-sky::after,
.fr-sky .intro-sky::after { animation: none; }
.asc-dot { animation: none; }
.asc-rocket, .asc-cta-arrow, .asc-name { transition: none; }
.fr-fig-media img, .fr-fig-media .srm-rot { transition: none; }
}
/* ============================================================
ASSOCIATION — "Observatory dossier". One night-sky descent:
hero in orbit → story chapters → captain's log → charter →
flight record / test footage / archive / crew on the ground.
============================================================ */
body.about-cosmic { background: var(--isra-ink); }
.ab-page {
position: relative;
isolation: isolate;
/* Dark through the charter (~48% of the page); .ab-ground's local fade
handles the touchdown. Background comes from the shared .cosmic-page
recipe (end of file) with --sky-end: 72%. */
}
/* Opaque parchment floor under record/test/archive/crew. Its own short fade
does the night→ground blend inside the record's top padding, immune to
page-height drift. */
.ab-ground,
.cosmic-ground {
position: relative;
background: linear-gradient(180deg,
rgba(244, 239, 230, 0) 0px,
rgba(236, 228, 213, 0.9) 220px,
var(--isra-parchment) 420px);
}
/* shared heads */
.ab-kicker {
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--isra-sun-400);
margin-bottom: 14px;
}
.ab-kicker--ground { color: var(--isra-sun-700); }
.ab-h2 {
font-family: var(--font-display);
font-size: clamp(32px, 4.4vw, 54px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--isra-parchment);
margin: 0 0 28px;
}
.ab-h2 em { font-style: italic; color: var(--isra-sun-400); }
.ab-h2--ground { color: var(--isra-ink); }
.ab-h2--ground em { color: var(--isra-sun-500); }
/* 1 · hero */
.ab-hero { padding: 56px 0 16px; position: relative; }
.ab-h1 {
font-family: var(--font-display);
font-size: clamp(40px, 7vw, 84px);
line-height: 1.04;
letter-spacing: -0.025em;
color: var(--isra-parchment);
text-shadow: 0 2px 36px rgba(2, 8, 16, 0.4);
margin: 0 0 22px;
}
.ab-h1 .tw-cursor-fade { color: var(--isra-sun-400); }
.ab-lede {
font-size: 17.5px;
line-height: 1.65;
color: var(--isra-navy-200);
max-width: 560px;
margin: 0 0 28px;
}
.ab-chips {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--isra-navy-300);
}
.ab-chips > span { padding-bottom: 5px; border-bottom: 1px solid rgba(197, 209, 224, 0.18); }
/* 2 · story chapters on the altitude rail */
.ab-story { padding: 32px 0 24px; }
.ab-story-grid {
display: grid;
grid-template-columns: clamp(48px, 6vw, 84px) minmax(0, 1fr);
}
.ab-row {
position: relative;
padding: clamp(40px, 5.5vw, 64px) 0;
border-top: 1px solid rgba(197, 209, 224, 0.12);
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
.ab-rows .ab-row:first-child { border-top: 0; }
.ab-row:nth-child(even) { grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr); }
.ab-row:nth-child(even) .ab-row-stage { order: -1; }
.ab-ch {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--isra-navy-300);
margin-bottom: 14px;
}
.ab-ch-n { color: var(--isra-sun-400); }
.ab-ch-sep { opacity: 0.5; margin: 0 3px; }
.ab-row-title {
font-family: var(--font-display);
font-size: clamp(30px, 4.4vw, 52px);
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--isra-parchment);
margin: 0 0 16px;
}
.ab-row-title em { font-style: italic; color: var(--isra-sun-400); }
.ab-row-body {
font-size: 15.5px;
line-height: 1.7;
color: var(--isra-navy-200);
max-width: 52ch;
margin: 0;
}
.ab-row-stage {
position: relative;
isolation: isolate;
margin: 0;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 4 / 3;
background: linear-gradient(165deg, var(--isra-navy-800), var(--isra-navy-900));
box-shadow: 0 40px 80px -36px rgba(2, 8, 16, 0.8), inset 0 0 0 1px rgba(197, 209, 224, 0.12);
}
.ab-row-stage img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* color treatment + readable footing for the caption, per the house image rules */
.ab-row-stage::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: var(--isra-navy-700);
mix-blend-mode: multiply;
opacity: 0.28;
}
.ab-row-stage::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to top, rgba(7, 18, 31, 0.6), transparent 48%);
}
.ab-row:hover .ab-row-stage img { transform: scale(1.035); }
.ab-row-cap {
position: absolute;
left: 14px;
bottom: 12px;
z-index: 2;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--isra-parchment);
}
/* 3 · captain's log */
.ab-logwrap { padding: clamp(48px, 6vw, 80px) 0 0; }
.ab-log {
max-width: 760px;
border-radius: var(--radius-lg);
padding: clamp(28px, 4vw, 52px);
background: rgba(7, 16, 27, 0.55);
box-shadow: inset 0 0 0 1px rgba(197, 209, 224, 0.14), 0 30px 70px -28px rgba(5, 12, 22, 0.6);
backdrop-filter: blur(3px);
color: var(--isra-navy-100);
font-size: 17.5px;
line-height: 1.75;
}
.ab-log p { margin: 0 0 18px; }
.ab-log p:last-child { margin-bottom: 0; }
.ab-log-head {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--isra-navy-300);
margin-bottom: 22px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(197, 209, 224, 0.14);
}
.ab-dropcap::first-letter {
font-family: var(--font-display);
font-size: 64px;
line-height: 0.82;
float: left;
padding: 6px 12px 0 0;
color: var(--isra-sun-400);
}
.ab-pullquote {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(21px, 2.6vw, 27px);
line-height: 1.5;
margin: 30px 0 !important;
padding-left: 24px;
border-left: 3px solid var(--isra-sun-500);
color: var(--isra-parchment);
}
/* 4 · charter — four static lines */
.ab-charter { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); }
.ab-charter-line {
display: grid;
grid-template-columns: clamp(72px, 9vw, 140px) minmax(0, 1fr);
gap: clamp(18px, 3vw, 32px);
padding: clamp(26px, 3.6vw, 44px) 0;
border-top: 1px solid rgba(197, 209, 224, 0.16);
}
.ab-charter-n {
font-family: var(--font-display);
font-size: clamp(48px, 8vw, 110px);
line-height: 0.85;
color: rgba(197, 209, 224, 0.20);
}
.ab-charter-tag {
display: block;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--isra-sun-400);
margin-bottom: 10px;
}
.ab-charter-principle {
font-family: var(--font-display);
font-size: clamp(26px, 4.2vw, 50px);
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--isra-parchment);
margin: 0 0 12px;
text-shadow: 0 1px 24px rgba(2, 8, 16, 0.35);
}
.ab-charter-body {
font-size: 15px;
line-height: 1.65;
color: var(--isra-navy-100);
max-width: 58ch;
margin: 0;
}
/* 5 · flight record (ground zone — top padding absorbs the descent fade) */
.ab-record { padding: clamp(96px, 13vw, 170px) 0 8px; }
.ab-miles { position: relative; margin-top: 8px; max-width: 880px; }
.ab-miles::before {
content: "";
position: absolute;
top: 8px;
bottom: 8px;
left: clamp(86px, 10vw, 110px);
width: 1px;
background: linear-gradient(180deg, var(--isra-sun-500), var(--isra-forest-300) 70%, transparent);
opacity: 0.55;
}
.ab-mile {
position: relative;
display: grid;
grid-template-columns: clamp(64px, 8vw, 88px) minmax(0, 1fr) auto;
gap: clamp(18px, 3vw, 34px);
align-items: start;
padding: 22px 0;
}
.ab-mile + .ab-mile { border-top: 1px dashed rgba(30, 58, 95, 0.14); }
.ab-mile-node {
position: absolute;
left: clamp(86px, 10vw, 110px);
top: 31px;
width: 9px;
height: 9px;
border-radius: 50%;
transform: translateX(-50%);
background: var(--isra-sun-500);
box-shadow: 0 0 0 3px rgba(217, 122, 51, 0.18);
}
.ab-mile--next .ab-mile-node {
background: var(--isra-forest-500);
box-shadow: 0 0 0 0 rgba(67, 110, 55, 0.5);
animation: crew-pulse 2.4s var(--ease-standard) infinite;
}
.ab-mile-date {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--isra-sun-700);
padding-top: 6px;
}
.ab-mile--next .ab-mile-date { color: var(--isra-forest-700); }
.ab-mile-body { padding-left: clamp(28px, 4vw, 48px); }
.ab-mile-title {
font-family: var(--font-display);
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--isra-ink);
margin: 0 0 6px;
}
.ab-mile-text {
font-size: 14.5px;
line-height: 1.6;
color: var(--isra-graphite);
max-width: 56ch;
margin: 0;
}
.ab-mile-thumb {
width: clamp(112px, 12vw, 148px);
border-radius: 8px;
overflow: hidden;
background: var(--isra-parchment-2);
box-shadow: var(--shadow-2);
transform: rotate(1.6deg);
transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms var(--ease-standard);
}
.ab-mile:nth-child(odd) .ab-mile-thumb { transform: rotate(-1.6deg); }
.ab-mile-thumb img { width: 100%; height: 92px; object-fit: cover; display: block; }
.ab-mile:hover .ab-mile-thumb { transform: rotate(0deg) scale(1.05); box-shadow: var(--shadow-3); }
/* 6 · built/tested video panel */
.ab-testwrap { padding: clamp(56px, 7vw, 88px) 0 0; }
.ab-test {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 56px);
align-items: stretch;
}
.ab-test-media { position: relative; min-height: clamp(440px, 58vh, 580px); }
/* cover-fit the mission player inside this column (it defaults to portrait) */
.ab-test-media .srm-video-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 420ms var(--ease-standard);
}
.ab-test-media .srm-video-stage { height: 100%; }
.ab-test-media .srm-video {
width: 100%;
height: 100%;
aspect-ratio: auto;
max-height: none;
object-fit: cover;
background: radial-gradient(120% 90% at 50% 18%, #1b2c3f 0%, #0b1623 60%, #07101b 100%);
}
.ab-test-media:hover .srm-video-frame {
transform: translateY(-6px);
box-shadow: 0 26px 60px -20px rgba(217, 122, 51, 0.22), 0 8px 18px rgba(14, 31, 51, 0.12);
}
.ab-test-copy { display: flex; flex-direction: column; justify-content: center; }
.ab-test-body {
font-size: 16px;
line-height: 1.7;
color: var(--isra-graphite);
max-width: 54ch;
margin: 0 0 26px;
}
.ab-test-credits { display: flex; gap: 14px; flex-wrap: wrap; }
.ab-test-credit {
display: flex;
flex-direction: column;
gap: 3px;
padding: 14px 18px;
border-radius: var(--radius-md);
background: var(--isra-parchment-2);
box-shadow: inset 0 0 0 1px var(--isra-hairline-strong);
}
.ab-tc-tag {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--isra-sun-700);
}
.ab-tc-name {
font-family: var(--font-display);
font-size: 22px;
line-height: 1.1;
color: var(--isra-ink);
}
.ab-tc-note {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--isra-mute);
}
/* 7 · archive — wired to the gallery lightbox */
.ab-archive { padding: clamp(64px, 8vw, 104px) 0 8px; }
.ab-archive-lede {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(16px, 1.8vw, 20px);
color: var(--isra-graphite);
margin: -14px 0 30px;
}
.ab-archive-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: clamp(14px, 1.8vw, 22px);
}
.ab-cell {
grid-column: span 2;
position: relative;
display: block;
padding: 0;
border: 0;
border-radius: 12px;
overflow: hidden;
cursor: zoom-in;
background: var(--isra-navy-900);
box-shadow: 0 18px 40px -18px rgba(14, 31, 51, 0.35), 0 4px 12px rgba(14, 31, 51, 0.08);
transition: box-shadow 360ms var(--ease-standard);
}
/* editorial stagger — margin (not transform) so .reveal.in can't erase it */
.ab-cell:nth-child(3n + 2) { margin-top: clamp(14px, 2.2vw, 30px); }
.ab-cell { aspect-ratio: 4 / 3; }
.ab-cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-cell-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: baseline;
gap: 8px;
padding: 22px 14px 11px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: left;
color: var(--isra-parchment);
background: linear-gradient(to top, rgba(7, 18, 31, 0.78), transparent);
opacity: 0;
transform: translateY(6px);
transition: opacity 320ms var(--ease-standard), transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-cell-n { color: var(--isra-sun-400); }
.ab-cell:hover img, .ab-cell:focus-visible img { transform: scale(1.045); }
.ab-cell:hover .ab-cell-bar, .ab-cell:focus-visible .ab-cell-bar { opacity: 1; transform: none; }
.ab-cell:hover, .ab-cell:focus-visible {
box-shadow: 0 26px 54px -18px rgba(217, 122, 51, 0.28), 0 6px 16px rgba(14, 31, 51, 0.12);
}
.ab-cell:focus-visible { outline: 2px solid var(--isra-sun-500); outline-offset: 3px; }
.ab-cell:active img { transform: scale(1.01); }
/* 8 · crew finale — dark console panel on the parchment ground */
.ab-crewwrap { padding: clamp(64px, 8vw, 104px) 0 clamp(48px, 6vw, 72px); }
.ab-crew {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--radius-lg);
padding: clamp(32px, 4.5vw, 64px) clamp(24px, 4vw, 56px);
background:
radial-gradient(110% 70% at 85% 0%, rgba(217, 122, 51, 0.12), transparent 55%),
radial-gradient(80% 80% at 8% 100%, rgba(69, 105, 160, 0.16), transparent 65%),
linear-gradient(165deg, var(--isra-navy-800), var(--isra-navy-900));
box-shadow: inset 0 0 0 1px rgba(197, 209, 224, 0.12), 0 40px 90px -40px rgba(2, 8, 16, 0.8);
}
.ab-crew::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--isra-sun-500) 30%, var(--crew-cyan) 70%, transparent);
opacity: 0.7;
}
.ab-crew-inner { position: relative; z-index: 2; }
.ab-crew-head {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--crew-cyan);
}
.ab-crew-title {
font-family: var(--font-display);
font-size: clamp(34px, 4.4vw, 52px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--isra-parchment);
margin: 14px 0 8px;
}
.ab-crew-title em { font-style: italic; color: var(--isra-sun-400); }
/* ---- responsive ---- */
@media (max-width: 1200px) {
.asc-tick-x { display: none; }
}
@media (max-width: 900px) {
.ab-story-grid { grid-template-columns: 1fr; }
.ab-story-grid .asc-railcol { display: none; }
.ab-row, .ab-row:nth-child(even) { grid-template-columns: 1fr; gap: 22px; }
.ab-row-stage, .ab-row:nth-child(even) .ab-row-stage { order: -1; }
.ab-test { grid-template-columns: 1fr; }
.ab-test-media { min-height: 380px; }
}
@media (max-width: 720px) {
.ab-mile { grid-template-columns: 1fr; gap: 8px; }
.ab-miles::before, .ab-mile-node { display: none; }
.ab-mile-body { padding-left: 0; }
.ab-mile-thumb { width: 148px; margin-top: 6px; }
.ab-charter-line { grid-template-columns: 1fr; gap: 8px; }
.ab-charter-n { font-size: 44px; }
.ab-cell { grid-column: span 3; }
.ab-cell:nth-child(3n + 2) { margin-top: 0; }
.ab-log { font-size: 16px; }
}
@media (max-width: 480px) {
.ab-cell { grid-column: span 6; }
}
/* ============================================================
COSMIC PAGE FEEL — slower, softer reveals + gradual hero
fade-in, scoped to the missions + association night pages.
============================================================ */
body.missions-cosmic .reveal,
body.about-cosmic .reveal,
body.supporters-cosmic .reveal,
body.media-cosmic .reveal,
body.apply-cosmic .reveal,
body.contact-cosmic .reveal,
body.home-cosmic .reveal {
/* matches the 3-part transition list: opacity, transform, filter */
transition-duration: 950ms, 1050ms, 950ms;
}
body.missions-cosmic .reveal--rise,
body.about-cosmic .reveal--rise,
body.supporters-cosmic .reveal--rise,
body.media-cosmic .reveal--rise,
body.apply-cosmic .reveal--rise,
body.contact-cosmic .reveal--rise,
body.home-cosmic .reveal--rise { transform: translateY(26px); }
body.missions-cosmic .reveal.in,
body.about-cosmic .reveal.in,
body.supporters-cosmic .reveal.in,
body.media-cosmic .reveal.in,
body.apply-cosmic .reveal.in,
body.contact-cosmic .reveal.in,
body.home-cosmic .reveal.in { transform: none; }
/* footer sits flush against the night pages — no parchment seam */
body.missions-cosmic .app-footer,
body.about-cosmic .app-footer,
body.supporters-cosmic .app-footer,
body.media-cosmic .app-footer,
body.apply-cosmic .app-footer,
body.contact-cosmic .app-footer,
body.home-cosmic .app-footer { margin-top: 0; }
/* gradual staggered hero entrance on first visit (main.page-enter) */
@keyframes cos-hero-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
main.page-enter .asc-eyebrow, main.page-enter .asc-h1,
main.page-enter .asc-lede, main.page-enter .asc-ctrl,
main.page-enter .ab-kicker, main.page-enter .ab-h1,
main.page-enter .ab-lede, main.page-enter .ab-chips,
main.page-enter .ap-kicker, main.page-enter .ap-h1,
main.page-enter .ct-h1, main.page-enter .ap-lede,
main.page-enter .ct-lede, main.page-enter .ap-chips,
main.page-enter .ap-begin {
animation: cos-hero-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
main.page-enter .asc-h1, main.page-enter .ab-h1,
main.page-enter .ap-h1, main.page-enter .ct-h1 { animation-delay: 160ms; }
main.page-enter .asc-lede, main.page-enter .ab-lede,
main.page-enter .ap-lede, main.page-enter .ct-lede { animation-delay: 320ms; }
main.page-enter .asc-ctrl, main.page-enter .ab-chips,
main.page-enter .ap-chips, main.page-enter .ap-begin { animation-delay: 480ms; }
@media (prefers-reduced-motion: reduce) {
main.page-enter .asc-eyebrow, main.page-enter .asc-h1,
main.page-enter .asc-lede, main.page-enter .asc-ctrl,
main.page-enter .ab-kicker, main.page-enter .ab-h1,
main.page-enter .ab-lede, main.page-enter .ab-chips,
main.page-enter .ap-kicker, main.page-enter .ap-h1,
main.page-enter .ct-h1, main.page-enter .ap-lede,
main.page-enter .ct-lede, main.page-enter .ap-chips,
main.page-enter .ap-begin { animation: none; }
.ab-row-stage img, .ab-row:hover .ab-row-stage img { transition: none; transform: none; }
.ab-cell img, .ab-cell-bar { transition: none; }
.ab-cell-bar { opacity: 1; transform: none; }
.ab-mile-thumb, .ab-mile:hover .ab-mile-thumb { transform: none; transition: none; }
.ab-mile--next .ab-mile-node { animation: none; }
.ab-test-media .srm-video-frame, .ab-test-media:hover .srm-video-frame { transform: none; transition: none; }
}
/* ============================================================
SHARED COSMIC SKY — the intro-screen gradient as a reusable
recipe. --sky-end = the % of the element's height where full
parchment arrives (the intro reads as --sky-end: 100%). Every
color stop and the dawn glow scale off that single variable,
so all pages share the intro's pacing — deep ink, long navy
descent, warm orange glow at the horizon — at their own
dark-zone depth. .intro-screen itself is intentionally NOT
refactored; it stays the untouched reference.
============================================================ */
.cosmic-page {
--sky-end: 100%;
--sky-ground: var(--isra-parchment);
position: relative;
isolation: isolate;
background:
radial-gradient(90% calc(var(--sky-end) * 0.36) at 50% calc(var(--sky-end) * 0.8),
rgba(217, 122, 51, 0.16), transparent 70%),
linear-gradient(180deg,
var(--isra-ink) 0%,
var(--isra-navy-900) calc(var(--sky-end) * 0.32),
var(--isra-navy-700) calc(var(--sky-end) * 0.56),
var(--isra-navy-500) calc(var(--sky-end) * 0.70),
var(--isra-navy-300) calc(var(--sky-end) * 0.80),
var(--isra-parchment-2) calc(var(--sky-end) * 0.91),
var(--sky-ground) var(--sky-end));
}
/* per-page horizon depths */
.ab-page { --sky-end: 72%; }
/* Apply + Contact: px-based horizons (like .mp-page) so the dawn band stays
glued to the hero while form height shifts with errors and textareas. */
body.apply-cosmic, body.contact-cosmic { background: var(--isra-ink); }
.ap-page { --sky-end: clamp(960px, 78vw, 1180px); }
.ct-page { --sky-end: clamp(700px, 60vw, 880px); }
/* Success screens: a longer sky + matching min-height keeps the receipt,
note, and CTAs in the navy zone and lands parchment just before the footer. */
.ap-page--done, .ct-page--done { --sky-end: 1240px; min-height: 1240px; }
@media (max-width: 720px) {
/* Stacked glass cards reach much deeper on phones — push the horizon down
so the last card still sits in the navy zone and parchment arrives at
the form. */
.ap-page { --sky-end: 2100px; }
.ct-page { --sky-end: 1700px; }
.ap-page--done, .ct-page--done { --sky-end: 1560px; min-height: 1560px; }
}
/* ============================================================
MEDIA — "The Broadcast". Cosmic rewrite: the transmission hero
(eyebrow, typewriter title, ticker, console player) hangs in
the shared intro-recipe night sky, the dawn glow halos the
player, and the channel words + direct line land on parchment
ground. Content unchanged — presentation only.
============================================================ */
body.media-cosmic { background: var(--isra-ink); }
/* px-based horizon: parchment arrives just under the player so the
dawn band stays glued to the hero across page-height changes. */
.mp-page { --sky-end: clamp(700px, 104vw, 1330px); }
/* ---- Broadcast top block (hero + player merged, tight rhythm) ---- */
.mp-top { position: relative; padding: clamp(36px, 5.4vw, 64px) 0 clamp(140px, 16vw, 200px); }
.mp-top-head {
display: flex; align-items: center; justify-content: space-between;
gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
}
.mp-eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--isra-sun-400);
}
.mp-eyebrow::before { content: ""; width: 26px; height: 1px; background: rgba(197, 209, 224, 0.35); }
.mp-eyebrow .mp-live-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--isra-sun-500);
box-shadow: 0 0 0 0 rgba(217, 122, 51, 0.5); animation: mp-pulse 2s ease-out infinite;
}
.mp-transmit {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--isra-navy-300);
}
.mp-transmit-dot {
width: 7px; height: 7px; border-radius: 50%; background: #C9523F;
box-shadow: 0 0 0 0 rgba(201, 82, 63, 0.5); animation: mp-pulse 1.8s ease-out infinite;
}
.mp-title {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(30px, 6.2vw, 92px); line-height: 1.0; letter-spacing: -0.03em;
color: var(--isra-parchment); margin: 0; white-space: nowrap;
text-shadow: 0 2px 36px rgba(2, 8, 16, 0.4);
}
.mp-title em { font-style: italic; color: var(--isra-sun-400); }
/* Broadcast ticker strip between title and player */
.mp-ticker {
margin: 28px 0 32px; padding: 11px 0; overflow: hidden; white-space: nowrap;
border-top: 1px solid rgba(197, 209, 224, 0.18);
border-bottom: 1px solid rgba(197, 209, 224, 0.18);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mp-ticker-track {
display: inline-block; will-change: transform;
animation: mp-marquee 26s linear infinite;
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--isra-navy-300);
}
.mp-ticker-track span { padding: 0 18px; }
.mp-ticker-track .mp-ticker-sep { color: var(--isra-sun-400); }
/* ---- YouTube console frame (the hero's centerpiece, on the night sky) ---- */
.mp-frame {
position: relative; max-width: 1080px; margin: 0 auto; width: 100%;
border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
background: linear-gradient(160deg, var(--isra-navy-800), var(--isra-navy-900));
box-shadow: 0 60px 120px -40px rgba(2, 8, 16, 0.85), inset 0 0 0 1px rgba(197, 209, 224, 0.22);
transition: transform 360ms var(--ease-entry), box-shadow 360ms var(--ease-entry);
}
.mp-frame:hover {
transform: translateY(-4px);
box-shadow: 0 70px 140px -42px rgba(2, 8, 16, 0.9), inset 0 0 0 1px rgba(197, 209, 224, 0.3);
}
.mp-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 13px 20px; border-bottom: 1px solid rgba(197, 209, 224, 0.12);
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--isra-navy-300); flex: none;
}
.mp-bar-rec { display: inline-flex; align-items: center; gap: 7px; color: var(--isra-sun-300); }
.mp-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--isra-sun-500); animation: mp-pulse 1.6s ease-out infinite; }
.mp-stage { position: relative; width: 100%; background: #000; overflow: hidden; }
.mp-stage--yt { aspect-ratio: 16/9; }
.mp-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.mp-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; display: block; background: #0B1623; }
.mp-facade-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-entry), filter 400ms ease; }
.mp-facade-shade { position: absolute; inset: 0; background: radial-gradient(62% 62% at 50% 44%, rgba(11, 22, 35, 0.18), rgba(11, 22, 35, 0.62)); }
.mp-facade-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--isra-parchment); }
.mp-ring {
display: inline-flex; align-items: center; justify-content: center;
width: 78px; height: 78px; border-radius: 50%; color: var(--isra-parchment);
background: rgba(217, 122, 51, 0.94); box-shadow: 0 0 0 0 rgba(217, 122, 51, 0.5);
animation: mp-pulse 2.2s ease-out infinite; transition: transform 280ms var(--ease-entry);
}
.mp-ring svg { margin-left: 3px; }
.mp-facade:hover .mp-ring { transform: scale(1.08); }
.mp-facade:hover .mp-facade-img { transform: scale(1.04); filter: brightness(0.92); }
.mp-facade-cap { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; }
.mp-facade:focus-visible { outline: 2px solid var(--isra-sun-400); outline-offset: -4px; }
/* Corner registration ticks on the player frame */
.mp-tick { position: absolute; width: 16px; height: 16px; z-index: 3; pointer-events: none; opacity: 0.5; }
.mp-tick::before, .mp-tick::after { content: ""; position: absolute; background: var(--isra-sun-300); }
.mp-tick::before { width: 16px; height: 1.5px; } .mp-tick::after { width: 1.5px; height: 16px; }
.mp-tick--tl { top: 9px; left: 9px; } .mp-tick--tl::before { top: 0; left: 0; } .mp-tick--tl::after { top: 0; left: 0; }
.mp-tick--tr { top: 9px; right: 9px; } .mp-tick--tr::before { top: 0; right: 0; } .mp-tick--tr::after { top: 0; right: 0; }
.mp-tick--bl { bottom: 9px; left: 9px; } .mp-tick--bl::before { bottom: 0; left: 0; } .mp-tick--bl::after { bottom: 0; left: 0; }
.mp-tick--br { bottom: 9px; right: 9px; } .mp-tick--br::before { bottom: 0; right: 0; } .mp-tick--br::after { bottom: 0; right: 0; }
/* ---- Channels: giant outlined display words (parchment ground) ---- */
.mp-social { padding: 96px 0 40px; }
.mp-social-head { margin-bottom: 8px; }
.mp-social-head .mp-eyebrow { color: var(--isra-forest-500); }
.mp-social-head .mp-eyebrow::before { background: var(--isra-forest-300); }
.mp-social-head h2 {
font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 52px);
line-height: 1.05; letter-spacing: -0.02em; color: var(--isra-ink); margin: 0;
}
.mp-social-head h2 em { font-style: italic; color: var(--isra-sun-500); }
.mp-social-list { margin-top: 18px; }
.mp-social-row {
position: relative; display: block; text-decoration: none; cursor: pointer;
padding: 30px 0 22px; border-top: 1px solid var(--isra-hairline);
transition: background 320ms var(--ease-standard);
}
.mp-social-row, .mp-social-row:hover, .mp-social-row:focus-visible { text-decoration: none; }
.mp-social-row:hover, .mp-social-row:focus-visible { background: rgba(30, 58, 95, 0.025); outline: none; }
.mp-social-meta { display: flex; align-items: baseline; gap: 16px; margin-bottom: 2px; }
.mp-social-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--isra-sun-500); }
.mp-social-handle { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--isra-mute); transition: color 320ms ease; }
.mp-social-row:hover .mp-social-handle, .mp-social-row:focus-visible .mp-social-handle { color: var(--isra-graphite); }
.mp-social-word {
display: block; font-family: 'Anton', 'Bebas Neue', sans-serif; font-weight: 400;
font-size: clamp(52px, 13vw, 182px); line-height: 1.04; letter-spacing: -0.01em;
padding-bottom: 0.08em; color: transparent; -webkit-text-stroke: 1.4px var(--isra-navy-700);
transition: color 420ms var(--ease-entry), -webkit-text-stroke-color 420ms ease, transform 480ms var(--ease-entry);
transform: translateX(0);
}
.mp-social-row:hover .mp-social-word, .mp-social-row:focus-visible .mp-social-word {
color: var(--accent); -webkit-text-stroke-color: var(--accent); transform: translateX(6px);
}
/* Instagram fills with the brand gradient instead of a flat accent */
.mp-social-row--ig:hover .mp-social-word, .mp-social-row--ig:focus-visible .mp-social-word {
background-image: radial-gradient(circle at 28% 112%, #FCAF45 0%, #FCAF45 5%, #FD5949 30%, #D6249F 50%, #833AB4 70%, #285AEB 95%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent; -webkit-text-stroke-color: transparent;
}
.mp-social-hint {
position: absolute; right: 0; bottom: 26px; display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent); opacity: 0; transform: translateY(6px);
transition: opacity 280ms ease, transform 280ms var(--ease-entry);
}
.mp-social-row:hover .mp-social-hint, .mp-social-row:focus-visible .mp-social-hint { opacity: 0.9; transform: translateY(0); }
.mp-social-row:last-child { border-bottom: 1px solid var(--isra-hairline); }
/* ---- Direct line (email) ---- */
.mp-email { padding: 72px 0 96px; text-align: center; }
.mp-email-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--isra-forest-500); margin-bottom: 18px; }
.mp-email-lead { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.6vw, 28px); color: var(--isra-graphite); margin: 0 0 18px; }
.mp-email-link {
display: inline-block; font-family: var(--font-display); font-weight: 400;
font-size: clamp(30px, 5.2vw, 62px); line-height: 1.1; letter-spacing: -0.02em;
color: var(--isra-ink); text-decoration: none; position: relative; padding-bottom: 6px;
transition: color 300ms ease;
}
.mp-email-link::after {
content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
background: var(--isra-sun-500); transform: scaleX(0); transform-origin: left;
transition: transform 420ms var(--ease-entry);
}
.mp-email-link, .mp-email-link:hover, .mp-email-link:focus-visible { text-decoration: none; }
.mp-email-link:hover, .mp-email-link:focus-visible { color: var(--isra-sun-700); outline: none; }
.mp-email-link:hover::after, .mp-email-link:focus-visible::after { transform: scaleX(1); }
/* ---- Motion ---- */
@keyframes mp-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mp-pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 122, 51, 0.5); } 70% { box-shadow: 0 0 0 12px rgba(217, 122, 51, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 122, 51, 0); } }
@keyframes mp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Per-row stagger: neutralize the block fade, animate rows instead */
.mp-social.reveal { opacity: 1; transform: none; transition: none; }
.mp-social .mp-social-row { opacity: 0; }
.mp-social.in .mp-social-row { animation: mp-rise 0.7s var(--ease-entry) both; }
.mp-social.in .mp-social-row:nth-child(1) { animation-delay: 0.05s; }
.mp-social.in .mp-social-row:nth-child(2) { animation-delay: 0.18s; }
.mp-social.in .mp-social-row:nth-child(3) { animation-delay: 0.31s; }
/* First-visit hero stagger — same cadence as the other cosmic pages.
The frame fades only (no transform keyframe) so its hover lift isn't
pinned by the animation's fill mode. */
@keyframes cos-fade-in { from { opacity: 0; } to { opacity: 1; } }
main.page-enter .mp-top-head, main.page-enter .mp-title,
main.page-enter .mp-ticker {
animation: cos-hero-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
main.page-enter .mp-frame { animation: cos-fade-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 480ms both; }
main.page-enter .mp-title { animation-delay: 160ms; }
main.page-enter .mp-ticker { animation-delay: 320ms; }
@media (max-width: 720px) {
.mp-page { --sky-end: 620px; }
.mp-top { padding: 20px 0 72px; }
.mp-transmit { display: none; }
.mp-social { padding: 64px 0 24px; }
.mp-social-hint { position: static; display: flex; margin-top: 10px; opacity: 0.7; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.mp-social.in .mp-social-row { animation: none !important; }
.mp-social .mp-social-row { opacity: 1; }
.mp-ticker-track { animation: none !important; }
.mp-ring, .mp-bar-dot, .mp-live-dot, .mp-transmit-dot { animation: none !important; }
.mp-facade:hover .mp-facade-img { transform: none; }
.mp-frame, .mp-frame:hover { transform: none; }
main.page-enter .mp-top-head, main.page-enter .mp-title,
main.page-enter .mp-ticker, main.page-enter .mp-frame { animation: none; }
}
/* ============================================================
SUPPORTERS — "The Funding Ledger", cosmic rewrite. The
acknowledgements hero is unboxed onto the shared intro-recipe
night sky (glass stat chips + the parchment-matted dinner
print carry the depth), the ₹1.3L total rides the dawn
horizon, and the ledger, advisors, MoU plate and CTA land on
parchment ground. Content unchanged — presentation only.
============================================================ */
body.supporters-cosmic { background: var(--isra-ink); }
.sup-page { --sky-end: clamp(960px, 82vw, 1080px); }
/* 0 — hero, unboxed onto the sky */
.sup-hero { position: relative; padding: clamp(44px, 5.6vw, 76px) 0 clamp(36px, 4.6vw, 56px); }
.sup-hero-grid {
display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
gap: clamp(32px, 4vw, 64px); align-items: center;
}
.slh-kicker {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--isra-navy-300); margin-bottom: 22px;
}
.slh-kicker .crew-status-dot { background: var(--isra-sun-400); }
.sup-h1 {
font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 56px);
line-height: 1.05; letter-spacing: -0.025em; color: var(--isra-parchment); margin: 0 0 22px;
text-shadow: 0 2px 36px rgba(2, 8, 16, 0.4);
}
/* Break only at the explicit
so the live (typewriter) overlay can't
subpixel-wrap "The institutions that" into a third line and overlap the body. */
.sup-h1 .tw-ghost, .sup-h1 .tw-live { white-space: nowrap; }
.slh-body {
font-family: var(--font-sans); font-size: var(--fs-md); line-height: 1.7;
color: rgba(244, 239, 230, 0.78); max-width: 480px; margin: 0 0 32px;
}
.slh-readout { display: flex; flex-wrap: wrap; gap: 10px; }
.slh-stat {
display: inline-flex; flex-direction: column; gap: 5px;
padding: 12px 16px; border-radius: var(--radius-md);
background: rgba(244, 239, 230, 0.045);
box-shadow: inset 0 0 0 1px rgba(197, 209, 224, 0.16);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.slh-stat b { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1; color: var(--isra-parchment); white-space: nowrap; }
.slh-stat b em { font-style: italic; color: var(--isra-sun-400); }
.slh-stat i { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--isra-navy-300); white-space: nowrap; }
/* field photo — parchment-matted print, pinned slightly askew */
.dinner-wrap {
position: relative; justify-self: center; width: 100%; max-width: 440px;
background: var(--isra-parchment); border-radius: 6px; padding: 12px 12px 14px;
box-shadow: 0 24px 50px -18px rgba(2, 8, 16, 0.75), 0 4px 14px rgba(2, 8, 16, 0.4);
transform: rotate(1.6deg);
transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 420ms var(--ease-standard);
}
.dinner-wrap:hover { transform: rotate(0.4deg) translateY(-4px); box-shadow: 0 30px 60px -18px rgba(2, 8, 16, 0.8), 0 6px 18px rgba(2, 8, 16, 0.45); }
/* self-managed entrance: the generic .reveal transform would erase the tilt.
The body-scoped selectors outgun the supporters-cosmic .reveal overrides,
which would otherwise pin the print flat (transform: none). */
.dinner-wrap.reveal, .dinner-wrap.reveal.in,
body.supporters-cosmic .dinner-wrap.reveal,
body.supporters-cosmic .dinner-wrap.reveal.in { opacity: 1; transform: rotate(1.6deg); filter: none; }
.dinner-wrap.reveal:hover, .dinner-wrap.reveal.in:hover,
body.supporters-cosmic .dinner-wrap.reveal:hover,
body.supporters-cosmic .dinner-wrap.reveal.in:hover { transform: rotate(0.4deg) translateY(-4px); }
.dinner-wrap img { display: block; width: 100%; height: auto; border-radius: 3px; }
.dinner-caption {
display: flex; justify-content: space-between; gap: 12px; padding: 11px 4px 0;
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--isra-graphite);
}
.dinner-caption em { font-style: italic; font-family: var(--font-display); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--isra-ink); }
/* total line — the ledger sum, oversized, riding the dawn horizon */
.sup-totalsec { position: relative; padding: 0 0 clamp(130px, 15vw, 190px); }
.sup-total {
display: flex; align-items: baseline; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap;
border-top: 1px solid rgba(197, 209, 224, 0.22);
border-bottom: 1px solid rgba(197, 209, 224, 0.22);
padding: clamp(18px, 2.4vw, 30px) 0;
}
.sup-total-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--isra-navy-200); }
.sup-total-num {
font-family: var(--font-display); font-size: clamp(84px, 11vw, 156px); line-height: 0.9;
letter-spacing: -0.03em; color: var(--isra-parchment);
text-shadow: 0 2px 36px rgba(2, 8, 16, 0.4);
}
.sup-total-num em { font-style: italic; color: var(--isra-sun-400); }
.sup-total-note { font-family: var(--font-display); font-style: italic; font-size: clamp(15px, 1.5vw, 19px); color: rgba(244, 239, 230, 0.72); margin-left: auto; max-width: 300px; line-height: 1.5; }
/* ground zone — parchment ledger */
.sup-ground { padding: clamp(40px, 5vw, 64px) 0 96px; }
/* section heads — editorial, left-aligned, numbered like home chapters */
.sup-head { display: flex; align-items: baseline; gap: 20px; margin: 0 0 30px; }
.sup-head .sup-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--isra-mute); white-space: nowrap; }
.sup-head h2 { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.025em; line-height: 1.05; color: var(--isra-ink); margin: 0; }
.sup-head h2 em { font-style: italic; color: var(--isra-sun-500); }
.sup-head .sup-rule { flex: 1; height: 1px; background: var(--isra-hairline-strong); align-self: center; }
/* ledger column headers */
.sup-ledger { margin-bottom: clamp(56px, 7vw, 88px); }
.sup-ledger-cols, .sup-entry {
display: grid; grid-template-columns: clamp(56px, 6vw, 84px) 84px minmax(0, 1fr) 168px;
gap: clamp(16px, 2.4vw, 32px); align-items: start;
}
.sup-ledger-cols {
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--isra-mute); padding-bottom: 12px; border-bottom: 1px solid var(--isra-hairline-strong);
}
.sup-ledger-cols span:last-child { text-align: right; }
/* entries — full-width ruled rows, not cards */
.sup-entry { position: relative; padding: clamp(28px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--isra-hairline); transition: background 280ms var(--ease-standard); }
.sup-entry:hover { background: linear-gradient(90deg, rgba(30, 58, 95, 0.04), rgba(30, 58, 95, 0)); }
.se-no { font-family: var(--font-display); font-size: clamp(38px, 4.2vw, 58px); line-height: 0.9; color: rgba(14, 31, 51, 0.18); transition: color 280ms var(--ease-standard); }
.sup-entry:hover .se-no { color: var(--isra-sun-500); }
.logo-link { display: inline-block; border-radius: 50%; transition: transform 220ms var(--ease-entry), box-shadow 220ms var(--ease-entry); }
.logo-link:hover { transform: scale(1.06); box-shadow: 0 0 0 3px var(--isra-sun-400); }
.logo-link:focus-visible { outline: 2px solid var(--isra-sun-500); outline-offset: 3px; }
.se-seal { border-radius: 50%; background: var(--isra-white); padding: 10px; box-shadow: var(--shadow-1); border: 1px solid var(--isra-hairline); }
.se-seal img { width: 56px; height: 56px; display: block; object-fit: contain; }
.se-main h2 { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -0.02em; color: var(--isra-ink); margin: 0 0 12px; }
.se-main p { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--isra-graphite); margin: 0; max-width: 62ch; }
.se-main p strong { color: var(--isra-sun-700); font-weight: 600; }
.se-stamp {
justify-self: end; text-align: center; transform: rotate(-2.5deg);
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.7;
color: var(--isra-sun-700); border: 1.5px solid rgba(217, 122, 51, 0.55); border-radius: 4px;
padding: 10px 14px; background: rgba(217, 122, 51, 0.05);
transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), border-color 280ms var(--ease-standard);
}
.sup-entry:hover .se-stamp { transform: rotate(-1deg) scale(1.03); border-color: var(--isra-sun-500); }
.se-stamp b { display: block; font-weight: 600; font-size: 11px; color: var(--isra-ink); }
/* the record (MoU plate) */
.mou-wrap { margin: 0 0 clamp(56px, 7vw, 88px); border: 1px solid var(--isra-hairline-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--isra-parchment-2); }
.mou-wrap img { display: block; width: 100%; height: 540px; object-fit: cover; object-position: center 18%; }
.mou-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 24px; border-top: 1px solid var(--isra-hairline-strong); }
.mou-caption .mc-mono { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--isra-graphite); white-space: nowrap; }
.mou-caption .mc-note { font-family: var(--font-display); font-style: italic; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.55; color: var(--isra-ink); text-align: right; margin: 0; }
.adv-board-wrap { margin-bottom: clamp(56px, 7vw, 88px); }
/* get involved — transmission strip (deliberately stays a navy panel,
regaining its contrast now that it sits on parchment) */
.sup-cta-block {
position: relative; isolation: isolate; overflow: hidden;
display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
background: var(--isra-navy-900); border-radius: var(--radius-lg);
padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 56px);
box-shadow: inset 0 1px 0 rgba(236, 171, 123, 0.16), 0 30px 70px -28px rgba(5, 12, 22, 0.6);
}
.sup-cta-block::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(70% 90% at 90% 50%, rgba(217, 122, 51, 0.14), transparent 65%);
}
.sup-cta-kicker { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--isra-navy-300); margin: 0 0 12px; }
.sup-cta-title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.02em; color: var(--isra-parchment); margin: 0; }
.sup-cta-title em { font-style: italic; color: var(--isra-sun-400); }
.sup-cta-btn {
display: inline-block; padding: 15px 36px; background: var(--isra-sun-500); color: #10131B;
font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-base);
border-radius: var(--radius-md); text-decoration: none; letter-spacing: 0.01em;
transition: background 200ms, transform 200ms var(--ease-entry), box-shadow 200ms;
box-shadow: 0 14px 30px -12px rgba(217, 122, 51, 0.55);
}
.sup-cta-btn:hover { background: var(--isra-sun-400); transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(217, 122, 51, 0.65); }
.sup-cta-btn:focus-visible { outline: 2px solid var(--isra-parchment); outline-offset: 3px; }
.sup-cta-btn:active { transform: translateY(0); }
/* First-visit hero stagger — same cadence as the other cosmic pages.
The dinner print fades only, so its tilt + hover transforms stay live. */
main.page-enter .slh-kicker, main.page-enter .sup-h1,
main.page-enter .slh-body, main.page-enter .slh-readout {
animation: cos-hero-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
main.page-enter .dinner-wrap { animation: cos-fade-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 240ms both; }
main.page-enter .sup-h1 { animation-delay: 160ms; }
main.page-enter .slh-body { animation-delay: 320ms; }
main.page-enter .slh-readout { animation-delay: 480ms; }
@media (max-width: 960px) {
.sup-page { --sky-end: 1340px; }
.sup-hero-grid { grid-template-columns: 1fr; }
.dinner-wrap { max-width: 520px; justify-self: start; }
.sup-entry, .sup-ledger-cols { grid-template-columns: clamp(44px, 7vw, 64px) 72px minmax(0, 1fr); }
.sup-ledger-cols span:last-child { display: none; }
.se-stamp { grid-column: 2 / -1; justify-self: start; margin-top: 16px; transform: rotate(-1.5deg); }
.se-seal img { width: 44px; height: 44px; }
.sup-total-note { margin-left: 0; max-width: none; }
}
@media (max-width: 720px) {
.sup-page { --sky-end: 1220px; }
.sup-head { flex-wrap: wrap; gap: 10px 16px; }
.sup-entry, .sup-ledger-cols { grid-template-columns: 56px minmax(0, 1fr); }
.se-no { grid-row: 1; }
.se-seal { width: max-content; }
.se-main { grid-column: 1 / -1; }
.se-stamp { grid-column: 1 / -1; }
.mou-wrap img { height: 320px; }
.mou-caption { flex-direction: column; align-items: flex-start; gap: 10px; }
.mou-caption .mc-note { text-align: left; }
.sup-cta-block { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
main.page-enter .slh-kicker, main.page-enter .sup-h1,
main.page-enter .slh-body, main.page-enter .slh-readout,
main.page-enter .dinner-wrap { animation: none; }
.dinner-wrap, .dinner-wrap:hover,
.dinner-wrap.reveal, .dinner-wrap.reveal.in,
.dinner-wrap.reveal:hover, .dinner-wrap.reveal.in:hover,
body.supporters-cosmic .dinner-wrap.reveal,
body.supporters-cosmic .dinner-wrap.reveal.in,
body.supporters-cosmic .dinner-wrap.reveal:hover,
body.supporters-cosmic .dinner-wrap.reveal.in:hover { transform: none; }
.se-stamp, .sup-entry:hover .se-stamp { transform: none; }
}
/* ============================================================
APPLY — "Crew Selection". Cosmic rewrite: a night-sky hero
that frames joining ISRA as earning a seat, the selection
sequence as glass cards in the sky, the brief as paper cards
straddling the dawn horizon, and the ledger form landing on
solid parchment with a sticky manifest. Background comes from
the shared .cosmic-page recipe; form internals (.apply-intake
ledger treatment) are reused untouched.
============================================================ */
/* 1 · hero */
.ap-hero { padding: clamp(48px, 7vw, 88px) 0 clamp(20px, 3vw, 36px); position: relative; }
.ap-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--isra-sun-400);
margin-bottom: 16px;
}
.ap-kicker .crew-status-dot { background: var(--isra-sun-500); }
.ap-h1 {
font-family: var(--font-display);
font-size: clamp(44px, 7vw, 92px);
line-height: 1.02;
letter-spacing: -0.03em;
color: var(--isra-parchment);
text-shadow: 0 2px 36px rgba(2, 8, 16, 0.4);
margin: 0 0 22px;
}
.ap-h1 em, .ct-h1 em { font-style: italic; color: var(--isra-sun-400); }
.ap-h1 .tw-cursor-fade, .ct-h1 .tw-cursor-fade { color: var(--isra-sun-400); }
.ap-lede {
font-size: 17px;
line-height: 1.65;
color: var(--isra-navy-200);
max-width: 560px;
margin: 0 0 26px;
}
.ap-chips {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--isra-navy-300);
margin-bottom: 34px;
}
.ap-chips > span { padding-bottom: 5px; border-bottom: 1px solid rgba(197, 209, 224, 0.18); }
.ap-begin {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--isra-parchment);
text-decoration: none;
padding-bottom: 6px;
border-bottom: 1px solid rgba(244, 239, 230, 0.35);
}
.ap-begin:hover { text-decoration: none; color: var(--isra-sun-300); }
.ap-begin:focus-visible { outline: 2px solid var(--isra-sun-400); outline-offset: 4px; }
.ap-begin-arrow {
display: inline-block;
color: var(--isra-sun-400);
transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ap-begin:hover .ap-begin-arrow, .ap-begin:focus-visible .ap-begin-arrow { transform: translateY(4px); }
/* 2 · selection sequence — glass cards */
.ap-seq { padding: clamp(20px, 3vw, 36px) 0 clamp(28px, 4vw, 48px); }
.ap-seq-h {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--isra-navy-300);
margin-bottom: 22px;
}
.ap-seq-h i { flex: 1; height: 1px; background: rgba(197, 209, 224, 0.25); }
.ap-seq-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
counter-reset: none;
}
.ap-seq-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: 12px;
padding: 24px 24px 26px;
background: rgba(244, 239, 230, 0.045);
box-shadow: inset 0 0 0 1px rgba(197, 209, 224, 0.16);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
transition: transform 320ms var(--ease-standard), box-shadow 320ms var(--ease-standard);
}
.ap-seq-card:hover {
transform: translateY(-6px);
box-shadow: inset 0 0 0 1px rgba(197, 209, 224, 0.32), 0 22px 44px -24px rgba(2, 8, 16, 0.8);
}
.ap-seq-n {
font-family: var(--font-display);
font-size: 34px;
line-height: 1;
color: var(--isra-sun-300);
margin-bottom: 14px;
}
.ap-seq-stage {
font-family: var(--font-display);
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--isra-parchment);
margin-bottom: 6px;
}
.ap-seq-meaning {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--isra-navy-300);
margin-bottom: 12px;
}
.ap-seq-card p {
font-size: 14px;
line-height: 1.6;
color: rgba(244, 239, 230, 0.82);
margin: 0;
}
/* 3 · the brief — paper cards on the dawn horizon */
.ap-brief { padding: clamp(20px, 3vw, 40px) 0 clamp(16px, 2.5vw, 28px); }
.ap-brief-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.ap-brief-card {
background: var(--isra-white);
border-radius: var(--radius-lg);
box-shadow: 0 30px 70px -30px rgba(14, 31, 51, 0.45), var(--shadow-2);
padding: clamp(22px, 3vw, 32px);
}
.ap-brief-card ul {
list-style: none;
margin: 16px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
/* 4 · the form — sticky manifest + ledger form on parchment */
.ap-form-sec { padding-top: clamp(36px, 5vw, 64px); }
.ap-form-grid {
display: grid;
grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.5fr);
gap: clamp(40px, 5vw, 76px);
align-items: start;
}
.ap-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 22px; }
.ap-side-quote {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(17px, 1.8vw, 20px);
line-height: 1.5;
color: var(--isra-ink);
margin: 0;
padding-left: 16px;
border-left: 2px solid var(--isra-sun-500);
}
.ap-side-quote em { color: var(--isra-sun-500); font-style: inherit; }
/* success screens (shared by Apply + Contact) */
.ap-done { padding: clamp(72px, 10vw, 120px) 0 clamp(56px, 8vw, 96px); }
.ap-done .container { max-width: 760px; }
.ap-receipt {
display: flex;
flex-wrap: wrap;
margin: 30px 0 0;
border-radius: 12px;
background: rgba(244, 239, 230, 0.045);
box-shadow: inset 0 0 0 1px rgba(197, 209, 224, 0.16);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.ap-receipt > div {
flex: 1 1 0;
min-width: 150px;
padding: 18px 22px;
}
.ap-receipt > div + div { border-left: 1px solid rgba(197, 209, 224, 0.14); }
.ap-receipt dt {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--isra-navy-300);
margin-bottom: 6px;
}
.ap-receipt dd {
margin: 0;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--isra-parchment);
}
.ap-receipt dd a { color: var(--isra-sun-300); text-transform: none; }
.ap-receipt dd a:focus-visible { outline: 2px solid var(--isra-sun-400); outline-offset: 3px; }
.ap-done-note {
font-size: 15px;
line-height: 1.65;
color: var(--isra-navy-200);
max-width: 560px;
margin: 24px 0 0;
}
.ap-done-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ap-done .btn-outline {
color: var(--isra-parchment);
box-shadow: inset 0 0 0 1px rgba(244, 239, 230, 0.4);
background: transparent;
}
.ap-done .btn-outline:hover { box-shadow: inset 0 0 0 1px var(--isra-sun-400); color: var(--isra-sun-300); }
.ap-done .btn-outline:focus-visible { outline: 2px solid var(--isra-sun-400); outline-offset: 3px; }
@media (max-width: 860px) {
.ap-seq-grid { grid-template-columns: 1fr; }
.ap-brief-grid { grid-template-columns: 1fr; }
.ap-form-grid { grid-template-columns: 1fr; gap: 32px; }
.ap-side { position: static; max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
.ap-seq-card, .ap-seq-card:hover { transform: none; transition: none; }
.ap-begin-arrow, .ap-begin:hover .ap-begin-arrow, .ap-begin:focus-visible .ap-begin-arrow { transform: none; transition: none; }
}
/* ============================================================
CONTACT — "Open Channel". Cosmic rewrite: a short warm sky
with a human headline, three glass channel cards (the email
one is a real mailto link), a single paper sheet carrying the
ledger form on parchment, and a 3-step strip that sets reply
expectations. Shares .ap-kicker + .ap-done with Apply.
============================================================ */
/* 1 · hero */
.ct-hero { padding: clamp(48px, 7vw, 88px) 0 clamp(16px, 2.5vw, 28px); position: relative; }
.ct-h1 {
font-family: var(--font-display);
font-size: clamp(40px, 6vw, 76px);
line-height: 1.04;
letter-spacing: -0.03em;
color: var(--isra-parchment);
text-shadow: 0 2px 36px rgba(2, 8, 16, 0.4);
margin: 0 0 20px;
}
.ct-lede {
font-size: 17px;
line-height: 1.65;
color: var(--isra-navy-200);
max-width: 560px;
margin: 0;
}
/* 2 · channels — glass cards */
.ct-channels { padding: clamp(24px, 3.5vw, 44px) 0 clamp(28px, 4vw, 48px); }
.ct-channels-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.ct-channel {
display: flex;
flex-direction: column;
border-radius: 12px;
padding: 22px 24px 24px;
background: rgba(244, 239, 230, 0.045);
box-shadow: inset 0 0 0 1px rgba(197, 209, 224, 0.16);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.ct-channel--link {
text-decoration: none;
transition: transform 320ms var(--ease-standard), box-shadow 320ms var(--ease-standard);
}
.ct-channel--link:hover {
text-decoration: none;
transform: translateY(-6px);
box-shadow: inset 0 0 0 1px rgba(217, 122, 51, 0.45), 0 22px 44px -24px rgba(2, 8, 16, 0.8);
}
.ct-channel--link:focus-visible { outline: 2px solid var(--isra-sun-400); outline-offset: 3px; }
.ct-dot {
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--isra-sun-400);
animation: crew-pulse 2.4s var(--ease-standard) infinite;
}
.ct-channel-h {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--isra-navy-300);
margin-bottom: 14px;
}
.ct-channel-v {
font-family: var(--font-display);
font-size: clamp(20px, 2vw, 25px);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--isra-parchment);
margin-bottom: 8px;
overflow-wrap: anywhere;
}
.ct-channel-x {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13.5px;
line-height: 1.55;
color: rgba(244, 239, 230, 0.75);
}
.ct-channel-arrow { display: inline-flex; color: var(--isra-sun-400); transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.ct-channel--link:hover .ct-channel-arrow, .ct-channel--link:focus-visible .ct-channel-arrow { transform: translateX(6px); }
/* 3 · the sheet — paper form on parchment */
.ct-form-sec { padding-top: clamp(28px, 4vw, 48px); }
.ct-sheet {
max-width: 780px;
margin: 0 auto;
background: var(--isra-white);
border-radius: var(--radius-lg);
box-shadow: 0 30px 70px -30px rgba(14, 31, 51, 0.35), var(--shadow-2);
padding: clamp(28px, 4vw, 56px);
}
/* 4 · what happens next */
.ct-after {
list-style: none;
max-width: 780px;
margin: 30px auto 0;
padding: 22px 0 0;
border-top: 1px solid var(--isra-hairline-strong);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px 24px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.6;
letter-spacing: 0.04em;
color: var(--isra-graphite);
}
.ct-after li { display: flex; gap: 10px; align-items: flex-start; }
.ct-after li > span { color: var(--isra-sun-500); font-weight: 500; flex: none; }
@media (max-width: 860px) {
.ct-channels-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.ct-after { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.ct-dot { animation: none; }
.ct-channel--link, .ct-channel--link:hover { transform: none; transition: none; }
.ct-channel-arrow, .ct-channel--link:hover .ct-channel-arrow { transform: none; transition: none; }
}
/* ============================================================
HOME — "The Descent". The intro splash and the old home page
merged into one continuous cosmic journey on the shared
.cosmic-page recipe: the intro (orbit, masked-rise headline,
console, cue) opens at the Kármán line, the creed + vitals sit
deep in the navy, the LAUNCHES / ISRA poster navs land on the
dawn band, and the build floor + program close on parchment.
An altitude rail with a scroll-linked marker spans the page.
Intro inner classes (.intro-*, .it-*, .ic-*, .icu-*, .io-*)
are reused verbatim; .intro-screen remains the untouched
reference recipe.
============================================================ */
body.home-cosmic { background: var(--isra-ink); }
.hm-page {
/* svh keeps the horizon honest under mobile browser chrome */
--sky-end: calc(80vh + 800px);
--sky-end: calc(80svh + 800px);
}
.hm-page .asc-sky {
height: calc(100vh + 700px);
height: calc(100svh + 700px);
}
.hm-page section { position: relative; }
/* 100 km · the call — full-viewport opening movement */
.hm-intro {
--intro-fg: var(--isra-parchment);
--intro-fg-dim: var(--isra-navy-300);
--intro-rule: rgba(197, 209, 224, 0.28);
position: relative;
min-height: calc(100vh - 60px);
min-height: calc(100svh - 60px);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 24px 0;
}
.hm-intro.is-ready .intro-cue {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition: opacity 520ms var(--ease-entry), transform 520ms var(--ease-entry),
color 200ms var(--ease-standard);
}
/* 80 km · creed + flight vitals — deep in the night zone */
.hm-vitals { padding: clamp(36px, 5vh, 64px) 0 72px; }
.hm-creed {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(20px, 2.4vw, 29px);
line-height: 1.45;
color: rgba(244, 239, 230, 0.95);
text-shadow: 0 1px 24px rgba(2, 8, 16, 0.45);
max-width: 620px;
margin: 0 0 44px;
}
.hm-creed em { color: var(--isra-sun-400); font-style: inherit; }
.hm-kicker {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--isra-navy-300);
margin-bottom: 18px;
}
.hm-kicker--ground { color: var(--isra-sun-700); }
body.home-cosmic .stats-strip {
box-shadow: 0 30px 70px -34px rgba(2, 8, 16, 0.85), inset 0 0 0 1px rgba(197, 209, 224, 0.14);
}
/* 0 km · touchdown — the build floor on parchment */
.hm-ground { padding: clamp(48px, 7vw, 88px) 0 8px; }
.hm-ground-title {
font-family: var(--font-display);
font-size: clamp(34px, 4.6vw, 58px);
line-height: 1.06;
letter-spacing: -0.025em;
color: var(--isra-ink);
margin: 0 0 28px;
}
.hm-ground-title em { font-style: italic; color: var(--isra-sun-500); }
.hm-ground-band .img-hover-wrap {
aspect-ratio: 16 / 7;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-3);
}
.hm-ground-band .img-hover-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hm-ground-caption {
display: flex;
justify-content: space-between;
gap: 12px 20px;
flex-wrap: wrap;
margin-top: 12px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--isra-mute);
}
/* T-0 · the program */
.hm-program { padding: clamp(40px, 6vw, 64px) 0 96px; }
/* Revisits show the finished intro instantly — no replayed boot sequence */
main.page-revisit .it-word { animation: none; transform: none; }
main.page-revisit .ic-line,
main.page-revisit .intro-eyebrow,
main.page-revisit .intro-orbit { animation: none; opacity: 1; }
main.page-revisit .hm-intro .intro-cue { transition: color 200ms var(--ease-standard); }
@media (max-width: 720px) {
.hm-ground-band .img-hover-wrap { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
.hm-intro.is-ready .intro-cue { transition: color 200ms var(--ease-standard); }
}