/* Shared component layer for both verticals. Reads ONLY semantic tokens * (--c-*, --radius, --shadow, --font-*) — never a raw hex. The active token * set comes from body.theme-trailer / body.theme-golf (tokens_trailer.css / * tokens_golf.css). Per-dealer accent overrides layer on top via inline * custom properties on — nothing here is vertical-specific except the * explicit `.theme-trailer` / `.theme-golf` scoped rules that implement each * spec's signature layout language (hard edges vs. soft shadows, uppercase * tracking vs. warm rounding, etc). */ *, *::before, *::after { box-sizing: border-box; } body[class*="theme-"] { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.55; -webkit-font-smoothing: antialiased; } body[class*="theme-"] a { color: var(--c-link); } body[class*="theme-"] a:hover { text-decoration: none; } body[class*="theme-"] :focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; } .skip-link { position: absolute; left: 1rem; top: -3rem; background: var(--c-surface); color: var(--c-text); padding: 0.6rem 1rem; border-radius: var(--radius); border: var(--border-w) solid var(--c-border); z-index: 100; transition: top 0.15s ease; } .skip-link:focus { top: 1rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- brand logos ---------- */ .brand-logo { display: inline-flex; align-items: center; gap: 0.55rem; } .brand-logo__mark { display: block; flex: none; } .brand-logo__mark .brand-logo__stroke { fill: none; stroke: var(--c-brand-contrast); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } .brand-logo__mark .brand-logo__accent { fill: var(--c-accent); stroke: none; } .brand-logo--golf .brand-logo__mark .brand-logo__sun { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-linecap: round; } .brand-logo--golf .brand-logo__mark .brand-logo__stroke { fill: var(--c-brand-contrast); stroke: none; } .brand-logo--golf .brand-logo__mark .brand-logo__accent { fill: var(--c-brand-contrast); opacity: 0.55; } .brand-logo__word { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: var(--tracking-display); white-space: nowrap; } .theme-trailer .brand-logo__word { text-transform: uppercase; font-size: 1.35rem; } .brand-logo__word-primary { color: var(--c-brand-contrast); } .brand-logo__word-accent { color: var(--c-accent); } /* Compact "powered by" credit mark on dealer sites — icon only. */ .site-footer__powered-by { display: inline-flex; align-items: center; gap: 0.35rem; color: inherit; font-weight: 700; vertical-align: middle; } .site-footer__powered-by .brand-logo__mark .brand-logo__stroke, .site-footer__powered-by .brand-logo__mark .brand-logo__sun { stroke: currentColor; } .site-footer__powered-by .brand-logo__mark .brand-logo__accent, .site-footer__powered-by .brand-logo--golf .brand-logo__mark .brand-logo__stroke, .site-footer__powered-by .brand-logo--golf .brand-logo__mark .brand-logo__accent { fill: currentColor; opacity: 0.9; } .site-footer__powered-by .brand-logo__mark { width: 20px; height: 15px; } /* ---------- chrome ---------- */ .site-header { background: var(--c-brand); color: var(--c-brand-contrast); position: sticky; top: 0; z-index: 40; } .theme-trailer .site-header { border-bottom: var(--border-w) solid var(--weld-500); } .site-header__inner { max-width: 1200px; margin: 0 auto; padding: 0.85rem 1.25rem; display: flex; align-items: center; gap: 2rem; } /* Scoped with .site-header (not just the bare class) so this beats `body[class*="theme-"] a` — without it, plain-text brand links (the dealer-site header, which has no brand_logo span to carry its own color) inherited the muted --c-link and went near-illegible on a dark header. */ .site-header .site-header__brand { color: var(--c-brand-contrast); text-decoration: none; display: inline-flex; align-items: center; } .site-header__nav { display: flex; gap: 0.4rem; margin-left: auto; align-items: center; flex-wrap: wrap; } /* Scoped with .site-header so this beats `body[class*="theme-"] a` (which otherwise paints nav links the muted --c-link and made them read grey). */ .site-header .site-header__nav a { color: var(--c-brand-contrast); text-decoration: none; opacity: 1; font-weight: 700; font-size: 0.92rem; padding: 0.4rem 0.7rem; border-radius: var(--radius); transition: color 0.15s ease, background-color 0.15s ease; } .site-header .site-header__nav a:hover { background: color-mix(in srgb, var(--c-brand-contrast) 16%, transparent); } .theme-trailer .site-header .site-header__nav a { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.82rem; border-radius: 2px; } /* Dealer CTA in the nav — accent pill so "For Dealers" reads as the one action for the supply side, distinct from buyer browse links. */ .site-header .site-header__nav a.nav-cta { background: var(--c-accent); color: var(--c-accent-contrast); } .site-header .site-header__nav a.nav-cta:hover { background: var(--c-accent); filter: brightness(1.06); } /* The golf spec's one decorative element: sun-gradient hairline under the header. */ .site-header::after { content: ""; position: absolute; inset: auto 0 -3px 0; height: 3px; background: var(--c-hairline-gradient); } .theme-trailer .site-header { position: sticky; } .theme-trailer .site-header::after { content: none; } .site-main { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; min-height: 50vh; } .site-footer { margin-top: 4rem; background: var(--c-brand); color: var(--c-brand-contrast); } .site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 2rem 1.25rem; } .site-footer__join { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 0.6rem; font-weight: 700; } .theme-trailer .site-footer__join { text-transform: uppercase; letter-spacing: 0.02em; } .site-footer__brand { opacity: 0.75; font-size: 0.85rem; margin: 0; } .site-footer__brand a { color: inherit; text-decoration: underline; } .flash { padding: 0.75rem 1rem; border-radius: var(--radius); margin: 0 0 1rem; font-weight: 600; } .flash--notice { background: var(--c-positive); color: var(--c-positive-contrast); } .flash--alert { background: var(--c-accent); color: var(--c-accent-contrast); } /* ---------- buttons & inputs (shared, token-driven) ---------- */ .btn, .filters__submit, .lead-form__submit, .claim__activate, .hero__search button[type="submit"], .hero__search input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--c-accent); color: var(--c-accent-contrast); border: none; border-radius: var(--radius); font: inherit; font-weight: 700; padding: 0.65rem 1.1rem; cursor: pointer; transition: transform 0.1s ease, filter 0.15s ease; } .btn:hover, .filters__submit:hover, .lead-form__submit:hover, .claim__activate:hover, .hero__search button[type="submit"]:hover, .hero__search input[type="submit"]:hover { filter: brightness(1.06); } .btn:active, .filters__submit:active, .lead-form__submit:active, .claim__activate:active { transform: translateY(1px); } .theme-trailer .filters__submit, .theme-trailer .lead-form__submit, .theme-trailer .claim__activate, .theme-trailer .hero__search input[type="submit"] { text-transform: uppercase; letter-spacing: 0.05em; border-radius: 2px; } .theme-golf .filters__submit, .theme-golf .lead-form__submit, .theme-golf .claim__activate, .theme-golf .hero__search input[type="submit"] { box-shadow: var(--shadow-sm); } input, select, textarea { font: inherit; } select, input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="color"], textarea { border: var(--border-w) solid var(--c-input-border); border-radius: var(--radius); padding: 0.5rem 0.6rem; background: var(--c-surface); color: var(--c-text); } select:focus, input:focus, textarea:focus { border-color: var(--c-input-focus); } /* ---------- unit cards ---------- */ .unit-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); } .unit-card { background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .theme-golf .unit-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .theme-trailer .unit-card:hover { border-color: var(--c-accent); } .unit-card__link { display: block; color: inherit; text-decoration: none; } .unit-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--c-border); overflow: hidden; } .unit-card__photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; } .unit-card:hover .unit-card__photo { transform: scale(1.03); } .unit-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, var(--c-placeholder-start), var(--c-placeholder-end)); color: var(--c-placeholder-text); font-size: 0.85rem; font-weight: 600; padding: 1rem; } .theme-trailer .unit-card__placeholder { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c-placeholder-text) 12%, transparent) 0 2px, transparent 2px 14px), linear-gradient(135deg, var(--c-placeholder-start), var(--c-placeholder-end)); } .unit-card__badges { position: absolute; top: 0.5rem; left: 0.5rem; right: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; } .unit-card__body { padding: 0.9rem 1rem 1rem; } .unit-card__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin: 0 0 0.3rem; line-height: 1.15; } .unit-card__price { color: var(--c-price); font-weight: 800; font-size: 1.3rem; margin: 0 0 0.45rem; font-variant-numeric: var(--font-numeric-variant); } .unit-card__delivered { color: var(--c-text-secondary); font-size: 0.82rem; font-weight: 600; margin: -0.3rem 0 0.5rem; } .deal-badge { display: inline-block; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.12rem 0.45rem; border-radius: 999px; vertical-align: middle; margin-left: 0.4rem; } .deal-badge--great_deal { background: var(--c-positive); color: var(--c-positive-contrast); } .deal-badge--good_deal { background: color-mix(in srgb, var(--c-positive) 22%, var(--c-surface)); color: var(--c-text); border: 1px solid var(--c-positive); } .deal-badge--fair { background: var(--c-badge-neutral-bg); color: var(--c-badge-neutral-text); } .deal-badge--above_market { background: var(--c-badge-neutral-bg); color: var(--c-text-secondary); } .vdp__deal { margin: 0 0 0.6rem; } .vdp__deal-detail { font-size: 0.82rem; color: var(--c-text-secondary); margin-left: 0.4rem; } .unit-card__dealer { color: var(--c-text-secondary); font-size: 0.85rem; margin: 0.6rem 0 0.5rem; display: flex; align-items: baseline; gap: 0.3rem; flex-wrap: wrap; } .unit-card__cta { color: var(--c-accent-text); font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.3rem; } .unit-card__cta::after { content: "→"; transition: transform 0.15s ease; } .unit-card:hover .unit-card__cta::after { transform: translateX(3px); } .theme-trailer .unit-card__cta { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; } .theme-trailer .unit-card__cta::after { content: "›"; } /* ---------- signature: Spec Bar (trailer) ---------- */ .spec-bar { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500; background: var(--c-spec-bar-bg); color: var(--c-spec-bar-text); padding: 0.45rem 0.6rem; border-radius: 2px; margin: 0.35rem 0; overflow-x: auto; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em; border-left: 3px solid var(--c-spec-bar-sep); } .spec-bar__sep { color: var(--c-spec-bar-sep); margin: 0 0.4rem; } .vdp__specbar-wrap .spec-bar { font-size: 0.85rem; padding: 0.6rem 0.75rem; } /* ---------- signature: Street-Legal Badges (golf) ---------- */ .badge-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; } .badge { font-size: 0.76rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--c-badge-neutral-bg); color: var(--c-badge-neutral-text); border: 1px solid var(--c-badge-neutral-border); display: inline-flex; align-items: center; gap: 0.3rem; line-height: 1.2; } .theme-trailer .badge { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.7rem; } .badge--street-legal { background: var(--c-positive); border-color: var(--c-positive); color: var(--c-positive-contrast); } .badge--street-legal::before { content: "✓"; font-weight: 800; } .badge--lifted { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-contrast); } .badge--seats::before { content: "👤"; font-size: 0.85em; } .badge--power::before { content: "⚡"; font-size: 0.85em; } .unit-card__badges .badge:not(.badge--street-legal):not(.badge--lifted) { background: color-mix(in srgb, var(--c-surface) 92%, transparent); backdrop-filter: blur(2px); box-shadow: var(--shadow-sm); } .unit-card__badges .badge--street-legal, .unit-card__badges .badge--lifted { box-shadow: var(--shadow-sm); } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(155deg, var(--c-hero-bg-start), var(--c-hero-bg-end)); color: var(--c-hero-text); border-radius: var(--radius-lg); padding: 3.5rem 2.25rem; isolation: isolate; } .hero__inner { position: relative; z-index: 1; max-width: 640px; } .hero h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); font-size: 2.75rem; line-height: 1.05; margin: 0 0 1.1rem; } .hero__eyebrow { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-hero-text-secondary); margin: 0 0 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem; } .hero__tagline { color: var(--c-hero-text-secondary); font-size: 1.05rem; margin: -0.5rem 0 1.25rem; max-width: 46ch; } .hero__search { display: flex; gap: 0.6rem; max-width: 520px; flex-wrap: wrap; } .hero__search select, .hero__search input[type="text"] { font: inherit; flex: 1; min-width: 180px; padding: 0.7rem 0.8rem; border-radius: var(--radius); border: none; color: var(--c-text); } /* AI Buying Assistant search box: same pill treatment as the type-select search, wider to give a plain-English sentence room to breathe. */ .hero__assistant-label { color: var(--c-hero-text-secondary); font-size: 0.85rem; font-weight: 600; margin: 0.9rem 0 0.4rem; } .hero__search--assistant { max-width: 100%; } .hero__search--assistant input[type="text"] { min-width: 260px; } .hero__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; } /* Solid, high-contrast pills that read as tappable on any hero (the faint translucent version washed out on both the dark steel and green heroes). */ .chip { background: var(--c-surface); color: var(--c-link); text-decoration: none; padding: 0.55rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: 0.92rem; border: 1px solid transparent; transition: color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .chip:hover { color: var(--c-accent-text); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .theme-trailer .chip { border-radius: 2px; } .chip--primary { background: var(--c-accent); color: var(--c-accent-contrast); border-color: transparent; } .chip--primary:hover { color: var(--c-accent-contrast); filter: brightness(1.04); } /* Location search (ZIP + "Near me") at the top of the filter sidebar. */ .filter-group--geo .geo-search { display: flex; gap: 0.4rem; } .geo-search__zip { flex: 1; min-width: 0; } .geo-search__near { flex: none; width: 2.5rem; cursor: pointer; font-size: 1rem; line-height: 1; background: var(--c-surface); border: var(--border-w) solid var(--c-input-border); border-radius: var(--radius); color: var(--c-text); } .geo-search__near:hover { border-color: var(--c-input-focus); } .geo-search__active { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--c-accent-text); font-weight: 600; } /* ---------- premium dealer website (home + inventory) ---------- */ /* Anchored sections (Financing, About/Contact) live on one rich home page — offset them so the sticky header never covers the destination heading. */ .dealer-site section[id] { scroll-margin-top: 5.5rem; } .dealer-header__brand { flex-direction: column; align-items: flex-start; gap: 0; } .dealer-header__name { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.15; letter-spacing: var(--tracking-display); } .theme-trailer .dealer-header__name { text-transform: uppercase; font-size: 1.25rem; } .dealer-header__locale { font-size: 0.72rem; font-weight: 600; opacity: 0.8; } .dealer-header__stock { font-size: 0.76rem; font-weight: 700; white-space: nowrap; padding: 0.3rem 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--c-brand-contrast) 15%, transparent); color: var(--c-brand-contrast); } .theme-trailer .dealer-header__stock { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.68rem; } .dealer-header__call { white-space: nowrap; } .dealer-hero__stock { color: var(--c-hero-text); font-weight: 700; font-size: 1rem; margin: -0.5rem 0 1.1rem; } .dealer-hero__stock strong { color: var(--c-accent); font-size: 1.15em; } .dealer-featured__more { margin: 1.25rem 0 0; } .dealer-featured__link { font-weight: 700; color: var(--c-accent-text); text-decoration: none; } .dealer-featured__link:hover { text-decoration: underline; } /* Financing CTA band — the strongest lead-driving surface on the page, so it reuses the hero's high-contrast gradient treatment rather than a quiet card. */ .financing-band { background: linear-gradient(155deg, var(--c-hero-bg-start), var(--c-hero-bg-end)); color: var(--c-hero-text); border-radius: var(--radius-lg); padding: 2.5rem 2.25rem; margin: 2.5rem 0; } .theme-trailer .financing-band { border-radius: var(--radius); } .theme-golf .financing-band { box-shadow: var(--shadow-lg); } .financing-band__inner { display: flex; gap: 2.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; } .financing-band__copy { flex: 1; min-width: 260px; } .financing-band h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); font-size: 1.85rem; line-height: 1.1; margin: 0 0 0.6rem; max-width: 32ch; } .theme-trailer .financing-band h2 { text-transform: uppercase; } .financing-band__copy > p { color: var(--c-hero-text-secondary); max-width: 46ch; margin: 0 0 1rem; } .financing-band__points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; } .financing-band__points li { color: var(--c-hero-text-secondary); font-weight: 600; font-size: 0.92rem; display: flex; align-items: baseline; gap: 0.5rem; } .financing-band__points li::before { content: "✓"; color: var(--c-accent); font-weight: 800; } .financing-band__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; flex: none; } .financing-band__btn { font-size: 1.02rem; padding: 0.75rem 1.6rem; white-space: nowrap; } /* Two-class selector so this beats `body[class*="theme-"] a` (which otherwise painted this link the muted --c-link, unreadable on the dark band) — same fix as .site-header .site-header__nav a above. */ .financing-band .financing-band__secondary { color: var(--c-hero-text); text-decoration: underline; font-weight: 600; font-size: 0.9rem; } .financing-band .financing-band__secondary:hover { color: var(--c-accent); } /* About + contact/location */ .dealer-contact { margin: 2.5rem 0 1rem; } .dealer-contact__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.75rem; align-items: start; } @media (max-width: 800px) { .dealer-contact__grid { grid-template-columns: 1fr; } } .dealer-contact__about h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); font-size: 1.7rem; margin: 0 0 0.75rem; } .theme-trailer .dealer-contact__about h2 { text-transform: uppercase; } .dealer-contact__about p { color: var(--c-text-secondary); line-height: 1.6; max-width: 60ch; margin: 0; } .dealer-contact__card { background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); } .dealer-contact__card h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 0.9rem; } .dealer-contact__locale { font-weight: 700; margin: 0 0 0.3rem; } .dealer-contact__phone { margin: 0 0 0.9rem; } .dealer-contact__phone a { font-weight: 700; font-size: 1.05rem; } .dealer-contact__hours-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-secondary); margin: 0 0 0.2rem; } .dealer-contact__hours { color: var(--c-text-secondary); font-size: 0.9rem; margin: 0 0 1.1rem; } .dealer-contact__directions { width: 100%; } /* Inventory page header */ .dealer-inventory__header { justify-content: space-between; } .dealer-inventory__eyebrow { flex-basis: 100%; color: var(--c-text-secondary); font-size: 0.9rem; margin: 0 0 0.2rem; } .dealer-inventory__eyebrow a { color: var(--c-text-secondary); font-weight: 600; } .dealer-inventory__eyebrow a:hover { color: var(--c-accent-text); } .dealer-inventory__call { margin-left: auto; } /* ---------- footer dealer links ---------- */ .site-footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 1rem; } .site-footer__links a { color: var(--c-brand-contrast); text-decoration: none; font-weight: 600; font-size: 0.9rem; opacity: 0.9; } .site-footer__links a:hover { opacity: 1; text-decoration: underline; } /* ---------- dealer sales page (/for-dealers) ---------- */ .dealers-hero { background: linear-gradient(155deg, var(--c-hero-bg-start), var(--c-hero-bg-end)); color: var(--c-hero-text); border-radius: var(--radius-lg); padding: 3rem 2.25rem; margin-bottom: 1.5rem; } .theme-trailer .dealers-hero { border-radius: var(--radius); } .dealers-hero__inner { max-width: 720px; } .dealers-hero h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); font-size: 2.5rem; line-height: 1.06; margin: 0.5rem 0 1rem; } .dealers-hero__sub { color: var(--c-hero-text-secondary); font-size: 1.1rem; line-height: 1.5; margin: 0 0 1.5rem; } .dealers-hero__sub strong { color: var(--c-hero-text); } .dealers-hero__cta { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; } .dealers__btn-primary { background: var(--c-accent); color: var(--c-accent-contrast); font-size: 1.02rem; padding: 0.75rem 1.5rem; } .dealers__btn-ghost { color: var(--c-hero-text); text-decoration: none; font-weight: 700; padding: 0.75rem 1rem; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--c-hero-text) 40%, transparent); } .dealers__btn-ghost:hover { background: color-mix(in srgb, var(--c-hero-text) 12%, transparent); } .dealers-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 2.5rem; } @media (max-width: 640px) { .dealers-stats { grid-template-columns: 1fr; } } .dealers-stat { background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 1.25rem 1rem; text-align: center; } .dealers-stat__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--c-accent-text); letter-spacing: var(--tracking-display); } .dealers-stat__label { color: var(--c-text-secondary); font-size: 0.9rem; } .dealers-features h2, .dealers-pricing h2 { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: var(--tracking-display); margin: 0 0 1.25rem; } .theme-trailer .dealers-features h2, .theme-trailer .dealers-pricing h2 { text-transform: uppercase; } .dealers-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; margin-bottom: 2.5rem; } .dealers-feature { background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 1.4rem; } .theme-golf .dealers-feature { box-shadow: var(--shadow-sm); } .dealers-feature h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 0.5rem; color: var(--c-text); } .dealers-feature p { margin: 0; color: var(--c-text-secondary); line-height: 1.5; font-size: 0.96rem; } .dealers-pricing { background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 2rem; text-align: center; max-width: 720px; margin: 0 auto; } .dealers-pricing > p { color: var(--c-text-secondary); font-size: 1.05rem; line-height: 1.55; max-width: 56ch; margin: 0 auto 1.5rem; } .dealers-pricing__cta { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .dealers-pricing__note { font-size: 0.9rem; color: var(--c-text-secondary); margin: 0; } /* Trailer hero: diamond-plate/blueprint texture + hazard-stripe corner tab. */ .theme-trailer .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(45deg, var(--c-hero-pattern) 0 2px, transparent 2px 22px); } .theme-trailer .hero::after { content: ""; position: absolute; top: 0; right: 0; z-index: 0; pointer-events: none; width: 130px; height: 130px; background: repeating-linear-gradient(45deg, var(--c-accent) 0 14px, var(--c-hero-bg-start) 14px 28px); clip-path: polygon(100% 0, 100% 100%, 0 0); opacity: 0.9; } .theme-trailer .hero { border-radius: var(--radius); } .theme-trailer .hero__search { gap: 0; border: var(--border-w) solid var(--c-accent); border-radius: 2px; max-width: 480px; } .theme-trailer .hero__search select, .theme-trailer .hero__search input[type="text"] { border-radius: 0; } .theme-trailer .hero__search input[type="submit"] { border-radius: 0; } .theme-trailer .hero__search--assistant { max-width: 100%; } /* Golf hero: soft sun glow + fairway horizon curve — the one indulgent spot. */ .theme-golf .hero::before { content: ""; position: absolute; top: -20%; right: -8%; z-index: 0; pointer-events: none; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, var(--c-accent) 0%, color-mix(in srgb, var(--c-accent) 35%, transparent) 45%, transparent 70%); opacity: 0.55; } .theme-golf .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 6px; z-index: 0; background: var(--c-hairline-gradient); opacity: 0.9; } .theme-golf .hero { box-shadow: var(--shadow-lg); } /* Inventory-first home: a slimmer hero so live listings sit near the fold. */ .hero--compact { padding: 2.25rem 2.25rem; } .hero--compact h1 { font-size: 2.1rem; margin-bottom: 0.9rem; } .hero--compact .hero__chips { margin-top: 1rem; } /* ---------- homepage discovery chat ("search bar becomes a chat") ---------- */ /* Sits inline under the hero's search box (Marketplace::DiscoveryAssistant). Hidden until Stimulus opens it on the first turn — no-JS/first-load buyers never see an empty panel, only the plain search box. */ .discovery-chat { position: relative; } .discovery-chat__panel { margin-top: 0.9rem; max-width: 560px; background: var(--c-surface); color: var(--c-text); border: var(--border-w) solid var(--c-border); border-radius: var(--radius-lg, var(--radius)); box-shadow: var(--shadow-lg, var(--shadow-md, var(--shadow))); overflow: hidden; } .theme-trailer .discovery-chat__panel { border-radius: 4px; } .discovery-chat__log { max-height: min(50vh, 460px); overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; } .discovery-chat__msg { max-width: 88%; margin: 0; padding: 0.55rem 0.8rem; border-radius: 12px; font-size: 0.94rem; line-height: 1.45; white-space: pre-wrap; } .discovery-chat__msg--bot { align-self: flex-start; background: var(--c-badge-neutral-bg); color: var(--c-text); border-bottom-left-radius: 3px; } .discovery-chat__msg--user { align-self: flex-end; background: var(--c-accent); color: var(--c-accent-contrast); border-bottom-right-radius: 3px; } .theme-trailer .discovery-chat__msg { border-radius: 4px; } .discovery-chat__results .unit-grid.discovery-chat__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; } .discovery-chat__more { align-self: flex-start; font-weight: 700; color: var(--c-accent-text); text-decoration: none; font-size: 0.9rem; } .discovery-chat__more:hover { text-decoration: underline; } .discovery-chat__typing { margin: 0 0.9rem 0.5rem; font-size: 0.82rem; color: var(--c-text-secondary); } .discovery-chat__ask { display: flex; gap: 0.5rem; padding: 0.65rem; border-top: var(--border-w) solid var(--c-border); } .discovery-chat__ask input { flex: 1; font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--c-input-border); border-radius: 8px; } .discovery-chat__ask button { background: var(--c-accent); color: var(--c-accent-contrast); border: none; border-radius: 8px; font: inherit; font-weight: 700; padding: 0 1.1rem; cursor: pointer; } .theme-trailer .discovery-chat__ask input, .theme-trailer .discovery-chat__ask button { border-radius: 0; } /* The homepage browse block reuses the SRP layout wholesale. */ .home-browse { margin: 1.75rem 0; } .home-browse__head { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; } .home-browse__head h2 { font-family: var(--font-display); font-size: 1.55rem; letter-spacing: var(--tracking-display); margin: 0; } .theme-trailer .home-browse__head h2 { text-transform: uppercase; } .home-browse__count { color: var(--c-text-secondary); font-size: 0.95rem; margin: 0; } /* Recently-viewed strip: horizontal scroll so it never pushes the fold down. */ .home-row--recent .unit-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x proximity; } .home-row--recent .unit-card { scroll-snap-align: start; } .type-tiles h2, .home-row h2, .trust-strip h2 { font-family: var(--font-display); font-size: 1.55rem; letter-spacing: var(--tracking-display); margin: 2rem 0 1rem; } .theme-trailer .type-tiles h2, .theme-trailer .home-row h2 { text-transform: uppercase; } .type-tiles__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .type-tile { display: flex; align-items: center; gap: 0.6rem; background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 0.85rem 0.9rem; text-decoration: none; color: var(--c-text); font-weight: 600; font-family: var(--font-display); box-shadow: var(--shadow); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .type-tile:hover { border-color: var(--c-accent); transform: translateY(-1px); } .theme-golf .type-tile:hover { box-shadow: var(--shadow-md); } .type-tile__icon { flex: none; width: 26px; height: 26px; color: var(--c-accent-text); } .type-tile__icon svg { width: 100%; height: 100%; } .edu-strip, .dealer-strip, .trust-strip { background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 1.1rem 1.35rem; margin: 1.75rem 0; box-shadow: var(--shadow); } .theme-trailer .dealer-strip { border-color: var(--c-accent); border-width: var(--border-w); } .theme-golf .edu-strip { border-left: 4px solid var(--c-accent); } .trust-strip__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 0.75rem; } .trust-strip__item strong { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.2rem; } .home-row { margin: 1.75rem 0; } /* ---------- SRP ---------- */ .srp__breadcrumbs { margin: 0.75rem 0 1rem; font-size: 0.85rem; color: var(--c-text-secondary); } .srp__breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; margin: 0; padding: 0; } .srp__breadcrumbs li { display: flex; align-items: center; gap: 0.4rem; } .srp__breadcrumbs li + li::before { content: "/"; color: var(--c-border); } .srp__breadcrumbs a { color: var(--c-text-secondary); text-decoration: none; } .srp__breadcrumbs a:hover { color: var(--c-accent); } .srp__breadcrumbs [aria-current="page"] { color: var(--c-text); font-weight: 600; } .srp__header { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .srp__heading { font-family: var(--font-display); font-size: 2rem; margin: 0.25rem 0; letter-spacing: var(--tracking-display); } .theme-trailer .srp__heading { text-transform: uppercase; } .srp__count { color: var(--c-text-secondary); font-weight: 600; } .srp__intro { flex-basis: 100%; margin: 0.25rem 0 0; max-width: 65ch; color: var(--c-text-secondary); line-height: 1.5; } /* The Buying Assistant's "Showing ..." line renders inside srp-results (so it swaps with the grid it describes) rather than in .srp__header. */ .assistant__interpretation { color: var(--c-text); font-weight: 600; margin: 0 0 1rem; max-width: 65ch; } .srp__near-me { margin-left: auto; background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 0.4rem 0.8rem; font: inherit; font-weight: 600; cursor: pointer; color: var(--c-text); } .srp__near-me:hover { border-color: var(--c-accent); } .srp__layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.75rem; align-items: start; } @media (max-width: 800px) { .srp__layout { grid-template-columns: 1fr; } } .srp__filters { background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); position: sticky; top: 5.5rem; } @media (max-width: 800px) { .srp__filters { position: static; } } .filter-group { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.35rem; } .filter-group label { font-weight: 700; font-size: 0.85rem; } .filter-group select, .filter-group input[type="number"] { width: 100%; } .filter-group--primary { background: var(--c-surface-sunken); border-radius: var(--radius); padding: 0.6rem 0.75rem; margin: -0.2rem -0.2rem 1rem; } .filter-group__range { display: flex; gap: 0.4rem; } .filter-toggle { display: flex; gap: 0.5rem; align-items: center; font-weight: 700; cursor: pointer; } .filter-toggle input { width: 1.05rem; height: 1.05rem; accent-color: var(--c-accent); } .srp__pagination { display: flex; justify-content: space-between; margin-top: 1.5rem; font-weight: 600; } .srp__empty { color: var(--c-text-secondary); padding: 3rem 1.5rem; text-align: center; background: var(--c-surface); border: var(--border-w) dashed var(--c-border); border-radius: var(--radius); } /* ---------- VDP ---------- */ .vdp__breadcrumb { font-size: 0.85rem; color: var(--c-text-secondary); margin-bottom: 1rem; display: flex; gap: 0.5rem; } .vdp__layout { display: grid; grid-template-columns: 3fr 2fr; gap: 2rem; align-items: start; } @media (max-width: 800px) { .vdp__layout { grid-template-columns: 1fr; } } .vdp__photo { width: 100%; border-radius: var(--radius); display: block; box-shadow: var(--shadow); } .vdp__thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; } .vdp__thumb { width: 76px; height: 57px; object-fit: cover; border-radius: 2px; border: 1px solid var(--c-border); display: block; } /* Clickable gallery → lightbox. Buttons reset to bare image wrappers. */ .vdp__photo-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; } .vdp__photo-count { position: absolute; right: 0.6rem; bottom: 0.6rem; padding: 0.25rem 0.55rem; background: rgba(0, 0, 0, 0.66); color: #fff; font-size: 0.78rem; font-weight: 600; border-radius: var(--radius); pointer-events: none; } .vdp__thumb-btn { padding: 0; border: 0; background: none; cursor: pointer; position: relative; display: block; line-height: 0; } .vdp__thumb-btn:hover .vdp__thumb { border-color: var(--c-accent); } .vdp__thumb-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); color: #fff; font-weight: 700; border-radius: 2px; pointer-events: none; } .vdp__photo-btn:focus-visible, .vdp__thumb-btn:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; } /* Full-screen photo viewer (built on by gallery_controller). */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.92); padding: 3.5rem 1rem; } .lightbox[hidden] { display: none; } .lightbox__img { max-width: 96vw; max-height: 88vh; object-fit: contain; border-radius: 4px; user-select: none; } .lightbox__close { position: absolute; top: 0.75rem; right: 1rem; width: 2.75rem; height: 2.75rem; font-size: 2rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, 0.12); border: 0; border-radius: 999px; cursor: pointer; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 2.4rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, 0.12); border: 0; border-radius: 999px; cursor: pointer; } .lightbox__prev { left: 1rem; } .lightbox__next { right: 1rem; } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); } .lightbox--single .lightbox__nav, .lightbox--single .lightbox__counter { display: none; } .lightbox__counter { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.9rem; background: rgba(0, 0, 0, 0.5); padding: 0.3rem 0.7rem; border-radius: 999px; } @media (max-width: 600px) { .lightbox__nav { width: 2.5rem; height: 2.5rem; font-size: 1.8rem; } } .vdp__placeholder { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c-placeholder-start), var(--c-placeholder-end)); border: var(--border-w) dashed var(--c-border); border-radius: var(--radius); color: var(--c-placeholder-text); text-align: center; padding: 1.25rem; font-weight: 600; } .vdp__summary { background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); } .vdp__title { font-family: var(--font-display); font-size: 1.9rem; margin: 0 0 0.6rem; letter-spacing: var(--tracking-display); line-height: 1.1; } .theme-trailer .vdp__title { text-transform: uppercase; } .vdp__price { color: var(--c-price); font-size: 1.9rem; font-weight: 800; margin: 0 0 0.5rem; font-variant-numeric: var(--font-numeric-variant); } .vdp__delivered { margin: 0 0 0.9rem; } .vdp__delivered-total { font-size: 1.05rem; margin: 0; color: var(--c-text); } .vdp__delivered-detail { font-size: 0.82rem; color: var(--c-text-secondary); margin: 0.15rem 0 0; } .vdp__delivered-cta { background: var(--c-surface); border: var(--border-w) solid var(--c-accent); color: var(--c-accent-text); font-weight: 700; border-radius: var(--radius); padding: 0.5rem 0.9rem; cursor: pointer; font-size: 0.9rem; } .vdp__delivered-cta:hover { background: var(--c-accent); color: var(--c-accent-contrast); } .vdp__payment-estimate { color: var(--c-text-secondary); font-size: 0.95rem; margin: 0 0 0.5rem; } .vdp__rail > * + * { margin-top: 1.1rem; } .vdp__specbar-wrap { margin-top: 0.75rem; } .vdp__specs { width: 100%; border-collapse: collapse; background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); overflow: hidden; } .vdp__specs caption { text-align: left; font-family: var(--font-display); font-weight: 700; padding: 0.7rem 0.75rem 0.25rem; font-size: 1.05rem; } .vdp__specs th { text-align: left; color: var(--c-text-secondary); font-weight: 600; } .vdp__specs th, .vdp__specs td { padding: 0.5rem 0.75rem; border-top: 1px solid var(--c-border); font-size: 0.92rem; } .vdp__specs tr:nth-child(even) { background: var(--c-surface-sunken); } .theme-trailer .vdp__specs td { font-family: var(--font-mono); } .vdp__lead, .vdp__dealer-card { background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); } .vdp__lead h2, .vdp__dealer-card h2 { margin-top: 0; font-family: var(--font-display); font-size: 1.3rem; } .vdp__call { font-weight: 700; } .vdp__expired-banner { background: var(--c-text-secondary); color: var(--c-surface); padding: 0.7rem 1.1rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-weight: 600; } .vdp__similar { margin-top: 2.5rem; } .vdp__similar h2 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: var(--tracking-display); } .vdp__description { margin-top: 1.25rem; } .vdp__description h2 { font-family: var(--font-display); font-size: 1.3rem; } .vdp__description p { white-space: pre-line; } /* Sticky mobile CTA bar (spec §3): Call · Text · Check availability. */ .vdp__mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--c-surface); border-top: var(--border-w) solid var(--c-border); box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08); padding: 0.6rem 0.75rem; gap: 0.5rem; } .vdp__mobile-cta a, .vdp__mobile-cta button { flex: 1; text-align: center; padding: 0.6rem 0.5rem; border-radius: var(--radius); font-weight: 700; font-size: 0.85rem; text-decoration: none; border: var(--border-w) solid var(--c-border); color: var(--c-text); background: var(--c-surface-sunken); } .vdp__mobile-cta a.vdp__mobile-cta__primary { background: var(--c-accent); color: var(--c-accent-contrast); border-color: transparent; } @media (max-width: 800px) { .vdp__mobile-cta { display: flex; } .site-main { padding-bottom: 5rem; } } .lead-form__field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; } .lead-form__field input, .lead-form__field textarea { width: 100%; } .lead-form__fine-print { font-size: 0.78rem; color: var(--c-text-secondary); margin: 0.6rem 0 0; } /* ---------- dealer profile ---------- */ .dealer-profile__header { margin-bottom: 1.5rem; } .dealer-profile__header h1 { font-family: var(--font-display); font-size: 2rem; letter-spacing: var(--tracking-display); margin-bottom: 0.4rem; } .theme-trailer .dealer-profile__header h1 { text-transform: uppercase; } .dealer-profile__meta { color: var(--c-text-secondary); } .claim-banner { background: var(--c-accent); color: var(--c-accent-contrast); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-weight: 600; } .dealer-profile__inventory h2 { font-family: var(--font-display); font-size: 1.4rem; } /* ---------- guides ---------- */ .guides__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .guides__item { background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow); } .guides__item h2 { font-family: var(--font-display); margin: 0 0 0.3rem; font-size: 1.2rem; } .guide__breadcrumb { font-size: 0.85rem; color: var(--c-text-secondary); margin-bottom: 0.75rem; display: flex; gap: 0.5rem; } .guide__body { max-width: 68ch; } .guide__body h2 { font-family: var(--font-display); margin-top: 1.75rem; } /* ---------- claim + portal ---------- */ .claim { max-width: 560px; margin: 2rem auto; background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); } .claim h1 { font-family: var(--font-display); margin-top: 0; letter-spacing: var(--tracking-display); } .claim__count { color: var(--c-text-secondary); } .claim__samples { color: var(--c-text-secondary); padding-left: 1.2rem; } .claim__tos { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 1rem; font-size: 0.9rem; } .claim__activate { width: 100%; font-size: 1.05rem; } .claim__fine-print { color: var(--c-text-secondary); font-size: 0.8rem; text-align: center; } .portal { max-width: 1100px; } .portal__header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; } .portal__header h1 { font-family: var(--font-display); font-size: 1.7rem; margin: 0; } .portal__header p { color: var(--c-text-secondary); margin: 0; } .portal-nav { display: flex; gap: 1.25rem; align-items: center; padding: 0.5rem 0 1rem; border-bottom: var(--border-w) solid var(--c-border); margin-bottom: 1.25rem; flex-wrap: wrap; } .portal-nav__dealer { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; } .portal-nav__signout button, .portal-nav form button { background: none; border: none; color: var(--c-link); cursor: pointer; font: inherit; text-decoration: underline; } .portal-table { width: 100%; border-collapse: collapse; background: var(--c-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .portal-table th, .portal-table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--c-border); } .portal-table th { background: var(--c-surface-sunken); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--c-text-secondary); } .portal-form__hint { color: var(--c-text-secondary); font-size: 0.82rem; margin: 0.3rem 0 0; } .status { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.15rem 0.55rem; border-radius: 999px; } .status--active, .status--new { background: var(--c-positive); color: var(--c-positive-contrast); } .status--expired, .status--closed { background: var(--c-border); color: var(--c-text-secondary); } .status--contacted { background: var(--c-accent); color: var(--c-accent-contrast); } .lead-inbox { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .lead-inbox__item { background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); } .lead-inbox__who { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; } .lead-inbox__unit { color: var(--c-text-secondary); font-size: 0.85rem; } .lead-inbox__message { margin: 0.5rem 0; } .lead-inbox__actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.5rem; } .lead-inbox__actions button { background: none; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.3rem 0.65rem; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600; } .lead-inbox__actions button:hover { border-color: var(--c-accent); } /* AI lead-state model in the inbox */ .lead-temp { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.5rem; border-radius: 999px; } .lead-temp--hot { background: var(--c-accent); color: var(--c-accent-contrast); } .lead-temp--warm { background: var(--c-badge-neutral-bg); color: var(--c-text); border: 1px solid var(--c-accent); } .lead-temp--cold { background: var(--c-badge-neutral-bg); color: var(--c-badge-neutral-text); } .lead-inbox__ai-summary { color: var(--c-text-secondary); font-size: 0.9rem; margin: 0.4rem 0; } .lead-inbox__add { margin-left: auto; font-weight: 700; color: var(--c-accent-text); text-decoration: none; border: var(--border-w) solid var(--c-accent); border-radius: var(--radius); padding: 0.4rem 0.8rem; } .lead-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0 0 0.75rem; } .lead-stats__stat { color: var(--c-text-secondary); font-size: 0.9rem; } .lead-stats__num { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--c-text); } .lead-stats__sources { font-size: 0.82rem; color: var(--c-text-secondary); margin: 0 0 1rem; } .lead-source-badge { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.1rem 0.4rem; border-radius: 3px; background: var(--c-badge-neutral-bg); color: var(--c-badge-neutral-text); } .lead-source-badge--facebook { background: #1877f2; color: #fff; } .lead-source-badge--marketplace { background: var(--c-accent); color: var(--c-accent-contrast); } .lead-log-form { display: grid; gap: 0.8rem; max-width: 30rem; } .lead-log-form label { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.9rem; } .lead-inbox__ai-tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; background: var(--c-brand); color: var(--c-brand-contrast); padding: 0.05rem 0.35rem; border-radius: 3px; vertical-align: middle; } .lead-inbox__pipeline { font-size: 0.8rem; color: var(--c-text-secondary); display: inline-flex; align-items: center; gap: 0.35rem; } .lead-score { font-size: 0.7rem; font-weight: 800; color: var(--c-accent-text); background: var(--c-badge-neutral-bg); padding: 0.1rem 0.45rem; border-radius: 999px; } .lead-reply { background: var(--c-surface-sunken); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.65rem 0.8rem; margin: 0.5rem 0; } .lead-reply__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-secondary); margin: 0 0 0.3rem; } .lead-reply__text { margin: 0 0 0.5rem; font-size: 0.95rem; line-height: 1.45; } .lead-reply__actions { display: flex; gap: 0.6rem; align-items: center; } .lead-reply__send { background: var(--c-accent); color: var(--c-accent-contrast); text-decoration: none; font-weight: 700; font-size: 0.85rem; padding: 0.35rem 0.8rem; border-radius: var(--radius); } .lead-reply__actions button { background: none; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.35rem 0.7rem; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600; } /* SMS conversation thread */ .conversation__back { display: inline-block; margin-bottom: 0.75rem; color: var(--c-link); text-decoration: none; font-size: 0.9rem; } .conversation__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .conversation__header h1 { margin: 0; } .conversation__meta { color: var(--c-text-secondary); font-size: 0.9rem; margin: 0.3rem 0 0; } .conversation__close button { background: none; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.35rem 0.75rem; cursor: pointer; font: inherit; font-weight: 600; } .conversation__ai { color: var(--c-text-secondary); font-size: 0.9rem; margin: 0.6rem 0; } .thread { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; } .bubble { max-width: 78%; padding: 0.6rem 0.85rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .bubble p { margin: 0; } .bubble__meta { display: block; margin-top: 0.3rem; font-size: 0.72rem; color: var(--c-text-secondary); } .bubble--inbound { align-self: flex-start; background: var(--c-surface-sunken); border: 1px solid var(--c-border); border-bottom-left-radius: 4px; } .bubble--outbound { align-self: flex-end; background: var(--c-brand); color: var(--c-brand-contrast); border-bottom-right-radius: 4px; } .bubble--outbound .bubble__meta { color: color-mix(in srgb, var(--c-brand-contrast) 75%, transparent); } .compose { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; } .compose textarea { font: inherit; padding: 0.65rem; border: 1px solid var(--c-input-border); border-radius: var(--radius); resize: vertical; } .compose textarea:focus { outline: 2px solid var(--c-focus-ring); border-color: var(--c-input-focus); } .compose__actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .compose__hint { color: var(--c-text-secondary); font-size: 0.82rem; } .compose input[type="submit"] { background: var(--c-accent); color: var(--c-accent-contrast); border: none; border-radius: var(--radius); font: inherit; font-weight: 700; padding: 0.55rem 1.1rem; cursor: pointer; } /* Billing CTA on the Website tab */ .billing-cta { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; flex-wrap: wrap; background: var(--c-surface-sunken); border: var(--border-w) solid var(--c-accent); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; } .billing-cta strong { font-family: var(--font-display); font-size: 1.1rem; } .billing-cta p { margin: 0.25rem 0 0; color: var(--c-text-secondary); font-size: 0.9rem; } .billing-cta__btn button, .billing-cta__btn { background: var(--c-accent); color: var(--c-accent-contrast); border: none; border-radius: var(--radius); font: inherit; font-weight: 700; padding: 0.6rem 1.4rem; cursor: pointer; white-space: nowrap; } .billing-status { color: var(--c-positive); font-weight: 600; } /* Dealer auth pages */ .auth-card { max-width: 400px; margin: 2.5rem auto; background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); } .auth-card h1 { font-family: var(--font-display); margin-top: 0; } .auth-form { display: flex; flex-direction: column; gap: 0.75rem; } .auth-form label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; font-size: 0.9rem; } .auth-form input { font: inherit; padding: 0.55rem; border: 1px solid var(--c-input-border); border-radius: var(--radius); } .auth-form input:focus { outline: 2px solid var(--c-focus-ring); border-color: var(--c-input-focus); } .auth-form__submit { background: var(--c-accent); color: var(--c-accent-contrast); border: none; border-radius: var(--radius); font: inherit; font-weight: 700; padding: 0.6rem 1rem; cursor: pointer; margin-top: 0.4rem; } .auth-form__error { background: var(--c-badge-neutral-bg); border: 1px solid var(--c-accent); color: var(--c-text); border-radius: var(--radius); padding: 0.5rem 0.7rem; font-size: 0.88rem; } .auth-card__alt { margin: 0.75rem 0 0; font-size: 0.9rem; } /* Portal: connect-your-domain (Cloudflare-for-SaaS) panel. */ .portal__subnote { font-size: 0.9rem; color: var(--c-text-secondary); margin: 0.4rem 0 0; } .domain-connect { margin-top: 2rem; padding: 1.5rem; background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); max-width: 560px; } .domain-connect h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 0.9rem; } .domain-connect__status { padding: 0.6rem 0.8rem; border-radius: var(--radius); font-size: 0.92rem; margin: 0 0 1rem; } .domain-connect__status--live { background: var(--c-positive); color: var(--c-positive-contrast); } .domain-connect__status--pending { background: var(--c-badge-neutral-bg); color: var(--c-text); } .domain-connect__lead { font-weight: 600; margin: 0 0 0.5rem; } .domain-connect__record { border-collapse: collapse; width: 100%; margin-bottom: 1rem; } .domain-connect__record th, .domain-connect__record td { text-align: left; padding: 0.45rem 0.6rem; border: 1px solid var(--c-border); font-size: 0.9rem; vertical-align: top; } .domain-connect__record th { width: 8.5rem; color: var(--c-text-secondary); font-weight: 600; } .domain-connect__record code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.88rem; background: var(--c-badge-neutral-bg); padding: 0.1rem 0.35rem; border-radius: 3px; } .domain-connect__ssl { font-size: 0.85rem; color: var(--c-text-secondary); margin: 0 0 1.1rem; } .domain-connect__check { margin-top: 0.25rem; } /* Portal: dealer-website design gallery (template picker). */ .design-gallery { border: none; padding: 0; margin: 0 0 1.5rem; } .design-gallery legend { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; padding: 0; margin-bottom: 0.3rem; } .design-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; margin-top: 0.8rem; } .design-card { position: relative; display: flex; flex-direction: column; gap: 0.4rem; background: var(--c-surface); border: 2px solid var(--c-border); border-radius: var(--radius); padding: 0.9rem 1rem 2.6rem; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .design-card:hover { border-color: var(--c-input-focus); } .design-card--active { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); } .design-card__radio { position: absolute; top: 0.8rem; right: 0.8rem; accent-color: var(--c-accent); } .design-card__name { display: block; font-weight: 700; font-size: 0.98rem; padding-right: 1.4rem; } .design-card__blurb { display: block; font-size: 0.85rem; color: var(--c-text-secondary); line-height: 1.4; } .design-card__lean { display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--c-accent-text); text-transform: uppercase; letter-spacing: 0.04em; } .design-card__preview { position: absolute; left: 1rem; bottom: 0.8rem; font-size: 0.85rem; font-weight: 700; } /* ---------- trust: verified badge + star rating ---------- */ .dealer-trust { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 0.35rem 0; } .verified-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; font-size: 0.8rem; line-height: 1; letter-spacing: 0.01em; color: var(--c-positive); padding: 0.28rem 0.5rem; border-radius: var(--radius); background: color-mix(in srgb, var(--c-positive) 12%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-positive) 35%, transparent); } .verified-badge svg { width: 1em; height: 1em; } .verified-badge svg path:first-child { fill: var(--c-positive); } .verified-badge svg path:last-child { stroke: var(--c-surface); } .dealer-trust--lg .verified-badge { font-size: 0.9rem; padding: 0.35rem 0.6rem; } .star-rating { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--c-text-secondary); white-space: nowrap; } .star-rating--sm { font-size: 0.75rem; } .star-rating--lg { font-size: 0.95rem; } .star-rating__stars { position: relative; display: inline-block; font-size: 1.05em; line-height: 1; letter-spacing: 0.05em; } .star-rating__track { color: color-mix(in srgb, var(--c-star) 28%, var(--c-border)); } .star-rating__fill { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--c-star); white-space: nowrap; } .star-rating__value { font-weight: 700; color: var(--c-text); } .star-rating__count { color: var(--c-text-secondary); } .star-rating__source { font-size: 0.9em; color: var(--c-text-secondary); padding-left: 0.35rem; border-left: 1px solid var(--c-border); } /* ---------- freight marketplace: request / status / carrier ---------- */ .vdp__ship-cta { display: inline-block; margin-top: 0.6rem; font-size: 0.85rem; font-weight: 700; color: var(--c-accent-text); text-decoration: none; } .vdp__ship-cta:hover { text-decoration: underline; } .ship-page { max-width: 720px; margin: 1.5rem auto; padding: 0 1rem; } .ship-page__head h1 { font-family: var(--font-display); margin: 0 0 0.35rem; } .ship-page__sub { color: var(--c-text-secondary); line-height: 1.5; margin: 0 0 1.25rem; } .ship-flash { padding: 0.6rem 0.85rem; border-radius: var(--radius); margin: 0 0 1rem; font-weight: 600; } .ship-flash--ok { background: color-mix(in srgb, var(--c-positive) 14%, var(--c-surface)); color: var(--c-positive); } .ship-flash--warn { background: var(--c-badge-neutral-bg); color: var(--c-text); border: 1px solid var(--c-badge-neutral-border); } .ship-form { display: flex; flex-direction: column; gap: 0.8rem; background: var(--c-surface); padding: 1.25rem; border: var(--border-w) solid var(--c-border); border-radius: var(--radius); } .ship-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; color: var(--c-text-secondary); } .ship-form label span { font-weight: 400; } .ship-form input, .ship-form select { font: inherit; padding: 0.55rem 0.65rem; border: 1px solid var(--c-input-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); } .ship-form__contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; } .ship-form__item { padding: 0.75rem; background: var(--c-surface-sunken); border-radius: var(--radius); display: flex; flex-direction: column; gap: 0.15rem; } .ship-form__item-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-secondary); } .ship-form__item-origin { font-size: 0.85rem; color: var(--c-text-secondary); } .ship-form__submit { background: var(--c-accent); color: var(--c-accent-contrast); border: none; border-radius: var(--radius); font: inherit; font-weight: 700; padding: 0.7rem; cursor: pointer; } .ship-form__fine { font-size: 0.75rem; color: var(--c-text-secondary); margin: 0; } .ship-form__errors { padding: 0.6rem 0.85rem; border-radius: var(--radius); background: var(--c-badge-neutral-bg); color: var(--c-text); font-weight: 600; } .ship-partner-cta { display: inline-block; margin-top: 0.85rem; padding: 0.7rem 1.1rem; background: var(--c-accent); color: var(--c-accent-contrast); border-radius: var(--radius); font-weight: 700; text-decoration: none; } .ship-partner-cta:hover { filter: brightness(0.95); } .ship-disclaimer { margin: 1.25rem 0 0.5rem; font-size: 0.75rem; color: var(--c-text-secondary); line-height: 1.5; } .ship-status { display: inline-block; font-weight: 700; font-size: 0.8rem; padding: 0.25rem 0.6rem; border-radius: var(--radius); background: var(--c-badge-neutral-bg); color: var(--c-badge-neutral-text); border: 1px solid var(--c-badge-neutral-border); } .ship-status--booked { color: var(--c-positive); background: color-mix(in srgb, var(--c-positive) 14%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-positive) 35%, transparent); } .ship-summary, .ship-booked { background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); padding: 1rem 1.15rem; margin: 1rem 0; } .ship-summary h2 { margin: 0 0 0.4rem; font-size: 1.05rem; } .ship-summary__route { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--c-text-secondary); margin: 0 0 0.5rem; } .ship-summary__arrow { color: var(--c-accent-text); font-weight: 700; } .ship-summary__miles { font-family: var(--font-mono); font-size: 0.85rem; } .ship-summary__estimate strong { color: var(--c-price); font-size: 1.15rem; } .ship-summary__estimate span { color: var(--c-text-secondary); font-size: 0.85rem; } .ship-booked { border-color: color-mix(in srgb, var(--c-positive) 45%, var(--c-border)); } .ship-booked h2 { color: var(--c-positive); margin: 0 0 0.3rem; } .ship-booked__price { font-weight: 600; } .ship-quotes { margin: 1.5rem 0; } .ship-quotes h2 { font-size: 1rem; margin: 0 0 0.75rem; } .ship-quotes__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .ship-quotes__empty { color: var(--c-text-secondary); background: var(--c-surface-sunken); padding: 1rem; border-radius: var(--radius); } .ship-quote { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.75rem; align-items: center; padding: 0.9rem 1rem; background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); } .ship-quote--accepted { border-color: color-mix(in srgb, var(--c-positive) 45%, var(--c-border)); } .ship-quote--declined { opacity: 0.55; } .ship-quote__carrier { font-size: 0.95rem; } .ship-quote__verified { color: var(--c-positive); font-weight: 700; font-size: 0.78rem; margin-left: 0.35rem; } .ship-quote__price { grid-row: span 2; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--c-price); text-align: right; } .ship-quote__detail { font-size: 0.82rem; color: var(--c-text-secondary); } .ship-quote__msg { grid-column: 1 / -1; margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--c-text-secondary); } .ship-quote__accept, .carrier-quote-form button { grid-column: 1 / -1; background: var(--c-accent); color: var(--c-accent-contrast); border: none; border-radius: var(--radius); font: inherit; font-weight: 700; padding: 0.5rem 0.9rem; cursor: pointer; margin-top: 0.35rem; } .ship-quote__accept { width: 100%; } .ship-quote__won { grid-column: 1 / -1; color: var(--c-positive); font-weight: 700; } .carrier-loads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .carrier-load { padding: 1rem; background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius); } .carrier-load__head { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.6rem; } .carrier-load__route { color: var(--c-text-secondary); font-size: 0.9rem; } .carrier-load__window { color: var(--c-text-secondary); font-size: 0.8rem; } .carrier-load__quoted { color: var(--c-positive); font-weight: 600; margin: 0; } .carrier-quote-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; } .carrier-quote-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; font-weight: 600; color: var(--c-text-secondary); } .carrier-quote-form input { font: inherit; padding: 0.45rem 0.55rem; border: 1px solid var(--c-input-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); max-width: 140px; } .carrier-quote-form__msg { flex: 1; } .carrier-quote-form__msg input { max-width: none; width: 100%; } .carrier-quote-form button { margin-top: 0; align-self: end; } /* ---------- delivery: local-delivery line + service chips ---------- */ .vdp__delivered-detail--local strong { color: var(--c-positive); } .vdp__delivered-teaser { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--c-text); } .vdp__delivered-teaser strong { color: var(--c-positive); } .vdp__delivery-ask { margin-top: 0.6rem; } .vdp__delivery-ask summary { cursor: pointer; font-weight: 700; font-size: 0.85rem; color: var(--c-accent-text); } .vdp__delivery-ask .vdp__finance-form { margin-top: 0.5rem; } .dealer-services { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; padding: 0; } .dealer-services__chip { font-size: 0.78rem; font-weight: 600; line-height: 1; padding: 0.32rem 0.6rem; border-radius: var(--radius); color: var(--c-badge-neutral-text); background: var(--c-badge-neutral-bg); border: 1px solid var(--c-badge-neutral-border); } /* ---------- financing: monthly estimate + VDP calculator ---------- */ .unit-card__finance { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--c-text-secondary); font-weight: 600; } .unit-card__finance span { font-weight: 400; } .vdp__finance { margin-top: 1rem; padding: 1rem; border: var(--border-w) solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); } .vdp__finance-head { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 0.5rem; } .vdp__finance-monthly { margin: 0 0 0.75rem; font-size: 1rem; color: var(--c-text-secondary); } .vdp__finance-monthly strong { font-size: 1.9rem; color: var(--c-price); font-family: var(--font-display); } .vdp__finance-controls { display: flex; gap: 0.75rem; } .vdp__finance-controls label { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--c-text-secondary); font-weight: 600; } .vdp__finance-controls input, .vdp__finance-controls select { font: inherit; padding: 0.45rem 0.55rem; border: 1px solid var(--c-input-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); } .vdp__finance-disclaimer { margin: 0.6rem 0 0; font-size: 0.72rem; color: var(--c-text-secondary); line-height: 1.4; } .vdp__finance-prequal { margin-top: 0.75rem; border-top: 1px solid var(--c-border); padding-top: 0.6rem; } .vdp__finance-prequal summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--c-accent-text); } .vdp__finance-form { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.6rem; } .vdp__finance-form input { font: inherit; padding: 0.5rem 0.6rem; border: 1px solid var(--c-input-border); border-radius: var(--radius); } .vdp__finance-form button { background: var(--c-accent); color: var(--c-accent-contrast); border: none; border-radius: var(--radius); font: inherit; font-weight: 700; padding: 0.55rem; cursor: pointer; } .vdp__finance-softpull { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--c-text-secondary); } /* ---------- on-listing AI chat (VDP) ---------- */ .vdp-chat__launch { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; background: var(--c-accent); color: var(--c-accent-contrast); border: none; font: inherit; font-weight: 700; padding: 0.75rem 1.2rem; border-radius: 999px; box-shadow: var(--shadow-lg, 0 6px 20px rgba(0,0,0,.22)); cursor: pointer; } .vdp-chat__launch::before { content: "\1F4AC"; margin-right: 0.45rem; } .vdp-chat__launch:hover { filter: brightness(1.06); } .theme-trailer .vdp-chat__launch { border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em; } .vdp-chat__panel { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 61; width: min(360px, calc(100vw - 2rem)); max-height: min(72vh, 620px); display: flex; flex-direction: column; background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg, 0 12px 34px rgba(0,0,0,.28)); } .theme-trailer .vdp-chat__panel { border-radius: 4px; } .vdp-chat__head { display: flex; align-items: center; justify-content: space-between; background: var(--c-brand); color: var(--c-brand-contrast); padding: 0.7rem 0.9rem; font-weight: 700; } .vdp-chat__close { background: none; border: none; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; } .vdp-chat__log { flex: 1; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; } .vdp-chat__msg { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 12px; font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap; } .vdp-chat__msg--bot { align-self: flex-start; background: var(--c-badge-neutral-bg); color: var(--c-text); border-bottom-left-radius: 3px; } .vdp-chat__msg--user { align-self: flex-end; background: var(--c-accent); color: var(--c-accent-contrast); border-bottom-right-radius: 3px; } .vdp-chat__typing { margin: 0 0.9rem 0.4rem; font-size: 0.82rem; color: var(--c-text-secondary); } .vdp-chat__ask { display: flex; gap: 0.4rem; padding: 0.6rem; border-top: 1px solid var(--c-border); } .vdp-chat__ask input { flex: 1; font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--c-input-border); border-radius: 8px; } .vdp-chat__ask button { background: var(--c-accent); color: var(--c-accent-contrast); border: none; border-radius: 8px; font: inherit; font-weight: 700; padding: 0 1rem; cursor: pointer; } .vdp-chat__contact { border-top: 1px solid var(--c-border); padding: 0.6rem 0.9rem 0.8rem; } .vdp-chat__contact summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--c-accent-text); } .vdp-chat__contact form { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.6rem; } .vdp-chat__contact input { font: inherit; padding: 0.5rem 0.65rem; border: 1px solid var(--c-input-border); border-radius: 8px; } .vdp-chat__contact button { background: var(--c-accent); color: var(--c-accent-contrast); border: none; border-radius: 8px; font: inherit; font-weight: 700; padding: 0.55rem; cursor: pointer; } /* ---------- dealer-site template utilities ---------- */ /* The dealer-site

keeps the marketplace max-width; a template hero or band uses .dealer-bleed to escape it to full viewport width, and .dealer-shell to re-center content inside a bled section. (.dealer-bleed--flush also cancels the main's top padding so a hero can sit flush under the header.) */ .dealer-bleed { margin-inline: calc(50% - 50vw); width: 100vw; } .dealer-bleed--flush { margin-top: -1.5rem; } .dealer-shell { max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; } /* Modern login options: Google + passkey buttons, remember-me, passkey mgmt. */ .auth-form__google, .auth-form__passkey { display: block; width: 100%; font: inherit; font-weight: 700; font-size: 0.95rem; padding: 0.6rem 1rem; border-radius: var(--radius); cursor: pointer; margin-bottom: 0.6rem; text-align: center; } .auth-form__google { background: var(--c-surface); color: var(--c-text); border: var(--border-w) solid var(--c-border); } .auth-form__google:hover { background: var(--c-badge-neutral-bg); } .auth-form__passkey { background: transparent; color: var(--c-accent-text); border: var(--border-w) solid var(--c-accent); } .auth-form__passkey:hover { background: color-mix(in srgb, var(--c-accent) 10%, transparent); } .auth-form .auth-form__remember { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.88rem; } .auth-form .auth-form__remember input { width: auto; } .passkey-add { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--c-border); max-width: 400px; } .passkey-add h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 0.6rem; } .passkey-add label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.6rem; } .passkey-add input { font: inherit; padding: 0.55rem; border: 1px solid var(--c-input-border); border-radius: var(--radius); } .passkey-add button { background: var(--c-accent); color: var(--c-accent-contrast); border: none; border-radius: var(--radius); font: inherit; font-weight: 700; padding: 0.55rem 1.1rem; cursor: pointer; } .portal-nav__spacer { flex: 1; } .portal-nav__who { color: var(--c-text-secondary); font-size: 0.85rem; } .portal-setup-cta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--c-surface-sunken); border: 1px solid var(--c-accent); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1rem; } .portal-setup-cta__btn { background: var(--c-accent); color: var(--c-accent-contrast); text-decoration: none; font-weight: 700; padding: 0.4rem 0.9rem; border-radius: var(--radius); white-space: nowrap; } .team-invite { margin-top: 1.5rem; } .team-invite__form { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; } .team-invite__form input[type="text"], .team-invite__form input[type="email"] { font: inherit; padding: 0.5rem; border: 1px solid var(--c-input-border); border-radius: var(--radius); } .team-invite__form input[type="submit"] { background: var(--c-accent); color: var(--c-accent-contrast); border: none; border-radius: var(--radius); font: inherit; font-weight: 700; padding: 0.5rem 1rem; cursor: pointer; } .portal-table button, .team-invite button { background: none; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.25rem 0.6rem; cursor: pointer; font: inherit; font-size: 0.82rem; }