:root { --ec-bg: #111315;
--ec-bg-glow: #363b41;
--ec-surface: #1a1d20;
--ec-surface-2: #22262a;
--ec-surface-3: #2b3035;
--ec-border: rgba(255, 255, 255, 0.08);
--ec-border-strong: rgba(255, 255, 255, 0.16);
--ec-green: #70f46d;
--ec-green-strong: #6fcb2e;
--ec-green-dark: #123008;
--ec-green-tint: rgba(112, 244, 109, 0.12);
--ec-text: #ffffff;
--ec-muted: rgba(255, 255, 255, 0.55);
--ec-faint: rgba(255, 255, 255, 0.38);
--ec-danger: #ff5d5d;
--ec-warning: #ffc857; --ec-r-pill: 999px;
--ec-r-card: 16px;
--ec-r-panel: 16px;
--ec-r-control: 12px;
--ec-r-small: 8px; --ec-gap: 24px;
--ec-section: 48px;
--ec-pad: 24px; --ec-font: 'SFProDisplay', 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--ec-fs-hero: clamp(34px, 5vw, 58px);
--ec-fs-h2: clamp(24px, 3vw, 34px);
--ec-fs-title: 19px;
--ec-fs-base: 16px;
--ec-fs-small: 14px; --ec-container: 1400px;
--ec-header-h: 76px; --ec-ease: 0.2s ease;
} @font-face {
font-family: 'SFProDisplay';
src: url(//showcars.kz/wp-content/themes/easycartheme/assets/fonts/San_Francisco_Pro_Display/SF-Pro-Display-Regular.otf) format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SFProDisplay';
src: url(//showcars.kz/wp-content/themes/easycartheme/assets/fonts/San_Francisco_Pro_Display/SF-Pro-Display-Medium.otf) format('opentype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SFProDisplay';
src: url(//showcars.kz/wp-content/themes/easycartheme/assets/fonts/San_Francisco_Pro_Display/SF-Pro-Display-Semibold.otf) format('opentype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SFProDisplay';
src: url(//showcars.kz/wp-content/themes/easycartheme/assets/fonts/San_Francisco_Pro_Display/SF-Pro-Display-Bold.otf) format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--ec-header-h) + 16px);
}
body {
margin: 0;
background-color: var(--ec-bg);
background-image:
radial-gradient(900px 520px at 50% -160px, rgba(54, 59, 65, 0.72) 0%, rgba(17, 19, 21, 0) 70%),
radial-gradient(700px 420px at 100% 0%, rgba(67, 73, 80, 0.22) 0%, rgba(67, 73, 80, 0) 65%);
background-repeat: no-repeat;
color: var(--ec-text);
font-family: var(--ec-font);
font-size: var(--ec-fs-base);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img,
svg,
video {
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--ec-ease);
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
h1,
h2,
h3,
h4 {
line-height: 1.15;
margin: 0 0 0.6em;
font-weight: 700;
}
:focus-visible {
outline: 2px solid var(--ec-green);
outline-offset: 2px;
border-radius: 4px;
}
::selection {
background: var(--ec-green);
color: #10240a;
}
.ec-visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.container {
width: 100%;
max-width: var(--ec-container);
margin: 0 auto;
padding: 0 24px;
}
.wrapper {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main {
flex: 1 0 auto;
padding-bottom: var(--ec-section);
}
.clear {
clear: both;
} .ec-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 22px;
border: 1px solid transparent;
border-radius: var(--ec-r-control);
background: var(--ec-green);
color: #10240a;
font-weight: 600;
font-size: var(--ec-fs-base);
line-height: 1.2;
cursor: pointer;
text-align: center;
transition: background var(--ec-ease), color var(--ec-ease), border-color var(--ec-ease), transform var(--ec-ease);
}
.ec-btn:hover {
background: var(--ec-green-strong);
color: #10240a;
}
.ec-btn:active {
transform: translateY(1px);
}
.ec-btn--ghost {
background: transparent;
color: var(--ec-text);
border-color: var(--ec-border-strong);
}
.ec-btn--ghost:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--ec-text);
}
.ec-btn--small {
padding: 9px 18px;
font-size: var(--ec-fs-small);
min-height: 36px;
}
.ec-btn[disabled],
button[disabled].ec-btn {
opacity: 0.55;
cursor: not-allowed;
}
.ec-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
border-radius: var(--ec-r-pill);
border: 1px solid var(--ec-border-strong);
background: var(--ec-surface-2);
color: var(--ec-muted);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
.ec-badge--green {
background: var(--ec-green-tint);
border-color: rgba(112, 244, 109, 0.35);
color: var(--ec-green);
}
.ec-input,
.ec-select,
.ec-textarea,
.wp-login-form input[type='text'],
.wp-login-form input[type='password'] {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--ec-border);
border-radius: var(--ec-r-control);
background: var(--ec-surface-2);
color: var(--ec-text);
transition: border-color var(--ec-ease), background var(--ec-ease);
}
.ec-input::placeholder {
color: var(--ec-faint);
}
.ec-input:focus,
.ec-select:focus,
.ec-textarea:focus,
.wp-login-form input[type='text']:focus,
.wp-login-form input[type='password']:focus {
outline: none;
border-color: rgba(112, 244, 109, 0.5);
background: var(--ec-surface-3);
}
.ec-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
cursor: pointer;
}
.ec-textarea {
min-height: 96px;
resize: vertical;
} .ec-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(17, 19, 21, 0.82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--ec-border);
}
.ec-header__inner {
display: flex;
align-items: center;
gap: 28px;
min-height: var(--ec-header-h);
}
.ec-logo {
display: inline-flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.ec-logo__image {
display: block;
width: 245px;
height: auto;
max-width: 100%;
}
.ec-nav {
margin-left: 8px;
}
.ec-nav ul,
.ec-mobile-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 6px;
}
.ec-nav a,
.ec-mobile-menu a {
display: inline-block;
padding: 10px 16px;
border-radius: var(--ec-r-pill);
color: var(--ec-muted);
font-weight: 500;
font-size: var(--ec-fs-base);
}
.ec-nav a:hover,
.ec-nav .current-menu-item > a,
.ec-nav .current_page_item > a {
color: var(--ec-text);
background: rgba(255, 255, 255, 0.06);
}
.ec-header__controls {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
.ec-lang {
position: relative;
}
.ec-lang summary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
border: 1px solid var(--ec-border);
border-radius: var(--ec-r-pill);
background: transparent;
color: var(--ec-muted);
font-size: var(--ec-fs-small);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
list-style: none;
transition: color var(--ec-ease), border-color var(--ec-ease);
}
.ec-lang summary::-webkit-details-marker {
display: none;
}
.ec-lang summary::after {
content: '';
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform var(--ec-ease);
}
.ec-lang[open] summary::after {
transform: rotate(-135deg) translateY(-1px);
}
.ec-lang[open] summary,
.ec-lang summary:hover {
color: var(--ec-text);
border-color: var(--ec-border-strong);
}
.ec-lang__list {
position: absolute;
right: 0;
top: calc(100% + 8px);
min-width: 100%;
margin: 0;
padding: 6px;
list-style: none;
background: var(--ec-surface-2);
border: 1px solid var(--ec-border);
border-radius: var(--ec-r-control);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
z-index: 60;
}
.ec-lang__list a {
display: block;
padding: 8px 14px;
border-radius: var(--ec-r-small);
color: var(--ec-muted);
font-size: var(--ec-fs-small);
white-space: nowrap;
}
.ec-lang__list a:hover {
color: var(--ec-text);
background: rgba(255, 255, 255, 0.06);
}
.ec-lang__list .current-lang a {
color: var(--ec-green);
}
.ec-iconbtn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid var(--ec-border);
border-radius: var(--ec-r-pill);
background: transparent;
color: var(--ec-muted);
cursor: pointer;
transition: color var(--ec-ease), border-color var(--ec-ease), background var(--ec-ease);
}
.ec-iconbtn:hover,
.ec-iconbtn.is-active {
color: var(--ec-green);
border-color: rgba(112, 244, 109, 0.4);
background: var(--ec-green-tint);
}
.ec-iconbtn svg {
width: 20px;
height: 20px;
}
.ec-iconbtn__count {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--ec-r-pill);
background: var(--ec-green);
color: #10240a;
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
}
.ec-iconbtn__count[hidden] {
display: none;
}
.ec-burger {
display: none;
position: relative;
width: 42px;
height: 42px;
border: 1px solid var(--ec-border);
border-radius: var(--ec-r-control);
background: transparent;
cursor: pointer;
}
.ec-burger span,
.ec-burger::before,
.ec-burger::after {
content: '';
position: absolute;
left: 11px;
width: 20px;
height: 2px;
border-radius: 2px;
background: var(--ec-text);
transition: transform var(--ec-ease), opacity var(--ec-ease);
}
.ec-burger::before {
top: 14px;
}
.ec-burger span {
top: 20px;
}
.ec-burger::after {
top: 26px;
}
body.is-menu-open .ec-burger::before {
transform: translateY(6px) rotate(45deg);
}
body.is-menu-open .ec-burger span {
opacity: 0;
}
body.is-menu-open .ec-burger::after {
transform: translateY(-6px) rotate(-45deg);
}
.ec-mobile-menu {
display: none;
border-top: 1px solid var(--ec-border);
background: rgba(17, 19, 21, 0.97);
}
.ec-mobile-menu .ec-mobile-menu__controls {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 24px 20px;
}
.ec-mobile-menu ul {
flex-direction: column;
align-items: stretch;
gap: 2px;
padding: 12px 16px;
}
.ec-mobile-menu a {
display: block;
padding: 12px 14px;
border-radius: var(--ec-r-control);
}
body.is-menu-open .ec-mobile-menu {
display: block;
} .ec-hero {
padding: clamp(40px, 7vw, 88px) 0 clamp(24px, 4vw, 44px);
text-align: center;
}
.ec-hero__title {
margin: 0 auto;
max-width: 820px;
font-size: var(--ec-fs-hero);
font-weight: 700;
letter-spacing: -0.01em;
}
.ec-hero__title .accent {
color: var(--ec-green);
white-space: nowrap;
}
.ec-hero__subtitle {
margin: 14px 0 0;
color: var(--ec-muted);
font-size: clamp(15px, 2vw, 19px);
} .ec-filters {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
align-items: center;
gap: 18px;
margin: 0 0 20px;
padding: 16px 18px;
border: 1px solid var(--ec-border);
border-radius: var(--ec-r-panel);
background: var(--ec-surface);
}
.ec-filters__pills {
display: flex;
grid-column: 1 / -1;
flex-wrap: nowrap;
overflow-x: auto;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
scrollbar-width: none;
}
.ec-filters__pills::-webkit-scrollbar {
display: none;
}
.ec-pill {
display: inline-flex;
align-items: center;
padding: 10px 20px;
border: 1px solid var(--ec-border);
border-radius: var(--ec-r-pill);
background: var(--ec-surface);
color: var(--ec-muted);
font-size: var(--ec-fs-small);
font-weight: 500;
transition: color var(--ec-ease), background var(--ec-ease), border-color var(--ec-ease);
white-space: nowrap;
}
.ec-pill:hover {
color: var(--ec-text);
border-color: var(--ec-border-strong);
}
.ec-pill.is-active {
background: var(--ec-green);
border-color: var(--ec-green);
color: #10240a;
font-weight: 600;
}
.ec-filters__row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
align-items: center;
gap: 10px;
}
.ec-filters__row > label {
display: grid;
gap: 6px;
color: var(--ec-muted);
font-size: var(--ec-fs-small);
}
.ec-filters__row > .ec-btn {
align-self: end;
}
.ec-search {
position: relative;
flex: 1 1 260px;
max-width: none;
}
.ec-search .ec-input {
padding-left: 42px;
}
.ec-search svg {
position: absolute;
left: 15px;
top: 50%;
width: 17px;
height: 17px;
transform: translateY(-50%);
color: var(--ec-faint);
pointer-events: none;
}
.ec-filters__sort {
display: inline-flex;
align-items: center;
gap: 10px;
margin-left: auto;
color: var(--ec-muted);
font-size: var(--ec-fs-small);
}
.ec-sort-label {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.ec-sort-icon {
width: 16px;
height: 16px;
color: var(--ec-faint);
}
.ec-filters__sort .ec-select {
width: auto;
min-width: 190px;
padding-top: 11px;
padding-bottom: 11px;
}
.ec-count {
margin: 0;
color: var(--ec-muted);
font-size: var(--ec-fs-small);
}
.ec-results-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 0 18px;
}
.ec-count strong {
color: var(--ec-text);
font-weight: 600;
} .ec-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ec-gap);
margin: 0 0 32px;
padding: 0;
list-style: none;
}
.ec-card {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--ec-border);
border-radius: var(--ec-r-card);
background: var(--ec-surface);
overflow: hidden;
transition: border-color var(--ec-ease), box-shadow var(--ec-ease);
}
.ec-card:hover {
border-color: var(--ec-border-strong);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.ec-card__media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--ec-surface-2);
}
.ec-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ec-card__media--empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--ec-faint);
}
.ec-card__media--empty svg {
width: 64px;
height: 64px;
}
.ec-favbtn {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--ec-border);
border-radius: var(--ec-r-pill);
background: rgba(11, 13, 12, 0.65);
color: var(--ec-muted);
cursor: pointer;
transition: color var(--ec-ease), border-color var(--ec-ease), background var(--ec-ease);
}
.ec-favbtn svg {
width: 19px;
height: 19px;
}
.ec-favbtn:hover {
color: var(--ec-green);
border-color: rgba(112, 244, 109, 0.45);
}
.ec-favbtn.is-active {
color: var(--ec-green);
border-color: rgba(112, 244, 109, 0.45);
background: rgba(18, 48, 8, 0.72);
}
.ec-favbtn.is-active svg path {
fill: currentColor;
}
.ec-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 10px;
padding: 18px 20px 20px;
}
.ec-card__title {
margin: 0;
font-size: var(--ec-fs-title);
font-weight: 700;
line-height: 1.25;
}
.ec-card__title a:hover {
color: var(--ec-green);
}
.ec-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.ec-card__specs {
margin: -4px 0 0;
color: var(--ec-muted);
font-size: var(--ec-fs-small);
}
.ec-card__terms {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 18px;
margin: 6px 0 0;
padding: 4px 0 8px;
}
.ec-card__term {
display: flex;
align-items: center;
gap: 12px;
color: var(--ec-muted);
font-size: 13.5px;
}
.ec-card__term svg {
width: 17px;
height: 17px;
color: var(--ec-text);
flex: 0 0 auto;
}
.ec-card__provider {
display: flex;
align-items: center;
gap: 10px;
margin: 4px 0 0;
padding: 14px 0;
border-top: 1px solid var(--ec-border);
border-bottom: 1px solid var(--ec-border);
color: var(--ec-muted);
font-size: 13px;
}
.ec-card__provider-avatar {
display: inline-block;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--ec-text);
flex: 0 0 auto;
}
.ec-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: auto;
padding-top: 18px;
}
.ec-price {
color: var(--ec-green);
font-size: 24px;
font-weight: 700;
line-height: 1;
}
.ec-price-unit {
color: var(--ec-muted);
font-size: 15px;
font-weight: 500;
}
.ec-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 0 0 auto;
border-radius: var(--ec-r-control);
}
.ec-card__btn svg {
width: 16px;
height: 16px;
}
@media (max-width: 560px) {
.ec-card__terms {
grid-template-columns: minmax(0, 1fr);
}
.ec-card__foot {
align-items: stretch;
flex-direction: column;
}
.ec-card__foot .ec-btn {
width: 100%;
}
} body.ec-favs-only .ec-card:not(.is-favorite) {
display: none;
}
.ec-empty {
padding: 56px 24px;
border: 1px dashed var(--ec-border-strong);
border-radius: var(--ec-r-card);
background: var(--ec-surface);
text-align: center;
color: var(--ec-muted);
}
.ec-empty .ec-btn {
margin-top: 16px;
} .ec-pagination {
margin: 8px 0 0;
}
.ec-pagination ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.ec-pagination a,
.ec-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 14px;
border: 1px solid var(--ec-border);
border-radius: var(--ec-r-pill);
background: var(--ec-surface);
color: var(--ec-muted);
font-weight: 500;
transition: color var(--ec-ease), border-color var(--ec-ease), background var(--ec-ease);
}
.ec-pagination a:hover {
color: var(--ec-text);
border-color: var(--ec-border-strong);
}
.ec-pagination .current {
background: var(--ec-green);
border-color: var(--ec-green);
color: #10240a;
font-weight: 600;
} .ec-single {
padding-top: 24px;
}
.ec-breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 22px;
color: var(--ec-faint);
font-size: var(--ec-fs-small);
}
.ec-breadcrumbs a {
color: var(--ec-muted);
}
.ec-breadcrumbs a:hover {
color: var(--ec-green);
}
.ec-breadcrumbs .sep {
opacity: 0.5;
}
.ec-single__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
margin-bottom: 26px;
}
.ec-single__title {
margin: 0 0 12px;
font-size: clamp(26px, 3.6vw, 40px);
font-weight: 700;
}
.ec-single__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ec-single__price {
text-align: right;
white-space: nowrap;
}
.ec-single__price .ec-price {
font-size: 34px;
}
.ec-single__price-label {
display: block;
margin-top: 4px;
color: var(--ec-muted);
font-size: var(--ec-fs-small);
}
.ec-single__body {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
grid-template-areas:
'gallery entry'
'gallery specs'
'gallery contact';
align-items: start;
gap: 20px 28px;
margin-bottom: var(--ec-section);
}
.ec-single__body > * {
min-width: 0;
}
.ec-single__body .easycar-gallery {
grid-area: gallery;
position: sticky;
top: calc(var(--ec-header-h) + 16px);
}
.ec-single__body .easycar-entry-content {
grid-area: entry;
}
.ec-single__body .easycar-specs {
grid-area: specs;
}
.ec-single__body .easycar-contacts {
grid-area: contact;
margin: 0;
} .ec-page {
padding: 34px 0 var(--ec-section);
}
body.easycar-dark-page .ec-page {
padding: 34px var(--ec-pad, 24px) 0;
}
.ec-page__title {
font-size: clamp(26px, 3.4vw, 38px);
margin-bottom: 22px;
}
.ec-404 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 46vh;
padding: 60px 0;
}
.ec-404__code {
margin: 0 0 8px;
font-size: clamp(72px, 12vw, 140px);
font-weight: 700;
line-height: 1;
color: var(--ec-green);
}
.ec-404__text {
max-width: 460px;
margin: 0 0 24px;
color: var(--ec-muted);
} .ec-search-results {
display: grid;
gap: 14px;
}
.ec-search-result {
border: 1px solid var(--ec-border);
border-radius: var(--ec-r-panel);
background: var(--ec-surface);
padding: 18px 22px;
}
.ec-search-result h2 {
margin: 0 0 6px;
font-size: 18px;
}
.ec-search-result h2 a:hover {
color: var(--ec-green);
}
.ec-search-result p {
margin: 0;
color: var(--ec-muted);
font-size: var(--ec-fs-small);
} .ec-footer {
flex-shrink: 0;
border-top: 1px solid var(--ec-border);
background: rgba(10, 7, 8, 0.6);
padding: 36px 0;
}
.ec-footer__top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}
.ec-footer .ec-logo__image {
width: 220px;
}
.ec-footer__menu ul {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
margin: 0;
padding: 0;
list-style: none;
}
.ec-footer__menu a {
color: var(--ec-muted);
font-size: var(--ec-fs-small);
}
.ec-footer__menu a:hover {
color: var(--ec-green);
}
.ec-footer__support {
margin: 0;
}
.ec-footer__support a {
color: var(--ec-muted);
font-size: var(--ec-fs-small);
}
.ec-footer__support a:hover {
color: var(--ec-green);
}
.ec-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-top: 18px;
border-top: 1px solid var(--ec-border);
color: var(--ec-faint);
font-size: 13px;
} @media (max-width: 1180px) {
.ec-nav a {
padding: 10px 12px;
}
}
@media (max-width: 1024px) {
:root {
--ec-gap: 18px;
}
.ec-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ec-single__body {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
'gallery'
'entry'
'specs'
'contact';
gap: 26px;
}
.ec-single__body .easycar-gallery {
position: static;
}
}
@media (max-width: 860px) {
.ec-filters {
grid-template-columns: minmax(0, 1fr);
}
.ec-filters__row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ec-nav,
.ec-header__controls {
display: none;
}
.ec-burger {
display: block;
margin-left: auto;
}
.ec-header__inner {
justify-content: space-between;
}
}
@media (max-width: 560px) {
.container {
padding: 0 16px;
}
.ec-grid {
grid-template-columns: minmax(0, 1fr);
}
.ec-filters__row {
grid-template-columns: minmax(0, 1fr);
}
.ec-filters__sort {
margin-left: 0;
width: 100%;
}
.ec-results-head {
align-items: stretch;
flex-direction: column;
gap: 10px;
}
.ec-filters__sort .ec-select {
flex: 1 1 auto;
}
.ec-single__head {
flex-direction: column;
align-items: flex-start;
}
.ec-single__price {
text-align: left;
}
.ec-footer__top,
.ec-footer__bottom {
flex-direction: column;
align-items: flex-start;
}
body.easycar-dark-page .ec-page {
padding-inline: 16px;
}
} @media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
} body.admin-bar .ec-header {
top: 32px;
}
@media (max-width: 782px) {
body.admin-bar .ec-header {
top: 46px;
}
}