/* ───────────────────────────────────────────────────────────────── NACK'IN — Foundations (canonical) Operating-manual aesthetic: paper + ink + a single gold accent. Mono-first typography. Sharp corners, hard offset shadows. ───────────────────────────────────────────────────────────────── */ /* Fuentes via en index.html — evita render-blocking @import. */ :root { /* ── Brand core (CANONICAL) ───────────────────────────────── Single source of truth. Every kit/preview should ONLY reference these names. Legacy --nk-navy aliases are preserved below so older surfaces keep compiling — but new work MUST use these. */ /* SURFACES — split into "product" (neutral, default) and "editorial" (warm paper, marketing only). Use --paper for everyday docs, apps, dashboards, proposals. Use --paper-warm only for landing / decks / pitch where the editorial calidez actually sells. */ --paper: #fafaf8; /* product default — neutral off-white */ --paper-2: #f1efe9; /* hover / soft fill on neutral */ --paper-3: #e8e5dc; /* pressed / footer banding */ --paper-warm: #f4f1ea; /* MARKETING ONLY — editorial calidez */ --paper-warm-2: #ece7da; --ink: #0a0a0a; /* primary text + dark surfaces */ --ink-2: #3d3d3d; /* secondary text */ --ink-3: #6b6b6b; /* tertiary / placeholder */ --line: #0a0a0a; /* hard 1px structural border */ --line-soft: rgba(10,10,10,0.14); /* dashed/cell separators */ --line-softer: rgba(10,10,10,0.06); /* "Señal" — burnt ochre / machined-brass, NOT jewelry gold. Specifically chosen to read as warning-tape & industrial, not Tailwind amber. Single accent across the system. */ --signal-ochre: #b8731c; --signal-ochre-2: #cc8a2a; /* hover */ --signal-ochre-3: #944f0a; /* pressed */ --signal-ochre-tint: rgba(184,115,28,0.10); /* Legacy --gold names kept as aliases of the new ochre so older surfaces don't break while we migrate. */ --gold: var(--signal-ochre); --gold-soft: var(--signal-ochre-2); --gold-deep: var(--signal-ochre-3); --gold-tint: var(--signal-ochre-tint); --signal: #1f6c3d; /* "system OK" green */ --signal-tint: rgba(31,108,61,0.10); --warn: #b67a07; --warn-tint: rgba(182,122,7,0.10); --err: #b3261e; --err-tint: rgba(179,38,30,0.08); /* ── Semantic surface roles ────────────────────────────────── */ --bg: var(--paper); --surface: var(--paper); --surface-2: var(--paper-2); --surface-dark: var(--ink); --fg-1: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --fg-on-dark: var(--paper); --fg-on-dark-2: rgba(244,241,234,0.65); /* ── Legacy aliases (do NOT use in new code) ───────────────── */ --nk-navy: var(--ink); --nk-navy-deep: var(--ink); --nk-navy-soft: var(--ink-2); --nk-gold: var(--gold); --nk-gold-soft: var(--gold-soft); --nk-black: var(--ink); --nk-white: var(--paper); --nk-bg: var(--paper); --nk-surface: var(--paper); --nk-line: var(--line); --nk-line-strong: var(--ink); --nk-mute: var(--paper-2); --nk-grey-1: var(--ink-2); --nk-grey-2: var(--ink-3); --ok: var(--signal); --info: var(--ink); /* ── Type stacks ───────────────────────────────────────────── */ --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Space Mono', ui-monospace, monospace; /* ── Radii (sharp by default — operating-manual feel) ──────── */ --radius-0: 0px; /* default — everything is sharp */ --radius-1: 2px; --radius-2: 4px; --radius-pill: 999px; /* pills only for status dots / chips */ /* ── Spacing scale ─────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ── Shadows (used SPARINGLY — paper is mostly flat) ───────── */ --shadow-tech-sm: 2px 2px 0 0 var(--ink); --shadow-tech: 4px 4px 0 0 var(--ink); --shadow-tech-lg: 8px 8px 0 0 var(--ink); --shadow-soft: 0 1px 2px 0 rgba(10,10,10,0.06), 0 1px 3px 0 rgba(10,10,10,0.04); --shadow-pop: 0 8px 24px -8px rgba(10,10,10,0.18); /* ── Motion ────────────────────────────────────────────────── */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; } /* ───────────────────────────────────────────────────────────────── Type scale — MONO everywhere; display = mono, tighter track ───────────────────────────────────────────────────────────────── */ html { font-family: var(--font-mono); color: var(--fg-1); -webkit-font-smoothing: antialiased; } body { background: var(--paper); color: var(--fg-1); } ::selection { background: var(--ink); color: var(--paper); } .h-display, h1.nk, .nk h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 6.4vw, 96px); line-height: 0.96; letter-spacing: -0.04em; text-transform: none; color: var(--fg-1); } .h1, h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4vw, 56px); line-height: 1.0; letter-spacing: -0.035em; } .h2, h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.03em; } .h3, h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; } .h4, h4 { font-family: var(--font-mono); font-weight: 700; font-size: 14px; line-height: 1.3; letter-spacing: 0.02em; text-transform: uppercase; } .eyebrow { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .code, code, .mono { font-family: var(--font-mono); font-size: 0.95em; } .p, p { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; color: var(--fg-2); } .lead { font-family: var(--font-mono); font-size: 18px; line-height: 1.55; color: var(--fg-2); } .caption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); } /* ── Section numbering (§01, §02, …) — recurring brand motif ── */ .sec-num { font-size: 11px; letter-spacing: 0.22em; color: var(--gold); font-weight: 700; text-transform: uppercase;} /* ── Inline 'terminal' decorations used across the brand ────── */ .term-prompt::before { content: "> "; color: var(--gold); font-weight: 700; } .term-comment { color: var(--gold); font-weight: 700; } .term-cursor::after { content: "_"; color: var(--gold); animation: nk-blink 1.05s steps(2) infinite; } @keyframes nk-blink { 50% { opacity: 0; } } /* ── Status dot — tiny role-coloured square (NOT circle) ───── */ .status-dot { display: inline-block; width: 8px; height: 8px; background: var(--gold); } .status-dot.ok { background: var(--signal); } .status-dot.warn { background: var(--warn); } .status-dot.err { background: var(--err); }