/* ========================================================================== Xzone Auto — local prototype styles Plain CSS, no build step, easy to lift into a WordPress theme later. ========================================================================== */ :root { --color-primary: #F2650F; --color-primary-dark: #D4550F; --color-primary-tint: #FDE8DA; --color-midnight: #0A0E14; --color-asphalt: #171B24; --color-ink: #1F2430; --color-body: #5B6270; --color-bg: #FFFFFF; --color-bg-alt: #F6F5F1; --color-border: #E7E7EC; --font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --container-w-lg: 1320px; --radius-sm: 8px; --radius: 10px; --radius-lg: 16px; --shadow: 0 4px 16px rgba(31, 36, 48, 0.08); --shadow-hover: 0 12px 28px rgba(31, 36, 48, 0.14); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-family); font-size: 16px; line-height: 1.6; color: var(--color-body); background: var(--color-bg); } h1, h2, h3, h4 { color: var(--color-ink); line-height: 1.2; margin: 0 0 0.6em; } h1, h2 { text-transform: uppercase; letter-spacing: -0.01em; } h1 { font-size: clamp(30px, 3.4vw, 48px); font-weight: 800; } h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; } h3 { font-size: 19px; font-weight: 700; } p { margin: 0 0 1em; } a { color: var(--color-primary); text-decoration: none; } img { max-width: 100%; display: block; } ul { margin: 0; padding: 0; } .container { max-width: var(--container-w-lg); margin: 0 auto; padding: 0 24px; } @media (min-width: 1600px) { .container { max-width: 1420px; } } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .icon svg { width: 100%; height: 100%; display: block; } /* Scroll reveal — generic one-time entrance for any element carrying .reveal, driven by XZ.observeReveals() (js/main.js) via IntersectionObserver. Gated behind .js on (added by main.js as its first line) so the hidden starting state only ever exists once JS has actually run to make it visible again — with JS unavailable, .reveal elements are never touched and render normally. Placed early in the stylesheet (low specificity, first in source) so any component's own :hover/:active transform declared later naturally wins when both apply to the same element at once, instead of fighting over which rule wins. The .is-visible resting rule deliberately drops the .js prefix that the hidden-state rule above has: with it, ".js .reveal.is-visible" is one class more specific than a typical ":hover" rule (e.g. .car-card:hover) and would always win regardless of source order, permanently blocking the hover transform. Dropping it is safe — .is-visible is only ever added by the same script that adds .js, so .js is always already present — and it restores the equal-specificity/source-order behavior this section relies on. */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .5s ease-out, transform .5s ease-out; } .reveal.is-visible { opacity: 1; transform: none; } .js .reveal--stagger-1 { transition-delay: 0s; } .js .reveal--stagger-2 { transition-delay: .08s; } .js .reveal--stagger-3 { transition-delay: .16s; } .js .reveal--stagger-4 { transition-delay: .24s; } .js .reveal--stagger-5 { transition-delay: .32s; } .js .reveal--stagger-6 { transition-delay: .4s; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Prototype notice --------------------------------------------------- */ .proto-banner { background: var(--color-ink); color: #fff; font-size: 13px; text-align: center; padding: 8px 16px; } /* Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border: 2px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease; white-space: nowrap; } .btn .icon { width: 18px; height: 18px; transition: transform .15s ease; } @media (hover: hover) and (pointer: fine) { .btn:not(:disabled):hover { transform: translateY(-1px); } .btn:not(:disabled):hover .icon { transform: translateX(2px); } } .btn:not(:disabled):active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .btn:not(:disabled):hover, .btn:not(:disabled):active { transform: none; } .btn:not(:disabled):hover .icon { transform: none; } } .btn--primary { background: var(--color-primary); color: #fff; box-shadow: 0 2px 0 rgba(0,0,0,0.06); } .btn--primary:hover { background: var(--color-primary-dark); } .btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn--outline:hover { background: var(--color-primary); color: #fff; } .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .btn--ghost-light:hover { background: rgba(255,255,255,.14); border-color: #fff; } .btn--white { background: #fff; color: var(--color-primary); } .btn--white:hover { background: var(--color-ink); color: #fff; } .btn--small { padding: 9px 18px; font-size: 13.5px; } .btn--full { width: 100%; } .btn:disabled { background: var(--color-bg-alt); color: #A7ACB8; border-color: var(--color-border); cursor: not-allowed; } .btn--text { padding: 8px 4px; border: none; background: none; color: var(--color-ink); font-weight: 700; font-size: 14px; } .btn--text:hover { color: var(--color-primary); } .btn:focus-visible, .nav-link:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Header ----------------------------------------------------------------- */ .site-header { border-bottom: 1px solid var(--color-border); } .topbar { background: var(--color-ink); color: #cfd3dc; font-size: 13px; } .topbar__inner { display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 9px 24px; } .topbar__label { color: #8b93a3; margin-right: 6px; } .topbar a { color: #e9ebef; } .topbar a:hover { color: var(--color-primary); } .navbar { background: #fff; } .navbar__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; } .logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .logo__mark { display: block; width: auto; } .navbar .logo__mark { height: 40px; } .footer__brand .logo__mark { height: 34px; } .navbar__right { display: flex; align-items: center; gap: 18px; margin-left: auto; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; flex-shrink: 0; } .nav-toggle span { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--color-ink); transition: transform .2s ease, opacity .2s ease; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-menu { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; } .nav-link { position: relative; display: inline-block; color: var(--color-ink); font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 0; transition: color .15s ease; } .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } .nav-link:hover, .nav-link.is-active { color: var(--color-primary); } .nav-link:not(.nav-link--disabled):hover::after, .nav-link.is-active::after { transform: scaleX(1); } .nav-link--disabled { color: #B4B9C4; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .nav-link::after { transition: none; } } .nav-cta { flex-shrink: 0; } .nav-cta .icon { width: 16px; height: 16px; } /* Sections / headings ------------------------------------------------ */ .section { padding: clamp(48px, 6vw, 88px) 0; } .section--alt { background: var(--color-bg-alt); } .section__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 700; color: var(--color-primary); margin-bottom: 8px; } .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; } .section__head-text { max-width: 620px; } .section__head h2 { margin-bottom: 6px; } .section__foot { display: flex; justify-content: center; margin-top: 36px; } /* Hero (dark — scoped entirely to .hero, does not affect other sections) --- */ .hero { background: var(--color-midnight); padding: clamp(56px, 8vw, 108px) 0; overflow: hidden; position: relative; } .hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(115deg, transparent 46%, rgba(242, 101, 15, 0.05) 47%, rgba(242, 101, 15, 0.05) 48%, transparent 49%); pointer-events: none; } .hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); align-items: center; gap: 28px; } .hero__eyebrow { position: relative; display: inline-block; color: var(--color-primary); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; margin-bottom: 18px; padding-bottom: 10px; } .hero__eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--color-primary); } .hero__title { color: #fff; text-transform: uppercase; font-weight: 800; font-size: clamp(30px, 4vw, 60px); line-height: 1.03; letter-spacing: -0.02em; margin-bottom: 20px; } .hero__text { color: #A6ACB8; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; margin-bottom: 32px; max-width: 44ch; } .hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; } .hero__actions .btn { border-radius: 11px; } .hero__actions .btn--outline { background: transparent; color: #fff; border-color: var(--color-primary); } .hero__actions .btn--outline:hover { background: var(--color-primary); color: #fff; } .hero__trust { display: flex; flex-wrap: wrap; gap: 20px 28px; list-style: none; padding: 0; margin: 0; } .hero__trust li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #A6ACB8; } .hero__trust .icon { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; } .hero__art { position: relative; width: 100%; } /* Hero copy entrance — mirrors the Deal Card's own choreography so the two halves of the hero feel like one designed moment, not two unrelated builds. */ @keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .hero__eyebrow { animation: heroRise .5s ease-out both; } .hero__title { animation: heroRise .55s ease-out .1s both; } .hero__text { animation: heroRise .5s ease-out .2s both; } .hero__actions { animation: heroRise .5s ease-out .3s both; } .hero__trust { animation: heroRise .5s ease-out .4s both; } @media (prefers-reduced-motion: reduce) { .hero__eyebrow, .hero__title, .hero__text, .hero__actions, .hero__trust { animation: none !important; opacity: 1 !important; transform: none !important; } } /* Deal Card — data-driven, rendered by js/deal-card.js from js/deal-data.js -------- Uses the exact references/Frame.png asset (copied verbatim to images/site/deal-frame.png) as a real layered PNG overlay — not a CSS recreation. The PNG already carries real alpha transparency in both its central photo opening and its outer background (verified by pixel sampling), so it drops straight on top of the vehicle photo with no derivative needed. Layer 1 (.deal-card__img) — dynamic vehicle photo, sits in the opening Layer 2 (.deal-card__frame) — the exact Frame.png, unaltered, on top Layer 3 (text/badge/CTA) — live HTML positioned over the PNG's own black label plates The wrapper's aspect-ratio is set to the PNG's exact pixel ratio (1698:937) so object-fit:contain on the frame image always renders it at 1:1 scale with the container — which is what lets every text layer below be positioned in plain percentages measured directly off the source PNG's pixel coordinates and still land in the right spot at any card size. */ .deal-card { position: relative; display: block; width: 100%; max-width: 760px; aspect-ratio: 1698 / 937; margin: 0 auto; border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); transition: transform .22s ease, box-shadow .22s ease, filter .18s ease; } a.deal-card { cursor: pointer; } a.deal-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; } .deal-card--disabled { cursor: default; } .deal-card__img { position: absolute; z-index: 1; left: 16.2%; top: 17.6%; width: 71.7%; height: 63.1%; object-fit: cover; object-position: 50% 42%; display: block; transition: transform .3s ease; } /* Hover/focus: lift the whole card, deepen its shadow and slightly zoom the photo — restrained to a tactile hint of interactivity, not a showpiece. Desktop-only (mice/trackpads) so touch devices don't get a "stuck" hover state after a tap; touch gets the :active press feedback instead. */ @media (hover: hover) and (pointer: fine) { a.deal-card:hover, a.deal-card:focus-visible { transform: translateY(-4px); box-shadow: 0 20px 36px rgba(0, 0, 0, 0.32); filter: brightness(1.03); } a.deal-card:hover .deal-card__img, a.deal-card:focus-visible .deal-card__img { transform: scale(1.02); } } a.deal-card:active { transform: translateY(-1px) scale(0.985); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24); } @media (prefers-reduced-motion: reduce) { a.deal-card:hover, a.deal-card:focus-visible, a.deal-card:active { transform: none; filter: none; } a.deal-card:hover .deal-card__img, a.deal-card:focus-visible .deal-card__img { transform: none; } .deal-card, .deal-card__img { transition: box-shadow .18s ease; } } .deal-card__frame { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block; } /* Vehicle name — lands on the PNG's top-right black plate (measured at x 61.96–89.52%, y 5.12–17.93% of the source image). Padding keeps the text off the plate's own edges instead of sitting flush against them. */ .deal-card__vehicle { position: absolute; z-index: 3; left: 62.5%; top: 5.6%; width: 26.4%; height: 11.8%; box-sizing: border-box; padding: 1px 5px; overflow: hidden; display: flex; align-items: center; justify-content: center; container-type: inline-size; container-name: dealname; } .deal-card__vehicle-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: center; color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.2; font-size: clamp(7.5px, 1vw, 12.5px); } @container dealname (max-width: 150px) { .deal-card__vehicle-text { font-size: 8.5px; } } @container dealname (max-width: 110px) { .deal-card__vehicle-text { font-size: 7px; } } /* Prices — land on the PNG's bottom-left black plate (measured at x 10.6–30.6%, y 73.85–87.09%). With no CTA competing for room inside this zone anymore, the two price lines get real padding and a clear step in size between "was" and "now" instead of being crammed flush against each other and the plate's edges. */ .deal-card__price-plate { position: absolute; z-index: 3; left: 11.5%; top: 74.6%; width: 18%; height: 11.6%; box-sizing: border-box; padding: 0 6px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; overflow: hidden; container-type: inline-size; container-name: dealprice; } .deal-card__old-price { display: flex; align-items: baseline; gap: 4px; color: rgba(255, 255, 255, 0.7); font-size: 9px; line-height: 1.1; margin: 0; white-space: nowrap; } .deal-card__old-price-label { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } .deal-card__old-price-amount { font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, 0.45); } .deal-card__price-current { color: var(--color-primary); font-weight: 900; font-size: 17px; line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; min-width: max-content; max-width: 100%; overflow: hidden; text-overflow: clip; } @container dealprice (max-width: 105px) { .deal-card__price-current { font-size: 14px; } .deal-card__old-price { font-size: 7.5px; } } @container dealprice (max-width: 75px) { .deal-card__price-current { font-size: 11px; } .deal-card__old-price { font-size: 6.5px; } } /* Entrance animation — one-time, respects prefers-reduced-motion below */ @keyframes dealFadeInScale { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } } @keyframes dealSlideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes dealSlideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes dealFadeIn { from { opacity: 0; } to { opacity: 1; } } /* No "both"/forwards fill here (unlike the other entrance animations below): a CSS animation's fill-forwards value takes precedence over the normal cascade for as long as it's in effect, which would otherwise permanently lock this element's transform to the keyframe's end value (scale(1)) and silently block the later :hover/:focus-visible scale(1.02) rule. Safe to drop here specifically because the keyframe's end state (opacity:1, transform:none) already matches the element's normal at-rest cascade, so there's no visual snap when the animation's influence ends. */ .deal-card__img { animation: dealFadeInScale .6s ease-out; } .deal-card__frame { animation: dealFadeIn .5s ease-out both; } .deal-card__vehicle { animation: dealSlideInRight .5s ease-out .25s both; } .deal-card__price-plate { animation: dealSlideInLeft .5s ease-out .35s both; } @media (prefers-reduced-motion: reduce) { .deal-card__img, .deal-card__frame, .deal-card__vehicle, .deal-card__price-plate { animation: none !important; opacity: 1 !important; transform: none !important; } a.deal-card:active { transform: none !important; } } /* Icon circle (trust / action cards) -------------------------------------- */ .icon-circle { width: 46px; height: 46px; border-radius: 50%; background: var(--color-primary-tint); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 16px; } .icon-circle .icon { width: 22px; height: 22px; } /* Carousel (featured vehicles) ---------------------------------------- */ .carousel-controls { display: flex; gap: 8px; flex-shrink: 0; } .carousel-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-border); background: #fff; cursor: pointer; color: var(--color-ink); display: flex; align-items: center; justify-content: center; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; } .carousel-btn .icon { width: 18px; height: 18px; } .carousel-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .carousel-btn:active { transform: scale(0.92); } @media (prefers-reduced-motion: reduce) { .carousel-btn:active { transform: none; } } .carousel { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 4px 4px; margin: -4px -4px 0; scrollbar-width: none; -ms-overflow-style: none; } .carousel::-webkit-scrollbar { display: none; } .carousel .car-card { min-width: 300px; max-width: 300px; scroll-snap-align: start; } /* Car card component (shared: homepage + inventory) -------------------- */ .car-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; display: flex; flex-direction: column; } .car-card__media { position: relative; background: var(--color-bg-alt); overflow: hidden; } .car-card__media-link { display: block; } .car-card__media img { width: 100%; aspect-ratio: 400 / 260; object-fit: cover; display: block; transition: transform .35s ease; } /* Full lift + photo zoom only where a real hover exists (mouse/trackpad) — on touch, a tap gets the lighter :active shadow/border cue instead, so nothing ever gets "stuck" hovering after a tap. */ @media (hover: hover) and (pointer: fine) { .car-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-5px); border-color: var(--color-primary); } .car-card:hover .car-card__media img { transform: scale(1.03); } } .car-card:active { box-shadow: var(--shadow-hover); border-color: var(--color-primary); } @media (prefers-reduced-motion: reduce) { .car-card:hover, .car-card:active { transform: none; } .car-card:hover .car-card__media img { transform: none; } } /* Price tag — the site's signature shape: a die-cut notch on the left edge plus a small grommet dot, echoing the paper price stickers on a dealer lot's windshields. Reused everywhere a vehicle price appears. */ .car-card__price { position: absolute; bottom: 12px; left: 12px; display: flex; align-items: center; background: var(--color-primary); color: #fff; font-weight: 800; font-size: 17px; padding: 8px 16px 8px 22px; clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%); box-shadow: 0 4px 12px rgba(242, 101, 15, 0.35); } .car-card__price::before { content: ''; position: absolute; left: 7px; top: 50%; width: 3.5px; height: 3.5px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); transform: translateY(-50%); } /* Status badge — only ever rendered for a non-"available" vehicle (see js/cards.js), so it never appears for any vehicle in the current mock data set and changes nothing about today's rendered result. */ .car-card__status { position: absolute; top: 12px; right: 12px; background: var(--color-midnight); color: #fff; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 10px; border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(10, 14, 20, 0.35); } .car-card__status--sold { background: var(--color-ink); } .car-card__status--pending { background: var(--color-primary-dark); } .car-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .car-card__title { font-size: 18px; margin: 0; } .car-card__title a { color: inherit; font: inherit; text-decoration: none; } .car-card__title a:hover, .car-card__title a:focus-visible { color: var(--color-primary); } .car-card__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; list-style: none; margin: 0; padding: 12px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); font-size: 13.5px; color: var(--color-body); font-weight: 600; } .car-card__specs li { display: flex; align-items: center; gap: 7px; } .spec-icon { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; } .car-card__body .btn { margin-top: auto; } /* Grids (auto-fit so they naturally fill wide desktop screens) --------- */ .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; } .grid-auto--cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } /* About ------------------------------------------------------------------ */ .about__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: start; } .about__content { max-width: 560px; } /* CTA banner -------------------------------------------------------------- */ .cta-banner { background: var(--color-primary); color: #fff; padding: clamp(40px, 5vw, 56px) 0; } .cta-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .cta-banner h2 { color: #fff; margin: 0 0 6px; } .cta-banner p { color: rgba(255,255,255,.9); margin: 0; } .cta-banner__phones { display: flex; gap: 14px; flex-wrap: wrap; } /* Footer -------------------------------------------------------------------- */ .site-footer { background: var(--color-midnight); color: #B9BEC9; border-top: 3px solid var(--color-primary); } .footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding: 56px 0 40px; } .footer__brand p { margin-top: 12px; font-size: 14px; } .footer__col h4 { color: #fff; font-size: 15px; margin-bottom: 14px; } .footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .footer__col a { color: #B9BEC9; } .footer__col a:hover { color: var(--color-primary); } .footer__disabled { color: #6B7280; cursor: not-allowed; } .footer__bottom { border-top: 1px solid #333A4A; padding: 18px 0; font-size: 13px; } .footer__note { color: #6B7280; } /* Page header / breadcrumb (inventory page) --------------------------------- */ .page-header { background: var(--color-midnight); border-bottom: 3px solid var(--color-primary); padding: 26px 0; position: relative; overflow: hidden; } .page-header::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, transparent 0 42px, rgba(242, 101, 15, .07) 42px 44px, transparent 44px 84px), linear-gradient(115deg, transparent 46%, rgba(242, 101, 15, .05) 47%, rgba(242, 101, 15, .05) 48%, transparent 49%); pointer-events: none; } .page-header__row { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .page-header h1 { color: #fff; margin: 0; font-size: clamp(22px, 3vw, 28px); } .breadcrumb { font-size: 14px; display: flex; gap: 8px; color: #9AA0AD; } .breadcrumb a { color: #C7CBD6; font-weight: 600; } .breadcrumb a:hover { color: var(--color-primary); } .breadcrumb [aria-current="page"] { color: var(--color-primary); font-weight: 600; } /* Filter bar ------------------------------------------------------------------ */ .filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 28px; } .filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 160px; flex: 1 1 160px; } .filter-field label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-ink); } .filter-field select { appearance: none; -webkit-appearance: none; padding: 10px 36px 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 14px; color: var(--color-ink); background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; font-family: inherit; transition: border-color .15s ease; } .filter-field select:hover { border-color: #C7CBD4; } .filter-field select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } @media (min-width: 768px) { .filter-bar-sticky { position: sticky; top: 0; z-index: 15; } } .results-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .results-count { font-size: 14px; color: var(--color-body); margin: 0; } /* Empty state -------------------------------------------------------------- */ .empty-state { text-align: center; padding: 64px 20px; background: var(--color-bg-alt); border: 1px dashed var(--color-border); border-radius: var(--radius); color: var(--color-body); } /* Pagination ------------------------------------------------------------------- */ .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; } .pagination__btn { min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--color-border); background: #fff; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; cursor: pointer; color: var(--color-ink); transition: border-color .15s ease, color .15s ease, background-color .15s ease, transform .12s ease; } .pagination__btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); } .pagination__btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .pagination__btn:disabled { color: #C3C7D1; cursor: not-allowed; } .pagination__btn:active:not(:disabled) { transform: scale(0.94); } @media (prefers-reduced-motion: reduce) { .pagination__btn:active:not(:disabled) { transform: none; } } /* Benefits — compact horizontal strip (Inspected & Reliable / Fair & Transparent / Financing / Repair) */ .benefits { background: var(--color-bg-alt); padding: 40px 0; } .benefits-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .benefits-strip__item { display: flex; align-items: center; gap: 14px; padding: 22px 20px; } .benefits-strip__item:not(:first-child) { border-left: 1px solid var(--color-border); } .benefits-strip__icon { width: 56px; height: 56px; border-radius: 14px; background: var(--color-primary-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .benefits-strip__icon .icon { width: 32px; height: 32px; color: var(--color-primary); } .benefits-strip__item h3 { color: var(--color-ink); font-size: 15px; margin: 0 0 4px; } .benefits-strip__item p { color: var(--color-body); font-size: 13px; margin: 0; line-height: 1.45; } /* Services page — photo tiles for the repair grid (image-first, minimal text, per request) ------------------------------------------------------ */ .service-photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; } .service-tile { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow); transition: box-shadow .2s ease, transform .2s ease; } .service-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .service-tile__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 14, 20, .85) 0%, rgba(10, 14, 20, .18) 55%, transparent 78%); } .service-tile h3 { position: absolute; left: 14px; right: 14px; bottom: 12px; color: #fff; font-size: 15px; margin: 0; text-transform: uppercase; letter-spacing: .01em; } @media (hover: hover) and (pointer: fine) { .service-tile:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } .service-tile:hover img { transform: scale(1.05); } } @media (prefers-reduced-motion: reduce) { .service-tile:hover, .service-tile:hover img { transform: none; } } /* Services page — repair services grid + dealership services row ------------- */ .service-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .service-section-head .btn .icon { width: 18px; height: 18px; } .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .service-card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } @media (hover: hover) and (pointer: fine) { .service-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: var(--color-primary); } } @media (prefers-reduced-motion: reduce) { .service-card:hover { transform: none; } } .service-card__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--color-primary-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .service-card__icon .icon { width: 26px; height: 26px; color: var(--color-primary); } .service-card h3 { font-size: 15px; margin: 0; color: var(--color-ink); } .service-card--link { text-decoration: none; cursor: pointer; } .service-card--disabled { cursor: not-allowed; opacity: .75; } /* .icon svg scales to 100% of its .icon span, but width/height only ever apply to that span if it's block-level — flex/grid children get "blockified" automatically, plain inline children don't. .service-card is the flex container, so .service-card__arrow itself sizes correctly via flex-shrink, but its own child (.icon) needs this wrapper to be a flex container too, or the icon stays inline and the svg's 100%/100% falls back to a large intrinsic default instead of 18px. */ .service-card__arrow { display: flex; margin-left: auto; color: var(--color-body); flex-shrink: 0; } .service-card__arrow .icon { width: 18px; height: 18px; } /* Photo action cards (Book Appointment / Visit / Contact) --------------------------- */ .icon-circle--outline { width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.22); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 16px; } .icon-circle--outline .icon { width: 22px; height: 22px; } .action-grid-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .photo-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 26px; border: 1px solid var(--color-border); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; } @media (hover: hover) { .photo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } } .photo-card:active { box-shadow: var(--shadow-hover); } @media (prefers-reduced-motion: reduce) { .photo-card:hover, .photo-card:active { transform: none; } } .photo-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; } .photo-card__scrim { position: absolute; inset: 0; /* Vertical (not horizontal) because this card's text sits at the bottom edge, not along one side — darkest behind the text, fading out toward the photo's top. */ background: linear-gradient(180deg, rgba(8, 13, 19, 0.12) 0%, rgba(8, 13, 19, 0.50) 55%, rgba(8, 13, 19, 0.82) 100%); z-index: 1; } .photo-card__content { position: relative; z-index: 2; } .photo-card h3 { color: #fff; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 8px; } .photo-card p, .photo-card__address { color: #EDEFF3; font-size: 14.5px; margin: 0 0 18px; line-height: 1.5; } .photo-card .btn { border-radius: 11px; } .photo-card .btn--primary, .photo-card .btn--primary:disabled, .photo-card .btn--primary[disabled] { background: var(--color-primary); color: #fff; border-color: transparent; } .photo-card .btn--primary:hover:not(:disabled) { background: var(--color-primary-dark); } .photo-card .btn--primary:disabled, .photo-card .btn--primary[disabled] { opacity: 0.55; cursor: not-allowed; } /* About Us media (dealership photo) -------------------------------------------------- */ .about__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow); display: block; } /* Footer location map --------------------------------------------------------- */ .footer-map { margin-top: 14px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid #333A4A; } .footer-map iframe { display: block; width: 100%; height: 140px; border: 0; } /* Contact page ------------------------------------------------------------------ */ .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .contact-info-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; } .contact-info-item { display: flex; align-items: flex-start; gap: 16px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow); } .contact-info-item__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--color-primary-tint); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-info-item__icon .icon { width: 22px; height: 22px; } .contact-form .btn .icon { width: 18px; height: 18px; } .contact-info-item h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-body); margin: 0 0 4px; } .contact-info-item p, .contact-info-item a { font-size: 15.5px; font-weight: 600; color: var(--color-ink); margin: 0; } .contact-info-item a:hover { color: var(--color-primary); } .location-map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow); } .location-map iframe { display: block; width: 100%; height: 320px; border: 0; } .contact-form { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); } .contact-form h2 { margin: 0 0 6px; } .contact-form > p { color: var(--color-body); margin: 0 0 22px; } .form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } .form-field label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-ink); } .form-field input, .form-field textarea { padding: 11px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 14.5px; font-family: inherit; color: var(--color-ink); transition: border-color .15s ease; } .form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--color-primary); } .form-field textarea { resize: vertical; min-height: 120px; } .form-note { font-size: 13px; color: var(--color-body); margin-top: 14px; } .form-note--error { color: #C43D3D; } /* Modal (appointment request) ------------------------------------------------ */ .modal-overlay { position: fixed; inset: 0; background: rgba(10, 14, 20, .6); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; } .modal-overlay[hidden] { display: none; } .modal { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); padding: 28px; max-width: 440px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; } .modal h2 { margin: 0 0 6px; font-size: 20px; } .modal > p { color: var(--color-body); margin: 0 0 20px; font-size: 14px; } .modal__close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: none; background: var(--color-bg-alt); border-radius: 50%; font-size: 18px; line-height: 1; color: var(--color-body); cursor: pointer; } .modal__close:hover { background: var(--color-border); color: var(--color-ink); } .modal .form-field { margin-bottom: 14px; } /* Responsive ----------------------------------------------------------------------- */ @media (max-width: 991px) { .hero__inner { grid-template-columns: 1fr; text-align: left; } .hero__art { order: -1; max-width: 420px; margin: 0 auto 8px; } .about__inner { grid-template-columns: 1fr; gap: 32px; } .about__content { max-width: none; } .benefits-strip { grid-template-columns: 1fr 1fr; } .benefits-strip__item:nth-child(2n+1) { border-left: none; } .benefits-strip__item:nth-child(n+3) { border-top: 1px solid var(--color-border); } .action-grid-v2 { grid-template-columns: 1fr; } .contact-layout { grid-template-columns: 1fr; } } @media (max-width: 767px) { .topbar { display: none; } .navbar__right { gap: 10px; } .nav-toggle { display: flex; } .nav-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: flex-start; gap: 4px; background: #fff; border-bottom: 1px solid var(--color-border); padding: 12px 24px 20px; box-shadow: var(--shadow); z-index: 20; } .nav-menu.is-open { display: flex; } .nav-link { width: 100%; padding: 10px 0; } .nav-cta { padding: 10px 14px; font-size: 13.5px; } .hero__actions { flex-direction: column; align-items: stretch; } .hero__text { max-width: none; } .benefits-strip { grid-template-columns: 1fr; } .benefits-strip__item { border-left: none !important; } .benefits-strip__item:not(:first-child) { border-top: 1px solid var(--color-border); } .section__head { flex-direction: column; align-items: flex-start; gap: 16px; } .cta-banner__inner { flex-direction: column; align-items: flex-start; } .cta-banner__phones { width: 100%; } .cta-banner__phones .btn { flex: 1 1 auto; } .footer__inner { grid-template-columns: 1fr; padding: 40px 0 28px; } .filter-bar { flex-direction: column; align-items: stretch; } .filter-field { min-width: 0; flex: 1 1 auto; } } @media (min-width: 768px) and (max-width: 991px) { .footer__inner { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }