76 lines
1.4 KiB
CSS
76 lines
1.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-primary: #0df2df;
|
|
--color-accent-violet: #8b5cf6;
|
|
--color-accent-orange: #f97316;
|
|
--font-display: "Plus Jakarta Sans", sans-serif;
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
background-color: #f8fafc;
|
|
color: #0f172a;
|
|
font-family: var(--font-display);
|
|
@apply antialiased;
|
|
}
|
|
}
|
|
|
|
@utility gradient-text {
|
|
background-image: linear-gradient(to right, #0df2df, #8b5cf6, #f97316) !important;
|
|
-webkit-background-clip: text !important;
|
|
background-clip: text !important;
|
|
color: transparent !important;
|
|
display: inline !important;
|
|
}
|
|
|
|
@utility icon-circle {
|
|
@apply bg-slate-100 rounded-full flex items-center justify-center transition-all duration-300 hover:bg-slate-200 hover:scale-105;
|
|
}
|
|
|
|
@utility glass-card {
|
|
@apply bg-white/80 backdrop-blur-xl border border-primary/10;
|
|
}
|
|
|
|
@keyframes float {
|
|
0% {
|
|
transform: translateY(0px);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@utility animate-fade-in {
|
|
animation: fade-in 0.4s ease-out forwards;
|
|
}
|
|
|
|
@utility animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
@utility scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
} |