/* =====================================================================
TLS — Mobile / Adaptive layer
Подключается ПОСЛЕ style.css. Всё внутри media-queries — десктоп не затрагивается.
Брейкпоинты:
≤1199 — нейтрализация десктопных фикс-офсетов/декора (планшет и ниже)
≤991 — крупные правки сеток
≤767 — основной мобильный дизайн (телефоны)
≤575 — узкие телефоны
≤374 — iPhone SE / очень узкие
===================================================================== */
:root{
--tls-green:#006759;
--tls-green-d:#00514699;
--tls-gold:#BB9959;
--tls-gold-l:#ebcd52;
--tls-ink:#1d1d1d;
--tls-muted:#6b7280;
--tls-line:rgba(0,0,0,.08);
}
/* ===================================================================
1. ГЛОБАЛЬНОЕ (≤1199) — убираем источники горизонтального скролла
=================================================================== */
@media (max-width: 1199.98px){
html{ max-width:100%; overflow-x:hidden; }
body{ max-width:100%; }
img{ max-width:100%; height:auto; }
/* большие фикс-офсеты дизайна → убираем */
.pl-200{ padding-left:0 !important; }
.mt-100{ margin-top:40px !important; }
.about{ padding-left:0 !important; padding-right:0 !important; }
/* заголовки секций и текстовые блоки часто имеют margin-left:200px —
это толкало их вправо за край экрана. Сбрасываем повсеместно. */
.title, .title-bl, .titlez, .titles, .title-green, .doptit, .doptitles, .serv-title,
.big-word, .abouts p, .partner p, .partner .doptit, .partner .komp,
.portfolio .title, .why .title, .service .title,
.to-text, .grey-p, .komp, .ts1, .to-dopblock, .lit-dir-block,
.ved-text, .w-main, .x1, .x2{
margin-left:0 !important;
padding-left:0 !important;
}
/* стрелочные/вертикальные разделители колонок (.poloska и пр.) на мобиле убираем */
.why [class*="col-"]{ border-left:0 !important; border-right:0 !important; }
.slider .text1 .serv-title{ padding-left:0 !important; }
.slider .text1 .x1{ padding-left:0 !important; }
.slider .text1 .x2{ padding-left:0 !important; }
.slider .w-main{ width:100% !important; padding-left:0 !important; }
/* снимаем жёсткие высоты */
.slider{ height:auto !important; }
.service{ height:auto !important; }
/* декоративные absolute-картинки — прячем (они только фон/украшение).
.w-main и .sota-up на главной НЕ прячем — они переиспользованы в hero.css */
.sota-s,.w-project,.w-history,.w-to,.w-ved,.w-komp,
.word,.project_spider,.sots,.sots-his,.teob1,.teob2,.ved-soty,.bg_dov,
.ab-icon,.spider{
display:none !important;
}
/* таблицы из [[*content]] не должны рвать вёрстку */
.blockx table,.content table{ display:block; width:100%; overflow-x:auto; }
}
/* ===================================================================
2. ПЛАНШЕТ И НИЖЕ (≤991) — сетки карточек, слайдер-картинка
=================================================================== */
@media (max-width: 991.98px){
.slider .sota-slider,
.home .slider .sota-slider{
position:static !important;
width:100% !important;
right:auto !important; top:auto !important;
margin-top:24px;
border-radius:0 0 18px 18px; /* верхние углы прямые, низ скруглён */
overflow:hidden;
}
.slider .sota-slider img{ border-radius:0 0 18px 18px; }
/* «соты» услуг на главной: из абсолютных гексагонов — в обычные карточки */
.service .main-serv{ position:static !important; height:auto !important; }
.service .main-serv .logos,
.service .main-serv .serv,
.service .main-serv .serv1{ display:none !important; }
.service .hex-grid{
position:static !important;
opacity:1 !important; transform:none !important; pointer-events:auto !important;
display:grid !important;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin-top:22px;
}
.hex-serv{
position:static !important;
width:100% !important;
height:auto !important;
aspect-ratio:auto !important;
min-height:130px;
padding:18px 14px !important;
margin:0 !important;
transform:none !important;
left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
background:#fff !important;
border:1.5px solid var(--tls-gold) !important;
border-radius:16px !important;
display:flex !important; align-items:center; justify-content:center;
box-shadow:0 4px 14px rgba(0,0,0,.06);
}
/* убираем гексагональные клип-путь псевдоэлементы */
.hex-serv::before,
.hex-serv::after{ display:none !important; }
.hex-serv:hover{ transform:none !important; filter:none !important; }
.hex-inner img{ width:48px !important; margin-bottom:8px !important; }
.hex-inner{ font-size:13px !important; }
.hex-inner p{ font-size:12px !important; }
}
/* ===================================================================
3. ОСНОВНОЙ МОБИЛЬНЫЙ ДИЗАЙН (≤767) — телефоны
=================================================================== */
@media (max-width: 767.98px){
/* --- базовая типографика: читаемо и крупно --- */
body{ font-size:16px; line-height:1.6; }
/* у некоторых секций .container имеет декоративный padding-left:200-280px —
перебиваем через !important, чтобы контент шёл на всю ширину */
.container{ width:100% !important; max-width:100% !important; padding-left:18px !important; padding-right:18px !important; margin-left:auto !important; margin-right:auto !important; }
/* обычный текст переносим ТОЛЬКО по словам (без разрыва слов посередине) */
p, li, .text-blocks, .text-row, h1, h2, h3, h4, .title, .x1, .x2{ overflow-wrap:break-word; word-break:normal; hyphens:none; }
/* агрессивный перенос — только для длинных email/ссылок */
.otstup a, .block-contact a, a[href^="mailto"], a[href^="tel"]{ overflow-wrap:anywhere; word-break:break-word; }
/* КЛЮЧЕВОЕ: широкие колонки часто заданы как col-sm-7/8/9/10 БЕЗ базового
col-12 — ниже 576px Bootstrap не делает их на всю ширину, и контент
липнет в правую половину. Принудительно растягиваем такие колонки. */
[class*="col-sm-5"],[class*="col-sm-6"],[class*="col-sm-7"],[class*="col-sm-8"],
[class*="col-sm-9"],[class*="col-sm-10"],[class*="col-sm-11"],
[class*="col-md-5"],[class*="col-md-6"],[class*="col-md-7"],[class*="col-md-8"],
[class*="col-md-9"],[class*="col-md-10"],[class*="col-md-11"]{
flex:0 0 100% !important;
max-width:100% !important;
width:100% !important;
}
h1, .slider .text1 .serv-title h1, .slider h1{
font-size:clamp(26px,7vw,34px) !important;
line-height:1.2 !important;
margin-bottom:18px !important;
}
.title, .service .title, .partner .title{
font-size:clamp(24px,6.4vw,32px) !important;
line-height:1.18 !important;
}
.title-bl, .titlez, .titles, h2, h3, h4{
font-size:clamp(20px,5.4vw,26px) !important;
line-height:1.25 !important;
}
p, li, .text-blocks, .text-row{ font-size:16px; line-height:1.62; }
.slider .text-slider p, .slider .text1 .x1, .slider .text1 .x2{
font-size:17px !important;
}
.big-word{ font-size:clamp(22px,6.4vw,36px) !important; line-height:1.12; overflow-wrap:break-word; word-break:normal; text-align:center; }
/* --- HERO главной: слайдер картинок сверху (на всю ширину), затем
заголовок → линия → подзаголовок → кнопка --- */
.slider{ height:auto !important; padding:0 0 34px !important; background:#CBCBCB; }
.slider .container{ padding-left:0 !important; padding-right:0 !important; }
.slider .row{ display:flex !important; flex-direction:column !important; margin-left:0 !important; margin-right:0 !important; }
.slider .row > [class*="col-"]{ padding-left:0 !important; padding-right:0 !important; }
/* колонка слайдера — первой, на всю ширину, в потоке (а не absolute) */
.slider .sota-slider,
.home .slider .sota-slider{
order:-1 !important;
position:static !important; width:100% !important;
right:auto !important; top:auto !important; left:auto !important;
margin:0 0 22px 0 !important;
}
/* показываем слайды owl (старый @media прятал ВСЕ img в .slider) */
.slider .sota-slider .owl-carousel{ display:block !important; }
.slider .sota-slider .owl-carousel-slider img,
.slider .sota-slider .owl-item img{
display:block !important; width:100% !important; height:auto !important;
border-radius:0 0 22px 22px !important;
}
/* текстовая часть — с боковыми отступами, по левому краю */
.slider .text1{ padding:0 18px !important; }
.slider .text1 .x1{
text-align:left !important; padding:0 !important;
font-size:clamp(20px,5.6vw,26px) !important; line-height:1.32 !important;
color:#1d1d1d !important; font-weight:600 !important; margin-bottom:18px !important;
}
.slider .text1 hr{
position:static !important; width:56px !important; left:auto !important;
margin:0 0 18px 0 !important; border-top:3px solid var(--tls-green) !important; opacity:1 !important;
}
.slider .text1 .x2{
text-align:left !important; padding:0 0 0 0 !important; padding-top:0 !important;
font-size:18px !important; margin-bottom:18px !important; color:#333 !important;
}
.slider .text1 .zayavka{ padding:0 !important; }
/* --- секция «Почему мы»: счётчики и слова по центру, на всю ширину,
без узких колонок, вертикальных линий и разрыва слов --- */
.why{ padding:36px 0 !important; }
.why .row{ justify-content:center !important; }
.why .poloska { padding: 30px;}
.why .why-block .why_small {margin-top: 0 !important;font-size: 14px !important;}
.why .why-block .why_small1 {margin-top: 0 !important;font-size: 14px !important;}
.why .why-block .why_small2 {margin-top: 0 !important;width:100%; font-size: 14px !important;}
.why [class*="col-"]{ flex:0 0 100% !important; max-width:100% !important; text-align:center !important; }
.why-block{ border:0 !important; text-align:center !important; padding:0 !important; }
.why .big-word{
font-size:clamp(20px,6vw,32px) !important; line-height:1.1 !important;
white-space:nowrap !important; text-align:center !important;
overflow-wrap:normal !important; word-break:keep-all !important;
}
.why p, .why .poloska{ text-align:center !important; }
.why .video-bg{ margin-top:18px; }
.service{ padding:32px 0 !important; }
.blockx,.block1,.block2,.block3,.block4,.block5,.block6{ padding:28px 0 !important; }
section, .blockx{ overflow:hidden; }
/* --- сетка «О компании»: аккуратные карточки в 1 колонку --- */
.about{ padding:24px 0 8px !important; }
.about .row > [class*="col-"]{ margin-bottom:14px; }
.about a{
border-radius:18px !important;
padding:22px 20px !important;
min-height:auto !important;
height:auto !important;
display:flex !important; align-items:center; gap:16px;
text-align:left;
}
.about a img{ height:54px !important; margin-bottom:0 !important; }
.about a p{ font-size:18px !important; margin:0 !important; }
.about .about-logo img{ height:120px !important; }
/* --- «этапы»: бейдж-номер слева, текст занимает всю оставшуюся ширину --- */
.etap-block{
display:flex !important; align-items:flex-start; gap:14px;
width:100% !important; max-width:100% !important;
margin-bottom:16px !important;
}
.etap-block .hex{ flex:0 0 auto; margin:0 !important; }
.etap-block .etap-text,
.etap-block .etap-title{ flex:1 1 auto; width:auto !important; display:block !important; }
/* --- «компетенции», карточки-аккордеоны --- */
.komp{ margin-bottom:16px !important; }
.adv-card{ margin-bottom:14px !important; }
/* --- кнопки: крупные, удобные для пальца --- */
.knopka, .open-form-btn, .vopros-knopka a{
display:inline-block;
padding:15px 30px !important;
font-size:17px !important;
border-radius:12px !important;
line-height:1.2;
}
.knopka:hover,.knopka:active,.knopka:focus{ padding:15px 30px !important; }
.zayavka .zayavka_bg .zayavka_text .knopka{ font-size:18px !important; }
/* --- блок заявки --- */
.zayavka .zayavka_bg{ padding-left:0 !important; padding-right:0 !important; }
.zayavka .zayavka_bg .zayavka_text{ padding:54px 8px !important; text-align:center; max-width:100% !important; width:100% !important; }
.zayavka .zayavka_bg p{ font-size:clamp(16px,4.4vw,22px) !important; line-height:1.28 !important; overflow-wrap:break-word; word-break:normal; hyphens:none; -webkit-hyphens:none; }
.zayavka .form-wrapper .modal-content{ width:100% !important; padding:22px !important; }
/* --- CTA-полоса «остались вопросы» --- */
.vopros{ text-align:center; padding:28px 0 !important; }
.vopros .vopros-knopka{ margin-top:16px; }
/* --- партнёры / бегущая лента --- */
.partner{ padding:32px 0 40px !important; }
.partner .komp-z{ width:78% !important; }
/* --- owl: аккуратные отступы стрелок --- */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next{ width:34px; height:34px; }
/* картинки-иллюстрации справа от текста — по центру под текстом */
.kogo-img,.his-img,.vers,.ved-img,.to-img,.about_team,.politika-img,.komp-img{
display:block; margin:18px auto 0 !important; max-width:80% !important; height:auto !important;
position:static !important;
}
/* фото команды на главной (.ab-img) задано position:absolute → контейнер
схлопывается и картинка наезжает на карточки. Возвращаем в поток. */
.abouts .ab-img{ position:relative !important; height:auto !important; }
.abouts .ab-img img{
position:static !important;
width:100% !important; height:auto !important; max-width:100% !important;
left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
margin:0 !important; border-radius:18px !important;
}
/* карточки новостей: заголовок не обрезаем жёсткой высотой (налезал на дату) */
.portfolio .news-title, .news-block .news-title{
font-size:17px !important; line-height:1.3 !important;
height:auto !important; max-height:none !important;
display:-webkit-box !important; -webkit-box-orient:vertical;
-webkit-line-clamp:3 !important; overflow:hidden !important;
margin-bottom:8px !important;
}
}
/* ===================================================================
4. ХЕДЕР + МОБИЛЬНОЕ МЕНЮ (≤991) — стилизованный, липкий
=================================================================== */
@media (max-width: 991.98px){
/* фиксированный аккуратный хедер */
.header{
position:fixed; top:0; left:0; right:0; width:100%; z-index:1000;
background:#fff;
box-shadow:0 2px 14px rgba(0,0,0,.07);
padding:10px 0 !important;
}
/* компенсация: хедер ушёл из потока (fixed) — отодвигаем контент вниз
на высоту шапки, чтобы первый блок не прятался под ней */
.wrapper > .content{ padding-top:72px !important; }
/* хедер-колонки на мобиле используют базовые col-7/col-1/col-1/col-3,
что ломает раскладку. Делаем чистый flex: лого слева, бургер справа. */
.header .row{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; margin-left:0 !important; margin-right:0 !important; }
.header .row > .col-1{ display:none !important; } /* колонки меню и поиска */
.header .row > .col-7{ flex:1 1 auto !important; width:auto !important; max-width:none !important; padding-left:0 !important; }
.header .row > .col-3{ flex:0 0 auto !important; width:auto !important; max-width:none !important; margin-left:auto !important; padding-right:0 !important; }
.header .logo img{ height:60px !important; }
/* лого на главной — та же зелёная плашка, что на внутренних (логотип белый,
поэтому без зелёного фона он не виден на белой шапке) */
.home .header .logo{
background:#006759 !important;
position:absolute !important;
padding:46px 15px 14px 15px !important;
top:-28px !important;
border-radius:24px !important;
}
.header .logo a{
padding:46px 15px 14px 15px !important;
top:-28px !important;
border-radius:24px !important;
}
/* прячем десктопное горизонтальное меню/поиск/языки в шапке */
.header .menu, .header .search, .header .lang{ display:none !important; }
/* бургер-триггер — фирменная круглая кнопка */
.header .hc-nav-trigger.hc-nav-1{
position:relative; display:block;
width:52px; height:52px; padding:0 !important;
margin-left:auto;
background:var(--tls-green) !important;
border-radius:14px !important;
box-shadow:0 6px 16px rgba(0,103,89,.30);
}
.header .hc-nav-trigger span,
.header .hc-nav-trigger span::before,
.header .hc-nav-trigger span::after{
background:#fff !important; height:2px !important; width:22px !important;
left:50%; right:auto !important; margin-left:-11px;
border-radius:2px;
}
.header .hc-nav-trigger span{ top:50%; }
.header .hc-nav-trigger span::before{ top:-7px !important; }
.header .hc-nav-trigger span::after{ bottom:-7px !important; top:auto !important; }
/* ---------- off-canvas (hc-offcanvas-nav) — СВЕТЛАЯ тема в стиле сайта ---------- */
.hc-offcanvas-nav{ font-family:inherit; }
.hc-offcanvas-nav .nav-container{
width:86vw !important; max-width:360px !important;
background:#f1f3f4 !important;
box-shadow:-12px 0 40px rgba(0,0,0,.22);
}
/* открыто/закрыто позиционирование — ниже отдельным блоком по структуре плагина */
/* сплошной светлый фон на панели и всех уровнях (overlap не должен просвечивать) */
.hc-offcanvas-nav .nav-wrapper{ background:#f1f3f4 !important; }
.hc-offcanvas-nav.nav-levels-overlap ul .nav-wrapper{
background:#f1f3f4 !important; box-shadow:-14px 0 40px rgba(0,0,0,.18) !important;
}
.hc-offcanvas-nav ul,
.hc-offcanvas-nav ul ul{ background:transparent !important; }
/* ПЕРЕНОС длинных названий проектов без обрезки */
.hc-offcanvas-nav .nav-wrapper,
.hc-offcanvas-nav ul,
.hc-offcanvas-nav li{ box-sizing:border-box !important; max-width:100% !important; }
.hc-offcanvas-nav ul li a{
box-sizing:border-box !important; max-width:100% !important;
white-space:normal !important; overflow-wrap:anywhere !important; word-break:break-word !important;
color:#23302d !important; font-size:16px !important; font-weight:500 !important;
padding:14px 20px !important; line-height:1.32 !important;
border-bottom:1px solid rgba(0,0,0,.06) !important;
}
/* заголовок уровня () */
.hc-offcanvas-nav h2{
color:#006759 !important; font-family:inherit !important;
font-size:13px !important; letter-spacing:.06em; text-transform:uppercase; font-weight:700 !important;
}
.hc-offcanvas-nav li{ border:0 !important; }
.hc-offcanvas-nav ul li a:hover,
.hc-offcanvas-nav li.level-open > a{ background:rgba(0,103,89,.07) !important; color:#006759 !important; }
.hc-offcanvas-nav li.active > a{ color:var(--tls-gold) !important; }
/* «Назад» */
.hc-offcanvas-nav li.nav-back,
.hc-offcanvas-nav li.nav-back > a{
background:#e4e7e9 !important; color:#006759 !important;
font-size:14px !important; font-weight:700 !important;
text-transform:uppercase; letter-spacing:.03em;
}
/* «Закрыть меню» */
.hc-offcanvas-nav li.nav-close > a{ background:transparent !important; color:#5b6663 !important; font-weight:600 !important; }
/* крестик ✕ закрытия — зелёный */
.hc-offcanvas-nav li.nav-close span::before,
.hc-offcanvas-nav li.nav-close span::after{
width:20px !important; height:2px !important;
border:0 !important; background:#006759 !important; border-radius:2px !important;
margin-top:-1px !important; margin-left:-10px !important;
}
.hc-offcanvas-nav li.nav-close span::before{ transform:rotate(45deg) !important; }
.hc-offcanvas-nav li.nav-close span::after { transform:rotate(-45deg) !important; }
/* шеврон › подменю — зелёный, без вертикальной полоски-разделителя */
.hc-offcanvas-nav span.nav-next{ border-left:0 !important; }
.hc-offcanvas-nav a[href]:not([href="#"]) > span.nav-next{ border-left:0 !important; }
.hc-offcanvas-nav span.nav-next::before{
width:9px !important; height:9px !important; box-sizing:border-box !important; border:0 !important;
border-top:2px solid #006759 !important; border-right:2px solid #006759 !important;
background:none !important; margin:0 !important;
transform:translate(-50%,-50%) rotate(45deg) !important;
}
.hc-offcanvas-nav span.nav-next::after{ display:none !important; }
.hc-offcanvas-nav li.nav-back span::before{
width:9px !important; height:9px !important; box-sizing:border-box !important; border:0 !important;
border-bottom:2px solid #006759 !important; border-left:2px solid #006759 !important;
background:none !important; margin:0 !important;
transform:translate(-50%,-50%) rotate(45deg) !important;
}
/* переключатель языков */
.hc-offcanvas-nav .lang-menu{
display:flex !important; gap:10px; justify-content:center;
padding:20px !important; margin-top:8px !important; border-top:0 !important;
}
.hc-offcanvas-nav .lang-menu li{ display:inline-block !important; }
.hc-offcanvas-nav .lang-menu li a{
border:1px solid rgba(0,103,89,.35) !important; border-radius:10px !important;
padding:8px 16px !important; font-weight:700 !important; text-transform:uppercase;
color:#006759 !important; font-size:14px !important;
}
.hc-offcanvas-nav .lang-menu li a.active{
background:var(--tls-gold) !important; color:#fff !important; border-color:var(--tls-gold) !important;
}
}
/* ===================================================================
5. FOOTER (≤767) — стопкой, по центру, читаемо
=================================================================== */
@media (max-width: 767.98px){
.footer{ text-align:center; padding:40px 0 28px !important; }
.footer .logo img{ height:110px !important; margin-top:0 !important; }
.footer .ztop{ text-align:center; margin:18px 0; }
.footer .address,.footer .f-contact{ margin-bottom:24px; }
.footer .smm-block .smm{
position:static !important; right:auto !important;
text-align:center; margin-top:10px;
}
.footer .menu{ display:none !important; }
.copyright{ text-align:center; }
.copyright .menuz{ text-align:center; margin-top:14px; }
.copyright .menuz a{ display:inline-block; margin:0 8px 8px; }
}
/* ===================================================================
6. УЗКИЕ ТЕЛЕФОНЫ (≤575)
=================================================================== */
@media (max-width: 575.98px){
.container{ padding-left:14px !important; padding-right:14px !important; }
.service .hex-grid{ grid-template-columns:1fr !important; }
.about a{ padding:18px 16px !important; }
.about a img{ height:46px !important; }
.about a p{ font-size:17px !important; }
.kogo-img,.his-img,.vers,.ved-img,.to-img,.about_team,.politika-img{
max-width:100% !important;
}
}
/* ===================================================================
7. iPhone SE / очень узкие (≤374)
=================================================================== */
@media (max-width: 374.98px){
body{ font-size:15px; }
.container{ padding-left:12px !important; padding-right:12px !important; }
h1, .slider .text1 .serv-title h1, .slider h1{ font-size:24px !important; }
.title, .service .title, .partner .title{ font-size:22px !important; }
.knopka, .open-form-btn, .vopros-knopka a{ padding:13px 22px !important; font-size:16px !important; }
.header .logo img{ height:52px !important; }
.header .hc-nav-trigger.hc-nav-1{ width:48px; height:48px; }
.hc-offcanvas-nav .nav-container{ width:92vw !important; }
}
/* ============================================================
Мобильная адаптация модалки «Оставить заявку» (TLS)
Чанки: modalTpl / modalTpl1 / modalTpl2
Кнопка закрытия:
Перебиваем style.css: .modal-content width:500px, padding 20px 50px,
.modal-dialog max-width:530px, .close (абсолютная), крупные поля.
Десктоп (>=992px) НЕ затрагивается.
============================================================ */
@media (max-width: 767.98px) {
/* --- Диалог на всю ширину с разумными полями --- */
.modal-dialog {
margin: 12px !important;
max-width: calc(100% - 24px) !important;
width: auto !important;
}
/* --- Контент: не фикс. 500px, а вся доступная ширина --- */
.modal-content,
.zayavka .form-wrapper .modal-content {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 18px 16px 20px !important; /* перебиваем 20px 50px / 30px */
border-radius: 16px !important;
border-width: 2px !important;
position: relative;
box-sizing: border-box;
}
/* --- Шапка: освобождаем место под кнопку закрытия --- */
.modal-content .modal-header {
display: block !important;
min-height: 40px !important; /* чтобы крестик не налезал на поля */
padding: 0 !important;
margin: 0 0 4px 0 !important;
border: 0 !important;
position: relative;
}
.modal-content .modal-header h4 {
font-size: 22px !important;
line-height: 1.25 !important;
margin-bottom: 18px !important;
padding-top: 8px !important; /* было 70px — слишком много на мобиле */
}
/* --- Кнопка ЗАКРЫТИЯ: правый верхний угол, крупная, видимая,
не перекрывает заголовок/поля --- */
.modal-content .modal-header .close,
.modal-content .close,
.modal .close,
.modal .btn-close {
position: absolute !important;
top: 8px !important;
right: 8px !important;
width: 44px !important; /* удобная зона нажатия для пальца */
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
font-size: 26px !important; /* размер самого крестика */
line-height: 1 !important;
color: #006759 !important;
background: #fff !important;
border-radius: 50% !important;
opacity: 1 !important;
z-index: 10 !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.modal-content .modal-header .close:active,
.modal-content .close:active {
color: #BB9959 !important;
}
/* --- Тело формы: адекватные отступы, отступ сверху под крестик --- */
.modal-content .modal-body,
.zayavka .form-wrapper .modal-content .modal-body {
padding: 28px 0 0 0 !important; /* верхний отступ освобождает крестик */
border: 0 !important;
}
.modal-content .modal-body .form-group,
.zayavka .form-wrapper .modal-content .modal-body .form-group {
margin-bottom: 14px !important;
}
/* --- Поля ввода: крупные, удобные для пальца --- */
.modal-content .modal-body .form-control,
.form-wrapper .modal-content .modal-body .form-control {
width: 100% !important;
height: 52px !important;
font-size: 16px !important; /* >=16px — iOS не зумит при фокусе */
padding: 12px 16px !important;
border-radius: 12px !important;
box-sizing: border-box;
}
.modal-content .modal-body textarea,
.modal-content .modal-body .form-text {
width: 100% !important;
min-height: 96px !important;
max-height: 160px !important;
font-size: 16px !important;
padding: 14px 16px !important;
border-radius: 12px !important;
box-sizing: border-box;
}
/* --- Чекбокс согласия: читаемый, аккуратный --- */
.modal-content .custom-checkbox > span,
.modal-content .custom-checkbox.check span {
font-size: 13px !important;
line-height: 1.35 !important;
}
/* --- Подвал: нормальные отступы, элементы в столбик --- */
.modal-content .modal-footer,
.zayavka .form-wrapper .modal-content .modal-footer {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
padding: 8px 0 4px !important; /* было 0 0 50px */
border: 0 !important;
gap: 4px;
}
.modal-content .modal-footer p {
text-align: center !important;
margin: 10px 0 12px !important;
font-size: 15px !important;
}
/* --- Кнопка отправки и контактные кнопки: крупные, на всю ширину --- */
.modal-content .modal-footer .knopka,
.modal-content .modal-footer input[type="submit"].knopka {
display: block !important;
width: 100% !important;
padding: 15px 24px !important;
font-size: 17px !important;
border-radius: 12px !important;
margin: 0 !important;
text-align: center;
}
.modal-content .modal-footer .knopka:hover,
.modal-content .modal-footer .knopka:active,
.modal-content .modal-footer .knopka:focus {
padding: 15px 24px !important; /* без «прыжка» паддинга на мобиле */
}
/* контактные ссылки (WhatsApp / Связаться) — в столбик, без бокового сдвига */
.modal-content .modal-footer .form-group {
display: flex !important;
flex-direction: column !important;
gap: 10px;
width: 100% !important;
margin: 12px 0 0 0 !important;
}
.modal-content .modal-footer .whatsapp,
.modal-content .modal-footer .phone {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
margin: 0 !important;
padding: 14px 20px !important;
text-align: center;
}
.modal-content .modal-footer .phone:hover {
padding: 14px 20px !important;
}
}
/* ============ FIX: sliders ============ */
/* =====================================================================
TLS — Слайдеры owl-carousel: видимые стрелки на мобиле + фикс текста новостей
Подключать ПОСЛЕ style.css и mobile.css.
Всё внутри @media — десктоп (≥992) НЕ затрагивается.
Контекст (scripts.chunk.html):
nav:true → owl-carousel-news, -portfolio, -sert, -pismo (стрелки рендерятся)
nav:false → owl-carousel-zakaz (бегущая лента), owl-carousel-slider (hero-фейдер)
Почему стрелок не видно на мобиле:
В style.css кнопки .owl-prev/.owl-next позиционированы за пределами слайдера
(left:-56px / right:-56px) под десктопный .container{padding:0 80px}.
На мобиле mobile.css ужимает .container до padding:18px → кнопки уезжают
за край вьюпорта. Плюс цвет #f4f3f2 со светло-серой стрелкой почти не виден.
===================================================================== */
/* ===================================================================
1. СТРЕЛКИ НА МОБИЛЕ (≤991) — фирменный зелёный кружок с белой стрелкой
Применяем ко всем каруселям с nav:true.
=================================================================== */
@media (max-width: 991.98px){
/* контейнер навигации — в потоке под слайдером, по центру */
.portfolio .owl-nav,
.news-block-wrap .owl-nav,
.sert-block .owl-nav,
.blag-block .owl-nav,
.owl-carousel-news .owl-nav,
.owl-carousel-portfolio .owl-nav,
.owl-carousel-sert .owl-nav,
.owl-carousel-pismo .owl-nav{
display:flex !important;
justify-content:center !important;
align-items:center !important;
gap:18px !important;
margin-top:18px !important;
position:static !important;
}
/* сами кнопки: круглый зелёный таргет ~44px, поверх слайдов */
.portfolio .owl-nav button.owl-prev,
.portfolio .owl-nav button.owl-next,
.sert-block .owl-nav button.owl-prev,
.sert-block .owl-nav button.owl-next,
.blag-block .owl-nav button.owl-prev,
.blag-block .owl-nav button.owl-next,
.owl-carousel-news .owl-nav button.owl-prev,
.owl-carousel-news .owl-nav button.owl-next,
.owl-carousel-portfolio .owl-nav button.owl-prev,
.owl-carousel-portfolio .owl-nav button.owl-next,
.owl-carousel-sert .owl-nav button.owl-prev,
.owl-carousel-sert .owl-nav button.owl-next,
.owl-carousel-pismo .owl-nav button.owl-prev,
.owl-carousel-pismo .owl-nav button.owl-next{
position:static !important;
left:auto !important; right:auto !important; top:auto !important;
width:44px !important; height:44px !important;
min-width:44px !important;
border-radius:50% !important;
background:#006759 !important;
color:#fff !important;
border:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:0 !important; /* прячем дефолтный текст-глиф owl */
line-height:1 !important;
box-shadow:0 4px 12px rgba(0,103,89,.30) !important;
z-index:20 !important;
opacity:1 !important;
cursor:pointer !important;
}
/* белая стрелка-шеврон рисуем из border (без зависимости от шрифта/глифа) */
.portfolio .owl-nav button.owl-prev::before,
.sert-block .owl-nav button.owl-prev::before,
.blag-block .owl-nav button.owl-prev::before,
.owl-carousel-news .owl-nav button.owl-prev::before,
.owl-carousel-portfolio .owl-nav button.owl-prev::before,
.owl-carousel-sert .owl-nav button.owl-prev::before,
.owl-carousel-pismo .owl-nav button.owl-prev::before,
.portfolio .owl-nav button.owl-next::before,
.sert-block .owl-nav button.owl-next::before,
.blag-block .owl-nav button.owl-next::before,
.owl-carousel-news .owl-nav button.owl-next::before,
.owl-carousel-portfolio .owl-nav button.owl-next::before,
.owl-carousel-sert .owl-nav button.owl-next::before,
.owl-carousel-pismo .owl-nav button.owl-next::before{
content:"" !important;
display:block !important;
width:11px !important; height:11px !important;
border-top:2.5px solid #fff !important;
border-right:2.5px solid #fff !important;
box-sizing:border-box !important;
}
/* левая стрелка ‹ */
.portfolio .owl-nav button.owl-prev::before,
.sert-block .owl-nav button.owl-prev::before,
.blag-block .owl-nav button.owl-prev::before,
.owl-carousel-news .owl-nav button.owl-prev::before,
.owl-carousel-portfolio .owl-nav button.owl-prev::before,
.owl-carousel-sert .owl-nav button.owl-prev::before,
.owl-carousel-pismo .owl-nav button.owl-prev::before{
transform:rotate(-135deg) !important;
margin-left:3px !important;
}
/* правая стрелка › */
.portfolio .owl-nav button.owl-next::before,
.sert-block .owl-nav button.owl-next::before,
.blag-block .owl-nav button.owl-next::before,
.owl-carousel-news .owl-nav button.owl-next::before,
.owl-carousel-portfolio .owl-nav button.owl-next::before,
.owl-carousel-sert .owl-nav button.owl-next::before,
.owl-carousel-pismo .owl-nav button.owl-next::before{
transform:rotate(45deg) !important;
margin-right:3px !important;
}
/* hover/active — чуть темнее (перебиваем #242424 из style.css) */
.portfolio .owl-nav button:hover,
.sert-block .owl-nav button:hover,
.blag-block .owl-nav button:hover,
.owl-carousel-news .owl-nav button:hover,
.owl-carousel-portfolio .owl-nav button:hover,
.owl-carousel-sert .owl-nav button:hover,
.owl-carousel-pismo .owl-nav button:hover{
background:#005146 !important;
}
/* disabled-стрелку (например в portfolio/news при loop:false) показываем
приглушённой, а не display:none — чтобы было видно «дальше некуда» */
.portfolio .owl-nav .disabled,
.owl-carousel-news .owl-nav .disabled,
.owl-carousel-portfolio .owl-nav .disabled{
display:flex !important;
opacity:.35 !important;
pointer-events:none !important;
}
}
/* ===================================================================
2. ТОЧКИ (dots) ДЛЯ HERO-СЛАЙДЕРА (≤991)
owl-carousel-slider сейчас dots:false → точки не рендерятся.
Эти стили заработают ТОЛЬКО после включения dots:true в scripts.chunk.html
(см. примечание ниже). Заранее стилизуем под фирменный зелёный.
=================================================================== */
@media (max-width: 991.98px){
.owl-carousel-slider .owl-dots{
display:flex !important;
justify-content:center !important;
gap:8px !important;
margin-top:14px !important;
position:relative !important;
z-index:20 !important;
}
.owl-carousel-slider .owl-dots .owl-dot span{
display:block !important;
width:9px !important; height:9px !important;
border-radius:50% !important;
background:rgba(0,103,89,.30) !important;
margin:0 !important;
transition:background .2s,transform .2s;
}
.owl-carousel-slider .owl-dots .owl-dot.active span{
background:#006759 !important;
transform:scale(1.25) !important;
}
}
/* ===================================================================
3. ФИКС ОБРЕЗАННОГО ТЕКСТА В НОВОСТЯХ (≤767)
Причина: .portfolio .news-block .dopik имеет фиксированную
height:95px + overflow:hidden (line-clamp:5) → последняя строка режется.
Также owl без autoHeight равняет высоту items.
Даём карточке показать весь текст.
=================================================================== */
@media (max-width: 767.98px){
/* описание новости — снимаем фикс-высоту и обрезку */
.portfolio .news-block .dopik,
.blockx .news-block .text-news{
height:auto !important;
max-height:none !important;
-webkit-line-clamp:unset !important;
display:block !important;
overflow:visible !important;
font-size:15px !important;
line-height:1.55 !important;
}
/* заголовок новости — без жёсткой height:50px (налезал/резался) */
.portfolio .news-block .news-title{
height:auto !important;
max-height:none !important;
-webkit-line-clamp:3 !important; /* совпадает с mobile.css */
}
/* НЕ трогаем display/высоту owl-stage/owl-item — owl сам считает ширину;
перекрытие display:flex ломает расчёт и вызывает цикл "Can not detect
viewport width". Текст новостей чинится через height:auto у .dopik выше. */
/* немного воздуха снизу карточки, чтобы текст не упирался в край */
.portfolio .news-block{
padding-bottom:6px !important;
}
.portfolio .news-block .news-img{
height:200px !important; /* было 235px — компактнее на телефоне */
}
}
/* ============ FIX: hero ============ */
/* =====================================================================
HERO главной (body.home) — мобильная версия (max-width: 767.98px)
Назначение: вместо тупого display:none показать декоративные картинки
hero красиво.
1) /img/white-word.png (.w-main) — в НИЖНЕЙ части блока слайдера,
полупрозрачным оверлеем поверх нижнего края картинки слайдера.
2) /img/sota_slider.svg (.sota-up) — бледным ФОНОМ справа-снизу,
за текстом (.x1/.x2) и кнопкой (.zayavka).
ВАЖНО: в mobile.css эти классы спрятаны в блоке @media (max-width:1199.98px):
.sota-up,.sota-s,.w-main, ... { display:none !important; }
Здесь мы перебиваем это через !important и более поздний порядок подключения
(этот файл должен подключаться ПОСЛЕ mobile.css). Из списка скрытия в
mobile.css следует убрать .w-main и .sota-up (см. отчёт).
.sota-s (вторую копию сот внутри колонки слайдера) НЕ трогаем — она
остаётся скрытой, чтобы соты не дублировались.
===================================================================== */
@media (max-width: 767.98px) {
/* делаем .slider контекстом для абсолютного позиционирования декора */
body.home .slider {
position: relative !important;
overflow: hidden !important;
}
/* ---------- 1. white-word.png (.w-main) ----------
Колонка слайдера на мобиле вытянута наверх (order:-1) и стоит в потоке.
Делаем её относительным контейнером и кладём текст-картинку в её
НИЖНЮЮ часть полупрозрачным оверлеем — поверх нижнего края слайда,
по центру, не перекрывая основное изображение. */
body.home .slider .sota-slider,
body.home.home .slider .sota-slider {
position: relative !important;
}
body.home .slider .sota-slider .w-main {
display: block !important;
position: absolute !important;
left: 50% !important;
bottom: 64px !important;
top: auto !important;
transform: translateX(-50%) !important;
width: auto !important;
max-width: 76% !important;
height: auto !important;
padding-left: 0 !important;
margin: 0 !important;
opacity: 0.92 !important;
z-index: 6 !important;
pointer-events: none !important;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)) !important;
}
/* ---------- 2. sota_slider.svg (.sota-up) — фон текста ----------
.sota-up лежит внутри .text1 (перед .x1). Делаем .text1 относительным
контейнером и кладём соты в правый нижний угол, ЗА текстом и кнопкой:
бледными (низкая непрозрачность), z-index ниже контента, клики не
перехватывают. Текст остаётся читаемым. */
body.home .slider .text1 {
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}
/* контент текстовой части — поверх сот */
body.home .slider .text1 .x1,
body.home .slider .text1 hr,
body.home .slider .text1 .x2,
body.home .slider .text1 .zayavka {
position: relative !important;
z-index: 2 !important;
}
/* белая faint-версия сот не видна на сером — прячем её и кладём
зелёную мобильную копию фоном справа за текстом/кнопкой */
body.home .slider .text1 .sota-up { display: none !important; }
body.home .slider .text1 {
background-image: url(/img/sota_mobile.svg) !important;
background-repeat: no-repeat !important;
background-position: right -34px bottom 6px !important;
background-size: 195px auto !important;
}
}
/* ============ FIX: advcards ============ */
/* =====================================================================
TLS — Mobile fix: блоки-аккордеоны (.adv-card / .adv-panel)
Страницы: услуги (template 11 «ТЭО», template 19 «Правовое сопровождение
ВЭД», template 17 «to-page»).
Подключать ПОСЛЕ style.css и mobile.css.
Всё внутри @media (max-width:767.98px) — десктоп (>=992) не затрагивается.
ЧТО ЧИНИМ И ПОЧЕМУ:
1) Текст обрезался СНИЗУ — у .adv-panel стоит overflow:hidden, а открытое
состояние .adv-card.is-open .adv-panel ограничено max-height:1200px.
Длинные панели («Автоперевозки», «Мультимодальные перевозки») не влезают
в 1200px → низ срезается. Фикс: max-height:none + overflow:visible.
2) Текст обрезался СБОКУ — у панелей жёсткая ширина (width:488px / 500px),
больше ширины телефона. Фикс: width:100%, max-width:100%, word-wrap.
3) Асимметричный отступ — .teo-block .ts1{padding-left:200px} и
.teo-block2 .container{padding-left:280px}: padding только слева.
Фикс: обнуляем левый, делаем симметрично.
4) Слишком крупно — иконки 130px, заголовки 36/30px, кнопки width:380px.
Уменьшаем до мобильных размеров.
5) Длинный заголовок «Регулярные перевозки Алматы — Астана — Алматы» не
влезал в кнопку width:380px → перенос по словам + уменьшение шрифта.
===================================================================== */
@media (max-width: 767.98px){
/* ---------------------------------------------------------------
1. КАРТОЧКА: симметричные отступы, меньше нижний margin
--------------------------------------------------------------- */
.teo-block,
.teo-block2,
.ved .block6,
.to-page .blockx{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* левый декоративный padding контейнеров — убираем перекос (был только слева),
но оставляем симметричные боковые отступы, чтобы заголовок и карточки
не прилипали к краям экрана */
.teo-block .ts1,
.teo-block2 .container,
.to-page .to-dopblock{
padding-left: 14px !important;
padding-right: 14px !important;
}
.teo-block .adv-card,
.teo-block2 .adv-card,
.ved .block6 .adv-card,
.to-page .adv-card{
margin-bottom: 18px !important;
text-align: center;
}
/* «Виды перевозок»: десктопные 3-в-ряд (col 33%) на мобильном — в 1 колонку */
.teo-block2 .row > .col-sm-6{
flex: 0 0 100% !important;
max-width: 100% !important;
}
/* ---------------------------------------------------------------
2. ЗАГОЛОВКИ КАРТОЧЕК / ИКОНКИ — уменьшаем
--------------------------------------------------------------- */
.teo-block .adv-card .adv-head img{
height: 72px !important;
margin-bottom: 12px !important;
}
.teo-block .adv-card .adv-head h3{
font-size: 22px !important;
line-height: 1.2 !important;
}
.adv-card .adv-head p{
font-size: 15px !important;
padding: 0 14px !important;
height: auto !important; /* был жёсткий height:66px */
}
/* иконка-«паук» (.teos) в кнопках teo-block2 / ved block6 — меньше */
.teo-block2 .adv-card .adv-head button .teos,
.ved .block6 .adv-card .adv-head button .teos{
height: 54px !important;
margin-top: 12px !important;
margin-bottom: 16px !important;
}
.teo-block2 .adv-card .adv-head button .spi,
.ved .block6 .adv-card .adv-head button .spi{
display: none !important; /* декоративная подложка — скрыть */
}
/* ---------------------------------------------------------------
3. КНОПКИ-ТОГЛЫ — на всю ширину, перенос длинного текста
(фикс «Регулярные перевозки Алматы — Астана — Алматы»)
--------------------------------------------------------------- */
.teo-block2 .adv-card .adv-head button,
.ved .block6 .adv-card .adv-head button{
width: 100% !important;
max-width: 100% !important;
height: auto !important; /* на мобильном высота по контенту, а не фикс-280px */
padding: 30px 18px !important;
margin: 0 auto 16px !important;
white-space: normal !important; /* разрешаем перенос */
word-break: normal;
overflow-wrap: break-word;
line-height: 1.25 !important;
}
.adv-card .adv-head button{
padding: 12px 26px !important;
}
.teo-block2 .adv-card .adv-head p,
.ved .block6 .adv-head p{
font-size: 17px !important;
line-height: 1.25 !important;
overflow-wrap: break-word;
word-break: normal;
hyphens: none;
}
/* персональные крупные размеры вариантов teo2/teo3/teo6 — выравниваем */
.teo-block2 .teo2 .adv-head p,
.teo-block2 .teo3 .adv-head p,
.teo-block2 .teo6 .adv-head p{
font-size: 16px !important;
}
.teo-block2 .title{
font-size: 26px !important;
line-height: 1.15 !important;
margin-bottom: 22px !important;
}
/* ---------------------------------------------------------------
4. ПАНЕЛЬ РАСКРЫТИЯ — ширина 100%, текст не режется сбоку
--------------------------------------------------------------- */
.adv-panel,
.teo-block2 .adv-panel,
.ved .block6 .adv-panel,
.to-page .adv-panel{
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
margin: 14px 0 0 !important;
}
/* внутренние отступы панели — симметричные, с нижним padding */
.adv-panel__inner{
padding: 18px 16px !important;
}
.teo-block2 .adv-panel__inner{
padding: 0 !important; /* у teo-block2 текст без фона-плашки */
}
.ved .block6 .adv-panel .adv-panel__inner{
padding: 6px 4px !important;
}
.to-page .adv-panel__inner{
padding: 22px 18px !important;
}
/* текст внутри: переносим по словам, ширина не выходит за край */
.adv-panel__inner,
.adv-panel__inner p,
.adv-panel .tiz,
.adv-panel .lil{
font-size: 15px !important;
line-height: 1.5 !important;
overflow-wrap: break-word !important;
word-break: normal !important;
hyphens: none !important;
max-width: 100% !important;
}
.adv-panel__inner p{
padding-left: 16px !important;
}
.teo-block2 .adv-panel .lil{
margin-left: 20px !important;
}
/* ---------------------------------------------------------------
5. ОТКРЫТОЕ СОСТОЯНИЕ — показываем ВЕСЬ текст
ПРИЧИНА ОБРЕЗКИ: overflow:hidden + max-height:1200px (закрытое 0).
Длинные панели > 1200px срезались снизу. Снимаем оба ограничения.
--------------------------------------------------------------- */
.adv-card.is-open .adv-panel,
.teo-block2 .adv-card.is-open .adv-panel,
.ved .block6 .adv-card.is-open .adv-panel,
.to-page .adv-card.is-open .adv-panel{
max-height: none !important; /* было 1200px → срезало низ */
overflow: visible !important; /* было hidden → срезало низ/бок */
opacity: 1 !important;
transform: none !important;
margin-bottom: 24px !important;
padding-bottom: 4px !important;
}
/* в закрытом виде панель всё ещё скрыта (max-height:0 из style.css),
но для надёжности гасим скачок анимации высоты на мобиле */
.adv-panel{
transition: opacity .25s ease, transform .35s ease !important;
}
}
/* ============ FIX: headings ============ */
/* =====================================================================
TLS — Mobile fix: ЗАГОЛОВКИ СЕКЦИЙ + точечные правки страниц
Подключать ПОСЛЕ style.css и mobile.css (и желательно после advcards.css).
Всё внутри @media (max-width:767.98px) / (max-width:575.98px) —
десктоп (>=992) НЕ затрагивается.
ПРИЧИНЫ (что и почему чиним):
1) КРУПНЫЕ ЗАГОЛОВКИ СЕКЦИЙ.
В style.css секционные заголовки заданы под десктоп очень крупно:
.blockx .title / .blockx h1 / .title-green / .teo-block2 .title —
font-family:"Unbounded"; font-size:45px; font-weight:900;
.teo-block .adv-head h3 — 36px/600.
mobile.css уже уменьшает .title до clamp(24..32) и .title-bl/.titlez
до clamp(20..26), НО:
- не трогает .title-green (остаётся 45px/900 → «Форматы обслуживания»,
«Этапы работы», «Отзывы клиентов», «Чек-лист», «Основные направления
консалтинговых услуг» огромные, жирные, переносятся);
- .z-tit (подзаголовки .komp «Абонентское обслуживание:» и т.п.) тоже
крупные;
- оставшийся font-weight:900 (Unbounded) даёт чрезмерную жирность и
большой визуальный интерлиньяж.
Фикс: единый адекватный размер, line-height 1.2–1.25, вес 700, добавлен
.title-green и .z-tit; «Виды перевозок» (.teo-block2 .title) тоже.
2) СТРАНИЦА ТЭО (template 11): карточка «Обеспечение … независимо от их
размеров и масштабов» + кнопка «Узнать детали» — КНОПКА НАЛЕЗАЕТ НА ТЕКСТ.
ПРИЧИНА: в style.css `.adv-card .adv-head p{ height:66px; padding:0 80px }`
— жёсткая фиксированная высота 66px. Внутри .teo-block карточки идут
стопкой: img → h3 → p (height:66px) → button (в обычном потоке).
Длинный текст «логистическими решениями всех типов проектов…» не влезает
в 66px и ВЫХОДИТ за пределы своего блока (контейнер не растёт), поэтому
следующая кнопка визуально наезжает на текст.
Фикс: height:auto для .adv-head p, нормальный перенос, кнопке —
display:inline-block + margin-top (гарантированный зазор от текста).
3) СТРАНИЦА «История» (template 12): абзац-подзаголовок .titlez
«Terminal Logistics Services гарантирует безопасность и надёжность,
исторически предлагая максимально необходимое:» выглядит ВЫТЯНУТЫМ.
ПРИМЕЧАНИЕ: реального `text-align:justify` во фронтовом CSS НЕТ — эффект
даёт растяжение строки на всю узкую ширину + десктопный padding-right:250px
у .titlez и крупный размер. На всякий случай принудительно выключаем
возможный justify и фиксируем выравнивание по левому краю для блоков
.text-blocks / .komp / .otstup / .titlez, снимаем десктопный padding.
4) СТРАНИЦА «Контакты» (template 2): заголовок «Контакты» (.cont_word h1)
ПРИЛИП к шапке/логотипу. Шапка sticky, секция .blockx.cont_word идёт сразу
под ней без верхнего отступа на мобиле. Фикс: padding-top секции +
доп. margin-top у самого h1.
===================================================================== */
@media (max-width: 767.98px){
/* -----------------------------------------------------------------
1. СЕКЦИОННЫЕ ЗАГОЛОВКИ — адекватный размер, line-height, вес
----------------------------------------------------------------- */
/* крупные «Unbounded 45/900» заголовки секций:
.title-green («Форматы обслуживания», «Этапы работы», «Отзывы клиентов»,
«Чек-лист», «Основные направления консалтинговых услуг»),
.blockx .title / h1, .teo-block2 .title («Виды перевозок») */
.title-green,
.blockx .title,
.partner .title,
.to-page .to-grey .title,
.to-page .blockx .title,
.to-page .to-dopblock .title,
.teo-block2 .title{
font-size: clamp(21px, 5.6vw, 27px) !important;
line-height: 1.22 !important;
font-weight: 700 !important;
margin-bottom: 22px !important;
overflow-wrap: break-word;
word-break: normal;
hyphens: none;
-webkit-hyphens: none;
}
/* h1 заголовки внутри секций (.blockx h1, .project-page .blockx h1) */
.blockx h1,
.project-page .blockx h1{
font-size: clamp(22px, 6vw, 28px) !important;
line-height: 1.2 !important;
font-weight: 700 !important;
margin-bottom: 20px !important;
}
/* подзаголовки-плашки .z-tit («Абонентское обслуживание:», «Разовые
услуги:», «Экспертиза:», «Гарантии:» …) — крупные/жирные на десктопе */
.komp .z-tit,
.z-tit,
.komp-z .z-tit,
.partner .komp-z .z-tit,
.ved .block3 .komp-z .z-tit,
.to-page .serv .komp-z .z-tit{
font-size: 18px !important;
line-height: 1.25 !important;
font-weight: 600 !important;
margin-bottom: 6px !important;
}
/* строчные заголовки-пункты .title-bl («Для импортеров:», «честные
эффективные коммуникации;» …) — нормализуем размер/вес */
.title-bl,
.blockx .text-blocks .text-row .title-bl,
.ved .block2 .text-blocks .text-row .title-bl,
.about-page .history .text-blocks .text-row .title-bl{
font-size: 17px !important;
line-height: 1.28 !important;
font-weight: 600 !important;
}
/* заголовок-подзаголовок .titlez (История) — спокойнее */
.titlez,
.about-page .history .titlez{
font-size: clamp(18px, 4.8vw, 22px) !important;
line-height: 1.3 !important;
font-weight: 600 !important;
padding-right: 0 !important; /* десктопный padding-right:250px */
margin-bottom: 18px !important;
}
/* «карточные» заголовки .adv-head h3 (ТЭО, ТО «До прибытия груза» и т.п.) */
.teo-block .adv-card .adv-head h3,
.to-page .adv-card .adv-head h3{
font-size: 22px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
}
/* доп.подзаголовки .doptitles / .doptit под чек-листом и партнёрами */
.doptitles,
.doptit,
.partner .doptit{
font-size: 16px !important;
line-height: 1.35 !important;
font-weight: 500 !important;
}
/* -----------------------------------------------------------------
2. ТЭО (template 11): кнопка «Узнать детали» НЕ должна налезать на
текст. Снимаем жёсткую height:66px у .adv-head p и отделяем кнопку.
----------------------------------------------------------------- */
.teo-block .adv-card .adv-head{
text-align: center;
}
.teo-block .adv-card .adv-head p,
.adv-card .adv-head p{
height: auto !important; /* было height:66px → текст вылезал */
min-height: 0 !important;
padding: 0 12px !important; /* было padding:0 80px */
margin: 0 0 14px !important; /* зазор до кнопки */
font-size: 15px !important;
line-height: 1.35 !important;
overflow-wrap: break-word;
word-break: normal;
hyphens: none;
}
/* кнопка-тогл в .teo-block — отдельным блоком, гарантированный отступ */
.teo-block .adv-card .adv-head button.adv-btn{
display: inline-block !important;
position: static !important;
float: none !important;
margin-top: 6px !important;
padding: 12px 28px !important;
white-space: normal !important;
line-height: 1.2 !important;
}
/* у карточек без текста (
пустой) лишний зазор не нужен */
.teo-block .adv-card .adv-head p:empty{
margin: 0 !important;
}
/* -----------------------------------------------------------------
3. ИСТОРИЯ (template 12): убрать «растяжение» текста — выравнивание
по левому краю, отключаем justify, снимаем десктопные отступы.
----------------------------------------------------------------- */
.about-page .history .text-blocks,
.about-page .history .text-blocks p,
.about-page .history .komp,
.about-page .history .komp p,
.about-page .history .otstup,
.about-page .history .otstup p,
.about-page .history .titlez,
.history .text-blocks,
.history .otstup,
.history .titlez{
text-align: left !important;
text-justify: none !important;
}
/* десктопный верхний отступ .otstup{margin-top:100px} на мобиле избыточен */
.about-page .history .otstup{
margin-top: 24px !important;
}
/* общая страховка от justify для текстовых блоков услуг */
.komp,
.komp p,
.komp-z,
.text-blocks,
.text-blocks p,
.text-row,
.text-row p,
.grey-p,
.grey-p p,
.ved-text,
.ved-text p,
.to-text,
.to-text p{
text-align: left !important;
}
/* -----------------------------------------------------------------
4. КОНТАКТЫ (template 2): верхний отступ у заголовка «Контакты»,
чтобы не липнул к sticky-шапке/логотипу.
----------------------------------------------------------------- */
.blockx.cont_word{
padding-top: 34px !important;
}
.blockx.cont_word h1,
.cont_word h1{
margin-top: 8px !important;
}
}
/* =====================================================================
Узкие телефоны ( <= 575.98px ) — чуть компактнее заголовки.
===================================================================== */
@media (max-width: 575.98px){
.title-green,
.blockx .title,
.partner .title,
.teo-block2 .title{
font-size: clamp(20px, 5.8vw, 24px) !important;
margin-bottom: 18px !important;
}
.blockx h1,
.project-page .blockx h1{
font-size: clamp(21px, 6.2vw, 25px) !important;
}
.komp .z-tit,
.z-tit{
font-size: 17px !important;
}
.title-bl{
font-size: 16px !important;
}
/* контакты ещё компактнее на самых узких */
.blockx.cont_word{
padding-top: 28px !important;
}
}
/* ============ FIX: misc ============ */
/* =====================================================================
TLS — Mobile misc-фиксы
Подключать ПОСЛЕ style.css и mobile.css (либо вмержить содержимое в
www/css/mobile.css — именно там сейчас живёт мобильный слой).
Десктоп (≥992px) НЕ затрагивается — всё внутри media-queries.
Решает 3 проблемы:
1) «Логотип в тексте» (/img/logo.svg внутри контентных блоков) на
мобиле гигантский → ограничиваем высоту.
2) Подвал (footer) — слишком крупный шрифт на телефоне → уменьшаем.
3) Подменю мобильного меню (hc-offcanvas-nav «Проекты») — длинные
названия обрезаются → разрешаем перенос строк.
===================================================================== */
/* ===================================================================
1. ИНЛАЙНОВЫЕ ЛОГОТИПЫ / ИЛЛЮСТРАЦИИ В ТЕКСТЕ (≤767)
-------------------------------------------------------------------
На страницах услуг внутри контентных блоков вставлен /img/logo.svg
с классами .kogo-img / .ved-img / .to-img / .komp-img. На десктопе
у них задана высота 200–230px (style.css). На мобиле существующее
правило в mobile.css давало им max-width:80% — для ЛОГОТИПА это всё
ещё огромно (почти на весь экран). Ограничиваем именно эти бренд-лого
разумной высотой. Это НЕ трогает осмысленные большие фото
(фото команды .about_team / .ab-img, сертификаты .logos, карта и т.п.) —
они не входят в перечисленные селекторы.
=================================================================== */
@media (max-width: 767.98px){
/* «логотип в тексте» — мелкое брендовое лого, не растягиваем на экран */
.kogo-img,
.ved .block1 .ved-img,
.ved-img,
.to-page .to-img,
.to-img,
.to-page .serv .komp-img,
.komp-img,
.about .about-logo img,
.about-page .about-logo img{
height:auto !important;
max-height:90px !important; /* было ~200–230px / 80% ширины */
width:auto !important;
max-width:60% !important;
margin-left:auto !important;
margin-right:auto !important;
display:block !important;
}
/* иконки-маркеры внутри текстовых абзацев (![]()
текст
):
.grey-p, .komp (формат-карточки) — не должны раздуваться */
.grey-p p img,
.komp > img,
.partner .komp > img,
.to-page .serv .komp > img{
height:28px !important;
width:auto !important;
vertical-align:middle;
flex:0 0 auto;
}
}
/* ещё компактнее на узких телефонах */
@media (max-width: 575.98px){
.kogo-img,
.ved-img,
.to-img,
.komp-img{
max-height:72px !important;
max-width:70% !important;
}
.about .about-logo img,
.about-page .about-logo img{ max-height:96px !important; }
}
/* ===================================================================
2. FOOTER — уменьшаем шрифты на мобиле (≤767)
-------------------------------------------------------------------
На десктопе: .f-contact p =18px, .titlez =20px, адрес .title =15px,
.copyright p / .menuz a =16px. На телефоне это крупно. Снижаем.
=================================================================== */
@media (max-width: 767.98px){
.footer .address p,
.footer .address p.title{ font-size:13px !important; line-height:1.5 !important; }
.footer .f-contact p{ font-size:14px !important; line-height:1.5 !important; }
.footer .f-contact p.titlez{ font-size:16px !important; margin-bottom:8px !important; }
.footer .address a,
.footer .f-contact .fknop a{ font-size:13px !important; padding:7px 12px !important; }
.footer .f-contact .fknop img{ height:16px !important; }
.copyright p,
.copyright .copyright{ font-size:13px !important; line-height:1.45 !important; }
.copyright .menuz a{ font-size:13px !important; }
}
@media (max-width: 374.98px){
.footer .address p,
.footer .address p.title{ font-size:12px !important; }
.footer .f-contact p{ font-size:13px !important; }
.footer .f-contact p.titlez{ font-size:15px !important; }
.copyright p,
.copyright .menuz a{ font-size:12px !important; }
}
/* ===================================================================
3. ПОДМЕНЮ hc-offcanvas-nav — длинные названия проектов обрезаются
-------------------------------------------------------------------
Причина обрезки: ссылки пунктов меню — это плагин hc-offcanvas-nav,
у пунктов-родителей справа лежит абсолютный span.nav-next (45px) и
у в nav-parent задан padding-right:58px (hc-offcanvas-nav.css).
Длинные названия проектов не переносятся и «уезжают» под шеврон /
за пределы фиксированной по ширине панели (.nav-container 88vw/380px),
из-за чего визуально обрезаются. Принудительно разрешаем перенос
(white-space:normal), снимаем любые фикс-высоты и даём место под
шеврон, чтобы текст переносился ДО него, а не под ним.
Брейкпоинт ≤991 — как и весь блок меню в mobile.css.
=================================================================== */
@media (max-width: 991.98px){
.hc-offcanvas-nav ul li a,
.hc-offcanvas-nav ul li.nav-parent > a{
white-space:normal !important; /* перенос длинных названий */
word-break:normal !important;
overflow-wrap:break-word !important;
height:auto !important;
min-height:0 !important;
line-height:1.35 !important;
overflow:visible !important;
}
/* у родительских пунктов оставляем место под шеврон-стрелку,
чтобы текст переносился, а не залезал под неё */
.hc-offcanvas-nav li.nav-parent > a{
padding-right:52px !important;
}
/* шеврон выравниваем по верху многострочного пункта */
.hc-offcanvas-nav li.nav-parent span.nav-next,
.hc-offcanvas-nav li.nav-close span,
.hc-offcanvas-nav li.nav-back span{
height:auto !important;
top:0 !important; bottom:0 !important;
display:flex !important; align-items:center; justify-content:center;
}
/* контейнер уровня и сам список — без фикс-высоты пунктов,
вертикальная прокрутка если уровень длинный */
.hc-offcanvas-nav .nav-wrapper,
.hc-offcanvas-nav.nav-levels-overlap ul ul{
height:100% !important;
overflow-y:auto !important;
}
}
/* ============ FIX: kazakh ============ */
/* =====================================================================
KAZAKH (KZ) FIXES — _i18n/fixes/kazakh.css
Подключать ПОСЛЕ style.css и mobile.css (поздний порядок + повышенная
специфичность за счёт префикса .lang-kz).
Класс языка вешается на JS-сниппетом (см. scripts.chunk.html):
if (_lang === 'kz') document.documentElement.classList.add('lang-kz');
Решаются две проблемы казахской версии:
1) ШРИФТ. Заголовки используют "Unbounded" (display-шрифт). Казахские
глифы Қ(U+049A) Ң(U+04A2) Ғ(U+0492) Ү(U+04AE) Ұ(U+04B0) Һ(U+04BA)
І(U+0406) Ә(U+04D8) Ө(U+04E8) у Unbounded выглядят криво/неровно
(display-начертание + слабый хинтинг расширенной кириллицы), браузер
к тому же может подставлять системный фолбэк. Заголовкам в KZ задаём
надёжный fallback-стек: "Unbounded" остаётся первым (латиница и
базовая кириллица), но для проблемных глифов подхватится "Inter"
(он подключён в head и полноценно содержит cyrillic + cyrillic-ext,
т.е. ВСЕ казахские буквы) либо системный гротеск.
Это решение НЕ требует менять head-чанк. Если же нужно усилить
начертание — в head можно добавить отдельный шрифт (см. отчёт),
но без этого казахские буквы уже отрисуются корректно через Inter.
2) ДЕСКТОП-МЕНЮ в 2 строки. Казахские пункты длиннее EN/RU и на десктопе
главное меню переносится. Уменьшаем font-size / межбуквенный интервал
и режем правый margin между пунктами ТОЛЬКО для .lang-kz и ТОЛЬКО на
десктопе (>=992px). RU/EN и мобила не затрагиваются.
===================================================================== */
/* ---------------------------------------------------------------------
1) ШРИФТ ЗАГОЛОВКОВ В KZ — надёжный fallback с казахскими глифами.
Перечислены те же селекторы, что в style.css используют "Unbounded".
"Inter" гарантированно содержит cyrillic-ext (Қ, Ң, Ү, Һ, Ә, Ө, Ғ) и
cyrillic (І), поэтому проблемные буквы отрисуются им, остальное —
фирменным Unbounded.
--------------------------------------------------------------------- */
.lang-kz .slider .text1 .serv-title h1,
.lang-kz .title,
.lang-kz .title h1,
.lang-kz .title h2,
.lang-kz h1,
.lang-kz h2,
.lang-kz .serv-title h1,
.lang-kz .big-word,
.lang-kz [style*="Unbounded"],
.lang-kz .unbounded {
/* KZ-заголовки: Montserrat (полностью покрывает казахские буквы,
единый шрифт для латиницы и всей кириллицы — без «вырвиглаза» от смеси). */
font-family: "Montserrat", "Inter", "Segoe UI", Arial, sans-serif !important;
font-weight: 800 !important;
}
/* ---------------------------------------------------------------------
2) ДЕСКТОП-МЕНЮ KZ В ОДНУ СТРОКУ.
Десктопное меню в разметке — это .header .menu > nav#main-nav > ul > li > a
(см. header.chunk.html). На десктопе (>=992px) сжимаем пункты, чтобы они
влезли в один ряд. Базовый стиль (style.css): font-size:21px,
margin-right:50px между li. Уменьшаем оба + поджимаем буквы.
Подменю (.submenu) НЕ трогаем.
--------------------------------------------------------------------- */
@media (min-width: 992px) {
/* меньше шрифт и плотнее буквы у пунктов верхнего уровня */
.lang-kz .header .menu #main-nav > ul > li > a {
font-size: 16px;
white-space: nowrap;
}
/* уменьшаем расстояние между пунктами меню */
.lang-kz .header .menu #main-nav > ul > li {
margin-right: 26px;
}
/* страховка: запрет переноса всего ряда меню */
.lang-kz .header .menu #main-nav > ul {
white-space: nowrap;
}
}
/* Если на узких десктопах (992–1199px) всё ещё не влезает — ещё компактнее. */
@media (min-width: 992px) and (max-width: 1199.98px) {
.lang-kz .header .menu #main-nav > ul > li > a {
font-size: 15px;
}
.lang-kz .header .menu #main-nav > ul > li {
margin-right: 20px;
}
}
/* ============ FIX: hero white-word + соты v2 ============ */
/* .w-main переносится JS-ом внутрь .sota-slider (см. чанк scripts), поэтому
позиционируем её на НИЖНЕМ крае картинки слайдера. Соты делаем видимее. */
@media (max-width: 991.98px){
.home .slider .sota-slider{ position:relative !important; }
.home .slider .sota-slider .w-main{
display:block !important;
position:absolute !important;
left:50% !important; right:auto !important; transform:translateX(-50%) !important;
bottom:14px !important; top:auto !important; margin:0 !important;
width:auto !important; max-width:90% !important; height:auto !important;
opacity:0.9 !important; z-index:6 !important; pointer-events:none !important;
filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)) !important;
}
/* соты-фон справа за текстом и кнопкой — заметнее */
.home .slider .text1{ position:relative !important; overflow:hidden !important; }
.home .slider .text1 .sota-up{
display:block !important;
position:absolute !important;
right:-30px !important; bottom:-20px !important; left:auto !important; top:auto !important;
width:auto !important; height:240px !important; max-width:none !important;
opacity:0.5 !important; z-index:0 !important; pointer-events:none !important;
}
.home .slider .text1 .x1,
.home .slider .text1 hr,
.home .slider .text1 .x2,
.home .slider .text1 .zayavka{ position:relative !important; z-index:2 !important; }
}
/* ============ FIX: modal height correction ============ */
@media (max-width: 767.98px){
/* модалка вписывается в высоту экрана; крестик (absolute сверху) всегда виден,
прокрутка — внутри .modal-body */
.modal .modal-dialog, #Modal .modal-dialog, #Modal1 .modal-dialog{
margin:10px auto !important; max-width:calc(100% - 16px) !important;
transform:none !important; /* десктоп сдвигал диалог вверх translateY(-50px) */
}
.modal.fade.show .modal-dialog{ transform:none !important; }
.modal .modal-content, #Modal .modal-content, #Modal1 .modal-content,
.zayavka .form-wrapper .modal-content{
max-height:calc(100vh - 60px) !important;
overflow:hidden !important;
display:flex !important; flex-direction:column !important;
}
/* крестик закреплён у верха контента — всегда виден поверх прокрутки */
.modal .modal-content .close, #Modal .close, #Modal1 .close{
position:absolute !important; top:10px !important; right:10px !important; z-index:30 !important;
}
.modal .modal-body, #Modal .modal-body, #Modal1 .modal-body{
overflow-y:auto !important; -webkit-overflow-scrolling:touch; flex:1 1 auto !important;
}
}
/* ============ FIX: .zayavka background transparent (mobile) ============ */
@media (max-width: 767.98px){
.zayavka{ background:transparent !important; }
}
/* ============ FIX: услуги интереснее — соты-фон + гекс-бейджи ============ */
@media (max-width: 991.98px){
/* серый гексагональный фон секции услуг (намёк на десктопные соты) */
.home .service{
position:relative !important;
background-image:url(/img/sota_gray.svg), url(/img/sota_gray.svg) !important;
background-repeat:no-repeat, no-repeat !important;
background-position:right -55px top 30px, left -60px bottom 0 !important;
background-size:210px auto, 175px auto !important;
}
.home .service .container{ position:relative !important; z-index:1 !important; }
/* карточки услуг: горизонтальные, читаемые */
.service .hex-grid{ grid-template-columns:1fr !important; gap:12px !important; }
.service .hex-serv{
flex-direction:row !important;
justify-content:flex-start !important;
align-items:center !important;
gap:16px !important;
text-align:left !important;
min-height:0 !important;
padding:14px 18px !important;
background:rgba(255,255,255,.93) !important;
border:1px solid rgba(0,103,89,.16) !important;
border-radius:16px !important;
box-shadow:0 6px 18px rgba(0,0,0,.06) !important;
}
.service .hex-inner{
display:flex !important; flex-direction:row !important; align-items:center !important;
gap:14px !important; text-align:left !important;
}
/* иконка услуги — в гексагональном бейдже (соты) */
.service .hex-inner img{
flex:0 0 auto !important;
width:60px !important; height:60px !important;
box-sizing:border-box !important;
padding:14px !important; margin:0 !important;
background:rgba(0,103,89,.09) !important;
clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%) !important;
}
.service .hex-inner p{
font-size:15px !important; line-height:1.3 !important;
margin:0 !important; font-weight:600 !important; color:#1d1d1d !important;
}
}
/* ============ FIX: модалка заявки — компактнее, WhatsApp кнопкой ============ */
@media (max-width: 767.98px){
/* компактные поля → меньше прокрутки */
#Modal .modal-body, #Modal1 .modal-body{ padding-top:22px !important; padding-bottom:6px !important; }
#Modal .modal-body .form-group, #Modal1 .modal-body .form-group{ margin-bottom:8px !important; }
#Modal .modal-body .form-control, #Modal1 .modal-body .form-control{ height:46px !important; }
#Modal .modal-body .form-text, #Modal1 .modal-body .form-text{ min-height:62px !important; height:62px !important; }
#Modal .modal-body .custom-checkbox span, #Modal1 .modal-body .custom-checkbox span{ font-size:12px !important; }
/* подвал: компактные отступы, кнопки на всю ширину */
#Modal .modal-footer, #Modal1 .modal-footer{ padding:4px 16px 16px !important; gap:0 !important; }
#Modal .modal-footer p, #Modal1 .modal-footer p{ margin:10px 0 !important; font-size:14px !important; }
#Modal .modal-footer input.knopka, #Modal .modal-footer .knopka[type="submit"]{ width:100% !important; }
/* две кнопки контакта (WhatsApp + Связаться) стопкой */
#Modal .modal-footer .form-group, #Modal1 .modal-footer .form-group{
display:flex !important; flex-direction:column !important; gap:10px !important; margin:0 !important; width:100% !important;
}
/* WhatsApp теперь полноценная кнопка (фирменный зелёный whatsapp) */
#Modal .modal-footer a.whatsapp, #Modal1 .modal-footer a.whatsapp{
display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
width:100% !important; box-sizing:border-box !important; margin:0 !important;
background:#2cb742 !important; color:#fff !important;
padding:14px 16px !important; border-radius:10px !important;
font-weight:600 !important; font-size:16px !important; text-decoration:none !important; border:0 !important;
}
#Modal .modal-footer a.whatsapp i, #Modal1 .modal-footer a.whatsapp i{ color:#fff !important; font-size:18px !important; margin:0 !important; }
/* "Связаться" — кнопка на всю ширину */
#Modal .modal-footer a.phone.knopka, #Modal1 .modal-footer a.phone.knopka{
display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
width:100% !important; box-sizing:border-box !important; margin:0 !important;
}
}
/* ============ Глобус (canvas) в секции «Почему мы»: контейнер квадратный — без пустых отступов сверху/снизу ============ */
@media (max-width: 767.98px){
.why .video-bg, .home .why .video-bg{
height:260px; /* = ширине: шар заполняет контейнер, без пустых отступов */
margin-top:0;
}
}
/* иконка-сота услуги: ширина 70, высота 60 */
@media (max-width: 991.98px){
.service .hex-inner img{ width:70px !important; height:60px !important; }
}
/* ============ FIX: позиционирование меню по структуре плагина ============
Плагин: closed = .side-right .nav-container{translate3d(240px)} (его базовая
ширина 240px), open = .nav-open .nav-container{translate3d(0)}. Мы расширили
панель, поэтому переопределяем CLOSED на 100% (полностью прячем), а OPEN
через более специфичный селектор (.side-right.nav-open) гарантированно
ставим в 0. Подменю overlap — без сдвига 40px, чтобы текст не уезжал. */
@media (max-width: 991.98px){
/* убиваем transform у контейнера и уровней (он уезжал за экран и резал текст),
позиционируем панель через right: закрыто — за краем, открыто — встык вправо */
.hc-offcanvas-nav .nav-container{
transform:none !important;
right:-400px !important; left:auto !important;
width:88vw !important; max-width:340px !important;
transition:right .3s ease !important;
}
/* ОТКРЫТО: пинним left+right в пределах экрана — панель не может уехать
за край и резать текст (right:0 + width фиксирует правый край у кромки) */
.hc-offcanvas-nav.nav-open .nav-container{
right:0 !important; left:auto !important;
}
.hc-offcanvas-nav .nav-wrapper,
.hc-offcanvas-nav.nav-levels-overlap ul .nav-wrapper,
.hc-offcanvas-nav li.level-open > .nav-wrapper{
transform:none !important;
left:0 !important; right:0 !important;
width:100% !important; max-width:100% !important; box-sizing:border-box !important;
}
.hc-offcanvas-nav ul,
.hc-offcanvas-nav li,
.hc-offcanvas-nav li a{ max-width:100% !important; box-sizing:border-box !important; }
}
/* ============ FIX: .abouts фикс-высота 400px → auto (фото не налезает на .about) ============ */
@media (max-width: 991.98px){
.abouts{ height:auto !important; }
.home .about{ margin-top:6px !important; }
}
/* ============ FIX: лого ассоциаций меньше + отступ лого в тексте ============ */
@media (max-width: 767.98px){
/* лого ассоциаций (.politika-img) — не во всю ширину, по центру, с отступами */
.politika-img{
display:block !important; width:auto !important; max-width:120px !important;
height:auto !important; margin:6px auto 20px !important;
}
/* лого/иконки в тексте не должны прилипать к заголовку ниже */
.kogo-img, .his-img, .ved-img, .to-img, .komp-img, .vers, .about_team{
margin-bottom:24px !important;
}
}
/* ============ FIX: подвал-адреса, шаги/цифры, чек-лист, разделители ============ */
@media (max-width: 767.98px){
/* --- ПОДВАЛ: компактнее расстояние между адресами и строками --- */
.footer .address{ margin-bottom:12px !important; }
.footer .address .title,
.footer .address p{ margin-bottom:2px !important; line-height:1.35 !important; }
/* --- ШАГИ (.etap-block): меньше бейдж-цифра и зазор до текста --- */
.etap-block{ gap:8px !important; }
.etap-block .hex{ width:44px !important; height:40px !important; }
.etap-block .hex::before{ width:44px !important; height:40px !important; }
.etap-block .hex::after{ width:36px !important; height:32px !important; }
.etap-block .hex span{ font-size:20px !important; }
/* --- pravovoe/ВЭД: серый блок шагов — убрать большой левый отступ (был pl:50px) --- */
.grey-block{
padding-left:14px !important; padding-right:14px !important;
padding-top:24px !important; padding-bottom:16px !important;
}
/* --- pravovoe/ВЭД: блок «Скачать полную версию чек-листа» — меньше пустоты сверху/снизу (был pt/pb:135px) --- */
.check-knp{ padding-top:22px !important; padding-bottom:22px !important; }
/* --- tamozhennoe: карточки-разделители «До/После прибытия груза» — меньше иконка и заголовок --- */
.adv-card.to1 .adv-head img,
.adv-card.to2 .adv-head img{ max-width:96px !important; width:auto !important; height:auto !important; }
/* заголовок разделителя «.gruz» — выше специфичности правила .to-page .adv-card .adv-head h3 (22px) */
.to-page .adv-card .adv-head .gruz,
.teo-block .adv-card .adv-head .gruz{ font-size:18px !important; line-height:1.2 !important; }
}
/* ============ FIX: Проекты и Новости — карточки на всю ширину (убрать десктопный зигзаг) ============ */
@media (max-width: 767.98px){
/* Проекты: десктоп раскидывает .news-img по 3 в ряд (фикс. ширина 295px + float:right/margin).
Новости: зигзаг через паддинг блока — .project-all .col-sm-6:nth-child(2n+1) .project-block{padding-left:25px}
→ на мобиле карточки «лесенкой» уезжают вправо. Делаем на всю ширину, без паддингов/центрирования. */
.project-block,
.news-block{
padding-left:0 !important; padding-right:0 !important;
}
.project-block .news-img,
.project-block .news-img > div{
width:100% !important; max-width:100% !important;
}
.project-block .news-img{
float:none !important; margin:0 0 6px 0 !important;
}
}
/* ============ FIX: поиск в мобильном меню (выезжающая панель) ============ */
@media (max-width: 1023.98px){
/* форма поиска клонируется JS-сниптом из шапки в .nav-search (см. чанк scripts).
Исходная форма рассчитана на тёмную шапку (белый текст/иконка) — здесь
полностью переопределяем под светлое поле с видимым плейсхолдером. */
.hc-offcanvas-nav .nav-search{ padding:16px 20px 6px !important; }
.hc-offcanvas-nav .nav-search .search{ display:block !important; width:100% !important; }
.hc-offcanvas-nav .nav-search form{ margin:0 !important; }
.hc-offcanvas-nav .nav-search fieldset{
display:flex !important; align-items:center; gap:10px;
margin:0 !important; padding:11px 15px !important;
border:1px solid #d4d8db !important; border-radius:12px !important; background:#fff !important;
transition:border-color .18s, box-shadow .18s;
}
.hc-offcanvas-nav .nav-search fieldset:focus-within{
border-color:#006759 !important; box-shadow:0 0 0 3px rgba(0,103,89,.12);
}
/* белая иконка-лупа из шапки → делаем серой (brightness(0)=чёрный + opacity) */
.hc-offcanvas-nav .nav-search img{
width:18px !important; height:18px !important; margin:0 !important; flex:0 0 auto;
filter:brightness(0) saturate(0); opacity:.42;
}
.hc-offcanvas-nav .nav-search input[type="text"]{
flex:1 1 auto; min-width:0; width:100% !important;
border:0 !important; outline:none !important; background:transparent !important; box-shadow:none !important;
font-size:15px; color:#1f2937 !important; padding:0 !important; height:auto !important; margin:0 !important;
}
.hc-offcanvas-nav .nav-search input[type="text"]::placeholder{ color:#9aa0a6 !important; opacity:1 !important; }
.hc-offcanvas-nav .nav-search input[type="submit"]{ display:none !important; }
}
/* ============ Страница результатов поиска (SimpleSearch) — десктоп + мобайл ============ */
/* классы .simplesearch-* есть ТОЛЬКО на странице поиска, поэтому правила глобальные и десктоп не затрагивают остальной сайт */
.simplesearch-results{ font-size:15px; color:#6b7280; margin:0 0 22px; }
.simplesearch-results-list{ display:flex; flex-direction:column; gap:14px; max-width:860px; }
.simplesearch-result{
background:#fff; border:1px solid #e6e8ea; border-radius:14px;
padding:18px 22px; transition:box-shadow .2s, border-color .2s;
max-width:100%; overflow-wrap:break-word; word-break:break-word;
}
.simplesearch-result h3, .simplesearch-result .extract p{ overflow-wrap:break-word; word-break:break-word; }
.simplesearch-result:hover{ border-color:#006759; box-shadow:0 8px 24px rgba(0,0,0,.07); }
.simplesearch-result h3{ margin:0 0 7px !important; font-size:18px; line-height:1.32; font-weight:600; }
.simplesearch-result h3 a{ color:#006759; text-decoration:none; }
.simplesearch-result h3 a:hover{ text-decoration:underline; }
.simplesearch-result .extract{ margin:0; }
.simplesearch-result .extract p{ margin:0; font-size:14px; line-height:1.6; color:#5b6168; }
.simplesearch-highlight{ background:#fff3cd; color:#7a5c00; padding:0 2px; border-radius:3px; }
/* верхняя пагинация дублирует нижнюю — прячем для чистоты */
.simplesearch-results + .simplesearch-paging{ display:none; }
.simplesearch-paging{ margin:24px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; max-width:860px; }
.simplesearch-result-pages{ font-size:14px; color:#6b7280; margin-right:6px; }
.simplesearch-page{
display:inline-flex; align-items:center; justify-content:center;
min-width:36px; height:36px; padding:0 9px; border-radius:9px;
border:1px solid #d8dcdf; color:#333; text-decoration:none; font-size:14px;
}
a.simplesearch-page:hover{ border-color:#006759; color:#006759; }
.simplesearch-current-page{ background:#006759 !important; border-color:#006759 !important; color:#fff !important; font-weight:600; }
@media (max-width: 767.98px){
.simplesearch-result{ padding:15px 17px; border-radius:12px; }
.simplesearch-result h3{ font-size:16px; }
.simplesearch-results-list{ gap:12px; }
}
/* ============ Глобус: SVG (анимация + светящийся Казахстан). Лёгкое свечение, насыщенность уже в SVG ============ */
.why img.globe{ filter: drop-shadow(0 0 14px rgba(255,140,0,0.30)); }
video.globe{ filter: brightness(1.18) saturate(2.4) contrast(1.45) drop-shadow(0 0 18px rgba(255,120,0,0.45)); } /* на случай отката к видео */
/* ============ FIX (правки клиента): hero «Подготовим…» поднять выше ярких огней фона (десктоп) ============ */
@media (min-width: 768px){
.zayavka .zayavka_bg .zayavka_text{ padding-top:120px !important; padding-bottom:230px !important; }
}
/* ============ FIX (правки клиента): ВЭД «Отзывы заказчиков» по центру на мобильном ============ */
@media (max-width: 767.98px){
.otziv-block{ text-align:center !important; }
.otziv-block > a{ display:inline-block !important; float:none !important; margin:0 auto !important; }
}
/* ============ FIX (правки клиента): Складская — сертификат прямоугольным листом, не растягивать ============ */
img.sklad-cert{ display:block !important; width:auto !important; height:auto !important; max-width:100% !important; max-height:380px !important; margin:0 auto !important; clip-path:none !important; border-radius:0 !important; object-fit:contain !important; }
a:has(> img.sklad-cert){ clip-path:none !important; border-radius:0 !important; overflow:visible !important; background:none !important; }
/* Якорь «О Компании» (верхнее/футер меню → секция на главной): отступ под фикс-header */
#o-kompanii{ scroll-margin-top: 90px; }
/* ===== «Почему Мы?» новая раскладка — планшет/мобайл (одна колонка) ===== */
@media (max-width:991.98px){
.why{ overflow-x:hidden; }
.why .why-title-c{ margin-left:0 !important; padding-left:0 !important; padding-right:0 !important; text-align:center !important; margin-bottom:15px; } /* по центру + верхний отступ глобуса вдвое меньше */
.why-grid{ flex-direction:column; gap:13px; padding-bottom:24px; } /* нижний отступ глобуса вдвое меньше */
.why-grid .why-center{ order:-1; flex:0 0 auto; max-width:92%; width:270px; }
.why-center .video-bg{ width:260px; height:260px; }
.why-center > .why-block2{ margin-top:4px; }
.why-grid .why-col{ width:100%; max-width:340px; margin:0 auto; flex:0 0 auto; flex-direction:column; align-items:center; justify-content:center; gap:26px; }
.why-grid .why-block2{ width:100%; box-sizing:border-box; padding-left:10px; padding-right:10px; }
.why-grid .why-block2 .big-word{ font-size:30px; }
.why-grid .why-block2 .why-word p{ font-size:15px; }
}
@media (max-width:575.98px){
.why .why-title-c{ font-size:34px !important; }
.why-center .video-bg{ width:220px; height:220px; }
.why-grid .why-center{ width:230px; }
.why-grid .why-block2 .big-word{ font-size:26px; }
}
/* ============ Карточки политик (politiki-kompanii) на мобильном ============
Боковые поля 70px + длинное слово «Ознакомиться» (Unbounded) переполняли узкую
колонку — карта вылезала за край. Поля 0, шрифт меньше, чтобы слово влезало. */
@media (max-width:767.98px){
.politika-page .politika-blocks a{
margin: 24px 0 !important;
padding: 30px 18px !important;
min-height: 230px !important;
}
.politika-page .politika-blocks a p{ font-size: 17px !important; line-height: 1.2 !important; }
.politika-page .politika-blocks a img{ height: 92px !important; }
}
/* История: заголовок «История Компании» (::before) и соты — компактнее на мобильном. */
@media (max-width: 767.98px){
.serv.history .his-intro::before{ font-size: 30px !important; margin-bottom: 16px !important; }
.serv.history::after{ width: 320px !important; height: 320px !important; top: 20px !important; right: -30px !important; opacity: .7; }
}
/* Блок «Экспертиза/Статистика/Фокус» (.block-creds) — на мобильном общее правило
.komp > img{height:28px} делает бейдж-кружок слишком мелким. Возвращаем нормальный размер. */
@media (max-width: 767.98px){
.ved .block-creds .komp{ gap: 14px !important; }
.ved .block-creds .komp > img{
width: 52px !important;
height: 52px !important;
padding: 13px !important; /* поля, чтобы иконка не упиралась в скругление круга */
border-radius: 50% !important;
background: #eef2f1 !important;
box-sizing: border-box !important;
}
/* Отзывы заказчиков: на десктопе 3 лого в ряд (flex), на мобильном — обычный поток (в столбик). */
.ved .block4 .col-sm-12{ display: block !important; }
.ved .block4 .otziv-block{ width: 100% !important; margin: 0 0 20px !important; }
/* Дефис-списки на сервисных страницах (.blockx.serv: История, Складская обработка и др.):
общий мобильный сброс убирает padding-left, из-за чего дефис-маркер (:before, left:0)
налезал на текст. Возвращаем отступ под маркер. */
.blockx.serv .text-blocks .text-row .title-bl{ padding-left: 26px !important; }
/* Сертификаты (politiki-kompanii): десктопный инсет 240px на мобильном сжимал
карусель — убираем, карусель во всю ширину. */
.sert-block .owl-carousel-sert{ padding-left: 0 !important; }
}