, не ,
поэтому НЕ ограничиваем тип тега в селекторе. Ловим элемент с
calc(25% - 12px) внутри flex-ряда c gap:16. */
.container > div > div[style*="display: flex"][style*="gap: 16px"] > [style*="calc(25% - 12px)"] {
flex: 0 0 calc(85% - 12px) !important;
}
/* WhyUs / DirectionsGrid — 3 колонки → 1 */
.container > div[style*="repeat(3, 1fr)"] {
grid-template-columns: 1fr !important;
}
/* Calculator поля */
.field__input { font-size: 16px !important; /* iOS не зумит при focus, если ≥16 */ }
/* PriceAdvantage — 2 колонки → 1 */
section.section--alt .container > div[style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* CMIInvestor — внутренние fact-карточки на мобиле идут в 1 колонку
(через .container [style*="grid-template-columns"]), но inline-стили
paddingLeft:32 / borderLeft / borderBottom:i<2 раскладывали 2x2-сетку
на чётных/нечётных. На моноколонке это даёт сдвинутые карточки
и пропавшие разделители. Сбрасываем и нормализуем по :not(:last-child). */
.cmi-fact {
padding-left: 0 !important;
border-left: 0 !important;
}
.cmi-fact:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.cmi-fact:last-child {
border-bottom: 0 !important;
}
/* Шрифты в padding на мобиле */
.article { padding: 32px 16px !important; font-size: 17px !important; }
.article h1 { font-size: 32px !important; }
.article h2 { font-size: 24px !important; }
.article .lead { font-size: 18px !important; }
.article table { font-size: 14px !important; }
.article .blog-grid { grid-template-columns: 1fr !important; }
}
/* Узкий мобильный ≤480px */
@media (max-width: 480px) {
.hero-content h1 { font-size: 28px !important; }
h2 { font-size: 24px !important; }
.hero-content .eyebrow,
.eyebrow { font-size: 11px !important; }
/* Footer — 1 колонка для контактных секций */
footer .container > div[style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* Кнопки CTA — full-width */
.btn--hero { width: 100%; justify-content: center; }
.container > div[style*="display: flex"][style*="gap: 14px"],
.container > div[style*="display: flex"][style*="gap: 12px"] {
flex-direction: column;
align-items: stretch;
}
}
/* PriceAdvantage — тёмный блок «Цепочка закупки» липнет к viewport,
пока пользователь читает длинный текст слева. На мобиле обычный flow. */
@media (min-width: 1024px) {
.price-advantage__chain {
position: sticky;
top: 100px;
align-self: start;
}
}
/* FAQList — стили живут в src/components/FAQList.astro (Astro версия).
Старое правило `.faq-row { display: grid }` удалено, оно конфликтовало с
новой -разметкой (расталкивало и .faq-row__answer
в 2 grid-колонки вместо stacked block layout). */
/* ===========================================================
Phase 4 — таргетные мобильные правила для новых/изменённых
компонентов после редизайна главной (Hero, ClientStrip,
IconStrip). Используют классы, добавленные в JSX.
=========================================================== */
/* Hero — карточка-оффер под H1 (новая структура: «от 160 000 ₽/т» крупно +
мета-строка «30–45 дней · С НДС и КМД»). Заменяет старую одностроку .hero-offer. */
.hero-offer-card {
display: inline-flex;
flex-direction: column;
gap: 8px;
padding: 18px 24px;
margin-bottom: 32px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hero-offer-card__price {
display: inline-flex;
align-items: baseline;
gap: 8px;
color: #fff;
font-weight: 600;
letter-spacing: -0.02em;
}
.hero-offer-card__price-prefix { font-size: 16px; opacity: 0.7; font-weight: 500; }
.hero-offer-card__price-value { font-size: 38px; font-variant-numeric: tabular-nums; line-height: 1; }
.hero-offer-card__price-unit { font-size: 18px; font-weight: 500; opacity: 0.85; }
.hero-offer-card__meta {
display: inline-flex; align-items: center; gap: 10px;
font-size: 14px;
color: rgba(255, 255, 255, 0.75);
font-weight: 500;
}
.hero-offer-card__meta b { color: #fff; font-weight: 600; }
.hero-offer-card__dot { color: rgba(255, 255, 255, 0.4); }
@media (max-width: 768px) {
/* Hero на мобиле — H1 крупнее (38 вместо 28 после старого !important),
карточка-оффер становится full-width, параграф скрыт (шум на мобиле),
CTA-кнопки full-width. */
.hero-h1, .hero-content h1 {
font-size: 38px !important;
line-height: 1.08 !important;
margin-bottom: 18px !important;
}
.hero-content > div:first-child {
max-width: 100%;
}
.hero-paragraph { display: none !important; }
.hero-offer-card {
display: flex;
width: 100%;
padding: 16px 18px;
margin-bottom: 24px;
}
.hero-offer-card__price-value { font-size: 34px; }
.hero-offer-card__meta { flex-wrap: wrap; }
/* Видео-фон на мобиле выключен JS-логикой Hero.jsx (≥768px),
но оставшийся poster тоже хочется ослабить — добавим больше тёмного. */
.hero-section .hero-overlay {
background: linear-gradient(180deg, rgba(5,10,23,0.55) 0%, rgba(5,10,23,0.85) 100%) !important;
}
}
@media (max-width: 480px) {
.hero-h1, .hero-content h1 { font-size: 34px !important; }
.hero-section { min-height: 540px !important; }
.hero-content { padding-block: 40px 48px !important; }
.hero-offer-card__price-value { font-size: 30px; }
}
/* PageHero (под-страницы) — H1 на мобиле ужимается с 62 до 38px,
уменьшаем верт. отступы секции, stat-card складывается в 2 колонки. */
@media (max-width: 768px) {
.page-hero { padding-block: 48px !important; }
.page-hero__h1 {
font-size: 38px !important;
line-height: 1.1 !important;
margin-bottom: 18px !important;
letter-spacing: -0.015em !important;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.page-hero p {
font-size: 16px !important;
line-height: 1.5 !important;
}
}
@media (max-width: 480px) {
.page-hero__h1 { font-size: 32px !important; }
.page-hero { padding-block: 40px !important; }
}
/* ===========================================================
Calculator на мобиле — padding 56×48 съедает половину экрана.
Уменьшаем до 28×18, h2 ужимаем, цифру результата чуть мельче.
=========================================================== */
@media (max-width: 768px) {
.calc-form, .calc-result {
padding: 32px 20px !important;
}
.calc-form__h2 {
font-size: 26px !important;
line-height: 1.2 !important;
}
.calc-result > div:nth-child(2) > div:nth-child(2) > span:nth-child(2) {
/* Большая цифра «от X.X» — уменьшаем с 56 до 44 */
font-size: 44px !important;
}
.calc-savings {
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
}
.calc-savings__amount { font-size: 24px !important; }
.calc-savings__percent { font-size: 38px !important; }
/* Range + number input в Тоннаж — на iPhone число съедало флекс.
Делаем range full-width, число под ним. */
.calc-form .field input[type="number"] {
width: 100% !important;
text-align: left !important;
}
}
@media (max-width: 480px) {
.calc-form, .calc-result { padding: 24px 16px !important; }
.calc-form__h2 { font-size: 24px !important; }
.calc-result > div:nth-child(2) > div:nth-child(2) > span:nth-child(2) {
font-size: 38px !important;
}
}
/* ===========================================================
IconStrip — 4 цифры. На мобиле сейчас row-stack с горизонтальными
разделителями (см. Phase 4 ниже). Делаем плотнее: padding меньше,
цифра чуть мельче, иконка слева не такая «массивная».
=========================================================== */
@media (max-width: 768px) {
.icon-strip > .container > div {
padding: 20px 0 !important;
gap: 16px !important;
}
/* Уменьшаем «коробочку» иконки */
.icon-strip > .container > div > div:first-child {
width: 36px !important;
height: 36px !important;
}
/* Цифра — была 32, ставим 28 для плотности на iPhone SE 375px */
.icon-strip > .container > div span[style*="font-size: 44px"] {
font-size: 28px !important;
}
.icon-strip > .container > div .stat-label,
.icon-strip > .container > div > div > div > div:last-child {
font-size: 13px !important;
}
}
/* ===========================================================
Footer на мобиле — accordion-стиль для длинных колонок.
Сейчас 4 колонки (Производство/Услуги/Регионы/Компания) на мобиле
складываются в 2×2 (768) и 1×N (480). 7 ссылок × 4 = 28 ссылок
подряд = очень длинно. Делаем складные секции через .
Это требует JSX-правок Footer.jsx — пока ужимаем шрифт и spacing.
=========================================================== */
@media (max-width: 768px) {
/* Заголовки колонок крупнее, ссылки чуть плотнее */
footer h3 { font-size: 13px !important; margin-bottom: 12px !important; }
footer a { font-size: 13.5px !important; }
footer ul li { margin-bottom: 8px !important; }
/* Логотип-колонка с реквизитами — уменьшаем text */
footer p { font-size: 12.5px !important; line-height: 1.5 !important; }
}
/* ClientStrip — на десктопе flex space-between (label слева,
имена справа). На мобиле space-between с переносом даёт
странную центровку — переходим на column-stack. */
@media (max-width: 768px) {
.client-strip > .container {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
.client-strip > .container > div {
gap: 22px !important;
font-size: 14px !important;
}
}
/* IconStrip — на десктопе 4 колонки в одну строку. На планшете
4 колонки слишком тесные — даём 2×2. На мобиле — 1 колонка
с горизонтальными разделителями вместо вертикальных. */
@media (max-width: 1024px) and (min-width: 769px) {
.icon-strip > .container > div {
padding: 36px 22px !important;
}
}
@media (max-width: 768px) {
.icon-strip > .container {
grid-template-columns: 1fr !important;
}
.icon-strip > .container > div {
border-left: 0 !important;
border-top: 1px solid var(--grey-200);
padding: 28px 0 !important;
flex-direction: row !important;
align-items: center !important;
gap: 20px !important;
}
.icon-strip > .container > div:first-child {
border-top: 0 !important;
padding-top: 12px !important;
}
/* Большая цифра помельче, чтобы помещалась в строку с иконкой */
.icon-strip > .container > div span[style*="font-size: 44px"] {
font-size: 32px !important;
}
}
/* ===========================================================
A11Y SUPPORT — skip-link, global focus-visible, sr-only
Standard WCAG 2.1 keyboard navigation patterns. Mouse users
never see :focus-visible (browser heuristic), so visible focus
ring appears only when navigating via Tab.
=========================================================== */
.skip-link {
position: fixed;
top: 8px;
left: 8px;
z-index: 100000;
background: var(--navy-900);
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
text-decoration: none;
letter-spacing: -0.005em;
transform: translateY(-150%);
transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0);
outline: 3px solid var(--brand-red);
outline-offset: 2px;
}
/* Globally visible focus ring on Tab navigation. We don't override
:focus (mouse click) — only the keyboard-driven :focus-visible. */
:focus-visible {
outline: 2px solid var(--navy-600);
outline-offset: 3px;
border-radius: 2px;
}
.btn:focus-visible {
outline: 3px solid var(--navy-600);
outline-offset: 4px;
}
.btn--primary:focus-visible,
.btn--hero:focus-visible {
outline-color: var(--brand-red);
}
a:focus-visible {
outline: 2px solid var(--navy-600);
outline-offset: 3px;
border-radius: 2px;
}
/* Inside dark surfaces (navy-900 / red footer / cookie banner) — light ring */
.cookie-banner :focus-visible,
[data-on-dark="1"] :focus-visible,
.calc-savings :focus-visible {
outline-color: #fff;
}
/* Hide focus ring when user clicks (mouse) — browser handles via :focus-visible heuristic */
/* Screen-reader-only utility for visually hidden text */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Make :target (skip-link landing) accept programmatic focus without showing it. */
[id="main-content"]:focus { outline: none; }
/* ===========================================================
2-col sticky-aside sections (TenderDocs, FAQ)
На мобиле — 1 column + static aside. Inline JSX style блокировал
@media для grid-template-columns + position:sticky → переехало в CSS class.
=========================================================== */
.split-2col {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 64px;
align-items: start;
}
.split-2col--wide {
grid-template-columns: 1fr 2fr;
gap: 80px;
}
.split-2col__aside {
position: sticky;
top: 210px;
}
@media (max-width: 1023px) {
.split-2col,
.split-2col--wide {
grid-template-columns: 1fr;
gap: 40px;
}
.split-2col__aside {
position: static;
top: auto;
}
}