50e97bb613
- Create separate background layer using ::before pseudo-element - Move hue-rotate animation to background layer with z-index: -1 - Remove filter from main container to prevent inheritance - Use equivalent gradient colors in CSS (pink-100, purple-50, indigo-100) - Foreground elements (brain emoji, text) now maintain original colors - Background still animates smoothly without affecting content
29 lines
543 B
CSS
29 lines
543 B
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
@config "../tailwind.config.js";
|
|
|
|
@keyframes hue-rotate {
|
|
0% {
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
100% {
|
|
filter: hue-rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.animated-bg-container {
|
|
position: relative;
|
|
}
|
|
|
|
.animated-bg-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, #fdf2f8, #faf5ff, #eef2ff);
|
|
animation: hue-rotate 60s linear infinite;
|
|
animation-delay: var(--random-delay, 0s);
|
|
z-index: -1;
|
|
}
|