/* sitechrome — единая шапка и подвал для главной и всех внутренних страниц. Геометрия снята с bento-главной (её вид утверждён): контейнер 1280/24px, шапка 80px, логотип 56px, подвал 64px по вертикали. Классы с префиксом .sc- сознательно свои: файл подключается и рядом с Tailwind-сборкой главной (home.css), и рядом с рукописным style.css внутренних страниц — пересечься не должно ни с тем, ни с другим. Разметку генерит sitechrome() в scripts/build.py — правится только там. */ /* ---------- переход между страницами без вспышки ---------- Сайт статический: каждая ссылка — полная перезагрузка, и шапка с подвалом перерисовываются заново. View Transitions превращает это в кроссфейд, а view-transition-name оставляет шапку и подвал на месте: меняется только содержимое между ними. Браузеры без поддержки просто игнорируют правило. */ @view-transition { navigation: auto; } .sc-hdr{view-transition-name:site-header} .sc-foot{view-transition-name:site-footer} .sc-top{view-transition-name:site-topbar} @media (prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none} } /* ---------- типографическая шкала: один источник на весь сайт ---------- Файл подключают все страницы — и главная (рядом с home.css), и 481 внутренняя (рядом со style.css), и /price. Поэтому шкала живёт здесь. Было 22 фиксированных кегля, двенадцать из них в диапазоне 13–18px: разница в полшага глазом не читается как система, читается как небрежность. Стало семь ступеней. Новый размер не заводить — брать ближайшую ступень; если ни одна не подходит, значит вопрос к макету, а не к шкале. Веса — три. 500 и 700 убраны: при Montserrat + Manrope они не дают внятной разницы с соседними, только множат варианты. */ :root{ --fs-caption:11px; /* служебные подписи: eyebrow, бейджи, «ДО/ПОСЛЕ» */ --fs-small:14px; /* вторичный текст, пункты списков, сноски */ --fs-body:16px; /* основной текст */ --fs-h3:20px; /* заголовки карточек */ --fs-h2:clamp(24px,3.2vw,30px); /* заголовки секций */ --fs-display:clamp(36px,5vw,56px); /* H1 */ --fs-number:clamp(46px,5.6vw,62px); /* крупные числа в карточках */ --fw-text:400; --fw-mid:600; /* подписи, акценты, кнопки */ --fw-head:800; /* заголовки и числа */ } /* ---------- длинные слова в заголовках не режутся краем экрана ---------- На 390px H1 набран 36px Montserrat 800, и слово в 17 букв («восстановительных», «Профессиональная») шире колонки. Строка не переносится посреди слова по умолчанию — она просто вытекает за край документа; заказчик прислал скриншот с /portfolio/kompleks-vosstanovitelnyix-rabot-dlya-lamborghini-urus 27.08.2026. Два правила, и оба нужны. overflow-wrap:break-word включается ТОЛЬКО когда слово не помещается целиком — там, где вёрстка сходится, вид не меняется ни на пиксель. hyphens:auto добавляет к разрыву дефис, иначе слово обрубается посреди: «восстановитель / ных» читается как опечатка. Дефисы включены лишь на узких экранах: на десктопе места хватает, а переносы в крупных заголовках меняют рисунок макета без нужды. Работает благодаря lang="ru" на — без него браузеру нечем делить слово. Сторож — node scripts/check-mobile-overflow.mjs: он меряет строки через Range, потому что геометрия элементов такое не видит (коробка в границах, вытек текст). */ h1, h2, h3, .content-title, .item-title, .eyebrow{overflow-wrap:break-word} @media (max-width:640px){ h1, h2, h3, .content-title, .item-title{hyphens:auto} } /* ---------- «бровь» над заголовком: красная черта + короткая подпись ---------- Приём с главной, теперь на всех страницах. Жил в tw-input.css и потому работал только там; перенесён сюда целиком — один источник, дублировать нечего. Текст ставит генератор: вложенным страницам — раздел из хлебных крошек, верхнеуровневым — рубрика из EYEBROW в build.py. */ .eyebrow{font-family:'Montserrat',sans-serif;font-size:var(--fs-caption);font-weight:600; letter-spacing:.22em;text-transform:uppercase;color:#D9232A; display:inline-flex;align-items:center;gap:12px;margin:0 0 12px} .eyebrow::before{content:'';flex:none;width:28px;height:2px;background:#EE292A} /* ---------- карточка приподнимается под курсором: один эффект на весь сайт ---------- Раньше он был только у .bento-card на главной, и внутренние страницы ощущались мёртвыми в сравнении. Файл подключают все страницы, поэтому список живёт здесь. Не включены намеренно: кнопки и ссылки-пилюли, поля ввода, строки таблиц, пункты меню, пагинация — у них своя реакция на курсор, подъём читался бы как «это тоже карточка». .bento-card ведёт себя так же, но правило у него своё, в home.css: главная подключает chrome.css после home.css, и дублировать значит рисковать расхождением при правке. */ .strip>div, .block-portfolio .item, .photo-item, .block-news-page>.item, .reviews-item, .box, .svc-tile, .svc-cat, .svc-card, .work-card, .block-contacts>.item, .offer-card, .cell_level_12, .cta-card, .team-photo, .map-embed{ transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .3s} .strip>div:hover, .block-portfolio .item:hover, .photo-item:hover, .block-news-page>.item:hover, .reviews-item:hover, .box:hover, .svc-tile:hover, .svc-cat:hover, .svc-card:hover, .work-card:hover, .block-contacts>.item:hover, .offer-card:hover, .cell_level_12:hover, .cta-card:hover, .team-photo:hover, .map-embed:hover{ transform:translateY(-4px); box-shadow:0 20px 25px -5px rgba(19,19,19,.06),0 10px 10px -5px rgba(19,19,19,.02); border-color:rgba(217,35,42,.22)} /* раскрытая карточка отзыва — читают текст, а не выбирают её: не дёргаем */ .reviews-item.is-open:hover{transform:none} @media (prefers-reduced-motion:reduce){ .strip>div,.block-portfolio .item,.photo-item,.block-news-page>.item,.reviews-item, .box,.svc-tile,.svc-cat,.svc-card,.work-card,.block-contacts>.item,.offer-card, .cell_level_12,.cta-card,.team-photo,.map-embed{transition:none} } .sc-wrap{max-width:1280px;margin:0 auto;padding:0 24px} /* ---------- топбар: адреса слева, факты справа (высота та же — 10px+10px) ---------- */ .sc-top{background:#131313;color:#C5C8CC;font-size:var(--fs-caption);font-family:'Manrope',sans-serif} .sc-top .sc-wrap{padding-top:10px;padding-bottom:10px;display:flex;flex-wrap:wrap; gap:4px 24px;align-items:center;justify-content:space-between} /* ---------- полоса акций в верхнем баре ---------- Направление «А», выбрано заказчиком 30.08.2026. Занимает тот же .sc-top вместо адресов: договорённость с созвона 28.08.2026. Кегли только из шкалы брендбука, и один на все подписи. Первая версия шла 21–22px мимо шкалы и перетягивала первый экран; вторая набрала текст, срок и ссылку тремя разными размерами — в одной строке это читалось разнобоем, а не иерархией. Крупной остаётся одна скидка: ей и положено тянуть взгляд. Акценты: скидка на #EE292A, ссылка #FF5A5B — тот же, что у подписи «Наши адреса в Москве», так палитра не растёт ради одной полосы. Разделитель между акциями общий с адресами (.sc-top-dot). Вся полоса — одна ссылка, поэтому ::after-растяжка тут не нужна. */ /* Росчерк из логотипа фактурой на тёмном. Не перерисован: это те же десять красных путей, что в logo.svg, вынутые в static/logo-mark.svg. Отдельным файлом, а не инлайном, — 7 КБ разметки на каждой из 486 страниц весили бы три с половиной мегабайта, а так один запрос и кэш. Уходит за правый край: обрезанная форма читается как фактура поверхности, целиком вписанная — как забытая картинка. Прозрачность 0.16 — граница, за которой рисунок начинает мешать тексту. pointer-events снимаем: полоса целиком ссылка, и декор не должен перехватывать нажатие. */ .sc-top-promo{position:relative;overflow:hidden} .sc-top-promo::after{content:'';position:absolute;top:50%;right:-40px; width:340px;height:92px;transform:translateY(-50%); background:url(/_m/static/logo-mark.svg) no-repeat center/100% auto; opacity:.16;pointer-events:none} .sc-top-promo .sc-wrap{position:relative;justify-content:center; padding-top:7px;padding-bottom:7px} .sc-promo{display:flex;align-items:center;flex-wrap:wrap;justify-content:center; gap:4px 12px;color:#fff;transition:color .2s} /* Зона акций. На широком экране — обычный ряд рядом со ссылкой; вся работа у неё на телефоне (ниже): там она обрезает длинный текст и катает его внутри себя, пока «смотреть все акции» стоит на месте. */ .sc-promo-line{display:inline-flex;align-items:center;gap:4px 12px;min-width:0} .sc-promo-i{display:inline-flex;align-items:center;gap:8px} .sc-promo-b{flex:none;font-family:'Montserrat',sans-serif;font-weight:var(--fw-head); font-size:var(--fs-small);line-height:1;color:#fff;background:#EE292A; padding:4px 8px;border-radius:5px} .sc-promo-t,.sc-promo-go{font-family:'Montserrat',sans-serif; font-weight:var(--fw-mid);font-size:var(--fs-small);line-height:1.2} .sc-promo-go{color:#FF5A5B;white-space:nowrap} .sc-promo:hover .sc-promo-go{color:#fff} .sc-top-promo .sc-top-dot{color:#4A4E52} /* На телефоне остаётся первая акция и ссылка: три предложения в строку складываются в четыре строки и сжирают первый экран. */ @media (max-width:640px){ /* Знак снимаем: полоса складывается в две строки, подвал вытягивается в колонку — рисунок оказывается прямо под текстом, а не сбоку от него. */ .sc-top-promo::after,.sc-foot::after{display:none} .sc-top-promo .sc-wrap{gap:4px 10px;padding-top:6px;padding-bottom:6px} .sc-promo{gap:4px 10px} .sc-promo-b{font-size:var(--fs-caption);padding:3px 7px} .sc-promo-t,.sc-promo-go{font-size:var(--fs-caption)} .sc-promo-i:not(:first-of-type), .sc-top-promo .sc-top-dot{display:none} /* Полоса на телефоне — РОВНО одна строка, и высота её меняться не должна: она стоит над всей страницей, и лишняя строка сдвигает вниз весь сайт. Поэтому переносов здесь нет нигде, а длинный текст уезжает (is-run). */ .sc-promo{flex-wrap:nowrap;white-space:nowrap;justify-content:flex-start; align-items:center;gap:0 10px;width:100%} /* Ссылка приколочена справа и не участвует ни в беге, ни в смене: она одна на все акции. Пока она ехала вместе с текстом, слово прыгало и моргало. */ .sc-promo-go{flex:0 0 auto;margin-left:auto} .sc-top-promo .sc-top-dot{display:none} /* Зона текста: занимает остаток строки и обрезает всё, что не влезло. min-width:0 обязателен — без него флекс-элемент отказывается сжиматься ниже своего содержимого и распирает полосу за край экрана. */ .sc-promo-line{flex:1 1 auto;min-width:0;overflow:hidden;display:block} /* Скрипт взял полосу на себя (is-rot) — акции идут по кругу. Правило действует только с ним: без JS видна первая акция, а не пустая полоса. */ .sc-promo.is-rot .sc-promo-i{display:none} .sc-promo.is-rot .sc-promo-i.is-on{display:inline-flex;animation:sc-promo-in .45s ease} /* Не поместилось — едет справа налево и возвращается. Едет САМ ТЕКСТ внутри своей зоны, а не полоса целиком. Насколько ехать, знает только браузер: размах (--run) и время подставляет скрипт, он же и меряет. Влезло — класса нет, текст стоит. */ .sc-promo-i.is-run{animation:sc-promo-run var(--run-time,12s) linear infinite alternate} } @keyframes sc-promo-in{from{opacity:0}to{opacity:1}} @keyframes sc-promo-run{from{transform:translateX(0)} to{transform:translateX(calc(-1 * var(--run,0px)))}} /* Кому движение мешает — тому неподвижный текст: длинное обрежется, но ссылка «смотреть все акции» ведёт на страницу со всеми целиком. */ @media (prefers-reduced-motion:reduce){ .sc-promo.is-rot .sc-promo-i.is-on{animation:none} .sc-promo-i.is-run{animation:none} } .sc-top-addr{display:flex;align-items:center;flex-wrap:wrap;gap:2px 7px;min-width:0} .sc-pin{flex-shrink:0;display:block} /* #EE292A на #131313 даёт контраст 4,41 при норме 4,5 для мелкого текста, а кегль тут 11px — заказчик на приёмке честно сказал, что не читает. #FF5A5B даёт 6,07 и уже живёт в проекте: им набран акцент в первом экране главной, тоже на тёмном. Тот же случай, что и с подвалом, где #6B7075 давал 3,71. */ .sc-top-label{font-family:'Montserrat',sans-serif;font-weight:400;color:#FF5A5B;margin-right:1px} .sc-top-addr a{display:inline-flex;align-items:center;gap:6px;color:#fff;transition:color .2s; position:relative} /* строка топ-бара 18px — невидимая подушка дотягивает тап-зону до ~34px */ .sc-top-addr a::after{content:'';position:absolute;inset:-8px -3px} .sc-top-addr a:hover{color:#EE292A} .sc-top-m{display:inline-flex;align-items:center;gap:5px;font-weight:400} .sc-top-m:before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--metro,#EE292A)} .sc-top-street{color:#C5C8CC;transition:color .2s} .sc-top-addr a:hover .sc-top-street{color:#EE292A} .sc-top-dot{font-style:normal;color:#5F6368} /* Цвета веток метро — единственное место на весь сайт: chrome.css подключён и с home.css, и со style.css. Ими красятся кружки в шапке (.sc-top-m), в карточках /contacts (.contact-metro) и в адресах на главной (.home-metro). */ .metro-l6{--metro:#ED9121} /* Калужско-Рижская — оранжевая */ .metro-l9{--metro:#ACADAF} /* Серпуховско-Тимирязевская — серая */ .metro-l10{--metro:#99CC00} /* Люблинско-Дмитровская — салатовая */ .sc-top-facts{display:flex;align-items:center;flex-wrap:wrap;flex-shrink:0} .sc-top-facts>span{padding:0 18px;line-height:1.3;border-left:1px solid rgba(255,255,255,.16)} .sc-top-facts>span:last-child{padding-right:0} /* ---------- шапка ---------- */ .sc-hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85); backdrop-filter:blur(12px);border-bottom:1px solid #E7E8EA} .sc-hdr .sc-wrap{position:relative;height:80px;display:flex;align-items:center; justify-content:space-between;gap:24px} .sc-logo{display:flex;align-items:center;flex-shrink:0} .sc-logo img{height:56px;width:auto;display:block} .sc-nav{display:flex;align-items:center;gap:20px;font-family:'Montserrat',sans-serif; font-size:var(--fs-body);font-weight:600;color:#3C4043} /* line-height одинаковый у всех пунктов: иначе строчные боксы разной высоты и текст в них садится на чуть разную линию */ .sc-nav>a,.sc-cat>a{color:#3C4043;line-height:1.2;transition:color .2s} .sc-nav>a:hover,.sc-cat>a:hover,.sc-nav a.sc-active{color:#D9232A} .sc-cat{position:static;height:80px;display:flex;align-items:center} /* мегаменю центрируем по шапке, не по пункту */ /* «Услуги» со стрелкой — инлайн-флекс, а не строка с inline-block: у стрелки был vertical-align, из-за него строчный бокс тянулся вверх и пункт стоял выше соседей. Теперь стрелка выравнивается по центру строки. */ .sc-cat>a{display:inline-flex;align-items:center;gap:6px;line-height:1.2} .sc-cat>a:after{content:"";flex:none;width:0;height:0; border:4px solid transparent;border-top-color:currentColor;margin-top:2px} /* мегаменю услуг */ .sc-dd{position:absolute;top:100%;left:50%;transform:translateX(-50%);display:none; grid-template-columns:repeat(4,minmax(180px,1fr));gap:20px;width:min(1020px,92vw); background:#fff;border:1px solid #E7E8EA;border-radius:16px; box-shadow:0 24px 50px -20px rgba(19,19,19,.3);padding:22px;z-index:60} .sc-cat:hover .sc-dd,.sc-cat:focus-within .sc-dd{display:grid} .sc-dd-col{display:flex;flex-direction:column;gap:7px} .sc-dd-cat{font-family:'Montserrat',sans-serif;font-weight:600;font-size:var(--fs-body); color:#131313;padding-bottom:6px;border-bottom:2px solid #EE292A;margin-bottom:4px} .sc-dd-col a:not(.sc-dd-cat){font-family:'Montserrat',sans-serif;font-size:var(--fs-small);font-weight:500; color:#3C4043;line-height:1.4} .sc-dd-col a:not(.sc-dd-cat):hover{color:#D9232A} .sc-dd-all{margin-top:auto;padding-top:8px;font-family:'Montserrat',sans-serif;font-weight:600; font-size:var(--fs-caption);letter-spacing:.04em;text-transform:uppercase;color:#D9232A} /* правый блок: телефон, кнопка, бургер */ .sc-right{display:flex;align-items:center;gap:20px;flex-shrink:0} .sc-phone{display:flex;flex-direction:column;text-align:right;line-height:1.15; font-family:'Montserrat',sans-serif;white-space:nowrap} .sc-phone b{font-weight:600;font-size:var(--fs-body);color:#131313} .sc-phone span{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:500;color:#5F6368; margin-top:4px} .sc-btn{display:inline-flex;align-items:center;justify-content:center;background:#D9232A;color:#fff; font-family:'Montserrat',sans-serif;font-weight:600;font-size:var(--fs-body); padding:14px 28px;border-radius:100px;transition:background .2s} .sc-btn:hover{background:#C81E24;color:#fff} /* без position:relative — иначе панель .sc-mob считает absolute от самой кнопки (она у правого края) и уезжает вбок. Нужен контейнер шапки. */ /* Трубка на телефоне: круг 44×44 в цвет действия, слева от бургера. Появляется ровно там, где прячется текстовый .sc-phone, — иначе номер в шапке двоился бы. Заливка, а не контур как у бургера: звонок — действие, а не навигация. Заказчик на приёмке 24.08.2026: «поставим 499 110 09 77, чтобы нажималось сразу позвонить», номер тот же, что в контактах. */ .sc-tel{display:none;align-items:center;justify-content:center;width:44px;height:44px; border-radius:100px;background:#D9232A;color:#fff;flex:none;transition:background .2s} .sc-tel:hover,.sc-tel:active{background:#C81E24;color:#fff} .sc-tel svg{display:block} .sc-burger{display:none} .sc-burger>summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:100px; border:1px solid #D9232A;background:#fff;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:4px;transition:background .2s} .sc-burger[open]>summary{background:#D9232A} .sc-burger[open]>summary span{background:#fff} .sc-burger>summary::-webkit-details-marker{display:none} .sc-burger>summary span{width:18px;height:2px;background:#D9232A;border-radius:2px;transition:background .2s} /* top:100% — панель всегда прибита к низу шапки, чем бы та ни была сдвинута. Ширину берём во весь экран и центрируем: .sc-wrap центрирован в окне, поэтому translateX(-50%) при 100vw даёт ровно от края до края. Раньше было fixed с вычислением через JS — в Safari адресная строка при прокрутке двигает шапку, и панель отрывалась. */ .sc-mob{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:100vw;max-height:76vh; overflow:auto;background:#fff;border-bottom:1px solid #E7E8EA; border-radius:0 0 16px 16px; box-shadow:0 20px 40px -12px rgba(19,19,19,.25);padding:8px 12px 12px; display:flex;flex-direction:column;z-index:60} .sc-mob>a{padding:13px 16px;border-radius:12px;font-family:'Montserrat',sans-serif;font-weight:600; font-size:var(--fs-body);color:#131313} .sc-mob>a:hover{background:#F4F5F6} .sc-mob details>summary{cursor:pointer;list-style:none;padding:13px 16px;border-radius:12px; font-family:'Montserrat',sans-serif;font-weight:600;font-size:var(--fs-body);color:#131313; display:flex;align-items:center;justify-content:space-between} .sc-mob details>summary::-webkit-details-marker{display:none} .sc-mob details>summary:after{content:"+";flex:none;width:24px;height:24px;display:flex; align-items:center;justify-content:center;border-radius:100px;background:#FDECEC;color:#D9232A; font-family:'Manrope',sans-serif;line-height:1} .sc-mob details[open]>summary:after{content:"−"} .sc-mob details[open]>summary{color:#D9232A} .sc-mob details a{display:block;padding:10px 16px 10px 30px;font-size:var(--fs-small);color:#3C4043; border-radius:10px} .sc-mob details a:hover{background:#F4F5F6;color:#D9232A} .sc-mob-all{color:#D9232A;font-weight:600} /* Подборка ходовых услуг внутри раскрывашки «Услуги» на телефоне. Разделы отвечают на «что вы вообще делаете», подборка — на «сделайте мне вот это». Состав задаёт галочка «популярная» в коллекции catalog. */ .sc-mob-pop-h{display:block;margin:8px 16px 2px;padding-top:10px;border-top:1px solid #E7E8EA; font-family:'Montserrat',sans-serif;font-size:var(--fs-caption);font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:#5F6368} .sc-mob details a.sc-mob-pop{color:#131313;font-weight:600} .sc-mob details a.sc-mob-pop:hover{color:#D9232A} /* телефон: белая плашка с красной рамкой — чёрная в светлом меню выглядела чужой, да и по брендбуку чёрный тут работает как цвет текста, а не фона */ .sc-mob-tel{margin-top:8px;padding:13px 16px;border-radius:12px;background:#fff;color:#131313; border:1px solid #D9232A;text-align:center;font-family:'Montserrat',sans-serif;font-weight:600; font-size:var(--fs-body)} .sc-mob-tel:hover{background:#FDECEC;color:#131313} .sc-mob-btn{margin-top:6px;padding:14px 16px;border-radius:12px;background:#D9232A;color:#fff; text-align:center;font-family:'Montserrat',sans-serif;font-weight:600;font-size:var(--fs-small); letter-spacing:.02em} .sc-mob-btn:hover{color:#fff} /* тем же весом, что .sc-mob>a — иначе общий цвет пунктов перебивает белый */ .sc-mob>a.sc-mob-btn{color:#fff} .sc-mob>a.sc-mob-tel{color:#131313} /* ---------- подвал ---------- */ .sc-foot{position:relative;overflow:hidden;background:#131313;color:#9AA0A6; padding:64px 0;font-family:'Manrope',sans-serif} /* Тот же росчерк, что в полосе акций: крупнее и тише — подвал большой, и на его площади рисунок той же плотности превратился бы в пятно. */ .sc-foot::after{content:'';position:absolute;top:50%;right:-90px; width:620px;height:167px;transform:translateY(-50%); background:url(/_m/static/logo-mark.svg) no-repeat center/100% auto; opacity:.10;pointer-events:none} .sc-foot>*{position:relative} .sc-foot a{color:#9AA0A6;transition:color .2s} .sc-foot a:hover{color:#fff} .sc-f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.1fr;gap:40px;margin-bottom:48px} .sc-f-logo{height:56px;width:auto;display:block;margin-bottom:16px} /* Описание набрано сплошным абзацем со строкой 22px, и без добора ссылка разработчика вставала между линиями сетки. 50px ставят её на линию кнопок соцсетей справа: обе «служебные» сущности подвала оказываются в одном ряду. */ .sc-f-note{font-size:var(--fs-small);max-width:34em;margin-bottom:50px;line-height:22px} .sc-f-dev{display:block;font-size:var(--fs-small);line-height:22px;color:#8A8F94} .sc-f-dev:hover{color:#fff} .sc-f-title{font-family:'Montserrat',sans-serif;color:#fff;font-weight:600;font-size:var(--fs-caption); letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px} /* два столбца: в подвале разделов больше, чем в шапке (там 7, тут 10 — плюс «Вопросы и ответы», «Акции», «Партнёры», которых в верхнем меню нет). В одну колонку они вытягивали блок вдвое выше соседних и перекашивали подвал. */ /* ---------- одна линейка на четыре колонки ---------- Колонки подвала устроены по-разному: в разделах одиночные ссылки, в адресах пары «метро + улица», в контактах крупный телефон. Пока каждая жила своим межстрочным расстоянием, строки соседних колонок не совпадали ни в одной точке: шаг был 34 в разделах, 55 в адресах и рваный 39/32/43 в контактах, а первая строка контактов сидела на 3px ниже соседних. Теперь шаг один — 30px: строка 22px плюс 8px промежутка. Пара «метро + улица» занимает два таких шага (60), поэтому её вторая строка садится ровно на ту же линию, что «Цены» в разделах и второй телефон в контактах. Телефон набран 20-м кеглем, но живёт в той же строке 22px — иначе он проваливался вниз и тянул за собой всю колонку. Правило: любое новое значение здесь либо 22px (строка), либо кратно 30px. Проверяется замером строк через Range, а не на глаз: у элементов свой half-leading, и совпадение коробок ещё не значит совпадения текста. */ .sc-f-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px;font-size:var(--fs-small);line-height:22px;align-content:start} .sc-f-addr{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-small);line-height:22px} /* top:-1px и top:2px ниже — оптическая компенсация, а не отступ. Строки у всех колонок одной высоты (22px), но кегли разные: 11px капс садится на 1,4px ниже 14px текста, а 20px телефон — на 1,9px выше. Сдвигаем сам текст через position:relative: поток не двигается, следующие строки остаются в сетке. */ .sc-f-addr b{display:block;position:relative;top:-1px; font-family:'Montserrat',sans-serif;font-size:var(--fs-caption);font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:#8A8F94;line-height:22px;margin-bottom:8px} .sc-f-addr a{color:#C5C8CC} .sc-f-hours{font-size:var(--fs-small);line-height:22px;color:#8A8F94} .sc-f-tel{display:block;position:relative;top:2px; font-family:'Montserrat',sans-serif;font-weight:800;font-size:var(--fs-h3); line-height:22px;color:#fff;margin-bottom:8px} .sc-f-tel:hover{color:#EE292A} .sc-f-contacts{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-small);line-height:22px} /* Сетка, а не flex-wrap. Кнопки подписаны словами разной длины, и при переносе строки получались рваными: «ВКонтакте» с «Telegram» в первой, «RuTube» с «YouTube» во второй — четыре разных правых края. В колонку подвала (237–342px) все четыре одной строкой не влезают ни на какой ширине: подписям нужно 385px. Поэтому две равные колонки — края сходятся столбиком и блок встаёт заподлицо с телефоном и почтой над ним. Нечётное число ссылок оставит пустую клетку справа — это не поломка. */ /* Кнопки — не строка текста, а отдельная группа: между ними и почтой пропущен целый ряд сетки. 32 = 2 (добор до линии) + 30 (пустой ряд). */ .sc-f-soc{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:32px} .sc-f-soc a{border:1px solid #2A2A2E;border-radius:100px;padding:5px 14px; font-size:var(--fs-small);line-height:22px;text-align:center} .sc-f-soc a:hover{border-color:#fff} .sc-f-bottom{padding-top:32px;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-wrap:wrap; justify-content:space-between;align-items:center;gap:16px;font-size:var(--fs-caption);letter-spacing:.14em; text-transform:uppercase} .sc-f-bottom nav{display:flex;flex-wrap:wrap;gap:32px} /* Кнопка «Cookie» (рисует cookie.js): выглядит как соседние ссылки, но это действие — открыть баннер согласия, — потому button */ .ap-cookie-revoke{background:none;border:0;padding:0;font:inherit; color:#9AA0A6;cursor:pointer;transition:color .2s} .ap-cookie-revoke:hover{color:#fff} /* ---------- адаптив ---------- */ @media (max-width:1240px){ .sc-top .sc-wrap{justify-content:center} .sc-top-facts>span{padding:0 14px} /* Меню набрано 16px (заказчик просил крупнее) и в полосу 1121–1240px уже не встаёт: логотип 207 + меню 595 + телефон с кнопкой 306 + отступы перебирают ширину на 16–75px. На прежних 14px та же полоса текла на 1–20px — брейкпоинт 1120px был занижен и до правки. Ниже 1240 — бургер. */ .sc-nav{display:none} .sc-burger{display:block} } @media (max-width:1120px){ .sc-f-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px} } @media (max-width:860px){ /* на узких экранах три адреса в строку не встают — фактам места уже нет */ .sc-top-facts>span:not(:first-child){display:none} .sc-top-facts>span{border-left:0;padding:0} .sc-top .sc-wrap{gap:2px 14px} } @media (max-width:640px){ .sc-top{font-size:var(--fs-caption)} .sc-top-label{display:none} /* пин уже читается как «адреса» */ .sc-top-street{display:none} /* трёх станций с улицами в строку не будет */ .sc-hdr .sc-wrap{height:68px} .sc-logo img{height:44px} .sc-phone,.sc-hdr .sc-btn{display:none} .sc-tel{display:inline-flex} .sc-right{gap:12px} .sc-foot{padding:48px 0} .sc-f-bottom{flex-direction:column;align-items:flex-start} } /* ---------- лайтбокс: общий для главной и всех внутренних ---------- Разметку модалки строит static/lightbox.js сам, в HTML её нет. Он же вешает .sc-lb-t на всё кликабельное — фото в полосах работ, галереи портфолио, карточки «Наши работы» на главной. */ .sc-lb-t{cursor:zoom-in;position:relative;display:block} .sc-lb-t::after{content:'';position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:100px; background:rgba(19,19,19,.55) center/19px 19px no-repeat;opacity:0;transition:opacity .25s;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E")} .sc-lb-t:hover::after,.sc-lb-t:focus-visible::after{opacity:1} .sc-lb{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px; background:rgba(10,10,10,.93);animation:sc-lb-in .2s ease both} .sc-lb[hidden]{display:none} @keyframes sc-lb-in{from{opacity:0}to{opacity:1}} .sc-lb-stage{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(1100px,100%);max-height:100%;margin:0} .sc-lb-stage img{display:block;max-width:100%;max-height:calc(100vh - 200px);object-fit:contain; border-radius:16px;background:#131313} .sc-lb-cap{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;color:#fff} .sc-lb-car{font-family:'Montserrat',sans-serif;font-weight:800;font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.3} .sc-lb-job{font-family:'Manrope',sans-serif;font-size:var(--fs-small);color:rgba(255,255,255,.72)} .sc-lb-job:empty{display:none} .sc-lb-num{font-family:'Montserrat',sans-serif;font-size:var(--fs-caption);font-weight:600;letter-spacing:.18em;color:#fff;margin-top:4px} .sc-lb-num:empty{display:none} .sc-lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;border:none;cursor:pointer; color:#fff;background:rgba(255,255,255,.12);border-radius:100px;transition:background .2s,transform .2s} .sc-lb-btn:hover{background:#D9232A} .sc-lb-btn svg{width:26px;height:26px;display:block} .sc-lb-close{top:18px;right:18px;width:48px;height:48px} .sc-lb-nav{top:50%;transform:translateY(-50%);width:54px;height:54px} .sc-lb-nav:hover{transform:translateY(-50%) scale(1.06)} .sc-lb-nav[hidden]{display:none} .sc-lb-prev{left:18px} .sc-lb-next{right:18px} body.sc-lb-lock{overflow:hidden} @media (max-width:767px){ .sc-lb{padding:12px} .sc-lb-stage img{max-height:calc(100vh - 210px)} .sc-lb-close{top:10px;right:10px;width:42px;height:42px} .sc-lb-nav{width:44px;height:44px} .sc-lb-prev{left:8px} .sc-lb-next{right:8px} .sc-lb-btn svg{width:22px;height:22px} .sc-lb-car{font-size:var(--fs-body)} .sc-lb-t::after{display:none} /* на тач-экранах подсказка-лупа не нужна */ } @media (prefers-reduced-motion:reduce){ .sc-lb{animation:none} } /* Юрлицо в подвале: сигнал доверия для человека и для поиска, нужен на всех страницах. Счета и БИК сюда не выносим — они остаются на /contacts. */ .sc-f-legal{display:block;font-style:normal;margin-top:4px;color:#8A8F94} /* Строка согласия под формой заявки. Жила двумя копиями — в style.css для 485 страниц и в tw-input.css для главной — и обе были набраны 12px, кеглем мимо шкалы. Копии молча разъезжаются: пока они были порознь, правка одной оставляла вторую со старым размером. Здесь одна, и её видят обе дизайн-системы. 14px, а не 12: это уведомление о согласии на обработку данных, по нему человек соглашается, — читаемость тут не косметика. */ .cta-consent{font-size:var(--fs-small);line-height:1.45;color:#5F6368;margin:12px 0 0;text-align:center} .cta-consent a{color:#5F6368;text-decoration:underline} .cta-consent a:hover{color:#D9232A} /* ── Согласие на cookie (420-ФЗ) ───────────────────────────────────────────── Разметку рисует static/cookie.js, здесь только вид. Ключевое требование закона отражено в CSS: обе кнопки одного размера и одной заметности — .ap-cookie-btn задаёт геометрию, а .ap-cookie-ok/.ap-cookie-no отличаются только заливкой. Сделаешь «Отказаться» мельче или бледнее — согласие перестанет считаться полученным. */ .ap-cookie{ position:fixed;left:16px;right:16px;bottom:16px;z-index:9000; display:flex;gap:18px;align-items:center;flex-wrap:wrap; max-width:960px;margin:0 auto;padding:18px 20px; background:#fff;color:#131313;border:1px solid #E7E8EA;border-radius:14px; box-shadow:0 2px 6px rgba(19,19,19,.06),0 18px 44px -20px rgba(19,19,19,.42); animation:ap-cookie-in .22s ease-out; } @keyframes ap-cookie-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .ap-cookie-t{flex:1 1 320px;min-width:0} .ap-cookie-t b{ display:block;font-family:'Montserrat',sans-serif;font-weight:700; font-size:var(--fs-body);margin-bottom:4px; } .ap-cookie-t p{margin:0;font-size:var(--fs-small);line-height:1.55;color:#3C4043} .ap-cookie-t a{color:#D9232A;text-decoration:underline} .ap-cookie-acts{display:flex;gap:10px;flex:0 0 auto} .ap-cookie-btn{ font-family:'Montserrat',sans-serif;font-weight:600;font-size:var(--fs-small); min-width:150px;min-height:46px; /* палец промахивается по всему, что ниже 44 */ padding:12px 22px;border-radius:10px;cursor:pointer; border:1px solid #131313;line-height:1.2; } .ap-cookie-ok{background:#D9232A;border-color:#D9232A;color:#fff} .ap-cookie-no{background:#fff;color:#131313} .ap-cookie-btn:hover{opacity:.88} .ap-cookie-btn:focus-visible{outline:2px solid #131313;outline-offset:2px} @media (max-width:640px){ .ap-cookie{left:8px;right:8px;bottom:8px;padding:16px;gap:14px} .ap-cookie-acts{width:100%} .ap-cookie-btn{flex:1 1 0;min-width:0;padding:12px 8px} } @media (prefers-reduced-motion:reduce){ .ap-cookie{animation:none} } /* Пока висит баннер, круглую кнопку чата Битрикса прячем. Она фиксирована в правом нижнем углу и на телефоне садится ровно на «Принять» — человек метит в согласие, а попадает в чат. Плюс сам виджет ставит свои cookie, а мы в этот момент только спрашиваем разрешения. Класс снимается сразу после выбора. */ .ap-cookie-open .b24-widget-button-wrapper, .ap-cookie-open .b24-widget-button-shadow, .ap-cookie-open .b24-widget-button-position-bottom-right{ display:none !important; } /* ---------- блок «Наша команда» ---------- Один кусок разметки на главную, /about и /contacts. Живёт здесь, а не в home.css или style.css, потому что chrome.css подключают обе дизайн-системы: так у блока один источник и он не попадает в ловушку Tailwind (tailwind.config.js сканирует только index.html — утилитарных классов внутри нет ни одного). Каждое правило пишется как `.team X` — специфичность 0,2,0 перебивает и `.content p` / `.content img` внутренних страниц, и base-слой Tailwind на главной. Кнопка и ссылка тоже свои: .btn-primary есть только в home.css, .btn — только в style.css, а блок должен выглядеть одинаково там и там. Подъём карточки под курсором взят из общего списка выше (.team-photo). */ .team{margin:0 0 clamp(48px,7vw,80px)} .content .team{margin-top:34px} /* в текстовом потоке — тот же отступ, что у .content h2 */ .content .team:last-child{margin-bottom:0} /* низ добирает паддинг .content */ /* Колонки равной высоты: фото тянется до низа текста, а не висит по центру с пустотой сверху и снизу. Раньше стояло align-items:center, и на узком экране разрыв доходил до 170px — картинка выглядела приклеенной к середине. Пропорция 4/3 остаётся нижней границей: когда текста мало, высоту задаёт фото, и обрезать нечего. Когда текста больше — растягивается и подрезается по object-fit:cover. */ .team-b{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(24px,3vw,40px);align-items:stretch} .team-b .team-photo{position:relative;background:#fff;border:1px solid #E7E8EA; border-radius:24px;overflow:hidden;margin:0;display:flex; box-shadow:0 1px 2px rgba(19,19,19,.03),0 4px 6px -1px rgba(19,19,19,.02)} .team-b .team-pic{aspect-ratio:4/3;flex:1 1 auto;min-height:0} .team .team-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0} .team .team-title{font-family:'Montserrat',sans-serif;font-weight:800;font-size:var(--fs-h2); line-height:1.12;letter-spacing:-.02em;margin:0;color:#131313;max-width:22ch} .team .team-lead{font-size:var(--fs-body);line-height:1.6;color:#3C4043;margin:12px 0 0;max-width:58ch} /* На главной абзацы блока набраны руками и носят .team-lead. На /vacancies текст приходит из студии готовой разметкой — класса на каждом

там взять неоткуда, поэтому правило вешается на обёртку. Вид тот же: разойтись этим двум блокам нельзя, он один и тот же. */ .team .team-rte p{font-size:var(--fs-body);line-height:1.6;color:#3C4043;margin:12px 0 0;max-width:58ch} .team .team-rte>*:last-child{margin-bottom:0} /* факты 2×2 через линию. Кегль чисел — ступень --fs-h3 (20px), новых размеров мимо общей шкалы не заводим. */ .team .team-marks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px;margin:24px 0 0;padding:22px 0 0;border-top:1px solid #E7E8EA} .team .team-marks li{display:flex;flex-direction:column;gap:3px;padding:0} .team .team-fn{font-family:'Montserrat',sans-serif;font-weight:800;font-size:var(--fs-h3); line-height:1;letter-spacing:-.02em;color:#D9232A} .team .team-fu{font-size:var(--fs-small);font-weight:600;color:#5F6368;margin-left:4px} .team .team-fl{font-family:'Montserrat',sans-serif;font-weight:600;font-size:var(--fs-caption); letter-spacing:.18em;text-transform:uppercase;color:#5F6368} .team .team-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:24px 0 0} .team .team-btn{display:inline-flex;align-items:center;gap:8px;background:#D9232A;color:#fff; font-family:'Montserrat',sans-serif;font-weight:600;font-size:var(--fs-body); padding:14px 28px;border-radius:100px;transition:background .2s} .team .team-btn:hover{background:#C81E24;color:#fff} /* «Написать директору» — прямая почта на help@. Заказчик просил кнопку именно тут, а не в подвале: она про доверие, а не про жалобу, и работает рядом с людьми, которые делают машину (приёмка 24.08.2026). Вторична к «Записаться» — контур вместо заливки, высота та же. */ .team .team-dir{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#131313; font-family:'Montserrat',sans-serif;font-weight:600;font-size:var(--fs-body); padding:13px 27px;border:1px solid #E7E8EA;border-radius:100px; transition:border-color .2s,color .2s} /* ⏸ Скрыта 27.08.2026: текст кнопки не согласован с заказчиком. Стили выше оставлены готовыми и выровнены под .sc-btn — вернуть значит убрать строку ниже. Она идёт ПОСЛЕ основного правила: при равной специфичности побеждает последнее, а не то, что выглядит важнее. */ .team .team-dir{display:none} .team .team-dir:hover{border-color:#D9232A;color:#D9232A} .team .team-link{font-family:'Montserrat',sans-serif;font-weight:600;font-size:var(--fs-caption); letter-spacing:.14em;text-transform:uppercase;color:#D9232A;position:relative} .team .team-link::after{content:'';position:absolute;inset:-12px -8px} /* тап-зона до 44px */ .team .team-link:hover{text-decoration:underline} /* На телефоне ряд действий ломался некрасиво: кнопка и «Наши работы» вставали в строку, а «Работа у нас» падала под них и висела одна у левого края — читалось как случайно забытая ссылка. Кнопку растягиваем на всю ширину, обе ссылки ставим под ней по центру: строка получается симметричной, и порядок не зависит от того, сколько ссылок в блоке — их состав меняется по страницам (на главной когда-то была ещё «Написать директору»). */ @media (max-width:560px){ .team .team-cta{justify-content:center;gap:16px 20px} .team .team-btn{width:100%;justify-content:center} } /* 900px — тот же брейкпоинт, на котором в две колонки перестают влезать остальные развороты сайта */ @media (max-width:900px){ .team-b{grid-template-columns:minmax(0,1fr)} .team .team-title{max-width:none} } @media (max-width:400px){ .team .team-marks{grid-template-columns:minmax(0,1fr);gap:14px} } @media (prefers-reduced-motion:reduce){ .team .team-btn,.team .team-dir{transition:none} } /* ---------- карточка отзыва ---------- Живёт здесь, а не в style.css, потому что нужна ОБЕИМ дизайн-системам: на /reviews и во врезках страниц услуг (рядом со style.css) и в витрине на главной (рядом с home.css). До 31.08.2026 витрина была свёрстана своими Tailwind-классами и выглядела иначе — без звёзд, источника и фотографий; заказчик попросил одинаковые карточки, и разметку с оформлением свели к одному источнику. Сетки, шапка /reviews и ссылки на площадки остались в style.css: они нужны только на самой странице отзывов. */ .reviews-item{min-width:0;display:flex;flex-direction:column;height:312px; background:#fff;border:1px solid #E7E8EA;border-radius:16px;padding:20px 22px; box-shadow:0 1px 2px rgba(19,19,19,.05),0 14px 30px -20px rgba(19,19,19,.18)} .reviews-item.is-open{height:auto} .reviews-item-title{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px} .reviews-name{font-family:'Montserrat';font-weight:600;font-size:var(--fs-body); min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .reviews-date{flex:none;font-size:var(--fs-small);color:#5F6368} /* ---------- оценка и источник отзыва ---------- Звёзды янтарные, а не фирменные красные. Это не своеволие: рейтинг — международная условность, и цвет у неё свой. Красная звезда прочиталась бы как предупреждение, серая — как «оценки нет». Янтарь #F5A623 достаточно тёплый, чтобы читаться рейтингом, и достаточно далёк от #D9232A, чтобы не спорить с кнопками. Погасшие звёзды оставляем на месте цветом линий: пять позиций всегда видны, и «четыре из пяти» читается сразу, без счёта. */ .reviews-rate{display:flex;align-items:center;gap:10px;margin:0 0 10px} .reviews-stars{display:inline-flex;gap:1px;font-size:15px;line-height:1;color:#E7E8EA} .reviews-stars i{font-style:normal} .reviews-stars i.on{color:#F5A623} .reviews-src{font-size:var(--fs-caption);color:#5F6368;letter-spacing:.02em} .reviews-text{font-size:var(--fs-small);line-height:1.6;color:#3C4043;overflow-wrap:anywhere;word-break:break-word; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;line-clamp:8;overflow:hidden} .reviews-item.is-open .reviews-text{display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible} .reviews-more{margin-top:auto;align-self:flex-start;padding:10px 0 0;border:0;background:none; font-family:inherit;font-size:var(--fs-small);font-weight:600;color:#D9232A;cursor:pointer} .reviews-more:hover{color:#EE292A} /* min-width:0 у снимков — не украшение: у flex-элемента min-width:auto, и для картинки это её же 56px. Полоса из четырёх снимков и счётчика требует 242px, и в карточке уже 236px счётчик «+3» вылезал за карточку и за край экрана. С min-width:0 снимки сжимаются, счётчик (flex:none) остаётся целым. */ .reviews-photos{display:flex;gap:6px;margin-top:auto;padding-top:14px} .reviews-photos img{width:56px;min-width:0;height:56px;border-radius:8px;object-fit:cover;display:block; background:#F4F5F6} .reviews-photos-more{flex:none;width:56px;height:56px;border-radius:8px;background:#F4F5F6; border:1px solid #E7E8EA;display:flex;align-items:center;justify-content:center; font-family:'Montserrat',sans-serif;font-size:var(--fs-small);font-weight:600;color:#5F6368} /* Полоса фотографий занимает 70px высоты — на столько же подрезаем текст, иначе карточка с фото выше соседних и сетка идёт ступенькой. Восемь строк против четырёх: ровно та разница, что уходит под снимки. */ .reviews-item.has-photos .reviews-text{-webkit-line-clamp:4;line-clamp:4} .reviews-item.has-photos.is-open .reviews-text{-webkit-line-clamp:none;line-clamp:none} .reviews-text a{overflow-wrap:anywhere;word-break:break-word}