@abstractdata/starlight-theme 0.3.1 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/README.md +7 -2
  2. package/bin/install-skills.js +251 -0
  3. package/package.json +12 -6
  4. package/scripts/build-python-docs.mjs +385 -0
  5. package/scripts/build-ts-docs.mjs +349 -0
  6. package/scripts/python-autodoc.json +10 -0
  7. package/scripts/ts-autodoc.json +10 -0
  8. package/skills/claude/CLAUDE.md +46 -0
  9. package/skills/claude/abstract-data-docs-author/SKILL.md +305 -0
  10. package/skills/claude/abstract-data-setup/SKILL.md +555 -0
  11. package/skills/cursor/abstract-data-docs-author.mdc +311 -0
  12. package/skills/cursor/abstract-data-setup.mdc +561 -0
  13. package/skills/cursor/welcome.mdc +29 -0
  14. package/skills/github/copilot-instructions.md +893 -0
  15. package/src/components/SocialIcons.astro +17 -2
  16. package/src/components/VersionPicker.astro +238 -0
  17. package/src/index.ts +17 -1
  18. package/src/styles/hud.css +222 -210
  19. package/src/styles/theme.css +444 -432
package/src/styles/theme.css CHANGED
@@ -13,463 +13,475 @@
13
13
  /* ------------------------------------------------------------
14
14
  Palette tokens — overridden onto Starlight's CSS vars
15
15
  ------------------------------------------------------------ */
16
- :root {
17
- /* Brand atoms (always available regardless of theme) */
18
- --ad-cyan: #00d9ff;
19
- --ad-cyan-deep: #007a8e;
20
- --ad-gold: #d4af37;
21
- --ad-gold-deep: #8a6d1f;
22
- --ad-burgundy: #8b2635;
23
- --ad-burgundy-deep: #7a1f2c;
24
- --ad-magenta: #ff00de;
25
- --ad-charcoal: #0a0a0a;
26
- --ad-surface-dark: #101116;
27
- --ad-cream: #faf7f2;
28
-
29
- /* Typography (variable family names from @fontsource-variable; static name
30
- fallback in case a consumer re-pins to non-variable @fontsource) */
31
- --sl-font: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
32
- --sl-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
33
- --ad-font-display: 'Orbitron Variable', 'Orbitron', sans-serif;
34
-
35
- /* Sizing tweaks */
36
- --sl-content-width: 52rem;
37
- }
38
16
 
39
17
  /* ------------------------------------------------------------
40
- Dark theme (HUD Dark / Calm Dark — same palette)
18
+ Cascade layer declaration — keep above the wrapped block.
19
+ The whole theme lives inside `@layer abstract-data` so any
20
+ unlayered user CSS in `customCss` automatically wins without
21
+ needing !important. Order: Starlight ships its `starlight`
22
+ layer (0.34+); we sit just above it; user CSS sits above us.
41
23
  ------------------------------------------------------------ */
