1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
|
/* Match the source handbook's justified body text, sized to match
robertsspaceindustries.com's own paragraph tokens (see style-guide JSON
referenced below). RSI's own token says weight 600, but that reads as
uncomfortably heavy/bold across a full page of long-form justified text
(unlike RSI's own short UI copy) - use normal weight instead. */
.vp-doc p,
.vp-doc li {
text-align: justify;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.14px;
font-weight: 400;
}
/**
* ============================================================================
* "HUD" theme - ported from 174bg/manager/public/theme.css so the two
* 174bg sites (manager.174bg.net and handbook.174bg.net) share a look: a
* near-black backdrop with a faint accent grid + radial glow, Sora
* headings/body text, Bai Jamjuree nav/button chrome, and glassy
* accent-bordered panels. Manager has no light mode at all, so this is
* applied unconditionally (see `appearance: "force-dark"` in config.mts)
* rather than scoped to `.dark`.
*
* 2026-07-13: retinted + refonted to align with robertsspaceindustries.com's
* own design tokens (see .gitignored/context.dev/style-guides/
* robertspaceindustries.com.json, exported from a CSS Stats scan of the live
* site) - a single blue accent (#54adf7) on true black in place of the
* earlier arbitrary navy/cyan pairing, Sora/Bai Jamjuree in place of
* Orbitron/Rajdhani, flat slate-bordered "card" panels in place of
* glass-blur ones, and heading sizes/weights/link treatment matched to
* RSI's own type scale.
* ============================================================================
*/
:root {
/* Palette retinted to robertsspaceindustries.com's own design tokens - a
single blue accent on true black instead of the earlier navy/cyan pair.
See .gitignored/context.dev/style-guides/robertspaceindustries.com.json
(exported via a CSS Stats scan of the live site) for the source values:
accent #54adf7, background #000000, text #ffffff, card border #374151. */
--hud-bg: #000000;
--hud-bg-grid: rgba(84, 173, 247, 0.05);
--hud-panel: rgba(17, 17, 20, 0.75);
--hud-panel-solid: #0a0a0c;
--hud-panel-border: rgba(55, 65, 81, 0.6);
--hud-panel-border-strong: rgba(84, 173, 247, 0.55);
--hud-text: #ffffff;
--hud-text-dim: #9ca3af;
--hud-accent: #54adf7;
--hud-accent-2: color-mix(in srgb, var(--hud-accent) 65%, white);
--hud-row-alt: rgba(84, 173, 247, 0.04);
--hud-shadow-sm: rgba(0, 0, 0, 0.4) 0px 0px 8px 0px;
/* Map onto VitePress's own theme variables. */
--vp-font-family-base: "Sora", system-ui, sans-serif;
--vp-c-bg: var(--hud-bg);
--vp-c-bg-alt: var(--hud-panel-solid);
--vp-c-bg-elv: var(--hud-panel-solid);
--vp-c-bg-soft: var(--hud-panel-solid);
--vp-c-border: var(--hud-panel-border);
--vp-c-divider: var(--hud-panel-border);
--vp-c-gutter: var(--hud-panel-border);
--vp-c-text-1: var(--hud-text);
--vp-c-text-2: var(--hud-text-dim);
--vp-c-text-3: var(--hud-text-dim);
--vp-c-brand-1: var(--hud-accent);
--vp-c-brand-2: var(--hud-accent-2);
--vp-c-brand-3: var(--hud-accent);
--vp-c-brand-soft: rgba(84, 173, 247, 0.16);
/* VitePress applies these to several nav/sidebar-internal elements (e.g.
`.content-body`, the sidebar curtain) directly, not just the outer
`.VPNavBar`/`.VPSidebar`. Setting them here (rather than force-overriding
just the outer elements with `!important`) keeps every part of the nav
bar - including bits VitePress itself makes transparent around the
title on wide/sidebar layouts - the same glass color instead of a
patchwork of the wrong shade. */
--vp-nav-bg-color: var(--hud-panel);
--vp-sidebar-bg-color: var(--hud-panel);
}
/* Faint accent-blue grid + top glow behind the whole site, like the Manager page. */
html,
body {
background-color: var(--hud-bg);
background-image:
radial-gradient(
ellipse 80% 60% at 50% -10%,
rgba(84, 173, 247, 0.18),
transparent 60%
),
linear-gradient(var(--hud-bg-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--hud-bg-grid) 1px, transparent 1px);
background-size:
100% 100%,
44px 44px,
44px 44px;
background-attachment: fixed;
}
/* Nav bar and sidebar become frosted glass panels over that grid. Only blur
on the outer elements - `.content-body` sits *inside* `.VPNavBar`, so
giving it its own `backdrop-filter` too double-blurs the (already blurred)
layer beneath it, which compounds into a flat near-black block instead of
a translucent panel. */
.VPNavBar,
.VPSidebar {
backdrop-filter: blur(10px);
}
.VPNavBar {
border-bottom: 1px solid var(--hud-panel-border);
box-shadow: var(--hud-shadow-sm);
}
.VPSidebar {
border-right: 1px solid var(--hud-panel-border);
}
/* Bai Jamjuree for nav/sidebar/table chrome, matching the font
robertsspaceindustries.com uses for its own buttons/UI labels. Headings
intentionally do NOT get a separate font here - RSI's style guide uses the
same family for both headings and paragraphs, so they just inherit
--vp-font-family-base (Sora) like the rest of the body copy. */
.VPNavBarTitle .title,
.VPNavBarMenuLink,
.VPSidebarItem.level-0 > .item .text {
font-family: "Bai Jamjuree", sans-serif;
}
.VPNavBarTitle .title {
color: var(--hud-accent);
/* Bai Jamjuree (like the Orbitron it replaced) is noticeably wider than
the default font. VitePress gives the title a fixed-width column
matching the sidebar, so shrink the text (and drop the extra
letter-spacing) to fit - otherwise it overflows past its column and
visually overlaps the search box/nav links next to it on wide
(sidebar-visible) layouts. `text-overflow: ellipsis` is a safety net in
case it's ever still too wide (e.g. a longer title in the future). */
font-size: 0.75rem;
letter-spacing: 0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.VPNavBarMenuLink,
.VPSidebarItem.level-0 > .item .text {
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.8em;
}
/* Heading sizes/weights matched to robertsspaceindustries.com's own type
scale (h1 64px/72px line-height, h2 24px/29px, h3 20px/24px, h4 18px/22px,
all weight 600 - see the style-guide JSON referenced above). The h1
gradient-text treatment is kept as a small branding accent (both stops now
share RSI's single accent hue instead of the old unrelated navy/cyan
pairing); the large colored text-shadow glow was dropped since RSI's own
shadow scale has nothing that dramatic - its only real shadow token is a
small, black, 8px-blur one (see --hud-shadow-sm above). h2/h3/h4 also drop
the uppercase-accent-color treatment in favor of RSI's plain white
headings. */
.vp-doc h1 {
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.2;
font-size: 2.25rem;
background: linear-gradient(120deg, var(--hud-accent), var(--hud-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@media (min-width: 768px) {
.vp-doc h1 {
font-size: 64px;
line-height: 72px;
}
}
.vp-doc h2 {
font-size: 24px;
line-height: 29px;
letter-spacing: 0;
font-weight: 600;
}
.vp-doc h3 {
font-size: 20px;
line-height: 24px;
letter-spacing: 0;
font-weight: 600;
}
.vp-doc h4 {
font-size: 18px;
line-height: 22px;
letter-spacing: 0;
font-weight: 600;
}
/* robertsspaceindustries.com's own "link" component is just white text with
a permanent underline (not a distinct accent color) - VitePress's default
theme already gives .vp-doc a a permanent underline, so this only needs to
recolor it (white at rest, accent on hover) rather than reimplementing the
underline-on-hover-only treatment this used to have. */
.vp-doc a:not(.header-anchor) {
color: var(--hud-text);
}
.vp-doc a:not(.header-anchor):hover {
color: var(--hud-accent);
}
/* Ranks table styled like Manager's data tables. */
.vp-doc table {
border-collapse: collapse;
}
.vp-doc thead th {
font-family: "Bai Jamjuree", sans-serif;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--hud-accent);
border-bottom: 2px solid var(--hud-panel-border-strong);
}
.vp-doc tbody tr:nth-child(even) {
background: var(--hud-row-alt);
}
.vp-doc tbody tr:hover {
background: rgba(84, 173, 247, 0.1);
}
/**
* Role "Prerequisites" lists use a `::: info` container. robertsspaceindustries.com's
* own "card" component is a flat solid-black panel with a plain slate border
* and no blur/shadow (unlike the glass-panel treatment used elsewhere in
* this theme) - match that here instead of VitePress's default boxed
* callout. VitePress's own `.custom-block` already sets an 8px border-radius,
* which happens to match RSI's card radius exactly, so it's left alone.
*/
.custom-block.info {
background: var(--hud-bg);
border: 1px solid var(--hud-panel-border);
color: var(--hud-text);
}
.custom-block.info .custom-block-title {
font-family: "Bai Jamjuree", sans-serif;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--hud-accent);
}
/**
* The local search modal's input row (`.search-bar`) has a border but no
* background of its own by default, so it blends into the modal shell
* behind it and barely reads as a distinct field. Give it its own panel
* shade to match the rest of the HUD chrome.
*/
.VPLocalSearchBox .search-bar {
background-color: var(--hud-panel-solid);
}
/**
* Same problem for the collapsed search button that sits in the top bar:
* VitePress gives it `background-color: var(--vp-c-bg-alt)` (the same solid
* navy as the button in the modal) but only adds a visible border on hover,
* so at rest it barely stands out against the nav bar's translucent glass
* behind it. Add a persistent border to match the rest of the HUD chrome.
*/
.DocSearch-Button {
border-color: var(--hud-panel-border);
}
|
