:root {
--imperial-card-accent: #deb624;
--imperial-card-ink: #02092b;
--imperial-card-rate: #02092b;
--imperial-card-muted: #555;
--imperial-card-border: #e4e4e4;
} .vechicle .overlay-shadow,
.vechicle-single .overlay-shadow,
.imperial-vehicle-card .overlay-shadow,
li.product .overlay-shadow,
.vechicle .overlay-content,
.vechicle-single .overlay-content,
.imperial-vehicle-card .overlay-content,
li.product .overlay-content {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
} body.page-template-Home-page .essentials-filters-content .vechicle .cars-button-link {
display: flex !important;
flex-direction: column;
gap: 8px;
}
body.page-template-Home-page .essentials-filters-content .vechicle .cars-button-link > a {
display: flex !important;
width: 100% !important;
min-width: 0;
min-height: 42px;
margin: 0 !important;
padding: 10px 8px !important;
align-items: center;
justify-content: center;
color: #fff !important;
background: var(--imperial-card-ink) !important;
border: 1px solid var(--imperial-card-ink) !important;
line-height: 1.2;
text-align: center;
}
body.page-template-Home-page .essentials-filters-content .vechicle .cars-button-link > a:hover,
body.page-template-Home-page .essentials-filters-content .vechicle .cars-button-link > a:focus {
color: var(--imperial-card-ink) !important;
background: var(--imperial-card-accent) !important;
border-color: var(--imperial-card-accent) !important;
}
.products.imperial-vehicle-grid,
.fleets-listing-vechicles.grid-layout > .row {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 30px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
align-items: stretch !important;
}
.products.imperial-vehicle-grid::before,
.products.imperial-vehicle-grid::after,
.fleets-listing-vechicles > .row::before,
.fleets-listing-vechicles > .row::after {
display: none !important;
content: none !important;
}
.products.imperial-vehicle-grid > .imperial-vehicle-card,
.fleets-listing-vechicles .imperial-vehicle-card {
display: flex !important;
position: relative;
float: none !important;
clear: none !important;
width: 100% !important;
min-width: 0;
max-width: none !important;
height: 100%;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
flex-direction: column;
background: #fff;
border: 1px solid var(--imperial-card-border);
box-shadow: 0 8px 24px rgba(2, 9, 43, .08);
list-style: none;
}
.imperial-vehicle-card__rate span {
color: #555 !important;
} .fleets-listing-vechicles.grid-layout > .row > [ng-repeat] {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.fleets-listing-vechicles.grid-layout > .row > [ng-repeat] > [data-ng-if="postView == 'grid'"] {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.fleets-listing-vechicles.grid-layout .vechicle-single {
display: flex !important;
float: none !important;
clear: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
flex-direction: column;
background: #fff;
border: 1px solid var(--imperial-card-border);
box-shadow: 0 8px 24px rgba(2, 9, 43, .08);
}
.fleets-listing-vechicles.grid-layout .vechicle-thumbnail {
display: block !important;
float: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
aspect-ratio: 3 / 2;
margin: 0 !important;
overflow: hidden;
background: #fff;
}
.fleets-listing-vechicles.grid-layout .vechicle-thumbnail .overlay {
width: 100% !important;
height: 100% !important;
}
.fleets-listing-vechicles.grid-layout .vechicle-thumbnail img {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 10px !important;
object-fit: contain !important;
object-position: center !important;
}
.fleets-listing-vechicles.grid-layout .vechicle-specification {
display: flex !important;
float: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
flex: 1 1 auto;
flex-direction: column;
}
.fleets-listing-vechicles.grid-layout .vechicle-header,
.fleets-listing-vechicles.grid-layout .properties {
float: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
.fleets-listing-vechicles.grid-layout .vechicle-header {
padding: 18px 18px 14px !important;
}
.fleets-listing-vechicles.grid-layout .vechicle-header .header-inner,
.fleets-listing-vechicles.grid-layout .vechicle-header .title {
width: 100% !important;
min-width: 0 !important;
}
.fleets-listing-vechicles.grid-layout .vechicle-header .title {
min-height: 50px;
margin: 0 0 12px !important;
overflow-wrap: anywhere;
}
.fleets-listing-vechicles.grid-layout .properties {
display: flex !important;
margin: 0 !important;
padding: 0 18px 18px !important;
gap: 0;
flex: 1 1 auto;
flex-direction: column;
}
.fleets-listing-vechicles.grid-layout .properties > li {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 8px 0 !important;
align-items: baseline;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid #eee;
overflow-wrap: anywhere;
}
.fleets-listing-vechicles.grid-layout .properties > li strong {
flex: 0 0 auto;
margin-left: auto;
text-align: right;
}
.fleets-listing-vechicles.grid-layout .cars-button-link {
display: block !important;
float: none !important;
width: 100% !important;
margin: auto 0 0 !important;
padding: 0 18px 18px !important;
}
.fleets-listing-vechicles.grid-layout .cars-button-link .btn {
display: flex !important;
width: 100% !important;
min-height: 46px;
margin: 0 !important;
align-items: center;
justify-content: center;
color: #fff !important;
background: var(--imperial-card-ink) !important;
border: 1px solid var(--imperial-card-ink) !important;
}
.fleets-listing-vechicles.grid-layout > .row > .fleets-listing-footer,
.fleets-listing-vechicles.grid-layout > .row > .loading,
.fleets-listing-vechicles.grid-layout > .row > .alert {
grid-column: 1 / -1 !important;
width: 100% !important;
}
.imperial-vehicle-card__media {
display: block;
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
background: #fff;
}
.imperial-vehicle-card__image {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
object-fit: contain !important;
object-position: center !important;
}
.imperial-vehicle-card__offer {
position: absolute;
z-index: 2;
top: 8px;
right: 8px;
padding: 8px 10px;
color: #2a2a2a;
background: var(--imperial-card-accent);
font-size: 12px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
.imperial-vehicle-card__body {
display: flex;
flex: 1 1 auto;
min-width: 0;
padding: 22px;
flex-direction: column;
}
.imperial-vehicle-card__title {
min-height: 54px;
margin: 0 0 14px !important;
color: #333;
font-size: 22px;
line-height: 1.25;
overflow-wrap: anywhere;
text-transform: uppercase;
}
.imperial-vehicle-card__title a {
color: inherit;
}
.imperial-vehicle-card__title a:hover,
.imperial-vehicle-card__title a:focus {
color: var(--imperial-card-accent) !important;
}
.imperial-vehicle-card__rates {
display: flex;
margin: 0 0 18px;
gap: 5px;
flex-direction: column;
}
.imperial-vehicle-card__rate {
display: flex;
align-items: baseline;
gap: 7px;
line-height: 1.25;
}
.imperial-vehicle-card__rate strong {
color: var(--imperial-card-rate);
font-size: 18px;
font-weight: 700;
}
.imperial-vehicle-card__rate span {
color: #c7c7c7;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.imperial-vehicle-card__facts {
display: flex;
margin: 0 0 22px;
gap: 8px;
flex-direction: column;
}
.imperial-vehicle-card__facts > div {
display: flex;
justify-content: space-between;
gap: 12px;
}
.imperial-vehicle-card__facts dt,
.imperial-vehicle-card__facts dd {
margin: 0;
}
.imperial-vehicle-card__facts dt {
color: var(--imperial-card-muted);
}
.imperial-vehicle-card__facts dd {
color: #333;
font-weight: 700;
text-align: right;
}
.imperial-vehicle-card__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: auto;
}
.imperial-vehicle-card__button {
display: flex !important;
min-height: 46px;
padding: 12px 14px !important;
align-items: center;
justify-content: center;
color: #fff !important;
background: var(--imperial-card-ink) !important;
border: 1px solid var(--imperial-card-ink) !important;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
}
.imperial-vehicle-card__button--primary {
color: #fff !important;
background: var(--imperial-card-ink) !important;
}
.imperial-vehicle-card__button:hover,
.imperial-vehicle-card__button:focus {
color: var(--imperial-card-ink) !important;
background: var(--imperial-card-accent) !important;
border-color: var(--imperial-card-accent) !important;
}
.imperial-catalog-empty {
display: block;
margin: 30px 0;
}
@media (max-width: 1199px) {
.products.imperial-vehicle-grid,
.fleets-listing-vechicles.grid-layout > .row {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 767px) {
.products.imperial-vehicle-grid,
.fleets-listing-vechicles.grid-layout > .row {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.imperial-vehicle-card__body {
padding: 20px;
}
.imperial-vehicle-card__title {
min-height: 0;
font-size: 20px;
}
.imperial-vehicle-card__actions {
grid-template-columns: 1fr;
}
.fleets-listing-vechicles.grid-layout .vechicle-header .title {
min-height: 0;
}
} @media (min-width: 768px) {
body:not(.page-template-Home-page) .products.imperial-vehicle-grid {
display: block !important;
}
body:not(.page-template-Home-page) .products.imperial-vehicle-grid > .imperial-vehicle-card {
display: grid !important;
grid-template-columns: 25% minmax(0, 1fr);
width: 100% !important;
min-height: 272px;
height: auto;
margin: 0 0 24px !important;
overflow: hidden;
background: #f3f3f3;
border: 0;
border-bottom: 5px solid var(--imperial-card-accent);
box-shadow: none;
}
body:not(.page-template-Home-page) .products.imperial-vehicle-grid > .imperial-vehicle-card > .imperial-vehicle-card__media {
width: 100%;
height: 100%;
min-height: 267px;
aspect-ratio: auto;
align-self: stretch;
background: #f3f3f3;
}
body:not(.page-template-Home-page) .products.imperial-vehicle-grid .imperial-vehicle-card__image {
padding: 18px !important;
object-fit: contain !important;
object-position: center !important;
}
body:not(.page-template-Home-page) .products.imperial-vehicle-grid .imperial-vehicle-card__body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"title rates"
"facts facts"
"actions actions";
grid-template-rows: auto 1fr auto;
column-gap: 30px;
row-gap: 16px;
min-width: 0;
padding: 22px 24px 18px;
}
body:not(.page-template-Home-page) .products.imperial-vehicle-grid .imperial-vehicle-card__title {
grid-area: title;
min-height: 0;
margin: 0 !important;
align-self: start;
}
body:not(.page-template-Home-page) .products.imperial-vehicle-grid .imperial-vehicle-card__rates {
grid-area: rates;
min-width: 170px;
margin: 0;
align-self: start;
}
body:not(.page-template-Home-page) .products.imperial-vehicle-grid .imperial-vehicle-card__facts {
display: grid;
grid-area: facts;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0;
column-gap: 36px;
row-gap: 8px;
align-content: start;
}
body:not(.page-template-Home-page) .products.imperial-vehicle-grid .imperial-vehicle-card__facts > div {
padding: 7px 0;
border-bottom: 1px solid #dedede;
}
body:not(.page-template-Home-page) .products.imperial-vehicle-grid .imperial-vehicle-card__actions {
display: flex;
grid-area: actions;
margin-top: 0;
justify-content: flex-end;
gap: 10px;
}
body:not(.page-template-Home-page) .products.imperial-vehicle-grid .imperial-vehicle-card__button {
width: 150px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
body:not(.page-template-Home-page) .products.imperial-vehicle-grid > .imperial-vehicle-card {
grid-template-columns: 32% minmax(0, 1fr);
}
body:not(.page-template-Home-page) .products.imperial-vehicle-grid .imperial-vehicle-card__body {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"rates"
"facts"
"actions";
gap: 12px;
}
body:not(.page-template-Home-page) .products.imperial-vehicle-grid .imperial-vehicle-card__facts {
grid-template-columns: 1fr;
}
}