/* ============================================================
HUMANS OF BAJA - Design System v3
Identity: General Sans + Satoshi
Dark: Glassmorphism | Light: Liquid Glass
============================================================ */
/* --- 1. FONTS ---
Satoshi + General Sans load via tags in each page head (an @import here
serialized the whole font chain behind this stylesheet and blocked first paint). */
/* --- 2. CSS VARIABLES --- */
:root {
--bg: #161418;
--bg-alt: #1E1B20;
--surface: rgba(255, 230, 220, 0.05);
--surface-hover: rgba(255, 230, 220, 0.09);
--surface-solid: #1E1A1F;
--glass: rgba(255, 240, 230, 0.07);
--glass-border: rgba(255, 220, 200, 0.12);
--glass-hover: rgba(255, 230, 220, 0.11);
/* Aliases for legacy names used by map popup/toast rules (were UNDEFINED and broke
those styles). They point at theme-switched tokens, so light mode flips them too. */
--glass-bg: var(--glass);
--card-bg: var(--surface-solid);
--text-primary: var(--text);
--text: #F5F0ED;
--text-sub: #C4B8B0;
--text-muted: #8A7E76;
--text-dim: #8A7E76; /* raised for WCAG AA contrast (was #564E48 = 2.25:1, failed) */
--red: #E63946;
--red-rgb: 230, 57, 70; /* brand red as an rgb triplet for rgba(var(--red-rgb), a) */
--red-hover: #FF4D5A;
--red-soft: rgba(var(--red-rgb), 0.15);
--red-glow: rgba(var(--red-rgb), 0.35);
--red-grad: linear-gradient(135deg, #E63946 0%, #FF6B6B 100%);
--error-text: #FF6B73; /* accessible red for error TEXT on dark bg (6.6:1) */
--border: rgba(255, 220, 200, 0.1);
--border-hover: rgba(255, 220, 200, 0.18);
--link: #60A5FA;
--success: #10B981;
--success-soft: rgba(16, 185, 129, 0.15);
--header-bg: rgba(18, 16, 20, 0.7);
--footer-bg: rgba(14, 12, 16, 0.95);
--blur: blur(20px);
--blur-heavy: blur(32px);
--shadow: 0 4px 24px rgba(10, 0, 0, 0.45);
--shadow-lg: 0 16px 48px rgba(10, 0, 0, 0.5);
--shadow-glass: 0 8px 32px rgba(10, 0, 0, 0.3), inset 0 1px 0 rgba(255, 230, 220, 0.06);
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 14px;
--radius-xl: 16px;
--max-w: 1360px;
--header-h: 72px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--t: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="light"] {
--bg: #F8F7F4;
--bg-alt: #EFEEEB;
--surface: rgba(255, 255, 255, 0.7);
--surface-hover: rgba(255, 255, 255, 0.85);
--surface-solid: #FFFFFF;
--glass: rgba(255, 255, 255, 0.55);
--glass-border: rgba(0, 0, 0, 0.08);
--glass-hover: rgba(255, 255, 255, 0.7);
--text: #1A1A24;
--text-sub: #3D3D52;
--text-muted: #6E6E88;
--text-dim: #6E6E82; /* raised for WCAG AA contrast (was #9E9EB4 = 2.45:1, failed) */
--red: #D62839;
--red-hover: #E63946;
--red-soft: rgba(214, 40, 57, 0.08);
--red-glow: rgba(214, 40, 57, 0.15);
--red-grad: linear-gradient(135deg, #D62839 0%, #E63946 100%);
--error-text: #C81E2C; /* accessible red for error TEXT on light bg (5.3:1) */
--border: rgba(0, 0, 0, 0.1);
--border-hover: rgba(0, 0, 0, 0.18);
--link: #2563EB;
--header-bg: rgba(248, 247, 244, 0.55);
--footer-bg: #1A1A24;
--shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.08);
--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* --- 3. RESET --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Firefox scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(var(--red-rgb), 0.3) transparent;
}
/* Webkit scrollbar (Chrome, Edge, Safari) */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(var(--red-rgb), 0.25);
border-radius: 10px;
transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(var(--red-rgb), 0.5);
}
[data-theme="light"] {
scrollbar-color: rgba(214, 40, 57, 0.25) transparent;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
background: rgba(214, 40, 57, 0.2);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
background: rgba(214, 40, 57, 0.4);
}
body {
font-family: 'Satoshi', -apple-system, system-ui, sans-serif;
background: linear-gradient(160deg, #201820 0%, #1A1520 25%, var(--bg) 55%, #110E14 85%, #0E0A10 100%);
background-attachment: fixed;
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
min-height: 100vh;
position: relative;
}
/* Gradient mesh background - VIBRANT color orbs for glass to blur over */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 90% 70% at 0% 0%, rgba(var(--red-rgb), 0.32) 0%, transparent 60%),
radial-gradient(ellipse 70% 60% at 100% 100%, rgba(88, 28, 135, 0.24) 0%, transparent 60%),
radial-gradient(ellipse 65% 55% at 50% 30%, rgba(var(--red-rgb), 0.08) 0%, transparent 55%),
radial-gradient(ellipse 55% 45% at 80% 20%, rgba(217, 119, 6, 0.1) 0%, transparent 50%),
radial-gradient(ellipse 50% 42% at 15% 80%, rgba(139, 92, 246, 0.16) 0%, transparent 50%),
radial-gradient(ellipse 40% 35% at 60% 70%, rgba(var(--red-rgb), 0.05) 0%, transparent 45%);
z-index: 0;
pointer-events: none;
animation: meshDrift 25s ease-in-out infinite alternate;
}
[data-theme="light"] body {
background: linear-gradient(135deg, #FDFCF9 0%, var(--bg) 40%, #F2F0EC 100%);
}
[data-theme="light"] body::before {
background:
radial-gradient(ellipse 70% 55% at 8% 20%, rgba(var(--red-rgb), 0.08) 0%, transparent 50%),
radial-gradient(ellipse 50% 50% at 85% 75%, rgba(56, 89, 220, 0.06) 0%, transparent 50%),
radial-gradient(ellipse 40% 35% at 50% 50%, rgba(168, 85, 247, 0.04) 0%, transparent 45%);
}
@keyframes meshDrift {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.1) translate(-2%, 2%); }
}
/* Noise */
body::after {
content: '';
position: fixed;
inset: 0;
opacity: 0.025;
pointer-events: none;
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 200px;
}
body > *:not(style):not(script):not(iframe) {
position: relative;
z-index: 2;
}
a { color: var(--link); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--red); }
img { max-width: 100%; display: block; }
::selection { background: var(--red); color: #fff; }
/* --- Custom scrollbar (theme-aware) --- */
:root { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
:root[data-theme="light"] { scrollbar-color: rgba(14, 14, 22, 0.22) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.18);
border-radius: var(--radius-sm);
border: 3px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--red-rgb), 0.6); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
[data-theme="light"]::-webkit-scrollbar-thumb,
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(14, 14, 22, 0.22); background-clip: content-box; }
[data-theme="light"]::-webkit-scrollbar-thumb:hover,
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(var(--red-rgb), 0.6); background-clip: content-box; }
/* --- 4. TYPOGRAPHY --- */
.font-incised { font-family: 'General Sans', 'Satoshi', sans-serif; font-weight: 700; }
h1, h2, h3 {
font-family: 'General Sans', 'Satoshi', -apple-system, system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: clamp(0.95rem, 1.8vw, 1.1rem); }
.section-body {
font-size: clamp(0.9rem, 1.4vw, 1rem);
color: var(--text-sub);
line-height: 1.75;
max-width: 640px;
}
.section-tag {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--red);
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.6rem;
}
.section-tag::before {
content: '';
width: 24px;
height: 1.5px;
background: var(--red);
}
/* --- 5. LAYOUT --- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding-inline: clamp(1rem, 3.5vw, 3rem); }
.section { padding: 3.5rem 0; }
/* --- 6. GLASS CARD --- */
.glass {
background: var(--glass);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
transition: all var(--t);
box-shadow: var(--shadow-glass);
}
.glass:hover {
background: var(--glass-hover);
border-color: var(--border-hover);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
/* --- 7. HEADER (Floating Island) --- */
.site-header {
position: fixed;
top: 0.85rem;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
height: auto;
padding: 0.55rem 0.6rem;
background: rgba(12, 12, 20, 0.35);
backdrop-filter: blur(24px) saturate(1.6);
-webkit-backdrop-filter: blur(24px) saturate(1.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius);
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
transition: transform 0.4s var(--ease), background 0.3s var(--ease),
box-shadow 0.3s var(--ease), border-color 0.3s var(--ease),
top 0.3s var(--ease);
width: auto;
max-width: calc(100vw - 2rem);
}
[data-theme="light"] .site-header {
background: rgba(255, 255, 255, 0.72);
border-color: rgba(0, 0, 0, 0.06);
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.06),
0 1px 3px rgba(0, 0, 0, 0.04);
}
/* Scrolled state - tighter, more opaque island */
.site-header.header-scrolled {
background: rgba(8, 8, 14, 0.82);
border-color: rgba(255, 255, 255, 0.12);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .site-header.header-scrolled {
background: rgba(255, 255, 255, 0.88);
border-color: rgba(0, 0, 0, 0.08);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.08),
0 1px 3px rgba(0, 0, 0, 0.04);
}
/* ── Docked state - compact left-corner badge: [Logo] [Theme] ── */
.site-header.header-docked {
top: 0.85rem;
left: 1.2rem;
transform: translateX(0);
padding: 0.4rem 0.5rem;
border-radius: var(--radius);
background: rgba(8, 8, 14, 0.85);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .site-header.header-docked {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(0, 0, 0, 0.06);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.06),
0 1px 3px rgba(0, 0, 0, 0.04);
}
/* Collapse inner elements when docked */
.site-header.header-docked .site-logo-text {
max-width: 0;
opacity: 0;
overflow: hidden;
margin: 0;
padding: 0;
transition: max-width 0.35s var(--ease), opacity 0.2s var(--ease);
}
.site-header.header-docked .nav-center {
max-width: 0;
opacity: 0;
overflow: hidden;
border: none;
padding: 0;
margin: 0;
gap: 0;
transition: opacity 0.25s var(--ease), max-width 0s;
}
.site-header.header-docked .btn-cta {
max-width: 0;
opacity: 0;
overflow: hidden;
padding: 0;
margin: 0;
border: none;
font-size: 0;
transition: max-width 0.3s var(--ease) 0.1s, opacity 0.15s var(--ease);
}
/* Theme toggle stays in normal flex flow - never moves */
.site-header.header-docked .theme-toggle {
width: 32px;
height: 32px;
}
/* Logo shrinks slightly in docked */
.site-header.header-docked .site-logo img {
height: 36px;
}
.site-header.header-docked .site-logo {
gap: 0;
}
/* ── Hover: badge stays compact, nav appears as DROPDOWN below ── */
/* Badge itself does NOT change size on hover */
.site-header.header-docked:hover {
left: 1.2rem;
transform: translateX(0);
padding: 0.4rem 0.5rem;
min-width: 140px;
}
/* Logo text stays hidden - badge stays compact */
.site-header.header-docked:hover .site-logo-text {
max-width: 0;
opacity: 0;
}
.site-header.header-docked:hover .site-logo {
gap: 0;
}
/* Nav appears as a dropdown panel below the badge */
.site-header.header-docked:hover .nav-center {
position: absolute;
top: calc(100% + 6px);
left: 0;
max-width: none;
width: 100%;
opacity: 1;
overflow: visible;
flex-direction: column;
background: rgba(8, 8, 14, 0.92);
backdrop-filter: blur(24px) saturate(1.6);
-webkit-backdrop-filter: blur(24px) saturate(1.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-sm);
padding: 0.35rem;
gap: 0.1rem;
margin: 0;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: opacity 0.25s var(--ease);
}
.site-header.header-docked:hover .nav-center .nav-link {
padding: 0.4rem 0.7rem;
font-size: 0.74rem;
border-radius: var(--radius-sm);
white-space: nowrap;
text-align: left;
}
[data-theme="light"] .site-header.header-docked:hover .nav-center {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(0, 0, 0, 0.08);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* CTA stays hidden in docked hover - accessible via footer/page */
.site-header.header-docked:hover .btn-cta {
max-width: 0;
opacity: 0;
padding: 0;
margin: 0;
font-size: 0;
border: none;
}
/* Invisible bridge between badge and dropdown for hover continuity */
.site-header.header-docked::after {
content: '';
position: absolute;
left: 0;
width: 100%;
top: 100%;
height: 10px;
pointer-events: none;
}
.site-header.header-docked:hover::after {
pointer-events: auto;
}
.header-inner {
display: flex;
align-items: center;
gap: 0.5rem;
height: auto;
padding: 0;
}
.site-logo {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: var(--text);
flex-shrink: 0;
transition: opacity 0.25s var(--ease);
}
.site-logo:hover { opacity: 0.85; }
.site-logo img {
height: 44px;
width: auto;
filter: drop-shadow(0 0 8px rgba(var(--red-rgb), 0.2));
transition: filter 0.3s var(--ease), height 0.35s var(--ease);
}
.site-logo:hover img {
filter: drop-shadow(0 0 12px rgba(var(--red-rgb), 0.35));
}
.site-logo-text {
font-family: 'Clash Display', 'General Sans', sans-serif;
font-size: 1.02rem;
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: 600;
color: var(--text);
white-space: nowrap;
/* Dock/undock animation */
max-width: 260px;
opacity: 1;
overflow: hidden;
transition: max-width 0.4s var(--ease) 0.1s, opacity 0.3s var(--ease) 0.15s;
}
/* Red brand accent on the "BAJA" word in wordmarks (header + footer) */
.slt-accent { color: var(--red); font-weight: 700; }
.nav-center {
display: flex;
align-items: center;
gap: 0.15rem;
border-left: 1px solid rgba(255, 255, 255, 0.08);
border-right: 1px solid rgba(255, 255, 255, 0.08);
padding: 0 0.5rem;
margin: 0 0.15rem;
/* Dock/undock animation */
max-width: 300px;
opacity: 1;
overflow: hidden;
transition: max-width 0.4s var(--ease) 0.15s, opacity 0.3s var(--ease) 0.2s,
border-color 0.3s var(--ease);
}
[data-theme="light"] .nav-center {
border-left-color: rgba(0, 0, 0, 0.08);
border-right-color: rgba(0, 0, 0, 0.08);
}
/* Only visible in docked dropdown - hidden in normal expanded header */
.nav-link--docked-only {
display: none !important;
}
.site-header.header-docked:hover .nav-link--docked-only {
display: flex !important;
}
.nav-link {
font-size: 0.76rem;
font-weight: 600;
color: var(--text-muted);
text-decoration: none;
padding: 0.4rem 1rem;
border-radius: var(--radius-sm);
transition: all 0.25s var(--ease);
position: relative;
letter-spacing: 0.01em;
}
.nav-link:hover {
color: var(--text);
background: var(--surface-hover);
}
.nav-link.active {
color: var(--text);
background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .nav-link.active {
background: rgba(0, 0, 0, 0.05);
}
/* Active nav indicator removed per design decision - logo acts as home */
.nav-link-ext { color: var(--text-dim); display: inline-flex; align-items: center; gap: 0.25rem; }
.nav-link-ext svg { width: 9px; height: 9px; opacity: 0.4; }
.nav-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.theme-toggle {
background: transparent;
border: none;
border-radius: 50%;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
color: var(--text-sub);
font-size: 0.85rem;
transition: all 0.3s var(--ease);
padding: 0;
position: relative;
}
.theme-toggle:hover {
color: var(--text);
opacity: 1;
transform: rotate(20deg) scale(1.05);
}
.theme-icon-svg {
width: 16px; height: 16px;
stroke: currentColor;
fill: none;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.theme-icon-sun { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg); }
.theme-icon-moon { opacity: 1; }
[data-theme="light"] .theme-icon-moon { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
[data-theme="light"] .theme-icon-sun { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
/* ── CTA BUTTON ── */
@keyframes cta-glow {
0%, 100% { box-shadow: 0 2px 12px var(--red-glow), 0 0 0 0 transparent; }
50% { box-shadow: 0 4px 24px var(--red-glow), 0 0 0 3px rgba(var(--red-rgb), 0.08); }
}
.btn-cta {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: 'Satoshi', sans-serif;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
color: #fff;
background: var(--red-grad);
border: none; border-radius: var(--radius-sm);
padding: 0.55rem 1.25rem; cursor: pointer;
text-decoration: none;
box-shadow: 0 2px 12px var(--red-glow);
animation: cta-glow 3s ease-in-out 3;
position: relative;
overflow: hidden;
/* Dock/undock animation */
max-width: 200px;
opacity: 1;
transition: all 0.3s var(--ease), max-width 0.4s var(--ease) 0.2s,
opacity 0.3s var(--ease) 0.25s;
white-space: nowrap;
}
/* Shimmer sweep on CTA */
.btn-cta::before {
content: '';
position: absolute;
top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
transition: left 0.5s ease;
}
.btn-cta:hover::before { left: 100%; }
.btn-cta:hover {
color: #fff;
transform: translateY(-2px) scale(1.02);
box-shadow: 0 6px 28px var(--red-glow);
filter: brightness(1.08);
animation: none;
}
/* --- 8. HERO --- */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: calc(var(--header-h) + 2rem) 2rem 2rem;
position: relative;
overflow: hidden;
}
/* Giant decorative "20" watermark */
.hero::after {
content: '20';
position: absolute;
font-family: 'General Sans', sans-serif;
font-weight: 700;
font-size: clamp(20rem, 50vw, 45rem);
letter-spacing: -0.05em;
color: var(--red);
opacity: 0.03;
right: -5%;
bottom: -10%;
line-height: 0.8;
pointer-events: none;
z-index: 0;
}
[data-theme="light"] .hero::after { opacity: 0.025; }
.hero-content {
max-width: 760px;
position: relative;
z-index: 1;
}
.hero-eyebrow {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
content: '';
width: 32px;
height: 1px;
background: var(--red);
opacity: 0.4;
}
.hero h1 {
font-size: clamp(3.2rem, 10vw, 7rem);
line-height: 0.92;
margin-bottom: 1.5rem;
letter-spacing: 0.04em;
}
/* Brand-red accent word - one canonical global utility (was 6 parent-scoped copies; the About page used it outside every scope and rendered white) */
.text-red {
color: var(--red);
background: var(--red-grad);
-webkit-background-clip: text;
background-clip: text;
}
/* Solid-red fallback: some browsers render background-clip:text fully
transparent (invisible). Only make the fill transparent where supported. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.text-red { -webkit-text-fill-color: transparent; }
}
.hero-sub {
font-size: clamp(0.9rem, 1.6vw, 1.05rem);
color: var(--text-sub);
max-width: 480px;
margin: 0 auto 2.5rem;
line-height: 1.7;
font-weight: 400;
}
.hero-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.btn-primary {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: 'Satoshi', sans-serif;
font-size: 0.85rem; font-weight: 700; color: #fff;
background: var(--red-grad);
border: none; border-radius: var(--radius-sm);
padding: 0.85rem 1.6rem; cursor: pointer; text-decoration: none;
transition: all var(--t);
box-shadow: 0 4px 20px var(--red-glow);
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 32px var(--red-glow); filter: brightness(1.1); }
.btn-primary--lg { font-size: 0.95rem; padding: 1rem 2rem; border-radius: var(--radius); }
.btn-ghost {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: 'Satoshi', sans-serif;
font-size: 0.85rem; font-weight: 500; color: var(--text-sub);
background: var(--glass);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
padding: 0.85rem 1.6rem; cursor: pointer; text-decoration: none;
transition: all var(--t);
}
.btn-ghost:hover { border-color: var(--border-hover); color: var(--text); background: var(--glass-hover); }
/* --- 8b. VIDEO HERO --- */
.video-hero {
position: relative;
min-height: 100vh;
max-height: 900px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.video-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
background: #0a0a12;
}
.video-hero-bg video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
transition: opacity 1.2s ease, filter 0.6s ease;
animation: kenBurns 25s ease-in-out infinite alternate;
/* Dark mode: slightly dimmer, cooler */
filter: brightness(0.9) saturate(0.85);
}
/* Light mode: brighter, slightly warmer */
[data-theme="light"] .video-hero-bg video {
filter: brightness(1.1) saturate(1.1);
}
/* Video fade-in: starts invisible, fades in when playing */
.hero-video-loading {
opacity: 0;
}
.hero-video-loaded {
opacity: 1;
}
@keyframes kenBurns {
0% { transform: translate(-50%, -50%) scale(1.3); }
100% { transform: translate(-50%, -50%) scale(1.38); }
}
.video-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
transition: background 0.6s ease;
background: linear-gradient(
to bottom,
rgba(6, 6, 11, 0.7) 0%,
rgba(6, 6, 11, 0.6) 40%,
rgba(6, 6, 11, 0.82) 80%,
rgba(6, 6, 11, 0.97) 100%
);
}
/* Light mode: same dark overlay, slightly less opaque so more video shows */
/* The hero cycles 11 different clips, several of them bright (sparks, daylight), and the
text on top is white in both themes. The light-theme scrim used to sit at 0.3 through
the 40% band, which is exactly where the headline and sub-line land, so on the bright
clips the copy washed out. Dark theme already ran 0.6 there. These values keep light
theme visibly airier than dark while holding the text readable on every clip. */
[data-theme="light"] .video-hero-overlay {
background: linear-gradient(
to bottom,
rgba(6, 6, 11, 0.55) 0%,
rgba(6, 6, 11, 0.5) 40%,
rgba(6, 6, 11, 0.7) 80%,
rgba(6, 6, 11, 0.9) 100%
);
}
/* Hero text stays white in light mode */
[data-theme="light"] .video-hero h1 { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
[data-theme="light"] .video-hero .hero-sub { color: rgba(255, 255, 255, 0.88); }
[data-theme="light"] .video-hero .btn-ghost {
color: rgba(255, 255, 255, 0.65);
border-color: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .video-hero .btn-ghost:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.1);
}
.video-hero-content {
position: relative;
z-index: 2;
width: 100%;
padding: 2rem 4rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* --- Hero Entrance Animations --- */
.hero-anim {
opacity: 0;
transform: translateY(24px);
animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-anim-1 { animation-delay: 0.2s; }
.hero-anim-2 { animation-delay: 0.45s; }
.hero-anim-3 { animation-delay: 0.7s; }
@keyframes heroFadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- Floating Particles (enhanced) --- */
.hero-particles {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.particle {
position: absolute;
width: 3px;
height: 3px;
background: var(--red);
border-radius: 50%;
opacity: 0;
animation: particleFloat 8s ease-in-out infinite;
box-shadow: 0 0 6px rgba(var(--red-rgb), 0.4);
}
/* Vary particle sizes */
.particle:nth-child(odd) { width: 4px; height: 4px; }
.particle:nth-child(3n) { width: 2px; height: 2px; animation-duration: 10s; }
.particle:nth-child(4n+1) { width: 5px; height: 5px; box-shadow: 0 0 10px rgba(var(--red-rgb), 0.5); }
@keyframes particleFloat {
0%, 100% { opacity: 0; transform: translateY(0) scale(1); }
20% { opacity: 0.6; }
50% { opacity: 0.35; transform: translateY(-40px) scale(1.4); }
80% { opacity: 0.6; }
}
/* --- Hero Scroll Hint --- */
.hero-scroll-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
color: rgba(255, 255, 255, 0.5);
animation: scrollPulse 2.5s ease-in-out infinite;
}
.hero-scroll-hint span {
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.hero-scroll-hint svg {
width: 16px;
height: 16px;
}
[data-theme="light"] .hero-scroll-hint {
color: rgba(0, 0, 0, 0.35);
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); }
50% { opacity: 0.9; transform: translateX(-50%) translateY(6px); }
}
/* Hero primary CTA glow */
.btn-hero-primary {
box-shadow: 0 4px 20px rgba(var(--red-rgb), 0.35);
font-size: 0.92rem;
padding: 0.85rem 2rem;
}
.btn-hero-primary:hover {
box-shadow: 0 6px 30px rgba(var(--red-rgb), 0.5);
transform: translateY(-2px);
}
/* --- Journey Section: Editorial Split + Auto-Sliding Cards --- */
.journey-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3.5rem;
align-items: center;
margin-bottom: 5rem;
}
/* --- Journey Comparison: Side-by-Side Then vs Now --- */
.journey-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: start;
}
.journey-compare-card {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.journey-compare-card .journey-card {
width: 100%;
}
.journey-compare-text {
text-align: left;
}
.journey-compare-text h3 {
font-size: clamp(1.3rem, 2.2vw, 1.8rem);
line-height: 1.3;
margin-bottom: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.journey-compare-text .section-body {
font-size: 0.88rem;
line-height: 1.65;
color: var(--text-sub);
}
.journey-compare-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
padding: 1rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.journey-compare-stats .journey-stat {
text-align: center;
}
.journey-compare-stats .journey-stat-num {
font-size: clamp(1rem, 1.8vw, 1.35rem);
}
.journey-compare-stats .journey-stat-label {
font-size: 0.6rem;
}
/* Mobile: stack the comparison cards */
@media (max-width: 768px) {
.journey-comparison {
grid-template-columns: 1fr;
gap: 3rem;
}
.journey-compare-text h3 {
font-size: 1.4rem;
}
.journey-compare-stats {
grid-template-columns: repeat(4, 1fr);
}
}
.journey-block-reversed {
direction: rtl;
}
.journey-block-reversed > * {
direction: ltr;
}
/* Text side */
.journey-text {
text-align: left;
}
.journey-text h2 {
text-align: left;
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.25;
}
/* Journey Stats Strip - below the media card */
.journey-media {
display: flex;
flex-direction: column;
}
.journey-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.6rem 0.75rem;
margin-top: 1rem;
padding: 1rem 0.25rem 0;
border-top: 1px solid var(--glass-border);
text-align: center;
}
.journey-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
}
.journey-stat-num {
font-family: 'General Sans', sans-serif;
font-size: 1.15rem;
font-weight: 800;
color: var(--red);
line-height: 1.1;
letter-spacing: -0.02em;
}
.journey-stat-label {
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Card side */
.journey-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid var(--glass-border);
background: var(--glass);
}
.journey-card-slides {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.journey-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}
.journey-slide.active {
opacity: 1;
z-index: 1;
}
.journey-slide img,
.journey-slide-video img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Video play overlay */
.journey-slide-video {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
}
.journey-play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
transition: background 0.3s ease;
}
.journey-play-overlay svg {
width: 56px;
height: 56px;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
transition: transform 0.3s ease;
}
.journey-slide-video:hover .journey-play-overlay {
background: rgba(0, 0, 0, 0.15);
}
.journey-slide-video:hover .journey-play-overlay svg {
transform: scale(1.1);
}
/* YouTube iframe when video is playing */
.journey-slide-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
/* Progress dots */
.journey-card-progress {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
gap: 6px;
}
.progress-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
transition: all 0.35s ease;
cursor: pointer;
}
.progress-dot.active {
background: #fff;
width: 24px;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* Year badge */
.journey-card-year {
position: absolute;
top: 14px;
left: 14px;
z-index: 5;
font-family: 'Satoshi', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
color: #fff;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 0.3rem 0.7rem;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Responsive */
@media (max-width: 768px) {
.journey-block {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.journey-block-reversed {
direction: ltr;
}
.journey-text h2 {
text-align: center;
}
.journey-text {
text-align: center;
}
.journey-card-slides {
aspect-ratio: 16 / 11;
}
.journey-play-overlay svg {
width: 44px;
height: 44px;
}
.journey-stats {
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem 0.4rem;
text-align: center;
justify-items: center;
}
.journey-stat-num {
font-size: 1rem;
}
}
.video-hero h1 {
font-size: clamp(2.6rem, 6vw, 5.2rem);
font-weight: 800;
line-height: 1.05;
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.96);
text-transform: none;
letter-spacing: 0.01em;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
text-align: center;
}
.video-hero .hero-hook {
display: block;
font-size: clamp(1.5rem, 3.4vw, 2.6rem);
font-weight: 700;
letter-spacing: 0.03em;
color: rgba(255, 255, 255, 0.82);
line-height: 1.2;
margin: 0 0 0.75rem 0;
padding: 0;
text-transform: none;
text-align: center;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.video-hero .hero-beats {
font-size: clamp(1rem, 2vw, 1.45rem);
font-weight: 600;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.9);
line-height: 1.4;
margin: 0 auto 1.75rem;
text-align: center;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
/* Three short sentences that must not break mid-phrase. Without this, narrow
screens orphan "The" at the end of one line and drop "breakthroughs." onto
the next, splitting the red phrase. Balance evens the lines out instead.
Browsers without support simply wrap as before. */
text-wrap: balance;
}
.video-hero .hero-sub {
font-size: clamp(0.85rem, 1.3vw, 1rem);
color: rgba(255, 255, 255, 0.68);
max-width: 640px;
margin: 0 auto 2rem;
line-height: 1.75;
font-weight: 400;
text-align: center;
}
/* Light mode hero-sub color handled by forced-dark section above */
.video-hero .hero-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.video-hero .btn-ghost {
color: rgba(255, 255, 255, 0.65);
border-color: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05);
}
.video-hero .btn-ghost:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.1);
}
/* Light mode hero ghost button handled by forced-dark section above */
.hero-scroll-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
color: rgba(255, 255, 255, 0.35);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
animation: scrollBounce 2s ease-in-out infinite;
}
[data-theme="light"] .hero-scroll-hint { color: rgba(0, 0, 0, 0.25); }
.hero-scroll-hint svg { width: 16px; height: 16px; }
@keyframes scrollBounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}
/* --- 8c. MEDIA ROW (Image + Video pairs) --- */
.media-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
margin-top: 2rem;
}
.media-card {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--glass-border);
background: var(--glass);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
box-shadow: var(--shadow-glass);
transition: all var(--t);
}
.media-card:hover {
border-color: var(--border-hover);
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.media-card img {
width: 100%;
height: 280px;
object-fit: cover;
display: block;
}
.media-card.media-video {
display: flex;
flex-direction: column;
}
.video-embed {
position: relative;
padding-top: 56.25%;
flex: 1;
min-height: 280px;
}
.video-embed iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border: none;
}
.media-caption {
font-size: 0.68rem;
color: var(--text-dim);
padding: 0.6rem 0.85rem;
border-top: 1px solid var(--border);
}
/* Section spacing helpers */
.origin-section, .today-section { padding: 4rem 0; }
.journey-cta { padding: 2rem 0 0; }
.initiative-section { padding: 4rem 0 2rem; }
/* --- 8d. GEOCODER SEARCH --- */
.leaflet-control-geocoder {
border-radius: var(--radius-sm) !important;
border: 1px solid var(--border) !important;
background: var(--surface-solid) !important;
box-shadow: var(--shadow) !important;
overflow: hidden;
}
.leaflet-control-geocoder input {
font-family: 'Satoshi', sans-serif !important;
font-size: 0.82rem !important;
color: var(--text) !important;
background: var(--surface-solid) !important;
border: none !important;
padding: 0.5rem 0.75rem !important;
}
.leaflet-control-geocoder input::placeholder { color: var(--text-dim) !important; }
.leaflet-control-geocoder-alternatives {
background: var(--surface-solid) !important;
border: 1px solid var(--border) !important;
border-top: none !important;
font-family: 'Satoshi', sans-serif !important;
}
.leaflet-control-geocoder-alternatives li {
font-size: 0.78rem !important;
color: var(--text-sub) !important;
padding: 0.5rem 0.75rem !important;
border-bottom: 1px solid var(--border) !important;
}
.leaflet-control-geocoder-alternatives li:hover,
.leaflet-control-geocoder-alternatives .leaflet-control-geocoder-selected {
background: var(--surface) !important;
color: var(--text) !important;
}
/* --- 9. MARQUEE TICKER --- */
.marquee-strip {
overflow: hidden;
white-space: nowrap;
background: var(--glass);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 1rem 0;
position: relative;
}
.marquee-track {
display: inline-flex;
animation: marquee 35s linear infinite;
}
.marquee-track:hover {
animation-play-state: paused;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.marquee-item {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0 2rem;
flex-shrink: 0;
}
.marquee-number {
font-family: 'General Sans', sans-serif;
font-weight: 700;
font-size: 1.6rem;
letter-spacing: 0.04em;
color: var(--text);
}
.marquee-label {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
.marquee-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--red);
opacity: 0.5;
flex-shrink: 0;
}
/* --- 10. VOICES --- */
.voices-section { padding: 5rem 0; }
.voices-bento {
display: grid;
grid-template-columns: 1.2fr 1fr;
grid-template-rows: auto auto;
gap: 1rem;
}
.voice-card {
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.voice-card.featured {
grid-row: 1 / 3;
padding: 2.5rem;
}
.voice-quote-icon {
font-family: 'General Sans', sans-serif;
font-weight: 700;
font-size: 2.5rem;
background: var(--red-grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 0.75rem;
opacity: 0.7;
}
.voice-card.featured .voice-quote-icon {
font-size: 3.5rem;
}
.voice-card blockquote {
font-size: 0.88rem;
line-height: 1.7;
color: var(--text-sub);
font-style: italic;
margin-bottom: 1.5rem;
flex-grow: 1;
}
.voice-card.featured blockquote {
font-size: 1.05rem;
line-height: 1.75;
}
.voice-attr {
display: flex;
align-items: center;
gap: 0.6rem;
}
.voice-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--red-soft);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 0.75rem; color: var(--red);
flex-shrink: 0;
}
.voice-name { font-weight: 600; font-size: 0.8rem; }
.voice-detail { font-size: 0.7rem; color: var(--text-muted); }
/* --- 10b. INITIATIVE GRID --- */
.initiative-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 3rem;
align-items: center;
}
.initiative-text {
text-align: left;
}
.initiative-text h2 {
text-align: left;
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.25;
}
.initiative-visual {
display: flex;
align-items: center;
justify-content: center;
padding: 3rem;
background: radial-gradient(ellipse at center, #1a1a2e 0%, #0d0d14 70%, #000 100%);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow:
0 0 80px rgba(0, 0, 0, 0.4),
0 16px 48px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
/* Subtle corner accent glow */
.initiative-visual::before {
content: '';
position: absolute;
top: -40%;
right: -40%;
width: 80%;
height: 80%;
background: radial-gradient(circle, rgba(214, 40, 57, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.initiative-visual::after {
content: '';
position: absolute;
bottom: -30%;
left: -30%;
width: 60%;
height: 60%;
background: radial-gradient(circle, rgba(255, 153, 51, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.initiative-visual img {
max-width: 340px;
width: 100%;
height: auto;
position: relative;
z-index: 1;
filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
transition: transform 0.5s ease;
}
.initiative-visual img:hover {
transform: scale(1.04);
}
/* Theme-based logo toggle */
.initiative-visual .logo-light { display: none; }
.initiative-visual .logo-dark { display: block; }
[data-theme="light"] .initiative-visual .logo-dark { display: none; }
[data-theme="light"] .initiative-visual .logo-light { display: block; }
/* Light mode - no dark card, transparent logo floats */
[data-theme="light"] .initiative-visual {
background: none;
border: none;
box-shadow: none;
padding: 1rem;
}
[data-theme="light"] .initiative-visual::before,
[data-theme="light"] .initiative-visual::after {
display: none;
}
[data-theme="light"] .initiative-visual img {
filter: none;
box-shadow: none;
border-radius: 0;
}
@media (max-width: 768px) {
.initiative-grid {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.initiative-text {
text-align: center;
}
.initiative-text h2 {
text-align: center;
}
.initiative-visual img {
max-width: 240px;
}
}
/* --- 11. FOOTPRINT BANNER (premium CTA) --- */
.footprint-banner {
background: linear-gradient(135deg, rgba(var(--red-rgb),0.12) 0%, rgba(30,30,50,0.95) 40%, rgba(15,15,25,0.98) 100%);
border: 1px solid rgba(var(--red-rgb),0.2);
border-radius: var(--radius-lg);
padding: 2.5rem 2rem 2rem;
text-align: center;
position: relative;
overflow: hidden;
}
.footprint-banner::before {
content: '';
position: absolute;
top: -40%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(var(--red-rgb),0.08) 0%, transparent 70%);
pointer-events: none;
}
[data-theme="light"] .footprint-banner {
background: linear-gradient(135deg, #fff5f5 0%, #fff0eb 30%, #fef3e2 60%, #f0f4ff 100%);
border-color: rgba(var(--red-rgb),0.15);
box-shadow: 0 4px 24px rgba(var(--red-rgb),0.06);
}
[data-theme="light"] .footprint-banner::before {
background: radial-gradient(circle, rgba(var(--red-rgb),0.05) 0%, transparent 70%);
}
.section--tight { padding-top: 1rem; }
.fb-sub {
font-size: 0.85rem;
color: var(--text-sub);
font-weight: 500;
margin-top: 0.35rem;
letter-spacing: 0.01em;
}
.fb-header {
margin-bottom: 1.75rem;
}
.fb-header h2 {
font-size: clamp(1.4rem, 3vw, 1.8rem);
margin-top: 0;
text-align: center;
}
.fb-steps {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
margin-bottom: 1.75rem;
}
.fb-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
max-width: 260px;
padding: 0 1rem;
}
.fb-step-num {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--red-grad);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Satoshi', sans-serif;
font-weight: 700;
font-size: 1rem;
margin-bottom: 0.75rem;
box-shadow: 0 4px 16px var(--red-glow);
flex-shrink: 0;
}
.fb-step-body h3 {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.3rem;
}
.fb-step-body p {
font-size: 0.72rem;
color: var(--text-sub);
line-height: 1.5;
}
.fb-step-connector {
display: flex;
align-items: center;
justify-content: center;
padding-top: 0.55rem;
flex-shrink: 0;
}
.fb-step-connector svg {
width: 20px;
height: 20px;
color: var(--red);
opacity: 0.35;
}
.fb-footer {
border-top: 1px solid rgba(var(--red-rgb),0.15);
padding-top: 1.25rem;
}
.fb-note {
font-size: 0.7rem;
color: var(--text-sub);
margin-top: 0.6rem;
line-height: 1.65;
opacity: 0.75;
}
[data-theme="light"] .fb-note {
color: var(--text-dim);
opacity: 0.85;
}
@media (max-width: 600px) {
.footprint-banner {
padding: 1.5rem 1.25rem 1.25rem;
}
.fb-header { margin-bottom: 1.25rem; }
.fb-steps {
flex-direction: column;
align-items: center;
gap: 0.15rem;
}
.fb-step {
flex-direction: row;
text-align: left;
max-width: 100%;
padding: 0.5rem 0;
gap: 0.75rem;
}
.fb-step-num {
margin-bottom: 0;
width: 36px;
height: 36px;
font-size: 0.85rem;
}
.fb-step-connector { padding-top: 0; }
.fb-step-connector svg {
transform: rotate(90deg);
width: 16px;
height: 16px;
}
.fb-footer { padding-top: 1rem; }
}
/* --- 12. MAP --- */
.map-section { padding: 5rem 0 6rem; }
.map-header { text-align: center; margin-bottom: 2.5rem; }
.map-header h2 {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}
.map-counter {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 1.15rem;
color: var(--text-sub);
margin-top: 0.75rem;
font-weight: 500;
}
.map-counter span#pin-count { color: var(--red); font-weight: 800; font-size: 1.4rem; }
/* Live pulse dot */
.map-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--success, #22c55e);
display: inline-block;
animation: mapPulse 2s ease infinite;
}
@keyframes mapPulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
/* --- Map Metrics Strip --- */
.map-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 0 0 2.5rem;
}
.map-metric {
text-align: center;
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 1.25rem 0.75rem;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.map-metric:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.map-metric-value {
font-family: 'General Sans', sans-serif;
font-weight: 800;
font-size: 1.5rem;
color: var(--red);
letter-spacing: -0.02em;
line-height: 1.1;
}
.map-metric-label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-dim);
font-weight: 600;
}
@media (max-width: 768px) {
.map-metrics {
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.map-metric { padding: 1rem 0.5rem; }
.map-metric-value { font-size: 1.2rem; }
}
@media (max-width: 480px) {
.map-metrics {
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.map-metric { padding: 0.75rem 0.4rem; }
.map-metric-value { font-size: 1rem; }
.map-metric-label { font-size: 0.55rem; }
}
.map-wrapper {
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-lg);
position: relative;
}
#map {
height: 65vh;
min-height: 400px;
max-height: 600px;
width: 100%;
background: #E8E6E1;
}
/* Empty / error overlay shown over the map when there are no pins or data fails to load */
.map-overlay {
position: absolute;
inset: 0;
z-index: 600;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: rgba(8, 8, 14, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
pointer-events: none; /* let the map stay pannable; only the card is interactive */
}
[data-theme="light"] .map-overlay {
background: rgba(245, 243, 239, 0.6);
}
.map-overlay__card {
pointer-events: auto;
max-width: 340px;
text-align: center;
padding: 1.7rem 1.5rem;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-lg);
color: var(--text);
}
.map-overlay__card > svg {
color: var(--red);
opacity: 0.9;
margin-bottom: 0.5rem;
}
.map-overlay--error .map-overlay__card > svg {
color: var(--text-dim);
}
.map-overlay__title {
font-family: 'General Sans', sans-serif;
font-weight: 600;
font-size: 1.15rem;
letter-spacing: -0.01em;
margin-bottom: 0.35rem;
}
.map-overlay__msg {
color: var(--text-muted);
font-size: 0.85rem;
line-height: 1.5;
margin: 0 0 1.1rem;
}
.map-overlay--error .map-overlay__msg {
margin-bottom: 0;
}
.map-overlay__cta {
display: inline-flex;
}
/* Dark mode: gently darken Google Maps tiles */
[data-theme="dark"] #map {
background: #1a1a2e;
}
[data-theme="dark"] .leaflet-tile-pane {
filter: brightness(0.7) saturate(1.1) contrast(1.05);
}
/* Smooth tile loading - fade in */
.leaflet-tile {
opacity: 0;
transition: opacity 0.3s ease;
}
.leaflet-tile-loaded {
opacity: 1;
}
.map-cta { text-align: center; margin-top: 2rem; }
.map-hint { font-size: 0.75rem; color: var(--text-sub); margin-top: 1rem; text-align: center; line-height: 1.5; opacity: 0.8; }
/* --- Custom Pin Icon --- */
.hob-pin-icon {
background: none !important;
border: none !important;
}
/* --- Map Toast (nearby alumni) --- */
.map-toast {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--card-bg, #1a1a2e);
color: var(--text-primary, #fff);
font-family: 'Satoshi', sans-serif;
font-size: 0.8rem;
font-weight: 600;
padding: 0.6rem 1.2rem;
border-radius: var(--radius-sm);
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
display: flex;
align-items: center;
gap: 0.5rem;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
white-space: nowrap;
}
.map-toast.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.map-toast-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--red);
flex-shrink: 0;
animation: toastPulse 1.5s ease infinite;
}
@keyframes toastPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--red-rgb),0.4); }
50% { box-shadow: 0 0 0 6px rgba(var(--red-rgb),0); }
}
[data-theme="light"] .map-toast {
background: #fff;
color: #1a1a2e;
border-color: rgba(0,0,0,0.08);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.hob-pin {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
transition: transform 0.2s ease;
}
.hob-pin:hover {
transform: scale(1.15);
}
/* --- Styled Popup --- */
.leaflet-popup-content-wrapper {
border-radius: 10px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
padding: 0 !important;
overflow: hidden;
font-family: 'Satoshi', sans-serif !important;
border-top: 3px solid var(--red) !important;
}
.leaflet-popup-content {
margin: 0 !important;
min-width: 120px;
}
.leaflet-popup-tip {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
.hob-popup {
padding: 10px 16px;
text-align: center;
}
.hob-popup-year {
font-family: 'Satoshi', sans-serif;
font-weight: 700;
font-size: 0.85rem;
color: #1a1a2e;
letter-spacing: -0.01em;
}
[data-theme="dark"] .leaflet-popup-content-wrapper {
background: var(--card-bg) !important;
border: 1px solid var(--glass-border) !important;
border-top: 3px solid var(--red) !important;
}
[data-theme="dark"] .hob-popup-year {
color: var(--text-primary);
}
[data-theme="dark"] .leaflet-popup-tip {
background: var(--card-bg) !important;
}
/* --- Cluster Styling --- */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
background: rgba(var(--red-rgb), 0.2) !important;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
background: var(--red) !important;
color: #fff !important;
font-family: 'Satoshi', sans-serif !important;
font-weight: 700 !important;
font-size: 0.75rem !important;
}
/* --- Zoom controls: Material Design rounded style --- */
.leaflet-control-zoom {
border: none !important;
border-radius: 8px !important;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
margin-top: 12px !important;
margin-right: 12px !important;
}
.leaflet-control-zoom a {
width: 40px !important;
height: 40px !important;
line-height: 40px !important;
font-size: 18px !important;
color: #333 !important;
background: #fff !important;
border: none !important;
border-bottom: 1px solid #e0e0e0 !important;
transition: background 0.15s ease;
}
.leaflet-control-zoom a:last-child {
border-bottom: none !important;
}
.leaflet-control-zoom a:hover {
background: #f5f5f5 !important;
color: #111 !important;
}
[data-theme="dark"] .leaflet-control-zoom a {
background: #2a2a3a !important;
color: #ddd !important;
border-bottom-color: #3a3a4a !important;
}
[data-theme="dark"] .leaflet-control-zoom a:last-child {
border-bottom-color: transparent !important;
}
[data-theme="dark"] .leaflet-control-zoom a:hover {
background: #3a3a4a !important;
color: #fff !important;
}
/* --- My Location button --- */
/* --- Map Toolbar --- */
.map-toolbar {
display: flex;
gap: 6px;
padding: 0 !important;
margin-bottom: 6px !important;
}
.map-toolbar-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'Satoshi', sans-serif;
font-size: 0.7rem;
font-weight: 600;
padding: 7px 12px;
border: none;
border-radius: 8px;
background: #fff;
color: #444;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: all 0.2s ease;
white-space: nowrap;
}
.map-toolbar-btn svg {
flex-shrink: 0;
}
.map-toolbar-btn:hover {
background: #f0f0f0;
color: #111;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.map-toolbar-btn.locating svg {
animation: locateSpin 1s linear infinite;
}
@keyframes locateSpin {
to { transform: rotate(360deg); }
}
[data-theme="dark"] .map-toolbar-btn {
background: rgba(30,30,45,0.9);
color: rgba(255,255,255,0.7);
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
backdrop-filter: blur(8px);
}
[data-theme="dark"] .map-toolbar-btn:hover {
background: rgba(50,50,70,0.95);
color: #fff;
}
/* --- Fullscreen map ---
Each fullscreen selector MUST be its own rule. Grouping them (especially with
:-moz-full-screen / :-ms-fullscreen, which Chrome does not recognise) makes the browser
drop the WHOLE grouped rule as invalid - that was the real cause of the "map only fills
half the screen" bug. Standard :fullscreen covers Firefox + modern browsers,
:-webkit-full-screen covers older Safari/Chrome, and .faux-fs is the iOS Safari fallback. */
.map-wrapper:fullscreen { background: #000; width: 100vw; height: 100vh; height: 100dvh; }
.map-wrapper:-webkit-full-screen { background: #000; width: 100vw; height: 100vh; }
.map-wrapper.faux-fs {
background: #000; width: 100vw; height: 100vh; height: 100dvh;
position: fixed; inset: 0; z-index: 9999; border-radius: 0;
}
.map-wrapper:fullscreen #map {
height: 100vh !important; height: 100dvh !important;
max-height: none !important; width: 100vw !important; border-radius: 0 !important;
}
.map-wrapper:-webkit-full-screen #map {
height: 100vh !important;
max-height: none !important; width: 100vw !important; border-radius: 0 !important;
}
.map-wrapper.faux-fs #map {
height: 100vh !important; height: 100dvh !important;
max-height: none !important; width: 100vw !important; border-radius: 0 !important;
}
/* --- Attribution: subtle --- */
.leaflet-control-attribution {
background: rgba(255, 255, 255, 0.7) !important;
font-size: 0.55rem !important;
padding: 2px 6px !important;
color: #666 !important;
border-radius: 4px 0 0 0 !important;
}
.leaflet-control-attribution a { color: #555 !important; }
[data-theme="dark"] .leaflet-control-attribution {
background: rgba(20, 20, 30, 0.7) !important;
color: #888 !important;
}
[data-theme="dark"] .leaflet-control-attribution a { color: #999 !important; }
/* --- Google Maps-style Search Bar (hidden for v1 - enable in v2 with API key) --- */
.gmap-search {
display: none !important; /* Search bar removed per v2 reviewer request - KEPT ON PURPOSE: reserved for a future Google Maps API search integration */
position: relative;
align-items: center;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
height: 44px;
width: 340px;
overflow: visible;
margin-bottom: 6px !important;
}
.gmap-search-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
flex-shrink: 0;
color: #4285F4;
}
.gmap-search-icon svg {
width: 18px;
height: 18px;
}
.gmap-search-input {
flex: 1;
border: none;
background: transparent;
font-family: 'Satoshi', sans-serif;
font-size: 0.88rem;
color: #333;
padding: 0 8px 0 0;
height: 100%;
outline: none;
}
.gmap-search-input::placeholder {
color: #999;
}
.gmap-search-clear {
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 100%;
border: none;
background: transparent;
font-size: 1.3rem;
color: #888;
cursor: pointer;
flex-shrink: 0;
transition: color 0.15s ease;
}
.gmap-search-clear:hover {
color: #333;
}
/* Results dropdown */
.gmap-search-results {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
list-style: none;
margin: 0;
padding: 0;
max-height: 260px;
overflow-y: auto;
z-index: 10;
border-top: 1px solid #eee;
}
.gmap-search-results li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-family: 'Satoshi', sans-serif;
font-size: 0.82rem;
color: #333;
cursor: pointer;
border-bottom: 1px solid #f2f2f2;
transition: background 0.12s ease;
}
.gmap-search-results li:last-child {
border-bottom: none;
}
.gmap-search-results li:hover {
background: #f5f5f5;
}
.gmap-search-results li.gmap-search-noresult {
color: #999;
cursor: default;
font-style: italic;
}
/* Red pin icon for each result */
.gmap-result-pin {
width: 16px;
height: 16px;
flex-shrink: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E63946'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.gmap-result-text {
flex: 1;
line-height: 1.35;
}
/* --- Dark mode search bar --- */
[data-theme="dark"] .gmap-search {
background: #2a2a3a;
}
[data-theme="dark"] .gmap-search-icon {
color: #7aafff;
}
[data-theme="dark"] .gmap-search-input {
color: #e0e0e0;
}
[data-theme="dark"] .gmap-search-input::placeholder {
color: #777;
}
[data-theme="dark"] .gmap-search-clear {
color: #777;
}
[data-theme="dark"] .gmap-search-clear:hover {
color: #ddd;
}
[data-theme="dark"] .gmap-search-results {
background: #2a2a3a;
border-top-color: #3a3a4a;
}
[data-theme="dark"] .gmap-search-results li {
color: #ccc;
border-bottom-color: #3a3a4a;
}
[data-theme="dark"] .gmap-search-results li:hover {
background: #3a3a4a;
}
[data-theme="dark"] .gmap-search-results li.gmap-search-noresult {
color: #666;
}
/* Leaflet popup */
.leaflet-popup-content-wrapper {
background: var(--surface-solid) !important;
color: var(--text) !important;
border-radius: var(--radius-sm) !important;
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-lg) !important;
font-family: 'Satoshi', sans-serif !important;
}
.leaflet-popup-tip { background: var(--surface-solid) !important; }
.leaflet-popup-content { margin: 12px 16px !important; font-size: 0.82rem !important; line-height: 1.5 !important; }
.popup-year {
font-family: 'General Sans', sans-serif;
font-weight: 700;
font-size: 1.02rem;
color: var(--text);
letter-spacing: 0.02em;
}
/* Echo-pin note (e.g. "Your pin goes live once the BAJA team approves it") -
a sentence, so smaller and lighter than the year badge */
.popup-note {
font-family: 'General Sans', sans-serif;
font-weight: 600;
font-size: 0.85rem;
color: var(--text);
line-height: 1.45;
letter-spacing: 0;
max-width: 200px;
}
.popup-category {
display: inline-block;
font-size: 0.6rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--red); background: var(--red-soft);
padding: 0.2rem 0.55rem; border-radius: 4px;
margin-top: 0.3rem;
}
/* --- 13. FOOTER (3-Column Premium Grid) --- */
.site-footer {
background: var(--bg-alt);
border-top: 1px solid var(--border);
padding: 0;
margin-top: 2rem;
position: relative;
}
/* Gradient accent border at top of footer */
.site-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(var(--red-rgb), 0.3) 20%,
rgba(var(--red-rgb), 0.5) 50%,
rgba(var(--red-rgb), 0.3) 80%,
transparent 100%);
}
[data-theme="light"] .site-footer { background: var(--bg-alt); color: var(--text); }
/* -- Grid layout -- */
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1.2fr;
gap: 3rem;
padding: 3rem clamp(1rem, 3.5vw, 3rem) 0;
max-width: var(--max-w);
margin: 0 auto;
}
/* -- Left: Brand Column -- */
.footer-brand {
display: flex;
flex-direction: column;
}
.footer-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
color: var(--text);
transition: opacity 0.25s var(--ease);
margin-bottom: 0.75rem;
width: fit-content;
}
.footer-logo:hover { opacity: 0.8; color: var(--text); }
.footer-logo-img {
height: 72px;
width: auto;
filter: drop-shadow(0 0 6px rgba(var(--red-rgb), 0.15));
}
/* Footer logo: white badge on the dark theme, black badge on the light theme */
.footer-logo .logo-light { display: none; }
.footer-logo .logo-dark { display: inline-block; }
[data-theme="light"] .footer-logo .logo-dark { display: none; }
[data-theme="light"] .footer-logo .logo-light { display: inline-block; }
.footer-logo-text {
display: inline-block;
font-family: 'Clash Display', 'General Sans', sans-serif;
font-size: 0.98rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text);
line-height: 1.2;
}
.footer-logo-sub {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: none;
color: var(--text-muted);
}
.footer-tagline {
font-size: 0.76rem;
color: var(--text-muted);
max-width: 320px;
line-height: 1.7;
margin-bottom: 1.25rem;
}
/* -- Social Icons -- */
.footer-social {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.footer-social-link {
width: 34px;
height: 34px;
border-radius: 10px;
border: 1px solid var(--border);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
transition: all 0.3s var(--ease);
text-decoration: none;
}
.footer-social-link svg {
width: 15px;
height: 15px;
}
.footer-social-link:hover {
border-color: var(--red);
background: var(--red-soft);
color: var(--red);
transform: translateY(-2px);
}
/* -- Center/Right: Columns -- */
.footer-col {
display: flex;
flex-direction: column;
}
.footer-col h4 {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 0.85rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-col h4::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 20px; height: 1.5px;
background: var(--red);
border-radius: 2px;
opacity: 0.5;
}
.footer-col a {
display: inline-flex;
align-items: center;
font-size: 0.78rem;
color: var(--text-sub);
text-decoration: none;
margin-bottom: 0.5rem;
transition: all 0.25s var(--ease);
padding: 0.12rem 0;
width: fit-content;
}
.footer-col a:hover {
color: var(--text);
transform: translateX(3px);
}
.footer-col a svg {
width: 9px; height: 9px;
margin-left: 0.3rem;
opacity: 0.4;
transition: opacity 0.2s;
}
.footer-col a:hover svg { opacity: 0.7; }
/* -- BAJA Brand Block (right column) -- */
.footer-baja-brand {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.6rem;
}
.footer-baja-logo {
height: 52px;
width: auto;
}
.footer-baja-name {
font-family: 'Clash Display', 'General Sans', sans-serif;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text);
}
.footer-baja-desc {
font-size: 0.74rem;
color: var(--text-muted);
line-height: 1.65;
margin-bottom: 0.6rem;
max-width: 260px;
}
/* -- Contact section -- */
.footer-contact-heading {
margin-top: 1.25rem;
}
.footer-contact-email {
display: inline-flex !important;
align-items: center;
gap: 0.4rem;
font-size: 0.76rem;
color: var(--text-sub) !important;
text-decoration: none;
transition: all 0.25s var(--ease);
padding: 0.12rem 0;
}
.footer-contact-email svg {
width: 15px;
height: 15px;
flex-shrink: 0;
opacity: 0.5;
transition: opacity 0.2s;
}
.footer-contact-email:hover {
color: var(--red) !important;
transform: translateX(3px);
}
.footer-contact-email:hover svg {
opacity: 0.9;
}
/* -- Copyright Bar -- */
.footer-bar {
display: flex;
justify-content: center;
align-items: center;
padding: 1.5rem 2.5rem 1.5rem;
margin-top: 2.5rem;
border-top: 1px solid var(--border);
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.footer-cr {
font-size: 0.65rem;
color: var(--text-dim);
letter-spacing: 0.02em;
}
/* --- 13b. BACK TO TOP --- */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 900;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(20, 20, 30, 0.92);
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: all 0.3s var(--ease);
box-shadow:
0 2px 12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.08);
padding: 0;
}
[data-theme="light"] .back-to-top {
background: rgba(255, 255, 255, 0.95);
color: rgba(0, 0, 0, 0.45);
box-shadow:
0 2px 12px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(0, 0, 0, 0.06);
}
/* Progress ring - positioned absolutely to cover the button */
.btt-progress-ring {
position: absolute;
inset: 0;
width: 44px;
height: 44px;
transform: rotate(-90deg);
pointer-events: none;
}
.btt-progress-ring__bg {
stroke: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .btt-progress-ring__bg {
stroke: rgba(0, 0, 0, 0.06);
}
.btt-progress-ring__fill {
stroke: var(--red);
transition: stroke-dashoffset 0.15s ease-out;
}
/* Arrow icon centered inside */
.btt-arrow {
width: 16px;
height: 16px;
position: relative;
z-index: 1;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 16px var(--red-glow), 0 0 0 1px var(--red);
}
.back-to-top:hover .btt-progress-ring__fill {
stroke: var(--red-hover);
}
[data-theme="light"] .back-to-top:hover {
color: var(--red);
box-shadow: 0 4px 16px var(--red-glow), 0 0 0 1px var(--red);
}
.back-to-top:active {
transform: translateY(0);
}
/* --- 13c. MOBILE BOTTOM TAB BAR --- */
.mobile-tab-bar {
display: none; /* shown via media query */
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
justify-content: space-around;
align-items: center;
height: 64px;
background: rgba(12, 12, 20, 0.55);
backdrop-filter: blur(24px) saturate(1.6);
-webkit-backdrop-filter: blur(24px) saturate(1.6);
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 0 0.25rem;
padding-bottom: env(safe-area-inset-bottom, 0);
}
[data-theme="light"] .mobile-tab-bar {
background: rgba(255, 255, 255, 0.82);
border-top-color: rgba(0, 0, 0, 0.06);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
}
.tab-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
padding: 0.4rem 0.5rem;
border-radius: var(--radius-sm);
color: var(--text-dim);
text-decoration: none;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.02em;
transition: all 0.25s var(--ease);
-webkit-tap-highlight-color: transparent;
border: none;
background: none;
cursor: pointer;
min-width: 52px;
}
.tab-item svg {
width: 20px;
height: 20px;
stroke-width: 1.8;
transition: all 0.25s var(--ease);
}
.tab-item:hover,
.tab-item:active {
color: var(--text-sub);
}
.tab-item.active {
color: var(--red);
}
.tab-item.active svg {
stroke-width: 2.2;
}
[data-theme="light"] .tab-item {
color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .tab-item:hover,
[data-theme="light"] .tab-item:active {
color: rgba(0, 0, 0, 0.7);
}
[data-theme="light"] .tab-item.active {
color: var(--red);
}
/* Theme toggle overrides when used as tab item */
.mobile-tab-bar .tab-item.theme-toggle {
width: auto;
height: auto;
border-radius: var(--radius-sm);
background: none;
border: none;
opacity: 1;
flex-direction: column;
gap: 0.2rem;
}
.mobile-tab-bar .tab-item.theme-toggle:hover {
transform: none;
opacity: 1;
color: var(--text-sub);
}
.mobile-tab-bar .tab-item.theme-toggle svg {
width: 20px;
height: 20px;
}
/* Icon slot so the swapping moon/sun icons sit ABOVE the "Theme" label
instead of absolute-centering over the whole button (which overlapped it). */
.mobile-tab-bar .tab-item.theme-toggle .tab-ico {
position: relative;
display: block;
width: 20px;
height: 20px;
}
/* --- 14. STORY HERO --- */
.story-hero {
min-height: 50vh;
display: flex; align-items: center; justify-content: center;
text-align: center;
padding: calc(var(--header-h) + 3rem) 2rem 3rem;
}
.story-opening { max-width: 680px; }
.story-opening p {
font-size: clamp(0.9rem, 1.4vw, 1.02rem);
color: var(--text-sub);
line-height: 1.8;
margin-bottom: 0.8rem;
}
/* --- 15. TIMELINE --- */
.timeline-section { padding: 4rem 0 6rem; overflow: hidden; }
.timeline-track { position: relative; padding: 1rem 0; }
.timeline-line {
position: absolute;
left: 20px; top: 0; bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--red-soft), var(--border) 10%, var(--border) 90%, var(--red-soft));
}
.timeline-item {
position: relative;
padding-left: 60px;
padding-bottom: 1.5rem;
opacity: 0;
transform: translateX(-16px);
transition: all 0.5s ease;
}
.timeline-item.visible { opacity: 1; transform: translateX(0); }
.timeline-dot {
position: absolute;
left: 12px; top: 8px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--bg);
border: 2px solid var(--red);
z-index: 2;
}
.timeline-item.milestone .timeline-dot {
width: 22px; height: 22px;
left: 10px; top: 6px;
background: var(--red);
box-shadow: 0 0 16px var(--red-glow);
}
/* (Legacy timeline, categories, and legacy CTA CSS removed - unused) */
/* (Section 18: Form styles moved to Section 23 at end of file) */
/* --- 19. ANIMATIONS --- */
.fade-in {
opacity: 0; transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in-d1 { transition-delay: 0.1s; }
.fade-in-d2 { transition-delay: 0.2s; }
.fade-in-d3 { transition-delay: 0.3s; }
/* --- 20. RESPONSIVE --- */
@media (max-width: 768px) {
.nav-center { display: none; }
/* Show CTA in mobile header - compact, right-aligned */
.btn-cta.hide-mobile {
display: inline-flex !important;
font-size: 0.58rem;
padding: 0.38rem 0.85rem;
animation: none;
box-shadow: 0 2px 8px var(--red-glow);
border-radius: 8px;
flex-shrink: 0;
}
/* ── Mobile header: branding + CTA, edge-to-edge ── */
.site-header {
top: 0;
left: 0;
right: 0;
max-width: none;
width: auto;
transform: none;
padding: 0.6rem 1.15rem;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .site-header {
border-bottom-color: rgba(0, 0, 0, 0.06);
}
.header-inner {
gap: 0.75rem;
justify-content: space-between;
align-items: center;
}
/* Logo text - General Sans for premium feel */
.site-logo-text {
display: block;
font-family: 'General Sans', 'Satoshi', sans-serif;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1;
-webkit-text-fill-color: unset;
background: none;
color: var(--text);
}
.site-logo {
gap: 0.5rem;
align-items: center;
}
.site-logo img { height: 30px; width: auto; }
/* Hide header nav actions on mobile - bottom bar handles everything */
.site-header .theme-toggle { display: none; }
/* No docking on mobile - CSS safety net */
.site-header.header-docked {
left: 0;
right: 0;
transform: none;
padding: 0.55rem 1rem;
border-radius: 0;
border: none;
}
.site-header.header-docked .site-logo-text {
max-width: 160px;
opacity: 1;
}
.site-header.header-docked .site-logo { gap: 0.5rem; }
.site-header.header-docked .site-logo img { height: 36px; }
.site-header.header-docked .nav-center { display: none; }
.site-header.header-docked .btn-cta {
display: inline-flex !important;
font-size: 0.6rem;
padding: 0.35rem 0.8rem;
max-width: 200px;
opacity: 1;
}
/* ── Bottom Tab Bar ── */
.mobile-tab-bar {
display: flex;
}
/* Add bottom padding to body so footer isn't hidden behind tab bar */
body {
padding-bottom: 72px;
}
/* General mobile */
.section { padding: 3rem 0; }
.hero { padding-top: calc(var(--header-h) + 1rem); min-height: 85vh; }
.hero h1 { font-size: clamp(2.5rem, 12vw, 3.8rem); }
.hero::after { font-size: 14rem; right: -10%; }
.container { padding: 0 1.25rem; }
.voices-bento { grid-template-columns: 1fr; }
.voice-card.featured { grid-row: auto; }
.categories-grid { grid-template-columns: 1fr; }
.categories-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 1.75rem; padding: 2.5rem 1.25rem 0; }
.footer-bar { padding: 1.25rem 1.25rem; }
.timeline-line { left: 12px; }
.timeline-item { padding-left: 44px; }
.timeline-dot { left: 4px; }
.timeline-item.milestone .timeline-dot { left: 2px; }
#map { height: 50vh; min-height: 280px; }
.story-hero { min-height: 40vh; }
.marquee-number { font-size: 1.2rem; }
/* Video hero mobile */
.video-hero-content { padding: 1.5rem 1.25rem; }
.video-hero h1 { font-size: clamp(1.9rem, 8vw, 2.8rem); }
.video-hero .hero-hook { font-size: clamp(1.2rem, 5vw, 1.7rem); }
.video-hero .hero-beats { font-size: clamp(0.95rem, 3.5vw, 1.15rem); }
.hero-scroll-hint { bottom: 1rem; }
/* Hide forced
in hero sub on mobile */
.video-hero .hero-sub br { display: none; }
/* Map section mobile spacing */
.map-section { padding: 3rem 0 4rem; }
.map-counter { font-size: 1rem; }
.map-counter span#pin-count { font-size: 1.2rem; }
/* Initiative / origin section mobile spacing */
.initiative-section { padding: 2.5rem 0 1.5rem; }
.origin-section { padding: 2.5rem 0; }
/* Media row mobile */
.media-row { grid-template-columns: 1fr; }
.media-card img { height: 200px; }
.video-embed { min-height: 200px; }
/* About page content */
.about-content-block .section-body { max-width: 100%; }
/* Move back-to-top above tab bar */
.back-to-top {
bottom: 5.5rem;
}
}
@media (max-width: 480px) {
.section { padding: 2.5rem 0; }
.container { padding: 0 1rem; }
.hero-actions { flex-wrap: wrap; gap: 0.5rem; }
.video-hero .hero-actions { flex-wrap: wrap; gap: 0.5rem; }
.video-hero .hero-actions .btn-ghost {
font-size: 0.65rem;
padding: 0.5rem 1rem;
}
}
/* --- 21. LEAFLET CLUSTERS --- */
.marker-cluster-small { background-color: rgba(var(--red-rgb), 0.2) !important; }
.marker-cluster-small div { background-color: var(--red) !important; color: #fff !important; font-family: 'Satoshi', sans-serif !important; font-weight: 700 !important; font-size: 0.7rem !important; }
.marker-cluster-medium { background-color: rgba(var(--red-rgb), 0.3) !important; }
.marker-cluster-medium div { background-color: var(--red) !important; color: #fff !important; font-family: 'Satoshi', sans-serif !important; font-weight: 700 !important; }
.marker-cluster-large { background-color: rgba(var(--red-rgb), 0.4) !important; }
.marker-cluster-large div { background-color: var(--red) !important; color: #fff !important; font-family: 'Satoshi', sans-serif !important; font-weight: 700 !important; }
.hide-mobile {}
@media (max-width: 768px) { .hide-mobile { display: none !important; } }
/* ============================================================
22. JOURNEY PAGE V2 - Cinematic Editorial Experience
============================================================ */
/* --- 22a. CINEMATIC HERO --- */
/* ==================================================================
JOURNEY PAGE - "The Chronicle" Design System
Cinematic editorial timeline for 20 years of BAJA SAEINDIA
================================================================== */
/* ===== HERO ===== */
.stry-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.stry-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: #06060b;
}
.stry-hero__bg--gradient {
inset: 0;
animation: none;
background:
radial-gradient(ellipse 80% 60% at 50% 40%, rgba(var(--red-rgb), 0.12) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 80% 20%, rgba(120, 50, 80, 0.08) 0%, transparent 50%),
linear-gradient(165deg, #0a0a12 0%, #0d0d18 30%, #080810 60%, #06060b 100%);
}
/* Journey hero video */
.stry-hero__bg video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
filter: brightness(0.9) saturate(0.85);
transition: opacity 1.2s ease, filter 0.6s ease;
animation: stryKenBurns 25s ease-in-out infinite alternate;
}
.stry-hero__bg video.hero-video-loading {
opacity: 0;
}
.stry-hero__bg video.hero-video-loaded {
opacity: 1;
}
/* Light mode: brighter, more vivid video */
[data-theme="light"] .stry-hero__bg video {
filter: brightness(1.1) saturate(1.1);
}
@keyframes stryKenBurns {
0% { transform: translate(-50%, -50%) scale(1.3); }
100% { transform: translate(-50%, -50%) scale(1.38); }
}
.stry-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 15%;
filter: blur(1.5px) saturate(1.1);
}
/* Dark mode overlay */
.stry-hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(to bottom,
rgba(5, 5, 8, 0.6) 0%,
rgba(5, 5, 8, 0.45) 25%,
rgba(5, 5, 8, 0.55) 60%,
rgba(5, 5, 8, 0.95) 100%
),
radial-gradient(ellipse 60% 50% at 30% 40%, rgba(var(--red-rgb), 0.08) 0%, transparent 70%);
}
/* Light mode overlay - slightly more transparent to show more video */
[data-theme="light"] .stry-hero__overlay {
background:
linear-gradient(to bottom,
rgba(5, 5, 8, 0.4) 0%,
rgba(5, 5, 8, 0.3) 25%,
rgba(5, 5, 8, 0.45) 60%,
rgba(5, 5, 8, 0.9) 100%
),
radial-gradient(ellipse 60% 50% at 30% 40%, rgba(var(--red-rgb), 0.05) 0%, transparent 70%);
}
.stry-hero__content {
position: relative;
z-index: 2;
max-width: 780px;
padding: calc(var(--header-h) + 4rem) 2rem 8rem;
}
.stry-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 1.5rem;
}
.stry-hero__eyebrow::before,
.stry-hero__eyebrow::after {
content: '';
width: 28px;
height: 1.5px;
background: var(--red);
opacity: 0.5;
}
.stry-hero h1 {
font-size: clamp(2.8rem, 8vw, 5.5rem);
line-height: 0.92;
margin-bottom: 1.5rem;
letter-spacing: 0.03em;
color: #fff;
font-weight: 800;
text-shadow:
0 1px 3px rgba(0,0,0,0.6),
0 4px 16px rgba(0,0,0,0.4),
0 8px 40px rgba(0,0,0,0.25);
}
[data-theme="light"] .stry-hero h1 {
text-shadow:
0 1px 4px rgba(0,0,0,0.7),
0 4px 20px rgba(0,0,0,0.5),
0 8px 40px rgba(0,0,0,0.3);
}
/* Hero "BAJA": the brand red gradient (#D62839 -> #E63946) is DARK, and the hero photo is
only ~30-45% darkened by the overlay - so dark-red-on-dark read as an unreadable blob
next to the pure-white "HUMANS OF". Use a brighter red + a stronger shadow so it
separates from both the dark silhouette and the bright sky. */
.stry-hero h1 .text-red {
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
color: #FF5C68;
-webkit-text-fill-color: #FF5C68;
text-shadow:
0 2px 6px rgba(0, 0, 0, 0.8),
0 6px 22px rgba(0, 0, 0, 0.55);
}
.stry-accent {
color: #fff;
-webkit-text-fill-color: #fff;
white-space: nowrap;
}
.stry-hero__sub {
font-size: clamp(0.9rem, 1.5vw, 1.05rem);
color: rgba(255, 255, 255, 0.68);
max-width: 540px;
margin: 0 auto 2.5rem;
line-height: 1.75;
font-weight: 400;
}
[data-theme="light"] .stry-hero__sub { color: rgba(255,255,255,0.7); }
.stry-hero__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 0.5rem 1.2rem;
border-radius: var(--radius-sm);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.stry-hero__badge svg { width: 1.15em; height: 1.15em; opacity: 0.6; }
[data-theme="light"] .stry-hero__badge {
color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
}
/* Scroll indicator */
.stry-hero__scroll {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
}
/* ===== STICKY YEAR NAV ===== */
.stry-nav {
position: fixed;
left: 3rem;
top: 50%;
transform: translateY(-50%) translateX(-20px);
z-index: 90;
padding: 1rem 0;
display: flex;
flex-direction: column;
align-items: center;
max-height: calc(100vh - var(--header-h) - 2rem);
overflow-y: auto;
scrollbar-width: none;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Visible state - added by JS after scrolling past hero */
.stry-nav.nav-visible {
opacity: 1;
transform: translateY(-50%) translateX(0);
pointer-events: auto;
}
.stry-nav__track {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
padding: 0.6rem 0.35rem;
background: var(--glass);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: 12px;
}
.stry-nav .yr-dot {
padding: 0.25rem 0.45rem;
font-size: 0.55rem;
font-weight: 600;
font-family: 'Satoshi', sans-serif;
color: var(--text-dim);
text-decoration: none;
border-radius: 6px;
transition: all 0.25s ease;
white-space: nowrap;
line-height: 1.2;
width: 100%;
text-align: center;
}
.stry-nav .yr-dot:hover { color: var(--text); background: var(--glass); }
.stry-nav .yr-dot.active { color: #fff; background: var(--red); }
.stry-nav .yr-dot--ms { font-weight: 800; font-size: 0.58rem; }
/* --
TIMELINE - Vertical Spine System
-- */
/* Hero entrance animations */
.hero-anim {
opacity: 0;
transform: translateY(24px);
animation: heroReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-anim-1 { animation-delay: 0.15s; }
.hero-anim-2 { animation-delay: 0.45s; }
.hero-anim-3 { animation-delay: 0.75s; }
.hero-anim-4 { animation-delay: 1.05s; }
.hero-anim-5 { animation-delay: 1.35s; }
@keyframes heroReveal {
to { opacity: 1; transform: translateY(0); }
}
/* -- CONTAINER -- */
.tl {
position: relative;
max-width: 1100px;
margin: 0 auto;
padding: 2rem clamp(1.5rem, 4vw, 3rem) 4rem;
}
/* -- THE SPINE -- */
.tl__line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 3px;
background: var(--glass-border);
opacity: 0.5;
transform: translateX(-50%);
z-index: 0;
}
/* Scroll progress fill */
.tl__progress {
position: absolute;
left: 50%;
top: 0;
width: 3px;
height: 0;
background: linear-gradient(to bottom, var(--red), rgba(var(--red-rgb), 0.15));
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
}
/* -- ERA MARKERS -- */
.tl__era {
position: relative;
text-align: center;
padding: 3.5rem 0 2.5rem;
z-index: 3;
}
/* Give the era text area an opaque backing to block the spine */
.tl__era::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 100%;
background: var(--bg);
z-index: -1;
mask-image: radial-gradient(ellipse 100% 100% at center, black 40%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 100% 100% at center, black 40%, transparent 100%);
}
.tl__era-diamond {
width: 22px;
height: 22px;
border-radius: 3px;
transform: rotate(45deg);
background: var(--red);
margin: 0 auto 1.2rem;
box-shadow: 0 0 0 5px rgba(var(--red-rgb), 0.12), 0 0 20px rgba(var(--red-rgb), 0.15);
position: relative;
z-index: 4;
}
.tl__era-range {
display: inline-block;
font-size: 0.58rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: var(--red);
background: var(--bg);
border: 1px solid rgba(var(--red-rgb), 0.2);
padding: 0.3rem 1rem;
border-radius: var(--radius-sm);
margin-bottom: 0.5rem;
position: relative;
z-index: 5;
}
.tl__era h2 {
font-size: clamp(1.4rem, 4vw, 2rem);
font-weight: 800;
color: var(--text);
margin: 0.3rem 0 0.15rem;
letter-spacing: -0.02em;
}
.tl__era p {
font-size: 0.8rem;
color: var(--text-sub);
margin: 0;
}
/* -- NODE (each year) -- */
.tl__node {
position: relative;
padding-bottom: 1.5rem;
z-index: 2;
}
/* -- DOT on spine -- */
.tl__dot {
position: absolute;
left: 50%;
top: 1.35rem;
transform: translateX(-50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--bg);
border: 3px solid var(--red);
z-index: 5;
transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.tl__node:hover .tl__dot {
transform: translateX(-50%) scale(1.4);
background: var(--red);
box-shadow: 0 0 12px rgba(var(--red-rgb), 0.4);
}
/* Major dot (milestones) */
.tl__dot--major {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--red);
border: 3px solid rgba(var(--red-rgb), 0.3);
box-shadow: 0 0 0 6px rgba(var(--red-rgb), 0.08), 0 4px 20px rgba(var(--red-rgb), 0.3);
top: 0;
}
.tl__dot--major span {
font-family: 'Satoshi', sans-serif;
font-weight: 900;
font-size: 0.75rem;
color: #fff;
letter-spacing: -0.02em;
}
.tl__node:hover .tl__dot--major {
transform: translateX(-50%) scale(1.12);
box-shadow: 0 0 0 8px rgba(var(--red-rgb), 0.12), 0 6px 30px rgba(var(--red-rgb), 0.4);
}
/* Decade dot (2017 special) */
.tl__dot--decade {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #D4A843;
border: 3px solid rgba(212, 168, 67, 0.3);
box-shadow: 0 0 0 6px rgba(212, 168, 67, 0.08), 0 4px 20px rgba(212, 168, 67, 0.3);
top: 0;
}
.tl__dot--decade span {
font-family: 'Satoshi', sans-serif;
font-weight: 900;
font-size: 0.75rem;
color: #fff;
letter-spacing: -0.02em;
}
.tl__node:hover .tl__dot--decade {
transform: translateX(-50%) scale(1.12);
box-shadow: 0 0 0 8px rgba(212, 168, 67, 0.12), 0 6px 30px rgba(212, 168, 67, 0.4);
}
/* Decade card (2017 - regular card with gold accent) */
.tl__card--decade {
border-top: 3px solid #D4A843;
}
.tl__card--decade .tl__card-ed {
color: #D4A843;
}
[data-theme="dark"] .tl__card--decade {
box-shadow: 0 0 30px rgba(212, 168, 67, 0.05);
}
/* Finale dot */
.tl__dot--finale {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--red), #c0392b);
border: 3px solid rgba(var(--red-rgb), 0.4);
box-shadow: 0 0 0 8px rgba(var(--red-rgb), 0.1), 0 0 40px rgba(var(--red-rgb), 0.35);
top: 0;
}
.tl__dot--finale span {
font-family: 'Satoshi', sans-serif;
font-weight: 900;
font-size: 0.85rem;
color: #fff;
}
/* -- CONNECTOR lines (dot -- card) -- */
/* (connectors removed) */
/* -- CARD POSITIONING -- */
/* LEFT cards: sit on left side of spine */
.tl__node--left .tl__card {
width: calc(50% - 3rem);
margin-right: auto;
}
/* RIGHT cards: sit on right side of spine */
.tl__node--right .tl__card {
width: calc(50% - 3rem);
margin-left: auto;
}
/* Pull alternating cards up so they sit alongside each other */
.tl__node--left + .tl__node--right,
.tl__node--right + .tl__node--left {
margin-top: -6rem;
}
/* MILESTONE cards: full-width, spine hidden behind */
.tl__node--milestone {
padding-top: 2.5rem;
z-index: 3;
}
/* Cover the spine line behind milestone cards */
.tl__node--milestone .tl__card {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 3;
background: var(--bg);
}
/* -- CARD BASE -- */
.tl__card {
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: var(--radius, 16px);
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.4s ease,
border-color 0.4s ease;
position: relative;
z-index: 2;
}
.tl__node--left .tl__card:hover,
.tl__node--right .tl__card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 44px rgba(0, 0, 0, 0.15);
border-color: rgba(var(--red-rgb), 0.2);
}
.tl__node--milestone .tl__card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
border-color: rgba(var(--red-rgb), 0.25);
}
/* -- MAJOR CARD (milestone) layout -- */
.tl__card--major {
border-radius: var(--radius-lg, 20px);
border-top: 3px solid var(--red);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .tl__card--major {
box-shadow: 0 8px 40px rgba(var(--red-rgb), 0.06), 0 2px 20px rgba(0,0,0,0.3);
}
.tl__card-head {
position: relative;
padding: 1rem 1.25rem 0;
overflow: hidden;
}
.tl__card-watermark {
position: absolute;
top: -0.15rem;
right: 0.75rem;
font-family: 'General Sans', sans-serif;
font-weight: 700;
font-weight: 900;
font-size: clamp(3rem, 8vw, 5rem);
color: var(--red);
opacity: 0.12;
line-height: 1;
letter-spacing: -0.06em;
pointer-events: none;
z-index: 0;
}
.tl__card-ed {
display: inline-block;
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--red);
position: relative;
z-index: 1;
}
.tl__card-head h3 {
font-size: clamp(0.9rem, 2vw, 1.15rem);
font-weight: 800;
color: var(--text);
margin: 0.15rem 0 0;
line-height: 1.25;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
.tl__card-text {
padding: 1rem 1.5rem 1.25rem;
}
.tl__card-text p {
font-size: 0.76rem;
line-height: 1.65;
color: var(--text-sub);
margin: 0;
}
.tl__card-gallery {
border-top: 1px solid var(--glass-border);
}
/* ── GALLERY (shared image slider) -- */
.stry-gallery {
position: relative;
overflow: hidden;
background: #080810;
aspect-ratio: 16 / 9;
}
.stry-gallery__slides {
position: relative;
width: 100%;
height: 100%;
}
.stry-gallery__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.stry-gallery__slide.active {
opacity: 1;
position: relative;
}
.stry-gallery__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 8s ease;
}
.stry-gallery__slide.active img {
transform: scale(1.03);
}
/* Gallery dots */
.stry-gallery__dots {
position: absolute;
bottom: 0.75rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.4rem;
z-index: 5;
}
.stry-gallery__dots span {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
cursor: pointer;
}
.stry-gallery__dots span.active {
background: #fff;
width: 20px;
border-radius: 4px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
/* Gallery prev/next buttons */
.stry-gallery__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s ease;
}
.stry-gallery__btn svg { width: 16px; height: 16px; }
.stry-gallery:hover .stry-gallery__btn { opacity: 1; }
.stry-gallery__btn:hover { background: rgba(0, 0, 0, 0.65); transform: translateY(-50%) scale(1.08); }
.stry-gallery__btn--prev { left: 0.6rem; }
.stry-gallery__btn--next { right: 0.6rem; }
/* Gallery inside milestone cards - fixed height for uniform card size */
.tl__card--major .stry-gallery {
aspect-ratio: auto;
height: 340px;
}
.tl__card--major .stry-gallery__slide {
position: absolute;
inset: 0;
}
.tl__card--major .stry-gallery__slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* -- REGULAR CARD layout -- */
.tl__card-media {
position: relative;
overflow: hidden;
background: #080810;
}
.tl__card-media .stry-gallery {
aspect-ratio: 16 / 9;
}
.tl__card-media .stry-gallery__slide {
position: absolute;
inset: 0;
}
.tl__card-media .stry-gallery__slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.tl__card-body {
padding: 1.25rem 1.5rem 1.5rem;
position: relative;
overflow: hidden;
}
.tl__card-body .tl__card-ed {
margin-bottom: 0.15rem;
}
.tl__card-body h3 {
font-size: 0.9rem;
font-weight: 700;
margin: 0.25rem 0 0.2rem;
color: var(--text);
line-height: 1.3;
letter-spacing: -0.01em;
}
.tl__card-body p {
font-size: 0.76rem;
line-height: 1.6;
color: var(--text-sub);
margin: 0;
}
/* Subtle year label on regular cards */
.tl__card-year {
position: absolute;
top: 0.5rem;
right: 0.75rem;
font-family: 'General Sans', sans-serif;
font-weight: 700;
font-weight: 900;
font-size: 2.5rem;
color: var(--text);
opacity: 0.15;
line-height: 1;
letter-spacing: -0.04em;
pointer-events: none;
z-index: 0;
}
[data-theme="light"] .tl__card-year {
opacity: 0.08;
}
[data-theme="light"] .tl__card-watermark {
opacity: 0.08;
}
/* -- FINALE CARD -- */
.tl__card--finale {
text-align: center;
padding: clamp(2.5rem, 5vw, 4rem) 2rem;
border: 1px solid rgba(var(--red-rgb), 0.25);
border-radius: var(--radius-lg, 20px);
background: linear-gradient(
135deg,
rgba(var(--red-rgb), 0.04) 0%,
var(--glass) 50%,
rgba(var(--red-rgb), 0.02) 100%
);
overflow: hidden;
}
.tl__finale-glow {
position: absolute;
top: -30%;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 350px;
background: radial-gradient(ellipse at center, rgba(var(--red-rgb), 0.15) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.tl__finale-yr {
position: relative;
z-index: 1;
display: block;
font-family: 'General Sans', sans-serif;
font-weight: 700;
font-weight: 900;
font-size: clamp(3rem, 8vw, 5rem);
color: var(--text);
letter-spacing: -0.04em;
line-height: 1;
}
.tl__finale-ed {
display: block;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red);
margin-top: 0.4rem;
position: relative;
z-index: 1;
}
.tl__card--finale h3 {
position: relative;
z-index: 1;
font-size: clamp(1.2rem, 3vw, 1.5rem);
font-weight: 800;
margin: 0.6rem 0 0.4rem;
color: var(--text);
}
.tl__card--finale p {
position: relative;
z-index: 1;
font-size: 0.86rem;
line-height: 1.65;
color: var(--text-sub);
max-width: 520px;
margin: 0 auto;
}
.tl__finale-emphasis {
font-weight: 700;
color: var(--text) !important;
font-style: italic;
margin-top: 0.75rem !important;
}
.tl__card--finale .btn-primary { position: relative; z-index: 1; }
.tl__finale-tags {
justify-content: center;
margin-top: 1rem;
}
.tl__finale-btn {
position: relative;
z-index: 1;
margin-top: 1.25rem;
}
/* -- DIRECTIONAL ENTRANCE ANIMATIONS -- */
.tl__node--left.fade-in {
opacity: 0;
transform: translateX(-40px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.tl__node--right.fade-in {
opacity: 0;
transform: translateX(40px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.tl__node--milestone.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.tl__node.fade-in.visible,
.tl__node--left.fade-in.visible,
.tl__node--right.fade-in.visible,
.tl__node--milestone.fade-in.visible {
opacity: 1;
transform: translateX(0) translateY(0);
}
/* -- TIMELINE RESPONSIVE -- */
@media (max-width: 1024px) {
.tl__card-split {
grid-template-columns: 1fr;
}
.tl__card-stats {
border-left: none;
border-top: 1px solid var(--glass-border);
flex-direction: row;
flex-wrap: wrap;
gap: 0 1.5rem;
padding: 0.8rem 1.5rem;
}
.stry-stat {
border-bottom: none;
padding: 0.35rem 0;
}
}
@media (max-width: 768px) {
/* Hero responsive */
.stry-hero { min-height: 90vh; }
.stry-hero__content { padding: calc(var(--header-h) + 2rem) 1.5rem 6rem; }
.stry-hero h1 { font-size: clamp(1.8rem, 7vw, 2.8rem); }
.stry-nav { display: none; }
/* HIDE SPINE + PROGRESS on mobile */
.tl__line,
.tl__progress {
display: none;
}
/* Hide spine-cover pseudos (no spine to cover) */
.tl__node--milestone::before,
.tl__era::before {
display: none;
}
/* DOTS: centered above cards, in-flow */
.tl__dot {
position: relative;
left: auto;
top: auto;
transform: none;
margin: 0 auto 0.75rem;
}
.tl__node:hover .tl__dot {
transform: scale(1.3);
}
.tl__node:hover .tl__dot--major,
.tl__node:hover .tl__dot--finale {
transform: scale(1.1);
}
.tl__dot--major,
.tl__dot--finale {
width: 38px;
height: 38px;
}
.tl__dot--finale {
width: 42px;
height: 42px;
}
/* ALL CARDS: full-width centered */
.tl__node--left .tl__card,
.tl__node--right .tl__card {
width: 100%;
margin: 0 auto;
}
/* Disable overlap on mobile */
.tl__node--left + .tl__node--right,
.tl__node--right + .tl__node--left {
margin-top: 0;
}
.tl__node--milestone {
padding-top: 1.5rem;
}
.tl__node--milestone .tl__card {
width: 100%;
margin: 0 auto;
}
/* Era markers: centered */
.tl__era {
text-align: center;
padding-left: 0;
padding: 2.5rem 1rem 2rem;
}
.tl__era-diamond {
position: relative;
left: auto;
top: auto;
transform: rotate(45deg);
margin: 0 auto 0.75rem;
width: 14px;
height: 14px;
}
/* Hide milestone stats on mobile */
.tl__card-stats { display: none; }
/* Gallery responsive */
.stry-gallery { aspect-ratio: 16 / 10; }
.tl__card--major .stry-gallery { aspect-ratio: 16 / 10; }
.tl__card-media .stry-gallery { aspect-ratio: 16 / 9; }
.stry-gallery__btn { width: 32px; height: 32px; opacity: 0.8; }
/* Animations: all come from below on mobile */
.tl__node--left.fade-in,
.tl__node--right.fade-in {
transform: translateY(30px);
}
/* Card hover: vertical lift */
.tl__node--left .tl__card:hover,
.tl__node--right .tl__card:hover {
transform: translateY(-3px);
}
}
@media (max-width: 480px) {
.stry-hero__content { padding: calc(var(--header-h) + 1.5rem) 1.25rem 5rem; }
.stry-hero h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
.stry-hero__badge { font-size: 0.55rem; padding: 0.4rem 0.75rem; }
.stry-nav .yr-dot { font-size: 0.6rem; padding: 0.3rem 0.5rem; }
.tl { padding: 1.5rem 0.75rem 3rem; }
.tl__card-head { padding: 1.25rem 1.25rem 0; }
.tl__card-text { padding: 0.75rem 1.25rem; }
.tl__card-body { padding: 0.8rem 1rem 1rem; }
.tl__card-watermark { font-size: 3.5rem; }
.tl__dot--major { width: 32px; height: 32px; }
.tl__dot--major span { font-size: 0.6rem; }
.tl__dot--finale { width: 36px; height: 36px; }
}
/* (Founding story, pull-quote, old year-nav, chapters, photo grids,
interludes, category evolution, outcomes, chronicle CTA CSS removed - all unused) */
/* ============================================================
23. ABOUT PAGE
============================================================ */
.hero-eyebrow {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 1.5rem;
}
[data-theme="light"] .hero-eyebrow { color: rgba(0, 0, 0, 0.45); }
.about-content-block {
max-width: 940px;
margin: 0 auto;
}
.about-content-block h2 {
margin-bottom: 1.25rem;
}
.about-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 1rem;
}
.about-stat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6rem;
text-align: center;
padding: 2.1rem 1rem;
border-radius: var(--radius);
transition: all var(--t);
}
.about-stat:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.about-stat-number {
display: block;
font-family: 'General Sans', sans-serif;
font-weight: 800;
font-size: 2.6rem;
color: var(--red);
background: var(--red-grad);
-webkit-background-clip: text;
background-clip: text;
line-height: 1;
letter-spacing: -0.015em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.about-stat-number { -webkit-text-fill-color: transparent; }
}
.about-stat-label {
display: block;
font-size: 0.7rem;
color: var(--text-sub);
line-height: 1.3;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.11em;
}
@media (max-width: 768px) {
.about-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.about-stat { padding: 1.25rem 0.75rem; }
.about-stat-number { font-size: 1.6rem; }
}
@media (max-width: 480px) {
.about-stats-grid {
grid-template-columns: 1fr 1fr;
}
}
/* --- 23x. ABOUT PAGE HEADER (simple, no hero) --- */
.about-page-header {
padding-top: calc(var(--header-h) + 4rem);
padding-bottom: 2rem;
}
.about-page-header h1 {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
}
/* --- 23y. LEADER QUOTE CARD --- */
.about-leader-card {
padding: 2rem;
border-radius: var(--radius-lg);
}
.leader-card-inner {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.leader-photo-wrapper {
display: flex;
align-items: center;
gap: 1.25rem;
}
.leader-photo-placeholder {
width: 80px;
height: 80px;
min-width: 80px;
border-radius: 50%;
background: var(--surface);
border: 2px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.leader-photo-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.leader-name {
font-family: 'Satoshi', sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
line-height: 1.3;
}
.leader-title {
font-size: 0.78rem;
color: var(--text-muted);
line-height: 1.5;
margin-top: 0.2rem;
}
.leader-quote {
font-size: 0.92rem;
color: var(--text-sub);
line-height: 1.75;
font-style: italic;
border-left: 3px solid var(--red);
padding-left: 1.25rem;
margin: 0;
}
/* --- 23z. COPY EMAIL BUTTON --- */
.copy-email-btn {
position: relative;
transition: all 0.3s ease;
}
.copy-email-btn:active {
transform: scale(0.97);
}
.copy-hint {
opacity: 0.7;
transition: all 0.3s ease;
}
@media (max-width: 768px) {
.about-page-header { padding-top: calc(var(--header-h) + 2.5rem); }
.leader-photo-wrapper { flex-direction: column; text-align: center; gap: 0.75rem; }
.leader-photo-placeholder { width: 64px; height: 64px; min-width: 64px; }
.leader-quote { font-size: 0.85rem; }
}
/* ============================================================
23. FORM PAGE - ADD YOUR FOOTPRINT (register.html)
============================================================ */
/* --- 23a. PAGE LAYOUT --- */
.form-page {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: calc(var(--header-h) + 3rem) 2.5rem 4rem;
max-width: 1400px;
margin: 0 auto;
}
/* --- 23b. INTRO (inside card) --- */
.form-intro {
margin-bottom: 1.5rem;
width: 100%;
}
.form-intro h1 {
font-size: clamp(1.8rem, 4vw, 2.4rem);
margin-bottom: 0.75rem;
letter-spacing: -0.02em;
text-transform: none;
}
.form-intro p {
font-size: 0.95rem;
color: var(--text-sub);
line-height: 1.7;
max-width: 100%;
}
/* Privacy note strip (between CTA and map) */
.map-privacy-note {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
font-size: 0.78rem;
font-weight: 500;
color: var(--text-sub);
background: rgba(34, 197, 94, 0.05);
border-bottom: 1px solid var(--glass-border);
letter-spacing: 0.01em;
line-height: 1.5;
}
.map-privacy-note svg {
flex-shrink: 0;
color: rgba(34, 197, 94, 0.6);
}
/* --- 23b1. FIELD HINT --- */
.field-hint {
display: block;
font-size: 0.76rem;
color: var(--text-sub);
margin-top: 0.5rem;
line-height: 1.5;
letter-spacing: 0.01em;
opacity: 0.85;
}
/* --- 23b2. STEP INDICATOR --- */
.step-indicator {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 2rem;
padding: 0;
}
.step-dot {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
border: none;
background: none;
cursor: pointer;
padding: 0.25rem 0.5rem;
transition: all 0.3s ease;
}
.step-num {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Satoshi', sans-serif;
font-size: 0.88rem;
font-weight: 700;
color: var(--text-sub);
border: 2px solid var(--border);
background: var(--surface);
transition: all 0.3s ease;
}
.step-label {
font-family: 'Satoshi', sans-serif;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-sub);
transition: color 0.3s ease;
}
.step-line {
flex: 1;
max-width: 70px;
height: 2px;
background: var(--border);
margin: 0 0.5rem;
margin-bottom: 1.4rem;
border-radius: 2px;
transition: background 0.3s ease;
}
/* Active step */
.step-dot.active .step-num {
background: var(--red-grad);
border-color: var(--red);
color: #fff;
box-shadow: 0 0 12px var(--red-glow);
}
.step-dot.active .step-label {
color: var(--red);
}
/* Completed step */
.step-dot.completed .step-num {
background: var(--success);
border-color: var(--success);
color: #fff;
}
.step-dot.completed .step-label {
color: var(--success);
}
.step-line.completed {
background: var(--success);
}
/* --- 23b2b. FORM STEPS --- */
.form-step {
display: none;
animation: stepFadeIn 0.35s ease forwards;
}
.form-step.active {
display: block;
}
@keyframes stepFadeIn {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
/* --- Validation Error Styles --- */
.field-error-msg {
color: var(--red);
font-size: 0.72rem;
font-weight: 500;
margin-top: 0.35rem;
display: flex;
align-items: center;
gap: 0.3rem;
animation: errorSlide 0.25s ease forwards;
}
.field-error-msg::before {
content: '';
font-size: 0.8rem;
}
@keyframes errorSlide {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.field-error {
border-color: var(--red) !important;
box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.15) !important;
}
/* Shake animation for form card on validation fail */
@keyframes formShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
.shake {
animation: formShake 0.4s ease;
}
/* --- 23b2c. STEP NAVIGATION BUTTONS --- */
.step-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2.5rem;
padding-top: 1.75rem;
border-top: 1px solid var(--border);
}
.step-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'Satoshi', sans-serif;
font-size: 0.92rem;
font-weight: 600;
border: none;
border-radius: var(--radius-sm);
padding: 0.85rem 1.75rem;
cursor: pointer;
transition: all 0.25s ease;
}
.step-prev {
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
}
.step-prev:hover {
border-color: var(--border-hover);
color: var(--text);
background: var(--surface-hover);
}
.step-next {
color: #fff;
background: var(--red-grad);
box-shadow: 0 4px 16px var(--red-glow);
}
.step-next:hover {
transform: translateY(-1px);
box-shadow: 0 6px 24px var(--red-glow);
filter: brightness(1.05);
}
/* Progress bar */
.form-progress {
width: 100%;
height: 6px;
background: var(--surface);
border-radius: 4px;
margin-bottom: 1.75rem;
overflow: hidden;
}
.form-progress-bar {
height: 100%;
background: var(--red-grad);
border-radius: 4px;
transition: width 0.4s var(--ease);
}
/* --- Custom Checkbox (consent) --- */
.custom-checkbox {
display: flex;
align-items: flex-start;
gap: 0.75rem;
cursor: pointer;
user-select: none;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.checkbox-mark {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
min-width: 22px;
border: 2px solid var(--border);
border-radius: 6px;
background: var(--surface);
transition: all 0.2s ease;
margin-top: 1px;
}
.checkbox-mark svg {
width: 14px;
height: 14px;
stroke: #fff;
opacity: 0;
transform: scale(0.5);
transition: all 0.2s ease;
}
.custom-checkbox input:checked + .checkbox-mark {
background: var(--red);
border-color: var(--red);
box-shadow: 0 2px 8px var(--red-glow);
}
.custom-checkbox input:checked + .checkbox-mark svg {
opacity: 1;
transform: scale(1);
}
.custom-checkbox:hover .checkbox-mark {
border-color: var(--border-hover);
}
.checkbox-text {
font-size: 0.88rem;
color: var(--text-sub);
line-height: 1.6;
}
.checkbox-text strong {
color: var(--text);
}
.custom-checkbox input.field-error + .checkbox-mark {
border-color: var(--red) !important;
box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.15);
}
/* --- Step Submit Button --- */
.step-submit {
color: #fff;
background: var(--red-grad);
box-shadow: 0 4px 20px var(--red-glow);
font-size: 0.88rem;
letter-spacing: 0.06em;
padding: 0.85rem 2rem;
border-radius: var(--radius-sm);
position: relative;
overflow: hidden;
}
.step-submit svg {
flex-shrink: 0;
}
.step-submit::after {
content: '';
position: absolute;
top: 0; left: -100%; right: 0; bottom: 0;
width: 200%;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
animation: submitShimmer 3s ease-in-out infinite;
}
@keyframes submitShimmer {
0% { transform: translateX(-50%); }
100% { transform: translateX(50%); }
}
.step-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px var(--red-glow);
filter: brightness(1.08);
}
.step-submit:active {
transform: translateY(0);
}
.step-submit.submitting {
pointer-events: none;
opacity: 0.7;
}
.step-actions--final {
margin-top: 2rem;
}
/* --- Mobile Step Indicator Fix --- */
@media (max-width: 480px) {
.step-dot .step-label {
display: none;
}
.step-dot {
min-width: 32px;
}
}
/* --- Success Confetti --- */
@keyframes confettiFall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.confetti-piece {
position: fixed;
width: 10px;
height: 10px;
top: -20px;
z-index: 9999;
pointer-events: none;
animation: confettiFall 3s ease-out forwards;
}
/* --- 23b3. 3-COLUMN ROW --- */
.form-row-3 { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 768px) { .form-row-3 { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 480px) { .form-row-3 { grid-template-columns: 1fr !important; } }
/* --- 23b4. PILL GROUP (multi-select checkboxes/radios) --- */
.pill-group {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.pill-option {
display: inline-flex;
cursor: pointer;
}
.pill-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.pill-option span {
display: inline-block;
font-family: 'Satoshi', sans-serif;
font-size: 0.78rem;
font-weight: 500;
padding: 0.45rem 1rem;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-sub);
background: var(--surface);
transition: all 0.2s ease;
user-select: none;
}
.pill-option:hover span {
border-color: var(--border-hover);
color: var(--text);
}
.pill-option input:checked + span {
background: var(--red-soft);
border-color: var(--red);
color: var(--red);
font-weight: 600;
}
[data-theme="light"] .pill-option span {
background: rgba(255, 255, 255, 0.6);
border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .pill-option input:checked + span {
background: rgba(214, 40, 57, 0.08);
border-color: var(--red);
color: var(--red);
}
/* --- 23b4b. PARTICIPATION ENTRY ROWS --- */
.participation-entries {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.participation-row {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0;
animation: fieldSlideIn 0.25s ease forwards;
}
.participation-row + .participation-row {
border-top: 1px solid var(--border);
}
/* Custom dropdown in participation row */
.part-year-dropdown {
flex-shrink: 0;
width: 120px;
}
.part-year-dropdown .dropdown-trigger {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
min-height: unset;
}
.part-year-dropdown .dropdown-trigger svg {
width: 14px;
height: 14px;
}
.participation-row .row-label {
font-size: 0.72rem;
color: var(--text-muted);
font-weight: 500;
white-space: nowrap;
}
.row-pills {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
flex: 1;
}
.pill-sm span {
font-size: 0.72rem !important;
padding: 0.35rem 0.75rem !important;
}
.remove-row-btn {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border: 1px solid var(--border);
border-radius: 50%;
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s ease;
opacity: 0.5;
}
.remove-row-btn:hover {
border-color: var(--red);
color: var(--red);
background: var(--red-soft);
opacity: 1;
}
.remove-row-btn svg {
width: 12px;
height: 12px;
}
.add-entry-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: 'Satoshi', sans-serif;
font-size: 0.76rem;
font-weight: 600;
color: var(--red);
background: transparent;
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
padding: 0.5rem 1.2rem;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 0.5rem;
}
.add-entry-btn:hover {
border-color: var(--red);
background: var(--red-soft);
}
.add-entry-btn svg {
width: 14px;
height: 14px;
}
@media (max-width: 480px) {
.participation-row {
flex-wrap: wrap;
gap: 0.4rem;
}
.part-year-dropdown {
width: 100%;
}
.participation-row .row-label {
display: none;
}
}
/* --- 23b5. CONDITIONAL FIELD (slide-in) --- */
.conditional-field {
overflow: hidden;
transition: max-height 0.35s ease, opacity 0.3s ease;
}
.conditional-field.visible {
display: block;
animation: fieldSlideIn 0.35s ease forwards;
}
@keyframes fieldSlideIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- 23c. LOCATION BADGE (shown when ?lat&lng params are present) --- */
.location-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--surface);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
padding: 0.5rem 1.1rem;
margin-bottom: 2rem;
font-size: 0.78rem;
color: var(--text-sub);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
animation: badgePulse 2s ease-in-out 1;
}
.location-badge.no-location {
border-color: rgba(var(--red-rgb), 0.3);
background: var(--red-soft);
color: var(--red);
}
/* --- 23b2. STEP INDICATOR --- */
.form-step-indicator {
font-size: 0.72rem;
font-weight: 600;
color: var(--text-muted);
margin-top: 0.75rem;
letter-spacing: 0.02em;
}
/* --- 23b3. LABEL HINT (inline) --- */
.label-hint {
font-size: 0.75rem;
font-weight: 400;
color: var(--text-muted);
letter-spacing: 0;
}
/* --- 23s. SUCCESS SECTION --- */
.success-header {
text-align: center;
margin-bottom: 3rem;
}
.success-header .success-icon {
width: 72px;
height: 72px;
margin: 0 auto 1.75rem;
background: rgba(34, 197, 94, 0.08);
border: 2px solid rgba(34, 197, 94, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: successPop 0.5s var(--ease) 0.2s both;
}
@keyframes successPop {
0% { transform: scale(0); }
60% { transform: scale(1.12); }
100% { transform: scale(1); }
}
.success-header .success-icon svg {
width: 34px;
height: 34px;
color: #22c55e;
}
.success-header h2 {
font-size: clamp(1.8rem, 4vw, 2.8rem);
margin-bottom: 0.75rem;
letter-spacing: -0.02em;
text-transform: none;
}
.success-header p {
font-size: 1.05rem;
color: var(--text-sub);
max-width: 520px;
margin: 0 auto;
line-height: 1.7;
}
/* --- Story Email CTA Card --- */
.success-story-cta {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem 2rem;
margin-bottom: 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.story-cta-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.story-cta-header > svg {
width: 24px;
height: 24px;
color: var(--red);
flex-shrink: 0;
}
.story-cta-header strong {
display: block;
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.35rem;
}
.story-cta-header span {
font-size: 0.9rem;
color: var(--text-sub);
line-height: 1.6;
}
.story-cta-email {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.5rem 0.6rem 0.5rem 1.35rem;
margin: 0 auto;
}
.story-email-address {
font-family: 'Satoshi', monospace;
font-size: 1rem;
font-weight: 600;
color: var(--text);
letter-spacing: 0.01em;
flex: 1;
user-select: all;
}
.copy-email-btn {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.9rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text-sub);
font-family: inherit; /*