/* * custom.css — единственное легальное место для переопределений * шаблона wintra.corp и любых стилей модуля wintra.webcreator. * * Цепочка CSS в : * 1) uikit.min.css — фреймворк * 2) tokens.css — системный, автогенерация (НЕ трогать) * 3) template_styles.css — базовая раскладка шаблона * 4) компоненты wm.* — стили кирпичей PageGrid * 5) custom.css — ← этот файл, перебивает всё * * Примеры: * :root { --wintra-color-primary: #ff4500; } — поменять брендовый цвет * .wm-row[data-row-id="hero"] { --wm-row-bg: #0a0f1f; } * .wintra-footer { font-size: 14px; } * * Файл при обновлениях модуля НЕ перезаписывается. */ .wm-row--shapka-desktop .wm-phone__number { font-weight: var(--wintra-custom-fw600); } /* === Главная — стилевые правки конкретно для этой страницы ============= * Body получает класс .wm-page-<транслит-label> (см. PageRenderer::pageBodyClass). * Можно таргетить любой блок per-page без затрагивания других страниц. * ====================================================================== */ /* Описания (подключаемые файлы) на главной — light-шрифт под заголовками. * Цвет наследуется от темы группы (data-theme="dark" → surface). */ .wm-page-glavnaya .wm-include-file { font-weight: 300; font-size: 1.125rem; } /* === Bento-сетка услуг (wm.cards-bento) — large с фирменным градиентом === * Для website (BENTO_LARGE=Y) очисти поле «Цвет фона карточки» в админке — * иначе inline-style CARD_BG_COLOR перебьёт градиент. * ====================================================================== */ .wm-bento__item--large { background: linear-gradient(135deg, var(--wintra-color-primary) 0%, var(--wintra-color-primary-dark) 100%); } /* Bento large — title fluid под hero-формат (специфика макета v14). Цена и описание используют общие классы .wm-card-price / .wm-card-desc из template_styles — однообразие со всеми bento и tariffs (правило шефа 06.05.2026: все цены и описания одинаковые везде). */ .wm-bento__item--large .wm-bento__title { font-size: clamp(2rem, 2.8vw, 2.625rem); } /* === wm-grey — фоновый градиент секций (атмосферный, по v14 .bg-atmo-warm) == * Применяется когда в Сетке у группы/ряда задан background = «wm-grey». * Многослойные radial-градиенты создают «дыхание» вместо плоского серого. * Источник: design/v14/index.html .bg-atmo-warm. * ====================================================================== */ .wm-grey { background: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(91, 142, 255, 0.08) 0%, transparent 55%), radial-gradient(ellipse 60% 60% at 85% 100%, rgba(3, 63, 203, 0.07) 0%, transparent 55%), radial-gradient(ellipse 70% 40% at 50% 50%, rgba(255, 255, 255, 0.6) 0%, transparent 60%), linear-gradient(180deg, #f7f9ff 0%, #eef2fb 100%); } /* === Фирменный фон wm-blue (по эталону v14 hero-fullscreen) + анимация ===== * Эффект: «облака на небе» — два независимых слоя подсветки плывут с * разной скоростью, в разных направлениях, со scale-вариацией. Это даёт * parallax-чувство (облака на разных высотах двигаются по-своему). * * Базовый: linear-gradient как в v14 .hero-fullscreen. * ::before — крупное «облако» №1 (22s, медленнее, с противоходом). * ::after — облако №2 поменьше (16s, шустрее, в противоположную сторону). * * Если хочется заметнее — увеличь translate %% или alpha в radial. * Если слишком — уменьши значения keyframes или поставь opacity на ::before. */ .wm-blue { position: relative; overflow: hidden; background: linear-gradient(135deg, #0D0D0D 0%, #0225A8 100%); } /* Облако 1 — большое, мягкое, плывёт по диагонали. alpha 0.30 / scale до 1.05 / 4-5% движения — заметно но не агрессивно. inset: -20% — пятно выходит за края, чтобы при движении не оголялся угол. */ .wm-blue::before { content: ''; position: absolute; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 50% 45% at 30% 40%, rgba(30, 80, 224, 0.30) 0%, transparent 60%); animation: wmCloud1 26s ease-in-out infinite alternate; will-change: transform; } /* Облако 2 — поменьше, светлее, плывёт навстречу первому, чуть быстрее. */ .wm-blue::after { content: ''; position: absolute; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 40% 35% at 70% 60%, rgba(91, 142, 255, 0.20) 0%, transparent 60%); animation: wmCloud2 20s ease-in-out infinite alternate; will-change: transform; } .wm-blue > * { position: relative; z-index: 1; } /* Облако 1: плывёт вправо-вниз с лёгким scale, потом обратно. */ @keyframes wmCloud1 { 0% { transform: translate3d(-3%, -1%, 0) scale(1.00); } 50% { transform: translate3d( 4%, 2%, 0) scale(1.05); } 100% { transform: translate3d(-2%, 3%, 0) scale(0.97); } } /* Облако 2: противоположное направление + чуть другой ритм scale. */ @keyframes wmCloud2 { 0% { transform: translate3d( 3%, 1%, 0) scale(1.00); } 50% { transform: translate3d(-5%, -3%, 0) scale(0.95); } 100% { transform: translate3d( 2%, -1%, 0) scale(1.06); } } /* Серые пресеты на будущее — раскомментируй когда понадобятся. */ /* .wm-grey-1 { background: #f5f6f8; } */ /* .wm-grey-2 { background: #e5e7eb; } */ /* .wm-grey-3 { background: #d1d5db; } */ /* ======================================================================== * Контраст в заголовках — специфика макета 2026.wintramedia.ru (v14) * * Все h1-h6 по умолчанию тонкие (--wintra-type-weight-heading-light), * / внутри даёт жирный акцент (--wintra-type-weight-heading-bold). * Шеф пишет «Винтра в цифрах» → «Винтра в» тонкая, «цифрах» жирная. * * Правило per-site (custom.css, не template_styles.css) по * feedback_template_styles_no_layout_specifics.md — это специфика * именно этого макета, на других сайтах модуля может быть иначе. * ======================================================================== */ 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-weight: var(--wintra-type-weight-heading-light, 300); } html body h1 b, html body h1 strong, html body .uk-h1 b, html body .uk-h1 strong, html body h2 b, html body h2 strong, html body .uk-h2 b, html body .uk-h2 strong, html body h3 b, html body h3 strong, html body .uk-h3 b, html body .uk-h3 strong, html body h4 b, html body h4 strong, html body .uk-h4 b, html body .uk-h4 strong, html body h5 b, html body h5 strong, html body .uk-h5 b, html body .uk-h5 strong, html body h6 b, html body h6 strong, html body .uk-h6 b, html body .uk-h6 strong { font-weight: var(--wintra-type-weight-heading-bold, 800); } /* ======================================================================== * Metrics-карточки (wm.grid-list режим WM_TYPE=number) — типографика v14. * Тени/hover/lift — UIKit (uk-card-default + uk-card-hover в template). * Здесь только градиент текста цифры (визуальная характеристика бренда). * ======================================================================== */ .wm-grid-list--number .wm-grid-list__value { background: linear-gradient(180deg, #5b8eff 0%, var(--wintra-color-primary, #033fcb) 55%, var(--wintra-color-primary-dark, #002c97) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; font-weight: 800; letter-spacing: -0.04em; } .wm-bento__item--large { background: linear-gradient(135deg, var(--wintra-color-primary) 0%, var(--wintra-color-primary-dark) 100%); } /* ======================================================================== * Группа «Тарифы» (Row-6) — тёмная подложка с радиальным градиентом и * мягким световым акцентом справа-сверху (по эталону design/v14 #products). * * Применяется через PageGrid-поле «Фон группы» — шеф вписывает туда имя * класса: wm-bg-tariffs. PageGrid распознаёт что это CSS-класс (содержит * дефис, regex в pagerenderer.php:177-180) и добавляет к корневому *
. * ======================================================================== */ .wm-bg-tariffs { position: relative; /* Обрезаем декор-фигуры (::before круг, ::after треугольник) по контейнеру группы — иначе они вылезают за границы и нарушают композицию. Стрелки управления слайдером теперь во внешнем native (slider-arrows), внутри компонента не торчат — overflow: hidden безопасен. */ overflow: hidden; background: radial-gradient(ellipse 70% 60% at 80% 20%, rgba(91, 142, 255, 0.22) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 15% 90%, rgba(30, 80, 224, 0.20) 0%, transparent 50%), linear-gradient(135deg, #0D0D0D 0%, #0225A8 100%); /* Цвет светлого текста — per-site специфика тёмной подложки Винтры. Custom.css = специфика сайта (правило шефа). */ color: var(--wintra-color-surface, #ffffff); } /* Декор-фигуры (как .wintra-pattern-dark в v14): большой круг справа-сверху + треугольник слева-снизу. На pointer-events:none, чтобы не блокировать клик. */ .wm-bg-tariffs::before { content: ''; position: absolute; top: -80px; right: -100px; width: 320px; height: 320px; border: 2px solid rgba(255, 255, 255, 0.20); border-radius: 50%; pointer-events: none; z-index: 0; } .wm-bg-tariffs::after { content: ''; position: absolute; bottom: -30px; left: 8%; width: 0; height: 0; border-left: 90px solid transparent; border-right: 90px solid transparent; border-bottom: 150px solid rgba(255, 255, 255, 0.12); transform: rotate(-15deg); pointer-events: none; z-index: 0; } /* Контент над декором */ .wm-bg-tariffs > * { position: relative; z-index: 1; } /* Цвет текста и dotnav-стиль теперь приходят универсально через [data-theme="dark"] на обёртке группы (поле «Тёмная» в PageGrid). Здесь только декор-фигуры и фон, без принудительного color. */ /* === Изоляция bleed-peek (для wintra.cert и других bleed-слайдеров) ===== * overflow-x:clip на html+body прячет horizontal scroll от слайдеров с * margin-right: calc(-1 * ((100vw - 100%) / 2)) (peek-эффект). * * Важно: используем `clip` (не `hidden`) — `clip` НЕ переключает overflow-y * на auto, поэтому absolute-дропдауны меню (uk-navbar-dropdown, * wm-menu__mega-drop) работают как раньше. Это правка глобальная — для * любых bleed-компонентов на 2026.wintramedia.ru. * * Прецедент 30.05.2026: блок «Сертификаты» (wintra.cert + bleed=Y) при * per-view=5 давал тонкий horizontal scroll внизу body. * ===================================================================== */ html, body { overflow-x: clip; } /* === Глубокий синий фон футера (паттерн v14 section-dark) ================ * Шеф задал в настройках модуля 03 · Цвета custom-токен `footer_back`. * Автогенерация создаёт класс `.wintra-custom-footer_back` с одним * `background: var(--wintra-custom-footer_back)`. Здесь перекрываем * на градиент + два слоя радиальных синих splash'ов + декор-фигуры * (кольцо + треугольник) — как `.section-dark .wintra-pattern-dark` в v14. * * Шеф в настройках хранит токен `footer_back` как HEX (база градиента, * обычно тёмно-синий: #0a1224 / #0d1530). Сами акценты — rgba-наложения * относительно бренд-цветов (синий-primary + светлый indigo). * ========================================================================= */ .wintra-custom-footer_back { position: relative; background: radial-gradient(circle at 15% 85%, rgba(91, 142, 255, 0.18) 0%, transparent 35%), radial-gradient(circle at 85% 15%, rgba(3, 63, 203, 0.22) 0%, transparent 35%), linear-gradient(135deg, var(--wintra-custom-footer_back, #0a1224) 0%, #0e1b3a 100%) !important; overflow: hidden; } .wintra-custom-footer_back::before { content: ''; position: absolute; top: -80px; right: -100px; width: 320px; height: 320px; border: 2px solid rgba(91, 142, 255, 0.15); border-radius: 50%; pointer-events: none; } .wintra-custom-footer_back::after { content: ''; position: absolute; bottom: -30px; left: 8%; width: 0; height: 0; border-left: 90px solid transparent; border-right: 90px solid transparent; border-bottom: 150px solid rgba(91, 142, 255, 0.08); transform: rotate(-15deg); pointer-events: none; } .wintra-custom-footer_back > * { position: relative; z-index: 1; } /* Списки внутри футера, оформленные через uk-flex (inline-меню с двумя * ссылками типа «Политика конфиденциальности · Согласие на обработку ПД»): * снимаем маркеры-точки, сбрасываем дефолтный padding-left у
    , * даём нормальный зазор через токен модуля. Целимся на ul с любым * uk-flex-классом — это явное намерение шефа «список в строку». */ .wintra-custom-footer_back ul.uk-flex, .wintra-custom-footer_back ul[class*="uk-flex"] { list-style: none; padding-left: 0; margin: 0; gap: var(--wintra-module-gap, 16px); } .wintra-custom-footer_back ul[class*="uk-flex"] > li::before { display: none; } .wintra-custom-footer_back ul[class*="uk-flex"] > li { padding: 0; margin: 0; } /* === Cert-слайдер: точки всегда primary (даже на тёмном ряду) =========== * Прецедент 30.05.2026: ряд «Сертификаты» имеет [data-theme="dark"] * (галка «Тёмный фон» в Сетке), но точки-индикатор вынесены ПОД ряд * (data-dots="under"), фактически на светлом фоне страницы. Глобальное * правило `[data-theme="dark"] .uk-dotnav` красит их в светлый — точки * становятся невидимыми. Локально для cert-темы возвращаем primary. * ===================================================================== */ .wm-slider.wm-tariffs--theme-cert .uk-dotnav { --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); --wm-dot-active-w: 24px; } .wm-row--shapka-desktop .wm-phone { font-weight: var(--wintra-custom-fw600); }