1/* ============ Matcha site styles ============ */
2:root {
3 --bg: #05080a;
4 --bg-2: #060a0d;
5 --panel: #0a1013;
6 --panel-2: #0e1619;
7 --line: #14222b;
8 --line-2: #1d3441;
9 --ink: #c8d6d8;
10 --ink-dim: #7d9099;
11 --ink-dim2: #52666e;
12
13 --accent: #6aa84f;
14 --accent-2: #85c26a;
15 --accent-deep: #3b6b28;
16 --green-soft: #8fb88b;
17
18 --blue: #5aa3d8;
19 --yellow: #d1b85a;
20
21 --mono: "IBM Plex Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
22 --sans:
23 "IBM Plex Sans", ui-sans-serif, -apple-system, system-ui, sans-serif;
24 --serif: "IBM Plex Serif", ui-serif, Georgia, serif;
25
26 /* mouse glow position — updated by JS */
27 --mx: 50%;
28 --my: 30%;
29}
30
31* {
32 box-sizing: border-box;
33}
34
35html {
36 scroll-behavior: smooth;
37}
38
39html,
40body {
41 margin: 0;
42 padding: 0;
43 background: var(--bg);
44 color: var(--ink);
45 font-family: var(--sans);
46 font-size: 15px;
47 line-height: 1.55;
48 -webkit-font-smoothing: antialiased;
49 text-rendering: optimizeLegibility;
50}
51
52/* Static ambient gradient */
53body::before {
54 content: "";
55 position: fixed;
56 inset: 0;
57 pointer-events: none;
58 z-index: 0;
59 background:
60 radial-gradient(
61 1000px 500px at 85% -10%,
62 rgba(106, 168, 79, 0.06),
63 transparent 60%
64 ),
65 radial-gradient(
66 800px 400px at -10% 30%,
67 rgba(106, 168, 79, 0.03),
68 transparent 60%
69 );
70}
71
72/* Mouse-follow glow overlay */
73body::after {
74 content: "";
75 position: fixed;
76 inset: 0;
77 pointer-events: none;
78 z-index: 0;
79 background: radial-gradient(
80 560px circle at var(--mx) var(--my),
81 rgba(106, 168, 79, 0.055),
82 transparent 70%
83 );
84}
85
86a {
87 color: inherit;
88 text-decoration: none;
89}
90
91code,
92kbd,
93pre {
94 font-family: var(--mono);
95}
96
97em {
98 font-style: italic;
99 color: var(--accent);
100 font-family: var(--serif);
101 font-weight: 500;
102}
103
104.dim {
105 color: var(--ink-dim);
106}
107
108.underline-link {
109 color: var(--accent);
110 border-bottom: 1px dashed var(--accent-deep);
111 padding-bottom: 1px;
112 transition: color 0.15s;
113}
114.underline-link:hover {
115 color: var(--accent-2);
116}
117
118.site {
119 position: relative;
120 z-index: 1;
121 max-width: 1280px;
122 margin: 0 auto;
123 padding: 0 32px;
124}
125
126/* ---------- Nav ---------- */
127.nav {
128 display: flex;
129 align-items: center;
130 justify-content: space-between;
131 padding: 22px 0;
132 border-bottom: 1px solid var(--line);
133 position: sticky;
134 top: 0;
135 background: rgba(5, 8, 10, 0.82);
136 backdrop-filter: blur(12px);
137 z-index: 50;
138}
139
140.nav-brand {
141 display: flex;
142 align-items: center;
143}
144
145.wordmark {
146 display: inline-flex;
147 align-items: center;
148 gap: 8px;
149 font-family: var(--mono);
150 font-size: 15px;
151 letter-spacing: -0.01em;
152}
153
154.wm-bracket {
155 color: var(--accent);
156 font-size: 12px;
157 transform: translateY(-1px);
158}
159.wm-name {
160 color: var(--ink);
161 font-weight: 500;
162}
163.wm-dim {
164 color: var(--ink-dim2);
165 font-size: 12px;
166}
167.wm-logo {
168 display: flex;
169 align-items: center;
170 align-self: center;
171}
172
173.nav-links {
174 display: flex;
175 gap: 28px;
176 align-items: center;
177 font-family: var(--mono);
178 font-size: 13px;
179}
180.nav-links a {
181 color: var(--ink-dim);
182 transition: color 0.15s;
183 position: relative;
184}
185.nav-links a::after {
186 content: "";
187 position: absolute;
188 bottom: -2px;
189 left: 0;
190 width: 0;
191 height: 1px;
192 background: var(--accent);
193 transition: width 0.25s ease;
194}
195.nav-links a:hover {
196 color: var(--ink);
197}
198.nav-links a:hover::after {
199 width: 100%;
200}
201
202.nav-github {
203 display: inline-flex;
204 align-items: center;
205 gap: 10px;
206}
207.nav-star {
208 color: var(--accent);
209 font-size: 12px;
210}
211.nav-right .btn {
212 font-family: var(--mono);
213 font-size: 13px;
214}
215
216/* ---------- Buttons ---------- */
217.btn {
218 display: inline-flex;
219 align-items: center;
220 gap: 10px;
221 padding: 10px 16px;
222 border: 1px solid var(--line-2);
223 border-radius: 2px;
224 font-family: var(--mono);
225 font-size: 13px;
226 color: var(--ink);
227 background: transparent;
228 cursor: pointer;
229 transition:
230 border-color 0.15s,
231 color 0.15s,
232 box-shadow 0.25s;
233}
234.btn:hover {
235 border-color: var(--accent);
236 color: var(--accent);
237}
238.btn-k {
239 font-size: 11px;
240 color: var(--ink-dim);
241 transition: color 0.15s;
242}
243.btn:hover .btn-k {
244 color: var(--accent);
245}
246.btn-primary {
247 background: var(--accent);
248 color: #05080a;
249 border-color: var(--accent);
250 font-weight: 500;
251}
252.btn-primary:hover {
253 background: var(--accent-2);
254 border-color: var(--accent-2);
255 color: #05080a;
256 box-shadow: 0 0 28px rgba(106, 168, 79, 0.35);
257}
258.btn-primary .btn-k {
259 color: #05080a;
260 opacity: 0.6;
261}
262.btn-ghost {
263 background: transparent;
264}
265.btn-lg {
266 padding: 14px 22px;
267 font-size: 14px;
268}
269
270/* ---------- Hero load animations ---------- */
271@keyframes heroFadeUp {
272 from {
273 opacity: 0;
274 transform: translateY(18px);
275 }
276 to {
277 opacity: 1;
278 transform: translateY(0);
279 }
280}
281
282.hero-eyebrow {
283 animation: heroFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both 0.05s;
284}
285.hero-h1 {
286 animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both 0.18s;
287}
288.hero-sub {
289 animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both 0.32s;
290}
291.hero-cta {
292 animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both 0.46s;
293}
294.quickstart {
295 animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both 0.58s;
296}
297.hero-meta {
298 animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both 0.72s;
299}
300
301/* ---------- Hero ---------- */
302.hero {
303 padding: 96px 0 72px;
304 text-align: center;
305}
306.hero-copy {
307 max-width: 720px;
308 margin: 0 auto;
309}
310.hero-eyebrow {
311 display: inline-flex;
312 align-items: center;
313 gap: 10px;
314 font-family: var(--mono);
315 font-size: 12px;
316 color: var(--ink-dim);
317 padding: 6px 12px;
318 border: 1px solid var(--line);
319 border-radius: 2px;
320 margin-bottom: 28px;
321}
322.dot-live {
323 width: 7px;
324 height: 7px;
325 border-radius: 50%;
326 background: var(--accent);
327 box-shadow: 0 0 0 3px rgba(106, 168, 79, 0.2);
328 animation: pulse 2.4s ease-in-out infinite;
329}
330@keyframes pulse {
331 0%,
332 100% {
333 opacity: 1;
334 }
335 50% {
336 opacity: 0.35;
337 }
338}
339.hero-h1 {
340 font-family: var(--sans);
341 font-size: 62px;
342 font-weight: 500;
343 letter-spacing: -0.025em;
344 line-height: 1.04;
345 margin: 0 0 24px;
346 text-wrap: pretty;
347}
348.hero-h1 em {
349 text-shadow: 0 0 56px rgba(106, 168, 79, 0.4);
350}
351.hero-sub {
352 font-size: 17px;
353 color: var(--ink-dim);
354 max-width: 50ch;
355 margin: 0 auto 36px;
356 line-height: 1.6;
357}
358.hero-cta {
359 display: flex;
360 gap: 12px;
361 justify-content: center;
362 margin-bottom: 36px;
363 flex-wrap: wrap;
364}
365.hero-meta {
366 display: flex;
367 gap: 32px;
368 justify-content: center;
369 flex-wrap: wrap;
370 font-family: var(--mono);
371 font-size: 12px;
372 color: var(--ink);
373 margin-top: 32px;
374}
375.hero-meta .dim {
376 display: block;
377 color: var(--ink-dim2);
378 font-size: 11px;
379 margin-bottom: 2px;
380 text-transform: uppercase;
381 letter-spacing: 0.08em;
382}
383
384/* ---------- QuickStart ---------- */
385.quickstart {
386 background: var(--panel-2);
387 border: 1px solid var(--line-2);
388 border-radius: 6px;
389 overflow: hidden;
390 margin: 0 auto 8px;
391 max-width: 480px;
392 text-align: left;
393 box-shadow:
394 0 20px 60px -20px rgba(0, 0, 0, 0.5),
395 0 8px 20px -8px rgba(106, 168, 79, 0.06);
396 transition:
397 border-color 0.25s,
398 box-shadow 0.25s;
399}
400.quickstart:hover {
401 border-color: var(--accent-deep);
402 box-shadow:
403 0 24px 70px -20px rgba(0, 0, 0, 0.55),
404 0 8px 28px -8px rgba(106, 168, 79, 0.16);
405}
406.qs-bar {
407 display: flex;
408 align-items: center;
409 gap: 6px;
410 padding: 9px 14px;
411 background: var(--bg-2);
412 border-bottom: 1px solid var(--line);
413}
414.qs-dot {
415 width: 10px;
416 height: 10px;
417 border-radius: 50%;
418}
419.qs-r {
420 background: #2a1414;
421}
422.qs-y {
423 background: #2a2514;
424}
425.qs-g {
426 background: #0f2a16;
427}
428.qs-bar-label {
429 font-family: var(--mono);
430 font-size: 11px;
431 color: var(--ink-dim2);
432 margin-left: 6px;
433}
434.qs-code {
435 margin: 0;
436 padding: 20px 24px;
437 font-family: var(--mono);
438 font-size: 14px;
439 line-height: 2;
440 color: var(--accent);
441 min-height: 80px;
442}
443.qs-prompt {
444 color: var(--ink-dim2);
445}
446.qs-caret {
447 display: inline-block;
448 width: 8px;
449 height: 15px;
450 background: var(--accent);
451 vertical-align: text-bottom;
452 margin-left: 1px;
453 animation: blink 1s step-end infinite;
454}
455@keyframes blink {
456 50% {
457 opacity: 0;
458 }
459}
460
461/* ---------- Scroll reveal ---------- */
462.reveal {
463 opacity: 0;
464 transform: translateY(16px);
465 transition:
466 opacity 0.7s ease,
467 transform 0.7s ease;
468}
469.reveal.visible {
470 opacity: 1;
471 transform: translateY(0);
472}
473
474/* ---------- Sections ---------- */
475.section-head {
476 display: grid;
477 grid-template-columns: 1.2fr 1fr;
478 gap: 48px;
479 padding: 80px 0 40px;
480 border-top: 1px solid var(--line);
481 align-items: end;
482}
483.section-eyebrow {
484 font-family: var(--mono);
485 font-size: 12px;
486 color: var(--accent);
487 margin-bottom: 16px;
488 letter-spacing: 0.04em;
489}
490.section-h2 {
491 font-size: 44px;
492 font-weight: 500;
493 letter-spacing: -0.025em;
494 line-height: 1.08;
495 margin: 0;
496 text-wrap: pretty;
497}
498.section-h2 .dim {
499 color: var(--ink-dim);
500}
501.section-head-r {
502 color: var(--ink-dim);
503 font-size: 15px;
504 max-width: 44ch;
505 margin: 0;
506}
507.section-head-r code {
508 font-size: 13px;
509 color: var(--accent);
510 background: var(--panel);
511 padding: 1px 5px;
512 border-radius: 2px;
513}
514
515/* Features grid */
516.feature-grid {
517 display: grid;
518 grid-template-columns: repeat(3, 1fr);
519 gap: 1px;
520 background: var(--line);
521 border: 1px solid var(--line);
522 margin-top: 24px;
523}
524.feature {
525 position: relative;
526 overflow: hidden;
527 background: var(--bg);
528 padding: 32px 28px;
529 min-height: 240px;
530 display: flex;
531 flex-direction: column;
532 transition:
533 background 0.2s,
534 opacity 0.7s ease,
535 transform 0.7s ease;
536}
537.feature::before {
538 content: "";
539 position: absolute;
540 top: 0;
541 left: 0;
542 right: 0;
543 height: 2px;
544 background: linear-gradient(90deg, var(--accent), var(--accent-2));
545 transform: scaleX(0);
546 transform-origin: left;
547 transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
548}
549.feature:hover::before {
550 transform: scaleX(1);
551}
552.feature:hover {
553 background: var(--bg-2);
554}
555.feature-head {
556 display: flex;
557 align-items: center;
558 gap: 8px;
559 margin-bottom: 24px;
560 font-family: var(--mono);
561 font-size: 12px;
562 color: var(--accent);
563}
564.feature-dash {
565 color: var(--ink-dim2);
566}
567.feature-title {
568 font-family: var(--sans);
569 font-size: 20px;
570 font-weight: 500;
571 letter-spacing: -0.01em;
572 margin: 0 0 10px;
573 line-height: 1.2;
574}
575.feature-body {
576 color: var(--ink-dim);
577 font-size: 14px;
578 margin: 0 0 20px;
579 flex: 1;
580 line-height: 1.55;
581}
582.feature-mono {
583 margin: 0;
584 background: var(--panel-2);
585 border: 1px solid var(--line-2);
586 padding: 10px 12px;
587 font-size: 11.5px;
588 color: var(--accent);
589 border-radius: 2px;
590 white-space: pre-wrap;
591 transition: border-color 0.2s;
592}
593.feature:hover .feature-mono {
594 border-color: var(--accent-deep);
595}
596
597/* Install */
598.install-card {
599 background: var(--bg-2);
600 border: 1px solid var(--line-2);
601 border-radius: 4px;
602 overflow: hidden;
603 margin-bottom: 80px;
604 transition: border-color 0.25s;
605}
606.install-card:hover {
607 border-color: var(--line-2);
608}
609.install-tabs {
610 display: flex;
611 align-items: center;
612 border-bottom: 1px solid var(--line);
613 background: var(--bg);
614 padding: 0 8px;
615 overflow-x: auto;
616}
617.install-tab {
618 background: transparent;
619 border: none;
620 padding: 12px 16px;
621 color: var(--ink-dim);
622 font-family: var(--mono);
623 font-size: 13px;
624 cursor: pointer;
625 border-bottom: 2px solid transparent;
626 transition:
627 color 0.15s,
628 border-color 0.15s;
629 white-space: nowrap;
630}
631.install-tab:hover {
632 color: var(--ink);
633}
634.install-tab.active {
635 color: var(--accent);
636 border-bottom-color: var(--accent);
637}
638.install-tabs-spacer {
639 flex: 1;
640}
641.install-plat {
642 font-family: var(--mono);
643 font-size: 11px;
644 color: var(--ink-dim2);
645 padding-right: 12px;
646 white-space: nowrap;
647}
648.install-code {
649 margin: 0;
650 padding: 36px 28px;
651 font-size: 15px;
652 color: var(--accent);
653 background: var(--bg-2);
654 white-space: pre-wrap;
655 line-height: 1.7;
656 overflow-x: auto;
657}
658.install-foot {
659 display: flex;
660 gap: 32px;
661 flex-wrap: wrap;
662 padding: 12px 28px;
663 border-top: 1px solid var(--line);
664 background: var(--bg);
665 font-family: var(--mono);
666 font-size: 12px;
667 color: var(--ink);
668}
669.install-foot .dim {
670 color: var(--ink-dim2);
671 text-transform: uppercase;
672 letter-spacing: 0.06em;
673 font-size: 10px;
674 margin-right: 6px;
675}
676
677/* CTA */
678.cta {
679 border-top: 1px solid var(--line);
680 border-bottom: 1px solid var(--line);
681 margin-top: 20px;
682 padding: 100px 0;
683 text-align: center;
684 background: repeating-linear-gradient(
685 0deg,
686 transparent 0 26px,
687 rgba(106, 168, 79, 0.02) 26px 27px
688 );
689}
690.cta-pre {
691 font-family: var(--mono);
692 color: var(--accent);
693 font-size: 14px;
694 margin-bottom: 16px;
695}
696.cta-h2 {
697 font-size: 60px;
698 font-weight: 500;
699 letter-spacing: -0.03em;
700 line-height: 1.04;
701 margin: 0 0 36px;
702}
703.cta-row {
704 display: flex;
705 gap: 14px;
706 justify-content: center;
707 flex-wrap: wrap;
708}
709
710/* Footer */
711.footer {
712 padding: 64px 0 32px;
713}
714.footer-top {
715 display: grid;
716 grid-template-columns: 1.2fr 3fr;
717 gap: 48px;
718 padding-bottom: 48px;
719 border-bottom: 1px solid var(--line);
720}
721.footer-tag {
722 color: var(--ink-dim);
723 font-size: 13px;
724 margin: 16px 0 0;
725}
726.footer-cols {
727 display: grid;
728 grid-template-columns: repeat(4, 1fr);
729 gap: 32px;
730}
731.footer-h {
732 font-family: var(--mono);
733 font-size: 11px;
734 text-transform: uppercase;
735 letter-spacing: 0.1em;
736 color: var(--ink-dim2);
737 margin-bottom: 12px;
738}
739.footer-cols a {
740 display: block;
741 color: var(--ink-dim);
742 font-size: 13px;
743 padding: 4px 0;
744 cursor: pointer;
745 transition: color 0.15s;
746}
747.footer-cols a:hover {
748 color: var(--accent);
749}
750.footer-bot {
751 display: flex;
752 justify-content: space-between;
753 align-items: center;
754 padding-top: 24px;
755 font-family: var(--mono);
756 font-size: 11px;
757 color: var(--ink-dim2);
758}
759.footer-copy {
760 display: flex;
761 align-items: center;
762 gap: 10px;
763 color: var(--ink-dim);
764}
765.footer-meta {
766 display: flex;
767 gap: 8px;
768}
769.footer-meta .sep {
770 color: var(--line-2);
771}
772
773/* ---------- Responsive ---------- */
774@media (max-width: 960px) {
775 .hero-h1 {
776 font-size: 46px;
777 }
778 .feature-grid {
779 grid-template-columns: repeat(2, 1fr);
780 }
781 .section-head {
782 grid-template-columns: 1fr;
783 gap: 20px;
784 }
785 .section-h2 {
786 font-size: 34px;
787 }
788 .footer-top {
789 grid-template-columns: 1fr;
790 }
791 .footer-cols {
792 grid-template-columns: repeat(2, 1fr);
793 }
794 .cta-h2 {
795 font-size: 40px;
796 }
797}
798
799@media (max-width: 640px) {
800 .site {
801 padding: 0 20px;
802 }
803 .nav-links {
804 display: none;
805 }
806 .nav-right {
807 display: none;
808 }
809 .hero {
810 padding: 64px 0 48px;
811 }
812 .hero-h1 {
813 font-size: 36px;
814 }
815 .hero-sub {
816 font-size: 15px;
817 }
818 .hero-cta .btn-lg {
819 padding: 12px 18px;
820 font-size: 13px;
821 }
822 .quickstart {
823 max-width: 100%;
824 }
825 .qs-code {
826 font-size: 12px;
827 padding: 16px 18px;
828 }
829 .hero-meta {
830 flex-direction: column;
831 gap: 12px;
832 align-items: center;
833 }
834 .feature-grid {
835 grid-template-columns: 1fr;
836 }
837 .section-h2 {
838 font-size: 28px;
839 }
840 .cta-h2 {
841 font-size: 30px;
842 }
843 .install-code {
844 font-size: 13px;
845 padding: 24px 18px;
846 }
847 .footer-cols {
848 grid-template-columns: repeat(2, 1fr);
849 }
850}
851
852/* ---------- Reduced motion ---------- */
853@media (prefers-reduced-motion: reduce) {
854 .hero-eyebrow,
855 .hero-h1,
856 .hero-sub,
857 .hero-cta,
858 .quickstart,
859 .hero-meta {
860 animation: none;
861 }
862 .reveal {
863 opacity: 1;
864 transform: none;
865 transition: none;
866 }
867 .feature {
868 opacity: 1;
869 transform: none;
870 }
871 .dot-live,
872 .qs-caret {
873 animation: none;
874 opacity: 1;
875 }
876 .feature::before {
877 transition: none;
878 }
879}