/* ════════════════════════════════════════════════════════════════ nulus.css — shared design system used across: home, updates, blog, timeline, codex, etc. structure: 1. tokens (color, typography, spacing) 2. reset + base 3. typography 4. layout primitives (page shell, columns) 5. shared components (topnav, header, footer, tags) 6. utilities page-specific styles live in the page itself. ════════════════════════════════════════════════════════════════ */ /* ── 0. fonts ─────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=DM+Sans:wght@300;400;500&display=swap'); /* ── 1. tokens ────────────────────────────────────────────────── */ :root { /* color — core */ --black: #1a1a18; /* primary text, headings */ --white: #f5f3ef; /* page background — warm cream */ --gray: #9a9690; /* muted text, meta, labels */ --light-gray: #d6d2ca; /* dividers, borders */ --soft-gray: #c4bfb5; /* very quiet labels (e.g. year markers) */ --body-text: #555; /* prose body — slightly heavier than gray for readability */ /* color — categories (used for tags, dots, accents) */ --business: #4e8a72; /* sage green */ --business-light: #d4e8df; --creative: #96835f; /* warm olive */ --creative-light: #e8e0d2; --product: #6060a0; /* muted violet */ --product-light: #dcdcf0; --accent: #a04030; /* warm brick red — pinned, alerts */ --accent-light: #f0d8d0; /* fonts */ --mono: 'DM Mono', monospace; --sans: 'DM Sans', sans-serif; /* legacy aliases — kept for older pages (timeline, etc) */ --bg: var(--white); --ink: var(--black); --muted: var(--gray); --rule: var(--light-gray); } /* ── 1b. dark theme ───────────────────────────────────────────── */ /* Two ways dark mode turns on: (a) the OS prefers dark AND the user hasn't chosen a theme (b) the user explicitly picked dark — html[data-theme="dark"] The toggle script sets data-theme on to override the OS. */ :root[data-theme="dark"] { --black: #ECE9E3; /* primary text — warm off-white */ --white: #16161A; /* page background — near-black */ --gray: #807C77; /* muted text, meta, labels */ --light-gray: #34332F; /* dividers, borders */ --soft-gray: #4A4945; /* very quiet labels */ --body-text: #A8A49C; /* prose body */ --business: #6FAE92; /* sage — lifted for dark bg */ --business-light: #25342D; --creative: #B6A079; /* olive — lifted */ --creative-light: #322E24; --product: #8C8CC4; /* violet — lifted */ --product-light: #2A2A3A; --accent: #C9756A; /* brick red — lifted for dark bg */ --accent-light: #3A2824; } /* OS-level dark, only when the user hasn't explicitly chosen */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --black: #ECE9E3; --white: #16161A; --gray: #807C77; --light-gray: #34332F; --soft-gray: #4A4945; --body-text: #A8A49C; --business: #6FAE92; --business-light: #25342D; --creative: #B6A079; --creative-light: #322E24; --product: #8C8CC4; --product-light: #2A2A3A; --accent: #C9756A; --accent-light: #3A2824; } } /* ── 2. reset + base ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--white); color: var(--black); font-family: var(--mono); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 0.3s ease, color 0.3s ease; } a { color: inherit; text-decoration: none; } /* ── 3. typography ────────────────────────────────────────────── */ /* page title (e.g. "blog", "investor updates") */ .page-title { font-size: 13px; font-weight: 400; letter-spacing: 0.15em; text-transform: lowercase; margin-bottom: 8px; } .page-subtitle { font-size: 11px; color: var(--gray); letter-spacing: 0.08em; } /* ── 4. layout primitives ─────────────────────────────────────── */ /* main content shell — used on all pages */ .page-shell { margin-left: auto; margin-right: auto; padding: 60px 80px 80px; max-width: 1000px; } /* ── 5. shared components ─────────────────────────────────────── */ /* ── topnav ── */ .topnav { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 70px; } .topnav-brand { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--gray); } .topnav-links { display: flex; gap: 24px; } .topnav-links a { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: lowercase; color: var(--gray); transition: color 0.2s ease; } .topnav-links a:hover { color: var(--black); } .topnav-links a.active { color: var(--black); font-weight: 500; } /* ── page header (title block + divider) ── */ .page-header { margin-bottom: 80px; } .page-header h1 { font-size: 13px; font-weight: 400; letter-spacing: 0.15em; text-transform: lowercase; margin-bottom: 8px; } .page-header .subtitle { font-size: 11px; color: var(--gray); letter-spacing: 0.08em; } .page-header .divider { width: 28px; height: 1px; background: var(--black); margin-top: 24px; } /* ── tags (categories: business, creative, product) ── */ .tag { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: lowercase; padding: 2px 8px; border: 1px solid transparent; white-space: nowrap; line-height: 1.6; } .tag.business { color: var(--business); background: var(--business-light); } .tag.creative { color: var(--creative); background: var(--creative-light); } .tag.product { color: var(--product); background: var(--product-light); } /* ── footer ── */ .page-footer { margin-top: 100px; padding-top: 28px; border-top: 1px solid var(--light-gray); font-size: 10px; color: var(--gray); letter-spacing: 0.1em; display: flex; justify-content: space-between; } .page-footer a { color: var(--gray); border-bottom: 1px solid var(--light-gray); transition: color 0.2s; } .page-footer a:hover { color: var(--black); } /* ── 6. utilities ─────────────────────────────────────────────── */ .mono { font-family: var(--mono); } .sans { font-family: var(--sans); } .muted { color: var(--gray); } .dim { color: var(--soft-gray); } /* ── 7. mobile defaults ───────────────────────────────────────── */ @media (max-width: 720px) { .page-shell { padding: 40px 28px 60px; } .topnav { margin-bottom: 48px; } .page-header { margin-bottom: 48px; } .page-footer { margin-top: 64px; } }