/* ===================================================================
4LifeUp — UNIFIED THEME
Single source of truth for every page.
Matches index.html and pillars.html design language.
=================================================================== */
/* ===================================================================
GLOBAL MOBILE-SAFE IMAGE RESET
Prevents images from overflowing containers on small screens and
preserves their natural aspect ratio. (Mobile audit item #4.)
=================================================================== */
img {
max-width: 100%;
height: auto;
}
:root {
/* Surfaces */
--bg: #08070d;
--bg-2: #0d0c14;
--bg-3: #15131e;
--bg-card: rgba(13,12,20,0.65);
--bg-card-h: rgba(13,12,20,0.82);
--ink: #0a0a0a;
/* Typography */
--cream: #f5f1ea;
--cream-d: #e7e1d4;
--text: #f5f1ea;
--mute: rgba(245,241,234,0.70);
--mute-2: rgba(245,241,234,0.58);
--mute-3: rgba(245,241,234,0.42);
/* Lines */
--line: rgba(245,241,234,0.10);
--line-2: rgba(245,241,234,0.18);
--line-3: rgba(245,241,234,0.28);
/* Aurora + Sky palette */
--sky: #5fb1e6;
--sky-deep: #3c8bc8;
--sky-soft: #a8d3ee;
--aurora-1: #5fb1e6;
--aurora-2: #ffe28a;
--aurora-3: #ffc870;
--aurora-4: #ffa53d;
--aurora-5: #ff7a1f;
/* Legacy compat */
--navy: #5fb1e6;
--navy-2: #3c8bc8;
--blue: #6cb0e6;
--blue-2: #4f9bd3;
/* Gradients */
--grad-aurora: linear-gradient(120deg, var(--sky) 0%, var(--aurora-2) 32%, var(--aurora-3) 56%, var(--aurora-4) 80%, var(--aurora-5) 100%);
--grad-aurora-h: linear-gradient(90deg, var(--sky) 0%, var(--aurora-2) 35%, var(--aurora-3) 65%, var(--aurora-4) 100%);
--grad-sunset: linear-gradient(180deg, var(--sky) 0%, var(--aurora-2) 50%, var(--aurora-4) 100%);
--grad-sky-warm: linear-gradient(135deg, var(--sky) 0%, var(--aurora-3) 50%, var(--aurora-4) 100%);
/* Scale */
--r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 36px;
--container: 1240px; --gutter: 24px;
}
/* ===================================================================
LIGHT THEME — opt-in via body.theme-light (header toggle).
Same variable NAMES, different values. Aurora palette stays warm.
=================================================================== */
body.theme-light {
/* Surfaces — warm cream-paper feel, not pure white */
--bg: #fbf7f0;
--bg-2: #f3eee5;
--bg-3: #ebe5d9;
--bg-card: rgba(255,253,248,0.85);
--bg-card-h: rgba(255,253,248,0.95);
--ink: #f5f1ea;
/* Typography — deep warm ink instead of cream */
--cream: #1a1820;
--cream-d: #2a2632;
--text: #1a1820;
--mute: rgba(26,24,32,0.74);
--mute-2: rgba(26,24,32,0.58);
--mute-3: rgba(26,24,32,0.42);
/* Lines — subtle warm ink */
--line: rgba(26,24,32,0.12);
--line-2: rgba(26,24,32,0.18);
--line-3: rgba(26,24,32,0.28);
/* Sky deepens for contrast on light bg */
--sky: #2980c4;
--sky-deep: #1a5f9a;
--sky-soft: #5fa0d4;
/* Aurora stays warm — slightly deeper amber/orange for contrast on cream */
--aurora-1: #2980c4;
--aurora-2: #f0b84a;
--aurora-3: #ed9530;
--aurora-4: #d86618;
--aurora-5: #b04f10;
--navy: #2980c4;
--navy-2: #1a5f9a;
--blue: #3a8fce;
--blue-2: #2a7ab8;
}
/* ===================================================================
LIGHT THEME OVERRIDES — force common hardcoded dark patterns to light.
Inline page CSS uses values like rgba(8,7,13,X) directly instead of
CSS variables. These overrides catch the most common patterns. !important
is required because page-level inline styles outrank file-level theme.css.
=================================================================== */
/* Page veil + atmosphere */
body.theme-light .veil {
background: linear-gradient(180deg, rgba(255,253,248,0.55) 0%, rgba(255,253,248,0.78) 60%, rgba(255,253,248,0.92) 100%) !important;
}
body.theme-light .atmos .blob { opacity: 0.32 !important; mix-blend-mode: multiply !important; filter: blur(80px) saturate(1.05) !important; }
body.theme-light .aurora-veil { opacity: 0.22 !important; mix-blend-mode: multiply !important; }
body.theme-light .aurora-grain { opacity: 0.05 !important; }
body.theme-light .culture-bloom,
body.theme-light .catalog-bloom,
body.theme-light .stack-bloom,
body.theme-light .phyto-bloom,
body.theme-light [class*="-bloom"] { mix-blend-mode: multiply !important; opacity: 0.18 !important; }
/* Nav surfaces */
body.theme-light nav.top,
body.theme-light header.top,
body.theme-light #navTop,
body.theme-light .nav,
body.theme-light .nav-top {
background-color: rgba(255,253,248,0.78) !important;
border-color: rgba(26,24,32,0.06) !important;
}
body.theme-light nav.top.scrolled,
body.theme-light #navTop.scrolled {
background-color: rgba(255,253,248,0.92) !important;
box-shadow: 0 6px 24px rgba(0,0,0,0.06) !important;
}
body.theme-light .mobile-menu {
background-color: rgba(255,253,248,0.97) !important;
color: var(--cream) !important;
}
body.theme-light .mobile-menu a { color: var(--cream) !important; }
/* Generic dark card backgrounds — catch most patterns */
body.theme-light .pillar,
body.theme-light .pillar-bg,
body.theme-light .panel,
body.theme-light .door-fwd,
body.theme-light .anchor-card,
body.theme-light .family-card,
body.theme-light .r-card,
body.theme-light .compare-card,
body.theme-light .why-card,
body.theme-light .pace-card,
body.theme-light .dream-card,
body.theme-light .recovery-link,
body.theme-light .insight-card,
body.theme-light .culture-cell,
body.theme-light .legacy-cell,
body.theme-light .faq-item,
body.theme-light .ev-card,
body.theme-light .month-card,
body.theme-light .toc-link,
body.theme-light .spirit-card,
body.theme-light .way-card,
body.theme-light .fl-card,
body.theme-light .door-fwd,
body.theme-light .featured-panel,
body.theme-light .empty-state,
body.theme-light [class$="-card"],
body.theme-light [class*="-card "] {
background-color: rgba(255,253,248,0.72) !important;
border-color: rgba(26,24,32,0.10) !important;
}
/* Hover states for cards */
body.theme-light .pillar:hover,
body.theme-light .door-fwd:hover,
body.theme-light .anchor-card:hover,
body.theme-light .family-card:hover,
body.theme-light .compare-card:hover,
body.theme-light .pace-card:hover,
body.theme-light .dream-card:hover,
body.theme-light .recovery-link:hover,
body.theme-light .insight-card:hover {
background-color: rgba(255,253,248,0.92) !important;
border-color: rgba(26,24,32,0.20) !important;
}
/* Headings + body text — force readable ink */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6,
body.theme-light p,
body.theme-light li,
body.theme-light strong,
body.theme-light .lede,
body.theme-light .sub,
body.theme-light .pillar-tease,
body.theme-light .pillar-name,
body.theme-light .pillar-content h2,
body.theme-light .pillar-content p {
color: var(--cream) !important;
}
body.theme-light .mute,
body.theme-light .meta,
body.theme-light .section-eyebrow,
body.theme-light .eyebrow {
color: var(--mute) !important;
}
/* Aurora gradient text on h1 em / h2 em — keep glowing (it's the brand) */
body.theme-light h1 em,
body.theme-light h2 em,
body.theme-light .gradient,
body.theme-light .aurora {
-webkit-text-fill-color: transparent !important;
/* keep their existing gradient backgrounds */
}
/* Borders and lines */
body.theme-light hr,
body.theme-light .divider,
body.theme-light section[class*="section"] {
border-color: rgba(26,24,32,0.08) !important;
}
/* Footers */
body.theme-light footer,
body.theme-light footer.site-footer,
body.theme-light .site-footer-min {
background-color: rgba(255,253,248,0.85) !important;
border-top: 1px solid rgba(26,24,32,0.08) !important;
}
body.theme-light footer a,
body.theme-light .flinks a { color: var(--mute) !important; }
body.theme-light footer a:hover { color: var(--sky) !important; }
/* Buttons */
body.theme-light .btn-secondary,
body.theme-light .btn-ghost {
background-color: rgba(255,253,248,0.6) !important;
border-color: rgba(26,24,32,0.18) !important;
color: var(--cream) !important;
}
body.theme-light .btn-secondary:hover,
body.theme-light .btn-ghost:hover {
background-color: rgba(255,253,248,0.85) !important;
border-color: rgba(26,24,32,0.35) !important;
}
/* Pills, tags, badges */
body.theme-light .pill,
body.theme-light .tag,
body.theme-light .badge,
body.theme-light .hero-tag {
background-color: rgba(26,24,32,0.04) !important;
border-color: rgba(26,24,32,0.18) !important;
}
/* Compliance strip — keep readable */
body.theme-light .compliance-strip {
color: rgba(26,24,32,0.62) !important;
border-top-color: rgba(26,24,32,0.10) !important;
}
body.theme-light .compliance-strip strong { color: rgba(26,24,32,0.85) !important; }
body.theme-light .compliance-strip a { color: rgba(40,128,196,0.85) !important; }
/* Cards + panels — darker text on light card backgrounds */
body.theme-light h1, body.theme-light h2, body.theme-light h3,
body.theme-light h4, body.theme-light h5, body.theme-light h6 { color: var(--cream); }
/* Compliance strip needs darker text */
body.theme-light .compliance-strip { color: rgba(26,24,32,0.62); }
body.theme-light .compliance-strip strong { color: rgba(26,24,32,0.85); }
/* Nav text — readable on light */
body.theme-light .nav-links a { color: rgba(26,24,32,0.70); }
body.theme-light .nav-links a:hover { color: var(--cream); }
/* ============ DESKTOP NAV — verb hover reveal ============
When hovering a peak link in the desktop nav, show its verb as a tiny floating
subtitle. Mobile menu already does this inline ("Community · Team Up"); this
brings the same affordance to desktop without cluttering the resting state. */
.nav-links a[href*="pillars.html#"] {
position: relative;
}
.nav-links a[href*="pillars.html#"]::after {
content: attr(data-verb);
position: absolute;
left: 50%;
bottom: -18px;
transform: translateX(-50%) translateY(-4px);
font-family: 'Inter Tight', sans-serif;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--aurora-3);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.nav-links a[href*="pillars.html#community"]::after { content: "Team Up"; }
.nav-links a[href*="pillars.html#library"]::after { content: "Learn Up"; }
.nav-links a[href*="pillars.html#laboratory"]::after { content: "Power Up"; }
.nav-links a[href*="pillars.html#opportunity"]::after { content: "Rise Up"; }
.nav-links a[href*="pillars.html#liftup"]::after { content: "Lift Up"; }
.nav-links a[href*="pillars.html#"]:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
body.theme-light .nav-links a[href*="pillars.html#"]::after { color: var(--aurora-4); }
/* ============ PEAK-CONTEXT BREADCRUMB — tiny "Laboratory · PhytoFactor" line ============
Sits just below the top nav on every leaf page (set body class="peak-X")
so visitors always know which peak they're inside. */
.peak-breadcrumb {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 24px;
font-family: 'Inter Tight', sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute-2);
border-bottom: 1px solid rgba(245,241,234,0.05);
background: rgba(8,7,13,0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.peak-breadcrumb a {
color: var(--sky);
text-decoration: none;
transition: color 0.2s;
}
.peak-breadcrumb a:hover { color: var(--cream); }
.peak-breadcrumb .pb-sep {
color: var(--mute-3);
font-weight: 400;
}
.peak-breadcrumb .pb-here {
color: var(--cream);
font-weight: 700;
}
body.theme-light .peak-breadcrumb {
background: rgba(255,253,248,0.7);
border-bottom: 1px solid rgba(26,24,32,0.08);
}
@media (max-width: 580px) {
.peak-breadcrumb { font-size: 0.65rem; padding: 8px 18px; gap: 8px; }
}
/* ============ THEME TOGGLE — brand-aligned mini-horizon ============
A circular "window" showing moon-over-peaks (dark) ↔ sun-rising-over-peaks (light).
Mirrors the site's own aurora/horizon imagery so it feels native.
Defensive: explicit dimensions + !important on the few rules that fight any CSS reset. */
.theme-toggle {
position: relative !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 44px !important;
height: 44px !important;
background: transparent !important;
border: 0 !important;
border-radius: 999px !important;
padding: 0 !important;
margin: 0 !important;
cursor: pointer !important;
overflow: hidden;
flex-shrink: 0;
vertical-align: middle;
appearance: none;
-webkit-appearance: none;
transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.theme-toggle:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(255,165,61,0.25), 0 0 12px rgba(95,177,230,0.18);
}
.theme-toggle:active { transform: translateY(0); }
.theme-toggle:focus-visible {
outline: 2px solid var(--aurora-3);
outline-offset: 2px;
}
.theme-toggle .toggle-stage {
width: 44px !important;
height: 44px !important;
display: block;
pointer-events: none; /* clicks pass to the button */
}
/* Two stage groups crossfade: moon visible in dark, sun visible in light */
.theme-toggle .tt-stage-moon,
.theme-toggle .tt-stage-sun {
transition: opacity 0.5s ease;
}
.theme-toggle .tt-stage-moon { opacity: 1; }
.theme-toggle .tt-stage-sun { opacity: 0; }
body.theme-light .theme-toggle .tt-stage-moon { opacity: 0; }
body.theme-light .theme-toggle .tt-stage-sun { opacity: 1; }
/* Outer rim ring — tint with theme */
.theme-toggle .tt-rim {
stroke: rgba(245,241,234,0.30);
transition: stroke 0.4s ease;
}
.theme-toggle:hover .tt-rim { stroke: rgba(255,217,122,0.75); }
body.theme-light .theme-toggle .tt-rim { stroke: rgba(26,24,32,0.30); }
body.theme-light .theme-toggle:hover .tt-rim { stroke: rgba(216,102,24,0.75); }
/* Smooth crossfade on theme change */
html { transition: background 0.4s ease; }
body { transition: background 0.4s ease, color 0.3s ease; }
/* ============ REDUCED MOTION — site-wide safety net ============
Respects users with vestibular sensitivity / motion sickness.
Disables aurora drift, parallax, reveal stagger, IntersectionObserver fade-in,
smooth scroll, and theme transition — but keeps content fully visible.
Page-specific overrides may add their own; this is the baseline. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
html, body { transition: none !important; }
.theme-toggle .toggle-stage,
.theme-toggle .tt-stage-moon,
.theme-toggle .tt-stage-sun,
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { transition: none !important; }
/* Aurora atmosphere — kill drift but keep colors */
.atmos .blob,
.aurora-veil,
.aurora-grain,
.culture-bloom,
.catalog-bloom,
.stack-bloom,
.phyto-bloom,
[class*="-bloom"] {
animation: none !important;
transition: none !important;
}
/* Hero / section reveals — IntersectionObserver-driven .reveal pattern + manual stagger */
.reveal,
.reveal.in,
[data-reveal],
[class*="reveal"],
.stagger,
[data-step],
[data-stagger] {
opacity: 1 !important;
transform: none !important;
animation: none !important;
transition: none !important;
}
/* Hero stagger (character-by-character) — instant reveal */
.char,
[class*="hero"] .char,
[class*="-hero"] .char {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
/* Bridge / marquee scrollers — pause */
.bridge-track,
.marquee,
[class*="marquee"],
[class*="scroller"] {
animation: none !important;
}
/* Decorative pulses / breathes / orbs */
[class*="pulse"],
[class*="breathe"],
.orb-stage .ring,
.orb-core,
.pillar-bg,
.lift-heart,
.lift-pulse,
.ring-pulse,
.center-glow,
.person {
animation: none !important;
transform: none !important;
}
/* Hover-triggered transforms — keep flat */
*:hover {
transform: none !important;
}
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 17px; line-height: 1.55;
color: var(--cream);
background: var(--bg);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
::selection { background: var(--sky); color: var(--ink); }
h1, h2, h3, h4, h5, h6 {
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
letter-spacing: -0.04em;
margin: 0;
color: var(--cream);
/* Extra padding so gradient text-clip never chops descenders (g, y, p, j) */
padding-bottom: 0.08em;
}
h1 { font-weight: 800; letter-spacing: -0.05em; line-height: 1.12; font-size: clamp(2.6rem, 5.6vw, 4.5rem); padding-bottom: 0.10em; }
h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1.14; padding-bottom: 0.10em; }
h3 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.02em; }
p { margin: 0; color: var(--mute); }
p + p { margin-top: 1em; }
a { color: inherit; text-decoration: none; transition: color 0.15s; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }
.serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
/* Aurora gradient text helper — extra padding-bottom so descenders aren't clipped */
.aurora-text, .hero h1 em, .hero h1 .gradient, .final-cta h2 em, .final h2 em, h1 .aurora, h2 .aurora,
h1 em, h2 em, h3 em {
font-style: normal;
background: var(--grad-aurora);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 22px rgba(95,177,230,0.20));
/* Critical: prevent gradient text-clip from chopping g/y/p/j descenders */
line-height: 1.18;
padding-bottom: 0.14em;
overflow: visible;
}
/* ===== AURORA ATMOSPHERE (fixed behind every page) ===== */
.atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.atmos .blob {
position: absolute; border-radius: 50%;
filter: blur(120px); opacity: 0.42;
will-change: transform;
animation: aurora-drift 32s ease-in-out infinite alternate;
}
.atmos .blob.b1 { width: 55vw; height: 55vw; left: -10vw; top: -10vw; background: var(--sky); animation-duration: 36s; }
.atmos .blob.b2 { width: 50vw; height: 50vw; right: -12vw; top: 18vh; background: var(--aurora-3); animation-duration: 42s; animation-delay: -10s; }
.atmos .blob.b3 { width: 48vw; height: 48vw; left: 22vw; bottom: -20vw; background: var(--aurora-4); animation-duration: 38s; animation-delay: -18s; }
.atmos .blob.b4 { width: 42vw; height: 42vw; right: 4vw; bottom: -12vw; background: var(--sky-deep); animation-duration: 46s; animation-delay: -24s; }
@keyframes aurora-drift {
0% { transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(6vw,-5vh,0) scale(1.10); }
100% { transform: translate3d(-5vw,5vh,0) scale(0.92); }
}
.aurora-veil {
position: fixed; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, rgba(8,7,13,0.62) 0%, rgba(8,7,13,0.80) 60%, rgba(8,7,13,0.92) 100%);
}
.aurora-grain {
position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.045;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
main { position: relative; z-index: 3; }
/* ===== NAV ===== */
nav.top {
position: fixed; top: 0; left: 0; right: 0;
z-index: 50;
background: transparent;
transition: background 0.35s, backdrop-filter 0.35s, border-color 0.35s;
border-bottom: 1px solid transparent;
}
nav.top.scrolled,
nav.top.sticky {
background: rgba(8,7,13,0.65);
backdrop-filter: blur(22px) saturate(140%);
-webkit-backdrop-filter: blur(22px) saturate(140%);
border-bottom-color: var(--line);
}
nav.top .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: inline-flex; align-items: center; color: var(--cream); line-height: 1; }
.logo-svg { height: 24px; width: auto; display: block; color: inherit; }
.nav-links { display: none; align-items: center; gap: 32px; }
.nav-links a { font-size: 0.92rem; color: var(--mute); font-weight: 500; transition: color 0.15s; position: relative; padding: 6px 0; }
.nav-links a:hover { color: var(--sky); }
.nav-links a.active { color: var(--cream); }
.nav-links a.active::after {
content: "";
position: absolute;
left: 50%; bottom: -2px;
width: 26px; height: 2px;
transform: translateX(-50%);
background: linear-gradient(90deg, var(--sky), var(--aurora-3));
border-radius: 999px;
box-shadow: 0 0 10px rgba(95,177,230,0.55);
}
.nav-actions { display: flex; align-items: center; gap: 12px; }
@media (min-width: 980px) { .nav-links { display: flex; } }
.menu-toggle { display: none; background: transparent; border: 1px solid var(--line-2); border-radius: 12px; width: 44px; height: 44px; cursor: pointer; padding: 0; position: relative; color: var(--cream); }
.menu-toggle .bar, .menu-toggle .bar::before, .menu-toggle .bar::after { display: block; position: absolute; width: 18px; height: 1.5px; background: currentColor; transition: transform 0.25s, top 0.25s, background 0.2s; }
.menu-toggle .bar { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.menu-toggle .bar::before { content: ""; left: 0; top: -7px; }
.menu-toggle .bar::after { content: ""; left: 0; top: 7px; }
nav.top.menu-open .menu-toggle .bar { background: transparent; }
nav.top.menu-open .menu-toggle .bar::before { top: 0; transform: rotate(45deg); }
nav.top.menu-open .menu-toggle .bar::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 979px) { .menu-toggle { display: block; } .nav-actions .btn:not(.menu-toggle):not(.nav-cta) { display: none; } }
.mobile-menu { position: fixed; top: 72px; left: 0; right: 0; height: calc(100dvh - 72px); background: rgba(8,7,13,0.97); backdrop-filter: blur(28px); z-index: 49; padding: 40px 28px 48px; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s, visibility 0.4s; display: flex; flex-direction: column; overflow-y: auto; }
.mobile-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-menu a:not(.btn) { display: block; font-family: 'Inter Tight', sans-serif; font-size: 1.6rem; color: var(--cream); font-weight: 700; padding: 20px 0; border-bottom: 1px solid var(--line); letter-spacing: -0.035em; }
.mobile-menu .mobile-cta { margin-top: 28px; align-self: stretch; text-align: center; justify-content: center; background: var(--cream); color: var(--ink); padding: 18px 24px; font-size: 1.05rem; font-weight: 600; border-radius: 999px; }
body.menu-open { overflow: hidden; }
/* ===== EYEBROW ===== */
.eyebrow, .pill, .step-eyebrow, .fi-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Inter Tight', sans-serif;
font-size: 0.74rem; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--sky);
padding: 9px 18px;
border: 1px solid var(--line-2);
border-radius: 999px;
background: rgba(245,241,234,0.025);
backdrop-filter: blur(10px);
}
.eyebrow::before, .pill::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--sky);
box-shadow: 0 0 10px rgba(95,177,230,0.7);
}
/* ===== HERO ===== */
.hero, header.hero {
padding: 160px 24px 90px;
text-align: center;
position: relative;
background: rgba(5,4,10,0.50);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.hero h1 { color: var(--cream); margin: 0 auto; max-width: 18ch; }
.hero .lede, .hero .sub, .hero p:not(.eyebrow):not(.meta):not(.pill) {
margin: 28px auto 0;
max-width: 620px;
font-size: clamp(1.05rem, 1.7vw, 1.25rem);
line-height: 1.6;
color: var(--mute);
}
/* ===== SECTION ===== */
section { padding: 100px 0; position: relative; background: transparent; }
section.alt { background: rgba(13,12,20,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
section.dark { background: rgba(5,4,10,0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
@media (max-width: 720px) { section { padding: 70px 0; } }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.section-head .eyebrow { justify-content: center; }
.section-head h2 { margin-top: 18px; }
.section-head .lede, .section-head p { margin-top: 22px; color: var(--mute); }
/* ===== BUTTONS ===== */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 22px;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.95rem; font-weight: 600;
line-height: 1;
transition: transform 0.2s, box-shadow 0.3s, background 0.3s, border-color 0.2s, color 0.2s;
cursor: pointer;
border: 1px solid transparent;
text-decoration: none;
white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.btn-lg { padding: 16px 26px; font-size: 1rem; }
.btn-primary {
background: var(--cream);
color: var(--ink);
position: relative; overflow: hidden;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 18px 50px rgba(255,165,61,0.30);
}
.btn-secondary, .btn-ghost, .btn-ghost-dark {
background: transparent;
color: var(--cream);
border: 1px solid var(--line-2);
}
.btn-secondary:hover, .btn-ghost:hover, .btn-ghost-dark:hover {
background: rgba(245,241,234,0.05);
border-color: var(--sky);
transform: translateY(-2px);
}
.nav-cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px; border-radius: 999px;
background: var(--cream); color: var(--ink);
font-size: 0.9rem; font-weight: 600;
transition: transform 0.18s, box-shadow 0.3s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(255,165,61,0.22); color: var(--ink); }
.nav-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
/* ===== CARDS ===== */
.card, .leader-card, .tcard, .value-cell, .feature-cell, .stream-card,
.result-card, .cell, .stat-cell, .timeline-item, .panel, .term-card,
.story-card, .testimonial, .product-card, .pricing-card, .module-card,
.insight-card, .culture-cell, .legacy-cell, .faq-item, .ev-card,
.month-card, .leg-cell {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.card:hover, .leader-card:hover, .tcard:hover, .value-cell:hover,
.feature-cell:hover, .stream-card:hover, .result-card:hover,
.stat-cell:hover, .timeline-item:hover, .panel:hover, .term-card:hover,
.story-card:hover, .testimonial:hover, .culture-cell:hover,
.legacy-cell:hover, .faq-item:hover, .ev-card:hover, .month-card:hover,
.pricing-card:hover, .module-card:hover, .insight-card:hover {
border-color: rgba(95,177,230,0.32);
background: var(--bg-card-h);
box-shadow: 0 18px 44px rgba(0,0,0,0.45), 0 0 36px rgba(95,177,230,0.10);
transform: translateY(-3px);
}
/* ===== NUMBERS / STATS ===== */
.v-num, .num, .l-stat .num, .stat-num, .big-num, .metric,
.stat-cell .v, .leg-cell .v, .l-num {
color: var(--aurora-4);
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
letter-spacing: -0.02em;
}
/* ===== SMALL CAPS LABELS ===== */
.l-role, .ch-label, .panel-tag, .tag, .badge, .chip,
.stat-cell .k, .l-stat .lab, .meta-label, .pillar-tag {
color: var(--sky);
font-family: 'Inter Tight', sans-serif;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
font-size: 0.72rem;
}
/* ===== DIVIDERS ===== */
hr, .divider {
background: linear-gradient(90deg, transparent, rgba(95,177,230,0.35), transparent);
border: 0; height: 1px; margin: 40px 0;
}
/* ===== LINKS ===== */
main a:not(.btn):not(.nav-cta):not(.logo):not(.panel):not(.pillar):not(.option):hover,
footer a:not(.btn):hover { color: var(--sky); }
a:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
/* ===== INPUTS ===== */
input[type="text"], input[type="email"], input[type="number"], input[type="search"],
input[type="tel"], input[type="url"], textarea, select {
font-family: 'Inter', sans-serif;
background: rgba(245,241,234,0.04);
border: 1px solid var(--line-2);
color: var(--cream);
border-radius: 12px;
padding: 12px 16px;
font-size: 1rem;
transition: border-color 0.2s, background 0.2s;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--sky);
background: rgba(245,241,234,0.06);
box-shadow: 0 0 0 4px rgba(95,177,230,0.10);
}
input::placeholder, textarea::placeholder { color: var(--mute-2); }
/* ===== TABLES ===== */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--sky); font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; }
/* ===== FINAL CTA ===== */
.final-cta, .final {
padding: 140px 0 120px;
text-align: center;
background: rgba(5,4,10,0.62);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
position: relative;
}
.final-cta::before, .final::before {
content: ""; position: absolute; left: 50%; top: 0;
width: 80%; max-width: 800px; height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, rgba(95,177,230,0.35), transparent);
}
.final-cta h2, .final h2 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.04; max-width: 760px; margin: 0 auto; }
.final-cta p, .final p { margin: 24px auto 0; max-width: 540px; color: var(--mute); }
.final-cta .ctas, .final .ctas, .hero-cta { display: inline-flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }
/* ===== FOOTER ===== */
footer {
padding: 60px 0 44px;
border-top: 1px solid var(--line);
background: rgba(8,7,13,0.85);
backdrop-filter: blur(6px);
position: relative; z-index: 3;
}
footer .container { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; }
footer .legal { font-size: 0.8125rem; color: var(--mute-3); }
footer .flinks { display: flex; gap: 22px; flex-wrap: wrap; }
footer .flinks a { font-size: 0.8125rem; color: var(--mute); transition: color 0.15s; }
footer .flinks a:hover { color: var(--sky); }
footer .logo-svg { height: 26px; color: var(--cream); }
/* ===== STICKY CTA ===== */
.sticky-cta {
position: fixed; left: 16px; right: 16px; bottom: 16px;
z-index: 45;
background: var(--grad-sky-warm);
color: var(--ink);
border-radius: 999px;
padding: 15px 22px;
display: none;
align-items: center; justify-content: center;
gap: 10px;
font-size: 0.95rem; font-weight: 600;
text-decoration: none;
box-shadow: 0 14px 36px rgba(95,177,230,0.35), 0 0 0 1px rgba(95,177,230,0.2), 0 0 30px rgba(255,165,61,0.18);
transform: translateY(140%);
transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.sticky-cta.visible { transform: translateY(0); }
body.menu-open .sticky-cta { display: none !important; }
@media (max-width: 720px) { .sticky-cta { display: flex; } }
/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(95,177,230,0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(95,177,230,0.5); }
/* ===== IMAGE FALLBACK HANDLING — hide initials text when the photo loads ===== */
/* `:has(> img)` triggers when an ![]()
is a direct child. The onerror="this.remove()"
pattern removes failed images, so :has(> img) is the cleanest "image present" test. */
*:has(> img) > .lp-fallback,
*:has(> img) > .hp-fallback,
*:has(> img) > .av-fallback,
*:has(> img) > .l-av-fallback {
display: none !important;
}
/* Bump every photo above the initials text just in case */
.tcard .who .av img,
.leader-photo img,
.hero-portrait img,
.life-photo img,
.l-av img,
.who .av img {
z-index: 5 !important;
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
/* For circles where the initials are INLINE text inside the same div as the img
(e.g. ![]()
KM