Spaces:
Sleeping
Sleeping
| /* ======================================== | |
| PAGES — Page-Specific Styles | |
| ======================================== */ | |
| /* === HERO SECTION === */ | |
| .hero { | |
| position: relative; | |
| min-height: 85vh; | |
| display: flex; | |
| align-items: center; | |
| overflow: hidden; | |
| background: linear-gradient(135deg, var(--clr-bg-primary) 0%, var(--clr-bg-secondary) 50%, var(--clr-accent) 100%); | |
| background-attachment: fixed; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -20%; | |
| width: 80%; | |
| height: 200%; | |
| background: radial-gradient(ellipse, rgba(45, 74, 83, 0.3) 0%, transparent 70%); | |
| animation: float 8s ease-in-out infinite; | |
| } | |
| .hero::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -30%; | |
| left: -10%; | |
| width: 60%; | |
| height: 150%; | |
| background: radial-gradient(ellipse, rgba(105, 129, 141, 0.15) 0%, transparent 70%); | |
| animation: float 6s ease-in-out infinite reverse; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 650px; | |
| } | |
| .hero-tag { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid var(--glass-border); | |
| padding: 0.4rem 1rem; | |
| border-radius: var(--radius-full); | |
| font-size: var(--fs-xs); | |
| color: var(--clr-text-secondary); | |
| margin-bottom: var(--space-xl); | |
| animation: fadeInDown 0.6s ease-out; | |
| } | |
| .hero-title { | |
| font-size: clamp(2.5rem, 5vw, 4rem); | |
| font-weight: var(--fw-extrabold); | |
| line-height: 1.1; | |
| margin-bottom: var(--space-lg); | |
| animation: fadeInUp 0.6s ease-out 0.1s both; | |
| } | |
| .hero-title span { | |
| background: linear-gradient(135deg, var(--clr-light), var(--clr-mid)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-desc { | |
| font-size: var(--fs-md); | |
| color: var(--clr-text-secondary); | |
| line-height: 1.7; | |
| margin-bottom: var(--space-2xl); | |
| max-width: 480px; | |
| animation: fadeInUp 0.6s ease-out 0.2s both; | |
| } | |
| .hero-actions { | |
| display: flex; | |
| gap: var(--space-md); | |
| animation: fadeInUp 0.6s ease-out 0.3s both; | |
| } | |
| .hero-stats { | |
| display: flex; | |
| gap: var(--space-2xl); | |
| margin-top: var(--space-3xl); | |
| animation: fadeInUp 0.6s ease-out 0.4s both; | |
| } | |
| .hero-stat-num { | |
| font-size: var(--fs-2xl); | |
| font-weight: var(--fw-bold); | |
| } | |
| .hero-stat-label { | |
| font-size: var(--fs-xs); | |
| color: var(--clr-text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| } | |
| /* Hero Dots (Slider Navigation) */ | |
| .hero-dots { | |
| display: flex; | |
| gap: var(--space-sm); | |
| margin-top: var(--space-xl); | |
| } | |
| .hero-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: var(--radius-full); | |
| background: var(--clr-gray); | |
| opacity: 0.4; | |
| cursor: pointer; | |
| transition: all var(--transition-base); | |
| border: none; | |
| } | |
| .hero-dot.active { | |
| opacity: 1; | |
| width: 36px; | |
| background: var(--clr-mid); | |
| } | |
| .hero-dot:hover { | |
| opacity: 0.8; | |
| } | |
| /* Light mode navbar override */ | |
| [data-theme="light"] .navbar { | |
| background: rgba(245, 247, 250, 0.9); | |
| } | |
| [data-theme="light"] .navbar.scrolled { | |
| background: rgba(245, 247, 250, 0.97); | |
| } | |
| [data-theme="light"] .product-card-action-btn { | |
| background: rgba(255, 255, 255, 0.85); | |
| } | |
| [data-theme="light"] .hero-title span { | |
| background: linear-gradient(135deg, var(--clr-accent), var(--clr-mid)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| [data-theme="light"] .hero { | |
| background: linear-gradient(135deg, #EEF3F7 0%, #D8E4EA 50%, #B8CED8 100%); | |
| } | |
| [data-theme="light"] .hero-title { | |
| color: #1A2B32; | |
| } | |
| [data-theme="light"] .hero-desc { | |
| color: #3A5060; | |
| } | |
| [data-theme="light"] .hero-tag { | |
| background: rgba(255, 255, 255, 0.7); | |
| color: #3A5060; | |
| } | |
| /* === CATEGORIES SECTION === */ | |
| .categories-grid { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: var(--space-lg); | |
| } | |
| .category-card { | |
| background: var(--clr-surface); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-2xl) var(--space-lg); | |
| text-align: center; | |
| transition: all var(--transition-base); | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .category-card::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, rgba(45, 74, 83, 0.1), transparent); | |
| opacity: 0; | |
| transition: opacity var(--transition-base); | |
| } | |
| .category-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-lg); | |
| border-color: var(--clr-accent); | |
| } | |
| .category-card:hover::before { | |
| opacity: 1; | |
| } | |
| .category-card-icon { | |
| font-size: 2.5rem; | |
| margin-bottom: var(--space-md); | |
| display: block; | |
| } | |
| .category-card-name { | |
| font-weight: var(--fw-semibold); | |
| margin-bottom: var(--space-xs); | |
| } | |
| .category-card-count { | |
| font-size: var(--fs-xs); | |
| color: var(--clr-text-muted); | |
| } | |
| /* === FEATURES SECTION === */ | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: var(--space-lg); | |
| } | |
| .feature-card { | |
| text-align: center; | |
| padding: var(--space-xl); | |
| border-radius: var(--radius-lg); | |
| background: var(--clr-surface); | |
| border: 1px solid var(--clr-border); | |
| transition: all var(--transition-base); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .feature-icon { | |
| font-size: 2rem; | |
| margin-bottom: var(--space-md); | |
| } | |
| .feature-title { | |
| font-weight: var(--fw-semibold); | |
| margin-bottom: var(--space-xs); | |
| font-size: var(--fs-sm); | |
| } | |
| .feature-desc { | |
| font-size: var(--fs-xs); | |
| color: var(--clr-text-muted); | |
| } | |
| /* === PROMO BANNER === */ | |
| .promo-banner { | |
| background: linear-gradient(135deg, var(--clr-accent), var(--clr-bg-secondary)); | |
| border-radius: var(--radius-xl); | |
| padding: var(--space-3xl); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .promo-banner::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -20%; | |
| width: 60%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent); | |
| } | |
| .promo-content { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .promo-tag { | |
| font-size: var(--fs-xs); | |
| color: var(--clr-warning); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| font-weight: var(--fw-semibold); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .promo-title { | |
| font-size: var(--fs-3xl); | |
| font-weight: var(--fw-bold); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .promo-desc { | |
| color: var(--clr-text-secondary); | |
| margin-bottom: var(--space-xl); | |
| } | |
| /* === CATALOG PAGE === */ | |
| .catalog-layout { | |
| display: grid; | |
| grid-template-columns: 260px 1fr; | |
| gap: var(--space-2xl); | |
| align-items: start; | |
| } | |
| .catalog-sidebar { | |
| position: sticky; | |
| top: calc(var(--navbar-height) + var(--space-lg)); | |
| background: var(--clr-surface); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-xl); | |
| } | |
| .filter-section { | |
| margin-bottom: var(--space-xl); | |
| } | |
| .filter-section:last-child { | |
| margin-bottom: 0; | |
| } | |
| .filter-title { | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-semibold); | |
| color: var(--clr-text-secondary); | |
| margin-bottom: var(--space-md); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| } | |
| .filter-options { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-sm); | |
| } | |
| .filter-option { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| padding: 0.4rem 0.6rem; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| font-size: var(--fs-sm); | |
| color: var(--clr-text-secondary); | |
| } | |
| .filter-option:hover { | |
| background: rgba(255, 255, 255, 0.03); | |
| color: var(--clr-text-primary); | |
| } | |
| .filter-option.active { | |
| background: var(--clr-accent); | |
| color: var(--clr-text-primary); | |
| } | |
| .filter-checkbox { | |
| width: 18px; | |
| height: 18px; | |
| border: 1.5px solid var(--clr-border); | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| transition: all var(--transition-fast); | |
| } | |
| .filter-option.active .filter-checkbox { | |
| background: var(--clr-mid); | |
| border-color: var(--clr-mid); | |
| } | |
| .filter-option.active .filter-checkbox::after { | |
| content: '✓'; | |
| font-size: 11px; | |
| color: white; | |
| } | |
| .price-range { | |
| display: flex; | |
| gap: var(--space-sm); | |
| align-items: center; | |
| } | |
| .price-range input { | |
| width: 100%; | |
| padding: 0.5rem; | |
| background: var(--clr-bg-primary); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-sm); | |
| color: var(--clr-text-primary); | |
| font-size: var(--fs-xs); | |
| text-align: center; | |
| } | |
| .catalog-toolbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-lg); | |
| padding-bottom: var(--space-md); | |
| border-bottom: 1px solid var(--clr-border); | |
| } | |
| .catalog-count { | |
| font-size: var(--fs-sm); | |
| color: var(--clr-text-muted); | |
| } | |
| .catalog-sort-group { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| } | |
| .view-toggle { | |
| display: flex; | |
| gap: var(--space-xs); | |
| } | |
| .view-btn { | |
| width: 36px; | |
| height: 36px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-sm); | |
| color: var(--clr-text-muted); | |
| transition: all var(--transition-fast); | |
| } | |
| .view-btn:hover, | |
| .view-btn.active { | |
| background: var(--clr-surface); | |
| color: var(--clr-text-primary); | |
| } | |
| .products-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: var(--space-lg); | |
| } | |
| .products-grid.list-view { | |
| grid-template-columns: 1fr; | |
| } | |
| .products-grid.list-view .product-card { | |
| display: grid; | |
| grid-template-columns: 200px 1fr; | |
| } | |
| .products-grid.list-view .product-card-image { | |
| aspect-ratio: 1; | |
| } | |
| /* === PRODUCT DETAIL PAGE === */ | |
| .product-detail { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-3xl); | |
| align-items: start; | |
| } | |
| .product-gallery { | |
| position: sticky; | |
| top: calc(var(--navbar-height) + var(--space-lg)); | |
| } | |
| .product-main-image { | |
| width: 100%; | |
| aspect-ratio: 3/4; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| background: var(--clr-surface); | |
| border: 1px solid var(--clr-border); | |
| margin-bottom: var(--space-md); | |
| } | |
| .product-main-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .product-thumbnails { | |
| display: flex; | |
| gap: var(--space-sm); | |
| } | |
| .product-thumbnail { | |
| width: 72px; | |
| height: 72px; | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| cursor: pointer; | |
| border: 2px solid transparent; | |
| transition: all var(--transition-fast); | |
| opacity: 0.6; | |
| } | |
| .product-thumbnail:hover, | |
| .product-thumbnail.active { | |
| opacity: 1; | |
| border-color: var(--clr-mid); | |
| } | |
| .product-thumbnail img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .product-info-header { | |
| margin-bottom: var(--space-xl); | |
| } | |
| .product-info-category { | |
| font-size: var(--fs-xs); | |
| color: var(--clr-text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| margin-bottom: var(--space-sm); | |
| } | |
| .product-info-title { | |
| font-size: var(--fs-2xl); | |
| font-weight: var(--fw-bold); | |
| margin-bottom: var(--space-md); | |
| } | |
| .product-info-rating { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .product-info-rating .stars { | |
| color: var(--clr-warning); | |
| } | |
| .product-info-rating .rating-text { | |
| color: var(--clr-text-muted); | |
| font-size: var(--fs-sm); | |
| } | |
| .product-info-price { | |
| display: flex; | |
| align-items: baseline; | |
| gap: var(--space-md); | |
| margin-bottom: var(--space-xl); | |
| } | |
| .product-info-price .price-current { | |
| font-size: var(--fs-3xl); | |
| font-weight: var(--fw-bold); | |
| } | |
| .product-info-price .price-old { | |
| font-size: var(--fs-lg); | |
| } | |
| .product-info-price .discount-badge { | |
| background: var(--clr-error); | |
| color: white; | |
| padding: 0.2rem 0.6rem; | |
| border-radius: var(--radius-full); | |
| font-size: var(--fs-xs); | |
| font-weight: var(--fw-semibold); | |
| } | |
| .product-option-group { | |
| margin-bottom: var(--space-xl); | |
| } | |
| .product-option-label { | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-medium); | |
| color: var(--clr-text-secondary); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .product-option-label span { | |
| color: var(--clr-text-primary); | |
| } | |
| .product-actions { | |
| display: flex; | |
| gap: var(--space-md); | |
| margin-bottom: var(--space-xl); | |
| padding-bottom: var(--space-xl); | |
| border-bottom: 1px solid var(--clr-border); | |
| } | |
| .product-actions .btn { | |
| flex: 1; | |
| } | |
| .product-features { | |
| display: flex; | |
| gap: var(--space-xl); | |
| padding: var(--space-lg) 0; | |
| } | |
| .product-feature-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| font-size: var(--fs-sm); | |
| color: var(--clr-text-muted); | |
| } | |
| /* === CART PAGE === */ | |
| .cart-layout { | |
| display: grid; | |
| grid-template-columns: 1fr 380px; | |
| gap: var(--space-2xl); | |
| align-items: start; | |
| } | |
| .cart-item { | |
| display: grid; | |
| grid-template-columns: 100px 1fr auto; | |
| gap: var(--space-lg); | |
| align-items: center; | |
| padding: var(--space-lg); | |
| background: var(--clr-surface); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-lg); | |
| margin-bottom: var(--space-md); | |
| transition: all var(--transition-fast); | |
| } | |
| .cart-item:hover { | |
| border-color: var(--clr-border-hover); | |
| } | |
| .cart-item-image { | |
| width: 100px; | |
| height: 120px; | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| } | |
| .cart-item-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .cart-item-name { | |
| font-weight: var(--fw-semibold); | |
| margin-bottom: var(--space-xs); | |
| } | |
| .cart-item-meta { | |
| font-size: var(--fs-xs); | |
| color: var(--clr-text-muted); | |
| } | |
| .cart-item-price { | |
| font-weight: var(--fw-bold); | |
| margin-top: var(--space-sm); | |
| } | |
| .cart-item-remove { | |
| color: var(--clr-gray); | |
| font-size: var(--fs-xs); | |
| cursor: pointer; | |
| transition: color var(--transition-fast); | |
| } | |
| .cart-item-remove:hover { | |
| color: var(--clr-error); | |
| } | |
| .cart-summary { | |
| background: var(--clr-surface); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-xl); | |
| position: sticky; | |
| top: calc(var(--navbar-height) + var(--space-lg)); | |
| } | |
| .cart-summary-title { | |
| font-size: var(--fs-lg); | |
| font-weight: var(--fw-semibold); | |
| margin-bottom: var(--space-lg); | |
| padding-bottom: var(--space-md); | |
| border-bottom: 1px solid var(--clr-border); | |
| } | |
| .cart-summary-row { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: var(--space-sm) 0; | |
| font-size: var(--fs-sm); | |
| color: var(--clr-text-secondary); | |
| } | |
| .cart-summary-row.total { | |
| padding-top: var(--space-md); | |
| margin-top: var(--space-md); | |
| border-top: 1px solid var(--clr-border); | |
| font-weight: var(--fw-bold); | |
| font-size: var(--fs-lg); | |
| color: var(--clr-text-primary); | |
| } | |
| .cart-summary .promo-input { | |
| display: flex; | |
| gap: var(--space-sm); | |
| margin: var(--space-lg) 0; | |
| } | |
| .cart-summary .promo-input input { | |
| flex: 1; | |
| } | |
| /* === CHECKOUT PAGE === */ | |
| .checkout-layout { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .checkout-step { | |
| display: none; | |
| } | |
| .checkout-step.active { | |
| display: block; | |
| animation: fadeInUp 0.4s ease-out; | |
| } | |
| .checkout-step-title { | |
| font-size: var(--fs-xl); | |
| font-weight: var(--fw-semibold); | |
| margin-bottom: var(--space-xl); | |
| } | |
| .order-success { | |
| text-align: center; | |
| padding: var(--space-4xl) 0; | |
| } | |
| .order-success-icon { | |
| font-size: 4rem; | |
| margin-bottom: var(--space-lg); | |
| } | |
| .order-success-title { | |
| font-size: var(--fs-2xl); | |
| font-weight: var(--fw-bold); | |
| margin-bottom: var(--space-md); | |
| } | |
| .order-success-id { | |
| font-size: var(--fs-lg); | |
| color: var(--clr-mid); | |
| font-weight: var(--fw-semibold); | |
| margin-bottom: var(--space-md); | |
| } | |
| .order-success-text { | |
| color: var(--clr-text-muted); | |
| margin-bottom: var(--space-xl); | |
| } | |
| /* === WISHLIST PAGE === */ | |
| .wishlist-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: var(--space-lg); | |
| } | |
| /* === PROFILE PAGE === */ | |
| .profile-layout { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| gap: var(--space-2xl); | |
| align-items: start; | |
| } | |
| .profile-sidebar { | |
| background: var(--clr-surface); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-xl); | |
| } | |
| .profile-avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: var(--radius-full); | |
| background: var(--clr-accent); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: var(--fs-2xl); | |
| font-weight: var(--fw-bold); | |
| margin: 0 auto var(--space-md); | |
| } | |
| .profile-name { | |
| text-align: center; | |
| font-weight: var(--fw-semibold); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .profile-email { | |
| text-align: center; | |
| font-size: var(--fs-sm); | |
| color: var(--clr-text-muted); | |
| margin-bottom: var(--space-xl); | |
| } | |
| .profile-nav { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-xs); | |
| } | |
| .profile-nav a { | |
| padding: 0.6rem 1rem; | |
| border-radius: var(--radius-md); | |
| font-size: var(--fs-sm); | |
| color: var(--clr-text-secondary); | |
| transition: all var(--transition-fast); | |
| } | |
| .profile-nav a:hover { | |
| background: rgba(255, 255, 255, 0.03); | |
| color: var(--clr-text-primary); | |
| } | |
| .profile-nav a.active { | |
| background: var(--clr-accent); | |
| color: var(--clr-text-primary); | |
| } | |
| .profile-content { | |
| background: var(--clr-surface); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-2xl); | |
| } | |
| .order-card { | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| margin-bottom: var(--space-md); | |
| transition: all var(--transition-fast); | |
| } | |
| .order-card:hover { | |
| border-color: var(--clr-border-hover); | |
| } | |
| .order-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-md); | |
| } | |
| .order-id { | |
| font-weight: var(--fw-semibold); | |
| } | |
| .order-date { | |
| font-size: var(--fs-xs); | |
| color: var(--clr-text-muted); | |
| } | |
| .order-status { | |
| padding: 0.25rem 0.75rem; | |
| border-radius: var(--radius-full); | |
| font-size: var(--fs-xs); | |
| font-weight: var(--fw-semibold); | |
| } | |
| .order-status.kutilmoqda { | |
| background: rgba(251, 191, 36, 0.15); | |
| color: var(--clr-warning); | |
| } | |
| .order-status.Kutilmoqda { | |
| background: rgba(251, 191, 36, 0.15); | |
| color: var(--clr-warning); | |
| } | |
| .order-status.olib-ketildi, | |
| .order-status[class*="Olib"] { | |
| background: rgba(52, 211, 153, 0.15); | |
| color: var(--clr-success); | |
| } | |
| .order-status.bekor-qilindi, | |
| .order-status[class*="Bekor"] { | |
| background: rgba(239, 68, 68, 0.15); | |
| color: var(--clr-error); | |
| } | |
| .order-items { | |
| display: flex; | |
| gap: var(--space-sm); | |
| flex-wrap: wrap; | |
| } | |
| .order-item-thumb { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: var(--radius-sm); | |
| overflow: hidden; | |
| border: 1px solid var(--clr-border); | |
| } | |
| .order-item-thumb img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .order-total { | |
| text-align: right; | |
| font-weight: var(--fw-semibold); | |
| margin-top: var(--space-md); | |
| padding-top: var(--space-md); | |
| border-top: 1px solid var(--clr-border); | |
| } | |
| /* === RESPONSIVE === */ | |
| @media (max-width: 1024px) { | |
| .categories-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| .features-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .products-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .wishlist-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .hero { | |
| min-height: 70vh; | |
| } | |
| .hero-stats { | |
| gap: var(--space-xl); | |
| } | |
| .hero-actions { | |
| flex-direction: column; | |
| } | |
| .categories-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .features-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .catalog-layout { | |
| grid-template-columns: 1fr; | |
| } | |
| .catalog-sidebar { | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 300px; | |
| z-index: 1500; | |
| border-radius: 0; | |
| transform: translateX(-100%); | |
| transition: transform var(--transition-base); | |
| overflow-y: auto; | |
| } | |
| .catalog-sidebar.active { | |
| transform: translateX(0); | |
| } | |
| .filter-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.5); | |
| z-index: 1499; | |
| display: none; | |
| } | |
| .filter-overlay.active { | |
| display: block; | |
| } | |
| .products-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .product-detail { | |
| grid-template-columns: 1fr; | |
| gap: var(--space-xl); | |
| } | |
| .product-gallery { | |
| position: static; | |
| } | |
| .cart-layout { | |
| grid-template-columns: 1fr; | |
| } | |
| .cart-summary { | |
| position: static; | |
| } | |
| .cart-item { | |
| grid-template-columns: 80px 1fr auto; | |
| } | |
| .wishlist-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .profile-layout { | |
| grid-template-columns: 1fr; | |
| } | |
| .promo-banner { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .products-grid { | |
| grid-template-columns: 1fr; | |
| gap: var(--space-md); | |
| } | |
| .categories-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: var(--space-md); | |
| } | |
| .wishlist-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .cart-item { | |
| grid-template-columns: 70px 1fr; | |
| } | |
| .cart-item>*:last-child { | |
| grid-column: 1 / -1; | |
| } | |
| /* Hero slider mobile */ | |
| .hero { | |
| min-height: 60vh; | |
| } | |
| .hero-title { | |
| font-size: clamp(1.8rem, 7vw, 2.5rem) ; | |
| } | |
| .hero-desc { | |
| font-size: var(--fs-sm); | |
| } | |
| .hero-stats { | |
| flex-wrap: wrap; | |
| gap: var(--space-lg); | |
| } | |
| .hero-stat-num { | |
| font-size: var(--fs-xl); | |
| } | |
| .hero-actions .btn { | |
| font-size: var(--fs-sm); | |
| padding: 0.7rem 1.2rem; | |
| } | |
| /* Checkout mobile */ | |
| .progress-steps { | |
| gap: var(--space-xs); | |
| } | |
| .progress-step { | |
| font-size: var(--fs-xs); | |
| } | |
| /* Footer mobile */ | |
| .footer-grid { | |
| grid-template-columns: 1fr ; | |
| } | |
| .footer-brand { | |
| grid-column: auto; | |
| } | |
| .footer-heading { | |
| margin-top: var(--space-md); | |
| } | |
| /* Category cards mobile */ | |
| .category-card { | |
| padding: var(--space-lg) var(--space-md); | |
| } | |
| .category-card-icon { | |
| font-size: 2rem; | |
| } | |
| } |