ritual.sh/assets/sass/partials/_neon-sign.scss
2025-12-09 11:54:24 +00:00

96 lines
1.7 KiB
SCSS

/* Neon sign styling */
.neon-sign {
position: absolute;
top: 5%;
left: 60%;
transform: translateX(-50%) rotate(-10deg);
z-index: 1;
> .neon-text {
font-family: "Neonderthaw", cursive;
font-size: 7rem;
color: #fff;
text-shadow:
/* White core */
0 0 5px #fff,
0 0 5px #fff,
/* Bright green inner glow */ 0 0 21px #0f0,
0 0 42px #0f0,
0 0 82px #0f0,
/* Outer green glow */ 0 0 92px #0f0,
0 0 142px #0f0,
0 0 181px #0f0;
animation:
neon-flicker 10s infinite alternate,
neon-pulse 3s ease-in-out infinite;
}
[role="navigation"] & {
display: inline-block;
position: fixed;
top: 20px;
left: 10px;
transform: translateX(0) rotate(-10deg);
z-index: 9999;
> .neon-text {
font-size: 2rem;
text-shadow:
/* White core */
0 0 5px #fff,
0 0 5px #fff,
/* Bright green inner glow */ 0 0 11px #0f0,
0 0 22px #0f0,
0 0 42px #0f0,
/* Outer green glow */ 0 0 22px #0f0,
0 0 42px #0f0,
0 0 81px #0f0;
}
}
}
@keyframes neon-pulse {
0%,
100% {
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #0f0,
0 0 42px #0f0,
0 0 82px #0f0,
0 0 92px #0f0,
0 0 102px #0f0,
0 0 151px #0f0;
}
50% {
text-shadow:
0 0 4px #fff,
0 0 7px #fff,
0 0 15px #0f0,
0 0 30px #0f0,
0 0 60px #0f0,
0 0 70px #0f0,
0 0 80px #0f0,
0 0 120px #0f0;
}
}
@keyframes neon-flicker {
0%,
19%,
21%,
23%,
25%,
54%,
56%,
100% {
opacity: 1;
}
20%,
24%,
55% {
opacity: 0.4;
}
22% {
opacity: 0.6;
}
}