1/*
2 * impeccable.style — Renaissance Redesign
3 *
4 * Editorial precision meets fluid motion.
5 * Light, high-contrast, typographically bold.
6 */
7
8/* Shared design tokens + minimal reset */
9@import "./tokens.css";
10
11/* Section partials (landing page only) */
12@import "./problem-section.css";
13@import "./workflow.css";
14@import "./gallery.css";
15@import "./skill-demos.css";
16
17
18/* ============================================
19 SKIP LINK (Accessibility)
20 ============================================ */
21
22.skip-link {
23 position: absolute;
24 top: -100%;
25 left: 50%;
26 transform: translateX(-50%);
27 z-index: 10000;
28 padding: var(--spacing-sm) var(--spacing-lg);
29 background: var(--color-ink);
30 color: var(--color-paper);
31 font-weight: 600;
32 text-decoration: none;
33 border-radius: 0 0 8px 8px;
34 transition: top 0.2s ease;
35}
36
37.skip-link:focus {
38 top: 0;
39 outline: 2px solid var(--color-accent);
40 outline-offset: 2px;
41}
42
43/* ============================================
44 FLOATING BOTTOM NAV
45 ============================================ */
46
47.section-nav {
48 position: fixed;
49 bottom: var(--spacing-md);
50 left: 50%;
51 transform: translateX(-50%) translateY(20px);
52 z-index: 100;
53 display: flex;
54 align-items: center;
55 gap: 2px;
56 padding: 4px;
57 background: oklch(98% 0 0 / 0.85);
58 backdrop-filter: blur(12px);
59 -webkit-backdrop-filter: blur(12px);
60 border: 1px solid var(--color-mist);
61 border-radius: 100px;
62 box-shadow: 0 4px 24px -4px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
63 opacity: 0;
64 pointer-events: none;
65 transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
66}
67
68.section-nav.is-visible {
69 opacity: 1;
70 pointer-events: auto;
71 transform: translateX(-50%) translateY(0);
72}
73
74.section-nav-item {
75 display: flex;
76 align-items: center;
77 gap: 4px;
78 padding: 8px 12px;
79 text-decoration: none;
80 border-radius: 100px;
81 transition: background 0.2s ease, color 0.2s ease;
82}
83
84.section-nav-item:hover {
85 background: var(--color-mist);
86 text-decoration: none;
87}
88
89.section-nav-item.is-active {
90 background: var(--color-ink);
91}
92
93.section-nav-item.is-active .section-nav-num {
94 color: var(--color-paper);
95}
96
97.section-nav-item.is-active .section-nav-label {
98 color: var(--color-paper);
99}
100
101.section-nav-num {
102 font-family: var(--font-mono);
103 font-size: 0.5625rem;
104 font-weight: 500;
105 color: var(--color-ash);
106 letter-spacing: 0.02em;
107 transition: color 0.2s ease;
108}
109
110.section-nav-label {
111 font-family: var(--font-body);
112 font-size: 0.6875rem;
113 font-weight: 500;
114 color: var(--color-charcoal);
115 transition: color 0.2s ease;
116 white-space: nowrap;
117}
118
119@media (max-width: 700px) {
120 .section-nav-label {
121 display: none;
122 }
123 .section-nav-item {
124 padding: 8px 10px;
125 }
126}
127
128@media (max-width: 400px) {
129 .section-nav-item {
130 padding: 8px;
131 }
132
133 .section-nav-num {
134 font-size: 0.625rem;
135 }
136}
137
138
139/* ============================================
140 BASE STYLES
141 ============================================ */
142
143html {
144 -webkit-font-smoothing: antialiased;
145 -moz-osx-font-smoothing: grayscale;
146 text-rendering: optimizeLegibility;
147 overflow-x: clip; /* Prevent horizontal scroll without breaking position:sticky */
148}
149
150body {
151 font-family: var(--font-body);
152 font-size: 16px;
153 line-height: 1.625;
154 color: var(--color-text);
155 background: var(--color-paper);
156 overflow-x: clip;
157 min-height: 100vh;
158 min-height: 100dvh;
159}
160
161h1, h2, h3, h4, h5, h6 {
162 font-family: var(--font-display);
163 font-weight: 400;
164 line-height: 1.1;
165 letter-spacing: -0.02em;
166 color: var(--color-ink);
167}
168
169a {
170 color: var(--color-accent);
171 text-decoration: underline;
172 text-decoration-thickness: 1px;
173 text-underline-offset: 2px;
174 transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
175}
176
177a:hover {
178 color: var(--color-accent-hover);
179 text-decoration-thickness: 2px;
180}
181
182/* Remove underline for buttons styled as links */
183.btn,
184.footer-logo,
185[class*="nav-item"] {
186 text-decoration: none;
187}
188
189strong {
190 font-weight: 600;
191 color: var(--color-ink);
192}
193
194code {
195 font-family: var(--font-mono);
196 font-size: 0.9em;
197 padding: 0.15em 0.4em;
198 background: var(--color-accent-dim);
199 color: var(--color-accent);
200 border-radius: 4px;
201}
202
203::selection {
204 background: var(--color-accent-soft);
205 color: var(--color-ink);
206}
207
208/* ============================================
209 GRAIN OVERLAY
210 ============================================ */
211
212.grain-overlay {
213 position: fixed;
214 inset: 0;
215 pointer-events: none;
216 z-index: 9999;
217 opacity: 0.03;
218 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
219 background-repeat: repeat;
220}
221
222/* ============================================
223 LAYOUT
224 ============================================ */
225
226.site-content {
227 max-width: var(--width-max);
228 margin: 0 auto;
229 padding: 0 var(--spacing-lg);
230}
231
232@media (max-width: 768px) {
233 .site-content {
234 padding: 0 var(--spacing-md);
235 }
236}
237
238/* ============================================
239 SECTION HEADERS
240 ============================================ */
241
242.section-header {
243 margin-bottom: var(--spacing-lg);
244 position: relative;
245}
246
247.section-number {
248 display: block;
249 font-family: var(--font-mono);
250 font-size: 0.625rem;
251 font-weight: 500;
252 letter-spacing: 0.05em;
253 color: var(--color-ash);
254 margin-bottom: var(--spacing-xs);
255 text-transform: uppercase;
256}
257
258.section-title {
259 font-size: clamp(1.75rem, 4vw, 2.5rem);
260 font-weight: 400;
261 line-height: 1.2;
262 margin: 0;
263}
264
265.section-subtitle {
266 font-size: 1rem;
267 line-height: 1.6;
268 color: var(--color-charcoal);
269 margin-top: var(--spacing-sm);
270 max-width: 55ch;
271}
272
273.cheatsheet-link {
274 color: var(--color-accent);
275 text-decoration: none;
276 font-size: 0.875rem;
277 margin-left: 0.5em;
278}
279
280.cheatsheet-link:hover {
281 text-decoration: underline;
282}
283
284.section-lead {
285 font-size: 1rem;
286 line-height: 1.6;
287 color: var(--color-charcoal);
288 max-width: 55ch;
289 margin-bottom: var(--spacing-lg);
290}
291
292/* ============================================
293 HERO SECTION - Combined Layout
294 ============================================ */
295
296.hero-combined {
297 position: relative;
298 display: flex;
299 flex-direction: column;
300 justify-content: center;
301 min-height: 100vh;
302 min-height: 100dvh;
303 padding: var(--spacing-lg) 0 var(--spacing-2xl);
304 background: var(--color-paper);
305}
306
307.github-link {
308 position: absolute;
309 top: var(--spacing-md);
310 right: var(--spacing-lg);
311 z-index: 10;
312 color: var(--color-ash);
313 transition: color 0.2s ease;
314 display: flex;
315 align-items: center;
316 gap: 6px;
317 text-decoration: none;
318}
319
320.github-link:hover {
321 color: var(--color-ink);
322 text-decoration: none;
323}
324
325.github-stars {
326 font-family: var(--font-mono);
327 font-size: 0.75rem;
328 font-weight: 500;
329 color: var(--color-ash);
330 transition: color 0.2s ease;
331}
332
333.github-link:hover .github-stars {
334 color: var(--color-ink);
335}
336
337.hero-combined-container {
338 max-width: var(--width-max);
339 margin: 0 auto;
340 padding: 0 var(--spacing-lg);
341 display: grid;
342 grid-template-columns: 1fr 1fr;
343 gap: var(--spacing-xl);
344 align-items: center;
345 width: 100%;
346}
347
348@media (max-width: 1024px) {
349 .hero-combined-container {
350 grid-template-columns: 1fr;
351 gap: var(--spacing-lg);
352 text-align: center;
353 }
354}
355
356@media (max-width: 768px) {
357 .hero-combined-right {
358 order: -1;
359 padding-top: var(--spacing-xl);
360 }
361
362 .hero-combined-container {
363 gap: var(--spacing-md);
364 }
365
366 .hero-combined-left {
367 gap: var(--spacing-sm);
368 padding-top: var(--spacing-md);
369 }
370
371 .hero-hook-text,
372 .hero-included-box,
373 .hero-cta-group {
374 margin-top: var(--spacing-xs);
375 }
376}
377
378.hero-combined-left {
379 display: flex;
380 flex-direction: column;
381 gap: var(--spacing-md);
382}
383
384@media (max-width: 1024px) {
385 .hero-combined-left {
386 align-items: center;
387 }
388}
389
390.hero-title-combined {
391 font-family: var(--font-display);
392 font-size: clamp(2.5rem, 7vw, 4.5rem);
393 font-weight: 300;
394 font-style: italic;
395 line-height: 1;
396 letter-spacing: -0.02em;
397 margin: 0;
398 color: var(--color-ink);
399}
400
401.hero-tagline-combined {
402 font-family: var(--font-display);
403 font-size: clamp(1.125rem, 2.5vw, 1.75rem);
404 font-weight: 400;
405 font-style: italic;
406 line-height: 1.3;
407 margin: 0;
408 color: var(--color-charcoal);
409}
410
411.hero-hook-text {
412 font-size: 1rem;
413 line-height: 1.6;
414 color: var(--color-charcoal);
415 max-width: 45ch;
416 margin: 0;
417}
418
419.hero-hook-text--short {
420 display: none;
421}
422
423@media (max-width: 768px) {
424 .hero-hook-text--full {
425 display: none;
426 }
427
428 .hero-hook-text--short {
429 display: block;
430 }
431}
432
433/* Hero Included Box - Subtle "What's included" */
434.hero-included-box {
435 display: flex;
436 flex-direction: column;
437 gap: 6px;
438 padding: 10px 14px;
439 border: 1px solid var(--color-mist);
440 background: transparent;
441 max-width: 45ch;
442}
443
444.hero-included-title {
445 font-family: var(--font-body);
446 font-size: 0.5625rem;
447 font-weight: 500;
448 text-transform: uppercase;
449 letter-spacing: 0.1em;
450 color: var(--color-ash);
451}
452
453.hero-included-items {
454 display: flex;
455 flex-wrap: wrap;
456 align-items: center;
457 gap: 6px;
458 font-size: 0.8125rem;
459 color: var(--color-charcoal);
460 line-height: 1.5;
461}
462
463.hero-included-items em {
464 font-style: normal;
465 font-family: var(--font-mono);
466 font-size: 0.75rem;
467}
468
469.hero-included-sep {
470 color: var(--color-mist);
471}
472
473@media (max-width: 500px) {
474 .hero-included-items {
475 flex-direction: column;
476 align-items: flex-start;
477 gap: 4px;
478 }
479
480 .hero-included-sep {
481 display: none;
482 }
483}
484
485.hero-cta-group {
486 display: flex;
487 align-items: center;
488 gap: var(--spacing-lg);
489 margin-top: var(--spacing-sm);
490}
491
492@media (max-width: 600px) {
493 .hero-cta-group {
494 flex-direction: column;
495 gap: var(--spacing-md);
496 }
497}
498
499.hero-cta-combined {
500 display: inline-block;
501 padding: var(--spacing-sm) var(--spacing-xl);
502 font-family: var(--font-body);
503 font-size: 0.9rem;
504 font-weight: 500;
505 letter-spacing: 0.05em;
506 text-transform: uppercase;
507 text-decoration: none;
508 color: var(--color-paper);
509 background: var(--color-ink);
510 border: none;
511 transition: transform 0.2s ease, background 0.2s ease;
512}
513
514.hero-cta-combined:hover {
515 transform: translateY(-2px);
516 background: var(--color-accent);
517 color: var(--color-paper);
518}
519
520.hero-logos-inline {
521 display: flex;
522 flex-direction: column;
523 align-items: flex-start;
524 gap: 6px;
525}
526
527.hero-logos-inline .hero-logos-label {
528 font-size: 0.6875rem;
529 color: var(--color-ash);
530 letter-spacing: 0.03em;
531}
532
533.hero-logos-inline .hero-logos-row {
534 display: flex;
535 align-items: center;
536 gap: 8px;
537 flex-wrap: wrap;
538}
539
540.hero-logos-inline .hero-logos-row img {
541 border-radius: 4px;
542 opacity: 0.7;
543 transition: opacity 0.2s ease;
544}
545
546.hero-logos-inline .hero-logos-row img:hover {
547 opacity: 1;
548}
549
550.hero-combined-right {
551 display: flex;
552 justify-content: center;
553}
554
555.hero-combined-right .split-comparison {
556 max-width: 520px;
557 width: 100%;
558}
559
560.hero-combined-right .split-container {
561 max-width: 100%;
562}
563
564/* Bias tags at bottom of hero */
565.hero-bias-tags {
566 display: flex;
567 flex-direction: column;
568 align-items: center;
569 gap: var(--spacing-xs);
570 margin-top: var(--spacing-lg);
571 padding-top: var(--spacing-md);
572 border-top: 1px solid var(--color-mist);
573 max-width: var(--width-max);
574 margin-left: auto;
575 margin-right: auto;
576 width: 100%;
577 padding-bottom: var(--spacing-md);
578}
579
580/* ============================================
581 PROBLEM SECTION - Clarity Lens
582 ============================================ */
583
584.problem-section {
585 padding: var(--spacing-2xl) 0;
586 border-top: 1px solid var(--color-mist);
587}
588
589.problem-content {
590 display: grid;
591 gap: var(--spacing-xl);
592}
593
594/* Split Screen Comparison */
595.split-comparison {
596 position: relative;
597 width: 100%;
598 max-width: 600px;
599 margin: 0 auto;
600 padding: 20px;
601 margin-top: -20px;
602 margin-bottom: -20px;
603}
604
605.split-container {
606 position: relative;
607 width: 100%;
608 max-width: 500px;
609 height: 380px;
610 margin: 0 auto;
611 border-radius: 12px;
612 overflow: hidden;
613 background: var(--color-cream);
614 border: 1px solid var(--color-mist);
615 cursor: ew-resize;
616 user-select: none;
617}
618
619.split-before,
620.split-after {
621 position: absolute;
622 inset: 0;
623 display: flex;
624 align-items: center;
625 justify-content: center;
626}
627
628.split-before {
629 z-index: 1;
630}
631
632.split-content {
633 width: 100%;
634 height: 100%;
635 display: flex;
636 align-items: center;
637 justify-content: center;
638}
639
640.split-after {
641 /* Angled clip-path matching divider's skewX(-10deg): top-right, bottom-left */
642 clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
643 z-index: 2;
644 background: var(--color-paper);
645}
646
647.split-divider {
648 position: absolute;
649 top: 0;
650 bottom: 0;
651 left: 50%;
652 width: 3px;
653 background: var(--color-accent);
654 transform: translateX(-50%) skewX(-10deg);
655 pointer-events: none;
656 z-index: 3;
657 box-shadow: 0 0 20px rgba(0,0,0,0.15);
658}
659
660.split-label {
661 position: absolute;
662 top: 50%;
663 left: 50%;
664 transform: translate(-50%, -50%) skewX(10deg);
665 font-size: 0.6875rem;
666 font-weight: 600;
667 letter-spacing: 0.08em;
668 text-transform: uppercase;
669 color: var(--color-paper);
670 background: var(--color-accent);
671 padding: 6px 14px;
672 border-radius: 4px;
673 white-space: nowrap;
674 box-shadow: 0 2px 8px rgba(0,0,0,0.2);
675}
676
677/* Slop Card - Generic AI output */
678.slop-card {
679 width: 280px;
680 height: 280px;
681 background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #ddd6fe 100%);
682 border-radius: 16px;
683 padding: 24px;
684 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
685 font-family: 'Inter', system-ui, sans-serif;
686 display: flex;
687 flex-direction: column;
688}
689
690.slop-header {
691 display: flex;
692 align-items: center;
693 gap: 12px;
694 margin-bottom: 16px;
695}
696
697.slop-avatar {
698 width: 40px;
699 height: 40px;
700 border-radius: 50%;
701 background: linear-gradient(135deg, #8b5cf6, #7c3aed);
702 flex-shrink: 0;
703}
704
705.slop-text { flex: 1; }
706.slop-title { font-size: 14px; font-weight: 600; color: #1f2937; margin-bottom: 2px; }
707.slop-subtitle { font-size: 12px; color: #6b7280; }
708.slop-body { font-size: 13px; line-height: 1.5; color: #4b5563; margin-bottom: auto; flex: 1; }
709
710.slop-button {
711 width: 100%;
712 padding: 10px 20px;
713 background: linear-gradient(135deg, #8b5cf6, #7c3aed);
714 color: white;
715 border: none;
716 border-radius: 8px;
717 font-family: 'Inter', system-ui, sans-serif;
718 font-size: 13px;
719 font-weight: 500;
720 cursor: pointer;
721 margin-top: auto;
722}
723
724/* Callout labels pointing to issues */
725.slop-callouts {
726 position: absolute;
727 inset: 0;
728 pointer-events: none;
729}
730
731.slop-callout {
732 position: absolute;
733 font-size: 0.625rem;
734 font-weight: 600;
735 text-transform: uppercase;
736 letter-spacing: 0.06em;
737 color: var(--color-accent);
738 background: var(--color-paper);
739 padding: 4px 8px;
740 border: 1px solid var(--color-accent);
741 border-radius: 3px;
742 white-space: nowrap;
743 opacity: 0;
744 animation: calloutFadeIn 0.4s var(--ease-out) forwards;
745 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
746}
747
748.slop-callout[data-point="font"] {
749 top: 15%;
750 right: 5%;
751 animation-delay: 0.1s;
752}
753
754.slop-callout[data-point="gradient"] {
755 top: 40%;
756 left: 5%;
757 animation-delay: 0.25s;
758}
759
760.slop-callout[data-point="copy"] {
761 bottom: 35%;
762 right: 8%;
763 animation-delay: 0.4s;
764}
765
766.slop-callout[data-point="rounded"] {
767 bottom: 12%;
768 left: 10%;
769 animation-delay: 0.55s;
770}
771
772@keyframes calloutFadeIn {
773 from {
774 opacity: 0;
775 transform: scale(0.9);
776 }
777 to {
778 opacity: 1;
779 transform: scale(1);
780 }
781}
782
783/* Impeccable Card - With Design Skills */
784.impeccable-card {
785 width: 280px;
786 height: 300px;
787 background: var(--color-paper);
788 border: 1px solid var(--color-mist);
789 padding: var(--spacing-lg);
790 text-align: left;
791 display: flex;
792 flex-direction: column;
793}
794
795.impeccable-eyebrow {
796 font-family: var(--font-mono);
797 font-size: 0.625rem;
798 font-weight: 500;
799 letter-spacing: 0.15em;
800 text-transform: uppercase;
801 color: var(--color-accent);
802 margin-bottom: var(--spacing-xs);
803}
804
805.impeccable-title {
806 font-family: var(--font-display);
807 font-size: 1.75rem;
808 font-weight: 300;
809 font-style: italic;
810 color: var(--color-ink);
811 margin-bottom: var(--spacing-sm);
812 line-height: 1.1;
813}
814
815.impeccable-body {
816 font-size: 0.875rem;
817 line-height: 1.6;
818 color: var(--color-ash);
819 margin-bottom: auto;
820 flex: 1;
821}
822
823.impeccable-button {
824 display: inline-flex;
825 margin-top: var(--spacing-sm);
826 padding: 0.625rem 1.5rem;
827 background: var(--color-ink);
828 color: var(--color-paper);
829 border: none;
830 font-family: var(--font-body);
831 font-size: 0.8125rem;
832 font-weight: 500;
833 letter-spacing: 0.03em;
834 cursor: pointer;
835 transition: all var(--duration-base) var(--ease-out);
836 align-self: flex-start;
837}
838
839.impeccable-button:hover {
840 background: var(--color-accent);
841}
842
843/* Split Labels */
844.split-labels {
845 display: flex;
846 justify-content: center;
847 gap: var(--spacing-xl);
848 margin-top: var(--spacing-md);
849}
850
851.split-label-item {
852 display: flex;
853 align-items: center;
854 gap: var(--spacing-xs);
855 font-size: 0.8125rem;
856 color: var(--color-ash);
857}
858
859@media (max-width: 768px) {
860 .split-comparison {
861 padding: 8px;
862 margin-top: -8px;
863 margin-bottom: -8px;
864 }
865
866 .split-labels {
867 display: none;
868 }
869}
870
871.split-label-dot {
872 width: 8px;
873 height: 8px;
874 border-radius: 50%;
875 background: var(--color-mist);
876}
877
878.split-label-dot--accent {
879 background: var(--color-accent);
880}
881
882/* ============================================
883 FOUNDATION SECTION
884 ============================================ */
885
886.foundation-section {
887 padding: var(--spacing-2xl) 0;
888 border-top: 1px solid var(--color-mist);
889}
890
891.foundation-content {
892 display: grid;
893 gap: var(--spacing-lg);
894}
895
896.foundation-grid {
897 display: flex;
898 align-items: flex-end;
899 height: 600px;
900 gap: var(--spacing-sm);
901 margin-top: -80px; /* Pull up into the header whitespace */
902 position: relative;
903}
904
905.foundation-column {
906 flex: 1;
907 display: flex;
908 flex-direction: column;
909 height: 100%;
910 justify-content: flex-end;
911 cursor: pointer;
912 min-width: 0;
913}
914
915.foundation-card {
916 padding: var(--spacing-md);
917 background: white;
918 border: 1px solid var(--color-bg);
919 border-radius: 12px;
920 display: flex;
921 flex-direction: column;
922 height: 280px;
923 margin-bottom: var(--spacing-xs);
924 transition: transform var(--duration-slow) var(--ease-out-quint), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
925 position: relative;
926 z-index: 2;
927 box-sizing: border-box;
928}
929
930.foundation-column:hover .foundation-card {
931 transform: translateY(-12px);
932 border-color: var(--color-accent);
933 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
934}
935
936.foundation-plinth {
937 width: 100%;
938 background: repeating-linear-gradient(45deg, var(--color-bg), var(--color-bg) 2px, transparent 2px, transparent 10px);
939 border: 1px solid var(--color-mist);
940 border-bottom: none;
941 border-radius: 8px 8px 0 0;
942 transition: all var(--duration-base) var(--ease-out);
943}
944
945.foundation-column:hover .foundation-plinth {
946 background: var(--color-mist);
947 opacity: 0.7;
948}
949
950/* Plinth Heights - More dramatic steps */
951.plinth-1 { height: 4%; }
952.plinth-2 { height: 12%; }
953.plinth-3 { height: 20%; }
954.plinth-4 { height: 28%; }
955.plinth-5 { height: 36%; }
956.plinth-6 { height: 44%; }
957.plinth-7 { height: 52%; }
958
959.foundation-card-viz {
960 height: 52px;
961 display: flex;
962 align-items: center;
963 justify-content: flex-start;
964 color: var(--color-ink);
965 margin-bottom: var(--spacing-md);
966}
967
968.foundation-card-header {
969 display: flex;
970 align-items: baseline;
971 gap: var(--spacing-xs);
972 margin-bottom: 8px;
973 overflow: hidden;
974}
975
976.foundation-card-label {
977 font-family: var(--font-display);
978 font-size: 1.35rem;
979 color: var(--color-ink);
980 line-height: 1.1;
981}
982
983.foundation-card-count {
984 font-family: var(--font-mono);
985 font-size: 0.7rem;
986 color: var(--color-accent);
987 flex-shrink: 0;
988}
989
990.foundation-card-detail {
991 font-size: 0.875rem;
992 color: var(--color-ash);
993 line-height: 1.4;
994 margin: auto 0 0 0;
995}
996
997.foundation-svg {
998 width: 44px;
999 height: 44px;
1000}
1001
1002/* Typography & Spatial (Breathing draw + full draw on hover) */
1003.anim-draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw-breathe 4s ease-in-out infinite; }
1004.foundation-column:hover .anim-draw { animation: draw-in 0.8s var(--ease-out) forwards; }
1005.anim-draw-delay { stroke-dasharray: 100; stroke-dashoffset: 100; }
1006.foundation-column:hover .anim-draw-delay { animation: draw-in 1s var(--ease-out) 0.2s forwards; }
1007@keyframes draw-breathe { 0%, 100% { stroke-dashoffset: 100; } 50% { stroke-dashoffset: 40; } }
1008@keyframes draw-in { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
1009
1010/* Color & Contrast (Breathing pulse + spread on hover) */
1011.anim-move-x { animation: pulse-x 3s ease-in-out infinite; }
1012.foundation-column:hover .anim-move-x { animation: spread-x 0.6s var(--ease-in-out) forwards; }
1013.anim-move-x-opp { animation: pulse-x-opp 3s ease-in-out infinite; }
1014.foundation-column:hover .anim-move-x-opp { animation: spread-x-opp 0.6s var(--ease-in-out) forwards; }
1015.anim-fade-in { opacity: 0; transition: opacity 0.6s var(--ease-in-out); }
1016.foundation-column:hover .anim-fade-in { opacity: 1; }
1017@keyframes pulse-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
1018@keyframes pulse-x-opp { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.5px); } }
1019@keyframes spread-x { from { transform: translateX(0); } to { transform: translateX(4px); } }
1020@keyframes spread-x-opp { from { transform: translateX(0); } to { transform: translateX(-4px); } }
1021
1022/* Responsive (Staggered reflow from desktop 2-col to mobile stack) */
1023.anim-res-frame, .anim-res-img, .anim-res-title, .anim-res-line-1, .anim-res-line-2 {
1024 transform-box: fill-box;
1025 transform-origin: 50% 50%;
1026 transition: transform 0.4s var(--ease-in-out);
1027}
1028.anim-res-frame { transition-delay: 0s; }
1029.anim-res-img { transition-delay: 0s; }
1030.anim-res-title { transition-delay: 0s; }
1031.anim-res-line-1 { transition-delay: 0s; }
1032.anim-res-line-2 { transition-delay: 0s; }
1033.foundation-column:hover .anim-res-frame { transform: scaleX(0.57) scaleY(1.17); transition-delay: 0s; }
1034.foundation-column:hover .anim-res-img { transform: translate(6px, -4px) scale(0.65); transition-delay: 0.05s; }
1035.foundation-column:hover .anim-res-title { transform: translate(-7px, 6px) scaleX(0.65); transition-delay: 0.1s; }
1036.foundation-column:hover .anim-res-line-1 { transform: translate(-7px, 4.75px) scaleX(0.65); transition-delay: 0.15s; }
1037.foundation-column:hover .anim-res-line-2 { transform: translate(-6px, 4.25px) scaleX(0.6); transition-delay: 0.2s; }
1038
1039/* Interaction (Gentle wobble + full toggle on hover) */
1040.anim-toggle-move { animation: toggle-wobble 3s ease-in-out infinite; }
1041.foundation-column:hover .anim-toggle-move { animation: toggle-snap 0.35s var(--ease-in-out) forwards; }
1042@keyframes toggle-wobble { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
1043@keyframes toggle-snap { from { transform: translateX(0); fill: var(--color-mist); } to { transform: translateX(8px); fill: var(--color-accent); } }
1044
1045/* Motion (Gentle bob + full bounce on hover) */
1046.anim-squash-ball { transform-origin: 20px 20px; animation: ball-bob 2.5s ease-in-out infinite; }
1047.foundation-column:hover .anim-squash-ball { animation: bounce-ball 1.5s linear infinite; }
1048@keyframes ball-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
1049@keyframes bounce-ball {
1050 0% { transform: translateY(0); }
1051 6% { transform: translateY(0.5px); }
1052 18% { transform: translateY(4px); }
1053 35% { transform: translateY(12px); }
1054 42% { transform: translateY(12px) scaleX(1.3) scaleY(0.6); }
1055 48% { transform: translateY(12px); }
1056 65% { transform: translateY(4px); }
1057 78% { transform: translateY(0.5px); }
1058 88%, 100% { transform: translateY(0); }
1059}
1060
1061/* UX Writing (Cursor always blinks) */
1062.anim-blink { animation: blink-key 1s step-end infinite; }
1063@keyframes blink-key { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
1064
1065/* Tablet: 3-col grid (switch before stairs clip) */
1066@media (max-width: 1200px) {
1067 .foundation-grid {
1068 display: grid;
1069 grid-template-columns: repeat(3, 1fr);
1070 height: auto;
1071 gap: var(--spacing-md);
1072 margin-top: var(--spacing-xl);
1073 }
1074 .foundation-column { height: auto; }
1075 .foundation-card { height: auto; min-height: 200px; }
1076 .foundation-plinth { display: none; }
1077 .foundation-column:hover .foundation-card { transform: translateY(-4px); }
1078
1079 /* Enable hover animations on card hover for grid */
1080 .foundation-card:hover .anim-draw { animation: draw-in 0.8s var(--ease-out) forwards; }
1081 .foundation-card:hover .anim-draw-delay { animation: draw-in 1s var(--ease-out) 0.2s forwards; }
1082 .foundation-card:hover .anim-move-x { animation: spread-x 0.6s var(--ease-in-out) forwards; }
1083 .foundation-card:hover .anim-move-x-opp { animation: spread-x-opp 0.6s var(--ease-in-out) forwards; }
1084 .foundation-card:hover .anim-fade-in { opacity: 1; }
1085 .foundation-card:hover .anim-res-frame { transform: scaleX(0.57) scaleY(1.17); }
1086 .foundation-card:hover .anim-res-img { transform: translate(6px, -4px) scale(0.65); }
1087 .foundation-card:hover .anim-res-title { transform: translate(-7px, 6px) scaleX(0.65); }
1088 .foundation-card:hover .anim-res-line-1 { transform: translate(-7px, 4.75px) scaleX(0.65); }
1089 .foundation-card:hover .anim-res-line-2 { transform: translate(-6px, 4.25px) scaleX(0.6); }
1090 .foundation-card:hover .anim-toggle-move { animation: toggle-snap 0.35s var(--ease-in-out) forwards; }
1091 .foundation-card:hover .anim-squash-ball { animation: bounce-ball 1.5s linear infinite; }
1092}
1093
1094/* Small tablet: 2-col grid */
1095@media (max-width: 768px) {
1096 .foundation-grid { grid-template-columns: repeat(2, 1fr); }
1097}
1098
1099/* Small mobile: compact horizontal cards */
1100@media (max-width: 520px) {
1101 .foundation-grid {
1102 grid-template-columns: 1fr;
1103 gap: var(--spacing-sm);
1104 }
1105 .foundation-card {
1106 display: grid;
1107 grid-template-columns: auto 1fr;
1108 grid-template-rows: auto auto;
1109 align-items: start;
1110 min-height: auto;
1111 padding: var(--spacing-sm) var(--spacing-md);
1112 gap: 0 var(--spacing-md);
1113 }
1114 .foundation-card-viz {
1115 grid-row: 1 / -1;
1116 align-self: center;
1117 height: auto;
1118 margin-bottom: 0;
1119 }
1120 .foundation-card-header { margin-bottom: 2px; }
1121 .foundation-card-label { font-size: 1.1rem; }
1122 .foundation-card-detail { margin: 0; font-size: 0.8125rem; }
1123}
1124
1125.foundation-cta {
1126 text-align: center;
1127}
1128
1129.foundation-cta-text {
1130 font-size: 0.9375rem;
1131 color: var(--color-charcoal);
1132 margin: 0;
1133}
1134
1135.foundation-cta-text code {
1136 font-family: var(--font-mono);
1137 font-size: 0.875rem;
1138 color: var(--color-ink);
1139}
1140
1141.foundation-slash {
1142 color: var(--color-accent);
1143}
1144
1145/* ============================================
1146 LANGUAGE SECTION (wraps periodic table + commands)
1147 ============================================ */
1148
1149.language-section {
1150 padding: var(--spacing-2xl) 0;
1151 border-top: 1px solid var(--color-mist);
1152}
1153
1154.language-content {
1155 display: grid;
1156 gap: var(--spacing-lg);
1157}
1158
1159/* Grid and flex items default to min-width: auto, which lets them expand to
1160 fit their intrinsic content. The mobile commands layout has a split-compare
1161 demo wide enough to blow out the entire section on mobile (~2400px wide).
1162 Cascade min-width: 0 through every layer of the language section so the
1163 intrinsic width can't propagate up the parent chain. */
1164.language-section,
1165.language-section * {
1166 min-width: 0;
1167}
1168
1169.language-content .section-lead {
1170 margin-bottom: 0;
1171}
1172
1173.commands-subsection {
1174 display: grid;
1175 gap: var(--spacing-md);
1176}
1177
1178.commands-header-subtitle {
1179 font-size: 0.9375rem;
1180 color: var(--color-warm-gray);
1181 margin: 0;
1182}
1183
1184/* ============================================
1185 VISUAL MODE SECTION
1186 ============================================ */
1187
1188.visual-mode-section {
1189 padding: var(--spacing-2xl) 0;
1190 border-top: 1px solid var(--color-mist);
1191}
1192
1193.visual-mode-content {
1194 display: grid;
1195 gap: var(--spacing-lg);
1196}
1197
1198.visual-mode-demo {
1199 display: grid;
1200 grid-template-columns: 3fr 2fr;
1201 gap: var(--spacing-xl);
1202 align-items: start;
1203}
1204
1205@media (max-width: 900px) {
1206 .visual-mode-demo {
1207 grid-template-columns: 1fr;
1208 }
1209}
1210
1211/* Browser chrome frame for the iframe */
1212.visual-mode-preview {
1213 border-radius: 8px;
1214 overflow: hidden;
1215 border: 1px solid var(--color-mist);
1216 box-shadow: 0 8px 30px -6px rgba(0,0,0,0.12);
1217}
1218
1219.visual-mode-preview-header {
1220 display: flex;
1221 align-items: center;
1222 gap: 6px;
1223 padding: 10px 14px;
1224 background: var(--color-cream);
1225 border-bottom: 1px solid var(--color-mist);
1226}
1227
1228.visual-mode-preview-dot {
1229 width: 10px;
1230 height: 10px;
1231 border-radius: 50%;
1232}
1233
1234.visual-mode-preview-dot.red { background: #ff5f56; }
1235.visual-mode-preview-dot.yellow { background: #ffbd2e; }
1236.visual-mode-preview-dot.green { background: #27c93f; }
1237
1238.visual-mode-preview-title {
1239 margin-left: auto;
1240 font-family: var(--font-mono);
1241 font-size: 0.75rem;
1242 color: var(--color-ash);
1243}
1244
1245.visual-mode-iframe {
1246 display: block;
1247 width: 100%;
1248 height: 480px;
1249 border: none;
1250 background: white;
1251}
1252
1253/* Details sidebar — editorial blocks, no cards.
1254 The live detection overlay (left iframe) is the visual anchor for the
1255 whole section; the right column should be quiet text + a single image
1256 for the Chrome extension CTA. Hierarchy via typography + space, not
1257 bordered containers. */
1258.visual-mode-details {
1259 display: flex;
1260 flex-direction: column;
1261 gap: var(--spacing-xl);
1262 padding: var(--spacing-md) 0;
1263}
1264
1265.visual-mode-feature {
1266 display: flex;
1267 flex-direction: column;
1268 gap: var(--spacing-xs);
1269}
1270
1271.visual-mode-feature-label {
1272 display: block;
1273 font-family: var(--font-mono);
1274 font-size: 0.6875rem;
1275 font-weight: 600;
1276 text-transform: uppercase;
1277 letter-spacing: 0.08em;
1278 color: var(--color-accent);
1279}
1280
1281.visual-mode-feature p {
1282 font-size: 0.9375rem;
1283 line-height: 1.55;
1284 color: var(--color-charcoal);
1285 margin: 0;
1286}
1287
1288.visual-mode-feature code {
1289 font-family: var(--font-mono);
1290 font-size: 0.875rem;
1291 color: var(--color-ink);
1292}
1293
1294/* ============================================
1295 SOLUTION SECTION (legacy styles for periodic table)
1296 ============================================ */
1297
1298.solution-section {
1299 padding: var(--spacing-2xl) 0;
1300}
1301
1302.solution-content {
1303 display: grid;
1304 gap: var(--spacing-lg);
1305}
1306
1307.solution-content .section-lead {
1308 margin-bottom: 0;
1309}
1310
1311/* Two-pillar visual layout */
1312.solution-visual {
1313 display: grid;
1314 grid-template-columns: 1fr auto 1fr;
1315 gap: var(--spacing-lg);
1316 align-items: stretch;
1317}
1318
1319@media (max-width: 900px) {
1320 .solution-visual {
1321 grid-template-columns: 1fr;
1322 gap: var(--spacing-md);
1323 }
1324}
1325
1326/* Interactive Framework Viz - Periodic Table */
1327.solution-visual-interactive {
1328 width: 100%;
1329 min-height: 380px;
1330 background: var(--color-paper);
1331 border: 1px solid var(--color-mist);
1332 border-radius: 8px;
1333 position: relative;
1334 overflow: visible;
1335}
1336
1337.solution-pillar {
1338 background: var(--color-cream);
1339 border: 1px solid var(--color-mist);
1340 padding: var(--spacing-lg);
1341 transition: all var(--duration-base) var(--ease-out);
1342}
1343
1344.solution-pillar:hover {
1345 border-color: var(--color-accent);
1346 transform: translateY(-4px);
1347 box-shadow: 0 20px 60px var(--color-accent-dim);
1348}
1349
1350.pillar-header {
1351 text-align: center;
1352 margin-bottom: var(--spacing-lg);
1353 padding-bottom: var(--spacing-md);
1354 border-bottom: 1px solid var(--color-mist);
1355}
1356
1357.pillar-icon {
1358 display: inline-flex;
1359 align-items: center;
1360 justify-content: center;
1361 width: 56px;
1362 height: 56px;
1363 border-radius: 50%;
1364 background: var(--color-accent-dim);
1365 color: var(--color-accent);
1366 margin-bottom: var(--spacing-sm);
1367}
1368
1369.pillar-title {
1370 font-family: var(--font-display);
1371 font-size: 1.75rem;
1372 font-weight: 400;
1373 margin: 0 0 var(--spacing-xs);
1374}
1375
1376.pillar-subtitle {
1377 font-size: 0.875rem;
1378 color: var(--color-ash);
1379 margin: 0;
1380}
1381
1382.pillar-content {
1383 display: flex;
1384 flex-direction: column;
1385 gap: var(--spacing-sm);
1386}
1387
1388.pillar-item {
1389 display: flex;
1390 justify-content: space-between;
1391 align-items: center;
1392 padding: var(--spacing-sm);
1393 background: var(--color-paper);
1394 border-radius: 4px;
1395 transition: all var(--duration-fast) var(--ease-out);
1396}
1397
1398.pillar-item:hover {
1399 background: var(--color-accent-dim);
1400}
1401
1402.pillar-item-name {
1403 font-weight: 500;
1404 color: var(--color-ink);
1405 font-size: 0.9375rem;
1406}
1407
1408.pillar-item-code {
1409 font-family: var(--font-mono);
1410 font-size: 0.875rem;
1411 font-weight: 500;
1412 color: var(--color-accent);
1413 background: transparent;
1414 padding: 0;
1415}
1416
1417.pillar-item-desc {
1418 font-size: 0.75rem;
1419 color: var(--color-ash);
1420}
1421
1422.pillar-item--more {
1423 justify-content: center;
1424 font-size: 0.8125rem;
1425 font-weight: 500;
1426 color: var(--color-accent);
1427 background: transparent;
1428 border: 1px dashed var(--color-mist);
1429}
1430
1431/* Connector between pillars */
1432.solution-connector {
1433 display: flex;
1434 align-items: center;
1435 justify-content: center;
1436}
1437
1438.connector-plus {
1439 font-family: var(--font-display);
1440 font-size: 3rem;
1441 font-weight: 300;
1442 color: var(--color-accent);
1443 opacity: 0.5;
1444}
1445
1446@media (max-width: 900px) {
1447 .solution-connector {
1448 padding: var(--spacing-sm) 0;
1449 }
1450
1451 .connector-plus {
1452 font-size: 2rem;
1453 }
1454}
1455
1456
1457/* ============================================
1458 SKILLS SECTION
1459 ============================================ */
1460
1461.skills-section {
1462 padding: var(--spacing-2xl) 0;
1463 border-top: 1px solid var(--color-mist);
1464}
1465
1466.skills-gallery {
1467 display: grid;
1468 grid-template-columns: 200px 1fr;
1469 gap: var(--spacing-xl);
1470 align-items: start;
1471}
1472
1473@media (max-width: 968px) {
1474 .skills-gallery {
1475 grid-template-columns: 1fr;
1476 gap: var(--spacing-lg);
1477 }
1478}
1479
1480.skills-nav {
1481 display: flex;
1482 flex-direction: column;
1483 gap: 2px;
1484 position: sticky;
1485 top: var(--spacing-lg);
1486}
1487
1488@media (max-width: 968px) {
1489 .skills-nav {
1490 flex-direction: row;
1491 flex-wrap: wrap;
1492 gap: var(--spacing-xs);
1493 position: static;
1494 }
1495}
1496
1497.skill-nav-item {
1498 padding: var(--spacing-sm) var(--spacing-md);
1499 background: transparent;
1500 border: none;
1501 border-left: 2px solid transparent;
1502 color: var(--color-ash);
1503 font-family: var(--font-body);
1504 font-size: 0.9375rem;
1505 font-weight: 400;
1506 cursor: pointer;
1507 transition: all 0.2s ease;
1508 text-align: left;
1509 text-decoration: none;
1510 display: block;
1511}
1512
1513.skill-nav-item:hover {
1514 color: var(--color-text);
1515 background: var(--color-cream);
1516}
1517
1518.skill-nav-item.active {
1519 color: var(--color-accent);
1520 border-left-color: var(--color-accent);
1521 background: var(--color-accent-dim);
1522 font-weight: 500;
1523}
1524
1525@media (max-width: 968px) {
1526 .skill-nav-item {
1527 border-left: none;
1528 border-bottom: 2px solid transparent;
1529 padding: var(--spacing-xs) var(--spacing-md);
1530 }
1531
1532 .skill-nav-item.active {
1533 border-bottom-color: var(--color-accent);
1534 }
1535}
1536
1537.skills-showcase {
1538 display: grid;
1539 grid-template-columns: 1.2fr 1fr;
1540 gap: var(--spacing-lg);
1541 align-items: start;
1542}
1543
1544@media (max-width: 1100px) {
1545 .skills-showcase {
1546 grid-template-columns: 1fr;
1547 }
1548}
1549
1550.loading-state {
1551 padding: var(--spacing-xl);
1552 text-align: center;
1553 color: var(--color-ash);
1554 font-style: italic;
1555}
1556
1557/* ============================================
1558 MOBILE COMMANDS LAYOUT
1559 ============================================ */
1560
1561.mobile-commands-layout {
1562 display: none;
1563}
1564
1565@media (max-width: 900px) {
1566 .mobile-commands-layout {
1567 display: flex;
1568 flex-direction: column;
1569 gap: var(--spacing-md);
1570 /* Without min-width: 0, the flex container expands to fit any intrinsically
1571 wide descendant (the split-compare demo blows it out to ~2400px otherwise).
1572 The same constraint cascades to direct children via the next rule. */
1573 min-width: 0;
1574 width: 100%;
1575 }
1576
1577 .mobile-commands-layout > * {
1578 min-width: 0;
1579 max-width: 100%;
1580 }
1581
1582 .commands-container {
1583 display: none;
1584 }
1585}
1586
1587.mobile-carousel-wrapper {
1588 overflow-x: auto;
1589 -webkit-overflow-scrolling: touch;
1590 scrollbar-width: none;
1591 padding: var(--spacing-xs) 0;
1592}
1593
1594.mobile-carousel-wrapper::-webkit-scrollbar {
1595 display: none;
1596}
1597
1598.mobile-carousel {
1599 display: flex;
1600 gap: var(--spacing-xs);
1601 padding-right: var(--spacing-md);
1602}
1603
1604.mobile-cmd-pill {
1605 flex-shrink: 0;
1606 padding: var(--spacing-sm) var(--spacing-md);
1607 min-height: 44px;
1608 font-family: var(--font-mono);
1609 font-size: 0.8125rem;
1610 font-weight: 500;
1611 color: var(--color-charcoal);
1612 background: none;
1613 border: none;
1614 border-radius: 100px;
1615 cursor: pointer;
1616 transition: background 0.2s ease, color 0.2s ease;
1617 white-space: nowrap;
1618}
1619
1620.mobile-cmd-pill:hover {
1621 background: var(--color-mist);
1622}
1623
1624.mobile-cmd-pill.active {
1625 color: var(--color-paper);
1626 background: var(--color-ink);
1627}
1628
1629.mobile-demo-area {
1630 padding: 0;
1631}
1632
1633.mobile-demo-area .demo-split-comparison {
1634 width: 100%;
1635}
1636
1637.mobile-demo-area .split-container {
1638 width: 100%;
1639 max-width: 100%;
1640 height: 320px;
1641}
1642
1643.mobile-demo-area .demo-caption {
1644 font-size: 0.75rem;
1645 margin-top: var(--spacing-sm);
1646}
1647
1648.mobile-info-area {
1649 padding-top: var(--spacing-sm);
1650}
1651
1652.mobile-cmd-info {
1653 display: none;
1654 padding: var(--spacing-sm) 0;
1655}
1656
1657.mobile-cmd-info.active {
1658 display: block;
1659}
1660
1661.mobile-cmd-name {
1662 font-family: var(--font-mono);
1663 font-size: 1.125rem;
1664 font-weight: 600;
1665 color: var(--color-ink);
1666 margin: 0 0 var(--spacing-xs) 0;
1667}
1668
1669.mobile-cmd-desc {
1670 font-size: 0.875rem;
1671 color: var(--color-charcoal);
1672 line-height: 1.5;
1673 margin: 0;
1674}
1675
1676.mobile-cmd-rel {
1677 margin-top: var(--spacing-xs);
1678 font-size: 0.75rem;
1679 color: var(--color-ash);
1680}
1681
1682.mobile-cmd-rel code {
1683 font-family: var(--font-mono);
1684 color: var(--color-ink);
1685}
1686
1687/* ============================================
1688 DOWNLOADS SECTION
1689 ============================================ */
1690
1691.downloads-section {
1692 padding: var(--spacing-2xl) 0;
1693 border-top: 1px solid var(--color-mist);
1694}
1695
1696.downloads-grid {
1697 display: grid;
1698 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1699 gap: var(--spacing-lg);
1700}
1701
1702.download-card {
1703 display: flex;
1704 flex-direction: column;
1705 align-items: center;
1706 text-align: center;
1707 padding: var(--spacing-lg);
1708 background: var(--color-cream);
1709 border: 1px solid var(--color-mist);
1710 transition: all var(--duration-base) var(--ease-out);
1711}
1712
1713.download-card:hover {
1714 border-color: var(--color-accent);
1715 transform: translateY(-4px);
1716 box-shadow: 0 20px 60px var(--color-accent-dim);
1717}
1718
1719.download-card-icon {
1720 margin-bottom: var(--spacing-sm);
1721}
1722
1723.download-card-icon img {
1724 width: 40px;
1725 height: 40px;
1726 object-fit: contain;
1727 border-radius: 8px;
1728}
1729
1730.download-card-title {
1731 font-family: var(--font-display);
1732 font-size: 1.25rem;
1733 font-weight: 400;
1734 margin: 0 0 var(--spacing-sm) 0;
1735}
1736
1737.download-card-note {
1738 font-size: 0.75rem;
1739 color: var(--color-ash);
1740 margin-bottom: var(--spacing-xs);
1741}
1742
1743.download-card .btn {
1744 margin-top: var(--spacing-xs);
1745}
1746
1747/* Install command box */
1748.install-command {
1749 display: flex;
1750 align-items: center;
1751 gap: var(--spacing-xs);
1752 background: var(--color-paper);
1753 border: 1px solid var(--color-mist);
1754 border-radius: 6px;
1755 padding: var(--spacing-sm);
1756 margin-top: var(--spacing-sm);
1757 width: 100%;
1758}
1759
1760.install-command code {
1761 flex: 1;
1762 font-family: var(--font-mono);
1763 font-size: 0.75rem;
1764 color: var(--color-ink);
1765 background: transparent;
1766 padding: 0;
1767 white-space: nowrap;
1768 overflow: hidden;
1769 text-overflow: ellipsis;
1770}
1771
1772.copy-btn {
1773 display: flex;
1774 align-items: center;
1775 justify-content: center;
1776 width: 28px;
1777 height: 28px;
1778 background: transparent;
1779 border: 1px solid var(--color-mist);
1780 border-radius: 4px;
1781 color: var(--color-ash);
1782 cursor: pointer;
1783 flex-shrink: 0;
1784 transition: all var(--duration-fast) var(--ease-out);
1785}
1786
1787.copy-btn:hover {
1788 background: var(--color-accent-dim);
1789 border-color: var(--color-accent);
1790 color: var(--color-accent);
1791}
1792
1793.copy-btn.copied {
1794 background: var(--color-accent);
1795 border-color: var(--color-accent);
1796 color: var(--color-paper);
1797}
1798
1799.install-hint {
1800 font-size: 0.75rem;
1801 color: var(--color-ash);
1802 margin: var(--spacing-xs) 0 0 0;
1803}
1804
1805.install-hint code {
1806 font-family: var(--font-mono);
1807 font-size: 0.6875rem;
1808 background: var(--color-mist);
1809 padding: 2px 5px;
1810 border-radius: 3px;
1811}
1812
1813.download-card-details {
1814 width: 100%;
1815 margin-top: var(--spacing-sm);
1816 font-size: 0.8125rem;
1817 text-align: left;
1818}
1819
1820.download-card-details summary {
1821 cursor: pointer;
1822 color: var(--color-ash);
1823 font-size: 0.75rem;
1824 padding: var(--spacing-xs) 0;
1825 list-style: none;
1826 display: flex;
1827 align-items: center;
1828 justify-content: center;
1829 gap: 4px;
1830}
1831
1832.download-card-details summary::before {
1833 content: '▶';
1834 font-size: 0.5rem;
1835 transition: transform var(--duration-fast) var(--ease-out);
1836}
1837
1838.download-card-details[open] summary::before {
1839 transform: rotate(90deg);
1840}
1841
1842.download-card-details summary::-webkit-details-marker {
1843 display: none;
1844}
1845
1846.download-card-details ol {
1847 margin: var(--spacing-sm) 0;
1848 padding-left: var(--spacing-md);
1849 color: var(--color-charcoal);
1850 line-height: 1.6;
1851}
1852
1853.download-card-details li {
1854 margin-bottom: 4px;
1855}
1856
1857.download-card-details code {
1858 font-family: var(--font-mono);
1859 font-size: 0.6875rem;
1860 background: var(--color-mist);
1861 padding: 2px 5px;
1862 border-radius: 3px;
1863}
1864
1865.download-card-details a {
1866 color: var(--color-accent);
1867 text-decoration: none;
1868 font-size: 0.75rem;
1869}
1870
1871.download-card-details a:hover {
1872 text-decoration: underline;
1873}
1874
1875/* ============================================
1876 OPEN SOURCE SECTION
1877 ============================================ */
1878
1879.opensource-section {
1880 padding: var(--spacing-2xl) 0;
1881 border-top: 1px solid var(--color-mist);
1882 text-align: center;
1883}
1884
1885.opensource-content {
1886 max-width: 500px;
1887 margin: 0 auto;
1888 display: flex;
1889 flex-direction: column;
1890 align-items: center;
1891 gap: var(--spacing-md);
1892}
1893
1894.opensource-title {
1895 font-size: clamp(1.5rem, 4vw, 2rem);
1896 font-weight: 300;
1897}
1898
1899.opensource-desc {
1900 font-size: 1.125rem;
1901 color: var(--color-ash);
1902 line-height: 1.6;
1903}
1904
1905/* ============================================
1906 FOOTER
1907 ============================================ */
1908
1909.site-footer {
1910 border-top: 1px solid var(--color-mist);
1911 padding: var(--spacing-xl) var(--spacing-lg);
1912 background: var(--color-cream);
1913}
1914
1915/* Single horizontal row: wordmark left, nav centered, credit right.
1916 Three groups, no two-tier split, no dividers. */
1917.footer-row {
1918 max-width: var(--width-max);
1919 margin: 0 auto;
1920 display: grid;
1921 grid-template-columns: auto 1fr auto;
1922 align-items: center;
1923 gap: var(--spacing-xl);
1924}
1925
1926.footer-logo {
1927 font-family: var(--font-display);
1928 font-size: 1.25rem;
1929 font-weight: 400;
1930 color: var(--color-ink);
1931 text-decoration: none;
1932}
1933
1934.footer-links {
1935 display: flex;
1936 justify-content: center;
1937 gap: var(--spacing-lg);
1938 flex-wrap: wrap;
1939}
1940
1941.footer-links a {
1942 font-size: 0.875rem;
1943 color: var(--color-ash);
1944 text-decoration: none;
1945 transition: color var(--duration-fast) var(--ease-out);
1946}
1947
1948.footer-links a:hover {
1949 color: var(--color-accent);
1950}
1951
1952.footer-credit {
1953 display: flex;
1954 align-items: center;
1955 gap: var(--spacing-sm);
1956 font-size: 0.875rem;
1957 color: var(--color-ash);
1958 white-space: nowrap;
1959}
1960
1961.footer-credit a {
1962 color: var(--color-text);
1963 text-decoration: none;
1964 transition: color var(--duration-fast) var(--ease-out);
1965}
1966
1967.footer-credit a:hover {
1968 color: var(--color-accent);
1969}
1970
1971.footer-social-link {
1972 display: inline-flex;
1973 align-items: center;
1974 justify-content: center;
1975 padding: 4px;
1976 color: var(--color-ash);
1977 transition: color var(--duration-fast) var(--ease-out);
1978}
1979
1980.footer-social-link:hover {
1981 color: var(--color-accent);
1982}
1983
1984@media (max-width: 900px) {
1985 .footer-row {
1986 grid-template-columns: 1fr;
1987 justify-items: center;
1988 text-align: center;
1989 gap: var(--spacing-md);
1990 }
1991
1992 .footer-links {
1993 justify-content: center;
1994 gap: var(--spacing-sm) var(--spacing-md);
1995 font-size: 0.8125rem;
1996 }
1997
1998 .site-footer {
1999 padding: var(--spacing-lg) var(--spacing-md);
2000 }
2001}
2002
2003/* ============================================
2004 BUTTONS
2005 ============================================ */
2006
2007.btn {
2008 display: inline-flex;
2009 align-items: center;
2010 justify-content: center;
2011 gap: var(--spacing-xs);
2012 padding: 1rem 2rem;
2013 font-family: var(--font-body);
2014 font-size: 0.9375rem;
2015 font-weight: 600;
2016 letter-spacing: 0.03em;
2017 border: none;
2018 cursor: pointer;
2019 transition: all var(--duration-base) var(--ease-out);
2020 position: relative;
2021 overflow: hidden;
2022 text-decoration: none;
2023}
2024
2025.btn-primary {
2026 background: var(--color-ink);
2027 color: var(--color-paper);
2028}
2029
2030.btn-primary::before {
2031 content: '';
2032 position: absolute;
2033 inset: 0;
2034 background: var(--color-accent);
2035 transform: translateY(100%);
2036 transition: transform var(--duration-base) var(--ease-out);
2037 z-index: 0;
2038}
2039
2040.btn-primary:hover::before {
2041 transform: translateY(0);
2042}
2043
2044.btn-primary:hover {
2045 color: var(--color-paper);
2046}
2047
2048.btn-primary span,
2049.btn-primary svg {
2050 position: relative;
2051 z-index: 1;
2052}
2053
2054/* For buttons without span wrapper */
2055.btn-primary:not(:has(span)) {
2056 position: relative;
2057 z-index: 1;
2058}
2059
2060.btn-secondary {
2061 background: transparent;
2062 color: var(--color-ink);
2063 border: 1px solid var(--color-ink);
2064}
2065
2066.btn-secondary:hover {
2067 background: var(--color-ink);
2068 color: var(--color-paper);
2069}
2070
2071/* Focus styles for all buttons */
2072.btn:focus-visible {
2073 outline: 2px solid var(--color-accent);
2074 outline-offset: 2px;
2075}
2076
2077.btn-primary:focus-visible {
2078 outline-color: var(--color-paper);
2079 box-shadow: 0 0 0 4px var(--color-accent);
2080}
2081
2082.btn-secondary:focus-visible {
2083 outline-color: var(--color-accent);
2084}
2085
2086/* ============================================
2087 ANIMATIONS
2088 ============================================ */
2089
2090@keyframes revealUp {
2091 to {
2092 opacity: 1;
2093 transform: translateY(0);
2094 }
2095}
2096
2097@keyframes fadeIn {
2098 to {
2099 opacity: 1;
2100 }
2101}
2102
2103@keyframes float {
2104 0%, 100% { transform: translateX(-50%) translateY(0); }
2105 50% { transform: translateX(-50%) translateY(-8px); }
2106}
2107
2108@keyframes bounce {
2109 0%, 100% { transform: translateY(0); }
2110 50% { transform: translateY(4px); }
2111}
2112
2113/* Reveal animation for scroll */
2114[data-reveal] {
2115 opacity: 0;
2116 transform: translateY(30px);
2117 transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
2118}
2119
2120[data-reveal].revealed {
2121 opacity: 1;
2122 transform: translateY(0);
2123}
2124
2125/* Staggered reveals */
2126[data-reveal]:nth-child(1) { transition-delay: 0s; }
2127[data-reveal]:nth-child(2) { transition-delay: 0.1s; }
2128[data-reveal]:nth-child(3) { transition-delay: 0.2s; }
2129[data-reveal]:nth-child(4) { transition-delay: 0.3s; }
2130
2131/* ============================================
2132 REDUCED MOTION (Accessibility)
2133 ============================================ */
2134
2135@media (prefers-reduced-motion: reduce) {
2136 *,
2137 *::before,
2138 *::after {
2139 animation-duration: 0.01ms !important;
2140 animation-iteration-count: 1 !important;
2141 transition-duration: 0.01ms !important;
2142 scroll-behavior: auto !important;
2143 }
2144
2145 /* Allow smooth scrolling to remain for anchor links only if user explicitly triggers */
2146 html {
2147 scroll-behavior: auto;
2148 }
2149
2150 /* Disable hero canvas animation */
2151 .hero-canvas {
2152 display: none;
2153 }
2154
2155 /* Disable scroll indicator animation */
2156 .hero-scroll-indicator {
2157 animation: none;
2158 opacity: 1;
2159 }
2160
2161 /* Disable reveal animations - show content immediately */
2162 [data-reveal] {
2163 opacity: 1;
2164 transform: none;
2165 }
2166
2167 /* Disable gallery frame transitions */
2168 .gallery-frame {
2169 opacity: 1;
2170 transform: none;
2171 }
2172}
2173
2174/* ============================================
2175 ERROR STATES
2176 ============================================ */
2177
2178.load-error {
2179 display: flex;
2180 flex-direction: column;
2181 align-items: center;
2182 justify-content: center;
2183 text-align: center;
2184 padding: var(--spacing-2xl) var(--spacing-lg);
2185 gap: var(--spacing-md);
2186 background: var(--color-cream);
2187 border: 1px solid var(--color-mist);
2188 border-radius: 8px;
2189}
2190
2191.load-error-icon {
2192 font-size: 2.5rem;
2193 color: var(--color-accent);
2194}
2195
2196.load-error-title {
2197 font-family: var(--font-display);
2198 font-size: 1.5rem;
2199 font-weight: 400;
2200 color: var(--color-ink);
2201 margin: 0;
2202}
2203
2204.load-error-text {
2205 font-size: 1rem;
2206 color: var(--color-ash);
2207 max-width: 40ch;
2208 line-height: 1.5;
2209}
2210
2211.load-error-retry {
2212 margin-top: var(--spacing-sm);
2213}
2214
2215/* ============================================
2216 BIAS TAGS (Compact Problem Section)
2217 ============================================ */
2218
2219.bias-tags {
2220 display: flex;
2221 flex-direction: column;
2222 align-items: center;
2223 gap: var(--spacing-sm);
2224 margin-top: var(--spacing-lg);
2225}
2226
2227.bias-tags-label {
2228 font-family: var(--font-mono);
2229 font-size: 0.6875rem;
2230 font-weight: 500;
2231 letter-spacing: 0.1em;
2232 text-transform: uppercase;
2233 color: var(--color-ash);
2234}
2235
2236.bias-tags-list {
2237 display: flex;
2238 flex-wrap: wrap;
2239 justify-content: center;
2240 gap: var(--spacing-xs);
2241}
2242
2243.bias-tag {
2244 font-size: 0.75rem;
2245 font-weight: 500;
2246 padding: 6px 12px;
2247 background: var(--color-cream);
2248 border: 1px solid var(--color-mist);
2249 color: var(--color-charcoal);
2250 transition: all var(--duration-fast) var(--ease-out);
2251}
2252
2253.bias-tag:hover {
2254 border-color: var(--color-accent);
2255 color: var(--color-accent);
2256}
2257
2258/* ============================================
2259 ANTIDOTE SECTION
2260 ============================================ */
2261
2262.antidote-section {
2263 padding: var(--spacing-2xl) 0;
2264 border-top: 1px solid var(--color-mist);
2265}
2266
2267/* Antidote row: patterns + gallery side by side */
2268.antidote-row {
2269 display: flex;
2270 gap: var(--spacing-xl);
2271 align-items: stretch;
2272 margin-bottom: var(--spacing-xl);
2273}
2274
2275.antidote-row .patterns-tabbed {
2276 flex: 1;
2277 min-width: 0;
2278 margin-bottom: 0;
2279}
2280
2281/* Gallery of Shame — 3D card stack */
2282.gallery-stack-container {
2283 flex: 0 0 clamp(320px, 34vw, 420px);
2284 display: flex;
2285 flex-direction: column;
2286 gap: var(--spacing-xs);
2287 position: relative;
2288}
2289
2290
2291/* Header: ← Gallery of Shame → */
2292.gallery-stack-header {
2293 display: flex;
2294 align-items: center;
2295 gap: var(--spacing-xs);
2296 white-space: nowrap;
2297}
2298
2299.gallery-stack-title {
2300 font-family: var(--font-display);
2301 font-size: 1rem;
2302 font-weight: 600;
2303 color: var(--color-ink);
2304 flex: 1;
2305}
2306
2307.gallery-stack-btn {
2308 width: 24px;
2309 height: 24px;
2310 border-radius: 50%;
2311 border: 1px solid var(--color-mist);
2312 background: white;
2313 cursor: pointer;
2314 display: flex;
2315 align-items: center;
2316 justify-content: center;
2317 font-size: 0.6875rem;
2318 color: var(--color-charcoal);
2319 flex-shrink: 0;
2320 transition: border-color var(--duration-fast), background var(--duration-fast);
2321 position: relative;
2322}
2323
2324/* Invisible 44px touch target */
2325.gallery-stack-btn::after {
2326 content: '';
2327 position: absolute;
2328 inset: -10px;
2329}
2330
2331.gallery-stack-btn:hover {
2332 border-color: var(--color-charcoal);
2333}
2334
2335/* Card stack — stacked deck offset to bottom-right */
2336.gallery-stack {
2337 position: relative;
2338 width: calc(100% - 20px);
2339 aspect-ratio: 3 / 2;
2340 margin-bottom: 20px;
2341}
2342
2343.gallery-stack-card {
2344 position: absolute;
2345 top: 0;
2346 left: 0;
2347 width: 100%;
2348 height: 100%;
2349 display: flex;
2350 flex-direction: column;
2351 border-radius: 8px;
2352 overflow: hidden;
2353 border: 1px solid var(--color-mist);
2354 text-decoration: none;
2355 background: white;
2356 transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, box-shadow 0.35s ease;
2357 will-change: transform, opacity;
2358}
2359
2360.gallery-stack-card img {
2361 flex: 1;
2362 min-height: 0;
2363 width: 100%;
2364 object-fit: cover;
2365 object-position: top left;
2366}
2367
2368.gallery-stack-label {
2369 padding: 6px 10px;
2370 font-size: 0.75rem;
2371 font-weight: 600;
2372 color: var(--color-charcoal);
2373 flex-shrink: 0;
2374}
2375
2376/* Stack depth: cards peek behind at bottom-right */
2377.gallery-stack-card[data-offset="0"] {
2378 z-index: 3;
2379 transform: translate(0, 0);
2380 opacity: 1;
2381 box-shadow: 0 2px 12px oklch(0.2 0 0 / 0.1);
2382}
2383
2384.gallery-stack-card[data-offset="1"] {
2385 z-index: 2;
2386 transform: translate(8px, 8px);
2387 opacity: 1;
2388 box-shadow: 0 1px 6px oklch(0.2 0 0 / 0.08);
2389 pointer-events: none;
2390}
2391
2392.gallery-stack-card[data-offset="2"] {
2393 z-index: 1;
2394 transform: translate(16px, 16px);
2395 opacity: 1;
2396 box-shadow: 0 1px 4px oklch(0.2 0 0 / 0.06);
2397 pointer-events: none;
2398}
2399
2400.gallery-stack-card:not([data-offset="0"]):not([data-offset="1"]):not([data-offset="2"]) {
2401 z-index: 0;
2402 transform: translate(20px, 20px);
2403 opacity: 0;
2404 pointer-events: none;
2405}
2406
2407.gallery-stack-link {
2408 font-size: 0.75rem;
2409 font-weight: 500;
2410 color: var(--color-accent);
2411 text-decoration: none;
2412 text-align: center;
2413}
2414
2415.gallery-stack-link:hover {
2416 text-decoration: underline;
2417}
2418
2419@media (max-width: 900px) {
2420 .antidote-row {
2421 flex-direction: column;
2422 }
2423
2424 .gallery-stack-container {
2425 flex: none;
2426 width: 100%;
2427 max-width: 360px;
2428 }
2429
2430}
2431
2432/* ---- Pattern tabs ---- */
2433.patterns-tabbed {
2434 margin-bottom: var(--spacing-xl);
2435 background: white;
2436 border-radius: 8px;
2437 padding: var(--spacing-lg);
2438}
2439
2440.patterns-tabs {
2441 display: flex;
2442 flex-wrap: wrap;
2443 gap: 6px;
2444 margin-bottom: var(--spacing-md);
2445}
2446
2447@media (max-width: 768px) {
2448 .patterns-tabs {
2449 flex-wrap: nowrap;
2450 overflow-x: auto;
2451 scrollbar-width: none;
2452 -webkit-overflow-scrolling: touch;
2453 margin-left: calc(-1 * var(--spacing-lg));
2454 margin-right: calc(-1 * var(--spacing-lg));
2455 padding-left: var(--spacing-lg);
2456 padding-right: var(--spacing-lg);
2457 }
2458
2459 .patterns-tabs::-webkit-scrollbar {
2460 display: none;
2461 }
2462}
2463
2464.patterns-tab {
2465 font-family: var(--font-body);
2466 font-size: 0.75rem;
2467 font-weight: 500;
2468 color: var(--color-charcoal);
2469 background: none;
2470 border: none;
2471 border-radius: 100px;
2472 padding: 6px 12px;
2473 cursor: pointer;
2474 white-space: nowrap;
2475 transition: background 0.2s ease, color 0.2s ease;
2476}
2477
2478.patterns-tab:hover {
2479 background: var(--color-mist);
2480}
2481
2482.patterns-tab.is-active {
2483 background: var(--color-ink);
2484 color: var(--color-paper);
2485}
2486
2487.patterns-content {
2488 display: none;
2489}
2490
2491.patterns-content.is-active {
2492 display: flex;
2493 flex-direction: column;
2494 gap: var(--spacing-md);
2495}
2496
2497.patterns-col ul {
2498 list-style: none;
2499 padding: 0;
2500 margin: 0;
2501 display: flex;
2502 flex-direction: column;
2503 gap: 6px;
2504}
2505
2506.patterns-col li {
2507 font-size: 0.8125rem;
2508 line-height: 1.55;
2509 padding-left: var(--spacing-sm);
2510 position: relative;
2511 color: var(--color-charcoal);
2512 overflow-wrap: break-word;
2513 word-break: break-word;
2514}
2515
2516.patterns-col--dont li::before {
2517 content: '\00d7';
2518 position: absolute;
2519 left: 0;
2520 color: var(--color-accent);
2521 font-weight: 600;
2522}
2523
2524.patterns-col--do li::before {
2525 content: '\2713';
2526 position: absolute;
2527 left: 0;
2528 color: var(--color-success, #22c55e);
2529 font-weight: 600;
2530}
2531
2532
2533/* Detection callout — flat editorial CTA, no card chrome.
2534 Image thumbnail on the left, NEW eyebrow + CTA stacked on the right.
2535 The whole element is a clickable anchor. Hover shifts color, no
2536 transform or shadow theatrics. */
2537.detection-callout {
2538 display: flex;
2539 align-items: center;
2540 gap: var(--spacing-md);
2541 text-decoration: none;
2542 color: inherit;
2543 padding: var(--spacing-sm) 0;
2544 border-top: 1px solid var(--color-mist);
2545}
2546
2547.detection-callout-image {
2548 display: block;
2549 width: 132px;
2550 height: 112px;
2551 flex-shrink: 0;
2552 object-fit: cover;
2553 object-position: top left;
2554 border: 1px solid var(--color-mist);
2555 border-radius: 6px;
2556 transition: border-color 0.2s ease;
2557}
2558
2559.detection-callout:hover .detection-callout-image {
2560 border-color: var(--color-accent);
2561}
2562
2563.detection-callout-inner {
2564 flex: 1;
2565 display: flex;
2566 flex-direction: column;
2567 align-items: flex-start;
2568 justify-content: center;
2569 gap: 6px;
2570}
2571
2572.detection-eyebrow {
2573 font-family: var(--font-mono);
2574 font-size: 0.6875rem;
2575 font-weight: 600;
2576 text-transform: uppercase;
2577 letter-spacing: 0.08em;
2578 color: var(--color-accent);
2579}
2580
2581.detection-callout-title {
2582 font-family: var(--font-display);
2583 font-size: 1.25rem;
2584 font-weight: 600;
2585 color: var(--color-ink);
2586 letter-spacing: -0.01em;
2587 line-height: 1.15;
2588}
2589
2590.detection-callout:hover .detection-callout-title {
2591 color: var(--color-accent);
2592}
2593
2594.detection-desc {
2595 flex: 1;
2596 font-size: 0.8125rem;
2597 line-height: 1.55;
2598 color: var(--color-ash);
2599 min-width: 200px;
2600}
2601
2602.detection-desc code {
2603 font-family: var(--font-mono);
2604 font-size: 0.8125rem;
2605 color: var(--color-charcoal);
2606}
2607
2608.detection-cmd {
2609 flex-shrink: 0;
2610 font-family: var(--font-body);
2611 font-size: 0.875rem;
2612 font-weight: 600;
2613 color: var(--color-ink);
2614 white-space: nowrap;
2615 transition: color 0.15s ease;
2616}
2617
2618.detection-callout:hover .detection-cmd {
2619 color: var(--color-accent);
2620}
2621
2622/* Antidote footer */
2623.antidote-footer {
2624 text-align: center;
2625}
2626
2627.antidote-suggest-link {
2628 font-size: 0.8125rem;
2629 color: var(--color-ash);
2630 text-decoration: none;
2631}
2632
2633.antidote-suggest-link:hover {
2634 color: var(--color-accent);
2635 text-decoration: underline;
2636}
2637
2638/* ============================================
2639 SOLUTION SECTION ENHANCEMENTS
2640 ============================================ */
2641
2642/* Main skill item styling */
2643.pillar-item--main {
2644 background: var(--color-accent-dim);
2645 border: 1px solid var(--color-accent);
2646}
2647
2648.pillar-item--main .pillar-item-name {
2649 font-size: 1.125rem;
2650 font-weight: 600;
2651 color: var(--color-accent);
2652}
2653
2654.pillar-item--ref {
2655 background: transparent;
2656 padding: var(--spacing-xs) var(--spacing-sm);
2657}
2658
2659.pillar-item-label {
2660 font-size: 0.75rem;
2661 font-weight: 500;
2662 text-transform: uppercase;
2663 letter-spacing: 0.05em;
2664 color: var(--color-ash);
2665}
2666
2667/* Reference domain tags */
2668.pillar-refs {
2669 display: flex;
2670 flex-wrap: wrap;
2671 gap: var(--spacing-xs);
2672 padding: 0 var(--spacing-sm);
2673}
2674
2675.pillar-ref {
2676 font-size: 0.6875rem;
2677 font-weight: 500;
2678 text-transform: uppercase;
2679 letter-spacing: 0.03em;
2680 padding: 4px 10px;
2681 background: var(--color-paper);
2682 color: var(--color-ash);
2683 border: 1px solid var(--color-mist);
2684 border-radius: 3px;
2685 transition: all var(--duration-fast) var(--ease-out);
2686}
2687
2688.pillar-ref:hover {
2689 border-color: var(--color-accent);
2690 color: var(--color-accent);
2691}
2692
2693/* Command groups */
2694.pillar-command-group {
2695 display: flex;
2696 flex-wrap: wrap;
2697 align-items: center;
2698 gap: var(--spacing-xs);
2699 padding: var(--spacing-sm);
2700 background: var(--color-paper);
2701 border-radius: 4px;
2702}
2703
2704.pillar-group-label {
2705 font-size: 0.6875rem;
2706 font-weight: 600;
2707 text-transform: uppercase;
2708 letter-spacing: 0.05em;
2709 color: var(--color-ash);
2710 width: 100%;
2711 margin-bottom: 4px;
2712}
2713
2714.pillar-command-group .pillar-item-code {
2715 font-size: 0.8125rem;
2716 padding: 4px 8px;
2717 background: var(--color-accent-dim);
2718 border-radius: 3px;
2719}
2720
2721/* ============================================
2722 PLATFORMS SECTION (alias for downloads)
2723 ============================================ */
2724
2725.platforms-section {
2726 padding: var(--spacing-2xl) 0;
2727 border-top: 1px solid var(--color-mist);
2728}
2729
2730@media (min-width: 1100px) {
2731 .platforms-section {
2732 border-top: none;
2733 }
2734}
2735
2736.platforms-section .section-subtitle {
2737 max-width: 60ch;
2738}
2739
2740/* Two-path install layout */
2741/* Row 1: full-width primary install card with internal 2-column split */
2742.install-row-primary {
2743 display: grid;
2744 grid-template-columns: 1.1fr 0.9fr;
2745 gap: var(--spacing-xl);
2746 align-items: start;
2747 margin: 0 0 var(--spacing-xl);
2748 background: white;
2749 border-radius: 16px;
2750 padding: var(--spacing-lg);
2751 min-width: 0;
2752}
2753
2754.install-primary-main {
2755 display: flex;
2756 flex-direction: column;
2757 min-width: 0;
2758}
2759
2760.install-primary-alts {
2761 display: flex;
2762 flex-direction: column;
2763 gap: var(--spacing-lg);
2764 min-width: 0;
2765 padding-left: var(--spacing-xl);
2766 border-left: 1px solid var(--color-mist);
2767}
2768
2769.install-alts-label {
2770 display: block;
2771 font-family: var(--font-mono);
2772 font-size: 0.625rem;
2773 font-weight: 600;
2774 text-transform: uppercase;
2775 letter-spacing: 0.14em;
2776 color: var(--color-ash);
2777}
2778
2779.install-alt-sublabel {
2780 font-family: var(--font-body);
2781 font-size: 0.75rem;
2782 font-weight: 400;
2783 color: var(--color-ash);
2784 text-transform: none;
2785 letter-spacing: 0;
2786 margin-left: 4px;
2787}
2788
2789/* Compact zip download links — replaces the old big black download button.
2790 Two equal-weight options stacked vertically, each is its own affordance. */
2791.install-zip-links {
2792 display: flex;
2793 flex-direction: column;
2794 gap: 6px;
2795 margin-top: var(--spacing-xs);
2796}
2797
2798.install-zip-link {
2799 display: flex;
2800 align-items: center;
2801 gap: var(--spacing-sm);
2802 padding: 8px 12px;
2803 font-family: var(--font-body);
2804 font-size: 0.8125rem;
2805 color: var(--color-charcoal);
2806 background: transparent;
2807 border: 1px solid var(--color-mist);
2808 border-radius: 6px;
2809 cursor: pointer;
2810 text-align: left;
2811 transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
2812}
2813
2814.install-zip-link:hover {
2815 border-color: var(--color-accent);
2816 color: var(--color-accent);
2817}
2818
2819.install-zip-link svg {
2820 flex-shrink: 0;
2821 color: var(--color-ash);
2822}
2823
2824.install-zip-link:hover svg {
2825 color: var(--color-accent);
2826}
2827
2828.install-zip-link-name {
2829 font-weight: 600;
2830 color: var(--color-ink);
2831 white-space: nowrap;
2832}
2833
2834.install-zip-link:hover .install-zip-link-name {
2835 color: var(--color-accent);
2836}
2837
2838.install-zip-link-examples {
2839 display: flex;
2840 flex-wrap: nowrap;
2841 gap: 4px;
2842 margin-left: auto;
2843}
2844
2845.install-alt-method .install-zip-link-examples code {
2846 font-family: var(--font-mono);
2847 font-size: 0.6875rem;
2848 background: var(--color-accent-dim);
2849 color: var(--color-accent);
2850 padding: 2px 6px;
2851 border-radius: 3px;
2852 white-space: nowrap;
2853}
2854
2855.install-path {
2856 display: flex;
2857 flex-direction: column;
2858 min-width: 0;
2859}
2860
2861.install-path-primary {
2862 background: white;
2863 border-radius: 16px;
2864 padding: var(--spacing-lg);
2865}
2866
2867/* Steps 2-4: vertical accordion. Native <details name="install-steps">
2868 gives mutual exclusion (opening one closes the others). Items are
2869 separated by hairlines, not card chrome. */
2870.install-accordion {
2871 display: flex;
2872 flex-direction: column;
2873 margin: 0 0 var(--spacing-xl);
2874}
2875
2876.install-step {
2877 border-top: 1px solid var(--color-mist);
2878}
2879
2880.install-step:last-child {
2881 border-bottom: 1px solid var(--color-mist);
2882}
2883
2884.install-step-summary {
2885 display: flex;
2886 align-items: center;
2887 gap: var(--spacing-md);
2888 padding: var(--spacing-md) var(--spacing-xs);
2889 cursor: pointer;
2890 list-style: none;
2891 transition: background var(--duration-fast) var(--ease-out);
2892}
2893
2894.install-step-summary::-webkit-details-marker {
2895 display: none;
2896}
2897
2898.install-step-summary:hover {
2899 background: var(--color-cream);
2900}
2901
2902.install-step-summary h3 {
2903 flex: 1;
2904 margin: 0;
2905}
2906
2907.install-step-arrow {
2908 flex-shrink: 0;
2909 color: var(--color-ash);
2910 transition: transform var(--duration-base) var(--ease-out);
2911}
2912
2913.install-step[open] .install-step-arrow {
2914 transform: rotate(90deg);
2915}
2916
2917.install-step-body {
2918 padding: 0 var(--spacing-xs) var(--spacing-md);
2919 display: flex;
2920 flex-direction: column;
2921 max-width: 56ch;
2922}
2923
2924.install-step-body .install-path-desc {
2925 margin-top: 0;
2926}
2927
2928.install-step-status {
2929 font-size: 0.8125rem;
2930 color: var(--color-ash);
2931 margin: 0 0 var(--spacing-sm);
2932 font-style: italic;
2933}
2934
2935.install-path-title {
2936 display: flex;
2937 align-items: center;
2938 flex-wrap: wrap;
2939 gap: 10px;
2940 font-family: var(--font-display);
2941 font-size: 1.5rem;
2942 font-weight: 600;
2943 margin: 0 0 var(--spacing-sm);
2944 line-height: 1.2;
2945}
2946
2947/* titles unified - no size override for step 3 */
2948
2949.install-path-badge {
2950 font-family: var(--font-mono);
2951 font-size: 0.5rem;
2952 font-weight: 600;
2953 text-transform: uppercase;
2954 letter-spacing: 0.08em;
2955 color: var(--color-accent);
2956 border: 1px solid var(--color-accent);
2957 border-radius: 3px;
2958 padding: 2px 6px;
2959 vertical-align: middle;
2960 margin-left: 6px;
2961 position: relative;
2962 top: -2px;
2963}
2964
2965.install-path-badge-muted {
2966 color: var(--color-ash);
2967 border-color: var(--color-mist);
2968}
2969
2970.install-path-desc {
2971 font-size: 0.9375rem;
2972 line-height: 1.6;
2973 color: var(--color-charcoal);
2974 margin: 0 0 var(--spacing-md);
2975}
2976
2977.terminal-header-license {
2978 margin-left: auto;
2979 font-size: 0.6875rem;
2980 color: oklch(65% 0.01 350);
2981 letter-spacing: 0.01em;
2982}
2983
2984.terminal-header-license a {
2985 color: inherit;
2986 text-decoration: underline;
2987 text-decoration-color: oklch(85% 0.005 350);
2988 text-underline-offset: 2px;
2989}
2990
2991.terminal-header-license a:hover {
2992 color: var(--color-charcoal);
2993}
2994
2995/* removed - unified font sizes across columns */
2996
2997.install-path-terminal {
2998 margin-bottom: var(--spacing-sm);
2999}
3000
3001.install-path-terminal .glass-terminal {
3002 height: auto;
3003}
3004
3005.install-path-terminal .terminal-body {
3006 padding: 0;
3007}
3008
3009.install-path-next {
3010 font-size: 0.8125rem;
3011 color: var(--color-charcoal);
3012 line-height: 1.5;
3013 margin-top: auto;
3014 padding-top: var(--spacing-md);
3015}
3016
3017.install-path-next code {
3018 font-family: var(--font-mono);
3019 font-size: 0.8125rem;
3020 font-weight: 600;
3021 color: var(--color-ink);
3022}
3023
3024.install-path-slash {
3025 color: var(--color-accent);
3026}
3027
3028.install-path-subcommands {
3029 display: flex;
3030 flex-direction: column;
3031 gap: 6px;
3032 margin-top: var(--spacing-sm);
3033}
3034
3035.install-path-subcommand {
3036 font-size: 0.75rem;
3037 color: var(--color-charcoal);
3038 line-height: 1.4;
3039}
3040
3041.install-path-subcommand code {
3042 font-family: var(--font-mono);
3043 font-size: 0.6875rem;
3044 font-weight: 600;
3045 color: var(--color-ink);
3046 background: var(--color-mist);
3047 padding: 2px 6px;
3048 border-radius: 3px;
3049 margin-right: 4px;
3050}
3051
3052.install-path-link {
3053 margin-top: auto;
3054 padding-top: var(--spacing-md);
3055 font-size: 0.8125rem;
3056}
3057
3058.install-path-link a {
3059 color: var(--color-accent);
3060 text-decoration: none;
3061}
3062
3063.install-path-link a:hover {
3064 text-decoration: underline;
3065}
3066
3067/* Lightweight terminal block — used in row 2 (CLI) where the heavy
3068 skeuomorphic glass-terminal would be visually too much. Just a thin
3069 bordered code line with a copy button and an optional note below. */
3070.install-cmd-block {
3071 display: flex;
3072 flex-direction: column;
3073 gap: var(--spacing-xs);
3074 margin-bottom: var(--spacing-sm);
3075}
3076
3077.install-cmd-line {
3078 display: flex;
3079 align-items: center;
3080 gap: var(--spacing-sm);
3081 padding: 10px 14px;
3082 background: var(--color-cream);
3083 border: 1px solid var(--color-mist);
3084 border-radius: 6px;
3085 min-width: 0;
3086}
3087
3088.install-cmd-line .terminal-prompt {
3089 flex-shrink: 0;
3090 color: var(--color-accent);
3091 font-family: var(--font-mono);
3092 font-size: 0.8125rem;
3093}
3094
3095.install-cmd-line code {
3096 flex: 1;
3097 font-family: var(--font-mono);
3098 font-size: 0.8125rem;
3099 color: var(--color-ink);
3100 background: transparent;
3101 padding: 0;
3102 white-space: nowrap;
3103 overflow: hidden;
3104 text-overflow: ellipsis;
3105}
3106
3107.install-cmd-line .copy-btn {
3108 flex-shrink: 0;
3109}
3110
3111.install-cmd-note {
3112 font-size: 0.75rem;
3113 color: var(--color-ash);
3114 line-height: 1.5;
3115}
3116
3117.install-cmd-note code {
3118 font-family: var(--font-mono);
3119 font-size: 0.6875rem;
3120 background: var(--color-mist);
3121 padding: 2px 5px;
3122 border-radius: 3px;
3123 color: var(--color-ink);
3124}
3125
3126
3127/* Better together callout */
3128.install-together {
3129 max-width: 960px;
3130 margin: 0 0 var(--spacing-xl);
3131 border: 1px solid var(--color-mist);
3132 border-radius: 8px;
3133 padding: var(--spacing-sm) var(--spacing-md);
3134}
3135
3136.install-together-inner {
3137 display: flex;
3138 align-items: center;
3139 gap: var(--spacing-md);
3140}
3141
3142.install-together-badge {
3143 font-family: var(--font-mono);
3144 font-size: 0.625rem;
3145 font-weight: 600;
3146 text-transform: uppercase;
3147 letter-spacing: 0.05em;
3148 color: var(--color-accent);
3149 border: 1px solid var(--color-accent);
3150 padding: 2px 10px;
3151 border-radius: 99px;
3152 flex-shrink: 0;
3153 white-space: nowrap;
3154}
3155
3156.install-together-text {
3157 font-size: 0.8125rem;
3158 line-height: 1.55;
3159 color: var(--color-ash);
3160 margin: 0;
3161}
3162
3163/* Inline step numbers — sit to the left of the title text inside each h3.
3164 The h3 uses flex with align-items: center so the step is centered with
3165 the text without needing vertical-align fiddling. Margin/gap is handled
3166 by the parent flex's gap. */
3167.install-path-step {
3168 display: inline-flex;
3169 align-items: center;
3170 justify-content: center;
3171 width: 22px;
3172 height: 22px;
3173 border-radius: 50%;
3174 border: 1.5px solid var(--color-accent);
3175 color: var(--color-accent);
3176 font-family: var(--font-mono);
3177 font-size: 0.625rem;
3178 font-weight: 700;
3179 line-height: 1;
3180 flex-shrink: 0;
3181}
3182
3183/* Stay updated (third column) */
3184.install-updated-subscribe {
3185 display: grid;
3186 grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
3187 gap: var(--spacing-sm);
3188 margin-bottom: var(--spacing-md);
3189 align-items: stretch;
3190}
3191
3192.install-updated-substack {
3193 display: block;
3194 width: 100%;
3195 min-width: 0;
3196 height: 130px;
3197 border: 1px solid var(--color-mist);
3198 border-radius: 8px;
3199 background: var(--color-paper);
3200}
3201
3202.install-updated-x {
3203 display: flex;
3204 flex-direction: column;
3205 align-items: flex-start;
3206 justify-content: space-between;
3207 gap: var(--spacing-xs);
3208 height: 130px;
3209 padding: var(--spacing-sm) var(--spacing-md);
3210 border: 1px solid var(--color-mist);
3211 border-radius: 8px;
3212 background: var(--color-paper);
3213 color: var(--color-ink);
3214 text-decoration: none;
3215 transition: border-color var(--duration-fast) var(--ease-out),
3216 background var(--duration-fast) var(--ease-out),
3217 transform var(--duration-fast) var(--ease-out);
3218}
3219
3220.install-updated-x:hover {
3221 border-color: var(--color-ink);
3222 background: var(--color-cream);
3223}
3224
3225.install-updated-x-icon {
3226 color: var(--color-ink);
3227 flex-shrink: 0;
3228}
3229
3230.install-updated-x-label {
3231 font-size: 0.6875rem;
3232 font-weight: 600;
3233 text-transform: uppercase;
3234 letter-spacing: 0.08em;
3235 color: var(--color-ash);
3236 font-family: var(--font-mono);
3237}
3238
3239.install-updated-x-handle {
3240 font-size: 1rem;
3241 font-weight: 600;
3242 color: var(--color-ink);
3243 letter-spacing: -0.01em;
3244}
3245
3246.install-updated-x:hover .install-updated-x-handle {
3247 color: var(--color-accent);
3248}
3249
3250.install-updated-refs {
3251 margin-top: auto;
3252 padding-top: var(--spacing-md);
3253 border-top: 1px solid var(--color-mist);
3254}
3255
3256.install-updated-refs-label {
3257 display: block;
3258 font-family: var(--font-mono);
3259 font-size: 0.5625rem;
3260 font-weight: 600;
3261 text-transform: uppercase;
3262 letter-spacing: 0.1em;
3263 color: var(--color-ash);
3264 margin-bottom: 8px;
3265}
3266
3267.install-updated-ref {
3268 display: block;
3269 font-size: 0.8125rem;
3270 color: var(--color-charcoal);
3271 text-decoration: none;
3272 margin-bottom: 6px;
3273 transition: color var(--duration-fast) var(--ease-out);
3274}
3275
3276a.install-updated-ref:hover {
3277 color: var(--color-accent);
3278}
3279
3280.install-updated-ref-terminal {
3281 display: flex;
3282 align-items: center;
3283 gap: var(--spacing-xs);
3284 font-family: var(--font-mono);
3285 font-size: 0.75rem;
3286 color: var(--color-charcoal);
3287 background: var(--color-cream);
3288 border: 1px solid var(--color-mist);
3289 border-radius: 6px;
3290 padding: 6px 10px;
3291 margin-top: 8px;
3292}
3293
3294.install-updated-ref-terminal .terminal-prompt {
3295 color: var(--color-ash);
3296 font-size: 0.75rem;
3297}
3298
3299.install-updated-ref-terminal code {
3300 font-family: inherit;
3301 font-size: inherit;
3302 background: none;
3303 padding: 0;
3304 color: var(--color-ink);
3305}
3306
3307@media (max-width: 900px) {
3308 .install-row-primary {
3309 grid-template-columns: 1fr;
3310 gap: var(--spacing-lg);
3311 max-width: calc(100vw - var(--spacing-md) * 2);
3312 }
3313
3314 .install-primary-alts {
3315 padding-left: 0;
3316 padding-top: var(--spacing-lg);
3317 border-left: none;
3318 border-top: 1px solid var(--color-mist);
3319 }
3320
3321 .install-path-primary {
3322 margin-bottom: var(--spacing-sm);
3323 padding: var(--spacing-md);
3324 }
3325
3326 .install-path-title {
3327 font-size: 1.25rem;
3328 }
3329
3330 .install-path-desc {
3331 font-size: 0.875rem;
3332 overflow-wrap: break-word;
3333 }
3334
3335 .install-together-inner {
3336 flex-direction: column;
3337 align-items: flex-start;
3338 gap: var(--spacing-xs);
3339 }
3340
3341 .install-updated-subscribe {
3342 grid-template-columns: 1fr;
3343 }
3344
3345 .install-updated-substack {
3346 height: 130px;
3347 }
3348
3349 .install-updated-x {
3350 height: auto;
3351 flex-direction: row;
3352 align-items: center;
3353 justify-content: flex-start;
3354 gap: var(--spacing-sm);
3355 padding: var(--spacing-sm) var(--spacing-md);
3356 }
3357
3358 .install-updated-x-label {
3359 display: none;
3360 }
3361
3362 .install-terminal-cmd code {
3363 font-size: 0.75rem;
3364 white-space: normal;
3365 overflow-wrap: break-word;
3366 }
3367
3368 .install-alt-method {
3369 padding: var(--spacing-sm);
3370 }
3371
3372 .install-alt-method .install-terminal-cmd code {
3373 font-size: 0.6875rem;
3374 white-space: normal;
3375 overflow-wrap: break-word;
3376 }
3377
3378 .install-alt-method .install-terminal-cmd .copy-btn {
3379 display: none;
3380 }
3381
3382 .install-path-terminal .glass-terminal {
3383 box-shadow: none;
3384 }
3385
3386 .install-terminal {
3387 max-width: 100%;
3388 }
3389
3390 .install-alternatives {
3391 max-width: 100%;
3392 }
3393}
3394
3395/* Install terminal (glass terminal style) */
3396.install-terminal {
3397 max-width: 640px;
3398 margin: 0 auto;
3399}
3400
3401.install-terminal .glass-terminal {
3402 height: auto;
3403}
3404
3405.install-terminal .terminal-body {
3406 padding: 0;
3407 display: flex;
3408 flex-direction: column;
3409}
3410
3411.install-terminal-row {
3412 display: flex;
3413 flex-direction: column;
3414 gap: 6px;
3415 padding: var(--spacing-md) var(--spacing-lg);
3416}
3417
3418.install-terminal-label {
3419 font-family: var(--font-mono);
3420 font-size: 0.625rem;
3421 font-weight: 600;
3422 text-transform: uppercase;
3423 letter-spacing: 0.1em;
3424 color: var(--color-ash);
3425}
3426
3427.install-terminal-cmd {
3428 display: flex;
3429 align-items: center;
3430 gap: var(--spacing-sm);
3431}
3432
3433.install-terminal-cmd .terminal-prompt {
3434 flex-shrink: 0;
3435}
3436
3437.install-terminal-cmd code {
3438 flex: 1;
3439 font-family: var(--font-mono);
3440 font-size: 0.9375rem;
3441 color: var(--color-ink);
3442 background: transparent;
3443 padding: 0;
3444 white-space: nowrap;
3445 overflow: hidden;
3446 text-overflow: ellipsis;
3447}
3448
3449.install-terminal-cmd .copy-btn {
3450 flex-shrink: 0;
3451}
3452
3453.install-terminal-cmd .btn {
3454 padding: 0.5rem 1rem;
3455 font-size: 0.8125rem;
3456}
3457
3458.install-terminal-note {
3459 font-size: 0.75rem;
3460 color: var(--color-ash);
3461 padding-left: calc(0.75rem + var(--spacing-sm)); /* align with code after prompt */
3462}
3463
3464.install-terminal-note code {
3465 font-family: var(--font-mono);
3466 font-size: 0.6875rem;
3467 background: var(--color-mist);
3468 padding: 2px 5px;
3469 border-radius: 3px;
3470 color: var(--color-ink);
3471}
3472
3473.install-terminal-divider {
3474 height: 1px;
3475 background: var(--color-mist);
3476 margin: 0;
3477}
3478
3479@media (max-width: 600px) {
3480 .install-terminal-row {
3481 padding: var(--spacing-sm) var(--spacing-md);
3482 }
3483
3484 .install-terminal-cmd code {
3485 font-size: 0.75rem;
3486 }
3487}
3488
3489/* Works with provider badges */
3490.install-providers {
3491 display: flex;
3492 flex-direction: column;
3493 align-items: center;
3494 gap: var(--spacing-sm);
3495 margin-top: var(--spacing-md);
3496}
3497
3498.install-providers-label {
3499 font-size: 0.75rem;
3500 font-weight: 600;
3501 text-transform: uppercase;
3502 letter-spacing: 0.1em;
3503 color: var(--color-ash);
3504}
3505
3506.install-providers-row {
3507 display: flex;
3508 flex-wrap: wrap;
3509 justify-content: center;
3510 gap: var(--spacing-sm);
3511}
3512
3513.install-provider-badge {
3514 display: flex;
3515 align-items: center;
3516 gap: 6px;
3517 font-size: 0.8125rem;
3518 color: var(--color-charcoal);
3519}
3520
3521.install-provider-badge img {
3522 border-radius: 4px;
3523}
3524
3525/* Install alternatives (collapsible) */
3526.install-alternatives {
3527 max-width: 640px;
3528 margin: var(--spacing-sm) auto 0;
3529}
3530
3531.install-alternatives-toggle {
3532 font-family: var(--font-mono);
3533 font-size: 0.75rem;
3534 font-weight: 600;
3535 text-transform: uppercase;
3536 letter-spacing: 0.08em;
3537 color: var(--color-ash);
3538 cursor: pointer;
3539 padding: var(--spacing-sm) 0;
3540 list-style: none;
3541 display: flex;
3542 align-items: center;
3543 gap: 6px;
3544 transition: color var(--duration-fast) var(--ease-out);
3545}
3546
3547.install-alternatives-toggle::-webkit-details-marker {
3548 display: none;
3549}
3550
3551.install-alternatives-toggle::before {
3552 content: '';
3553 display: inline-block;
3554 width: 0;
3555 height: 0;
3556 border-left: 5px solid currentColor;
3557 border-top: 4px solid transparent;
3558 border-bottom: 4px solid transparent;
3559 transition: transform var(--duration-fast) var(--ease-out);
3560}
3561
3562.install-alternatives[open] .install-alternatives-toggle::before {
3563 transform: rotate(90deg);
3564}
3565
3566.install-alternatives-toggle:hover {
3567 color: var(--color-charcoal);
3568}
3569
3570.install-alternatives-content {
3571 animation: altFadeIn 0.2s var(--ease-out);
3572}
3573
3574@keyframes altFadeIn {
3575 from { opacity: 0; transform: translateY(-4px); }
3576 to { opacity: 1; transform: translateY(0); }
3577}
3578
3579.install-alt-method {
3580 padding: var(--spacing-md) var(--spacing-lg);
3581}
3582
3583.install-alt-label {
3584 display: block;
3585 font-family: var(--font-mono);
3586 font-size: 0.625rem;
3587 font-weight: 600;
3588 text-transform: uppercase;
3589 letter-spacing: 0.1em;
3590 color: var(--color-ash);
3591 margin-bottom: 6px;
3592}
3593
3594.install-alt-method .install-terminal-cmd {
3595 display: flex;
3596 align-items: center;
3597 gap: var(--spacing-sm);
3598}
3599
3600.install-alt-method .terminal-prompt {
3601 color: var(--color-accent);
3602 font-family: var(--font-mono);
3603 font-weight: bold;
3604 user-select: none;
3605}
3606
3607.install-alt-method code {
3608 font-family: var(--font-mono);
3609 font-size: 0.875rem;
3610 color: var(--color-ink);
3611}
3612
3613.install-alt-note {
3614 display: block;
3615 font-size: 0.75rem;
3616 color: var(--color-ash);
3617 margin-top: 4px;
3618}
3619
3620.install-alt-note code {
3621 font-family: var(--font-mono);
3622 font-size: 0.6875rem;
3623 background: var(--color-mist);
3624 padding: 2px 5px;
3625 border-radius: 3px;
3626 color: var(--color-ink);
3627}
3628
3629/* Visually hidden helper (kept for accessibility patterns elsewhere) */
3630.sr-only {
3631 position: absolute;
3632 width: 1px;
3633 height: 1px;
3634 padding: 0;
3635 margin: -1px;
3636 overflow: hidden;
3637 clip: rect(0, 0, 0, 0);
3638 white-space: nowrap;
3639 border: 0;
3640}
3641
3642@media (max-width: 600px) {
3643 .install-alt-method code {
3644 font-size: 0.75rem;
3645 }
3646}
3647
3648/* Tooltips */
3649.has-tooltip {
3650 position: relative;
3651 cursor: default;
3652}
3653
3654.has-tooltip::after {
3655 content: attr(data-tooltip);
3656 position: absolute;
3657 bottom: calc(100% + 8px);
3658 left: 50%;
3659 transform: translateX(-50%);
3660 padding: 6px 10px;
3661 background: var(--color-ink);
3662 color: var(--color-paper);
3663 font-size: 0.6875rem;
3664 line-height: 1.4;
3665 border-radius: 6px;
3666 white-space: nowrap;
3667 pointer-events: none;
3668 opacity: 0;
3669 transition: opacity 0.15s ease;
3670 z-index: 100;
3671}
3672
3673.has-tooltip:hover::after {
3674 opacity: 1;
3675}
3676
3677/* Hero logo icon wrapper */
3678.hero-logo-icon {
3679 display: inline-flex;
3680 align-items: center;
3681}
3682
3683.download-tip {
3684 font-size: 0.8125rem;
3685 color: var(--color-ash);
3686 margin-top: var(--spacing-sm);
3687 text-align: center;
3688}
3689
3690.download-tip a {
3691 color: var(--color-accent);
3692 text-decoration: none;
3693}
3694
3695.download-tip a:hover {
3696 text-decoration: underline;
3697}
3698
3699
3700/* ============================================
3701 CONSULTING SECTION
3702 ============================================ */
3703
3704.consulting-section {
3705 padding: var(--spacing-xl) 0;
3706 border-top: 1px solid var(--color-mist);
3707}
3708
3709.consulting-content {
3710 display: flex;
3711 align-items: center;
3712 justify-content: space-between;
3713 gap: var(--spacing-lg);
3714 flex-wrap: wrap;
3715}
3716
3717.consulting-actions {
3718 display: flex;
3719 gap: var(--spacing-sm);
3720 flex-shrink: 0;
3721}
3722
3723.consulting-text {
3724 flex: 1;
3725 min-width: 280px;
3726}
3727
3728.consulting-title {
3729 font-size: clamp(1.5rem, 4vw, 2rem);
3730 font-weight: 300;
3731 font-style: italic;
3732 margin: 0 0 var(--spacing-sm) 0;
3733}
3734
3735.consulting-desc {
3736 font-size: 1rem;
3737 color: var(--color-charcoal);
3738 line-height: 1.6;
3739 margin: 0;
3740 max-width: 45ch;
3741}
3742
3743@media (max-width: 600px) {
3744 .consulting-content {
3745 flex-direction: column;
3746 align-items: flex-start;
3747 }
3748
3749 .consulting-actions {
3750 flex-direction: column;
3751 width: 100%;
3752 }
3753
3754 .consulting-actions .btn {
3755 width: 100%;
3756 justify-content: center;
3757 }
3758}