/* ──────────────────────────────────────────────────────────────────────
Orion docs - brand layer on top of starlight-theme-rapide
Rapide (Vitesse-inspired) owns the base palette, components, and code
themes. Everything here is the Orion brand laid over it: violet accent,
the celestial typefaces, the Orion's-belt sidebar marker, and the ambient
nebula glow.
These rules are intentionally UNLAYERED. Rapide ships its styles inside
`@layer rapide` (after `@layer starlight`), and unlayered CSS always wins
over any cascade layer - so the brand reliably overrides the theme without
fighting specificity. See the Rapide customization guide.
────────────────────────────────────────────────────────────────────── */
/* ── Base scale ─────────────────────────────────────────────────────────
Bump the root font size so the whole rem-based type/space scale grows a
touch (16px → 17px). Tune this single value to scale everything. */
html {
font-size: 106.25%;
}
/* ── Typefaces ──────────────────────────────────────────────────────────
Fonts are preconnected + loaded via <head> links in astro.config.mjs. */
:root {
--orion-font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
--orion-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
--orion-font-display: 'Space Grotesk', 'Hanken Grotesk', ui-sans-serif, sans-serif;
/* Wire Starlight's font tokens to the Orion typefaces. */
--sl-font: var(--orion-font-sans);
--sl-font-mono: var(--orion-font-mono);
/* Signature duotone - Orion's belt: star-cyan → nebula-violet */
--orion-star: #67e8f9;
--orion-nebula: #a78bff;
--orion-glow: linear-gradient(120deg, #67e8f9 0%, #a78bff 100%);
}
/* ── Accent: re-skin Rapide's green to Orion nebula-violet ───────────────
Rapide derives its accent from an OKLCH hue; we override the three accent
stops directly so links, active nav, and focus rings read violet. */
:root,
::backdrop {
--sl-hue-accent: 292;
--sl-color-accent-low: oklch(22% 0.06 292);
--sl-color-accent: oklch(60% 0.18 292);
--sl-color-accent-high: oklch(87% 0.06 292);
}
:root[data-theme='light'],
[data-theme='light'] ::backdrop {
--sl-color-accent-low: oklch(95% 0.025 292);
--sl-color-accent: oklch(53% 0.19 292);
--sl-color-accent-high: oklch(43% 0.15 292);
}
/* ── Display type on headings + wordmark ────────────────────────────────── */
.sl-markdown-content :is(h1, h2, h3, h4),
.content-panel h1,
h1#_top,
.site-title {
font-family: var(--orion-font-display);
letter-spacing: -0.018em;
}
.sl-markdown-content :is(h1, h2) {
font-weight: 700;
}
.site-title {
font-weight: 700;
font-size: var(--sl-text-lg);
}
/* The dark-theme logo (orion-logo.png) is a white mark on a near-black
(#080A12) square. `lighten` replaces anything darker than the nav with the
nav colour, dropping the tile entirely while the white star stays - no need
to edit the asset. */
[data-theme='dark'] .site-title img {
mix-blend-mode: lighten;
}
/* ── Ambient void + starfield ───────────────────────────────────────────
Dark: two faint nebula glows + a tiled constellation starfield (white with
a few cyan/violet stars). Light: just the starfield, brand-tinted and very
faint. Static - no twinkle - so it reads as atmosphere, not animation.
The starfield tile is an inline SVG, repeated; glows sit on top, no-repeat. */
:root {
--orion-stars: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Ccircle%20cx='24'%20cy='30'%20r='1'%20fill='%23a78bff'%20opacity='.16'/%3E%3Ccircle%20cx='168'%20cy='54'%20r='0.8'%20fill='%2367e8f9'%20opacity='.13'/%3E%3Ccircle%20cx='92'%20cy='120'%20r='1.2'%20fill='%23a78bff'%20opacity='.15'/%3E%3Ccircle%20cx='44'%20cy='166'%20r='0.7'%20fill='%2367e8f9'%20opacity='.12'/%3E%3Ccircle%20cx='182'%20cy='150'%20r='1'%20fill='%23a78bff'%20opacity='.14'/%3E%3Ccircle%20cx='120'%20cy='182'%20r='0.6'%20fill='%2367e8f9'%20opacity='.10'/%3E%3Ccircle%20cx='72'%20cy='72'%20r='0.5'%20fill='%23a78bff'%20opacity='.10'/%3E%3Ccircle%20cx='150'%20cy='110'%20r='0.6'%20fill='%2367e8f9'%20opacity='.10'/%3E%3C/svg%3E");
}
[data-theme='dark'] {
--orion-stars: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Ccircle%20cx='24'%20cy='30'%20r='1'%20fill='%23fff'%20opacity='.30'/%3E%3Ccircle%20cx='168'%20cy='54'%20r='0.8'%20fill='%23fff'%20opacity='.22'/%3E%3Ccircle%20cx='92'%20cy='120'%20r='1.2'%20fill='%2367e8f9'%20opacity='.30'/%3E%3Ccircle%20cx='44'%20cy='166'%20r='0.7'%20fill='%23fff'%20opacity='.20'/%3E%3Ccircle%20cx='182'%20cy='150'%20r='1'%20fill='%23a78bff'%20opacity='.26'/%3E%3Ccircle%20cx='120'%20cy='182'%20r='0.6'%20fill='%23fff'%20opacity='.18'/%3E%3Ccircle%20cx='72'%20cy='72'%20r='0.5'%20fill='%23fff'%20opacity='.16'/%3E%3Ccircle%20cx='150'%20cy='110'%20r='0.6'%20fill='%23fff'%20opacity='.16'/%3E%3C/svg%3E");
}
body {
background-image: var(--orion-stars);
background-repeat: repeat;
background-size: 200px 200px;
background-attachment: fixed;
}
[data-theme='dark'] body {
background-image:
radial-gradient(900px 520px at 88% -8%, rgba(167, 139, 255, 0.10), transparent 60%),
radial-gradient(680px 460px at 2% -4%, rgba(103, 232, 249, 0.06), transparent 55%),
var(--orion-stars);
background-repeat: no-repeat, no-repeat, repeat;
background-size: auto, auto, 200px 200px;
background-attachment: fixed, fixed, fixed;
}
/* ── Links: gradient hover underline ─────────────────────────────────── */
.sl-markdown-content a:not(:where(.not-content *)) {
text-decoration-color: color-mix(in srgb, var(--orion-nebula) 55%, transparent);
text-underline-offset: 0.18em;
transition: text-decoration-color 0.15s ease;
}
.sl-markdown-content a:not(:where(.not-content *)):hover {
text-decoration-color: var(--orion-star);
}
/* ── Sidebar: Orion's-belt active marker ─────────────────────────────────
The current page gets a faint nebula wash and three stacked "belt" stars. */
#starlight__sidebar a[aria-current='page'] {
position: relative;
background: linear-gradient(90deg, color-mix(in srgb, var(--orion-nebula) 16%, transparent), transparent 78%);
border-radius: 0.3rem;
}
#starlight__sidebar a[aria-current='page']::before {
content: '';
position: absolute;
left: 0.15rem;
top: 50%;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--orion-star);
box-shadow:
0 -5px 0 var(--orion-nebula),
0 5px 0 var(--orion-nebula);
transform: translateY(-50%);
}
/* ── Content images / diagrams ───────────────────────────────────────────
The blog diagrams have dark backgrounds; a hairline border + radius frames
them cleanly in both themes and centers them so wide diagrams sit nicely. */
.sl-markdown-content img {
border-radius: 0.6rem;
border: 1px solid var(--sl-color-gray-5);
display: block;
margin-inline: auto;
/* Keep tall (portrait) diagrams from dominating the page; ratio preserved. */
max-height: 640px;
width: auto;
height: auto;
}
/* ── Cards + link-cards: hairline nebula border + lift on hover ─────────── */
.card,
.sl-link-card {
transition: border-color 0.18s ease, transform 0.18s ease;
}
.card:hover,
.sl-link-card:hover {
border-color: color-mix(in srgb, var(--orion-nebula) 60%, var(--sl-color-gray-5));
transform: translateY(-2px);
}
.card .icon {
color: var(--orion-star);
}
/* ── Accessibility floor ───────────────────────────────────────────────── */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
outline: 2px solid var(--orion-star);
outline-offset: 2px;
border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}