@docmd/template-summer 0.8.6 → 0.8.7

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,8 +1,8 @@
1
1
  /* =========================================================================
2
- @docmd/template-summer summer.css
2
+ @docmd/template-summer — summer.css
3
3
  A complete, self-contained documentation design system inspired by
4
- modern docs platforms (GitBook, Linear, Notion). Warm, bright, and
5
- modern — designed to feel like its own product, not a recolor.
4
+ modern docs. Warm, bright, and modern —
5
+ designed to feel like its own product, not a recolor.
6
6
 
7
7
  This stylesheet is intentionally independent of docmd-main.css. The
8
8
  layout in templates/layout.ejs does NOT load the base stylesheet, so
@@ -10,137 +10,141 @@
10
10
 
11
11
  Load order (priority chain):
12
12
  0 (docmd-main.css is NOT loaded by the summer layout)
13
- 5 theme CSS palette overlay
14
- 10 summer.css (this) distinctive "summer" design system
15
- 15 customCss[] always wins
13
+ 5 theme CSS — palette overlay
14
+ 10 summer.css (this) — distinctive "summer" design system
15
+ 15 customCss[] — always wins
16
16
 
17
17
  IMPORTANT: Do NOT use !important. User customCss (priority 15) must
18
18
  always win so users can restyle any selector without forking the template.
19
19
  ========================================================================= */
20
20
 
