85 lines
1.9 KiB
CSS
85 lines
1.9 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Variables CSS pour les polices */
|
|
:root {
|
|
--font-heading: 'Dela Gothic One', sans-serif;
|
|
--font-body: 'Roboto', sans-serif;
|
|
}
|
|
|
|
/* Parallax animations */
|
|
@keyframes parallax-slow {
|
|
0% { transform: translateY(0px); }
|
|
100% { transform: translateY(-50px); }
|
|
}
|
|
|
|
@keyframes parallax-medium {
|
|
0% { transform: translateY(0px); }
|
|
100% { transform: translateY(-80px); }
|
|
}
|
|
|
|
@keyframes parallax-fast {
|
|
0% { transform: translateY(0px); }
|
|
100% { transform: translateY(-120px); }
|
|
}
|
|
|
|
@keyframes parallax-very-slow {
|
|
0% { transform: translateY(0px); }
|
|
100% { transform: translateY(-20px); }
|
|
}
|
|
|
|
/* Floating animations with different speeds */
|
|
@keyframes float-slow {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-20px) rotate(5deg); }
|
|
}
|
|
|
|
@keyframes float-medium {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-15px) rotate(-3deg); }
|
|
}
|
|
|
|
@keyframes float-fast {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-10px) rotate(3deg); }
|
|
}
|
|
|
|
@keyframes float-very-slow {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-30px) rotate(-2deg); }
|
|
}
|
|
|
|
/* Apply animations */
|
|
.animate-parallax-slow {
|
|
animation: parallax-slow 20s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-parallax-medium {
|
|
animation: parallax-medium 15s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-parallax-fast {
|
|
animation: parallax-fast 10s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-parallax-very-slow {
|
|
animation: parallax-very-slow 30s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-float-slow {
|
|
animation: float-slow 8s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-float-medium {
|
|
animation: float-medium 6s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-float-fast {
|
|
animation: float-fast 4s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-float-very-slow {
|
|
animation: float-very-slow 12s ease-in-out infinite;
|
|
}
|