/* Font: TWK Everett — loaded via BlueVoyant CDN in each HTML file's . Fallback: Arial, sans-serif. CDN URL pattern: https://www.bluevoyant.com/fonts/TWKEverett-*.woff2 At build time, replace with actual CDN URLs if available; Arial fallback renders correctly. */ /* ── Design tokens ──────────────────────────────────── */ :root { --carbon: #0D0D0D; --carbon-light: #141420; --carbon-border: #252535; --cobalt: #0659FF; --mint: #8DEDC7; --prism-violet: #8B5CF6; --prism-cyan: #22D3EE; --danger: #f87171; --station-1: #8B5CF6; --station-2: #5b6ef5; --station-3: #0659FF; --station-4: #0da882; --station-5: #8DEDC7; --spectral-gradient: linear-gradient( to right, transparent, rgba(139,92,246,0.5) 20%, rgba(6,89,255,0.9) 50%, rgba(34,211,238,0.5) 80%, transparent ); --dot-grid: radial-gradient(circle, rgba(99,102,241,0.055) 1px, transparent 1px); --cta-glow: 0 0 12px rgba(139,92,246,0.35), 0 0 28px rgba(6,89,255,0.5), 0 0 56px rgba(34,211,238,0.1); --text: #e2e2f0; } /* ── Reset ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'TWK Everett', Arial, sans-serif; background: var(--carbon); color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ── Typography helpers ─────────────────────────────── */ .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--prism-cyan); } .section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(226,226,240,0.4); margin-bottom: 24px; } .mono { font-family: 'Courier New', Courier, monospace; } /* ── Dot grid background ────────────────────────────── */ .dot-grid { background-image: var(--dot-grid); background-size: 28px 28px; } /* ── Spectral divider line ──────────────────────────── */ .spectral-line { height: 1px; background: var(--spectral-gradient); border: none; width: 100%; } /* ── Buttons ────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: none; border-radius: 0; transition: opacity 0.2s, box-shadow 0.2s; font-family: inherit; } .btn-primary { background: var(--cobalt); color: #fff; box-shadow: var(--cta-glow); } .btn-primary:hover { opacity: 0.9; } .btn:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--carbon-border); } .btn-ghost:hover { border-color: rgba(226,226,240,0.5); } .btn-outline-mint { background: transparent; color: var(--mint); border: 1px solid var(--mint); } .btn-outline-mint:hover { opacity: 0.75; } /* ── Nav ────────────────────────────────────────────── */ .site-nav { position: sticky; top: 0; z-index: 100; background: #000; height: 52px; display: flex; align-items: center; padding: 0 48px; gap: 40px; border-bottom: 1px solid transparent; } .site-nav::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--spectral-gradient); } .site-nav .nav-logo { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-right: auto; display: flex; align-items: center; gap: 8px; } .nav-logo-img { height: 24px; width: auto; } .site-nav .nav-link { font-size: 13px; color: rgba(226,226,240,0.65); transition: color 0.2s; } .site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--text); } .site-nav .nav-cta { background: var(--cobalt); color: #fff; padding: 7px 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: none; cursor: pointer; font-family: inherit; display: inline-block; transition: opacity 0.2s; } .site-nav .nav-cta:hover { opacity: 0.85; } /* ── Footer ─────────────────────────────────────────── */ .site-footer { background: #000; padding: 32px 48px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--carbon-border); } .footer-brand { height: 18px; width: auto; opacity: 0.3; } .footer-links { display: flex; gap: 32px; } .footer-links a { font-size: 12px; color: rgba(226,226,240,0.3); transition: color 0.2s; } .footer-links a:hover { color: rgba(226,226,240,0.7); } /* ── Section wrapper ────────────────────────────────── */ .section { padding: 96px 48px; max-width: 1200px; margin: 0 auto; } .section-full { padding: 96px 48px; width: 100%; } .section-full > .section-inner { max-width: 1200px; margin: 0 auto; } /* ── Cards ──────────────────────────────────────────── */ .card { background: var(--carbon-light); border: 1px solid var(--carbon-border); padding: 32px; position: relative; overflow: hidden; } .card-glass-top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); } /* ── Final CTA block ────────────────────────────────── */ .final-cta-block { background: #000; padding: 96px 48px; text-align: center; position: relative; } .final-cta-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--spectral-gradient); } .final-cta-block h2 { font-size: 48px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; } .final-cta-block p { font-size: 18px; color: rgba(226,226,240,0.55); margin-bottom: 40px; } /* ── Theme toggle button ─────────────────────────────── */ .theme-toggle { background: none; border: 1px solid var(--carbon-border); color: rgba(226,226,240,0.45); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; flex-shrink: 0; transition: border-color 0.2s, color 0.2s; line-height: 1; } .theme-toggle:hover { border-color: rgba(226,226,240,0.35); color: var(--text); } .theme-toggle::before { content: '☀'; } html.light .theme-toggle { border-color: rgba(26,26,60,0.15); color: rgba(26,26,46,0.45); } html.light .theme-toggle:hover { border-color: rgba(26,26,60,0.35); color: #1a1a2e; } html.light .theme-toggle::before { content: '☾'; } /* ── Light mode ─────────────────────────────────────── */ html.light { --carbon: #F0F0F8; --carbon-light: #FFFFFF; --carbon-border: rgba(26,26,60,0.1); --text: #1A1A2E; --mint: #0A9268; --prism-cyan: #0369A1; --danger: #DC2626; --dot-grid: radial-gradient(circle, rgba(99,102,241,0.12) 1px, transparent 1px); --cta-glow: 0 0 12px rgba(139,92,246,0.15), 0 0 28px rgba(6,89,255,0.25), 0 0 40px rgba(34,211,238,0.05); } /* Nav */ html.light .site-nav { background: #fff; box-shadow: 0 1px 0 rgba(26,26,60,0.08); } html.light .nav-logo-img { filter: brightness(0); } html.light .site-nav .nav-link { color: rgba(26,26,46,0.6); } html.light .site-nav .nav-link:hover, html.light .site-nav .nav-link.active { color: #1a1a2e; } /* Footer */ html.light .site-footer { background: #f8f8fc; border-top-color: rgba(26,26,60,0.08); } html.light .footer-brand { filter: brightness(0); opacity: 0.2; } html.light .footer-links a { color: rgba(26,26,46,0.35); } html.light .footer-links a:hover { color: rgba(26,26,46,0.7); } /* Global helpers */ html.light .section-label { color: rgba(26,26,46,0.4); } html.light .spectral-line { opacity: 0.35; } html.light .btn-ghost { color: #1a1a2e; border-color: rgba(26,26,60,0.15); } html.light .btn-ghost:hover { border-color: rgba(26,26,60,0.35); } /* Final CTA */ html.light .final-cta-block { background: #e8e8f4; } html.light .final-cta-block::before { opacity: 0.4; } html.light .final-cta-block p { color: rgba(26,26,46,0.55); } /* Cards */ html.light .card { background: #fff; border-color: rgba(26,26,60,0.1); } /* ── Mobile (≤767px) ─────────────────────────────── */ @media (max-width: 767px) { .site-nav { padding: 0 20px; gap: 0; } .site-nav .nav-link { display: none; } .site-nav .nav-cta { margin-left: auto; } .section, .section-full { padding: 56px 20px; } .final-cta-block { padding: 64px 20px; } .final-cta-block h2 { font-size: 32px; } .final-cta-block p { font-size: 16px; } .site-footer { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 20px; } .footer-links { flex-wrap: wrap; gap: 16px; } }