/* Start:/upload/wintra.webcreator/tokens.css?17812537795171*/ /*! * wintra.webcreator · tokens.css — АВТОГЕНЕРИРУЕМЫЙ файл * Источник: настройки модуля wintra.webcreator (Админка → Настройки модуля). * НЕ РЕДАКТИРОВАТЬ руками — перезапишется при следующем сохранении. * Кастомизация сайта — через /local/templates/<код>/custom.css. * Сгенерирован: 2026-06-12 12:42:59 */ :root { --wintra-color-primary: #033fcb; --wintra-color-secondary: #f5a623; --wintra-color-primary-dark: #002c97; --wintra-color-accent: #fb4825; --wintra-color-ink: #171c21; --wintra-color-ink-muted: #475569; --wintra-color-surface: #f7f9ff; --wintra-color-card: #ffffff; --wintra-type-font-family: Manrope; --wintra-type-size-body: 16px; --wintra-type-size-h4: 1.125rem; --wintra-type-size-h3: 1.625rem; --wintra-type-size-h2: 2.25rem; --wintra-type-size-h1: 3.75rem; --wintra-type-size-hero: 3.75rem; --wintra-type-line-height-body: 1.6; --wintra-type-line-height-heading: 1.1; --wintra-type-weight-heading-light: 300; --wintra-type-weight-heading-bold: 800; --wintra-type-link-decoration: none; --wintra-type-link-transform: none; --wintra-type-size-kicker: 0.75rem; --wintra-type-size-chip: 0.6875rem; --wintra-container-max-width: 1400px; --wintra-container-padding-top: 60px; --wintra-container-padding-right: 20px; --wintra-container-padding-bottom: 60px; --wintra-container-padding-left: 20px; --wintra-module-module-gap: 24px; --wintra-module-module-radius: 28px; --wintra-module-padding-small: 16px; --wintra-module-padding-medium: 24px; --wintra-module-padding-large: 36px; --wintra-button-button-shape: pill; --wintra-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.08); --wintra-font-family: Manrope, system-ui, -apple-system, sans-serif; --wintra-font-size-base: 16px; --wintra-radius: 28px; --wintra-module-gap: 24px; --wintra-padding-small: 16px; --wintra-padding-medium: 24px; --wintra-padding-large: 36px; --wintra-btn-radius: 999px; --wintra-link-decoration: none; --wintra-link-transform: none; --wintra-custom-fw600: 600; --wintra-custom-footer_back: #0a1224; } /* === Авто-классы для использования в поле «Фон» ряда/контейнера === * Имя токена = имя класса. Шеф пишет в Сетке «primary» или * «footer_back» — фон применяется без хардкода CSS-значений. */ html body .wintra-bg-primary { background: var(--wintra-color-primary); } html body .wintra-text-primary { color: var(--wintra-color-primary); } html body .wintra-bg-secondary { background: var(--wintra-color-secondary); } html body .wintra-text-secondary { color: var(--wintra-color-secondary); } html body .wintra-bg-primary-dark { background: var(--wintra-color-primary-dark); } html body .wintra-text-primary-dark { color: var(--wintra-color-primary-dark); } html body .wintra-bg-accent { background: var(--wintra-color-accent); } html body .wintra-text-accent { color: var(--wintra-color-accent); } html body .wintra-bg-ink { background: var(--wintra-color-ink); } html body .wintra-text-ink { color: var(--wintra-color-ink); } html body .wintra-bg-ink-muted { background: var(--wintra-color-ink-muted); } html body .wintra-text-ink-muted { color: var(--wintra-color-ink-muted); } html body .wintra-bg-surface { background: var(--wintra-color-surface); } html body .wintra-text-surface { color: var(--wintra-color-surface); } html body .wintra-bg-card { background: var(--wintra-color-card); } html body .wintra-text-card { color: var(--wintra-color-card); } html body .wintra-custom-footer_back { background: var(--wintra-custom-footer_back); } /* === Effects · CSS-переменные (settings → лежат на :root) === */ :root { --wintra-transition: 200ms; --wintra-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --wintra-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --wintra-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12); --wintra-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.08); } /* === Effects · тени массово === */ .wm-card { box-shadow: var(--wintra-shadow-card); } /* === Effects · hover карточек (scale, medium) === */ .wm-card { transition: transform var(--wintra-transition) ease, box-shadow var(--wintra-transition) ease, border-color var(--wintra-transition) ease; } .wm-card:hover { transform: scale(1.02); } /* === Effects · длительность scrollspy-анимации === */ [uk-scrollspy] { animation-duration: var(--wm-scroll-duration, 500ms); } [uk-scrollspy] .wm-card { animation-duration: var(--wm-scroll-duration, 500ms); } /* === Effects · hover кнопок (lift) === */ .wm-btn { transition: transform var(--wintra-transition) ease, box-shadow var(--wintra-transition) ease, opacity var(--wintra-transition) ease; } .wm-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.15); } /* End */ /* Start:/upload/wintra.webcreator/responsive.css?17812537792404*/ /*! * wintra.webcreator · responsive.css * Авто-генерация: 2026-06-12 12:42:59 * Источник: «11 · Адаптив» (mobile_*/tablet_* scale-множители). * Не редактировать вручную — перетрётся при следующем save. */ /* BASE mobile (xs default). */ :root { --wintra-container-padding-top: 33px; --wintra-container-padding-right: 11px; --wintra-container-padding-bottom: 33px; --wintra-container-padding-left: 11px; --wintra-module-gap: 13px; --wintra-padding-small: 9px; --wintra-padding-medium: 13px; --wintra-padding-large: 20px; --wintra-type-size-hero: 2.63rem; --wintra-type-size-h1: 2.63rem; --wintra-type-size-h2: 1.58rem; --wintra-type-size-h3: 1.14rem; --wintra-type-size-h4: 0.79rem; --wintra-radius: 22px; } .wm-row { --wm-row-margin-top: 12px !important; --wm-row-margin-bottom: 12px !important; --wm-row-padding-top: 24px !important; --wm-row-padding-bottom: 24px !important; } /* @s tablet (from 640px). */ @media (min-width: 640px) { :root { --wintra-container-padding-top: 48px; --wintra-container-padding-right: 16px; --wintra-container-padding-bottom: 48px; --wintra-container-padding-left: 16px; --wintra-module-gap: 19px; --wintra-padding-small: 13px; --wintra-padding-medium: 19px; --wintra-padding-large: 29px; --wintra-type-size-hero: 3.19rem; --wintra-type-size-h1: 3.19rem; --wintra-type-size-h2: 1.91rem; --wintra-type-size-h3: 1.38rem; --wintra-type-size-h4: 0.96rem; } .wm-row { --wm-row-margin-top: unset !important; --wm-row-margin-bottom: unset !important; --wm-row-padding-top: unset !important; --wm-row-padding-bottom: unset !important; } } /* @m desktop (from 960px) - raw base. */ @media (min-width: 960px) { :root { --wintra-container-padding-top: 60px; --wintra-container-padding-right: 20px; --wintra-container-padding-bottom: 60px; --wintra-container-padding-left: 20px; --wintra-module-gap: 24px; --wintra-padding-small: 16px; --wintra-padding-medium: 24px; --wintra-padding-large: 36px; --wintra-type-size-hero: 3.75rem; --wintra-type-size-h1: 3.75rem; --wintra-type-size-h2: 2.25rem; --wintra-type-size-h3: 1.625rem; --wintra-type-size-h4: 1.125rem; --wintra-radius: 28px; } } /* End */ /* Start:/local/templates/wintra.corp/template_styles.css?178125741780233*/ @charset "UTF-8"; /** * wintra.corp — базовые стили корпоративного шаблона * * ВАЖНО: конкретные бренд-значения (цвет, шрифт, spacing) приходят из * ДИЗАЙН-ТОКЕНОВ модуля wintra.webcreator (lib/theme/tokens.php), которые * настраиваются админом через UI модуля. Ниже — только ФАЛЛБЭКИ и * структурная раскладка. */ /* ── Manrope (локально, OFL) ───────────────────────────────────────────── Google Fonts блочится в РФ — шрифт лежит в /fonts/manrope/. Файлы взяты из npm-пакета @fontsource/manrope (SIL OFL, лицензия рядом). Семь весов 200..800 × 2 subset (latin + cyrillic). unicode-range по @fontsource — браузер качает только нужный subset. font-display: swap — сначала рендер system-ui, потом подмена. */ /* 200 */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200; font-display: swap; src: url('/local/templates/wintra.corp/./fonts/manrope/manrope-cyrillic-200-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200; font-display: swap; src: url('/local/templates/wintra.corp/./fonts/manrope/manrope-latin-200-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* 300 */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap; src: url('/local/templates/wintra.corp/./fonts/manrope/manrope-cyrillic-300-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap; src: url('/local/templates/wintra.corp/./fonts/manrope/manrope-latin-300-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* 400 */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('/local/templates/wintra.corp/./fonts/manrope/manrope-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('/local/templates/wintra.corp/./fonts/manrope/manrope-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* 500 */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('/local/templates/wintra.corp/./fonts/manrope/manrope-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('/local/templates/wintra.corp/./fonts/manrope/manrope-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* 600 */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('/local/templates/wintra.corp/./fonts/manrope/manrope-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('/local/templates/wintra.corp/./fonts/manrope/manrope-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* 700 */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('/local/templates/wintra.corp/./fonts/manrope/manrope-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('/local/templates/wintra.corp/./fonts/manrope/manrope-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* 800 */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('/local/templates/wintra.corp/./fonts/manrope/manrope-cyrillic-800-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('/local/templates/wintra.corp/./fonts/manrope/manrope-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Все токены приходят из /upload/wintra.webcreator/tokens.css (Tokens::renderRootCss). В шаблоне НЕ дублируем :root с собственными значениями — это создавало путаницу (свои #1a1a1a против Tokens-color.ink #171c21). Используем прямые имена `--wintra-color-{key}` (где key совпадает с ключами в Tokens::DEFAULTS, которые видны в админке). */ * { box-sizing: border-box; } /* === Глобальная типография: токены модуля > UIKit-defaults ============= * UIKit ставит h2 { font-size: 2rem } (32px), h1 { 1.5rem * stuff } и т.д. * Без этих overrides шефовы токены --wintra-type-size-h* перебиваются * UIKit'ом (одинаковая специфичность 0,0,0,1 + UIKit грузится позже). * * Решение — повышаем специфичность через `html body`. Получается 0,0,0,3 * против UIKit'a 0,0,0,1 — наши токены гарантированно выигрывают. * * Покрываем И теги (h1-h6, p) И UIKit-aliases (.uk-h1...uk-h6). Если * шеф пишет `

` — текст принимает наш size-h2 токен. * * h4/h5/h6 в Tokens::DEFAULTS не определены — используем h3 fallback. * Если позже введём отдельные токены — добавим тут отдельные правила. */ /* Размеры h1/h2/h3 — перебиваем UIKit-defaults через специфичность `html body` (0,0,0,3 vs UIKit 0,0,0,1). Семейство шрифтов / line-height / color — общие токены модуля. font-weight НАМЕРЕННО НЕ задаётся: вес — специфика конкретного макета (где-то light с -bold контрастом, где-то bold целиком, где-то middle). Решается ВНУТРИ контента (теги / с browser-default bolder) либо через custom.css шефа per-site. Не зашиваем в общий template_styles.css. */ html body h1, html body .uk-h1, html body h2, html body .uk-h2, html body h3, html body .uk-h3, html body h4, html body .uk-h4, html body h5, html body .uk-h5, html body h6, html body .uk-h6 { font-family: var(--wintra-type-font-family-heading, var(--wintra-type-font-family)); line-height: var(--wintra-type-line-height-heading, 1.2); color: var(--wintra-color-ink, #0d0d12); margin-top: 0; } html body h1, html body .uk-h1, html body .wm-type-h1 { font-size: var(--wintra-type-size-h1, 36px); } html body h2, html body .uk-h2, html body .wm-type-h2 { font-size: var(--wintra-type-size-h2, 30px); } html body h3, html body .uk-h3, html body .wm-type-h3 { font-size: var(--wintra-type-size-h3, 20px); } html body h4, html body .uk-h4, html body .wm-type-h4, html body h5, html body .uk-h5, html body h6, html body .uk-h6 { font-size: var(--wintra-type-size-h4, var(--wintra-type-size-h3, 20px)); } /* hero — гигантский CTA-заголовок (60px+ из токена size-hero). */ html body .wm-type-hero { font-size: var(--wintra-type-size-hero, 3.75rem); } /* === Утилиты типографики (для семантически нейтральных DIV-заголовков) === * Используются когда нужен ВИЗУАЛЬНЫЙ размер h1..h4 без увеличения числа * семантических

на странице (которых должен быть ровно один). * Шеф пишет:
…
. * Тэг — div (нейтральный), размер — через утилиту. * Также добавляем общий стиль (line-height/font-family heading) что унаследовал * div чтобы выглядел как настоящий . */ .wm-type-hero, .wm-type-h1, .wm-type-h2, .wm-type-h3, .wm-type-h4 { font-family: var(--wintra-type-font-family-heading, var(--wintra-type-font-family)); line-height: var(--wintra-type-line-height-heading, 1.2); } html body p { font-size: var(--wintra-type-size-body, 16px); line-height: var(--wintra-type-line-height-body, 1.5); color: var(--wintra-color-ink, #0d0d12); } html, body { margin: 0; padding: 0; /* overflow-x:hidden на html/body СНЯТ — он ломает позицию absolute- дропдаунов в шапке (uk-navbar-dropdown, wm-menu__mega-drop) и вызывает вертикальный скролл при их наведении. Защита от horizontal- overflow остаётся на уровне .wm-row и .wm-row-group (ряд знает что внутри и обрезает свой контент). Edit-mode hover-frames Bitrix могут давать тонкий горизонтальный скролл — это известный side-effect, в публичном режиме его нет. */ font-family: var(--wintra-font-family); font-size: var(--wintra-font-size-base); line-height: var(--wintra-type-line-height-body); color: var(--wintra-color-ink); background: var(--wintra-color-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* === Глобальный стиль ссылок ==================================================== * --wintra-link-decoration — тип подчёркивания (none | underline solid/dotted/dashed). * --wintra-link-transform — регистр (none | uppercase). * Токены задаются в Админке → Модуль wintra.webcreator → Типографика. * * Регистр применяется ко ВСЕМ ссылкам и кнопкам — для единообразия. Если * шеф включил UPPERCASE — оно работает везде: навигация, кнопки, лого * (где есть текст), выпадайки. Это и есть смысл глобального токена. * * Подчёркивание для НАВИГАЦИОННЫХ элементов (.wm-btn / .uk-button / * пункты меню) убираем — иначе кнопки рендерятся с подчёркнутым текстом. */ a { color: var(--wintra-color-primary, #033fcb); text-decoration: var(--wintra-link-decoration, none); text-transform: var(--wintra-link-transform, none); text-underline-offset: 0.2em; } a:hover { text-decoration: underline; } a.wm-btn, a.wm-logo, a.uk-button, a.uk-navbar-nav > li > a, a.uk-nav > li > a, a.wm-card { text-decoration: none; /* регистр (text-transform) НАМЕРЕННО оставляем — наследуется из */ } /* Карточки-ссылки (tariffs/bento/grid-list с href) — никаких визуальных * эффектов hover (правило шефа: per-component анимации запрещены). */ a.wm-card, a.wm-card:hover, a.wm-card:focus, a.wm-card:active { text-decoration: none; opacity: 1; } /* На тёмных секциях — белый текст по умолчанию (наследуется детьми через `color: inherit` или их собственные правила). Конкретные элементы (button-primary, accent-color) могут переопределять свой color. */ .section-dark, .wm-row--dark, [data-theme="dark"] { color: var(--wintra-color-surface); } /* Ссылки на тёмном — surface, hover чуть приглушённо. */ .section-dark a, .wm-row--dark a, [data-theme="dark"] a { color: var(--wintra-color-surface); } .section-dark a:hover, .wm-row--dark a:hover, [data-theme="dark"] a:hover { color: var(--wintra-color-surface); opacity: 0.78; } /* Override: карточки-ссылки на тёмной теме не приглушаются */ .section-dark a.wm-card:hover, .wm-row--dark a.wm-card:hover, [data-theme="dark"] a.wm-card:hover { opacity: 1; } /* === Контейнер UIKit с токен-переопределением padding (4 стороны) === * UIKit даёт .uk-container (max-width + горизонтальные отступы). * Наши токены container.padding_* переопределяют все 4 стороны. * Модуль пишет значения токенов в :root через inline-style в . */ .uk-container { padding-top: var(--wintra-container-padding-top, 40px); padding-right: var(--wintra-container-padding-right, 20px); padding-bottom: var(--wintra-container-padding-bottom, 40px); padding-left: var(--wintra-container-padding-left, 20px); } /* === Сетка модуля: .wm-row (секция-ряд PageGrid) === * 3 уровня: * 1)
— во всю ширину окна. Фон/margin задаются через CSS-переменные. * 2)
— центрованный контейнер UIKit. * Фон/padding читаются из переменных (fallback — глобальные токены :root). * 3)
— UIKit grid. Ширины колонок в *
задаёт PageRenderer на основе span. * * ВСЕ конкретные значения (цвет, padding, radius) приходят через inline-style в виде * --wm-* переменных. CSS только объявляет, КАК эти переменные читаются. Это позволяет * переопределять фон/отступы/радиус из custom.css без специфичностных войн: * .wm-row[data-row-id="hero"] { --wm-row-bg: linear-gradient(...); } */ /* === Группа рядов ===================================================== * Соседние ряды с одинаковым `group:` (задаётся в Сетке через префикс * метки ряда) оборачиваются PageRenderer'ом в
. Используется для секций где общий фон/градиент * перекрывает несколько рядов (header + контент с непрерывной заливкой, * как «Наши услуги» в v14). * * Сам wm-row-group — прозрачная обёртка по умолчанию. Фон задаёт шеф в * custom.css по конкретному id-классу, например: * .wm-row-group--services { background: linear-gradient(180deg,...); } * * Дочерние .wm-row внутри группы сохраняют свои настройки (margin, padding, * container width) — но обычно `background` ряда оставляют пустым, чтобы * не перекрывать групповой фон. */ .wm-row-group { display: block; width: 100%; position: relative; background: var(--wm-group-bg, transparent); /* overflow НЕ ставим — внутренние .wm-row уже обрезают свой контент. На уровне группы overflow:hidden может обрезать absolute-overlay компонентов (например uk-navbar-dropdown шапки если шапка в группе). */ } .wm-row { display: block; width: 100%; position: relative; background: var(--wm-row-bg, transparent); margin-top: var(--wm-row-margin-top, 0); margin-bottom: var(--wm-row-margin-bottom, 0); /* Padding ряда — внутри фона. Используется когда нужен «воздух» вокруг контейнера, окрашенный фоном ряда (например серый ряд + синий контейнер с radius внутри, как v14 cta-блок). 0 по умолчанию. Объявлены 4 отдельных padding-* (не shorthand), чтобы каждая сторона была независимой CSS-переменной для override в custom.css. */ padding-top: var(--wm-row-pad-top, 0); padding-right: var(--wm-row-pad-right, 0); padding-bottom: var(--wm-row-pad-bottom, 0); padding-left: var(--wm-row-pad-left, 0); /* overflow-x:hidden СНЯТ — он автоматически переключает overflow-y на `auto` (CSS spec), что обрезает absolute-дропдауны меню в шапке (uk-navbar-dropdown, wm-menu__mega-drop) и добавляет vertical scrollbar внутри ряда. Защита от horizontal-overflow остаётся на уровне самих компонентов: .wm-slist--marquee имеет overflow:hidden на корне И на viewport (двойная защита). Если в будущем появится full-bleed-компонент без своей защиты — добавляем overflow:hidden на компоненте, не на ряду. */ } /* === Позиционирование ряда (PageGrid → position_mode) ===================== * UIKit-uk-sticky управляет переключением — мы только задаём начальное * положение и стиль активного состояния (когда добавлен .wm-row--stuck). * * sticky: ряд в потоке, при скролле прибивается к верху (UIKit делает * position:fixed; top:0). cls-active='wm-row--stuck' → при * активации добавляется glass-эффект. * * overlay: ряд изначально position:absolute поверх следующего ряда (для * шапки «с наездом» на hero). Сразу прозрачный; при скролле * UIKit добавляет .wm-row--stuck → glass-фон. Hero снизу * поднимается под y=0 окна (overlay-ряд вышел из потока). */ .wm-row--sticky { /* UIKit-uk-sticky сам поставит position:fixed; top:0 при активации. До активации ряд в потоке. */ z-index: 100; } .wm-row--overlay { /* fixed (не absolute и не sticky) — шапка прибита к верху окна, выходит из потока (hero под ней начинается с y=0). UIKit-uk-sticky не подходит — он переключает на sticky и занимает место в потоке. Toggle класса .wm-row--stuck делает scroll-overlay.js на скролле. top: var(--wm-bx-panel-h) — учитываем Bitrix admin-panel сверху (для админа 39px, для гостя 0). */ position: fixed; top: var(--wm-bx-panel-h, 0px); left: 0; right: 0; z-index: 100; transition: background 0.25s ease, backdrop-filter 0.25s ease, color 0.25s ease; } /* === Bitrix admin-panel offset ============================================= * Когда админ залогинен — Bitrix вставляет
~39px сверху * страницы. Стандартный 100vh не учитывает этот сдвиг → hero вылезает за * нижний край viewport на высоту панели. Через CSS-:has() детектируем * наличие панели и задаём переменную, которой пользуются все 100vh-расчёты. * * Поддержка :has(): Chrome 105+, Safari 15.4+, Firefox 121+. У админа * браузер всегда современный, у гостей панели нет — работает корректно. */ :root { --wm-bx-panel-h: 0px; } :root:has(#bx-panel) { --wm-bx-panel-h: 39px; } /* === Smooth scroll по якорным ссылкам =============================== * Правило шефа 06.06.2026: «нужно плавный ход дать и сделать это базой * всегда, если задаём ссылке якорь — прокрутка плавная». * * Используем NATIVE браузерный smooth (scroll-behavior:smooth) вместо * UIKit uk-scroll. Корень: ряды Сетки несут uk-scrollspy с анимациями * uk-animation-slide-bottom-small. UIKit-scroll по пути запускает scrollspy, * пересчитывает позицию из-за анимаций, на финале «дёргается» несколько раз. * Native CSS scroll-behavior к подобным reflow устойчив — браузер выполняет * scroll одним движением. * * scroll-padding-top = высота sticky-шапки (--wm-header-h, fallback 80px) * + панель Битрикса — при якорной навигации браузер сам отступает. * ==================================================================== */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--wm-header-h, 80px) + var(--wm-bx-panel-h, 0px)); } /* === Универсальный glass-эффект ===================================== * Образец — pill-список рубрикатора (29.04.2026, утверждено шефом). * Один класс/набор свойств для шапки overlay+stuck, outline-кнопок, * тизеров, рубрикатор-pill. Применяется через grouping selector ниже. * * Адаптив тёмный/светлый — через каскад от .wm-row--dark родителя: * - Free-state над hero (галка «Тёмная тема» у ряда) — white-glass * (rgba 255 0.06), текст светлый (caskадом color: surface). * - Stuck-state на светлом content (template.js снимает wm-row--dark * при scroll) — dark-glass (rgba 0 0.04), текст ink-чёрный * (наследие default). * * НЕ изменять значения в одном месте — переключай везде синхронно, * чтобы стиль оставался единым. */ .wm-glass, .wm-btn--glass, .wm-row--stuck, .wm-hero__teaser, .wm-rubricator__list { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); } /* Тёмный фон (галка «Тёмная тема» у ряда) — glass белый-полупрозрачный. Каскад единый для всех применений ниже. */ .wm-row--dark .wm-glass, .wm-row--dark .wm-btn--glass, .wm-row--dark.wm-row--stuck, .wm-row--dark .wm-hero__teaser, .wm-row--dark .wm-rubricator__list { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); } .wm-row--dark .wm-rubricator__list { box-shadow: none; } /* Hover для кнопки glass — солидный fill, инверсия (одинаково для тёмного и светлого) */ .wm-btn--glass:hover, .wm-row--dark .wm-btn--glass:hover { background: var(--wintra-color-surface); color: var(--wintra-color-primary); border-color: var(--wintra-color-surface); } /* Stuck-ряд: только нижняя граница-разделитель, без боковых/верхней */ .wm-row--stuck { border-left: none; border-right: none; border-top: none; } /* Когда overlay-ряд НЕ stuck (т.е. лежит поверх hero и шеф включил wm-row--dark на ряду или hero под ним тёмный) — текст светлый. Шеф настраивает галку «Тёмная тема» на overlay-ряду. */ /* Контейнер: max-width + центрирование (uk-container) + опц. фон/radius. Радиус: --wm-container-radius (px) если задан, иначе --wintra-radius модуля. max-width override через --wm-container-max-width (px) — точечное сжатие контейнера-карточки до ширины контента соседних рядов (например, синий контактный блок 1400 при .uk-container-large 1440 outer соседей). */ .wm-row__container { border-radius: var(--wm-container-radius, var(--wintra-radius, 0)); position: relative; background: var(--wm-container-bg, transparent); padding-top: var(--wm-container-pad-top, var(--wintra-container-padding-top, 40px)); padding-right: var(--wm-container-pad-right, var(--wintra-container-padding-right, 20px)); padding-bottom: var(--wm-container-pad-bottom, var(--wintra-container-padding-bottom, 40px)); padding-left: var(--wm-container-pad-left, var(--wintra-container-padding-left, 20px)); } /* Override max-width: для контактных карточек-секций где outer-box должен совпасть с content-зоной соседних рядов (1400 при uk-container-large 1440). box-sizing: border-box обязателен — UIKit ставит .uk-container в content-box, и при max-width 1400 outer стал бы 1400 + padding = 1440. Border-box фиксит outer = max-width ровно. */ .wm-row__container[style*="--wm-container-max-width"] { max-width: var(--wm-container-max-width); box-sizing: border-box; } /* Реально применяем module_gap из настроек: переопределяем UIKit-default * нашим --wm-col-gap (PageRenderer выставляет его inline на ряд). * Без этого UIKit ставил бы свой default gutter (30–40px на широких экранах), * и админский токен `module.module_gap` визуально игнорировался бы. */ .wm-row__grid { margin-left: calc(-1 * var(--wm-col-gap, 24px)) !important; } .wm-row__grid > .wm-row__col { padding-left: var(--wm-col-gap, 24px) !important; } /* Сама .wm-row__col — ТОЛЬКО flex-item UIKit. Прозрачная, без фона/radius. */ .wm-row__col { min-width: 0; } /* Все визуальные свойства модуля (фон, радиус, внутренний padding, margin) * живут на внутренней обёртке. Её бокс целиком внутри padding-left колонки, * то есть СТРОГО внутри контент-зоны контейнера. Идеальная матрёшка. */ .wm-row__col-inner { background: var(--wm-mod-bg, transparent); padding-top: var(--wm-mod-pad-top, 0); padding-right: var(--wm-mod-pad-right, 0); padding-bottom: var(--wm-mod-pad-bottom, 0); padding-left: var(--wm-mod-pad-left, 0); margin-top: var(--wm-mod-margin-top, 0); margin-bottom: var(--wm-mod-margin-bottom, 0); border-radius: var(--wm-mod-radius, 0); /* align модуля внутри колонки — работает для inline/inline-flex элементов * (phone/email/button/logo). Пусто = наследование. */ text-align: var(--wm-mod-align, inherit); /* Flex-контейнер: content внутри (логотип/меню/кнопка) выравнивается * по align-items из НАСТРОЙКИ РЯДА (flex_v: top/middle/bottom). * PageRenderer ставит на
CSS-переменную --wm-row-flex-v * (mapping: top→flex-start, middle→center, bottom→flex-end). * Без display:flex block + inline-flex content давал baseline-descender * (col-inner на 7px выше content), что ломало выравнивание. */ display: flex; align-items: var(--wm-row-flex-v, center); } /* 5-х доли — расширяют 12-grid UIKit (там только знаменатели 2/3/4/6). * Используются когда ряд имеет 5 колонок (например футер с 4 меню + контакты). * PageGrid::SPAN_CHOICES → 20/40/60/80 → классы 1-5/2-5/3-5/4-5. */ @media (min-width: 960px) { .uk-width-1-5\@m { width: 20%; } .uk-width-2-5\@m { width: 40%; } .uk-width-3-5\@m { width: 60%; } .uk-width-4-5\@m { width: 80%; } } /* Native ratings — группа чипов рейтингов «★ Я.Карты 4.8 (234)». * * Все размеры/радиусы/цвета — через токены модуля. Падинги и gap внутри * чипа выражены в `em` — относительно font-size (= --wintra-type-size-chip). * Это значит когда шеф меняет токен `type.size_chip` в настройках модуля, * пропорции чипа сохраняются автоматически. * * Звезда — UIKit-иконка ``, SVG. * 3 варианта: chips-pale / chips-solid / bare. Тёмная тема — каскад. */ .wm-ratings { display: inline-flex; flex-wrap: wrap; gap: var(--wm-ratings-gap, var(--wintra-module-gap, 16px)); align-items: center; } .wm-rating-chip { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.6em 1em; /* Радиус: колонка Сетки переопределяет (`Вид модуля → Радиус`). * Если пусто — глобальный радиус модуля. У ratings чип вытянутый — * крупный радиус превратит его в пилюлю, это ОК для большинства тем. */ border-radius: var(--wm-mod-radius, var(--wintra-radius)); text-decoration: none; font-size: var(--wintra-type-size-chip); line-height: 1.2; vertical-align: middle; color: var(--wintra-color-ink-muted); } .wm-rating-chip__star { color: var(--wintra-color-primary); display: inline-flex; } .wm-rating-chip__star svg { width: 1.1em; height: 1.1em; } .wm-rating-chip__label { opacity: 0.85; } .wm-rating-chip__value { font-weight: 700; color: var(--wintra-color-ink); } .wm-rating-chip__reviews { opacity: 0.6; } /* --- variant: chips-pale --- бледная подложка (для футера/inline) */ .wm-ratings--chips-pale .wm-rating-chip { background: rgba(15, 23, 42, 0.05); } .wm-ratings--chips-pale a.wm-rating-chip:hover { background: rgba(15, 23, 42, 0.09); } /* --- variant: chips-solid --- белая сплошная подложка с тонкой рамкой */ .wm-ratings--chips-solid .wm-rating-chip { background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); } /* --- variant: bare --- без подложки, только звезда + текст */ .wm-ratings--bare .wm-rating-chip { background: transparent; padding: 0; } /* Тёмная тема — каскад от ряда. */ .wm-row--dark .wm-rating-chip, .wm-row-group--dark .wm-rating-chip, [data-theme="dark"] .wm-rating-chip { color: rgba(255, 255, 255, 0.7); } .wm-row--dark .wm-rating-chip__value, .wm-row-group--dark .wm-rating-chip__value, [data-theme="dark"] .wm-rating-chip__value { color: #fff; } .wm-row--dark .wm-ratings--chips-pale .wm-rating-chip, .wm-row-group--dark .wm-ratings--chips-pale .wm-rating-chip, [data-theme="dark"] .wm-ratings--chips-pale .wm-rating-chip { background: rgba(255, 255, 255, 0.06); } .wm-row--dark a.wm-rating-chip:hover, .wm-row-group--dark a.wm-rating-chip:hover, [data-theme="dark"] a.wm-rating-chip:hover { background: rgba(255, 255, 255, 0.12); } .wm-row--dark .wm-ratings--chips-solid .wm-rating-chip, .wm-row-group--dark .wm-ratings--chips-solid .wm-rating-chip, [data-theme="dark"] .wm-ratings--chips-solid .wm-rating-chip { background: rgba(255, 255, 255, 0.1); box-shadow: none; } /* Native socials — ссылки-иконки соцсетей. * * Один HTML с переменным CSS-классом-вариантом: * .wm-socials--chips-pale — бледные плашки (футер) * .wm-socials--icons-bare — голые SVG (шапка/inline) * .wm-socials--colored-circles — круги с бренд-цветом каждой соцсети * * Размер/зазор управляются через CSS-переменные (можно override * через inline-style на самом элементе из native-параметров size/gap). * Тёмная тема — каскад от .wm-row--dark / [data-theme="dark"]. */ .wm-socials { display: flex; flex-wrap: wrap; gap: var(--wm-socials-gap, 12px); align-items: center; } .wm-social-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; transition: none; /* hover-эффекты — глобальный слой, не здесь */ } .wm-social-link img { display: block; width: var(--wm-socials-size, 18px); height: var(--wm-socials-size, 18px); } /* --- vairant: chips-pale (футер) --- */ .wm-socials--chips-pale { --wm-socials-size: 22px; --wm-socials-gap: 12px; } .wm-socials--chips-pale .wm-social-link { width: 44px; height: 44px; /* Радиус: колонка Сетки переопределяет (`Вид модуля → Радиус`). Если * пусто — пропорционально размеру плашки (0.625em ≈ 10px при 16px body) — * не наследуем глобальный --wintra-radius чтобы крупный радиус сайта * не делал квадратные иконки идеально круглыми (44/2=22 ≥ радиус → круг). */ border-radius: var(--wm-mod-radius, 0.625em); background: rgba(15, 23, 42, 0.05); color: var(--wintra-color-ink-muted); } .wm-socials--chips-pale .wm-social-link:hover { background: var(--wintra-color-primary, #033fcb); color: #fff; } .wm-socials--chips-pale .wm-social-link img { filter: none; } /* В тёмном ряду — плашки белёсые с прозрачностью, как в v14. */ .wm-row--dark .wm-socials--chips-pale .wm-social-link, .wm-row-group--dark .wm-socials--chips-pale .wm-social-link, [data-theme="dark"] .wm-socials--chips-pale .wm-social-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.65); } .wm-row--dark .wm-socials--chips-pale .wm-social-link img, .wm-row-group--dark .wm-socials--chips-pale .wm-social-link img, [data-theme="dark"] .wm-socials--chips-pale .wm-social-link img { filter: invert(1) brightness(2); } .wm-row--dark .wm-socials--chips-pale .wm-social-link:hover, .wm-row-group--dark .wm-socials--chips-pale .wm-social-link:hover, [data-theme="dark"] .wm-socials--chips-pale .wm-social-link:hover { background: var(--wintra-color-primary, #033fcb); color: #fff; } /* --- variant: icons-bare (шапка) --- */ .wm-socials--icons-bare { --wm-socials-size: 24px; --wm-socials-gap: 16px; } .wm-socials--icons-bare .wm-social-link { width: var(--wm-socials-size, 24px); height: var(--wm-socials-size, 24px); color: var(--wintra-color-ink, #1f2937); } .wm-socials--icons-bare .wm-social-link:hover { color: var(--wintra-color-primary, #033fcb); } .wm-row--dark .wm-socials--icons-bare .wm-social-link img, .wm-row-group--dark .wm-socials--icons-bare .wm-social-link img, [data-theme="dark"] .wm-socials--icons-bare .wm-social-link img { filter: invert(1) brightness(2); } /* --- variant: colored-circles (страница контактов) --- */ .wm-socials--colored-circles { --wm-socials-size: 26px; --wm-socials-gap: 14px; } .wm-socials--colored-circles .wm-social-link { width: 52px; height: 52px; border-radius: 50%; background: var(--wm-social-color, var(--wintra-color-primary, #033fcb)); color: #fff; } .wm-socials--colored-circles .wm-social-link img { filter: brightness(0) invert(1); } .wm-socials--colored-circles .wm-social-link:hover { transform: none; opacity: 0.9; } /* Вертикальный ряд — column-stack. Колонки horizontal-ряда могут вмещать * вложенный ряд direction=vertical: его модули рендерятся друг под другом * с одинаковым gap (по умолчанию = --wintra-module-gap). */ .wm-col-stack { display: flex; flex-direction: column; gap: var(--wm-stack-gap, var(--wintra-module-gap, 16px)); width: 100%; } .wm-col-stack > .wm-row__col-inner { width: 100%; } .wm-col-stack[data-align="center"] { align-items: center; text-align: center; } .wm-col-stack[data-align="right"] { align-items: flex-end; text-align: right; } .wm-col-stack[data-align="left"] { align-items: flex-start; text-align: left; } /* Placeholder для колонки без привязанного компонента (Этап A-1). * На Этапе C здесь будет рендериться $APPLICATION->IncludeComponent() по slug. */ .wm-row__placeholder { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 16px; border: 1px dashed var(--wm-template-border, #e5e7eb); background: var(--wm-template-bg-soft, #f5f6f8); color: var(--wintra-color-ink-muted, #6b7280); font-size: 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.05em; } .wm-row__ref-stub { padding: 12px 16px; border-left: 3px solid var(--wintra-color-primary, #033fcb); background: var(--wm-template-bg-soft, #f5f6f8); color: var(--wintra-color-ink-muted, #6b7280); font-size: 12px; } .wm-row__ref-stub code { background: #fff; padding: 2px 6px; border: 1px solid var(--wm-template-border, #e5e7eb); font-family: 'JetBrains Mono', ui-monospace, monospace; } /* Мобильная раскладка: UIKit `@s` breakpoint автоматически стекает колонки * (uk-width-X-Y@s активен только с ≥640px, ниже все колонки полной ширины). * Никаких кастомных media-queries — фреймворк это уже умеет. */ /* Стили компонентов-кирпичей (wm.header, wm.news.* и т.д.) живут внутри пакетов * (install/components/.v/assets/*.css) и инжектятся Registry через * Asset::addString() при рендере. Тут их НЕТ. */ /* === Layout корпоративного шаблона === */ .wintra-layout { display: flex; flex-direction: column; min-height: 100vh; } .wintra-header { border-bottom: 1px solid var(--wm-template-border); background: var(--wintra-color-surface); position: sticky; top: 0; z-index: 100; } .wintra-header .uk-container { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 32px; } /* === Логотип: SVG перекрашивается через CSS currentColor === * SVG должен содержать fill="currentColor" (или вовсе без fill). * Модификаторы задают контекст: * .wintra-logo--brand — основной цвет бренда (по умолчанию) * .wintra-logo--light — светлый (для тёмных секций — section-dark, footer) * .wintra-logo--dark — тёмный (для светлых фонов) * .wintra-logo--ink — цвет текста (нейтральный) */ .wintra-logo { display: inline-flex; align-items: center; color: var(--wintra-color-primary, #033fcb); transition: color 0.2s ease; } .wintra-logo svg { width: auto; height: 40px; fill: currentColor; } .wintra-logo svg path, .wintra-logo svg rect, .wintra-logo svg circle, .wintra-logo svg ellipse, .wintra-logo svg polygon, .wintra-logo svg polyline { fill: currentColor; } .wintra-logo--brand { color: var(--wintra-color-primary, #033fcb); } .wintra-logo--light { color: var(--wintra-color-surface, #ffffff); } .wintra-logo--dark { color: var(--wintra-color-ink, #0a0f1f); } .wintra-logo--ink { color: var(--wintra-color-ink, #0a0f1f); } /* Hover — автоматический переход к тёмному варианту бренда */ .wintra-logo:hover { opacity: 0.85; } .wintra-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; } .wintra-nav a { color: var(--wintra-color-ink); font-weight: 500; } .wintra-main { flex: 1 0 auto; } .wintra-footer { margin-top: auto; background: var(--wm-template-bg-soft); padding-block: 48px 24px; color: var(--wintra-color-ink-muted); } .wintra-footer__top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--wm-template-border); } .wintra-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .wintra-footer__nav a { color: var(--wintra-color-ink-muted); } .wintra-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 24px; font-size: 14px; } @media (max-width: 768px) { .wintra-header .uk-container { flex-direction: column; align-items: flex-start; padding-block: 16px; } .wintra-nav ul { gap: 16px; flex-wrap: wrap; } } /* === Native .wm-logo ============================================================ * Рендерится NativeElements::renderLogo() — обёртка или (на главной) * с классами wm-logo wm-logo--{auto|brand|light|dark}. CSS-переменные * --wm-logo-width / --wm-logo-height приезжают из inline-style (из параметров * колонки PageGrid). SVG-path'ы окрашиваются через currentColor — чтобы variant * менял цвет одним правилом, а не 6-ю fill'ами. * ============================================================================ */ .wm-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; color: currentColor; height: var(--wm-logo-height, auto); width: var(--wm-logo-width, auto); } .wm-logo svg { display: block; height: 100%; width: auto; max-width: 100%; } /* Если админ задал и width, и height — svg заполняет обе оси по viewBox. */ .wm-logo[style*="--wm-logo-width"][style*="--wm-logo-height"] svg { width: 100%; height: 100%; } /* Варианты цвета — currentColor пробрасывается в path'ы. */ .wm-logo svg .fil0, .wm-logo svg .fil1, .wm-logo svg .fil2, .wm-logo svg .fil3, .wm-logo svg .fil4, .wm-logo svg .fil5, .wm-logo svg path { fill: currentColor; } .wm-logo--brand { color: var(--wintra-color-primary, #033fcb); } .wm-logo--light { color: #ffffff; } .wm-logo--dark { color: var(--wintra-color-ink, #0a0a0a); } /* Auto — берёт основной цвет темы (primary), на тёмных секциях — светлый. * .section-dark / .wm-row--dark выставляет верстальщик вручную на родителе. */ .wm-logo--auto { color: var(--wintra-color-primary, #033fcb); } .section-dark .wm-logo--auto, .wm-row--dark .wm-logo--auto, [data-theme="dark"] .wm-logo--auto { color: #ffffff; } /* === Native .wm-btn — кнопка с НАШИМИ токенами ================================= * UIKit-варианты (uk-button-primary и т.д.) не читают --wintra-color-* и приходят * дефолтно-синими. Поэтому свой класс .wm-btn + 4 варианта через --wintra-color-*. * primary — фон = primary * secondary — фон = secondary * outline — прозрачный + рамка primary * ghost — только текст primary, без фона/рамки * ============================================================================ */ .wm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--wintra-btn-radius, var(--wintra-radius, 8px)); font-family: inherit; font-weight: 600; font-size: inherit; line-height: 1.2; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; white-space: nowrap; } .wm-btn:hover { text-decoration: none; } .wm-btn--primary { background: var(--wintra-color-primary, #033fcb); color: var(--wintra-color-on-primary, #ffffff); } .wm-btn--primary:hover { background: var(--wintra-color-primary-dark, #002c97); color: var(--wintra-color-on-primary, #ffffff); } .wm-btn--secondary { background: var(--wintra-color-secondary, #171c21); color: var(--wintra-color-on-secondary, #ffffff); } .wm-btn--secondary:hover { opacity: 0.88; } .wm-btn--outline { background: transparent; color: var(--wintra-color-primary, #033fcb); border-color: var(--wintra-color-primary, #033fcb); } .wm-btn--outline:hover { background: var(--wintra-color-primary, #033fcb); color: var(--wintra-color-on-primary, #ffffff); } /* На dark-ряду / dark-группе outline-кнопка становится белой (color уже наследуется каскадом тёмной темы, а border-color надо переключать явно — не каскадирует). */ .wm-row--dark .wm-btn--outline, [data-theme="dark"] .wm-btn--outline { color: var(--wintra-color-on-primary, #ffffff); border-color: var(--wintra-color-on-primary, #ffffff); } .wm-row--dark .wm-btn--outline:hover, [data-theme="dark"] .wm-btn--outline:hover { background: var(--wintra-color-on-primary, #ffffff); color: var(--wintra-color-primary, #033fcb); border-color: var(--wintra-color-on-primary, #ffffff); } .wm-btn--ghost { background: transparent; color: var(--wintra-color-primary, #033fcb); padding-left: 0; padding-right: 0; } .wm-btn--ghost:hover { color: var(--wintra-color-primary-dark, #002c97); } .wm-btn__icon { line-height: 0; } /* === Native contact items (phone/email/address/work_hours) ================= * * NativeElements рендерит каждый из 4 контактных типов как: * * * * … * … * * * * Три варианта раскладки (--variant): * inline — иконка + значение в строку (default; для шапки/футера) * circled — круг 48×48 + label сверху + value bold (как в v14 «Обсудим ваш проект?») * bare — только значение, без иконки (для футера с минимумом) * * Цвет: phone/email — primary-link (наследуют from правил), на тёмной * теме — белый (caskade .section-dark/.wm-row--dark/[data-theme=dark] из * шапки этого файла). address/work_hours — наследуют ink, на тёмной — белый. * * НИКАКИХ hover/transition в style.css компонентов — по правилу * `feedback_no_per_component_animations.md`. Все 3 состояния * :hover/:focus/:active объявляем одним блоком (правило * `feedback_webcreator_link_states_inline_block.md`). */ .wm-contact, .wm-contact:hover, .wm-contact:focus, .wm-contact:active { display: inline-flex; align-items: center; color: inherit; text-decoration: none; line-height: 1.4; } /* --- Inline (default) ----------------------------------------------------- */ .wm-contact--inline { gap: 8px; } .wm-contact--inline .wm-contact__icon { line-height: 0; opacity: 0.7; } .wm-contact--inline .wm-contact__label { font-size: var(--wintra-type-size-chip); opacity: 0.6; margin-right: 4px; } /* --- Circled (v14-style) -------------------------------------------------- */ .wm-contact--circled { gap: 16px; align-items: center; } .wm-contact--circled .wm-contact__icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; border: 1px solid currentColor; flex-shrink: 0; /* На тёмной теме border полупрозрачный — переопределяем ниже каскадом */ } .wm-contact--circled .wm-contact__icon { line-height: 0; } .wm-contact--circled .wm-contact__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wm-contact--circled .wm-contact__label { font-size: var(--wintra-type-size-chip); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; } .wm-contact--circled .wm-contact__value { font-size: var(--wintra-type-size-h4); font-weight: 700; line-height: 1.25; } /* --- Bare ----------------------------------------------------------------- */ .wm-contact--bare { gap: 0; } /* --- Цвет: phone/email — primary (как все ссылки), address/work_hours — ink */ .wm-phone, .wm-email, .wm-phone:hover, .wm-phone:focus, .wm-phone:active, .wm-email:hover, .wm-email:focus, .wm-email:active { color: var(--wintra-color-primary, #033fcb); } .wm-address, .wm-work-hours, .wm-address:hover, .wm-address:focus, .wm-address:active, .wm-work-hours:hover, .wm-work-hours:focus, .wm-work-hours:active { color: inherit; } /* На тёмной теме — всё белое (наследуется в детях через color:inherit) */ .section-dark .wm-contact, .wm-row--dark .wm-contact, [data-theme="dark"] .wm-contact, .section-dark .wm-contact:hover, .wm-row--dark .wm-contact:hover, [data-theme="dark"] .wm-contact:hover { color: inherit; } /* Круг на тёмной — полупрозрачный border (v14-эффект) */ .section-dark .wm-contact--circled .wm-contact__icon-wrap, .wm-row--dark .wm-contact--circled .wm-contact__icon-wrap, [data-theme="dark"] .wm-contact--circled .wm-contact__icon-wrap { border-color: rgba(255, 255, 255, 0.2); } /* === Стек контактов — вертикальная колонка с обычным module-gap ============ * Используется внутри слот-компонента wm.contacts (контейнер для нескольких * .wm-contact одного варианта). Если шеф хочет другой gap — переопределяет * через колоночный padding или custom.css. */ .wm-contact-stack { display: flex; flex-direction: column; gap: var(--wintra-padding-small, 16px); } /* === Native heading/text =================================================== */ /* Жёсткое font-weight:700 на .wm-heading УДАЛЕНО 30.04.2026 — ломало контраст «тонкий заголовок + bold». Вес теперь управляется токенами через блок «Глобальная типография» сверху файла: • сам h1/h2/h3 — наследует --wintra-type-weight-heading-light • / внутри — --wintra-type-weight-heading-bold */ .wm-heading { margin: 0 0 0.5em; } .wm-text { margin: 0 0 1em; } .wm-text:last-child, .wm-heading:last-child { margin-bottom: 0; } /* === Kicker (overline / eyebrow) ========================================= * Утилитный класс для короткого маркетингового заголовка над основным * контентом (например «опыт» над числом «15+», «миссия» над h2). Часть * дизайн-системы модуля — применяется глобально на всех сайтах. * * Размер — единственное что управляется per-site через токен * --wintra-type-size-kicker (Tokens::DEFAULTS.type.size_kicker, default 12). * Остальное (uppercase / weight 700 / letter-spacing 0.08em / ink-muted) * вшито — это формообразующие свойства паттерна kicker, везде одинаковые. * * Используется через class="wm-kicker" в любом компоненте/шаблоне. * В тёмной теме (.wm-row--dark родитель) — приглушённый светлый. */ .wm-kicker { display: inline-block; font-size: var(--wintra-type-size-kicker, 12px); font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wintra-color-ink-muted, #475569); } .wm-row--dark .wm-kicker { color: rgba(255, 255, 255, 0.65); } /* === Shadow (utility) ==================================================== * Утилитный класс для тени карточек/бейджей. Token-driven: * --wintra-shadow-card задаётся в табе «Эффекты» админки. * * Применяется через class="wm-shadow" в любом компоненте/шаблоне (например * параметр WM_CARD_SHADOW в wm.grid-list навешивает этот класс на * .wm-grid-list__card). Часть дизайн-системы модуля. */ .wm-shadow { box-shadow: var(--wintra-shadow-card, 0 8px 24px rgba(15, 23, 42, 0.08)); } /* === UIKit dotnav — pill-индикатор (override штатных кружочков) ============ * Единый стиль pagination для всех wm-компонентов на UIKit-слайдерах: * uk-slideshow-nav, uk-slider-nav, uk-dotnav. Активная точка растягивается * в pill-pаску, остальные — мелкие приглушённые. Цвет берётся из бренда * (--wintra-color-primary). На тёмных рядах (.wm-row--dark) — белый. * * Token-driven: меняется через переменные --wm-dot-* без правки CSS. * Применимо на любом сайте с этим модулем — это часть дизайн-системы. */ .uk-dotnav { --wm-dot-size: 8px; --wm-dot-active-w: 24px; --wm-dot-bg: rgba(10, 14, 26, 0.18); --wm-dot-bg-hover: rgba(10, 14, 26, 0.35); --wm-dot-bg-active: var(--wintra-color-primary, #033fcb); gap: 10px; } .uk-dotnav > * { padding-left: 0; } .uk-dotnav > * > * { width: var(--wm-dot-size); height: var(--wm-dot-size); border-radius: 999px; background: var(--wm-dot-bg); border: 0; padding: 0; box-shadow: none; transition: width 0.3s ease, background 0.3s ease, border-radius 0.25s ease; } .uk-dotnav > * > *:hover, .uk-dotnav > * > *:focus { background: var(--wm-dot-bg-hover); box-shadow: none; outline: none; } .uk-dotnav > .uk-active > * { width: var(--wm-dot-active-w); border-radius: 4px; background: var(--wm-dot-bg-active); } /* Тёмная тема ряда — приглушённо-белые точки, активный — чистый белый */ .wm-row--dark .uk-dotnav, .section-dark .uk-dotnav, [data-theme="dark"] .uk-dotnav { --wm-dot-bg: rgba(255, 255, 255, 0.28); --wm-dot-bg-hover: rgba(255, 255, 255, 0.55); --wm-dot-bg-active: var(--wintra-color-surface, #ffffff); --wm-dot-active-w: 28px; } /* ═══════════════════════════════════════════════════════════════════════ * TIER 2 — CARD-СИСТЕМА (общие классы карточек wm-*) * Принцип однообразия модуля. Применяются ВО ВСЕХ wm-компонентах с * карточками (wm.tariffs, wm.cards-bento, wm.grid-list, будущие). * * Структура классов: * .wm-card — карточка целиком (padding, gap, radius) * .wm-card-icon — иконка 48×48 в круглой подложке * .wm-card-icon--lg — увеличенная (для bento large) * .wm-card-title — h3 (toкен h3, weight bold) * .wm-card-title--sm — мельче (для слайдер-карточек, tariffs) * .wm-card-price — цена (h3 size, weight bold) * .wm-card-price--lg — крупная (для тарифов: 30px / 900) * .wm-card-desc — описание (body, opacity 0.7-0.8) * .wm-card-params — список характеристик (вертикальный stack) * .wm-card-param — одна строка параметра (icon + text) * .wm-card-param-icon — иконка слева у параметра * .wm-card-badge — pill в правом верхнем (метка «Популярно») * .wm-card-arrow — стрелка-«Подробнее» (всегда right-align) * .wm-card-foot — подвал карточки (для arrow + price flex-row) * * SPACING-ТОКЕНЫ (общее лекало): * --wm-card-padding — внутренний padding карточки * --wm-card-content-gap — между title/price/desc внутри карты * --wm-card-section-gap — между card-content и card-foot (arrow) * --wm-card-icon-mb — отступ под иконкой * --wm-card-title-mb — отступ под заголовком * --wm-card-params-gap — между строками параметров * * Специфика per-component → в style.css компонента (например у bento * цена primary-цвет, у tariffs glass-фон). Общая база — здесь. * ═══════════════════════════════════════════════════════════════════════ */ /* Spacing-токены module — используются всеми .wm-card-* * * Иерархия: * --wintra-module-gap (Tokens::DEFAULTS) — корневой ритм (default 24px) * --wm-spacing-small = gap × 0.5 (~12px) — внутри-секция, мелкие промежутки * --wm-spacing-medium = gap (~24px) — между секциями карточки * --wm-spacing-large = gap × 2 (~48px) — для крупных карточек / large-padding * * Vertical rhythm в карточке (margin-bottom после каждого слота): * icon → next: small (12) * title → next: medium (24) — отступ перед ценой увеличен * price → next: small (12) — между ценой и параметрами компактно * params → next: medium (24) — между параметрами и описанием как title-spacing * desc → next: 0 (последний слот) */ :root { /* Vertical-rhythm уровни (gap между секциями карточки) — производные от * module-gap, CSS-уровень. Если шеф меняет module_gap в админке, * пересчитываются автоматически. */ --wm-spacing-small: calc(var(--wintra-module-gap, 24px) * 0.5); --wm-spacing-medium: var(--wintra-module-gap, 24px); --wm-spacing-large: calc(var(--wintra-module-gap, 24px) * 2); /* Padding карточек — 3 уровня из админки (Tokens::DEFAULTS module.padding_*). * Шеф настраивает через таб «05 Контейнер» / «Модули по умолчанию». */ --wm-card-padding-sm: var(--wintra-padding-small, 16px); --wm-card-padding-md: var(--wintra-padding-medium, 24px); --wm-card-padding-lg: var(--wintra-padding-large, 48px); --wm-card-padding: var(--wm-card-padding-md); /* default */ --wm-card-section-gap: var(--wm-spacing-medium); --wm-card-icon-mb: var(--wm-spacing-small); --wm-card-title-mb: var(--wm-spacing-medium); --wm-card-price-mb: var(--wm-spacing-small); --wm-card-params-mb: var(--wm-spacing-medium); --wm-card-params-gap: calc(var(--wintra-module-gap, 24px) * 0.25); --wm-card-icon-size: 48px; --wm-card-icon-radius: var(--wintra-radius, 8px); } /* Карточка целиком (padding + gap внутреннего стэка + radius) * * Модификаторы padding по плотности раскладки: * --padding-sm : --wm-card-padding (24px) — для рядов 4+ карточек (компакт) * --padding-lg : --wm-card-padding-lg (48px) — для рядов 1-3 карточек (воздух) * default (без mod) — small */ .wm-card { padding: var(--wm-card-padding); border-radius: var(--wintra-radius, 8px); color: inherit; box-sizing: border-box; } .wm-card--padding-sm { padding: var(--wm-card-padding-sm); } .wm-card--padding-md { padding: var(--wm-card-padding-md); } .wm-card--padding-lg { padding: var(--wm-card-padding-lg); } /* UIKit-shadow override (03.06.2026) — отключаем нативные тени UIKit на * .uk-card-default ВО ВСЕХ состояниях (default + hover). UIKit ставит: * .uk-card-default → box-shadow: 0 5px 15px rgba(0,0,0,.08) * .uk-card-default:hover → box-shadow: 0 14px 25px rgba(0,0,0,.16) * .uk-card-hover:hover → box-shadow: 0 14px 25px rgba(0,0,0,.16) * Шеф запретил тени per-component (правило 30.04.2026, общая система * планируется через настройки модуля). Подавляем UIKit-уровень на любой * .wm-card сразу для базового и hover-состояния. */ .wm-card.uk-card-default, .uk-card-default.wm-card, .wm-card.uk-card-default:hover, .uk-card-default.wm-card:hover, .wm-card.uk-card-hover:hover { box-shadow: none; } /* Иконка — круглая подложка 48×48, опционально модификатор --lg */ .wm-card-icon { width: var(--wm-card-icon-size); height: var(--wm-card-icon-size); border-radius: var(--wm-card-icon-radius); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: inherit; background: rgba(10, 14, 26, 0.05); margin-bottom: var(--wm-card-icon-mb); } .wm-card-icon--lg { --wm-card-icon-size: 64px; } [data-theme="dark"] .wm-card-icon, .wm-row--dark .wm-card-icon { background: rgba(255, 255, 255, 0.10); } /* Заголовок карточки (h3-token, bold). --sm для слайдер-карточек. * margin: 0 — vertical rhythm применяется scoped через .wm-card__stack * или per-component контейнер (.wm-tariffs__head). */ .wm-card-title { margin: 0; font-size: var(--wintra-type-size-h3, 1.25rem); font-weight: var(--wintra-type-weight-heading-bold, 800); line-height: 1.3; color: inherit; } /* Маленькие карточки (4+ в ряд, тизеры) — h4-размер. * Применяется автоматически на тегах h4.wm-card-title (тип h4) * ИЛИ через явный модификатор .wm-card-title--sm на любой h-тег. */ h4.wm-card-title, .wm-card-title--sm { font-size: var(--wintra-type-size-h4); } /* Описание — body text с пониженной opacity. */ .wm-card-desc { margin: 0; color: inherit; opacity: 0.75; line-height: var(--wintra-type-line-height-body, 1.5); } /* Цена — bold, негативный letter-spacing. --lg для тарифов (30px / 900). */ .wm-card-price { margin: 0; font-size: var(--wintra-type-size-h3, 1.25rem); font-weight: var(--wintra-type-weight-heading-bold, 800); letter-spacing: -0.01em; color: inherit; } .wm-card-price--lg { font-size: 1.875rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; } /* Список параметров (вертикальный stack). */ .wm-card-params { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wm-card-params-gap); font-size: 0.875rem; opacity: 0.7; color: inherit; } /* === Vertical rhythm контейнер ============================================ * Класс .wm-card__stack применяется к контейнеру внутри карточки где slots * идут вертикальной стопкой (icon → title → price → params → desc). * Margin-bottom по slot'ам — token-driven, читает уровни из admin-токенов: * icon → small (12) * title → medium (24) * price → small (12) * params → medium (24) * desc → 0 (последний) * * НЕ применяется глобально к .wm-card-* потому что не во всех компонентах * slot'ы идут стопкой (например в bento price лежит во flex-foot — ей * нижний отступ не нужен). Нужен явный класс-контейнер. */ .wm-card__stack > .wm-card-icon { margin-bottom: var(--wm-card-icon-mb); } .wm-card__stack > .wm-card-title { margin-bottom: var(--wm-card-title-mb); } .wm-card__stack > .wm-card-price { margin-bottom: var(--wm-card-price-mb); } .wm-card__stack > .wm-card-params { margin-bottom: var(--wm-card-params-mb); } .wm-card__stack > .wm-card-desc { margin-bottom: 0; } .wm-card-param { display: flex; align-items: center; gap: 6px; } .wm-card-param-icon { flex: 0 0 auto; opacity: 0.9; } /* Бейдж — pill в правом верхнем углу (метка «Популярно» / «Новинка»). */ .wm-card-badge { position: absolute; top: 16px; right: 16px; background: var(--wintra-color-accent, #FB4825); color: var(--wintra-color-on-accent, #ffffff); border-radius: 999px; padding: 5px 10px; font-size: 10px; font-weight: var(--wintra-type-weight-heading-bold, 800); text-transform: uppercase; letter-spacing: 0.10em; line-height: 1; z-index: 2; } /* Стрелка-«Подробнее» — всегда right-aligned. Цвет наследуется. * Hover-цвет primary держим в общем шаблоне, а не в style.css компонента * (правило: hover/transition/animation в style.css компонента запрещены — * любое единое поведение wm-карточек живёт здесь). */ .wm-card-arrow { display: inline-flex; align-items: center; justify-content: flex-end; color: currentColor; flex-shrink: 0; text-decoration: none; } a.wm-card-arrow:hover, a.wm-card-arrow:focus { color: var(--wintra-color-primary); text-decoration: none; } /* Подвал карточки — для размещения arrow с right-align (отдельно от content) */ .wm-card-foot { display: flex; justify-content: flex-end; margin-top: var(--wm-card-section-gap); } /* === Native include-file — общий стиль текстового блока в Сетке ========= * Используется native-элементом 'include' (lib/theme/nativeelements.php). * Per-site может через .wm-page- переопределить размер/вес, но цвет * в любом случае наследует от темы (на [data-theme="dark"] — surface). */ .wm-include-file { color: inherit; line-height: var(--wintra-type-line-height-body, 1.5); opacity: 0.75; } /* === UIKit tooltip — брендирование под Винтру (по эталону v14) ============ * UIKit-дефолт: серый (#666), 12px, padding 3×6, radius 2 — выглядит как * системный hint. Перебиваем под бренд: primary-фон, тень, мягкий padding. * Стрелочка-уголок добавляется через ::after, направление — по data-uk-position * (UIKit ставит модификаторы pos-top / pos-bottom / pos-left / pos-right). */ .uk-tooltip { background: var(--wintra-color-primary, #033fcb); color: var(--wintra-color-on-primary, #ffffff); font-size: 13px; font-weight: var(--wintra-type-weight-heading-bold, 700); line-height: 1.3; padding: 10px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(3, 63, 203, 0.30); max-width: 280px; white-space: nowrap; } /* Стрелочка-уголок (треугольник, указывает ОТ tooltip К якорю). * UIKit-3 не даёт modifier-класс при разных pos — позиция через inline-style. * JS template.js (initTooltipArrowAutoPos) отслеживает появление tooltip'а, * сравнивает его координаты с якорем и ставит wm-tip-pos-{top|bottom|left|right}. * Здесь — только визуальная отрисовка по этим классам. */ .uk-tooltip::after { content: ''; position: absolute; width: 0; height: 0; border: 6px solid transparent; } /* tooltip ПОД якорем → стрелка ВВЕРХ (border-bottom-color = цвет треугольника) */ .uk-tooltip.wm-tip-pos-bottom::after { top: -12px; left: 50%; transform: translateX(-50%); border-bottom-color: var(--wintra-color-primary, #033fcb); } /* tooltip НАД якорем → стрелка ВНИЗ */ .uk-tooltip.wm-tip-pos-top::after { bottom: -12px; left: 50%; transform: translateX(-50%); border-top-color: var(--wintra-color-primary, #033fcb); } /* tooltip СПРАВА от якоря → стрелка ВЛЕВО */ .uk-tooltip.wm-tip-pos-right::after { left: -12px; top: 50%; transform: translateY(-50%); border-right-color: var(--wintra-color-primary, #033fcb); } /* tooltip СЛЕВА от якоря → стрелка ВПРАВО */ .uk-tooltip.wm-tip-pos-left::after { right: -12px; top: 50%; transform: translateY(-50%); border-left-color: var(--wintra-color-primary, #033fcb); } /* === Native slider-arrows — общий стиль для всех слайдеров модуля ======= * Используется через native-элемент `slider-arrows` (lib/theme/nativeelements.php). * Шеф ставит native в любую колонку/ряд, указывает target=ID слайдера. * JS-bridge (template.js initSliderNavBridge) связывает их. * * Внутри-компонентные стрелки слайдера (.wm-tariffs__nav и т.п.) при наличии * external-навигации автоматически скрываются (.wm-has-external-nav). */ .wm-slider-nav { display: inline-flex; gap: 12px; color: inherit; } .wm-slider-nav__btn { width: 40px; height: 40px; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid currentColor; } /* Стилевые варианты */ .wm-slider-nav--outlined .wm-slider-nav__btn { opacity: 0.6; } .wm-slider-nav--glass .wm-slider-nav__btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.30); } .wm-slider-nav--minimal .wm-slider-nav__btn { border-color: transparent; } .wm-slider-nav--brand .wm-slider-nav__btn { background: var(--wintra-color-primary, #033fcb); border-color: var(--wintra-color-primary, #033fcb); color: var(--wintra-color-on-primary, #fff); } /* Auto-hide внутренних стрелок слайдера при наличии external-навигации */ .wm-has-external-nav .wm-tariffs__nav, .wm-has-external-nav .wm-slist__nav { display: none !important; } /* === Тёмная тема через [data-theme="dark"] на обёртке группы PageGrid ===== * Когда у группы стоит галка «Тёмная» (поле dark=Y) — PageGrid ставит * data-theme="dark" + class wm-row-group--dark на обёртку. Текст всех * рядов внутри становится светлым автоматически (без явного * wm-row--dark на каждом ряду). */ [data-theme="dark"] { color: var(--wintra-color-surface, #ffffff); } [data-theme="dark"] a:not(.wm-btn):not(.uk-button) { color: inherit; } /* h1-h6 / wm-heading имеют свой color через `html body h*` (0,0,0,3) — * перебиваем через atribute-selector (0,0,1,1) > (0,0,0,3) */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .wm-heading, [data-theme="dark"] .wm-text { color: var(--wintra-color-surface, #ffffff); } /* Page-header стили удалены 03.06.2026 — native page_header заменён на композицию из wm.crumbs + native heading + native iblock_field. */ /* === CLS fix — резервируем layout для media-блоков (skill bitrix-aspro-speed B). = * Без width/height на /