/* Luminoveau site stylesheet. Design tokens + base element styles + the few global component styles (markdown, code, SSR fallback). Component-level styling still lives in the React components (inline), but everything pulls colour / font / spacing from the tokens below so themes and scale stay consistent. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ── Theme tokens ────────────────────────────────────────────────────────────── Dark is the default (:root). Light applies either from the OS setting (when the visitor hasn't chosen — the @media block) or explicitly from the nav toggle, which sets data-theme on and wins over the media query. Components read these via var(--…); --line is an r,g,b triple so every rgba(var(--line),α) border/surface flips in one shot. Code windows stay dark in both (.code-dark). */ :root { --lum-accent: oklch(0.72 0.18 165); --bg: #080b12; --bg-nav: rgba(9,9,13,0.92); --surface: #0d0f15; --surface-2: #0b0d13; --surface-3: #13131c; --text: #e2e2ea; --text-2: #c8c8d8; --text-3: #9191a8; --text-4: #6b6b80; --text-5: #5a5a72; --text-6: #4a4a60; --text-7: #3e3e56; --text-8: #2e2e45; --line: 255,255,255; --scroll-track: #09090d; --scroll-thumb: #2a2a3a; --code-inline: #82aaff; /* Syntax-highlight tokens. Dark values are tuned for a dark code bg; the light overrides are darkened so highlighted signatures stay readable on a light surface (DocsPage). */ --syn-kw: #c792ea; --syn-str: #c3e88d; --syn-num: #f78c6c; --syn-com: #546e7a; --syn-type: #82aaff; --syn-meta: #ffcb6b; --syn-punct: #89ddff; --syn-txt: #e2e2ea; /* Type + layout scale (non-colour tokens, theme-independent). */ --font-sans: 'Space Grotesk', sans-serif; --font-mono: 'JetBrains Mono', monospace; --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 22px; --fs-2xl: 34px; --fs-3xl: 40px; --fs-4xl: 52px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; --sp-10: 64px; --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; color-scheme: dark; } :root[data-theme="light"] { --lum-accent: oklch(0.60 0.17 256); --syn-kw: #9333c9; --syn-str: #197a2b; --syn-num: #b5480f; --syn-com: #6f7a86; --syn-type: #1e5fd0; --syn-meta: #8a6100; --syn-punct: #2b7fa6; --syn-txt: #16171f; --bg: #f6f7f9; --bg-nav: rgba(246,247,249,0.9); --surface: #ffffff; --surface-2: #eef0f4; --surface-3: #e7e9ef; --text: #16171f; --text-2: #2e2f3a; --text-3: #55566a; --text-4: #6d6e82; --text-5: #83859a; --text-6: #9a9cb0; --text-7: #adafc0; --text-8: #c4c6d4; --line: 20,22,30; --scroll-track: #e7e9ef; --scroll-thumb: #c2c4d0; --code-inline: #2b5fd9; color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --lum-accent: oklch(0.60 0.17 256); --syn-kw: #9333c9; --syn-str: #197a2b; --syn-num: #b5480f; --syn-com: #6f7a86; --syn-type: #1e5fd0; --syn-meta: #8a6100; --syn-punct: #2b7fa6; --syn-txt: #16171f; --bg: #f6f7f9; --bg-nav: rgba(246,247,249,0.9); --surface: #ffffff; --surface-2: #eef0f4; --surface-3: #e7e9ef; --text: #16171f; --text-2: #2e2f3a; --text-3: #55566a; --text-4: #6d6e82; --text-5: #83859a; --text-6: #9a9cb0; --text-7: #adafc0; --text-8: #c4c6d4; --line: 20,22,30; --scroll-track: #e7e9ef; --scroll-thumb: #c2c4d0; --code-inline: #2b5fd9; color-scheme: light; } } /* Code windows stay dark in both themes — syntax colours are tuned for a dark background. This scope re-declares the palette to its dark values, so all the var(--…) inside a code window resolve dark regardless of the page theme. */ .code-dark { --surface: #0d0f15; --surface-2: #0b0d13; --surface-3: #13131c; --text: #e2e2ea; --text-2: #c8c8d8; --text-3: #9191a8; --text-4: #6b6b80; --text-5: #5a5a72; --text-6: #4a4a60; --text-7: #3e3e56; --text-8: #2e2e45; --line: 255,255,255; --scroll-track: #09090d; --scroll-thumb: #2a2a3a; --syn-kw: #c792ea; --syn-str: #c3e88d; --syn-num: #f78c6c; --syn-com: #546e7a; --syn-type: #82aaff; --syn-meta: #ffcb6b; --syn-punct: #89ddff; --syn-txt: #e2e2ea; color-scheme: dark; /* keep the code window's scrollbars dark to match, even in light mode */ /* Base colour for code text hljs leaves untokenised (plain identifiers, namespaces, braces) — otherwise it inherits the page text colour, which is dark in light mode. */ color: #d2d2de; } /* ── Base ──────────────────────────────────────────────────────────────────── */ body { background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; font-family: var(--font-sans); transition: background 0.2s ease, color 0.2s ease; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--scroll-track); } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; } @keyframes lumiBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* ── Utility classes (kill the most-repeated inline noise) ─────────────────── */ .mono { font-family: var(--font-mono); } .sans { font-family: var(--font-sans); } /* ── highlight.js token overrides — match our palette ─────────────────────── */ .hljs { background: transparent !important; } /* padding controlled per-context, not zeroed */ .hljs-keyword { color: var(--syn-kw) !important; } .hljs-string { color: var(--syn-str) !important; } .hljs-number { color: var(--syn-num) !important; } .hljs-comment { color: var(--syn-com) !important; font-style: italic; } .hljs-title.function_ { color: var(--lum-accent, oklch(0.72 0.18 165)) !important; } .hljs-title, .hljs-title.class_, .hljs-type, .hljs-built_in, .hljs-attr, .hljs-name, .hljs-symbol { color: var(--syn-type) !important; } .hljs-meta { color: var(--syn-meta) !important; } .hljs-params { color: var(--syn-txt) !important; } .hljs-operator { color: var(--syn-punct) !important; } .hljs-punctuation { color: var(--syn-punct) !important; } /* Clickable engine-API references inside example code blocks */ .lumi-apiref { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--lum-accent, #7ee0c0); cursor: pointer; } .lumi-apiref:hover { background: rgba(126,224,192,0.14); border-radius: var(--radius-sm); } /* Server-injected crawlable fallback (index.php). Only present until React replaces #root, but style it so the no-JS / pre-hydration view is on-brand instead of raw 90s blue/purple links. */ #ssr { font-family: var(--font-sans); color: var(--text-2); max-width: 760px; margin: 0 auto; padding: 120px 24px; line-height: 1.6; } #ssr h1 { color: var(--text); letter-spacing: -0.03em; margin: 0 0 16px; } #ssr a { color: var(--lum-accent, #7ee0c0); text-decoration: none; } #ssr a:hover { text-decoration: underline; } #ssr ul { padding-left: 20px; } #ssr li { margin: 6px 0; } /* ── Rendered markdown (Docs overview, Learn guides, CMS pages) ─────────────── Fenced code blocks are replaced at runtime by CodeView windows (see highlightMarkdown), so there are no `pre` styles here — only prose + inline code. */ .docs-md { font-family: var(--font-sans); color: var(--text-2); line-height: 1.7; max-width: 720px; } .docs-md h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.03em; color: var(--text); margin: 6px 0 14px; } .docs-md h2 { font-size: var(--fs-xl); font-weight: 700; color: var(--text); margin: 34px 0 10px; letter-spacing: -0.02em; } .docs-md h3 { font-size: var(--fs-md); font-weight: 700; color: var(--text-2); margin: 24px 0 8px; } .docs-md p { margin: 0 0 14px; font-size: var(--fs-base); } .docs-md ul, .docs-md ol { margin: 0 0 14px; padding-left: 22px; } .docs-md li { margin: 4px 0; font-size: var(--fs-base); } .docs-md a { color: var(--lum-accent, #7ee0c0); text-decoration: none; } .docs-md a:hover { text-decoration: underline; } .docs-md code { font-family: var(--font-mono); font-size: var(--fs-sm); background: rgba(var(--line),0.08); padding: 1px 6px; border-radius: var(--radius-sm); color: var(--code-inline); } .docs-md strong { color: var(--text); font-weight: 700; } .docs-md hr { border: none; border-top: 1px solid rgba(var(--line),0.08); margin: 28px 0; } .docs-md blockquote { border-left: 2px solid var(--lum-accent, #7ee0c0); margin: 0 0 14px; padding: 2px 0 2px 16px; color: var(--text-3); }