/* Отзывы: блок на карточке товара, «Мои отзывы», правила, согласие, очередь * модерации в админке (модуль 7). * * ⚠ АРТБОРДОВ ЭТИХ ЭКРАНОВ В МАКЕТЕ НЕТ. Ровно та же история, что с кабинетом * покупателя: в экспортах Claude Design только витрина, админка и дозаказ. * Поэтому файл сделан по образцу `account.css` - значения СНЯТЫ ЗАМЕРОМ с * живой витрины (панель фильтров каталога, плитка товара, панель 404, кнопка * «В корзину»), а не подобраны на глаз. Откуда что взято - помечено у блока. * * ⛔ В `custom.css` сессия 10 не пишет НИ ОДНОЙ СТРОКИ: файл принадлежит * сессиям 1 и 2 (визуал ПК и телефона), и правка его отсюда - это ровно тот * конфликт, ради которого заведены зоны. Стили отзывов живут своим файлом и * подключаются: витринные страницы - через `head_extra` базового шаблона, * блок карточки и экран модерации - ссылкой внутри самого блока (до * чужой страницы им не дотянуться). * * РАЗМЕТКА ОДНА на десктоп и телефон, ширины разводит медиазапрос. Две копии * формы в DOM (как в артбордах макета) дали бы два поля с одним именем в * каждой форме и два автофокуса. * * Токены объявлены здесь же, в :root, и повторяют палитру `account.css`: ни в * `storefront.css` (его пишет конвейер), ни в `custom.css` переменных палитры * нет вовсе. Когда они появятся в общем месте, блок :root ниже заменяется * одной строкой. * * Префиксы классов: `rv-` и `rv__` - витрина, `rvp-` и `rvp__` - текстовые * страницы (правила, согласие, «Мои отзывы»), `rvm-` - админка. Разведены * намеренно: у панели управления своя палитра и свой каркас, и общий класс * однажды перекрасил бы один экран цветами другого. */ :root { /* Палитра ровно та, что стоит инлайном в артбордах Design. */ --rv-bg: #FFEBF2; /* подложка страницы */ --rv-surface: #FFF8FB; /* панели, карточки, поля */ --rv-accent: #EE7598; /* кнопки, активные состояния */ --rv-accent-dark: #C9436E; /* ссылки, активная вкладка, звёзды */ --rv-text: #2E1D25; --rv-muted: #8A7079; /* подписи, вторичное, юртексты */ --rv-line: #FFD6E4; /* разделители, «мягкий» фон */ /* Тени. Замер: article[data-slug] и aside каталога дают одну и ту же пару, кнопка «В корзину» - свою розовую. */ --rv-shadow: 8px 8px 20px rgba(206, 140, 166, .28), -8px -8px 20px rgba(255, 255, 255, .9); --rv-shadow-sm: 6px 6px 16px rgba(206, 140, 166, .28), -6px -6px 16px rgba(255, 255, 255, .9); /* Поле поиска в шапке: вдавленная поверхность. */ --rv-inset: inset 5px 5px 12px rgba(206, 140, 166, .30), inset -5px -5px 12px rgba(255, 255, 255, .95); /* Чекбокс фильтра и бейдж «Нет в наличии»: та же вдавленность помельче. Ею же показывается нажатие пластилиновой кнопки. */ --rv-inset-sm: inset 3px 3px 8px rgba(206, 140, 166, .28), inset -3px -3px 8px rgba(255, 255, 255, .95); /* Наведение на плитку товара (класс scp57cffe из storefront.css). */ --rv-shadow-up: 12px 14px 30px rgba(206, 140, 166, .36), -8px -8px 20px rgba(255, 255, 255, .9); --rv-accent-shadow: 6px 6px 16px rgba(238, 117, 152, .45); /* Скругления: 28 панель, 24 малая карточка, 18 поле, 999 кнопки. */ --rv-r: 28px; --rv-r-sm: 24px; --rv-r-xs: 18px; /* ШРИФТ БЛОКА - СИСТЕМНЫЙ ГРОТЕСК, И В ЗАГОЛОВКАХ, И В ТЕКСТЕ. * * Правка Павла 30.08 по скриншоту: «шрифт сделай нормальным, как в * описании», и на ПК, и на телефоне. Было Playfair Display в заголовках и * PT Serif в тексте, из-за чего блок читался отдельной страницей внутри * карточки, а не её частью. * * Тот же ход, что 29.08 на плитках каталога и на мобильной карточке: * Playfair это витринная антиква, хороша в крупных заголовках страницы, а * в мелком тексте с засечками читается тяжело. Стек взят дословно из * `custom.css`, чтобы блок и описание товара совпадали буква в букву. * * Правка одна на оба артборда: они подключают этот же файл. */ --rv-title-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --rv-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --rv-mono-font: 'PT Mono', monospace; } /* ════════════════════════════════════════════════════════════════════════ БЛОК НА КАРТОЧКЕ ТОВАРА ════════════════════════════════════════════════════════════════════════ */ .rv { /* Ширину и боковые поля даёт .site-col карточки: блок вставляется внутрь её колонки и своей ширины не заводит. */ margin: 44px 0 10px; font-family: var(--rv-text-font); color: var(--rv-text); font-size: 17px; line-height: 1.62; } /* ── Шапка блока: средняя, число, разбивка ─────────────────────────────── */ .rv__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 40px; margin-bottom: 22px; } /* Заголовок блока - h2, а не h1: на карточке товара h1 уже занят названием. */ .rv__title { font-family: var(--rv-title-font); font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; margin: 0; flex: 1 1 260px; } .rv__score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .rv__avg { font-family: var(--rv-title-font); font-size: 40px; font-weight: 900; line-height: 1; color: var(--rv-accent-dark); } .rv__stars { color: var(--rv-accent); letter-spacing: .08em; } .rv__count { font-family: var(--rv-mono-font); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rv-muted); } /* Разбивка по звёздам. Пять строк рисуются ВСЕГДА, включая пустые: полоска на нуле показывает, что единиц у товара нет, а пропущенная строка выглядит спрятанной. */ .rv__bars { list-style: none; margin: 0; padding: 0; flex: 0 1 260px; display: grid; gap: 6px; } .rv__bar { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 10px; font-family: var(--rv-mono-font); font-size: 11px; color: var(--rv-muted); } .rv__bar-label { color: var(--rv-accent-dark); } .rv__bar-track { height: 8px; border-radius: 999px; background: var(--rv-line); box-shadow: var(--rv-inset); overflow: hidden; } .rv__bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--rv-accent); } .rv__bar-num { text-align: right; } /* ── Плашки ответа сервера ─────────────────────────────────────────────── */ .rv__note { margin: 0 0 18px; padding: 14px 18px; border-radius: var(--rv-r-xs); background: var(--rv-surface); box-shadow: var(--rv-shadow-sm); font-size: 16px; } .rv__note--ok { border-left: 4px solid var(--rv-accent); } .rv__note--bad { border-left: 4px solid var(--rv-accent-dark); } /* ── Фильтры. Замер ряда сортировки каталога: чипы-пилюли 999px ─────────── */ .rv__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .rv__chip { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; background: var(--rv-surface); box-shadow: var(--rv-shadow-sm); color: var(--rv-text); font-family: var(--rv-mono-font); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: .14s; } .rv__chip:hover { color: var(--rv-accent-dark); } .rv__chip--on { background: var(--rv-accent); color: #fff; box-shadow: var(--rv-accent-shadow); } .rv__chip--on:hover { color: #fff; } /* ── Список отзывов ────────────────────────────────────────────────────── */ .rv__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 16px; } .rv__item { background: var(--rv-surface); border-radius: var(--rv-r-sm); box-shadow: var(--rv-shadow); padding: 22px 24px; } .rv__item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; } .rv__author { font-weight: 700; } /* Знак «Покупал здесь» ставит система по выполненному заказу. Вручную он не проставляется и не снимается - об этом прямо сказано в правилах. */ .rv__badge { font-family: var(--rv-mono-font); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--rv-accent-dark); background: var(--rv-line); border-radius: 999px; padding: 4px 12px; } .rv__rate { color: var(--rv-accent); letter-spacing: .06em; } /* Незакрашенные звёзды бледные, а не другой символ: два разных глифа в одной строке расходятся по ширине и «съезжают» при разных шрифтах. */ .rv__rate-off { color: var(--rv-line); } .rv__date { margin-left: auto; font-family: var(--rv-mono-font); font-size: 11px; color: var(--rv-muted); } .rv__text { margin: 0; /* Переносы строк автора сохраняются: отзыв часто пишут списком. */ white-space: pre-line; } .rv__photos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .rv__photo { width: 108px; height: 108px; object-fit: cover; border-radius: var(--rv-r-xs); box-shadow: var(--rv-shadow-sm); background: var(--rv-bg); } /* Ответ магазина: вложенная плашка, чтобы её нельзя было принять за отзыв другого покупателя. */ .rv__reply { margin-top: 14px; padding: 14px 18px; border-radius: var(--rv-r-xs); background: var(--rv-bg); } .rv__reply-who { display: block; font-family: var(--rv-mono-font); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--rv-accent-dark); margin-bottom: 6px; } .rv__reply-text { margin: 0; white-space: pre-line; } .rv__more { margin: 0 0 14px; } /* «Показаны все N опубликованных отзывов» плюс ссылка на правила. Обещание не прятать негатив, проверяемое глазами. */ .rv__all { margin: 0 0 28px; font-family: var(--rv-mono-font); font-size: 11px; letter-spacing: .06em; color: var(--rv-muted); } .rv__all a, .rv__legal a, .rv__empty-note a { color: var(--rv-accent-dark); } /* Зона под палец у строчных ссылок: 44 точки по высоте. Отступ, а не накладка `::after`: накладку режет любой предок с overflow (грабли соседей в custom.css). У строчного элемента вертикальный отступ строки не двигает, только расширяет коробку нажатия. Числа: контент строки плюс отступы. .rv__empty-note: шрифт 16, замер 21 (сессия 2, 31.08.2026) -> 21 + 24 = 45. .rv__all: моно 11, контент около 14 -> 14 + 32 = 46; вверх выходит на 14, ровно в нижний отступ кнопки «Показать ещё», её не перехватывает. .rv__legal a НЕ трогаем: ссылка стоит сразу под подписью согласия, и зона вверх перехватывала бы нажатия по тексту у галочки. */ .rv__empty-note a { padding: 12px 0; } .rv__all a { padding: 16px 0; } /* ── Пусто. Ни нулей, ни пустых звёзд ──────────────────────────────────── */ /* Текст по центру карточки, а не прижат к левому краю (правка Павла 30.08). Панель во всю ширину колонки, а внутри две короткие строки: слева они читались как обрезанный абзац, у которого потерялось продолжение. */ .rv__empty { background: var(--rv-surface); border-radius: var(--rv-r); box-shadow: var(--rv-shadow); padding: 38px 28px; margin-bottom: 24px; text-align: center; } .rv__empty-title { font-family: var(--rv-title-font); font-size: 26px; font-weight: 900; margin: 0 0 8px; } .rv__empty-note { margin: 0; color: var(--rv-muted); font-size: 16px; } /* ── Окно «Правила публикации» ─────────────────────────────────────────── */ .rv__modal { width: min(720px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 0; border: 0; border-radius: var(--rv-r); background: var(--rv-surface); color: var(--rv-text); /* Окно рисует браузер поверх всего, но шрифт наследуется от страницы, а у артборда он свой. Задаём явно, иначе окно уедет на витринную антикву. */ font-family: var(--rv-text-font); font-size: 16px; box-shadow: 0 30px 60px rgba(120, 60, 85, .35); /* Обрезаем по скруглению. Без этого полоса прокрутки рисовалась у края САМОГО окна, снаружи закруглённого угла, отдельным серым столбиком (правка Павла 30.08 по скриншоту). Прокручивается тело, окно - никогда. */ overflow: hidden; } .rv__modal::backdrop { background: rgba(60, 25, 40, .45); } /* Колонка ТОЛЬКО у открытого окна: закрытый `` держится на `display: none`, и безусловный `display: flex` показывал бы его всегда. Прокручивается тело, а не всё окно: иначе на узком экране заголовок в три строки съедал полокна, а текст уезжал под шапку (поймано на телефоне 30.08). `min-height: 0` обязателен - без него флекс-ребёнок не сжимается ниже своего содержимого и прокрутка не включается. */ .rv__modal[open] { display: flex; flex-direction: column; } .rv__modal-head { flex: none; display: flex; align-items: center; gap: 16px; padding: 22px 26px 14px; background: var(--rv-surface); border-bottom: 1px solid rgba(201, 67, 110, .16); } .rv__modal-title { flex: 1 1 auto; margin: 0; font-family: var(--rv-title-font); font-size: 22px; font-weight: 800; } .rv__modal-x { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--rv-bg); color: var(--rv-text); font-size: 22px; line-height: 1; cursor: pointer; } .rv__modal-x:hover { background: var(--rv-accent); color: #fff; } .rv__modal-x:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; } .rv__modal-body { flex: 1 1 auto; min-height: 0; padding: 6px 26px 26px; overflow: auto; /* Докрутили документ до конца - страница за окном не едет следом. */ overscroll-behavior: contain; } /* ── Полосы прокрутки в цвет сайта ────────────────────────────────────── * * Правка Павла 30.08: системная серая полоса выбивалась из магазина. * Значения ТЕ ЖЕ, что у ленты миниатюр на карточке товара (`custom.css`, * раздел про колонку миниатюр): своей палитры не заводим, иначе на одной * странице будет две разные полосы. * * Два набора правил, потому что стандарта пока два: `scrollbar-*` понимают * Firefox и свежие Chrome, `::-webkit-scrollbar` - Safari и Chrome. Кто не * понял ни того ни другого, покажет системную полосу, и это не поломка. */ .rv__modal-body, .rv .rv__photos, .rv .rv__text { scrollbar-width: thin; scrollbar-color: rgba(201, 67, 110, .35) transparent; } .rv__modal-body::-webkit-scrollbar, .rv .rv__photos::-webkit-scrollbar, .rv .rv__text::-webkit-scrollbar { width: 5px; height: 5px; } .rv__modal-body::-webkit-scrollbar-track, .rv .rv__photos::-webkit-scrollbar-track, .rv .rv__text::-webkit-scrollbar-track { background: transparent; } .rv__modal-body::-webkit-scrollbar-thumb, .rv .rv__photos::-webkit-scrollbar-thumb, .rv .rv__text::-webkit-scrollbar-thumb { background: rgba(201, 67, 110, .35); border-radius: 999px; } .rv__modal-body::-webkit-scrollbar-thumb:hover, .rv .rv__photos::-webkit-scrollbar-thumb:hover, .rv .rv__text::-webkit-scrollbar-thumb:hover { background: rgba(201, 67, 110, .55); } .rv__modal-load { margin: 12px 0; color: var(--rv-muted); } /* Текст правил внутри окна: разметка та же, что на странице, поэтому на нём висит и `rvp__doc` - панель с фоном, тенью и полями в 40 пикселей. Внутри окна это карточка в карточке и лишняя рамка вокруг текста, снимаем. */ .rv__modal .rv__modal-doc { background: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0; max-width: none; } /* Заголовки документа тут мельче, чем на странице: заголовок окна уже стоит в шапке, и вторая крупная строка спорила бы с ним. */ .rv__modal-doc h2 { font-family: var(--rv-title-font); font-size: 18px; margin: 22px 0 8px; } .rv__modal-doc p, .rv__modal-doc li { line-height: 1.55; } .rv__modal-doc a { color: var(--rv-accent-dark); } /* ── Форма ─────────────────────────────────────────────────────────────── */ /* Форма закрыта до нажатия (правка Павла 30.08): раскрытая, она занимала на карточке больше места, чем сам товар, а нужна единицам из ста. Собрано на `
`, поэтому работает без скрипта; сам `` оформлен кнопкой магазина, а не системным треугольником. */ .rv__form-box { margin-top: 18px; } .rv__form-open { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; /* треугольник Firefox */ /* Двойной клик по кнопке иначе выделяет её подпись синей полосой: по `summary` часто щёлкают дважды, пока не поймут, что открылось. */ -webkit-user-select: none; user-select: none; min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--rv-accent); color: #fff; font-family: var(--rv-mono-font); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; box-shadow: var(--rv-accent-shadow); transition: .14s; } /* Треугольник Safari и Chrome. Своей стрелки не рисуем: кнопка и так говорит, что будет дальше, а стрелка на кнопке читается как «свернуть». */ .rv__form-open::-webkit-details-marker { display: none; } .rv__form-open::marker { content: ""; } .rv__form-open:hover { background: var(--rv-accent-dark); } .rv__form-open:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 3px; } /* Открытая форма: кнопка становится её заголовком, а не кнопкой. Иначе на экране две одинаковые розовые кнопки, «Оставить отзыв» и «Отправить отзыв», и непонятно, какая из них отправляет. */ .rv__form-box[open] > .rv__form-open { display: block; min-height: 0; background: transparent; color: var(--rv-text); box-shadow: none; padding: 0 0 14px; font-family: var(--rv-title-font); font-size: 26px; font-weight: 700; letter-spacing: normal; text-transform: none; } .rv__form { background: var(--rv-surface); border-radius: var(--rv-r); box-shadow: var(--rv-shadow); padding: 28px; } .rv__form-title { font-family: var(--rv-title-font); font-size: 26px; font-weight: 900; margin: 0 0 16px; } /* Требования к фотографиям: свёрнуты, разворачиваются одним нажатием. Текст юридический и дословный, сокращать его нельзя, но три абзаца подряд над формой читались как договор, и их переставали читать вовсе. */ .rv__rules { margin: 4px 0 18px; } .rv__rules > summary { cursor: pointer; color: var(--rv-muted); font-family: var(--rv-mono-font); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .rv__rules > summary:hover { color: var(--rv-accent); } .rv__rules > summary:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; } .rv__rules[open] > summary { margin-bottom: 10px; } .rv__own { margin: 0 0 18px; padding: 14px 18px; border-radius: var(--rv-r-xs); background: var(--rv-bg); font-size: 16px; } .rv__own a { color: var(--rv-accent-dark); } /* Оценка радиокнопками: работает без JavaScript, с клавиатуры и в читалке. */ .rv__rating { border: 0; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .rv__rating legend { padding: 0; margin-bottom: 8px; font-family: var(--rv-mono-font); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rv-muted); } .rv__star { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--rv-bg); cursor: pointer; color: var(--rv-accent-dark); font-family: var(--rv-mono-font); font-size: 13px; } .rv__star:hover { box-shadow: var(--rv-shadow-sm); } .rv__field { display: block; margin-bottom: 16px; font-family: var(--rv-mono-font); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rv-muted); } .rv__field textarea, .rv__field input[type="file"] { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 14px 16px; border: 0; border-radius: var(--rv-r-xs); background: var(--rv-bg); box-shadow: var(--rv-inset); font-family: var(--rv-text-font); font-size: 16px; letter-spacing: normal; text-transform: none; color: var(--rv-text); resize: vertical; } /* ── Выбор фотографий: пластилиновая кнопка вместо родной ────────────────── * * Стандартная «Выбрать файлы / Файл не выбран» выбивалась из оформления * магазина (Павел 30.08). Заменяется НЕ скриптом, а парой «спрятанное поле * плюс настоящий