/* ===================== FONT FALLBACKS (CLS + font-display fix) ===================== */
/* Metric-matched fallbacks prevent layout shift while web fonts load.
These @font-face blocks define local system fonts sized to match each web font,
so text occupies the same space before/after swap.
The actual Google Fonts in must include &display=swap. */
@font-face {
font-family: 'Inter';
src: local('Inter');
font-display: swap;
}
@font-face {
font-family: 'Inter Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
font-display: swap;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
size-adjust: 107%;
}
@font-face {
font-family: 'Sora';
src: local('Sora');
font-display: swap;
}
@font-face {
font-family: 'Sora Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
font-display: swap;
ascent-override: 97%;
descent-override: 24%;
line-gap-override: 0%;
size-adjust: 102%;
}
@font-face {
font-family: 'Space Mono';
src: local('Space Mono');
font-display: swap;
}
@font-face {
font-family: 'Space Mono Fallback';
src: local('Courier New'), local('Courier');
font-display: swap;
ascent-override: 80%;
descent-override: 20%;
line-gap-override: 0%;
size-adjust: 124%;
}
@font-face {
font-family: 'JetBrains Mono';
src: local('JetBrains Mono');
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono Fallback';
src: local('Courier New'), local('Courier');
font-display: swap;
ascent-override: 78%;
descent-override: 22%;
line-gap-override: 0%;
size-adjust: 126%;
}
/* ===================== TOKENS ===================== */
.zm-home {
--orange: #ff671f;
--orange-dark: #e85c18;
--orange-light: #ff8e53;
--blue-light: #81c4ff;
--blue-dark: #2455ea;
--navy: #0d2c6e;
--ink: #1b2440;
--gray: #6b7785;
--paper: #f6f9fd;
--line: #e4ebf7;
--good: #138a5e;
--f-display: 'Sora', 'Sora Fallback', system-ui, -apple-system, sans-serif;
--f-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
--f-mono: 'Space Mono', 'Space Mono Fallback', ui-monospace, monospace;
--f-spec: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace;
font-family: var(--f-body);
color: var(--ink);
}
.zm-home *, .zm-home *::before, .zm-home *::after {
box-sizing: border-box;
}
.zm-home [ng-cloak] {
display: none;
}
.zm-home img {
max-width: 100%;
}
.zm-home a {
text-decoration: none;
}
.zm-home a:focus-visible, .zm-home button:focus-visible, .zm-home label:focus-visible,
.zm-home input:focus-visible, .zm-home select:focus-visible {
outline: 3px solid rgba(36, 85, 234, .5);
outline-offset: 2px;
}
.zm-home .zm-block {
margin-top: 50px;
padding: 10px;
}
@media (max-width: 767px) {
.zm-home .zm-block {
margin-top: 36px;
padding: 10px;
}
}
/* ===================== TITLES + EYEBROWS ===================== */
.zm-home .zm-kick {
display: block;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--blue-dark);
margin-bottom: 8px;
}
.zm-home .zmorda-title-wrapper {
display: flex;
align-items: center;
gap: 14px;
margin: 0;
}
.zm-home .zmorda-title-bar {
display: block;
width: 5px;
min-width: 5px;
height: 30px;
border-radius: 999px;
background: linear-gradient(180deg, var(--orange), var(--orange-light));
}
.zm-home .zmorda-main-title {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 800;
font-size: 28px;
line-height: 1.18;
color: var(--ink);
margin: 0;
letter-spacing: -.01em;
}
@media (max-width: 767px) {
.zm-home .zmorda-main-title {
font-size: 21px;
}
}
/* ===================== BUTTONS ===================== */
.zm-home .btn-thm {
background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
color: #fff;
border: 0;
border-radius: 10px;
height: 50px;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
transition: background-color .2s ease;
}
.zm-home .btn-thm:hover, .zm-home .btn-thm:focus {
background: linear-gradient(135deg, #ec5a14, #ff7d3a);
color: #fff;
}
.zm-home .zmorda-dark-btn {
background: var(--navy);
color: #fff;
border: 0;
border-radius: 10px;
height: 50px;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
transition: background-color .2s ease;
}
.zm-home .zmorda-dark-btn:hover, .zm-home .zmorda-dark-btn:focus {
background: #0a2358;
color: #fff;
}
.zm-home .reset-filter {
display: inline-flex;
align-items: center;
justify-content: center;
height: 50px;
width: 100%;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--paper);
color: var(--ink);
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 600;
font-size: 14px;
transition: border-color .2s, background-color .2s, color .2s;
}
.zm-home .reset-filter:hover {
border-color: var(--blue-dark);
color: var(--blue-dark);
background: rgba(36, 85, 234, .06);
}
/* ===================== WELCOME HERO (LCP-optimized: ![]()
+ CSS overlay) ===================== */
/* Banner lives outside .zm-home — full bleed */
.wp-media-banner-wrapper {
width: 100%;
overflow: hidden;
}
.wp-banner-desktop, .wp-banner-mobile {
position: relative;
overflow: hidden;
}
.wp-banner-desktop {
min-height: 320px;
}
.wp-banner-mobile {
min-height: 240px;
}
/* The actual ![]()
— fills the banner, acts as background */
.wp-banner-img {
display: block;
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
object-position: center;
}
/* Gradient overlay replaces the old linear-gradient() on background-image */
.wp-banner-overlay {
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45));
pointer-events: none;
}
.wp-banner-mobile .wp-banner-overlay {
background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.45));
}
/* Content positioned over the image */
.wp-banner-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
padding-bottom: 30px;
}
.wp-media-title {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 800;
color: #fff;
line-height: 1.08;
font-size: 44px;
margin: 0;
text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
@media (max-width: 767px) {
.wp-media-title {
font-size: 30px;
}
}
/* Search overlap — pull card over the banner */
.zmf-search-lift {
position: relative;
z-index: 2;
margin-top: -50px;
}
/* ===================== 1. PRE-SET FILTERS (search hub) ===================== */
/* (old .zm-hub / .zmorda-search removed — replaced by .zmf-search) */
/* (old .zm-filters / .selectpicker styles removed — replaced by .zmf-search native selects) */
/* ===================== 2. BODY TYPES ===================== */
/* (old .zm-bodygrid / .car-card removed — replaced by .zbt-section) */
/* ===================== 3. TUNISIAN PRE-SET FILTERS (compact cards) ===================== */
.zm-home .zm-presets {
display: grid;
grid-template-columns:repeat(auto-fill, minmax(228px, 1fr));
gap: 14px;
}
.zm-home .zm-preset {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 15px 16px;
cursor: pointer;
transition: border-color .2s ease, background-color .2s ease;
}
.zm-home .zm-preset:hover {
border-color: var(--orange);
background: rgba(255, 103, 31, .05);
}
.zm-home .zm-preset-ic {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(129, 196, 255, .16);
transition: background-color .2s ease;
}
.zm-home .zm-preset-ic svg {
stroke: var(--blue-dark);
transition: stroke .2s ease;
}
.zm-home .zm-preset:hover .zm-preset-ic {
background: rgba(255, 103, 31, .12);
}
.zm-home .zm-preset:hover .zm-preset-ic svg {
stroke: var(--orange);
}
.zm-home .zm-preset-tx {
display: flex;
flex-direction: column;
min-width: 0;
}
.zm-home .zm-preset-tx .t {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--ink);
line-height: 1.2;
}
.zm-home .zm-preset-tx .s {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 12px;
color: var(--gray);
margin-top: 2px;
}
@media (max-width: 560px) {
.zm-home .zm-presets {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
margin: 0 -4px;
padding-bottom: 8px;
}
.zm-home .zm-preset {
flex: 0 0 78%;
scroll-snap-align: start;
}
}
/* ===================== 4. CAR LIST ===================== */
.zm-home .listing_filter_row {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px;
}
.zm-home .page_control_shorting ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
justify-content: flex-end;
}
.zm-home .page_control_shorting .short_by_text {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 13px;
color: var(--gray);
}
.zm-home .zmorda-red-ornage-text-color {
color: var(--orange);
font-weight: 700;
font-family: 'Inter', 'Inter Fallback', sans-serif;
}
.zm-home .car-listing {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
height: 100%;
cursor: pointer;
transition: border-color .2s ease;
}
.zm-home .car-listing:hover {
border-color: var(--blue-dark);
}
.zm-home .car-listing .wrapper {
padding: 14px 14px 4px;
}
.zm-home .car-listing .title a, .zm-home .car-listing .title {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--ink);
line-height: 1.3;
}
.zm-home .car-listing .price {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--orange);
margin: 4px 0 0;
}
.zm-home .car-listing .thumb {
position: relative;
padding: 0 14px;
}
.zm-home .car-listing .thumb .tag {
position: absolute;
top: 10px;
left: 24px;
z-index: 2;
background: var(--navy);
color: #fff;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 12px;
font-weight: 700;
border-radius: 8px;
padding: 5px 10px;
}
.zm-home .car-listing .thmb_cntnt2, .zm-home .car-listing .thmb_cntnt3 {
position: absolute;
bottom: 14px;
z-index: 2;
}
.zm-home .car-listing .thmb_cntnt2 {
left: 24px;
}
.zm-home .car-listing .thmb_cntnt3 {
right: 24px;
}
.zm-home .car-listing .thmb_cntnt2 ul, .zm-home .car-listing .thmb_cntnt3 ul {
margin: 0;
padding: 0;
list-style: none;
}
.zm-home .car-listing .thmb_cntnt2 a {
background: rgba(13, 44, 110, .72);
color: #fff;
border-radius: 8px;
padding: 4px 9px;
font-size: 12px;
font-family: 'Inter', 'Inter Fallback', sans-serif;
}
.zm-home .car-listing .thmb_cntnt3 a {
display: inline-flex;
width: 34px;
height: 34px;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--gray);
transition: color .2s, border-color .2s;
}
.zm-home .car-listing .thmb_cntnt3 a:hover {
color: var(--orange);
border-color: var(--orange);
}
.zm-home .car-listing .fav-heart.is-fav {
color: var(--orange);
}
.zm-home .car-listing .details {
padding: 12px 14px 14px;
}
.zm-home .car-listing .details .sub_title {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 12.5px;
color: var(--gray);
margin: 0 0 3px;
line-height: 1.4;
}
.zm-home .car-listing .listing_footer {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.zm-home .car-listing .listing_footer ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.zm-home .car-listing .listing_footer a {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 12px;
color: var(--ink);
}
.zm-home .car-listing .listing_footer .list-inline-item {
margin: 0;
}
@media (max-width: 767px) {
.zm-home .zm-cars-track {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
margin: 0 -6px;
padding-bottom: 8px;
}
.zm-home .zm-cars-track > div {
flex: 0 0 80%;
float: none;
width: auto;
max-width: none;
scroll-snap-align: start;
padding: 0 6px;
}
}
.zm-home .inline-loader {
padding: 30px 0;
}
.zm-home .inline-spinner {
width: 38px;
height: 38px;
border: 3px solid var(--line);
border-top-color: var(--orange);
border-radius: 50%;
margin: 0 auto 14px;
animation: zm-spin .9s linear infinite;
}
@keyframes zm-spin {
to {
transform: rotate(360deg);
}
}
.zm-home .inline-title {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
color: var(--ink);
font-size: 16px;
margin: 0 0 4px;
}
.zm-home .inline-subtitle {
font-family: 'Inter', 'Inter Fallback', sans-serif;
color: var(--gray);
font-size: 13px;
margin: 0;
}
.zm-home .mbp_pagination .page_navigation {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
.zm-home .mbp_pagination .page-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
border: 1px solid var(--line);
border-radius: 10px;
color: var(--ink);
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 600;
background: #fff;
transition: border-color .2s, background-color .2s, color .2s;
}
.zm-home .mbp_pagination .page-link:hover {
border-color: var(--blue-dark);
color: var(--blue-dark);
}
.zm-home .mbp_pagination .active .page-link {
background: var(--navy);
border-color: var(--navy);
color: #fff;
}
.zm-home .mbp_pagination .disabled .page-link {
opacity: .4;
pointer-events: none;
}
/* ===================== 5. BUDGET COCKPIT (mid-page dark band) ===================== */
.zm-home .zbud {
position: relative;
overflow: hidden;
border-radius: 24px;
padding: 40px 44px;
background: linear-gradient(160deg, var(--navy) 0%, var(--blue-dark) 62%, #3a6ff5 100%);
}
.zm-home .zbud::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 90px);
}
.zm-home .zbud-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:1.1fr .9fr;
gap: 40px;
align-items: center;
padding: 10px;
}
.zm-home .zbud-eyebrow {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--blue-light);
}
.zm-home .zbud-title {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 800;
font-size: 34px;
line-height: 1.1;
color: #fff;
margin: 12px 0 12px;
letter-spacing: -.01em;
}
.zm-home .zbud-title .acc {
color: var(--orange-light);
}
.zm-home .zbud-sub {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 15px;
line-height: 1.6;
color: rgba(255, 255, 255, .82);
margin: 0 0 24px;
max-width: 30em;
}
.zm-home .zbud-terms {
display: flex;
gap: 8px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.zm-home .zbud-term {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: .04em;
color: rgba(255, 255, 255, .8);
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 10px;
padding: 8px 14px;
cursor: pointer;
transition: background-color .2s, color .2s, border-color .2s;
}
.zm-home .zbud-term:hover {
border-color: #fff;
color: #fff;
}
.zm-home .zbud-term.on {
background: var(--orange);
border-color: var(--orange);
color: #fff;
}
.zm-home .zbud-sliderwrap {
margin-bottom: 24px;
}
.zm-home .zbud-sliderhead {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
.zm-home .zbud-sliderhead .k {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 13px;
color: rgba(255, 255, 255, .7);
}
.zm-home .zbud-sliderhead .v {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
font-size: 20px;
color: #fff;
}
.zm-home .zbud-sliderhead .v i {
font-style: normal;
font-size: 12px;
color: var(--blue-light);
margin-left: 2px;
}
.zm-home .zbud-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
border-radius: 999px;
outline: none;
background: linear-gradient(90deg, var(--blue-light), var(--blue-dark) 55%, var(--orange));
}
.zm-home .zbud-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: #fff;
border: 5px solid var(--orange);
cursor: pointer;
}
.zm-home .zbud-range::-moz-range-thumb {
width: 26px;
height: 26px;
border-radius: 50%;
background: #fff;
border: 5px solid var(--orange);
cursor: pointer;
}
.zm-home .zbud-scale {
display: flex;
justify-content: space-between;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 10px;
color: rgba(255, 255, 255, .5);
margin-top: 8px;
letter-spacing: .04em;
}
.zm-home .zbud-cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
font-size: 15px;
color: #fff;
background: linear-gradient(135deg, var(--orange), var(--orange-light));
border: 0;
border-radius: 12px;
padding: 15px 26px;
cursor: pointer;
transition: background-color .2s;
}
.zm-home .zbud-cta:hover {
background: linear-gradient(135deg, #ec5a14, #ff7d3a);
color: #fff;
}
.zm-home .zbud-cta svg {
stroke: #fff;
}
.zm-home .zbud-gauge {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(8, 26, 68, .55);
border: 1px solid rgba(129, 196, 255, .25);
border-radius: 22px;
padding: 26px 20px 22px;
}
.zm-home .zbud-gauge svg {
display: block;
width: 100%;
max-width: 280px;
height: auto;
}
.zm-home .zbud-needle {
transition: transform .18s cubic-bezier(.2, .7, .3, 1);
transform-origin: 130px 135px;
}
.zm-home .zbud-readout {
text-align: center;
margin-top: -6px;
}
.zm-home .zbud-readout .lbl {
display: block;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--blue-light);
}
.zm-home .zbud-readout .val {
display: block;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
font-size: 34px;
color: #fff;
line-height: 1.1;
margin: 3px 0;
}
.zm-home .zbud-readout .val i {
font-style: normal;
font-size: 16px;
color: var(--orange-light);
margin-left: 3px;
}
.zm-home .zbud-readout .hint {
display: block;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 12px;
color: rgba(255, 255, 255, .6);
}
@media (max-width: 900px) {
.zm-home .zbud {
padding: 30px 22px;
}
.zm-home .zbud-grid {
grid-template-columns:1fr;
gap: 26px;
}
.zm-home .zbud-title {
font-size: 27px;
}
}
/* ===================== 6. SELL CARDS ===================== */
.zm-home .zmorda-sell-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
height: 100%;
transition: border-color .2s ease;
}
.zm-home .zmorda-sell-card:hover {
border-color: var(--blue-dark);
}
.zm-home .zmorda-sell-card .sell-desc {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--gray);
margin-top: 14px;
}
/* ===================== SEO SECTIONS ===================== */
.zm-home .zmorda-section-block {
margin-top: 30px;
}
.zm-home .zmorda-section-title {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--ink);
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.zm-home .zmorda-link-list {
list-style: none;
margin: 0;
padding: 0;
}
.zm-home .zmorda-link-list li {
margin: 0 0 8px;
}
.zm-home .zmorda-link-list a {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 13.5px;
color: var(--gray);
transition: color .2s ease;
}
.zm-home .zmorda-link-list a:hover {
color: var(--orange);
}
/* ===================== STICKY BAR ===================== */
.zm-home .mobile-sticky-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1030;
display: none;
gap: 10px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: #fff;
border-top: 1px solid var(--line);
}
@media (max-width: 767px) {
.zm-home .mobile-sticky-bar {
display: flex;
}
}
.zm-home .sticky-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
border-radius: 12px;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
font-size: 14px;
transition: background-color .2s, color .2s;
}
.zm-home .sticky-btn.primary {
background: linear-gradient(135deg, var(--orange), var(--orange-light));
color: #fff;
}
.zm-home .sticky-btn.primary:hover {
background: linear-gradient(135deg, #ec5a14, #ff7d3a);
}
.zm-home .sticky-btn.white {
background: var(--paper);
border: 1px solid var(--line);
color: var(--ink);
}
.zm-home .sticky-btn.white:hover {
border-color: var(--blue-dark);
color: var(--blue-dark);
}
/* ===================== SECTION HEAD (kicker + h2 + see-all) ===================== */
.zm-home .zmx-sectionhead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.zm-home .zmx-sectionhead.center {
justify-content: center;
text-align: center;
}
.zm-home .zmx-kicker {
display: block;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--blue-dark);
}
.zm-home .zmx-h2 {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 800;
font-size: 28px;
line-height: 1.15;
color: var(--ink);
margin: 6px 0 0;
letter-spacing: -.01em;
}
.zm-home .zmx-seeall {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--orange);
white-space: nowrap;
padding-bottom: 4px;
}
.zm-home .zmx-seeall:hover {
color: #ec5a14;
}
@media (max-width: 560px) {
.zm-home .zmx-h2 {
font-size: 21px;
}
.zm-home .zmx-sectionhead {
flex-wrap: wrap;
}
}
/* ===================== COCKPIT TABS ===================== */
.zm-home .zbud-radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.zm-home .zbud-modebar {
display: inline-flex;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
padding: 4px;
gap: 4px;
margin-bottom: 20px;
max-width: 100%;
}
.zm-home .zbud-modebtn {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
font-size: 13.5px;
color: rgba(255, 255, 255, .72);
padding: 9px 18px;
border-radius: 999px;
cursor: pointer;
transition: background-color .2s, color .2s;
user-select: none;
white-space: nowrap;
}
.zm-home .zbud-modebtn:hover {
color: #fff;
}
.zm-home #zbudBudget:checked ~ .zbud-modebar label[for="zbudBudget"],
.zm-home #zbudModel:checked ~ .zbud-modebar label[for="zbudModel"] {
background: #fff;
color: var(--navy);
}
.zm-home .zbud-panel {
display: none;
}
.zm-home #zbudBudget:checked ~ .zbud-panel-budget {
display: block;
}
.zm-home #zbudModel:checked ~ .zbud-panel-model {
display: block;
}
@media (max-width: 560px) {
.zm-home .zbud-modebar {
display: flex;
width: 100%;
}
.zm-home .zbud-modebtn {
flex: 1 1 0;
min-width: 0;
text-align: center;
white-space: normal;
padding: 10px 10px;
font-size: 12.5px;
line-height: 1.15;
}
}
.zm-home .zbud-selrow {
display: grid;
grid-template-columns:1fr 1fr;
gap: 12px;
margin-bottom: 14px;
}
.zm-home .zbud-select {
width: 100%;
height: 50px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .08);
color: #fff;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 14px;
padding: 0 14px;
cursor: pointer;
}
.zm-home .zbud-select option {
color: var(--ink);
}
.zm-home .zbud-cta--ghost {
background: #fff;
color: var(--navy);
}
.zm-home .zbud-cta--ghost:hover {
background: var(--blue-light);
color: var(--navy);
}
.zm-home .zbud-cta--ghost svg {
stroke: var(--navy);
}
@media (max-width: 560px) {
.zm-home .zbud-selrow {
grid-template-columns:1fr;
}
}
/* ===================== MOBILE GAUGE / PADDING FIXES ===================== */
.zm-home .zbud-grid > div {
min-width: 0;
}
.zm-home .zbud-gauge {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.zm-home .zbud-gauge svg {
display: block;
width: 100%;
max-width: 280px;
height: auto;
}
.zm-home .zbud-readout {
max-width: 100%;
}
.zm-home .zbud-readout .val {
overflow-wrap: break-word;
}
@media (max-width: 560px) {
.zm-home .zbud {
padding: 24px 16px;
}
.zm-home .zbud-gauge {
padding: 18px 12px 16px;
}
.zm-home .zbud-readout .val {
font-size: 26px;
}
.zm-home .zbud-title {
font-size: 24px;
}
}
/* ===================== COLLECTIONS RAIL ===================== */
.zm-home .zmx-rail {
display: flex;
flex-wrap: nowrap;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 4px 2px 10px;
margin: 0 -2px;
}
.zm-home .zmx-rail::-webkit-scrollbar {
height: 6px;
}
.zm-home .zmx-rail::-webkit-scrollbar-thumb {
background: var(--line);
border-radius: 999px;
}
.zm-home .zmx-col {
flex: 0 0 262px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 226px;
border-radius: 18px;
overflow: hidden;
padding: 22px;
color: #fff;
scroll-snap-align: start;
transition: filter .2s ease;
}
.zm-home .zmx-col::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 70px);
}
.zm-home .zmx-col:hover {
filter: brightness(1.07);
}
.zm-home .zmx-col-a {
background: linear-gradient(155deg, #ff671f, #ff8e53);
}
.zm-home .zmx-col-b {
background: linear-gradient(155deg, #0d2c6e, #2455ea);
}
.zm-home .zmx-col-c {
background: linear-gradient(155deg, #2455ea, #81c4ff);
}
.zm-home .zmx-col-d {
background: linear-gradient(155deg, #102a52, #0d2c6e);
}
.zm-home .zmx-col-e {
background: linear-gradient(155deg, #143b1f, #1f7a43);
}
.zm-home .zmx-col-ic {
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
opacity: .9;
}
.zm-home .zmx-col-ic svg {
stroke: #fff;
}
.zm-home .zmx-col-tag {
position: relative;
z-index: 2;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255, 255, 255, .85);
}
.zm-home .zmx-col-title {
position: relative;
z-index: 2;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 800;
font-size: 20px;
line-height: 1.15;
margin: 6px 0 12px;
}
.zm-home .zmx-col-go {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 7px;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
font-size: 13px;
color: #fff;
}
.zm-home .zmx-col-go svg {
stroke: #fff;
}
@media (max-width: 560px) {
.zm-home .zmx-col {
flex: 0 0 78%;
}
}
@media (prefers-reduced-motion: reduce) {
.zm-home *, .zm-home *::before, .zm-home *::after {
animation: none !important;
transition: none !important;
}
}
/* ============================================================
ZMORDA · SECTION « PAR CARROSSERIE »
Scoped under .zbt-section — no leakage, no box-shadow,
color-only hovers, pure CSS, Bootstrap-3 safe.
============================================================ */
.zbt-section {
padding: 30px 0 0 0;
color: var(--navy);
}
/* ---- Section head ---------------------------------------- */
.zbt-head {
max-width: 640px;
margin-bottom: 40px;
}
.zbt-kicker {
display: inline-block;
font-family: "Space Mono", "Space Mono Fallback", monospace;
font-size: 12px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--blue-dark);
margin-bottom: 14px;
}
.zbt-kicker::before {
content: "";
display: inline-block;
width: 26px;
height: 2px;
background: var(--blue-light);
vertical-align: middle;
margin-right: 10px;
transform: translateY(-2px);
}
.zbt-h2 {
font-family: "Sora", "Sora Fallback", sans-serif;
font-weight: 700;
font-size: clamp(26px, 3.4vw, 38px);
line-height: 1.12;
letter-spacing: -.01em;
margin: 0 0 12px;
color: var(--navy);
}
.zbt-sub {
font-family: "Inter", "Inter Fallback", sans-serif;
font-size: 16px;
line-height: 1.55;
color: var(--gray);
margin: 0;
}
/* ---- Grid ------------------------------------------------- */
.zbt-grid {
display: grid;
grid-template-columns:repeat(2, 1fr);
gap: 14px;
}
@media (min-width: 768px) {
.zbt-grid {
grid-template-columns:repeat(3, 1fr);
gap: 16px;
}
}
@media (min-width: 1200px) {
.zbt-grid {
grid-template-columns:repeat(5, 1fr);
}
}
/* 5th tile fills the lonely last row on small screens */
.zbt-grid > :nth-child(5) {
grid-column: span 2;
}
@media (min-width: 768px) {
.zbt-grid > :nth-child(5) {
grid-column: auto;
}
}
/* ---- Tile (the preserved link) --------------------------- */
.zbt-tile {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 6px;
min-height: 172px;
padding: 22px 16px 18px;
border: 1px solid var(--line);
border-radius: 18px;
background: #FFFFFF;
color: var(--navy);
text-decoration: none;
overflow: hidden;
transition: background-color .28s ease, border-color .28s ease, color .28s ease;
}
.zbt-tile:hover,
.zbt-tile:focus-visible {
background: var(--paper);
border-color: var(--blue-dark);
color: var(--blue-dark);
}
.zbt-tile:focus-visible {
outline: 3px solid rgba(36, 85, 234, .35);
outline-offset: 2px;
}
/* Artwork wrapper + shared "road" baseline (the signature) */
.zbt-art {
position: relative;
width: 100%;
margin: 0 auto auto;
padding-bottom: 16px;
display: flex;
justify-content: center;
}
.zbt-art img {
display: block;
width: 80px;
height: 80px;
object-fit: contain;
}
/* the road */
.zbt-art::after {
content: "";
position: absolute;
left: 6%;
right: 6%;
bottom: 2px;
height: 2px;
background-image: repeating-linear-gradient(90deg, currentColor 0 9px, transparent 9px 18px);
opacity: .28;
background-size: 18px 2px;
transition: opacity .28s ease;
}
.zbt-tile:hover .zbt-art::after,
.zbt-tile:focus-visible .zbt-art::after {
opacity: .55;
}
/* Labels */
.zbt-label {
font-family: "Sora", "Sora Fallback", sans-serif;
font-weight: 600;
font-size: 15.5px;
letter-spacing: -.005em;
text-align: center;
color: inherit;
}
.zbt-tag {
font-family: "Inter", "Inter Fallback", sans-serif;
font-size: 11.5px;
line-height: 1.2;
color: var(--gray);
text-align: center;
transition: color .28s ease;
}
.zbt-tile:hover .zbt-tag,
.zbt-tile:focus-visible .zbt-tag {
color: var(--blue-dark);
}
/* « Go » affordance — the only orange, appears on hover */
.zbt-go {
position: absolute;
top: 14px;
right: 14px;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
color: var(--orange);
opacity: 0;
transition: opacity .28s ease;
}
.zbt-go svg {
stroke: currentColor;
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.zbt-tile:hover .zbt-go,
.zbt-tile:focus-visible .zbt-go {
opacity: 1;
}
/* ---- Motion: staggered drive-in + ambient road ---------- */
@media (prefers-reduced-motion: no-preference) {
.zbt-tile {
opacity: 0;
animation: zbt-in .55s cubic-bezier(.22, .61, .36, 1) forwards;
}
.zbt-grid > :nth-child(1) {
animation-delay: .04s;
}
.zbt-grid > :nth-child(2) {
animation-delay: .10s;
}
.zbt-grid > :nth-child(3) {
animation-delay: .16s;
}
.zbt-grid > :nth-child(4) {
animation-delay: .22s;
}
.zbt-grid > :nth-child(5) {
animation-delay: .28s;
}
.zbt-art::after {
animation: zbt-road 5.5s linear infinite;
}
@keyframes zbt-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes zbt-road {
from {
background-position: 0 0;
}
to {
background-position: 18px 0;
}
}
}
.zmf-search {
padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 40px);
background: linear-gradient(180deg, #fff, var(--paper));
border: 1px solid var(--line);
border-radius: 24px;
}
.zmf-search, .zmf-search *, .zmf-search *::before, .zmf-search *::after {
box-sizing: border-box;
}
/* ---- header ---- */
.zmf-head {
text-align: center;
margin-bottom: 24px;
}
.zmf-kicker {
font: 700 12px/1 var(--f-mono);
text-transform: uppercase;
letter-spacing: .14em;
color: var(--blue-dark);
}
.zmf-title {
font: 800 clamp(24px, 5vw, 38px)/1.08 var(--f-display);
color: var(--navy);
letter-spacing: -.01em;
margin: 10px 0 0;
}
/* ---- AI hero ---- */
.zmf-ai {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1.5px solid var(--line);
border-radius: 18px;
padding: 6px 6px 6px 16px;
transition: border-color .2s ease;
}
.zmf-ai:focus-within {
border-color: var(--blue-dark);
}
.zmf-ai__spark {
flex: 0 0 auto;
animation: zmf-pulse 2.6s ease-in-out infinite;
}
@keyframes zmf-pulse {
0%, 100% {
opacity: .55;
}
50% {
opacity: 1;
}
}
.zmf-ai input {
flex: 1 1 auto;
min-width: 0;
min-height: 46px;
border: 0;
outline: 0;
background: transparent;
font: 500 16px/1.4 var(--f-body);
color: var(--ink);
}
.zmf-ai input::placeholder {
color: var(--gray);
opacity: 1;
}
.zmf-ai__go {
flex: 0 0 auto;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 14px;
background: var(--orange);
cursor: pointer;
transition: background-color .18s ease;
}
.zmf-ai__go:hover, .zmf-ai__go:focus-visible {
background: var(--orange-dark);
outline: none;
}
.zmf-sub {
text-align: center;
margin: 12px 0 0;
font: 400 13px/1.4 var(--f-mono);
color: var(--gray);
}
.zmf-badge {
display: inline-block;
margin-left: 6px;
padding: 3px 8px;
font: 700 11px/1 var(--f-mono);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--navy);
background: var(--blue-light);
border-radius: 6px;
}
/* ---- example chips ---- */
.zmf-chips {
display: flex;
gap: 8px;
margin: 16px 0 0;
overflow-x: auto;
padding-bottom: 2px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.zmf-chips::-webkit-scrollbar {
display: none;
}
.zmf-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 44px;
padding: 0 14px;
border: 1.5px solid var(--line);
border-radius: 999px;
background: var(--paper);
font: 500 13.5px/1 var(--f-body);
color: var(--ink);
white-space: nowrap;
cursor: pointer;
transition: border-color .18s ease, color .18s ease;
}
.zmf-chip svg {
color: var(--blue-dark);
}
.zmf-chip:hover, .zmf-chip:focus-visible {
border-color: var(--blue-dark);
color: var(--blue-dark);
outline: none;
}
/* ---- divider ---- */
.zmf-or {
display: flex;
align-items: center;
gap: 14px;
margin: 24px 0 18px;
}
.zmf-or::before, .zmf-or::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--line);
}
.zmf-or span {
font: 400 12px/1 var(--f-mono);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--gray);
}
/* ---- filter grid ---- */
.zmf-grid {
display: grid;
grid-template-columns:1fr 1fr;
gap: 14px 14px;
}
@media (min-width: 768px) {
.zmf-grid {
grid-template-columns:repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.zmf-grid {
grid-template-columns:repeat(6, 1fr);
}
}
.zmf-field {
display: flex;
flex-direction: column;
}
.zmf-label {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 6px;
font: 700 11px/1 var(--f-mono);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--gray);
}
.zmf-label svg {
color: var(--blue-dark);
}
.zmf-select {
position: relative;
}
.zmf-select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
min-height: 48px;
padding: 0 38px 0 14px;
border: 1.5px solid var(--line);
border-radius: 12px;
background: #fff;
font: 500 15px/1.2 var(--f-body);
color: var(--ink);
cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7785' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 13px center;
text-overflow: ellipsis;
transition: border-color .18s ease;
}
.zmf-select select:hover {
border-color: var(--blue-light);
}
.zmf-select select:focus {
border-color: var(--blue-dark);
outline: none;
}
/* ---- actions ---- */
.zmf-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 22px;
}
.zmf-reset {
order: 2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0 16px;
border: 1.5px solid var(--line);
border-radius: 12px;
background: #fff;
font: 600 14px/1 var(--f-body);
color: var(--blue-dark);
text-decoration: none;
transition: border-color .18s ease, color .18s ease;
}
.zmf-reset:hover, .zmf-reset:focus-visible {
border-color: var(--blue-dark);
color: var(--navy);
outline: none;
}
.zmf-submit {
order: 1;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 48px;
padding: 0 26px;
border: 0;
border-radius: 14px;
background: var(--orange);
color: #fff;
font: 700 15px/1 var(--f-display);
cursor: pointer;
transition: background-color .18s ease;
}
.zmf-submit:hover, .zmf-submit:focus-visible {
background: var(--orange-dark);
outline: none;
}
@media (min-width: 768px) {
.zmf-actions {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.zmf-reset {
order: 1;
}
.zmf-submit {
order: 2;
width: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.zmf-search *, .zmf-search *::before, .zmf-search *::after {
animation: none !important;
transition: none !important;
}
}