@zeropress/build-pages 0.6.2 → 0.6.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.
@@ -1,18 +1,28 @@
1
1
  :root {
2
2
  color-scheme: light dark;
3
- --bg: #f8fafc;
3
+
4
+ /* Light tokens */
5
+ --bg: #fbfbfd;
6
+ --bg-elev: #ffffff;
4
7
  --surface: #ffffff;
5
- --ink: #101828;
6
- --muted: #667085;
7
- --line: #d0d5dd;
8
- --accent: #2563eb;
9
- --accent-soft: #dbeafe;
10
- --code-bg: #f2f4f7;
11
- --header-bg: rgba(248, 250, 252, 0.92);
12
- --prose-ink: #344054;
13
- --pre-bg: #101828;
14
- --pre-ink: #f8fafc;
15
- --syntax-comment: #98a2b3;
8
+ --surface-2: #f4f5f8;
9
+ --ink: #0b0d12;
10
+ --ink-soft: #1f2430;
11
+ --muted: #5b6472;
12
+ --muted-2: #828b99;
13
+ --line: #e5e7eb;
14
+ --line-strong: #d3d7de;
15
+ --accent: #4f46e5;
16
+ --accent-2: #7c3aed;
17
+ --accent-ink: #ffffff;
18
+ --accent-soft: rgba(79, 70, 229, 0.08);
19
+ --accent-ring: rgba(79, 70, 229, 0.22);
20
+ --code-bg: #f3f4f6;
21
+ --header-bg: rgba(251, 251, 253, 0.78);
22
+ --prose-ink: #2b313c;
23
+ --pre-bg: #0f1218;
24
+ --pre-ink: #e6e9f0;
25
+ --syntax-comment: #8b94a3;
16
26
  --syntax-keyword: #f472b6;
17
27
  --syntax-title: #93c5fd;
18
28
  --syntax-string: #86efac;
@@ -21,53 +31,133 @@
21
31
  --syntax-built-in: #c4b5fd;
22
32
  --syntax-deletion: #fca5a5;
23
33
  --syntax-addition: #bbf7d0;
24
- --button-ink: #ffffff;
25
- --alert-note: #2563eb;
34
+ --alert-note: #4f46e5;
26
35
  --alert-tip: #059669;
27
36
  --alert-important: #7c3aed;
28
37
  --alert-warning: #d97706;
29
38
  --alert-caution: #dc2626;
30
- --radius: 8px;
31
- font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
39
+
40
+ --shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
41
+ --shadow-md: 0 4px 14px -4px rgb(15 23 42 / 10%);
42
+ --shadow-lg: 0 24px 48px -16px rgb(15 23 42 / 18%);
43
+
44
+ --radius-sm: 8px;
45
+ --radius: 12px;
46
+ --radius-lg: 16px;
47
+
48
+ --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
49
+
50
+ font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
51
+ font-feature-settings: "cv11", "ss01", "ss03";
32
52
  }
33
53
 
