/* Shared styles for the public-facing surfaces (per-dealer mini-site, cross-dealer Marketplace) - loaded alongside theme.css, never instead of it. Structural reference for the mini-site's hero-search-then-grid pattern and card shape came from an early, now-superseded mockup (racing green/serif) - every color/font here is theme.css's current tokens (lime/white/black, Space Grotesk/Inter/Space Mono), not that mockup's. */ .public-page { max-width: 1100px; margin: 0 auto; } .public-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; } .public-header-brand { display: flex; align-items: center; gap: 10px; } /* Item 4: dealer's own header logo, a small deliberate bump from 36px - this is the PRIMARY brand mark on a dealer's own mini-site page. */ .public-header-logo { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: contain; background: var(--paper); } .public-header-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); } /* Item 4: Motifiti's own wordmark, scoped to .public-header-brand only - this is the Marketplace's own header (marketplace_landing.html/ marketplace_vehicle.html put Motifiti's brand-icon+name directly inside .public-header-brand, unlike _public_header.html's mini-site header, where .public-header-brand wraps the DEALER's logo/name and Motifiti's own brand-icon sits in the separate .public-header-powered "Powered by" tag instead - so this rule never touches that smaller, secondary mark, nor the admin sidebar's own .brand-icon). Small, deliberate bump from the shared 14px .brand-icon default. */ .public-header-brand .brand-icon { height: 18px; margin-right: 6px; } .public-header-brand .public-header-name { font-size: 1.15rem; } .public-header-powered { font-size: var(--font-size-small); color: var(--grey); } /* Item: visible logged-in state on public pages - a real, always-visible link on marketplace_vehicle.html/_public_header.html (neither has a hamburger menu to hide it in, unlike marketplace_landing.html's own .public-menu-item use of this same identity link). */ .public-header-account { display: flex; align-items: center; gap: 10px; } .public-header-account-link { font-size: var(--font-size-small); color: var(--ink); text-decoration: none; font-weight: 600; } .public-header-account-link:hover { color: var(--lime-deep); } .lime-mark { color: var(--lime-deep); font-weight: 600; } /* Marketplace landing's top-right menu - a hamburger toggle revealing a dropdown, not an always-visible row (a real correction: the first cut of this was a cluttered always-visible row, against the stated no- clutter philosophy). .public-menu-item itself is a light-background equivalent of the sidebar's .nav-item/.soon-label pair, which is styled specifically for the dark sidebar (--sidebar-muted/--sidebar- faint) and would read wrong here, not reused directly. */ .public-menu-wrap { position: relative; } .public-menu-toggle { background: none; border: none; padding: 6px; cursor: pointer; color: var(--ink); display: flex; align-items: center; border-radius: var(--radius-sm); } .public-menu-toggle:hover { background: var(--paper); } .public-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; display: flex; flex-direction: column; gap: 2px; min-width: 160px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); } /* Same [hidden]-vs-class-selector specificity tie as #search-clear-btn above - display:flex on the class beats the UA [hidden] rule on source order, so the panel stayed visible despite `hidden` being set. Caught live. */ .public-menu[hidden] { display: none; } .public-menu-item { font-size: var(--font-size-small); color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: var(--radius-sm); } .public-menu-item.disabled { color: var(--grey); cursor: not-allowed; } .public-menu-item:not(.disabled):hover { background: var(--paper); color: var(--lime-deep); } .public-menu-soon { margin-left: auto; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey); } .public-hero { padding: 40px 0 28px; max-width: 640px; } .public-hero h1 { font-size: 1.9rem; line-height: 1.15; margin: 0; } .public-hero p { margin: 12px 0 0; color: var(--grey); font-size: var(--font-size-body); } .public-search-row { margin-top: 24px; display: flex; gap: 8px; max-width: 480px; position: relative; } .public-search-row input { flex: 1; margin: 0; } /* theme.css's .btn-secondary sets its own `display`, which ties the native [hidden] attribute selector on specificity and wins on source order (theme.css loads after the UA stylesheet) - caught live: the Clear button stayed visible despite the `hidden` attribute being present. This ID+attribute selector outranks .btn-secondary's class selector regardless of load order. */ #search-clear-btn[hidden] { display: none; } .public-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); max-height: 320px; overflow-y: auto; display: none; } .public-search-results:not(:empty) { display: block; } .public-search-result { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-size: var(--font-size-small); } .public-search-result:last-child { border-bottom: none; } .public-search-result:hover { background: var(--row-hover); } .public-search-result-thumb { width: 40px; height: 32px; border-radius: var(--radius-sm); object-fit: cover; background: var(--thumb-placeholder); flex-shrink: 0; } .public-inventory-head { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 0 20px; } .public-inventory-head h2 { font-size: 1.2rem; margin: 0; } .public-inventory-head span { color: var(--grey); font-size: var(--font-size-small); } .public-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .public-vcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: block; } .public-vcard:hover { border-color: var(--lime-deep); } .public-vcard-photo { height: 150px; background: var(--thumb-placeholder); } .public-vcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .public-vcard-body { padding: 12px 14px 14px; } .public-vcard-name { font-size: 0.92rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .public-vcard-sub { color: var(--grey); font-size: var(--font-size-label); margin-top: 2px; } .public-vcard-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; } .public-vcard-price { font-family: 'Space Mono', monospace; font-size: var(--font-size-body); color: var(--ink); font-weight: 700; } /* Marketplace's own LIST rows (Slice 5) - deliberately distinct from .public-vcard above rather than reused, per the confirmed grid-for- mini-site / list-for-Marketplace split. */ .public-listing-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 10px; } .public-listing-row:hover { border-color: var(--lime-deep); } /* Single thumbnail, row-sized - the list previously showed no photo at all. */ .public-listing-photos { width: 88px; height: 56px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; } .public-listing-photos img { width: 100%; height: 100%; object-fit: cover; display: block; } .public-listing-main { flex: 1; min-width: 0; } /* One line, truncated - not wrapped. The row has no responsive stacking breakpoint, so .public-listing-main's real width on a narrow/mobile viewport is squeezed by the fixed-width photo/price/dealer-logo columns sharing the same flex row - caught live: a heading like "2010 Volkswagen Tiguan" wrapped across 2-3 lines there, wasting vertical space every row pays for. */ .public-listing-heading { font-size: 0.92rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Item 1 redesign: engine_cc/fuel_type/transmission as an icon row - shared by both the Marketplace list row and the mini-site grid card (same class names on both templates, one rule covers both) - mirrors _public_vehicle_detail.html's own .vd-icon-row, just smaller since this repeats per row/card rather than once on a detail page. */ .public-listing-engine-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 3px; color: var(--grey); font-size: var(--font-size-label); } .public-listing-icon-item { display: inline-flex; align-items: center; gap: 3px; } .public-listing-icon-item .icon { width: 13px; height: 13px; } /* Item 2: usage_condition trails the same engine/condition line as plain text, not an icon - it's a category label, not a gauge-style spec. */ .public-listing-condition { color: var(--grey); } .public-listing-stats { font-size: var(--font-size-label); color: var(--grey); margin-top: 2px; } .public-listing-price { font-family: 'Space Mono', monospace; font-size: var(--font-size-body); font-weight: 700; color: var(--ink); white-space: nowrap; } /* Item 4: small, deliberate bump from 32px. */ .public-listing-dealer-logo { width: 38px; height: 38px; border-radius: var(--radius-sm); object-fit: contain; background: var(--paper); flex-shrink: 0; } .public-listing-dealer-fallback { font-size: var(--font-size-label); color: var(--grey); flex-shrink: 0; max-width: 100px; text-align: right; } /* Item 2: all text sits on one side of the thumbnail, price as the FINAL line - unconditional now, not just the narrow-viewport fallback fixed last round (confirmed live at every real width, not only mobile). Photo stays order:0 (first, its own column); everything else wraps onto a second line together: price + dealer logo share it. */ .public-listing-row { flex-wrap: wrap; row-gap: 6px; } .public-listing-main { flex: 1 1 calc(100% - 102px); } .public-listing-price { order: 3; flex: 1 1 auto; margin-top: 2px; } .public-listing-dealer-logo, .public-listing-dealer-fallback { order: 4; } /* Item 3: filter groups now sit above the search bar, each with its own helper label - a real "All" chip in both groups (theme.css's existing, previously-unused .filter-chip/.filter-chip.active pair) makes "no filter" an explicit, visible choice rather than an implied one. */ .public-filter-group { margin-top: 16px; } .public-filter-group .public-filter-row { margin-top: 6px; } .public-filter-label { font-size: var(--font-size-small); color: var(--grey); font-weight: 500; } /* Marketplace's own filter row - location .filter-chip toggles plus min/max price inputs, all combined with the search box into one request to /marketplace/search (see marketplace_landing.html's own script). */ .public-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .public-filter-row input[type=number] { width: 150px; margin: 0; } /* Item 5: sort select sits in the same flex row as the price-bucket chips - theme.css's generic `select { width: 100% }` would otherwise force it onto its own line inside a wrapping flex row. */ .public-sort-select { width: auto; min-width: 170px; margin: 0; } /* Same [hidden]-vs-class-selector fix as .public-menu/.vd-contact-panel - .public-filter-row's own display:flex beats the native [hidden] rule on specificity, so the Custom price row stayed visible by default. */ #custom-price-row[hidden] { display: none; } .public-close-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-small); color: var(--grey); margin: 14px 0; } .public-close-link:hover { color: var(--black); } /* _public_vehicle_detail.html reuses vehicle_detail.html's markup/classes for its read-view, but those classes' styles live in vehicle_detail.html's own