/** * sdPricing — блок тарифов. Шорткод [sd_pricing]. * * Специфичность: каждое правило префиксовано блоком. Плагин ставится и на * sellerdata.kz, где тема заранее неизвестна, а на sellerdata.ru тема makro * тянет Bootstrap — поэтому таблице нужен явный сброс. Префикса хватает против * всего, кроме одного: тема объявляет `th { padding-right: 10px !important }`, * а important специфичностью не перебивается. Ровно одно правило в этом файле * отвечает !important на !important, и оно подписано. * * Единственное исключение из префикса — подсказки (.sdPricing__tip): в запасной * ветке JS переносит их в , и потомком блока они там уже не являются. * Подробности — у самих правил. * * Внутри блока действует своё правило: селектор ячейки обязан нести `th.` или * `td.`, потому что общий сброс `… th, … td` весит 0-2-1 и содержит `border: 0`. * Правило в один класс (0-2-0) проигрывает ему целиком и молча не применяется — * на этом уже потерялись все рамки карточек. * * Две вещи, которые здесь не украшательство: * * 1. border-collapse: separate. При collapse границы принадлежат таблице, а не * ячейке, и липкая первая колонка уезжает от собственных границ — по краю * идут сквозные щели. Это главная причина, по которой липкие колонки * «не работают». * 2. overscroll-behavior-x: contain на скролл-области. Без него горизонтальный * свайп до правого края вызывает в iOS Safari жест «назад». * * Адаптив — container queries, а не media queries: блок могут вставить в узкую * колонку, и правило по ширине вьюпорта соврало бы. */ .sdPricing { --_sdPricing-accent: #4154f1; --_sdPricing-accentDark: #3a31ed; --_sdPricing-text: #1b2559; --_sdPricing-muted: #3c4257; --_sdPricing-border: #e3e9f3; --_sdPricing-borderStrong: #c9d4e8; --_sdPricing-surface: #ffffff; --_sdPricing-surfaceAlt: #f8fbff; --_sdPricing-surfaceAccent: #f4f6ff; --_sdPricing-labelWidth: 220px; --_sdPricing-colMin: 190px; --_sdPricing-colGap: 12px; --_sdPricing-radius: 16px; --_sdPricing-cellPadX: 16px; --_sdPricing-cellPadY: 14px; /* * Страховка на случай, когда блок вставили в секцию без контейнера: тогда * таблица растянулась бы во всю ширину окна и разъехалась с остальной * страницей. Если родитель уже ограничен (обычная секция Elementor) — * правило не срабатывает вовсе. */ --_sdPricing-maxWidth: 1200px; max-width: var(--_sdPricing-maxWidth); margin-inline: auto; /* Число колонок тарифов приходит инлайном из шаблона: без него таблица не знает, с какой ширины ей начинать горизонтальный скролл. */ --_sdPricing-cols: 3; container-type: inline-size; color: var(--_sdPricing-text); } .sdPricing .sdPricing__srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%); } /* --- шапка ------------------------------------------------------------ */ .sdPricing .sdPricing__head { margin: 0 0 24px; text-align: center; } .sdPricing .sdPricing__kicker { margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--_sdPricing-accent); } .sdPricing .sdPricing__title { margin: 0; font-size: 36px; line-height: 1.2; font-weight: 700; color: var(--_sdPricing-text); } /* --- переключатель периодов ------------------------------------------- */ .sdPricing .sdPricing__periods { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: fit-content; margin: 0 auto 28px; padding: 4px; border: 1px solid var(--_sdPricing-border); border-radius: 999px; background: var(--_sdPricing-surface); } .sdPricing .sdPricing__period { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 20px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--_sdPricing-muted); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .sdPricing .sdPricing__period:hover { color: var(--_sdPricing-accent); } .sdPricing .sdPricing__period._isActive { background: var(--_sdPricing-accent); color: #ffffff; } /* Бейдж скидки раньше был загруженным SVG, привязанным по attachment ID — такой ID не переживает копирование папки плагина на другой сайт. Теперь это текст: переносится, выделяется, читается скринридером. */ .sdPricing .sdPricing__periodBadge { padding: 2px 8px; border-radius: 999px; background: #e8f6ee; font-size: 12px; font-weight: 700; line-height: 1.4; color: #1a8245; } .sdPricing .sdPricing__period._isActive .sdPricing__periodBadge { background: rgba(255, 255, 255, 0.22); color: #ffffff; } /* --- скролл-область ---------------------------------------------------- */ .sdPricing .sdPricing__scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 4px; /* * Тень липкой колонки подписей по умолчанию выключена. Она отделяет * колонку от того, что под неё уезжает, — а когда таблица помещается * целиком, уезжать нечему, и тень читается просто как грязная полоса * слева от первого тарифа. Включает её JS классом ._isScrollable. */ --_sdPricing-stickyShadow: transparent; } /* 0-3-0 — специфичность выше, чем у переопределения переменных в @container, поэтому порядок правил в файле здесь ничего не решает. */ .sdPricing .sdPricing__scroll._isScrollable { --_sdPricing-stickyShadow: rgba(27, 37, 89, 0.12); } /* * Своей обводки у скролл-области нет намеренно. Она обводила бы весь блок * целиком — рамка в пол-экрана вокруг всей таблицы, а не вокруг того, чем * управляешь. Точкой табуляции область остаётся (JS ставит tabindex, только * когда листать действительно есть что), так что с клавиатуры таблица * по-прежнему прокручивается стрелками; ориентиром служит сама поехавшая * таблица. */ .sdPricing .sdPricing__scroll:focus, .sdPricing .sdPricing__scroll:focus-visible { outline: none; } .sdPricing .sdPricing__hint { margin: 12px 0 0; font-size: 14px; text-align: center; color: var(--_sdPricing-muted); } /* --- таблица ----------------------------------------------------------- */ .sdPricing .sdPricing__table { /* separate — обязательно, см. шапку файла. */ border-collapse: separate; /* * Щели между колонками — это border-spacing, а не отступы ячеек: карточка * колонки собрана из боковых границ, и «отодвинуть» её паддингом нельзя, * граница уехала бы вместе с содержимым. * * Ширина ровно 100%: крайние щели (border-spacing добавляет их и перед * первой колонкой, и после последней) остаются ВНУТРИ. Вынести их наружу * отрицательными полями нельзя — таблица тогда торчит за край скролл-области * и та считает себя прокручиваемой даже на широком экране, со всеми * последствиями: подсказка «листайте таблицу» и лишняя точка табуляции. */ border-spacing: var(--_sdPricing-colGap) 0; width: 100%; margin: 0; /* fixed — чтобы ширины были предсказуемы: при auto колонка с самой длинной строкой забирает больше половины таблицы. */ table-layout: fixed; min-width: calc( var(--_sdPricing-labelWidth) + var(--_sdPricing-cols) * var(--_sdPricing-colMin) + (var(--_sdPricing-cols) + 1) * var(--_sdPricing-colGap) ); background: none; font-size: 15px; } .sdPricing .sdPricing__colLabels { width: var(--_sdPricing-labelWidth); } .sdPricing .sdPricing__table th, .sdPricing .sdPricing__table td { padding: var(--_sdPricing-cellPadY) var(--_sdPricing-cellPadX); border: 0; background: var(--_sdPricing-surface); vertical-align: middle; text-align: center; /* * Межстрочный задаём сами, иначе он приходит из темы (у makro это 1.75) и * в двухстрочной подписи промежуток между строками получается больше * отступов ячейки сверху и снизу — строка выглядит разорванной. */ line-height: 1.35; font-weight: 400; } /* * Единственный !important во всём файле, и он вынужденный: тема makro объявляет * `th { padding-right: 10px !important }` бесклассовым селектором * (wpd-style.css). Important-объявление специфичностью не перебивается в * принципе — ни префиксом блока, ни порядком подключения. Без этой строки у * шапок тарифов и у колонки подписей правый отступ 10px против левых 16px, и * центрированная цена стоит не по центру. */ .sdPricing .sdPricing__table th { padding-right: var(--_sdPricing-cellPadX) !important; } /* * Липкая колонка подписей. Фон непрозрачный и тень постоянная — иначе при * скролле сквозь неё просвечивают ячейки тарифов. * * Селектор с `th` не для красоты: правило выше (`.sdPricing .sdPricing__table th`) * весит 0-2-1 и центрирует текст, а `.sdPricing .sdPricing__feature` — только * 0-2-0, и выравнивание влево проигрывало бы. */ .sdPricing .sdPricing__table th.sdPricing__corner, .sdPricing .sdPricing__table th.sdPricing__feature { position: sticky; /* * Порог прилипания — НЕ 0, а ширина щели. * * border-spacing добавляет щель и ПЕРЕД первой колонкой, поэтому в * непрокрученной таблице ячейка подписи стоит не у края скролл-области, а * отступив от него ровно на colGap. С `left: 0` она сначала проезжала эти * colGap вместе со всей таблицей и только потом прилипала: замерено — * с 8px до 0 за первые 8px прокрутки. Выглядит это как рывок всей таблицы * влево в начале жеста. * * Порог, равный собственному отступу ячейки, означает «прилипла с самого * начала»: она уже стоит на пороге и не двигается никогда. */ left: var(--_sdPricing-colGap); z-index: 2; width: var(--_sdPricing-labelWidth); background: var(--_sdPricing-surfaceAlt); text-align: left; /* * Три тени, и порядок в списке — рабочий: что выше, то рисуется поверх. * * Первая — влево. Закрывает ту самую щель перед первой колонкой, на * которой теперь стоит порог прилипания: при прокрутке в этой полосе * оказываются уезжающие ячейки тарифов, и без заплатки они были бы видны * слева от замороженной колонки. Заодно подложка колонки подписей * доходит до края блока. * * Вторая — вправо, такая же сплошная копия ячейки, сдвинутая на щель: * закрашивает щель между подписями и первым тарифом. Без неё в щель при * скролле видно уезжающие ячейки. * * Третья — собственно тень. Смещена на ту же щель и БЕЗ отрицательного * spread: spread сжимает прямоугольник тени со всех сторон, в том числе * сверху и снизу, поэтому каждая ячейка отбрасывала тень короче себя — и * на стыках строк оставались просветы, тень выглядела пунктиром. Без * spread тень каждой ячейки ровно в её высоту, соседние смыкаются, полоса * идёт сплошной. Внутри щели её накрывает вторая тень, наружу выходит * только размытая кромка. Цвет приходит переменной и по умолчанию * прозрачен: см. .sdPricing__scroll. */ box-shadow: calc(-1 * var(--_sdPricing-colGap)) 0 0 0 var(--_sdPricing-surfaceAlt), var(--_sdPricing-colGap) 0 0 0 var(--_sdPricing-surfaceAlt), var(--_sdPricing-colGap) 0 8px 0 var(--_sdPricing-stickyShadow); } /* Тоже через `th`: сброс веса шрифта в общем правиле весит 0-2-1. */ .sdPricing .sdPricing__table th.sdPricing__feature { font-weight: 500; color: var(--_sdPricing-text); border-bottom: 1px solid var(--_sdPricing-border); } .sdPricing .sdPricing__table tbody tr:last-child .sdPricing__feature { border-bottom: 0; } /* * Иконка, подпись и значок подсказки — в ряд. Строчной раскладки не хватает: * в узкой колонке подписей (150px на телефоне) перенос ставил иконку одну на * первую строку, а текст уводил под неё. Flex-контейнер — это внутренний span, * а не сам : у ячейки display: flex ломает табличную раскладку строки. */ .sdPricing .sdPricing__featureBox { display: flex; align-items: center; gap: 8px; } .sdPricing .sdPricing__featureLabel { min-width: 0; } /* Иконка строки. fill: currentColor — цвет берётся от подписи, отдельной палитры у иконок нет. */ .sdPricing .sdPricing__featureIcon { flex: 0 0 auto; width: 16px; height: 16px; fill: currentColor; color: var(--_sdPricing-accent); } /* --- колонка тарифа как карточка --------------------------------------- */ /* * не умеет рисовать рамку, поэтому «карточка» собирается из боковых * границ ячеек: при separate и нулевом border-spacing они склеиваются в * сплошную стенку. * * Селекторы обязаны нести `th.` / `td.`, а не один класс. Общий сброс выше * (`.sdPricing .sdPricing__table th, … td`) весит 0-2-1 и содержит `border: 0` * — шорткенд, раскрывающийся во ВСЕ границы. Правило в один класс весит 0-2-0 * и проигрывает ему целиком: рамки, отступы и vertical-align молча не * применяются, а таблица выглядит голой сеткой. Та же ловушка, что и у липкой * колонки подписей ниже. */ .sdPricing .sdPricing__table th.sdPricing__tariff, .sdPricing .sdPricing__table td.sdPricing__cell { border-left: 1px solid var(--_sdPricing-border); border-right: 1px solid var(--_sdPricing-border); } .sdPricing .sdPricing__table th.sdPricing__tariff { padding: 24px var(--_sdPricing-cellPadX) 20px; border-top: 1px solid var(--_sdPricing-border); border-radius: var(--_sdPricing-radius) var(--_sdPricing-radius) 0 0; vertical-align: top; } .sdPricing .sdPricing__table td.sdPricing__cell { border-bottom: 1px solid var(--_sdPricing-border); color: var(--_sdPricing-muted); } .sdPricing .sdPricing__table tbody tr:last-child td.sdPricing__cell { border-bottom: 1px solid var(--_sdPricing-border); border-radius: 0 0 var(--_sdPricing-radius) var(--_sdPricing-radius); } /* * Выделенная колонка меняет цвет рамки и добавляет светлую заливку, а не * border-width: 2px — иначе более толстая рамка сдвинула бы вёрстку всех * остальных колонок на пиксель. Заливка, а не box-shadow: кольцо тени рисуется * вокруг КАЖДОЙ ячейки, и в колонке появлялись бы поперечные линии на каждой * строке вместо одной сплошной рамки. */ .sdPricing .sdPricing__table th.sdPricing__tariff._isHighlight, .sdPricing .sdPricing__table td.sdPricing__cell._isHighlight { border-left-color: var(--_sdPricing-accent); border-right-color: var(--_sdPricing-accent); background: var(--_sdPricing-surfaceAccent); } .sdPricing .sdPricing__table th.sdPricing__tariff._isHighlight { border-top-color: var(--_sdPricing-accent); } .sdPricing .sdPricing__table tbody tr:last-child td.sdPricing__cell._isHighlight { border-bottom-color: var(--_sdPricing-accent); } /* --- цены -------------------------------------------------------------- */ /* * Кегли шапки подобраны так, чтобы название тарифа и цена умещались в колонку * одной строкой. При 190px колонки и 26px цены «1 500 ₽ / мес» встаёт в строку * целиком; на прежних 32px строка ломалась пополам, и шапка росла на 40px, а * вместе с ней и вся таблица. */ .sdPricing .sdPricing__tariffName { display: block; margin-bottom: 10px; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--_sdPricing-text); } /* Отрисованы все периоды, видим только активный. Переключение — смена класса, без запроса на сервер и без поломки кнопки «назад». */ .sdPricing .sdPricing__price { display: none; } .sdPricing .sdPricing__price._isActive { display: block; } .sdPricing .sdPricing__priceOld { display: block; font-size: 14px; line-height: 1.4; color: var(--_sdPricing-muted); text-decoration: line-through; } .sdPricing .sdPricing__priceNow { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--_sdPricing-text); } /* Цена не задана: прочерк вместо «0 ₽». */ .sdPricing .sdPricing__priceNow._isEmpty { color: var(--_sdPricing-borderStrong); } .sdPricing .sdPricing__priceUnit { font-size: 14px; font-weight: 400; white-space: nowrap; color: var(--_sdPricing-muted); } .sdPricing .sdPricing__priceTotal { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--_sdPricing-muted); } /* --- значения ячеек ---------------------------------------------------- */ .sdPricing .sdPricing__mark { display: inline-block; width: 20px; height: 20px; vertical-align: middle; } .sdPricing .sdPricing__mark._isCheck { position: relative; } .sdPricing .sdPricing__mark._isCheck::before { content: ""; position: absolute; top: 3px; left: 6px; width: 6px; height: 12px; border-right: 2px solid var(--_sdPricing-accent); border-bottom: 2px solid var(--_sdPricing-accent); transform: rotate(45deg); } .sdPricing .sdPricing__mark._isNone::before { content: ""; display: block; width: 12px; height: 2px; margin: 9px auto; background: var(--_sdPricing-borderStrong); } /* --- тултип ------------------------------------------------------------ */ .sdPricing .sdPricing__tipBtn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 1px solid var(--_sdPricing-borderStrong); border-radius: 50%; background: none; font: inherit; font-size: 11px; font-style: italic; font-weight: 700; line-height: 1; color: var(--_sdPricing-muted); cursor: pointer; vertical-align: middle; } .sdPricing .sdPricing__tipBtn:hover, .sdPricing .sdPricing__tipBtn:focus-visible { border-color: var(--_sdPricing-accent); color: var(--_sdPricing-accent); } /* * Попапу нужен и селектор [popover], и класс: в браузерах без Popover API * атрибут ничего не значит, и элемент показывался бы всегда. Прячем его сами, * а JS-ветка отдаёт видимость через ._isOpen. * * Правила подсказки — единственные в файле БЕЗ префикса `.sdPricing`, и это * вынужденно: в запасной ветке JS переносит узел в (иначе его обрезает * скролл-область таблицы), и там `.sdPricing .sdPricing__tip` не совпало бы * ни с чем — подсказка осталась бы неоформленной. Плата за это — вес 0-1-0, * который тема может перебить; если такое случится, добавлять надо не префикс * блока, а второй класс тому же элементу. */ .sdPricing__tip { display: none; box-sizing: border-box; /* * Координаты ставит JS в обеих ветках: привязать попап к кнопке средствами * CSS умеет только anchor positioning, а он пока не везде. * * До того как JS посчитает координаты, оставляем UA-умолчание * `inset: 0; margin: auto` — попап по центру экрана. Это страховка на * случай, если JS не доехал: подсказка всё равно откроется и прочитается. * placeTip() сбрасывает inset в auto и ставит left/top от кнопки. */ position: fixed; inset: 0; max-width: 280px; max-height: fit-content; margin: auto; padding: 12px 14px; border: 1px solid var(--_sdPricing-border, #e3e9f3); border-radius: 10px; background: #ffffff; box-shadow: 0 8px 24px rgba(27, 37, 89, 0.16); font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left; color: #3c4257; } .sdPricing__tip:popover-open { display: block; } /* * Событие toggle у попапа асинхронное: браузер успевает показать элемент до * того, как JS посчитает координаты, и попап на кадр появляется там, где его * оставило прошлое открытие (замерено: 3124px против нужных 439px). Поэтому до * простановки координат он невидим — но только когда JS жив: класс _isManaged * ставит он сам, и без него подсказка остаётся видимой. */ .sdPricing__tip._isManaged:not(._isPlaced) { visibility: hidden; } /* Запасная ветка: верхнего слоя нет, поэтому нужен свой z-index. */ .sdPricing__tip._isFallback._isOpen { display: block; z-index: 10000; } /* --- CTA --------------------------------------------------------------- */ .sdPricing .sdPricing__cta { margin-top: 28px; text-align: center; } .sdPricing .sdPricing__ctaBtn { display: inline-block; padding: 14px 32px; border: 1px solid var(--_sdPricing-accent); border-radius: 8px; background: var(--_sdPricing-accent); font-size: 16px; font-weight: 600; line-height: 1.2; color: #ffffff; text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease; } .sdPricing .sdPricing__ctaBtn:hover, .sdPricing .sdPricing__ctaBtn:focus-visible { background: var(--_sdPricing-accentDark); border-color: var(--_sdPricing-accentDark); color: #ffffff; text-decoration: none; } .sdPricing .sdPricing__ctaNote { max-width: 520px; margin: 12px auto 0; font-size: 14px; line-height: 1.5; color: var(--_sdPricing-muted); } /* --- узкий контейнер ---------------------------------------------------- */ @container (max-width: 700px) { /* * Переменные переопределяем на .sdPricing__scroll, а НЕ на .sdPricing: * элемент с container-type сам себе контейнером не является, и правило для * .sdPricing внутри @container не применилось бы никогда. Ширины читают * таблица, и заголовочные ячейки — все они внутри скролл-области, * поэтому наследования достаточно. */ .sdPricing .sdPricing__scroll { --_sdPricing-labelWidth: 150px; --_sdPricing-colMin: 160px; /* Отступы ячеек — тоже переменной: правый отступ у th приходится ставить через !important (см. выше), и отдельное правило padding внутри @container с ним бы разошлось. */ --_sdPricing-cellPadX: 10px; --_sdPricing-cellPadY: 12px; /* Щели тоже уже: на узком экране каждые лишние 4px — это 4px, которые не достались колонке с ценой. */ --_sdPricing-colGap: 8px; } .sdPricing .sdPricing__title { font-size: 26px; } .sdPricing .sdPricing__table { font-size: 14px; } .sdPricing .sdPricing__tariffName { font-size: 16px; } .sdPricing .sdPricing__priceNow { font-size: 21px; } .sdPricing .sdPricing__period { padding: 8px 14px; font-size: 14px; } } /* --- телефон ------------------------------------------------------------- */ /* * Отдельный порог, уже табличного: три «пилюли» в ряд перестают помещаться * далеко не там, где таблице становится тесно. На 700px они ещё стоят строкой * нормально, а вот на телефоне переносятся вразнобой — вторая вкладка уезжает * вниз, третья остаётся наверху. */ @container (max-width: 520px) { /* * На телефоне карточки тарифов — без скруглений и без тени у колонки * подписей. Колонка шириной в 160px со скруглёнными углами и мягкой тенью * читается как набор мелких плашек, а не как таблица; прямые углы и чистая * граница собирают её обратно. * * Селектор продублирован с ._isScrollable намеренно: цвет тени задаётся * правилом .sdPricing .sdPricing__scroll._isScrollable (0-3-0), и правило * в один класс (0-2-0) ему проиграло бы. Здесь вес тот же, а порядок в * файле — ниже. * * Сплошные заплатки щелей (первая и вторая тени у липкой колонки) — не * украшение и остаются: без них в щели видно уезжающие ячейки. */ .sdPricing .sdPricing__scroll, .sdPricing .sdPricing__scroll._isScrollable { --_sdPricing-radius: 0; --_sdPricing-stickyShadow: transparent; } .sdPricing .sdPricing__periods { flex-direction: column; flex-wrap: nowrap; width: 100%; max-width: 320px; /* 999px на высоком блоке даёт полукруглые торцы — форма капсулы работает только на одной строке. */ border-radius: 14px; } .sdPricing .sdPricing__period { justify-content: center; width: 100%; border-radius: 10px; } }