/* =========================================================================== Droply Motors — stylesheet --------------------------------------------------------------------------- GENERATED from mockup/droply-motors-mockup.html. Do not hand-edit: regenerate if the mockup changes. DIVERGED FROM THE MOCKUP — regenerating blindly will REVERT product changes made since the port. Re-apply these by hand, or re-do them in the generator: - the Compare feature was removed entirely (header button, card tool, detail-rail CTA, click handler, translations, .tool.on) - the questionnaire's first open is delayed and made cancellable - questionnaire: scrim uses the --ink token, selected-state contrast fixed, welcome mark carries the Motors marine field Declarations are the mockup's own, untouched — only selectors were rewritten. Every rule is scoped under .dm. app.css and app.tailwind.css load globally, and this sheet styles .btn / .card / .panel / .tab / .badge / .chip / .field / .control / .price / .photo, all of which exist there too. Direction comes from , which App.razor renders from the app's culture cookie — the same mechanism the Marketplace uses. Motors has no language state of its own. The questionnaire's open state DOES stay on the scope root (.dm.cf-open), since that is page state rather than app state. Tokens are space-separated rgb triplets, as in the parent app: rgb(var(--primary) / .12). rgba(var(--x), .12) is invalid and dies silently. =========================================================================== */ /* =========================================================================== Droply Motors — static mockup --------------------------------------------------------------------------- Tokens are lifted verbatim from the Droply application's wwwroot/app.css and tailwind.config.js. This mockup deliberately commits to the product's single light palette rather than adapting to the viewer's theme: it exists to show the real brand surface, and a dark inversion would be showing something the product is not. Every colour is therefore painted explicitly from a token so the page holds on any host background. Like the parent app these are SPACE-SEPARATED rgb triplets — write rgb(var(--primary) / 0.12). rgba(var(--x), .12) is invalid and silently dies. =========================================================================== */ .dm { --primary: 28 177 201; /* #1cb1c9 */ --primary-dark: 23 154 175; /* #179aaf */ --orange: 249 115 22; --violet: 139 92 246; --success: 22 163 74; --danger: 220 38 38; /* Ink is the Motors navy (#0B1325), the colour of the /platforms Motors card and the Motors dashboards, rather than a generic near-black (it was slate-900). Buttons and icons don't wear it at full strength: --ink-soft secondary-button labels (12.8:1 on white) --icon default icons on light surfaces (7.4:1) --primary-ink teal for text and icons on light surfaces (6.2:1); the brand #1cb1c9 itself is only 2.4:1 against white. */ --ink: 11 19 37; --ink-soft: 36 50 77; /* #24324d */ --icon: 74 86 105; /* #4a5669 */ --primary-ink: 8 107 124; /* #086b7c */ --muted: 100 116 139; --line: 226 232 240; --surface: 255 255 255; --soft: 248 250 252; --page: 244 247 251; /* The one automotive-only addition to the palette: a deep marine field for the search console. Reads as premium and technical without introducing a new hue — it is the brand's own ink pushed toward the primary. */ --field-1: #0b1622; --field-2: #101e2e; --field-3: #0d2430; --shadow-sm: 0 1px 2px rgb(var(--ink) / .05); --shadow-soft: 0 22px 55px -28px rgb(28 177 201 / .22); --shadow-card: 0 28px 80px -32px rgb(var(--ink) / .18); --r-md: .75rem; --r-lg: 1rem; --r-xl: 1.25rem; --r-2xl: 1.5rem; --r-3xl: 2rem; --page-max: 1320px; } .dm *, .dm *::before, .dm *::after { box-sizing: border-box; } .dm { margin: 0; font-family: 'Manrope', 'Segoe UI', Tahoma, Arial, sans-serif; color: rgb(var(--ink)); background: radial-gradient(circle at top right, rgb(var(--primary) / .10), transparent 30%), radial-gradient(circle at bottom left, rgb(var(--orange) / .07), transparent 28%), rgb(var(--page)); background-attachment: fixed; -webkit-font-smoothing: antialiased; } .dm h1, .dm h2, .dm h3, .dm h4, .dm p, .dm figure { margin: 0; } .dm h1, .dm h2, .dm h3 { text-wrap: balance; } .dm ul { margin: 0; padding: 0; list-style: none; } .dm svg { display: block; max-width: 100%; } .dm button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } .dm a { color: inherit; text-decoration: none; } /* textarea too: browsers give it a monospace face by default, which is what the listing page's message box was typing in. */ .dm input, .dm select, .dm textarea { font: inherit; color: inherit; } .dm :focus-visible { outline: 2px solid rgb(var(--primary)); outline-offset: 2px; border-radius: 6px; } .dm .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; user-select: none; flex: none; } .dm .fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* ── Layout primitives ──────────────────────────────────────────────────── */ .dm .page { max-width: var(--page-max); margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 640px) { .dm .page { padding-inline: 2rem; } } .dm .row { display: flex; align-items: center; } .dm .between { display: flex; align-items: center; justify-content: space-between; } .dm .stack { display: flex; flex-direction: column; } .dm .wrap { flex-wrap: wrap; } .dm .grow { flex: 1 1 auto; min-width: 0; } .dm .g1 { gap: .25rem } .dm .g2 { gap: .5rem } .dm .g3 { gap: .75rem } .dm .g4 { gap: 1rem } .dm .g5 { gap: 1.25rem } .dm .g6 { gap: 1.5rem } .dm .g8 { gap: 2rem } .dm .band { padding-block: 3rem; } @media (min-width: 1024px) { .dm .band { padding-block: 3.5rem; } } .dm .band-tight { padding-block-start: 0; } .dm .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .dm .h-sec { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; } @media (min-width: 768px) { .dm .h-sec { font-size: 1.75rem; } } .dm .sub { margin-top: .35rem; color: rgb(var(--muted)); font-size: .9375rem; } /* Uppercase micro-label. This is the mockup's "technical register" — it does the work a second, monospaced typeface would normally do, without importing a face the brand doesn't own. */ .dm .eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--primary)); } .dm .muted { color: rgb(var(--muted)); } .dm .t-xs { font-size: .75rem } .dm .t-sm { font-size: .8125rem } .dm .t-base { font-size: .875rem } .dm .fw7 { font-weight: 700 } .dm .fw8 { font-weight: 800 } .dm .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Prices are the most-scanned element on every automotive screen, so they get their own treatment rather than a generic bold. Tabular figures keep a column of prices optically aligned down a grid. */ .dm .price { font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .dm .cur { font-size: .72em; font-weight: 700; color: rgb(var(--muted)); margin-inline-start: .25rem; } .dm .card { background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / .85); border-radius: var(--r-2xl); box-shadow: var(--shadow-sm); } .dm .panel { background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / .85); border-radius: var(--r-2xl); box-shadow: var(--shadow-soft); } .dm .pad { padding: 1.25rem; } @media (min-width: 768px) { .dm .pad { padding: 1.5rem; } } .dm .rule { height: 1px; background: rgb(var(--line) / .85); } /* ── Buttons ────────────────────────────────────────────────────────────── */ .dm .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.75rem; padding-inline: 1.25rem; border: 1px solid transparent; border-radius: var(--r-lg); font-size: .875rem; font-weight: 700; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; } .dm .btn:active { transform: scale(.98); } .dm .btn-lg { height: 3.25rem; padding-inline: 1.75rem; font-size: .9375rem; border-radius: var(--r-xl); } .dm .btn-sm { height: 2.25rem; padding-inline: .875rem; font-size: .8125rem; border-radius: var(--r-md); } .dm .btn-block { width: 100%; } .dm .btn-primary { background: linear-gradient(135deg, rgb(var(--primary)), rgb(var(--primary-dark))); color: #fff; box-shadow: 0 18px 40px -22px rgb(var(--primary) / .75); } .dm .btn-primary:hover { box-shadow: 0 22px 48px -20px rgb(var(--primary) / .85); } /* Secondary actions stay light: white surface, soft navy label, slate icon. Hover signals in teal, at the accessible teal (the brand teal as text on white would be 2.4:1). */ .dm .btn-secondary { background: rgb(var(--surface)); color: rgb(var(--ink-soft)); border-color: rgb(var(--line)); box-shadow: var(--shadow-sm); } .dm .btn-secondary .material-symbols-outlined { color: rgb(var(--icon)); transition: color .15s ease; } .dm .btn-secondary:hover { border-color: rgb(var(--primary) / .5); background: rgb(var(--primary) / .04); color: rgb(var(--primary-ink)); } .dm .btn-secondary:hover .material-symbols-outlined { color: rgb(var(--primary-ink)); } .dm .btn-ghost { color: rgb(var(--muted)); } .dm .btn-ghost:hover { background: rgb(var(--primary) / .07); color: rgb(var(--primary-ink)); } .dm .btn-white { background: #fff; color: rgb(var(--primary-ink)); } .dm .icon-btn { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; width: 2.5rem; border-radius: var(--r-md); color: rgb(var(--icon)); transition: background .15s ease, color .15s ease; position: relative; } .dm .icon-btn:hover { background: rgb(var(--primary) / .08); color: rgb(var(--primary-ink)); } /* ── Badges ─────────────────────────────────────────────────────────────── */ .dm .badge { display: inline-flex; align-items: center; gap: .3rem; height: 1.5rem; padding-inline: .55rem; border-radius: 999px; font-size: .6875rem; font-weight: 800; white-space: nowrap; background: rgb(var(--soft)); color: rgb(var(--muted)); border: 1px solid rgb(var(--line)); } .dm .badge .material-symbols-outlined { font-size: .875rem; } /* Label colours are the deeper shade of each hue (2026-09-22): the brand teal and orange as text on their own tint measured ~2.2:1 and ~2.6:1, and the badges read as faint. These clear 4.5:1 on white and on the tints. */ .dm .b-verified { background: rgb(var(--success) / .10); color: rgb(21 128 61); border-color: rgb(var(--success) / .25); } .dm .b-dealer { background: rgb(var(--violet) / .10); color: rgb(109 40 217); border-color: rgb(var(--violet) / .25); } .dm .b-new { background: rgb(var(--primary) / .10); color: rgb(var(--primary-ink)); border-color: rgb(var(--primary) / .25); } .dm .b-featured { background: rgb(var(--orange) / .12); color: rgb(194 65 12); border-color: rgb(var(--orange) / .28); } .dm .dot-badge { position: absolute; top: -.15rem; right: -.15rem; min-width: 1.15rem; height: 1.15rem; padding-inline: .25rem; border-radius: 999px; background: rgb(var(--primary)); color: #fff; font-size: .6875rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 6px rgb(var(--primary) / .45); } /* ── Form controls ──────────────────────────────────────────────────────── */ .dm .field { display: flex; flex-direction: column; gap: .375rem; min-width: 0; } .dm .label { font-size: .75rem; font-weight: 700; color: rgb(var(--muted)); } .dm .control { height: 2.75rem; width: 100%; padding-inline: .875rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--r-md); font-size: .875rem; font-weight: 600; appearance: none; transition: border-color .15s ease, box-shadow .15s ease; } /* A textarea keeps its rows: the fixed control height made the listing page's four-row message box a single 44px line. */ .dm textarea.control { height: auto; min-height: 6.5rem; padding-block: .625rem; line-height: 1.5; resize: vertical; } /* 16px on phones: iOS zooms the whole page into any field under 16px when it is focused, and does not zoom back out. */ @media (max-width: 767px) { .dm .control { font-size: 1rem; } } .dm .control::placeholder { color: rgb(var(--muted) / .75); font-weight: 500; } .dm .control:focus { outline: none; border-color: rgb(var(--primary)); box-shadow: 0 0 0 3px rgb(var(--primary) / .14); } .dm select.control { padding-inline-end: 2.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1.15rem; background-position: right .7rem center; } .dm .check { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem; margin-inline: -.5rem; border-radius: var(--r-md); cursor: pointer; font-size: .8125rem; font-weight: 600; } .dm .check:hover { background: rgb(var(--primary) / .06); } .dm .check input { accent-color: rgb(var(--primary)); width: 1rem; height: 1rem; flex: none; } .dm .check-n { margin-inline-start: auto; font-size: .6875rem; font-weight: 700; color: rgb(var(--muted)); } .dm .seg { display: inline-flex; padding: .25rem; gap: .25rem; background: rgb(var(--soft)); border: 1px solid rgb(var(--line)); border-radius: var(--r-lg); } .dm .seg button { border-radius: .625rem; height: 2rem; padding-inline: .875rem; font-size: .8125rem; font-weight: 700; color: rgb(var(--muted)); transition: background .15s ease, color .15s ease; } .dm .seg button:hover { color: rgb(var(--ink)); } .dm .seg button[aria-pressed="true"] { background: rgb(var(--surface)); color: rgb(var(--primary)); box-shadow: var(--shadow-sm); } /* ── Header ─────────────────────────────────────────────────────────────── */ /* One bar (rebuilt 2026-09-24). It was a 3px gradient strip, a bar and a row of tabs repeating the bar's links, 7.4rem tall on a phone. Now: desktop (1024px+) logo · Home, Buy a car, For dealers · saved, messages, language, account below 1024px logo · saved, messages · menu; the links, language and account live in the menu (.mnav) --dm-top-h is the bar's height. --dm-top-offset is how much of it is ON SCREEN: the same height, or 0 while the bar is tucked away on a phone (below). Anything sticky under the bar, and every anchor jump, reads those two rather than a number, so none of them can drift from the bar again (the old header had 7.25rem, 7.6rem and 8.5rem written into four different rules). */ .dm { --dm-top-h: 3.5rem; --dm-top-offset: var(--dm-top-h); --dm-ease: cubic-bezier(.2, .8, .2, 1); } @media (min-width: 1024px) { .dm { --dm-top-h: 4.25rem; } } /* No will-change and no resting transform: either one would make .top the containing block of the menu's fixed scrim (see the .screen note below). */ .dm .top { position: sticky; top: 0; z-index: 50; transition: transform .3s var(--dm-ease); } .dm .hdr { position: relative; z-index: 1; background: rgb(255 255 255 / .86); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid rgb(var(--line) / .8); transition: background-color .2s ease, box-shadow .2s ease; } /* Lifted off the page once it scrolls (droply-motors-header.js). */ html[data-dm-scrolled] .dm .hdr { background: rgb(255 255 255 / .94); box-shadow: 0 12px 32px -20px rgb(var(--ink) / .3); } .dm .hdr-in { height: calc(var(--dm-top-h) - 1px); display: flex; align-items: center; gap: .5rem; } .dm .brand { display: inline-flex; align-items: center; gap: .625rem; flex: none; border-radius: var(--r-md); } .dm .brand-logo { display: block; flex: none; width: 2.125rem; height: 2.125rem; border-radius: 50%; transition: transform .25s var(--dm-ease); } .dm .brand:hover .brand-logo { transform: rotate(-8deg); } @media (min-width: 1024px) { .dm .brand-logo { width: 2.375rem; height: 2.375rem; } } /* Stacked, like the Motors dashboard's brand: the name, and the vertical as a small tracked label under it. Half the width of "Droply | Motors" on one line, which is what lets a phone keep the logo, the name and three buttons at 320px. Both words are Latin in both languages. */ .dm .wordmark { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; } .dm .wm-name { font-size: 1.125rem; font-weight: 800; letter-spacing: -.03em; color: rgb(var(--ink)); } .dm .vertical { margin-top: .2rem; font-size: .625rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--primary-ink)); } @media (min-width: 1024px) { .dm .wm-name { font-size: 1.25rem; } .dm .vertical { font-size: .6875rem; } } /* Desktop links: plain text, the current section underlined in the brand teal along the bar's bottom edge. */ .dm .nav { display: none; } @media (min-width: 1024px) { .dm .nav { display: flex; align-self: stretch; align-items: stretch; gap: .25rem; margin-inline-start: 1.75rem; } } .dm .nav a { position: relative; display: inline-flex; align-items: center; padding-inline: .875rem; font-size: .9063rem; font-weight: 700; color: rgb(var(--icon)); transition: color .15s ease; } .dm .nav a::after { content: ""; position: absolute; inset-inline: .875rem; bottom: -1px; height: 2px; border-radius: 2px; background: rgb(var(--primary)); transform: scaleX(0); transition: transform .22s var(--dm-ease); } .dm .nav a:hover, .dm .nav a[aria-current="page"] { color: rgb(var(--ink)); } .dm .nav a[aria-current="page"]::after { transform: scaleX(1); } .dm .nav a:focus-visible { outline-offset: -.5rem; } .dm .hdr-acts { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; flex: none; } .dm .hdr .icon-btn { border-radius: 999px; } .dm .hdr .icon-btn[aria-current="page"] { background: rgb(var(--primary) / .1); color: rgb(var(--primary-ink)); } .dm .hdr .dot-badge { top: .125rem; right: auto; inset-inline-end: .0625rem; box-shadow: 0 0 0 2px #fff; } .dm .hdr-lang { width: auto; gap: .375rem; padding-inline: .75rem; font-size: .8125rem; font-weight: 700; } .dm .hdr-lang .material-symbols-outlined { font-size: 1.25rem; } .dm .hdr-acct { align-items: center; gap: .5rem; margin-inline-start: .375rem; padding-inline-start: .75rem; border-inline-start: 1px solid rgb(var(--line)); } .dm .hdr-acct .material-symbols-outlined { font-size: 1.05rem; } /* Desktop-only parts of the bar, and the menu button that stands in for them below 1024px. */ .dm .hdr-desk { display: none; } @media (min-width: 1024px) { .dm .hdr-desk { display: inline-flex; } .dm .hdr-menu-btn { display: none; } } .dm .hdr-menu-btn .material-symbols-outlined { font-size: 1.6rem; } /* 320px, the narrowest phone this site supports: a buyer's bar holds the logo, the name and three buttons. */ @media (max-width: 359px) { .dm .hdr-in { gap: .25rem; } .dm .hdr .icon-btn { width: 2.375rem; } } /* ── Phones: the bar tucks away on the way down ───────────────────────── droply-motors-header.js sets data-dm-hdr="hidden" on after a deliberate scroll down and removes it on the first scroll up, near the top, while the menu is open, and when the keyboard moves into the bar. The bar stays sticky and in flow, so the page never jumps; the transform only slides it out. The extra 1.5rem takes its shadow along with it. The questionnaire (.cf-open) always keeps it: language is switched from the bar, and the dialog is centred under it. */ @media (max-width: 1023.98px) { html[data-dm-hdr="hidden"] .dm:not(.cf-open) { --dm-top-offset: 0px; } html[data-dm-hdr="hidden"] .dm:not(.cf-open) .top:not(.is-menu-open) { transform: translateY(calc(-100% - 1.5rem)); } } /* A Tab into the page shows the bar at once, before focus moves (see the script): a bar still sliding in would be off screen when focus arrives. */ html[data-dm-hdr-instant] .dm .top, html[data-dm-hdr-instant] .dm .mobile-bar { transition: none; } /* ── The phone menu ─────────────────────────────────────────────────────── */ .dm .mnav-scrim { position: fixed; inset: 0; background: rgb(var(--ink) / .32); animation: mnav-fade .2s ease both; } .dm .mnav { position: absolute; inset-inline: 0; top: 100%; z-index: 1; max-height: calc(100vh - var(--dm-top-h)); max-height: calc(100dvh - var(--dm-top-h)); overflow-y: auto; overscroll-behavior: contain; background: rgb(var(--surface)); border-bottom: 1px solid rgb(var(--line)); border-radius: 0 0 var(--r-2xl) var(--r-2xl); box-shadow: 0 28px 48px -28px rgb(var(--ink) / .4); animation: mnav-in .24s var(--dm-ease) both; } @media (min-width: 1024px) { .dm .mnav, .dm .mnav-scrim { display: none; } } @keyframes mnav-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } } @keyframes mnav-fade { from { opacity: 0; } to { opacity: 1; } } .dm .mnav-list { display: flex; flex-direction: column; gap: .125rem; padding-block: .75rem; } .dm .mnav-link { display: flex; align-items: center; gap: .875rem; min-height: 3rem; padding-inline: .875rem; border-radius: var(--r-lg); font-size: 1rem; font-weight: 700; color: rgb(var(--ink-soft)); transition: background .15s ease, color .15s ease; } .dm .mnav-link .material-symbols-outlined { font-size: 1.375rem; color: rgb(var(--icon)); } .dm .mnav-link:hover { background: rgb(var(--primary) / .06); } .dm .mnav-link[aria-current="page"] { background: rgb(var(--primary) / .1); color: rgb(var(--primary-ink)); } .dm .mnav-link[aria-current="page"] .material-symbols-outlined { color: rgb(var(--primary-ink)); } .dm .mnav-end { margin-inline-start: auto; font-size: .875rem; font-weight: 700; color: rgb(var(--muted)); } .dm .mnav-foot { display: flex; flex-direction: column; gap: .625rem; padding-block: 1rem 1.25rem; border-top: 1px solid rgb(var(--line) / .8); } .dm .mnav-foot:empty { display: none; } .dm .mnav-auth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; } @media (prefers-reduced-motion: reduce) { .dm .top, .dm .hdr, .dm .nav a::after, .dm .brand-logo { transition: none; } .dm .mnav, .dm .mnav-scrim { animation: none; } } /* ── Hero / search console ──────────────────────────────────────────────── */ .dm .hero { position: relative; isolation: isolate; overflow: hidden; border-radius: 0 0 var(--r-3xl) var(--r-3xl); background: radial-gradient(ellipse 120% 80% at 80% 0%, rgb(var(--primary) / .22), transparent 60%), radial-gradient(ellipse 90% 70% at 5% 100%, rgb(var(--violet) / .18), transparent 55%), linear-gradient(160deg, var(--field-1), var(--field-2) 55%, var(--field-3)); color: #fff; padding-block: 3rem 3.5rem; } @media (min-width: 1024px) { .dm .hero { padding-block: 4.25rem 4rem; } } /* Faint measured grid — the technical note, held at 4% so it reads as texture and never as decoration. */ .dm .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 75%); } .dm .hero h1 { font-size: clamp(2rem, 5vw, 3.15rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; margin-top: .75rem; } .dm .hero .lede { color: rgb(226 232 240 / .85); font-size: 1rem; max-width: 36rem; margin-top: .85rem; line-height: 1.6; } .dm .stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2rem; } .dm .stat-n { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .dm .stat-l { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(148 163 184); margin-top: .15rem; } /* The console gets the visual weight a hero photo would normally take. On a car marketplace the first screen's job is search, not seduction. */ .dm .console { background: rgb(255 255 255 / .97); border: 1px solid rgb(255 255 255 / .6); border-radius: var(--r-2xl); box-shadow: 0 32px 70px -30px rgb(3 12 20 / .7); padding: 1.25rem; color: rgb(var(--ink)); margin-top: 2rem; } @media (min-width: 768px) { .dm .console { padding: 1.5rem; } } .dm .console-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .dm .console-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1024px) { .dm .console-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } } .dm .console-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; } .dm .console-actions .btn { flex: 1 1 12rem; } /* ── Generated vehicle photography ──────────────────────────────────────── */ .dm .photo { position: relative; aspect-ratio: 4/3; overflow: hidden; background: linear-gradient(170deg,#eef2f7,#dfe6ee 60%,#d3dce6); } .dm .photo.wide { aspect-ratio: 16/9; } .dm .photo svg { width: 100%; height: 100%; transition: transform .35s ease; } .dm .photo-n { position: absolute; bottom: .625rem; left: .625rem; display: inline-flex; align-items: center; gap: .3rem; height: 1.5rem; padding-inline: .5rem; border-radius: 999px; background: rgb(var(--ink) / .6); backdrop-filter: blur(6px); color: #fff; font-size: .6875rem; font-weight: 700; } .dm .photo-n .material-symbols-outlined { font-size: .875rem; } /* ── Car card ───────────────────────────────────────────────────────────── */ /* Not the general marketplace's square product tile. A product tile is a photo plus a name; a car has to answer six questions before anyone clicks — price, what, how old, how far, what it drinks, where. Hence the 4:3 frame, the price above the title, and a spec strip the product tile has no concept of. */ .dm .cc { position: relative; display: flex; flex-direction: column; background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / .85); border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } @media (hover: hover) { .dm .cc:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: rgb(var(--primary) / .35); } .dm .cc:hover .photo svg { transform: scale(1.035); } } .dm .cc-media { position: relative; } .dm .cc-badges { position: absolute; top: .625rem; left: .625rem; display: flex; flex-wrap: wrap; gap: .35rem; max-width: calc(100% - 4rem); } .dm .cc-tools { position: absolute; top: .625rem; right: .625rem; display: flex; flex-direction: column; gap: .35rem; } .dm .tool { height: 2.125rem; width: 2.125rem; border-radius: 999px; display: grid; place-items: center; background: rgb(255 255 255 / .92); backdrop-filter: blur(6px); color: rgb(var(--muted)); box-shadow: 0 2px 8px rgb(var(--ink) / .14); transition: color .15s ease, transform .15s ease, background .15s ease; } .dm .tool .material-symbols-outlined { font-size: 1.125rem; } .dm .tool:hover { color: rgb(var(--primary)); transform: scale(1.06); } .dm .tool.saved { color: rgb(var(--danger)); } /* A 40px heart on touch screens (34px is a near miss for a thumb). After the base rule, which it has to follow to win. */ @media (max-width: 767px), (pointer: coarse) { .dm .tool { height: 2.5rem; width: 2.5rem; } } .dm .cc-body { padding: .875rem 1rem 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .dm .cc-price { display: flex; align-items: baseline; gap: .35rem; } .dm .cc-price .price { font-size: 1.3rem; } .dm .cc-title { font-size: .9375rem; font-weight: 700; line-height: 1.35; } .dm .cc-year { color: rgb(var(--muted)); font-weight: 700; } .dm .specs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .78125rem; font-weight: 600; color: rgb(var(--muted)); } .dm .specs > span { display: inline-flex; align-items: center; gap: .25rem; } .dm .specs .material-symbols-outlined { font-size: .95rem; opacity: .8; } .dm .sdot { width: 3px; height: 3px; border-radius: 999px; background: rgb(var(--muted) / .5); } .dm .cc-foot { margin-top: auto; padding-top: .625rem; border-top: 1px solid rgb(var(--line) / .7); display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .75rem; font-weight: 600; color: rgb(var(--muted)); } .dm .cc-foot .material-symbols-outlined { font-size: .95rem; } .dm .grid-cars { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); } @media (max-width: 419px) { .dm .grid-cars { grid-template-columns: 1fr; } } /* Rails swipe on small screens with snap points — better than a cramped 2-up grid when the task is browsing rather than comparing. */ .dm .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15.5rem, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; } .dm .rail > * { scroll-snap-align: start; } @media (min-width: 1024px) { .dm .rail { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0,1fr)); overflow: visible; } } /* ── Tiles ──────────────────────────────────────────────────────────────── */ .dm .tiles { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 480px) { .dm .tiles { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (min-width: 768px) { .dm .tiles { grid-template-columns: repeat(5, minmax(0,1fr)); } } .dm .tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.125rem .75rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / .85); border-radius: var(--r-xl); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .dm .tile:hover { transform: translateY(-2px); border-color: rgb(var(--primary) / .4); box-shadow: var(--shadow-soft); } /* No third-party marques ship here — a monogram from the make's own initials keeps the grid on-brand and clear of trademarked assets. */ .dm .mono { height: 2.75rem; width: 2.75rem; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(140deg, rgb(var(--primary) / .14), rgb(var(--violet) / .10)); font-size: .9375rem; font-weight: 800; letter-spacing: -.02em; border: 1px solid rgb(var(--line)); } .dm .tile-n { font-size: .8125rem; font-weight: 700; text-align: center; } .dm .tile-c { font-size: .6875rem; font-weight: 700; color: rgb(var(--muted)); } .dm .btile { display: flex; flex-direction: column; gap: .35rem; padding: 1rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / .85); border-radius: var(--r-xl); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .dm .btile:hover { transform: translateY(-2px); border-color: rgb(var(--primary) / .4); box-shadow: var(--shadow-soft); } .dm .btile-art { height: 3.25rem; display: grid; place-items: center; color: rgb(var(--icon)); transition: color .18s ease; } .dm .btile:hover .btile-art { color: rgb(var(--primary-ink)); } .dm .btile-art svg { height: 100%; width: auto; } .dm .budgets { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 900px) { .dm .budgets { grid-template-columns: repeat(4, minmax(0,1fr)); } } .dm .budget { position: relative; overflow: hidden; padding: 1.25rem; border-radius: var(--r-xl); background: linear-gradient(150deg, rgb(var(--primary) / .10), rgb(var(--surface))); border: 1px solid rgb(var(--line) / .85); transition: transform .18s ease, box-shadow .18s ease; } .dm .budget:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); } .dm .budget-r { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; } .dm .budget-m { margin-top: .25rem; font-size: .75rem; font-weight: 700; color: rgb(var(--muted)); } .dm .budget-a { position: absolute; bottom: 1rem; right: 1rem; color: rgb(var(--primary)); } /* ── Results screen ─────────────────────────────────────────────────────── */ .dm .results { display: grid; gap: 1.5rem; align-items: start; } @media (min-width: 1024px) { .dm .results { grid-template-columns: 17rem minmax(0,1fr); } } .dm .rail-filters { display: none; } @media (min-width: 1024px) { .dm .rail-filters { display: block; position: sticky; top: calc(var(--dm-top-h) + 1.25rem); } } .dm .fgroup { border-bottom: 1px solid rgb(var(--line) / .8); } .dm .fgroup:last-child { border-bottom: 0; } .dm .fgroup > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 0; cursor: pointer; list-style: none; font-size: .8125rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; } .dm .fgroup > summary::-webkit-details-marker { display: none; } .dm .fgroup > summary .material-symbols-outlined { font-size: 1.125rem; color: rgb(var(--muted)); transition: transform .2s ease; } .dm .fgroup[open] > summary .material-symbols-outlined { transform: rotate(180deg); } .dm .fbody { padding-bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; } .dm .fpair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .dm .rhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; } .dm .rcount { font-size: .875rem; font-weight: 700; color: rgb(var(--muted)); } .dm .rcount b { color: rgb(var(--primary)); font-variant-numeric: tabular-nums; } /* Active-filter chips. The most underrated part of a results page: without them a filter buried three groups deep in a collapsed accordion is invisible, and the shopper blames the marketplace for having no cars. */ .dm .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .dm .chip { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding-inline: .75rem; border-radius: 999px; background: rgb(var(--primary) / .09); border: 1px solid rgb(var(--primary) / .22); color: rgb(var(--primary)); font-size: .78125rem; font-weight: 700; } .dm .chip button { display: grid; place-items: center; opacity: .75; padding: 0; } .dm .chip button:hover { opacity: 1; } .dm .chip button .material-symbols-outlined { font-size: 1rem; } .dm .chip.clear { color: rgb(var(--muted)); background: transparent; border-color: rgb(var(--line)); } .dm .mobile-bar { position: sticky; top: var(--dm-top-offset); z-index: 30; transition: top .3s var(--dm-ease); display: flex; gap: .5rem; padding-block: .75rem; background: rgb(var(--page) / .92); backdrop-filter: blur(10px); } @media (min-width: 1024px) { .dm .mobile-bar { display: none; } } .dm .mobile-bar > * { flex: 1; } /* ── Detail screen ──────────────────────────────────────────────────────── */ /* minmax(0,1fr), not the implicit `auto` track: an auto column grows to its widest child's min-content, and the photo strip (six 88px thumbnails in a scroller) made the whole page 596px wide on a 360px phone. */ .dm .detail { display: grid; gap: 1.5rem; align-items: start; grid-template-columns: minmax(0,1fr); } @media (min-width: 1024px) { .dm .detail { grid-template-columns: minmax(0,1fr) 21rem; gap: 2rem; } } .dm .detail-rail { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 1024px) { .dm .detail-rail { position: sticky; top: calc(var(--dm-top-h) + 1.25rem); } } /* Below the two-column layout, the contact panel moves up to sit right under the car's title: on a phone, "Show phone number" was at the very bottom, after the specifications and the description. The main column's blocks join the page grid (display: contents on a plain div) so the rail can be ordered between them. Its price is the headline's, so the headline's own copy steps aside while the two sit together. */ @media (max-width: 1023px) { .dm .detail > .d-main { display: contents; } .dm .d-gallery { order: 1; } .dm .d-head { order: 2; } .dm .detail-rail { order: 3; } .dm .d-specs { order: 4; } .dm .d-desc { order: 5; } .dm .d-head .d-price { display: none; } } /* A tablet has the width for the contact and seller panels side by side. */ @media (min-width: 640px) and (max-width: 1023px) { .dm .detail-rail { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; } } .dm .gallery { position: relative; border-radius: var(--r-2xl); overflow: hidden; background: #e8edf3; } .dm .gnav { position: absolute; top: 50%; transform: translateY(-50%); height: 2.75rem; width: 2.75rem; border-radius: 999px; display: grid; place-items: center; background: rgb(255 255 255 / .92); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgb(var(--ink) / .18); color: rgb(var(--icon)); transition: color .15s ease; } .dm .gnav:hover { color: rgb(var(--primary-ink)); } .dm .gnav.prev { left: .75rem } .dm .gnav.next { right: .75rem } .dm .gidx { position: absolute; bottom: .75rem; right: .75rem; height: 1.75rem; padding-inline: .625rem; border-radius: 999px; display: inline-flex; align-items: center; background: rgb(var(--ink) / .62); color: #fff; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); /* "1 / 6" reads "6 / 1" inside an Arabic page otherwise. The arrows and the counter's side are mirrored in the RTL block near the end of the file. */ direction: ltr; } .dm .thumbs { display: flex; gap: .5rem; margin-top: .625rem; overflow-x: auto; padding-bottom: .25rem; } .dm .thumb { flex: none; width: 5.5rem; border: 2px solid transparent; border-radius: var(--r-md); overflow: hidden; background: #e8edf3; opacity: .7; transition: border-color .15s ease, opacity .15s ease; } .dm .thumb:hover { opacity: 1; } .dm .thumb.on { border-color: rgb(var(--primary)); opacity: 1; } /* Mouse drag-to-scroll (droply-motors-thumbs.js). The grab cursor only where there is a real mouse; touch keeps its native swipe. is-dragging is set only while a button is held and the pointer has moved. */ @media (hover: hover) and (pointer: fine) { .dm .thumbs { cursor: grab; } .dm .thumbs.is-dragging, .dm .thumbs.is-dragging .thumb { cursor: grabbing; } } .dm .thumbs.is-dragging { user-select: none; -webkit-user-select: none; } .dm .thumb img { -webkit-user-drag: none; } /* Breadcrumb links are 18px of text; the padding makes them a 34px tap target and the negative margin gives the space straight back, so nothing moves. */ .dm .crumbs a { padding-block: .5rem; margin-block: -.5rem; } .dm .d-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; } @media (min-width: 768px) { .dm .d-title { font-size: 1.875rem; } } .dm .d-price { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: rgb(var(--primary)); font-variant-numeric: tabular-nums; } @media (min-width: 768px) { .dm .d-price { font-size: 2.25rem; } } /* Cards and icons, not a spreadsheet. Twelve rows of a two-column table is how a spec sheet stops being read. */ .dm .specgrid { display: grid; gap: .625rem; grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 640px) { .dm .specgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } } /* Four only from 1280px: between 1024 and 1280 the 21rem rail leaves the main column about 590px, and four cells there cut "12,000 km" to "12,000…". */ @media (min-width: 1280px) { .dm .specgrid { grid-template-columns: repeat(4, minmax(0,1fr)); } } .dm .scell { display: flex; align-items: center; gap: .625rem; padding: .75rem .875rem; background: rgb(var(--soft)); border: 1px solid rgb(var(--line) / .8); border-radius: var(--r-lg); } .dm .scell-i { height: 2rem; width: 2rem; flex: none; border-radius: .625rem; display: grid; place-items: center; background: rgb(var(--primary) / .10); color: rgb(var(--primary)); } .dm .scell-i .material-symbols-outlined { font-size: 1.05rem; } .dm .scell-l { font-size: .6875rem; font-weight: 700; color: rgb(var(--muted)); text-transform: uppercase; letter-spacing: .04em; } .dm .scell-v { font-size: .875rem; font-weight: 700; margin-top: .1rem; } .dm .features { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 640px) { .dm .features { grid-template-columns: repeat(3, minmax(0,1fr)); } } .dm .feature { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; } .dm .feature .material-symbols-outlined { font-size: 1.05rem; color: rgb(var(--success)); } .dm .avatar { height: 3rem; width: 3rem; border-radius: var(--r-lg); flex: none; display: grid; place-items: center; background: linear-gradient(140deg, rgb(var(--primary) / .18), rgb(var(--violet) / .12)); font-weight: 800; } /* ── Sell flow ──────────────────────────────────────────────────────────── */ .dm .stepper { display: flex; align-items: center; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding-block: .25rem; } .dm .stepper::-webkit-scrollbar { display: none; } .dm .step { display: flex; align-items: center; gap: .5rem; flex: none; } .dm .step-d { height: 1.75rem; width: 1.75rem; border-radius: 999px; display: grid; place-items: center; font-size: .75rem; font-weight: 800; background: rgb(var(--surface)); color: rgb(var(--muted)); border: 1px solid rgb(var(--line)); } .dm .step.now .step-d { background: rgb(var(--primary)); color: #fff; border-color: rgb(var(--primary)); box-shadow: 0 0 0 4px rgb(var(--primary) / .14); } .dm .step.done .step-d { background: rgb(var(--success) / .12); color: rgb(var(--success)); border-color: rgb(var(--success) / .35); } .dm .step.done .step-d .material-symbols-outlined { font-size: 1rem; } .dm .step-l { font-size: .78125rem; font-weight: 700; color: rgb(var(--muted)); white-space: nowrap; } .dm .step.now .step-l { color: rgb(var(--ink)); } .dm .step-bar { width: 1.5rem; height: 2px; border-radius: 999px; background: rgb(var(--line)); flex: none; } @media (min-width: 768px) { .dm .step-bar { width: 2.5rem; } } .dm .step-bar.done { background: rgb(var(--success) / .4); } @media (max-width: 767px) { .dm .step:not(.now) .step-l { display: none; } } .dm .formgrid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0,1fr)); } @media (max-width: 639px) { .dm .formgrid { grid-template-columns: 1fr; } } .dm .span2 { grid-column: 1 / -1; } .dm .paint { height: 2.25rem; width: 2.25rem; border-radius: 999px; border: 2px solid rgb(var(--line)); box-shadow: inset 0 -6px 12px -8px rgb(var(--ink) / .5); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .dm .paint:hover { transform: scale(1.08); } .dm .paint.on { border-color: rgb(var(--primary)); box-shadow: 0 0 0 3px rgb(var(--primary) / .2), inset 0 -6px 12px -8px rgb(var(--ink) / .5); } .dm .preview-split { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .dm .preview-split { grid-template-columns: 20rem minmax(0,1fr); } } /* ── Sell band & footer ─────────────────────────────────────────────────── */ .dm .sellband { position: relative; overflow: hidden; border-radius: var(--r-3xl); padding: 2.25rem 1.5rem; background: linear-gradient(135deg, rgb(var(--primary)), rgb(var(--primary-dark))); color: #fff; } @media (min-width: 768px) { .dm .sellband { padding: 3rem; } } .dm .sellband::after { content: ""; position: absolute; top: -30%; right: -10%; width: 26rem; height: 26rem; border-radius: 999px; background: rgb(255 255 255 / .09); pointer-events: none; } .dm .sellband h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 800; letter-spacing: -.03em; } .dm .sellband p { margin-top: .625rem; color: rgb(255 255 255 / .86); max-width: 32rem; line-height: 1.6; } .dm .sellsteps { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.5rem; } .dm .sellstep { display: flex; align-items: center; gap: .625rem; font-size: .875rem; font-weight: 700; } .dm .sellstep-n { height: 1.75rem; width: 1.75rem; border-radius: 999px; display: grid; place-items: center; background: rgb(255 255 255 / .18); font-size: .75rem; font-weight: 800; } .dm footer { margin-top: 3rem; border-top: 1px solid rgb(var(--line)); background: rgb(255 255 255 / .6); } .dm .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.75rem; font-size: .8125rem; color: rgb(var(--muted)); font-weight: 600; } .dm .foot-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; } .dm .foot-nav a { display: inline-flex; align-items: center; min-height: 2.25rem; transition: color .15s ease; } .dm .foot-nav a:hover { color: rgb(var(--primary-ink)); } @media (max-width: 639px) { .dm .foot { flex-direction: column; align-items: flex-start; gap: .5rem; padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); } } /* ── Screens ────────────────────────────────────────────────────────────── */ .dm .screen { display: none; } /* The page's entrance fades and does NOT move. A transform here — even `transform: none` held by an `animation-fill-mode` — makes `.screen` the containing block for every `position: fixed` DESCENDANT, and a modal inside the page is exactly that. The dialogs were centring on the 3000px-tall article instead of the viewport, which put them off the bottom of the screen (measured 2026-09-23: top 1229px in an 807px viewport). Opacity cannot create a containing block, so this cannot come back. Any new page-level entrance must obey the same rule. `backwards`, NOT `both`, and that is the second half of the same bug. A FILLED animation leaves the element a STACKING CONTEXT for good, and a stacking context is a ceiling: no descendant can paint above the sticky header, whatever z-index it asks for. The scrim stopped short of the header and the card's top edge ran under the subnav — "cut from the top", as the user put it. `backwards` applies the first frame before the animation starts and holds nothing after it, so the page is an ordinary box again the moment it has faded in. Verified by hit-testing the header while a dialog is open: the scrim answers, not the nav. */ .dm .screen.active { display: block; animation: rise .28s ease backwards; } @keyframes rise { from { opacity: 0; } to { opacity: 1; } } /* ── "What are you looking for?" category grid ──────────────────────────── */ /* Same primitives as the make and body-type tiles below it — surface, hairline border, --r-xl radius, the same lift on hover — so it reads as part of that set rather than as a new component. The one thing that sets it apart is that nothing here is clickable yet, and the styling has to say so honestly. */ /* The section that follows this one keeps its own top padding, so this one drops its bottom padding rather than the next one dropping its top. That way the rhythm matches the rest of the page without editing a section that was already there. */ .dm .band-flush-end { padding-block-end: 0; } /* Column counts are picked so the two wide cards tile without leaving gaps. Seventeen cards, the first and the last double-width. At SEVEN columns with those two spanning three, the grid is exactly 3 + 15 + 3 = 21 cells — three full rows of seven that open and close on a wide card: row 1 [ Cars ×3 ] [ ] [ ] [ ] [ ] row 2 [ ] [ ] [ ] [ ] [ ] [ ] [ ] row 3 [ ] [ ] [ ] [ ] [ Reviews ×3 ] Seven is the only count that divides cleanly: six leaves one card over into a fourth row, and eight leaves three cells empty. */ .dm .cat-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 560px) { .dm .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .dm .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1180px) { .dm .cat-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } } .dm .cat-card { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 1.05rem 1rem; min-height: 8.25rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / .85); border-radius: var(--r-xl); /* Neither a link nor a button: the cursor must not promise navigation that does not exist yet. */ cursor: default; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } /* Deliberately gentler than the make tiles. A slight lift reads as "alive and coming"; the full tile hover — lift plus a primary-coloured border — reads as "click me", which would be a promise this section cannot keep yet. */ @media (hover: hover) { .dm .cat-card:hover { transform: translateY(-2px); border-color: rgb(var(--line)); box-shadow: var(--shadow-soft); } } /* The two cards carrying sub-options take a wider cell. The span changes with the column count so each layout still fills its rows: full width at two and three columns, a double cell at four, and a triple at seven — which is what produces the three clean rows. */ .dm .cat-card-wide { grid-column: span 2; } @media (min-width: 560px) { .dm .cat-card-wide { grid-column: span 3; } } @media (min-width: 900px) { .dm .cat-card-wide { grid-column: span 2; } } @media (min-width: 1180px) { .dm .cat-card-wide { grid-column: span 3; } } /* Across three columns the sub-options move beside the name instead of under it, and the row centres. Stacked, the content would hug the leading edge and leave most of a 500px card empty. Same elements, same styling — only the axis changes, and only on the widest layout. */ @media (min-width: 1180px) { .dm .cat-card-wide { flex-direction: row; align-items: center; gap: 1rem; } .dm .cat-card-wide .cat-name { margin-top: 0; } .dm .cat-card-wide .cat-subs { margin-inline-start: auto; } } .dm .cat-icon { height: 2.5rem; width: 2.5rem; border-radius: var(--r-md); display: grid; place-items: center; background: linear-gradient(140deg, rgb(var(--primary) / .14), rgb(var(--violet) / .09)); color: rgb(var(--primary)); border: 1px solid rgb(var(--line)); } .dm .cat-icon .material-symbols-outlined { font-size: 1.4rem; } .dm .cat-name { font-size: .875rem; font-weight: 700; line-height: 1.35; margin-top: auto; } /* Corner badge. Violet is the one accent in the palette not already carrying a meaning on a card, so "soon" takes it without colliding with Featured (orange), New (primary) or Verified (green). */ .dm .cat-soon { position: absolute; top: .85rem; inset-inline-end: .85rem; display: inline-flex; align-items: center; height: 1.375rem; padding-inline: .5rem; border-radius: 999px; font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgb(var(--violet) / .11); color: rgb(var(--violet)); border: 1px solid rgb(var(--violet) / .25); white-space: nowrap; } /* Sub-options live inside the Cars card and are never promoted to cards of their own. */ .dm .cat-subs { display: flex; flex-wrap: wrap; gap: .4rem; } .dm .cat-sub { display: inline-flex; align-items: center; gap: .3rem; height: 1.85rem; padding-inline: .7rem; border-radius: 999px; background: rgb(var(--soft)); border: 1px solid rgb(var(--line)); color: rgb(var(--muted)); font-size: .75rem; font-weight: 700; } .dm .cat-sub .material-symbols-outlined { font-size: .9rem; opacity: .75; } /* The icon needs breathing room from the badge on a single-column card. */ @media (max-width: 379px) { .dm .cat-card { min-height: 7.75rem; } .dm .cat-soon { font-size: .5625rem; height: 1.25rem; } } /* ── RTL ────────────────────────────────────────────────────────────────── */ /* This mockup was authored LTR-first. Below are the physical properties that could not be written logically at the time, flipped for Arabic; everything else already uses inset-inline-* / margin-inline-* and needs no override. */ [dir="rtl"] .dm .accent { background: linear-gradient(to left, rgb(var(--primary)), rgb(var(--violet)), rgb(var(--orange))); } [dir="rtl"] .dm select.control { background-position: left .7rem center; } [dir="rtl"] .dm .cc-badges { left: auto; right: .625rem; } [dir="rtl"] .dm .cc-tools { right: auto; left: .625rem; } [dir="rtl"] .dm .photo-n { left: auto; right: .625rem; } [dir="rtl"] .dm .dot-badge { right: auto; left: -.15rem; } [dir="rtl"] .dm .budget-a { right: auto; left: 1rem; } [dir="rtl"] .dm .gidx { right: auto; left: .75rem; } [dir="rtl"] .dm .gnav.prev { left: auto; right: .75rem; } [dir="rtl"] .dm .gnav.next { right: auto; left: .75rem; } /* Chevrons and arrows are directional glyphs — mirror the glyph, never the control carrying it. */ [dir="rtl"] .dm .gnav .material-symbols-outlined, [dir="rtl"] .dm .crumb-sep, [dir="rtl"] .dm .arrow-glyph { transform: scaleX(-1); } /* ── Gallery controls on a phone (2026-09-24) ───────────────────────────── The arrows sat at the photo's sides, halfway down, which on a phone is the car itself: at 360px they covered a door and a wheel (user report, with a screenshot). Under 768px the two arrows and the counter become one small dark bar in the bottom corner, over the ground rather than the car, and the photo swipes as well (MotorsListingPage). From 768px up .gctl is display: contents, so the three keep their places above unchanged. In Arabic the bar sits in the bottom-left corner and reads right to left. */ .dm .gctl { display: contents; } @media (max-width: 767px) { .dm .gctl { position: absolute; bottom: .625rem; inset-inline-end: .625rem; display: flex; align-items: center; gap: .125rem; padding: .1875rem; border-radius: 999px; background: rgb(var(--ink) / .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .dm .gctl .gnav { position: static; transform: none; height: 2.25rem; width: 2.25rem; background: transparent; box-shadow: none; backdrop-filter: none; color: #fff; } .dm .gctl .gnav:hover { color: #fff; background: rgb(255 255 255 / .14); } .dm .gctl .gnav .material-symbols-outlined { font-size: 1.35rem; } [dir="rtl"] .dm .gctl .gnav .material-symbols-outlined { transform: scaleX(-1); } .dm .gctl .gidx { position: static; height: auto; padding-inline: .125rem; background: none; backdrop-filter: none; } } /* ── Car finder questionnaire ───────────────────────────────────────────── */ /* Built from this mockup's own primitives: the sheet's slide-up motion, the same radius / shadow / button tokens, the same option-tile language as the filter rail. No new colours — every value resolves to a token defined at :root. */ /* The `hidden` attribute is only `display: none` from the UA stylesheet, so ANY author `display` rule outranks it — and .cf-modal / .cf-panel / .cf-error all set `display: flex`. Without this, hiding a panel silently does nothing and the welcome and question panels stack on top of each other. */ .dm [hidden] { display: none !important; } .dm .cf-scrim { position: fixed; inset: 0; z-index: 70; /* The --ink triplet, previously inlined here as rgb(15 23 42 / .5) — the only hardcoded colour in the questionnaire. Identical pixels; now it answers to the token like every other rule in this block. */ background: rgb(var(--ink) / .5); backdrop-filter: blur(3px); animation: cf-fade .2s ease both; /* A drag that starts on the scrim must not scroll the page behind it. The scroll lock is on (droply-motors-finder.js); this also covers phones that ignore it. */ touch-action: none; } @keyframes cf-fade { from { opacity: 0 } to { opacity: 1 } } /* While the questionnaire is open the site header rises above the scrim. Language is switched from the header and nowhere else — there is no switcher inside the dialog — so that control has to stay reachable. */ .dm.cf-open .top { z-index: 72; transition: none; } .dm.cf-open .nav, .dm.cf-open .brand { opacity: .45; pointer-events: none; } @media (min-width: 768px) { .dm.cf-open .cf-scrim { top: var(--cf-top, var(--dm-top-h)); } } /* A centred dialog at every width, phones included (user request 2026-09-21; it used to be a bottom sheet under 768px). It is centred in the space UNDER the site header, not in the whole window: the header stays above the scrim while the finder is open, so a dialog centred in the window would slide under it on a short screen. --cf-top is the header's measured height, set by droply-motors-finder.js while the dialog is open; --dm-top-h (the bar's height) stands in for the moment before it runs. The max-height keeps a 1rem margin above and below, and the panel scrolls inside it. The vh lines are the fallback for browsers without dvh. */ .dm .cf-modal { position: fixed; z-index: 71; left: 50%; top: calc(var(--cf-top, var(--dm-top-h)) + (100vh - var(--cf-top, var(--dm-top-h))) / 2); top: calc(var(--cf-top, var(--dm-top-h)) + (100dvh - var(--cf-top, var(--dm-top-h))) / 2); transform: translate(-50%, -50%); width: min(40rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100vh - var(--cf-top, var(--dm-top-h)) - 2rem)); max-height: min(44rem, calc(100dvh - var(--cf-top, var(--dm-top-h)) - 2rem)); display: flex; flex-direction: column; background: rgb(var(--surface)); border-radius: var(--r-3xl); box-shadow: var(--shadow-card); animation: cf-pop .24s cubic-bezier(.32,.72,0,1) both; outline: none; } @keyframes cf-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.985) } to { opacity: 1; transform: translate(-50%, -50%) scale(1) } } .dm .cf-panel { padding: 1.5rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; min-height: 0; /* A question with many answers on a short phone scrolls here, inside the dialog, never the page behind it. */ overflow-y: auto; overscroll-behavior: contain; } @media (min-width: 768px) { .dm .cf-panel { padding: 2rem; } } .dm .cf-welcome { text-align: center; align-items: center; padding-block: 2.5rem 2rem; } @media (min-width: 768px) { .dm .cf-welcome { padding-block: 3rem 2.5rem; } } .dm .cf-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; } @media (min-width: 768px) { .dm .cf-title { font-size: 1.6rem; } } .dm .cf-lede { color: rgb(var(--muted)); font-size: .9375rem; line-height: 1.65; max-width: 30rem; } .dm .cf-start { min-width: 12rem; } .dm .cf-welcome-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; } .dm .cf-step { font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--primary)); } /* Viewport clips, track slides. `clip` not `hidden` — `hidden` would make this a scroll container and trap the page's sticky elements. */ /* The answers scroll here when a question does not fit (a long list on a short phone), so the step label above and Back / Next below stay on screen. overflow-y: auto turns the declared overflow-x: clip into hidden, which clips the sliding track just the same. MotorsFinder scrolls it back to the top when the question changes. */ .dm .cf-viewport { overflow-x: clip; margin-inline: -.25rem; padding-inline: .25rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .dm .cf-track { display: flex; align-items: flex-start; transition: transform .34s cubic-bezier(.32,.72,0,1); will-change: transform; } .dm .cf-q { flex: 0 0 100%; min-width: 100%; display: flex; flex-direction: column; gap: .75rem; } /* An off-screen panel must not stretch the dialog to its own height. */ .dm .cf-q[aria-hidden="true"] { height: 0; overflow: hidden; } .dm .cf-hint { font-size: .8125rem; font-weight: 600; color: rgb(var(--muted)); } .dm .cf-hint-full { color: rgb(var(--orange)); font-weight: 700; } .dm .cf-options { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 560px) { .dm .cf-options { grid-template-columns: repeat(3, minmax(0,1fr)); } } .dm .cf-options-chips { display: flex; flex-wrap: wrap; grid-template-columns: none; } .dm .cf-options-pair { grid-template-columns: repeat(2, minmax(0,1fr)); } .dm .cf-option { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: .875rem; min-height: 5rem; text-align: start; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--r-xl); font-size: .8125rem; font-weight: 700; color: rgb(var(--ink)); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; } .dm .cf-option:hover:not(:disabled) { border-color: rgb(var(--primary) / .45); background: rgb(var(--primary) / .04); } .dm .cf-option:active:not(:disabled) { transform: scale(.985); } .dm .cf-option-icon { font-size: 1.3rem; color: rgb(var(--muted)); transition: color .15s ease; } .dm .cf-option-label { line-height: 1.3; } /* The selected state carries on four channels — tint, border, ring, tick — so it survives a glance and never depends on colour alone. */ .dm .cf-option.is-on { background: rgb(var(--primary) / .09); border-color: rgb(var(--primary)); box-shadow: 0 0 0 3px rgb(var(--primary) / .14); /* Ink, not primary. Primary on this 9% wash measures ~2.36:1, and the label is 13px/700 — not large text, so it needs 4.5:1. Ink on the same wash is ~15:1. None of the four channels named above is given up: the label's colour was never one of them. */ color: rgb(var(--ink)); } /* The glyph is ~21px, so it answers to the 3:1 non-text threshold rather than 4.5:1. primary-dark clears that at ~3.08:1 where primary does not, and keeps the icon visibly branded rather than flattening it to ink alongside the label. */ .dm .cf-option.is-on .cf-option-icon { color: rgb(var(--primary-dark)); } .dm .cf-tick { position: absolute; top: .6rem; inset-inline-end: .6rem; font-size: 1.1rem; color: rgb(var(--primary)); opacity: 0; transform: scale(.7); transition: opacity .15s ease, transform .15s ease; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .dm .cf-option.is-on .cf-tick { opacity: 1; transform: scale(1); } /* Locked, not hidden — the greyed option is what teaches the three-item cap. */ .dm .cf-option.is-locked { opacity: .45; cursor: not-allowed; } .dm .cf-chip { flex-direction: row; align-items: center; gap: .45rem; min-height: 0; padding: .6rem .9rem; border-radius: 999px; flex: 0 1 auto; } .dm .cf-chip .cf-option-icon { font-size: 1.05rem; } .dm .cf-chip .cf-tick { position: static; margin-inline-start: .1rem; font-size: 1rem; width: 0; overflow: hidden; transition: width .15s ease, opacity .15s ease; } .dm .cf-chip.is-on .cf-tick { width: 1rem; } .dm .cf-option-lg { min-height: 6.5rem; justify-content: center; } .dm .cf-option-lg .cf-option-icon { font-size: 1.65rem; } .dm .cf-option-lg .cf-option-label { font-size: .9375rem; } /* Budget slider */ .dm .brange { display: flex; flex-direction: column; gap: .5rem; padding-block: .5rem; } .dm .brange-readout { display: flex; align-items: baseline; gap: .35rem; } .dm .brange-value { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: rgb(var(--primary)); } @media (min-width: 768px) { .dm .brange-value { font-size: 2.35rem; } } .dm .brange-cur { font-size: .875rem; font-weight: 700; color: rgb(var(--muted)); } .dm .brange-caption { font-size: .8125rem; font-weight: 600; color: rgb(var(--muted)); } .dm .brange-input { -webkit-appearance: none; appearance: none; width: 100%; height: 1.5rem; background: transparent; margin: .25rem 0; /* Inherits the document direction, so the thumb travels right-to-left in Arabic. The fill gradient is flipped to match. */ direction: inherit; cursor: pointer; touch-action: pan-y; } /* The fill is a gradient stop on the track rather than a second element: a sibling cannot target ::-webkit-slider-runnable-track, and this is the one technique that renders identically in WebKit and Gecko. */ .dm .brange-input::-webkit-slider-runnable-track { height: .5rem; border-radius: 999px; background: linear-gradient(var(--brange-dir, to right), rgb(var(--primary)) 0 var(--brange-fill, 50%), rgb(var(--line)) var(--brange-fill, 50%) 100%); } .dm .brange-input::-moz-range-track { height: .5rem; border-radius: 999px; background: linear-gradient(var(--brange-dir, to right), rgb(var(--primary)) 0 var(--brange-fill, 50%), rgb(var(--line)) var(--brange-fill, 50%) 100%); } .dm .brange-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 1.5rem; width: 1.5rem; margin-top: -.5rem; border-radius: 999px; background: rgb(var(--surface)); border: 3px solid rgb(var(--primary)); box-shadow: 0 3px 10px -2px rgb(var(--primary) / .55); transition: transform .12s ease; } .dm .brange-input::-moz-range-thumb { height: 1.5rem; width: 1.5rem; border-radius: 999px; background: rgb(var(--surface)); border: 3px solid rgb(var(--primary)); box-shadow: 0 3px 10px -2px rgb(var(--primary) / .55); transition: transform .12s ease; } .dm .brange-input:active::-webkit-slider-thumb { transform: scale(1.12); } .dm .brange-input:active::-moz-range-thumb { transform: scale(1.12); } .dm .brange-input:focus { outline: none; } .dm .brange-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgb(var(--primary) / .22); } .dm .brange-input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgb(var(--primary) / .22); } .dm .brange-ends { display: flex; justify-content: space-between; font-size: .6875rem; font-weight: 700; color: rgb(var(--muted)); font-variant-numeric: tabular-nums; } .dm .cf-error { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 700; color: rgb(var(--danger)); background: rgb(var(--danger) / .07); border: 1px solid rgb(var(--danger) / .2); border-radius: var(--r-xl); padding: .6rem .8rem; } .dm .cf-error .material-symbols-outlined { font-size: 1.05rem; } .dm .cf-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .25rem; flex: none; } .dm .cf-skip { flex: none; padding-inline: .75rem; } .dm .cf-next { flex: none; min-width: 8.5rem; } .dm .cf-dots { display: flex; align-items: center; gap: .4rem; } .dm .cf-dot { height: .5rem; width: .5rem; padding: 0; border: 0; border-radius: 999px; background: rgb(var(--line)); transition: width .22s ease, background .22s ease; } .dm .cf-dot:disabled { cursor: default; } .dm .cf-dot.is-done { background: rgb(var(--primary) / .4); } /* The active dot lengthens into a capsule — legible even to a viewer who cannot separate the two tints. */ .dm .cf-dot.is-on { width: 1.35rem; background: rgb(var(--primary)); } @media (max-width: 380px) { .dm .cf-next { min-width: 7rem; padding-inline: .8rem; } .dm .cf-skip { padding-inline: .5rem; } } /* A phone on its side: the 121px header would leave the dialog too little room to show Start and Skip. The dialog takes the whole height instead, and the header drops below the scrim for as long as it is open. */ @media (max-height: 480px) { .dm.cf-open .top { z-index: 50; } .dm .cf-modal { top: 50%; max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); } .dm .cf-welcome { padding-block: 1.25rem; gap: .75rem; } } /* Priorities with no filter equivalent, echoed back on the results screen. */ .dm .cf-recap { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; font-size: .75rem; font-weight: 600; color: rgb(var(--muted)); } .dm .cf-recap .material-symbols-outlined { font-size: 1rem; color: rgb(var(--primary)); } .dm .cf-recap b { color: rgb(var(--ink)); font-weight: 700; } @media (prefers-reduced-motion: reduce) { .dm *, .dm *::before, .dm *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── Listing status: Active / Sold out ──────────────────────────────────── */ /* One small pill, the same on the card's photo and on the listing page. It sits in the photo's top corner (the sky or the showroom wall, rarely the car), carries its meaning in words as well as the dot, and is solid enough to read on any photo: white for Active, navy for Sold out. A sold car keeps its card and its page: photos, title, specifications. Its price and every way to contact the seller are gone (the server sends no price for it at all). The card keeps the same height: "Sold out" stands in the price's line at the price's size, so a grid never jumps. */ .dm .lstat { display: inline-flex; align-items: center; gap: .4rem; height: 1.5rem; padding-inline: .5rem .6rem; border-radius: 999px; font-size: .6875rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap; } .dm .lstat i { width: .5rem; height: .5rem; border-radius: 999px; flex: none; } .dm .lstat.is-active { background: rgb(255 255 255 / .95); color: rgb(var(--ink)); box-shadow: 0 1px 4px rgb(var(--ink) / .18); } .dm .lstat.is-active i { background: rgb(var(--success)); box-shadow: 0 0 0 3px rgb(var(--success) / .18); } .dm .lstat.is-sold { background: rgb(var(--ink) / .9); color: #fff; box-shadow: 0 1px 4px rgb(var(--ink) / .25); } .dm .lstat.is-sold i { background: #cbd5e1; } /* On the page rather than a photo it needs an edge of its own. */ .dm .d-head .lstat.is-active, .dm .detail-rail .lstat.is-active { box-shadow: none; border: 1px solid rgb(var(--line)); } .dm .lstat-lg { height: 1.875rem; padding-inline: .7rem .8rem; font-size: .8125rem; } .dm .lstat-lg i { width: .5625rem; height: .5625rem; } .dm .cc-price .cc-sold { color: rgb(var(--muted)); } /* "Ask for price" stands where the number would: the same line and weight, a size the words fit, and the accessible teal rather than the brand teal, which measures 2.4:1 on white. */ .dm .cc-price .cc-ask { color: rgb(var(--primary-ink)); font-size: 1.05rem; } /* New / Featured / Dealer, under the title rather than on the photo. */ .dm .cc-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: -.125rem; } /* Below 1024px the contact panel sits right under the title, which already carries the pill: one "Sold out" there, not two a few lines apart (the same rule that hides the heading's price copy in that layout). The heart keeps its end of the row. */ @media (max-width: 1023px) { .dm .d-rail-status { visibility: hidden; } } .dm .d-ask { margin-top: .75rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: rgb(var(--primary-ink)); } @media (min-width: 768px) { .dm .d-ask { font-size: 1.75rem; } } .dm .d-sold { margin-top: .75rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: rgb(var(--ink-soft)); } @media (min-width: 768px) { .dm .d-sold { font-size: 1.375rem; } } /* The listing page's main photo opens the viewer. */ .dm .photo-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .dm .photo-open:focus-visible { outline-offset: -3px; } .dm .gexpand { position: absolute; top: .75rem; right: .75rem; height: 2.25rem; width: 2.25rem; border-radius: 999px; display: grid; place-items: center; background: rgb(var(--ink) / .55); color: #fff; backdrop-filter: blur(6px); pointer-events: none; } .dm .gexpand .material-symbols-outlined { font-size: 1.2rem; } [dir="rtl"] .dm .gexpand { right: auto; left: .75rem; } /* ── Photo viewer (droply-motors-lightbox.js) ──────────────────────────── */ /* Lives on , outside .dm, so these rules are namespaced .dlb instead of scoped under .dm. Three rows: the bar, the photo, the strip. Nothing is drawn over the photo: the arrows have columns of their own beside it, and on a phone there are none (swipe). The photo keeps its own proportions (contain) and is never cropped. */ .dlb { --dlb-bg: 11 19 37; /* the Motors navy, #0B1325 */ position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; /* Solid: at 97% the page's photos ghosted through behind the car. */ background: rgb(var(--dlb-bg)); color: #fff; font-family: var(--droply-font-ui, 'Manrope', 'Segoe UI', Tahoma, Arial, sans-serif); opacity: 0; transition: opacity .2s ease; -webkit-tap-highlight-color: transparent; overscroll-behavior: contain; } .dlb.is-open { opacity: 1; } .dlb.is-closing { opacity: 0; } .dlb *, .dlb *::before, .dlb *::after { box-sizing: border-box; } .dlb button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; } .dlb .material-symbols-outlined { font-size: 1.5rem; line-height: 1; } .dlb :focus-visible { outline: 2px solid #1cb1c9; outline-offset: 2px; } .dlb-bar { display: flex; align-items: center; gap: .5rem; padding: max(.5rem, env(safe-area-inset-top)) .75rem .5rem; min-height: 3.5rem; } .dlb-count { flex: none; min-width: 3.5rem; padding-inline: .25rem; font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .85); } .dlb-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-weight: 700; color: rgb(255 255 255 / .92); text-align: center; unicode-bidi: plaintext; } .dlb-btn { flex: none; height: 2.75rem; width: 2.75rem; border-radius: 999px; display: grid; place-items: center; color: rgb(255 255 255 / .9); transition: background .15s ease, color .15s ease; } .dlb-btn:hover { background: rgb(255 255 255 / .12); color: #fff; } .dlb-body { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; } .dlb-nav { display: none; } @media (min-width: 768px) and (hover: hover) { .dlb-body { grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem; } .dlb-nav { display: grid; place-items: center; align-self: center; justify-self: center; height: 3rem; width: 3rem; border-radius: 999px; background: rgb(255 255 255 / .1); color: #fff; transition: background .15s ease, opacity .15s ease; } .dlb-nav:hover:not(:disabled) { background: rgb(255 255 255 / .2); } .dlb-nav:disabled { opacity: .25; cursor: default; } .dlb-nav .material-symbols-outlined { font-size: 1.75rem; } .dlb.is-single .dlb-nav { visibility: hidden; } } /* The glyph mirrors in Arabic, never the button (the font sets direction:ltr, so logical insets on the icon would be ignored; the buttons are grid items and follow the row's direction on their own). */ .dlb[dir="rtl"] .dlb-nav .material-symbols-outlined { transform: scaleX(-1); } .dlb-stage { position: relative; overflow: hidden; min-height: 0; touch-action: none; user-select: none; -webkit-user-select: none; } .dlb-track { display: flex; height: 100%; will-change: transform; } /* The photo is pinned to the slide's box (inset: 0) rather than centred by a grid. As a grid item its height: 100% resolved against an auto row, which grew to the photo's own height, so a wide screen drew the photo taller than the stage and the slide cropped its top and bottom (reported 2026-09-22). max-width/max-height: none undo Tailwind's img { max-width:100%; height:auto }. */ .dlb-slide { position: relative; flex: 0 0 100%; min-width: 100%; height: 100%; overflow: hidden; } .dlb-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; transform-origin: center center; opacity: 0; transition: opacity .2s ease; -webkit-user-drag: none; pointer-events: none; } .dlb-slide.is-loaded .dlb-img { opacity: 1; } .dlb-stage { cursor: zoom-in; } .dlb.is-zoomed .dlb-stage { cursor: grab; } .dlb.is-zoomed .dlb-stage:active { cursor: grabbing; } .dlb-strip { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: .625rem .75rem max(.75rem, env(safe-area-inset-bottom)); justify-content: safe center; } .dlb-strip::-webkit-scrollbar { display: none; } .dlb-thumb { flex: none; width: 4.5rem; aspect-ratio: 4 / 3; border-radius: .5rem; overflow: hidden; opacity: .5; outline: 2px solid transparent; outline-offset: 0; transition: opacity .15s ease, outline-color .15s ease; } .dlb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .dlb-thumb:hover { opacity: .85; } .dlb-thumb.on { opacity: 1; outline-color: #fff; } @media (max-width: 639px) { .dlb-thumb { width: 3.5rem; } } /* A phone on its side has no height to spare for the strip. */ @media (max-height: 480px) { .dlb-strip { display: none; } .dlb-bar { min-height: 3rem; } } @media (prefers-reduced-motion: reduce) { .dlb, .dlb-img, .dlb-thumb { transition: none !important; } } /* ── Messages (buyer side, /motors/messages) ────────────────────────────── */ /* Two columns on a desktop — the conversations and the open one — and one column on a phone, where opening a thread replaces the list (.is-open). The bubbles follow the page direction, so an Arabic reader's own messages sit where they expect them. */ .dm .msgs { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 900px) { .dm .msgs { grid-template-columns: 21rem minmax(0, 1fr); } } .dm .msgs-list { display: flex; flex-direction: column; background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / .85); border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-sm); } .dm .msgs-row { display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem; text-align: start; border-bottom: 1px solid rgb(var(--line) / .7); transition: background .15s ease; } .dm .msgs-row:last-child { border-bottom: 0; } .dm .msgs-row:hover { background: rgb(var(--soft)); } .dm .msgs-row.on { background: rgb(var(--primary) / .07); } .dm .msgs-row.unread .msgs-last { color: rgb(var(--ink)); font-weight: 700; } .dm .msgs-row-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; } .dm .msgs-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .dm .msgs-title { font-size: .875rem; font-weight: 800; } .dm .msgs-seller { font-size: .75rem; font-weight: 700; color: rgb(var(--muted)); } .dm .msgs-when { font-size: .6875rem; font-weight: 700; color: rgb(var(--muted)); flex: none; } .dm .msgs-last { font-size: .8125rem; color: rgb(var(--muted)); } .dm .msgs-dot { width: .5rem; height: .5rem; border-radius: 999px; background: rgb(var(--primary)); flex: none; } .dm .msgs-thumb { width: 3rem; height: 3rem; flex: none; border-radius: var(--r-md); overflow: hidden; background: rgb(var(--soft)); display: grid; place-items: center; color: rgb(var(--muted)); } .dm .msgs-thumb img { width: 100%; height: 100%; object-fit: cover; } .dm .msgs-thread { display: flex; flex-direction: column; min-height: 26rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / .85); border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-sm); } .dm .msgs-head { display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem; border-bottom: 1px solid rgb(var(--line) / .7); } .dm .msgs-car { display: flex; align-items: center; gap: .625rem; min-width: 0; flex: 1; } .dm .msgs-back { display: none; flex: none; padding-inline: .5rem; } .dm .msgs-body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; flex: 1; overflow-y: auto; max-height: 28rem; } .dm .msgs-empty { display: grid; place-items: center; gap: .5rem; flex: 1; padding: 3rem 1rem; color: rgb(var(--muted)); } .dm .msgs-empty .material-symbols-outlined { font-size: 2rem; } .dm .msgs-closed { padding: 1rem; border-top: 1px solid rgb(var(--line) / .7); margin: 0; } .dm .bubble-row { display: flex; } .dm .bubble-row.mine { justify-content: flex-end; } .dm .bubble { max-width: min(32rem, 82%); padding: .625rem .75rem; border-radius: var(--r-lg); font-size: .875rem; line-height: 1.55; white-space: pre-line; unicode-bidi: plaintext; background: rgb(var(--soft)); border: 1px solid rgb(var(--line) / .8); } .dm .bubble-row.mine .bubble { background: rgb(var(--primary) / .12); border-color: rgb(var(--primary) / .28); } .dm .bubble-when { display: block; margin-top: .25rem; font-size: .6875rem; font-weight: 700; color: rgb(var(--muted)); } .dm .msgs-compose { display: flex; gap: .5rem; align-items: flex-end; padding: .75rem; border-top: 1px solid rgb(var(--line) / .7); } .dm .msgs-compose .control { flex: 1; min-height: 2.75rem; height: auto; padding-block: .5rem; } .dm .msgs-compose .btn { flex: none; } /* A phone shows one at a time: the list, or the conversation it opened. */ @media (max-width: 899px) { .dm .msgs.is-open .msgs-list { display: none; } .dm .msgs-back { display: inline-flex; } .dm .msgs-body { max-height: none; } } /* ── Listing actions: Save and Share ────────────────────────────────────── */ /* At the TOP OF THE RAIL, directly above the asking price (user request 2026-09-23). They were under the gallery, where they competed with the photos and sat a screen away from the panel a buyer actually works in. Moved here they read as the listing's own toolbar: keep it, or pass it on, immediately before the two decisions that follow — the price and the call. One segmented bar rather than two loose buttons. It is a single object at the head of a column of panels, it matches the panel's surface, hairline and radius, and the divider between the halves does the work a gap would do without breaking the shape. Each half is a 48px target, above the 44px floor, and they stay side by side at every width because two words fit on the narrowest phone this site supports. */ .dm .d-acts { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: .75rem; } .dm .d-acts-sep { width: 1px; background: rgb(var(--line)); } /* The owner's view: Share alone, full width (no Save on your own car). */ .dm .d-acts.d-acts--single { grid-template-columns: 1fr; } /* The listing owner's note in place of the contact actions. */ .dm .d-owner-note { display: flex; align-items: flex-start; gap: .625rem; padding: .75rem .875rem; border-radius: var(--r-md); background: rgb(var(--primary) / .07); box-shadow: inset 0 0 0 1px rgb(var(--primary) / .2); } .dm .d-owner-note > .material-symbols-outlined { font-size: 1.25rem; color: rgb(var(--primary-ink)); flex: none; } .dm .d-owner-note p + p { margin-top: .2rem; line-height: 1.55; } .dm .ract { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding-inline: .5rem; font-size: .8125rem; font-weight: 700; color: rgb(var(--ink-soft)); transition: background .15s ease, color .15s ease; } .dm .ract .material-symbols-outlined { font-size: 1.25rem; color: rgb(var(--icon)); transition: color .15s ease, transform .15s ease; } .dm .ract:hover { background: rgb(var(--primary) / .06); color: rgb(var(--primary-ink)); } .dm .ract:hover .material-symbols-outlined { color: rgb(var(--primary-ink)); } .dm .ract:active .material-symbols-outlined { transform: scale(.92); } /* Saved reads in the heart's own colour, filled — the state is the icon, not a different button. */ .dm .ract.is-on { color: rgb(var(--danger)); background: rgb(var(--danger) / .05); } .dm .ract.is-on .material-symbols-outlined { color: rgb(var(--danger)); } .dm .ract.is-done { color: rgb(var(--success)); } .dm .ract.is-done .material-symbols-outlined { color: rgb(var(--success)); } @media (max-width: 359px) { .dm .ract { font-size: .75rem; gap: .375rem; } } /* ── Motors dialog ──────────────────────────────────────────────────────── */ /* One shape for every small decision on the public site: the sign-in prompt, the save prompt and the share panel. ── It is CENTRED, and that took a CSS fix, not a CSS rule ─────────────── `position: fixed` centres against the viewport only while no ancestor carries a transform. `.screen.active` used to hold one (an entrance that translated 6px), which silently made it the containing block: the dialog centred on a 3000px article and landed off the bottom of the window (measured 2026-09-23 — top 1229px in an 807px viewport). The entrance now fades instead, and the rule above `.screen.active` says why it must stay that way. dvh with a vh fallback because the failure this prevents is a phone in landscape clipping the buttons off the bottom. */ /* Above EVERYTHING, header included. The scrim used to sit at 90 and the sticky header at 50, which sounds right and was not: the header kept its own painted band and the card's top edge ran under the subnav, so the dialog read as cut off at the top (user report 2026-09-23, with a screenshot). A modal's scrim exists to take the page out of play — leaving a live, undimmed bar over it contradicts that. 200/201 clears the header (50), the compare tray (70–72) and the mobile bar (30), and stays under the photo lightbox (1000), which is the only thing that may cover a dialog. */ .dm .mdlg-scrim { position: fixed; inset: 0; z-index: 200; background: rgb(var(--ink) / .55); backdrop-filter: blur(6px); animation: mdlg-fade .2s ease both; } .dm .mdlg { position: fixed; z-index: 201; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(27.5rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / .9); border-radius: var(--r-2xl); box-shadow: 0 40px 90px -30px rgb(var(--ink) / .45), 0 2px 8px rgb(var(--ink) / .06); animation: mdlg-pop .22s cubic-bezier(.32,.72,0,1) both; overflow: hidden; } @keyframes mdlg-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes mdlg-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.96) } to { opacity: 1; transform: translate(-50%, -50%) scale(1) } } /* The close button floats over the header's padding rather than taking a row of its own, so the title starts at the top where the eye does. 2.25rem of visual with a 44px hit area around it. */ .dm .mdlg-x { position: absolute; top: .75rem; inset-inline-end: .75rem; z-index: 2; height: 2.25rem; width: 2.25rem; border-radius: 999px; display: grid; place-items: center; color: rgb(var(--icon)); background: rgb(255 255 255 / .75); border: 1px solid rgb(var(--line) / .8); backdrop-filter: blur(6px); transition: background .15s ease, color .15s ease, border-color .15s ease; } .dm .mdlg-x .material-symbols-outlined { font-size: 1.125rem; } .dm .mdlg-x:hover { background: rgb(var(--surface)); color: rgb(var(--ink)); border-color: rgb(var(--line)); } /* ── Header ────────────────────────────────────────────────────────────── A tinted band, not a coloured bar: the wash comes off the brand at 10-14% so the dialog still reads as paper. The icon is a rounded tile rather than a flat disc — it is the one piece of chrome that says which decision this is, and it should look deliberate at 3.25rem. */ /* Centred, on plain paper (user's design, 2026-09-23). The earlier cut had a tinted band and a left-aligned gradient tile; the approved shape is a white card whose head is a soft tinted disc, the title and one sentence centred under it, and no divider — the spacing does that work. The disc takes its hue from the decision: teal for a message, the heart's red for a save. */ .dm .mdlg-hero { position: relative; padding: 1.75rem 1.25rem .25rem; text-align: center; } @media (min-width: 480px) { .dm .mdlg-hero { padding: 2rem 1.5rem .25rem; } } .dm .mdlg-ic { height: 3.5rem; width: 3.5rem; border-radius: 999px; display: grid; place-items: center; margin: 0 auto .875rem; background: rgb(var(--primary) / .12); color: rgb(var(--primary-ink)); } .dm .mdlg-ic .material-symbols-outlined { font-size: 1.5rem; } /* Save wears the heart's own colour, filled, so the dialog and the control that opened it are visibly the same thing. */ .dm .mdlg-ic.is-save { background: rgb(var(--danger) / .1); color: rgb(var(--danger)); } .dm .mdlg-t { font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; color: rgb(var(--ink)); } .dm .mdlg-d { margin-top: .5rem; font-size: .875rem; line-height: 1.6; color: rgb(var(--muted)); max-width: 21rem; margin-inline: auto; } /* ── Body ──────────────────────────────────────────────────────────────── */ .dm .mdlg-b { padding: 1.25rem; overflow-y: auto; overscroll-behavior: contain; } @media (min-width: 480px) { .dm .mdlg-b { padding: 1.25rem 1.5rem 1.5rem; } } /* The head sits still and the body scrolls under it, so a short landscape window reaches the buttons without the title leaving the card. */ .dm .mdlg-hero { flex: none; } .dm .mdlg-hero + .mdlg-b { padding-top: 1rem; } /* Three short reasons, each with its own mark. Progressive disclosure in reverse: the sentence above says what happens, these say what it buys. */ .dm .mdlg-list { display: grid; gap: .625rem; } .dm .mdlg-li { display: flex; gap: .625rem; align-items: flex-start; font-size: .8125rem; font-weight: 600; line-height: 1.55; color: rgb(var(--ink-soft)); } .dm .mdlg-li .material-symbols-outlined { font-size: 1.125rem; flex: none; margin-top: .0625rem; color: rgb(var(--primary-ink)); } /* One primary CTA, one quiet alternative — never two buttons of equal weight asking the same question twice. */ .dm .mdlg-acts { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.25rem; } .dm .mdlg-acts .btn { min-height: 2.875rem; } .dm .mdlg-note { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: .875rem; padding-top: .875rem; border-top: 1px solid rgb(var(--line) / .7); font-size: .75rem; font-weight: 700; color: rgb(var(--muted)); line-height: 1.5; text-align: center; } .dm .mdlg-note .material-symbols-outlined { font-size: 1rem; flex: none; } /* Share this car (2026-09-24): the Marketplace product's share panel (ProductDetailPage.razor, .pd-share*), value for value, at the user's request — "it's not match marketplace share window". Every size, colour and radius below is copied from there, including its slate hex values rather than the Motors tokens, so the two windows are the same window. It sits on .mdlg for the centring and the scrim, and undoes .mdlg's border, shadow, radius and entrance to take the Marketplace ones. If the Marketplace panel changes, change this with it. */ .dm .mdlg-scrim.mshare-scrim { background: rgba(15, 23, 42, .45); backdrop-filter: none; animation: mshare-fade .18s ease-out; } .dm .mdlg.mshare { display: block; width: min(28rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem; background: #fff; border: 0; border-radius: 1.25rem; box-shadow: 0 24px 64px -16px rgba(15, 23, 42, .35); animation: mshare-in .2s cubic-bezier(.16, 1, .3, 1); } @keyframes mshare-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes mshare-in { from { opacity: 0; transform: translate(-50%, calc(-50% + .5rem)) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } html:has(.dm .mshare) { overflow: hidden; } /* right/left, not inset-inline-end: the Marketplace rule's own shape. */ .dm .mshare-x { position: absolute; top: .75rem; right: .75rem; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 9999px; background: #f1f5f9; color: #0f172a; } [dir="rtl"] .dm .mshare-x { right: auto; left: .75rem; } .dm .mshare-x:hover { background: #e2e8f0; } .dm .mshare-t { margin: 0 0 1rem; padding-inline-end: 3rem; font-size: 1.125rem; font-weight: 800; color: #0f172a; } .dm .mshare-card { display: flex; gap: .875rem; align-items: center; padding: .75rem; border: 1px solid #e8edf2; border-radius: 1rem; background: #f8fafc; } .dm .mshare-thumb { flex-shrink: 0; width: 4.5rem; height: 4.5rem; border-radius: .75rem; overflow: hidden; background: #fff; border: 1px solid #eef2f6; } .dm .mshare-thumb img, .dm .mshare-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; } .dm .mshare-meta { min-width: 0; flex: 1; } .dm .mshare-name { margin: 0; font-size: .9375rem; font-weight: 700; color: #0f172a; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .dm .mshare-price { margin: .25rem 0 0; font-size: .9375rem; font-weight: 800; color: #0f172a; } .dm .mshare-seller { margin: .125rem 0 0; font-size: .8125rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm .mshare-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; } .dm .mshare-app { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: 0 .75rem; border: 1.5px solid #e2e8f0; border-radius: .875rem; background: #fff; color: #0f172a; font-size: .875rem; font-weight: 700; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; } .dm .mshare-app:hover { border-color: rgba(28, 177, 201, .5); background: rgba(28, 177, 201, .06); } .dm .mshare-app:focus-visible { outline: 2px solid rgb(28, 177, 201); outline-offset: 2px; } .dm .mshare-app .material-symbols-outlined { font-size: 1.15rem; color: #0e7490; } .dm .mshare-label { display: block; margin: 1rem 0 .375rem; font-size: .8125rem; font-weight: 700; color: #334155; } .dm .mshare-copy { display: flex; gap: .5rem; } .dm .mshare-copy input { flex: 1; min-width: 0; height: 2.75rem; padding: 0 .75rem; border: 1.5px solid #e2e8f0; border-radius: .875rem; background: #f8fafc; color: #334155; font-size: .875rem; font-family: inherit; text-overflow: ellipsis; } .dm .mshare-copy input:focus { outline: none; border-color: rgb(28, 177, 201); box-shadow: 0 0 0 3px rgba(28, 177, 201, .16); } .dm .mshare-copy-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem; height: 2.75rem; padding: 0 1rem; border: 0; border-radius: .875rem; background: rgb(28, 177, 201); color: #fff; font-family: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; } .dm .mshare-copy-btn:hover { background: rgb(23, 154, 175); } .dm .mshare-copy-btn .material-symbols-outlined { font-size: 1.1rem; } .dm .mshare-more { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; height: 2.75rem; margin-top: .75rem; border: 0; border-radius: .875rem; background: transparent; color: #475569; font-family: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .dm .mshare-more:hover { background: rgba(28, 177, 201, .08); color: #0e7490; } .dm .mshare-more:focus-visible { outline: 2px solid rgb(28, 177, 201); outline-offset: 2px; } .dm .mshare-more .material-symbols-outlined { font-size: 1.15rem; } @media (prefers-reduced-motion: reduce) { .dm .mdlg.mshare, .dm .mdlg-scrim.mshare-scrim { animation: none; } } @media (prefers-reduced-motion: reduce) { .dm .mdlg, .dm .mdlg-scrim { animation: none; } } /* ── Listing details (2026-09-24) ────────────────────────────────────────── Under the specifications: Damage & paperwork (spec cells), the seller's chassis inspection, their documents and the features checklist (the shipped .features / .feature). Every claim is labelled as the seller's own: Droply does not inspect cars or check documents. Approved mockup: mockups/motors-listing-details. */ .dm .hchips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; } .dm .hchip { display: inline-flex; align-items: center; gap: .4rem; height: 2.25rem; padding-inline: .8rem; border-radius: 999px; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); font-size: .8125rem; font-weight: 700; color: rgb(var(--ink-soft)); box-shadow: var(--shadow-sm); } .dm .hchip:hover { border-color: rgb(var(--primary) / .6); } .dm .hchip .material-symbols-outlined { font-size: 1.05rem; color: rgb(var(--icon)); } .dm .h-sub { font-size: 1rem; font-weight: 800; margin: 1.25rem 0 .75rem; color: rgb(var(--ink)); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .dm .sechead { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; } .dm .h-sec.sm { font-size: 1.25rem; } .dm .byseller { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 700; color: rgb(var(--muted)); background: rgb(var(--soft)); border: 1px solid rgb(var(--line)); border-radius: 999px; padding: .2rem .6rem; } .dm .byseller .material-symbols-outlined { font-size: .95rem; } .dm .pdisc { font-size: .8125rem; color: rgb(var(--muted)); line-height: 1.55; margin-top: .9rem; display: flex; gap: .4rem; } .dm .pdisc .material-symbols-outlined { font-size: 1rem; flex: none; margin-top: .1rem; } .dm .sw-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(var(--ink) / .18); vertical-align: -.1rem; margin-inline-end: .35rem; } .dm .d-more, .dm .d-specs { scroll-margin-top: calc(var(--dm-top-offset) + 1rem); } /* The chassis drawing, read-only. Never mirrored: the car's left is its left. */ .dm .pinsp { display: grid; grid-template-columns: minmax(0,17rem) minmax(0,1fr); gap: 1.75rem; align-items: start; } @media (max-width: 767px) { .dm .pinsp { grid-template-columns: minmax(0,1fr); } } .dm .chz { direction: ltr; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; max-width: 20rem; margin-inline: auto; border-radius: var(--r-lg); padding: 10px 8px 12px; border: 1px solid rgb(var(--line)); background: linear-gradient(180deg, rgb(var(--soft)), rgb(var(--surface)) 60%); } .dm .chz__end { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--muted)); } [dir="rtl"] .dm .chz__end { letter-spacing: 0; font-size: 12px; } .dm .chz__end .material-symbols-outlined { font-size: 16px; } .dm .chz__car { position: relative; width: 100%; max-width: 300px; aspect-ratio: 300/372; } .dm .chz__car svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .dm .chz .iz { fill: transparent; } .dm .chz .iz.on { fill: rgb(var(--primary) / .22); } .dm .chz__side { font-size: 11px; color: rgb(var(--muted)); margin-top: 4px; text-align: center; } .dm .ipt { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 92px; transform: translate(-50%, -22px); color: rgb(var(--ink-soft)); } .dm .ipt__b { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--surface)); border: 1.5px dashed rgb(133 144 161); color: rgb(107 118 136); } .dm .ipt__b .material-symbols-outlined { font-size: 24px; } .dm .ipt__l { font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; padding: 1px 6px; border-radius: 6px; background: rgb(255 255 255 / .92); max-width: 100%; } .dm .ipt.on .ipt__b { background: rgb(var(--primary)); border: 1.5px solid rgb(var(--primary-dark)); color: rgb(var(--ink)); box-shadow: 0 6px 14px -6px rgb(var(--primary) / .7); } .dm .ipt.on .ipt__b .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; } .dm .ipt.on .ipt__l { color: rgb(var(--primary-ink)); } .dm .ipt__note { position: absolute; top: -5px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: rgb(var(--ink)); color: #fff; display: grid; place-items: center; border: 2px solid #fff; } .dm .ipt__note .material-symbols-outlined { font-size: 12px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; } /* Teal stars, not gold: gold reads as a customer rating, and Motors has none. */ .dm .stars { display: inline-flex; gap: 1px; align-items: center; } .dm .stars .s { font-size: 1.75rem; color: rgb(133 144 161); } .dm .stars .s.on { color: rgb(var(--primary-dark)); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .dm .stars.sm .s { font-size: 1rem; } .dm .pscore { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .dm .pscore__v { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; color: rgb(var(--ink)); font-variant-numeric: tabular-nums; line-height: 1; } .dm .pscore__v small { font-size: 1rem; color: rgb(var(--muted)); } .dm .ppts { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; } .dm .ppt { padding: .75rem 0; border-top: 1px solid rgb(var(--line)); } .dm .ppt__h { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: .9375rem; color: rgb(var(--ink)); } .dm .ppt__h .material-symbols-outlined { font-size: 1.3rem; } .dm .ppt.on .ppt__h .material-symbols-outlined { color: rgb(var(--primary-ink)); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .dm .ppt.off .ppt__h { color: rgb(var(--muted)); font-weight: 700; } .dm .ppt.off .ppt__h .material-symbols-outlined { color: rgb(var(--muted)); } .dm .ppt__st { margin-inline-start: auto; font-size: .75rem; font-weight: 700; color: rgb(var(--muted)); } .dm .ppt.on .ppt__st { color: rgb(var(--primary-ink)); } .dm .pnote { margin-top: .5rem; margin-inline-start: 1.9rem; padding: .6rem .8rem; border-radius: .75rem; background: rgb(var(--soft)); box-shadow: inset 0 0 0 1px rgb(var(--line)); font-size: .875rem; line-height: 1.6; color: rgb(var(--ink-soft)); } .dm .pnote__l { display: block; font-size: .6875rem; font-weight: 800; color: rgb(var(--muted)); margin-bottom: .15rem; } /* The note is the seller's own words: each line takes its own direction. */ .dm .pnote p { margin: 0; unicode-bidi: plaintext; text-align: start; } .dm .pdocs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; } @media (max-width: 639px) { .dm .pdocs { grid-template-columns: minmax(0,1fr); } } .dm .pdoc { display: flex; align-items: center; gap: .875rem; padding: .875rem; border-radius: var(--r-lg); border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); } .dm .pdoc__ic { width: 2.5rem; height: 3rem; border-radius: .375rem .75rem .375rem .375rem; flex: none; background: rgb(var(--soft)); box-shadow: inset 0 0 0 1px rgb(var(--line)); display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgb(var(--icon)); } .dm .pdoc__ic .material-symbols-outlined { font-size: 1.2rem; } .dm .pdoc__ic b { font-size: .5625rem; font-weight: 800; letter-spacing: .05em; color: rgb(var(--ink-soft)); } .dm .pdoc__n { font-weight: 800; font-size: .9rem; color: rgb(var(--ink)); overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: left; } [dir="rtl"] .dm .pdoc__n { text-align: right; } .dm .pdoc__m { font-size: .75rem; font-weight: 600; color: rgb(var(--muted)); margin-top: .1rem; } .dm .pdoc .btn { margin-inline-start: auto; flex: none; } /* The new blocks join the phone and tablet order after the specifications. */ @media (max-width: 1023px) { .dm .d-insp { order: 5; } .dm .d-docs { order: 6; } .dm .d-feat { order: 7; } .dm .d-desc { order: 8; } }