/* ═══════════════════════════════════════════════════════════════════════════ NoFooly design tokens — PUBLIC system ("Editorial Craft"). Violet 2026-09-04 Ruling: D:\Jackson\brand\NOFOOLY_BRAND.md. One file, imported by every public page and every PDF generator. Adopt by swapping variables, not layout. ═══════════════════════════════════════════════════════════════════════════ */ @import url('fonts.css'); /* self-hosted: Newsreader · Plus Jakarta Sans · Space Grotesk (OFL) */ :root{ /* ── colour: surfaces (tiers 0→3) ─────────────────────────────────────── */ --nf-canvas:#fbf9f5; /* 0 parchment page */ --nf-surface:#ffffff; /* 1 card / paper */ --nf-inset:#f3efea; /* 2 oatmeal panel, fields, stripes */ --nf-band:#0f2b48; /* 3 navy band (masthead, footer, hero strip) */ --nf-line:#e7e0d6; --nf-line-strong:#d6cdbf; /* ── colour: roles ───────────────────────────────────────────────────── */ --nf-navy:#0f2b48; --nf-navy-deep:#0a1f36; --nf-navy-soft:#e8eef5; --nf-amber:#d97706; --nf-amber-deep:#b45309; --nf-amber-soft:#fdf3e2; --nf-terracotta:#c2410c; --nf-terracotta-soft:#fdeee6; --nf-green:#15803d; --nf-green-soft:#e9f5ec; --nf-ink:#1e293b; --nf-muted:#64748b; --nf-faint:#94a3b8; --nf-on-band:#ffffff; --nf-on-band-muted:#b8c4d3; --nf-on-amber:#1a1405; /* ── type ────────────────────────────────────────────────────────────── */ --nf-font-head:'Newsreader',Georgia,'Times New Roman',serif; --nf-font-body:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; --nf-font-label:'Space Grotesk','Plus Jakarta Sans','Segoe UI',system-ui,sans-serif; --nf-fs-xs:.75rem; --nf-fs-sm:.875rem; --nf-fs-base:1.0625rem; --nf-fs-lg:1.125rem; --nf-fs-xl:1.375rem; --nf-fs-2xl:1.75rem; --nf-fs-3xl:clamp(2.1rem,5vw,3.1rem); --nf-lh-tight:1.1; --nf-lh-snug:1.3; --nf-lh-body:1.6; --nf-track-label:.08em; /* eyebrows, pills */ --nf-track-head:-.015em; /* ── space / radius / elevation ──────────────────────────────────────── */ --nf-sp-1:4px; --nf-sp-2:8px; --nf-sp-3:12px; --nf-sp-4:16px; --nf-sp-5:24px; --nf-sp-6:32px; --nf-sp-7:40px; --nf-sp-8:48px; --nf-sp-9:64px; --nf-sp-10:96px; --nf-r-sm:6px; --nf-r-md:10px; --nf-r-lg:14px; --nf-r-pill:999px; --nf-shadow-paper:0 1px 2px rgba(15,43,72,.05),0 6px 20px rgba(15,43,72,.07); --nf-shadow-lift:0 2px 4px rgba(15,43,72,.06),0 14px 36px rgba(15,43,72,.12); --nf-container:74rem; /* ── LEGACY ALIASES — the five site pages read these today. Keep until each page uses nf-* directly, then delete this block. ──────────────────── */ --bg:var(--nf-canvas); --panel:var(--nf-surface); --panel2:var(--nf-inset); --field:var(--nf-surface); --line:var(--nf-line); --text:var(--nf-ink); --muted:var(--nf-muted); --gold:var(--nf-amber); --accent:var(--nf-navy); --accent-ink:var(--nf-on-band); --pink:var(--nf-terracotta); /* the launch pill: urgency, not neon */ --good:var(--nf-green); --bad:var(--nf-terracotta); --warn:var(--nf-amber-deep); --ink:var(--nf-navy); } /* ── OPS mode: same palette, turned to night. Add class="nf-ops" on . Console, orders, generators' chrome, HQ. NO violet, NO fuchsia. ─────── */ .nf-ops{ --nf-canvas:#0b1220; --nf-surface:#111a2b; --nf-inset:#18233a; --nf-band:#0a1f36; --nf-line:#22304a; --nf-line-strong:#2f405e; --nf-ink:#e6ecf5; --nf-muted:#93a1b5; --nf-faint:#5f6f88; --nf-navy-soft:#16294a; --nf-amber-soft:#2b1f0a; --nf-terracotta-soft:#33170e; --nf-green-soft:#0e2a19; --nf-shadow-paper:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --nf-shadow-lift:var(--nf-shadow-paper); --accent:var(--nf-amber); --accent-ink:var(--nf-on-amber); color-scheme:dark; } /* ── NIGHT ground (Wayne's pick 2026-09-04: "C but not the top bar"). The PUBLIC web pages carry class="nf-night" on . Same navy/amber/type; PDFs stay light. ─ */ .nf-night{ --nf-canvas:#0b1220; --nf-surface:#111a2b; --nf-inset:#18233a; --nf-band:#071426; --nf-line:#22304a; --nf-line-strong:#2f405e; --nf-ink:#e6ecf5; --nf-muted:#9fadc2; --nf-faint:#7f8ea8; /* N-01: 5.65 canvas / 5.25 surface / 4.73 inset */ --nf-navy:#f1e9dc; --nf-navy-deep:#ffffff; --nf-navy-soft:#16294a; --nf-amber-deep:#f0a640; --nf-amber-soft:#2b1f0a; --nf-terracotta-soft:#33170e; --nf-green-soft:#0e2a19; --nf-green:#4ade80; --nf-terracotta:#f0764a; --nf-shadow-paper:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --nf-shadow-lift:var(--nf-shadow-paper); --accent:var(--nf-amber); --accent-ink:var(--nf-on-amber); color-scheme:dark; } .nf-night .btn-primary,.nf-night .nav a.cta,.nf-night .btn.primary,.nf-night .btn:not(.ghost),.nf-night .unlock .badge,.nf-night .skip{ background:var(--nf-amber)!important;color:var(--nf-on-amber)!important} .nf-night .btn-primary:hover,.nf-night .nav a.cta:hover,.nf-night .btn.primary:hover{background:#f0a640!important;color:var(--nf-on-amber)!important} .nf-night .btn-ghost,.nf-night .btn.ghost{color:var(--nf-ink);border-color:var(--nf-line-strong)} .nf-night .btn.ghost:hover{border-color:var(--nf-amber)} .nf-night header{background:rgba(7,20,38,.96)!important;border-bottom:1px solid var(--nf-line)} .nf-night .launch code{background:var(--nf-amber);color:var(--nf-on-amber)} .nf-night .launch{background:var(--nf-amber-soft)} .nf-night .p-head,.nf-night .band,.nf-night .r-head{background:#0f2b48!important;border-bottom:3px solid var(--nf-amber)} .nf-night .p-head h2,.nf-night .band h1,.nf-night .band h2{color:#fff} .nf-night .step .n{background:var(--nf-amber);color:var(--nf-on-amber)} .nf-night .seg .opt.on{border-color:var(--nf-amber);background:var(--nf-amber-soft);color:var(--nf-ink)} .nf-night .pill--trust{border-color:var(--nf-green);color:var(--nf-green);background:var(--nf-green-soft)} .nf-night .kicker,.nf-night .eyebrow{color:var(--nf-amber)} .nf-night code{background:var(--nf-inset);color:var(--nf-ink)} .nf-night .hp b,.nf-night .price{color:var(--nf-ink)} .nf-night .card .tag,.nf-night .tier .tag{color:var(--nf-amber)} .nf-night img.paper-shot,.nf-night .paper img{filter:none} .nf-night ::selection{background:#3a2a0a} /* ── LIGHT view on the web (toggle): cool white, not parchment (Wayne 09-04: "not a fan of the beige"). Parchment stays the PDF/paper ground. . ───────────────────────────── */ .nf-light{--nf-canvas:#ffffff;--nf-inset:#f2f5f9;--nf-line:#dde4ec;--nf-line-strong:#c7d1dd;--nf-navy-soft:#e8eef5;--nf-muted:#5b6b82;--nf-faint:#5f6e84} /* N-01: muted 5.43/4.96, faint 5.19/4.74 on #fff/#f2f5f9 */ .nf-light header{background:rgba(255,255,255,.94)!important} /* ── theme toggle (shared key nf_theme with nofooly.com and the app) ─────────────────────────── */ .theme-toggle{appearance:none;background:transparent;border:1px solid var(--nf-line-strong);color:var(--nf-ink); width:36px;height:36px;border-radius:999px;cursor:pointer;font-size:15px;line-height:1;display:inline-flex; align-items:center;justify-content:center;margin-right:8px;flex:0 0 auto} .theme-toggle:hover{border-color:var(--nf-amber);color:var(--nf-amber)} /* ── base ────────────────────────────────────────────────────────────────── */ body{background:var(--nf-canvas);color:var(--nf-ink);font-family:var(--nf-font-body); font-size:var(--nf-fs-base);line-height:var(--nf-lh-body);-webkit-font-smoothing:antialiased} h1,h2,.nf-display{font-family:var(--nf-font-head);font-weight:600;color:var(--nf-navy); letter-spacing:var(--nf-track-head);line-height:var(--nf-lh-tight)} h1{font-size:var(--nf-fs-3xl)} h2{font-size:var(--nf-fs-2xl);line-height:var(--nf-lh-snug)} h1 em,h2 em{font-style:italic;font-weight:500;color:inherit} /* emphasis = italic serif, not colour */ h3{font-family:var(--nf-font-body);font-weight:700;font-size:var(--nf-fs-lg);color:var(--nf-navy);line-height:var(--nf-lh-snug)} a{color:var(--nf-navy);text-decoration:underline;text-decoration-color:var(--nf-amber);text-underline-offset:3px} a:hover{color:var(--nf-amber-deep)} :focus-visible{outline:2px solid var(--nf-amber);outline-offset:3px;border-radius:4px} ::selection{background:var(--nf-amber-soft)} /* ── utilities ───────────────────────────────────────────────────────────── */ .eyebrow,.kicker{font-family:var(--nf-font-label);font-weight:700;font-size:var(--nf-fs-xs); letter-spacing:var(--nf-track-label);text-transform:uppercase;color:var(--nf-amber-deep)} .rule{display:block;width:28px;height:3px;background:var(--nf-amber);border-radius:2px;margin:0 0 10px} .pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--nf-font-label);font-weight:700; font-size:var(--nf-fs-xs);letter-spacing:.06em;text-transform:uppercase;line-height:1; padding:7px 11px;border-radius:var(--nf-r-pill);border:1px solid var(--nf-line-strong); background:var(--nf-surface);color:var(--nf-navy)} .pill--trust{border-color:var(--nf-green);color:var(--nf-green);background:var(--nf-green-soft)} .pill--trust::before{content:"✓"} .pill--warn{border-color:var(--nf-terracotta);color:#fff;background:var(--nf-terracotta)} .pill--amber{border-color:var(--nf-amber);color:var(--nf-amber-deep);background:var(--nf-amber-soft)} .btn-primary,.btn-accent,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:46px;padding:11px 22px;border-radius:var(--nf-r-md);font-family:var(--nf-font-body); font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;border:1px solid transparent;cursor:pointer} .btn-primary{background:var(--nf-navy);color:var(--nf-on-band)} .btn-primary:hover{background:var(--nf-navy-deep);color:#fff} .btn-accent{background:var(--nf-amber);color:var(--nf-on-amber)} .btn-accent:hover{background:#c46a05;color:var(--nf-on-amber)} .btn-ghost{background:transparent;color:var(--nf-navy);border-color:var(--nf-line-strong)} .btn-ghost:hover{border-color:var(--nf-navy)} .card{background:var(--nf-surface);border:1px solid var(--nf-line);border-radius:var(--nf-r-lg); padding:var(--nf-sp-5);box-shadow:var(--nf-shadow-paper)} .card--flag{border-color:var(--nf-amber);box-shadow:0 0 0 1px var(--nf-amber),var(--nf-shadow-paper)} .inset{background:var(--nf-inset);border:1px solid var(--nf-line);border-radius:var(--nf-r-md);padding:var(--nf-sp-4)} .band{background:var(--nf-band);color:var(--nf-on-band);border-bottom:3px solid var(--nf-amber)} .band .eyebrow{color:var(--nf-amber)} .band h1,.band h2{color:#fff} .price,.figure{font-family:var(--nf-font-label);font-weight:700;font-variant-numeric:tabular-nums;color:var(--nf-navy)} .lockup{font-family:var(--nf-font-label);font-weight:700;font-size:var(--nf-fs-xs);letter-spacing:var(--nf-track-label); text-transform:uppercase;color:var(--nf-muted)} /* ASSEMBLED BY JACKSON · CHECKED BY WAYNE */ .wordmark{font-family:var(--nf-font-body);font-weight:800;letter-spacing:.04em;color:var(--nf-navy);text-decoration:none} .wordmark span{color:var(--nf-amber)} /* JACKSON. */ .field{width:100%;background:var(--nf-surface);border:1px solid var(--nf-line-strong);border-radius:var(--nf-r-sm); color:var(--nf-ink);padding:11px 12px;font:inherit;min-height:46px} .field:focus{outline:none;border-color:var(--nf-navy);box-shadow:0 0 0 3px var(--nf-navy-soft)} .field::placeholder{color:var(--nf-faint)} /* ═══ PRINT — the PDFs (generate.html, business.html, duel.html, md_to_pdf.mjs). Navy band, amber rule, no shadows. @page margins are owned by each generator (12mm 0 14mm, print-verified 09-01) — do NOT set @page here. ═══════════════ */ @media print{ :root{--nf-canvas:#fff;--nf-shadow-paper:none;--nf-shadow-lift:none} body{background:#fff;color:var(--nf-ink);font-size:10.5pt;line-height:1.55; -webkit-print-color-adjust:exact;print-color-adjust:exact} .card,.inset,.tile,.callout{box-shadow:none} .band,.r-head,.head{background:var(--nf-navy)!important;background-image:none!important;color:#fff; border-bottom:3px solid var(--nf-amber)} .r-head .brand,.head .k{font-family:var(--nf-font-label);color:var(--nf-amber);letter-spacing:.14em} .r-head h2,.head h1{font-family:var(--nf-font-head);font-weight:600;color:#fff;letter-spacing:-.01em} .r-head .meta,.foot,.lockup{font-family:var(--nf-font-label);color:var(--nf-on-band-muted);letter-spacing:.1em} #report h3,.kick,h2{font-family:var(--nf-font-label);color:var(--nf-navy);letter-spacing:.12em} #report h3::before,.kick::before{background:var(--nf-amber)} h2{border-top-color:var(--nf-amber)} table th{border-bottom:2px solid var(--nf-navy);font-family:var(--nf-font-label);color:var(--nf-muted)} .tile .val,.tile .v,td.price,.price{font-family:var(--nf-font-label)} .verdict,.intent{font-family:var(--nf-font-head);font-size:11.5pt;line-height:1.6;color:var(--nf-ink); background-image:none;border-top:3px solid var(--nf-amber);outline:none} .callout{border-left-color:var(--nf-amber);background:var(--nf-amber-soft)} .callout.good{border-left-color:var(--nf-green);background:var(--nf-green-soft)} .callout.bad,.callout.warn{border-left-color:var(--nf-terracotta);background:var(--nf-terracotta-soft)} .fault{background:var(--nf-terracotta)} a{color:var(--nf-navy-deep);text-decoration-color:rgba(217,119,6,.6)} .btn-primary,.btn-accent,.btn-ghost,.leaflet-control-container,.op,.opnews,#status{display:none!important} }