76 lines
1.7 KiB
CSS
76 lines
1.7 KiB
CSS
@import "tailwindcss";
|
|
@import "poyraz-ui/preset.css";
|
|
|
|
@source "../node_modules/poyraz-ui/dist";
|
|
|
|
@theme {
|
|
--font-secondary: "Nunito", ui-rounded, "Avenir Next", system-ui, sans-serif;
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--poyraz-font-secondary: "Nunito", ui-rounded, "Avenir Next", system-ui, sans-serif;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
@keyframes marquee {
|
|
0% { transform: translateX(0%); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
|
|
.animate-marquee {
|
|
animation: marquee 35s linear infinite;
|
|
}
|
|
|
|
.pause-on-hover:hover {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
@keyframes hero-wave-primary {
|
|
0%, 49.99% { opacity: 1; }
|
|
50%, 100% { opacity: 0; }
|
|
}
|
|
|
|
@keyframes hero-wave-secondary {
|
|
0%, 49.99% { opacity: 0; }
|
|
50%, 100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes hero-wave-sway {
|
|
0%, 100% { transform: rotate(0deg) translateY(0); }
|
|
25% { transform: rotate(-2deg) translateY(-1px); }
|
|
50% { transform: rotate(2.5deg) translateY(0); }
|
|
75% { transform: rotate(-1deg) translateY(-1px); }
|
|
}
|
|
|
|
.hero-wave-frame {
|
|
transform-origin: 70% 88%;
|
|
will-change: opacity, transform;
|
|
}
|
|
|
|
.hero-wave-frame-secondary {
|
|
opacity: 0;
|
|
}
|
|
|
|
.hero-wave:hover .hero-wave-frame-primary {
|
|
animation: hero-wave-primary 520ms steps(1, end) infinite, hero-wave-sway 720ms ease-in-out infinite;
|
|
}
|
|
|
|
.hero-wave:hover .hero-wave-frame-secondary {
|
|
animation: hero-wave-secondary 520ms steps(1, end) infinite, hero-wave-sway 720ms ease-in-out infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero-wave:hover .hero-wave-frame-primary {
|
|
animation: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
.hero-wave:hover .hero-wave-frame-secondary {
|
|
animation: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|