/* ============================================================================ itfresh.ru — техническая правка по аудиту вёрстки/читаемости 2026-09-05 Содержание страниц не меняется: только размеры, интерлиньяж, контраст и устранение горизонтальной прокрутки. Файл подключается последним в , поэтому перекрывает inline-стили одинаковой специфичности. ========================================================================= */ /* --------------------------------------------------------------------------- 1. КОНТРАСТ. Акцентный #d97000 не проходил WCAG AA: белый текст на нём 3.35:1 (нужно 4.5:1) он как текст на кремовом 3.05:1 (нужно 4.5:1) #a85800 даёт 5.17:1 и 4.72:1 — тон остаётся оранжевым. ------------------------------------------------------------------------ */ :root{ --orange:#a85800; --accent:#a85800; } /* --------------------------------------------------------------------------- 2. ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА. Меню шапки (display:flex без wrap) на 360px выносило страницу на 57px. ------------------------------------------------------------------------ */ @media (max-width: 760px){ .site-header .container, .site-header > .container{ flex-wrap: wrap; row-gap: 10px; } .header-nav{ flex-wrap: wrap; gap: 10px 16px; } } @media (max-width: 420px){ .header-nav{ gap: 8px 12px; } } /* Сетки на auto-fit/minmax не должны быть шире контейнера */ .case-studies, .guarantees-grid, .services-grid, .features-grid, .stats-grid, .products-grid{ grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } /* Широкое содержимое прокручивается внутри себя, а не ломает страницу */ .comparison-table, .comp-table-wrap, .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; } .article table, .article-content table, .article-body table{ max-width: 100%; } /* --------------------------------------------------------------------------- 3. ЧИТАЕМОСТЬ ОСНОВНОГО ТЕКСТА. max(1rem, 1em) — это ПОЛ, а не фиксация: текст крупнее 16px не уменьшается, мельче 16px поднимается до 16px. ------------------------------------------------------------------------ */ main p:not([class]), main li:not([class]), main dd:not([class]), main blockquote:not([class]), article p:not([class]), article li:not([class]), article dd:not([class]), .article p, .article li, .article dd, .article-content p, .article-content li, .article-body p, .article-body li, .article-main p, .article-main li, .post-content p, .post-content li, .content p, .content li{ font-size: max(1rem, 1em) !important; line-height: 1.75 !important; } /* Выделения внутри текста наследуют размер абзаца */ main p strong, main li strong, .article p strong, .article li strong, main p em, main li em, .article p em, .article li em{ font-size: inherit !important; line-height: inherit !important; } /* Таблицы в статьях */ .article td, .article th, .article-content td, .article-content th, main table td, main table th, article table td, article table th{ font-size: max(1rem, 1em) !important; line-height: 1.55 !important; } /* Списки материалов: «ссылка + описание» в неоформленных
  • */ li:not([class]) > a:not([class]), li:not([class]) > div:not([class]), li:not([class]) > span:not([class]){ font-size: max(1rem, 1em) !important; line-height: 1.6 !important; } /* --------------------------------------------------------------------------- 3a. Текст на фирменной оранжевой плашке остаётся светлым. Правила strong{color:var(--dark)} перебивали унаследованный белый — тёмное на оранжевом давало 3.7:1. ------------------------------------------------------------------------ */ .cta-banner strong, .cta-banner b, .cta-banner em, .itf-help strong, .itf-help b, .itf-help em, .article__cta strong, .article__cta b, .article__cta em{ color: inherit !important; } /* Обложки презентаций /articles/deck/: заголовок остаётся белым (второй h1 понижен до h2 ради корректной иерархии) */ .cover h1, .cover h2, .cover p, .cover .kick, .cover .lead{ color: #fff; } .cover .btn{ color: #8b3a00; } /* Презентации: подписи шагов */ .stepd{ font-size: max(0.9375rem, 1em) !important; line-height: 1.55 !important; } .hint{ font-size: max(0.9375rem, 1em) !important; } /* Врезки «совет / внимание / примечание» — это обычный текст, а не подпись */ .tip, .warn, .note, .callout, .info-box, .article__note, .comment-text, .itf-spam-hint__title{ font-size: max(1rem, 1em) !important; line-height: 1.65 !important; } /* Каталог статей: 437 ссылок были 15px / 1.40 */ .catalog__link, .cat-link, .home-article, .article__link{ font-size: max(1rem, 1em) !important; line-height: 1.6 !important; } /* Главная страница */ .hero-title-sub, .hero-subtitle, .cta-description, .testimonial-company, .testimonial-text, .product-cta, .cta-btn-main, .cta-btn-phone{ font-size: max(1rem, 1em) !important; line-height: 1.6 !important; } /* Мелкий служебный текст: юридическая строка, хлебные крошки, подписи. Не «основной текст», но 12px — слишком мало; поднимаем до 14–15px. */ .footer-copy, .products-footer, .breadcrumbs, summary, .checkbox-with-text, .itf-consent, .itf-subscribe details{ font-size: max(0.875rem, 1em) !important; line-height: 1.6 !important; } .itf-subscribe label, .itf-subscribe span, .itf-subscribe em, .itf-subscribe p{ font-size: max(0.9375rem, 1em) !important; line-height: 1.6 !important; } /* Ссылки внутри текста наследуют размер абзаца, а не задают свой мелкий */ main a:not([class]), article a:not([class]), .article a:not([class]), .article-content a:not([class]), .article-body a:not([class]){ font-size: inherit !important; } /* Надзаголовки-метки оставляем мелкими, но не меньше 13px */ .hero-eyebrow, .cta-eyebrow, .section-label, .article-cat, .meta-badge{ font-size: max(0.8125rem, 1em) !important; } /* Длина строки: на широких экранах абзац не должен растягиваться за ~75 знаков (было до 104). */ @media (min-width: 900px){ .article p:not([class]), .article li:not([class]), .article-content p:not([class]), .article-body p:not([class]), .article__lead{ max-width: 68ch; } } /* --------------------------------------------------------------------------- 4. ЗОНЫ НАЖАТИЯ (WCAG 2.5.8 — минимум 24px, рекомендация 44px) ------------------------------------------------------------------------ */ input[type="checkbox"], input[type="radio"]{ width: 24px !important; height: 24px !important; flex-shrink: 0; } .site-footer a, footer a, .header-nav a, .breadcrumbs a{ padding-block: 4px; display: inline-block; } /* --------------------------------------------------------------------------- 5. Каталог статей /articles/ (шаблон hub-*) ------------------------------------------------------------------------ */ .hub-card p, .hub-sec-desc, .hub-lead{ font-size: max(1rem, 1em) !important; line-height: 1.6 !important; } .hub-chip, .hub-more, .hub-found, .hub-card-go, .site-footer{ font-size: max(0.9375rem, 1em) !important; line-height: 1.55 !important; }