/* =========================================================================== 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 and the questionnaire's open state were on in the mockup. They now sit on the scope root (.dm[dir="rtl"], .dm.cf-open) so the Motors page can be Arabic without flipping the surrounding app shell. 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: 15 23 42; --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(15 23 42 / .05); --shadow-soft: 0 22px 55px -28px rgb(28 177 201 / .22); --shadow-card: 0 28px 80px -32px rgb(15 23 42 / .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; } .dm input, .dm select { 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); } .dm .btn-secondary { background: rgb(var(--surface)); color: rgb(var(--ink)); border-color: rgb(var(--line)); box-shadow: var(--shadow-sm); } .dm .btn-secondary:hover { border-color: rgb(var(--primary) / .5); color: rgb(var(--primary)); } .dm .btn-ghost { color: rgb(var(--muted)); } .dm .btn-ghost:hover { background: rgb(var(--primary) / .07); color: rgb(var(--primary)); } .dm .btn-white { background: #fff; color: rgb(var(--primary)); } .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(--ink)); transition: background .15s ease, color .15s ease; position: relative; } .dm .icon-btn:hover { background: rgb(var(--soft)); color: rgb(var(--primary)); } /* ── 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; } .dm .b-verified { background: rgb(var(--success) / .10); color: rgb(var(--success)); border-color: rgb(var(--success) / .25); } .dm .b-dealer { background: rgb(var(--violet) / .10); color: rgb(var(--violet)); border-color: rgb(var(--violet) / .25); } .dm .b-new { background: rgb(var(--primary) / .10); color: rgb(var(--primary)); border-color: rgb(var(--primary) / .25); } .dm .b-featured { background: rgb(var(--orange) / .12); color: rgb(var(--orange)); 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; } .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 ─────────────────────────────────────────────────────────────── */ .dm .accent { height: 3px; background: linear-gradient(to right, rgb(var(--primary)), rgb(var(--violet)), rgb(var(--orange))); } .dm .top { position: sticky; top: 0; z-index: 50; } .dm .hdr { background: rgb(255 255 255 / .9); backdrop-filter: blur(18px); border-bottom: 1px solid rgb(var(--line) / .7); } .dm .hdr-in { height: 4rem; display: flex; align-items: center; gap: 1rem; } .dm .brand { display: inline-flex; align-items: center; gap: .625rem; flex: none; } .dm .brand-mark { height: 2.5rem; width: 2.5rem; border-radius: var(--r-md); display: grid; place-items: center; background: linear-gradient(135deg, rgb(var(--primary) / .18), rgb(var(--primary) / .05)); color: rgb(var(--primary)); transition: transform .2s ease; } .dm .brand:hover .brand-mark { transform: rotate(6deg); } .dm .brand-mark .material-symbols-outlined { font-size: 1.6rem; } .dm .wordmark { font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; } /* Motors is a vertical, not a new brand — so it signs as a lighter suffix hung off the Droply wordmark rather than competing with it. */ .dm .vertical { font-weight: 700; color: rgb(var(--primary)); padding-inline-start: .45rem; margin-inline-start: .45rem; border-inline-start: 1px solid rgb(var(--line)); } .dm .nav { display: none; align-items: center; gap: .25rem; } @media (min-width: 1100px) { .dm .nav { display: flex; } } .dm .nav a, .dm .nav span { height: 2.25rem; padding-inline: .85rem; border-radius: var(--r-md); display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 700; color: rgb(var(--muted)); } .dm .nav a:hover { background: rgb(var(--primary) / .07); color: rgb(var(--primary)); } .dm .nav .inert { opacity: .5; } /* Automotive sub-navigation — the tier that makes Cars read as a vertical rather than a category. In this mockup it doubles as the screen switcher. */ .dm .subnav { background: rgb(255 255 255 / .78); backdrop-filter: blur(14px); border-bottom: 1px solid rgb(var(--line) / .7); } .dm .subnav-in { height: 3.25rem; display: flex; align-items: center; gap: .25rem; overflow-x: auto; scrollbar-width: none; } .dm .subnav-in::-webkit-scrollbar { display: none; } .dm .tab { height: 2rem; padding-inline: .75rem; border-radius: var(--r-md); display: inline-flex; align-items: center; gap: .4rem; flex: none; font-size: .8125rem; font-weight: 700; color: rgb(var(--muted)); transition: background .15s ease, color .15s ease; } .dm .tab .material-symbols-outlined { font-size: 1.05rem; } .dm .tab:hover { color: rgb(var(--primary)); background: rgb(var(--primary) / .06); } .dm .tab[aria-selected="true"] { color: rgb(var(--primary)); background: rgb(var(--primary) / .11); } /* ── 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(15 23 42 / .62); 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(15 23 42 / .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)); } .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(--ink) / .82); } .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: 8.5rem; } } .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: 7.25rem; z-index: 30; 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 ──────────────────────────────────────────────────────── */ .dm .detail { display: grid; gap: 1.5rem; align-items: start; } @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: 8.5rem; } } .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(15 23 42 / .18); } .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(15 23 42 / .65); color: #fff; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); } .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; } .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)); } } @media (min-width: 1024px) { .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(15 23 42 / .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(15 23 42 / .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; } /* ── Screens ────────────────────────────────────────────────────────────── */ .dm .screen { display: none; } .dm .screen.active { display: block; animation: rise .28s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ── "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. */ .dm[dir="rtl"] .accent { background: linear-gradient(to left, rgb(var(--primary)), rgb(var(--violet)), rgb(var(--orange))); } .dm[dir="rtl"] select.control { background-position: left .7rem center; } .dm[dir="rtl"] .cc-badges { left: auto; right: .625rem; } .dm[dir="rtl"] .cc-tools { right: auto; left: .625rem; } .dm[dir="rtl"] .photo-n { left: auto; right: .625rem; } .dm[dir="rtl"] .dot-badge { right: auto; left: -.15rem; } .dm[dir="rtl"] .budget-a { right: auto; left: 1rem; } .dm[dir="rtl"] .gidx { right: auto; left: .75rem; } .dm[dir="rtl"] .gnav.prev { left: auto; right: .75rem; } .dm[dir="rtl"] .gnav.next { right: auto; left: .75rem; } /* Chevrons and arrows are directional glyphs — mirror the glyph, never the control carrying it. */ .dm[dir="rtl"] .gnav .material-symbols-outlined, .dm[dir="rtl"] .crumb-sep, .dm[dir="rtl"] .arrow-glyph { transform: scaleX(-1); } /* ── 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; } @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; } .dm.cf-open .nav, .dm.cf-open .brand, .dm.cf-open .subnav { opacity: .45; pointer-events: none; } @media (min-width: 768px) { .dm.cf-open .cf-scrim { top: 7.25rem; } } .dm .cf-modal { position: fixed; z-index: 71; inset-inline: 0; bottom: 0; max-height: min(92vh, 44rem); display: flex; flex-direction: column; background: rgb(var(--surface)); border-radius: var(--r-3xl) var(--r-3xl) 0 0; box-shadow: var(--shadow-card); animation: cf-up .26s cubic-bezier(.32,.72,0,1) both; outline: none; } @keyframes cf-up { from { transform: translateY(100%) } to { transform: none } } @keyframes cf-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.985) } to { opacity: 1; transform: translate(-50%, -50%) scale(1) } } /* Sheet on phones (thumb reach), centred dialog from tablet up. */ @media (min-width: 768px) { .dm .cf-modal { inset-inline: auto; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(40rem, calc(100vw - 3rem)); border-radius: var(--r-3xl); animation: cf-pop .24s cubic-bezier(.32,.72,0,1) both; } } .dm .cf-panel { padding: 1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 1rem; min-height: 0; } @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. */ .dm .cf-viewport { overflow-x: clip; margin-inline: -.25rem; padding-inline: .25rem; } .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; } .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; } } @media (max-height: 620px) { .dm .cf-modal { max-height: 94vh; } .dm .cf-panel { overflow-y: auto; } } /* 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; } }