DocsLog in

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

Viewing files at commit 9c0e6fd29feaCommit detailsView latest

apps/dashboard/src/styles.css 947 lines · 16.0 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
.setupRequests {
273
  margin: 18px 0;
274
  padding: 22px;
275
  border: 1px solid #4b5d3d;
276
  border-radius: 6px;
277
  background: #131912;
278
}
279
.setupRequests > div:first-child h2 {
280
  margin: 8px 0 4px;
281
  font-size: 16px;
282
}
283
.setupRequests > div:first-child > p:last-child {
284
  margin: 0 0 18px;
285
  color: #778078;
286
  font-size: 10px;
287
}
288
.setupRequest {
289
  display: flex;
290
  align-items: center;
291
  justify-content: space-between;
292
  gap: 20px;
293
  padding: 16px;
294
  border: 1px solid #303830;
295
  border-radius: 5px;
296
  background: #101410;
297
}
298
.setupRequest + .setupRequest {
299
  margin-top: 10px;
300
}
301
.setupRequest > div:first-child {
302
  display: flex;
303
  flex-direction: column;
304
  gap: 5px;
305
}
306
.setupRequest strong {
307
  font-size: 12px;
308
}
309
.setupRequest small {
310
  color: #717a72;
311
  font: 9px 'DM Mono';
312
}
313
.decisionButtons {
314
  display: flex;
315
  flex: none;
316
  gap: 8px;
317
}
318
.setupRequests > .loginError {
319
  margin-top: 10px;
320
}
321
.panel {
322
  min-width: 0;
323
  padding: 22px;
324
  border: 1px solid #292e29;
325
  border-radius: 6px;
326
  background: #111411;
327
}
328
.panelHead {
329
  padding-bottom: 17px;
330
  border-bottom: 1px solid #252925;
331
}
332
.panelHead h2 {
333
  margin: 0;
334
  font-size: 13px;
335
}
336
.panelHead p {
337
  margin: 5px 0 0;
338
  color: #69716a;
339
  font-size: 10px;
340
}
341
.historyRow {
342
  display: flex;
343
  align-items: center;
344
  gap: 12px;
345
  padding: 14px 0;
346
  border-bottom: 1px solid #222622;
347
}
348
.historyRow > div {
349
  display: flex;
350
  min-width: 0;
351
  flex: 1;
352
  flex-direction: column;
353
  gap: 4px;
354
}
355
.historyRow strong {
356
  font-size: 11px;
357
  text-transform: capitalize;
358
}
359
.historyRow small {
360
  overflow: hidden;
361
  color: #687069;
362
  font: 9px 'DM Mono';
363
  text-overflow: ellipsis;
364
  white-space: nowrap;
365
}
366
.historyRow > b {
367
  color: #7f8880;
368
  font: 8px 'DM Mono';
369
  text-transform: uppercase;
370
}
371
.eventDot {
372
  width: 7px;
373
  height: 7px;
374
  flex: none;
375
  border-radius: 50%;
376
  background: #91b96b;
377
}
378
.eventDot.policy_warning,
379
.eventDot.objection {
380
  background: #f1c476;
381
}
382
.eventDot.policy_violation,
383
.eventDot.dispute {
384
  background: #ef826f;
385
}
386
.eventDot.receipt {
387
  background: #80b9e9;
388
}
389
.textButton {
390
  margin-top: 15px;
391
  padding: 0;
392
  border: 0;
393
  color: #b9f27c;
394
  background: transparent;
395
  font-size: 10px;
396
  cursor: pointer;
397
}
398
.empty {
399
  display: grid;
400
  min-height: 220px;
401
  place-items: center;
402
  align-content: center;
403
  padding: 30px;
404
  text-align: center;
405
}
406
.empty > span {
407
  display: grid;
408
  width: 42px;
409
  height: 42px;
410
  place-items: center;
411
  margin-bottom: 14px;
412
  border: 1px solid #303630;
413
  border-radius: 50%;
414
  color: #899189;
415
}
416
.empty strong {
417
  font-size: 12px;
418
}
419
.empty p {
420
  max-width: 420px;
421
  margin: 7px 0 16px;
422
  color: #666e67;
423
  font-size: 10px;
424
  line-height: 1.6;
425
}
426
.profile {
427
  padding: 16px 0;
428
  border-bottom: 1px solid #232723;
429
}
430
.profile:last-child {
431
  border-bottom: 0;
432
}
433
.profile > div:first-child {
434
  display: flex;
435
  justify-content: space-between;
436
  margin-bottom: 13px;
437
}
438
.profile > div:first-child strong {
439
  font-size: 10px;
440
}
441
.profile > div:first-child small {
442
  color: #69716a;
443
  font: 8px 'DM Mono';
444
}
445
.meter {
446
  display: grid;
447
  grid-template-columns: 82px 1fr 35px;
448
  align-items: center;
449
  gap: 8px;
450
  margin: 8px 0;
451
  color: #737b74;
452
  font: 8px 'DM Mono';
453
}
454
.meter i {
455
  height: 3px;
456
  background: #292e29;
457
}
458
.meter i b {
459
  display: block;
460
  height: 100%;
461
  background: #b9f27c;
462
}
463
.meter strong {
464
  text-align: right;
465
}
466
.agentGrid {
467
  display: grid;
468
  grid-template-columns: repeat(3, minmax(0, 1fr));
469
  gap: 16px;
470
  margin-top: 18px;
471
}
472
.agentGrid > .empty {
473
  grid-column: 1/-1;
474
  border: 1px solid #292e29;
475
  border-radius: 6px;
476
  background: #111411;
477
}
478
.agentCard {
479
  min-height: 230px;
480
  padding: 22px;
481
  border: 1px solid #292e29;
482
  border-radius: 6px;
483
  background: #111411;
484
}
485
.agentTop {
486
  display: flex;
487
  align-items: center;
488
  justify-content: space-between;
489
}
490
.agentGlyph {
491
  display: grid;
492
  width: 38px;
493
  height: 38px;
494
  place-items: center;
495
  border: 1px solid #303630;
496
  border-radius: 5px;
497
  color: #b9f27c;
498
}
499
.agentTop b {
500
  color: #b9f27c;
501
  font: 8px 'DM Mono';
502
}
503
.agentTop b.bad {
504
  color: #ef826f;
505
}
506
.agentCard h2 {
507
  margin: 24px 0 4px;
508
  font-size: 15px;
509
}
510
.agentCard p,
511
.agentCard > small {
512
  color: #687069;
513
  font-size: 9px;
514
}
515
.agentCard > small {
516
  display: block;
517
  margin-top: 20px;
518
}
519
.agentCard > button {
520
  width: 100%;
521
  margin-top: 18px;
522
}
523
.tags {
524
  display: flex;
525
  flex-wrap: wrap;
526
  gap: 5px;
527
  margin-top: 16px;
528
}
529
.tags span {
530
  padding: 5px 7px;
531
  border: 1px solid #2e342e;
532
  border-radius: 3px;
533
  color: #8f988f;
534
  font: 8px 'DM Mono';
535
}
536
.notice {
537
  margin: 18px 0;
538
  padding: 15px 18px;
539
  border-left: 2px solid #b9f27c;
540
  color: #838b84;
541
  background: #121612;
542
  font-size: 10px;
543
}
544
.notice strong {
545
  margin-right: 5px;
546
  color: #dfe5dc;
547
}
548
.connectLayout {
549
  margin-top: 18px;
550
}
551
.endpoint {
552
  display: flex;
553
  gap: 8px;
554
  margin: 24px 0;
555
}
556
.endpoint code {
557
  overflow: auto;
558
  flex: 1;
559
  padding: 13px;
560
  border: 1px solid #303530;
561
  border-radius: 4px;
562
  color: #b9f27c;
563
  background: #0c0e0c;
564
  font: 10px 'DM Mono';
565
  white-space: nowrap;
566
}
567
.endpoint button {
568
  padding: 0 14px;
569
  border: 1px solid #3a413a;
570
  border-radius: 4px;
571
  color: #dfe4dd;
572
  background: #1a1e1a;
573
  cursor: pointer;
574
}
575
.connectLayout ol {
576
  margin: 10px 0;
577
  padding-left: 25px;
578
  color: #899189;
579
  font-size: 11px;
580
  line-height: 2.2;
581
}
582
.checkList {
583
  margin: 22px 0 0;
584
  padding: 0;
585
  list-style: none;
586
}
587
.checkList li {
588
  padding: 11px 0;
589
  border-bottom: 1px solid #252925;
590
  color: #8b948c;
591
  font-size: 11px;
592
}
593
.checkList li::before {
594
  content: '✓';
595
  margin-right: 10px;
596
  color: #b9f27c;
597
}
598
.settingsCard {
599
  margin-top: 18px;
600
  border: 1px solid #292e29;
601
  border-radius: 6px;
602
  background: #111411;
603
}
604
.setting {
605
  display: grid;
606
  grid-template-columns: 1fr minmax(230px, 0.6fr);
607
  align-items: center;
608
  gap: 30px;
609
  padding: 22px 24px;
610
  border-bottom: 1px solid #262a26;
611
}
612
.setting strong {
613
  font-size: 12px;
614
}
615
.setting p {
616
  max-width: 580px;
617
  margin: 5px 0 0;
618
  color: #69716a;
619
  font-size: 9px;
620
  line-height: 1.6;
621
}
622
.setting input,
623
.setting select {
624
  width: 100%;
625
  padding: 10px 12px;
626
  border: 1px solid #333933;
627
  border-radius: 4px;
628
  outline: 0;
629
  color: #dfe4dc;
630
  background: #0c0f0c;
631
  font-size: 10px;
632
}
633
.setting input:focus,
634
.setting select:focus {
635
  border-color: #789b58;
636
}
637
.locked {
638
  float: right;
639
  color: #71806c;
640
  font: 9px 'DM Mono';
641
}
642
.toggle {
643
  position: relative;
644
  display: block;
645
  width: 42px;
646
  height: 23px;
647
  margin-left: auto;
648
  padding: 0;
649
  border: 1px solid #363c36;
650
  border-radius: 99px;
651
  background: #1a1e1a;
652
  cursor: pointer;
653
}
654
.toggle span {
655
  position: absolute;
656
  top: 3px;
657
  left: 3px;
658
  width: 15px;
659
  height: 15px;
660
  border-radius: 50%;
661
  background: #707970;
662
  transition: 0.2s;
663
}
664
.toggle.on {
665
  border-color: #789b58;
666
  background: #23301f;
667
}
668
.toggle.on span {
669
  left: 22px;
670
  background: #b9f27c;
671
}
672
.saveRow {
673
  display: flex;
674
  align-items: center;
675
  gap: 12px;
676
  padding: 20px 24px;
677
}
678
.saveRow span {
679
  color: #b9f27c;
680
  font-size: 10px;
681
}
682
.loginPage {
683
  display: grid;
684
  grid-template-columns: 1.05fr 0.95fr;
685
  min-height: 100vh;
686
}
687
.loginPitch {
688
  display: flex;
689
  flex-direction: column;
690
  justify-content: space-between;
691
  padding: 48px 7vw;
692
  background: radial-gradient(circle at 10% 90%, #273c2e 0, transparent 36rem), #0b0d0b;
693
}
694
.loginPitch h1 {
695
  max-width: 650px;
696
  margin: 15px 0 22px;
697
  font-size: clamp(48px, 6vw, 86px);
698
  font-weight: 500;
699
  letter-spacing: -0.07em;
700
  line-height: 0.95;
701
}
702
.loginPitch > div > p:last-child {
703
  max-width: 580px;
704
  color: #899189;
705
  font-size: 14px;
706
  line-height: 1.75;
707
}
708
.loginProof {
709
  display: grid;
710
  grid-template-columns: auto 1fr;
711
  gap: 10px 13px;
712
  color: #8b948c;
713
  font: 9px 'DM Mono';
714
  text-transform: uppercase;
715
}
716
.loginProof span {
717
  color: #b9f27c;
718
}
719
.loginCard {
720
  display: flex;
721
  flex-direction: column;
722
  justify-content: center;
723
  padding: 8vw;
724
  gap: 34px;
725
  border-left: 1px solid #292d29;
726
  background: #101310;
727
}
728
.loginCard h2 {
729
  margin: 10px 0;
730
  font-size: 28px;
731
  font-weight: 500;
732
  letter-spacing: -0.04em;
733
}
734
.socialButtons {
735
  display: grid;
736
  gap: 10px;
737
}
738
.socialButtons button {
739
  display: flex;
740
  align-items: center;
741
  justify-content: center;
742
  gap: 10px;
743
  width: 100%;
744
  padding: 13px;
745
  border: 1px solid #3a413a;
746
  border-radius: 5px;
747
  color: #e5e9e3;
748
  background: #171b17;
749
  font-size: 11px;
750
  font-weight: 600;
751
  cursor: pointer;
752
}
753
.socialButtons button:hover {
754
  border-color: #687266;
755
  background: #1d221d;
756
}
757
.socialButtons span {
758
  display: grid;
759
  width: 19px;
760
  height: 19px;
761
  place-items: center;
762
  font-size: 15px;
763
}
764
.socialButtons .google {
765
  color: #79a7ee;
766
  font-weight: 700;
767
}
768
.loginError {
769
  padding: 10px;
770
  border: 1px solid #673e38;
771
  border-radius: 4px;
772
  color: #f3a296;
773
  background: #261513;
774
  font-size: 10px;
775
}
776
.loginCard > div > p:last-child,
777
.loginCard > small {
778
  color: #737c74;
779
  font-size: 10px;
780
  line-height: 1.6;
781
}
782
.loading {
783
  display: grid;
784
  min-height: 100vh;
785
  place-items: center;
786
  align-content: center;
787
  gap: 14px;
788
  color: #737b74;
789
  font: 9px 'DM Mono';
790
  text-transform: uppercase;
791
}
792
.loading.compact {
793
  min-height: 50vh;
794
}
795
.errorBar {
796
  margin-bottom: 14px;
797
  padding: 12px 14px;
798
  border: 1px solid #673e38;
799
  border-radius: 4px;
800
  color: #f3a296;
801
  background: #261513;
802
  font-size: 10px;
803
}
804
@media (max-width: 900px) {
805
  .agentGrid {
806
    grid-template-columns: 1fr 1fr;
807
  }
808
  .contentGrid,
809
  .connectLayout {
810
    grid-template-columns: 1fr;
811
  }
812
  .loginPage {
813
    grid-template-columns: 1fr;
814
  }
815
  .loginPitch {
816
    display: none;
817
  }
818
  .loginCard {
819
    min-height: 100vh;
820
    border: 0;
821
  }
822
  .appShell {
823
    grid-template-columns: 76px 1fr;
824
  }
825
  .appShell aside {
826
    padding: 20px 12px;
827
  }
828
  .brand > div:last-child,
829
  .appShell nav button:not(.active) {
830
    font-size: 0;
831
  }
832
  .appShell nav button {
833
    justify-content: center;
834
  }
835
  .appShell nav button span {
836
    font-size: 15px;
837
  }
838
  .privacyStamp,
839
  .account > div,
840
  .account > b {
841
    display: none;
842
  }
843
  .account {
844
    justify-content: center;
845
  }
846
  .appShell main {
847
    padding: 35px 28px;
848
  }
849
  .metrics {
850
    grid-template-columns: 1fr 1fr;
851
  }
852
  .metric:nth-child(2) {
853
    border-right: 1px solid #292d29;
854
  }
855
  .metric:first-child {
856
    border-radius: 6px 0 0;
857
  }
858
  .metric:nth-child(2) {
859
    border-radius: 0 6px 0 0;
860
  }
861
  .metric:nth-child(3) {
862
    border-radius: 0 0 0 6px;
863
  }
864
  .metric:last-child {
865
    border-radius: 0 0 6px;
866
  }
867
  .setting {
868
    grid-template-columns: 1fr;
869
  }
870
}
871
@media (max-width: 560px) {
872
  .appShell {
873
    display: block;
874
  }
875
  .appShell aside {
876
    position: fixed;
877
    z-index: 10;
878
    top: auto;
879
    bottom: 0;
880
    width: 100%;
881
    height: 64px;
882
    flex-direction: row;
883
    padding: 8px;
884
    border: 0;
885
    border-top: 1px solid #292d29;
886
  }
887
  .appShell aside > .brand,
888
  .privacyStamp,
889
  .account {
890
    display: none;
891
  }
892
  .appShell nav {
893
    display: grid;
894
    width: 100%;
895
    grid-template-columns: repeat(6, 1fr);
896
    margin: 0;
897
  }
898
  .appShell nav button,
899
  .appShell nav button:not(.active) {
900
    display: flex;
901
    justify-content: center;
902
    padding: 8px;
903
    font-size: 0;
904
  }
905
  .appShell main {
906
    padding: 28px 16px 90px;
907
  }
908
  .pageHead {
909
    align-items: flex-start;
910
  }
911
  .pageHead h1 {
912
    font-size: 34px;
913
  }
914
  .metrics,
915
  .agentGrid {
916
    grid-template-columns: 1fr;
917
  }
918
  .metric,
919
  .metric:nth-child(n) {
920
    border: 1px solid #292d29;
921
    border-bottom: 0;
922
    border-radius: 0;
923
  }
924
  .metric:first-child {
925
    border-radius: 6px 6px 0 0;
926
  }
927
  .metric:last-child {
928
    border-bottom: 1px solid #292d29;
929
    border-radius: 0 0 6px 6px;
930
  }
931
  .setting {
932
    grid-template-columns: 1fr;
933
    gap: 14px;
934
  }
935
  .toggle {
936
    margin-left: 0;
937
  }
938
  .endpoint {
939
    flex-direction: column;
940
  }
941
  .loginCard {
942
    padding: 24px;
943
  }
944
  .historyRow > b {
945
    display: none;
946
  }
947
}