/* * Страницы магазина: доставка, гарантия, оферта, политика, пользовательское * соглашение и сведения о продавце — и экран, где их правят. Один файл на обе * стороны: правила у них зеркальные (колонка текста там, поле текста здесь), и * разъехавшись по двум файлам они разъедутся и по виду. * * ⚠ ФАЙЛ ГРУЗЯТ ДВЕ СТРАНИЦЫ С ОДНИМ КЛАССОМ `.spages`, поэтому половины * разделены приставками, и снимать их нельзя: витрина — `.shop .spages` * (класс `shop` стоит на магазина), кабинет — `.spages--cab`. Без * приставок правила витрины красили бы форму правки, а токенов витрины * (--sh-*) в кабинете нет вовсе — вместо цвета вышла бы пустота. * * ⚠ Своих цветов нет, только токены: витрина красится арендатором в «Шаблоне * витрины», кабинет — светлой и тёмной схемой. Зашитый здесь синий остался бы * синим у обоих. */ /* ─────────────────────────── витрина ─────────────────────────── */ /* * ⚠ Страница шире КОЛОНКИ ТЕКСТА, и это не противоречие: справа от текста * стоит оглавление. Сама колонка остаётся узкой — оферта, растянутая на все * 1440 пикселей витрины, читается строками в двести знаков, и глаз теряет * начало следующей. Здесь читают сплошняком, а не разглядывают плитки. */ .shop .spages { max-width: 1108px; /* * ⚠ ВЫСОТА ЛИПКОЙ ШАПКИ ВИТРИНЫ — одним числом на весь блок. Под неё * равняются и липкое оглавление сбоку, и прыжок из оглавления к * заголовку. Пока чисел было три, они разошлись с самой шапкой, и * ломалось это МОЛЧА: браузер честно прокручивал к метке, а заголовок * оказывался ПОД шапкой — человек нажимал «7. Гарантия» и видел * середину седьмого пункта. * * ⚠ Число с ЗАПАСОМ, и запас здесь не вкусовщина. Высота шапки зависит * от данных арендатора: длинное название магазина переносит значки на * вторую строку. Замеры витрины texnoline: 125 точек шире 900, 166 от * 520 до 900 и 218 уже 430. Недобор прячет заголовок совсем, перебор * лишь опускает его ниже — поэтому берём верхнюю границу. */ --sp-stick: 140px; } /* Заголовок и кнопка файла — одной строкой, кнопка прижата к правому краю. */ .shop .spages__top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 18px; } .shop .spages__what { min-width: 0; } .shop .spages h1 { font-size: 26px; margin: 0 0 6px; } /* Дата редакции и юрлицо: мелко, серым — они важны, но читают не их. */ .shop .spages__when { margin: 0; font-size: 12px; color: var(--sh-muted); } /* * Кнопка «Скачать PDF». * * ⚠ Обводкой, а не синей заливкой. Главное действие этой страницы — ЧИТАТЬ: * ради этого документ и вынесли из файла на страницу. Яркая кнопка над первым * абзацем звала бы уйти со страницы, толком её не открыв, — то есть вернула бы * ровно то, от чего уходили. */ .shop .spages__pdf { display: inline-block; padding: 10px 18px; border: 1px solid var(--sh-line); border-radius: 8px; background: var(--sh-card); color: var(--sh-ink); font-size: 14px; font-weight: 600; white-space: nowrap; } .shop .spages__pdf:hover { text-decoration: none; border-color: var(--sh-blue); color: var(--sh-blue); } /* * Текст и оглавление рядом. * * ⚠ Колонка оглавления фиксированной ширины, а тянется колонка текста. Список * разделов — это указатель, а не содержимое: растянувшись вместе с текстом, он * отобрал бы у документа треть ширины на пустоту справа от коротких строк. * * ⚠ `minmax(0, 1fr)`, а не `1fr`. Иначе длинная строка внутри текста (адрес, * номер счёта без пробелов) раздувает колонку сверх сетки, и страница едет * вбок — на телефоне это выглядит как поломка вёрстки. */ .shop .spages__grid { display: grid; grid-template-columns: minmax(0, 1fr) 298px; align-items: start; gap: 20px 50px; } .shop .spages__fold, .shop .spages__text, .shop .spages__take { grid-column: 1; } /* * ⚠ Оглавление липкое. Документ длинный, и список разделов, уехавший вверх * вместе с первым экраном, перестаёт быть навигацией ровно там, где она нужна. * Отступ сверху — высота липкой шапки витрины: без него список уехал бы ПОД неё. * * ⚠ Своя прокрутка обязательна. У оферты тринадцать разделов, и у соседнего * арендатора их может быть втрое больше: без `overflow` длинный список * обрезался бы окном без всякой возможности добраться до конца. */ .shop .spages__side { grid-column: 2; grid-row: 1; position: sticky; top: var(--sp-stick); max-height: calc(100vh - var(--sp-stick) - 24px); overflow: auto; padding: 16px 14px; background: var(--sh-card); border: .8px solid var(--sh-line); border-radius: var(--sh-radius); } .shop .spages__sidehead { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-muted); } .shop .spages__toc { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; } .shop .spages__toc li + li { margin-top: 2px; } .shop .spages__toc a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--sh-ink); } .shop .spages__toc a:hover { text-decoration: none; background: var(--sh-soft); color: var(--sh-blue); } /* Другие документы — синим: это уход со страницы, а не переход внутри неё. */ .shop .spages__near { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sh-line); font-size: 13px; } .shop .spages__near a { color: var(--sh-blue); } /* * Свёрнутое оглавление для узкого экрана. Вид описан здесь, а показ включается * в медиазапросе ниже: правила оформления не должны лежать внутри условия — * иначе первая же правка отступа сделается только для телефона. * * ⚠ На широком экране этот блок спрятан, а не удалён: `

` невозможно * раскрыть силами CSS, а раскрывать его скриптом на странице договора нельзя — * она обязана читаться и там, где скрипт не выполнился. Поэтому список * разделов печатается дважды из одной строки разметки, и показывает нужный * ширина окна. */ .shop .spages__fold { display: none; margin-bottom: 14px; padding: 12px 16px; background: var(--sh-card); border: .8px solid var(--sh-line); border-radius: var(--sh-radius); } .shop .spages__fold summary { cursor: pointer; font-size: 14px; font-weight: 600; } .shop .spages__fold[open] summary { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--sh-line); } /* * ⚠ Внутренности красим ПО ТЕГАМ, а не по классам. Разметку собирает * `Legal::html()` — общий разбор текста на весь продукт, — и классы у неё свои * (`legal__head`, `legal__list`) из стилей лендинга, которых на витрине нет. * Правила по тегам переживут смену этих имён. */ .shop .spages__text { background: var(--sh-card); border: .8px solid var(--sh-line); border-radius: var(--sh-radius); padding: 26px 30px; font-size: 15px; line-height: 1.75; color: var(--sh-ink); } .shop .spages__text p { margin: 0 0 13px; } .shop .spages__text h2 { margin: 26px 0 9px; font-size: 17px; } .shop .spages__text h2:first-child { margin-top: 0; } .shop .spages__text ul { margin: 0 0 13px; padding-left: 20px; } .shop .spages__text li { margin-bottom: 4px; } .shop .spages__text > :last-child { margin-bottom: 0; } /* * ⚠ Отступ прокрутки у заголовка. Шапка витрины липкая, и без него переход из * оглавления ставит начало раздела ровно ПОД неё: человек нажимает «7. * Гарантия» и видит середину седьмого пункта, решив, что ссылка кривая. * Само число — общее с липким оглавлением, см. `--sp-stick` выше. */ .shop .spages__text h2 { scroll-margin-top: var(--sp-stick); } /* «Тот же документ одним файлом» — повтор кнопки для дочитавшего до конца. */ .shop .spages__take { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 4px; padding: 18px 22px; background: var(--sh-card); border: .8px solid var(--sh-line); border-radius: var(--sh-radius); } .shop .spages__take b { font-size: 15px; } .shop .spages__take span { flex: 1; min-width: 220px; font-size: 13px; color: var(--sh-muted); } /* Соседние условия покупки — строкой внутри отказа. */ .shop .spages__more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 18px 0 0; font-size: 13px; color: var(--sh-muted); } .shop .spages__more a { color: var(--sh-blue); } /* Отказ: та же карточка `.empty` из shop.css, но в колонку — как в списках покупателя. */ .shop .spages__none { display: flex; flex-direction: column; align-items: center; gap: 8px; } .shop .spages__none span { max-width: 520px; font-size: 14px; } .shop .spages__none .pcard__go { margin-top: 8px; padding: 12px 24px; } .shop .spages__none .spages__more { justify-content: center; } @media (max-width: 900px) { /* Колонки сбоку больше нет — незачем и ширина под неё. */ .shop .spages { max-width: 860px; } .shop .spages__grid { display: block; } .shop .spages__side { position: static; max-height: none; overflow: visible; } .shop .spages__wide { display: none; } .shop .spages__fold { display: block; } .shop .spages__text { padding: 18px 16px; } .shop .spages__take { margin-top: 14px; padding: 16px; } .shop .spages__near { margin-top: 18px; } /* ⚠ Шапка на узком экране разъезжается на три строки и вырастает со 125 точек до 218 — отступ растёт вместе с ней. Прежние 140 были МЕНЬШЕ шапки: на телефоне переход из оглавления прятал заголовок целиком. */ .shop .spages { --sp-stick: 232px; } } /* ─────────────────── сведения о продавце ─────────────────── */ /* * Страница /prodavec/ — таблица реквизитов и плитки документов. * * ⚠ Живёт в этом же файле, а не в своём. Она из той же семьи, что и правовые * страницы: те же карточка, рамка и кегли, и та же причина существовать — * покупатель выясняет, с кем имеет дело. Разъехавшись по двум файлам, они * разъедутся и по виду. */ .shop .prodav { max-width: 900px; } .shop .prodav h1 { font-size: 26px; margin: 0 0 6px; } .shop .prodav__lead { margin: 0 0 16px; max-width: 70ch; font-size: 13px; line-height: 1.6; color: var(--sh-muted); } .shop .prodav__card { background: var(--sh-card); border: .8px solid var(--sh-line); border-radius: var(--sh-radius); padding: 4px 22px; } .shop .prodav__row { display: flex; gap: 24px; padding: 14px 0; border-top: 1px solid var(--sh-line); } .shop .prodav__row:first-child { border-top: 0; } .shop .prodav__key { flex: 0 0 220px; padding-top: 2px; font-size: 13px; color: var(--sh-muted); } /* * ⚠ `overflow-wrap: anywhere` обязателен. Расчётный счёт — это двадцать цифр * без единого пробела, а название банка бывает в одно длинное слово: на экране * в 375 точек такая строка не переносится нигде и уезжает за край, утаскивая * за собой всю страницу. «Страница не едет вбок» держится ровно на этой строке. */ .shop .prodav__val { min-width: 0; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; } .shop .prodav__head { margin: 30px 0 6px; font-size: 19px; } /* Плитки документов: столько в ряд, сколько влезло. */ .shop .prodav__docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; } .shop .prodav__doc { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--sh-card); border: .8px solid var(--sh-line); border-radius: var(--sh-radius); } .shop .prodav__doc b { font-size: 14px; line-height: 1.35; } .shop .prodav__doc > span { font-size: 12px; color: var(--sh-muted); } /* ⚠ `margin-top: auto` прижимает кнопки ко дну: у «Публичной оферты» название в одну строку, у «Политики обработки данных» — в две, и без этого кнопки в соседних плитках стояли бы на разной высоте. */ .shop .prodav__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; } .shop .prodav__acts a { padding: 7px 14px; border: 1px solid var(--sh-line); border-radius: 8px; font-size: 13px; color: var(--sh-ink); } .shop .prodav__acts a:hover { text-decoration: none; border-color: var(--sh-blue); color: var(--sh-blue); } .shop .prodav__none { display: flex; flex-direction: column; align-items: center; gap: 10px; } .shop .prodav__none span { max-width: 520px; font-size: 14px; } @media (max-width: 700px) { /* ⚠ Подпись поля встаёт НАД значением, а не слева от него: колонка в 220 точек на узком экране оставила бы счёту меньше половины ширины. */ .shop .prodav__card { padding: 4px 16px; } .shop .prodav__row { display: block; padding: 12px 0; } .shop .prodav__key { margin-bottom: 3px; padding-top: 0; } } /* ─────────────────────────── кабинет ─────────────────────────── */ .spages--cab .top { margin-bottom: 16px; } .spages--cab .top h1 { margin: 0 0 4px; font-size: 22px; } .spages--cab .lead { margin: 0; max-width: 78ch; font-size: 13px; color: var(--muted); line-height: 1.6; } .spages--cab .spages__msg { max-width: 860px; margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius); font-size: 13px; } .spages--cab .spages__msg--ok { background: var(--ok-bg); color: var(--ok); } .spages--cab .spages__msg--bad { background: var(--danger-bg); color: var(--danger); } .spages--cab .spages__msg a { color: inherit; } /* * Блок страницы. Раскрывается сам, без скриптов: `

` умеет это с * рождения, а четыре куска текста по три экрана каждый нельзя показывать * одновременно — экран правки превратился бы в свиток. */ .spages--cab .spages__one { max-width: 860px; margin-bottom: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; } .spages--cab .spages__one[open] { border-color: var(--accent); } /* * ⚠ У

не трогаем `display`: `flex` в браузерах на Chromium убирает * штатный треугольник раскрытия, и пришлось бы рисовать свой. Строку собирает * вложенный `.spages__sum`. */ .spages--cab .spages__one summary { padding: 14px 18px; cursor: pointer; } .spages--cab .spages__sum { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .spages--cab .spages__name { font-size: 15px; font-weight: 600; color: var(--ink); } /* Заполнена или нет — видно с закрытым блоком: ради этого ответа сюда и заходят. */ .spages--cab .spages__mark { padding: 2px 8px; border-radius: 999px; font-size: 12px; } .spages--cab .spages__mark--on { background: var(--ok-bg); color: var(--ok); } .spages--cab .spages__mark--off { background: var(--page); color: var(--muted); } .spages--cab .spages__addr { font-size: 12px; color: var(--muted); } .spages--cab .spages__body { padding: 14px 18px 18px; border-top: 1px solid var(--line); } .spages--cab .spages__what { margin: 0 0 6px; font-size: 13px; color: var(--muted); } .spages--cab .spages__list { margin: 0 0 16px; padding-left: 18px; font-size: 13px; color: var(--muted); line-height: 1.6; } .spages--cab .spages__list li { margin-bottom: 3px; } .spages--cab .spages__field { margin-bottom: 14px; } .spages--cab .spages__title { width: 100%; max-width: 420px; } /* * Поле текста ровным шрифтом: в нём считают отступы и пустые строки, а * пропорциональный шрифт прячет и то и другое. Тянется только вниз — вширь * ему некуда, а перетянутое вбок поле ломает раскладку блока. */ .spages--cab .spages__area { width: 100%; min-height: 320px; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; } .spages--cab .spages__note { margin: 0; max-width: 78ch; font-size: 12px; color: var(--muted); line-height: 1.6; } .spages--cab .spages__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .spages--cab .spages__when { font-size: 12px; color: var(--muted); } .spages--cab .spages__foot { max-width: 860px; margin: 18px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }