/* Lake Motor Group — modernized rebuild */ :root { --bg: #ffffff; /* card / surface */ --bg-alt: #f7f8fa; /* soft page background, sections */ --fg: #101828; --fg-muted: #5b6470; --line: #eaecf0; --line-strong: #d6dae1; /* hover/emphasis border — one step past --line */ --accent: #d32431; /* brand red — CTAs, active, badges */ --accent-fg: #ffffff; --accent-hover: #b11c28; /* Money/positive green — price & financing badges only */ --good: #067647; --good-bg: #ecfdf3; --good-line: #abefc6; --shadow: 0 1px 3px rgba(16, 24, 40, .08); --shadow-2: 0 8px 24px rgba(16, 24, 40, .12); --radius: 12px; --radius-sm: 8px; --maxw: 1300px; /* Dark "chrome" — header / topbar / dark bands / footer */ --ink: #101725; --ink-bar: #0b1019; --ink-fg: #ffffff; --ink-muted: #9aa7bd; --ink-line: rgba(255, 255, 255, .10); color-scheme: light; } /* Night mode — overrides the light surface tokens only; brand red + dark header chrome stay as-is (they already read well on a dark page). Toggled by the sun/moon button, persisted in localStorage, applied via data-theme on . */ :root[data-theme="dark"] { --bg: #161b22; /* card / surface */ --bg-alt: #0d1117; /* page background */ --fg: #e6edf3; --fg-muted: #9aa7b4; --line: #2a313c; --line-strong: #3d4757; --good: #3fb968; --good-bg: #10271b; --good-line: #1f4a34; --shadow: 0 1px 3px rgba(0, 0, 0, .45); --shadow-2: 0 10px 28px rgba(0, 0, 0, .55); color-scheme: dark; } /* Sun/moon theme switch — lives in the (always-dark) header, so uses ink tokens */ .theme-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid var(--ink-line); border-radius: 999px; color: var(--ink-fg); cursor: pointer; transition: background .15s, border-color .15s; } .theme-toggle:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .30); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .ico-sun { display: none; } :root[data-theme="dark"] .theme-toggle .ico-sun { display: block; } :root[data-theme="dark"] .theme-toggle .ico-moon { display: none; } /* Mobile menu (hamburger) button — same pill as the theme toggle; hidden on desktop where the nav shows inline. Icon flips to an X while the menu is open. */ .nav-toggle { display: none; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid var(--ink-line); border-radius: 999px; color: var(--ink-fg); cursor: pointer; transition: background .15s, border-color .15s; } .nav-toggle:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .30); } .nav-toggle svg { width: 20px; height: 20px; display: block; } .nav-toggle .ico-x { display: none; } .site-header.nav-open .nav-toggle .ico-bars { display: none; } .site-header.nav-open .nav-toggle .ico-x { display: block; } :root[data-theme="light"] .nav-toggle:hover { background: rgba(16, 24, 40, .06); border-color: var(--line-strong); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: clip; /* lock horizontal scroll; clip (not hidden) keeps the sticky header working */ overscroll-behavior-x: none; /* no sideways rubber-band on diagonal finger swipes */ } /* The HTML hidden attribute should always win over any display:* class rule. Browsers default to [hidden] { display: none } but a class selector can override that — !important here guarantees correctness everywhere. */ [hidden] { display: none !important; } body { font: 16px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--fg); background: var(--bg-alt); -webkit-font-smoothing: antialiased; } .price, .tabular { font-variant-numeric: tabular-nums; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--fg-muted); } .small { font-size: .9em; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .center { text-align: center; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* Header */ .site-header { background: var(--ink); border-bottom: 1px solid var(--ink-line); position: sticky; top: 0; z-index: 50; } .header-inner { display: flex; align-items: center; gap: 24px; padding: 14px 24px; } .brand { display: flex; align-items: center; color: var(--fg); text-decoration: none; } .brand:hover { text-decoration: none; } .brand img { max-height: 56px; width: auto; /* logo v3: clean image + soft glow (tuned for the dark header) */ filter: drop-shadow(0 0 5px rgba(214,38,45,.55)) drop-shadow(0 0 13px rgba(214,38,45,.30)); } .nav { display: flex; gap: 4px; margin-left: auto; } .nav a { color: var(--ink-fg); padding: 8px 12px; border-radius: 8px; font-weight: 500; white-space: nowrap; } .nav a:hover { background: rgba(255, 255, 255, .08); text-decoration: none; } .nav a.active { color: #fff; box-shadow: inset 0 -2px 0 var(--accent); } .cta { background: var(--accent); color: var(--accent-fg); padding: 9px 14px; border-radius: 999px; font-weight: 600; } .cta:hover { background: var(--accent-hover); text-decoration: none; } @media (max-width: 800px) { /* Mobile header: row 1 = logo + theme toggle + hamburger (pinned top-right); row 2 = the pre-qualify CTA full-width. The nav is collapsed into the hamburger and drops down as a full-width vertical menu when opened — no horizontal scroll row (items were easy to miss). */ .header-inner { flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 16px; } .header-inner .brand { order: 1; } .header-inner .theme-toggle { order: 2; margin-left: auto; } .nav-toggle { display: inline-flex; order: 3; } .header-inner .cta { order: 4; width: 100%; margin: 0; display: flex; justify-content: center; } /* Collapsed by default; opens as an absolutely-positioned dropdown below the whole header so the sticky bar itself stays compact. Inherits the header's ink chrome (dark, or light in day mode via the scoped override above). */ .header-inner .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; background: var(--ink); border-top: 1px solid var(--ink-line); box-shadow: var(--shadow-2); padding: 6px 0; max-height: calc(100dvh - 100%); overflow-y: auto; } .site-header.nav-open .nav { display: flex; } .header-inner .nav a { width: 100%; padding: 14px 20px; border-radius: 0; /* full-width tap targets */ border-bottom: 1px solid var(--ink-line); } .header-inner .nav a:last-child { border-bottom: 0; } .header-inner .nav a.active { box-shadow: inset 3px 0 0 var(--accent); } .container { padding: 0 16px; } } /* Day mode: the header follows the theme instead of staying always-dark (team: the day/night toggle should flip the top bar too, not just page content). Scoped to the .site-header subtree — the ink tokens inherit down to the topbar/nav/toggle — so the footer + homepage search band stay dark chrome. */ :root[data-theme="light"] .site-header { --ink: #ffffff; /* header bg */ --ink-bar: #f7f8fa; /* topbar */ --ink-fg: #101828; /* text */ --ink-muted: #5b6470; --ink-line: #eaecf0; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); } /* Logo glow is tuned for the dark bar (red halo); on white the silver highlights need a neutral shadow to separate instead. */ :root[data-theme="light"] .site-header .brand img { filter: drop-shadow(0 1px 2px rgba(16, 24, 40, .28)); } /* Hover/active states hard-coded for a dark bar (white overlays, white active text) → light-chrome equivalents so they stay visible on white. */ :root[data-theme="light"] .nav a:hover, :root[data-theme="light"] .loc-switch summary:hover { background: rgba(16, 24, 40, .06); } :root[data-theme="light"] .nav a.active { color: var(--fg); } :root[data-theme="light"] .theme-toggle:hover { background: rgba(16, 24, 40, .06); border-color: var(--line-strong); } /* Hero */ .hero { background: linear-gradient(180deg, #111e35 0%, #1D3461 100%); color: #fff; padding: 72px 0 88px; } .hero .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: #a4b6e3; margin: 0 0 10px; } .hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; margin: 0 0 16px; letter-spacing: -.02em; } .hero .lede { font-size: 1.15rem; color: #cdd6ee; max-width: 56ch; margin: 0 0 28px; } .hero-copy { max-width: 760px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } .btn { display: inline-block; padding: 12px 22px; border-radius: 999px; font-weight: 600; border: 1px solid transparent; cursor: pointer; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { background: transparent; color: inherit; border-color: rgba(255,255,255,.4); } .btn svg { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: -3px; margin-right: 6px; } .hero .btn-ghost { color: #fff; } .section .btn-ghost { color: var(--fg); border-color: var(--line); } .btn-ghost:hover { background: rgba(255,255,255,.08); } .section .btn-ghost:hover { background: var(--bg-alt); } /* Sections */ .section { padding: 56px 0; } /* Inventory sits right under the trust strip — trim the top gap so cars pull up (team). */ .section-inv { padding-top: 24px; } /* Sales use very wide monitors — let the inventory grid keep filling columns on big screens instead of capping at the site width (team). Scales with viewport. */ @media (min-width: 1400px) { .section-inv { max-width: min(94vw, 2100px); } } .section.narrow { max-width: 760px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .section h2, .section h1 { margin: 0; } .link { font-weight: 600; } .band { background: var(--bg-alt); padding: 56px 0; margin-top: 24px; } .band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .band h2 { margin: 0 0 12px; } .features { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .features li { padding-left: 22px; position: relative; } .features li::before { content: "✓"; color: var(--accent); position: absolute; left: 0; font-weight: 700; } @media (max-width: 800px) { .band-grid { grid-template-columns: 1fr; gap: 24px; } } /* Grid + cards */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--fg); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .card-link { display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; text-decoration: none; } /* Capital One-styled pre-qualify CTA (their navy + red accent) */ /* Capital One pre-qualify CTA — modern financial button: solid Capital One navy for trust, the brand red as a shield-check icon (secure + approved), real depth + a smooth lift on hover. Replaces the dated red-underline style. The icon is a CSS mask, so no template changes are needed. */ .capone-icon::before { content: ""; flex: none; width: 16px; height: 16px; background: #e8342a; -webkit-mask: var(--capone-shield) center / contain no-repeat; mask: var(--capone-shield) center / contain no-repeat; } :root { --capone-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 8.6 8 10 4.6-1.4 8-5 8-10V5l-8-3Zm-1 13-3-3 1.4-1.4L11 12.2l3.6-3.6L16 10l-5 5Z'/%3E%3C/svg%3E"); } .card-prequal { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 16px 16px; padding: 12px 14px; font-weight: 700; font-size: .9rem; line-height: 1.15; letter-spacing: .01em; color: #fff; background: #004977; /* Capital One navy */ border: none; border-radius: 12px; text-decoration: none; box-shadow: 0 2px 6px rgba(0, 73, 119, .28); transition: background .16s ease, box-shadow .16s ease, transform .16s ease; } .card-prequal::before { content: ""; flex: none; width: 16px; height: 16px; background: #e8342a; -webkit-mask: var(--capone-shield) center / contain no-repeat; mask: var(--capone-shield) center / contain no-repeat; } .card-prequal:hover { background: #013d5b; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 73, 119, .4); transform: translateY(-1px); } .card-prequal:focus-visible { outline: 3px solid rgba(210, 46, 30, .55); outline-offset: 2px; } /* Front-page locations — a COMPACT bar that unfolds into the full store cards, so the inventory is visible immediately (team: too much space above the cars). */ .loc-disclosure { padding-top: 20px; padding-bottom: 4px; } .loc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .loc-bar-toggle { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font: inherit; text-align: left; color: var(--fg); background: none; border: none; cursor: pointer; padding: 6px 0; } .loc-bar-title { font-weight: 700; white-space: nowrap; flex: none; } /* flex:1 + min-width:0 so it ellipsis-truncates instead of pushing the chevron out past the toggle and onto the map button (mobile overlap bug). */ .loc-bar-names { flex: 1 1 auto; min-width: 0; color: var(--fg-muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .loc-bar-chev { width: 18px; height: 18px; flex: none; color: var(--fg-muted); transition: transform .2s ease; } .loc-map-open { flex: none; white-space: nowrap; } /* Narrow screens: stack the bar so the "Find my nearest store" button sits on its own full-width row instead of colliding with the toggle. */ @media (max-width: 600px) { /* column-reverse: "Find my nearest store" on top, locations toggle below. */ .loc-bar { flex-direction: column-reverse; align-items: stretch; gap: 10px; } .loc-map-open { width: 100%; } } /* Animated unfold via grid-template-rows 0fr -> 1fr (modern auto-height trick). */ .loc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; } .loc-panel-inner { overflow: hidden; min-height: 0; } .loc-disclosure.open .loc-panel { grid-template-rows: 1fr; } .loc-disclosure.open .loc-bar-chev { transform: rotate(180deg); } @media (hover: hover) { /* Desktop enhancement: hovering the bar previews the stores without a click. */ .loc-disclosure:hover .loc-panel { grid-template-rows: 1fr; } .loc-disclosure:hover .loc-bar-chev { transform: rotate(180deg); } } .loc-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; padding-top: 16px; } .loc-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--fg); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .loc-card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-2px); } /* Stretched link: covers the whole card so any click shops the store; the Map button is raised above it (z-index) so it still works. */ .loc-card-stretch { position: absolute; inset: 0; z-index: 0; border-radius: inherit; } .loc-card > :not(.loc-card-stretch) { position: relative; z-index: 1; pointer-events: none; } .loc-card .loc-card-map { pointer-events: auto; } .loc-card-name { font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; } .loc-card-city { color: var(--fg-muted); font-size: .9rem; } .loc-card-count { color: var(--accent); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; } .loc-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .loc-card-shop { font-weight: 600; font-size: .9rem; color: var(--accent); } .loc-card-map { flex: none; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: .82rem; font-weight: 600; color: var(--fg); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; } .loc-card-map::before { content: "📍"; } .loc-card-map:hover { border-color: var(--accent); color: var(--accent); } /* Store-locator popup (front page) */ .smm { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; } .smm-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); } .smm-panel { position: relative; z-index: 1; width: 100%; max-width: 720px; max-height: 90vh; overflow: auto; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 22px 24px 24px; } .smm-close { position: absolute; top: 10px; right: 12px; background: transparent; border: none; color: var(--fg-muted); font-size: 1.8rem; line-height: 1; cursor: pointer; } .smm-close:hover { color: var(--fg); } .smm-title { margin: 0 6px 14px 0; font-size: 1.3rem; } .smm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .smm-search { display: flex; gap: 8px; } .smm-search input { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg); font: inherit; min-width: 150px; } .smm-slider { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; } .smm-slider input[type=range] { width: 100%; accent-color: var(--accent); } .smm-map { height: 380px; margin: 16px 0 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; z-index: 0; } .smm-result { margin-top: 14px; color: var(--fg); font-size: .95rem; } .smm-result .nearby-loc, .smm-result .nearby-list > b, .smm-result .nearby-lot { color: var(--fg); } .smm-result .nearby-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .smm-result .nearby-lot { font-size: .95rem; margin-top: 2px; } .smm-result .nearby-lot a, .smm-result .nearby-loc b { color: var(--accent); font-weight: 600; text-decoration: none; } @media (max-width: 560px) { .smm-map { height: 300px; } .smm-slider { flex-basis: 100%; } } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); text-decoration: none; } .card-img { aspect-ratio: 4/3; background: var(--bg-alt); overflow: hidden; } .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--fg-muted); background: repeating-linear-gradient(45deg, var(--bg-alt) 0 12px, var(--bg) 12px 24px); } .card-placeholder.big { aspect-ratio: 16/10; font-size: 1.1rem; } .card-body { padding: 16px; } .card-title { font-weight: 600; } .card-meta { display: flex; justify-content: space-between; margin-top: 8px; color: var(--fg-muted); font-size: .95rem; } .card-price { color: var(--fg); font-weight: 700; } /* Richer vehicle card (Sergey spec: big price, green deal pill, est payment, location) */ .card-media { position: relative; } .card-count { position: absolute; bottom: 8px; right: 8px; background: rgba(16, 24, 40, .75); color: #fff; font-size: .72rem; font-weight: 500; padding: 2px 8px; border-radius: 6px; } .card-specs { color: var(--fg-muted); font-size: .85rem; margin-top: 6px; } .card-pricerow { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .card-pricerow .card-price { font-size: 1.5rem; } /* min-width:0 + ellipsis so a long deal note (e.g. "Flagship Audi Under $13K") never overflows the card frame (team bug report). */ .badge-deal { background: var(--good-bg); color: var(--good); border: 1px solid var(--good-line); font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-est { color: var(--fg-muted); font-size: .82rem; margin-top: 3px; } .card-fin { color: var(--good); font-weight: 600; } /* Sheet "Sales Notes" — a neutral dealer note (mixes perks + honest disclosures) */ .card-note { margin-top: 8px; font-size: .84rem; color: var(--fg-muted); line-height: 1.35; } .card-note b { color: var(--fg); } /* On cards: compact by default, full text on hover (popover, no grid reflow). Touch devices (no hover) just show it in full — nothing to hover. */ .card-note-wrap { position: relative; margin-top: 8px; } .card-note-wrap .card-note { margin-top: 0; } .card-note-full { display: none; font-size: .84rem; color: var(--fg-muted); line-height: 1.35; } .card-note-full b { color: var(--fg); } @media (hover: hover) { .card-note-wrap .card-note { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* Grow UPWARD (over the non-interactive specs/price), never downward over the Map / Get-pre-qualified buttons, so those stay clickable on hover (team). */ .card-note-full { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 8px 11px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line-strong); box-shadow: var(--shadow-2); } .card:hover .card-note-full { display: block; } } /* Action buttons always sit above any hover popover so they're never blocked. */ .card-locrow, .card-prequal { position: relative; z-index: 7; } @media (hover: hover) { /* When the note popover opens, the location badge it would sit over vanishes, then returns when the note hides (team). Scoped to cards that have a note. */ .card:has(.card-note-wrap):hover .card-loc { opacity: 0; transition: opacity .12s; } } /* Sales note on the car detail page */ .vdp-note { margin: 4px 0 14px; padding: 10px 12px; border-radius: 0 8px 8px 0; font-size: .92rem; line-height: 1.4; } .vdp-note-sell { color: var(--fg); background: var(--bg-alt); border-left: 3px solid var(--line-strong); } .vdp-note-cond { color: var(--fg); background: var(--bg-alt); border-left: 3px solid #b45309; } /* VDP price → financing line + the primary test-drive CTA */ .vdp-fin { margin: 4px 0 14px; color: var(--fg-muted); font-size: .95rem; } .btn-testdrive { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; margin-bottom: 18px; } .btn-testdrive svg { width: 18px; height: 18px; } .card-loc { color: var(--fg-muted); font-size: .82rem; } /* Lot badge + its Map button, below the card link (a button can't nest in an ). */ .card-locrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px 12px; } /* Google-Maps-style chip: light surface, soft shadow, pin glyph. Uses our own pin and brand red — not Google's mark, since this opens our OSM map. */ .card-map-btn { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px 5px 9px; font: inherit; font-size: .78rem; font-weight: 500; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); cursor: pointer; transition: background .15s, box-shadow .15s, border-color .15s; } .card-map-btn svg { width: 14px; height: 14px; flex: none; fill: var(--accent); } .card-map-btn:hover { background: var(--bg-alt); border-color: var(--line-strong); box-shadow: var(--shadow-2); } /* Empty / zero-inventory state — branded recovery, never a blank grid */ .empty-state { text-align: center; max-width: 40rem; margin: 8px auto 0; padding: 40px 24px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); } .empty-state h2 { margin: 0 0 8px; } .empty-state p { color: var(--fg-muted); margin: 0 0 20px; } .empty-state .other-lots { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; } .empty-state .lot-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; color: var(--fg); font-size: .9rem; background: var(--bg-alt); } .empty-state .lot-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .empty-state .lot-chip b { color: var(--accent); } /* Filters */ .filters { margin-bottom: 20px; } .filters input[type=search] { width: 100%; max-width: 420px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 1rem; } .filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; } .filter-row select { padding: 8px 30px 8px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.95rem; background-color: var(--bg); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; appearance: none; cursor: pointer; } .filter-row select:focus { outline: 2px solid var(--accent, #0a66c2); outline-offset: 1px; } .filter-row .reset { background: none; border: none; color: var(--muted); font-size: 0.9rem; text-decoration: underline; cursor: pointer; padding: 6px 8px; } .filter-row .reset:hover { color: var(--fg); } .filter-count { margin-top: 10px; color: var(--muted); font-size: 0.9rem; } .filter-count strong { color: var(--fg); } /* Car detail */ .breadcrumb { margin: 0 0 16px; } .car-detail { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; margin-top: 8px; } @media (max-width: 700px) { .car-detail { grid-template-columns: 1fr; } } /* Grid columns default to min-width:auto, so a 40+ thumb filmstrip (which has its own overflow-x) would otherwise expand the left column to its full intrinsic width and blow the two-column layout off-screen. min-width:0 lets the column shrink so the filmstrip scrolls inside it instead. */ .car-gallery { min-width: 0; } .gallery-thumbs { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } .gallery-thumbs::-webkit-scrollbar { height: 4px; } .gallery-thumbs::-webkit-scrollbar-track { background: transparent; } .gallery-thumbs::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; } .gallery-main { position: relative; background: var(--bg-alt); border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; min-height: 320px; max-height: 480px; } .gallery-stage { position: absolute; inset: 0; } .gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-main.has-photo img { cursor: zoom-in; } /* Inline gallery prev/next — large, always-visible nav so customers can step through photos right on the main image, without hunting tiny thumbnails or opening the lightbox. Sized to a comfortable touch target (~52px desktop, 46px mobile) with a high-contrast backdrop that reads over any photo. */ .g-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(20,22,25,.62); color: #fff; border: 1px solid rgba(255,255,255,.30); border-radius: 50%; cursor: pointer; opacity: .92; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: background .15s, opacity .15s, transform .12s; } .g-nav:hover { background: rgba(20,22,25,.86); opacity: 1; } .g-nav:active { transform: translateY(-50%) scale(.92); } .g-nav:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; opacity: 1; } .g-nav svg { width: 26px; height: 26px; } .g-prev { left: 12px; } .g-next { right: 12px; } @media (max-width: 640px) { .g-nav { width: 46px; height: 46px; } .g-nav svg { width: 23px; height: 23px; } .g-prev { left: 8px; } .g-next { right: 8px; } } /* Hover overlay (desktop): darken the photo + show a centered magnifier so it's obvious the image is clickable to zoom. Only when a photo is shown (.has-photo), never over the video iframe. */ .gallery-main.has-photo::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .15s; pointer-events: none; } .gallery-main.has-photo:hover::after { background: rgba(0,0,0,.18); } .gallery-magnify { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.9); width: 56px; height: 56px; padding: 13px; background: rgba(0,0,0,.5); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none; } .gallery-main.has-photo:hover .gallery-magnify { opacity: 1; transform: translate(-50%,-50%) scale(1); } .gallery-magnify svg { width: 100%; height: 100%; } /* Expand-to-fullscreen button — always visible when a photo is shown. On touch devices (no hover) this is the persistent zoom affordance. */ .gallery-expand { position: absolute; bottom: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; padding: 9px; background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .gallery-main:not(.has-photo) .gallery-expand { display: none; } .gallery-expand:hover { background: rgba(0,0,0,.85); } .gallery-expand svg { width: 100%; height: 100%; } /* ── Fullscreen photo viewer ──────────────────────────────────────────────── Full-res photo on a black stage with smooth cursor-anchored zoom, clamped pan (the image can never drift off to one side), and frosted-glass controls. Self-contained, no library. JS moves the overlay to on init so position:fixed always resolves against the viewport. */ .lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9999; background: radial-gradient(125% 125% at 50% 38%, #16181b 0%, #000 72%); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; } .lightbox.open { opacity: 1; visibility: visible; } .lb-stage { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; cursor: zoom-in; } .lightbox.is-zoomed .lb-stage { cursor: grab; } .lightbox.is-panning .lb-stage { cursor: grabbing; } .lb-img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; transform: translate(0,0) scale(1); transform-origin: center center; transition: transform .22s cubic-bezier(.22,.61,.36,1); will-change: transform; } .lightbox.is-panning .lb-img { transition: none; } /* 1:1 follow while dragging */ .lightbox.open .lb-img { animation: lb-fade-in .32s ease; } @keyframes lb-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Subtle top hint */ .lb-hint { position: absolute; top: 0; left: 0; right: 0; z-index: 3; text-align: center; padding: 16px; color: rgba(255,255,255,.6); font-size: .8rem; letter-spacing: .04em; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.6); } /* Frosted control buttons */ .lb-btn { position: absolute; z-index: 4; display: flex; align-items: center; justify-content: center; background: rgba(22,24,27,.55); color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.35); transition: background .18s, transform .18s, border-color .18s, opacity .18s; } .lb-btn:hover { background: rgba(46,49,54,.82); border-color: rgba(255,255,255,.34); transform: scale(1.06); } .lb-btn:active { transform: scale(.94); } .lb-btn svg { width: 58%; height: 58%; } .lb-close { top: 18px; right: 18px; width: 52px; height: 52px; } .lb-nav { top: 50%; transform: translateY(-50%); width: 76px; height: 76px; background: rgba(22,24,27,.7); } .lb-nav:hover { transform: translateY(-50%) scale(1.06); } .lb-nav svg { width: 64%; height: 64%; } .lb-prev { left: 24px; } .lb-next { right: 24px; } .lb-counter { position: absolute; top: 20px; left: 20px; z-index: 4; color: #fff; font-size: .9rem; font-weight: 600; letter-spacing: .02em; background: rgba(22,24,27,.55); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 6px 14px; border-radius: 999px; } /* Zoom cluster — always visible; "Fit" doubles as the reset-to-fit button */ .lb-zoom { position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 4px; background: rgba(22,24,27,.55); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 6px; border-radius: 999px; box-shadow: 0 6px 22px rgba(0,0,0,.4); } .lb-zoom-btn { position: static; width: 38px; height: 38px; background: transparent; border: none; box-shadow: none; } .lb-zoom-btn:hover { background: rgba(255,255,255,.16); transform: none; } .lb-zoom-level { min-width: 58px; height: 38px; padding: 0 12px; background: transparent; color: #fff; border: none; cursor: pointer; font-size: .8rem; font-weight: 700; letter-spacing: .04em; border-radius: 999px; transition: background .15s, color .15s; } .lb-zoom-level:hover { background: rgba(255,255,255,.16); } .lightbox.is-zoomed .lb-zoom-level { color: #ffd23f; } /* highlight the reset when zoomed */ /* Filmstrip */ .lb-filmstrip { flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; background: rgba(9,10,11,.94); scrollbar-width: thin; } .lb-thumb { flex: 0 0 92px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: none; opacity: .5; transition: opacity .18s, border-color .18s, transform .18s; } .lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .lb-thumb:hover { opacity: .85; transform: translateY(-2px); } .lb-thumb.active { border-color: #fff; opacity: 1; } @media (max-width: 600px) { .lb-nav { width: 60px; height: 60px; } .lb-prev { left: 12px; } .lb-next { right: 12px; } .lb-thumb { flex: 0 0 76px; height: 54px; } .lb-zoom { bottom: 92px; } .lb-hint { font-size: .72rem; padding: 12px; } } .gallery-iframe { width: 100%; height: 100%; min-height: 320px; } .gallery-iframe iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; } .gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 6px; } .thumb-video { position: relative; } .thumb-video .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); color: #fff; pointer-events: none; border-radius: inherit; } .thumb-video .play-overlay svg { width: 28px; height: 28px; opacity: 0.95; } .thumb { flex: 0 0 80px; height: 60px; padding: 0; border: 2px solid transparent; background: var(--bg-alt); border-radius: 8px; overflow: hidden; cursor: pointer; } .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .thumb.active { border-color: var(--accent); } .car-info h1 { font-size: 1.7rem; margin: 0 0 4px; letter-spacing: -.01em; } .price { font-size: 1.8rem; font-weight: 800; margin: 12px 0 8px; color: var(--accent); } .urgency-note { font-size: .88rem; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 6px 10px; margin: 0 0 18px; display: inline-flex; align-items: center; gap: 6px; } .urgency-note svg { width: 14px; height: 14px; flex-shrink: 0; } /* SOLD banner on a sold car's detail page (replaces price + urgency) */ .sold-banner { display: flex; align-items: center; gap: 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 14px 16px; margin: 14px 0 22px; } .sold-banner .sold-stamp { display: inline-block; font-weight: 900; font-size: 1.2rem; letter-spacing: 2px; color: #fff; background: #dc2626; padding: 6px 12px; border-radius: 4px; transform: rotate(-3deg); } .sold-banner .sold-note { color: #7f1d1d; line-height: 1.4; } .sold-banner a { color: #7f1d1d; text-decoration: underline; } /* SOLD diagonal stamp on recently-sold gallery cards */ .card-sold { position: relative; } .card-sold .card-img { position: relative; } .card-sold .sold-stamp { position: absolute; top: 18px; right: -8px; background: #dc2626; color: #fff; font-weight: 900; font-size: 1rem; letter-spacing: 2px; padding: 6px 14px; border-radius: 4px; transform: rotate(8deg); box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none; } .card-sold .card-img img { filter: brightness(.92); } .card-sold-nolink { cursor: default; } .card-sold-price { font-weight: 700; color: var(--fg); } /* Text-card placeholder for a sold vehicle we never listed (no photo) */ .card-placeholder-sold { aspect-ratio: 16/10; display: grid; place-items: center; font-size: 1.3rem; font-weight: 700; letter-spacing: .02em; color: var(--fg-muted); background: repeating-linear-gradient(45deg, var(--bg-alt) 0 14px, var(--bg) 14px 28px); } /* SPECIAL stamp for the AI-picked featured car on /specials.html */ .card-special { position: relative; max-width: 600px; } .card-special .card-img { position: relative; } .card-special .special-stamp { position: absolute; top: 18px; left: -8px; background: #047857; color: #fff; font-weight: 900; font-size: 1rem; letter-spacing: 2px; padding: 6px 14px; border-radius: 4px; transform: rotate(-6deg); box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none; } /* Uses the --good tokens (same as .badge-deal) so the tint follows the theme instead of staying a light slab on a dark card. */ /* Clamped special text (even card heights) + full-text popover on hover (team). */ .special-reason-wrap { position: relative; margin: 10px 0 0; } .special-reason, .special-reason-full { margin: 0; padding: 10px 12px; background: var(--good-bg); border-left: 3px solid var(--good); color: var(--good); font-size: 0.95rem; line-height: 1.4; border-radius: 0 6px 6px 0; } .special-reason { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Full text as a hover tooltip that floats UPWARD (over the non-interactive price/specs), never downward onto the location tag or the pre-qualify button. bottom:0 anchors it to the clamped block and grows up; capped + scrollable so a very long pitch can't run off the card. */ .special-reason-full { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: none; max-height: 240px; overflow-y: auto; border: 1px solid var(--good-line); box-shadow: var(--shadow-2); border-radius: 0 6px 6px 0; } .card-special:hover .special-reason-full, .special-reason-wrap:focus-within .special-reason-full { display: block; } /* Careers / Vacancies — one job card per open role */ .job { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 24px; margin-top: 8px; } .job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } .job-title { margin: 0; } .job-meta { color: var(--fg-muted); font-size: .92rem; margin: 4px 0 0; } .job-apply-top { flex: none; } .job h3 { margin: 20px 0 6px; font-size: 1.05rem; } .job-list { margin: 0; padding-left: 20px; } .job-list li { margin: 4px 0; } .job-apply { margin-top: 24px; padding: 18px 20px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); } .job-apply h3 { margin-top: 0; } .job-apply-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } @media (max-width: 560px) { .job-apply-top { display: none; } } .specs { display: grid; grid-template-columns: max-content 1fr; column-gap: 16px; row-gap: 6px; margin: 0 0 22px; } .specs dt { color: var(--fg-muted); } .specs dd { margin: 0; font-weight: 500; } .contact-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 16px; } .carfax-card { border: 1px solid var(--border, #e2e2e2); border-radius: 10px; overflow: hidden; margin: 0 0 14px; font-size: .9rem; } .carfax-card-header { background: #003087; color: #fff; padding: 9px 14px; font-weight: 600; display: flex; align-items: center; gap: 9px; letter-spacing: .01em; } .carfax-wordmark { background: #fff; color: #003087; font-weight: 800; font-size: .72rem; letter-spacing: .04em; padding: 2px 6px; border-radius: 3px; } .carfax-card-body { display: grid; grid-template-columns: 1fr 1fr; } .carfax-stat { padding: 10px 14px; border-top: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 8px; line-height: 1.3; } .carfax-stat .ci { flex: none; } .carfax-stat.good { color: #1a7a1a; } .carfax-stat.warn { color: #c0392b; } .carfax-stat small { opacity: .7; } @media (max-width: 540px) { .carfax-card-body { grid-template-columns: 1fr; } } .carfax-badge { display: inline-block; margin: 2px 0 12px; } .car-description { margin-top: 28px; overflow-wrap: break-word; } .car-features { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; } .car-features li { padding-left: 20px; position: relative; font-size: .95rem; } .car-features li::before { content: "•"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } /* Contact grid */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 12px; } @media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } } /* Lead form */ .lead-section { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); max-width: 720px; } .lead-section h2 { margin: 0 0 4px; } .lead-form { display: grid; gap: 14px; margin-top: 18px; position: relative; } .lead-form label { display: grid; gap: 6px; } .lead-form label > span { font-size: .9rem; color: var(--fg-muted); } .lead-form label em { font-style: normal; color: var(--fg-muted); font-weight: 400; } .lead-form input[type=text], .lead-form input[type=tel], .lead-form input[type=email], .lead-form textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--bg); color: var(--fg); } .lead-form textarea { resize: vertical; min-height: 90px; } .lead-form input:focus, .lead-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .lead-form .lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 600px) { .lead-form .lead-row { grid-template-columns: 1fr; } } .lead-form button[type=submit] { justify-self: start; } .lead-form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* Floating "leave a message" widget */ .lm-bubble { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border: none; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); display: grid; place-items: center; z-index: 100; transition: transform .15s ease, box-shadow .15s ease; } .lm-bubble:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0, 0, 0, .22); } .lm-bubble svg { width: 26px; height: 26px; } .lm-bubble-open { background: var(--accent-hover); } .lm-panel { position: fixed; bottom: 92px; right: 24px; width: 340px; max-height: calc(100vh - 120px); background: var(--bg); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .22); z-index: 99; overflow: hidden; display: flex; flex-direction: column; } .lm-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #1D3461; color: #fff; } .lm-header h3 { margin: 0; font-size: 1rem; } .lm-close { background: transparent; border: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; } .lm-form { padding: 14px 16px 16px; display: grid; gap: 10px; position: relative; overflow-y: auto; } .lm-form label { display: grid; gap: 4px; } .lm-form label > span { font-size: .85rem; color: var(--fg-muted); } .lm-form label em { font-style: normal; font-weight: 400; } .lm-form input[type=text], .lm-form input[type=tel], .lm-form textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; } .lm-form textarea { resize: vertical; min-height: 72px; } .lm-form input:focus, .lm-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .lm-form button[type=submit] { justify-self: start; } /* Conversation view (after chat is started) */ .lm-chat { display: flex; flex-direction: column; height: 360px; max-height: calc(100vh - 180px); } .lm-messages { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: #f6f7f9; } .lm-msg { max-width: 80%; padding: 8px 12px; border-radius: 14px; font-size: .92rem; line-height: 1.35; word-wrap: break-word; } .lm-msg-visitor { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } .lm-msg-staff { align-self: flex-start; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-bottom-left-radius: 4px; } .lm-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--bg); } .lm-chat-form input { flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; font: inherit; } .lm-chat-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .lm-chat-send { background: var(--accent); color: #fff; border: none; width: 38px; height: 38px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; flex-shrink: 0; } .lm-chat-send:hover { background: var(--accent-hover); } .lm-chat-ended { text-align: center; padding: 16px; border-top: 1px solid var(--line); background: var(--bg); } .lm-chat-ended p { margin: 0 0 10px; color: var(--fg-muted); font-size: .9rem; } @media (max-width: 600px) { .lm-panel { width: calc(100vw - 32px); right: 16px; bottom: 80px; } .lm-bubble { right: 16px; bottom: 16px; } } /* Mobile-only sticky bottom action bar — present only on car detail pages */ .mobile-sticky-bar { display: none; } @media (max-width: 768px) { .mobile-sticky-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 16px; gap: 10px; background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -4px 12px rgba(0,0,0,.08); z-index: 40; } .mobile-sticky-bar .btn { flex: 1; justify-content: center; text-align: center; padding-left: 0; padding-right: 0; } /* When the sticky bar is on the page, push the floating "leave us a message" bubble higher so it doesn't sit on top of the bar. */ body:has(.mobile-sticky-bar) .lm-bubble { bottom: 84px; } body:has(.mobile-sticky-bar) { padding-bottom: 72px; } } /* Footer */ .site-footer { background: var(--ink); border-top: 3px solid var(--accent); color: var(--ink-muted); padding: 48px 0 24px; margin-top: 64px; } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .site-footer h4 { margin: 0 0 8px; font-size: .95rem; color: var(--ink-fg); } .site-footer p { margin: 4px 0; } .site-footer a { color: var(--ink-fg); } .site-footer a:hover { color: var(--accent); } .site-footer .muted { color: var(--ink-muted); } .footer-bottom { border-top: 1px solid var(--ink-line); margin-top: 32px; padding-top: 16px; font-size: .85rem; text-align: center; color: var(--ink-muted); } .footer-bottom a { color: var(--ink-fg); } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* ── Capital One financing — PREVIEW placeholders only. No third-party scripts load yet; these get swapped for the verified Capital One loaders once the integration is confirmed. ─────────────────────────────────────── */ :root { --capone-navy: #004977; --capone-red: #d03027; } .nav-prequal { font-weight: 700; color: #fff; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: 4px 12px; } .nav-prequal:hover { background: #fff; color: var(--capone-navy); text-decoration: none; } .capone-mark { font-weight: 800; letter-spacing: -.02em; color: var(--capone-navy); } .capone-mark span { color: var(--capone-red); } .capone-mark-lg { font-size: 1.6rem; } .capone-preview { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a6d00; background: #fff3cd; border: 1px solid #ffe08a; padding: 2px 7px; border-radius: 999px; vertical-align: middle; } .capone-panel { margin-top: 18px; padding: 16px; border: 1px solid #cfe0ec; border-radius: var(--radius); background: linear-gradient(180deg,#f4f9fd,#eef5fb); } .capone-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .capone-lead { margin: 0 0 8px; font-size: .95rem; line-height: 1.4; } .capone-est { margin: 0 0 12px; font-size: 1.05rem; color: var(--capone-navy); } .capone-est strong { font-size: 1.35rem; } .capone-est span { display: block; font-size: .72rem; color: var(--fg-muted); font-weight: 400; } .capone-btn { background: var(--capone-red); color: #fff; width: 100%; text-align: center; } .capone-btn:hover { background: #b3271a; text-decoration: none; } .capone-note { margin: 10px 0 0; font-size: .72rem; color: var(--fg-muted); font-style: italic; } .capone-hero { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .capone-appshell { margin-top: 20px; padding: 24px; border: 1px solid #cfe0ec; border-radius: var(--radius); background: linear-gradient(180deg,#f4f9fd,#eef5fb); } .capone-appshell-row { display: flex; gap: 12px; margin-bottom: 14px; } .capone-skel { flex: 1; height: 44px; border-radius: 8px; background: linear-gradient(90deg,#e3edf5,#f2f7fb,#e3edf5); background-size: 200% 100%; animation: capone-shimmer 1.4s linear infinite; } .capone-skel.skel-lg { height: 52px; } @keyframes capone-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .capone-btn-lg { display: inline-block; width: auto; padding: 12px 22px; margin-top: 4px; } /* --- Locations (per-lot pages + index) ----------------------------------- */ .loc-detail { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: start; margin: 1rem 0 2rem; padding: 1.25rem 1.5rem; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); } .loc-facts { list-style: none; margin: 0; padding: 0; min-width: 16rem; } .loc-facts li { margin: 0 0 .55rem; } .loc-facts strong { display: block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); } .loc-hours { border-collapse: collapse; font-size: .92rem; } .loc-hours caption { text-align: left; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: .3rem; } .loc-hours th { text-align: left; font-weight: 500; padding: .12rem 1.5rem .12rem 0; } .loc-hours td { text-align: right; color: var(--fg-muted); } .loc-card .card-body { padding: 1.1rem 1.25rem; } .loc-card-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: .6rem; font-size: .9rem; color: var(--fg-muted); } /* --- Top utility bar: location switcher (left) + phone (right) --------- */ .topbar { background: var(--ink-bar); border-bottom: 1px solid var(--ink-line); font-size: .9rem; color: var(--ink-muted); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding-top: 4px; padding-bottom: 4px; } .loc-switch { position: relative; } .loc-switch summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 5px 12px; min-height: 38px; border-radius: 999px; color: var(--ink-fg); } .loc-switch summary::-webkit-details-marker { display: none; } .loc-switch summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .loc-switch-text { white-space: nowrap; } .loc-switch summary:hover { background: rgba(255, 255, 255, .08); } .loc-switch-kicker { color: var(--ink-muted); } .loc-switch-name { font-weight: 600; } .loc-chev { color: var(--ink-muted); font-size: .8em; } .loc-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; min-width: 18rem; max-width: calc(100vw - 32px); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; } .loc-menu-head { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); padding: 8px 10px; } .loc-menu-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px; border-radius: 8px; color: var(--fg); text-decoration: none; } .loc-menu-item:hover { background: var(--bg-alt); text-decoration: none; } .loc-menu-item[aria-current="true"] { background: var(--bg-alt); font-weight: 600; } .loc-menu-name { font-weight: 500; } .loc-menu-meta { font-size: .85rem; color: var(--fg-muted); } .loc-menu-all { display: block; padding: 10px; margin-top: 4px; border-top: 1px solid var(--line); font-weight: 600; color: var(--accent); text-decoration: none; } .loc-menu-all:hover { background: var(--bg-alt); text-decoration: none; } .topbar-phone { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-fg); font-weight: 600; text-decoration: none; } .topbar-phone:hover { color: var(--accent); text-decoration: none; } @media (max-width: 800px) { .topbar-inner { padding-left: 16px; padding-right: 16px; } .topbar-phone span { display: none; } } /* --- Choose-your-store cards ------------------------------------------- */ .choose-hero { text-align: center; max-width: 42rem; margin-inline: auto; } .loc-card-cta { display: inline-block; margin-top: .7rem; color: var(--accent); font-weight: 600; } /* ── Inline "Ask AI about this vehicle" chat (detail page) ─────────────── */ .va-chat { margin-top: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow); overflow: hidden; } .va-head { padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg-alt); } .va-title { display: block; font-weight: 600; font-size: .95rem; color: var(--fg); } .va-sub { display: block; margin-top: 2px; font-size: .78rem; color: var(--fg-muted); } .va-thread { display: flex; flex-direction: column; gap: 8px; padding: 14px; max-height: 340px; overflow-y: auto; } .va-msg { max-width: 85%; padding: 8px 12px; border-radius: 14px; font-size: .92rem; line-height: 1.4; word-wrap: break-word; white-space: pre-wrap; } .va-msg-bot { align-self: flex-start; background: var(--bg-alt); color: var(--fg); border-bottom-left-radius: 4px; } .va-msg-bot a { color: var(--accent); } .va-msg-user { align-self: flex-end; background: var(--accent); color: var(--accent-fg); border-bottom-right-radius: 4px; } .va-typing { display: flex; gap: 4px; align-items: center; } .va-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-muted); animation: va-blink 1.2s infinite both; } .va-typing span:nth-child(2) { animation-delay: .2s; } .va-typing span:nth-child(3) { animation-delay: .4s; } @keyframes va-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: .9; } } .va-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; } .va-chip { font: inherit; font-size: .85rem; cursor: pointer; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg); } .va-chip:hover { border-color: var(--accent); color: var(--accent); } .va-form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg); } .va-form input { flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; font: inherit; } .va-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .va-send { flex-shrink: 0; width: 38px; height: 38px; border: none; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .va-send:hover { background: var(--accent-hover); } .va-foot { padding: 0 14px 12px; } .va-foot a { color: var(--accent); } /* ── Header polish: topbar contact, GET PRE-APPROVED, trust strip ─────── */ .topbar-contact { display: inline-flex; align-items: center; gap: 14px; } .topbar-addr { color: var(--ink-muted); } .cta-prequal { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: #004977; /* Capital One navy */ color: #fff; border: none; box-shadow: 0 2px 6px rgba(0, 73, 119, .28); transition: background .16s ease, box-shadow .16s ease, transform .16s ease; } .cta-prequal::before { content: ""; flex: none; width: 16px; height: 16px; background: #e8342a; -webkit-mask: var(--capone-shield) center / contain no-repeat; mask: var(--capone-shield) center / contain no-repeat; } .cta-prequal:hover { background: #013d5b; box-shadow: 0 6px 18px rgba(0, 73, 119, .4); transform: translateY(-1px); } .cta-prequal:focus-visible { outline: 3px solid rgba(210, 46, 30, .55); outline-offset: 2px; } .footer-badges { display: flex; justify-content: center; padding: 8px 24px 24px; } .carfax-toprated { height: 150px; width: auto; } /* VDP dealer trust seal — award badge + live review link at the buying moment */ .dealer-trust { display: flex; align-items: center; gap: 14px; margin: 16px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-alt); } .dealer-trust-badge { height: 84px; width: auto; flex: none; } .dealer-trust-txt { display: flex; flex-direction: column; gap: 3px; font-size: .9rem; } .dealer-trust-txt > b { font-size: .95rem; } .dealer-trust-stars { color: var(--good); font-weight: 700; text-decoration: none; } .dealer-trust-stars:hover { text-decoration: underline; } .trust-strip { background: var(--bg); border-bottom: 1px solid var(--line); } .trust-inner { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; padding: 9px 24px; font-size: .82rem; color: var(--fg-muted); } .trust-item b { color: var(--fg); font-weight: 600; } /* Google rating is positive social proof — green ★, not brand red (team). */ .trust-google b { color: var(--good); } .trust-google a { color: var(--good); font-weight: 600; } @media (max-width: 800px) { .topbar-addr { display: none; } /* Was wrapping to ~half the phone screen. Now one horizontal scroll-row that doesn't eat vertical space or block the inventory below it (team). */ .trust-inner { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; font-size: .74rem; gap: 0 18px; padding: 7px 16px; } .trust-inner::-webkit-scrollbar { display: none; } .trust-item { white-space: nowrap; flex: none; } } /* ── Homepage search band (inventory-first) + nearest-store widget ────── */ .search-band { background: var(--ink); color: var(--ink-fg); padding: 40px 0 44px; } .search-band h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 6px; letter-spacing: -.02em; } .search-band .sb-sub { color: var(--ink-muted); margin: 0 0 22px; } .sb-search { display: flex; gap: 10px; max-width: 640px; } .sb-search input { flex: 1; padding: 13px 18px; border: 1px solid var(--ink-line); border-radius: 999px; font: inherit; background: var(--bg); color: var(--fg); } .sb-search button { border: none; border-radius: 999px; padding: 13px 24px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; } .sb-search button:hover { background: var(--accent-hover); } .sb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .sb-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ink-line); background: rgba(255,255,255,.06); color: var(--ink-fg); border-radius: 999px; padding: 7px 14px; font-size: .88rem; } .sb-chip:hover { background: rgba(255,255,255,.14); text-decoration: none; } .sb-chip b { color: #fff; } /* nearest-store */ .nearby { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .nearby form { display: flex; gap: 8px; } .nearby input { width: 130px; padding: 10px 14px; border: 1px solid var(--ink-line); border-radius: 999px; background: var(--bg); color: var(--fg); font: inherit; } .nearby button, .nearby .geo-btn { border: 1px solid var(--ink-line); background: rgba(255,255,255,.06); color: var(--ink-fg); border-radius: 999px; padding: 10px 16px; font: inherit; font-size: .9rem; cursor: pointer; } .nearby button:hover, .nearby .geo-btn:hover { background: rgba(255,255,255,.14); } .nearby-result { width: 100%; margin-top: 6px; color: var(--ink-fg); font-size: .95rem; } .nearby-result a { color: #fff; font-weight: 600; text-decoration: underline; } /* New-arrival badge (top-left of card photo) */ .card-badge-new { position: absolute; top: 8px; left: 8px; z-index: 1; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 600; padding: 3px 9px; border-radius: 6px; letter-spacing: .01em; } /* Mechanic Specials tab — as-is cars kept off the general inventory */ .card-badge-ms { position: absolute; top: 8px; left: 8px; z-index: 1; background: #b45309; color: #fff; font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 6px; letter-spacing: .02em; } .badge-asis { background: var(--bg-alt); color: var(--fg-muted); border: 1px solid var(--line); font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; } .ms-note { margin: 0 0 22px; padding: 12px 16px; background: var(--bg-alt); border: 1px solid var(--line); border-left: 3px solid #b45309; border-radius: 0 8px 8px 0; font-size: .92rem; } /* Sticky price/CTA rail on the detail page (desktop) */ @media (min-width: 901px) { .car-info { position: sticky; top: 96px; align-self: start; } } /* ── Sonic-style faceted inventory filter (left sidebar) ──────────────── */ .inv-layout { display: grid; grid-template-columns: 264px 1fr; gap: 28px; align-items: start; } .inv-filters { position: sticky; top: 96px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 14px 14px; } /* Desktop: let the sticky sidebar scroll internally so tall filter lists (e.g. Engine) stay reachable instead of being pinned below the fold. One scroll container = no nested-scroll trap. Mobile drawer handles its own scroll. */ @media (min-width: 801px) { .inv-filters { max-height: calc(100vh - 112px); overflow-y: auto; } } .inv-filters-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 700; } .inv-clear { background: none; border: none; color: var(--accent); font: inherit; font-size: .85rem; cursor: pointer; } .inv-search { width: 100%; margin: 12px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; font: inherit; } .facet { border-bottom: 1px solid var(--line); } .facet > summary { list-style: none; cursor: pointer; padding: 12px 0; font-weight: 600; font-size: .92rem; display: flex; justify-content: space-between; align-items: center; } .facet > summary::-webkit-details-marker { display: none; } .facet > summary::after { content: "+"; color: var(--fg-muted); font-weight: 400; font-size: 1.1rem; } .facet[open] > summary::after { content: "–"; } /* No per-facet scroll box — that nested scroll container trapped the wheel on hover (team bug). The whole sidebar scrolls instead (see min-width rule below). */ .facet-body { padding: 0 0 12px; display: flex; flex-direction: column; gap: 9px; } .facet-opt { display: flex; align-items: center; gap: 8px; font-size: .88rem; cursor: pointer; } .facet-opt input { accent-color: var(--accent); flex-shrink: 0; } .facet-opt > span { flex: 1; } .facet-opt b { color: var(--fg-muted); font-weight: 400; font-size: .82rem; } .facet-opt.is-zero { opacity: .4; } .facet-range { flex-direction: row; align-items: center; gap: 8px; } .facet-range-sep { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line); } /* Dual-handle range slider + typeable boxes (price + mileage) */ .rr { padding: 2px 2px 0; } .rr-slider { position: relative; height: 26px; } .rr-track { position: absolute; top: 11px; left: 0; right: 0; height: 4px; background: var(--line); border-radius: 3px; } .rr-fill { position: absolute; top: 0; height: 100%; background: var(--accent); border-radius: 3px; } .rr-slider input[type=range] { position: absolute; top: 0; left: 0; width: 100%; height: 26px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; } .rr-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); box-shadow: var(--shadow); cursor: pointer; } .rr-slider input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); box-shadow: var(--shadow); cursor: pointer; } .rr-inputs { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .rr-affix { display: inline-flex; align-items: center; gap: 1px; flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: .82rem; color: var(--fg-muted); background: var(--bg); } .rr-affix:focus-within { border-color: var(--accent); } .rr-affix input { flex: 1; width: 100%; min-width: 0; border: none; background: none; font: inherit; color: var(--fg); padding: 0; } .rr-affix input:focus { outline: none; } .rr-dash { color: var(--fg-muted); } .facet-range select { flex: 1; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; } .inv-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; } .inv-count { color: var(--fg-muted); } .inv-count strong { color: var(--fg); } .inv-toolbar #f-sort { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--bg); } /* Filters toggle + drawer close live only on mobile */ .inv-filter-toggle, .inv-filter-close, .inv-filter-apply { display: none; } .inv-filter-toggle { align-items: center; gap: 7px; font: inherit; font-weight: 600; font-size: .9rem; color: var(--fg); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 16px; cursor: pointer; } .inv-filter-toggle svg { width: 17px; height: 17px; } .inv-filter-toggle:hover { border-color: var(--accent); } @media (max-width: 800px) { .inv-layout { grid-template-columns: 1fr; } .inv-filter-toggle { display: inline-flex; } /* Off-canvas drawer: the sidebar slides in from the left over a backdrop, so the car grid is what customers see first on a phone (team #1 ask). */ .inv-filters { position: fixed; top: 0; left: 0; z-index: 1200; width: min(88vw, 360px); height: 100%; margin: 0; border-radius: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-2); } .inv-filters.is-open { transform: translateX(0); } .inv-filter-backdrop { position: fixed; inset: 0; z-index: 1199; background: rgba(0, 0, 0, .5); } .inv-filter-close { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--fg-muted); font-size: 1.7rem; line-height: 1; cursor: pointer; margin-left: 6px; } .inv-filter-apply { display: block; width: 100%; margin-top: 16px; position: sticky; bottom: 0; } body.filters-open { overflow: hidden; } } .similar-cars { margin-top: 44px; } /* radius search list (homepage search band) */ .nearby select { padding: 10px 14px; border: 1px solid var(--ink-line); border-radius: 999px; background: var(--bg); color: var(--fg); font: inherit; } .nearby-loc { color: #fff; font-size: .98rem; margin-bottom: 8px; } .nearby-loc b { font-weight: 700; } .nearby-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .nearby-list > b { color: #fff; } .nearby-lot { color: var(--ink-fg); font-size: .95rem; } .nearby-lot a { color: #fff; font-weight: 600; text-decoration: underline; } /* ── "Search Near You" — ZIP + radius slider (Sergey reference) ───────── */ .search-near-wrap { padding-top: 0; margin-top: -28px; } .search-near { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px 28px; max-width: 720px; box-shadow: var(--shadow); } .search-near h2 { margin: 0 0 4px; } .search-near > p { color: var(--fg-muted); margin: 0 0 18px; } .sn-row { display: flex; gap: 12px; } .sn-row input { flex: 1; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; } .sn-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .sn-btn { background: var(--ink); color: #fff; border: none; border-radius: var(--radius-sm); padding: 0 28px; font-weight: 600; font-size: 1rem; cursor: pointer; white-space: nowrap; } .sn-btn:hover { background: #1a2435; } .sn-slider { margin-top: 22px; } .sn-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; } #radius-range { width: 100%; accent-color: var(--accent); height: 6px; } .sn-ticks { display: flex; justify-content: space-between; color: var(--fg-muted); font-size: .8rem; margin-top: 4px; } .sn-geo { background: none; border: none; color: var(--accent); font: inherit; cursor: pointer; margin-top: 16px; padding: 0; } .sn-geo:hover { text-decoration: underline; } .search-near .nearby-result { color: var(--fg); margin-top: 16px; } .search-near .nearby-list { display: flex; flex-direction: column; gap: 6px; } .search-near .nearby-list > b { color: var(--fg); } .search-near .nearby-lot { color: var(--fg); font-size: .95rem; } .search-near .nearby-lot a { color: var(--accent); font-weight: 600; } @media (max-width: 600px) { .sn-row { flex-direction: column; } .sn-btn { padding: 13px; } } /* ── Carfax page-1 preview (clickable → full PDF) ─────────────────────── */ .carfax-preview { display: block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 14px 0; box-shadow: var(--shadow); } .carfax-preview:hover { box-shadow: var(--shadow-2); text-decoration: none; } .carfax-preview img { width: 100%; display: block; border-bottom: 1px solid var(--line); } .carfax-preview-cta { display: block; padding: 11px 14px; font-weight: 600; color: var(--accent); text-align: center; background: var(--bg); } .sn-map { height: 320px; border-radius: var(--radius-sm); margin-top: 18px; border: 1px solid var(--line); z-index: 0; } .sn-map .leaflet-popup-content a { color: var(--accent); font-weight: 600; } /* slim "near you" link in the homepage search band */ .sb-near { margin: 16px 0 0; } .sb-near a { color: var(--ink-fg); text-decoration: none; font-size: .92rem; } .sb-near a:hover { color: var(--accent); } /* full-width Search Near You on the chooser page */ .search-near-lg { max-width: none; } .search-near-lg .sn-map { height: 420px; } /* About → Meet the team */ .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin: 14px 0 8px; } .team-card { display: flex; align-items: flex-start; gap: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); } .team-photo { flex: none; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; } .team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .team-monogram { width: 84px; height: 84px; border-radius: 50%; align-items: center; justify-content: center; display: flex; background: var(--ink); color: var(--ink-fg); font-weight: 700; font-size: 1.6rem; letter-spacing: .02em; } .team-name { font-weight: 700; font-size: 1.05rem; color: var(--fg); } .team-role { color: var(--fg-muted); font-size: .9rem; margin-bottom: 6px; } .team-bio { font-size: .88rem; color: var(--fg-muted); line-height: 1.5; margin: 0 0 8px; } .team-linkedin { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .85rem; color: #0a66c2; text-decoration: none; } .team-linkedin:hover { text-decoration: underline; } .team-linkedin svg { width: 16px; height: 16px; } /* Car detail — "where it's parked" map (fills space below the description) */ .car-map-sec { margin-top: 26px; } .car-map-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .car-map-head h2 { margin: 0; } .btn-sm { padding: 7px 14px; font-size: .85rem; } .car-map { height: 300px; margin: 12px 0 10px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; z-index: 0; } .car-map-dist { margin-top: 8px; font-size: .92rem; color: var(--fg); } .sn-geo { background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 500; cursor: pointer; } .sn-geo:hover { background: var(--bg-alt); }