/* ========================================================================== MAZADAK — shared stylesheet Covers what Tailwind utilities cannot express inline: fonts, direction flipping, reusable component classes, and motion. Every page on the platform loads this one file. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); /* -------------------------------------------------------------------------- 1. Design tokens Mirrors tailwind.config.js so plain CSS below can reach the same palette. -------------------------------------------------------------------------- */ :root { --brand: #E60012; --brand-alt: #E60012; --brand-soft: #E9BCB6; --brand-deep: #5E3F3B; --ink: #191C1D; --ink-900: #111722; --ink-600: #5F5E5E; --ink-300: #E1E3E4; --ink-100: #EDEEEF; --ink-50: #F3F4F5; --surface: #F8F9FA; --success: #16A34A; --gold: #FABD02; --warning: #F59E0B; --shell: 1280px; --gutter: 32px; --radius-card: 12px; --header-h: 72px; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Tajawal', 'IBM Plex Sans', system-ui, sans-serif; color: var(--ink); background: linear-gradient(0deg, rgba(248, 249, 250, .2) 0%, rgba(248, 249, 250, .2) 100%), #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Latin runs (prices, counters, model names) read better in IBM Plex. */ :lang(en), .font-latin, .tabular { font-family: 'IBM Plex Sans', 'Tajawal', system-ui, sans-serif; } .tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } /* -------------------------------------------------------------------------- 3. Direction handling The document flips via . Tailwind logical utilities (ms-/me-/ ps-/pe-/start-/end-) handle most of it; these rules cover the rest. -------------------------------------------------------------------------- */ [dir='rtl'] .flip-x { transform: scaleX(-1); } [dir='ltr'] .flip-x { transform: none; } /* Show a node only in one direction — used for chevrons and slider arrows. */ [dir='rtl'] .ltr-only, [dir='ltr'] .rtl-only { display: none !important; } /* Numerals and prices always stay left-to-right, even inside Arabic text. */ .force-ltr { direction: ltr; unicode-bidi: isolate; } /* -------------------------------------------------------------------------- 4. Layout shell -------------------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } @media (max-width: 640px) { :root { --gutter: 16px; } } .section { padding-block: 64px; } .section-tight{ padding-block: 40px; } @media (max-width: 768px) { .section { padding-block: 44px; } .section-tight { padding-block: 28px; } } /* -------------------------------------------------------------------------- 5. Typography helpers -------------------------------------------------------------------------- */ .h1 { font-size: 48px; line-height: 56px; font-weight: 800; letter-spacing: -.5px; } .h2 { font-size: 32px; line-height: 40px; font-weight: 700; } .h3 { font-size: 24px; line-height: 32px; font-weight: 700; } .h4 { font-size: 20px; line-height: 28px; font-weight: 700; } .muted { color: var(--ink-600); } @media (max-width: 768px) { .h1 { font-size: 30px; line-height: 38px; } .h2 { font-size: 24px; line-height: 32px; } .h3 { font-size: 20px; line-height: 28px; } } /* Section heading with the underlined "view all" link opposite it. */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; } .link-underline { color: var(--brand); font-weight: 500; padding-bottom: 4px; border-bottom: 3px solid rgba(179, 4, 0, .3); transition: border-color .2s ease; white-space: nowrap; } .link-underline:hover { border-bottom-color: var(--brand); } @media (max-width: 640px) { .section-head { margin-bottom: 24px; } } /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: 0; border-radius: 8px; font-weight: 700; font-size: 16px; line-height: 24px; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: #9E0400; box-shadow: 0 8px 20px rgba(179, 4, 0, .28); } .btn-success { background: var(--success); color: #fff; } .btn-success:hover { background: #128038; } .btn-dark { background: var(--ink-600); color: #fff; } .btn-dark:hover { background: var(--ink); } .btn-light { background: #fff; color: var(--ink); } .btn-light:hover { background: var(--ink-50); } .btn-outline { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .btn-outline:hover { background: var(--brand); color: #fff; } .btn-ghost { background: transparent; color: var(--ink-600); } .btn-ghost:hover { color: var(--brand); background: rgba(179, 4, 0, .06); } .btn-sm { padding: 8px 16px; font-size: 14px; line-height: 20px; } .btn-lg { padding: 14px 32px; font-size: 18px; line-height: 26px; } .btn-block { width: 100%; } /* -------------------------------------------------------------------------- 7. Cards -------------------------------------------------------------------------- */ .card { background: #fff; border-radius: var(--radius-card); box-shadow: 0 1px 3px rgba(25, 28, 29, .08), 0 1px 2px rgba(25, 28, 29, .04); overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(25, 28, 29, .12), 0 4px 10px rgba(25, 28, 29, .06); } /* Outlined variant used by the category tiles. */ .card-outline { background: #fff; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--brand); transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; } .card-outline:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--brand); } /* Active state — solid brand fill, white content. */ .card-outline.is-active { background: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); color: #fff; } .card-outline.is-active .cat-icon, .card-outline.is-active .cat-label { color: #fff; } .cat-icon { color: var(--ink-600); font-size: 24px; transition: color .2s ease; } .cat-label { color: var(--ink); font-size: 20px; font-weight: 700; transition: color .2s ease; } /* Fixed-ratio media box so cards stay aligned regardless of image size. */ .media { position: relative; overflow: hidden; background: var(--ink-100); } .media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .card-hover:hover .media > img { transform: scale(1.06); } .ratio-16-10 { aspect-ratio: 16 / 10; } .ratio-4-3 { aspect-ratio: 4 / 3; } .ratio-1-1 { aspect-ratio: 1 / 1; } /* -------------------------------------------------------------------------- 8. Badges, pills and the live indicator -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; } .badge-brand { background: var(--brand); color: #fff; } .badge-success { background: var(--success); color: #fff; } .badge-info { background: #2563EB; color: #fff; } .badge-violet { background: #7C3AED; color: #fff; } .badge-warning { background: var(--warning); color: #fff; } .badge-dark { background: rgba(0, 0, 0, .65); color: #fff; backdrop-filter: blur(4px); } .badge-soft { background: var(--ink-50); color: var(--ink-600); } /* Pulsing dot that marks a live auction. */ .live-dot { width: 8px; height: 8px; border-radius: 9999px; background: currentColor; animation: pulse-dot 1.4s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } /* -------------------------------------------------------------------------- 9. Countdown timer -------------------------------------------------------------------------- */ .timer { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Sans', monospace; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .5px; direction: ltr; unicode-bidi: isolate; } .timer-hero { color: var(--brand); font-size: 24px; line-height: 32px; } /* -------------------------------------------------------------------------- 10. Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--ink-300); transition: box-shadow .25s ease; } .site-header.is-stuck { box-shadow: 0 4px 16px rgba(25, 28, 29, .08); } .nav-link { position: relative; padding: 8px 4px; font-weight: 500; color: var(--ink); transition: color .2s ease; } .nav-link:hover, .nav-link.is-active { color: var(--brand); } /* Underline grows from the centre on hover / active. */ .nav-link::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--brand); transform: scaleX(0); transition: transform .25s ease; } .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); } /* Mobile drawer */ .nav-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(320px, 86vw); background: #fff; z-index: 70; transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; padding: 24px; } [dir='rtl'] .nav-drawer { transform: translateX(-100%); } .nav-drawer.is-open { transform: translateX(0); } .nav-scrim { position: fixed; inset: 0; background: rgba(17, 23, 34, .5); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .nav-scrim.is-open { opacity: 1; pointer-events: auto; } /* -------------------------------------------------------------------------- 11. Hero -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 560px; background: var(--ink-900); overflow: hidden; color: #fff; } .hero-media { position: absolute; inset: 0; } .hero-media img{ width: 100%; height: 100%; object-fit: cover; } /* Two stacked scrims keep the headline legible over any photo. */ .hero-scrim { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,0) 100%); } [dir='ltr'] .hero-scrim { transform: scaleX(-1); } .hero-scrim-bottom { position: absolute; inset-inline: 0; bottom: 0; height: 60%; background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%); } .hero-body { position: relative; z-index: 2; } @media (max-width: 768px) { .hero { min-height: 460px; } } /* Slider dots */ .dots { display: inline-flex; align-items: center; gap: 8px; } .dot { width: 8px; height: 8px; border-radius: 9999px; background: rgba(255, 255, 255, .45); border: 0; padding: 0; cursor: pointer; transition: width .25s ease, background-color .25s ease; } .dot.is-active { width: 24px; background: var(--brand); } /* Slider arrows */ .slider-arrow { position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 9999px; background: rgba(255, 255, 255, .15); backdrop-filter: blur(4px); border: 0; color: #fff; font-size: 16px; cursor: pointer; display: grid; place-items: center; transition: background .25s ease, transform .25s ease; } .slider-arrow:hover { background: rgba(255, 255, 255, .3); transform: translateY(-50%) scale(1.08); } .slider-arrow--prev { inset-inline-start: 16px; } .slider-arrow--next { inset-inline-end: 16px; } @media (max-width: 640px) { .slider-arrow { width: 36px; height: 36px; font-size: 13px; } .slider-arrow--prev { inset-inline-start: 8px; } .slider-arrow--next { inset-inline-end: 8px; } } /* -------------------------------------------------------------------------- 12. Stat / info rows inside cards -------------------------------------------------------------------------- */ .stat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .stat-label { font-size: 12px; color: var(--ink-600); } .stat-value { font-size: 20px; font-weight: 700; color: var(--ink); } .stat-price { font-size: 24px; font-weight: 800; color: var(--brand); } .divider { height: 1px; background: var(--ink-300); border: 0; margin: 0; } /* -------------------------------------------------------------------------- 13. Horizontal scrollers (mobile carousels) -------------------------------------------------------------------------- */ .scroller { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .scroller::-webkit-scrollbar { display: none; } .scroller > * { scroll-snap-align: start; flex: 0 0 auto; } /* -------------------------------------------------------------------------- 14. Footer -------------------------------------------------------------------------- */ .site-footer { background: #ffffff; border-top: 1px solid var(--ink-300); color: var(--ink-600); } .footer-link { color: var(--ink-600); transition: color .2s ease; } .footer-link:hover { color: var(--brand); } .social-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; background: #fff; color: var(--ink-600); box-shadow: inset 0 0 0 1px var(--ink-300); transition: background-color .2s ease, color .2s ease; } .social-btn:hover { background: var(--brand); color: #fff; box-shadow: none; } /* -------------------------------------------------------------------------- 15. Forms -------------------------------------------------------------------------- */ .field { width: 100%; padding: 12px 16px; border-radius: 8px; background: #fff; border: 1px solid var(--ink-300); transition: border-color .2s ease, box-shadow .2s ease; } .field::placeholder { color: var(--ink-600); opacity: .8; } .field:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(179, 4, 0, .12); } /* Search box in the header carries its icon on the leading edge. */ .search-wrap { position: relative; } .search-wrap .field { padding-inline-start: 42px; } .search-wrap .search-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-600); pointer-events: none; } /* -------------------------------------------------------------------------- 15b. Checkboxes, selects and range inputs (filter sidebar) -------------------------------------------------------------------------- */ .check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--ink); padding-block: 2px; } .check input { appearance: none; width: 18px; height: 18px; border: 1px solid var(--ink-300); border-radius: 4px; background: #fff; display: grid; place-content: center; cursor: pointer; flex-shrink: 0; transition: background-color .15s ease, border-color .15s ease; } .check input::after { content: ''; width: 10px; height: 10px; transform: scale(0); transition: transform .15s ease; box-shadow: inset 1em 1em #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } .check input:checked { background: var(--brand); border-color: var(--brand); } .check input:checked::after { transform: scale(1); } /* Native select with a custom chevron on the trailing edge. */ .select { width: 100%; padding: 10px 16px; border-radius: 8px; background: #fff; border: 1px solid var(--ink-300); appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235F5E5E'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 14px; background-position: left 14px center; } [dir='ltr'] .select { background-position: right 14px center; } .select:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(179, 4, 0, .12); } /* -------------------------------------------------------------------------- 15c. Pagination -------------------------------------------------------------------------- */ .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .page-btn { min-width: 40px; height: 40px; padding-inline: 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; border: 1px solid var(--ink-300); font-weight: 500; font-size: 14px; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .page-btn:hover:not(:disabled):not(.is-active) { border-color: var(--brand); color: var(--brand); } .page-btn.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } .page-btn:disabled { opacity: .45; cursor: not-allowed; } .page-dots { color: var(--ink-600); padding-inline: 4px; } /* -------------------------------------------------------------------------- 15d. View toggle (grid / list) on the auctions listing -------------------------------------------------------------------------- */ .view-toggle { display: inline-flex; border: 1px solid var(--ink-300); border-radius: 8px; overflow: hidden; } .view-btn { width: 38px; height: 38px; display: grid; place-items: center; background: #fff; border: 0; color: var(--ink-600); cursor: pointer; transition: background-color .18s ease, color .18s ease; } .view-btn.is-active { background: var(--brand); color: #fff; } /* In list mode a card lays out horizontally instead of stacking. */ @media (min-width: 768px) { .list-mode .auction-card { flex-direction: row; } .list-mode .auction-card .media { width: 300px; flex-shrink: 0; aspect-ratio: auto; } .list-mode .auction-card .card-body { flex: 1; } } /* -------------------------------------------------------------------------- 15e. Favourite (wishlist) toggle -------------------------------------------------------------------------- */ .fav-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9999px; background: transparent; border: 0; color: var(--ink-600); cursor: pointer; transition: color .2s ease, background-color .2s ease, transform .15s ease; } .fav-btn:hover { background: var(--ink-50); color: var(--brand); } .fav-btn.is-active { color: var(--brand); } .fav-btn.is-active i { font-weight: 900; } .fav-btn:active { transform: scale(.9); } /* -------------------------------------------------------------------------- 15f. Price box on auction cards Bordered panel holding the headline figure and its countdown. -------------------------------------------------------------------------- */ .price-box { border: 1px solid var(--brand); border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .price-box.is-soft { background: #FEF2F2; } .price-box.is-muted { border-color: var(--ink-300); } .price-main { font-size: 20px; font-weight: 800; color: var(--brand); line-height: 1.2; } .price-main.is-ink { color: var(--ink); } /* -------------------------------------------------------------------------- 15g. Detail page — gallery, spec grid, feature chips, condition report -------------------------------------------------------------------------- */ .gallery-main { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--ink-100); } .gallery-main img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .thumb { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background: var(--ink-100); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .18s ease; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .thumb.is-active { box-shadow: inset 0 0 0 2px var(--brand); } /* Circular arrows that sit over the main gallery image. */ .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 9999px; background: rgba(255, 255, 255, .9); border: 0; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color .2s ease; } .gallery-nav:hover { background: #fff; } /* Four-up strip of headline specs under the gallery. */ .spec-pill { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--ink-300); border-radius: 8px; background: #fff; } .spec-pill i { color: var(--brand); font-size: 18px; } .spec-item { display: flex; align-items: center; gap: 8px; font-size: 13px; } .spec-item i { color: var(--ink-600); width: 18px; text-align: center; } .spec-item .val { font-weight: 700; color: var(--ink); } /* Coloured capability chips grouped by category. */ .chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 16px; } .chip-red { background: #FEF2F2; color: #B30400; } .chip-green { background: #ECFDF5; color: #10B981; } .chip-blue { background: #EFF6FF; color: #1A56DB; } .chip-amber { background: #FFFBEB; color: #B45309; } .chip-violet { background: #F5F3FF; color: #7C3AED; } /* Legend dot for the body-condition colour key. */ .legend-dot { width: 10px; height: 10px; border-radius: 9999px; flex-shrink: 0; } /* Body-condition dot colours — exact palette from assets/js/tailwind.config.js */ .bg-emerald { background-color: #10B981; } .bg-warning { background-color: #F59E0B; } .bg-red2 { background-color: #EF4444; } .bg-info { background-color: #2563EB; } .bg-violet { background-color: #7C3AED; } .bg-ink-300 { background-color: #E1E3E4; } .bg-ink-25 { background-color: #F8F9FA; } .bg-ink-50 { background-color: #F3F4F5; } /* Bid history rows; the winning row is tinted. */ .bid-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; font-size: 13px; } .bid-row.is-top { background: #ECFDF5; border-inline-start: 3px solid var(--emerald, #10B981); } /* Stepper used to nudge the bid amount up or down. */ .stepper { display: flex; align-items: center; border: 1px solid var(--ink-300); border-radius: 8px; overflow: hidden; } .stepper input { flex: 1; min-width: 0; border: 0; padding: 12px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } .stepper input:focus { outline: 0; } .stepper button { width: 40px; align-self: stretch; border: 0; background: var(--ink-50); color: var(--ink); font-size: 18px; cursor: pointer; transition: background-color .18s ease; } .stepper button:hover { background: var(--ink-100); } /* Big HH:MM:SS block on the detail page. */ .count-block { text-align: center; min-width: 56px; } .count-block .num { font-family: 'IBM Plex Sans', monospace; font-size: 32px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .count-block .lbl { font-size: 11px; color: var(--ink-600); margin-top: 2px; } /* Breadcrumb */ .crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-600); flex-wrap: wrap; } .crumb a:hover { color: var(--brand); } .crumb .sep { color: var(--ink-300); } /* Floating help button pinned to the corner. */ .fab { position: fixed; inset-inline-start: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 9999px; background: var(--brand); color: #fff; border: 0; display: grid; place-items: center; font-size: 20px; cursor: pointer; box-shadow: 0 8px 20px rgba(179, 4, 0, .35); z-index: 40; transition: transform .2s ease; } .fab:hover { transform: scale(1.08); } /* -------------------------------------------------------------------------- 15h. Store page — cover, identity plate, stat cards, tabs -------------------------------------------------------------------------- */ .store-cover { position: relative; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 1216 / 300; min-height: 200px; background: var(--ink-100); } .store-cover > img { width: 100%; height: 100%; object-fit: cover; } .store-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 100%); } /* Red identity plate that overlaps the bottom of the cover. */ .store-plate { position: relative; z-index: 2; background: var(--brand); color: #fff; border-radius: var(--radius-card); padding: 20px 28px; } /* White tile holding the dealer avatar, lifted above the plate. */ .store-avatar { position: relative; z-index: 3; width: 128px; height: 128px; border-radius: var(--radius-card); background: #fff; padding: 10px; box-shadow: 0 10px 30px rgba(25, 28, 29, .14); } .store-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; } @media (max-width: 640px) { .store-avatar { width: 92px; height: 92px; } } /* Outlined KPI card — brand-tinted border, large figure. */ .stat-card { background: #fff; border: 1px solid var(--brand-soft); border-radius: var(--radius-card); padding: 20px 16px; text-align: center; } .stat-card .num { font-size: 32px; font-weight: 800; line-height: 1.2; color: var(--brand); } .stat-card .cap { font-size: 13px; color: var(--ink-600); margin-bottom: 6px; } /* Underlined tab bar used for the inventory filters. */ .tabs { display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--ink-300); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { position: relative; padding: 14px 2px; font-size: 14px; font-weight: 500; color: var(--ink-600); background: none; border: 0; cursor: pointer; white-space: nowrap; transition: color .2s ease; } .tab:hover { color: var(--ink); } .tab.is-active { color: var(--brand); font-weight: 700; } .tab.is-active::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--brand); } /* Card state for stock that has already sold. */ .sold-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 18px; font-weight: 700; color: var(--ink); } /* -------------------------------------------------------------------------- 15i. Categories page — image mosaic Each tile is a photo with a bottom scrim and copy laid over it. -------------------------------------------------------------------------- */ .cat-tile { position: relative; display: block; border-radius: var(--radius-card); overflow: hidden; min-height: 200px; background: var(--ink-900); color: #fff; } .cat-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .cat-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 65%); } .cat-tile:hover > img { transform: scale(1.05); } .cat-tile-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; } /* Small outlined card for the secondary (non-car) categories. */ .cat-mini { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 20px 16px; background: #fff; border: 1px solid var(--brand-soft); border-radius: var(--radius-card); transition: transform .2s ease, box-shadow .2s ease; } .cat-mini:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(25, 28, 29, .1); } .cat-mini .ico { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-tint, #FFF2F0); color: var(--brand); display: grid; place-items: center; font-size: 18px; } /* Full-width brand banner promoting advanced search. */ .promo { position: relative; overflow: hidden; background: var(--brand); color: #fff; border-radius: var(--radius-card); padding: 40px; } /* Oversized translucent circle bleeding off the leading edge. */ .promo::before { content: ''; position: absolute; inset-inline-start: -60px; top: 50%; transform: translateY(-50%); width: 300px; height: 300px; border-radius: 9999px; background: rgba(255, 255, 255, .1); } .promo-icon { position: relative; z-index: 2; font-size: 64px; color: rgba(255, 255, 255, .9); } @media (max-width: 768px) { .promo { padding: 28px 24px; } .promo::before { display: none; } } /* -------------------------------------------------------------------------- 15j. Auth pages — login, register, forgot / reset password These screens drop the main site chrome for a slim header and footer, and their inputs use the soft brand outline rather than the neutral grey. -------------------------------------------------------------------------- */ .auth-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); } .auth-header { height: 80px; background: var(--surface); border-bottom: 1px solid var(--brand-soft); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); display: flex; align-items: center; flex-shrink: 0; } /* The login screen floats its bar over the page with no rule beneath. */ .auth-header.is-bare { border-bottom: 0; box-shadow: none; } .auth-main { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 64px 16px; } .auth-card { position: relative; z-index: 2; width: 100%; background: rgba(255, 255, 255, .95); border-radius: var(--radius-card); outline: 1px solid var(--brand-soft); outline-offset: -1px; /* Figma's offset drop shadow, softened for the browser */ box-shadow: -10px 10px 12px rgba(0, 0, 0, .12), 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); padding: 40px; } .auth-card-sm { max-width: 480px; } .auth-card-lg { max-width: 560px; } @media (max-width: 560px) { .auth-card { padding: 28px 20px; } .auth-main { padding: 32px 16px; } } /* Blurred brand orbs drifting behind the card. */ .auth-orb { position: absolute; border-radius: 9999px; background: var(--brand); opacity: .05; filter: blur(32px); pointer-events: none; } /* Oversized car / key marks watermarked into the login background. */ .auth-watermark { position: absolute; color: var(--ink); opacity: .05; pointer-events: none; line-height: 1; } /* Field label — brand-tinted brown, per the design. */ .auth-label { display: block; text-align: end; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: .28px; color: var(--brand-deep); margin-bottom: 8px; } /* Input wrapper holding a leading icon and an optional trailing button. Logical padding keeps the 48px gutter on the icon's side regardless of the text direction the field itself is rendered in. */ .auth-field { position: relative; } .auth-field input { width: 100%; height: 48px; padding-block: 11px; padding-inline-end: 48px; padding-inline-start: 16px; background: #fff; border: 1px solid var(--brand-soft); border-radius: 8px; font-size: 16px; transition: border-color .2s ease, box-shadow .2s ease; } /* A .force-ltr input still keeps its gutter on the page's trailing edge, so the icon never lands on top of the value. */ [dir='rtl'] .auth-field input.force-ltr { padding-right: 48px; padding-left: 16px; } [dir='rtl'] .auth-field.has-toggle input.force-ltr { padding-left: 48px; } .auth-field input::placeholder { color: #6B7280; } .auth-field input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(179, 4, 0, .12); } /* Icon pinned to the trailing edge (right in RTL). */ .auth-field .f-icon { position: absolute; inset-inline-end: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-600); pointer-events: none; font-size: 15px; } /* Show/hide toggle on the opposite edge. */ .auth-field .f-toggle { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--ink-600); cursor: pointer; padding: 4px; font-size: 15px; transition: color .2s ease; } .auth-field .f-toggle:hover { color: var(--brand); } /* Inputs that carry both an icon and a toggle need room on both sides. */ .auth-field.has-toggle input { padding-inline-start: 48px; } /* Tall submit button used across the auth screens. */ .auth-submit { width: 100%; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand); color: #fff; border: 0; border-radius: 8px; font-size: 20px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 4px -2px rgba(179, 4, 0, .2), 0 4px 6px -1px rgba(179, 4, 0, .2); transition: background-color .2s ease, transform .12s ease; } .auth-submit:hover { background: #9E0400; } .auth-submit:active { transform: translateY(1px); } /* "or continue with" rule, with the label knocked out of the middle. */ .auth-divider { position: relative; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .6px; color: var(--ink-600); } .auth-divider::before { content: ''; position: absolute; inset-inline: 0; top: 50%; border-top: 1px solid var(--brand-soft); } .auth-divider span { position: relative; background: #fff; padding-inline: 16px; } /* Google / Apple buttons. */ .auth-social { flex: 1; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--brand-soft); border-radius: 8px; background: #fff; font-size: 16px; color: var(--ink); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; } .auth-social:hover { background: var(--ink-25, #F8F9FA); border-color: var(--brand); } /* Password strength meter under the register password field. */ .strength-track { height: 6px; border-radius: 9999px; background: var(--brand-soft); overflow: hidden; margin-top: 8px; } /* Grows from the leading edge, so it fills right-to-left in Arabic. */ .strength-fill { height: 100%; width: 0; max-width: 100%; border-radius: 9999px; background: #B30501; margin-inline-end: auto; transition: width .3s ease, background-color .3s ease; } .strength-fill.is-weak { background: #DC2626; } .strength-fill.is-medium { background: #F59E0B; } .strength-fill.is-strong { background: #16A34A; } /* Requirement checklist on the reset screen. */ .req-item { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .6px; color: var(--ink-600); transition: color .2s ease; } .req-item.is-met { color: var(--success); } .req-item i { font-size: 13px; } /* Round tinted badge above the forgot-password heading. */ .auth-badge { width: 64px; height: 64px; border-radius: 9999px; background: #FFDAD4; color: var(--brand); display: grid; place-items: center; font-size: 24px; margin-inline: auto; } /* Slim footer shared by the auth screens. */ .auth-footer { background: var(--ink-50); border-top: 1px solid var(--brand-soft); padding: 32px; flex-shrink: 0; } .auth-footer a { color: var(--brand-deep); transition: color .2s ease; } .auth-footer a:hover { color: var(--brand); } /* Country-code select fused to the phone input. */ .phone-row { display: flex; gap: 8px; } .phone-code { width: 119px; flex-shrink: 0; background: var(--brand-soft); border: 1px solid var(--brand-soft); border-radius: 8px; padding: 12px 8px; font-size: 16px; color: var(--ink); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 14px; background-position: left 10px center; } [dir='ltr'] .phone-code { background-position: right 10px center; } /* -------------------------------------------------------------------------- 15k. Merchant sign-up wizard A four-step flow: personal details, store details, payout, review. -------------------------------------------------------------------------- */ /* --- Stepper --- Rendered LTR internally so step 1 sits on the right in Arabic, matching the design, while the connector lines stay between the correct circles. */ .stepper-bar { display: flex; align-items: flex-start; justify-content: center; direction: ltr; max-width: 736px; margin-inline: auto; width: 100%; } .step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; } .step-dot { width: 40px; height: 40px; border-radius: 9999px; background: #fff; outline: 2px solid var(--ink-300); outline-offset: -2px; display: grid; place-items: center; font-weight: 700; font-size: 16px; color: var(--ink-600); transition: outline-color .25s ease, color .25s ease, box-shadow .25s ease; } /* Reached steps take the brand outline plus a soft focus ring. */ .step.is-done .step-dot, .step.is-active .step-dot { outline-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px rgba(179, 4, 0, .1); } .step-label { font-size: 16px; color: var(--ink); white-space: nowrap; /* Labels are Arabic, so flip them back out of the LTR bar. */ direction: rtl; } /* Connector between two circles; it aligns with the circle centres. */ .step-line { flex: 1 1 0; height: 4px; min-width: 24px; margin-top: 18px; margin-inline: 8px; background: var(--ink-300); border-radius: 9999px; transition: background-color .3s ease; } .step-line.is-done { background: var(--brand); } @media (max-width: 700px) { .step-label { font-size: 12px; white-space: normal; text-align: center; max-width: 72px; } .step-dot { width: 32px; height: 32px; font-size: 14px; } .step-line { margin-top: 14px; min-width: 12px; } } /* --- Wizard shell --- */ .wiz-card { background: #fff; border-radius: var(--radius-card); outline: 1px solid var(--ink-300); outline-offset: -1px; box-shadow: -10px 10px 12px rgba(0, 0, 0, .1), 0 4px 24px rgba(11, 14, 26, .1); padding: 40px; } @media (max-width: 640px) { .wiz-card { padding: 24px 20px; } } /* Section heading with a brand icon leading it. */ .wiz-heading { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--brand); font-size: 16px; } /* Field label; the asterisk marks a required entry. */ .wiz-label { display: block; text-align: end; font-size: 14px; font-weight: 600; line-height: 16.8px; color: #191C1C; margin-bottom: 8px; } .wiz-label .req { color: #BA1A1A; } .wiz-input, .wiz-textarea { width: 100%; padding: 14px 12px; background: #fff; border: 1px solid #E3BEBB; border-radius: 8px; font-size: 16px; text-align: end; transition: border-color .2s ease, box-shadow .2s ease; } .wiz-input::placeholder, .wiz-textarea::placeholder { color: #6B7280; } .wiz-input:focus, .wiz-textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(179, 4, 0, .12); } .wiz-textarea { min-height: 110px; resize: vertical; line-height: 25.6px; } /* Payout fields sit on a tinted ground to read as read-mostly. */ .wiz-input.is-sunken { background: #F8F9F9; } .wiz-select { width: 100%; padding: 12px; background: #fff; border: 1px solid #E3BEBB; border-radius: 8px; font-size: 16px; text-align: end; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 14px; background-position: left 14px center; } [dir='ltr'] .wiz-select { background-position: right 14px center; } .wiz-select:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(179, 4, 0, .12); } /* Phone field carrying a static +963 prefix on the trailing edge. The input renders LTR, so its gutter is reserved on the right edge in both directions — that is where the prefix sits. */ .wiz-phone { position: relative; } .wiz-phone input { direction: ltr; text-align: left; padding-right: 66px; padding-left: 12px; } .wiz-phone .prefix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-600); pointer-events: none; font-size: 16px; border-inline-start: 1px solid #E3BEBB; padding-inline-start: 10px; } /* --- Upload drop zones --- */ .drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 150px; padding: 24px; background: #F3F4F4; border-radius: var(--radius-card); outline: 2px dashed #E3BEBB; outline-offset: -2px; color: #5B403F; cursor: pointer; text-align: center; transition: background-color .2s ease, outline-color .2s ease; } .drop-zone:hover { background: #EDEEEE; outline-color: var(--brand); } .drop-zone i { font-size: 26px; } .drop-zone .cap { font-size: 12px; font-weight: 500; } /* Once a file is chosen the zone previews it instead of the prompt. */ .drop-zone.has-file { outline-style: solid; outline-color: var(--brand); padding: 8px; } .drop-zone.has-file .dz-prompt { display: none; } .drop-zone .dz-preview { display: none; max-height: 160px; border-radius: 8px; object-fit: contain; } .drop-zone.has-file .dz-preview { display: block; } /* --- Social link rows: input fused to a branded icon button --- */ .social-row { display: flex; background: #fff; border: 1px solid #E3BEBB; border-radius: 8px; overflow: hidden; } .social-row input { flex: 1; min-width: 0; border: 0; padding: 14px 12px; font-size: 16px; text-align: end; } .social-row input:focus { outline: 0; } .social-row .badge-icon { min-width: 50px; display: grid; place-items: center; background: #F3F4F4; border-inline-start: 1px solid #E3BEBB; font-size: 18px; } /* --- Payment method chooser --- */ .pay-option { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border-radius: 8px; outline: 2px solid #E1E3E3; outline-offset: -2px; background: #fff; cursor: pointer; text-align: center; transition: outline-color .2s ease, background-color .2s ease; } .pay-option i { font-size: 24px; color: #5B403F; } .pay-option .cap { font-size: 14px; font-weight: 600; color: #191C1C; } .pay-option:hover { outline-color: var(--brand-soft); } /* Selected method takes the brand outline and a faint red wash. */ .pay-option.is-active { outline-color: #BE1E2D; background: rgba(255, 218, 216, .1); } /* --- Review step --- */ .review-block { background: #F8F9F9; border-radius: 8px; outline: 1px solid rgba(227, 190, 187, .3); outline-offset: -1px; padding: 24px; } .review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(227, 190, 187, .2); margin-bottom: 16px; } .review-title { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 600; color: #191C1C; } .review-title i { color: #575D79; font-size: 18px; } /* Teal edit affordance, per the design. */ .review-edit { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: #045068; background: none; border: 0; cursor: pointer; transition: opacity .2s ease; } .review-edit:hover { opacity: .75; } .review-field { margin-bottom: 12px; } .review-field:last-child { margin-bottom: 0; } .review-field .k { font-size: 12px; font-weight: 500; color: #5B403F; line-height: 14.4px; } .review-field .v { font-size: 16px; color: #191C1C; line-height: 25.6px; } /* Consent panel above the submit button. */ .agree-box { background: #EDEEEE; border-radius: 8px; outline: 1px solid rgba(227, 190, 187, .2); outline-offset: -1px; padding: 16px; display: flex; align-items: flex-start; gap: 12px; } .agree-box a { color: #045068; } .agree-box a:hover { text-decoration: underline; } /* --- Wizard navigation --- */ .wiz-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(227, 190, 187, .3); } /* With no back button, "next" keeps the same left-hand position it holds on the later steps, so the primary action never jumps between steps. */ .wiz-actions.is-single { justify-content: flex-start; } .btn-back { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #E1E3E3; color: #5B403F; border: 0; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s ease; } .btn-back:hover { background: #D4D7D7; } .btn-next { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; background: var(--brand); color: #fff; border: 0; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .1), 0 10px 15px -3px rgba(0, 0, 0, .1); transition: background-color .2s ease, transform .12s ease; } .btn-next:hover { background: #9E0400; } .btn-next:active { transform: translateY(1px); } /* Merchant footer — three columns, distinct from the auth footer. */ .wiz-footer { background: var(--ink-50); border-top: 1px solid var(--brand-soft); padding: 32px; margin-top: 64px; } .wiz-footer a { color: var(--brand-deep); transition: color .2s ease; } .wiz-footer a:hover { color: var(--brand); } /* -------------------------------------------------------------------------- 15l. Account dashboard A fixed sidebar on the trailing edge with the page content beside it. -------------------------------------------------------------------------- */ .dash-layout { display: grid; grid-template-columns: 1fr 288px; min-height: 100vh; align-items: start; } /* Full-height variant for pages whose main column manages its own scrolling (the chat screen). The row is pinned to the viewport so both the sidebar and the chat panes measure against the same height. */ .dash-layout.is-fixed { align-items: stretch; grid-template-rows: calc(100vh - 72px); min-height: 0; } .dash-layout.is-fixed > * { min-height: 0; } /* The sidebar already claims 100vh on its own; inside a pinned row it must defer to the row instead. */ .dash-layout.is-fixed > .dash-side { height: 100%; } @media (max-width: 1024px) { .dash-layout { grid-template-columns: 1fr; } } /* --- Sidebar --- */ .dash-side { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; background: #fff; border-inline-start: 1px solid var(--brand-soft); overflow-y: auto; } @media (max-width: 1024px) { /* Off-canvas on small screens; the drawer toggle reveals it. */ .dash-side { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(288px, 84vw); z-index: 70; transform: translateX(-100%); transition: transform .3s ease; } [dir='ltr'] .dash-side { transform: translateX(100%); } .dash-side.is-open { transform: translateX(0); } } .dash-brand { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 20px 24px; } .dash-brand .mark { width: 44px; height: 44px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 18px; } /* Signed-in identity block under the brand. */ .dash-user { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 24px 24px; border-bottom: 1px solid var(--brand-soft); } .dash-user img { width: 48px; height: 48px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; } .dash-nav { padding: 16px 12px; flex: 1; } .dash-link { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 16px; border-radius: 8px; color: var(--ink); font-size: 15px; margin-bottom: 4px; position: relative; transition: background-color .2s ease, color .2s ease; } .dash-link i { font-size: 17px; width: 20px; text-align: center; } .dash-link:hover { background: var(--ink-50); color: var(--brand); } .dash-link.is-active { background: var(--brand); color: #fff; font-weight: 500; } /* Unread counter pinned to the leading edge of a nav row. */ .dash-badge { position: absolute; inset-inline-start: 12px; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 9999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; } .dash-link.is-active .dash-badge { background: #fff; color: var(--brand); } /* Group caption ("Account") splitting the nav. */ .dash-group { padding: 20px 16px 8px; font-size: 13px; color: var(--ink-600); text-align: end; } .dash-logout { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 20px 24px; border-top: 1px solid var(--brand-soft); color: var(--brand); font-size: 15px; transition: opacity .2s ease; } .dash-logout:hover { opacity: .75; } /* --- Main column --- */ .dash-main { min-width: 0; padding: 24px 32px 48px; } @media (max-width: 640px) { .dash-main { padding: 16px; } } .dash-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } /* --- KPI cards --- */ .kpi { position: relative; background: #fff; border-radius: var(--radius-card); border: 1px solid var(--ink-300); padding: 20px; overflow: hidden; text-align: end; } .kpi .cap { font-size: 14px; color: var(--ink-600); margin-bottom: 6px; } .kpi .num { font-size: 34px; font-weight: 800; line-height: 1.15; } .kpi .unit { font-size: 14px; font-weight: 400; color: var(--ink-600); margin-inline-start: 4px; } .kpi .foot { font-size: 13px; margin-top: 8px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; } /* Oversized watermark icon bleeding out of the card corner. */ .kpi .ghost { position: absolute; top: -6px; inset-inline-start: -6px; font-size: 68px; color: var(--ink-100); pointer-events: none; z-index: 0; } .kpi > * { position: relative; z-index: 1; } /* --- Data table --- */ .dash-table { width: 100%; border-collapse: collapse; font-size: 14px; } .dash-table thead th { background: var(--ink-50); padding: 14px 16px; font-weight: 500; color: var(--ink-600); text-align: center; white-space: nowrap; } .dash-table thead th:first-child { border-start-start-radius: 8px; } .dash-table thead th:last-child { border-start-end-radius: 8px; } .dash-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--ink-300); text-align: center; vertical-align: middle; } .dash-table tbody tr:last-child td { border-bottom: 0; } .dash-table tbody tr { transition: background-color .18s ease; } .dash-table tbody tr:hover { background: var(--ink-25, #F8F9FA); } /* Soft status pills used in the table's state column. */ .pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 9999px; font-size: 12px; font-weight: 700; line-height: 1.3; text-align: center; } .pill-win { background: #ECFDF5; color: #10B981; } .pill-wait { background: #FFFBEB; color: #F59E0B; } .pill-lost { background: #FEF2F2; color: #EF4444; } .pill-done { background: #ECFDF5; color: #10B981; } .pill-ship { background: #FFFBEB; color: #B45309; } .pill-grey { background: var(--ink-50); color: var(--ink-600); } /* --- Purchases side list --- */ .buy-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--ink-300); border-radius: 8px; margin-bottom: 10px; transition: border-color .2s ease; } .buy-row:hover { border-color: var(--brand-soft); } .buy-row .thumb-sq { width: 46px; height: 46px; border-radius: 8px; background: var(--ink-100); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; } /* --- Wide summary strip --- */ .summary-strip { background: var(--ink-100); border-radius: var(--radius-card); padding: 28px 24px; } .summary-cell { text-align: center; padding-inline: 16px; } .summary-cell .cap { font-size: 14px; color: var(--ink-600); margin-bottom: 8px; } .summary-cell .num { font-size: 26px; font-weight: 700; } /* Hairline rules between cells, but not after the last one. */ .summary-cell + .summary-cell { border-inline-end: 1px solid var(--ink-300); } /* --- Profile page --- */ .profile-card { background: #fff; border: 1px solid var(--ink-300); border-radius: var(--radius-card); padding: 24px; } /* Avatar with a camera button clipped to its lower edge. */ .avatar-xl { position: relative; width: 128px; height: 128px; margin-inline: auto; } .avatar-xl img { width: 100%; height: 100%; border-radius: 9999px; object-fit: cover; border: 3px solid var(--ink-300); } .avatar-cam { position: absolute; bottom: 4px; inset-inline-start: 4px; width: 36px; height: 36px; border-radius: 9999px; background: var(--brand); color: #fff; border: 3px solid #fff; display: grid; place-items: center; cursor: pointer; font-size: 13px; } /* Key/value rows inside the profile sidebar. */ .kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ink-50); border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; font-size: 14px; } /* Callout with a coloured rule down its leading edge. */ .notice { display: flex; align-items: flex-start; gap: 12px; border-radius: 8px; padding: 16px; font-size: 14px; } /* The accent rule tracks the reading edge — right in Arabic, left in English. */ .notice-amber { background: #FFFBEB; border-inline-end: 4px solid var(--warning); } .notice-blue { background: #EFF6FF; border-inline-end: 4px solid var(--info); } .notice-red { background: #FEF2F2; border-inline-end: 4px solid var(--brand); } .notice i { margin-top: 2px; } /* --- Settings toggles --- */ .switch { position: relative; width: 48px; height: 26px; flex-shrink: 0; cursor: pointer; display: inline-block; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch .track { position: absolute; inset: 0; background: var(--ink-300); border-radius: 9999px; transition: background-color .25s ease; } .switch .knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .25s ease; } .switch input:checked ~ .track { background: var(--brand); } /* The knob travels toward the trailing edge, flipping with the document. */ .switch input:checked ~ .knob { transform: translateX(-22px); } [dir='ltr'] .switch input:checked ~ .knob { transform: translateX(22px); } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ink-300); } .setting-row:last-child { border-bottom: 0; } /* Language picker cards. */ .lang-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border: 1px solid var(--brand-soft); border-radius: 8px; cursor: pointer; font-weight: 500; transition: border-color .2s ease, background-color .2s ease; } .lang-option:hover { border-color: var(--brand); } .lang-option.is-active { border-color: var(--brand); border-width: 2px; color: var(--brand); } .lang-option .tick { color: var(--brand); opacity: 0; transition: opacity .2s ease; } .lang-option.is-active .tick { opacity: 1; } /* Scrim behind the mobile sidebar. */ .dash-scrim { position: fixed; inset: 0; background: rgba(17, 23, 34, .5); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .dash-scrim.is-open { opacity: 1; pointer-events: auto; } @media (min-width: 1025px) { .dash-scrim { display: none; } } /* -------------------------------------------------------------------------- 15m. Dashboard — deposits, wallet and messages tabs -------------------------------------------------------------------------- */ /* KPI tile with a coloured rule down its leading edge. */ .stat-edge { position: relative; background: #fff; border: 1px solid var(--ink-300); border-radius: var(--radius-card); padding: 18px 20px; text-align: end; overflow: hidden; } .stat-edge::before { content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; width: 4px; background: var(--ink-300); } .stat-edge.edge-brand::before { background: var(--brand); } .stat-edge.edge-emerald::before { background: var(--emerald); } .stat-edge.edge-info::before { background: var(--info); } .stat-edge.edge-slate::before { background: #64748B; } .stat-edge .cap { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .stat-edge .val { font-size: 15px; color: var(--ink-600); } /* Card header carrying a title opposite a small tool cluster. */ .panel { background: #fff; border: 1px solid var(--ink-300); border-radius: var(--radius-card); overflow: hidden; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--ink-300); } .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 0; background: transparent; color: var(--ink-600); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .icon-btn:hover { background: var(--ink-50); color: var(--brand); } /* Status dot + label pairing used in the deposits table. */ .dot-state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; } .dot-state::before { content: ''; width: 8px; height: 8px; border-radius: 9999px; background: currentColor; } /* When the label already carries its own icon, the generated dot is redundant. */ .dot-state:has(> i)::before { display: none; } .dot-held { color: var(--warning); } .dot-refund { color: var(--emerald); } .dot-settled { color: var(--ink-600); } /* Soft auction-type chips. */ .type-chip { display: inline-block; padding: 5px 12px; border-radius: 9999px; font-size: 12px; font-weight: 500; } .type-live { background: #ECFDF5; color: #10B981; } .type-sealed { background: #F5F3FF; color: #7C3AED; } .type-open { background: #EFF6FF; color: #2563EB; } /* --- Wallet --- */ /* Full-bleed brand card showing the headline balance. */ .wallet-hero { background: var(--brand); color: #fff; border-radius: var(--radius-card); padding: 28px; text-align: end; } .wallet-hero .amount { font-size: 40px; font-weight: 800; line-height: 1.1; } .wallet-hero .split { display: flex; gap: 32px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .25); } .wallet-hero .split > div { flex: 1; } .wallet-hero .split .k { font-size: 13px; color: rgba(255, 255, 255, .8); margin-bottom: 4px; } .wallet-hero .split .v { font-size: 20px; font-weight: 700; } /* Stacked action buttons beside the balance card. */ .wallet-action { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 22px; border-radius: var(--radius-card); font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; } .wallet-action-solid { background: var(--ink-100); border: 0; color: var(--ink); } .wallet-action-solid:hover { background: var(--ink-300); } .wallet-action-outline { background: #fff; border: 1px solid var(--brand-soft); color: var(--ink); } .wallet-action-outline:hover { border-color: var(--brand); } /* Square tinted icon marking a transaction's kind. */ .tx-icon { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; flex-shrink: 0; } .tx-bid { background: #EFF6FF; color: #2563EB; } .tx-deposit { background: #ECFDF5; color: #10B981; } .tx-refund { background: #FFFBEB; color: #F59E0B; } .tx-buy { background: #FEF2F2; color: var(--brand); } .tx-hold { background: var(--ink-50); color: var(--ink-600); } .amt-in { color: var(--emerald); font-weight: 700; } .amt-out { color: var(--brand); font-weight: 700; } /* --- Messages --- */ /* Three panes: nav rail, conversation list, thread. Height is pinned so the thread scrolls internally rather than growing the page. */ /* Named tracks pin each pane to its own column, so the `order` used for source-order tweaks can never swap their widths. */ /* In RTL the first track is the rightmost, which is where the conversation list belongs; the thread fills the remaining space beside it. */ /* Flex rather than grid: a flex row makes both panes stretch to the tallest line box automatically, without depending on a percentage-height chain that a grid child cannot resolve. The list leads (rightmost in RTL). */ .chat-shell { display: flex; /* Source order is thread-then-list; reversing puts the list on the reading edge (right in Arabic) as the design shows. */ flex-direction: row-reverse; align-items: stretch; height: calc(100vh - 72px); min-height: 0; overflow: hidden; } .chat-list { width: 320px; flex: 0 0 320px; min-height: 0; } .chat-pane { flex: 1 1 auto; min-width: 0; min-height: 0; } @media (max-width: 900px) { /* On small screens the list gives way to the open thread. */ .chat-list { display: none; } } .chat-list { /* Rule sits between the list and the thread beside it. */ border-inline-end: 1px solid var(--ink-300); display: flex; flex-direction: column; min-height: 0; background: #fff; } .chat-search { padding: 16px; border-bottom: 1px solid var(--ink-300); } .chat-items { overflow-y: auto; flex: 1; } .chat-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ink-300); cursor: pointer; position: relative; transition: background-color .2s ease; } .chat-item:hover { background: var(--ink-25, #F8F9FA); } /* Active thread is tinted and flagged with a brand rule. */ .chat-item.is-active { background: var(--ink-50); } .chat-item.is-active::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--brand); } .chat-item .avatar { width: 56px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--ink-100); } .chat-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #fff; } .chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--brand-soft); flex-shrink: 0; } .chat-body { flex: 1; overflow-y: auto; padding: 20px; background: #fff; } /* Day separator between message groups. */ .chat-day { text-align: center; margin-bottom: 20px; } .chat-day span { display: inline-block; background: var(--ink-50); color: var(--ink-600); font-size: 12px; padding: 5px 16px; border-radius: 9999px; } .msg { display: flex; gap: 10px; margin-bottom: 18px; max-width: 78%; } /* Their messages hug the reading edge; mine sit opposite. */ .msg-them { margin-inline-end: auto; } .msg-mine { margin-inline-start: auto; flex-direction: row-reverse; } .msg .who { width: 34px; height: 34px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; background: var(--ink-900); } .bubble { border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.75; } .msg-them .bubble { background: var(--ink-50); color: var(--ink); } .msg-mine .bubble { background: var(--brand); color: #fff; } .msg-time { font-size: 11px; color: var(--ink-600); margin-top: 6px; display: flex; align-items: center; gap: 4px; } .msg-mine .msg-time { justify-content: flex-end; } /* Composer pinned to the foot of the thread. */ .chat-compose { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--ink-300); flex-shrink: 0; background: #fff; } .chat-compose input { flex: 1; min-width: 0; padding: 12px 18px; border-radius: 9999px; border: 1px solid var(--ink-300); font-size: 14px; background: var(--ink-25, #F8F9FA); } .chat-compose input:focus { outline: 0; border-color: var(--brand); } .chat-send { width: 44px; height: 44px; border-radius: 9999px; background: var(--brand); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background-color .2s ease; } .chat-send:hover { background: #9E0400; } /* Policy / warning list with ticked bullets. */ .policy-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.8; margin-bottom: 8px; } .policy-item:last-child { margin-bottom: 0; } .policy-item i { margin-top: 6px; font-size: 11px; flex-shrink: 0; } /* -------------------------------------------------------------------------- 15n. Dashboard — my bids and purchase history -------------------------------------------------------------------------- */ /* Small tinted count tile sitting beside the page title. */ .count-tile { border-radius: 10px; padding: 12px 18px; text-align: center; min-width: 78px; } .count-tile .n { font-size: 26px; font-weight: 800; line-height: 1.1; } .count-tile .lbl { font-size: 12px; margin-top: 2px; } .count-tile-red { background: #FEF2F2; } .count-tile-red .n { color: var(--brand); } .count-tile-red .lbl { color: var(--brand); } .count-tile-green { background: #ECFDF5; } .count-tile-green .n { color: var(--emerald); } .count-tile-green .lbl { color: var(--emerald); } .count-tile-grey { background: var(--ink-100); } .count-tile-grey .n { color: var(--brand); } .count-tile-grey .lbl { color: var(--ink-600); } /* Underlined filter tabs above a table. */ .filter-tabs { display: flex; align-items: center; gap: 32px; border-bottom: 1px solid var(--ink-300); overflow-x: auto; scrollbar-width: none; } .filter-tabs::-webkit-scrollbar { display: none; } .filter-tab { position: relative; padding: 12px 2px; font-size: 16px; color: var(--ink-600); background: none; border: 0; cursor: pointer; white-space: nowrap; transition: color .2s ease; } .filter-tab:hover { color: var(--ink); } .filter-tab.is-active { color: var(--ink); font-weight: 700; } .filter-tab.is-active::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 3px; background: var(--brand); border-radius: 9999px; } /* Pill-shaped filter buttons (purchases screen). */ .chip-filter { padding: 9px 22px; border-radius: 9999px; border: 1px solid var(--brand-soft); background: #fff; font-size: 14px; color: var(--ink); cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .chip-filter:hover { border-color: var(--brand); } .chip-filter.is-active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; } /* Car cell: thumbnail beside a title and its trim line. */ .car-cell { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .car-cell .pic { width: 64px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--ink-100); flex-shrink: 0; } .car-cell .name { font-size: 14px; font-weight: 700; color: var(--ink); } .car-cell .trim { font-size: 11px; color: var(--ink-600); margin-top: 2px; } /* Countdown shown inside a table row. */ .row-timer { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Sans', monospace; font-variant-numeric: tabular-nums; font-weight: 700; direction: ltr; unicode-bidi: isolate; } .row-timer-hot { color: var(--brand); } .row-timer-warm { color: var(--warning); } /* Row action icons. */ .row-actions { display: inline-flex; align-items: center; gap: 10px; } .row-action { background: none; border: 0; cursor: pointer; font-size: 15px; color: var(--ink-600); padding: 4px; transition: color .2s ease, transform .15s ease; } .row-action:hover { transform: scale(1.12); } .row-action-view { color: var(--brand); } .row-action-chat { color: var(--ink-600); } .row-action-star { color: var(--gold); } .row-action-invoice{ color: var(--brand); } /* Bid-state pills, softer than the generic .pill set. */ .bid-pill { display: inline-block; padding: 5px 14px; border-radius: 9999px; font-size: 12px; font-weight: 500; white-space: nowrap; } .bid-lead { background: #ECFDF5; color: #10B981; } .bid-lost { background: #FEF2F2; color: #EF4444; } .bid-active { background: #EFF6FF; color: #2563EB; } .bid-won { background: #ECFDF5; color: #10B981; } .bid-sealed { background: #F5F3FF; color: #7C3AED; } .bid-under { background: #FFFBEB; color: #F59E0B; } /* Toolbar sitting opposite the tabs. */ .tool-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 8px; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease; } .tool-btn-outline { background: #fff; border: 1px solid var(--brand); color: var(--brand); } .tool-btn-outline:hover { background: #FEF2F2; } .tool-btn-dark { background: var(--ink); border: 0; color: #fff; } .tool-btn-dark:hover { background: #000; } /* -------------------------------------------------------------------------- 15o. Sealed auctions — submit, confirm and results -------------------------------------------------------------------------- */ /* Dark panel holding the sealed-bid form. */ .sealed-panel { background: #2B2B2B; color: #fff; border-radius: var(--radius-card); padding: 32px 28px; } .sealed-panel .lock-badge { width: 60px; height: 60px; border-radius: 9999px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; font-size: 22px; margin-inline: auto; } .sealed-panel label { display: block; text-align: end; font-size: 14px; margin-bottom: 8px; } /* Amount field on the dark ground. */ .sealed-input { width: 100%; padding: 14px 16px; border-radius: 8px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 16px; text-align: end; transition: border-color .2s ease, background-color .2s ease; } .sealed-input::placeholder { color: rgba(255, 255, 255, .45); } .sealed-input:focus { outline: 0; border-color: var(--brand); background: rgba(255, 255, 255, .1); } /* Deposit callout inside the dark panel. */ .sealed-note { background: rgba(255, 255, 255, .06); border-radius: 8px; padding: 14px 16px; } .sealed-note .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .sealed-note .hint { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; line-height: 1.7; color: rgba(255, 255, 255, .6); } /* Deposit-source chooser (wallet vs bank transfer). */ .pay-src { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 13px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; } .pay-src i { font-size: 18px; } .pay-src:hover { border-color: rgba(255, 255, 255, .4); } .pay-src.is-active { border-color: var(--brand); background: rgba(179, 4, 0, .18); } /* Outlined spec tiles under the gallery. */ .spec-box { border: 1px solid var(--brand-soft); border-radius: 8px; padding: 12px 16px; text-align: center; } .spec-box .k { font-size: 12px; color: var(--ink-600); margin-bottom: 4px; } .spec-box .v { font-size: 14px; font-weight: 700; color: var(--ink); } .spec-box .v.is-good { color: var(--emerald); } /* Violet privacy explainer with a rule on its reading edge. */ .privacy-note { background: var(--ink-50); border-inline-end: 4px solid var(--violet); border-radius: 8px; padding: 18px 20px; } /* --- Confirmation screen --- */ .confirm-card { position: relative; background: #fff; border-radius: var(--radius-card); box-shadow: 0 20px 45px rgba(25, 28, 29, .12); padding: 48px 40px 36px; text-align: center; overflow: hidden; } /* Gradient hairline across the top edge. */ .confirm-card::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--brand) 0%, #7C3AED 100%); } .confirm-seal { width: 88px; height: 88px; border-radius: 9999px; background: #FFDAD4; color: var(--brand); display: grid; place-items: center; font-size: 34px; margin-inline: auto; box-shadow: 0 0 0 10px rgba(255, 218, 212, .35); } /* Two read-only summary tiles under the confirmation heading. */ .confirm-fact { background: var(--ink-50); border: 1px solid var(--ink-300); border-radius: 10px; padding: 16px 20px; text-align: center; } .confirm-fact .k { font-size: 12px; color: var(--ink-600); margin-bottom: 6px; } .confirm-fact .v { font-size: 20px; font-weight: 800; color: var(--ink); } .confirm-fact .v.is-brand { color: var(--brand); } /* Falling confetti; purely decorative. */ .confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .confetti i { position: absolute; width: 9px; height: 9px; opacity: .85; animation: confetti-fall 4.5s linear infinite; } @keyframes confetti-fall { 0% { transform: translateY(-10vh) rotate(0deg); } 100% { transform: translateY(110vh) rotate(540deg); } } /* --- Results screen --- */ /* Green "you won" banner. */ .win-banner { background: #F0FDF9; border: 1px solid #A7F3D0; border-radius: var(--radius-card); padding: 20px 24px; } /* Revealed bid table; the winning row is tinted. */ .reveal-row.is-winner { background: #ECFDF5; } .reveal-row.is-winner td { font-weight: 700; } /* Circular initials avatar for each bidder. */ .bidder-chip { width: 30px; height: 30px; border-radius: 9999px; background: var(--ink-100); color: var(--ink-600); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .bidder-chip.is-you { background: var(--emerald); color: #fff; } /* Dark "next steps" panel with numbered bullets. */ .steps-panel { background: #2B2B2B; color: #fff; border-radius: var(--radius-card); padding: 24px; } .steps-panel .step-line-item { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.8; margin-bottom: 16px; } .steps-panel .step-line-item:last-child { margin-bottom: 0; } .steps-panel .num { width: 22px; height: 22px; border-radius: 9999px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 2px; } /* -------------------------------------------------------------------------- 16. Reveal-on-scroll Elements tagged [data-reveal] fade up once they enter the viewport. -------------------------------------------------------------------------- */ /* The hidden start state is applied by JS (via .js-reveal on ) so that the content stays visible when scripting is off or the observer never fires — a hidden section that never un-hides is worse than no animation. */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; } .js-reveal [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 17. Utilities -------------------------------------------------------------------------- */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .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; } /* Skeleton shimmer for images that are still loading. */ .skeleton { background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-50) 37%, var(--ink-100) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* --- Wallet KPI row --- */ /* Three balance cards; the first is brand-filled and carries the headline total, the other two are outlined and read as secondary. */ .kpi { border-radius: var(--radius-card); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; min-height: 148px; } .kpi-lead { background: var(--brand); color: #fff; border: 1px solid var(--brand); } .kpi-plain { background: #fff; border: 1px solid var(--ink-300); } .kpi .kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .kpi .kpi-label { font-size: 14px; font-weight: 500; } .kpi-plain .kpi-label { color: var(--ink-600); } .kpi .kpi-value { font-size: 30px; font-weight: 800; line-height: 1.15; } .kpi-plain .kpi-value { color: var(--ink); } .kpi .kpi-note { font-size: 12px; } .kpi-lead .kpi-note { color: rgba(255, 255, 255, .85); } .kpi-plain .kpi-note { color: var(--ink-600); } .kpi-glyph { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; font-size: 16px; } .kpi-lead .kpi-glyph { background: rgba(255, 255, 255, .18); color: #fff; } /* Avatar cluster showing which auctions a held amount is tied to. */ .stack-dots { display: inline-flex; align-items: center; } .stack-dots > span { width: 18px; height: 18px; border-radius: 9999px; background: var(--ink-600); border: 2px solid #fff; } .stack-dots > span + span { margin-inline-start: -7px; } /* --- Donut chart --- */ /* Square box so the canvas keeps its aspect ratio, with the percentage centred behind it. */ .donut-wrap { position: relative; width: 100%; max-width: 190px; margin-inline: auto; aspect-ratio: 1; } .donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; } .donut-center .pct { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1; } .donut-center .cap { font-size: 12px; color: var(--ink-600); margin-top: 2px; } .legend-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; } .legend-key { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-600); } .legend-key::before { content: ''; width: 10px; height: 10px; border-radius: 9999px; background: var(--dot, var(--ink-300)); } /* --- Horizontal order timeline --- */ /* Four equal steps joined by a rail that sits behind the markers. The rail is inset by half a step so it spans marker-to-marker, not edge-to-edge. */ .track { display: flex; position: relative; } .track::before { content: ''; position: absolute; top: 26px; height: 2px; inset-inline: calc(100% / 8); background: var(--ink-300); } .track-step { flex: 1; position: relative; z-index: 1; text-align: center; padding-inline: 6px; } .track-mark { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 9999px; display: grid; place-items: center; font-size: 18px; background: var(--ink-300); color: var(--ink-600); border: 4px solid var(--surface); } /* `color` alone loses to Font Awesome's own rule on the , so the glyph is targeted directly — otherwise the icon renders dark on the filled circle. */ .track-step.is-done .track-mark, .track-step.is-done .track-mark > i { background: var(--success); color: #fff; } .track-step.is-now .track-mark { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .track-step.is-now .track-mark, .track-step.is-now .track-mark > i { color: #fff; } .track-step .t { font-size: 14px; font-weight: 700; color: var(--ink); } .track-step .d { font-size: 12px; color: var(--ink-600); margin-top: 2px; } .track-step.is-now .t { color: var(--brand); } .track-step.is-todo { opacity: .45; } @media (max-width: 720px) { .track { flex-direction: column; gap: 20px; } .track::before { inset-inline: auto; right: 25px; top: 0; bottom: 0; width: 2px; height: auto; } .track-step { display: flex; align-items: center; gap: 14px; text-align: start; padding: 0; } .track-mark { margin: 0; } } /* --- Payment method tiles --- */ /* Three selectable cards in a row; the checked one is brand-outlined. The radio itself is hidden and the label carries the state. */ .pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 560px) { .pay-grid { grid-template-columns: 1fr; } } .pay-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px 12px; cursor: pointer; text-align: center; border-radius: var(--radius-card); background: var(--ink-50); border: 1px solid var(--ink-300); transition: background-color .2s ease, border-color .2s ease; } .pay-tile:hover { background: var(--ink-100); } .pay-tile input { position: absolute; opacity: 0; pointer-events: none; } .pay-tile i { font-size: 22px; color: var(--ink-600); } .pay-tile span { font-size: 14px; font-weight: 500; color: var(--ink); } .pay-tile:has(input:checked) { background: #FEF2F2; border-color: var(--brand); border-width: 2px; } .pay-tile:has(input:checked) i { color: var(--brand); } .pay-tile:has(input:checked) span { font-weight: 700; } .pay-tile:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; } /* --- Payment method rows --- */ /* Full-width selectable row: check mark, label block, then the brand logo. The radio is visually hidden and the row carries the selected state. */ .method { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-card); border: 1px solid var(--ink-300); background: #fff; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; } .method:hover { border-color: var(--brand-soft); background: var(--ink-50); } .method input { position: absolute; opacity: 0; pointer-events: none; } .method-check { color: var(--ink-300); font-size: 20px; flex-shrink: 0; order: -1; } .method-body { flex: 1; min-width: 0; text-align: end; display: flex; flex-direction: column; } .method-title { font-size: 15px; font-weight: 700; color: var(--ink); } .method-sub { font-size: 12px; color: var(--ink-600); margin-top: 2px; } .method-logo { width: 52px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: var(--ink-50); font-size: 20px; color: var(--ink-600); } .method:has(input:checked) { border-color: var(--brand); border-width: 2px; background: #FEF2F2; } .method:has(input:checked) .method-check { color: var(--brand); } .method:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; } /* --- Countdown blocks --- */ /* Monospaced digit groups so the timer does not jitter as numbers tick. */ .countdown { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; } /* --- Filter rail chips --- */ /* Two-up toggle grid used by the activity-log filters. */ .chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .chip { padding: 9px 10px; border-radius: 8px; border: 1px solid var(--ink-300); background: var(--ink-50); color: var(--ink-600); font-size: 13px; font-weight: 500; cursor: pointer; text-align: center; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .chip:hover { border-color: var(--brand-soft); } .chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } .chip-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; font-weight: 600; } /* --- Seller dashboard stat tiles --- */ /* Compact metric card: tinted glyph on top, caption, then the figure. */ .stat { background: #fff; border: 1px solid var(--ink-300); border-radius: var(--radius-card); padding: 16px; text-align: end; display: flex; flex-direction: column; gap: 6px; } .stat-glyph { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9999px; font-size: 15px; margin-inline-start: auto; } .stat .cap { font-size: 12px; color: var(--ink-600); } .stat .num { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.15; } /* Pill counters that sit above the stat row. */ .count-pill { border-radius: var(--radius-card); padding: 10px 22px; text-align: center; color: #fff; line-height: 1.2; } .count-pill .n { font-size: 20px; font-weight: 800; } .count-pill .l { font-size: 11px; opacity: .9; } /* --- Bar chart --- */ /* Flex columns whose heights are set inline as percentages; the tallest bar carries .is-peak and shows a value tag above it. */ .bars { display: flex; align-items: flex-end; gap: 14px; height: 230px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; } .bar-fill { width: 100%; background: var(--ink-100); border-radius: 6px 6px 0 0; margin-top: auto; transition: background-color .2s ease; } .bar-col.is-peak .bar-fill { background: var(--brand); } .bar-col.is-alt .bar-fill { background: #F5A9A2; } .bar-label { font-size: 11px; color: var(--ink-600); margin-top: 8px; white-space: nowrap; } .bar-tag { background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; margin-bottom: 6px; } /* --- Conversation list --- */ .conv { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ink-300); } .conv:last-child { border-bottom: 0; } .conv-avatar { position: relative; flex-shrink: 0; } .conv-avatar img { width: 42px; height: 42px; border-radius: 9999px; object-fit: cover; } /* Presence dot pinned to the avatar's leading edge. */ .conv-avatar .on { position: absolute; bottom: 0; inset-inline-start: 0; width: 11px; height: 11px; border-radius: 9999px; background: var(--success); border: 2px solid #fff; } .conv-body { flex: 1; min-width: 0; text-align: end; } .conv-name { font-size: 14px; font-weight: 700; color: var(--ink); } .conv-sub { font-size: 12px; color: var(--ink-600); } .conv-msg { font-size: 12px; color: var(--ink-600); margin-top: 2px; } .conv-meta { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; } .conv-time { font-size: 11px; color: var(--ink-600); white-space: nowrap; } .conv-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 9999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; } /* --- Big action buttons (seller quick actions) --- */ .action-tile { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; border-radius: var(--radius-card); border: 1px solid var(--ink-300); background: #fff; cursor: pointer; text-align: end; transition: border-color .2s ease, background-color .2s ease; } .action-tile:hover { border-color: var(--brand); } .action-tile .t { font-size: 15px; font-weight: 700; } .action-tile .s { font-size: 12px; opacity: .8; } .action-tile .glyph { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; font-size: 17px; } .action-tile-solid { background: var(--brand); border-color: var(--brand); color: #fff; } .action-tile-solid:hover { background: #9E0400; border-color: #9E0400; } .action-tile-solid .glyph { background: rgba(255, 255, 255, .18); color: #fff; } .action-tile-brand { border-color: var(--brand); color: var(--brand); } .action-tile-brand .glyph { background: #FEF2F2; color: var(--brand); } .action-tile-soft { background: #FEF2F2; border-color: var(--brand-soft); color: var(--brand); } .action-tile-dark { background: #fff; border-color: var(--ink); color: var(--ink); } .action-tile-dark .glyph { background: var(--ink-50); color: var(--ink); } /* --- Accent stat cards --- */ /* Metric card with a coloured bar on its inline-end edge; the accent colour is passed per instance via --accent. */ .stat-accent { background: #fff; border: 1px solid var(--ink-300); border-inline-end: 4px solid var(--accent, var(--brand)); border-radius: var(--radius-card); padding: 16px 18px; text-align: end; } .stat-accent .cap { font-size: 13px; color: var(--ink-600); margin-bottom: 4px; } .stat-accent .num { font-size: 18px; font-weight: 700; color: var(--ink); } /* --- Segmented filter tabs --- */ .tabs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tab { padding: 9px 22px; border-radius: 8px; border: 1px solid var(--ink-300); background: #fff; color: var(--ink-600); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .tab:hover { border-color: var(--brand-soft); color: var(--ink); } .tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; } /* --- Row action icons --- */ .row-acts { display: inline-flex; align-items: center; gap: 14px; } .row-acts a, .row-acts button { color: var(--ink-600); font-size: 15px; background: none; border: 0; cursor: pointer; transition: color .2s ease; } .row-acts a:hover, .row-acts button:hover { color: var(--brand); } .row-acts .is-on { color: var(--gold); } .row-acts .act-dl:hover { color: var(--brand); } /* --- Favourite card overlays --- */ /* Heart toggle pinned to a media corner. */ .fav-heart { position: absolute; top: 12px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9999px; background: rgba(255, 255, 255, .92); color: var(--brand); border: 0; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); transition: transform .15s ease; } .fav-heart:hover { transform: scale(1.08); } /* Sold-out veil over a closed listing. */ .fav-veil { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(25, 28, 29, .45); } .fav-veil span { background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 13px; font-weight: 700; padding: 7px 18px; border-radius: 8px; } /* Hide content until i18n has painted the correct language, avoiding a flash of the wrong locale on first load. */ html:not(.i18n-ready) body { visibility: hidden; } @media print { .site-header, .site-footer, .nav-drawer, .nav-scrim { display: none !important; } }