main catalog card color changed

This commit is contained in:
nabijonovdavronbek619@gmail.com
2026-02-10 13:57:25 +05:00
parent 1ab5c6b741
commit f688a01afd
2 changed files with 57 additions and 27 deletions

View File

@@ -1,3 +1,14 @@
@keyframes pathPulse {
0%,
100% {
opacity: 1;
filter: url(#neon-glow) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}
50% {
opacity: 0.8;
filter: url(#neon-glow) drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
}
}
.initial-loading {
position: fixed;
top: 0;
@@ -23,19 +34,24 @@
flex-direction: column;
align-items: center;
gap: 2rem;
}
.initial-svg {
width: 250px;
height: 250px;
animation: initialFloat 2s ease-in-out infinite, initialScale 1.5s ease-in-out infinite;
}
.initial-path {
fill: url(#initial-gradient);
filter: url(#initial-glow);
.initial-loading-content svg {
width: 100%;
height: 100%;
animation:
initialFloat 2s ease-in-out infinite,
initialScale 1.5s ease-in-out infinite;
}
/* SVG path'larga stil */
.logo-path {
fill: url(#neon-gradient);
filter: url(#neon-glow);
stroke: #ffffff;
stroke-width: 2;
stroke-width: 0.1;
animation: pathPulse 1.5s ease-in-out infinite;
}
@@ -53,8 +69,9 @@
.loading-dots span {
width: 12px;
height: 12px;
background: #ff0000;
background: linear-gradient(135deg, #e0e0e0 0%, #ffffff 50%, #c0c0c0 100%);
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
animation: dotBounce 1.4s ease-in-out infinite;
}
@@ -72,36 +89,29 @@
/* Animations */
@keyframes initialFloat {
0%, 100% {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
transform: translateY(-20px);
}
}
@keyframes initialScale {
0%, 100% {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
@keyframes pathPulse {
0%, 100% {
opacity: 1;
stroke-width: 2;
}
50% {
opacity: 0.7;
stroke-width: 3;
transform: scale(1.05);
}
}
@keyframes dotBounce {
0%, 80%, 100% {
0%,
80%,
100% {
transform: scale(0);
opacity: 0.5;
}
@@ -114,4 +124,24 @@
/* Smooth scroll prevention */
body:has(.initial-loading:not(.fade-out)) {
overflow: hidden;
}
}
/* Responsive */
@media (max-width: 768px) {
.initial-loading-content {
width: 200px;
height: 200px;
}
}
@media (max-width: 480px) {
.initial-loading-content {
width: 150px;
height: 150px;
}
.loading-dots span {
width: 10px;
height: 10px;
}
}