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; }
}
@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 {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.35; }
15% { transform: translate(-20%, -30%) scale(1.15); opacity: 0.45; }
30% { transform: translate(-65%, -70%) scale(0.9); opacity: 0.3; }
45% { transform: translate(-80%, -40%) scale(1.1); opacity: 0.5; }
60% { transform: translate(-30%, -75%) scale(0.95); opacity: 0.35; }
75% { transform: translate(-70%, -25%) scale(1.2); opacity: 0.45; }
90% { transform: translate(-40%, -60%) scale(1.05); opacity: 0.4; }
100% { 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.75; }
30% { transform: translate(-65%, -70%) scale(0.9); opacity: 0.55; }
45% { transform: translate(-80%, -40%) scale(1.1); opacity: 0.8; }
60% { transform: translate(-30%, -75%) scale(0.95); opacity: 0.65; }
75% { transform: translate(-70%, -25%) scale(1.2); opacity: 0.75; }
90% { transform: translate(-40%, -60%) scale(1.05); opacity: 0.7; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0.65; }
}
/* Particle container */
@@ -2961,14 +2966,16 @@ p:last-child { margin-bottom: 0; }
position: absolute;
top: 50%;
left: 50%;
width: 700px;
height: 700px;
width: 950px;
height: 950px;
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;
pointer-events: none;
filter: blur(40px);
animation: glow-drift 20s ease-in-out infinite;
filter: blur(22px);
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 */
@@ -3024,12 +3031,14 @@ p:last-child { margin-bottom: 0; }
.hero-particle,
.hero-animated__glow {
animation: none;
opacity: var(--p-opacity, 0.2);
opacity: 0.65;
transform: translate(-50%, -50%);
filter: blur(22px);
}
}
@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-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"] .page-hero-animated { background: #0D0D0D; }
[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; }