/* ============================================================
Stratavex — Shared responsive contract
Single source of truth for the responsive system used by BOTH
the React landing page (site/) and the static product pages
(public/*.html). Linked as /base.css from every surface.
Canonical breakpoints (literal — CSS can't use vars in @media):
1024px tablet / mobile-nav threshold
768px large phone
480px small phone
Container caps at 1280px; gutters and vertical rhythm are fluid.
============================================================ */
:root {
/* ─── Layout contract ─── */
--container-max: 1280px;
--gutter: clamp(1.25rem, 4.5vw, 3rem); /* 20px → 48px side padding */
--section-y: clamp(4.5rem, 8vw, 8.75rem); /* 72px → 140px band rhythm */
--hero-pad-top: clamp(7rem, 12vw, 9rem); /* nav clearance at top of hero */
/* ─── Fluid type scale (shared) ─── */
--fs-hero: clamp(2.75rem, 7vw, 6.8rem); /* page headline */
--fs-h2: clamp(2rem, 4.2vw, 3.6rem); /* section title (canonical) */
--fs-h3: clamp(1.25rem, 2vw, 1.6rem); /* card / sub-head */
--fs-lead: clamp(1.02rem, 1.1vw, 1.15rem); /* hero sub / lead paragraph */
}
/* Respect the user's browser font-size preference instead of pinning 16px. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
/* Centered content column shared by every page. Sections own the side
gutter + vertical rhythm; .container only caps + centers the width. */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
}
/* ============================================================
Reset + element base (shared by every surface)
============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x: clip on the root is the reliable guard against horizontal
page-slide (unlike `hidden` on body, it doesn't force overflow-y to auto
and it contains stray wide/absolutely-positioned children). */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
font-family: var(--font-body);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
::selection { background: var(--accent-dim); color: var(--bg-primary); }
/* Star-map background — shared atmospheric layer */
body::before {
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(1px 1px at 10% 15%, rgba(91,163,192,0.15) 50%, transparent 100%),
radial-gradient(1px 1px at 85% 8%, rgba(91,163,192,0.1) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 45% 25%, rgba(91,163,192,0.12) 50%, transparent 100%),
radial-gradient(1px 1px at 92% 42%, rgba(91,163,192,0.08) 50%, transparent 100%),
radial-gradient(1px 1px at 20% 65%, rgba(91,163,192,0.1) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 70% 55%, rgba(91,163,192,0.07) 50%, transparent 100%),
radial-gradient(1px 1px at 35% 80%, rgba(91,163,192,0.09) 50%, transparent 100%),
radial-gradient(1px 1px at 60% 90%, rgba(91,163,192,0.06) 50%, transparent 100%),
radial-gradient(1px 1px at 5% 45%, rgba(91,163,192,0.11) 50%, transparent 100%),
radial-gradient(1px 1px at 78% 78%, rgba(91,163,192,0.08) 50%, transparent 100%);
}
/* keep page content above the star-map (React mount + static body children) */
#root, body > * { position: relative; z-index: 1; }
/* ============================================================
Mobile navigation — hamburger toggle + slide-in drawer.
Shared markup contract:
Behaviour wired by /nav.js (static pages) or React state (landing).
============================================================ */
.nav-toggle {
display: none;
width: 42px; height: 42px;
align-items: center; justify-content: center;
border: 1px solid var(--accent-border, rgba(91,163,192,0.15));
border-radius: var(--radius-xs, 4px);
background: transparent; color: var(--text-primary, #D4DCE8);
cursor: pointer; flex-shrink: 0; z-index: 1002;
transition: border-color 0.3s ease, color 0.3s ease;
}
.nav-toggle:hover { border-color: var(--accent, #5BA3C0); color: var(--accent, #5BA3C0); }
.nav-toggle-bars { position: relative; display: block; width: 18px; height: 12px; }
.nav-toggle-bars span {
position: absolute; left: 0; width: 100%; height: 1.5px;
background: currentColor; border-radius: 2px;
transition: transform 0.3s var(--ease, cubic-bezier(0.4,0,0.2,1)), opacity 0.2s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle-bars span:nth-child(3) { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
/* Dimmed backdrop behind the open drawer. Sits below the navbar (z-index
1000) so the drawer — which paints inside the fixed navbar's stacking
context — is never covered by the backdrop. */
.nav-backdrop {
position: fixed; inset: 0; z-index: 999;
background: rgba(9,14,24,0.62);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }
/* Lock background scroll while the drawer is open. */
body.nav-open { overflow: hidden; }
@media (max-width: 1024px) {
.nav-toggle { display: inline-flex; }
/* Push the CTA + toggle to the right once the links leave the bar,
and shrink the CTA to fit the tighter mobile bar (shared by every page). */
.navbar .nav-cta { margin-left: auto; padding: 9px 16px; font-size: 0.7rem; }
/* The nav-links list becomes a right-edge drawer. Scoped with .navbar
so it always beats each page's flat `.nav-links { display:flex }`. */
.navbar .nav-links {
position: fixed; top: 0; right: 0; z-index: 1001;
display: flex; flex-direction: column; align-items: flex-start;
gap: 4px;
width: min(340px, 82vw); height: 100dvh;
padding: calc(var(--gutter) + 64px) var(--gutter) var(--gutter);
background: var(--bg-secondary, #111a2b);
border-left: 1px solid var(--accent-border, rgba(91,163,192,0.15));
box-shadow: -28px 0 64px rgba(0,0,0,0.45);
transform: translateX(105%);
transition: transform 0.42s var(--ease, cubic-bezier(0.4,0,0.2,1));
overflow-y: auto;
}
.navbar .nav-links.open { transform: translateX(0); }
/* accent hairline along the top of the drawer */
.navbar .nav-links::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--accent-dim, #3B82A0), transparent);
}
.navbar .nav-links li { width: 100%; }
.navbar .nav-links a {
display: block; width: 100%;
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-size: 1.3rem; font-weight: 500; letter-spacing: 0.01em;
text-transform: none; color: var(--text-primary, #D4DCE8);
padding: 14px 0; border-bottom: 1px solid var(--border, #1B2A4A);
}
.navbar .nav-links a::after { display: none; }
.navbar .nav-links a:hover,
.navbar .nav-links a.active { color: var(--accent, #5BA3C0); }
/* staggered reveal of drawer links once open */
.navbar .nav-links a { opacity: 0; transform: translateX(12px); transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease; }
.navbar .nav-links.open a { opacity: 1; transform: translateX(0); }
.navbar .nav-links.open li:nth-child(1) a { transition-delay: 0.08s; }
.navbar .nav-links.open li:nth-child(2) a { transition-delay: 0.13s; }
.navbar .nav-links.open li:nth-child(3) a { transition-delay: 0.18s; }
.navbar .nav-links.open li:nth-child(4) a { transition-delay: 0.23s; }
.navbar .nav-links.open li:nth-child(5) a { transition-delay: 0.28s; }
}
@media (max-width: 480px) {
.navbar .nav-cta { padding: 8px 12px; font-size: 0.66rem; }
}
/* Drawer is a tap-target surface; never animate it for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
.navbar .nav-links,
.navbar .nav-links a,
.nav-toggle-bars span,
.nav-backdrop { transition: none !important; }
}