/* ============================================================================= Lunaris — documentation theme overlay (light-only "Lunaris Day") ============================================================================= DESIGN RATIONALE ---------------- Lunaris is an agent-memory engine; its sibling substrate is "Moon". The brand reads celestial/lunar: precision, restraint, calm. The reference points are tokio.rs, the Rust Book, and Linear's docs — polished infrastructure documentation, not a marketing splash. Senior engineers live in these pages; legibility, fast scanning, and great code-block contrast win over decoration. The published site is LIGHT-ONLY. book.toml pins both `default-theme` and `preferred-dark-theme` to "light", and this file hides the theme switcher (§0) so the dark palette is never reachable. This overlay re-tunes mdBook's built-in "light" theme into "Lunaris Day": warm paper, deep navy ink. PALETTE — Lunaris Day Background #FCFCFA warm off-white "paper" Surface/sidebar #F4F5F2 raised panel Body text #1B2433 deep navy ink — ~13:1 on bg (WCAG AAA) Accent (links) #1E5C99 deep moonbeam — ~5.6:1 on bg (WCAG AA) Inline code #0C5A4E teal, darkened for contrast on paper Table header #ECEEF1 quiet band, no harsh fill TYPE System font stack only (no CDN fonts — offline builds must work). The body stack favors the platform UI face; the mono stack keeps mdBook's "Source Code Pro" preference. Body line-height bumped to 1.65 for the long measure; headings get tighter tracking; the reading measure (750px) is mdBook's default and is already in the right band, so it is left alone. WHAT CHANGED & WHY - Re-coloured the "light" CSS custom properties under the .light theme-class selector (mdBook scopes them on , so :root would lose to specificity). - Tables: more padding, lighter borders, a calm header band instead of the stock heavy grey, subtle zebra striping, rounded outer corners. - Code blocks: a faint paper panel with a hairline border; the Highlight.js palette retuned to a quiet ink set so code matches the chrome. - Links: underline-on-hover only (less noise in dense prose), accent-coloured. - Sidebar: tighter type, accent left-rail on the active item, calmer hover. - Respects prefers-reduced-motion; does not touch the search popup internals, mobile breakpoints, or the content max-width. Accessibility: all body/heading/link pairs verified ≥ 4.5:1 (AA); most are AAA. Decorative-only colour is avoided. ========================================================================== */ /* --------------------------------------------------------------------------- 0. Light-only — hide the theme switcher The site ships a single theme; remove the paintbrush so dark is unreachable. ------------------------------------------------------------------------- */ /* mdBook ≤0.4 used #theme-toggle; 0.5.x renames it #mdbook-theme-toggle. Hide both the button and the popup list so dark is unreachable. */ #theme-toggle, #mdbook-theme-toggle, #mdbook-theme-list, .theme-popup { display: none !important; } /* --------------------------------------------------------------------------- 1. Typography (theme-agnostic) ------------------------------------------------------------------------- */ :root { --lunaris-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Inter", "Roboto", Arial, sans-serif; } html { font-family: var(--lunaris-sans); } body { line-height: 1.65; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .content h1, .content h2, .content h3, .content h4 { font-family: var(--lunaris-sans); font-weight: 650; letter-spacing: -0.012em; line-height: 1.25; } /* mdBook sets `html { font-size: 62.5% }` (1rem = 10px), so heading sizes are in `em` — relative to the 16px body — not `rem`, which would render ~⅗ size. */ .content h1 { font-size: 2em; margin-top: 1.6em; } .content h2 { font-size: 1.5em; margin-top: 2.2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--table-border-color); } .content h3 { font-size: 1.2em; margin-top: 1.8em; } .content p, .content li { /* keep an easy reading rhythm in dense reference prose */ line-height: 1.65; } .menu-title { font-weight: 650; letter-spacing: -0.01em; } /* --------------------------------------------------------------------------- 2. Lunaris Day (overlay on the built-in "light" theme) mdBook puts the theme class on ; we must match it (not :root). ------------------------------------------------------------------------- */ .light { --bg: #FCFCFA; --fg: #1B2433; --sidebar-bg: #F4F5F2; --sidebar-fg: #2B3445; --sidebar-non-existant: #A7AEBC; --sidebar-active: #1E5C99; --sidebar-spacer: #E7E8E4; --scrollbar: #BFC3C9; --icons: #6A7280; --icons-hover: #1B2433; --links: #1E5C99; --inline-code-color: #0C5A4E; --theme-popup-bg: #FFFFFF; --theme-popup-border: #D6D9DD; --theme-hover: #EEEFEC; --quote-bg: #F2F5F7; --quote-border: #DDE3E8; --warning-border: #C77F1A; --table-border-color: #E4E6E3; --table-header-bg: #ECEEF1; --table-alternate-bg: #F7F8F6; --searchbar-border-color: #D6D9DD; --searchbar-bg: #FFFFFF; --searchbar-fg: #1B2433; --searchbar-shadow-color: #CFD2D6; --searchresults-header-fg: #6A7280; --searchresults-border-color: #D6D9DD; --searchresults-li-bg: #EEF4FA; --search-mark-bg: #BFDCF5; --color-scheme: light; --copy-button-filter: invert(42%); --copy-button-filter-hover: invert(24%) sepia(60%) saturate(1200%) hue-rotate(186deg) brightness(92%) contrast(95%); --footnote-highlight: #BFDCF5; --overlay-bg: rgba(200, 202, 198, 0.45); --blockquote-note-color: #1E5C99; --blockquote-tip-color: #117A5E; --blockquote-important-color: #6A4BB0; --blockquote-warning-color: #9A6700; --blockquote-caution-color: #B4322F; --sidebar-header-border-color: #D6D9DD; } .light .content h1, .light .content h2, .light .content h3, .light .content h4 { color: #131A26; } /* SSR / no-JS first paint stays on warm paper, regardless of OS dark mode */ html:not(.js) { --bg: #FCFCFA; --fg: #1B2433; --sidebar-bg: #F4F5F2; --sidebar-fg: #2B3445; --links: #1E5C99; --inline-code-color: #0C5A4E; --table-border-color: #E4E6E3; --table-header-bg: #ECEEF1; --table-alternate-bg: #F7F8F6; --color-scheme: light; } /* --------------------------------------------------------------------------- 3. Links ------------------------------------------------------------------------- */ .content a:link, .content a:visited { color: var(--links); text-decoration: none; } .content a:hover { text-decoration: underline; text-underline-offset: 0.15em; } /* keep header-anchor "§" markers quiet */ .content a.header:hover { text-decoration: none; } /* --------------------------------------------------------------------------- 4. Tables — roomier, calmer, rounded ------------------------------------------------------------------------- */ .content table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--table-border-color); border-radius: 8px; overflow: hidden; margin: 1.4em 0; width: 100%; font-size: 0.94em; } .content table thead th, .content table thead td { background: var(--table-header-bg); color: var(--fg); font-weight: 650; letter-spacing: -0.005em; text-align: left; padding: 0.62em 0.95em; border: none; border-bottom: 1px solid var(--table-border-color); } .content table td { padding: 0.55em 0.95em; border: none; border-bottom: 1px solid var(--table-border-color); vertical-align: top; line-height: 1.55; } .content table tbody tr:last-child td { border-bottom: none; } /* override mdBook's default nth-child(2n) zebra with our subtler tone */ .content table tbody tr:nth-child(2n) td { background: var(--table-alternate-bg); } .content table tbody tr:nth-child(2n+1) td { background: transparent; } /* inline code inside table cells shouldn't wrap awkwardly */ .content table code { white-space: nowrap; } /* --------------------------------------------------------------------------- 5. Code blocks & inline code ------------------------------------------------------------------------- */ .content code { font-variant-ligatures: none; } /* inline code: a faint chip so it reads as a token, not just coloured text */ .content :not(pre) > code { padding: 0.12em 0.34em; border-radius: 4px; } .light .content :not(pre) > code { background: rgba(12, 90, 78, 0.07); } /* block code: a distinct panel with a hairline */ .content pre { border-radius: 8px; line-height: 1.55; padding: 0; } .content pre > code { display: block; padding: 1em 1.15em; } .light .content pre { background: #F6F7F4; border: 1px solid #E4E6E3; } .light .content pre > code { background: #F6F7F4; } /* --------------------------------------------------------------------------- 6. Highlight.js token palette — quiet ink on paper The built-in theme ships a Rust-flavoured highlight.css; retune the tokens so code matches the Lunaris chrome instead of the stock orange-on-beige. ------------------------------------------------------------------------- */ .light .hljs { color: #1B2433; } .light .hljs-comment, .light .hljs-quote { color: #6B7382; font-style: italic; } .light .hljs-keyword, .light .hljs-selector-tag, .light .hljs-meta-keyword, .light .hljs-doctag, .light .hljs-section, .light .hljs-name, .light .hljs-type { color: #1E5C99; } .light .hljs-string, .light .hljs-regexp, .light .hljs-addition, .light .hljs-attribute, .light .hljs-meta-string { color: #0C5A4E; } .light .hljs-number, .light .hljs-literal, .light .hljs-symbol, .light .hljs-bullet, .light .hljs-link { color: #7A3FB0; } .light .hljs-title, .light .hljs-built_in, .light .hljs-title.function_, .light .hljs-function .hljs-title { color: #8A5A00; } .light .hljs-attr, .light .hljs-variable, .light .hljs-template-variable, .light .hljs-class .hljs-title, .light .hljs-selector-attr, .light .hljs-selector-pseudo, .light .hljs-template-tag { color: #1B2433; } .light .hljs-deletion { color: #B4322F; } .light .hljs-meta { color: #1E5C99; } .light .hljs-emphasis { font-style: italic; } .light .hljs-strong { font-weight: 700; } .light .boring { opacity: 0.6; } /* --------------------------------------------------------------------------- 7. Sidebar polish ------------------------------------------------------------------------- */ .sidebar .sidebar-scrollbox { padding: 12px 14px 28px; } .chapter li.chapter-item { line-height: 1.45; margin-top: 2px; } .chapter li a { padding: 4px 8px; border-radius: 5px; } .chapter li a:hover { background: var(--theme-hover); } /* accent left-rail on the active page */ .chapter li a.active { color: var(--sidebar-active); font-weight: 600; background: var(--theme-hover); box-shadow: inset 2px 0 0 var(--sidebar-active); } .chapter li.part-title { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; margin-top: 1.6em; } /* --------------------------------------------------------------------------- 8. Blockquotes / callouts ------------------------------------------------------------------------- */ .content blockquote { border-inline-start-width: 3px; border-radius: 0 6px 6px 0; padding: 0.6em 1em; } /* --------------------------------------------------------------------------- 9. Top menu bar — match the surface, lose the harsh divider ------------------------------------------------------------------------- */ .menu-bar { border-bottom: 1px solid var(--table-border-color); } .light #menu-bar.menu-bar, .light .menu-bar > #menu-bar-sticky { background: var(--sidebar-bg); } /* --------------------------------------------------------------------------- 10. Motion / accessibility ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* visible keyboard focus everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, .chapter li a:focus-visible { outline: 2px solid var(--links); outline-offset: 2px; border-radius: 4px; } /* =========================================================================== 11. GitBook-style layout overlay --------------------------------------------------------------------------- A docs-site aesthetic (Unsloth/GitBook reference): a landing hero + feature card grid (raw HTML in introduction.md), a polished sticky menu bar, a right-hand "On this page" TOC and a multi-column footer (both injected by theme/gitbook.js). Everything is additive: with JS off, the page is plain mdBook; the hero/cards are static HTML that still render. Tokens (light only): --lx-muted #5a6679 secondary text --lx-card-bg #FFFFFF card surface (one step brighter than the paper bg) ======================================================================== */ :root { --lx-muted: #5a6679; --lx-card-bg: #FFFFFF; --lx-radius: 12px; } /* --- Menu bar: logo glyph + frosted sticky surface (0.5.x ids) ---------- */ .menu-title { font-weight: 700; } #mdbook-menu-bar .menu-title::before { content: "🌙"; margin-inline-end: 0.45rem; } .light #mdbook-menu-bar.menu-bar { background: rgba(252, 252, 250, 0.82); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--table-border-color); } /* Type below is sized in `em` (relative to the 16px body), NOT `rem` — see the 62.5% root-font note in §1. Structural offsets (TOC gutter) stay in px. */ /* --- Landing hero ------------------------------------------------------- */ .lx-hero { margin: 0.5em 0 2.4em; } .lx-eyebrow { text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.8em; font-weight: 700; color: var(--links); margin: 0 0 0.7em; } .lx-hero h1, .lx-hero-title { font-size: 2.7em; line-height: 1.08; letter-spacing: -0.022em; margin: 0 0 0.4em; border-bottom: none; /* override the global h1/h2 underline */ padding-bottom: 0; } .lx-hero-sub { font-size: 1.2em; color: var(--lx-muted); max-width: 46ch; margin: 0 0 1.5em; line-height: 1.55; } .lx-cta { display: flex; gap: 0.7em; flex-wrap: wrap; } .lx-btn { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.7em 1.3em; border-radius: 10px; font-weight: 600; font-size: 1em; text-decoration: none !important; transition: transform 0.08s ease, box-shadow 0.18s ease, background 0.15s ease; } .lx-btn-primary { background: var(--links); color: #ffffff !important; box-shadow: 0 2px 10px rgba(30, 92, 153, 0.25); } .lx-btn-primary:hover { background: #17497d; transform: translateY(-1px); } .lx-btn-ghost { background: transparent; color: var(--fg) !important; border: 1px solid var(--table-border-color); } .lx-btn-ghost:hover { background: var(--theme-hover); border-color: #cfd7e6; } /* --- Feature card grid -------------------------------------------------- */ .lx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1em; margin: 1.8em 0 2.8em; } .lx-card { display: block; padding: 1.25em 1.3em; border: 1px solid var(--table-border-color); border-radius: var(--lx-radius); background: var(--lx-card-bg); text-decoration: none !important; color: var(--fg) !important; transition: transform 0.1s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .lx-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 30, 50, 0.09); border-color: #cfd7e6; } .lx-card-icon { font-size: 1.8em; line-height: 1; display: block; margin-bottom: 0.5em; } .lx-card-title { display: block; /* spans are inline by default — force the stack */ font-weight: 650; font-size: 1.08em; margin: 0 0 0.35em; color: var(--fg); } .lx-card-desc { display: block; font-size: 0.92em; color: var(--lx-muted); margin: 0; line-height: 1.5; } /* --- Right-hand "On this page" TOC (injected by gitbook.js) ------------- */ .lx-toc { display: none; } @media (min-width: 1400px) { /* reserve a right gutter (px, not rem) so the centered
shifts left and the fixed TOC never overlaps the prose */ #mdbook-content.content { padding-right: 220px; } .lx-toc { display: block; position: fixed; top: 84px; right: 22px; width: 188px; box-sizing: border-box; max-height: calc(100vh - 110px); overflow-y: auto; overflow-wrap: anywhere; padding-left: 14px; border-left: 1px solid var(--table-border-color); z-index: 1; } } .lx-toc-title { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.72em; font-weight: 700; color: var(--lx-muted); margin: 0 0 0.8em; } .lx-toc ul { list-style: none; margin: 0; padding: 0; } .lx-toc li { margin: 0; } .lx-toc a { display: block; padding: 0.25em 0 0.25em 0.7em; margin-left: -14px; font-size: 0.86em; line-height: 1.4; color: var(--lx-muted); text-decoration: none; border-left: 2px solid transparent; } .lx-toc a:hover { color: var(--fg); } .lx-toc a.lx-h3 { padding-left: 1.6em; font-size: 0.82em; } .lx-toc a.active { color: var(--links); border-left-color: var(--links); font-weight: 600; } .lx-helpful { margin-top: 1.4em; padding-top: 1em; border-top: 1px solid var(--table-border-color); font-size: 0.82em; color: var(--lx-muted); } .lx-helpful-row { display: flex; gap: 0.4em; margin-top: 0.5em; } .lx-helpful button { cursor: pointer; border: 1px solid var(--table-border-color); background: var(--lx-card-bg); border-radius: 7px; padding: 0.25em 0.55em; font-size: 1em; line-height: 1; } .lx-helpful button:hover { background: var(--theme-hover); } /* --- Page pager (mdBook prev/next) → card style ------------------------- */ .nav-chapters, .mobile-nav-chapters { border: 1px solid var(--table-border-color); border-radius: var(--lx-radius); background: var(--lx-card-bg); } /* --- Footer (injected by gitbook.js) ----------------------------------- */ .lx-footer { margin-top: 3.5em; padding-top: 2em; border-top: 1px solid var(--table-border-color); color: var(--lx-muted); font-size: 0.95em; } .lx-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5em 2em; margin-bottom: 1.8em; } .lx-footer-col h4 { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg); margin: 0 0 0.8em; } .lx-footer-col a { display: block; padding: 0.22em 0; color: var(--lx-muted); text-decoration: none; font-size: 0.92em; } .lx-footer-col a:hover { color: var(--links); } .lx-footer-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8em; padding-top: 1.2em; border-top: 1px solid var(--table-border-color); font-size: 0.88em; } .lx-footer-brand { font-weight: 650; color: var(--fg); } .lx-footer-brand::before { content: "🌙 "; }