:root { --color-bg: #f7f8fa; --color-surface: #ffffff; --color-surface-alt: #ffffff; --color-border: #e4e7ec; --color-text: #16181d; --color-text-muted: #5d6b82; /* Round 25 accessibility: text-only variants of the brand colors. Measured with the WCAG contrast formula, the brand orange #ff5a1f on white is 3.12:1 and the warning amber #f79009 is 2.35:1 — both fail the 4.5:1 minimum for normal-size text, and the amber is the colour of every star rating on the site (63 failing instances measured across 8 pages). These darker variants pass (4.77:1 and 5.02:1) while still reading as the same brand hue. They are used ONLY where the colour is text on a light surface — buttons, fills, borders and gradients keep the original brand orange, so the brand is unchanged. */ --color-primary-text: #c2410c; /* 5.18:1 on white, 4.60:1 on --tag-bg */ --color-warning-text: #b45309; /* 5.02:1 on white */ --color-success-text: #067647; /* 5.20:1 on --tag-success-bg */ --color-danger-text: #b42318; /* 5.75:1 on --tag-danger-bg, 6.57:1 on white */ --color-primary: #ff5a1f; --color-primary-dark: #e04a13; --color-primary-light: #ff7a45; --color-success: #12b76a; --color-warning: #f79009; --color-danger: #f04438; --color-media-bg: #f0f1f3; --color-scrollbar-thumb: #d0d5dd; --color-scrollbar-thumb-hover: #98a2b3; --color-scrollbar-track: #eceef2; --skeleton-a: #eee; --skeleton-b: #f5f5f5; --tag-bg: #eef2f6; --tag-success-bg: #e7f9f0; --tag-warning-bg: #fef3e2; --tag-danger-bg: #fdeceb; --tag-sponsored-bg: #eef4ff; --tag-sponsored-color: #3651d4; --tag-bestseller-bg1: #fff3d6; --tag-bestseller-bg2: #ffe4b3; --tag-bestseller-color: #92450a; --alert-error-bg: #fdeceb; --alert-error-border: #f6c8c4; --alert-success-bg: #e7f9f0; --alert-success-border: #b7ecd3; --alert-info-bg: #eef4ff; --alert-info-border: #c7d6fb; --alert-info-color: #3651d4; --celebrate-bg1: #fff7ed; --celebrate-bg2: #ffe8d9; --celebrate-border: #ffd7b3; --terms-link-color: #2563eb; --terms-link-hover: #1d4ed8; --radius: 10px; --radius-lg: 16px; --shadow: 0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.08); --shadow-md: 0 4px 12px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.06); --shadow-lg: 0 12px 32px rgba(16,24,40,0.14), 0 4px 10px rgba(16,24,40,0.08); --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); --ease: cubic-bezier(0.22, 1, 0.36, 1); --header-h: 64px; } /* ─── Dark mode ─── Real theme switching (round 11 — "it should work not just fake display"): every color used anywhere below is one of the custom properties above, so redefining them here restyles the ENTIRE site, not just a couple of showcase elements. Two ways in: 1. Explicit user choice — ux.js sets data-theme="dark"|"light" on and persists it. 2. "System" (the default until the user picks otherwise) — no data-theme attribute at all, so the OS-level prefers-color-scheme media query below decides, and updates live if the OS theme changes while the tab is open (see ux.js's matchMedia change listener). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0e1013; --color-surface: #181b21; --color-surface-alt: #22262e; --color-border: #2b2f38; --color-text: #edeef1; --color-text-muted: #9aa1ad; --color-primary-text: #ff8a5c; --color-warning-text: #f7b955; --color-success-text: #5be3a5; --color-danger-text: #ff9a91; --color-primary-text: #ff8a5c; --color-warning-text: #f7b955; --color-success-text: #5be3a5; --color-danger-text: #ff9a91; --color-media-bg: #23262e; --color-scrollbar-thumb: #3a3e48; --color-scrollbar-thumb-hover: #4c515c; --color-scrollbar-track: #22252c; --skeleton-a: #23262e; --skeleton-b: #2b2f38; --tag-bg: #242832; --tag-success-bg: rgba(18,183,106,0.16); --tag-warning-bg: rgba(247,144,9,0.16); --tag-danger-bg: rgba(240,68,56,0.18); --tag-sponsored-bg: rgba(54,81,212,0.2); --tag-sponsored-color: #93a9ff; --tag-bestseller-bg1: rgba(255,196,64,0.2); --tag-bestseller-bg2: rgba(255,163,26,0.14); --tag-bestseller-color: #ffbf6b; --alert-error-bg: rgba(240,68,56,0.14); --alert-error-border: rgba(240,68,56,0.4); --alert-success-bg: rgba(18,183,106,0.14); --alert-success-border: rgba(18,183,106,0.4); --alert-info-bg: rgba(54,81,212,0.18); --alert-info-border: rgba(54,81,212,0.45); --alert-info-color: #93a9ff; --celebrate-bg1: rgba(255,90,31,0.12); --celebrate-bg2: rgba(255,90,31,0.06); --celebrate-border: rgba(255,90,31,0.4); --terms-link-color: #6ea1f7; --terms-link-hover: #93bbfa; --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 14px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35); --shadow-lg: 0 14px 34px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.4); } } :root[data-theme="dark"] { --color-bg: #0e1013; --color-surface: #181b21; --color-surface-alt: #22262e; --color-border: #2b2f38; --color-text: #edeef1; --color-text-muted: #9aa1ad; --color-media-bg: #23262e; --color-scrollbar-thumb: #3a3e48; --color-scrollbar-thumb-hover: #4c515c; --color-scrollbar-track: #22252c; --skeleton-a: #23262e; --skeleton-b: #2b2f38; --tag-bg: #242832; --tag-success-bg: rgba(18,183,106,0.16); --tag-warning-bg: rgba(247,144,9,0.16); --tag-danger-bg: rgba(240,68,56,0.18); --tag-sponsored-bg: rgba(54,81,212,0.2); --tag-sponsored-color: #93a9ff; --tag-bestseller-bg1: rgba(255,196,64,0.2); --tag-bestseller-bg2: rgba(255,163,26,0.14); --tag-bestseller-color: #ffbf6b; --alert-error-bg: rgba(240,68,56,0.14); --alert-error-border: rgba(240,68,56,0.4); --alert-success-bg: rgba(18,183,106,0.14); --alert-success-border: rgba(18,183,106,0.4); --alert-info-bg: rgba(54,81,212,0.18); --alert-info-border: rgba(54,81,212,0.45); --alert-info-color: #93a9ff; --celebrate-bg1: rgba(255,90,31,0.12); --celebrate-bg2: rgba(255,90,31,0.06); --celebrate-border: rgba(255,90,31,0.4); --terms-link-color: #6ea1f7; --terms-link-hover: #93bbfa; --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 14px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35); --shadow-lg: 0 14px 34px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.4); } html { transition: background-color 0.2s var(--ease); } body, .site-header, .card, .form-card, .modal-overlay .form-card { transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); } * { box-sizing: border-box; } /* Round 25 — systemic fix for a bug this codebase has now hit five separate times. The browser hides [hidden] elements via a USER-AGENT rule, and a user-agent rule loses to ANY author rule of equal-or-higher specificity regardless of source order. So the moment a class sets `display` (e.g. `.promo-count{display:inline-flex}`), setting `el.hidden = true` from JS silently stops hiding that element — it keeps rendering, usually as an empty shell. Measured instances before this rule: the empty "•" bullet on the home page's Deals tile, the categories page's filtered section, both search filter-count badges, and the used- marketplace infinite-scroll sentinel. One author-origin rule fixes the whole class of bug and stops it recurring. `!important` is deliberate: it has to beat every later display rule. Nothing here relies on a [hidden] element still having layout — the two places that need a visually-hidden-but-present element (custom-select.js's real / get a hand-drawn look via appearance:none plus a background-image arrow (select) or a ::after pseudo-element mark (checkbox/radio). The underlying element is still a real, focusable , so keyboard nav, screen readers and native form validation all keep working exactly as before — this is styling only. Applied as GLOBAL base selectors (select / input[type=checkbox] / input[type=radio]) rather than scoped to .field, since an audit of every template found zero admin filter dropdowns and only a dozen (register.html's signup DOB step, store/kyc.html's seller DOB) picks up the same border/padding/background as every other .field input already — this just makes the browser's own calendar icon + popup follow the site's light/dark theme instead of always rendering as if the page were light. */ input[type="date"] { color-scheme: light; cursor: pointer; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) input[type="date"] { color-scheme: dark; } } :root[data-theme="dark"] input[type="date"] { color-scheme: dark; } /* Round 18 sweep: the min/max price filter fields (categories/search/used browse) are plain type=number inputs — drop the browser's default up/down spinner arrows so they read as the same clean bordered field as everything else instead of a leftover native control. */ input[type="number"] { -moz-appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ─── Status / badges ─── */ .tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--tag-bg); color: var(--color-text-muted); } .tag-success { background: var(--tag-success-bg); color: var(--color-success-text); } .tag-warning { background: var(--tag-warning-bg); color: var(--color-warning); } .tag-danger { background: var(--tag-danger-bg); color: var(--color-danger); } /* ─── Alerts ─── */ .alert { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; animation: slideDown 0.25s var(--ease); } .alert-error { background: var(--alert-error-bg); color: var(--color-danger); border: 1px solid var(--alert-error-border); } .alert-success { background: var(--alert-success-bg); color: var(--color-success); border: 1px solid var(--alert-success-border); } .alert-info { background: var(--alert-info-bg); color: var(--alert-info-color); border: 1px solid var(--alert-info-border); } /* ─── Empty states ─── */ .empty-state { text-align: center; padding: 60px 20px; color: var(--color-text-muted); animation: fadeIn 0.4s var(--ease); } .empty-state .empty-icon { font-size: 42px; margin-bottom: 12px; animation: softBounce 2.4s ease-in-out infinite; display: inline-block; } .empty-state h3 { color: var(--color-text); margin: 0 0 6px; } /* ─── Tables ─── */ table.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; } table.data-table th, table.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); text-align: left; font-size: 14px; } /* Round 18: product.html's "compare prices across stores" rows navigate to that listing's product page on click (see loadCompare) — hint it's clickable like any other card. */ tr.compare-row { cursor: pointer; transition: background 0.12s var(--ease); } tr.compare-row:hover, tr.compare-row:focus-visible { background: var(--color-bg); outline: none; } table.data-table th { background: var(--color-bg); font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--color-text-muted); } .table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius); } .table-wrap table.data-table { border: none; } /* ─── Stat tiles ─── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 28px; } .stat-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; } .stat-tile .stat-label { font-size: 12px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; } .stat-tile .stat-value { font-size: 24px; font-weight: 800; margin-top: 4px; } /* ─── Cart / checkout ─── */ .store-group { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; } .store-group-header { padding: 12px 16px; background: var(--color-bg); font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--color-border); } .cart-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); align-items: center; } .cart-item:last-child { border-bottom: none; } .cart-item img, .cart-item .placeholder-icon { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; background: var(--color-media-bg); } .cart-item .placeholder-icon { display: flex; align-items: center; justify-content: center; font-size: 22px; opacity: 0.4; } .cart-item-info { flex: 1; min-width: 0; } .cart-item-info .name { font-weight: 600; font-size: 14px; } .cart-item-info .attrs { font-size: 12px; color: var(--color-text-muted); } .qty-control { display: flex; align-items: center; gap: 8px; } .qty-control button { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-surface-alt); cursor: pointer; } .summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; } .summary-row.total { font-weight: 800; font-size: 17px; border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 12px; } .summary-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; } /* ─── Two-column layout ─── */ .layout-2col { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; } @media (max-width: 860px) { .layout-2col { grid-template-columns: 1fr; } } /* ─── Product detail ─── */ .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } @media (max-width: 860px) { .product-detail { grid-template-columns: 1fr; } } .gallery-main { aspect-ratio: 1/1; background: var(--color-media-bg); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); position: relative; touch-action: pan-y; } .gallery-main img { width: 100%; height: 100%; object-fit: cover; animation: fadeIn 0.3s var(--ease); } .gallery-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; } .gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); box-shadow: 0 0 2px rgba(0,0,0,0.3); transition: background 0.2s var(--ease), width 0.2s var(--ease); } .gallery-dot.active { background: #fff; width: 16px; border-radius: 3px; } @media (min-width: 861px) { .gallery-dots { display: none; } } /* desktop has the click-thumbnail row — dots are the phone-swipe affordance */ /* Round 33: "the image is too large on phone" — a full-bleed square photo (up to ~340px tall) pushed the price/add-to-cart button off the first screen entirely. Capped narrower and centered, like Noon/Amazon's phone product page, so title/price/button are visible without scrolling past the photo first. */ @media (max-width: 640px) { .gallery-main { max-width: 62%; margin-left: auto; margin-right: auto; } } .gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: rgba(20,22,26,0.4); color: #fff; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s var(--ease), transform 0.15s var(--ease); } .gallery-arrow:hover { background: rgba(20,22,26,0.65); transform: translateY(-50%) scale(1.08); } .gallery-arrow-prev { inset-inline-start: 10px; } .gallery-arrow-next { inset-inline-end: 10px; } @media (max-width: 640px) { .gallery-arrow { display: none; } } /* touch swipe replaces it on phone */ .gallery-thumbs { display: flex; gap: 8px; } /* Round 25 a11y: the thumbnails are