:root {
--color-bg: #07090d;
--color-bg-soft: #0e141c;
--color-surface: #ffffff;
--color-surface-2: #f4f6f9;
--color-text: #111827;
--color-muted: #647082;
--color-muted-dark: #b7c0cf;
--color-border: #e6e9ef;
--color-primary: #ff1038;
--color-primary-dark: #c70828;
--color-accent: #1d4ed8;
--color-success: #16a34a;
--shadow-card: 0 18px 50px rgba(15, 23, 42, 0.10);
--shadow-soft: 0 12px 35px rgba(0, 0, 0, 0.18);
--radius-lg: 26px;
--radius-md: 18px;
--radius-sm: 12px;
--container: 1180px;
--header-height: 82px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
color: var(--color-text);
background: var(--color-surface);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
text-rendering: optimizeLegibility;
}
body.no-scroll {
overflow: hidden;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
button,
input,
textarea,
select {
font: inherit;
}
.skip-link {
position: absolute;
left: 1rem;
top: -5rem;
z-index: 9999;
padding: .75rem 1rem;
background: #fff;
color: #000;
border-radius: 10px;
transition: top .2s ease;
}
.skip-link:focus {
top: 1rem;
}
.container {
width: min(calc(100% - 2rem), var(--container));
margin-inline: auto;
}
.section {
padding: clamp(4rem, 8vw, 7rem) 0;
}
.section--soft {
background: var(--color-surface-2);
}
.section--dark {
color: #fff;
background:
radial-gradient(circle at 15% 15%, rgba(255, 16, 56, .20), transparent 32rem),
linear-gradient(135deg, #07090d 0%, #101722 100%);
}
.section__header {
display: grid;
gap: .75rem;
max-width: 780px;
margin-bottom: 2rem;
}
.eyebrow {
display: inline-flex;
width: fit-content;
align-items: center;
gap: .5rem;
color: var(--color-primary);
font-size: .82rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
display: inline-block;
width: 2.25rem;
height: 2px;
background: currentColor;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1,
h2,
h3 {
line-height: 1.08;
letter-spacing: -.04em;
}
h1 {
margin-bottom: 1rem;
font-size: clamp(2.7rem, 6.4vw, 5.8rem);
}
h2 {
margin-bottom: .75rem;
font-size: clamp(2rem, 4vw, 3.25rem);
}
h3 {
margin-bottom: .65rem;
font-size: 1.25rem;
}
p {
color: var(--color-muted);
}
.section--dark p,
.hero p,
.site-footer p {
color: var(--color-muted-dark);
}
.lead {
max-width: 760px;
font-size: clamp(1.06rem, 2vw, 1.25rem);
}
.kicker-row {
display: flex;
flex-wrap: wrap;
gap: .7rem;
margin: 1.4rem 0 0;
}
.badge {
display: inline-flex;
align-items: center;
gap: .4rem;
min-height: 34px;
padding: .42rem .75rem;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
color: #fff;
background: rgba(255, 255, 255, .08);
font-size: .88rem;
font-weight: 700;
backdrop-filter: blur(10px);
}
.badge--light {
color: var(--color-text);
border-color: var(--color-border);
background: #fff;
}
.badge--green {
color: #06722d;
background: #eaf9ef;
border-color: #b8efcb;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
min-height: 48px;
padding: .82rem 1.08rem;
border: 1px solid transparent;
border-radius: 999px;
cursor: pointer;
font-weight: 850;
letter-spacing: -.01em;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover {
transform: translateY(-2px);
}
.btn:focus-visible,
.nav__link:focus-visible,
.vehicle-card__media:focus-visible,
.mobile-menu-button:focus-visible {
outline: 3px solid rgba(255, 16, 56, .35);
outline-offset: 3px;
}
.btn--primary {
color: #fff;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
box-shadow: 0 12px 25px rgba(255, 16, 56, .28);
}
.btn--primary:hover {
box-shadow: 0 18px 36px rgba(255, 16, 56, .34);
}
.btn--secondary {
color: #fff;
border-color: rgba(255, 255, 255, .16);
background: rgba(255, 255, 255, .08);
}
.btn--secondary:hover {
border-color: rgba(255, 255, 255, .28);
background: rgba(255, 255, 255, .14);
}
.btn--dark {
color: #fff;
background: #0b0f14;
}
.btn--ghost {
color: var(--color-text);
border-color: var(--color-border);
background: #fff;
}
.btn--whatsapp {
color: #fff;
background: linear-gradient(135deg, #16a34a, #087a34);
box-shadow: 0 12px 24px rgba(22, 163, 74, .22);
}
.btn--wide {
width: 100%;
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: .8rem;
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(7, 9, 13, .84);
border-bottom: 1px solid rgba(255, 255, 255, .08);
backdrop-filter: blur(18px);
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--header-height);
gap: 1.2rem;
}
.brand {
display: inline-flex;
align-items: center;
min-width: 160px;
}
.brand__logo {
width: min(245px, 52vw);
height: auto;
}
.nav {
display: flex;
align-items: center;
gap: .25rem;
}
.nav__link {
color: rgba(255, 255, 255, .84);
padding: .7rem .82rem;
border-radius: 999px;
font-size: .94rem;
font-weight: 750;
transition: color .18s ease, background .18s ease;
}
.nav__link:hover,
.nav__link[aria-current="page"] {
color: #fff;
background: rgba(255, 255, 255, .09);
}
.nav-actions {
display: flex;
align-items: center;
gap: .6rem;
}
.mobile-menu-button {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 999px;
color: #fff;
background: rgba(255, 255, 255, .08);
cursor: pointer;
}
.mobile-menu-button span,
.mobile-menu-button span::before,
.mobile-menu-button span::after {
display: block;
width: 20px;
height: 2px;
background: currentColor;
border-radius: 999px;
transition: transform .2s ease, opacity .2s ease;
}
.mobile-menu-button span::before,
.mobile-menu-button span::after {
content: "";
position: relative;
}
.mobile-menu-button span::before {
top: -6px;
}
.mobile-menu-button span::after {
top: 4px;
}
.mobile-menu-button.is-open span {
transform: rotate(45deg);
}
.mobile-menu-button.is-open span::before {
opacity: 0;
}
.mobile-menu-button.is-open span::after {
top: -2px;
transform: rotate(-90deg);
}
.hero {
position: relative;
isolation: isolate;
min-height: calc(100svh - var(--header-height));
display: grid;
align-items: center;
overflow: hidden;
color: #fff;
background:
linear-gradient(90deg, rgba(7, 9, 13, .95) 0%, rgba(7, 9, 13, .86) 45%, rgba(7, 9, 13, .56) 100%),
radial-gradient(circle at 80% 26%, rgba(255, 16, 56, .36), transparent 28rem),
linear-gradient(135deg, #07090d 0%, #111927 100%);
}
.hero::before {
content: "";
position: absolute;
inset: auto -12% 8% auto;
z-index: -1;
width: min(72rem, 95vw);
height: min(27rem, 55vw);
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, .10);
transform: rotate(-8deg);
}
.hero::after {
content: "";
position: absolute;
left: -12vw;
top: 18%;
z-index: -1;
width: 62vw;
height: 9px;
background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
transform: rotate(-11deg);
opacity: .75;
}
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(300px, .72fr);
align-items: center;
gap: clamp(2rem, 6vw, 5rem);
padding: clamp(3.4rem, 7vw, 6.4rem) 0;
}
.hero__content {
max-width: 840px;
}
.hero__logo {
width: min(460px, 80vw);
margin-bottom: 1.6rem;
}
.hero__card {
position: relative;
padding: 1.25rem;
border: 1px solid rgba(255, 255, 255, .10);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .07);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(18px);
}
.hero__card img {
width: 100%;
border-radius: 20px;
aspect-ratio: 4 / 3;
object-fit: cover;
background: #0f172a;
}
.hero__card-info {
display: grid;
gap: .6rem;
margin-top: 1rem;
}
.hero__card-info p {
margin-bottom: 0;
}
.price {
color: var(--color-primary);
font-size: clamp(1.7rem, 4vw, 2.4rem);
font-weight: 950;
line-height: 1;
letter-spacing: -.04em;
}
.price--dark {
color: var(--color-text);
}
.stat-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .8rem;
margin-top: 2rem;
}
.stat-strip__item {
padding: .9rem;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 18px;
background: rgba(255, 255, 255, .06);
}
.stat-strip__value {
display: block;
color: #fff;
font-size: 1.18rem;
font-weight: 950;
}
.stat-strip__label {
color: var(--color-muted-dark);
font-size: .84rem;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.2rem;
}
.card {
padding: clamp(1.2rem, 3vw, 1.6rem);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}
.card--dark {
border-color: rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .07);
}
.card p:last-child {
margin-bottom: 0;
}
.icon {
display: inline-grid;
width: 42px;
height: 42px;
place-items: center;
margin-bottom: 1rem;
border-radius: 14px;
color: #fff;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
box-shadow: 0 12px 24px rgba(255, 16, 56, .24);
}
.vehicle-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.2rem;
}
.vehicle-card {
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--shadow-card);
}
.vehicle-card__media {
position: relative;
display: block;
overflow: hidden;
background: #0f172a;
}
.vehicle-card__media img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform .35s ease;
}
.vehicle-card:hover .vehicle-card__media img {
transform: scale(1.04);
}
.vehicle-card__tag {
position: absolute;
left: 1rem;
top: 1rem;
display: inline-flex;
padding: .38rem .65rem;
border-radius: 999px;
color: #fff;
background: rgba(255, 16, 56, .92);
font-size: .82rem;
font-weight: 850;
backdrop-filter: blur(10px);
}
.vehicle-card__body {
padding: 1.2rem;
}
.vehicle-card__title {
margin: 0 0 .75rem;
font-size: 1.22rem;
}
.vehicle-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .6rem;
margin: 1rem 0;
}
.vehicle-meta__item {
display: grid;
gap: .1rem;
padding: .72rem;
border-radius: 14px;
background: var(--color-surface-2);
}
.vehicle-meta__label {
color: var(--color-muted);
font-size: .78rem;
font-weight: 700;
}
.vehicle-meta__value {
color: var(--color-text);
font-weight: 900;
}
.vehicle-card__actions {
display: grid;
grid-template-columns: 1fr;
gap: .65rem;
}
.stock-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
}
.search-box {
display: flex;
align-items: center;
gap: .6rem;
min-width: min(430px, 100%);
padding: .72rem .9rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: #fff;
}
.search-box input {
width: 100%;
border: 0;
outline: 0;
color: var(--color-text);
}
.filter-chips {
display: flex;
flex-wrap: wrap;
gap: .55rem;
}
.chip {
border: 1px solid var(--color-border);
border-radius: 999px;
padding: .55rem .8rem;
color: var(--color-muted);
background: #fff;
cursor: pointer;
font-weight: 800;
}
.chip.is-active {
color: #fff;
border-color: var(--color-primary);
background: var(--color-primary);
}
.page-hero {
color: #fff;
padding: clamp(3rem, 7vw, 6rem) 0;
background:
radial-gradient(circle at 86% 24%, rgba(255, 16, 56, .30), transparent 28rem),
linear-gradient(135deg, #07090d, #111827);
}
.breadcrumbs {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 1rem;
color: var(--color-muted-dark);
font-size: .9rem;
font-weight: 700;
}
.breadcrumbs a:hover {
color: #fff;
}
.detail-layout {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, .55fr);
gap: 1.5rem;
align-items: start;
}
.gallery {
display: grid;
gap: .8rem;
}
.gallery__main {
overflow: hidden;
border-radius: var(--radius-lg);
background: #0f172a;
box-shadow: var(--shadow-card);
}
.gallery__main img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.gallery__thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .8rem;
}
.gallery__thumb {
padding: 0;
border: 2px solid transparent;
border-radius: 16px;
overflow: hidden;
cursor: pointer;
background: #fff;
}
.gallery__thumb.is-active {
border-color: var(--color-primary);
}
.gallery__thumb img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.detail-panel {
position: sticky;
top: calc(var(--header-height) + 1rem);
padding: 1.25rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--shadow-card);
}
.detail-panel__title {
margin-bottom: 1rem;
font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.detail-panel .price {
margin-bottom: 1rem;
}
.feature-list,
.check-list {
display: grid;
gap: .7rem;
padding: 0;
margin: 1rem 0 0;
list-style: none;
}
.feature-list li,
.check-list li {
position: relative;
padding-left: 1.8rem;
}
.feature-list li::before,
.check-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--color-success);
font-weight: 950;
}
.info-band {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: .8rem;
margin: 1.2rem 0;
}
.info-band__item {
padding: 1rem;
border: 1px solid var(--color-border);
border-radius: 18px;
background: #fff;
}
.info-band__label {
display: block;
color: var(--color-muted);
font-size: .78rem;
font-weight: 800;
}
.info-band__value {
display: block;
font-size: 1rem;
font-weight: 950;
}
.contact-grid {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(340px, 1fr);
gap: 1.5rem;
align-items: start;
}
.contact-card {
padding: 1.4rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--shadow-card);
}
.contact-list {
display: grid;
gap: .8rem;
padding: 0;
margin: 0;
list-style: none;
}
.contact-list li {
display: grid;
gap: .1rem;
padding-bottom: .8rem;
border-bottom: 1px solid var(--color-border);
}
.contact-list li:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.contact-label {
color: var(--color-muted);
font-size: .85rem;
font-weight: 800;
}
.contact-value {
font-weight: 900;
}
.form {
display: grid;
gap: .9rem;
}
.form__row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .9rem;
}
.form label {
display: grid;
gap: .35rem;
color: var(--color-muted);
font-size: .88rem;
font-weight: 800;
}
.form input,
.form textarea,
.form select {
width: 100%;
border: 1px solid var(--color-border);
border-radius: 14px;
padding: .82rem .9rem;
color: var(--color-text);
background: #fff;
outline: none;
transition: border-color .18s ease, box-shadow .18s ease;
}
.form textarea {
min-height: 140px;
resize: vertical;
}
.form input:focus,
.form textarea:focus,
.form select:focus {
border-color: rgba(255, 16, 56, .55);
box-shadow: 0 0 0 4px rgba(255, 16, 56, .10);
}
.map-card {
overflow: hidden;
min-height: 360px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background:
radial-gradient(circle at 70% 20%, rgba(255, 16, 56, .18), transparent 14rem),
linear-gradient(135deg, #0b0f14, #16202e);
box-shadow: var(--shadow-card);
}
.map-card__inner {
display: grid;
min-height: 360px;
place-items: center;
padding: 2rem;
color: #fff;
text-align: center;
}
.map-card p {
max-width: 520px;
margin-inline: auto;
}
.cta-band {
overflow: hidden;
position: relative;
padding: clamp(2rem, 5vw, 3rem);
border-radius: var(--radius-lg);
color: #fff;
background:
radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .16), transparent 20rem),
linear-gradient(135deg, #121a25, #050608);
box-shadow: var(--shadow-soft);
}
.cta-band::before {
content: "";
position: absolute;
width: 55%;
height: 7px;
right: -8%;
top: 22%;
background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
transform: rotate(-12deg);
}
.cta-band__content {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 1.2rem;
}
.cta-band p {
max-width: 680px;
}
.site-footer {
color: #fff;
background: #06080b;
padding: 3.5rem 0 1.2rem;
}
.footer-grid {
display: grid;
grid-template-columns: minmax(220px, .9fr) repeat(4, minmax(0, 1fr));
gap: 1.6rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.footer-logo {
width: min(250px, 70vw);
margin-bottom: 1rem;
}
.footer-title {
margin-bottom: .8rem;
color: #fff;
font-size: .96rem;
font-weight: 950;
}
.footer-links,
.footer-contact {
display: grid;
gap: .55rem;
padding: 0;
margin: 0;
list-style: none;
}
.footer-links a,
.footer-contact a {
color: var(--color-muted-dark);
}
.footer-links a:hover,
.footer-contact a:hover {
color: #fff;
}
.privacy-link {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
font-weight: 900;
}
.privacy-link:hover {
color: var(--color-primary);
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: .8rem;
padding-top: 1.2rem;
color: var(--color-muted-dark);
font-size: .9rem;
}
.sticky-actions {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 90;
display: grid;
gap: .6rem;
}
.sticky-actions .btn {
min-width: 145px;
box-shadow: var(--shadow-soft);
}
.notice {
display: none;
padding: .8rem 1rem;
border-radius: 14px;
background: #fff7ed;
color: #9a3412;
font-weight: 800;
}
.notice.is-visible {
display: block;
}
.empty-state {
display: none;
padding: 2rem;
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
background: #fff;
text-align: center;
}
.empty-state.is-visible {
display: block;
}
@media (max-width: 1024px) {
.nav-actions .btn--secondary {
display: none;
}
.hero__grid,
.detail-layout,
.contact-grid,
.cta-band__content {
grid-template-columns: 1fr;
}
.detail-panel {
position: static;
}
.vehicle-grid,
.grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.info-band {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 820px) {
:root {
--header-height: 74px;
}
.mobile-menu-button {
display: inline-flex;
}
.nav {
position: fixed;
inset: var(--header-height) 0 auto 0;
display: grid;
gap: .35rem;
padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, .08);
background: rgba(7, 9, 13, .98);
transform: translateY(-120%);
opacity: 0;
pointer-events: none;
transition: transform .22s ease, opacity .22s ease;
}
.nav.is-open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.nav__link {
padding: .9rem 1rem;
border-radius: 16px;
}
.brand__logo {
width: min(220px, 55vw);
}
.hero {
min-height: auto;
}
.stat-strip {
grid-template-columns: 1fr;
}
.stock-toolbar {
display: grid;
}
.search-box {
min-width: 100%;
}
.sticky-actions {
left: .75rem;
right: .75rem;
bottom: .75rem;
grid-template-columns: repeat(2, 1fr);
}
.sticky-actions .btn {
min-width: 0;
padding-inline: .7rem;
font-size: .92rem;
}
body {
padding-bottom: 78px;
}
}
@media (max-width: 640px) {
.container {
width: min(calc(100% - 1.2rem), var(--container));
}
.section {
padding: 3rem 0;
}
.vehicle-grid,
.grid-3,
.grid-2,
.footer-grid,
.form__row,
.info-band {
grid-template-columns: 1fr;
}
.vehicle-meta,
.gallery__thumbs {
grid-template-columns: repeat(2, 1fr);
}
.hero__logo {
width: min(360px, 88vw);
}
h1 {
font-size: clamp(2.25rem, 13vw, 3.4rem);
}
.btn-row {
display: grid;
grid-template-columns: 1fr;
}
.footer-bottom {
display: grid;
}
} .admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.wp-caption, .gallery-caption { max-width: 100%; }
.bypostauthor { display: block; }
.screen-reader-text { position: absolute; left: -9999px; }
.wp-content { max-width: 760px; }
.wp-content p:last-child { margin-bottom: 0; }
.vehicle-card__title a { color: inherit; }
.vehicle-card__title a:hover { color: var(--color-primary); }
.meta-box-grid { display: grid; gap: 12px; } .top-bar {
border-bottom: 1px solid rgba(255, 255, 255, .08);
background: rgba(0, 0, 0, .34);
color: rgba(255, 255, 255, .82);
font-size: .82rem;
font-weight: 700;
}
.top-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 36px;
}
.top-bar__links {
display: flex;
align-items: center;
gap: .85rem;
white-space: nowrap;
}
.top-bar__links a,
.social-links a {
transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.top-bar__links a:hover {
color: #fff;
}
.social-links {
display: flex;
flex-wrap: wrap;
gap: .65rem;
margin-top: 1rem;
}
.social-links a {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .52rem .72rem;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
color: #fff;
background: rgba(255, 255, 255, .06);
font-size: .92rem;
font-weight: 800;
}
.social-links a:hover {
border-color: rgba(255, 16, 56, .45);
background: rgba(255, 16, 56, .16);
}
.social-links span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
background: rgba(255, 255, 255, .12);
font-weight: 900;
}
.stock-toolbar--single {
justify-content: flex-start;
}
.stock-toolbar--single .search-box {
min-width: min(540px, 100%);
}
.location-layout {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
gap: 1.2rem;
align-items: stretch;
}
.map-embed {
overflow: hidden;
min-height: 430px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: #dfe4ea;
box-shadow: var(--shadow-card);
}
.map-embed iframe {
display: block;
width: 100%;
height: 100%;
min-height: 430px;
border: 0;
}
.vehicle-video__embed {
overflow: hidden;
border-radius: 18px;
background: #050608;
}
.vehicle-video__embed .wp-video,
.vehicle-video__embed video,
.vehicle-video__embed iframe {
display: block;
width: 100% !important;
max-width: 100% !important;
}
.vehicle-video__embed iframe {
aspect-ratio: 16 / 9;
height: auto;
min-height: 320px;
border: 0;
}
.vehicle-video__embed video {
aspect-ratio: 16 / 9;
height: auto;
}
@media (max-width: 820px) {
.top-bar__inner {
justify-content: center;
min-height: 34px;
}
.top-bar__text {
display: none;
}
.top-bar__links {
gap: .75rem;
}
.nav {
inset: calc(var(--header-height) + 34px) 0 auto 0;
}
.location-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.top-bar__links {
width: 100%;
justify-content: center;
gap: .55rem;
font-size: .76rem;
}
.map-embed,
.map-embed iframe {
min-height: 330px;
}
} .financing-layout {
display: grid;
grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr);
gap: 1.5rem;
align-items: start;
}
.financing-intro {
position: sticky;
top: calc(var(--header-height) + 1rem);
}
.financing-steps {
display: grid;
gap: .85rem;
padding: 0;
margin: 1.35rem 0;
list-style: none;
}
.financing-steps li {
display: grid;
grid-template-columns: 42px 1fr;
gap: .65rem .85rem;
align-items: center;
padding: .9rem;
border: 1px solid var(--color-border);
border-radius: 18px;
background: #fff;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.financing-steps li span {
display: inline-grid;
width: 42px;
height: 42px;
grid-row: span 2;
place-items: center;
border-radius: 999px;
color: var(--color-muted);
background: var(--color-surface-2);
font-weight: 950;
}
.financing-steps li strong {
line-height: 1.15;
}
.financing-steps li small {
color: var(--color-muted);
font-weight: 700;
}
.financing-steps li.is-active {
border-color: rgba(255, 16, 56, .34);
background: linear-gradient(135deg, rgba(255, 16, 56, .08), #fff 62%);
box-shadow: 0 12px 28px rgba(255, 16, 56, .08);
}
.financing-steps li.is-active span,
.financing-steps li.is-complete span {
color: #fff;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}
.financing-summary {
display: grid;
gap: .35rem;
padding: 1rem;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-surface-2);
}
.financing-summary p {
margin: 0;
font-size: .94rem;
}
.financing-card {
overflow: hidden;
}
.financing-panel {
display: grid;
gap: .95rem;
}
.financing-panel[hidden] {
display: none;
}
.financing-actions {
margin-top: .5rem;
}
.consent-box {
display: grid;
gap: .75rem;
padding: 1rem;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-surface-2);
}
.form .checkbox-label {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: .65rem;
color: var(--color-text);
font-size: .92rem;
font-weight: 750;
line-height: 1.45;
}
.form .checkbox-label input {
width: 18px;
height: 18px;
margin-top: .15rem;
padding: 0;
accent-color: var(--color-primary);
}
.success-icon {
display: inline-grid;
width: 68px;
height: 68px;
place-items: center;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, var(--color-success), #087c35);
font-size: 2rem;
font-weight: 950;
box-shadow: 0 16px 35px rgba(22, 163, 74, .24);
}
.financing-success {
min-height: 430px;
align-content: center;
justify-items: start;
padding: clamp(1rem, 3vw, 2rem) 0;
}
.btn[disabled] {
cursor: wait;
opacity: .72;
transform: none;
}
@media (max-width: 980px) {
.financing-layout {
grid-template-columns: 1fr;
}
.financing-intro {
position: static;
}
}
@media (max-width: 640px) {
.financing-steps li {
grid-template-columns: 36px 1fr;
}
.financing-steps li span {
width: 36px;
height: 36px;
}
}
@media (max-width: 1040px) and (min-width: 821px) {
.brand__logo {
width: min(205px, 34vw);
}
.nav__link {
padding: .62rem .58rem;
font-size: .88rem;
}
.nav-actions .btn {
min-height: 44px;
padding-inline: .9rem;
}
} .nav > li {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav .current-menu-item > .nav__link,
.nav .current_page_item > .nav__link,
.nav .current-menu-ancestor > .nav__link {
color: #fff;
background: rgba(255, 255, 255, .09);
}
.page-editor-section {
padding-top: clamp(2.5rem, 5vw, 4rem);
padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.wp-content {
max-width: 860px;
}
.wp-content > *:first-child {
margin-top: 0;
}
.wp-content a {
color: var(--color-primary);
font-weight: 800;
} .section__header--split {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
}
.hero-vehicle-slider {
overflow: hidden;
}
.hero-vehicle-slider__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-bottom: 1rem;
}
.hero-vehicle-slider__hint {
color: var(--color-muted-dark);
font-size: .86rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
}
.home-hero-slide {
display: none;
}
.home-hero-slide.is-active {
display: block;
animation: ucHeroVehicleFade .9s ease both;
}
.home-hero-slide__image {
position: relative;
display: block;
overflow: hidden;
border-radius: 20px;
background: #0f172a;
}
.home-hero-slide__image img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 1.6s ease;
}
.home-hero-slide.is-active .home-hero-slide__image img {
transform: scale(1.025);
}
.home-hero-slide__badge {
position: absolute;
left: 1rem;
top: 1rem;
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .48rem .78rem;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
box-shadow: 0 14px 30px rgba(255, 16, 56, .34);
font-size: .78rem;
font-weight: 950;
text-transform: uppercase;
letter-spacing: .06em;
}
.home-hero-slide__badge::before {
content: "";
width: .5rem;
height: .5rem;
border-radius: 999px;
background: #fff;
box-shadow: 0 0 0 6px rgba(255, 255, 255, .18);
}
.hero-vehicle-dots {
display: flex;
justify-content: center;
gap: .45rem;
margin-top: 1rem;
}
.hero-vehicle-dot {
width: .62rem;
height: .62rem;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .28);
cursor: pointer;
transition: width .25s ease, background .25s ease;
}
.hero-vehicle-dot.is-active {
width: 1.8rem;
background: var(--color-primary);
}
.carousel-controls {
display: flex;
align-items: center;
gap: .6rem;
flex-shrink: 0;
}
.carousel-button {
display: inline-grid;
width: 46px;
height: 46px;
place-items: center;
border: 1px solid var(--color-border);
border-radius: 999px;
color: var(--color-text);
background: #fff;
box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
font-size: 2rem;
font-weight: 800;
line-height: 1;
cursor: pointer;
transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.carousel-button:hover {
transform: translateY(-2px);
border-color: rgba(255, 16, 56, .35);
color: var(--color-primary);
}
.vehicle-carousel {
overflow: hidden;
margin-inline: calc((100vw - min(100vw - 2rem, var(--container))) / -2);
padding-inline: calc((100vw - min(100vw - 2rem, var(--container))) / 2);
}
.vehicle-carousel__track {
display: flex;
gap: 1.2rem;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
padding: .35rem .1rem 1.1rem;
scrollbar-width: none;
}
.vehicle-carousel__track::-webkit-scrollbar {
display: none;
}
.vehicle-carousel__item {
flex: 0 0 calc((100% - 2.4rem) / 3);
min-width: 0;
scroll-snap-align: start;
}
.vehicle-carousel__item .vehicle-card {
height: 100%;
}
@keyframes ucHeroVehicleFade {
from {
opacity: 0;
transform: translateY(14px) scale(.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 1024px) {
.vehicle-carousel__item {
flex-basis: calc((100% - 1.2rem) / 2);
}
}
@media (max-width: 720px) {
.section__header--split {
align-items: flex-start;
flex-direction: column;
}
.carousel-controls {
width: 100%;
justify-content: flex-end;
}
.vehicle-carousel__item {
flex-basis: 86%;
}
.hero-vehicle-slider__top {
align-items: flex-start;
flex-direction: column;
}
} .btn--large {
min-height: 58px;
padding: 1rem 1.65rem;
font-size: 1.05rem;
font-weight: 950;
box-shadow: 0 16px 34px rgba(15, 23, 42, .18);
}
.home-vehicles-cta {
display: flex;
justify-content: center;
margin-top: 1.8rem;
}
.home-vehicles-cta .btn {
min-width: min(100%, 280px);
}
.vehicle-carousel-wrap {
position: relative;
}
.vehicle-carousel-wrap .vehicle-carousel {
padding-block: .2rem 1rem;
}
.carousel-button--side {
position: absolute;
top: 50%;
z-index: 8;
width: 54px;
height: 54px;
transform: translateY(-50%);
color: #fff;
border-color: rgba(255, 255, 255, .22);
background: rgba(11, 15, 20, .82);
box-shadow: 0 18px 40px rgba(15, 23, 42, .28);
backdrop-filter: blur(10px);
}
.carousel-button--side:hover {
transform: translateY(-50%) scale(1.04);
color: #fff;
border-color: rgba(255, 16, 56, .45);
background: var(--color-primary);
}
.carousel-button--prev {
left: clamp(.45rem, 2vw, 1.5rem);
}
.carousel-button--next {
right: clamp(.45rem, 2vw, 1.5rem);
}
.vehicle-card-gallery {
position: relative;
aspect-ratio: 4 / 3;
}
.vehicle-card-gallery__link {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
color: inherit;
}
.vehicle-card-gallery__image {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
opacity: 0;
transform: scale(1);
transition: opacity .38s ease, transform .45s ease;
}
.vehicle-card-gallery__image.is-active {
opacity: 1;
z-index: 1;
}
.vehicle-card:hover .vehicle-card-gallery__image.is-active {
transform: scale(1.045);
}
.vehicle-card-gallery__button {
position: absolute;
top: 50%;
z-index: 4;
display: inline-grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 999px;
color: #fff;
background: rgba(11, 15, 20, .68);
box-shadow: 0 12px 26px rgba(15, 23, 42, .22);
font-size: 1.45rem;
font-weight: 900;
line-height: 1;
cursor: pointer;
opacity: 0;
transform: translateY(-50%) scale(.96);
transition: opacity .2s ease, transform .2s ease, background .2s ease;
backdrop-filter: blur(8px);
}
.vehicle-card:hover .vehicle-card-gallery__button,
.vehicle-card-gallery:focus-within .vehicle-card-gallery__button {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.vehicle-card-gallery__button:hover {
background: var(--color-primary);
}
.vehicle-card-gallery__button--prev {
left: .65rem;
}
.vehicle-card-gallery__button--next {
right: .65rem;
}
.vehicle-card-gallery__dots {
position: absolute;
left: 50%;
bottom: .72rem;
z-index: 4;
display: flex;
gap: .35rem;
padding: .3rem .42rem;
border-radius: 999px;
background: rgba(11, 15, 20, .42);
transform: translateX(-50%);
backdrop-filter: blur(8px);
}
.vehicle-card-gallery__dot {
width: .46rem;
height: .46rem;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .52);
cursor: pointer;
transition: width .2s ease, background .2s ease;
}
.vehicle-card-gallery__dot.is-active {
width: 1.25rem;
background: #fff;
}
@media (max-width: 720px) {
.carousel-button--side {
width: 46px;
height: 46px;
}
.carousel-button--prev {
left: .15rem;
}
.carousel-button--next {
right: .15rem;
}
.vehicle-card-gallery__button {
opacity: 1;
transform: translateY(-50%) scale(1);
}
} .vehicle-carousel-wrap {
position: relative;
padding-inline: 76px;
}
.vehicle-carousel-wrap .vehicle-carousel {
margin-inline: 0;
padding-inline: 0;
padding-block: .2rem 1rem;
}
.carousel-button--side {
top: 50%;
z-index: 8;
width: 56px;
height: 56px;
color: #fff;
border-color: rgba(255, 255, 255, .2);
background: rgba(11, 15, 20, .9);
transform: translateY(-50%);
}
.carousel-button--prev {
left: 0;
}
.carousel-button--next {
right: 0;
} .vehicle-card__media {
position: relative;
display: block;
overflow: hidden;
color: inherit;
}
.vehicle-card__media img {
position: static;
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
opacity: 1;
transform: none;
} .vehicle-detail-gallery__main {
position: relative;
min-height: 280px;
aspect-ratio: 16 / 10;
}
.vehicle-detail-gallery__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
opacity: 0;
transform: scale(1.015);
transition: opacity .45s ease, transform .75s ease;
}
.vehicle-detail-gallery__image.is-active {
opacity: 1;
transform: scale(1);
z-index: 1;
}
.gallery-arrow {
position: absolute;
top: 50%;
z-index: 4;
display: inline-grid;
width: 54px;
height: 54px;
place-items: center;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 999px;
color: #fff;
background: rgba(11, 15, 20, .72);
box-shadow: 0 18px 40px rgba(15, 23, 42, .28);
font-size: 2rem;
font-weight: 900;
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
transition: background .2s ease, transform .2s ease, border-color .2s ease;
backdrop-filter: blur(10px);
}
.gallery-arrow:hover {
background: var(--color-primary);
border-color: rgba(255, 255, 255, .42);
transform: translateY(-50%) scale(1.04);
}
.gallery-arrow--prev {
left: 1rem;
}
.gallery-arrow--next {
right: 1rem;
}
.gallery-counter {
position: absolute;
right: 1rem;
bottom: 1rem;
z-index: 4;
padding: .45rem .72rem;
border-radius: 999px;
color: #fff;
background: rgba(11, 15, 20, .65);
font-size: .86rem;
font-weight: 900;
backdrop-filter: blur(10px);
}
@media (max-width: 900px) {
.vehicle-carousel-wrap {
padding-inline: 58px;
}
.carousel-button--side {
width: 46px;
height: 46px;
}
}
@media (max-width: 720px) {
.vehicle-carousel-wrap {
padding-inline: 0;
}
.carousel-button--side {
top: calc(50% - 28px);
width: 44px;
height: 44px;
}
.carousel-button--prev {
left: .35rem;
}
.carousel-button--next {
right: .35rem;
}
.vehicle-detail-gallery__main {
min-height: 220px;
}
.gallery-arrow {
width: 44px;
height: 44px;
font-size: 1.65rem;
}
.gallery-arrow--prev {
left: .7rem;
}
.gallery-arrow--next {
right: .7rem;
}
} .vehicle-card__media.vehicle-card-gallery {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
color: inherit;
}
.vehicle-card-gallery__link {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
color: inherit;
}
.vehicle-card__media.vehicle-card-gallery img.vehicle-card-gallery__image,
.vehicle-card-gallery__image {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
opacity: 0;
transform: scale(1);
transition: opacity .38s ease, transform .45s ease;
}
.vehicle-card-gallery__image.is-active {
opacity: 1;
z-index: 1;
}
.vehicle-card:hover .vehicle-card-gallery__image.is-active {
transform: scale(1.045);
}
.vehicle-card-gallery__button {
position: absolute;
top: 50%;
z-index: 4;
display: inline-grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 999px;
color: #fff;
background: rgba(11, 15, 20, .68);
box-shadow: 0 12px 26px rgba(15, 23, 42, .22);
font-size: 1.45rem;
font-weight: 900;
line-height: 1;
cursor: pointer;
opacity: 0;
transform: translateY(-50%) scale(.96);
transition: opacity .2s ease, transform .2s ease, background .2s ease;
backdrop-filter: blur(8px);
}
.vehicle-card:hover .vehicle-card-gallery__button,
.vehicle-card-gallery:focus-within .vehicle-card-gallery__button {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.vehicle-card-gallery__button:hover {
background: var(--color-primary);
}
.vehicle-card-gallery__button--prev {
left: .65rem;
}
.vehicle-card-gallery__button--next {
right: .65rem;
}
.vehicle-card-gallery__dots {
position: absolute;
left: 50%;
bottom: .72rem;
z-index: 4;
display: flex;
gap: .35rem;
padding: .3rem .42rem;
border-radius: 999px;
background: rgba(11, 15, 20, .42);
transform: translateX(-50%);
backdrop-filter: blur(8px);
}
.vehicle-card-gallery__dot {
width: .46rem;
height: .46rem;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .52);
cursor: pointer;
transition: width .2s ease, background .2s ease;
}
.vehicle-card-gallery__dot.is-active {
width: 1.25rem;
background: #fff;
}
.gallery__thumb-carousel {
position: relative;
padding-inline: 3.1rem;
}
.gallery__thumb-carousel .gallery__thumbs {
display: flex;
grid-template-columns: none;
gap: .8rem;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: .1rem;
}
.gallery__thumb-carousel .gallery__thumbs::-webkit-scrollbar {
display: none;
}
.gallery__thumb-carousel .gallery__thumb {
flex: 0 0 calc((100% - 2.4rem) / 4);
min-width: 0;
scroll-snap-align: start;
}
.gallery-thumb-arrow {
position: absolute;
top: 50%;
z-index: 4;
display: inline-grid;
width: 42px;
height: 42px;
place-items: center;
border: 1px solid var(--color-border);
border-radius: 999px;
color: var(--color-text);
background: #fff;
box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
font-size: 1.75rem;
font-weight: 900;
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
transition: transform .18s ease, color .18s ease, border-color .18s ease;
}
.gallery-thumb-arrow:hover {
color: var(--color-primary);
border-color: rgba(255, 16, 56, .35);
transform: translateY(-50%) scale(1.04);
}
.gallery-thumb-arrow--prev {
left: 0;
}
.gallery-thumb-arrow--next {
right: 0;
}
@media (max-width: 720px) {
.vehicle-card-gallery__button {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.gallery__thumb-carousel {
padding-inline: 2.6rem;
}
.gallery__thumb-carousel .gallery__thumb {
flex-basis: calc((100% - .8rem) / 2);
}
.gallery-thumb-arrow {
width: 36px;
height: 36px;
font-size: 1.5rem;
} .vehicle-card__media.vehicle-card-gallery img.vehicle-card-gallery__image {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
opacity: 0;
visibility: hidden;
z-index: 0;
transform: scale(1);
transition: opacity .38s ease, transform .45s ease, visibility .38s ease;
}
.vehicle-card__media.vehicle-card-gallery img.vehicle-card-gallery__image.is-active {
opacity: 1;
visibility: visible;
z-index: 2;
}
.vehicle-card:hover .vehicle-card__media.vehicle-card-gallery img.vehicle-card-gallery__image.is-active {
transform: scale(1.045);
}
.vehicle-card__media.vehicle-card-gallery .vehicle-card__tag,
.vehicle-card__media.vehicle-card-gallery .vehicle-card-gallery__button,
.vehicle-card__media.vehicle-card-gallery .vehicle-card-gallery__dots {
z-index: 5;
}
} .vehicle-carousel__track {
align-items: stretch;
}
.vehicle-carousel__item {
display: flex;
}
.vehicle-card,
.vehicle-carousel__item .vehicle-card {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
height: 100%;
}
.vehicle-card__media.vehicle-card-gallery {
position: relative;
flex: 0 0 auto;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #0f172a;
}
.vehicle-card-gallery__link {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.vehicle-card__media.vehicle-card-gallery img.vehicle-card-gallery__image {
position: absolute;
inset: 0;
display: block;
width: 100%;
max-width: none;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
opacity: 0;
visibility: hidden;
z-index: 0;
pointer-events: none;
transform: scale(1);
transition: opacity .38s ease, transform .45s ease, visibility .38s ease;
}
.vehicle-card__media.vehicle-card-gallery img.vehicle-card-gallery__image.is-active {
opacity: 1;
visibility: visible;
z-index: 2;
}
.vehicle-card:hover .vehicle-card__media.vehicle-card-gallery img.vehicle-card-gallery__image.is-active {
transform: scale(1.045);
}
.vehicle-card__media.vehicle-card-gallery .vehicle-card__tag,
.vehicle-card__media.vehicle-card-gallery .vehicle-card-gallery__button,
.vehicle-card__media.vehicle-card-gallery .vehicle-card-gallery__dots {
z-index: 5;
}
.vehicle-card__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.vehicle-card__title {
min-height: 3.1rem;
line-height: 1.28;
}
.vehicle-card__title a {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.vehicle-card__actions {
margin-top: auto;
} .form select,
.filter-field select {
appearance: none;
-webkit-appearance: none;
min-height: 48px;
padding-right: 2.75rem;
color: var(--color-text);
background-color: #fff;
background-image:
linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
linear-gradient(135deg, var(--color-primary) 50%, transparent 50%),
linear-gradient(to right, rgba(255, 16, 56, .12), rgba(255, 16, 56, .12));
background-position:
calc(100% - 1.15rem) 50%,
calc(100% - .82rem) 50%,
calc(100% - 2.25rem) 50%;
background-size: .36rem .36rem, .36rem .36rem, 1px 1.65rem;
background-repeat: no-repeat;
box-shadow: 0 10px 22px rgba(15, 23, 42, .04);
}
.form select:hover,
.filter-field select:hover {
border-color: rgba(255, 16, 56, .36);
}
.form select:disabled,
.filter-field select:disabled {
color: var(--color-muted);
cursor: not-allowed;
background-color: var(--color-surface-2);
}
.btn--header-whatsapp {
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn--header-whatsapp::before {
content: "";
display: inline-block;
width: 0;
height: 1.12rem;
opacity: 0;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M19.11 17.39c-.26-.13-1.54-.76-1.78-.85-.24-.09-.41-.13-.58.13-.17.26-.67.85-.82 1.03-.15.17-.3.2-.56.07-.26-.13-1.1-.4-2.09-1.29-.77-.69-1.29-1.53-1.44-1.79-.15-.26-.02-.4.11-.53.12-.12.26-.3.39-.45.13-.15.17-.26.26-.43.09-.17.04-.32-.02-.45-.07-.13-.58-1.4-.8-1.92-.21-.5-.42-.43-.58-.44h-.5c-.17 0-.45.06-.69.32-.24.26-.91.89-.91 2.17s.93 2.52 1.06 2.69c.13.17 1.83 2.79 4.43 3.91.62.27 1.1.43 1.48.55.62.2 1.19.17 1.64.1.5-.07 1.54-.63 1.76-1.24.22-.61.22-1.13.15-1.24-.07-.11-.24-.17-.5-.3ZM16.02 4C9.39 4 4 9.39 4 16.02c0 2.12.55 4.19 1.61 6.01L4 28l6.12-1.6a11.95 11.95 0 0 0 5.9 1.5h.01C22.66 27.9 28 22.51 28 15.88 28 9.37 22.6 4 16.02 4Zm.01 21.87h-.01a9.95 9.95 0 0 1-5.08-1.39l-.36-.21-3.63.95.97-3.54-.23-.36a9.92 9.92 0 0 1-1.52-5.28c0-5.48 4.46-9.94 9.94-9.94a9.88 9.88 0 0 1 7.03 2.92 9.87 9.87 0 0 1 2.91 7.01c0 5.48-4.46 9.94-10.02 9.94Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M19.11 17.39c-.26-.13-1.54-.76-1.78-.85-.24-.09-.41-.13-.58.13-.17.26-.67.85-.82 1.03-.15.17-.3.2-.56.07-.26-.13-1.1-.4-2.09-1.29-.77-.69-1.29-1.53-1.44-1.79-.15-.26-.02-.4.11-.53.12-.12.26-.3.39-.45.13-.15.17-.26.26-.43.09-.17.04-.32-.02-.45-.07-.13-.58-1.4-.8-1.92-.21-.5-.42-.43-.58-.44h-.5c-.17 0-.45.06-.69.32-.24.26-.91.89-.91 2.17s.93 2.52 1.06 2.69c.13.17 1.83 2.79 4.43 3.91.62.27 1.1.43 1.48.55.62.2 1.19.17 1.64.1.5-.07 1.54-.63 1.76-1.24.22-.61.22-1.13.15-1.24-.07-.11-.24-.17-.5-.3ZM16.02 4C9.39 4 4 9.39 4 16.02c0 2.12.55 4.19 1.61 6.01L4 28l6.12-1.6a11.95 11.95 0 0 0 5.9 1.5h.01C22.66 27.9 28 22.51 28 15.88 28 9.37 22.6 4 16.02 4Zm.01 21.87h-.01a9.95 9.95 0 0 1-5.08-1.39l-.36-.21-3.63.95.97-3.54-.23-.36a9.92 9.92 0 0 1-1.52-5.28c0-5.48 4.46-9.94 9.94-9.94a9.88 9.88 0 0 1 7.03 2.92 9.87 9.87 0 0 1 2.91 7.01c0 5.48-4.46 9.94-10.02 9.94Z'/%3E%3C/svg%3E") center / contain no-repeat;
transform: translateX(-.35rem) scale(.92);
transition: width .2s ease, opacity .2s ease, transform .2s ease;
}
.btn--header-whatsapp:hover,
.btn--header-whatsapp:focus-visible {
color: #fff;
border-color: #25d366;
background: linear-gradient(135deg, #25d366, #128c4a);
box-shadow: 0 14px 30px rgba(37, 211, 102, .28);
}
.btn--header-whatsapp:hover::before,
.btn--header-whatsapp:focus-visible::before {
width: 1.12rem;
opacity: 1;
transform: translateX(0) scale(1);
}
.stock-toolbar--filters {
display: grid;
gap: 1rem;
}
.stock-toolbar__top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .8rem;
}
.stock-toolbar__top .search-box {
flex: 1 1 320px;
min-width: min(520px, 100%);
}
.stock-toolbar__reset {
min-height: 44px;
color: var(--color-text);
}
.vehicle-filters {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: .8rem;
}
.filter-field {
display: grid;
gap: .32rem;
color: var(--color-muted);
font-size: .82rem;
font-weight: 850;
}
.filter-field select {
width: 100%;
border: 1px solid var(--color-border);
border-radius: 14px;
padding: .78rem 2.65rem .78rem .9rem;
outline: none;
transition: border-color .18s ease, box-shadow .18s ease;
}
.filter-field select:focus {
border-color: rgba(255, 16, 56, .55);
box-shadow: 0 0 0 4px rgba(255, 16, 56, .10);
}
.filter-summary {
min-height: 1.2rem;
color: var(--color-muted);
font-size: .9rem;
font-weight: 750;
}
.financing-vehicle-picker {
display: grid;
grid-template-columns: minmax(180px, .48fr) minmax(220px, 1fr);
gap: .9rem;
}
@media (max-width: 1024px) {
.vehicle-filters {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.vehicle-filters,
.financing-vehicle-picker {
grid-template-columns: 1fr;
}
.stock-toolbar__top {
display: grid;
}
.stock-toolbar__reset {
width: 100%;
}
} .form select:not(.combo-select__native),
.filter-field select {
appearance: none;
-webkit-appearance: none;
width: 100%;
min-height: 52px;
border: 1.5px solid var(--color-border);
border-radius: 16px;
padding: .86rem 3rem .86rem 1rem;
color: var(--color-text);
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ff1038' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(255,16,56,.08), rgba(255,16,56,.02));
background-repeat: no-repeat;
background-position: right 1rem center, center;
background-size: 1.15rem, 100% 100%;
box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
cursor: pointer;
outline: 0;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
.form select:not(.combo-select__native):hover,
.filter-field select:hover {
border-color: rgba(255, 16, 56, .42);
box-shadow: 0 16px 30px rgba(15, 23, 42, .08);
}
.form select:not(.combo-select__native):focus,
.form select:not(.combo-select__native):focus-visible,
.filter-field select:focus,
.filter-field select:focus-visible {
border-color: rgba(255, 16, 56, .72);
box-shadow: 0 0 0 4px rgba(255, 16, 56, .12), 0 16px 30px rgba(15, 23, 42, .08);
}
.filter-field input {
width: 100%;
min-height: 52px;
border: 1.5px solid var(--color-border);
border-radius: 16px;
padding: .86rem 1rem;
color: var(--color-text);
background: #fff;
box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
outline: 0;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
.filter-field input::placeholder {
color: #9aa3b2;
}
.filter-field input:hover {
border-color: rgba(255, 16, 56, .34);
}
.filter-field input:focus,
.filter-field input:focus-visible {
border-color: rgba(255, 16, 56, .72);
box-shadow: 0 0 0 4px rgba(255, 16, 56, .12), 0 16px 30px rgba(15, 23, 42, .08);
}
.filter-field input[type="number"]::-webkit-outer-spin-button,
.filter-field input[type="number"]::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.filter-field input[type="number"] {
appearance: textfield;
-moz-appearance: textfield;
}
.btn--header-whatsapp {
min-width: 112px;
line-height: 1;
gap: 0;
white-space: nowrap;
overflow: hidden;
transform: translateZ(0);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease, padding .18s ease;
}
.btn--header-whatsapp::before {
content: "";
flex: 0 0 auto;
width: 0;
height: 1.25rem;
margin-right: 0;
opacity: 0;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M16.02 4C9.39 4 4 9.39 4 16.02c0 2.12.55 4.19 1.61 6.01L4 28l6.12-1.6a11.95 11.95 0 0 0 5.9 1.5h.01C22.66 27.9 28 22.51 28 15.88 28 9.37 22.6 4 16.02 4Zm.01 21.87h-.01a9.95 9.95 0 0 1-5.08-1.39l-.36-.21-3.63.95.97-3.54-.23-.36a9.92 9.92 0 0 1-1.52-5.28c0-5.48 4.46-9.94 9.94-9.94a9.88 9.88 0 0 1 7.03 2.92 9.87 9.87 0 0 1 2.91 7.01c0 5.48-4.46 9.94-10.02 9.94Zm5.45-7.48c-.3-.15-1.78-.88-2.06-.98-.28-.1-.48-.15-.68.15-.2.3-.77.98-.95 1.18-.18.2-.35.22-.65.07-.3-.15-1.27-.47-2.42-1.49-.9-.8-1.5-1.79-1.68-2.09-.18-.3-.02-.46.13-.61.14-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.68-1.64-.93-2.24-.25-.59-.5-.5-.68-.51h-.58c-.2 0-.52.07-.8.37-.28.3-1.05 1.03-1.05 2.51s1.08 2.91 1.23 3.11c.15.2 2.12 3.24 5.14 4.54.72.31 1.28.5 1.72.64.72.23 1.38.2 1.9.12.58-.09 1.78-.73 2.03-1.43.25-.7.25-1.31.18-1.43-.08-.12-.28-.2-.58-.35Z'/%3E%3C/svg%3E");
-webkit-mask: none;
mask: none;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transform: scale(.88);
transition: width .18s ease, opacity .18s ease, margin-right .18s ease, transform .18s ease;
}
.btn--header-whatsapp:hover,
.btn--header-whatsapp:focus-visible {
color: #fff;
border-color: #25d366;
background: linear-gradient(135deg, #25d366, #128c4a);
box-shadow: 0 14px 30px rgba(37, 211, 102, .28);
}
.btn--header-whatsapp:hover::before,
.btn--header-whatsapp:focus-visible::before {
width: 1.25rem;
margin-right: .45rem;
opacity: 1;
transform: scale(1);
}
.financing-vehicle-picker {
grid-template-columns: 1fr;
}
.financing-vehicle-combo-label {
position: relative;
}
.combo-select {
position: relative;
display: block;
width: 100%;
}
.combo-select__search {
width: 100%;
min-height: 54px;
border: 1.5px solid var(--color-border);
border-radius: 16px;
padding: .9rem 3rem .9rem 1rem;
color: var(--color-text);
background: #fff;
box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
outline: 0;
transition: border-color .18s ease, box-shadow .18s ease;
}
.combo-select__search::placeholder {
color: #9aa3b2;
}
.combo-select__search:hover {
border-color: rgba(255, 16, 56, .36);
}
.combo-select__search:focus,
.combo-select.is-open .combo-select__search {
border-color: rgba(255, 16, 56, .72);
box-shadow: 0 0 0 4px rgba(255, 16, 56, .12), 0 16px 30px rgba(15, 23, 42, .08);
}
.combo-select__arrow {
position: absolute;
top: 50%;
right: 1rem;
width: 1.15rem;
height: 1.15rem;
pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ff1038' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
transform: translateY(-50%);
transition: transform .18s ease;
}
.combo-select.is-open .combo-select__arrow {
transform: translateY(-50%) rotate(180deg);
}
.combo-select__dropdown {
position: absolute;
top: calc(100% + .45rem);
left: 0;
right: 0;
z-index: 30;
display: none;
max-height: 280px;
overflow: auto;
padding: .45rem;
border: 1px solid rgba(230, 233, 239, .95);
border-radius: 16px;
background: #fff;
box-shadow: 0 22px 55px rgba(15, 23, 42, .18);
}
.combo-select.is-open .combo-select__dropdown {
display: grid;
gap: .25rem;
}
.combo-select__option {
display: grid;
gap: .1rem;
width: 100%;
padding: .75rem .85rem;
border: 0;
border-radius: 12px;
color: var(--color-text);
background: transparent;
text-align: left;
cursor: pointer;
}
.combo-select__option:hover,
.combo-select__option.is-active {
color: var(--color-primary-dark);
background: rgba(255, 16, 56, .08);
}
.combo-select__option-title {
font-weight: 850;
line-height: 1.25;
}
.combo-select__option-meta {
color: var(--color-muted);
font-size: .78rem;
font-weight: 750;
}
.combo-select__empty {
display: block;
padding: .85rem;
color: var(--color-muted);
font-weight: 750;
}
.combo-select__native {
display: none !important;
} select[data-pretty-select].pretty-select__native {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
clip-path: inset(50%) !important;
}
.pretty-select {
position: relative;
z-index: 2;
display: block;
width: 100%;
}
.pretty-select.is-open {
z-index: 40;
}
.pretty-select__button {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 54px;
border: 1.5px solid var(--color-border);
border-radius: 16px;
padding: .9rem 3rem .9rem 1rem;
color: var(--color-text);
background: linear-gradient(135deg, #fff, #fff 62%, rgba(255, 16, 56, .045));
box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
cursor: pointer;
text-align: left;
outline: 0;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.pretty-select__button::after {
content: "";
position: absolute;
top: 50%;
right: 1rem;
width: 1.15rem;
height: 1.15rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ff1038' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
transform: translateY(-50%);
transition: transform .18s ease;
}
.pretty-select.is-open .pretty-select__button::after {
transform: translateY(-50%) rotate(180deg);
}
.pretty-select__button:hover {
border-color: rgba(255, 16, 56, .42);
box-shadow: 0 16px 30px rgba(15, 23, 42, .08);
}
.pretty-select__button:focus,
.pretty-select__button:focus-visible,
.pretty-select.is-open .pretty-select__button {
border-color: rgba(255, 16, 56, .72);
box-shadow: 0 0 0 4px rgba(255, 16, 56, .12), 0 16px 30px rgba(15, 23, 42, .08);
}
.pretty-select__value {
display: block;
overflow: hidden;
max-width: 100%;
color: var(--color-text);
font-weight: 850;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.pretty-select.is-placeholder .pretty-select__value {
color: #8f98a7;
}
.pretty-select__menu {
position: absolute;
top: calc(100% + .45rem);
left: 0;
right: 0;
z-index: 60;
display: none;
max-height: 280px;
overflow: auto;
padding: .45rem;
border: 1px solid rgba(230, 233, 239, .95);
border-radius: 16px;
background: #fff;
box-shadow: 0 22px 55px rgba(15, 23, 42, .18);
}
.pretty-select.is-open .pretty-select__menu {
display: grid;
gap: .25rem;
}
.pretty-select__option {
display: block;
width: 100%;
padding: .78rem .85rem;
border: 0;
border-radius: 12px;
color: var(--color-text);
background: transparent;
font-weight: 800;
line-height: 1.25;
text-align: left;
cursor: pointer;
outline: 0;
}
.pretty-select__option:hover,
.pretty-select__option:focus,
.pretty-select__option.is-selected {
color: var(--color-primary-dark);
background: rgba(255, 16, 56, .08);
}
.form input[type="date"],
.form .date-field {
min-height: 54px;
border: 1.5px solid var(--color-border);
border-radius: 16px;
padding: .86rem 1rem;
color: var(--color-text);
background: linear-gradient(135deg, #fff, #fff 62%, rgba(255, 16, 56, .045));
box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
cursor: pointer;
}
.form input[type="date"]:hover,
.form .date-field:hover {
border-color: rgba(255, 16, 56, .42);
}
.form input[type="date"]:focus,
.form input[type="date"]:focus-visible,
.form .date-field:focus,
.form .date-field:focus-visible {
border-color: rgba(255, 16, 56, .72);
box-shadow: 0 0 0 4px rgba(255, 16, 56, .12), 0 16px 30px rgba(15, 23, 42, .08);
}
.form input[type="date"]::-webkit-calendar-picker-indicator,
.form .date-field::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: .75;
filter: hue-rotate(330deg) saturate(1.6);
}
.contact-vehicle-combo-label,
.financing-vehicle-combo-label {
width: 100%;
}
.contact-vehicle-combo-label .combo-select,
.financing-vehicle-combo-label .combo-select {
margin-top: .35rem;
}
.contact-vehicle-combo-label .combo-select__dropdown {
z-index: 70;
}
.form__row > .contact-vehicle-combo-label {
grid-column: 1 / -1;
} .uc-honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
} .financing-card {
overflow: visible;
}
.financing-card .pretty-select__menu,
.financing-card .combo-select__dropdown {
z-index: 100;
} @media (max-width: 1024px) {
.home-hero-stats {
display: none;
}
}
@media (max-width: 720px) {
.vehicle-carousel-wrap {
padding-inline: 0;
}
.vehicle-carousel-wrap .vehicle-carousel {
overflow: hidden;
width: 100%;
}
.vehicle-carousel__track {
gap: 0;
padding-inline: 0;
scroll-padding-inline: 0;
}
.vehicle-carousel__item {
flex: 0 0 100%;
max-width: 100%;
min-width: 100%;
}
.vehicle-carousel__item .vehicle-card {
width: 100%;
}
.carousel-button--side {
top: auto;
bottom: -1.1rem;
transform: none;
}
.carousel-button--side:hover {
transform: scale(1.04);
}
.carousel-button--prev {
left: .5rem;
}
.carousel-button--next {
right: .5rem;
}
.home-vehicles-cta {
margin-top: 3.2rem;
}
} .legal-content {
max-width: 980px;
}
.legal-content h2 {
margin-top: 2rem;
}
.legal-updated,
.legal-note {
padding: 1rem 1.1rem;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-surface-2);
}
.legal-note {
margin-top: 2rem;
}
.legal-table-wrap {
overflow-x: auto;
margin: 1rem 0 1.4rem;
border: 1px solid var(--color-border);
border-radius: 18px;
background: #fff;
}
.legal-table {
width: 100%;
border-collapse: collapse;
font-size: .95rem;
}
.legal-table th,
.legal-table td {
padding: .9rem 1rem;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
text-align: left;
}
.legal-table tr:last-child th,
.legal-table tr:last-child td {
border-bottom: 0;
}
.legal-table th {
width: 230px;
color: var(--color-text);
background: var(--color-surface-2);
font-weight: 900;
}
.legal-table--cookies th {
width: auto;
}
.checkbox-label__text {
min-width: 0;
}
.privacy-link {
display: inline;
white-space: nowrap;
}
.vehicle-carousel-wrap .carousel-button--side {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 0;
line-height: 1;
}
.vehicle-carousel-wrap .carousel-button--side::before {
display: block;
font-size: 2.35rem;
font-weight: 900;
line-height: 1;
transform: translateY(-1px);
}
.vehicle-carousel-wrap .carousel-button--prev::before {
content: "‹";
}
.vehicle-carousel-wrap .carousel-button--next::before {
content: "›";
}
@media (max-width: 720px) {
.vehicle-carousel-wrap .carousel-button--side {
top: 50%;
bottom: auto;
width: 46px;
height: 46px;
transform: translateY(-50%);
}
.vehicle-carousel-wrap .carousel-button--side:hover {
transform: translateY(-50%) scale(1.04);
}
.vehicle-carousel-wrap .carousel-button--prev {
left: .35rem;
}
.vehicle-carousel-wrap .carousel-button--next {
right: .35rem;
}
.home-vehicles-cta {
margin-top: 1.8rem;
}
.legal-table th,
.legal-table td {
display: block;
width: 100%;
}
.legal-table th {
padding-bottom: .35rem;
}
.legal-table td {
padding-top: .35rem;
}
} .vehicle-status-section--spaced {
margin-top: 3rem;
padding-top: 2.2rem;
border-top: 1px solid var(--color-border);
}
.vehicle-grid--status {
align-items: stretch;
}
.vehicle-status-card {
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 100%;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--shadow-card);
}
.vehicle-status-card__media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
background: #0f172a;
}
.vehicle-status-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(.95);
transition: transform .35s ease, opacity .35s ease;
}
.vehicle-status-card:hover .vehicle-status-card__media img {
transform: scale(1.035);
}
.vehicle-status-card--sold .vehicle-status-card__media img {
opacity: .72;
filter: grayscale(.45) saturate(.75);
}
.vehicle-status-card__badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .42rem .72rem;
border-radius: 999px;
color: #fff;
background: rgba(15, 23, 42, .86);
font-size: .82rem;
font-weight: 900;
letter-spacing: .01em;
backdrop-filter: blur(10px);
}
.vehicle-status-card--upcoming .vehicle-status-card__badge {
background: rgba(255, 16, 56, .92);
}
.vehicle-status-card--sold .vehicle-status-card__badge {
background: rgba(15, 23, 42, .88);
}
.vehicle-status-card__body {
display: grid;
gap: .45rem;
padding: 1.15rem;
}
.vehicle-status-card__title {
margin: 0;
color: var(--color-text);
font-size: 1.15rem;
line-height: 1.25;
}
.vehicle-status-card__message,
.vehicle-single-status__message {
display: inline-flex;
width: fit-content;
margin: 0;
padding: .5rem .8rem;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
font-weight: 950;
letter-spacing: .01em;
}
.vehicle-status-card--sold .vehicle-status-card__message,
.vehicle-single-status__message {
background: #0f172a;
}
.vehicle-single-status h2 {
margin-top: .35rem;
}
@media (max-width: 760px) {
.vehicle-status-section--spaced {
margin-top: 2.2rem;
padding-top: 1.6rem;
}
}
.vehicle-tabs {
display: grid;
gap: 1.45rem;
}
.vehicle-tabs__nav {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .85rem;
padding: .45rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .78);
box-shadow: var(--shadow-card);
}
.vehicle-tabs__tab {
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
min-height: 3.2rem;
padding: .85rem 1rem;
border: 1px solid transparent;
border-radius: calc(var(--radius-lg) - .35rem);
color: var(--color-muted);
background: transparent;
font: inherit;
font-weight: 900;
cursor: pointer;
transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vehicle-tabs__tab:hover,
.vehicle-tabs__tab:focus-visible {
color: var(--color-text);
transform: translateY(-1px);
}
.vehicle-tabs__tab.is-active {
color: #fff;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
border-color: rgba(255, 255, 255, .2);
box-shadow: 0 14px 28px rgba(255, 16, 56, .18);
}
.vehicle-tabs__tab strong {
display: inline-grid;
min-width: 1.85rem;
height: 1.85rem;
place-items: center;
padding: 0 .45rem;
border-radius: 999px;
background: rgba(15, 23, 42, .08);
color: inherit;
font-size: .88rem;
line-height: 1;
}
.vehicle-tabs__tab.is-active strong {
background: rgba(255, 255, 255, .18);
}
.vehicle-tabs__panel {
outline: none;
}
.vehicle-tabs__panel[hidden] {
display: none !important;
}
.vehicle-tabs__empty {
margin-top: .35rem;
}
.home-hero-slide--upcoming .home-hero-slide__badge {
background: rgba(255, 16, 56, .92);
}
.home-hero-slide--upcoming .hero__card-info .btn-row {
margin-top: .6rem;
}
@media (max-width: 720px) {
.vehicle-tabs__nav {
grid-template-columns: 1fr;
gap: .45rem;
}
.vehicle-tabs__tab {
justify-content: space-between;
}
}