/* ===================================================================== PROBUSINESS — mobile, партиал ГЛАВНОЙ (Figma ГЛАВНАЯ_mobile 1:588) Только экраны ≤1085px, только body.pbm.pbm-home. Базовый mobile.css не трогаем. Все правки — по инструментальной сверке с _figma/02-screens/glavnaya.md. ===================================================================== */ @media (max-width:1085px){ /* --------------------------------------------------------------------- 2. MANUAL SCROLL CAROUSELS (1:999) — фейд правого края 1:1009 (40×66, linear-gradient(to right, rgba(255,255,255,0) → #fff)). Лента скроллится, поэтому фейд делаем маской: она привязана к боксу элемента, а не к контенту. --------------------------------------------------------------------- */ body.pbm.pbm-home .header-buttons.custom{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent 100%); } /* --------------------------------------------------------------------- 3. Лента иконок сервисов (1:939) — фейд правого края 1:998 (40×72). --------------------------------------------------------------------- */ body.pbm.pbm-home ul.mod-menu.menu-icons{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent 100%); } /* --------------------------------------------------------------------- 5. MINIMALIST TABS (1:923) — «НОВОСТИ» / «БИЗНЕС-ЛЕНТА». В разметке это

внутри .vkladki-custom.blog / .lenta (в базовом mobile.css они спрятаны). Раскладываем .container-vkladki в grid и поднимаем оба заголовка в один ряд: ряд 1 — строка поиска (1:929) y 234…305 ряд 2 — табы 1:923, h45+1px бордер y 293…339 (margin-top −12: в макете табы наезжают на нижний паддинг блока поиска) ряд 3 — закладки 1:913 y 349…410 ряд 4 — линия 1:922 (::after) y 410…416 --------------------------------------------------------------------- */ body.pbm.pbm-home .news-home-page .container-vkladki{ display:grid;grid-template-columns:auto auto 1fr; } body.pbm.pbm-home .news-home-page .vkladki-custom.serch{ grid-row:1;grid-column:1/-1;padding:16px 0 0; } body.pbm.pbm-home .news-home-page .vkladki-custom.blog, body.pbm.pbm-home .news-home-page .vkladki-custom.lenta{ display:contents!important; } body.pbm.pbm-home .news-home-page .vkladki-custom.lenta > ul.tabs__nav{display:none!important;} body.pbm.pbm-home .news-home-page .vkladki-custom > h2{ display:flex!important;align-items:center;justify-content:flex-start; grid-row:2;align-self:start; height:46px;margin:-12px 0 0;padding:14px 0;box-sizing:border-box; background:none;border:0;border-bottom:1px solid var(--pb-border);border-radius:0; font-family:var(--pb-font);font-weight:700;font-size:15px;line-height:17px;letter-spacing:0; text-transform:uppercase;white-space:nowrap;text-align:center; color:var(--pb-muted);position:relative;pointer-events:none; } /* таб «БИЗНЕС-ЛЕНТА» кликабелен — уводит на /blogs (js/mobile-home.js), у секции .lenta на главной своего .tabs__content нет, переключать нечего */ body.pbm.pbm-home .news-home-page .vkladki-custom.lenta > h2{ pointer-events:auto;cursor:pointer; } /* активный таб «НОВОСТИ»: тёмный текст + индикатор 3px #08a5c5 (1:926). padding-right 24 = gap макета между табами (иначе бордер рвётся). */ body.pbm.pbm-home .news-home-page .vkladki-custom.blog > h2{ grid-column:1;padding-right:24px;color:var(--pb-text); } body.pbm.pbm-home .news-home-page .vkladki-custom.blog > h2::after{ content:"";position:absolute;left:0;right:24px;bottom:-1px;height:3px; background:var(--pb-accent);border-radius:3px 3px 0 0; } body.pbm.pbm-home .news-home-page .vkladki-custom.lenta > h2{grid-column:2;} /* пустой хвост ряда табов — чтобы нижний бордер 1:923 шёл на всю ширину 387 */ body.pbm.pbm-home .news-home-page .container-vkladki::before{ content:"";grid-row:2;grid-column:3;align-self:start;box-sizing:border-box; height:46px;margin-top:-12px;border-bottom:1px solid var(--pb-border); } /* 6. Закладки (1:913): ряд 3, отступ 10px от табов (339 → 349) */ body.pbm.pbm-home .news-home-page.custom .vkladki-custom.blog > ul.tabs__nav{ grid-row:3;grid-column:1/-1;margin-top:10px; } /* линия 1:922 — ряд 4 */ body.pbm.pbm-home .news-home-page .container-vkladki::after{ grid-row:4;grid-column:1/-1; } /* 7. Лента новостей начинается на y427: 416 + 11 */ body.pbm.pbm-home .news-home-page.custom .tabs__content > .card{margin-top:11px;} /* --------------------------------------------------------------------- 7.1 Большая карточка (1:591): заголовок 1:599 — бокс 44 на две строки (в макете lineHeight 100 ⇒ 22px), браузерный `normal` даёт 22.5 и лишний пиксель высоты всей карточки. --------------------------------------------------------------------- */ body.pbm.pbm-home .news-home-page.custom .card__title, body.pbm.pbm-home .news-home-page.custom .card__title a{line-height:22px;} /* --------------------------------------------------------------------- 7.3 Крутилка (1:641): линия-разделитель 1:668 на y31 и заголовок 1:642 на y36 (h22); карточки 1:645 на y67, низ блока +14. --------------------------------------------------------------------- */ /* padding-top 11 — под подпись 1:669 (11…24), дальше линия border-top у h3 на 31 */ body.pbm.pbm-home .mod-news-slider{padding-top:10px;} body.pbm.pbm-home .mod-news-slider .mns-slider{margin-top:8px;} /* --------------------------------------------------------------------- 7.4 Список (1:670): — у строки был свой border-bottom И отдельный
: на экране две линии вместо одной (в макете разделитель один — 1:683); — шаг строк 62.8 (в макете), поля hr 10/10 давали 71; — заголовок 1:673 шириной 324, max-width:70% из template.css резал до 264. --------------------------------------------------------------------- */ body.pbm.pbm-home .mns-card-list-custom{border-bottom:0;} body.pbm.pbm-home .mns-list .list-hr{margin:5px 0;} body.pbm.pbm-home .mns-card-list-custom .mns-lsit-title{max-width:none;} /* --------------------------------------------------------------------- 7.5 Новость без картинки (1:735): у шапки 1:740 radius 5.742 сверху. --------------------------------------------------------------------- */ body.pbm.pbm-home .home-news-single__header{ border-top-left-radius:5.742px;border-top-right-radius:5.742px; } /* --------------------------------------------------------------------- Межблочные отступы ленты 1:590 — ровно 20px. Пустой #system-message-container добавлял 10px перед «О проекте», у Qazaq product был margin-top 30. --------------------------------------------------------------------- */ body.pbm.pbm-home #system-message-container:empty{margin:0;} body.pbm.pbm-home .mns-list.custom{margin-top:20px;} /* подпись «Бизнес-лента» над заголовком крутилки (1:669): 12/100 #6b7280, низ на 24 от верха блока */ body.pbm.pbm-home .mod-news-slider .mns-kicker{ display:block!important;padding:0 0 0 7px;margin:0 0 7px; font-family:var(--pb-font);font-weight:100;font-size:12px;line-height:13px;color:var(--pb-muted);white-space:nowrap; } }