34
54
  @media (prefers-color-scheme: dark) {
35
- :root {
55
+ :root:not([data-theme="light"]) {
36
56
  color-scheme: dark;
37
- --bg: #111316;
38
- --surface: #1b1f24;
39
- --ink: #f3f5f7;
40
- --muted: #a7b0bb;
41
- --line: #363d46;
42
- --accent: #5eead4;
43
- --accent-soft: rgba(94, 234, 212, 0.14);
44
- --code-bg: #252b32;
45
- --header-bg: rgba(17, 19, 22, 0.92);
46
- --prose-ink: #d9e0e7;
47
- --pre-bg: #080b0f;
48
- --pre-ink: #f5f7fa;
49
- --button-ink: #08110f;
50
- --alert-note: #60a5fa;
57
+ --bg: #0b0d12;
58
+ --bg-elev: #11141b;
59
+ --surface: #11141b;
60
+ --surface-2: #161a23;
61
+ --ink: #f3f5f8;
62
+ --ink-soft: #d9dee6;
63
+ --muted: #a4adbc;
64
+ --muted-2: #7d8696;
65
+ --line: #232834;
66
+ --line-strong: #2e3442;
67
+ --accent: #818cf8;
68
+ --accent-2: #c4b5fd;
69
+ --accent-ink: #0b0d12;
70
+ --accent-soft: rgba(129, 140, 248, 0.14);
71
+ --accent-ring: rgba(129, 140, 248, 0.32);
72
+ --code-bg: #1b202b;
73
+ --header-bg: rgba(11, 13, 18, 0.72);
74
+ --prose-ink: #d3d8e2;
75
+ --pre-bg: #06080c;
76
+ --pre-ink: #eef1f6;
77
+ --alert-note: #818cf8;
51
78
  --alert-tip: #34d399;
52
- --alert-important: #a78bfa;
79
+ --alert-important: #c4b5fd;
53
80
  --alert-warning: #fbbf24;
54
81
  --alert-caution: #f87171;
82
+
83
+ --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
84
+ --shadow-md: 0 6px 18px -8px rgb(0 0 0 / 50%);
85
+ --shadow-lg: 0 30px 60px -20px rgb(0 0 0 / 60%);
55
86
  }
56
87
  }
57
88
 
89
+ :root[data-theme="dark"] {
90
+ color-scheme: dark;
91
+ --bg: #0b0d12;
92
+ --bg-elev: #11141b;
93
+ --surface: #11141b;
94
+ --surface-2: #161a23;
95
+ --ink: #f3f5f8;
96
+ --ink-soft: #d9dee6;
97
+ --muted: #a4adbc;
98
+ --muted-2: #7d8696;
99
+ --line: #232834;
100
+ --line-strong: #2e3442;
101
+ --accent: #818cf8;
102
+ --accent-2: #c4b5fd;
103
+ --accent-ink: #0b0d12;
104
+ --accent-soft: rgba(129, 140, 248, 0.14);
105
+ --accent-ring: rgba(129, 140, 248, 0.32);
106
+ --code-bg: #1b202b;
107
+ --header-bg: rgba(11, 13, 18, 0.72);
108
+ --prose-ink: #d3d8e2;
109
+ --pre-bg: #06080c;
110
+ --pre-ink: #eef1f6;
111
+ --alert-note: #818cf8;
112
+ --alert-tip: #34d399;
113
+ --alert-important: #c4b5fd;
114
+ --alert-warning: #fbbf24;
115
+ --alert-caution: #f87171;
116
+
117
+ --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
118
+ --shadow-md: 0 6px 18px -8px rgb(0 0 0 / 50%);
119
+ --shadow-lg: 0 30px 60px -20px rgb(0 0 0 / 60%);
120
+ }
121
+
58
122
  * {
59
123
  box-sizing: border-box;
60
124
  }
61
125
 
126
+ html {
127
+ -webkit-text-size-adjust: 100%;
128
+ -webkit-font-smoothing: antialiased;
129
+ -moz-osx-font-smoothing: grayscale;
130
+ }
131
+
62
132
  body {
63
133
  margin: 0;
64
134
  background: var(--bg);
65
135
  color: var(--ink);
66
- line-height: 1.6;
136
+ line-height: 1.65;
137
+ letter-spacing: -0.005em;
138
+ min-height: 100vh;
139
+ display: flex;
140
+ flex-direction: column;
141
+ }
142
+
143
+ main {
144
+ flex: 1 0 auto;
67
145
  }
68
146
 
69
147
  a {
70
148
  color: var(--accent);
149
+ text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
150
+ text-underline-offset: 3px;
151
+ transition: color 120ms var(--ease);
152
+ }
153
+
154
+ a:hover {
155
+ text-decoration-color: var(--accent);
156
+ }
157
+
158
+ ::selection {
159
+ background: var(--accent-soft);
160
+ color: var(--ink);
71
161
  }
72
162
 
73
163
  .skip-link {
@@ -77,9 +167,10 @@ a {
77
167
  transform: translateY(-200%);
78
168
  background: var(--ink);
79
169
  color: var(--bg);
80
- padding: 0.5rem 0.75rem;
81
- border-radius: 6px;
82
- z-index: 10;
170
+ padding: 0.5rem 0.85rem;
171
+ border-radius: var(--radius-sm);
172
+ z-index: 50;
173
+ font-weight: 600;
83
174
  }
84
175
 
85
176
  .skip-link:focus {
@@ -87,17 +178,36 @@ a {
87
178
  }
88
179
 
89
180
  .shell {
90
- width: min(1120px, calc(100% - 2rem));
181
+ width: min(1180px, calc(100% - 2.5rem));
91
182
  margin: 0 auto;
92
183
  }
93
184
 
185
+ .visually-hidden {
186
+ position: absolute;
187
+ width: 1px;
188
+ height: 1px;
189
+ padding: 0;
190
+ overflow: hidden;
191
+ clip: rect(0, 0, 0, 0);
192
+ white-space: nowrap;
193
+ border: 0;
194
+ }
195
+
196
+ /* ---------- Header ---------- */
197
+
94
198
  .site-header {
95
- background: var(--header-bg);
96
- border-bottom: 1px solid var(--line);
97
199
  position: sticky;
98
200
  top: 0;
99
- z-index: 5;
100
- backdrop-filter: blur(12px);
201
+ z-index: 20;
202
+ background: var(--header-bg);
203
+ border-bottom: 1px solid transparent;
204
+ backdrop-filter: saturate(140%) blur(14px);
205
+ -webkit-backdrop-filter: saturate(140%) blur(14px);
206
+ transition: border-color 200ms var(--ease), background 200ms var(--ease);
207
+ }
208
+
209
+ .site-header.is-scrolled {
210
+ border-bottom-color: var(--line);
101
211
  }
102
212
 
103
213
  .site-header__inner {
@@ -105,119 +215,173 @@ a {
105
215
  display: flex;
106
216
  align-items: center;
107
217
  justify-content: space-between;
108
- gap: 1.5rem;
109
- }
110
-
111
- .visually-hidden {
112
- position: absolute;
113
- width: 1px;
114
- height: 1px;
115
- padding: 0;
116
- overflow: hidden;
117
- clip: rect(0, 0, 0, 0);
118
- white-space: nowrap;
119
- border: 0;
218
+ gap: 1.25rem;
120
219
  }
121
220
 
122
221
  .brand {
222
+ display: inline-flex;
223
+ align-items: center;
224
+ gap: 0.55rem;
225
+ flex: 0 0 auto;
123
226
  color: var(--ink);
124
- font-weight: 750;
227
+ font-weight: 700;
228
+ font-size: 0.98rem;
229
+ letter-spacing: -0.015em;
125
230
  text-decoration: none;
231
+ white-space: nowrap;
232
+ }
233
+
234
+ .brand__mark {
235
+ width: 30px;
126
236
  }
127
237
 
128
238
  .site-header__actions {
239
+ flex: 1 1 auto;
129
240
  display: flex;
130
241
  align-items: center;
131
242
  justify-content: flex-end;
132
- gap: 1rem;
243
+ gap: 0.85rem;
133
244
  min-width: 0;
134
245
  }
135
246
 
247
+ .nav-toggle {
248
+ display: none;
249
+ align-items: center;
250
+ justify-content: center;
251
+ width: 36px;
252
+ height: 36px;
253
+ border: 1px solid var(--line);
254
+ border-radius: 8px;
255
+ background: var(--surface);
256
+ color: var(--ink);
257
+ cursor: pointer;
258
+ transition: border-color 120ms var(--ease), background 120ms var(--ease);
259
+ }
260
+
261
+ .nav-toggle:hover {
262
+ border-color: var(--line-strong);
263
+ }
264
+
136
265
  .site-nav ul {
137
266
  list-style: none;
138
267
  margin: 0;
139
268
  padding: 0;
140
- }
141
-
142
- .site-nav ul {
143
269
  display: flex;
144
- flex-wrap: wrap;
145
- gap: 0.25rem 1rem;
270
+ flex-wrap: nowrap;
271
+ gap: 0.1rem;
146
272
  justify-content: flex-end;
147
273
  }
148
274
 
149
275
  .site-nav a {
276
+ display: inline-flex;
277
+ align-items: center;
278
+ padding: 0.45rem 0.7rem;
279
+ border-radius: 7px;
150
280
  color: var(--muted);
151
281
  text-decoration: none;
152
- font-size: 0.94rem;
153
- font-weight: 600;
282
+ font-size: 0.9rem;
283
+ font-weight: 500;
284
+ white-space: nowrap;
285
+ transition: color 120ms var(--ease), background 120ms var(--ease);
154
286
  }
155
287
 
156
288
  .site-nav a:hover {
157
- color: var(--accent);
289
+ color: var(--ink);
290
+ background: var(--surface-2);
158
291
  }
159
292
 
293
+ .site-nav a[aria-current="page"] {
294
+ color: var(--ink);
295
+ background: var(--accent-soft);
296
+ }
297
+
298
+ /* Search */
299
+
160
300
  .site-search {
161
301
  position: relative;
162
- width: min(22rem, 34vw);
302
+ flex: 0 0 16rem;
303
+ width: 16rem;
163
304
  }
164
305
 
165
306
  .site-search__form {
307
+ position: relative;
166
308
  display: flex;
167
309
  align-items: center;
168
- gap: 0.4rem;
310
+ margin: 0;
311
+ }
312
+
313
+ .site-search__icon {
314
+ position: absolute;
315
+ left: 0.7rem;
316
+ display: inline-flex;
317
+ color: var(--muted-2);
318
+ pointer-events: none;
169
319
  }
170
320
 
171
321
  .site-search__input {
172
- min-width: 0;
173
322
  width: 100%;
174
- height: 2.35rem;
175
- padding: 0 0.75rem;
323
+ height: 2.4rem;
324
+ padding: 0 2.4rem 0 2.1rem;
176
325
  border: 1px solid var(--line);
177
- border-radius: 6px;
326
+ border-radius: 9px;
178
327
  background: var(--surface);
179
328
  color: var(--ink);
180
329
  font: inherit;
181
- font-size: 0.92rem;
330
+ font-size: 0.9rem;
331
+ transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease), background 120ms var(--ease);
332
+ }
333
+
334
+ .site-search__input::placeholder {
335
+ color: var(--muted-2);
182
336
  }
183
337
 
184
338
  .site-search__input:focus {
339
+ outline: 0;
185
340
  border-color: var(--accent);
186
- outline: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
187
- outline-offset: 1px;
341
+ box-shadow: 0 0 0 3px var(--accent-ring);
188
342
  }
189
343
 
190
- .site-search__button {
191
- height: 2.35rem;
192
- padding: 0 0.75rem;
193
- border: 0;
194
- border-radius: 6px;
195
- background: var(--accent);
196
- color: var(--button-ink);
197
- font: inherit;
198
- font-size: 0.88rem;
199
- font-weight: 750;
200
- cursor: pointer;
344
+ .site-search__input:disabled {
345
+ cursor: not-allowed;
346
+ }
347
+
348
+ .site-search__kbd {
349
+ position: absolute;
350
+ right: 0.55rem;
351
+ display: inline-flex;
352
+ align-items: center;
353
+ justify-content: center;
354
+ min-width: 1.4rem;
355
+ height: 1.4rem;
356
+ padding: 0 0.35rem;
357
+ border: 1px solid var(--line);
358
+ border-radius: 5px;
359
+ background: var(--surface-2);
360
+ color: var(--muted);
361
+ font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
362
+ font-size: 0.72rem;
363
+ font-weight: 600;
364
+ pointer-events: none;
201
365
  }
202
366
 
203
367
  .site-search__panel {
204
368
  position: absolute;
205
- top: calc(100% + 0.55rem);
369
+ top: calc(100% + 0.5rem);
206
370
  right: 0;
207
- width: min(31rem, calc(100vw - 2rem));
371
+ width: min(34rem, calc(100vw - 2rem));
208
372
  max-height: min(31rem, calc(100vh - 6rem));
209
373
  overflow: auto;
210
374
  padding: 0.85rem;
211
375
  border: 1px solid var(--line);
212
376
  border-radius: var(--radius);
213
377
  background: var(--surface);
214
- box-shadow: 0 20px 45px rgb(15 23 42 / 18%);
378
+ box-shadow: var(--shadow-lg);
215
379
  }
216
380
 
217
381
  .site-search__status {
218
- margin: 0 0 0.75rem;
382
+ margin: 0 0 0.6rem;
219
383
  color: var(--muted);
220
- font-size: 0.86rem;
384
+ font-size: 0.84rem;
221
385
  }
222
386
 
223
387
  .site-search__results {
@@ -226,119 +390,332 @@ a {
226
390
  padding: 0;
227
391
  }
228
392
 
393
+ .site-search__results li {
394
+ padding: 0.65rem 0.55rem;
395
+ border-radius: 8px;
396
+ transition: background 120ms var(--ease);
397
+ }
398
+
399
+ .site-search__results li:hover {
400
+ background: var(--surface-2);
401
+ }
402
+
229
403
  .site-search__results li + li {
230
- margin-top: 0.65rem;
231
- padding-top: 0.65rem;
232
- border-top: 1px solid var(--line);
404
+ margin-top: 0.2rem;
233
405
  }
234
406
 
235
407
  .site-search__results a {
236
408
  display: inline-block;
237
409
  color: var(--ink);
238
- font-weight: 750;
410
+ font-weight: 600;
239
411
  text-decoration: none;
240
412
  }
241
413
 
242
414
  .site-search__results a:hover {
243
415
  color: var(--accent);
244
- text-decoration: underline;
245
416
  }
246
417
 
247
418
  .site-search__results span {
248
- display: block;
249
- margin-top: 0.1rem;
419
+ display: inline-block;
420
+ margin-top: 0.15rem;
421
+ padding: 0.1rem 0.45rem;
422
+ border-radius: 4px;
423
+ background: var(--accent-soft);
250
424
  color: var(--accent);
251
- font-size: 0.75rem;
252
- font-weight: 750;
425
+ font-size: 0.7rem;
426
+ font-weight: 600;
253
427
  text-transform: uppercase;
428
+ letter-spacing: 0.04em;
254
429
  }
255
430
 
256
431
  .site-search__results p {
257
- margin: 0.25rem 0 0;
432
+ margin: 0.3rem 0 0;
258
433
  color: var(--muted);
259
- font-size: 0.88rem;
260
- line-height: 1.45;
434
+ font-size: 0.86rem;
435
+ line-height: 1.5;
261
436
  }
262
437
 
263
- .hero {
438
+ /* Theme toggle */
439
+
440
+ .theme-toggle {
441
+ display: inline-flex;
442
+ align-items: center;
443
+ justify-content: center;
444
+ width: 36px;
445
+ height: 36px;
446
+ border: 1px solid var(--line);
447
+ border-radius: 9px;
264
448
  background: var(--surface);
449
+ color: var(--ink);
450
+ cursor: pointer;
451
+ transition: border-color 120ms var(--ease), background 120ms var(--ease), color 120ms var(--ease);
452
+ }
453
+
454
+ .theme-toggle:hover {
455
+ border-color: var(--line-strong);
456
+ color: var(--accent);
457
+ }
458
+
459
+ .theme-toggle__icon {
460
+ position: absolute;
461
+ }
462
+
463
+ .theme-toggle__icon--sun {
464
+ display: none;
465
+ }
466
+
467
+ .theme-toggle__icon--moon {
468
+ display: inline-block;
469
+ }
470
+
471
+ :root[data-theme="dark"] .theme-toggle__icon--sun,
472
+ :root:not([data-theme="light"]) .theme-toggle__icon--sun {
473
+ /* default depends on resolved theme */
474
+ }
475
+
476
+ @media (prefers-color-scheme: dark) {
477
+ :root:not([data-theme="light"]) .theme-toggle__icon--sun {
478
+ display: inline-block;
479
+ }
480
+ :root:not([data-theme="light"]) .theme-toggle__icon--moon {
481
+ display: none;
482
+ }
483
+ }
484
+
485
+ :root[data-theme="dark"] .theme-toggle__icon--sun {
486
+ display: inline-block;
487
+ }
488
+
489
+ :root[data-theme="dark"] .theme-toggle__icon--moon {
490
+ display: none;
491
+ }
492
+
493
+ :root[data-theme="light"] .theme-toggle__icon--sun {
494
+ display: none;
495
+ }
496
+
497
+ :root[data-theme="light"] .theme-toggle__icon--moon {
498
+ display: inline-block;
499
+ }
500
+
501
+ /* ---------- Hero ---------- */
502
+
503
+ .hero {
504
+ position: relative;
505
+ overflow: hidden;
506
+ background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%);
265
507
  border-bottom: 1px solid var(--line);
266
508
  }
267
509
 
510
+ .hero__bg {
511
+ position: absolute;
512
+ inset: 0;
513
+ pointer-events: none;
514
+ }
515
+
516
+ .hero__grid {
517
+ position: absolute;
518
+ inset: 0;
519
+ background-image:
520
+ linear-gradient(to right, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
521
+ linear-gradient(to bottom, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
522
+ background-size: 56px 56px;
523
+ mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 30%, transparent 75%);
524
+ -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 30%, transparent 75%);
525
+ opacity: 0.7;
526
+ }
527
+
528
+ .hero__glow {
529
+ position: absolute;
530
+ top: -180px;
531
+ left: 50%;
532
+ transform: translateX(-50%);
533
+ width: 720px;
534
+ height: 540px;
535
+ background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 60%);
536
+ filter: blur(40px);
537
+ }
538
+
268
539
  .hero__inner {
269
- padding: 2rem 0 4rem;
540
+ position: relative;
541
+ padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
542
+ }
543
+
544
+ .hero__title {
545
+ margin: 0.4rem 0 1rem;
546
+ font-size: clamp(2.2rem, 4.4vw, 3.4rem);
547
+ font-weight: 800;
548
+ line-height: 1.08;
549
+ letter-spacing: -0.03em;
550
+ background: linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--ink) 70%, var(--accent)) 100%);
551
+ -webkit-background-clip: text;
552
+ background-clip: text;
553
+ color: transparent;
554
+ }
555
+
556
+ .hero__actions {
557
+ display: flex;
558
+ flex-wrap: wrap;
559
+ gap: 0.65rem;
560
+ margin-top: 1.6rem;
270
561
  }
271
562
 
272
563
  .eyebrow {
273
- margin: 0 0 0.75rem;
274
- color: var(--accent);
275
- font-size: 0.78rem;
276
- font-weight: 750;
277
- letter-spacing: 0;
564
+ display: inline-flex;
565
+ align-items: center;
566
+ gap: 0.5rem;
567
+ margin: 0 0 0.5rem;
568
+ padding: 0.3rem 0.65rem;
569
+ border: 1px solid var(--line);
570
+ border-radius: 999px;
571
+ background: var(--surface);
572
+ color: var(--muted);
573
+ font-size: 0.74rem;
574
+ font-weight: 600;
575
+ letter-spacing: 0.04em;
278
576
  text-transform: uppercase;
279
577
  }
280
578
 
281
- h1,
282
- h2,
283
- h3 {
579
+ .eyebrow__dot {
580
+ width: 6px;
581
+ height: 6px;
582
+ border-radius: 50%;
583
+ background: var(--accent);
584
+ box-shadow: 0 0 0 3px var(--accent-soft);
585
+ }
586
+
587
+ .eyebrow__version {
588
+ padding: 0.05rem 0.4rem;
589
+ border-radius: 999px;
590
+ background: var(--accent-soft);
591
+ color: var(--accent);
592
+ font-size: 0.68rem;
593
+ letter-spacing: 0.02em;
594
+ }
595
+
596
+ .eyebrow--error .eyebrow__dot {
597
+ background: var(--alert-caution);
598
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--alert-caution) 14%, transparent);
599
+ }
600
+
601
+ h1, h2, h3, h4, h5, h6 {
602
+ letter-spacing: -0.02em;
603
+ }
604
+
605
+ h1, h2, h3 {
284
606
  line-height: 1.2;
285
607
  }
