File manager - Edit - /home/webapp69.cm.in.th/u69319090033/Shop/style.css
Back
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap'); :root { --primary-rgb: 233, 30, 140; --primary-hover-rgb: 194, 24, 91; --text-main: #f0f0f0; --text-on-dark: #ffffff; /* Pure white for text on dark overlays/backgrounds */ --star-color: #ff004c; --status-pending-bg: #453008; --status-pending-text: #fef3c7; --status-shipping-bg: #102a5c; --status-shipping-text: #dbeafe; --status-delivered-bg: #044231; --status-delivered-text: #d1fae5; --status-cancelled-bg: #5c1010; --status-cancelled-text: #fee2e2; /* ===== DARK LEOPARD THEME ===== */ --primary: #e91e8c; --primary-hover: #c2185b; --primary-light: #2d0b1f; --primary-glow: rgba(233, 30, 140, 0.4); --primary-gradient: linear-gradient(135deg, #e91e8c 0%, #ff4fc8 50%, #e91e8c 100%); --primary-gradient-hover: linear-gradient(135deg, #c2185b 0%, #e91e8c 50%, #c2185b 100%); --dark: #fcfcfc; --dark-muted: #cccccc; --light: #0d0d0d; --white: #1a1a1a; --gray-100: #262626; --gray-200: #333333; --gray-300: #4d4d4d; --gray-500: #808080; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --font-heading: 'Outfit', 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px -1px rgba(0, 0, 0, 0.5), 0 2px 6px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 30px -3px rgba(0, 0, 0, 0.6), 0 4px 10px -2px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 40px -5px rgba(0, 0, 0, 0.7), 0 10px 20px -5px rgba(0, 0, 0, 0.5); --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 30px; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-body); scrollbar-width: thin; scrollbar-color: var(--primary-light) transparent; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-sm); } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* ===== BODY - pink-tinted bg ===== */ body { background-color: var(--light); color: var(--text-main); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* ===== ANNOUNCEMENT BAR ===== */ .announcement-bar { background: var(--primary-gradient); color: var(--white); font-size: 13px; text-align: center; padding: 9px 0; font-weight: 600; letter-spacing: 0.5px; position: relative; overflow: hidden; } .announcement-bar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(201, 0, 100, 0.4) 0%, transparent 50%, rgba(201, 0, 100, 0.4) 100%); } .announcement-bar>* { position: relative; z-index: 1; } .announcement-bar span { background: rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; padding: 1px 8px; font-weight: 800; color: #fff; letter-spacing: 1px; } /* ===== HEADER ===== */ header { background-color: rgba(26, 26, 26, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 100; border-bottom: 2px solid var(--gray-200); transition: var(--transition-normal); } header.scrolled { box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.15); } .header-main { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } /* ===== LOGO ===== */ .logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 26px; font-weight: 800; color: var(--dark); cursor: pointer; white-space: nowrap; } .logo span { color: var(--primary); } .logo-icon { background: var(--primary-gradient); width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--white); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4); flex-shrink: 0; position: relative; overflow: hidden; } .logo-icon::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 60%); } /* ===== SEARCH ===== */ .search-container { flex: 1; max-width: 550px; position: relative; } .search-wrapper { display: flex; align-items: center; background-color: var(--white); border: 2px solid var(--gray-200); border-radius: var(--radius-xl); padding: 4px 4px 4px 16px; transition: var(--transition-fast); } .search-wrapper:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } .search-wrapper input { border: none; background: transparent; width: 100%; padding: 8px 0; font-size: 14px; color: var(--text-main); } .search-wrapper input:focus { box-shadow: none; } .search-btn { background: var(--primary-gradient); color: var(--white); border: none; border-radius: var(--radius-xl); padding: 9px 20px; font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: var(--transition-fast); white-space: nowrap; position: relative; overflow: hidden; } .search-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 60%); } .search-btn:hover { background: var(--primary-gradient-hover); transform: scale(1.03); } /* ===== SEARCH SUGGESTIONS ===== */ .search-suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 2px solid var(--gray-200); z-index: 110; display: none; max-height: 300px; overflow-y: auto; } .search-suggestions.active { display: block; } .suggestion-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; transition: var(--transition-fast); } .suggestion-item:hover { background-color: var(--primary-light); } .suggestion-item i { color: var(--primary); width: 16px; height: 16px; } .suggestion-title { font-size: 14px; font-weight: 500; } .suggestion-category { font-size: 12px; color: var(--primary); background-color: var(--primary-light); padding: 2px 8px; border-radius: var(--radius-sm); margin-left: auto; } /* ===== ACTION ICONS ===== */ .header-actions { display: flex; align-items: center; gap: 12px; } .action-icon-btn { background: transparent; border: none; color: var(--dark-muted); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: var(--transition-fast); } .action-icon-btn:hover { background-color: var(--primary-light); color: var(--primary); } .action-icon-btn .badge { position: absolute; top: 4px; right: 4px; background: var(--primary-gradient); color: var(--white); font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--white); animation: pulseBadge 2s infinite; } @keyframes pulseBadge { 0% { transform: scale(1); } 50% { transform: scale(1.18); box-shadow: 0 0 0 5px var(--primary-glow); } 100% { transform: scale(1); } } /* ===== USER AVATAR ===== */ .user-avatar-btn { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 12px 4px 4px; border-radius: var(--radius-xl); transition: var(--transition-fast); border: none; background: transparent; } .user-avatar-btn:hover { background-color: var(--primary-light); } .avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); } .avatar-name { font-size: 14px; font-weight: 600; } .login-btn { background: var(--primary-gradient); color: var(--white); border: none; padding: 9px 22px; border-radius: var(--radius-xl); font-weight: 700; font-size: 14px; cursor: pointer; transition: var(--transition-fast); white-space: nowrap; position: relative; overflow: hidden; } .login-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 60%); } .login-btn:hover { background: var(--primary-gradient-hover); transform: scale(1.03); } /* ===== NAV MENU ===== */ .nav-menu { border-top: 1px solid var(--gray-200); padding: 10px 0; display: flex; align-items: center; justify-content: space-between; } .nav-links { display: flex; list-style: none; gap: 24px; flex-wrap: wrap; } .nav-links a { font-size: 14px; font-weight: 600; color: var(--dark-muted); position: relative; padding: 4px 0; transition: var(--transition-fast); } .nav-links a:hover, .nav-links a.active { color: var(--primary); } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary-gradient); transition: var(--transition-normal); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .hotline { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap; } /* ===== MOBILE NAV ===== */ .mobile-nav-btn { display: none; background: none; border: none; cursor: pointer; color: var(--dark); padding: 6px; } /* ===== VIEW SECTIONS ===== */ .view-section { display: none; padding: 40px 0; animation: fadeSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .view-section.active { display: block; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ===== HERO SLIDER ===== */ .hero-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 40px; height: 420px; box-shadow: var(--shadow-xl); border: 3px solid rgba(var(--primary-rgb), 0.15); } .slide-track { display: flex; height: 100%; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .slide { min-width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; } .slide-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%); } .slide-content { position: relative; z-index: 2; padding: 48px; color: var(--text-on-dark); /* Pure white — sits on dark overlay, not theme surface */ max-width: 560px; } .slide-tag { display: inline-block; background: var(--primary-gradient); color: var(--white); font-size: 12px; font-weight: 800; padding: 5px 16px; border-radius: var(--radius-xl); margin-bottom: 14px; letter-spacing: 1.5px; text-transform: uppercase; box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.4); position: relative; overflow: hidden; } .slide-tag::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 60%); } .slide-title { font-family: var(--font-heading); font-size: 38px; font-weight: 800; line-height: 1.2; margin-bottom: 12px; color: var(--text-on-dark); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } .slide-desc { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.88); margin-bottom: 16px; } /* Dynamic product price display in slider */ .slide-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; } .slide-price-current { font-family: var(--font-heading); font-size: 28px; font-weight: 800; color: #ffffff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .slide-price-original { font-size: 16px; color: rgba(255, 255, 255, 0.6); text-decoration: line-through; } .slide-btn { background: var(--primary-gradient); color: var(--text-on-dark); border: none; padding: 13px 30px; border-radius: var(--radius-xl); font-weight: 700; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition-fast); box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.45); position: relative; overflow: hidden; } .slide-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 60%); } .slide-btn:hover { background: var(--primary-gradient-hover); transform: translateX(5px); box-shadow: 0 6px 20px rgba(var(--primary-hover-rgb), 0.5); } .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(30, 30, 30, 0.88); border: 2px solid rgba(var(--primary-rgb), 0.3); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; transition: var(--transition-fast); box-shadow: var(--shadow-md); color: var(--primary); } .slider-arrow:hover { background: var(--primary); color: var(--white); transform: translateY(-50%) scale(1.1); border-color: var(--primary); } .slider-prev { left: 16px; } .slider-next { right: 16px; } .slider-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; } .slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); border: none; cursor: pointer; transition: var(--transition-fast); } .slider-dot.active { background: var(--primary); width: 24px; border-radius: 4px; } /* ===== SECTION HEADER ===== */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } .section-title { font-family: var(--font-heading); font-size: 24px; font-weight: 800; color: var(--dark); } .section-sub { font-size: 14px; color: var(--gray-500); margin-top: 4px; } .view-all-btn { color: var(--primary); font-weight: 700; font-size: 14px; background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: var(--transition-fast); } .view-all-btn:hover { gap: 8px; } /* ===== CATEGORY GRID ===== */ .category-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-bottom: 40px; } .cat-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px; background: var(--white); border-radius: var(--radius-lg); cursor: pointer; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease; border: 2px solid var(--gray-200); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .cat-card:hover { border-color: var(--primary); transform: translateY(-6px) scale(1.03); box-shadow: 0 10px 25px rgba(233, 30, 140, 0.25); } .cat-card:hover .cat-emoji { transform: scale(1.25) rotate(-8deg); } .cat-card.active { border-color: var(--primary); background: var(--primary-light); transform: translateY(-2px); } .cat-icon { width: 54px; height: 54px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 26px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } .cute-cat-icon { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .cat-card:hover .cute-cat-icon { box-shadow: 0 6px 16px rgba(233, 30, 140, 0.3); } .cat-name { font-size: 13px; font-weight: 700; text-align: center; color: var(--dark); transition: color var(--transition-fast); } /* ===== FLASH SALE BAR ===== */ .flash-sale-header { background: var(--primary-gradient); border-radius: var(--radius-md); padding: 16px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.35); position: relative; overflow: hidden; } .flash-sale-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(180, 0, 80, 0.35) 0%, transparent 50%, rgba(180, 0, 80, 0.35) 100%); } .flash-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: var(--white); position: relative; z-index: 1; } .flash-timer { display: flex; align-items: center; gap: 6px; color: var(--white); font-size: 14px; font-weight: 700; margin-left: auto; position: relative; z-index: 1; } .timer-box { background: rgba(0, 0, 0, 0.3); color: var(--white); font-size: 18px; font-weight: 700; font-family: monospace; padding: 4px 10px; border-radius: 6px; min-width: 36px; text-align: center; } .flash-sale-header .view-all-btn { color: rgba(255, 255, 255, 0.9); margin-left: 16px; position: relative; z-index: 1; } .flash-sale-header .view-all-btn:hover { color: var(--white); } /* ===== SORT ===== */ .sort-controls select { padding: 8px 14px; border: 2px solid var(--gray-200); border-radius: var(--radius-md); background: var(--gray-100); /* Dark surface in dark theme */ color: var(--dark); /* --dark = #fcfcfc, light text on dark bg ✅ */ font-size: 14px; cursor: pointer; } /* ===== PRODUCT GRID ===== */ .product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .product-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition-normal); box-shadow: var(--shadow-sm); cursor: pointer; position: relative; border: 2px solid transparent; } .product-card:hover { transform: translateY(-7px); box-shadow: 0 16px 40px rgba(var(--primary-rgb), 0.2); border-color: var(--gray-200); } .product-img-wrap { position: relative; overflow: hidden; aspect-ratio: 1/1; } .product-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-card:hover .product-img-wrap img { transform: scale(1.09); } .product-badge { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-xl); z-index: 2; } .badge-sale { background: var(--danger); color: var(--white); } .badge-new { background: var(--success); color: var(--white); } .badge-hot { background: var(--primary-gradient); color: var(--white); } .product-actions { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateX(10px); transition: var(--transition-normal); } .product-card:hover .product-actions { opacity: 1; transform: translateX(0); } .product-action-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--white); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: var(--transition-fast); color: var(--dark-muted); } .product-action-btn:hover { background: var(--primary); color: var(--white); } .product-action-btn.wishlisted { background: var(--primary); color: var(--white); } .product-info { padding: 14px; } .product-name { font-size: 14px; font-weight: 500; color: var(--text-main); margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } .product-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .stars { color: var(--star-color); font-size: 12px; } .rating-count { font-size: 12px; color: var(--gray-500); } .product-price { display: flex; align-items: baseline; gap: 8px; } .price-current { font-family: var(--font-heading); font-size: 18px; font-weight: 800; color: var(--primary); } .price-original { font-size: 13px; color: var(--gray-500); text-decoration: line-through; } .price-discount { font-size: 12px; font-weight: 700; color: var(--danger); } .product-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gray-100); } .sold-count { font-size: 12px; color: var(--gray-500); } .add-cart-btn { background: var(--primary-light); color: var(--primary); border: none; padding: 6px 14px; border-radius: var(--radius-xl); font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--transition-fast); } .add-cart-btn:hover { background: var(--primary-gradient); color: var(--white); } /* ===== NO RESULTS ===== */ .no-results { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 24px; gap: 16px; } .no-results h3 { font-size: 20px; font-weight: 700; color: var(--dark); } .no-results p { color: var(--gray-500); } .hidden { display: none !important; } /* ===== PRIMARY BUTTON ===== */ .primary-btn { background: var(--primary-gradient); color: var(--white); border: none; padding: 13px 30px; border-radius: var(--radius-xl); font-weight: 700; font-size: 15px; cursor: pointer; transition: var(--transition-fast); box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35); position: relative; overflow: hidden; } .primary-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 60%); } .primary-btn:hover { background: var(--primary-gradient-hover); transform: scale(1.03); } /* ===== PRODUCT DETAIL ===== */ .product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .product-detail-images { position: relative; } .detail-main-img { width: 100%; border-radius: var(--radius-lg); object-fit: cover; aspect-ratio: 1/1; margin-bottom: 12px; } .detail-thumbs { display: flex; gap: 10px; } .detail-thumb { width: 70px; height: 70px; border-radius: var(--radius-md); object-fit: cover; cursor: pointer; border: 2px solid transparent; transition: var(--transition-fast); } .detail-thumb.active, .detail-thumb:hover { border-color: var(--primary); } .detail-info { display: flex; flex-direction: column; gap: 16px; } .detail-category { font-size: 13px; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .detail-name { font-family: var(--font-heading); font-size: 28px; font-weight: 700; line-height: 1.3; } .detail-rating { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); } .detail-price { display: flex; align-items: baseline; gap: 12px; } .detail-price-current { font-family: var(--font-heading); font-size: 32px; font-weight: 800; color: var(--primary); } .detail-price-original { font-size: 18px; color: var(--gray-500); text-decoration: line-through; } .detail-qty { display: flex; align-items: center; gap: 12px; } .qty-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--gray-200); background: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; transition: var(--transition-fast); } .qty-btn:hover { background: var(--primary); color: var(--white); border-color: var(--primary); } .qty-input { width: 60px; text-align: center; border: 2px solid var(--gray-200); border-radius: var(--radius-sm); padding: 8px; font-size: 16px; font-weight: 600; } .detail-actions { display: flex; gap: 12px; } .detail-actions button { flex: 1; padding: 14px; border-radius: var(--radius-xl); font-weight: 700; font-size: 15px; cursor: pointer; transition: var(--transition-fast); border: none; } .btn-add-cart { background: var(--primary-light); color: var(--primary); } .btn-add-cart:hover { background: var(--primary-gradient); color: var(--white); } .btn-buy-now { background: var(--primary-gradient); color: var(--white); box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.4); position: relative; overflow: hidden; } .btn-buy-now::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 60%); } .btn-buy-now:hover { background: var(--primary-gradient-hover); } .detail-meta { display: flex; flex-direction: column; gap: 8px; } .meta-row { display: flex; gap: 12px; font-size: 14px; } .meta-label { font-weight: 600; color: var(--dark-muted); min-width: 120px; } .detail-desc { font-size: 14px; line-height: 1.7; color: var(--dark-muted); } /* ===== REVIEWS ===== */ .reviews-section { margin-top: 48px; border-top: 1px solid var(--gray-200); padding-top: 32px; } .review-card { background: var(--white); border-radius: var(--radius-md); padding: 20px; margin-bottom: 12px; box-shadow: var(--shadow-sm); border-left: 4px solid var(--primary-light); } .review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .review-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); } .reviewer-name { font-weight: 700; font-size: 14px; } .review-date { font-size: 12px; color: var(--gray-500); } .review-text { font-size: 14px; color: var(--dark-muted); line-height: 1.6; } .review-form { background: var(--white); border-radius: var(--radius-md); padding: 24px; margin-top: 20px; box-shadow: var(--shadow-sm); } .review-form h4 { font-size: 18px; font-weight: 700; margin-bottom: 16px; } .star-select { display: flex; gap: 6px; margin-bottom: 14px; font-size: 28px; cursor: pointer; } .star-select span { color: var(--gray-300); transition: var(--transition-fast); } .star-select span.active, .star-select span:hover { color: var(--star-color); } .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .form-group label { font-size: 13px; font-weight: 600; color: var(--dark-muted); } .form-group input, .form-group textarea, .form-group select { padding: 10px 14px; border: 2px solid var(--gray-200); border-radius: var(--radius-md); font-size: 14px; transition: var(--transition-fast); background: var(--gray-100); /* Dark surface in dark theme */ color: var(--dark); /* --dark = #fcfcfc, readable on dark bg ✅ */ } .form-group textarea { min-height: 100px; resize: vertical; } /* ===== CART ===== */ .cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; } .cart-items { background: var(--white); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm); } .cart-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--gray-100); } .cart-item:last-child { border-bottom: none; } .cart-item-img { width: 80px; height: 80px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; border: 2px solid var(--gray-100); } .cart-item-info { flex: 1; } .cart-item-name { font-weight: 600; font-size: 14px; margin-bottom: 6px; } .cart-item-price { font-weight: 800; color: var(--primary); font-size: 16px; margin-bottom: 8px; } .cart-item-controls { display: flex; align-items: center; gap: 10px; } .cart-qty-btn { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--gray-200); background: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; transition: var(--transition-fast); } .cart-qty-btn:hover { background: var(--primary); color: var(--white); border-color: var(--primary); } .cart-qty-num { font-weight: 700; min-width: 24px; text-align: center; } .cart-item-remove { margin-left: auto; background: none; border: none; color: var(--gray-500); cursor: pointer; transition: var(--transition-fast); } .cart-item-remove:hover { color: var(--danger); } .cart-summary { background: var(--white); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm); position: sticky; top: 140px; height: fit-content; border-top: 4px solid var(--primary); } .cart-summary h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 800; margin-bottom: 20px; } .summary-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 12px; } .summary-row.total { font-weight: 800; font-size: 16px; border-top: 1px solid var(--gray-200); padding-top: 12px; margin-top: 4px; color: var(--primary); } .coupon-row { display: flex; gap: 8px; margin: 16px 0; } .coupon-row input { flex: 1; padding: 8px 12px; border: 2px solid var(--gray-200); border-radius: var(--radius-md); font-size: 13px; } .coupon-btn { padding: 8px 16px; background: var(--primary-light); color: var(--primary); border: none; border-radius: var(--radius-md); font-weight: 700; font-size: 13px; cursor: pointer; transition: var(--transition-fast); } .coupon-btn:hover { background: var(--primary); color: var(--white); } .empty-cart { text-align: center; padding: 80px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; } /* ===== WISHLIST ===== */ .wishlist-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } /* ===== PROFILE ===== */ .profile-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; } .profile-sidebar { background: var(--white); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm); height: fit-content; border-top: 4px solid var(--primary); } .profile-avatar-section { text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(--gray-100); margin-bottom: 20px; } .profile-avatar-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); margin-bottom: 12px; box-shadow: 0 0 0 4px var(--primary-light); } .profile-name { font-family: var(--font-heading); font-size: 18px; font-weight: 800; } .profile-email { font-size: 13px; color: var(--gray-500); } .profile-nav { list-style: none; display: flex; flex-direction: column; gap: 4px; } .profile-nav li a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: var(--dark-muted); transition: var(--transition-fast); cursor: pointer; } .profile-nav li a:hover, .profile-nav li a.active { color: var(--primary); background: var(--primary-light); } .profile-main { background: var(--white); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); } .profile-main h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 800; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--primary-light); } /* ===== ADMIN ===== */ .admin-layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; } .admin-sidebar { background: linear-gradient(160deg, #2a0a1a 0%, #1a0510 100%); border-radius: var(--radius-md); padding: 24px; color: var(--white); height: fit-content; position: relative; overflow: hidden; } .admin-sidebar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(120, 0, 60, 0.5) 0%, rgba(80, 0, 40, 0.4) 100%); } .admin-sidebar>* { position: relative; z-index: 1; } .admin-sidebar-title { font-family: var(--font-heading); font-size: 16px; font-weight: 800; margin-bottom: 6px; } .admin-sidebar-sub { font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-bottom: 20px; } .admin-nav { list-style: none; display: flex; flex-direction: column; gap: 4px; } .admin-nav li a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.8); transition: var(--transition-fast); cursor: pointer; } .admin-nav li a:hover, .admin-nav li a.active { background: rgba(255, 255, 255, 0.2); color: var(--white); } .admin-main { background: var(--white); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); } .admin-main h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 800; margin-bottom: 24px; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; } .stat-card { background: var(--gray-100); border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 8px; border: 2px solid transparent; transition: var(--transition-fast); } .stat-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); } .stat-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .stat-value { font-family: var(--font-heading); font-size: 24px; font-weight: 800; color: var(--primary); } .stat-label { font-size: 13px; color: var(--gray-500); } .stat-change { font-size: 12px; font-weight: 700; } .stat-up { color: var(--success); } .stat-down { color: var(--danger); } .admin-table { width: 100%; border-collapse: collapse; } .admin-table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--gray-500); padding: 10px 14px; border-bottom: 2px solid var(--primary-light); text-transform: uppercase; letter-spacing: 0.5px; } .admin-table td { padding: 14px; font-size: 14px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; } .admin-table tr:hover td { background: var(--primary-light); } .status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-xl); font-size: 12px; font-weight: 700; } .status-pending { background: var(--status-pending-bg); color: var(--status-pending-text); } .status-shipping { background: var(--status-shipping-bg); color: var(--status-shipping-text); } .status-delivered { background: var(--status-delivered-bg); color: var(--status-delivered-text); } .status-cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled-text); } .chart-placeholder { background: linear-gradient(135deg, var(--primary-light), #fff); border-radius: var(--radius-md); padding: 24px; text-align: center; color: var(--primary); min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 2px dashed var(--primary); } /* ===== CHECKOUT ===== */ .checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 28px; } .checkout-form { background: var(--white); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); } .checkout-form h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 800; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--primary-light); } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .payment-methods { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .payment-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid var(--gray-200); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast); } .payment-option:hover, .payment-option.selected { border-color: var(--primary); background: var(--primary-light); } .payment-option input[type=radio] { accent-color: var(--primary); } .payment-option label { font-size: 14px; font-weight: 600; cursor: pointer; } /* ===== MODALS ===== */ .modal-overlay { position: fixed; inset: 0; background: rgba(60, 0, 30, 0.55); backdrop-filter: blur(6px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.active { display: flex; } .modal-box { background: var(--white); border-radius: var(--radius-lg); padding: 36px; width: 100%; max-width: 440px; position: relative; animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); max-height: 90vh; overflow-y: auto; border-top: 5px solid var(--primary); } .modal-wide { max-width: 880px; } @keyframes modalIn { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } } .modal-close { position: absolute; top: 16px; right: 16px; background: var(--primary-light); border: none; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); color: var(--primary); } .modal-close:hover { background: var(--primary); color: var(--white); } .modal-logo { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-heading); font-size: 22px; font-weight: 800; margin-bottom: 24px; color: var(--dark); /* --dark = #fcfcfc, modal-box bg = var(--white) = #1a1a1a ✅ */ } .modal-logo span { color: var(--primary); } .modal-tabs { display: flex; gap: 0; margin-bottom: 24px; border-radius: var(--radius-md); overflow: hidden; border: 2px solid var(--gray-200); } .modal-tab { flex: 1; padding: 12px; text-align: center; font-weight: 700; font-size: 14px; cursor: pointer; transition: var(--transition-fast); border: none; background: var(--white); color: var(--dark-muted); } .modal-tab.active { background: var(--primary-gradient); color: var(--white); } /* ===== TOAST ===== */ .toast-container { position: fixed; bottom: 28px; right: 28px; z-index: 999; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--white); border-radius: var(--radius-md); padding: 14px 20px; box-shadow: var(--shadow-xl); display: flex; align-items: center; gap: 12px; min-width: 300px; animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); font-size: 14px; font-weight: 500; border-left: 4px solid; } .toast-success { border-color: var(--success); } .toast-error { border-color: var(--danger); } .toast-info { border-color: var(--primary); } .toast-icon { font-size: 18px; } @keyframes toastIn { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } @keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(60px); } } /* ===== BREADCRUMB ===== */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-500); margin-bottom: 24px; } .breadcrumb a { cursor: pointer; transition: var(--transition-fast); } .breadcrumb a:hover { color: var(--primary); } .breadcrumb-sep { color: var(--gray-300); } .page-title { font-family: var(--font-heading); font-size: 26px; font-weight: 800; margin-bottom: 24px; } /* ===== FOOTER ===== */ .footer { background: linear-gradient(160deg, #1a0510 0%, #0d0d0d 100%); color: var(--text-on-dark); /* Footer is a distinct dark section — use pure white */ padding: 60px 0 0; margin-top: 80px; position: relative; overflow: hidden; } .footer::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(100, 0, 50, 0.82) 0%, rgba(60, 0, 30, 0.92) 100%); } .footer>.container { position: relative; z-index: 1; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 200, 220, 0.15); } .footer-brand p { font-size: 14px; color: rgba(255, 200, 220, 0.75); line-height: 1.7; margin: 16px 0 20px; max-width: 260px; } .footer .footer-logo { color: var(--white); } .social-links { display: flex; gap: 10px; } .social-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); font-size: 14px; border: 1px solid rgba(255, 200, 220, 0.2); } .social-btn:hover { background: var(--primary); border-color: var(--primary); transform: scale(1.1); } .footer-links-col h4 { font-size: 15px; font-weight: 800; margin-bottom: 16px; color: var(--text-on-dark); } .footer-links-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-links-col ul a { font-size: 14px; color: rgba(255, 200, 220, 0.7); transition: var(--transition-fast); } .footer-links-col ul a:hover { color: var(--text-on-dark); padding-left: 6px; } .footer-payment h4 { font-size: 15px; font-weight: 800; margin-bottom: 16px; } .payment-icons { display: flex; flex-wrap: wrap; gap: 10px; } .payment-icon { background: rgba(255, 255, 255, 0.12); border-radius: 6px; padding: 6px 12px; font-size: 22px; border: 1px solid rgba(255, 200, 220, 0.2); } .app-btns { display: flex; flex-direction: column; gap: 8px; } .app-dl-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid rgba(255, 200, 220, 0.25); border-radius: var(--radius-md); font-size: 13px; font-weight: 600; transition: var(--transition-fast); } .app-dl-btn:hover { background: rgba(255, 255, 255, 0.12); } .footer-bottom { padding: 20px 0; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: rgba(255, 200, 220, 0.5); flex-wrap: wrap; gap: 10px; } /* ===== RESPONSIVE ===== */ @media (max-width:1100px) { .product-grid, .wishlist-grid { grid-template-columns: repeat(4, 1fr); } .category-grid { grid-template-columns: repeat(4, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width:900px) { .product-detail-grid { grid-template-columns: 1fr; } .cart-layout { grid-template-columns: 1fr; } .checkout-layout { grid-template-columns: 1fr; } .profile-layout { grid-template-columns: 1fr; } .admin-layout { grid-template-columns: 1fr; } .hero-slider { height: 300px; } .slide-title { font-size: 26px; } .slide-content { padding: 32px; } } @media (max-width:768px) { .nav-links { display: none; } .mobile-nav-btn { display: block; } .product-grid, .wishlist-grid { grid-template-columns: repeat(2, 1fr); } .category-grid { grid-template-columns: repeat(3, 1fr); } .hero-slider { height: 240px; } .slide-content { padding: 24px; } .slide-title { font-size: 20px; } .slide-desc { display: none; } .search-container { max-width: none; } .hotline { display: none; } .form-grid-2 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .footer-brand p { max-width: 100%; } } @media (max-width:480px) { .header-main { gap: 12px; } .avatar-name { display: none; } .product-grid, .wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .category-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .cat-card { padding: 14px 8px; } .cat-icon { width: 40px; height: 40px; font-size: 20px; } .stats-grid { grid-template-columns: 1fr 1fr; } .hero-slider { height: 200px; } } /* ===== ADMIN PRODUCT IMAGE UPLOAD & PREVIEW UI ===== */ .admin-img-upload-box { background: var(--gray-100); border: 2px dashed var(--gray-300); border-radius: var(--radius-md); padding: 16px; text-align: center; transition: var(--transition-normal); position: relative; } .admin-img-upload-box:hover, .admin-img-upload-box.drag-over { border-color: var(--primary); background: var(--primary-light); } .admin-img-preview-container { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px; background: rgba(0, 0, 0, 0.35); border-radius: var(--radius-md); border: 1px solid var(--gray-200); } .admin-img-preview-wrap { width: 100%; max-height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-sm); background: #000; } .admin-img-preview-wrap img { max-width: 100%; max-height: 190px; object-fit: contain; border-radius: var(--radius-sm); } .admin-img-actions { display: flex; gap: 10px; width: 100%; justify-content: center; flex-wrap: wrap; } .admin-img-btn-change { background: var(--primary-gradient); color: var(--white); border: none; padding: 7px 16px; border-radius: var(--radius-xl); font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition-fast); } .admin-img-btn-change:hover { background: var(--primary-gradient-hover); transform: scale(1.02); } .admin-img-btn-delete { background: rgba(239, 68, 68, 0.15); color: var(--danger); border: 1px solid var(--danger); padding: 7px 16px; border-radius: var(--radius-xl); font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition-fast); } .admin-img-btn-delete:hover { background: var(--danger); color: #fff; transform: scale(1.02); } .admin-img-tab-selector { display: flex; border-radius: var(--radius-md); background: var(--gray-100); padding: 4px; gap: 4px; margin-bottom: 12px; border: 1px solid var(--gray-200); } .admin-img-tab-btn { flex: 1; padding: 8px 12px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--dark-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition-fast); display: flex; align-items: center; justify-content: center; gap: 6px; } .admin-img-tab-btn.active { background: var(--primary); color: #fff; } .form-error-msg { color: var(--danger); font-size: 12px; margin-top: 4px; display: none; } .form-error-msg.visible { display: block; } .slip-upload-box { border: 2px dashed var(--primary); border-radius: var(--radius-md); padding: 24px 16px; text-align: center; background: rgba(233, 30, 140, 0.04); cursor: pointer; transition: var(--transition-fast); } .slip-upload-box:hover { background: rgba(233, 30, 140, 0.1); border-color: #ff69b4; transform: translateY(-2px); }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.28 |
proxy
|
phpinfo
|
Settings