f2a669f295
Hero 1 (Main): - Added 5 floating tech icons (server, database, cloud, shield, lightning) - BluisHost-style layered composition with central person illustration - Staggered animations with unique timing for each element - Blue brand color scheme maintained Hero 2 (WordPress Cloud): - Redesigned with central WordPress/code icon as focal point - Added 6 floating WordPress ecosystem icons (shield, cloud, zap, package, database, settings) - Repositioned 3 stats cards (99.9%, 10x, 24/7) around edges - Orange/gold theme for clear visual distinction - More organic layout matching Hero 1 style Animations: - Added new CSS keyframes: floatComplex, rotateSubtle, scaleBreath, floatDiagonal, bobFloat - Each element has unique animation timing and duration - GPU-accelerated CSS animations for smooth performance Both sections now have distinct visual identities while maintaining consistent floating element design language
135 lines
2.9 KiB
CSS
135 lines
2.9 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);
|
|
}
|
|
}
|
|
|
|
@keyframes floatComplex {
|
|
0%, 100% {
|
|
transform: translateY(0px) translateX(0px) rotate(0deg);
|
|
}
|
|
25% {
|
|
transform: translateY(-20px) translateX(15px) rotate(5deg);
|
|
}
|
|
50% {
|
|
transform: translateY(-35px) translateX(5px) rotate(-3deg);
|
|
}
|
|
75% {
|
|
transform: translateY(-18px) translateX(-12px) rotate(4deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotateSubtle {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes scaleBreath {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
@keyframes floatDiagonal {
|
|
0%, 100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
50% {
|
|
transform: translate(-25px, -25px);
|
|
}
|
|
}
|
|
|
|
@keyframes bobFloat {
|
|
0%, 100% {
|
|
transform: translateY(0px) scale(1);
|
|
}
|
|
50% {
|
|
transform: translateY(-25px) scale(1.05);
|
|
}
|
|
}
|
|
|