DocsLog in

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

Viewing files at commit 3dc3c2c6da63Commit detailsView latest

apps/dashboard/src/styles.css 943 lines · 15.9 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
.tags {
520
  display: flex;
521
  flex-wrap: wrap;
522
  gap: 5px;
523
  margin-top: 16px;
524
}
525
.tags span {
526
  padding: 5px 7px;
527
  border: 1px solid #2e342e;
528
  border-radius: 3px;
529
  color: #8f988f;
530
  font: 8px 'DM Mono';
531
}
532
.notice {
533
  margin: 18px 0;
534
  padding: 15px 18px;
535
  border-left: 2px solid #b9f27c;
536
  color: #838b84;
537
  background: #121612;
538
  font-size: 10px;
539
}
540
.notice strong {
541
  margin-right: 5px;
542
  color: #dfe5dc;
543
}
544
.connectLayout {
545
  margin-top: 18px;
546
}
547
.endpoint {
548
  display: flex;
549
  gap: 8px;
550
  margin: 24px 0;
551
}
552
.endpoint code {
553
  overflow: auto;
554
  flex: 1;
555
  padding: 13px;
556
  border: 1px solid #303530;
557
  border-radius: 4px;
558
  color: #b9f27c;
559
  background: #0c0e0c;
560
  font: 10px 'DM Mono';
561
  white-space: nowrap;
562
}
563
.endpoint button {
564
  padding: 0 14px;
565
  border: 1px solid #3a413a;
566
  border-radius: 4px;
567
  color: #dfe4dd;
568
  background: #1a1e1a;
569
  cursor: pointer;
570
}
571
.connectLayout ol {
572
  margin: 10px 0;
573
  padding-left: 25px;
574
  color: #899189;
575
  font-size: 11px;
576
  line-height: 2.2;
577
}
578
.checkList {
579
  margin: 22px 0 0;
580
  padding: 0;
581
  list-style: none;
582
}
583
.checkList li {
584
  padding: 11px 0;
585
  border-bottom: 1px solid #252925;
586
  color: #8b948c;
587
  font-size: 11px;
588
}
589
.checkList li::before {
590
  content: '✓';
591
  margin-right: 10px;
592
  color: #b9f27c;
593
}
594
.settingsCard {
595
  margin-top: 18px;
596
  border: 1px solid #292e29;
597
  border-radius: 6px;
598
  background: #111411;
599
}
600
.setting {
601
  display: grid;
602
  grid-template-columns: 1fr minmax(230px, 0.6fr);
603
  align-items: center;
604
  gap: 30px;
605
  padding: 22px 24px;
606
  border-bottom: 1px solid #262a26;
607
}
608
.setting strong {
609
  font-size: 12px;
610
}
611
.setting p {
612
  max-width: 580px;
613
  margin: 5px 0 0;
614
  color: #69716a;
615
  font-size: 9px;
616
  line-height: 1.6;
617
}
618
.setting input,
619
.setting select {
620
  width: 100%;
621
  padding: 10px 12px;
622
  border: 1px solid #333933;
623
  border-radius: 4px;
624
  outline: 0;
625
  color: #dfe4dc;
626
  background: #0c0f0c;
627
  font-size: 10px;
628
}
629
.setting input:focus,
630
.setting select:focus {
631
  border-color: #789b58;
632
}
633
.locked {
634
  float: right;
635
  color: #71806c;
636
  font: 9px 'DM Mono';
637
}
638
.toggle {
639
  position: relative;
640
  display: block;
641
  width: 42px;
642
  height: 23px;
643
  margin-left: auto;
644
  padding: 0;
645
  border: 1px solid #363c36;
646
  border-radius: 99px;
647
  background: #1a1e1a;
648
  cursor: pointer;
649
}
650
.toggle span {
651
  position: absolute;
652
  top: 3px;
653
  left: 3px;
654
  width: 15px;
655
  height: 15px;
656
  border-radius: 50%;
657
  background: #707970;
658
  transition: 0.2s;
659
}
660
.toggle.on {
661
  border-color: #789b58;
662
  background: #23301f;
663
}
664
.toggle.on span {
665
  left: 22px;
666
  background: #b9f27c;
667
}
668
.saveRow {
669
  display: flex;
670
  align-items: center;
671
  gap: 12px;
672
  padding: 20px 24px;
673
}
674
.saveRow span {
675
  color: #b9f27c;
676
  font-size: 10px;
677
}
678
.loginPage {
679
  display: grid;
680
  grid-template-columns: 1.05fr 0.95fr;
681
  min-height: 100vh;
682
}
683
.loginPitch {
684
  display: flex;
685
  flex-direction: column;
686
  justify-content: space-between;
687
  padding: 48px 7vw;
688
  background: radial-gradient(circle at 10% 90%, #273c2e 0, transparent 36rem), #0b0d0b;
689
}
690
.loginPitch h1 {
691
  max-width: 650px;
692
  margin: 15px 0 22px;
693
  font-size: clamp(48px, 6vw, 86px);
694
  font-weight: 500;
695
  letter-spacing: -0.07em;
696
  line-height: 0.95;
697
}
698
.loginPitch > div > p:last-child {
699
  max-width: 580px;
700
  color: #899189;
701
  font-size: 14px;
702
  line-height: 1.75;
703
}
704
.loginProof {
705
  display: grid;
706
  grid-template-columns: auto 1fr;
707
  gap: 10px 13px;
708
  color: #8b948c;
709
  font: 9px 'DM Mono';
710
  text-transform: uppercase;
711
}
712
.loginProof span {
713
  color: #b9f27c;
714
}
715
.loginCard {
716
  display: flex;
717
  flex-direction: column;
718
  justify-content: center;
719
  padding: 8vw;
720
  gap: 34px;
721
  border-left: 1px solid #292d29;
722
  background: #101310;
723
}
724
.loginCard h2 {
725
  margin: 10px 0;
726
  font-size: 28px;
727
  font-weight: 500;
728
  letter-spacing: -0.04em;
729
}
730
.socialButtons {
731
  display: grid;
732
  gap: 10px;
733
}
734
.socialButtons button {
735
  display: flex;
736
  align-items: center;
737
  justify-content: center;
738
  gap: 10px;
739
  width: 100%;
740
  padding: 13px;
741
  border: 1px solid #3a413a;
742
  border-radius: 5px;
743
  color: #e5e9e3;
744
  background: #171b17;
745
  font-size: 11px;
746
  font-weight: 600;
747
  cursor: pointer;
748
}
749
.socialButtons button:hover {
750
  border-color: #687266;
751
  background: #1d221d;
752
}
753
.socialButtons span {
754
  display: grid;
755
  width: 19px;
756
  height: 19px;
757
  place-items: center;
758
  font-size: 15px;
759
}
760
.socialButtons .google {
761
  color: #79a7ee;
762
  font-weight: 700;
763
}
764
.loginError {
765
  padding: 10px;
766
  border: 1px solid #673e38;
767
  border-radius: 4px;
768
  color: #f3a296;
769
  background: #261513;
770
  font-size: 10px;
771
}
772
.loginCard > div > p:last-child,
773
.loginCard > small {
774
  color: #737c74;
775
  font-size: 10px;
776
  line-height: 1.6;
777
}
778
.loading {
779
  display: grid;
780
  min-height: 100vh;
781
  place-items: center;
782
  align-content: center;
783
  gap: 14px;
784
  color: #737b74;
785
  font: 9px 'DM Mono';
786
  text-transform: uppercase;
787
}
788
.loading.compact {
789
  min-height: 50vh;
790
}
791
.errorBar {
792
  margin-bottom: 14px;
793
  padding: 12px 14px;
794
  border: 1px solid #673e38;
795
  border-radius: 4px;
796
  color: #f3a296;
797
  background: #261513;
798
  font-size: 10px;
799
}
800
@media (max-width: 900px) {
801
  .agentGrid {
802
    grid-template-columns: 1fr 1fr;
803
  }
804
  .contentGrid,
805
  .connectLayout {
806
    grid-template-columns: 1fr;
807
  }
808
  .loginPage {
809
    grid-template-columns: 1fr;
810
  }
811
  .loginPitch {
812
    display: none;
813
  }
814
  .loginCard {
815
    min-height: 100vh;
816
    border: 0;
817
  }
818
  .appShell {
819
    grid-template-columns: 76px 1fr;
820
  }
821
  .appShell aside {
822
    padding: 20px 12px;
823
  }
824
  .brand > div:last-child,
825
  .appShell nav button:not(.active) {
826
    font-size: 0;
827
  }
828
  .appShell nav button {
829
    justify-content: center;
830
  }
831
  .appShell nav button span {
832
    font-size: 15px;
833
  }
834
  .privacyStamp,
835
  .account > div,
836
  .account > b {
837
    display: none;
838
  }
839
  .account {
840
    justify-content: center;
841
  }
842
  .appShell main {
843
    padding: 35px 28px;
844
  }
845
  .metrics {
846
    grid-template-columns: 1fr 1fr;
847
  }
848
  .metric:nth-child(2) {
849
    border-right: 1px solid #292d29;
850
  }
851
  .metric:first-child {
852
    border-radius: 6px 0 0;
853
  }
854
  .metric:nth-child(2) {
855
    border-radius: 0 6px 0 0;
856
  }
857
  .metric:nth-child(3) {
858
    border-radius: 0 0 0 6px;
859
  }
860
  .metric:last-child {
861
    border-radius: 0 0 6px;
862
  }
863
  .setting {
864
    grid-template-columns: 1fr;
865
  }
866
}
867
@media (max-width: 560px) {
868
  .appShell {
869
    display: block;
870
  }
871
  .appShell aside {
872
    position: fixed;
873
    z-index: 10;
874
    top: auto;
875
    bottom: 0;
876
    width: 100%;
877
    height: 64px;
878
    flex-direction: row;
879
    padding: 8px;
880
    border: 0;
881
    border-top: 1px solid #292d29;
882
  }
883
  .appShell aside > .brand,
884
  .privacyStamp,
885
  .account {
886
    display: none;
887
  }
888
  .appShell nav {
889
    display: grid;
890
    width: 100%;
891
    grid-template-columns: repeat(6, 1fr);
892
    margin: 0;
893
  }
894
  .appShell nav button,
895
  .appShell nav button:not(.active) {
896
    display: flex;
897
    justify-content: center;
898
    padding: 8px;
899
    font-size: 0;
900
  }
901
  .appShell main {
902
    padding: 28px 16px 90px;
903
  }
904
  .pageHead {
905
    align-items: flex-start;
906
  }
907
  .pageHead h1 {
908
    font-size: 34px;
909
  }
910
  .metrics,
911
  .agentGrid {
912
    grid-template-columns: 1fr;
913
  }
914
  .metric,
915
  .metric:nth-child(n) {
916
    border: 1px solid #292d29;
917
    border-bottom: 0;
918
    border-radius: 0;
919
  }
920
  .metric:first-child {
921
    border-radius: 6px 6px 0 0;
922
  }
923
  .metric:last-child {
924
    border-bottom: 1px solid #292d29;
925
    border-radius: 0 0 6px 6px;
926
  }
927
  .setting {
928
    grid-template-columns: 1fr;
929
    gap: 14px;
930
  }
931
  .toggle {
932
    margin-left: 0;
933
  }
934
  .endpoint {
935
    flex-direction: column;
936
  }
937
  .loginCard {
938
    padding: 24px;
939
  }
940
  .historyRow > b {
941
    display: none;
942
  }
943
}