/* ========================================================================== MitiMarkets โ€” "Gallery White & Claret" A committed single light world: near-pure-white gallery grounds, a cool near-black ink, hairline structure, and claret as the one accent (used only on the reward, the buyer, and primary hover). Didone display + grotesque body. Class names are shared with the templates and the test suite โ€” restyled here, not renamed. ========================================================================== */ :root { --ground: #FCFCFB; --surface: #FFFFFF; --surface-2: #F0F0EE; --hero-tint: #F4F1EC; /* warm bone for the Item of the Month band; deliberately NOT --surface-2, which is a cool grey used for UI chrome */ --ink: #17171C; --ink-soft: #6C6C71; --line: #E7E6E4; --accent: #74232E; /* claret */ --accent-deep: #58141D; --accent-tint: #74232e0f; --brass: #9C7F3C; --sold: #A7A7A4; --shadow: 20px 30px 60px -44px rgba(23, 23, 28, .28); --serif: "Bodoni MT", "Didot", "Hoefler Text", "Big Caslon", Georgia, serif; --sans: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; --maxw: 1180px; /* Page side gutter. A more generous ramp on narrow/mid widths so content isn't cramped against the edges on phones/tablets (desktop is unchanged -- both cap at 3rem, and the wrap is centered with wide margins well before that). */ --pad: clamp(1.5rem, 6vw, 3rem); } /* ---- Reset-ish base -------------------------------------------------------- */ * { box-sizing: border-box; } /* Clip horizontal overflow at the ROOT (the element is the viewport scroller on mobile). Doing it here rather than on body keeps html the single scroll container, so a small overflow can't bleed off-screen AND the sticky header keeps working (overflow on body too would make body a competing scroll container and break sticky). */ html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Long unbreakable strings (emails, referral codes, URLs) wrap instead of forcing the page wider than the viewport. */ overflow-wrap: break-word; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.08; text-wrap: balance; margin: 0 0 .6rem; } a { color: inherit; text-decoration: none; } p { margin: 0 0 1rem; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } main { display: block; min-height: 50vh; } .muted { color: var(--ink-soft); } /* Every displayed price, in one rule. `.money` is emitted by the `money` template filter (core/templatetags/money.py); the four class names beside it are the containers that were still plain sans while .pdp-price and .cart-total strong were already Didone -- the hero price, the largest figure on the storefront, was set more weakly than the cart subtotal. */ .price, .num, .price-tag, .cascade-amount, .reward-banner-amount, .money, .listing-card-price, .hero-price, .dashboard-car-card-price, .saved-item-price { font-variant-numeric: tabular-nums; } /* The face goes on `.money` itself, not only on the containers, so a price is Didone wherever the filter is used. Container-only would have missed the reward labels (.listing-card-reward, .dashboard-car-card-reward), which set no font-family -- leaving Helvetica digits beside a Georgia currency symbol, a worse pairing than before the change. The trailing word in those labels ("referral") sits OUTSIDE .money and correctly stays sans. */ .money, .listing-card-price, .hero-price, .dashboard-car-card-price, .saved-item-price { font-family: var(--serif); } /* The currency symbol gets its own font. Bodoni MT's dollar glyph is DOUBLE-barred -- at small sizes it reads as a smudge and at display sizes as a slab -- so the symbol alone is swapped to a single-barred serif. Georgia is chosen because it is a serif that ships on every target platform, so the symbol never falls back to sans beside Didone digits. `.money` itself must stay `display: inline` (not inline-block): it sits inside `.listing-card-reward`, which is an inline-flex container with a gap, and any block-level display would make it a flex item and open that gap between the symbol and its digits. */ .money-sym { font-family: Georgia, "Times New Roman", serif; } .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; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---- Buttons --------------------------------------------------------------- */ .btn, .btn-primary { display: inline-block; font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; padding: .9rem 1.7rem; border: 1px solid var(--ink); background: var(--ink); color: var(--ground); cursor: pointer; transition: background .2s, color .2s, border-color .2s; text-align: center; } .btn:hover, .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); } /* ---- Header / nav ---------------------------------------------------------- */ .site-header { border-bottom: 1px solid var(--line); background: var(--ground); position: sticky; top: 0; z-index: 20; } /* gap matches .site-nav's own inter-link gap so the space between the last nav link and Cart is identical to the spaces between the links themselves -- Cart sits outside .site-nav (it must survive the mobile collapse), so without this it would inherit .header-inner's gap and sit visibly closer than its neighbours. */ .header-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(.9rem, 2.2vw, 2rem); padding-block: 1.15rem; flex-wrap: wrap; } .brand { font-family: var(--serif); font-size: 1.65rem; letter-spacing: .01em; color: var(--ink); } .brand b { font-weight: 400; } .brand-logo { height: 30px; width: auto; } /* margin-left:auto absorbs ALL the free space between the brand and the links, so the nav and Cart stay clustered flush right as one group. Without it, the header has three flex children instead of the original two and justify-content:space-between spreads them -- stranding the nav in the middle of the header with Cart alone at the far edge. Caught by screenshotting the real page against a pre-change baseline; no test could see it. */ .site-nav { display: flex; align-items: center; flex-wrap: wrap; margin-left: auto; gap: clamp(.9rem, 2.2vw, 2rem); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .site-nav a { transition: color .15s; } .site-nav a:hover { color: var(--ink); } /* Cart + hamburger. The Cart link lives OUTSIDE .site-nav so it stays visible when the nav collapses (mobile), which means it no longer inherits the type treatment from `.site-nav a` -- hence the repetition below. The toggle is display:none here and turned on only inside the 700px media query, so it can never appear on desktop. */ .header-actions { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 2rem); } .nav-cart { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); transition: color .15s; } .nav-cart:hover { color: var(--ink); } .nav-toggle { display: none; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; } .nav-toggle svg { display: block; width: 26px; height: 26px; } /* ---- Flash messages -------------------------------------------------------- */ .flash { border: 1px solid var(--line); border-left-width: 3px; background: var(--surface); padding: .85rem 1.1rem; margin: 1.2rem 0; font-size: .92rem; } .flash-error { border-left-color: var(--accent); color: var(--accent-deep); } .flash-success { border-left-color: var(--brass); } /* ---- Footer ---------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); margin-top: 4rem; padding: 2.4rem 0 3rem; color: var(--ink-soft); font-size: .84rem; } .site-footer p { margin: 0 0 .35rem; } .footer-links a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; } .footer-links a:hover { color: var(--accent); } /* ---- Scroll-to-top --------------------------------------------------------- */ .scroll-top { position: fixed; right: 1.4rem; bottom: 1.4rem; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s, border-color .2s; z-index: 30; } .scroll-top svg { width: 20px; height: 20px; } .scroll-top.visible { opacity: 1; visibility: visible; transform: none; } .scroll-top:hover { border-color: var(--ink); } /* ---- Home / listings grid -------------------------------------------------- */ .listings-page { padding-block: clamp(2rem, 5vw, 3.5rem); } .listings-page > h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 1.4rem; } .listing-search, .staff-search { display: flex; gap: .6rem; margin-bottom: 2.2rem; flex-wrap: wrap; align-items: center; } .listing-search input[type="text"], .staff-search input { flex: 1 1 260px; min-width: 0; padding: .8rem 1rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--sans); font-size: .95rem; } .clear-search { align-self: center; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; } /* Same collection search bar on a product page (sits under the breadcrumb rather than a page heading, so a touch tighter below than the home grid's 2.2rem). */ .pdp-search .listing-search { margin-bottom: 1.4rem; } .clear-search:hover { color: var(--accent); } /* Price filter chips (home grid only -- see home.html). Plain links, so no JS and nothing for the CSP to allow. `-2.2rem` pulls them up under the search bar's own bottom margin so the pair reads as one control block; wraps to as many rows as a narrow screen needs. The active chip uses claret, the site's single accent. */ .price-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: -1.4rem 0 2.2rem; } .price-chip { padding: .45rem .9rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-size: .82rem; letter-spacing: .04em; white-space: nowrap; transition: border-color .2s ease, color .2s ease; } .price-chip:hover { border-color: var(--accent); color: var(--accent); } .price-chip.active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); } .listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1rem, 2.5vw, 1.8rem); } .listing-card { position: relative; } .listing-card-link { display: block; color: inherit; } .listing-card .fav-form { position: absolute; top: .6rem; right: .6rem; z-index: 2; } .listing-card-photo { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); transition: transform .35s ease, box-shadow .35s ease; } .listing-card:hover .listing-card-photo { transform: translateY(-6px); box-shadow: var(--shadow); } .listing-card-placeholder { display: grid; place-items: center; background: linear-gradient(150deg, var(--surface), var(--surface-2)); } .listing-card-placeholder img { width: 46%; opacity: .4; } .listing-card-body { padding: .9rem 0 0; } .listing-card-brand { font-family: var(--serif); font-size: 1.1rem; line-height: 1.15; } .listing-card-address { color: var(--ink-soft); font-size: .86rem; margin-top: .1rem; } .listing-card-price { font-size: .98rem; margin-top: .5rem; } .listing-card-facts { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: .3rem; } /* Enlarged .72 -> .82rem (and the diamond .58 -> .66rem to match) once the amount inside became Didone: at .72rem the serif figures were too small to read as the display face and just looked cramped. */ .listing-card-reward { margin-top: .5rem; font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; } .listing-card-reward::before { content: "\25C6"; font-size: .66rem; color: var(--brass); } .empty-state { text-align: center; padding: clamp(3rem, 8vw, 6rem) 0; } .empty-state h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); } .empty-state a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* ---- Sold styling (shared: home, product, dashboard) ----------------------- */ .sold-label { display: inline-block; font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: .25rem .55rem; margin-bottom: .4rem; } /* New / Pre-owned provenance badge (Product.condition_type), modeled on .sold-label. */ .condition-badge { display: inline-block; font-family: var(--sans); font-weight: 600; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: .22rem .5rem; margin-bottom: .5rem; } .condition-badge.condition-preowned { color: var(--ink-soft); border-color: var(--ink-soft); } .price-sold { text-decoration: line-through !important; color: var(--sold) !important; } /* ---- Pagination ------------------------------------------------------------ */ .pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 3rem 0 1rem; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; } .pagination a { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; } .pagination a:hover { color: var(--accent); border-color: var(--accent); } .pagination-current { color: var(--ink-soft); } /* ---- Breadcrumb ------------------------------------------------------------ */ .breadcrumb { padding-block: 1.4rem .4rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; } .breadcrumb a { color: var(--ink-soft); } .breadcrumb a:hover { color: var(--accent); } /* ---- Product detail: gallery + summary ------------------------------------ */ .pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 380px); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; margin-top: .6rem; } /* Gallery: a vertical thumbnail strip beside a fixed-aspect main stage, so every photo -- whatever its native shape -- sits in the same frame (object-fit keeps it uncropped and centered). */ .pdp-gallery { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .8rem; align-items: start; } .pdp-stage { grid-column: 2; position: relative; aspect-ratio: 3 / 4; background: var(--surface); border: 1px solid var(--line); overflow: hidden; } .pdp-slide { display: none; margin: 0; width: 100%; height: 100%; } .pdp-slide.active { display: block; } .pdp-slide img { width: 100%; height: 100%; object-fit: contain; display: block; } .pdp-placeholder { grid-column: 2; display: grid; place-items: center; gap: 1rem; text-align: center; color: var(--ink-soft); } .pdp-placeholder .placeholder-illustration { width: min(240px, 55%); opacity: .45; } .pdp-placeholder span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; } .pdp-thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: .5rem; } .pdp-thumb { padding: 0; border: 1px solid var(--line); background: var(--surface); cursor: pointer; aspect-ratio: 3 / 4; overflow: hidden; transition: border-color .15s; } .pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pdp-thumb:hover { border-color: var(--ink-soft); } .pdp-thumb.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .pdp-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pdp-summary { position: sticky; top: 90px; display: flex; flex-direction: column; } /* Heart overlaid on the top-right of the main image stage (grid col 2 = the gallery's right edge), matching the storefront cards. */ .pdp-fav { position: absolute; top: .8rem; right: .8rem; z-index: 3; } .pdp-brand { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); } .pdp-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: .35rem 0 .8rem; } .price-tag { font-family: var(--serif); font-variant-numeric: tabular-nums; } .pdp-price { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.1rem); font-variant-numeric: tabular-nums; } .pdp-condition { font-size: .82rem; letter-spacing: .04em; color: var(--ink-soft); margin-top: .5rem; } .pdp-buy { margin-top: 1.6rem; } .pdp-buy form { margin: 0; } .pdp-buy .btn, .pdp-buy form .btn { width: 100%; } .pdp-hold { font-size: .9rem; margin: 0; } .pdp-summary .sold-notice { margin-top: 1.6rem; } /* Main stage is click-to-zoom: a zoom cursor + a subtle corner affordance. */ .pdp-zoomable { cursor: zoom-in; } .pdp-zoom-hint { position: absolute; bottom: .7rem; right: .7rem; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 50%; pointer-events: none; } .pdp-zoom-hint svg { width: 17px; height: 17px; } /* ---- Zoom lightbox --------------------------------------------------------- */ .pdp-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(23, 23, 28, .93); animation: pdp-fade .18s ease; } .pdp-lightbox[hidden] { display: none; } .pdp-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; background: var(--surface); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); } .pdp-lightbox-close { position: absolute; top: 1rem; right: 1.2rem; width: 44px; height: 44px; font-size: 1.8rem; line-height: 1; color: var(--ground); background: transparent; border: 1px solid rgba(252, 252, 251, .4); cursor: pointer; transition: background .15s, border-color .15s; } .pdp-lightbox-close:hover { background: rgba(252, 252, 251, .12); border-color: var(--ground); } .pdp-lightbox-close:focus-visible { outline: 2px solid var(--ground); outline-offset: 2px; } body.pdp-noscroll { overflow: hidden; } @keyframes pdp-fade { from { opacity: 0; } to { opacity: 1; } } /* ---- Fact bar -------------------------------------------------------------- */ .fact-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 2rem auto; } .fact { background: var(--ground); padding: 1rem 1.1rem; } .fact strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.05rem; } .fact span { display: block; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: .25rem; } /* ---- Reward banner --------------------------------------------------------- */ .reward-banner { border: 1px solid var(--accent); background: var(--accent-tint); padding: 1rem 1.3rem; margin: 1.6rem auto; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; } .reward-banner-amount { font-family: var(--serif); font-size: 1.4rem; color: var(--accent); } .reward-banner-detail { font-size: .82rem; color: var(--ink-soft); max-width: 60ch; } /* ---- Listing body / detail ------------------------------------------------- */ .listing-body { display: grid; grid-template-columns: 1fr 360px; gap: clamp(1.8rem, 4vw, 3.5rem); padding-block: 1.5rem 2rem; align-items: start; } .listing-body-solo { grid-template-columns: 1fr; } .listing-main h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); } .listing-main h2 { font-size: 1.15rem; letter-spacing: .02em; margin: 2rem 0 .8rem; } .description { color: var(--ink); } .highlights { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .highlights li { padding-left: 1.4rem; position: relative; } .highlights li::before { content: "\25C6"; position: absolute; left: 0; color: var(--brass); font-size: .6rem; top: .45rem; } .listing-main > p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .spec-table { width: 100%; border-collapse: collapse; margin-top: .3rem; } .spec-table th, .spec-table td { text-align: left; padding: .6rem 0; border-top: 1px solid var(--line); font-size: .92rem; vertical-align: top; } .spec-table th { width: 40%; color: var(--ink-soft); font-weight: 400; } /* ---- Sidebar cards --------------------------------------------------------- */ .listing-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1.2rem; } .card { border: 1px solid var(--line); background: var(--surface); padding: 1.5rem; } .refer-card h3, .test-drive-card h3, .sold-notice h3 { font-size: 1.2rem; margin-bottom: .4rem; } .refer-card p, .test-drive-card p, .sold-notice p { font-size: .9rem; color: var(--ink-soft); } .listing-sidebar label { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: .9rem 0 .3rem; } .listing-sidebar input, .listing-sidebar textarea { width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: .95rem; } .listing-sidebar textarea { resize: vertical; } .listing-sidebar .btn { width: 100%; margin-top: 1.1rem; } .refer-card-hint { margin: .9rem 0 0; } .refer-card-hint a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: .85rem; } /* Fine-print reward-change disclaimer -- smaller than the hint link above it. */ .refer-card-fineprint { display: inline-block; margin-top: .35rem; font-size: .68rem; line-height: 1.4; } .refer-card-fineprint a { font-size: inherit; } .sold-notice { border-color: var(--accent); } /* ---- Dashboard ------------------------------------------------------------- */ .dashboard { padding-block: clamp(1.8rem, 4vw, 3rem); } .dashboard > h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 1.4rem; } .share-link-card { background: var(--ink); color: var(--ground); padding: 1.6rem 1.7rem; margin-bottom: 1.6rem; } /* Sold-out dashboards swap the share card for this notice -- match its spacing. */ .dashboard > .sold-notice { margin-bottom: 1.6rem; } .share-link-label { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); } .share-link-row { display: flex; gap: 1rem; align-items: center; margin: .7rem 0 .6rem; flex-wrap: wrap; } .share-link-row code { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; font-family: "SFMono-Regular", Consolas, monospace; font-size: .9rem; color: var(--ground); } .share-link-share { background: var(--ground); color: var(--ink); border-color: var(--ground); flex: none; } .share-link-share:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .share-link-hint { font-size: .78rem; color: rgba(252, 252, 251, .6); margin: 0; } .dashboard-car-card { display: grid; grid-template-columns: 200px 1fr; gap: 1.4rem; border: 1px solid var(--line); background: var(--surface); color: inherit; margin-bottom: 1.6rem; } .dashboard-car-card-photo { width: 100%; height: 100%; min-height: 200px; object-fit: cover; background: var(--surface-2); } .dashboard-car-card-placeholder { display: grid; place-items: center; } .dashboard-car-card-placeholder img { width: 55%; opacity: .4; } .dashboard-car-card-body { padding: 1.3rem 1.4rem 1.3rem 0; } .dashboard-car-card-name { font-family: var(--serif); font-size: 1.3rem; } .dashboard-car-card-price { font-size: 1.05rem; margin: .3rem 0; } .dashboard-car-card-facts { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); } .dashboard-car-card-reward { margin-top: .5rem; color: var(--accent); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; } .dashboard-car-card-link { margin-top: .7rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); display: inline-block; padding-bottom: 2px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 1.6rem 0; } .stat { background: var(--surface); padding: 1.2rem 1.3rem; } .stat strong { display: block; font-family: var(--serif); font-size: 1.9rem; } .stat span { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: .3rem; } .dashboard h2 { font-size: 1.2rem; margin: 2rem 0 .8rem; } .dashboard .btn-primary { margin: .4rem 0 1rem; } .dashboard p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .referral-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; } .referral-list li { padding: .7rem 0; border-top: 1px solid var(--line); font-size: .95rem; } .referral-list li a { color: var(--ink); border-bottom: 1px solid transparent; } .referral-list li a:hover { border-color: var(--accent); color: var(--accent); } /* ---- Referral tree --------------------------------------------------------- */ .tree-page { padding-block: clamp(1.8rem, 4vw, 3rem); } .tree-page h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); } .back-link { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .back-link:hover { color: var(--accent); } .tree, .tree-children { list-style: none; margin: 0; padding: 0; } .tree { margin-top: 1.5rem; } .tree-children { margin-left: clamp(1rem, 3vw, 2rem); padding-left: clamp(1rem, 3vw, 2rem); border-left: 1px solid var(--line); } .tree-node { margin: .6rem 0; } .tree-node-card { border: 1px solid var(--line); background: var(--surface); padding: .8rem 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; } .tree-meta { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } /* Atomic name / email / amount โ€” shared by tree nodes and cascade steps */ .cascade-name { font-family: var(--serif); font-size: 1.05rem; } .cascade-email { font-size: .8rem; color: var(--ink-soft); } .cascade-amount { color: var(--accent); font-size: .82rem; letter-spacing: .04em; } /* ---- Leaderboard ----------------------------------------------------------- */ .leaderboard-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: .95rem; } .leaderboard-table th { text-align: left; font-family: var(--sans); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; padding: .6rem .8rem; border-bottom: 1px solid var(--ink); } .leaderboard-table td { padding: .7rem .8rem; border-bottom: 1px solid var(--line); } .leaderboard-table td:first-child { font-family: var(--serif); } .leaderboard-table tbody tr:hover { background: var(--surface-2); } /* ---- How It Works ---------------------------------------------------------- */ .how-hero { border-bottom: 1px solid var(--line); padding: clamp(3rem, 8vw, 5.5rem) 0; } .how-hero h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); max-width: 18ch; } .how-hero-sub { max-width: 60ch; color: var(--ink-soft); font-size: 1.05rem; margin-top: 1.2rem; } .how-hero .btn { margin-top: 1.8rem; } .how-section { padding-block: clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--line); } .how-section h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } .how-section-sub { max-width: 68ch; color: var(--ink-soft); } .how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 1.5rem; } .how-step h3 { font-size: 1.25rem; margin: 1rem 0 .4rem; } .how-step p { color: var(--ink-soft); font-size: .95rem; } .step-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); color: var(--accent); } .step-icon svg { width: 22px; height: 22px; } .faq { max-width: 780px; margin-top: 1rem; } .faq details { border-top: 1px solid var(--line); padding: .3rem 0; } .faq details:last-child { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; padding: .9rem 0; font-family: var(--serif); font-size: 1.1rem; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; float: right; color: var(--ink-soft); font-family: var(--sans); } .faq details[open] summary::after { content: "\2013"; } .faq details p { color: var(--ink-soft); padding-bottom: .8rem; margin: 0; } .faq a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* Contact form (in the "How do I contact you?" FAQ answer) */ .contact-form { display: flex; flex-direction: column; max-width: 480px; padding-bottom: 1rem; } .contact-form label { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: .9rem 0 .3rem; } .contact-form label .optional { letter-spacing: .04em; text-transform: none; } .contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--sans); font-size: .95rem; } .contact-form textarea { resize: vertical; } .contact-form .btn { align-self: flex-start; margin-top: 1.1rem; } .how-cta { text-align: center; padding-block: clamp(3rem, 7vw, 5rem); } .how-cta h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); } /* ---- Cascade (how-it-works worked example + staff payout chain) ------------ */ .cascade { display: flex; align-items: stretch; gap: 0; overflow-x: auto; margin: 1.8rem 0; padding-bottom: .4rem; } .cascade-step { flex: 1 0 auto; min-width: 150px; padding: .3rem clamp(.7rem, 1.6vw, 1.2rem); position: relative; } .cascade-step + .cascade-step { border-left: 1px solid var(--line); } .cascade-role { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: .25rem 0 .7rem; min-height: 2.2em; } .cascade-step .cascade-amount { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); letter-spacing: 0; } .cascade-percent { font-size: .72rem; color: var(--ink-soft); } .cascade-step-buyer .cascade-name, .cascade-amount-buyer { color: var(--accent) !important; } .cascade-arrow { display: none; } /* Directional flow arrows for the how-it-works worked example ONLY. Deliberately separate classes from .cascade-arrow (which stays hidden) because .cascade is shared with the staff payout chain, which must keep its plain hairline dividers. Two opposed directions: referrals pass FORWARD (brass, right) while the reward pays BACK up the chain (claret, left) -- claret is the money accent everywhere else on the site, so it reads as the payout direction unlabelled. Kept deliberately quiet: hairline stroke (1.25 in the markup) + opacity, so the arrows sit under the names/amounts rather than competing with them. The wide gap also does semantic work -- it pushes the brass arrow up level with the NAMES row and the claret arrow down level with the AMOUNTS row. Dials to turn if it needs tuning: `opacity` and `gap` here, `stroke-width` in the template. */ .cascade-flow { flex: 0 0 auto; align-self: center; display: flex; flex-direction: column; gap: clamp(1.7rem, 4.5vw, 2.8rem); padding: 0 clamp(.15rem, .9vw, .55rem); opacity: .55; } .cascade-flow svg { display: block; width: clamp(26px, 3.6vw, 36px); height: 14px; } .flow-refer { color: var(--brass); } .flow-payout { color: var(--accent); } .cascade-paid { margin-top: .4rem; font-size: .74rem; color: var(--brass); } .cascade-log-payout { display: inline-block; margin-top: .4rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent); } /* ---- Staff dashboard ------------------------------------------------------- */ .staff-dashboard { padding-block: clamp(1.8rem, 4vw, 3rem); } .staff-dashboard > h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: .5rem; } .staff-dashboard > .muted a { color: var(--accent); } .staff-stats { margin: 1.5rem 0; } .car-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; margin: 1.5rem 0; } .car-summary-card { border: 1px solid var(--line); background: var(--surface); color: inherit; padding: 1.2rem 1.3rem; transition: box-shadow .25s, transform .25s; } .car-summary-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .car-summary-address { font-family: var(--serif); font-size: 1.15rem; } .car-summary-address .muted { font-family: var(--sans); font-size: .72rem; letter-spacing: .06em; } .car-summary-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0; font-size: .88rem; align-items: center; } .car-summary-stats { display: flex; gap: 1.2rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .tag-sold, .tag-inactive { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .5rem; border: 1px solid var(--accent); color: var(--accent); } .tag-inactive { border-color: var(--sold); color: var(--sold); } .buyer-chain-card, .root-chain-card { border: 1px solid var(--line); background: var(--surface); padding: clamp(1.3rem, 3vw, 2rem); margin: 1.5rem 0; } .buyer-chain-card h2, .root-chain-card h2 { font-size: 1.3rem; } .buyer-chain-card .staff-search { margin: 1rem 0 1.4rem; } .root-chain-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .8rem; margin-bottom: 1rem; } .root-chain-meta { display: flex; gap: 1.2rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); } .payout-pdf-link { margin-top: 1.2rem; } /* ---- Legal / account pages ------------------------------------------------- */ .legal, .account-page { max-width: 760px; padding: clamp(2rem, 5vw, 3.5rem) var(--pad); margin: 0 auto; } .legal h1, .account-page h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); } .legal h2, .account-page h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; } .legal-updated { color: var(--ink-soft); font-size: .85rem; } .legal ul { padding-left: 1.2rem; } .legal li { margin: .3rem 0; } .legal a, .account-page a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .account-links { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .1rem; } .account-links li { border-top: 1px solid var(--line); padding: .7rem 0; } .account-links li:last-child { border-bottom: 1px solid var(--line); } .display-name-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; margin: .3rem 0 1rem; } .display-name-field { flex: 1 1 240px; } .display-name-form label { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .35rem; } .display-name-form input { width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--sans); font-size: .95rem; } .display-name-form .btn { flex: 0 0 auto; } /* ---- Auth pages (django-allauth, rendered inside our chrome) --------------- */ .auth-body main { max-width: 420px; margin: clamp(2.5rem, 7vw, 5rem) auto; padding: 0 var(--pad); } .auth-body main h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: 1.2rem; } .auth-body main p { color: var(--ink-soft); font-size: .95rem; } .auth-body form { display: flex; flex-direction: column; gap: .3rem; margin: 1.2rem 0; } .auth-body label { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: .7rem; } .auth-body input { width: 100%; padding: .75rem .85rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--sans); font-size: .98rem; } .auth-body button, .auth-body [type="submit"] { margin-top: 1.3rem; font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; padding: .9rem 1.7rem; border: 1px solid var(--ink); background: var(--ink); color: var(--ground); cursor: pointer; transition: background .2s, border-color .2s; } .auth-body button:hover, .auth-body [type="submit"]:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .auth-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .auth-body ul { padding-left: 1.1rem; } /* --- Item of the Month hero ------------------------------------------------ */ /* Full-bleed band, two halves. The photo half stays white because product photos are shot on white -- see _hero.html for the full reasoning. */ .hero { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); background: var(--surface); } .hero-text { background: var(--hero-tint); padding-block: clamp(2.5rem, 6vw, 4.5rem); padding-inline: clamp(1.5rem, 6vw, 4rem); display: flex; flex-direction: column; justify-content: center; } .hero-eyebrow { color: var(--accent); letter-spacing: .18em; font-size: .72rem; margin: 0 0 1.2rem; } .hero-brand { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 .2rem; } .hero-title { font-family: var(--serif); font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.05; margin: 0 0 1.2rem; /* Supplier titles run long ("Speedrock Re-Nylon Ambra Orange Nylon Leather Smartphone Holder Pouch Bag"), which at hero size swamps the band and pushes the price and CTA out of view. Cap at three lines; the CTA goes to the listing, where the full title is shown in full. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hero-price { font-size: 1.4rem; margin: 0 0 .3rem; } .hero-reward { color: var(--accent); margin: 0 0 1.8rem; } .hero-cta { align-self: flex-start; } .hero-photo { background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .hero-photo img { width: 100%; height: 100%; max-height: 30rem; object-fit: contain; } .hero-photo .hero-placeholder { max-height: 16rem; opacity: .55; } /* ---- Mobile nav (hamburger) ------------------------------------------------ */ /* Deliberately ABOVE the Responsive section: a base rule appearing later in the file beats a media-query rule of equal specificity, which is how the hero silently failed to stack on mobile (PLAN ยง11 point 112a). Keep 700px in sync with the