root
111 lines
1.9 KiB
CSS
111 lines
1.9 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap");
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@keyframes float {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-14px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.float-slow {
|
|
animation: float 10s ease-in-out infinite;
|
|
}
|
|
|
|
.float-medium {
|
|
animation: float 7s ease-in-out infinite;
|
|
}
|
|
|
|
.float-fast {
|
|
animation: float 5s ease-in-out infinite;
|
|
}
|
|
|
|
.hero-hover {
|
|
position: relative;
|
|
}
|
|
|
|
.hero-voice-ring {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 52%;
|
|
width: 80px;
|
|
height: 80px;
|
|
border: 2px solid rgba(255, 255, 255, 0.7);
|
|
border-radius: 9999px;
|
|
transform: translate(-50%, -50%) scale(0.75);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-voice-ring--two {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-color: rgba(255, 255, 255, 0.45);
|
|
}
|
|
|
|
.hero-voice-ring--three {
|
|
width: 160px;
|
|
height: 160px;
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.hero-hover:hover .hero-voice-ring {
|
|
opacity: 1;
|
|
animation: heroVoicePulse 1.6s ease-out infinite;
|
|
}
|
|
|
|
.hero-hover:hover .hero-voice-ring--two {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.hero-hover:hover .hero-voice-ring--three {
|
|
animation-delay: 0.4s;
|
|
}
|
|
}
|
|
|
|
@keyframes heroVoicePulse {
|
|
0% {
|
|
transform: translate(-50%, -50%) scale(0.75);
|
|
opacity: 0.65;
|
|
}
|
|
70% {
|
|
transform: translate(-50%, -50%) scale(1.2);
|
|
opacity: 0.1;
|
|
}
|
|
100% {
|
|
transform: translate(-50%, -50%) scale(1.3);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% { background-position: 0% center; }
|
|
100% { background-position: 200% center; }
|
|
}
|
|
.animate-gradient {
|
|
animation: gradient 3s linear infinite;
|
|
}
|