/* РАССТАНОВКА НОВОГО КАЛЬКУЛЯТОРА. 31.08.2026. Раньше вид собирали два скрипта прямо в браузере, и человек успевал увидеть прежний. Теперь разметка приходит готовой, а этот файл расставляет её по местам — без скриптов, значит без мигания. Порядок блоков в разметке (внутри .make__row): .leftcol примеры работ + полоса доводов .rightcol шаги, цена, форма заказа .make__image-mobil примеры для телефона .make__setting-mobil шаги и цена для телефона ⚠ ПОЧЕМУ ФОРМА ЛЕЖИТ В .rightcol, А НЕ В .content__settings. На телефоне .content__settings скрыта стилями сайта, и форма внутри неё оказывалась скрытой тоже — заказать было нечем. Проверено на стенде при 375 px. Именно из-за этого в прежнем коде и появился перенос узла скриптом. Теперь форма — сосед, а не потомок, и её видно на любой ширине. */ /* ================= КОМПЬЮТЕР ================= */ /* ⚠ РАСКЛАДКУ КОЛОНОК НЕ ЗАДАЁМ. Её уже задаёт calc-view.css: .make__row{grid-template-columns:auto 1fr!important;gap:24px!important} .make__image{width:440px!important} .leftcol{width:440px;max-width:100%} Сначала я написал сюда свою раскладку на flex с зазором 30px и левой колонкой в 42 %. Она перебила родную, и получилось не как на боевом: зазор шире, левая колонка 453 px вместо 440, а по высоте 1987 px вместо 757 — примеры работ уезжали вниз и отрывались от калькулятора. Владелец: «расстояние от примеров работ до блока калькулятора слишком большое». Замер боевого 31.08.2026 при 1280 px: сетка, колонки 440px и 614px, зазор 24px левая 440x757, правая 614x1094, форма 614x385 Родные правила дают ровно это. Своего здесь не надо ничего. */ @media (min-width: 1025px) { /* мобильные блоки на компьютере не нужны */ #make .make__image-mobil, #make .make__setting-mobil { display: none; } } /* ================= ТЕЛЕФОН И ПЛАНШЕТ ================= */ @media (max-width: 1024px) { #make .make__row { display: flex; flex-direction: column; } /* левая колонка — целиком компьютерная */ #make .leftcol { display: none; } /* ⚠ ЦЕЛИМСЯ В .make__setting, А НЕ В .rightcol. Стили сайта скрывают именно .make__setting на телефоне, а наша колонка лежит внутри неё — вместе с формой. Поймано на стенде 31.08.2026: форма была display:block, но нулевого размера, потому что схлопнулся родитель. */ #make .make__row > .make__setting { display: block; order: 2; width: 100%; padding: 0; margin: 0; } /* шаги и цена на телефоне свои — в .make__setting-mobil */ #make .make__setting .content__settings { display: none; } /* Порядок на телефоне: примеры / фото клиента -> шаги и цена -> форма. 18.09.2026: окно примерки сразу под заголовком конструктора. Кнопка возврата к фото следует за тем же окном, как и в DOM. Форма сразу под ценой — в этом весь смысл. Замер воронки: из 18 человек, доскроллевших до цены, окно заказа открывали двое. Шестнадцать видели сумму и уходили, ни разу не увидев, где оставить телефон. */ #make .make__setting-mobil { order: 1; } #make .make__image-mobil, #make .make__row > .tryon-return-row { order: 0; } /* Кнопка «Получить мой макет» в мобильных шагах больше никуда не ведёт: форма стоит следом. Прячем, чтобы человек не искал, куда она делась. */ #make .make__setting-mobil > .cs_button_all { display: none; } } /* ================= ОБЩЕЕ ================= Форма перестала быть всплывающим окном, поэтому снимаем с неё остатки оформления окна: она стоит в потоке страницы. */ #make #makePortret.modalFormWrapper { position: static; display: block; max-width: none; box-shadow: none; } /* Блок «спасибо» показывается только после отправки — до этого момента его прячет calc.js, снимая класс active с формы. Пока форма активна, «спасибо» не должно занимать место. */ #make #makePortret.calcFormBox.active > .modal__send.calcThanks { display: none; } #make #makePortret.calcFormBox:not(.active) > *:not(.modal__send) { display: none; } /* состав заказа собирается для письма, показывать его незачем */ #make #makePortret > .order-list { display: none; } /* ================= ГАРМОШКА БЕЗ СКРИПТА ================= В calc-view.css шаги свёрнуты правилом .acc__body{display:none}, а раскрывает их только класс .open. Раскрытие вешает calc-ui.js. Если этот файл не загрузится — а на медленном канале это бывает — человек увидит один раскрытый шаг и не сможет открыть остальные: ни размер выбрать, ни раму, ни покрытие. Поэтому сворачивание включается ТОЛЬКО когда скрипт отработал и поставил класс acc-ready. Пока его нет, все шаги раскрыты: вид длиннее, зато калькулятор рабочий. Проверено на стенде 31.08.2026 в режиме без calc-ui.js. */ #make .acc:not(.acc-ready) .acc__body { display: block !important; } #make .acc:not(.acc-ready) .acc__chev { display: none; } #make .acc:not(.acc-ready) .acc__val { display: none; } /* ================= ДВА ТЕКСТА В ОДНОЙ РАЗМЕТКЕ ================= Часть надписей на телефоне и на компьютере разная — так решил владелец 15.08.2026: поле фото «Перетащите фото или нажмите» / «Прикрепите фото» комментарий «+ Комментарий к заказу» / «+ Комментарий» кнопка «Получить бесплатный макет» / «Получить мой макет» Раньше телефонные варианты подставлял скрипт уже в браузере, и человек успевал увидеть чужой текст. Теперь оба лежат в разметке, нужный показывают стили — подмены не видно, потому что её нет. ⚠ Разница в текстах не случайна. На телефоне перетащить фото нечем, а слово «заказ» до отправки формы превращает прикидку цены в обязательство — часть людей на этом отваливается. */ .calc-mob { display: none; } @media (max-width: 1024px) { .calc-desk { display: none; } .calc-mob { display: inline; } } /* Подсказка под рамкой фото и строка про доставку — только телефон. Оформление им даёт calc-mobile-v2.css, здесь только показ. */ .calc-m2-photohint, .calc-m2-delivery, .calc-m2-waypick__label { display: none; } @media (max-width: 1024px) { .calc-m2-photohint, .calc-m2-delivery { display: block; } .calc-m2-waypick__label { display: block; } } /* На компьютере подписи «Куда прислать макет:» нет — там три кнопки стоят в строку рядом с телефоном и читаются без пояснения. Обёртка строки нужна обоим, поэтому её не прячем. */ .calc-m2-waypick__row { display: contents; } @media (max-width: 1024px) { .calc-m2-waypick__row { display: flex; gap: 8px; } } /* строка «Макет отправим…» на телефоне лишняя — она есть у поля телефона */ @media (max-width: 1024px) { .calc-hide-mob { display: none; } } /* ================= ДЕСКТОПНЫЕ СТРОКИ ФОРМЫ ================= На компьютере форма стоит в узкой колонке, и три служебные строки помогают: заголовок над полем фото, «Без спама» перед кнопкой и «Ваши данные не передаются» в конце. На телефоне экран дороже. Владелец 15.08.2026 вычищал форму именно от повторов, и в боевой мобильной версии этих строк нет: .s5top «Загрузите фото и оставьте телефон» — повторяет то, что и так видно: рамка фото и поле телефона рядом; .s5micro «Без спама · Никаких обязательств» — под ценой уже стоят «Макет бесплатно» и «Без предоплаты»; .s5foot «Ваши данные не передаются третьим лицам» — тот же смысл, что в согласии на обработку прямо под кнопкой. Прячем, а не удаляем: на компьютере они нужны. */ @media (max-width: 1024px) { #make .s5top, #make .s5micro, #make .s5foot { display: none; } } /* Значок облака над рамкой фото — только компьютер. На телефоне рамка и так подписана «Прикрепите фото» и внутри неё есть значок фотоаппарата (его даёт calc-mobile-v2.css фоном). Два значка подряд на узком экране только съедают место. */ @media (max-width: 1024px) { #make #makePortret .upico { display: none; } } /* ================= КОММЕНТАРИЙ НА ТЕЛЕФОНЕ ================= В calc-view.css поле комментария свёрнуто правилом .step4band .makePortret__textarea{display:none}, но оно лежит внутри @media (min-width: 1025px) — на телефоне не действует. Из-за этого поле стояло раскрытым всегда: занимало 67 px и отодвигало телефон с кнопкой. Владелец 31.08.2026: «да и коменты не могу свернуть». Класс show вешает calc-ui.js по нажатию на строку «+ Комментарий». */ @media (max-width: 1024px) { #make #cwish .makePortret__textarea { display: none; } #make #cwish .makePortret__textarea.show { display: block; margin-top: 8px; } /* Сама строка «+ Комментарий» — оранжевая, как на компьютере и как в боевой мобильной версии. Стили .wishlink тоже заперты в десктопном медиазапросе, поэтому повторяем здесь. */ #make #wishtoggle.wishlink { display: inline-block; margin: 10px 0 0; color: #F0913A; font: 14px Montserrat, Arial, sans-serif; cursor: pointer; } /* Заголовок формы скрыт, но его нижний отступ оставался и давал лишние 10 px перед рамкой фото. Замер против боевого: 41 px против 31 px. */ #make .s5top { margin: 0 !important; } } /* Рамка фото стояла на 10 px ниже, чем в боевой версии: у неё в разметке свой отступ margin: 15px 0 0 0, а боевые стили его перебивают. Замер против боевого телефона: 41 px против 31 px. */ @media (max-width: 1024px) { #make #makePortret label.downFileMake { margin-top: 5px !important; } } /* ================= ПОЛЕ КОММЕНТАРИЯ НА ТЕЛЕФОНЕ ================= Владелец 31.08.2026: «окно для коментов мелкое очень». Поле выходило узким и низким, потому что размеры ему задаёт calc-mobile-v2.css через свою обёртку .calc-m2-more__body, а у нас обёртка другая — #cwish. Правило не находило поле, и оставались размеры по умолчанию: около 200 px шириной и три строки высотой. Задаём явно. ⚠ РАЗМЕР ШРИФТА НЕ МЕНЬШЕ 16 px. Айфон увеличивает страницу, когда фокус попадает в поле с более мелким шрифтом, и человек оказывается на приближённой странице без возможности вернуться. Это же правило стоит в calc-mobile-v2.css, причина та же. */ @media (max-width: 1024px) { #make #cwish .makePortret__textarea { width: 100%; margin: 8px 0 0; } #make #cwish textarea { width: 100%; min-height: 84px; padding: 11px 14px; border: 1px solid #DDE1E8; border-radius: 12px; font: 16px/1.4 Montserrat, Arial, sans-serif; resize: vertical; box-sizing: border-box; } } /* ================= ОТСТУПЫ ВНУТРИ ФОРМЫ ================= У поля телефона в разметке своя обёртка с отступами 15 px сверху и снизу — она осталась от всплывающего окна, где поля шли столбиком. В прежнем виде calc-view.js переносил в строку САМО поле, без обёртки, и отступов не было. Мы обёртку сохранили (она нужна на телефоне), поэтому гасим отступы здесь. Замер против боевого 31.08.2026: строка с телефоном была 71 px вместо 41 — тридцать лишних пикселей на пустом месте. */ #make #c2 label { margin: 0 !important; display: block; } /* Значок облака стоит внутри рамки фото, как на боевом. Отдельной строкой он добавлял 17 px и отрывал значок от подписи. ⚠ ТОЛЬКО КОМПЬЮТЕР. Без медиазапроса это правило перебивало скрытие значка на телефоне — одинаковая вескость селекторов, и побеждало то, что ниже. Поймано на стенде: облако вылезло на телефон и подняло рамку фото с 46 px до 60. */ @media (min-width: 1025px) { #make #c1 .upico { display: inline-block; vertical-align: middle; margin-right: 6px; } } /* ================= ЗНАЧКИ ПОД ЦЕНОЙ В ОДНУ СТРОКУ ================= Владелец 31.08.2026: «под ценой нужно в строчку а не в столбик Макет бесплатно / Без предоплаты». На боевом они тоже в столбик — замер на копии сайта: колонка с ценой 264 px, а две надписи с зазором 24 px просят 320 px и переносятся. То есть это не поломка новой вёрстки, а как было. Правим по просьбе. Что делаем: зазор с 24 px до 12, шрифт с 14 до 12, перенос запрещаем. Замер после правки — обе надписи в одну строку, в 264 px помещаются. Только компьютер: на телефоне они и так стоят в строку, там свой блок под ценой (.footer-button-info). */ @media (min-width: 1025px) { #make .perks { flex-wrap: nowrap; gap: 12px; } #make .perks span { font-size: 12px; gap: 6px; white-space: nowrap; } #make .perks svg { flex: 0 0 14px; width: 14px; height: 14px; } } /* ================= НАЖАТИЕ ПО ВСЕЙ РАМКЕ ФОТО ================= Владелец 31.08.2026: «загрузка фото срабатывает когда нажимаешь на кнопку только в одном месте между картинкой и буквами». Причина. Dropzone открывает выбор файла, только если нажали ровно на сам элемент: в его обработчике стоит проверка evt.target === element (либо попадание внутрь .dz-message, которого у нас нет). Раньше внутри рамки лежал только текст, без тегов, — и любое нажатие приходилось на саму рамку. Я положил внутрь два для разных надписей на телефоне и компьютере, плюс значок облака. Они стали перехватывать нажатия: работала только узкая полоска между ними — та самая, что нашёл владелец. pointer-events: none снимает с них перехват. Нажатия проходят насквозь и достаются рамке, как раньше. ⚠ ЗАВИСИТ ОТ РАЗМЕТКИ. Добавите внутрь рамки новый элемент — он тоже должен быть без перехвата, иначе на нём загрузка умрёт. Проверка простая: нажать по значку, по тексту и по пустому месту справа — выбор файла должен открыться во всех трёх точках. */ #make #makePortret label.downFileMake > * { pointer-events: none; } /* ============ ПОДПИСЬ У ПОЛЯ ТЕЛЕФОНА И «+ КОММЕНТАРИЙ» ============ Сверка с боевым телефоном 31.08.2026, 375 px: боевая было у меня комментарий по центру по левому краю подпись по центру, 13px по левому краю, 16px цвет подписи 61,59,55 51,51,51 текст «…мессенджер.» без точки Обе надписи стоят между рамкой фото и полем телефона — по центру они читаются как подпись к полю, а по левому краю сливаются с остальным текстом формы. Размеры и цвет взяты замером с боевой страницы, не на глаз. */ @media (max-width: 1024px) { #make #makePortret .s4label { text-align: center; font-size: 13px; line-height: 1.3; color: #3D3B37; margin: 10px 0 0; } #make #wishtoggle.wishlink { display: block; text-align: center; } } /* ============ ШИРИНА ФОРМЫ НА ТЕЛЕФОНЕ ============ Замер на боевом телефоне 375 px: рамка фото 287 px шириной. У меня получалось 319 — форма шла во всю ширину колонки, а на боевом она стоит внутри .make__setting-mobil, у которой свои боковые отступы. Высота, внутренние отступы, шрифт и скругление у рамки уже совпадали (46 px, 10/12/10/40, 15 px, 10 px) — расходилась только ширина, и вместе с ней вся форма казалась шире остального блока. Владелец: «кнопка на мобилке загрузки фото сделай такого же размера как на боевом». Даём колонке те же 16 px с каждой стороны — форма встаёт вровень с шагами и ценой над ней. */ @media (max-width: 1024px) { #make .make__row > .make__setting { padding-left: 16px; padding-right: 16px; } }