42
- :root[data-theme='dark'] {
43
- --sl-color-accent-low: rgba(0, 217, 255, 0.10);
44
- --sl-color-accent: var(--ad-cyan);
45
- --sl-color-accent-high: var(--ad-cyan);
46
- --sl-color-text-accent: var(--ad-cyan);
24
+ @layer abstract-data;
47
25
 
48
- --sl-color-bg: var(--ad-charcoal);
49
- --sl-color-bg-nav: var(--ad-surface-dark);
50
- --sl-color-bg-sidebar: var(--ad-surface-dark);
51
- --sl-color-bg-inline-code: #14151a;
52
- --sl-color-hairline: #2a2c34;
53
- --sl-color-hairline-light: #25262d;
54
- --sl-color-hairline-shade: #1a1b20;
26
+ @layer abstract-data {
27
+ :root {
28
+ /* Brand atoms (always available regardless of theme) */
29
+ --ad-cyan: #00d9ff;
30
+ --ad-cyan-deep: #007a8e;
31
+ --ad-gold: #d4af37;
32
+ --ad-gold-deep: #8a6d1f;
33
+ --ad-burgundy: #8b2635;
34
+ --ad-burgundy-deep: #7a1f2c;
35
+ --ad-magenta: #ff00de;
36
+ --ad-charcoal: #0a0a0a;
37
+ --ad-surface-dark: #101116;
38
+ --ad-cream: #faf7f2;
55
39
 
56
- --sl-color-text: #f0f0f5;
57
- --sl-color-text-invert: var(--ad-charcoal);
58
- --sl-color-gray-1: #ffffff;
59
- --sl-color-gray-2: #d8d8df;
60
- --sl-color-gray-3: #b8b8c0;
61
- --sl-color-gray-4: #8a8a93;
62
- --sl-color-gray-5: #5a5b62;
63
- --sl-color-gray-6: #2a2c34;
40
+ /* Typography (variable family names from @fontsource-variable; static name
41
+ fallback in case a consumer re-pins to non-variable @fontsource) */
42
+ --sl-font: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
43
+ --sl-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
44
+ --ad-font-display: 'Orbitron Variable', 'Orbitron', sans-serif;
64
45
 
65
- --ad-text-dim: #8a8a93;
66
- --ad-callout-cyan-bg: rgba(0, 217, 255, 0.06);
67
- --ad-callout-gold-bg: rgba(212, 175, 55, 0.06);
68
- --ad-callout-burgundy-bg: rgba(192, 74, 91, 0.08);
69
- }
46
+ /* Sizing tweaks */
47
+ --sl-content-width: 52rem;
48
+ }
70
49
 
71
- /* ------------------------------------------------------------
72
- Light theme (cream / burgundy / deeper teal)
73
- ------------------------------------------------------------ */
74
- :root[data-theme='light'] {
75
- --sl-color-accent-low: rgba(0, 122, 142, 0.10);
76
- --sl-color-accent: var(--ad-cyan-deep);
77
- --sl-color-accent-high: var(--ad-cyan-deep);
78
- --sl-color-text-accent: var(--ad-cyan-deep);
50
+ /* ------------------------------------------------------------
51
+ Dark theme (HUD Dark / Calm Dark — same palette)
52
+ ------------------------------------------------------------ */
53
+ :root[data-theme='dark'] {
54
+ --sl-color-accent-low: rgba(0, 217, 255, 0.10);
55
+ --sl-color-accent: var(--ad-cyan);
56
+ --sl-color-accent-high: var(--ad-cyan);
57
+ --sl-color-text-accent: var(--ad-cyan);
79
58
 
80
- --sl-color-bg: var(--ad-cream);
81
- --sl-color-bg-nav: #ffffff;
82
- --sl-color-bg-sidebar: #ffffff;
83
- --sl-color-bg-inline-code: #f4efe5;
84
- --sl-color-hairline: #d8d0bf;
85
- --sl-color-hairline-light: #e6dfd1;
86
- --sl-color-hairline-shade: #ece5d5;
59
+ --sl-color-bg: var(--ad-charcoal);
60
+ --sl-color-bg-nav: var(--ad-surface-dark);
61
+ --sl-color-bg-sidebar: var(--ad-surface-dark);
62
+ --sl-color-bg-inline-code: #14151a;
63
+ --sl-color-hairline: #2a2c34;
64
+ --sl-color-hairline-light: #25262d;
65
+ --sl-color-hairline-shade: #1a1b20;
87
66
 
88
- --sl-color-text: #18181c;
89
- --sl-color-text-invert: #ffffff;
90
- --sl-color-gray-1: #0a0a0a;
91
- --sl-color-gray-2: #18181c;
92
- --sl-color-gray-3: #2a2a30;
93
- --sl-color-gray-4: #5e5e66;
94
- --sl-color-gray-5: #8e8a7e;
95
- --sl-color-gray-6: #d8d0bf;
67
+ --sl-color-text: #f0f0f5;
68
+ --sl-color-text-invert: var(--ad-charcoal);
69
+ --sl-color-gray-1: #ffffff;
70
+ --sl-color-gray-2: #d8d8df;
71
+ --sl-color-gray-3: #b8b8c0;
72
+ --sl-color-gray-4: #8a8a93;
73
+ --sl-color-gray-5: #5a5b62;
74
+ --sl-color-gray-6: #2a2c34;
96
75
 
97
- --ad-text-dim: #5e5e66;
98
- --ad-callout-cyan-bg: rgba(0, 122, 142, 0.06);
99
- --ad-callout-gold-bg: rgba(138, 109, 31, 0.08);
100
- --ad-callout-burgundy-bg: rgba(122, 31, 44, 0.06);
101
- }
76
+ --ad-text-dim: #8a8a93;
77
+ --ad-callout-cyan-bg: rgba(0, 217, 255, 0.06);
78
+ --ad-callout-gold-bg: rgba(212, 175, 55, 0.06);
79
+ --ad-callout-burgundy-bg: rgba(192, 74, 91, 0.08);
80
+ }
102
81
 
103
- /* ------------------------------------------------------------
104
- Display typography — Orbitron on hero + h1/h2 only
105
- (h3+ stays in Inter for body readability)
106
- ------------------------------------------------------------ */
107
- .sl-markdown-content h1,
108
- .sl-markdown-content h2,
109
- header.header .site-title,
110
- .sidebar-pane .group-label,
111
- .content-panel h1[data-page-title] {
112
- font-family: var(--ad-font-display);
113
- letter-spacing: 0.01em;
114
- font-weight: 700;
115
- }
82
+ /* ------------------------------------------------------------
83
+ Light theme (cream / burgundy / deeper teal)
84
+ ------------------------------------------------------------ */
85
+ :root[data-theme='light'] {
86
+ --sl-color-accent-low: rgba(0, 122, 142, 0.10);
87
+ --sl-color-accent: var(--ad-cyan-deep);
88
+ --sl-color-accent-high: var(--ad-cyan-deep);
89
+ --sl-color-text-accent: var(--ad-cyan-deep);
116
90
 
117
- /* Site title in top nav */
118
- header.header .site-title {
119
- font-size: 0.85rem;
120
- letter-spacing: 0.16em;
121
- text-transform: uppercase;
122
- }
91
+ --sl-color-bg: var(--ad-cream);
92
+ --sl-color-bg-nav: #ffffff;
93
+ --sl-color-bg-sidebar: #ffffff;
94
+ --sl-color-bg-inline-code: #f4efe5;
95
+ --sl-color-hairline: #d8d0bf;
96
+ --sl-color-hairline-light: #e6dfd1;
97
+ --sl-color-hairline-shade: #ece5d5;
123
98
 
124
- /* Sidebar group labels */
125
- .sidebar-pane .group-label,
126
- .sidebar-pane .group-label > span {
127
- font-family: var(--ad-font-display);
128
- font-size: 0.7rem;
129
- letter-spacing: 0.16em;
130
- text-transform: uppercase;
131
- }
99
+ --sl-color-text: #18181c;
100
+ --sl-color-text-invert: #ffffff;
101
+ --sl-color-gray-1: #0a0a0a;
102
+ --sl-color-gray-2: #18181c;
103
+ --sl-color-gray-3: #2a2a30;
104
+ --sl-color-gray-4: #5e5e66;
105
+ --sl-color-gray-5: #8e8a7e;
106
+ --sl-color-gray-6: #d8d0bf;
132
107
 
133
- /* ------------------------------------------------------------
134
- H1 signature: cyan→gold gradient bracket bar on the left
135
- ------------------------------------------------------------ */
136
- .sl-markdown-content > h1:first-child,
137
- .content-panel h1[data-page-title],
138
- .hero h1 {
139
- position: relative;
140
- padding-left: 14px;
141
- }
142
- .sl-markdown-content > h1:first-child::before,
143
- .content-panel h1[data-page-title]::before,
144
- .hero h1::before {
145
- content: '';
146
- position: absolute;
147
- left: 0;
148
- top: 0.3em;
149
- bottom: 0.3em;
150
- width: 3px;
151
- background: linear-gradient(180deg, var(--ad-cyan), var(--ad-gold));
152
- }
153
- :root[data-theme='light'] .sl-markdown-content > h1:first-child::before,
154
- :root[data-theme='light'] .content-panel h1[data-page-title]::before,
155
- :root[data-theme='light'] .hero h1::before {
156
- background: linear-gradient(180deg, var(--ad-cyan-deep), var(--ad-burgundy));
157
- }
108
+ --ad-text-dim: #5e5e66;
109
+ --ad-callout-cyan-bg: rgba(0, 122, 142, 0.06);
110
+ --ad-callout-gold-bg: rgba(138, 109, 31, 0.08);
111
+ --ad-callout-burgundy-bg: rgba(122, 31, 44, 0.06);
112
+ }
158
113
 
159
- /* ------------------------------------------------------------
160
- Inline code — gold on dark, burgundy on light
161
- ------------------------------------------------------------ */
162
- .sl-markdown-content :not(pre) > code {
163
- color: var(--ad-gold);
164
- border: 1px solid var(--sl-color-hairline);
165
- border-radius: 4px;
166
- padding: 1px 6px;
167
- font-size: 0.9em;
168
- }
169
- :root[data-theme='light'] .sl-markdown-content :not(pre) > code {
170
- color: var(--ad-burgundy-deep);
171
- }
114
+ /* ------------------------------------------------------------
115
+ Display typography — Orbitron on hero + h1/h2 only
116
+ (h3+ stays in Inter for body readability)
117
+ ------------------------------------------------------------ */
118
+ .sl-markdown-content h1,
119
+ .sl-markdown-content h2,
120
+ header.header .site-title,
121
+ .sidebar-pane .group-label,
122
+ .content-panel h1[data-page-title] {
123
+ font-family: var(--ad-font-display);
124
+ letter-spacing: 0.01em;
125
+ font-weight: 700;
126
+ }
172
127
 
173
- /* ------------------------------------------------------------
174
- Callouts (asides) — branded variants
175
- ------------------------------------------------------------ */
176
- .starlight-aside {
177
- border-left-width: 3px;
178
- border-radius: 8px;
179
- background: var(--ad-callout-cyan-bg);
180
- }
181
- .starlight-aside--tip { border-color: var(--ad-cyan); background: var(--ad-callout-cyan-bg); }
182
- .starlight-aside--note { border-color: var(--ad-cyan); background: var(--ad-callout-cyan-bg); }
183
- .starlight-aside--caution { border-color: var(--ad-gold); background: var(--ad-callout-gold-bg); }
184
- .starlight-aside--danger { border-color: var(--ad-burgundy); background: var(--ad-callout-burgundy-bg); }
185
- :root[data-theme='light'] .starlight-aside--tip,
186
- :root[data-theme='light'] .starlight-aside--note { border-color: var(--ad-cyan-deep); }
187
- :root[data-theme='light'] .starlight-aside--caution { border-color: var(--ad-gold-deep); }
188
- :root[data-theme='light'] .starlight-aside--danger { border-color: var(--ad-burgundy-deep); }
128
+ /* Site title in top nav */
129
+ header.header .site-title {
130
+ font-size: 0.85rem;
131
+ letter-spacing: 0.16em;
132
+ text-transform: uppercase;
133
+ }
189
134
 
190
- .starlight-aside__title {
191
- font-family: var(--ad-font-display);
192
- font-size: 0.7rem;
193
- letter-spacing: 0.16em;
194
- text-transform: uppercase;
195
- }
135
+ /* Sidebar group labels */
136
+ .sidebar-pane .group-label,
137
+ .sidebar-pane .group-label > span {
138
+ font-family: var(--ad-font-display);
139
+ font-size: 0.7rem;
140
+ letter-spacing: 0.16em;
141
+ text-transform: uppercase;
142
+ }
196
143
 
197
- /* ------------------------------------------------------------
198
- Code blocks — bracket dot indicator + cyan border accent
199
- ------------------------------------------------------------ */
200
- .expressive-code .frame.is-terminal,
201
- .expressive-code .frame.has-title {
202
- border: 1px solid var(--sl-color-hairline);
203
- border-radius: 8px;
204
- overflow: hidden;
205
- }
206
- .expressive-code .frame .header {
207
- font-family: var(--sl-font-mono);
208
- font-size: 0.7rem;
209
- letter-spacing: 0.05em;
210
- border-bottom: 1px solid var(--sl-color-hairline);
211
- }
144
+ /* ------------------------------------------------------------
145
+ H1 signature: cyan→gold gradient bracket bar on the left
146
+ ------------------------------------------------------------ */
147
+ .sl-markdown-content > h1:first-child,
148
+ .content-panel h1[data-page-title],
149
+ .hero h1 {
150
+ position: relative;
151
+ padding-left: 14px;
152
+ }
153
+ .sl-markdown-content > h1:first-child::before,
154
+ .content-panel h1[data-page-title]::before,
155
+ .hero h1::before {
156
+ content: '';
157
+ position: absolute;
158
+ left: 0;
159
+ top: 0.3em;
160
+ bottom: 0.3em;
161
+ width: 3px;
162
+ background: linear-gradient(180deg, var(--ad-cyan), var(--ad-gold));
163
+ }
164
+ :root[data-theme='light'] .sl-markdown-content > h1:first-child::before,
165
+ :root[data-theme='light'] .content-panel h1[data-page-title]::before,
166
+ :root[data-theme='light'] .hero h1::before {
167
+ background: linear-gradient(180deg, var(--ad-cyan-deep), var(--ad-burgundy));
168
+ }
212
169
 
213
- /* ------------------------------------------------------------
214
- Sidebar — active item with cyan border + faint fill
215
- ------------------------------------------------------------ */
216
- .sidebar-pane a[aria-current='page'] {
217
- color: var(--ad-cyan);
218
- border-left: 2px solid var(--ad-cyan);
219
- background: var(--sl-color-accent-low);
220
- font-weight: 500;
221
- }
222
- :root[data-theme='light'] .sidebar-pane a[aria-current='page'] {
223
- color: var(--ad-cyan-deep);
224
- border-left-color: var(--ad-cyan-deep);
225
- }
170
+ /* ------------------------------------------------------------
171
+ Inline code — gold on dark, burgundy on light
172
+ ------------------------------------------------------------ */
173
+ .sl-markdown-content :not(pre) > code {
174
+ color: var(--ad-gold);
175
+ border: 1px solid var(--sl-color-hairline);
176
+ border-radius: 4px;
177
+ padding: 1px 6px;
178
+ font-size: 0.9em;
179
+ }
180
+ :root[data-theme='light'] .sl-markdown-content :not(pre) > code {
181
+ color: var(--ad-burgundy-deep);
182
+ }
226
183
 
227
- /* ------------------------------------------------------------
228
- Search box — bracket frame motif
229
- ------------------------------------------------------------ */
230
- site-search button[data-open-modal] {
231
- border: 1px solid var(--sl-color-hairline);
232
- border-radius: 6px;
233
- font-family: var(--sl-font-mono);
234
- }
235
- site-search button[data-open-modal] kbd {
236
- font-family: var(--sl-font-mono);
237
- font-size: 0.65rem;
238
- }
184
+ /* ------------------------------------------------------------
185
+ Callouts (asides) — branded variants
186
+ ------------------------------------------------------------ */
187
+ .starlight-aside {
188
+ border-left-width: 3px;
189
+ border-radius: 8px;
190
+ background: var(--ad-callout-cyan-bg);
191
+ }
192
+ .starlight-aside--tip { border-color: var(--ad-cyan); background: var(--ad-callout-cyan-bg); }
193
+ .starlight-aside--note { border-color: var(--ad-cyan); background: var(--ad-callout-cyan-bg); }
194
+ .starlight-aside--caution { border-color: var(--ad-gold); background: var(--ad-callout-gold-bg); }
195
+ .starlight-aside--danger { border-color: var(--ad-burgundy); background: var(--ad-callout-burgundy-bg); }
196
+ :root[data-theme='light'] .starlight-aside--tip,
197
+ :root[data-theme='light'] .starlight-aside--note { border-color: var(--ad-cyan-deep); }
198
+ :root[data-theme='light'] .starlight-aside--caution { border-color: var(--ad-gold-deep); }
199
+ :root[data-theme='light'] .starlight-aside--danger { border-color: var(--ad-burgundy-deep); }
239
200
 
240
- /* ------------------------------------------------------------
241
- Version chip — outlined gold pill in the header
242
- (Static look. HUD layers on glitch in hud.css.)
243
- ------------------------------------------------------------ */
244
- .ad-version-chip {
245
- display: inline-flex;
246
- align-items: center;
247
- font-family: var(--sl-font-mono);
248
- font-size: 0.7rem;
249
- padding: 3px 8px;
250
- margin-left: 8px;
251
- color: var(--ad-gold);
252
- border: 1px solid var(--ad-gold);
253
- border-radius: 4px;
254
- letter-spacing: 0.04em;
255
- user-select: none;
256
- cursor: default;
257
- position: relative;
258
- }
259
- :root[data-theme='light'] .ad-version-chip {
260
- color: var(--ad-gold-deep);
261
- border-color: var(--ad-gold-deep);
262
- background: rgba(138, 109, 31, 0.08);
263
- }
201
+ .starlight-aside__title {
202
+ font-family: var(--ad-font-display);
203
+ font-size: 0.7rem;
204
+ letter-spacing: 0.16em;
205
+ text-transform: uppercase;
206
+ }
264
207
 
265
- /* ------------------------------------------------------------
266
- "Built by Abstract Data" credit
267
- Hidden when the plugin is configured with `credit: 'hide'`.
268
- ------------------------------------------------------------ */
269
- .ad-credit {
270
- margin-top: 1.5rem;
271
- padding-top: 1rem;
272
- border-top: 1px solid var(--sl-color-hairline-light);
273
- font-family: var(--ad-font-display);
274
- font-size: 0.7rem;
275
- letter-spacing: 0.16em;
276
- text-transform: uppercase;
277
- color: var(--sl-color-gray-4);
278
- display: flex;
279
- gap: 6px;
280
- align-items: center;
281
- }
282
- .ad-credit a {
283
- color: var(--ad-cyan);
284
- text-decoration: none;
285
- font-weight: 600;
286
- }
287
- .ad-credit a:hover { text-decoration: underline; }
288
- :root[data-theme='light'] .ad-credit a { color: var(--ad-cyan-deep); }
208
+ /* ------------------------------------------------------------
209
+ Code blocks — bracket dot indicator + cyan border accent
210
+ ------------------------------------------------------------ */
211
+ .expressive-code .frame.is-terminal,
212
+ .expressive-code .frame.has-title {
213
+ border: 1px solid var(--sl-color-hairline);
214
+ border-radius: 8px;
215
+ overflow: hidden;
216
+ }
217
+ .expressive-code .frame .header {
218
+ font-family: var(--sl-font-mono);
219
+ font-size: 0.7rem;
220
+ letter-spacing: 0.05em;
221
+ border-bottom: 1px solid var(--sl-color-hairline);
222
+ }
289
223
 
290
- /* ------------------------------------------------------------
291
- <Glitch /> base — clean render under motion: 'calm'
292
- HUD layers on the actual glitch animation in hud.css.
293
- ------------------------------------------------------------ */
294
- .ad-glitch {
295
- position: relative;
296
- display: inline-block;
297
- font-family: var(--ad-font-display);
298
- font-weight: 700;
299
- letter-spacing: 0.02em;
300
- color: var(--ad-cyan);
301
- }
302
- :root[data-theme='light'] .ad-glitch {
303
- color: var(--ad-burgundy);
304
- }
224
+ /* ------------------------------------------------------------
225
+ Sidebar — active item with cyan border + faint fill
226
+ ------------------------------------------------------------ */
227
+ .sidebar-pane a[aria-current='page'] {
228
+ color: var(--ad-cyan);
229
+ border-left: 2px solid var(--ad-cyan);
230
+ background: var(--sl-color-accent-low);
231
+ font-weight: 500;
232
+ }
233
+ :root[data-theme='light'] .sidebar-pane a[aria-current='page'] {
234
+ color: var(--ad-cyan-deep);
235
+ border-left-color: var(--ad-cyan-deep);
236
+ }
305
237
 
306
- /* ------------------------------------------------------------
307
- Splash page hero — constrain logo width on wide screens
308
- ------------------------------------------------------------ */
309
- .hero .hero-html img,
310
- .hero img[alt][src] {
311
- max-width: 360px;
312
- width: 100%;
313
- height: auto;
314
- }
238
+ /* ------------------------------------------------------------
239
+ Search box — bracket frame motif
240
+ ------------------------------------------------------------ */
241
+ site-search button[data-open-modal] {
242
+ border: 1px solid var(--sl-color-hairline);
243
+ border-radius: 6px;
244
+ font-family: var(--sl-font-mono);
245
+ }
246
+ site-search button[data-open-modal] kbd {
247
+ font-family: var(--sl-font-mono);
248
+ font-size: 0.65rem;
249
+ }
315
250
 
316
- /* ------------------------------------------------------------
317
- Hero action buttons — primary cyan, secondary gold ghost
318
- (Starlight uses .sl-link-button.primary / .secondary inside .hero .actions)
319
- ------------------------------------------------------------ */
320
- .hero .actions .sl-link-button.primary {
321
- background: var(--ad-cyan);
322
- color: var(--ad-charcoal);
323
- border: 1px solid var(--ad-cyan);
324
- font-family: var(--ad-font-display);
325
- font-size: 0.8rem;
326
- letter-spacing: 0.12em;
327
- text-transform: uppercase;
328
- }
329
- .hero .actions .sl-link-button.primary:hover {
330
- box-shadow: 0 0 24px rgba(0, 217, 255, 0.5);
331
- }
332
- .hero .actions .sl-link-button.secondary,
333
- .hero .actions .sl-link-button.minimal {
334
- background: transparent;
335
- color: var(--ad-gold);
336
- border: 1px solid var(--ad-gold);
337
- font-family: var(--ad-font-display);
338
- font-size: 0.8rem;
339
- letter-spacing: 0.12em;
340
- text-transform: uppercase;
341
- }
342
- .hero .actions .sl-link-button.secondary:hover,
343
- .hero .actions .sl-link-button.minimal:hover {
344
- background: rgba(212, 175, 55, 0.10);
345
- color: var(--ad-gold);
346
- }
347
- :root[data-theme='light'] .hero .actions .sl-link-button.primary {
348
- background: var(--ad-cyan-deep);
349
- color: #ffffff;
350
- border-color: var(--ad-cyan-deep);
351
- }
352
- :root[data-theme='light'] .hero .actions .sl-link-button.secondary,
353
- :root[data-theme='light'] .hero .actions .sl-link-button.minimal {
354
- color: var(--ad-burgundy-deep);
355
- border-color: var(--ad-burgundy-deep);
356
- }
357
- :root[data-theme='light'] .hero .actions .sl-link-button.secondary:hover,
358
- :root[data-theme='light'] .hero .actions .sl-link-button.minimal:hover {
359
- background: rgba(122, 31, 44, 0.06);
360
- color: var(--ad-burgundy-deep);
361
- }
251
+ /* ------------------------------------------------------------
252
+ Version chip — outlined gold pill in the header
253
+ (Static look. HUD layers on glitch in hud.css.)
254
+ ------------------------------------------------------------ */
255
+ .ad-version-chip {
256
+ display: inline-flex;
257
+ align-items: center;
258
+ font-family: var(--sl-font-mono);
259
+ font-size: 0.7rem;
260
+ padding: 3px 8px;
261
+ margin-left: 8px;
262
+ color: var(--ad-gold);
263
+ border: 1px solid var(--ad-gold);
264
+ border-radius: 4px;
265
+ letter-spacing: 0.04em;
266
+ user-select: none;
267
+ cursor: default;
268
+ position: relative;
269
+ }
270
+ :root[data-theme='light'] .ad-version-chip {
271
+ color: var(--ad-gold-deep);
272
+ border-color: var(--ad-gold-deep);
273
+ background: rgba(138, 109, 31, 0.08);
274
+ }
362
275
 
363
- /* ------------------------------------------------------------
364
- Search modal — branded frame + pagefind UI
365
- (Starlight DOM: <site-search> → <dialog> → <div.dialog-frame>)
366
- ------------------------------------------------------------ */
367
- site-search dialog {
368
- background: var(--sl-color-bg);
369
- border: 1px solid var(--sl-color-hairline);
370
- border-radius: 12px;
371
- box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55),
372
- 0 0 0 1px rgba(0, 217, 255, 0.04);
373
- padding: 0;
374
- color: var(--sl-color-text);
375
- max-width: 720px;
376
- }
377
- site-search dialog::backdrop {
378
- background: rgba(0, 0, 0, 0.65);
379
- backdrop-filter: blur(4px);
380
- }
381
- :root[data-theme='light'] site-search dialog::backdrop {
382
- background: rgba(60, 50, 40, 0.45);
383
- }
384
- site-search dialog .dialog-frame {
385
- background: var(--sl-color-bg);
386
- border-radius: 12px;
387
- padding: 0.5rem 0.75rem 0.75rem;
388
- }
389
- site-search dialog .dialog-frame > .header,
390
- site-search dialog .dialog-frame .header {
391
- border-bottom: 1px solid var(--sl-color-hairline);
392
- font-family: var(--ad-font-display);
393
- font-size: 0.7rem;
394
- letter-spacing: 0.16em;
395
- text-transform: uppercase;
396
- color: var(--sl-color-gray-3);
397
- }
398
- site-search dialog .dialog-frame > p {
399
- font-family: var(--sl-font);
400
- color: var(--sl-color-gray-3);
401
- text-align: center;
402
- padding: 1.5rem 1rem;
403
- }
404
- .pagefind-ui {
405
- --pagefind-ui-primary: var(--ad-cyan);
406
- --pagefind-ui-text: var(--sl-color-text);
407
- --pagefind-ui-background: var(--sl-color-bg);
408
- --pagefind-ui-border: var(--sl-color-hairline);
409
- --pagefind-ui-tag: var(--sl-color-bg-nav);
410
- --pagefind-ui-font: var(--sl-font);
411
- }
412
- .pagefind-ui__form input.pagefind-ui__search-input {
413
- background: var(--sl-color-bg-nav);
414
- border: 1px solid var(--sl-color-hairline);
415
- color: var(--sl-color-text);
416
- font-family: var(--sl-font-mono);
417
- border-radius: 6px;
418
- }
419
- .pagefind-ui__form input.pagefind-ui__search-input:focus {
420
- border-color: var(--ad-cyan);
421
- outline: none;
422
- }
423
- :root[data-theme='light'] .pagefind-ui__form input.pagefind-ui__search-input:focus {
424
- border-color: var(--ad-cyan-deep);
425
- }
426
- .pagefind-ui__result-title,
427
- .pagefind-ui__result-title a {
428
- font-family: var(--ad-font-display);
429
- font-size: 0.95rem;
430
- letter-spacing: 0.02em;
431
- color: var(--sl-color-text);
432
- }
433
- .pagefind-ui__result-link:hover .pagefind-ui__result-title,
434
- .pagefind-ui__result-title a:hover {
435
- color: var(--ad-cyan);
436
- }
437
- :root[data-theme='light'] .pagefind-ui__result-link:hover .pagefind-ui__result-title,
438
- :root[data-theme='light'] .pagefind-ui__result-title a:hover {
439
- color: var(--ad-cyan-deep);
440
- }
441
- .pagefind-ui__result-excerpt mark {
442
- background: rgba(212, 175, 55, 0.18);
443
- color: var(--ad-gold);
444
- padding: 0 3px;
445
- border-radius: 3px;
446
- }
447
- :root[data-theme='light'] .pagefind-ui__result-excerpt mark {
448
- background: rgba(138, 109, 31, 0.16);
449
- color: var(--ad-gold-deep);
450
- }
276
+ /* ------------------------------------------------------------
277
+ "Built by Abstract Data" credit
278
+ Hidden when the plugin is configured with `credit: 'hide'`.
279
+ ------------------------------------------------------------ */
280
+ .ad-credit {
281
+ margin-top: 1.5rem;
282
+ padding-top: 1rem;
283
+ border-top: 1px solid var(--sl-color-hairline-light);
284
+ font-family: var(--ad-font-display);
285
+ font-size: 0.7rem;
286
+ letter-spacing: 0.16em;
287
+ text-transform: uppercase;
288
+ color: var(--sl-color-gray-4);
289
+ display: flex;
290
+ gap: 6px;
291
+ align-items: center;
292
+ }
293
+ .ad-credit a {
294
+ color: var(--ad-cyan);
295
+ text-decoration: none;
296
+ font-weight: 600;
297
+ }
298
+ .ad-credit a:hover { text-decoration: underline; }
299
+ :root[data-theme='light'] .ad-credit a { color: var(--ad-cyan-deep); }
451
300
 
