/* =========================================================
ServiceCenter theme — дизайн переработан по мотивам проекта
«Космидент» (kosmident.ru): шрифт Geologica, фиолетовая палитра,
крупные скругления и мягкие "парящие" тени вместо жёстких рамок.
========================================================= */
:root {
--sc-primary: #6149ab;
--sc-primary-hover: #7f68c4;
--sc-primary-active: #443378;
--sc-primary-dark: #211e2e;
--sc-primary-soft: #f5f2ff;
--sc-primary-soft-2: #e8e4f2;
--sc-gradient-primary: radial-gradient(138.69% 138.69% at 85.71% 9.52%, #977fdf 0%, #6149ab 100%);
--sc-text: #211e2e;
/* Изначально #909090 — контраст на белом всего 3.2:1, не проходит WCAG AA
для обычного текста (нужно 4.5:1), а --sc-muted используется именно как
цвет текста (мета-подписи, вторичные строки) в полусотне мест по всему
файлу. Вместо точечной правки каждого места — один более тёмный оттенок
того же серого, 5.3:1, с запасом проходит AA. Аналогично ниже потемнены
--sc-danger/--sc-success/--sc-promo — тоже используются как цвет текста
(сообщения об ошибках, бейджи, акции), а не только как фон/иконки. */
--sc-muted: #6b6b6b;
--sc-border: #e9e6f2;
--sc-bg: #f5f4f7;
--sc-white: #ffffff;
--sc-danger: #c62828;
--sc-danger-soft: #fef2f2;
--sc-success: #0d7a36;
--sc-success-soft: #f0fdf4;
--sc-promo: #a15505;
--sc-promo-soft: #fffbeb;
--sc-radius-sm: 12px;
--sc-radius: 16px;
--sc-radius-lg: 24px;
--sc-radius-pill: 100px;
--sc-shadow-sm: 0 4px 16px rgba(144, 144, 144, .17);
--sc-shadow: 0 16px 24px rgba(209, 209, 229, .5);
--sc-font: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--sc-max: 1360px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Единый видимый индикатор фокуса для клавиатурной навигации на всех
интерактивных элементах (WCAG 2.4.7). Раньше у .sc-field input/select/
textarea фокус был виден только по смене border-color — этого мало на
тонкой 1px рамке. :focus-visible (а не :focus) — чтобы кольцо появлялось
при табуляции с клавиатуры, но не при обычном клике мышью. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--sc-primary);
outline-offset: 2px;
}
body {
margin: 0;
font-family: var(--sc-font);
color: var(--sc-text);
background: var(--sc-bg);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a { color: var(--sc-primary); text-decoration: none; }
a:hover { color: var(--sc-primary-hover); }
img { max-width: 100%; display: block; }
h1, h2, h3 { letter-spacing: -0.01em; font-weight: 600; }
.sc-container {
max-width: var(--sc-max);
margin: 0 auto;
padding: 0 24px;
}
.sc-section { padding: 56px 0; }
.sc-section--flush { padding: 0; }
.sc-section-title { font-size: 26px; font-weight: 600; margin: 0 0 24px; }
/* Круглый значок-бейдж с градиентом перед заголовком секции ("Товары",
"Прайс на ремонт", "Что будем ремонтировать" и т.д.) — раньше выводился
на десктопе (на мобильной уже был скрыт, см. медиа-запрос ниже). Теперь
скрыт везде: правило display:none в разметке (sc-icon()/span.sc-section-icon)
не трогаем, чтобы не переписывать все шаблоны — просто не показываем. */
.sc-section-head-row { display: flex; align-items: center; gap: 16px; }
.sc-section-icon {
display: none;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: var(--sc-radius-sm);
background: var(--sc-gradient-primary);
color: var(--sc-white);
}
.sc-section-icon .sc-icon { width: 18px; height: 18px; }
.sc-section-title--inline { margin: 0; }
/* ---------- Header ---------- */
.sc-header {
background: rgba(255, 255, 255, .9);
backdrop-filter: blur(10px);
box-shadow: var(--sc-shadow-sm);
position: sticky;
top: 0;
z-index: 100;
}
.sc-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
height: 68px;
}
.sc-logo { font-size: 19px; font-weight: 700; color: var(--sc-text); letter-spacing: -0.02em; }
/* ---------- Кнопка выбора города в шапке (модалка "city") ---------- */
.sc-city-btn {
display: inline-flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
max-width: 140px;
padding: 8px 12px;
border: 1px solid var(--sc-border);
border-radius: var(--sc-radius-pill);
background: var(--sc-white);
color: var(--sc-text);
font-family: inherit;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: border-color .15s ease, color .15s ease;
}
.sc-city-btn:hover { border-color: var(--sc-primary); color: var(--sc-primary); }
.sc-city-btn .sc-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--sc-primary); }
.sc-city-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-city-btn--drawer { max-width: none; width: 100%; justify-content: flex-start; margin-bottom: 16px; }
.sc-nav ul { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
.sc-nav a { color: var(--sc-muted); font-size: 14px; font-weight: 500; }
.sc-nav a:hover { color: var(--sc-primary); }
.sc-header__auth { display: flex; gap: 8px; align-items: center; }
/* ---------- Гамбургер (кнопка открытия мобильного меню) — скрыта на
десктопе, показывается только до брейкпоинта .sc-drawer ниже. ---------- */
.sc-hamburger {
display: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border: 1px solid var(--sc-border);
border-radius: var(--sc-radius-sm);
background: var(--sc-white);
color: var(--sc-text);
cursor: pointer;
}
.sc-hamburger:hover { background: var(--sc-primary-soft); color: var(--sc-primary); border-color: var(--sc-primary); }
.sc-hamburger .sc-icon { width: 20px; height: 20px; }
/* ---------- Мобильное меню: затемнение + выезжающая слева панель.
Дублирует пункты десктопного меню и кнопки входа/кабинета (см.
header.php) — на мобильной ширине десктопные .sc-nav/.sc-header__auth
скрыты, а вся навигация уходит в эту панель по клику на .sc-hamburger. */
.sc-drawer { position: fixed; inset: 0; z-index: 300; }
.sc-drawer[hidden] { display: none; }
.sc-drawer__overlay { position: absolute; inset: 0; background: rgba(20, 18, 33, .5); }
.sc-drawer__panel {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 82%;
max-width: 320px;
background: var(--sc-white);
box-shadow: var(--sc-shadow);
display: flex;
flex-direction: column;
padding: 18px 20px 24px;
overflow-y: auto;
transform: translateX(-100%);
transition: transform .28s ease;
}
.sc-drawer.is-open .sc-drawer__panel { transform: translateX(0); }
.sc-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sc-drawer__close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; color: var(--sc-muted); cursor: pointer; border-radius: var(--sc-radius-sm); }
.sc-drawer__close:hover { background: var(--sc-primary-soft); color: var(--sc-primary); }
.sc-drawer__close .sc-icon { width: 18px; height: 18px; }
.sc-drawer__nav { margin-bottom: 20px; }
.sc-drawer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sc-drawer__menu a { display: block; padding: 12px 4px; font-size: 15px; font-weight: 500; color: var(--sc-text); border-bottom: 1px solid var(--sc-border); }
.sc-drawer__menu a:hover { color: var(--sc-primary); }
.sc-drawer__auth { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 16px; }
body.sc-drawer-locked { overflow: hidden; }
/* ---------- Единый поиск в шапке (товары + прайс на ремонт) ---------- */
.sc-header-search {
position: relative;
flex: 1;
max-width: 420px;
}
/* Обёртка иконка+инпут+кнопка «Найти» — на десктопе просто внутренний ряд
пилюли (у .sc-header-search уже фон/паддинг/радиус), на мобильной модалке
(см. брейкпоинт 780px ниже) становится самой белой карточкой поиска. */
.sc-header-search__box {
display: flex;
align-items: center;
gap: 8px;
background: var(--sc-bg);
border-radius: var(--sc-radius-pill);
padding: 8px 8px 8px 14px;
}
.sc-header-search .sc-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--sc-primary); }
.sc-header-search__close { display: none; }
.sc-header-search input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-family: inherit;
font-size: 13.5px;
color: var(--sc-text);
}
.sc-header-search__dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: var(--sc-white);
border-radius: var(--sc-radius);
box-shadow: var(--sc-shadow);
padding: 10px;
z-index: 200;
max-height: 70vh;
overflow-y: auto;
}
.sc-header-search__group + .sc-header-search__group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sc-border); }
.sc-header-search__group-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--sc-muted); margin: 0 0 6px 6px; }
.sc-header-search__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 6px;
border-radius: var(--sc-radius-sm);
color: var(--sc-text);
font-size: 13.5px;
}
.sc-header-search__item:hover { background: var(--sc-primary-soft); color: var(--sc-primary); }
.sc-header-search__item-meta { flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--sc-primary); }
.sc-header-search__viewall { display: block; text-align: center; margin-top: 8px; padding: 8px; font-size: 12.5px; font-weight: 500; color: var(--sc-primary); border-radius: var(--sc-radius-sm); }
.sc-header-search__viewall:hover { background: var(--sc-primary-soft); }
.sc-header-search__empty { padding: 10px 6px; font-size: 13px; color: var(--sc-muted); }
/* ---------- Buttons ---------- */
.sc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 22px;
border-radius: var(--sc-radius-pill);
font-weight: 500;
font-size: 14px;
cursor: pointer;
border: 1px solid transparent;
transition: all .25s ease;
background: none;
}
.sc-btn:hover { text-decoration: none; }
.sc-btn:disabled,
.sc-btn[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
}
.sc-btn--sm { padding: 7px 14px; font-size: 12px; }
.sc-btn--primary { background: var(--sc-primary); color: #fff; }
.sc-btn--primary:hover { background: var(--sc-primary-hover); color: #fff; }
.sc-btn--primary:active { background: var(--sc-primary-active); }
.sc-btn--outline {
background: transparent;
border-color: var(--sc-primary);
color: var(--sc-text);
position: relative;
z-index: 1;
overflow: hidden;
}
.sc-btn--outline:hover { color: var(--sc-white); border-color: var(--sc-primary); }
.sc-btn--outline::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
width: 50px;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--sc-primary);
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) scale(1);
transition: all .3s ease;
}
.sc-btn--outline:hover::before { opacity: 1; width: 100%; transform: translate(-50%, -50%) scale(1.1); }
.sc-btn--ghost { background: transparent; color: var(--sc-muted); border-color: transparent; }
.sc-btn--ghost:hover { background: var(--sc-primary-soft); color: var(--sc-primary); }
.sc-btn--danger { background: var(--sc-danger); color: #fff; }
.sc-btn--danger:hover { background: #dc2626; color: #fff; }
.sc-btn--block { display: flex; width: 100%; text-align: center; }
.sc-btn--inverse { background: var(--sc-white); color: var(--sc-primary-dark); }
.sc-btn--inverse:hover { background: var(--sc-primary-soft); color: var(--sc-primary); }
/* ---------- Главная: hero (заголовок-оффер + статистика) ---------- */
/* До этого блока страница сразу начиналась с плашки-тизера карты — без
крупного заголовка первый экран не объяснял, что за сайт, за секунду.
Паддинг снизу меньше стандартного (.sc-section даёт 56px) — сразу под
hero идёт плашка-тизер карты со своим верхним отступом, дублировать его
не нужно. */
.sc-home-hero { padding: 64px 0 16px; }
.sc-home-hero__eyebrow {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--sc-primary);
margin-bottom: 14px;
}
.sc-home-hero__title {
font-size: 34px;
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 14px;
max-width: 700px;
}
.sc-home-hero__lead { font-size: 15px; line-height: 1.5; color: var(--sc-muted); max-width: 520px; margin: 0 0 24px; }
.sc-home-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.sc-home-hero__stats { display: flex; gap: 36px; flex-wrap: wrap; }
.sc-home-hero__stat b { display: block; font-size: 22px; font-weight: 700; color: var(--sc-text); }
.sc-home-hero__stat span { font-size: 12px; color: var(--sc-muted); }
/* ---------- Главная: плитки категорий устройств ---------- */
.sc-home-categories { padding-bottom: 24px; }
.sc-home-categories .sc-section-head-row { margin-bottom: 20px; }
.sc-category-tiles {
display: grid;
/* Ровно 7 плиток в ряд (6 категорий + "Все категории"), растянутых на всю
ширину секции — auto-fill/auto-fit тут не годится: он резервирует
пустые колонки под ширину контейнера и плитки не дотягивают до края. */
grid-template-columns: repeat(7, 1fr);
gap: 12px;
}
.sc-category-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
background: var(--sc-white);
border-radius: var(--sc-radius);
box-shadow: var(--sc-shadow-sm);
padding: 16px 10px;
color: var(--sc-text);
transition: transform .15s ease, box-shadow .15s ease;
}
.sc-category-tile:hover { transform: translateY(-2px); box-shadow: var(--sc-shadow); color: var(--sc-text); }
.sc-category-tile__icon {
width: 40px;
height: 40px;
border-radius: var(--sc-radius-sm);
background: var(--sc-primary-soft);
color: var(--sc-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sc-category-tile__icon .sc-icon { width: 20px; height: 20px; }
.sc-category-tile__label { font-size: 12px; font-weight: 500; line-height: 1.35; }
/* ---------- Главная: плашка-тизер карты ---------- */
/* Теперь первый блок страницы (сразу под шапкой) — верхний паддинг был 0,
потому что раньше плашка шла третьей и над ней уже был отступ снизу от
предыдущего блока; сейчас 0 сверху означало бы "прилипание" к шапке. */
.sc-map-teaser { padding: 32px 0 24px; }
.sc-map-teaser__card {
display: flex;
align-items: center;
gap: 16px;
background: var(--sc-white);
border-radius: var(--sc-radius);
box-shadow: var(--sc-shadow-sm);
padding: 18px 22px;
color: var(--sc-text);
}
.sc-map-teaser__card:hover { color: var(--sc-text); box-shadow: var(--sc-shadow); }
.sc-map-teaser__thumb {
width: 52px;
height: 52px;
border-radius: var(--sc-radius-sm);
background: var(--sc-primary-soft);
color: var(--sc-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sc-map-teaser__thumb .sc-icon { width: 24px; height: 24px; }
.sc-map-teaser__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sc-map-teaser__text strong { font-size: 14px; font-weight: 600; }
.sc-map-teaser__text span { font-size: 12.5px; color: var(--sc-muted); }
/* ---------- Главная (дизайн "Редакционный"): первый экран поделён пополам —
тизер карты слева и карточка последней статьи справа. Выводится только
когда есть хотя бы одна опубликованная статья, иначе — обычный тизер
карты на всю ширину (.sc-map-teaser__card выше). ---------- */
.sc-hero-split { display: flex; align-items: stretch; gap: 16px; }
.sc-hero-split__map {
flex: 1.2;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
background: var(--sc-primary);
border-radius: var(--sc-radius-lg);
padding: 26px 28px;
color: var(--sc-white);
}
.sc-hero-split__map:hover { color: var(--sc-white); }
.sc-hero-split__map strong { font-size: 18px; font-weight: 600; line-height: 1.3; }
.sc-hero-split__map span:not(.sc-btn) { font-size: 13px; color: #e4e0f7; }
.sc-hero-split__map .sc-btn { align-self: flex-start; margin-top: 6px; }
.sc-hero-split__article {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
background: var(--sc-primary-soft);
border-radius: var(--sc-radius-lg);
padding: 26px 28px;
color: var(--sc-text);
}
.sc-hero-split__article:hover { color: var(--sc-text); }
.sc-hero-split__badge {
display: inline-flex;
align-items: center;
gap: 5px;
align-self: flex-start;
background: var(--sc-white);
color: var(--sc-primary);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .02em;
border-radius: var(--sc-radius-pill);
padding: 4px 10px;
}
.sc-hero-split__badge .sc-icon { width: 12px; height: 12px; }
.sc-hero-split__article h3 { margin: 0; font-size: 16px; line-height: 1.35; color: var(--sc-text); }
.sc-hero-split__byline { font-size: 12.5px; color: var(--sc-muted); }
@media (max-width: 780px) { .sc-hero-split { flex-direction: column; } }
/* ---------- Главная: сетка "Сервисные центры рядом" ---------- */
.sc-home-centers { padding-top: 8px; }
.sc-center-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 900px) { .sc-center-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .sc-category-tiles { grid-template-columns: repeat(4, 1fr); } }
/* ---------- Главная: баннер-приглашение владельцам бизнеса ---------- */
.sc-partner-cta { padding: 48px 0 64px; }
.sc-partner-cta__box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: var(--sc-primary-dark);
border-radius: var(--sc-radius-lg);
padding: 28px 32px;
}
.sc-partner-cta__text h2 { color: var(--sc-white); font-size: 19px; margin: 0 0 6px; }
.sc-partner-cta__text p { color: #b8b6c2; font-size: 13.5px; margin: 0; max-width: 480px; }
@media (max-width: 640px) {
.sc-map-teaser__card { flex-wrap: wrap; }
}
/* ---------- Map: full width, filters inside sidebar, card list ---------- */
.sc-map-section { background: var(--sc-white); }
.sc-map-head { max-width: var(--sc-max); margin: 0 auto; padding: 48px 24px 20px; }
.sc-map-head .sc-section-head-row { flex-wrap: wrap; }
.sc-geo-locate-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.sc-geo-locate-btn .sc-icon { width: 15px; height: 15px; }
.sc-geo-note { margin: 6px 0 0; font-size: 13px; color: var(--sc-primary); font-weight: 500; }
/* Карта на всю ширину блока, панель фильтров + список карточек — плавающая
панель поверх карты (слева), а не колонка рядом с ней. */
.sc-map-layout-full {
position: relative;
width: 100%;
height: 460px;
border-top: 1px solid var(--sc-border);
overflow: hidden;
}
.sc-map-sidebar {
position: absolute;
z-index: 20;
top: 16px;
left: 16px;
bottom: 16px;
width: 340px;
max-width: calc(100% - 32px);
flex-shrink: 0;
display: flex;
flex-direction: column;
background: var(--sc-white);
border: 1px solid var(--sc-border);
border-radius: var(--sc-radius-lg);
box-shadow: var(--sc-shadow);
min-height: 0;
overflow: hidden;
}
.sc-map-full {
position: absolute;
inset: 0;
height: 100%;
background: #f0edf7;
}
/* Фильтры — над списком карточек, внутри сайдбара */
.sc-map-filters {
flex-shrink: 0;
padding: 14px 14px 10px;
border-bottom: 1px solid var(--sc-border);
display: flex;
flex-direction: column;
gap: 8px;
}
.sc-map-filters__row { display: flex; gap: 8px; }
.sc-map-filters__row .sc-filter { flex: 1; min-width: 0; }
.sc-filter {
border: 1px solid var(--sc-border);
border-radius: var(--sc-radius-sm);
padding: 10px 12px;
font-size: 13.5px;
background: var(--sc-white);
color: var(--sc-text);
font-family: inherit;
}
.sc-filter:disabled { opacity: .5; cursor: not-allowed; background-color: var(--sc-bg); }
/* Селекты фильтров: убираем нативную стрелку и рисуем свою с отступом от края */
select.sc-filter {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 34px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
}
.sc-filter--search {
display: flex;
align-items: center;
gap: 8px;
color: var(--sc-muted);
}
.sc-filter--search input {
border: none;
outline: none;
flex: 1;
font-size: 13.5px;
background: transparent;
font-family: inherit;
color: var(--sc-text);
}
.sc-filter-reset { flex: 0 0 auto; padding: 10px; }
.sc-map-sidebar__list {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.sc-center-card {
position: relative;
display: flex;
gap: 10px;
background: var(--sc-white);
border: 1px solid var(--sc-border);
border-radius: var(--sc-radius-sm);
padding: 10px;
cursor: pointer;
transition: box-shadow .2s ease, border-color .2s ease;
}
.sc-center-card .sc-favorite-btn--card { top: 8px; right: 8px; width: 28px; height: 28px; }
.sc-center-card__body { padding-right: 30px; }
.sc-center-card:hover { box-shadow: var(--sc-shadow-sm); border-color: var(--sc-primary-soft-2); }
.sc-center-card.is-active { border-color: var(--sc-primary); box-shadow: 0 0 0 3px var(--sc-primary-soft); }
/* Важно: класс .sc-center-card задаёт display:flex с более высокой специфичностью,
чем стандартное правило браузера [hidden]{display:none} — из-за этого атрибут
hidden, который выставляет JS-фильтр, визуально не скрывал карточку. */
.sc-center-card[hidden] { display: none !important; }
.sc-center-card__logo img,
.sc-logo-placeholder,
.sc-image-placeholder {
width: 60px;
height: 60px;
border-radius: 10px;
object-fit: cover;
background: var(--sc-bg);
display: flex;
align-items: center;
justify-content: center;
color: var(--sc-muted);
flex-shrink: 0;
}
/* Внутри плавающей панели карты карточки компактнее, чем базовый размер выше. */
.sc-center-card__logo img,
.sc-center-card__logo .sc-logo-placeholder {
width: 42px;
height: 42px;
border-radius: 8px;
}
.sc-center-card__body { min-width: 0; }
.sc-center-card__body h3 { margin: 0 0 3px; font-size: 13.5px; }
.sc-center-card__body h3 a { color: var(--sc-text); }
.sc-center-card__body p { margin: 1px 0; font-size: 11.5px; color: var(--sc-muted); display: flex; align-items: center; gap: 5px; }
/* ---------- SVG-иконки ---------- */
.sc-icon {
width: 15px;
height: 15px;
flex-shrink: 0;
vertical-align: -3px;
color: currentColor;
}
.sc-icon--lg { width: 28px; height: 28px; }
.sc-filter--search .sc-icon { color: var(--sc-muted); }
/* Кастомный балун карты */
/* Прячем фирменные элементы Яндекс.Карт (логотип/копирайты/условия) на случай,
если они не скрылись через опции API (разные версии сборки ymaps). */
[class*="ymaps"][class*="copyright"],
[class*="ymaps"][class*="gototech"],
[class*="ymaps"][class*="-float-button"] {
display: none !important;
}
/* ---------- Carousel ---------- */
.sc-carousel { position: relative; }
.sc-carousel__track {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
padding-bottom: 6px;
}
.sc-carousel__track::-webkit-scrollbar { display: none; }
.sc-carousel__slide { flex: 0 0 260px; }
.sc-carousel__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--sc-border);
background: var(--sc-white);
font-size: 20px;
cursor: pointer;
z-index: 2;
box-shadow: var(--sc-shadow-sm);
}
.sc-carousel__arrow--prev { left: -18px; }
.sc-carousel__arrow--next { right: -18px; }
/* ---------- Карточка товара (современный вариант) ----------
Вся карточка — единая ссылка (см.
sc_render_product_card() в inc/template-tags.php), поэтому внутри
заголовок — обычный текст, а не вложенный . Цена — крупным текстом
под названием (.sc-product-card__price-lg), не бейджем поверх фото. */
.sc-product-card {
display: flex;
flex-direction: column;
cursor: pointer;
background: var(--sc-white);
border-radius: var(--sc-radius-lg);
box-shadow: var(--sc-shadow-sm);
overflow: hidden;
transition: box-shadow .25s ease, transform .25s ease;
}
.sc-product-card:hover { box-shadow: var(--sc-shadow); transform: translateY(-4px); }
.sc-product-card__image {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--sc-primary-soft);
}
.sc-product-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .45s ease;
}
.sc-product-card:hover .sc-product-card__image img { transform: scale(1.07); }
.sc-product-card__image .sc-image-placeholder {
width: 100%;
height: 100%;
font-size: 34px;
border-radius: 0;
color: var(--sc-primary);
}
.sc-product-card__image .sc-tag--promoted {
position: absolute;
top: 10px;
left: 10px;
margin-left: 0;
z-index: 2;
}
.sc-product-card__body {
display: flex;
flex-direction: column;
gap: 5px;
padding: 16px 18px 18px;
flex: 1;
}
.sc-product-card__body h3 { margin: 0; font-size: 15.5px; line-height: 1.32; color: var(--sc-text); transition: color .2s ease; }
.sc-product-card:hover .sc-product-card__body h3 { color: var(--sc-primary); }
.sc-product-card__center {
display: flex;
align-items: center;
gap: 4px;
color: var(--sc-muted);
font-size: 12px;
margin: 0;
}
.sc-product-card__center .sc-icon { width: 12px; height: 12px; color: var(--sc-muted); }
.sc-card-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--sc-primary);
font-size: 13px;
font-weight: 600;
margin-top: auto;
padding-top: 6px;
transition: gap .2s ease;
}
.sc-card-link:hover,
.sc-product-card:hover .sc-card-link { gap: 7px; }
.sc-product-card__type {
display: inline-block;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--sc-muted);
}
.sc-product-card__cat { align-self: flex-start; }
.sc-section-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
.sc-section-head .sc-section-title { margin-bottom: 0; }
.sc-section-links { display: flex; gap: 16px; }
/* ---------- Products grid: 4 per row / 8 per page ---------- */
.sc-products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* ---------- Карточка статьи (sc_render_article_card(), /articles/,
блок на главной, раздел "Статьи" на странице центра, сайдбар детальной
страницы статьи) — вертикальная, как у карточки товара: фото сверху с
бейджем категории статьи поверх (если задана), заголовок/отрывок/мета
снизу. Сетка в 4 колонки (.sc-articles-grid), та же логика брейкпоинтов,
что и у .sc-products-grid. */
.sc-articles-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.sc-article-card {
display: flex;
flex-direction: column;
cursor: pointer;
background: var(--sc-white);
border-radius: var(--sc-radius-lg);
box-shadow: var(--sc-shadow-sm);
overflow: hidden;
transition: box-shadow .25s ease, transform .25s ease;
}
.sc-article-card:hover { box-shadow: var(--sc-shadow); transform: translateY(-4px); }
.sc-article-card__image { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--sc-primary-soft); }
.sc-article-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.sc-article-card:hover .sc-article-card__image img { transform: scale(1.07); }
.sc-article-card__image .sc-image-placeholder { width: 100%; height: 100%; font-size: 28px; border-radius: 0; color: var(--sc-primary); }
.sc-article-card__cat-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
background: var(--sc-white);
color: var(--sc-primary);
font-size: 10.5px;
font-weight: 600;
padding: 4px 11px;
border-radius: var(--sc-radius-pill);
box-shadow: var(--sc-shadow-sm);
}
.sc-article-card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.sc-article-card__body h3 { margin: 0; font-size: 15px; line-height: 1.32; color: var(--sc-text); transition: color .2s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-article-card:hover .sc-article-card__body h3 { color: var(--sc-primary); }
.sc-article-card__excerpt { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--sc-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-article-card__meta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--sc-border); font-size: 11.5px; color: var(--sc-muted); }
.sc-article-card__meta-center { color: var(--sc-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-article-card__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sc-primary-soft-2); flex-shrink: 0; }
@media (max-width: 900px) { .sc-articles-grid { grid-template-columns: repeat(2, 1fr); } }
/* ---------- Карточка вакансии (sc_render_vacancy_card()) — /vacancies/ и
раздел "Вакансии" на странице центра. Компактная строка: иконка-плашка
слева, должность/центр/зарплата справа — вакансий обычно немного, крупные
фото-карточки как у товаров/статей тут не нужны. ---------- */
.sc-vacancies-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sc-vacancy-card {
display: flex;
align-items: center;
gap: 14px;
background: var(--sc-white);
border: 1px solid var(--sc-border);
border-radius: var(--sc-radius);
padding: 16px 18px;
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.sc-vacancy-card:hover { box-shadow: var(--sc-shadow-sm); border-color: var(--sc-primary-soft-2); transform: translateY(-2px); }
.sc-vacancy-card__icon {
width: 44px;
height: 44px;
border-radius: var(--sc-radius-sm);
background: var(--sc-primary-soft);
color: var(--sc-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sc-vacancy-card__icon .sc-icon { width: 20px; height: 20px; }
.sc-vacancy-card__body { min-width: 0; }
.sc-vacancy-card__body h3 { margin: 0 0 4px; font-size: 14.5px; line-height: 1.3; color: var(--sc-text); transition: color .2s ease; }
.sc-vacancy-card:hover .sc-vacancy-card__body h3 { color: var(--sc-primary); }
.sc-vacancy-card__center { display: flex; align-items: center; gap: 5px; margin: 0 0 4px; font-size: 12px; color: var(--sc-muted); }
.sc-vacancy-card__center .sc-icon { width: 12px; height: 12px; color: var(--sc-muted); }
.sc-vacancy-card__salary { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--sc-success); }
@media (max-width: 900px) { .sc-vacancies-grid { grid-template-columns: 1fr; } }
/* ---------- Детальная страница статьи ---------- */
.sc-single--article .sc-single__breadcrumb { margin-bottom: 24px; }
.sc-article__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.sc-article__head h1 { margin: 0 0 6px; font-size: 27px; line-height: 1.3; }
.sc-article__byline { margin: 0; font-size: 13px; color: var(--sc-muted); display: flex; align-items: center; gap: 6px; }
.sc-article__byline .sc-icon { width: 14px; height: 14px; }
.sc-article__byline a { color: var(--sc-primary); font-weight: 500; }
/* ---------- Детальная страница вакансии (single-sc_vacancy.php) ---------- */
.sc-vacancy-single__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.sc-vacancy-single__head-text h1 { margin: 0 0 8px; font-size: 27px; line-height: 1.3; }
.sc-vacancy-single__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; font-size: 13px; color: var(--sc-muted); }
.sc-vacancy-single__meta a,
.sc-vacancy-single__meta span { display: inline-flex; align-items: center; gap: 6px; }
.sc-vacancy-single__meta .sc-icon { width: 14px; height: 14px; flex-shrink: 0; }
.sc-vacancy-single__meta a { color: var(--sc-primary); font-weight: 500; }
.sc-vacancy-single__salary {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 19px;
font-weight: 700;
color: var(--sc-success);
background: var(--sc-success-soft);
padding: 10px 18px;
border-radius: var(--sc-radius);
margin: 0 0 24px;
}
.sc-vacancy-single__salary .sc-icon { width: 18px; height: 18px; }
.sc-article__cover { border-radius: var(--sc-radius-lg); overflow: hidden; box-shadow: var(--sc-shadow-sm); margin-bottom: 24px; }
.sc-article__cover img { width: 100%; max-height: 420px; object-fit: cover; }
.sc-article__body { font-size: 16px; }
.sc-article__body img { border-radius: var(--sc-radius); margin: 8px 0; }
.sc-article__cta { margin: 28px 0; }
/* Имя центра-автора в сайдбаре детальной страницы статьи (single-sc_article.php)
— визуально как .sc-single__identity-text h1 на странице центра, но не h1:
настоящий h1 страницы — заголовок самой статьи, второй h1 на странице не нужен. */
.sc-single__panel-name { margin: 0 0 16px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--sc-text); }
/* ---------- Крупные карточки товаров (variant => 'large', витрина на
странице центра) — чуть крупнее заголовок, остальное совпадает с обычной
карточкой (цена везде — текстом под названием, .sc-product-card__price-lg). */
.sc-product-card--large .sc-product-card__body { gap: 8px; }
.sc-product-card--large .sc-product-card__body h3 { font-size: 16px; }
.sc-product-card__price-lg { font-size: 18px; font-weight: 700; color: var(--sc-primary); margin-top: 2px; }
/* ---------- Карточка товара в каталоге /products/ (variant => 'catalog',
sc_render_product_card()) — цена крупным бейджем на фото (не текстом под
названием, как у остальных вариантов карточки) и блок центра-продавца
внизу (аватар-монограмма + название + индекс доверия + стрелка), а не
просто иконка+текст. Используется только в этом каталоге. ---------- */
.sc-product-card--catalog .sc-product-card__body { padding: 14px 16px 16px; gap: 7px; }
.sc-product-card--catalog .sc-product-card__body h3 { font-size: 14px; }
.sc-product-card__price-badge {
position: absolute;
bottom: 10px;
left: 10px;
background: var(--sc-white);
color: var(--sc-text);
font-size: 14px;
font-weight: 700;
padding: 5px 12px;
border-radius: var(--sc-radius-pill);
box-shadow: var(--sc-shadow-sm);
z-index: 2;
}
.sc-product-card__center-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 11px;
border-top: 1px solid var(--sc-border);
}
.sc-product-card__center-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--sc-gradient-primary);
color: var(--sc-white);
font-size: 11.5px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sc-product-card__center-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-product-card__center-name { font-size: 12px; font-weight: 600; color: var(--sc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-product-card__center-trust { font-size: 9.5px; color: var(--sc-success); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-product-card__cta-arrow { color: var(--sc-primary); font-size: 15px; flex-shrink: 0; }
/* ---------- Витрина товаров на странице центра: 4 в ряд ----------
Сетка вложена в левую (более узкую) колонку бизнес-карточки
(.sc-single__main рядом со закреплённой панелью контактов) — карточки уже
у 4 колонок, чем на всю ширину страницы, это нормально и совпадает с
каталогом /products/ (тоже 4 в ряд). Ниже 1080px .sc-single__hero
сворачивается в один столбец на всю ширину — там для тех же 4 колонок
становится ещё свободнее. */
.sc-products-grid--narrow { grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .sc-products-grid--narrow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .sc-products-grid--narrow { grid-template-columns: repeat(2, 1fr); } }
.sc-pagination { margin-top: 28px; display: flex; gap: 8px; justify-content: center; }
.sc-pagination a, .sc-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
border-radius: var(--sc-radius-sm);
background: var(--sc-white);
box-shadow: var(--sc-shadow-sm);
color: var(--sc-text);
padding: 0 8px;
font-size: 13px;
}
.sc-pagination .current { background: var(--sc-primary); color: #fff; border-color: var(--sc-primary); }
/* ---------- Auth ---------- */
.sc-auth { padding: 56px 0; }
.sc-auth__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 880px; margin: 0 auto; }
.sc-auth h1 { font-size: 24px; margin: 0 0 8px; }
.sc-auth h2 { font-size: 18px; margin: 0 0 8px; }
.sc-auth__hint { color: var(--sc-muted); margin-bottom: 18px; font-size: 14px; }
.sc-form { display: flex; flex-direction: column; gap: 14px; }
.sc-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sc-text); }
.sc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sc-field input[type="text"],
.sc-field input[type="email"],
.sc-field input[type="password"],
.sc-field input[type="file"],
.sc-field select,
.sc-field textarea {
padding: 11px 13px;
border: 1px solid var(--sc-border);
border-radius: var(--sc-radius-sm);
font-size: 14px;
font-family: inherit;
font-weight: 400;
color: var(--sc-text);
background: var(--sc-white);
}
.sc-field input:focus,
.sc-field select:focus,
.sc-field textarea:focus {
border-color: var(--sc-primary);
box-shadow: 0 0 0 3px var(--sc-primary-soft);
}
.sc-field input:focus:not(:focus-visible),
.sc-field select:focus:not(:focus-visible),
.sc-field textarea:focus:not(:focus-visible) {
outline: none;
}
.sc-field input:disabled,
.sc-field select:disabled,
.sc-field textarea:disabled {
background: var(--sc-bg);
color: var(--sc-muted);
cursor: not-allowed;
opacity: .7;
}
/* Единый визуальный контракт ошибки поля: .sc-field--error на обёртке