/* ============================================================ NIGHTOWL marketing site — dark "ops dashboard" theme, matches the desktop panel's own palette (see panel.py's C dict). ============================================================ */ :root { --bg: #0a0a0c; --bg-alt: #0d0d10; --card: #141416; --card-alt: #1b1b1e; --card-hover: #1a1a1d; --border: #232327; --border-hover: #333338; --text: #e8e8ea; --muted: #8b8b93; --muted-dim: #5c5c63; --accent: #ff3b3b; --accent-hover: #e02d2d; --accent-glow: rgba(255, 59, 59, 0.35); --green: #22c55e; --amber: #eab308; --red: #ef4444; --mono: 'JetBrains Mono', 'Consolas', monospace; --sans: 'Space Grotesk', 'Segoe UI', sans-serif; --radius: 14px; --radius-sm: 9px; --maxw: 1180px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent-glow); color: #fff; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); } a { color: inherit; text-decoration: none; } /* ---------- custom icon set (replaces emoji everywhere on the site - see icon-sprite.txt, inlined near the top of on every page) ---------- */ .icon { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; flex-shrink: 0; } .owl-icon { display: block; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } /* ---------- background ambience ---------- */ .bg-glow { position: fixed; inset: 0; z-index: -2; background: radial-gradient(650px circle at 15% 8%, rgba(255, 59, 59, 0.12), transparent 60%), radial-gradient(500px circle at 85% 18%, rgba(234, 179, 8, 0.06), transparent 55%), radial-gradient(800px circle at 50% 100%, rgba(255, 59, 59, 0.05), transparent 60%); pointer-events: none; } .bg-grid { position: fixed; inset: 0; z-index: -3; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%); } .noise { position: fixed; inset: 0; z-index: -1; opacity: 0.025; pointer-events: none; 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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- nav ---------- */ /* Scoped to #nav (index.html's marketing navbar) specifically, not a bare `nav` element selector - dashboard.html's sidebar is also a