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