/* Design tokens */ :root { --nv-brand-50: #eef5fc; --nv-brand-100: #d8e8f7; --nv-brand-200: #b6d3ef; --nv-brand-300: #8bb9e4; --nv-brand-400: #629fd9; --nv-brand-500: #478cd1; --nv-brand-600: #3574b6; --nv-brand-700: #2b5d93; --nv-brand-800: #254c76; --nv-brand-900: #1e3d5e; --nv-steel-400: #a5a5a5; --nv-steel-500: #8b9199; --nv-iris-300: #958cf7; --nv-azure-300: #5db4e5; --nv-aqua-300: #3ECF8E; --nv-seq-1: #75639b; --nv-seq-2: #478c8c; --nv-seq-3: #a84d69; --nv-seq-4: #b78c42; --nv-seq-fg: var(--nv-white); --nv-accent-green: #3a7759; --nv-soft-teal: #478c8c; --nv-space-black: #03060a; --nv-hot-teal: #3ff4d8; --nv-voltage: #f0c14b; --nv-stroke-04: #4d4d53; --nv-grey-05: #b0b0ac; --nv-grey-07: #e3e3dd; --nv-primary-06: #3b79b8; --nv-primary-09: #add9f9; --nv-gradient-eyebrow: linear-gradient(180deg, #b2e0be 0%, #74c99e 100%); --nv-hero-badge-fill: rgba(71, 140, 140, 0.20); --nv-gradient-hero-badge-border: linear-gradient(90deg, #32649a 0%, #7fbff0 100%); --nv-hero-badge-spark-from: #d1d5db; --nv-hero-badge-spark-to: #a6b1c3; --nv-gradient-hero-glow: linear-gradient(180deg, #d1d5db 0%, #a6b1c3 100%); --nv-hero-glow-opacity: 0.10; --nv-ink-950: #070c14; --nv-ink-900: #0a121c; --nv-ink-850: #0e141c; --nv-ink-800: #121a25; --nv-ink-700: #1a2431; --nv-ink-600: #334155; --nv-ink-500: #475569; --nv-ink-400: #64748b; --nv-ink-300: #94a3b8; --nv-ink-200: #cbd5e1; --nv-ink-100: #e2e8f0; --nv-ink-50: #f1f5f9; --nv-white: #ffffff; --nv-alpha-04: rgba(255, 255, 255, 0.04); --nv-alpha-07: rgba(255, 255, 255, 0.07); --nv-alpha-10: rgba(255, 255, 255, 0.10); --nv-alpha-14: rgba(255, 255, 255, 0.14); --nv-alpha-34: rgba(255, 255, 255, 0.34); --nv-alpha-68: rgba(255, 255, 255, 0.68); --nv-alpha-72: rgba(255, 255, 255, 0.72); --nv-alpha-86: rgba(255, 255, 255, 0.86); --nv-bg: var(--nv-ink-900); --nv-bg-subtle: var(--nv-ink-850); --nv-bg-raised: var(--nv-ink-800); --nv-band-deep: #212124; --nv-band-navy: #003f7d; --nv-band-blue: #0c1f33; --nv-footer-bg: #212124; --nv-footer-bg-alt: #1c2632; --nv-panel-fill-from: rgba(144, 144, 150, 0.2); --nv-panel-fill-to: rgba(51, 51, 50, 0.2); --nv-problem-fill-from: rgba(45, 68, 91, 0.2); --nv-problem-fill-to: rgba(25, 41, 58, 0.2); --nv-product-fill-from: rgba(59, 130, 246, 0.1); --nv-product-fill-to: rgba(59, 130, 246, 0.03); --nv-card-blue-bg: rgba(43, 110, 198, 0.10); --nv-card-blue-bg-hover: rgba(43, 110, 198, 0.16); --nv-card-blue-border: rgba(91, 141, 239, 0.22); --nv-card-blue-border-hover: rgba(91, 141, 239, 0.34); --nv-chip-fill: #478c8c33; --nv-chip-border: #5992c5; --nv-tick: #3ecf8e; --nv-eyebrow-flat: #74c99e; --nv-scrim: rgba(5, 9, 15, 0.62); --nv-header-shadow: 0 12px 32px rgba(4, 10, 20, 0.30); --nv-glass-bg-strong: rgba(255, 255, 255, 0.12); --nv-surface: var(--nv-alpha-04); --nv-surface-raised: var(--nv-alpha-07); --nv-border: var(--nv-alpha-10); --nv-border-strong: var(--nv-alpha-14); --nv-surface-fill: var(--nv-alpha-04); --nv-surface-line: var(--nv-alpha-10); --nv-track-bg: var(--nv-alpha-07); --nv-surface-hover: var(--nv-alpha-07); --nv-surface-hover-strong: var(--nv-alpha-10); --nv-border-soft: var(--nv-alpha-07); --nv-drawer-bg: var(--nv-ink-850); --nv-loader-bg: var(--nv-ink-950); --nv-text: var(--nv-white); --nv-text-muted: var(--nv-alpha-72); --nv-text-subtle: var(--nv-alpha-68); --nv-text-brand: var(--nv-brand-300); --nv-text-on-dark: var(--nv-white); --nv-text-on-dark-muted: var(--nv-alpha-72); --nv-text-on-dark-subtle: var(--nv-alpha-68); --nv-text-on-light: var(--nv-ink-900); --nv-text-on-light-muted: var(--nv-ink-500); --nv-text-on-light-subtle: var(--nv-ink-400); --nv-focus-ring: #7fb3ea; --nv-success-500: #10b981; --nv-warning-500: #f59e0b; --nv-danger-500: #e11d48; --nv-gradient-heading: linear-gradient(266.61deg, #5ee6d5 16.08%, #5db4e5 41.09%, #958cf7 64.24%); --nv-gradient-brand: linear-gradient(115deg, var(--nv-brand-600) 0%, var(--nv-brand-500) 52%, #38bdf8 130%); --nv-gradient-cta: linear-gradient(115deg, var(--nv-brand-700) 0%, var(--nv-brand-600) 55%, #2f6aa8 120%); --nv-gradient-line: linear-gradient(90deg, transparent, rgba(71, 140, 209, 0.55), transparent); --nv-glass-bg: rgba(255, 255, 255, 0.05); --nv-glass-border: var(--nv-alpha-14); --nv-glass-blur: 18px; --nv-font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --nv-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --nv-font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace; --nv-fs-display: clamp(1.75rem, 1.15rem + 1.9vw, 2.5rem); --nv-fs-h1: clamp(1.875rem, 1.25rem + 2.0vw, 2.75rem); --nv-fs-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); --nv-fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); --nv-fs-h4: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem); --nv-fs-h5: 1.0625rem; --nv-fs-h6: 1rem; --nv-fs-lead: clamp(1rem, 0.94rem + 0.28vw, 1.125rem); --nv-fs-body: 1rem; --nv-fs-sm: 0.9375rem; --nv-fs-xs: 1rem; --nv-fs-2xs: 0.875rem; --nv-lh-tight: 1.06; --nv-lh-snug: 1.22; --nv-lh-normal: 1.5; --nv-lh-relaxed: 1.65; --nv-fw-regular: 400; --nv-fw-medium: 500; --nv-fw-semibold: 600; --nv-fw-bold: 700; --nv-fw-extra: 800; --nv-ls-tighter: -0.04em; --nv-ls-tight: -0.02em; --nv-ls-snug: -0.01em; --nv-ls-normal: 0; --nv-ls-wide: 0.08em; --nv-space-1: 0.25rem; --nv-space-2: 0.5rem; --nv-space-3: 0.75rem; --nv-space-4: 1rem; --nv-space-5: 1.25rem; --nv-space-6: 1.5rem; --nv-space-7: 1.75rem; --nv-space-8: 2rem; --nv-space-10: 2.5rem; --nv-space-12: 3rem; --nv-space-14: 3.5rem; --nv-space-16: 4rem; --nv-space-20: 5rem; --nv-space-24: 6rem; --nv-space-32: 8rem; --nv-section-y: clamp(4rem, 2.75rem + 5.5vw, 7.5rem); --nv-section-y-sm: clamp(2.75rem, 2rem + 3.5vw, 4.5rem); --nv-radius-xs: 4px; --nv-radius-sm: 6px; --nv-radius-md: 8px; --nv-radius-lg: 12px; --nv-radius-xl: 16px; --nv-radius-2xl: 24px; --nv-radius-pill: 999px; --nv-radius-circle: 50%; --nv-shadow-xs: 0 1px 2px rgba(4, 8, 14, 0.20); --nv-shadow-sm: 0 2px 6px rgba(4, 8, 14, 0.24), 0 1px 2px rgba(4, 8, 14, 0.18); --nv-shadow-md: 0 8px 24px rgba(4, 8, 14, 0.30), 0 2px 6px rgba(4, 8, 14, 0.20); --nv-shadow-lg: 0 18px 46px rgba(4, 8, 14, 0.38), 0 4px 12px rgba(4, 8, 14, 0.24); --nv-shadow-xl: 0 36px 90px rgba(4, 8, 14, 0.50), 0 8px 24px rgba(4, 8, 14, 0.28); --nv-shadow-brand: 0 10px 28px rgba(41, 79, 123, 0.46); --nv-shadow-brand-hover: 0 16px 40px rgba(41, 79, 123, 0.58); --nv-shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.12); --nv-shadow-media: 0 2px 4px rgba(3, 7, 14, 0.30), 0 12px 28px rgba(3, 7, 14, 0.42), 0 48px 96px rgba(3, 7, 14, 0.55); --nv-glow-card: 0 0 0 1px rgba(91, 141, 239, 0.16), 0 14px 40px rgba(31, 88, 168, 0.24); --nv-glow-soft: 0 0 60px rgba(56, 128, 216, 0.22); --nv-btn-radius: var(--nv-radius-md); --nv-btn-font-size: var(--nv-fs-sm); --nv-btn-font-weight: var(--nv-fw-semibold); --nv-btn-gap: var(--nv-space-2); --nv-btn-h-sm: 40px; --nv-btn-px-sm: var(--nv-space-5); --nv-btn-h-md: 44px; --nv-btn-px-md: var(--nv-space-6); --nv-btn-h-lg: 48px; --nv-btn-px-lg: var(--nv-space-7); --nv-btn-primary-bg: #294f7b; --nv-btn-primary-bg-hover: #33608f; --nv-btn-primary-fg: var(--nv-white); /* Alpha tuned to clear WCAG 1.4.11 (3:1) for a UI boundary */ --nv-btn-outline-border: var(--nv-alpha-34); --nv-btn-outline-border-hover: rgba(255, 255, 255, 0.55); --nv-btn-outline-bg-hover: var(--nv-alpha-07); --nv-btn-bright-fg: #d6edff; --nv-btn-bright-border: #d6edff; --nv-btn-bright-border-hover: var(--nv-white); --nv-btn-bright-icon: #7fbbf0; --nv-btn-bright-radius: 6px; --nv-btn-bright-font-size: 16px; --nv-btn-bright-py: 14px; --nv-btn-bright-px: 20px; --nv-btn-bright-gap: 8px; --nv-btn-bright-icon-w: 15px; --nv-btn-bright-icon-h: 12.5px; --nv-card-bg: rgba(255, 255, 255, 0.028); --nv-card-bg-hover: rgba(255, 255, 255, 0.045); --nv-card-border: var(--nv-alpha-10); --nv-card-border-hover: var(--nv-alpha-14); --nv-card-radius: var(--nv-radius-xl); --nv-card-pad: clamp(1.25rem, 0.9rem + 1.1vw, 1.75rem); --nv-container-max: 1440px; --nv-container-wide: 1440px; --nv-container-narrow: 820px; --nv-container-pad: clamp(1.75rem, 29.88vw - 330px, 6.25rem); --nv-header-h: 72px; --nv-header-h-scrolled: 64px; --nv-header-surface: #212124; --nv-header-bg: rgba(33, 33, 36, 0.82); --nv-header-bg-solid: var(--nv-header-surface); --nv-header-border: rgba(255, 255, 255, 0.08); --nv-header-link: var(--nv-alpha-86); --nv-header-link-hover: var(--nv-white); --nv-dur-fast: 200ms; --nv-dur-base: 300ms; --nv-dur-slow: 500ms; --nv-dur-slower: 800ms; --nv-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --nv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --nv-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --nv-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --nv-stagger-step: 80ms; --nv-cycle-slow: 14s; --nv-cycle-slower: 19s; --nv-cycle-slowest: 26s; --nv-noise-opacity: 0.028; --nv-z-base: 1; --nv-z-decor: 2; --nv-z-sticky: 100; --nv-z-header: 200; --nv-z-drawer: 300; --nv-z-overlay: 400; --nv-z-loader: 900; --nv-z-toast: 1000; --nv-icon-xs: 14px; --nv-icon-sm: 16px; --nv-icon-md: 18px; --nv-icon-lg: 20px; --nv-icon-xl: 24px; } @media (min-width: 1441px) { :root { --nv-container-max: 1600px; } } [data-surface="dark"] { --nv-bg: var(--nv-ink-900); --nv-bg-subtle: var(--nv-ink-850); --nv-surface: var(--nv-alpha-04); --nv-surface-raised:var(--nv-alpha-07); --nv-border: var(--nv-alpha-10); --nv-border-strong: var(--nv-alpha-14); --nv-text: var(--nv-text-on-dark); --nv-text-muted: var(--nv-text-on-dark-muted); --nv-text-subtle: var(--nv-text-on-dark-subtle); --nv-text-brand: var(--nv-brand-300); --nv-surface-fill: var(--nv-alpha-04); --nv-surface-line: var(--nv-alpha-10); --nv-track-bg: var(--nv-alpha-07); --nv-aqua-300: #3ECF8E; --nv-iris-300: #a5b4fc; --nv-azure-300: #74a9f0; --nv-btn-outline-border: var(--nv-alpha-34); --nv-btn-outline-border-hover: rgba(255, 255, 255, 0.55); --nv-btn-outline-bg-hover: var(--nv-alpha-07); /* Dark-island contract: these sections stay dark in BOTH themes, so every token their content reads is re-pinned to its dark value here. */ --nv-band-deep: #212124; --nv-band-navy: #003f7d; --nv-card-bg: rgba(255, 255, 255, 0.028); --nv-card-bg-hover: rgba(255, 255, 255, 0.045); --nv-card-border: var(--nv-alpha-10); --nv-card-border-hover: var(--nv-alpha-14); --nv-card-blue-bg: rgba(43, 110, 198, 0.10); --nv-card-blue-bg-hover: rgba(43, 110, 198, 0.16); --nv-card-blue-border: rgba(91, 141, 239, 0.22); --nv-card-blue-border-hover: rgba(91, 141, 239, 0.34); --nv-panel-fill-from: rgba(144, 144, 150, 0.2); --nv-panel-fill-to: rgba(51, 51, 50, 0.2); --nv-surface-hover: var(--nv-alpha-07); --nv-surface-hover-strong: var(--nv-alpha-10); --nv-border-soft: var(--nv-alpha-07); --nv-glass-bg: rgba(255, 255, 255, 0.05); --nv-glass-bg-strong: rgba(255, 255, 255, 0.12); --nv-glass-border: var(--nv-alpha-14); --nv-btn-primary-bg: #294f7b; --nv-btn-primary-bg-hover: #33608f; --nv-btn-primary-fg: var(--nv-white); --nv-btn-bright-fg: #d6edff; --nv-btn-bright-border: #d6edff; --nv-btn-bright-border-hover: var(--nv-white); --nv-btn-bright-icon: #7fbbf0; --nv-grey-05: #b0b0ac; --nv-grey-07: #e3e3dd; --nv-primary-06: #3b79b8; --nv-primary-09: #add9f9; --nv-stroke-04: #4d4d53; --nv-soft-teal: #478c8c; --nv-chip-fill: #478c8c33; --nv-chip-border: #5992c5; --nv-tick: #3ecf8e; --nv-eyebrow-flat: #74c99e; --nv-gradient-eyebrow: linear-gradient(180deg, #b2e0be 0%, #74c99e 100%); --nv-shadow-md: 0 8px 24px rgba(4, 8, 14, 0.30), 0 2px 6px rgba(4, 8, 14, 0.20); --nv-shadow-lg: 0 18px 46px rgba(4, 8, 14, 0.38), 0 4px 12px rgba(4, 8, 14, 0.24); --nv-shadow-xl: 0 36px 90px rgba(4, 8, 14, 0.50), 0 8px 24px rgba(4, 8, 14, 0.28); --nv-shadow-brand: 0 10px 28px rgba(41, 79, 123, 0.46); --nv-shadow-brand-hover: 0 16px 40px rgba(41, 79, 123, 0.58); --nv-shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.12); --nv-shadow-media: 0 2px 4px rgba(3, 7, 14, 0.30), 0 12px 28px rgba(3, 7, 14, 0.42), 0 48px 96px rgba(3, 7, 14, 0.55); --nv-glow-card: 0 0 0 1px rgba(91, 141, 239, 0.16), 0 14px 40px rgba(31, 88, 168, 0.24); --nv-glow-soft: 0 0 60px rgba(56, 128, 216, 0.22); --nv-focus-ring: #7fb3ea; } /* Light theme overrides */ [data-color-scheme="light"] { --nv-bg: var(--nv-white); --nv-bg-subtle: #f8fafc; --nv-bg-raised: var(--nv-white); --nv-band-deep: #f8fafc; --nv-band-navy: #f3f8ff; --nv-band-blue: #f3f8ff; --nv-footer-bg: #f8fafc; --nv-footer-bg-alt: #eef2f7; --nv-surface: var(--nv-white); --nv-surface-raised: var(--nv-white); --nv-surface-fill: #f8fafc; --nv-surface-line: #e5e7eb; --nv-surface-hover: #f1f5f9; --nv-surface-hover-strong: #e8edf3; --nv-track-bg: #eef2f6; --nv-drawer-bg: var(--nv-white); --nv-loader-bg: var(--nv-white); --nv-border: #e5e7eb; --nv-border-strong: #d0d5dd; --nv-border-soft: #eef0f4; --nv-text-on-light: #111827; --nv-text-on-light-muted: #475467; --nv-text-on-light-subtle: #667085; --nv-text: var(--nv-text-on-light); --nv-text-muted: var(--nv-text-on-light-muted); --nv-text-subtle: var(--nv-text-on-light-subtle); --nv-text-brand: #2563eb; --nv-grey-05: #667085; --nv-grey-07: #344054; --nv-primary-06: #2563eb; --nv-primary-09: #2563eb; --nv-stroke-04: #e5e7eb; --nv-soft-teal: #0f766e; /* Accents deepened for a white ground — same hues, AA-safe values */ --nv-aqua-300: #0d9488; --nv-iris-300: #6366f1; --nv-azure-300: #2563eb; --nv-tick: #059669; --nv-eyebrow-flat: #047857; --nv-gradient-eyebrow: linear-gradient(180deg, #10b981 0%, #047857 100%); --nv-card-bg: var(--nv-white); --nv-card-bg-hover: var(--nv-white); --nv-card-border: #e4e7ec; --nv-card-border-hover: #cfd4dc; --nv-card-blue-bg: #f3f8ff; --nv-card-blue-bg-hover: #e8f1ff; --nv-card-blue-border: #d6e4fb; --nv-card-blue-border-hover: #bcd4f7; --nv-panel-fill-from: #ffffff; --nv-panel-fill-to: #fcfdfe; --nv-problem-fill-from: #ffffff; --nv-problem-fill-to: #fbfcfe; --nv-product-fill-from: #ffffff; --nv-product-fill-to: #f7faff; --nv-chip-fill: #eef4ff; --nv-chip-border: #2563eb; --nv-btn-outline-border: #d0d5dd; --nv-btn-outline-border-hover: #2563eb; --nv-btn-outline-bg-hover: #f8fafc; --nv-btn-bright-fg: #1d4ed8; --nv-btn-bright-border: #bcd4f7; --nv-btn-bright-border-hover: #2563eb; --nv-btn-bright-icon: #2563eb; --nv-header-surface: var(--nv-white); --nv-header-bg: rgba(255, 255, 255, 0.96); --nv-header-bg-solid: var(--nv-white); --nv-header-border: #e5e7eb; --nv-header-link: #475467; --nv-header-link-hover: #111827; --nv-header-shadow: 0 8px 24px rgba(16, 24, 40, 0.08); --nv-glass-bg: rgba(255, 255, 255, 0.72); --nv-glass-bg-strong: rgba(255, 255, 255, 0.85); --nv-glass-border: #e5e7eb; /* Neutral, low-spread elevation — light UIs read depth from contrast, not glow */ --nv-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --nv-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06); --nv-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06); --nv-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03); --nv-shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03); --nv-shadow-media: 0 2px 4px rgba(16, 24, 40, 0.04), 0 12px 28px rgba(16, 24, 40, 0.10), 0 32px 64px rgba(16, 24, 40, 0.08); --nv-glow-card: 0 0 0 1px rgba(37, 99, 235, 0.08), 0 12px 28px rgba(16, 24, 40, 0.08); --nv-glow-soft: 0 0 48px rgba(37, 99, 235, 0.10); --nv-gradient-heading: linear-gradient(266.61deg, #0d9488 16.08%, #2563eb 41.09%, #6366f1 64.24%); --nv-gradient-brand: linear-gradient(115deg, #2563eb 0%, #3b82f6 52%, #60a5fa 130%); --nv-gradient-cta: linear-gradient(115deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 120%); --nv-gradient-line: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.28), transparent); --nv-scrim: rgba(16, 24, 40, 0.45); --nv-focus-ring: #2563eb; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -moz-tab-size: 2; tab-size: 2; } body { min-height: 100vh; min-height: 100svh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; } img, video { height: auto; } svg { fill: currentColor; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; cursor: pointer; } textarea { resize: vertical; } input, textarea { -webkit-appearance: none; appearance: none; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: none; } address { font-style: normal; } /* Safari/VoiceOver drops list semantics without the markup's role="list" */ ul[role="list"], ol[role="list"] { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } [hidden] { display: none !important; } body { font-family: var(--nv-font-body); font-size: var(--nv-fs-body); font-weight: var(--nv-fw-regular); line-height: var(--nv-lh-normal); letter-spacing: var(--nv-ls-normal); color: var(--nv-text); } h1, h2, h3, h4, h5, h6 { font-family: var(--nv-font-display); color: var(--nv-text); text-wrap: balance; } h1 { font-size: var(--nv-fs-h1); font-weight: var(--nv-fw-extra); line-height: var(--nv-lh-tight); letter-spacing: var(--nv-ls-tight); } h2 { font-size: var(--nv-fs-h2); font-weight: var(--nv-fw-bold); line-height: var(--nv-lh-snug); letter-spacing: var(--nv-ls-tight); } h3 { font-size: var(--nv-fs-h3); font-weight: var(--nv-fw-bold); line-height: var(--nv-lh-snug); letter-spacing: var(--nv-ls-snug); } h4 { font-size: var(--nv-fs-h4); font-weight: var(--nv-fw-semibold); line-height: 1.35; letter-spacing: var(--nv-ls-snug); } h5 { font-size: var(--nv-fs-h5); font-weight: var(--nv-fw-semibold); line-height: 1.4; } h6 { font-size: var(--nv-fs-h6); font-weight: var(--nv-fw-semibold); line-height: 1.4; } p { color: var(--nv-text-muted); line-height: var(--nv-lh-relaxed); text-wrap: pretty; } strong, b { font-weight: var(--nv-fw-semibold); color: var(--nv-text); } em, i { font-style: italic; } small { font-size: var(--nv-fs-xs); } code, kbd, samp, pre { font-family: var(--nv-font-mono); font-size: 0.9em; } blockquote { font-family: var(--nv-font-display); font-weight: var(--nv-fw-medium); line-height: 1.55; letter-spacing: var(--nv-ls-snug); color: var(--nv-text); } /* Typography: type roles */ .nv-display { font-family: var(--nv-font-display); font-size: var(--nv-fs-display); font-weight: var(--nv-fw-extra); line-height: var(--nv-lh-tight); letter-spacing: var(--nv-ls-tighter); } .nv-lead { font-size: var(--nv-fs-lead); line-height: var(--nv-lh-relaxed); color: var(--nv-text-muted); } .nv-eyebrow { display: inline-flex; align-items: center; gap: var(--nv-space-2); font-family: var(--nv-font-body); font-size: var(--nv-fs-xs); font-weight: var(--nv-fw-semibold); line-height: 1.2; letter-spacing: var(--nv-ls-wide); text-transform: uppercase; color: var(--nv-text-brand); } /* Doubled class outranks the section-header colour that loads later */ .nv-eyebrow.nv-eyebrow--gradient { text-transform: none; line-height: 1.25; letter-spacing: 0; color: var(--nv-eyebrow-flat); } /* Solid colour fallback where background-clip: text is unsupported */ @supports (-webkit-background-clip: text) or (background-clip: text) { .nv-eyebrow.nv-eyebrow--gradient { background-image: var(--nv-gradient-eyebrow); -webkit-background-clip: text; background-clip: text; color: transparent; /* Stops clipped descenders on the gradient-clipped text box */ padding-block-end: 0.06em; } } .nv-caption { font-size: var(--nv-fs-xs); line-height: 1.55; color: var(--nv-text-subtle); } .nv-numeral { font-family: var(--nv-font-display); font-weight: var(--nv-fw-extra); line-height: 1.05; letter-spacing: var(--nv-ls-tight); font-variant-numeric: tabular-nums; } /* Typography: gradient text */ .nv-text-gradient { color: var(--nv-brand-600); } @supports (-webkit-background-clip: text) or (background-clip: text) { .nv-text-gradient { background-image: var(--nv-gradient-heading); -webkit-background-clip: text; background-clip: text; color: transparent; padding-block-end: 0.06em; } } a { color: var(--nv-text-brand); transition: color var(--nv-dur-fast) var(--nv-ease-out); } a:hover { color: var(--nv-brand-700); } [data-surface="dark"] a:hover { color: var(--nv-white); } .nv-measure { max-width: 62ch; } .nv-measure-sm { max-width: 46ch; } .nv-measure-lg { max-width: 74ch; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nv-header-h) + var(--nv-space-6)); } body { background-color: var(--nv-bg); color: var(--nv-text); overflow-x: hidden; } body.is-locked { overflow: hidden; } hr { border: 0; height: 1px; background-color: var(--nv-border); } /* Theme switch: every transition is suppressed for the one frame. */ .is-theme-switching, .is-theme-switching *, .is-theme-switching *::before, .is-theme-switching *::after { transition: none !important; } /* Focus styles */ :focus-visible { outline: 3px solid var(--nv-focus-ring); outline-offset: 3px; border-radius: var(--nv-radius-xs); } :focus:not(:focus-visible) { outline: none; } /* Selection and scrollbar */ ::selection { background-color: var(--nv-brand-500); color: var(--nv-white); } @supports selector(::-webkit-scrollbar) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--nv-bg-subtle); } ::-webkit-scrollbar-thumb { background: var(--nv-ink-200); border-radius: var(--nv-radius-pill); border: 2px solid var(--nv-bg-subtle); } ::-webkit-scrollbar-thumb:hover { background: var(--nv-ink-300); } } img { height: auto; font-style: italic; color: var(--nv-text-subtle); background-repeat: no-repeat; background-size: cover; } img[data-src] { opacity: 0; } img.is-loaded { opacity: 1; transition: opacity var(--nv-dur-slow) var(--nv-ease-out); } input::placeholder, textarea::placeholder { color: var(--nv-text-subtle); opacity: 1; } /* Page shell */ .nv-page { display: flex; flex-direction: column; min-height: 100svh; /* Neutral default: a page that declares nothing gets a footer that simply follows the section rhythm. See "Page layout: footer coupling" below. */ --nv-footer-overlap: 0rem; --nv-footer-pad-top: var(--nv-section-y); /* The foot of the page is a page-level decision too: the sticky CTA is a child of , so the shell — not the footer — knows when the last row needs to clear a fixed bar. See the sticky-CTA breakpoint below. */ --nv-footer-pad-bottom: var(--nv-space-8); } /* Page layout: footer coupling How far the footer rises into the section above it is a page-level decision, not a footer one, so the footer itself owns no CTA-specific spacing. Put exactly one of these on , alongside .nv-page: .nv-page--footer-overlap a CTA card is the last section; the footer rises so the card nests inside it .nv-page--footer-normal no CTA (Contact, Pricing, Privacy, Terms…); the footer sits on the normal section rhythm --nv-footer-overlap is the single source of truth for the distance: .nv-footer turns it into its negative margin and .nv-cta-band reads the same value to place the cut in its own gradient, so the two cannot drift apart. Lengths, never percentages — percentage margins resolve against width. */ .nv-page--footer-overlap { --nv-footer-overlap: 9.375rem; --nv-footer-pad-top: 12.5rem; } .nv-page--footer-normal { --nv-footer-overlap: 0rem; /* The section above already pays its own bottom padding, so the footer only needs to clear it — the same job the 3.125rem residue does in the overlap layout. A full --nv-section-y here would state that rhythm twice. */ --nv-footer-pad-top: var(--nv-section-y-sm); } .nv-main { flex: 1 0 auto; background-color: var(--nv-band-deep); } /* Container */ .nv-container { width: 100%; max-width: var(--nv-container-max); margin-inline: auto; padding-inline: var(--nv-container-pad); } .nv-container--wide { max-width: var(--nv-container-wide); } .nv-container--narrow { max-width: var(--nv-container-narrow); } .nv-container--full { max-width: none; } /* Section primitives */ .nv-section { position: relative; padding-block: var(--nv-section-y); } .nv-section--tight { padding-block: var(--nv-section-y-sm); } .nv-section--flush-top { padding-block-start: 0; } .nv-section--flush-bottom { padding-block-end: 0; } .nv-section--subtle { background-color: var(--nv-bg-subtle); } .nv-section--deep { background-color: var(--nv-band-deep); } .nv-section--blue { background-color: var(--nv-band-blue); background-image: radial-gradient(70% 90% at 78% 20%, rgba(43, 110, 198, 0.26) 0%, transparent 64%), linear-gradient( 180deg, var(--nv-bg) 0%, var(--nv-band-blue) 11%, var(--nv-band-blue) 89%, var(--nv-bg) 100% ); } /* Light: a dark-surface section drops its pinning and follows the page. Only the cards listed below stay dark, because they carry a dark screenshot or a deliberate blue fill. `inherit` pulls each value from the light block, so there is one source of truth. */ [data-color-scheme="light"] [data-surface="dark"]:not(.nv-cta) { --nv-bg: inherit; --nv-bg-subtle: inherit; --nv-surface: inherit; --nv-surface-raised: inherit; --nv-border: inherit; --nv-border-strong: inherit; --nv-text: inherit; --nv-text-muted: inherit; --nv-text-subtle: inherit; --nv-text-brand: inherit; --nv-surface-fill: inherit; --nv-surface-line: inherit; --nv-track-bg: inherit; --nv-aqua-300: inherit; --nv-iris-300: inherit; --nv-azure-300: inherit; --nv-btn-outline-border: inherit; --nv-btn-outline-border-hover: inherit; --nv-btn-outline-bg-hover: inherit; --nv-band-deep: inherit; --nv-band-navy: inherit; --nv-card-bg: inherit; --nv-card-bg-hover: inherit; --nv-card-border: inherit; --nv-card-border-hover: inherit; --nv-card-blue-bg: inherit; --nv-card-blue-bg-hover: inherit; --nv-card-blue-border: inherit; --nv-card-blue-border-hover: inherit; --nv-panel-fill-from: inherit; --nv-panel-fill-to: inherit; --nv-surface-hover: inherit; --nv-surface-hover-strong: inherit; --nv-border-soft: inherit; --nv-glass-bg: inherit; --nv-glass-bg-strong: inherit; --nv-glass-border: inherit; --nv-btn-primary-bg: inherit; --nv-btn-primary-bg-hover: inherit; --nv-btn-primary-fg: inherit; --nv-btn-bright-fg: inherit; --nv-btn-bright-border: inherit; --nv-btn-bright-border-hover: inherit; --nv-btn-bright-icon: inherit; --nv-grey-05: inherit; --nv-grey-07: inherit; --nv-primary-06: inherit; --nv-primary-09: inherit; --nv-stroke-04: inherit; --nv-soft-teal: inherit; --nv-chip-fill: inherit; --nv-chip-border: inherit; --nv-tick: inherit; --nv-eyebrow-flat: inherit; --nv-gradient-eyebrow: inherit; --nv-shadow-md: inherit; --nv-shadow-lg: inherit; --nv-shadow-xl: inherit; --nv-shadow-brand: inherit; --nv-shadow-brand-hover: inherit; --nv-shadow-inset-top: inherit; --nv-shadow-media: inherit; --nv-glow-card: inherit; --nv-glow-soft: inherit; --nv-focus-ring: inherit; } /* Light: Hero copy sits on a light ground now */ [data-color-scheme="light"] .nv-hero, [data-color-scheme="light"] .nv-hero__title { color: var(--nv-text-on-light); } [data-color-scheme="light"] .nv-hero__lead { color: var(--nv-text-on-light-muted); } /* Light: the silver wash is invisible on white — a soft blue lift replaces it */ [data-color-scheme="light"] .nv-hero::before { background-image: radial-gradient( 60% 100% at 50% 0%, rgba(37, 99, 235, 0.16) 0%, rgba(37, 99, 235, 0.05) 45%, transparent 100% ); mix-blend-mode: normal; opacity: 1; } /* Light: a blue glow seats the dark dashboard on the light ground. The image itself is untouched — this paints behind it. */ [data-color-scheme="light"] .nv-hero__media::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; border-radius: var(--nv-radius-2xl); background: radial-gradient( 60% 60% at 50% 50%, rgba(37, 99, 235, 0.18) 0%, rgba(37, 99, 235, 0.06) 55%, transparent 100% ); filter: blur(28px); pointer-events: none; } [data-color-scheme="light"] .nv-hero__shot { box-shadow: var(--nv-shadow-media); } /* Light: hero pill reads as a blue-tinted chip, not a teal one */ [data-color-scheme="light"] .nv-hero__badge { --nv-hero-badge-fill: rgba(37, 99, 235, 0.07); --nv-gradient-hero-badge-border: linear-gradient(90deg, #bcd4fb 0%, #93b8f5 100%); } /* Light: Founder — light ground, card unchanged, decor pulled right back */ [data-color-scheme="light"] .nv-founder { background-color: #f3f8ff; background-image: radial-gradient( 144.83% 293.09% at 71.49% 54.39%, var(--nv-white) 0%, #eaf1fd 97.55% ); } [data-color-scheme="light"] .nv-founder__glow { background-color: rgba(37, 99, 235, 0.06); } [data-color-scheme="light"] .nv-founder__grid--dots { background-color: rgba(37, 99, 235, 0.16); } [data-color-scheme="light"] .nv-founder__grid--sq-mid-right { background-color: rgba(71, 84, 103, 0.05); } [data-color-scheme="light"] .nv-founder__grid--sq-bottom-left { background-color: rgba(71, 84, 103, 0.06); } [data-color-scheme="light"] .nv-founder__grid--sq-bottom-right { background-color: rgba(71, 84, 103, 0.06); } /* Light: magazine founder stays open — no boxed card */ [data-color-scheme="light"] .nv-founder__card { border: 0; box-shadow: none; } [data-color-scheme="light"] .nv-founder__panel { background-color: transparent; } [data-color-scheme="light"] .nv-founder__caption { background-image: linear-gradient( 180deg, rgba(214, 228, 251, 0) 0%, rgba(214, 228, 251, 0.86) 34%, rgba(214, 228, 251, 0.96) 62%, rgba(214, 228, 251, 0.98) 100% ); } [data-color-scheme="light"] .nv-founder__name { color: var(--nv-text-on-light); } [data-color-scheme="light"] .nv-founder__role { color: var(--nv-text-on-light-muted); } [data-color-scheme="light"] .nv-founder__quote { background-image: none; border: 0; } [data-color-scheme="light"] .nv-founder__quote p { color: var(--nv-text-on-light); } [data-color-scheme="light"] .nv-founder__quote::before { color: #b45309; text-shadow: none; } [data-color-scheme="light"] .nv-founder__badge { color: var(--nv-text-on-light); background-color: #eef4ff; border-color: #c7dbff; } /* Light: Platform illustration needs the quietest ground on the page */ [data-color-scheme="light"] .nv-platform { background-color: var(--nv-white); } /* Light: bands ease into the page instead of butting against it as slabs */ [data-color-scheme="light"] .nv-section--deep, [data-color-scheme="light"] .nv-audience { background-color: var(--nv-bg); background-image: linear-gradient( 180deg, var(--nv-bg) 0%, var(--nv-band-deep) 9%, var(--nv-band-deep) 91%, var(--nv-bg) 100% ); } [data-color-scheme="light"] .nv-cta-band { background-color: transparent; background-image: linear-gradient( 180deg, var(--nv-bg) 0%, var(--nv-band-deep) 9%, var(--nv-band-deep) calc(100% - var(--nv-cta-overlap)), transparent calc(100% - var(--nv-cta-overlap)) ); } /* Light: a saturated tile shouts on white — tint the block, deepen the glyph */ [data-color-scheme="light"] .nv-card__icon { color: #047857; background-color: #ecfdf5; border-color: #d1fae5; } /* Light: cards carry their own elevation — a border alone reads as flat */ [data-color-scheme="light"] .nv-card { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05); } @media (hover: hover) { [data-color-scheme="light"] .nv-card:not(.nv-card--plain):hover { box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.05); } /* `[data-surface="dark"] a:hover` (0-2-1) still matches inside a section that has flipped light — the hero keeps the attribute — and it outranks .nv-btn--outline:hover (0-2-0), repainting the label white on the near-white hover fill. Restating the variant's own colour at 0-5-1 wins it back; --nv-text resolves white inside the cards that are still dark. */ [data-color-scheme="light"] [data-surface="dark"] a.nv-btn--outline:hover, [data-color-scheme="light"] [data-surface="dark"] a.nv-btn--outline:focus-visible { color: var(--nv-text); } /* Light: How-it-works steps. Outranks .nv-lift's -6px lift and shadow-xl. The surface never changes — the card floats on a blue glow, it does not fill. Glow first (blurred, no spread edge, so it reads as light rather than a selection ring), then elevation, then a neutral contact shadow. */ [data-color-scheme="light"] .nv-workflow__steps .nv-card { transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease; } /* The --gradient-edge overlay is full-bleed (inset: -1px) and the card isolates, so that negative-z layer paints OVER the card's own background — on a white card it fills it brand-blue. The glow below replaces it. */ [data-color-scheme="light"] .nv-card--gradient-edge:hover::after, [data-color-scheme="light"] .nv-card--gradient-edge:focus-within::after { opacity: 0; } [data-color-scheme="light"] .nv-workflow__steps .nv-card:hover { border-color: #c7dbff; box-shadow: 0 0 24px 2px rgba(37, 99, 235, 0.10), 0 12px 32px rgba(37, 99, 235, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06); transform: translateY(-4px); } /* Light: Problem cards — same float, keyed to the section eyebrow's green (--nv-gradient-eyebrow, #10b981 -> #047857) instead of brand blue. */ [data-color-scheme="light"] .nv-problem__grid .nv-card { transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease; } [data-color-scheme="light"] .nv-problem__grid .nv-card:hover { border-color: #a7f3d0; box-shadow: 0 0 24px 2px rgba(16, 185, 129, 0.10), 0 12px 32px rgba(5, 150, 105, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06); transform: translateY(-4px); } } /* The rule above outranks .nv-lift, so it must repeat its reduced-motion opt-out — colour still answers the pointer, the lift does not. */ @media (prefers-reduced-motion: reduce) { [data-color-scheme="light"] .nv-workflow__steps .nv-card, [data-color-scheme="light"] .nv-problem__grid .nv-card { transition: border-color 250ms ease, box-shadow 250ms ease; } [data-color-scheme="light"] .nv-workflow__steps .nv-card:hover, [data-color-scheme="light"] .nv-problem__grid .nv-card:hover { transform: none; } } /* Light: the sticky bar reads as chrome, not a tinted pane over the hero */ [data-color-scheme="light"] .nv-header { border-block-end-color: var(--nv-header-border); } [data-color-scheme="light"] .nv-section--blue { background-image: radial-gradient(70% 90% at 78% 20%, rgba(43, 110, 198, 0.07) 0%, transparent 64%), linear-gradient( 180deg, var(--nv-bg) 0%, var(--nv-band-blue) 11%, var(--nv-band-blue) 89%, var(--nv-bg) 100% ); } .nv-section--inverse { background-color: var(--nv-ink-900); color: var(--nv-text-on-dark); } .nv-section--hairline::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px; background-image: var(--nv-gradient-line); opacity: 0.35; } .nv-section__head { max-width: 720px; } .nv-section__head--center { margin-inline: auto; text-align: center; } .nv-section__title { margin-block-start: var(--nv-space-4); } .nv-section__lead { margin-block-start: var(--nv-space-5); } .nv-page::after { content: ""; position: fixed; inset: 0; z-index: var(--nv-z-decor); pointer-events: none; opacity: var(--nv-noise-opacity); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } [data-color-scheme="light"] .nv-page::after { opacity: 0.014; mix-blend-mode: multiply; } /* Decorative layer */ .nv-decor { position: absolute; inset: 0; z-index: var(--nv-z-base); overflow: hidden; pointer-events: none; } .nv-decor > * { position: absolute; } .nv-section > .nv-container, .nv-section > .container { position: relative; z-index: var(--nv-z-decor); } .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, /* Bootstrap grid bridge */ .container-xxl { --bs-gutter-x: var(--nv-space-6); padding-inline: var(--nv-container-pad); } /* Responsive: Large desktop */ @media (min-width: 1400px) { .container, .container-xxl { max-width: var(--nv-container-max); } } @media print { .nv-header, .nv-footer, .nv-loader, .nv-cursor, .nv-scroll-top, .nv-decor { display: none !important; } body { color: #000; background: #fff; } } /* Component: button */ .nv-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--nv-btn-gap); min-height: var(--nv-btn-h-md); padding-inline: var(--nv-btn-px-md); font-family: var(--nv-font-body); font-size: var(--nv-btn-font-size); font-weight: var(--nv-btn-font-weight); line-height: 1.2; letter-spacing: var(--nv-ls-snug); white-space: nowrap; text-align: center; border: 1px solid transparent; border-radius: var(--nv-btn-radius); isolation: isolate; transition: transform var(--nv-dur-fast) var(--nv-ease-out), background-color var(--nv-dur-fast) var(--nv-ease-out), border-color var(--nv-dur-fast) var(--nv-ease-out), box-shadow var(--nv-dur-base) var(--nv-ease-out), color var(--nv-dur-fast) var(--nv-ease-out); } .nv-btn:focus-visible { outline: 3px solid var(--nv-focus-ring); outline-offset: 3px; border-radius: var(--nv-btn-radius); } .nv-btn:active { transform: translate3d(0, 1px, 0); transition-duration: 80ms; } .nv-btn[disabled], /* aria-disabled stays focusable, so affordances are suppressed by hand */ .nv-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; filter: saturate(0.6); } .nv-btn[disabled] { pointer-events: none; } .nv-btn[aria-disabled="true"]:hover, .nv-btn[aria-disabled="true"]:active { transform: none; box-shadow: none; } .nv-btn[data-loading="true"] { color: transparent; pointer-events: none; } .nv-btn[data-loading="true"] .nv-btn__icon { opacity: 0; } .nv-btn[data-loading="true"]::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 1.125rem; height: 1.125rem; margin: -0.5625rem 0 0 -0.5625rem; border: 2px solid currentColor; border-block-start-color: var(--nv-btn-primary-fg); border-radius: var(--nv-radius-circle); opacity: 0.9; border-color: rgba(255, 255, 255, 0.32); border-block-start-color: var(--nv-white); animation: nv-spin 720ms linear infinite; } .nv-btn--outline[data-loading="true"]::before, .nv-btn--ghost[data-loading="true"]::before { border-color: var(--nv-border-strong); border-block-start-color: var(--nv-text); } .nv-btn__icon { flex: none; width: var(--nv-icon-md); height: var(--nv-icon-md); transition: transform var(--nv-dur-base) var(--nv-ease-out); } .nv-btn:hover .nv-btn__icon--forward { transform: translate3d(3px, 0, 0); } .nv-btn--primary { color: var(--nv-btn-primary-fg); background-color: var(--nv-btn-primary-bg); box-shadow: var(--nv-shadow-inset-top); } .nv-btn--primary:hover { color: var(--nv-btn-primary-fg); background-color: var(--nv-btn-primary-bg-hover); box-shadow: var(--nv-shadow-brand), var(--nv-shadow-inset-top); } @media (hover: hover) { .nv-btn--primary:hover { transform: translate3d(0, -1px, 0) scale(1.01); } } .nv-btn--primary:active { box-shadow: var(--nv-shadow-inset-top); } .nv-btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; background-image: linear-gradient( 100deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65% ); background-size: 250% 100%; background-position: 150% 0; background-repeat: no-repeat; transition: background-position var(--nv-dur-slower) var(--nv-ease-out); } @media (hover: hover) { .nv-btn--primary:hover::after { background-position: -50% 0; } } .nv-btn--outline { color: var(--nv-text); background-color: transparent; border-color: var(--nv-btn-outline-border); } .nv-btn--outline:hover { color: var(--nv-text); background-color: var(--nv-btn-outline-bg-hover); border-color: var(--nv-btn-outline-border-hover); } /* Hero secondary ("See the Platform"): --nv-btn-outline-border-hover resolves to #2563eb in light theme, which reads as a bright blue ring against the hero. Swap just the border for the brand primary so the hover stays subtle and matches the header's outlined buttons; the fill and every transition are inherited from the rule above. Scoped to the hero so the outlined buttons elsewhere ("Learn more", Sign In, drawer) keep their own hover. */ .nv-hero__actions .nv-btn--outline:hover { border-color: var(--nv-btn-primary-bg); } @media (hover: hover) { .nv-btn--outline:hover { transform: translate3d(0, -1px, 0) scale(1.01); } } .nv-btn--outline-bright { min-height: var(--nv-btn-h-lg); min-width: 119px; padding: var(--nv-btn-bright-py) var(--nv-btn-bright-px); gap: var(--nv-btn-bright-gap); font-size: var(--nv-btn-bright-font-size); font-weight: var(--nv-fw-medium); line-height: 1; letter-spacing: var(--nv-ls-normal); color: var(--nv-btn-bright-fg); border-color: var(--nv-btn-bright-border); border-radius: var(--nv-btn-bright-radius); } .nv-btn--outline-bright:hover { color: var(--nv-white); border-color: var(--nv-btn-bright-border-hover); } .nv-btn--outline-bright:focus-visible { border-radius: var(--nv-btn-bright-radius); } .nv-btn--outline-bright .nv-btn__icon { width: var(--nv-btn-bright-icon-w); height: var(--nv-btn-bright-icon-h); color: var(--nv-btn-bright-icon); } .nv-btn--outline-bright:hover .nv-btn__icon { color: var(--nv-btn-bright-icon); } .nv-btn--ghost { color: var(--nv-header-link); background-color: transparent; } .nv-btn--ghost:hover { color: var(--nv-header-link-hover); background-color: var(--nv-surface-hover); } .nv-btn--sm { min-height: var(--nv-btn-h-sm); padding-inline: var(--nv-btn-px-sm); font-size: var(--nv-fs-xs); } .nv-btn--lg { min-height: var(--nv-btn-h-lg); padding-inline: var(--nv-btn-px-lg); } .nv-btn--block { display: flex; width: 100%; } .nv-btn--icon { padding-inline: 0; aspect-ratio: 1; border-radius: var(--nv-radius-md); } @media (prefers-reduced-motion: reduce) { .nv-btn, .nv-btn:hover, .nv-btn:active { transform: none; } .nv-btn--primary::after { display: none; } .nv-btn[data-loading="true"]::before { animation-duration: 1.6s; } } /* Component: text link button */ .nv-btn-link { display: inline-flex; align-items: center; gap: var(--nv-space-2); font-size: var(--nv-fs-2xs); font-weight: var(--nv-fw-semibold); color: var(--nv-aqua-300); transition: color var(--nv-dur-fast) var(--nv-ease-out); } .nv-btn-link:hover, .nv-btn-link:focus-visible { color: var(--nv-white); } /* Component: badge */ .nv-badge { display: inline-flex; align-items: center; gap: var(--nv-space-2); padding: var(--nv-space-2) var(--nv-space-4) var(--nv-space-2) var(--nv-space-3); font-size: var(--nv-fs-xs); font-weight: var(--nv-fw-medium); line-height: 1.3; letter-spacing: var(--nv-ls-snug); color: var(--nv-text-muted); background-color: var(--nv-surface-fill); border: 1px solid var(--nv-border-strong); border-radius: var(--nv-radius-pill); transition: border-color var(--nv-dur-base) var(--nv-ease-out), color var(--nv-dur-base) var(--nv-ease-out); } /* Opaque fallback below — not every engine can blur */ @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .nv-badge { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } } a.nv-badge:hover, button.nv-badge:hover { color: var(--nv-text); border-color: var(--nv-btn-outline-border); } .nv-badge__icon { flex: none; width: var(--nv-icon-sm); height: var(--nv-icon-sm); color: var(--nv-aqua-300); } .nv-badge__dot { flex: none; width: 6px; height: 6px; border-radius: var(--nv-radius-circle); background-color: var(--nv-success-500); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.20); } .nv-badge--brand { color: var(--nv-brand-700); background-color: var(--nv-brand-50); border-color: var(--nv-brand-100); } /* Component: card */ .nv-card { position: relative; display: flex; flex-direction: column; gap: var(--nv-space-4); padding: var(--nv-card-pad); background-color: var(--nv-card-bg); background-image: var(--nv-card-bg-image, none); border: 1px solid var(--nv-card-border); border-radius: var(--nv-card-radius); transition: background-color var(--nv-dur-base) var(--nv-ease-out), border-color var(--nv-dur-base) var(--nv-ease-out), transform var(--nv-dur-base) var(--nv-ease-out), box-shadow var(--nv-dur-base) var(--nv-ease-out); } .nv-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 12%; height: 1px; pointer-events: none; background-image: linear-gradient(90deg, transparent, var(--nv-alpha-14), transparent); opacity: 0; transition: opacity var(--nv-dur-base) var(--nv-ease-out); } @media (hover: hover) { .nv-card:hover::before { opacity: 1; } } @media (hover: hover) { .nv-card:not(.nv-card--plain):hover { background-color: var(--nv-card-bg-hover); border-color: var(--nv-card-border-hover); box-shadow: var(--nv-glow-card); } } .nv-card:not(.nv-card--plain):focus-within { background-color: var(--nv-card-bg-hover); border-color: var(--nv-card-border-hover); box-shadow: var(--nv-glow-card); } .nv-card__title { font-family: var(--nv-font-display); font-size: var(--nv-fs-h4); font-weight: var(--nv-fw-semibold); line-height: 1.35; letter-spacing: var(--nv-ls-snug); color: var(--nv-text); } .nv-card__text { font-size: var(--nv-fs-xs); line-height: var(--nv-lh-relaxed); color: var(--nv-text-muted); } .nv-card__foot { margin-block-start: auto; padding-block-start: var(--nv-space-2); } .nv-card__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 9px; color: var(--nv-white); background-color: var(--nv-accent-green); border: 1px solid transparent; border-radius: var(--nv-radius-sm); transition: transform var(--nv-dur-base) var(--nv-ease-spring), background-color var(--nv-dur-base) var(--nv-ease-out); } @media (hover: hover) { .nv-card:hover .nv-card__icon { transform: scale(1.08); filter: brightness(1.14); } } .nv-card__seq { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 6.99px; font-family: var(--nv-font-display); font-size: 18px; font-weight: var(--nv-fw-semibold); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: 0; color: var(--nv-seq-fg); background-color: var(--nv-seq-1); border: 0; border-radius: 5.24px; box-shadow: none; transition: transform var(--nv-dur-base) var(--nv-ease-spring); } .nv-card__seq--2 { background-color: var(--nv-seq-2); } .nv-card__seq--3 { background-color: var(--nv-seq-3); } .nv-card__seq--4 { background-color: var(--nv-seq-4); } @media (hover: hover) { .nv-card:hover .nv-card__seq { transform: scale(1.1) rotate(-4deg); } } .nv-card--flush { padding: 0; } .nv-card--blue { background-color: var(--nv-card-blue-bg); border-color: var(--nv-card-blue-border); } @media (hover: hover) { .nv-card--blue:not(.nv-card--plain):hover { background-color: var(--nv-card-blue-bg-hover); border-color: var(--nv-card-blue-border-hover); } } .nv-card--gradient-edge::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background-image: var(--nv-gradient-brand); opacity: 0; transition: opacity var(--nv-dur-base) var(--nv-ease-out); } .nv-card--gradient-edge { isolation: isolate; } @media (hover: hover) { .nv-card--gradient-edge:hover::after { opacity: 0.55; } } .nv-card--gradient-edge:focus-within::after { opacity: 0.55; } @media (prefers-reduced-motion: reduce) { .nv-card, .nv-card__icon, .nv-card__seq { transition: none; transform: none; } } /* Component: section header */ .nv-sectionhead { display: flex; flex-direction: column; align-items: flex-start; max-width: 46rem; } .nv-sectionhead__eyebrow { color: var(--nv-aqua-300); } .nv-sectionhead__title { margin-block-start: 1.125rem; font-size: var(--nv-fs-h2); font-weight: var(--nv-fw-bold); line-height: var(--nv-lh-snug); letter-spacing: var(--nv-ls-tight); color: var(--nv-text); } .nv-sectionhead__lead { margin-block-start: var(--nv-space-3); max-width: 40rem; font-size: var(--nv-fs-xs); line-height: 1.55; color: var(--nv-text-muted); } .nv-sectionhead--center { align-items: center; margin-inline: auto; text-align: center; } .nv-sectionhead--wide { max-width: 56rem; } /* Component: check list */ .nv-checklist { display: grid; gap: var(--nv-space-3); } .nv-checklist--two-col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); column-gap: var(--nv-space-6); } .nv-checklist__item { display: flex; align-items: flex-start; gap: var(--nv-space-3); font-size: var(--nv-fs-2xs); line-height: 1.55; color: var(--nv-text-muted); } .nv-checklist__icon { flex: none; width: var(--nv-icon-sm); height: var(--nv-icon-sm); margin-block-start: 1px; color: var(--nv-aqua-300); } /* Component: dot list */ .nv-dotlist { display: flex; flex-wrap: wrap; gap: var(--nv-space-3) var(--nv-space-5); } .nv-dotlist__item { display: flex; align-items: center; gap: var(--nv-space-2); font-size: var(--nv-fs-2xs); font-weight: var(--nv-fw-medium); color: var(--nv-text-subtle); transition: color var(--nv-dur-fast) var(--nv-ease-out); } .nv-dotlist__item::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: var(--nv-radius-circle); background-color: currentColor; opacity: 0.75; transition: opacity var(--nv-dur-fast) var(--nv-ease-out), transform var(--nv-dur-base) var(--nv-ease-spring); } @media (hover: hover) { .nv-dotlist__item:hover { color: var(--nv-text); } .nv-dotlist__item:hover::before { opacity: 1; transform: scale(1.4); } } @media (prefers-reduced-motion: reduce) { .nv-dotlist__item::before { transition: none; } } /* Component: loader */ /* Never shown without JS — nothing would dismiss it */ .no-js .nv-loader { display: none; } .nv-loader { position: fixed; inset: 0; z-index: var(--nv-z-loader); display: grid; place-content: center; justify-items: center; gap: var(--nv-space-6); background-color: var(--nv-loader-bg); transition: opacity var(--nv-dur-slow) var(--nv-ease-out), visibility 0s linear var(--nv-dur-slow); } .nv-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .nv-loader__mark { display: grid; place-items: center; animation: nv-loader-pulse 1.8s var(--nv-ease-in-out) infinite; } .nv-loader__mark img { width: 32px; height: 36px; } @keyframes nv-loader-pulse { 0%, 100% { opacity: 0.55; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1); } } .nv-loader__bar { width: 140px; height: 2px; border-radius: var(--nv-radius-pill); background-color: var(--nv-track-bg); overflow: hidden; } .nv-loader__progress { display: block; height: 100%; border-radius: inherit; background-image: var(--nv-gradient-brand); transform: scaleX(var(--nv-progress, 0)); transform-origin: left center; transition: transform var(--nv-dur-base) var(--nv-ease-out); } @media (prefers-reduced-motion: reduce) { .nv-loader__mark { animation: none; opacity: 1; } } /* Component: back to top */ .nv-scroll-top { position: fixed; inset-block-end: var(--nv-space-6); inset-inline-end: var(--nv-space-6); z-index: var(--nv-z-sticky); display: grid; place-items: center; width: 44px; height: 44px; color: var(--nv-white); background-color: var(--nv-btn-primary-bg); border-radius: var(--nv-radius-md); box-shadow: var(--nv-shadow-brand); opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0); transition: opacity var(--nv-dur-base) var(--nv-ease-out), transform var(--nv-dur-base) var(--nv-ease-out), background-color var(--nv-dur-fast) var(--nv-ease-out), visibility 0s linear var(--nv-dur-base); } .nv-scroll-top.is-visible { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); transition-delay: 0s; } .nv-scroll-top:hover { background-color: var(--nv-btn-primary-bg-hover); box-shadow: var(--nv-shadow-brand-hover); } .nv-scroll-top svg { width: var(--nv-icon-lg); height: var(--nv-icon-lg); } /* Responsive: Mobile */ @media (max-width: 575.98px) { .nv-scroll-top { inset-block-end: var(--nv-space-4); inset-inline-end: var(--nv-space-4); } } @media (prefers-reduced-motion: reduce) { .nv-scroll-top { transition: opacity var(--nv-dur-fast) linear, visibility 0s; transform: none; } .nv-scroll-top.is-visible { transform: none; } } /* Navbar: bar */ .nv-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--nv-z-header); height: var(--nv-header-h); display: flex; align-items: center; background-color: var(--nv-header-surface); border-block-end: 1px solid transparent; box-shadow: none; transition: height var(--nv-dur-base) var(--nv-ease-out), background-color var(--nv-dur-base) var(--nv-ease-out), border-color var(--nv-dur-base) var(--nv-ease-out), box-shadow var(--nv-dur-base) var(--nv-ease-out); } .nv-header.is-scrolled { height: var(--nv-header-h-scrolled); background-color: var(--nv-header-bg-solid); border-block-end-color: var(--nv-header-border); box-shadow: var(--nv-header-shadow); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .nv-header.is-scrolled { background-color: var(--nv-header-bg); -webkit-backdrop-filter: blur(20px) saturate(190%); backdrop-filter: blur(20px) saturate(190%); } } .nv-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--nv-space-6); width: 100%; max-width: var(--nv-container-max); margin-inline: auto; padding-inline: var(--nv-container-pad); } /* Navbar: brand */ .nv-header__brand { display: inline-flex; align-items: center; flex: none; border-radius: var(--nv-radius-sm); transition: opacity var(--nv-dur-fast) var(--nv-ease-out); } .nv-header__brand:hover { opacity: 0.85; } .nv-header__brand { display: inline-grid; } .nv-header__logo { grid-area: 1 / 1; width: 126px; height: 36px; transition: opacity var(--nv-dur-base) var(--nv-ease-soft); } .nv-header__logo--light { opacity: 0; } [data-color-scheme="light"] .nv-header__logo--dark { opacity: 0; } [data-color-scheme="light"] .nv-header__logo--light { opacity: 1; } .nv-header__nav { display: flex; justify-content: center; } /* Navbar: navigation */ .nv-nav { display: flex; align-items: center; gap: var(--nv-space-10); } .nv-nav__link { position: relative; display: inline-block; padding-block: var(--nv-space-2); font-size: var(--nv-fs-sm); font-weight: var(--nv-fw-medium); color: var(--nv-header-link); letter-spacing: var(--nv-ls-snug); transition: color var(--nv-dur-fast) var(--nv-ease-out); } .nv-nav__link:hover, .nv-nav__link:focus-visible { color: var(--nv-header-link-hover); } .nv-nav__link::after { content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; height: 2px; border-radius: var(--nv-radius-pill); background-image: var(--nv-gradient-heading); transform: scaleX(0); transform-origin: right center; transition: transform var(--nv-dur-base) var(--nv-ease-out); } .nv-nav__link:hover::after, .nv-nav__link:focus-visible::after, .nv-nav__link.is-active::after { transform: scaleX(1); transform-origin: left center; } .nv-nav__link.is-active { color: var(--nv-header-link-hover); } /* Navbar: actions */ .nv-header__actions { display: flex; align-items: center; gap: var(--nv-space-3); flex: none; } .nv-header__cta { min-height: 40px; white-space: nowrap; } @media (max-width: 1199.98px) and (min-width: 992px) { .nv-header__cta { font-size: 0.72rem; padding-inline: 0.8rem; } } .nv-header__signin { height: 38px; min-height: 0; gap: 8px; padding-inline: 16px; /* Same token .nv-btn--outline uses, so this matches "See the Platform" exactly: rgba(255,255,255,0.34) on dark, #d0d5dd on light */ border: 1px solid var(--nv-btn-outline-border); border-radius: 6px; color: var(--nv-text); background-color: transparent; } @media (hover: hover) { .nv-header__signin:hover { background-color: var(--nv-surface-hover); border-color: var(--nv-btn-primary-bg); color: var(--nv-text); box-shadow: var(--nv-shadow-xs); } } /* Navbar: theme toggle */ .nv-theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; flex: none; color: var(--nv-header-link); border-radius: var(--nv-radius-md); transition: color var(--nv-dur-fast) var(--nv-ease-out), background-color var(--nv-dur-fast) var(--nv-ease-out); } .nv-theme-toggle:hover { color: var(--nv-header-link-hover); background-color: var(--nv-surface-hover); } .nv-theme-toggle__track { position: relative; display: grid; place-items: center; width: var(--nv-icon-xl); height: var(--nv-icon-xl); } .nv-theme-toggle__icon { grid-area: 1 / 1; width: var(--nv-icon-lg); height: var(--nv-icon-lg); transition: opacity var(--nv-dur-base) var(--nv-ease-out), transform var(--nv-dur-base) var(--nv-ease-spring); } .nv-theme-toggle__icon--sun { opacity: 1; transform: rotate(0deg) scale(1); } .nv-theme-toggle__icon--moon { opacity: 0; transform: rotate(-70deg) scale(0.6); } [data-color-scheme="light"] .nv-theme-toggle__icon--sun { opacity: 0; transform: rotate(70deg) scale(0.6); } [data-color-scheme="light"] .nv-theme-toggle__icon--moon { opacity: 1; transform: rotate(0deg) scale(1); } /* Navbar: hamburger */ .nv-burger { display: none; position: relative; width: 44px; height: 44px; flex: none; color: var(--nv-header-link-hover); border-radius: var(--nv-radius-md); } .nv-burger:hover { background-color: var(--nv-surface-hover); } .nv-burger__bar { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; width: 20px; height: 2px; margin-inline-start: -10px; border-radius: var(--nv-radius-pill); background-color: currentColor; transition: transform var(--nv-dur-base) var(--nv-ease-out), opacity var(--nv-dur-fast) var(--nv-ease-out); } .nv-burger__bar:nth-child(1) { transform: translate3d(0, -7px, 0); } .nv-burger__bar:nth-child(2) { transform: translate3d(0, -1px, 0); } .nv-burger__bar:nth-child(3) { transform: translate3d(0, 5px, 0); } .nv-burger[aria-expanded="true"] .nv-burger__bar:nth-child(1) { transform: translate3d(0, -1px, 0) rotate(45deg); } .nv-burger[aria-expanded="true"] .nv-burger__bar:nth-child(2) { opacity: 0; transform: translate3d(0, -1px, 0) scaleX(0.3); } .nv-burger[aria-expanded="true"] .nv-burger__bar:nth-child(3) { transform: translate3d(0, -1px, 0) rotate(-45deg); } /* Navbar: mobile drawer */ .nv-drawer { position: fixed; inset: 0; z-index: var(--nv-z-drawer); visibility: hidden; pointer-events: none; } .nv-drawer.is-open { visibility: visible; pointer-events: auto; } .nv-drawer__scrim { position: absolute; inset: 0; background-color: var(--nv-scrim); opacity: 0; transition: opacity var(--nv-dur-base) var(--nv-ease-out); } .nv-drawer.is-open .nv-drawer__scrim { opacity: 1; } .nv-drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(380px, 86vw); /* Three parts stacked: head, nav, actions. The panel itself never scrolls — only the nav does, so the action group stays put as items are added */ display: flex; flex-direction: column; overflow: hidden; background-color: var(--nv-drawer-bg); border-inline-start: 1px solid var(--nv-border-soft); transform: translate3d(100%, 0, 0); transition: transform var(--nv-dur-slow) var(--nv-ease-out); } .nv-drawer.is-open .nv-drawer__panel { transform: translate3d(0, 0, 0); } /* Every section shares one gutter, so the logo, the links and the buttons all line up on the same two vertical edges */ .nv-drawer__head, .nv-drawer__nav, .nv-drawer__actions { padding-inline: var(--nv-space-6); } .nv-drawer__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--nv-space-4); min-height: var(--nv-header-h); padding-block: var(--nv-space-4); border-block-end: 1px solid var(--nv-border-soft); } /* Same two-image crossfade the header brand uses, so the drawer logo follows [data-color-scheme] on the instant the toggle flips it */ .nv-drawer__brand { display: inline-grid; flex: none; } .nv-drawer__logo { grid-area: 1 / 1; width: 112px; height: 32px; transition: opacity var(--nv-dur-base) var(--nv-ease-soft); } .nv-drawer__logo--light { opacity: 0; } [data-color-scheme="light"] .nv-drawer__logo--dark { opacity: 0; } [data-color-scheme="light"] .nv-drawer__logo--light { opacity: 1; } .nv-drawer__close { display: grid; place-items: center; width: 44px; height: 44px; color: var(--nv-text); border-radius: var(--nv-radius-md); background-color: var(--nv-surface-fill); transition: background-color var(--nv-dur-fast) var(--nv-ease-out); } .nv-drawer__close:hover { background-color: var(--nv-surface-hover-strong); } .nv-drawer__close svg { width: var(--nv-icon-lg); height: var(--nv-icon-lg); } /* Only this region scrolls; it shrinks to its content, so the action group below it sits directly under the last link rather than at the panel foot */ .nv-drawer__nav { flex: 0 1 auto; min-height: 0; padding-block-start: var(--nv-space-5); overflow-y: auto; overscroll-behavior: contain; } .nv-drawer__list { display: flex; flex-direction: column; gap: var(--nv-space-1); } .nv-drawer__link { position: relative; display: flex; align-items: center; min-height: 52px; padding-inline: var(--nv-space-3); border-radius: var(--nv-radius-lg); font-family: var(--nv-font-display); font-size: var(--nv-fs-h4); font-weight: var(--nv-fw-semibold); letter-spacing: var(--nv-ls-snug); color: var(--nv-text); transition: color var(--nv-dur-fast) var(--nv-ease-out), background-color var(--nv-dur-fast) var(--nv-ease-out), transform var(--nv-dur-fast) var(--nv-ease-out); } /* The accent bar reads as the selection marker; it grows from the link's vertical centre so hover feels like a slide-in rather than a repaint */ .nv-drawer__link::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 50%; width: 2px; border-radius: var(--nv-radius-pill); background-color: var(--nv-aqua-300); opacity: 0; transition: inset-block var(--nv-dur-base) var(--nv-ease-out), opacity var(--nv-dur-fast) var(--nv-ease-out); } .nv-drawer__link:hover, .nv-drawer__link:focus-visible, .nv-drawer__link[aria-current="page"] { color: var(--nv-aqua-300); background-color: var(--nv-surface-hover); } .nv-drawer__link:hover::before, .nv-drawer__link:focus-visible::before, .nv-drawer__link[aria-current="page"]::before { inset-block: 25%; opacity: 1; } .nv-drawer__link:focus-visible { outline: 2px solid var(--nv-focus-ring); outline-offset: 2px; } .nv-drawer__link:active { background-color: var(--nv-surface-hover-strong); transform: scale(0.99); } /* Sign In and the walkthrough CTA travel together, evenly spaced, one rhythm step below the nav — never pinned to the foot of the panel */ .nv-drawer__actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--nv-space-3); padding-block: var(--nv-space-5) calc(var(--nv-space-8) + env(safe-area-inset-bottom, 0px)); } /* Responsive: Tablet */ @media (max-width: 991.98px) { /* Sign In leaves the bar with the nav and the CTA — the drawer carries its own copy, so nothing is lost */ .nv-header__nav, .nv-header__cta, .nv-header__signin { display: none; } .nv-burger { display: grid; place-items: center; } .nv-header__inner { padding-inline: var(--nv-container-pad); } } /* Sticky demo CTA A separate element from .nv-header__cta, and a direct child of on purpose: .nv-header.is-scrolled carries a backdrop-filter, and a backdrop-filter ancestor becomes the containing block for its fixed descendants — a copy inside the header would pin itself to the header the moment the page scrolled, instead of to the viewport. Hidden by default so it costs nothing above the breakpoint. */ .nv-sticky-cta { display: none; } @media (max-width: 768.98px) { :root { /* The bar's full footprint, including the home-indicator inset */ --nv-sticky-cta-space: calc(var(--nv-btn-h-lg) + env(safe-area-inset-bottom, 0px)); } .nv-sticky-cta { display: inline-flex; position: fixed; /* Both insets with width auto is what stretches it edge to edge */ inset-inline: 0; inset-block-end: 0; z-index: var(--nv-z-sticky); /* Edge to edge: no gutter, no rounding, flush with the viewport bottom */ border-radius: 0; min-height: var(--nv-btn-h-lg); /* The fill still reaches the very bottom; this keeps the label clear of the home indicator on notched phones (the pages set viewport-fit=cover) */ padding-block-end: env(safe-area-inset-bottom, 0px); /* Upward spread lifts the bar off whatever scrolls under it */ box-shadow: 0 -10px 28px -8px rgba(4, 8, 14, 0.55); } /* The same lift, dialled back for a light ground */ [data-color-scheme="light"] .nv-sticky-cta { box-shadow: 0 -10px 28px -8px rgba(16, 24, 40, 0.20); } /* Back-to-top is fixed at bottom right and would sit on top of the bar */ .nv-scroll-top { inset-block-end: calc(var(--nv-sticky-cta-space) + var(--nv-space-4)); } /* A fixed bar covers whatever is under it for good, and the last thing on every page is the footer's legal row — this clears it. Set on the shell rather than on .nv-footer: the footer's own rule uses the padding-block shorthand and lives further down the sheet, so a padding-block-end here would be re-set by it at equal specificity and the legal row would stay hidden. Feeding the variable can't lose that race. */ .nv-page { --nv-footer-pad-bottom: calc(var(--nv-space-8) + var(--nv-sticky-cta-space)); } } /* Responsive: Mobile */ @media (max-width: 575.98px) { .nv-header__logo { width: 108px; height: 31px; } .nv-drawer__panel { width: min(340px, 92vw); } } /* Responsive: small phone — the panel takes the whole screen, so the sliver of scrim on the left and the edge rule that drew it are both gone */ @media (max-width: 425.98px) { .nv-drawer__panel { width: 100vw; max-width: 100%; inset-inline: 0; border-inline-start: 0; } } /* Responsive: very narrow phone Logo, theme toggle and burger share the bar, and at the ≤575.98px sizes the gaps and gutters around them leave the burger short of room. Every reduction here is horizontal; the two controls stay 40×40, so neither loses its tap target. */ @media (max-width: 341.98px) { .nv-header__inner { /* The bar buys its own gutter — the page-wide token stays at 1.25rem so no section below the header reflows */ padding-inline: var(--nv-space-4); gap: var(--nv-space-3); } .nv-header__logo { /* 3.5:1, the same ratio as every other size of the mark */ width: 100px; height: 29px; } .nv-header__actions { gap: var(--nv-space-2); } .nv-burger { /* 44 → 40, the floor rather than below it */ width: 40px; height: 40px; } .nv-burger__bar { width: 18px; margin-inline-start: -9px; } } /* Responsive: Landscape phone */ @media (max-height: 520px) and (orientation: landscape) { .nv-drawer__head { min-height: 0; padding-block: var(--nv-space-3); } .nv-drawer__nav { padding-block-start: var(--nv-space-3); } .nv-drawer__actions { padding-block: var(--nv-space-3) calc(var(--nv-space-4) + env(safe-area-inset-bottom, 0px)); } .nv-drawer__link { min-height: 42px; font-size: var(--nv-fs-body); } } @media (prefers-reduced-motion: reduce) { .nv-header, .nv-header__logo, .nv-drawer__logo, .nv-drawer__panel, .nv-drawer__link, .nv-drawer__link::before, .nv-theme-toggle__icon { transition: none; } .nv-drawer__link:active { transform: none; } .nv-drawer__panel { transition: transform 1ms linear; } } /* Footer: layout */ .nv-footer { position: relative; z-index: 1; /* Both values come from the .nv-page--footer-* modifier on ; the footer holds no layout opinion of its own */ margin-block-start: calc(var(--nv-footer-overlap) * -1); padding-block: var(--nv-footer-pad-top) var(--nv-footer-pad-bottom); background-color: var(--nv-footer-bg); background-image: linear-gradient(0deg, var(--nv-footer-bg-alt) -60.53%, var(--nv-footer-bg) 157.74%); } .nv-footer__grid { /* Sized so the 131-character blurb wraps to exactly two lines at --nv-fs-xs (16px). It caps .nv-footer__blurb and sizes this column's track, so both stay in step. */ --nv-footer-brand-w: 36rem; display: grid; /* Brand far left, Product centred, Contact to its right. The 1fr sits on the middle track so the slack lands between Product and Contact. */ grid-template-columns: var(--nv-footer-brand-w) minmax(0, 1fr) max-content; gap: var(--nv-space-6); } /* The only