286
608
 
287
609
  h1 {
288
610
  margin: 0;
289
- font-size: clamp(2.25rem, 6vw, 3.5rem);
290
- max-width: 12ch;
291
611
  }
292
612
 
293
613
  .lede {
614
+ max-width: 64ch;
615
+ margin: 0;
294
616
  color: var(--muted);
295
- font-size: 1.1rem;
296
- max-width: 68ch;
617
+ font-size: clamp(1rem, 1.4vw, 1.15rem);
618
+ line-height: 1.65;
297
619
  }
298
620
 
621
+ /* ---------- Cards ---------- */
622
+
299
623
  .docs-grid {
300
624
  display: grid;
301
625
  grid-template-columns: repeat(4, minmax(0, 1fr));
302
626
  gap: 1rem;
303
- padding: 2rem 0 4rem;
627
+ padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem);
304
628
  }
305
629
 
306
630
  .docs-card {
307
- min-height: 13rem;
631
+ position: relative;
308
632
  display: flex;
309
633
  flex-direction: column;
310
- gap: 0.75rem;
311
- padding: 1.25rem;
634
+ gap: 0.55rem;
635
+ padding: 1.25rem 1.25rem 1.4rem;
312
636
  background: var(--surface);
313
637
  border: 1px solid var(--line);
314
638
  border-radius: var(--radius);
315
639
  color: var(--ink);
316
640
  text-decoration: none;
641
+ overflow: hidden;
642
+ isolation: isolate;
643
+ transition: border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
644
+ }
645
+
646
+ .docs-card::before {
647
+ content: "";
648
+ position: absolute;
649
+ inset: 0;
650
+ background: linear-gradient(135deg, var(--accent-soft), transparent 60%);
651
+ opacity: 0;
652
+ transition: opacity 180ms var(--ease);
653
+ z-index: -1;
317
654
  }
