/* acdc-mobile 1.2.0 */ /*! * ACDC — лендинги на узком экране. * * Страницы «Юридическим лицам», «Услуги», «О компании», «Наши работы» * и «Программирование систем» свёрстаны одними встроенными стилями * (`style="…"`) и не содержат ни одного `@media`. На телефоне это ломается * так: ряды `display: flex` держат жёсткую ширину (380–760 px) при * `flex-shrink: 0` и не сжимаются, а у родителя `overflow: hidden` — * поэтому прокрутки нет, хвост просто срезан. Сетки же в четыре и шесть * колонок сжимаются до ~70 px на колонку, и подписи налезают друг на друга. * * Встроенный стиль перебивается только `!important`, а нацелиться на него * можно лишь по куску значения — отсюда селекторы вида [style*="…"]. * Форма записи в лендингах одна и та же («padding: », «display: flex», * «grid-template-columns: repeat(…»), проверено по всем пяти страницам. * * Полосы намеренно не пересекаются: телефон (до 767) и планшет (768–991) * правят сетки каждый по-своему. Пересекались бы — спор выигрывал не более * узкий экран, а более длинный селектор, и телефон получал бы планшетную * раскладку. Так уже случилось на первой сборке: «Электромонтажные работы» * стояло в плитке 135 px и обрезалось. * * Всё лежит внутри @media: на широком экране не меняется ни один пиксель. */ /* --------------------------------------------------------------------------- До 991 px — строй перестаёт быть шире экрана. Общее для планшета и телефона. --------------------------------------------------------------------------- */ @media (max-width: 991px) { /* Ничто в лендинге не шире своего места. Одно правило гасит все жёсткие ширины 230–760 px; значки 26/34/44 px не задевает — они и так меньше. */ .acdc-page, .acdc-page * { max-width: 100% !important; } /* Ряды переносятся. Без этого `flex-shrink: 0` держит ряд шире экрана. */ .acdc-page [style*="display: flex"] { flex-wrap: wrap !important; } /* Колонке флекса разрешаем ужиматься уже своего содержимого: по умолчанию `min-width: auto` не даёт, и длинное слово распирает ряд. Встроенного `min-width` в лендингах нет ни одного — перебивать нечего. */ .acdc-page [style*="display: flex"] > * { min-width: 0 !important; } .acdc-page img { max-width: 100% !important; height: auto !important; } } /* --------------------------------------------------------------------------- 768–991 px — планшет: колонок вдвое меньше, но список не в столбик. --------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 991px) { .acdc-page [style*="grid-template-columns"][style*="repeat(6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .acdc-page [style*="grid-template-columns"][style*="repeat(4"], .acdc-page [style*="grid-template-columns"][style*="repeat(3"], .acdc-page [style*="grid-template-columns"][style*="1.6fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* --------------------------------------------------------------------------- До 767 px — телефон: одна колонка, поля и кегль по размеру экрана. --------------------------------------------------------------------------- */ @media (max-width: 767px) { /* Все сетки — в одну колонку. Две колонки на 390 px дают 135 px под текст, а «Электромонтажные» одним словом занимает 176 px: у плитки `overflow: hidden`, и слово не переносится, а обрезается. */ .acdc-page [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; } /* Плитка «01» растянута на две колонки (`grid-column: span 2`). Когда колонка осталась одна, это уже не «во всю ширину», а требование второй: браузер заводит неявную колонку нулевой ширины, и каждая вторая плитка схлопывается в ноль. Стенд ловил это как двенадцать блоков с коробкой 0 при непустом тексте — плитки 02, 04, 06 и 08. */ .acdc-page [style*="grid-column: span"] { grid-column: auto !important; } /* Исключение — полоса логотипов брендов: там картинки, а не текст, и столбиком это лента на пол-экрана. Отличаем по классу ячейки, а не по числу колонок: шестиколоночных сеток две, и вторая — текстовая. Браузер без `:has()` просто оставит один столбец. */ .acdc-page [style*="grid-template-columns"]:has(> .brand) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Боковые поля — 16 px. Крупные внутренние отступы (20–84 px) на телефоне съедают половину строки. Мелочь «padding: 6px 14px», «12px 16px», «16px 18px», «18px 20px» намеренно не тронута: это плашки и кнопки, им поля по размеру. */ .acdc-page [style*="padding: 2"], .acdc-page [style*="padding: 3"], .acdc-page [style*="padding: 4"], .acdc-page [style*="padding: 5"], .acdc-page [style*="padding: 8"] { padding-left: 16px !important; padding-right: 16px !important; } /* Отступы только по бокам (высота задана отдельно) — тоже к 16 px. */ .acdc-page [style*="padding: 0 2"], .acdc-page [style*="padding: 0 3"] { padding-left: 16px !important; padding-right: 16px !important; } /* Самые высокие блоки — первый экран и разделители полос. */ .acdc-page [style*="padding: 4"], .acdc-page [style*="padding: 5"], .acdc-page [style*="padding: 8"] { padding-top: 32px !important; padding-bottom: 32px !important; } /* Заголовки. Крупный кегль набирали под 1600 px: 62 px на телефоне — три буквы в строке. Значения перечислены поимённо, чтобы не задеть 14–20 px, на которых держится весь текст. */ .acdc-page [style*="font-size: 62px"] { font-size: 30px !important; letter-spacing: -.02em !important; } .acdc-page [style*="font-size: 44px"], .acdc-page [style*="font-size: 42px"], .acdc-page [style*="font-size: 40px"], .acdc-page [style*="font-size: 38px"] { font-size: 26px !important; } .acdc-page [style*="font-size: 34px"], .acdc-page [style*="font-size: 30px"], .acdc-page [style*="font-size: 28px"], .acdc-page [style*="font-size: 27px"], .acdc-page [style*="font-size: 26px"], .acdc-page [style*="font-size: 25px"] { font-size: 22px !important; } /* Заголовки плиток набраны классом, а не встроенным стилем. */ .acdc-page .tt { font-size: 19px !important; } /* Строка, которой запрещено переноситься, на телефоне и есть та строка, что вылезает за край. */ .acdc-page [style*="white-space: nowrap"], .acdc-page .fill { white-space: normal !important; } /* Колонки встали друг под друга — боковая межа превращается в верхнюю, иначе от неё остаётся висящая чёрточка у левого края. */ .acdc-page [style*="border-left: 1px solid #e6e9ef"] { border-left: 0 !important; border-top: 1px solid #e6e9ef !important; } .acdc-page [style*="border-left: 1px solid rgba(255,255,255"] { border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, .14) !important; } }