aaronrene / overseer-kit public
style.css css
1,544 lines 27.7 KB
Raw
sha256:a78e7e5a8740e03315f325d19edeb3aa1b306b3337d04abbaa9a9e0f3bbeb7a1 docs: MuseHub-first before ISR #74 — staging solidify NEXT Human 2 days ago
1 /* 🆗 Overseer Kit landing — static, no external CDN */
2
3 :root,
4 html[data-theme="dark"] {
5 --bg: #0f1419;
6 --surface: #1a2332;
7 --text: #e7ecf3;
8 --muted: #9aa8bc;
9 --accent: #3d9a6a;
10 --accent-dim: #2a6b4a;
11 --border: #2d3a4d;
12 --badge-dogfood: #2563eb;
13 --badge-reference: #7c3aed;
14 --badge-aspirational: #64748b;
15 --layer-l0: #60a5fa;
16 --layer-l1: #34d399;
17 --layer-l2: #fbbf24;
18 --layer-l3: #a78bfa;
19 --header-bg: #1a2332;
20 --font: system-ui, -apple-system, "Segoe UI", sans-serif;
21 --mono: ui-monospace, "Cascadia Code", "SF Mono", monospace;
22 --max-width: 52rem;
23 --content-gap: 3.5rem;
24 }
25
26 html[data-theme="light"] {
27 --bg: #f4f7fb;
28 --surface: #ffffff;
29 --text: #15202b;
30 --muted: #5a6b7d;
31 --accent: #1f7a4d;
32 --accent-dim: #165c3a;
33 --border: #d5dde8;
34 --badge-dogfood: #1d4ed8;
35 --badge-reference: #6d28d9;
36 --badge-aspirational: #475569;
37 --layer-l0: #2563eb;
38 --layer-l1: #059669;
39 --layer-l2: #b45309;
40 --layer-l3: #7c3aed;
41 --header-bg: #ffffff;
42 }
43
44 *,
45 *::before,
46 *::after {
47 box-sizing: border-box;
48 }
49
50 html {
51 scroll-behavior: smooth;
52 }
53
54 body {
55 margin: 0;
56 font-family: var(--font);
57 font-size: 1.0625rem;
58 line-height: 1.6;
59 color: var(--text);
60 background: var(--bg);
61 }
62
63 a {
64 color: var(--accent);
65 text-decoration-thickness: 1px;
66 text-underline-offset: 2px;
67 }
68
69 a:hover {
70 color: #5cb88a;
71 }
72
73 header.site-header {
74 border-bottom: 1px solid var(--border);
75 background: var(--header-bg);
76 padding: 0.75rem 1.5rem;
77 position: sticky;
78 top: 0;
79 z-index: 10;
80 }
81
82 .theme-toggle {
83 display: inline-flex;
84 align-items: center;
85 justify-content: center;
86 width: 2rem;
87 height: 2rem;
88 margin: 0;
89 padding: 0;
90 border: 1px solid var(--border);
91 border-radius: 999px;
92 background: transparent;
93 color: var(--text);
94 cursor: pointer;
95 font-size: 1rem;
96 line-height: 1;
97 }
98
99 .theme-toggle:hover {
100 border-color: var(--accent);
101 color: var(--accent);
102 }
103
104 .theme-icon-sun {
105 display: none;
106 }
107
108 html[data-theme="light"] .theme-icon-moon {
109 display: none;
110 }
111
112 html[data-theme="light"] .theme-icon-sun {
113 display: inline;
114 }
115
116 html[data-theme="dark"] .theme-icon-moon {
117 display: inline;
118 }
119
120 html[data-theme="dark"] .theme-icon-sun {
121 display: none;
122 }
123
124 .site-header nav {
125 /* Match hero inner width so the mark sits on the left edge of the composition. */
126 max-width: 68rem;
127 margin: 0 auto;
128 display: flex;
129 flex-wrap: wrap;
130 gap: 1.25rem;
131 align-items: center;
132 justify-content: flex-start;
133 }
134
135 .site-header .brand {
136 display: inline-flex;
137 align-items: center;
138 gap: 0.7rem;
139 color: var(--text);
140 text-decoration: none;
141 flex-shrink: 0;
142 }
143
144 .site-header .brand-name {
145 font-weight: 750;
146 font-size: 1.85rem;
147 letter-spacing: -0.02em;
148 line-height: 1.1;
149 white-space: nowrap;
150 }
151
152 .logo-mark {
153 display: inline-flex;
154 align-items: center;
155 justify-content: center;
156 width: 2.85rem;
157 height: 2.85rem;
158 padding: 0;
159 border-radius: 0.55rem;
160 background: #1d4f91;
161 color: #ffffff;
162 font-weight: 800;
163 font-size: 1.55rem;
164 letter-spacing: -0.04em;
165 line-height: 1;
166 }
167
168 .site-header .nav-links {
169 display: flex;
170 flex-wrap: wrap;
171 gap: 1.15rem;
172 font-size: 1.05rem;
173 margin-left: auto;
174 align-items: center;
175 }
176
177 .site-header .nav-links a {
178 text-decoration: none;
179 font-weight: 500;
180 color: var(--muted);
181 }
182
183 .site-header .nav-links a:hover,
184 .site-header .nav-links a[aria-current="page"] {
185 color: var(--text);
186 text-decoration: none;
187 }
188
189 main {
190 max-width: var(--max-width);
191 margin: 0 auto;
192 padding: 2rem 1.5rem 4rem;
193 }
194
195 section {
196 margin-bottom: var(--content-gap);
197 scroll-margin-top: 4rem;
198 }
199
200 h1 {
201 font-size: 2.25rem;
202 line-height: 1.2;
203 margin: 0 0 0.75rem;
204 }
205
206 h2 {
207 font-size: 1.5rem;
208 margin: 0 0 1rem;
209 padding-bottom: 0.5rem;
210 border-bottom: 1px solid var(--border);
211 letter-spacing: -0.02em;
212 }
213
214 h3 {
215 font-size: 1.125rem;
216 margin: 1.5rem 0 0.5rem;
217 }
218
219 .lead {
220 font-size: 1.25rem;
221 color: var(--muted);
222 margin: 0 0 1.5rem;
223 }
224
225 .sublead {
226 color: var(--muted);
227 margin: 0 0 1.5rem;
228 }
229
230 .cta-honesty {
231 color: var(--muted);
232 font-size: 0.875rem;
233 margin: 0.75rem 0 1rem;
234 max-width: 40rem;
235 }
236
237 .tertiary-links {
238 color: var(--muted);
239 font-size: 0.9375rem;
240 margin: 0 0 0.5rem;
241 }
242
243 .bound-honesty {
244 color: var(--muted);
245 font-size: 0.9375rem;
246 margin: 1.25rem 0;
247 }
248
249 .footnote {
250 color: var(--muted);
251 font-size: 0.875rem;
252 }
253
254 .path-card {
255 background: var(--surface);
256 border: 1px solid var(--border);
257 border-radius: 8px;
258 padding: 1.25rem 1.5rem;
259 margin: 1rem 0;
260 }
261
262 .path-card.path-preferred {
263 border-color: var(--accent-dim);
264 box-shadow: inset 3px 0 0 var(--accent);
265 }
266
267 .path-card h3 {
268 margin-top: 0;
269 }
270
271 .path-badge {
272 display: inline-block;
273 font-size: 0.75rem;
274 font-weight: 600;
275 color: var(--accent);
276 text-transform: none;
277 letter-spacing: 0;
278 margin-left: 0.35rem;
279 }
280
281 .diagram-figure {
282 background: transparent;
283 border: none;
284 border-radius: 0;
285 padding: 0;
286 margin: 2rem 0;
287 }
288
289 .diagram-figure img {
290 display: block;
291 max-width: 100%;
292 height: auto;
293 margin: 0.75rem 0 0;
294 border-radius: 8px;
295 border: 1px solid var(--border);
296 background: #f4f7fb;
297 }
298
299 html[data-theme="dark"] .diagram-figure img {
300 background: #e8eef5;
301 border-color: #2d3a4d;
302 box-shadow: 0 0 0 1px rgba(15, 20, 25, 0.35);
303 }
304
305 .diagram-figure figcaption {
306 color: var(--muted);
307 font-size: 0.9375rem;
308 margin: 0 0 0.5rem;
309 max-width: 40rem;
310 }
311
312 .diagram-fallback {
313 color: var(--muted);
314 font-size: 0.875rem;
315 padding-left: 1.25rem;
316 margin: 0.5rem 0 0;
317 }
318
319 @keyframes hero-fade {
320 from { opacity: 0; transform: translateY(0.4rem); }
321 to { opacity: 1; transform: none; }
322 }
323
324 /* Hero is always a dark visual plane so the pipeline art glows in both themes. */
325 #hero.hero {
326 position: relative;
327 width: 100vw;
328 max-width: 100vw;
329 margin: -2rem calc(50% - 50vw) 2.25rem;
330 padding: 2.5rem 1.5rem 2.5rem;
331 overflow: hidden;
332 color: #e7ecf3;
333 background:
334 radial-gradient(900px 420px at 85% 20%, rgba(61, 154, 106, 0.18), transparent 60%),
335 radial-gradient(700px 360px at 10% 80%, rgba(56, 120, 200, 0.22), transparent 55%),
336 linear-gradient(160deg, #0a1018 0%, #121a26 45%, #0d1520 100%);
337 border-bottom: 1px solid rgba(45, 58, 77, 0.9);
338 scroll-margin-top: 4rem;
339 }
340
341 .hero-plane {
342 position: absolute;
343 inset: 0;
344 background:
345 linear-gradient(90deg, rgba(10, 16, 24, 0.92) 0%, rgba(10, 16, 24, 0.55) 42%, rgba(10, 16, 24, 0.15) 70%, transparent 100%);
346 pointer-events: none;
347 }
348
349 .hero-inner {
350 position: relative;
351 z-index: 1;
352 max-width: 68rem;
353 margin: 0 auto;
354 display: grid;
355 grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
356 gap: 2rem;
357 align-items: center;
358 }
359
360 .hero-copy h1 {
361 color: #7ec8ff;
362 font-size: clamp(2.25rem, 4.2vw, 3.15rem);
363 font-weight: 750;
364 letter-spacing: -0.03em;
365 line-height: 1.12;
366 margin: 0 0 0.9rem;
367 animation: hero-fade 0.55s ease-out;
368 }
369
370 .hero-copy .lead {
371 color: #d5dee9;
372 font-size: 1.2rem;
373 font-weight: 500;
374 line-height: 1.4;
375 margin: 0 0 0.85rem;
376 animation: hero-fade 0.7s ease-out 0.05s both;
377 }
378
379 .hero-copy .sublead,
380 .hero-copy .tertiary-links,
381 .hero-copy .hero-foot-links {
382 color: #a8b6c9;
383 }
384
385 .hero-terminal {
386 margin: 1.35rem 0 1.5rem;
387 max-width: 28rem;
388 border-radius: 10px;
389 border: 1px solid rgba(92, 184, 138, 0.35);
390 background: linear-gradient(180deg, #0c121a 0%, #0a1018 100%);
391 box-shadow:
392 0 0 0 1px rgba(126, 200, 255, 0.08),
393 0 18px 40px rgba(0, 0, 0, 0.45);
394 overflow: hidden;
395 animation: hero-fade 0.75s ease-out 0.08s both;
396 }
397
398 .hero-terminal-chrome {
399 display: flex;
400 align-items: center;
401 gap: 0.4rem;
402 padding: 0.55rem 0.75rem;
403 background: rgba(26, 35, 50, 0.95);
404 border-bottom: 1px solid rgba(45, 58, 77, 0.9);
405 }
406
407 .hero-terminal-dot {
408 width: 0.55rem;
409 height: 0.55rem;
410 border-radius: 50%;
411 background: #5c6570;
412 }
413
414 .hero-terminal-dot:nth-child(1) { background: #e85d4c; }
415 .hero-terminal-dot:nth-child(2) { background: #e8a35c; }
416 .hero-terminal-dot:nth-child(3) { background: #5cb88a; }
417
418 .hero-terminal-title {
419 margin-left: 0.5rem;
420 font-family: var(--mono);
421 font-size: 0.7rem;
422 letter-spacing: 0.04em;
423 color: #7a8a9e;
424 text-transform: uppercase;
425 }
426
427 .hero-terminal-body {
428 margin: 0;
429 padding: 0.9rem 1rem 1rem;
430 font-family: var(--mono);
431 font-size: 0.78rem;
432 line-height: 1.55;
433 color: #c5d0de;
434 white-space: pre-wrap;
435 word-break: break-word;
436 }
437
438 .hero-terminal-body .term-prompt { color: #5cb88a; font-weight: 700; }
439 .hero-terminal-body .term-cmd { color: #7ec8ff; }
440 .hero-terminal-body .term-flag { color: #e8a35c; }
441 .hero-terminal-body .term-str { color: #f0c48a; }
442 .hero-terminal-body .term-out { color: #9aa8bc; }
443 .hero-terminal-body .term-ok { color: #5cb88a; font-weight: 700; }
444
445 .term-cursor {
446 display: inline-block;
447 width: 0.55ch;
448 height: 1em;
449 margin-left: 0.1ch;
450 vertical-align: -0.1em;
451 background: #5cb88a;
452 animation: term-blink 1.05s steps(1) infinite;
453 }
454
455 @keyframes term-blink {
456 0%, 49% { opacity: 1; }
457 50%, 100% { opacity: 0; }
458 }
459
460 .hero-foot-links {
461 margin: 0 0 0.65rem;
462 font-size: 0.9375rem;
463 animation: hero-fade 0.8s ease-out 0.12s both;
464 }
465
466 .hero-foot-links a {
467 color: #c5d0de;
468 text-decoration: underline;
469 text-decoration-color: rgba(167, 182, 201, 0.35);
470 }
471
472 .hero-foot-links a:hover {
473 color: #5cb88a;
474 text-decoration-color: #5cb88a;
475 }
476
477 /* Primary install path stays a quiet text link (no hero button), but readable. */
478 .hero-foot-links #cta-download-mac {
479 color: #e7ecf3;
480 font-weight: 600;
481 text-decoration-color: rgba(92, 184, 138, 0.55);
482 }
483
484 .hero-foot-links #cta-download-mac:hover {
485 color: #5cb88a;
486 text-decoration-color: #5cb88a;
487 }
488
489 .hero-foot-sep {
490 margin: 0 0.45rem;
491 color: #5c6570;
492 }
493
494 .hero-copy .tertiary-links {
495 margin: 0;
496 font-size: 0.8125rem;
497 opacity: 0.85;
498 animation: hero-fade 0.85s ease-out 0.16s both;
499 }
500
501 .hero-copy .tertiary-links a {
502 color: #8fa0b5;
503 }
504
505 .hero-copy .tertiary-links a:hover {
506 color: #5cb88a;
507 }
508
509 .hero-visual {
510 margin: 0;
511 animation: hero-fade 0.9s ease-out 0.12s both;
512 }
513
514 .hero-visual img {
515 display: block;
516 width: 100%;
517 height: auto;
518 max-height: min(30rem, 56vh);
519 object-fit: contain;
520 filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
521 }
522
523 @media (max-width: 52rem) {
524 .hero-inner {
525 grid-template-columns: 1fr;
526 }
527
528 .hero-visual {
529 order: -1;
530 }
531
532 .hero-visual img {
533 max-height: 16rem;
534 }
535
536 .hero-terminal {
537 max-width: none;
538 }
539 }
540
541 /* MuseHub deepen band — optional mid-page deepen, not a second hero. */
542 .musehub-band {
543 width: 100%;
544 max-width: none;
545 margin: 0 0 var(--content-gap);
546 padding: 1.75rem 1.5rem;
547 background:
548 linear-gradient(180deg, rgba(110, 160, 243, 0.08), transparent 70%),
549 var(--surface);
550 border: 1px solid var(--border);
551 border-radius: 10px;
552 }
553
554 .musehub-band-inner {
555 max-width: none;
556 margin: 0;
557 display: grid;
558 gap: 1.25rem;
559 align-items: center;
560 }
561
562 .musehub-brand {
563 display: inline-flex;
564 color: #6ea0f3;
565 }
566
567 .musehub-logo {
568 display: block;
569 height: 4.25rem;
570 width: auto;
571 max-width: min(22rem, 100%);
572 }
573
574 .musehub-copy h2 {
575 border-bottom: none;
576 padding-bottom: 0;
577 margin: 0 0 0.5rem;
578 font-size: 1.35rem;
579 }
580
581 .musehub-copy p {
582 margin: 0 0 0.75rem;
583 color: var(--muted);
584 max-width: 40rem;
585 }
586
587 .musehub-links {
588 font-size: 0.9375rem;
589 }
590
591 .musehub-links code {
592 font-size: 0.8125rem;
593 }
594
595 @media (min-width: 720px) {
596 .musehub-band-inner {
597 grid-template-columns: minmax(14rem, 18rem) 1fr;
598 gap: 2.25rem;
599 }
600
601 .musehub-logo {
602 height: 5.5rem;
603 max-width: none;
604 }
605 }
606
607 .cta-row {
608 display: flex;
609 flex-wrap: wrap;
610 gap: 0.75rem;
611 margin: 1.5rem 0;
612 }
613
614 .btn {
615 display: inline-block;
616 padding: 0.625rem 1.125rem;
617 border-radius: 6px;
618 font-weight: 600;
619 font-size: 0.9375rem;
620 text-decoration: none;
621 border: 1px solid transparent;
622 }
623
624 .btn-primary {
625 background: var(--accent);
626 color: #fff;
627 }
628
629 .btn-primary:hover {
630 background: var(--accent-dim);
631 color: #fff;
632 }
633
634 .btn-secondary {
635 background: transparent;
636 border-color: var(--border);
637 color: var(--text);
638 }
639
640 .btn-secondary:hover {
641 border-color: var(--accent);
642 color: var(--accent);
643 }
644
645 .layer-stack {
646 display: flex;
647 flex-direction: column;
648 gap: 0.5rem;
649 margin: 1.5rem 0;
650 }
651
652 .layer {
653 padding: 1rem 1.25rem;
654 border-radius: 8px;
655 border-left: 4px solid;
656 background: var(--surface);
657 }
658
659 .layer-l3 { border-color: var(--layer-l3); }
660 .layer-l2 { border-color: var(--layer-l2); }
661 .layer-l1 { border-color: var(--layer-l1); }
662 .layer-l0 { border-color: var(--layer-l0); }
663
664 .layer strong {
665 display: block;
666 margin-bottom: 0.25rem;
667 }
668
669 .funnel {
670 display: flex;
671 flex-wrap: wrap;
672 align-items: center;
673 gap: 0.5rem 1rem;
674 margin: 1.5rem 0;
675 font-weight: 600;
676 }
677
678 .funnel-step {
679 background: var(--surface);
680 border: 1px solid var(--border);
681 border-radius: 8px;
682 padding: 0.75rem 1.25rem;
683 }
684
685 .funnel-arrow {
686 color: var(--muted);
687 font-size: 1.25rem;
688 }
689
690 pre,
691 code {
692 font-family: var(--mono);
693 font-size: 0.875rem;
694 }
695
696 pre {
697 background: var(--surface);
698 border: 1px solid var(--border);
699 border-radius: 8px;
700 padding: 1rem;
701 overflow-x: auto;
702 }
703
704 ul.compact {
705 padding-left: 1.25rem;
706 margin: 0.5rem 0 1rem;
707 }
708
709 .card-grid {
710 display: grid;
711 grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
712 gap: 1rem;
713 margin: 1.5rem 0;
714 }
715
716 .card {
717 background: var(--surface);
718 border: 1px solid var(--border);
719 border-radius: 8px;
720 padding: 1.25rem;
721 }
722
723 .card h3 {
724 margin-top: 0;
725 }
726
727 /* —— Under-fold bands: problem + how-it-works —— */
728 .section-intro {
729 margin-bottom: 1.75rem;
730 }
731
732 .section-kicker {
733 margin: 0 0 0.5rem;
734 font-size: 0.75rem;
735 font-weight: 700;
736 letter-spacing: 0.12em;
737 text-transform: uppercase;
738 color: var(--accent);
739 }
740
741 .section-lede {
742 margin: 0;
743 max-width: 36rem;
744 color: var(--muted);
745 font-size: 1.05rem;
746 line-height: 1.55;
747 }
748
749 #problem > h2,
750 #how-it-works > h2 {
751 font-size: clamp(1.65rem, 3vw, 2rem);
752 border-bottom: none;
753 padding-bottom: 0;
754 margin: 0 0 0.65rem;
755 color: var(--text);
756 letter-spacing: -0.03em;
757 }
758
759 /* Kit basics — mechanical check strip + Check OK / living docs under the hero */
760 .band-kit-basics {
761 width: 100vw;
762 max-width: 100vw;
763 margin: -0.75rem calc(50% - 50vw) var(--content-gap);
764 padding: 0.25rem 1.5rem 0.5rem;
765 }
766
767 .kit-basics-inner {
768 max-width: 68rem;
769 margin: 0 auto;
770 display: grid;
771 gap: 1rem;
772 }
773
774 /* Thin power-feature strip — sits above Roadmap · Handover on the top fold */
775 .mech-check-strip {
776 display: grid;
777 grid-template-columns: auto 1fr;
778 gap: 1.1rem 1.35rem;
779 align-items: center;
780 margin: 0;
781 padding: 0.85rem 1.25rem 0.95rem;
782 background:
783 linear-gradient(105deg, rgba(232, 163, 92, 0.12) 0%, transparent 42%),
784 var(--surface);
785 border: 1px solid var(--border);
786 border-left: 3px solid #e8a35c;
787 border-radius: 12px;
788 }
789
790 .mech-check-visual {
791 margin: 0;
792 flex-shrink: 0;
793 }
794
795 .mech-check-visual img {
796 display: block;
797 width: min(22rem, 100%);
798 height: auto;
799 }
800
801 html[data-theme="light"] .mech-check-visual img {
802 filter: invert(1) hue-rotate(180deg);
803 }
804
805 .mech-check-kicker-row {
806 display: flex;
807 flex-wrap: wrap;
808 align-items: baseline;
809 gap: 0.35rem 0.75rem;
810 margin: 0 0 0.2rem;
811 }
812
813 .mech-check-kicker {
814 margin: 0;
815 font-size: 0.72rem;
816 font-weight: 700;
817 letter-spacing: 0.08em;
818 text-transform: uppercase;
819 color: #e8a35c;
820 }
821
822 html[data-theme="light"] .mech-check-kicker {
823 color: #b45309;
824 }
825
826 /* Closed: link on the kicker row only — body line count unchanged */
827 .mech-check-details {
828 margin: 0;
829 }
830
831 .mech-check-details > summary {
832 display: inline;
833 cursor: pointer;
834 list-style: none;
835 font-size: 0.78rem;
836 font-weight: 600;
837 letter-spacing: 0.02em;
838 color: var(--accent);
839 text-decoration: underline;
840 text-underline-offset: 2px;
841 }
842
843 .mech-check-details > summary::-webkit-details-marker {
844 display: none;
845 }
846
847 .mech-check-details > summary::marker {
848 content: "";
849 }
850
851 .mech-check-details > summary:hover {
852 color: #5cb88a;
853 }
854
855 .mech-check-details[open] {
856 flex: 1 1 100%;
857 }
858
859 .mech-check-details[open] > summary {
860 display: inline-block;
861 margin-bottom: 0.4rem;
862 }
863
864 .mech-details-body {
865 margin: 0;
866 padding: 0.65rem 0.75rem 0.7rem;
867 border: 1px solid var(--border);
868 border-radius: 8px;
869 background: rgba(0, 0, 0, 0.22);
870 }
871
872 html[data-theme="light"] .mech-details-body {
873 background: rgba(15, 20, 25, 0.04);
874 }
875
876 .mech-details-body p {
877 margin: 0 0 0.55rem;
878 color: var(--muted);
879 font-size: 0.86rem;
880 line-height: 1.4;
881 text-transform: none;
882 letter-spacing: normal;
883 font-weight: 400;
884 }
885
886 .mech-details-body p:last-child {
887 margin-bottom: 0;
888 }
889
890 .mech-details-body strong {
891 color: var(--text);
892 font-weight: 650;
893 }
894
895 .mech-details-body code {
896 font-family: var(--mono);
897 font-size: 0.88em;
898 color: #7ec8ff;
899 }
900
901 html[data-theme="light"] .mech-details-body code {
902 color: #2a6fad;
903 }
904
905 .mech-details-cmd-label {
906 margin: 0.45rem 0 0.2rem !important;
907 font-size: 0.72rem !important;
908 font-weight: 700 !important;
909 letter-spacing: 0.06em;
910 text-transform: uppercase;
911 color: #e8a35c !important;
912 }
913
914 .mech-details-cmd {
915 margin: 0 0 0.35rem;
916 padding: 0.45rem 0.6rem;
917 border-radius: 6px;
918 border: 1px solid var(--border);
919 background: #0d1520;
920 overflow-x: auto;
921 }
922
923 html[data-theme="light"] .mech-details-cmd {
924 background: #15202b;
925 }
926
927 .mech-details-cmd code {
928 display: block;
929 font-family: var(--mono);
930 font-size: 0.78rem;
931 line-height: 1.45;
932 color: #d5dee9;
933 white-space: pre;
934 }
935
936 .mech-check-copy h2 {
937 margin: 0 0 0.35rem;
938 padding: 0;
939 border: none;
940 font-size: clamp(1.05rem, 1.6vw, 1.22rem);
941 font-weight: 700;
942 letter-spacing: -0.02em;
943 color: #f0c48a;
944 line-height: 1.25;
945 }
946
947 html[data-theme="light"] .mech-check-copy h2 {
948 color: #9a5b16;
949 }
950
951 .mech-check-copy p:last-child {
952 margin: 0;
953 color: var(--muted);
954 font-size: 0.94rem;
955 line-height: 1.45;
956 }
957
958 .kit-basics-grid {
959 display: grid;
960 grid-template-columns: repeat(2, minmax(0, 1fr));
961 gap: 1.35rem 1.75rem;
962 }
963
964 .kit-basics-panel {
965 display: grid;
966 grid-template-columns: auto 1fr;
967 gap: 1.15rem 1.35rem;
968 align-items: start;
969 margin: 0;
970 min-height: 100%;
971 padding: 1.5rem 1.6rem 1.65rem;
972 background: var(--surface);
973 border: 1px solid var(--border);
974 border-radius: 14px;
975 }
976
977 .kit-basics-icon {
978 margin-top: 0.1rem;
979 }
980
981 .kit-basics-icon img,
982 .kit-basics-icon svg {
983 display: block;
984 width: 4rem;
985 height: 4rem;
986 }
987
988 /* Docs cycle mark has more viewBox padding than the filled OK mark — enlarge to match. */
989 .kit-basics-icon-docs svg {
990 width: 4.85rem;
991 height: 4.85rem;
992 }
993
994 .kit-basics-copy h2 {
995 margin: 0 0 0.55rem;
996 padding: 0;
997 border: none;
998 font-size: clamp(1.15rem, 1.8vw, 1.35rem);
999 font-weight: 700;
1000 letter-spacing: -0.02em;
1001 color: #7ec8ff;
1002 }
1003
1004 html[data-theme="light"] .kit-basics-copy h2 {
1005 color: #2a6fad;
1006 }
1007
1008 .kit-basics-copy strong {
1009 color: var(--text);
1010 font-weight: 650;
1011 }
1012
1013 .kit-basics-copy code {
1014 font-family: var(--mono);
1015 font-size: 0.88em;
1016 color: #7ec8ff;
1017 }
1018
1019 html[data-theme="light"] .kit-basics-copy code {
1020 color: #2a6fad;
1021 }
1022
1023 .kit-basics-list {
1024 list-style: none;
1025 margin: 0;
1026 padding: 0;
1027 display: grid;
1028 gap: 0.7rem;
1029 }
1030
1031 .kit-basics-list li {
1032 margin: 0;
1033 color: var(--muted);
1034 font-size: 0.98rem;
1035 line-height: 1.5;
1036 }
1037
1038 @media (max-width: 52rem) {
1039 .mech-check-strip {
1040 grid-template-columns: 1fr;
1041 gap: 0.65rem;
1042 padding: 0.9rem 1.1rem 1rem;
1043 }
1044
1045 .mech-check-visual img {
1046 width: min(20rem, 100%);
1047 }
1048
1049 .kit-basics-grid {
1050 grid-template-columns: 1fr;
1051 gap: 1rem;
1052 }
1053 }
1054
1055 /* Problem — 2×2 pain grid pulls eye to failure modes */
1056 .band-problem {
1057 position: relative;
1058 padding: 2rem 0 0.5rem;
1059 }
1060
1061 .pain-grid {
1062 list-style: none;
1063 margin: 0 0 1.5rem;
1064 padding: 0;
1065 display: grid;
1066 grid-template-columns: repeat(2, minmax(0, 1fr));
1067 gap: 0.85rem;
1068 }
1069
1070 .pain-grid li {
1071 margin: 0;
1072 padding: 1.1rem 1.15rem 1.15rem;
1073 background: var(--surface);
1074 border: 1px solid var(--border);
1075 border-radius: 10px;
1076 border-left: 3px solid #c45c5c;
1077 transition: border-color 0.2s ease, transform 0.2s ease;
1078 }
1079
1080 .pain-grid li:hover {
1081 border-left-color: #e07878;
1082 transform: translateY(-1px);
1083 }
1084
1085 .pain-label {
1086 display: block;
1087 font-size: 0.9375rem;
1088 font-weight: 700;
1089 letter-spacing: -0.01em;
1090 color: #e8a0a0;
1091 margin-bottom: 0.35rem;
1092 }
1093
1094 html[data-theme="light"] .pain-label {
1095 color: #a63d3d;
1096 }
1097
1098 .pain-grid p {
1099 margin: 0;
1100 font-size: 0.9rem;
1101 line-height: 1.45;
1102 color: var(--muted);
1103 }
1104
1105 .problem-close {
1106 margin: 1.75rem 0 0;
1107 padding: 0;
1108 max-width: 40rem;
1109 border: none;
1110 background: none;
1111 border-radius: 0;
1112 color: #7ec8ff;
1113 font-size: clamp(1.45rem, 2.6vw, 2rem);
1114 font-weight: 750;
1115 letter-spacing: -0.03em;
1116 line-height: 1.2;
1117 }
1118
1119 .problem-close-lead {
1120 color: #c8d0db;
1121 }
1122
1123 html[data-theme="light"] .problem-close {
1124 color: #2a6fad;
1125 background: none;
1126 border: none;
1127 }
1128
1129 html[data-theme="light"] .problem-close-lead {
1130 color: #8a96a6;
1131 }
1132
1133 /* How it works — numbered loop draws a path through the four steps */
1134 .band-how {
1135 position: relative;
1136 padding: 2.25rem 1.5rem;
1137 margin-left: -0.25rem;
1138 margin-right: -0.25rem;
1139 border-radius: 14px;
1140 background:
1141 radial-gradient(560px 280px at 8% 0%, rgba(61, 154, 106, 0.12), transparent 55%),
1142 radial-gradient(480px 240px at 95% 100%, rgba(56, 120, 200, 0.1), transparent 50%),
1143 var(--surface);
1144 border: 1px solid var(--border);
1145 }
1146
1147 .loop-steps {
1148 list-style: none;
1149 margin: 0;
1150 padding: 0;
1151 display: grid;
1152 grid-template-columns: repeat(2, minmax(0, 1fr));
1153 gap: 1rem 1.25rem;
1154 counter-reset: none;
1155 }
1156
1157 .loop-step {
1158 display: grid;
1159 grid-template-columns: auto 1fr;
1160 gap: 0.9rem;
1161 align-items: start;
1162 margin: 0;
1163 padding: 1.15rem 1.1rem;
1164 border-radius: 10px;
1165 background: rgba(15, 20, 25, 0.35);
1166 border: 1px solid transparent;
1167 transition: border-color 0.2s ease, background 0.2s ease;
1168 }
1169
1170 html[data-theme="light"] .loop-step {
1171 background: rgba(255, 255, 255, 0.72);
1172 }
1173
1174 .loop-step:hover {
1175 border-color: rgba(61, 154, 106, 0.45);
1176 background: rgba(61, 154, 106, 0.08);
1177 }
1178
1179 .loop-index {
1180 display: inline-flex;
1181 align-items: center;
1182 justify-content: center;
1183 min-width: 2.35rem;
1184 height: 2.35rem;
1185 padding: 0 0.35rem;
1186 border-radius: 8px;
1187 font-family: var(--mono);
1188 font-size: 0.8125rem;
1189 font-weight: 700;
1190 letter-spacing: 0.04em;
1191 color: #0c1a12;
1192 background: var(--accent);
1193 box-shadow: 0 0 0 1px rgba(61, 154, 106, 0.35);
1194 }
1195
1196 html[data-theme="light"] .loop-index {
1197 color: #ffffff;
1198 }
1199
1200 .loop-body h3 {
1201 margin: 0.15rem 0 0.4rem;
1202 font-size: 1.05rem;
1203 font-weight: 650;
1204 letter-spacing: -0.015em;
1205 color: var(--text);
1206 }
1207
1208 .loop-body p {
1209 margin: 0;
1210 font-size: 0.9rem;
1211 line-height: 1.45;
1212 color: var(--muted);
1213 }
1214
1215 @media (max-width: 40rem) {
1216 .pain-grid,
1217 .loop-steps {
1218 grid-template-columns: 1fr;
1219 }
1220
1221 .band-how {
1222 padding: 1.5rem 1rem;
1223 }
1224 }
1225
1226 .suite-grid .card h3 {
1227 font-size: 1.05rem;
1228 }
1229
1230 .badge {
1231 display: inline-block;
1232 font-size: 0.6875rem;
1233 font-weight: 700;
1234 text-transform: uppercase;
1235 letter-spacing: 0.04em;
1236 padding: 0.25rem 0.55rem;
1237 border-radius: 4px;
1238 margin-bottom: 0.5rem;
1239 border: 1px solid transparent;
1240 }
1241
1242 /* Solid badges so light mode stays readable (pastel-on-white fails WCAG). */
1243 .badge-dogfood {
1244 background: #1d4ed8;
1245 color: #ffffff;
1246 }
1247
1248 .badge-reference {
1249 background: #6d28d9;
1250 color: #ffffff;
1251 }
1252
1253 .badge-aspirational {
1254 background: #334155;
1255 color: #f8fafc;
1256 }
1257
1258 html[data-theme="light"] .badge-dogfood {
1259 background: #1e3a8a;
1260 color: #ffffff;
1261 }
1262
1263 html[data-theme="light"] .badge-reference {
1264 background: #5b21b6;
1265 color: #ffffff;
1266 }
1267
1268 html[data-theme="light"] .badge-aspirational {
1269 background: #1e293b;
1270 color: #f8fafc;
1271 }
1272
1273 .diagram {
1274 background: var(--surface);
1275 border: 1px solid var(--border);
1276 border-radius: 8px;
1277 padding: 1.25rem;
1278 margin: 1rem 0;
1279 font-family: var(--mono);
1280 font-size: 0.8125rem;
1281 line-height: 1.5;
1282 overflow-x: auto;
1283 }
1284
1285 /* Scenario gallery intro — breathe at the top */
1286 .gallery-main {
1287 padding-top: 1.25rem;
1288 }
1289
1290 .gallery-intro {
1291 margin: 0 0 3rem;
1292 padding: 1.75rem 0 2rem;
1293 border-bottom: 1px solid var(--border);
1294 }
1295
1296 .gallery-intro h1 {
1297 margin: 0 0 1rem;
1298 font-size: clamp(2rem, 4vw, 2.5rem);
1299 letter-spacing: -0.03em;
1300 }
1301
1302 .gallery-intro .lead {
1303 margin: 0 0 1.75rem;
1304 max-width: 38rem;
1305 line-height: 1.55;
1306 }
1307
1308 .badge-key {
1309 display: flex;
1310 flex-wrap: wrap;
1311 gap: 0.75rem 1.25rem;
1312 padding: 1rem 1.15rem;
1313 border-radius: 10px;
1314 background: var(--surface);
1315 border: 1px solid var(--border);
1316 }
1317
1318 .badge-key-item {
1319 display: inline-flex;
1320 align-items: center;
1321 gap: 0.5rem;
1322 color: var(--muted);
1323 font-size: 0.9rem;
1324 }
1325
1326 .badge-key .badge {
1327 margin-bottom: 0;
1328 }
1329
1330 /* Distinct flow shapes per persona (not one copy-pasted ASCII line) */
1331 .flow-diagram {
1332 white-space: normal;
1333 padding: 1.35rem 1.35rem 1.2rem;
1334 margin: 1.35rem 0;
1335 }
1336
1337 .flow-diagram figcaption {
1338 font-family: var(--font);
1339 font-size: 0.875rem;
1340 font-weight: 600;
1341 color: var(--text);
1342 margin: 0 0 1rem;
1343 letter-spacing: -0.01em;
1344 }
1345
1346 .flow-track {
1347 list-style: none;
1348 margin: 0;
1349 padding: 0;
1350 display: flex;
1351 flex-wrap: wrap;
1352 align-items: stretch;
1353 gap: 0.45rem;
1354 }
1355
1356 .flow-track > li {
1357 position: relative;
1358 margin: 0;
1359 padding: 0.55rem 0.75rem;
1360 border-radius: 6px;
1361 background: rgba(15, 20, 25, 0.45);
1362 border: 1px solid var(--border);
1363 font-family: var(--font);
1364 font-size: 0.8125rem;
1365 font-weight: 550;
1366 color: var(--text);
1367 }
1368
1369 html[data-theme="light"] .flow-track > li {
1370 background: #ffffff;
1371 }
1372
1373 .flow-track > li:not(:last-child)::after {
1374 content: "→";
1375 position: absolute;
1376 right: -0.55rem;
1377 top: 50%;
1378 transform: translateY(-50%);
1379 color: var(--accent);
1380 font-weight: 700;
1381 z-index: 1;
1382 }
1383
1384 .flow-track > li:not(:last-child) {
1385 margin-right: 0.55rem;
1386 }
1387
1388 .flow-track > li.flow-end {
1389 border-color: var(--accent-dim);
1390 box-shadow: inset 0 0 0 1px rgba(61, 154, 106, 0.35);
1391 }
1392
1393 .flow-track > li.flow-role {
1394 color: var(--accent);
1395 font-weight: 700;
1396 text-transform: uppercase;
1397 letter-spacing: 0.04em;
1398 font-size: 0.7rem;
1399 }
1400
1401 .flow-track-short {
1402 margin-top: 0.75rem;
1403 }
1404
1405 .flow-aside {
1406 margin: 0.9rem 0 0;
1407 font-family: var(--font);
1408 font-size: 0.8125rem;
1409 color: var(--muted);
1410 }
1411
1412 .flow-join-line,
1413 .flow-loop-label {
1414 margin: 0.75rem 0;
1415 font-family: var(--mono);
1416 font-size: 0.75rem;
1417 color: var(--accent);
1418 }
1419
1420 .flow-split {
1421 display: grid;
1422 gap: 0.5rem;
1423 }
1424
1425 .flow-join {
1426 color: var(--accent);
1427 font-size: 1.25rem;
1428 padding-left: 0.25rem;
1429 }
1430
1431 .flow-dual-cols {
1432 display: grid;
1433 grid-template-columns: 1fr 1fr;
1434 gap: 0.85rem;
1435 }
1436
1437 .flow-dual .flow-track {
1438 flex-direction: column;
1439 align-items: stretch;
1440 }
1441
1442 .flow-dual .flow-track > li:not(:last-child)::after {
1443 content: "↓";
1444 right: auto;
1445 left: 50%;
1446 top: auto;
1447 bottom: -0.7rem;
1448 transform: translateX(-50%);
1449 }
1450
1451 .flow-dual .flow-track > li:not(:last-child) {
1452 margin-right: 0;
1453 margin-bottom: 0.65rem;
1454 }
1455
1456 .flow-loop .flow-loop-label {
1457 padding: 0.35rem 0.6rem;
1458 border-left: 3px solid var(--accent);
1459 background: rgba(61, 154, 106, 0.08);
1460 border-radius: 0 6px 6px 0;
1461 }
1462
1463 .flow-converge .flow-split > .flow-track:first-child > li {
1464 border-color: rgba(126, 200, 255, 0.35);
1465 }
1466
1467 .flow-handoff .flow-track:first-of-type > li {
1468 border-color: rgba(167, 139, 250, 0.4);
1469 }
1470
1471 @media (max-width: 40rem) {
1472 .flow-dual-cols {
1473 grid-template-columns: 1fr;
1474 }
1475
1476 .flow-track > li:not(:last-child)::after {
1477 content: "↓";
1478 right: auto;
1479 left: 50%;
1480 top: auto;
1481 bottom: -0.7rem;
1482 transform: translateX(-50%);
1483 }
1484
1485 .flow-track > li:not(:last-child) {
1486 margin-right: 0;
1487 margin-bottom: 0.65rem;
1488 }
1489
1490 .flow-track {
1491 flex-direction: column;
1492 }
1493 }
1494
1495 footer.site-footer {
1496 border-top: 1px solid var(--border);
1497 padding: 2rem 1.5rem;
1498 text-align: center;
1499 color: var(--muted);
1500 font-size: 0.875rem;
1501 }
1502
1503 footer.site-footer .footer-tagline {
1504 margin: 0.75rem auto 0;
1505 max-width: 36rem;
1506 font-size: 0.9375rem;
1507 line-height: 1.45;
1508 font-weight: 500;
1509 color: var(--muted);
1510 text-align: center;
1511 }
1512
1513 footer a {
1514 margin: 0 0.5rem;
1515 }
1516
1517 .scenario-detail {
1518 margin-bottom: 3rem;
1519 padding-bottom: 2.5rem;
1520 border-bottom: 1px solid var(--border);
1521 }
1522
1523 .scenario-detail:last-child {
1524 border-bottom: none;
1525 }
1526
1527 .scenario-detail > h2 {
1528 margin-top: 0.35rem;
1529 }
1530
1531 @media (max-width: 40rem) {
1532 h1 {
1533 font-size: 1.75rem;
1534 }
1535
1536 .funnel {
1537 flex-direction: column;
1538 align-items: stretch;
1539 }
1540
1541 .funnel-arrow {
1542 text-align: center;
1543 }
1544 }
File History 2 commits
sha256:a78e7e5a8740e03315f325d19edeb3aa1b306b3337d04abbaa9a9e0f3bbeb7a1 docs: MuseHub-first before ISR #74 — staging solidify NEXT Human 2 days ago
sha256:4671b7f787ddbe63ced31c895b688c77ab495653b65a730b423329f26b3c1439 feat: K1-P1 complete — agent provenance, build-verification… Sonnet 4.6 patch 54 days ago