/* ============================================================ ITC MEDIA — ADAPTIVE STANDARD (единый источник истины) Эталон адаптива — ГЛАВНАЯ страница. Здесь её мобильный стандарт вынесен в переменные + правила, которые покрывают оба «словаря» классов проекта: • главная: .hub-* / .itc-* • Bitrix/прочие: .section / .*-card / .*-header Подключать ПОСЛЕДНИМ в страницы: Менять общий вид адаптива — ТОЛЬКО здесь. ============================================================ */ :root { /* — мобильный стандарт (значения с телефона-эталона) — */ --m-bp: 700px; /* верхняя граница «телефона» */ --m-section-pad: 50px; /* внутренний отступ секции сверху/снизу */ --m-card-pad: 18px; /* отступы внутри карточек со всех сторон */ --m-h1: 32px; /* заголовок героя — самый крупный */ --m-h2: 28px; /* заголовки секций — меньше h1 */ --m-h3: 20px; /* подзаголовки карточек/блоков */ --m-lead: 15px; /* лид/описание секции, hero-sub */ --m-eyebrow: 10px; /* плашки-эйбрау над заголовком */ --m-hero-pad-top: 40px; /* отступ героя под шапкой */ } /* ── УНИВЕРСАЛЬНЫЕ ЗАЩИТЫ (на всех ширинах) ───────────────── */ /* 1 — страница не едет вбок (clip не ломает sticky-шапку) */ html, body { overflow-x: clip; } /* 2 — медиа вписывается в контейнер */ img, svg, video, iframe, canvas { max-width: 100%; height: auto; } /* 3 — длинные заголовки переносятся ЦЕЛЫМИ словами (по пробелам), не рвём посередине */ h1, h2, h3 { overflow-wrap: normal; word-break: normal; hyphens: none; } /* акцентные слова в заголовках не держим в одну строку — иначе вылезают */ .head-italic, .head-italic-b24, .accent, .accent-italic { white-space: normal; } /* 4 — min-width:auto у grid/flex-детей — главная причина переполнения */ .hub-hero__layout > *, .hub-verticals > *, .hub-blog > *, .hub-team > *, .hub-process > *, .hub-cases > *, .hub-trust-stats > *, .hub-reviews > *, .hub-footer__top > *, .hub-cta__grid > *, #team .container > *, .hero-grid > *, .pain-grid > *, .services-grid > *, .why-grid > *, .process-grid > *, .pricing-grid > *, .guarantee-grid > *, .faq-layout > *, .final-cta__grid > *, .showcase-stats-row > *, .rent-problems > *, .rent-roles > *, .case-blocks > *, .conversion-grid > *, .reviews-grid > *, .team-dark-grid > *, .final-cta-grid > *, .results-grid > *, .conversion-card-num > *, .showcase-card > *, .showcase-list > *, .webinar-block > *, .webinar-hero-grid > *, .webinar-right-col > * { min-width: 0; } /* кейс-карточки без тяжёлой тени — на всех страницах и ширинах (просьба) */ .case-card-equal, .cases-section-dark .case-card-equal, .cases-equal-grid-3 .case-card-equal, .hub-case, .case-card-equal:hover, .cases-section-dark .case-card-equal:hover, .cases-equal-grid-3 .case-card-equal:hover, .hub-case:hover { box-shadow: none !important; } /* ── МОБИЛЬНЫЙ СТАНДАРТ ────────────────────────────────────── */ @media (max-width: 700px) { /* ТИПОГРАФИКА — единый масштаб для всех страниц (иерархия h1 > h2 > h3) */ .hub-hero h1, .hero h1, h1 { font-size: var(--m-h1) !important; line-height: 1.1; } .hub-head h2, .section-header h2, .services-section h2, .services-header h2, .faq-header h2, .final-cta h2, .case-detail-head h2, .integrations-section h2, .conversion-section h2, .faq-section h2, .guarantee-section h2, .pricing-section h2, .reviews-section h2, .showcase-section h2, .problems-section h2, .calculator-section h2, .testimonials-section h2, .webinar-section h2, .final-cta-section h2, .final-cta-lead h2, .conversion-cta-title, .conversion-header h2, .guarantee-header h2 { font-size: var(--m-h2) !important; line-height: 1.12; } /* модалки/диалоги — свой компактный заголовок, не секционный масштаб */ .modal-header h2, .hub-modal h2 { font-size: 22px !important; line-height: 1.15; } h3, .pain-card h3, .service-card h3, .process-card h3, .why-card h3, .pricing-card h3, .guarantee-card h3, .case-block h3, .case-forms-block h3, .case-result-block h3, .rent-screenshot-text h3, .rent-author-text h3, .hub .itc-card h3, .conversion-card h4, .result-card h3, .result-head h3, .review-card h3, .webinar-block h3, .stats-card h3 { font-size: var(--m-h3) !important; } /* карточные h3 со своим крупным размером — приводим к стандарту h3 */ .showcase-content h3 { font-size: var(--m-h3) !important; } /* цифры в showcase-статах не держим в одну строку — иначе широкие значения («1С ↔ Б24») налезают на соседнюю колонку */ .showcase-stat-v { font-size: 22px !important; white-space: normal; } /* крупные «цифры-метрики» в карточках — единый компактный размер на мобиле (иначе вылезают: «2 нед.», «3,8×» и т.п.) */ .stat-value, .case-stat-value, .team-dark-stat-value, .calc-stat-value, .calc-stat-value.big, .conversion-stat-num, .modal-stat-value, .metric-num, .hub-metric__num, .hub-tstat__num, .hub-cm__v { font-size: 27px !important; } .hub .itc-eyebrow, .hub .eyebrow, .eyebrow, .services-eyebrow, .guarantee-eyebrow, .faq-eyebrow, .conversion-eyebrow, .conversion-cta-eyebrow { font-size: var(--m-eyebrow) !important; letter-spacing: .08em; } .hub-head p, .hub-hero__sub, .hub-cta__lede, .section-header p, .services-header p, .case-detail-head p, .hero-sub, .final-cta__left p, .faq-subhead, .guarantee-header p, .conversion-intro p, .final-cta-grid p, .conversion-cta-block p, .conversion-cta-block .conversion-cta-lead { font-size: var(--m-lead) !important; line-height: 1.55; } /* ШАПКИ СЕКЦИЙ — по левому краю, на всю ширину, компактный нижний отступ. !important — перебиваем инлайновые «text-align:center !important» страниц. */ .hub-head, #team .hub-head, .section-header, .services-header, .case-detail-head, .faq-header, .guarantee-header, .conversion-header { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; margin-bottom: 26px; } /* и их содержимое (h2/p были центрированы инлайном с !important). Явные селекторы h2/p (специфичность 0,1,1) перебивают инлайн-центр. */ .section-header h2, .services-header h2, .case-detail-head h2, .faq-header h2, .guarantee-header h2, .conversion-header h2, .section-header p, .services-header p, .case-detail-head p, .faq-header p, .guarantee-header p, .conversion-header p, .section-header .eyebrow, .services-header .services-eyebrow, .conversion-header .conversion-eyebrow { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } .hub-head .eyebrow, .hub-head .itc-eyebrow, .section-header .eyebrow, .services-header .services-eyebrow, .faq-header .faq-eyebrow { margin-bottom: 12px; } .hub-head h2, .section-header h2, .services-header h2, .faq-header h2 { margin-bottom: 16px; } /* контент сразу после шапки секции не добавляет свой верхний отступ (шапка уже даёт margin-bottom) — убирает «большой отступ» интро → карточки */ .section-header + *, .hub-head + *, .services-header + *, .guarantee-header + *, .conversion-header + *, .faq-header + * { margin-top: 0 !important; } /* КАРТОЧКИ — единые отступы 18px со всех сторон */ .hub .itc-card, .pain-card, .service-card, .why-card, .pricing-card, .guarantee-card, .process-card, .case-block, .showcase-content, .final-cta__card, .rent-card, .compare-body, .result-card, .conversion-card, .review-card, .webinar-block, .stats-card { padding: var(--m-card-pad); } /* ВЕРТИКАЛЬНЫЙ РИТМ СЕКЦИЙ Базово у каждой секции 50px сверху и снизу. • разные цвета соседей → видно по 50px каждого (это правильно); • одноцветные соседи → во избежание пустого блока 100px у второй секции верхний отступ обнуляется (правила соседства — в самой странице, т.к. зависят от порядка цветов). */ .hub-sec, .hub-cta, .section, .pain-section, .services-section, .why-section, .showcase-section, .process-section, .pricing-section, .guarantee-section, .faq-section, .final-cta, .problems-section, .calculator-section, .magnet-section, .testimonials-section, .webinar-section, .final-cta-section, .team-section-dark, .cases-section-dark, .conversion-section, .reviews-section { padding-top: var(--m-section-pad) !important; padding-bottom: var(--m-section-pad) !important; } .hub-hero, .hero { padding-top: var(--m-hero-pad-top); } .hub-footer, .hub-footer { padding-top: var(--m-section-pad); } /* двухколоночные «интро+контент» секции на мобиле — компактный зазор */ .faq-layout { gap: 28px; } /* showcase-карточка (картинка+текст) на мобиле — в одну колонку, иначе контент вылезает за край */ .showcase-card { grid-template-columns: 1fr !important; } /* med: круги команды на мобиле прижаты влево (последний ряд не центрируем) */ .team-circles-row { justify-content: flex-start !important; } /* med: KPI-плашка (×2–3 больше заявок) — слева, тексты по вертикали по центру */ .result-kpi { justify-content: flex-start; align-items: center; } /* med: webinar-блок — убираем свой горизонтальный паддинг, чтобы контент шёл по сетке (как остальные секции; .container уже даёт отступ) */ .webinar-block { padding-left: 0 !important; padding-right: 0 !important; } /* med: webinar-шапка — влево, не по центру */ .webinar-hero-head { text-align: left !important; } .webinar-hero-head h2, .webinar-hero-head p, .webinar-hero-head .webinar-pill { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } /* med: калькулятор-карточка — внутренние отступы 15px; цифры компактнее */ .calculator { padding: 15px !important; } .calc-results { padding: 15px !important; } .calc-stat-value, .calc-stat-value.big { font-size: 22px !important; } .calc-result-value { font-size: 24px !important; } .calc-result-value.big { font-size: 28px !important; } /* кнопка калькулятора — меньше верхний отступ */ .calc-cta { margin-top: 14px; } /* FAQ-вопросы (заголовки аккордеона) — компактнее на мобиле */ .faq-question, .faq-item summary { font-size: 16px !important; } /* hero-trust (список доверия под кнопками) — единый вид: компактные иконки 22px и зазор 16px (как на bitrix) */ .hero-trust { gap: 16px; } .trust-icon { width: 22px; height: 22px; } /* guarantee-карточка: бейдж-штамп в поток (а не абсолют в углу), текст на всю ширину — убираем правый отступ под бейдж (как на bitrix) */ .guarantee-stamp, .guarantee-stamp-secondary { position: static !important; top: auto !important; right: auto !important; margin: 0 0 16px !important; } .guarantee-card > h3, .guarantee-card > p { padding-right: 0 !important; } /* круг-штамп гарантии — компактнее (88 → 64px), как на bitrix */ .guarantee-stamp .big, .guarantee-stamp-secondary .big { width: 64px !important; height: 64px !important; font-size: 19px !important; } /* CTA-блоки (финальный + конверсия) — влево, а не по центру */ .final-cta, .final-cta-lead, .conversion-cta-block { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } .final-cta-lead h2, .final-cta-lead > p, .conversion-cta-block .conversion-cta-title, .conversion-cta-block > p { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } }