* { box-sizing: border-box; } /* Семантическая дизайн-система: светлая тема по умолчанию. --color-primary/--color-accent/--font-family задаются из настроек в . */ :root { --bg-primary: #ffffff; --bg-surface: #f4f5f7; --text-main: #1a1a1a; --text-muted: #666666; --border-color: #e1e3e8; /* Пресеты вертикальных отступов блоков (адаптивные через clamp). */ --space-small: clamp(20px, 3vw, 32px); --space-premium: clamp(48px, 6vw, 80px); --space-max: clamp(64px, 8vw, 110px); } /* Тёмная тема: явное переключение через data-theme="dark". */ :root[data-theme="dark"] { --bg-primary: #14161c; --bg-surface: #1d212b; --text-main: #eceef3; --text-muted: #9aa2b1; --border-color: #2b303c; } /* Авто-тема: следуем системным настройкам, если тема не задана явно. */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --bg-primary: #14161c; --bg-surface: #1d212b; --text-main: #eceef3; --text-muted: #9aa2b1; --border-color: #2b303c; } } body { margin: 0; font-family: var(--font-family, sans-serif); color: var(--text-main); background: var(--bg-primary); line-height: 1.6; transition: background-color .3s ease, color .3s ease; } img { max-width: 100%; display: block; } a { color: var(--color-accent, #e63946); } /* Доступность (задача 122): видимый фокус на всех интерактивных элементах. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 3px solid var(--color-accent, #e63946); outline-offset: 2px; border-radius: 3px; } /* Ссылка «пропустить к содержимому» для клавиатуры/скринридеров. */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 10000; background: var(--bg-surface); color: var(--text-main); padding: 10px 16px; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } .site-header__inner { max-width: 1140px; margin: 0 auto; padding: 20px; display: flex; align-items: center; gap: 20px; } .site-header__zone { display: flex; align-items: center; gap: 18px; } .site-header__zone--left { justify-content: flex-start; } .site-header__zone--center { justify-content: center; flex: 1; } .site-header__zone--right { justify-content: flex-end; margin-left: auto; } /* Когда логотип по центру, левая и правая зоны делят пространство поровну */ .site-header--logo-center .site-header__zone--left, .site-header--logo-center .site-header__zone--right { flex: 1; } .site-header--logo-center .site-header__zone--right { margin-left: 0; } .site-menu { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; } .site-menu a, .site-menu__link { text-decoration: none; color: var(--color-primary, #1a1a1a); font-weight: 600; } .site-menu a:hover, .site-menu__link:hover { color: var(--color-accent, #e63946); } /* Выпадающее подменю (задача 3, группа 3) */ .site-menu__item { position: relative; } .site-menu__item--has-children > .site-menu__link { display: inline-flex; align-items: center; gap: 4px; } .site-menu__toggle { background: none; border: 0; cursor: pointer; font-size: 0.8em; color: inherit; padding: 0 2px; line-height: 1; } .site-submenu { position: absolute; top: 100%; left: 0; min-width: 180px; z-index: 50; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--bg-surface, #fff); border: 1px solid var(--border, #e0e0e0); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1), transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.25s; } .site-submenu__link { padding: 6px 10px; border-radius: 6px; white-space: nowrap; } .site-submenu__link:hover { background: var(--bg-muted, #f2f2f2); } /* Desktop: раскрытие по hover и по фокусу внутри пункта (клавиатура). */ @media (hover: hover) { .site-menu__item--has-children:hover > .site-submenu, .site-menu__item--has-children:focus-within > .site-submenu { opacity: 1; visibility: visible; transform: translateY(0); } } /* Явное раскрытие по клику/тапу (мобильные): JS ставит .is-open на пункт. */ .site-menu__item.is-open > .site-submenu { opacity: 1; visibility: visible; transform: translateY(0); } .site-lang-switcher { display: flex; gap: 8px; } .site-lang-switcher__item { text-decoration: none; color: #888; font-weight: 600; font-size: 0.875rem; } .site-lang-switcher__item.is-active { color: var(--color-primary, #1a1a1a); } .site-social { display: flex; gap: 8px; } .site-social__link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary, #1a1a1a); color: #fff; text-decoration: none; font-weight: 700; font-size: 0.875rem; } .site-cta { display: inline-block; padding: 9px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.875rem; } .site-cta--filled { background: var(--color-accent, #e63946); color: #fff; } .site-cta--outline { border: 2px solid var(--color-accent, #e63946); color: var(--color-accent, #e63946); } .site-theme-toggle { background: transparent; border: 1px solid var(--border-color); color: var(--text-main); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; } @media (max-width: 720px) { .site-header__inner { flex-wrap: wrap; } .site-header__zone { flex-wrap: wrap; gap: 12px; } } /* Раскладка с сайдбаром */ .layout { max-width: 1140px; margin: 0 auto; padding: 20px; display: grid; gap: 30px; } .layout--left { grid-template-columns: 300px 1fr; } .layout--right { grid-template-columns: 1fr 300px; } @media (max-width: 860px) { .layout--left, .layout--right { grid-template-columns: 1fr; } } .layout__sidebar { min-width: 0; } .widget { margin-bottom: 28px; } .widget__title { font-size: 1.125rem; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--color-accent, #e63946); } .widget-latest-news, .widget-projects, .widget-team { list-style: none; margin: 0; padding: 0; } .widget-latest-news li { margin-bottom: 12px; } .widget-latest-news a { text-decoration: none; color: var(--color-primary, #1a1a1a); font-weight: 600; display: block; } .widget-latest-news time { font-size: 0.75rem; color: var(--text-muted); } .widget-projects li, .widget-team li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .widget-projects img, .widget-team img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; } .widget-team div { display: flex; flex-direction: column; } .widget-team span { font-size: 0.8125rem; color: var(--text-muted); } .widget-contacts__line { margin: 6px 0; } .widget-contacts__social { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .widget-social-link { font-size: 0.8125rem; text-decoration: none; color: var(--color-accent, #e63946); font-weight: 600; } .widget-empty { color: var(--text-muted); font-size: 0.875rem; } .site-header__logo { display: inline-flex; align-items: center; font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--color-primary, #1a1a1a); } /* Явная высота (не только max-height): SVG без собственных размеров (width="100%") получает определённую высоту и вычисляет ширину из viewBox, иначе схлопывается в 0. max-width страхует от переполнения по горизонтали. */ .site-header__logo img { width: var(--header-logo-width, 240px); height: var(--header-logo-height, 48px); max-width: 100%; object-fit: contain; } .site-content { max-width: 1140px; margin: 0 auto; padding: 20px; } .site-footer { text-align: center; padding: 30px 20px; color: var(--text-muted); font-size: 0.875rem; } /* Система «воздуха»: базовый отступ блока = плотность из настроек дизайна (--section-pad), с откатом на пресет. Классы --space-* переопределяют. */ .cms-block { margin: 0; padding: var(--section-pad, var(--space-premium)) 0; } .cms-block--space-none { padding: 0; } .cms-block--space-small { padding: var(--space-small) 0; } .cms-block--space-premium { padding: var(--space-premium) 0; } .cms-block--space-max { padding: var(--space-max) 0; } /* Условия показа по устройству. Порог 768px совпадает с основным мобильным брейкпоинтом темы; ограничение решается стилями, потому что кэш страницы общий для всех посетителей. */ @media (max-width: 768px) { .cms-block--only-desktop { display: none; } } @media (min-width: 769px) { .cms-block--only-mobile { display: none; } } /* Микро-анимации появления при скролле (Intersection Observer, группа 4.2). */ [data-reveal] { opacity: 0; transition: opacity .75s cubic-bezier(0.215, 0.61, 0.355, 1), transform .75s cubic-bezier(0.215, 0.61, 0.355, 1); } [data-reveal-type="slide-up"] { transform: translateY(28px); } [data-reveal-type="slide-left"] { transform: translateX(-32px); } [data-reveal-type="slide-right"] { transform: translateX(32px); } [data-reveal-type="zoom-in"] { transform: scale(.94); } /* fade — только прозрачность (transform не нужен). */ [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } } /* Мягкий каскад появления карточек в сетках. Класс .anim-card навешивает САМ JS — без JS (или при reduced-motion) карточки просто видны. */ .anim-card { opacity: 0; transform: translateY(18px) scale(.99); transition: opacity .65s ease, transform .7s cubic-bezier(.22, 1, .36, 1); } .anim-card.is-inview { opacity: 1; transform: none; } /* У новостного блока крупные колонки проявляются почти на месте: так движение читается как мягкое появление, а не как резкий прыжок всего макета. */ .newsfeat-grid > .anim-card { transform: translateY(8px) scale(.995); transition: opacity .75s ease, transform .85s cubic-bezier(.22, 1, .36, 1); } .newsfeat-grid > .anim-card.is-inview { transform: none; } @media (prefers-reduced-motion: reduce) { .anim-card { opacity: 1 !important; transform: none !important; transition: none; } } .block-text__title { font-size: 1.75rem; margin-bottom: 12px; } .block-cta { text-align: center; padding: 40px; background: var(--bg-surface); border-radius: 12px; } .block-cta__button { display: inline-block; margin-top: 16px; padding: 12px 28px; background: var(--color-accent, #e63946); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; } .block-advantages__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .block-advantages__item { text-align: center; padding: 30px 24px; background: var(--gov-surface); border: 1px solid var(--gov-border); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease; } .block-advantages__item:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(19,42,92,.08); border-color: var(--gov-teal); } .block-advantages__item h3 { transition: color 0.3s ease; } .block-advantages__item:hover h3 { color: var(--gov-teal-text); } .block-advantages__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--color-accent, #2f6fed) 8%, transparent); color: var(--color-accent, #2f6fed); margin-bottom: 16px; font-size: 28px; transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; } .block-advantages__item:hover .block-advantages__icon { background: var(--color-accent, #2f6fed); color: #fff; } @keyframes advantages-icon-float { 0%, 100% { transform: translateY(0) scale(1.08); } 50% { transform: translateY(-7px) scale(1.08); } } @media (prefers-reduced-motion: no-preference) { .block-advantages__item:hover .block-advantages__icon, .block-advantages__item:focus-within .block-advantages__icon { animation: advantages-icon-float 1.8s ease-in-out infinite; } } @media (prefers-reduced-motion: reduce) { .block-advantages__item, .block-advantages__icon { transition: none; } .block-advantages__item:hover { transform: none; } .block-advantages__item:hover .block-advantages__icon, .block-advantages__item:focus-within .block-advantages__icon { animation: none; transform: none; } } .block-slider { position: relative; overflow: hidden; border-radius: 12px; } .block-slider__slide { display: none; } .block-slider__slide.is-active { display: block; } .block-slider__nav { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; padding: 0 12px; } .block-slider__nav button { pointer-events: auto; background: rgba(0, 0, 0, .4); color: #fff; border: none; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; } .block-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .block-gallery__item { display: block; overflow: hidden; border-radius: var(--radius, 12px); transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease; } .block-gallery__item:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(19, 42, 92, 0.08); } .block-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius, 12px); transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .block-gallery__item:hover img { transform: scale(1.05); } .block-form__consent { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 16px; font-size: .92rem; color: var(--text-muted); } .block-form__consent input { margin-top: 3px; flex-shrink: 0; } .block-form__consent a { color: var(--color-accent, #5b52e5); } .block-form__field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; } /* Двухколоночный макет формы на десктопах */ @media (min-width: 768px) { .block-form__form--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; align-items: start; } .block-form__form--2col .block-form__field--full, .block-form__form--2col .block-form__consent, .block-form__form--2col .block-form__captcha, .block-form__form--2col .block-form__submit { grid-column: span 2; } .block-form__form--2col .block-form__field { margin-bottom: 0; } } .block-form__field input, .block-form__field textarea, .block-form__field select { padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.9375rem; font-family: inherit; background-color: #fff; } .block-form__submit { padding: 12px 24px; background: var(--color-primary, #1a1a1a); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; } .block-form__submit.is-loading { opacity: .7; cursor: progress; } /* AJAX-состояния публичной формы (задача 67.1) */ .block-form__field.is-error input, .block-form__field.is-error textarea { border-color: var(--color-accent, #e63946); } .block-form__error { color: var(--color-accent, #e63946); font-size: 0.8125rem; } .block-form__message { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 0.9375rem; } .block-form__message--error { background: #fdecea; color: #c0392b; } .block-form__thanks { padding: 24px; border-radius: 12px; background: var(--bg-surface); text-align: center; font-size: 1.125rem; font-weight: 600; animation: fadeIn .4s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .site-alert { padding: 12px 18px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9375rem; } .site-alert--success { background: #e6f4ea; color: #1e7e34; } .site-alert--error { background: #fdecea; color: #e63946; } .news-list__item { display: flex; gap: 20px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--border-color); } .news-list__body h2 { margin: 6px 0; } .news-list__body time { font-size: 0.8125rem; color: var(--text-muted); } /* Обложка в списке новостей: адаптивная, с фокальной точкой */ .news-list__cover { position: relative; display: block; width: 220px; flex-shrink: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10; } .news-list__cover picture, .news-list__img { display: block; width: 100%; height: 100%; } .news-list__img { object-fit: cover; } @media (max-width: 560px) { .news-list__item { flex-direction: column; } .news-list__cover { width: 100%; } } /* Значок Play на видео-обложках */ .news-list__play, .news-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer; background: rgba(0,0,0,.55); } .news-list__play::after, .news-video__play::after { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; } .news-list__cover--video .news-list__play { pointer-events: none; } .news-single time { display: block; font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 16px; } .news-single__cover { border-radius: 12px; overflow: hidden; margin-bottom: 20px; } .news-single__cover-img { width: 100%; max-height: 520px; object-fit: cover; } .news-single__back { margin-top: 28px; } /* Раскладка «изображение сбоку» */ .news-side { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; } .news-side__media { border-radius: 12px; overflow: hidden; position: sticky; top: 20px; } .news-side__img { width: 100%; object-fit: cover; } @media (max-width: 720px) { .news-side { grid-template-columns: 1fr; } .news-side__media { position: static; } } /* Слайдер галереи новости */ .news-slider { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 24px; aspect-ratio: 16 / 9; background: var(--bg-surface); } .news-slider__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; } .news-slider__slide.is-active { opacity: 1; } .news-slider__slide picture, .news-slider__img { width: 100%; height: 100%; display: block; } .news-slider__img { object-fit: cover; } .news-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: rgba(0,0,0,.45); color: #fff; font-size: 1.625rem; line-height: 1; } .news-slider__nav--prev { left: 12px; } .news-slider__nav--next { right: 12px; } /* Ленивый YouTube-плеер */ .news-video { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 24px; aspect-ratio: 16 / 9; background: #000; cursor: pointer; } .news-video__thumb { width: 100%; height: 100%; object-fit: cover; } .news-video__iframe { width: 100%; height: 100%; border: 0; display: block; } .news-video__end { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: #000; cursor: default; } .news-video__end[hidden] { display: none; } .news-video__end-thumb { position: absolute; inset: 0; } .news-video__end::after { content: ''; position: absolute; inset: 0; background: rgba(5, 16, 31, .34); } .news-video__replay { position: relative; z-index: 1; min-height: 48px; padding: 12px 22px; border: 1px solid rgba(255,255,255,.7); border-radius: var(--btn-radius, 10px); background: rgba(5,16,31,.78); color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .news-video__replay:hover { background: rgba(5,16,31,.94); } .news-video__replay:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* Скелетон-заглушки (до загрузки медиа) */ .skeleton { position: relative; background: var(--bg-surface); } .skeleton::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); background-size: 200% 100%; animation: skeleton-shimmer 1.3s ease-in-out infinite; } .skeleton > * { position: relative; z-index: 0; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton::before { animation: none; } } /* --- Печатные стили (задача 63.2): чистый документ с логотипом и canonical --- */ .print-only { display: none; } @media print { /* Скрываем всё «служебное»: шапку, сайдбары, футер, переключатель темы, соцкнопки, CTA, cookie-баннер, кнопки шеринга, слайдер-навигацию. */ .site-header, .layout__sidebar, .site-footer, .site-theme-toggle, .site-social, .site-cta, .site-lang-switcher, .site-menu, .cookie-banner, .share-buttons, .news-slider__nav, .news-video__play, .news-single__back, .newsdetail-share, .catdetail__download, .catdetail__back, .no-print { display: none !important; } /* Страница новости: печатаем саму статью, а не всё, что под ней. Служебные блоки помечены классом no-print прямо в шаблоне (подписка, похожие новости, соседние, кнопки «Поделиться») — так пометка переживает переименование CSS-классов при следующем редизайне. Здесь добиваем то, что относится к интерактиву внутри самой статьи. */ .crumbs, .content-crumbs, .newsdetail-gallery__nav, .newsdetail-gallery__thumbs, .newsdetail-gallery__counter, .newsdetail-toc, .newsdetail-photos .newsdetail__btn, .newsdetail-phero__video, .scroll-top, .search-suggest { display: none !important; } /* Обложка-hero: на бумаге белый текст на фото нечитаем, поэтому печатаем заголовок и мету обычным чёрным по белому, без подложки. */ .newsdetail-phero { background-image: none !important; min-height: 0 !important; padding: 0 !important; } .newsdetail-phero__overlay { display: none !important; } .newsdetail-phero__title, .newsdetail-phero__lead, .newsdetail__meta--onDark, .newsdetail__badge--onDark, .newsdetail__source--onDark { color: #000 !important; background: none !important; } /* Колонки статьи на A4 не нужны — один поток. */ .newsdetail-body, .newsdetail-head { display: block !important; } .newsdetail-card { border: 0 !important; padding: 0 !important; margin: 12px 0 !important; } /* Заголовок не должен отрываться от текста. */ .newsdetail-card__title, .newsdetail__body h2, .newsdetail__body h3 { break-after: avoid; } .newsdetail-photos__grid img, .newsdetail-gallery__slide { break-inside: avoid; } html, body { background: #fff !important; color: #000 !important; } a { color: #000 !important; text-decoration: none; } .site-content, .layout { max-width: none; margin: 0; padding: 0; display: block; } .cms-block, .cms-block[data-reveal] { opacity: 1 !important; transform: none !important; padding: 12px 0 !important; } img, picture { max-width: 100% !important; } /* Печатная «шапка»: логотип и адрес страницы. */ .print-only { display: block !important; } .print-header { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #000; } .print-header img { max-height: 48px; } .print-header .print-name { font-size: 1.25rem; font-weight: 700; } .print-footer { margin-top: 18px; padding-top: 10px; border-top: 1px solid #000; font-size: 0.75rem; color: #000; } /* Раскрываем ссылки после текста, где это уместно. */ .news-single__content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.6875rem; } } /* Cookie-Consent баннер (задача 116) */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 20px; background: var(--bg-surface); border-top: 1px solid var(--border-color); box-shadow: 0 -6px 20px rgba(0,0,0,.08); font-size: 0.875rem; } .cookie-banner__text { flex: 1; min-width: 220px; color: var(--text-main); } .cookie-banner__text a { color: var(--color-accent, #e63946); } .cookie-banner__accept, .cookie-banner__decline { padding: 9px 18px; border-radius: 8px; cursor: pointer; font-weight: 600; border: 1px solid var(--border-color); } .cookie-banner__accept { background: var(--color-accent, #e63946); color: #fff; border-color: transparent; } .cookie-banner__decline { background: transparent; color: var(--text-main); } /* Лайтбокс для блоков галереи */ .cms-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; } .cms-lightbox.is-open { display: flex; } .cms-lightbox__stage { display: flex; align-items: center; justify-content: center; max-width: 100%; } .cms-lightbox img { max-width: 92vw; max-height: 84vh; border-radius: 8px; } .cms-lightbox__video { width: min(92vw, 1100px); aspect-ratio: 16 / 9; max-height: 84vh; border: 0; border-radius: 8px; background: #000; } .cms-lightbox__close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer; z-index: 2; } .cms-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: 0; color: #fff; font-size: 1.625rem; line-height: 1; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; z-index: 2; } .cms-lightbox__nav:hover { background: rgba(255,255,255,.25); } .cms-lightbox__nav--prev { left: 14px; } .cms-lightbox__nav--next { right: 14px; } .cms-lightbox__caption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: rgba(255,255,255,.85); font-size: .95rem; padding: 0 60px; } .cms-lightbox__caption[hidden] { display: none; } /* Полоса предпросмотра (группа 5.2) */ .preview-bar { position: sticky; top: 0; z-index: 9999; text-align: center; background: #b45309; color: #fff; padding: 8px 16px; font-weight: 600; font-size: 0.875rem; } body.is-preview { outline: 3px solid #b45309; outline-offset: -3px; } /* Блок «Колонки» (группа 4.1) */ .cms-columns { display: grid; } .cms-columns--2 { grid-template-columns: repeat(2, 1fr); } .cms-columns--3 { grid-template-columns: repeat(3, 1fr); } .cms-columns--4 { grid-template-columns: repeat(4, 1fr); } .cms-columns--gap-small { gap: 12px; } .cms-columns--gap-medium { gap: 28px; } .cms-columns--gap-large { gap: 48px; } /* Вложенные блоки не добавляют собственный вертикальный «воздух». */ .cms-columns__col > .cms-block { padding-top: 0; padding-bottom: 0; } @media (max-width: 720px) { .cms-columns--2, .cms-columns--3, .cms-columns--4 { grid-template-columns: 1fr; } } /* Новые блоки (группа 4): отзывы, счётчики, команда, проекты */ .block-testimonials__title, .block-counters__title, .block-team__title, .block-projects__title { text-align: center; margin: 0 0 28px; } .block-testimonials__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 10px 20px; scrollbar-width: thin; } .block-testimonials__track:focus-visible { outline: 2px solid var(--gov-teal); outline-offset: 4px; border-radius: 8px; } .testimonial { scroll-snap-align: start; flex: 0 0 min(360px, 85%); margin: 0; background: var(--gov-surface, #fff); border: 1px solid var(--gov-border); border-radius: 16px; padding: 32px 28px; text-align: center; box-shadow: 0 4px 12px rgba(19,42,92,.02); transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease; } .testimonial:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 16px 36px rgba(19, 42, 92, 0.06); border-color: var(--gov-teal); } .testimonial__photo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; border: 3px solid var(--gov-border); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease; } .testimonial:hover .testimonial__photo { transform: scale(1.08); border-color: var(--gov-teal); } .testimonial__quote { margin: 0 0 16px; font-style: italic; font-size: 0.98rem; line-height: 1.6; color: var(--gov-title, #1e293b); position: relative; } .testimonial__quote::before { content: '“'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-family: Georgia, serif; font-size: 3rem; line-height: 1; color: color-mix(in srgb, var(--gov-teal) 14%, transparent); z-index: 1; pointer-events: none; } .testimonial__name { display: block; font-weight: 700; color: var(--gov-title); } .testimonial__company { color: var(--text-muted); font-size: 0.875rem; } .block-counters__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; text-align: center; } .counter__value, .counter__suffix { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; color: var(--color-accent, #e63946); line-height: 1; } .counter__suffix { margin-left: 2px; } .counter__label { margin-top: 8px; color: var(--text-muted); } .block-team__grid, .block-projects__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; } .team-card { text-align: center; } .team-card__photo { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; margin-bottom: 12px; transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .team-card:hover .team-card__photo { transform: scale(1.04); } .team-card__name { font-weight: 700; transition: color 0.3s ease; } .team-card:hover .team-card__name { color: var(--color-accent, #e63946); } .team-card__position { color: var(--text-muted); font-size: 0.875rem; } .project-card { display: block; text-decoration: none; color: inherit; background: var(--bg-surface); border-radius: 12px; overflow: hidden; } .project-card__cover { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .project-card:hover .project-card__cover { transform: scale(1.05); } .project-card__title { font-weight: 700; padding: 12px 14px 0; transition: color 0.3s ease; } .project-card:hover .project-card__title { color: var(--color-accent, #e63946); } .project-card__desc { padding: 6px 14px 14px; margin: 0; color: var(--text-muted); font-size: 0.875rem; } .block-team__empty, .block-projects__empty { text-align: center; color: var(--text-muted); } /* SVG-иконка в блоке преимуществ (группа 4.3) */ .block-advantages__icon--svg svg { width: 48px; height: 48px; display: block; margin: 0 auto; } .block-advantages__icon--svg svg [fill]:not([fill="none"]) { fill: currentColor; } /* FAQ / аккордеон (группа 6) */ .block-faq__title { text-align: center; margin: 0 0 24px; } .block-faq__list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { border: 1px solid var(--gov-border, #e0e0e0); border-radius: 8px; background: var(--gov-surface, #fff); transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; overflow: hidden; } .faq-item:hover { border-color: var(--gov-teal); box-shadow: 0 4px 18px rgba(19,42,92,.03); } .faq-item[open] { border-color: var(--gov-teal); background: color-mix(in srgb, var(--gov-teal) 3%, var(--gov-surface)); box-shadow: 0 4px 18px rgba(19,42,92,.04); } .faq-item__q { cursor: pointer; padding: 18px 24px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--gov-title, #1a1a1a); transition: color 0.25s ease, background-color 0.25s ease; user-select: none; } .faq-item__q:hover { color: var(--gov-teal-text); } .faq-item__q::after { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 2px solid var(--gov-teal); border-bottom: 2px solid var(--gov-teal); transform: rotate(45deg); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s; margin-right: 6px; margin-left: 12px; } .faq-item[open] .faq-item__q::after { transform: rotate(225deg); border-color: var(--gov-teal-text); } .faq-item__q::-webkit-details-marker { display: none; } .faq-item__a { padding: 0 24px 22px; color: var(--gov-muted, #666); font-size: .95rem; line-height: 1.6; animation: faq-fade-in 0.35s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes faq-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* --- Каталог пользовательских типов контента (Документы/Вакансии/Тендеры) --- */ /* Страницы фотоальбомов: ширина как у остальных списков сайта, а не узкая статейная колонка — иначе сетка карточек выглядела обрезанной. */ .content-list { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 24px 20px 56px; } .content-list__head { margin-bottom: 24px; } .content-list__head h1 { margin: 0 0 8px; } .content-list__lead { color: var(--text-muted); font-size: 1.05rem; margin: 0; } .content-list__empty { color: var(--text-muted); padding: 32px 0; } .content-cards { display: flex; flex-direction: column; gap: 16px; } .content-card { border: 1px solid var(--border-color, #e3e6ea); border-radius: 10px; padding: 20px 22px; background: var(--surface, #fff); transition: box-shadow .15s ease, transform .15s ease; } .content-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.07); } .content-card__title { margin: 0 0 10px; font-size: 1.25rem; } .content-card__title a { color: var(--color-primary, #1a1a1a); text-decoration: none; } .content-card__title a:hover { color: var(--color-accent, #e63946); } .content-card__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--text-muted); font-size: .92rem; margin-bottom: 10px; } .content-card__meta-item b { font-weight: 600; color: var(--color-primary, #1a1a1a); } .content-card__excerpt { margin: 0 0 14px; color: var(--text-muted); line-height: 1.5; } .content-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .content-card__file a { color: var(--color-accent, #e63946); text-decoration: none; } .content-card__more { margin-left: auto; color: var(--color-accent, #e63946); text-decoration: none; font-weight: 600; } .content-detail { max-width: 820px; margin: 0 auto; padding: 24px 16px 56px; } .content-detail__crumbs { margin-bottom: 14px; } .content-detail__crumbs a { color: var(--color-accent, #e63946); text-decoration: none; } .content-detail__title { margin: 0 0 6px; } .content-detail__date { color: var(--text-muted); font-size: .92rem; } .content-detail__fields { margin: 24px 0 0; display: grid; gap: 2px; } .content-detail__row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-color, #eee); } .content-detail__row dt { font-weight: 600; color: var(--color-primary, #1a1a1a); margin: 0; } .content-detail__row dd { margin: 0; color: var(--text-color, #222); line-height: 1.6; } .content-detail__row--textarea { grid-template-columns: 1fr; } .content-detail__row--textarea dt { margin-bottom: 6px; } .content-detail__download { display: inline-block; background: var(--color-accent, #e63946); color: #fff; padding: 8px 16px; border-radius: 6px; text-decoration: none; } .content-detail__row--image dd img { max-width: 320px; height: auto; border-radius: 8px; } @media (max-width: 640px) { .content-detail__row { grid-template-columns: 1fr; gap: 4px; } } /* --- Поиск по сайту --- */ .site-search { display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: 20px; overflow: hidden; background: transparent; transition: width 0.3s ease, background 0.3s ease, border-color 0.3s ease; } .site-search input { border: 0; outline: 0; padding: 6px 0; font: inherit; background: transparent; color: inherit; width: 0; opacity: 0; transition: width 0.3s ease, padding 0.3s ease, opacity 0.3s ease; pointer-events: none; } .site-search button { border: 0; background: transparent; padding: 8px 10px; cursor: pointer; color: var(--color-accent, #e63946); display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .site-search.is-active { background: var(--surface, #fff); border-color: var(--border-color, #d5d9de); } .site-search.is-active input { width: 140px; padding: 6px 12px; opacity: 1; pointer-events: auto; } .site-search-page { max-width: 780px; margin: 0 auto; padding: 24px 16px 56px; } .site-search-page__form { display: flex; gap: 10px; margin: 16px 0 24px; } .site-search-page__form input { flex: 1; padding: 12px 16px; border: 1px solid var(--border-color, #d5d9de); border-radius: 8px; font: inherit; } .site-search-page__form button { padding: 12px 24px; border: 0; border-radius: 8px; background: var(--color-accent, #e63946); color: #fff; font-weight: 600; cursor: pointer; } .site-search-page__count { color: var(--text-muted); margin-bottom: 16px; } .site-search-results { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .site-search-results__item { padding: 14px 16px; border: 1px solid var(--border-color, #eee); border-radius: 8px; } .site-search-results__type { display: inline-block; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-accent, #e63946); font-weight: 700; margin-bottom: 4px; } .site-search-results__link { display: block; font-size: 1.1rem; font-weight: 600; text-decoration: none; color: var(--color-primary, #1a1a1a); } .site-search-results__link:hover { color: var(--color-accent, #e63946); } .site-search-results__excerpt { margin: 6px 0 0; color: var(--text-muted); font-size: .95rem; } @media (max-width: 640px) { .site-search { display: none; } } /* --- Каталог: хлебные крошки, тулбар, статусы, пагинация --- */ .content-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .88rem; color: var(--text-muted); margin-bottom: 16px; } .content-crumbs a { color: var(--color-accent, #e63946); text-decoration: none; } .content-crumbs span { color: var(--text-muted); } .content-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; align-items: center; } .content-toolbar input[type="search"] { flex: 1 1 220px; padding: 9px 12px; border: 1px solid var(--border-color, #d5d9de); border-radius: 8px; font: inherit; } .content-toolbar select { padding: 9px 12px; border: 1px solid var(--border-color, #d5d9de); border-radius: 8px; font: inherit; background: var(--surface, #fff); } .content-toolbar button { padding: 9px 18px; border: 0; border-radius: 8px; background: var(--color-accent, #e63946); color: #fff; font-weight: 600; cursor: pointer; } .content-toolbar__reset { color: var(--text-muted); text-decoration: underline; font-size: .9rem; } .content-list__count { color: var(--text-muted); font-size: .9rem; margin: 0 0 12px; } .content-card__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .content-badge { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; } .content-badge--active { background: #e6f4ea; color: #1c7c3b; } .content-badge--archived { background: #eef0f3; color: #66707c; } .content-card--archived { opacity: .72; } .content-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 28px; } .content-pager__link { min-width: 40px; text-align: center; padding: 8px 12px; border: 1px solid var(--border-color, #d5d9de); border-radius: 8px; text-decoration: none; color: var(--color-primary, #1a1a1a); } .content-pager__link:hover { border-color: var(--color-accent, #e63946); color: var(--color-accent, #e63946); } .content-pager__link.is-current { background: var(--color-accent, #e63946); color: #fff; border-color: var(--color-accent, #e63946); font-weight: 700; } /* --- Блок «Последние новости» (для главной и любых страниц) --- */ .block-news__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .block-news__title { margin: 0; } .block-news__all { color: var(--color-accent, #e63946); text-decoration: none; font-weight: 600; white-space: nowrap; } .block-news__empty { color: var(--text-muted); } .block-news__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; } .news-card { border: 1px solid var(--border-color, #e3e6ea); border-radius: 10px; overflow: hidden; background: var(--surface, #fff); transition: box-shadow .15s ease, transform .15s ease; } .news-card:hover { box-shadow: 0 8px 26px rgba(0,0,0,.08); transform: translateY(-2px); } .news-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .news-card__cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f0f2f5; } .news-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .news-card:hover .news-card__cover img { transform: scale(1.05); } .news-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; } .news-card__date { color: var(--text-muted); font-size: .82rem; } .news-card__title { font-weight: 600; font-size: 1.08rem; color: var(--color-primary, #1a1a1a); line-height: 1.35; } .news-card:hover .news-card__title { color: var(--color-accent, #e63946); } .news-card__excerpt { color: var(--text-muted); font-size: .92rem; line-height: 1.5; } /* ============================================================================ Тема-билдер: применение переменных дизайна + современная отделка фронтенда. Переменные --container-max/--radius/--card-gap/--section-pad/--btn-radius задаются в из настроек дизайна (DesignSettings). Значения ниже — безопасные дефолты на случай отсутствия настроек. ========================================================================== */ :root { --container-max: 1200px; --radius: 14px; --radius-sm: 9px; --card-gap: 24px; --section-pad: 68px; --btn-radius: 10px; --surface: #ffffff; --shadow-sm: 0 1px 2px rgba(16,24,40,.05); --shadow-md: 0 6px 22px rgba(16,24,40,.08); --shadow-lg: 0 18px 48px rgba(16,24,40,.12); } :root[data-theme="dark"] { --surface: #1d212b; } /* Ширина контейнеров из настроек */ .site-header__inner, .site-content, .layout { max-width: var(--container-max); } /* Скругления карточек/полей */ .content-card, .news-card, .site-search-results__item, .block-cta, .block-form, .block-testimonials__item, .widget, .content-detail, .block-slider, .block-gallery__item img { border-radius: var(--radius); } /* Форма кнопок */ .site-cta, .content-toolbar button, .site-search-page__form button, .content-detail__download, .block-cta a, .block-news__all { border-radius: var(--btn-radius); } /* Отступ между карточками в сетках */ .block-news__grid, .block-projects__grid, .site-search-results { gap: var(--card-gap); } /* Базовый вертикальный ритм секций задаётся выше в .cms-block через --section-pad (плотность из настроек дизайна); здесь не дублируем, чтобы не перекрывать per-block классы --space-*. */ /* --- Каталог: макеты из настроек дизайна --- */ body.design-catalog-cards_lg .content-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); } body.design-catalog-cards_sm .content-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } body.design-catalog-cards_sm .content-card { padding: 16px 18px; } body.design-catalog-list .content-cards { display: flex; flex-direction: column; } /* --- Шапка: стиль и фиксация из настроек --- */ body.design-header-sticky .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg-primary) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); box-shadow: var(--shadow-sm); } body.design-header-dark .site-header { background: #14161c; } body.design-header-dark .site-header .site-menu__link, body.design-header-dark .site-header .site-header__logo span, body.design-header-dark .site-header a { color: #f3f5f9; } body.design-header-accent .site-header { background: linear-gradient(90deg, var(--color-primary, #1a1a1a), color-mix(in srgb, var(--color-primary, #1a1a1a) 70%, var(--color-accent, #e63946))); } body.design-header-accent .site-header .site-menu__link, body.design-header-accent .site-header .site-header__logo span, body.design-header-accent .site-header a { color: #fff; } body.design-header-accent .site-search { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); } body.design-header-accent .site-search input { color: #fff; } body.design-header-accent .site-search input::placeholder { color: rgba(255,255,255,.75); } /* --- Современная отделка --- */ .site-header { border-bottom: 1px solid var(--border-color); } .site-menu__link { font-weight: 500; letter-spacing: .01em; transition: color .15s; } .site-cta { font-weight: 600; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; } .site-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } /* Hero (CTA-блок) — крупный современный вид */ .block-cta { background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary,#1a1a1a) 6%, var(--surface)) , var(--surface)); border: 1px solid var(--border-color); padding: clamp(36px, 6vw, 72px); } .block-cta h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; letter-spacing: -.02em; margin-top: 0; } .block-cta a { display: inline-block; padding: 13px 30px; background: var(--color-accent, #e63946); color: #fff; text-decoration: none; font-weight: 600; margin-top: 8px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; } .block-cta a:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } /* Колонки быстрых ссылок — компактные карточки с ховером */ .cms-columns__col .cms-block--cta .block-cta { height: 100%; text-align: left; padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; transition: transform .15s, box-shadow .15s; } .cms-columns__col .cms-block--cta .block-cta h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 0; } .cms-columns__col .cms-block--cta .block-cta p { margin: 0; color: var(--text-muted); } .cms-columns__col .cms-block--cta .block-cta a { margin-top: auto; } .cms-columns__col .cms-block--cta .block-cta:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } h1, h2 { letter-spacing: -.015em; } /* --- Блок «Партнёры» (логотипы) --- */ .block-partners__title { text-align: center; margin: 0 0 28px; } .block-partners__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--card-gap, 24px); align-items: center; } .block-partners__item { display: flex; align-items: center; justify-content: center; padding: 18px; background: var(--surface, #fff); border: 1px solid var(--border-color); border-radius: var(--radius, 14px); min-height: 90px; transition: box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease; } .block-partners__item:hover { box-shadow: 0 12px 28px rgba(19, 42, 92, 0.06); transform: translateY(-4px); border-color: var(--gov-teal); } .block-partners__logo { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s ease; } .block-partners__item:hover .block-partners__logo { filter: grayscale(0); opacity: 1; transform: scale(1.04); } /* Партнёр без логотипа: название текстом вместо битой картинки. */ .block-partners__name { font-weight: 600; font-size: .95rem; text-align: center; color: var(--text-main); } /* --- Блок «Баннер» --- */ .block-banner { border-radius: var(--radius, 14px); overflow: hidden; background: var(--bg-surface); transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .block-banner:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(19, 42, 92, 0.05); } .block-banner--image { background-size: cover; background-position: center; color: #fff; transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .block-banner__inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) clamp(20px, 4vw, 48px); text-align: center; } .block-banner__title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 12px; line-height: 1.15; } .block-banner--image .block-banner__title { color: #fff; } .block-banner__text { font-size: 1.1rem; margin: 0 0 24px; opacity: .95; } .block-banner__button { display: inline-block; padding: 13px 32px; background: var(--color-accent, #e63946); color: #fff; text-decoration: none; font-weight: 600; border-radius: var(--btn-radius, 10px); box-shadow: var(--shadow-sm); transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease, background 0.3s ease; } .block-banner__button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 20px rgba(230, 57, 70, 0.25); } /* --- Стиль карточек и положение сайдбара (настройки дизайна) --- */ .content-card, .news-card, .site-search-results__item, .block-partners__item { box-shadow: var(--card-shadow, none); } /* Плоские карточки — опираемся на обводку, тень убрана. */ body.design-cards-flat .content-card, body.design-cards-flat .news-card, body.design-cards-flat .site-search-results__item, body.design-cards-flat .block-partners__item { border: 1px solid var(--border-color); } /* Плавающий сайдбар — липнет при прокрутке; неподвижный — обычный поток. */ body.design-sidebar-floating .layout__sidebar { position: sticky; top: 20px; align-self: start; } body.design-header-sticky.design-sidebar-floating .layout__sidebar { top: calc(var(--sticky-offset, 76px)); } @media (max-width: 860px) { body.design-sidebar-floating .layout__sidebar { position: static; } } /* --- Тип поиска: в строке vs выпадающий (настройки дизайна) --- */ .site-search-toggle { display: none; background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; align-items: center; justify-content: center; } body.design-search-inline .site-search-toggle { display: none; } body.design-search-inline .site-search { display: inline-flex; } body.design-search-overlay .site-search { display: none; } body.design-search-overlay .site-search-toggle { display: inline-flex; } .site-search-overlay { position: fixed; inset: 0; z-index: 700; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s ease; } .site-search-overlay.is-open { opacity: 1; } .site-search-overlay__form { position: absolute; top: var(--search-popover-top, 76px); right: var(--search-popover-right, 24px); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; width: min(620px, calc(100vw - 32px)); margin: 0; padding: 16px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18); transform: translateY(-10px) scale(.99); transform-origin: top right; transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1); } .site-search-overlay.is-open .site-search-overlay__form { transform: translateY(0); } .site-search-overlay__form input { min-width: 0; width: 100%; font-size: 1rem; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: var(--btn-radius, 10px); background: var(--bg-primary); color: var(--text-main); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .site-search-overlay__form input:focus { border-color: var(--color-accent, #e63946); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #e63946) 20%, transparent); } .site-search-overlay__submit { padding: 12px 24px; background: var(--color-accent, #e63946); color: #fff; border: 0; border-radius: var(--btn-radius, 10px); font-weight: 600; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .site-search-overlay__submit:hover { background: color-mix(in srgb, var(--color-accent, #e63946) 88%, #000); transform: translateY(-0.5px); } .site-search-overlay__close { background: none; border: 0; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 0 6px; transition: color 0.15s ease; } .site-search-overlay__close:hover { color: var(--color-accent, #e63946); } body.site-search-open { overflow: hidden; } @media (max-width: 640px) { .site-search-overlay__form { right: 12px; width: calc(100vw - 24px); grid-template-columns: minmax(0, 1fr) auto; padding: 12px; } .site-search-overlay__submit { grid-column: 1 / -1; grid-row: 2; width: 100%; } .site-search-overlay__close { grid-column: 2; grid-row: 1; } } @media (prefers-reduced-motion: reduce) { .site-search-overlay, .site-search-overlay__form { transition: none; } } /* --- Шаблон детальной страницы каталога (настройки дизайна) --- */ .content-detail__grid { display: block; } .content-detail__empty { color: var(--text-muted); } body.design-detail-sidebar .content-detail__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; } body.design-detail-sidebar .content-detail__aside { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius, 14px); padding: 20px 22px; box-shadow: var(--card-shadow, none); } body.design-detail-sidebar .content-detail__aside .content-detail__row { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; } body.design-detail-sidebar .content-detail__aside .content-detail__row dt { color: var(--text-muted); font-size: .85rem; } @media (max-width: 820px) { body.design-detail-sidebar .content-detail__grid { grid-template-columns: 1fr; } } /* --- Футер колонками --- */ .site-footer--columns { background: var(--bg-surface); color: var(--text-main); border-top: 1px solid var(--border-color); padding: 0; text-align: left; font-size: 0.9375rem; } .site-footer__inner { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 48px 20px 32px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } .site-footer__logo { max-height: 46px; margin-bottom: 14px; } .site-footer__name { font-weight: 700; font-size: 1.1875rem; margin-bottom: 12px; color: var(--color-primary, #1a1a1a); } .site-footer__heading { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 14px; } .site-footer__line { margin: 6px 0; color: var(--text-muted); } .site-footer__line a { color: inherit; text-decoration: none; } .site-footer__line a:hover { color: var(--color-accent, #e63946); } .site-footer__col--menu ul { list-style: none; margin: 0; padding: 0; } .site-footer__col--menu li { margin: 8px 0; } .site-footer__col--menu a { text-decoration: none; color: var(--text-main); } .site-footer__col--menu a:hover { color: var(--color-accent, #e63946); } .site-footer__social { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .site-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary, #1a1a1a); color: #fff; text-decoration: none; font-weight: 700; } .site-footer__bottom { border-top: 1px solid var(--border-color); padding: 18px 0; color: var(--text-muted); font-size: 0.875rem; } .site-footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; width: 100%; max-width: var(--container-max, 1200px); margin: 0 auto; padding: 0 20px; } .site-footer__bottom-col { display: flex; align-items: center; gap: 12px; } .site-footer__bottom-col--left { justify-content: flex-start; } .site-footer__bottom-col--middle { justify-content: center; flex: 1; } .site-footer__bottom-col--right { justify-content: flex-end; } .site-footer__counters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .site-footer__bottom-col--middle a { color: inherit; text-decoration: none; } .site-footer__bottom-col--middle a:hover { text-decoration: underline; color: var(--color-accent, #e63946); } @media (max-width: 768px) { .site-footer__bottom-inner { flex-direction: column; text-align: center; gap: 12px; } .site-footer__bottom-col--middle { flex: none; } .site-footer__bottom-col { justify-content: center; width: 100%; } } @media (max-width: 720px) { .site-footer__inner { grid-template-columns: 1fr; gap: 28px; } } /* --- Мобильная версия (настройки дизайна): бургер-меню и мобильная шапка --- */ .site-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 9px; background: transparent; border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; } .site-burger span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; } body.mobile-menu-open .site-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.mobile-menu-open .site-burger span:nth-child(2) { opacity: 0; } body.mobile-menu-open .site-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } body.design-header-dark .site-burger, body.design-header-accent .site-burger { color: #fff; border-color: rgba(255,255,255,.4); } @media (max-width: 720px) { /* Режим «Бургер-меню»: меню скрыто, раскрывается панелью под шапкой. */ body.design-mmenu-burger .site-burger { display: flex; } body.design-mmenu-burger .site-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 55; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 12px 14px; background: var(--bg-primary); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-lg); } body.design-mmenu-burger.mobile-menu-open .site-menu { display: flex; } body.design-mmenu-burger .site-menu__link { display: block; padding: 12px 8px; border-bottom: 1px solid var(--border-color); color: var(--text-main); } body.design-mmenu-burger .site-menu__item { width: 100%; } body.design-mmenu-burger .site-header { position: relative; } body.design-header-dark.design-mmenu-burger .site-menu, body.design-header-accent.design-mmenu-burger .site-menu { background: var(--bg-primary); } body.design-header-dark.design-mmenu-burger .site-menu__link, body.design-header-accent.design-mmenu-burger .site-menu__link { color: var(--text-main); } /* Мобильная шапка: фиксированная поверх контента при прокрутке. */ body.design-mheader-fixed .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg-primary); } body.design-mheader-fixed.design-header-dark .site-header { background: #14161c; } body.design-mheader-static .site-header { position: relative; } } /* --- Календарь мероприятий --- */ .calendar__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 14px; } .calendar__label { font-size: 1.25rem; } .calendar__scroll { overflow-x: auto; } .calendar { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; } .calendar th { padding: 8px 6px; font-size: 0.8125rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--border, #e5e7eb); } .calendar__cell { vertical-align: top; height: 92px; padding: 6px; border: 1px solid var(--border, #e5e7eb); } .calendar__cell--empty { background: color-mix(in srgb, var(--border, #e5e7eb) 22%, transparent); } .calendar__cell--today { outline: 2px solid var(--color-primary, #1f4b8e); outline-offset: -2px; } .calendar__cell--has-events { background: color-mix(in srgb, var(--color-primary, #1f4b8e) 6%, transparent); } .calendar__day { display: block; font-weight: 600; font-size: 0.8125rem; margin-bottom: 4px; } .calendar__event { display: block; font-size: 0.75rem; line-height: 1.35; padding: 3px 6px; margin-bottom: 3px; border-radius: 6px; background: var(--color-primary, #1f4b8e); color: #fff; text-decoration: none; overflow: hidden; } .calendar__event:hover { opacity: .88; } .calendar__list { margin-top: 26px; } .calendar__list ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; } .calendar__list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 10px 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; } .calendar__list time { font-weight: 600; color: var(--color-primary, #1f4b8e); } .calendar__time, .calendar__location { color: var(--text-muted); font-size: 0.875rem; } @media (max-width: 640px) { .calendar__cell { height: 72px; padding: 4px; } .calendar__event { font-size: 0.6875rem; padding: 2px 4px; } } /* --- Фотоальбомы --- */ .albums-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 18px; } .album-card { display: flex; flex-direction: column; border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius, 12px); overflow: hidden; text-decoration: none; color: inherit; background: var(--surface, #fff); transition: transform .18s ease, box-shadow .18s ease; } .album-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(16, 24, 40, .12); } .album-card__cover { width: 100%; height: 170px; object-fit: cover; display: block; } .album-card__cover--empty { background: color-mix(in srgb, var(--color-primary, #1f4b8e) 12%, transparent); } .album-card__body { padding: 12px 14px 14px; display: grid; gap: 4px; } .album-card__title { font-weight: 600; line-height: 1.35; } .album-card__meta { font-size: 0.8125rem; color: var(--text-muted); } .album-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; } .album-photo { margin: 0; } .album-photo img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; display: block; transition: opacity .15s ease; } .album-photo a:hover img { opacity: .85; } .album-photo figcaption { font-size: 0.8125rem; color: var(--text-muted); margin-top: 6px; } /* --- Блок подписки на дайджест --- */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .subscribe-block { max-width: 620px; margin: 0 auto; text-align: center; padding: 42px 34px; border: 1px solid var(--border-color, #e5e7eb); border-radius: var(--radius, 16px); background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent, #e63946) 4%, var(--surface, #fff)) 0%, color-mix(in srgb, var(--color-primary, #1f4b8e) 2%, var(--surface, #fff)) 100%); box-shadow: 0 10px 30px rgba(19,42,92,.03); } @media (max-width: 560px) { .subscribe-block { padding: 30px 20px; } } .subscribe-block__title { margin: 0 0 8px; } .subscribe-block__text { margin: 0 0 18px; color: var(--text-muted); } .subscribe-block__form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .subscribe-block__form input[type=email] { flex: 1 1 260px; max-width: 340px; padding: 12px 18px; border: 1px solid var(--border-color, #e5e7eb); border-radius: var(--btn-radius, 8px); font: inherit; background: var(--surface, #fff); color: var(--text-main, #1a1a1a); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .subscribe-block__form input[type=email]:focus { border-color: var(--color-accent, #e63946); outline: none; box-shadow: 0 0 10px rgba(230, 57, 70, 0.25); } .subscribe-block__form button[type=submit] { transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease, background-color 0.3s; } .subscribe-block__form button[type=submit]:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 6px 16px rgba(230, 57, 70, 0.2); } /* ============================================================ DESIGN 2.0 — качественный дефолтный облик (слой поверх базы). Всё выводится из --color-primary/--color-accent через color-mix, поэтому работает с любой палитрой тема-билдера. ============================================================ */ :root { --ink: color-mix(in srgb, var(--color-primary, #1f4b8e) 88%, #0b1020); --tint-2: color-mix(in srgb, var(--color-primary, #1f4b8e) 3%, var(--bg-primary)); --tint-6: color-mix(in srgb, var(--color-primary, #1f4b8e) 7%, var(--bg-primary)); --shadow-primary: 0 14px 40px color-mix(in srgb, var(--color-primary, #1f4b8e) 16%, transparent); } /* Плавная прокрутка только при отсутствии prefers-reduced-motion (WCAG). */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } ::selection { background: color-mix(in srgb, var(--color-primary, #1f4b8e) 82%, #000); color: #fff; } /* Заголовочная гарнитура (Montserrat) — крупный корпоративный характер. */ h1, h2, h3, h4, h5, h6, .site-header__logo, .block-cta h2, .news-index__title, .block-news__title, .content-list__head h1, .site-footer__name { font-family: var(--font-heading, var(--font-family)); letter-spacing: -.022em; line-height: 1.15; font-weight: 700; } h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.25; margin: 1.6rem 0 1rem; } h2 { font-size: clamp(1.45rem, 3.2vw, 1.95rem); line-height: 1.25; margin: 1.6rem 0 1rem; } h3 { font-size: clamp(1.2rem, 2.5vw, 1.55rem); line-height: 1.35; margin: 1.4rem 0 0.8rem; } h4 { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.35; margin: 1.2rem 0 0.6rem; } h5 { font-size: 1.05rem; line-height: 1.35; margin: 1rem 0 0.5rem; } h6 { font-size: 0.95rem; line-height: 1.35; margin: 1rem 0 0.5rem; } /* Унификация размеров всех заголовков блоков на главной и внутренних страницах */ .block-news__title, .block-categories__title, .block-media__title, .block-contact-cards__title, .block-testimonials__title, .block-counters__title, .block-team__title, .block-projects__title, .section-title { font-size: clamp(1.5rem, 2.8vw, 2.1rem) !important; line-height: 1.25 !important; letter-spacing: -.02em !important; } h1, .news-index__title, .content-list__head h1 { font-weight: 800; } p { line-height: 1.6; } /* --- Шапка: глубина, аккуратные ссылки меню --- */ .site-header { position: relative; z-index: 40; } body.design-header-accent .site-header { background: radial-gradient(900px 300px at 85% -80%, color-mix(in srgb, var(--color-accent, #5b52e5) 32%, transparent), transparent 70%), linear-gradient(120deg, var(--ink) 0%, color-mix(in srgb, var(--color-primary, #1f4b8e) 84%, #000) 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 10px 30px rgba(8, 12, 34, .25); } body.design-header-dark .site-header { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px rgba(0,0,0,.35); } .site-menu__link { position: relative; padding: 8px 2px; border-radius: 6px; transition: opacity .15s ease; } .site-menu__link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: currentColor; opacity: .85; transition: right .22s ease; } .site-menu__link:hover::after, .site-menu__link:focus-visible::after { right: 0; } .site-lang-switcher__item { padding: 4px 8px; border-radius: 8px; transition: background .15s ease; } .site-lang-switcher__item:hover { background: rgba(255, 255, 255, .12); } /* --- Hero: первый CTA-блок страницы превращается в полотно --- */ .site-content > section.cms-block--cta:first-of-type .block-cta, .page-blocks > section.cms-block--cta:first-of-type .block-cta { position: relative; overflow: hidden; isolation: isolate; padding: clamp(56px, 9vw, 120px) clamp(24px, 6vw, 80px); border-radius: var(--radius, 16px); color: #fff; background: radial-gradient(720px 340px at 12% -30%, color-mix(in srgb, var(--color-accent, #5b52e5) 55%, transparent), transparent 62%), radial-gradient(900px 420px at 105% 130%, color-mix(in srgb, var(--color-accent, #5b52e5) 38%, transparent), transparent 60%), linear-gradient(118deg, var(--ink) 0%, color-mix(in srgb, var(--color-primary, #1f4b8e) 88%, #000) 58%, color-mix(in srgb, var(--color-primary, #1f4b8e) 60%, var(--color-accent, #5b52e5)) 100%); box-shadow: var(--shadow-primary); } /* Тонкая декоративная сетка поверх градиента. */ .site-content > section.cms-block--cta:first-of-type .block-cta::before, .page-blocks > section.cms-block--cta:first-of-type .block-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(760px 400px at 50% 0%, #000 30%, transparent 78%); } .site-content > section.cms-block--cta:first-of-type .block-cta h2, .page-blocks > section.cms-block--cta:first-of-type .block-cta h2 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.4rem); margin: 0 0 14px; text-wrap: balance; } .site-content > section.cms-block--cta:first-of-type .block-cta p, .page-blocks > section.cms-block--cta:first-of-type .block-cta p { color: rgba(255, 255, 255, .82); font-size: clamp(1.02rem, 1.6vw, 1.22rem); max-width: 640px; margin: 0 auto; } .site-content > section.cms-block--cta:first-of-type .block-cta .block-cta__button, .page-blocks > section.cms-block--cta:first-of-type .block-cta .block-cta__button { margin-top: 26px; padding: 15px 36px; font-size: 1.02rem; background: #fff; color: var(--ink); box-shadow: 0 10px 26px rgba(5, 10, 30, .35); } .site-content > section.cms-block--cta:first-of-type .block-cta .block-cta__button:hover, .page-blocks > section.cms-block--cta:first-of-type .block-cta .block-cta__button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(5, 10, 30, .4); } /* --- Кнопки: единый характер --- */ .block-cta__button, .block-banner__button, .subscribe-block__form .btn--primary, .content-detail__download, .site-search__submit { transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .block-cta__button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--color-accent, #5b52e5) 35%, transparent); } /* --- Карточки-разделы (CTA в колонках): акцентная кромка и стрелка --- */ .cms-columns__col .cms-block--cta .block-cta { position: relative; overflow: hidden; border: 1px solid var(--border-color); background: linear-gradient(180deg, var(--tint-2), var(--bg-primary) 55%); } .cms-columns__col .cms-block--cta .block-cta::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary, #1f4b8e), var(--color-accent, #5b52e5)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .cms-columns__col .cms-block--cta .block-cta:hover::before { transform: scaleX(1); } .cms-columns__col .cms-block--cta .block-cta h2 { color: var(--ink); } .cms-columns__col .cms-block--cta .block-cta .block-cta__button { margin-top: auto; padding: 10px 20px; font-size: .95rem; background: color-mix(in srgb, var(--color-primary, #1f4b8e) 9%, transparent); color: var(--color-primary, #1f4b8e); box-shadow: none; } .cms-columns__col .cms-block--cta .block-cta .block-cta__button::after { content: ' →'; transition: transform .15s ease; display: inline-block; margin-left: 4px; } .cms-columns__col .cms-block--cta .block-cta:hover .block-cta__button { background: var(--color-primary, #1f4b8e); color: #fff; } .cms-columns__col .cms-block--cta .block-cta:hover .block-cta__button::after { transform: translateX(3px); } /* --- Заголовки лент (новости и др.): линия-акцент --- */ .block-news__head { align-items: baseline; border-bottom: 1px solid var(--border-color); padding-bottom: 14px; margin-bottom: 26px; position: relative; } .block-news__head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 64px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--color-primary, #1f4b8e), var(--color-accent, #5b52e5)); } .block-news__title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; } .block-news__all { font-weight: 600; } /* --- Карточки новостей: плейсхолдер обложки, дата-чип --- */ .news-card { border-radius: var(--radius, 14px); } .news-card__cover--empty { display: block; aspect-ratio: 16 / 9; position: relative; background: radial-gradient(240px 130px at 80% -20%, color-mix(in srgb, var(--color-accent, #5b52e5) 35%, transparent), transparent 70%), linear-gradient(125deg, var(--tint-6), color-mix(in srgb, var(--color-primary, #1f4b8e) 22%, var(--bg-primary))); } .news-card__cover--empty::after { /* Орнамент без эмодзи (нет «тофу» на системах без emoji-шрифта). */ content: ''; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--color-primary, #1f4b8e) 26%, transparent) 1.5px, transparent 1.5px); background-size: 18px 18px; mask-image: linear-gradient(115deg, #000 20%, transparent 75%); } .news-card__date { display: inline-block; width: max-content; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--color-primary, #1f4b8e) 8%, transparent); color: var(--color-primary, #1f4b8e); font-weight: 600; font-size: .78rem; } .news-card:hover { box-shadow: var(--shadow-primary); transform: translateY(-4px); } /* --- Футер: глубокий, структурный --- */ .site-footer--columns { background: radial-gradient(700px 260px at 90% -60%, color-mix(in srgb, var(--color-accent, #5b52e5) 24%, transparent), transparent 70%), linear-gradient(120deg, var(--ink), color-mix(in srgb, var(--color-primary, #1f4b8e) 80%, #000)); color: rgba(255, 255, 255, .88); border-top: 3px solid var(--color-accent, #5b52e5); } .site-footer--columns a { color: rgba(255, 255, 255, .82); text-decoration: none; transition: color .15s ease; } .site-footer--columns a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .site-footer--columns .site-footer__inner { padding: clamp(40px, 5vw, 64px) 20px; gap: clamp(24px, 4vw, 56px); } .site-footer--columns .site-footer__name { color: #fff; font-size: 1.3rem; font-weight: 700; } .site-footer--columns .site-footer__heading { color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; opacity: .85; padding-bottom: 10px; margin-bottom: 14px; position: relative; } .site-footer--columns .site-footer__heading::after { content: ''; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; border-radius: 2px; background: var(--color-accent, #5b52e5); } .site-footer--columns .site-footer__line { margin: 0 0 8px; color: rgba(255, 255, 255, .72); } .site-footer--columns .site-footer__col--menu ul { columns: 2; column-gap: 28px; margin: 0; padding: 0; list-style: none; } .site-footer--columns .site-footer__col--menu li { margin-bottom: 10px; break-inside: avoid; } .site-footer--columns .site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .55); padding: 18px 0; } .site-footer__social-link { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-weight: 700; transition: background .15s ease, transform .15s ease; } .site-footer__social-link:hover { background: var(--color-accent, #5b52e5); transform: translateY(-2px); text-decoration: none !important; } @media (max-width: 720px) { .site-footer--columns .site-footer__col--menu ul { columns: 1; } } /* --- Каталог/контент: карточки и хлебные крошки --- */ .content-crumbs { font-size: .88rem; color: var(--text-muted); } .content-list__head h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 6px; } .content-list__lead { color: var(--text-muted); max-width: 640px; } .content-card:hover { box-shadow: var(--shadow-primary); } /* --- Блок подписки: в тон герою --- */ .subscribe-block { border: 0; color: #fff; background: radial-gradient(420px 200px at 85% -40%, color-mix(in srgb, var(--color-accent, #5b52e5) 45%, transparent), transparent 70%), linear-gradient(120deg, var(--ink), color-mix(in srgb, var(--color-primary, #1f4b8e) 82%, #000)); box-shadow: var(--shadow-primary); } .subscribe-block__text { color: rgba(255, 255, 255, .8); } .subscribe-block__form input[type=email] { border: 0; } /* --- Тёмная тема: полутона подстраиваются --- */ :root[data-theme="dark"] { --tint-2: color-mix(in srgb, var(--color-primary, #1f4b8e) 10%, var(--bg-primary)); --tint-6: color-mix(in srgb, var(--color-primary, #1f4b8e) 16%, var(--bg-primary)); } /* ========================================================================== ФИНАЛЬНАЯ ПОЛИРОВКА ФРОНТА ========================================================================== */ /* --- Навигационная полоса под шапкой (паттерн официального портала) --- */ /* Верхний ряд остаётся под логотип + утилиты; меню — отдельной строкой во всю ширину, поэтому оно не теснится и не переносится вперемешку с поиском. */ .site-header--has-nav .site-header__inner { padding-bottom: 14px; } .site-nav { border-top: 1px solid var(--border-color); } .site-nav__inner { max-width: var(--container-max, 1140px); margin: 0 auto; padding: 0 20px; display: flex; } .site-nav .site-menu { width: 100%; flex-wrap: wrap; gap: 0 28px; align-items: stretch; } .site-nav--align-center .site-menu { justify-content: center; } .site-nav--align-right .site-menu { justify-content: flex-end; } .site-nav .site-menu__link { padding: 13px 2px; } .site-nav .site-menu__link::after { bottom: 8px; } /* Акцентная/тёмная шапка: разделитель полос — полупрозрачный белый. */ body.design-header-accent .site-nav, body.design-header-dark .site-nav { border-top-color: rgba(255, 255, 255, .14); } /* На мобильных навигация сворачивается в бургер — полоса не должна занимать место и рисовать пустой разделитель (меню всплывает поверх контента). */ @media (max-width: 720px) { .site-header--has-nav .site-header__inner { padding-bottom: 20px; } body.design-mmenu-burger .site-nav { border-top: 0; } body.design-mmenu-burger .site-nav__inner { padding: 0; } } /* --- Страница новостей: единый карточный грид (как на главной) --- */ .news-index__head { border-bottom: 1px solid var(--border-color); padding-bottom: 16px; margin-bottom: 28px; position: relative; } .news-index__head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 64px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--color-primary, #1f4b8e), var(--color-accent, #5b52e5)); } .news-index__title { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 0 0 6px; } .news-index__lead { color: var(--text-muted); max-width: 640px; margin: 0; } .news-index__empty { color: var(--text-muted); } .news-index__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--card-gap, 24px); } /* Карточка новости: превью-обложка, «Читать →», бейдж видео. */ .news-card__body { flex: 1; } .news-card__more { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: .9rem; color: var(--color-accent, #5b52e5); transition: transform .15s ease; } .news-card:hover .news-card__more { transform: translateX(3px); } .news-card__cover { position: relative; } .news-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); } .news-card__play::after { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; } /* --- Детальная новость: читаемая колонка, дата-чип, возврат --- */ .news-single { max-width: 760px; } .news-single h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: 0 0 14px; text-wrap: balance; } .news-single > time, .news-single--side > time { display: inline-block; margin-bottom: 20px; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--color-primary, #1f4b8e) 8%, transparent); color: var(--color-primary, #1f4b8e); font-weight: 600; font-size: .82rem; } .news-single__content { font-size: 1.05rem; line-height: 1.6; } .news-single__content > :first-child { margin-top: 0; } .news-single__content img { border-radius: var(--radius, 12px); } .news-single__back { margin-top: 36px; } .news-single__back a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--color-accent, #5b52e5); } .news-single__back a:hover { text-decoration: underline; text-underline-offset: 3px; } /* --- Hero: не разрастается сверх меры на больших экранах --- */ .site-content > section.cms-block--cta:first-of-type .block-cta, .page-blocks > section.cms-block--cta:first-of-type .block-cta { padding-block: clamp(52px, 7vw, 92px); } /* ========================================================================== ТЁМНАЯ ТЕМА: контраст текста, привязанного к брендовому --color-primary -------------------------------------------------------------------------- Множество элементов (логотип, меню, заголовки карточек, чипы дат) красятся в --color-primary. При тёмной палитре организации (напр. почти чёрный #1a1a1a) такой текст сливается с тёмным фоном. Переносим его на тему-зависимый --text-main; акцентные подложки чипов делаем светлее. Пресеты «accent»/«dark» шапки имеют бОльшую специфичность и остаются белыми. ========================================================================== */ :root[data-theme="dark"] .site-header__logo, :root[data-theme="dark"] .site-menu a, :root[data-theme="dark"] .site-menu__link, :root[data-theme="dark"] .site-lang-switcher__item.is-active, :root[data-theme="dark"] .widget-latest-news a, :root[data-theme="dark"] .content-card__title a, :root[data-theme="dark"] .content-card__meta-item b, :root[data-theme="dark"] .content-detail__row dt, :root[data-theme="dark"] .site-search-results__link, :root[data-theme="dark"] .content-pager__link, :root[data-theme="dark"] .news-card__title, :root[data-theme="dark"] .site-footer__name, :root[data-theme="dark"] .cms-columns__col .cms-block--cta .block-cta h2 { color: var(--text-main); } /* Чипы дат: на тёмном фоне светлая акцентная подложка + светлый текст. */ :root[data-theme="dark"] .news-card__date, :root[data-theme="dark"] .news-single > time, :root[data-theme="dark"] .news-single--side > time, :root[data-theme="dark"] .calendar__list time { background: color-mix(in srgb, var(--color-accent, #5b52e5) 22%, transparent); color: var(--text-main); } /* Кнопка карточки-раздела в тёмной теме: читаемая, на подложке акцента. */ :root[data-theme="dark"] .cms-columns__col .cms-block--cta .block-cta .block-cta__button { background: color-mix(in srgb, var(--color-accent, #5b52e5) 24%, transparent); color: var(--text-main); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] .site-header__logo, :root[data-theme="auto"] .site-menu a, :root[data-theme="auto"] .site-menu__link, :root[data-theme="auto"] .content-card__title a, :root[data-theme="auto"] .news-card__title, :root[data-theme="auto"] .cms-columns__col .cms-block--cta .block-cta h2 { color: var(--text-main); } :root[data-theme="auto"] .news-card__date, :root[data-theme="auto"] .news-single > time { background: color-mix(in srgb, var(--color-accent, #5b52e5) 22%, transparent); color: var(--text-main); } } /* ========================================================================== МЕНЮ: SVG-иконки и разделители пунктов ========================================================================== */ /* Наборы утилит для десктопа и мобильного (конструктор — раздельные раскладки). */ .hdr-util { display: inline-flex; align-items: center; gap: 18px; } .hdr-util--mobile { display: none; } @media (max-width: 720px) { .hdr-util--desktop { display: none; } .hdr-util--mobile { display: inline-flex; } } /* Разделитель-спейсер между элементами верхнего ряда шапки. */ .site-header__divider { display: inline-block; width: 1px; height: 22px; align-self: center; background: color-mix(in srgb, currentColor 28%, transparent); } .site-header__zone .site-header__divider { margin: 0 2px; } /* Гибкий отступ: растягивается и расталкивает соседние элементы в зоне. */ .site-header__spacer { flex: 1 1 auto; min-width: 12px; align-self: stretch; } /* Пробел: фиксированный горизонтальный зазор между элементами. */ .site-header__space { display: inline-block; flex: 0 0 auto; width: 24px; align-self: center; } .site-menu__link, .site-submenu__link { display: inline-flex; align-items: center; gap: 8px; } .site-menu__icon { display: inline-flex; align-items: center; } .site-menu__icon svg { width: 18px; height: 18px; display: block; } .site-menu__text { display: inline-block; } /* Разделитель в горизонтальном меню — тонкая вертикальная черта. */ .site-menu__divider { align-self: center; width: var(--menu-divider-width, 1px); height: var(--menu-divider-height, 18px); margin: 0 8px; background: var(--menu-divider-color, color-mix(in srgb, currentColor 35%, transparent)); } /* Настройки «Разделители меню» применяются ко всем верхнеуровневым пунктам. Псевдоэлемент не меняет ширину пункта и остаётся между соседними ссылками. */ .site-menu > .site-menu__link:not(:first-child)::before, .site-menu > .site-menu__item:not(:first-child)::before { content: ''; position: absolute; top: 50%; left: -14px; width: var(--menu-divider-width, 1px); height: var(--menu-divider-height, 18px); transform: translateY(-50%); background: var(--menu-divider-color, color-mix(in srgb, currentColor 35%, transparent)); } /* Ручной разделитель уже рисует линию сам, поэтому следующему пункту дубликат не нужен. */ .site-menu > .site-menu__divider + .site-menu__link::before, .site-menu > .site-menu__divider + .site-menu__item::before { content: none; } @media (max-width: 720px) { .site-menu > .site-menu__link:not(:first-child)::before, .site-menu > .site-menu__item:not(:first-child)::before { content: none; } } /* ========================================================================== 4 МАКЕТА ШАПКИ (десктоп + мобильный) ========================================================================== */ /* Бургер по умолчанию скрыт на десктопе (показывается только в мобильном бургер-режиме, см. media-блок ниже, либо в макете «боковая панель»). */ .site-burger { display: none; } /* --- Макет «В одну строку»: меню в центральной зоне верхнего ряда --- */ .site-header--layout-inline .site-header__zone--center .site-menu { display: flex; flex-wrap: wrap; gap: 4px 22px; justify-content: center; } .site-header--layout-inline .site-header__zone--center { flex: 1 1 auto; } /* --- Макет «Центрированный»: логотип по центру, меню центрировано ниже --- */ .site-header--layout-centered .site-header__inner { position: relative; } .site-header--layout-centered .site-header__zone--left, .site-header--layout-centered .site-header__zone--right { flex: 1; } .site-header--layout-centered .site-nav__inner { justify-content: center; } /* --- Макет «Боковая панель» (drawer): меню off-canvas, кнопка на всех экранах --- */ .site-header--layout-drawer .site-burger { display: inline-flex; } .site-drawer { position: fixed; inset: 0; z-index: 1020; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility .25s ease; } body.mobile-menu-open .site-drawer { visibility: visible; opacity: 1; } .site-drawer__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .site-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(340px, 86vw); background: var(--bg-primary); border-left: 1px solid var(--border-color); box-shadow: -10px 0 40px rgba(15, 23, 42, 0.12); padding: 64px 20px 24px; overflow-y: auto; transform: translateX(100%); transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1); } body.mobile-menu-open .site-drawer__panel { transform: translateX(0); } .site-drawer__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; background: transparent; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--text-main); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; } .site-drawer__close:hover { background: var(--border-color); color: var(--color-accent); } .site-drawer .site-menu { flex-direction: column; align-items: stretch; gap: 4px; } .site-drawer .site-menu__link { padding: 12px 14px; border-radius: 8px; transition: background 0.2s, color 0.2s; border-bottom: 0; } .site-drawer .site-menu__link:hover { background: var(--border-color); color: var(--color-accent); } .site-drawer .site-menu__item { width: 100%; position: relative; } .site-drawer .site-menu__item--has-children { display: grid; grid-template-columns: 1fr auto; align-items: center; } .site-drawer .site-menu__item--has-children > .site-menu__link { grid-column: 1; } .site-drawer .site-menu__item--has-children > .site-menu__toggle { grid-column: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: transform 0.2s, background 0.2s; } .site-drawer .site-menu__item--has-children > .site-menu__toggle:hover { background: var(--border-color); } .site-drawer .site-menu__item.is-open > .site-menu__toggle { transform: rotate(180deg); } .site-drawer .site-submenu { grid-column: 1 / -1; display: none; position: static; flex-direction: column; box-shadow: none; padding-left: 20px; width: 100%; border: 0 !important; background: transparent !important; } .site-drawer .site-menu__item.is-open > .site-submenu { display: flex; } .site-drawer .site-submenu__link { padding: 8px 14px; font-size: 0.8438rem; border-radius: 6px; color: var(--text-muted); } .site-drawer .site-submenu__link:hover { background: var(--border-color); color: var(--color-accent); } .site-drawer .site-menu__divider { width: 100%; height: 1px; margin: 8px 0; background: var(--border-color); } /* --- Мобильные (≤720): все макеты кроме drawer сворачиваются в бургер --- */ @media (max-width: 720px) { .site-header:not(.site-header--layout-drawer) .site-burger { display: inline-flex; } /* В выпадающем мобильном меню пункты — блочные, но с отступом под иконку. */ body.design-mmenu-burger .site-menu__link { display: flex; align-items: center; gap: 8px; } /* Разделитель в любом вертикальном мобильном меню — горизонтальная черта. */ body.design-mmenu-burger .site-menu__divider { width: 100%; height: 1px; margin: 6px 0; background: color-mix(in srgb, var(--text-main) 18%, transparent); } /* Инлайновое меню (центр. зона) на мобильном — выпадающая панель под шапкой. */ body.design-mmenu-burger .site-header--layout-inline .site-header__zone--center .site-menu, body.design-mmenu-burger .site-header--layout-centered .site-nav .site-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 55; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 12px 14px; background: var(--bg-primary); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-lg); display: none; } body.design-mmenu-burger.mobile-menu-open .site-header--layout-inline .site-header__zone--center .site-menu, body.design-mmenu-burger.mobile-menu-open .site-header--layout-centered .site-nav .site-menu { display: flex; } body.design-mmenu-burger .site-header--layout-inline .site-menu__divider, body.design-mmenu-burger .site-header--layout-centered .site-menu__divider { width: 100%; height: 1px; margin: 6px 0; background: color-mix(in srgb, var(--text-main) 18%, transparent); } /* Центрированный макет на мобильном — логотип слева для компактности. */ .site-header--layout-centered .site-header__zone--left, .site-header--layout-centered .site-header__zone--right { flex: 0 0 auto; } } /* ========================================================================== БЛОК «Контактные карточки» (модульный блок конструктора) + полоса статистики ========================================================================== */ .block-contact-cards__title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 22px; } .block-contact-cards__empty { color: var(--text-muted); } .contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--card-gap, 22px); } .contact-card { background: var(--surface, #fff); border: 1px solid var(--border-color); border-radius: var(--radius, 14px); padding: 24px; transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease; } .contact-card:hover { box-shadow: 0 16px 36px rgba(19, 42, 92, 0.06); transform: translateY(-4px); border-color: var(--color-accent, #2f6fed); } .contact-card__icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; margin-bottom: 14px; background: color-mix(in srgb, var(--color-primary, #223d79) 10%, transparent); color: var(--color-primary, #223d79); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s, color 0.3s; } .contact-card__icon svg { width: 22px; height: 22px; } .contact-card:hover .contact-card__icon { transform: scale(1.1); background-color: var(--color-accent, #2f6fed); color: #fff; } .contact-card__title { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; color: var(--color-primary, #223d79); transition: color 0.3s ease; } .contact-card:hover .contact-card__title { color: var(--color-accent, #2f6fed); } .contact-card__line { margin: 2px 0; color: var(--text-muted); } .contact-card__link { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--color-accent, #2f6fed); text-decoration: none; transition: transform 0.3s ease, color 0.3s ease; } .contact-card:hover .contact-card__link { color: var(--color-accent, #2f6fed); transform: translateX(4px); } :root[data-theme="dark"] .contact-card__title { color: var(--text-main); } /* Полоса статистики (блок «Счётчики» в гос-стиле): карточки с иконкой-подложкой. */ .block-counters__grid { text-align: left; } .counter { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; background: var(--surface, #fff); border: 1px solid var(--border-color); border-radius: var(--radius, 14px); } .counter__value, .counter__suffix { color: var(--color-primary, #223d79); font-family: var(--font-heading, inherit); } .counter__label { color: var(--text-muted); margin-top: 4px; font-size: .95rem; } :root[data-theme="dark"] .counter__value, :root[data-theme="dark"] .counter__suffix { color: var(--text-main); } /* ========================================================================== БЛОКИ ГОС-СТРАНИЦ: hero (титул+фото), сетка категорий, медиаматериалы ========================================================================== */ /* Герой: текст слева на фоне, фото справа с плавным перетеканием в фон. */ .block-hero { position: relative; overflow: hidden; border-radius: var(--radius, 16px); background: var(--bg-primary); } .block-hero--image { min-height: clamp(280px, 34vw, 440px); display: flex; align-items: center; } .block-hero__media { position: absolute; inset: 0 0 0 38%; display: block; overflow: hidden; background-size: cover; background-position: center; } .block-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Responsive не создаёт дополнительный layout-box: существующие grid/flex/absolute стили продолжают применяться к самому . */ .media-picture { display: contents; } .block-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg-primary) 6%, color-mix(in srgb, var(--bg-primary) 55%, transparent) 42%, transparent 66%); } .block-hero__inner { position: relative; width: 100%; } .block-hero__text { max-width: var(--hero-text-width, 560px); } .block-hero__title { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--color-primary, #223d79); margin: 0 0 16px; line-height: 1.15; text-wrap: balance; } .block-hero__subtitle { font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: var(--text-muted); max-width: 480px; margin: 0; line-height: 1.6; } .block-hero__button { /* Без margin-top: кнопки всегда внутри .block-hero__actions (flex, align-items:center) — собственный отступ ломал вертикальную центровку кнопки «Смотреть видео» рядом. Отступ сверху задаёт сам контейнер. */ display: inline-block; padding: 13px 28px; border-radius: var(--btn-radius, 10px); background: var(--color-primary, #223d79); color: #fff; text-decoration: none; font-weight: 600; transition: transform .15s ease, box-shadow .15s ease; } .block-hero__button:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } @keyframes hero-button-sheen { 0%, 62% { transform: translateX(-320%) skewX(-20deg); opacity: 0; } 68% { opacity: .72; } 84%, 100% { transform: translateX(520%) skewX(-20deg); opacity: 0; } } @media (prefers-reduced-motion: no-preference) { .block-hero__button:not(.block-hero__button--ghost) { position: relative; overflow: hidden; isolation: isolate; } .block-hero__button:not(.block-hero__button--ghost)::after { content: ''; position: absolute; inset: -35% auto -35% -20%; width: 22%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent); filter: blur(.3px); animation: hero-button-sheen 6s ease-in-out infinite; } } @media (prefers-reduced-motion: reduce) { .block-hero__button { transition: none; } .block-hero__button::after { content: none; animation: none; } } :root[data-theme="dark"] .block-hero__title { color: var(--text-main); } @media (max-width: 720px) { .block-hero__media { inset: 0; opacity: .16; } .block-hero__media::after { background: none; } .block-hero--image { min-height: 0; padding: 8px 0; } } /* Сетка категорий: плитки с иконкой; первая — активная (акцент). */ .block-categories__title { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 20px; } .block-categories__empty { color: var(--text-muted); } .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .cat-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 24px 14px; border: 1px solid var(--border-color); border-radius: var(--radius, 14px); background: var(--surface, #fff); color: var(--text-main); text-decoration: none; transition: border-color .4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow .4s cubic-bezier(0.165, 0.84, 0.44, 1), transform .4s cubic-bezier(0.165, 0.84, 0.44, 1); } .cat-tile:hover { border-color: var(--color-accent, #2f6fed); box-shadow: 0 12px 28px rgba(19, 42, 92, 0.05); transform: translateY(-3px); } .cat-tile.is-active { background: color-mix(in srgb, var(--color-accent, #2f6fed) 8%, var(--surface)); border-color: var(--color-accent, #2f6fed); } .cat-tile__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: color-mix(in srgb, var(--color-primary, #223d79) 9%, transparent); color: var(--color-primary, #223d79); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease, color 0.3s ease; } .cat-tile__icon svg { width: 24px; height: 24px; } .cat-tile:hover .cat-tile__icon { transform: scale(1.08); background-color: var(--color-accent, #2f6fed); color: #fff; } .cat-tile.is-active .cat-tile__icon { background-color: var(--color-accent, #2f6fed); color: #fff; } .cat-tile__label { font-weight: 600; font-size: .96rem; } /* Медиаматериалы: список ссылок с иконкой-подложкой и действием. */ .block-media__title { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 0 0 16px; } .block-media__empty { color: var(--text-muted); } .media-list { display: flex; flex-direction: column; } .media-item { display: flex; align-items: center; gap: 14px; padding: 14px 6px; border-bottom: 1px solid var(--border-color); text-decoration: none; color: var(--text-main); transition: background .15s ease; } .media-item:last-child { border-bottom: 0; } .media-item:hover { background: color-mix(in srgb, var(--color-primary, #223d79) 4%, transparent); } .media-item__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; background: color-mix(in srgb, var(--color-primary, #223d79) 9%, transparent); color: var(--color-primary, #223d79); } .media-item__icon svg { width: 20px; height: 20px; } .media-item__body { display: flex; flex-direction: column; gap: 2px; } .media-item__label { font-weight: 600; } .media-item__action { color: var(--color-accent, #2f6fed); font-size: .85rem; font-weight: 600; } /* --- Улучшенное оформление кнопок-утилит (Поиск, Тема, Версия для слабовидящих) --- */ .site-search-toggle, .site-theme-toggle, .a11y-toggle { background: transparent !important; border: none !important; box-shadow: none !important; padding: 8px !important; width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; border-radius: 50% !important; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important; color: var(--gov-ink, var(--text-main)) !important; /* По умолчанию темные */ } /* Белый цвет для кнопок в темных/акцентных шапках и в прозрачной шапке (пока не прокручена) */ body.design-header-accent .site-search-toggle, body.design-header-accent .site-theme-toggle, body.design-header-accent .a11y-toggle, body.design-header-dark .site-search-toggle, body.design-header-dark .site-theme-toggle, body.design-header-dark .a11y-toggle, .site-header--transparent:not(.is-scrolled) .site-search-toggle, .site-header--transparent:not(.is-scrolled) .site-theme-toggle, .site-header--transparent:not(.is-scrolled) .a11y-toggle { color: #fff !important; } /* Ховер для светлых кнопок (становится темным/акцентным с серым фоном) */ .site-search-toggle:hover, .site-theme-toggle:hover, .a11y-toggle:hover { background: rgba(15, 23, 42, 0.08) !important; color: var(--gov-teal, var(--color-accent)) !important; transform: scale(1.1) !important; } /* Ховер для темных/акцентных/прозрачных шапок (остается белым со светлым фоном) */ body.design-header-accent .site-search-toggle:hover, body.design-header-accent .site-theme-toggle:hover, body.design-header-accent .a11y-toggle:hover, body.design-header-dark .site-search-toggle:hover, body.design-header-dark .site-theme-toggle:hover, body.design-header-dark .a11y-toggle:hover, .site-header--transparent:not(.is-scrolled) .site-search-toggle:hover, .site-header--transparent:not(.is-scrolled) .site-theme-toggle:hover, .site-header--transparent:not(.is-scrolled) .a11y-toggle:hover { background: rgba(255, 255, 255, 0.15) !important; color: #fff !important; transform: scale(1.1) !important; } /* Все иконки строго одинакового размера */ .site-search-toggle svg, .site-theme-toggle svg, .a11y-toggle svg { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; min-width: 20px !important; min-height: 20px !important; display: block !important; margin: 0 !important; stroke-width: 2 !important; } /* Скрываем текстовую подпись кнопки a11y в шапке/топбаре */ .site-header .a11y-toggle span, .site-topbar .a11y-toggle span { display: none !important; } /* Заметка о незаполненном блоке — только в предпросмотре админки. На сайте такие блоки не выводятся вовсе, поэтому посетитель её не увидит. */ .cms-block--empty-notice { padding: 10px 0 !important; } .cms-empty-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; max-width: var(--container-max, 1200px); margin: 0 auto; padding: 14px 18px; border: 1px dashed var(--border-color, #d5d8de); border-radius: var(--radius, 12px); background: color-mix(in srgb, var(--color-accent, #17999b) 5%, transparent); font-size: 0.9rem; } .cms-empty-notice strong { font-weight: 700; } .cms-empty-notice span { color: var(--text-muted, #666); } .cms-empty-notice__edit { margin-left: auto; font-weight: 600; white-space: nowrap; } /* --- Интерактивный Spotlight-блик при наведении --- */ .cat-tile, .contact-card, .project-card, .team-card, .feature-card, .news-card, .person-card, .album-card, .doc-card, .catcard, .testimonial, .block-advantages__item, .mediacard, .imgcard, .faq-item, .stage, .timeline-item, .btn, .block-cta__button, .btn-cta, .block-hero__button, .timeline-card__button, .timeline-cta__button, .a11y-toggle, .site-theme-toggle, .site-search-toggle { position: relative; overflow: hidden; } .cat-tile::before, .contact-card::before, .project-card::before, .team-card::before, .feature-card::before, .news-card::before, .person-card::before, .album-card::before, .doc-card::before, .catcard::before, .testimonial::before, .block-advantages__item::before, .mediacard::before, .imgcard::before, .faq-item::before, .stage::before, .timeline-item::before, .btn::before, .block-cta__button::before, .btn-cta::before, .block-hero__button::before, .timeline-card__button::before, .timeline-cta__button::before, .a11y-toggle::before, .site-theme-toggle::before, .site-search-toggle::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(220px circle at var(--mouse-x, 0) var(--mouse-y, 0), color-mix(in srgb, var(--color-accent, #2f6fed) 7%, transparent), transparent 80%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1; } .cat-tile:hover::before, .contact-card:hover::before, .project-card:hover::before, .team-card:hover::before, .feature-card:hover::before, .news-card:hover::before, .person-card:hover::before, .album-card:hover::before, .doc-card:hover::before, .catcard:hover::before, .testimonial:hover::before, .block-advantages__item:hover::before, .mediacard:hover::before, .imgcard:hover::before, .faq-item:hover::before, .stage:hover::before, .timeline-item:hover::before, .btn:hover::before, .block-cta__button:hover::before, .btn-cta:hover::before, .block-hero__button:hover::before, .timeline-card__button:hover::before, .timeline-cta__button:hover::before, .a11y-toggle:hover::before, .site-theme-toggle:hover::before, .site-search-toggle:hover::before { opacity: 1; } /* --- Интерактивный Spotlight-блик для полей ввода (без псевдоэлементов) --- */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select { transition: border-color 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease; } input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="search"]:hover, textarea:hover, select:hover, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus, select:focus { background-image: radial-gradient(180px circle at var(--mouse-x, 0) var(--mouse-y, 0), color-mix(in srgb, var(--color-accent, #2f6fed) 6%, transparent), transparent 100%) !important; } /* Предложение открыть материал на доступном языке без скрытого fallback. */ .translation-notice { display: grid; min-height: clamp(420px, 62vh, 680px); padding: clamp(48px, 8vw, 96px) 20px; place-items: center; background: var(--gov-bg-alt, #f5f7fa); } .translation-notice__card { width: min(100%, 680px); padding: clamp(32px, 6vw, 56px); border: 1px solid var(--gov-border, #dce3ea); border-radius: 20px; background: var(--gov-surface, #fff); box-shadow: 0 18px 50px rgba(15, 43, 72, .08); text-align: center; } .translation-notice__icon { display: inline-grid; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 14px; place-items: center; background: color-mix(in srgb, var(--gov-teal, #159da5) 12%, transparent); color: var(--gov-teal-text, #08777d); font-size: 24px; font-weight: 700; } .translation-notice__eyebrow { margin: 0 0 10px; color: var(--gov-teal-text, #08777d); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .translation-notice__title { margin: 0 0 16px; color: var(--gov-navy, #173d63); font-size: clamp(28px, 5vw, 42px); line-height: 1.12; } .translation-notice__text { max-width: 540px; margin: 0 auto 28px; color: var(--gov-muted, #5d6c7c); font-size: 17px; line-height: 1.65; } .translation-notice__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 22px; } .translation-notice__button { padding: 12px 20px; border-radius: 9px; background: var(--gov-teal, #159da5); color: #fff; font-weight: 700; text-decoration: none; } .translation-notice__home { color: var(--gov-navy, #173d63); font-weight: 600; text-underline-offset: 4px; }