Skip to content

Commit 22271ac

Browse files
committed
refactor: tone down dark-mode glow and motion on landing
Remove the infinite phosphor breathing-glow loops (panel, demo, and headline keyframes) so the glows render static, and dial back glow radius/opacity on the terminal/demo panels, headline aura, and dark section rules. The Red Phosphor palette is unchanged; the page reads as a tool rather than a neon game UI.
1 parent 5d3aceb commit 22271ac

1 file changed

Lines changed: 12 additions & 62 deletions

File tree

src/index.css

Lines changed: 12 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -416,11 +416,11 @@
416416
/* CRT accents: the terminal panel glows red; dark-mode section rules are lit
417417
phosphor; the hero cursor blinks unless the user prefers reduced motion. */
418418
.terminal-glow {
419-
box-shadow: 0 0 26px hsl(var(--brand) / 0.55);
419+
box-shadow: 0 0 10px hsl(var(--brand) / 0.22);
420420
}
421421

422422
.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);
424424
}
425425

426426
.crt-cursor {
@@ -444,7 +444,7 @@
444444
.dark .page-section:not(:first-child)::after,
445445
.dark .footer-links::before,
446446
.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));
448448
}
449449

450450
/* Taint-flow headline: pure glyph glow, no background shapes. On load a glow
@@ -501,14 +501,14 @@
501501
}
502502
}
503503

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. */
505505
.demo-glow {
506-
box-shadow: 0 0 26px hsl(var(--brand) / 0.55);
506+
box-shadow: 0 0 10px hsl(var(--brand) / 0.22);
507507
}
508508

509509
.dark .demo-glow {
510510
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);
512512
}
513513

514514
/* Demo carousel: the incoming panel slides in from the travel direction. */
@@ -532,64 +532,14 @@
532532
to { opacity: 1; transform: translateX(0); }
533533
}
534534

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. */
569539
.crt-headline {
570-
text-shadow: 0 0 14px hsl(var(--brand) / 0.25);
540+
text-shadow: 0 0 6px hsl(var(--brand) / 0.12);
571541
}
572542

573543
.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);
595545
}

0 commit comments

Comments
 (0)