/* carlots.ng — Django port stylesheet. * * Every number here is traceable to docs/DESIGN-SYSTEM.md, which records where it was measured * on the live site. Read that file before changing a value: the point of this sheet is that the * design is a contract rather than a matter of taste. * * It is a rebuild, not a copy of the theme's compiled CSS — that bundle is 721KB across 6,793 * rules for pages that use a fraction of them. This is a few KB and self-hosts one 36KB font * subset, which matters because Core Web Vitals feed the ranking this port exists to protect. * Class names are our own and semantic; the rendered result is eta's shape. */ /* ---------- tokens (§1) ---------- */ :root { --c-primary: #4285f4; --c-primary-hover: #5699ff; --c-primary-light: rgba(66, 133, 244, .2); --c-primary-lighter: rgba(66, 133, 244, .12); --c-accent: #f93301; --c-accent-hover: #ff4715; /* Text on the accent is white, so the label reads as part of the button rather than as dark type sitting on top of it. White on #f93301 measures 4.06:1, which clears AA for the bold and large type this token is actually used on (the publish button, the "premium" pill, the listing badge) but not the 4.5:1 bar for small body text -- so it stays a token for accent-backed chrome and is not a general text colour. */ --c-accent-ink: #fff; --g0: #0c0c0c; --g1: #1c1c1c; --g2: #2c2c2c; --g3: #3c3c3c; --g5: #5c5c5c; --g6: #6c6c6c; --g7: #7c7c7c; --g8: #8c8c8c; --g9: #9c9c9c; --g11: #bcbcbc; --g12: #dcdcdc; --g13: #ececec; --g14: #fcfcfc; --white: #fff; --ink: #222; --ink-strong: var(--g1); --muted: var(--g6); --muted-soft: var(--g8); --bg: #f2f3f3; --field: #f0f0f0; --footer-bg: #23292f; --footer-ink: #999; /* Separation is a hairline ring against a grey page, not a drop shadow. */ --ring: 0 0 0 1px #d5dae0; --lift: 0 1px 3px rgba(0, 0, 0, .2); --r-tile: 8px; /* The fixed mobile bar's height. A token because three rules depend on it agreeing: the bar itself, the body's bottom padding that lets the page scroll clear of it, and the cookie notice that has to sit above it. Three hardcoded 56s is how one of them ends up a 54. */ --bottom-nav-h: 56px; --r-media: 12px; --r-card: 16px; --r-pill: 100px; --wrap: 1200px; --gutter: 16px; } @font-face { font-family: "Noto Sans"; src: url("../fonts/noto-sans-normal-latin.10f8972e3579.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20A6, U+2122; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.3 "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: none; } img { max-width: 100%; } h1, h2, h3, h4 { margin: 0; } /* Lists carry no marker by default. Almost every `ul` on this site is a layout group -- the listing grid, the nav, the footer columns, the price stat row -- and each of those used to reset `list-style` for itself, which is exactly how one gets missed: `.price-stats` never did, so the four headline figures on every price page rendered as a bulleted list. Prose is the exception and asks for markers explicitly (`.static-body ul`). */ ul, ol { margin: 0; padding: 0; list-style: none; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 20px; border: 0; border-radius: var(--r-pill); cursor: pointer; background: var(--c-primary); color: var(--white); /* Longhands, not the `font` shorthand: `font: 600 15px/1 inherit` is invalid CSS (the family slot cannot take a keyword) and the whole declaration is dropped, which silently leaves buttons at weight 400. */ font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; transition: background .2s; } .btn:hover { background: var(--c-primary-hover); } .btn-accent { background: var(--c-accent); color: var(--c-accent-ink); } .btn-accent:hover { background: var(--c-accent-hover); } .btn-ghost { background: var(--white); color: var(--g2); box-shadow: var(--ring); } .btn-ghost:hover { background: var(--g14); } .btn-sm { height: 32px; padding: 0 14px; font-size: 14px; } /* ---------- header (§2.1) ---------- */ .site-header { background: var(--white); position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 0 var(--g13); } .header-inner { display: flex; align-items: center; gap: 14px; min-height: 70px; } .logo { display: inline-flex; align-items: baseline; font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--g2); white-space: nowrap; } .logo span { color: var(--c-primary); } /* Live renders its logo at 105x46, but that file carries a "Buy & Sell Cars" strapline under the wordmark; ours is the clean wordmark, whose letterforms are ~29px tall inside live's 46. Height is set here and width left auto so the intrinsic ratio decides -- the width/height attributes on the tag are for CLS, not for layout. */ .img-logo { display: block; height: 30px; width: auto; } .search { position: relative; display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; max-width: 600px; } .search-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; } /* `appearance: none` plus our own caret, because a native select keeps the platform's control chrome -- a square grey dropdown button on Windows, a thin double arrow on macOS -- which is the one element in the row that did not look like it belonged to the pill next to it. The right padding reserves the caret's space so a long option label cannot run under it. */ .search select { height: 40px; max-width: 170px; border: 0; border-radius: var(--r-pill); background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236c6c6c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; background-size: 10px 6px; appearance: none; -webkit-appearance: none; padding: 0 32px 0 14px; font: inherit; font-size: 14px; color: var(--g5); cursor: pointer; } .search input { width: 100%; height: 40px; border: 0; border-radius: var(--r-pill); background: var(--field); padding: 0 16px; font: inherit; font-size: 15px; color: var(--g2); outline: 0; } .search input::placeholder { color: var(--g8); } .search input:focus { box-shadow: 0 0 0 2px var(--c-primary-light); } .search .btn { height: 40px; padding: 0 20px; } /* Same story as the hero: `combo.js` converts this select too, so the control that actually renders is the shared searchable dropdown and the rules above are the no-JS baseline. The trigger takes the row's grey pill rather than the generic white tile, so the header search stays three matching shapes. */ .search .cs-combo { flex: 0 0 170px; } .search .cs-combo-trigger { height: 40px; padding: 0 32px 0 14px; background: var(--field); box-shadow: none; border-radius: var(--r-pill); font-size: 14px; color: var(--g5); } .search .cs-combo-trigger::after { top: 16px; } .search .cs-combo-panel { min-width: 240px; } /* The theme ships these links hidden at desktop; we render them (delta 3). `margin-left: auto` on **every** page, so the nav group and the account control sit together at the end of the row opposite the logo. Previously only the homepage did this, which left every other page with the nav packed against the search box and the right half of the row empty. The account control deliberately does *not* take an auto margin of its own at this width: two auto margins in one flex row share the free space between them, which would put the nav in the middle of the header rather than at its end. */ .header-links { display: flex; gap: 2px; margin-left: auto; } /* `nowrap`: the nav items can shrink below their content width when the search form squeezes them, and "Sell your car" is the first label here long enough to break across two lines. */ .header-links a { display: flex; align-items: center; height: 32px; padding: 0 10px; border-radius: var(--r-tile); font-size: 14px; font-weight: 600; color: var(--g3); white-space: nowrap; } .header-links a:hover { background: var(--field); } /* The publish call to action. A sibling of `.header-links` rather than one of its children, so `.header-links a` cannot flatten it back into a nav item -- that rule sets its own height, radius and padding and would win on specificity over `.btn`. White on a white header, held by the same hairline ring every card and the Register button use, so it reads as a control without competing with the accent. The plus matches the raised Sell target in the fixed mobile bar. */ .nav-sell { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; height: 36px; padding: 0 16px; border-radius: var(--r-pill); background: var(--white); color: var(--g2); box-shadow: var(--ring); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .2s, box-shadow .2s, color .2s; } .nav-sell svg { width: 15px; height: 15px; color: var(--c-accent); } /* Hover promotes it rather than merely tinting it: the ring takes the brand blue and the label follows, which is the one moment the control is allowed to claim more than its neighbours. */ .nav-sell:hover { background: var(--c-primary-lighter); box-shadow: 0 0 0 1px var(--c-primary); color: var(--c-primary); } .nav-sell:hover svg { color: var(--c-primary); } /* The phone-width copy of the same control, inside the account group. Hidden here and shown in the 760px block; the desktop one is hidden there. Two elements rather than one that moves, because the header is cached chrome and the server has no viewport to choose with. */ .nav-sell-compact { display: none; } /* ---------- page shell ---------- */ .content { padding: 16px 0 40px; } .content .wrap { display: flex; flex-direction: column; gap: 16px; } .breadcrumbs { font-size: 12.5px; line-height: 15px; color: var(--muted); } .breadcrumbs a { color: var(--g5); } .breadcrumbs a:hover { color: var(--c-primary); } .breadcrumbs span:last-child { color: var(--g2); font-weight: 600; } .breadcrumbs span + span::before { content: "/"; margin: 0 6px; color: var(--g11); font-weight: 400; } /* The one surface primitive: a white 16px card held by a hairline ring. */ .card { position: relative; width: 100%; background: var(--white); border-radius: var(--r-card); box-shadow: var(--ring); padding: 24px; } .card > h2 { font-size: 24px; font-weight: 700; margin-bottom: 20px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .section-head h2 { font-size: 24px; font-weight: 700; } .section-head a { font-size: 14px; font-weight: 600; color: var(--c-primary); white-space: nowrap; } .page-title { font-size: 22px; line-height: 28px; font-weight: 700; } .page-desc { font-size: 14px; color: var(--muted-soft); } .result-count { font-size: 14px; color: var(--muted-soft); margin: 0; } /* The de-thinning intro. Reads as body copy, not as a system message: it is there for a person deciding whether this page has what they want, and for the crawler second. It spans the card rather than sitting in a 70ch measure, which is what it used to do. The measure is the right call for an article, and the wrong one here: the breadcrumb, the H1 and the chip rows above and below all run the full width of the card, so a paragraph stopping halfway across read as a column of text pushed against the left edge rather than as part of the card. Two or three lines at this width stay comfortable to read; the cap only paid for itself on prose long enough to need it. */ .page-intro { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 8px 0 0; } .empty-state { color: var(--muted); text-align: center; padding: 28px 0; margin: 0; } .empty-state a { color: var(--c-primary); font-weight: 600; } .no-match-banner { background: var(--field); border-radius: var(--r-tile); padding: 12px 16px; margin: 0 0 16px; font-size: 14px; color: var(--g6); } /* ---------- hero (§1.5) ---------- */ .hero { background: none; box-shadow: none; padding: 18px 0 6px; text-align: center; } .hero h1 { font-size: 32px; line-height: 1.15; font-weight: 700; } .hero-sub { font-size: 15.5px; color: var(--muted); margin: 10px 0 0; } /* One bar, three segments. The old hero rendered the keyword field, the category select and the button as three separate pills in a centred row, each capped at 300px, which left the button floating in white space with no visual claim on the fields it submits. They are one control now: a white pill holding the three segments, with the hairline divider doing the separating that three boxes used to. `padding: 6px` is what insets the button so it sits *inside* the bar rather than butting against its edge, and it is why the inner heights are 44 while the bar is 56. */ .hero-search { max-width: 760px; margin: 22px auto 0; } .hs-bar, .pill-bar { display: flex; align-items: center; padding: 6px; background: var(--white); border-radius: var(--r-pill); box-shadow: var(--ring), 0 2px 10px rgba(0, 0, 0, .05); transition: box-shadow .16s; } /* The ring is on the bar, not on the segment that has focus: a 2px outline around one third of a control that reads as one control is worse than no indicator, because it suggests the boundary is somewhere it is not. `:focus-within` is what makes that possible without JS. */ .hs-bar:focus-within, .pill-bar:focus-within { box-shadow: var(--ring), 0 0 0 3px var(--c-primary-light); } .hs-q, .pill-q { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding-left: 16px; } .hs-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--g8); } /* `min-width: 0` on both the flex item and the input: without it the input's default intrinsic width (a browser default of roughly 20 characters) is a floor the flex item cannot shrink below, and the bar overflows its container on a narrow viewport instead of the field giving way. The same reason `.search-field` carries it in the header. */ .hs-q input, .pill-q input { flex: 1 1 auto; min-width: 0; height: 44px; border: 0; background: none; outline: 0; padding: 0; font: inherit; font-size: 15.5px; color: var(--g1); } .hs-q input::placeholder, .pill-q input::placeholder { color: var(--g8); } /* WebKit draws its own clear button inside a `type=search`, which lands on top of the divider. */ .hs-q input::-webkit-search-cancel-button, .pill-q input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* The divider is a border on the select's wrapper rather than a `::before` on the select, so it sits at the segment boundary and inherits the bar's inner padding as its inset. */ /* A fixed basis rather than shrink-to-fit: the segment holds either the native select or the combo trigger depending on whether the script landed, and the two size themselves differently -- so pinning the segment is what keeps the bar from changing shape as the page finishes loading. */ .hs-cat, .pill-pick { flex: 0 0 180px; position: relative; margin-left: 14px; } .hs-cat::before, .pill-pick::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px; background: var(--g12); } /* Same `appearance: none` and the same caret as the header select, so the two forms match. */ .hs-cat select, .pill-pick select { height: 44px; max-width: 180px; border: 0; background: none; outline: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236c6c6c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px; appearance: none; -webkit-appearance: none; padding: 0 32px 0 16px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--g3); cursor: pointer; text-overflow: ellipsis; } /* The searchable dropdown *is* the category control here. `combo.js` is loaded site-wide by base.html and converts every `) ----------------- */ .cs-combo { position: relative; } /* The select stays in the DOM and stays the form control; it is only visually replaced, so the form still posts and still works when this widget never initialises. */ .cs-combo-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .cs-combo-trigger { width: 100%; height: 44px; padding: 0 36px 0 12px; font: inherit; font-size: 15px; text-align: left; color: var(--g1); background: var(--white); border: 0; border-radius: var(--r-tile); box-shadow: var(--ring); cursor: pointer; } .cs-combo-trigger::after { content: ""; position: absolute; right: 14px; top: 19px; width: 8px; height: 8px; border-right: 2px solid var(--g7); border-bottom: 2px solid var(--g7); transform: rotate(45deg); pointer-events: none; } .cs-combo-trigger:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; } .cs-combo-panel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--white); border-radius: var(--r-tile); box-shadow: var(--ring), 0 8px 24px rgba(0, 0, 0, .12); padding: 8px; } .cs-combo-search { width: 100%; height: 38px; padding: 0 10px; font-size: 15px; border: 0; border-radius: var(--r-tile); box-shadow: var(--ring); } .cs-combo-list { max-height: 260px; overflow-y: auto; margin-top: 8px; } .cs-combo-list li { padding: 9px 10px; border-radius: var(--r-tile); font-size: 15px; color: var(--g2); cursor: pointer; } .cs-combo-list li:hover, .cs-combo-list li[aria-selected="true"] { background: var(--c-primary-lighter); color: var(--c-primary); } .cs-combo-empty { padding: 10px; font-size: 14px; color: var(--g6); } /* The listing form's sections (/sell-car and /item/edit/). The form is 74 cap-* properties plus photos, price and location, and as one column it was a page a seller had to read to the end. Each section is a
card: one form, one POST, and it works with JavaScript off -- see the include's own comment for why that mattered more than a wizard would have. `.form-step` replaces `.spec-more` and `.spec-features`, which styled the two disclosures the sections absorbed. */ .listing-form { gap: 0; } .form-step { margin-top: 14px; background: var(--white); border-radius: var(--r-tile); box-shadow: var(--ring); /* **No `overflow: hidden`.** It was here to clip the summary's hover tint to the card's rounded corners, and it silently broke every searchable dropdown inside a section: a `.cs-combo-panel` is absolutely positioned and an ancestor with `overflow: hidden` clips it, so the colour list opened 328px tall inside a box with 52px of room and 276px of it was cut off. The field looked like a dropdown that would not open. The corners are rounded on the summary itself instead, which costs nothing and clips nothing. */ } .form-step > summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 15px; font-weight: 600; color: var(--g1); cursor: pointer; /* Both spellings: Safari still needs the pseudo-element, everyone else takes list-style. */ list-style: none; /* Closed, the summary *is* the card, so it carries the full radius; open, only the top. */ border-radius: var(--r-tile) var(--r-tile) 0 0; } .form-step:not([open]) > summary { border-radius: var(--r-tile); } .form-step > summary::-webkit-details-marker { display: none; } .form-step > summary:hover { background: var(--g14); } .form-step > summary:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; } /* The number, so a collapsed stack still reads as an ordered set of steps rather than a pile of unrelated panels. */ .step-n { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; font-size: 13px; font-weight: 700; color: var(--c-primary); background: var(--c-primary-lighter); border-radius: 50%; } /* Pushed to the far end, and carrying the field count: "52 optional" on a closed panel is what tells a seller there is something in there worth opening. */ .step-hint { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--g6); } /* The chevron is drawn from a border rather than shipped as an asset, and rotates on open. */ .form-step > summary::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-left: 10px; border-right: 2px solid var(--g6); border-bottom: 2px solid var(--g6); transform: rotate(45deg); transition: transform .15s ease; } .form-step[open] > summary::after { transform: rotate(-135deg); } .form-step[open] > summary { border-bottom: 1px solid var(--g13); } .form-step-body { display: flex; flex-direction: column; gap: 6px; padding: 4px 16px 18px; } /* The body's first label would otherwise sit tight against the summary's rule. */ .form-step-body > label:first-child { margin-top: 12px; } .form-step-body > .muted { margin-top: 8px; font-size: 13px; } /* The cap-* controls are now section children rather than disclosure children, so they need the full-width rule the replaced `.spec-more > select, .spec-more > input` carried. Without it the selects shrink to their longest option and the column stops lining up. */ .form-step-body > input, .form-step-body > select, .form-step-body > textarea { width: 100%; } /* A section whose own fields failed validation is forced open, so an error can never be hidden inside a collapsed panel. publish.js sets this; the server renders errors regardless. */ .form-step.has-error { box-shadow: 0 0 0 1px var(--c-danger, #d93025); } .form-contact-note { margin-top: 18px; font-size: 13px; } /* The equipment checkboxes: a grid rather than a 52-row column, because the list is the data buyers filter on and has to be scannable in one pass. auto-fit on its own -- no `fr` beside it -- for the reason the footer collapse taught us (A12). */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 20px; margin-top: 6px; } .feature-grid .auth-check { margin-top: 10px; align-items: flex-start; } .feature-grid .auth-check input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--c-primary); } .feature-grid .auth-check label { font-size: 14px; color: var(--g2); line-height: 1.35; } .feature-grid .auth-check input:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } /* --- the account area (ACCOUNT-AREA.md §2-§4) -------------------------------------------- */ /* Sidebar beside content, collapsing to stacked on a phone. `auto-fit` is not used here on purpose: this is a two-role layout, not a set of equal cells, so the columns are named. */ /* The account breadcrumb sits above the two-column layout, outside the cards, so it reads as the page's position rather than as part of the first panel's content. */ .account-crumbs { margin-bottom: 12px; } .account-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; } .account-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } @media (max-width: 860px) { .account-layout { grid-template-columns: minmax(0, 1fr); } } .account-nav { padding: 16px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--ring); } /* The sidebar's collapse. See the include for why it exists: below 860px the grid is one column, and the sidebar was a full screen of navigation above the page the seller asked for. The summary is hidden at desktop width, where the panel is just always open. */ .account-nav-toggle { display: none; } @media (max-width: 860px) { /* The nav's own padding goes to the summary and the body, so the collapsed bar is the full width of the card and reads as a control rather than as text with a box around it. */ .account-nav { padding: 0; } .account-nav-toggle { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--g1); list-style: none; } .account-nav-toggle::-webkit-details-marker { display: none; } .account-nav-toggle:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; } /* A tinted bar rather than plain text in a white card: the dealer has to recognise this as a thing you press, and a row of text on white is not that. */ .account-nav-panel:not([open]) > .account-nav-toggle { background: var(--c-primary-lighter); } .account-nav-toggle-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .account-nav-current { font-size: 13px; font-weight: 500; color: var(--g6); } /* The hamburger, drawn from three spans -- the shape people look for, beside the words that say what it does. */ .account-nav-burger { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 20px; height: 20px; } .account-nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--c-primary); } /* "Tap to open" / "Tap to close" -- the line that teaches the control rather than assuming it. Both labels are in the markup and CSS picks one, so the state cannot go stale. */ .account-nav-hint { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--c-primary); } .account-nav-hint-close, .account-nav-panel[open] > .account-nav-toggle .account-nav-hint-open { display: none; } .account-nav-panel[open] > .account-nav-toggle .account-nav-hint-close { display: inline; } /* `:empty` and not a template conditional: the span is filled by a loop over the nav groups, so on a page that is not itself a nav entry it renders empty rather than absent. */ .account-nav-current:empty { display: none; } .account-nav-toggle::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid var(--g6); border-bottom: 2px solid var(--g6); transform: rotate(45deg); transition: transform .15s ease; } .account-nav-panel[open] > .account-nav-toggle::after { transform: rotate(-135deg); } .account-nav-panel[open] > .account-nav-toggle { border-bottom: 1px solid var(--g13); } .account-nav-body { padding: 4px 16px 16px; } } .account-me { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .account-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .account-avatar-blank { display: grid; place-items: center; font-size: 18px; font-weight: 700; color: var(--white); background: var(--c-primary); } .account-name { font-size: 15px; font-weight: 700; color: var(--g1); } .account-edit { font-size: 13px; font-weight: 600; color: var(--c-primary); } .account-group { margin-top: 18px; } .account-group-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--g6); } .account-group ul { list-style: none; margin: 6px 0 0; } .account-group a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; margin: 0 -10px; border-radius: var(--r-tile); font-size: 14px; color: var(--g2); } .account-group a:hover { background: var(--c-primary-lighter); color: var(--c-primary); } .account-group a.is-current { background: var(--c-primary-lighter); color: var(--c-primary); font-weight: 700; } .account-count { flex: 0 0 auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; text-align: center; color: var(--g2); background: var(--field); } .account-group a.is-current .account-count, .account-group a:hover .account-count { color: var(--c-primary); background: var(--white); } .account-signout { margin-top: 18px; } /* The hub header: greeting and primary action on one row, stacked on a phone. `gap` is what separates the button from the text, so it cannot go back to being flush against it. */ .dash-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .dash-hero-text { min-width: 0; } /* The heading is inside a flex child here, so its own bottom margin would double up with the row's gap. The sub-line below it carries the spacing instead. */ .dash-hero .sec-title { margin-bottom: 4px; } .dash-hero .muted { font-size: 14px; } .dash-hero .btn { flex: 0 0 auto; } @media (max-width: 560px) { /* Full width on a phone, where a 140px pill beside wrapped text reads as an afterthought. */ .dash-hero { flex-direction: column; align-items: stretch; } .dash-hero .btn { width: 100%; } } /* Dashboard cards. A card is a link, so the whole tile is the target rather than the title alone -- a 3px-tall click target is the kind of thing that only ever gets found on a phone. */ .dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 12px; } .dash-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r-tile); box-shadow: var(--ring); background: var(--white); } .dash-card:hover { box-shadow: var(--ring), 0 6px 18px rgba(0, 0, 0, .08); } .dash-count { font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--c-primary); } .dash-title { font-size: 15px; font-weight: 700; color: var(--g1); } .dash-help { font-size: 13px; color: var(--g5); line-height: 1.4; } /* The listing manager (/user/items). */ /* The head holds the heading, what is being shown and the filter, on one line. What was here was a heading card, a form of three stacked label-above-control pairs and an Apply button, and then a second card that opened with the count -- four things to read before a seller reached the one thing this page is for, and none of them resembling a control they had used anywhere else on the site. */ .items-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; } .items-head-text { min-width: 0; } .items-head .sec-title { margin-bottom: 4px; } .items-count { margin: 0; font-size: 14px; color: var(--g6); } .items-count strong { font-weight: 700; color: var(--g2); } /* The filter *is* the shared pill bar (`.pill-bar`) -- the same control, with the same searchable dropdown in it, that this seller already used to find a car on the public side. D-69's lesson in one line: the instance that does not look like the shared component is the one that teaches people the site is three sites. */ .items-bar { flex: 1 1 340px; max-width: 520px; } .items-filter-note { margin: 12px 0 0; font-size: 14px; color: var(--g6); } .items-filter-note a { color: var(--c-primary); font-weight: 600; } .items-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } /* A row is a tile, not a line between hairlines. It carries a photograph, a title, a price, a state and up to four controls, and a 1px rule is not enough structure to hold that: the actions of one car read as the actions of the car above it, which on a page whose buttons hide and un-list cars is the wrong thing to be guessing about. */ .items-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px 18px; padding: 12px 14px; border-radius: var(--r-tile); background: var(--white); box-shadow: var(--ring); transition: box-shadow .16s; } .items-row:hover { box-shadow: var(--ring), 0 6px 18px rgba(0, 0, 0, .07); } .items-row-link { display: flex; align-items: center; gap: 14px; min-width: 0; } .items-row-link:hover .items-title { color: var(--c-primary); } .items-thumb { flex: 0 0 108px; width: 108px; height: 81px; border-radius: var(--r-tile); overflow: hidden; display: grid; place-items: center; background: var(--field); } .items-thumb img { width: 100%; height: 100%; object-fit: cover; } .items-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .items-title { font-size: 15.5px; font-weight: 600; color: var(--g1); transition: color .14s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The price carries the public card's own weight and colour (DESIGN-SYSTEM.md §1.2): a seller looking at their own list is looking at the same number a buyer sees. */ .items-price { font-size: 16px; font-weight: 800; color: var(--c-primary); } .items-sub { font-size: 13px; color: var(--g8); } .items-state { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .state-chip { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; } /* Colour carries meaning here, so the label is always present too -- the chip reads correctly in greyscale and to a screen reader, which a dot or a bare colour would not. */ .state-chip.state-active { color: #0f6b3f; background: #e4f5ec; } .state-chip.state-pending_validate { color: #8a5a00; background: #fdf1dc; } .state-chip.state-expired { color: var(--g2); background: var(--field); } .state-chip.state-hidden { color: var(--g2); background: var(--field); } .state-chip.state-premium { color: var(--c-primary); background: var(--c-primary-lighter); } /* Sold is an outcome rather than a state the clock put the listing in, so it reads as the accent -- and it is the one chip on this page a seller wants to see. */ .state-chip.state-sold { color: #8a2200; background: #fde8e2; } /* Auto-refresh is a *running* thing rather than a state the listing is in, so it reads as the accent rather than as another blue chip beside Promoted -- the two often sit on the same row and two blues there say "one thing" when they are two purchases. */ .state-chip.state-refresh { color: #8a3a00; background: #fdeee4; } /* What a promotion buys, on the promote page and on the publish confirmation. Markers, unlike almost every other list on this site, because this one *is* prose: four parallel claims a seller reads before spending money, and a bare indented block reads as one paragraph that lost its punctuation. */ .benefit-list { margin: 10px 0 18px; padding-left: 20px; list-style: disc; } .benefit-list li { margin-bottom: 7px; font-size: 14.5px; line-height: 1.5; color: var(--g3); } .benefit-list strong { color: var(--g1); } .benefit-list a { color: var(--c-primary); font-weight: 600; } /* ---------- action confirmations (the carspace.ng toast, measured 2026-10-17) ------------- Top-right on a desktop and full-width under the header on a phone, which is where theirs sits and where a confirmation belongs: close enough to the chrome to read as the site answering, far enough from the thumb to not be dismissed by accident. `pointer-events: none` on the container and `auto` on each toast, so the empty column the container occupies never swallows a click on the page behind it -- it is fixed, full-height on a phone, and without this it would make the top of every page untappable. */ .toasts { position: fixed; top: 16px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border-radius: var(--r-tile); /* Shadow *and* a hairline ring: a success toast lands on a white header at this position, and a shadow alone does not separate them. */ box-shadow: 0 12px 28px rgba(20, 24, 33, .18), 0 0 0 1px rgba(255, 255, 255, .22); color: var(--white); font-size: 14.5px; line-height: 1.45; pointer-events: auto; /* Starts hidden and is revealed by `toast.js` on the next frame. With no JavaScript the class never arrives, so the rule below gives it back -- a confirmation that renders invisible is worse than one that never animates. */ opacity: 0; transform: translateX(14px); transition: opacity .25s ease, transform .25s ease; } .toast.is-visible { opacity: 1; transform: none; } .toast.is-leaving { opacity: 0; transform: translateX(14px); } /* No script, no animation, no disappearing act -- but the message is on the page. */ .no-js .toast { opacity: 1; transform: none; } .toast-icon { flex: 0 0 auto; margin-top: 1px; } .toast-icon svg { display: block; width: 17px; height: 17px; } .toast-body { flex: 1 1 auto; min-width: 0; } .toast-close { flex: 0 0 auto; padding: 0 2px; border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; opacity: .75; cursor: pointer; } .toast-close:hover, .toast-close:focus-visible { opacity: 1; } /* Our palette, not a traffic-light set borrowed from a framework. Success is a green dark enough to carry white type at 14.5px; error is the brand accent darkened to the same weight, so a failure reads as this site rather than as a browser dialog. */ .toast.is-success { background: #0f8b5f; } .toast.is-error { background: #c2320b; } .toast.is-warning { background: #a8700a; } .toast.is-info, .toast.is-debug { background: var(--g1); } @media (max-width: 760px) { /* Full width under the header rather than a narrow card hugging one edge, and clear of the fixed bottom bar -- a toast behind that bar is a toast nobody can dismiss. */ .toasts { top: 12px; right: 12px; left: 12px; width: auto; } } /* The sign-in page's create-account offer, shown only to someone who arrived from Sell. Same shape as the publish confirmation's upsell below -- a rule and a block rather than a second card -- because both are the same move: the page has done its job, and this is the next thing the person actually came for. */ .auth-aside { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--g13); } .auth-aside-lead { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--g1); } .auth-aside-note { margin: 6px 0 14px; font-size: 14px; color: var(--muted); } .auth-aside .btn { width: 100%; } /* The publish confirmation's offer. Set off by a rule and a tint rather than by a card of its own, so it reads as a postscript to "it is live now" instead of competing with it. */ .upsell { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--g13); } .upsell .sec-sub { margin-bottom: 6px; } /* ---------- error pages (404 / 403 / 410) ---------- */ /* Centred and narrow, because there is nothing on this page to scan -- it is one sentence and a way out. The link blocks below it keep the page-card rhythm of every other page. */ .error-card { text-align: center; max-width: 42rem; margin-inline: auto; } /* The status number is decoration: `aria-hidden`, and sized so it reads as a watermark rather than competing with the heading that says what actually happened. */ .error-status { font-size: 56px; font-weight: 800; line-height: 1; color: var(--g12); margin-bottom: 8px; } .error-lead { color: var(--g5); margin: 0 auto 20px; max-width: 34rem; } .error-search { display: flex; gap: 8px; max-width: 30rem; margin: 0 auto 16px; } .error-search input { width: 100%; padding: 10px 14px; border: 0; border-radius: var(--r-tile); background: var(--field); font: inherit; } .error-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0; } /* The recovery links sit in a row on a wide screen and stack on a phone. `auto-fit` alone, with no `fr` beside it -- the footer bug (D-26) was exactly that mistake. */ .link-blocks { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .link-blocks .link-block + .link-block { margin-top: 0; } .link-cloud { display: flex; flex-wrap: wrap; gap: 6px 10px; } .link-cloud a { font-size: 14px; color: var(--c-primary); } /* ---------- contact the seller (apps/leads) ---------- */ /* The form lives in the item sidebar and on its own page, from one include, so it is styled once and sized by its container rather than by a width of its own. */ #contact-box { margin-top: 16px; } .ibox-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; color: var(--g1); } .contact-seller-form label { display: block; margin-top: 14px; margin-bottom: 6px; font-size: 14px; font-weight: 600; } .contact-seller-form input, .contact-seller-form textarea { width: 100%; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--white); border: 0; border-radius: var(--r-tile); box-shadow: var(--ring); } .contact-seller-form textarea { resize: vertical; min-height: 96px; } .contact-seller-form input:focus-visible, .contact-seller-form textarea:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; } .contact-seller-form input[readonly] { background: var(--field); box-shadow: none; } .contact-seller-form .btn { margin-top: 16px; width: 100%; } .field-help { display: block; margin-top: 4px; font-size: 13px; color: var(--g6); } .contact-as { font-size: 14px; margin: 0 0 4px; } .contact-notice { font-size: 12px; line-height: 1.5; margin: 12px 0 0; color: var(--g6); } .contact-notice a { color: var(--c-primary); } /* The confirmation after a send. Green would say "transaction complete"; this is a message in flight, so it reads as information and the copy does the work. */ /* Green, and a tick, because this is a success state and it was rendering as plain grey body copy indistinguishable from the rest of the sidebar -- a buyer could not tell at a glance whether anything had happened. Same green as the success toast, so "it worked" means one colour everywhere on the site. */ .contact-sent { padding: 13px 14px; border-radius: var(--r-tile); background: #e6f6ef; box-shadow: inset 0 0 0 1px #b6e2cf; } .contact-sent strong { display: flex; align-items: center; gap: 7px; font-size: 15px; color: #0b6b49; margin-bottom: 6px; } /* The tick, drawn rather than fetched: one glyph does not justify a request or an icon font. */ .contact-sent strong::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: #0f8b5f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 7'/%3E%3C/svg%3E") no-repeat center; } .contact-sent p { margin: 0; font-size: 14px; color: #246b53; } /* The seller's own address, printed only when they ticked the box. */ .line-email { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; word-break: break-all; } .line-email a { color: var(--c-primary); font-weight: 600; } /* The standalone page's restatement of which car this is about. */ .contact-item-summary { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; } .contact-item-summary img { border-radius: var(--r-tile); object-fit: cover; } .contact-item-summary > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .contact-item-title { font-size: 16px; font-weight: 700; color: var(--g1); } .contact-item-price { font-size: 15px; font-weight: 700; color: var(--c-primary); } /* The dealer page's reveal (D-42). A button, because it posts -- the thing it used to be was a link to a login that led back to the same link. */ .bpr-reveal-form { display: inline; } .bpr-reveal-form .btn-link { color: var(--c-primary); font-weight: 600; } .bpr-phone-number { font-weight: 700; color: var(--g1); } /* ---------- the messenger (apps/messaging) ---------- */ /* The usage line. Not an error at rest -- it is a number the sender should already know -- so it reads as information until it is spent, and only then takes the warning treatment. */ .usage-line { font-size: 14px; color: var(--g5); margin: 8px 0 0; line-height: 1.6; } .usage-line strong { color: var(--g1); } .usage-line-spent strong { color: var(--c-accent); } .thread-rows, .block-rows { list-style: none; margin: 0; padding: 0; } .thread-row + .thread-row { border-top: 1px solid var(--g13); } .thread-row-link { display: grid; gap: 2px 12px; padding: 14px 0; align-items: baseline; grid-template-columns: 1fr auto; } .thread-who { font-size: 15px; font-weight: 600; color: var(--g1); } /* Colour never carries the meaning alone: the word "New" is always present, so the row reads correctly in greyscale and to a screen reader. Same rule as the listing state chips. */ .thread-new { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; color: var(--white); background: var(--c-primary); } .thread-about { font-size: 14px; color: var(--g5); grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-when { font-size: 13px; color: var(--g8); grid-column: 2; grid-row: 1; text-align: right; } .thread-unread .thread-about { color: var(--g2); } .thread-subject { font-size: 15px; margin: 0; } .thread-subject a { color: var(--c-primary); font-weight: 600; } /* The conversation. Mine on the right, theirs on the left -- the one convention everybody already knows, so it needs no legend. */ .message-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .message { max-width: 42rem; padding: 12px 14px; border-radius: var(--r-media); background: var(--field); } .message-mine { margin-left: auto; background: var(--c-primary-lighter); } .message-head { display: flex; gap: 10px; align-items: baseline; font-size: 13px; margin-bottom: 4px; } .message-head strong { font-size: 14px; color: var(--g1); } .message-body { font-size: 15px; line-height: 1.6; color: var(--ink); word-break: break-word; } .reply-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; } .reply-form textarea { width: 100%; padding: 10px 12px; font: inherit; resize: vertical; min-height: 96px; background: var(--white); border: 0; border-radius: var(--r-tile); box-shadow: var(--ring); } .reply-form textarea:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; } .reply-form .btn { margin-top: 12px; } .block-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 10px 0; font-size: 14px; } .block-row + .block-row { border-top: 1px solid var(--g13); } /* ---------- the seller's row actions and the editor ---------- */ /* The actions sit under the row on a phone and beside it on a wide screen. `flex-wrap`, because four controls plus a state chip does not fit a 360px row and must not scroll sideways. */ .items-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 640px) { /* One column. At 360px the three-column row left the title about 90px and the controls wrapped into a ragged pile under a half-cropped price. Stacked, the photograph and the title keep one line, the state sits under them, and the controls get a row of their own. */ .items-row { grid-template-columns: minmax(0, 1fr); gap: 10px; } .items-state, .items-actions { justify-content: flex-start; } .items-thumb { flex-basis: 84px; width: 84px; height: 63px; } .items-bar { max-width: none; } } .inline-action { display: inline; margin: 0; } .btn-sm { padding: 5px 10px; font-size: 13px; } /* Destructive controls read as text, not as a button. A red button beside three grey ones is the easiest thing on the page to hit by accident, and this one goes to a confirmation page. */ .btn-link-danger { color: var(--c-accent); font-weight: 600; font-size: 13px; } .btn-link-danger:hover { text-decoration: underline; } .btn-danger { background: var(--c-accent); color: var(--c-accent-ink); } .btn-danger:hover { background: var(--c-accent-hover); } /* The existing photos on the edit form: a thumbnail with its keep checkbox under it. */ .edit-photos { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } .edit-photo { display: flex; flex-direction: column; gap: 6px; } .edit-photo img { width: 100%; height: auto; border-radius: var(--r-tile); object-fit: cover; } .edit-photo .auth-check { margin-top: 0; font-size: 13px; } .edit-photo .auth-check label { font-size: 13px; } /* ---------- account settings (ACCOUNT-AREA.md section 6) ---------- */ .form-saved { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--r-tile); font-size: 14px; color: #0f6b3f; background: #e4f5ec; } /* The read-only "Login data" block. A definition list, because that is what it is: three labels and three values, two of which are a credential standing in for itself. */ .settings-readonly { margin: 0; display: grid; gap: 4px 16px; grid-template-columns: max-content 1fr; } .settings-readonly dt { font-size: 14px; font-weight: 600; color: var(--g5); } .settings-readonly dd { margin: 0 0 8px; font-size: 15px; color: var(--g1); } .settings-readonly dd a { margin-left: 10px; font-size: 14px; color: var(--c-primary); font-weight: 600; } /* Said plainly, because the page still shows the old address after a change is requested -- which reads as the form failing if nothing explains it. */ .settings-pending { display: block; margin-top: 4px; font-size: 13px; color: #8a5a00; } .settings-avatar { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .settings-avatar img { border-radius: 50%; object-fit: cover; } .settings-avatar-blank { width: 96px; height: 96px; font-size: 32px; } .settings-avatar input[type="file"] { margin: 6px 0 10px; max-width: 380px; } @media (max-width: 560px) { /* Two columns of definition list do not fit a phone; the label stacks above its value. */ .settings-readonly { grid-template-columns: 1fr; } .settings-readonly dd { margin-bottom: 12px; } } /* ---------- saved searches (ACCOUNT-AREA.md section 8) ---------- */ /* The save control sits above the grid, so it has to be quiet enough not to compete with the first row of cards and present enough to be found. A ghost button and one line of help. */ .grid-tools { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .save-search-form { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; } .save-search-form .field-help { display: inline; margin: 0; } .alert-rows { list-style: none; margin: 0; padding: 0; } .alert-row { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 14px 0; } .alert-row + .alert-row { border-top: 1px solid var(--g13); } .alert-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .alert-what { font-size: 15px; font-weight: 600; color: var(--g1); } .alert-what:hover { color: var(--c-primary); } .alert-when { font-size: 13px; color: var(--g8); } /* A paused alert is dimmed *and* says so: a colour change alone does not survive greyscale or a screen reader, which is the rule the listing state chips and the message badge follow. */ .alert-paused .alert-what { color: var(--g6); } .alert-state { font-size: 13px; color: #8a5a00; } .alert-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } /* ---------- the account form system (DESIGN-SYSTEM.md section 5) ---------- */ /* Why this exists. `.auth-form` is a flex column in which every control is the full width of the card, which is right for a sign-in box of two fields and wrong for an editor of thirty. The business profile was nine cards of page-wide boxes -- a hex colour, seven opening hours and four video IDs, each as wide as the page -- with labels whose only separation from the control above was a 10px margin, and a Save button that inherited `.auth-form .btn { width: 100% }` and sat at the bottom of whichever card happened to be last, looking like it saved that card. These four primitives are what the editors share, so a page stops arranging its own: a **field** (the label/control/help/error unit), a **grid** to put fields beside each other, an **actions bar** that belongs to the form rather than to a card, and an **upload** row. */ /* The field. `gap` rather than margins, so the rhythm cannot drift between two pages that happen to order label, help and error differently. */ .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .field > label { margin: 0; font-size: 14px; font-weight: 600; color: var(--g2); } .field > input, .field > select, .field > textarea { width: 100%; } .field > .field-help, .field > .field-error { margin: 0; } /* The help text under a field sits closer to its control than to the next label, which is the whole of what makes a stack of fields readable as pairs rather than as a list. */ .field > .field-help { margin-top: -1px; } /* Fields beside each other. `auto-fit` with a 220px floor and no `fr` of its own -- the footer collapse (D-26) was exactly that mistake. A day of opening hours and a YouTube ID are short values, and a column of page-wide boxes for them reads as a form that does not know what it is asking for. */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; } /* For values that are shorter still: a time range, a hex colour. */ .form-grid.is-tight { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); } .field-wide { grid-column: 1 / -1; } /* A grid that follows a heading or a line of help needs the same space a field would have. */ .card > .form-grid, .form-grid + .form-grid { margin-top: 14px; } /* The actions bar. One bar at the end of the form, with the control at its natural width and a line saying what it does -- a save button belongs to the form, not to the card it fell into. The `.auth-form` override is the point: that rule makes every button a full-width banner. */ .form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; } .auth-form .form-actions .btn, .form-actions .btn { width: auto; margin-top: 0; } .form-actions-note { margin: 0; font-size: 13.5px; color: var(--g6); max-width: 46ch; } /* The save, kept on screen. The business profile is nine sections and about 4,000px tall, so a button at the end is a button a dealer has to go looking for -- and the one thing they must never fail to find is the one that keeps their work. Sticky with a bottom offset: it floats at the foot of the viewport for the whole of the form and settles into place at the end of it, which costs one declaration and no JavaScript. The card's own white background and ring are what make it read as a bar over the content rather than part of it. */ .form-actions-card { position: sticky; bottom: 12px; z-index: 5; } .form-actions-card { box-shadow: var(--ring), 0 6px 20px rgba(0, 0, 0, .10); } @media (max-width: 560px) { /* Stacked, the button is the widest thing in the bar and takes the full width -- which is what the thumb expects at the end of a long form. */ .form-actions { flex-direction: column-reverse; align-items: stretch; } .auth-form .form-actions .btn, .form-actions .btn { width: 100%; } } /* An upload. What is there now, the control that replaces it, and the way to remove it, on one line: a bare file input beside a 64px logo is two unrelated things sitting next to each other, and the relationship between them is the only thing a dealer needs to understand. */ .upload-field { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .upload-current { flex: 0 0 auto; display: grid; place-items: center; padding: 6px; background: var(--field); border-radius: var(--r-tile); } .upload-current img { display: block; border-radius: 6px; max-width: 100%; height: auto; } .upload-controls { flex: 1 1 240px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } /* The browser's own file control is a grey system button with the file name beside it, and it is the one control on these pages that does not belong to this site. Only the button half is restyled: the text beside it is the browser's and is where "no file chosen" has to stay. */ input[type="file"] { font-family: inherit; font-size: 14px; color: var(--g5); } input[type="file"]::file-selector-button { margin-right: 12px; height: 34px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--ring); color: var(--g2); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .16s; } input[type="file"]::file-selector-button:hover { background: var(--g14); } input[type="file"]:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } /* ---------- business-profile editor (ACCOUNT-AREA.md section 7) ---------- */ /* A thumbnail of what is already there. Shown because a file input cannot say "there is already a logo", and a dealer who cannot see one uploads a second. It is a plate inside `.upload-current` now, so the picture and the control that replaces it read as one field. */ .brand-current { display: block; } .brand-current img { display: block; border-radius: 6px; background: var(--white); } /* The colour field: the hex a dealer typed, shown as the colour it is. A text input saying "#1a73e8" is a string; the swatch is the answer to "is that the blue I meant". Painted by bpr.js from the input's own value, and only when that value is a hex colour. */ .swatch-field { display: flex; align-items: center; gap: 12px; } .swatch-field input { flex: 0 1 180px; } .swatch { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-tile); box-shadow: var(--ring); background: var(--field); } /* The category blocks. The parent/child nesting is structural, not decoration -- the cascade is about that relationship -- so the group is a panel with the make list inside it rather than sixty checkboxes separated by hairlines. Sixty, on one page, is the longest list in the account area and the one most worth being able to skim. */ .bpr-box-check { padding: 12px 14px; border-radius: var(--r-tile); background: var(--white); box-shadow: var(--ring); } .bpr-box-check + .bpr-box-check { margin-top: 10px; } .bpr-box-check > .auth-check { margin-top: 0; } .bpr-box-check > .auth-check label { font-size: 15px; color: var(--g1); } /* Indented and set off by a rule, so the makes read as belonging to the category above them rather than as a second list that happens to follow it. */ .bpr-children { margin: 10px 0 2px; padding: 10px 0 0 14px; border-top: 1px solid var(--g13); border-left: 2px solid var(--c-primary-lighter); } /* ---------- the money surface (ACCOUNT-AREA.md section 11) ---------- */ .wallet-balance { font-size: 14px; color: var(--g5); white-space: nowrap; } .wallet-balance strong { color: var(--g1); } /* The cart. Live renders this as a CSS grid rather than a table and the class names are its own; on a phone the row stacks, because five columns at 360px is a horizontal scroll. */ .osp-cart { display: flex; flex-direction: column; } .osp-cart-head-row, .osp-cart-row { display: grid; gap: 10px; align-items: baseline; padding: 12px 0; grid-template-columns: 3rem 1fr 3rem 7rem 5rem; } .osp-cart-head-row { font-size: 13px; font-weight: 700; color: var(--g6); border-bottom: 1px solid var(--g12); } .osp-cart-row + .osp-cart-row { border-top: 1px solid var(--g13); } .osp-cart-row .prod { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .osp-cart-row .pric { font-weight: 700; color: var(--g1); } .osp-pay-button { list-style: none; margin: 0 0 8px; padding: 0; } .osp-pay-button .auth-check { align-items: flex-start; padding: 10px 0; } .osp-pay-button input[disabled] + label { color: var(--g8); } @media (max-width: 640px) { .osp-cart-head-row { display: none; } .osp-cart-row { grid-template-columns: 1fr auto; row-gap: 4px; } .osp-cart-row .code { display: none; } } /* Membership and pack cards. `auto-fit` with no `fr` beside it -- the footer bug (D-26) was exactly that mistake, and three tier cards is where it would show again. */ .tier-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .tier-card { padding: 20px; border-radius: var(--r-card); box-shadow: var(--ring); background: var(--white); } .tier-card h3 { font-size: 18px; margin-bottom: 6px; } .tier-price { font-size: 22px; font-weight: 800; color: var(--g1); margin-bottom: 12px; } .tier-price .muted { font-size: 13px; font-weight: 400; } /* "Which plan am I on" is the first question this page answers and it was the quietest thing on it -- one muted sentence above a grid of loud cards. */ .plan-now { display: flex; flex-direction: column; gap: 2px; } .plan-now-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g5); } .plan-now-name { margin: 0 0 2px; font-size: 26px; font-weight: 800; color: var(--g1); line-height: 1.15; } .plan-now .muted { margin: 0; font-size: 14px; } /* And again on the card itself, because the grid is where the comparison happens. */ .tier-card.is-current { outline: 2px solid var(--c-primary); outline-offset: -2px; } .tier-flag { display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--c-primary); color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .tier-saving { font-size: 13px; margin: -8px 0 12px; color: var(--c-primary); font-weight: 600; } /* A plan's benefits have to *read* as a list. They did not: the global reset at the top of this file sets `list-style: none` on every ul, this rule repeated it, and the result was four benefits rendering as four unmarked lines that looked like a paragraph. Ticks rather than discs, because on a pricing card the marker is doing a second job -- it says "included" -- and a withheld row gets a muted dash instead, which is the comparison the ladder is selling. */ /* A plan's benefits have to *read* as a list. They did not: the global reset at the top of this file sets `list-style: none` on every ul, so eight benefits rendered as eight unmarked lines that scanned as a paragraph — on the card where the whole job is comparing one tier against the next. The marker is a real element in the template, not a `::before`. It is doing semantic work (tick = included, dash = withheld) and it survives a stale stylesheet, which is how the first attempt at this shipped looking unchanged. */ .tier-benefits { list-style: none; margin: 0 0 14px; padding: 0; font-size: 14px; color: var(--g5); } .tier-benefits li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; line-height: 1.45; } .tier-benefits .tick { flex: 0 0 auto; color: var(--c-primary); font-weight: 700; } .tier-benefits .tick-no { color: var(--g5); font-weight: 400; } .tier-card .auth-form { margin: 0; } .tier-card .btn { margin-top: 10px; width: 100%; } /* The boost picker: three durations compared side by side, then the checklist. */ /* The search belongs to the list it filters, so it sits in that card's header rather than in a full-width panel of its own above the page -- which made a filter look like a step in the flow. The control itself is `.pill-bar`, the one `/user/items` already uses to search listings. The first attempt here was a bare `` with a ghost button, which looked broken for a reason worth remembering: **this stylesheet has no global input rule**. Form fields are styled inside `.auth-form` and nowhere else, so an input outside it renders as the raw browser widget. Reusing the pill gets the border, the icon, the focus ring and the mobile stacking for free, and makes the two listing-search boxes on this site look alike. */ .boost-head { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; } .boost-head .sec-sub { margin: 0; flex: 0 0 auto; } .boost-head .boost-search { margin: 0; } .boost-cleared { font-size: 13px; margin: -4px 0 10px; } /* The confirmation screen: one price per row, then the totals block. */ .boost-line-price { flex: 0 0 auto; font-weight: 700; color: var(--g1); } .boost-sum { margin-top: 14px; border-top: 1px solid var(--g6, #e4e4e7); } .boost-sum .pay-row { display: flex; justify-content: space-between; gap: 12px; } .boost-sum .pay-row-total { border-top: 1px solid var(--g6, #e4e4e7); font-size: 16px; } .boost-confirm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; } .boost-options { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .boost-radio { position: absolute; opacity: 0; width: 0; height: 0; } .boost-option { display: block; position: relative; cursor: pointer; padding: 14px; border: 2px solid var(--g6, #e4e4e7); border-radius: var(--r-card); background: var(--white); } .boost-radio:checked + .boost-option { border-color: var(--c-primary); } /* Focus has to survive the visually-hidden input: without this the whole control is keyboard-operable and invisible while you operate it. */ .boost-radio:focus-visible + .boost-option { outline: 2px solid var(--c-primary); outline-offset: 2px; } .boost-flag { position: absolute; top: -10px; right: 10px; font-size: 11px; font-weight: 700; background: var(--c-primary); color: var(--white); padding: 2px 8px; border-radius: var(--r-pill); } .boost-name { display: block; font-weight: 700; color: var(--g1); } .boost-price { display: block; font-size: 19px; font-weight: 800; color: var(--g1); margin: 4px 0; } .boost-price small { font-size: 12px; font-weight: 400; color: var(--g5); } .boost-rate { display: block; font-size: 13px; line-height: 1.45; } .boost-row { display: flex; align-items: center; gap: 12px; } .boost-row-head { border-bottom: 1px solid var(--g6, #e4e4e7); padding-bottom: 10px; } .boost-row.is-boosted { opacity: 0.62; } .boost-row .items-meta { flex: 1 1 auto; min-width: 0; } .boost-total { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 2; } .boost-total-sum { margin: 0; font-size: 16px; } .boost-total .btn { margin: 0; } /* The payment and wallet statements. Same stacking rule as the cart. */ .pay-rows { list-style: none; margin: 0; padding: 0; } .pay-row { display: grid; gap: 4px 12px; padding: 12px 0; font-size: 14px; grid-template-columns: 8rem 1fr 7rem 4rem; } .pay-row + .pay-row { border-top: 1px solid var(--g13); } .pay-source { font-weight: 600; color: var(--g1); } .pay-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--g6); grid-column: 1 / -1; } .pay-what { color: var(--g5); } .pay-amount { font-weight: 700; text-align: right; } .pay-when { color: var(--g8); text-align: right; } .referral-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; } @media (max-width: 640px) { .pay-row { grid-template-columns: 1fr auto; } } /* ---------- the two-month availability check (D-74) ---------- */ /* A real , so the browser owns the backdrop, the Escape key and the focus trap once static/js/listing-confirm.js has called showModal(). Styled to work in both states: open as a modal it is centred by the first block, and open *without* the script -- the `open` attribute is in the markup -- it is a panel in the page flow that still answers. */ .confirm-modal { border: 0; padding: 0; background: transparent; max-width: min(560px, 100%); width: 100%; margin: 24px auto; color: var(--ink); } .confirm-modal::backdrop { background: rgba(0, 0, 0, .5); } .confirm-box { background: var(--white); border-radius: var(--r-card); box-shadow: 0 10px 40px rgba(0, 0, 0, .3); display: flex; flex-direction: column; } .confirm-head { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 6px; } .confirm-title { font-size: 18px; font-weight: 700; color: var(--g1); } .confirm-sub { font-size: 13px; color: var(--g5); } .confirm-list { display: flex; flex-direction: column; padding: 16px 20px 0; gap: 4px; } .confirm-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--g13); } .confirm-row:last-child { border-bottom: 0; } .confirm-thumb { flex: 0 0 auto; width: 72px; height: 54px; display: block; } .confirm-thumb img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--r-tile); display: block; } .confirm-facts { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .confirm-name { font-size: 14px; font-weight: 700; color: var(--g2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .confirm-name:hover { color: var(--c-primary); } .confirm-meta { font-size: 12px; color: var(--g7); } /* The two answers carry the same weight on purpose -- see the template's comment. The sold button gets the accent on its *text* only, which separates the two without making either of them the one a hurried seller presses without reading. */ .confirm-actions { display: flex; gap: 6px; flex: 0 0 auto; } .confirm-sold { color: var(--c-accent); } .confirm-sold:hover { color: var(--c-accent-hover); } .confirm-more { padding: 10px 20px 0; font-size: 13px; color: var(--g7); } .confirm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 20px; } @media (max-width: 560px) { .confirm-row { flex-wrap: wrap; } .confirm-actions { width: 100%; } .confirm-actions .btn { flex: 1 1 0; } } /* ---------- a sold listing's page (D-77) ---------- */ /* The page stays, the car does not. Red-brown rather than the accent: this is the one banner on the site that is neither a success nor a warning -- it is a fact about the thing the visitor came for, and it has to read as such at a glance, above the title. */ .sold-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; margin-bottom: 14px; border-radius: var(--r-tile); background: #fde8e2; color: #8a2200; } .sold-banner strong { font-size: 15px; font-weight: 700; } .sold-banner span { font-size: 13px; } .sold-tag { display: inline-block; vertical-align: middle; padding: 3px 9px; border-radius: 999px; background: #fde8e2; color: #8a2200; font-size: 12px; font-weight: 700; } #sold-box .muted { font-size: 14px; } /* --- /pricing, the hub ----------------------------------------------------------------------- Built to the measured grammar of edmunds.com/sedan/articles/sedan-buying-guide: H1 40/700 with one sentence under it, H2 24/700 per section, and cards that are a 3:2 photograph, a small uppercase label and a 16px/700 title -- with no body copy under any of them. That last part is the discipline: the whole reference page is 3,597 characters of text, and a card with a paragraph on it turns a guide back into a report. */ .pricing-hero h1 { font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; } .hero-dek { margin: 10px 0 22px; max-width: 60ch; font-size: 17px; line-height: 1.5; color: var(--g5); } .pricing-section > h2, .pricing-hero + .card .ask-title, #faq > h2 { font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--g1); margin-bottom: 6px; } .section-dek { margin: 0 0 18px; max-width: 70ch; font-size: 15px; line-height: 1.5; color: var(--g6); } .pricing-section > h2 + .pcards, .pricing-section > h2 + .chips { margin-top: 18px; } .pricing-section, #faq { scroll-margin-top: 88px; } /* The search. It was a flex row of three unlabelled pill controls that collapsed into each other -- a grid with real labels is both legible and the only version that survives a phone. */ .pricing-ask .ask-form { display: grid; gap: 12px; margin-top: 16px; align-items: end; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .6fr) auto; } .ask-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ask-field label { font-size: 13.5px; font-weight: 600; color: var(--g3); } .ask-field select, .ask-field input { width: 100%; height: 46px; padding: 0 14px; border-radius: var(--r-tile); border: 1px solid #7e838d; background: var(--white); font: inherit; font-size: 15px; color: var(--ink); appearance: none; -webkit-appearance: none; } .ask-field select { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236c6c6c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 10px 6px; } .ask-field select:focus-visible, .ask-field input:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; border-color: var(--c-primary); } .pricing-ask .btn-accent { height: 46px; padding: 0 24px; border-radius: var(--r-tile); white-space: nowrap; } /* The card. One component for every row on the page -- budget, brand, model, guide -- because the reference page uses one too, and six card shapes is six things to look at before you have looked at a car. */ .pcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); } .pcard { display: block; color: var(--g1); } .pcard-media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-media); background: var(--g13); } .pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .pcard:hover .pcard-media img { transform: scale(1.04); } /* No photograph is better than the wrong photograph: a flat field, never a stand-in car. */ .pcard-empty { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--g13), var(--field)); } .pcard-badge { position: absolute; left: 10px; bottom: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-tile); background: rgba(255, 255, 255, .94); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); } .pcard-badge img { width: 26px; height: 26px; object-fit: contain; } .pcard-body { display: block; padding: 12px 2px 0; } .pcard-eyebrow { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g8); } .pcard-title { display: block; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--g1); } .pcard:hover .pcard-title { color: var(--c-primary); } .pcard-meta { display: block; margin-top: 4px; font-size: 13.5px; color: var(--g6); } /* Plain links where a list would otherwise sprawl -- the reference page does exactly this with its sedan types, and it is what keeps eleven low-stock brands off the picture grid. */ .chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .chips a { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); box-shadow: var(--ring); background: var(--white); font-size: 14px; font-weight: 600; color: var(--g2); } .chips a span { font-size: 12.5px; font-weight: 400; color: var(--g8); } .chips a:hover { box-shadow: 0 0 0 1px var(--c-primary); color: var(--c-primary); } .chips-wide a { border-radius: var(--r-tile); } /* The arithmetic, in a drawer. Open it and the old block is there unchanged. */ .method-details > summary { cursor: pointer; font-size: 16px; font-weight: 700; color: var(--g2); list-style: none; } .method-details > summary::-webkit-details-marker { display: none; } .method-details > summary::before { content: "＋ "; color: var(--g8); } .method-details[open] > summary::before { content: "－ "; } .method-details[open] > summary { margin-bottom: 18px; } @media (max-width: 760px) { .pricing-hero h1 { font-size: 30px; } .hero-dek { font-size: 16px; } .pricing-section > h2, #faq > h2 { font-size: 21px; } .pricing-ask .ask-form { grid-template-columns: 1fr 1fr; } .pricing-ask .ask-field:first-child { grid-column: 1 / -1; } .pricing-ask .btn-accent { grid-column: 1 / -1; width: 100%; } .pcards { gap: 16px; } } /* --- the blog ------------------------------------------------------------------------------- These classes existed in `blog_article.html` and `blog_index.html` and had **no rules at all** -- `grep -c "blg-" ` returned 0 -- so 762 articles were rendering at browser defaults: 16px Times-ish body, 1.2 line-height, no measure, headings running into their paragraphs. On the pages carrying citations from twelve Wikipedia articles. The reading scale is carspace's (`.post-body`, main.css §blog), which is a measured 1.05rem at 1.85 and is the right call: a long article wants a taller line than a listing card does. It is restated on our own tokens rather than imported, and scoped under `.blg-body` so none of it leaks onto a page that happens to render a table. */ .blg-article { max-width: 760px; margin-inline: auto; } .blg-h1 { font-size: 36px; line-height: 1.18; font-weight: 700; letter-spacing: -.015em; color: var(--g0); } .blg-byline { margin-top: 12px; font-size: 13.5px; color: var(--g6); } .blg-hero { display: block; width: 100%; max-height: 440px; object-fit: cover; border-radius: var(--r-media); margin-bottom: 28px; } /* The dek is the article's own one-sentence summary, so it reads as a standfirst rather than as a second headline -- which is what an unstyled `h2` directly under an `h1` looks like. */ .blg-dek { font-size: 20px; line-height: 1.5; font-weight: 400; color: var(--g5); margin: 0 0 28px; padding-left: 16px; border-left: 3px solid var(--c-primary); } .blg-body { font-size: 17px; line-height: 1.85; color: var(--g2); } .blg-body > p { margin: 0 0 1.35em; } .blg-body h2 { font-size: 25px; line-height: 1.3; font-weight: 700; margin: 2.1em 0 .9em; color: var(--g0); } .blg-body h3 { font-size: 20px; line-height: 1.35; font-weight: 700; margin: 1.8em 0 .7em; color: var(--g1); } .blg-body h2:first-child, .blg-body h3:first-child { margin-top: 0; } .blg-body ul, .blg-body ol { margin: 0 0 1.35em; padding-left: 1.4em; } .blg-body li { margin-bottom: .5em; line-height: 1.75; } .blg-body a { color: var(--c-primary); text-decoration: underline; text-decoration-color: var(--c-primary-light); text-underline-offset: 2px; } .blg-body a:hover { text-decoration-color: var(--c-primary); } .blg-body strong { font-weight: 700; color: var(--g0); } .blg-body img { display: block; max-width: 100%; height: auto; border-radius: var(--r-media); margin: 1.8em 0; } .blg-body figure { margin: 1.8em 0; } .blg-body figcaption { margin-top: 8px; font-size: 13.5px; color: var(--g6); } .blg-body blockquote { margin: 1.8em 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--c-primary); color: var(--g5); font-style: italic; } /* A legacy article's table arrives with no classes of its own, so without this it renders as unspaced columns running off the measure. Scrollable rather than reflowed: a price table that has been turned into a list is no longer a table. */ .blg-body table { width: 100%; margin: 0 0 1.6em; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; } .blg-body th, .blg-body td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--g13); } .blg-body th { font-weight: 700; color: var(--g1); white-space: nowrap; } .blg-body hr { margin: 2.2em 0; border: 0; border-top: 1px solid var(--g13); } /* The index. A row of text links was all this had. */ .blg-row { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--g13); } .blg-row:first-child { border-top: 0; padding-top: 0; } .blg-thumb { flex: 0 0 168px; } .blg-thumb img { width: 168px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-tile); display: block; } .blg-meta { min-width: 0; } .blg-title { font-size: 18px; line-height: 1.35; font-weight: 700; margin: 0 0 6px; } .blg-title a { color: var(--g1); } .blg-title a:hover { color: var(--c-primary); } .blg-dek-row { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; color: var(--g6); } @media (max-width: 760px) { .blg-h1 { font-size: 27px; } .blg-dek { font-size: 17px; } .blg-body { font-size: 16px; } .blg-body h2 { font-size: 21px; } .blg-body h3 { font-size: 18px; } .blg-row { gap: 12px; } .blg-thumb { flex: 0 0 110px; } .blg-thumb img { width: 110px; } } /* The hero banner. The reference page puts a photograph beside its headline rather than under it, so the first thing on the page is a car and not a paragraph. Ours is a real listing -- named, priced and clickable -- which makes the banner a way into the inventory as well as a picture. Text and picture side by side above 900px, stacked below it, and the stat row runs the full width underneath both. */ .pricing-hero { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; } .hero-text { min-width: 0; } .hero-stats { grid-column: 1 / -1; } .hero-banner { position: relative; display: block; border-radius: var(--r-media); overflow: hidden; background: var(--g13); } /* `height: auto` is load-bearing: the tag carries width/height attributes so the browser can reserve the space before the image arrives, and `aspect-ratio` is ignored outright when both dimensions are already specified. Without this the banner rendered at the file's own 765x504 -- a portrait box in a landscape slot. */ .hero-banner img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s ease; } .hero-banner:hover img { transform: scale(1.03); } /* A gradient rather than a solid bar: the caption has to stay readable over a photograph we have never seen, and the plate is often the brightest thing in the lower third. */ .hero-caption { position: absolute; inset: auto 0 0 0; padding: 28px 16px 14px; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0)); } .hero-caption strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hero-caption span { font-size: 13px; opacity: .9; } @media (max-width: 900px) { .pricing-hero { grid-template-columns: 1fr; } .hero-banner { order: -1; } }