1dab36d4ef
Some checks failed
CD - Build & Deploy / build-and-push (push) Has been cancelled
CD - Build & Deploy / package-helm (push) Has been cancelled
CD - Build & Deploy / deploy-staging (push) Has been cancelled
CD - Build & Deploy / deploy-production (push) Has been cancelled
CD - Build & Deploy / release (push) Has been cancelled
CI / test (3.11) (push) Has been cancelled
CI / test (3.12) (push) Has been cancelled
CI / security (push) Has been cancelled
- Implemented sequential fade-in animations for all hero elements - Each element appears with timed delay (0.2s → 1.3s) - Added fadeInUp, fadeInScale, slideInRight animations - Main illustration fades in at 0.3s - Floating cards appear sequentially (0.9s, 1.1s, 1.3s) - Text and buttons animate from bottom to top - Smooth professional loading experience - Mimics layered reveal seen in premium themes Animation Timeline: - 0.2s: Coming soon badge - 0.3s: Main illustration - 0.4s: Heading - 0.6s: Description - 0.8s: Primary button - 1.0s: Secondary button - 0.9s-1.3s: Floating stats cards
82 lines
2.0 KiB
CSS
82 lines
2.0 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap');
|
|
|
|
body {
|
|
font-family: 'Vazirmatn', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
@keyframes gradientShift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
@keyframes glow {
|
|
0% { box-shadow: 0 12px 40px rgba(27, 75, 127, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
|
|
50% { box-shadow: 0 18px 50px rgba(27, 75, 127, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
|
|
100% { box-shadow: 0 12px 40px rgba(27, 75, 127, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { transform: scale(1); opacity: 1; }
|
|
50% { transform: scale(1.05); opacity: 0.8; }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
|
|
@keyframes floatSlow {
|
|
0%, 100% { transform: translateY(0px) translateX(0px); }
|
|
25% { transform: translateY(-15px) translateX(10px); }
|
|
50% { transform: translateY(-30px) translateX(0px); }
|
|
75% { transform: translateY(-15px) translateX(-10px); }
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes scaleFloat {
|
|
0%, 100% { transform: scale(1) translateY(0px); }
|
|
50% { transform: scale(1.05) translateY(-15px); }
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(60px) scale(0.9);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInScale {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(100px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|