/* ============================================================================ NodePilot — THEME ---------------------------------------------------------------------------- This is the file to edit to change how the site LOOKS. Everything below the "PALETTE" heading is a value you can change freely. You cannot break the site's behaviour from this file: no checkout, pricing or navigation logic reads anything here. The worst outcome of a bad edit is that the page looks wrong, and reverting one line puts it back. Two rules, and they are the only two: 1. Edit values, not names. `--accent` is referenced ~40 times across the site; renaming it makes those references fall back to nothing. 2. Every colour is declared twice — once for dark, once for light. Change both, or the site will look right in one theme and wrong in the other. Preview every token and component side by side, in both themes, by opening theme-preview.html in a browser. Nothing needs to be running. ============================================================================ */ :root { /* ========================================================================== PALETTE — the values to edit ========================================================================== Named for the JOB each colour does, not for the colour it currently is, so the names stay honest after you change them. `--accent` can become orange without anything being renamed. Dark is this site's default: a visitor whose browser states no preference gets dark. That is deliberate, and the wiring section below depends on it. -------------------------------------------------------------------------- */ /* --- surfaces, back to front ------------------------------------------- */ --d-bg: #080B12; --l-bg: #F4F7FB; /* page behind everything */ --d-surface: #0F141E; --l-surface: #FFFFFF; /* cards, panels */ --d-surface-2: #141B27; --l-surface-2: #F8FAFD; /* insets, code blocks */ --d-raise: #1A2231; --l-raise: #FFFFFF; /* menus, the thing on top*/ /* --- borders ------------------------------------------------------------ */ --d-line: #212A3A; --l-line: #E5EBF3; /* ordinary hairline */ --d-line-2: #2C3648; --l-line-2: #D4DDEA; /* emphasised / hover */ /* --- text, loudest to quietest ------------------------------------------ */ --d-text: #EAEEF6; --l-text: #0B1220; /* body and headings */ --d-muted: #909CB0; --l-muted: #54617A; /* secondary copy */ --d-faint: #5C687B; --l-faint: #8593A6; /* captions, disabled */ /* --- brand -------------------------------------------------------------- */ /* --accent carries the identity: links, the logo, focus rings, primary buttons. --accent-ink is what sits ON the accent, so those two must stay legible against each other — check the contrast pair in theme-preview.html after changing either. Light mode's accent is darker on purpose: the dark teal fails contrast on a white background. */ --d-accent: #26E0C7; --l-accent: #0E9E8B; /* primary brand */ --d-accent-2: #16C6AE; --l-accent-2: #0B8574; /* hover / gradient end */ --d-accent-ink: #04120F; --l-accent-ink: #FFFFFF; /* text ON the accent */ /* --- status ------------------------------------------------------------- */ /* Meaning, not decoration: --good marks a synced node, --amber a healing one. Recolour them, but keep them distinguishable from --accent and from each other, including for red/green colour blindness. */ --d-good: #3FD68C; --l-good: #0F9860; /* healthy, synced */ --d-amber: #EBB25C; --l-amber: #B87A22; /* working, healing */ /* --- logo gradient ------------------------------------------------------ */ /* The hexagon outline in the wordmark. Same in both themes today; give them separate values here if a future light-mode logo needs them. */ --d-brand-1: #33ECD4; --l-brand-1: #33ECD4; --d-brand-2: #12B49E; --l-brand-2: #12B49E; /* --- depth -------------------------------------------------------------- */ /* Dark mode leans on a deeper, more opaque shadow because there is less tonal separation between a card and the page behind it. */ --d-shadow: 0 30px 70px -34px rgba(0,0,0,.8); --l-shadow: 0 26px 56px -34px rgba(16,32,54,.32); /* ========================================================================== TYPE, SHAPE AND MEASURE — identical in both themes ========================================================================== */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* The mono stack is doing real work, not decoration — it sets the install command, metrics and node names, where a tabular figure and an unambiguous 0/O matter. Keep a monospace stack here. */ --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace; /* Corner roundness, small to large. Change --r-md and the whole site's character shifts; set them all to 0 for a hard-edged look. */ --r-sm: 8px; /* buttons, nav links, focus rings */ --r-md: 10px; /* pills, small cards */ --r-lg: 14px; /* panels */ --r-xl: 16px; /* pricing tiers */ --r-2xl: 20px; /* the hero panel, overlays */ --maxw: 1140px; /* content column — the page centres inside this */ --nav-h: 64px; /* sticky header height; scroll anchors are offset by it, so changing it keeps section headings clear of the bar */ /* ========================================================================== WIRING — below this line, leave it alone ========================================================================== This maps the palette above onto the names the rest of the site actually uses, and switches between them. It repeats because CSS has no way to say "use this set of values" in one place — but you never need to edit it, and editing it is how the two themes drift apart. Order matters. An explicit choice (data-theme, set by the header toggle) has to beat the browser's preference, so those rules come last. ========================================================================== */ --bg: var(--d-bg); --surface: var(--d-surface); --surface-2: var(--d-surface-2); --raise: var(--d-raise); --line: var(--d-line); --line-2: var(--d-line-2); --text: var(--d-text); --muted: var(--d-muted); --faint: var(--d-faint); --accent: var(--d-accent); --accent-2: var(--d-accent-2); --accent-ink: var(--d-accent-ink); --good: var(--d-good); --amber: var(--d-amber); --brand-1: var(--d-brand-1); --brand-2: var(--d-brand-2); --shadow: var(--d-shadow); color-scheme: dark; } /* The visitor's OS says light, and they have not chosen otherwise. */ @media (prefers-color-scheme: light) { :root { --bg: var(--l-bg); --surface: var(--l-surface); --surface-2: var(--l-surface-2); --raise: var(--l-raise); --line: var(--l-line); --line-2: var(--l-line-2); --text: var(--l-text); --muted: var(--l-muted); --faint: var(--l-faint); --accent: var(--l-accent); --accent-2: var(--l-accent-2); --accent-ink: var(--l-accent-ink); --good: var(--l-good); --amber: var(--l-amber); --brand-1: var(--l-brand-1); --brand-2: var(--l-brand-2); --shadow: var(--l-shadow); color-scheme: light; } } /* An explicit choice from the header toggle. Higher specificity than the rules above, so it wins in both directions. */ :root[data-theme="light"] { --bg: var(--l-bg); --surface: var(--l-surface); --surface-2: var(--l-surface-2); --raise: var(--l-raise); --line: var(--l-line); --line-2: var(--l-line-2); --text: var(--l-text); --muted: var(--l-muted); --faint: var(--l-faint); --accent: var(--l-accent); --accent-2: var(--l-accent-2); --accent-ink: var(--l-accent-ink); --good: var(--l-good); --amber: var(--l-amber); --brand-1: var(--l-brand-1); --brand-2: var(--l-brand-2); --shadow: var(--l-shadow); color-scheme: light; } :root[data-theme="dark"] { --bg: var(--d-bg); --surface: var(--d-surface); --surface-2: var(--d-surface-2); --raise: var(--d-raise); --line: var(--d-line); --line-2: var(--d-line-2); --text: var(--d-text); --muted: var(--d-muted); --faint: var(--d-faint); --accent: var(--d-accent); --accent-2: var(--d-accent-2); --accent-ink: var(--d-accent-ink); --good: var(--d-good); --amber: var(--d-amber); --brand-1: var(--d-brand-1); --brand-2: var(--d-brand-2); --shadow: var(--d-shadow); color-scheme: dark; }