asjs-express 1.4.0 → 1.5.0
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/bin/create-asjs-app.js +10 -0
- package/lib/client/asjs-theme.css +368 -318
- package/package.json +3 -3
- package/templates/minimal/app.js.tpl +107 -5
- package/templates/minimal/views/about.asjs.tpl +28 -0
- package/templates/minimal/views/contact.asjs.tpl +53 -0
- package/templates/minimal/views/home.asjs.tpl +31 -3
- package/templates/minimal/views/layouts/main.asjs.tpl +11 -5
|
@@ -1,26 +1,25 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--bg: #
|
|
3
|
-
--surface:
|
|
4
|
-
--surface-strong:
|
|
5
|
-
--surface-soft: #
|
|
6
|
-
--surface-muted: #
|
|
7
|
-
--text: #
|
|
8
|
-
--muted: #
|
|
9
|
-
--
|
|
10
|
-
--accent
|
|
11
|
-
--accent-
|
|
12
|
-
--accent-
|
|
13
|
-
--line: rgba(
|
|
14
|
-
--line-strong: rgba(
|
|
15
|
-
--shadow: 0
|
|
16
|
-
--shadow-
|
|
17
|
-
--
|
|
18
|
-
--radius-
|
|
19
|
-
--radius-
|
|
20
|
-
--radius-
|
|
21
|
-
--
|
|
22
|
-
--asjs-progress-
|
|
23
|
-
--asjs-progress-shadow: 0 0 28px rgba(15, 91, 102, 0.24);
|
|
2
|
+
--bg: #f8fafc;
|
|
3
|
+
--surface: #ffffff;
|
|
4
|
+
--surface-strong: #ffffff;
|
|
5
|
+
--surface-soft: #f8fafc;
|
|
6
|
+
--surface-muted: #f1f5f9;
|
|
7
|
+
--text: #0f172a;
|
|
8
|
+
--muted: #64748b;
|
|
9
|
+
--subtle: #94a3b8;
|
|
10
|
+
--accent: #4f46e5;
|
|
11
|
+
--accent-strong: #3730a3;
|
|
12
|
+
--accent-soft: #eef2ff;
|
|
13
|
+
--line: rgba(15, 23, 42, 0.08);
|
|
14
|
+
--line-strong: rgba(15, 23, 42, 0.14);
|
|
15
|
+
--shadow-soft: 0 1px 4px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
|
|
16
|
+
--shadow-panel: 0 4px 24px rgba(15, 23, 42, 0.08), 0 1px 4px rgba(15, 23, 42, 0.04);
|
|
17
|
+
--radius-xl: 20px;
|
|
18
|
+
--radius-lg: 16px;
|
|
19
|
+
--radius-md: 12px;
|
|
20
|
+
--radius-sm: 8px;
|
|
21
|
+
--asjs-progress-gradient: linear-gradient(90deg, #4f46e5, #818cf8, #c7d2fe);
|
|
22
|
+
--asjs-progress-shadow: 0 0 16px rgba(79, 70, 229, 0.4);
|
|
24
23
|
}
|
|
25
24
|
|
|
26
25
|
* {
|
|
@@ -35,34 +34,19 @@ body.example-body {
|
|
|
35
34
|
margin: 0;
|
|
36
35
|
min-height: 100vh;
|
|
37
36
|
color: var(--text);
|
|
38
|
-
font-family:
|
|
39
|
-
background:
|
|
40
|
-
radial-gradient(circle at top left, rgba(15, 91, 102, 0.08), transparent 26%),
|
|
41
|
-
radial-gradient(circle at bottom right, rgba(169, 120, 69, 0.1), transparent 30%),
|
|
42
|
-
linear-gradient(180deg, #fbf8f3, #f4efe8 42%, #ece4d7);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
body.example-body::before {
|
|
46
|
-
content: "";
|
|
47
|
-
position: fixed;
|
|
48
|
-
inset: 0;
|
|
49
|
-
pointer-events: none;
|
|
50
|
-
background-image:
|
|
51
|
-
linear-gradient(rgba(105, 88, 65, 0.035) 1px, transparent 1px),
|
|
52
|
-
linear-gradient(90deg, rgba(105, 88, 65, 0.035) 1px, transparent 1px);
|
|
53
|
-
background-size: 42px 42px;
|
|
54
|
-
mask-image: radial-gradient(circle at center, black 54%, transparent 90%);
|
|
37
|
+
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
38
|
+
background: var(--bg);
|
|
55
39
|
}
|
|
56
40
|
|
|
57
41
|
body.example-body::after {
|
|
58
42
|
content: "";
|
|
59
43
|
position: fixed;
|
|
60
44
|
inset: 0;
|
|
61
|
-
background: rgba(
|
|
62
|
-
backdrop-filter: blur(
|
|
45
|
+
background: rgba(248, 250, 252, 0.7);
|
|
46
|
+
backdrop-filter: blur(4px);
|
|
63
47
|
opacity: 0;
|
|
64
48
|
pointer-events: none;
|
|
65
|
-
transition: opacity
|
|
49
|
+
transition: opacity 200ms ease;
|
|
66
50
|
z-index: 18;
|
|
67
51
|
}
|
|
68
52
|
|
|
@@ -70,25 +54,20 @@ html.asjs-loading body.example-body::after {
|
|
|
70
54
|
opacity: 1;
|
|
71
55
|
}
|
|
72
56
|
|
|
73
|
-
h1,
|
|
74
|
-
h2,
|
|
75
|
-
h3,
|
|
76
|
-
.brand-copy strong {
|
|
77
|
-
font-family: "Baskerville Old Face", "Palatino Linotype", "Book Antiqua", serif;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
57
|
a {
|
|
81
58
|
color: inherit;
|
|
82
59
|
text-decoration: none;
|
|
83
60
|
}
|
|
84
61
|
|
|
85
62
|
.page-shell {
|
|
86
|
-
width: min(
|
|
87
|
-
margin:
|
|
63
|
+
width: min(1160px, calc(100% - 32px));
|
|
64
|
+
margin: 20px auto 40px;
|
|
88
65
|
position: relative;
|
|
89
66
|
z-index: 1;
|
|
90
67
|
}
|
|
91
68
|
|
|
69
|
+
/* ── Cards / surfaces ── */
|
|
70
|
+
|
|
92
71
|
.example-header,
|
|
93
72
|
.view-frame,
|
|
94
73
|
.section-card,
|
|
@@ -98,169 +77,174 @@ a {
|
|
|
98
77
|
.stat-card {
|
|
99
78
|
border: 1px solid var(--line);
|
|
100
79
|
border-radius: var(--radius-xl);
|
|
101
|
-
background: var(--surface
|
|
80
|
+
background: var(--surface);
|
|
102
81
|
box-shadow: var(--shadow-soft);
|
|
103
82
|
}
|
|
104
83
|
|
|
105
84
|
.example-header {
|
|
106
|
-
padding: 24px
|
|
107
|
-
background:
|
|
108
|
-
linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(250, 246, 239, 0.96)),
|
|
109
|
-
var(--surface);
|
|
85
|
+
padding: 20px 24px;
|
|
110
86
|
box-shadow: var(--shadow-panel);
|
|
111
|
-
position: relative;
|
|
112
|
-
overflow: hidden;
|
|
113
87
|
}
|
|
114
88
|
|
|
115
|
-
|
|
116
|
-
content: "";
|
|
117
|
-
position: absolute;
|
|
118
|
-
inset: 0;
|
|
119
|
-
background:
|
|
120
|
-
linear-gradient(115deg, rgba(15, 91, 102, 0.08), transparent 42%),
|
|
121
|
-
radial-gradient(circle at top right, rgba(169, 120, 69, 0.11), transparent 26%);
|
|
122
|
-
pointer-events: none;
|
|
123
|
-
}
|
|
89
|
+
/* ── Header note bar ── */
|
|
124
90
|
|
|
125
91
|
.header-note {
|
|
126
92
|
display: flex;
|
|
127
93
|
align-items: center;
|
|
128
94
|
justify-content: space-between;
|
|
129
|
-
gap:
|
|
130
|
-
padding: 0 0
|
|
131
|
-
margin-bottom:
|
|
132
|
-
border-bottom: 1px solid
|
|
95
|
+
gap: 16px;
|
|
96
|
+
padding: 0 0 16px;
|
|
97
|
+
margin-bottom: 20px;
|
|
98
|
+
border-bottom: 1px solid var(--line);
|
|
133
99
|
}
|
|
134
100
|
|
|
135
101
|
.header-note p {
|
|
136
102
|
margin: 0;
|
|
137
|
-
max-width:
|
|
103
|
+
max-width: 720px;
|
|
138
104
|
color: var(--muted);
|
|
139
|
-
|
|
105
|
+
font-size: 0.88rem;
|
|
106
|
+
line-height: 1.65;
|
|
140
107
|
}
|
|
141
108
|
|
|
109
|
+
/* ── Badges / labels ── */
|
|
110
|
+
|
|
142
111
|
.example-pill,
|
|
143
112
|
.section-label,
|
|
144
113
|
.hero-badge {
|
|
145
114
|
display: inline-flex;
|
|
146
115
|
align-items: center;
|
|
147
|
-
gap:
|
|
148
|
-
padding:
|
|
116
|
+
gap: 6px;
|
|
117
|
+
padding: 5px 11px;
|
|
149
118
|
border-radius: 999px;
|
|
150
|
-
background:
|
|
119
|
+
background: var(--accent-soft);
|
|
151
120
|
color: var(--accent-strong);
|
|
152
|
-
font-size: 0.
|
|
121
|
+
font-size: 0.72rem;
|
|
153
122
|
font-weight: 700;
|
|
154
|
-
letter-spacing: 0.
|
|
123
|
+
letter-spacing: 0.08em;
|
|
155
124
|
text-transform: uppercase;
|
|
156
|
-
box-shadow: inset 0 0 0 1px rgba(15, 91, 102, 0.08);
|
|
157
125
|
}
|
|
158
126
|
|
|
127
|
+
/* ── Header layout ── */
|
|
128
|
+
|
|
159
129
|
.header-main {
|
|
160
130
|
display: grid;
|
|
161
131
|
grid-template-columns: auto 1fr auto;
|
|
162
132
|
align-items: center;
|
|
163
|
-
gap:
|
|
164
|
-
position: relative;
|
|
165
|
-
z-index: 1;
|
|
133
|
+
gap: 20px;
|
|
166
134
|
}
|
|
167
135
|
|
|
168
136
|
.brand-link {
|
|
169
137
|
display: flex;
|
|
170
138
|
align-items: center;
|
|
171
|
-
gap:
|
|
139
|
+
gap: 12px;
|
|
172
140
|
}
|
|
173
141
|
|
|
174
142
|
.brand-mark {
|
|
175
|
-
width:
|
|
176
|
-
height:
|
|
143
|
+
width: 44px;
|
|
144
|
+
height: 44px;
|
|
177
145
|
display: grid;
|
|
178
146
|
place-items: center;
|
|
179
|
-
border-radius:
|
|
180
|
-
background:
|
|
147
|
+
border-radius: 12px;
|
|
148
|
+
background: var(--accent);
|
|
181
149
|
color: #ffffff;
|
|
150
|
+
font-size: 0.78rem;
|
|
182
151
|
font-weight: 700;
|
|
183
|
-
letter-spacing: 0.
|
|
184
|
-
|
|
152
|
+
letter-spacing: 0.08em;
|
|
153
|
+
flex-shrink: 0;
|
|
154
|
+
box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28);
|
|
185
155
|
}
|
|
186
156
|
|
|
187
157
|
.brand-copy {
|
|
188
158
|
display: grid;
|
|
189
|
-
gap:
|
|
159
|
+
gap: 2px;
|
|
190
160
|
}
|
|
191
161
|
|
|
192
162
|
.brand-copy strong {
|
|
193
|
-
font-size: 1.
|
|
163
|
+
font-size: 1.05rem;
|
|
164
|
+
font-weight: 700;
|
|
165
|
+
letter-spacing: -0.02em;
|
|
194
166
|
line-height: 1;
|
|
195
|
-
letter-spacing: -0.045em;
|
|
196
167
|
}
|
|
197
168
|
|
|
198
169
|
.brand-copy span,
|
|
199
170
|
.brand-copy small {
|
|
200
171
|
color: var(--muted);
|
|
201
|
-
|
|
172
|
+
font-size: 0.8rem;
|
|
173
|
+
line-height: 1.4;
|
|
202
174
|
}
|
|
203
175
|
|
|
176
|
+
/* ── Navigation ── */
|
|
177
|
+
|
|
204
178
|
.site-nav {
|
|
205
179
|
display: flex;
|
|
206
180
|
justify-content: center;
|
|
207
181
|
flex-wrap: wrap;
|
|
208
|
-
gap:
|
|
182
|
+
gap: 4px;
|
|
209
183
|
}
|
|
210
184
|
|
|
211
185
|
.site-link {
|
|
212
186
|
display: grid;
|
|
213
|
-
gap:
|
|
214
|
-
min-width:
|
|
215
|
-
padding: 12px
|
|
216
|
-
border-radius:
|
|
217
|
-
border: 1px solid
|
|
218
|
-
background:
|
|
187
|
+
gap: 2px;
|
|
188
|
+
min-width: 120px;
|
|
189
|
+
padding: 9px 12px;
|
|
190
|
+
border-radius: var(--radius-lg);
|
|
191
|
+
border: 1px solid transparent;
|
|
192
|
+
background: transparent;
|
|
219
193
|
transition:
|
|
220
|
-
|
|
221
|
-
border-color
|
|
222
|
-
box-shadow 180ms ease,
|
|
223
|
-
background 180ms ease;
|
|
194
|
+
background 160ms ease,
|
|
195
|
+
border-color 160ms ease;
|
|
224
196
|
}
|
|
225
197
|
|
|
226
198
|
.site-link span {
|
|
227
|
-
font-
|
|
199
|
+
font-size: 0.88rem;
|
|
200
|
+
font-weight: 600;
|
|
228
201
|
letter-spacing: -0.01em;
|
|
229
202
|
}
|
|
230
203
|
|
|
231
204
|
.site-link small {
|
|
232
205
|
color: var(--muted);
|
|
233
|
-
font-size: 0.
|
|
234
|
-
line-height: 1.
|
|
206
|
+
font-size: 0.74rem;
|
|
207
|
+
line-height: 1.35;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.site-link:hover {
|
|
211
|
+
background: var(--surface-muted);
|
|
212
|
+
border-color: var(--line);
|
|
235
213
|
}
|
|
236
214
|
|
|
237
|
-
.site-link:hover,
|
|
238
215
|
.site-link.is-active {
|
|
239
|
-
|
|
240
|
-
border-color: rgba(
|
|
241
|
-
|
|
242
|
-
|
|
216
|
+
background: var(--accent-soft);
|
|
217
|
+
border-color: rgba(79, 70, 229, 0.16);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.site-link.is-active span {
|
|
221
|
+
color: var(--accent);
|
|
243
222
|
}
|
|
244
223
|
|
|
245
224
|
.site-link[data-asjs-prefetched="true"] {
|
|
246
|
-
box-shadow: inset 0 0 0 1px rgba(
|
|
225
|
+
box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.1);
|
|
247
226
|
}
|
|
248
227
|
|
|
228
|
+
/* ── Buttons ── */
|
|
229
|
+
|
|
249
230
|
.button {
|
|
250
231
|
display: inline-flex;
|
|
251
232
|
align-items: center;
|
|
252
233
|
justify-content: center;
|
|
253
|
-
min-height:
|
|
254
|
-
padding:
|
|
234
|
+
min-height: 42px;
|
|
235
|
+
padding: 9px 18px;
|
|
255
236
|
border-radius: 999px;
|
|
256
237
|
border: 1px solid var(--line-strong);
|
|
257
|
-
font-
|
|
238
|
+
font-family: inherit;
|
|
239
|
+
font-size: 0.88rem;
|
|
240
|
+
font-weight: 600;
|
|
258
241
|
letter-spacing: -0.01em;
|
|
242
|
+
cursor: pointer;
|
|
259
243
|
transition:
|
|
260
|
-
transform
|
|
261
|
-
box-shadow
|
|
262
|
-
background
|
|
263
|
-
border-color
|
|
244
|
+
transform 160ms ease,
|
|
245
|
+
box-shadow 160ms ease,
|
|
246
|
+
background 160ms ease,
|
|
247
|
+
border-color 160ms ease;
|
|
264
248
|
}
|
|
265
249
|
|
|
266
250
|
.button:hover {
|
|
@@ -272,47 +256,55 @@ a {
|
|
|
272
256
|
.site-link:focus-visible,
|
|
273
257
|
.brand-link:focus-visible,
|
|
274
258
|
.inline-link:focus-visible {
|
|
275
|
-
outline:
|
|
276
|
-
outline-offset:
|
|
259
|
+
outline: 2px solid var(--accent);
|
|
260
|
+
outline-offset: 2px;
|
|
277
261
|
}
|
|
278
262
|
|
|
279
263
|
.button-primary {
|
|
280
264
|
border-color: var(--accent);
|
|
281
|
-
background:
|
|
265
|
+
background: var(--accent);
|
|
282
266
|
color: #ffffff;
|
|
283
|
-
box-shadow: 0
|
|
267
|
+
box-shadow: 0 4px 14px rgba(79, 70, 229, 0.2);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.button-primary:hover {
|
|
271
|
+
background: var(--accent-strong);
|
|
272
|
+
border-color: var(--accent-strong);
|
|
273
|
+
box-shadow: 0 6px 20px rgba(79, 70, 229, 0.28);
|
|
284
274
|
}
|
|
285
275
|
|
|
286
276
|
.button-secondary {
|
|
287
|
-
background:
|
|
277
|
+
background: var(--surface);
|
|
288
278
|
color: var(--text);
|
|
279
|
+
border-color: var(--line-strong);
|
|
289
280
|
}
|
|
290
281
|
|
|
291
282
|
.header-cta {
|
|
292
283
|
white-space: nowrap;
|
|
293
284
|
}
|
|
294
285
|
|
|
286
|
+
/* ── View frame ── */
|
|
287
|
+
|
|
295
288
|
.view-frame {
|
|
296
|
-
margin-top:
|
|
297
|
-
padding:
|
|
298
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(250, 245, 238, 0.96));
|
|
289
|
+
margin-top: 16px;
|
|
290
|
+
padding: 28px;
|
|
299
291
|
box-shadow: var(--shadow-panel);
|
|
300
|
-
position: relative;
|
|
301
|
-
z-index: 1;
|
|
302
292
|
}
|
|
303
293
|
|
|
304
294
|
[data-asjs-view] {
|
|
305
|
-
animation: reveal
|
|
295
|
+
animation: reveal 240ms ease;
|
|
306
296
|
}
|
|
307
297
|
|
|
298
|
+
/* ── Route loader ── */
|
|
299
|
+
|
|
308
300
|
.route-loader {
|
|
309
301
|
position: fixed;
|
|
310
|
-
inset: auto
|
|
311
|
-
width: min(
|
|
302
|
+
inset: auto 24px 24px auto;
|
|
303
|
+
width: min(380px, calc(100% - 32px));
|
|
312
304
|
opacity: 0;
|
|
313
|
-
transform: translateY(
|
|
305
|
+
transform: translateY(12px);
|
|
314
306
|
pointer-events: none;
|
|
315
|
-
transition: opacity
|
|
307
|
+
transition: opacity 200ms ease, transform 200ms ease;
|
|
316
308
|
z-index: 28;
|
|
317
309
|
}
|
|
318
310
|
|
|
@@ -322,30 +314,31 @@ html.asjs-loading .route-loader {
|
|
|
322
314
|
}
|
|
323
315
|
|
|
324
316
|
.route-loader-card {
|
|
325
|
-
padding:
|
|
326
|
-
border-radius:
|
|
327
|
-
border: 1px solid
|
|
328
|
-
background:
|
|
317
|
+
padding: 18px;
|
|
318
|
+
border-radius: var(--radius-lg);
|
|
319
|
+
border: 1px solid var(--line);
|
|
320
|
+
background: var(--surface);
|
|
329
321
|
box-shadow: var(--shadow-panel);
|
|
330
322
|
}
|
|
331
323
|
|
|
332
324
|
.route-loader-label {
|
|
333
325
|
display: inline-flex;
|
|
334
|
-
padding:
|
|
326
|
+
padding: 5px 10px;
|
|
335
327
|
border-radius: 999px;
|
|
336
328
|
background: var(--accent-soft);
|
|
337
329
|
color: var(--accent-strong);
|
|
338
|
-
font-size: 0.
|
|
330
|
+
font-size: 0.7rem;
|
|
339
331
|
font-weight: 700;
|
|
340
|
-
letter-spacing: 0.
|
|
332
|
+
letter-spacing: 0.08em;
|
|
341
333
|
text-transform: uppercase;
|
|
342
334
|
}
|
|
343
335
|
|
|
344
336
|
.route-loader-card strong {
|
|
345
337
|
display: block;
|
|
346
|
-
margin-top:
|
|
347
|
-
font-size:
|
|
348
|
-
|
|
338
|
+
margin-top: 12px;
|
|
339
|
+
font-size: 1rem;
|
|
340
|
+
font-weight: 700;
|
|
341
|
+
letter-spacing: -0.02em;
|
|
349
342
|
}
|
|
350
343
|
|
|
351
344
|
.route-loader-card p,
|
|
@@ -355,33 +348,36 @@ html.asjs-loading .route-loader {
|
|
|
355
348
|
}
|
|
356
349
|
|
|
357
350
|
.route-loader-card p {
|
|
358
|
-
margin:
|
|
359
|
-
|
|
351
|
+
margin: 8px 0 0;
|
|
352
|
+
font-size: 0.84rem;
|
|
353
|
+
line-height: 1.65;
|
|
360
354
|
}
|
|
361
355
|
|
|
362
356
|
.route-loader-skeleton {
|
|
363
357
|
display: grid;
|
|
364
|
-
gap:
|
|
365
|
-
margin-top:
|
|
358
|
+
gap: 8px;
|
|
359
|
+
margin-top: 14px;
|
|
366
360
|
}
|
|
367
361
|
|
|
368
362
|
.route-loader-skeleton span {
|
|
369
363
|
display: block;
|
|
370
|
-
height:
|
|
364
|
+
height: 8px;
|
|
371
365
|
border-radius: 999px;
|
|
372
|
-
background: linear-gradient(90deg,
|
|
366
|
+
background: linear-gradient(90deg, var(--accent-soft), rgba(79, 70, 229, 0.16), var(--accent-soft));
|
|
373
367
|
background-size: 220% 100%;
|
|
374
368
|
animation: shimmer 1.2s linear infinite;
|
|
375
369
|
}
|
|
376
370
|
|
|
377
371
|
.route-loader-skeleton span:nth-child(2) {
|
|
378
|
-
width:
|
|
372
|
+
width: 80%;
|
|
379
373
|
}
|
|
380
374
|
|
|
381
375
|
.route-loader-skeleton span:nth-child(3) {
|
|
382
|
-
width:
|
|
376
|
+
width: 64%;
|
|
383
377
|
}
|
|
384
378
|
|
|
379
|
+
/* ── Grid systems ── */
|
|
380
|
+
|
|
385
381
|
.hero,
|
|
386
382
|
.split-layout,
|
|
387
383
|
.card-grid,
|
|
@@ -394,11 +390,11 @@ html.asjs-loading .route-loader {
|
|
|
394
390
|
.field-grid,
|
|
395
391
|
.signal-list {
|
|
396
392
|
display: grid;
|
|
397
|
-
gap:
|
|
393
|
+
gap: 16px;
|
|
398
394
|
}
|
|
399
395
|
|
|
400
396
|
.hero {
|
|
401
|
-
grid-template-columns: 1.
|
|
397
|
+
grid-template-columns: 1.2fr 0.8fr;
|
|
402
398
|
align-items: stretch;
|
|
403
399
|
}
|
|
404
400
|
|
|
@@ -407,9 +403,11 @@ html.asjs-loading .route-loader {
|
|
|
407
403
|
.section-card,
|
|
408
404
|
.info-card,
|
|
409
405
|
.stat-card {
|
|
410
|
-
padding:
|
|
406
|
+
padding: 24px;
|
|
411
407
|
}
|
|
412
408
|
|
|
409
|
+
/* Top accent stripe on cards */
|
|
410
|
+
|
|
413
411
|
.hero-copy,
|
|
414
412
|
.section-card,
|
|
415
413
|
.info-card,
|
|
@@ -434,30 +432,33 @@ html.asjs-loading .route-loader {
|
|
|
434
432
|
position: absolute;
|
|
435
433
|
inset: 0 auto auto 0;
|
|
436
434
|
width: 100%;
|
|
437
|
-
height:
|
|
438
|
-
background: linear-gradient(90deg,
|
|
439
|
-
opacity: 0.
|
|
435
|
+
height: 3px;
|
|
436
|
+
background: linear-gradient(90deg, var(--accent), rgba(79, 70, 229, 0.2));
|
|
437
|
+
opacity: 0.5;
|
|
440
438
|
}
|
|
441
439
|
|
|
440
|
+
/* ── Typography ── */
|
|
441
|
+
|
|
442
442
|
.hero-copy h1,
|
|
443
443
|
.page-intro h1,
|
|
444
444
|
.section-card h2,
|
|
445
445
|
.section-header h2,
|
|
446
446
|
.not-found-panel h1 {
|
|
447
|
-
margin:
|
|
448
|
-
line-height:
|
|
449
|
-
letter-spacing: -0.
|
|
447
|
+
margin: 14px 0 10px;
|
|
448
|
+
line-height: 1.04;
|
|
449
|
+
letter-spacing: -0.04em;
|
|
450
|
+
font-weight: 700;
|
|
450
451
|
}
|
|
451
452
|
|
|
452
453
|
.hero-copy h1,
|
|
453
454
|
.page-intro h1,
|
|
454
455
|
.not-found-panel h1 {
|
|
455
|
-
font-size: clamp(2.
|
|
456
|
+
font-size: clamp(2.2rem, 5vw, 3.8rem);
|
|
456
457
|
}
|
|
457
458
|
|
|
458
459
|
.section-card h2,
|
|
459
460
|
.section-header h2 {
|
|
460
|
-
font-size: clamp(1.
|
|
461
|
+
font-size: clamp(1.4rem, 2.4vw, 2rem);
|
|
461
462
|
}
|
|
462
463
|
|
|
463
464
|
.hero-copy p,
|
|
@@ -468,14 +469,16 @@ html.asjs-loading .route-loader {
|
|
|
468
469
|
.flow-list li,
|
|
469
470
|
.check-list li {
|
|
470
471
|
color: var(--muted);
|
|
471
|
-
line-height: 1.
|
|
472
|
+
line-height: 1.75;
|
|
472
473
|
}
|
|
473
474
|
|
|
475
|
+
/* ── Hero ── */
|
|
476
|
+
|
|
474
477
|
.hero-actions {
|
|
475
478
|
display: flex;
|
|
476
479
|
flex-wrap: wrap;
|
|
477
|
-
gap:
|
|
478
|
-
margin-top:
|
|
480
|
+
gap: 10px;
|
|
481
|
+
margin-top: 24px;
|
|
479
482
|
}
|
|
480
483
|
|
|
481
484
|
.hero-aside {
|
|
@@ -485,12 +488,14 @@ html.asjs-loading .route-loader {
|
|
|
485
488
|
|
|
486
489
|
.render-panel {
|
|
487
490
|
width: 100%;
|
|
488
|
-
background:
|
|
491
|
+
background: var(--surface);
|
|
489
492
|
}
|
|
490
493
|
|
|
494
|
+
/* ── Dashboard ── */
|
|
495
|
+
|
|
491
496
|
.dashboard-grid {
|
|
492
|
-
grid-template-columns: 1.
|
|
493
|
-
margin-top:
|
|
497
|
+
grid-template-columns: 1.1fr 0.9fr;
|
|
498
|
+
margin-top: 20px;
|
|
494
499
|
}
|
|
495
500
|
|
|
496
501
|
.metric-grid {
|
|
@@ -498,11 +503,11 @@ html.asjs-loading .route-loader {
|
|
|
498
503
|
}
|
|
499
504
|
|
|
500
505
|
.metric-panel {
|
|
501
|
-
padding:
|
|
502
|
-
border-radius:
|
|
503
|
-
border: 1px solid
|
|
504
|
-
background:
|
|
505
|
-
box-shadow:
|
|
506
|
+
padding: 18px;
|
|
507
|
+
border-radius: var(--radius-lg);
|
|
508
|
+
border: 1px solid var(--line);
|
|
509
|
+
background: var(--surface);
|
|
510
|
+
box-shadow: var(--shadow-soft);
|
|
506
511
|
}
|
|
507
512
|
|
|
508
513
|
.metric-panel span,
|
|
@@ -515,17 +520,18 @@ html.asjs-loading .route-loader {
|
|
|
515
520
|
.inline-response-meta strong {
|
|
516
521
|
display: inline-flex;
|
|
517
522
|
color: var(--accent-strong);
|
|
518
|
-
font-size: 0.
|
|
523
|
+
font-size: 0.72rem;
|
|
519
524
|
font-weight: 700;
|
|
520
|
-
letter-spacing: 0.
|
|
525
|
+
letter-spacing: 0.08em;
|
|
521
526
|
text-transform: uppercase;
|
|
522
527
|
}
|
|
523
528
|
|
|
524
529
|
.metric-panel strong {
|
|
525
530
|
display: block;
|
|
526
|
-
margin-top:
|
|
527
|
-
font-size:
|
|
528
|
-
|
|
531
|
+
margin-top: 10px;
|
|
532
|
+
font-size: 1.9rem;
|
|
533
|
+
font-weight: 700;
|
|
534
|
+
letter-spacing: -0.05em;
|
|
529
535
|
}
|
|
530
536
|
|
|
531
537
|
.metric-panel p,
|
|
@@ -535,30 +541,31 @@ html.asjs-loading .route-loader {
|
|
|
535
541
|
.status-panel p,
|
|
536
542
|
.submitted-brief p,
|
|
537
543
|
.quick-check-panel p {
|
|
538
|
-
margin:
|
|
544
|
+
margin: 8px 0 0;
|
|
539
545
|
color: var(--muted);
|
|
540
|
-
|
|
546
|
+
font-size: 0.86rem;
|
|
547
|
+
line-height: 1.65;
|
|
541
548
|
}
|
|
542
549
|
|
|
543
550
|
.activity-list {
|
|
544
551
|
display: grid;
|
|
545
|
-
gap:
|
|
546
|
-
margin-top:
|
|
552
|
+
gap: 12px;
|
|
553
|
+
margin-top: 16px;
|
|
547
554
|
}
|
|
548
555
|
|
|
549
556
|
.activity-item {
|
|
550
557
|
display: grid;
|
|
551
|
-
grid-template-columns:
|
|
552
|
-
gap:
|
|
553
|
-
padding:
|
|
554
|
-
border-radius:
|
|
555
|
-
border: 1px solid
|
|
556
|
-
background:
|
|
558
|
+
grid-template-columns: 88px 1fr;
|
|
559
|
+
gap: 16px;
|
|
560
|
+
padding: 16px;
|
|
561
|
+
border-radius: var(--radius-md);
|
|
562
|
+
border: 1px solid var(--line);
|
|
563
|
+
background: var(--surface);
|
|
557
564
|
}
|
|
558
565
|
|
|
559
566
|
.activity-time {
|
|
560
567
|
align-self: start;
|
|
561
|
-
padding:
|
|
568
|
+
padding: 5px 9px;
|
|
562
569
|
border-radius: 999px;
|
|
563
570
|
background: var(--accent-soft);
|
|
564
571
|
}
|
|
@@ -569,66 +576,70 @@ html.asjs-loading .route-loader {
|
|
|
569
576
|
.status-panel h3,
|
|
570
577
|
.quick-check-panel h3 {
|
|
571
578
|
margin: 0;
|
|
572
|
-
font-size:
|
|
573
|
-
|
|
579
|
+
font-size: 1rem;
|
|
580
|
+
font-weight: 700;
|
|
581
|
+
letter-spacing: -0.02em;
|
|
574
582
|
}
|
|
575
583
|
|
|
576
584
|
.signal-list {
|
|
577
|
-
margin-top:
|
|
585
|
+
margin-top: 16px;
|
|
578
586
|
}
|
|
579
587
|
|
|
580
588
|
.signal-item {
|
|
581
|
-
padding:
|
|
582
|
-
border-radius:
|
|
583
|
-
border: 1px solid
|
|
584
|
-
background:
|
|
589
|
+
padding: 18px;
|
|
590
|
+
border-radius: var(--radius-md);
|
|
591
|
+
border: 1px solid var(--line);
|
|
592
|
+
background: var(--surface);
|
|
585
593
|
}
|
|
586
594
|
|
|
595
|
+
/* ── Catalog / Products ── */
|
|
596
|
+
|
|
587
597
|
.catalog-grid {
|
|
588
598
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
589
|
-
margin-top:
|
|
599
|
+
margin-top: 20px;
|
|
590
600
|
}
|
|
591
601
|
|
|
592
602
|
.product-card {
|
|
593
|
-
background:
|
|
603
|
+
background: var(--surface);
|
|
594
604
|
}
|
|
595
605
|
|
|
596
606
|
.product-card-head {
|
|
597
607
|
display: flex;
|
|
598
608
|
align-items: center;
|
|
599
609
|
justify-content: space-between;
|
|
600
|
-
gap:
|
|
610
|
+
gap: 10px;
|
|
601
611
|
}
|
|
602
612
|
|
|
603
613
|
.product-chip,
|
|
604
614
|
.status-pill {
|
|
605
|
-
padding:
|
|
615
|
+
padding: 4px 10px;
|
|
606
616
|
border-radius: 999px;
|
|
607
617
|
background: var(--accent-soft);
|
|
618
|
+
color: var(--accent-strong);
|
|
608
619
|
}
|
|
609
620
|
|
|
610
621
|
.product-card > p {
|
|
611
|
-
margin-top:
|
|
622
|
+
margin-top: 12px;
|
|
612
623
|
}
|
|
613
624
|
|
|
614
625
|
.product-facts {
|
|
615
626
|
display: grid;
|
|
616
|
-
gap:
|
|
617
|
-
margin:
|
|
627
|
+
gap: 10px;
|
|
628
|
+
margin: 16px 0 0;
|
|
618
629
|
}
|
|
619
630
|
|
|
620
631
|
.product-facts div,
|
|
621
632
|
.status-summary div,
|
|
622
633
|
.inline-response-meta span {
|
|
623
|
-
padding: 14px
|
|
624
|
-
border-radius:
|
|
625
|
-
border: 1px solid
|
|
634
|
+
padding: 12px 14px;
|
|
635
|
+
border-radius: var(--radius-sm);
|
|
636
|
+
border: 1px solid var(--line);
|
|
626
637
|
background: var(--surface-soft);
|
|
627
638
|
}
|
|
628
639
|
|
|
629
640
|
.product-facts dt {
|
|
630
641
|
color: var(--muted);
|
|
631
|
-
font-size: 0.
|
|
642
|
+
font-size: 0.72rem;
|
|
632
643
|
font-weight: 700;
|
|
633
644
|
letter-spacing: 0.08em;
|
|
634
645
|
text-transform: uppercase;
|
|
@@ -637,30 +648,32 @@ html.asjs-loading .route-loader {
|
|
|
637
648
|
.product-facts dd,
|
|
638
649
|
.status-summary strong,
|
|
639
650
|
.inline-response-meta span {
|
|
640
|
-
margin:
|
|
641
|
-
font-weight:
|
|
651
|
+
margin: 6px 0 0;
|
|
652
|
+
font-weight: 600;
|
|
642
653
|
line-height: 1.5;
|
|
643
654
|
}
|
|
644
655
|
|
|
645
656
|
.product-note {
|
|
646
|
-
padding-top:
|
|
647
|
-
border-top: 1px solid
|
|
657
|
+
padding-top: 14px;
|
|
658
|
+
border-top: 1px solid var(--line);
|
|
648
659
|
}
|
|
649
660
|
|
|
650
661
|
.api-grid {
|
|
651
662
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
652
|
-
margin-top:
|
|
663
|
+
margin-top: 16px;
|
|
653
664
|
}
|
|
654
665
|
|
|
666
|
+
/* ── Forms ── */
|
|
667
|
+
|
|
655
668
|
.form-panel {
|
|
656
|
-
background:
|
|
669
|
+
background: var(--surface);
|
|
657
670
|
}
|
|
658
671
|
|
|
659
672
|
.webas-form,
|
|
660
673
|
.quick-check-form {
|
|
661
674
|
display: grid;
|
|
662
|
-
gap:
|
|
663
|
-
margin-top:
|
|
675
|
+
gap: 16px;
|
|
676
|
+
margin-top: 18px;
|
|
664
677
|
}
|
|
665
678
|
|
|
666
679
|
.field-grid {
|
|
@@ -669,29 +682,32 @@ html.asjs-loading .route-loader {
|
|
|
669
682
|
|
|
670
683
|
.field-group {
|
|
671
684
|
display: grid;
|
|
672
|
-
gap:
|
|
685
|
+
gap: 6px;
|
|
673
686
|
}
|
|
674
687
|
|
|
675
688
|
.field-group input,
|
|
676
689
|
.field-group textarea {
|
|
677
690
|
width: 100%;
|
|
678
|
-
padding:
|
|
679
|
-
border-radius:
|
|
680
|
-
border: 1px solid
|
|
681
|
-
background:
|
|
691
|
+
padding: 11px 14px;
|
|
692
|
+
border-radius: var(--radius-md);
|
|
693
|
+
border: 1px solid var(--line-strong);
|
|
694
|
+
background: var(--surface);
|
|
682
695
|
color: var(--text);
|
|
683
696
|
font: inherit;
|
|
684
|
-
|
|
697
|
+
font-size: 0.92rem;
|
|
685
698
|
transition:
|
|
686
|
-
border-color
|
|
687
|
-
box-shadow
|
|
688
|
-
|
|
689
|
-
|
|
699
|
+
border-color 160ms ease,
|
|
700
|
+
box-shadow 160ms ease;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
.field-group input::placeholder,
|
|
704
|
+
.field-group textarea::placeholder {
|
|
705
|
+
color: var(--subtle);
|
|
690
706
|
}
|
|
691
707
|
|
|
692
708
|
.field-group input:hover,
|
|
693
709
|
.field-group textarea:hover {
|
|
694
|
-
border-color: rgba(
|
|
710
|
+
border-color: rgba(79, 70, 229, 0.3);
|
|
695
711
|
}
|
|
696
712
|
|
|
697
713
|
.field-group input:focus,
|
|
@@ -699,20 +715,18 @@ html.asjs-loading .route-loader {
|
|
|
699
715
|
.field-group input:focus-visible,
|
|
700
716
|
.field-group textarea:focus-visible {
|
|
701
717
|
outline: none;
|
|
702
|
-
border-color:
|
|
703
|
-
box-shadow: 0 0 0
|
|
704
|
-
background: #ffffff;
|
|
705
|
-
transform: translateY(-1px);
|
|
718
|
+
border-color: var(--accent);
|
|
719
|
+
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
|
|
706
720
|
}
|
|
707
721
|
|
|
708
722
|
.field-group textarea {
|
|
709
723
|
resize: vertical;
|
|
710
|
-
min-height:
|
|
724
|
+
min-height: 150px;
|
|
711
725
|
}
|
|
712
726
|
|
|
713
727
|
.field-error {
|
|
714
|
-
color: #
|
|
715
|
-
font-size: 0.
|
|
728
|
+
color: #b91c1c;
|
|
729
|
+
font-size: 0.82rem;
|
|
716
730
|
line-height: 1.5;
|
|
717
731
|
}
|
|
718
732
|
|
|
@@ -720,49 +734,56 @@ html.asjs-loading .route-loader {
|
|
|
720
734
|
display: flex;
|
|
721
735
|
align-items: center;
|
|
722
736
|
justify-content: space-between;
|
|
723
|
-
gap:
|
|
737
|
+
gap: 14px;
|
|
724
738
|
flex-wrap: wrap;
|
|
725
739
|
}
|
|
726
740
|
|
|
727
741
|
.form-actions span {
|
|
728
742
|
color: var(--muted);
|
|
729
|
-
|
|
743
|
+
font-size: 0.84rem;
|
|
744
|
+
line-height: 1.6;
|
|
730
745
|
}
|
|
731
746
|
|
|
747
|
+
/* ── Status panels ── */
|
|
748
|
+
|
|
732
749
|
.status-panel {
|
|
733
750
|
padding: 20px;
|
|
734
|
-
border-radius:
|
|
735
|
-
border: 1px solid
|
|
736
|
-
background:
|
|
751
|
+
border-radius: var(--radius-lg);
|
|
752
|
+
border: 1px solid var(--line);
|
|
753
|
+
background: var(--surface);
|
|
737
754
|
box-shadow: var(--shadow-soft);
|
|
738
755
|
}
|
|
739
756
|
|
|
740
757
|
.status-panel--success {
|
|
741
|
-
background:
|
|
758
|
+
background: #f0fdf4;
|
|
759
|
+
border-color: rgba(34, 197, 94, 0.2);
|
|
742
760
|
}
|
|
743
761
|
|
|
744
762
|
.status-panel--error {
|
|
745
|
-
background:
|
|
763
|
+
background: #fef2f2;
|
|
764
|
+
border-color: rgba(239, 68, 68, 0.2);
|
|
746
765
|
}
|
|
747
766
|
|
|
748
767
|
.status-summary {
|
|
749
768
|
display: grid;
|
|
750
769
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
751
|
-
gap:
|
|
752
|
-
margin-top:
|
|
770
|
+
gap: 10px;
|
|
771
|
+
margin-top: 18px;
|
|
753
772
|
}
|
|
754
773
|
|
|
755
774
|
.submitted-brief {
|
|
756
|
-
margin-top:
|
|
757
|
-
padding:
|
|
758
|
-
border-radius:
|
|
759
|
-
border: 1px solid
|
|
760
|
-
background:
|
|
775
|
+
margin-top: 18px;
|
|
776
|
+
padding: 16px;
|
|
777
|
+
border-radius: var(--radius-md);
|
|
778
|
+
border: 1px solid var(--line);
|
|
779
|
+
background: var(--surface-soft);
|
|
761
780
|
}
|
|
762
781
|
|
|
782
|
+
/* ── Render panel ── */
|
|
783
|
+
|
|
763
784
|
.render-summary-grid {
|
|
764
785
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
765
|
-
margin-top:
|
|
786
|
+
margin-top: 18px;
|
|
766
787
|
}
|
|
767
788
|
|
|
768
789
|
.render-summary-grid--wide {
|
|
@@ -770,17 +791,16 @@ html.asjs-loading .route-loader {
|
|
|
770
791
|
}
|
|
771
792
|
|
|
772
793
|
.render-item {
|
|
773
|
-
padding:
|
|
774
|
-
border-radius:
|
|
775
|
-
border: 1px solid
|
|
776
|
-
background:
|
|
777
|
-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
|
|
794
|
+
padding: 15px;
|
|
795
|
+
border-radius: var(--radius-md);
|
|
796
|
+
border: 1px solid var(--line);
|
|
797
|
+
background: var(--surface-soft);
|
|
778
798
|
}
|
|
779
799
|
|
|
780
800
|
.render-item span {
|
|
781
801
|
display: block;
|
|
782
802
|
color: var(--muted);
|
|
783
|
-
font-size: 0.
|
|
803
|
+
font-size: 0.72rem;
|
|
784
804
|
font-weight: 700;
|
|
785
805
|
letter-spacing: 0.08em;
|
|
786
806
|
text-transform: uppercase;
|
|
@@ -788,22 +808,30 @@ html.asjs-loading .route-loader {
|
|
|
788
808
|
|
|
789
809
|
.render-item strong {
|
|
790
810
|
display: block;
|
|
791
|
-
margin-top:
|
|
792
|
-
font-size:
|
|
811
|
+
margin-top: 6px;
|
|
812
|
+
font-size: 0.96rem;
|
|
813
|
+
font-weight: 600;
|
|
793
814
|
line-height: 1.35;
|
|
794
815
|
}
|
|
795
816
|
|
|
796
817
|
.render-note {
|
|
797
|
-
margin:
|
|
798
|
-
|
|
818
|
+
margin: 14px 0 0;
|
|
819
|
+
font-size: 0.88rem;
|
|
820
|
+
line-height: 1.7;
|
|
799
821
|
}
|
|
800
822
|
|
|
801
823
|
.render-stamp {
|
|
802
824
|
display: inline-block;
|
|
803
|
-
margin-top:
|
|
804
|
-
font-size: 0.
|
|
825
|
+
margin-top: 8px;
|
|
826
|
+
font-size: 0.82rem;
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
.render-band {
|
|
830
|
+
background: var(--surface-soft);
|
|
805
831
|
}
|
|
806
832
|
|
|
833
|
+
/* ── Stat / contact cards ── */
|
|
834
|
+
|
|
807
835
|
.stats-grid,
|
|
808
836
|
.card-grid {
|
|
809
837
|
width: 100%;
|
|
@@ -811,44 +839,48 @@ html.asjs-loading .route-loader {
|
|
|
811
839
|
}
|
|
812
840
|
|
|
813
841
|
.stat-card {
|
|
814
|
-
background:
|
|
842
|
+
background: var(--surface);
|
|
815
843
|
}
|
|
816
844
|
|
|
817
845
|
.stat-card strong,
|
|
818
846
|
.contact-value {
|
|
819
847
|
display: block;
|
|
820
|
-
color: var(--accent
|
|
821
|
-
font-size: 1.
|
|
848
|
+
color: var(--accent);
|
|
849
|
+
font-size: 1.6rem;
|
|
822
850
|
font-weight: 700;
|
|
823
|
-
letter-spacing: -0.
|
|
851
|
+
letter-spacing: -0.04em;
|
|
852
|
+
margin-top: 10px;
|
|
824
853
|
}
|
|
825
854
|
|
|
826
855
|
.contact-card {
|
|
827
|
-
background:
|
|
856
|
+
background: var(--surface);
|
|
828
857
|
}
|
|
829
858
|
|
|
859
|
+
/* ── Sections ── */
|
|
860
|
+
|
|
830
861
|
.section,
|
|
831
862
|
.split-layout,
|
|
832
863
|
.page-intro,
|
|
833
864
|
.section-card {
|
|
834
|
-
margin-top:
|
|
865
|
+
margin-top: 20px;
|
|
835
866
|
}
|
|
836
867
|
|
|
837
868
|
.compact-section {
|
|
838
|
-
margin-top:
|
|
869
|
+
margin-top: 14px;
|
|
839
870
|
}
|
|
840
871
|
|
|
841
872
|
.page-intro {
|
|
842
|
-
padding:
|
|
873
|
+
padding: 6px 2px 2px;
|
|
843
874
|
}
|
|
844
875
|
|
|
845
876
|
.section-header {
|
|
846
|
-
margin-bottom:
|
|
877
|
+
margin-bottom: 14px;
|
|
847
878
|
}
|
|
848
879
|
|
|
849
880
|
.info-card h3 {
|
|
850
|
-
margin: 0 0
|
|
851
|
-
font-size: 1.
|
|
881
|
+
margin: 0 0 10px;
|
|
882
|
+
font-size: 1.02rem;
|
|
883
|
+
font-weight: 700;
|
|
852
884
|
letter-spacing: -0.02em;
|
|
853
885
|
}
|
|
854
886
|
|
|
@@ -858,23 +890,21 @@ html.asjs-loading .route-loader {
|
|
|
858
890
|
|
|
859
891
|
.check-list,
|
|
860
892
|
.flow-list {
|
|
861
|
-
margin:
|
|
862
|
-
padding-left:
|
|
893
|
+
margin: 14px 0 0;
|
|
894
|
+
padding-left: 18px;
|
|
863
895
|
display: grid;
|
|
864
|
-
gap:
|
|
896
|
+
gap: 10px;
|
|
865
897
|
}
|
|
866
898
|
|
|
867
899
|
.check-list li::marker,
|
|
868
900
|
.flow-list li::marker {
|
|
869
|
-
color: var(--accent
|
|
901
|
+
color: var(--accent);
|
|
870
902
|
}
|
|
871
903
|
|
|
872
|
-
|
|
873
|
-
background: linear-gradient(180deg, #ffffff, #faf7f1);
|
|
874
|
-
}
|
|
904
|
+
/* ── Code ── */
|
|
875
905
|
|
|
876
|
-
.
|
|
877
|
-
background:
|
|
906
|
+
.code-panel {
|
|
907
|
+
background: var(--surface);
|
|
878
908
|
}
|
|
879
909
|
|
|
880
910
|
.code-block,
|
|
@@ -883,20 +913,23 @@ html.asjs-loading .route-loader {
|
|
|
883
913
|
}
|
|
884
914
|
|
|
885
915
|
.code-block {
|
|
886
|
-
margin:
|
|
887
|
-
padding:
|
|
888
|
-
border-radius:
|
|
889
|
-
background:
|
|
890
|
-
border: 1px solid
|
|
916
|
+
margin: 14px 0 0;
|
|
917
|
+
padding: 16px;
|
|
918
|
+
border-radius: var(--radius-md);
|
|
919
|
+
background: var(--surface-muted);
|
|
920
|
+
border: 1px solid var(--line);
|
|
891
921
|
white-space: pre-wrap;
|
|
892
922
|
word-break: break-word;
|
|
893
|
-
|
|
923
|
+
font-size: 0.84rem;
|
|
924
|
+
line-height: 1.65;
|
|
894
925
|
}
|
|
895
926
|
|
|
927
|
+
/* ── Quick check / inline response ── */
|
|
928
|
+
|
|
896
929
|
.quick-check-panel {
|
|
897
|
-
margin-top:
|
|
898
|
-
padding-top:
|
|
899
|
-
border-top: 1px solid
|
|
930
|
+
margin-top: 20px;
|
|
931
|
+
padding-top: 20px;
|
|
932
|
+
border-top: 1px solid var(--line);
|
|
900
933
|
}
|
|
901
934
|
|
|
902
935
|
.quick-check-actions {
|
|
@@ -904,94 +937,109 @@ html.asjs-loading .route-loader {
|
|
|
904
937
|
}
|
|
905
938
|
|
|
906
939
|
.inline-response-shell {
|
|
907
|
-
margin-top:
|
|
940
|
+
margin-top: 14px;
|
|
908
941
|
}
|
|
909
942
|
|
|
910
943
|
.asjs-inline-response {
|
|
911
|
-
padding:
|
|
912
|
-
border-radius:
|
|
913
|
-
border: 1px solid
|
|
914
|
-
background:
|
|
944
|
+
padding: 16px;
|
|
945
|
+
border-radius: var(--radius-md);
|
|
946
|
+
border: 1px solid var(--line);
|
|
947
|
+
background: var(--surface-soft);
|
|
915
948
|
box-shadow: var(--shadow-soft);
|
|
916
949
|
}
|
|
917
950
|
|
|
918
951
|
.asjs-inline-response strong {
|
|
919
952
|
display: block;
|
|
920
|
-
font-size:
|
|
953
|
+
font-size: 0.96rem;
|
|
954
|
+
font-weight: 700;
|
|
921
955
|
letter-spacing: -0.02em;
|
|
922
956
|
}
|
|
923
957
|
|
|
924
958
|
.asjs-inline-response p {
|
|
925
|
-
margin:
|
|
959
|
+
margin: 8px 0 0;
|
|
926
960
|
color: var(--muted);
|
|
927
|
-
|
|
961
|
+
font-size: 0.86rem;
|
|
962
|
+
line-height: 1.65;
|
|
928
963
|
}
|
|
929
964
|
|
|
930
965
|
.asjs-inline-response.is-success {
|
|
931
|
-
background:
|
|
966
|
+
background: #f0fdf4;
|
|
967
|
+
border-color: rgba(34, 197, 94, 0.2);
|
|
932
968
|
}
|
|
933
969
|
|
|
934
970
|
.asjs-inline-response.is-error {
|
|
935
|
-
background:
|
|
971
|
+
background: #fef2f2;
|
|
972
|
+
border-color: rgba(239, 68, 68, 0.2);
|
|
936
973
|
}
|
|
937
974
|
|
|
938
975
|
.asjs-inline-response.is-neutral {
|
|
939
|
-
background:
|
|
976
|
+
background: var(--surface-soft);
|
|
940
977
|
}
|
|
941
978
|
|
|
942
979
|
.inline-response-meta {
|
|
943
980
|
display: grid;
|
|
944
981
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
945
|
-
gap:
|
|
946
|
-
margin-top:
|
|
982
|
+
gap: 8px;
|
|
983
|
+
margin-top: 14px;
|
|
947
984
|
}
|
|
948
985
|
|
|
949
986
|
.inline-response-meta span {
|
|
950
987
|
display: grid;
|
|
951
|
-
gap:
|
|
988
|
+
gap: 5px;
|
|
952
989
|
margin: 0;
|
|
953
990
|
}
|
|
954
991
|
|
|
955
992
|
.inline-support {
|
|
956
|
-
margin:
|
|
993
|
+
margin: 14px 0 0;
|
|
957
994
|
color: var(--muted);
|
|
995
|
+
font-size: 0.86rem;
|
|
958
996
|
}
|
|
959
997
|
|
|
960
998
|
.inline-link {
|
|
961
|
-
color: var(--accent
|
|
999
|
+
color: var(--accent);
|
|
962
1000
|
text-decoration: underline;
|
|
963
1001
|
text-underline-offset: 3px;
|
|
964
1002
|
}
|
|
965
1003
|
|
|
1004
|
+
/* ── Not found ── */
|
|
1005
|
+
|
|
966
1006
|
.not-found-panel {
|
|
967
|
-
padding:
|
|
1007
|
+
padding: 28px;
|
|
968
1008
|
}
|
|
969
1009
|
|
|
1010
|
+
/* ── Footer ── */
|
|
1011
|
+
|
|
970
1012
|
.footer {
|
|
971
1013
|
display: flex;
|
|
972
1014
|
justify-content: space-between;
|
|
973
|
-
gap:
|
|
1015
|
+
gap: 12px;
|
|
974
1016
|
flex-wrap: wrap;
|
|
975
|
-
margin-top:
|
|
976
|
-
padding: 0
|
|
1017
|
+
margin-top: 16px;
|
|
1018
|
+
padding: 0 2px;
|
|
1019
|
+
color: var(--muted);
|
|
1020
|
+
font-size: 0.84rem;
|
|
977
1021
|
}
|
|
978
1022
|
|
|
979
1023
|
.footer strong {
|
|
980
1024
|
color: var(--text);
|
|
981
1025
|
}
|
|
982
1026
|
|
|
1027
|
+
/* ── Form state ── */
|
|
1028
|
+
|
|
983
1029
|
.asjs-form-submitting {
|
|
984
|
-
opacity: 0.
|
|
1030
|
+
opacity: 0.7;
|
|
985
1031
|
}
|
|
986
1032
|
|
|
987
1033
|
.asjs-form-submitting .button {
|
|
988
1034
|
pointer-events: none;
|
|
989
1035
|
}
|
|
990
1036
|
|
|
1037
|
+
/* ── Animations ── */
|
|
1038
|
+
|
|
991
1039
|
@keyframes reveal {
|
|
992
1040
|
from {
|
|
993
1041
|
opacity: 0;
|
|
994
|
-
transform: translateY(
|
|
1042
|
+
transform: translateY(6px);
|
|
995
1043
|
}
|
|
996
1044
|
|
|
997
1045
|
to {
|
|
@@ -1010,6 +1058,8 @@ html.asjs-loading .route-loader {
|
|
|
1010
1058
|
}
|
|
1011
1059
|
}
|
|
1012
1060
|
|
|
1061
|
+
/* ── Responsive ── */
|
|
1062
|
+
|
|
1013
1063
|
@media (max-width: 1080px) {
|
|
1014
1064
|
.header-main,
|
|
1015
1065
|
.hero,
|
|
@@ -1033,10 +1083,10 @@ html.asjs-loading .route-loader {
|
|
|
1033
1083
|
}
|
|
1034
1084
|
}
|
|
1035
1085
|
|
|
1036
|
-
@media (max-width:
|
|
1086
|
+
@media (max-width: 720px) {
|
|
1037
1087
|
.page-shell {
|
|
1038
|
-
width: min(100%, calc(100% -
|
|
1039
|
-
margin:
|
|
1088
|
+
width: min(100%, calc(100% - 16px));
|
|
1089
|
+
margin: 12px auto 20px;
|
|
1040
1090
|
}
|
|
1041
1091
|
|
|
1042
1092
|
.example-header,
|
|
@@ -1047,7 +1097,7 @@ html.asjs-loading .route-loader {
|
|
|
1047
1097
|
.info-card,
|
|
1048
1098
|
.stat-card,
|
|
1049
1099
|
.not-found-panel {
|
|
1050
|
-
padding:
|
|
1100
|
+
padding: 18px;
|
|
1051
1101
|
}
|
|
1052
1102
|
|
|
1053
1103
|
.header-note,
|
|
@@ -1063,7 +1113,7 @@ html.asjs-loading .route-loader {
|
|
|
1063
1113
|
}
|
|
1064
1114
|
|
|
1065
1115
|
.route-loader {
|
|
1066
|
-
inset: auto
|
|
1116
|
+
inset: auto 8px 8px 8px;
|
|
1067
1117
|
width: auto;
|
|
1068
1118
|
}
|
|
1069
1119
|
|