@invisibleloop/pulse 0.1.37 → 0.1.38
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.
- package/docs/public/pulse-ui.css +2442 -1389
- package/package.json +1 -1
- package/public/.pulse-ui-version +1 -1
- package/public/pulse-ui.css +1 -1
package/docs/public/pulse-ui.css
CHANGED
|
@@ -15,28 +15,35 @@
|
|
|
15
15
|
All component styles reference --ui-* tokens only.
|
|
16
16
|
Override these in :root to retheme the entire library at once. */
|
|
17
17
|
:root {
|
|
18
|
-
--ui-bg:
|
|
19
|
-
--ui-surface:
|
|
20
|
-
--ui-surface-2:
|
|
21
|
-
--ui-border:
|
|
22
|
-
--ui-text:
|
|
23
|
-
--ui-muted:
|
|
24
|
-
--ui-accent:
|
|
25
|
-
--ui-accent-hover: var(--accent-hover,
|
|
26
|
-
--ui-accent-dim:
|
|
27
|
-
--ui-accent-text:
|
|
28
|
-
--ui-green:
|
|
29
|
-
--ui-green-dim:
|
|
30
|
-
--ui-red:
|
|
31
|
-
--ui-red-dim:
|
|
32
|
-
--ui-yellow:
|
|
33
|
-
--ui-yellow-dim:
|
|
34
|
-
--ui-blue:
|
|
35
|
-
--ui-blue-dim:
|
|
36
|
-
--ui-radius:
|
|
37
|
-
--ui-radius-sm:
|
|
38
|
-
--ui-font:
|
|
39
|
-
|
|
18
|
+
--ui-bg: var(--bg, #0d0d10);
|
|
19
|
+
--ui-surface: var(--surface, #111116);
|
|
20
|
+
--ui-surface-2: var(--surface-2, #18181f);
|
|
21
|
+
--ui-border: var(--border, #38383f);
|
|
22
|
+
--ui-text: var(--text, #e2e2ea);
|
|
23
|
+
--ui-muted: var(--muted, #9090a0);
|
|
24
|
+
--ui-accent: var(--accent, #9b8dff);
|
|
25
|
+
--ui-accent-hover: var(--accent-hover, #b5aaff);
|
|
26
|
+
--ui-accent-dim: var(--accent-dim, rgba(155, 141, 255, 0.12));
|
|
27
|
+
--ui-accent-text: var(--accent-text, #ffffff);
|
|
28
|
+
--ui-green: var(--green, #3dd68c);
|
|
29
|
+
--ui-green-dim: rgba(61, 214, 140, 0.12);
|
|
30
|
+
--ui-red: var(--red, #ff6b6b);
|
|
31
|
+
--ui-red-dim: rgba(255, 107, 107, 0.12);
|
|
32
|
+
--ui-yellow: #f5a623;
|
|
33
|
+
--ui-yellow-dim: rgba(245, 166, 35, 0.12);
|
|
34
|
+
--ui-blue: #60a5fa;
|
|
35
|
+
--ui-blue-dim: rgba(96, 165, 250, 0.12);
|
|
36
|
+
--ui-radius: var(--radius, 8px);
|
|
37
|
+
--ui-radius-sm: 4px;
|
|
38
|
+
--ui-font: var(
|
|
39
|
+
--font,
|
|
40
|
+
system-ui,
|
|
41
|
+
-apple-system,
|
|
42
|
+
BlinkMacSystemFont,
|
|
43
|
+
"Segoe UI",
|
|
44
|
+
sans-serif
|
|
45
|
+
);
|
|
46
|
+
--ui-mono: var(--mono, "Fira Code", "Cascadia Code", monospace);
|
|
40
47
|
|
|
41
48
|
/* Touch target minimum per WCAG 2.5.5 */
|
|
42
49
|
--ui-touch-min: 44px;
|
|
@@ -47,16 +54,35 @@
|
|
|
47
54
|
background matches the component surface colours out of the box.
|
|
48
55
|
Projects can opt into a light theme via meta.theme: 'light' (sets
|
|
49
56
|
data-theme="light" on <body>) or override :root tokens in app.css. */
|
|
50
|
-
*,
|
|
51
|
-
|
|
52
|
-
|
|
57
|
+
*,
|
|
58
|
+
*::before,
|
|
59
|
+
*::after {
|
|
60
|
+
box-sizing: border-box;
|
|
61
|
+
}
|
|
62
|
+
h1,
|
|
63
|
+
h2,
|
|
64
|
+
h3,
|
|
65
|
+
h4,
|
|
66
|
+
h5,
|
|
67
|
+
h6,
|
|
68
|
+
p,
|
|
69
|
+
ul,
|
|
70
|
+
ol,
|
|
71
|
+
li {
|
|
72
|
+
margin: 0;
|
|
73
|
+
}
|
|
74
|
+
ul,
|
|
75
|
+
ol {
|
|
76
|
+
list-style: none;
|
|
77
|
+
}
|
|
53
78
|
|
|
54
|
-
html,
|
|
55
|
-
|
|
79
|
+
html,
|
|
80
|
+
body {
|
|
81
|
+
margin: 0;
|
|
56
82
|
background-color: var(--ui-bg);
|
|
57
|
-
color:
|
|
58
|
-
font-family:
|
|
59
|
-
min-height:
|
|
83
|
+
color: var(--ui-text);
|
|
84
|
+
font-family: var(--ui-font);
|
|
85
|
+
min-height: 100dvh;
|
|
60
86
|
}
|
|
61
87
|
|
|
62
88
|
/* ─── Focus style ────────────────────────────────────────────────────────────
|
|
@@ -72,142 +98,167 @@ html, body {
|
|
|
72
98
|
|
|
73
99
|
/* ─── Button ─────────────────────────────────────────────────────────────── */
|
|
74
100
|
.ui-btn {
|
|
75
|
-
box-sizing:
|
|
76
|
-
display:
|
|
77
|
-
align-items:
|
|
101
|
+
box-sizing: border-box;
|
|
102
|
+
display: inline-flex;
|
|
103
|
+
align-items: center;
|
|
78
104
|
justify-content: center;
|
|
79
|
-
gap:
|
|
80
|
-
padding:
|
|
81
|
-
height:
|
|
82
|
-
min-width:
|
|
83
|
-
border:
|
|
84
|
-
border-radius:
|
|
85
|
-
font-family:
|
|
86
|
-
font-size:
|
|
87
|
-
font-weight:
|
|
88
|
-
line-height:
|
|
105
|
+
gap: 0.45rem;
|
|
106
|
+
padding: 0 1.2rem;
|
|
107
|
+
height: var(--ui-touch-min);
|
|
108
|
+
min-width: var(--ui-touch-min);
|
|
109
|
+
border: 1px solid transparent;
|
|
110
|
+
border-radius: var(--ui-radius);
|
|
111
|
+
font-family: var(--ui-font);
|
|
112
|
+
font-size: 0.9rem;
|
|
113
|
+
font-weight: 600;
|
|
114
|
+
line-height: 1;
|
|
89
115
|
text-decoration: none;
|
|
90
|
-
white-space:
|
|
91
|
-
cursor:
|
|
92
|
-
transition:
|
|
116
|
+
white-space: nowrap;
|
|
117
|
+
cursor: pointer;
|
|
118
|
+
transition:
|
|
119
|
+
background 0.15s,
|
|
120
|
+
color 0.15s,
|
|
121
|
+
border-color 0.15s,
|
|
122
|
+
opacity 0.15s;
|
|
93
123
|
-webkit-font-smoothing: antialiased;
|
|
94
124
|
}
|
|
95
125
|
|
|
96
126
|
/* Variants */
|
|
97
127
|
.ui-btn--primary {
|
|
98
128
|
background: var(--ui-accent);
|
|
99
|
-
color:
|
|
129
|
+
color: var(--ui-bg);
|
|
100
130
|
}
|
|
101
131
|
.ui-btn--primary:hover:not(.ui-btn--disabled):not([disabled]) {
|
|
102
132
|
background: var(--ui-accent-hover);
|
|
103
133
|
}
|
|
104
134
|
|
|
105
135
|
.ui-btn--secondary {
|
|
106
|
-
background:
|
|
107
|
-
color:
|
|
136
|
+
background: var(--ui-surface-2);
|
|
137
|
+
color: var(--ui-text);
|
|
108
138
|
border-color: var(--ui-muted);
|
|
109
139
|
}
|
|
110
140
|
.ui-btn--secondary:hover:not(.ui-btn--disabled):not([disabled]) {
|
|
111
|
-
background:
|
|
141
|
+
background: var(--ui-surface);
|
|
112
142
|
border-color: var(--ui-text);
|
|
113
143
|
}
|
|
114
144
|
|
|
115
145
|
.ui-btn--ghost {
|
|
116
146
|
background: transparent;
|
|
117
|
-
color:
|
|
118
|
-
border:
|
|
147
|
+
color: var(--ui-muted);
|
|
148
|
+
border: none;
|
|
119
149
|
}
|
|
120
150
|
.ui-btn--ghost:hover:not(.ui-btn--disabled):not([disabled]) {
|
|
121
151
|
background: var(--ui-surface-2);
|
|
122
|
-
color:
|
|
152
|
+
color: var(--ui-text);
|
|
123
153
|
}
|
|
124
154
|
|
|
125
155
|
.ui-btn--danger {
|
|
126
156
|
background: var(--ui-red-dim);
|
|
127
|
-
color:
|
|
157
|
+
color: var(--ui-red);
|
|
128
158
|
border-color: var(--ui-red);
|
|
129
159
|
}
|
|
130
160
|
.ui-btn--danger:hover:not(.ui-btn--disabled):not([disabled]) {
|
|
131
161
|
background: var(--ui-red);
|
|
132
|
-
color:
|
|
162
|
+
color: var(--ui-bg);
|
|
133
163
|
}
|
|
134
164
|
|
|
135
165
|
/* Sizes */
|
|
136
166
|
.ui-btn--sm {
|
|
137
|
-
height:
|
|
138
|
-
padding:
|
|
139
|
-
font-size: .82rem;
|
|
167
|
+
height: 36px;
|
|
168
|
+
padding: 0 0.85rem;
|
|
169
|
+
font-size: 0.82rem;
|
|
140
170
|
min-width: 36px;
|
|
141
171
|
}
|
|
142
172
|
.ui-btn--lg {
|
|
143
|
-
height:
|
|
144
|
-
padding:
|
|
173
|
+
height: 52px;
|
|
174
|
+
padding: 0 1.75rem;
|
|
145
175
|
font-size: 1rem;
|
|
146
176
|
}
|
|
147
177
|
|
|
148
178
|
/* Modifiers */
|
|
149
|
-
.ui-btn--full
|
|
179
|
+
.ui-btn--full {
|
|
180
|
+
width: 100%;
|
|
181
|
+
}
|
|
150
182
|
.ui-btn--disabled,
|
|
151
183
|
.ui-btn[disabled] {
|
|
152
|
-
opacity: .45;
|
|
153
|
-
cursor:
|
|
184
|
+
opacity: 0.45;
|
|
185
|
+
cursor: not-allowed;
|
|
154
186
|
pointer-events: none;
|
|
155
187
|
}
|
|
156
188
|
|
|
157
189
|
.ui-btn-icon {
|
|
158
|
-
display:
|
|
190
|
+
display: inline-flex;
|
|
159
191
|
align-items: center;
|
|
160
192
|
flex-shrink: 0;
|
|
161
193
|
}
|
|
162
194
|
|
|
163
195
|
/* ─── Badge ──────────────────────────────────────────────────────────────── */
|
|
164
196
|
.ui-badge {
|
|
165
|
-
display:
|
|
166
|
-
align-items:
|
|
167
|
-
align-self:
|
|
168
|
-
padding:
|
|
169
|
-
border-radius:
|
|
170
|
-
font-family:
|
|
171
|
-
font-size:
|
|
172
|
-
font-weight:
|
|
173
|
-
line-height:
|
|
174
|
-
white-space:
|
|
175
|
-
letter-spacing: .02em;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
.ui-badge--default {
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
.ui-badge--
|
|
197
|
+
display: inline-flex;
|
|
198
|
+
align-items: center;
|
|
199
|
+
align-self: flex-start;
|
|
200
|
+
padding: 0.3em 0.55em;
|
|
201
|
+
border-radius: var(--ui-radius-sm);
|
|
202
|
+
font-family: var(--ui-font);
|
|
203
|
+
font-size: 0.72rem;
|
|
204
|
+
font-weight: 600;
|
|
205
|
+
line-height: 1;
|
|
206
|
+
white-space: nowrap;
|
|
207
|
+
letter-spacing: 0.02em;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.ui-badge--default {
|
|
211
|
+
background: var(--ui-surface-2);
|
|
212
|
+
color: var(--ui-muted);
|
|
213
|
+
}
|
|
214
|
+
.ui-badge--success {
|
|
215
|
+
background: var(--ui-green-dim);
|
|
216
|
+
color: var(--ui-green);
|
|
217
|
+
}
|
|
218
|
+
.ui-badge--warning {
|
|
219
|
+
background: var(--ui-yellow-dim);
|
|
220
|
+
color: var(--ui-yellow);
|
|
221
|
+
}
|
|
222
|
+
.ui-badge--error {
|
|
223
|
+
background: var(--ui-red-dim);
|
|
224
|
+
color: var(--ui-red);
|
|
225
|
+
}
|
|
226
|
+
.ui-badge--info {
|
|
227
|
+
background: var(--ui-blue-dim);
|
|
228
|
+
color: var(--ui-blue);
|
|
229
|
+
}
|
|
183
230
|
|
|
184
231
|
/* ─── Card ───────────────────────────────────────────────────────────────── */
|
|
185
232
|
.ui-card {
|
|
186
|
-
background:
|
|
187
|
-
border:
|
|
233
|
+
background: var(--ui-surface);
|
|
234
|
+
border: 1px solid var(--ui-border);
|
|
188
235
|
border-radius: var(--ui-radius);
|
|
189
|
-
overflow:
|
|
236
|
+
overflow: hidden;
|
|
190
237
|
}
|
|
191
238
|
|
|
192
239
|
.ui-card-header {
|
|
193
|
-
padding:
|
|
240
|
+
padding: 1rem 1.25rem;
|
|
194
241
|
border-bottom: 1px solid var(--ui-border);
|
|
195
242
|
}
|
|
196
243
|
|
|
197
244
|
.ui-card-title {
|
|
198
|
-
margin:
|
|
199
|
-
font-size:
|
|
245
|
+
margin: 0;
|
|
246
|
+
font-size: 0.95rem;
|
|
200
247
|
font-weight: 600;
|
|
201
|
-
color:
|
|
248
|
+
color: var(--ui-text);
|
|
202
249
|
line-height: 1.4;
|
|
203
250
|
}
|
|
204
251
|
|
|
205
|
-
.ui-card-body {
|
|
252
|
+
.ui-card-body {
|
|
253
|
+
padding: 1.25rem;
|
|
254
|
+
}
|
|
206
255
|
|
|
207
|
-
.ui-card--flush .ui-card-body {
|
|
256
|
+
.ui-card--flush .ui-card-body {
|
|
257
|
+
padding: 0;
|
|
258
|
+
}
|
|
208
259
|
|
|
209
260
|
.ui-card-footer {
|
|
210
|
-
padding:
|
|
261
|
+
padding: 1rem 1.25rem;
|
|
211
262
|
border-top: 1px solid var(--ui-border);
|
|
212
263
|
background: var(--ui-surface-2);
|
|
213
264
|
}
|
|
@@ -217,91 +268,101 @@ html, body {
|
|
|
217
268
|
============================================================ */
|
|
218
269
|
|
|
219
270
|
.ui-fieldset {
|
|
220
|
-
border:
|
|
271
|
+
border: 1px solid var(--ui-border);
|
|
221
272
|
border-radius: var(--ui-radius);
|
|
222
|
-
padding:
|
|
223
|
-
margin:
|
|
273
|
+
padding: 0;
|
|
274
|
+
margin: 0;
|
|
224
275
|
}
|
|
225
276
|
|
|
226
277
|
.ui-fieldset-legend {
|
|
227
|
-
margin-left:
|
|
228
|
-
padding:
|
|
229
|
-
font-size:
|
|
230
|
-
font-weight:
|
|
231
|
-
letter-spacing:
|
|
232
|
-
text-transform:
|
|
233
|
-
color:
|
|
234
|
-
line-height:
|
|
278
|
+
margin-left: 1rem;
|
|
279
|
+
padding: 0 0.375rem;
|
|
280
|
+
font-size: 0.75rem;
|
|
281
|
+
font-weight: 600;
|
|
282
|
+
letter-spacing: 0.06em;
|
|
283
|
+
text-transform: uppercase;
|
|
284
|
+
color: var(--ui-muted);
|
|
285
|
+
line-height: 1;
|
|
235
286
|
}
|
|
236
287
|
|
|
237
288
|
.ui-fieldset-body {
|
|
238
|
-
display:
|
|
289
|
+
display: flex;
|
|
239
290
|
flex-direction: column;
|
|
240
|
-
gap:
|
|
241
|
-
padding:
|
|
291
|
+
gap: 1rem;
|
|
292
|
+
padding: 1.25rem;
|
|
242
293
|
}
|
|
243
294
|
|
|
244
|
-
.ui-fieldset--gap-xs .ui-fieldset-body {
|
|
245
|
-
|
|
246
|
-
|
|
295
|
+
.ui-fieldset--gap-xs .ui-fieldset-body {
|
|
296
|
+
gap: 0.375rem;
|
|
297
|
+
}
|
|
298
|
+
.ui-fieldset--gap-sm .ui-fieldset-body {
|
|
299
|
+
gap: 0.625rem;
|
|
300
|
+
}
|
|
301
|
+
.ui-fieldset--gap-lg .ui-fieldset-body {
|
|
302
|
+
gap: 1.5rem;
|
|
303
|
+
}
|
|
247
304
|
|
|
248
305
|
/* ─── Form fields (shared base) ──────────────────────────────────────────── */
|
|
249
306
|
.ui-field {
|
|
250
|
-
display:
|
|
307
|
+
display: flex;
|
|
251
308
|
flex-direction: column;
|
|
252
|
-
gap:
|
|
309
|
+
gap: 0.4rem;
|
|
253
310
|
}
|
|
254
311
|
|
|
255
312
|
.ui-label {
|
|
256
313
|
font-family: var(--ui-font);
|
|
257
|
-
font-size:
|
|
314
|
+
font-size: 0.85rem;
|
|
258
315
|
font-weight: 600;
|
|
259
|
-
color:
|
|
316
|
+
color: var(--ui-text);
|
|
260
317
|
line-height: 1.4;
|
|
261
318
|
}
|
|
262
319
|
|
|
263
320
|
.ui-required {
|
|
264
|
-
color:
|
|
265
|
-
margin-left: .15rem;
|
|
321
|
+
color: var(--ui-red);
|
|
322
|
+
margin-left: 0.15rem;
|
|
266
323
|
}
|
|
267
324
|
|
|
268
325
|
.ui-hint {
|
|
269
|
-
font-size:
|
|
270
|
-
color:
|
|
271
|
-
margin:
|
|
326
|
+
font-size: 0.8rem;
|
|
327
|
+
color: var(--ui-muted);
|
|
328
|
+
margin: 0;
|
|
272
329
|
line-height: 1.5;
|
|
273
330
|
}
|
|
274
331
|
|
|
275
332
|
.ui-error {
|
|
276
|
-
font-size:
|
|
277
|
-
color:
|
|
278
|
-
margin:
|
|
333
|
+
font-size: 0.8rem;
|
|
334
|
+
color: var(--ui-red);
|
|
335
|
+
margin: 0;
|
|
279
336
|
line-height: 1.5;
|
|
280
337
|
}
|
|
281
338
|
|
|
282
339
|
/* ─── Input ──────────────────────────────────────────────────────────────── */
|
|
283
340
|
.ui-input {
|
|
284
|
-
width:
|
|
285
|
-
height:
|
|
286
|
-
padding:
|
|
287
|
-
background:
|
|
288
|
-
border:
|
|
341
|
+
width: 100%;
|
|
342
|
+
height: var(--ui-touch-min);
|
|
343
|
+
padding: 0 0.85rem;
|
|
344
|
+
background: var(--ui-surface);
|
|
345
|
+
border: 1px solid var(--ui-border);
|
|
289
346
|
border-radius: var(--ui-radius);
|
|
290
|
-
font-family:
|
|
291
|
-
font-size:
|
|
292
|
-
color:
|
|
293
|
-
transition:
|
|
294
|
-
appearance:
|
|
347
|
+
font-family: var(--ui-font);
|
|
348
|
+
font-size: 0.9rem;
|
|
349
|
+
color: var(--ui-text);
|
|
350
|
+
transition: border-color 0.15s;
|
|
351
|
+
appearance: none;
|
|
295
352
|
-webkit-appearance: none;
|
|
296
353
|
}
|
|
297
354
|
|
|
298
|
-
.ui-input::placeholder {
|
|
355
|
+
.ui-input::placeholder {
|
|
356
|
+
color: var(--ui-muted);
|
|
357
|
+
}
|
|
299
358
|
|
|
300
|
-
.ui-input:hover:not(:disabled) {
|
|
359
|
+
.ui-input:hover:not(:disabled) {
|
|
360
|
+
border-color: var(--ui-muted);
|
|
361
|
+
}
|
|
301
362
|
|
|
302
363
|
.ui-input:disabled {
|
|
303
|
-
opacity: .5;
|
|
304
|
-
cursor:
|
|
364
|
+
opacity: 0.5;
|
|
365
|
+
cursor: not-allowed;
|
|
305
366
|
}
|
|
306
367
|
|
|
307
368
|
.ui-field--error .ui-input {
|
|
@@ -311,246 +372,315 @@ html, body {
|
|
|
311
372
|
/* ─── Search ─────────────────────────────────────────────────────────────── */
|
|
312
373
|
.ui-search-wrap {
|
|
313
374
|
position: relative;
|
|
314
|
-
display:
|
|
375
|
+
display: flex;
|
|
315
376
|
align-items: center;
|
|
316
377
|
}
|
|
317
378
|
|
|
318
379
|
.ui-search-icon {
|
|
319
|
-
position:
|
|
320
|
-
left:
|
|
321
|
-
display:
|
|
380
|
+
position: absolute;
|
|
381
|
+
left: 0.75rem;
|
|
382
|
+
display: flex;
|
|
322
383
|
align-items: center;
|
|
323
|
-
color:
|
|
384
|
+
color: var(--ui-muted);
|
|
324
385
|
pointer-events: none;
|
|
325
386
|
}
|
|
326
387
|
|
|
327
388
|
.ui-search-input {
|
|
328
|
-
width:
|
|
329
|
-
height:
|
|
330
|
-
padding:
|
|
331
|
-
background:
|
|
332
|
-
border:
|
|
389
|
+
width: 100%;
|
|
390
|
+
height: var(--ui-touch-min);
|
|
391
|
+
padding: 0 2.5rem 0 2.5rem;
|
|
392
|
+
background: var(--ui-surface);
|
|
393
|
+
border: 1px solid var(--ui-border);
|
|
333
394
|
border-radius: var(--ui-radius);
|
|
334
|
-
font-family:
|
|
335
|
-
font-size:
|
|
336
|
-
color:
|
|
337
|
-
transition:
|
|
338
|
-
appearance:
|
|
395
|
+
font-family: var(--ui-font);
|
|
396
|
+
font-size: 0.9rem;
|
|
397
|
+
color: var(--ui-text);
|
|
398
|
+
transition: border-color 0.15s;
|
|
399
|
+
appearance: none;
|
|
339
400
|
-webkit-appearance: none;
|
|
340
401
|
}
|
|
341
402
|
|
|
342
|
-
.ui-search-input::placeholder {
|
|
403
|
+
.ui-search-input::placeholder {
|
|
404
|
+
color: var(--ui-muted);
|
|
405
|
+
}
|
|
343
406
|
|
|
344
|
-
.ui-search-input:hover:not(:disabled) {
|
|
407
|
+
.ui-search-input:hover:not(:disabled) {
|
|
408
|
+
border-color: var(--ui-muted);
|
|
409
|
+
}
|
|
345
410
|
|
|
346
|
-
.ui-search-input:disabled {
|
|
411
|
+
.ui-search-input:disabled {
|
|
412
|
+
opacity: 0.5;
|
|
413
|
+
cursor: not-allowed;
|
|
414
|
+
}
|
|
347
415
|
|
|
348
416
|
/* Hide native browser cancel button — the component provides its own */
|
|
349
|
-
.ui-search-input::-webkit-search-cancel-button {
|
|
417
|
+
.ui-search-input::-webkit-search-cancel-button {
|
|
418
|
+
display: none;
|
|
419
|
+
}
|
|
350
420
|
|
|
351
421
|
.ui-search-clear {
|
|
352
|
-
position:
|
|
353
|
-
right:
|
|
354
|
-
display:
|
|
422
|
+
position: absolute;
|
|
423
|
+
right: 0.5rem;
|
|
424
|
+
display: flex;
|
|
355
425
|
align-items: center;
|
|
356
426
|
justify-content: center;
|
|
357
|
-
width:
|
|
358
|
-
height:
|
|
359
|
-
padding:
|
|
360
|
-
background:
|
|
361
|
-
border:
|
|
427
|
+
width: 1.75rem;
|
|
428
|
+
height: 1.75rem;
|
|
429
|
+
padding: 0;
|
|
430
|
+
background: transparent;
|
|
431
|
+
border: none;
|
|
362
432
|
border-radius: var(--ui-radius-sm);
|
|
363
|
-
color:
|
|
364
|
-
cursor:
|
|
365
|
-
transition:
|
|
433
|
+
color: var(--ui-muted);
|
|
434
|
+
cursor: pointer;
|
|
435
|
+
transition:
|
|
436
|
+
color 0.15s,
|
|
437
|
+
background 0.15s;
|
|
366
438
|
}
|
|
367
439
|
|
|
368
|
-
.ui-search-clear:hover {
|
|
440
|
+
.ui-search-clear:hover {
|
|
441
|
+
color: var(--ui-text);
|
|
442
|
+
background: var(--ui-surface-2);
|
|
443
|
+
}
|
|
369
444
|
|
|
370
445
|
/* ─── Select ─────────────────────────────────────────────────────────────── */
|
|
371
446
|
.ui-select-wrap {
|
|
372
447
|
position: relative;
|
|
373
|
-
display:
|
|
448
|
+
display: flex;
|
|
374
449
|
}
|
|
375
450
|
|
|
376
451
|
.ui-select {
|
|
377
|
-
width:
|
|
378
|
-
height:
|
|
379
|
-
padding:
|
|
380
|
-
background:
|
|
381
|
-
border:
|
|
452
|
+
width: 100%;
|
|
453
|
+
height: var(--ui-touch-min);
|
|
454
|
+
padding: 0 2.5rem 0 0.85rem;
|
|
455
|
+
background: var(--ui-surface);
|
|
456
|
+
border: 1px solid var(--ui-border);
|
|
382
457
|
border-radius: var(--ui-radius);
|
|
383
|
-
font-family:
|
|
384
|
-
font-size:
|
|
385
|
-
color:
|
|
386
|
-
cursor:
|
|
387
|
-
appearance:
|
|
458
|
+
font-family: var(--ui-font);
|
|
459
|
+
font-size: 0.9rem;
|
|
460
|
+
color: var(--ui-text);
|
|
461
|
+
cursor: pointer;
|
|
462
|
+
appearance: none;
|
|
388
463
|
-webkit-appearance: none;
|
|
389
|
-
transition:
|
|
464
|
+
transition: border-color 0.15s;
|
|
390
465
|
}
|
|
391
466
|
|
|
392
|
-
.ui-select:hover:not(:disabled) {
|
|
467
|
+
.ui-select:hover:not(:disabled) {
|
|
468
|
+
border-color: var(--ui-muted);
|
|
469
|
+
}
|
|
393
470
|
|
|
394
471
|
.ui-select:disabled {
|
|
395
|
-
opacity: .5;
|
|
396
|
-
cursor:
|
|
472
|
+
opacity: 0.5;
|
|
473
|
+
cursor: not-allowed;
|
|
397
474
|
}
|
|
398
475
|
|
|
399
|
-
.ui-field--error .ui-select {
|
|
476
|
+
.ui-field--error .ui-select {
|
|
477
|
+
border-color: var(--ui-red);
|
|
478
|
+
}
|
|
400
479
|
|
|
401
480
|
.ui-select-chevron {
|
|
402
|
-
position:
|
|
403
|
-
right:
|
|
404
|
-
top:
|
|
405
|
-
transform:
|
|
406
|
-
pointer-events:
|
|
407
|
-
color:
|
|
408
|
-
display:
|
|
409
|
-
align-items:
|
|
481
|
+
position: absolute;
|
|
482
|
+
right: 0.85rem;
|
|
483
|
+
top: 50%;
|
|
484
|
+
transform: translateY(-50%);
|
|
485
|
+
pointer-events: none;
|
|
486
|
+
color: var(--ui-muted);
|
|
487
|
+
display: flex;
|
|
488
|
+
align-items: center;
|
|
410
489
|
}
|
|
411
490
|
|
|
412
491
|
/* ─── Textarea ───────────────────────────────────────────────────────────── */
|
|
413
492
|
.ui-textarea {
|
|
414
|
-
width:
|
|
415
|
-
padding:
|
|
416
|
-
background:
|
|
417
|
-
border:
|
|
493
|
+
width: 100%;
|
|
494
|
+
padding: 0.65rem 0.85rem;
|
|
495
|
+
background: var(--ui-surface);
|
|
496
|
+
border: 1px solid var(--ui-border);
|
|
418
497
|
border-radius: var(--ui-radius);
|
|
419
|
-
font-family:
|
|
420
|
-
font-size:
|
|
421
|
-
color:
|
|
422
|
-
resize:
|
|
423
|
-
transition:
|
|
424
|
-
min-height:
|
|
425
|
-
appearance:
|
|
498
|
+
font-family: var(--ui-font);
|
|
499
|
+
font-size: 0.9rem;
|
|
500
|
+
color: var(--ui-text);
|
|
501
|
+
resize: vertical;
|
|
502
|
+
transition: border-color 0.15s;
|
|
503
|
+
min-height: calc(var(--ui-touch-min) * 2);
|
|
504
|
+
appearance: none;
|
|
426
505
|
}
|
|
427
506
|
|
|
428
|
-
.ui-textarea::placeholder {
|
|
507
|
+
.ui-textarea::placeholder {
|
|
508
|
+
color: var(--ui-muted);
|
|
509
|
+
}
|
|
429
510
|
|
|
430
|
-
.ui-textarea:hover:not(:disabled) {
|
|
511
|
+
.ui-textarea:hover:not(:disabled) {
|
|
512
|
+
border-color: var(--ui-muted);
|
|
513
|
+
}
|
|
431
514
|
|
|
432
515
|
.ui-textarea:disabled {
|
|
433
|
-
opacity: .5;
|
|
434
|
-
cursor:
|
|
516
|
+
opacity: 0.5;
|
|
517
|
+
cursor: not-allowed;
|
|
435
518
|
}
|
|
436
519
|
|
|
437
|
-
.ui-field--error .ui-textarea {
|
|
520
|
+
.ui-field--error .ui-textarea {
|
|
521
|
+
border-color: var(--ui-red);
|
|
522
|
+
}
|
|
438
523
|
|
|
439
524
|
/* ─── Alert ──────────────────────────────────────────────────────────────── */
|
|
440
525
|
.ui-alert {
|
|
441
|
-
display:
|
|
442
|
-
align-items:
|
|
443
|
-
gap:
|
|
444
|
-
padding:
|
|
526
|
+
display: flex;
|
|
527
|
+
align-items: flex-start;
|
|
528
|
+
gap: 0.75rem;
|
|
529
|
+
padding: 0.85rem 1rem;
|
|
445
530
|
border-radius: var(--ui-radius);
|
|
446
|
-
border:
|
|
447
|
-
font-size:
|
|
448
|
-
line-height:
|
|
531
|
+
border: 1px solid transparent;
|
|
532
|
+
font-size: 0.88rem;
|
|
533
|
+
line-height: 1.6;
|
|
449
534
|
}
|
|
450
535
|
|
|
451
|
-
.ui-alert--info
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
536
|
+
.ui-alert--info {
|
|
537
|
+
background: var(--ui-blue-dim);
|
|
538
|
+
border-color: var(--ui-blue);
|
|
539
|
+
color: var(--ui-blue);
|
|
540
|
+
}
|
|
541
|
+
.ui-alert--success {
|
|
542
|
+
background: var(--ui-green-dim);
|
|
543
|
+
border-color: var(--ui-green);
|
|
544
|
+
color: var(--ui-green);
|
|
545
|
+
}
|
|
546
|
+
.ui-alert--warning {
|
|
547
|
+
background: var(--ui-yellow-dim);
|
|
548
|
+
border-color: var(--ui-yellow);
|
|
549
|
+
color: var(--ui-yellow);
|
|
550
|
+
}
|
|
551
|
+
.ui-alert--error {
|
|
552
|
+
background: var(--ui-red-dim);
|
|
553
|
+
border-color: var(--ui-red);
|
|
554
|
+
color: var(--ui-red);
|
|
555
|
+
}
|
|
455
556
|
|
|
456
557
|
.ui-alert-icon {
|
|
457
|
-
display:
|
|
558
|
+
display: flex;
|
|
458
559
|
align-items: center;
|
|
459
560
|
flex-shrink: 0;
|
|
460
|
-
margin-top:
|
|
561
|
+
margin-top: 0.1rem;
|
|
461
562
|
}
|
|
462
563
|
|
|
463
|
-
.ui-alert-body {
|
|
564
|
+
.ui-alert-body {
|
|
565
|
+
color: var(--ui-text);
|
|
566
|
+
}
|
|
464
567
|
|
|
465
|
-
.ui-alert-title {
|
|
568
|
+
.ui-alert-title {
|
|
569
|
+
font-weight: 600;
|
|
570
|
+
}
|
|
466
571
|
|
|
467
572
|
/* ─── Stat ───────────────────────────────────────────────────────────────── */
|
|
468
573
|
.ui-stat {
|
|
469
|
-
display:
|
|
574
|
+
display: flex;
|
|
470
575
|
flex-direction: column;
|
|
471
|
-
gap:
|
|
576
|
+
gap: 0.3rem;
|
|
472
577
|
}
|
|
473
578
|
|
|
474
579
|
.ui-stat-label {
|
|
475
|
-
font-size:
|
|
476
|
-
color:
|
|
580
|
+
font-size: 0.8rem;
|
|
581
|
+
color: var(--ui-muted);
|
|
477
582
|
font-weight: 500;
|
|
478
|
-
margin:
|
|
583
|
+
margin: 0;
|
|
479
584
|
}
|
|
480
585
|
|
|
481
586
|
.ui-stat-value {
|
|
482
|
-
font-size:
|
|
587
|
+
font-size: 2rem;
|
|
483
588
|
font-weight: 700;
|
|
484
|
-
color:
|
|
589
|
+
color: var(--ui-text);
|
|
485
590
|
line-height: 1;
|
|
486
|
-
margin:
|
|
487
|
-
letter-spacing:
|
|
591
|
+
margin: 0;
|
|
592
|
+
letter-spacing: -0.02em;
|
|
488
593
|
}
|
|
489
594
|
|
|
490
595
|
.ui-stat-change {
|
|
491
|
-
display:
|
|
596
|
+
display: inline-flex;
|
|
492
597
|
align-items: center;
|
|
493
|
-
gap:
|
|
494
|
-
font-size:
|
|
598
|
+
gap: 0.3rem;
|
|
599
|
+
font-size: 0.8rem;
|
|
495
600
|
font-weight: 600;
|
|
496
|
-
margin:
|
|
601
|
+
margin: 0;
|
|
497
602
|
}
|
|
498
603
|
|
|
499
|
-
.ui-stat-change--up
|
|
500
|
-
|
|
501
|
-
|
|
604
|
+
.ui-stat-change--up {
|
|
605
|
+
color: var(--ui-green);
|
|
606
|
+
}
|
|
607
|
+
.ui-stat-change--down {
|
|
608
|
+
color: var(--ui-red);
|
|
609
|
+
}
|
|
610
|
+
.ui-stat-change--neutral {
|
|
611
|
+
color: var(--ui-muted);
|
|
612
|
+
}
|
|
502
613
|
|
|
503
|
-
.ui-stat--center {
|
|
614
|
+
.ui-stat--center {
|
|
615
|
+
align-items: center;
|
|
616
|
+
text-align: center;
|
|
617
|
+
}
|
|
504
618
|
|
|
505
619
|
/* ─── Avatar ─────────────────────────────────────────────────────────────── */
|
|
506
620
|
.ui-avatar {
|
|
507
|
-
display:
|
|
508
|
-
align-items:
|
|
621
|
+
display: inline-flex;
|
|
622
|
+
align-items: center;
|
|
509
623
|
justify-content: center;
|
|
510
|
-
border-radius:
|
|
511
|
-
overflow:
|
|
512
|
-
background:
|
|
513
|
-
color:
|
|
514
|
-
font-family:
|
|
515
|
-
font-weight:
|
|
516
|
-
flex-shrink:
|
|
517
|
-
object-fit:
|
|
624
|
+
border-radius: 50%;
|
|
625
|
+
overflow: hidden;
|
|
626
|
+
background: var(--ui-accent-dim);
|
|
627
|
+
color: var(--ui-accent);
|
|
628
|
+
font-family: var(--ui-font);
|
|
629
|
+
font-weight: 700;
|
|
630
|
+
flex-shrink: 0;
|
|
631
|
+
object-fit: cover;
|
|
518
632
|
}
|
|
519
633
|
|
|
520
|
-
.ui-avatar--sm {
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
634
|
+
.ui-avatar--sm {
|
|
635
|
+
width: 28px;
|
|
636
|
+
height: 28px;
|
|
637
|
+
font-size: 0.65rem;
|
|
638
|
+
}
|
|
639
|
+
.ui-avatar--md {
|
|
640
|
+
width: 40px;
|
|
641
|
+
height: 40px;
|
|
642
|
+
font-size: 0.85rem;
|
|
643
|
+
}
|
|
644
|
+
.ui-avatar--lg {
|
|
645
|
+
width: 56px;
|
|
646
|
+
height: 56px;
|
|
647
|
+
font-size: 1.1rem;
|
|
648
|
+
}
|
|
649
|
+
.ui-avatar--xl {
|
|
650
|
+
width: 80px;
|
|
651
|
+
height: 80px;
|
|
652
|
+
font-size: 1.5rem;
|
|
653
|
+
}
|
|
524
654
|
|
|
525
655
|
/* ─── Empty state ────────────────────────────────────────────────────────── */
|
|
526
656
|
.ui-empty {
|
|
527
|
-
display:
|
|
657
|
+
display: flex;
|
|
528
658
|
flex-direction: column;
|
|
529
|
-
align-items:
|
|
530
|
-
text-align:
|
|
531
|
-
gap:
|
|
532
|
-
padding:
|
|
659
|
+
align-items: center;
|
|
660
|
+
text-align: center;
|
|
661
|
+
gap: 0.75rem;
|
|
662
|
+
padding: 3rem 1.5rem;
|
|
533
663
|
}
|
|
534
664
|
|
|
535
665
|
.ui-empty-title {
|
|
536
|
-
font-size:
|
|
666
|
+
font-size: 1.05rem;
|
|
537
667
|
font-weight: 600;
|
|
538
|
-
color:
|
|
539
|
-
margin:
|
|
668
|
+
color: var(--ui-text);
|
|
669
|
+
margin: 0;
|
|
540
670
|
}
|
|
541
671
|
|
|
542
672
|
.ui-empty-desc {
|
|
543
|
-
font-size:
|
|
544
|
-
color:
|
|
545
|
-
max-width:
|
|
546
|
-
margin:
|
|
673
|
+
font-size: 0.88rem;
|
|
674
|
+
color: var(--ui-muted);
|
|
675
|
+
max-width: 36ch;
|
|
676
|
+
margin: 0;
|
|
547
677
|
line-height: 1.6;
|
|
548
678
|
}
|
|
549
679
|
|
|
550
680
|
/* ─── Table ──────────────────────────────────────────────────────────────── */
|
|
551
681
|
.ui-table-wrap {
|
|
552
|
-
overflow-x:
|
|
553
|
-
border:
|
|
682
|
+
overflow-x: auto;
|
|
683
|
+
border: 1px solid var(--ui-border);
|
|
554
684
|
border-radius: var(--ui-radius);
|
|
555
685
|
/* Explicit outline for keyboard-scrollable region */
|
|
556
686
|
}
|
|
@@ -561,200 +691,314 @@ html, body {
|
|
|
561
691
|
}
|
|
562
692
|
|
|
563
693
|
.ui-table {
|
|
564
|
-
width:
|
|
694
|
+
width: 100%;
|
|
565
695
|
border-collapse: collapse;
|
|
566
|
-
font-size:
|
|
696
|
+
font-size: 0.88rem;
|
|
567
697
|
}
|
|
568
698
|
|
|
569
699
|
.ui-table-caption {
|
|
570
700
|
caption-side: top;
|
|
571
|
-
text-align:
|
|
572
|
-
padding:
|
|
573
|
-
font-size:
|
|
574
|
-
font-weight:
|
|
575
|
-
color:
|
|
701
|
+
text-align: left;
|
|
702
|
+
padding: 0.75rem 1rem;
|
|
703
|
+
font-size: 0.8rem;
|
|
704
|
+
font-weight: 600;
|
|
705
|
+
color: var(--ui-muted);
|
|
576
706
|
text-transform: uppercase;
|
|
577
|
-
letter-spacing: .06em;
|
|
707
|
+
letter-spacing: 0.06em;
|
|
578
708
|
border-bottom: 1px solid var(--ui-border);
|
|
579
709
|
}
|
|
580
710
|
|
|
581
711
|
.ui-table thead th {
|
|
582
|
-
padding:
|
|
583
|
-
text-align:
|
|
584
|
-
font-size:
|
|
585
|
-
font-weight:
|
|
586
|
-
color:
|
|
712
|
+
padding: 0.65rem 1rem;
|
|
713
|
+
text-align: left;
|
|
714
|
+
font-size: 0.78rem;
|
|
715
|
+
font-weight: 600;
|
|
716
|
+
color: var(--ui-muted);
|
|
587
717
|
text-transform: uppercase;
|
|
588
|
-
letter-spacing: .06em;
|
|
589
|
-
border-bottom:
|
|
590
|
-
background:
|
|
591
|
-
white-space:
|
|
718
|
+
letter-spacing: 0.06em;
|
|
719
|
+
border-bottom: 1px solid var(--ui-border);
|
|
720
|
+
background: var(--ui-surface-2);
|
|
721
|
+
white-space: nowrap;
|
|
592
722
|
}
|
|
593
723
|
|
|
594
724
|
.ui-table tbody td {
|
|
595
|
-
padding:
|
|
725
|
+
padding: 0.75rem 1rem;
|
|
596
726
|
border-bottom: 1px solid var(--ui-border);
|
|
597
|
-
color:
|
|
727
|
+
color: var(--ui-text);
|
|
598
728
|
vertical-align: top;
|
|
599
|
-
line-height:
|
|
729
|
+
line-height: 1.5;
|
|
600
730
|
}
|
|
601
731
|
|
|
602
|
-
.ui-table tbody tr:last-child td {
|
|
732
|
+
.ui-table tbody tr:last-child td {
|
|
733
|
+
border-bottom: none;
|
|
734
|
+
}
|
|
603
735
|
|
|
604
|
-
.ui-table tbody tr:nth-child(even) {
|
|
736
|
+
.ui-table tbody tr:nth-child(even) {
|
|
737
|
+
background: var(--ui-surface-2);
|
|
738
|
+
}
|
|
605
739
|
|
|
606
740
|
/* ─── Container ──────────────────────────────────────────────────────────── */
|
|
607
|
-
.ui-container {
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
741
|
+
.ui-container {
|
|
742
|
+
width: 100%;
|
|
743
|
+
margin-left: auto;
|
|
744
|
+
margin-right: auto;
|
|
745
|
+
padding-left: 1.5rem;
|
|
746
|
+
padding-right: 1.5rem;
|
|
747
|
+
}
|
|
748
|
+
.ui-container--sm {
|
|
749
|
+
max-width: 640px;
|
|
750
|
+
}
|
|
751
|
+
.ui-container--md {
|
|
752
|
+
max-width: 768px;
|
|
753
|
+
}
|
|
754
|
+
.ui-container--lg {
|
|
755
|
+
max-width: 1100px;
|
|
756
|
+
}
|
|
757
|
+
.ui-container--xl {
|
|
758
|
+
max-width: 1280px;
|
|
759
|
+
}
|
|
612
760
|
|
|
613
761
|
/* ─── Section ────────────────────────────────────────────────────────────── */
|
|
614
|
-
.ui-section
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
.ui-section--
|
|
762
|
+
.ui-section {
|
|
763
|
+
padding-top: 5rem;
|
|
764
|
+
padding-bottom: 5rem;
|
|
765
|
+
}
|
|
766
|
+
.ui-section--sm {
|
|
767
|
+
padding-top: 3rem;
|
|
768
|
+
padding-bottom: 3rem;
|
|
769
|
+
}
|
|
770
|
+
.ui-section--lg {
|
|
771
|
+
padding-top: 7rem;
|
|
772
|
+
padding-bottom: 7rem;
|
|
773
|
+
}
|
|
774
|
+
.ui-section--alt {
|
|
775
|
+
background: var(--ui-surface, var(--surface, #111116));
|
|
776
|
+
}
|
|
777
|
+
.ui-section--dark {
|
|
778
|
+
background: var(--ui-surface-2, var(--surface-2, #18181f));
|
|
779
|
+
}
|
|
619
780
|
|
|
620
781
|
/* ─── Grid ───────────────────────────────────────────────────────────────── */
|
|
621
|
-
.ui-grid {
|
|
782
|
+
.ui-grid {
|
|
783
|
+
display: grid;
|
|
784
|
+
gap: 2rem;
|
|
785
|
+
}
|
|
622
786
|
|
|
623
|
-
.ui-grid--cols-1 {
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
.ui-grid--cols-
|
|
787
|
+
.ui-grid--cols-1 {
|
|
788
|
+
grid-template-columns: 1fr;
|
|
789
|
+
}
|
|
790
|
+
.ui-grid--cols-2 {
|
|
791
|
+
grid-template-columns: repeat(2, 1fr);
|
|
792
|
+
}
|
|
793
|
+
.ui-grid--cols-3 {
|
|
794
|
+
grid-template-columns: repeat(3, 1fr);
|
|
795
|
+
}
|
|
796
|
+
.ui-grid--cols-4 {
|
|
797
|
+
grid-template-columns: repeat(4, 1fr);
|
|
798
|
+
}
|
|
627
799
|
|
|
628
|
-
.ui-grid--gap-sm {
|
|
629
|
-
|
|
800
|
+
.ui-grid--gap-sm {
|
|
801
|
+
gap: 1rem;
|
|
802
|
+
}
|
|
803
|
+
.ui-grid--gap-lg {
|
|
804
|
+
gap: 3rem;
|
|
805
|
+
}
|
|
630
806
|
|
|
631
807
|
/* ─── Stack ──────────────────────────────────────────────────────────────── */
|
|
632
|
-
.ui-stack {
|
|
808
|
+
.ui-stack {
|
|
809
|
+
display: flex;
|
|
810
|
+
flex-direction: column;
|
|
811
|
+
gap: 1rem;
|
|
812
|
+
}
|
|
633
813
|
|
|
634
|
-
.ui-stack--gap-xs {
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
.ui-stack--gap-
|
|
814
|
+
.ui-stack--gap-xs {
|
|
815
|
+
gap: 0.25rem;
|
|
816
|
+
}
|
|
817
|
+
.ui-stack--gap-sm {
|
|
818
|
+
gap: 0.5rem;
|
|
819
|
+
}
|
|
820
|
+
.ui-stack--gap-lg {
|
|
821
|
+
gap: 2rem;
|
|
822
|
+
}
|
|
823
|
+
.ui-stack--gap-xl {
|
|
824
|
+
gap: 3rem;
|
|
825
|
+
}
|
|
638
826
|
|
|
639
|
-
.ui-stack--align-start
|
|
640
|
-
|
|
641
|
-
|
|
827
|
+
.ui-stack--align-start {
|
|
828
|
+
align-items: flex-start;
|
|
829
|
+
}
|
|
830
|
+
.ui-stack--align-center {
|
|
831
|
+
align-items: center;
|
|
832
|
+
}
|
|
833
|
+
.ui-stack--align-end {
|
|
834
|
+
align-items: flex-end;
|
|
835
|
+
}
|
|
642
836
|
|
|
643
837
|
/* ─── Cluster ────────────────────────────────────────────────────────────── */
|
|
644
|
-
.ui-cluster {
|
|
838
|
+
.ui-cluster {
|
|
839
|
+
display: flex;
|
|
840
|
+
flex-wrap: wrap;
|
|
841
|
+
align-items: center;
|
|
842
|
+
gap: 1rem;
|
|
843
|
+
}
|
|
645
844
|
|
|
646
|
-
.ui-cluster--gap-xs {
|
|
647
|
-
|
|
648
|
-
|
|
845
|
+
.ui-cluster--gap-xs {
|
|
846
|
+
gap: 0.25rem;
|
|
847
|
+
}
|
|
848
|
+
.ui-cluster--gap-sm {
|
|
849
|
+
gap: 0.5rem;
|
|
850
|
+
}
|
|
851
|
+
.ui-cluster--gap-lg {
|
|
852
|
+
gap: 2rem;
|
|
853
|
+
}
|
|
649
854
|
|
|
650
|
-
.ui-cluster--justify-center
|
|
651
|
-
|
|
652
|
-
|
|
855
|
+
.ui-cluster--justify-center {
|
|
856
|
+
justify-content: center;
|
|
857
|
+
}
|
|
858
|
+
.ui-cluster--justify-end {
|
|
859
|
+
justify-content: flex-end;
|
|
860
|
+
}
|
|
861
|
+
.ui-cluster--justify-between {
|
|
862
|
+
justify-content: space-between;
|
|
863
|
+
}
|
|
653
864
|
|
|
654
|
-
.ui-cluster--align-start {
|
|
655
|
-
|
|
865
|
+
.ui-cluster--align-start {
|
|
866
|
+
align-items: flex-start;
|
|
867
|
+
}
|
|
868
|
+
.ui-cluster--align-end {
|
|
869
|
+
align-items: flex-end;
|
|
870
|
+
}
|
|
656
871
|
|
|
657
|
-
.ui-cluster--nowrap {
|
|
872
|
+
.ui-cluster--nowrap {
|
|
873
|
+
flex-wrap: nowrap;
|
|
874
|
+
}
|
|
658
875
|
|
|
659
876
|
/* ─── Divider ────────────────────────────────────────────────────────────── */
|
|
660
877
|
hr.ui-divider {
|
|
661
|
-
border:
|
|
662
|
-
border-top:
|
|
663
|
-
margin:
|
|
878
|
+
border: none;
|
|
879
|
+
border-top: 1px solid var(--ui-border, var(--border, #222228));
|
|
880
|
+
margin: 0;
|
|
664
881
|
}
|
|
665
882
|
|
|
666
883
|
.ui-divider--label {
|
|
667
|
-
display:
|
|
884
|
+
display: flex;
|
|
668
885
|
align-items: center;
|
|
669
|
-
gap:
|
|
886
|
+
gap: 0.75rem;
|
|
670
887
|
}
|
|
671
888
|
|
|
672
889
|
.ui-divider-line {
|
|
673
|
-
flex:
|
|
674
|
-
height:
|
|
675
|
-
background:
|
|
676
|
-
display:
|
|
890
|
+
flex: 1;
|
|
891
|
+
height: 1px;
|
|
892
|
+
background: var(--ui-border, var(--border, #222228));
|
|
893
|
+
display: block;
|
|
677
894
|
}
|
|
678
895
|
|
|
679
896
|
.ui-divider-text {
|
|
680
|
-
font-size:
|
|
681
|
-
color:
|
|
682
|
-
white-space:
|
|
683
|
-
flex-shrink:
|
|
897
|
+
font-size: 0.8rem;
|
|
898
|
+
color: var(--ui-muted, var(--muted, #9090a0));
|
|
899
|
+
white-space: nowrap;
|
|
900
|
+
flex-shrink: 0;
|
|
684
901
|
}
|
|
685
902
|
|
|
686
903
|
/* ─── Banner ─────────────────────────────────────────────────────────────── */
|
|
687
904
|
.ui-banner {
|
|
688
|
-
padding:
|
|
689
|
-
text-align:
|
|
690
|
-
font-size:
|
|
905
|
+
padding: 0.625rem 1.5rem;
|
|
906
|
+
text-align: center;
|
|
907
|
+
font-size: 0.875rem;
|
|
691
908
|
font-weight: 500;
|
|
692
909
|
line-height: 1.5;
|
|
693
910
|
}
|
|
694
911
|
|
|
695
912
|
.ui-banner--info {
|
|
696
|
-
background: var(--ui-accent-dim, rgba(155,141,255
|
|
697
|
-
color:
|
|
913
|
+
background: var(--ui-accent-dim, rgba(155, 141, 255, 0.12));
|
|
914
|
+
color: var(--ui-accent, var(--accent, #9b8dff));
|
|
698
915
|
}
|
|
699
916
|
|
|
700
917
|
.ui-banner--promo {
|
|
701
918
|
background: var(--ui-accent, var(--accent, #9b8dff));
|
|
702
|
-
color:
|
|
919
|
+
color: #fff;
|
|
703
920
|
}
|
|
704
921
|
|
|
705
922
|
.ui-banner--warning {
|
|
706
|
-
background: rgba(255, 193, 7, .12);
|
|
707
|
-
color:
|
|
923
|
+
background: rgba(255, 193, 7, 0.12);
|
|
924
|
+
color: #ffc107;
|
|
708
925
|
}
|
|
709
926
|
|
|
710
927
|
/* ─── Media ──────────────────────────────────────────────────────────────── */
|
|
711
928
|
.ui-media {
|
|
712
|
-
display:
|
|
929
|
+
display: grid;
|
|
713
930
|
grid-template-columns: 1fr 1fr;
|
|
714
|
-
gap:
|
|
715
|
-
align-items:
|
|
931
|
+
gap: 3rem;
|
|
932
|
+
align-items: center;
|
|
716
933
|
}
|
|
717
934
|
|
|
718
|
-
.ui-media--reverse
|
|
719
|
-
|
|
935
|
+
.ui-media--reverse {
|
|
936
|
+
direction: rtl;
|
|
937
|
+
}
|
|
938
|
+
.ui-media--reverse > * {
|
|
939
|
+
direction: ltr;
|
|
940
|
+
}
|
|
720
941
|
|
|
721
|
-
.ui-media--align-start
|
|
942
|
+
.ui-media--align-start {
|
|
943
|
+
align-items: flex-start;
|
|
944
|
+
}
|
|
722
945
|
|
|
723
|
-
.ui-media--gap-sm {
|
|
724
|
-
|
|
946
|
+
.ui-media--gap-sm {
|
|
947
|
+
gap: 1.5rem;
|
|
948
|
+
}
|
|
949
|
+
.ui-media--gap-lg {
|
|
950
|
+
gap: 5rem;
|
|
951
|
+
}
|
|
725
952
|
|
|
726
|
-
.ui-media-image
|
|
727
|
-
|
|
953
|
+
.ui-media-image {
|
|
954
|
+
min-width: 0;
|
|
955
|
+
}
|
|
956
|
+
.ui-media-content {
|
|
957
|
+
min-width: 0;
|
|
958
|
+
}
|
|
728
959
|
|
|
729
960
|
.ui-media-image img {
|
|
730
|
-
width:
|
|
731
|
-
height:
|
|
961
|
+
width: 100%;
|
|
962
|
+
height: auto;
|
|
732
963
|
border-radius: var(--ui-radius, 8px);
|
|
733
|
-
display:
|
|
964
|
+
display: block;
|
|
734
965
|
}
|
|
735
966
|
|
|
736
967
|
/* ─── Hero ───────────────────────────────────────────────────────────────── */
|
|
737
|
-
.ui-hero {
|
|
738
|
-
|
|
739
|
-
|
|
968
|
+
.ui-hero {
|
|
969
|
+
padding: 5rem 1.5rem;
|
|
970
|
+
text-align: center;
|
|
971
|
+
}
|
|
972
|
+
.ui-hero--left {
|
|
973
|
+
text-align: left;
|
|
974
|
+
}
|
|
975
|
+
.ui-hero--sm {
|
|
976
|
+
padding-top: 2.5rem;
|
|
977
|
+
padding-bottom: 0;
|
|
978
|
+
}
|
|
740
979
|
|
|
741
|
-
.ui-hero-inner {
|
|
742
|
-
|
|
980
|
+
.ui-hero-inner {
|
|
981
|
+
max-width: 720px;
|
|
982
|
+
margin: 0 auto;
|
|
983
|
+
}
|
|
984
|
+
.ui-hero--left .ui-hero-inner {
|
|
985
|
+
margin: 0;
|
|
986
|
+
}
|
|
743
987
|
|
|
744
988
|
.ui-hero-eyebrow {
|
|
745
|
-
font-size: .78rem;
|
|
989
|
+
font-size: 0.78rem;
|
|
746
990
|
font-weight: 600;
|
|
747
|
-
letter-spacing: .08em;
|
|
991
|
+
letter-spacing: 0.08em;
|
|
748
992
|
text-transform: uppercase;
|
|
749
993
|
color: var(--ui-accent, var(--accent, #9b8dff));
|
|
750
|
-
margin: 0 0 .75rem;
|
|
994
|
+
margin: 0 0 0.75rem;
|
|
751
995
|
}
|
|
752
996
|
|
|
753
997
|
.ui-hero-title {
|
|
754
998
|
font-size: clamp(2.2rem, 6vw, 3.5rem);
|
|
755
999
|
font-weight: 800;
|
|
756
1000
|
line-height: 1.1;
|
|
757
|
-
letter-spacing:
|
|
1001
|
+
letter-spacing: -0.02em;
|
|
758
1002
|
color: var(--ui-text, var(--text, #e2e2ea));
|
|
759
1003
|
margin: 0 0 1.25rem;
|
|
760
1004
|
}
|
|
@@ -768,122 +1012,204 @@ hr.ui-divider {
|
|
|
768
1012
|
|
|
769
1013
|
.ui-hero-actions {
|
|
770
1014
|
display: flex;
|
|
771
|
-
gap: .75rem;
|
|
1015
|
+
gap: 0.75rem;
|
|
772
1016
|
flex-wrap: wrap;
|
|
773
1017
|
justify-content: center;
|
|
774
1018
|
}
|
|
775
|
-
.ui-hero--left .ui-hero-actions {
|
|
1019
|
+
.ui-hero--left .ui-hero-actions {
|
|
1020
|
+
justify-content: flex-start;
|
|
1021
|
+
}
|
|
776
1022
|
|
|
777
1023
|
/* ─── Testimonial ────────────────────────────────────────────────────────── */
|
|
778
1024
|
.ui-testimonial {
|
|
779
|
-
background:
|
|
780
|
-
border:
|
|
1025
|
+
background: var(--ui-surface, var(--surface, #111116));
|
|
1026
|
+
border: 1px solid var(--ui-border, var(--border, #222228));
|
|
781
1027
|
border-radius: var(--ui-radius, 8px);
|
|
782
|
-
padding:
|
|
783
|
-
margin:
|
|
1028
|
+
padding: 1.5rem;
|
|
1029
|
+
margin: 0;
|
|
784
1030
|
}
|
|
785
1031
|
|
|
786
1032
|
.ui-testimonial-rating {
|
|
787
|
-
color:
|
|
788
|
-
font-size:
|
|
789
|
-
letter-spacing: .1em;
|
|
790
|
-
margin:
|
|
1033
|
+
color: #f5a623;
|
|
1034
|
+
font-size: 1rem;
|
|
1035
|
+
letter-spacing: 0.1em;
|
|
1036
|
+
margin: 0 0 0.75rem;
|
|
791
1037
|
}
|
|
792
1038
|
|
|
793
|
-
.ui-testimonial-quote {
|
|
1039
|
+
.ui-testimonial-quote {
|
|
1040
|
+
margin: 0 0 1.25rem;
|
|
1041
|
+
}
|
|
794
1042
|
.ui-testimonial-quote p {
|
|
795
|
-
font-size:
|
|
1043
|
+
font-size: 0.95rem;
|
|
796
1044
|
line-height: 1.65;
|
|
797
|
-
color:
|
|
798
|
-
font-style:
|
|
799
|
-
margin:
|
|
1045
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1046
|
+
font-style: italic;
|
|
1047
|
+
margin: 0;
|
|
800
1048
|
}
|
|
801
1049
|
|
|
802
|
-
.ui-testimonial-author {
|
|
1050
|
+
.ui-testimonial-author {
|
|
1051
|
+
display: flex;
|
|
1052
|
+
align-items: center;
|
|
1053
|
+
gap: 0.75rem;
|
|
1054
|
+
}
|
|
803
1055
|
|
|
804
1056
|
.ui-testimonial-avatar {
|
|
805
|
-
width:
|
|
806
|
-
height:
|
|
1057
|
+
width: 40px;
|
|
1058
|
+
height: 40px;
|
|
807
1059
|
border-radius: 50%;
|
|
808
|
-
object-fit:
|
|
1060
|
+
object-fit: cover;
|
|
809
1061
|
flex-shrink: 0;
|
|
810
1062
|
}
|
|
811
1063
|
|
|
812
1064
|
.ui-testimonial-avatar--initials {
|
|
813
|
-
background:
|
|
814
|
-
color:
|
|
815
|
-
font-size:
|
|
816
|
-
font-weight:
|
|
817
|
-
display:
|
|
818
|
-
align-items:
|
|
1065
|
+
background: var(--ui-muted-bg, rgba(128, 128, 128, 0.2));
|
|
1066
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1067
|
+
font-size: 0.8rem;
|
|
1068
|
+
font-weight: 700;
|
|
1069
|
+
display: flex;
|
|
1070
|
+
align-items: center;
|
|
819
1071
|
justify-content: center;
|
|
820
1072
|
}
|
|
821
1073
|
|
|
822
|
-
.ui-testimonial-meta {
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
.ui-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
1074
|
+
.ui-testimonial-meta {
|
|
1075
|
+
display: flex;
|
|
1076
|
+
flex-direction: column;
|
|
1077
|
+
gap: 0.1rem;
|
|
1078
|
+
}
|
|
1079
|
+
.ui-testimonial-name {
|
|
1080
|
+
font-size: 0.875rem;
|
|
1081
|
+
font-weight: 600;
|
|
1082
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1083
|
+
margin: 0;
|
|
1084
|
+
}
|
|
1085
|
+
.ui-testimonial-role {
|
|
1086
|
+
font-size: 0.78rem;
|
|
1087
|
+
color: var(--ui-muted, var(--muted, #9090a0));
|
|
1088
|
+
margin: 0;
|
|
1089
|
+
}
|
|
1090
|
+
|
|
1091
|
+
/* ─── Feature ────────────────────────────────────────────────────────────── */
|
|
1092
|
+
.ui-feature {
|
|
1093
|
+
display: flex;
|
|
1094
|
+
flex-direction: column;
|
|
1095
|
+
gap: 0.75rem;
|
|
1096
|
+
}
|
|
834
1097
|
|
|
835
|
-
.ui-feature-
|
|
836
|
-
|
|
1098
|
+
.ui-feature-icon {
|
|
1099
|
+
display: block;
|
|
1100
|
+
flex-shrink: 0;
|
|
1101
|
+
line-height: 1;
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
.ui-feature-title {
|
|
1105
|
+
font-size: 1rem;
|
|
1106
|
+
font-weight: 600;
|
|
1107
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1108
|
+
margin: 0;
|
|
1109
|
+
}
|
|
1110
|
+
.ui-feature-desc {
|
|
1111
|
+
font-size: 0.9rem;
|
|
1112
|
+
color: var(--ui-muted, var(--muted, #9090a0));
|
|
1113
|
+
line-height: 1.6;
|
|
1114
|
+
margin: 0;
|
|
1115
|
+
}
|
|
837
1116
|
|
|
838
|
-
.ui-feature--center
|
|
1117
|
+
.ui-feature--center {
|
|
1118
|
+
align-items: center;
|
|
1119
|
+
text-align: center;
|
|
1120
|
+
}
|
|
839
1121
|
|
|
840
1122
|
/* ─── Pricing ────────────────────────────────────────────────────────────── */
|
|
841
1123
|
.ui-pricing {
|
|
842
|
-
box-sizing:
|
|
843
|
-
background:
|
|
844
|
-
border:
|
|
845
|
-
border-radius:
|
|
846
|
-
padding:
|
|
847
|
-
display:
|
|
1124
|
+
box-sizing: border-box;
|
|
1125
|
+
background: var(--ui-surface, var(--surface, #111116));
|
|
1126
|
+
border: 1px solid var(--ui-border, var(--border, #222228));
|
|
1127
|
+
border-radius: var(--ui-radius, 8px);
|
|
1128
|
+
padding: 2rem;
|
|
1129
|
+
display: flex;
|
|
848
1130
|
flex-direction: column;
|
|
849
|
-
gap:
|
|
850
|
-
position:
|
|
851
|
-
width:
|
|
1131
|
+
gap: 1.25rem;
|
|
1132
|
+
position: relative;
|
|
1133
|
+
width: 100%;
|
|
852
1134
|
}
|
|
853
1135
|
|
|
854
1136
|
.ui-pricing--highlighted {
|
|
855
1137
|
border-color: var(--ui-accent, var(--accent, #9b8dff));
|
|
856
|
-
box-shadow:
|
|
1138
|
+
box-shadow: 0 0 0 1px var(--ui-accent, var(--accent, #9b8dff));
|
|
857
1139
|
}
|
|
858
1140
|
|
|
859
1141
|
.ui-pricing-badge {
|
|
860
|
-
position:
|
|
861
|
-
top:
|
|
862
|
-
left:
|
|
863
|
-
transform:
|
|
864
|
-
background:
|
|
865
|
-
color:
|
|
866
|
-
font-size:
|
|
867
|
-
font-weight:
|
|
868
|
-
letter-spacing:
|
|
869
|
-
text-transform:
|
|
870
|
-
padding:
|
|
871
|
-
border-radius:
|
|
872
|
-
margin:
|
|
873
|
-
white-space:
|
|
874
|
-
}
|
|
875
|
-
|
|
876
|
-
.ui-pricing-header {
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
.ui-pricing-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
1142
|
+
position: absolute;
|
|
1143
|
+
top: -12px;
|
|
1144
|
+
left: 50%;
|
|
1145
|
+
transform: translateX(-50%);
|
|
1146
|
+
background: var(--ui-accent, var(--accent, #9b8dff));
|
|
1147
|
+
color: var(--ui-accent-text, #0d0a20);
|
|
1148
|
+
font-size: 0.72rem;
|
|
1149
|
+
font-weight: 700;
|
|
1150
|
+
letter-spacing: 0.05em;
|
|
1151
|
+
text-transform: uppercase;
|
|
1152
|
+
padding: 0.25rem 0.75rem;
|
|
1153
|
+
border-radius: 99px;
|
|
1154
|
+
margin: 0;
|
|
1155
|
+
white-space: nowrap;
|
|
1156
|
+
}
|
|
1157
|
+
|
|
1158
|
+
.ui-pricing-header {
|
|
1159
|
+
display: flex;
|
|
1160
|
+
flex-direction: column;
|
|
1161
|
+
gap: 0.25rem;
|
|
1162
|
+
}
|
|
1163
|
+
.ui-pricing-name {
|
|
1164
|
+
font-size: 1.1rem;
|
|
1165
|
+
font-weight: 700;
|
|
1166
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1167
|
+
margin: 0;
|
|
1168
|
+
}
|
|
1169
|
+
.ui-pricing-desc {
|
|
1170
|
+
font-size: 0.875rem;
|
|
1171
|
+
color: var(--ui-muted, var(--muted, #9090a0));
|
|
1172
|
+
margin: 0;
|
|
1173
|
+
}
|
|
1174
|
+
|
|
1175
|
+
.ui-pricing-price {
|
|
1176
|
+
display: flex;
|
|
1177
|
+
align-items: baseline;
|
|
1178
|
+
gap: 0.3rem;
|
|
1179
|
+
}
|
|
1180
|
+
.ui-pricing-amount {
|
|
1181
|
+
font-size: 2.25rem;
|
|
1182
|
+
font-weight: 800;
|
|
1183
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1184
|
+
line-height: 1;
|
|
1185
|
+
letter-spacing: -0.02em;
|
|
1186
|
+
}
|
|
1187
|
+
.ui-pricing-period {
|
|
1188
|
+
font-size: 0.875rem;
|
|
1189
|
+
color: var(--ui-muted, var(--muted, #9090a0));
|
|
1190
|
+
}
|
|
1191
|
+
|
|
1192
|
+
.ui-pricing-features {
|
|
1193
|
+
list-style: none;
|
|
1194
|
+
padding: 0;
|
|
1195
|
+
margin: 0;
|
|
1196
|
+
display: flex;
|
|
1197
|
+
flex-direction: column;
|
|
1198
|
+
gap: 0.6rem;
|
|
1199
|
+
}
|
|
1200
|
+
.ui-pricing-feature {
|
|
1201
|
+
font-size: 0.875rem;
|
|
1202
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1203
|
+
display: flex;
|
|
1204
|
+
align-items: flex-start;
|
|
1205
|
+
gap: 0.5rem;
|
|
1206
|
+
width: 100%;
|
|
1207
|
+
}
|
|
1208
|
+
.ui-pricing-check {
|
|
1209
|
+
color: var(--ui-green, var(--green, #3dd68c));
|
|
1210
|
+
font-weight: 700;
|
|
1211
|
+
flex-shrink: 0;
|
|
1212
|
+
}
|
|
887
1213
|
|
|
888
1214
|
/* ─── Pricing grid (responsive) ─────────────────────────────────────────── */
|
|
889
1215
|
.ui-pricing-grid {
|
|
@@ -894,429 +1220,608 @@ hr.ui-divider {
|
|
|
894
1220
|
width: 100%;
|
|
895
1221
|
}
|
|
896
1222
|
@media (min-width: 640px) {
|
|
897
|
-
.ui-pricing-grid--cols-2 {
|
|
898
|
-
|
|
1223
|
+
.ui-pricing-grid--cols-2 {
|
|
1224
|
+
grid-template-columns: repeat(2, 1fr);
|
|
1225
|
+
}
|
|
1226
|
+
.ui-pricing-grid--cols-3 {
|
|
1227
|
+
grid-template-columns: repeat(3, 1fr);
|
|
1228
|
+
}
|
|
1229
|
+
}
|
|
1230
|
+
.ui-pricing-action {
|
|
1231
|
+
margin-top: auto;
|
|
899
1232
|
}
|
|
900
|
-
.ui-pricing-action { margin-top: auto; }
|
|
901
1233
|
|
|
902
1234
|
/* ─── Accordion ──────────────────────────────────────────────────────────── */
|
|
903
|
-
.ui-accordion {
|
|
1235
|
+
.ui-accordion {
|
|
1236
|
+
display: flex;
|
|
1237
|
+
flex-direction: column;
|
|
1238
|
+
gap: 0.5rem;
|
|
1239
|
+
width: 100%;
|
|
1240
|
+
}
|
|
904
1241
|
|
|
905
1242
|
.ui-accordion-item {
|
|
906
|
-
background:
|
|
907
|
-
border:
|
|
908
|
-
border-radius:
|
|
909
|
-
overflow:
|
|
1243
|
+
background: var(--ui-surface, var(--surface, #111116));
|
|
1244
|
+
border: 1px solid var(--ui-border, var(--border, #222228));
|
|
1245
|
+
border-radius: var(--ui-radius, 8px);
|
|
1246
|
+
overflow: hidden;
|
|
910
1247
|
}
|
|
911
1248
|
|
|
912
1249
|
.ui-accordion-summary {
|
|
913
|
-
display:
|
|
1250
|
+
display: flex;
|
|
914
1251
|
justify-content: space-between;
|
|
915
|
-
align-items:
|
|
916
|
-
padding:
|
|
917
|
-
cursor:
|
|
918
|
-
font-size:
|
|
919
|
-
font-weight:
|
|
920
|
-
color:
|
|
921
|
-
list-style:
|
|
922
|
-
user-select:
|
|
923
|
-
gap:
|
|
924
|
-
}
|
|
925
|
-
.ui-accordion-summary::-webkit-details-marker {
|
|
926
|
-
|
|
1252
|
+
align-items: center;
|
|
1253
|
+
padding: 1rem 1.25rem;
|
|
1254
|
+
cursor: pointer;
|
|
1255
|
+
font-size: 0.95rem;
|
|
1256
|
+
font-weight: 500;
|
|
1257
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1258
|
+
list-style: none;
|
|
1259
|
+
user-select: none;
|
|
1260
|
+
gap: 1rem;
|
|
1261
|
+
}
|
|
1262
|
+
.ui-accordion-summary::-webkit-details-marker {
|
|
1263
|
+
display: none;
|
|
1264
|
+
}
|
|
1265
|
+
.ui-accordion-summary:hover {
|
|
1266
|
+
color: var(--ui-accent, var(--accent, #9b8dff));
|
|
1267
|
+
}
|
|
927
1268
|
|
|
928
1269
|
.ui-accordion-icon {
|
|
929
|
-
width:
|
|
930
|
-
height:
|
|
931
|
-
position:
|
|
1270
|
+
width: 16px;
|
|
1271
|
+
height: 16px;
|
|
1272
|
+
position: relative;
|
|
932
1273
|
flex-shrink: 0;
|
|
933
1274
|
}
|
|
934
1275
|
.ui-accordion-icon::before,
|
|
935
1276
|
.ui-accordion-icon::after {
|
|
936
|
-
content:
|
|
937
|
-
position:
|
|
938
|
-
background:
|
|
1277
|
+
content: "";
|
|
1278
|
+
position: absolute;
|
|
1279
|
+
background: currentColor;
|
|
939
1280
|
border-radius: 2px;
|
|
940
|
-
transition:
|
|
1281
|
+
transition: transform 0.2s;
|
|
1282
|
+
}
|
|
1283
|
+
.ui-accordion-icon::before {
|
|
1284
|
+
width: 10px;
|
|
1285
|
+
height: 1.5px;
|
|
1286
|
+
top: 7px;
|
|
1287
|
+
left: 3px;
|
|
1288
|
+
}
|
|
1289
|
+
.ui-accordion-icon::after {
|
|
1290
|
+
width: 1.5px;
|
|
1291
|
+
height: 10px;
|
|
1292
|
+
top: 3px;
|
|
1293
|
+
left: 7px;
|
|
1294
|
+
}
|
|
1295
|
+
.ui-accordion-item[open] .ui-accordion-icon::after {
|
|
1296
|
+
transform: rotate(90deg);
|
|
941
1297
|
}
|
|
942
|
-
.ui-accordion-icon::before { width: 10px; height: 1.5px; top: 7px; left: 3px; }
|
|
943
|
-
.ui-accordion-icon::after { width: 1.5px; height: 10px; top: 3px; left: 7px; }
|
|
944
|
-
.ui-accordion-item[open] .ui-accordion-icon::after { transform: rotate(90deg); }
|
|
945
1298
|
|
|
946
|
-
.ui-accordion-body {
|
|
947
|
-
|
|
1299
|
+
.ui-accordion-body {
|
|
1300
|
+
padding: 0 1.25rem 1rem;
|
|
1301
|
+
}
|
|
1302
|
+
.ui-accordion-body p {
|
|
1303
|
+
font-size: 0.9rem;
|
|
1304
|
+
color: var(--ui-muted, var(--muted, #9090a0));
|
|
1305
|
+
line-height: 1.7;
|
|
1306
|
+
margin: 0;
|
|
1307
|
+
}
|
|
948
1308
|
|
|
949
1309
|
/* ─── Tooltip ────────────────────────────────────────────────────────────── */
|
|
950
1310
|
.ui-tooltip {
|
|
951
1311
|
position: relative;
|
|
952
|
-
display:
|
|
1312
|
+
display: inline-block;
|
|
953
1313
|
}
|
|
954
1314
|
|
|
955
1315
|
.ui-tooltip::after {
|
|
956
|
-
content:
|
|
957
|
-
position:
|
|
958
|
-
bottom:
|
|
959
|
-
left:
|
|
960
|
-
transform:
|
|
961
|
-
background:
|
|
962
|
-
color:
|
|
963
|
-
font-size:
|
|
964
|
-
font-weight:
|
|
965
|
-
line-height:
|
|
966
|
-
white-space:
|
|
967
|
-
padding:
|
|
968
|
-
border-radius:
|
|
969
|
-
border:
|
|
1316
|
+
content: attr(data-tip);
|
|
1317
|
+
position: absolute;
|
|
1318
|
+
bottom: calc(100% + 8px);
|
|
1319
|
+
left: 50%;
|
|
1320
|
+
transform: translateX(-50%) translateY(4px);
|
|
1321
|
+
background: var(--ui-surface-2, var(--surface-2, #1a1a26));
|
|
1322
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1323
|
+
font-size: 0.78rem;
|
|
1324
|
+
font-weight: 500;
|
|
1325
|
+
line-height: 1.4;
|
|
1326
|
+
white-space: nowrap;
|
|
1327
|
+
padding: 0.35rem 0.7rem;
|
|
1328
|
+
border-radius: 6px;
|
|
1329
|
+
border: 1px solid var(--ui-border, var(--border, #2a2a38));
|
|
970
1330
|
pointer-events: none;
|
|
971
|
-
opacity:
|
|
972
|
-
transition:
|
|
973
|
-
|
|
1331
|
+
opacity: 0;
|
|
1332
|
+
transition:
|
|
1333
|
+
opacity 0.15s,
|
|
1334
|
+
transform 0.15s;
|
|
1335
|
+
z-index: var(--ui-z-tooltip, 200);
|
|
974
1336
|
}
|
|
975
1337
|
|
|
976
1338
|
.ui-tooltip::before {
|
|
977
|
-
content:
|
|
978
|
-
position:
|
|
979
|
-
bottom:
|
|
980
|
-
left:
|
|
981
|
-
transform:
|
|
982
|
-
border:
|
|
1339
|
+
content: "";
|
|
1340
|
+
position: absolute;
|
|
1341
|
+
bottom: calc(100% + 2px);
|
|
1342
|
+
left: 50%;
|
|
1343
|
+
transform: translateX(-50%);
|
|
1344
|
+
border: 5px solid transparent;
|
|
983
1345
|
border-top-color: var(--ui-border, var(--border, #2a2a38));
|
|
984
|
-
pointer-events:
|
|
985
|
-
opacity:
|
|
986
|
-
transition:
|
|
987
|
-
z-index:
|
|
1346
|
+
pointer-events: none;
|
|
1347
|
+
opacity: 0;
|
|
1348
|
+
transition: opacity 0.15s;
|
|
1349
|
+
z-index: var(--ui-z-tooltip, 200);
|
|
988
1350
|
}
|
|
989
1351
|
|
|
990
1352
|
.ui-tooltip:hover::after,
|
|
991
1353
|
.ui-tooltip:focus-within::after {
|
|
992
|
-
opacity:
|
|
1354
|
+
opacity: 1;
|
|
993
1355
|
transform: translateX(-50%) translateY(0);
|
|
994
1356
|
}
|
|
995
1357
|
.ui-tooltip:hover::before,
|
|
996
|
-
.ui-tooltip:focus-within::before {
|
|
1358
|
+
.ui-tooltip:focus-within::before {
|
|
1359
|
+
opacity: 1;
|
|
1360
|
+
}
|
|
997
1361
|
|
|
998
1362
|
/* bottom */
|
|
999
|
-
.ui-tooltip--bottom::after
|
|
1000
|
-
|
|
1363
|
+
.ui-tooltip--bottom::after {
|
|
1364
|
+
bottom: auto;
|
|
1365
|
+
top: calc(100% + 8px);
|
|
1366
|
+
transform: translateX(-50%) translateY(-4px);
|
|
1367
|
+
}
|
|
1368
|
+
.ui-tooltip--bottom::before {
|
|
1369
|
+
bottom: auto;
|
|
1370
|
+
top: calc(100% + 2px);
|
|
1371
|
+
border-top-color: transparent;
|
|
1372
|
+
border-bottom-color: var(--ui-border, var(--border, #2a2a38));
|
|
1373
|
+
}
|
|
1001
1374
|
.ui-tooltip--bottom:hover::after,
|
|
1002
|
-
.ui-tooltip--bottom:focus-within::after {
|
|
1375
|
+
.ui-tooltip--bottom:focus-within::after {
|
|
1376
|
+
transform: translateX(-50%) translateY(0);
|
|
1377
|
+
}
|
|
1003
1378
|
|
|
1004
1379
|
/* left */
|
|
1005
|
-
.ui-tooltip--left::after
|
|
1006
|
-
|
|
1380
|
+
.ui-tooltip--left::after {
|
|
1381
|
+
bottom: auto;
|
|
1382
|
+
top: 50%;
|
|
1383
|
+
left: auto;
|
|
1384
|
+
right: calc(100% + 8px);
|
|
1385
|
+
transform: translateY(-50%) translateX(4px);
|
|
1386
|
+
}
|
|
1387
|
+
.ui-tooltip--left::before {
|
|
1388
|
+
bottom: auto;
|
|
1389
|
+
top: 50%;
|
|
1390
|
+
left: auto;
|
|
1391
|
+
right: calc(100% + 2px);
|
|
1392
|
+
transform: translateY(-50%);
|
|
1393
|
+
border-top-color: transparent;
|
|
1394
|
+
border-left-color: var(--ui-border, var(--border, #2a2a38));
|
|
1395
|
+
}
|
|
1007
1396
|
.ui-tooltip--left:hover::after,
|
|
1008
|
-
.ui-tooltip--left:focus-within::after
|
|
1397
|
+
.ui-tooltip--left:focus-within::after {
|
|
1398
|
+
transform: translateY(-50%) translateX(0);
|
|
1399
|
+
}
|
|
1009
1400
|
|
|
1010
1401
|
/* right */
|
|
1011
|
-
.ui-tooltip--right::after
|
|
1012
|
-
|
|
1402
|
+
.ui-tooltip--right::after {
|
|
1403
|
+
bottom: auto;
|
|
1404
|
+
top: 50%;
|
|
1405
|
+
left: calc(100% + 8px);
|
|
1406
|
+
transform: translateY(-50%) translateX(-4px);
|
|
1407
|
+
}
|
|
1408
|
+
.ui-tooltip--right::before {
|
|
1409
|
+
bottom: auto;
|
|
1410
|
+
top: 50%;
|
|
1411
|
+
left: calc(100% + 2px);
|
|
1412
|
+
transform: translateY(-50%);
|
|
1413
|
+
border-top-color: transparent;
|
|
1414
|
+
border-right-color: var(--ui-border, var(--border, #2a2a38));
|
|
1415
|
+
}
|
|
1013
1416
|
.ui-tooltip--right:hover::after,
|
|
1014
|
-
.ui-tooltip--right:focus-within::after {
|
|
1417
|
+
.ui-tooltip--right:focus-within::after {
|
|
1418
|
+
transform: translateY(-50%) translateX(0);
|
|
1419
|
+
}
|
|
1015
1420
|
|
|
1016
1421
|
/* ─── Modal ──────────────────────────────────────────────────────────────── */
|
|
1017
1422
|
.ui-modal {
|
|
1018
|
-
position:
|
|
1019
|
-
inset:
|
|
1020
|
-
margin:
|
|
1021
|
-
width:
|
|
1022
|
-
max-height:
|
|
1023
|
-
padding:
|
|
1024
|
-
background:
|
|
1025
|
-
border:
|
|
1423
|
+
position: fixed;
|
|
1424
|
+
inset: 0;
|
|
1425
|
+
margin: auto;
|
|
1426
|
+
width: min(560px, calc(100vw - 2rem));
|
|
1427
|
+
max-height: min(80vh, calc(100dvh - 2rem));
|
|
1428
|
+
padding: 0;
|
|
1429
|
+
background: var(--ui-surface, var(--surface, #13131e));
|
|
1430
|
+
border: 1px solid var(--ui-border, var(--border, #2a2a38));
|
|
1026
1431
|
border-radius: var(--ui-radius, 12px);
|
|
1027
|
-
overflow:
|
|
1028
|
-
box-shadow:
|
|
1432
|
+
overflow: hidden;
|
|
1433
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
|
1029
1434
|
}
|
|
1030
1435
|
|
|
1031
|
-
.ui-modal--sm {
|
|
1032
|
-
|
|
1033
|
-
|
|
1436
|
+
.ui-modal--sm {
|
|
1437
|
+
width: min(400px, calc(100vw - 2rem));
|
|
1438
|
+
}
|
|
1439
|
+
.ui-modal--lg {
|
|
1440
|
+
width: min(760px, calc(100vw - 2rem));
|
|
1441
|
+
}
|
|
1442
|
+
.ui-modal--xl {
|
|
1443
|
+
width: min(1000px, calc(100vw - 2rem));
|
|
1444
|
+
}
|
|
1034
1445
|
|
|
1035
1446
|
.ui-modal::backdrop {
|
|
1036
|
-
background:
|
|
1447
|
+
background: rgba(0, 0, 0, 0.6);
|
|
1037
1448
|
backdrop-filter: blur(2px);
|
|
1038
1449
|
}
|
|
1039
1450
|
|
|
1040
1451
|
.ui-modal-inner {
|
|
1041
|
-
display:
|
|
1452
|
+
display: flex;
|
|
1042
1453
|
flex-direction: column;
|
|
1043
|
-
max-height:
|
|
1044
|
-
margin:
|
|
1045
|
-
border:
|
|
1046
|
-
padding:
|
|
1047
|
-
background:
|
|
1454
|
+
max-height: inherit;
|
|
1455
|
+
margin: 0;
|
|
1456
|
+
border: none;
|
|
1457
|
+
padding: 0;
|
|
1458
|
+
background: transparent;
|
|
1048
1459
|
}
|
|
1049
1460
|
|
|
1050
1461
|
.ui-modal-header {
|
|
1051
|
-
display:
|
|
1052
|
-
align-items:
|
|
1053
|
-
gap:
|
|
1054
|
-
padding:
|
|
1462
|
+
display: flex;
|
|
1463
|
+
align-items: center;
|
|
1464
|
+
gap: 1rem;
|
|
1465
|
+
padding: 1.25rem 1.5rem;
|
|
1055
1466
|
border-bottom: 1px solid var(--ui-border, var(--border, #2a2a38));
|
|
1056
|
-
flex-shrink:
|
|
1467
|
+
flex-shrink: 0;
|
|
1057
1468
|
}
|
|
1058
1469
|
|
|
1059
1470
|
.ui-modal-title {
|
|
1060
|
-
flex:
|
|
1061
|
-
font-size:
|
|
1471
|
+
flex: 1;
|
|
1472
|
+
font-size: 1.1rem;
|
|
1062
1473
|
font-weight: 700;
|
|
1063
|
-
color:
|
|
1064
|
-
margin:
|
|
1474
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1475
|
+
margin: 0;
|
|
1065
1476
|
}
|
|
1066
1477
|
|
|
1067
1478
|
.ui-modal-close {
|
|
1068
|
-
display:
|
|
1069
|
-
align-items:
|
|
1479
|
+
display: flex;
|
|
1480
|
+
align-items: center;
|
|
1070
1481
|
justify-content: center;
|
|
1071
|
-
width:
|
|
1072
|
-
height:
|
|
1073
|
-
padding:
|
|
1074
|
-
background:
|
|
1075
|
-
border:
|
|
1076
|
-
border-radius:
|
|
1077
|
-
color:
|
|
1078
|
-
cursor:
|
|
1079
|
-
transition:
|
|
1080
|
-
|
|
1482
|
+
width: 32px;
|
|
1483
|
+
height: 32px;
|
|
1484
|
+
padding: 0;
|
|
1485
|
+
background: transparent;
|
|
1486
|
+
border: none;
|
|
1487
|
+
border-radius: 6px;
|
|
1488
|
+
color: var(--ui-muted, var(--muted, #9090a0));
|
|
1489
|
+
cursor: pointer;
|
|
1490
|
+
transition:
|
|
1491
|
+
color 0.15s,
|
|
1492
|
+
background 0.15s;
|
|
1493
|
+
flex-shrink: 0;
|
|
1081
1494
|
}
|
|
1082
1495
|
.ui-modal-close:hover {
|
|
1083
|
-
color:
|
|
1496
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1084
1497
|
background: var(--ui-surface-2, var(--surface-2, #1a1a26));
|
|
1085
1498
|
}
|
|
1086
1499
|
|
|
1087
1500
|
.ui-modal-body {
|
|
1088
|
-
flex:
|
|
1501
|
+
flex: 1;
|
|
1089
1502
|
overflow-y: auto;
|
|
1090
|
-
padding:
|
|
1091
|
-
color:
|
|
1503
|
+
padding: 1.5rem;
|
|
1504
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1092
1505
|
}
|
|
1093
1506
|
|
|
1094
1507
|
.ui-modal-footer {
|
|
1095
|
-
display:
|
|
1096
|
-
align-items:
|
|
1508
|
+
display: flex;
|
|
1509
|
+
align-items: center;
|
|
1097
1510
|
justify-content: flex-end;
|
|
1098
|
-
gap:
|
|
1099
|
-
padding:
|
|
1100
|
-
border-top:
|
|
1101
|
-
flex-shrink:
|
|
1511
|
+
gap: 0.75rem;
|
|
1512
|
+
padding: 1rem 1.5rem;
|
|
1513
|
+
border-top: 1px solid var(--ui-border, var(--border, #2a2a38));
|
|
1514
|
+
flex-shrink: 0;
|
|
1102
1515
|
}
|
|
1103
1516
|
|
|
1104
1517
|
/* ─── Carousel ───────────────────────────────────────────────────────────── */
|
|
1105
1518
|
.ui-carousel {
|
|
1106
|
-
position:
|
|
1107
|
-
width:
|
|
1519
|
+
position: relative;
|
|
1520
|
+
width: 100%;
|
|
1108
1521
|
border-radius: var(--ui-radius, 12px);
|
|
1109
|
-
overflow:
|
|
1522
|
+
overflow: hidden;
|
|
1110
1523
|
}
|
|
1111
1524
|
|
|
1112
1525
|
.ui-carousel-track {
|
|
1113
|
-
display:
|
|
1114
|
-
overflow-x:
|
|
1115
|
-
scroll-snap-type:
|
|
1116
|
-
scroll-behavior:
|
|
1526
|
+
display: flex;
|
|
1527
|
+
overflow-x: auto;
|
|
1528
|
+
scroll-snap-type: x mandatory;
|
|
1529
|
+
scroll-behavior: smooth;
|
|
1117
1530
|
-webkit-overflow-scrolling: touch;
|
|
1118
|
-
scrollbar-width:
|
|
1531
|
+
scrollbar-width: none;
|
|
1532
|
+
}
|
|
1533
|
+
.ui-carousel-track::-webkit-scrollbar {
|
|
1534
|
+
display: none;
|
|
1119
1535
|
}
|
|
1120
|
-
.ui-carousel-track::-webkit-scrollbar { display: none; }
|
|
1121
1536
|
|
|
1122
1537
|
.ui-carousel-slide {
|
|
1123
|
-
flex:
|
|
1538
|
+
flex: 0 0 100%;
|
|
1124
1539
|
scroll-snap-align: start;
|
|
1125
1540
|
}
|
|
1126
1541
|
|
|
1127
1542
|
.ui-carousel-btn {
|
|
1128
|
-
position:
|
|
1129
|
-
top:
|
|
1130
|
-
transform:
|
|
1131
|
-
z-index:
|
|
1132
|
-
display:
|
|
1133
|
-
align-items:
|
|
1543
|
+
position: absolute;
|
|
1544
|
+
top: 50%;
|
|
1545
|
+
transform: translateY(-50%);
|
|
1546
|
+
z-index: 2;
|
|
1547
|
+
display: flex;
|
|
1548
|
+
align-items: center;
|
|
1134
1549
|
justify-content: center;
|
|
1135
|
-
width:
|
|
1136
|
-
height:
|
|
1137
|
-
padding:
|
|
1138
|
-
background:
|
|
1139
|
-
border:
|
|
1140
|
-
border-radius:
|
|
1141
|
-
color:
|
|
1142
|
-
cursor:
|
|
1143
|
-
transition:
|
|
1144
|
-
|
|
1145
|
-
.
|
|
1146
|
-
|
|
1147
|
-
.ui-carousel-
|
|
1148
|
-
|
|
1550
|
+
width: 40px;
|
|
1551
|
+
height: 40px;
|
|
1552
|
+
padding: 0;
|
|
1553
|
+
background: var(--ui-surface, var(--surface, #13131e));
|
|
1554
|
+
border: 1px solid var(--ui-border, var(--border, #2a2a38));
|
|
1555
|
+
border-radius: 50%;
|
|
1556
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1557
|
+
cursor: pointer;
|
|
1558
|
+
transition:
|
|
1559
|
+
background 0.15s,
|
|
1560
|
+
opacity 0.15s;
|
|
1561
|
+
}
|
|
1562
|
+
.ui-carousel-btn:hover {
|
|
1563
|
+
background: var(--ui-surface-2, var(--surface-2, #1a1a26));
|
|
1564
|
+
}
|
|
1565
|
+
.ui-carousel-btn[hidden] {
|
|
1566
|
+
display: none;
|
|
1567
|
+
}
|
|
1568
|
+
.ui-carousel-prev {
|
|
1569
|
+
left: 0.75rem;
|
|
1570
|
+
}
|
|
1571
|
+
.ui-carousel-next {
|
|
1572
|
+
right: 0.75rem;
|
|
1573
|
+
}
|
|
1149
1574
|
|
|
1150
1575
|
.ui-carousel-dots {
|
|
1151
|
-
display:
|
|
1576
|
+
display: flex;
|
|
1152
1577
|
justify-content: center;
|
|
1153
|
-
gap:
|
|
1154
|
-
padding:
|
|
1578
|
+
gap: 0.5rem;
|
|
1579
|
+
padding: 0.75rem 0 0.5rem;
|
|
1155
1580
|
}
|
|
1156
1581
|
|
|
1157
1582
|
.ui-carousel-dot {
|
|
1158
|
-
width:
|
|
1159
|
-
height:
|
|
1160
|
-
padding:
|
|
1161
|
-
background:
|
|
1162
|
-
border:
|
|
1583
|
+
width: 8px;
|
|
1584
|
+
height: 8px;
|
|
1585
|
+
padding: 0;
|
|
1586
|
+
background: var(--ui-border, var(--border, #2a2a38));
|
|
1587
|
+
border: none;
|
|
1163
1588
|
border-radius: 50%;
|
|
1164
|
-
cursor:
|
|
1165
|
-
transition:
|
|
1589
|
+
cursor: pointer;
|
|
1590
|
+
transition:
|
|
1591
|
+
background 0.15s,
|
|
1592
|
+
transform 0.15s;
|
|
1166
1593
|
}
|
|
1167
1594
|
.ui-carousel-dot.active,
|
|
1168
|
-
.ui-carousel-dot:hover
|
|
1169
|
-
|
|
1595
|
+
.ui-carousel-dot:hover {
|
|
1596
|
+
background: var(--ui-accent, var(--accent, #9b8dff));
|
|
1597
|
+
}
|
|
1598
|
+
.ui-carousel-dot.active {
|
|
1599
|
+
transform: scale(1.35);
|
|
1600
|
+
}
|
|
1170
1601
|
|
|
1171
1602
|
/* ─── Nav ────────────────────────────────────────────────────────────────── */
|
|
1172
1603
|
.ui-nav {
|
|
1173
|
-
position:
|
|
1174
|
-
background:
|
|
1604
|
+
position: relative;
|
|
1605
|
+
background: var(--ui-bg, var(--bg, #0d0d10));
|
|
1175
1606
|
border-bottom: 1px solid var(--ui-border, var(--border, #222228));
|
|
1176
1607
|
}
|
|
1177
1608
|
|
|
1178
1609
|
.ui-nav--sticky {
|
|
1179
|
-
position:
|
|
1180
|
-
top:
|
|
1181
|
-
z-index:
|
|
1182
|
-
backdrop-filter:
|
|
1610
|
+
position: sticky;
|
|
1611
|
+
top: 0;
|
|
1612
|
+
z-index: 100;
|
|
1613
|
+
backdrop-filter: blur(12px);
|
|
1183
1614
|
-webkit-backdrop-filter: blur(12px);
|
|
1184
|
-
background:
|
|
1615
|
+
background: var(--ui-nav-sticky-bg, rgba(13, 13, 16, 0.85));
|
|
1185
1616
|
}
|
|
1186
1617
|
|
|
1187
1618
|
.ui-nav-inner {
|
|
1188
1619
|
max-width: 1100px;
|
|
1189
|
-
margin:
|
|
1190
|
-
padding:
|
|
1191
|
-
display:
|
|
1620
|
+
margin: 0 auto;
|
|
1621
|
+
padding: 0.875rem 1.5rem;
|
|
1622
|
+
display: flex;
|
|
1192
1623
|
align-items: center;
|
|
1193
|
-
gap:
|
|
1624
|
+
gap: 2rem;
|
|
1194
1625
|
}
|
|
1195
1626
|
|
|
1196
1627
|
.ui-nav-logo {
|
|
1197
|
-
font-size:
|
|
1198
|
-
font-weight:
|
|
1199
|
-
color:
|
|
1628
|
+
font-size: 1rem;
|
|
1629
|
+
font-weight: 700;
|
|
1630
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1200
1631
|
text-decoration: none;
|
|
1201
|
-
display:
|
|
1202
|
-
align-items:
|
|
1203
|
-
gap:
|
|
1204
|
-
flex-shrink:
|
|
1632
|
+
display: flex;
|
|
1633
|
+
align-items: center;
|
|
1634
|
+
gap: 0.5rem;
|
|
1635
|
+
flex-shrink: 0;
|
|
1636
|
+
}
|
|
1637
|
+
.ui-nav-logo:hover {
|
|
1638
|
+
color: var(--ui-accent, var(--accent, #9b8dff));
|
|
1205
1639
|
}
|
|
1206
|
-
.ui-nav-logo:hover { color: var(--ui-accent, var(--accent, #9b8dff)); }
|
|
1207
1640
|
|
|
1208
|
-
.ui-nav-links {
|
|
1641
|
+
.ui-nav-links {
|
|
1642
|
+
display: flex;
|
|
1643
|
+
gap: 1.5rem;
|
|
1644
|
+
align-items: center;
|
|
1645
|
+
flex: 1;
|
|
1646
|
+
}
|
|
1209
1647
|
|
|
1210
1648
|
.ui-nav-link {
|
|
1211
|
-
font-size:
|
|
1212
|
-
color:
|
|
1649
|
+
font-size: 0.875rem;
|
|
1650
|
+
color: var(--ui-muted, var(--muted, #9090a0));
|
|
1213
1651
|
text-decoration: none;
|
|
1214
|
-
transition:
|
|
1215
|
-
min-height:
|
|
1216
|
-
display:
|
|
1217
|
-
align-items:
|
|
1652
|
+
transition: color 0.15s;
|
|
1653
|
+
min-height: 44px;
|
|
1654
|
+
display: flex;
|
|
1655
|
+
align-items: center;
|
|
1656
|
+
}
|
|
1657
|
+
.ui-nav-link:hover {
|
|
1658
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1218
1659
|
}
|
|
1219
|
-
.ui-nav-link:hover { color: var(--ui-text, var(--text, #e2e2ea)); }
|
|
1220
1660
|
|
|
1221
|
-
.ui-nav-action {
|
|
1661
|
+
.ui-nav-action {
|
|
1662
|
+
margin-left: auto;
|
|
1663
|
+
}
|
|
1222
1664
|
|
|
1223
|
-
.ui-nav--burger-left .ui-nav-burger {
|
|
1665
|
+
.ui-nav--burger-left .ui-nav-burger {
|
|
1666
|
+
order: -1;
|
|
1667
|
+
margin-left: 0;
|
|
1668
|
+
margin-right: auto;
|
|
1669
|
+
}
|
|
1224
1670
|
|
|
1225
1671
|
.ui-nav-burger {
|
|
1226
|
-
display:
|
|
1227
|
-
margin-left:
|
|
1228
|
-
padding:
|
|
1229
|
-
background:
|
|
1230
|
-
border:
|
|
1231
|
-
color:
|
|
1232
|
-
cursor:
|
|
1233
|
-
align-items:
|
|
1672
|
+
display: none;
|
|
1673
|
+
margin-left: auto;
|
|
1674
|
+
padding: 0.35rem;
|
|
1675
|
+
background: none;
|
|
1676
|
+
border: none;
|
|
1677
|
+
color: var(--ui-text, var(--text, #e2e2ea));
|
|
1678
|
+
cursor: pointer;
|
|
1679
|
+
align-items: center;
|
|
1234
1680
|
justify-content: center;
|
|
1235
|
-
border-radius:
|
|
1236
|
-
transition:
|
|
1681
|
+
border-radius: var(--ui-radius-sm, 6px);
|
|
1682
|
+
transition: background 0.15s;
|
|
1683
|
+
}
|
|
1684
|
+
.ui-nav-burger:hover {
|
|
1685
|
+
background: var(--ui-surface, var(--surface, #111116));
|
|
1686
|
+
}
|
|
1687
|
+
.ui-nav-burger-close {
|
|
1688
|
+
display: none;
|
|
1689
|
+
}
|
|
1690
|
+
.ui-nav--open .ui-nav-burger-open {
|
|
1691
|
+
display: none;
|
|
1692
|
+
}
|
|
1693
|
+
.ui-nav--open .ui-nav-burger-close {
|
|
1694
|
+
display: block;
|
|
1237
1695
|
}
|
|
1238
|
-
.ui-nav-burger:hover { background: var(--ui-surface, var(--surface, #111116)); }
|
|
1239
|
-
.ui-nav-burger-close { display: none; }
|
|
1240
|
-
.ui-nav--open .ui-nav-burger-open { display: none; }
|
|
1241
|
-
.ui-nav--open .ui-nav-burger-close { display: block; }
|
|
1242
1696
|
|
|
1243
1697
|
.ui-nav-mobile {
|
|
1244
|
-
display:
|
|
1245
|
-
position:
|
|
1246
|
-
top:
|
|
1247
|
-
left:
|
|
1248
|
-
right:
|
|
1249
|
-
z-index:
|
|
1250
|
-
background:
|
|
1698
|
+
display: none;
|
|
1699
|
+
position: absolute;
|
|
1700
|
+
top: 100%;
|
|
1701
|
+
left: 0;
|
|
1702
|
+
right: 0;
|
|
1703
|
+
z-index: 99;
|
|
1704
|
+
background: var(--ui-bg, var(--bg, #0d0d10));
|
|
1251
1705
|
border-bottom: 1px solid var(--ui-border, var(--border, #222228));
|
|
1252
|
-
padding:
|
|
1706
|
+
padding: 1rem 1.5rem;
|
|
1253
1707
|
flex-direction: column;
|
|
1254
|
-
gap:
|
|
1708
|
+
gap: 0.25rem;
|
|
1709
|
+
}
|
|
1710
|
+
.ui-nav--open .ui-nav-mobile {
|
|
1711
|
+
display: flex;
|
|
1255
1712
|
}
|
|
1256
|
-
.ui-nav--open .ui-nav-mobile { display: flex; }
|
|
1257
1713
|
|
|
1258
1714
|
.ui-nav-mobile nav {
|
|
1259
|
-
display:
|
|
1715
|
+
display: flex;
|
|
1260
1716
|
flex-direction: column;
|
|
1261
1717
|
}
|
|
1262
1718
|
.ui-nav-mobile .ui-nav-link {
|
|
1263
|
-
padding: .6rem 0;
|
|
1719
|
+
padding: 0.6rem 0;
|
|
1264
1720
|
border-bottom: 1px solid var(--ui-border, var(--border, #222228));
|
|
1265
1721
|
}
|
|
1266
|
-
.ui-nav-mobile .ui-nav-link:last-child {
|
|
1267
|
-
|
|
1722
|
+
.ui-nav-mobile .ui-nav-link:last-child {
|
|
1723
|
+
border-bottom: none;
|
|
1724
|
+
}
|
|
1725
|
+
.ui-nav-mobile-action {
|
|
1726
|
+
padding-top: 0.75rem;
|
|
1727
|
+
}
|
|
1268
1728
|
|
|
1269
1729
|
/* ─── App Badge ──────────────────────────────────────────────────────────── */
|
|
1270
1730
|
.ui-app-badge {
|
|
1271
|
-
display:
|
|
1272
|
-
align-items:
|
|
1273
|
-
gap:
|
|
1274
|
-
background:
|
|
1275
|
-
color:
|
|
1276
|
-
border-radius:
|
|
1277
|
-
padding:
|
|
1731
|
+
display: inline-flex;
|
|
1732
|
+
align-items: center;
|
|
1733
|
+
gap: 0.625rem;
|
|
1734
|
+
background: var(--ui-text, var(--text, #e2e2ea));
|
|
1735
|
+
color: var(--ui-bg, var(--bg, #0d0d10));
|
|
1736
|
+
border-radius: 10px;
|
|
1737
|
+
padding: 0.625rem 1.25rem;
|
|
1278
1738
|
text-decoration: none;
|
|
1279
|
-
transition:
|
|
1280
|
-
min-width:
|
|
1739
|
+
transition: opacity 0.15s;
|
|
1740
|
+
min-width: 148px;
|
|
1741
|
+
}
|
|
1742
|
+
.ui-app-badge:hover {
|
|
1743
|
+
opacity: 0.85;
|
|
1281
1744
|
}
|
|
1282
|
-
.ui-app-badge:hover { opacity: .85; }
|
|
1283
1745
|
|
|
1284
|
-
.ui-app-badge-text
|
|
1285
|
-
|
|
1286
|
-
|
|
1746
|
+
.ui-app-badge-text {
|
|
1747
|
+
display: flex;
|
|
1748
|
+
flex-direction: column;
|
|
1749
|
+
gap: 0.05rem;
|
|
1750
|
+
}
|
|
1751
|
+
.ui-app-badge-line1 {
|
|
1752
|
+
font-size: 0.65rem;
|
|
1753
|
+
font-weight: 400;
|
|
1754
|
+
line-height: 1;
|
|
1755
|
+
}
|
|
1756
|
+
.ui-app-badge-line2 {
|
|
1757
|
+
font-size: 0.95rem;
|
|
1758
|
+
font-weight: 700;
|
|
1759
|
+
line-height: 1;
|
|
1760
|
+
}
|
|
1287
1761
|
|
|
1288
1762
|
/* ─── Mobile ─────────────────────────────────────────────────────────────── */
|
|
1289
1763
|
@media (max-width: 640px) {
|
|
1290
1764
|
.ui-btn--lg {
|
|
1291
|
-
height:
|
|
1292
|
-
padding:
|
|
1293
|
-
font-size: .95rem;
|
|
1765
|
+
height: 48px;
|
|
1766
|
+
padding: 0 1.25rem;
|
|
1767
|
+
font-size: 0.95rem;
|
|
1294
1768
|
}
|
|
1295
1769
|
|
|
1296
|
-
.ui-stat-value {
|
|
1770
|
+
.ui-stat-value {
|
|
1771
|
+
font-size: 1.6rem;
|
|
1772
|
+
}
|
|
1297
1773
|
|
|
1298
1774
|
/* Full-width buttons in narrow containers */
|
|
1299
|
-
.ui-btn--full {
|
|
1775
|
+
.ui-btn--full {
|
|
1776
|
+
font-size: 0.9rem;
|
|
1777
|
+
}
|
|
1300
1778
|
|
|
1301
1779
|
/* Layout */
|
|
1302
|
-
.ui-section
|
|
1303
|
-
|
|
1304
|
-
|
|
1780
|
+
.ui-section {
|
|
1781
|
+
padding-top: 3rem;
|
|
1782
|
+
padding-bottom: 3rem;
|
|
1783
|
+
}
|
|
1784
|
+
.ui-section--sm {
|
|
1785
|
+
padding-top: 2rem;
|
|
1786
|
+
padding-bottom: 2rem;
|
|
1787
|
+
}
|
|
1788
|
+
.ui-section--lg {
|
|
1789
|
+
padding-top: 4rem;
|
|
1790
|
+
padding-bottom: 4rem;
|
|
1791
|
+
}
|
|
1305
1792
|
|
|
1306
1793
|
.ui-grid--cols-2,
|
|
1307
1794
|
.ui-grid--cols-3,
|
|
1308
|
-
.ui-grid--cols-4 {
|
|
1795
|
+
.ui-grid--cols-4 {
|
|
1796
|
+
grid-template-columns: 1fr;
|
|
1797
|
+
}
|
|
1309
1798
|
|
|
1310
|
-
.ui-media {
|
|
1311
|
-
|
|
1799
|
+
.ui-media {
|
|
1800
|
+
grid-template-columns: 1fr;
|
|
1801
|
+
}
|
|
1802
|
+
.ui-media--reverse {
|
|
1803
|
+
direction: ltr;
|
|
1804
|
+
}
|
|
1312
1805
|
|
|
1313
|
-
.ui-hero {
|
|
1314
|
-
|
|
1315
|
-
|
|
1806
|
+
.ui-hero {
|
|
1807
|
+
padding: 3rem 1.25rem;
|
|
1808
|
+
}
|
|
1809
|
+
.ui-hero-title {
|
|
1810
|
+
font-size: 2rem;
|
|
1811
|
+
}
|
|
1812
|
+
.ui-hero-subtitle {
|
|
1813
|
+
font-size: 1rem;
|
|
1814
|
+
}
|
|
1316
1815
|
|
|
1317
|
-
.ui-nav-links
|
|
1318
|
-
|
|
1319
|
-
|
|
1816
|
+
.ui-nav-links {
|
|
1817
|
+
display: none;
|
|
1818
|
+
}
|
|
1819
|
+
.ui-nav-burger {
|
|
1820
|
+
display: flex;
|
|
1821
|
+
}
|
|
1822
|
+
.ui-nav-inner {
|
|
1823
|
+
gap: 0.75rem;
|
|
1824
|
+
}
|
|
1320
1825
|
}
|
|
1321
1826
|
|
|
1322
1827
|
/* ─── Utilities ──────────────────────────────────────────────────────────────
|
|
@@ -1327,10 +1832,12 @@ hr.ui-divider {
|
|
|
1327
1832
|
/* Screen-reader only — visually hidden but accessible to assistive tech */
|
|
1328
1833
|
.ui-sr-only {
|
|
1329
1834
|
position: absolute;
|
|
1330
|
-
width: 1px;
|
|
1331
|
-
|
|
1835
|
+
width: 1px;
|
|
1836
|
+
height: 1px;
|
|
1837
|
+
padding: 0;
|
|
1838
|
+
margin: -1px;
|
|
1332
1839
|
overflow: hidden;
|
|
1333
|
-
clip: rect(0,0,0,0);
|
|
1840
|
+
clip: rect(0, 0, 0, 0);
|
|
1334
1841
|
white-space: nowrap;
|
|
1335
1842
|
border: 0;
|
|
1336
1843
|
}
|
|
@@ -1338,381 +1845,716 @@ hr.ui-divider {
|
|
|
1338
1845
|
/* Spacing scale: 1=4px 2=8px 3=12px 4=16px 5=20px 6=24px 8=32px 10=40px 12=48px 16=64px */
|
|
1339
1846
|
|
|
1340
1847
|
/* Margin top */
|
|
1341
|
-
.u-mt-0
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
.u-mt-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
.u-mt-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
.u-mt-
|
|
1351
|
-
|
|
1848
|
+
.u-mt-0 {
|
|
1849
|
+
margin-top: 0;
|
|
1850
|
+
}
|
|
1851
|
+
.u-mt-1 {
|
|
1852
|
+
margin-top: 0.25rem;
|
|
1853
|
+
}
|
|
1854
|
+
.u-mt-2 {
|
|
1855
|
+
margin-top: 0.5rem;
|
|
1856
|
+
}
|
|
1857
|
+
.u-mt-3 {
|
|
1858
|
+
margin-top: 0.75rem;
|
|
1859
|
+
}
|
|
1860
|
+
.u-mt-4 {
|
|
1861
|
+
margin-top: 1rem;
|
|
1862
|
+
}
|
|
1863
|
+
.u-mt-5 {
|
|
1864
|
+
margin-top: 1.25rem;
|
|
1865
|
+
}
|
|
1866
|
+
.u-mt-6 {
|
|
1867
|
+
margin-top: 1.5rem;
|
|
1868
|
+
}
|
|
1869
|
+
.u-mt-8 {
|
|
1870
|
+
margin-top: 2rem;
|
|
1871
|
+
}
|
|
1872
|
+
.u-mt-10 {
|
|
1873
|
+
margin-top: 2.5rem;
|
|
1874
|
+
}
|
|
1875
|
+
.u-mt-12 {
|
|
1876
|
+
margin-top: 3rem;
|
|
1877
|
+
}
|
|
1878
|
+
.u-mt-16 {
|
|
1879
|
+
margin-top: 4rem;
|
|
1880
|
+
}
|
|
1352
1881
|
|
|
1353
1882
|
/* Margin bottom */
|
|
1354
|
-
.u-mb-0
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
.u-mb-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
.u-mb-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
.u-mb-
|
|
1364
|
-
|
|
1883
|
+
.u-mb-0 {
|
|
1884
|
+
margin-bottom: 0;
|
|
1885
|
+
}
|
|
1886
|
+
.u-mb-1 {
|
|
1887
|
+
margin-bottom: 0.25rem;
|
|
1888
|
+
}
|
|
1889
|
+
.u-mb-2 {
|
|
1890
|
+
margin-bottom: 0.5rem;
|
|
1891
|
+
}
|
|
1892
|
+
.u-mb-3 {
|
|
1893
|
+
margin-bottom: 0.75rem;
|
|
1894
|
+
}
|
|
1895
|
+
.u-mb-4 {
|
|
1896
|
+
margin-bottom: 1rem;
|
|
1897
|
+
}
|
|
1898
|
+
.u-mb-5 {
|
|
1899
|
+
margin-bottom: 1.25rem;
|
|
1900
|
+
}
|
|
1901
|
+
.u-mb-6 {
|
|
1902
|
+
margin-bottom: 1.5rem;
|
|
1903
|
+
}
|
|
1904
|
+
.u-mb-8 {
|
|
1905
|
+
margin-bottom: 2rem;
|
|
1906
|
+
}
|
|
1907
|
+
.u-mb-10 {
|
|
1908
|
+
margin-bottom: 2.5rem;
|
|
1909
|
+
}
|
|
1910
|
+
.u-mb-12 {
|
|
1911
|
+
margin-bottom: 3rem;
|
|
1912
|
+
}
|
|
1913
|
+
.u-mb-16 {
|
|
1914
|
+
margin-bottom: 4rem;
|
|
1915
|
+
}
|
|
1365
1916
|
|
|
1366
1917
|
/* Margin left / right / auto */
|
|
1367
|
-
.u-ml-auto {
|
|
1368
|
-
|
|
1369
|
-
|
|
1918
|
+
.u-ml-auto {
|
|
1919
|
+
margin-left: auto;
|
|
1920
|
+
}
|
|
1921
|
+
.u-mr-auto {
|
|
1922
|
+
margin-right: auto;
|
|
1923
|
+
}
|
|
1924
|
+
.u-mx-auto {
|
|
1925
|
+
margin-left: auto;
|
|
1926
|
+
margin-right: auto;
|
|
1927
|
+
}
|
|
1370
1928
|
|
|
1371
1929
|
/* Padding */
|
|
1372
|
-
.u-p-0
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
.u-p-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
.u-p-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
.u-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
.u-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
.u-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
.u-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
.u-
|
|
1394
|
-
|
|
1395
|
-
|
|
1930
|
+
.u-p-0 {
|
|
1931
|
+
padding: 0;
|
|
1932
|
+
}
|
|
1933
|
+
.u-p-1 {
|
|
1934
|
+
padding: 0.25rem;
|
|
1935
|
+
}
|
|
1936
|
+
.u-p-2 {
|
|
1937
|
+
padding: 0.5rem;
|
|
1938
|
+
}
|
|
1939
|
+
.u-p-3 {
|
|
1940
|
+
padding: 0.75rem;
|
|
1941
|
+
}
|
|
1942
|
+
.u-p-4 {
|
|
1943
|
+
padding: 1rem;
|
|
1944
|
+
}
|
|
1945
|
+
.u-p-5 {
|
|
1946
|
+
padding: 1.25rem;
|
|
1947
|
+
}
|
|
1948
|
+
.u-p-6 {
|
|
1949
|
+
padding: 1.5rem;
|
|
1950
|
+
}
|
|
1951
|
+
.u-p-8 {
|
|
1952
|
+
padding: 2rem;
|
|
1953
|
+
}
|
|
1954
|
+
|
|
1955
|
+
.u-px-0 {
|
|
1956
|
+
padding-left: 0;
|
|
1957
|
+
padding-right: 0;
|
|
1958
|
+
}
|
|
1959
|
+
.u-px-2 {
|
|
1960
|
+
padding-left: 0.5rem;
|
|
1961
|
+
padding-right: 0.5rem;
|
|
1962
|
+
}
|
|
1963
|
+
.u-px-3 {
|
|
1964
|
+
padding-left: 0.75rem;
|
|
1965
|
+
padding-right: 0.75rem;
|
|
1966
|
+
}
|
|
1967
|
+
.u-px-4 {
|
|
1968
|
+
padding-left: 1rem;
|
|
1969
|
+
padding-right: 1rem;
|
|
1970
|
+
}
|
|
1971
|
+
.u-px-5 {
|
|
1972
|
+
padding-left: 1.25rem;
|
|
1973
|
+
padding-right: 1.25rem;
|
|
1974
|
+
}
|
|
1975
|
+
.u-px-6 {
|
|
1976
|
+
padding-left: 1.5rem;
|
|
1977
|
+
padding-right: 1.5rem;
|
|
1978
|
+
}
|
|
1979
|
+
.u-px-8 {
|
|
1980
|
+
padding-left: 2rem;
|
|
1981
|
+
padding-right: 2rem;
|
|
1982
|
+
}
|
|
1983
|
+
|
|
1984
|
+
.u-py-0 {
|
|
1985
|
+
padding-top: 0;
|
|
1986
|
+
padding-bottom: 0;
|
|
1987
|
+
}
|
|
1988
|
+
.u-py-2 {
|
|
1989
|
+
padding-top: 0.5rem;
|
|
1990
|
+
padding-bottom: 0.5rem;
|
|
1991
|
+
}
|
|
1992
|
+
.u-py-3 {
|
|
1993
|
+
padding-top: 0.75rem;
|
|
1994
|
+
padding-bottom: 0.75rem;
|
|
1995
|
+
}
|
|
1996
|
+
.u-py-4 {
|
|
1997
|
+
padding-top: 1rem;
|
|
1998
|
+
padding-bottom: 1rem;
|
|
1999
|
+
}
|
|
2000
|
+
.u-py-5 {
|
|
2001
|
+
padding-top: 1.25rem;
|
|
2002
|
+
padding-bottom: 1.25rem;
|
|
2003
|
+
}
|
|
2004
|
+
.u-py-6 {
|
|
2005
|
+
padding-top: 1.5rem;
|
|
2006
|
+
padding-bottom: 1.5rem;
|
|
2007
|
+
}
|
|
2008
|
+
.u-py-8 {
|
|
2009
|
+
padding-top: 2rem;
|
|
2010
|
+
padding-bottom: 2rem;
|
|
2011
|
+
}
|
|
1396
2012
|
|
|
1397
2013
|
/* Typography — size */
|
|
1398
|
-
.u-text-xs
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
.u-text-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
.u-text-
|
|
1407
|
-
|
|
1408
|
-
|
|
2014
|
+
.u-text-xs {
|
|
2015
|
+
font-size: 0.75rem;
|
|
2016
|
+
line-height: 1.4;
|
|
2017
|
+
}
|
|
2018
|
+
.u-text-sm {
|
|
2019
|
+
font-size: 0.875rem;
|
|
2020
|
+
line-height: 1.5;
|
|
2021
|
+
}
|
|
2022
|
+
.u-text-base {
|
|
2023
|
+
font-size: 1rem;
|
|
2024
|
+
line-height: 1.6;
|
|
2025
|
+
}
|
|
2026
|
+
.u-text-lg {
|
|
2027
|
+
font-size: 1.125rem;
|
|
2028
|
+
line-height: 1.5;
|
|
2029
|
+
}
|
|
2030
|
+
.u-text-xl {
|
|
2031
|
+
font-size: 1.25rem;
|
|
2032
|
+
line-height: 1.4;
|
|
2033
|
+
}
|
|
2034
|
+
.u-text-2xl {
|
|
2035
|
+
font-size: 1.5rem;
|
|
2036
|
+
line-height: 1.3;
|
|
2037
|
+
}
|
|
2038
|
+
.u-text-3xl {
|
|
2039
|
+
font-size: 1.875rem;
|
|
2040
|
+
line-height: 1.2;
|
|
2041
|
+
}
|
|
2042
|
+
.u-text-4xl {
|
|
2043
|
+
font-size: 2.25rem;
|
|
2044
|
+
line-height: 1.15;
|
|
2045
|
+
}
|
|
2046
|
+
.u-text-5xl {
|
|
2047
|
+
font-size: 3rem;
|
|
2048
|
+
line-height: 1.1;
|
|
2049
|
+
}
|
|
2050
|
+
.u-text-6xl {
|
|
2051
|
+
font-size: 4rem;
|
|
2052
|
+
line-height: 1.05;
|
|
2053
|
+
}
|
|
2054
|
+
.u-text-7xl {
|
|
2055
|
+
font-size: 5rem;
|
|
2056
|
+
line-height: 1;
|
|
2057
|
+
}
|
|
1409
2058
|
|
|
1410
2059
|
/* Typography — weight */
|
|
1411
|
-
.u-font-normal
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
.u-font-
|
|
2060
|
+
.u-font-normal {
|
|
2061
|
+
font-weight: 400;
|
|
2062
|
+
}
|
|
2063
|
+
.u-font-medium {
|
|
2064
|
+
font-weight: 500;
|
|
2065
|
+
}
|
|
2066
|
+
.u-font-semibold {
|
|
2067
|
+
font-weight: 600;
|
|
2068
|
+
}
|
|
2069
|
+
.u-font-bold {
|
|
2070
|
+
font-weight: 700;
|
|
2071
|
+
}
|
|
1415
2072
|
|
|
1416
2073
|
/* Typography — alignment */
|
|
1417
|
-
.u-text-left
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
.u-text-
|
|
2074
|
+
.u-text-left {
|
|
2075
|
+
text-align: left;
|
|
2076
|
+
}
|
|
2077
|
+
.u-text-center {
|
|
2078
|
+
text-align: center;
|
|
2079
|
+
}
|
|
2080
|
+
.u-text-right {
|
|
2081
|
+
text-align: right;
|
|
2082
|
+
}
|
|
2083
|
+
.u-text-balance {
|
|
2084
|
+
text-wrap: balance;
|
|
2085
|
+
}
|
|
1421
2086
|
|
|
1422
2087
|
/* Typography — color (uses tokens so theme overrides apply) */
|
|
1423
|
-
.u-text-default {
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
.u-text-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
.u-text-
|
|
2088
|
+
.u-text-default {
|
|
2089
|
+
color: var(--ui-text);
|
|
2090
|
+
}
|
|
2091
|
+
.u-text-muted {
|
|
2092
|
+
color: var(--ui-muted);
|
|
2093
|
+
}
|
|
2094
|
+
.u-text-accent {
|
|
2095
|
+
color: var(--ui-accent);
|
|
2096
|
+
}
|
|
2097
|
+
.u-text-green {
|
|
2098
|
+
color: var(--ui-green);
|
|
2099
|
+
}
|
|
2100
|
+
.u-text-red {
|
|
2101
|
+
color: var(--ui-red);
|
|
2102
|
+
}
|
|
2103
|
+
.u-text-yellow {
|
|
2104
|
+
color: var(--ui-yellow);
|
|
2105
|
+
}
|
|
2106
|
+
.u-text-blue {
|
|
2107
|
+
color: var(--ui-blue);
|
|
2108
|
+
}
|
|
1430
2109
|
|
|
1431
2110
|
/* Typography — line height */
|
|
1432
|
-
.u-leading-tight
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
.u-leading-
|
|
1436
|
-
|
|
2111
|
+
.u-leading-tight {
|
|
2112
|
+
line-height: 1.25;
|
|
2113
|
+
}
|
|
2114
|
+
.u-leading-snug {
|
|
2115
|
+
line-height: 1.375;
|
|
2116
|
+
}
|
|
2117
|
+
.u-leading-normal {
|
|
2118
|
+
line-height: 1.5;
|
|
2119
|
+
}
|
|
2120
|
+
.u-leading-relaxed {
|
|
2121
|
+
line-height: 1.625;
|
|
2122
|
+
}
|
|
2123
|
+
.u-leading-loose {
|
|
2124
|
+
line-height: 2;
|
|
2125
|
+
}
|
|
1437
2126
|
|
|
1438
2127
|
/* Width */
|
|
1439
|
-
.u-w-full
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
.u-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
.u-max-w-
|
|
1446
|
-
|
|
2128
|
+
.u-w-full {
|
|
2129
|
+
width: 100%;
|
|
2130
|
+
}
|
|
2131
|
+
.u-w-auto {
|
|
2132
|
+
width: auto;
|
|
2133
|
+
}
|
|
2134
|
+
.u-max-w-xs {
|
|
2135
|
+
max-width: 320px;
|
|
2136
|
+
}
|
|
2137
|
+
.u-max-w-sm {
|
|
2138
|
+
max-width: 480px;
|
|
2139
|
+
}
|
|
2140
|
+
.u-max-w-md {
|
|
2141
|
+
max-width: 640px;
|
|
2142
|
+
}
|
|
2143
|
+
.u-max-w-lg {
|
|
2144
|
+
max-width: 800px;
|
|
2145
|
+
}
|
|
2146
|
+
.u-max-w-xl {
|
|
2147
|
+
max-width: 1024px;
|
|
2148
|
+
}
|
|
2149
|
+
.u-max-w-prose {
|
|
2150
|
+
max-width: 65ch;
|
|
2151
|
+
}
|
|
1447
2152
|
|
|
1448
2153
|
/* Display */
|
|
1449
|
-
.u-block
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
.u-
|
|
2154
|
+
.u-block {
|
|
2155
|
+
display: block;
|
|
2156
|
+
}
|
|
2157
|
+
.u-inline {
|
|
2158
|
+
display: inline;
|
|
2159
|
+
}
|
|
2160
|
+
.u-inline-block {
|
|
2161
|
+
display: inline-block;
|
|
2162
|
+
}
|
|
2163
|
+
.u-hidden {
|
|
2164
|
+
display: none;
|
|
2165
|
+
}
|
|
1453
2166
|
|
|
1454
2167
|
/* Flexbox */
|
|
1455
|
-
.u-flex
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
.u-flex-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
.u-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
.u-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
.u-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
.u-
|
|
1476
|
-
|
|
1477
|
-
|
|
2168
|
+
.u-flex {
|
|
2169
|
+
display: flex;
|
|
2170
|
+
}
|
|
2171
|
+
.u-flex-col {
|
|
2172
|
+
display: flex;
|
|
2173
|
+
flex-direction: column;
|
|
2174
|
+
}
|
|
2175
|
+
.u-flex-wrap {
|
|
2176
|
+
flex-wrap: wrap;
|
|
2177
|
+
}
|
|
2178
|
+
.u-flex-1 {
|
|
2179
|
+
flex: 1;
|
|
2180
|
+
}
|
|
2181
|
+
.u-shrink-0 {
|
|
2182
|
+
flex-shrink: 0;
|
|
2183
|
+
}
|
|
2184
|
+
|
|
2185
|
+
.u-items-start {
|
|
2186
|
+
align-items: flex-start;
|
|
2187
|
+
}
|
|
2188
|
+
.u-items-center {
|
|
2189
|
+
align-items: center;
|
|
2190
|
+
}
|
|
2191
|
+
.u-items-end {
|
|
2192
|
+
align-items: flex-end;
|
|
2193
|
+
}
|
|
2194
|
+
.u-items-stretch {
|
|
2195
|
+
align-items: stretch;
|
|
2196
|
+
}
|
|
2197
|
+
|
|
2198
|
+
.u-justify-start {
|
|
2199
|
+
justify-content: flex-start;
|
|
2200
|
+
}
|
|
2201
|
+
.u-justify-center {
|
|
2202
|
+
justify-content: center;
|
|
2203
|
+
}
|
|
2204
|
+
.u-justify-end {
|
|
2205
|
+
justify-content: flex-end;
|
|
2206
|
+
}
|
|
2207
|
+
.u-justify-between {
|
|
2208
|
+
justify-content: space-between;
|
|
2209
|
+
}
|
|
2210
|
+
|
|
2211
|
+
.u-gap-1 {
|
|
2212
|
+
gap: 0.25rem;
|
|
2213
|
+
}
|
|
2214
|
+
.u-gap-2 {
|
|
2215
|
+
gap: 0.5rem;
|
|
2216
|
+
}
|
|
2217
|
+
.u-gap-3 {
|
|
2218
|
+
gap: 0.75rem;
|
|
2219
|
+
}
|
|
2220
|
+
.u-gap-4 {
|
|
2221
|
+
gap: 1rem;
|
|
2222
|
+
}
|
|
2223
|
+
.u-gap-5 {
|
|
2224
|
+
gap: 1.25rem;
|
|
2225
|
+
}
|
|
2226
|
+
.u-gap-6 {
|
|
2227
|
+
gap: 1.5rem;
|
|
2228
|
+
}
|
|
2229
|
+
.u-gap-8 {
|
|
2230
|
+
gap: 2rem;
|
|
2231
|
+
}
|
|
1478
2232
|
|
|
1479
2233
|
/* Border radius */
|
|
1480
|
-
.u-rounded
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
.u-rounded-
|
|
1484
|
-
|
|
2234
|
+
.u-rounded {
|
|
2235
|
+
border-radius: var(--ui-radius-sm);
|
|
2236
|
+
}
|
|
2237
|
+
.u-rounded-md {
|
|
2238
|
+
border-radius: var(--ui-radius);
|
|
2239
|
+
}
|
|
2240
|
+
.u-rounded-lg {
|
|
2241
|
+
border-radius: calc(var(--ui-radius) * 1.5);
|
|
2242
|
+
}
|
|
2243
|
+
.u-rounded-xl {
|
|
2244
|
+
border-radius: calc(var(--ui-radius) * 2);
|
|
2245
|
+
}
|
|
2246
|
+
.u-rounded-full {
|
|
2247
|
+
border-radius: 9999px;
|
|
2248
|
+
}
|
|
1485
2249
|
|
|
1486
2250
|
/* Border */
|
|
1487
|
-
.u-border
|
|
1488
|
-
|
|
1489
|
-
|
|
2251
|
+
.u-border {
|
|
2252
|
+
border: 1px solid var(--ui-border);
|
|
2253
|
+
}
|
|
2254
|
+
.u-border-t {
|
|
2255
|
+
border-top: 1px solid var(--ui-border);
|
|
2256
|
+
}
|
|
2257
|
+
.u-border-b {
|
|
2258
|
+
border-bottom: 1px solid var(--ui-border);
|
|
2259
|
+
}
|
|
1490
2260
|
|
|
1491
2261
|
/* Background */
|
|
1492
|
-
.u-bg-surface
|
|
1493
|
-
|
|
1494
|
-
|
|
2262
|
+
.u-bg-surface {
|
|
2263
|
+
background: var(--ui-surface);
|
|
2264
|
+
}
|
|
2265
|
+
.u-bg-surface2 {
|
|
2266
|
+
background: var(--ui-surface-2);
|
|
2267
|
+
}
|
|
2268
|
+
.u-bg-accent {
|
|
2269
|
+
background: var(--ui-accent);
|
|
2270
|
+
}
|
|
1495
2271
|
|
|
1496
2272
|
/* Overflow */
|
|
1497
|
-
.u-overflow-hidden {
|
|
1498
|
-
|
|
2273
|
+
.u-overflow-hidden {
|
|
2274
|
+
overflow: hidden;
|
|
2275
|
+
}
|
|
2276
|
+
.u-overflow-auto {
|
|
2277
|
+
overflow: auto;
|
|
2278
|
+
}
|
|
1499
2279
|
|
|
1500
2280
|
/* Position */
|
|
1501
|
-
.u-relative {
|
|
1502
|
-
|
|
2281
|
+
.u-relative {
|
|
2282
|
+
position: relative;
|
|
2283
|
+
}
|
|
2284
|
+
.u-absolute {
|
|
2285
|
+
position: absolute;
|
|
2286
|
+
}
|
|
1503
2287
|
|
|
1504
2288
|
/* Opacity */
|
|
1505
|
-
.u-opacity-50
|
|
1506
|
-
|
|
2289
|
+
.u-opacity-50 {
|
|
2290
|
+
opacity: 0.5;
|
|
2291
|
+
}
|
|
2292
|
+
.u-opacity-75 {
|
|
2293
|
+
opacity: 0.75;
|
|
2294
|
+
}
|
|
1507
2295
|
|
|
1508
2296
|
/* ─── Section header ─────────────────────────────────────────────────────────
|
|
1509
2297
|
Optional heading block prepended to section() when eyebrow/title/subtitle
|
|
1510
2298
|
props are supplied. Sits above the content slot. */
|
|
1511
|
-
.ui-section-header
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
2299
|
+
.ui-section-header {
|
|
2300
|
+
width: 100%;
|
|
2301
|
+
max-width: 1100px;
|
|
2302
|
+
margin: 0 auto 2.5rem;
|
|
2303
|
+
padding-left: 1.5rem;
|
|
2304
|
+
padding-right: 1.5rem;
|
|
2305
|
+
}
|
|
2306
|
+
.ui-section-header--center {
|
|
2307
|
+
text-align: center;
|
|
2308
|
+
}
|
|
2309
|
+
.ui-section-header--gap-none {
|
|
2310
|
+
margin-bottom: 0;
|
|
2311
|
+
}
|
|
2312
|
+
.ui-section-header--gap-sm {
|
|
2313
|
+
margin-bottom: 1.25rem;
|
|
2314
|
+
}
|
|
2315
|
+
.ui-section-header--gap-lg {
|
|
2316
|
+
margin-bottom: 4rem;
|
|
2317
|
+
}
|
|
1516
2318
|
|
|
1517
2319
|
.ui-section-eyebrow {
|
|
1518
|
-
display:
|
|
1519
|
-
font-size:
|
|
1520
|
-
font-weight:
|
|
1521
|
-
letter-spacing: .08em;
|
|
2320
|
+
display: block;
|
|
2321
|
+
font-size: 0.75rem;
|
|
2322
|
+
font-weight: 600;
|
|
2323
|
+
letter-spacing: 0.08em;
|
|
1522
2324
|
text-transform: uppercase;
|
|
1523
|
-
color:
|
|
1524
|
-
margin:
|
|
2325
|
+
color: var(--ui-accent);
|
|
2326
|
+
margin: 0 0 2rem;
|
|
1525
2327
|
}
|
|
1526
2328
|
|
|
1527
2329
|
.ui-section-title {
|
|
1528
|
-
font-size:
|
|
2330
|
+
font-size: 2rem;
|
|
1529
2331
|
font-weight: 700;
|
|
1530
2332
|
line-height: 1.15;
|
|
1531
|
-
color:
|
|
1532
|
-
margin:
|
|
2333
|
+
color: var(--ui-text);
|
|
2334
|
+
margin: 0 0 1.25rem;
|
|
1533
2335
|
}
|
|
1534
2336
|
|
|
1535
2337
|
.ui-section-subtitle {
|
|
1536
|
-
font-size:
|
|
1537
|
-
color:
|
|
2338
|
+
font-size: 1rem;
|
|
2339
|
+
color: var(--ui-muted);
|
|
1538
2340
|
line-height: 1.65;
|
|
1539
|
-
margin:
|
|
1540
|
-
max-width:
|
|
2341
|
+
margin: 0;
|
|
2342
|
+
max-width: 58ch;
|
|
1541
2343
|
}
|
|
1542
2344
|
|
|
1543
|
-
.ui-section-header--center .ui-section-subtitle {
|
|
2345
|
+
.ui-section-header--center .ui-section-subtitle {
|
|
2346
|
+
margin-left: auto;
|
|
2347
|
+
margin-right: auto;
|
|
2348
|
+
}
|
|
1544
2349
|
|
|
1545
2350
|
@media (max-width: 640px) {
|
|
1546
|
-
.ui-section-title
|
|
1547
|
-
|
|
2351
|
+
.ui-section-title {
|
|
2352
|
+
font-size: 1.5rem;
|
|
2353
|
+
}
|
|
2354
|
+
.ui-section-header {
|
|
2355
|
+
margin-bottom: 2rem;
|
|
2356
|
+
}
|
|
1548
2357
|
}
|
|
1549
2358
|
|
|
1550
2359
|
/* ─── CTA ────────────────────────────────────────────────────────────────────
|
|
1551
2360
|
Call-to-action block. Sits inside section() + container(). */
|
|
1552
|
-
.ui-cta
|
|
1553
|
-
|
|
2361
|
+
.ui-cta {
|
|
2362
|
+
text-align: center;
|
|
2363
|
+
}
|
|
2364
|
+
.ui-cta--left {
|
|
2365
|
+
text-align: left;
|
|
2366
|
+
}
|
|
1554
2367
|
|
|
1555
2368
|
.ui-cta-eyebrow {
|
|
1556
|
-
display:
|
|
1557
|
-
font-size:
|
|
1558
|
-
font-weight:
|
|
1559
|
-
letter-spacing: .08em;
|
|
2369
|
+
display: block;
|
|
2370
|
+
font-size: 0.75rem;
|
|
2371
|
+
font-weight: 600;
|
|
2372
|
+
letter-spacing: 0.08em;
|
|
1560
2373
|
text-transform: uppercase;
|
|
1561
|
-
color:
|
|
1562
|
-
margin:
|
|
2374
|
+
color: var(--ui-accent);
|
|
2375
|
+
margin: 0 0 0.75rem;
|
|
1563
2376
|
}
|
|
1564
2377
|
|
|
1565
2378
|
.ui-cta-title {
|
|
1566
|
-
font-size:
|
|
2379
|
+
font-size: 2.5rem;
|
|
1567
2380
|
font-weight: 700;
|
|
1568
2381
|
line-height: 1.1;
|
|
1569
|
-
color:
|
|
1570
|
-
margin:
|
|
2382
|
+
color: var(--ui-text);
|
|
2383
|
+
margin: 0 0 1rem;
|
|
1571
2384
|
}
|
|
1572
2385
|
|
|
1573
2386
|
.ui-cta-subtitle {
|
|
1574
|
-
font-size:
|
|
1575
|
-
color:
|
|
2387
|
+
font-size: 1.05rem;
|
|
2388
|
+
color: var(--ui-muted);
|
|
1576
2389
|
line-height: 1.65;
|
|
1577
|
-
max-width:
|
|
1578
|
-
margin:
|
|
2390
|
+
max-width: 56ch;
|
|
2391
|
+
margin: 0 auto 2rem;
|
|
1579
2392
|
}
|
|
1580
2393
|
|
|
1581
|
-
.ui-cta--left .ui-cta-subtitle {
|
|
2394
|
+
.ui-cta--left .ui-cta-subtitle {
|
|
2395
|
+
margin-left: 0;
|
|
2396
|
+
}
|
|
1582
2397
|
|
|
1583
2398
|
.ui-cta-actions {
|
|
1584
|
-
display:
|
|
1585
|
-
gap:
|
|
1586
|
-
flex-wrap:
|
|
2399
|
+
display: flex;
|
|
2400
|
+
gap: 1rem;
|
|
2401
|
+
flex-wrap: wrap;
|
|
1587
2402
|
justify-content: center;
|
|
1588
2403
|
}
|
|
1589
2404
|
|
|
1590
|
-
.ui-cta--left .ui-cta-actions {
|
|
2405
|
+
.ui-cta--left .ui-cta-actions {
|
|
2406
|
+
justify-content: flex-start;
|
|
2407
|
+
}
|
|
1591
2408
|
|
|
1592
2409
|
@media (max-width: 640px) {
|
|
1593
|
-
.ui-cta-title
|
|
1594
|
-
|
|
2410
|
+
.ui-cta-title {
|
|
2411
|
+
font-size: 1.75rem;
|
|
2412
|
+
}
|
|
2413
|
+
.ui-cta-actions {
|
|
2414
|
+
flex-direction: column;
|
|
2415
|
+
align-items: stretch;
|
|
2416
|
+
}
|
|
1595
2417
|
}
|
|
1596
2418
|
|
|
1597
2419
|
/* ─── Code Window ────────────────────────────────────────────────────────────
|
|
1598
2420
|
macOS-style window chrome around a <pre><code> block. */
|
|
1599
2421
|
.ui-code-window {
|
|
1600
|
-
background:
|
|
1601
|
-
border:
|
|
2422
|
+
background: var(--ui-surface-2);
|
|
2423
|
+
border: 1px solid var(--ui-border);
|
|
1602
2424
|
border-radius: var(--ui-radius);
|
|
1603
|
-
overflow:
|
|
2425
|
+
overflow: hidden;
|
|
1604
2426
|
}
|
|
1605
2427
|
|
|
1606
2428
|
.ui-code-window-chrome {
|
|
1607
|
-
display:
|
|
1608
|
-
align-items:
|
|
1609
|
-
gap:
|
|
1610
|
-
padding:
|
|
1611
|
-
background:
|
|
1612
|
-
border-bottom:
|
|
2429
|
+
display: flex;
|
|
2430
|
+
align-items: center;
|
|
2431
|
+
gap: 0.4rem;
|
|
2432
|
+
padding: 0.6rem 1rem;
|
|
2433
|
+
background: var(--ui-surface);
|
|
2434
|
+
border-bottom: 1px solid var(--ui-border);
|
|
1613
2435
|
}
|
|
1614
2436
|
|
|
1615
2437
|
.ui-code-window-dot {
|
|
1616
|
-
width:
|
|
1617
|
-
height:
|
|
2438
|
+
width: 10px;
|
|
2439
|
+
height: 10px;
|
|
1618
2440
|
border-radius: 50%;
|
|
1619
|
-
flex-shrink:
|
|
2441
|
+
flex-shrink: 0;
|
|
1620
2442
|
}
|
|
1621
2443
|
|
|
1622
|
-
.ui-code-window-dot:nth-child(1) {
|
|
1623
|
-
|
|
1624
|
-
|
|
2444
|
+
.ui-code-window-dot:nth-child(1) {
|
|
2445
|
+
background: #ff5f57;
|
|
2446
|
+
}
|
|
2447
|
+
.ui-code-window-dot:nth-child(2) {
|
|
2448
|
+
background: #febc2e;
|
|
2449
|
+
}
|
|
2450
|
+
.ui-code-window-dot:nth-child(3) {
|
|
2451
|
+
background: #28c840;
|
|
2452
|
+
}
|
|
1625
2453
|
|
|
1626
2454
|
.ui-code-window-filename {
|
|
1627
|
-
font-size:
|
|
2455
|
+
font-size: 0.75rem;
|
|
1628
2456
|
font-family: var(--ui-mono);
|
|
1629
|
-
color:
|
|
1630
|
-
margin-left: .35rem;
|
|
2457
|
+
color: rgba(255, 255, 255, 0.5);
|
|
2458
|
+
margin-left: 0.35rem;
|
|
1631
2459
|
}
|
|
1632
2460
|
|
|
1633
2461
|
.ui-code-window-lang {
|
|
1634
|
-
font-size:
|
|
2462
|
+
font-size: 0.7rem;
|
|
1635
2463
|
font-family: var(--ui-mono);
|
|
1636
|
-
color:
|
|
2464
|
+
color: #9898b2;
|
|
1637
2465
|
margin-left: auto;
|
|
1638
2466
|
}
|
|
1639
2467
|
|
|
1640
2468
|
.ui-code-window-pre {
|
|
1641
|
-
margin:
|
|
1642
|
-
padding:
|
|
1643
|
-
overflow-x:
|
|
2469
|
+
margin: 0;
|
|
2470
|
+
padding: 1.25rem 1.5rem;
|
|
2471
|
+
overflow-x: auto;
|
|
1644
2472
|
font-family: var(--ui-mono);
|
|
1645
|
-
font-size:
|
|
2473
|
+
font-size: 0.85rem;
|
|
1646
2474
|
line-height: 1.7;
|
|
1647
|
-
color:
|
|
1648
|
-
tab-size:
|
|
2475
|
+
color: var(--ui-text);
|
|
2476
|
+
tab-size: 2;
|
|
1649
2477
|
}
|
|
1650
2478
|
|
|
1651
|
-
.ui-code-window-code {
|
|
2479
|
+
.ui-code-window-code {
|
|
2480
|
+
font-family: inherit;
|
|
2481
|
+
}
|
|
1652
2482
|
|
|
1653
2483
|
/* ─── Footer ─────────────────────────────────────────────────────────────────
|
|
1654
2484
|
Site footer — logo, nav links, legal text. Stacks on mobile. */
|
|
1655
2485
|
.ui-footer {
|
|
1656
|
-
padding:
|
|
2486
|
+
padding: 3rem 1.5rem;
|
|
1657
2487
|
border-top: 1px solid var(--ui-border);
|
|
1658
2488
|
}
|
|
1659
2489
|
|
|
1660
2490
|
.ui-footer-inner {
|
|
1661
|
-
max-width:
|
|
1662
|
-
margin:
|
|
1663
|
-
display:
|
|
2491
|
+
max-width: 1200px;
|
|
2492
|
+
margin: 0 auto;
|
|
2493
|
+
display: flex;
|
|
1664
2494
|
align-items: center;
|
|
1665
|
-
gap:
|
|
1666
|
-
flex-wrap:
|
|
2495
|
+
gap: 2rem;
|
|
2496
|
+
flex-wrap: wrap;
|
|
1667
2497
|
}
|
|
1668
2498
|
|
|
1669
2499
|
.ui-footer-logo {
|
|
1670
|
-
font-size:
|
|
1671
|
-
font-weight:
|
|
1672
|
-
color:
|
|
2500
|
+
font-size: 1rem;
|
|
2501
|
+
font-weight: 600;
|
|
2502
|
+
color: var(--ui-text);
|
|
1673
2503
|
text-decoration: none;
|
|
1674
|
-
flex-shrink:
|
|
1675
|
-
transition:
|
|
2504
|
+
flex-shrink: 0;
|
|
2505
|
+
transition: color 0.15s;
|
|
1676
2506
|
}
|
|
1677
2507
|
|
|
1678
|
-
.ui-footer-logo:hover
|
|
2508
|
+
.ui-footer-logo:hover {
|
|
2509
|
+
color: var(--ui-accent);
|
|
2510
|
+
}
|
|
1679
2511
|
.ui-footer-logo:focus-visible {
|
|
1680
|
-
outline:
|
|
2512
|
+
outline: 2px solid var(--ui-accent);
|
|
1681
2513
|
outline-offset: 2px;
|
|
1682
|
-
border-radius:
|
|
2514
|
+
border-radius: 2px;
|
|
1683
2515
|
}
|
|
1684
2516
|
|
|
1685
2517
|
.ui-footer-links {
|
|
1686
|
-
display:
|
|
1687
|
-
gap:
|
|
2518
|
+
display: flex;
|
|
2519
|
+
gap: 1.5rem;
|
|
1688
2520
|
flex-wrap: wrap;
|
|
1689
|
-
flex:
|
|
2521
|
+
flex: 1;
|
|
1690
2522
|
}
|
|
1691
2523
|
|
|
1692
2524
|
.ui-footer-link {
|
|
1693
|
-
font-size:
|
|
1694
|
-
color:
|
|
2525
|
+
font-size: 0.875rem;
|
|
2526
|
+
color: var(--ui-muted);
|
|
1695
2527
|
text-decoration: none;
|
|
1696
|
-
transition:
|
|
2528
|
+
transition: color 0.15s;
|
|
1697
2529
|
}
|
|
1698
2530
|
|
|
1699
|
-
.ui-footer-link:hover {
|
|
2531
|
+
.ui-footer-link:hover {
|
|
2532
|
+
color: var(--ui-text);
|
|
2533
|
+
}
|
|
1700
2534
|
.ui-footer-link:focus-visible {
|
|
1701
|
-
outline:
|
|
2535
|
+
outline: 2px solid var(--ui-accent);
|
|
1702
2536
|
outline-offset: 2px;
|
|
1703
|
-
border-radius:
|
|
2537
|
+
border-radius: 2px;
|
|
1704
2538
|
}
|
|
1705
2539
|
|
|
1706
2540
|
.ui-footer-legal {
|
|
1707
|
-
font-size: .8rem;
|
|
1708
|
-
color:
|
|
1709
|
-
margin:
|
|
2541
|
+
font-size: 0.8rem;
|
|
2542
|
+
color: var(--ui-muted);
|
|
2543
|
+
margin: 0 0 0 auto;
|
|
1710
2544
|
}
|
|
1711
2545
|
|
|
1712
2546
|
@media (max-width: 640px) {
|
|
1713
|
-
.ui-footer-inner
|
|
1714
|
-
|
|
1715
|
-
|
|
2547
|
+
.ui-footer-inner {
|
|
2548
|
+
flex-direction: column;
|
|
2549
|
+
align-items: flex-start;
|
|
2550
|
+
gap: 1.25rem;
|
|
2551
|
+
}
|
|
2552
|
+
.ui-footer-legal {
|
|
2553
|
+
margin-left: 0;
|
|
2554
|
+
}
|
|
2555
|
+
.ui-footer-links {
|
|
2556
|
+
gap: 1rem;
|
|
2557
|
+
}
|
|
1716
2558
|
}
|
|
1717
2559
|
|
|
1718
2560
|
/* ─── Icon wrapper ───────────────────────────────────────────────────────────
|
|
@@ -1720,22 +2562,41 @@ hr.ui-divider {
|
|
|
1720
2562
|
bg: 'circle' → border-radius: 50% | bg: 'square' → var(--ui-radius) */
|
|
1721
2563
|
|
|
1722
2564
|
.ui-icon-wrap {
|
|
1723
|
-
display:
|
|
1724
|
-
align-items:
|
|
2565
|
+
display: inline-flex;
|
|
2566
|
+
align-items: center;
|
|
1725
2567
|
justify-content: center;
|
|
1726
|
-
padding:
|
|
1727
|
-
flex-shrink:
|
|
1728
|
-
line-height:
|
|
2568
|
+
padding: 0.55em;
|
|
2569
|
+
flex-shrink: 0;
|
|
2570
|
+
line-height: 1;
|
|
1729
2571
|
}
|
|
1730
2572
|
|
|
1731
|
-
.ui-icon-wrap--circle {
|
|
1732
|
-
|
|
2573
|
+
.ui-icon-wrap--circle {
|
|
2574
|
+
border-radius: 50%;
|
|
2575
|
+
}
|
|
2576
|
+
.ui-icon-wrap--square {
|
|
2577
|
+
border-radius: var(--ui-radius);
|
|
2578
|
+
}
|
|
1733
2579
|
|
|
1734
|
-
.ui-icon-wrap--accent
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
.ui-icon-wrap--
|
|
2580
|
+
.ui-icon-wrap--accent {
|
|
2581
|
+
background: var(--ui-accent-dim);
|
|
2582
|
+
color: var(--ui-accent);
|
|
2583
|
+
}
|
|
2584
|
+
.ui-icon-wrap--success {
|
|
2585
|
+
background: var(--ui-green-dim);
|
|
2586
|
+
color: var(--ui-green);
|
|
2587
|
+
}
|
|
2588
|
+
.ui-icon-wrap--warning {
|
|
2589
|
+
background: var(--ui-yellow-dim);
|
|
2590
|
+
color: var(--ui-yellow);
|
|
2591
|
+
}
|
|
2592
|
+
.ui-icon-wrap--error {
|
|
2593
|
+
background: var(--ui-red-dim);
|
|
2594
|
+
color: var(--ui-red);
|
|
2595
|
+
}
|
|
2596
|
+
.ui-icon-wrap--muted {
|
|
2597
|
+
background: var(--ui-surface-2);
|
|
2598
|
+
color: var(--ui-muted);
|
|
2599
|
+
}
|
|
1739
2600
|
|
|
1740
2601
|
/* ─── Timeline ───────────────────────────────────────────────────────────────
|
|
1741
2602
|
Shared rules (dot, label, body) apply to both orientations. */
|
|
@@ -1743,88 +2604,119 @@ hr.ui-divider {
|
|
|
1743
2604
|
/* Shared base */
|
|
1744
2605
|
.ui-timeline {
|
|
1745
2606
|
list-style: none;
|
|
1746
|
-
padding:
|
|
1747
|
-
margin:
|
|
2607
|
+
padding: 0;
|
|
2608
|
+
margin: 0;
|
|
1748
2609
|
}
|
|
1749
2610
|
|
|
1750
2611
|
.ui-timeline-dot {
|
|
1751
|
-
width:
|
|
1752
|
-
height:
|
|
2612
|
+
width: 10px;
|
|
2613
|
+
height: 10px;
|
|
1753
2614
|
border-radius: 50%;
|
|
1754
|
-
flex-shrink:
|
|
1755
|
-
display:
|
|
1756
|
-
align-items:
|
|
2615
|
+
flex-shrink: 0;
|
|
2616
|
+
display: flex;
|
|
2617
|
+
align-items: center;
|
|
1757
2618
|
justify-content: center;
|
|
1758
|
-
position:
|
|
1759
|
-
z-index:
|
|
2619
|
+
position: relative;
|
|
2620
|
+
z-index: 1;
|
|
1760
2621
|
}
|
|
1761
2622
|
|
|
1762
2623
|
/* Icon dot — larger, with dim background */
|
|
1763
2624
|
.ui-timeline-dot--icon {
|
|
1764
|
-
width:
|
|
1765
|
-
height:
|
|
2625
|
+
width: 2rem;
|
|
2626
|
+
height: 2rem;
|
|
1766
2627
|
border-radius: 50%;
|
|
1767
|
-
font-size:
|
|
2628
|
+
font-size: 1rem;
|
|
1768
2629
|
}
|
|
1769
2630
|
|
|
1770
2631
|
/* Dot colour variants */
|
|
1771
|
-
.ui-timeline-dot--accent
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
.ui-timeline-dot--
|
|
1775
|
-
|
|
2632
|
+
.ui-timeline-dot--accent {
|
|
2633
|
+
background: var(--ui-accent);
|
|
2634
|
+
}
|
|
2635
|
+
.ui-timeline-dot--success {
|
|
2636
|
+
background: var(--ui-green);
|
|
2637
|
+
}
|
|
2638
|
+
.ui-timeline-dot--warning {
|
|
2639
|
+
background: var(--ui-yellow);
|
|
2640
|
+
}
|
|
2641
|
+
.ui-timeline-dot--error {
|
|
2642
|
+
background: var(--ui-red);
|
|
2643
|
+
}
|
|
2644
|
+
.ui-timeline-dot--muted {
|
|
2645
|
+
background: var(--ui-surface-2);
|
|
2646
|
+
outline: 2px solid var(--ui-border);
|
|
2647
|
+
outline-offset: 0;
|
|
2648
|
+
}
|
|
1776
2649
|
|
|
1777
2650
|
/* Icon dot: dim background + coloured icon */
|
|
1778
|
-
.ui-timeline-dot--icon.ui-timeline-dot--accent
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
.ui-timeline-dot--icon.ui-timeline-dot--
|
|
2651
|
+
.ui-timeline-dot--icon.ui-timeline-dot--accent {
|
|
2652
|
+
background: var(--ui-accent-dim);
|
|
2653
|
+
color: var(--ui-accent);
|
|
2654
|
+
}
|
|
2655
|
+
.ui-timeline-dot--icon.ui-timeline-dot--success {
|
|
2656
|
+
background: var(--ui-green-dim);
|
|
2657
|
+
color: var(--ui-green);
|
|
2658
|
+
}
|
|
2659
|
+
.ui-timeline-dot--icon.ui-timeline-dot--warning {
|
|
2660
|
+
background: var(--ui-yellow-dim);
|
|
2661
|
+
color: var(--ui-yellow);
|
|
2662
|
+
}
|
|
2663
|
+
.ui-timeline-dot--icon.ui-timeline-dot--error {
|
|
2664
|
+
background: var(--ui-red-dim);
|
|
2665
|
+
color: var(--ui-red);
|
|
2666
|
+
}
|
|
2667
|
+
.ui-timeline-dot--icon.ui-timeline-dot--muted {
|
|
2668
|
+
background: var(--ui-surface-2);
|
|
2669
|
+
color: var(--ui-muted);
|
|
2670
|
+
}
|
|
1783
2671
|
|
|
1784
2672
|
.ui-timeline-label {
|
|
1785
|
-
display:
|
|
1786
|
-
font-size:
|
|
1787
|
-
font-weight:
|
|
1788
|
-
color:
|
|
1789
|
-
letter-spacing: .05em;
|
|
2673
|
+
display: block;
|
|
2674
|
+
font-size: 0.72rem;
|
|
2675
|
+
font-weight: 600;
|
|
2676
|
+
color: var(--ui-muted);
|
|
2677
|
+
letter-spacing: 0.05em;
|
|
1790
2678
|
text-transform: uppercase;
|
|
1791
|
-
margin-bottom:
|
|
2679
|
+
margin-bottom: 0.35rem;
|
|
1792
2680
|
}
|
|
1793
2681
|
|
|
1794
2682
|
/* ── Vertical ── */
|
|
1795
2683
|
.ui-timeline--vertical {
|
|
1796
|
-
display:
|
|
2684
|
+
display: flex;
|
|
1797
2685
|
flex-direction: column;
|
|
1798
2686
|
}
|
|
1799
2687
|
|
|
1800
2688
|
.ui-timeline--vertical .ui-timeline-item {
|
|
1801
2689
|
display: flex;
|
|
1802
|
-
gap:
|
|
2690
|
+
gap: 1rem;
|
|
1803
2691
|
}
|
|
1804
2692
|
|
|
1805
2693
|
.ui-timeline--vertical .ui-timeline-side {
|
|
1806
|
-
display:
|
|
2694
|
+
display: flex;
|
|
1807
2695
|
flex-direction: column;
|
|
1808
|
-
align-items:
|
|
1809
|
-
flex-shrink:
|
|
2696
|
+
align-items: center;
|
|
2697
|
+
flex-shrink: 0;
|
|
1810
2698
|
}
|
|
1811
2699
|
|
|
1812
2700
|
/* Connecting line segments run above and below the dot */
|
|
1813
2701
|
.ui-timeline--vertical .ui-timeline-connector {
|
|
1814
|
-
width:
|
|
2702
|
+
width: 2px;
|
|
1815
2703
|
background: var(--ui-border);
|
|
1816
|
-
flex:
|
|
1817
|
-
min-height: .75rem;
|
|
2704
|
+
flex: 1;
|
|
2705
|
+
min-height: 0.75rem;
|
|
1818
2706
|
}
|
|
1819
2707
|
|
|
1820
2708
|
/* No line above the first item or below the last */
|
|
1821
|
-
.ui-timeline--vertical
|
|
1822
|
-
.ui-timeline
|
|
2709
|
+
.ui-timeline--vertical
|
|
2710
|
+
.ui-timeline-item:first-child
|
|
2711
|
+
.ui-timeline-connector--before,
|
|
2712
|
+
.ui-timeline--vertical
|
|
2713
|
+
.ui-timeline-item:last-child
|
|
2714
|
+
.ui-timeline-connector--after {
|
|
1823
2715
|
visibility: hidden;
|
|
1824
2716
|
}
|
|
1825
2717
|
|
|
1826
2718
|
.ui-timeline--vertical .ui-timeline-main {
|
|
1827
|
-
flex:
|
|
2719
|
+
flex: 1;
|
|
1828
2720
|
padding-bottom: 1.75rem;
|
|
1829
2721
|
}
|
|
1830
2722
|
|
|
@@ -1834,90 +2726,96 @@ hr.ui-divider {
|
|
|
1834
2726
|
|
|
1835
2727
|
/* ── Horizontal ── */
|
|
1836
2728
|
.ui-timeline--horizontal {
|
|
1837
|
-
display:
|
|
2729
|
+
display: flex;
|
|
1838
2730
|
align-items: flex-start;
|
|
1839
|
-
overflow-x:
|
|
2731
|
+
overflow-x: auto;
|
|
1840
2732
|
}
|
|
1841
2733
|
|
|
1842
2734
|
.ui-timeline--horizontal .ui-timeline-item {
|
|
1843
|
-
flex:
|
|
1844
|
-
min-width:
|
|
1845
|
-
display:
|
|
2735
|
+
flex: 1;
|
|
2736
|
+
min-width: 0;
|
|
2737
|
+
display: flex;
|
|
1846
2738
|
flex-direction: column;
|
|
1847
|
-
align-items:
|
|
2739
|
+
align-items: center;
|
|
1848
2740
|
}
|
|
1849
2741
|
|
|
1850
2742
|
.ui-timeline--horizontal .ui-timeline-side {
|
|
1851
|
-
display:
|
|
1852
|
-
align-items:
|
|
1853
|
-
width:
|
|
1854
|
-
margin-bottom: .75rem;
|
|
2743
|
+
display: flex;
|
|
2744
|
+
align-items: center;
|
|
2745
|
+
width: 100%;
|
|
2746
|
+
margin-bottom: 0.75rem;
|
|
1855
2747
|
}
|
|
1856
2748
|
|
|
1857
2749
|
.ui-timeline--horizontal .ui-timeline-connector {
|
|
1858
|
-
flex:
|
|
1859
|
-
height:
|
|
2750
|
+
flex: 1;
|
|
2751
|
+
height: 2px;
|
|
1860
2752
|
background: var(--ui-border);
|
|
1861
2753
|
}
|
|
1862
2754
|
|
|
1863
2755
|
/* No line before the first item or after the last */
|
|
1864
|
-
.ui-timeline--horizontal
|
|
1865
|
-
.ui-timeline
|
|
2756
|
+
.ui-timeline--horizontal
|
|
2757
|
+
.ui-timeline-item:first-child
|
|
2758
|
+
.ui-timeline-connector--before,
|
|
2759
|
+
.ui-timeline--horizontal
|
|
2760
|
+
.ui-timeline-item:last-child
|
|
2761
|
+
.ui-timeline-connector--after {
|
|
1866
2762
|
visibility: hidden;
|
|
1867
2763
|
}
|
|
1868
2764
|
|
|
1869
2765
|
.ui-timeline--horizontal .ui-timeline-main {
|
|
1870
2766
|
text-align: center;
|
|
1871
|
-
padding:
|
|
1872
|
-
width:
|
|
2767
|
+
padding: 0 0.5rem;
|
|
2768
|
+
width: 100%;
|
|
1873
2769
|
}
|
|
1874
2770
|
|
|
1875
2771
|
/* ─── Switch ─────────────────────────────────────────────────────────────── */
|
|
1876
2772
|
.ui-switch-input {
|
|
1877
2773
|
position: absolute;
|
|
1878
|
-
width:
|
|
1879
|
-
height:
|
|
1880
|
-
padding:
|
|
1881
|
-
margin:
|
|
2774
|
+
width: 1px;
|
|
2775
|
+
height: 1px;
|
|
2776
|
+
padding: 0;
|
|
2777
|
+
margin: -1px;
|
|
1882
2778
|
overflow: hidden;
|
|
1883
|
-
clip:
|
|
1884
|
-
border:
|
|
2779
|
+
clip: rect(0, 0, 0, 0);
|
|
2780
|
+
border: 0;
|
|
1885
2781
|
}
|
|
1886
2782
|
|
|
1887
2783
|
.ui-switch-label {
|
|
1888
|
-
display:
|
|
2784
|
+
display: inline-flex;
|
|
1889
2785
|
align-items: center;
|
|
1890
|
-
gap:
|
|
1891
|
-
cursor:
|
|
2786
|
+
gap: 0.65rem;
|
|
2787
|
+
cursor: pointer;
|
|
1892
2788
|
user-select: none;
|
|
1893
2789
|
}
|
|
1894
2790
|
|
|
1895
2791
|
.ui-switch-label--disabled {
|
|
1896
|
-
opacity: .5;
|
|
1897
|
-
cursor:
|
|
2792
|
+
opacity: 0.5;
|
|
2793
|
+
cursor: not-allowed;
|
|
1898
2794
|
}
|
|
1899
2795
|
|
|
1900
2796
|
.ui-switch-track {
|
|
1901
|
-
position:
|
|
1902
|
-
display:
|
|
1903
|
-
align-items:
|
|
1904
|
-
width:
|
|
1905
|
-
height:
|
|
1906
|
-
border-radius:
|
|
1907
|
-
background:
|
|
1908
|
-
transition:
|
|
1909
|
-
flex-shrink:
|
|
2797
|
+
position: relative;
|
|
2798
|
+
display: inline-flex;
|
|
2799
|
+
align-items: center;
|
|
2800
|
+
width: 3rem;
|
|
2801
|
+
height: 1.75rem;
|
|
2802
|
+
border-radius: 999px;
|
|
2803
|
+
background: var(--ui-border);
|
|
2804
|
+
transition: background 0.2s;
|
|
2805
|
+
flex-shrink: 0;
|
|
1910
2806
|
}
|
|
1911
2807
|
|
|
1912
2808
|
.ui-switch-thumb {
|
|
1913
|
-
position:
|
|
1914
|
-
left:
|
|
1915
|
-
width:
|
|
1916
|
-
height:
|
|
2809
|
+
position: absolute;
|
|
2810
|
+
left: 0.2rem;
|
|
2811
|
+
width: 1.35rem;
|
|
2812
|
+
height: 1.35rem;
|
|
1917
2813
|
border-radius: 50%;
|
|
1918
|
-
background:
|
|
1919
|
-
box-shadow:
|
|
1920
|
-
transition:
|
|
2814
|
+
background: #fff;
|
|
2815
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
2816
|
+
transition:
|
|
2817
|
+
transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
2818
|
+
background 0.2s;
|
|
1921
2819
|
}
|
|
1922
2820
|
|
|
1923
2821
|
.ui-switch-input:checked + .ui-switch-track {
|
|
@@ -1929,98 +2827,102 @@ hr.ui-divider {
|
|
|
1929
2827
|
}
|
|
1930
2828
|
|
|
1931
2829
|
.ui-switch-input:focus-visible + .ui-switch-track {
|
|
1932
|
-
outline:
|
|
2830
|
+
outline: 2px solid var(--ui-accent);
|
|
1933
2831
|
outline-offset: 2px;
|
|
1934
2832
|
}
|
|
1935
2833
|
|
|
1936
2834
|
.ui-switch-text {
|
|
1937
2835
|
font-family: var(--ui-font);
|
|
1938
|
-
font-size:
|
|
1939
|
-
color:
|
|
2836
|
+
font-size: 0.9rem;
|
|
2837
|
+
color: var(--ui-text);
|
|
1940
2838
|
line-height: 1.4;
|
|
1941
2839
|
}
|
|
1942
2840
|
|
|
1943
2841
|
/* ─── Radio ──────────────────────────────────────────────────────────────── */
|
|
1944
2842
|
.ui-radio-group {
|
|
1945
|
-
border:
|
|
2843
|
+
border: 1px solid var(--ui-border);
|
|
1946
2844
|
border-radius: var(--ui-radius);
|
|
1947
|
-
padding:
|
|
1948
|
-
margin:
|
|
2845
|
+
padding: 0;
|
|
2846
|
+
margin: 0;
|
|
1949
2847
|
}
|
|
1950
2848
|
|
|
1951
2849
|
.ui-radio-group-body {
|
|
1952
|
-
display:
|
|
2850
|
+
display: flex;
|
|
1953
2851
|
flex-direction: column;
|
|
1954
|
-
gap:
|
|
1955
|
-
padding:
|
|
2852
|
+
gap: var(--radio-gap, 0.75rem);
|
|
2853
|
+
padding: 1.25rem;
|
|
1956
2854
|
}
|
|
1957
2855
|
|
|
1958
2856
|
/* ─── Checkbox ───────────────────────────────────────────────────────────── */
|
|
1959
2857
|
.ui-checkbox {
|
|
1960
|
-
display:
|
|
2858
|
+
display: inline-flex;
|
|
1961
2859
|
align-items: flex-start;
|
|
1962
|
-
gap:
|
|
1963
|
-
cursor:
|
|
2860
|
+
gap: 0.6rem;
|
|
2861
|
+
cursor: pointer;
|
|
1964
2862
|
user-select: none;
|
|
1965
2863
|
}
|
|
1966
2864
|
|
|
1967
2865
|
.ui-checkbox--disabled {
|
|
1968
|
-
opacity: .5;
|
|
1969
|
-
cursor:
|
|
2866
|
+
opacity: 0.5;
|
|
2867
|
+
cursor: not-allowed;
|
|
1970
2868
|
}
|
|
1971
2869
|
|
|
1972
2870
|
.ui-checkbox-input {
|
|
1973
2871
|
position: absolute;
|
|
1974
|
-
width:
|
|
1975
|
-
height:
|
|
1976
|
-
padding:
|
|
1977
|
-
margin:
|
|
2872
|
+
width: 1px;
|
|
2873
|
+
height: 1px;
|
|
2874
|
+
padding: 0;
|
|
2875
|
+
margin: -1px;
|
|
1978
2876
|
overflow: hidden;
|
|
1979
|
-
clip:
|
|
1980
|
-
border:
|
|
2877
|
+
clip: rect(0, 0, 0, 0);
|
|
2878
|
+
border: 0;
|
|
1981
2879
|
}
|
|
1982
2880
|
|
|
1983
2881
|
.ui-checkbox-box {
|
|
1984
|
-
position:
|
|
1985
|
-
display:
|
|
1986
|
-
align-items:
|
|
2882
|
+
position: relative;
|
|
2883
|
+
display: inline-flex;
|
|
2884
|
+
align-items: center;
|
|
1987
2885
|
justify-content: center;
|
|
1988
|
-
width:
|
|
1989
|
-
height:
|
|
1990
|
-
border-radius:
|
|
1991
|
-
border:
|
|
1992
|
-
background:
|
|
1993
|
-
flex-shrink:
|
|
1994
|
-
margin-top:
|
|
1995
|
-
transition:
|
|
2886
|
+
width: 1.125rem;
|
|
2887
|
+
height: 1.125rem;
|
|
2888
|
+
border-radius: 0.25rem;
|
|
2889
|
+
border: 2px solid var(--ui-border);
|
|
2890
|
+
background: var(--ui-surface);
|
|
2891
|
+
flex-shrink: 0;
|
|
2892
|
+
margin-top: 0.125rem;
|
|
2893
|
+
transition:
|
|
2894
|
+
border-color 0.15s,
|
|
2895
|
+
background 0.15s;
|
|
1996
2896
|
}
|
|
1997
2897
|
|
|
1998
2898
|
.ui-checkbox-box::after {
|
|
1999
|
-
content:
|
|
2000
|
-
position:
|
|
2001
|
-
width:
|
|
2002
|
-
height:
|
|
2003
|
-
border-right:
|
|
2004
|
-
border-bottom:
|
|
2005
|
-
transform:
|
|
2899
|
+
content: "";
|
|
2900
|
+
position: absolute;
|
|
2901
|
+
width: 0.3rem;
|
|
2902
|
+
height: 0.55rem;
|
|
2903
|
+
border-right: 2px solid var(--ui-bg);
|
|
2904
|
+
border-bottom: 2px solid var(--ui-bg);
|
|
2905
|
+
transform: rotate(45deg) scale(0);
|
|
2006
2906
|
transform-origin: center;
|
|
2007
|
-
margin-top:
|
|
2008
|
-
opacity:
|
|
2009
|
-
transition:
|
|
2907
|
+
margin-top: -0.1rem;
|
|
2908
|
+
opacity: 0;
|
|
2909
|
+
transition:
|
|
2910
|
+
opacity 0.1s,
|
|
2911
|
+
transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
2010
2912
|
}
|
|
2011
2913
|
|
|
2012
2914
|
.ui-checkbox-input:checked + .ui-checkbox-box {
|
|
2013
2915
|
border-color: var(--ui-accent);
|
|
2014
|
-
background:
|
|
2916
|
+
background: var(--ui-accent);
|
|
2015
2917
|
}
|
|
2016
2918
|
|
|
2017
2919
|
.ui-checkbox-input:checked + .ui-checkbox-box::after {
|
|
2018
|
-
opacity:
|
|
2920
|
+
opacity: 1;
|
|
2019
2921
|
transform: rotate(45deg) scale(1);
|
|
2020
2922
|
}
|
|
2021
2923
|
|
|
2022
2924
|
.ui-checkbox-input:focus-visible + .ui-checkbox-box {
|
|
2023
|
-
outline:
|
|
2925
|
+
outline: 2px solid var(--ui-accent);
|
|
2024
2926
|
outline-offset: 2px;
|
|
2025
2927
|
}
|
|
2026
2928
|
|
|
@@ -2030,80 +2932,84 @@ hr.ui-divider {
|
|
|
2030
2932
|
|
|
2031
2933
|
.ui-checkbox-label {
|
|
2032
2934
|
font-family: var(--ui-font);
|
|
2033
|
-
font-size:
|
|
2034
|
-
color:
|
|
2935
|
+
font-size: 0.9rem;
|
|
2936
|
+
color: var(--ui-text);
|
|
2035
2937
|
line-height: 1.4;
|
|
2036
2938
|
}
|
|
2037
2939
|
|
|
2038
2940
|
/* ─── Radio ──────────────────────────────────────────────────────────────── */
|
|
2039
2941
|
.ui-radio {
|
|
2040
|
-
display:
|
|
2942
|
+
display: inline-flex;
|
|
2041
2943
|
align-items: center;
|
|
2042
|
-
gap:
|
|
2043
|
-
cursor:
|
|
2944
|
+
gap: 0.6rem;
|
|
2945
|
+
cursor: pointer;
|
|
2044
2946
|
user-select: none;
|
|
2045
2947
|
}
|
|
2046
2948
|
|
|
2047
2949
|
.ui-radio--disabled {
|
|
2048
|
-
opacity: .5;
|
|
2049
|
-
cursor:
|
|
2950
|
+
opacity: 0.5;
|
|
2951
|
+
cursor: not-allowed;
|
|
2050
2952
|
}
|
|
2051
2953
|
|
|
2052
2954
|
.ui-radio-input {
|
|
2053
2955
|
position: absolute;
|
|
2054
|
-
width:
|
|
2055
|
-
height:
|
|
2056
|
-
padding:
|
|
2057
|
-
margin:
|
|
2956
|
+
width: 1px;
|
|
2957
|
+
height: 1px;
|
|
2958
|
+
padding: 0;
|
|
2959
|
+
margin: -1px;
|
|
2058
2960
|
overflow: hidden;
|
|
2059
|
-
clip:
|
|
2060
|
-
border:
|
|
2961
|
+
clip: rect(0, 0, 0, 0);
|
|
2962
|
+
border: 0;
|
|
2061
2963
|
}
|
|
2062
2964
|
|
|
2063
2965
|
.ui-radio-dot {
|
|
2064
|
-
position:
|
|
2065
|
-
display:
|
|
2066
|
-
align-items:
|
|
2966
|
+
position: relative;
|
|
2967
|
+
display: inline-flex;
|
|
2968
|
+
align-items: center;
|
|
2067
2969
|
justify-content: center;
|
|
2068
|
-
width:
|
|
2069
|
-
height:
|
|
2970
|
+
width: 1.25rem;
|
|
2971
|
+
height: 1.25rem;
|
|
2070
2972
|
border-radius: 50%;
|
|
2071
|
-
border:
|
|
2072
|
-
background:
|
|
2073
|
-
flex-shrink:
|
|
2074
|
-
transition:
|
|
2973
|
+
border: 2px solid var(--ui-border);
|
|
2974
|
+
background: var(--ui-surface);
|
|
2975
|
+
flex-shrink: 0;
|
|
2976
|
+
transition:
|
|
2977
|
+
border-color 0.15s,
|
|
2978
|
+
background 0.15s;
|
|
2075
2979
|
}
|
|
2076
2980
|
|
|
2077
2981
|
.ui-radio-dot::after {
|
|
2078
|
-
content:
|
|
2079
|
-
width:
|
|
2080
|
-
height:
|
|
2982
|
+
content: "";
|
|
2983
|
+
width: 0.5rem;
|
|
2984
|
+
height: 0.5rem;
|
|
2081
2985
|
border-radius: 50%;
|
|
2082
|
-
background:
|
|
2083
|
-
opacity:
|
|
2084
|
-
transform:
|
|
2085
|
-
transition:
|
|
2986
|
+
background: var(--ui-bg);
|
|
2987
|
+
opacity: 0;
|
|
2988
|
+
transform: scale(0);
|
|
2989
|
+
transition:
|
|
2990
|
+
opacity 0.15s,
|
|
2991
|
+
transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
2086
2992
|
}
|
|
2087
2993
|
|
|
2088
2994
|
.ui-radio-input:checked + .ui-radio-dot {
|
|
2089
2995
|
border-color: var(--ui-accent);
|
|
2090
|
-
background:
|
|
2996
|
+
background: var(--ui-accent);
|
|
2091
2997
|
}
|
|
2092
2998
|
|
|
2093
2999
|
.ui-radio-input:checked + .ui-radio-dot::after {
|
|
2094
|
-
opacity:
|
|
3000
|
+
opacity: 1;
|
|
2095
3001
|
transform: scale(1);
|
|
2096
3002
|
}
|
|
2097
3003
|
|
|
2098
3004
|
.ui-radio-input:focus-visible + .ui-radio-dot {
|
|
2099
|
-
outline:
|
|
3005
|
+
outline: 2px solid var(--ui-accent);
|
|
2100
3006
|
outline-offset: 2px;
|
|
2101
3007
|
}
|
|
2102
3008
|
|
|
2103
3009
|
.ui-radio-label {
|
|
2104
3010
|
font-family: var(--ui-font);
|
|
2105
|
-
font-size:
|
|
2106
|
-
color:
|
|
3011
|
+
font-size: 0.9rem;
|
|
3012
|
+
color: var(--ui-text);
|
|
2107
3013
|
line-height: 1.4;
|
|
2108
3014
|
}
|
|
2109
3015
|
|
|
@@ -2113,44 +3019,46 @@ hr.ui-divider {
|
|
|
2113
3019
|
|
|
2114
3020
|
/* ─── Rating ─────────────────────────────────────────────────────────────── */
|
|
2115
3021
|
.ui-rating {
|
|
2116
|
-
display:
|
|
3022
|
+
display: inline-flex;
|
|
2117
3023
|
align-items: center;
|
|
2118
|
-
gap:
|
|
2119
|
-
font-size:
|
|
2120
|
-
color:
|
|
3024
|
+
gap: 0.1em;
|
|
3025
|
+
font-size: var(--rating-size, 1.5rem);
|
|
3026
|
+
color: var(--ui-muted);
|
|
2121
3027
|
line-height: 1;
|
|
2122
3028
|
}
|
|
2123
3029
|
|
|
2124
3030
|
/* Read-only stars */
|
|
2125
3031
|
.ui-rating-star--filled,
|
|
2126
|
-
.ui-rating-star--half {
|
|
3032
|
+
.ui-rating-star--half {
|
|
3033
|
+
color: var(--ui-yellow);
|
|
3034
|
+
}
|
|
2127
3035
|
|
|
2128
3036
|
/* Interactive stars container — row-reverse makes high→low DOM order appear as 1…max */
|
|
2129
3037
|
.ui-rating-stars {
|
|
2130
|
-
display:
|
|
3038
|
+
display: inline-flex;
|
|
2131
3039
|
flex-direction: row-reverse;
|
|
2132
|
-
gap:
|
|
2133
|
-
font-size:
|
|
2134
|
-
line-height:
|
|
3040
|
+
gap: 0.1em;
|
|
3041
|
+
font-size: var(--rating-size, 1.5rem);
|
|
3042
|
+
line-height: 1;
|
|
2135
3043
|
}
|
|
2136
3044
|
|
|
2137
3045
|
/* Each input is nested inside its label — hidden but in the tab order */
|
|
2138
3046
|
.ui-rating-input {
|
|
2139
3047
|
position: absolute;
|
|
2140
|
-
width:
|
|
2141
|
-
height:
|
|
2142
|
-
padding:
|
|
2143
|
-
margin:
|
|
3048
|
+
width: 1px;
|
|
3049
|
+
height: 1px;
|
|
3050
|
+
padding: 0;
|
|
3051
|
+
margin: -1px;
|
|
2144
3052
|
overflow: hidden;
|
|
2145
|
-
clip:
|
|
2146
|
-
border:
|
|
3053
|
+
clip: rect(0, 0, 0, 0);
|
|
3054
|
+
border: 0;
|
|
2147
3055
|
}
|
|
2148
3056
|
|
|
2149
3057
|
/* Star labels — only flex items, no invisible elements between them */
|
|
2150
3058
|
.ui-rating-stars .ui-rating-star {
|
|
2151
|
-
color:
|
|
2152
|
-
cursor:
|
|
2153
|
-
transition:
|
|
3059
|
+
color: var(--ui-muted);
|
|
3060
|
+
cursor: pointer;
|
|
3061
|
+
transition: color 0.1s;
|
|
2154
3062
|
user-select: none;
|
|
2155
3063
|
}
|
|
2156
3064
|
|
|
@@ -2162,95 +3070,122 @@ hr.ui-divider {
|
|
|
2162
3070
|
}
|
|
2163
3071
|
|
|
2164
3072
|
/* Hover: reset everything, then re-highlight up to the hovered star */
|
|
2165
|
-
.ui-rating-stars:hover .ui-rating-star {
|
|
3073
|
+
.ui-rating-stars:hover .ui-rating-star {
|
|
3074
|
+
color: var(--ui-muted);
|
|
3075
|
+
}
|
|
2166
3076
|
.ui-rating-stars .ui-rating-star:hover,
|
|
2167
|
-
.ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star {
|
|
3077
|
+
.ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star {
|
|
3078
|
+
color: var(--ui-yellow);
|
|
3079
|
+
}
|
|
2168
3080
|
|
|
2169
3081
|
/* Focus ring on the label when its input is keyboard-focused */
|
|
2170
3082
|
.ui-rating-star:focus-within {
|
|
2171
|
-
outline:
|
|
3083
|
+
outline: 2px solid var(--ui-accent);
|
|
2172
3084
|
outline-offset: 2px;
|
|
2173
|
-
border-radius:
|
|
3085
|
+
border-radius: 2px;
|
|
2174
3086
|
}
|
|
2175
3087
|
|
|
2176
3088
|
/* Disabled */
|
|
2177
3089
|
fieldset[disabled] .ui-rating-star {
|
|
2178
|
-
cursor:
|
|
2179
|
-
opacity: .5;
|
|
3090
|
+
cursor: not-allowed;
|
|
3091
|
+
opacity: 0.5;
|
|
3092
|
+
}
|
|
3093
|
+
fieldset[disabled] .ui-rating-stars:hover .ui-rating-star {
|
|
3094
|
+
color: revert;
|
|
2180
3095
|
}
|
|
2181
|
-
fieldset[disabled] .ui-rating-stars:hover .ui-rating-star { color: revert; }
|
|
2182
3096
|
fieldset[disabled] .ui-rating-stars .ui-rating-star:hover,
|
|
2183
|
-
fieldset[disabled] .ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star {
|
|
3097
|
+
fieldset[disabled] .ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star {
|
|
3098
|
+
color: revert;
|
|
3099
|
+
}
|
|
2184
3100
|
|
|
2185
3101
|
/* ─── Spinner ────────────────────────────────────────────────────────────── */
|
|
2186
3102
|
@keyframes ui-spin {
|
|
2187
|
-
to {
|
|
3103
|
+
to {
|
|
3104
|
+
transform: rotate(360deg);
|
|
3105
|
+
}
|
|
2188
3106
|
}
|
|
2189
3107
|
|
|
2190
3108
|
.ui-spinner {
|
|
2191
|
-
display:
|
|
2192
|
-
width:
|
|
2193
|
-
height:
|
|
2194
|
-
border:
|
|
3109
|
+
display: inline-block;
|
|
3110
|
+
width: var(--spinner-size, 1.5rem);
|
|
3111
|
+
height: var(--spinner-size, 1.5rem);
|
|
3112
|
+
border: 2px solid
|
|
3113
|
+
color-mix(in srgb, var(--spinner-color, var(--ui-accent)) 20%, transparent);
|
|
2195
3114
|
border-top-color: var(--spinner-color, var(--ui-accent));
|
|
2196
3115
|
border-radius: 50%;
|
|
2197
|
-
animation:
|
|
2198
|
-
flex-shrink:
|
|
3116
|
+
animation: ui-spin 0.7s linear infinite;
|
|
3117
|
+
flex-shrink: 0;
|
|
2199
3118
|
}
|
|
2200
3119
|
|
|
2201
3120
|
/* ─── Progress ───────────────────────────────────────────────────────────── */
|
|
2202
|
-
.ui-progress {
|
|
3121
|
+
.ui-progress {
|
|
3122
|
+
width: 100%;
|
|
3123
|
+
}
|
|
2203
3124
|
|
|
2204
3125
|
.ui-progress-header {
|
|
2205
|
-
display:
|
|
3126
|
+
display: flex;
|
|
2206
3127
|
justify-content: space-between;
|
|
2207
|
-
align-items:
|
|
2208
|
-
margin-bottom:
|
|
2209
|
-
gap:
|
|
3128
|
+
align-items: baseline;
|
|
3129
|
+
margin-bottom: 0.4rem;
|
|
3130
|
+
gap: 1rem;
|
|
2210
3131
|
}
|
|
2211
3132
|
|
|
2212
3133
|
.ui-progress-label {
|
|
2213
|
-
font-size:
|
|
3134
|
+
font-size: 0.8rem;
|
|
2214
3135
|
font-weight: 600;
|
|
2215
|
-
color:
|
|
3136
|
+
color: var(--ui-text);
|
|
2216
3137
|
}
|
|
2217
3138
|
|
|
2218
3139
|
.ui-progress-value {
|
|
2219
|
-
font-size:
|
|
2220
|
-
color:
|
|
3140
|
+
font-size: 0.8rem;
|
|
3141
|
+
color: var(--ui-muted);
|
|
2221
3142
|
font-variant-numeric: tabular-nums;
|
|
2222
3143
|
}
|
|
2223
3144
|
|
|
2224
3145
|
.ui-progress-track {
|
|
2225
|
-
width:
|
|
2226
|
-
height:
|
|
2227
|
-
background:
|
|
3146
|
+
width: 100%;
|
|
3147
|
+
height: var(--progress-height, 0.5rem);
|
|
3148
|
+
background: var(--ui-border);
|
|
2228
3149
|
border-radius: 999px;
|
|
2229
|
-
overflow:
|
|
3150
|
+
overflow: hidden;
|
|
2230
3151
|
}
|
|
2231
3152
|
|
|
2232
3153
|
.ui-progress-fill {
|
|
2233
|
-
height:
|
|
3154
|
+
height: 100%;
|
|
2234
3155
|
border-radius: 999px;
|
|
2235
|
-
transition:
|
|
3156
|
+
transition: width 0.3s ease;
|
|
2236
3157
|
}
|
|
2237
3158
|
|
|
2238
3159
|
/* Variants */
|
|
2239
|
-
.ui-progress--accent
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
.ui-progress--
|
|
3160
|
+
.ui-progress--accent .ui-progress-fill {
|
|
3161
|
+
background: var(--ui-accent);
|
|
3162
|
+
}
|
|
3163
|
+
.ui-progress--success .ui-progress-fill {
|
|
3164
|
+
background: var(--ui-green);
|
|
3165
|
+
}
|
|
3166
|
+
.ui-progress--warning .ui-progress-fill {
|
|
3167
|
+
background: var(--ui-yellow);
|
|
3168
|
+
}
|
|
3169
|
+
.ui-progress--error .ui-progress-fill {
|
|
3170
|
+
background: var(--ui-red);
|
|
3171
|
+
}
|
|
2243
3172
|
|
|
2244
3173
|
/* Indeterminate — animates a fill bar back and forth */
|
|
2245
3174
|
@keyframes ui-progress-indeterminate {
|
|
2246
|
-
0%
|
|
2247
|
-
|
|
2248
|
-
|
|
3175
|
+
0% {
|
|
3176
|
+
transform: translateX(-100%) scaleX(0.4);
|
|
3177
|
+
}
|
|
3178
|
+
50% {
|
|
3179
|
+
transform: translateX(60%) scaleX(0.6);
|
|
3180
|
+
}
|
|
3181
|
+
100% {
|
|
3182
|
+
transform: translateX(200%) scaleX(0.4);
|
|
3183
|
+
}
|
|
2249
3184
|
}
|
|
2250
3185
|
|
|
2251
3186
|
.ui-progress--indeterminate .ui-progress-fill {
|
|
2252
|
-
width:
|
|
2253
|
-
animation:
|
|
3187
|
+
width: 50%;
|
|
3188
|
+
animation: ui-progress-indeterminate 1.4s ease infinite;
|
|
2254
3189
|
transform-origin: left center;
|
|
2255
3190
|
}
|
|
2256
3191
|
|
|
@@ -2291,8 +3226,8 @@ fieldset[disabled] .ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star { co
|
|
|
2291
3226
|
border-radius: 50%;
|
|
2292
3227
|
background: var(--ui-accent);
|
|
2293
3228
|
margin-top: -8px;
|
|
2294
|
-
box-shadow: 0 1px 4px rgba(0,0,0
|
|
2295
|
-
transition: transform .15s;
|
|
3229
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
|
3230
|
+
transition: transform 0.15s;
|
|
2296
3231
|
}
|
|
2297
3232
|
.ui-slider::-moz-range-thumb {
|
|
2298
3233
|
width: 20px;
|
|
@@ -2300,89 +3235,110 @@ fieldset[disabled] .ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star { co
|
|
|
2300
3235
|
border-radius: 50%;
|
|
2301
3236
|
background: var(--ui-accent);
|
|
2302
3237
|
border: none;
|
|
2303
|
-
box-shadow: 0 1px 4px rgba(0,0,0
|
|
3238
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
|
3239
|
+
}
|
|
3240
|
+
.ui-slider::-webkit-slider-thumb:hover {
|
|
3241
|
+
transform: scale(1.15);
|
|
3242
|
+
}
|
|
3243
|
+
.ui-slider:focus-visible {
|
|
3244
|
+
outline: none;
|
|
2304
3245
|
}
|
|
2305
|
-
.ui-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
|
|
2306
|
-
.ui-slider:focus-visible { outline: none; }
|
|
2307
3246
|
.ui-slider:focus-visible::-webkit-slider-thumb {
|
|
2308
3247
|
outline: 2px solid var(--ui-accent);
|
|
2309
3248
|
outline-offset: 3px;
|
|
2310
3249
|
}
|
|
2311
|
-
.ui-slider:disabled {
|
|
3250
|
+
.ui-slider:disabled {
|
|
3251
|
+
opacity: 0.5;
|
|
3252
|
+
cursor: not-allowed;
|
|
3253
|
+
}
|
|
2312
3254
|
|
|
2313
3255
|
.ui-label--row {
|
|
2314
|
-
display:
|
|
3256
|
+
display: flex;
|
|
2315
3257
|
justify-content: space-between;
|
|
2316
|
-
align-items:
|
|
3258
|
+
align-items: baseline;
|
|
2317
3259
|
}
|
|
2318
3260
|
.ui-slider-output {
|
|
2319
|
-
font-size:
|
|
2320
|
-
color:
|
|
3261
|
+
font-size: 0.8125rem;
|
|
3262
|
+
color: var(--ui-muted);
|
|
2321
3263
|
font-variant-numeric: tabular-nums;
|
|
2322
|
-
min-width:
|
|
2323
|
-
text-align:
|
|
3264
|
+
min-width: 3ch;
|
|
3265
|
+
text-align: right;
|
|
2324
3266
|
}
|
|
2325
3267
|
|
|
2326
3268
|
/* ─── File Upload ────────────────────────────────────────────────────────── */
|
|
2327
3269
|
|
|
2328
3270
|
.ui-upload {
|
|
2329
|
-
position:
|
|
2330
|
-
display:
|
|
2331
|
-
align-items:
|
|
3271
|
+
position: relative;
|
|
3272
|
+
display: flex;
|
|
3273
|
+
align-items: center;
|
|
2332
3274
|
justify-content: center;
|
|
2333
|
-
padding:
|
|
2334
|
-
background:
|
|
2335
|
-
border:
|
|
2336
|
-
border-radius:
|
|
2337
|
-
cursor:
|
|
2338
|
-
transition:
|
|
2339
|
-
|
|
2340
|
-
|
|
3275
|
+
padding: 2rem 1.5rem;
|
|
3276
|
+
background: var(--ui-surface);
|
|
3277
|
+
border: 1.5px dashed var(--ui-border);
|
|
3278
|
+
border-radius: var(--ui-radius);
|
|
3279
|
+
cursor: pointer;
|
|
3280
|
+
transition:
|
|
3281
|
+
border-color 0.15s,
|
|
3282
|
+
background 0.15s;
|
|
3283
|
+
outline: none;
|
|
3284
|
+
user-select: none;
|
|
2341
3285
|
}
|
|
2342
3286
|
|
|
2343
3287
|
.ui-upload:hover:not(.ui-upload--disabled),
|
|
2344
3288
|
.ui-upload:focus-visible {
|
|
2345
3289
|
border-color: var(--ui-accent);
|
|
2346
|
-
background:
|
|
3290
|
+
background: color-mix(in srgb, var(--ui-accent) 5%, var(--ui-surface));
|
|
2347
3291
|
}
|
|
2348
3292
|
|
|
2349
3293
|
.ui-upload--active {
|
|
2350
3294
|
border-color: var(--ui-accent);
|
|
2351
|
-
background:
|
|
3295
|
+
background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface));
|
|
2352
3296
|
}
|
|
2353
3297
|
|
|
2354
|
-
.ui-upload--error
|
|
2355
|
-
|
|
2356
|
-
|
|
3298
|
+
.ui-upload--error {
|
|
3299
|
+
border-color: var(--ui-red);
|
|
3300
|
+
}
|
|
3301
|
+
.ui-upload--selected {
|
|
3302
|
+
border-color: var(--ui-accent);
|
|
3303
|
+
}
|
|
3304
|
+
.ui-upload--selected .ui-upload-text {
|
|
3305
|
+
color: var(--ui-text);
|
|
3306
|
+
font-weight: 500;
|
|
3307
|
+
}
|
|
2357
3308
|
|
|
2358
3309
|
.ui-upload--disabled {
|
|
2359
|
-
opacity: .5;
|
|
2360
|
-
cursor:
|
|
3310
|
+
opacity: 0.5;
|
|
3311
|
+
cursor: not-allowed;
|
|
2361
3312
|
}
|
|
2362
3313
|
|
|
2363
3314
|
.ui-upload-body {
|
|
2364
|
-
display:
|
|
2365
|
-
flex-direction:
|
|
2366
|
-
align-items:
|
|
2367
|
-
gap:
|
|
2368
|
-
pointer-events:
|
|
3315
|
+
display: flex;
|
|
3316
|
+
flex-direction: column;
|
|
3317
|
+
align-items: center;
|
|
3318
|
+
gap: 0.6rem;
|
|
3319
|
+
pointer-events: none;
|
|
2369
3320
|
}
|
|
2370
3321
|
|
|
2371
|
-
.ui-upload-icon {
|
|
3322
|
+
.ui-upload-icon {
|
|
3323
|
+
color: var(--ui-muted);
|
|
3324
|
+
display: block;
|
|
3325
|
+
}
|
|
2372
3326
|
|
|
2373
3327
|
.ui-upload:hover:not(.ui-upload--disabled) .ui-upload-icon,
|
|
2374
|
-
.ui-upload--active .ui-upload-icon {
|
|
3328
|
+
.ui-upload--active .ui-upload-icon {
|
|
3329
|
+
color: var(--ui-accent);
|
|
3330
|
+
}
|
|
2375
3331
|
|
|
2376
3332
|
.ui-upload-text {
|
|
2377
|
-
font-size:
|
|
2378
|
-
color:
|
|
2379
|
-
text-align:
|
|
3333
|
+
font-size: 0.875rem;
|
|
3334
|
+
color: var(--ui-muted);
|
|
3335
|
+
text-align: center;
|
|
2380
3336
|
line-height: 1.5;
|
|
2381
3337
|
}
|
|
2382
3338
|
|
|
2383
3339
|
.ui-upload-browse {
|
|
2384
|
-
color:
|
|
2385
|
-
text-decoration:
|
|
3340
|
+
color: var(--ui-accent);
|
|
3341
|
+
text-decoration: underline;
|
|
2386
3342
|
text-underline-offset: 2px;
|
|
2387
3343
|
}
|
|
2388
3344
|
|
|
@@ -2392,207 +3348,260 @@ fieldset[disabled] .ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star { co
|
|
|
2392
3348
|
|
|
2393
3349
|
/* ─── Segmented ─────────────────────────────────────────────────────────── */
|
|
2394
3350
|
.ui-segmented {
|
|
2395
|
-
display:
|
|
2396
|
-
background:
|
|
3351
|
+
display: inline-flex;
|
|
3352
|
+
background: var(--ui-surface-2);
|
|
2397
3353
|
border-radius: var(--ui-radius);
|
|
2398
|
-
padding:
|
|
2399
|
-
gap:
|
|
3354
|
+
padding: 3px;
|
|
3355
|
+
gap: 2px;
|
|
2400
3356
|
}
|
|
2401
3357
|
.ui-segmented-input {
|
|
2402
3358
|
position: absolute;
|
|
2403
|
-
width: 1px;
|
|
2404
|
-
|
|
2405
|
-
|
|
3359
|
+
width: 1px;
|
|
3360
|
+
height: 1px;
|
|
3361
|
+
padding: 0;
|
|
3362
|
+
margin: -1px;
|
|
3363
|
+
overflow: hidden;
|
|
3364
|
+
clip: rect(0, 0, 0, 0);
|
|
3365
|
+
border: 0;
|
|
2406
3366
|
}
|
|
2407
3367
|
.ui-segmented-label {
|
|
2408
|
-
display:
|
|
2409
|
-
align-items:
|
|
2410
|
-
padding:
|
|
3368
|
+
display: inline-flex;
|
|
3369
|
+
align-items: center;
|
|
3370
|
+
padding: 0.4rem 0.9rem;
|
|
2411
3371
|
border-radius: calc(var(--ui-radius) - 2px);
|
|
2412
|
-
font-size:
|
|
2413
|
-
font-weight:
|
|
2414
|
-
color:
|
|
2415
|
-
cursor:
|
|
2416
|
-
user-select:
|
|
2417
|
-
white-space:
|
|
2418
|
-
transition:
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
3372
|
+
font-size: 0.85rem;
|
|
3373
|
+
font-weight: 500;
|
|
3374
|
+
color: var(--ui-muted);
|
|
3375
|
+
cursor: pointer;
|
|
3376
|
+
user-select: none;
|
|
3377
|
+
white-space: nowrap;
|
|
3378
|
+
transition:
|
|
3379
|
+
background 0.15s,
|
|
3380
|
+
color 0.15s,
|
|
3381
|
+
box-shadow 0.15s;
|
|
3382
|
+
}
|
|
3383
|
+
.ui-segmented--sm .ui-segmented-label {
|
|
3384
|
+
font-size: 0.75rem;
|
|
3385
|
+
padding: 0.25rem 0.65rem;
|
|
3386
|
+
}
|
|
3387
|
+
.ui-segmented--lg .ui-segmented-label {
|
|
3388
|
+
font-size: 0.95rem;
|
|
3389
|
+
padding: 0.55rem 1.1rem;
|
|
3390
|
+
}
|
|
2422
3391
|
.ui-segmented-input:checked + .ui-segmented-label {
|
|
2423
|
-
background:
|
|
2424
|
-
color:
|
|
2425
|
-
box-shadow:
|
|
3392
|
+
background: var(--ui-surface);
|
|
3393
|
+
color: var(--ui-text);
|
|
3394
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
2426
3395
|
}
|
|
2427
3396
|
.ui-segmented-input:focus-visible + .ui-segmented-label {
|
|
2428
|
-
outline:
|
|
3397
|
+
outline: 2px solid var(--ui-accent);
|
|
2429
3398
|
outline-offset: 1px;
|
|
2430
3399
|
}
|
|
2431
3400
|
|
|
2432
3401
|
/* ─── Breadcrumbs ────────────────────────────────────────────────────────── */
|
|
2433
3402
|
.ui-breadcrumbs-list {
|
|
2434
|
-
display:
|
|
2435
|
-
flex-wrap:
|
|
3403
|
+
display: flex;
|
|
3404
|
+
flex-wrap: wrap;
|
|
2436
3405
|
align-items: center;
|
|
2437
|
-
gap:
|
|
2438
|
-
list-style:
|
|
2439
|
-
padding:
|
|
2440
|
-
margin:
|
|
2441
|
-
font-size:
|
|
3406
|
+
gap: 0.25rem;
|
|
3407
|
+
list-style: none;
|
|
3408
|
+
padding: 0;
|
|
3409
|
+
margin: 0;
|
|
3410
|
+
font-size: 0.85rem;
|
|
2442
3411
|
}
|
|
2443
3412
|
.ui-breadcrumbs-item {
|
|
2444
|
-
display:
|
|
3413
|
+
display: flex;
|
|
2445
3414
|
align-items: center;
|
|
2446
|
-
gap:
|
|
3415
|
+
gap: 0.25rem;
|
|
2447
3416
|
}
|
|
2448
3417
|
.ui-breadcrumbs-link {
|
|
2449
|
-
color:
|
|
3418
|
+
color: var(--ui-muted);
|
|
2450
3419
|
text-decoration: none;
|
|
2451
|
-
transition:
|
|
3420
|
+
transition: color 0.15s;
|
|
3421
|
+
}
|
|
3422
|
+
.ui-breadcrumbs-link:hover {
|
|
3423
|
+
color: var(--ui-text);
|
|
3424
|
+
}
|
|
3425
|
+
.ui-breadcrumbs-current {
|
|
3426
|
+
color: var(--ui-text);
|
|
3427
|
+
}
|
|
3428
|
+
.ui-breadcrumbs-sep {
|
|
3429
|
+
color: var(--ui-border);
|
|
3430
|
+
user-select: none;
|
|
2452
3431
|
}
|
|
2453
|
-
.ui-breadcrumbs-link:hover { color: var(--ui-text); }
|
|
2454
|
-
.ui-breadcrumbs-current { color: var(--ui-text); }
|
|
2455
|
-
.ui-breadcrumbs-sep { color: var(--ui-border); user-select: none; }
|
|
2456
3432
|
|
|
2457
3433
|
/* ─── Stepper ────────────────────────────────────────────────────────────── */
|
|
2458
3434
|
.ui-stepper {
|
|
2459
|
-
display:
|
|
3435
|
+
display: flex;
|
|
2460
3436
|
align-items: flex-start;
|
|
2461
|
-
width:
|
|
3437
|
+
width: 100%;
|
|
2462
3438
|
}
|
|
2463
3439
|
.ui-stepper-item {
|
|
2464
|
-
flex:
|
|
2465
|
-
display:
|
|
2466
|
-
flex-direction:
|
|
2467
|
-
align-items:
|
|
2468
|
-
position:
|
|
3440
|
+
flex: 1;
|
|
3441
|
+
display: flex;
|
|
3442
|
+
flex-direction: column;
|
|
3443
|
+
align-items: center;
|
|
3444
|
+
position: relative;
|
|
2469
3445
|
}
|
|
2470
3446
|
.ui-stepper-item:not(:last-child)::after {
|
|
2471
|
-
content:
|
|
3447
|
+
content: "";
|
|
2472
3448
|
position: absolute;
|
|
2473
|
-
top:
|
|
2474
|
-
left:
|
|
2475
|
-
width:
|
|
2476
|
-
height:
|
|
3449
|
+
top: 13px;
|
|
3450
|
+
left: 50%;
|
|
3451
|
+
width: 100%;
|
|
3452
|
+
height: 2px;
|
|
2477
3453
|
background: var(--ui-border);
|
|
2478
3454
|
}
|
|
2479
|
-
.ui-stepper-item--complete:not(:last-child)::after {
|
|
3455
|
+
.ui-stepper-item--complete:not(:last-child)::after {
|
|
3456
|
+
background: var(--ui-accent);
|
|
3457
|
+
}
|
|
2480
3458
|
.ui-stepper-dot {
|
|
2481
|
-
position:
|
|
2482
|
-
z-index:
|
|
2483
|
-
width:
|
|
2484
|
-
height:
|
|
2485
|
-
border-radius:
|
|
2486
|
-
display:
|
|
2487
|
-
align-items:
|
|
3459
|
+
position: relative;
|
|
3460
|
+
z-index: 1;
|
|
3461
|
+
width: 28px;
|
|
3462
|
+
height: 28px;
|
|
3463
|
+
border-radius: 50%;
|
|
3464
|
+
display: flex;
|
|
3465
|
+
align-items: center;
|
|
2488
3466
|
justify-content: center;
|
|
2489
|
-
font-size:
|
|
2490
|
-
font-weight:
|
|
2491
|
-
background:
|
|
2492
|
-
border:
|
|
2493
|
-
color:
|
|
2494
|
-
transition:
|
|
3467
|
+
font-size: 0.75rem;
|
|
3468
|
+
font-weight: 700;
|
|
3469
|
+
background: var(--ui-surface-2);
|
|
3470
|
+
border: 2px solid var(--ui-border);
|
|
3471
|
+
color: var(--ui-muted);
|
|
3472
|
+
transition:
|
|
3473
|
+
background 0.2s,
|
|
3474
|
+
border-color 0.2s,
|
|
3475
|
+
color 0.2s;
|
|
2495
3476
|
}
|
|
2496
3477
|
.ui-stepper-item--complete .ui-stepper-dot {
|
|
2497
|
-
background:
|
|
3478
|
+
background: var(--ui-accent);
|
|
2498
3479
|
border-color: var(--ui-accent);
|
|
2499
|
-
color:
|
|
3480
|
+
color: var(--ui-bg);
|
|
2500
3481
|
}
|
|
2501
3482
|
.ui-stepper-item--active .ui-stepper-dot {
|
|
2502
3483
|
border-color: var(--ui-accent);
|
|
2503
|
-
color:
|
|
3484
|
+
color: var(--ui-accent);
|
|
2504
3485
|
}
|
|
2505
3486
|
.ui-stepper-label {
|
|
2506
|
-
margin-top: .5rem;
|
|
2507
|
-
font-size:
|
|
2508
|
-
color:
|
|
3487
|
+
margin-top: 0.5rem;
|
|
3488
|
+
font-size: 0.72rem;
|
|
3489
|
+
color: var(--ui-muted);
|
|
2509
3490
|
text-align: center;
|
|
2510
3491
|
line-height: 1.3;
|
|
2511
|
-
padding:
|
|
3492
|
+
padding: 0 0.25rem;
|
|
3493
|
+
}
|
|
3494
|
+
.ui-stepper-item--active .ui-stepper-label {
|
|
3495
|
+
color: var(--ui-text);
|
|
3496
|
+
font-weight: 600;
|
|
3497
|
+
}
|
|
3498
|
+
.ui-stepper-item--complete .ui-stepper-label {
|
|
3499
|
+
color: var(--ui-muted);
|
|
2512
3500
|
}
|
|
2513
|
-
.ui-stepper-item--active .ui-stepper-label { color: var(--ui-text); font-weight: 600; }
|
|
2514
|
-
.ui-stepper-item--complete .ui-stepper-label { color: var(--ui-muted); }
|
|
2515
3501
|
|
|
2516
3502
|
/* ─── Image ──────────────────────────────────────────────────────────────── */
|
|
2517
3503
|
.ui-image {
|
|
2518
3504
|
display: block;
|
|
2519
3505
|
}
|
|
2520
3506
|
.ui-image-crop {
|
|
2521
|
-
overflow:
|
|
3507
|
+
overflow: hidden;
|
|
2522
3508
|
border-radius: var(--ui-radius);
|
|
2523
3509
|
}
|
|
2524
3510
|
.ui-image-wrap {
|
|
2525
|
-
display:
|
|
2526
|
-
overflow:
|
|
3511
|
+
display: block;
|
|
3512
|
+
overflow: hidden;
|
|
2527
3513
|
border-radius: var(--ui-radius);
|
|
2528
3514
|
}
|
|
2529
3515
|
.ui-image-img--cover {
|
|
2530
|
-
display:
|
|
2531
|
-
width:
|
|
2532
|
-
height:
|
|
3516
|
+
display: block;
|
|
3517
|
+
width: 100%;
|
|
3518
|
+
height: auto;
|
|
2533
3519
|
object-fit: cover;
|
|
2534
3520
|
}
|
|
2535
3521
|
.ui-image-img {
|
|
2536
|
-
display:
|
|
3522
|
+
display: block;
|
|
2537
3523
|
max-width: 100%;
|
|
2538
|
-
height:
|
|
3524
|
+
height: auto;
|
|
3525
|
+
}
|
|
3526
|
+
.ui-image--rounded .ui-image-crop {
|
|
3527
|
+
border-radius: var(--ui-radius-lg, 1rem);
|
|
3528
|
+
}
|
|
3529
|
+
.ui-image--rounded .ui-image-wrap {
|
|
3530
|
+
border-radius: var(--ui-radius-lg, 1rem);
|
|
3531
|
+
}
|
|
3532
|
+
.ui-image--pill .ui-image-crop {
|
|
3533
|
+
border-radius: 999px;
|
|
3534
|
+
}
|
|
3535
|
+
.ui-image--pill .ui-image-wrap {
|
|
3536
|
+
border-radius: 999px;
|
|
2539
3537
|
}
|
|
2540
|
-
.ui-image--rounded .ui-image-crop { border-radius: var(--ui-radius-lg, 1rem); }
|
|
2541
|
-
.ui-image--rounded .ui-image-wrap { border-radius: var(--ui-radius-lg, 1rem); }
|
|
2542
|
-
.ui-image--pill .ui-image-crop { border-radius: 999px; }
|
|
2543
|
-
.ui-image--pill .ui-image-wrap { border-radius: 999px; }
|
|
2544
3538
|
.ui-image-caption {
|
|
2545
|
-
margin:
|
|
2546
|
-
font-size:
|
|
2547
|
-
color:
|
|
3539
|
+
margin: 0.5rem 0 0;
|
|
3540
|
+
font-size: 0.8rem;
|
|
3541
|
+
color: var(--ui-muted);
|
|
2548
3542
|
line-height: 1.5;
|
|
2549
3543
|
}
|
|
2550
3544
|
|
|
2551
3545
|
/* ─── Pullquote ──────────────────────────────────────────────────────────── */
|
|
2552
3546
|
.ui-pullquote {
|
|
2553
3547
|
border-left: 3px solid var(--ui-accent);
|
|
2554
|
-
padding:
|
|
2555
|
-
margin:
|
|
3548
|
+
padding: 0.75rem 0 0.75rem 1.5rem;
|
|
3549
|
+
margin: 0;
|
|
3550
|
+
}
|
|
3551
|
+
.ui-pullquote blockquote {
|
|
3552
|
+
margin: 0;
|
|
3553
|
+
padding: 0;
|
|
2556
3554
|
}
|
|
2557
|
-
.ui-pullquote blockquote { margin: 0; padding: 0; }
|
|
2558
3555
|
.ui-pullquote-text {
|
|
2559
|
-
font-size:
|
|
3556
|
+
font-size: 1.15rem;
|
|
2560
3557
|
line-height: 1.6;
|
|
2561
|
-
color:
|
|
2562
|
-
font-style:
|
|
2563
|
-
margin:
|
|
3558
|
+
color: var(--ui-text);
|
|
3559
|
+
font-style: italic;
|
|
3560
|
+
margin: 0;
|
|
3561
|
+
}
|
|
3562
|
+
.ui-pullquote--lg .ui-pullquote-text {
|
|
3563
|
+
font-size: 1.5rem;
|
|
2564
3564
|
}
|
|
2565
|
-
.ui-pullquote--lg .ui-pullquote-text { font-size: 1.5rem; }
|
|
2566
3565
|
.ui-pullquote-cite {
|
|
2567
|
-
display:
|
|
2568
|
-
margin-top: .75rem;
|
|
2569
|
-
font-size:
|
|
2570
|
-
color:
|
|
3566
|
+
display: block;
|
|
3567
|
+
margin-top: 0.75rem;
|
|
3568
|
+
font-size: 0.85rem;
|
|
3569
|
+
color: var(--ui-muted);
|
|
2571
3570
|
font-style: normal;
|
|
2572
3571
|
}
|
|
2573
3572
|
|
|
2574
3573
|
/* ─── List ───────────────────────────────────────────────────────────────────
|
|
2575
3574
|
Styled list component. Use instead of raw <ul>/<ol>. */
|
|
2576
3575
|
.ui-list {
|
|
2577
|
-
display:
|
|
3576
|
+
display: flex;
|
|
2578
3577
|
flex-direction: column;
|
|
2579
|
-
padding-left:
|
|
2580
|
-
color:
|
|
3578
|
+
padding-left: 1.5em;
|
|
3579
|
+
color: var(--ui-text);
|
|
3580
|
+
}
|
|
3581
|
+
.ui-list--unordered {
|
|
3582
|
+
list-style-type: disc;
|
|
3583
|
+
}
|
|
3584
|
+
.ui-list--ordered {
|
|
3585
|
+
list-style-type: decimal;
|
|
3586
|
+
}
|
|
3587
|
+
.ui-list-item {
|
|
3588
|
+
line-height: 1.6;
|
|
2581
3589
|
}
|
|
2582
|
-
.ui-list--unordered { list-style-type: disc; }
|
|
2583
|
-
.ui-list--ordered { list-style-type: decimal; }
|
|
2584
|
-
.ui-list-item { line-height: 1.6; }
|
|
2585
3590
|
|
|
2586
3591
|
/* ─── Prose ──────────────────────────────────────────────────────────────────
|
|
2587
3592
|
Typography wrapper for rich text: CMS output, markdown-rendered HTML,
|
|
2588
3593
|
blog/article bodies. Styles all descendant elements without class names. */
|
|
2589
3594
|
.ui-prose {
|
|
2590
|
-
color:
|
|
3595
|
+
color: var(--ui-text);
|
|
2591
3596
|
line-height: 1.75;
|
|
2592
|
-
font-size:
|
|
3597
|
+
font-size: 1rem;
|
|
3598
|
+
}
|
|
3599
|
+
.ui-prose--sm {
|
|
3600
|
+
font-size: 0.875rem;
|
|
3601
|
+
}
|
|
3602
|
+
.ui-prose--lg {
|
|
3603
|
+
font-size: 1.125rem;
|
|
2593
3604
|
}
|
|
2594
|
-
.ui-prose--sm { font-size: .875rem; }
|
|
2595
|
-
.ui-prose--lg { font-size: 1.125rem; }
|
|
2596
3605
|
|
|
2597
3606
|
.ui-prose h1,
|
|
2598
3607
|
.ui-prose h2,
|
|
@@ -2600,117 +3609,161 @@ fieldset[disabled] .ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star { co
|
|
|
2600
3609
|
.ui-prose h4,
|
|
2601
3610
|
.ui-prose h5,
|
|
2602
3611
|
.ui-prose h6 {
|
|
2603
|
-
color:
|
|
2604
|
-
font-weight:
|
|
2605
|
-
line-height:
|
|
2606
|
-
margin-top:
|
|
2607
|
-
margin-bottom: .6em;
|
|
3612
|
+
color: var(--ui-text);
|
|
3613
|
+
font-weight: 700;
|
|
3614
|
+
line-height: 1.3;
|
|
3615
|
+
margin-top: 2em;
|
|
3616
|
+
margin-bottom: 0.6em;
|
|
3617
|
+
}
|
|
3618
|
+
.ui-prose h1 {
|
|
3619
|
+
font-size: 2rem;
|
|
3620
|
+
}
|
|
3621
|
+
.ui-prose h2 {
|
|
3622
|
+
font-size: 1.5rem;
|
|
3623
|
+
}
|
|
3624
|
+
.ui-prose h3 {
|
|
3625
|
+
font-size: 1.25rem;
|
|
3626
|
+
font-weight: 600;
|
|
3627
|
+
}
|
|
3628
|
+
.ui-prose h4 {
|
|
3629
|
+
font-size: 1rem;
|
|
3630
|
+
font-weight: 600;
|
|
3631
|
+
}
|
|
3632
|
+
.ui-prose h5 {
|
|
3633
|
+
font-size: 0.875rem;
|
|
3634
|
+
font-weight: 600;
|
|
3635
|
+
}
|
|
3636
|
+
.ui-prose h6 {
|
|
3637
|
+
font-size: 0.875rem;
|
|
3638
|
+
font-weight: 600;
|
|
3639
|
+
color: var(--ui-muted);
|
|
2608
3640
|
}
|
|
2609
|
-
.ui-prose h1 { font-size: 2rem; }
|
|
2610
|
-
.ui-prose h2 { font-size: 1.5rem; }
|
|
2611
|
-
.ui-prose h3 { font-size: 1.25rem; font-weight: 600; }
|
|
2612
|
-
.ui-prose h4 { font-size: 1rem; font-weight: 600; }
|
|
2613
|
-
.ui-prose h5 { font-size: .875rem; font-weight: 600; }
|
|
2614
|
-
.ui-prose h6 { font-size: .875rem; font-weight: 600; color: var(--ui-muted); }
|
|
2615
3641
|
|
|
2616
|
-
.ui-prose :is(h1, h2, h3, h4, h5, h6):first-child {
|
|
3642
|
+
.ui-prose :is(h1, h2, h3, h4, h5, h6):first-child {
|
|
3643
|
+
margin-top: 0;
|
|
3644
|
+
}
|
|
2617
3645
|
|
|
2618
|
-
.ui-prose p
|
|
2619
|
-
|
|
3646
|
+
.ui-prose p {
|
|
3647
|
+
margin-bottom: 1.25em;
|
|
3648
|
+
}
|
|
3649
|
+
.ui-prose p:last-child {
|
|
3650
|
+
margin-bottom: 0;
|
|
3651
|
+
}
|
|
2620
3652
|
|
|
2621
3653
|
.ui-prose a {
|
|
2622
|
-
color:
|
|
3654
|
+
color: var(--ui-accent);
|
|
2623
3655
|
text-decoration: underline;
|
|
2624
3656
|
text-underline-offset: 2px;
|
|
2625
3657
|
}
|
|
2626
|
-
.ui-prose a:hover {
|
|
3658
|
+
.ui-prose a:hover {
|
|
3659
|
+
color: var(--ui-accent-hover);
|
|
3660
|
+
}
|
|
2627
3661
|
|
|
2628
|
-
.ui-prose strong {
|
|
2629
|
-
|
|
3662
|
+
.ui-prose strong {
|
|
3663
|
+
font-weight: 700;
|
|
3664
|
+
}
|
|
3665
|
+
.ui-prose em {
|
|
3666
|
+
font-style: italic;
|
|
3667
|
+
}
|
|
2630
3668
|
|
|
2631
3669
|
.ui-prose ul,
|
|
2632
3670
|
.ui-prose ol {
|
|
2633
|
-
padding-left:
|
|
3671
|
+
padding-left: 1.5em;
|
|
2634
3672
|
margin-bottom: 1.25em;
|
|
2635
3673
|
}
|
|
2636
|
-
.ui-prose ul {
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
.ui-prose
|
|
3674
|
+
.ui-prose ul {
|
|
3675
|
+
list-style-type: disc;
|
|
3676
|
+
}
|
|
3677
|
+
.ui-prose ol {
|
|
3678
|
+
list-style-type: decimal;
|
|
3679
|
+
}
|
|
3680
|
+
.ui-prose ul ul {
|
|
3681
|
+
list-style-type: circle;
|
|
3682
|
+
}
|
|
3683
|
+
.ui-prose li {
|
|
3684
|
+
margin-bottom: 0.375em;
|
|
3685
|
+
}
|
|
2640
3686
|
.ui-prose li > ul,
|
|
2641
|
-
.ui-prose li > ol {
|
|
3687
|
+
.ui-prose li > ol {
|
|
3688
|
+
margin-top: 0.375em;
|
|
3689
|
+
margin-bottom: 0.375em;
|
|
3690
|
+
}
|
|
2642
3691
|
|
|
2643
3692
|
.ui-prose blockquote {
|
|
2644
3693
|
border-left: 3px solid var(--ui-border);
|
|
2645
|
-
padding:
|
|
2646
|
-
margin:
|
|
2647
|
-
color:
|
|
2648
|
-
font-style:
|
|
3694
|
+
padding: 0.5em 0 0.5em 1.25em;
|
|
3695
|
+
margin: 1.5em 0;
|
|
3696
|
+
color: var(--ui-muted);
|
|
3697
|
+
font-style: italic;
|
|
3698
|
+
}
|
|
3699
|
+
.ui-prose blockquote p {
|
|
3700
|
+
margin-bottom: 0;
|
|
2649
3701
|
}
|
|
2650
|
-
.ui-prose blockquote p { margin-bottom: 0; }
|
|
2651
3702
|
|
|
2652
3703
|
.ui-prose code {
|
|
2653
|
-
background:
|
|
2654
|
-
color:
|
|
2655
|
-
padding:
|
|
3704
|
+
background: var(--ui-surface-2);
|
|
3705
|
+
color: var(--ui-accent);
|
|
3706
|
+
padding: 0.1em 0.35em;
|
|
2656
3707
|
border-radius: var(--ui-radius-sm);
|
|
2657
|
-
font-size:
|
|
2658
|
-
font-family:
|
|
3708
|
+
font-size: 0.875em;
|
|
3709
|
+
font-family: var(--ui-mono);
|
|
2659
3710
|
}
|
|
2660
3711
|
.ui-prose pre {
|
|
2661
|
-
background:
|
|
2662
|
-
border:
|
|
3712
|
+
background: var(--ui-surface-2);
|
|
3713
|
+
border: 1px solid var(--ui-border);
|
|
2663
3714
|
border-radius: var(--ui-radius);
|
|
2664
|
-
padding:
|
|
2665
|
-
overflow-x:
|
|
3715
|
+
padding: 1em 1.25em;
|
|
3716
|
+
overflow-x: auto;
|
|
2666
3717
|
margin-bottom: 1.25em;
|
|
2667
|
-
font-family:
|
|
2668
|
-
font-size:
|
|
2669
|
-
line-height:
|
|
3718
|
+
font-family: var(--ui-mono);
|
|
3719
|
+
font-size: 0.875em;
|
|
3720
|
+
line-height: 1.7;
|
|
2670
3721
|
}
|
|
2671
3722
|
.ui-prose pre code {
|
|
2672
3723
|
background: none;
|
|
2673
|
-
color:
|
|
2674
|
-
padding:
|
|
2675
|
-
font-size:
|
|
3724
|
+
color: inherit;
|
|
3725
|
+
padding: 0;
|
|
3726
|
+
font-size: inherit;
|
|
2676
3727
|
}
|
|
2677
3728
|
|
|
2678
3729
|
.ui-prose hr {
|
|
2679
|
-
border:
|
|
3730
|
+
border: none;
|
|
2680
3731
|
border-top: 1px solid var(--ui-border);
|
|
2681
|
-
margin:
|
|
3732
|
+
margin: 2em 0;
|
|
2682
3733
|
}
|
|
2683
3734
|
|
|
2684
3735
|
.ui-prose img {
|
|
2685
|
-
max-width:
|
|
3736
|
+
max-width: 100%;
|
|
2686
3737
|
border-radius: var(--ui-radius);
|
|
2687
|
-
height:
|
|
3738
|
+
height: auto;
|
|
3739
|
+
}
|
|
3740
|
+
.ui-prose figure {
|
|
3741
|
+
margin: 1.5em 0;
|
|
2688
3742
|
}
|
|
2689
|
-
.ui-prose figure { margin: 1.5em 0; }
|
|
2690
3743
|
.ui-prose figcaption {
|
|
2691
|
-
font-size: .875em;
|
|
2692
|
-
color:
|
|
2693
|
-
margin-top: .5em;
|
|
3744
|
+
font-size: 0.875em;
|
|
3745
|
+
color: var(--ui-muted);
|
|
3746
|
+
margin-top: 0.5em;
|
|
2694
3747
|
text-align: center;
|
|
2695
3748
|
}
|
|
2696
3749
|
|
|
2697
3750
|
.ui-prose table {
|
|
2698
|
-
width:
|
|
3751
|
+
width: 100%;
|
|
2699
3752
|
border-collapse: collapse;
|
|
2700
|
-
margin-bottom:
|
|
2701
|
-
font-size:
|
|
3753
|
+
margin-bottom: 1.25em;
|
|
3754
|
+
font-size: 0.9375em;
|
|
2702
3755
|
}
|
|
2703
3756
|
.ui-prose th {
|
|
2704
|
-
text-align:
|
|
2705
|
-
padding:
|
|
3757
|
+
text-align: left;
|
|
3758
|
+
padding: 0.5em 0.75em;
|
|
2706
3759
|
border-bottom: 2px solid var(--ui-border);
|
|
2707
|
-
font-weight:
|
|
2708
|
-
color:
|
|
3760
|
+
font-weight: 600;
|
|
3761
|
+
color: var(--ui-text);
|
|
2709
3762
|
}
|
|
2710
3763
|
.ui-prose td {
|
|
2711
|
-
padding:
|
|
3764
|
+
padding: 0.5em 0.75em;
|
|
2712
3765
|
border-bottom: 1px solid var(--ui-border);
|
|
2713
|
-
color:
|
|
3766
|
+
color: var(--ui-text);
|
|
2714
3767
|
}
|
|
2715
3768
|
|
|
2716
3769
|
/* ─── Light theme ────────────────────────────────────────────────────────────
|
|
@@ -2718,22 +3771,22 @@ fieldset[disabled] .ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star { co
|
|
|
2718
3771
|
All --ui-* tokens are overridden; component markup stays identical. */
|
|
2719
3772
|
[data-theme="light"],
|
|
2720
3773
|
.ui-theme-light {
|
|
2721
|
-
--ui-bg:
|
|
2722
|
-
--ui-surface:
|
|
2723
|
-
--ui-surface-2:
|
|
2724
|
-
--ui-border:
|
|
2725
|
-
--ui-text:
|
|
2726
|
-
--ui-muted:
|
|
2727
|
-
--ui-accent:
|
|
2728
|
-
--ui-accent-hover:
|
|
2729
|
-
--ui-accent-dim:
|
|
2730
|
-
--ui-green:
|
|
2731
|
-
--ui-green-dim:
|
|
2732
|
-
--ui-red:
|
|
2733
|
-
--ui-red-dim:
|
|
2734
|
-
--ui-yellow:
|
|
2735
|
-
--ui-yellow-dim:
|
|
2736
|
-
--ui-blue:
|
|
2737
|
-
--ui-blue-dim:
|
|
2738
|
-
--ui-nav-sticky-bg:
|
|
3774
|
+
--ui-bg: #ffffff;
|
|
3775
|
+
--ui-surface: #f8f8fc;
|
|
3776
|
+
--ui-surface-2: #f0f0f8;
|
|
3777
|
+
--ui-border: #d8d8e8;
|
|
3778
|
+
--ui-text: #111118;
|
|
3779
|
+
--ui-muted: #60607a;
|
|
3780
|
+
--ui-accent: #6b5ce7;
|
|
3781
|
+
--ui-accent-hover: #5847d6;
|
|
3782
|
+
--ui-accent-dim: rgba(107, 92, 231, 0.12);
|
|
3783
|
+
--ui-green: #166534;
|
|
3784
|
+
--ui-green-dim: rgba(22, 163, 74, 0.12);
|
|
3785
|
+
--ui-red: #991b1b;
|
|
3786
|
+
--ui-red-dim: rgba(220, 38, 38, 0.12);
|
|
3787
|
+
--ui-yellow: #92400e;
|
|
3788
|
+
--ui-yellow-dim: rgba(217, 119, 6, 0.12);
|
|
3789
|
+
--ui-blue: #1e40af;
|
|
3790
|
+
--ui-blue-dim: rgba(30, 64, 175, 0.12);
|
|
3791
|
+
--ui-nav-sticky-bg: rgba(255, 255, 255, 0.85);
|
|
2739
3792
|
}
|