318
655
 
319
656
  .docs-card:hover {
320
- border-color: var(--accent);
657
+ border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
658
+ transform: translateY(-2px);
659
+ box-shadow: var(--shadow-md);
660
+ }
661
+
662
+ .docs-card:hover::before {
663
+ opacity: 1;
321
664
  }
322
665
 
323
666
  .docs-card__kicker {
667
+ display: inline-block;
668
+ align-self: flex-start;
669
+ padding: 0.2rem 0.55rem;
670
+ border-radius: 999px;
671
+ background: var(--accent-soft);
324
672
  color: var(--accent);
325
- font-size: 0.8rem;
326
- font-weight: 750;
673
+ font-size: 0.7rem;
674
+ font-weight: 600;
675
+ letter-spacing: 0.04em;
676
+ text-transform: uppercase;
327
677
  }
328
678
 
329
679
  .docs-card strong {
330
- font-size: 1.15rem;
680
+ font-size: 1.1rem;
681
+ font-weight: 700;
682
+ letter-spacing: -0.015em;
331
683
  }
332
684
 
333
- .docs-card span:last-child {
685
+ .docs-card__desc {
334
686
  color: var(--muted);
687
+ font-size: 0.92rem;
688
+ line-height: 1.55;
689
+ }
690
+
691
+ .docs-card__arrow {
692
+ position: absolute;
693
+ right: 1rem;
694
+ bottom: 1rem;
695
+ display: inline-flex;
696
+ align-items: center;
697
+ justify-content: center;
698
+ width: 28px;
699
+ height: 28px;
700
+ border-radius: 50%;
701
+ color: var(--muted);
702
+ background: transparent;
703
+ transition: color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease);
335
704
  }
