/* ========================================================================== Stellar — docs theme overrides Layers the landing page's deep-space look on top of the jekyll-text-theme "dark" skin. Loaded via _includes/head/custom.html, after the theme's main.css, so these rules win (with a little !important where the skin sets colours through compiled component classes). ========================================================================== */ :root { --space-bg-top: #060914; --space-bg-bottom: #0b1224; --accent: #7c9cff; --accent-strong: #a78bfa; --text: #e7ecf6; --text-dim: #9aa6c2; --panel: rgba(20, 28, 52, 0.45); --panel-border: rgba(124, 156, 255, 0.16); --font-head: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Deep-space backdrop: gradient on , a faint fixed starfield behind content via body::before. The docs keep things calm — the stars are static (no parallax) so they don't distract from reading. */ html { background: linear-gradient(180deg, var(--space-bg-top) 0%, var(--space-bg-bottom) 100%) !important; background-attachment: fixed !important; } body { background: transparent !important; font-size: 1rem; color: var(--text) !important; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1px 1px at 25px 35px, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1px 1px at 160px 60px, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1.4px 1.4px at 50px 70px, rgba(255, 255, 255, 0.75), transparent), radial-gradient(1.4px 1.4px at 280px 150px, rgba(220, 230, 255, 0.7), transparent), radial-gradient(2px 2px at 300px 200px, #dbe6ff, transparent); background-size: 320px 280px; opacity: 0.5; } /* Make the structural panels translucent + glassy so the starfield shows through, instead of the skin's flat #121212 / #202020 blocks. */ .page__viewport, .layout--page, .main, .page__main, .page__main-inner, .page__content { background: transparent !important; } .header, .page__header .header { background: rgba(6, 9, 20, 0.55) !important; backdrop-filter: blur(8px); border-bottom: 1px solid var(--panel-border); } .page__sidebar, .page__aside { background: rgba(10, 15, 31, 0.35) !important; backdrop-filter: blur(6px); } .page__footer .footer, .footer { background: rgba(6, 9, 20, 0.55) !important; border-top: 1px solid var(--panel-border); } /* Headings in Space Grotesk to match the landing page. */ .header__title, .header__brand, .page__content h1, .page__content h2, .page__content h3, .page__content h4 { font-family: var(--font-head) !important; } /* Accent recolouring: links, active nav item, TOC highlight. */ .page__content a, .navigation__item a:hover, .toc-aside a:hover { color: var(--accent) !important; } .navigation__item--active a, .toc-aside .active a { color: var(--accent-strong) !important; } /* Subtle accent underline for in-content links on hover. */ .page__content a:hover { color: var(--accent-strong) !important; } /* Inline code / tables read better with a faint glass fill. */ .page__content :not(pre) > code { background: rgba(124, 156, 255, 0.1) !important; color: #d7e0ff !important; } /* Blockquotes get an accent edge. */ .page__content blockquote { border-left: 3px solid var(--accent) !important; background: rgba(124, 156, 255, 0.06); } /* The mobile sidebar overlay/mask — keep it dark. */ .page__mask { background: rgba(0, 0, 0, 0.7) !important; } div.highlighter-rouge { margin-top: 1.5rem; margin-bottom: 1.5rem; } pre.highlight { padding-left: 10px; border-radius: 4px; } .page__content pre { } /* Code font */ .page__content figure.highlight, .page__content .highlighter-rouge, .page__content pre, .page__content code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 1.05rem !important; line-height: 1.5 !important; } /* Floating code blocks with a soft halo */ .page__content div.highlighter-rouge { border-radius: 10px !important; box-shadow: 0 0 0 1px rgba(124, 156, 255, 0.18), /* crisp edge ring */ 0 0 18px 4px rgba(124, 156, 255, 0.22), /* the halo (soft accent glow) */ 0 14px 32px -4px rgba(0, 0, 0, 0.65) /* drop shadow lift off page */ !important; } .page__content div.highlighter-rouge pre.highlight { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; } .page__content code.highlighter-rouge { border-radius: 3px !important; box-shadow: 0 0 0 1px rgba(124, 156, 255, 0.18); padding-left:4px; padding-right:4px; } /* Inline SVG diagrams (e.g. draw.io exports) ship both light and dark colours via CSS light-dark(). The docs page defaults to a light colour-scheme, which resolves them to black strokes/text — illegible on the dark background. Opt the diagrams into the dark variant they already contain. */ .page__content svg { color-scheme: dark; }