/* Extracted CSS from main.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
.container {
display: flex;
min-height: 100vh;
}
/* Стили для верхней навигации */
.top-nav {
display: none;
background: #1e3a8a;
color: white;
padding: 15px 20px;
position: fixed;
width: 100%;
top: 0;
z-index: 100;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.top-nav-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile-menu-btn {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
}
/* убираем подчеркивание у ссылок */
a {
text-decoration: none; /* Отменяем подчеркивание у ссылки */
}
/* убираем почеркивание у ссылок */
/* Стили для бокового меню */
/* Стили для бокового меню */
.sidebar {
width: 250px;
background: radial-gradient(80% 60% at 20% 15%, #2b3a5a 0%, #2e2482 45%, #0d101a 100%);
color: white;
padding: 20px 0;
flex-shrink: 0;
position: fixed; /* Фиксированное положение */
height: 100vh; /* Высота на весь экран */
overflow-y: auto; /* Прокрутка если контента много */
z-index: 90; /* Поверх основного контента */
left: 0;
top: 0;
}
.sidebar-header {
padding: 20px;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-header h2 {
font-size: 1.5rem;
margin-bottom: 5px;
}
.sidebar-header p {
font-size: 0.8rem;
opacity: 0.7;
}
.menu {
list-style: none;
padding: 10px 0;
}
.menu-item {
position: relative;
border-left: 4px solid transparent;
transition: all 0.3s ease;
}
.menu-item:hover {
border-left-color: #3498db;
background-color: rgba(255, 255, 255, 0.05);
}
.menu-link {
display: flex;
align-items: center;
padding: 15px 20px;
color: #fff;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.menu-link:hover {
padding-left: 25px;
}
.menu-icon {
margin-right: 12px;
font-size: 1.2rem;
}
.submenu {
list-style: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
background-color: rgba(0, 0, 0, 0.2);
}
.menu-item:hover .submenu {
max-height: 200px;
}
.submenu-item {
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.menu-item:hover .submenu-item {
opacity: 1;
transform: translateY(0);
}
.menu-item:hover .submenu-item:nth-child(1) {
transition-delay: 0.1s;
}
.menu-item:hover .submenu-item:nth-child(2) {
transition-delay: 0.2s;
}
.menu-item:hover .submenu-item:nth-child(3) {
transition-delay: 0.3s;
}
.submenu-link {
display: block;
padding: 12px 20px 12px 50px;
color: #ddd;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.2s ease;
}
.submenu-link:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
padding-left: 55px;
}
.content {
flex: 1;
padding: 30px;
}
.content h1 {
color: #2c3e50;
margin-bottom: 20px;
}
.content p {
line-height: 1.6;
color: #34495e;
margin-bottom: 15px;
}
.contact-info {
padding: 20px;
margin-top: 30px;
border-top: 1px solid #2d4ba8;
font-size: 14px;
}
.contact-info p {
margin-bottom: 10px;
display: flex;
align-items: center;
}
.contact-info i {
margin-right: 10px;
width: 20px;
text-align: center;
color: #ffffff;
}
/* Стили для основного контента - ДОБАВЛЕН ОТСТУП */
.main-content {
flex-grow: 1;
padding: 0px;
margin-top: 0;
margin-left: 250px; /* Отступ для фиксированного меню */
width: calc(100% - 250px); /* Ширина с учетом меню */
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid #e6e9f0;
}
.page-title {
font-size: 28px;
color: #1e3a8a;
}
.search-bar {
display: flex;
width: 300px;
}
.search-bar input {
flex-grow: 1;
padding: 10px 15px;
border: 1px solid #d1d5e6;
border-radius: 4px 0 0 4px;
outline: none;
}
.search-bar button {
background: #1e3a8a;
color: white;
border: none;
padding: 10px 15px;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
/* Стили для карточек техники */
.equipment-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
}
.equipment-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.3s;
}
.equipment-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.card-image {
height: 200px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.equipment-card:hover .card-image img {
transform: scale(1.05);
}
.card-content {
padding: 20px;
}
.card-title {
font-size: 20px;
margin-bottom: 10px;
color: #1e3a8a;
}
.card-details {
color: #666;
margin-bottom: 15px;
font-size: 14px;
}
.card-details div {
margin-bottom: 5px;
display: flex;
align-items: center;
}
.card-details i {
margin-right: 8px;
color: #ff8c00;
}
.card-price {
font-size: 22px;
font-weight: bold;
color: #ff8c00;
margin: 15px 0;
}
.card-buttons {
display: flex;
justify-content: space-between;
}
.btn {
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
}
.btn-primary {
background: #ff8c00;
color: white;
}
.btn-primary:hover {
background: #ff9e30;
}
.btn-outline {
background: transparent;
border: 1px solid #1e3a8a;
color: #1e3a8a;
}
.btn-outline:hover {
background: #f0f2f7;
}
/* Стили для футера */
.footer {
background: linear-gradient(to left, #2b3a5a 0%, #2e2482 45%, #0d101a 100%);
color: white;
padding: 30px;
text-align: center;
margin-left: 250px; /* Отступ для фиксированного меню */
width: calc(100% - 250px); /* Ширина с учетом меню */
position: relative;
z-index: 2; /* контент выше баннера */
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-section {
flex: 1;
min-width: 250px;
margin-bottom: 20px;
}
.footer-section h3 {
margin-bottom: 15px;
font-size: 20px;
}
.footer-bottom {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #2d4ba8;
text-align: center;
}
/* Адаптивность */
@media (max-width: 992px) {
.container {
flex-direction: column;
}
.sidebar {
width: 100%;
display: none;
position: fixed;
z-index: 99;
height: 100vh;
overflow-y: auto;
}
.top-nav {
display: block;
}
.main-content {
margin-top: 70px;
margin-left: 0;
width: 100%;
}
.sidebar.active {
display: block;
}
.footer {
margin-left: 0;
width: 100%;
}
}
@media (max-width: 768px) {
.page-header {
flex-direction: column;
align-items: flex-start;
}
.search-bar {
width: 100%;
margin-top: 15px;
}
.equipment-grid {
grid-template-columns: 1fr;
}
}
/* -------- Third-level PANEL (no modal) -------- */
.backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
z-index: 140;
}
.third-panel {
position: fixed;
top: 0;
left: var(--sidebar-w);
height: 100vh;
width: clamp(320px, 28vw, 520px);
background: #fff;
color: #111827;
box-shadow: 0 10px 40px rgba(0,0,0,.25);
transform: translateX(16px);
opacity: 0;
pointer-events: none;
transition: transform .25s ease, opacity .25s ease;
z-index: 150;
display: flex;
flex-direction: column;
border-left: 1px solid #e5e7eb;
}
.backdrop.active { opacity: 1; pointer-events: auto; }
.third-panel.active { transform: translateX(0); opacity: 1; pointer-events: auto; }
.third-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
}
.third-panel__header h3 {
margin: 0;
font-size: 1.1rem;
color: #1f2937;
}
.third-panel__close {
background: none;
border: none;
font-size: 1.8rem;
line-height: 1;
color: #6b7280;
cursor: pointer;
}
.third-panel__body {
padding: 12px 10px 18px 10px;
overflow: auto;
flex: 1;
background: #fff;
}
.third-panel__list {
list-style: none;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
padding: 0;
margin: 0;
}
.third-panel__list li {
background: #ffffff;
border-radius: 10px;
border: 1px solid #e5e7eb;
box-shadow: 0 3px 10px rgba(0,0,0,.06);
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
overflow: hidden;
}
.third-panel__list li:hover {
transform: translateY(-2px);
box-shadow: 0 10px 18px rgba(0,0,0,.12);
}
.third-panel__list a {
display: block;
padding: 14px 16px;
color: #1f2937;
font-weight: 500;
text-decoration: none;
}
.third-panel__list a:hover {
background: var(--brand);
color: #fff;
}
/* ——— third-panel: подкатегории (аккордеон) ——— */
.third-panel__list .has-children > a {
position: relative;
padding-right: 40px;
}
.third-panel__list .has-children > a::after {
content: '▸';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%) rotate(0deg);
transition: transform .25s ease;
opacity: .7;
}
.third-panel__list .has-children.is-open > a::after {
transform: translateY(-50%) rotate(90deg);
}
.third-sublist {
list-style: none;
margin: 0 0 14px 0;
padding: 0 10px 0 10px; /* без верхнего отступа по умолчанию */
border-left: 2px solid #e5e7eb;
max-height: 0;
overflow: hidden;
transition: max-height .3s ease, padding .3s ease;
}
/* когда открыт родитель */
.has-children.is-open > .third-sublist {
padding: 8px 10px 10px 10px; /* добавляем отступы только в открытом состоянии */
}
.third-sublist li {
margin-bottom: 8px; /* добавили отступ между пунктами */
}
.third-sublist li a {
display: block;
padding: 12px 16px 12px 26px;
color: #374151;
text-decoration: none;
border-bottom: 1px dashed #eef0f3;
}
.third-sublist li a:hover {
background: var(--brand, #1e3a8a);
color: #fff;
}
@media (max-width: 992px) {
.layout {
grid-template-columns: 1fr;
}
.sidebar {
position: relative;
height: auto;
}
.third-panel {
left: 0;
width: min(100vw, 540px);
}
}
/* Банер Главная */
/* === HERO: точные позиции из макета + адаптация под брейкпоинты === */
/* ДЕСКТОП / НОУТЫ ≥ 993px
(меню занимает 250px слева; баннер начинается справа от него) */
:root{
/* "Созданы" — верхний правый (примерно как на скрине) */
--hero-1-top: 9%;
--hero-1-left: 60%;
/* "Для" — центр по вертикали, ближе к центру по горизонтали */
--hero-2-top: 30%;
--hero-2-right: 55%;
/* "Решения" — нижний левый */
--hero-3-top: 80%;
--hero-3-left: 8%;
/* "самых сложных задач" — нижний правый */
--hero-4-top: 80%;
--hero-4-right: 6%;
}
/* Базовый баннер остаётся справа от меню (как сейчас) */
.hero-banner {
position: fixed;
top: 0;
left: 250px; /* баннер начинается справа от меню */
width: calc(100% - 250px);/* ширина = вся страница минус меню */
height: 100vh; /* на весь экран по высоте */
background: url("../img/arm_day.png") center / cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
z-index: 1;
}
/* Общие стили заголовков */
.hero-title,
.hero-title-right,
.hero-title-left-2,
.hero-title-right-2{
position: absolute;
font-weight: 700;
color: #fff;
text-shadow: 1px 1px 2px #000, 0 0 1em #2f5bff, 0 0 0.2em #2f5bff;
white-space: nowrap;
line-height: 1.05;
}
/* Размеры шрифта — близко к макету и пропорционально ширине */
/* Главный заголовок "Созданы" */
.hero-title {
font-size: clamp(32px, 5vw, 200px);
}
/* "Для" */
.hero-title-right {
font-size: clamp(32px, 5vw, 180px);
}
/* "Решения" */
.hero-title-left-2 {
font-size: clamp(32px, 4vw, 120px);
}
/* "самых сложных задач" */
.hero-title-right-2 {
font-size: clamp(32px, 4vw, 120px);
}
/* Позиции + анимации (конечные точки совпадают с переменными) */
.hero-title{
top: var(--hero-1-top); left: -100%;
animation: hero-in-left-1 1.6s ease forwards .3s;
}
.hero-title-right{
top: var(--hero-2-top); right: -100%;
animation: hero-in-right-2 1.6s ease forwards 1.1s;
}
.hero-title-left-2{
top: var(--hero-3-top); left: -100%;
animation: hero-in-left-3 1.6s ease forwards 2.2s;
}
.hero-title-right-2{
top: var(--hero-4-top); right: -100%;
animation: hero-in-right-4 1.6s ease forwards 3.0s;
}
@keyframes hero-in-left-1 { from{left:-100%;opacity:0} to{left:var(--hero-1-left);opacity:1} }
@keyframes hero-in-right-2 { from{right:-100%;opacity:0} to{right:var(--hero-2-right);opacity:1} }
@keyframes hero-in-left-3 { from{left:-100%;opacity:0} to{left:var(--hero-3-left);opacity:1} }
@keyframes hero-in-right-4 { from{right:-100%;opacity:0} to{right:var(--hero-4-right);opacity:1} }
/* Мгновенное завершение анимаций при скролле */
body.skip-hero-anim .hero-title,
body.skip-hero-anim .hero-title-right,
body.skip-hero-anim .hero-title-left-2,
body.skip-hero-anim .hero-title-right-2{
animation: none !important; opacity: 1 !important;
}
body.skip-hero-anim .hero-title { left: var(--hero-1-left); }
body.skip-hero-anim .hero-title-right { right: var(--hero-2-right); }
body.skip-hero-anim .hero-title-left-2 { left: var(--hero-3-left); }
body.skip-hero-anim .hero-title-right-2{ right: var(--hero-4-right); }
/* ===== Планшет/мобила ≤ 992px =====
Тут сайдбар становится адаптивным и не «занимает» постоянные 250px,
поэтому баннер должен растягиваться на 100% ширины. :contentReference[oaicite:2]{index=2} */
@media (max-width: 992px){
.hero-banner{
left: 0; /* больше нет фиксированных 250px */
width: 100%;
background-position: 30% 22%; /* напр.: правее и чуть выше центра */
background-size: cover; /* оставляем cover */
height: 100vh; /* при желании меньше высоты на телефоне */
}
/* Подправим точки, чтобы композиция повторяла скрин: */
:root{
--hero-1-top: 15%;
--hero-1-left: 23%;
--hero-2-top: 30%;
--hero-2-right: 40%;
--hero-3-top: 45%;
--hero-3-left: 30%;
--hero-4-top: 60%;
--hero-4-right: 3%;
}
/* Чуть компактнее шрифты на узких экранах */
.hero-title { font-size: clamp(50px, 8vw, 50px); }
.hero-title-right { font-size: clamp(50px, 7.2vw, 50px); }
.hero-title-left-2,
.hero-title-right-2{ font-size: clamp(40px, 7vw, 40px); }
/* Разрешим перенос, если очень узко */
.hero-title,
.hero-title-right,
.hero-title-left-2,
.hero-title-right-2{
white-space: normal;
}
}
/* якори и стрелка на баннере */
/* Плавная прокрутка для якорей */
html { scroll-behavior: smooth; }
/* Если есть фиксированная шапка — подкорректируй отступ попадания */
#fleet-cats { scroll-margin-top: 80px; } /* поправь 80px под высоту шапки */
.scroll-down{
--size: 72px; /* было 56px */
position: absolute;
right: clamp(12px, 3vh, 28px);
bottom: clamp(12px, 3vh, 28px);
width: var(--size);
height: var(--size);
border-radius: 999px;
border: 2px solid rgba(0,0,0,.6); /* чёрная окантовка */
color: #000; /* ЧЁРНЫЙ цвет иконки через currentColor */
display: grid;
place-items: center;
text-decoration: none;
opacity: 0; /* скрыта до появления */
transform: translateY(6px) scale(.98); /* адаптировано: без -50% по X */
pointer-events: none;
transition: opacity .35s ease, transform .35s ease;
}
/* Появление стрелки, когда JS добавит .visible */
.scroll-down.visible{
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* Сделаем саму стрелку крупнее внутри кнопки */
.scroll-down__icon{
display: block;
width: 44%;
height: 44%;
animation: sd-bounce 1.6s ease-in-out infinite;
}
@keyframes sd-bounce{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
/* При прокрутке скрываем кнопку */
.scroll-down.hidden{
opacity: 0;
pointer-events: none;
}
/* Уважение предпочтений по сниженной анимации */
@media (prefers-reduced-motion: reduce){
.scroll-down__icon{ animation: none; }
}
/* Адаптивность для маленьких экранов */
@media (max-width: 768px) {
.banner-text {
font-size: 18px;
padding: 8px 14px;
left: -100%;
animation: slideInMobile 2s ease forwards;
animation-delay: 0.5s;
}
@keyframes slideInMobile {
from {
left: -100%;
opacity: 0;
}
to {
left: 10px; /* в мобильной версии останется слева */
opacity: 1;
}
}
}
/* Контент */
.main-content {
position: relative;
z-index: 2; /* контент выше баннера */
background: #f5f7fa;
margin-top: 100vh; /* начинаем сразу после баннера */
}
.content-block {
max-width: 100%;
margin: 0 auto;
padding: 80px 20px;
background: url("../img/wallpapers.png") center center / cover no-repeat fixed;
}
/* Lead Offer */
.lead-offer {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 30px;
align-items: center;
background: #fff;
border-radius: 12px;
padding: 28px;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.lead-offer__text h2 { font-size: 32px; color: #1e3a8a; margin-bottom: 10px; }
.lead-offer__text p { color: #34495e; margin-bottom: 16px; }
.lead-offer__bullets { list-style: none; margin: 0 0 18px 0; }
.lead-offer__bullets li { display:flex; gap:10px; align-items:center; margin-bottom: 8px; color:#2c3e50; }
.lead-offer__bullets i { color:#ff8c00; }
.lead-offer__cta { display:flex; gap:10px; margin-bottom: 12px; flex-wrap: wrap; }
.trust-badges { display:flex; gap:14px; flex-wrap: wrap; font-size: 14px; color:#555; }
.trust-badges i { color:#1e3a8a; }
.lead-offer__pic.slider {
min-height: 500px;
border-radius: 12px;
background: none;
position: relative; /* на всякий */
height: 400px; /* явная высота: можно поменять под дизайн */
/* или вместо height можно использовать:
aspect-ratio: 16/9; min-height: 400px; */
}
/* Разделы */
.section-title {
font-size: 26px;
color: #1e3a8a;
margin-bottom: 18px;
}
/* Калькулятор / форма заявки */
.calc .quote-form {
background: #fff;
border-radius: 12px;
padding: 22px;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.quote-form .form-row { display: grid; gap: 10px; margin-bottom: 12px; }
.quote-form .form-row.two { grid-template-columns: 1fr 1fr; }
.quote-form label { font-weight: 600; color: #1e3a8a; font-size: 14px; }
.quote-form input, .quote-form select, .quote-form textarea {
width: 100%; padding: 10px 12px; border:1px solid #d1d5e6; border-radius: 6px; outline: none;
background: #f9fbff;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
border-color:#1e3a8a;
box-shadow: 0 0 0 3px rgba(30,58,138,.12);
}
.form-actions { display:flex; align-items:center; gap:14px; flex-wrap: wrap; }
.form-note { font-size: 13px; color:#666; display:flex; gap:8px; align-items:center; }
/* Шаги */
.steps-grid {
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.step {
background:#fff; border-radius: 12px; padding:18px; text-align:center;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.step-num {
width:36px; height:36px; border-radius:50%;
background:#1e3a8a; color:#fff; display:flex; align-items:center; justify-content:center;
margin: 0 auto 10px;
}
/* Отзывы */
.reviews-grid {
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.review {
background:#fff; border-left:4px solid #ff8c00; border-radius: 8px;
padding:16px; box-shadow: 0 8px 24px rgba(0,0,0,.08);
color:#2c3e50;
}
.review footer { margin-top:8px; color:#666; font-size:14px; }
/* FAQ */
.faq .faq-item {
background:#fff; border: 1px solid #e6e9f0; border-radius:10px; padding:12px 16px; margin-bottom:10px;
}
.faq summary { cursor: pointer; font-weight:600; color:#1e3a8a; }
.faq p { margin-top:8px; color:#34495e; }
/* Финальный CTA */
.final-cta__box {
background: radial-gradient(80% 60% at 20% 15%, #2b3a5a 0%, #2e2482 45%, #0d101a 100%);
color:#fff; border-radius:14px; padding:28px; text-align:center;
box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.final-cta__box p { margin: 6px 0 14px; color:#e7e9ff; }
/* Каталог — подравняем карточки из существующих стилей */
.catalog .equipment-grid .equipment-card { height: 100%; display:flex; flex-direction:column; }
.catalog .equipment-grid .card-content { display:flex; flex-direction:column; flex:1; }
.catalog .equipment-grid .card-buttons { margin-top: auto; }
/* Адаптивность */
@media (max-width: 992px) {
.lead-offer { grid-template-columns: 1fr; }
.quote-form .form-row.two { grid-template-columns: 1fr; }
.steps-grid { grid-template-columns: repeat(2, 1fr); }
.reviews-grid { grid-template-columns: 1fr; }
.lead-offer-gidro { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.lead-offer__text h2 { font-size: 26px; }
.section-title { font-size: 22px; }
}
/* ---- Next block ---- */
/* === Gradient background for main-content === */
.main-content {
background: linear-gradient(135deg, #f6f9ff 0%, #eef3fb 50%, #e8effa 100%);
}
/* Дополнительные мягкие переливы для секций */
.content-block:nth-of-type(2n) {
background: linear-gradient(180deg, #f3f7ff 0%, #eef3fa 100%);
border-radius: 14px;
box-shadow: 0 1px 0 rgba(0,0,0,.05) inset, 0 -1px 0 rgba(0,0,0,.04) inset;
}
/* Карточки и плашки теперь тоже с легким градиентом */
.lead-offer,
.quote-form,
.step,
.review,
.faq .faq-item,
.equipment-card {
background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
border: 1px solid #e6ebf5;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.btn {
background: linear-gradient(135deg, #4a6cf7 0%, #3552d0 100%);
color: #fff;
border: none;
border-radius: 8px;
padding: 12px 24px;
font-weight: 500;
box-shadow: 0 4px 12px rgba(53,82,208,0.3);
transition: all .3s ease;
}
.btn:hover {
background: linear-gradient(135deg, #5a7cff 0%, #4060de 100%);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(53,82,208,0.4);
}
/* акцентная (primary) */
.btn-primary {
background: linear-gradient(135deg, #ff9d3a 0%, #ff7b00 100%);
color: #fff;
border: none;
box-shadow: 0 4px 12px rgba(255,123,0,0.3);
}
.btn-group {
display: flex;
justify-content: center;
gap: 36px; /* расстояние между кнопками */
}
.btn-primary:hover {
background: linear-gradient(135deg, #ffb256 0%, #ff8f26 100%);
box-shadow: 0 6px 16px rgba(255,123,0,0.4);
}
/* обводочная */
.btn-outline {
background: linear-gradient(135deg, #f7faff 0%, #eef3fb 100%);
color: #3552d0;
border: 1px solid #c5d0eb;
}
.btn-outline:hover {
background: linear-gradient(135deg, #eef3fb 0%, #e3ebfa 100%);
color: #2c47a1;
border-color: #a5b6e0;
}
/* === Animated glossy gradient buttons with softer blur === */
.btn {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #4a6cf7 0%, #3552d0 100%);
color: #fff;
border: none;
border-radius: 8px;
padding: 12px 24px;
font-weight: 500;
box-shadow: 0 4px 12px rgba(53,82,208,0.3);
transition: all .3s ease;
display: inline-block; /* или inline-block */
align-items: center; /* красиво выровняет иконку и текст */
gap: 8px; /* зазор для кнопки с телефоном */
overflow: hidden; /* теперь действительно режет ::before */
}
.btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.4) 40%,
rgba(255,255,255,0.6) 50%,
rgba(255,255,255,0.4) 60%,
rgba(255,255,255,0) 100%);
transform: skewX(-20deg);
filter: blur(8px); /* размытый эффект блика */
pointer-events: none;
}
.btn:hover::before {
animation: shine 1.4s ease-in-out forwards;
}
/* анимация скользящего блика */
@keyframes shine {
0% { left: -100%; }
100% { left: 120%; }
}
/* === Варианты кнопок === */
.btn-primary {
background: linear-gradient(135deg, #ff9d3a 0%, #ff7b00 100%);
box-shadow: 0 4px 12px rgba(255,123,0,0.3);
}
.btn-outline {
background: linear-gradient(135deg, #f7faff 0%, #eef3fb 100%);
color: #3552d0;
border: 1px solid #c5d0eb;
}
/* ---- Next block ---- */
/* Категории техники на главной */
.fleet-buttons { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.fleet-btn {
flex:1 1 200px;
min-width:200px;
text-align:center;
position:relative;
overflow:hidden;
color:#fff;
border:none;
border-radius:8px;
padding:12px 24px;
font-weight:600;
text-transform:uppercase;
background: linear-gradient(135deg, #1e3a8a 0%, #2d4ba8 100%);
box-shadow: 0 4px 12px rgba(53,82,208,0.3);
transition: all .3s ease;
}
.fleet-btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.4) 40%,
rgba(255,255,255,0.6) 50%,
rgba(255,255,255,0.4) 60%,
rgba(255,255,255,0) 100%);
transform: skewX(-20deg);
filter: blur(6px);
pointer-events: none;
}
.fleet-btn:hover::before {
animation: shine 1.4s ease-in-out forwards;
}
.fleet-btn.is-active {
background: linear-gradient(135deg, #ff9d3a 0%, #ff7b00 100%);
box-shadow: 0 4px 12px rgba(255,123,0,0.3);
}
.fleet-group { display:none; }
.fleet-group.active { display:block; animation: fadeIn .4s ease; }
.fleet-row{ display:flex; flex-wrap:wrap; gap:18px 60px; align-items:center; }
.vehicle{ width: 200px; text-align:center; transition: transform .2s ease; }
.vehicle img{ width:200px; height:150px; display:block; margin: auto; object-fit:contain; }
.vehicle figcaption{ font-size:16px; margin-top:6px; font-weight: 500 ; }
.vehicle:hover{ transform:translateY(-3px); }
@keyframes fadeIn { from {opacity:0; transform:translateY(10px);} to {opacity:1; transform:translateY(0);} }
@keyframes shine { 0% { left: -100%; } 100% { left: 120%; } }
@media (max-width:768px){
.vehicle{ width:120px; }
.vehicle svg{ width:110px; height:64px; }
.fleet-btn{ flex:1 1 100%; }
}
/* слайдер блок лучшее предложение */
.slider {
position: relative;
min-height: 500px;
border-radius: 12px;
overflow: hidden;
}
.slides {
position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0; */
}
.slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease;
}
.slide.active {
opacity: 1;
}
.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: #fff;
border: none;
font-size: 28px;
padding: 10px 16px;
cursor: pointer;
border-radius: 50%;
z-index: 2;
}
.slider-btn.prev { left: 10px; }
.slider-btn.next { right: 10px; }
.slider-btn:hover { background: rgba(0,0,0,0.7); }
/* отступ меню для карточки */
.main-content-nobanner {
flex-grow: 1;
padding: 0px;
margin-top: 0;
margin-left: 250px; /* Отступ для фиксированного меню */
width: calc(100% - 250px); /* Ширина с учетом меню */
}
/* для страницы категорий с фильтрами ------------------------------------------------------------------------------------------------------------------------------- */
:root{
--brand:#1e3a8a;
--accent:#ff8c00;
--bg:#f5f7fa;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background:#f5f7fa; color:#333; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:100%; margin:0 auto; padding:24px 16px 340px; background: url("../img/wallpapers.png") center center / cover no-repeat fixed; }
/* breadcrumbs */
.crumbs{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:14px; color:#667085; margin:16px 0 10px; }
.crumbs a{ color:#475569; }
.crumbs i{ opacity:.7; }
/* header */
.page-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; padding:8px 0 18px; border-bottom:2px solid #e6e9f0; }
.page-title{ font-size:28px; color:var(--brand); margin:0; }
.meta{ color:#6b7280; font-size:14px; }
/* controls */
.controls{ display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 20px; }
.controls input:not([type="checkbox"]):not([type="radio"]),
.controls select{
padding:10px 12px; border:1px solid #d1d5e6; border-radius:8px; background:#fff; outline:none;
}
.btn{ padding:10px 14px; border-radius:8px; border:none; cursor:pointer; font-weight:600; }
.btn-primary{ background:linear-gradient(135deg,#ff9d3a 0%, #ff7b00 100%); color:#fff; }
.btn-outline{ background:linear-gradient(135deg,#f7faff 0%,#eef3fb 100%); color:#3552d0; border:1px solid #c5d0eb; }
/* grid */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:20px; }
.card{
background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
border:1px solid #e6ebf5; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.06);
overflow:hidden; display:flex; flex-direction:column;
padding: 20px;
}
.card__img{
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
overflow: visible; /* было hidden — из-за этого тоже могло казаться, что «режется» */
background: #e9eef9; }
.card__img img{ display: block;
width: 100%;
height: auto; /* ключевой момент */
max-width: 100%;
max-height: none;
object-fit: contain; /* а не cover */ }
.card__body{ padding:16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card__title{ font-size:18px; color:var(--brand); margin:0; }
.specs{ display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; color:#475569; font-size:14px; }
.specs div{ display:flex; align-items:center; gap:8px; }
.price{ font-size:20px; font-weight:700; color:var(--accent); margin-top:6px; }
.card__actions{ margin-top:20px; display:flex; gap:8px; }
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#475569; background:#fff; border:1px solid #e6ebf5; border-radius:999px; padding:6px 10px; }
/* footer */
.foot{ margin-top:24px; color:#6b7280; font-size:13px; }
.main-card-content {
flex-grow: 1;
padding: 0px;
margin-top: 0;
margin-left: 250px; /* Отступ для фиксированного меню */
width: calc(100% - 250px); /* Ширина с учетом меню */
}
/* карточки, скрытые ПАГИНАЦИЕЙ (не путать с фильтрами) */
.grid .card[data-pg-hidden="1"] { display: none !important; }
/* ===== Two-column catalog layout: filters left, cards right ===== */
.catalog-layout{
display: grid;
grid-template-columns: 280px 1fr;
gap: 24px;
align-items: start;
margin-top: 16px;
}
.filters{
background: #ffffff;
border: 1px solid #e6ebf5;
border-radius: 12px;
padding: 16px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
position: sticky;
top: 16px;
}
/* stack filter controls vertically */
.filters .controls{
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
}
.filters .controls input:not([type="checkbox"]):not([type="radio"]),
.filters .controls select,
.filters .controls button{
width: 100%;
}
/* responsive: single column on tablets/phones */
@media (max-width: 992px){
.catalog-layout{
grid-template-columns: 1fr;
}
.filters{ position: static; }
}
/* ===== Force cards list vertical (single column) ===== */
.catalog-layout .grid{
display: flex;
flex-direction: column;
gap: 20px;
margin-left: auto;
}
/* Карточка товаров */
/* === Контейнер страницы товара: ограничим ширину и центрируем === */
/* === Product page overrides (чтобы фото не тянулись и текст не вылезал) === */
.wrap.product{ max-width: 1200px; margin: 0 auto; padding: 24px 16px 60px; }
.product-layout{
display: grid;
grid-template-columns: minmax(0,1fr) min(42vw, 460px); /* контент слева, галерея справа */
gap: 24px;
align-items: start;
margin-top: 10px;
}
@media (max-width: 980px){
.product-layout{ grid-template-columns: 1fr; }
.product-gallery{ order: -1; }
}
/* Галерея — ЖЁСТКО перебиваем любые глобальные img правила каталога */
.product-gallery .product-hero{
width:auto;
aspect-ratio: 4/3;
background:#e9eef9;
border-radius:12px;
display:flex; align-items:center; justify-content:center;
overflow:hidden; margin-bottom:12px;
/* центрируем интересное место */
}
.product-gallery .product-hero img{
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
display: block !important;
}
.product-gallery .thumbs{ display:flex; flex-wrap:wrap; gap:8px; }
.product-gallery .thumb{ border:1px solid rgba(0,0,0,.12); border-radius:10px; padding:6px; background:#fff; cursor:pointer; }
.product-gallery .thumb img{ width: 92px; height: 68px; object-fit: cover; display:block; }
.product-gallery .thumb.is-active{ outline:2px solid var(--primary, #315efb); }
/* Табы — перегружаем видимость */
.tab-panel{ display:none; padding:25px; background:#fff; border:1px solid #e6ebf5; border-radius:12px; }
.tab-panel.is-active{ display:block; }
/* Не даём тексту выбиваться из колонок на узких экранах */
.product-info, .product-tabs{ min-width: 0; }
.product-info p, .product-tabs p{ overflow-wrap: anywhere; }
.help {
margin-top: 10px;
}
/* стили продукта */
/* === product page → lead-offer layout === */
/* Чуть шире контейнер, как у «lead offer» */
.main-content-nobanner .wrap.product.layout-lead {
width: min(96vw, 1280px);
max-width: 1280px;
}
@media (min-width: 1440px) {
.main-content-nobanner .wrap.product.layout-lead {
width: min(96vw, 1400px);
max-width: 1400px;
}
}
/* Две колонки: галерея (левая) шире, инфоблок (правый) уже */
.main-content-nobanner .wrap.product.layout-lead .product-layout.reverse {
display: grid;
grid-template-columns: 1fr 1fr; /* ~66/34 на базовых десктопах */
gap: 28px;
align-items: start;
}
@media (min-width: 1280px) {
.main-content-nobanner .wrap.product.layout-lead .product-layout.reverse {
grid-template-columns: 3fr 3fr; /* ~70/30 крупные экраны */
gap: 32px;
}
}
@media (min-width: 1536px) {
.main-content-nobanner .wrap.product.layout-lead .product-layout.reverse {
grid-template-columns: 3fr 3fr; /* ~75/25 очень крупные */
gap: 36px;
}
}
/* Картинки крупнее — чтобы визуально совпадало с lead-героем */
.main-content-nobanner .wrap.product.layout-lead .product-hero img {
width: 100%;
max-height: 560px;
object-fit: cover;
display: block;
}
@media (min-width: 1536px) {
.main-content-nobanner .wrap.product.layout-lead .product-hero img { max-height: 620px; }
}
/* Миниатюры тоже побольше */
.main-content-nobanner .wrap.product.layout-lead .thumbs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 10px;
}
.main-content-nobanner .wrap.product.layout-lead .thumbs .thumb img {
width: 100%;
height: 110px;
object-fit: cover;
display: block;
}
@media (min-width: 1536px) {
.main-content-nobanner .wrap.product.layout-lead .thumbs .thumb img { height: 120px; }
}
/* КАТАЛОГ */
/* === Catalog Offer Card (как lead-offer): текст слева, фото справа === */
.catalog-offer {
/* сетка «как у lead-offer»: 1.4fr текст | 1fr фото */
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 30px;
align-items: center;
/* стиль, близкий к lead-offer */
padding: 28px;
border-radius: 12px;
background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
border: 1px solid #e6ebf5;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
/* чтобы картинка «была во всю высоту» */
min-height: 420px;
}
/* слева — текстовая колонка */
.catalog-offer__text {
min-width: 0; /* важно для line-clamp */
display: flex;
flex-direction: column;
gap: 10px;
}
.catalog-offer__title {
margin: 0;
line-height: 1.25;
font-size:28px; color:var(--brand);
/* ограничим в 2 строки, чтобы не толкало верстку */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* Прокручиваемый бокс фиксированной высоты */
.catalog-offer__desc{
background: linear-gradient(180deg, rgba(30,58,138,.06), rgba(30,58,138,.10));
border: 1px solid rgba(30,58,138,.15);
border-radius: 10px;
padding: 12px 14px;
max-height: 120px; /* ← высота «окошка» */
overflow: auto; /* скролл, когда текста больше */
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
line-height: 1.55;
}
/* необязательная косметика для скроллбара WebKit */
.catalog-offer__desc::-webkit-scrollbar{ width: 8px; }
.catalog-offer__desc::-webkit-scrollbar-thumb{
background: rgba(30,58,138,.25);
border-radius: 8px;
}
/* буллеты как в lead-offer; если пусто — элемент визуально миниатюрный */
.catalog-offer__bullets {
list-style: disc;
padding: 0;
margin: 8px 0 0;
display: grid;
gap: 6px;
}
.catalog-offer__bullets li i {
color: #1e3a8a; /* brand */
margin-right: 8px;
}
/* цена + кнопки */
.catalog-offer__cta {
margin-top: auto; /* прижимаем вниз левой колонки */
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.catalog-offer__price {
font-size:20px; color:var(--accent); margin-top:6px;
}
/* доверительные бейджи */
.catalog-offer__badges {
display: flex;
gap: 12px;
flex-wrap: wrap;
color: #555;
font-size: 14px;
}
.catalog-offer__badges i { margin-right: 6px; }
/* справа — фото на всю высоту карточки */
.catalog-offer__pic {
height: 100%;
min-height: 100%;
}
.catalog-offer__pic img {
width: 100%;
height: 100%;
object-fit: cover; /* заполняем без искажений */
display: block;
border-radius: 12px;
}
/* крупнее на широких экранах */
@media (min-width: 1280px) {
.catalog-offer { min-height: 460px; grid-template-columns: 1.6fr 1fr; }
}
@media (min-width: 1536px) {
.catalog-offer { min-height: 500px; grid-template-columns: 1.8fr 1fr; }
}
/* планшеты/мобилки — вертикальная карточка */
@media (max-width: 991.98px) {
.catalog-offer {
grid-template-columns: 1fr;
gap: 16px;
padding: 16px;
min-height: initial;
}
.catalog-offer__pic img {
height: auto;
max-height: 60vh; /* чтобы не было слишком высоким на телефонах */
}
}
/* страница продукта — на всю доступную ширину (без max-width) */
.main-content-nobanner .wrap.product{
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 24px; /* можно 0, если нужны прям «в край» */
padding-right: 24px;
}
/* расширяем раскладку: галерея шире, инфоблок уже */
.main-content-nobanner .wrap.product .product-layout.reverse{
display: grid !important;
grid-template-columns: minmax(0, 72%) minmax(0, 28%); /* галерея | инфо */
gap: 32px;
align-items: start;
}
@media (min-width: 1440px){
.main-content-nobanner .wrap.product .product-layout.reverse{
grid-template-columns: minmax(0, 75%) minmax(0, 25%);
gap: 36px;
}
}
/* чтобы «во всю ширину» выглядело богато — делаем изображение выше */
.main-content-nobanner .wrap.product .product-hero img{
width: 100%;
max-height: 620px; /* подгони по вкусу */
object-fit: cover;
display: block;
}
.main-content-nobanner .wrap.product .thumbs{
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 10px;
display: grid;
}
.main-content-nobanner .wrap.product .thumbs .thumb img{
width: 100%;
height: 120px;
object-fit: cover;
display: block;
}
.catalog-offer__desc-wrap{ position: relative; }
.catalog-offer__desc{ /* из варианта А: фон + line-clamp */ }
.desc-toggle{ display:none; }
.desc-more{
display:inline-block;
margin-top:8px;
font-size:14px;
color:#1e3a8a;
cursor:pointer;
}
/* при раскрытии — снимаем ограничение строк */
.desc-toggle:checked ~ .catalog-offer__desc{
-webkit-line-clamp: initial;
max-height: none;
}
/* меняем текст кнопки (если хочешь) через псевдоэлемент */
.desc-toggle:checked ~ .desc-more::after{ content:" (свернуть)"; }
/* ===== FIX фильтров: жёсткий ресет внутри .filters .controls ===== */
/* подпись фильтра как у обычных label-ов */
.filters .controls .filter-label{
display:block;
margin-bottom: -10px;
}
/* рамка со списком брендов */
.filters .controls .filter-box{
border: 1px solid #e6ebf5;
border-radius: 8px;
background: #fff;
padding: 12px;
margin-bottom: 12px;
}
/* список чекбоксов */
.filters .controls .filter-box .checklist{
display:grid;
grid-template-columns: 1fr; /* сделай 1fr 1fr для двух колонок */
row-gap: 6px;
}
/* строка чекбокса + сам чекбокс нормального размера */
.filters .controls .filter-box .chk{ display:flex; align-items:center; gap:8px; }
.filters .controls .filter-box input[type="checkbox"]{
width:auto; height:16px; margin:0 6px 0 0; padding:0; appearance:checkbox; accent-color:var(--brand);
}
/* важно: не растягивать чекбоксы на 100% (перекрываем глобальные правила) */
.filters .controls input:not([type="checkbox"]):not([type="radio"]),
.filters .controls select{ padding:10px 12px; border:1px solid #d1d5e6; border-radius:8px; background:#fff; outline:none; }
.filters .controls input:not([type="checkbox"]):not([type="radio"]),
.filters .controls select,
.filters .controls button{ width:100%; }
/* кнопки категорий на главной Ещё крупнее на экранах больше 1920px */
@media (min-width: 1921px) {
.fleet-cats .fleet-buttons .btn {
min-height: 50px;
padding: 10px 10px;
font-size: 1rem;
}
}
/* Чаще всего заказывают — ровно 5 карточек в ряд на десктопах */
.content-block.catalog .equipment-grid{
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 20px; /* можно оставить 25px, если так больше нравится */
}
/* адаптив: постепенно уменьшаем количество колонок */
@media (max-width: 1600px){
.content-block.catalog .equipment-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1280px){
.content-block.catalog .equipment-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 992px){
.content-block.catalog .equipment-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
.content-block.catalog .equipment-grid{ grid-template-columns: 1fr; }
}
/* чтобы картинки при 5 колонках не были слишком высокими */
.content-block.catalog .equipment-card .card-image{ height: 180px; } /* было 200px */
/* === Чаще всего заказывают — аккуратные карточки === */
.content-block.catalog .equipment-card{
border-radius: 12px;
box-shadow: 0 6px 16px rgba(0,0,0,.06);
overflow: hidden;
}
.content-block.catalog .equipment-card .card-body{
padding: 14px 30px 16px;
}
/* Типографика поменьше */
.content-block.catalog .equipment-card .card-title{
font-size: 16px; /* было крупнее */
font-weight: 600;
line-height: 1.3;
margin: 4px 0 6px;
display: -webkit-box; /* 2 строки, далее многоточие */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.content-block.catalog .equipment-card .card-price{
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
}
.content-block.catalog .equipment-card .card-specs .spec{
font-size: 13px;
opacity: .9;
}
.content-block.catalog .equipment-card .card-actions .btn{
padding: 8px 12px;
font-size: 13px;
}
/* Блок изображения: по умолчанию делаем «плотную» сетку с cover */
.content-block.catalog .equipment-card .card-image{
aspect-ratio: 4 / 3; /* стабильная высота */
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.content-block.catalog .equipment-card .card-image img{
width: 100%;
height: 100%;
object-fit: cover; /* держим сетку плотной */
object-position: center;
display: block;
}
/* На больших мониторах показываем картинку целиком (без обрезки) */
@media (min-width: 1600px){
.content-block.catalog .equipment-card .card-image{
aspect-ratio: 4 / 3;
padding: 6px; /* белая рамка вместо «съеденного» низа */
}
.content-block.catalog .equipment-card .card-image img{
object-fit: contain; /* влезает целиком */
}
}
/* Чуть ужимаем шрифты на средних */
@media (max-width: 1199px){
.content-block.catalog .equipment-card .card-title{ font-size: 15px; }
.content-block.catalog .equipment-card .card-price{ font-size: 14px; }
}
/* (Опционально) если нужны кропы по верхнему краю — добавь класс .card-image--top к картинке */
.content-block.catalog .equipment-card .card-image--top img{
object-position: top center;
}
/* ==== HOME → Чаще всего заказывают (ровно 5 карточек, уже/выше, мягкая типографика) ==== */
.home-most .equipment-grid{
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 20px !important;
}
.home-most .equipment-card .card-image{
aspect-ratio: 4 / 3 !important; /* одинаковая высота у всех */
overflow: hidden;
}
.home-most .equipment-card .card-image img{
width: 100%;
height: 100%;
object-fit: cover; /* плотная сетка */
}
/* На очень широких экранах показывать картинку целиком, не обрезая */
@media (min-width: 1600px){
.home-most .equipment-card .card-image{ padding: 6px; background:#fff; }
.home-most .equipment-card .card-image img{ object-fit: contain; }
}
/* Помягче текст, чтоб не «кричал» */
.home-most .equipment-card .card-title{ font-size: 16px; line-height: 1.3; }
.home-most .equipment-card .card-price{ font-size: 15px; }
.home-most .equipment-card .card-specs .spec{ font-size: 13px; }
.home-most .equipment-card .card-actions .btn{ padding: 8px 12px; font-size: 13px; }
/* ==== Главная → секция "Чаще всего заказывают" (#catalog) ==== */
/* Ровно 5 карточек в ряд на десктопе */
#catalog .equipment-grid {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 20px !important;
}
/* Адаптивная лесенка */
@media (max-width: 1600px) { #catalog .equipment-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 1280px) { #catalog .equipment-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px) { #catalog .equipment-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { #catalog .equipment-grid { grid-template-columns: 1fr; } }
/* Картинка карточки — выше и аккуратнее */
#catalog .equipment-card .card-image {
height: auto !important; /* перебиваем фиксированные 200px */
aspect-ratio: 4 / 3; /* одинаковая высота у всех */
overflow: hidden;
}
#catalog .equipment-card .card-image img {
width: 100%;
height: 100%;
object-fit: cover; /* плотная сетка; если нужно влезть целиком — см. ниже */
}
/* На очень широких экранах можно показать изображение целиком */
@media (min-width: 1600px){
#catalog .equipment-card .card-image { padding: 6px; background: #fff; }
}
/* Чуть компактнее типографика, чтобы не "кричала" */
#catalog .equipment-card .card-title { font-size: 16px; line-height: 1.3; }
#catalog .equipment-card .card-price { font-size: 15px; }
#catalog .equipment-card .card-specs .spec { font-size: 13px; }
#catalog .equipment-card .card-buttons .btn { padding: 8px 12px; font-size: 13px; }
/* --- Home: карточки "Чаще всего заказывают" — фиксируем высоту блока характеристик --- */
.product-card .card-body{
display: flex;
flex-direction: column; /* чтобы actions можно было прижать вниз */
}
.product-card .card-specs{
max-height: 84px; /* подбери 72–96px по вкусу */
overflow: auto; /* вертикальный скролл при длинном тексте */
margin-bottom: 10px; /* отступ перед кнопками */
padding-right: 6px; /* чтобы текст не упирался в полосу прокрутки */
}
.product-card .card-specs li{
list-style: none; /* потому что внутри стоят
*/
font-size: 13px;
line-height: 1.35;
display: flex;
gap: 6px;
align-items: baseline;
}
.product-card .card-actions{
margin-top: auto; /* прижимает блок кнопок к низу карточки */
}
/* Карточки на главной: фиксируем высоту списка характеристик и прижимаем кнопки вниз */
.product-card{
display: flex;
flex-direction: column;
height: 100%;
}
.product-card .card-body{
display: flex;
flex-direction: column;
flex: 1 1 auto; /* тело тянется */
}
/* «Пулечки» — фиксированная высота + скролл + чуть темнее фон */
.product-card .card-specs{
min-height: 96px; /* резерв места, чтобы кнопки не прыгали */
max-height: 96px; /* если текста больше — появится скролл */
overflow: auto;
margin-bottom: 12px;
padding: 8px 10px;
background: #edf2fa; /* чуть темнее общего фона */
border: 1px solid #e1e8f5;
border-radius: 8px;
scrollbar-width: thin; /* тонкий скролл в Firefox */
}
/* если внутри .card-specs лежат — нормализуем */
.product-card .card-specs li{
list-style: none;
font-size: 13px;
line-height: 1.35;
display: flex;
gap: 6px;
align-items: baseline;
}
/* Кнопки всегда у низа карточки */
.product-card .card-actions{
margin-top: auto; /* прижимает к низу вне зависимости от текста */
display: flex;
gap: 8px;
}
/* мелкие улучшения */
.product-card .btn{ white-space: nowrap; }
/* ===== MOBILE FIX PACK (вставить в самый низ main_styles.css) ===== */
/* 1) Галерея товара: одна колонка + аккуратные превью со скроллом */
@media (max-width: 768px) {
.product-layout { grid-template-columns: 1fr !important; }
.product-gallery { order: -1; } /* фото вверх */
.price-card { position: static !important; top: auto !important; } /* чтобы не "залипала" */
.product-gallery .product-hero{
width: 100%;
aspect-ratio: 4 / 3;
max-height: 55vh;
background: #e9eef9;
border-radius: 12px;
overflow: hidden;
}
.product-gallery .product-hero img{
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* картинка целиком */
display: block !important;
}
.product-gallery .thumbs{
display: flex !important;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 6px 2px;
}
.product-gallery .thumb{
flex: 0 0 auto;
border: 1px solid rgba(0,0,0,.12);
border-radius: 10px;
padding: 4px;
background: #fff;
}
.product-gallery .thumb img{
width: 84px !important;
height: 64px !important;
object-fit: cover !important;
display: block;
}
}
/* 2) Карточки каталога/главной: стабильная высота, кнопки у низа */
@media (max-width: 992px) {
.equipment-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
}
@media (max-width: 560px) {
.equipment-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
.equipment-card{ display:flex; flex-direction:column; height:100%; }
.equipment-card .card-image{
aspect-ratio: 4 / 3; /* одинаковая высота блока картинки */
height: auto !important;
overflow: hidden;
}
.equipment-card .card-image img{
width: 100%;
height: 100%;
object-fit: cover; /* плотная сетка без белых полей */
display: block;
}
/* фиксированное «окно» характеристик + прижать кнопки вниз */
.product-card .card-body{ display:flex; flex-direction:column; flex:1 1 auto; }
.product-card .card-specs{
min-height: 96px;
max-height: 96px;
overflow: auto;
margin-bottom: 12px;
padding: 8px 10px;
background: #e8eefb; /* чуть темнее для читаемости */
border: 1px solid #dfe7f6;
border-radius: 8px;
scrollbar-width: thin;
}
.product-card .card-actions{ margin-top:auto; display:flex; gap:8px; }
/* типографика помягче на узких экранах */
.equipment-card .card-title{ font-size: clamp(15px, 4.2vw, 18px); line-height:1.3; }
.equipment-card .card-price{ font-size: clamp(14px, 4vw, 16px); }
.product-card .card-specs li{ font-size: 13px; line-height: 1.35; }
.equipment-card .btn{ padding: 10px 12px; font-size: 14px; }
}
/* 3) Фильтры слева: без «липкости», элементы во всю ширину */
@media (max-width: 992px){
.filters{ position: static !important; top: auto !important; }
.filters .controls{ gap: 10px; }
.filters .controls input:not([type="checkbox"]):not([type="radio"]),
.filters .controls select,
.filters .controls button{ width: 100%; }
}
/* 4) Секция «Чаще всего заказывают»: ровно 5 → 4 → 3 → 2 → 1 */
#catalog .equipment-grid{
grid-template-columns: repeat(5, minmax(0,1fr)) !important;
gap: 20px !important;
}
@media (max-width: 1600px) { #catalog .equipment-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 1280px) { #catalog .equipment-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 900px) { #catalog .equipment-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 560px) { #catalog .equipment-grid { grid-template-columns: 1fr !important; } }
/* 5) Кнопки категорий (вверху главной) — на мобильных в столбик */
@media (max-width: 768px){
.fleet-buttons .btn{ min-height: 44px; font-size: 15px; }
}
/* ===== Mobile off-canvas (без изменения цветов!) ===== */
@media (max-width: 992px) {
/* Кнопка видна на мобилке, не меняем цвет — наследуем как в base */
.mobile-menu-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid currentColor; /* граница в цвет текста из base */
background: transparent; /* не красим — берем как в base */
color: inherit; /* как в base */
}
/* Контент не сдвигаем, ширина — 100% */
.container,
.main-content-nobanner {
margin-left: 0 !important;
width: 100% !important;
}
/* Сайдбар — выезжает слева. Цвета/фон НЕ трогаем: как заданы в base */
.sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 280px; /* при желании 300–320 */
transform: translateX(-100%);
transition: transform .3s ease;
z-index: 1100;
/* никаких color/background здесь — пусть применяются базовые стили */
}
.sidebar.active {
transform: translateX(0);
}
/* Затемнение позади меню */
.backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,.4);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
z-index: 1090;
}
.backdrop.active {
opacity: 1;
pointer-events: auto;
}
/* Чтобы при открытом меню не скроллилось тело */
body.menu-open { overflow: hidden; }
}
/* На десктопе кнопку прячем */
@media (min-width: 993px) {
.mobile-menu-btn { display: none; }
}
/* закрытое состояние: уезжает влево */
.sidebar {
left: 0; /* точка отсчёта */
transform: translateX(-100%);
transition: transform .3s ease;
z-index: 1100;
}
/* Mobile sidebar: без зазора сверху и на всю высоту */
@media (max-width: 992px){
.sidebar{
margin-top: 0 !important; /* убираем тот самый отступ */
top: 0 !important; /* от верхнего края экрана */
height: 100vh !important; /* ровно во всю высоту */
}
}
:root{
--z-sidebar: 1000; /* левое меню */
--z-backdrop: 1005; /* затемнение */
--z-third: 1010; /* 3-я панель поверх меню */
}
@media (max-width: 992px){
/* Боковая */
#sidebar{
z-index: var(--z-sidebar);
}
}
/* Бекдроп */
#backdrop{
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
z-index: var(--z-backdrop);
}
#backdrop.is-open{
opacity: 1;
pointer-events: auto;
}
/* Третья панель: слева, поверх sidebar */
.third-panel{
position: fixed;
top: 0;
left: 0;
height: 100dvh; /* без зазора сверху */
width: min(92vw, 380px); /* комфортная ширина на мобилке */
background: #fff;
color: #111;
box-shadow: 2px 0 18px rgba(0,0,0,.15);
transform: translateX(-100%); /* спрятана слева */
transition: transform .25s ease;
z-index: var(--z-third);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.third-panel.is-open{
transform: translateX(0);
}
/* Шапка панели всегда видна при скролле */
.third-panel__header{
position: sticky;
top: 0;
background: #fff;
border-bottom: 1px solid #eee;
padding: 12px 14px;
z-index: 1;
}
.third-panel__body{ padding: 10px 12px 16px; }
/* На десктопе (если надо другое поведение) */
@media (min-width: 993px){
.third-panel{
height: 100vh;
width: 420px;
/* Можно оставить fixed сверху — тогда всё ок поверх контента */
}
}
/* ↓↓↓ MOBILE OVERRIDE: баннер lead-offer ниже на мобилках ↓↓↓ */
@media (max-width: 768px) {
/* одна колонка */
.lead-offer {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.lead-offer-gidro {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
/* ломаем любые старые "aspect-ratio" через padding */
.lead-offer__pic .slides {
padding: 0 !important;
height: 100% !important;
}
/* сам контейнер слайдера — целевая высота */
.lead-offer__pic,
.lead-offer__pic.slider {
height: 40vh !important; /* сделай 30–40vh на вкус */
min-height: 300px !important;
border-radius: 12px !important;
overflow: hidden !important; /* чтобы ничего не вылазило */
}
/* каждый слайд растягивается ровно на высоту контейнера */
.lead-offer__pic .slide {
height: 100% !important;
background-size: cover !important; /* без белых полос */
background-position: center !important;
background-repeat: no-repeat !important;
}
/* кнопки слайдера компактнее */
.lead-offer .slider-btn {
transform: scale(.85) !important;
top: 50% !important;
}
/* чуть компактнее текст */
.lead-offer__text h2 { font-size: 1.25rem !important; }
.lead-offer__text p { font-size: .95rem !important; }
.lead-offer__bullets li { font-size: .95rem !important; }
}
@media (max-width: 480px) {
.lead-offer__pic,
.lead-offer__pic.slider {
height: 32vh !important;
min-height: 180px !important;
}
.lead-offer .slider-btn .lead-offer-gidro { transform: scale(.8) !important; }
}
/* ===== Мобилки: скрыт по умолчанию, выезжает по .open ===== */
@media (max-width: 991px) {
.sidebar {
position: fixed;
top: 0;
left: 0; /* точка отсчёта */
height: 100dvh;
width: 280px;
transform: translateX(-100%); /* <-- скрыто только тут */
transition: transform .3s ease;
z-index: 1100;
}
.sidebar.open { transform: translateX(0); }
/* фон под меню */
#backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 1000; }
#backdrop.show { opacity: 1; pointer-events: auto; }
.main-content-nobanner { margin-left: 0 !important; width: 100% !important; }
}
/* ===== Десктоп: всегда видно, без translate ===== */
@media (min-width: 992px) {
.sidebar {
transform: none !important; /* <-- гасим мобильный translate */
left: auto !important;
box-shadow: none;
}
.main-content-nobanner {
margin-left: 250px;
width: calc(100% - 250px);
}
.mobile-menu-btn { display: none !important; }
#backdrop { display: none !important; opacity: 0 !important; }
}
/* ===== Modal ===== */
/* очень компактные стили модалки; можно подрихтовать под твой дизайн */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1400;}
.modal.is-open{display:flex;}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45);}
.modal__dialog{position:relative; z-index:1; width:min(720px,92vw); max-height:92vh; overflow:auto; background:#fff; border-radius:12px; padding:20px;}
.modal__close{position:absolute; top:8px; right:10px; font-size:24px; background:transparent; border:0; cursor:pointer}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-grid .full{grid-column:1/-1}
.form-grid input, .form-grid textarea{width:100%}
.form-msg{margin-top:10px; font-weight:600}
.form-msg.ok{color: #1e7e34;}
@media (max-width: 600px){
.form-grid{grid-template-columns:1fr}
}
.modal { position: fixed; inset: 0; display: none; z-index: 2000; }
.modal.is-open { display: block; }
.modal__backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.5);
backdrop-filter: blur(2px);
}
.modal__dialog {
position: relative;
max-width: 720px;
margin: 6vh auto;
background: #fff;
border: 1px solid #e6ebf5;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,.15);
padding: 20px 20px 10px;
}
/* подтягиваем визуал как у .content-block.calc */
.modal__dialog.calc .quote-form .form-row { margin-bottom: 14px; }
.modal__dialog.calc .quote-form .form-row.two { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) {
.modal__dialog { margin: 3vh 12px; padding: 16px; }
.modal__dialog.calc .quote-form .form-row.two { grid-template-columns: 1fr; }
}
.modal__close {
position: absolute; top: 10px; right: 12px;
width: 36px; height: 36px; line-height: 36px;
text-align: center; font-size: 20px;
border: none; border-radius: 50%;
background: #f2f5fb; color: #333; cursor: pointer;
}
.modal__close:hover { background: #e9eef8; }
/* Увеличенный чекбокс только в модалке заказа */
#orderModal .checkbox {
display: inline-flex;
align-items: center;
gap: 10px; /* отступ между квадратиком и текстом */
}
#orderModal .checkbox input[type="checkbox"] {
transform: scale(1.6); /* сделай 1.8/2.0 если нужно ещё крупнее */
transform-origin: left ;
/* чтобы цвет галочки был фирменным (поддерживается в современных браузерах) */
accent-color: var(--brand, #1e3a8a);
}
/* Чуть больше кликабельная область — удобно на мобилках */
#orderModal .checkbox span {
line-height: 1.2;
cursor: pointer;
}
#orderModal .checkbox input[type="checkbox"]:focus-visible {
outline: 2px solid var(--accent, #ff8c00);
outline-offset: 2px;
}
/* не растягивать чекбоксы/радио на всю ширину */
.quote-form input[type="checkbox"],
.quote-form input[type="radio"] {
width: auto !important;
height: auto;
display: inline-block;
inline-size: auto; /* на случай современных браузеров */
}
/* аккуратная строка с чекбоксом и текстом */
.quote-form .consent {
display: inline-flex;
align-items: flex-start;
gap: 10px;
margin: 6px 0 2px;
cursor: pointer;
}
.quote-form .consent input[type="checkbox"] {
transform: scale(1.3);
transform-origin: left top;
margin-top: 2px;
accent-color: var(--brand, #1e3a8a);
}
.lead-offer-gidro {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 30px;
align-items: center;
background: #fff;
border-radius: 12px;
padding: 28px;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
/* Hydraulics price table — жёстко фиксируем 3 колонки */
.price-table--hydro {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* важно: чтобы colgroup гарантированно работал */
}
.price-table--hydro th,
.price-table--hydro td {
padding: 10px 12px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid #e6ebf5;
white-space: nowrap;
}
.price-table--hydro tbody td:first-child {
white-space: normal; /* описания услуг могут переноситься */
}
.price-table--hydro thead th {
background: #f7faff;
}
.price-table--hydro tbody td:last-child {
text-align: left; /* цена по правому краю — читается лучше */
}
/* На узких экранах позволяем переносить цены, чтобы не ехало */
@media (max-width: 520px) {
.price-table--hydro th,
.price-table--hydro td {
white-space: normal;
}
}
/* --- Tyre price table: фиксируем сетку и синхронизируем заголовки --- */
.price-wrap { overflow: auto; }
.price-table--tyre {
width: 100%;
min-width: 880px; /* чтобы колонки не схлопывались на узких экранах */
border-collapse: collapse;
table-layout: fixed; /* используем WIDTH из */
}
.price-table--tyre th,
.price-table--tyre td {
padding: 10px 12px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid #e6ebf5;
white-space: nowrap; /* цифры/размеры не переносятся */
}
.price-table--tyre thead th {
background: #f7faff;
font-weight: 600;
}
.price-table--tyre td:first-child,
.price-table--tyre th:first-child {
white-space: normal; /* у названия услуги разрешаем перенос */
}
.price-table--tyre td:last-child {
text-align: left; /* цену/надбавку читается лучше по правому краю */
}
/* На очень узких экранах позволяем переносить всё, чтобы не ломало сетку */
@media (max-width: 520px) {
.price-table--tyre th,
.price-table--tyre td {
white-space: normal;
}
}
/* Страница услуг: сетка "Мы работаем с" на мобилках */
@media (max-width: 992px) {
#fleet .grid{
grid-template-columns: repeat(3, minmax(0,1fr)) !important;
gap: 12px !important;
}
}
@media (max-width: 640px) {
#fleet .grid{
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}
#fleet .card{
padding: 12px !important;
}
#fleet .card i{
font-size: 20px !important; /* меньше иконки */
}
}
.badge {
display:inline-block; min-width:1.25rem; padding:0 0.35rem;
font-size:.75rem; line-height:1.25rem; text-align:center;
border-radius:999px; background:#ff8c00; color:#fff; vertical-align:middle;
margin-left:.35rem;
}
.hide-sm { display:inline; }
@media (max-width:768px){ .hide-sm { display:none; } }
/* === FIX: mobile header must not overlap breadcrumbs/content === */
:root { --topnav-h: 64px; } /* подгони при необходимости 56–72px */
/* высота/выравнивание самой шапки */
@media (max-width: 992px){
.top-nav{
height: var(--topnav-h);
line-height: var(--topnav-h);
}
}
/* отступ вниз для контента на мобильных */
@media (max-width: 992px){
.main-content-nobanner{
margin-top: var(--topnav-h) !important; /* контент начинается ниже шапки */
}
/* если хлебные крошки лежат в .wrap — тоже отступим */
.wrap{
padding-top: calc(24px + var(--topnav-h)) !important;
}
}
/* на всякий: крошки под контентом, а не под шапкой */
.crumbs{ position: relative; z-index: 1; }
/* сама шапка — ровно по высоте и без лишних внутренних отступов */
.top-nav{
height: var(--topnav-h);
padding-top: 0 !important;
padding-bottom: 0 !important;
display: flex;
align-items: center; /* вертикально центрируем всё содержимое */
}
@media (max-width: 992px){
.mobile-menu-btn{
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%); /* по центру по высоте шапки */
margin-left: 0; /* на всякий случай */
}
}
/* === Collapsible filters (filter-box) === */
.filter-box { margin-bottom: 16px; }
.filter-box__head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-bottom: 8px;
}
.filter-title { font-weight: 600; }
.filter-toggle {
font: inherit; color: var(--link, #0a6); background: none; border: 0; cursor: pointer;
padding: 4px 6px; border-radius: 6px;
}
.filter-toggle:hover { text-decoration: underline; }
.filter-box__body {
position: relative;
overflow: hidden;
transition: max-height .25s ease;
}
/* свернутое состояние — ограниченная высота + мягкий фейд вниз */
.filter-box.is-collapsed .filter-box__body {
/* точное значение max-height проставит JS; это запасной fallback */
max-height: 220px;
-webkit-mask-image: linear-gradient(to bottom, black 75%, transparent);
mask-image: linear-gradient(to bottom, black 75%, transparent);
}
@media (max-width: 992px){
.filter-box { margin-bottom: 12px; }
.filter-toggle { padding: 4px 4px; }
}
/* === Refine: toggle looks like a small link and sits near the title (left) === */
.filter-title{
font-weight:600;
margin: 0;
}
/* ссылка-переключатель в «мутном» стиле */
.filter-toggle{
font: inherit;
font-size: 13px;
color: var(--muted, #6b7280);
background: none;
border: 0;
padding: 0;
cursor: pointer;
text-decoration: underline;
line-height: 1.2;
}
/* ховер — акцентный цвет сайта (подставится var(--link), иначе зелёный) */
.filter-toggle:hover{
color: var(--link, #1E3A8A);
text-decoration: none;
}
/* маленький маркер-треугольник слева от текста */
.filter-toggle::before{
content: "▸";
display: inline-block;
margin-right: .35em;
transition: transform .2s ease;
transform: translateY(-1px) rotate(0deg);
}
.filter-toggle[aria-expanded="true"]::before{
transform: translateY(-1px) rotate(90deg);
}
/* тело блока — как было, без изменений; мягкая маска при сворачивании */
.filter-box__body{
position: relative;
overflow: hidden;
transition: max-height .25s ease;
}
.filter-box.is-collapsed .filter-box__body{
max-height: 220px; /* fallback, реальную высоту ставит JS */
-webkit-mask-image: linear-gradient(to bottom, black 75%, transparent);
mask-image: linear-gradient(to bottom, black 75%, transparent);
}
/* на совсем узких экранах слегка уменьшим отступы */
@media (max-width: 576px){
.filter-box__head{ gap: 8px; }
.filter-toggle{ font-size: 12.5px; }
}
/* === MOBILE HEADER SCOPE (fix) =================================== */
/* Десктоп: мобильная шапка скрыта всегда */
@media (min-width: 993px){
.top-nav{ display: none !important; }
}
/* === Cart page (q-) ============================================= */
.q-cart{ padding: 20px 0 32px; }
.q-cart__head{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.q-cart__title{ font-size: 24px; margin:0; }
.q-cart__meta{ color: var(--muted, #6b7280); }
.q-cart__layout{ display:grid; grid-template-columns: minmax(0,1fr) 360px; gap: 16px; }
.q-cart__main{ min-width: 0; }
.q-cart__side{ min-width: 0; }
.q-cart-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.q-cart-item{ display:flex; justify-content:space-between; gap:12px; padding:10px; border:1px solid rgba(0,0,0,.06); border-radius:10px; background:#fff; }
.q-cart-item__name a{ text-decoration:none; font-weight:600; }
.q-cart-item__sub{ color: var(--muted, #6b7280); font-size: 14px; }
.q-cart-item__actions .btn{ white-space:nowrap; }
.q-card{ border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:12px; background:#fff; }
.q-card + .q-card{ margin-top:12px; }
.q-card__title{ font-size:18px; margin:0 0 8px; }
.q-form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.q-form-row .input{ width:100%; }
.q-bullets{ margin: 6px 0 0; padding-left: 18px; }
.q-bullets li{ margin: 2px 0 0; }
.q-note{ margin-top:8px; font-size: 13px; }
.q-empty{ text-align:center; padding:24px 12px; border:1px dashed rgba(0,0,0,.15); border-radius:12px; background:#fff; }
.q-empty__title{ font-size:22px; font-weight:700; margin-bottom:6px; }
.q-empty__sub{ color: var(--muted, #6b7280); margin-bottom:12px; }
/* Sticky CTA (mobile) */
.q-sticky{
position: fixed; left:0; right:0; bottom:0; display:none;
padding:10px 12px; gap:10px; background:#fff; border-top:1px solid rgba(0,0,0,.08);
z-index: 1000; align-items:center; justify-content:space-between;
}
.q-sticky__text{ color: var(--muted, #6b7280); }
.q-sticky__btn{ min-width: 180px; }
@media (max-width: 1100px){
.q-cart__layout{ grid-template-columns: 1fr; }
}
@media (max-width: 992px){
.q-sticky{ display:flex; }
/* чтобы липкая панель не перекрывала низ контента */
.q-cart .wrap{ padding-bottom: 76px; }
}
/* === Cart page: darker fields like on main ===================== */
/* Текст ввода темнее */
.q-card .input,
.q-cart .input,
.q-cart textarea.input {
color: #111 !important; /* основной текст */
border-color: rgba(0,0,0,.25) !important;
background: #fff !important;
}
/* Ховер/фокус — тоже темнее */
.q-card .input:hover,
.q-cart .input:hover,
.q-cart textarea.input:hover {
border-color: rgba(0,0,0,.35) !important;
}
.q-card .input:focus,
.q-cart .input:focus,
.q-cart textarea.input:focus {
border-color: rgba(0,0,0,.5) !important;
box-shadow: 0 0 0 2px rgba(0,0,0,.06) !important; /* лёгкий акцент как на main */
outline: none;
}
/* Плейсхолдер темнее (как на главной) */
.q-card .input::placeholder,
.q-cart .input::placeholder,
.q-cart textarea.input::placeholder {
color: #555 !important;
opacity: 1;
}
/* кросс-браузер */
.q-card .input::-ms-input-placeholder,
.q-cart .input::-ms-input-placeholder,
.q-cart textarea.input::-ms-input-placeholder { color:#555 !important; }
/* Лейблы и вторичные подписи — чуть темнее */
.q-form-row label { color: #222 !important; }
.q-small.muted,
.q-note.muted,
.q-cart-item__sub,
.q-cart__meta { color: #4b5563 !important; }
/* details/summary в FAQ — как на main */
.q-cart-faq summary {
color: #222;
}
.q-cart-faq .faq-a { color: #4b5563; }
/* === Ваш заказ: тёмный список в карточке ================================== */
.q-order{
background: #fafafa; /* чуть темнее фон карточки */
border: 1px solid rgba(0,0,0,.12);
border-radius: 12px;
padding: 12px;
}
.q-order__head{
display:flex; align-items: baseline; justify-content: space-between; gap: 10px;
margin-bottom: 8px;
}
.q-order__meta{ color:#4b5563; }
.q-order-list{
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 10px;
}
/* Элемент списка — более контрастный */
.q-order-item{
display:flex; justify-content: space-between; gap:12px;
padding: 12px;
background: #f3f4f6; /* тёмнее, чем раньше */
border: 1px solid rgba(0,0,0,.18);
border-radius: 10px;
}
.q-order-item__name a,
.q-order-item__name{
color: #111; /* основной текст темнее */
font-weight: 600;
text-decoration: none;
}
.q-order-item__sub{
color:#374151; /* тёмный вторичный */
font-size: 14px;
margin-top: 2px;
}
.q-order-item__actions .btn{ white-space: nowrap; }
/* Пустой заказ внутри карточки */
.q-order-empty{
padding: 10px 4px;
}
/* Мобильные правки */
@media (max-width: 640px){
.q-order-item{ flex-direction: column; align-items: stretch; }
.q-order-item__actions{ display:flex; justify-content:flex-end; }
}
/* === Contacts page ========================================================= */
.c-title{ font-size: 28px; margin: 0 0 12px; }
.c-h2{ font-size: 18px; margin: 0 0 8px; }
.c-grid{
display: grid;
grid-template-columns: minmax(0,1fr) 44%;
gap: 16px;
}
.c-info{ display:flex; flex-direction:column; gap:12px; }
.c-card{
border:1px solid rgba(0,0,0,.06);
border-radius:12px;
padding:12px;
background:#fff;
}
.c-row{ display:grid; grid-template-columns: 140px minmax(0,1fr); gap:10px; padding:6px 0; }
.c-row + .c-row{ border-top:1px solid rgba(0,0,0,.06); }
.c-row__label{ color: var(--muted, #6b7280); }
.c-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.c-map-card .c-h2{ margin-bottom:8px; }
.c-map{
width: 100%;
height: 420px; /* под правую колонку на десктопе */
border-radius: 12px;
overflow: hidden;
background: #f3f4f6;
border:1px solid rgba(0,0,0,.06);
}
.c-map-note{ margin-top:6px; }
@media (max-width: 1100px){
.c-grid{ grid-template-columns: 1fr; }
.c-map{ height: 360px; }
}
/* === Contacts page: grid + tall banner + full-width map =================== */
.c-title{ font-size: 28px; margin: 0 0 12px; }
.c-h2{ font-size: 18px; margin: 0 0 8px; }
.c-grid{
display: grid;
grid-template-columns: minmax(0,1fr) 44%;
gap: 16px;
align-items: stretch; /* растягиваем правую колонку по высоте левой */
}
.c-info{ display:flex; flex-direction:column; gap:12px; }
.c-card{
border:1px solid rgba(0,0,0,.06);
border-radius:12px;
padding:12px;
background:#fff;
}
.c-row{ display:grid; grid-template-columns: 140px minmax(0,1fr); gap:10px; padding:6px 0; }
.c-row + .c-row{ border-top:1px solid rgba(0,0,0,.06); }
.c-row__label{ color: var(--muted, #6b7280); }
.c-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
/* высокий баннер справа: фоновое изображение, растягивается на всю высоту ряда */
.c-hero{
border:1px solid rgba(0,0,0,.06);
border-radius:12px;
background: #f3f4f6 center/cover no-repeat;
background-image: var(--hero-bg, none);
min-height: 260px; /* на случай очень короткого контента слева */
height: 100%; /* главное — растянуться по высоте ряда */
position: relative;
overflow: hidden;
}
.c-hero__inner{
position: absolute; left: 0; right: 0; bottom: 0;
padding: 14px;
background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
color: #fff;
}
.c-hero__title{ font-size: 22px; font-weight: 700; }
.c-hero__sub{ opacity: .9; }
/* карта во всю ширину ниже сетки */
.c-map-wide-wrap{ margin-top: 16px; }
/* full-width map; height управляет JS */
.c-map-wide{
width: 100%;
height: auto; /* было: 440px */
min-height: 360px; /* запас на мобилках */
border-radius: 12px;
overflow: hidden;
background: #f3f4f6;
border:1px solid rgba(0,0,0,.06);
}
@media (min-width: 1101px){
.c-map-wide{ min-height: 440px; } /* на десктопе минимум повыше */
}
@media (max-width: 1100px){
.c-grid{ grid-template-columns: 1fr; }
.c-hero{ min-height: 200px; height: auto; } /* баннер просто фиксированной высоты */
.c-map-wide{ height: 360px; }
}
/* === Contacts: layout, banner, full-width map ============================= */
.c-title{ font-size: 28px; margin: 0 0 12px; }
.c-h2{ font-size: 18px; margin: 0 0 8px; }
.c-grid{
display: grid;
grid-template-columns: minmax(0,1fr) 44%;
gap: 16px;
align-items: stretch; /* правый баннер тянется на высоту левой колонки */
}
.c-info{ display:flex; flex-direction:column; gap:12px; }
.c-card{
border:1px solid rgba(0,0,0,.06);
border-radius:12px;
padding:12px;
background:#fff;
}
.c-row{ display:grid; grid-template-columns: 140px minmax(0,1fr); gap:10px; padding:6px 0; }
.c-row + .c-row{ border-top:1px solid rgba(0,0,0,.06); }
.c-row__label{ color: var(--muted, #6b7280); }
.c-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
/* Баннер справа */
.c-hero{
border:1px solid rgba(0,0,0,.06);
border-radius:12px;
background: #f3f4f6 center/cover no-repeat;
background-image: var(--hero-bg, none);
min-height: 260px; /* если слева мало контента */
height: 100%;
position: relative;
overflow: hidden;
}
.c-hero__inner{
position: absolute; left: 0; right: 0; bottom: 0;
padding: 14px;
background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
color: #fff;
}
.c-hero__title{ font-size: 22px; font-weight: 700; }
.c-hero__sub{ opacity: .9; }
/* Карта во всю ширину — «рамка» с радиусом, холст без радиуса/масок */
.c-map-wide-wrap{ margin-top: 16px; }
.c-map-frame{
width: 100%;
border-radius: 12px;
overflow: hidden;
border:1px solid rgba(0,0,0,.06);
background:#f3f4f6;
}
.c-map-canvas{
width:100%;
height:auto; /* высоту задаёт JS */
min-height:360px;
border:0;
border-radius:0 !important;
overflow:visible !important;
transform:none !important;
filter:none !important;
backface-visibility: visible !important;
will-change: auto !important;
}
@media (min-width:1101px){
.c-map-canvas{ min-height:440px; }
}
@media (max-width:1100px){
.c-grid{ grid-template-columns: 1fr; }
.c-hero{ min-height: 200px; height: auto; }
}
/* Contacts: больше зазор между контактами и картой */
.c-map-wide-wrap{ margin-top: 28px !important; }
@media (min-width:1101px){
.c-map-wide-wrap{ margin-top: 200px !important; }
}
.c-grid{ margin-bottom: 8px; } /* мобилки */
@media (min-width:1101px){
.c-grid{ margin-bottom: 12px; } /* десктоп */
}
/* === About (Автэкс) ======================================================= */
.a-hero{
border: 1px solid rgba(0,0,0,.06);
border-radius: 12px;
background: #f3f4f6 center/cover no-repeat;
background-image: var(--a-hero-bg, none);
min-height: 220px;
position: relative;
overflow: hidden;
margin-bottom: 14px;
}
.a-hero__content{
position: absolute; left:0; right:0; bottom:0;
padding: 16px;
color: #fff;
background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
}
.a-hero__title{ font-size: 26px; font-weight: 800; margin: 0 0 6px; }
.a-hero__sub{ opacity:.95; }
.a-h2{ font-size: 20px; margin: 0 0 10px; }
.a-h3{ font-size: 16px; margin: 0 0 8px; }
.a-card{
border:1px solid rgba(0,0,0,.06);
border-radius:12px;
padding:12px;
background:#fff;
}
.a-intro .a-card p{ margin: 0 0 10px; }
.a-section{ margin: 18px 0; }
.a-grid{
display:grid; gap:12px;
}
.a-grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.a-list{ margin:0; padding-left: 18px; }
.a-list li{ margin: 3px 0; }
.a-stats{
margin: 18px 0;
}
.a-stats__grid{
display:grid; gap:10px;
grid-template-columns: repeat(4, minmax(0,1fr));
}
.a-stat{
border:1px solid rgba(0,0,0,.06);
border-radius:12px;
background:#fff;
padding:12px;
text-align:center;
}
.a-stat__num{ font-size: 24px; font-weight: 800; line-height:1; }
.a-stat__label{ color: var(--muted, #6b7280); margin-top: 6px; }
.a-cta{
margin: 22px 0 8px;
}
.a-cta__inner{
border:1px solid rgba(0,0,0,.06);
border-radius:12px;
background:#fff;
padding:12px;
display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.a-cta__title{ font-weight: 800; font-size: 18px; }
.a-cta__sub{ color: var(--muted, #6b7280); }
.a-cta__actions{ display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width: 1100px){
.a-grid--2{ grid-template-columns: 1fr; }
.a-stats__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* About: hero taller + configurable height */
.a-hero{
border: 1px solid rgba(0,0,0,.06);
border-radius: 12px;
background: #f3f4f6 center/cover no-repeat;
background-image: var(--a-hero-bg, none);
/* новая строка: управляемая высота */
height: var(--a-hero-h, clamp(280px, 42vh, 560px));
position: relative;
overflow: hidden;
margin-bottom: 14px;
}
.a-hero__content{
position: absolute; left:0; right:0; bottom:0;
padding: 16px;
color: #fff;
background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
}