/* ============================================================================ nekotopia-theme.css — THE canonical site-wide design language. "Cyan instrumental": cyan (#0ef) primary accent + emerald (#10b981) secondary, Instrument Sans for UI/body, monospace for labels/meta, on near-black surfaces. Lifted from index.html (the reference home page) and promoted to a single source of truth so every page shares one look. (Closes THEME-1.) HOW IT WORKS — two mechanisms: 1. It REDEFINES the CSS custom properties that professional-theme.css drives everything through (--accent-primary, --font-family, --phosphor, …). Any page that loads professional-theme.css and then THIS file re-skins from the old green-terminal palette to cyan/instrumental automatically. 2. It exposes canonical --nk-* tokens + a few base component classes for the bespoke pages (index, dashboards, the former sand pages) to consume. LOAD ORDER: this file must be the LAST stylesheet in , after professional-theme.css (and any other site CSS), so its var overrides win. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap'); :root { /* ---- Canonical palette (the single source of truth) ---- */ --nk-cyan: #0ef; --nk-cyan-bright: #5ff; --nk-cyan-glow: rgba(0, 238, 255, 0.25); --nk-emerald: #10b981; --nk-emerald-glow: rgba(16, 185, 129, 0.55); --nk-amber: #f59e0b; /* reserved status / warnings only */ --nk-bg: #0a0a0a; --nk-surface: #0f0f10; --nk-surface-2: #0c0c0d; --nk-hover: #131314; --nk-border: #27272a; --nk-border-subtle: #1f1f23; --nk-text: #fafafa; --nk-text-2: #e0e0e0; --nk-text-3: #b8b8b8; --nk-muted: #a1a1aa; --nk-faint: #71717a; --nk-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --nk-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; --nk-radius: 4px; --nk-radius-sm: 2px; /* ---- Override professional-theme.css tokens (green-terminal → cyan instrumental) ---- */ --accent-primary: var(--nk-cyan); --phosphor: var(--nk-cyan); --phosphor-dim: var(--nk-emerald); --phosphor-glow: rgba(0, 238, 255, 0.08); --success: var(--nk-emerald); --success-light: #0a1a16; --font-family: var(--nk-sans); --font-family-mono: var(--nk-mono); } /* Public marketing pages lean on professional-theme's duller gray scale (--gray-300 #999 / --gray-400 #777 / --gray-500 #666 / --white #eee) for body text, which reads washed-out next to the home page's brighter canonical palette. Remap those tokens to the canonical scale — but ONLY on public pages. The two dashboards carry `body.kernel-theme.operator-theme` and have their own industrial gray palette (operator-grade.css / dashboard-industrial.css), so exclude them. */ body:not(.kernel-theme):not(.operator-theme) { --white: #fafafa; --text-primary: #e8e4df; --gray-300: #b8b8b8; --gray-400: #a1a1aa; --gray-500: #71717a; --gray-600: #5a5a62; } /* ============================================================================ Base — applies on top of professional-theme.css / page resets. ============================================================================ */ body { font-family: var(--nk-sans); background: var(--nk-bg); color: var(--nk-text-3); } /* Soft cyan glow, the home-page recipe, behind page content. */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 50% at 50% -5%, rgba(0,238,255,0.06), transparent 70%), radial-gradient(ellipse 60% 40% at 50% 105%, rgba(16,185,129,0.05), transparent 70%); } h1, h2, h3, h4, h5, h6 { font-family: var(--nk-sans); color: var(--nk-text); letter-spacing: -0.015em; } a { color: var(--nk-cyan); } a:hover { color: var(--nk-cyan-bright); } /* Monospace eyebrows / labels / meta — the "instrumental" tell. */ .nk-eyebrow, .eyebrow { font-family: var(--nk-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nk-faint); } /* ============================================================================ Canonical components — opt-in classes shared across pages. ============================================================================ */ /* Primary action — cyan block, the home-page CTA. */ .nk-btn, .nk-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--nk-mono); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 0.85rem 2rem; border: 1px solid var(--nk-cyan); border-radius: var(--nk-radius-sm); background: var(--nk-cyan); color: #001014; cursor: pointer; transition: background .2s ease, box-shadow .2s ease, color .2s ease; } .nk-btn-primary:hover { background: var(--nk-cyan-bright); box-shadow: 0 0 24px var(--nk-cyan-glow); } .nk-btn-ghost { background: transparent; color: var(--nk-cyan); border: 1px solid var(--nk-border); } .nk-btn-ghost:hover { border-color: var(--nk-cyan); color: var(--nk-cyan-bright); background: transparent; box-shadow: none; } /* Surface card — sharp-cornered, cyan left-rail accent like the catalogue tiles. */ .nk-card { position: relative; background: var(--nk-surface); border: 1px solid var(--nk-border); border-radius: var(--nk-radius); transition: border-color .18s ease, background .18s ease; } .nk-card:hover { border-color: var(--nk-cyan); background: var(--nk-hover); } /* Comparison / data table — cyan header, mono figures. */ .nk-table { width: 100%; border-collapse: collapse; } .nk-table th, .nk-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--nk-border-subtle); } .nk-table thead th { font-family: var(--nk-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nk-muted); font-weight: 600; } .nk-table td.nk-amount { font-family: var(--nk-mono); color: var(--nk-cyan); } .nk-table tbody tr:last-child td { border-bottom: none; } /* Status dot. */ .nk-led { display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--nk-emerald); box-shadow: 0 0 6px var(--nk-emerald-glow); } /* Keep content above the fixed glow layer. */ /* Keep page content above the fixed glow layer. NOTE: do NOT include .main-header here — professional-theme.css gives it position:sticky/z-index:200; overriding it to z-index:1 creates a stacking context that traps the nav dropdown below content. */ main, section, footer, .nk-scene { position: relative; z-index: 1; }