File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090003/shop003/69319090003/style.css

Back
/* ========================================================================== MINIMALIST CLOSET PREMIUM STYLESHEET Theme: Elegant Minimalist Warm Beige & Sleek Monochrome Design ========================================================================== / / 1. Design System & Variables / :root { / Color Palette - Cream, Warm Beige, Charcoal and Pure White / --color-primary: #111111; --color-primary-hover: #333333; --color-primary-light: #f3eee8; / Cozy Cream/Beige / --color-primary-light-hover: #e8e2da; --color-bg-body: #ffffff; --color-bg-card: #ffffff; --color-bg-footer: #fafafa; --color-text-title: #111111; --color-text-body: #2d2d2d; --color-text-muted: #707070; --color-border: #e2e2e2; --color-border-hover: #111111; --color-success: #111111; / Keep buttons clean & monochrome / --color-success-hover: #333333; --color-danger: #ef4444; / Shadows / --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.08); / Typography & Transitions / --font-primary: 'Outfit', 'Sarabun', sans-serif; --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: all 0.15s ease; / Border Radius / --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-round: 50%; } / Dark Mode Variables Override / body.dark-theme { --color-bg-body: #121212; --color-bg-card: #1d1d1d; --color-bg-footer: #181818; --color-primary: #ffffff; --color-primary-hover: #dddddd; --color-primary-light: #282623; --color-primary-light-hover: #35322e; --color-text-title: #ffffff; --color-text-body: #dddddd; --color-text-muted: #999999; --color-border: #333333; --color-border-hover: #ffffff; } / 2. Global Reset & Setup / { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; } body { background-color: var(--color-bg-body); color: var(--color-text-body); font-family: var(--font-primary); line-height: 1.5; overflow-x: hidden; position: relative; transition: background-color 0.3s ease, color 0.3s ease; } a { color: inherit; text-decoration: none; transition: var(--transition-fast); } button, input, textarea, select { font-family: inherit; color: inherit; outline: none; border: none; } button { cursor: pointer; background: transparent; } /* Custom Scrollbar / ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--color-bg-body); } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-sm); } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); } / 4. Brand Header (Minimalist Style) / .main-header { background-color: var(--color-bg-card); color: var(--color-text-title); padding: 16px 0; position: sticky; top: 0; z-index: 90; border-bottom: 1px solid var(--color-border); transition: background-color 0.3s ease, border-color 0.3s ease; } .header-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 30px; } .brand-logo { display: flex; align-items: center; gap: 12px; color: var(--color-text-title); } .brand-emblem-img { height: 48px; width: 48px; object-fit: contain; } .logo-text { display: flex; flex-direction: column; } .logo-main { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.2px; line-height: 1.2; } .logo-sub { font-size: 0.72rem; font-weight: 500; letter-spacing: 1.5px; color: var(--color-text-muted); } .header-actions { display: flex; align-items: center; gap: 20px; } .theme-toggle-btn { font-size: 1.35rem; display: flex; align-items: center; justify-content: center; color: var(--color-text-title); padding: 6px; border-radius: var(--radius-round); transition: var(--transition-fast); } .theme-toggle-btn:hover { background-color: var(--color-primary-light); } / Cart Trigger and Dropdown / .cart-container { position: relative; cursor: pointer; padding: 6px; } .cart-icon-wrapper { position: relative; color: var(--color-text-title); display: flex; align-items: center; } .cart-icon-wrapper i { font-size: 1.45rem; } .cart-badge { position: absolute; top: -4px; right: -6px; background-color: var(--color-primary); color: var(--color-bg-card); font-size: 0.65rem; font-weight: 700; padding: 1px 5px; border-radius: 100px; transition: background-color 0.3s ease; } / Cart Hover Dropdown / .cart-dropdown { position: absolute; top: 100%; right: 0; width: 340px; background-color: var(--color-bg-card); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition-smooth); z-index: 100; cursor: default; } .cart-container:hover .cart-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-header { padding: 12px 16px; font-size: 0.8rem; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); } .dropdown-items { max-height: 240px; overflow-y: auto; } .empty-dropdown { padding: 30px 16px; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; } .dropdown-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); transition: var(--transition-fast); } .dropdown-item:hover { background-color: var(--color-primary-light); } .drop-item-img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .drop-item-info { flex: 1; display: flex; flex-direction: column; justify-content: center; } .drop-item-title { font-size: 0.8rem; font-weight: 500; color: var(--color-text-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .drop-item-meta { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 1px; } .drop-item-price { font-size: 0.8rem; font-weight: 600; color: var(--color-text-title); align-self: center; } .dropdown-footer { padding: 12px 16px; background-color: var(--color-primary-light); border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; } .total-label { font-size: 0.8rem; color: var(--color-text-body); } .total-price { font-weight: 700; color: var(--color-text-title); } .btn-go-cart { background-color: var(--color-primary); color: var(--color-bg-card); font-size: 0.75rem; padding: 6px 12px; border-radius: 2px; font-weight: 600; transition: var(--transition-fast); } .btn-go-cart:hover { background-color: var(--color-primary-hover); } / Auth Buttons / .auth-status-container { display: flex; align-items: center; gap: 8px; } .btn-login-outline { border: 1px solid var(--color-primary); color: var(--color-text-title); font-size: 0.82rem; font-weight: 600; padding: 8px 18px; border-radius: 100px; transition: var(--transition-fast); } .btn-login-outline:hover { background-color: var(--color-primary-light); } .btn-register-solid { background-color: var(--color-primary); color: var(--color-bg-card); font-size: 0.82rem; font-weight: 600; padding: 8px 18px; border-radius: 100px; transition: var(--transition-fast); } .btn-register-solid:hover { background-color: var(--color-primary-hover); } .user-badge-header { display: flex; align-items: center; gap: 6px; background-color: var(--color-primary-light); padding: 4px 12px; border-radius: 100px; font-size: 0.82rem; font-weight: 600; } .btn-text-link { font-size: 0.82rem; font-weight: 600; text-decoration: underline; } / 5. Main Application Structure / .app-body { padding: 0 0 60px 0; } / Hero Section style matching orange online pre-order system banner / .hero-section { background: linear-gradient(135deg, #ff5722 0%, #f97316 100%); / Vibrant Orange / padding: 48px 24px; margin: 20px auto 40px auto; max-width: 1152px; / 1200px container minus padding / border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(249, 115, 22, 0.22); transition: var(--transition-smooth); } .hero-container { max-width: 800px; margin: 0 auto; } .hero-content { margin: 0 auto; } .hero-title { font-size: 2.2rem; font-weight: 800; color: #ffffff; / White text / margin-bottom: 0; line-height: 1.3; } .main-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } / Minimalist catalog filter and search layout / .catalog-filters-bar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border); padding-bottom: 20px; margin-bottom: 30px; gap: 16px; flex-wrap: wrap; } .search-box-minimalist { position: relative; width: 280px; } .search-box-minimalist input { width: 100%; border: 1px solid var(--color-border); background-color: var(--color-bg-card); color: var(--color-text-body); padding: 10px 16px 10px 38px; font-size: 0.85rem; border-radius: var(--radius-sm); transition: var(--transition-fast); } .search-box-minimalist input:focus { border-color: var(--color-primary); } .search-box-minimalist .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; color: var(--color-text-muted); } .category-tabs-minimalist { display: flex; gap: 8px; } .btn-tab { background-color: transparent; border: 1px solid var(--color-border); color: var(--color-text-body); padding: 8px 18px; border-radius: 100px; font-size: 0.85rem; font-weight: 600; transition: var(--transition-fast); } .btn-tab:hover, .btn-tab.active { background-color: var(--color-primary); color: var(--color-bg-card); border-color: var(--color-primary); } .size-filter-minimalist { display: flex; align-items: center; gap: 6px; } .size-filter-minimalist .filter-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); margin-right: 4px; } .btn-size-tab { background-color: transparent; border: 1px solid var(--color-border); color: var(--color-text-body); width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .btn-size-tab:hover, .btn-size-tab.active { border-color: var(--color-primary); color: var(--color-primary); background-color: var(--color-primary-light); } / Full Width Store Grid Layout / .store-grid-full { width: 100%; } .products-shelf { width: 100%; } .shelf-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; } .shelf-title { font-size: 1.45rem; font-weight: 800; color: var(--color-text-title); letter-spacing: -0.5px; line-height: 1.1; } .shelf-subtitle { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 4px; } .btn-add-product { background-color: var(--color-primary); color: var(--color-bg-card); font-size: 0.82rem; font-weight: 600; padding: 8px 18px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 6px; transition: var(--transition-fast); } .btn-add-product:hover { background-color: var(--color-primary-hover); } / Products Grid Container / .products-grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 992px) { .products-grid-container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .products-grid-container { grid-template-columns: 1fr; } } / Minimalist Card Design / .product-card-item { background-color: var(--color-bg-card); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: var(--transition-smooth); } .product-card-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--color-primary); } .prod-card-img-box { position: relative; width: 100%; aspect-ratio: 1 / 1.1; overflow: hidden; } .prod-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); } .product-card-item:hover .prod-card-img { transform: scale(1.04); } .product-card-item .card-badge-left { position: absolute; top: 12px; left: 12px; background-color: var(--color-primary-light); color: var(--color-primary); font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; text-transform: uppercase; } .prod-card-details { padding: 20px; display: flex; flex-direction: column; flex: 1; } .prod-card-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text-title); margin-bottom: 6px; line-height: 1.3; } .prod-card-desc { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 16px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 32px; } / Card select sizing and quantities styling / .prod-card-selectors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; background-color: var(--color-bg-body); padding: 8px 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border); } .selector-group { display: flex; flex-direction: column; gap: 4px; } .selector-group label { font-size: 0.65rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .prod-card-select, .prod-card-input { background-color: transparent; font-size: 0.85rem; font-weight: 600; color: var(--color-text-title); width: 100%; cursor: pointer; } .prod-card-input { cursor: text; } / Price & Quick Buy Actions Layout / .prod-card-price-sold-row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-border); } .price-stock-info { display: flex; flex-direction: column; } .prod-card-price { color: var(--color-text-title); font-size: 1.15rem; font-weight: 800; } .prod-card-stock { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 2px; } .card-actions-strip { display: flex; align-items: center; gap: 6px; } .btn-card-quickview { border: 1px solid var(--color-border); color: var(--color-text-title); width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: var(--transition-fast); } .btn-card-quickview:hover { border-color: var(--color-primary); background-color: var(--color-primary-light); } .btn-card-add-to-cart { background-color: var(--color-primary); color: var(--color-bg-card); font-size: 0.78rem; font-weight: 700; padding: 8px 14px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 6px; transition: var(--transition-fast); } .btn-card-add-to-cart:hover { background-color: var(--color-primary-hover); } .btn-card-delete { background-color: #fff1f0; color: var(--color-danger); width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: var(--transition-fast); } .btn-card-delete:hover { background-color: var(--color-danger); color: #ffffff; } / No products found text styling / .no-products-found { text-align: center; padding: 60px 20px; color: var(--color-text-muted); } .no-products-found i { font-size: 3.5rem; margin-bottom: 12px; display: block; color: var(--color-border); } / 6. Modals & Overlay system / .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-card { background-color: var(--color-bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); position: relative; max-width: 90%; max-height: 90%; overflow-y: auto; transform: scale(0.9); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .modal-overlay.active .modal-card { transform: scale(1); } .modal-close { position: absolute; top: 14px; right: 14px; font-size: 1.4rem; color: var(--color-text-muted); transition: var(--transition-fast); z-index: 10; } .modal-close:hover { color: var(--color-primary); } .modal-header { padding: 24px; border-bottom: 1px solid var(--color-border); } .modal-header h2 { font-size: 1.25rem; color: var(--color-text-title); font-weight: 700; } .modal-header p { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 4px; } / Authentication Forms styling / .auth-modal { width: 400px; } .auth-form { padding: 24px; } .form-group { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; text-align: left; } .form-group label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-body); } .required { color: var(--color-danger); } .input-wrapper { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; left: 12px; color: var(--color-text-muted); font-size: 1.1rem; } .input-wrapper input, .form-group input, .form-group select, .form-group textarea { width: 100%; border: 1px solid var(--color-border); padding: 10px 12px 10px 38px; border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--color-text-title); transition: var(--transition-fast); } / Modifiers for input fields when icon is not present / .product-form input, .product-form select, .product-form textarea { padding-left: 12px; } .input-wrapper input:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.1); } .admin-hint-alert { background-color: #fef9c3; border: 1px solid #fef08a; color: #713f12; font-size: 0.8rem; padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; } .admin-hint-alert i { font-size: 1rem; } .btn-submit-form { background-color: var(--color-primary); color: #ffffff; font-size: 0.95rem; font-weight: 600; padding: 12px 0; width: 100%; border-radius: var(--radius-sm); text-align: center; box-shadow: var(--shadow-glow); transition: var(--transition-fast); } .btn-submit-form:hover { background-color: var(--color-primary-hover); } .btn-reg-submit { background-color: #3b82f6; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); } .btn-reg-submit:hover { background-color: #2563eb; } .modal-footer { padding: 16px 24px; background-color: #fafafa; border-top: 1px solid var(--color-border); text-align: center; font-size: 0.85rem; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .btn-switch-auth { color: var(--color-primary); font-weight: 600; } .btn-switch-auth:hover { text-decoration: underline; } / Product Upload Form / .product-upload-modal { width: 780px; } .product-form { padding: 24px; } .form-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } / Size selector checkbox matrix styling / .size-checkbox-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .size-checkbox-item input { display: none; } .chk-box-btn { display: block; background-color: #fafafa; border: 1px solid var(--color-border); text-align: center; padding: 8px 0; font-size: 0.8rem; font-weight: 600; border-radius: 2px; cursor: pointer; transition: var(--transition-fast); } .size-checkbox-item input:checked+.chk-box-btn { background-color: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); } / Image Upload drag-drop area / .image-uploader-wrapper { border: 2px dashed var(--color-border); border-radius: var(--radius-md); aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; position: relative; overflow: hidden; padding: 16px; background-color: #fafafa; transition: var(--transition-fast); } .image-uploader-wrapper:hover { border-color: var(--color-primary); } .file-hidden-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .uploader-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--color-text-muted); } .uploader-placeholder i { font-size: 3rem; color: var(--color-primary); } .upload-title { font-size: 0.9rem; font-weight: 600; color: var(--color-text-title); } .upload-note { font-size: 0.72rem; } .upload-preview-img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 2; } .btn-remove-preview { position: absolute; bottom: 12px; right: 12px; z-index: 5; background-color: var(--color-danger); color: #ffffff; padding: 6px 12px; font-size: 0.75rem; border-radius: var(--radius-sm); font-weight: 600; display: flex; align-items: center; gap: 4px; } .form-footer-actions { margin-top: 24px; border-top: 1px solid var(--color-border); padding-top: 20px; display: flex; justify-content: flex-end; gap: 12px; } .btn-cancel { padding: 10px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; color: var(--color-text-body); } .btn-cancel:hover { background-color: #f5f5f5; } .btn-confirm-add { background-color: var(--color-primary); color: #ffffff; padding: 10px 24px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; box-shadow: var(--shadow-glow); } .btn-confirm-add:hover { background-color: var(--color-primary-hover); } / Product Detail Modal Quickview / .product-detail-modal { width: 720px; } .detail-modal-grid { display: grid; grid-template-columns: 1fr 1fr; } .detail-image-box { aspect-ratio: 1 / 1; background-color: #f9f9f9; } .detail-image-box img { width: 100%; height: 100%; object-fit: cover; } .detail-info-box { padding: 30px; display: flex; flex-direction: column; text-align: left; } .detail-category { font-size: 0.75rem; background-color: var(--color-primary-light); color: var(--color-primary); padding: 3px 8px; border-radius: 2px; display: inline-block; align-self: flex-start; font-weight: 700; text-transform: uppercase; } .detail-title { font-size: 1.3rem; color: var(--color-text-title); margin-top: 10px; font-weight: 700; line-height: 1.3; } .detail-seller-badge { margin-top: 8px; font-size: 0.78rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 4px; } .detail-seller-badge .seller-name { font-weight: 600; color: var(--color-text-title); } .detail-price-tag { margin-top: 14px; color: var(--color-primary); font-size: 1.8rem; font-weight: 800; } .detail-price-tag .currency { font-size: 1.15rem; font-weight: 700; margin-right: 2px; } .detail-divider { height: 1px; background-color: var(--color-border); margin: 16px 0; } .detail-desc { font-size: 0.88rem; color: var(--color-text-body); line-height: 1.6; max-height: 120px; overflow-y: auto; } .detail-section-group { display: flex; flex-direction: column; gap: 8px; } .section-label { font-size: 0.85rem; font-weight: 700; color: var(--color-text-title); } / Detail view size pill buttons / .detail-size-options { display: flex; gap: 8px; flex-wrap: wrap; } .detail-size-pill { background-color: #fafafa; border: 1px solid var(--color-border); padding: 6px 14px; font-size: 0.78rem; font-weight: 700; border-radius: 2px; cursor: pointer; transition: var(--transition-fast); } .detail-size-pill:hover { border-color: var(--color-primary); color: var(--color-primary); } .detail-size-pill.active { background-color: var(--color-primary); border-color: var(--color-primary); color: #ffffff; } .detail-actions { margin-top: auto; padding-top: 20px; } .btn-add-to-cart-action { background-color: var(--color-primary); color: #ffffff; font-size: 0.95rem; font-weight: 600; padding: 12px 24px; width: 100%; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--shadow-glow); transition: var(--transition-fast); } .btn-add-to-cart-action:hover { background-color: var(--color-primary-hover); transform: translateY(-1px); } / Cart Checkout Modal (Drawer Style Layout) / .cart-checkout-modal { width: 680px; } .cart-items-container { max-height: 360px; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; background-color: #fafafa; } .cart-row-item { background-color: #ffffff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px 16px; display: flex; align-items: center; gap: 16px; } .cart-item-img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .cart-item-details { flex: 1; display: flex; flex-direction: column; text-align: left; } .cart-item-title { font-size: 0.9rem; font-weight: 600; color: var(--color-text-title); } .cart-item-size-badge { font-size: 0.72rem; font-weight: 700; color: var(--color-primary); margin-top: 2px; } .cart-item-price-unit { font-size: 0.85rem; color: var(--color-text-muted); } / Quantity controls in checkout / .qty-controller-box { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: 2px; overflow: hidden; } .qty-btn { background-color: #fafafa; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; color: var(--color-text-body); } .qty-btn:hover { background-color: #f1f1f1; } .qty-input-box { width: 32px; height: 28px; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); text-align: center; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; justify-content: center; background-color: #ffffff; } .cart-item-subtotal { font-size: 0.95rem; font-weight: 700; color: var(--color-primary); width: 80px; text-align: right; } .btn-cart-row-remove { color: var(--color-text-muted); font-size: 1.1rem; padding: 4px; transition: var(--transition-fast); } .btn-cart-row-remove:hover { color: var(--color-danger); } .cart-summary-section { padding: 20px 24px; border-top: 1px solid var(--color-border); background-color: #ffffff; display: flex; flex-direction: column; gap: 8px; } .sum-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--color-text-body); } .sum-val { font-weight: 600; color: var(--color-text-title); } .total-row { font-size: 1.1rem; font-weight: 700; color: var(--color-text-title); border-top: 1px dashed var(--color-border); padding-top: 10px; margin-top: 4px; } .total-row .total-price { font-size: 1.4rem; font-weight: 800; } .cart-modal-footer { padding: 16px 24px; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: 12px; } .btn-continue-shopping { padding: 10px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; color: var(--color-text-body); } .btn-continue-shopping:hover { background-color: #f5f5f5; } .btn-checkout-order { background-color: var(--color-primary); color: #ffffff; padding: 10px 24px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; box-shadow: var(--shadow-glow); } .btn-checkout-order:hover { background-color: var(--color-primary-hover); } / Empty cart status screen inside drawer / .empty-cart-view { text-align: center; padding: 50px 20px; color: var(--color-text-muted); } .empty-cart-view i { font-size: 4rem; color: var(--color-border); display: block; margin-bottom: 12px; } / 7. Toast Notification Banners / .toast-notification-box { position: fixed; bottom: 30px; left: 30px; z-index: 1100; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast-item { background-color: #333333; color: #ffffff; padding: 12px 20px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-size: 0.85rem; font-weight: 500; display: flex; align-items: center; gap: 10px; min-width: 280px; animation: slideInToast 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; pointer-events: auto; } .toast-item.success { border-left: 4px solid var(--color-success); background-color: #1e293b; } .toast-item.danger { border-left: 4px solid var(--color-danger); background-color: #1e293b; } .toast-item i { font-size: 1.15rem; } .toast-item.success i { color: var(--color-success); } .toast-item.danger i { color: var(--color-danger); } @keyframes slideInToast { 0% { transform: translateX(-30px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } / 8. Footer Section / .footer { background-color: var(--color-bg-footer); border-top: 1px solid var(--color-border); padding: 60px 0 30px 0; font-size: 0.85rem; } .footer-top { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 40px; } .footer-col h4 { color: var(--color-text-title); margin-bottom: 18px; font-weight: 700; } .footer-col a { display: block; color: var(--color-text-body); margin-bottom: 10px; } .footer-col a:hover { color: var(--color-primary); } .shipping-icons { display: flex; gap: 8px; flex-wrap: wrap; } .ship-badge { background-color: #ffffff; border: 1px solid var(--color-border); padding: 6px 12px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.78rem; color: var(--color-text-title); } .ship-badge i { color: var(--color-primary); } .footer-bottom { max-width: 1200px; margin: 0 auto; padding: 24px 24px 0 24px; border-top: 1px solid var(--color-border); text-align: center; color: var(--color-text-muted); } / Utilities / .hidden { display: none !important; } / Responsive Breakpoints / @media (max-width: 1024px) { .products-grid-container { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .store-grid { grid-template-columns: 1fr; } .sidebar-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .products-grid-container { grid-template-columns: repeat(2, 1fr); } .detail-modal-grid { grid-template-columns: 1fr; } .detail-image-box { aspect-ratio: 16 / 9; } .header-container { flex-direction: column; gap: 16px; padding-bottom: 12px; } .search-section { width: 100%; } .cart-container { align-self: flex-end; position: fixed; bottom: 20px; right: 20px; z-index: 100; background-color: var(--color-primary); border-radius: var(--radius-round); width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(255, 87, 34, 0.4); } .cart-badge { top: 2px; right: 2px; } .cart-dropdown { display: none !important; / Hide dropdown list on mobile, click opens modal */ } .form-grid { grid-template-columns: 1fr; } .product-upload-modal { width: 95%; } .cart-checkout-modal { width: 95%; } }

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.6 | proxy | phpinfo | Settings