/* ==========================================================================
Orbis Brand Kit v1.0 · shared CSS
==========================================================================
Source of truth: docs/superpowers/specs/2026-05-16-orbis-brand-kit-foundation-design.md
Brand guide: https://orbis-rebrand.pages.dev/kit/
Canonical surface: products/orbis/landing/enterprise/index.html
USAGE: link from every page in products/orbis/landing/
NEVER re-inline the brand variables. NEVER redefine the palette inside a page.
If you need a one-off tweak, do it as a scoped override AFTER this stylesheet.
FONT LOAD: pages should also include in :
========================================================================== */
/* ----- TOKENS ----- */
:root {
/* Neutrals — light */
--ink: #08080A;
--ink-2: #2A2A2E;
--ink-3: #7A7A80;
--ink-4: #B6B6BC;
--bg: #FAFAFA;
--surface: #F2F2F2;
--surface-2: #E9E9EC;
/* Neutrals — dark */
--dark-bg: #06070A;
--dark-surface: #0E1014;
--dark-surface-2: #161A20;
--dark-text: #ECEEF2;
--dark-text-2: #A8AEB8;
--dark-text-3: #6B7280;
--dark-text-4: #3D434B;
/* Signal — the brand color */
--signal: #5EFC8D;
--signal-ink: #0B6B2E;
--signal-glow: rgba(94,252,141,.45);
--signal-soft: rgba(94,252,141,.12);
/* Warning — data only */
--warn: #D43A2F;
--warn-light: #FF8678;
/* Rules */
--rule: rgba(8,8,10,.06);
--rule-2: rgba(8,8,10,.12);
--rule-strong: rgba(8,8,10,.20);
--rule-dark: rgba(236,238,242,.06);
--rule-dark-2: rgba(236,238,242,.12);
--rule-dark-3: rgba(236,238,242,.20);
/* Type families */
--sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
--mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, monospace;
}
/* ----- BASE ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--sans);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: var(--ink);
background: var(--bg);
letter-spacing: -.005em;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
::selection { background: var(--signal); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* ----- LAYOUT ----- */
.k-container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .k-container { padding: 0 20px; } }
.k-container--narrow { max-width: 1080px; }
.k-container--wide { max-width: 1440px; }
/* ----- TYPOGRAPHY ----- */
.k-h1 {
font-family: var(--sans);
font-weight: 600;
font-size: clamp(48px, 7.5vw, 96px);
line-height: 1.0;
letter-spacing: -.035em;
}
.k-h2 {
font-family: var(--sans);
font-weight: 600;
font-size: clamp(34px, 4.5vw, 56px);
line-height: 1.05;
letter-spacing: -.025em;
}
.k-h3 {
font-family: var(--sans);
font-weight: 600;
font-size: clamp(20px, 1.8vw, 28px);
line-height: 1.15;
letter-spacing: -.02em;
}
.k-lead {
font-size: 18px;
line-height: 1.5;
color: var(--ink-2);
max-width: 56ch;
}
.k-body-lg { font-size: 18px; line-height: 1.55; }
.k-body { font-size: 15px; line-height: 1.55; }
.k-body-sm { font-size: 14px; line-height: 1.55; }
.k-mono { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
.k-ghost { color: var(--ink-4); }
.k-muted { color: var(--ink-3); }
.k-signal { color: var(--signal-ink); }
.k-strong { font-weight: 600; color: var(--ink); }
/* ----- NAV ----- */
.k-nav {
position: sticky; top: 0; z-index: 50;
background: rgba(250,250,250,.88);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border-bottom: 1px solid var(--rule);
padding: 16px 0;
}
.k-nav-inner { display: flex; justify-content: space-between; align-items: center; }
.k-logo {
font-family: var(--mono);
font-weight: 600;
font-size: 17px;
letter-spacing: -.03em;
line-height: 1;
color: var(--ink);
display: inline-flex; align-items: center; gap: 10px;
}
.k-logo-mark {
width: 16px; height: 16px;
display: inline-block;
flex-shrink: 0;
}
.k-nav-links { display: flex; gap: 4px; align-items: center; }
.k-nav-link {
font-family: var(--mono);
font-size: 13px;
font-weight: 500;
padding: 8px 14px;
color: var(--ink-2);
transition: color .2s ease, background .2s ease;
border-radius: 6px;
}
.k-nav-link:hover { color: var(--ink); background: var(--surface); }
.k-nav-link--active { color: var(--ink); }
/* ----- HAMBURGER + MOBILE MENU (opt-in per-page via markup) ----- */
/* Pages adopt the hamburger by including:
inside .k-nav-links
inside