DocsLog in

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

Viewing files at commit 3f140fdd2001Commit detailsView latest

apps/dashboard/src/landing.css 1319 lines · 22.7 KB · css
1
/* Public landing — protocol document */
2
3
html:has(.landingPage),
4
html:has(.landingPage) body {
5
  scrollbar-gutter: stable;
6
  scrollbar-width: thin;
7
  scrollbar-color: color-mix(in srgb, var(--accent) 70%, #8a6a62)
8
    color-mix(in srgb, var(--bg) 92%, var(--border));
9
}
10
11
html:has(.landingPage)::-webkit-scrollbar,
12
html:has(.landingPage) body::-webkit-scrollbar {
13
  width: 10px;
14
}
15
16
html:has(.landingPage)::-webkit-scrollbar-track,
17
html:has(.landingPage) body::-webkit-scrollbar-track {
18
  background: color-mix(in srgb, var(--bg) 96%, #000);
19
  box-shadow: inset 1px 0 0 var(--border);
20
}
21
22
html:has(.landingPage)::-webkit-scrollbar-thumb,
23
html:has(.landingPage) body::-webkit-scrollbar-thumb {
24
  background: color-mix(in srgb, var(--accent) 58%, #6e534c);
25
  border: 3px solid color-mix(in srgb, var(--bg) 96%, #000);
26
  background-clip: padding-box;
27
}
28
29
html:has(.landingPage)::-webkit-scrollbar-thumb:hover,
30
html:has(.landingPage) body::-webkit-scrollbar-thumb:hover {
31
  background: var(--accent);
32
  border: 3px solid color-mix(in srgb, var(--bg) 96%, #000);
33
  background-clip: padding-box;
34
}
35
36
html:has(.landingPage)::-webkit-scrollbar-corner,
37
html:has(.landingPage) body::-webkit-scrollbar-corner {
38
  background: transparent;
39
}
40
41
.landingPage {
42
  position: relative;
43
  isolation: isolate;
44
  min-height: 100vh;
45
  overflow-x: clip;
46
  color: var(--text);
47
  font-family: var(--mono);
48
  background: var(--bg);
49
}
50
51
.landingPage > main,
52
.landingFooter {
53
  position: relative;
54
  z-index: 1;
55
}
56
57
.landingPage a {
58
  color: inherit;
59
  text-decoration: none;
60
}
61
62
.landingPage :is(a, button) {
63
  -webkit-tap-highlight-color: transparent;
64
}
65
66
.landingPage button,
67
.landingPage .navCta,
68
.landingPage .landingPrimary,
69
.landingPage .landingSecondary,
70
.landingPage .themeButton,
71
.landingPage .accessCard .socialButtons button,
72
.landingPage .demoActions button {
73
  border-radius: 0;
74
}
75
76
.landingNav {
77
  position: sticky;
78
  top: 0;
79
  z-index: 20;
80
  display: grid;
81
  min-height: 52px;
82
  padding: 0 max(24px, calc((100% - 1120px) / 2));
83
  grid-template-columns: 1fr auto 1fr;
84
  align-items: center;
85
  border-bottom: 1px solid var(--border);
86
  background: color-mix(in srgb, var(--bg) 88%, transparent);
87
  backdrop-filter: blur(12px);
88
  -webkit-backdrop-filter: blur(12px);
89
}
90
91
.landingBrand {
92
  display: inline-flex;
93
  width: fit-content;
94
  align-items: center;
95
  gap: 10px;
96
  font-size: 16px;
97
  font-weight: 500;
98
  letter-spacing: 0.04em;
99
  text-transform: lowercase;
100
}
101
102
.landingBrand strong {
103
  font-weight: 500;
104
}
105
106
.landingBrand .landingMark {
107
  display: block;
108
  width: 28px;
109
  height: 28px;
110
  flex: none;
111
}
112
113
.landingMark {
114
  color: var(--accent);
115
}
116
117
.landingNav nav {
118
  display: flex;
119
  align-items: center;
120
  gap: 28px;
121
  color: var(--text-muted);
122
  font-size: 12px;
123
}
124
125
.landingNav nav a {
126
  letter-spacing: 0.06em;
127
  text-transform: lowercase;
128
}
129
130
.landingNav nav a::before {
131
  margin-right: 2px;
132
  color: var(--text-faint);
133
  content: '/';
134
}
135
136
.landingNav nav a,
137
.landingSecondary {
138
  transition: color 140ms ease;
139
}
140
141
.landingNav nav a:hover,
142
.landingSecondary:hover {
143
  color: var(--text);
144
}
145
146
.landingNavActions {
147
  display: flex;
148
  justify-content: flex-end;
149
  align-items: center;
150
  gap: 8px;
151
}
152
153
.themeButton {
154
  display: grid;
155
  width: 34px;
156
  height: 34px;
157
  padding: 0;
158
  place-items: center;
159
  border: 1px solid var(--border);
160
  color: var(--text-muted);
161
  background: transparent;
162
  cursor: pointer;
163
}
164
165
.themeButton:hover {
166
  border-color: var(--border-strong);
167
  color: var(--text);
168
}
169
170
.themeButton svg,
171
.navCta svg,
172
.landingPrimary svg {
173
  width: 14px;
174
  height: 14px;
175
}
176
177
.navCta,
178
.landingPrimary {
179
  display: inline-flex;
180
  align-items: center;
181
  justify-content: center;
182
  gap: 8px;
183
  color: #fff !important;
184
  background: var(--accent);
185
  font-size: 12px;
186
  font-weight: 500;
187
  letter-spacing: 0.04em;
188
  text-transform: lowercase;
189
  transition:
190
    background 140ms ease,
191
    transform 140ms ease;
192
}
193
194
.navCta svg,
195
.landingPrimary svg {
196
  transition: transform 160ms ease;
197
}
198
199
.navCta {
200
  min-height: 34px;
201
  padding: 0 12px;
202
}
203
204
.navCta:hover,
205
.landingPrimary:hover {
206
  background: var(--accent-hover);
207
}
208
209
.navCta:hover svg,
210
.landingPrimary:hover svg {
211
  transform: translateX(3px);
212
}
213
214
.navCta:active,
215
.landingPrimary:active {
216
  transform: translateY(1px);
217
}
218
219
.landingHero {
220
  position: relative;
221
  display: grid;
222
  width: min(100% - 48px, 1120px);
223
  min-height: 640px;
224
  margin: 0 auto;
225
  padding: 72px 0 80px;
226
  grid-template-columns: minmax(0, 0.96fr) minmax(380px, 1fr);
227
  align-items: center;
228
  gap: clamp(32px, 5vw, 72px);
229
}
230
231
.heroCopy {
232
  position: relative;
233
  z-index: 2;
234
  animation: landingReveal 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
235
}
236
237
.landingKicker {
238
  display: flex;
239
  align-items: center;
240
  gap: 10px;
241
  margin: 0;
242
  color: var(--text-faint);
243
  font-family: var(--mono);
244
  font-size: 11px;
245
  font-weight: 400;
246
  letter-spacing: 0.08em;
247
  line-height: 1.4;
248
  text-transform: lowercase;
249
}
250
251
.landingKicker > span {
252
  color: var(--accent);
253
}
254
255
.heroCopy h1,
256
.sectionIntro h2,
257
.principlesSection h2,
258
.accessCopy h2 {
259
  margin: 18px 0;
260
  font-weight: 500;
261
  letter-spacing: -0.045em;
262
  line-height: 0.96;
263
}
264
265
.heroCopy h1 {
266
  max-width: 16ch;
267
  font-size: clamp(40px, 5.4vw, 68px);
268
}
269
270
.heroCopy h1 em,
271
.sectionIntro h2 em,
272
.principlesSection h2 em {
273
  display: inline-block;
274
  color: var(--text-muted);
275
  font-style: normal;
276
  font-weight: 400;
277
}
278
279
.heroCopy h1 em {
280
  padding-left: 0.55em;
281
}
282
283
.heroCopy h1 em::after {
284
  display: inline-block;
285
  width: 0.55ch;
286
  margin-left: 2px;
287
  color: var(--accent);
288
  content: '_';
289
  animation: caretBlink 1.1s steps(1) infinite;
290
}
291
292
.heroCopy > p {
293
  max-width: 42em;
294
  margin: 0;
295
  color: var(--text-muted);
296
  font-family: var(--font);
297
  font-size: 15px;
298
  line-height: 1.6;
299
}
300
301
.heroActions {
302
  display: flex;
303
  flex-wrap: wrap;
304
  align-items: center;
305
  gap: 22px;
306
  margin-top: 32px;
307
}
308
309
.landingPrimary {
310
  min-height: 42px;
311
  padding: 0 16px;
312
}
313
314
.landingSecondary {
315
  padding: 6px 0;
316
  border-bottom: 1px solid var(--border-strong);
317
  color: var(--text-muted);
318
  font-size: 12px;
319
  letter-spacing: 0.04em;
320
  text-transform: lowercase;
321
}
322
323
.landingSecondary:active,
324
.landingNav nav a:active {
325
  color: var(--accent);
326
}
327
328
.heroNotes {
329
  display: flex;
330
  flex-wrap: wrap;
331
  gap: 8px 18px;
332
  margin-top: 44px;
333
  color: var(--text-faint);
334
  font-size: 11px;
335
  letter-spacing: 0.04em;
336
}
337
338
.heroNotes span {
339
  color: var(--text-muted);
340
}
341
342
/* Live ASCII backdrop — one figure */
343
344
.landingBackdrop {
345
  position: fixed;
346
  inset: 0;
347
  z-index: 0;
348
  overflow: hidden;
349
  pointer-events: none;
350
}
351
352
.liveAscii {
353
  position: absolute;
354
  top: 50%;
355
  left: 50%;
356
  margin: 0;
357
  color: color-mix(in srgb, var(--accent) 46%, var(--text-faint));
358
  font: 400 16px/1 var(--mono);
359
  letter-spacing: 0;
360
  opacity: 0.36;
361
  user-select: none;
362
  white-space: pre;
363
  transform: translate(-50%, -46%);
364
}
365
366
/* 2D exchange diagram */
367
368
.asciiDiagram {
369
  position: relative;
370
  z-index: 2;
371
  display: grid;
372
  min-height: 0;
373
  padding: 22px 22px 18px;
374
  align-content: start;
375
  border-top: 1px solid var(--border-strong);
376
  border-right: 1px dashed var(--border);
377
  border-bottom: 0;
378
  border-left: 1px solid var(--border-strong);
379
  background: color-mix(in srgb, var(--bg) 70%, transparent);
380
  animation: landingReveal 720ms 80ms cubic-bezier(0.22, 1, 0.36, 1) both;
381
}
382
383
.sceneCorner {
384
  position: absolute;
385
  z-index: 4;
386
  color: var(--accent);
387
  font: 500 12px/1 var(--mono);
388
  pointer-events: none;
389
}
390
391
.sceneTL {
392
  top: -7px;
393
  left: -5px;
394
}
395
396
.sceneTR {
397
  top: -7px;
398
  right: -5px;
399
}
400
401
.sceneBL {
402
  bottom: -6px;
403
  left: -5px;
404
}
405
406
.diagramHud {
407
  display: flex;
408
  justify-content: space-between;
409
  color: var(--text-faint);
410
  font-size: 10px;
411
  letter-spacing: 0.1em;
412
}
413
414
.diagramLive {
415
  color: var(--live);
416
}
417
418
.insightSubject {
419
  display: grid;
420
  margin: 28px 0 0;
421
  padding: 16px;
422
  gap: 8px;
423
  border: 1px solid var(--border);
424
  background: color-mix(in srgb, var(--surface) 56%, transparent);
425
}
426
427
.insightSubject span,
428
.exampleOutcome span {
429
  color: var(--accent);
430
  font-size: 10px;
431
  letter-spacing: 0.1em;
432
}
433
434
.insightSubject strong {
435
  font-family: var(--font);
436
  font-size: 18px;
437
  font-weight: 500;
438
  line-height: 1.35;
439
}
440
441
.riskPanel {
442
  display: grid;
443
  margin: 18px 0 0;
444
  border: 1px solid color-mix(in srgb, var(--danger) 52%, var(--border));
445
  background: color-mix(in srgb, var(--danger) 6%, transparent);
446
}
447
448
.riskHeading {
449
  display: flex;
450
  padding: 14px 16px;
451
  align-items: end;
452
  justify-content: space-between;
453
  gap: 16px;
454
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 34%, var(--border));
455
}
456
457
.riskHeading > div {
458
  display: grid;
459
  gap: 4px;
460
}
461
462
.riskHeading span {
463
  color: var(--danger);
464
  font-size: 9px;
465
  font-weight: 600;
466
  letter-spacing: 0.12em;
467
}
468
469
.riskHeading strong {
470
  color: color-mix(in srgb, var(--danger) 76%, var(--text));
471
  font-family: var(--font);
472
  font-size: 22px;
473
  font-weight: 600;
474
}
475
476
.riskHeading small {
477
  color: var(--text-faint);
478
  font-size: 9px;
479
}
480
481
.redFlagList {
482
  display: grid;
483
  margin: 0;
484
  padding: 0 16px;
485
  list-style: none;
486
}
487
488
.redFlagList li {
489
  display: grid;
490
  padding: 11px 0;
491
  grid-template-columns: 24px 1fr;
492
  gap: 10px;
493
  border-bottom: 1px dashed var(--border);
494
}
495
496
.redFlagList li:last-child {
497
  border-bottom: 0;
498
}
499
500
.redFlagList li > span {
501
  padding-top: 2px;
502
  color: var(--danger);
503
  font-size: 9px;
504
}
505
506
.redFlagList div {
507
  display: grid;
508
  gap: 3px;
509
}
510
511
.redFlagList strong {
512
  font-family: var(--font);
513
  font-size: 12px;
514
  font-weight: 600;
515
}
516
517
.redFlagList p {
518
  margin: 0;
519
  color: var(--text-muted);
520
  font-family: var(--font);
521
  font-size: 10px;
522
  line-height: 1.45;
523
}
524
525
.guidancePanel {
526
  display: grid;
527
  margin-top: 14px;
528
  padding: 15px 16px;
529
  gap: 6px;
530
  border: 1px solid var(--accent-line);
531
  border-left: 3px solid var(--accent);
532
  background: color-mix(in srgb, var(--accent) 8%, transparent);
533
}
534
535
.guidancePanel > span {
536
  color: var(--accent);
537
  font-size: 9px;
538
  font-weight: 600;
539
  letter-spacing: 0.1em;
540
}
541
542
.guidancePanel strong {
543
  font-family: var(--font);
544
  font-size: 16px;
545
  font-weight: 600;
546
}
547
548
.guidancePanel p {
549
  margin: 0;
550
  color: var(--text-muted);
551
  font-family: var(--font);
552
  font-size: 11px;
553
  line-height: 1.5;
554
}
555
556
.directLink {
557
  display: grid;
558
  margin-top: 20px;
559
  grid-template-columns: 1fr auto 1fr;
560
  align-items: center;
561
  gap: 10px;
562
  color: var(--text-faint);
563
  font-size: 10px;
564
  text-align: center;
565
}
566
567
.directLink b {
568
  padding: 6px 9px;
569
  border: 1px solid var(--accent-line);
570
  color: var(--accent);
571
  font-weight: 500;
572
  letter-spacing: 0.06em;
573
  text-transform: uppercase;
574
}
575
576
.directLink span:first-child {
577
  text-align: left;
578
}
579
580
.directLink span:last-child {
581
  text-align: right;
582
}
583
584
.exampleOutcome {
585
  display: grid;
586
  margin-top: 20px;
587
  padding: 15px 16px;
588
  gap: 6px;
589
  border-left: 2px solid var(--live);
590
  background: color-mix(in srgb, var(--live) 7%, transparent);
591
}
592
593
.exampleOutcome strong {
594
  font-family: var(--font);
595
  font-size: 14px;
596
  font-weight: 500;
597
}
598
599
.exampleOutcome small {
600
  color: var(--text-muted);
601
  font-size: 11px;
602
  line-height: 1.5;
603
}
604
605
.diagramSpec {
606
  margin: 28px 0 0;
607
  padding-top: 16px;
608
  border-top: 1px dashed var(--border);
609
  color: var(--text-faint);
610
  font: 400 11px/1.7 var(--mono);
611
  letter-spacing: 0.04em;
612
}
613
614
.capabilityRail {
615
  display: flex;
616
  flex-wrap: wrap;
617
  justify-content: center;
618
  align-items: center;
619
  gap: 10px 22px;
620
  padding: 16px 24px;
621
  border-top: 1px solid var(--border);
622
  border-bottom: 1px solid var(--border);
623
  color: var(--text-muted);
624
  background: color-mix(in srgb, var(--bg) 58%, transparent);
625
  font-size: 11px;
626
  letter-spacing: 0.1em;
627
}
628
629
.capabilityRail span::after {
630
  margin-left: 22px;
631
  color: var(--accent);
632
  content: '──';
633
}
634
635
.capabilityRail span:last-child::after {
636
  content: none;
637
}
638
639
.productSection,
640
.intelligenceSection,
641
.principlesSection,
642
.accessSection {
643
  width: min(100% - 48px, 1120px);
644
  margin: 0 auto;
645
  scroll-margin-top: 72px;
646
}
647
648
.productSection {
649
  padding: 120px 0;
650
}
651
652
.intelligenceSection {
653
  padding: 110px 0;
654
  border-top: 1px solid var(--border);
655
}
656
657
.intelligenceLoop {
658
  display: grid;
659
  margin: 48px 0 0;
660
  padding: 0;
661
  grid-template-columns: repeat(4, 1fr);
662
  border: 1px solid var(--border-strong);
663
  list-style: none;
664
}
665
666
.intelligenceLoop li {
667
  position: relative;
668
  display: grid;
669
  min-height: 142px;
670
  padding: 18px;
671
  align-content: space-between;
672
  border-right: 1px solid var(--border);
673
}
674
675
.intelligenceLoop li:last-child {
676
  border-right: 0;
677
}
678
679
.intelligenceLoop li:not(:last-child)::after {
680
  position: absolute;
681
  top: 50%;
682
  right: -8px;
683
  z-index: 1;
684
  padding: 2px;
685
  color: var(--accent);
686
  background: var(--bg);
687
  content: '→';
688
  transform: translateY(-50%);
689
}
690
691
.intelligenceLoop span {
692
  color: var(--accent);
693
  font-size: 10px;
694
}
695
696
.intelligenceLoop strong {
697
  max-width: 13ch;
698
  font-family: var(--font);
699
  font-size: 16px;
700
  font-weight: 500;
701
  line-height: 1.35;
702
}
703
704
.intelligenceBoundary {
705
  margin: 20px 0 0;
706
  color: var(--text-faint);
707
  font-size: 11px;
708
  line-height: 1.6;
709
}
710
711
.sectionIntro {
712
  display: grid;
713
  margin-bottom: 36px;
714
  grid-template-columns: 1fr 0.72fr;
715
  column-gap: 72px;
716
}
717
718
.sectionIntro .landingKicker {
719
  grid-column: 1 / -1;
720
}
721
722
.sectionIntro h2,
723
.principlesSection h2 {
724
  font-size: clamp(32px, 4.4vw, 52px);
725
}
726
727
.sectionIntro > p:last-child {
728
  align-self: end;
729
  margin: 0 0 8px;
730
  color: var(--text-muted);
731
  font-family: var(--font);
732
  font-size: 15px;
733
  line-height: 1.65;
734
}
735
736
.coreQuestions {
737
  margin: 8px 0 48px;
738
  border: 1px solid var(--border-strong);
739
  border-left: 3px solid var(--accent);
740
  background: color-mix(in srgb, var(--accent) 5%, var(--bg));
741
}
742
743
.coreQuestions header {
744
  display: flex;
745
  padding: 16px 20px;
746
  align-items: baseline;
747
  justify-content: space-between;
748
  gap: 24px;
749
  border-bottom: 1px solid var(--border);
750
}
751
752
.coreQuestions header > span {
753
  color: var(--accent);
754
  font-size: 10px;
755
  font-weight: 600;
756
  letter-spacing: 0.08em;
757
}
758
759
.coreQuestions h3 {
760
  margin: 0;
761
  font-family: var(--font);
762
  font-size: 15px;
763
  font-weight: 500;
764
}
765
766
.coreQuestions ol {
767
  display: grid;
768
  margin: 0;
769
  padding: 0;
770
  grid-template-columns: repeat(4, 1fr);
771
  list-style: none;
772
}
773
774
.coreQuestions li {
775
  display: grid;
776
  min-height: 132px;
777
  padding: 20px;
778
  align-content: space-between;
779
  gap: 24px;
780
  border-right: 1px solid var(--border);
781
}
782
783
.coreQuestions li:last-child {
784
  border-right: 0;
785
}
786
787
.coreQuestions li > span {
788
  color: var(--text-faint);
789
  font-size: 9px;
790
  letter-spacing: 0.08em;
791
}
792
793
.coreQuestions strong {
794
  max-width: 18ch;
795
  font-family: var(--font);
796
  font-size: clamp(17px, 1.8vw, 22px);
797
  font-weight: 550;
798
  letter-spacing: -0.025em;
799
  line-height: 1.25;
800
}
801
802
.principlesSection {
803
  display: grid;
804
  padding: 110px 0;
805
  grid-template-columns: 1fr 0.9fr;
806
  gap: 72px;
807
  border-top: 1px solid var(--border);
808
}
809
810
.principlesSection h2 {
811
  margin-bottom: 0;
812
}
813
814
.principleList {
815
  display: grid;
816
}
817
818
.principleList article {
819
  display: grid;
820
  padding: 22px 0;
821
  grid-template-columns: 72px 1fr;
822
  gap: 16px;
823
  border-bottom: 1px dashed var(--border);
824
}
825
826
.principleList article:first-child {
827
  border-top: 1px dashed var(--border);
828
}
829
830
.principleList article > span {
831
  color: var(--accent);
832
  font-size: 11px;
833
}
834
835
.principleList h3 {
836
  margin: -2px 0 6px;
837
  font-size: 15px;
838
  font-weight: 500;
839
  letter-spacing: -0.02em;
840
}
841
842
.principleList p {
843
  margin: 0;
844
  color: var(--text-muted);
845
  font-family: var(--font);
846
  font-size: 13px;
847
  line-height: 1.6;
848
}
849
850
.accessSection {
851
  display: grid;
852
  margin-bottom: 80px;
853
  padding: clamp(28px, 5vw, 56px) 0 0;
854
  grid-template-columns: 1.1fr 0.9fr;
855
  align-items: start;
856
  gap: clamp(36px, 6vw, 88px);
857
  border-top: 1px solid var(--border);
858
}
859
860
.accessCopy h2 {
861
  max-width: 16ch;
862
  margin: 16px 0;
863
  font-size: clamp(32px, 4vw, 48px);
864
}
865
866
.accessCopy > p:last-child {
867
  max-width: 40em;
868
  margin: 0;
869
  color: var(--text-muted);
870
  font-family: var(--font);
871
  font-size: 15px;
872
  line-height: 1.65;
873
}
874
875
.accessCard {
876
  display: grid;
877
  gap: 14px;
878
  border: 1px solid var(--border-strong);
879
  background: var(--bg);
880
}
881
882
.accessChrome {
883
  display: flex;
884
  padding: 8px 12px;
885
  align-items: center;
886
  justify-content: space-between;
887
  border-bottom: 1px solid var(--border);
888
  color: var(--text-faint);
889
  font-size: 11px;
890
  letter-spacing: 0.08em;
891
}
892
893
.accessBlink {
894
  color: var(--accent);
895
  animation: caretBlink 1.1s steps(1) infinite;
896
}
897
898
.accessCard .socialButtons {
899
  padding: 16px 16px 4px;
900
}
901
902
.accessCard .socialButtons button {
903
  min-height: 42px;
904
  border-radius: 0;
905
  font-family: var(--mono);
906
  font-size: 12px;
907
  font-weight: 500;
908
  letter-spacing: 0.03em;
909
}
910
911
.accessCard .socialButtons button:last-child svg:last-child {
912
  width: 14px;
913
  margin-left: auto;
914
}
915
916
.pilotList {
917
  display: grid;
918
  margin: 0;
919
  padding: 4px 16px 0;
920
  list-style: none;
921
}
922
923
.pilotList li {
924
  padding: 12px 0;
925
  border-bottom: 1px dashed var(--border);
926
  font-family: var(--font);
927
  font-size: 13px;
928
}
929
930
.pilotList li::before {
931
  margin-right: 10px;
932
  color: var(--accent);
933
  content: '+';
934
}
935
936
.demoActions {
937
  display: flex;
938
  padding: 2px 16px 0;
939
  flex-wrap: wrap;
940
  gap: 12px;
941
}
942
943
.demoActions .landingPrimary,
944
.demoActions button {
945
  min-height: 42px;
946
  padding: 0 16px;
947
}
948
949
.demoActions button {
950
  border: 1px solid var(--border-strong);
951
  color: var(--text-muted);
952
  background: transparent;
953
  font: 500 11px/1 var(--mono);
954
  cursor: pointer;
955
}
956
957
.accessCard > small {
958
  padding: 0 16px 16px;
959
  color: var(--text-faint);
960
  font-size: 11px;
961
  line-height: 1.55;
962
}
963
964
.accessCard .loginError {
965
  margin: 0 16px;
966
}
967
968
.landingFooter {
969
  display: grid;
970
  width: min(100% - 48px, 1120px);
971
  min-height: 88px;
972
  margin: 0 auto;
973
  padding: 24px 0 36px;
974
  grid-template-columns: 1fr auto 1fr;
975
  align-items: center;
976
  gap: 20px;
977
  border-top: 1px solid var(--border);
978
}
979
980
.landingFooter p,
981
.landingFooter small {
982
  margin: 0;
983
  color: var(--text-faint);
984
  font-size: 11px;
985
}
986
987
.landingFooter small {
988
  justify-self: end;
989
  max-width: 34em;
990
  text-align: right;
991
  line-height: 1.5;
992
}
993
994
@keyframes landingReveal {
995
  from {
996
    opacity: 0;
997
    translate: 0 14px;
998
  }
999
  to {
1000
    opacity: 1;
1001
    translate: 0 0;
1002
  }
1003
}
1004
1005
@keyframes caretBlink {
1006
  50% {
1007
    opacity: 0;
1008
  }
1009
}
1010
1011
@keyframes sectionArrival {
1012
  from {
1013
    opacity: 0;
1014
    translate: 0 14px;
1015
  }
1016
  to {
1017
    opacity: 1;
1018
    translate: 0 0;
1019
  }
1020
}
1021
1022
@keyframes destinationPulse {
1023
  0% {
1024
    box-shadow: inset 0 0 0 1px transparent;
1025
  }
1026
  42% {
1027
    box-shadow: inset 0 0 0 1px var(--accent-line);
1028
  }
1029
  100% {
1030
    box-shadow: inset 0 0 0 1px transparent;
1031
  }
1032
}
1033
1034
@keyframes scrollReveal {
1035
  from {
1036
    opacity: 0;
1037
    translate: 0 20px;
1038
  }
1039
  to {
1040
    opacity: 1;
1041
    translate: 0 0;
1042
  }
1043
}
1044
1045
@keyframes themeClick {
1046
  50% {
1047
    opacity: 0.35;
1048
    transform: rotate(110deg) scale(0.65);
1049
  }
1050
}
1051
1052
.themeButton:active svg {
1053
  animation: themeClick 340ms cubic-bezier(0.22, 1, 0.36, 1);
1054
}
1055
1056
@supports (animation-timeline: view()) {
1057
  .sectionIntro,
1058
  .intelligenceLoop li,
1059
  .principlesSection > div,
1060
  .accessSection {
1061
    animation: scrollReveal linear both;
1062
    animation-timeline: view();
1063
    animation-range: entry 5% cover 27%;
1064
  }
1065
}
1066
1067
.productSection.is-arriving .sectionIntro,
1068
.intelligenceSection.is-arriving .sectionIntro,
1069
.intelligenceSection.is-arriving .intelligenceLoop li,
1070
.principlesSection.is-arriving > div,
1071
.accessSection.is-arriving .accessCopy,
1072
.accessSection.is-arriving .accessCard {
1073
  animation: sectionArrival 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
1074
  animation-timeline: auto;
1075
}
1076
1077
.principlesSection.is-arriving > div:nth-child(2),
1078
.accessSection.is-arriving .accessCard {
1079
  animation-delay: 130ms;
1080
}
1081
1082
.accessSection.is-arriving {
1083
  animation: destinationPulse 880ms ease-out;
1084
  animation-timeline: auto;
1085
}
1086
1087
@media (max-width: 1080px) {
1088
  .landingHero {
1089
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.95fr);
1090
    gap: 36px;
1091
  }
1092
1093
  .sectionIntro,
1094
  .principlesSection {
1095
    gap: 40px;
1096
  }
1097
}
1098
1099
@media (max-width: 900px) {
1100
  .landingNav {
1101
    grid-template-columns: 1fr auto;
1102
  }
1103
1104
  .landingNav nav {
1105
    display: none;
1106
  }
1107
1108
  .landingHero {
1109
    min-height: auto;
1110
    padding: 56px 0 64px;
1111
    grid-template-columns: 1fr;
1112
  }
1113
1114
  .heroCopy {
1115
    max-width: 40em;
1116
  }
1117
1118
  .asciiDiagram {
1119
    margin-top: 8px;
1120
  }
1121
1122
  .liveAscii {
1123
    top: 42%;
1124
    left: 50%;
1125
    right: auto;
1126
    bottom: auto;
1127
    font-size: 14px;
1128
    opacity: 0.2;
1129
  }
1130
1131
  .sectionIntro,
1132
  .intelligenceLoop {
1133
    grid-template-columns: repeat(2, 1fr);
1134
  }
1135
1136
  .intelligenceLoop li:nth-child(2) {
1137
    border-right: 0;
1138
  }
1139
1140
  .intelligenceLoop li:nth-child(-n + 2) {
1141
    border-bottom: 1px solid var(--border);
1142
  }
1143
1144
  .sectionIntro,
1145
  .principlesSection,
1146
  .accessSection {
1147
    grid-template-columns: 1fr;
1148
  }
1149
1150
  .principlesSection {
1151
    gap: 36px;
1152
  }
1153
1154
  .accessCard {
1155
    max-width: 520px;
1156
  }
1157
1158
  .landingFooter {
1159
    grid-template-columns: 1fr auto;
1160
  }
1161
1162
  .landingFooter p {
1163
    display: none;
1164
  }
1165
}
1166
1167
@media (max-width: 720px) {
1168
  .landingNav,
1169
  .landingHero,
1170
  .productSection,
1171
  .intelligenceSection,
1172
  .principlesSection,
1173
  .accessSection,
1174
  .landingFooter {
1175
    width: min(100% - 32px, 1120px);
1176
  }
1177
1178
  .landingNav {
1179
    padding-inline: 16px;
1180
    width: 100%;
1181
  }
1182
1183
  .navCta {
1184
    display: none;
1185
  }
1186
1187
  .heroCopy h1 {
1188
    font-size: clamp(34px, 11vw, 52px);
1189
  }
1190
1191
  .heroNotes {
1192
    display: grid;
1193
    margin-top: 32px;
1194
  }
1195
1196
  .asciiDiagram {
1197
    padding: 18px 16px 14px;
1198
  }
1199
1200
  .directLink {
1201
    grid-template-columns: 1fr;
1202
  }
1203
1204
  .directLink span,
1205
  .directLink span:first-child,
1206
  .directLink span:last-child {
1207
    text-align: center;
1208
  }
1209
1210
  .productSection,
1211
  .intelligenceSection,
1212
  .principlesSection {
1213
    padding: 80px 0;
1214
  }
1215
1216
  .sectionIntro {
1217
    display: block;
1218
    margin-bottom: 0;
1219
  }
1220
1221
  .sectionIntro h2,
1222
  .principlesSection h2 {
1223
    font-size: clamp(30px, 9vw, 44px);
1224
  }
1225
1226
  .coreQuestions {
1227
    margin: 24px 0 28px;
1228
  }
1229
1230
  .coreQuestions header {
1231
    align-items: flex-start;
1232
    flex-direction: column;
1233
    gap: 8px;
1234
  }
1235
1236
  .coreQuestions ol {
1237
    grid-template-columns: 1fr;
1238
  }
1239
1240
  .coreQuestions li {
1241
    min-height: 104px;
1242
    border-right: 0;
1243
    border-bottom: 1px solid var(--border);
1244
  }
1245
1246
  .coreQuestions li:last-child {
1247
    border-bottom: 0;
1248
  }
1249
1250
  .intelligenceLoop {
1251
    grid-template-columns: 1fr;
1252
  }
1253
1254
  .intelligenceLoop li,
1255
  .intelligenceLoop li:nth-child(2) {
1256
    min-height: 108px;
1257
    border-right: 0;
1258
    border-bottom: 1px solid var(--border);
1259
  }
1260
1261
  .intelligenceLoop li:last-child {
1262
    border-bottom: 0;
1263
  }
1264
1265
  .intelligenceLoop li:not(:last-child)::after {
1266
    top: auto;
1267
    right: 16px;
1268
    bottom: -9px;
1269
    transform: rotate(90deg);
1270
  }
1271
1272
  .accessSection {
1273
    margin-bottom: 48px;
1274
    gap: 28px;
1275
  }
1276
1277
  .landingFooter {
1278
    padding-top: 28px;
1279
    grid-template-columns: 1fr;
1280
    align-items: start;
1281
  }
1282
1283
  .landingFooter small {
1284
    justify-self: start;
1285
    text-align: left;
1286
  }
1287
}
1288
1289
@media (prefers-reduced-motion: reduce) {
1290
  html {
1291
    scroll-behavior: auto;
1292
  }
1293
1294
  .heroCopy,
1295
  .asciiDiagram,
1296
  .heroCopy h1 em::after,
1297
  .accessBlink,
1298
  .sectionIntro,
1299
  .intelligenceLoop li,
1300
  .principlesSection > div,
1301
  .accessSection {
1302
    animation: none;
1303
  }
1304
1305
  .productSection.is-arriving *,
1306
  .intelligenceSection.is-arriving *,
1307
  .principlesSection.is-arriving > div,
1308
  .accessSection.is-arriving,
1309
  .accessSection.is-arriving * {
1310
    animation: none !important;
1311
  }
1312
1313
  .themeButton,
1314
  .navCta,
1315
  .landingPrimary,
1316
  .landingSecondary {
1317
    transition: none;
1318
  }
1319
}