/* * Разделы товара: описание текстом, остальное — за ссылками и в панели. * * Режим один на все устройства: выбора «вкладки или секции» больше нет, и * стилей аккордеона тоже. Типографика повторяет прежний ряд вкладок — те же * 12px, верхний регистр и разрядка. */ /* * Обёртка подменённого блока «Product details». * * Колонка товара — flex-контейнер с `align-items: flex-start`, поэтому её * дети по умолчанию сжимаются по содержимому (находка M-6 ревью). Метку на * обёртку ставит inc/content-blocks-render.php. */ .mit-cb-block { align-self: stretch; width: 100%; } /* ============================================================ * Режим шторки: ссылки в блоке покупки + панель сбоку * ============================================================ * * Механика взята у Zara: под кнопкой стоят ссылки «Size guide», * «Composition & Care», «Payments & Shipping», клик открывает панель сбоку. * Описание при этом остаётся текстом на странице — прятать за клик то, ради * чего покупатель пришёл, незачем. * * Вид — как у шторки фильтров каталога: те же притемнение, ширина, движение * и начало под шапкой. У Zara подложка почти не отличается от страницы, и * панель сливается с фоном; у нас эта беда уже решена, повторяем своё. * * Значения продублированы осознанно: шторка фильтров — модуль соседнего * трека (assets/css/catalog-filters.css, раздел 11), править его файлы этот * трек не может. Меняются они там — стоит свериться здесь. */ .mit-cb-inline { margin: 1.5rem 0 0; max-width: 65ch; } .mit-cb-inline__item > *:first-child { margin-top: 0; } .mit-cb-inline__item > *:last-child { margin-bottom: 0; } .mit-cb-links { list-style: none; margin: 2rem 0 0; padding: 0; } .mit-cb-links li + li { margin-top: 0.6rem; } .mit-cb-link { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; color: var(--wp--preset--color--contrast-3, #646970); } .mit-cb-link:hover, .mit-cb-link:focus-visible { color: var(--wp--preset--color--contrast, #111); } /* --- Без скрипта: разделы просто стоят текстом внизу страницы --- */ .mit-cb-drawer { margin: 2.5rem 0 0; } .mit-cb-drawer__head, .mit-cb-drawer__close { display: none; } .mit-cb-panel + .mit-cb-panel { margin-top: 2rem; } .mit-cb-panel__title { font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.75rem; } .mit-cb-panel__body { max-width: 65ch; } .mit-cb-panel__body > *:first-child { margin-top: 0; } /* --- Со скриптом: та же шторка, что в каталоге --- */ /* * ШТОРКА — МОДАЛЬНАЯ, И ЖИВЁТ В . * * Было: `inset: var(--header-h) 0 0 0` и `z-index: 90` — шторка начиналась * под шапкой и лежала ниже неё. Задумано это было честно (видно, откуда * взялась), но на живой странице разваливалось дважды, и оба раза не из-за * числа (находка B1 приёмки 17.08): * * 1. Липкий бар покупки — ребёнок ``, то есть в КОРНЕВОМ контексте * наложения, а шторка стояла в инфо-колонке карточки, и та липкая. * `position: sticky` заводит свой контекст сам по себе, без числа, — * значит `z-index: 90` шторки считался ВНУТРИ колонки и снаружи не * значил ничего. Бар закрывал текст шторки на обеих ширинах. * 2. Похожие товары идут в разметке ПОЗЖЕ инфо-колонки и на равном слое * («авто») побеждали её целиком — вместе со шторкой. * * Лечит это переезд в `` (его делает assets/js/content-blocks.js), а * слой лишь закрепляет результат: шторка стала модальной, притемнение идёт * на всю страницу, включая шапку (решение Bo 17.08). Отсюда `inset: 0` и * ступень --mit-z-modal вместо соревнования чисел с шапкой. * * `--header-h` этой шторке больше не нужна — одной зависимостью меньше. */ .mit-cb-drawer.is-js { position: fixed; inset: 0; margin: 0; z-index: var(--mit-z-modal, 9995); background-color: transparent; pointer-events: none; transition: background-color 0.5s; } .mit-cb-drawer.is-js.is-open { background-color: rgba(95, 95, 95, 0.35); pointer-events: auto; } .mit-cb-drawer.is-js .mit-cb-drawer__panel { position: absolute; inset: 0 0 0 auto; /* На телефоне панель во весь экран, на десктопе — узкая колонка. */ width: 100%; display: flex; flex-direction: column; background-color: var(--wp--preset--color--base, #fff); color: var(--wp--preset--color--contrast, #111); transform: translateX(100%); transition: transform 0.4s ease; } .mit-cb-drawer.is-js.is-open .mit-cb-drawer__panel { transform: translateX(0); } @media screen and (min-width: 782px) { .mit-cb-drawer.is-js .mit-cb-drawer__panel { width: 350px; max-width: 100%; } } /* * Фокус при открытии ставится на саму панель — иначе скринридер и клавиатура * остались бы на странице под шторкой. Кольцо фокуса на ней при этом рисовать * незачем: Safari показывает его синей полосой во всю высоту. У кнопок и * ссылок внутри свои кольца никуда не деваются. */ .mit-cb-drawer.is-js .mit-cb-drawer__panel:focus { outline: none; } .mit-cb-drawer.is-js .mit-cb-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; /* * Воздух сверху нужен и теперь, когда шторка начинается от края экрана, а * не под шапкой: заголовок с крестиком не должны липнуть к кромке. */ padding: 2rem 1.75rem 1.75rem; } /* * Заголовок раздела в шапке — настоящий

(находка L-8 ревью): раньше * видимым заголовком был , а h2 лежал внутри панели визуально скрытым. * Типографика прежняя, поэтому сбрасываем то, что тема даёт заголовкам. / .mit-cb-drawer.is-js .mit-cb-drawertitle { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.06em; } .mit-cb-drawer.is-js .mit-cb-drawerclose { display: block; border: 0; background: none; padding: 0.25rem; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; } .mit-cb-drawer.is-js .mit-cb-drawerbody { overflow-y: auto; / * Боковые поля свои, а не тематические `spacing--40`: в узкой панели те * съедали треть ширины и текст рассыпался на строки по три слова. / padding: 0 1.75rem 2.5rem; } / В шторке заголовок раздела уже стоит в её шапке. / .mit-cb-drawer.is-js .mit-cb-panel { display: none; margin: 0; } .mit-cb-drawer.is-js .mit-cb-panel.is-current { display: block; } / * Свой заголовок панели в шторке не нужен и не читается: тот же текст стоит * заголовком в шапке. Раньше он был «визуально скрыт» и потому звучал у * скринридера дважды; теперь убран из вывода целиком, а в разметке остаётся — * без скрипта именно он и есть видимый заголовок раздела. / .mit-cb-drawer.is-js .mit-cb-paneltitle { display: none; } / * Пока шторка открыта, страница под ней не скроллится. * * ТОЛЬКО , И ЭТО ВАЖНО. * * Корневой элемент отдаёт свой `overflow` вьюпорту — этого достаточно, чтобы * страница встала. А `overflow: hidden` на в придачу делает сам body * контейнером прокрутки, и липкая шапка (`position: sticky` в header.css) * начинает липнуть к его боксу вместо вьюпорта: на прокрученной странице она * уезжает вверх за экран, а на её месте — там, где шторка оставляет полосу * высотой `--header-h`, — видно текст страницы. Так и было в 1.43.0–1.45.0. * * Поле справа вместо исчезнувшей полосы прокрутки ставит скрипт. / html.mit-cb-drawer-open { overflow: hidden; } / * Врезка Product Details. * * Дом ей выбирает чётность набора кадров: чётному — пауза в фотосетке (её * печатает галерея), остальным — инфо-колонка, между описанием и ссылками * (её печатаем мы, inc/content-blocks-render.php). Отступ сверху у второго * дома берётся из `.uc-item-info .mit-details` соседнего трека — * своего не заводим, чтобы значение не разъехалось на два. * * Здесь только типографика: тот же лимит строки, что у описания, и снятые * крайние отступы, чтобы врезка не двоила воздух. / .mit-cb-details { max-width: 65ch; } / * Заголовок врезки — ровно как ссылки на панели: 12px, верхний регистр, та * же разрядка и тот же приглушённый цвет. Решение Bo — чтобы ряд читался * одним семейством подписей, а не двумя. * * `font-weight` задан явно: это `
`, и без него тема нарисовала бы его * жирным, чего у ссылок нет. / .mit-cb-details__title { margin: 0 0 0.6rem; font-size: 12px; font-weight: 400; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--contrast-3, #646970); } .mit-cb-details > :first-child { margin-top: 0; } .mit-cb-details > *:last-child { margin-bottom: 0; }