@zeropress/build-pages 0.6.2 → 0.6.4

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