1/* Workflow / Commands - Renaissance Edition */
2
3.commands-section {
4 position: relative;
5 padding: var(--spacing-xl) 0;
6 background: var(--color-paper);
7}
8
9.commands-gallery {
10 /* Reset grid */
11 display: block;
12}
13
14/* ============================================
15 MAGAZINE SPREAD - Desktop Layout
16 ============================================ */
17
18/* Category accent colors */
19.magazine-spread[data-category="create"] { --spread-accent: oklch(55% 0.20 340); }
20.magazine-spread[data-category="evaluate"] { --spread-accent: oklch(55% 0.20 300); }
21.magazine-spread[data-category="refine"] { --spread-accent: oklch(55% 0.18 260); }
22.magazine-spread[data-category="simplify"] { --spread-accent: oklch(55% 0.20 80); }
23.magazine-spread[data-category="harden"] { --spread-accent: oklch(55% 0.20 160); }
24.magazine-spread[data-category="system"] { --spread-accent: oklch(45% 0.05 0); }
25
26.magazine-container {
27 position: relative;
28 width: 100%;
29 display: grid;
30 grid-template-columns: 200px 1fr;
31 gap: var(--spacing-lg);
32 align-items: start;
33 overflow: hidden;
34}
35
36@media (min-width: 1100px) {
37 .magazine-container {
38 background: white;
39 border-radius: 16px;
40 padding: var(--spacing-lg);
41 }
42}
43
44/* Fisheye command list */
45.fisheye-list {
46 position: relative;
47 height: 400px;
48 align-self: center;
49 overflow: hidden;
50 mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
51 -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
52}
53
54.fisheye-scroll {
55 height: 100%;
56 overflow-y: auto;
57 scrollbar-width: none;
58 position: relative;
59}
60
61.fisheye-scroll::-webkit-scrollbar { display: none; }
62
63.fisheye-item {
64 display: block;
65 font-family: var(--font-display);
66 font-size: 1.5rem;
67 font-weight: 400;
68 color: var(--color-ink);
69 background: none;
70 border: none;
71 padding: 0;
72 position: absolute;
73 left: 0;
74 cursor: pointer;
75 white-space: nowrap;
76 text-align: left;
77 width: 100%;
78 line-height: 1.3;
79 transform-origin: left center;
80 will-change: transform, opacity;
81}
82
83.fisheye-slash {
84 color: var(--color-mist);
85 font-weight: 300;
86}
87
88.fisheye-item.is-active {
89 font-weight: 600;
90}
91
92.fisheye-item.is-active .fisheye-slash {
93 color: var(--color-accent);
94}
95
96
97.fisheye-beta {
98 font-family: var(--font-body);
99 font-size: 0.45rem;
100 font-weight: 600;
101 letter-spacing: 0.08em;
102 text-transform: uppercase;
103 color: var(--color-ash);
104 border: 1px solid var(--color-mist);
105 border-radius: 3px;
106 padding: 1px 4px;
107 margin-left: 0.35em;
108 vertical-align: middle;
109}
110
111/* The viewport that clips to one spread at a time */
112.magazine-viewport {
113 position: relative;
114 height: 520px;
115 overflow: hidden;
116}
117
118/* Individual spread */
119.magazine-spread {
120 position: absolute;
121 inset: 0;
122 display: grid;
123 grid-template-columns: 38% 1fr;
124 grid-template-rows: 1fr auto;
125 gap: 0 var(--spacing-2xl);
126 padding: var(--spacing-lg) var(--spacing-lg);
127 opacity: 0;
128 pointer-events: none;
129 transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
130 transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
131 transform: translateY(16px);
132 will-change: opacity, transform;
133}
134
135.magazine-spread.active {
136 opacity: 1;
137 pointer-events: auto;
138 transform: translateY(0);
139 z-index: 2;
140}
141
142.magazine-spread.exiting {
143 opacity: 0;
144 transform: translateY(-16px);
145 z-index: 1;
146}
147
148/* Left column: Big name + meta */
149.spread-identity {
150 grid-column: 1;
151 grid-row: 1 / 3;
152 display: flex;
153 flex-direction: column;
154 justify-content: center;
155 gap: var(--spacing-md);
156 padding-right: var(--spacing-lg);
157}
158
159.spread-category-label {
160 font-family: var(--font-body);
161 font-size: 0.6875rem;
162 font-weight: 600;
163 text-transform: uppercase;
164 letter-spacing: 0.14em;
165 color: var(--spread-accent);
166}
167
168.spread-command-name {
169 white-space: nowrap;
170 font-family: var(--font-display);
171 font-size: clamp(3rem, 5.5vw, 5.5rem);
172 font-weight: 600;
173 line-height: 0.95;
174 color: var(--color-ink);
175 margin: 0;
176 letter-spacing: -0.02em;
177}
178
179.spread-command-name .spread-slash {
180 color: var(--spread-accent);
181 font-weight: 300;
182}
183
184.spread-command-name .beta-badge {
185 font-family: var(--font-body);
186 font-size: 0.55rem;
187 font-weight: 600;
188 letter-spacing: 0.08em;
189 text-transform: uppercase;
190 color: var(--spread-accent);
191 border: 1px solid var(--spread-accent);
192 border-radius: 3px;
193 padding: 2px 6px;
194 vertical-align: super;
195 margin-left: 8px;
196}
197
198.spread-description {
199 font-family: var(--font-body);
200 font-size: 0.9375rem;
201 line-height: 1.6;
202 color: var(--color-charcoal);
203 max-width: 360px;
204}
205
206/* Flow / relationship line */
207.spread-flow {
208 display: flex;
209 align-items: center;
210 gap: 6px;
211 flex-wrap: nowrap;
212 margin-top: var(--spacing-xs);
213 white-space: nowrap;
214}
215
216.spread-flow-label {
217 font-family: var(--font-body);
218 font-size: 0.75rem;
219 color: var(--color-ash);
220}
221
222.spread-flow-icon {
223 color: var(--spread-accent);
224 font-weight: 600;
225 font-size: 0.8125rem;
226}
227
228.spread-flow-cmd {
229 font-family: var(--font-mono);
230 font-size: 0.6875rem;
231 background: var(--color-mist);
232 padding: 2px 7px;
233 border-radius: 3px;
234 color: var(--color-ink);
235}
236
237/* Right column: Demo area */
238.spread-demo-area {
239 grid-column: 2;
240 grid-row: 1 / 3;
241 display: flex;
242 flex-direction: column;
243 min-height: 0;
244 overflow: hidden;
245}
246
247/* Demo split comparison inside the spread */
248.spread-demo-area .demo-split-comparison {
249 display: flex;
250 flex-direction: column;
251 height: 100%;
252 flex: 1;
253 min-height: 0;
254}
255
256.spread-demo-area .demo-split-comparison .split-container {
257 position: relative;
258 flex: 1;
259 min-height: 0;
260 overflow: hidden;
261 cursor: ew-resize;
262 user-select: none;
263 background: var(--color-cream);
264}
265
266.spread-demo-area .demo-split-comparison .split-before,
267.spread-demo-area .demo-split-comparison .split-after {
268 position: absolute;
269 inset: 0;
270 display: flex;
271 align-items: center;
272 justify-content: center;
273 padding: var(--spacing-md);
274}
275
276.spread-demo-area .demo-split-comparison .split-before {
277 z-index: 1;
278 background: var(--color-cream);
279}
280
281.spread-demo-area .demo-split-comparison .split-after {
282 z-index: 2;
283 background: var(--color-paper);
284 clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
285}
286
287.spread-demo-area .demo-split-comparison .split-content {
288 width: 100%;
289 max-width: 320px;
290 display: flex;
291 flex-direction: column;
292 align-items: center;
293 justify-content: center;
294}
295
296.spread-demo-area .demo-split-comparison .split-divider {
297 position: absolute;
298 top: 0;
299 bottom: 0;
300 left: 50%;
301 width: 2px;
302 background: var(--spread-accent, var(--color-accent));
303 transform: translateX(-50%) skewX(-10deg);
304 pointer-events: none;
305 z-index: 3;
306 box-shadow: 0 0 12px rgba(0,0,0,0.1);
307}
308
309.spread-demo-area .demo-split-comparison .split-label {
310 position: absolute;
311 top: 50%;
312 left: 50%;
313 transform: translate(-50%, -50%) skewX(10deg);
314 font-size: 0.5625rem;
315 font-weight: 600;
316 letter-spacing: 0.08em;
317 text-transform: uppercase;
318 color: var(--color-paper);
319 background: var(--spread-accent, var(--color-accent));
320 padding: 4px 10px;
321 border-radius: 3px;
322 white-space: nowrap;
323}
324
325.spread-demo-area .demo-split-comparison .demo-caption {
326 flex-shrink: 0;
327 font-size: 0.75rem;
328 color: var(--color-ash);
329 text-align: center;
330 padding: var(--spacing-sm) var(--spacing-md);
331}
332
333/* Fallback demo container inside spread */
334.spread-demo-area .demo-container {
335 flex: 1;
336 display: flex;
337 flex-direction: column;
338}
339
340.spread-demo-area .demo-container .demo-viewport {
341 flex: 1;
342 display: flex;
343 align-items: center;
344 justify-content: center;
345 max-width: 420px;
346 background: none;
347 min-height: auto;
348}
349
350/* (nav moved to fisheye list) */
351
352/* ============================================
353 OLD DESKTOP STYLES (kept for mobile reuse)
354 ============================================ */
355
356.commands-container {
357 display: grid;
358 grid-template-columns: 1fr 1.2fr;
359 gap: var(--spacing-2xl);
360 align-items: start;
361}
362
363@media (max-width: 900px) {
364 .commands-container {
365 grid-template-columns: 1fr;
366 }
367}
368
369/* Left: The Manual (Scrollable) */
370.command-manual {
371 display: flex;
372 flex-direction: column;
373 gap: var(--spacing-sm);
374 padding-bottom: 20vh;
375}
376
377.command-category-header {
378 font-family: var(--font-display);
379 font-size: 0.875rem;
380 font-weight: 600;
381 color: var(--color-accent);
382 text-transform: uppercase;
383 letter-spacing: 0.1em;
384 padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-sm);
385 margin-top: var(--spacing-md);
386 border-bottom: 1px solid var(--color-mist);
387}
388
389.command-category-header:first-child {
390 margin-top: 0;
391}
392
393.manual-entry {
394 position: relative;
395 padding: var(--spacing-lg);
396 padding-left: calc(var(--spacing-lg) + 16px); /* Reserve space for transform */
397 border-left: 2px solid var(--color-mist);
398 transition: border-color 0.4s var(--ease-out), opacity 0.4s var(--ease-out), background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
399 opacity: 0.4;
400 cursor: pointer;
401 transform: translateX(-16px);
402}
403
404.manual-entry:hover {
405 opacity: 0.7;
406}
407
408.manual-entry.active {
409 border-left-color: var(--color-accent);
410 opacity: 1;
411 transform: translateX(0);
412 background: linear-gradient(to right, var(--color-bg), transparent);
413}
414
415.manual-cmd-name {
416 font-family: var(--font-mono);
417 font-size: 1.5rem;
418 margin: 0 0 var(--spacing-sm);
419 color: var(--color-ink);
420 font-weight: 500;
421}
422
423.beta-badge {
424 font-family: var(--font-body);
425 font-size: 0.55rem;
426 font-weight: 600;
427 letter-spacing: 0.08em;
428 text-transform: uppercase;
429 color: var(--color-accent);
430 border: 1px solid var(--color-accent);
431 border-radius: 3px;
432 padding: 1px 5px;
433 vertical-align: middle;
434 margin-left: 6px;
435}
436
437.manual-cmd-desc {
438 font-size: 0.875rem;
439 line-height: 1.5;
440 color: var(--color-charcoal);
441 margin: 0;
442}
443
444.manual-cmd-rel {
445 font-size: 0.8125rem;
446 color: var(--color-ash);
447 margin-top: var(--spacing-sm);
448 display: flex;
449 align-items: center;
450 gap: 0.5ch;
451 flex-wrap: wrap;
452}
453
454.manual-cmd-rel .rel-icon {
455 color: var(--color-accent);
456 font-weight: 600;
457}
458
459.manual-cmd-rel code {
460 font-family: var(--font-mono);
461 font-size: 0.75rem;
462 background: var(--color-mist);
463 padding: 2px 6px;
464 border-radius: 3px;
465 color: var(--color-ink);
466}
467
468/* Right: The Terminal Stack (Sticky, vertically centered) */
469.glass-terminal-wrapper {
470 position: sticky;
471 top: 50vh;
472 transform: translateY(-50%);
473 height: calc(100vh - var(--spacing-xl) * 2);
474 max-height: 800px;
475 min-height: 500px;
476}
477
478/* Stacked Windows Container */
479.terminal-stack {
480 position: relative;
481 height: 100%;
482 perspective: 1200px;
483}
484
485.terminal-stack-tabs {
486 position: absolute;
487 top: -31px;
488 right: 8px;
489 display: flex;
490 gap: 4px;
491 z-index: 10;
492}
493
494.terminal-stack-tab {
495 font-family: var(--font-mono);
496 font-size: 0.75rem;
497 padding: 5px 12px;
498 background: var(--color-cream);
499 border: 1px solid var(--color-mist);
500 border-bottom: none;
501 border-radius: 6px 6px 0 0;
502 color: var(--color-ash);
503 cursor: pointer;
504 transition: all 0.2s ease;
505}
506
507.terminal-stack-tab:hover {
508 background: var(--color-paper);
509 color: var(--color-charcoal);
510}
511
512.terminal-stack-tab.active {
513 background: var(--color-paper);
514 color: var(--color-ink);
515 border-color: var(--color-mist);
516}
517
518/* Individual Windows */
519.terminal-window {
520 position: absolute;
521 inset: 0;
522 transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
523 opacity 0.3s ease,
524 filter 0.3s ease;
525 transform-origin: center bottom;
526}
527
528/* Demo window (front by default) */
529.terminal-window--demo {
530 z-index: 2;
531}
532
533.terminal-window--demo.is-back {
534 transform: translateY(16px) translateX(12px) scale(0.96);
535 opacity: 0.6;
536 filter: brightness(0.92);
537 pointer-events: none;
538 z-index: 1;
539}
540
541/* Source window (back by default) */
542.terminal-window--source {
543 z-index: 1;
544 transform: translateY(16px) translateX(12px) scale(0.96);
545 opacity: 0.6;
546 filter: brightness(0.92);
547 pointer-events: none;
548}
549
550.terminal-window--source.is-front {
551 transform: translateY(0) translateX(0) scale(1);
552 opacity: 1;
553 filter: brightness(1);
554 pointer-events: auto;
555 z-index: 2;
556}
557
558/* Source Window Content */
559.source-window {
560 background: var(--color-paper);
561 backdrop-filter: blur(12px);
562 -webkit-backdrop-filter: blur(12px);
563 border: 1px solid var(--color-mist);
564 border-radius: 8px;
565 box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15);
566 height: 100%;
567 display: flex;
568 flex-direction: column;
569 overflow: hidden;
570}
571
572.source-header {
573 background: var(--color-cream);
574 padding: 12px 16px;
575 display: flex;
576 align-items: center;
577 gap: 8px;
578 border-bottom: 1px solid var(--color-mist);
579 flex-shrink: 0;
580}
581
582.source-title {
583 font-family: var(--font-mono);
584 font-size: 0.875rem;
585 color: var(--color-ink);
586 font-weight: 500;
587}
588
589.source-body {
590 flex: 1;
591 padding: var(--spacing-md);
592 font-family: var(--font-mono);
593 font-size: 0.75rem;
594 line-height: 1.5;
595 color: var(--color-charcoal);
596 overflow-y: auto;
597 overscroll-behavior: contain;
598 white-space: pre-wrap;
599 word-break: break-word;
600 background: var(--color-cream);
601}
602
603.source-loading {
604 color: var(--color-ash);
605 font-style: italic;
606}
607
608@media (max-width: 900px) {
609 .magazine-container { display: none; }
610 .fisheye-list { display: none; }
611 .glass-terminal-wrapper {
612 display: none; /* Hide on mobile for now, or stack */
613 }
614}
615
616.glass-terminal {
617 background: var(--color-paper);
618 backdrop-filter: blur(12px);
619 -webkit-backdrop-filter: blur(12px);
620 border: 1px solid var(--color-mist);
621 border-radius: 8px;
622 box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15);
623 height: 100%;
624 display: flex;
625 flex-direction: column;
626 overflow: hidden;
627}
628
629.terminal-header {
630 background: var(--color-cream);
631 padding: 12px 16px;
632 display: flex;
633 align-items: center;
634 gap: 8px;
635 border-bottom: 1px solid var(--color-mist);
636}
637
638.terminal-dot {
639 width: 10px;
640 height: 10px;
641 border-radius: 50%;
642}
643.terminal-dot.red { background: #ff5f56; }
644.terminal-dot.yellow { background: #ffbd2e; }
645.terminal-dot.green { background: #27c93f; }
646
647.terminal-title {
648 margin-left: auto;
649 font-family: var(--font-mono);
650 font-size: 0.75rem;
651 color: var(--color-ash);
652}
653
654.terminal-body {
655 flex: 1;
656 padding: var(--spacing-md);
657 font-family: var(--font-mono);
658 font-size: 0.9375rem;
659 color: var(--color-ink);
660 overflow-y: auto;
661 display: flex;
662 flex-direction: column;
663 min-height: 0; /* Allow flex shrinking */
664}
665
666.terminal-line {
667 margin-bottom: var(--spacing-sm);
668 display: flex;
669 gap: var(--spacing-sm);
670 line-height: 1.5;
671}
672
673.terminal-prompt {
674 color: var(--color-accent);
675 user-select: none;
676 font-weight: bold;
677}
678
679.terminal-cursor {
680 display: inline-block;
681 width: 8px;
682 height: 1.2em;
683 background: var(--color-accent);
684 vertical-align: middle;
685 animation: blink 1s step-end infinite;
686}
687
688.terminal-output {
689 color: var(--color-ash);
690 margin-bottom: var(--spacing-md);
691 white-space: pre-wrap;
692}
693
694/* Hide steps when viewport is short */
695@media (max-height: 800px) {
696 .terminal-output {
697 display: none;
698 }
699}
700
701.terminal-cmd {
702 color: var(--color-accent);
703 font-weight: 600;
704}
705
706.terminal-step {
707 color: var(--color-charcoal);
708}
709
710.terminal-done {
711 color: var(--color-success, #22c55e);
712 font-weight: 500;
713}
714
715.terminal-preview {
716 background: var(--color-paper);
717 margin: var(--spacing-sm) 0;
718 flex: 1;
719 min-height: 0; /* Allow shrinking */
720 overflow: hidden;
721 border-radius: 12px;
722}
723
724.terminal-cursor-line {
725 flex-shrink: 0;
726 margin-top: var(--spacing-sm) !important;
727}
728
729/* Demo Split Comparison in Terminal */
730.terminal-preview .demo-split-comparison {
731 display: flex;
732 flex-direction: column;
733 height: 100%;
734}
735
736.terminal-preview .demo-split-comparison .split-container {
737 position: relative;
738 flex: 1;
739 min-height: 0;
740 overflow: hidden;
741 cursor: ew-resize;
742 user-select: none;
743 background: var(--color-cream);
744}
745
746.terminal-preview .demo-split-comparison .split-before,
747.terminal-preview .demo-split-comparison .split-after {
748 position: absolute;
749 inset: 0;
750 display: flex;
751 align-items: center;
752 justify-content: center;
753 padding: var(--spacing-md);
754}
755
756.terminal-preview .demo-split-comparison .split-before {
757 z-index: 1;
758 background: var(--color-cream);
759}
760
761.terminal-preview .demo-split-comparison .split-after {
762 z-index: 2;
763 background: var(--color-paper);
764 clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
765}
766
767.terminal-preview .demo-split-comparison .split-content {
768 width: 100%;
769 max-width: 280px;
770 display: flex;
771 flex-direction: column;
772 align-items: center;
773 justify-content: center;
774}
775
776.terminal-preview .demo-split-comparison .split-divider {
777 position: absolute;
778 top: 0;
779 bottom: 0;
780 left: 50%;
781 width: 2px;
782 background: var(--color-accent);
783 transform: translateX(-50%) skewX(-10deg);
784 pointer-events: none;
785 z-index: 3;
786 box-shadow: 0 0 12px rgba(0,0,0,0.1);
787}
788
789.terminal-preview .demo-split-comparison .split-label {
790 position: absolute;
791 top: 50%;
792 left: 50%;
793 transform: translate(-50%, -50%) skewX(10deg);
794 font-size: 0.5625rem;
795 font-weight: 600;
796 letter-spacing: 0.08em;
797 text-transform: uppercase;
798 color: var(--color-paper);
799 background: var(--color-accent);
800 padding: 4px 10px;
801 border-radius: 3px;
802 white-space: nowrap;
803}
804
805.terminal-preview .demo-split-comparison .demo-caption {
806 flex-shrink: 0;
807 font-size: 0.75rem;
808 color: var(--color-ash);
809 text-align: center;
810 padding: var(--spacing-sm) var(--spacing-md);
811}
812
813@keyframes blink { 50% { opacity: 0; } }
814
815/* ============================================
816 CASE STUDIES / TRANSFORMATIONS SECTION
817 ============================================ */
818
819.casestudies-section {
820 position: relative;
821 padding: var(--spacing-2xl) 0;
822 border-top: 1px solid var(--color-mist);
823}
824
825/* Tabbed transformations */
826.transformations-tabbed {
827 margin-top: var(--spacing-xl);
828}
829
830.transformation-tabs {
831 display: flex;
832 gap: var(--spacing-xs);
833 border-bottom: 1px solid var(--color-mist);
834 margin-bottom: var(--spacing-lg);
835}
836
837.transformation-tab {
838 font-family: var(--font-display);
839 font-size: 0.9375rem;
840 font-weight: 500;
841 color: var(--color-ash);
842 background: none;
843 border: none;
844 padding: var(--spacing-sm) var(--spacing-md);
845 cursor: pointer;
846 position: relative;
847 transition: color 0.2s ease;
848}
849
850.transformation-tab:hover {
851 color: var(--color-charcoal);
852}
853
854.transformation-tab.active {
855 color: var(--color-ink);
856}
857
858.transformation-tab.active::after {
859 content: '';
860 position: absolute;
861 bottom: -1px;
862 left: 0;
863 right: 0;
864 height: 2px;
865 background: var(--color-accent);
866}
867
868.transformation-panels {
869 position: relative;
870}
871
872.transformation-panel {
873 display: none;
874 flex-direction: column;
875 gap: var(--spacing-lg);
876 animation: fadeInPanel 0.3s ease;
877}
878
879.transformation-panel.active {
880 display: flex;
881}
882
883@keyframes fadeInPanel {
884 from {
885 opacity: 0;
886 transform: translateY(8px);
887 }
888 to {
889 opacity: 1;
890 transform: translateY(0);
891 }
892}
893
894/* Side-by-side images */
895.transformation-images {
896 display: flex;
897 align-items: center;
898 gap: var(--spacing-md);
899}
900
901.transformation-before,
902.transformation-after {
903 flex: 1;
904 margin: 0;
905}
906
907.transformation-before img,
908.transformation-after img,
909.transformation-placeholder {
910 width: 100%;
911 aspect-ratio: 16 / 10;
912 object-fit: cover;
913 border-radius: 8px;
914 border: 1px solid var(--color-mist);
915 cursor: pointer;
916 transition: transform 0.2s ease, box-shadow 0.2s ease;
917}
918
919.transformation-before img:hover,
920.transformation-after img:hover,
921.transformation-placeholder:hover {
922 transform: scale(1.02);
923 box-shadow: 0 8px 24px -4px rgba(0,0,0,0.15);
924}
925
926.transformation-placeholder {
927 background: linear-gradient(135deg, var(--color-mist) 0%, var(--color-cream) 100%);
928 display: flex;
929 align-items: center;
930 justify-content: center;
931 color: var(--color-ash);
932 font-size: 0.8125rem;
933 font-style: italic;
934}
935
936.transformation-before figcaption,
937.transformation-after figcaption {
938 font-size: 0.75rem;
939 font-weight: 600;
940 text-transform: uppercase;
941 letter-spacing: 0.05em;
942 color: var(--color-ash);
943 margin-top: var(--spacing-xs);
944 text-align: center;
945}
946
947.transformation-arrow {
948 font-size: 1.5rem;
949 color: var(--color-accent);
950 font-weight: 300;
951 flex-shrink: 0;
952}
953
954/* Info section */
955.transformation-info {
956 max-width: 600px;
957}
958
959.transformation-title {
960 font-family: var(--font-display);
961 font-size: 1.25rem;
962 font-weight: 600;
963 color: var(--color-ink);
964 margin: 0 0 var(--spacing-xs);
965}
966
967.transformation-desc {
968 font-size: 0.9375rem;
969 color: var(--color-charcoal);
970 line-height: 1.6;
971 margin: 0 0 var(--spacing-sm);
972}
973
974.transformation-commands {
975 display: flex;
976 flex-wrap: wrap;
977 gap: 6px;
978}
979
980.transformation-command {
981 font-family: var(--font-mono);
982 font-size: 0.75rem;
983 background: var(--color-mist);
984 color: var(--color-charcoal);
985 padding: 4px 10px;
986 border-radius: 4px;
987}
988
989/* Lightbox */
990.lightbox {
991 position: fixed;
992 inset: 0;
993 background: rgba(0, 0, 0, 0.9);
994 display: flex;
995 align-items: center;
996 justify-content: center;
997 z-index: 1000;
998 opacity: 0;
999 visibility: hidden;
1000 transition: opacity 0.3s ease, visibility 0.3s ease;
1001}
1002
1003.lightbox.active {
1004 opacity: 1;
1005 visibility: visible;
1006}
1007
1008.lightbox-close {
1009 position: absolute;
1010 top: 20px;
1011 right: 24px;
1012 background: none;
1013 border: none;
1014 color: white;
1015 font-size: 2.5rem;
1016 cursor: pointer;
1017 opacity: 0.7;
1018 transition: opacity 0.2s ease;
1019 line-height: 1;
1020}
1021
1022.lightbox-close:hover {
1023 opacity: 1;
1024}
1025
1026.lightbox-image {
1027 max-width: 90vw;
1028 max-height: 85vh;
1029 object-fit: contain;
1030 border-radius: 8px;
1031 box-shadow: 0 20px 60px rgba(0,0,0,0.5);
1032}
1033
1034@media (max-width: 768px) {
1035 .transformation-images {
1036 flex-direction: column;
1037 }
1038
1039 .transformation-arrow {
1040 transform: rotate(90deg);
1041 }
1042
1043 .transformation-before,
1044 .transformation-after {
1045 width: 100%;
1046 }
1047}
1048
1049/* ============================================
1050 HERO VERSION LINK
1051 ============================================ */
1052
1053.hero-version-link {
1054 font-size: 0.8125rem;
1055 color: var(--color-ash);
1056 margin-top: var(--spacing-sm);
1057}
1058
1059.hero-version-link a {
1060 color: var(--color-ash);
1061 text-decoration: none;
1062 border-bottom: 1px solid transparent;
1063 transition: color 0.2s ease, border-color 0.2s ease;
1064}
1065
1066.hero-version-link a:hover {
1067 color: var(--color-accent);
1068 border-bottom-color: var(--color-accent);
1069}
1070
1071/* ============================================
1072 CHANGELOG + FAQ ROW (side-by-side on desktop)
1073 ============================================ */
1074
1075.changelog-faq-row {
1076 position: relative;
1077}
1078
1079@media (min-width: 1024px) {
1080 .changelog-faq-row {
1081 display: grid;
1082 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
1083 column-gap: calc(var(--spacing-xl) * 1.5);
1084 border-top: 1px solid var(--color-mist);
1085 }
1086
1087 .changelog-faq-row > .changelog-section,
1088 .changelog-faq-row > .faq-section {
1089 border-top: none;
1090 }
1091
1092 .changelog-faq-row > .faq-section {
1093 border-left: 1px solid var(--color-mist);
1094 padding-left: calc(var(--spacing-xl) * 0.75);
1095 margin-left: calc(var(--spacing-xl) * -0.75);
1096 }
1097}
1098
1099/* ============================================
1100 CHANGELOG SECTION
1101 ============================================ */
1102
1103.changelog-section {
1104 position: relative;
1105 padding: var(--spacing-xl) 0;
1106 border-top: 1px solid var(--color-mist);
1107}
1108
1109.changelog-list {
1110 display: flex;
1111 flex-direction: column;
1112 gap: 0;
1113}
1114
1115.changelog-entry {
1116 padding: var(--spacing-md) 0;
1117}
1118
1119.changelog-entry + .changelog-entry {
1120 border-top: 1px solid var(--color-mist);
1121}
1122
1123.changelog-version-header {
1124 display: flex;
1125 align-items: baseline;
1126 gap: var(--spacing-sm);
1127 margin-bottom: var(--spacing-sm);
1128}
1129
1130.changelog-version {
1131 font-family: var(--font-mono);
1132 font-size: 1.125rem;
1133 font-weight: 600;
1134 color: var(--color-ink);
1135}
1136
1137.changelog-date {
1138 font-size: 0.8125rem;
1139 color: var(--color-ash);
1140}
1141
1142.changelog-items {
1143 margin: 0;
1144 padding-left: var(--spacing-md);
1145 color: var(--color-charcoal);
1146 line-height: 1.7;
1147 max-width: 70ch;
1148}
1149
1150.changelog-items li {
1151 margin-bottom: var(--spacing-xs);
1152}
1153
1154.changelog-items code {
1155 font-family: var(--font-mono);
1156 font-size: 0.875em;
1157 background: var(--color-mist);
1158 padding: 2px 6px;
1159 border-radius: 3px;
1160 color: var(--color-ink);
1161}
1162
1163/* Changelog: collapsible older entries */
1164.changelog-older {
1165 margin-top: var(--spacing-sm);
1166}
1167
1168.changelog-older-toggle {
1169 font-family: var(--font-body);
1170 font-size: 0.875rem;
1171 font-weight: 500;
1172 color: var(--color-accent);
1173 padding: var(--spacing-md) 0;
1174 cursor: pointer;
1175 list-style: none;
1176 display: flex;
1177 align-items: center;
1178 gap: 6px;
1179 transition: color 0.2s ease;
1180}
1181
1182.changelog-older-toggle::-webkit-details-marker {
1183 display: none;
1184}
1185
1186.changelog-older-toggle::before {
1187 content: '+';
1188 font-size: 1.25rem;
1189 font-weight: 300;
1190 transition: transform 0.3s var(--ease-out);
1191}
1192
1193.changelog-older[open] .changelog-older-toggle::before {
1194 transform: rotate(45deg);
1195}
1196
1197.changelog-older-toggle:hover {
1198 color: var(--color-accent-hover);
1199}
1200
1201.changelog-older-entries {
1202 animation: faqFadeIn 0.3s var(--ease-out);
1203}
1204
1205
1206/* ============================================
1207 FAQ SECTION
1208 ============================================ */
1209
1210.faq-section {
1211 position: relative;
1212 padding: var(--spacing-xl) 0;
1213 border-top: 1px solid var(--color-mist);
1214}
1215
1216.faq-list {
1217 display: flex;
1218 flex-direction: column;
1219 gap: 0;
1220}
1221
1222.faq-item {
1223 border-bottom: 1px solid var(--color-mist);
1224}
1225
1226.faq-question {
1227 font-family: var(--font-display);
1228 font-size: 1.125rem;
1229 font-weight: 500;
1230 color: var(--color-ink);
1231 padding: var(--spacing-md) 0;
1232 cursor: pointer;
1233 list-style: none;
1234 display: flex;
1235 align-items: center;
1236 justify-content: space-between;
1237 transition: color 0.2s ease;
1238}
1239
1240.faq-question::-webkit-details-marker {
1241 display: none;
1242}
1243
1244.faq-question::after {
1245 content: '+';
1246 font-family: var(--font-body);
1247 font-size: 1.5rem;
1248 font-weight: 300;
1249 color: var(--color-accent);
1250 transition: transform 0.3s var(--ease-out);
1251}
1252
1253.faq-item[open] .faq-question::after {
1254 transform: rotate(45deg);
1255}
1256
1257.faq-question:hover {
1258 color: var(--color-accent);
1259}
1260
1261.faq-answer {
1262 padding: 0 0 var(--spacing-md);
1263 color: var(--color-charcoal);
1264 line-height: 1.7;
1265 max-width: 70ch;
1266 animation: faqFadeIn 0.3s var(--ease-out);
1267}
1268
1269.faq-answer p {
1270 margin: 0 0 var(--spacing-sm);
1271}
1272
1273.faq-answer p:last-child {
1274 margin-bottom: 0;
1275}
1276
1277.faq-answer ul {
1278 margin: var(--spacing-sm) 0;
1279 padding-left: var(--spacing-md);
1280}
1281
1282.faq-answer li {
1283 margin-bottom: var(--spacing-xs);
1284}
1285
1286.faq-answer code {
1287 font-family: var(--font-mono);
1288 font-size: 0.875em;
1289 background: var(--color-mist);
1290 padding: 2px 6px;
1291 border-radius: 3px;
1292 color: var(--color-ink);
1293}
1294
1295.faq-answer a {
1296 color: var(--color-accent);
1297 text-decoration: none;
1298 border-bottom: 1px solid transparent;
1299 transition: border-color 0.2s ease;
1300}
1301
1302.faq-answer a:hover {
1303 border-bottom-color: var(--color-accent);
1304}
1305
1306/* Mobile: FAQ + Changelog */
1307@media (max-width: 600px) {
1308 .faq-question {
1309 font-size: 1rem;
1310 padding: var(--spacing-md) 0;
1311 min-height: 44px;
1312 gap: var(--spacing-sm);
1313 }
1314
1315 .faq-answer {
1316 font-size: 0.875rem;
1317 }
1318
1319 .changelog-version {
1320 font-size: 1rem;
1321 }
1322
1323 .changelog-version-header {
1324 flex-wrap: wrap;
1325 gap: var(--spacing-xs);
1326 }
1327
1328 .changelog-items {
1329 padding-left: var(--spacing-sm);
1330 font-size: 0.875rem;
1331 }
1332
1333 .changelog-older-toggle {
1334 min-height: 44px;
1335 }
1336}
1337
1338@keyframes faqFadeIn {
1339 from {
1340 opacity: 0;
1341 transform: translateY(-8px);
1342 }
1343 to {
1344 opacity: 1;
1345 transform: translateY(0);
1346 }
1347}