/* ============================================================ БЛОКИ ГЛАВНОЙ: плёнка, витрина, цены, комплект, форма заявки, окна (свой город, заведение, кадр макета, политика). Лежало инлайном в index.html. Вынесено, когда путь заказа разъехался по страницам: странице карты нужны отсюда окна и поля («мой город нашёлся не сразу» — это та же форма заявки), а держать их копию на второй странице значит завести вторую правду. База (токены, сетка, шапка, кнопки) — в assets/base.css. Конструктор — в assets/configurator.css. ============================================================ */ /* ---------- ТЁМНЫЕ СЦЕНЫ ---------- Первые две секции — цифровой мир: тёмный экран, телефон, архив. Фон и цвета текста едут из film.js через переменные ниже, поэтому переход в бумагу происходит внутри одного экрана, а не стыком двух секций. Значения по умолчанию — на случай, если скрипт не поднялся. */ /* Акцент на тёмном берём светлый вариант: --route-ink рассчитан на контраст с бумагой и на чернилах уходит в нечитаемое. */ /* ---------- ТЕКСТ ВНУТРИ ПЛЁНОЧНЫХ СЕГМЕНТОВ ---------- Колонка занимает левую половину сетки: объект в кадре стоит правее центра, и текст с ним не спорит. */ .section-sub{ margin:10px 0 0; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-55); } /* Стилей секций 04–08 здесь больше нет. Это были .prose-col, .about-thesis, .starter-* , .looks-note, .tube-list и .gift-body — колонки текста и списки прежней вёрстки: «первые пять карточек» перечислением, «что придёт в тубусе» таблицей, тезис о подарке абзацем. Всё это рассказывает плёнка, и разметки под них на странице не осталось ни строчки. Стили пережили её на несколько правок и держались мёртвым грузом: две сотни строк, которые нечему применить. */ /* ---------- 08·а · ВИТРИНА: КАРТОЧКИ НА КАРТЕ ---------- Три слоя друг на друге: кусок карты, карточки на нём, окно просмотра поверх страницы. РАЗМЕР КАРТОЧКИ СЧИТАЕТСЯ ОТ КАДРА, А НЕ ОТ ЭКРАНА. Карточка привязана к месту на карте, значит и величина у неё должна быть картовая: доля ширины кадра. Возьми мы vw — на широком мониторе карточки разъехались бы по карте пятнами, а на узком слиплись бы, хотя карта под ними всё та же. */ /* Снизу поле остаётся: под витриной идёт «Сколько стоит» — блок с заголовком и текстом, и вплотную к карте он читался бы подписью под ней. */ /* ПОЛЯ ПОД ВИТРИНОЙ БОЛЬШЕ НЕТ. Оно осталось от «Сколько стоит»: тот блок начинался заголовком, и вплотную к карте заголовок читался подписью под ней. Блока больше нет, за витриной сразу идёт заявка — со своим фоном и со своей картой. Поле между ними превращалось в пустую бумажную полосу, а карта, которая должна перетекать из блока в блок, на ней обрывалась. */ /* Секция витрины ОРАНЖЕВАЯ на любой ширине: и плёнка сверху, и заявка снизу кончаются акцентом, а карта в неё растворяется краями. */ #showcase{ padding-bottom:0; background:var(--route); } .showcase-band{ /* Кадр во всю ширину окна, мимо .grid. Прокрутка по горизонтали — для телефона: см. .showcase-stage. overscroll-behavior-x:contain, чтобы дотянув кадр до края, не уехать «назад» по истории — на трекпаде это происходит с одного лишнего движения. */ overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; /* РАСТВОРЁННЫХ КРАЁВ БОЛЬШЕ НЕТ. На телефоне кадр шире экрана, и его левый и правый края гасились градиентом — знаком «дальше есть ещё». Пока под витриной была бумага, это читалось именно так. Теперь секция оранжевая, и гашение стало проявлять оранжевый прямо поверх карты: не подсказка о прокрутке, а два цветных пятна по краям кадра. Карта у кромки теперь просто обрезана — как и любой кадр карты. */ } .showcase-band::-webkit-scrollbar{ display:none; } .showcase-stage{ position:relative; width:100%; /* Пропорция кадра — та же, что у самого куска карты (784,5 × 615,2), чтобы карта легла в него без обрезки и карточки встали ровно туда, куда их поставили в админке. */ aspect-ratio:784.5 / 615.2; /* Ниже этой ширины карточки начинают наезжать друг на друга, как их ни расставляй: восьми штукам нужно место. Поэтому на телефоне кадр не сжимается, а уезжает под палец. */ min-width:660px; /* РАМКИ У КАДРА БОЛЬШЕ НЕТ. Линии сверху и снизу очерчивали витрину, пока она была картинкой на бумаге. Теперь сверху к ней вплотную подходит оранжевое поле, которым кончается плёнка, а снизу — оранжевая заявка с продолжением той же карты. На обоих стыках серая линия читается швом: карта, которая должна перетекать из блока в блок, оказывается обведённой по краю. Кадр виден и без рамки — карта закрывает его целиком (object-fit:cover плюс зум). */ /* Фона у кадра нет: под ним оранжевое поле секции, в которое карта и растворяется сверху и снизу (см. .showcase-map-frame). Бумажная подложка проступала бы в этих растворениях светлой полосой. */ background:transparent; /* Отсюда считается размер карточек: доля ширины кадра. Взять vw нельзя — карточка привязана к месту на карте, и величина у неё должна быть картовая, иначе на широком мониторе карточки разъедутся по карте пятнами, а на узком слипнутся. */ /* 13,5% от кадра — это 173 пикселя на мониторе 1280 и 189 на 1400. Число не подобрано на глаз: ровно столько занимает карточка в редакторе, где сетка набрана как repeat(auto-fill, minmax(170px, 1fr)). Человек, пришедший сюда из редактора, видит карточку того же размера, к какому там привык. */ --card-w:13.5%; } /* На телефоне кадр не сжимается (min-width), значит карточка на нём выходит вдвое мельче, чем на мониторе. Читать на ней уже нечего — добавляем доли, чтобы подпись оставалась подписью. Догнать редакторские 170 пикселей тут нельзя: восемь таких карточек сложатся в кучу и от карты под ними ничего не останется. */ @media (max-width:900px){ .showcase-stage{ --card-w:16%; } /* ВЕРХНИЕ КАРТОЧКИ ВЫХОДЯТ ЗА КАДР — И ЭТО НЕ ОШИБКА РАССТАНОВКИ. Карточка висит НАД своей булавкой, а доля её выросла (см. выше): на телефоне она занимает 27% высоты кадра против 23% на мониторе. Булавка на четверти высоты — обычное место, и карточка над ней уходит выше верхней кромки. Кадр не резиновый: пропорция у него от карты, растянуть его по высоте нельзя. Поэтому на телефоне место карточке даёт ПОЛОСА над кадром. Плата: булавка карточки, поставленной в админке у самого нижнего края, обрежется кромкой — снизу поля нет вовсе, там сразу начинается заявка. В админке кадр тот же, и место видно при расстановке. */ .showcase-band{ /* ПОЛЕ СВЕРХУ — ОРАНЖЕВОЕ, А НЕ БУМАЖНОЕ. Бумажное читалось полосой между блоками: плёнка кончается сплошным оранжевым полем, и светлая полоса под ним — это не поле, а шов. В цвет плёнки то же самое поле не видно вовсе: оранжевое просто продолжается, и из него выезжает карта. Цвет держит САМА СЕКЦИЯ, а не полоса: полоса прокручивается, и фон на ней пришлось бы держать шире экрана. */ padding:28px 0 0; } } /* Кромки кадра РЕЗКИЕ. Растворять их не нужно: сверху и снизу к витрине вплотную подходят соседние полосы той же карты, и переход читается сменой исполнения — полноцветная карта, дальше её же улицы на оранжевом. Размывка на этом стыке только мешала бы: она делает вид, будто карта кончилась, тогда как она продолжается. */ .showcase-map-frame{ position:absolute; inset:0; overflow:hidden; } /* КАРТА ПОКАЗАНА КРУПНЕЕ, ЧЕМ ВЛЕЗАЕТ В КАДР. На единичном масштабе в полосу попадал слишком большой кусок города: улицы сходились в паутину, и карточки стояли не «на квартале», а на сером фоне из линий. ВТРОЕ И СО СДВИГОМ — ЧТОБЫ ГОРОД НЕ ЧИТАЛСЯ. На полутора кратах в кадре лежал весь центр Твери: излучина Волги, стрелка, восьмиугольная площадь. Город узнавался с первого взгляда — а карта здесь не про Тверь, она про то, КАК ВЫГЛЯДИТ продукт: чужой узнаваемый город и обещает не то, и выдаёт, откуда взят образец. Сдвиг уводит кадр в жилую сетку юго-западнее центра: кварталы, ручей, парк — фактура города вообще, без единой приметы. Сдвиг задан в долях кадра, а не в юнитах карты: translate считает проценты от размера картинки, и одна и та же пара чисел держит кадр на любой ширине блока. ВСЕ ТРИ ЧИСЛА ОБЯЗАНЫ СОВПАДАТЬ С ДВУМЯ МЕСТАМИ. С админкой (backend/public/admin.html → .slot-map-stage): место карточки хранится в долях кадра, а не в координатах карты — раскладывают её там, показывают здесь, и стоит кадрам разойтись, как карточка уедет с той улицы, на которую её положили. И со сборщиком полос (tools/build-backgrounds.py → ЗУМ, СДВИГ): из них он считает окна соседних полос, которые стыкуются с витриной сверху и снизу. */ .showcase-map{ position:absolute; left:50%; top:50%; width:100%; height:100%; object-fit:cover; user-select:none; pointer-events:none; --map-zoom:3; /* КАДР ВЫБРАН БЕЗ ВОДЫ, И ЭТО СЧИТАНО, А НЕ ПОДОБРАНО. Прежний кадр (-24.78%, -36.4%) стоял на излучине Волги: в окне витрины 2578 пикселей воды из 53 тысяч — река и пара прудов наискось через всю картинку. Под карточками это читалось не городом, а водоёмом. Новый кадр найден перебором по самому файлу карты: окно 261 × 205 юнитов, шаг 2, условие — минимум воды при максимуме улиц. В нём 38 пикселей воды (тонкий ручей у края) и 3428 улиц против 2248 в прежнем: квартальная сетка плотнее. Числа связаны со сборщиком фонов: tools/build-backgrounds.py → СДВИГ = (-167.5, 176.9) юнитов. Проценты здесь — те же сдвиги, умноженные на зум: -dx / 784.6 × 300 и -dy / 615.3 × 300. Правишь одно — правь и второе, иначе улицы на стыке блоков разъедутся. */ --map-pan-x:-26.96%; --map-pan-y:-94.05%; transform:translate(calc(-50% + var(--map-pan-x)), calc(-50% + var(--map-pan-y))) scale(var(--map-zoom)); } .showcase-cards{ position:absolute; inset:0; } /* ---------- КАРТОЧКА — ТА ЖЕ, ЧТО ВЫХОДИТ ИЗ РЕДАКТОРА ---------- Не «фотография в рамочке», а ровно та карточка, которую человек соберёт в editor.html и получит напечатанной. Поэтому вся геометрия здесь — пересчёт печатной в доли, а не подобранные на глаз числа (исходник: assets/editor-print.css, формат small 15 × 20 мм): карточка 15 × 20 мм → 3 : 4 поле 0,7 мм → 4,667% ширины фото квадрат по ширине → aspect-ratio 1 / 1 полоса весь остаток → flex: 1 Кегли там заданы в пунктах от карточки в 15 мм (42,52 pt), здесь — в долях ширины карточки через cqw: 3,5 pt → 8,23%, 2,5 pt → 5,88%, 2,8 pt → 6,59%. ОТСЮДА ГЛАВНОЕ СВОЙСТВО: карточка выглядит одинаково при ЛЮБОЙ своей ширине. Она стоит и на карте размером с ноготь, и в окне просмотра размером в пол-экрана — и это один и тот же класс с одной и той же разметкой, без второй вёрстки «для крупного показа». Размер задаёт тот, кто карточку ставит; всё остальное считается от него. */ .sc-card{ width:var(--card-w); aspect-ratio:3 / 4; /* Единица измерения для всего, что внутри: 1cqw = 1% ширины карточки. Без неё кегли пришлось бы задавать в vw, то есть привязать подпись на карточке к ширине окна, а не к ней самой. */ container-type:inline-size; display:flex; flex-direction:column; /* Поле карточки задаётся НЕ здесь, а на её содержимом — в cqw. Проценты сюда напрашиваются (0,7 мм от 15 = 4,667%), но карточка на карте позиционирована абсолютно, и процентный padding считается от ширины ПОЗИЦИОНИРУЮЩЕГО предка, то есть от всего кадра карты: поле выходило в 37 пикселей вместо шести, фото сжималось втрое и карточка превращалась в марку посреди белого листа. cqw же — доля ширины самой карточки. На ней самой эта единица не работает (контейнер не спрашивает сам себя), поэтому поле и раздаёт содержимое. */ padding:0; margin:0; background:#fff; border:0; border-radius:0; text-align:center; } /* Фото квадратное, но сжимаемое — как в печати: пусть лучше кадр потеряет сотую долю высоты, чем подпись уедет за край карточки. */ .sc-pic{ flex:0 1 auto; min-height:0; margin:4.667cqw 4.667cqw 0; /* поле карточки: 0,7 мм от 15 */ aspect-ratio:1 / 1; overflow:hidden; background:#eee; } .sc-pic img{ width:100%; height:100%; object-fit:cover; } /* Полоса забирает весь остаток высоты — и когда в ней есть текст, и когда его нет: пустая она читается местом под подпись от руки, а это ровно то, чем она и является. */ .sc-strip{ flex:1 1 auto; min-height:0; padding:2.67cqw 4.667cqw 4.667cqw; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.33cqw; overflow:hidden; font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; } .sc-title{ width:100%; font-weight:700; font-size:8.23cqw; line-height:1.1; color:#333; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .sc-comment{ width:100%; font-size:5.88cqw; line-height:1.15; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Дата и оценка разведены по краям строки — как на печатной карточке. Если заполнено что-то одно, оно встаёт по центру. */ .sc-bottom{ width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:2cqw; overflow:hidden; flex-shrink:0; } .sc-bottom.is-single{ justify-content:center; } .sc-date{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:6.59cqw; letter-spacing:.08em; color:#555; min-width:0; overflow:hidden; white-space:nowrap; } /* Оценка ужиматься не должна: пропажу пятой точки заметить нечем, карточка просто станет другой. Ужимается дата — см. печать. */ .sc-dots{ display:block; flex-shrink:0; } /* ---------- та же карточка, лежащая на карте ---------- Здесь только про МЕСТО и поведение: сама карточка описана выше и ничего о карте не знает. Точка привязки — БУЛАВКА, а не угол карточки: булавка стоит на месте события, карточка висит на ней. Поэтому translate уводит карточку вверх и влево от точки, а не центрирует её. */ .showcase-card{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,calc(-100% - 6px)) rotate(var(--rot,0deg)); transform-origin:50% 100%; box-shadow:0 6px 18px rgba(26,28,32,.28); cursor:pointer; transition:transform var(--t-menu) var(--ease-out), box-shadow var(--t-menu) var(--ease-out); } /* Булавка — та же оранжевая точка, что держит карточки на первом экране. Рисуется псевдоэлементом под карточкой: отдельным узлом она была бы ещё одной целью для нажатия, а нажимают тут по карточке. */ .showcase-card::after{ content:''; position:absolute; left:50%; top:100%; width:9px; height:9px; margin:2px 0 0 -4.5px; border-radius:50%; background:var(--route); box-shadow:0 1px 3px rgba(26,28,32,.45); } @media (hover: hover) and (pointer: fine){ .showcase-card:hover{ transform:translate(-50%,calc(-100% - 12px)) rotate(0deg) scale(1.06); box-shadow:0 14px 30px rgba(26,28,32,.32); z-index:3; } } .showcase-card:focus-visible{ outline:2px solid var(--route-ink); outline-offset:3px; z-index:3; } /* ---------- окно просмотра ---------- У окна нет своей рамки, фона и полей: окно — это сама карточка, показанная крупно. Всё, что было вокруг неё (бумажная подложка, чернильная рамка, подпись сбоку), рисовало «карточку в интерфейсе» вместо карточки. */ .showcase-view{ padding:0; border:0; background:none; overflow:visible; max-width:none; max-height:none; } .showcase-view::backdrop{ background:rgba(23,21,18,.72); } /* Ширина — единственное, что задаётся снаружи: всё внутри карточки считается от неё (см. .sc-card). Три предела сразу: разумный потолок, ширина узкого экрана и высота — карточка втрое выше своей ширины на четверть, и 56vh как раз держит её в 75vh по высоте. */ .showcase-view-card{ --card-w:min(420px, 78vw, 56vh); box-shadow:0 18px 60px rgba(0,0,0,.45); } /* Крестик — справа сверху, НА снимке. Снаружи карточки он стоял бы на затемнении, и его пришлось бы делать выворотным — а затемнение это единственный фон, про который нельзя сказать, светлый он или тёмный: под ним просвечивает то, что человек смотрел до открытия. На снимке фон известен: бумажная плашка с чернильной кромкой читается на любом кадре — тот же крестик, что у политики и подтверждённого макета (.privacy-close), только положенный на угол. */ .showcase-view-close{ position:absolute; right:10px; top:10px; z-index:2; width:32px; height:32px; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; background:var(--paper); border:1px solid var(--ink); color:var(--ink); font-size:14px; line-height:1; transition:background-color var(--t-tap) var(--ease-soft), color var(--t-tap) var(--ease-soft); } @media (hover: hover) and (pointer: fine){ .showcase-view-close:hover{ background:var(--ink); color:var(--paper); } } .showcase-view-close:focus-visible{ outline:2px solid var(--route); outline-offset:2px; } /* ---------- 09 · ЦЕНЫ: БЛОК СНЯТ ---------- Здесь стояли три карточки наборов — «База», «Полный», «Подарок», — с каруселью на телефоне, точками под ней и кнопками по краям. Двести строк стилей. Выбор набора переехал в саму заявку (.order-kit-*): человек выбирает комплект там же, где называет город и оставляет контакт, а не этажом выше, отдельным решением, к которому потом надо возвращаться. Разметка ушла тогда же, стили остались и продолжали ездить на хостинг — четырнадцать килобайт правил, не совпадающих ни с одним элементом страницы. Перечёркнутая цена (.was) осталась: её показывает набор в заявке. */ .was{ font-weight:700; color:var(--ink-55); text-decoration:line-through; } /* ---------- 12 · вопросы ---------- */ /* ---------- 12 · ВОПРОСЫ ---------- ЗАГОЛОВОК НЕ ПЛАВАЕТ В ПУСТОТЕ. Отбивки складывались втроём: 96 px верхнего поля секции, 24 px собственного margin у h2 и ещё 28 px сверху у списка — плюс 24 px промежутка сетки между ними. Вокруг строки в 29 px высотой набиралось 110 сверху и 68 снизу. Своё нижнее поле у заголовка тут лишнее: на широком экране он стоит отдельной колонкой слева, и снизу от него ничего нет, а на узком расстояние до списка задаёт промежуток сетки. Верхнее поле секции ужато и привязано к ширине экрана. */ .faq-head{ grid-column:1/5; } .faq-head h2{ margin-bottom:0; } .faq-list{ grid-column:6/-1; } @media (max-width:900px){ .faq-head, .faq-list{ grid-column:1/-1; } .faq-list{ margin-top:0; } } .faq-list details{ border-top:1px solid var(--grid); } .faq-list details:last-of-type{ border-bottom:1px solid var(--grid); } .faq-list summary{ list-style:none; cursor:pointer; padding:18px 40px 18px 0; position:relative; font-weight:700; font-size:16px; line-height:1.4; color:var(--ink); } .faq-list summary::-webkit-details-marker{ display:none; } /* Знак состояния — плюс, у которого при открытии гаснет вертикаль. Никаких стрелок: страница живёт на прямых углах. */ .faq-list summary::before, .faq-list summary::after{ content:''; position:absolute; right:6px; top:calc(50% - 1px); width:15px; height:2px; background:var(--ink); } .faq-list summary::after{ transform:rotate(90deg); transition:transform var(--t-menu) var(--ease-out), opacity var(--t-menu) var(--ease-out); } .faq-list details[open] summary::after{ transform:rotate(0deg); opacity:0; } .faq-list summary:hover{ color:var(--route-ink); } .faq-list summary:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; } .faq-list details p{ margin:0 0 20px; font-size:15px; line-height:1.55; color:var(--ink-70); max-width:56ch; } @media (prefers-reduced-motion: reduce){ .faq-list summary::after{ transition:none; } } /* ---------- 11 · ЗАКАЗ (красная панель) ---------- */ .order-headline{ grid-column:1/8; } /* ПОРЯДОК СТРОК В ЗАГОЛОВКЕ ЗАЯВКИ. Досье-полоса, заголовок и лид раскладываются по строкам сетки явно: иначе они встают в порядке разметки, а между ними вклиниваются ячейки соседей. Только на широком экране: на узком всё идёт одной лентой сверху вниз, и делить нечего. КОНСТРУКТОРА В ЭТОМ БЛОКЕ БОЛЬШЕ НЕТ. Здесь стояли правила для .cfg, .cfg-stage и .cfg-side — макет карты с настройками и правая колонка с составом комплекта: заявка когда-то собиралась прямо на главной. Теперь карта собирается на отдельной странице (map.html), а в заявке остались выбор набора и форма. Ни одного элемента с этими классами на странице нет — правила висели впустую вместе с описанием раскладки, которой не существует. */ @media (min-width:901px){ #order .dossier-bar{ grid-row:1; } #order h2.order-headline{ grid-row:2; } #order p.order-headline{ grid-row:3; } } /* ПУНКТ КОМПЛЕКТА НЕ РАЗДВИГАЕТ КОЛОНКУ. Колонка сетки задана долей (1fr), а доля по умолчанию не даёт колонке стать уже своего содержимого: minmax(auto, 1fr). Значит, достаточно одному пункту комплекта оказаться шире — и колонка раздвигается, унося за собой соседнюю. Это и был тот случай, когда от выбора набора менялась ширина всего блока: у «Базы» пункты короткие, у «Подарка» есть «Комплект для визуализации маршрутов». min-width:0 снимает этот нижний предел, overflow-wrap разрешает длинному слову переноситься внутри строки. */ .order-kit-label{ min-width:0; overflow-wrap:anywhere; } /* Снимка напротив текста здесь больше нет — см. комментарий в разметке секции заказа. Слот `order` в админке остался, но на страницу его теперь никто не выводит. */ /* Кегль не переопределяем: он общий для всех заголовков секций. Отбивки сняты. Сверху 48 стояли, чтобы заголовок разошёлся с досье-полосой; полосы хватает и 28. Снизу 24 отделяли заголовок от лида — а лид его ПРОДОЛЖАЕТ, это одна мысль в два предложения, и разрывать их полем в четверть строки незачем. */ #order h2.order-headline{ margin:28px 0 10px; } /* АКЦЕНТ НА ОРАНЖЕВОМ — БУМАГА, А НЕ ТЁМНЫЙ АКЦЕНТ. --route-ink придуман для акцента НА БУМАГЕ и держит на ней 4,5:1. На самом акценте он даёт полтора — слово в заголовке просто пропадает, что и случилось с «своей картой» на странице карты. Правило было привязано к одному заголовку в #order; теперь оно про любой акцент внутри красной панели, где бы он ни стоял. */ .panel-red .accent{ color:var(--paper); } #order h2.order-headline .dot-circle{ background:var(--paper); } .order-side{ margin-top:0; } /* СОСТАВ КОМПЛЕКТА — ОКНО ПОСТОЯННОГО РАЗМЕРА. Высота коробки задана и от набора не зависит. Раньше она равнялась содержимому: у «Базы» четыре пункта, у «Подарка» десять, — и переключение набора двигало всё, что стоит ниже и рядом. Съезжала форма заявки, менял высоту макет слева, прыгала вся секция. Выбор набора — обычное сравнение, человек щёлкает по трём вкладкам подряд, и страница не должна каждый раз пересобираться заново. Шапка, вкладки наборов и итог держатся на месте, прокручивается ТОЛЬКО список пунктов. Итог особенно: это то, ради чего сюда смотрят, и уезжать за нижнюю кромку он не должен никогда. */ /* ЭТО ПОТОЛОК, А НЕ ВЫСОТА. Саму высоту ставит скрипт по содержимому (index.html → подогнатьКомплект): набор из трёх пунктов не должен стоять коробкой на шесть. Здесь — предел, выше которого коробка не растёт, а список внутри начинает прокручиваться. 560 вместо прежних 480: «База» с её тремя пунктами укладывалась в 493 и упиралась в потолок, получая полосу прокрутки ради тринадцати пикселей. Прежнее число было подобрано под соседнюю колонку с макетом карты — той колонки на главной больше нет, сборка карты уехала на отдельную страницу, и рядом стоит форма заявки, которая всё равно вдвое выше. На узком экране потолок свой: там коробка соседствует не с колонкой, а с большим пальцем. */ .order-kit{ border:1px solid var(--ink); display:flex; flex-direction:column; /* max-height, а не height: коробка встаёт по содержимому и упирается в потолок, только когда пунктов правда много. Список внутри — flex:1 1 auto с min-height:0, поэтому лишнее он забирает себе и прокручивается сам. */ max-height:var(--kit-h,560px); } /* НА ТЕЛЕФОНЕ КОРОБКА ВЫШЕ, И ВОТ ПОЧЕМУ. Высота на десктопе подобрана под соседнюю колонку — состав и форма должны сойтись с макетом слева. На узком экране колонок нет, а мерить нечем: постоянные части коробки (шапка, вкладки наборов, полоса доп. опций и итог) занимают около трёхсот пикселей, и при четырёхстах на сам список оставалось сто двадцать — одна строка. Список из семи пунктов, показанный по одному, — это не список. Считаем от экрана, а не числом: 74% высоты окна оставляют коробке место и сверху, и снизу, так что видно и то, откуда пришли, и что дальше. Потолок в 600 — чтобы на планшете коробка не разъезжалась во весь экран. */ @media (max-width:900px){ .order-kit{ --kit-h:min(74vh,600px); } } /* Какой это набор и почему он такой. Вместо кнопок-радио с ценами: выбирать нечего, набор следует из решения о карточках (index.html → наборПоСостоянию). */ .order-kit-now{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:10px 0 2px; } .order-kit-now-name{ font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:17px; letter-spacing:-.01em; color:var(--ink); } /* Строки «почему именно этот набор» больше нет (разбор в index.html, у renderKit) — осталось одно название. */ /* СОСТАВ — СТОЛБЦОМ, ПО ПУНКТУ НА СТРОКУ. История здесь такая. Сначала был нумерованный список с подзаголовком у каждого пункта — 238 px высоты, и в коробку, стоявшую по содержимому, он не влезал. Потом фраза через запятую — у «Полного» это четыре строки сплошного текста, в которых не видно, входит что-то или нет. Потом россыпь чипов в две строки: влезала, но на коробке в 560 px читалась не составом, а плывущей строкой, под которой оставалось пустое поле. Условие изменилось: коробка больше не стоит по содержимому, она тянется до низа кнопки «Отправить заявку». Высота теперь не дефицит, а то, что надо чем-то занять, — и столбец с галочками занимает её ровно тем, за чем в этот блок и смотрят: что входит в набор. Подзаголовков по-прежнему нет, из-за них список и раздувался. */ .order-kit-brief{ display:grid; gap:7px; /* Поля по бокам те же, что у соседей по коробке (.order-kit-plans, .order-kit-total): без них первый пункт упирался прямо в рамку блока, и список читался приклеенным к ней. */ margin:0; padding:10px 16px 2px; list-style:none; } .order-kit-brief li{ display:flex; align-items:baseline; gap:6px; font-size:13px; line-height:1.45; color:var(--ink); } /* КНОПКА «ИЗМЕНИТЬ» — РЯДОМ С «КАРТОЙ ГОРОДА». Здесь стояла спецификация макета второй строкой пункта; она убрана (разбор — в index.html, у renderKit), а на её место пришёл путь в конструктор, где эти параметры и живут. Кнопка нарочно мелкая и обведённая, а не залитая: заливка в строке состава читалась бы главным действием чека, а главное в нём — «Отправить заявку» слева. Обводка говорит «сюда можно нажать» и на этом останавливается. ЦВЕТ НЕ --route-ink, И ЭТО ИЗ-ЗА КЕГЛЯ. Акцент коробки — #C4451F: им набраны галочки пунктов и сумма итога. На бумаге состава (#EDEAE3) он даёт 4,14 — сумме этого хватает с запасом (её кегль 30, норма 3), а надписи в десять пикселей нужна норма 4,5. Поэтому здесь тот же тёмный вариант акцента, что и у примечания про листы ниже: #A23D1F, 5,42 на той же бумаге. Глазом от акцента не отличается, порог проходит. */ .order-kit-brief .order-kit-edit{ flex:none; margin-left:4px; padding:1px 7px 2px; font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; line-height:1.5; text-decoration:none; color:#A23D1F; border:1px solid currentColor; border-radius:2px; } @media (hover:hover) and (pointer:fine){ .order-kit-brief .order-kit-edit:hover{ color:var(--paper); background:#A23D1F; } } .order-kit-brief .order-kit-edit:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; } /* Галочки белым, а не зелёным: блок лежит на красной панели, и зелёный на ней — чужой цвет, который к тому же еле виден. Белый здесь и есть акцент. СТОЛБЕЦ ДЕРЖИТ ТЕКСТ, А НЕ ГАЛОЧКА. Всё в коробке выстроено по одной линии: название набора, примечание про листы, «Итого». Пункты состава из неё выпадали — галочка стояла на общей линии и отодвигала текст на тринадцать пикселей вправо, так что единственной несовпадающей колонкой оказывалось как раз то, что читают. Отрицательная отбивка вывешивает галочку влево: текст встаёт на общую линию, а знак уходит в поле коробки. У пунктов не первых в ряду он так же убирается в межколоночный промежуток — тот шире выноса, и на соседний текст знак не заедет. */ .order-kit-brief li::before{ content:'✓'; font-size:10px; color:#fff; flex:none; width:7px; margin-left:-13px; } .order-kit-brief-note{ margin:6px 0 0; padding:0 16px; font-size:12px; line-height:1.45; color:rgba(23,21,18,.66); } /* Зачёркнутая цена не переносится: «499» оставалось на одной строке, а «₽» уезжало на следующую — читалось как отдельное число. */ .order-kit-brief-note s{ opacity:.6; white-space:nowrap; } .order-kit-title{ flex:none; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:12px 16px; border-bottom:1px solid var(--ink); background:var(--paper); color:var(--ink); } /* Список — единственное, что прокручивается. overscroll-behavior не даёт докрутке уехать в страницу: дошёл до конца списка — остановился, а не потащил за собой всю секцию. */ /* scrollbar-gutter резервирует место под полосу прокрутки ВСЕГДА. Без него у «Базы» полосы нет (четыре пункта помещаются), а у «Подарка» есть — и строки внутри окна становятся на десяток пикселей уже. Со стороны это читается так, будто от набора меняется ширина всего блока: рамка стоит, а текст в ней дёргается. */ .order-kit-list{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-gutter:stable; } /* Растворённый нижний край — знак того, что список продолжается (класс ставит скрипт, см. хвостКомплекта). На мыши про это говорит полоса прокрутки, на телефоне её нет вовсе. */ .order-kit-list.has-more{ -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 34px), transparent 100%); mask-image:linear-gradient(180deg, #000 calc(100% - 34px), transparent 100%); } .order-kit-list::-webkit-scrollbar{ width:10px; } .order-kit-list::-webkit-scrollbar-thumb{ background:rgba(26,28,32,.32); border:3px solid var(--paper); } .order-kit-list::-webkit-scrollbar-track{ background:var(--paper); } /* Строка комплекта — сетка, а не флексбокс в строку: у пункта с загрузкой кнопка стоит напротив названия, а список файлов и ошибка ложатся ПОД ними во всю ширину. Флексом это требовало бы лишней обёртки на каждый пункт — включая четыре, которым она не нужна. */ .order-kit-row{ display:grid; grid-template-columns:18px 1fr auto; align-items:center; column-gap:12px; padding:12px 16px; border-bottom:1px solid rgba(23,21,18,.3); } .order-kit-row:last-child{ border-bottom:none; } .order-kit-num{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:14px; } .order-kit-label{ font-weight:700; font-size:13px; line-height:1.3; } /* Хвост под строкой — от колонки текста до правого края: под номером ему стоять незачем, он к номеру не относится. */ .order-kit-row > .kit-files{ grid-column:2 / -1; } .order-kit-sub{ display:block; font-size:11px; font-weight:400; color:rgba(26,28,32,.72); margin-top:2px; } /* ---- ДОПОЛНИТЕЛЬНАЯ ОПЦИЯ ---- Стоит в том же списке, что и пункты набора, но отделена от них линией и знаком «+» вместо номера: пункты пронумерованы, потому что они уже в комплекте, а это — то, чего в нём нет, пока не нажали. Списком ниже её ставить нельзя: тогда «состав комплекта» перестал бы отвечать на вопрос, из чего он состоит. */ .order-kit-row.is-option{ border-top:1px solid var(--ink); } .order-kit-row.is-option .order-kit-num{ opacity:.55; } /* Полоса доп. опций. Не прокручивается вместе со списком и не растёт: сколько опций у набора, столько строк, и все они на виду. */ .order-kit-extras{ flex:none; } /* На телефоне полоса стоит НАД итогом и делит высоту коробки со списком. Общее правило узкого экрана уводит кнопку под текст, и каждая опция вырастает до сотни пикселей: у «Базы» их две, и на список оставалось меньше, чем на предложения к нему. Здесь кнопка остаётся в строке — подпись у неё короткая, места хватает, — а пояснение ограничено двумя строками. */ @media (max-width:900px){ .order-kit-extras .order-kit-row.is-option{ grid-template-columns:18px 1fr auto; } .order-kit-extras .order-kit-row.is-option > .kit-option-btn{ grid-column:auto; margin-top:0; justify-self:end; } .order-kit-extras .order-kit-row .order-kit-sub{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } } .order-kit-extras .order-kit-row:first-child{ border-top:1px solid var(--ink); } /* Опция, которую пока нельзя взять: видно, что она есть, и написано, чего для неё не хватает. */ .order-kit-row.is-locked .order-kit-label{ color:var(--ink-55); } .order-kit-row.is-locked .kit-option-btn{ opacity:.45; cursor:default; } /* Цена добавленной опции — строкой под подзаголовком: подпись к тому, за что платят, а не кнопка. */ /* Цвет — БУМАГА, а не тёмная краска акцента. Коробка комплекта лежит на оранжевой панели, и --route-ink на ней почти неотличим от фона: строка про первый лист в наборе читалась как приглушённая подпись, хотя говорит она о деньгах — о том, что следующий лист платный. Выворотка на оранжевом — самый контрастный вариант, который есть в палитре, и цену видно сразу. */ .order-kit-price{ display:block; margin-top:4px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--paper); } /* Прежняя цена в той же строке — тише основного: зачёркнутое сообщает «столько же стоит отдельно», а не «столько платить». Тише той же бумагой, а не тёмной краской: иначе оно снова тонет в оранжевом. */ .order-kit-price s{ font-weight:400; color:rgba(237,234,227,.62); margin-left:2px; } /* Крестик — единственное, что с добавленным пунктом ещё можно сделать. Размером с номер строки: действие редкое, тянуть на себя взгляд ему незачем, но и прятать его нельзя. */ /* Крестик стоит В УГЛУ СТРОКИ, а не в её ряду. Рядом с загрузчиком макетов он забирал себе колонку, и на текст оставалась треть ширины: «печатаем и вырезаем сами» ломалось на пять строк, а строка комплекта раздувалась вдвое против соседних. В углу он не отнимает у текста ничего и читается тем, чем является, — «убрать эту строку». */ .order-kit-row.is-added{ position:relative; padding-right:40px; } /* ЗАГРУЗЧИК СТОИТ ПОД ТЕКСТОМ, А НЕ РЯДОМ. Раньше он занимал колонку справа — и это работало, пока состав жил во всю ширину экрана. В колонке шириной в треть окна кнопка съедала половину строки: на подпись оставалось сто пикселей, «печатаем и вырезаем сами» ломалось на пять строк, и пункт становился втрое выше соседних. Под текстом он не отнимает ширины ни у кого. */ .order-kit-row.has-upload{ grid-template-columns:18px 1fr; } .order-kit-row.has-upload > .kit-upload-btn{ grid-column:2; justify-self:start; margin-top:10px; } .kit-option-drop{ position:absolute; top:8px; right:10px; width:22px; height:22px; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; background:none; border:1px solid rgba(23,21,18,.35); color:var(--ink); font-size:10px; line-height:1; transition:background-color .12s, color .12s, border-color .12s; } .kit-option-drop:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); } .kit-option-btn{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap; background:var(--paper); border:1px solid var(--ink); color:var(--ink); padding:7px 12px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; transition:background-color var(--t-tap) var(--ease-soft), color var(--t-tap) var(--ease-soft); } /* Галочка появляется только у включённой опции — по ней состояние видно и без цвета, на случай если цвет человек не различает. */ .kit-option-btn::before{ content:'+'; font-weight:700; } .kit-option-btn[aria-pressed="true"]{ background:var(--ink); color:var(--paper); } .kit-option-btn[aria-pressed="true"]::before{ content:'✓'; } @media (hover:hover) and (pointer:fine){ .kit-option-btn:hover{ background:var(--ink); color:var(--paper); } .kit-option-btn[aria-pressed="true"]:hover{ background:var(--paper); color:var(--ink); } } .kit-option-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; } @media (max-width:420px){ .order-kit-row.is-option{ grid-template-columns:18px 1fr; } .order-kit-row.is-option > .kit-option-btn{ grid-column:2; margin-top:10px; justify-self:start; } } /* Кнопок-наборов здесь больше нет: выбирать нечего, набор следует из решения о карточках (index.html → наборПоСостоянию). Осталась коробка под строку с названием набора — рамка снизу отделяет её от состава, как отделяла ряд кнопок. */ /* Внутренние линейки тоньше по тону, чем рамка коробки. Все разделители были в полные чернила, и коробка читалась таблицей: пять одинаковых линий подряд, ни одна ничего не значит. Теперь иерархия: внешняя рамка и линия над итогом — чернила (это границы смысла: где коробка и где деньги), линия под названием набора — волосок. */ .order-kit-plans{ flex:none; border-bottom:1px solid var(--grid); padding:0 16px; } /* Примечание про листы печати: нижний блок коробки вместе с итогом. Своей рамки у него нет намеренно — рамка отделила бы его от суммы, которую он объясняет. Пустой узел не занимает места: без печати в наборе примечания нет вовсе. */ /* Примечание выделено акцентом: это единственная строка в коробке, которая сообщает НЕОЧЕВИДНОЕ — что второй лист печати платный. Серым по бумаге она читалась сноской и пропускалась ровно теми, кому адресована. ЦВЕТ ТЕКСТА ПОДОБРАН ЗАМЕРОМ, А НЕ НА ГЛАЗ. Сначала стоял --route-ink (#C4451F) — тот самый «тёмный акцент», рассчитанный на чистую бумагу. На подложке в 9% оранжевого он даёт 3,75:1 при норме 4,5 для кегля 12: строка-предупреждение оказалась бы хуже читаемой, чем обычный текст рядом. #A23D1F на той же подложке даёт 4,91 и остаётся акцентом, а не чернилами. */ .order-kit-hint{ flex:none; padding:10px 16px; background:rgba(224,86,44,.09); border-top:1px solid rgba(224,86,44,.28); } .order-kit-hint:empty{ display:none; } .order-kit-hint .order-kit-brief-note{ margin:0; padding:0; color:#A23D1F; } /* ---- итог ---- */ .order-kit-total{ flex:none; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; padding:14px 16px; border-top:1px solid var(--ink); color:var(--ink); } /* Итог — самая крупная строка коробки: за ней сюда и смотрят. Было 11/24, стало 12/30. Подпись и сумма стоят на общей базовой линии (align-items:baseline выше), поэтому рост кегля их не разводит. */ .order-kit-total-label{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; } .order-kit-total-sum{ font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:30px; letter-spacing:-.02em; line-height:1.1; /* Сумма — единственное акцентное пятно в коробке. Крупному начертанию хватает и штатного --route-ink: на бумаге он даёт 4,5:1 при норме 3:1 для кегля от 24. Подпись «Итого» рядом остаётся чернильной — иначе акцент перестаёт быть акцентом. */ color:var(--route-ink); } .order-kit-total-note{ flex-basis:100%; margin:0; font-size:11px; line-height:1.35; color:rgba(26,28,32,.72); } @media (max-width:900px){ .order-headline{ grid-column:1/-1; } } /* ---------- ФОРМА ЗАЯВКИ ---------- Живёт в ПРАВОЙ колонке конструктора, под «Составом комплекта» и итоговой суммой (раскладка — в assets/configurator.css, .cfg-controls). Слева под макетом она оставляла справа полтысячи пикселей пустоты. */ .slip{ margin-top:0; } @media (max-width:900px){ .slip{ grid-column:1/-1; margin-top:8px; } } .slip form{ display:grid; gap:22px; } .field label{ display:block; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); margin-bottom:9px; } .field select, .field input[type="text"]{ width:100%; font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; color:var(--ink); background:var(--paper); border:1px solid var(--ink); padding:12px 12px; } .field select:focus-visible, .field input:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; } .field-error{ display:none; margin:9px 0 0; font-size:12px; font-weight:700; color:var(--ink); } .field.has-error input{ border-color:var(--ink); border-width:2px; padding:11px; } .field.has-error .field-error{ display:block; } /* Подсказка внутри поля видна, пока поле не в работе: на фокусе она уходит, чтобы не спорить с набираемым текстом. */ .field input::placeholder{ color:rgba(26,28,32,.55); opacity:1; } .field input:focus::placeholder{ color:transparent; } .field-label{ display:block; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); margin-bottom:9px; } /* Обёртка держит и кнопку, и поле, и выпадающее окно: окно позиционируется от неё, поэтому одинаково встаёт под обоими состояниями поля. */ .chan-box{ position:relative; } .chan-pick{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; background:var(--paper); border:1px solid var(--ink); color:var(--ink); padding:12px 16px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; } .chan-pick[hidden]{ display:none; } .chan-pick svg{ width:11px; height:11px; flex:none; transition:transform var(--t-menu) var(--ease-out); } .chan-pick[aria-expanded="true"] svg{ transform:rotate(180deg); } @media (hover:hover) and (pointer:fine){ .chan-pick:hover{ background:var(--ink); color:var(--paper); } } .chan-pick:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; } /* Поле появляется только после выбора канала: до него непонятно, что вписывать — никнейм, номер или адрес почты. */ .chan-row{ display:flex; } .chan-row[hidden]{ display:none; } .chan-row input[type="text"]{ flex:1; min-width:0; } .chan-badge{ display:flex; align-items:center; justify-content:center; flex:none; width:46px; padding:0; cursor:pointer; border:1px solid var(--ink); border-left:none; background:var(--ink); color:var(--paper); } .chan-badge svg{ width:20px; height:20px; } .chan-badge:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; } @media (hover:hover) and (pointer:fine){ .chan-badge:hover{ background:var(--route); color:var(--ink); } } .chan-menu{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30; background:var(--paper); border:1px solid var(--ink); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity var(--t-menu) var(--ease-out), transform var(--t-menu) var(--ease-out), visibility 0s linear var(--t-menu); } .chan-menu.open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity var(--t-menu) var(--ease-out), transform var(--t-menu) var(--ease-out); } @media (prefers-reduced-motion: reduce){ .chan-menu{ transition:opacity var(--t-tap) var(--ease-soft), visibility 0s linear var(--t-tap); transform:none; } .chan-menu.open{ transition:opacity var(--t-tap) var(--ease-soft); } .chan-pick svg{ transition:none; } } .chan-slider{ display:flex; gap:8px; padding:10px; overflow-x:auto; scroll-snap-type:x proximity; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--ink) transparent; } .chan-slider::-webkit-scrollbar{ height:6px; } .chan-slider::-webkit-scrollbar-thumb{ background:var(--ink); } .chan-option{ flex:none; width:96px; scroll-snap-align:center; cursor:pointer; display:grid; gap:8px; justify-items:center; padding:14px 6px; background:var(--paper); border:1px solid var(--ink); color:var(--ink); font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; text-align:center; } .chan-option svg{ width:22px; height:22px; } .chan-option[aria-checked="true"]{ background:var(--ink); color:var(--paper); } @media (hover:hover) and (pointer:fine){ .chan-option:not([aria-checked="true"]):hover{ background:rgba(23,21,18,.08); } } .chan-option:focus-visible{ outline:2px solid var(--route); outline-offset:-4px; } /* Тот же выбор канала, но для окна «Карта для заведения»: ряд кнопок, который переносится по ширине окна, без прокрутки и без раскрывающегося меню. Лента с прокруткой оправдана в форме заказа, где рядом стоит длинная простыня полей; в окне на четыре поля она была бы механизмом сложнее самой задачи. Кнопки те же .chan-option — и вид, и разметка, и подпись общие: два разных вида одной и той же кнопки на одной странице пришлось бы держать согласованными вручную. */ .chan-simple{ display:flex; flex-wrap:wrap; gap:8px; } /* Кнопки НЕ растягиваются по остатку строки: их пять, в строку они встают четвёрками, и растянутая пятая читалась бы не «ещё один канал», а «главный». Ширина от подписи, минимум — под самую короткую. */ .chan-simple .chan-option{ width:auto; min-width:76px; flex:0 0 auto; padding:10px 10px; gap:6px; } .chan-simple .chan-option svg{ width:18px; height:18px; } /* Селектор с .field label обязателен: общее правило `.field label{display:block}` перебивало одиночный `.consent` по специфичности — чекбокс схлопывался в инлайн-спан шириной 4px, и от него оставался только текст. */ .field label.consent{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; margin-bottom:0; font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px; text-transform:none; letter-spacing:0; color:var(--ink); } .consent input{ position:absolute; opacity:0; width:1px; height:1px; } .consent-box{ flex:none; width:24px; height:24px; margin-top:-1px; border:2px solid var(--ink); background:var(--paper); position:relative; } .consent-box::after{ content:''; position:absolute; inset:4px; background:var(--ink); opacity:0; transition:opacity var(--t-press) var(--ease-soft); } .consent:hover .consent-box{ background:rgba(23,21,18,.07); } .consent input:checked + .consent-box::after{ opacity:1; } .consent input:focus-visible + .consent-box{ outline:2px solid var(--ink); outline-offset:3px; } .consent-text{ font-size:13px; font-weight:700; line-height:1.45; color:var(--ink); } /* Кнопка живёт внутри