DocsLog in

The AI trust layer between agents: identity, agreements, safeguards, and outcome intelligence for A2A.

Viewing files at commit 6450fe9d331dCommit detailsView latest

apps/dashboard/src/styles.css 852 lines · 14.4 KB · css
1
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');
2
:root {
3
  font-family: Manrope, sans-serif;
4
  color: #e8ebe6;
5
  background: #0b0d0b;
6
  font-synthesis: none;
7
}
8
* {
9
  box-sizing: border-box;
10
}
11
body {
12
  margin: 0;
13
  min-width: 320px;
14
  background: #0b0d0b;
15
}
16
button,
17
input,
18
select {
19
  font: inherit;
20
}
21
.eyebrow {
22
  margin: 0;
23
  color: #758078;
24
  font: 500 10px 'DM Mono';
25
  letter-spacing: 0.14em;
26
  text-transform: uppercase;
27
}
28
.mark {
29
  display: grid;
30
  width: 40px;
31
  height: 40px;
32
  place-items: center;
33
  border-radius: 5px;
34
  color: #11150f;
35
  background: #b9f27c;
36
  font: 500 13px 'DM Mono';
37
}
38
.appShell {
39
  display: grid;
40
  grid-template-columns: 248px 1fr;
41
  min-height: 100vh;
42
}
43
.appShell aside {
44
  position: sticky;
45
  top: 0;
46
  display: flex;
47
  height: 100vh;
48
  flex-direction: column;
49
  padding: 24px 18px;
50
  border-right: 1px solid #262a26;
51
  background: #0e100e;
52
}
53
.brand {
54
  display: flex;
55
  align-items: center;
56
  gap: 12px;
57
}
58
.brand > div:last-child {
59
  display: flex;
60
  flex-direction: column;
61
  gap: 3px;
62
}
63
.brand strong {
64
  font-size: 15px;
65
}
66
.brand small {
67
  color: #69716a;
68
  font: 8px 'DM Mono';
69
  letter-spacing: 0.1em;
70
}
71
.appShell nav {
72
  display: flex;
73
  flex-direction: column;
74
  gap: 4px;
75
  margin-top: 42px;
76
}
77
.appShell nav button {
78
  display: flex;
79
  align-items: center;
80
  gap: 12px;
81
  padding: 11px 12px;
82
  border: 0;
83
  border-radius: 5px;
84
  color: #7e867f;
85
  background: transparent;
86
  text-align: left;
87
  font-size: 12px;
88
  cursor: pointer;
89
}
90
.appShell nav button span {
91
  width: 17px;
92
  color: #69716a;
93
  font: 15px 'DM Mono';
94
  text-align: center;
95
}
96
.appShell nav button:hover,
97
.appShell nav button.active {
98
  color: #e7ebe4;
99
  background: #191d19;
100
}
101
.appShell nav button.active span {
102
  color: #b9f27c;
103
}
104
.privacyStamp {
105
  display: flex;
106
  align-items: flex-start;
107
  gap: 10px;
108
  margin-top: auto;
109
  padding: 14px 10px;
110
  border: 1px solid #252a25;
111
  border-radius: 5px;
112
  background: #121512;
113
}
114
.privacyStamp > div {
115
  display: flex;
116
  flex-direction: column;
117
  gap: 4px;
118
}
119
.privacyStamp strong {
120
  font-size: 10px;
121
}
122
.privacyStamp small {
123
  color: #626b63;
124
  font-size: 8px;
125
  line-height: 1.4;
126
}
127
.liveDot {
128
  width: 6px;
129
  height: 6px;
130
  margin-top: 4px;
131
  border-radius: 50%;
132
  background: #b9f27c;
133
  box-shadow: 0 0 9px #b9f27c;
134
}
135
.account {
136
  display: flex;
137
  align-items: center;
138
  gap: 9px;
139
  width: 100%;
140
  margin-top: 12px;
141
  padding: 10px;
142
  border: 0;
143
  border-radius: 5px;
144
  color: #dfe4dd;
145
  background: transparent;
146
  text-align: left;
147
  cursor: pointer;
148
}
149
.account:hover {
150
  background: #171a17;
151
}
152
.account > span {
153
  display: grid;
154
  width: 30px;
155
  height: 30px;
156
  place-items: center;
157
  border: 1px solid #363c36;
158
  border-radius: 50%;
159
  color: #b9f27c;
160
  font: 10px 'DM Mono';
161
}
162
.account > div {
163
  display: flex;
164
  min-width: 0;
165
  flex: 1;
166
  flex-direction: column;
167
  gap: 3px;
168
}
169
.account strong,
170
.account small {
171
  overflow: hidden;
172
  text-overflow: ellipsis;
173
  white-space: nowrap;
174
}
175
.account strong {
176
  font-size: 10px;
177
}
178
.account small {
179
  color: #626a63;
180
  font-size: 8px;
181
}
182
.account > b {
183
  color: #626a63;
184
  font-size: 10px;
185
}
186
.appShell main {
187
  width: 100%;
188
  max-width: 1440px;
189
  padding: 46px 48px 80px;
190
}
191
.pageHead {
192
  display: flex;
193
  align-items: flex-end;
194
  justify-content: space-between;
195
  padding-bottom: 30px;
196
  border-bottom: 1px solid #282c28;
197
}
198
.pageHead h1 {
199
  max-width: 790px;
200
  margin: 9px 0 0;
201
  font-size: clamp(30px, 4vw, 52px);
202
  font-weight: 500;
203
  letter-spacing: -0.055em;
204
  line-height: 1.05;
205
}
206
.primary,
207
.secondary {
208
  padding: 10px 15px;
209
  border-radius: 5px;
210
  cursor: pointer;
211
  font-size: 11px;
212
}
213
.primary {
214
  border: 1px solid #b9f27c;
215
  color: #10140e;
216
  background: #b9f27c;
217
}
218
.primary:hover {
219
  background: #cafb96;
220
}
221
.primary:disabled {
222
  opacity: 0.5;
223
}
224
.secondary {
225
  border: 1px solid #3a403a;
226
  color: #dfe4dc;
227
  background: #171a17;
228
}
229
.metrics {
230
  display: grid;
231
  grid-template-columns: repeat(4, 1fr);
232
  margin: 18px 0;
233
}
234
.metric {
235
  display: flex;
236
  min-height: 142px;
237
  flex-direction: column;
238
  padding: 21px;
239
  border: 1px solid #292d29;
240
  border-right: 0;
241
  background: #111411;
242
}
243
.metric:first-child {
244
  border-radius: 6px 0 0 6px;
245
}
246
.metric:last-child {
247
  border-right: 1px solid #292d29;
248
  border-radius: 0 6px 6px 0;
249
}
250
.metric > span {
251
  color: #7a837b;
252
  font: 9px 'DM Mono';
253
  text-transform: uppercase;
254
}
255
.metric > strong {
256
  margin: auto 0 6px;
257
  font: 500 35px 'DM Mono';
258
}
259
.metric > small {
260
  color: #687069;
261
  font-size: 9px;
262
}
263
.metric.warn > strong {
264
  color: #f1c476;
265
}
266
.contentGrid,
267
.connectLayout {
268
  display: grid;
269
  grid-template-columns: 1.3fr 1fr;
270
  gap: 18px;
271
}
272
.panel {
273
  min-width: 0;
274
  padding: 22px;
275
  border: 1px solid #292e29;
276
  border-radius: 6px;
277
  background: #111411;
278
}
279
.panelHead {
280
  padding-bottom: 17px;
281
  border-bottom: 1px solid #252925;
282
}
283
.panelHead h2 {
284
  margin: 0;
285
  font-size: 13px;
286
}
287
.panelHead p {
288
  margin: 5px 0 0;
289
  color: #69716a;
290
  font-size: 10px;
291
}
292
.historyRow {
293
  display: flex;
294
  align-items: center;
295
  gap: 12px;
296
  padding: 14px 0;
297
  border-bottom: 1px solid #222622;
298
}
299
.historyRow > div {
300
  display: flex;
301
  min-width: 0;
302
  flex: 1;
303
  flex-direction: column;
304
  gap: 4px;
305
}
306
.historyRow strong {
307
  font-size: 11px;
308
  text-transform: capitalize;
309
}
310
.historyRow small {
311
  overflow: hidden;
312
  color: #687069;
313
  font: 9px 'DM Mono';
314
  text-overflow: ellipsis;
315
  white-space: nowrap;
316
}
317
.historyRow > b {
318
  color: #7f8880;
319
  font: 8px 'DM Mono';
320
  text-transform: uppercase;
321
}
322
.eventDot {
323
  width: 7px;
324
  height: 7px;
325
  flex: none;
326
  border-radius: 50%;
327
  background: #91b96b;
328
}
329
.eventDot.policy_warning,
330
.eventDot.objection {
331
  background: #f1c476;
332
}
333
.eventDot.policy_violation,
334
.eventDot.dispute {
335
  background: #ef826f;
336
}
337
.eventDot.receipt {
338
  background: #80b9e9;
339
}
340
.textButton {
341
  margin-top: 15px;
342
  padding: 0;
343
  border: 0;
344
  color: #b9f27c;
345
  background: transparent;
346
  font-size: 10px;
347
  cursor: pointer;
348
}
349
.empty {
350
  display: grid;
351
  min-height: 220px;
352
  place-items: center;
353
  align-content: center;
354
  padding: 30px;
355
  text-align: center;
356
}
357
.empty > span {
358
  display: grid;
359
  width: 42px;
360
  height: 42px;
361
  place-items: center;
362
  margin-bottom: 14px;
363
  border: 1px solid #303630;
364
  border-radius: 50%;
365
  color: #899189;
366
}
367
.empty strong {
368
  font-size: 12px;
369
}
370
.empty p {
371
  max-width: 420px;
372
  margin: 7px 0 16px;
373
  color: #666e67;
374
  font-size: 10px;
375
  line-height: 1.6;
376
}
377
.profile {
378
  padding: 16px 0;
379
  border-bottom: 1px solid #232723;
380
}
381
.profile:last-child {
382
  border-bottom: 0;
383
}
384
.profile > div:first-child {
385
  display: flex;
386
  justify-content: space-between;
387
  margin-bottom: 13px;
388
}
389
.profile > div:first-child strong {
390
  font-size: 10px;
391
}
392
.profile > div:first-child small {
393
  color: #69716a;
394
  font: 8px 'DM Mono';
395
}
396
.meter {
397
  display: grid;
398
  grid-template-columns: 82px 1fr 35px;
399
  align-items: center;
400
  gap: 8px;
401
  margin: 8px 0;
402
  color: #737b74;
403
  font: 8px 'DM Mono';
404
}
405
.meter i {
406
  height: 3px;
407
  background: #292e29;
408
}
409
.meter i b {
410
  display: block;
411
  height: 100%;
412
  background: #b9f27c;
413
}
414
.meter strong {
415
  text-align: right;
416
}
417
.agentGrid {
418
  display: grid;
419
  grid-template-columns: repeat(3, minmax(0, 1fr));
420
  gap: 16px;
421
  margin-top: 18px;
422
}
423
.agentGrid > .empty {
424
  grid-column: 1/-1;
425
  border: 1px solid #292e29;
426
  border-radius: 6px;
427
  background: #111411;
428
}
429
.agentCard {
430
  min-height: 230px;
431
  padding: 22px;
432
  border: 1px solid #292e29;
433
  border-radius: 6px;
434
  background: #111411;
435
}
436
.agentTop {
437
  display: flex;
438
  align-items: center;
439
  justify-content: space-between;
440
}
441
.agentGlyph {
442
  display: grid;
443
  width: 38px;
444
  height: 38px;
445
  place-items: center;
446
  border: 1px solid #303630;
447
  border-radius: 5px;
448
  color: #b9f27c;
449
}
450
.agentTop b {
451
  color: #b9f27c;
452
  font: 8px 'DM Mono';
453
}
454
.agentTop b.bad {
455
  color: #ef826f;
456
}
457
.agentCard h2 {
458
  margin: 24px 0 4px;
459
  font-size: 15px;
460
}
461
.agentCard p,
462
.agentCard > small {
463
  color: #687069;
464
  font-size: 9px;
465
}
466
.agentCard > small {
467
  display: block;
468
  margin-top: 20px;
469
}
470
.tags {
471
  display: flex;
472
  flex-wrap: wrap;
473
  gap: 5px;
474
  margin-top: 16px;
475
}
476
.tags span {
477
  padding: 5px 7px;
478
  border: 1px solid #2e342e;
479
  border-radius: 3px;
480
  color: #8f988f;
481
  font: 8px 'DM Mono';
482
}
483
.notice {
484
  margin: 18px 0;
485
  padding: 15px 18px;
486
  border-left: 2px solid #b9f27c;
487
  color: #838b84;
488
  background: #121612;
489
  font-size: 10px;
490
}
491
.notice strong {
492
  margin-right: 5px;
493
  color: #dfe5dc;
494
}
495
.connectLayout {
496
  margin-top: 18px;
497
}
498
.endpoint {
499
  display: flex;
500
  gap: 8px;
501
  margin: 24px 0;
502
}
503
.endpoint code {
504
  overflow: auto;
505
  flex: 1;
506
  padding: 13px;
507
  border: 1px solid #303530;
508
  border-radius: 4px;
509
  color: #b9f27c;
510
  background: #0c0e0c;
511
  font: 10px 'DM Mono';
512
  white-space: nowrap;
513
}
514
.endpoint button {
515
  padding: 0 14px;
516
  border: 1px solid #3a413a;
517
  border-radius: 4px;
518
  color: #dfe4dd;
519
  background: #1a1e1a;
520
  cursor: pointer;
521
}
522
.connectLayout ol {
523
  margin: 10px 0;
524
  padding-left: 25px;
525
  color: #899189;
526
  font-size: 11px;
527
  line-height: 2.2;
528
}
529
.checkList {
530
  margin: 22px 0 0;
531
  padding: 0;
532
  list-style: none;
533
}
534
.checkList li {
535
  padding: 11px 0;
536
  border-bottom: 1px solid #252925;
537
  color: #8b948c;
538
  font-size: 11px;
539
}
540
.checkList li::before {
541
  content: '✓';
542
  margin-right: 10px;
543
  color: #b9f27c;
544
}
545
.settingsCard {
546
  margin-top: 18px;
547
  border: 1px solid #292e29;
548
  border-radius: 6px;
549
  background: #111411;
550
}
551
.setting {
552
  display: grid;
553
  grid-template-columns: 1fr minmax(230px, 0.6fr);
554
  align-items: center;
555
  gap: 30px;
556
  padding: 22px 24px;
557
  border-bottom: 1px solid #262a26;
558
}
559
.setting strong {
560
  font-size: 12px;
561
}
562
.setting p {
563
  max-width: 580px;
564
  margin: 5px 0 0;
565
  color: #69716a;
566
  font-size: 9px;
567
  line-height: 1.6;
568
}
569
.setting input,
570
.setting select {
571
  width: 100%;
572
  padding: 10px 12px;
573
  border: 1px solid #333933;
574
  border-radius: 4px;
575
  outline: 0;
576
  color: #dfe4dc;
577
  background: #0c0f0c;
578
  font-size: 10px;
579
}
580
.setting input:focus,
581
.setting select:focus {
582
  border-color: #789b58;
583
}
584
.locked {
585
  float: right;
586
  color: #71806c;
587
  font: 9px 'DM Mono';
588
}
589
.toggle {
590
  position: relative;
591
  display: block;
592
  width: 42px;
593
  height: 23px;
594
  margin-left: auto;
595
  padding: 0;
596
  border: 1px solid #363c36;
597
  border-radius: 99px;
598
  background: #1a1e1a;
599
  cursor: pointer;
600
}
601
.toggle span {
602
  position: absolute;
603
  top: 3px;
604
  left: 3px;
605
  width: 15px;
606
  height: 15px;
607
  border-radius: 50%;
608
  background: #707970;
609
  transition: 0.2s;
610
}
611
.toggle.on {
612
  border-color: #789b58;
613
  background: #23301f;
614
}
615
.toggle.on span {
616
  left: 22px;
617
  background: #b9f27c;
618
}
619
.saveRow {
620
  display: flex;
621
  align-items: center;
622
  gap: 12px;
623
  padding: 20px 24px;
624
}
625
.saveRow span {
626
  color: #b9f27c;
627
  font-size: 10px;
628
}
629
.loginPage {
630
  display: grid;
631
  grid-template-columns: 1.05fr 0.95fr;
632
  min-height: 100vh;
633
}
634
.loginPitch {
635
  display: flex;
636
  flex-direction: column;
637
  justify-content: space-between;
638
  padding: 48px 7vw;
639
  background: radial-gradient(circle at 10% 90%, #273c2e 0, transparent 36rem), #0b0d0b;
640
}
641
.loginPitch h1 {
642
  max-width: 650px;
643
  margin: 15px 0 22px;
644
  font-size: clamp(48px, 6vw, 86px);
645
  font-weight: 500;
646
  letter-spacing: -0.07em;
647
  line-height: 0.95;
648
}
649
.loginPitch > div > p:last-child {
650
  max-width: 580px;
651
  color: #899189;
652
  font-size: 14px;
653
  line-height: 1.75;
654
}
655
.loginProof {
656
  display: grid;
657
  grid-template-columns: auto 1fr;
658
  gap: 10px 13px;
659
  color: #8b948c;
660
  font: 9px 'DM Mono';
661
  text-transform: uppercase;
662
}
663
.loginProof span {
664
  color: #b9f27c;
665
}
666
.loginCard {
667
  display: flex;
668
  flex-direction: column;
669
  justify-content: center;
670
  padding: 8vw;
671
  gap: 34px;
672
  border-left: 1px solid #292d29;
673
  background: #101310;
674
}
675
.loginCard h2 {
676
  margin: 10px 0;
677
  font-size: 28px;
678
  font-weight: 500;
679
  letter-spacing: -0.04em;
680
}
681
.loginCard > div > p:last-child,
682
.loginCard > small {
683
  color: #737c74;
684
  font-size: 10px;
685
  line-height: 1.6;
686
}
687
.loading {
688
  display: grid;
689
  min-height: 100vh;
690
  place-items: center;
691
  align-content: center;
692
  gap: 14px;
693
  color: #737b74;
694
  font: 9px 'DM Mono';
695
  text-transform: uppercase;
696
}
697
.loading.compact {
698
  min-height: 50vh;
699
}
700
.errorBar {
701
  margin-bottom: 14px;
702
  padding: 12px 14px;
703
  border: 1px solid #673e38;
704
  border-radius: 4px;
705
  color: #f3a296;
706
  background: #261513;
707
  font-size: 10px;
708
}
709
@media (max-width: 900px) {
710
  .agentGrid {
711
    grid-template-columns: 1fr 1fr;
712
  }
713
  .contentGrid,
714
  .connectLayout {
715
    grid-template-columns: 1fr;
716
  }
717
  .loginPage {
718
    grid-template-columns: 1fr;
719
  }
720
  .loginPitch {
721
    display: none;
722
  }
723
  .loginCard {
724
    min-height: 100vh;
725
    border: 0;
726
  }
727
  .appShell {
728
    grid-template-columns: 76px 1fr;
729
  }
730
  .appShell aside {
731
    padding: 20px 12px;
732
  }
733
  .brand > div:last-child,
734
  .appShell nav button:not(.active) {
735
    font-size: 0;
736
  }
737
  .appShell nav button {
738
    justify-content: center;
739
  }
740
  .appShell nav button span {
741
    font-size: 15px;
742
  }
743
  .privacyStamp,
744
  .account > div,
745
  .account > b {
746
    display: none;
747
  }
748
  .account {
749
    justify-content: center;
750
  }
751
  .appShell main {
752
    padding: 35px 28px;
753
  }
754
  .metrics {
755
    grid-template-columns: 1fr 1fr;
756
  }
757
  .metric:nth-child(2) {
758
    border-right: 1px solid #292d29;
759
  }
760
  .metric:first-child {
761
    border-radius: 6px 0 0;
762
  }
763
  .metric:nth-child(2) {
764
    border-radius: 0 6px 0 0;
765
  }
766
  .metric:nth-child(3) {
767
    border-radius: 0 0 0 6px;
768
  }
769
  .metric:last-child {
770
    border-radius: 0 0 6px;
771
  }
772
  .setting {
773
    grid-template-columns: 1fr;
774
  }
775
}
776
@media (max-width: 560px) {
777
  .appShell {
778
    display: block;
779
  }
780
  .appShell aside {
781
    position: fixed;
782
    z-index: 10;
783
    top: auto;
784
    bottom: 0;
785
    width: 100%;
786
    height: 64px;
787
    flex-direction: row;
788
    padding: 8px;
789
    border: 0;
790
    border-top: 1px solid #292d29;
791
  }
792
  .appShell aside > .brand,
793
  .privacyStamp,
794
  .account {
795
    display: none;
796
  }
797
  .appShell nav {
798
    display: grid;
799
    width: 100%;
800
    grid-template-columns: repeat(6, 1fr);
801
    margin: 0;
802
  }
803
  .appShell nav button,
804
  .appShell nav button:not(.active) {
805
    display: flex;
806
    justify-content: center;
807
    padding: 8px;
808
    font-size: 0;
809
  }
810
  .appShell main {
811
    padding: 28px 16px 90px;
812
  }
813
  .pageHead {
814
    align-items: flex-start;
815
  }
816
  .pageHead h1 {
817
    font-size: 34px;
818
  }
819
  .metrics,
820
  .agentGrid {
821
    grid-template-columns: 1fr;
822
  }
823
  .metric,
824
  .metric:nth-child(n) {
825
    border: 1px solid #292d29;
826
    border-bottom: 0;
827
    border-radius: 0;
828
  }
829
  .metric:first-child {
830
    border-radius: 6px 6px 0 0;
831
  }
832
  .metric:last-child {
833
    border-bottom: 1px solid #292d29;
834
    border-radius: 0 0 6px 6px;
835
  }
836
  .setting {
837
    grid-template-columns: 1fr;
838
    gap: 14px;
839
  }
840
  .toggle {
841
    margin-left: 0;
842
  }
843
  .endpoint {
844
    flex-direction: column;
845
  }
846
  .loginCard {
847
    padding: 24px;
848
  }
849
  .historyRow > b {
850
    display: none;
851
  }
852
}