/* ==========================================================================
system.css — дизайн-система резиновых страниц Дона, классы ds-*
Источник: Figma TAFxb8e2b2vIpCzH7GdiOD, canvas 1273:30 «SALON_page».
Подключается на всех страницах последним стилем
(functions.php, wp_enqueue_scripts, приоритет PHP_INT_MAX). Поэтому:
- никаких правил для html, body, тегов и * — только классы ds-* и переменные на :root;
- элемент с ds-* классом не несёт старых классов оформления: старые глубокие селекторы
специфичнее и победят даже при загрузке последним. JS-хуки — id, data-*, js-*;
- специфичность плоская: .ds-x, .ds-x__el, .ds-x--mod, .ds-x.is-state, .ds-x > img;
единственная цепочка — элемент в состоянии блока: .ds-x.is-state .ds-x__el и .ds-x:hover .ds-x__el.
Без !important.
Размеры компонентов от ширины экрана не зависят, брейкпоинты меняют раскладку:
max-width: 499px и min-width: 800px, потолок ширины 1000px (ds-page__inner).
Roboto 600 из макета = 500 на сайте.
Иконки: …
*/
.ds-page {
padding: 10px 0;
background: var(--ds-color-page);
color: var(--ds-color-text);
font-family: var(--ds-font);
}
.ds-page__inner {
max-width: 1000px;
margin: 0 auto;
}
/* === 4. Текстовые стили =================================================== */
/* Текстовые стили. Высота строки одна на размер, нестандартные — внутри компонентов.
margin обнулён: вертикальный ритм задают gap раскладок. color/text-align/text-transform сброшены:
style.css красит и капсит h1–h3 глобально, а стили вешаются и на заголовки.
«Ржевский»
Все комнаты салона с душем
Из-за временных проблем со связью…
*/
.ds-text-h1,
.ds-text-h2,
.ds-text-h3,
.ds-text-lead,
.ds-text-ui,
.ds-text-body,
.ds-text-small,
.ds-text-note,
.ds-text-caption {
margin: 0;
color: inherit;
font-family: var(--ds-font);
font-style: normal;
text-align: inherit;
text-transform: none;
letter-spacing: normal;
}
/* style.css рисует h1:after (линия через заголовок) — у ds-заголовков декоративных псевдоэлементов нет */
:is(.ds-text-h1, .ds-text-h2, .ds-text-h3, .ds-text-lead, .ds-text-ui, .ds-text-body, .ds-text-small, .ds-text-note, .ds-text-caption)::before,
:is(.ds-text-h1, .ds-text-h2, .ds-text-h3, .ds-text-lead, .ds-text-ui, .ds-text-body, .ds-text-small, .ds-text-note, .ds-text-caption)::after {
content: none;
}
.ds-text-h1 { font-size: 30px; line-height: 35px; font-weight: 500; }
/* h2: Roboto сайта при 24/500 шире фигмовского на ~1.1% (2–4px на заголовок) — −0.15px возвращает ширины
макета; без этого «Расписание массажисток» (297) не влезает в 295 на 360 */
.ds-text-h2 { font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: -0.15px; }
.ds-text-h3 { font-size: 20px; line-height: 28px; font-weight: 500; }
.ds-text-lead { font-size: 18px; line-height: 28px; font-weight: 400; }
.ds-text-ui { font-size: 16px; line-height: 20px; font-weight: 400; }
.ds-text-body { font-size: 15px; line-height: 20px; font-weight: 300; }
.ds-text-small { font-size: 14px; line-height: 20px; font-weight: 300; }
.ds-text-note { font-size: 14px; line-height: 20px; font-weight: 300; font-style: italic; }
.ds-text-caption { font-size: 12px; line-height: 15px; font-weight: 400; }
/* === 5. Модификаторы текста =============================================== */
/* Модификаторы — ставятся вместе с текстовым стилем, объявлены после него.
показать еще 5 программ
1 час
*/
.ds-light { font-weight: 300; }
.ds-regular { font-weight: 400; }
.ds-medium { font-weight: 500; }
.ds-c-accent { color: var(--ds-color-accent); }
.ds-c-muted { color: var(--ds-color-muted); }
.ds-c-success { color: var(--ds-color-success); }
.ds-c-warning { color: var(--ds-color-warning); }
.ds-c-text-2 { color: var(--ds-color-text-2); }
.ds-c-text-3 { color: var(--ds-color-text-3); }
.ds-link {
color: var(--ds-color-accent);
text-decoration: underline dotted;
text-decoration-thickness: var(--ds-underline);
text-underline-offset: var(--ds-underline-offset);
cursor: pointer;
}
/* внешняя ссылка («перейти на сайт салона») в макете подчёркнута сплошной линией 1px на 1.5px ниже строки */
.ds-link--solid {
text-decoration-style: solid;
text-decoration-thickness: 1px;
text-underline-offset: 1.5px;
}
/* === 6. Раскладки и карточка ============================================== */
/* ds-stack / ds-row — колонка и строка с gap 10.
…
…
*/
.ds-stack {
display: flex;
flex-direction: column;
gap: var(--ds-space-10);
}
.ds-row {
display: flex;
align-items: center;
gap: var(--ds-space-10);
}
.ds-row--wrap {
flex-wrap: wrap;
}
.ds-row--between {
justify-content: space-between;
}
.ds-stack--gap-5,
.ds-row--gap-5 {
gap: var(--ds-space-5);
}
.ds-stack--gap-15 {
gap: var(--ds-space-15);
}
.ds-stack--gap-20,
.ds-row--gap-20 {
gap: var(--ds-space-20);
}
/* ds-cols — колонки страницы. От 800: основная (не уже 470) + боковая 320–360: боковая растёт первой, до 360.
Меньше 800: одна колонка,
__main и __side становятся display: contents — порядок секций задаёт страница через order.
*/
.ds-cols {
display: flex;
flex-direction: column;
gap: var(--ds-card-gap);
}
.ds-cols__main,
.ds-cols__side {
display: contents;
}
@media (min-width: 800px) {
.ds-cols {
display: grid;
grid-template-columns: minmax(470px, 1fr) minmax(320px, 360px);
align-items: start;
}
.ds-cols__main,
.ds-cols__side {
display: flex;
flex-direction: column;
gap: var(--ds-card-gap);
min-width: 0;
}
}
/* ds-card — белая карточка раздела: radius 20, padding 15, колонка с gap 10.
--bleed убирает боковой padding на <500 (галерея, горизонтальная прокрутка видео).
*/
.ds-card {
display: flex;
flex-direction: column;
gap: var(--ds-space-10);
min-width: 0;
padding: var(--ds-card-pad);
border-radius: var(--ds-radius-l);
background: var(--ds-color-surface);
}
.ds-card--gap-15 {
gap: var(--ds-space-15);
}
.ds-card--gap-20 {
gap: var(--ds-space-20);
}
@media (max-width: 499px) {
.ds-card--bleed {
padding-left: 0;
padding-right: 0;
}
}
/* === 7. Простые компоненты ================================================ */
/* ds-icon — иконка-маска, цвет берётся из color (currentColor). Размер 25, модификаторы --19 и --30.
Москва
Салоны эротического массажа
«Ржевский»
*/
.ds-crumbs {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
min-height: 20px;
margin: 0;
padding: 0 10px;
overflow-x: auto;
scrollbar-width: none;
list-style: none;
color: var(--ds-color-text-2);
font: 400 12px/15px Inter, var(--ds-font);
letter-spacing: -0.3px;
}
.ds-crumbs::-webkit-scrollbar {
display: none;
}
.ds-crumbs__item {
display: inline-flex;
flex: none;
align-items: center;
gap: 8px;
color: inherit;
white-space: nowrap;
text-decoration: none;
}
/* В крошках со schema.org __item — это li, ссылка внутри. */
.ds-crumbs__item > a {
color: inherit;
text-decoration: none;
}
.ds-crumbs__item + .ds-crumbs__item::before {
content: "";
flex: none;
width: 4px;
height: 6px;
background-color: currentColor;
-webkit-mask: url(/wp-content/themes/don/images/ds/crumb.svg) center / contain no-repeat;
mask: url(/wp-content/themes/don/images/ds/crumb.svg) center / contain no-repeat;
}
/* ds-btn — кнопка-обводка «Показать телефон» (из Figma 1503:1327).
--l — «Кнопка маршрута» (Figma 1507:1600): иконки по краям, текст в __text; тянется на ширину, но не шире 400.
Показать телефон
Построить маршрут
*/
.ds-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 40px;
padding: 0 10px;
border: var(--ds-border-bold) solid var(--ds-color-accent);
border-radius: var(--ds-radius-s);
background: transparent;
color: var(--ds-color-accent);
font: 500 16px/20px var(--ds-font);
text-align: center;
text-decoration: none;
cursor: pointer;
}
.ds-btn--l {
width: 100%;
max-width: 400px;
padding: 10px;
border-width: var(--ds-border);
border-radius: var(--ds-radius-m);
font-size: 18px;
line-height: 20px;
}
.ds-btn__text {
flex: 1 1 auto;
min-width: 0;
}
/* ds-more — «Кнопка показать еще» (Figma 1511:2954).
показать еще 5 программ
*/
.ds-more {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 10px 0;
border: 0;
background: none;
color: var(--ds-color-accent);
font: 500 15px/20px var(--ds-font);
text-decoration: none;
cursor: pointer;
}
.ds-more__text {
text-decoration: underline dotted;
text-decoration-thickness: var(--ds-underline);
text-underline-offset: var(--ds-underline-offset);
}
/* ds-plate — «Плашка» (Figma 1503:1417). --success: «Цены подтверждены»,
--neutral: «Внимание! Цены со слов администрации». Ведущая иконка берёт цвет плашки, __hint — всегда accent.
Цены подтверждены
*/
.ds-plate {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 15px;
border-radius: var(--ds-radius-l);
}
/* однострочный текст в макете — строка 25 по высоте иконок (20/25, на 360 16/25), двухстрочный — 20/24 (16/20):
min-height 25 и центровка дают оба случая без отдельной высоты строки */
.ds-plate__text {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 25px;
font: 500 20px/24px var(--ds-font);
text-align: center;
}
.ds-plate__hint {
color: var(--ds-color-accent);
cursor: pointer;
}
.ds-plate--success {
background: var(--ds-color-success-bg);
color: var(--ds-color-success);
}
.ds-plate--neutral {
background: var(--ds-color-surface);
color: var(--ds-color-text-3);
}
@media (max-width: 499px) {
.ds-plate {
padding: 10px 15px;
}
.ds-plate__text {
font-size: 16px;
line-height: 20px;
}
}
/* === 8. Составные компоненты ============================================== */
/* ds-section-head — «Заголовок раздела» (Figma 1503:1036).
Массажные программы
Все комнаты салона с душем
*/
.ds-feature {
display: flex;
align-items: center;
gap: 10px;
}
.ds-feature__icon {
display: block;
flex: none;
width: 45px;
height: 45px;
object-fit: contain;
}
.ds-feature__text {
flex: 1 1 auto;
min-width: 0;
font: 300 15px/20px var(--ds-font);
}
/* ds-price — «Блок цены и времени» (Figma 1507:2139).
5 500 руб.
1 час
*/
.ds-price {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 0;
}
.ds-price__value {
color: var(--ds-color-text);
font: 500 18px/28px var(--ds-font);
}
.ds-price__icon {
color: var(--ds-color-muted);
}
.ds-price__time {
color: var(--ds-color-muted);
font: 400 18px/28px var(--ds-font);
}
/* ds-program — «Свернутая программа» (Figma 1507:1747) / «Развернутая программа» (Figma 1507:2328).
Свёрнута: ряд иконок __icons. Раскрыта (.is-open, переключает JS страницы): список __items.
1.
Название программы
…
Состав массажной программы
*/
.ds-program {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 5px 0;
}
.ds-program__num {
flex: none;
width: 25px;
color: var(--ds-color-muted);
font: 400 18px/28px var(--ds-font);
}
.ds-program__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
.ds-program__name {
margin: 0;
color: var(--ds-color-accent);
font: 500 20px/28px var(--ds-font);
text-align: left;
text-transform: none;
letter-spacing: normal;
}
.ds-program__icons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 5px 0;
}
.ds-program__items {
display: none;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.ds-program__item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 5px 0;
}
/* однострочный пункт в макете — по центру иконки 40, многострочный — от верха (он выше иконки и растягивает строку) */
.ds-program__text {
flex: 1 1 auto;
align-self: center;
min-width: 0;
font: 300 15px/20px var(--ds-font);
}
.ds-program__toggle {
color: var(--ds-color-accent);
cursor: pointer;
}
.ds-program.is-open .ds-program__icons {
display: none;
}
.ds-program.is-open .ds-program__items {
display: flex;
}
.ds-program.is-open .ds-program__toggle {
--ds-icon: url(/wp-content/themes/don/images/ds/collapse.svg);
}
/* ds-addon — «Дополнение» (Figma 1512:3171).
Состав дополнения к массажной программе
2 500 руб.
*/
.ds-addon {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 10px;
padding-bottom: 10px;
}
.ds-addon__text {
flex: 1 1 0;
min-width: 0;
font: 300 15px/20px var(--ds-font);
}
.ds-addon__price {
flex: none;
font: 500 18px/28px var(--ds-font);
text-align: right;
}
/* === 9. Иконки ============================================================ */
/* Имена иконок. Figma-экземпляры, из которых выгружены SVG: .figma/salon-page/svg-icons/_instance_ids.json */
.ds-icon--question { --ds-icon: url(/wp-content/themes/don/images/ds/question.svg); }
.ds-icon--more { --ds-icon: url(/wp-content/themes/don/images/ds/more.svg); }
.ds-icon--expand { --ds-icon: url(/wp-content/themes/don/images/ds/expand.svg); }
.ds-icon--collapse { --ds-icon: url(/wp-content/themes/don/images/ds/collapse.svg); }
.ds-icon--time { --ds-icon: url(/wp-content/themes/don/images/ds/time.svg); }
.ds-icon--phone { --ds-icon: url(/wp-content/themes/don/images/ds/phone.svg); }
.ds-icon--pin { --ds-icon: url(/wp-content/themes/don/images/ds/pin.svg); }
.ds-icon--schedule { --ds-icon: url(/wp-content/themes/don/images/ds/schedule.svg); }
.ds-icon--site { --ds-icon: url(/wp-content/themes/don/images/ds/site.svg); }
.ds-icon--route { --ds-icon: url(/wp-content/themes/don/images/ds/route.svg); }
.ds-icon--prices-proof { --ds-icon: url(/wp-content/themes/don/images/ds/prices-proof.svg); }
.ds-icon--report { --ds-icon: url(/wp-content/themes/don/images/ds/report.svg); }
.ds-icon--crumb { --ds-icon: url(/wp-content/themes/don/images/ds/crumb.svg); }
/* === 10. Атрибут hidden =================================================== */
/* display у ds-* перебивает [hidden] браузера — возвращаем. Специфичность 0,2,0 выше компонентной.
…
*/
[class^="ds-"][hidden],
[class*=" ds-"][hidden] {
display: none;
}
/* === 11. Ховеры ============================================================ */
/* В макете ховеров нет — перенесены со старой страницы салона (style.css, ammi.js):
пунктирные ссылки и «показать ещё» теряют подчёркивание, кнопки-обводки и мессенджеры получают
светлую заливку, вопросик заливается, раскрывающаяся программа подсвечивается. */
.ds-link:hover,
.ds-filter__item:hover {
text-decoration-line: none;
}
/* «перейти на сайт салона»: в старой вёрстке подчёркнута и при наведении (style.css a:hover её не снимает) */
.ds-link--solid:hover {
text-decoration-line: underline;
}
.ds-more:hover .ds-more__text {
text-decoration-line: none;
}
.ds-crumbs__item > a:hover {
color: var(--ds-color-text);
}
.ds-btn:hover,
.ds-messengers__item:hover {
background: var(--ds-color-accent-soft);
}
.ds-messengers__item.is-disabled:hover {
background: var(--ds-color-surface);
}
.ds-icon--question:hover {
--ds-icon: url(/wp-content/themes/don/images/ds/question-hover.svg);
}
/* ds-program--toggle — программа с составом (раскрывается по клику): курсор и подсветка строки.
Поля 10 по бокам уходят в padding карточки, чтобы подсветка не прилипала к тексту и ничего не сдвигалось.
…
*/
.ds-program--toggle {
margin: 0 -10px;
padding: 5px 10px;
border-radius: var(--ds-radius-s);
cursor: pointer;
}
.ds-program--toggle:hover {
background: var(--ds-color-hover);
}
*/
.ds-logo {
display: block;
flex: none;
width: 50px;
height: 50px;
object-fit: cover;
}
/* ds-crumbs — «Крошки» (Figma 1503:994). Разделитель-шеврон рисует CSS. Шрифт Inter, как в макете
(@font-face — в style.css; без него — Roboto); Inter сайта шире фигмовского на ~4% — −0.3px возвращает ширины.
В макете крошки в одну строку (на 360 вылезают за фрейм на 3px) — не переносим, лишнее прокручивается.
*/
.ds-crumbs {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
min-height: 20px;
margin: 0;
padding: 0 10px;
overflow-x: auto;
scrollbar-width: none;
list-style: none;
color: var(--ds-color-text-2);
font: 400 12px/15px Inter, var(--ds-font);
letter-spacing: -0.3px;
}
.ds-crumbs::-webkit-scrollbar {
display: none;
}
.ds-crumbs__item {
display: inline-flex;
flex: none;
align-items: center;
gap: 8px;
color: inherit;
white-space: nowrap;
text-decoration: none;
}
/* В крошках со schema.org __item — это li, ссылка внутри. */
.ds-crumbs__item > a {
color: inherit;
text-decoration: none;
}
.ds-crumbs__item + .ds-crumbs__item::before {
content: "";
flex: none;
width: 4px;
height: 6px;
background-color: currentColor;
-webkit-mask: url(/wp-content/themes/don/images/ds/crumb.svg) center / contain no-repeat;
mask: url(/wp-content/themes/don/images/ds/crumb.svg) center / contain no-repeat;
}
/* ds-btn — кнопка-обводка «Показать телефон» (из Figma 1503:1327).
--l — «Кнопка маршрута» (Figma 1507:1600): иконки по краям, текст в __text; тянется на ширину, но не шире 400.
Показать телефон
Построить маршрут
*/
.ds-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 40px;
padding: 0 10px;
border: var(--ds-border-bold) solid var(--ds-color-accent);
border-radius: var(--ds-radius-s);
background: transparent;
color: var(--ds-color-accent);
font: 500 16px/20px var(--ds-font);
text-align: center;
text-decoration: none;
cursor: pointer;
}
.ds-btn--l {
width: 100%;
max-width: 400px;
padding: 10px;
border-width: var(--ds-border);
border-radius: var(--ds-radius-m);
font-size: 18px;
line-height: 20px;
}
.ds-btn__text {
flex: 1 1 auto;
min-width: 0;
}
/* ds-more — «Кнопка показать еще» (Figma 1511:2954).
*/
.ds-more {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 10px 0;
border: 0;
background: none;
color: var(--ds-color-accent);
font: 500 15px/20px var(--ds-font);
text-decoration: none;
cursor: pointer;
}
.ds-more__text {
text-decoration: underline dotted;
text-decoration-thickness: var(--ds-underline);
text-underline-offset: var(--ds-underline-offset);
}
/* ds-plate — «Плашка» (Figma 1503:1417). --success: «Цены подтверждены»,
--neutral: «Внимание! Цены со слов администрации». Ведущая иконка берёт цвет плашки, __hint — всегда accent.
Все комнаты салона с душем
