/* * SERVER DESTINATION: /var/www/dropship_site/public_html/assets/css/app.css * * Dropship Platform — Main Stylesheet * ------------------------------------ * Mobile-first. Uses CSS custom properties set by PHP in the layout * from the theme_settings database table. Changing colours in the Admin * panel instantly updates every rule below — no CSS edits needed. * * Custom properties available (injected by main.php layout): * --color-primary — main brand colour (default #1C1C1C) * --color-secondary — page background (default #FAF7F2) * --color-accent — CTA buttons, highlights (default #FF6B35) * --font-heading — heading font stack * --font-body — body font stack * --color-primary-light — auto-derived light tint of primary * --color-accent-hover — auto-derived darker accent for hover states */ /* ───────────────────────────────────────────────────────────────────────────── RESET & BASE ───────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body, 'Inter', system-ui, sans-serif); background-color: var(--color-secondary, #FAF7F2); color: #1C1C1C; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading, 'Inter', system-ui, sans-serif); line-height: 1.2; font-weight: 600; color: var(--color-primary, #1C1C1C); } a { color: var(--color-accent, #FF6B35); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } /* ───────────────────────────────────────────────────────────────────────────── LAYOUT ───────────────────────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } @media (min-width: 640px) { .container { padding: 0 24px; } } @media (min-width: 1024px) { .container { padding: 0 40px; } } main { flex: 1; } .section { padding: 40px 0; } @media (min-width: 768px) { .section { padding: 64px 0; } } /* ───────────────────────────────────────────────────────────────────────────── BUTTONS ───────────────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: 2px solid transparent; border-radius: 6px; font-size: 15px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s; white-space: nowrap; text-decoration: none; font-family: inherit; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } /* Primary — filled with brand colour */ .btn--primary { background: var(--color-primary, #1C1C1C); color: #ffffff; } .btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-primary, #1C1C1C) 85%, black); text-decoration: none; color: #fff; } /* Accent — CTA buttons */ .btn--accent { background: var(--color-accent, #FF6B35); color: #ffffff; } .btn--accent:hover:not(:disabled) { background: var(--color-accent-hover, #e55a26); text-decoration: none; color: #fff; } /* Ghost — outlined */ .btn--ghost { background: transparent; color: var(--color-primary, #1C1C1C); border-color: var(--color-primary, #1C1C1C); } .btn--ghost:hover:not(:disabled) { background: var(--color-primary-light, #f0f0f0); text-decoration: none; } /* Danger */ .btn--danger { background: #DC2626; color: #ffffff; } .btn--danger:hover:not(:disabled) { background: #b91c1c; } /* Sizes */ .btn--sm { padding: 8px 16px; font-size: 13px; } .btn--lg { padding: 16px 32px; font-size: 17px; } .btn--full { width: 100%; } /* ───────────────────────────────────────────────────────────────────────────── FORMS ───────────────────────────────────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .form-group label { font-size: 14px; font-weight: 500; color: #374151; } .form-control { width: 100%; padding: 10px 14px; border: 1.5px solid #D1D5DB; border-radius: 6px; font-size: 15px; font-family: inherit; background: #ffffff; color: #1C1C1C; transition: border-color 0.15s, box-shadow 0.15s; appearance: none; } .form-control:focus { outline: none; border-color: var(--color-accent, #FF6B35); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #FF6B35) 20%, transparent); } .form-control::placeholder { color: #9CA3AF; } .form-error { font-size: 13px; color: #DC2626; } .form-hint { font-size: 13px; color: #6B7280; } textarea.form-control { min-height: 120px; resize: vertical; } /* Checkbox row */ .form-check { display: flex; align-items: center; gap: 10px; cursor: pointer; } .form-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-accent, #FF6B35); cursor: pointer; } /* ───────────────────────────────────────────────────────────────────────────── HEADER ───────────────────────────────────────────────────────────────────────────── */ .site-header { background: var(--color-primary, #1C1C1C); color: #ffffff; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 3px rgba(0,0,0,.15); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; } .site-header__logo, .site-header__logo-text { font-size: 20px; font-weight: 700; color: #ffffff; text-decoration: none; white-space: nowrap; } .site-header__logo:hover { text-decoration: none; opacity: 0.85; } .site-header__nav { display: none; /* hidden on mobile, shown at md */ gap: 24px; } .site-header__nav a { color: rgba(255,255,255,0.85); font-size: 15px; } .site-header__nav a:hover { color: #fff; text-decoration: none; } .site-header__actions { display: flex; align-items: center; gap: 8px; } /* Ghost/accent buttons inside dark header */ .site-header .btn--ghost { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.35); } .site-header .btn--ghost:hover { background: rgba(255,255,255,0.1); color: #fff; } /* Cart icon */ .cart-icon { position: relative; color: rgba(255,255,255,0.85); padding: 8px; display: flex; align-items: center; } .cart-icon:hover { color: #fff; text-decoration: none; } .cart-icon__count { position: absolute; top: 2px; right: 2px; background: var(--color-accent, #FF6B35); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } @media (min-width: 768px) { .site-header__nav { display: flex; } } /* ───────────────────────────────────────────────────────────────────────────── FLASH MESSAGES ───────────────────────────────────────────────────────────────────────────── */ .flash { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; font-size: 14px; font-weight: 500; border-left: 4px solid currentColor; } .flash--success { background: #F0FDF4; color: #166534; } .flash--error { background: #FEF2F2; color: #991B1B; } .flash--warning { background: #FFFBEB; color: #92400E; } .flash--info { background: #EFF6FF; color: #1E40AF; } .flash__close { background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: inherit; opacity: 0.6; flex-shrink: 0; } .flash__close:hover { opacity: 1; } /* ───────────────────────────────────────────────────────────────────────────── PRODUCT GRID ───────────────────────────────────────────────────────────────────────────── */ .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (min-width: 900px) { .product-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(4, 1fr); } } .product-card { background: #ffffff; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; border: 1px solid #E5E7EB; } .product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.10); transform: translateY(-2px); } .product-card__image { aspect-ratio: 1 / 1; overflow: hidden; background: #F3F4F6; } .product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .product-card:hover .product-card__image img { transform: scale(1.04); } .product-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; } .product-card__title { font-size: 15px; font-weight: 600; color: var(--color-primary, #1C1C1C); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card__vendor { font-size: 12px; color: #6B7280; } .product-card__price-row { display: flex; align-items: center; gap: 8px; margin-top: auto; } .product-card__price { font-size: 17px; font-weight: 700; color: var(--color-primary, #1C1C1C); } .product-card__compare-price { font-size: 13px; color: #9CA3AF; text-decoration: line-through; } .product-card__badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: #FEE2E2; color: #991B1B; text-transform: uppercase; letter-spacing: 0.05em; } .product-card__footer { padding: 0 16px 16px; } /* Out-of-stock state */ .product-card--out-of-stock .product-card__image { opacity: 0.7; } /* ───────────────────────────────────────────────────────────────────────────── SEARCH & FILTER BAR ───────────────────────────────────────────────────────────────────────────── */ .shop-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 28px; } .shop-bar__search { display: flex; flex: 1; min-width: 200px; position: relative; } .shop-bar__search input { flex: 1; padding-right: 44px; } .shop-bar__search-btn { position: absolute; right: 0; top: 0; bottom: 0; width: 44px; background: none; border: none; cursor: pointer; color: #6B7280; display: flex; align-items: center; justify-content: center; } .shop-bar__search-btn:hover { color: var(--color-accent, #FF6B35); } .shop-bar__filter select { padding: 10px 14px; border: 1.5px solid #D1D5DB; border-radius: 6px; font-size: 14px; font-family: inherit; background: #fff; cursor: pointer; appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } /* ───────────────────────────────────────────────────────────────────────────── HERO BANNER ───────────────────────────────────────────────────────────────────────────── */ .hero { background: var(--color-primary, #1C1C1C); color: #ffffff; padding: 64px 0; text-align: center; margin-bottom: 48px; } .hero h1 { font-size: clamp(28px, 5vw, 52px); color: #ffffff; margin-bottom: 16px; } .hero p { font-size: clamp(15px, 2vw, 18px); opacity: 0.8; max-width: 560px; margin: 0 auto 32px; } /* ───────────────────────────────────────────────────────────────────────────── PAGINATION ───────────────────────────────────────────────────────────────────────────── */ .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 6px; font-size: 14px; font-weight: 500; border: 1.5px solid #E5E7EB; color: var(--color-primary, #1C1C1C); background: #fff; text-decoration: none; transition: background 0.15s, border-color 0.15s; } .pagination a:hover { background: var(--color-primary-light); text-decoration: none; } .pagination span.current { background: var(--color-primary, #1C1C1C); color: #fff; border-color: var(--color-primary, #1C1C1C); } .pagination span.disabled { opacity: 0.4; cursor: default; } /* ───────────────────────────────────────────────────────────────────────────── REMIND ME FORM (out-of-stock AJAX widget) ───────────────────────────────────────────────────────────────────────────── */ .remind-me-form { display: flex; gap: 8px; flex-wrap: wrap; } .remind-me-form input { flex: 1; min-width: 160px; } .remind-me-success { font-size: 13px; color: #166534; font-weight: 500; } /* ───────────────────────────────────────────────────────────────────────────── CART PAGE ───────────────────────────────────────────────────────────────────────────── */ .cart-layout { display: grid; gap: 32px; } @media (min-width: 900px) { .cart-layout { grid-template-columns: 1fr 340px; } } .cart-table { width: 100%; border-collapse: collapse; } .cart-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #6B7280; padding: 8px 0; border-bottom: 1.5px solid #E5E7EB; } .cart-table td { padding: 16px 0; border-bottom: 1px solid #F3F4F6; vertical-align: middle; } .cart-item__img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; } .cart-item__name { font-weight: 500; font-size: 15px; } .cart-item__remove { background: none; border: none; color: #9CA3AF; cursor: pointer; font-size: 18px; } .cart-item__remove:hover { color: #DC2626; } .qty-input { width: 56px; padding: 6px 8px; border: 1.5px solid #D1D5DB; border-radius: 6px; text-align: center; font-size: 15px; } .cart-summary { background: #ffffff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 24px; } .cart-summary h2 { font-size: 18px; margin-bottom: 20px; } .cart-summary__row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; border-bottom: 1px solid #F3F4F6; } .cart-summary__row:last-of-type { border-bottom: none; } .cart-summary__total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; padding: 16px 0 20px; } /* ───────────────────────────────────────────────────────────────────────────── CHECKOUT ───────────────────────────────────────────────────────────────────────────── */ .checkout-layout { display: grid; gap: 32px; } @media (min-width: 900px) { .checkout-layout { grid-template-columns: 1fr 380px; } } .checkout-card { background: #ffffff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 28px; margin-bottom: 20px; } .checkout-card h2 { font-size: 17px; margin-bottom: 20px; } /* ───────────────────────────────────────────────────────────────────────────── COOKIE CONSENT BANNER ───────────────────────────────────────────────────────────────────────────── */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-primary, #1C1C1C); color: #ffffff; padding: 20px 24px; z-index: 999; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; box-shadow: 0 -2px 12px rgba(0,0,0,.2); } .cookie-banner p { flex: 1; min-width: 240px; font-size: 14px; opacity: 0.9; margin: 0; } .cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; } /* ───────────────────────────────────────────────────────────────────────────── DASHBOARD LAYOUT (customer / vendor / admin shared shell) ───────────────────────────────────────────────────────────────────────────── */ .dash-layout { display: grid; gap: 0; min-height: calc(100vh - 64px); } @media (min-width: 768px) { .dash-layout { grid-template-columns: 220px 1fr; } } .dash-sidebar { background: var(--color-primary, #1C1C1C); color: #ffffff; padding: 32px 0; } .dash-sidebar__title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.45); padding: 0 24px 12px; } .dash-sidebar a { display: flex; align-items: center; gap: 10px; padding: 11px 24px; color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; transition: background 0.15s, color 0.15s; text-decoration: none; } .dash-sidebar a:hover, .dash-sidebar a.active { background: rgba(255,255,255,0.08); color: #ffffff; text-decoration: none; } .dash-sidebar a.active { border-left: 3px solid var(--color-accent, #FF6B35); } .dash-main { padding: 32px 24px; background: var(--color-secondary, #FAF7F2); } .dash-main h1 { font-size: 24px; margin-bottom: 28px; } /* ───────────────────────────────────────────────────────────────────────────── CARDS & STAT TILES (used in dashboards) ───────────────────────────────────────────────────────────────────────────── */ .card { background: #ffffff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 24px; } .card h2, .card h3 { font-size: 16px; margin-bottom: 16px; } .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 28px; } @media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } } .stat-tile { background: #ffffff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 20px; } .stat-tile__label { font-size: 12px; color: #6B7280; text-transform: uppercase; letter-spacing: 0.06em; } .stat-tile__value { font-size: 28px; font-weight: 700; color: var(--color-primary, #1C1C1C); margin-top: 4px; } /* ───────────────────────────────────────────────────────────────────────────── TABLES (orders, users, products in dashboards) ───────────────────────────────────────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table th { text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #6B7280; padding: 10px 14px; border-bottom: 2px solid #E5E7EB; white-space: nowrap; } .data-table td { padding: 12px 14px; border-bottom: 1px solid #F3F4F6; vertical-align: middle; } .data-table tbody tr:hover { background: #FAFAFA; } .data-table tbody tr:last-child td { border-bottom: none; } .table-wrapper { overflow-x: auto; border-radius: 10px; border: 1px solid #E5E7EB; background: #fff; } /* Status badges */ .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: capitalize; } .badge--pending { background: #FEF3C7; color: #92400E; } .badge--paid { background: #D1FAE5; color: #065F46; } .badge--processing { background: #DBEAFE; color: #1E40AF; } .badge--shipped { background: #EDE9FE; color: #5B21B6; } .badge--delivered { background: #D1FAE5; color: #065F46; } .badge--cancelled { background: #FEE2E2; color: #991B1B; } .badge--refunded { background: #F3F4F6; color: #374151; } /* ───────────────────────────────────────────────────────────────────────────── FOOTER ───────────────────────────────────────────────────────────────────────────── */ .site-footer { background: var(--color-primary, #1C1C1C); color: rgba(255,255,255,0.7); padding: 32px 0; margin-top: auto; } .site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; } .site-footer p { font-size: 14px; } .site-footer nav { display: flex; gap: 20px; } .site-footer a { font-size: 14px; color: rgba(255,255,255,0.6); } .site-footer a:hover { color: #fff; text-decoration: none; } /* ───────────────────────────────────────────────────────────────────────────── UTILITIES ───────────────────────────────────────────────────────────────────────────── */ .text-center { text-align: center; } .text-muted { color: #6B7280; } .text-sm { font-size: 14px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Loading spinner */ .spinner { width: 20px; height: 20px; border: 2.5px solid rgba(0,0,0,.1); border-top-color: var(--color-accent, #FF6B35); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ───────────────────────────────────────────────────────────────────────────── EMPTY STATE ───────────────────────────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 64px 24px; color: #6B7280; } .empty-state h2 { font-size: 20px; color: #374151; margin-bottom: 8px; } .empty-state p { margin-bottom: 24px; }