124 lines
2.2 KiB
CSS
124 lines
2.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-white text-black font-sans;
|
|
}
|
|
}
|
|
|
|
@keyframes sway {
|
|
0% { transform: rotate(-1deg); }
|
|
50% { transform: rotate(1deg); }
|
|
100% { transform: rotate(-1deg); }
|
|
}
|
|
|
|
@keyframes mist {
|
|
0% { transform: translateX(-5%); opacity: 0.3; }
|
|
50% { transform: translateX(5%); opacity: 0.5; }
|
|
100% { transform: translateX(-5%); opacity: 0.3; }
|
|
}
|
|
|
|
@keyframes breeze {
|
|
0% { transform: translateY(0) scale(1); }
|
|
50% { transform: translateY(-5px) scale(1.02); }
|
|
100% { transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
@keyframes float {
|
|
0% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
100% { transform: translateY(0px); }
|
|
}
|
|
|
|
.animate-sway {
|
|
animation: sway 8s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-mist {
|
|
animation: mist 15s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-breeze {
|
|
animation: breeze 10s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.glass-navbar {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.layered-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.shape {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
}
|
|
|
|
.shape-1 {
|
|
width: 600px;
|
|
height: 600px;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
top: -200px;
|
|
left: -200px;
|
|
}
|
|
|
|
.shape-2 {
|
|
width: 500px;
|
|
height: 500px;
|
|
background: rgba(0, 0, 0, 0.03);
|
|
bottom: -150px;
|
|
right: -150px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.hero-gradient {
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
}
|
|
|
|
.text-stroke {
|
|
-webkit-text-stroke: 1px black;
|
|
color: transparent;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|