attested.network
this repo has no description
attested.network/
1:root {
2 --bg: #ffffff;
3 --bg-subtle: #f8f9fb;
4 --bg-code: #f4f5f7;
5 --surface: #ffffff;
6 --border: #e5e7eb;
7 --border-light: #f0f1f3;
8 --text: #111827;
9 --text-secondary: #4b5563;
10 --text-tertiary: #9ca3af;
11 --accent: #6d28d9;
12 --accent-light: #8b5cf6;
13 --accent-bg: #f5f3ff;
14 --accent-border: #ddd6fe;
15 --green: #059669;
16 --green-bg: #ecfdf5;
17 --blue: #2563eb;
18 --orange: #d97706;
19 --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
20 --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
21}
22
23* { margin: 0; padding: 0; box-sizing: border-box; }
24
25body {
26 font-family: var(--sans);
27 background: var(--bg);
28 color: var(--text);
29 line-height: 1.7;
30 -webkit-font-smoothing: antialiased;
31}
32
33/* Top nav bar */
34.topnav {
35 position: sticky;
36 top: 0;
37 z-index: 100;
38 background: rgba(255, 255, 255, 0.85);
39 backdrop-filter: blur(12px);
40 border-bottom: 1px solid var(--border);
41 padding: 0 24px;
42}
43
44.topnav-inner {
45 max-width: 1100px;
46 margin: 0 auto;
47 display: flex;
48 align-items: center;
49 justify-content: space-between;
50 height: 56px;
51 gap: 24px;
52}
53
54.topnav-logo {
55 font-weight: 700;
56 font-size: 1rem;
57 color: var(--text);
58 text-decoration: none;
59 flex-shrink: 0;
60 display: flex;
61 align-items: center;
62 gap: 8px;
63}
64
65.topnav-logo-img {
66 height: 24px;
67 width: auto;
68}
69
70.topnav-logo span { color: var(--accent); }
71
72.topnav-links {
73 display: flex;
74 gap: 24px;
75 list-style: none;
76 overflow-x: auto;
77 -webkit-overflow-scrolling: touch;
78 scrollbar-width: none;
79}
80
81.topnav-links::-webkit-scrollbar { display: none; }
82
83.topnav-links a {
84 font-size: 0.85rem;
85 font-weight: 500;
86 color: var(--text-secondary);
87 text-decoration: none;
88 transition: color 0.15s;
89 white-space: nowrap;
90}
91
92.topnav-links a:hover { color: var(--accent); }
93.topnav-links a.active { color: var(--accent); }
94
95/* Hero */
96.hero {
97 text-align: center;
98 padding: 80px 24px 64px;
99 background: linear-gradient(180deg, var(--accent-bg) 0%, var(--bg) 100%);
100 border-bottom: 1px solid var(--border-light);
101}
102
103.hero h1 {
104 font-size: 3rem;
105 font-weight: 700;
106 letter-spacing: -0.04em;
107 line-height: 1.15;
108 margin-bottom: 16px;
109}
110
111.hero h1 span { color: var(--accent); }
112
113.hero .subtitle {
114 font-size: 1.2rem;
115 color: var(--text-secondary);
116 max-width: 560px;
117 margin: 0 auto 32px;
118 line-height: 1.6;
119}
120
121.hero-badges {
122 display: flex;
123 gap: 12px;
124 justify-content: center;
125 flex-wrap: wrap;
126}
127
128.hero-badge {
129 display: inline-flex;
130 align-items: center;
131 gap: 6px;
132 font-size: 0.85rem;
133 font-weight: 500;
134 color: var(--accent);
135 background: var(--surface);
136 border: 1px solid var(--accent-border);
137 border-radius: 8px;
138 padding: 8px 16px;
139 text-decoration: none;
140 transition: background 0.15s, border-color 0.15s;
141}
142
143.hero-badge:hover {
144 background: var(--accent-bg);
145 border-color: var(--accent-light);
146}
147
148.hero-badge svg {
149 width: 16px;
150 height: 16px;
151}
152
153/* Small hero for sub-pages */
154.hero-sm {
155 text-align: left;
156 padding: 48px 24px 40px;
157 background: linear-gradient(180deg, var(--accent-bg) 0%, var(--bg) 100%);
158 border-bottom: 1px solid var(--border-light);
159}
160
161.hero-sm .hero-inner {
162 max-width: 860px;
163 margin: 0 auto;
164}
165
166.hero-sm h1 {
167 font-size: 2rem;
168 font-weight: 700;
169 letter-spacing: -0.03em;
170 line-height: 1.2;
171 margin-bottom: 8px;
172}
173
174.hero-sm h1 span { color: var(--accent); }
175
176.hero-sm .subtitle {
177 font-size: 1.05rem;
178 color: var(--text-secondary);
179 max-width: 560px;
180 line-height: 1.6;
181 margin: 0;
182}
183
184.hero-sm .breadcrumb {
185 font-size: 0.82rem;
186 color: var(--text-tertiary);
187 margin-bottom: 12px;
188}
189
190.hero-sm .breadcrumb a {
191 color: var(--text-tertiary);
192 text-decoration: none;
193}
194
195.hero-sm .breadcrumb a:hover { color: var(--accent); }
196
197/* Main content */
198.container {
199 max-width: 860px;
200 margin: 0 auto;
201 padding: 0 24px;
202}
203
204section {
205 padding: 64px 0;
206}
207
208section + section {
209 border-top: 1px solid var(--border-light);
210}
211
212h2 {
213 font-size: 1.75rem;
214 font-weight: 700;
215 letter-spacing: -0.03em;
216 margin-bottom: 12px;
217}
218
219.section-desc {
220 font-size: 1.05rem;
221 color: var(--text-secondary);
222 margin-bottom: 32px;
223 max-width: 640px;
224}
225
226h3 {
227 font-size: 1.15rem;
228 font-weight: 600;
229 margin-bottom: 8px;
230}
231
232p {
233 color: var(--text-secondary);
234 margin-bottom: 16px;
235}
236
237a { color: var(--accent); text-decoration: none; }
238a:hover { text-decoration: underline; }
239
240/* Mermaid */
241.mermaid-wrapper {
242 background: var(--bg-subtle);
243 border: 1px solid var(--border);
244 border-radius: 12px;
245 padding: 32px 16px;
246 margin: 32px 0;
247 overflow-x: auto;
248}
249
250/* Card grid */
251.card-grid {
252 display: grid;
253 grid-template-columns: repeat(2, 1fr);
254 gap: 16px;
255 margin-top: 28px;
256}
257
258@media (max-width: 640px) {
259 .card-grid { grid-template-columns: 1fr; }
260}
261
262.card {
263 background: var(--surface);
264 border: 1px solid var(--border);
265 border-radius: 12px;
266 padding: 24px;
267 transition: border-color 0.15s, box-shadow 0.15s;
268}
269
270.card:hover {
271 border-color: var(--accent-border);
272 box-shadow: 0 2px 12px rgba(109, 40, 217, 0.06);
273}
274
275.card h4 {
276 font-size: 0.95rem;
277 font-weight: 600;
278 margin-bottom: 6px;
279}
280
281.card p {
282 font-size: 0.88rem;
283 color: var(--text-secondary);
284 margin-bottom: 0;
285 line-height: 1.55;
286}
287
288/* Guide cards (landing page audience selector) */
289.guide-grid {
290 display: grid;
291 grid-template-columns: repeat(2, 1fr);
292 gap: 16px;
293 margin-top: 20px;
294}
295
296@media (max-width: 640px) {
297 .guide-grid { grid-template-columns: 1fr; }
298}
299
300.guide-card {
301 display: block;
302 background: var(--surface);
303 border: 1px solid var(--border);
304 border-left: 3px solid var(--accent);
305 border-radius: 12px;
306 padding: 24px 24px 24px 22px;
307 text-decoration: none;
308 transition: border-color 0.15s, box-shadow 0.15s;
309}
310
311.guide-card:hover {
312 border-color: var(--accent-border);
313 border-left-color: var(--accent-light);
314 box-shadow: 0 2px 12px rgba(109, 40, 217, 0.08);
315 text-decoration: none;
316}
317
318.guide-card h4 {
319 font-size: 0.95rem;
320 font-weight: 600;
321 color: var(--text);
322 margin-bottom: 4px;
323}
324
325.guide-card p {
326 font-size: 0.85rem;
327 color: var(--text-secondary);
328 margin-bottom: 0;
329 line-height: 1.5;
330}
331
332.guide-card .guide-arrow {
333 display: inline-block;
334 color: var(--accent);
335 font-size: 0.82rem;
336 font-weight: 500;
337 margin-top: 10px;
338}
339
340/* Lexicon blocks */
341.lexicon-block {
342 background: var(--surface);
343 border: 1px solid var(--border);
344 border-radius: 12px;
345 margin-bottom: 24px;
346 overflow: hidden;
347}
348
349.lexicon-header {
350 padding: 24px 28px 20px;
351 border-bottom: 1px solid var(--border-light);
352}
353
354.lexicon-tag {
355 display: inline-block;
356 font-size: 0.7rem;
357 font-weight: 600;
358 font-family: var(--mono);
359 color: var(--accent);
360 background: var(--accent-bg);
361 border: 1px solid var(--accent-border);
362 border-radius: 6px;
363 padding: 2px 8px;
364 margin-bottom: 8px;
365 text-transform: uppercase;
366 letter-spacing: 0.05em;
367}
368
369.lexicon-name {
370 font-family: var(--mono);
371 font-size: 1.05rem;
372 font-weight: 600;
373 color: var(--text);
374 margin-bottom: 6px;
375 word-break: break-all;
376}
377
378.lexicon-desc {
379 font-size: 0.92rem;
380 color: var(--text-secondary);
381 margin-bottom: 0;
382 line-height: 1.55;
383}
384
385.lexicon-body {
386 padding: 0 28px 24px;
387}
388
389/* Schema table */
390.schema-table {
391 width: 100%;
392 border-collapse: collapse;
393 font-size: 0.875rem;
394 margin: 20px 0 0;
395}
396
397.schema-table th {
398 text-align: left;
399 font-weight: 600;
400 font-size: 0.72rem;
401 text-transform: uppercase;
402 letter-spacing: 0.06em;
403 color: var(--text-tertiary);
404 padding: 10px 12px;
405 border-bottom: 1px solid var(--border);
406}
407
408.schema-table td {
409 padding: 10px 12px;
410 border-bottom: 1px solid var(--border-light);
411 vertical-align: top;
412}
413
414.schema-table tr:last-child td { border-bottom: none; }
415
416.field-name {
417 font-family: var(--mono);
418 font-weight: 500;
419 font-size: 0.84rem;
420 color: var(--accent);
421 white-space: nowrap;
422}
423
424.field-type {
425 font-family: var(--mono);
426 font-size: 0.8rem;
427 color: var(--green);
428 white-space: nowrap;
429}
430
431.field-type .constraint {
432 color: var(--orange);
433 font-size: 0.72rem;
434 font-weight: 500;
435}
436
437.field-desc {
438 color: var(--text-secondary);
439 font-size: 0.85rem;
440}
441
442/* Inline code */
443code {
444 font-family: var(--mono);
445 font-size: 0.85em;
446 background: var(--bg-code);
447 color: var(--accent);
448 padding: 2px 6px;
449 border-radius: 4px;
450 border: 1px solid var(--border-light);
451}
452
453/* Code blocks */
454.code-block {
455 border: 1px solid var(--border);
456 border-radius: 10px;
457 overflow: hidden;
458 margin: 20px 0;
459}
460
461.code-label {
462 font-size: 0.72rem;
463 font-family: var(--mono);
464 font-weight: 500;
465 color: var(--text-tertiary);
466 padding: 10px 16px;
467 background: var(--bg-subtle);
468 border-bottom: 1px solid var(--border);
469 text-transform: uppercase;
470 letter-spacing: 0.05em;
471}
472
473pre {
474 padding: 16px;
475 font-family: var(--mono);
476 font-size: 0.82rem;
477 line-height: 1.65;
478 overflow-x: auto;
479 background: var(--bg-code);
480 margin: 0;
481}
482
483.hl-key { color: #8b5cf6; }
484.hl-str { color: #059669; }
485.hl-num { color: #d97706; }
486.hl-punc { color: #6b7280; }
487.hl-comment { color: #9ca3af; font-style: italic; }
488
489/* Info callout */
490.callout {
491 background: var(--accent-bg);
492 border: 1px solid var(--accent-border);
493 border-radius: 10px;
494 padding: 20px 24px;
495 margin: 24px 0;
496}
497
498.callout p { color: var(--text-secondary); margin-bottom: 0; }
499.callout strong { color: var(--text); }
500
501/* Steps */
502.steps {
503 counter-reset: step;
504 padding-left: 0;
505 list-style: none;
506}
507
508.steps li {
509 counter-increment: step;
510 position: relative;
511 padding-left: 40px;
512 margin-bottom: 16px;
513 color: var(--text-secondary);
514 font-size: 0.95rem;
515}
516
517.steps li::before {
518 content: counter(step);
519 position: absolute;
520 left: 0;
521 top: 1px;
522 width: 26px;
523 height: 26px;
524 border-radius: 50%;
525 background: var(--accent-bg);
526 border: 1px solid var(--accent-border);
527 color: var(--accent);
528 font-size: 0.78rem;
529 font-weight: 600;
530 display: flex;
531 align-items: center;
532 justify-content: center;
533 line-height: 1;
534}
535
536/* Trust model list */
537.trust-list {
538 list-style: none;
539 margin-top: 20px;
540}
541
542.trust-list li {
543 padding: 16px 20px;
544 border: 1px solid var(--border);
545 border-radius: 10px;
546 margin-bottom: 12px;
547 background: var(--surface);
548}
549
550.trust-list li strong {
551 color: var(--text);
552 display: block;
553 margin-bottom: 2px;
554 font-size: 0.92rem;
555}
556
557.trust-list li span {
558 color: var(--text-secondary);
559 font-size: 0.88rem;
560}
561
562/* Section sub-heading helper */
563.sub-heading { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin: 20px 0 4px; }
564
565/* Draft banner */
566.draft-banner {
567 background: #fef3c7;
568 border-bottom: 2px solid #f59e0b;
569 padding: 16px 24px;
570 text-align: center;
571}
572
573.draft-banner p {
574 color: #92400e;
575 font-size: 0.9rem;
576 font-weight: 500;
577 margin: 0;
578 max-width: 720px;
579 margin: 0 auto;
580 line-height: 1.5;
581}
582
583.draft-banner strong {
584 color: #78350f;
585 font-weight: 700;
586 text-transform: uppercase;
587 letter-spacing: 0.03em;
588}
589
590/* Footer */
591footer {
592 border-top: 1px solid var(--border);
593 padding: 40px 24px;
594 text-align: center;
595}
596
597footer p {
598 font-size: 0.85rem;
599 color: var(--text-tertiary);
600}
601
602footer a { color: var(--text-tertiary); }
603footer a:hover { color: var(--accent); }
604
605/* Responsive */
606@media (max-width: 640px) {
607 .hero { padding: 48px 24px 40px; }
608 .hero h1 { font-size: 2rem; }
609 .hero .subtitle { font-size: 1rem; }
610 .hero-sm h1 { font-size: 1.5rem; }
611 .lexicon-block { overflow: visible; }
612 .lexicon-header, .lexicon-body { padding-left: 16px; padding-right: 16px; }
613 .lexicon-name { font-size: 0.82rem; overflow-wrap: break-word; word-break: break-word; }
614 .topnav-links { gap: 16px; }
615 .topnav-links a { font-size: 0.78rem; }
616 .card-grid, .guide-grid { grid-template-columns: 1fr; }
617
618 /* Stack schema tables on mobile */
619 .schema-table thead { display: none; }
620 .schema-table, .schema-table tbody { display: block; }
621 .schema-table tr {
622 display: block;
623 padding: 12px 0;
624 border-bottom: 1px solid var(--border-light);
625 }
626 .schema-table tr:last-child { border-bottom: none; }
627 .schema-table td {
628 display: block;
629 padding: 2px 0;
630 border-bottom: none;
631 }
632 .field-name { font-size: 0.88rem; }
633 .field-type { white-space: normal; font-size: 0.76rem; }
634 .field-desc { font-size: 0.82rem; margin-top: 4px; }
635}