336
705
 
706
+ .docs-card:hover .docs-card__arrow {
707
+ color: var(--accent);
708
+ background: var(--accent-soft);
709
+ transform: translateX(2px);
710
+ }
711
+
712
+ /* ---------- Doc layout ---------- */
713
+
337
714
  .doc-layout {
338
715
  display: grid;
339
716
  grid-template-columns: minmax(0, 1fr);
340
- gap: 2.75rem;
341
- padding: 3rem 0 5rem;
717
+ gap: 3rem;
718
+ padding: clamp(2.25rem, 4vw, 3.25rem) 0 clamp(3rem, 5vw, 4.5rem);
342
719
  }
343
720
 
344
721
  .doc-layout--with-toc {
@@ -350,16 +727,18 @@ h1 {
350
727
  }
351
728
 
352
729
  .doc-header {
353
- padding-bottom: 1.5rem;
354
- border-bottom: 1px solid var(--line);
355
730
  margin-bottom: 2rem;
356
731
  }
357
732
 
358
733
  .doc-header h1 {
359
- max-width: 18ch;
360
- font-size: clamp(2rem, 4vw, 2.5rem);
734
+ margin: 0.5rem 0 0;
735
+ font-size: clamp(2rem, 3.5vw, 2.6rem);
736
+ font-weight: 800;
737
+ letter-spacing: -0.025em;
361
738
  }
362
739
 
740
+ /* npm link cards (used in some docs) */
741
+
363
742
  .npm-links {
364
743
  display: grid;
365
744
  grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -378,44 +757,52 @@ h1 {
378
757
  background: var(--surface);
379
758
  color: var(--ink);
380
759
  text-decoration: none;
760
+ transition: border-color 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
381
761
  }
382
762
 
383
763
  .npm-link-card:hover {
384
- border-color: var(--accent);
764
+ border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
765
+ transform: translateY(-2px);
766
+ box-shadow: var(--shadow-sm);
385
767
  }
386
768
 
387
769
  .npm-link-card span {
388
770
  color: var(--accent);
389
- font-size: 0.78rem;
390
- font-weight: 750;
771
+ font-size: 0.74rem;
772
+ font-weight: 700;
773
+ letter-spacing: 0.04em;
391
774
  text-transform: uppercase;
392
775
  }
393
776
 
394
777
  .npm-link-card strong {
395
- font-size: 1.05rem;
778
+ font-size: 1.02rem;
396
779
  }
397
780
 
398
781
  .npm-link-card small {
399
782
  color: var(--muted);
400
783
  font-size: 0.9rem;
401
- line-height: 1.45;
784
+ line-height: 1.5;
402
785
  }
403
786
 
787
+ /* ---------- TOC ---------- */
788
+
404
789
  .doc-toc {
405
790
  position: sticky;
406
791
  top: 5.5rem;
407
792
  align-self: start;
408
793
  max-height: calc(100vh - 7rem);
409
794
  overflow: auto;
410
- padding-left: 1rem;
795
+ padding-left: 1.1rem;
411
796
  border-left: 1px solid var(--line);
412
797
  }
413
798
 
414
799
  .doc-toc__title {
415
- margin: 0 0 0.75rem;
416
- color: var(--ink);
417
- font-size: 0.8rem;
418
- font-weight: 750;
800
+ margin: 0 0 0.85rem;
801
+ color: var(--muted-2);
802
+ font-size: 0.74rem;
803
+ font-weight: 700;
804
+ letter-spacing: 0.06em;
805
+ text-transform: uppercase;
419
806
  }
420
807
 
421
808
  .doc-toc ol {
@@ -425,7 +812,7 @@ h1 {
425
812
  }
426
813
 
427
814
  .doc-toc__item + .doc-toc__item {
428
- margin-top: 0.5rem;
815
+ margin-top: 0.15rem;
429
816
  }
430
817
 
431
818
  .doc-toc__item--level-3 {
@@ -437,70 +824,153 @@ h1 {
437
824
  }
438
825
 
439
826
  .doc-toc a {
827
+ display: block;
828
+ position: relative;
829
+ padding: 0.3rem 0.5rem 0.3rem 0.65rem;
830
+ border-radius: 6px;
440
831
  color: var(--muted);
441
832
  text-decoration: none;
442
- font-size: 0.88rem;
443
- line-height: 1.35;
833
+ font-size: 0.86rem;
834
+ line-height: 1.4;
835
+ transition: color 120ms var(--ease), background 120ms var(--ease);
836
+ }
837
+
838
+ .doc-toc a::before {
839
+ content: "";
840
+ position: absolute;
841
+ left: -1.1rem;
842
+ top: 50%;
843
+ transform: translateY(-50%) scaleY(0);
844
+ width: 2px;
845
+ height: 1.05rem;
846
+ border-radius: 2px;
847
+ background: var(--accent);
848
+ transition: transform 160ms var(--ease);
444
849
  }
445
850
 
446
851
  .doc-toc a:hover {
852
+ color: var(--ink);
853
+ background: var(--surface-2);
854
+ }
855
+
856
+ .doc-toc a.is-active,
857
+ .doc-toc a[aria-current="true"] {
447
858
  color: var(--accent);
859
+ font-weight: 600;
860
+ }
861
+
862
+ .doc-toc a.is-active::before,
863
+ .doc-toc a[aria-current="true"]::before {
864
+ transform: translateY(-50%) scaleY(1);
448
865
  }
449
866
 
867
+ /* ---------- Prose ---------- */
868
+
450
869
  .prose {
451
870
  max-width: 78ch;
452
871
  color: var(--prose-ink);
872
+ font-size: 1rem;
873
+ }
874
+
875
+ .prose > :first-child {
876
+ margin-top: 0;
453
877
  }
454
878
 
455
879
  .prose h1 {
456
- display: none;
880
+ margin: 0 0 1rem;
881
+ color: var(--ink);
882
+ font-size: clamp(2rem, 3.6vw, 2.55rem);
883
+ font-weight: 800;
884
+ letter-spacing: -0.025em;
457
885
  }
458
886
 
459
887
  .prose h2 {
460
- margin-top: 2.25rem;
461
- color: var(--ink);
462
- font-size: 1.6rem;
463
- padding-bottom: 0.5rem;
888
+ margin-top: 2.5rem;
889
+ margin-bottom: 0.85rem;
890
+ padding-bottom: 0.55rem;
464
891
  border-bottom: 1px solid var(--line);
892
+ color: var(--ink);
893
+ font-size: 1.5rem;
894
+ font-weight: 700;
465
895
  }
466
896
 
467
897
  .prose h3 {
468
- margin-top: 1.75rem;
898
+ margin-top: 2rem;
899
+ margin-bottom: 0.6rem;
469
900
  color: var(--ink);
901
+ font-size: 1.18rem;
902
+ font-weight: 700;
470
903
  }
471
904
 
472
- .prose p,
473
- .prose li {
905
+ .prose h4 {
906
+ margin-top: 1.5rem;
907
+ margin-bottom: 0.45rem;
908
+ color: var(--ink);
474
909
  font-size: 1rem;
910
+ font-weight: 700;
911
+ }
912
+
913
+ .prose p {
914
+ margin: 0 0 1rem;
475
915
  }
476
916
 
477
917
  .prose ul,
478
918
  .prose ol {
479
- padding-left: 1.45rem;
919
+ padding-left: 1.4rem;
920
+ margin: 0 0 1rem;
480
921
  }
481
922
 
482
923
  .prose li + li {
483
- margin-top: 0.35rem;
924
+ margin-top: 0.3rem;
925
+ }
926
+
927
+ .prose a {
928
+ color: var(--accent);
929
+ text-decoration: underline;
930
+ text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent);
931
+ text-underline-offset: 3px;
932
+ }
933
+
934
+ .prose a:hover {
935
+ text-decoration-color: var(--accent);
936
+ }
937
+
938
+ .prose strong {
939
+ color: var(--ink);
940
+ font-weight: 700;
484
941
  }
485
942
 
486
943
  .prose code {
487
944
  background: var(--code-bg);
488
- border-radius: 4px;
489
- padding: 0.1rem 0.3rem;
490
- font-size: 0.92em;
945
+ border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
946
+ border-radius: 5px;
947
+ padding: 0.08rem 0.34rem;
948
+ font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
949
+ font-size: 0.88em;
950
+ color: var(--ink-soft);
491
951
  }
492
952
 
493
953
  .prose pre {
954
+ position: relative;
494
955
  overflow: auto;
495
- padding: 1rem;
956
+ margin: 1.4rem 0;
957
+ padding: 1.1rem 1.2rem;
496
958
  background: var(--pre-bg);
497
959
  color: var(--pre-ink);
960
+ border: 1px solid color-mix(in srgb, var(--pre-bg) 60%, var(--line));
498
961
  border-radius: var(--radius);
962
+ box-shadow: var(--shadow-sm);
963
+ font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
964
+ font-size: 0.86rem;
965
+ line-height: 1.6;
499
966
  }
500
967
 
501
968
  .prose pre code {
502
969
  background: transparent;
970
+ border: 0;
503
971
  padding: 0;
972
+ color: inherit;
973
+ font-size: inherit;
504
974
  }
505
975
 
506
976
  .prose pre code.hljs {
@@ -508,95 +978,93 @@ h1 {
508
978
  }
509
979
 
510
980
  .prose .hljs-comment,
511
- .prose .hljs-quote {
512
- color: var(--syntax-comment);
513
- font-style: italic;
514
- }
515
-
981
+ .prose .hljs-quote { color: var(--syntax-comment); font-style: italic; }
516
982
  .prose .hljs-keyword,
517
983
  .prose .hljs-selector-tag,
518
- .prose .hljs-subst {
519
- color: var(--syntax-keyword);
520
- }
521
-
984
+ .prose .hljs-subst { color: var(--syntax-keyword); }
522
985
  .prose .hljs-title,
523
986
  .prose .hljs-section,
524
987
  .prose .hljs-name,
525
988
  .prose .hljs-selector-id,
526
- .prose .hljs-selector-class {
527
- color: var(--syntax-title);
528
- }
529
-
989
+ .prose .hljs-selector-class { color: var(--syntax-title); }
530
990
  .prose .hljs-string,
531
991
  .prose .hljs-regexp,
532
992
  .prose .hljs-symbol,
533
- .prose .hljs-bullet {
534
- color: var(--syntax-string);
535
- }
536
-
993
+ .prose .hljs-bullet { color: var(--syntax-string); }
537
994
  .prose .hljs-number,
538
- .prose .hljs-literal {
539
- color: var(--syntax-number);
540
- }
541
-
995
+ .prose .hljs-literal { color: var(--syntax-number); }
542
996
  .prose .hljs-attr,
543
997
  .prose .hljs-attribute,
544
998
  .prose .hljs-variable,
545
- .prose .hljs-template-variable {
546
- color: var(--syntax-attr);
547
- }
548
-
999
+ .prose .hljs-template-variable { color: var(--syntax-attr); }
549
1000
  .prose .hljs-built_in,
550
1001
  .prose .hljs-type,
551
- .prose .hljs-class .hljs-title {
552
- color: var(--syntax-built-in);
553
- }
554
-
555
- .prose .hljs-deletion {
556
- color: var(--syntax-deletion);
557
- }
558
-
559
- .prose .hljs-addition {
560
- color: var(--syntax-addition);
561
- }
562
-
563
- .prose .hljs-emphasis {
564
- font-style: italic;
565
- }
566
-
567
- .prose .hljs-strong {
568
- font-weight: 800;
569
- }
1002
+ .prose .hljs-class .hljs-title { color: var(--syntax-built-in); }
1003
+ .prose .hljs-deletion { color: var(--syntax-deletion); }
1004
+ .prose .hljs-addition { color: var(--syntax-addition); }
1005
+ .prose .hljs-emphasis { font-style: italic; }
1006
+ .prose .hljs-strong { font-weight: 700; }
570
1007
 
571
1008
  .prose table {
572
1009
  display: block;
573
1010
  width: 100%;
574
1011
  overflow-x: auto;
575
1012
  margin: 1.5rem 0;
576
- border-collapse: collapse;
1013
+ border-collapse: separate;
1014
+ border-spacing: 0;
577
1015
  font-size: 0.94rem;
1016
+ border: 1px solid var(--line);
1017
+ border-radius: var(--radius);
578
1018
  }
579
1019
 
580
1020
  .prose th,
581
1021
  .prose td {
582
- padding: 0.65rem 0.75rem;
583
- border: 1px solid var(--line);
1022
+ padding: 0.7rem 0.85rem;
1023
+ border-bottom: 1px solid var(--line);
584
1024
  text-align: left;
585
1025
  vertical-align: top;
586
1026
  }
587
1027
 
1028
+ .prose th + th,
1029
+ .prose td + td {
1030
+ border-left: 1px solid var(--line);
1031
+ }
1032
+
1033
+ .prose tr:last-child td {
1034
+ border-bottom: 0;
1035
+ }
1036
+
588
1037
  .prose th {
589
- background: var(--code-bg);
1038
+ background: var(--surface-2);
590
1039
  color: var(--ink);
591
- font-weight: 750;
1040
+ font-weight: 700;
1041
+ font-size: 0.84rem;
1042
+ letter-spacing: 0.02em;
1043
+ text-transform: uppercase;
592
1044
  }
593
1045
 
594
1046
  .prose blockquote {
595
1047
  margin: 1.5rem 0;
596
- padding: 0.75rem 1rem;
597
- border-left: 4px solid var(--accent);
1048
+ padding: 0.85rem 1.1rem;
1049
+ border-left: 3px solid var(--accent);
1050
+ border-radius: 0 var(--radius) var(--radius) 0;
598
1051
  background: var(--accent-soft);
599
- color: var(--ink);
1052
+ color: var(--ink-soft);
1053
+ }
1054
+
1055
+ .prose blockquote p:last-child {
1056
+ margin-bottom: 0;
1057
+ }
1058
+
1059
+ .prose hr {
1060
+ margin: 2.5rem 0;
1061
+ border: 0;
1062
+ border-top: 1px solid var(--line);
1063
+ }
1064
+
1065
+ .prose img {
1066
+ max-width: 100%;
1067
+ border-radius: var(--radius);
600
1068
  }
601
1069
 
602
1070
  .prose .contains-task-list {
@@ -617,41 +1085,57 @@ h1 {
617
1085
  accent-color: var(--accent);
618
1086
  }
619
1087
 
1088
+ /* GitHub-style alerts */
1089
+
620
1090
  .prose .zp-alert {
1091
+ position: relative;
621
1092
  margin: 1.5rem 0;
622
- padding: 0.9rem 1rem;
623
- border-left: 4px solid var(--alert-note);
624
- border-radius: 0 var(--radius) var(--radius) 0;
625
- background: color-mix(in srgb, var(--alert-note) 12%, transparent);
626
- color: var(--ink);
1093
+ padding: 0.95rem 1.1rem 0.95rem 1.1rem;
1094
+ border: 1px solid color-mix(in srgb, var(--alert-note) 30%, var(--line));
1095
+ border-left: 3px solid var(--alert-note);
1096
+ border-radius: var(--radius);
1097
+ background: color-mix(in srgb, var(--alert-note) 7%, var(--surface));
1098
+ color: var(--ink-soft);
627
1099
  }
628
1100
 
629
1101
  .prose .zp-alert--tip {
1102
+ border-color: color-mix(in srgb, var(--alert-tip) 30%, var(--line));
630
1103
  border-left-color: var(--alert-tip);
631
- background: color-mix(in srgb, var(--alert-tip) 12%, transparent);
1104
+ background: color-mix(in srgb, var(--alert-tip) 7%, var(--surface));
632
1105
  }
633
1106
 
634
1107
  .prose .zp-alert--important {
1108
+ border-color: color-mix(in srgb, var(--alert-important) 30%, var(--line));
635
1109
  border-left-color: var(--alert-important);
636
- background: color-mix(in srgb, var(--alert-important) 12%, transparent);
1110
+ background: color-mix(in srgb, var(--alert-important) 7%, var(--surface));
637
1111
  }
638
1112
 
639
1113
  .prose .zp-alert--warning {
1114
+ border-color: color-mix(in srgb, var(--alert-warning) 30%, var(--line));
640
1115
  border-left-color: var(--alert-warning);
641
- background: color-mix(in srgb, var(--alert-warning) 14%, transparent);
1116
+ background: color-mix(in srgb, var(--alert-warning) 8%, var(--surface));
642
1117
  }
643
1118
 
644
1119
  .prose .zp-alert--caution {
1120
+ border-color: color-mix(in srgb, var(--alert-caution) 30%, var(--line));
645
1121
  border-left-color: var(--alert-caution);
646
- background: color-mix(in srgb, var(--alert-caution) 12%, transparent);
1122
+ background: color-mix(in srgb, var(--alert-caution) 7%, var(--surface));
647
1123
  }
648
1124
 
649
1125
  .prose .zp-alert__title {
650
1126
  margin: 0 0 0.45rem;
651
- color: var(--ink);
652
- font-weight: 800;
1127
+ color: var(--alert-note);
1128
+ font-weight: 700;
1129
+ font-size: 0.9rem;
1130
+ letter-spacing: 0.01em;
1131
+ text-transform: uppercase;
653
1132
  }
654
1133
 
1134
+ .prose .zp-alert--tip .zp-alert__title { color: var(--alert-tip); }
1135
+ .prose .zp-alert--important .zp-alert__title { color: var(--alert-important); }
1136
+ .prose .zp-alert--warning .zp-alert__title { color: var(--alert-warning); }
1137
+ .prose .zp-alert--caution .zp-alert__title { color: var(--alert-caution); }
1138
+
655
1139
  .prose .zp-alert > :last-child {
656
1140
  margin-bottom: 0;
657
1141
  }
@@ -662,6 +1146,8 @@ h1 {
662
1146
  margin-top: 1rem;
663
1147
  }
664
1148
 
1149
+ /* ---------- Doc footer / source link ---------- */
1150
+
665
1151
  .doc-source {
666
1152
  max-width: 78ch;
667
1153
  margin-top: 3rem;
@@ -670,33 +1156,77 @@ h1 {
670
1156
  }
671
1157
 
672
1158
  .doc-source a {
1159
+ display: inline-flex;
1160
+ align-items: center;
1161
+ gap: 0.4rem;
673
1162
  color: var(--muted);
674
- font-size: 0.94rem;
675
- font-weight: 700;
1163
+ font-size: 0.9rem;
1164
+ font-weight: 600;
676
1165
  text-decoration: none;
1166
+ transition: color 120ms var(--ease);
677
1167
  }
678
1168
 
679
1169
  .doc-source a:hover {
680
1170
  color: var(--accent);
681
- text-decoration: underline;
682
1171
  }
683
1172
 
1173
+ /* ---------- Buttons ---------- */
1174
+
684
1175
  .button-link {
685
- display: inline-block;
686
- margin-top: 1rem;
687
- padding: 0.65rem 0.9rem;
688
- border-radius: 6px;
689
- background: var(--accent);
690
- color: var(--button-ink);
1176
+ display: inline-flex;
1177
+ align-items: center;
1178
+ gap: 0.45rem;
1179
+ padding: 0.65rem 1rem;
1180
+ border: 1px solid transparent;
1181
+ border-radius: 9px;
1182
+ background: var(--ink);
1183
+ color: var(--bg);
691
1184
  text-decoration: none;
692
- font-weight: 700;
1185
+ font-weight: 600;
1186
+ font-size: 0.92rem;
1187
+ letter-spacing: -0.005em;
1188
+ box-shadow: var(--shadow-sm);
1189
+ transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease);
1190
+ }
1191
+
1192
+ .button-link:hover {
1193
+ transform: translateY(-1px);
1194
+ box-shadow: var(--shadow-md);
1195
+ background: var(--accent);
1196
+ color: var(--accent-ink);
693
1197
  }
694
1198
 
1199
+ .button-link--ghost {
1200
+ background: transparent;
1201
+ color: var(--ink);
1202
+ border-color: var(--line);
1203
+ box-shadow: none;
1204
+ }
1205
+
1206
+ .button-link--ghost:hover {
1207
+ background: var(--surface-2);
1208
+ color: var(--ink);
1209
+ border-color: var(--line-strong);
1210
+ }
1211
+
1212
+ /* ---------- 404 ---------- */
1213
+
695
1214
  .not-found {
696
- padding: 5rem 0;
1215
+ padding: clamp(4rem, 8vw, 6rem) 0;
1216
+ text-align: left;
697
1217
  }
698
1218
 
1219
+ .not-found h1 {
1220
+ margin: 0.5rem 0 1rem;
1221
+ font-size: clamp(2.2rem, 4vw, 3rem);
1222
+ font-weight: 800;
1223
+ letter-spacing: -0.025em;
1224
+ }
1225
+
1226
+ /* ---------- Footer ---------- */
1227
+
699
1228
  .site-footer {
1229
+ margin-top: auto;
700
1230
  border-top: 1px solid var(--line);
701
1231
  background: var(--surface);
702
1232
  }
@@ -707,50 +1237,121 @@ h1 {
707
1237
  align-items: center;
708
1238
  justify-content: space-between;
709
1239
  flex-wrap: wrap;
710
- gap: 0.5rem 1.5rem;
1240
+ gap: 0.75rem 1.5rem;
1241
+ padding: 1.4rem 0;
1242
+ }
1243
+
1244
+ .site-footer__meta {
1245
+ display: flex;
1246
+ flex-wrap: wrap;
1247
+ gap: 0.35rem 1rem;
711
1248
  }
712
1249
 
713
1250
  .site-footer p {
714
1251
  margin: 0;
715
1252
  color: var(--muted);
716
- font-size: 0.94rem;
1253
+ font-size: 0.9rem;
1254
+ }
1255
+
1256
+ .site-footer__nav ul {
1257
+ display: flex;
1258
+ flex-wrap: wrap;
1259
+ gap: 0.35rem 1.1rem;
1260
+ justify-content: flex-end;
1261
+ margin: 0;
1262
+ padding: 0;
1263
+ list-style: none;
717
1264
  }
718
1265
 
719
1266
  .site-footer a {
720
- font-weight: 700;
1267
+ color: var(--muted);
1268
+ font-weight: 500;
721
1269
  text-decoration: none;
1270
+ font-size: 0.9rem;
1271
+ transition: color 120ms var(--ease);
722
1272
  }
723
1273
 
724
1274
  .site-footer a:hover {
1275
+ color: var(--ink);
725
1276
  text-decoration: underline;
1277
+ text-underline-offset: 3px;
726
1278
  }
727
1279
 
728
1280
  [id] {
729
1281
  scroll-margin-top: 100px;
730
1282
  }
731
1283
 
732
- h1, h2, h3, h4, h5, h6 {
733
- -webkit-font-smoothing: antialiased;
1284
+ /* ---------- Responsive ---------- */
1285
+
1286
+ @media (max-width: 1120px) {
1287
+ .site-search {
1288
+ flex: 0 0 13rem;
1289
+ width: 13rem;
1290
+ }
734
1291
  }
735
1292
 
736
- @media (max-width: 860px) {
1293
+ @media (max-width: 980px) {
1294
+ .docs-grid {
1295
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1296
+ }
1297
+
1298
+ .doc-layout--with-toc {
1299
+ grid-template-columns: minmax(0, 1fr);
1300
+ }
1301
+
1302
+ .doc-toc {
1303
+ position: static;
1304
+ max-height: none;
1305
+ padding: 1.25rem 0 0;
1306
+ border-left: 0;
1307
+ border-top: 1px solid var(--line);
1308
+ }
1309
+ }
1310
+
1311
+ @media (max-width: 820px) {
1312
+ .nav-toggle {
1313
+ display: inline-flex;
1314
+ }
1315
+
737
1316
  .site-header__inner {
738
- align-items: flex-start;
739
- flex-direction: column;
740
- padding: 1rem 0;
1317
+ gap: 0.75rem;
741
1318
  }
742
1319
 
743
1320
  .site-header__actions {
744
- width: 100%;
745
- align-items: stretch;
1321
+ position: absolute;
1322
+ top: 100%;
1323
+ left: 0;
1324
+ right: 0;
746
1325
  flex-direction: column;
1326
+ align-items: stretch;
1327
+ gap: 0.75rem;
1328
+ padding: 1rem 1.25rem 1.25rem;
1329
+ background: var(--surface);
1330
+ border-bottom: 1px solid var(--line);
1331
+ box-shadow: var(--shadow-md);
1332
+ transform: translateY(-8px);
1333
+ opacity: 0;
1334
+ pointer-events: none;
1335
+ transition: opacity 160ms var(--ease), transform 160ms var(--ease);
1336
+ }
1337
+
1338
+ .site-header__actions.is-open {
1339
+ opacity: 1;
1340
+ transform: translateY(0);
1341
+ pointer-events: auto;
747
1342
  }
748
1343
 
749
1344
  .site-nav ul {
750
- justify-content: flex-start;
1345
+ flex-direction: column;
1346
+ gap: 0.1rem;
1347
+ }
1348
+
1349
+ .site-nav a {
1350
+ padding: 0.6rem 0.75rem;
751
1351
  }
752
1352
 
753
1353
  .site-search {
1354
+ flex: 0 0 auto;
754
1355
  width: 100%;
755
1356
  }
756
1357
 
@@ -760,22 +1361,30 @@ h1, h2, h3, h4, h5, h6 {
760
1361
  width: 100%;
761
1362
  }
762
1363
 
763
- .docs-grid,
764
- .npm-links,
765
- .doc-layout,
766
- .doc-layout--with-toc {
1364
+ .theme-toggle {
1365
+ align-self: flex-start;
1366
+ }
1367
+ }
1368
+
1369
+ @media (max-width: 600px) {
1370
+ .docs-grid {
767
1371
  grid-template-columns: 1fr;
768
1372
  }
769
1373
 
770
- .doc-toc {
771
- position: static;
772
- max-height: none;
773
- padding: 1rem 0 0;
774
- border-left: 0;
775
- border-top: 1px solid var(--line);
1374
+ .npm-links {
1375
+ grid-template-columns: 1fr;
776
1376
  }
777
1377
 
778
1378
  [id] {
779
- scroll-margin-top: 160px;
1379
+ scroll-margin-top: 80px;
1380
+ }
1381
+ }
1382
+
1383
+ @media (prefers-reduced-motion: reduce) {
1384
+ *,
1385
+ *::before,
1386
+ *::after {
1387
+ transition: none !important;
1388
+ animation: none !important;
780
1389
  }
781
1390
  }