.trucks-page {
padding-bottom: 20px;
}
.trucks-page__intro {
margin: -6px 0 22px;
color: #5f6b75;
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 1.45;
} .truck-category-grid,
.truck-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin: 18px 0 28px;
}
.truck-category-card__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 12px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 42%);
color: #fff;
text-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}
.truck-category-card__meta {
padding: 10px 12px 0;
background: #fff;
color: #5f6b75;
}
.truck-category-card__title-wrap {
padding: 8px 12px 10px;
background: #fff;
}
.truck-category-card__media { overflow: hidden;
}
.truck-category-card__media img {
width: 100%;
height: 100%; object-fit: cover;
object-position: center center;
display: block;
transform: scale(0.92);
transform-origin: center center;
}
.truck-card__meta {
padding: 10px 12px 0;
background: #fff;
color: #5f6b75;
}
.truck-card__title-wrap {
padding: 8px 12px 10px;
background: #fff;
display: flex;
align-items: center;
gap: 10px;
}
.truck-card__brand-logo {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: 56px;
height: auto;
pointer-events: none;
}
.truck-dynamic-content.is-loading {
opacity: 0.6;
pointer-events: none;
}
.truck-category-card__badge {
margin-top: auto;
align-self: flex-start;
display: inline-block;
padding: 6px 10px;
background: rgba(194, 23, 30, 0.92);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
}
.truck-detail {
margin: 18px 0 28px;
} .truck-group-page__back {
display: inline-block;
margin-bottom: 18px;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 600;
}
.truck-group-page__back {
padding: 10px 14px;
border: 1px solid #d8dde3;
border-left: 4px solid #c2171e;
background: #fff;
color: #1f2933;
text-decoration: none;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.truck-group-page__back:hover,
.truck-group-page__back:focus {
transform: translateY(-1px);
border-color: #c9d2db;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
color: #c2171e;
}
.truck-detail__layout {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 24px;
align-items: start;
}
.truck-detail__media img {
width: 100%;
height: auto;
display: block;
border: 1px solid #6a6a6a;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}
.truck-detail__panel,
.truck-detail__specs {
background: #fff;
}
.truck-detail__panel {
border: 1px solid #d8dde3;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
padding: 18px;
}
.truck-detail__price {
margin: 14px 0 0;
padding: 14px 16px;
background: #c2171e;
color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 26px;
font-weight: 700;
}
.truck-detail__price small {
display: block;
font-size: 12px;
font-weight: 400;
margin-top: 4px;
}
.truck-detail__config {
margin-top: 12px;
font-family: 'Poppins', sans-serif;
font-size: 15px;
line-height: 1.5;
color: #1f2933;
}
.truck-detail__specs {
margin-top: 24px;
border: 1px solid #d8dde3;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
overflow: hidden;
}
.truck-specs-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.truck-specs-table th,
.truck-specs-table td {
border-bottom: 1px solid #e7ebef;
padding: 12px 14px;
vertical-align: top;
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 1.4;
}
.truck-specs-table th {
width: 38%;
text-align: left;
color: #1f2933;
background: #f7f9fb;
}
.truck-specs-table .section-row th {
background: linear-gradient(180deg, #111111 0%, #050505 100%);
color: #fff;
font-size: 13px;
letter-spacing: 0.04em;
border-top: 3px solid #c2171e;
}
.truck-group-page {
margin: 18px 0 28px;
}
.truck-group-page__header {
margin-bottom: 18px;
}
.truck-group-page__title {
margin: 0;
font-family: 'Poppins', sans-serif;
font-size: 28px;
line-height: 1.1;
width: fit-content;
}
.trucks-page__title {
width: fit-content;
}
.truck-group-page__subtitle {
margin-top: 6px;
color: #5f6b75;
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 1.45;
letter-spacing: 0.02em;
width: fit-content;
}
.truck-group-page__subgroup-title {
margin: 0 0 12px;
font-family: 'Poppins', sans-serif;
font-size: 18px;
line-height: 1.2;
color: #1f2933;
}
@media screen and (max-width: 900px) {
.truck-category-grid,
.truck-grid,
.truck-detail__layout {
grid-template-columns: 1fr;
}
.truck-category-card__title,
.truck-card__title,
.truck-detail__title,
.truck-group-page__title {
font-size: 20px;
}
}