452
- /* ------------------------------------------------------------
453
- "On this page" right sidebar (TOC) — branded
454
- ------------------------------------------------------------ */
455
- .right-sidebar h2,
456
- .right-sidebar-panel h2 {
457
- font-family: var(--ad-font-display);
458
- font-size: 0.7rem;
459
- font-weight: 700;
460
- letter-spacing: 0.16em;
461
- text-transform: uppercase;
462
- color: var(--sl-color-gray-3);
463
- }
464
- .right-sidebar a[aria-current='true'],
465
- starlight-toc a[aria-current='true'] {
466
- color: var(--ad-cyan);
467
- border-left: 2px solid var(--ad-cyan);
468
- padding-left: 8px;
469
- margin-left: -10px;
470
- }
471
- :root[data-theme='light'] .right-sidebar a[aria-current='true'],
472
- :root[data-theme='light'] starlight-toc a[aria-current='true'] {
473
- color: var(--ad-cyan-deep);
474
- border-left-color: var(--ad-cyan-deep);
301
+ /* ------------------------------------------------------------
302
+ <Glitch /> base — clean render under motion: 'calm'
303
+ HUD layers on the actual glitch animation in hud.css.
304
+ ------------------------------------------------------------ */
305
+ .ad-glitch {
306
+ position: relative;
307
+ display: inline-block;
308
+ font-family: var(--ad-font-display);
309
+ font-weight: 700;
310
+ letter-spacing: 0.02em;
311
+ color: var(--ad-cyan);
312
+ }
313
+ :root[data-theme='light'] .ad-glitch {
314
+ color: var(--ad-burgundy);
315
+ }
316
+
317
+ /* ------------------------------------------------------------
318
+ Splash page hero — constrain logo width on wide screens
319
+ ------------------------------------------------------------ */
320
+ .hero .hero-html img,
321
+ .hero img[alt][src] {
322
+ max-width: 360px;
323
+ width: 100%;
324
+ height: auto;
325
+ }
326
+
327
+ /* ------------------------------------------------------------
328
+ Hero action buttons — primary cyan, secondary gold ghost
329
+ (Starlight uses .sl-link-button.primary / .secondary inside .hero .actions)
330
+ ------------------------------------------------------------ */
331
+ .hero .actions .sl-link-button.primary {
332
+ background: var(--ad-cyan);
333
+ color: var(--ad-charcoal);
334
+ border: 1px solid var(--ad-cyan);
335
+ font-family: var(--ad-font-display);
336
+ font-size: 0.8rem;
337
+ letter-spacing: 0.12em;
338
+ text-transform: uppercase;
339
+ }
340
+ .hero .actions .sl-link-button.primary:hover {
341
+ box-shadow: 0 0 24px rgba(0, 217, 255, 0.5);
342
+ }
343
+ .hero .actions .sl-link-button.secondary,
344
+ .hero .actions .sl-link-button.minimal {
345
+ background: transparent;
346
+ color: var(--ad-gold);
347
+ border: 1px solid var(--ad-gold);
348
+ font-family: var(--ad-font-display);
349
+ font-size: 0.8rem;
350
+ letter-spacing: 0.12em;
351
+ text-transform: uppercase;
352
+ }
353
+ .hero .actions .sl-link-button.secondary:hover,
354
+ .hero .actions .sl-link-button.minimal:hover {
355
+ background: rgba(212, 175, 55, 0.10);
356
+ color: var(--ad-gold);
357
+ }
358
+ :root[data-theme='light'] .hero .actions .sl-link-button.primary {
359
+ background: var(--ad-cyan-deep);
360
+ color: #ffffff;
361
+ border-color: var(--ad-cyan-deep);
362
+ }
363
+ :root[data-theme='light'] .hero .actions .sl-link-button.secondary,
364
+ :root[data-theme='light'] .hero .actions .sl-link-button.minimal {
365
+ color: var(--ad-burgundy-deep);
366
+ border-color: var(--ad-burgundy-deep);
367
+ }
368
+ :root[data-theme='light'] .hero .actions .sl-link-button.secondary:hover,
369
+ :root[data-theme='light'] .hero .actions .sl-link-button.minimal:hover {
370
+ background: rgba(122, 31, 44, 0.06);
371
+ color: var(--ad-burgundy-deep);
372
+ }
373
+
374
+ /* ------------------------------------------------------------
375
+ Search modal — branded frame + pagefind UI
376
+ (Starlight DOM: <site-search> → <dialog> → <div.dialog-frame>)
377
+ ------------------------------------------------------------ */
378
+ site-search dialog {
379
+ background: var(--sl-color-bg);
380
+ border: 1px solid var(--sl-color-hairline);
381
+ border-radius: 12px;
382
+ box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55),
383
+ 0 0 0 1px rgba(0, 217, 255, 0.04);
384
+ padding: 0;
385
+ color: var(--sl-color-text);
386
+ max-width: 720px;
387
+ }
388
+ site-search dialog::backdrop {
389
+ background: rgba(0, 0, 0, 0.65);
390
+ backdrop-filter: blur(4px);
391
+ }
392
+ :root[data-theme='light'] site-search dialog::backdrop {
393
+ background: rgba(60, 50, 40, 0.45);
394
+ }
395
+ site-search dialog .dialog-frame {
396
+ background: var(--sl-color-bg);
397
+ border-radius: 12px;
398
+ padding: 0.5rem 0.75rem 0.75rem;
399
+ }
400
+ site-search dialog .dialog-frame > .header,
401
+ site-search dialog .dialog-frame .header {
402
+ border-bottom: 1px solid var(--sl-color-hairline);
403
+ font-family: var(--ad-font-display);
404
+ font-size: 0.7rem;
405
+ letter-spacing: 0.16em;
406
+ text-transform: uppercase;
407
+ color: var(--sl-color-gray-3);
408
+ }
409
+ site-search dialog .dialog-frame > p {
410
+ font-family: var(--sl-font);
411
+ color: var(--sl-color-gray-3);
412
+ text-align: center;
413
+ padding: 1.5rem 1rem;
414
+ }
415
+ .pagefind-ui {
416
+ --pagefind-ui-primary: var(--ad-cyan);
417
+ --pagefind-ui-text: var(--sl-color-text);
418
+ --pagefind-ui-background: var(--sl-color-bg);
419
+ --pagefind-ui-border: var(--sl-color-hairline);
420
+ --pagefind-ui-tag: var(--sl-color-bg-nav);
421
+ --pagefind-ui-font: var(--sl-font);
422
+ }
423
+ .pagefind-ui__form input.pagefind-ui__search-input {
424
+ background: var(--sl-color-bg-nav);
425
+ border: 1px solid var(--sl-color-hairline);
426
+ color: var(--sl-color-text);
427
+ font-family: var(--sl-font-mono);
428
+ border-radius: 6px;
429
+ }
430
+ .pagefind-ui__form input.pagefind-ui__search-input:focus {
431
+ border-color: var(--ad-cyan);
432
+ outline: none;
433
+ }
434
+ :root[data-theme='light'] .pagefind-ui__form input.pagefind-ui__search-input:focus {
435
+ border-color: var(--ad-cyan-deep);
436
+ }
437
+ .pagefind-ui__result-title,
438
+ .pagefind-ui__result-title a {
439
+ font-family: var(--ad-font-display);
440
+ font-size: 0.95rem;
441
+ letter-spacing: 0.02em;
442
+ color: var(--sl-color-text);
443
+ }
444
+ .pagefind-ui__result-link:hover .pagefind-ui__result-title,
445
+ .pagefind-ui__result-title a:hover {
446
+ color: var(--ad-cyan);
447
+ }
448
+ :root[data-theme='light'] .pagefind-ui__result-link:hover .pagefind-ui__result-title,
449
+ :root[data-theme='light'] .pagefind-ui__result-title a:hover {
450
+ color: var(--ad-cyan-deep);
451
+ }
452
+ .pagefind-ui__result-excerpt mark {
453
+ background: rgba(212, 175, 55, 0.18);
454
+ color: var(--ad-gold);
455
+ padding: 0 3px;
456
+ border-radius: 3px;
457
+ }
458
+ :root[data-theme='light'] .pagefind-ui__result-excerpt mark {
459
+ background: rgba(138, 109, 31, 0.16);
460
+ color: var(--ad-gold-deep);
461
+ }
462
+
463
+ /* ------------------------------------------------------------
464
+ "On this page" right sidebar (TOC) — branded
465
+ ------------------------------------------------------------ */
466
+ .right-sidebar h2,
467
+ .right-sidebar-panel h2 {
468
+ font-family: var(--ad-font-display);
469
+ font-size: 0.7rem;
470
+ font-weight: 700;
471
+ letter-spacing: 0.16em;
472
+ text-transform: uppercase;
473
+ color: var(--sl-color-gray-3);
474
+ }
475
+ .right-sidebar a[aria-current='true'],
476
+ starlight-toc a[aria-current='true'] {
477
+ color: var(--ad-cyan);
478
+ border-left: 2px solid var(--ad-cyan);
479
+ padding-left: 8px;
480
+ margin-left: -10px;
481
+ }
482
+ :root[data-theme='light'] .right-sidebar a[aria-current='true'],
483
+ :root[data-theme='light'] starlight-toc a[aria-current='true'] {
484
+ color: var(--ad-cyan-deep);
485
+ border-left-color: var(--ad-cyan-deep);
486
+ }
475
487
  }