Spaces:
Running
Running
File size: 3,009 Bytes
d136ad4 135fe83 351839d 135fe83 351839d 135fe83 351839d 135fe83 351839d 135fe83 351839d 135fe83 351839d 135fe83 351839d 135fe83 351839d 135fe83 351839d 135fe83 351839d 135fe83 351839d 135fe83 351839d 135fe83 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 |
/* Base */
html {
scroll-behavior: smooth;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(45deg, #5a67d8, #6b46c1);
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes shimmer {
0% { background-position: -200px 0; }
100% { background-position: 200px 0; }
}
/* Components */
.carousel-slide {
animation: fadeIn 0.8s ease-out;
}
.color-btn, .size-btn {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.color-btn:hover {
transform: scale(1.15);
}
.size-btn:hover {
background-color: rgb(238 242 255);
}
/* Toast */
.toast {
position: fixed;
bottom: 24px;
right: 24px;
background: linear-gradient(90deg, #10b981, #34d399);
color: white;
padding: 16px 24px;
border-radius: 12px;
box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.25);
z-index: 1000;
animation: slideIn 0.4s ease-out;
font-weight: 500;
backdrop-filter: blur(8px);
}
/* Cards */
.product-card {
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.product-card:hover {
transform: translateY(-12px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
}
/* Buttons */
.btn-primary {
background: linear-gradient(90deg, #667eea, #764ba2);
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn-primary:hover::before {
width: 300px;
height: 300px;
}
/* Responsive */
@media (max-width: 768px) {
.carousel-track {
height: 400px;
}
}
/* New */
.shimmer {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200px 100%;
animation: shimmer 1.5s infinite linear;
}
.float {
animation: float 3s ease-in-out infinite;
}
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Navbar adjustments */
custom-navbar {
display: block;
}
|