/* ========================================
Theme: banner — overrides
========================================
Подгружается через ThemeManager::getStylesheetUrl() в только
когда активна тема banner (slug='banner' в site_settings.active_theme_slug).
Палитра темы — в БД (themes.css_variables JSON), подставляется через
.
В этом файле — точечные перекрытия, которые невозможно выразить
подменой переменных (напр. инверсия ролей primary-кнопки) и спец-эффекты
темы (glass-плашки, отключение анимированного фона hero, layout hero).
Префикс body[data-theme="banner"] не используется: файл подгружается
только при активной теме, на одинаковой специфичности выигрывает
за счёт порядка (после общего styles.css). */
/* Banner theme variables — override @layer plugin defaults (unlayered = wins) */
:root {
--color-primary: #0d2557;
--color-primary-dark: #061230;
--color-primary-light: #1f3d7a;
--color-secondary: #1e6fb8;
--color-accent: #0CFFAB;
--color-gradient-start: #061230;
--color-gradient-middle: #0d2557;
--color-gradient-end: #1f3d7a;
--color-dark: #061230;
--color-dark-soft: #0d2557;
--color-gray: #7a8aa8;
--color-gray-light: #1a2845;
--color-white: #ffffff;
--color-bg: #f7f9fc;
--color-text: #2c3e50;
--color-text-muted: #6b7a99;
--shadow-sm: 0 2px 8px rgba(12, 255, 171, 0.08);
--shadow-md: 0 4px 16px rgba(12, 255, 171, 0.14);
--shadow-lg: 0 8px 32px rgba(12, 255, 171, 0.20);
--shadow-card: 0 2px 12px rgba(12, 255, 171, 0.10);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
--font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
}
.btn-primary,
.cta-buttons .btn-primary {
background: var(--color-accent);
color: var(--color-dark);
border-color: var(--color-accent);
box-shadow: 0 4px 16px rgba(12, 255, 171, 0.25);
}
.btn-primary:hover,
.cta-buttons .btn-primary:hover {
background: #0AE699;
color: var(--color-dark);
border-color: #0AE699;
box-shadow: 0 6px 20px rgba(12, 255, 171, 0.35);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.04);
color: var(--color-white);
border-color: rgba(255, 255, 255, 0.4);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.12);
border-color: var(--color-white);
}
.btn-register {
background-color: var(--color-accent);
color: var(--color-dark);
}
.btn-register:hover {
background-color: #0AE699;
color: var(--color-dark);
box-shadow: 0 6px 20px rgba(12, 255, 171, 0.35);
}
.info-item {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.info-icon,
.info-icon svg {
color: var(--color-accent);
}
input:focus,
textarea:focus,
select:focus {
outline: 2px solid var(--color-accent);
outline-offset: 1px;
box-shadow: 0 0 0 3px rgba(12, 255, 171, 0.18);
}
/* Hero на теме banner: отключаем анимированный SVG-тайлинг и сигнальные
точки — они принадлежат "classic"-эстетике. Фон hero — это единичная
картинка, загружаемая через background_type=image в админке. */
.hero-background::before {
display: none;
}
.hero .signal-dot {
display: none;
}
.hero-background::after {
background:
radial-gradient(ellipse at 50% 50%, rgba(12, 255, 171, 0.10) 0%, transparent 60%),
radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
}
/* Banner-hero фон: тёмный base-color (#061230) + cover bg.jpg.
Логотипы рендерятся через HTML (.hero-logos в hero-content),
не через ::after — позиционирование на оси 10vw см. ниже.
background-position: right center — на portrait/узких viewport (когда
ratio картинки 16:9 шире чем ratio viewport) cover масштабирует SVG по
высоте и обрезает по горизонтали. Центрирование (center) обрезало бы
симметрично — микросхема (правая часть SVG) уезжала бы за правый край.
right anchor сохраняет правую часть в фокусе; обрезается левая зона
(тёмный градиент с точками), но там сверху лежит контент, визуально
не критично. На landscape 16:9 (= ratio картинки) обрезки нет вообще,
position-x не имеет эффекта. */
.hero-background--image {
background-color: #061230;
background-size: cover;
background-position: right center;
background-repeat: no-repeat;
}
/* Banner-hero: контент top-align'ится (а не центрируется по вертикали как в classic),
overflow:visible — иначе длинный заголовок при центрированном flex'е клиппается.
Позиционирование контента по оси 10vw см. в .hero > .container ниже. */
.hero {
align-items: flex-start;
overflow: visible;
padding-top: 130px;
padding-bottom: 80px;
}
/* На banner-теме все элементы hero (логотипы, заголовок, подпись, кнопки,
плашки) выровнены по оси 10vw слева. Реализуется через padding-left:10vw
на .container — стандартный max-width:1200 ему отменяем, иначе на широких
мониторах padding отнимался бы от 1200px-content-area, а не от viewport.
align-self:stretch + display:flex + flex-direction:column — контейнер
тянется на всю высоту .hero, становится flex-column-родителем для
.hero-content (чтобы margin-top:auto на .hero-info работал). */
.hero > .container {
max-width: none;
padding-left: 10vw;
padding-right: var(--spacing-md);
width: 100%;
align-self: stretch;
display: flex;
flex-direction: column;
}
.hero-content {
/* flex column нужен ради order: на banner-теме порядок отличается от
стандартного hero (DOM: logos → title → subtitle → info → actions),
макет требует logos → title → subtitle → actions → info. Меняем
порядок через order: actions/info без правки шаблона hero.php.
max-width:560 раньше зажимал ширину — мешал плашкам помещаться в
строку; убираем, ограничения переносим точечно на title/subtitle.
flex-grow:1 — заполняет всю высоту .container (теперь flex column),
чтобы margin-top:auto на .hero-info смещал плашки в bottom. */
display: flex;
flex-direction: column;
text-align: left;
margin: 0;
max-width: none;
padding-top: 0;
flex-grow: 1;
}
/* .hero-title и .hero-subtitle получают order:0 по умолчанию и идут
в DOM-порядке (title, потом subtitle). Кнопки выше плашек: */
.hero-actions { order: 1; }
.hero-info { order: 2; }
.hero-title {
/* Длинные конференционные заголовки требуют меньшего кегля, иначе верстка ломается.
margin-bottom уменьшен с базового var(--spacing-md) до var(--spacing-sm) —
subtitle плотнее под title визуально. */
font-size: clamp(1.5rem, 2.4vw, 2.25rem);
margin-bottom: var(--spacing-sm);
}
/* Текст в banner-теме ограничен 720px по ширине для удобочитаемости длинных
названий конференций. Кнопки, плашки, логотипы — могут быть шире, под текстом. */
.hero-title,
.hero-subtitle {
max-width: 720px;
}
/* Базовый .hero--align-center .hero-subtitle (specificity 0,2,0) задаёт
margin-left:auto + margin-right:auto + max-width:60ch — это центрирует
subtitle для классической темы. В banner все элементы выровнены по 10vw
слева; auto-margin'ы внутри широкого .hero-content (max-width:none после
banner-layout-tweaks) визуально сдвигают subtitle вправо относительно title.
Перебиваем тем же селектором — равная specificity (0,2,0), banner-CSS
грузится после общего → wins по cascade order. */
.hero--align-center .hero-subtitle {
margin-left: 0;
margin-right: 0;
max-width: 720px;
}
/* Базовые .hero-logos / .hero-logo (display:flex, height:60px) определены
в общем styles.css. Здесь — только banner-специфичное выравнивание:
логотипы прижаты к левому краю, в отличие от центрирования по умолчанию. */
.hero-logos {
justify-content: flex-start;
}
.hero-info,
.hero-actions {
justify-content: flex-start;
}
/* Кнопки «Зарегистрироваться» и «Подать доклад» — одна под другой,
обе прижаты к левому краю по cross-axis (без stretching на полную ширину).
В desktop banner-layout это даёт визуально аккуратный вертикальный стек
около оси 10vw, как требует макет. */
.hero-actions {
flex-direction: column;
align-items: flex-start;
}
/* Плашки места/даты — в одну строку. Базовый .info-item имеет max-width:40ch
(≈600px); в banner-теме hero-content стал шире 10vw-сдвинутого, две плашки
по 200-300px помещаются. Запрещаем wrap и снимаем max-width на этом уровне. */
.hero-info {
flex-wrap: nowrap;
margin-top: auto;
}
.hero-info .info-item {
max-width: none;
}
@media (max-width: 900px) {
/* На узких экранах баннер становится верхним сегментом, контент — ниже на полной ширине.
Сбрасываем 10vw padding на .container и возвращаем стандартный wrap на плашках. */
.hero > .container {
padding-left: var(--spacing-md);
}
.hero-background--image {
background-size: 200% auto;
background-position: center top;
}
.hero-content {
max-width: 100%;
text-align: center;
margin-right: 0;
}
.hero-info {
flex-wrap: wrap;
}
.hero-info,
.hero-actions,
.hero--align-left .hero-info,
.hero--align-left .hero-actions {
justify-content: center;
}
}
/* Footer и cookie-notice на тёмном фоне: в banner-палитре
--color-gray-light = #1a2845 (тёмный), что нужно для дарк-кардов на светлом
теле, но на тёмных полосах делает текст невидимым. Перекрываем явно
белыми/полупрозрачными цветами для читаемости.
.footer-bottom (копирайт) добавлен в группу — иначе оставался серым на тёмном фоне.
.cookie-notice p / .cookie-more-link — та же ситуация, текст плашки cookie. */
.footer-section p,
.footer-section .footer-contact-line a,
.footer-section ul li a,
.footer-bottom,
.cookie-notice p,
.cookie-more-link {
color: rgba(255, 255, 255, 0.75);
}
.footer-section .footer-contact-line a:hover,
.footer-section ul li a:hover {
color: var(--color-accent);
}
.cookie-more-link:hover {
color: var(--color-white);
}