/* ═══════════════════════════════════════════════════════════════════════════ APSD 2.1.0 — ОБЩИЙ СТИЛЬ РАЗДЕЛА «ВЫКУП» (2026-07-28) Один файл на две поверхности: vykup.html (сайт) и lk-unified.html (кабинет и Telegram Mini App). Заведён после того, как шапку выкупа пришлось трижды догонять руками: одинаковый вид, живущий в двух файлах, расходится всегда. Правило: правку вносим ЗДЕСЬ. В HTML остаётся только разметка. Изоляция. Все селекторы вложены в `.by-scope` — имена вроде `.chip` и `.f-input` слишком общие, а в кабинете свой набор классов на все экраны. Без обёртки подключение файла перекрасило бы весь ЛК. · vykup.html — класс на : вся страница про выкуп · lk-unified.html — класс на контейнере формы выкупа, не выше Цвет раздела — бирюзовый (решение владельца 28.07): раздел должен узнаваться по цвету и заметно отличаться внутри ТГ-аппа. Синим остаётся ТОЛЬКО главное действие «Отправить заявку» — это сквозной цвет основного действия во всём продукте, и ломать его ради раздела неправильно. ═══════════════════════════════════════════════════════════════════════════ */ .by-scope { --by: #14B8A6; --by-l: #2DD4BF; --by-dim: rgba(20,184,166,.18); } /* ── Форма: две колонки — «квадратнее», меньше скролла ── */ .by-scope .form-wrap { max-width:980px; } /* Форма СВЕТЛЕЕ остальной страницы намеренно: тёмная карточка на тёмном фоне читается как ещё один информационный блок. Светлая подложка сама говорит «здесь надо действовать» — это единственное место страницы, где от человека что-то требуется. Тон держим в теме: белый с низкой альфой, не серый. */ .by-scope .bb-form { display:grid; grid-template-columns:1fr 1fr; column-gap:34px; align-content:start; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.17); border-radius:22px; padding:28px 30px; box-shadow:0 18px 50px rgba(0,0,0,.28); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } /* Экран «Заявка принята» несёт ОБА класса: bb-form (карточка) и bb-done (скрыт до отправки). Пока .bb-form жил в самой странице, специфичность была равной и порядок решал — .bb-done скрывал. После переезда в общий файл `.by-scope .bb-form` стал весомее одиночного `.bb-done`, display:grid победил display:none, и экран «Заявка принята» показывался ДО отправки. Оба правила должны жить в одном месте и с одним весом — поэтому .bb-done здесь, сразу после .bb-form. */ .by-scope .bb-done { display:none; text-align:center; padding:46px 32px; } .by-scope .bb-done.show { display:block; } .by-scope .f-col { min-width:0; } .by-scope .f-full { grid-column:1 / -1; } @media(max-width:820px){ .by-scope .bb-form{grid-template-columns:1fr; column-gap:0; padding:24px 18px} } /* Кабинет: колонка контента ~600px, две колонки в неё не помещаются — форма всегда в одну. На сайте двухколоночная раскладка остаётся: там ширина до 980. */ .by-scope.by-narrow .bb-form { grid-template-columns:1fr; column-gap:0; padding:22px 18px; } .by-scope .f-label { display:block; font-size:12.5px; font-weight:600; color:#D7DCE8; margin:18px 0 8px; } .by-scope .f-col > .f-label:first-child { margin-top:0; } @media(min-width:821px){ .by-scope .f-col + .f-col > .f-label:first-child { margin-top:0; } } .by-scope .f-label .req { color:var(--by-l); } .by-scope .chip-row { display:flex; flex-wrap:wrap; gap:8px; } .by-scope .chip-row input { position:absolute; opacity:0; pointer-events:none; } .by-scope .chip { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:8px 16px; border-radius:50px; border:1px solid rgba(255,255,255,.20); background:rgba(255,255,255,.07); color:var(--t2); font-size:13px; font-weight:600; cursor:pointer; transition:background .18s,color .18s,border-color .18s,box-shadow .18s; user-select:none; } .by-scope .chip svg { flex-shrink:0; } .by-scope .chip:hover { background:rgba(20,184,166,.14); } .by-scope .chip-row input:checked + .chip { background:var(--by-dim); border-color:rgba(20,184,166,.62); color:#fff; box-shadow:0 0 14px rgba(20,184,166,.28); } .by-scope .chip-row input:focus-visible + .chip { outline:2px solid var(--by-l); outline-offset:2px; } .by-scope .vy-slot { padding:9px 14px; border-radius:50px; font-size:13.5px; font-weight:600; line-height:1; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.20); color:var(--t2); cursor:pointer; transition:background .15s, border-color .15s, color .15s; } .by-scope .vy-slot:hover { border-color:rgba(20,184,166,.5); } .by-scope .vy-slot.on { background:var(--by-dim); border-color:rgba(20,184,166,.62); color:#fff; box-shadow:0 0 14px rgba(20,184,166,.28); } .by-scope .f-input, .by-scope .f-area { width:100%; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); border-radius:12px; padding:11px 14px; font-size:14px; color:var(--text); font-family:inherit; outline:none; transition:border-color .18s,box-shadow .18s; } .by-scope .f-input::placeholder, .by-scope .f-area::placeholder { color:#9AA3B4; } .by-scope .f-input:focus, .by-scope .f-area:focus { border-color:rgba(20,184,166,.65); box-shadow:0 0 0 3px rgba(20,184,166,.20); } .by-scope .f-area { min-height:84px; resize:vertical; line-height:1.55; } /* iOS: у input[type=date] собственная минимальная ширина, width:100% он игнорирует — поле вылезало за правую границу формы. Тот же приём уже применён в ЛК к .form-input. */ .by-scope input[type=date].f-input { -webkit-appearance:none; appearance:none; min-width:0; } .by-scope .f-two { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .by-scope .f-hint { font-size:11.5px; color:var(--t3); line-height:1.55; margin-top:7px; } .by-scope .f-hint.warn { color:var(--by-l); } /* ── Свёрнутое необязательное ── Комплект, запись на время и описание — не обязательны, но на телефоне занимали три блока из десяти. Прячем за строку-раскрывашку. ФОТО НЕ ПРЯЧЕМ намеренно: они ускоряют оценку, а спрятанное поле заполняют заметно реже — выгода дела важнее длины формы. На десктопе блок раскрыт (см. скрипт ниже): там места хватает. */ /* Раскрывашка ДОЛЖНА выглядеть как кнопка. Первая версия была строкой с линиями сверху и снизу — она читалась как разделитель разделов, и владелец не понял, что её можно открыть. Теперь это плашка в цвете раздела, со словом «Показать/Скрыть» и стрелкой: видно, что элемент интерактивен, и понятно, что произойдёт. */ .by-scope .f-more { margin:16px 0 4px; } .by-scope .f-more > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:12px 14px; border:1px solid rgba(20,184,166,.30); border-radius:12px; background:rgba(20,184,166,.08); font-size:13.5px; font-weight:700; color:#D7DCE8; transition:background .18s, border-color .18s; } .by-scope .f-more > summary:hover { background:rgba(20,184,166,.14); border-color:rgba(20,184,166,.45); } .by-scope .f-more > summary::-webkit-details-marker { display:none; } .by-scope .f-more > summary span { font-weight:400; color:var(--t2); opacity:.75; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Слово и стрелка — В КОНЦЕ строки, подпись слева. `::before` по умолчанию первый ребёнок флекса, поэтому «Скрыть» вылезало ПЕРЕД «Ещё детали»; `margin-left:auto` не спасал — при заполненной строке свободного места нет и auto равен нулю. Порядок задаём явно через order. */ .by-scope .f-more > summary::before { content:'Показать'; order:2; margin-left:auto; padding-left:10px; font-size:12.5px; font-weight:600; color:var(--by-l); } .by-scope .f-more[open] > summary::before { content:'Скрыть'; } .by-scope .f-more > summary::after { content:''; order:3; width:8px; height:8px; flex:none; border-right:2px solid var(--by-l); border-bottom:2px solid var(--by-l); transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s; } .by-scope .f-more[open] > summary::after { transform:rotate(225deg) translate(-2px,-2px); } .by-scope .f-more[open] > .f-more-in { padding:4px 2px 6px; } .by-scope .f-more-in { padding-bottom:6px; } .by-scope .f-more-in > .f-label:first-child { margin-top:0; } @media(min-width:821px){ .by-scope .f-more{border:none;margin:0} .by-scope .f-more > summary{display:none} } @media(max-width:820px){ /* Плотность: на десктопе воздух уместен, на телефоне он растягивал форму в простыню. */ .by-scope .f-label { margin:11px 0 6px; } .by-scope .chip { min-height:36px; padding:7px 13px; font-size:12.5px; } /* 92, а не 64: подсказка длиной 88 символов на узкой колонке разбивается на ТРИ строки (14px × 1.55 = 21.7 на строку + 22 внутренних отступа ≈ 87). Больше десктопных 84 — и это не ошибка: там поле вдвое шире и тот же текст ложится в две строки. Поле живёт внутри свёрнутого блока, на длину формы не влияет. */ .by-scope .f-area { min-height:92px; } .by-scope .ph-add, .by-scope .ph-thumb { width:64px; height:64px; } /* Имя и телефон остаются в две колонки: оба поля короткие и рядом помещаются. */ .by-scope .f-two { grid-template-columns:1fr 1fr; gap:10px; } } /* Фото */ .by-scope .ph-row { display:flex; flex-wrap:wrap; gap:10px; } .by-scope .ph-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:72px; height:72px; border-radius:12px; border:1.5px dashed rgba(255,255,255,.28); background:rgba(255,255,255,.06); color:var(--t2); font-size:10.5px; font-weight:600; cursor:pointer; transition:border-color .18s,background .18s; } .by-scope .ph-add:hover { border-color:rgba(20,184,166,.55); background:rgba(20,184,166,.10); } .by-scope .ph-thumb { position:relative; width:72px; height:72px; border-radius:12px; overflow:hidden; border:1px solid var(--border2); } .by-scope .ph-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .by-scope .ph-del { position:absolute; top:5px; right:5px; width:24px; height:24px; border-radius:50%; border:none; background:rgba(0,0,0,.65); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; } .by-scope .ph-del svg { width:13px; height:13px; } .by-scope .f-submit { margin-top:24px; width:100%; padding:14px; font-size:15px; } .by-scope .f-err { display:none; margin-top:14px; font-size:13px; color:#FCA5A5; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); border-radius:12px; padding:11px 14px; line-height:1.5; } .by-scope .f-err.show { display:block; }