|
1
|
:root { |
|
2
|
--paper: #f7f5f0; |
|
3
|
--surface: #ffffff; |
|
4
|
--ink: #0f1b2d; |
|
5
|
--ink-muted: #5a6575; |
|
6
|
--navy: #1a2b4a; |
|
7
|
--navy-deep: #0d1a33; |
|
8
|
--accent: #1e3a5f; |
|
9
|
--hairline: #d9d4c8; |
|
10
|
--hairline-strong: #c4bdb0; |
|
11
|
--focus: #2c5282; |
|
12
|
--error: #8b1e1e; |
|
13
|
--error-bg: #f8ecec; |
|
14
|
--radius: 6px; |
|
15
|
--shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 8px 24px rgba(15, 27, 45, 0.06); |
|
16
|
--font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; |
|
17
|
--mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; |
|
18
|
--sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; |
|
19
|
} |
|
20
|
|
|
21
|
*, |
|
22
|
*::before, |
|
23
|
*::after { |
|
24
|
box-sizing: border-box; |
|
25
|
} |
|
26
|
|
|
27
|
html { |
|
28
|
color-scheme: light; |
|
29
|
} |
|
30
|
|
|
31
|
body { |
|
32
|
margin: 0; |
|
33
|
min-height: 100vh; |
|
34
|
background: |
|
35
|
linear-gradient(180deg, #faf8f4 0%, var(--paper) 40%, #f0ebe3 100%); |
|
36
|
color: var(--ink); |
|
37
|
font-family: var(--sans); |
|
38
|
font-size: 15px; |
|
39
|
line-height: 1.5; |
|
40
|
-webkit-font-smoothing: antialiased; |
|
41
|
} |
|
42
|
|
|
43
|
.page { |
|
44
|
max-width: 720px; |
|
45
|
margin: 0 auto; |
|
46
|
padding: 2.5rem 1.25rem 3rem; |
|
47
|
} |
|
48
|
|
|
49
|
.header { |
|
50
|
display: flex; |
|
51
|
justify-content: space-between; |
|
52
|
align-items: flex-end; |
|
53
|
gap: 1rem; |
|
54
|
margin-bottom: 1.5rem; |
|
55
|
padding-bottom: 1.25rem; |
|
56
|
border-bottom: 1px solid var(--hairline); |
|
57
|
} |
|
58
|
|
|
59
|
.brand { |
|
60
|
display: flex; |
|
61
|
gap: 0.9rem; |
|
62
|
align-items: flex-start; |
|
63
|
} |
|
64
|
|
|
65
|
.brand-mark { |
|
66
|
width: 12px; |
|
67
|
height: 36px; |
|
68
|
margin-top: 0.35rem; |
|
69
|
background: var(--navy); |
|
70
|
border-radius: 1px; |
|
71
|
} |
|
72
|
|
|
73
|
.eyebrow { |
|
74
|
margin: 0 0 0.15rem; |
|
75
|
font-size: 0.7rem; |
|
76
|
letter-spacing: 0.14em; |
|
77
|
text-transform: uppercase; |
|
78
|
color: var(--ink-muted); |
|
79
|
font-weight: 600; |
|
80
|
} |
|
81
|
|
|
82
|
h1 { |
|
83
|
margin: 0; |
|
84
|
font-family: var(--font); |
|
85
|
font-size: 1.75rem; |
|
86
|
font-weight: 600; |
|
87
|
letter-spacing: -0.02em; |
|
88
|
color: var(--navy-deep); |
|
89
|
} |
|
90
|
|
|
91
|
.header-meta { |
|
92
|
margin: 0; |
|
93
|
font-size: 0.85rem; |
|
94
|
color: var(--ink-muted); |
|
95
|
} |
|
96
|
|
|
97
|
.header-meta code, |
|
98
|
code { |
|
99
|
font-family: var(--mono); |
|
100
|
font-size: 0.82em; |
|
101
|
background: rgba(26, 43, 74, 0.06); |
|
102
|
padding: 0.1em 0.35em; |
|
103
|
border-radius: 3px; |
|
104
|
} |
|
105
|
|
|
106
|
.card { |
|
107
|
background: var(--surface); |
|
108
|
border: 1px solid var(--hairline); |
|
109
|
border-radius: var(--radius); |
|
110
|
box-shadow: var(--shadow); |
|
111
|
padding: 1.5rem 1.5rem 1.35rem; |
|
112
|
margin-bottom: 1rem; |
|
113
|
} |
|
114
|
|
|
115
|
.section + .section { |
|
116
|
margin-top: 1.35rem; |
|
117
|
padding-top: 1.35rem; |
|
118
|
border-top: 1px solid var(--hairline); |
|
119
|
} |
|
120
|
|
|
121
|
h2 { |
|
122
|
margin: 0 0 0.35rem; |
|
123
|
font-family: var(--font); |
|
124
|
font-size: 1.15rem; |
|
125
|
font-weight: 600; |
|
126
|
color: var(--navy-deep); |
|
127
|
} |
|
128
|
|
|
129
|
h3 { |
|
130
|
margin: 0 0 0.75rem; |
|
131
|
font-size: 0.78rem; |
|
132
|
font-weight: 650; |
|
133
|
letter-spacing: 0.08em; |
|
134
|
text-transform: uppercase; |
|
135
|
color: var(--navy); |
|
136
|
} |
|
137
|
|
|
138
|
.muted { |
|
139
|
margin: 0 0 1rem; |
|
140
|
color: var(--ink-muted); |
|
141
|
font-size: 0.92rem; |
|
142
|
} |
|
143
|
|
|
144
|
.method-grid { |
|
145
|
display: grid; |
|
146
|
grid-template-columns: repeat(4, 1fr); |
|
147
|
gap: 0.65rem; |
|
148
|
} |
|
149
|
|
|
150
|
.method-option { |
|
151
|
cursor: pointer; |
|
152
|
margin: 0; |
|
153
|
} |
|
154
|
|
|
155
|
.method-option input { |
|
156
|
position: absolute; |
|
157
|
opacity: 0; |
|
158
|
pointer-events: none; |
|
159
|
} |
|
160
|
|
|
161
|
.method-face { |
|
162
|
display: flex; |
|
163
|
flex-direction: column; |
|
164
|
gap: 0.15rem; |
|
165
|
padding: 0.9rem 0.85rem; |
|
166
|
border: 1px solid var(--hairline-strong); |
|
167
|
border-radius: var(--radius); |
|
168
|
background: #fcfbf8; |
|
169
|
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; |
|
170
|
} |
|
171
|
|
|
172
|
.method-option input:focus-visible + .method-face { |
|
173
|
outline: 2px solid var(--focus); |
|
174
|
outline-offset: 2px; |
|
175
|
} |
|
176
|
|
|
177
|
.method-option input:checked + .method-face { |
|
178
|
border-color: var(--navy); |
|
179
|
background: #fff; |
|
180
|
box-shadow: inset 0 0 0 1px var(--navy); |
|
181
|
} |
|
182
|
|
|
183
|
.method-title { |
|
184
|
font-weight: 650; |
|
185
|
color: var(--navy-deep); |
|
186
|
font-size: 0.95rem; |
|
187
|
} |
|
188
|
|
|
189
|
.method-sub { |
|
190
|
font-size: 0.78rem; |
|
191
|
color: var(--ink-muted); |
|
192
|
} |
|
193
|
|
|
194
|
.field-grid { |
|
195
|
display: grid; |
|
196
|
grid-template-columns: 1fr 1fr; |
|
197
|
gap: 0.85rem 0.75rem; |
|
198
|
} |
|
199
|
|
|
200
|
.field-span { |
|
201
|
grid-column: 1 / -1; |
|
202
|
} |
|
203
|
|
|
204
|
.field { |
|
205
|
display: flex; |
|
206
|
flex-direction: column; |
|
207
|
gap: 0.35rem; |
|
208
|
font-size: 0.82rem; |
|
209
|
color: var(--ink-muted); |
|
210
|
} |
|
211
|
|
|
212
|
.field span em { |
|
213
|
font-style: normal; |
|
214
|
opacity: 0.75; |
|
215
|
} |
|
216
|
|
|
217
|
.field input, |
|
218
|
.field select { |
|
219
|
appearance: none; |
|
220
|
font: inherit; |
|
221
|
font-size: 0.95rem; |
|
222
|
color: var(--ink); |
|
223
|
background: #fff; |
|
224
|
border: 1px solid var(--hairline-strong); |
|
225
|
border-radius: 4px; |
|
226
|
padding: 0.55rem 0.65rem; |
|
227
|
transition: border-color 0.15s ease, box-shadow 0.15s ease; |
|
228
|
} |
|
229
|
|
|
230
|
.field select { |
|
231
|
background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), |
|
232
|
linear-gradient(135deg, var(--navy) 50%, transparent 50%); |
|
233
|
background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; |
|
234
|
background-size: 5px 5px, 5px 5px; |
|
235
|
background-repeat: no-repeat; |
|
236
|
padding-right: 2rem; |
|
237
|
} |
|
238
|
|
|
239
|
.field input:focus, |
|
240
|
.field select:focus { |
|
241
|
outline: none; |
|
242
|
border-color: var(--focus); |
|
243
|
box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.15); |
|
244
|
} |
|
245
|
|
|
246
|
.hint { |
|
247
|
margin: 0.85rem 0 0; |
|
248
|
font-size: 0.8rem; |
|
249
|
color: var(--ink-muted); |
|
250
|
} |
|
251
|
|
|
252
|
.form-error { |
|
253
|
margin: 1rem 0 0; |
|
254
|
padding: 0.65rem 0.75rem; |
|
255
|
background: var(--error-bg); |
|
256
|
border: 1px solid #e0c4c4; |
|
257
|
border-radius: 4px; |
|
258
|
color: var(--error); |
|
259
|
font-size: 0.88rem; |
|
260
|
} |
|
261
|
|
|
262
|
.actions { |
|
263
|
display: flex; |
|
264
|
gap: 0.6rem; |
|
265
|
margin-top: 1.35rem; |
|
266
|
padding-top: 1.15rem; |
|
267
|
border-top: 1px solid var(--hairline); |
|
268
|
} |
|
269
|
|
|
270
|
.btn { |
|
271
|
font: inherit; |
|
272
|
font-size: 0.9rem; |
|
273
|
font-weight: 600; |
|
274
|
border-radius: 4px; |
|
275
|
padding: 0.6rem 1rem; |
|
276
|
cursor: pointer; |
|
277
|
border: 1px solid transparent; |
|
278
|
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; |
|
279
|
} |
|
280
|
|
|
281
|
.btn-primary { |
|
282
|
background: var(--navy); |
|
283
|
color: #f7f5f0; |
|
284
|
border-color: var(--navy-deep); |
|
285
|
} |
|
286
|
|
|
287
|
.btn-primary:hover { |
|
288
|
background: var(--navy-deep); |
|
289
|
} |
|
290
|
|
|
291
|
.btn-ghost { |
|
292
|
background: transparent; |
|
293
|
color: var(--ink-muted); |
|
294
|
border-color: var(--hairline-strong); |
|
295
|
} |
|
296
|
|
|
297
|
.btn-ghost:hover { |
|
298
|
color: var(--ink); |
|
299
|
border-color: var(--navy); |
|
300
|
} |
|
301
|
|
|
302
|
.payload-card { |
|
303
|
background: #fbfaf7; |
|
304
|
} |
|
305
|
|
|
306
|
.payload-header { |
|
307
|
display: flex; |
|
308
|
align-items: center; |
|
309
|
justify-content: space-between; |
|
310
|
gap: 0.75rem; |
|
311
|
margin-bottom: 0.5rem; |
|
312
|
} |
|
313
|
|
|
314
|
.badge { |
|
315
|
font-size: 0.68rem; |
|
316
|
font-weight: 650; |
|
317
|
letter-spacing: 0.08em; |
|
318
|
text-transform: uppercase; |
|
319
|
color: var(--navy); |
|
320
|
border: 1px solid var(--hairline-strong); |
|
321
|
padding: 0.2rem 0.45rem; |
|
322
|
border-radius: 999px; |
|
323
|
background: #fff; |
|
324
|
} |
|
325
|
|
|
326
|
.badge.ok { |
|
327
|
color: #1a4d2e; |
|
328
|
border-color: #b7d0c0; |
|
329
|
background: #eef6f0; |
|
330
|
} |
|
331
|
|
|
332
|
.badge.err { |
|
333
|
color: var(--error); |
|
334
|
border-color: #e0c4c4; |
|
335
|
background: var(--error-bg); |
|
336
|
} |
|
337
|
|
|
338
|
.endpoint { |
|
339
|
display: flex; |
|
340
|
align-items: center; |
|
341
|
gap: 0.5rem; |
|
342
|
flex-wrap: wrap; |
|
343
|
} |
|
344
|
|
|
345
|
.verb { |
|
346
|
font-family: var(--mono); |
|
347
|
font-size: 0.72rem; |
|
348
|
font-weight: 700; |
|
349
|
letter-spacing: 0.04em; |
|
350
|
color: #fff; |
|
351
|
background: var(--navy); |
|
352
|
padding: 0.15rem 0.4rem; |
|
353
|
border-radius: 3px; |
|
354
|
} |
|
355
|
|
|
356
|
.payload { |
|
357
|
margin: 0.75rem 0 0; |
|
358
|
padding: 1rem; |
|
359
|
background: var(--navy-deep); |
|
360
|
color: #e8e4dc; |
|
361
|
border-radius: 4px; |
|
362
|
font-family: var(--mono); |
|
363
|
font-size: 0.8rem; |
|
364
|
line-height: 1.55; |
|
365
|
overflow-x: auto; |
|
366
|
white-space: pre-wrap; |
|
367
|
word-break: break-word; |
|
368
|
} |
|
369
|
|
|
370
|
.footer { |
|
371
|
margin-top: 1.5rem; |
|
372
|
text-align: center; |
|
373
|
color: var(--ink-muted); |
|
374
|
font-size: 0.78rem; |
|
375
|
} |
|
376
|
|
|
377
|
.footer p { |
|
378
|
margin: 0; |
|
379
|
} |
|
380
|
|
|
381
|
@media (max-width: 720px) { |
|
382
|
.method-grid { |
|
383
|
grid-template-columns: repeat(2, 1fr); |
|
384
|
} |
|
385
|
} |
|
386
|
|
|
387
|
@media (max-width: 560px) { |
|
388
|
.header { |
|
389
|
flex-direction: column; |
|
390
|
align-items: flex-start; |
|
391
|
} |
|
392
|
|
|
393
|
.method-grid, |
|
394
|
.field-grid { |
|
395
|
grid-template-columns: 1fr; |
|
396
|
} |
|
397
|
|
|
398
|
.actions { |
|
399
|
flex-direction: column; |
|
400
|
} |
|
401
|
|
|
402
|
.btn { |
|
403
|
width: 100%; |
|
404
|
} |
|
405
|
} |
|
406
|
|
|
407
|
.toggle { |
|
408
|
display: flex; |
|
409
|
align-items: flex-start; |
|
410
|
gap: 0.55rem; |
|
411
|
margin-top: 1rem; |
|
412
|
font-size: 0.88rem; |
|
413
|
color: var(--ink); |
|
414
|
cursor: pointer; |
|
415
|
} |
|
416
|
|
|
417
|
.toggle input { |
|
418
|
margin-top: 0.2rem; |
|
419
|
accent-color: var(--navy); |
|
420
|
} |
|
421
|
|
|
422
|
.btn-primary:disabled { |
|
423
|
opacity: 0.65; |
|
424
|
cursor: wait; |
|
425
|
} |
|
426
|
|
|
427
|
.fee-line { |
|
428
|
display: flex; |
|
429
|
flex-wrap: wrap; |
|
430
|
align-items: baseline; |
|
431
|
gap: 0.5rem 1rem; |
|
432
|
margin: 1rem 0 0.75rem; |
|
433
|
padding: 0.75rem 0.9rem; |
|
434
|
background: #f0f3f7; |
|
435
|
border: 1px solid var(--hairline); |
|
436
|
border-radius: var(--radius); |
|
437
|
font-family: var(--sans); |
|
438
|
font-size: 0.9rem; |
|
439
|
} |
|
440
|
|
|
441
|
.fee-label { |
|
442
|
font-weight: 600; |
|
443
|
color: var(--navy); |
|
444
|
letter-spacing: 0.02em; |
|
445
|
text-transform: uppercase; |
|
446
|
font-size: 0.7rem; |
|
447
|
} |
|
448
|
|
|
449
|
.fee-value { |
|
450
|
font-family: var(--mono); |
|
451
|
color: var(--ink); |
|
452
|
font-size: 0.85rem; |
|
453
|
} |
|
454
|
|
|
455
|
.fee-estimate { |
|
456
|
margin-left: auto; |
|
457
|
color: var(--ink-muted); |
|
458
|
font-size: 0.85rem; |
|
459
|
} |