/* ═══════════════════════════════════════════════════════════════════════════ Дизайн-система витрины (макет владельца Sissol_Article_PuV_PuGV, 2026-07-30). ЕДИНСТВЕННЫЙ источник токенов и компонентных классов. Шаблоны используют классы .ds-*, инлайновых стилей из макета в новых местах не появляется. Старые тела статей с инлайновыми стилями продолжают работать — этот файл их не трогает. ШРИФТЫ: в макете подключены Golos Text и IBM Plex Mono с fonts.googleapis.com. Внешние шрифты не подключаем: это два DNS+TLS-соединения и ~100 КБ на КАЖДОЙ странице, плюс перерисовка текста после загрузки (сдвиг вёрстки). Сейчас главная — 95 на мобильных при CLS 0; ради начертания это терять нельзя. Берём системные стеки: гротеск — тот же, что уже стоит на сайте, а роль «моноширинных подписей капсом с разрядкой» играет системный моношрифт. Рисунок макета держится не начертанием, а размером, капсом и разрядкой. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Поверхности и фон */ --ds-bg: #f4f4f1; /* фон страницы */ --ds-surface: #fff; /* карточки, таблицы */ --ds-surface-2: #fbfbf9; /* шапки таблиц, подложки полей */ --ds-surface-3: #eeeee8; /* плашки-заглушки под фото */ --ds-dark: #14151a; /* тёмные блоки и логотип */ /* Текст */ --ds-ink: #14151a; /* основной */ --ds-ink-2: #3f4147; /* абзацы */ --ds-ink-3: #4c4e54; /* вторичный текст */ --ds-ink-4: #6a6c73; /* подписи */ --ds-muted: #9a9ca1; /* приглушённые подписи, мета */ --ds-on-dark: #a9abb0; /* текст на тёмном */ /* Линии */ --ds-line: #ecece5; /* основная граница */ --ds-line-2: #e2e2dc; /* граница полей ввода */ --ds-line-3: #e7e7e1; /* разделители шапки/подвала */ --ds-line-soft: #f1f1ea; /* строки таблиц */ /* Акцент. На сайте primary-600 = #2563eb, в макете #1e46d6 — берём макет, оттенок тот же, разница только в глубине. */ --ds-accent: #1e46d6; --ds-accent-ink: #1b3fbe; /* нажатое/hover состояние */ --ds-accent-soft: #eaeefb; /* плашка под акцентным текстом */ --ds-accent-tint: #f2f5fd; /* врезка «обратите внимание» */ /* Статусы (карточки первоисточников в макете) */ --ds-ok-bg: #e8f3ec; --ds-ok-ink: #186b41; --ds-warn-bg: #fdf1e3; --ds-warn-ink: #96551a; --ds-warn-line: #f0e2cd; /* Скругления */ --ds-r-xs: 6px; --ds-r-sm: 10px; --ds-r-md: 12px; --ds-r-lg: 16px; --ds-r-xl: 18px; --ds-r-2xl: 22px; --ds-r-3xl: 24px; --ds-r-pill: 999px; /* Типографика */ --ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace; --ds-h1: 44px; --ds-h2: 31px; --ds-h3: 22px; --ds-text: 17px; --ds-small: 14.5px; /* Тени и переходы */ --ds-shadow-hover: 0 14px 32px rgba(20, 20, 30, .09); --ds-t: .18s ease; } /* Фон страницы. Класс на (layouts/base.njk), а не переопределение утилиты — чтобы не спорить со специфичностью Tailwind. */ /* Фон страницы вернули к прежнему (решение владельца 30.07): бежевый #f4f4f1 из макета в магазине читался как желтизна. Токен --ds-bg оставлен — он используется точечно в плашках и подложках, но всю страницу не красит. */ .ds-page { background: #f9fafb; color: var(--ds-ink); } /* ── Моноширинная подпись капсом с разрядкой ─────────────────────────────── */ .ds-label { font-family: var(--ds-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ds-muted); } .ds-label--accent { color: var(--ds-accent); } .ds-label--ink { color: var(--ds-ink-4); letter-spacing: .1em; } .ds-mono { font-family: var(--ds-font-mono); } /* ── Заголовки разделов ──────────────────────────────────────────────────── */ .ds-h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ds-ink); line-height: 1.15; margin: 0 0 18px; } .ds-sectionhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; } .ds-sectionhead__more { font-family: var(--ds-font-mono); font-size: 13px; color: var(--ds-accent); border-bottom: 1px solid currentColor; } @media (min-width: 900px) { .ds-h2 { font-size: var(--ds-h2); } } /* ── Карточки ────────────────────────────────────────────────────────────── */ .ds-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-xl); padding: 22px; } .ds-card--dark { background: var(--ds-dark); color: #fff; border-color: var(--ds-dark); } .ds-card--dark p, .ds-card--dark .ds-card__text { color: var(--ds-on-dark); } .ds-card--hover { transition: box-shadow var(--ds-t), transform var(--ds-t); } .ds-card--hover:hover { box-shadow: var(--ds-shadow-hover); transform: translateY(-3px); } /* Врезка-примечание */ .ds-note { background: var(--ds-surface); border: 1px solid #e4e4dd; border-radius: var(--ds-r-lg); padding: 22px 24px; } .ds-note__text { font-size: 15px; line-height: 1.6; color: var(--ds-ink-3); margin: 8px 0 0; } .ds-callout { background: var(--ds-accent-tint); border-radius: 14px; padding: 16px 20px; font-size: 15px; line-height: 1.55; color: var(--ds-ink-2); } /* Список строк: карточки в один столбец с волосяным зазором (макет: «практика монтажа», «частые ошибки», «нормативные документы»). */ .ds-rows { display: flex; flex-direction: column; gap: 2px; background: var(--ds-line); border: 1px solid var(--ds-line); border-radius: var(--ds-r-xl); overflow: hidden; } .ds-rows__item { background: var(--ds-surface); padding: 20px 24px; } .ds-rows__title { font-size: 16.5px; font-weight: 600; margin-bottom: 6px; color: var(--ds-ink); } .ds-rows__text { font-size: var(--ds-small); line-height: 1.55; color: #5b5d63; } /* ── Кнопки ──────────────────────────────────────────────────────────────── */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: var(--ds-r-pill); padding: 11px 20px; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; transition: background var(--ds-t), color var(--ds-t); } .ds-btn--accent { background: var(--ds-accent); color: #fff; } .ds-btn--accent:hover { background: var(--ds-accent-ink); color: #fff; } .ds-btn--dark { background: var(--ds-dark); color: #fff; } .ds-btn--dark:hover { background: #2a2c36; color: #fff; } .ds-btn--ghost { background: transparent; color: var(--ds-ink); border-color: var(--ds-line-2); } .ds-btn--ghost:hover { border-color: var(--ds-ink); } /* ── Плашки ──────────────────────────────────────────────────────────────── */ .ds-chip { display: inline-flex; align-items: center; background: var(--ds-accent-soft); color: var(--ds-accent); border-radius: var(--ds-r-pill); padding: 6px 14px; font-family: var(--ds-font-mono); font-size: 11.5px; letter-spacing: .05em; } .ds-chip--muted { background: #f4f4f1; color: var(--ds-ink-4); border: 1px solid var(--ds-line-3); } .ds-badge { font-family: var(--ds-font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--ds-r-xs); padding: 4px 9px; } .ds-badge--ok { background: var(--ds-ok-bg); color: var(--ds-ok-ink); } .ds-badge--warn { background: var(--ds-warn-bg); color: var(--ds-warn-ink); } /* ── Ссылка-стрелка ──────────────────────────────────────────────────────── */ .ds-arrow { font-family: var(--ds-font-mono); font-size: 12.5px; color: var(--ds-accent); } .ds-arrow:hover { color: var(--ds-accent-ink); } /* ── Заглушка под фото: точечная сетка из макета ─────────────────────────── */ .ds-dots { background-color: var(--ds-surface-3); background-image: radial-gradient(#dcdcd4 1.3px, transparent 1.3px); background-size: 11px 11px; border: 1px solid #e4e4dd; } /* ═══ Таблицы ══════════════════════════════════════════════════════════════ Один набор классов и для таблиц в теле статьи, и для таблиц на страницах: белая подложка со скруглением, прокрутка ВНУТРИ контейнера (страница вбок не едет), шапка на светлой подложке моноширинным капсом, тонкие разделители, первая колонка закреплена при прокрутке. */ .ds-tablewrap { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-xl); overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .ds-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ds-small); line-height: 1.5; color: var(--ds-ink-2); margin: 0; } .ds-table thead th { background: var(--ds-surface-2); font-family: var(--ds-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-ink-4); text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--ds-line); border-left: 1px solid var(--ds-line); white-space: nowrap; } .ds-table thead th:first-child { border-left: 0; } .ds-table tbody td, .ds-table tbody th { padding: 15px 18px; border-bottom: 1px solid var(--ds-line-soft); border-left: 1px solid var(--ds-line); vertical-align: top; text-align: left; font-weight: 400; } .ds-table tbody td:first-child, .ds-table tbody th:first-child { border-left: 0; } .ds-table tbody tr:last-child td, .ds-table tbody tr:last-child th { border-bottom: 0; } /* Закреплённая первая колонка: заголовок строки */ .ds-table th[scope="row"], .ds-table .ds-table__rowhead { position: sticky; left: 0; z-index: 2; background: var(--ds-surface-2); font-weight: 600; color: var(--ds-ink-2); min-width: 140px; } .ds-table thead .ds-table__rowhead, .ds-table thead th:first-child { z-index: 3; } .ds-table__num { font-family: var(--ds-font-mono); color: var(--ds-accent); font-weight: 600; } .ds-table__note { font-family: var(--ds-font-mono); font-size: 11.5px; color: #8a8c90; } @media (max-width: 640px) { .ds-table thead th { padding: 11px 12px; font-size: 10px; letter-spacing: .08em; } .ds-table tbody td, .ds-table tbody th { padding: 11px 12px; font-size: 13px; } .ds-table th[scope="row"], .ds-table .ds-table__rowhead { min-width: 112px; } } /* ── Тот же вид для таблиц, свёрстанных обычным в тексте ────────── Тела статей приходят из редактора голым HTML, класс на таблицу там не поставить, поэтому скин навешивается на .prose table. Раньше здесь была тёмно-синяя шапка из article.css — перекрываем, набор один на весь сайт. Сама таблица и есть контейнер прокрутки (display:block; overflow-x:auto): без этого не работает закреплённая первая колонка, а страница уезжала бы вбок на широких таблицах. */ .prose table:not(.art-cmp):not(.ab-table) { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: separate; border-spacing: 0; margin: 1.85rem 0; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-xl); font-size: var(--ds-small); line-height: 1.5; color: var(--ds-ink-2); white-space: normal; } .prose table:not(.art-cmp):not(.ab-table) thead th { background: var(--ds-surface-2); color: var(--ds-ink-4); font-family: var(--ds-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 14px 18px; vertical-align: bottom; border-bottom: 1px solid var(--ds-line); border-left: 1px solid var(--ds-line); } .prose table:not(.art-cmp):not(.ab-table) thead th:first-child { border-left: 0; } .prose table:not(.art-cmp):not(.ab-table) tbody td, .prose table:not(.art-cmp):not(.ab-table) tbody th { padding: 15px 18px; border-top: 0; border-bottom: 1px solid var(--ds-line-soft); border-left: 1px solid var(--ds-line); vertical-align: top; color: var(--ds-ink-2); text-align: left; } .prose table:not(.art-cmp):not(.ab-table) tbody td:first-child, .prose table:not(.art-cmp):not(.ab-table) tbody th:first-child { border-left: 0; } .prose table:not(.art-cmp):not(.ab-table) tbody tr:last-child td, .prose table:not(.art-cmp):not(.ab-table) tbody tr:last-child th { border-bottom: 0; } /* Полосатость и подсветка строки убраны: в макете строки различает только тонкий разделитель, а закреплённая колонка требует сплошной подложки. */ .prose table:not(.art-cmp):not(.ab-table) tbody tr:nth-child(even) { background: transparent; } .prose table:not(.art-cmp):not(.ab-table) tbody tr:hover { background: transparent; } /* Первая колонка закреплена при прокрутке вбок. Подложка непрозрачная — иначе под ней просвечивал бы уезжающий текст. */ .prose table:not(.art-cmp):not(.ab-table) tbody th[scope="row"], .prose table:not(.art-cmp):not(.ab-table) tbody tr > th:first-child { position: sticky; left: 0; z-index: 2; background: var(--ds-surface-2); font-weight: 600; color: var(--ds-ink-2); } .prose table:not(.art-cmp):not(.ab-table) thead tr > th:first-child { position: sticky; left: 0; z-index: 3; } .prose table:not(.art-cmp):not(.ab-table) a { color: var(--ds-accent); } @media (max-width: 640px) { .prose table:not(.art-cmp):not(.ab-table) thead th { padding: 11px 12px; font-size: 10px; letter-spacing: .08em; } .prose table:not(.art-cmp):not(.ab-table) tbody td, .prose table:not(.art-cmp):not(.ab-table) tbody th { padding: 11px 12px; font-size: 13px; } } /* Выход за меру текста на широких экранах сохраняем (было в article.css): широкие данные читаются лучше. */ @media (min-width: 1024px) { .prose table:not(.art-cmp):not(.ab-table) { width: calc(100% + 4rem); margin-left: -2rem; margin-right: -2rem; } } /* ═══ Карточка материала (список статей и «смежные материалы») ═════════════ */ .ds-postgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .ds-post { display: flex; flex-direction: column; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-xl); overflow: hidden; text-decoration: none; color: var(--ds-ink); transition: box-shadow var(--ds-t), transform var(--ds-t); } .ds-post:hover { box-shadow: var(--ds-shadow-hover); transform: translateY(-3px); color: var(--ds-ink); } .ds-post__media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ds-surface-3); border-bottom: 1px solid var(--ds-line); } .ds-post__media--empty { background-color: var(--ds-surface-3); background-image: radial-gradient(#dcdcd4 1.3px, transparent 1.3px); background-size: 11px 11px; } .ds-post__body { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; } .ds-post__tag { font-family: var(--ds-font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-accent); } .ds-post__tag--news { color: var(--ds-warn-ink); } .ds-post__title { font-size: 17px; font-weight: 600; line-height: 1.28; letter-spacing: -.01em; color: var(--ds-ink); margin: 0; } .ds-post__excerpt { font-size: 14px; line-height: 1.5; color: var(--ds-ink-4); margin: 0; flex: 1; } .ds-post__date { font-family: var(--ds-font-mono); font-size: 11px; color: var(--ds-muted); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ds-line-soft); } /* Фильтры списка материалов — пилюли из макета */ .ds-filters { display: flex; flex-wrap: wrap; gap: 8px; } .ds-filter { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ds-line-2); border-radius: var(--ds-r-pill); background: var(--ds-surface); color: var(--ds-ink-2); padding: 9px 16px; font-size: 14px; font-weight: 500; text-decoration: none; transition: background var(--ds-t), color var(--ds-t), border-color var(--ds-t); white-space: nowrap; } .ds-filter:hover { border-color: var(--ds-ink); color: var(--ds-ink); } .ds-filter__n { font-family: var(--ds-font-mono); font-size: 11.5px; color: var(--ds-muted); } .ds-filter.is-active { background: var(--ds-dark); border-color: var(--ds-dark); color: #fff; } .ds-filter.is-active .ds-filter__n { color: #8a8c90; } /* ═══ Верхняя строка шапки (телефон, почта, режим, языки) ══════════════════ */ .ds-topbar { background: var(--ds-bg); border-bottom: 1px solid var(--ds-line-3); font-family: var(--ds-font-mono); font-size: 12px; color: var(--ds-ink-4); } .ds-topbar a { color: var(--ds-ink-4); } .ds-topbar a:hover { color: var(--ds-accent); } .ds-topbar__strong { color: var(--ds-ink); font-weight: 500; } .ds-topbar__muted { color: var(--ds-muted); } /* ═══ Подвал: нижняя строка копирайта ══════════════════════════════════════ */ .ds-footnote { font-family: var(--ds-font-mono); font-size: 11.5px; color: var(--ds-muted); } /* Таблицы блоков (.ab-table) и сравнения серий (.art-cmp) из скина выше исключены: у них своя механика прокрутки и шапка с карточками товаров — капс и разрядка там испортили бы названия. Приводим только цвета к токенам, чтобы вид был из одной палитры. */ .prose .art-cmp thead th { background: var(--ds-surface-2); color: var(--ds-ink-4); } .prose .art-cmp thead .art-cmp__rowhead { background: var(--ds-surface-2); } .prose .art-cmp th, .prose .art-cmp td { border-right-color: var(--ds-line) !important; border-bottom-color: var(--ds-line) !important; } .art-cmp-scroll { border-color: var(--ds-line); border-radius: var(--ds-r-xl); } .prose .art-cmp .art-cmp__rowhead { background: var(--ds-surface-2); } .prose .art-cmp tbody tr:nth-child(even) .art-cmp__rowhead { background: var(--ds-surface-2); } .prose thead a.mark-link { color: var(--ds-accent); border-bottom-color: rgba(30,70,214,.4); } .art-card__meta { color: var(--ds-accent); } /* ═══ Карточка товара ══════════════════════════════════════════════════════ Один шаблон templates/partials/product-card.njk работает в каталоге, поиске, на бренде и в блоках статей — разметку не трогаем, меняем только скин, чтобы не задеть самые посещаемые страницы. Из макета берём: белая плашка со скруглением 14, тонкая тёплая граница, подъём с тенью на наведении вместо синей рамки, моноширинный артикул, акцентная кнопка-пилюля. */ .product-card { border: 1px solid var(--ds-line); border-radius: 14px; background: var(--ds-surface); overflow: hidden; transition: box-shadow var(--ds-t), transform var(--ds-t), border-color var(--ds-t); } .product-card:hover { border-color: var(--ds-line-2); box-shadow: var(--ds-shadow-hover); transform: translateY(-2px); } .product-card__img { padding: 10px; } .product-card__img img, .product-card__img .img-placeholder { border-radius: var(--ds-r-sm); } .product-card__body { padding: 8px 14px 14px; } .product-card__price { font-size: 19px; font-weight: 700; color: var(--ds-ink); letter-spacing: -.01em; } .product-card__price-na { color: var(--ds-muted); } .product-card__name { font-size: 12.5px; color: var(--ds-ink-2); } .product-card__name:hover { color: var(--ds-accent); } .product-card__brand { color: var(--ds-muted); } .product-card__sku { font-family: var(--ds-font-mono); } .product-card__footer { border-top: 1px solid var(--ds-line-soft); } /* Кнопки карточки товара оставлены стандартными (решение владельца 30.07): пилюля из макета в каталоге смотрелась чужеродно. Вид задаёт основной стиль сайта, здесь ничего не переопределяем. */ /* ═══ Шапка и подвал ═══════════════════════════════════════════════════════ Разметка шапки не переписывается: она есть на каждой странице и в ней живёт мегаменю, поиск и корзина. Из макета берём только скин — верхняя строка моноширинная (класс .ds-topbar на самой строке), под ней липкая белая полоса с тонкой тёплой границей, тёмная кнопка каталога и поиск-пилюля. */ .ds-headerbar { border-bottom-color: var(--ds-line-3); } #catalog-dropdown-btn { background: var(--ds-dark); border-radius: var(--ds-r-pill); } #catalog-dropdown-btn:hover { background: #2a2c36; } .ds-search { border-color: var(--ds-line-2); border-radius: var(--ds-r-pill); background: var(--ds-surface); color: var(--ds-ink); } .ds-search::placeholder { color: var(--ds-muted); } .ds-search:focus { border-color: var(--ds-accent); background: var(--ds-surface); } /* Подвал: тот же тёмный тон, что у блоков призыва в макете, вместо синего. */ footer.bg-primary-900 { background: var(--ds-dark); } footer.bg-primary-900 .border-primary-800 { border-color: #2a2c36; } /* Длинные названия брендов на узком экране выносили страницу вбок (scrollWidth 407 при 390) — переносим по любому месту. */ .brand-name { overflow-wrap: anywhere; }