21
-
22
- /* ────────────────────────────────────────────────────────────────────────
23
- 1. DESIGN TOKENS
24
- ──────────────────────────────────────────────────────────────────────── */
25
-
26
21
  :root {
27
- --summer-sidebar-width: 288px;
28
- --summer-toc-width: 240px;
29
- --summer-content-max: 896px;
30
- --summer-page-max: 1728px;
31
- --summer-topbar-height: 50px;
32
- --summer-subnav-height: 44px;
33
- --summer-radius-xs: 4px;
34
- --summer-radius-sm: 6px;
35
- --summer-radius: 20px;
36
- --summer-radius-lg: 12px;
37
- --summer-radius-xl: 18px;
38
- --summer-font-sans: "Inter", "InterVariable", ui-sans-serif, -apple-system,
39
- BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
40
- --summer-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
41
- Menlo, Monaco, "Cascadia Code", "Liberation Mono", monospace;
42
- --summer-text-xs: 0.6875rem;
43
- --summer-text-sm: 0.8125rem;
44
- --summer-text-base: 0.9375rem;
45
- --summer-text-md: 1.0625rem;
46
- --summer-text-lg: 1.25rem;
47
- --summer-text-xl: 1.5rem;
48
- --summer-text-2xl: 1.875rem;
49
- --summer-text-3xl: 2.25rem;
50
- --summer-ease: cubic-bezier(0.32, 0.72, 0, 1);
51
- --summer-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
52
- --summer-fast: 120ms;
53
- --summer-med: 220ms;
54
- --summer-slow: 360ms;
55
- --summer-z-base: 1;
56
- --summer-z-raised: 10;
57
- --summer-z-sticky: 30;
58
- --summer-z-dropdown: 50;
59
- --summer-z-overlay: 100;
60
- --summer-z-modal: 200;
61
- --summer-bg: #ffffff;
62
- --summer-bg-subtle: #fafafa;
63
- --summer-surface: #ffffff;
64
- --summer-surface-2: #fcfcfc;
65
- --summer-surface-3: #f1f1ef;
66
- --summer-surface-sunken: #f5f5f4;
67
- --summer-border: #e5e5e5;
68
- --summer-border-soft: #f0f0f0;
69
- --summer-border-strong: #cdcdcd;
70
- --summer-fg: #1d1d1d;
71
- --summer-fg-soft: #4a4a4a;
72
- --summer-fg-muted: #6e6e6e;
73
- --summer-fg-faint: #a3a3a3;
74
- --summer-accent: #fe551b;
75
- --summer-accent-hover: #e64500;
76
- --summer-accent-soft: #fff3ed;
77
- --summer-accent-faint: #ffe4d4;
78
- --summer-amber: #f59e0b;
79
- --summer-amber-soft: #fff7e6;
80
- --summer-sun: #fbbf24;
81
- --summer-rose: #e11d48;
82
- --summer-sky: #0284c7;
83
- --summer-sky-soft: #e0f2fe;
84
- --summer-green: #16a34a;
85
- --summer-green-soft: #dcfce7;
86
- --summer-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
87
- --summer-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
88
- --summer-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
89
- --summer-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.12), 0 4px 8px -4px rgba(0, 0, 0, 0.06);
90
- --summer-shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
91
- --summer-ring: 0 0 0 3px rgba(254, 85, 27, 0.20);
92
- --summer-ring-soft: 0 0 0 3px rgba(254, 85, 27, 0.10);
93
- --summer-header-divider: 0 1px 0 0 rgba(29, 29, 29, 0.08);
94
- --summer-grid-template: var(--summer-sidebar-width) 1fr var(--summer-toc-width);
95
- --summer-pageheader-height: 50px;
96
- --summer-banner-height: 0px;
97
- --summer-main-padding-top: 32px;
98
-
99
- }
100
-
101
- /* ── Disabled-element adjustments ──────────────────────────────────
102
- When the menubar / page header / banner is absent, the corresponding
103
- --summer-*-height collapses to 0 so sticky elements (sidebar, TOC,
104
- pageheader) sit flush against the topbar instead of leaving a gap. */
105
- .summer-template:not(.has-menubar) { --summer-subnav-height: 0px; }
106
- .summer-template.no-header { --summer-pageheader-height: 0px; }
107
- .summer-template.has-banner { --summer-banner-height: 42px; }
108
- .summer-template:not(.has-banner) { --summer-banner-height: 0px; }
109
- .summer-template:not(.has-banner) .summer-topbar { top: 0; }
110
-
111
- /* DARK palette — GitBook-inspired dark mode. */
22
+ --summer-sidebar-width: 288px;
23
+ --summer-toc-width: 240px;
24
+ --summer-content-max: 896px;
25
+ --summer-page-max: 1728px;
26
+ --summer-topbar-height: 50px;
27
+ --summer-subnav-height: 44px;
28
+ --summer-radius-xs: 4px;
29
+ --summer-radius-sm: 6px;
30
+ --summer-radius: 20px;
31
+ --summer-radius-lg: 12px;
32
+ --summer-radius-xl: 18px;
33
+ --summer-font-sans: "Inter", "InterVariable", ui-sans-serif, -apple-system,
34
+ BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
35
+ --summer-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
36
+ Menlo, Monaco, "Cascadia Code", "Liberation Mono", monospace;
37
+ --summer-text-xs: 0.6875rem;
38
+ --summer-text-sm: 0.8125rem;
39
+ --summer-text-base: 0.9375rem;
40
+ --summer-text-md: 1.0625rem;
41
+ --summer-text-lg: 1.25rem;
42
+ --summer-text-xl: 1.5rem;
43
+ --summer-text-2xl: 1.875rem;
44
+ --summer-text-3xl: 2.25rem;
45
+ --summer-ease: cubic-bezier(0.32, 0.72, 0, 1);
46
+ --summer-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
47
+ --summer-fast: 120ms;
48
+ --summer-med: 220ms;
49
+ --summer-slow: 360ms;
50
+ --summer-z-base: 1;
51
+ --summer-z-raised: 10;
52
+ --summer-z-sticky: 30;
53
+ --summer-z-dropdown: 50;
54
+ --summer-z-overlay: 100;
55
+ --summer-z-modal: 200;
56
+ --summer-bg: #ffffff;
57
+ --summer-bg-subtle: #fafafa;
58
+ --summer-surface: #ffffff;
59
+ --summer-surface-2: #fcfcfc;
60
+ --summer-surface-3: #f1f1ef;
61
+ --summer-surface-sunken: #f5f5f4;
62
+ --summer-border: #e5e5e5;
63
+ --summer-border-soft: #f0f0f0;
64
+ --summer-border-strong: #cdcdcd;
65
+ --summer-fg: #1d1d1d;
66
+ --summer-fg-soft: #4a4a4a;
67
+ --summer-fg-muted: #6e6e6e;
68
+ --summer-fg-faint: #a3a3a3;
69
+ --summer-accent: #fe551b;
70
+ --summer-accent-hover: #e64500;
71
+ --summer-accent-soft: #fff3ed;
72
+ --summer-accent-faint: #ffe4d4;
73
+ --summer-amber: #f59e0b;
74
+ --summer-amber-soft: #fff7e6;
75
+ --summer-sun: #fbbf24;
76
+ --summer-rose: #e11d48;
77
+ --summer-sky: #0284c7;
78
+ --summer-sky-soft: #e0f2fe;
79
+ --summer-green: #16a34a;
80
+ --summer-green-soft: #dcfce7;
81
+ --summer-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
82
+ --summer-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
83
+ --summer-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
84
+ --summer-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.12), 0 4px 8px -4px rgba(0, 0, 0, 0.06);
85
+ --summer-shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
86
+ --summer-ring: 0 0 0 3px rgba(254, 85, 27, 0.20);
87
+ --summer-ring-soft: 0 0 0 3px rgba(254, 85, 27, 0.10);
88
+ --summer-header-divider: 0 1px 0 0 rgba(29, 29, 29, 0.08);
89
+ --summer-grid-template: var(--summer-sidebar-width) 1fr var(--summer-toc-width);
90
+ --summer-pageheader-height: 50px;
91
+ --summer-banner-height: 0px;
92
+ --summer-main-padding-top: 32px;
93
+
94
+ }
95
+
96
+ .summer-template:not(.has-menubar) {
97
+ --summer-subnav-height: 0px;
98
+ }
99
+
100
+ .summer-template.no-header {
101
+ --summer-pageheader-height: 0px;
102
+ }
103
+
104
+ .summer-template.has-banner {
105
+ --summer-banner-height: 42px;
106
+ }
107
+
108
+ .summer-template:not(.has-banner) {
109
+ --summer-banner-height: 0px;
110
+ }
111
+
112
+ .summer-template:not(.has-banner) .summer-topbar {
113
+ top: 0;
114
+ }
115
+
112
116
  html[data-theme="dark"] {
113
- --summer-bg: #131110;
114
- --summer-bg-subtle: #1a1815;
115
- --summer-surface: #1d1b17;
116
- --summer-surface-2: #25221c;
117
- --summer-surface-3: #2c2820;
118
- --summer-surface-sunken:#100e0b;
119
- --summer-border: #2e2a23;
120
- --summer-border-soft: #25221c;
117
+ --summer-bg: #131110;
118
+ --summer-bg-subtle: #1a1815;
119
+ --summer-surface: #1d1b17;
120
+ --summer-surface-2: #25221c;
121
+ --summer-surface-3: #2c2820;
122
+ --summer-surface-sunken: #100e0b;
123
+ --summer-border: #2e2a23;
124
+ --summer-border-soft: #25221c;
121
125
  --summer-border-strong: #3d382e;
122
126
 
123
- --summer-fg: #f5f0e6;
124
- --summer-fg-soft: #c5bfb0;
125
- --summer-fg-muted: #8a8473;
126
- --summer-fg-faint: #5a5448;
127
+ --summer-fg: #f5f0e6;
128
+ --summer-fg-soft: #c5bfb0;
129
+ --summer-fg-muted: #8a8473;
130
+ --summer-fg-faint: #5a5448;
127
131
 
128
- --summer-accent: #ff8a5c;
129
- --summer-accent-hover: #ffa47d;
130
- --summer-accent-soft: #2a1810;
131
- --summer-accent-faint: #3a1f10;
132
+ --summer-accent: #ff8a5c;
133
+ --summer-accent-hover: #ffa47d;
134
+ --summer-accent-soft: #2a1810;
135
+ --summer-accent-faint: #3a1f10;
132
136
 
133
- --summer-amber: #fbbf24;
134
- --summer-amber-soft: #2a1f08;
135
- --summer-sun: #fde047;
136
- --summer-sky: #38bdf8;
137
- --summer-sky-soft: #082f3f;
138
- --summer-green: #4ade80;
139
- --summer-green-soft: #052e1a;
137
+ --summer-amber: #fbbf24;
138
+ --summer-amber-soft: #2a1f08;
139
+ --summer-sun: #fde047;
140
+ --summer-sky: #38bdf8;
141
+ --summer-sky-soft: #082f3f;
142
+ --summer-green: #4ade80;
143
+ --summer-green-soft: #052e1a;
140
144
 
141
145
  --summer-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
142
146
  --summer-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
143
- --summer-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
147
+ --summer-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
144
148
  --summer-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 4px 8px -4px rgba(0, 0, 0, 0.4);
145
149
  --summer-shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
146
150
 
@@ -150,29 +154,43 @@ html[data-theme="dark"] {
150
154
  --summer-header-divider: 0 1px 0 0 rgba(255, 255, 255, 0.08);
151
155
  }
152
156
 
157
+ *,
158
+ *::before,
159
+ *::after {
160
+ box-sizing: border-box;
161
+ }
153
162
 
154
- /* ────────────────────────────────────────────────────────────────────────
155
- 2. RESET + BASE TYPOGRAPHY
156
- ──────────────────────────────────────────────────────────────────────── */
157
-
158
- *, *::before, *::after { box-sizing: border-box; }
159
- * { margin: 0; }
163
+ * {
164
+ margin: 0;
165
+ }
160
166
 
161
- html, body { margin: 0; padding: 0; }
167
+ html,
168
+ body {
169
+ margin: 0;
170
+ padding: 0;
171
+ }
162
172
 
163
173
  html {
164
- /* Anti-FOUC: hidden until theme-init sets the data-theme attribute. */
165
174
  visibility: hidden;
166
175
  scroll-behavior: smooth;
167
176
  -webkit-text-size-adjust: 100%;
168
177
  text-size-adjust: 100%;
169
178
  tab-size: 4;
170
179
  }
171
- html.summer-ready, html[data-theme] { visibility: visible; }
180
+
181
+ html.summer-ready,
182
+ html[data-theme] {
183
+ visibility: visible;
184
+ }
172
185
 
173
186
  @media (prefers-reduced-motion: reduce) {
174
- html { scroll-behavior: auto; }
175
- *, *::before, *::after {
187
+ html {
188
+ scroll-behavior: auto;
189
+ }
190
+
191
+ *,
192
+ *::before,
193
+ *::after {
176
194
  animation-duration: 0.01ms !important;
177
195
  animation-iteration-count: 1 !important;
178
196
  transition-duration: 0.01ms !important;
@@ -195,16 +213,49 @@ body.summer-template {
195
213
  flex-direction: column;
196
214
  }
197
215
 
198
- img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
199
- input, button, textarea, select { font: inherit; color: inherit; }
200
- button { background: none; border: none; cursor: pointer; padding: 0; }
201
- a { color: inherit; text-decoration: none; transition: color var(--summer-fast) var(--summer-ease); }
202
- a:hover { color: var(--summer-fg); }
216
+ img,
217
+ svg,
218
+ video,
219
+ canvas {
220
+ display: block;
221
+ max-width: 100%;
222
+ height: auto;
223
+ }
224
+
225
+ input,
226
+ button,
227
+ textarea,
228
+ select {
229
+ font: inherit;
230
+ color: inherit;
231
+ }
232
+
233
+ button {
234
+ background: none;
235
+ border: none;
236
+ cursor: pointer;
237
+ padding: 0;
238
+ }
239
+
240
+ a {
241
+ color: inherit;
242
+ text-decoration: none;
243
+ transition: color var(--summer-fast) var(--summer-ease);
244
+ }
245
+
246
+ a:hover {
247
+ color: var(--summer-fg);
248
+ }
249
+
250
+ ::selection {
251
+ background: var(--summer-accent);
252
+ color: #fff;
253
+ }
203
254
 
204
- ::selection { background: var(--summer-accent); color: #fff; }
255
+ :focus {
256
+ outline: none;
257
+ }
205
258
 
206
- /* Focus visibility — keyboard only */
207
- :focus { outline: none; }
208
259
  :focus-visible {
209
260
  outline: none;
210
261
  box-shadow: var(--summer-ring);
@@ -212,16 +263,27 @@ a:hover { color: var(--summer-fg); }
212
263
  }
213
264
 
214
265
  /* Scrollbars (subtle, themed) */
215
- .summer-template *::-webkit-scrollbar { width: 10px; height: 10px; }
216
- .summer-template *::-webkit-scrollbar-track { background: transparent; }
266
+ .summer-template *::-webkit-scrollbar {
267
+ width: 10px;
268
+ height: 10px;
269
+ }
270
+
271
+ .summer-template *::-webkit-scrollbar-track {
272
+ background: transparent;
273
+ }
274
+
217
275
  .summer-template *::-webkit-scrollbar-thumb {
218
- background: var(--summer-border);
219
- border-radius: 6px;
220
- border: 2px solid transparent;
221
- background-clip: padding-box;
276
+ background: var(--summer-border);
277
+ border-radius: 6px;
278
+ border: 2px solid transparent;
279
+ background-clip: padding-box;
222
280
 
223
281
  }
224
- .summer-template *::-webkit-scrollbar-thumb:hover { background: var(--summer-border-strong); background-clip: padding-box; }
282
+
283
+ .summer-template *::-webkit-scrollbar-thumb:hover {
284
+ background: var(--summer-border-strong);
285
+ background-clip: padding-box;
286
+ }
225
287
 
226
288
  /* Skip link (a11y) */
227
289
  .summer-template .skip-link {
@@ -238,12 +300,10 @@ a:hover { color: var(--summer-fg); }
238
300
  box-shadow: var(--summer-shadow);
239
301
  transition: top var(--summer-med) var(--summer-ease);
240
302
  }
241
- .summer-template .skip-link:focus { top: 12px; }
242
303
 
243
-
244
- /* ────────────────────────────────────────────────────────────────────────
245
- 3. TOP BAR (logo, search, actions)
246
- ──────────────────────────────────────────────────────────────────────── */
304
+ .summer-template .skip-link:focus {
305
+ top: 12px;
306
+ }
247
307
 
248
308
  .summer-topbar {
249
309
  position: sticky;
@@ -278,12 +338,26 @@ a:hover { color: var(--summer-fg); }
278
338
  text-decoration: none;
279
339
  white-space: nowrap;
280
340
  transition: opacity var(--summer-fast) var(--summer-ease);
341
+ height: var(--summer-topbar-height);
342
+ }
343
+
344
+ .summer-logo:hover {
345
+ color: var(--summer-accent);
346
+ }
347
+
348
+ .summer-logo img {
349
+ max-height: 36px;
350
+ max-width: 132px;
351
+ object-fit: contain;
281
352
  }
282
- .summer-logo:hover { opacity: 0.7; color: var(--summer-fg); }
283
- .summer-logo img { max-height: 24px; max-width: 140px; object-fit: contain; }
284
- .summer-logo--text { font-family: var(--summer-font-sans); }
353
+
354
+ .summer-logo--text {
355
+ font-family: var(--summer-font-sans);
356
+ }
357
+
285
358
  .summer-logo__icon {
286
- width: 24px; height: 24px;
359
+ width: 24px;
360
+ height: 24px;
287
361
  border-radius: 6px;
288
362
  background: var(--summer-fg);
289
363
  display: inline-flex;
@@ -294,10 +368,15 @@ a:hover { color: var(--summer-fg); }
294
368
  font-size: 13px;
295
369
  letter-spacing: -0.02em;
296
370
  }
297
- html:not([data-theme="dark"]) .summer-logo__dark { display: none; }
298
- html[data-theme="dark"] .summer-logo__light { display: none; }
299
371
 
300
- /* Center: search (GitBook-style pill) */
372
+ html:not([data-theme="dark"]) .summer-logo__dark {
373
+ display: none;
374
+ }
375
+
376
+ html[data-theme="dark"] .summer-logo__light {
377
+ display: none;
378
+ }
379
+
301
380
  .summer-topbar__center {
302
381
  display: flex;
303
382
  align-items: center;
@@ -315,26 +394,30 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
315
394
  padding: 0 10px 0 14px;
316
395
  background: var(--summer-surface);
317
396
  border: 1px solid var(--summer-border);
318
- border-radius: 999px; /* pill — GitBook exact */
397
+ border-radius: 999px;
319
398
  color: var(--summer-fg-muted);
320
399
  font-size: var(--summer-text-sm);
321
400
  font-weight: 400;
322
401
  cursor: pointer;
323
402
  text-align: left;
324
403
  transition: border-color var(--summer-fast) var(--summer-ease),
325
- background var(--summer-fast) var(--summer-ease),
326
- box-shadow var(--summer-fast) var(--summer-ease);
404
+ background var(--summer-fast) var(--summer-ease),
405
+ box-shadow var(--summer-fast) var(--summer-ease);
327
406
  }
328
- .summer-search:hover, .summer-search:focus-visible {
407
+
408
+ .summer-search:hover,
409
+ .summer-search:focus-visible {
329
410
  border-color: var(--summer-border-strong);
330
411
  background: var(--summer-bg);
331
412
  color: var(--summer-fg);
332
413
  box-shadow: var(--summer-shadow-sm);
333
414
  }
415
+
334
416
  .summer-search__icon {
335
417
  flex-shrink: 0;
336
418
  color: var(--summer-fg-muted);
337
419
  }
420
+
338
421
  .summer-search__placeholder {
339
422
  flex: 1;
340
423
  font-weight: 400;
@@ -342,6 +425,7 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
342
425
  overflow: hidden;
343
426
  text-overflow: ellipsis;
344
427
  }
428
+
345
429
  .summer-search__kbd {
346
430
  display: inline-flex;
347
431
  gap: 2px;
@@ -350,6 +434,7 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
350
434
  line-height: 1;
351
435
  color: var(--summer-fg-muted);
352
436
  }
437
+
353
438
  .summer-search__kbd kbd {
354
439
  display: inline-flex;
355
440
  align-items: center;
@@ -366,7 +451,6 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
366
451
  color: var(--summer-fg-muted);
367
452
  }
368
453
 
369
- /* Right: actions — contain overflowing dropdowns (lang switcher, etc.) */
370
454
  .summer-topbar__right {
371
455
  display: flex;
372
456
  align-items: center;
@@ -375,12 +459,14 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
375
459
  color: var(--summer-fg-muted);
376
460
  position: relative;
377
461
  }
378
- .summer-topbar__right > .summer-options-menu__item {
462
+
463
+ .summer-topbar__right>.summer-options-menu__item {
379
464
  position: relative;
380
465
  max-height: 36px;
381
466
  overflow: visible;
382
467
  }
383
- .summer-topbar__right .summer-options-menu__item > * {
468
+
469
+ .summer-topbar__right .summer-options-menu__item>* {
384
470
  max-height: 36px;
385
471
  overflow: visible;
386
472
  }
@@ -396,23 +482,27 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
396
482
  background: transparent;
397
483
  border: 1px solid transparent;
398
484
  transition: background var(--summer-fast) var(--summer-ease),
399
- color var(--summer-fast) var(--summer-ease),
400
- border-color var(--summer-fast) var(--summer-ease);
485
+ color var(--summer-fast) var(--summer-ease),
486
+ border-color var(--summer-fast) var(--summer-ease);
401
487
  position: relative;
402
488
  }
489
+
403
490
  .summer-iconbtn:hover {
404
491
  background: var(--summer-surface-2);
405
492
  color: var(--summer-fg);
406
493
  }
407
- .summer-iconbtn svg { width: 16px; height: 16px; }
408
-
409
- /* Mobile-only top-bar elements */
410
- .summer-topbar__mobile { display: none; align-items: center; gap: 6px; }
411
494
 
495
+ .summer-iconbtn svg {
496
+ width: 16px;
497
+ height: 16px;
498
+ }
412
499
 
413
- /* ────────────────────────────────────────────────────────────────────────
414
- 4. SUB-NAVIGATION (menubar) — tabs / product switcher
415
- ──────────────────────────────────────────────────────────────────────── */
500
+ /* Mobile-only top-bar elements */
501
+ .summer-topbar__mobile {
502
+ display: none;
503
+ align-items: center;
504
+ gap: 6px;
505
+ }
416
506
 
417
507
  .summer-subnav {
418
508
  position: sticky;
@@ -421,14 +511,16 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
421
511
  background: color-mix(in srgb, var(--summer-bg) 88%, transparent);
422
512
  backdrop-filter: blur(2px);
423
513
  -webkit-backdrop-filter: blur(2px);
424
- /* No border — single hairline only at the very top of the page */
425
514
  }
515
+
426
516
  .summer-template.has-menubar .summer-topbar {
427
517
  box-shadow: none;
428
518
  }
519
+
429
520
  .summer-template.has-menubar .summer-subnav {
430
521
  box-shadow: var(--summer-header-divider);
431
522
  }
523
+
432
524
  .summer-subnav__inner {
433
525
  max-width: var(--summer-page-max);
434
526
  margin: 0 auto;
@@ -440,7 +532,10 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
440
532
  overflow-x: auto;
441
533
  scrollbar-width: none;
442
534
  }
443
- .summer-subnav__inner::-webkit-scrollbar { display: none; }
535
+
536
+ .summer-subnav__inner::-webkit-scrollbar {
537
+ display: none;
538
+ }
444
539
 
445
540
  .summer-subnav__tab {
446
541
  position: relative;
@@ -458,22 +553,36 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
458
553
  flex-shrink: 0;
459
554
  letter-spacing: -0.005em;
460
555
  transition: background var(--summer-fast) var(--summer-ease),
461
- color var(--summer-fast) var(--summer-ease);
556
+ color var(--summer-fast) var(--summer-ease);
462
557
  }
558
+
463
559
  .summer-subnav__tab:hover {
464
560
  background: var(--summer-surface-2);
465
561
  color: var(--summer-fg);
466
562
  }
563
+
467
564
  .summer-subnav__tab.active,
468
565
  .summer-subnav__tab[aria-current="page"] {
469
566
  color: var(--summer-accent);
470
567
  font-weight: 500;
471
568
  }
472
- .summer-subnav__tab svg { width: 15px; height: 15px; flex-shrink: 0; }
473
- .summer-subnav__tab-chevron { opacity: 0.6; margin-left: 1px; }
569
+
570
+ .summer-subnav__tab svg {
571
+ width: 15px;
572
+ height: 15px;
573
+ flex-shrink: 0;
574
+ }
575
+
576
+ .summer-subnav__tab-chevron {
577
+ opacity: 0.6;
578
+ margin-left: 1px;
579
+ }
474
580
 
475
581
  /* Dropdown menu (menubar dropdowns) */
476
- .summer-subnav__dropdown { position: relative; }
582
+ .summer-subnav__dropdown {
583
+ position: relative;
584
+ }
585
+
477
586
  .summer-subnav__menu {
478
587
  position: absolute;
479
588
  top: calc(100% + 8px);
@@ -488,18 +597,20 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
488
597
  visibility: hidden;
489
598
  transform: translateY(-4px);
490
599
  transition: opacity var(--summer-fast) var(--summer-ease),
491
- transform var(--summer-fast) var(--summer-ease),
492
- visibility 0s linear var(--summer-fast);
600
+ transform var(--summer-fast) var(--summer-ease),
601
+ visibility 0s linear var(--summer-fast);
493
602
  z-index: var(--summer-z-overlay);
494
603
  }
604
+
495
605
  .summer-subnav__dropdown[data-open="true"] .summer-subnav__menu {
496
606
  opacity: 1;
497
607
  visibility: visible;
498
608
  transform: translateY(0);
499
609
  transition: opacity var(--summer-fast) var(--summer-ease),
500
- transform var(--summer-fast) var(--summer-ease),
501
- visibility 0s;
610
+ transform var(--summer-fast) var(--summer-ease),
611
+ visibility 0s;
502
612
  }
613
+
503
614
  .summer-subnav__menuitem {
504
615
  display: flex;
505
616
  align-items: center;
@@ -512,12 +623,22 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
512
623
  font-weight: 500;
513
624
  transition: background var(--summer-fast) var(--summer-ease), color var(--summer-fast) var(--summer-ease);
514
625
  }
626
+
515
627
  .summer-subnav__menuitem:hover {
516
628
  background: var(--summer-surface-2);
517
629
  color: var(--summer-fg);
518
630
  }
519
- .summer-subnav__menuitem-icon { display: inline-flex; color: var(--summer-fg-muted); }
520
- .summer-subnav__menuitem-icon svg { width: 15px; height: 15px; }
631
+
632
+ .summer-subnav__menuitem-icon {
633
+ display: inline-flex;
634
+ color: var(--summer-fg-muted);
635
+ }
636
+
637
+ .summer-subnav__menuitem-icon svg {
638
+ width: 15px;
639
+ height: 15px;
640
+ }
641
+
521
642
  .summer-subnav__menuitem-desc {
522
643
  display: block;
523
644
  font-size: var(--summer-text-xs);
@@ -526,14 +647,16 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
526
647
  margin-top: 1px;
527
648
  }
528
649
 
529
- .summer-subnav__spacer { flex: 1; min-width: 8px; }
530
-
531
- .summer-subnav__right { display: inline-flex; align-items: center; gap: 4px; }
532
-
650
+ .summer-subnav__spacer {
651
+ flex: 1;
652
+ min-width: 8px;
653
+ }
533
654
 
534
- /* ────────────────────────────────────────────────────────────────────────
535
- 5. PAGE HEADER (breadcrumb, title, copy widgets)
536
- ──────────────────────────────────────────────────────────────────────── */
655
+ .summer-subnav__right {
656
+ display: inline-flex;
657
+ align-items: center;
658
+ gap: 4px;
659
+ }
537
660
 
538
661
  .summer-pageheader {
539
662
  position: sticky;
@@ -542,15 +665,11 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
542
665
  background: color-mix(in srgb, var(--summer-bg) 88%, transparent);
543
666
  backdrop-filter: blur(2px);
544
667
  -webkit-backdrop-filter: blur(2px);
545
- /* No border — clean like GitBook */
546
668
  margin-left: calc(-1 * var(--summer-gutter, 0px));
547
669
  margin-right: calc(-1 * var(--summer-gutter, 0px));
548
- /* Top padding here (instead of on .summer-main) is the breathing room
549
- * between the topbar and the breadcrumb / copy row. This keeps the
550
- * pageheader's natural Y aligned with its sticky Y, so the sidebar /
551
- * TOC don't overlap the pageheader at scroll=0. */
552
670
  padding: 20px 10px 5px;
553
671
  }
672
+
554
673
  .summer-pageheader__inner {
555
674
  max-width: var(--summer-content-max);
556
675
  margin: 0 auto;
@@ -560,6 +679,7 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
560
679
  gap: 16px;
561
680
  min-height: 25px;
562
681
  }
682
+
563
683
  .summer-pageheader__meta {
564
684
  flex: 1;
565
685
  min-width: 0;
@@ -579,6 +699,7 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
579
699
  white-space: nowrap;
580
700
  text-overflow: ellipsis;
581
701
  }
702
+
582
703
  .summer-breadcrumbs__list {
583
704
  display: inline-flex;
584
705
  align-items: center;
@@ -587,18 +708,25 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
587
708
  margin: 0;
588
709
  padding: 0;
589
710
  }
590
- .summer-breadcrumbs__item { display: inline-flex; align-items: center; gap: 4px; }
591
- .summer-breadcrumbs__item + .summer-breadcrumbs__item::before {
711
+
712
+ .summer-breadcrumbs__item {
713
+ display: inline-flex;
714
+ align-items: center;
715
+ gap: 4px;
716
+ }
717
+
718
+ .summer-breadcrumbs__item+.summer-breadcrumbs__item::before {
592
719
  content: "";
593
720
  display: inline-block;
594
721
  width: 12px;
595
722
  height: 12px;
596
723
  background: currentColor;
597
724
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") no-repeat center / contain;
598
- mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") no-repeat center / contain;
725
+ mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") no-repeat center / contain;
599
726
  opacity: 0.5;
600
727
  margin-right: 4px;
601
728
  }
729
+
602
730
  .summer-breadcrumbs__link {
603
731
  color: var(--summer-fg-muted);
604
732
  text-decoration: none;
@@ -606,16 +734,23 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
606
734
  border-radius: 4px;
607
735
  transition: color var(--summer-fast) var(--summer-ease);
608
736
  }
609
- .summer-breadcrumbs__link:hover { color: var(--summer-fg); }
610
- .summer-breadcrumbs__current { color: var(--summer-fg); font-weight: 500; }
611
737
 
612
- /* Copy buttons — proper full-width clickable buttons (GitBook-style) */
738
+ .summer-breadcrumbs__link:hover {
739
+ color: var(--summer-fg);
740
+ }
741
+
742
+ .summer-breadcrumbs__current {
743
+ color: var(--summer-fg);
744
+ font-weight: 500;
745
+ }
746
+
613
747
  .summer-copy-widgets {
614
748
  display: inline-flex;
615
749
  align-items: center;
616
750
  gap: 6px;
617
751
  flex-shrink: 0;
618
752
  }
753
+
619
754
  .summer-copy-btn {
620
755
  display: inline-flex;
621
756
  align-items: center;
@@ -636,24 +771,32 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
636
771
  -webkit-user-select: none;
637
772
  transition: all var(--summer-fast) var(--summer-ease);
638
773
  }
774
+
639
775
  .summer-copy-btn:hover {
640
776
  background: var(--summer-surface-2);
641
777
  border-color: var(--summer-border-strong);
642
778
  color: var(--summer-fg);
643
779
  }
644
- .summer-copy-btn:active { transform: scale(0.97); }
780
+
781
+ .summer-copy-btn:active {
782
+ transform: scale(0.97);
783
+ }
784
+
645
785
  .summer-copy-btn.is-copied {
646
786
  background: var(--summer-green-soft);
647
787
  border-color: var(--summer-green);
648
788
  color: var(--summer-green);
649
789
  }
650
- .summer-copy-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
651
- .summer-copy-btn--icon-only { padding: 0 8px; }
652
790
 
791
+ .summer-copy-btn svg {
792
+ width: 13px;
793
+ height: 13px;
794
+ flex-shrink: 0;
795
+ }
653
796
 
654
- /* ────────────────────────────────────────────────────────────────────────
655
- 6. LAYOUT GRID
656
- ──────────────────────────────────────────────────────────────────────── */
797
+ .summer-copy-btn--icon-only {
798
+ padding: 0 8px;
799
+ }
657
800
 
658
801
  .summer-layout {
659
802
  display: grid;
@@ -667,14 +810,17 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
667
810
  width: 100%;
668
811
  }
669
812
 
670
- .summer-template.no-toc .summer-layout { grid-template-columns: var(--summer-sidebar-width) 1fr; }
671
- .summer-template.no-sidebar .summer-layout { grid-template-columns: 1fr var(--summer-toc-width); }
672
- .summer-template.no-sidebar.no-toc .summer-layout { grid-template-columns: 1fr; }
813
+ .summer-template.no-toc .summer-layout {
814
+ grid-template-columns: var(--summer-sidebar-width) 1fr;
815
+ }
673
816
 
817
+ .summer-template.no-sidebar .summer-layout {
818
+ grid-template-columns: 1fr var(--summer-toc-width);
819
+ }
674
820
 
675
- /* ────────────────────────────────────────────────────────────────────────
676
- 7. SIDEBAR
677
- ──────────────────────────────────────────────────────────────────────── */
821
+ .summer-template.no-sidebar.no-toc .summer-layout {
822
+ grid-template-columns: 1fr;
823
+ }
678
824
 
679
825
  .summer-sidebar {
680
826
  position: sticky;
@@ -687,136 +833,147 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
687
833
  background: var(--summer-bg);
688
834
  }
689
835
 
690
- .summer-sidebar::-webkit-scrollbar { width: 6px; }
691
- .summer-sidebar::-webkit-scrollbar-track { background: transparent; }
836
+ .summer-sidebar::-webkit-scrollbar {
837
+ width: 6px;
838
+ }
839
+
840
+ .summer-sidebar::-webkit-scrollbar-track {
841
+ background: transparent;
842
+ }
843
+
692
844
  .summer-sidebar::-webkit-scrollbar-thumb {
693
845
  background: transparent;
694
846
  border-radius: 3px;
695
847
  }
848
+
696
849
  .summer-sidebar:hover::-webkit-scrollbar-thumb {
697
850
  background: var(--summer-border-soft);
698
851
  }
699
852
 
700
- .summer-sidebar nav ul { list-style: none; padding: 0; margin: 0; }
701
- .summer-sidebar nav > ul { display: flex; flex-direction: column; gap: 2px; }
853
+ .summer-sidebar nav ul {
854
+ list-style: none;
855
+ padding: 0;
856
+ margin: 0;
857
+ }
858
+
859
+ .summer-sidebar nav>ul {
860
+ display: flex;
861
+ flex-direction: column;
862
+ gap: 2px;
863
+ }
702
864
 
703
- /* 1. Top-level Group Headers (Uppercase, GitBook-style)
704
- Note: nav-group is also applied to non-collapsible groups (where
705
- navigation.ejs partial renders a plain section header). The
706
- `collapsible` class is only present on the interactive groups, so
707
- cursor/hover/click affordances must be scoped to .collapsible —
708
- otherwise "collapsible: false" sections still look clickable. */
709
- .summer-sidebar nav > ul > li.nav-group > .nav-label,
710
- .summer-sidebar nav > ul > li.nav-group > a {
865
+ .summer-sidebar nav>ul>li.nav-group>.nav-label,
866
+ .summer-sidebar nav>ul>li.nav-group>a {
711
867
  display: flex;
712
868
  align-items: center;
713
869
  gap: 8px;
714
870
  padding: 8px 14px;
715
871
  color: var(--summer-fg-muted);
716
- font-size: 0.6875rem; /* 11px */
872
+ font-size: 0.6875rem;
873
+ /* 11px */
717
874
  font-weight: 700;
718
875
  text-transform: uppercase;
719
876
  letter-spacing: 0.08em;
720
877
  user-select: none;
721
878
  }
722
- /* Cursor + click affordance only for actual collapsible groups */
723
- .summer-sidebar nav > ul > li.nav-group.collapsible > .nav-label,
724
- .summer-sidebar nav > ul > li.nav-group.collapsible > a {
879
+
880
+ .summer-sidebar nav>ul>li.nav-group.collapsible>.nav-label,
881
+ .summer-sidebar nav>ul>li.nav-group.collapsible>a {
725
882
  cursor: pointer;
726
883
  }
727
- .summer-sidebar nav > ul > li.nav-group:first-child > .nav-label,
728
- .summer-sidebar nav > ul > li.nav-group:first-child > a {
884
+
885
+ .summer-sidebar nav>ul>li.nav-group:first-child>.nav-label,
886
+ .summer-sidebar nav>ul>li.nav-group:first-child>a {
729
887
  margin-top: 0;
730
888
  }
731
889
 
732
- .summer-sidebar nav > ul > li.nav-group > .nav-label svg,
733
- .summer-sidebar nav > ul > li.nav-group > a svg:not(.nav-external-icon):not(.collapse-icon) {
734
- width: 14px; height: 14px;
890
+ .summer-sidebar nav>ul>li.nav-group>.nav-label svg,
891
+ .summer-sidebar nav>ul>li.nav-group>a svg:not(.nav-external-icon):not(.collapse-icon) {
892
+ width: 14px;
893
+ height: 14px;
735
894
  color: var(--summer-fg-muted);
736
895
  flex-shrink: 0;
737
896
  transition: color var(--summer-fast) var(--summer-ease);
738
897
  }
739
- /* Hover affordance only on collapsible groups — non-collapsible
740
- sections (collapsible: false in nav JSON) shouldn't react on hover. */
741
- .summer-sidebar nav > ul > li.nav-group.collapsible > .nav-label:hover,
742
- .summer-sidebar nav > ul > li.nav-group.collapsible > a:hover,
743
- .summer-sidebar nav > ul > li.nav-group > .nav-label:hover{
898
+
899
+ .summer-sidebar nav>ul>li.nav-group.collapsible>.nav-label:hover,
900
+ .summer-sidebar nav>ul>li.nav-group.collapsible>a:hover,
901
+ .summer-sidebar nav>ul>li.nav-group>.nav-label:hover {
744
902
  color: var(--summer-fg);
745
903
  background: none;
746
904
  }
747
- .summer-sidebar nav > ul > li.nav-group.collapsible > .nav-label:hover svg,
748
- .summer-sidebar nav > ul > li.nav-group.collapsible > a:hover svg:not(.nav-external-icon):not(.collapse-icon) {
905
+
906
+ .summer-sidebar nav>ul>li.nav-group.collapsible>.nav-label:hover svg,
907
+ .summer-sidebar nav>ul>li.nav-group.collapsible>a:hover svg:not(.nav-external-icon):not(.collapse-icon) {
749
908
  color: var(--summer-accent);
750
909
  }
751
910
 
752
- /* 2. Regular sidebar items (both leaves and collapsible submenu links) */
753
- .summer-sidebar nav li > a:not(.nav-group),
754
- .summer-sidebar nav li:not(.nav-group) > .nav-label,
755
- .summer-sidebar nav .submenu li > a,
756
- .summer-sidebar nav .submenu li > .nav-label {
911
+ .summer-sidebar nav li>a:not(.nav-group),
912
+ .summer-sidebar nav li:not(.nav-group)>.nav-label,
913
+ .summer-sidebar nav .submenu li>a,
914
+ .summer-sidebar nav .submenu li>.nav-label {
757
915
  display: flex;
758
916
  align-items: center;
759
917
  gap: 8px;
760
918
  padding: 6px 8px;
761
919
  margin: 1px 6px;
762
920
  color: var(--summer-fg-soft);
763
- font-size: 0.875rem; /* 14px */
921
+ font-size: 0.875rem;
764
922
  font-weight: 450;
765
923
  text-decoration: none;
766
924
  border-radius: var(--summer-radius-sm);
767
925
  line-height: 1.4;
768
926
  position: relative;
769
927
  transition: background var(--summer-fast) var(--summer-ease),
770
- color var(--summer-fast) var(--summer-ease);
928
+ color var(--summer-fast) var(--summer-ease);
771
929
  }
772
930
 
773
- .summer-sidebar nav li > a:not(.nav-group) svg:not(.nav-external-icon):not(.collapse-icon),
774
- .summer-sidebar nav li:not(.nav-group) > .nav-label svg:not(.nav-external-icon):not(.collapse-icon),
775
- .summer-sidebar nav .submenu li > a svg:not(.nav-external-icon):not(.collapse-icon),
776
- .summer-sidebar nav .submenu li > .nav-label svg:not(.nav-external-icon):not(.collapse-icon) {
777
- width: 14px; height: 14px;
931
+ .summer-sidebar nav li>a:not(.nav-group) svg:not(.nav-external-icon):not(.collapse-icon),
932
+ .summer-sidebar nav li:not(.nav-group)>.nav-label svg:not(.nav-external-icon):not(.collapse-icon),
933
+ .summer-sidebar nav .submenu li>a svg:not(.nav-external-icon):not(.collapse-icon),
934
+ .summer-sidebar nav .submenu li>.nav-label svg:not(.nav-external-icon):not(.collapse-icon) {
935
+ width: 14px;
936
+ height: 14px;
778
937
  flex-shrink: 0;
779
938
  color: var(--summer-fg-faint);
780
939
  transition: color var(--summer-fast) var(--summer-ease);
781
940
  }
782
941
 
783
- .summer-sidebar nav li > a:hover,
784
- .summer-sidebar nav li > .nav-label:hover {
942
+ .summer-sidebar nav li>a:hover,
943
+ .summer-sidebar nav li>.nav-label:hover {
785
944
  background: var(--summer-surface-2);
786
945
  color: var(--summer-fg);
787
946
  }
788
- .summer-sidebar nav li > a:hover svg:not(.nav-external-icon):not(.collapse-icon),
789
- .summer-sidebar nav li > .nav-label:hover svg:not(.nav-external-icon):not(.collapse-icon) {
947
+
948
+ .summer-sidebar nav li>a:hover svg:not(.nav-external-icon):not(.collapse-icon),
949
+ .summer-sidebar nav li>.nav-label:hover svg:not(.nav-external-icon):not(.collapse-icon) {
790
950
  color: var(--summer-fg-soft);
791
951
  }
792
952
 
793
- /* 3. Active state styling - thin left border, color highlights */
794
- /* Top-level active items (display border-left on the element itself) */
795
- .summer-sidebar nav > ul > li > a.active,
796
- .summer-sidebar nav > ul > li > .nav-label.active {
953
+ .summer-sidebar nav>ul>li>a.active,
954
+ .summer-sidebar nav>ul>li>.nav-label.active {
797
955
  background: transparent;
798
956
  color: var(--summer-accent);
799
957
  font-weight: 500;
800
958
  border-left: 2px solid var(--summer-accent);
801
959
  border-radius: 0;
802
- padding-left: 10px; /* text aligns perfectly (10px + 2px border = 12px padding) */
960
+ padding-left: 10px;
803
961
  }
804
962
 
805
963
  /* Nested active items (overlay accent bar on the parent submenu's border-left thread) */
806
- .summer-sidebar nav .submenu li > a.active,
807
- .summer-sidebar nav .submenu li > .nav-label.active {
964
+ .summer-sidebar nav .submenu li>a.active,
965
+ .summer-sidebar nav .submenu li>.nav-label.active {
808
966
  background: transparent;
809
967
  color: var(--summer-accent);
810
968
  font-weight: 500;
811
- border-left: none; /* no border on the item itself */
812
- /* standard padding */
969
+ border-left: none;
813
970
  }
814
971
 
815
- .summer-sidebar nav .submenu li > a.active::before,
816
- .summer-sidebar nav .submenu li > .nav-label.active::before {
972
+ .summer-sidebar nav .submenu li>a.active::before,
973
+ .summer-sidebar nav .submenu li>.nav-label.active::before {
817
974
  content: "";
818
975
  position: absolute;
819
- left: -13px; /* align exactly with the parent's border-left */
976
+ left: -13px;
820
977
  top: 0;
821
978
  bottom: 0;
822
979
  width: 2px;
@@ -824,13 +981,13 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
824
981
  display: block;
825
982
  }
826
983
 
827
- .summer-sidebar nav li > a.active:hover,
828
- .summer-sidebar nav li > .nav-label.active:hover {
984
+ .summer-sidebar nav li>a.active:hover,
985
+ .summer-sidebar nav li>.nav-label.active:hover {
829
986
  background: var(--summer-surface-2);
830
987
  }
831
988
 
832
- .summer-sidebar nav li > a.active svg:not(.nav-external-icon):not(.collapse-icon),
833
- .summer-sidebar nav li > .nav-label.active svg:not(.nav-external-icon):not(.collapse-icon) {
989
+ .summer-sidebar nav li>a.active svg:not(.nav-external-icon):not(.collapse-icon),
990
+ .summer-sidebar nav li>.nav-label.active svg:not(.nav-external-icon):not(.collapse-icon) {
834
991
  color: var(--summer-accent);
835
992
  }
836
993
 
@@ -842,26 +999,29 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
842
999
  margin-left: auto;
843
1000
  color: var(--summer-fg-faint);
844
1001
  cursor: pointer;
845
- padding: 4px;
1002
+ padding: 4px 10px;
846
1003
  border-radius: 4px;
847
1004
  transition: transform var(--summer-med) var(--summer-ease),
848
- color var(--summer-fast) var(--summer-ease);
1005
+ color var(--summer-fast) var(--summer-ease);
849
1006
  }
1007
+
850
1008
  .summer-sidebar nav .collapse-icon-wrapper:hover {
851
1009
  color: var(--summer-fg-soft);
852
1010
  }
1011
+
853
1012
  .summer-sidebar nav .collapse-icon {
854
1013
  width: 10px;
855
1014
  height: 10px;
856
- transform: rotate(90deg); /* Expanded is pointing down (90deg) */
1015
+ transform: rotate(90deg);
1016
+ /* Expanded is pointing down (90deg) */
857
1017
  transition: transform var(--summer-med) var(--summer-ease);
858
1018
  }
859
1019
 
860
1020
  /* Collapsed chevron points right (0deg) */
861
- .summer-sidebar nav li[aria-expanded="false"] > a .collapse-icon,
862
- .summer-sidebar nav li[aria-expanded="false"] > .nav-label .collapse-icon,
863
- .summer-sidebar nav li:not(.expanded) > a .collapse-icon,
864
- .summer-sidebar nav li:not(.expanded) > .nav-label .collapse-icon {
1021
+ .summer-sidebar nav li[aria-expanded="false"]>a .collapse-icon,
1022
+ .summer-sidebar nav li[aria-expanded="false"]>.nav-label .collapse-icon,
1023
+ .summer-sidebar nav li:not(.expanded)>a .collapse-icon,
1024
+ .summer-sidebar nav li:not(.expanded)>.nav-label .collapse-icon {
865
1025
  transform: rotate(0deg);
866
1026
  }
867
1027
 
@@ -889,10 +1049,12 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
889
1049
  margin-left: 20px;
890
1050
  padding-left: 4px;
891
1051
  }
892
- .summer-sidebar nav li[aria-expanded="false"] > .submenu,
893
- .summer-sidebar nav li:not(.expanded) > .submenu {
1052
+
1053
+ .summer-sidebar nav li[aria-expanded="false"]>.submenu,
1054
+ .summer-sidebar nav li:not(.expanded)>.submenu {
894
1055
  max-height: 0;
895
1056
  }
1057
+
896
1058
  /* Sidebar widgets & dropdowns (Version Switcher, Language Switcher, Project Switcher) */
897
1059
  .summer-sidebar__top,
898
1060
  .summer-sidebar__bottom {
@@ -902,6 +1064,7 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
902
1064
  padding: 0 10px;
903
1065
  margin-bottom: 14px;
904
1066
  }
1067
+
905
1068
  .summer-sidebar__bottom {
906
1069
  margin-top: 24px;
907
1070
  margin-bottom: 0;
@@ -996,6 +1159,7 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
996
1159
  .summer-sidebar-widget .docmd-project-switcher.open .project-switcher-menu {
997
1160
  display: block;
998
1161
  }
1162
+
999
1163
  .summer-sidebar-widget .docmd-language-switcher.open .language-switcher-menu {
1000
1164
  display: block;
1001
1165
  opacity: 1;
@@ -1025,7 +1189,7 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1025
1189
  text-decoration: none;
1026
1190
  border-radius: var(--summer-radius-sm);
1027
1191
  transition: background var(--summer-fast) var(--summer-ease),
1028
- color var(--summer-fast) var(--summer-ease);
1192
+ color var(--summer-fast) var(--summer-ease);
1029
1193
  cursor: pointer;
1030
1194
  }
1031
1195
 
@@ -1063,9 +1227,6 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1063
1227
  font-weight: normal;
1064
1228
  }
1065
1229
 
1066
- /* ── Topbar pill dropdowns (version / project / language switcher) ──
1067
- Compact floating trigger (28px tall) so three switchers can sit in the
1068
- topbar without crowding the theme / sponsor / github icons. */
1069
1230
  .summer-topbar__right .docmd-version-dropdown,
1070
1231
  .summer-topbar__right .docmd-project-switcher,
1071
1232
  .summer-topbar__right .docmd-language-switcher {
@@ -1090,8 +1251,8 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1090
1251
  font-weight: 500;
1091
1252
  cursor: pointer;
1092
1253
  transition: background var(--summer-fast) var(--summer-ease),
1093
- color var(--summer-fast) var(--summer-ease),
1094
- border-color var(--summer-fast) var(--summer-ease);
1254
+ color var(--summer-fast) var(--summer-ease),
1255
+ border-color var(--summer-fast) var(--summer-ease);
1095
1256
  white-space: nowrap;
1096
1257
  }
1097
1258
 
@@ -1103,15 +1264,6 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1103
1264
  border-color: var(--summer-border-soft);
1104
1265
  }
1105
1266
 
1106
- .summer-topbar__right .version-icon,
1107
- .summer-topbar__right .project-icon,
1108
- .summer-topbar__right .language-icon {
1109
- width: 14px;
1110
- height: 14px;
1111
- color: var(--summer-fg-faint);
1112
- flex-shrink: 0;
1113
- }
1114
-
1115
1267
  .summer-topbar__right .version-chevron,
1116
1268
  .summer-topbar__right .project-chevron,
1117
1269
  .summer-topbar__right .language-chevron {
@@ -1166,7 +1318,7 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1166
1318
  text-decoration: none;
1167
1319
  border-radius: var(--summer-radius-sm);
1168
1320
  transition: background var(--summer-fast) var(--summer-ease),
1169
- color var(--summer-fast) var(--summer-ease);
1321
+ color var(--summer-fast) var(--summer-ease);
1170
1322
  }
1171
1323
 
1172
1324
  .summer-topbar__right .version-dropdown-item:hover,
@@ -1203,8 +1355,10 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1203
1355
  margin-left: auto;
1204
1356
  }
1205
1357
 
1206
- .summer-topbar__right .version-dropdown-item > a,
1207
- .summer-topbar__right .version-dropdown-item { color: inherit; }
1358
+ .summer-topbar__right .version-dropdown-item>a,
1359
+ .summer-topbar__right .version-dropdown-item {
1360
+ color: inherit;
1361
+ }
1208
1362
 
1209
1363
  /* Sidebar close (mobile) */
1210
1364
  .summer-sidebar-close {
@@ -1220,36 +1374,36 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1220
1374
  color: var(--summer-fg-soft);
1221
1375
  background: transparent;
1222
1376
  }
1223
- .summer-sidebar-close:hover { background: var(--summer-surface-2); color: var(--summer-fg); }
1224
-
1225
1377
 
1226
- /* ────────────────────────────────────────────────────────────────────────
1227
- 8. MAIN CONTENT
1228
- ──────────────────────────────────────────────────────────────────────── */
1378
+ .summer-sidebar-close:hover {
1379
+ background: var(--summer-surface-2);
1380
+ color: var(--summer-fg);
1381
+ }
1229
1382
 
1230
1383
  .summer-main {
1231
1384
  min-width: 0;
1232
- /* No top padding the breathing room between topbar and the
1233
- * pageheader's content lives on the pageheader itself
1234
- * (padding: 20px 10px 5px) so the pageheader's natural Y lines up
1235
- * with its sticky Y. The sidebar / TOC stick to the pageheader's
1236
- * bottom and never overlap the pageheader. */
1237
- padding: 0 48px 64px;
1385
+ padding: 1rem 2rem 3rem;
1238
1386
  --summer-gutter: 48px;
1239
1387
  display: flex;
1240
1388
  flex-direction: column;
1389
+ flex: 1;
1390
+ min-height: 0;
1241
1391
  }
1242
1392
 
1243
1393
  .summer-content {
1244
1394
  max-width: var(--summer-content-max);
1245
- font-size: var(--summer-text-base); /* 15px — GitBook body base */
1395
+ font-size: var(--summer-text-base);
1246
1396
  line-height: 1.7;
1247
1397
  color: var(--summer-fg-soft);
1248
- flex: 1 0 auto;
1398
+ display: flex;
1399
+ flex-direction: column;
1400
+ flex: 1;
1401
+ min-height: 0;
1402
+ padding: 1em 0;
1249
1403
  }
1250
1404
 
1251
1405
  .summer-content__title {
1252
- font-size: 2rem; /* 32px — GitBook page title */
1406
+ font-size: 2rem;
1253
1407
  font-weight: 700;
1254
1408
  color: var(--summer-fg);
1255
1409
  letter-spacing: -0.03em;
@@ -1257,9 +1411,10 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1257
1411
  margin: 0 0 24px;
1258
1412
  }
1259
1413
 
1260
- .summer-content > * + * { margin-top: 1.1em; }
1414
+ .summer-content>*+* {
1415
+ margin-top: 1.1em;
1416
+ }
1261
1417
 
1262
- /* Headings — Inter optical sizing, matching GitBook */
1263
1418
  .summer-content h1,
1264
1419
  .summer-content h2,
1265
1420
  .summer-content h3,
@@ -1272,43 +1427,47 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1272
1427
  line-height: 1.3;
1273
1428
  scroll-margin-top: calc(var(--summer-topbar-height) + var(--summer-subnav-height) + var(--summer-banner-height) + var(--summer-pageheader-height) + 24px);
1274
1429
  }
1430
+
1275
1431
  .summer-content h1 {
1276
- font-size: 1.875rem; /* 30px — GitBook H1 */
1432
+ font-size: 1.875rem;
1277
1433
  margin-top: 0;
1278
1434
  margin-bottom: 0.5em;
1279
1435
  letter-spacing: -0.03em;
1280
1436
  font-weight: 700;
1281
1437
  line-height: 1.25;
1282
1438
  }
1439
+
1283
1440
  .summer-content h2 {
1284
- font-size: 1.5rem; /* 24px — GitBook H2 */
1285
- margin-top: 2em;
1441
+ font-size: 1.5rem;
1286
1442
  margin-bottom: 0.5em;
1287
1443
  font-weight: 600;
1288
1444
  letter-spacing: -0.025em;
1289
1445
  line-height: 1.3;
1290
1446
  }
1447
+
1291
1448
  .summer-content h3 {
1292
- font-size: 1.25rem; /* 20px — GitBook H3 */
1293
- margin-top: 1.75em;
1449
+ font-size: 1.25rem;
1294
1450
  margin-bottom: 0.4em;
1295
1451
  font-weight: 600;
1296
1452
  letter-spacing: -0.02em;
1297
1453
  line-height: 1.35;
1298
1454
  }
1455
+
1299
1456
  .summer-content h4 {
1300
- font-size: 1.0625rem; /* 17px */
1457
+ font-size: 1.0625rem;
1301
1458
  margin-top: 1.5em;
1302
1459
  margin-bottom: 0.35em;
1303
1460
  font-weight: 600;
1304
1461
  letter-spacing: -0.01em;
1305
1462
  }
1463
+
1306
1464
  .summer-content h5 {
1307
1465
  font-size: var(--summer-text-base);
1308
1466
  margin-top: 1.25em;
1309
1467
  margin-bottom: 0.3em;
1310
1468
  font-weight: 600;
1311
1469
  }
1470
+
1312
1471
  .summer-content h6 {
1313
1472
  font-size: var(--summer-text-sm);
1314
1473
  margin-top: 1em;
@@ -1319,13 +1478,20 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1319
1478
  font-weight: 600;
1320
1479
  }
1321
1480
 
1322
- /* Paragraph + inline — Refined premium sizing */
1323
1481
  .summer-content p {
1324
- line-height: inherit;
1482
+ line-height: inherit;
1483
+
1484
+ }
1485
+
1486
+ .summer-content strong {
1487
+ color: var(--summer-fg);
1488
+ font-weight: 600;
1489
+ }
1325
1490
 
1491
+ .summer-content em {
1492
+ font-style: italic;
1326
1493
  }
1327
- .summer-content strong { color: var(--summer-fg); font-weight: 600; }
1328
- .summer-content em { font-style: italic; }
1494
+
1329
1495
  .summer-content a {
1330
1496
  color: var(--summer-fg);
1331
1497
  text-decoration: underline;
@@ -1334,6 +1500,7 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1334
1500
  text-underline-offset: 3px;
1335
1501
  transition: text-decoration-color var(--summer-fast) var(--summer-ease), color var(--summer-fast) var(--summer-ease);
1336
1502
  }
1503
+
1337
1504
  .summer-content a:hover {
1338
1505
  color: var(--summer-accent);
1339
1506
  text-decoration-color: var(--summer-accent);
@@ -1345,10 +1512,22 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1345
1512
  padding-left: 1.4em;
1346
1513
  margin: 0 0 1em;
1347
1514
  }
1348
- .summer-content li { margin: 0.4em 0; line-height: 1.55; }
1349
- .summer-content ul li::marker { color: var(--summer-fg-muted); }
1350
- .summer-content ol li::marker { color: var(--summer-fg-soft); font-weight: 600; }
1351
- .summer-content ul ul, .summer-content ol ol, .summer-content ul ol, .summer-content ol ul { margin: 0.4em 0; }
1515
+
1516
+ .summer-content ul li::marker {
1517
+ color: var(--summer-fg-muted);
1518
+ }
1519
+
1520
+ .summer-content ol li::marker {
1521
+ color: var(--summer-fg-soft);
1522
+ font-weight: 600;
1523
+ }
1524
+
1525
+ .summer-content ul ul,
1526
+ .summer-content ol ol,
1527
+ .summer-content ul ol,
1528
+ .summer-content ol ul {
1529
+ margin: 0.4em 0;
1530
+ }
1352
1531
 
1353
1532
  /* Horizontal rule */
1354
1533
  .summer-content hr {
@@ -1360,52 +1539,63 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1360
1539
 
1361
1540
  /* Heading anchors (clickable # links) */
1362
1541
  .summer-content .docmd-heading,
1363
- .summer-content h1, .summer-content h2, .summer-content h3, .summer-content h4 {
1542
+ .summer-content h1,
1543
+ .summer-content h2,
1544
+ .summer-content h3,
1545
+ .summer-content h4 {
1364
1546
  position: relative;
1365
1547
  }
1548
+
1366
1549
  .summer-content .heading-anchor {
1367
1550
  position: absolute;
1368
- left: -1.25em;
1551
+ left: -1em;
1369
1552
  font-size: 1.5rem;
1370
1553
  display: inline-flex;
1371
1554
  align-items: center;
1372
1555
  justify-content: center;
1373
- width: .8em;
1556
+ width: 1.15rem;
1374
1557
  height: -webkit-fill-available;
1375
1558
  opacity: 0;
1376
1559
  color: var(--summer-fg-faint);
1377
1560
  vertical-align: middle;
1378
1561
  transition: opacity var(--summer-fast) var(--summer-ease), color var(--summer-fast) var(--summer-ease);
1379
1562
  }
1563
+
1380
1564
  .summer-content h1:hover .heading-anchor,
1381
1565
  .summer-content h2:hover .heading-anchor,
1382
1566
  .summer-content h3:hover .heading-anchor,
1383
1567
  .summer-content h4:hover .heading-anchor,
1384
- .summer-content .heading-anchor:focus { opacity: 1; }
1385
- .summer-content .heading-anchor:hover { color: var(--summer-accent); }
1386
- .summer-content .heading-anchor svg { width: 100%; height: 100%; }
1568
+ .summer-content .heading-anchor:focus {
1569
+ opacity: 1;
1570
+ }
1387
1571
 
1572
+ .summer-content .heading-anchor:hover {
1573
+ color: var(--summer-accent);
1574
+ }
1388
1575
 
1389
- /* ────────────────────────────────────────────────────────────────────────
1390
- 9. RIGHT-RAIL TOC
1391
- ──────────────────────────────────────────────────────────────────────── */
1576
+ .summer-content .heading-anchor svg {
1577
+ width: 100%;
1578
+ height: 100%;
1579
+ }
1392
1580
 
1393
1581
  .summer-toc {
1394
1582
  position: sticky;
1395
- /* Matches the sidebar's sticky offset so the TOC and sidebar share the
1396
- * same scroll-anchor line (they sit on the same Y as the main content's
1397
- * pageheader bottom and adjust together with the menubar / banner /
1398
- * header). The 4-band sum is the same formula as .summer-sidebar —
1399
- * keep them in sync. */
1400
1583
  top: calc(var(--summer-topbar-height) + var(--summer-subnav-height) + var(--summer-banner-height) + var(--summer-pageheader-height));
1401
1584
  align-self: start;
1402
1585
  max-height: calc(100vh - var(--summer-topbar-height) - var(--summer-subnav-height) - var(--summer-banner-height) - var(--summer-pageheader-height));
1403
1586
  overflow-y: auto;
1404
- padding: 0 32px 60px 24px;
1587
+ padding: 0 1rem 3rem;
1405
1588
  font-size: 0.8125rem;
1406
1589
  }
1407
- .summer-toc::-webkit-scrollbar { width: 6px; }
1408
- .summer-toc::-webkit-scrollbar-track { background: transparent; }
1590
+
1591
+ .summer-toc::-webkit-scrollbar {
1592
+ width: 6px;
1593
+ }
1594
+
1595
+ .summer-toc::-webkit-scrollbar-track {
1596
+ background: transparent;
1597
+ }
1598
+
1409
1599
  .summer-toc::-webkit-scrollbar-thumb {
1410
1600
  background: var(--summer-border);
1411
1601
  border-radius: 3px;
@@ -1421,12 +1611,12 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1421
1611
  font-weight: 500;
1422
1612
  color: var(--summer-fg-muted);
1423
1613
  }
1614
+
1424
1615
  .summer-toc__title svg {
1425
1616
  color: var(--summer-fg-muted);
1426
1617
  flex-shrink: 0;
1427
1618
  }
1428
1619
 
1429
- /* ── TOC list: no native list styling, we draw the track with SVG ── */
1430
1620
  .summer-toc__list {
1431
1621
  list-style: none;
1432
1622
  padding: 0;
@@ -1439,7 +1629,6 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1439
1629
  position: relative;
1440
1630
  }
1441
1631
 
1442
- /* ── SVG track container (injected by JS) ── */
1443
1632
  .summer-toc__track {
1444
1633
  position: absolute;
1445
1634
  top: 0;
@@ -1455,6 +1644,7 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1455
1644
  left: 0;
1456
1645
  color: var(--summer-border);
1457
1646
  }
1647
+
1458
1648
  .summer-toc__track-full path {
1459
1649
  stroke: currentColor;
1460
1650
  stroke-width: 1;
@@ -1469,15 +1659,13 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1469
1659
  color: var(--summer-accent);
1470
1660
  transition: clip-path 160ms cubic-bezier(0.32, 0.72, 0, 1);
1471
1661
  }
1662
+
1472
1663
  .summer-toc__track-active path {
1473
1664
  stroke: currentColor;
1474
1665
  stroke-width: 1.5;
1475
1666
  fill: none;
1476
1667
  }
1477
1668
 
1478
- /* dot removed */
1479
-
1480
- /* ── Links ── */
1481
1669
  .summer-toc__link {
1482
1670
  display: block;
1483
1671
  padding: 5px 0 5px 20px;
@@ -1493,23 +1681,38 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1493
1681
  position: relative;
1494
1682
  z-index: 1;
1495
1683
  }
1496
- .summer-toc__link:hover { color: var(--summer-fg); }
1684
+
1685
+ .summer-toc__link:hover {
1686
+ color: var(--summer-fg);
1687
+ }
1688
+
1497
1689
  .summer-toc__link.active {
1498
1690
  color: var(--summer-accent);
1499
1691
  font-weight: 500;
1500
1692
  }
1501
1693
 
1502
- /* Indentation by level padding-left is overridden by JS inline style */
1503
- .summer-toc__item--level-1 .summer-toc__link { padding-left: 20px; }
1504
- .summer-toc__item--level-2 .summer-toc__link { padding-left: 30px; }
1505
- .summer-toc__item--level-3 .summer-toc__link { padding-left: 40px; }
1506
- .summer-toc__item--level-4 .summer-toc__link { padding-left: 50px; }
1694
+ /* Indentation by level — padding-left is overridden by JS inline style */
1695
+ .summer-toc__item--level-1 .summer-toc__link {
1696
+ padding-left: 20px;
1697
+ }
1698
+
1699
+ .summer-toc__item--level-2 .summer-toc__link {
1700
+ padding-left: 30px;
1701
+ }
1702
+
1703
+ .summer-toc__item--level-3 .summer-toc__link {
1704
+ padding-left: 40px;
1705
+ }
1706
+
1707
+ .summer-toc__item--level-4 .summer-toc__link {
1708
+ padding-left: 50px;
1709
+ }
1507
1710
 
1508
1711
  /* TOC scroll-to-top button */
1509
1712
  .summer-totop {
1510
1713
  position: fixed;
1511
1714
  right: 30px;
1512
- bottom: 50px;
1715
+ bottom: 60px;
1513
1716
  width: 40px;
1514
1717
  height: 40px;
1515
1718
  border-radius: 50%;
@@ -1525,23 +1728,31 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1525
1728
  transition: opacity var(--summer-med) var(--summer-ease), transform var(--summer-med) var(--summer-ease);
1526
1729
  z-index: var(--summer-z-overlay);
1527
1730
  }
1528
- .summer-totop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
1529
- .summer-totop:hover { background: var(--summer-accent-hover); }
1530
- .summer-totop svg { width: 18px; height: 18px; }
1531
1731
 
1732
+ .summer-totop.is-visible {
1733
+ opacity: 1;
1734
+ transform: translateY(0);
1735
+ pointer-events: auto;
1736
+ }
1532
1737
 
1533
- /* ────────────────────────────────────────────────────────────────────────
1534
- 10. PAGE NAVIGATION (prev / next)
1535
- ──────────────────────────────────────────────────────────────────────── */
1738
+ .summer-totop:hover {
1739
+ background: var(--summer-accent-hover);
1740
+ }
1741
+
1742
+ .summer-totop svg {
1743
+ width: 18px;
1744
+ height: 18px;
1745
+ }
1536
1746
 
1537
1747
  .summer-pagenav {
1538
1748
  display: grid;
1539
- grid-template-columns: 1fr 1fr;
1749
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
1540
1750
  gap: 12px;
1541
- margin-top: 56px;
1751
+ margin-top: auto;
1542
1752
  padding-top: 24px;
1543
1753
  border-top: 1px solid var(--summer-border-soft);
1544
1754
  }
1755
+
1545
1756
  .summer-pagenav__link {
1546
1757
  display: flex;
1547
1758
  align-items: center;
@@ -1554,32 +1765,57 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1554
1765
  text-decoration: none;
1555
1766
  transition: all var(--summer-fast) var(--summer-ease);
1556
1767
  min-height: 64px;
1768
+ min-width: 75%;
1769
+ overflow: hidden;
1770
+ width: fit-content;
1771
+ max-width: 100%;
1557
1772
  }
1773
+
1558
1774
  .summer-pagenav__link:hover {
1559
1775
  border-color: var(--summer-accent);
1560
1776
  background: var(--summer-accent-soft);
1561
1777
  color: var(--summer-fg);
1562
1778
  box-shadow: var(--summer-shadow-sm);
1563
1779
  }
1564
- .summer-pagenav__link--next { justify-content: flex-end; text-align: right; }
1780
+
1781
+ .summer-pagenav__link--next {
1782
+ justify-content: flex-end;
1783
+ text-align: right;
1784
+ justify-self: end;
1785
+ }
1786
+
1787
+ .summer-pagenav__link--prev {
1788
+ justify-self: start;
1789
+ }
1790
+
1565
1791
  .summer-pagenav__link--disabled {
1566
1792
  opacity: 0.4;
1567
1793
  pointer-events: none;
1568
1794
  background: transparent;
1569
1795
  }
1796
+
1570
1797
  .summer-pagenav__icon {
1571
1798
  flex-shrink: 0;
1572
- width: 18px; height: 18px;
1799
+ width: 18px;
1800
+ height: 18px;
1573
1801
  color: var(--summer-accent);
1574
1802
  transition: transform var(--summer-fast) var(--summer-ease);
1575
1803
  }
1576
- .summer-pagenav__link--prev:hover .summer-pagenav__icon { transform: translateX(-3px); }
1577
- .summer-pagenav__link--next:hover .summer-pagenav__icon { transform: translateX(3px); }
1804
+
1805
+ .summer-pagenav__link--prev:hover .summer-pagenav__icon {
1806
+ transform: translateX(-3px);
1807
+ }
1808
+
1809
+ .summer-pagenav__link--next:hover .summer-pagenav__icon {
1810
+ transform: translateX(3px);
1811
+ }
1812
+
1578
1813
  .summer-pagenav__label {
1579
1814
  display: flex;
1580
1815
  flex-direction: column;
1581
1816
  min-width: 0;
1582
1817
  }
1818
+
1583
1819
  .summer-pagenav__small {
1584
1820
  font-size: var(--summer-text-xs);
1585
1821
  color: var(--summer-fg-muted);
@@ -1587,6 +1823,7 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1587
1823
  letter-spacing: 0.06em;
1588
1824
  font-weight: 500;
1589
1825
  }
1826
+
1590
1827
  .summer-pagenav__title {
1591
1828
  font-size: var(--summer-text-sm);
1592
1829
  font-weight: 600;
@@ -1610,6 +1847,7 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1610
1847
  font-size: var(--summer-text-sm);
1611
1848
  color: var(--summer-fg-muted);
1612
1849
  }
1850
+
1613
1851
  .summer-pagefooter a {
1614
1852
  display: inline-flex;
1615
1853
  align-items: center;
@@ -1619,18 +1857,30 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1619
1857
  font-weight: 500;
1620
1858
  transition: color var(--summer-fast) var(--summer-ease);
1621
1859
  }
1622
- .summer-pagefooter a:hover { color: var(--summer-accent); }
1623
- .summer-pagefooter a svg { width: 14px; height: 14px; }
1624
- .summer-pagefooter__time { display: inline-flex; align-items: center; gap: 6px; }
1625
- .summer-pagefooter__time svg { width: 14px; height: 14px; color: var(--summer-fg-faint); }
1626
1860
 
1861
+ .summer-pagefooter a:hover {
1862
+ color: var(--summer-accent);
1863
+ }
1627
1864
 
1628
- /* ────────────────────────────────────────────────────────────────────────
1629
- 11. CODE, TABLES, CALLOUTS
1630
- ──────────────────────────────────────────────────────────────────────── */
1865
+ .summer-pagefooter a svg {
1866
+ width: 14px;
1867
+ height: 14px;
1868
+ }
1869
+
1870
+ .summer-pagefooter__time {
1871
+ display: inline-flex;
1872
+ align-items: center;
1873
+ gap: 6px;
1874
+ }
1875
+
1876
+ .summer-pagefooter__time svg {
1877
+ width: 14px;
1878
+ height: 14px;
1879
+ color: var(--summer-fg-faint);
1880
+ }
1631
1881
 
1632
1882
  /* Inline code */
1633
- .summer-content :not(pre) > code {
1883
+ .summer-content :not(pre)>code {
1634
1884
  display: inline-block;
1635
1885
  padding: 1px 6px;
1636
1886
  background: var(--summer-surface-3);
@@ -1643,39 +1893,25 @@ html[data-theme="dark"] .summer-logo__light { display: none; }
1643
1893
  white-space: nowrap;
1644
1894
  line-height: 1.4;
1645
1895
  }
1646
- html[data-theme="dark"] .summer-content :not(pre) > code {
1896
+
1897
+ html[data-theme="dark"] .summer-content :not(pre)>code {
1647
1898
  color: #f5c089;
1648
1899
  background: rgba(255, 138, 92, 0.10);
1649
1900
  border-color: rgba(255, 138, 92, 0.20);
1650
1901
  }
1651
1902
 
1652
- /* =========================================================================
1653
- Code block — title bar (filename left, copy right) + body (pre)
1654
-
1655
- The DOM is built by docmd-main.js + the markdown parser:
1656
- - .code-wrapper — wraps every <pre> (added by docmd-main.js)
1657
- - .docmd-code-block-wrapper — wraps ```lang "title"``` blocks (parser)
1658
- - .docmd-code-block-header — contains the title <span> (parser)
1659
- - .copy-code-button — the copy button (docmd-main.js, originally
1660
- positioned absolute bottom-right of the
1661
- wrapper, but we re-home it into the title
1662
- bar via summer.js)
1663
- summer.js promotes either the existing parser header, or builds a fresh
1664
- .summer-cb__titlebar inside the .code-wrapper, and tags the button as
1665
- .summer-cb__copy. The rules below style the resulting structure.
1666
- ========================================================================= */
1667
-
1668
1903
  .code-wrapper,
1669
1904
  .docmd-code-block-wrapper {
1670
- position: relative;
1671
- margin: 1.4em 0;
1672
- background: var(--summer-surface-2);
1673
- border: 1px solid var(--summer-border);
1674
- border-radius: var(--summer-radius);
1675
- overflow: hidden;
1676
- box-shadow: var(--summer-shadow-xs);
1905
+ position: relative;
1906
+ margin: 1.4em 0;
1907
+ background: var(--summer-surface-2);
1908
+ border: 1px solid var(--summer-border);
1909
+ border-radius: var(--summer-radius);
1910
+ overflow: hidden;
1911
+ box-shadow: var(--summer-shadow-xs);
1677
1912
 
1678
1913
  }
1914
+
1679
1915
  html[data-theme="dark"] .code-wrapper,
1680
1916
  html[data-theme="dark"] .docmd-code-block-wrapper {
1681
1917
  background: #100e0b;
@@ -1684,7 +1920,7 @@ html[data-theme="dark"] .docmd-code-block-wrapper {
1684
1920
  /* Title bar (thin row above the code) */
1685
1921
  .summer-cb__titlebar,
1686
1922
  .docmd-code-block-header.summer-cb__titlebar,
1687
- .docmd-code-block-wrapper > .docmd-code-block-header {
1923
+ .docmd-code-block-wrapper>.docmd-code-block-header {
1688
1924
  display: flex;
1689
1925
  align-items: center;
1690
1926
  justify-content: space-between;
@@ -1697,9 +1933,10 @@ html[data-theme="dark"] .docmd-code-block-wrapper {
1697
1933
  color: var(--summer-fg-muted);
1698
1934
  font-family: var(--summer-font-mono);
1699
1935
  }
1936
+
1700
1937
  html[data-theme="dark"] .summer-cb__titlebar,
1701
1938
  html[data-theme="dark"] .docmd-code-block-header.summer-cb__titlebar,
1702
- html[data-theme="dark"] .docmd-code-block-wrapper > .docmd-code-block-header {
1939
+ html[data-theme="dark"] .docmd-code-block-wrapper>.docmd-code-block-header {
1703
1940
  border-bottom-color: rgba(255, 255, 255, 0.06);
1704
1941
  background: rgba(255, 255, 255, 0.025);
1705
1942
  color: #c8bfae;
@@ -1713,15 +1950,14 @@ html[data-theme="dark"] .docmd-code-block-wrapper > .docmd-code-block-header {
1713
1950
  min-width: 0;
1714
1951
  overflow: hidden;
1715
1952
  }
1716
- .summer-cb__left > svg {
1953
+
1954
+ .summer-cb__left>svg {
1717
1955
  width: 13px;
1718
1956
  height: 13px;
1719
1957
  flex-shrink: 0;
1720
1958
  color: var(--summer-fg-muted);
1721
1959
  }
1722
- /* Filename (only present when the source had a title, e.g.
1723
- ```js "file.js"```). Kept subtle so the lang pill remains the
1724
- primary visual element. */
1960
+
1725
1961
  .summer-cb__filename {
1726
1962
  font-weight: 400;
1727
1963
  font-size: var(--summer-text-xs);
@@ -1731,6 +1967,7 @@ html[data-theme="dark"] .docmd-code-block-wrapper > .docmd-code-block-header {
1731
1967
  text-overflow: ellipsis;
1732
1968
  white-space: nowrap;
1733
1969
  }
1970
+
1734
1971
  .docmd-code-block-title {
1735
1972
  font-weight: 400;
1736
1973
  font-size: var(--summer-text-xs);
@@ -1740,9 +1977,7 @@ html[data-theme="dark"] .docmd-code-block-wrapper > .docmd-code-block-header {
1740
1977
  text-overflow: ellipsis;
1741
1978
  white-space: nowrap;
1742
1979
  }
1743
- /* Lang pill — always present, the de-facto label of the codeblock.
1744
- Shows the language (e.g. "BASH") or "CODEBLOCK" if no language
1745
- was specified. */
1980
+
1746
1981
  .summer-cb__lang {
1747
1982
  display: inline-flex;
1748
1983
  padding: 1px 7px;
@@ -1757,84 +1992,84 @@ html[data-theme="dark"] .docmd-code-block-wrapper > .docmd-code-block-header {
1757
1992
  line-height: 1.5;
1758
1993
  }
1759
1994
 
1760
- /* Copy button — lives inside the title bar, NOT floating */
1761
1995
  .summer-cb__copy,
1762
1996
  .copy-code-button.summer-cb__copy {
1763
- position: static;
1764
- display: inline-flex;
1765
- align-items: center;
1766
- gap: 5px;
1767
- padding: 3px 8px;
1768
- background: transparent;
1769
- border: 1px solid transparent;
1770
- border-radius: var(--summer-radius-sm);
1771
- color: var(--summer-fg-muted);
1772
- font-size: var(--summer-text-xs);
1773
- font-weight: 500;
1774
- font-family: var(--summer-font-sans);
1775
- cursor: pointer;
1776
- opacity: 1;
1777
- transition: all var(--summer-fast) var(--summer-ease);
1778
- flex-shrink: 0;
1779
-
1997
+ display: inline-flex;
1998
+ align-items: center;
1999
+ gap: 5px;
2000
+ padding: 3px 8px;
2001
+ background: transparent;
2002
+ border: 1px solid transparent;
2003
+ border-radius: var(--summer-radius-sm);
2004
+ color: var(--summer-fg-muted);
2005
+ font-size: var(--summer-text-xs);
2006
+ font-weight: 500;
2007
+ font-family: var(--summer-font-sans);
2008
+ cursor: pointer;
2009
+ opacity: 1;
2010
+ transition: all var(--summer-fast) var(--summer-ease);
2011
+ flex-shrink: 0;
1780
2012
  }
2013
+
1781
2014
  .summer-cb__copy:hover,
1782
2015
  .copy-code-button.summer-cb__copy:hover {
1783
2016
  background: var(--summer-surface);
1784
2017
  border-color: var(--summer-border);
1785
2018
  color: var(--summer-fg);
1786
2019
  }
2020
+
1787
2021
  html[data-theme="dark"] .summer-cb__copy,
1788
- html[data-theme="dark"] .copy-code-button.summer-cb__copy { color: #8a8170; }
2022
+ html[data-theme="dark"] .copy-code-button.summer-cb__copy {
2023
+ color: #8a8170;
2024
+ }
2025
+
1789
2026
  html[data-theme="dark"] .summer-cb__copy:hover,
1790
2027
  html[data-theme="dark"] .copy-code-button.summer-cb__copy:hover {
1791
2028
  background: rgba(255, 255, 255, 0.05);
1792
2029
  border-color: rgba(255, 255, 255, 0.08);
1793
2030
  color: #f5efe0;
1794
2031
  }
2032
+
1795
2033
  .summer-cb__copy.copied,
1796
2034
  .copy-code-button.summer-cb__copy.copied {
1797
2035
  background: var(--summer-green-soft);
1798
2036
  border-color: var(--summer-green);
1799
2037
  color: var(--summer-green);
1800
2038
  }
1801
- .summer-cb__copy svg {}
1802
-
1803
- /* Pre — sit below the title bar with no top padding bump */
1804
- .code-wrapper > pre,
1805
- .docmd-code-block-wrapper > .code-wrapper > pre {
1806
- margin: 0 !important;
1807
- padding: 16px 18px !important;
1808
- background: transparent !important;
1809
- border: 0 !important;
1810
- border-radius: 0 !important;
1811
- font-family: var(--summer-font-mono) !important;
1812
- font-size: 0.84rem !important;
1813
- line-height: 1.65 !important;
1814
- color: var(--summer-fg);
1815
- overflow-x: auto;
1816
-
1817
- }
1818
-
1819
- /* When the parser wraps a codeblock in .docmd-code-block-wrapper, the
1820
- inner .code-wrapper (added by docmd-main.js for its own copy button)
1821
- has its own border/background — which would render as a "window
1822
- inside a window". Strip that styling so the inner wrapper is
1823
- transparent and the outer wrapper is the only visual box. */
1824
- .docmd-code-block-wrapper > .code-wrapper {
1825
- background: transparent !important;
1826
- border: 0 !important;
1827
- border-radius: 0 !important;
1828
- box-shadow: none !important;
1829
- margin: 0 !important;
1830
- padding: 0 !important;
1831
- overflow: visible !important;
2039
+
2040
+ .code-wrapper>pre,
2041
+ .docmd-code-block-wrapper>pre,
2042
+ .docmd-code-block-wrapper>.code-wrapper>pre {
2043
+ margin: 0;
2044
+ padding: 16px 18px;
2045
+ background: transparent;
2046
+ border: 0;
2047
+ border-radius: 0;
2048
+ font-family: var(--summer-font-mono);
2049
+ font-size: 0.84rem;
2050
+ line-height: 1.65;
2051
+ color: var(--summer-fg);
2052
+ overflow-x: auto;
2053
+ }
2054
+
2055
+ .docmd-code-block-wrapper>.code-wrapper {
2056
+ background: transparent;
2057
+ border: 0;
2058
+ border-radius: 0;
2059
+ box-shadow: none;
2060
+ margin: 0;
2061
+ padding: 0;
2062
+ overflow: visible;
2063
+ }
2064
+
2065
+ .code-wrapper>pre code,
2066
+ .docmd-code-block-wrapper>pre code,
2067
+ .docmd-code-block-wrapper>.code-wrapper>pre code {
2068
+ color: inherit;
1832
2069
  }
1833
- .code-wrapper > pre code,
1834
- .docmd-code-block-wrapper > .code-wrapper > pre code { color: inherit !important; }
1835
2070
 
1836
2071
  /* Bare <pre> with no wrapper at all (no copy button injected) */
1837
- .summer-content > pre:not([class*="code-"]) {
2072
+ .summer-content>pre:not([class*="code-"]) {
1838
2073
  margin: 1.4em 0;
1839
2074
  padding: 16px 18px;
1840
2075
  background: var(--summer-surface-2);
@@ -1847,7 +2082,8 @@ html[data-theme="dark"] .copy-code-button.summer-cb__copy:hover {
1847
2082
  overflow-x: auto;
1848
2083
  box-shadow: var(--summer-shadow-sm);
1849
2084
  }
1850
- html[data-theme="dark"] .summer-content > pre:not([class*="code-"]) {
2085
+
2086
+ html[data-theme="dark"] .summer-content>pre:not([class*="code-"]) {
1851
2087
  background: #0f0d0a;
1852
2088
  color: #e7dfcf;
1853
2089
  }
@@ -1863,11 +2099,14 @@ html[data-theme="dark"] .summer-content > pre:not([class*="code-"]) {
1863
2099
  border-radius: var(--summer-radius);
1864
2100
  overflow: hidden;
1865
2101
  }
1866
- .summer-content th, .summer-content td {
2102
+
2103
+ .summer-content th,
2104
+ .summer-content td {
1867
2105
  padding: 10px 14px;
1868
2106
  text-align: left;
1869
2107
  border-bottom: 1px solid var(--summer-border-soft);
1870
2108
  }
2109
+
1871
2110
  .summer-content th {
1872
2111
  background: var(--summer-surface-2);
1873
2112
  font-weight: 600;
@@ -1876,8 +2115,14 @@ html[data-theme="dark"] .summer-content > pre:not([class*="code-"]) {
1876
2115
  text-transform: uppercase;
1877
2116
  letter-spacing: 0.04em;
1878
2117
  }
1879
- .summer-content tr:last-child td { border-bottom: 0; }
1880
- .summer-content tr:hover td { background: var(--summer-surface-2); }
2118
+
2119
+ .summer-content tr:last-child td {
2120
+ border-bottom: 0;
2121
+ }
2122
+
2123
+ .summer-content tr:hover td {
2124
+ background: var(--summer-surface-2);
2125
+ }
1881
2126
 
1882
2127
  /* Blockquote / callouts */
1883
2128
  .summer-content blockquote {
@@ -1889,11 +2134,19 @@ html[data-theme="dark"] .summer-content > pre:not([class*="code-"]) {
1889
2134
  color: var(--summer-fg);
1890
2135
  font-style: normal;
1891
2136
  }
1892
- .summer-content blockquote > :first-child { margin-top: 0; }
1893
- .summer-content blockquote > :last-child { margin-bottom: 0; }
1894
- .summer-content blockquote p { margin: 0.5em 0; }
1895
2137
 
1896
- /* GitBook-style callouts (left-bordered, light-tint) */
2138
+ .summer-content blockquote> :first-child {
2139
+ margin-top: 0;
2140
+ }
2141
+
2142
+ .summer-content blockquote> :last-child {
2143
+ margin-bottom: 0;
2144
+ }
2145
+
2146
+ .summer-content blockquote p {
2147
+ margin: 0.5em 0;
2148
+ }
2149
+
1897
2150
  .summer-content .callout,
1898
2151
  .summer-content details[class*="callout"],
1899
2152
  .summer-content .markdown-alert {
@@ -1903,12 +2156,39 @@ html[data-theme="dark"] .summer-content > pre:not([class*="code-"]) {
1903
2156
  border: 1px solid var(--summer-border-soft);
1904
2157
  border-left-width: 4px;
1905
2158
  }
1906
- .summer-content .callout-note, .summer-content .markdown-alert-note { background: var(--summer-sky-soft); border-color: color-mix(in srgb, var(--summer-sky) 20%, var(--summer-border-soft)); border-left-color: var(--summer-sky); }
1907
- .summer-content .callout-tip, .summer-content .markdown-alert-tip { background: var(--summer-green-soft); border-color: color-mix(in srgb, var(--summer-green) 20%, var(--summer-border-soft)); border-left-color: var(--summer-green); }
1908
- .summer-content .callout-warn, .summer-content .markdown-alert-warning { background: var(--summer-amber-soft); border-color: color-mix(in srgb, var(--summer-amber) 25%, var(--summer-border-soft)); border-left-color: var(--summer-amber); }
1909
- .summer-content .callout-danger, .summer-content .markdown-alert-caution { background: rgba(244, 63, 94, 0.06); border-color: color-mix(in srgb, var(--summer-rose) 20%, var(--summer-border-soft)); border-left-color: var(--summer-rose); }
2159
+
2160
+ .summer-content .callout-note,
2161
+ .summer-content .markdown-alert-note {
2162
+ background: var(--summer-sky-soft);
2163
+ border-color: color-mix(in srgb, var(--summer-sky) 20%, var(--summer-border-soft));
2164
+ border-left-color: var(--summer-sky);
2165
+ }
2166
+
2167
+ .summer-content .callout-tip,
2168
+ .summer-content .markdown-alert-tip {
2169
+ background: var(--summer-green-soft);
2170
+ border-color: color-mix(in srgb, var(--summer-green) 20%, var(--summer-border-soft));
2171
+ border-left-color: var(--summer-green);
2172
+ }
2173
+
2174
+ .summer-content .callout-warn,
2175
+ .summer-content .markdown-alert-warning {
2176
+ background: var(--summer-amber-soft);
2177
+ border-color: color-mix(in srgb, var(--summer-amber) 25%, var(--summer-border-soft));
2178
+ border-left-color: var(--summer-amber);
2179
+ }
2180
+
2181
+ .summer-content .callout-danger,
2182
+ .summer-content .markdown-alert-caution {
2183
+ background: rgba(244, 63, 94, 0.06);
2184
+ border-color: color-mix(in srgb, var(--summer-rose) 20%, var(--summer-border-soft));
2185
+ border-left-color: var(--summer-rose);
2186
+ }
2187
+
1910
2188
  html[data-theme="dark"] .summer-content .callout-danger,
1911
- html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2a0e10; }
2189
+ html[data-theme="dark"] .summer-content .markdown-alert-caution {
2190
+ background: #2a0e10;
2191
+ }
1912
2192
 
1913
2193
  /* Images */
1914
2194
  .summer-content img {
@@ -1918,7 +2198,11 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
1918
2198
  margin: 1em 0;
1919
2199
  box-shadow: var(--summer-shadow-sm);
1920
2200
  }
1921
- .summer-content figure { margin: 1.4em 0; }
2201
+
2202
+ .summer-content figure {
2203
+ margin: 1.4em 0;
2204
+ }
2205
+
1922
2206
  .summer-content figcaption {
1923
2207
  text-align: center;
1924
2208
  color: var(--summer-fg-muted);
@@ -1947,18 +2231,14 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
1947
2231
  border-radius: 3px;
1948
2232
  }
1949
2233
 
1950
-
1951
- /* ────────────────────────────────────────────────────────────────────────
1952
- 12. FOOTER
1953
- ──────────────────────────────────────────────────────────────────────── */
1954
-
1955
2234
  .summer-footer {
1956
2235
  margin-top: auto;
1957
- padding: 28px 0 28px;
2236
+ padding: 24px 0;
1958
2237
  border-top: 1px solid var(--summer-border-soft);
1959
2238
  background: var(--summer-bg-subtle);
1960
2239
  flex-shrink: 0;
1961
2240
  }
2241
+
1962
2242
  .summer-footer__inner {
1963
2243
  max-width: var(--summer-page-max);
1964
2244
  margin: 0 auto;
@@ -1971,20 +2251,57 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
1971
2251
  font-size: var(--summer-text-sm);
1972
2252
  color: var(--summer-fg-muted);
1973
2253
  }
1974
- .summer-footer__user { max-width: 100%; }
1975
- .summer-footer__branding { display: inline-flex; align-items: center; gap: 5px; color: var(--summer-fg-muted); }
1976
- .summer-footer__branding a { color: var(--summer-fg-soft); font-weight: 600; text-decoration: none; }
1977
- .summer-footer__branding a:hover { color: var(--summer-accent); }
1978
- .summer-footer__branding svg { width: 16px; height: 16px; color: var(--summer-accent); }
1979
- .summer-footer__sep { margin: 0 4px; opacity: 0.4; }
1980
- .summer-footer__sponsor { display: inline-flex; align-items: center; gap: 4px; }
1981
- .summer-footer__sponsor svg { width: 14px; height: 14px; color: var(--summer-accent); }
2254
+
2255
+ .summer-footer__user {
2256
+ max-width: 100%;
2257
+ }
2258
+
2259
+ .summer-footer__branding {
2260
+ display: inline-flex;
2261
+ align-items: center;
2262
+ gap: 5px;
2263
+ color: var(--summer-fg-muted);
2264
+ }
2265
+
2266
+ .summer-footer__branding a {
2267
+ color: var(--summer-fg-soft);
2268
+ font-weight: 600;
2269
+ text-decoration: none;
2270
+ }
2271
+
2272
+ .summer-footer__branding a:hover {
2273
+ color: var(--summer-accent);
2274
+ }
2275
+
2276
+ .summer-footer__branding svg {
2277
+ width: 16px;
2278
+ height: 16px;
2279
+ color: var(--summer-accent);
2280
+ }
2281
+
2282
+ .summer-footer__sep {
2283
+ margin: 0 4px;
2284
+ opacity: 0.4;
2285
+ }
2286
+
2287
+ .summer-footer__sponsor {
2288
+ display: inline-flex;
2289
+ align-items: center;
2290
+ gap: 4px;
2291
+ }
2292
+
2293
+ .summer-footer__sponsor svg {
2294
+ width: 14px;
2295
+ height: 14px;
2296
+ color: var(--summer-accent);
2297
+ }
1982
2298
 
1983
2299
  /* Complete footer (multi-column) */
1984
2300
  .summer-footer.summer-footer--complete {
1985
2301
  padding: 56px 0 24px;
1986
2302
  border-top: 1px solid var(--summer-border-soft);
1987
2303
  }
2304
+
1988
2305
  .summer-footer__top {
1989
2306
  max-width: var(--summer-page-max);
1990
2307
  margin: 0 auto;
@@ -1994,22 +2311,41 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
1994
2311
  gap: 40px;
1995
2312
  align-items: start;
1996
2313
  }
2314
+
1997
2315
  @media (max-width: 900px) {
1998
- .summer-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
2316
+ .summer-footer__top {
2317
+ grid-template-columns: 1fr 1fr;
2318
+ gap: 32px;
2319
+ }
1999
2320
  }
2321
+
2000
2322
  @media (max-width: 540px) {
2001
- .summer-footer__top { grid-template-columns: 1fr; gap: 28px; }
2323
+ .summer-footer__top {
2324
+ grid-template-columns: 1fr;
2325
+ gap: 28px;
2326
+ }
2002
2327
  }
2003
2328
 
2004
2329
  /* Brand column */
2005
- .summer-footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 320px; }
2330
+ .summer-footer__brand {
2331
+ display: flex;
2332
+ flex-direction: column;
2333
+ gap: 14px;
2334
+ max-width: 320px;
2335
+ }
2336
+
2006
2337
  .summer-footer__brand-logo {
2007
2338
  display: flex;
2008
2339
  align-items: center;
2009
2340
  gap: 10px;
2010
2341
  margin-bottom: 2px;
2011
2342
  }
2012
- .summer-footer__brand-logo img { max-height: 28px; width: auto; }
2343
+
2344
+ .summer-footer__brand-logo img {
2345
+ max-height: 28px;
2346
+ width: auto;
2347
+ }
2348
+
2013
2349
  .summer-footer__desc {
2014
2350
  color: var(--summer-fg-muted);
2015
2351
  font-size: var(--summer-text-sm);
@@ -2018,7 +2354,12 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
2018
2354
  }
2019
2355
 
2020
2356
  /* Link columns */
2021
- .summer-footer__col { display: flex; flex-direction: column; gap: 10px; }
2357
+ .summer-footer__col {
2358
+ display: flex;
2359
+ flex-direction: column;
2360
+ gap: 10px;
2361
+ }
2362
+
2022
2363
  .summer-footer__col-title {
2023
2364
  font-size: var(--summer-text-xs);
2024
2365
  font-weight: 700;
@@ -2027,8 +2368,20 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
2027
2368
  color: var(--summer-fg);
2028
2369
  margin: 0 0 4px;
2029
2370
  }
2030
- .summer-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
2031
- .summer-footer__col li { margin: 0; }
2371
+
2372
+ .summer-footer__col ul {
2373
+ list-style: none;
2374
+ padding: 0;
2375
+ margin: 0;
2376
+ display: flex;
2377
+ flex-direction: column;
2378
+ gap: 7px;
2379
+ }
2380
+
2381
+ .summer-footer__col li {
2382
+ margin: 0;
2383
+ }
2384
+
2032
2385
  .summer-footer__col a {
2033
2386
  display: inline-flex;
2034
2387
  align-items: center;
@@ -2038,31 +2391,30 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
2038
2391
  text-decoration: none;
2039
2392
  transition: color var(--summer-fast) var(--summer-ease);
2040
2393
  }
2041
- .summer-footer__col a:hover { color: var(--summer-accent); }
2394
+
2395
+ .summer-footer__col a:hover {
2396
+ color: var(--summer-accent);
2397
+ }
2398
+
2042
2399
  .summer-footer__col a[target="_blank"]::after {
2043
- content: "";
2400
+ content: "↗";
2044
2401
  font-size: 0.75em;
2045
2402
  opacity: 0;
2046
2403
  margin-left: -1px;
2047
2404
  transition: opacity var(--summer-fast) var(--summer-ease), margin-left var(--summer-fast) var(--summer-ease);
2048
2405
  }
2406
+
2049
2407
  .summer-footer__col a[target="_blank"]:hover::after {
2050
2408
  opacity: 0.7;
2051
2409
  margin-left: 1px;
2052
2410
  }
2053
2411
 
2054
- /* Complete footer — bottom bar gets a hairline divider on top */
2055
2412
  .summer-footer.summer-footer--complete .summer-footer__inner {
2056
2413
  border-top: 1px solid var(--summer-border-soft);
2057
2414
  padding-top: 18px;
2058
2415
  margin-top: 0;
2059
2416
  }
2060
2417
 
2061
-
2062
- /* ────────────────────────────────────────────────────────────────────────
2063
- 13. BANNER (config.layout.banner)
2064
- ──────────────────────────────────────────────────────────────────────── */
2065
-
2066
2418
  .summer-banner {
2067
2419
  position: relative;
2068
2420
  z-index: calc(var(--summer-z-sticky) + 1);
@@ -2071,6 +2423,7 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
2071
2423
  color: var(--summer-fg);
2072
2424
  font-size: var(--summer-text-sm);
2073
2425
  }
2426
+
2074
2427
  .summer-banner__inner {
2075
2428
  max-width: var(--summer-page-max);
2076
2429
  margin: 0 auto;
@@ -2080,7 +2433,12 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
2080
2433
  gap: 12px;
2081
2434
  justify-content: center;
2082
2435
  }
2083
- .summer-banner a { color: var(--summer-accent); font-weight: 600; }
2436
+
2437
+ .summer-banner a {
2438
+ color: var(--summer-accent);
2439
+ font-weight: 600;
2440
+ }
2441
+
2084
2442
  .summer-banner__close {
2085
2443
  position: absolute;
2086
2444
  right: 12px;
@@ -2094,50 +2452,89 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
2094
2452
  color: var(--summer-fg-soft);
2095
2453
  border-radius: 4px;
2096
2454
  }
2097
- .summer-banner__close:hover { background: var(--summer-surface); color: var(--summer-fg); }
2098
-
2099
2455
 
2100
- /* ────────────────────────────────────────────────────────────────────────
2101
- 14. RESPONSIVE — Tablet
2102
- ──────────────────────────────────────────────────────────────────────── */
2456
+ .summer-banner__close:hover {
2457
+ background: var(--summer-surface);
2458
+ color: var(--summer-fg);
2459
+ }
2103
2460
 
2104
2461
  @media (max-width: 1280px) {
2105
2462
  :root {
2106
2463
  --summer-sidebar-width: 256px;
2107
2464
  --summer-toc-width: 220px;
2108
2465
  }
2109
- .summer-main {padding: 0 32px 60px;--summer-gutter: 32px;}
2110
- .summer-toc {padding-right: 20px;padding-left: 20px;}
2111
- .summer-topbar__inner {padding: 0 20px;gap: 16px;}
2112
- .summer-subnav__inner { padding: 0 20px; }
2113
- .summer-footer__inner, .summer-footer__top, .summer-banner__inner { padding-left: 20px; padding-right: 20px; }
2466
+
2467
+ .summer-main {
2468
+ --summer-gutter: 32px;
2469
+ }
2470
+
2471
+ .summer-topbar__inner {
2472
+ padding: 0 20px;
2473
+ gap: 16px;
2474
+ }
2475
+
2476
+ .summer-subnav__inner {
2477
+ padding: 0 20px;
2478
+ }
2479
+
2480
+ .summer-footer__inner,
2481
+ .summer-footer__top,
2482
+ .summer-banner__inner {
2483
+ padding-left: 20px;
2484
+ padding-right: 20px;
2485
+ }
2114
2486
  }
2115
2487
 
2116
2488
  @media (max-width: 1100px) {
2489
+
2117
2490
  /* Hide TOC on medium screens; keep sidebar */
2118
- :root { --summer-grid-template: var(--summer-sidebar-width) 1fr; }
2119
- .summer-toc { display: none; }
2491
+ :root {
2492
+ --summer-grid-template: var(--summer-sidebar-width) 1fr;
2493
+ }
2494
+
2495
+ .summer-toc {
2496
+ display: none;
2497
+ }
2120
2498
  }
2121
2499
 
2122
2500
  @media (max-width: 900px) {
2123
- .summer-topbar { position: static; }
2501
+ .summer-topbar {
2502
+ position: static;
2503
+ }
2504
+
2124
2505
  .summer-topbar__inner {
2125
2506
  grid-template-columns: 1fr auto;
2126
2507
  padding: 0 16px;
2127
2508
  gap: 12px;
2128
2509
  }
2129
- .summer-topbar__center { display: none; }
2130
- .summer-topbar__mobile { display: inline-flex; }
2131
2510
 
2132
- .summer-subnav { position: static; }
2133
- .summer-subnav__inner { padding: 0 16px; }
2511
+ .summer-topbar__center {
2512
+ display: none;
2513
+ }
2514
+
2515
+ .summer-topbar__mobile {
2516
+ display: inline-flex;
2517
+ }
2518
+
2519
+ .summer-subnav {
2520
+ position: static;
2521
+ }
2522
+
2523
+ .summer-subnav__inner {
2524
+ padding: 0 16px;
2525
+ }
2526
+
2527
+ :root {
2528
+ --summer-grid-template: 1fr;
2529
+ }
2134
2530
 
2135
- :root { --summer-grid-template: 1fr; }
2136
2531
  .summer-sidebar {
2137
2532
  position: fixed;
2138
- top: 0; left: 0;
2533
+ top: 0;
2534
+ left: 0;
2139
2535
  z-index: var(--summer-z-overlay);
2140
- width: 84vw; max-width: 320px;
2536
+ width: 84vw;
2537
+ max-width: 320px;
2141
2538
  height: 100vh;
2142
2539
  border-right: 1px solid var(--summer-border);
2143
2540
  background: var(--summer-bg);
@@ -2145,29 +2542,77 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
2145
2542
  transition: transform var(--summer-med) var(--summer-ease);
2146
2543
  box-shadow: var(--summer-shadow-xl);
2147
2544
  padding-top: 48px;
2545
+ display: flex;
2546
+ flex-direction: column;
2547
+ overflow: hidden;
2548
+ }
2549
+
2550
+ .summer-sidebar > nav {
2551
+ flex: 1 1 auto;
2552
+ min-height: 0;
2553
+ overflow-y: auto;
2554
+ margin: 0 5px;
2555
+ }
2556
+
2557
+ .summer-sidebar__bottom {
2558
+ margin-top: auto;
2559
+ }
2560
+
2561
+ body.summer-sidebar-open .summer-sidebar {
2562
+ transform: translateX(0);
2148
2563
  }
2149
- body.summer-sidebar-open .summer-sidebar { transform: translateX(0); }
2564
+
2150
2565
  body.summer-sidebar-open::after {
2151
2566
  content: "";
2152
- position: fixed; inset: 0;
2153
- background: rgba(0,0,0,0.5);
2567
+ position: fixed;
2568
+ inset: 0;
2569
+ background: rgba(0, 0, 0, 0.5);
2154
2570
  z-index: calc(var(--summer-z-overlay) - 1);
2155
2571
  backdrop-filter: blur(2px);
2156
2572
  }
2157
- .summer-sidebar-close { display: inline-flex; }
2158
-
2159
- .summer-pageheader { position: static; }
2160
- .summer-main { padding: 0 20px 40px; --summer-gutter: 20px; }
2161
- .summer-content { font-size: 1rem; }
2162
- .summer-content h1 { font-size: 1.75rem; }
2163
- .summer-content h2 { font-size: 1.45rem; }
2164
- .summer-content h3 { font-size: 1.25rem; }
2165
-
2166
- .summer-pagenav { grid-template-columns: 1fr; }
2167
- .summer-pagenav__link--next { text-align: left; justify-content: flex-start; }
2168
- .summer-pagenav__link--next .summer-pagenav__icon { order: -1; }
2169
- /* Reset no-prev / no-next single-column edge-pushing — at 1fr the
2170
- * grid-column 1/2 placement would leave a phantom empty cell. */
2573
+
2574
+ .summer-sidebar-close {
2575
+ display: inline-flex;
2576
+ }
2577
+
2578
+ .summer-pageheader {
2579
+ position: static;
2580
+ }
2581
+
2582
+ .summer-main {
2583
+ padding: 0 20px 40px;
2584
+ --summer-gutter: 20px;
2585
+ }
2586
+
2587
+ .summer-content {
2588
+ font-size: 1rem;
2589
+ }
2590
+
2591
+ .summer-content h1 {
2592
+ font-size: 1.75rem;
2593
+ }
2594
+
2595
+ .summer-content h2 {
2596
+ font-size: 1.45rem;
2597
+ }
2598
+
2599
+ .summer-content h3 {
2600
+ font-size: 1.25rem;
2601
+ }
2602
+
2603
+ .summer-pagenav {
2604
+ grid-template-columns: minmax(0, 1fr);
2605
+ }
2606
+
2607
+ .summer-pagenav__link--next {
2608
+ text-align: left;
2609
+ justify-content: flex-start;
2610
+ }
2611
+
2612
+ .summer-pagenav__link--next .summer-pagenav__icon {
2613
+ order: -1;
2614
+ }
2615
+
2171
2616
  .summer-pagenav.no-prev .summer-pagenav__link--next,
2172
2617
  .summer-pagenav.no-next .summer-pagenav__link--prev {
2173
2618
  grid-column: auto;
@@ -2175,11 +2620,15 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
2175
2620
  max-width: none;
2176
2621
  }
2177
2622
 
2178
- .summer-totop { right: 16px; bottom: 16px; }
2623
+ .summer-totop {
2624
+ right: 16px;
2625
+ bottom: 16px;
2626
+ }
2179
2627
  }
2180
2628
 
2181
2629
  @media (max-width: 600px) {
2182
- /* Start shedding secondary icons — theme switch stays as the most useful one */
2630
+
2631
+ /* Start shedding secondary icons — theme switch stays as the most useful one */
2183
2632
  .summer-topbar__right .summer-iconbtn[aria-label="GitHub"],
2184
2633
  .summer-topbar__right .summer-iconbtn[aria-label="Sponsor"],
2185
2634
  .summer-topbar__right .summer-options-menu__item:not(:last-of-type) {
@@ -2188,39 +2637,52 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
2188
2637
  }
2189
2638
 
2190
2639
  @media (max-width: 480px) {
2191
- .summer-topbar__inner { padding: 0 12px; }
2192
- .summer-topbar__logo { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
2193
- .summer-logo--text span:last-child { display: none; }
2194
- .summer-logo--text .summer-logo__icon { width: 26px; height: 26px; font-size: 0.9rem; }
2640
+ .summer-topbar__inner {
2641
+ padding: 0 12px;
2642
+ }
2643
+
2644
+ .summer-topbar__logo {
2645
+ max-width: 120px;
2646
+ overflow: hidden;
2647
+ text-overflow: ellipsis;
2648
+ white-space: nowrap;
2649
+ }
2650
+
2651
+ .summer-logo--text span:last-child {
2652
+ display: none;
2653
+ }
2654
+
2655
+ .summer-logo--text .summer-logo__icon {
2656
+ width: 26px;
2657
+ height: 26px;
2658
+ font-size: 0.9rem;
2659
+ }
2195
2660
  }
2196
2661
 
2662
+ .summer-template.no-sidebar .summer-sidebar {
2663
+ display: none;
2664
+ }
2197
2665
 
2198
- /* ────────────────────────────────────────────────────────────────────────
2199
- 15. UTILITIES
2200
- ──────────────────────────────────────────────────────────────────────── */
2666
+ .summer-template.no-toc .summer-toc {
2667
+ display: none;
2668
+ }
2201
2669
 
2202
- /* Hide elements when sidebar/toc is disabled */
2203
- .summer-template.no-sidebar .summer-sidebar { display: none; }
2204
- .summer-template.no-toc .summer-toc { display: none; }
2205
- .summer-template.no-header .summer-pageheader { display: none; }
2670
+ .summer-template.no-header .summer-pageheader {
2671
+ display: none;
2672
+ }
2206
2673
 
2207
- /* Prev/next: when one is missing, push the survivor to its column edge.
2208
- * `margin-left: auto` doesn't push in grid (only flex), so we use
2209
- * grid-column + justify-self for the grid case, and fall back to
2210
- * flex margins when the layout is on a single column (<= 900px). */
2211
2674
  .summer-pagenav.no-prev .summer-pagenav__link--next {
2212
2675
  grid-column: 2;
2213
2676
  justify-self: end;
2214
2677
  max-width: 380px;
2215
2678
  }
2679
+
2216
2680
  .summer-pagenav.no-next .summer-pagenav__link--prev {
2217
2681
  grid-column: 1;
2218
2682
  justify-self: start;
2219
2683
  max-width: 380px;
2220
2684
  }
2221
2685
 
2222
- /* ── Markdown content additions ─────────────────────────────────────
2223
- Styles for elements not covered by the default GitBook reset. */
2224
2686
  .summer-content a.btn,
2225
2687
  .summer-content .docmd-btn,
2226
2688
  .summer-content .btn {
@@ -2237,9 +2699,10 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
2237
2699
  text-decoration: none;
2238
2700
  line-height: 1.4;
2239
2701
  transition: background var(--summer-fast) var(--summer-ease),
2240
- border-color var(--summer-fast) var(--summer-ease),
2241
- color var(--summer-fast) var(--summer-ease);
2702
+ border-color var(--summer-fast) var(--summer-ease),
2703
+ color var(--summer-fast) var(--summer-ease);
2242
2704
  }
2705
+
2243
2706
  .summer-content a.btn:hover,
2244
2707
  .summer-content .docmd-btn:hover,
2245
2708
  .summer-content .btn:hover {
@@ -2247,6 +2710,7 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
2247
2710
  border-color: var(--summer-border-strong);
2248
2711
  color: var(--summer-fg);
2249
2712
  }
2713
+
2250
2714
  .summer-content a.btn--primary,
2251
2715
  .summer-content .docmd-btn--primary,
2252
2716
  .summer-content .btn--primary,
@@ -2256,6 +2720,7 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
2256
2720
  border-color: var(--summer-accent);
2257
2721
  color: #fff;
2258
2722
  }
2723
+
2259
2724
  .summer-content a.btn--primary:hover,
2260
2725
  .summer-content .docmd-btn--primary:hover,
2261
2726
  .summer-content .btn--primary:hover {
@@ -2268,6 +2733,7 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
2268
2733
  height: auto;
2269
2734
  border-radius: var(--summer-radius-lg);
2270
2735
  }
2736
+
2271
2737
  .summer-content img.with-border {
2272
2738
  border: 1px solid var(--summer-border);
2273
2739
  box-shadow: var(--summer-shadow-sm);
@@ -2275,51 +2741,57 @@ html[data-theme="dark"] .summer-content .markdown-alert-caution { background: #2
2275
2741
 
2276
2742
  .summer-content .docmd-card,
2277
2743
  .summer-content .docmd-container.card {
2278
- background: var(--summer-surface);
2279
- border: 1px solid var(--summer-border-soft);
2280
- border-radius: var(--summer-radius);
2281
- padding: 20px;
2282
- margin: 1rem 0;
2283
- transition: border-color var(--summer-fast) var(--summer-ease),
2284
- background var(--summer-fast) var(--summer-ease);
2744
+ background: var(--summer-surface);
2745
+ border: 1px solid var(--summer-border-soft);
2746
+ border-radius: var(--summer-radius);
2747
+ padding: 20px;
2748
+ margin: 1rem 0;
2749
+ transition: border-color var(--summer-fast) var(--summer-ease),
2750
+ background var(--summer-fast) var(--summer-ease);
2285
2751
 
2286
2752
  }
2753
+
2287
2754
  .summer-content .docmd-card:hover,
2288
2755
  .summer-content .docmd-container.card:hover {
2289
2756
  border-color: var(--summer-border);
2290
2757
  }
2758
+
2291
2759
  .summer-content .docmd-card .card-title,
2292
2760
  .summer-content .docmd-container.card .card-title {
2293
- font-weight: 600;
2294
- font-size: 1rem;
2295
- color: var(--summer-fg);
2296
- margin-bottom: 6px;
2297
- display: flex;
2298
- align-items: center;
2299
- gap: 8px;
2761
+ font-weight: 600;
2762
+ font-size: 1rem;
2763
+ color: var(--summer-fg);
2764
+ margin-bottom: 6px;
2765
+ display: flex;
2766
+ align-items: center;
2767
+ gap: 8px;
2300
2768
 
2301
2769
  }
2302
2770
 
2303
- .summer-content ul, .summer-content ol {
2771
+ .summer-content ul,
2772
+ .summer-content ol {
2304
2773
  margin: 0.75em 0;
2305
2774
  padding-left: 1.4em;
2306
2775
  }
2307
- .summer-content li { margin: 0.3em 0; }
2308
2776
 
2309
- /* ── Git last-updated popover ─────────────────────────────────────── */
2310
2777
  .summer-pagefooter__time {
2311
2778
  position: relative;
2312
2779
  cursor: default;
2313
2780
  outline: none;
2314
2781
  border-radius: var(--summer-radius-sm);
2315
2782
  transition: background var(--summer-fast) var(--summer-ease),
2316
- color var(--summer-fast) var(--summer-ease);
2783
+ color var(--summer-fast) var(--summer-ease);
2784
+ }
2785
+
2786
+ .summer-pagefooter__time.has-commits {
2787
+ cursor: pointer;
2317
2788
  }
2318
- .summer-pagefooter__time.has-commits { cursor: pointer; }
2789
+
2319
2790
  .summer-pagefooter__time.has-commits:hover,
2320
2791
  .summer-pagefooter__time.has-commits:focus {
2321
2792
  color: var(--summer-fg);
2322
2793
  }
2794
+
2323
2795
  .summer-git-popover {
2324
2796
  position: absolute;
2325
2797
  bottom: calc(100% + 8px);
@@ -2337,9 +2809,10 @@ background var(--summer-fast) var(--summer-ease);
2337
2809
  visibility: hidden;
2338
2810
  pointer-events: none;
2339
2811
  transition: opacity var(--summer-fast) var(--summer-ease),
2340
- transform var(--summer-fast) var(--summer-ease),
2341
- visibility 0s linear var(--summer-fast);
2812
+ transform var(--summer-fast) var(--summer-ease),
2813
+ visibility 0s linear var(--summer-fast);
2342
2814
  }
2815
+
2343
2816
  .summer-pagefooter__time.has-commits:hover .summer-git-popover,
2344
2817
  .summer-pagefooter__time.has-commits:focus .summer-git-popover,
2345
2818
  .summer-pagefooter__time.has-commits.open .summer-git-popover {
@@ -2348,9 +2821,10 @@ background var(--summer-fast) var(--summer-ease);
2348
2821
  pointer-events: auto;
2349
2822
  transform: translateX(-50%) translateY(0);
2350
2823
  transition: opacity var(--summer-fast) var(--summer-ease),
2351
- transform var(--summer-fast) var(--summer-ease),
2352
- visibility 0s;
2824
+ transform var(--summer-fast) var(--summer-ease),
2825
+ visibility 0s;
2353
2826
  }
2827
+
2354
2828
  .summer-git-popover__title {
2355
2829
  font-size: 0.7rem;
2356
2830
  font-weight: 700;
@@ -2361,6 +2835,7 @@ background var(--summer-fast) var(--summer-ease);
2361
2835
  padding-bottom: 6px;
2362
2836
  border-bottom: 1px solid var(--summer-border-soft);
2363
2837
  }
2838
+
2364
2839
  .summer-git-popover__list {
2365
2840
  list-style: none;
2366
2841
  padding: 0;
@@ -2371,12 +2846,14 @@ background var(--summer-fast) var(--summer-ease);
2371
2846
  max-height: 240px;
2372
2847
  overflow-y: auto;
2373
2848
  }
2849
+
2374
2850
  .summer-git-popover__item {
2375
2851
  display: flex;
2376
2852
  gap: 8px;
2377
2853
  align-items: flex-start;
2378
2854
  font-size: 0.78rem;
2379
2855
  }
2856
+
2380
2857
  .summer-git-popover__avatar {
2381
2858
  width: 24px;
2382
2859
  height: 24px;
@@ -2391,8 +2868,18 @@ background var(--summer-fast) var(--summer-ease);
2391
2868
  overflow: hidden;
2392
2869
  flex-shrink: 0;
2393
2870
  }
2394
- .summer-git-popover__avatar img { width: 100%; height: 100%; object-fit: cover; }
2395
- .summer-git-popover__details { min-width: 0; flex: 1; }
2871
+
2872
+ .summer-git-popover__avatar img {
2873
+ width: 100%;
2874
+ height: 100%;
2875
+ object-fit: cover;
2876
+ }
2877
+
2878
+ .summer-git-popover__details {
2879
+ min-width: 0;
2880
+ flex: 1;
2881
+ }
2882
+
2396
2883
  .summer-git-popover__msg {
2397
2884
  color: var(--summer-fg);
2398
2885
  line-height: 1.35;
@@ -2400,6 +2887,7 @@ background var(--summer-fast) var(--summer-ease);
2400
2887
  overflow: hidden;
2401
2888
  text-overflow: ellipsis;
2402
2889
  }
2890
+
2403
2891
  .summer-git-popover__meta {
2404
2892
  display: flex;
2405
2893
  gap: 8px;
@@ -2407,26 +2895,51 @@ background var(--summer-fast) var(--summer-ease);
2407
2895
  color: var(--summer-fg-muted);
2408
2896
  margin-top: 1px;
2409
2897
  }
2410
- .summer-git-popover__author { font-weight: 500; }
2898
+
2899
+ .summer-git-popover__author {
2900
+ font-weight: 500;
2901
+ }
2411
2902
 
2412
2903
  /* Print styles */
2413
2904
  @media print {
2414
- .summer-topbar, .summer-subnav, .summer-sidebar, .summer-toc,
2415
- .summer-pagenav, .summer-pagefooter, .summer-footer,
2416
- .summer-banner, .summer-copy-widgets, .summer-totop,
2417
- .summer-cb__copy, .copy-code-button { display: none !important; }
2418
- .summer-main { padding: 0; max-width: 100%; }
2419
- .summer-content { color: #000; max-width: 100%; }
2420
- .summer-content pre, .summer-content table { page-break-inside: avoid; }
2421
- .summer-content h1, .summer-content h2, .summer-content h3 { page-break-after: avoid; }
2422
- }
2423
2905
 
2906
+ .summer-topbar,
2907
+ .summer-subnav,
2908
+ .summer-sidebar,
2909
+ .summer-toc,
2910
+ .summer-pagenav,
2911
+ .summer-pagefooter,
2912
+ .summer-footer,
2913
+ .summer-banner,
2914
+ .summer-copy-widgets,
2915
+ .summer-totop,
2916
+ .summer-cb__copy,
2917
+ .copy-code-button {
2918
+ display: none !important;
2919
+ }
2920
+
2921
+ .summer-main {
2922
+ padding: 0;
2923
+ max-width: 100%;
2924
+ }
2925
+
2926
+ .summer-content {
2927
+ color: #000;
2928
+ max-width: 100%;
2929
+ }
2424
2930
 
2425
- /* ────────────────────────────────────────────────────────────────────────
2426
- 16. CUSTOM CONTAINERS
2427
- ──────────────────────────────────────────────────────────────────────── */
2931
+ .summer-content pre,
2932
+ .summer-content table {
2933
+ page-break-inside: avoid;
2934
+ }
2935
+
2936
+ .summer-content h1,
2937
+ .summer-content h2,
2938
+ .summer-content h3 {
2939
+ page-break-after: avoid;
2940
+ }
2941
+ }
2428
2942
 
2429
- /* ── Markdown containers (button, tag, embed, tabs, grids, hero, changelog) ── */
2430
2943
  .summer-content a.docmd-button,
2431
2944
  .summer-content .docmd-button {
2432
2945
  display: inline-flex;
@@ -2443,17 +2956,24 @@ background var(--summer-fast) var(--summer-ease);
2443
2956
  border: 1px solid var(--summer-accent);
2444
2957
  cursor: pointer;
2445
2958
  transition: filter var(--summer-fast) var(--summer-ease),
2446
- transform var(--summer-fast) var(--summer-ease);
2959
+ transform var(--summer-fast) var(--summer-ease);
2447
2960
  vertical-align: middle;
2448
2961
  line-height: 1.4;
2962
+ width: fit-content;
2449
2963
  }
2964
+
2450
2965
  .summer-content a.docmd-button:hover,
2451
2966
  .summer-content .docmd-button:hover {
2452
2967
  filter: brightness(1.08);
2453
2968
  transform: translateY(-1px);
2454
2969
  color: #fff;
2455
2970
  }
2456
- .summer-content .docmd-button .button-icon { width: 1em; height: 1em; flex-shrink: 0; }
2971
+
2972
+ .summer-content .docmd-button .button-icon {
2973
+ width: 1em;
2974
+ height: 1em;
2975
+ flex-shrink: 0;
2976
+ }
2457
2977
 
2458
2978
  .summer-content .docmd-tag {
2459
2979
  display: inline-flex;
@@ -2470,8 +2990,15 @@ background var(--summer-fast) var(--summer-ease);
2470
2990
  vertical-align: middle;
2471
2991
  transition: filter var(--summer-fast) var(--summer-ease);
2472
2992
  }
2473
- .summer-content a.docmd-tag-link .docmd-tag:hover { filter: brightness(1.08); }
2474
- .summer-content .docmd-tag .tag-icon { display: inline-block; margin-right: 4px; }
2993
+
2994
+ .summer-content a.docmd-tag-link .docmd-tag:hover {
2995
+ filter: brightness(1.08);
2996
+ }
2997
+
2998
+ .summer-content .docmd-tag .tag-icon {
2999
+ display: inline-block;
3000
+ margin-right: 4px;
3001
+ }
2475
3002
 
2476
3003
  .summer-content .docmd-embed {
2477
3004
  display: block;
@@ -2479,79 +3006,64 @@ background var(--summer-fast) var(--summer-ease);
2479
3006
  border-radius: var(--summer-radius-md);
2480
3007
  max-width: 100%;
2481
3008
  }
3009
+
2482
3010
  .summer-content iframe.docmd-embed {
2483
3011
  width: 100%;
2484
3012
  aspect-ratio: 16 / 9;
2485
3013
  border: none !important;
2486
3014
  }
3015
+
2487
3016
  .summer-content iframe.docmd-embed[data-short="true"] {
2488
3017
  aspect-ratio: 9 / 16;
2489
3018
  max-width: 400px;
2490
3019
  }
3020
+
2491
3021
  .summer-content blockquote.docmd-embed {
2492
3022
  border-left: 3px solid var(--summer-border-strong);
2493
3023
  padding: 8px 14px;
2494
3024
  background: var(--summer-surface);
2495
3025
  }
3026
+
2496
3027
  .summer-content .docmd-embed-fallback {
2497
3028
  margin: 1.5rem 0;
2498
3029
  display: flex;
2499
3030
  }
2500
3031
 
2501
- .summer-content .docmd-tabs {
2502
- margin: 1.5rem 0;
2503
- border: 1px solid var(--summer-border-soft);
2504
- border-radius: var(--summer-radius-md);
2505
- overflow: hidden;
2506
- background: var(--summer-bg);
3032
+ .summer-content .docmd-tabs-nav::-webkit-scrollbar {
3033
+ display: none;
2507
3034
  }
2508
- .summer-content .docmd-tabs-nav {
2509
- display: flex;
2510
- background: var(--summer-surface);
2511
- border-bottom: 1px solid var(--summer-border-soft);
2512
- overflow-x: auto;
2513
- scrollbar-width: none;
3035
+
3036
+ .summer-content .docmd-tabs-nav-item:hover {
3037
+ color: var(--summer-fg);
2514
3038
  }
2515
- .summer-content .docmd-tabs-nav::-webkit-scrollbar { display: none; }
2516
- .summer-content .docmd-tabs-nav-item {
2517
- padding: 10px 16px;
2518
- cursor: pointer;
2519
- border-bottom: 2px solid transparent;
2520
- font-weight: 500;
2521
- color: var(--summer-fg-muted);
2522
- white-space: nowrap;
2523
- display: flex;
2524
- align-items: center;
2525
- gap: 6px;
2526
- font-size: 0.85rem;
2527
- transition: color var(--summer-fast) var(--summer-ease),
2528
- border-color var(--summer-fast) var(--summer-ease);
3039
+
3040
+ .summer-content .docmd-tab-pane {
3041
+ display: none;
2529
3042
  }
2530
- .summer-content .docmd-tabs-nav-item:hover { color: var(--summer-fg); }
2531
- .summer-content .docmd-tabs-nav-item.active {
2532
- color: var(--summer-accent);
2533
- border-bottom-color: var(--summer-accent);
2534
- background: var(--summer-bg);
3043
+
3044
+ .summer-content .docmd-tab-pane.active {
3045
+ display: block;
2535
3046
  }
2536
- .summer-content .docmd-tabs-content { padding: 1.25rem 1.25rem 0.5rem; }
2537
- .summer-content .docmd-tab-pane { display: none; }
2538
- .summer-content .docmd-tab-pane.active { display: block; }
2539
3047
 
2540
3048
  .summer-content .docmd-container.grids {
2541
- display: grid;
2542
- grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
2543
- gap: 16px;
2544
- margin: 1.5rem 0;
3049
+ display: grid;
3050
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
3051
+ gap: 16px;
3052
+ margin: 1.5rem 0;
2545
3053
 
2546
3054
  }
3055
+
2547
3056
  .summer-content .docmd-container.grid-item {
2548
- display: flex;
2549
- flex-direction: column;
2550
- align-items: center;
2551
- transition: border-color var(--summer-fast) var(--summer-ease);
3057
+ display: flex;
3058
+ flex-direction: column;
3059
+ align-items: center;
3060
+ transition: border-color var(--summer-fast) var(--summer-ease);
2552
3061
 
2553
3062
  }
2554
- .summer-content .docmd-container.grid-item:hover { border-color: var(--summer-border); }
3063
+
3064
+ .summer-content .docmd-container.grid-item:hover {
3065
+ border-color: var(--summer-border);
3066
+ }
2555
3067
 
2556
3068
  .summer-content .docmd-hero {
2557
3069
  position: relative;
@@ -2562,6 +3074,7 @@ background var(--summer-fast) var(--summer-ease);
2562
3074
  flex-direction: column;
2563
3075
  border-radius: var(--summer-radius-md);
2564
3076
  }
3077
+
2565
3078
  .summer-content .docmd-hero.hero-glow::before {
2566
3079
  content: '';
2567
3080
  position: absolute;
@@ -2576,8 +3089,16 @@ background var(--summer-fast) var(--summer-ease);
2576
3089
  z-index: -1;
2577
3090
  pointer-events: none;
2578
3091
  }
2579
- .summer-content .docmd-hero.hero-banner { text-align: center; align-items: center; }
2580
- .summer-content .docmd-hero.hero-banner > * { max-width: 760px; }
3092
+
3093
+ .summer-content .docmd-hero.hero-banner {
3094
+ text-align: center;
3095
+ align-items: center;
3096
+ }
3097
+
3098
+ .summer-content .docmd-hero.hero-banner>* {
3099
+ max-width: 760px;
3100
+ }
3101
+
2581
3102
  .summer-content .docmd-hero.hero-split {
2582
3103
  display: flex;
2583
3104
  flex-direction: row;
@@ -2585,34 +3106,50 @@ background var(--summer-fast) var(--summer-ease);
2585
3106
  gap: 2rem;
2586
3107
  text-align: left;
2587
3108
  }
2588
- .summer-content .docmd-hero.hero-split > * { flex: 1 1 0; min-width: 0; }
2589
- .summer-content .docmd-hero h1 { font-size: 2.25rem; margin: 0 0 0.5rem; }
2590
- .summer-content .docmd-hero p { margin: 0.3em 0; color: var(--summer-fg-soft); }
3109
+
3110
+ .summer-content .docmd-hero.hero-split>* {
3111
+ flex: 1 1 0;
3112
+ min-width: 0;
3113
+ }
3114
+
3115
+ .summer-content .docmd-hero h1 {
3116
+ font-size: 2.25rem;
3117
+ margin: 0 0 0.5rem;
3118
+ }
3119
+
3120
+ .summer-content .docmd-hero p {
3121
+ margin: 0.3em 0;
3122
+ color: var(--summer-fg-soft);
3123
+ }
2591
3124
 
2592
3125
  .summer-content .docmd-container.changelog-timeline {
2593
3126
  position: relative;
2594
- margin-top: 1.5rem;
3127
+ padding-left: 1rem;
3128
+ margin: 1.5rem 0;
2595
3129
  background: transparent;
2596
3130
  border: none;
2597
3131
  box-shadow: none;
2598
3132
  }
3133
+
2599
3134
  .summer-content .docmd-container.changelog-timeline::before {
2600
3135
  content: "";
2601
3136
  position: absolute;
2602
3137
  top: 0.5rem;
2603
3138
  bottom: 1.5rem;
2604
- left: 0;
3139
+ left: 16px;
2605
3140
  width: 2px;
2606
3141
  background: linear-gradient(to bottom, transparent 0%, var(--summer-border) 3%, var(--summer-border) 90%, transparent 100%);
2607
3142
  pointer-events: none;
2608
3143
  z-index: 0;
2609
3144
  }
3145
+
2610
3146
  .summer-content .changelog-entry {
2611
3147
  position: relative;
2612
3148
  padding-left: 22px;
2613
3149
  margin-bottom: 1.25rem;
2614
3150
  display: block;
2615
3151
  }
3152
+
2616
3153
  .summer-content .changelog-entry::after {
2617
3154
  content: "";
2618
3155
  position: absolute;
@@ -2625,14 +3162,16 @@ background var(--summer-fast) var(--summer-ease);
2625
3162
  border-radius: 50%;
2626
3163
  z-index: 2;
2627
3164
  transition: transform var(--summer-fast) var(--summer-ease),
2628
- border-color var(--summer-fast) var(--summer-ease),
2629
- background var(--summer-fast) var(--summer-ease);
3165
+ border-color var(--summer-fast) var(--summer-ease),
3166
+ background var(--summer-fast) var(--summer-ease);
2630
3167
  }
3168
+
2631
3169
  .summer-content .changelog-entry:hover::after {
2632
3170
  transform: scale(1.3);
2633
3171
  border-color: var(--summer-accent);
2634
3172
  background: var(--summer-accent);
2635
3173
  }
3174
+
2636
3175
  .summer-content .changelog-date {
2637
3176
  display: inline-block;
2638
3177
  background: var(--summer-accent-soft);
@@ -2645,18 +3184,54 @@ background var(--summer-fast) var(--summer-ease);
2645
3184
  letter-spacing: 0.04em;
2646
3185
  margin-bottom: 4px;
2647
3186
  }
2648
- .summer-content .changelog-body { padding-bottom: 0.4rem; }
2649
- .summer-content .changelog-body > :first-child { margin-top: 0; }
2650
3187
 
2651
- .summer-content img.align-left { float: left; margin: 0.2rem 1.25rem 0.5rem 0; max-width: 50%; }
2652
- .summer-content img.align-right { float: right; margin: 0.2rem 0 0.5rem 1.25rem; max-width: 50%; }
2653
- .summer-content img.align-center { display: block; margin-left: auto; margin-right: auto; }
2654
- .summer-content img.size-small { max-width: 300px; }
2655
- .summer-content img.size-medium { max-width: 500px; }
2656
- .summer-content img.size-large { max-width: 800px; }
2657
- .summer-content img.with-shadow { box-shadow: var(--summer-shadow); }
3188
+ .summer-content .changelog-body {
3189
+ padding-bottom: 0.4rem;
3190
+ }
3191
+
3192
+ .summer-content .changelog-body> :first-child {
3193
+ margin-top: 0;
3194
+ }
3195
+
3196
+ .summer-content img.align-left {
3197
+ float: left;
3198
+ margin: 0.2rem 1.25rem 0.5rem 0;
3199
+ max-width: 50%;
3200
+ }
3201
+
3202
+ .summer-content img.align-right {
3203
+ float: right;
3204
+ margin: 0.2rem 0 0.5rem 1.25rem;
3205
+ max-width: 50%;
3206
+ }
3207
+
3208
+ .summer-content img.align-center {
3209
+ display: block;
3210
+ margin-left: auto;
3211
+ margin-right: auto;
3212
+ }
3213
+
3214
+ .summer-content img.size-small {
3215
+ max-width: 300px;
3216
+ }
3217
+
3218
+ .summer-content img.size-medium {
3219
+ max-width: 500px;
3220
+ }
3221
+
3222
+ .summer-content img.size-large {
3223
+ max-width: 800px;
3224
+ }
3225
+
3226
+ .summer-content img.with-shadow {
3227
+ box-shadow: var(--summer-shadow);
3228
+ }
3229
+
3230
+ .summer-content .docmd-container figure {
3231
+ margin: 1.5rem 0;
3232
+ text-align: center;
3233
+ }
2658
3234
 
2659
- .summer-content .docmd-container figure { margin: 1.5rem 0; text-align: center; }
2660
3235
  .summer-content .docmd-container figcaption {
2661
3236
  font-size: 0.85rem;
2662
3237
  color: var(--summer-fg-muted);
@@ -2676,6 +3251,7 @@ background var(--summer-fast) var(--summer-ease);
2676
3251
  margin-left: 0 !important;
2677
3252
  position: relative;
2678
3253
  }
3254
+
2679
3255
  .step-item {
2680
3256
  counter-increment: step-counter;
2681
3257
  position: relative;
@@ -2683,7 +3259,10 @@ background var(--summer-fast) var(--summer-ease);
2683
3259
  margin-top: 1.5rem;
2684
3260
  margin-bottom: 2rem;
2685
3261
  list-style: none !important;
3262
+ min-height: 36px;
3263
+ align-content: center;
2686
3264
  }
3265
+
2687
3266
  .step-item::before {
2688
3267
  content: counter(step-counter);
2689
3268
  position: absolute;
@@ -2693,85 +3272,101 @@ background var(--summer-fast) var(--summer-ease);
2693
3272
  height: 32px;
2694
3273
  border-radius: 50%;
2695
3274
  background: var(--summer-surface-2);
2696
- border: 1.5px solid var(--summer-border-strong);
3275
+ border: 1.5px solid var(--summer-border);
2697
3276
  color: var(--summer-fg);
2698
- font-size: 0.875rem;
2699
- font-weight: 700;
3277
+ font-size: 0.9rem;
3278
+ font-weight: 800;
2700
3279
  display: flex;
2701
3280
  align-items: center;
2702
3281
  justify-content: center;
2703
3282
  z-index: 1;
2704
3283
  box-shadow: var(--summer-shadow-xs);
2705
- transition: all var(--summer-fast) var(--summer-ease);
3284
+ transition: all var(--summer-slow) var(--summer-ease);
2706
3285
  }
3286
+
2707
3287
  .step-item:hover::before {
2708
3288
  border-color: var(--summer-accent);
2709
3289
  color: var(--summer-accent);
2710
3290
  }
3291
+
2711
3292
  .step-item::after {
2712
3293
  content: "";
2713
3294
  position: absolute;
2714
3295
  left: 15px;
2715
- top: 36px;
3296
+ top: 32px;
2716
3297
  bottom: -36px;
2717
3298
  width: 2px;
2718
- background: var(--summer-border-soft);
3299
+ background: var(--summer-accent-faint);
2719
3300
  z-index: 0;
2720
3301
  }
3302
+
2721
3303
  .step-item:last-child::after {
2722
3304
  display: none;
2723
3305
  }
2724
3306
 
2725
- /* Changelog Container */
2726
- .changelog-timeline {
2727
- position: relative;
2728
- padding-left: 32px;
2729
- margin: 2.5rem 0;
2730
- }
2731
- .changelog-timeline::before {
2732
- content: "";
3307
+ .docmd-container.steps-reset ol.steps-list>li.step-item .step-permalink {
2733
3308
  position: absolute;
2734
- left: 7px;
2735
- top: 8px;
2736
- bottom: 8px;
2737
- width: 2px;
2738
- background: var(--summer-border-soft);
3309
+ right: 0;
3310
+ width: 1.5rem;
3311
+ height: 1.5rem;
3312
+ display: inline-flex;
3313
+ align-items: center;
3314
+ justify-content: center;
3315
+ color: var(--summer-fg-muted);
3316
+ opacity: 0;
3317
+ text-decoration: none !important;
3318
+ border-radius: 4px;
3319
+ transition: opacity var(--summer-fast) var(--summer-ease), color var(--summer-fast) var(--summer-ease), background-color var(--summer-fast) var(--summer-ease);
3320
+ z-index: 2;
2739
3321
  }
3322
+
3323
+ .docmd-container.steps-reset ol.steps-list>li.step-item .step-permalink svg {
3324
+ width: 0.85em;
3325
+ height: 0.85em;
3326
+ }
3327
+
3328
+ .docmd-container.steps-reset ol.steps-list>li.step-item:hover .step-permalink,
3329
+ .docmd-container.steps-reset ol.steps-list>li.step-item .step-permalink:focus-visible {
3330
+ opacity: 1;
3331
+ }
3332
+
3333
+ .docmd-container.steps-reset ol.steps-list>li.step-item .step-permalink:hover,
3334
+ .docmd-container.steps-reset ol.steps-list>li.step-item .step-permalink:focus-visible {
3335
+ color: var(--summer-accent);
3336
+ background-color: var(--summer-surface-2);
3337
+ }
3338
+
3339
+ .docmd-container.steps-reset ol.steps-list>li.step-item {
3340
+ scroll-margin-top: calc(var(--summer-topbar-height) + var(--summer-subnav-height) + var(--summer-banner-height) + var(--summer-pageheader-height) + 24px);
3341
+ }
3342
+
3343
+ /* Changelog Container */
3344
+
2740
3345
  .changelog-entry {
2741
3346
  position: relative;
2742
3347
  margin-bottom: 2.5rem;
2743
3348
  }
2744
- .changelog-entry::before {
2745
- content: "";
2746
- position: absolute;
2747
- left: -30px;
2748
- top: 6px;
2749
- width: 12px;
2750
- height: 12px;
2751
- border-radius: 50%;
2752
- background: var(--summer-bg);
2753
- border: 3px solid var(--summer-accent);
2754
- z-index: 1;
2755
- transition: transform var(--summer-fast) var(--summer-ease);
2756
- }
2757
- .changelog-entry:hover::before {
2758
- transform: scale(1.25);
2759
- }
3349
+
2760
3350
  .changelog-meta {
2761
3351
  margin-bottom: 0.5rem;
2762
3352
  }
3353
+
2763
3354
  .changelog-date {
2764
3355
  font-size: 0.85rem;
2765
3356
  font-weight: 700;
2766
3357
  text-transform: uppercase;
2767
3358
  letter-spacing: 0.06em;
2768
3359
  color: var(--summer-accent);
3360
+ position: relative;
3361
+ padding-right: 1.75rem;
2769
3362
  }
3363
+
2770
3364
  .changelog-body {
2771
3365
  font-size: 1rem;
2772
3366
  color: var(--summer-fg-soft);
2773
3367
  }
2774
- .changelog-body > :first-child {
3368
+
3369
+ .changelog-body> :first-child {
2775
3370
  margin-top: 0;
2776
3371
  }
2777
3372
 
@@ -2784,6 +3379,7 @@ background var(--summer-fast) var(--summer-ease);
2784
3379
  background: var(--summer-bg);
2785
3380
  box-shadow: var(--summer-shadow-xs);
2786
3381
  }
3382
+
2787
3383
  .docmd-tabs-nav {
2788
3384
  display: flex;
2789
3385
  background: var(--summer-surface-subtle, var(--summer-bg-subtle));
@@ -2791,14 +3387,16 @@ background var(--summer-fast) var(--summer-ease);
2791
3387
  overflow-x: auto;
2792
3388
  scrollbar-width: none;
2793
3389
  }
3390
+
2794
3391
  .docmd-tabs-nav::-webkit-scrollbar {
2795
3392
  display: none;
2796
3393
  }
3394
+
2797
3395
  .docmd-tabs-nav-item {
2798
3396
  display: flex;
2799
3397
  align-items: center;
2800
3398
  gap: 8px;
2801
- padding: 12px 20px;
3399
+ padding: 8px 20px;
2802
3400
  cursor: pointer;
2803
3401
  font-size: 0.875rem;
2804
3402
  font-weight: 500;
@@ -2807,45 +3405,53 @@ background var(--summer-fast) var(--summer-ease);
2807
3405
  transition: all var(--summer-fast) var(--summer-ease);
2808
3406
  user-select: none;
2809
3407
  }
3408
+
2810
3409
  .docmd-tabs-nav-item:hover {
2811
3410
  color: var(--summer-fg);
2812
3411
  background: rgba(0, 0, 0, 0.02);
2813
3412
  }
3413
+
2814
3414
  html[data-theme="dark"] .docmd-tabs-nav-item:hover {
2815
3415
  background: rgba(255, 255, 255, 0.02);
2816
3416
  }
3417
+
2817
3418
  .docmd-tabs-nav-item.active {
2818
3419
  color: var(--summer-accent);
2819
3420
  border-bottom-color: var(--summer-accent);
2820
3421
  background: var(--summer-bg);
2821
3422
  font-weight: 600;
2822
3423
  }
3424
+
2823
3425
  .docmd-tabs-content {
2824
3426
  padding: 20px;
2825
3427
  }
3428
+
2826
3429
  .docmd-tab-pane {
2827
3430
  display: none;
2828
3431
  }
3432
+
2829
3433
  .docmd-tab-pane.active {
2830
3434
  display: block;
2831
3435
  }
2832
3436
 
2833
3437
  /* Cards Container */
2834
3438
  .docmd-container.card {
2835
- margin: 1.5rem 0;
2836
- border: 1px solid var(--summer-border-soft);
2837
- border-radius: var(--summer-radius-lg);
2838
- padding: 24px;
2839
- background: var(--summer-bg);
2840
- box-shadow: var(--summer-shadow-xs);
2841
- transition: all var(--summer-med) var(--summer-ease);
3439
+ margin: 1.5rem 0;
3440
+ border: 1px solid var(--summer-border-soft);
3441
+ border-radius: var(--summer-radius-lg);
3442
+ padding: 24px;
3443
+ background: var(--summer-bg);
3444
+ box-shadow: var(--summer-shadow-xs);
3445
+ transition: all var(--summer-med) var(--summer-ease);
2842
3446
 
2843
3447
  }
3448
+
2844
3449
  .docmd-container.card:hover {
2845
3450
  transform: translateY(-2px);
2846
3451
  border-color: var(--summer-accent-hover, var(--summer-accent));
2847
3452
  box-shadow: var(--summer-shadow);
2848
3453
  }
3454
+
2849
3455
  .docmd-container.card .card-title {
2850
3456
  display: flex;
2851
3457
  align-items: center;
@@ -2855,37 +3461,41 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
2855
3461
  color: var(--summer-fg);
2856
3462
  margin-bottom: 12px;
2857
3463
  }
3464
+
2858
3465
  .docmd-container.card .card-title svg {
2859
3466
  width: 20px;
2860
3467
  height: 20px;
2861
3468
  color: var(--summer-accent);
2862
3469
  flex-shrink: 0;
2863
3470
  }
3471
+
2864
3472
  .docmd-container.card .card-content {
2865
- font-size: 0.95rem;
2866
- color: var(--summer-fg-soft);
2867
- line-height: 1.6;
3473
+ font-size: 0.95rem;
3474
+ color: var(--summer-fg-soft);
3475
+ line-height: 1.6;
2868
3476
 
2869
3477
  }
2870
3478
 
2871
3479
  /* Details / Collapsible Container */
2872
3480
  .docmd-container.collapsible {
2873
3481
  margin: 1.2rem 0;
2874
- border: 1px solid var(--summer-border-soft);
2875
- border-radius: var(--summer-radius);
3482
+ border: 1px solid var(--summer-border);
3483
+ border-radius: var(--summer-radius-lg);
2876
3484
  background: var(--summer-bg);
2877
3485
  overflow: hidden;
2878
3486
  box-shadow: var(--summer-shadow-xs);
2879
3487
  transition: border-color var(--summer-fast) var(--summer-ease);
2880
3488
  }
3489
+
2881
3490
  .docmd-container.collapsible:hover {
2882
3491
  border-color: var(--summer-accent);
2883
3492
  }
3493
+
2884
3494
  .collapsible-summary {
2885
3495
  display: flex;
2886
3496
  align-items: center;
2887
3497
  justify-content: space-between;
2888
- padding: 14px 18px;
3498
+ padding: 6px 14px;
2889
3499
  font-weight: 600;
2890
3500
  color: var(--summer-fg);
2891
3501
  cursor: pointer;
@@ -2893,33 +3503,40 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
2893
3503
  background: var(--summer-surface-2);
2894
3504
  list-style: none !important;
2895
3505
  }
3506
+
2896
3507
  .collapsible-summary::-webkit-details-marker {
2897
3508
  display: none !important;
2898
3509
  }
3510
+
2899
3511
  .collapsible-title {
2900
3512
  display: flex;
2901
3513
  align-items: center;
2902
3514
  gap: 8px;
2903
3515
  font-size: 0.95rem;
2904
3516
  }
3517
+
2905
3518
  .collapsible-title svg {
2906
3519
  width: 16px;
2907
3520
  height: 16px;
2908
3521
  color: var(--summer-accent);
2909
3522
  flex-shrink: 0;
2910
3523
  }
3524
+
2911
3525
  .collapsible-arrow {
2912
3526
  display: inline-flex;
2913
3527
  color: var(--summer-fg-muted);
2914
3528
  transition: transform var(--summer-med) var(--summer-ease);
2915
3529
  }
3530
+
2916
3531
  .collapsible-arrow svg {
2917
3532
  width: 16px;
2918
3533
  height: 16px;
2919
3534
  }
3535
+
2920
3536
  .docmd-container.collapsible[open] .collapsible-arrow {
2921
3537
  transform: rotate(180deg);
2922
3538
  }
3539
+
2923
3540
  .collapsible-content {
2924
3541
  padding: 18px;
2925
3542
  border-top: 1px solid var(--summer-border-soft);
@@ -2929,13 +3546,6 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
2929
3546
  background: var(--summer-bg);
2930
3547
  }
2931
3548
 
2932
-
2933
- /* ────────────────────────────────────────────────────────────────────────
2934
- 17. SEARCH — DEFAULT PLUGIN MODAL SUPPRESSION + INLINE DROPDOWN
2935
- ──────────────────────────────────────────────────────────────────────── */
2936
-
2937
- /* CRITICAL: force the default plugin modal off-screen so browser never
2938
- scrolls to it when its hidden input gets focused by our inline search. */
2939
3549
  .docmd-search-modal {
2940
3550
  position: fixed !important;
2941
3551
  top: -9999px !important;
@@ -2944,6 +3554,7 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
2944
3554
  visibility: hidden !important;
2945
3555
  opacity: 0 !important;
2946
3556
  }
3557
+
2947
3558
  /* When legitimately open (fallback), restore */
2948
3559
  .docmd-search-modal[style*="flex"] {
2949
3560
  position: fixed !important;
@@ -2952,16 +3563,16 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
2952
3563
  pointer-events: auto !important;
2953
3564
  visibility: visible !important;
2954
3565
  opacity: 1 !important;
2955
- background: rgba(0,0,0,0.4) !important;
3566
+ background: rgba(0, 0, 0, 0.4) !important;
2956
3567
  backdrop-filter: blur(4px) !important;
2957
3568
  }
2958
3569
 
2959
- /* ── Inline search dropdown (GitBook-style) ── */
2960
3570
  .summer-search-container {
2961
3571
  position: relative;
2962
3572
  width: 100%;
2963
3573
  max-width: 380px;
2964
3574
  }
3575
+
2965
3576
  .summer-search-input {
2966
3577
  width: 100%;
2967
3578
  padding: 5px 10px 5px 30px;
@@ -2974,11 +3585,13 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
2974
3585
  outline: none;
2975
3586
  transition: all var(--summer-fast) var(--summer-ease);
2976
3587
  }
3588
+
2977
3589
  .summer-search-input:focus {
2978
3590
  background: var(--summer-bg);
2979
3591
  border-color: var(--summer-border-strong);
2980
3592
  box-shadow: var(--summer-shadow-sm);
2981
3593
  }
3594
+
2982
3595
  .summer-search-container .summer-search__icon {
2983
3596
  position: absolute;
2984
3597
  left: 10px;
@@ -3005,8 +3618,13 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3005
3618
  display: flex;
3006
3619
  flex-direction: column;
3007
3620
  }
3621
+
3008
3622
  @media (max-width: 768px) {
3009
- .summer-search-dropdown { width: calc(100vw - 24px); left: 0; transform: none; }
3623
+ .summer-search-dropdown {
3624
+ width: calc(100vw - 24px);
3625
+ left: 0;
3626
+ transform: none;
3627
+ }
3010
3628
  }
3011
3629
 
3012
3630
  .summer-search-results-wrapper {
@@ -3015,6 +3633,7 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3015
3633
  padding: 6px;
3016
3634
  scrollbar-width: thin;
3017
3635
  }
3636
+
3018
3637
  .summer-search-dropdown-footer {
3019
3638
  display: flex;
3020
3639
  justify-content: space-between;
@@ -3026,6 +3645,7 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3026
3645
  color: var(--summer-fg-muted);
3027
3646
  gap: 12px;
3028
3647
  }
3648
+
3029
3649
  .summer-search-dropdown-footer kbd {
3030
3650
  display: inline-flex;
3031
3651
  align-items: center;
@@ -3039,8 +3659,6 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3039
3659
  color: var(--summer-fg-soft);
3040
3660
  }
3041
3661
 
3042
- /* ── Search results: GitBook style ── */
3043
- /* Strip all plugin defaults first */
3044
3662
  .summer-search-results-wrapper .docmd-search-results {
3045
3663
  padding: 0 !important;
3046
3664
  margin: 0 !important;
@@ -3063,6 +3681,7 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3063
3681
  cursor: pointer !important;
3064
3682
  transition: background var(--summer-fast) var(--summer-ease) !important;
3065
3683
  }
3684
+
3066
3685
  .summer-search-results-wrapper .search-result-item:hover,
3067
3686
  .summer-search-results-wrapper .search-result-item.selected,
3068
3687
  .search-result-item:hover,
@@ -3081,6 +3700,7 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3081
3700
  font-family: var(--summer-font-sans) !important;
3082
3701
  line-height: 1.4 !important;
3083
3702
  }
3703
+
3084
3704
  .search-result-item.selected .search-result-title,
3085
3705
  .search-result-item:hover .search-result-title {
3086
3706
  color: var(--summer-accent) !important;
@@ -3096,6 +3716,7 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3096
3716
  text-overflow: ellipsis !important;
3097
3717
  padding-left: 0 !important;
3098
3718
  }
3719
+
3099
3720
  .search-result-preview mark {
3100
3721
  background: var(--summer-accent-soft) !important;
3101
3722
  color: var(--summer-accent) !important;
@@ -3124,7 +3745,7 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3124
3745
  white-space: nowrap !important;
3125
3746
  }
3126
3747
 
3127
- /* Version pill overrides plugin's inline HSL styles with !important */
3748
+ /* Version pill — overrides plugin's inline HSL styles with !important */
3128
3749
  .search-result-version {
3129
3750
  display: inline-flex !important;
3130
3751
  align-items: center !important;
@@ -3142,13 +3763,14 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3142
3763
  letter-spacing: 0.01em !important;
3143
3764
  transition: background var(--summer-fast) var(--summer-ease), color var(--summer-fast) var(--summer-ease);
3144
3765
  }
3766
+
3145
3767
  .search-result-item:hover .search-result-version,
3146
3768
  .search-result-item.selected .search-result-version {
3147
3769
  background: var(--summer-bg) !important;
3148
3770
  color: var(--summer-fg-muted) !important;
3149
3771
  }
3150
3772
 
3151
- /* Confidence percentage soft, secondary */
3773
+ /* Confidence percentage — soft, secondary */
3152
3774
  .search-result-confidence {
3153
3775
  display: inline-flex !important;
3154
3776
  align-items: center !important;
@@ -3156,12 +3778,14 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3156
3778
  padding: 0 2px !important;
3157
3779
  font-size: 0.68rem !important;
3158
3780
  font-weight: 600 !important;
3159
- color: var(--summer-fg-muted) !important;
3781
+ color: var(--summer-fg-soft);
3160
3782
  font-family: var(--summer-font-sans) !important;
3161
3783
  font-variant-numeric: tabular-nums !important;
3162
3784
  letter-spacing: -0.01em !important;
3163
3785
  min-width: 32px !important;
3164
3786
  justify-content: flex-end !important;
3787
+ background-color: var(--summer-accent-faint);
3788
+ border-radius: var(--summer-radius-lg);
3165
3789
  }
3166
3790
 
3167
3791
  /* Filter pills (top of dropdown) */
@@ -3174,6 +3798,7 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3174
3798
  border-bottom: 1px solid var(--summer-border-soft) !important;
3175
3799
  flex-wrap: wrap !important;
3176
3800
  }
3801
+
3177
3802
  .docmd-search-filter-pill,
3178
3803
  .search-filter-pill,
3179
3804
  .search-filter-tag {
@@ -3194,6 +3819,7 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3194
3819
  font-family: var(--summer-font-sans) !important;
3195
3820
  letter-spacing: 0.01em !important;
3196
3821
  }
3822
+
3197
3823
  .docmd-search-filter-pill svg,
3198
3824
  .search-filter-pill svg,
3199
3825
  .search-filter-tag svg {
@@ -3201,6 +3827,7 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3201
3827
  height: 10px !important;
3202
3828
  color: currentColor !important;
3203
3829
  }
3830
+
3204
3831
  .docmd-search-filter-pill:hover,
3205
3832
  .search-filter-pill:hover,
3206
3833
  .search-filter-tag:hover {
@@ -3208,6 +3835,7 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3208
3835
  color: var(--summer-fg) !important;
3209
3836
  background: var(--summer-surface) !important;
3210
3837
  }
3838
+
3211
3839
  .docmd-search-filter-pill.active,
3212
3840
  .search-filter-pill.active,
3213
3841
  .search-filter-tag.active {
@@ -3235,11 +3863,6 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3235
3863
  gap: 8px;
3236
3864
  }
3237
3865
 
3238
-
3239
- /* ────────────────────────────────────────────────────────────────────────
3240
- 19. PAGE HEADER TITLE (ABOVE BREADCRUMBS)
3241
- ──────────────────────────────────────────────────────────────────────── */
3242
-
3243
3866
  .summer-pageheader__title {
3244
3867
  font-size: var(--summer-text-xs);
3245
3868
  font-weight: 700;
@@ -3250,10 +3873,6 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3250
3873
  display: block;
3251
3874
  }
3252
3875
 
3253
-
3254
- /* =========================================================================
3255
- 18. LANGUAGE SWITCHER DROPDOWN (GITBOOK-STYLE)
3256
- ========================================================================= */
3257
3876
  .docmd-language-switcher {
3258
3877
  position: relative;
3259
3878
  display: inline-block;
@@ -3295,8 +3914,8 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3295
3914
  visibility: hidden;
3296
3915
  transform: translateY(10px);
3297
3916
  transition: opacity var(--summer-med) var(--summer-ease),
3298
- transform var(--summer-med) var(--summer-ease),
3299
- visibility var(--summer-med) var(--summer-ease);
3917
+ transform var(--summer-med) var(--summer-ease),
3918
+ visibility var(--summer-med) var(--summer-ease);
3300
3919
  z-index: var(--summer-z-overlay);
3301
3920
  }
3302
3921
 
@@ -3351,9 +3970,6 @@ html[data-theme="dark"] .docmd-tabs-nav-item:hover {
3351
3970
  border-radius: 4px;
3352
3971
  }
3353
3972
 
3354
- /* ────────────────────────────────────────────────────────────────────────
3355
- 19. IMAGE LIGHTBOX (docmd-lightbox)
3356
- ──────────────────────────────────────────────────────────────────────── */
3357
3973
  .docmd-lightbox {
3358
3974
  display: none;
3359
3975
  position: fixed;
@@ -3412,7 +4028,167 @@ img.lightbox {
3412
4028
  }
3413
4029
 
3414
4030
  .search-initial {
3415
- padding: 1.5rem;
3416
- text-align: center;
3417
- color: var(--summer-accent);
3418
- }
4031
+ padding: 1.5rem;
4032
+ text-align: center;
4033
+ color: var(--summer-accent);
4034
+ }
4035
+
4036
+ .changelog-body .heading-anchor {
4037
+ display: none;
4038
+ }
4039
+ /* =========================================================================
4040
+ Topbar: align left section (logo + mobile menu button) vertically
4041
+ ========================================================================= */
4042
+ .summer-topbar__left {
4043
+ display: flex;
4044
+ align-items: center;
4045
+ gap: 12px;
4046
+ min-width: 0;
4047
+ }
4048
+
4049
+ /* =========================================================================
4050
+ Hero container (2.0) — basic, split, and slider layouts
4051
+ ========================================================================= */
4052
+ .docmd-hero {
4053
+ position: relative;
4054
+ width: 100%;
4055
+ margin: 48px 0;
4056
+ padding: 48px 0;
4057
+ display: flex;
4058
+ flex-direction: column;
4059
+ }
4060
+
4061
+ .docmd-hero.hero-glow::before {
4062
+ content: '';
4063
+ position: absolute;
4064
+ top: 50%;
4065
+ left: 50%;
4066
+ transform: translate(-50%, -50%);
4067
+ width: 80%;
4068
+ height: 80%;
4069
+ background: radial-gradient(circle, var(--summer-accent) 0%, transparent 70%);
4070
+ opacity: 0.08;
4071
+ filter: blur(100px);
4072
+ z-index: -1;
4073
+ pointer-events: none;
4074
+ }
4075
+
4076
+ .docmd-hero.hero-banner { text-align: center; align-items: center; }
4077
+ .docmd-hero.hero-banner .hero-content { max-width: 800px; }
4078
+
4079
+ .docmd-hero.hero-split {
4080
+ display: flex;
4081
+ flex-direction: row;
4082
+ align-items: center;
4083
+ gap: 48px;
4084
+ text-align: left;
4085
+ }
4086
+ .docmd-hero.hero-split .hero-content { flex: 1 1 0; min-width: 0; }
4087
+ .docmd-hero.hero-split .hero-side { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; align-items: center; }
4088
+
4089
+ .docmd-hero.hero-slider { overflow: hidden; position: relative; }
4090
+
4091
+ .hero-slider-track {
4092
+ display: flex;
4093
+ scroll-snap-type: x mandatory;
4094
+ overflow-x: auto;
4095
+ scrollbar-width: none;
4096
+ -ms-overflow-style: none;
4097
+ scroll-behavior: smooth;
4098
+ }
4099
+ .hero-slider-track::-webkit-scrollbar { display: none; }
4100
+
4101
+ .hero-slide {
4102
+ flex: 0 0 100%;
4103
+ scroll-snap-align: start;
4104
+ padding: 32px 16px;
4105
+ box-sizing: border-box;
4106
+ text-align: center;
4107
+ }
4108
+
4109
+ .hero-slider-controls {
4110
+ display: flex;
4111
+ justify-content: center;
4112
+ align-items: center;
4113
+ gap: 12px;
4114
+ margin-top: 24px;
4115
+ }
4116
+ .hero-slider-btn {
4117
+ background: var(--summer-surface);
4118
+ border: 1px solid var(--summer-border);
4119
+ color: var(--summer-fg);
4120
+ width: 36px;
4121
+ height: 36px;
4122
+ border-radius: 50%;
4123
+ cursor: pointer;
4124
+ display: flex;
4125
+ align-items: center;
4126
+ justify-content: center;
4127
+ transition: background 0.2s, border-color 0.2s;
4128
+ flex-shrink: 0;
4129
+ }
4130
+ .hero-slider-btn:hover { background: var(--summer-accent); border-color: var(--summer-accent); color: #fff; }
4131
+
4132
+ .hero-slider-dots { display: flex; gap: 8px; align-items: center; }
4133
+ .hero-slider-dot {
4134
+ width: 8px;
4135
+ height: 8px;
4136
+ border-radius: 50%;
4137
+ background: var(--summer-border);
4138
+ cursor: pointer;
4139
+ transition: background 0.2s, transform 0.2s;
4140
+ border: none;
4141
+ padding: 0;
4142
+ }
4143
+ .hero-slider-dot.active { background: var(--summer-accent); transform: scale(1.3); }
4144
+
4145
+ .hero-content h1 {
4146
+ font-size: clamp(2.5rem, 8vw, 4.5rem);
4147
+ font-weight: 900;
4148
+ line-height: .95;
4149
+ letter-spacing: -0.05em;
4150
+ margin-bottom: 16px;
4151
+ color: var(--summer-fg);
4152
+ }
4153
+ .hero-content p {
4154
+ font-size: clamp(1.1rem, 2.5vw, 1.4rem);
4155
+ color: var(--summer-fg-muted);
4156
+ line-height: 1.4;
4157
+ margin-bottom: 24px;
4158
+ }
4159
+ .hero-side img,
4160
+ .hero-side video,
4161
+ .hero-side .docmd-embed {
4162
+ width: 100%;
4163
+ border-radius: var(--summer-radius-xl, 16px);
4164
+ box-shadow: var(--summer-shadow-lg);
4165
+ }
4166
+
4167
+ @media (max-width: 960px) {
4168
+ .docmd-hero.hero-split { flex-direction: column; text-align: center; gap: 32px; }
4169
+ .hero-content h1 { font-size: 3rem; }
4170
+ }
4171
+
4172
+ /* =========================================================================
4173
+ Changelog entry permalink — mirrors .step-permalink behaviour
4174
+ ========================================================================= */
4175
+ .changelog-permalink {
4176
+ position: absolute;
4177
+ right: 0rem;
4178
+ top: .85em;
4179
+ transform: translateY(-50%);
4180
+ width: 1rem;
4181
+ height: 1rem;
4182
+ display: inline-flex;
4183
+ align-items: center;
4184
+ justify-content: center;
4185
+ color: currentColor;
4186
+ opacity: 0;
4187
+ text-decoration: none !important;
4188
+ border-radius: var(--summer-radius-sm, 4px);
4189
+ transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
4190
+ }
4191
+ .changelog-permalink svg { width: 0.85em; height: 0.85em; }
4192
+ .changelog-entry:hover .changelog-permalink,
4193
+ .changelog-permalink:focus-visible { opacity: 1; }
4194
+ .changelog-permalink:hover { color: var(--summer-fg); background: var(--summer-surface-2); }