186 lines
4.2 KiB
CSS
186 lines
4.2 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); }
|
|
}
|
|
|
|
/* Animations pour les éléments flottants */
|
|
@keyframes float-0 {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-10px) rotate(2deg); }
|
|
}
|
|
|
|
@keyframes float-1 {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
33% { transform: translateY(-8px) rotate(-1deg); }
|
|
66% { transform: translateY(-15px) rotate(1deg); }
|
|
}
|
|
|
|
@keyframes float-2 {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
25% { transform: translateY(-12px) rotate(1deg); }
|
|
75% { transform: translateY(-6px) rotate(-2deg); }
|
|
}
|
|
|
|
/* Animation pour l'élément principal du hero */
|
|
@keyframes gentle-float {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-15px) rotate(1deg); }
|
|
}
|
|
|
|
.animate-gentle-float {
|
|
animation: gentle-float 6s ease-in-out infinite;
|
|
}
|
|
|
|
/* Effet de lueur pour les éléments techniques */
|
|
@keyframes glow-pulse {
|
|
0%, 100% {
|
|
text-shadow: 0 0 5px rgba(168, 218, 255, 0.3),
|
|
0 0 10px rgba(168, 218, 255, 0.2),
|
|
0 0 15px rgba(168, 218, 255, 0.1);
|
|
}
|
|
50% {
|
|
text-shadow: 0 0 10px rgba(168, 218, 255, 0.4),
|
|
0 0 20px rgba(168, 218, 255, 0.3),
|
|
0 0 30px rgba(168, 218, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
/* Animation des lignes de connexion */
|
|
@keyframes data-flow {
|
|
0% { stroke-dasharray: 0, 100; }
|
|
50% { stroke-dasharray: 50, 100; }
|
|
100% { stroke-dasharray: 100, 100; }
|
|
}
|
|
|
|
/* Responsive pour les animations */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-gentle-float,
|
|
.animate-ping,
|
|
.animate-pulse {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Amélioration du scroll */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Empêcher le scroll horizontal global */
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Styles pour les popups */
|
|
.popup-content {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(31, 93, 137, 0.3) transparent;
|
|
}
|
|
|
|
.popup-content::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.popup-content::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.popup-content::-webkit-scrollbar-thumb {
|
|
background: rgba(31, 93, 137, 0.3);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.popup-content::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(31, 93, 137, 0.5);
|
|
}
|
|
|
|
/* Animation pour le bouton scroll to top */
|
|
@keyframes bounce-up {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-4px); }
|
|
}
|
|
|
|
.scroll-to-top:hover {
|
|
animation: bounce-up 0.6s ease-in-out;
|
|
}
|