1/**
2 * Skill Demos - Interactive before/after demonstrations
3 * Renaissance Edition
4 */
5
6/* ============================================
7 TABBED CONTAINER
8 ============================================ */
9
10.demo-tabbed-container {
11 display: flex;
12 flex-direction: column;
13}
14
15.demo-tabs {
16 display: flex;
17 gap: 0;
18 margin-bottom: 0;
19 justify-content: center;
20 background: var(--color-paper);
21 border-bottom: 1px solid var(--color-mist);
22}
23
24.demo-tab {
25 padding: var(--spacing-sm) var(--spacing-lg);
26 background: transparent;
27 border: none;
28 border-bottom: 2px solid transparent;
29 font-family: var(--font-mono);
30 font-size: 0.75rem;
31 font-weight: 500;
32 letter-spacing: 0.05em;
33 text-transform: uppercase;
34 color: var(--color-ash);
35 cursor: pointer;
36 transition: all var(--duration-fast) var(--ease-out);
37}
38
39.demo-tab:hover {
40 color: var(--color-text);
41 background: var(--color-cream);
42}
43
44.demo-tab.active {
45 color: var(--color-accent);
46 border-bottom-color: var(--color-accent);
47 background: var(--color-accent-dim);
48}
49
50.demo-panels {
51 flex: 1;
52}
53
54.demo-panel {
55 display: none;
56}
57
58.demo-panel.active {
59 display: block;
60 animation: fadeSlideIn 0.3s var(--ease-out);
61}
62
63@keyframes fadeSlideIn {
64 from {
65 opacity: 0;
66 transform: translateY(10px);
67 }
68 to {
69 opacity: 1;
70 transform: translateY(0);
71 }
72}
73
74/* ============================================
75 DEMO CONTAINER
76 ============================================ */
77
78.demo-container {
79 background: var(--color-paper);
80 border: none;
81 border-radius: 0;
82 overflow: hidden;
83}
84
85.demo-header {
86 display: flex;
87 align-items: center;
88 justify-content: center;
89 padding: var(--spacing-sm) var(--spacing-md);
90 background: var(--color-paper);
91 border-bottom: 1px solid var(--color-mist);
92 min-height: 48px;
93}
94
95.demo-toggle {
96 display: flex;
97 align-items: center;
98 gap: var(--spacing-md);
99}
100
101.demo-toggle-label {
102 font-family: var(--font-mono);
103 font-size: 0.6875rem;
104 font-weight: 600;
105 text-transform: uppercase;
106 letter-spacing: 0.08em;
107 color: var(--color-ash);
108 transition: color var(--duration-fast) var(--ease-out);
109 cursor: pointer;
110}
111
112.demo-toggle-label:hover {
113 color: var(--color-text);
114}
115
116.demo-toggle-label.active {
117 color: var(--color-accent);
118}
119
120.demo-toggle-switch {
121 position: relative;
122 width: 44px;
123 height: 24px;
124 background: var(--color-mist);
125 border-radius: 12px;
126 cursor: pointer;
127 transition: background var(--duration-fast) var(--ease-out);
128 border: 1px solid transparent;
129 padding: 0;
130 font: inherit;
131}
132
133.demo-toggle-switch:focus-visible {
134 outline: 2px solid var(--color-accent);
135 outline-offset: 2px;
136}
137
138.demo-toggle-switch:hover {
139 border-color: var(--color-ash);
140}
141
142.demo-toggle-switch::after {
143 content: '';
144 position: absolute;
145 top: 3px;
146 left: 3px;
147 width: 16px;
148 height: 16px;
149 background: var(--color-paper);
150 border-radius: 50%;
151 box-shadow: 0 1px 4px rgba(0,0,0,0.15);
152 transition: transform var(--duration-base) var(--ease-spring);
153}
154
155.demo-toggle-switch.active {
156 background: var(--color-accent);
157}
158
159.demo-toggle-switch.active::after {
160 transform: translateX(20px);
161}
162
163.demo-viewport {
164 padding: var(--spacing-xl);
165 display: flex;
166 align-items: center;
167 justify-content: center;
168 min-height: 280px;
169 background: var(--color-cream);
170 transition: background var(--duration-base) var(--ease-out);
171}
172
173.demo-viewport[data-state="after"] {
174 background: var(--color-paper);
175}
176
177.demo-caption {
178 padding: var(--spacing-sm) var(--spacing-md);
179 font-family: var(--font-mono);
180 font-size: 0.6875rem;
181 letter-spacing: 0.03em;
182 color: var(--color-ash);
183 text-align: center;
184}
185
186/* ============================================
187 UX WRITING DEMOS
188 ============================================ */
189
190.uxw-demo {
191 width: 100%;
192 max-width: 320px;
193 padding: var(--spacing-lg);
194 background: var(--color-paper);
195 border: 1px solid var(--color-mist);
196 border-radius: 6px;
197 text-align: center;
198}
199
200/* Error Messages */
201.uxw-error-icon { font-size: 2rem; margin-bottom: var(--spacing-sm); }
202.uxw-error-title { font-weight: 600; color: #c00; margin-bottom: var(--spacing-xs); }
203.uxw-error-text { font-size: 0.875rem; color: var(--color-ash); }
204.uxw-error-action { margin-top: var(--spacing-sm); font-size: 0.875rem; color: var(--color-accent); cursor: pointer; text-decoration: underline; }
205
206.uxw-error-after .uxw-error-icon { color: var(--color-accent); }
207.uxw-error-after .uxw-error-title { color: var(--color-text); }
208.uxw-error-after .uxw-error-text { color: var(--color-charcoal); }
209
210/* Button Labels */
211.uxw-button-context { font-size: 0.875rem; color: var(--color-charcoal); margin-bottom: var(--spacing-md); font-weight: 500; }
212.uxw-button-row { display: flex; gap: var(--spacing-sm); justify-content: center; }
213.uxw-btn { padding: var(--spacing-xs) var(--spacing-md); border-radius: 4px; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; }
214.uxw-btn-primary { background: var(--color-text); color: var(--color-paper); }
215.uxw-btn-secondary { background: transparent; color: var(--color-ash); border: 1px solid var(--color-mist); }
216.uxw-btn-danger { background: #c00; color: white; }
217
218/* Empty States */
219.uxw-empty-icon { font-size: 2.5rem; margin-bottom: var(--spacing-sm); opacity: 0.4; }
220.uxw-empty-title { font-weight: 500; color: var(--color-ash); }
221.uxw-empty-text { font-size: 0.875rem; color: var(--color-charcoal); margin-top: var(--spacing-xs); }
222.uxw-empty-action { margin-top: var(--spacing-md); }
223
224.uxw-empty-after .uxw-empty-icon { opacity: 1; }
225.uxw-empty-after .uxw-empty-title { color: var(--color-text); }
226
227/* ============================================
228 SPATIAL DESIGN DEMOS
229 ============================================ */
230
231.spatial-demo {
232 width: 100%;
233 max-width: 340px;
234 padding: var(--spacing-md);
235 background: var(--color-paper);
236 border: 1px solid var(--color-mist);
237 border-radius: 6px;
238}
239
240/* Grid Systems */
241.spatial-grid-before {
242 display: flex;
243 flex-wrap: wrap;
244 gap: 6px;
245}
246
247.spatial-grid-after {
248 display: grid;
249 grid-template-columns: 1fr 1fr;
250 gap: var(--spacing-sm);
251}
252
253.spatial-card-item {
254 padding: var(--spacing-sm);
255 background: var(--color-bg);
256 border: 1px solid var(--color-mist);
257 border-radius: 4px;
258 font-size: 0.8125rem;
259 color: var(--color-charcoal);
260 text-align: center;
261}
262
263.spatial-grid-after .spatial-card-item {
264 width: auto !important;
265}
266
267/* Visual Hierarchy */
268.spatial-hierarchy-before .spatial-h-title,
269.spatial-hierarchy-before .spatial-h-subtitle,
270.spatial-hierarchy-before .spatial-h-cta,
271.spatial-hierarchy-before .spatial-h-link {
272 font-size: 0.9375rem;
273 margin-bottom: var(--spacing-xs);
274 color: var(--color-charcoal);
275}
276
277.spatial-hierarchy-after .spatial-h-title {
278 font-family: var(--font-display);
279 font-size: 1.75rem;
280 font-weight: 300;
281 font-style: italic;
282 margin-bottom: var(--spacing-xs);
283 color: var(--color-text);
284}
285
286.spatial-hierarchy-after .spatial-h-subtitle {
287 font-size: 0.6875rem;
288 text-transform: uppercase;
289 letter-spacing: 0.1em;
290 color: var(--color-ash);
291 margin-bottom: var(--spacing-md);
292}
293
294.spatial-hierarchy-after .spatial-h-cta {
295 display: inline-block;
296 padding: var(--spacing-sm) var(--spacing-lg);
297 background: var(--color-text);
298 color: var(--color-paper);
299 font-size: 0.875rem;
300 font-weight: 500;
301 border-radius: 4px;
302 margin-bottom: var(--spacing-sm);
303}
304
305.spatial-hierarchy-after .spatial-h-link {
306 font-size: 0.75rem;
307 color: var(--color-ash);
308}
309
310/* Whitespace */
311.spatial-whitespace-before {
312 padding: var(--spacing-xs) !important;
313}
314
315.spatial-whitespace-before .spatial-ws-title { font-size: 1rem; font-weight: 600; margin-bottom: 2px; }
316.spatial-whitespace-before .spatial-ws-price { font-size: 0.875rem; color: var(--color-ash); margin-bottom: 4px; }
317.spatial-whitespace-before .spatial-ws-features { font-size: 0.75rem; color: var(--color-ash); margin-bottom: 6px; }
318.spatial-whitespace-before .spatial-ws-btn { width: 100%; padding: 6px; font-size: 0.75rem; background: var(--color-text); color: var(--color-paper); border: none; border-radius: 3px; cursor: pointer; }
319
320.spatial-whitespace-after {
321 padding: var(--spacing-lg) !important;
322}
323
324.spatial-whitespace-after .spatial-ws-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; margin-bottom: var(--spacing-sm); }
325.spatial-whitespace-after .spatial-ws-price { font-size: 1.25rem; font-weight: 600; color: var(--color-text); margin-bottom: var(--spacing-sm); }
326.spatial-whitespace-after .spatial-ws-features { font-size: 0.8125rem; color: var(--color-ash); margin-bottom: var(--spacing-lg); line-height: 1.6; }
327.spatial-whitespace-after .spatial-ws-btn { width: 100%; padding: var(--spacing-sm); font-size: 0.875rem; background: var(--color-text); color: var(--color-paper); border: none; border-radius: 4px; cursor: pointer; font-weight: 500; }
328
329/* ============================================
330 MOTION DESIGN DEMOS
331 ============================================ */
332
333.motion-demo {
334 display: flex;
335 flex-direction: column;
336 align-items: center;
337 gap: var(--spacing-sm);
338 width: 100%;
339 max-width: 280px;
340}
341
342/* Staggered Reveal */
343.motion-stagger-demo {
344 align-items: stretch;
345}
346
347.motion-list-item {
348 display: flex;
349 align-items: center;
350 gap: var(--spacing-sm);
351 padding: var(--spacing-sm) var(--spacing-md);
352 background: var(--color-bg);
353 border: 1px solid var(--color-mist);
354 border-radius: 4px;
355 font-size: 0.875rem;
356 color: var(--color-charcoal);
357}
358
359.motion-dot {
360 width: 8px;
361 height: 8px;
362 background: var(--color-accent);
363 border-radius: 50%;
364}
365
366.demo-viewport[data-state="after"] .motion-list-item {
367 opacity: 0;
368 transform: translateY(12px);
369 animation: staggerIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
370}
371
372.demo-viewport[data-state="after"] .motion-list-item:nth-child(1) { animation-delay: 0s; }
373.demo-viewport[data-state="after"] .motion-list-item:nth-child(2) { animation-delay: 0.05s; }
374.demo-viewport[data-state="after"] .motion-list-item:nth-child(3) { animation-delay: 0.1s; }
375.demo-viewport[data-state="after"] .motion-list-item:nth-child(4) { animation-delay: 0.15s; }
376
377@keyframes staggerIn {
378 to { opacity: 1; transform: translateY(0); }
379}
380
381/* Micro-interactions */
382.motion-btn {
383 padding: 12px 24px;
384 font-size: 0.9375rem;
385 font-weight: 500;
386 border: none;
387 border-radius: 4px;
388 cursor: pointer;
389}
390
391.motion-btn-before {
392 background: var(--color-charcoal);
393 color: var(--color-paper);
394}
395
396.motion-btn-after {
397 background: var(--color-text);
398 color: var(--color-paper);
399 transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
400}
401
402.motion-btn-after:hover {
403 transform: translateY(-2px);
404 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
405}
406
407.motion-btn-after:active {
408 transform: translateY(0) scale(0.98);
409}
410
411/* State Transitions */
412.motion-card {
413 padding: var(--spacing-md);
414 background: var(--color-bg);
415 border: 1px solid var(--color-mist);
416 border-radius: 6px;
417 text-align: center;
418 min-width: 140px;
419}
420
421.motion-card-icon { font-size: 1.5rem; margin-bottom: var(--spacing-xs); }
422.motion-card-text { font-size: 0.8125rem; color: var(--color-charcoal); }
423
424.motion-card-after {
425 transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
426}
427
428.demo-viewport[data-state="after"] .motion-card-after {
429 background: color-mix(in oklch, var(--color-accent) 10%, var(--color-paper));
430 border-color: var(--color-accent);
431}
432
433.demo-viewport[data-state="after"] .motion-card-after .motion-card-icon {
434 animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
435}
436
437@keyframes checkPop {
438 50% { transform: scale(1.3); }
439}
440
441/* ============================================
442 TYPOGRAPHY DEMOS
443 ============================================ */
444
445.typo-demo {
446 width: 100%;
447 max-width: 320px;
448 text-align: left;
449}
450
451/* Font Pairing */
452.typo-pairing-before {
453 font-family: 'Inter', system-ui, sans-serif;
454}
455
456.typo-pairing-before .typo-heading {
457 font-size: 1.5rem;
458 font-weight: 600;
459 margin-bottom: var(--spacing-xs);
460}
461
462.typo-pairing-before .typo-body {
463 font-size: 0.9375rem;
464 line-height: 1.5;
465 color: var(--color-ash);
466}
467
468.typo-pairing-after .typo-heading {
469 font-family: var(--font-display);
470 font-size: 2rem;
471 font-weight: 300;
472 font-style: italic;
473 letter-spacing: -0.02em;
474 margin-bottom: var(--spacing-sm);
475 color: var(--color-text);
476}
477
478.typo-pairing-after .typo-body {
479 font-family: var(--font-body);
480 font-size: 0.9375rem;
481 line-height: 1.7;
482 color: var(--color-charcoal);
483}
484
485/* Hierarchy */
486.typo-hierarchy-before .typo-h1 { font-size: 1.125rem; font-weight: 600; margin-bottom: 4px; }
487.typo-hierarchy-before .typo-meta { font-size: 0.9375rem; color: var(--color-ash); margin-bottom: var(--spacing-xs); }
488.typo-hierarchy-before .typo-p { font-size: 0.875rem; line-height: 1.5; color: var(--color-charcoal); }
489
490.typo-hierarchy-after .typo-h1 {
491 font-family: var(--font-display);
492 font-size: 2.25rem;
493 font-weight: 300;
494 letter-spacing: -0.03em;
495 margin-bottom: 2px;
496 line-height: 1.1;
497}
498
499.typo-hierarchy-after .typo-meta {
500 font-size: 0.6875rem;
501 text-transform: uppercase;
502 letter-spacing: 0.12em;
503 color: var(--color-accent);
504 margin-bottom: var(--spacing-md);
505}
506
507.typo-hierarchy-after .typo-p {
508 font-size: 0.9375rem;
509 line-height: 1.7;
510 color: var(--color-ash);
511}
512
513/* ============================================
514 INTERACTION DESIGN DEMOS
515 ============================================ */
516
517.int-demo {
518 display: flex;
519 flex-direction: column;
520 gap: var(--spacing-md);
521 width: 100%;
522 max-width: 280px;
523}
524
525/* Button States */
526.int-states-demo {
527 gap: var(--spacing-lg);
528}
529
530.int-state-row {
531 display: flex;
532 align-items: center;
533 gap: var(--spacing-md);
534}
535
536.int-state-label {
537 font-size: 0.6875rem;
538 text-transform: uppercase;
539 letter-spacing: 0.08em;
540 color: var(--color-ash);
541 width: 40px;
542}
543
544.int-btn {
545 flex: 1;
546 padding: var(--spacing-sm) var(--spacing-md);
547 font-size: 0.875rem;
548 font-weight: 500;
549 border-radius: 4px;
550 cursor: pointer;
551}
552
553.int-btn-poor {
554 background: var(--color-charcoal);
555 color: var(--color-paper);
556 border: none;
557}
558
559.int-btn-good {
560 background: var(--color-text);
561 color: var(--color-paper);
562 border: 2px solid transparent;
563 transition: all 0.15s ease;
564}
565
566.int-btn-good:hover {
567 background: var(--color-charcoal);
568}
569
570.int-btn-good:focus {
571 outline: none;
572 border-color: var(--color-accent);
573 box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 25%, transparent);
574}
575
576.int-btn-good:active {
577 transform: scale(0.98);
578}
579
580/* Affordances */
581.int-aff-item {
582 padding: var(--spacing-sm) var(--spacing-md);
583 border-radius: 4px;
584 font-size: 0.875rem;
585 cursor: pointer;
586}
587
588.int-aff-poor {
589 color: var(--color-charcoal);
590}
591
592.int-aff-good {
593 color: var(--color-accent);
594 text-decoration: underline;
595 text-underline-offset: 2px;
596}
597
598.int-aff-good::after {
599 content: ' →';
600}
601
602.int-affordance-after .int-aff-item {
603 background: var(--color-bg);
604 border: 1px solid var(--color-mist);
605 color: var(--color-accent);
606 text-decoration: underline;
607 text-underline-offset: 2px;
608 transition: background 0.15s ease;
609}
610
611.int-affordance-after .int-aff-item:hover {
612 background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper));
613}
614
615.int-affordance-after .int-aff-item::after {
616 content: ' →';
617}
618
619/* Feedback */
620.int-feedback-before,
621.int-feedback-after {
622 display: flex;
623 align-items: center;
624 gap: var(--spacing-md);
625 flex-direction: row;
626}
627
628.int-fb-btn {
629 width: 48px;
630 height: 48px;
631 border-radius: 50%;
632 border: none;
633 cursor: pointer;
634 display: flex;
635 align-items: center;
636 justify-content: center;
637}
638
639.int-fb-btn svg {
640 width: 22px;
641 height: 22px;
642}
643
644.int-fb-silent {
645 background: var(--color-mist);
646 color: var(--color-ash);
647}
648
649.int-fb-active {
650 background: var(--color-charcoal);
651 color: var(--color-paper);
652 transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
653}
654
655.int-fb-active:hover {
656 transform: scale(1.1);
657}
658
659.int-fb-active:active {
660 transform: scale(0.95);
661}
662
663.int-fb-active.liked {
664 background: var(--color-accent);
665 animation: heartPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
666}
667
668@keyframes heartPop {
669 50% { transform: scale(1.25); }
670}
671
672.int-fb-label {
673 font-size: 0.875rem;
674 color: var(--color-charcoal);
675}
676
677/* ============================================
678 COLOR & CONTRAST DEMOS
679 ============================================ */
680
681.color-demo {
682 width: 100%;
683 max-width: 300px;
684}
685
686/* Color Palette */
687.color-palette-before,
688.color-palette-after {
689 display: flex;
690 flex-wrap: wrap;
691 gap: var(--spacing-xs);
692 padding: var(--spacing-md);
693 background: var(--color-paper);
694 border: 1px solid var(--color-mist);
695 border-radius: 6px;
696}
697
698.color-swatch {
699 width: 40px;
700 height: 40px;
701 border-radius: 4px;
702 transition: background 0.2s ease;
703}
704
705.color-card {
706 width: 100%;
707 margin-top: var(--spacing-sm);
708 padding: var(--spacing-sm);
709 background: var(--color-paper);
710 border: 1px solid var(--color-mist);
711 border-radius: 4px;
712 display: flex;
713 flex-direction: column;
714 gap: 4px;
715}
716
717.color-card span { font-size: 0.8125rem; font-weight: 500; transition: color 0.2s ease; }
718.color-card button { padding: 6px; border: none; border-radius: 3px; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; }
719
720/* Before - Clashing colors */
721.color-palette-before .swatch-1 { background: #ff6b6b; }
722.color-palette-before .swatch-2 { background: #4ecdc4; }
723.color-palette-before .swatch-3 { background: #ffe66d; }
724.color-palette-before .swatch-4 { background: #95e1d3; }
725.color-palette-before .swatch-5 { background: #f38181; }
726.color-palette-before .card-title { color: #ff6b6b; }
727.color-palette-before .card-subtitle { color: #4ecdc4; }
728.color-palette-before .card-btn { background: #ffe66d; color: #333; }
729
730/* After - Harmonious palette */
731.color-palette-after .swatch-1 { background: var(--color-text); }
732.color-palette-after .swatch-2 { background: var(--color-charcoal); }
733.color-palette-after .swatch-3 { background: var(--color-ash); }
734.color-palette-after .swatch-4 { background: var(--color-mist); }
735.color-palette-after .swatch-5 { background: var(--color-accent); }
736.color-palette-after .card-title { color: var(--color-text); }
737.color-palette-after .card-subtitle { color: var(--color-ash); }
738.color-palette-after .card-btn { background: var(--color-accent); color: var(--color-paper); }
739
740/* Strategic Accent */
741.color-accent-card {
742 padding: var(--spacing-md);
743 border-radius: 6px;
744}
745
746.color-accent-before .color-accent-card {
747 background: #f5f5f5;
748 border: 1px solid #e0e0e0;
749}
750
751.color-accent-before .color-accent-title { font-weight: 600; color: #333; margin-bottom: 4px; }
752.color-accent-before .color-accent-text { font-size: 0.8125rem; color: #666; margin-bottom: var(--spacing-sm); }
753.color-accent-before .color-accent-btn { width: 100%; padding: var(--spacing-xs); background: #333; color: white; border: none; border-radius: 4px; font-size: 0.8125rem; cursor: pointer; }
754
755.color-accent-after .color-accent-card {
756 background: color-mix(in oklch, var(--color-accent) 8%, var(--color-paper));
757 border: 1px solid color-mix(in oklch, var(--color-accent) 20%, var(--color-paper));
758}
759
760.color-accent-after .color-accent-title { font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
761.color-accent-after .color-accent-text { font-size: 0.8125rem; color: var(--color-ash); margin-bottom: var(--spacing-sm); }
762.color-accent-after .color-accent-btn { width: 100%; padding: var(--spacing-xs); background: var(--color-accent); color: var(--color-paper); border: none; border-radius: 4px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
763
764/* Contrast Ratios */
765.color-contrast-static {
766 display: flex;
767 flex-direction: column;
768 gap: var(--spacing-sm);
769}
770
771.contrast-example {
772 padding: var(--spacing-md);
773 border-radius: 6px;
774 text-align: center;
775}
776
777.contrast-fail {
778 background: #f0f0f0;
779 color: #a0a0a0;
780}
781
782.contrast-pass {
783 background: var(--color-charcoal);
784 color: var(--color-paper);
785}
786
787.contrast-badge {
788 display: inline-block;
789 font-size: 0.5625rem;
790 font-weight: 600;
791 text-transform: uppercase;
792 letter-spacing: 0.1em;
793 padding: 2px 6px;
794 border-radius: 2px;
795 margin-bottom: 4px;
796}
797
798.contrast-fail .contrast-badge { background: #ddd; }
799.contrast-pass .contrast-badge { background: var(--color-accent); color: var(--color-paper); }
800
801.contrast-text { font-size: 1rem; font-weight: 500; margin-bottom: 2px; }
802.contrast-ratio { font-size: 0.6875rem; opacity: 0.7; }
803
804/* ============================================
805 RESPONSIVE DESIGN DEMOS
806 ============================================ */
807
808.resp-demo {
809 width: 100%;
810 max-width: 340px;
811}
812
813/* Touch Targets */
814.resp-touch-demo {
815 display: flex;
816 flex-direction: column;
817 gap: var(--spacing-lg);
818}
819
820.resp-touch-row {
821 display: flex;
822 align-items: center;
823 gap: var(--spacing-md);
824}
825
826.resp-label {
827 font-size: 0.6875rem;
828 text-transform: uppercase;
829 letter-spacing: 0.08em;
830 color: var(--color-ash);
831 width: 70px;
832}
833
834.resp-touch-targets {
835 display: flex;
836 gap: 4px;
837}
838
839.resp-touch-targets button {
840 border: none;
841 border-radius: 4px;
842 cursor: pointer;
843 font-weight: 500;
844}
845
846.resp-touch-bad button {
847 width: 24px;
848 height: 24px;
849 font-size: 0.75rem;
850 background: var(--color-mist);
851 color: var(--color-ash);
852}
853
854.resp-touch-good button {
855 width: 44px;
856 height: 44px;
857 font-size: 1rem;
858 background: var(--color-text);
859 color: var(--color-paper);
860}
861
862/* Fluid Layout */
863.resp-fluid-demo {
864 padding: var(--spacing-md);
865 background: var(--color-bg);
866 border: 1px solid var(--color-mist);
867 border-radius: 6px;
868}
869
870.resp-fluid-container {
871 display: flex;
872 flex-direction: column;
873 gap: var(--spacing-md);
874}
875
876.resp-fluid-fixed,
877.resp-fluid-adaptive {
878 font-size: 0.75rem;
879 color: var(--color-ash);
880}
881
882.resp-fluid-fixed span,
883.resp-fluid-adaptive span {
884 display: block;
885 margin-bottom: 4px;
886}
887
888.resp-fluid-bar {
889 height: 24px;
890 background: var(--color-mist);
891 border-radius: 4px;
892}
893
894.resp-fluid-adaptive .resp-fluid-bar {
895 background: var(--color-accent);
896}
897
898/* Adaptive Content */
899.resp-adapt-demo {
900 display: flex;
901 gap: var(--spacing-sm);
902 align-items: flex-end;
903}
904
905.resp-device {
906 text-align: center;
907}
908
909.resp-device > span {
910 display: block;
911 margin-top: 4px;
912 font-size: 0.625rem;
913 color: var(--color-ash);
914 text-transform: uppercase;
915 letter-spacing: 0.08em;
916}
917
918.resp-device-screen {
919 background: var(--color-paper);
920 border: 2px solid var(--color-mist);
921 border-radius: 4px;
922 padding: 4px;
923 display: flex;
924 flex-direction: column;
925 gap: 3px;
926}
927
928.resp-device-mobile .resp-device-screen { width: 50px; height: 80px; }
929.resp-device-tablet .resp-device-screen { width: 80px; height: 60px; }
930.resp-device-desktop .resp-device-screen { width: 120px; height: 70px; }
931
932.resp-block {
933 background: var(--color-mist);
934 border-radius: 2px;
935}
936
937.resp-block-row {
938 display: flex;
939 gap: 3px;
940 flex: 1;
941}
942
943.resp-header { height: 16px; background: var(--color-charcoal); }
944.resp-sidebar { width: 30%; background: var(--color-charcoal); }
945.resp-content { flex: 1; }
946
947/* ============================================
948 ANIMATIONS
949 ============================================ */
950
951@keyframes fadeIn {
952 from { opacity: 0; }
953 to { opacity: 1; }
954}
955
956@media (prefers-reduced-motion: reduce) {
957 *, *::before, *::after {
958 animation-duration: 0.01ms !important;
959 animation-iteration-count: 1 !important;
960 transition-duration: 0.01ms !important;
961 }
962}