/* ============================================================ ONEXUS 2026 — base.css Mistral-style foundation: brand tokens, per-section theme scopes (--sec-*), typography, hairline utilities, .k-type ============================================================ */ :root { /* brand (onexus identity, kept) */ --lime: #C8FF4D; --lime-deep: #9EE600; --violet: #8A7BFF; --violet-deep: #5A4BD8; --violet-soft: #B7AEFF; --term: #5DFF6E; /* neutrals */ --bg: #08080C; /* page ground (dark) — also overscroll color */ /* ---------- section scope = DARK ---------- */ --sec-bg: #08080C; --sec-bg-soft: #0E0F15; --sec-card: #101218; --sec-fg: #F4F5F7; --sec-fg-dim: #9AA0AD; --sec-fg-mute: #626776; --sec-line: rgba(255, 255, 255, 0.09); --sec-line-2: rgba(255, 255, 255, 0.18); --sec-accent-text: var(--lime); /* lime allowed as text on dark */ --sec-chip-fg: #14161A; /* text on lime chips */ --sec-spot: rgba(200, 255, 77, 0.10);/* spotlight glow */ /* layout */ --container: 1240px; --gut: clamp(20px, 5vw, 64px); --bar-h: 64px; --font-display: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --ease-out: cubic-bezier(.16, 1, .3, 1); } /* all sections share the dark scope (Mistral-style black) */ section[data-theme] { background: var(--sec-bg); color: var(--sec-fg); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 12px); } body { font-family: var(--font-display); background: var(--bg); color: var(--sec-fg); font-size: 16px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; letter-spacing: -0.01em; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea { font: inherit; color: inherit; } ::selection { background: var(--lime); color: #14161A; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: 3px; border-radius: 4px; } /* ---------- typography ---------- */ .sec__title, .hero__title { text-wrap: balance; } .mono { font-family: var(--font-mono); } /* kinetic typography — variable weight + tracking driven by scroll velocity (--kw written on by motion.js; static 500 without JS/motion) */ .k-type { font-variation-settings: 'wght' var(--kw, 500); letter-spacing: calc(var(--kw, 500) * -0.00004em); transition: none; } @media (prefers-reduced-motion: reduce) { .k-type { font-variation-settings: 'wght' 500; letter-spacing: -0.035em; } } /* ---------- section scaffolding (Mistral hairline grid) ---------- */ .sec { position: relative; overflow: clip; padding: clamp(90px, 13vh, 150px) var(--gut); } .sec__inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; border-inline: 1px solid var(--sec-line); padding-inline: clamp(20px, 4vw, 56px); } .sec__inner--narrow { max-width: 880px; } /* faint horizontal rules marking content blocks */ .sec__head, .hwrap, .flow, .about-grid, .founder, .int-grid, .contact-wrap { position: relative; z-index: 1; } /* background layer: static accent only (parallax target) */ .sec__bg { position: absolute; inset: -10% 0; z-index: 0; pointer-events: none; } /* static radial accent — all sections are dark */ section[data-theme="dark"] .sec__bg::after { content: ''; position: absolute; width: 60vw; height: 60vw; right: -20vw; top: -10vw; background: radial-gradient(circle, rgba(138, 123, 255, 0.10), transparent 65%); } /* film-grain noise, static, site-wide */ .noise { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* section head */ .sec__head { border-top: 1px solid var(--sec-line); padding-top: clamp(28px, 4vw, 44px); margin-bottom: clamp(44px, 6vw, 72px); max-width: 820px; } .sec__tag { font-family: var(--font-mono); font-size: 12.5px; color: var(--sec-accent-text); letter-spacing: 0.08em; text-transform: uppercase; display: inline-block; margin-bottom: 20px; } .sec__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 6.2vw, 84px); line-height: 0.98; letter-spacing: -0.035em; } .sec__title em { font-style: italic; font-weight: 500; background: linear-gradient(110deg, var(--sec-accent-text), var(--violet-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.2em; margin-right: -0.2em; } .sec__lede { margin-top: 20px; font-size: clamp(16px, 1.4vw, 19px); color: var(--sec-fg-dim); max-width: 56ch; line-height: 1.55; } /* hero title shares the scale treatment */ .hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 9.6vw, 158px); line-height: 0.92; letter-spacing: -0.045em; margin-bottom: 30px; } .hero__title em { font-style: italic; font-weight: 500; background: linear-gradient(110deg, var(--lime) 20%, var(--violet-soft) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.2em; margin-right: -0.2em; } .hero__title .stop { color: var(--lime); -webkit-text-fill-color: var(--lime); }