|
416 | 416 | /* CRT accents: the terminal panel glows red; dark-mode section rules are lit |
417 | 417 | phosphor; the hero cursor blinks unless the user prefers reduced motion. */ |
418 | 418 | .terminal-glow { |
419 | | - box-shadow: 0 0 26px hsl(var(--brand) / 0.55); |
| 419 | + box-shadow: 0 0 10px hsl(var(--brand) / 0.22); |
420 | 420 | } |
421 | 421 |
|
422 | 422 | .dark .terminal-glow { |
423 | | - box-shadow: 0 0 10px hsl(var(--link) / 0.35), 0 0 32px hsl(var(--link) / 0.45); |
| 423 | + box-shadow: 0 0 8px hsl(var(--link) / 0.18); |
424 | 424 | } |
425 | 425 |
|
426 | 426 | .crt-cursor { |
|
444 | 444 | .dark .page-section:not(:first-child)::after, |
445 | 445 | .dark .footer-links::before, |
446 | 446 | .dark .footer-links::after { |
447 | | - filter: drop-shadow(0 0 6px hsl(var(--brand) / 0.55)); |
| 447 | + filter: drop-shadow(0 0 3px hsl(var(--brand) / 0.25)); |
448 | 448 | } |
449 | 449 |
|
450 | 450 | /* Taint-flow headline: pure glyph glow, no background shapes. On load a glow |
|
501 | 501 | } |
502 | 502 | } |
503 | 503 |
|
504 | | -/* Demo frame: bright glow on paper, red line + softer glow on the machine. */ |
| 504 | +/* Demo frame: soft glow on paper, red line + softer glow on the machine. */ |
505 | 505 | .demo-glow { |
506 | | - box-shadow: 0 0 26px hsl(var(--brand) / 0.55); |
| 506 | + box-shadow: 0 0 10px hsl(var(--brand) / 0.22); |
507 | 507 | } |
508 | 508 |
|
509 | 509 | .dark .demo-glow { |
510 | 510 | border: 2px solid hsl(var(--panel-border)); |
511 | | - box-shadow: 0 0 10px hsl(var(--link) / 0.35), 0 0 32px hsl(var(--link) / 0.45); |
| 511 | + box-shadow: 0 0 8px hsl(var(--link) / 0.18); |
512 | 512 | } |
513 | 513 |
|
514 | 514 | /* Demo carousel: the incoming panel slides in from the travel direction. */ |
|
532 | 532 | to { opacity: 1; transform: translateX(0); } |
533 | 533 | } |
534 | 534 |
|
535 | | -/* Phosphor breathing: the panel and demo glows swell and settle around their |
536 | | - resting values. Desynced periods keep the two machines from pulsing in |
537 | | - lockstep. Static glows above remain the reduced-motion fallback. */ |
538 | | -@media (prefers-reduced-motion: no-preference) { |
539 | | - .terminal-glow { |
540 | | - animation: glow-breathe 3.6s ease-in-out infinite; |
541 | | - } |
542 | | - |
543 | | - .demo-glow { |
544 | | - animation: glow-breathe 4.6s ease-in-out infinite; |
545 | | - } |
546 | | - |
547 | | - .dark .terminal-glow { |
548 | | - animation-name: glow-breathe-dark; |
549 | | - } |
550 | | - |
551 | | - .dark .demo-glow { |
552 | | - animation-name: glow-breathe-dark; |
553 | | - } |
554 | | -} |
555 | | - |
556 | | -@keyframes glow-breathe { |
557 | | - 0%, 100% { box-shadow: 0 0 20px hsl(var(--brand) / 0.45); } |
558 | | - 50% { box-shadow: 0 0 32px hsl(var(--brand) / 0.65); } |
559 | | -} |
560 | | - |
561 | | -@keyframes glow-breathe-dark { |
562 | | - 0%, 100% { box-shadow: 0 0 8px hsl(var(--link) / 0.3), 0 0 24px hsl(var(--link) / 0.35); } |
563 | | - 50% { box-shadow: 0 0 12px hsl(var(--link) / 0.45), 0 0 40px hsl(var(--link) / 0.6); } |
564 | | -} |
565 | | - |
566 | | -/* Headline phosphor aura: a breathing text glow, desynced from the panel |
567 | | - (3.6s) and demo (4.6s) cycles. Subtle on paper so the ink stays crisp; |
568 | | - fuller bloom on the machine. Static aura is the reduced-motion fallback. */ |
| 535 | +/* Headline phosphor aura: a static, subtle text glow. The panel, demo and |
| 536 | + headline glows are intentionally non-animated — no breathing loop — so the |
| 537 | + page reads as a tool rather than a neon UI. Subtle on paper so the ink stays |
| 538 | + crisp; a touch fuller on the machine. */ |
569 | 539 | .crt-headline { |
570 | | - text-shadow: 0 0 14px hsl(var(--brand) / 0.25); |
| 540 | + text-shadow: 0 0 6px hsl(var(--brand) / 0.12); |
571 | 541 | } |
572 | 542 |
|
573 | 543 | .dark .crt-headline { |
574 | | - text-shadow: 0 0 14px hsl(var(--link) / 0.4); |
575 | | -} |
576 | | - |
577 | | -@media (prefers-reduced-motion: no-preference) { |
578 | | - .crt-headline { |
579 | | - animation: headline-breathe 5.2s ease-in-out infinite; |
580 | | - } |
581 | | - |
582 | | - .dark .crt-headline { |
583 | | - animation-name: headline-breathe-dark; |
584 | | - } |
585 | | -} |
586 | | - |
587 | | -@keyframes headline-breathe { |
588 | | - 0%, 100% { text-shadow: 0 0 10px hsl(var(--brand) / 0.18); } |
589 | | - 50% { text-shadow: 0 0 20px hsl(var(--brand) / 0.35); } |
590 | | -} |
591 | | - |
592 | | -@keyframes headline-breathe-dark { |
593 | | - 0%, 100% { text-shadow: 0 0 10px hsl(var(--link) / 0.3); } |
594 | | - 50% { text-shadow: 0 0 24px hsl(var(--link) / 0.55); } |
| 544 | + text-shadow: 0 0 6px hsl(var(--link) / 0.18); |
595 | 545 | } |
0 commit comments