|
137 | 137 | pointer-events: none; |
138 | 138 | } |
139 | 139 |
|
140 | | -/* confetti */ |
141 | | -@keyframes confetti-drift { |
142 | | - 0% { transform: translateY(-10vh) rotate(0deg); opacity: 0; } |
143 | | - 10% { opacity: 1; } |
144 | | - 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } |
145 | | -} |
146 | | -.confetti-piece { |
147 | | - position: absolute; |
148 | | - animation: confetti-drift linear infinite; |
149 | | - pointer-events: none; |
150 | | - opacity: 0; |
151 | | -} |
152 | | -.confetti-piece { |
153 | | - width: 10px; |
154 | | - height: 10px; |
155 | | - border-radius: 2px; |
156 | | -} |
157 | | - |
158 | 140 | .hero-eyebrow { |
159 | 141 | display: inline-flex; align-items: center; gap: 8px; |
160 | 142 | font-family: var(--font-mono); |
|
191 | 173 | z-index: 1; |
192 | 174 | } |
193 | 175 | @keyframes lava-letter { |
194 | | - 0% { text-shadow: 3px 3px 0 #FFA84F; } |
195 | | - 25% { text-shadow: 3px 3px 0 #e8a44a; } |
196 | | - 50% { text-shadow: 3px 3px 0 #1B95C1; } |
197 | | - 75% { text-shadow: 3px 3px 0 #3aadd4; } |
198 | | - 100% { text-shadow: 3px 3px 0 #FFA84F; } |
| 176 | + 0% { text-shadow: 2px 2px 0 #FFA84F; } |
| 177 | + 25% { text-shadow: 2px 2px 0 #e8a44a; } |
| 178 | + 50% { text-shadow: 2px 2px 0 #1B95C1; } |
| 179 | + 75% { text-shadow: 2px 2px 0 #3aadd4; } |
| 180 | + 100% { text-shadow: 2px 2px 0 #FFA84F; } |
199 | 181 | } |
200 | 182 | .lava-text { display: inline; } |
201 | 183 | .lava-letter { |
202 | 184 | display: inline-block; |
203 | | - animation: lava-letter 4s ease-in-out infinite; |
204 | | - animation-delay: calc(var(--i) * -0.35s); |
| 185 | + animation: lava-letter 8s ease-in-out infinite; |
| 186 | + animation-delay: calc(var(--i) * -0.6s); |
205 | 187 | } |
206 | 188 |
|
207 | 189 | .hero-tagline { |
|
601 | 583 | <!-- HERO --> |
602 | 584 | <header class="hero"> |
603 | 585 | <!-- Confetti pieces --> |
604 | | - <div class="confetti-piece" style="left:5%;animation-duration:5s;animation-delay:0s;background:var(--neon-pink);"></div> |
605 | | - <div class="confetti-piece" style="left:12%;animation-duration:6s;animation-delay:1.2s;background:var(--neon-blue);border-radius:50%;"></div> |
606 | | - <div class="confetti-piece" style="left:22%;animation-duration:5.5s;animation-delay:.4s;background:var(--neon-green);"></div> |
607 | | - <div class="confetti-piece" style="left:33%;animation-duration:6.5s;animation-delay:2s;background:var(--neon-gold);border-radius:50%;"></div> |
608 | | - <div class="confetti-piece" style="left:44%;animation-duration:5.2s;animation-delay:.8s;background:var(--neon-purple);"></div> |
609 | | - <div class="confetti-piece" style="left:55%;animation-duration:6.2s;animation-delay:1.5s;background:var(--neon-pink);border-radius:50%;"></div> |
610 | | - <div class="confetti-piece" style="left:66%;animation-duration:5.8s;animation-delay:.2s;background:var(--neon-blue);"></div> |
611 | | - <div class="confetti-piece" style="left:77%;animation-duration:6.8s;animation-delay:2.5s;background:var(--neon-green);border-radius:50%;"></div> |
612 | | - <div class="confetti-piece" style="left:88%;animation-duration:5.4s;animation-delay:1s;background:var(--neon-gold);"></div> |
613 | | - <div class="confetti-piece" style="left:95%;animation-duration:6.4s;animation-delay:.6s;background:var(--neon-purple);border-radius:50%;"></div> |
614 | 586 |
|
615 | 587 | <div class="container"> |
616 | 588 | <div class="hero-eyebrow"><span class="dot"></span> GRC Engineering Open Source</div> |
|
0 commit comments