/* ===== SUNWISE child overrides (фиксы порта плагина под WP) ===== */
/* Горизонтальный скролл: плагин задаёт .sw-landing width:100vw (включает ширину
вертикального скроллбара) → элемент на ~15px шире контент-области. */
.sw-landing.sw-wp-landing {
width: 100%;
max-width: 100%;
margin-inline: 0;
}
.sunwise-canvas {
overflow-x: clip;
}
/* Skip-link «Перейти к содержимому» (WCAG 2.4.1) — скрыт, появляется по Tab-фокусу */
.sw-skip-link {
position: absolute;
left: 8px;
top: -60px;
z-index: 10000;
padding: 10px 18px;
background: var(--sw-gold, #e6ad29);
color: #161410;
font-weight: 700;
text-decoration: none;
border-radius: 8px;
transition: top .15s ease;
}
.sw-skip-link:focus {
top: 8px;
outline: 2px solid #161410;
outline-offset: 2px;
}
/* Контраст AA (≥4.5:1): золотой ТЕКСТ на светлом фоне был 3.0–4.2:1.
Углубляем золото только для текстовых ролей (кнопки/фоны/иконки-на-золоте не трогаем). */
.sw-landing { --sw-gold-dark: #8a6410; }
/* ===== ГЛОБАЛЬНО: тема Kadence красит ЛЮБЫЕ button/.wp-element-button/.wp-block-button__link
в синий (#215387) на hover/focus/active. Переменные перебить не вышло (Kadence задаёт их
позже/инлайн), поэтому перекрываем САМО правило — бренд-золото + !important. Глобально (без
.sw-landing), чтобы достать и FAB/«наверх»/cookie вне .sw-landing. Специфичность 0,1,1 = как
у точечных правил ниже (вкладки/стрелки/крестик прозрачные/кремовые/белые) → те, что ПОЗЖЕ
по файлу, выигрывают. FAB-действия (call/wa/tg/mail) — это без .button, их не трогает. ===== */
button:hover, button:focus, button:active,
.button:hover, .button:focus, .button:active,
.wp-element-button:hover, .wp-element-button:focus, .wp-element-button:active,
.wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link:active {
background-image: linear-gradient(180deg, #f8c94c 0%, #e3a620 100%) !important;
background-color: #e3a620 !important;
color: #161410 !important;
border-color: transparent !important;
}
.sw-burger:hover, .sw-burger:focus, .sw-burger:active { background: transparent !important; background-image: none !important; color: inherit !important; }
/* Тема красит ЛЮБЫЕ ссылки a:hover/focus/active в синий (--global-palette-highlight-alt). Текстовые
ссылки в контенте держим в золоте; кнопки/ссылки-кнопки исключены (их цвет задан выше своими правилами). */
.sw-landing a:not(.sw-button):not(.wp-block-button__link):not(.wp-element-button):not(.button):hover,
.sw-landing a:not(.sw-button):not(.wp-block-button__link):not(.wp-element-button):not(.button):focus,
.sw-landing a:not(.sw-button):not(.wp-block-button__link):not(.wp-element-button):not(.button):active {
color: var(--sw-gold-dark) !important;
}
/* Голые исключены из правил выше → тема красила их текст синим на hover.
Держим бренд-цвета: золотая кнопка — тёмный текст; outline — золото + лёгкая золотая подсветка. */
.sw-landing a.sw-button:hover,
.sw-landing a.sw-button:focus,
.sw-landing a.sw-button:active {
color: #161410 !important;
border-color: transparent !important;
}
.sw-landing a.sw-button--outline:hover,
.sw-landing a.sw-button--outline:focus,
.sw-landing a.sw-button--outline:active {
color: var(--sw-gold-dark) !important;
border-color: var(--sw-gold-dark) !important;
background: rgba(230,173,41,.10) !important;
}
/* ===== УНИФИКАЦИЯ КНОПОК: одна высота/паддинг/шрифт/радиус для всех вариантов и структур
(bare- .sw-button | hero .wp-block-button__link | форма .ff-btn-submit). Различие
золотая↔outline — только фон/рамка/цвет (задано плагином). ===== */
.sw-landing a.sw-button,
.sw-landing .wp-block-button__link,
.sw-ff-wrap .ff-btn-submit,
.sw-ff-wrap button[type="submit"] {
min-height: 48px !important;
padding: 0 26px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
align-self: center; /* не растягиваться по высоте flex-линии родителя (Скрябин был 60px) */
gap: 8px;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: nowrap; /* длинная подпись («Связаться с производством») в одну строку → высота 48 у всех */
border-radius: 8px !important;
box-sizing: border-box !important;
}
.sw-landing a.sw-button svg,
.sw-landing .wp-block-button__link svg,
.sw-ff-wrap .ff-btn-submit svg { display: block; flex: 0 0 auto; }
.sw-landing .sw-eyebrow,
.sw-landing .sw-spheres .sw-eyebrow,
.sw-landing .sw-skryabin .sw-eyebrow { color: #7d5a12; }
/* Полоса применения: ровно по гриду — 4 равные колонки, без сдвига плагина. */
.sw-landing .sw-applications-strip__grid {
transform: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
}
/* планшет: 4 элемента не влезают в ряд → грид 2×2 */
@media (max-width: 1080px) {
.sw-landing .sw-applications-strip__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
}
@media (max-width: 600px) {
/* minmax(0,1fr) — колонки сжимаются ниже min-content (длинные слова не распирают грид) */
.sw-landing .sw-applications-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.sw-landing .sw-applications-strip__grid b,
.sw-landing .sw-applications-strip__grid small,
.sw-landing .sw-applications-strip__grid span { overflow-wrap: anywhere; }
}
/* Hero: блок буллетов+кнопок чуть ниже (правка клиента 17.06) */
.sw-landing .sw-hero-proofs { margin-top: 44px; }
/* ===== HERO: хедер+hero = 100vh, иконки-сферы ВНУТРИ hero снизу (референс клиента) =====
Фон — полная сгенерированная сцена (канистра нарисована в сцене), плавный кремовый
градиент слева под текст (непрерывная сцена → стыка нет). Полоса применения перенесена
в контент ВНУТРЬ hero и прижата к низу. Хедер на десктопе = 137px. */
.sw-landing .sw-hero {
min-height: calc(100vh - 137px); /* header(137) + hero = ровно 100vh */
display: flex;
flex-direction: column;
background-image:
linear-gradient(90deg, rgba(255,250,240,.97) 0%, rgba(255,250,240,.9) 22%, rgba(255,250,240,.62) 40%, rgba(255,250,240,.28) 55%, rgba(255,250,240,.06) 68%, rgba(255,250,240,0) 80%),
url("/wp-content/themes/kadence-child/assets/hero-desktop.webp?v=6") !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center center !important;
background-color: #f3e3bf;
}
/* контент (текст) занимает всё место над полосой; полоса прижата к низу hero.
.wp-block-group__inner-container = display:contents → .sw-hero__inner это флекс-элемент,
но в DOM он потомок обёртки → селектор потомком, не `>`. */
.sw-landing .sw-hero .sw-hero__inner { flex: 1 1 auto; min-height: 0 !important; }
/* ===== HERO · ряд из 4 сфер — равные ОПТИЧЕСКИЕ промежутки (решение дизайн-панели) =====
МЕХАНИЗМ РАВЕНСТВА: (1) grid 4×minmax(0,1fr) → 4 трека строго равной ширины (не зависит
от длины текста); (2) блок прижат ВЛЕВО в своём треке → левый край иконки = старт своей
четверти → шаг «иконка→иконка соседа» одинаков на всех 3 стыках (это «равные стрелки» клиента);
(3) текст с min-width:0 + перенос → длинная подпись переносится ВНУТРИ трека, не раздвигая ячейку;
(4) column-gap:0 + тонкие вертикальные разделители по центру стыков «оцифровывают» равные сегменты.
Плюс СБРОС clip-path/border плагина (это и резало полосу + «нижняя полоска»). */
.sw-landing .sw-hero .sw-applications-strip {
margin: 0 !important;
padding: 18px 0 18px !important;
clip-path: none !important;
-webkit-clip-path: none !important;
border: 0 !important;
background: linear-gradient(0deg, rgba(20,16,8,.60) 0%, rgba(20,16,8,.34) 55%, rgba(20,16,8,.10) 82%, rgba(20,16,8,0) 100%) !important;
}
.sw-landing .sw-hero .sw-applications-strip__grid {
display: flex !important;
justify-content: space-between !important; /* 4 равных блока, равные зазоры, во всю ширину разметки */
align-items: center !important;
column-gap: 0 !important;
row-gap: 16px !important;
transform: none !important;
}
.sw-landing .sw-hero .sw-applications-strip__grid a {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex: 0 0 auto !important; /* блок по содержимому; равная ширина → равные зазоры (space-between) */
gap: 14px !important;
width: auto !important; /* блок по содержимому, не на всю колонку */
min-width: 0 !important;
padding: 4px 0 !important;
color: #fff !important;
text-decoration: none !important;
position: relative;
}
/* (стрелки-цепочка между иконками убраны по просьбе клиента) */
/* Бейдж-кружок: фикс. 48px → левый край не «плавает». Золото на креме читается на любом фото */
.sw-landing .sw-hero .sw-applications-strip__grid .sw-icon {
flex: 0 0 48px !important; width: 48px !important; height: 48px !important;
display: inline-flex !important; align-items: center; justify-content: center;
border-radius: 50% !important;
background: var(--sw-cream, #f6e9cc) !important;
border: 1px solid rgba(234,215,166,.9) !important;
color: var(--sw-gold-dark, #be8a2e) !important;
line-height: 0;
}
.sw-landing .sw-hero .sw-applications-strip__grid .sw-icon svg,
.sw-landing .sw-hero .sw-applications-strip__grid .sw-icon .dashicons {
width: 24px !important; height: 24px !important; color: inherit !important;
}
/* Текстовая колонка: ПО СОДЕРЖИМОМУ (текст вплотную к иконке, без пустого места справа у коротких
подписей). Зазоры между блоками держит justify-content:space-between (распределяет поровну
независимо от ширины блоков). max-width — чтобы длинные подписи переносились, а не растягивали ряд. */
.sw-landing .sw-hero .sw-applications-strip__grid a > span:last-child {
display: flex !important; flex-direction: column; justify-content: center;
gap: 2px; text-align: left;
flex: 0 1 auto !important; width: auto !important; max-width: 168px;
}
.sw-landing .sw-hero .sw-applications-strip__grid b {
display: block !important;
font-size: 15px !important; font-weight: 700 !important; line-height: 1.25 !important;
color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
overflow-wrap: break-word; word-break: break-word; hyphens: auto;
}
.sw-landing .sw-hero .sw-applications-strip__grid small {
display: block !important; margin-top: 0 !important;
font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.3 !important;
color: rgba(255,255,255,.82) !important; text-shadow: 0 1px 3px rgba(0,0,0,.45) !important;
overflow-wrap: break-word; hyphens: auto;
}
.sw-landing .sw-hero .sw-applications-strip__grid a:hover b { text-decoration: underline; }
.sw-landing .sw-hero .sw-applications-strip__grid a:focus-visible {
outline: 2px solid var(--sw-gold, #e6ad29); outline-offset: 4px; border-radius: 8px;
}
/* Узкие: равенство держим, разделители убираем (мобайл/планшет hero дорабатываем отдельно) */
@media (max-width: 1100px) {
.sw-landing .sw-hero .sw-applications-strip__grid { display: grid !important; justify-content: initial !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; column-gap: 32px !important; row-gap: 22px !important; }
.sw-landing .sw-hero .sw-applications-strip__grid a + a::before { display: none; }
.sw-landing .sw-hero .sw-applications-strip__grid a { padding-right: 0 !important; }
}
/* ===== HERO планшет 768–980: header(полоса)+hero = ровно 100vh. Текст ТЁМНЫЙ (сцена светлая слева). ===== */
@media (min-width: 768px) and (max-width: 980px) {
.sw-landing .sw-hero {
--sw-head-h: 63px; /* 62px полоса + 1px бордер */
min-height: calc(100vh - var(--sw-head-h)) !important; /* фолбэк */
min-height: calc(100dvh - var(--sw-head-h)) !important; /* с учётом адресной строки */
display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
overflow: hidden !important;
/* как десктоп+мобилка: ЛЕВЫЙ кремовый скрим (90deg) под верхний текст — иначе на ярком
поле заголовок/подзаголовок/буллеты не читались; к НИЗУ (180deg) — крем под иконки сфер;
канистра (центр-право) остаётся в чистой зоне (оба градиента там прозрачны). */
background:
linear-gradient(180deg,
rgba(255,250,241,0) 0%,
rgba(255,250,241,0) 42%,
rgba(255,250,241,.5) 56%,
rgba(255,250,241,.9) 68%,
#fffaf1 78%, #f6ecd2 100%),
linear-gradient(90deg,
rgba(255,250,241,.94) 0%,
rgba(255,250,241,.84) 26%,
rgba(255,250,241,.4) 48%,
rgba(255,250,241,0) 64%),
url("/wp-content/themes/kadence-child/assets/hero-desktop.webp?v=6") 55% center / cover no-repeat !important;
background-color: #fffaf1 !important; /* канистра чуть ЛЕВЕЕ правого края (55% вместо 45%) */
}
/* верхний блок (текст+кнопки) — у верха, натуральной высоты */
.sw-landing .sw-hero .sw-hero__inner { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; flex: 0 0 auto !important; padding-top: 44px !important; padding-bottom: 0 !important; }
.sw-landing .sw-hero__copy { max-width: 560px; min-width: 0; }
.sw-landing .sw-hero-title { max-width: 520px; }
.sw-landing .sw-hero-proofs { margin-top: 32px !important; gap: 16px !important; }
.sw-landing .sw-hero-proofs li { font-size: 16px !important; }
.sw-landing .sw-hero-actions { margin-top: 32px !important; }
/* полоса сфер — прижата к НИЗУ на кремовом градиенте; иконки/текст ЗАМЕТНО крупнее буллетов hero */
.sw-landing .sw-hero .sw-applications-strip { flex: 0 0 auto !important; margin: auto 0 0 0 !important; padding: 0 0 calc(30px + env(safe-area-inset-bottom)) !important; background: transparent !important; clip-path: none !important; -webkit-clip-path: none !important; border: 0 !important; }
.sw-landing .sw-hero .sw-applications-strip__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; column-gap: 40px !important; row-gap: 26px !important; max-width: 660px; transform: none !important; }
.sw-landing .sw-hero .sw-applications-strip__grid a { width: auto !important; gap: 14px !important; padding: 4px 0 !important; color: #1c1a16 !important; align-items: center !important; }
/* текст-колонка тянется на всю ячейку (была 158px → слова рвались); слова целиком, без разрыва */
.sw-landing .sw-hero .sw-applications-strip__grid a > span:last-child { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; }
.sw-landing .sw-hero .sw-applications-strip__grid .sw-icon { flex: 0 0 50px !important; width: 50px !important; height: 50px !important; background: #fffaf1 !important; border: 1px solid rgba(138,100,16,.30) !important; color: #8a6410 !important; }
.sw-landing .sw-hero .sw-applications-strip__grid .sw-icon svg { width: 25px !important; height: 25px !important; }
/* подпись сферы — ЕДИНЫЙ канон с десктопом: 15px/700 (был 17/800 — выбивался по весу и размеру) */
.sw-landing .sw-hero .sw-applications-strip__grid b { font-size: 15px !important; font-weight: 700 !important; line-height: 1.25 !important; color: #1c1a16 !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; -webkit-hyphens: none !important; }
.sw-landing .sw-hero .sw-applications-strip__grid small { display: block !important; font-size: 12.5px !important; line-height: 1.3 !important; color: #6a6256 !important; margin-top: 2px; word-break: normal !important; overflow-wrap: normal !important; }
}
/* тесный планшет (низкий экран) — ужимаем, чтобы остаться в один экран */
@media (min-width: 768px) and (max-width: 980px) and (max-height: 760px) {
.sw-landing .sw-hero .sw-hero__inner { padding-top: 28px; }
.sw-landing .sw-hero-proofs { margin-top: 16px !important; }
.sw-landing .sw-hero .sw-applications-strip { padding: 12px 0 !important; }
}
/* узкий десктоп 981–1100: канистру чуть правее (подальше от текста) */
@media (min-width: 981px) and (max-width: 1100px) {
.sw-landing .sw-hero { background-position: 72% center !important; }
}
/* Кнопки hero — закругление как у кнопок бургер-меню (8px), а не плагинные 6px */
.sw-landing .sw-hero-actions .wp-block-button__link,
.sw-landing .sw-hero-actions .sw-button--outline a,
.sw-landing .sw-hero-actions .wp-block-button .wp-block-button__link { border-radius: 8px !important; }
/* ===== HERO мобайл ≤767: пересборка (ATC) — ЕДИНЫЙ тёплый тон на ВЕСЬ экран,
header+hero = 100svh. Фон — тот же hero-desktop.jpg (позиция 60% center / cover),
сверху кремовый градиент-скрим для читаемости тёмного текста, к низу — чистый
крем под ряд иконок; текст в плите сверху НЕ пересекается с канистрой. ===== */
@media (max-width: 767px) {
.sw-landing .sw-hero {
--sw-head-h: 63px;
position: relative;
min-height: calc(100vh - var(--sw-head-h)) !important; /* фолбэк */
min-height: calc(100svh - var(--sw-head-h)) !important; /* ровно первый экран без скачка адресной строки */
display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
overflow: hidden !important;
/* СЦЕНА с канистрой — ФОНОМ за ВЕРХНИМ текстом (заголовок/подзаголовок/буллеты), с кремовым
градиент-скримом для читаемости тёмного текста; к низу — плотный ЧИСТЫЙ крем под иконки (без фото). */
background:
linear-gradient(180deg,
rgba(255,250,241,.6) 0%,
rgba(255,250,241,.58) 20%,
rgba(255,250,241,.66) 40%,
rgba(255,250,241,.76) 56%,
rgba(255,250,241,.92) 70%,
#fffaf1 82%, #f6ecd2 100%),
url("/wp-content/themes/kadence-child/assets/hero-mobile.webp?v=6") 60% center / cover no-repeat !important;
background-color: #fffaf1 !important;
}
.sw-landing .sw-hero::before { content: none !important; display: none !important; }
.sw-landing .sw-hero::after { content: none !important; display: none !important; }
.sw-landing .sw-hero .sw-hero__inner {
position: relative; z-index: 2;
flex: 0 0 auto !important; min-height: 0 !important;
display: flex !important; flex-direction: column !important; align-items: flex-start !important;
padding: 14px 18px 0 !important;
}
.sw-landing .sw-hero__copy { max-width: 100%; min-width: 0; }
/* текст тёмный на креме (как десктоп); span=эйбро, strong=золото-тёмное, em=ТУ */
.sw-landing .sw-hero-title { hyphens: none; -webkit-hyphens: none; overflow-wrap: break-word; word-break: normal; }
.sw-landing .sw-hero-title span { color: #1c1a16 !important; font-size: clamp(21px, 5.8vw, 26px) !important; line-height: 1.2 !important; }
.sw-landing .sw-hero-title strong { color: #8a6410 !important; font-size: clamp(13.5px, 3.9vw, 17px) !important; line-height: 1.3 !important; letter-spacing: .01em; }
.sw-landing .sw-hero-title em { color: #6a6256 !important; font-style: normal !important; font-size: 12.5px !important; }
.sw-landing .sw-hero-proofs { margin-top: clamp(16px, 3.2vh, 36px) !important; gap: clamp(11px, 2vh, 18px) !important; }
.sw-landing .sw-hero-proofs li { color: #2c281f !important; font-size: 14.5px !important; line-height: 1.32 !important; }
.sw-landing .sw-hero-proofs .sw-icon { background: rgba(255,250,241,.82) !important; border: 1px solid rgba(138,100,16,.35) !important; color: #8a6410 !important; }
/* без ореола — текст читается за счёт скрима */
.sw-landing .sw-hero-title span,
.sw-landing .sw-hero-title strong,
.sw-landing .sw-hero-title em,
.sw-landing .sw-hero-proofs li { text-shadow: none !important; }
/* кнопки в ряд, равные */
.sw-landing .sw-hero-actions { margin-top: clamp(18px, 3.5vh, 40px) !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
.sw-landing .sw-hero-actions .wp-block-button { flex: 1 1 0; margin: 0 !important; display: flex; }
.sw-landing .sw-hero-actions .wp-block-button__link { width: 100%; justify-content: center; text-align: center; font-size: 14.5px !important; padding: 14px 8px !important; line-height: 1.2; white-space: normal; }
.sw-landing .sw-hero-actions .sw-button--outline .wp-block-button__link,
.sw-landing .sw-hero-actions .sw-button--outline a { color: #8a6410 !important; border: 1.5px solid #8a6410 !important; background: rgba(255,255,255,.72) !important; }
/* 4 сферы — прижаты к НИЗУ (margin-top:auto), под ними пусто не остаётся; сцена с
канистрой проступает выше за текстом, к низу — чистый кремовый градиент */
.sw-landing .sw-hero .sw-applications-strip {
position: relative; z-index: 2; flex: 0 0 auto !important;
margin: auto 0 0 0 !important;
padding: 0 18px calc(14px + env(safe-area-inset-bottom)) !important;
clip-path: none !important; -webkit-clip-path: none !important; border: 0 !important;
background: transparent !important;
}
.sw-landing .sw-hero .sw-applications-strip__grid {
display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important;
justify-content: initial !important; column-gap: 14px !important; row-gap: 12px !important; transform: none !important;
}
.sw-landing .sw-hero .sw-applications-strip__grid a { width: auto !important; flex: 1 1 auto !important; gap: 10px !important; padding: 2px 0 !important; color: #1c1a16 !important; }
.sw-landing .sw-hero .sw-applications-strip__grid a > span:last-child { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; hyphens: none !important; -webkit-hyphens: none !important; word-break: normal !important; overflow-wrap: break-word !important; }
.sw-landing .sw-hero .sw-applications-strip__grid .sw-icon { flex: 0 0 36px !important; width: 36px !important; height: 36px !important; background: #fffaf1 !important; border: 1px solid rgba(138,100,16,.30) !important; color: #8a6410 !important; }
.sw-landing .sw-hero .sw-applications-strip__grid b { color: #1c1a16 !important; text-shadow: none !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; hyphens: none !important; word-break: normal !important; overflow-wrap: break-word !important; }
.sw-landing .sw-hero .sw-applications-strip__grid small { color: #6a6256 !important; text-shadow: none !important; font-size: 12px !important; line-height: 1.25 !important; hyphens: none !important; word-break: normal !important; }
.sw-landing .sw-hero, .sw-landing .sw-hero__inner, .sw-landing .sw-hero .sw-applications-strip { max-width: 100% !important; }
.sw-landing .sw-hero * { min-width: 0; }
}
/* Узкие телефоны (≤480, в т.ч. 320/360/375): защита от переполнения/обрезки.
`.sw-hero__copy` — flex-item с min-width:auto (≈min-content) не сжимался ниже ~339px →
на 320 hero-текст/кнопки и таблица характеристик обрезались под overflow-x:clip. */
@media (max-width: 480px) {
.sw-landing .sw-hero__copy { min-width: 0; }
/* канистра — у ПРАВОГО края (как десктоп), целиком. Готча cover: МЕНЬШЕ % = канистра ПРАВЕЕ
(56% — правый край канистры у края экрана, целиком; "right"/100% — наоборот срезало левую половину). */
.sw-landing .sw-hero { background-position: center, 56% center !important; }
.sw-landing .sw-hero .sw-hero__inner { padding: 10px 16px 0 !important; }
.sw-landing .sw-hero-title { hyphens: none; -webkit-hyphens: none; overflow-wrap: break-word; word-break: normal; }
.sw-landing .sw-hero-title span { font-size: clamp(20px, 5.8vw, 25px) !important; }
.sw-landing .sw-hero-title strong { font-size: clamp(13px, 3.8vw, 16px) !important; }
.sw-landing .sw-hero__copy p,
.sw-landing .sw-hero__copy li,
.sw-landing .sw-hero__copy small { overflow-wrap: break-word; hyphens: none; }
.sw-landing .sw-hero-proofs { margin-top: clamp(12px, 2.4vh, 26px) !important; gap: clamp(9px, 1.8vh, 16px) !important; }
.sw-landing .sw-hero-proofs li { font-size: 14px !important; }
.sw-landing .sw-hero-actions { margin-top: clamp(14px, 2.8vh, 30px) !important; }
.sw-landing .sw-hero-actions .wp-block-button__link { font-size: 14px !important; padding: 13px 6px !important; }
/* сферы — В ОДНУ КОЛОНКУ: длинные слова влезают целиком; заголовок + подпись.
Просторнее: больше row-gap + воздух внутри строки, чтобы не было «плотно». */
.sw-landing .sw-hero .sw-applications-strip__grid { grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: clamp(15px, 3.4vh, 32px) !important; }
.sw-landing .sw-hero .sw-applications-strip__grid a { gap: 13px !important; padding: 3px 0 !important; }
.sw-landing .sw-hero .sw-applications-strip__grid .sw-icon { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; }
.sw-landing .sw-hero .sw-applications-strip__grid b { font-size: 14px !important; font-weight: 700 !important; }
.sw-landing .sw-hero .sw-applications-strip__grid small { display: block !important; font-size: 12px !important; }
/* таблица характеристик: умещаем в экран, ячейки переносим (без внутреннего скролла) */
.sw-landing .sw-table-scroll table,
.sw-landing .sw-about table { width: 100% !important; min-width: 0 !important; }
.sw-landing .sw-about td,
.sw-landing .sw-about th { overflow-wrap: anywhere; }
/* длинные адрес/реквизиты/контакты — перенос вместо выхода за контейнер */
.sw-landing address,
.sw-landing .sw-contact-card__value,
.sw-landing .sw-reqs__grid dd { overflow-wrap: anywhere; }
}
/* очень тесные телефоны (≤360×~800): максимально компактно, чтобы влезть в 100svh */
@media (max-width: 360px) {
.sw-landing .sw-hero { background-position: center, 56% center !important; }
.sw-landing .sw-hero .sw-hero__inner { padding: 14px 14px 0 !important; }
.sw-landing .sw-hero-title span { font-size: clamp(18px, 5.6vw, 22px) !important; line-height: 1.18 !important; }
.sw-landing .sw-hero-title strong { font-size: 13px !important; line-height: 1.26 !important; }
.sw-landing .sw-hero-title em { font-size: 11.5px !important; }
.sw-landing .sw-hero-proofs { margin-top: clamp(10px, 2vh, 22px) !important; gap: clamp(8px, 1.6vh, 14px) !important; }
.sw-landing .sw-hero-proofs li { font-size: 13px !important; }
.sw-landing .sw-hero-actions { margin-top: clamp(12px, 2.4vh, 26px) !important; }
.sw-landing .sw-hero-actions .wp-block-button__link { font-size: 13px !important; padding: 12px 6px !important; }
.sw-landing .sw-hero .sw-applications-strip { padding: 0 14px calc(12px + env(safe-area-inset-bottom)) !important; }
.sw-landing .sw-hero .sw-applications-strip__grid { column-gap: 10px !important; row-gap: clamp(12px, 2.6vh, 24px) !important; }
.sw-landing .sw-hero .sw-applications-strip__grid a { gap: 11px !important; padding: 2px 0 !important; }
.sw-landing .sw-hero .sw-applications-strip__grid .sw-icon { flex: 0 0 36px !important; width: 36px !important; height: 36px !important; }
.sw-landing .sw-hero .sw-applications-strip__grid b { font-size: 13.5px !important; font-weight: 700 !important; }
.sw-landing .sw-hero .sw-applications-strip__grid small { display: block !important; font-size: 11.5px !important; }
}
/* ===== ЕДИНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ: одинаковый зазор и паддинг у всех секций =====
Плагин задавал каждой секции свои margin/padding (gap 18–28, padding 25–30) →
«разные отступы». Нормализуем: зазор 30px, внутренний паддинг боксов 34×30. */
.sw-landing .sw-about,
.sw-landing .sw-spheres,
.sw-landing .sw-documents,
.sw-landing .sw-skryabin,
.sw-landing .sw-contacts {
margin-top: 32px !important;
margin-bottom: 0 !important;
}
.sw-landing .sw-about,
.sw-landing .sw-spheres,
.sw-landing .sw-documents,
.sw-landing .sw-skryabin {
padding: 32px 32px !important;
}
.sw-landing .sw-footer { margin-top: 48px !important; padding-block: 44px 24px !important; }
/* ===========================================================================
* СЕКЦИЯ «О ПРЕПАРАТЕ»: ~100vh (контент центрирован, секция видна целиком при
* прокрутке), таблица — чистая карточка. Фон #fffaf1 КАК У ВСЕХ секций (плагин) —
* НЕ переопределяем. Структура — нативные WP-колонки, плитки в левой колонке (как было).
* ======================================================================== */
.sw-landing .sw-about {
align-items: flex-start !important;
padding: 40px !important;
min-height: 736px; /* высота карточки ~736px (по запросу, на глаз) */
margin-bottom: 64px !important; /* зазор до «Сферы применения» = 64px (по запросу; max(64,32) при схлопывании) */
}
.sw-landing .sw-about__copy > h2 { margin: 0 0 12px !important; }
.sw-landing .sw-about .sw-check-list .sw-lucide,
.sw-landing .sw-about .sw-check-list .dashicons { color: var(--sw-gold-dark); }
/* иконка-галочка (14px svg) в гриде top-align сидела на 4px выше центра строки текста → выравниваем по 1-й строке */
.sw-landing .sw-check-list li > .sw-lucide { margin-top: 4px; }
.sw-landing .sw-specs > h3 { margin: 0 0 16px !important; }
/* таблица — ЧИСТАЯ карточка: кремовая шапка, зебра, только горизонтальные линии строк (без рамок-каши) */
.sw-landing .sw-specs .sw-table-scroll,
.sw-landing .sw-specs .wp-block-table { background: #fff; border: 1px solid var(--sw-line); border-radius: 8px; overflow: hidden; margin: 0; }
.sw-landing .sw-specs table { width: 100%; border-collapse: collapse; margin: 0; border: none !important; }
.sw-landing .sw-specs td, .sw-landing .sw-specs th { padding: 10px 14px; border: none !important; border-bottom: 1px solid var(--sw-line) !important; text-align: left; vertical-align: top; }
.sw-landing .sw-specs tbody tr:last-child td { border-bottom: none !important; }
.sw-landing .sw-specs thead th, .sw-landing .sw-specs tr:first-child th { background: #efe6d4; color: var(--sw-gold-dark); font-weight: 700; }
.sw-landing .sw-specs tbody tr:nth-child(even) td { background: #fdfaf3; }
.sw-landing .sw-specs td:first-child, .sw-landing .sw-specs th:first-child { font-weight: 600; width: 46%; }
@media (max-width: 980px) {
.sw-landing .sw-about { min-height: auto; align-items: stretch; padding: 32px !important; }
.sw-landing .sw-specs td, .sw-landing .sw-specs th { padding: 10px; }
}
@media (max-width: 480px) {
.sw-landing .sw-specs table { width: 100% !important; min-width: 0 !important; }
.sw-landing .sw-specs td, .sw-landing .sw-specs th { padding: 8px; font-size: 13px !important; overflow-wrap: anywhere; }
.sw-landing .sw-specs td:first-child { font-weight: 700; width: 42%; }
}
/* Подвал: аккуратные колонки (бренд | Контакты | Продукция | Покупателю), единые заголовки,
ровные отступы, тонкий разделитель перед копирайтом. Референс — РОССЕТИ. */
.sw-landing .sw-footer__grid {
display: grid;
grid-template-columns: auto auto auto auto;
justify-content: space-between; /* бренд — к левому краю, «Покупателю» — к правому, воздух равномерно между колонками */
column-gap: 24px;
row-gap: 32px;
align-items: start;
}
.sw-landing .sw-footer__brand { max-width: 220px; } /* тэглайн переносится как раньше */
.sw-landing .sw-footer__contacts { max-width: 300px; } /* длинный адрес переносится, колонка не растягивается */
.sw-landing .sw-footer__brand img { max-width: 152px; height: auto; }
.sw-landing .sw-footer__brand p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: #5d564b; }
/* единый заголовок колонки */
.sw-landing .sw-footer__contacts > h3,
.sw-landing .sw-footer__links > h3 { margin: 0 0 16px; font-size: 15px; font-weight: 700; color: #1c1a16; line-height: 1.2; }
/* Контакты */
.sw-landing .sw-footer__contacts address { font-style: normal; display: flex; flex-direction: column; gap: 11px; }
.sw-landing .sw-footer__contacts address a,
.sw-landing .sw-footer__contacts address > span { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.45; color: #5d564b; text-decoration: none; }
.sw-landing .sw-footer__contacts address a:hover { color: var(--sw-gold-dark); }
.sw-landing .sw-footer__contacts .dashicons { flex: 0 0 auto; color: var(--sw-gold-dark); font-size: 17px; width: 17px; height: 17px; margin-top: 1px; }
.sw-landing .sw-footer__contacts svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--sw-gold-dark); margin-top: 2px; }
/* Ссылки */
.sw-landing .sw-footer__links p { margin: 0 0 11px; }
.sw-landing .sw-footer__links p:last-child { margin-bottom: 0; }
.sw-landing .sw-footer__links a { font-size: 14px; line-height: 1.4; color: #5d564b; text-decoration: none; }
.sw-landing .sw-footer__links a:hover { color: var(--sw-gold-dark); }
/* Нижняя строка: тонкий разделитель + копирайт/политика по краям */
.sw-landing .sw-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--sw-line); font-size: 13px; color: #7a7264; }
.sw-landing .sw-footer__bottom a { color: #7a7264; text-decoration: none; }
.sw-landing .sw-footer__bottom a:hover { color: var(--sw-gold-dark); }
.sw-landing .sw-footer__legal-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sw-landing .sw-cookie-settings { appearance: none; border: 0; padding: 0; background: transparent; color: #7a7264; font: inherit; cursor: pointer; text-decoration: none; }
.sw-landing .sw-cookie-settings:hover { color: var(--sw-gold-dark); }
.sw-landing .sw-cookie-settings:focus-visible { outline: 2px solid var(--sw-gold-dark); outline-offset: 3px; border-radius: 2px; }
/* адаптив */
@media (max-width: 960px) {
.sw-landing .sw-footer__grid { grid-template-columns: 1fr 1fr; justify-content: stretch; gap: 30px 32px; }
.sw-landing .sw-footer__brand, .sw-landing .sw-footer__contacts { max-width: none; }
}
@media (max-width: 520px) {
.sw-landing .sw-footer__grid { grid-template-columns: 1fr; gap: 26px; }
.sw-landing .sw-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
.sw-landing .sw-footer__legal-links { gap: 8px; flex-direction: column; align-items: flex-start; }
}
/* Секция «Подбор решения / Выберите объект» убрана по решению клиента. */
.sw-landing #selection,
.sw-landing .sw-selection {
display: none !important;
}
/* ===== Типографика: единая по ролям, читаемо, без переполнения =====
Плагин задаёт десятки разных мелких размеров (p 10–17, h2 17–29, h3 11–21,
td 11, small 9–10). Приводим к единой шкале — но БЕЗ перебора, чтобы плотные
многоколоночные карточки не «жало». */
.sw-landing p,
.sw-landing li {
font-size: 14px !important;
line-height: 1.6;
}
.sw-landing h2 {
font-size: 24px !important;
line-height: 1.25;
}
.sw-landing h3,
.sw-landing b {
font-size: 15px !important;
line-height: 1.3;
}
.sw-landing td,
.sw-landing th {
font-size: 14.5px !important;
}
.sw-landing small,
.sw-landing dd,
.sw-landing .sw-eyebrow,
.sw-landing .sw-fallback-policy span {
font-size: 13px !important;
line-height: 1.45;
}
.sw-landing .sw-eyebrow {
letter-spacing: 0.04em;
}
/* плотные многоколоночные карточки — компактный текст, чтобы не переносилось колом */
.sw-landing .sw-confidence__cards p,
.sw-landing .sw-supply__grid p,
.sw-landing .sw-application-panel li,
.sw-landing .sw-process__steps p {
font-size: 14px !important;
line-height: 1.5;
}
.sw-landing .sw-confidence__cards h3,
.sw-landing .sw-process__steps h3 {
font-size: 15px !important;
}
@media (max-width: 660px) {
.sw-landing h2 { font-size: 23px !important; }
.sw-landing h3, .sw-landing b { font-size: 15px !important; }
}
/* Иконки-замены (Lucide) вместо dashicons */
.sw-landing svg.sw-lucide,
svg.sw-lucide {
display: inline-block;
vertical-align: middle;
flex: 0 0 auto;
}
/* =========================================================================
* Документы и подтверждения — вкладки + карусель + лайтбокс
* ===================================================================== */
.sw-landing .sw-documents.sw-docs--carousel {
display: block;
text-align: left;
min-height: 736px; /* высота карточки ~736px (как «О препарате»/«Сферы») */
margin-bottom: 64px !important; /* зазор до следующей секции = 64px */
}
.sw-docs__head { margin-bottom: 12px; } /* поджато на 6px, чтобы карточка села ровно в 736px */
.sw-landing .sw-documents.sw-docs--carousel .sw-docs__head h2 {
margin: 0 0 8px;
justify-self: start;
text-align: left;
}
.sw-docs__sub {
margin: 0;
max-width: 60ch;
color: #5d564b;
font-size: 15px !important;
line-height: 1.55;
}
/* вкладки */
.sw-docs__tabs {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
border-bottom: 1px solid var(--sw-line);
margin-bottom: 18px; /* поджато на 6px, чтобы карточка села ровно в 736px */
}
.sw-docs__tab {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 12px 2px;
margin-bottom: -1px;
border: 0;
border-bottom: 2px solid transparent;
background: none;
color: #6a6256;
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: color 140ms ease, border-color 140ms ease;
}
.sw-docs__tab .sw-lucide { color: #9b8a63; transition: color 140ms ease; }
.sw-docs__tab:hover { color: #2c281f; }
.sw-docs__tab.is-active {
color: var(--sw-gold-dark);
border-bottom-color: var(--sw-gold);
}
.sw-docs__tab.is-active .sw-lucide { color: var(--sw-gold-dark); }
.sw-docs__panel { display: none; }
.sw-docs__panel.is-active { display: block; }
/* карусель */
.sw-docs__carousel {
position: relative;
--cpv: 4;
--gap: 16px;
padding: 0 6px;
}
.sw-docs__viewport { overflow: hidden; }
.sw-docs__track {
display: flex;
gap: var(--gap);
transition: transform 360ms cubic-bezier(.22,.61,.36,1);
will-change: transform;
}
/* когда карточек меньше, чем в ряд (1 страница) — центрируем их и прячем стрелки (не растягиваем) */
.sw-docs__carousel.sw-docs--single .sw-docs__track { justify-content: center; }
.sw-docs__carousel.sw-docs--single .sw-docs__arrow { display: none; }
.sw-docs__card {
flex: 0 0 calc((100% - (var(--cpv) - 1) * var(--gap)) / var(--cpv));
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px;
border: 1px solid var(--sw-line);
border-radius: var(--sw-radius);
background: #fff;
box-shadow: 0 12px 30px rgba(98, 70, 20, 0.06);
cursor: pointer;
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.sw-docs__card:hover,
.sw-docs__card:focus-visible {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(98, 70, 20, 0.12);
border-color: var(--sw-gold-soft);
}
.sw-docs__thumb {
aspect-ratio: 1 / 1.3;
border: 1px solid rgba(159, 129, 75, 0.16);
border-radius: 6px;
background: #fbfaf7;
overflow: hidden;
}
.sw-docs__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
}
.sw-docs__card b {
font-size: 14px !important;
font-weight: 700;
line-height: 1.32;
color: #2c281f;
text-align: center;
}
/* стрелки */
.sw-docs__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 42px;
height: 42px;
display: grid;
place-items: center;
padding: 0; /* убираем UA-паддинг кнопки → иконка по центру кружка */
line-height: 0;
border: 1px solid var(--sw-line);
border-radius: 50%;
background: #fff;
color: var(--sw-gold-dark);
box-shadow: 0 10px 24px rgba(98, 70, 20, 0.14);
cursor: pointer;
transition: background 140ms ease, transform 140ms ease, opacity 140ms ease;
}
.sw-docs__arrow svg { display: block; }
.sw-docs__arrow--prev { left: -14px; }
.sw-docs__arrow--next { right: -14px; }
/* base: золотая иконка на белом. hover: ЗОЛОТОЙ фон + тёмная иконка — раньше кремовый
сливался с фоном секции; теперь стрелка явно темнеет и читается. */
.sw-docs__arrow { color: var(--sw-gold-dark) !important; }
.sw-landing .sw-docs__arrow:hover,
.sw-landing .sw-docs__arrow:focus,
.sw-landing .sw-docs__arrow:active {
background-color: var(--sw-gold) !important;
background-image: none !important;
border-color: var(--sw-gold) !important;
color: #161410 !important;
}
.sw-docs__arrow:hover { transform: translateY(-50%) scale(1.05); }
.sw-docs__arrow:disabled { opacity: 0.35; cursor: default; }
/* серверный fallback списка документов (SEO / без JS; JS заменяет на карусель) */
.sw-docs-ssr { display: grid; gap: 24px; }
.sw-docs-ssr__group { display: grid; gap: 10px; }
.sw-docs-ssr__group h3 { margin: 0; font-size: 16px; font-weight: 800; color: #2c281f; }
.sw-docs-ssr__list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.sw-docs-ssr__list a { color: var(--sw-gold-dark); text-decoration: none; }
.sw-docs-ssr__list a:hover, .sw-docs-ssr__list a:focus-visible { text-decoration: underline; }
.sw-docs-ssr__archive { margin: 4px 0 0; }
.sw-docs-ssr__archive a { color: var(--sw-gold-dark); font-weight: 700; text-decoration: none; }
.sw-docs-ssr__soon { margin: 0; color: #645d52; }
/* точки */
.sw-docs__dots {
display: flex;
justify-content: center;
gap: 0;
margin-top: 18px;
}
.sw-docs__dot {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.sw-docs__dot::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(159, 129, 75, 0.3);
transition: width 140ms ease, height 140ms ease, background 140ms ease;
}
.sw-docs__dot.is-active::before {
width: 11px;
height: 11px;
background: var(--sw-gold);
}
.sw-docs__actions {
display: flex;
justify-content: center;
margin-top: 20px;
}
.sw-docs__archive { min-height: 46px; }
/* пустая вкладка */
.sw-docs__empty {
display: grid;
justify-items: center;
gap: 8px;
padding: 48px 20px;
text-align: center;
color: #645d52;
}
.sw-docs__empty .sw-lucide { color: var(--sw-gold); opacity: 0.8; }
.sw-docs__empty b { font-size: 17px !important; color: #4a4439; }
.sw-docs__empty span { font-size: 14px !important; max-width: 38ch; }
/* лайтбокс */
.sw-docs__lightbox { position: fixed; inset: 0; z-index: 9999; display: none; }
.sw-docs__lightbox.is-open { display: block; }
.sw-docs__lb-backdrop {
position: absolute; inset: 0;
background: rgba(24, 18, 6, 0.62);
backdrop-filter: blur(2px);
}
.sw-docs__lb-dialog {
position: relative;
margin: 4vh auto;
width: min(720px, 92vw);
max-height: 92vh;
display: flex;
flex-direction: column;
background: #fffdf8;
border-radius: 12px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.sw-docs__lb-close {
position: absolute; top: 12px; right: 12px;
width: 38px; height: 38px;
display: grid; place-items: center;
padding: 0; /* убираем UA-паддинг → крестик по центру */
line-height: 0;
border: 0; border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: #2c281f;
box-shadow: 0 6px 16px rgba(0,0,0,.15);
cursor: pointer; z-index: 2;
}
.sw-docs__lb-close svg { display: block; }
.sw-docs__lb-close,
.sw-docs__lb-close:hover,
.sw-docs__lb-close:focus,
.sw-docs__lb-close:active { background: #fff !important; color: #2c281f !important; }
.sw-docs__lb-title {
margin: 0;
padding: 18px 56px 14px 22px;
font-size: 17px !important;
font-weight: 800;
color: #2c281f;
border-bottom: 1px solid var(--sw-line);
}
.sw-docs__lb-pages {
padding: 18px;
overflow-y: auto;
display: grid;
gap: 16px;
background: #f3eee3;
}
.sw-docs__lb-pages img {
width: 100%;
height: auto;
display: block;
border: 1px solid rgba(159, 129, 75, 0.2);
border-radius: 4px;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
background: #fff;
}
.sw-docs__lb-foot {
padding: 14px 22px;
border-top: 1px solid var(--sw-line);
display: flex;
justify-content: flex-end;
}
body.sw-docs-noscroll { overflow: hidden; }
@media (max-width: 1023px) {
.sw-docs__arrow--prev { left: -6px; }
.sw-docs__arrow--next { right: -6px; }
}
@media (max-width: 660px) {
.sw-docs__carousel { padding: 0; }
.sw-docs__arrow { width: 36px; height: 36px; }
.sw-docs__arrow--prev { left: 2px; }
.sw-docs__arrow--next { right: 2px; }
/* вкладки переносятся на строки (3 шт. — горизонтальный скролл выглядел как обрезка) */
.sw-docs__tabs {
flex-wrap: wrap;
gap: 4px 18px;
}
.sw-docs__tab {
flex: 0 1 auto;
max-width: 100%;
white-space: normal;
font-size: 14px;
}
}
/* =========================================================================
* REV-1: блоки «Где применяется», «Скрябин», контакты + единая шапка.
* ===================================================================== */
/* ===== Шапка (единая, рендерится темой): лого · тэглайн · ИНН · тел · почта ===== */
html { scroll-padding-top: 140px; }
.sw-landing .sw-header { position: sticky; top: 0; z-index: 60; background: #fffaf1; border-bottom: 1px solid var(--sw-line); }
.sw-landing .sw-header .sw-header__inner { display: flex !important; justify-content: space-between !important; align-items: center; gap: 0 !important; min-height: 84px; }
.sw-landing .sw-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.sw-landing .sw-logo img { height: 44px; width: auto; display: block; }
.sw-landing .sw-header-tagline { margin: 0; align-self: center; flex: 0 1 230px; max-width: 230px; font-size: 13px; line-height: 1.3; color: #6a6256; }
.sw-landing .sw-h-inn { color: #3a352d; font-size: 13px; font-weight: 600; }
.sw-landing .sw-h-inn,
.sw-landing .sw-h-col { display: flex; align-items: center; gap: 8px; padding: 0; flex: 0 0 auto; }
.sw-landing .sw-h-inn .sw-lucide { color: #9b8a63; }
.sw-landing .sw-h-col { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
/* Почтовая колонка выровнена ВЛЕВО как телефонная → «Отправить заявку» под почтой
выровнена так же, как «Заказать звонок» под телефоном. Правый край почты и так у
границы разметки за счёт space-between на .sw-header__inner. */
.sw-landing .sw-h-email { padding-right: 0; align-items: flex-start; text-align: left; }
.sw-landing .sw-h-main { display: inline-flex; align-items: center; gap: 6px; color: #1c1a16; font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.sw-landing .sw-h-main .sw-lucide { color: var(--sw-gold-dark); flex: 0 0 auto; }
.sw-landing .sw-h-sub { color: var(--sw-gold-dark); font-size: 12.5px; text-decoration: underline; }
.sw-landing .sw-h-sub:hover { text-decoration: none; }
.sw-landing .sw-burger { display: none; }
.sw-landing .sw-header__navline { border-top: 1px solid var(--sw-line); background: var(--sw-cream); }
/* Нав-меню: шире промежутки между пунктами (красивее) */
.sw-landing .sw-nav--main { display: flex !important; justify-content: center !important; align-items: center; gap: 60px !important; }
.sw-landing .sw-nav--main > a { margin: 0 !important; }
.sw-landing .sw-nav--main { display: flex; justify-content: center; gap: 36px; }
.sw-landing .sw-nav--main a { display: inline-block; padding: 14px 2px; color: #2c281f; font-weight: 700; font-size: 14px; text-decoration: none; border-bottom: 2px solid transparent; transition: color .14s ease, border-color .14s ease; }
.sw-landing .sw-nav--main a:hover { color: var(--sw-gold-dark); }
.sw-landing .sw-nav--main a[aria-current="page"] { color: var(--sw-gold-dark); border-bottom-color: var(--sw-gold); }
/* ===== Мобайл/планшет шапка (≤980): только логотип + бургер. Контакты — в off-canvas меню ===== */
@media (max-width: 980px) {
.sw-landing .sw-header .sw-header__inner { min-height: 62px; gap: 12px; align-items: center; }
/* слоган, ИНН, телефон, почта убираем из полосы — переезжают в меню-drawer */
.sw-landing .sw-header-tagline,
.sw-landing .sw-h-inn,
.sw-landing .sw-h-col { display: none !important; }
.sw-landing .sw-logo { margin-right: auto; }
.sw-landing .sw-logo img { height: 38px; }
/* Бургер: морф menu→x на родных SVG (.sw-lucide), без псевдоэлементов */
.sw-landing .sw-burger {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto; width: 44px; height: 44px; padding: 0;
border: 1px solid var(--sw-line); border-radius: 8px; background: #fff;
color: #2c281f; cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.sw-landing .sw-burger:hover { border-color: var(--sw-gold); }
.sw-landing .sw-burger .sw-lucide:last-child { display: none; }
.sw-landing .sw-header.is-menu-open .sw-burger { background: var(--sw-cream); border-color: var(--sw-gold); }
.sw-landing .sw-header.is-menu-open .sw-burger .sw-lucide:first-child { display: none; }
.sw-landing .sw-header.is-menu-open .sw-burger .sw-lucide:last-child { display: inline-flex; }
/* navline на ≤980 больше НЕ «меню» — прячем (пункты клонируются в drawer) */
.sw-landing .sw-header__navline { display: none !important; }
/* шапка-полоса поверх выехавшей панели → логотип и бургер-× видны и кликабельны (drawer z-9997) */
.sw-landing .sw-header.is-menu-open { z-index: 9998; }
/* ── Затемняющий оверлей (создаётся JS на уровне body) ── */
.sw-drawer-overlay {
position: fixed; inset: 0; z-index: 9996;
background: rgba(28, 22, 12, .46);
opacity: 0; transition: opacity .3s ease;
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
body.sw-menu-open .sw-drawer-overlay { opacity: 1; }
/* ── Выезжающая панель справа ── */
.sw-drawer {
position: fixed; top: 0; right: 0; z-index: 9997;
width: min(86vw, 360px); height: 100%;
display: flex; flex-direction: column;
background: #fffaf1; border-left: 3px solid var(--sw-gold);
box-shadow: -12px 0 32px rgba(28, 22, 12, .18);
transform: translateX(100%);
transition: transform .32s cubic-bezier(.4, 0, .2, 1);
overflow-y: auto; -webkit-overflow-scrolling: touch;
}
body.sw-menu-open .sw-drawer { transform: translateX(0); }
.sw-drawer__nav { display: flex; flex-direction: column; padding: 74px 0 8px; }
.sw-drawer__nav a {
padding: 15px 24px; font-size: 17px; font-weight: 700;
color: #2c281f; text-decoration: none; border-bottom: 1px solid var(--sw-line);
transition: color .15s ease, background .15s ease, padding-left .15s ease;
}
.sw-drawer__nav a:first-child { border-top: 1px solid var(--sw-line); }
.sw-drawer__nav a:hover,
.sw-drawer__nav a:focus-visible { color: var(--sw-gold-dark); background: var(--sw-cream); padding-left: 30px; outline: none; }
.sw-drawer__nav a[aria-current="page"] { color: var(--sw-gold-dark); }
/* Контакты + кнопки прибиты к низу панели */
.sw-drawer__contacts {
margin-top: auto; padding: 20px 24px 24px;
border-top: 1px solid var(--sw-line); background: #fdf6e9;
}
.sw-drawer__contact {
display: flex; align-items: center; gap: 12px; padding: 9px 0;
color: #1c1a16; font-size: 15px; font-weight: 700; text-decoration: none;
}
.sw-drawer__contact .sw-lucide { color: var(--sw-gold-dark); flex: 0 0 auto; }
.sw-drawer__contact:hover { color: var(--sw-gold-dark); }
.sw-drawer__cta { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sw-drawer__btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 46px; border-radius: 8px; font-size: 15px; font-weight: 800;
text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.sw-drawer__btn--gold { background: linear-gradient(180deg, #f8c94c, #e3a620); color: #161410; }
.sw-drawer__btn--gold:hover { background: var(--sw-gold-dark); color: #fff; }
.sw-drawer__btn--ghost { background: #fff; color: #2c281f; border: 1px solid var(--sw-line); }
.sw-drawer__btn--ghost:hover { border-color: var(--sw-gold); background: var(--sw-cream); }
}
/* scroll-lock body при открытом меню */
body.sw-menu-open { overflow: hidden; }
/* drawer/оверлей существуют только ≤980 */
@media (min-width: 981px) { .sw-drawer, .sw-drawer-overlay { display: none !important; } }
/* уважать prefers-reduced-motion */
@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
.sw-drawer, .sw-drawer-overlay { transition: none !important; }
}
/* ── Компактная шапка при скролле ───────────────────────────────────────
Метрики держим на переменных самого хедера; компакт переопределяет их
СКАЧКОМ — никаких transition на размерах/паддингах (это layout-свойства,
они дали бы reflow каждый кадр). Плавно анимируем только opacity и тень.
contain:layout локализует пересчёт от схлопывания flex-basis внутри коробки. */
.sw-landing .sw-header {
--sw-logo-h: 44px;
--sw-toprow-h: 84px;
--sw-nav-pad: 14px;
contain: layout;
transition: box-shadow .18s cubic-bezier(.4,0,.2,1);
}
.sw-landing .sw-header .sw-header__inner { min-height: var(--sw-toprow-h); }
.sw-landing .sw-logo img { height: var(--sw-logo-h); }
.sw-landing .sw-nav--main a { padding-top: var(--sw-nav-pad); padding-bottom: var(--sw-nav-pad); }
/* Гаснущие в компакте элементы — анимируем только дешёвый opacity. */
.sw-landing .sw-header-tagline,
.sw-landing .sw-h-inn,
.sw-landing .sw-h-sub {
transition: opacity .18s cubic-bezier(.4,0,.2,1);
}
/* ── Компактное состояние (десктоп) ── */
.sw-landing .sw-header.is-compact {
--sw-logo-h: 36px; /* лого -8px по 8px-сетке, остаётся читаемым брендом */
--sw-toprow-h: 64px; /* top-row -20px */
--sw-nav-pad: 9px; /* navline ~52px -> ~42px */
box-shadow: 0 2px 8px rgba(0,0,0,.06); /* лёгкий отрыв от контента (бордер уже есть) */
}
/* Прячем второстепенное: слоган, ИНН и под-ссылки. Гасим opacity + схлопываем
ширину/высоту, чтобы реально уплотнить строку (а не оставить пустое место). */
.sw-landing .sw-header.is-compact .sw-header-tagline,
.sw-landing .sw-header.is-compact .sw-h-inn {
opacity: 0;
max-width: 0;
max-height: 0; /* без этого длинный текст переносится в узкий столбец и РАСТЯГИВАЕТ строку */
flex-basis: 0;
margin: 0;
padding: 0;
overflow: hidden;
white-space: nowrap; /* держим в одну строку, ширину режет overflow */
pointer-events: none;
}
.sw-landing .sw-header.is-compact .sw-h-sub {
opacity: 0;
max-height: 0;
margin: 0;
overflow: hidden;
pointer-events: none;
}
/* В компакте слоган+ИНН схлопнуты → space-between разносит телефон и почту по краям.
Группируем их вместе справа: телефон прижимаем auto-отступом, почту ставим вплотную. */
.sw-landing .sw-header.is-compact .sw-header__inner { justify-content: flex-start !important; }
.sw-landing .sw-header.is-compact .sw-h-phone { margin-left: auto; }
.sw-landing .sw-header.is-compact .sw-h-email { margin-left: 28px; }
/* prefers-reduced-motion: всё мгновенно, без анимаций. */
@media (prefers-reduced-motion: reduce) {
.sw-landing .sw-header,
.sw-landing .sw-header-tagline,
.sw-landing .sw-h-inn,
.sw-landing .sw-h-sub { transition: none !important; }
}
/* <=980px: компакт отключён JS-ом; задаём мобильные БАЗОВЫЕ значения переменных,
чтобы var-правила выше не перебили прежнюю мобильную шапку (лого 38px и т.д.). */
@media (max-width: 980px) {
.sw-landing .sw-header {
--sw-logo-h: 38px;
--sw-toprow-h: 62px;
--sw-nav-pad: 13px;
}
}
/* Блок «Где применяется» */
.sw-landing .sw-spheres {
border: 1px solid var(--sw-line);
border-radius: var(--sw-radius);
background: var(--sw-section);
box-shadow: 0 18px 44px rgba(98, 70, 20, 0.05);
min-height: 736px; /* высота карточки ~736px (как «О препарате») */
margin-bottom: 64px !important; /* зазор до «Документы» = 64px */
}
/* шапка секции — по центру, как на макете клиента: бейдж-eyebrow + крупный заголовок с золотой 2-й строкой */
.sw-spheres__head { margin: 0 auto 22px; max-width: 840px; text-align: center; }
.sw-spheres__head .sw-eyebrow {
display: inline-block; margin: 0 0 14px; padding: 6px 16px; border-radius: 999px;
background: var(--sw-cream); color: var(--sw-gold-dark);
font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
/* .sw-landing-префикс + !important — иначе базовый h2 плагина (24px) перебивает crisp-размер */
.sw-landing .sw-spheres__head h2 { margin: 0 0 12px !important; font-size: clamp(28px, 3.4vw, 40px) !important; line-height: 1.16 !important; font-weight: 800; }
.sw-spheres__head h2 .sw-gold { color: var(--sw-gold-dark); }
.sw-spheres__sub { margin: 0 auto; max-width: 660px; color: #5d564b; font-size: 15px; line-height: 1.55; }
.sw-spheres__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; }
/* карточка-сфера (по макету клиента): фото сверху + круглая иконка внахлёст + заголовок + описание + золотая черта.
Вся карточка кликабельна → /primenenie#slug. */
.sw-sphere {
display: flex; flex-direction: column;
border: 1px solid var(--sw-line);
border-radius: var(--sw-radius);
background: #fff;
box-shadow: 0 12px 30px rgba(98, 70, 20, 0.05);
overflow: hidden;
text-decoration: none; color: inherit;
transition: transform .16s ease, box-shadow .16s ease;
}
.sw-sphere:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(98, 70, 20, 0.12); }
.sw-sphere__photo { display: block; aspect-ratio: 16 / 9; background: #efe7d6; } /* подобрано под высоту 736 (учтена нижняя кнопка) */
.sw-sphere__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-sphere__body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 44px 24px 24px; }
.sw-sphere__icon {
position: absolute; top: -30px; left: 24px;
width: 60px; height: 60px; border-radius: 50%;
display: grid; place-items: center;
background: var(--sw-cream); color: var(--sw-gold-dark);
border: 1px solid var(--sw-gold-soft);
box-shadow: 0 10px 22px rgba(98, 70, 20, 0.18);
}
.sw-sphere h3 { margin: 0; font-size: 18px; line-height: 1.25; color: #2c281f; min-height: 2.5em; }
.sw-sphere p { margin: 0; flex: 1; color: #4a4439; font-size: 14.5px; line-height: 1.5; }
/* золотая полоска (вернули) — растёт при наведении на карточку */
.sw-sphere__bar { width: 40px; height: 3px; border-radius: 2px; background: var(--sw-gold); margin-top: 6px; transition: width .16s ease; }
.sw-sphere:hover .sw-sphere__bar { width: 64px; }
/* одна кнопка под сеткой → страница «Применение» (в стиле сайта) */
.sw-spheres__cta { display: flex; justify-content: center; margin-top: 16px; }
.sw-spheres__cta .sw-button { display: inline-flex; align-items: center; gap: 8px; }
.sw-spheres__cta .sw-button svg { display: block; }
/* Блок «Исследования (Скрябин)» */
.sw-landing .sw-skryabin {
border: 1px solid var(--sw-line);
border-radius: var(--sw-radius);
background: var(--sw-section);
box-shadow: 0 18px 44px rgba(98, 70, 20, 0.05);
}
.sw-skryabin__grid { display: grid; grid-template-columns: 360px 1fr; gap: 32px; align-items: start; }
.sw-skryabin__preview {
display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
position: relative; border-radius: 8px; overflow: hidden;
box-shadow: 0 18px 44px rgba(98, 70, 20, 0.14);
}
.sw-skryabin__preview img { width: 100%; height: auto; display: block; border: 1px solid var(--sw-line); border-radius: 8px; background: #fff; }
.sw-skryabin__preview:hover .sw-skryabin__zoom { background: rgba(185, 135, 29, 0.92); }
.sw-skryabin__zoom {
position: absolute; left: 12px; bottom: 12px;
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; border-radius: 999px;
background: rgba(24, 18, 6, 0.72); color: #fff; font-size: 13px; font-weight: 600;
transition: background 140ms ease;
}
.sw-skryabin__copy h2 { margin: 6px 0 4px; }
.sw-skryabin__tu { margin: 0 0 14px; color: var(--sw-gold-dark); font-weight: 700; font-size: 15px; }
.sw-skryabin__copy p { margin: 0 0 12px; color: #403b34; font-size: 15px; line-height: 1.6; }
.sw-skryabin__copy b { color: var(--sw-gold-dark); }
.sw-skryabin .sw-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--sw-gold-dark); }
.sw-skryabin__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.sw-skryabin__facts > div {
display: flex; gap: 12px; align-items: flex-start;
padding: 16px; border: 1px solid var(--sw-line); border-radius: var(--sw-radius); background: #fff;
}
.sw-skryabin__ficon { flex: 0 0 auto; color: var(--sw-gold-dark); }
.sw-skryabin__facts b { display: block; font-size: 14px; color: #2c281f; }
.sw-skryabin__facts small { display: block; color: #6a6256; font-size: 12.5px; line-height: 1.4; }
.sw-skryabin__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.sw-skryabin__actions .sw-button { margin: 0 !important; } /* плагин вешал margin-top:12 на 2-ю кнопку → сдвиг по высоте; зазор даёт gap */
/* Секция контактов (форма заявки внизу) */
.sw-landing .sw-contacts { margin-top: 22px; }
.sw-landing .sw-contacts h2 { text-align: center; margin: 0 0 16px; }
.sw-landing .sw-contacts .sw-question-form-card { max-width: 720px; margin: 0 auto; }
/* Базовая подгонка вывода Fluent Forms под тему (детально — отдельно) */
.sw-ff-wrap .ff-btn-submit,
.sw-ff-wrap button[type="submit"] {
background: linear-gradient(180deg, #f8c94c 0%, #e3a620 100%) !important;
border: 0 !important;
color: #161410 !important;
font-weight: 800 !important;
border-radius: 8px !important;
box-shadow: 0 14px 28px rgba(181, 126, 25, 0.2) !important;
}
/* Кнопка «Отправить» по центру (правка клиента «кнопочку по центру»): контейнер FF имеет ff-text-left → перебиваем */
.sw-contacts .ff_submit_btn_wrapper,
.sw-ff-wrap .ff_submit_btn_wrapper { text-align: center !important; }
/* scroll-offset якорей под ФИКС-шапку (правка Было→Как должно: при клике «Документы» заголовок секции
не должен уезжать под шапку — был scroll-margin 0). Десктоп компакт-шапка ~109, мобайл-полоса 63. */
.sw-landing #documents, .sw-landing #about, .sw-landing #spheres,
.sw-landing #applications, .sw-landing #contacts, .sw-landing #skryabin { scroll-margin-top: 124px; }
@media (max-width: 980px) {
.sw-landing #documents, .sw-landing #about, .sw-landing #spheres,
.sw-landing #applications, .sw-landing #contacts, .sw-landing #skryabin { scroll-margin-top: 78px; }
}
/* Поля/лейблы/чекбокс/ошибки Fluent Forms под .sw-токены (вместо дефолтной сине-серой палитры).
!important — FF-стили грузятся после overrides.css и перебивают по порядку при равной специфичности. */
.sw-ff-wrap .ff-el-form-control {
border: 1px solid var(--sw-line) !important;
border-radius: var(--sw-radius) !important;
background: #fff !important;
color: #2c281f !important;
transition: border-color .14s ease, box-shadow .14s ease;
}
.sw-ff-wrap .ff-el-form-control:focus {
border-color: var(--sw-gold) !important;
box-shadow: 0 0 0 3px rgba(230, 173, 41, 0.18) !important;
outline: none;
}
.sw-ff-wrap .ff-el-form-control::placeholder { color: #9a917f; }
.sw-ff-wrap .ff-el-input--label label,
.sw-ff-wrap .ff-el-form-check-label { color: #2c281f; }
.sw-ff-wrap .ff-el-is-required .asterisk,
.sw-ff-wrap .asterisk { color: var(--sw-gold-dark); }
.sw-ff-wrap .ff-el-form-check input[type="checkbox"],
.sw-ff-wrap .sw-consent input[type="checkbox"],
.sw-ff-wrap .sw-consent-field input[type="checkbox"] { accent-color: var(--sw-gold); width: 16px; height: 16px; }
.sw-ff-wrap .ff-el-is-error .ff-el-form-control,
.sw-ff-wrap .ff-el-form-control.error { border-color: #c0492f !important; }
.sw-ff-wrap .text-danger,
.sw-ff-wrap .error.text-danger { color: #c0492f; }
/* видимый required-маркер у чекбокса согласия (валидация уже required в FF) */
.sw-ff-wrap .sw-consent-field .ff-el-form-check-label::after { content: " *"; color: var(--sw-gold-dark); font-weight: 700; }
/* =====================================================================
* Форма «Оставить заявку» / консультация → премиум-карточка (ATC #5).
* Расширяет правила выше (submit-градиент, focus-ring, лейблы, чекбокс,
* ::after " *") — НЕ дублирует их. CSS-only; эйбрау/подзаг — опц. WP-разметка.
* ===================================================================== */
.sw-landing .sw-contacts { display: flex; flex-direction: column; align-items: center; }
.sw-landing .sw-contacts h2 { text-align: center; margin: 0 0 8px; color: #1c1a16; font-size: 24px; line-height: 1.2; font-weight: 800; }
.sw-landing .sw-contacts > .sw-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 5px 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sw-gold-dark, #8a6410); background: var(--sw-cream, #f6e9cc); border: 1px solid rgba(230,173,41,.45); border-radius: 999px; }
.sw-landing .sw-contacts > .sw-contacts__sub { text-align: center; max-width: 520px; margin: 0 0 24px; color: #5d564b; font-size: 14px; line-height: 1.55; }
.sw-landing .sw-contacts h2 + .sw-question-form-card { margin-top: 16px; }
/* карточка */
.sw-landing .sw-contacts .sw-question-form-card {
position: relative; max-width: 680px; width: 100%; margin: 0 auto; padding: 40px;
background: var(--sw-section, #fffaf1); border: 1px solid var(--sw-line, #ece0c8); border-radius: 16px;
box-shadow: 0 1px 0 #fff inset, 0 18px 40px -22px rgba(138,100,16,.28), 0 2px 8px rgba(42,38,32,.05);
box-sizing: border-box; overflow: hidden;
}
.sw-landing .sw-contacts .sw-question-form-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, #f8c94c 0%, #e3a620 55%, #8a6410 100%); }
/* раскладка формы (поля в