Initial commit
This commit is contained in:
+102
@@ -0,0 +1,102 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user