Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AliExpress Clone - Global Marketplace</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* ============================================ | |
| CSS VARIABLES & DESIGN SYSTEM | |
| ============================================ */ | |
| :root { | |
| /* Primary Colors - AliExpress Red */ | |
| --primary: #FF4747; | |
| --primary-dark: #E63939; | |
| --primary-light: #FFE5E5; | |
| /* Secondary Colors */ | |
| --secondary: #FF8F00; | |
| --secondary-light: #FFF3E0; | |
| /* Neutral Colors */ | |
| --white: #FFFFFF; | |
| --gray-50: #F8F9FA; | |
| --gray-100: #F1F3F4; | |
| --gray-200: #E8EAED; | |
| --gray-300: #DADCE0; | |
| --gray-400: #9AA0A6; | |
| --gray-500: #80868B; | |
| --gray-600: #5F6368; | |
| --gray-700: #3C4043; | |
| --gray-800: #202124; | |
| --gray-900: #121212; | |
| /* Semantic Colors */ | |
| --success: #34A853; | |
| --warning: #FBBC04; | |
| --error: #EA4335; | |
| --info: #4285F4; | |
| /* Spacing Scale */ | |
| --space-xs: 0.25rem; | |
| --space-sm: 0.5rem; | |
| --space-md: 1rem; | |
| --space-lg: 1.5rem; | |
| --space-xl: 2rem; | |
| --space-2xl: 3rem; | |
| --space-3xl: 4rem; | |
| /* Typography Scale */ | |
| --text-xs: 0.75rem; | |
| --text-sm: 0.875rem; | |
| --text-base: 1rem; | |
| --text-lg: 1.125rem; | |
| --text-xl: 1.25rem; | |
| --text-2xl: 1.5rem; | |
| --text-3xl: 1.875rem; | |
| --text-4xl: 2.25rem; | |
| --text-5xl: 3rem; | |
| /* Border Radius */ | |
| --radius-sm: 4px; | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --radius-xl: 16px; | |
| --radius-full: 9999px; | |
| /* Shadows */ | |
| --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); | |
| --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1); | |
| --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1); | |
| --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1); | |
| --shadow-glow: 0 0 20px rgba(255,71,71,0.3); | |
| /* Transitions */ | |
| --transition-fast: 150ms ease; | |
| --transition-base: 250ms ease; | |
| --transition-slow: 350ms ease; | |
| /* Layout */ | |
| --header-height: 120px; | |
| --sidebar-width: 240px; | |
| --max-width: 1400px; | |
| } | |
| /* ============================================ | |
| BASE STYLES & RESET | |
| ============================================ */ | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 16px; | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| font-size: var(--text-base); | |
| line-height: 1.6; | |
| color: var(--gray-800); | |
| background: var(--gray-50); | |
| min-height: 100vh; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| button { | |
| cursor: pointer; | |
| border: none; | |
| background: none; | |
| font-family: inherit; | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| input, select, textarea { | |
| font-family: inherit; | |
| font-size: inherit; | |
| } | |
| /* ============================================ | |
| UTILITY CLASSES | |
| ============================================ */ | |
| .container { | |
| max-width: var(--max-width); | |
| margin: 0 auto; | |
| padding: 0 var(--space-lg); | |
| } | |
| .flex { | |
| display: flex; | |
| } | |
| .flex-col { | |
| flex-direction: column; | |
| } | |
| .items-center { | |
| align-items: center; | |
| } | |
| .justify-center { | |
| justify-content: center; | |
| } | |
| .justify-between { | |
| justify-content: space-between; | |
| } | |
| .gap-sm { gap: var(--space-sm); } | |
| .gap-md { gap: var(--space-md); } | |
| .gap-lg { gap: var(--space-lg); } | |
| .text-center { text-align: center; } | |
| .hidden { display: none ; } | |
| /* ============================================ | |
| HEADER STYLES | |
| ============================================ */ | |
| .header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 1000; | |
| background: var(--white); | |
| box-shadow: var(--shadow-md); | |
| } | |
| /* Top Bar */ | |
| .top-bar { | |
| background: var(--gray-900); | |
| color: var(--white); | |
| padding: var(--space-sm) 0; | |
| font-size: var(--text-xs); | |
| } | |
| .top-bar-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .top-bar-left { | |
| display: flex; | |
| gap: var(--space-lg); | |
| align-items: center; | |
| } | |
| .top-bar-link { | |
| color: var(--gray-400); | |
| transition: color var(--transition-fast); | |
| } | |
| .top-bar-link:hover { | |
| color: var(--white); | |
| } | |
| .top-bar-right { | |
| display: flex; | |
| gap: var(--space-lg); | |
| align-items: center; | |
| } | |
| .language-selector, .currency-selector { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-xs); | |
| cursor: pointer; | |
| } | |
| /* Main Header */ | |
| .main-header { | |
| padding: var(--space-md) 0; | |
| background: var(--white); | |
| } | |
| .header-content { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-xl); | |
| } | |
| /* Logo */ | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| font-size: var(--text-2xl); | |
| font-weight: 800; | |
| color: var(--primary); | |
| } | |
| .logo-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--primary); | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--white); | |
| } | |
| /* Search Bar */ | |
| .search-container { | |
| flex: 1; | |
| max-width: 700px; | |
| } | |
| .search-box { | |
| position: relative; | |
| display: flex; | |
| border: 2px solid var(--primary); | |
| border-radius: var(--radius-full); | |
| overflow: hidden; | |
| transition: box-shadow var(--transition-base); | |
| } | |
| .search-box:focus-within { | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .search-input { | |
| flex: 1; | |
| padding: var(--space-md) var(--space-lg); | |
| border: none; | |
| outline: none; | |
| font-size: var(--text-base); | |
| } | |
| .search-input::placeholder { | |
| color: var(--gray-400); | |
| } | |
| .search-btn { | |
| background: var(--primary); | |
| color: var(--white); | |
| padding: 0 var(--space-xl); | |
| font-weight: 600; | |
| transition: background var(--transition-fast); | |
| } | |
| .search-btn:hover { | |
| background: var(--primary-dark); | |
| } | |
| .search-suggestions { | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| margin-top: var(--space-sm); | |
| padding: var(--space-md); | |
| box-shadow: var(--shadow-xl); | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: translateY(-10px); | |
| transition: all var(--transition-base); | |
| } | |
| .search-box:focus-within .search-suggestions { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateY(0); | |
| } | |
| .suggestion-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| padding: var(--space-sm) var(--space-md); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: background var(--transition-fast); | |
| } | |
| .suggestion-item:hover { | |
| background: var(--gray-50); | |
| } | |
| /* Header Actions */ | |
| .header-actions { | |
| display: flex; | |
| gap: var(--space-lg); | |
| } | |
| .header-action { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: var(--space-xs); | |
| color: var(--gray-600); | |
| transition: color var(--transition-fast); | |
| position: relative; | |
| } | |
| .header-action:hover { | |
| color: var(--primary); | |
| } | |
| .header-action i { | |
| font-size: var(--text-xl); | |
| } | |
| .header-action span { | |
| font-size: var(--text-xs); | |
| font-weight: 500; | |
| } | |
| .cart-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: 5px; | |
| background: var(--primary); | |
| color: var(--white); | |
| font-size: 10px; | |
| font-weight: 700; | |
| width: 18px; | |
| height: 18px; | |
| border-radius: var(--radius-full); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* Navigation */ | |
| .main-nav { | |
| background: var(--white); | |
| border-top: 1px solid var(--gray-200); | |
| padding: var(--space-sm) 0; | |
| } | |
| .nav-content { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-xl); | |
| } | |
| .categories-dropdown { | |
| position: relative; | |
| } | |
| .categories-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| background: var(--primary); | |
| color: var(--white); | |
| padding: var(--space-sm) var(--space-lg); | |
| border-radius: var(--radius-md); | |
| font-weight: 600; | |
| transition: background var(--transition-fast); | |
| } | |
| .categories-btn:hover { | |
| background: var(--primary-dark); | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: var(--space-xl); | |
| } | |
| .nav-link { | |
| color: var(--gray-700); | |
| font-weight: 500; | |
| font-size: var(--text-sm); | |
| transition: color var(--transition-fast); | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -4px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--primary); | |
| transition: width var(--transition-base); | |
| } | |
| .nav-link:hover, .nav-link.active { | |
| color: var(--primary); | |
| } | |
| .nav-link:hover::after, .nav-link.active::after { | |
| width: 100%; | |
| } | |
| /* ============================================ | |
| PAGE CONTENT CONTAINER | |
| ============================================ */ | |
| .page-content { | |
| margin-top: var(--header-height); | |
| min-height: calc(100vh - var(--header-height) - 400px); | |
| } | |
| /* ============================================ | |
| HERO SECTION | |
| ============================================ */ | |
| .hero-section { | |
| padding: var(--space-xl) 0; | |
| } | |
| .hero-grid { | |
| display: grid; | |
| grid-template-columns: 240px 1fr 300px; | |
| gap: var(--space-lg); | |
| height: 400px; | |
| } | |
| /* Categories Sidebar */ | |
| .categories-sidebar { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-md); | |
| overflow-y: auto; | |
| } | |
| .category-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| padding: var(--space-sm) var(--space-md); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .category-item:hover { | |
| background: var(--primary-light); | |
| color: var(--primary); | |
| } | |
| .category-item i { | |
| width: 20px; | |
| text-align: center; | |
| color: var(--gray-400); | |
| } | |
| .category-item:hover i { | |
| color: var(--primary); | |
| } | |
| /* Hero Slider */ | |
| .hero-slider { | |
| position: relative; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| } | |
| .slider-container { | |
| position: relative; | |
| height: 100%; | |
| } | |
| .slide { | |
| position: absolute; | |
| inset: 0; | |
| opacity: 0; | |
| transition: opacity var(--transition-slow); | |
| } | |
| .slide.active { | |
| opacity: 1; | |
| } | |
| .slide img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .slide-content { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| padding: var(--space-2xl); | |
| background: linear-gradient(transparent, rgba(0,0,0,0.8)); | |
| color: var(--white); | |
| } | |
| .slide-tag { | |
| display: inline-block; | |
| background: var(--primary); | |
| padding: var(--space-xs) var(--space-md); | |
| border-radius: var(--radius-full); | |
| font-size: var(--text-xs); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| margin-bottom: var(--space-sm); | |
| } | |
| .slide-title { | |
| font-size: var(--text-3xl); | |
| font-weight: 700; | |
| margin-bottom: var(--space-sm); | |
| } | |
| .slide-desc { | |
| font-size: var(--text-lg); | |
| opacity: 0.9; | |
| } | |
| .slider-dots { | |
| position: absolute; | |
| bottom: var(--space-lg); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| gap: var(--space-sm); | |
| } | |
| .dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: var(--radius-full); | |
| background: var(--white); | |
| opacity: 0.5; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .dot.active { | |
| opacity: 1; | |
| width: 30px; | |
| border-radius: var(--radius-full); | |
| } | |
| /* Promo Cards */ | |
| .promo-cards { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| } | |
| .promo-card { | |
| flex: 1; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .promo-card img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .promo-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, rgba(255,71,71,0.9), rgba(255,143,0,0.9)); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| padding: var(--space-lg); | |
| color: var(--white); | |
| } | |
| .promo-title { | |
| font-size: var(--text-xl); | |
| font-weight: 700; | |
| margin-bottom: var(--space-sm); | |
| } | |
| .promo-discount { | |
| font-size: var(--text-3xl); | |
| font-weight: 800; | |
| margin-bottom: var(--space-sm); | |
| } | |
| .promo-btn { | |
| background: var(--white); | |
| color: var(--primary); | |
| padding: var(--space-sm) var(--space-lg); | |
| border-radius: var(--radius-full); | |
| font-weight: 600; | |
| font-size: var(--text-sm); | |
| align-self: flex-start; | |
| transition: transform var(--transition-fast); | |
| } | |
| .promo-btn:hover { | |
| transform: translateY(-2px); | |
| } | |
| /* ============================================ | |
| FLASH DEALS SECTION | |
| ============================================ */ | |
| .section { | |
| padding: var(--space-2xl) 0; | |
| } | |
| .section-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: var(--space-xl); | |
| } | |
| .section-title { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| font-size: var(--text-2xl); | |
| font-weight: 700; | |
| } | |
| .flash-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--primary); | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--white); | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| } | |
| .countdown { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| } | |
| .countdown-label { | |
| color: var(--gray-500); | |
| font-size: var(--text-sm); | |
| } | |
| .countdown-item { | |
| background: var(--gray-800); | |
| color: var(--white); | |
| padding: var(--space-sm) var(--space-md); | |
| border-radius: var(--radius-md); | |
| font-weight: 700; | |
| font-size: var(--text-lg); | |
| min-width: 50px; | |
| text-align: center; | |
| } | |
| .view-all { | |
| color: var(--primary); | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| transition: gap var(--transition-fast); | |
| } | |
| .view-all:hover { | |
| gap: var(--space-md); | |
| } | |
| /* Product Grid */ | |
| .products-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: var(--space-lg); | |
| } | |
| /* Product Card */ | |
| .product-card { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| transition: all var(--transition-base); | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: var(--shadow-xl); | |
| } | |
| .product-image { | |
| position: relative; | |
| aspect-ratio: 1; | |
| overflow: hidden; | |
| } | |
| .product-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform var(--transition-slow); | |
| } | |
| .product-card:hover .product-image img { | |
| transform: scale(1.05); | |
| } | |
| .product-badges { | |
| position: absolute; | |
| top: var(--space-sm); | |
| left: var(--space-sm); | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-xs); | |
| } | |
| .badge { | |
| padding: var(--space-xs) var(--space-sm); | |
| border-radius: var(--radius-sm); | |
| font-size: var(--text-xs); | |
| font-weight: 600; | |
| } | |
| .badge-flash { | |
| background: var(--primary); | |
| color: var(--white); | |
| } | |
| .badge-sale { | |
| background: var(--secondary); | |
| color: var(--white); | |
| } | |
| .badge-new { | |
| background: var(--success); | |
| color: var(--white); | |
| } | |
| .wishlist-btn { | |
| position: absolute; | |
| top: var(--space-sm); | |
| right: var(--space-sm); | |
| width: 36px; | |
| height: 36px; | |
| border-radius: var(--radius-full); | |
| background: var(--white); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--gray-400); | |
| transition: all var(--transition-fast); | |
| opacity: 0; | |
| transform: scale(0.8); | |
| } | |
| .product-card:hover .wishlist-btn { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| .wishlist-btn:hover, .wishlist-btn.active { | |
| color: var(--primary); | |
| background: var(--primary-light); | |
| } | |
| .quick-view { | |
| position: absolute; | |
| bottom: var(--space-sm); | |
| left: var(--space-sm); | |
| right: var(--space-sm); | |
| background: var(--white); | |
| color: var(--gray-800); | |
| padding: var(--space-sm); | |
| border-radius: var(--radius-md); | |
| text-align: center; | |
| font-weight: 600; | |
| font-size: var(--text-sm); | |
| opacity: 0; | |
| transform: translateY(10px); | |
| transition: all var(--transition-fast); | |
| } | |
| .product-card:hover .quick-view { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .product-info { | |
| padding: var(--space-md); | |
| } | |
| .product-title { | |
| font-size: var(--text-sm); | |
| color: var(--gray-700); | |
| line-height: 1.5; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| margin-bottom: var(--space-sm); | |
| height: 42px; | |
| } | |
| .product-price-row { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .current-price { | |
| font-size: var(--text-xl); | |
| font-weight: 700; | |
| color: var(--primary); | |
| } | |
| .original-price { | |
| font-size: var(--text-sm); | |
| color: var(--gray-400); | |
| text-decoration: line-through; | |
| } | |
| .discount-tag { | |
| background: var(--primary-light); | |
| color: var(--primary); | |
| padding: var(--space-xs) var(--space-sm); | |
| border-radius: var(--radius-sm); | |
| font-size: var(--text-xs); | |
| font-weight: 600; | |
| } | |
| .product-meta { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: var(--text-xs); | |
| color: var(--gray-500); | |
| } | |
| .rating { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-xs); | |
| } | |
| .stars { | |
| color: var(--secondary); | |
| } | |
| .sold-count { | |
| color: var(--gray-400); | |
| } | |
| .shipping-info { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-xs); | |
| margin-top: var(--space-sm); | |
| padding-top: var(--space-sm); | |
| border-top: 1px solid var(--gray-100); | |
| } | |
| .shipping-tag { | |
| background: var(--gray-100); | |
| padding: var(--space-xs) var(--space-sm); | |
| border-radius: var(--radius-sm); | |
| font-size: var(--text-xs); | |
| color: var(--gray-600); | |
| } | |
| /* ============================================ | |
| CATEGORIES SECTION | |
| ============================================ */ | |
| .categories-section { | |
| background: var(--white); | |
| padding: var(--space-2xl) 0; | |
| } | |
| .categories-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |
| gap: var(--space-lg); | |
| } | |
| .category-card { | |
| text-align: center; | |
| padding: var(--space-lg); | |
| border-radius: var(--radius-lg); | |
| transition: all var(--transition-base); | |
| cursor: pointer; | |
| } | |
| .category-card:hover { | |
| background: var(--gray-50); | |
| transform: translateY(-4px); | |
| } | |
| .category-icon { | |
| width: 80px; | |
| height: 80px; | |
| margin: 0 auto var(--space-md); | |
| border-radius: var(--radius-full); | |
| background: var(--primary-light); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: var(--text-3xl); | |
| color: var(--primary); | |
| transition: all var(--transition-base); | |
| } | |
| .category-card:hover .category-icon { | |
| background: var(--primary); | |
| color: var(--white); | |
| transform: scale(1.1); | |
| } | |
| .category-name { | |
| font-weight: 600; | |
| color: var(--gray-800); | |
| margin-bottom: var(--space-xs); | |
| } | |
| .category-count { | |
| font-size: var(--text-sm); | |
| color: var(--gray-500); | |
| } | |
| /* ============================================ | |
| FEATURES SECTION | |
| ============================================ */ | |
| .features-section { | |
| padding: var(--space-2xl) 0; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: var(--space-lg); | |
| } | |
| .feature-card { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| padding: var(--space-lg); | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: var(--radius-full); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: var(--text-xl); | |
| } | |
| .feature-icon.red { background: var(--primary-light); color: var(--primary); } | |
| .feature-icon.green { background: #E8F5E9; color: var(--success); } | |
| .feature-icon.blue { background: #E3F2FD; color: var(--info); } | |
| .feature-icon.orange { background: var(--secondary-light); color: var(--secondary); } | |
| .feature-content h4 { | |
| font-weight: 600; | |
| margin-bottom: var(--space-xs); | |
| } | |
| .feature-content p { | |
| font-size: var(--text-sm); | |
| color: var(--gray-500); | |
| } | |
| /* ============================================ | |
| NEWSLETTER SECTION | |
| ============================================ */ | |
| .newsletter-section { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| padding: var(--space-3xl) 0; | |
| color: var(--white); | |
| } | |
| .newsletter-content { | |
| text-align: center; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .newsletter-title { | |
| font-size: var(--text-3xl); | |
| font-weight: 700; | |
| margin-bottom: var(--space-md); | |
| } | |
| .newsletter-desc { | |
| font-size: var(--text-lg); | |
| opacity: 0.9; | |
| margin-bottom: var(--space-xl); | |
| } | |
| .newsletter-form { | |
| display: flex; | |
| gap: var(--space-md); | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| .newsletter-input { | |
| flex: 1; | |
| padding: var(--space-md) var(--space-lg); | |
| border: none; | |
| border-radius: var(--radius-full); | |
| font-size: var(--text-base); | |
| outline: none; | |
| } | |
| .newsletter-btn { | |
| background: var(--gray-900); | |
| color: var(--white); | |
| padding: var(--space-md) var(--space-xl); | |
| border-radius: var(--radius-full); | |
| font-weight: 600; | |
| transition: transform var(--transition-fast); | |
| } | |
| .newsletter-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| /* ============================================ | |
| FOOTER | |
| ============================================ */ | |
| .footer { | |
| background: var(--gray-900); | |
| color: var(--white); | |
| padding: var(--space-3xl) 0 var(--space-xl); | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: 2fr repeat(3, 1fr) 1.5fr; | |
| gap: var(--space-2xl); | |
| margin-bottom: var(--space-2xl); | |
| } | |
| .footer-brand .logo { | |
| margin-bottom: var(--space-lg); | |
| color: var(--white); | |
| } | |
| .footer-brand .logo-icon { | |
| background: var(--primary); | |
| } | |
| .footer-desc { | |
| color: var(--gray-400); | |
| font-size: var(--text-sm); | |
| line-height: 1.8; | |
| margin-bottom: var(--space-lg); | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: var(--space-md); | |
| } | |
| .social-link { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: var(--radius-full); | |
| background: var(--gray-800); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--gray-400); | |
| transition: all var(--transition-fast); | |
| } | |
| .social-link:hover { | |
| background: var(--primary); | |
| color: var(--white); | |
| } | |
| .footer-title { | |
| font-weight: 600; | |
| margin-bottom: var(--space-lg); | |
| font-size: var(--text-lg); | |
| } | |
| .footer-links { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| } | |
| .footer-link { | |
| color: var(--gray-400); | |
| font-size: var(--text-sm); | |
| transition: color var(--transition-fast); | |
| } | |
| .footer-link:hover { | |
| color: var(--white); | |
| } | |
| .payment-methods { | |
| display: flex; | |
| gap: var(--space-sm); | |
| flex-wrap: wrap; | |
| } | |
| .payment-icon { | |
| width: 50px; | |
| height: 30px; | |
| background: var(--gray-800); | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: var(--text-xl); | |
| } | |
| .footer-bottom { | |
| border-top: 1px solid var(--gray-800); | |
| padding-top: var(--space-xl); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .footer-copyright { | |
| color: var(--gray-500); | |
| font-size: var(--text-sm); | |
| } | |
| .footer-badges { | |
| display: flex; | |
| gap: var(--space-lg); | |
| } | |
| .footer-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| color: var(--gray-400); | |
| font-size: var(--text-xs); | |
| } | |
| .footer-badge i { | |
| font-size: var(--text-lg); | |
| } | |
| /* ============================================ | |
| PAGE SPECIFIC STYLES | |
| ============================================ */ | |
| /* Products Page */ | |
| .products-page { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| gap: var(--space-xl); | |
| padding: var(--space-xl) 0; | |
| } | |
| .filters-sidebar { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-lg); | |
| height: fit-content; | |
| position: sticky; | |
| top: calc(var(--header-height) + var(--space-lg)); | |
| } | |
| .filter-section { | |
| padding-bottom: var(--space-lg); | |
| margin-bottom: var(--space-lg); | |
| border-bottom: 1px solid var(--gray-200); | |
| } | |
| .filter-section:last-child { | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| margin-bottom: 0; | |
| } | |
| .filter-title { | |
| font-weight: 600; | |
| margin-bottom: var(--space-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .filter-options { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-sm); | |
| } | |
| .filter-option { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| cursor: pointer; | |
| } | |
| .filter-option input { | |
| width: 18px; | |
| height: 18px; | |
| accent-color: var(--primary); | |
| } | |
| .price-range { | |
| display: flex; | |
| gap: var(--space-sm); | |
| align-items: center; | |
| } | |
| .price-input { | |
| flex: 1; | |
| padding: var(--space-sm); | |
| border: 1px solid var(--gray-300); | |
| border-radius: var(--radius-md); | |
| } | |
| .price-separator { | |
| color: var(--gray-400); | |
| } | |
| /* Product Detail Page */ | |
| .product-detail { | |
| padding: var(--space-xl) 0; | |
| } | |
| .product-detail-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-2xl); | |
| } | |
| .product-gallery { | |
| display: flex; | |
| gap: var(--space-md); | |
| } | |
| .thumbnail-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-sm); | |
| } | |
| .thumbnail { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| cursor: pointer; | |
| border: 2px solid transparent; | |
| transition: all var(--transition-fast); | |
| } | |
| .thumbnail:hover, .thumbnail.active { | |
| border-color: var(--primary); | |
| } | |
| .thumbnail img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .main-image { | |
| flex: 1; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| background: var(--white); | |
| } | |
| .main-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| .product-info-detail h1 { | |
| font-size: var(--text-2xl); | |
| font-weight: 700; | |
| margin-bottom: var(--space-md); | |
| line-height: 1.4; | |
| } | |
| .product-rating-row { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-lg); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .rating-summary { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| } | |
| .rating-score { | |
| font-size: var(--text-2xl); | |
| font-weight: 700; | |
| color: var(--secondary); | |
| } | |
| .rating-stars { | |
| color: var(--secondary); | |
| } | |
| .rating-count { | |
| color: var(--gray-500); | |
| font-size: var(--text-sm); | |
| } | |
| .product-actions-detail { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-xl); | |
| margin-top: var(--space-lg); | |
| } | |
| .price-detail { | |
| display: flex; | |
| align-items: baseline; | |
| gap: var(--space-md); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .price-current { | |
| font-size: var(--text-4xl); | |
| font-weight: 700; | |
| color: var(--primary); | |
| } | |
| .price-original-detail { | |
| font-size: var(--text-xl); | |
| color: var(--gray-400); | |
| text-decoration: line-through; | |
| } | |
| .discount-detail { | |
| background: var(--primary); | |
| color: var(--white); | |
| padding: var(--space-xs) var(--space-md); | |
| border-radius: var(--radius-sm); | |
| font-weight: 600; | |
| } | |
| .variant-section { | |
| margin-bottom: var(--space-lg); | |
| } | |
| .variant-title { | |
| font-weight: 600; | |
| margin-bottom: var(--space-md); | |
| } | |
| .variant-options { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--space-sm); | |
| } | |
| .variant-option { | |
| padding: var(--space-sm) var(--space-md); | |
| border: 2px solid var(--gray-200); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .variant-option:hover, .variant-option.active { | |
| border-color: var(--primary); | |
| color: var(--primary); | |
| } | |
| .quantity-section { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-lg); | |
| margin-bottom: var(--space-xl); | |
| } | |
| .quantity-control { | |
| display: flex; | |
| align-items: center; | |
| border: 2px solid var(--gray-200); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| } | |
| .quantity-btn { | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--gray-50); | |
| transition: background var(--transition-fast); | |
| } | |
| .quantity-btn:hover { | |
| background: var(--gray-200); | |
| } | |
| .quantity-input { | |
| width: 60px; | |
| text-align: center; | |
| border: none; | |
| font-weight: 600; | |
| } | |
| .stock-info { | |
| color: var(--gray-500); | |
| font-size: var(--text-sm); | |
| } | |
| .action-buttons { | |
| display: flex; | |
| gap: var(--space-md); | |
| } | |
| .btn { | |
| padding: var(--space-md) var(--space-xl); | |
| border-radius: var(--radius-md); | |
| font-weight: 600; | |
| transition: all var(--transition-fast); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-sm); | |
| } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: var(--white); | |
| flex: 1; | |
| } | |
| .btn-primary:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-2px); | |
| } | |
| .btn-secondary { | |
| background: var(--primary-light); | |
| color: var(--primary); | |
| flex: 1; | |
| } | |
| .btn-secondary:hover { | |
| background: var(--primary); | |
| color: var(--white); | |
| } | |
| .btn-outline { | |
| border: 2px solid var(--gray-200); | |
| color: var(--gray-700); | |
| } | |
| .btn-outline:hover { | |
| border-color: var(--primary); | |
| color: var(--primary); | |
| } | |
| /* Cart Page */ | |
| .cart-page { | |
| padding: var(--space-xl) 0; | |
| } | |
| .cart-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 380px; | |
| gap: var(--space-xl); | |
| } | |
| .cart-items { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| } | |
| .cart-header { | |
| display: grid; | |
| grid-template-columns: 3fr 1fr 1fr 1fr 40px; | |
| padding: var(--space-lg); | |
| background: var(--gray-50); | |
| font-weight: 600; | |
| font-size: var(--text-sm); | |
| color: var(--gray-600); | |
| } | |
| .cart-item { | |
| display: grid; | |
| grid-template-columns: 3fr 1fr 1fr 1fr 40px; | |
| padding: var(--space-lg); | |
| align-items: center; | |
| border-bottom: 1px solid var(--gray-100); | |
| } | |
| .cart-item:last-child { | |
| border-bottom: none; | |
| } | |
| .cart-product { | |
| display: flex; | |
| gap: var(--space-md); | |
| } | |
| .cart-product-image { | |
| width: 100px; | |
| height: 100px; | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| background: var(--gray-50); | |
| } | |
| .cart-product-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .cart-product-info h4 { | |
| font-weight: 600; | |
| margin-bottom: var(--space-xs); | |
| } | |
| .cart-product-variant { | |
| font-size: var(--text-sm); | |
| color: var(--gray-500); | |
| } | |
| .cart-price { | |
| font-weight: 600; | |
| color: var(--primary); | |
| } | |
| .cart-quantity { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| } | |
| .cart-total { | |
| font-weight: 700; | |
| } | |
| .remove-btn { | |
| color: var(--gray-400); | |
| transition: color var(--transition-fast); | |
| } | |
| .remove-btn:hover { | |
| color: var(--error); | |
| } | |
| .cart-summary { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-xl); | |
| height: fit-content; | |
| position: sticky; | |
| top: calc(var(--header-height) + var(--space-lg)); | |
| } | |
| .summary-title { | |
| font-size: var(--text-xl); | |
| font-weight: 700; | |
| margin-bottom: var(--space-lg); | |
| } | |
| .summary-row { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: var(--space-sm) 0; | |
| color: var(--gray-600); | |
| } | |
| .summary-row.discount { | |
| color: var(--success); | |
| } | |
| .summary-row.total { | |
| border-top: 2px solid var(--gray-200); | |
| margin-top: var(--space-md); | |
| padding-top: var(--space-md); | |
| font-size: var(--text-xl); | |
| font-weight: 700; | |
| color: var(--gray-800); | |
| } | |
| .checkout-btn { | |
| width: 100%; | |
| margin-top: var(--space-lg); | |
| padding: var(--space-lg); | |
| } | |
| /* Auth Pages */ | |
| .auth-page { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, var(--primary-light), var(--secondary-light)); | |
| padding: var(--space-xl); | |
| } | |
| .auth-container { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| max-width: 1000px; | |
| width: 100%; | |
| background: var(--white); | |
| border-radius: var(--radius-xl); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-xl); | |
| } | |
| .auth-visual { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| padding: var(--space-3xl); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| color: var(--white); | |
| } | |
| .auth-visual h2 { | |
| font-size: var(--text-3xl); | |
| font-weight: 700; | |
| margin-bottom: var(--space-md); | |
| } | |
| .auth-visual p { | |
| opacity: 0.9; | |
| line-height: 1.8; | |
| } | |
| .auth-features { | |
| margin-top: var(--space-xl); | |
| } | |
| .auth-feature { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .auth-feature i { | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(255,255,255,0.2); | |
| border-radius: var(--radius-full); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .auth-form-container { | |
| padding: var(--space-3xl); | |
| } | |
| .auth-header { | |
| text-align: center; | |
| margin-bottom: var(--space-xl); | |
| } | |
| .auth-header h1 { | |
| font-size: var(--text-2xl); | |
| font-weight: 700; | |
| margin-bottom: var(--space-sm); | |
| } | |
| .auth-header p { | |
| color: var(--gray-500); | |
| } | |
| .auth-tabs { | |
| display: flex; | |
| gap: var(--space-md); | |
| margin-bottom: var(--space-xl); | |
| border-bottom: 2px solid var(--gray-100); | |
| } | |
| .auth-tab { | |
| flex: 1; | |
| padding: var(--space-md); | |
| text-align: center; | |
| font-weight: 600; | |
| color: var(--gray-500); | |
| position: relative; | |
| transition: color var(--transition-fast); | |
| } | |
| .auth-tab.active { | |
| color: var(--primary); | |
| } | |
| .auth-tab.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| right: 0; |