Spaces:
Sleeping
Sleeping
| /* ======================================== | |
| COMPONENTS — Reusable UI Elements | |
| ======================================== */ | |
| /* --- Buttons --- */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-sm); | |
| padding: 0.75rem 1.75rem; | |
| border-radius: var(--radius-md); | |
| font-weight: var(--fw-semibold); | |
| font-size: var(--fs-sm); | |
| letter-spacing: 0.02em; | |
| transition: all var(--transition-base); | |
| cursor: pointer; | |
| white-space: nowrap; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(255, 255, 255, 0); | |
| transition: background var(--transition-fast); | |
| } | |
| .btn:hover::after { | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .btn:active { | |
| transform: scale(0.97); | |
| } | |
| /* --- Ripple Effect --- */ | |
| .ripple { | |
| position: absolute; | |
| border-radius: 50%; | |
| transform: scale(0); | |
| animation: ripple-anim 600ms linear; | |
| background-color: rgba(255, 255, 255, 0.3); | |
| pointer-events: none; | |
| } | |
| @keyframes ripple-anim { | |
| to { | |
| transform: scale(4); | |
| opacity: 0; | |
| } | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--clr-accent), var(--clr-mid)); | |
| color: var(--clr-text-primary); | |
| box-shadow: var(--shadow-md), 0 0 20px rgba(45, 74, 83, 0.3); | |
| } | |
| .btn-primary:hover { | |
| box-shadow: var(--shadow-lg), 0 0 30px rgba(45, 74, 83, 0.5); | |
| transform: translateY(-2px); | |
| } | |
| .btn-secondary { | |
| background: var(--clr-surface); | |
| color: var(--clr-text-primary); | |
| border: 1px solid var(--clr-border); | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--clr-border-hover); | |
| background: var(--clr-surface-hover); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| color: var(--clr-text-primary); | |
| border: 1px solid var(--clr-border); | |
| } | |
| .btn-outline:hover { | |
| background: var(--clr-surface); | |
| border-color: var(--clr-accent); | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--clr-text-secondary); | |
| } | |
| .btn-ghost:hover { | |
| color: var(--clr-text-primary); | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .btn-danger { | |
| background: var(--clr-error); | |
| color: white; | |
| } | |
| .btn-danger:hover { | |
| box-shadow: 0 0 20px rgba(248, 113, 113, 0.3); | |
| } | |
| .btn-sm { | |
| padding: 0.5rem 1rem; | |
| font-size: var(--fs-xs); | |
| } | |
| .btn-lg { | |
| padding: 1rem 2.5rem; | |
| font-size: var(--fs-md); | |
| } | |
| .btn-icon { | |
| padding: 0.65rem; | |
| border-radius: var(--radius-md); | |
| } | |
| .btn-icon.btn-sm { | |
| padding: 0.45rem; | |
| } | |
| /* --- Navbar --- */ | |
| .navbar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: var(--navbar-height); | |
| z-index: 1000; | |
| background: rgba(13, 31, 35, 0.85); | |
| backdrop-filter: blur(var(--glass-blur)); | |
| -webkit-backdrop-filter: blur(var(--glass-blur)); | |
| border-bottom: 1px solid var(--glass-border); | |
| transition: all var(--transition-base); | |
| } | |
| .navbar.scrolled { | |
| background: rgba(13, 31, 35, 0.95); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .navbar-inner { | |
| max-width: var(--container-max); | |
| margin: 0 auto; | |
| padding: 0 var(--container-padding); | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .navbar-logo { | |
| font-size: var(--fs-xl); | |
| font-weight: var(--fw-extrabold); | |
| letter-spacing: -0.02em; | |
| background: linear-gradient(135deg, var(--clr-light), var(--clr-mid)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .navbar-nav { | |
| display: flex; | |
| gap: var(--space-xs); | |
| } | |
| .navbar-nav a { | |
| padding: 0.5rem 1rem; | |
| border-radius: var(--radius-md); | |
| color: var(--clr-text-secondary); | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-medium); | |
| transition: all var(--transition-fast); | |
| position: relative; | |
| } | |
| .navbar-nav a:hover, | |
| .navbar-nav a.active { | |
| color: var(--clr-text-primary); | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .navbar-nav a.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 20px; | |
| height: 2px; | |
| background: var(--clr-mid); | |
| border-radius: var(--radius-full); | |
| } | |
| .navbar-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| } | |
| /* --- Advanced Search Modal --- */ | |
| .search-modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| height: 100vh; | |
| width: 100vw; | |
| background: rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(10px); | |
| z-index: 3000; | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: center; | |
| padding-top: 10vh; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: all 0.3s ease; | |
| } | |
| .search-modal-overlay.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .search-modal { | |
| width: 90%; | |
| max-width: 600px; | |
| background: var(--clr-surface); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--clr-border); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); | |
| overflow: hidden; | |
| transform: translateY(-20px); | |
| transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .search-modal-overlay.active .search-modal { | |
| transform: translateY(0); | |
| } | |
| .search-modal-header { | |
| display: flex; | |
| align-items: center; | |
| padding: var(--space-md) var(--space-lg); | |
| border-bottom: 1px solid var(--clr-border); | |
| gap: var(--space-md); | |
| } | |
| .search-modal-input-wrapper { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| } | |
| .search-modal-input-wrapper svg { | |
| color: var(--clr-text-secondary); | |
| } | |
| .search-modal-input-wrapper input { | |
| width: 100%; | |
| font-size: 1.1rem; | |
| padding: var(--space-sm) 0; | |
| background: transparent; | |
| color: var(--clr-text-primary); | |
| } | |
| .search-modal-body { | |
| padding: var(--space-lg); | |
| max-height: 70vh; | |
| overflow-y: auto; | |
| } | |
| .cart-badge { | |
| position: relative; | |
| } | |
| .cart-badge .badge-count { | |
| position: absolute; | |
| top: -6px; | |
| right: -6px; | |
| background: var(--clr-error); | |
| color: white; | |
| font-size: 10px; | |
| font-weight: var(--fw-bold); | |
| min-width: 18px; | |
| height: 18px; | |
| border-radius: var(--radius-full); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0 4px; | |
| animation: scaleIn var(--transition-spring); | |
| } | |
| /* Mobile hamburger */ | |
| .hamburger { | |
| display: none; | |
| flex-direction: column; | |
| gap: 5px; | |
| cursor: pointer; | |
| padding: 8px; | |
| } | |
| .hamburger span { | |
| width: 22px; | |
| height: 2px; | |
| background: var(--clr-text-primary); | |
| border-radius: 2px; | |
| transition: all var(--transition-base); | |
| } | |
| .hamburger.active span:nth-child(1) { | |
| transform: rotate(45deg) translateY(7px); | |
| } | |
| .hamburger.active span:nth-child(2) { | |
| opacity: 0; | |
| } | |
| .hamburger.active span:nth-child(3) { | |
| transform: rotate(-45deg) translateY(-7px); | |
| } | |
| /* --- Product Card --- */ | |
| .product-card { | |
| background: var(--clr-surface); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| transition: all var(--transition-base); | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-6px); | |
| box-shadow: var(--shadow-lg); | |
| border-color: var(--clr-border-hover); | |
| } | |
| .product-card-image { | |
| position: relative; | |
| aspect-ratio: 3/4; | |
| overflow: hidden; | |
| background: var(--clr-bg-secondary); | |
| } | |
| .product-card-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform var(--transition-slow); | |
| } | |
| .product-card:hover .product-card-image img { | |
| transform: scale(1.08); | |
| } | |
| .product-card-badges { | |
| position: absolute; | |
| top: var(--space-sm); | |
| left: var(--space-sm); | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-xs); | |
| } | |
| .badge { | |
| padding: 0.25rem 0.65rem; | |
| border-radius: var(--radius-full); | |
| font-size: var(--fs-xs); | |
| font-weight: var(--fw-semibold); | |
| letter-spacing: 0.02em; | |
| } | |
| .badge-new { | |
| background: var(--clr-info); | |
| color: white; | |
| } | |
| .badge-discount { | |
| background: var(--clr-error); | |
| color: white; | |
| } | |
| .badge-featured { | |
| background: var(--clr-success); | |
| color: white; | |
| } | |
| .product-card-actions { | |
| position: absolute; | |
| top: var(--space-sm); | |
| right: var(--space-sm); | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-xs); | |
| opacity: 0; | |
| transform: translateX(10px); | |
| transition: all var(--transition-base); | |
| } | |
| .product-card:hover .product-card-actions { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| .product-card-action-btn { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: var(--radius-full); | |
| background: rgba(13, 31, 35, 0.75); | |
| backdrop-filter: blur(8px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--clr-text-primary); | |
| transition: all var(--transition-fast); | |
| border: 1px solid var(--glass-border); | |
| } | |
| .product-card-action-btn:hover { | |
| background: var(--clr-accent); | |
| } | |
| .product-card-action-btn.wishlisted { | |
| color: var(--clr-error); | |
| } | |
| .product-card-body { | |
| padding: var(--space-md); | |
| } | |
| .product-card-category { | |
| font-size: var(--fs-xs); | |
| color: var(--clr-text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| margin-bottom: var(--space-xs); | |
| } | |
| .product-card-name { | |
| font-size: var(--fs-base); | |
| font-weight: var(--fw-semibold); | |
| margin-bottom: var(--space-sm); | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .product-card-rating { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-xs); | |
| margin-bottom: var(--space-sm); | |
| font-size: var(--fs-sm); | |
| } | |
| .product-card-rating .stars { | |
| color: var(--clr-warning); | |
| } | |
| .product-card-rating .count { | |
| color: var(--clr-text-muted); | |
| } | |
| .product-card-price { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| } | |
| .price-current { | |
| font-size: var(--fs-lg); | |
| font-weight: var(--fw-bold); | |
| color: var(--clr-text-primary); | |
| } | |
| .price-old { | |
| font-size: var(--fs-sm); | |
| color: var(--clr-text-muted); | |
| text-decoration: line-through; | |
| } | |
| /* --- Toast Notifications --- */ | |
| .toast-container { | |
| position: fixed; | |
| top: calc(var(--navbar-height) + var(--space-md)); | |
| right: var(--space-lg); | |
| z-index: 9999; | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-sm); | |
| } | |
| .toast { | |
| background: rgba(30, 40, 50, 0.65); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #fff; | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-md) var(--space-xl); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| min-width: 320px; | |
| max-width: 450px; | |
| animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| [data-theme="light"] .toast { | |
| background: rgba(255, 255, 255, 0.75); | |
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| color: #000; | |
| } | |
| .toast.toast-success { | |
| border-left: 3px solid var(--clr-success); | |
| } | |
| .toast.toast-error { | |
| border-left: 3px solid var(--clr-error); | |
| } | |
| .toast.toast-info { | |
| border-left: 3px solid var(--clr-info); | |
| } | |
| .toast.toast-exit { | |
| animation: slideOutRight 0.3s ease-in forwards; | |
| } | |
| @keyframes slideOutRight { | |
| to { | |
| opacity: 0; | |
| transform: translateX(100%); | |
| } | |
| } | |
| .toast-icon { | |
| font-size: 1.25rem; | |
| flex-shrink: 0; | |
| } | |
| .toast-content { | |
| flex: 1; | |
| } | |
| .toast-title { | |
| font-weight: var(--fw-semibold); | |
| font-size: var(--fs-sm); | |
| } | |
| .toast-message { | |
| font-size: var(--fs-xs); | |
| color: var(--clr-text-secondary); | |
| margin-top: 2px; | |
| } | |
| .toast-close { | |
| color: var(--clr-gray); | |
| cursor: pointer; | |
| padding: 4px; | |
| } | |
| .toast-close:hover { | |
| color: var(--clr-text-primary); | |
| } | |
| /* --- Modal --- */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| height: 100vh; | |
| width: 100vw; | |
| background: rgba(0, 0, 0, 0.6); | |
| backdrop-filter: blur(4px); | |
| z-index: 2000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-lg); | |
| animation: fadeIn 0.2s ease; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity var(--transition-base); | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .modal { | |
| background: var(--clr-bg-secondary); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-xl); | |
| max-width: 600px; | |
| width: 100%; | |
| max-height: 85vh; | |
| overflow-y: auto; | |
| padding: var(--space-2xl); | |
| animation: slideDownModal 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| box-shadow: var(--shadow-xl); | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-lg); | |
| } | |
| .modal-title { | |
| font-size: var(--fs-xl); | |
| font-weight: var(--fw-bold); | |
| } | |
| .modal-close { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: var(--radius-full); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--clr-gray); | |
| transition: all var(--transition-fast); | |
| } | |
| .modal-close:hover { | |
| background: var(--clr-surface); | |
| color: var(--clr-text-primary); | |
| } | |
| /* --- Input Fields --- */ | |
| .form-group { | |
| margin-bottom: var(--space-lg); | |
| } | |
| .form-label { | |
| display: block; | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-medium); | |
| color: var(--clr-text-secondary); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .form-input { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| background: var(--clr-surface); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-md); | |
| color: var(--clr-text-primary); | |
| font-size: var(--fs-base); | |
| transition: all var(--transition-fast); | |
| } | |
| .form-input:focus { | |
| border-color: var(--clr-accent); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .form-input::placeholder { | |
| color: var(--clr-gray); | |
| } | |
| .form-input.error { | |
| border-color: var(--clr-error); | |
| } | |
| .form-error { | |
| font-size: var(--fs-xs); | |
| color: var(--clr-error); | |
| margin-top: var(--space-xs); | |
| } | |
| select.form-input { | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2369818D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 1rem center; | |
| padding-right: 2.5rem; | |
| } | |
| /* --- Footer --- */ | |
| .footer { | |
| background: var(--clr-bg-secondary); | |
| border-top: 1px solid var(--clr-border); | |
| padding: var(--space-4xl) 0 var(--space-xl); | |
| margin-top: var(--space-4xl); | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr 1fr 1fr; | |
| gap: var(--space-2xl); | |
| } | |
| .footer-brand { | |
| max-width: 320px; | |
| } | |
| .footer-brand-name { | |
| font-size: var(--fs-xl); | |
| font-weight: var(--fw-extrabold); | |
| background: linear-gradient(135deg, var(--clr-light), var(--clr-mid)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: var(--space-md); | |
| } | |
| .footer-brand-desc { | |
| color: var(--clr-text-muted); | |
| font-size: var(--fs-sm); | |
| line-height: 1.7; | |
| } | |
| .footer-heading { | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-semibold); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--clr-text-secondary); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .footer-links { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-sm); | |
| } | |
| .footer-links a { | |
| color: var(--clr-text-muted); | |
| font-size: var(--fs-sm); | |
| transition: color var(--transition-fast); | |
| } | |
| .footer-links a:hover { | |
| color: var(--clr-text-primary); | |
| } | |
| .footer-bottom { | |
| margin-top: var(--space-3xl); | |
| padding-top: var(--space-lg); | |
| border-top: 1px solid var(--clr-border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| color: var(--clr-text-muted); | |
| font-size: var(--fs-xs); | |
| } | |
| .footer-social { | |
| display: flex; | |
| gap: var(--space-md); | |
| } | |
| .footer-social a { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: var(--radius-full); | |
| background: var(--clr-surface); | |
| border: 1px solid var(--clr-border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--clr-text-muted); | |
| transition: all var(--transition-fast); | |
| } | |
| .footer-social a:hover { | |
| background: var(--clr-accent); | |
| color: var(--clr-text-primary); | |
| border-color: var(--clr-accent); | |
| } | |
| /* --- Empty State --- */ | |
| .empty-state { | |
| text-align: center; | |
| padding: var(--space-4xl) var(--space-xl); | |
| } | |
| .empty-state-icon { | |
| font-size: 4rem; | |
| margin-bottom: var(--space-lg); | |
| opacity: 0.5; | |
| } | |
| .empty-state-title { | |
| font-size: var(--fs-xl); | |
| font-weight: var(--fw-semibold); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .empty-state-text { | |
| color: var(--clr-text-muted); | |
| margin-bottom: var(--space-xl); | |
| } | |
| /* --- Quantity Control --- */ | |
| .qty-control { | |
| display: inline-flex; | |
| align-items: center; | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| } | |
| .qty-btn { | |
| width: 36px; | |
| height: 36px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--clr-text-secondary); | |
| transition: all var(--transition-fast); | |
| background: var(--clr-surface); | |
| } | |
| .qty-btn:hover { | |
| background: var(--clr-accent); | |
| color: var(--clr-text-primary); | |
| } | |
| .qty-value { | |
| width: 44px; | |
| text-align: center; | |
| font-weight: var(--fw-semibold); | |
| font-size: var(--fs-sm); | |
| background: transparent; | |
| border-left: 1px solid var(--clr-border); | |
| border-right: 1px solid var(--clr-border); | |
| padding: 0.4rem 0; | |
| } | |
| /* --- Size/Color Selector --- */ | |
| .size-selector, | |
| .color-selector { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--space-sm); | |
| } | |
| .size-btn { | |
| min-width: 42px; | |
| height: 42px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-md); | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-medium); | |
| color: var(--clr-text-secondary); | |
| background: var(--clr-surface); | |
| transition: all var(--transition-fast); | |
| cursor: pointer; | |
| } | |
| .size-btn:hover { | |
| border-color: var(--clr-accent); | |
| color: var(--clr-text-primary); | |
| } | |
| .size-btn.active { | |
| border-color: var(--clr-mid); | |
| background: var(--clr-accent); | |
| color: var(--clr-text-primary); | |
| } | |
| .color-btn { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius-full); | |
| border: 2px solid transparent; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| position: relative; | |
| } | |
| .color-btn:hover { | |
| transform: scale(1.15); | |
| } | |
| .color-btn.active { | |
| border-color: var(--clr-text-primary); | |
| box-shadow: 0 0 0 2px var(--clr-bg-primary); | |
| } | |
| /* --- Tabs --- */ | |
| .tabs { | |
| display: flex; | |
| border-bottom: 1px solid var(--clr-border); | |
| gap: 0; | |
| } | |
| .tab-btn { | |
| padding: 0.75rem 1.5rem; | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-medium); | |
| color: var(--clr-text-muted); | |
| position: relative; | |
| transition: all var(--transition-fast); | |
| } | |
| .tab-btn:hover { | |
| color: var(--clr-text-secondary); | |
| } | |
| .tab-btn.active { | |
| color: var(--clr-text-primary); | |
| } | |
| .tab-btn.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: var(--clr-mid); | |
| border-radius: var(--radius-full); | |
| } | |
| .tab-content { | |
| display: none; | |
| padding: var(--space-xl) 0; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| /* --- Progress Steps --- */ | |
| .progress-steps { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: var(--space-2xl); | |
| } | |
| .progress-step { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| color: var(--clr-text-muted); | |
| font-size: var(--fs-sm); | |
| } | |
| .progress-step+.progress-step::before { | |
| content: ''; | |
| width: 40px; | |
| height: 1px; | |
| background: var(--clr-border); | |
| margin: 0 var(--space-md); | |
| } | |
| .progress-step .step-num { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius-full); | |
| border: 1px solid var(--clr-border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: var(--fw-semibold); | |
| font-size: var(--fs-sm); | |
| transition: all var(--transition-base); | |
| } | |
| .progress-step.active .step-num { | |
| background: var(--clr-accent); | |
| border-color: var(--clr-mid); | |
| color: var(--clr-text-primary); | |
| } | |
| .progress-step.active { | |
| color: var(--clr-text-primary); | |
| } | |
| .progress-step.done .step-num { | |
| background: var(--clr-success); | |
| border-color: var(--clr-success); | |
| color: white; | |
| } | |
| .progress-step.done { | |
| color: var(--clr-success); | |
| } | |
| /* --- Responsive (Mobile) --- */ | |
| @media (max-width: 768px) { | |
| .navbar-nav { | |
| display: none; | |
| } | |
| .hamburger { | |
| display: flex; | |
| } | |
| .mobile-nav { | |
| position: fixed; | |
| top: var(--navbar-height); | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(13, 31, 35, 0.98); | |
| backdrop-filter: blur(20px); | |
| z-index: 999; | |
| display: flex; | |
| flex-direction: column; | |
| padding: var(--space-xl); | |
| transform: translateX(-100%); | |
| transition: transform var(--transition-base); | |
| } | |
| .mobile-nav.active { | |
| transform: translateX(0); | |
| } | |
| .mobile-nav a { | |
| padding: var(--space-md); | |
| font-size: var(--fs-lg); | |
| border-bottom: 1px solid var(--clr-border); | |
| color: var(--clr-text-secondary); | |
| } | |
| .mobile-nav a:hover, | |
| .mobile-nav a.active { | |
| color: var(--clr-text-primary); | |
| } | |
| .footer-grid { | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-xl); | |
| } | |
| .footer-brand { | |
| grid-column: 1 / -1; | |
| } | |
| .footer-bottom { | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| text-align: center; | |
| } | |
| .product-card-actions { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| .progress-steps { | |
| flex-wrap: wrap; | |
| gap: var(--space-sm); | |
| } | |
| .progress-step+.progress-step::before { | |
| width: 20px; | |
| margin: 0 var(--space-sm); | |
| } | |
| .progress-step .step-label { | |
| display: none; | |
| } | |
| .toast { | |
| min-width: auto; | |
| max-width: calc(100vw - 2rem); | |
| } | |
| .toast-container { | |
| left: var(--space-md); | |
| right: var(--space-md); | |
| } | |
| } | |
| /* --- Search Dropdown --- */ | |
| .search-dropdown { | |
| position: absolute; | |
| top: calc(100% + 8px); | |
| left: 0; | |
| right: 0; | |
| min-width: 340px; | |
| background: var(--clr-bg-secondary); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-xl); | |
| z-index: 100; | |
| overflow: hidden; | |
| display: none; | |
| animation: fadeInDown 0.2s ease-out; | |
| } | |
| .search-dropdown.active { | |
| display: block; | |
| } | |
| .search-dropdown-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| padding: 0.65rem 1rem; | |
| transition: background var(--transition-fast); | |
| cursor: pointer; | |
| } | |
| .search-dropdown-item:hover { | |
| background: var(--clr-surface-hover); | |
| } | |
| .search-dropdown-item img { | |
| width: 44px; | |
| height: 54px; | |
| object-fit: cover; | |
| border-radius: var(--radius-sm); | |
| flex-shrink: 0; | |
| } | |
| .search-dropdown-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .search-dropdown-name { | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-medium); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .search-dropdown-price { | |
| font-size: var(--fs-xs); | |
| color: var(--clr-text-muted); | |
| margin-top: 2px; | |
| } | |
| .search-dropdown-empty { | |
| padding: 1.5rem; | |
| text-align: center; | |
| color: var(--clr-text-muted); | |
| font-size: var(--fs-sm); | |
| } | |
| .search-dropdown-all { | |
| display: block; | |
| padding: 0.75rem 1rem; | |
| text-align: center; | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-medium); | |
| color: var(--clr-mid); | |
| border-top: 1px solid var(--clr-border); | |
| transition: background var(--transition-fast); | |
| } | |
| .search-dropdown-all:hover { | |
| background: var(--clr-surface); | |
| color: var(--clr-text-primary); | |
| } | |
| /* --- Back to Top --- */ | |
| .back-to-top { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| width: 48px; | |
| height: 48px; | |
| border-radius: var(--radius-full); | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(var(--glass-blur)); | |
| border: 1px solid var(--glass-border); | |
| color: var(--clr-text-primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all var(--transition-base); | |
| z-index: 900; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .back-to-top.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .back-to-top:hover { | |
| background: var(--clr-accent); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| /* --- Newsletter --- */ | |
| .newsletter-section { | |
| background: linear-gradient(135deg, var(--clr-accent), var(--clr-bg-secondary)); | |
| border-radius: var(--radius-xl); | |
| padding: var(--space-3xl); | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .newsletter-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -20%; | |
| width: 60%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.04), transparent); | |
| } | |
| .newsletter-title { | |
| font-size: var(--fs-2xl); | |
| font-weight: var(--fw-bold); | |
| margin-bottom: var(--space-sm); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .newsletter-desc { | |
| color: var(--clr-text-secondary); | |
| margin-bottom: var(--space-xl); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .newsletter-form { | |
| display: flex; | |
| gap: var(--space-sm); | |
| max-width: 480px; | |
| margin: 0 auto; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .newsletter-form input { | |
| flex: 1; | |
| padding: 0.85rem 1.25rem; | |
| background: rgba(13, 31, 35, 0.6); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-full); | |
| color: var(--clr-text-primary); | |
| font-size: var(--fs-sm); | |
| } | |
| .newsletter-form input::placeholder { | |
| color: var(--clr-gray); | |
| } | |
| .newsletter-form .btn { | |
| border-radius: var(--radius-full); | |
| } | |
| /* --- Login Modal --- */ | |
| .login-tabs { | |
| display: flex; | |
| margin-bottom: var(--space-xl); | |
| border-bottom: 1px solid var(--clr-border); | |
| } | |
| .login-tab { | |
| flex: 1; | |
| padding: 0.75rem; | |
| text-align: center; | |
| font-weight: var(--fw-medium); | |
| color: var(--clr-text-muted); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| position: relative; | |
| } | |
| .login-tab.active { | |
| color: var(--clr-text-primary); | |
| } | |
| .login-tab.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: var(--clr-mid); | |
| } | |
| /* --- Review Stars Rating --- */ | |
| .review-stars { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .review-star { | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| color: var(--clr-gray); | |
| transition: color var(--transition-fast); | |
| } | |
| .review-star.active, | |
| .review-star:hover { | |
| color: var(--clr-warning); | |
| } | |
| /* --- Mobile Quick View --- */ | |
| @media (max-width: 768px) { | |
| .search-dropdown { | |
| min-width: auto; | |
| left: -60px; | |
| right: -20px; | |
| } | |
| .modal[style*="max-width:800px"]>div[style*="grid-template-columns"] { | |
| display: flex ; | |
| flex-direction: column ; | |
| } | |
| .back-to-top { | |
| bottom: 1.5rem; | |
| right: 1.5rem; | |
| width: 42px; | |
| height: 42px; | |
| } | |
| .newsletter-form { | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes slideDownModal { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-40px) scale(0.96); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| /* --- Page Transitions --- */ | |
| .page-fade-enter { | |
| animation: fadeInPage 0.4s ease-out forwards; | |
| } | |
| @keyframes fadeInPage { | |
| from { | |
| opacity: 0; | |
| transform: translateY(15px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* --- Flying Cart Animation --- */ | |
| .flying-img { | |
| position: fixed; | |
| z-index: 9999; | |
| border-radius: 50%; | |
| transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1); | |
| box-shadow: var(--shadow-lg); | |
| opacity: 0.9; | |
| pointer-events: none; | |
| } | |
| @keyframes cartBump { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.3); | |
| color: var(--clr-accent); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .bump { | |
| animation: cartBump 0.3s ease-out; | |
| } | |
| /* --- Quick View --- */ | |
| /* --- Login Tabs --- */ | |
| .login-tabs { | |
| display: flex; | |
| margin-bottom: 1.5rem; | |
| border-bottom: 2px solid var(--clr-border); | |
| } | |
| .login-tab { | |
| flex: 1; | |
| padding: 0.75rem; | |
| text-align: center; | |
| cursor: pointer; | |
| font-weight: var(--fw-medium); | |
| color: var(--clr-text-muted); | |
| transition: all var(--transition-fast); | |
| border-bottom: 2px solid transparent; | |
| margin-bottom: -2px; | |
| } | |
| .login-tab.active { | |
| color: var(--clr-text-primary); | |
| border-bottom-color: var(--clr-mid); | |
| } | |
| .login-tab:hover { | |
| color: var(--clr-text-primary); | |
| } | |
| /* --- Review Stars --- */ | |
| .review-stars { | |
| display: flex; | |
| gap: 4px; | |
| font-size: 1.5rem; | |
| } | |
| .review-star { | |
| cursor: pointer; | |
| color: var(--clr-gray); | |
| transition: color var(--transition-fast), transform var(--transition-fast); | |
| } | |
| .review-star.active, | |
| .review-star:hover { | |
| color: var(--clr-warning); | |
| } | |
| .review-star:hover { | |
| transform: scale(1.2); | |
| } | |
| /* --- Product Image Zoom Transition --- */ | |
| .product-main-image img { | |
| transition: transform var(--transition-base); | |
| } | |
| /* --- Light Mode Scrollbar --- */ | |
| [data-theme="light"]::-webkit-scrollbar-track { | |
| background: var(--clr-bg-primary); | |
| } | |
| [data-theme="light"]::-webkit-scrollbar-thumb { | |
| background: #B8C4CC; | |
| } | |
| [data-theme="light"]::-webkit-scrollbar-thumb:hover { | |
| background: #8A9AA6; | |
| } | |
| /* --- Light Mode Cards & Surfaces --- */ | |
| [data-theme="light"] .product-card { | |
| box-shadow: var(--shadow-sm); | |
| } | |
| [data-theme="light"] .footer { | |
| background: #1A2B32; | |
| color: #E8EAEC; | |
| } | |
| [data-theme="light"] .footer a { | |
| color: #AFB3B7; | |
| } | |
| [data-theme="light"] .footer a:hover { | |
| color: #E8EAEC; | |
| } | |
| [data-theme="light"] .footer-heading { | |
| color: #E8EAEC; | |
| } | |
| /* --- Skeleton Loader --- */ | |
| .skeleton { | |
| background: linear-gradient(90deg, var(--clr-surface) 25%, rgba(255, 255, 255, 0.06) 50%, var(--clr-surface) 75%); | |
| background-size: 400% 100%; | |
| animation: shimmer 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) infinite; | |
| border-radius: var(--radius-md); | |
| } | |
| [data-theme="light"] .skeleton { | |
| background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%); | |
| background-size: 400% 100%; | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| background-position: 100% 0; | |
| } | |
| 100% { | |
| background-position: -100% 0; | |
| } | |
| } | |
| .skeleton-text { | |
| height: 1em; | |
| margin-bottom: 0.5em; | |
| border-radius: var(--radius-sm); | |
| } | |
| .skeleton-text.short { | |
| width: 60%; | |
| } | |
| .skeleton-text.medium { | |
| width: 80%; | |
| } | |
| .skeleton-img { | |
| width: 100%; | |
| aspect-ratio: 3/4; | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| background-position: 200% 0; | |
| } | |
| 100% { | |
| background-position: -200% 0; | |
| } | |
| } | |
| /* --- Light Mode Mobile Nav --- */ | |
| [data-theme="light"] .mobile-nav { | |
| background: rgba(245, 247, 250, 0.98); | |
| } | |
| [data-theme="light"] .mobile-nav a { | |
| color: #3A5060; | |
| border-bottom-color: #E0E6EA; | |
| } | |
| [data-theme="light"] .mobile-nav a:hover, | |
| [data-theme="light"] .mobile-nav a.active { | |
| color: #1A2B32; | |
| } |