OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Sync: enhance glow animations and adjust particle effects for improved visual appeal

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 15:01:06 -05:00
parent 78065e0143
commit 018928dd9b
1 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
theme/assets/css/main.css
View File

@@ -2913,15 +2913,20 @@ p:last-child { margin-bottom: 0; }
100% { transform: translateY(var(--p-ty, -100vh)) translateX(var(--p-tx, 40px)) scale(var(--p-scale-end, 0.3)); opacity: 0; } 100% { transform: translateY(var(--p-ty, -100vh)) translateX(var(--p-tx, 40px)) scale(var(--p-scale-end, 0.3)); opacity: 0; }
} }
@keyframes glow-appear {
from { opacity: 0; filter: blur(80px); transform: translate(-50%, -50%) scale(0.2); }
to { opacity: 0.65; filter: blur(22px); transform: translate(-50%, -50%) scale(1); }
}
@keyframes glow-drift { @keyframes glow-drift {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.35; } 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.65; }
15% { transform: translate(-20%, -30%) scale(1.15); opacity: 0.45; } 15% { transform: translate(-20%, -30%) scale(1.15); opacity: 0.75; }
30% { transform: translate(-65%, -70%) scale(0.9); opacity: 0.3; } 30% { transform: translate(-65%, -70%) scale(0.9); opacity: 0.55; }
45% { transform: translate(-80%, -40%) scale(1.1); opacity: 0.5; } 45% { transform: translate(-80%, -40%) scale(1.1); opacity: 0.8; }
60% { transform: translate(-30%, -75%) scale(0.95); opacity: 0.35; } 60% { transform: translate(-30%, -75%) scale(0.95); opacity: 0.65; }
75% { transform: translate(-70%, -25%) scale(1.2); opacity: 0.45; } 75% { transform: translate(-70%, -25%) scale(1.2); opacity: 0.75; }
90% { transform: translate(-40%, -60%) scale(1.05); opacity: 0.4; } 90% { transform: translate(-40%, -60%) scale(1.05); opacity: 0.7; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0.35; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.65; }
} }
/* Particle container */ /* Particle container */
@@ -2961,14 +2966,16 @@ p:last-child { margin-bottom: 0; }
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 700px; width: 950px;
height: 700px; height: 950px;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.18) 0%, rgba(var(--color-primary-rgb), 0.06) 50%, transparent 70%); background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.32) 0%, rgba(var(--color-primary-rgb), 0.14) 45%, rgba(var(--color-primary-rgb), 0.04) 70%, transparent 90%);
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
filter: blur(40px); filter: blur(22px);
animation: glow-drift 20s ease-in-out infinite; animation:
glow-appear 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards,
glow-drift 20s 0.45s ease-in-out infinite;
} }
/* Animated hero layout - centered single-column content */ /* Animated hero layout - centered single-column content */
@@ -3024,12 +3031,14 @@ p:last-child { margin-bottom: 0; }
.hero-particle, .hero-particle,
.hero-animated__glow { .hero-animated__glow {
animation: none; animation: none;
opacity: var(--p-opacity, 0.2); opacity: 0.65;
transform: translate(-50%, -50%);
filter: blur(22px);
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.hero-animated__glow { width: 400px; height: 400px; } .hero-animated__glow { width: 580px; height: 580px; }
.hero-animated__inner { padding-block: 7rem 4rem; } .hero-animated__inner { padding-block: 7rem 4rem; }
.hero-stats--three { gap: 1.5rem; flex-wrap: wrap; justify-content: center; } .hero-stats--three { gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
} }
@@ -3506,7 +3515,7 @@ p:last-child { margin-bottom: 0; }
[data-theme="dark"] .hero-animated { background: #0D0D0D; } [data-theme="dark"] .hero-animated { background: #0D0D0D; }
[data-theme="dark"] .page-hero-animated { background: #0D0D0D; } [data-theme="dark"] .page-hero-animated { background: #0D0D0D; }
[data-theme="dark"] .hero-animated__glow { [data-theme="dark"] .hero-animated__glow {
background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.22) 0%, rgba(var(--color-primary-rgb), 0.08) 50%, transparent 70%); background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.40) 0%, rgba(var(--color-primary-rgb), 0.18) 45%, rgba(var(--color-primary-rgb), 0.06) 70%, transparent 90%);
} }
[data-theme="dark"] .site-footer { background: #0D0D0D; } [data-theme="dark"] .site-footer { background: #0D0D0D; }