/* Self-hosted brand fonts (both OFL-licensed). Served same-origin from * /fonts/ so the strict CSP `font-src 'self'` allows them with no Google * Fonts CDN. Variable weight axis covers the 400–700 range the brand uses. */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 100 800; src: url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2'); } /* Nodevia marketing site — design tokens, themed. * * Light + dark palettes. Light is the default (matches the May 2026 * brand direction the app uses); dark is opt-in via the header toggle * which sets `data-theme="dark"` on `` and persists the choice * in localStorage. No build step, no JS framework — just a static * stylesheet driven by CSS custom properties. * * Hue family from the logo: * Tile bg #010612 / #09090B (dark canvas) * Mint stroke #5EEAD4 (sparkline fills, healthy state) * Brand teal #0F766E (light) / #2DD4BF (dark) primary accent */ :root, :root[data-theme='light'] { /* Brand */ --color-primary: #0F766E; --color-primary-hover: #0B5852; --color-primary-soft: rgba(15, 118, 110, 0.10); --color-primary-on: #FFFFFF; --color-accent: #5EEAD4; /* Surfaces */ --color-bg: #FAFAF9; --color-bg-soft: #F4F4F5; --color-bg-alt: #FFFFFF; --color-surface: #FFFFFF; --color-surface-2: #F8F9FA; --color-border: #E4E4E7; --color-border-strong: #D4D4D8; --color-border-soft: #F4F4F5; /* Text */ --color-ink: #09090B; --color-ink-body: #3F3F46; --color-ink-subdued: #71717A; --color-ink-muted: #A1A1AA; /* Semantic */ --color-success: #10B981; --color-success-soft: rgba(16, 185, 129, 0.12); --color-warning: #F59E0B; --color-warning-soft: rgba(245, 158, 11, 0.14); --color-danger: #DC2626; --color-danger-soft: rgba(220, 38, 38, 0.10); /* Elevation */ --shadow-card: 0 1px 2px rgba(9, 9, 11, 0.04), 0 4px 12px -2px rgba(9, 9, 11, 0.06); --shadow-card-strong: 0 4px 16px -2px rgba(9, 9, 11, 0.08), 0 16px 48px -12px rgba(9, 9, 11, 0.10); --shadow-glow-teal: 0 6px 24px -6px rgba(15, 118, 110, 0.30); --shadow-glow-strong: 0 14px 40px -8px rgba(15, 118, 110, 0.35); /* Decorative */ --grid-line: rgba(9, 9, 11, 0.04); --glow-hero: radial-gradient(circle, rgba(94, 234, 212, 0.22), transparent 70%); color-scheme: light; } :root[data-theme='dark'] { /* Brand */ --color-primary: #2DD4BF; --color-primary-hover: #5EEAD4; --color-primary-soft: rgba(45, 212, 191, 0.14); --color-primary-on: #022C24; --color-accent: #5EEAD4; /* Surfaces — anchored to the logo tile (#010612) */ --color-bg: #09090B; --color-bg-soft: #0C0C0E; --color-bg-alt: #141417; --color-surface: #0F0F11; --color-surface-2: #18181B; --color-border: #27272A; --color-border-strong: #3F3F46; --color-border-soft: #1C1C1F; /* Text */ --color-ink: #FAFAFA; --color-ink-body: #D4D4D8; --color-ink-subdued: #A1A1AA; --color-ink-muted: #71717A; /* Semantic */ --color-success: #34D399; --color-success-soft: rgba(52, 211, 153, 0.16); --color-warning: #FBBF24; --color-warning-soft: rgba(251, 191, 36, 0.16); --color-danger: #F87171; --color-danger-soft: rgba(248, 113, 113, 0.14); /* Elevation — deep canvases need stronger drops */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px -2px rgba(0, 0, 0, 0.40); --shadow-card-strong: 0 4px 16px -2px rgba(0, 0, 0, 0.5), 0 16px 48px -12px rgba(0, 0, 0, 0.55); --shadow-glow-teal: 0 6px 24px -6px rgba(45, 212, 191, 0.30); --shadow-glow-strong: 0 14px 40px -8px rgba(45, 212, 191, 0.35); --grid-line: rgba(255, 255, 255, 0.04); --glow-hero: radial-gradient(circle, rgba(45, 212, 191, 0.18), transparent 70%); color-scheme: dark; } :root { /* Spacing — 4px base, multiples of 4. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 28px; --text-2xl: 40px; --text-3xl: 56px; --text-4xl: 72px; --layout-max: 1200px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html, body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.55; color: var(--color-ink); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 200ms ease, color 200ms ease; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } img, svg { display: block; max-width: 100%; } h1, h2, h3, h4 { margin: 0 0 var(--space-4); color: var(--color-ink); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; } h1 { font-size: var(--text-3xl); letter-spacing: -0.025em; } h2 { font-size: var(--text-2xl); letter-spacing: -0.020em; } h3 { font-size: var(--text-md); } h4 { font-size: var(--text-base); } p { margin: 0 0 var(--space-4); } .accent-teal { color: var(--color-primary); } .accent-deep-teal { color: var(--color-primary-hover); } /* --- Layout --------------------------------------------------------- */ .container { width: 100%; max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--space-5); } main { padding: 0 0 var(--space-8); } section { padding: var(--space-8) 0; scroll-margin-top: 80px; } @media (min-width: 800px) { section { padding: var(--space-9) 0; } } /* --- Header / nav --------------------------------------------------- */ .site-header { background: color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--color-border-soft); position: sticky; top: 0; z-index: 10; } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); padding-bottom: var(--space-3); gap: var(--space-5); } .brand { display: inline-flex; align-items: center; /* The lockup is now a single SVG — icon-as-N + "odevia" in the * brand's Poppins-outlined wordmark all baked into one file. No * inline text to align against. */ line-height: 1; } .brand:hover { text-decoration: none; } .brand-mark { /* Lockup aspect ratio is 703:220 — width follows from height to * preserve the brand's exact proportions. */ height: 36px; width: auto; display: block; } /* `.brand-text` retired — the SVG carries the wordmark now. The * rule is removed entirely rather than left dangling so future * grep / refactor work doesn't trip over it. */ .nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } /* Scope the muted/grey treatment to plain nav links only — the * `Get a quote` sits inside the same *