:root { --header-height: 55px; }
@media (min-width: 576px) and (max-width: 667px) { :root { --header-height: 55px; } }
html, body { margin: 0; padding: 0; }
body { padding-top: var(--header-height); }
.form-options--radio .form-radio-label { display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.form-radio { position:absolute; opacity:0; pointer-events:none; }
.form-radio-custom { width:18px; height:18px; border:2px solid #cfd6e1; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; transition:.2s; box-sizing:border-box; }
.form-radio:checked + .form-radio-custom { border-color:#0a306d; }
.form-radio:checked + .form-radio-custom::after { content:''; width:8px; height:8px; background:#0a306d; border-radius:50%; display:block; }
.form-radio-text { color:#333; line-height:20px; }
/* ========== PERFORMANCE OPTIMIZATIONS ========= */
/* Critical rendering path optimizations */
html {
/* Improve text rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* Smooth scrolling with performance consideration */
scroll-behavior: smooth;
/* Fix double scroll issue - unified overflow strategy */
overflow-x: hidden;
overflow-y: auto;
height: 100%;
width: 100%;
max-width: 100vw; /* предотвращаем горизонтальный overflow */
/* Firefox scrollbar styles - объединено из строки 53 */
scrollbar-width: thin;
scrollbar-color: #d9001b rgba(255, 255, 255, 0.1);
}
/* ========== CUSTOM MODAL STYLES ========= */
.custom-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.custom-modal.show {
opacity: 1;
visibility: visible;
}
.custom-modal__content {
background: #ffffff;
border-radius: 12px;
padding: 32px;
max-width: 480px;
width: 90%;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
transform: scale(0.9);
transition: transform 0.3s ease;
position: relative;
}
.custom-modal.show .custom-modal__content {
transform: scale(1);
}
.custom-modal__title {
font-size: 20px;
font-weight: 600;
color: #333333;
margin-bottom: 16px;
line-height: 1.3;
}
.custom-modal__message {
font-size: 16px;
color: #666666;
line-height: 1.5;
margin-bottom: 24px;
}
.custom-modal__button {
background: #d9001b;
color: #ffffff;
border: 2px solid #d9001b;
border-radius: 8px;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
float: right;
}
.custom-modal__button:hover {
background: #ffffff;
color: #d9001b;
}
.custom-modal__button:active {
transform: scale(0.98);
}
/* Мобильная адаптация */
@media (max-width: 667px) {
.custom-modal__content {
padding: 24px;
margin: 20px;
}
.custom-modal__title {
font-size: 18px;
}
.custom-modal__message {
font-size: 15px;
}
.custom-modal__button {
width: 100%;
float: none;
margin-top: 16px;
}
}
/* ========== CUSTOM SCROLLBAR ========= */
/* Webkit-based browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 8px;
background: transparent;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
margin: 10px 0;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #0a306d 0%, #1e4267 50%, #003153 100%);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
box-shadow: 0 0 10px rgba(10, 48, 109, 0.3);
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #1e4267 0%, #0a306d 50%, #004266 100%);
box-shadow: 0 0 15px rgba(10, 48, 109, 0.5);
transform: scaleX(1.2);
}
::-webkit-scrollbar-thumb:active {
background: linear-gradient(180deg, #003153 0%, #0a306d 100%);
box-shadow: 0 0 20px rgba(10, 48, 109, 0.7);
}
/* Scrollbar animation indicator */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, #0a306d 0%, #1e4267 50%, #003153 100%);
z-index: 9999;
transition: width 0.1s ease-out;
box-shadow: 0 0 10px rgba(10, 48, 109, 0.5);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* Базовые стили и сброс */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Дополнительная защита от overflow */
*,
*::before,
*::after {
box-sizing: border-box;
max-width: 100%;
}
/* Исключения для элементов полной ширины - ОПТИМИЗИРОВАНО */
.industries-scroll-area,
.industries-container {
max-width: none;
}
body {
/* ИСПРАВЛЕНО: Объединенные стили body с устранением конфликтов */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: #333333; /* ДОБАВЛЕНО: Темный цвет текста для читаемости */
background-color: #f8f9fa;
/* Reset и фиксы */
margin: 0;
padding: var(--header-height) 0 0 0; /* контент начинается под фиксированным header */
height: 100%;
width: 100%;
max-width: 100vw;
/* Optimize font rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* GPU layer promotion for animated elements */
.stats-section,
.russia-map-section,
.news-section,
.content-block-700 {
will-change: transform;
}
/* Remove will-change after animations complete */
.stats-section.aos-animate,
.russia-map-section.aos-animate,
.news-section.aos-animate,
.content-block-700.aos-animate {
will-change: auto;
}
/* Optimize image loading */
img {
/* Prevent layout shift during image load */
height: auto;
max-width: 100%;
/* ИСПРАВЛЕНО: decoding - HTML атрибут, не CSS свойство */
}
/* Optimize transforms for 60fps */
.news-card,
.industry-card,
.stat-block {
/* Use transform instead of changing layout properties */
transform: translateZ(0); /* Force hardware acceleration */
}
/* ========================================
НОВАЯ 12-КОЛОНОЧНАЯ GRID СИСТЕМА
Согласно ТЗ: 12 колонок, gutter 24px, боковые поля 144px
======================================== */
:root {
--container-pad: 144px; /* margin слева/справа */
--grid-gap: 24px; /* gutter между колонками */
--grid-columns: 12; /* количество колонок */
}
/* Базовый контейнер с новой grid-системой */
.container {
width: 100%;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
margin: 0 auto;
box-sizing: border-box;
opacity: 1 !important;
visibility: visible !important;
}
/* 12-колоночная сетка */
.grid-12 {
/* Fallback для старых браузеров */
display: -ms-grid; /* IE11 */
display: flex; /* Fallback если grid не поддерживается */
flex-wrap: wrap;
/* Современная grid-система */
display: grid;
grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
gap: var(--grid-gap);
width: 100%;
--col: calc((100% - (var(--grid-columns) - 1) * var(--grid-gap)) / var(--grid-columns));
row-gap: 0;
}
/* Fallback для span-классов через flex */
@supports not (display: grid) {
.grid-12 > * {
flex: 1 1 auto;
}
.span-1 { flex: 0 0 8.333%; }
.span-2 { flex: 0 0 16.666%; }
.span-3 { flex: 0 0 25%; }
.span-4 { flex: 0 0 33.333%; }
.span-6 { flex: 0 0 50%; }
.span-7 { flex: 0 0 58.333%; }
.span-8 { flex: 0 0 66.666%; }
.span-9 { flex: 0 0 75%; }
.span-12 { flex: 0 0 100%; }
}
/* Span классы для разных колонок */
.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }
/* Позиционирование с начальных колонок */
.start-1 { grid-column-start: 1; }
.start-2 { grid-column-start: 2; }
.start-3 { grid-column-start: 3; }
.start-4 { grid-column-start: 4; }
.start-5 { grid-column-start: 5; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; }
.start-9 { grid-column-start: 9; }
.start-10 { grid-column-start: 10; }
.start-11 { grid-column-start: 11; }
.start-12 { grid-column-start: 12; }
/* Удалено: перенесено в диапазон 1366px-1599px */
/* Адаптивная сетка для планшетов/мобильных landscape */
/* Smartphone landscape (667px) согласно ТЗ */
@media (min-width: 576px) and (max-width: 667px) {
:root {
--container-pad: 24px;
--grid-columns: 4; /* 4 колонки для landscape */
}
.grid-12 {
grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
}
.breadcrumbs-grid {
max-width: 100%;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
}
}
/* Smartphone portrait (319px) согласно ТЗ */
@media (max-width: 319px) {
:root {
--container-pad: 20px;
--grid-columns: 2; /* 2 колонки для portrait */
}
.grid-12 {
grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
}
}
/* LEGACY: Поддержка старого .container для совместимости */
.container-legacy {
width: 90%;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
opacity: 1 !important;
visibility: visible !important;
}
/* Мобильные экраны 360–390px: компактные поля и внутренние отступы */
@media (max-width: 390px){
:root {
--container-pad: 16px; /* Еще более компактные поля для маленьких экранов */
}
.breadcrumbs-grid {
max-width: 100%;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
}
}
/* HEADER */
.header {
background: transparent; /* УБРАНО: Градиентный фон для отображения фонового изображения */
position: absolute; /* ИСПРАВЛЕНО: Абсолютное позиционирование поверх hero */
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 100; /* ВЫСОКИЙ z-index для отображения поверх фона */
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); /* ИЗМЕНЕНО: Более мягкая тень */
}
/* ========================================
GRID-12 СИСТЕМА ДЛЯ HEADER
======================================== */
/* Grid-обертки для header элементов - высокая специфичность */
.header .header__logo-wrapper {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
}
.header .header__nav-wrapper {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ИСКЛЮЧЕНИЕ: Скрываем навигацию для диапазона 320-575px */
@media (min-width: 320px) and (max-width: 575px) {
.header .header__nav-wrapper {
display: none !important;
}
/* Контейнер для диапазона 320-575px - полная ширина с отступами */
.container {
width: 100% !important;
max-width: 100% !important;
padding-left: 12px !important;
padding-right: 12px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ПРИНУДИТЕЛЬНО ОТКЛЮЧАЕМ GRID ДЛЯ HEADER В ДИАПАЗОНЕ 320-575px */
.header .grid-12 {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
grid-template-areas: none !important;
grid-auto-flow: unset !important;
grid-auto-columns: unset !important;
grid-auto-rows: unset !important;
}
/* ПРИНУДИТЕЛЬНО ОТКЛЮЧАЕМ ВСЕ GRID-СВОЙСТВА ДЛЯ HEADER ЭЛЕМЕНТОВ */
.header__logo-wrapper.span-2,
.header__nav-wrapper.span-7,
.header__nav-wrapper.span-8,
.header__cta-wrapper.span-2,
.header__cta-wrapper.span-3,
.header__nav-wrapper.span-10 {
grid-column: unset !important;
grid-row: unset !important;
grid-area: unset !important;
display: flex !important;
}
/* Логотип - слева, прижат к верху */
.header__logo-wrapper {
display: flex !important;
align-items: flex-start !important;
justify-content: flex-start !important;
padding-top: 0 !important;
margin-top: 0 !important;
grid-column: unset !important;
grid-row: unset !important;
grid-area: unset !important;
}
/* CTA wrapper - справа, прижат к верху */
.header__cta-wrapper {
display: flex !important;
align-items: flex-start !important;
justify-content: flex-end !important;
padding-top: 0 !important;
margin-top: 0 !important;
width: auto !important;
flex: 0 0 auto !important;
grid-column: unset !important;
grid-row: unset !important;
grid-area: unset !important;
margin-left: auto !important;
margin-right: 0 !important;
}
/* Бургер-меню - усиленное прижатие к правому краю */
.header__cta-wrapper .burger-menu,
.header .header__cta-wrapper .burger-menu,
.burger-menu {
margin-left: auto !important;
margin-right: 0 !important;
flex: 0 0 auto !important;
width: 40px !important;
height: 40px !important;
}
/* ============================================================================
БЛОКИ "ОСНОВНЫЕ НАПРАВЛЕНИЯ" - ДИАПАЗОН 320-575px
Заголовок → Текст → Картинка (как в 576-767px)
============================================================================ */
/* ПРИНУДИТЕЛЬНО отключаем grid для directions-feature в диапазоне 320-575px */
.directions-feature .grid-12 {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
grid-template-areas: none !important;
}
/* Блоки "Основные направления" - простой вертикальный layout */
.directions-feature {
padding: 24px 0 0 0;
}
/* Текстовый контейнер - полная ширина, содержит заголовок и описание */
.directions-feature .directions-feature__text {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
width: 100% !important;
}
/* Заголовок - внутри текстового контейнера */
.directions-feature .df-title {
position: static !important;
transform: none !important;
z-index: auto !important;
text-align: left !important;
margin: 0 !important;
font-size: clamp(1.1rem, 1.5vw, 2rem) !important;
line-height: 1.2 !important;
padding: 0;
}
.directions-feature--reverse .df-title {
padding-left: 0 !important;
}
/* Картинка - полная ширина, после текстового контейнера */
.directions-feature__media {
position: static !important;
z-index: auto !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
/* Изображение внутри медиа-контейнера - ПРИНУДИТЕЛЬНО 100% */
.directions-feature__media img,
.directions-feature .directions-feature__media img,
.directions-feature__media img[src],
.directions-feature__media img[width],
.directions-feature__media img[height] {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
display: block !important;
margin: 0 auto !important;
}
/* ДОПОЛНИТЕЛЬНО: принудительно отключаем все grid-свойства */
.directions-feature__media.span-9,
.directions-feature__text.span-5,
.directions-feature__text.span-7 {
grid-column: unset !important;
grid-row: unset !important;
grid-area: unset !important;
width: 100% !important;
max-width: 100% !important;
}
/* Принудительно отключаем grid для всех directions-feature элементов */
.directions-feature .directions-feature__text,
.directions-feature .directions-feature__media {
grid-column: unset !important;
grid-row: unset !important;
grid-area: unset !important;
}
/* ============================================================================
КАРТОЧКИ "ПОЧЕМУ ВЫБИРАЮТ НАС?" - ДИАПАЗОН 320-575px
Вертикальное расположение с логикой открытия карточек (как в 576-767px)
============================================================================ */
/* Сетка карточек - вертикальное расположение */
.why-choose-grid {
grid-template-columns: 0.9fr !important; /* Увеличена ширина до 90% */
gap: 1rem !important;
justify-content: center !important; /* Центрируем карточки */
}
/* Базовая карточка */
.advantage-card {
max-height: clamp(15rem, 16vh, 17rem) !important; /* Уменьшена высота для мобильных */
padding: 0.4em 0.6em 0.4em 0.6em !important;
grid-column: span 1 !important; /* Каждая карточка занимает всю ширину */
}
/* Заголовочный блок карточки */
.advantage-card__header-block {
height: 100% !important;
padding: 21px 0 !important; /* Уменьшена высота области */
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 0 !important;
}
/* Заголовок карточки */
.advantage-card__title {
font-size: clamp(1rem, 1.2vw, 1.3rem) !important; /* Уменьшен размер шрифта */
}
/* Фоновая цифра */
.advantage-card__number {
font-size: clamp(15rem, 16vw, 17rem) !important; /* Уменьшен размер фоновой цифры */
}
/* РАСШИРЕННАЯ КАРТОЧКА - при открытии */
.advantage-card.is-expanded {
grid-column: span 1 !important; /* Остается в своей колонке */
height: clamp(18rem, 20vh, 22rem) !important; /* Уменьшена высота для мобильных */
min-height: clamp(18rem, 20vh, 22rem) !important;
max-height: clamp(18rem, 20vh, 22rem) !important;
}
/* Контент расширенной карточки */
.advantage-card__content {
padding: 0 !important; /* Уменьшены отступы */
max-height: none !important;
transform: translateY(-6.5rem) !important; /* Уменьшен transform */
height: 100% !important; /* Занимает всю высоту карточки */
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* Заголовок в расширенной карточке */
.advantage-card__expanded-title {
font-size: clamp(1rem, 1.2vw, 1.3rem) !important;
margin: 0 0 0.8rem 0 !important; /* Уменьшен отступ */
transform: translateY(0) !important; /* Убран transform */
}
/* Текст в расширенной карточке */
.advantage-card__text p {
font-size: clamp(0.58rem, 0.7vw, 1rem) !important; /* Уменьшен размер шрифта */
}
/* НЕАКТИВНЫЕ КАРТОЧКИ - когда одна активна */
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) {
grid-column: span 1 !important; /* Остается в своей колонке */
opacity: 0.8 !important;
}
/* Фоновая цифра в неактивных карточках */
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) .advantage-card__number {
font-size: clamp(9rem, 9vw, 11rem) !important; /* Уменьшен размер */
transform: translate(-50%, -50%) !important;
}
}
/* ИСКЛЮЧЕНИЕ: Скрываем навигацию для диапазона 576-767px */
@media (min-width: 576px) and (max-width: 767px) {
.header .header__nav-wrapper {
display: none !important;
}
}
.header .header__cta-wrapper {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
/* Внутренние контейнеры для сохранения совместимости */
.header .header__inner-logo {
display: flex !important;
align-items: center !important;
}
/* Защита от старых header__inner конфликтов */
.header .header__inner-logo .header__logo,
.header .header__nav-wrapper .nav,
.header .header__cta-wrapper .btn {
margin: 0 !important; /* Убираем возможные отступы */
}
/* Исключение для бургер-меню - сохраняем его отступы */
.header .header__cta-wrapper .burger-menu {
margin: 0 !important; /* Сбрасываем базовые отступы */
margin-left: auto !important; /* Принудительно прижимаем к правому краю */
margin-right: 0 !important;
margin-top: 7px !important; /* Сохраняем отступ сверху */
}
/* Адаптивные стили для header grid - ИСПРАВЛЕНО: математически точные расчеты */
@media (min-width: 768px) and (max-width: 768px) {
/* 6 колонок: 2 + 3 + 1 = 6 */
.header__logo-wrapper.span-2 { grid-column: span 2; }
.header__nav-wrapper.span-7,
.header__cta-wrapper.span-2,
.header__cta-wrapper.span-3 { grid-column: span 1; }
}
@media (min-width: 576px) and (max-width: 667px) {
/* 4 колонки: 1 + 2 + 1 = 4 */
.header__logo-wrapper.span-2 { grid-column: span 1; }
.header__nav-wrapper.span-7,
.header__nav-wrapper.span-8 { grid-column: span 2; }
}
@media (max-width: 319px) {
/* 2 колонки: вертикальная раскладка, каждый элемент на полную ширину */
.header__logo-wrapper.span-2 { grid-column: span 2; grid-row: 1; }
.header__nav-wrapper.span-7,
.header__nav-wrapper.span-8 { grid-column: span 2; grid-row: 2; }
.header__cta-wrapper.span-2,
.header__cta-wrapper.span-3 { grid-column: span 2; grid-row: 3; }
}
/* Дополнительные стили для внутренних страниц без CTA кнопки */
@media (max-width: 768px) {
/* 6 колонок: 2 + 4 = 6 (без CTA) */
.header__nav-wrapper.span-10 { grid-column: span 4; }
}
@media (min-width: 576px) and (max-width: 667px) {
/* 4 колонки: 1 + 3 = 4 (без CTA) */
.header__nav-wrapper.span-10 { grid-column: span 3; }
}
@media (max-width: 319px) {
/* 2 колонки: вертикальная раскладка */
.header__nav-wrapper.span-10 { grid-column: span 2; grid-row: 2; }
}
/* ИСПРАВЛЕНИЕ: Отступ сверху для страниц с абсолютным header */
.platform-content,
.members-content,
.projects-content,
.news-content,
.contacts-content,
.about-content,
.directions-content,
.participation-content {
padding-top: 0 !important; /* Отступ для компенсации абсолютного header */
}
/* Специальный отступ для hero секций */
.platform-hero,
.page-hero {
padding-top: 40px !important; /* Дополнительный отступ для hero секций */
}
/* ========== СТИЛИ ДЛЯ СТРАНИЦЫ УЧАСТНИКОВ ========== */
/* Фильтры и поиск */
.members-filter {
margin: 40px 0 60px 0;
padding: 0 20px;
}
.filter-controls {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 1617px;
margin: 0;
}
.search-box {
display: flex;
justify-content: center;
}
.search-box input {
width: 100%;
max-width: 400px;
padding: 12px 20px;
border: none;
border-radius: 25px;
font-size: 16px;
font-family: 'Inter', sans-serif;
background: #D0D0D0;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.search-box input:focus {
outline: none;
border: none;
box-shadow: none;
}
.search-box input {
width: 100%;
max-width: 400px;
padding: 12px 20px;
border: none;
border-radius: 25px;
font-size: 16px;
font-family: 'Inter', sans-serif;
background: #D0D0D0;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
color: #F70518;
}
/* Стилизация крестика (clear button) для поиска */
.search-box input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
height: 16px;
width: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
}
.search-box input::-ms-clear {
display: none;
}
.search-box input::placeholder {
color: #ffffff;
}
.filter-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.filter-btn {
padding: 10px 20px;
border: 2px solid #e1e5e9;
border-radius: 25px;
background: #ffffff;
color: #0A306D;
font-size: 14px;
font-weight: 500;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: all 0.3s ease;
}
.filter-btn:hover {
background: #fff;
color: #F50518;
}
.filter-btn.active {
background: #0A306D;
color: #ffffff;
}
/* Секция участников */
.content-placeholder {
padding: 0 20px;
}
/* Сетка участников */
.members-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 0;
}
/* Карточки участников */
.member-card {
background: #ffffff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #f0f0f0;
}
.member-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.member-logo {
width: 80px;
height: 80px;
margin: 0 auto 20px auto;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
border-radius: 15px;
}
.logo-placeholder {
color: #657E9C;
font-size: 12px;
font-weight: 500;
text-align: center;
}
.member-name {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 600;
color: #000000;
margin: 0 0 15px 0;
text-align: center;
line-height: 1.3;
}
.member-description {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 400;
color: #0A306D;
margin: 0 0 20px 0;
text-align: center;
line-height: 1.5;
}
.member-industry {
display: inline-block;
background: #e8f2ff;
color: #0A306D;
padding: 6px 12px;
border-radius: 15px;
font-size: 12px;
font-weight: 500;
text-align: center;
width: 100%;
box-sizing: border-box;
}
/* CTA секция */
.join-cta {
margin: 80px 0 40px 0;
padding: 0 20px;
}
.cta-block {
background: linear-gradient(135deg, #0A306D 0%, #153D6A 100%);
border-radius: 25px;
padding: 60px 40px;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.cta-block h2 {
font-family: 'Inter', sans-serif;
font-size: 32px;
font-weight: 600;
color: #ffffff;
margin: 0 0 15px 0;
line-height: 1.2;
}
.cta-block p {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 400;
color: rgba(255, 255, 255, 0.9);
margin: 0 0 30px 0;
line-height: 1.4;
}
.cta-block .btn {
background: #ffffff;
color: #0A306D;
border: none;
padding: 15px 30px;
border-radius: 25px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.cta-block .btn:hover {
background: #f8f9fa;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Адаптивность */
@media (max-width: 768px) {
.members-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 15px;
}
.member-card {
padding: 25px;
}
.filter-buttons {
gap: 10px;
}
.filter-btn {
padding: 8px 16px;
font-size: 13px;
}
.cta-block {
padding: 40px 25px;
}
.cta-block h2 {
font-size: 28px;
}
.cta-block p {
font-size: 16px;
}
}
/* ========== СТИЛИ ДЛЯ СТРАНИЦЫ ПРОЕКТОВ ========== */
/* Фильтры проектов */
.projects-filter {
margin: 40px 0 60px 0;
padding: 0 20px;
}
.projects-filter .filter-controls {
display: flex;
justify-content: center;
max-width: 1617px;
}
/* Сетка проектов */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Карточки проектов */
.project-card {
background: #ffffff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #f0f0f0;
position: relative;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.project-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 10px;
}
.project-status {
padding: 6px 12px;
border-radius: 15px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.project-status.active {
background: #e8f5e8;
color: #2d7d32;
}
.project-status.planning {
background: #fff3e0;
color: #f57c00;
}
.project-status.completed {
background: #e3f2fd;
color: #1976d2;
}
.project-title {
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 600;
color: #000000;
margin: 0;
line-height: 1.3;
flex: 1;
}
.project-description {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 400;
color: #0A306D;
margin: 0 0 25px 0;
line-height: 1.5;
}
.project-details {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
gap: 15px;
flex-wrap: wrap;
}
.project-timeline,
.project-budget {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
color: #657E9C;
}
.project-participants {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #0A306D;
margin-bottom: 10px;
}
.project-participants strong {
font-weight: 600;
}
.project-results {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #2d7d32;
font-weight: 500;
background: #e8f5e8;
padding: 10px 15px;
border-radius: 10px;
margin-top: 15px;
}
.project-results strong {
font-weight: 600;
}
/* Статистика проектов */
.project-stats {
margin: 80px 0 40px 0;
padding: 0 20px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
max-width: 1000px;
margin: 0 auto;
}
.stat-item {
text-align: center;
padding: 30px 20px;
background: #ffffff;
border-radius: 20px;
color: #000000;
border: 1px solid #f0f0f0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.stat-number {
font-family: 'Inter', sans-serif;
font-size: 48px;
font-weight: 700;
margin-bottom: 10px;
line-height: 1;
}
.stat-label {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 400;
opacity: 0.9;
line-height: 1.3;
}
/* Адаптивность для проектов */
@media (max-width: 768px) {
.projects-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 15px;
}
.project-card {
padding: 25px;
}
.project-header {
flex-direction: column;
align-items: flex-start;
}
.project-title {
font-size: 20px;
}
.project-details {
flex-direction: column;
gap: 8px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.stat-number {
font-size: 36px;
}
.stat-label {
font-size: 14px;
}
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
}
.stat-item {
padding: 25px 15px;
}
}
/* ========== СТИЛИ ДЛЯ СТРАНИЦЫ КОНТАКТОВ ========== */
/* Карточки контактов */
.contact-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
max-width: 1000px;
margin: 0 auto 80px auto;
padding: 0 20px;
}
.contact-card {
background: #ffffff;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #f0f0f0;
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.contact-card__icon {
font-size: 48px;
margin-bottom: 20px;
line-height: 1;
}
.contact-card__title {
font-family: 'Inter', sans-serif;
font-size: 24px;
font-weight: 600;
color: #000000;
margin: 0 0 15px 0;
line-height: 1.2;
}
.contact-card__info {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #0A306D;
line-height: 1.5;
}
.contact-card__info a {
color: #0A306D;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.contact-card__info a:hover {
color: #153D6A;
text-decoration: underline;
}
.contact-card__info small {
color: #657E9C;
font-size: 14px;
}
/* Форма обратной связи */
.contact-form-section {
max-width: 1200px;
margin: 0 auto 80px auto;
padding: 0 20px;
}
.row {
display: flex;
gap: 40px;
align-items: flex-start;
}
.col-md-8 {
flex: 2;
}
.col-md-4 {
flex: 1;
}
.contact-form {
background: #ffffff;
border-radius: 20px;
padding: 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #f0f0f0;
}
.form-title {
font-family: 'Inter', sans-serif;
font-size: 28px;
font-weight: 600;
color: #000000;
margin: 0 0 10px 0;
line-height: 1.2;
}
.form-description {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #657E9C;
margin: 0 0 30px 0;
line-height: 1.5;
}
.form-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.form-group {
flex: 1;
margin-bottom: 20px;
}
.form-group label {
display: block;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
color: #000000;
margin-bottom: 8px;
}
/* Для чекбокс-лейбла используем inline-flex, правило выше не должно его ломать */
.form-group--checkbox label.form-checkbox-label {
display: inline-flex !important;
margin-bottom: 0;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid #e1e5e9;
border-radius: 10px;
font-family: 'Inter', sans-serif;
font-size: 16px;
background: #ffffff;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #0A306D;
box-shadow: 0 0 0 3px rgba(10, 48, 109, 0.1);
}
.form-group textarea {
min-height: 120px;
resize: vertical;
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: #0A306D;
line-height: 1.4;
}
.checkbox-label input[type="checkbox"] {
width: auto;
margin: 0;
flex-shrink: 0;
}
.checkbox-label a {
color: #0A306D;
text-decoration: underline;
}
.form-submit {
background: linear-gradient(135deg, #0A306D 0%, #153D6A 100%);
color: #ffffff;
border: none;
padding: 15px 30px;
border-radius: 10px;
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
}
/* Мобильная адаптация контактной формы (360–390px) */
@media (max-width: 390px){
.contact-form-section { padding: 0 10px; margin-bottom: 40px; }
.row { flex-direction: column; gap: 20px; }
.contact-form { padding: 24px 16px; border-radius: 14px; }
.form-title { font-size: 22px; }
.form-description { font-size: 14px; margin-bottom: 20px; }
.form-row { flex-direction: column; gap: 14px; }
.form-group label { font-size: 13px; margin-bottom: 6px; }
.form-group input,.form-group select,.form-group textarea { font-size: 15px; padding: 11px 14px; }
.form-submit { padding: 12px 18px; font-size: 15px; }
}
.form-submit:hover {
transform: translateY(-1px);
}
/* Боковая панель */
.contact-sidebar {
background: #f8f9fa;
border-radius: 20px;
padding: 30px;
}
.contact-sidebar h3 {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 600;
color: #000000;
margin: 0 0 25px 0;
line-height: 1.2;
}
.faq-item {
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid #e1e5e9;
}
.faq-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.faq-item h4 {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 600;
color: #000000;
margin: 0 0 10px 0;
line-height: 1.3;
}
.faq-item p {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #0A306D;
margin: 0;
line-height: 1.5;
}
/* Офисы */
.office-locations {
max-width: 1200px;
margin: 0 auto 40px auto;
padding: 0 20px;
}
.office-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 40px;
}
.office-item {
background: #ffffff;
border-radius: 15px;
padding: 25px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
border: 1px solid #f0f0f0;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.office-item:hover {
transform: translateY(-3px);
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}
.office-item__city {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 600;
color: #000000;
margin-bottom: 10px;
line-height: 1.2;
}
.office-item__address {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #657E9C;
margin-bottom: 15px;
line-height: 1.4;
}
.office-item__phone {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 500;
color: #0A306D;
text-decoration: none;
transition: color 0.3s ease;
}
.office-item__phone:hover {
color: #153D6A;
text-decoration: underline;
}
/* Адаптивность для контактов */
@media (max-width: 768px) {
.contact-cards {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 15px;
}
.contact-card {
padding: 30px 25px;
}
.row {
flex-direction: column;
gap: 30px;
}
.contact-form {
padding: 30px 25px;
}
.form-row {
flex-direction: column;
gap: 0;
}
.form-title {
font-size: 24px;
}
.office-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (max-width: 480px) {
.contact-card {
padding: 25px 20px;
}
.contact-form {
padding: 25px 20px;
}
.contact-sidebar {
padding: 25px 20px;
}
}
/* ========== СТИЛИ ДЛЯ СТРАНИЦЫ НОВОСТЕЙ ========== */
/* Главная новость */
.featured-news {
margin: 0 auto 80px auto;
}
.featured-news-container {
width: 100%;
max-width: 1905px;
margin: 0 auto;
}
.featured-news__content {
/* фон переопределяется JS (news-integration.js) на изображение новости с затемнением */
background: linear-gradient(135deg, #0A306D 0%, #153D6A 100%);
border-radius: 25px;
padding: 60px 50px;
color: #ffffff;
position: relative;
overflow: hidden;
}
.featured-news__content::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transform: translate(50%, -50%);
}
.featured-news__badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
padding: 8px 16px;
border-radius: 20px;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
margin-bottom: 20px;
backdrop-filter: blur(10px);
}
.featured-news__title {
font-family: 'Inter', sans-serif;
font-size: 36px;
font-weight: 700;
color: #ffffff;
margin: 0 0 20px 0;
line-height: 1.2;
position: relative;
z-index: 1;
}
.featured-news__excerpt {
font-family: 'Inter', sans-serif;
font-size: 18px;
color: rgba(255, 255, 255, 0.9);
margin: 0 0 30px 0;
line-height: 1.6;
max-width: 600px;
position: relative;
z-index: 1;
}
.featured-news__cta {
display: inline-block;
background: #ffffff;
color: #0A306D;
padding: 15px 30px;
border-radius: 10px;
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.featured-news__cta:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
/* Фильтры новостей */
.news-filter {
margin: 0 auto 60px auto;
}
.news-filter-container {
width: 100%;
max-width: 1905px;
margin: 0 auto;
}
.filter-controls {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}
.filter-buttons-container {
flex: 1;
min-width: 100%;
}
.filter-buttons {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 6px;
width: 100%;
/* Force single row layout */
grid-auto-flow: row;
grid-auto-rows: auto;
}
.filter-btn-wrapper {
display: flex;
justify-content: center;
}
.filter-btn {
background: transparent;
color: #F70518;
border: none;
padding: 0.938em 0;
border-radius: 10px;
font-family: 'Inter', sans-serif;
font-size: 1.125em;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
width: 100%;
text-align: center;
}
.filter-btn:hover {
background: #F70518;
color: #ffffff;
}
.filter-btn.active {
background: #F70518;
color: #ffffff;
}
.search-box {
position: relative;
min-width: 250px;
}
.search-box input {
width: 100%;
padding: 0.75em 1.875em;
border: none;
border-radius: 10px;
font-family: 'Inter', sans-serif;
font-size: 1em;
background: #D0D0D0;
transition: border-color 0.3s ease;
box-sizing: border-box;
color: #F70518;
}
.search-box input:focus {
outline: none;
border: none;
box-shadow: none;
}
/* Стилизация крестика (clear button) для поиска */
.search-box input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
height: 16px;
width: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
}
.search-box input::-ms-clear {
display: none;
}
/* Сетка новостей */
.news-grid-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 0px;
margin: 0;
padding: 6px 0px;
}
/* Стили для news-page перенесены в news.css */
/* Стили новостей перенесены в news.css для изоляции */
.news-card {
background: transparent; /* убираем белую подложку */
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* тень по умолчанию */
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: none;
/* Performance optimizations */
will-change: transform;
contain: layout style;
}
.news-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.news-card__image {
position: relative;
height: clamp(8rem, 10vw, 12.5rem);
overflow: hidden;
}
.news-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
/* Performance optimizations */
will-change: transform;
backface-visibility: hidden;
transform: translateZ(0);
border-radius: 10px 10px 0 0;
}
.news-card:hover .news-card__image img {
transform: scale(1.05);
}
.news-card__content {
padding: 0.625rem;
}
.news-card__meta {
display: flex;
justify-content: right;
align-items: center;
margin-bottom: 15px;
}
.news-card__category {
display: none; /* скрываем бейдж с англ. слагом над картинкой */
}
.news-card__meta time {
font-family: 'Inter', sans-serif;
font-size: clamp(0.7rem, 0.75vw, 0.875rem);
color: #657E9C;
padding-left: 10px; /* доп. отступ для устранения среза */
padding-right: 10px;
font-weight: 600;
}
.news-card__title {
font-family: 'Inter', sans-serif;
font-size: clamp(0.75rem, 1vw, 1.25rem);
font-weight: 600;
color: #ff1f2f !important;
margin: 0 0 clamp(0.5rem, 0.85vh, 0.938rem) 0;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2; /* стандартное свойство для совместимости */
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Убираем подчеркивание и цвет ссылки внутри заголовков на всех карточках */
.news-card__title a {
color: #ff1f2f !important;
text-decoration: none !important;
}
.news-card__title a:hover,
.news-card__title a:visited,
.news-card__title a:active {
color: #ff1f2f !important;
text-decoration: none !important;
}
/* Домашняя страница: заголовок в карточке (news-card-title) */
.news-card-title a {
color: #ff1f2f !important;
text-decoration: none !important;
}
.news-card-title a:hover,
.news-card-title a:visited,
.news-card-title a:active {
color: #ff1f2f !important;
text-decoration: none !important;
}
.news-card__excerpt {
font-family: 'Inter', sans-serif;
font-size: clamp(0.6rem, 0.75vw, 0.875rem);
color: #657E9C;
margin: 0px 0 clamp(0.9rem, 1vw, 1.25rem) 0;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3; /* стандартное свойство для совместимости */
-webkit-box-orient: vertical;
overflow: hidden;
height: clamp(10vh, 14ch, 16vh);
}
.news-card__footer {
display: flex;
justify-content: right;
align-items: center;
margin-top: auto; /* прижимает футер вниз карточки независимо от контента */
}
.news-card__read-more {
color: #ff1f2f;
font-family: 'Inter', sans-serif;
font-size: clamp(0.6rem, 0.75vw, 0.875rem);
font-weight: 800;
text-decoration: none;
transition: color 0.3s ease;
}
.news-card__read-more:hover {
color: #153D6A;
text-decoration: underline;
}
.news-card__views {
display: none; /* скрываем счетчик просмотров */
}
/* Responsive styles for filter buttons */
@media (max-width: 768px) {
.filter-buttons {
grid-template-columns: repeat(10, 1fr);
gap: 4px;
}
.filter-btn-wrapper {
grid-column: span 2 !important;
}
.filter-btn-wrapper:nth-child(1) { grid-column: 1 / span 2 !important; }
.filter-btn-wrapper:nth-child(2) { grid-column: 3 / span 2 !important; }
.filter-btn-wrapper:nth-child(3) { grid-column: 5 / span 2 !important; }
.filter-btn-wrapper:nth-child(4) { grid-column: 7 / span 2 !important; }
.filter-btn-wrapper:nth-child(5) { grid-column: 9 / span 2 !important; }
}
@media (max-width: 480px) {
.filter-buttons {
grid-template-columns: repeat(6, 1fr);
gap: 3px;
}
.filter-btn-wrapper {
grid-column: span 2 !important;
}
.filter-btn-wrapper:nth-child(1) { grid-column: 1 / span 2 !important; }
.filter-btn-wrapper:nth-child(2) { grid-column: 3 / span 2 !important; }
.filter-btn-wrapper:nth-child(3) { grid-column: 5 / span 2 !important; }
.filter-btn-wrapper:nth-child(4) { grid-column: 1 / span 2 !important; }
.filter-btn-wrapper:nth-child(5) { grid-column: 3 / span 2 !important; }
.filter-btn {
padding: 4px 8px;
font-size: 10px;
}
}
/* Удалено: перенесено в диапазон 1366px-1599px */
@media (max-width: 768px) {
.featured-news-container,
.news-filter-container,
.news-grid-container {
padding: 0 15px;
}
}
/* Удалено: перенесено в диапазон 1366px-1599px */
/* Медиа-запросы для .news-page перенесены в news.css */
/* Кнопка загрузки */
.load-more-section {
text-align: center;
margin: 60px auto 0 auto;
max-width: 1200px;
padding: 0 20px;
}
/* Стили для кнопки загрузки на news-page перенесены в news.css */
.load-more-btn {
background: none;
color: #ff1f2f;
border: none;
padding: 15px 40px;
font-family: 'Inter', sans-serif;
font-size: clamp(0.7rem, 0.9vw, 1rem);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-block;
}
.load-more-btn:hover {
opacity: 0.8;
}
/* Удалено: перенесено в диапазон 1366px-1599px */
@media (max-width: 768px) {
.load-more-btn {
padding: 12px 30px;
font-size: 14px;
}
/* .news-page стили перенесены в news.css */
}
@media (max-width: 480px) {
.load-more-btn {
padding: 10px 25px;
font-size: 13px;
}
}
/* Подписка на новости */
.newsletter-section {
max-width: 40%;
margin: clamp(2rem, 3vw, 5rem) auto 2.5rem auto;
padding: 0 1.25rem;
}
.newsletter-card {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 25px;
padding: 50px;
text-align: center;
border: 1px solid #e1e5e9;
}
.newsletter-title {
font-family: 'Inter', sans-serif;
font-size: clamp(1.25rem, 1.5vw, 1.75rem);
font-weight: 700;
color: #ff1f2f;
margin: 0 0 15px 0;
line-height: 1.2;
}
.newsletter-description {
font-family: 'Inter', sans-serif;
font-size: clamp(0.875rem, 1vw, 1.125rem);
color: #ff1f2f;
margin: 0 0 30px 0;
line-height: 1.5;
font-weight: 600;
}
.newsletter-form {
display: flex;
gap: 15px;
max-width: 400px;
margin: 0 auto;
}
.newsletter-form input {
flex: 1;
padding: 0.625rem clamp(0.875rem, 1vw, 1.25rem);
border: 0px solid #e1e5e9;
border-radius: 25px;
font-family: 'Inter', sans-serif;
font-size: clamp(0.75rem, 0.85vw, 1rem);
background: #D0D0D0;
transition: border-color 0.3s ease;
color: #ff1f2f;
}
.newsletter-form input::placeholder {
color: #ffffff;
}
.newsletter-form input:focus {
outline: none;
border-color: #0A306D;
}
.newsletter-form button {
background: #ff1f2f;
color: #ffffff;
border: none;
padding: 0.625rem clamp(0.875rem, 2vw, 2.5rem);
border-radius: 10px;
font-family: 'Inter', sans-serif;
font-size: clamp(0.688rem, 0.75vw, 1rem);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.newsletter-form button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(10, 48, 109, 0.3);
}
/* Адаптивность для новостей */
@media (max-width: 768px) {
.featured-news__content {
padding: 40px 30px;
}
.filter-controls {
flex-direction: column;
align-items: stretch;
gap: 20px;
}
.filter-buttons {
grid-template-columns: repeat(10, 1fr);
gap: 8px;
}
.filter-btn-wrapper {
grid-column: span 2 !important;
}
.filter-btn-wrapper:nth-child(1) { grid-column: 1 / span 2 !important; }
.filter-btn-wrapper:nth-child(2) { grid-column: 3 / span 2 !important; }
.filter-btn-wrapper:nth-child(3) { grid-column: 5 / span 2 !important; }
.filter-btn-wrapper:nth-child(4) { grid-column: 7 / span 2 !important; }
.filter-btn-wrapper:nth-child(5) { grid-column: 9 / span 2 !important; }
.search-box {
min-width: auto;
}
.search-box input::placeholder {
color: #ffffff;
}
.news-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 15px;
}
.newsletter-card {
padding: 40px 30px;
}
.newsletter-form {
flex-direction: column;
max-width: none;
}
.newsletter-title {
font-size: 24px;
}
}
@media (max-width: 480px) {
.featured-news__content {
padding: 30px 25px;
}
.filter-buttons {
grid-template-columns: repeat(6, 1fr);
gap: 6px;
}
.filter-btn-wrapper {
grid-column: span 2 !important;
}
.filter-btn-wrapper:nth-child(1) { grid-column: 1 / span 2 !important; }
.filter-btn-wrapper:nth-child(2) { grid-column: 3 / span 2 !important; }
.filter-btn-wrapper:nth-child(3) { grid-column: 5 / span 2 !important; }
.filter-btn-wrapper:nth-child(4) { grid-column: 1 / span 2 !important; }
.filter-btn-wrapper:nth-child(5) { grid-column: 3 / span 2 !important; }
.news-card__content {
padding: 0.625rem;
}
.newsletter-card {
padding: 30px 25px;
}
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0; /* УМЕНЬШЕНО: Еще компактнее для экономии места */
max-width: 1200px; /* ДОБАВЛЕНО: Ограничение ширины */
margin: 0 auto; /* ДОБАВЛЕНО: Центрирование */
width: 100%;
box-sizing: border-box;
}
.header__logo img {
height: clamp(14vh, 16vh, 18vh); /* УМЕНЬШЕНО: Еще компактнее логотип */
width: auto;
display: block;
position: absolute;
top: 0;
}
.header__logo {
margin-right: 12px; /* УМЕНЬШЕНО: Еще больше экономия места */
flex-shrink: 0; /* НЕ СЖИМАЕТСЯ */
}
/* УДАЛЕНО: Конфликтующие стили навигации - используем только navigation.css */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 30px; /* горизонтальные поля */
height: 52px; /* фиксированная высота */
white-space: nowrap; /* запрет переноса */
border-radius: 6px;
font-size: 16px;
text-decoration: none;
transform-origin: center center;
cursor: pointer;
transition: transform 0.2s ease;
will-change: transform; /* оптимизируем анимацию transform */
}
/* Персональные размеры для отдельных CTA не ломают общий .btn */
.header .btn--platform.header-cta { height: 44px; padding: 0 39px; border-radius: 10px; }
.hero .btn--cta { height: 48px; padding: 26px 55px; border-radius: 6px; }
.btn--primary,
.btn--secondary {
background-color: #d9001b;
color: #fff;
border: 1px solid #d9001b;
}
.btn--primary:hover,
.btn--secondary:hover {
background-color: #fff; /* белый фон */
color: #d9001b; /* синий текст */
border-color: #d9001b; /* синяя рамка */
}
/* HERO */
.hero {
position: relative;
width: 100%;
height: 100vh; /* Полная высота экрана */
min-height: 1080px; /* ИСПРАВЛЕНО: Минимальная высота для 1920x1080 */
overflow: hidden;
display: flex !important; /* ПРИНУДИТЕЛЬНАЯ ВИДИМОСТЬ */
align-items: center;
margin-top: 0;
z-index: 10; /* ИСПРАВЛЕНО: Добавляем z-index для правильного позиционирования относительно header */
visibility: visible !important; /* ПРИНУДИТЕЛЬНАЯ ВИДИМОСТЬ */
opacity: 1 !important; /* ПРИНУДИТЕЛЬНАЯ ВИДИМОСТЬ */
/* ИСПРАВЛЕНО: Надёжный запасной фон */
background: linear-gradient(135deg, #1a365d 0%, #2d5a87 100%);
}
.hero__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* ИСПРАВЛЕНО: Корректный путь к фоновому изображению */
background-image: url('/img/img_fon.webp');
/* Смещаем изображение вправо, чтобы убрать визуальное пустое поле слева */
background-position: 60% center;
background-size: cover;
background-repeat: no-repeat;
background-color: #1a365d; /* Fallback цвет */
z-index: 1;
}
.hero__overlay {
position: absolute;
inset: 0;
background-color: rgba(5, 48, 82, 0.8); /* Затемняем фон на 20% (увеличиваем прозрачность с 0.6 до 0.8) */
z-index: 2;
}
.hero__inner {
display: flex !important; /* ПРИНУДИТЕЛЬНАЯ ВИДИМОСТЬ */
justify-content: space-between;
align-items: center;
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 15px;
z-index: 50; /* ИСПРАВЛЕНО: Увеличиваем z-index чтобы быть ниже header (100) но выше overlay (2) */
box-sizing: border-box;
position: relative;
min-height: 800px; /* ИСПРАВЛЕНО: Увеличена высота для заполнения экрана 1920x1080 */
visibility: visible !important; /* ПРИНУДИТЕЛЬНАЯ ВИДИМОСТЬ */
opacity: 1 !important; /* ПРИНУДИТЕЛЬНАЯ ВИДИМОСТЬ */
}
.hero__content {
max-width: 650px;
color: #ffffff;
flex-shrink: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Добавляем тень для лучшей читаемости */
visibility: visible !important; /* ПРИНУДИТЕЛЬНАЯ ВИДИМОСТЬ */
opacity: 1 !important; /* ПРИНУДИТЕЛЬНАЯ ВИДИМОСТЬ */
display: block !important; /* ПРИНУДИТЕЛЬНАЯ ВИДИМОСТЬ */
}
.hero__title {
font-size: 64px;
max-width: 650px;
line-height: 1.1; /* КОМПАКТНАЯ ВЫСОТА СТРОК */
margin-bottom: 24px; /* отступ под заголовком */
}
.hero__subtitle {
font-size: 20px;
/* УБИРАЕМ white-space: nowrap ЧТОБЫ ПОДЗАГОЛОВОК ТОЖЕ ПЕРЕНОСИЛСЯ */
line-height: 1.4; /* ЧИТАЕМАЯ ВЫСОТА СТРОК */
margin-bottom: 40px; /* отступ под текстом */
}
.hero__buttons {
display: flex;
gap: 40px; /* отступ между кнопками */
}
.hero__video {
margin-left: 80px; /* УВЕЛИЧИВАЕМ ОТСТУП ДЛЯ СДВИГА ВИДЕО ВПРАВО */
flex: 0 0 auto;
display: flex;
align-items: center;
height: 80%;
/* убрали max-width: 50% чтобы видео не уменьшалось */
}
.hero__video-el {
width: 600px; /* ЕЩЁ УМЕНЬШАЕМ ДО 600px */
height: auto;
transform: scale(1.0); /* УБИРАЕМ МАСШТАБИРОВАНИЕ */
transform-origin: left center;
/* ОБРЕЗАЕМ ЛЕВУЮ СТОРОНУ ВИДЕО - ПОКАЗЫВАЕМ БОЛЬШЕ ПРАВОЙ ЧАСТИ */
object-position: 60% center; /* Максимально обрезаем левую, показываем центр-правую часть */
object-fit: cover;
}
/* Удалено: перенесено в диапазон 1366px-1599px */
/* --- Новый статичный хиро без видео --- */
.hero--static { position: relative; padding: 0; background: #ffffff; height: calc(100vh - var(--header-height)); min-height: 100%; margin-top: 0; border-top: none !important; }
.hero--static .hero__inner { display: block; padding: 0; max-width: none; width: 100%; margin: 0; height: 100%; }
.hero__content--center {
position: relative;
width: 100%; /* чтобы не учитывать ширину скроллбара и не давать горизонтальный скролл */
height: 100%;
background: transparent; /* изображение рендерим тегом ![]()
для надёжной отрисовки */
margin: 0;
padding: 0;
overflow: hidden; /* на случай субпиксельных артефактов */
}
.hero__content.hero__content--center { max-width: none; }
.hero__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: left bottom; }
.hero__cta { position: absolute; left: 50%; top: 70%; transform: translate(-50%, -50%); }
/* Пагинация (dots) для будущего слайдера фона */
.hero__pagination {
position: absolute;
left: 50%;
bottom: 23px;
transform: translateX(-50%);
display: flex;
gap: 17px;
align-items: center;
justify-content: center;
z-index: 5;
}
.hero__dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(217, 0, 27, 0.4);
border: 2px solid rgba(217, 0, 27, 0.6);
cursor: pointer;
transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.hero__dot:hover { transform: scale(1.05); background: rgba(217, 0, 27, 0.6); }
.hero__dot.is-active { background: #d9001b; border-color: #d9001b; }
@media (max-width: 667px) {
.hero__pagination { bottom: 18px; gap: 8px; }
.hero__dot { width: 8px; height: 8px; }
}
/* Заголовок "Основные направления" */
.directions-headline {
width: 100%;
display: flex;
justify-content: left;
align-items: center;
background: transparent;
}
.directions-headline__wrap {
height: auto;
margin-top: 4.375rem;
position: sticky;
align-self: start;
}
.directions-headline__title {
position: static;
width: 100%;
margin: 0;
color: #B4B4B4;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 900; /* Black */
font-size: clamp(4rem, 8vw, 11rem);
line-height: 1; /* 100% */
letter-spacing: 0;
text-transform: uppercase;
width: 100%;
}
/* Удалено: перенесено в диапазон 1366px-1599px */
@media (max-width: 992px) {
}
@media (max-width: 667px) {
.directions-headline { padding: 24px 0; }
.directions-headline__title { font-size: 56px; height: 120px; }
}
@media (max-width: 319px) {
.directions-headline__title { font-size: 48px; height: 108px; }
}
/* Отдельный размер подстроки для заголовка России */
.russia-headline .russia-subtitle { font-size: clamp(1.1rem, 2vw, 2.2rem) }
/* ========================================
ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ GRID-СИСТЕМЫ
======================================== */
/* Фичер-блоки направлений с новой grid-системой */
.directions-feature {
width: 100%;
padding: 48px 0;
}
/* Базовые стили для текста и медиа (переопределяются для grid-системы) */
.directions-feature__text {
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px 0;
}
.directions-feature__media {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Отключаем базовые стили для directions-feature (используем grid) */
.directions-feature .directions-feature__text {
padding: 0; /* Убираем padding для grid-системы */
}
.directions-feature .directions-feature__media {
overflow: visible; /* Разрешаем overflow для наложения */
}
/* Обновленные стили для grid-системы */
.df-title {
color: #d9001b;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 800; /* Extra Bold */
font-size: clamp(1.8rem, 2.8vw, 3.313rem);
line-height: 1.1;
text-transform: uppercase;
}
/* ========================================
УНИВЕРСАЛЬНАЯ РАСКЛАДКА ДЛЯ ВСЕХ DIRECTION-FEATURE БЛОКОВ
======================================== */
/* УДАЛЕНЫ: переменные transform больше не используются в новой системе */
/* ========================================
УНИВЕРСАЛЬНЫЕ СТИЛИ ДЛЯ ОБЫЧНЫХ БЛОКОВ (текст слева, изображение справа)
======================================== */
/* Медиа-блок для обычных блоков: 9 колонок справа */
.directions-feature:not(.directions-feature--reverse) .directions-feature__media {
grid-column: 4 / 13; /* Колонки 4-12 (9 колонок) */
grid-row: 1 / 4; /* Растягиваем на все 3 строки с текстом */
position: relative;
z-index: 1; /* Под заголовком */
display: block !important; /* Отключаем flex */
align-items: unset !important;
justify-content: unset !important;
}
/* Заголовок для обычных блоков: начинается с 1-го столбца, накладывается на изображение */
.directions-feature:not(.directions-feature--reverse) .df-title {
grid-column: 1 / 8; /* ИСПРАВЛЕНО: Начинается с 1-го столбца, занимает 7 колонок */
grid-row: 1; /* В той же строке что и изображение */
position: relative;
z-index: 2; /* Поверх изображения */
/* УДАЛЕН transform - заголовок теперь физически начинается с 1-го столбца */
margin-top: 2rem; /* Убираем отступ снизу для наложения */
align-self: start; /* Выравнивание по верху для наложения */
padding-right: 0.25rem; /* Небольшой отступ от изображения */
}
/* Описание для обычных блоков: под заголовком в той же grid-области */
.directions-feature:not(.directions-feature--reverse) .df-desc {
grid-column: 1 / 4;
grid-row: 2; /* Размещаем во второй строке */
align-self: start; /* Выравнивание по верху */
margin: 20px clamp(14px, 1vw, 65px) 0 0; /* Отступ от заголовка, сохраняем правый отступ */
font-size: clamp(13px, 1vw, 20px);
line-height: 1.4;
z-index: 3;
}
/* ========================================
УНИВЕРСАЛЬНЫЕ СТИЛИ ДЛЯ REVERSE БЛОКОВ (изображение слева, текст справа)
======================================== */
/* Медиа-блок для reverse блоков: 9 колонок слева */
.directions-feature--reverse .directions-feature__media {
grid-column: 1 / 10; /* Колонки 1-9 (9 колонок) */
grid-row: 1 / 4; /* Растягиваем на все 3 строки с текстом */
position: relative;
z-index: 1; /* Под заголовком */
display: block !important; /* Отключаем flex */
align-items: unset !important;
justify-content: unset !important;
}
/* Заголовок для reverse блоков: начинается с 6-го столбца, накладывается на изображение */
.directions-feature--reverse .df-title {
grid-column: 6 / 13; /* ИСПРАВЛЕНО: Занимает 7 колонок справа (6-12) */
grid-row: 1; /* В той же строке что и изображение */
position: relative;
z-index: 2; /* Поверх изображения */
/* УДАЛЕН transform - заголовок теперь физически в правильной позиции */
margin-top: 55px; /* Убираем отступ снизу для наложения */
align-self: start; /* Выравнивание по верху для наложения */
text-align: right; /* Выравнивание текста по правому краю */
padding-left: 20px; /* Небольшой отступ от изображения */
}
/* Описание для reverse блоков: под заголовком справа */
.directions-feature--reverse .df-desc {
grid-column: 10 / 13; /* Колонки 10-12 (3 колонки) */
grid-row: 2; /* Размещаем во второй строке */
align-self: start; /* Выравнивание по верху */
margin: 20px 0 0 clamp(3px, 1vw, 71px); /* Отступ от заголовка, сохраняем левый отступ */
font-size: clamp(13px, 1vw, 20px);
line-height: 1.4;
z-index: 3; /* Поверх изображения */
text-align: left; /* Выравнивание по левому краю */
}
/* Контейнер текста должен допускать overflow для наложения */
.directions-feature .directions-feature__text {
overflow: visible;
display: contents; /* Убираем flex-контейнер */
}
/* ========================================
АДАПТИВНЫЕ СТИЛИ ДЛЯ ВСЕХ DIRECTION-FEATURE БЛОКОВ
======================================== */
/* Отключаем наложение на планшетах и мобильных ≤1024px */
.df-desc {
margin: 0 clamp(15px, 5vw, 70px) 24px 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 400;
}
/* Стили для изображений в grid-системе */
.directions-feature__media img {
width: 100%;
height: auto;
max-width: 100%;
object-fit: cover;
border-radius: 8px;
}
/* Адаптивные стили для grid-системы directions */
/* Планшеты */
@media (min-width: 576px) and (max-width: 575px) {
.directions-feature__text.span-5,
.directions-feature__text.span-7,
.directions-feature__media.span-5,
.directions-feature__media.span-7 {
grid-column: span 6; /* Занимают всю ширину на планшетах (6 колонок) */
}
/* НЕ применяем к ship-секции - у неё свои правила */
.directions-feature__text.span-3,
.directions-feature__media.span-9 {
grid-column: span 6; /* Для ship-секции тоже 6 колонок */
}
}
/* Smartphone landscape (667px) согласно ТЗ */
@media (min-width: 576px) and (max-width: 575px) {
.directions-feature__text.span-5,
.directions-feature__text.span-7,
.directions-feature__media.span-5,
.directions-feature__media.span-7,
.directions-feature__text.span-3,
.directions-feature__media.span-9 {
grid-column: span 4; /* Занимают всю ширину (4 колонки) */
}
.df-desc {
font-size: 15px;
}
}
/* Smartphone portrait (319px) согласно ТЗ */
@media (max-width: 319px) {
.directions-feature__text.span-5,
.directions-feature__text.span-7,
.directions-feature__media.span-5,
.directions-feature__media.span-7,
.directions-feature__text.span-3,
.directions-feature__media.span-9 {
grid-column: span 2; /* Занимают всю ширину (2 колонки) */
}
.df-desc {
font-size: 14px;
}
}
/* Глобальные настройки для всех блоков */
.directions-feature .df-desc {
color: #717171;
}
/* УДАЛЕНЫ: старые переменные больше не используются в новой grid-системе */
/* Настраиваемая ширина конкретно для блока ПРОИЗВОДСТВО */
.directions-feature--prod .directions-feature__inner {
max-width: var(--prod-max-width, var(--df-max-width));
}
.directions-feature__media img {
width: 100%;
height: auto;
}
/* Вариант с изображением слева и текстом справа */
.directions-feature--reverse .directions-feature__inner {
grid-template-columns: 1fr 408px;
}
.directions-feature--reverse .directions-feature__text {
padding-left: 0;
padding-right: 16px;
}
.directions-feature--reverse .df-title { right: 0px; left: auto; text-align: right; }
/* Точные настройки заголовка для блока АЭРОКОСМИЧЕСКАЯ (правый край) */
.directions-feature--aero .df-title { right: var(--aero-title-right, 0px); left: auto; top: var(--aero-title-top, 0px); }
/* Удалено: перенесено в диапазон 1366px-1599px */
@media (min-width: 576px) and (max-width: 575px) {
.directions-feature__inner { grid-template-columns: 1fr; }
.directions-feature__text { order: 1; }
.directions-feature__media { order: 2; }
.df-title { font-size: clamp(1.8rem, 4.5vw, 2.125rem); position: static; margin-bottom: 16px; }
.directions-feature__text { padding-top: 0; }
}
@media (max-width: 667px) {
.directions-feature__inner { padding: 0 16px; }
.df-title { font-size: clamp(1.8rem, 4.5vw, 1.75rem); }
.df-desc { width: 100%; }
}
/* CTA кнопка (красная) */
.btn--cta {
display: inline-flex; align-items: center; justify-content: center;
background: #d9001b; color: #ffffff; border: 2px solid #d9001b;
border-radius: 10px; padding: 12px 22px; font-weight: 600;
transition: all .2s ease; text-decoration: none;
}
.hero .btn--cta {
/* индивидуальные стили только для кнопки в hero */
padding: 26px 55px;
border-radius: 6px;
text-shadow: none !important; /* без тени у текста кнопки */
}
.btn--cta:hover, .btn--cta:focus { background: #ffffff; color: #d9001b; border-color: #d9001b; border:solid 2px; opacity: 1 !important; }
.btn--cta:active { transform: scale(0.98); }
@media (max-width: 667px) {
.btn--cta { padding: 11px 18px; border-radius: 10px; font-size: 15px; }
}
@media (max-width: 900px) {
.hero__inner {
flex-direction: column; /* ВЕРТИКАЛЬНАЯ РАСКЛАДКА НА МОБИЛЬНЫХ */
text-align: center;
}
.hero__content {
max-width: 100%;
margin-bottom: 30px;
}
.hero__title {
font-size: 48px; /* УМЕНЬШАЕМ ШРИФТ НА МОБИЛЬНЫХ */
max-width: 100%;
white-space: normal; /* РАЗРЕШАЕМ ПЕРЕНОС НА МОБИЛЬНЫХ */
}
.hero__video-el {
max-width: 100%;
width: 500px; /* УМЕНЬШЕННЫЙ РАЗМЕР ДЛЯ МОБИЛЬНЫХ */
transform: scale(1.0); /* БЕЗ ДОПОЛНИТЕЛЬНОГО МАСШТАБИРОВАНИЯ */
/* СОХРАНЯЕМ ОБРЕЗКУ ЛЕВОЙ СТОРОНЫ И НА МОБИЛЬНЫХ */
object-position: 60% center;
object-fit: cover;
}
.hero__video {
margin-top: 0;
margin-left: 0; /* УБИРАЕМ ОТСТУПЫ НА МОБИЛЬНЫХ */
}
}
/* Мобильная адаптация footer: вертикальная компоновка блоков */
@media (max-width: 900px) {
.footer .footer-content {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 600px) {
.footer .footer-content {
grid-template-columns: 1fr !important;
}
}
/* Контроль наложения: иконки на главной не перекрывают видео */
@media (max-width: 900px) {
.hero__video { position: relative; z-index: 2; }
.icons-grid { position: relative; z-index: 1; }
}
/* Стили новостей для диапазона до 600px перенесены в news.css */
/* Доп. мобильная типографика 360–390px */
@media (max-width: 390px){
.hero__title { font-size: 34px; }
.hero__subtitle { font-size: 16px; }
.hero__buttons { gap: 14px; flex-direction: column; }
}
/* Карта регионов */
.map-section {
position: relative; /* для абсолютного позиционирования substat */
width: 100%;
height: auto; /* чтобы контейнер «рос» по содержимому */
background-color: #f8f9fa; /* тот же цвет что и остальная страница */
padding: 60px 0;
}
.map-stats {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto 40px;
gap: 20px;
}
@media (max-width: 768px) {
.map-stats {
flex-direction: column;
gap: 40px;
}
}
.stat-number {
font-size: 3.5rem;
font-weight: 700;
color: #0a306d;
margin-bottom: 8px;
}
.stat-label {
font-size: 1rem;
color: #2c3e5e;
}
/* === Развёрнутая зона для карты === */
.map-fullwidth {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
overflow: visible;
height: 70vh;
}
/* Оригинальные стили для map-wrapper (старая секция) */
.map-section #map-wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
.map-section #map-wrapper svg {
width: 100%;
height: 100%;
display: block;
}
/* Новые стили для map-wrapper в секции карты России */
.russia-map-section #map-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.russia-map-section #map-wrapper svg {
width: 100%;
height: 100%;
display: block;
}
/* УДАЛЕНО: Неиспользуемый комментарий */
/* Интерактивная карта: hover-эффект на регионы */
#map-wrapper svg path {
transition: fill 0.3s ease; /* плавный переход цвета */
cursor: pointer; /* указатель при наведении */
pointer-events: auto; /* обеспечиваем интерактивность регионов */
}
/* ОПТИМИЗИРОВАНО: Упрощенный комментарий */
/* Включаем pointer-events только для путей регионов */
#map-wrapper svg g#regions path {
pointer-events: auto !important;
cursor: pointer;
transition: fill 0.3s ease;
}
/* Обеспечиваем интерактивность всех элементов карты */
#map-wrapper svg * {
pointer-events: auto;
}
/* Пины компаний должны оставаться кликабельными над регионами */
#map-wrapper svg image.company-pin {
pointer-events: visiblePainted;
transform-box: fill-box;
transform-origin: 50% 100%;
}
/* Слой с пинами (если создан) — всегда поверх и интерактивный */
#map-wrapper svg g#kptm-company-pins-layer {
pointer-events: visiblePainted;
}
.russia-map-section #map-wrapper svg * {
pointer-events: auto; /* все элементы карты интерактивны */
}
/* Hover-подсветка только для регионов */
#map-wrapper svg g#regions path:hover {
fill: #d20d15 !important;
}
/* .map-tooltip — тултип для карты */
.map-tooltip {
position: absolute;
pointer-events: none;
background: rgba(0,0,0,0.75);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
display: none;
z-index: 9999;
}
/* === Popover стили === */
.company-popover {
animation: popin 0.27s cubic-bezier(.4,1.05,.51,.98);
box-sizing: border-box;
position: absolute;
z-index: 100000; /* повыше любых секций/оверлеев */
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(225, 229, 233, 0.8);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
padding: 1px 2px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
/* Адаптивность для разных размеров экрана */
max-width: clamp(30px, 4vw, 50px);
min-width: clamp(25px, 3vw, 35px);
left: -432px;
}
.company-popover__close {
position: absolute;
top: 10px;
right: 16px;
border: none;
background: none;
font-size: 25px;
color: #aaa;
cursor: pointer;
opacity: 0.7;
transition: color 0.18s;
}
.company-popover__close:hover { color: #d20d15; opacity: 1; }
.company-popover__name {
font-size: 21px;
font-weight: 700;
margin-bottom: 2px;
color: #183868;
}
.company-popover__city {
font-size: clamp(0.3rem, 0.6vw, 0.9rem);
font-weight: 600;
color: #183868;
text-align: center;
margin: 0;
line-height: 1.0;
}
.company-popover__arrow {
position: absolute;
left: -4px; /* Arrow positioned to the left of popover */
top: 24%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-right: 4px solid rgba(255, 255, 255, 0.95); /* Points leftwards to pin with transparency */
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
/* Стрелка для поповеров слева от пина (указывает вправо) */
.company-popover__arrow--left {
left: auto;
right: -4px; /* Arrow positioned to the right of popover */
border-right: none;
border-left: 4px solid rgba(255, 255, 255, 0.95); /* Points rightwards to pin with transparency */
}
.company-popover__row {
font-size: 15px;
color: #435078;
margin-bottom: 3px;
}
.company-popover a { color: #1257e8; text-decoration: underline dotted; }
@keyframes popin {
0% { opacity: 0; transform: scale(0.82) translateY(24px);}
100% { opacity: 1; transform: scale(1) translateY(0);}
}
/* Адаптивность для мобильных устройств */
@media (max-width: 667px) {
.company-popover {
max-width: clamp(25px, 6vw, 40px);
min-width: clamp(20px, 4vw, 30px);
}
.company-popover__city {
font-size: clamp(5px, 2vw, 6px);
}
.company-popover__arrow {
left: -3px;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-right: 3px solid rgba(255, 255, 255, 0.95);
}
.company-popover__arrow--left {
left: auto;
right: -3px;
border-right: none;
border-left: 3px solid rgba(255, 255, 255, 0.95);
}
}
/* === Цвета регионов карты: по умолчанию КРАСНЫЕ, при наведении СИНИЕ === */
.region,
.region-hovered,
.region:hover {
transition: fill 0.18s cubic-bezier(.65,0,.35,1);
}
/* Базовый цвет всех регионов */
.region {
fill: #d9001b !important; /* красный по умолчанию */
}
/* При наведении окрашиваем синим */
.region-hovered,
.region:hover {
fill: #153D6A !important; /* синий при ховере */
cursor: pointer;
}
/* Синий цвет для указанных регионов */
#region-khabarovsk,
#region-primor_ye,
#region-Krasnoyarsk,
#region-Novosibirsk,
#region-Altay,
#region-Sverdlovsk,
#region-Perm_,
#region-Chelyabinsk,
#region-Udmurt,
#region-Mariy-El,
#region-Rostov,
#region-Volgograd,
#region-Voronezh,
#region-Saratov,
#region-Tambov,
#region-Lipetsk,
#region-Arkhangel_sk,
#region-Leningrad,
#region-Kaliningrad,
#region-Tver_,
#region-Moskva,
#region-Vladimir,
#region-Ivanovo,
#region-Yaroslavl_,
#region-Ul_yanovsk,
#region-Samara,
#region-Tatarstan,
#region-Nizhegorod {
fill: rgb(21, 61, 106) !important; /* синий цвет */
}
/* === Анимация пинов компаний === */
.company-pin {
transition: transform 0.23s cubic-bezier(.7,1.6,.45,.93);
will-change: transform;
pointer-events: auto;
z-index: 100; /* пины выше всех других элементов */
cursor: pointer;
}
.company-pin--active {
transform: scale(1.1);
filter: drop-shadow(0 0 7px #2a6bfc33);
z-index: 101; /* активный пин еще выше */
}
/* Доп. усиление для специфичности селектора image.company-pin */
image.company-pin.company-pin--active {
transform: scale(1.1);
filter: drop-shadow(0 0 7px #2a6bfc33);
}
/* === КРУГОВОЙ СЧЁТЧИК === */
.circle-counter {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 220px;
margin: 0 auto;
font-family: 'Roboto', Arial, sans-serif;
user-select: none;
flex: 1;
}
.circle-counter__svg {
transform: rotate(-90deg);
margin-bottom: -16px;
}
.circle-counter__bg {
opacity: 0.15;
}
.circle-counter__progress {
transition: stroke-dashoffset 2s cubic-bezier(0.77,0,0.18,1);
}
.circle-counter__number {
font-size: 52px;
color: #0a306d;
font-weight: 700;
margin-top: -116px;
letter-spacing: -1px;
transition: color .2s;
}
.circle-counter__caption {
font-size: 20px;
margin-top: 32px;
color: #2c3e5e;
text-align: center;
font-weight: 500;
text-transform: none;
letter-spacing: 0.02em;
}
@media (max-width: 520px) {
.circle-counter { width: 100vw; max-width: 300px; }
.circle-counter__svg { width: 140px; height: 140px; }
.circle-counter__number { font-size: 40px; margin-top: -88px; }
.circle-counter__caption { font-size: 15px; margin-top: 22px; }
}
/* ========== ГЛОБАЛЬНЫЕ СТИЛИ СТРАНИЦЫ ========= */
/* УДАЛЕНО: Дублированный body блок объединен с основным выше */
/* ========== НОВЫЙ БЛОК ДЛЯ КОНТЕНТА (700PX) ========= */
.content-block-700 {
width: 100%;
height: 700px;
background: #f8f9fa; /* теперь тот же цвет что и у статистики */
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.content-block-700 .container {
max-width: 1200px;
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: flex-start;
justify-content: center;
}
.content-wrapper {
width: 100%;
text-align: center;
padding-top: 80px;
position: relative; /* для корректного перекрытия фонового блока ниже */
z-index: 2;
}
.section-title {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 32px;
font-weight: 500; /* medium */
color: #0A306D; /* читаемый фирменный цвет */
margin: 0;
line-height: 1.2;
}
/* УДАЛЕНО: Стили section-description перенесены в content-typography.css для унификации */
/* ========== ОБЛАСТЬ ПРОКРУТКИ ИНДУСТРИЙ ========= */
.industries-scroll-area {
width: 100vw;
min-width: 1920px; /* минимальная ширина для больших экранов */
height: 310px;
background-color: #AAC6D9;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
overflow: hidden;
max-width: none;
}
.industries-container {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
}
.industries-track {
/* ОПТИМИЗИРОВАННЫЙ: Объединенные стили из всех дублированных блоков */
display: flex;
gap: 20px;
height: 100%;
align-items: center;
padding: 0 20px;
max-width: none !important; /* исключение из общих ограничений */
/* Анимация и производительность - ОТКЛЮЧЕНА ПО УМОЛЧАНИЮ */
-webkit-animation: none;
animation: none;
will-change: transform;
/* GPU ускорение и оптимизация */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
/* Анимация при прокрутке - ОТКЛЮЧЕНА ПО УМОЛЧАНИЮ */
opacity: 1;
transition: opacity var(--animation-duration-normal) ease 0.8s;
/* убран отладочный бордер */
}
/* Приостановка анимации при hover */
.industries-scroll-area:hover .industries-track {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
/* Fallback для браузеров без поддержки gap */
@supports not (gap: 20px) {
.industries-track {
gap: 0;
}
.industry-card {
margin-right: 20px;
}
.industry-card:last-child {
margin-right: 0;
}
}
/* Поддержка reduced motion - сохранено для accessibility */
@media (prefers-reduced-motion: reduce) {
.industries-track {
animation: none !important;
}
.industry-card {
transition: none !important;
}
.industry-image {
transition: none !important;
}
/* Индивидуальные настройки для конкретных картинок при reduced motion */
.industry-image[src*="Defense_industry.jpg"] {
filter: brightness(0.8) contrast(1.1) !important;
transition: none !important;
}
.industry-image[src*="Machine_tool_construction.jpg"] {
filter: brightness(0.7) contrast(1.1) !important;
transition: none !important;
}
.industry-text {
transition: none !important;
}
}
/* Бесконечная анимация прокрутки */
@keyframes infiniteScroll {
0% {
transform: translateX(0) translateZ(0);
}
100% {
transform: translateX(-50%) translateZ(0); /* перемещаем на половину (один набор картинок) */
}
}
/* Webkit префиксы для старых браузеров */
@-webkit-keyframes infiniteScroll {
0% {
-webkit-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0);
}
100% {
-webkit-transform: translateX(-50%) translateZ(0);
transform: translateX(-50%) translateZ(0);
}
}
/* УДАЛЕНО: Webkit префиксы объединены в основной блок .industries-track */
.industry-card {
position: relative;
width: 380px;
height: 250px;
flex-shrink: 0;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease;
}
.industry-card:hover {
transform: scale(1.02);
}
.industry-card:hover .industry-image {
opacity: 1; /* при наведении картинка становится полностью видимой */
filter: none;
}
/* Hover эффекты для конкретных картинок */
.industry-card:hover .industry-image[src*="Defense_industry.jpg"] {
filter: none; /* полная яркость при hover */
}
.industry-card:hover .industry-image[src*="Machine_tool_construction.jpg"] {
filter: none; /* полная яркость при hover */
}
.industry-card:hover .industry-text {
opacity: 0; /* при наведении текст исчезает */
}
.industry-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 18px;
opacity: 1;
filter: brightness(0.64) contrast(1.1); /* затемнение 64% от исходной яркости */
transition: opacity 0.3s ease, filter 0.3s ease;
will-change: opacity, filter;
transform: translateZ(0); /* hardware acceleration */
/* ИСПРАВЛЕНО: НОВЫЕ PERFORMANCE ОПТИМИЗАЦИИ */
content-visibility: auto; /* Render только когда видимо */
contain-intrinsic-size: 300px 200px; /* Prevent layout shift */
image-rendering: optimizeQuality;
/* Убраны loading и decoding - это HTML атрибуты, не CSS свойства */
}
.industry-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 32px;
font-weight: 700; /* bold */
color: #FFFFFF;
text-align: center;
line-height: 1.2;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
z-index: 2;
width: 90%;
word-wrap: break-word;
opacity: 1; /* текст изначально видим */
transition: opacity 0.3s ease;
will-change: opacity;
}
/* Индивидуальные настройки прозрачности для конкретных картинок */
/* Обороно-промышленный комплекс - 80% яркости */
.industry-image[src*="Defense_industry.jpg"] {
filter: brightness(0.8) contrast(1.1);
}
/* Станкостроение - 70% яркости */
.industry-image[src*="Machine_tool_construction.jpg"] {
filter: brightness(0.7) contrast(1.1);
}
/* Адаптивность для нового блока */
@media (max-width: 900px) {
.content-block-700 {
height: 500px;
}
.content-wrapper {
padding-top: 60px;
}
.section-title {
font-size: 28px;
}
/* УДАЛЕНО: Стили section-description перенесены в content-typography.css */
/* Адаптивность для области индустрий на планшетах */
.industries-scroll-area {
height: 250px;
}
.industry-card {
width: 300px;
height: 200px;
}
.industry-text {
font-size: 24px;
}
/* Адаптивность hover эффектов для планшетов */
.industry-card:hover .industry-image {
filter: brightness(0.7) contrast(1.05); /* мягкое затемнение на планшетах при hover */
}
/* Индивидуальные hover эффекты для конкретных картинок на планшетах */
.industry-card:hover .industry-image[src*="Defense_industry.jpg"] {
filter: brightness(0.85) contrast(1.05); /* слегка ярче для обороны на планшетах */
}
.industry-card:hover .industry-image[src*="Machine_tool_construction.jpg"] {
filter: brightness(0.75) contrast(1.05); /* слегка ярче для станкостроения на планшетах */
}
}
@media (max-width: 600px) {
.content-block-700 {
height: 400px;
}
.content-wrapper {
padding-top: 40px;
}
.section-title {
font-size: 24px;
}
/* УДАЛЕНО: Стили section-description перенесены в content-typography.css */
/* Адаптивность для области индустрий на мобильных */
.industries-scroll-area {
height: 200px;
}
.industry-card {
width: 250px;
height: 160px;
}
.industry-text {
font-size: 18px;
text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8);
}
.industries-track {
gap: 15px;
padding: 0 15px;
}
/* На мобильных hover эффекты менее выражены */
.industry-card:hover .industry-image {
filter: brightness(0.8) contrast(1.02); /* очень мягкое затемнение на мобильных */
}
/* Индивидуальные hover эффекты для конкретных картинок на мобильных */
.industry-card:hover .industry-image[src*="Defense_industry.jpg"] {
filter: brightness(0.85) contrast(1.02); /* слегка ярче для обороны на мобильных */
}
.industry-card:hover .industry-image[src*="Machine_tool_construction.jpg"] {
filter: brightness(0.8) contrast(1.02); /* слегка ярче для станкостроения на мобильных */
}
/* Отключаем hover на touch устройствах */
@media (hover: none) {
.industry-card:hover {
transform: none;
}
.industry-card:hover .industry-image {
filter: brightness(0.64) contrast(1.1); /* возвращаем исходное затемнение 64% */
}
/* Индивидуальные настройки для конкретных картинок на touch устройствах */
.industry-card:hover .industry-image[src*="Defense_industry.jpg"] {
filter: brightness(0.8) contrast(1.1); /* возвращаем 80% для обороны */
}
.industry-card:hover .industry-image[src*="Machine_tool_construction.jpg"] {
filter: brightness(0.7) contrast(1.1); /* возвращаем 70% для станкостроения */
}
.industry-card:hover .industry-text {
opacity: 1; /* текст остается видимым на touch устройствах */
}
}
}
/* УБРАНО: Дублированные медиа-запросы могут конфликтовать с основными стилями */
/* 🎬 РЕВОЛЮЦИЯ: WebM ВИДЕО ДЛЯ INDUSTRIES HOVER ЭФФЕКТ */
.industry-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 18px;
/* ПРЕВЬЮ ВИДИМО ПО УМОЛЧАНИЮ - ЛЕГКОЕ ЗАТЕМНЕНИЕ */
filter: brightness(0.7) contrast(1.0) saturate(0.9);
opacity: 1;
z-index: 1;
transition: filter 0.8s ease, transform 0.4s ease;
/* Performance оптимизации для видео */
will-change: filter, transform;
transform: translateZ(0); /* GPU acceleration */
}
/* 🔥 АКТИВАЦИЯ ВИДЕО ПРИ HOVER - УБИРАЕМ ЗАТЕМНЕНИЕ */
.industry-card:hover .industry-video {
filter: brightness(1) contrast(1.1) saturate(1.2); /* Яркость и насыщенность */
transform: scale(1.03) translateZ(0); /* Легкий zoom эффект */
z-index: 2;
}
/* Текст поверх видео */
.industry-card:hover .industry-text {
z-index: 3; /* Поверх видео */
text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.9); /* Более контрастная тень для видео */
}
/* Performance режим - отключаем видео на слабых устройствах */
@media (prefers-reduced-motion: reduce) {
.industry-video {
filter: brightness(0.2) !important; /* Сильное затемнение вместо display:none */
}
}
/* На мобильных ослабляем эффекты для экономии батареи */
@media (max-width: 768px) {
.industry-video {
filter: brightness(0.5) contrast(0.9); /* Менее агрессивное затемнение */
transition: filter 0.4s ease; /* Быстрее переходы */
}
.industry-card:hover .industry-video {
transform: none; /* Убираем zoom на мобильных */
}
}
/* ========== СЕКЦИЯ КАРТЫ РОССИИ ========= */
.russia-map-section {
width: 100%;
padding-top: 20px; /* отступ 140px от статистики */
padding-bottom: 80px;
background-color: #f8f9fa;
/* CMS READY: переменные для легкой настройки */
--russia-section-padding-top: 140px;
--russia-section-padding-bottom: 80px;
--russia-section-bg: #f8f9fa;
--russia-stats-top-offset: 110px;
--russia-header-max-width: 1200px;
}
.russia-map-section .container {
width: 100%;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
margin: 0 auto;
box-sizing: border-box;
opacity: 1 !important;
visibility: visible !important;
}
.russia-header {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 60px;
width: 100%;
max-width: var(--russia-header-max-width, 1200px); /* центральный контентный блок */
margin-left: auto;
margin-right: auto;
position: relative;
/* CMS READY: легко настраиваемые параметры */
}
.russia-title-block {
flex: 0 0 auto;
}
.russia-title {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 64px;
font-weight: 900; /* extra bold */
color: #142f5c;
margin: 0;
line-height: 1.1;
display: inline; /* в одну строчку с подзаголовком */
}
.russia-subtitle {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 24px;
font-weight: 800; /* regular */
color: #B4B4B4;
margin: 0;
line-height: 1.2;
white-space: nowrap; /* в одну строчку */
display: inline; /* в одну строчку с заголовком */
margin-left: 0px; /* отступ от "Россия" */
}
.russia-stats-block {
position: absolute;
top: var(--russia-stats-top-offset, 110px); /* отступ 110px вниз от заголовка */
right: 0; /* выровнять по правому краю контейнера 1200px */
text-align: left; /* выравниваем по левому краю - "50+" начинается где "Регионов присутствия" */
z-index: 10; /* над картой, но не блокируя её */
pointer-events: none; /* не блокируем клики по карте */
/* CMS READY: легко изменяемые параметры позиционирования */
}
.russia-stat-number {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 64px;
font-weight: 900; /* extra bold */
color: #142f5c;
margin: 0 0 4px 0;
line-height: 1.1;
pointer-events: auto; /* разрешаем взаимодействие с самим текстом */
}
.russia-stat-text {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 20px;
font-weight: 400; /* regular */
color: #5D5B5B;
margin: 0;
line-height: 1.2;
pointer-events: auto; /* разрешаем взаимодействие с самим текстом */
}
.russia-map-container {
width: 100%;
display: flex;
justify-content: center;
margin-top: -20px; /* немного поднимаем карту для лучшего наложения */
position: relative;
z-index: 1; /* карта под текстом, но интерактивная */
}
.russia-map-wrapper {
width: 1384px;
height: 872px;
max-width: 100%;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
#map-wrapper {
width: 100%;
height: 100%;
position: relative;
}
#map-wrapper svg {
width: 100%;
height: 100%;
display: block;
}
.russia-cta {
width: 100%;
display: flex;
justify-content: center;
}
.russia-btn {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 15px;
font-weight: 600; /* semi-bold */
padding: 0 130px;
height: 52px;
border: 2px solid transparent; /* изначально прозрачная граница для избежания "прыжков" */
}
.russia-btn:hover {
border: 2px solid #d9001b; /* граница при наведении */
}
/* Адаптивность для секции карты России */
@media (max-width: 1400px) {
.russia-map-wrapper {
width: 95%;
height: auto;
aspect-ratio: 1384 / 872; /* сохраняем пропорции карты */
}
.russia-header {
max-width: 95%;
}
.russia-stats-block {
top: 90px; /* уменьшаем отступ пропорционально размеру шрифта */
}
.russia-title {
font-size: 56px;
}
.russia-subtitle {
font-size: 20px;
}
.russia-stat-number {
font-size: 56px;
}
}
@media (max-width: 900px) {
.russia-map-section .container {
padding: 0 30px;
}
.russia-header {
flex-direction: column;
gap: 40px;
text-align: center;
align-items: center;
position: static; /* убираем absolute позиционирование */
}
.russia-title-block {
text-align: center;
}
.russia-stats-block {
position: static; /* убираем absolute позиционирование */
text-align: center; /* на планшетах по центру для лучшей читаемости */
pointer-events: auto; /* разрешаем все взаимодействия */
}
.russia-map-container {
margin-top: 0; /* убираем отрицательный отступ на планшетах */
}
.russia-stats-block {
top: 70px; /* еще меньший отступ для планшетов */
}
.russia-title {
font-size: 48px;
}
.russia-subtitle {
font-size: 20px;
}
.russia-stat-number {
font-size: 48px;
}
.russia-stat-text {
font-size: 18px;
}
.russia-map-wrapper {
width: 90%;
height: auto;
aspect-ratio: 1384 / 872;
min-height: 400px;
}
}
@media (max-width: 600px) {
.russia-map-section {
padding-top: 80px; /* еще меньший отступ для мобильных */
padding-bottom: 40px;
}
.russia-header {
gap: 30px;
position: static; /* убираем relative позиционирование */
}
.russia-title-block {
text-align: center;
}
.russia-stats-block {
position: static; /* убираем absolute позиционирование */
text-align: center; /* на мобильных по центру для лучшей читаемости */
pointer-events: auto; /* разрешаем все взаимодействия */
}
.russia-map-container {
margin-top: 0; /* убираем отрицательный отступ на мобильных */
}
.russia-title {
font-size: 36px;
}
.russia-subtitle {
font-size: 18px;
display: block; /* перенос на новую строку на мобильных */
margin-left: 0;
margin-top: 8px;
}
.russia-stat-number {
font-size: 36px;
}
.russia-stat-text {
font-size: 16px;
}
.russia-map-wrapper {
width: 95%;
height: auto;
aspect-ratio: 1384 / 872;
min-height: 300px;
}
.russia-btn {
font-size: 14px;
padding: 0 30px;
height: 48px;
}
}
/* ========== СЕКЦИЯ НОВОСТЕЙ ========= */
.news-section {
width: 100%;
padding-top: var(--news-section-padding-top, 100px); /* уменьшенный отступ от кнопки */
padding-bottom: var(--news-section-padding-bottom, 80px);
background-color: var(--news-section-bg, #f8f9fa);
/* CMS READY: переменные для легкой настройки через CMS */
--news-section-padding-top: 0px;
--news-section-padding-bottom: 80px;
--news-section-bg: #f8f9fa;
--news-grid-gap: 2px; /* уменьшили отступы между карточками */
--news-card-width: auto; /* адаптивная ширина карточек */
--news-card-image-height: 280px;
--news-card-border-radius: 36px;
--news-label-color: #657E9C;
--news-title-color: #142f5c;
--news-card-title-color: #142f5c;
--news-date-color: #657E9C;
}
/* ========== СОСТОЯНИЯ НОВОСТЕЙ ========= */
.no-news-message {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.no-news-message h3 {
font-family: 'Inter', sans-serif;
font-size: 24px;
font-weight: 600;
color: #142f5c;
margin: 0 0 15px 0;
}
.no-news-message p {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #657E9C;
margin: 0;
}
.news-error {
grid-column: 1 / -1;
margin: 20px 0;
}
.error-message {
text-align: center;
padding: 40px 20px;
background: #fff5f5;
border: 2px solid #fed7d7;
border-radius: 20px;
}
.error-message h3 {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 600;
color: #c53030;
margin: 0 0 10px 0;
}
.error-message p {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #742a2a;
margin: 0 0 20px 0;
}
.retry-btn {
background: #c53030;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s ease;
}
.retry-btn:hover {
background: #9b2c2c;
}
/* Рекомендуемая новость - дополнительные стили */
.featured-news__meta {
display: flex;
align-items: center;
gap: 15px;
margin: 15px 0;
}
.featured-news__category {
background: #0A306D;
color: #ffffff;
padding: 6px 12px;
border-radius: 15px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
}
.featured-news__date {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #657E9C;
}
/* ========== ДЕТАЛЬНАЯ СТРАНИЦА НОВОСТИ ========= */
.breadcrumb {
margin-bottom: 30px;
}
.breadcrumb-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 14px;
}
.breadcrumb-item {
display: flex;
align-items: center;
}
.breadcrumb-item:not(:last-child)::after {
content: '→';
margin: 0 10px;
color: #657E9C;
}
.breadcrumb-item a {
color: #0A306D;
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb-item a:hover {
color: #142f5c;
}
.breadcrumb-item.active {
color: #657E9C;
}
.news-detail {
grid-column: 2 / span 10;
width: 100%;
margin-bottom: 60px;
}
/* Responsive grid positioning for news detail */
@media (max-width: 768px) {
.news-detail {
grid-column: 1 / span 6; /* Use all 6 columns on tablets */
}
.news-detail__header-grid {
grid-template-columns: 1fr;
gap: 16px;
text-align: center;
}
.news-detail__category {
justify-self: center;
max-width: 200px;
}
.news-detail__title {
font-size: 28px;
}
.news-detail__date-container {
align-items: center;
text-align: center;
}
}
@media (max-width: 667px) {
.news-detail__title {
font-size: 24px;
}
}
@media (max-width: 319px) {
.news-detail {
grid-column: 1 / span 2; /* Use all 2 columns on portrait phones */
}
.news-detail__title {
font-size: 20px;
}
}
.news-detail__header {
margin-bottom: 40px;
}
.news-detail__header-grid {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
gap: 24px;
align-items: center;
padding-top: 2em;
}
.news-detail__category {
background: rgba(247, 5, 24, 0.1);
border-radius: 0 10px 10px 0;
font-family: 'Inter', sans-serif;
color: #000000;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
padding: 8px 16px;
}
.news-detail__category-placeholder {
min-height: 40px;
}
.news-detail__title {
font-family: 'Inter', sans-serif;
font-size: 36px;
font-weight: 700;
color: #142f5c;
line-height: 1.2;
margin: 0;
text-align: center;
}
.news-detail__date-container {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
padding-right: 1em;
}
.news-detail__date-label {
font-family: 'Inter', sans-serif;
font-size: clamp(0.8rem, 0.9vw, 1rem);
color: #657E9C;
margin-bottom: 4px;
}
.news-detail__date-value {
font-family: 'Inter', sans-serif;
font-size: clamp(0.9rem, 1vw, 1.25rem);
color: #142f5c;
font-weight: 500;
}
.news-detail__meta {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.news-detail__category {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
}
.news-detail__date {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #657E9C;
}
.news-detail__views {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #657E9C;
}
.news-detail__title {
font-family: 'Inter', sans-serif;
font-size: 36px;
font-weight: 700;
color: #142f5c;
line-height: 1.2;
margin: 0 0 20px 0;
}
.news-detail__excerpt {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 400;
color: #657E9C;
line-height: 1.5;
margin: 0;
}
.news-detail__image-wrapper {
margin-bottom: 40px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.news-detail__image {
width: 80%;
object-fit: cover;
display: block;
}
.news-detail__content {
font-family: 'Inter', sans-serif !important;
font-size: 18px;
line-height: 1.7;
color: #333333;
margin-bottom: 40px;
}
/* Сбрасываем возможные инлайновые шрифты внутри контента */
.news-detail__content,
.news-detail__content * {
font-family: inherit !important;
}
.news-detail__content h2,
.news-detail__content h3,
.news-detail__content h4 {
color: #142f5c;
margin: 30px 0 20px 0;
}
.news-detail__content h2 {
font-size: 28px;
font-weight: 600;
}
.news-detail__content h3 {
font-size: 24px;
font-weight: 600;
}
.news-detail__content h4 {
font-size: 20px;
font-weight: 600;
}
.news-detail__content p {
margin: 0 0 20px 0;
}
.news-detail__content ul,
.news-detail__content ol {
margin: 20px 0;
padding-left: 30px;
}
.news-detail__content li {
margin-bottom: 8px;
}
.news-detail__content blockquote {
border-left: 4px solid #0A306D;
padding-left: 20px;
margin: 30px 0;
font-style: italic;
color: #657E9C;
}
.news-detail__footer {
grid-column: 2 / span 10;
border-top: 1px solid #e9ecef;
padding-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.news-detail__author {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #142f5c;
font-weight: 500;
}
.news-detail__share {
display: flex;
align-items: center;
gap: 15px;
}
.share-label {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #657E9C;
}
.share-buttons {
display: flex;
gap: 10px;
}
.share-btn {
padding: 8px 16px;
border-radius: 8px;
text-decoration: none;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
cursor: pointer;
border: none;
background: none;
}
.share-btn--telegram {
background: #0088cc;
color: white;
}
.share-btn--telegram:hover {
background: #006699;
}
.share-btn--vk {
background: #4680c2;
color: white;
}
.share-btn--vk:hover {
background: #3a6ca8;
}
.share-btn--copy {
background: #f8f9fa;
color: #142f5c;
border: 1px solid #e9ecef;
}
.share-btn--copy:hover {
background: #e9ecef;
}
/* Похожие новости */
.related-news {
margin: 60px 0;
}
.related-news__title {
font-family: 'Inter', sans-serif;
font-size: 28px;
font-weight: 700;
color: #142f5c;
margin: 0 0 30px 0;
text-align: center;
}
.related-news__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.related-news__card {
background: transparent;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.related-news__card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.related-news__link {
text-decoration: none;
color: inherit;
display: block;
}
.related-news__image {
height: 160px;
overflow: hidden;
}
.related-news__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.related-news__card:hover .related-news__image img {
transform: scale(1.05);
}
.related-news__content {
padding: 20px;
}
.related-news__title {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 600;
color: #142f5c;
line-height: 1.4;
margin: 0 0 10px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2; /* стандартное свойство для совместимости */
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-news__date {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #657E9C;
}
/* Навигация назад */
.back-navigation {
text-align: center;
margin: 40px 0;
}
.back-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: #f8f9fa;
color: #142f5c;
text-decoration: none;
border-radius: 12px;
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.back-btn:hover {
background: #e9ecef;
transform: translateX(-2px);
}
/* Состояния загрузки и ошибок */
.loading-state,
.error-state {
text-align: center;
padding: 80px 20px;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #0A306D;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error-state h1 {
font-family: 'Inter', sans-serif;
font-size: 32px;
font-weight: 700;
color: #c53030;
margin: 0 0 20px 0;
}
.error-state p {
font-family: 'Inter', sans-serif;
font-size: 18px;
color: #657E9C;
margin: 0 0 30px 0;
}
.error-actions {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
/* Уведомления */
.notification {
position: fixed;
top: 20px;
right: 20px;
background: #0A306D;
color: white;
padding: 15px 20px;
border-radius: 8px;
font-family: 'Inter', sans-serif;
font-size: 14px;
z-index: 1000;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Адаптивность */
@media (max-width: 768px) {
.news-detail__title {
font-size: 28px;
}
.news-detail__excerpt {
font-size: 18px;
}
.news-detail__content {
font-size: 16px;
}
.news-detail__footer {
flex-direction: column;
align-items: flex-start;
}
.related-news__grid {
grid-template-columns: 1fr;
}
}
.news-section .container {
width: 100%;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
margin: 0 auto;
box-sizing: border-box;
opacity: 1 !important;
visibility: visible !important;
}
.news-header {
text-align: left;
margin-bottom: 40px; /* отступ до блоков новостей */
margin-left: 78px; /* отступ = ширина кнопки (48px) + gap (30px) */
}
.news-label {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 20px;
font-weight: 400; /* regular */
color: var(--news-label-color, #657E9C);
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 32px 0; /* отступ 32px до следующего заголовка */
line-height: 1.2;
}
.news-title {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 36px;
font-weight: 700; /* bold */
color: var(--news-title-color, #142f5c);
margin: 0;
line-height: 1.2;
}
.news-grid-container {
display: flex;
align-items: center;
position: relative;
margin: 4rem auto 0;
width: 100%;
box-sizing: border-box;
}
.news-section .news-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* ИЗМЕНЕНО: 2 колонки по умолчанию */
gap: var(--news-grid-gap, 41px);
justify-content: left; /* центрируем сетку */
flex: 1;
width: 100%;
}
/* Медиа-запросы для разных диапазонов */
@media (min-width: 1440px) {
.news-section .news-grid {
grid-template-columns: repeat(4, 1fr); /* 4 колонки для больших экранов */
}
}
@media (min-width: 1024px) and (max-width: 1439px) {
.news-section .news-grid {
grid-template-columns: repeat(3, 1fr); /* 3 колонки для средних экранов */
}
}
/* СПЕЦИАЛЬНЫЕ СТИЛИ ДЛЯ ДИАПАЗОНА 768-1023px: ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА С 2 КАРТОЧКАМИ */
@media (min-width: 768px) and (max-width: 1023px) {
html body .news-section .news-grid-container {
overflow: hidden; /* Скрываем переполнение контейнера */
position: relative;
width: 100%;
/* Ограничиваем ширину для показа только 2 карточек */
max-width: calc(100% - 0px); /* Полная ширина контейнера */
}
html body .news-section .news-grid {
display: flex !important; /* Принудительно используем flex */
grid-template-columns: none !important; /* Отключаем grid */
gap: 20px !important; /* Отступ между карточками */
overflow-x: auto; /* Горизонтальная прокрутка */
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* Принудительно устанавливаем ширину больше контейнера для прокрутки */
width: max-content !important;
min-width: 100% !important;
/* Скрываем скроллбар */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
/* Скрываем скроллбар в WebKit */
html body .news-section .news-grid::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
html body .news-section .news-grid .news-card {
flex: 0 0 calc(50% - 10px) !important; /* Каждая карточка занимает 50% минус половина gap */
min-width: calc(50% - 10px) !important;
max-width: calc(50% - 10px) !important;
scroll-snap-align: start;
width: calc(50% - 10px) !important; /* Принудительная ширина */
}
/* КРИТИЧЕСКОЕ ПЕРЕОПРЕДЕЛЕНИЕ для карточек с анимацией */
html body .news-section .news-grid .news-card.child-animate {
flex: 0 0 calc(50% - 10px) !important; /* Принудительно 50% ширины */
min-width: calc(50% - 10px) !important;
max-width: calc(50% - 10px) !important;
width: calc(50% - 10px) !important; /* Принудительная ширина */
}
}
@media (max-width: 767px) {
.news-section .news-grid {
grid-template-columns: 1fr; /* 1 колонка для мобильных */
}
}
.news-nav-btn {
width: 48px;
height: 48px;
border-radius: 50%;
}
/* Стили для ошибок валидации чекбокса */
.form-checkbox.error {
border: 1px solid #ff0000 !important;
border-radius: 4px;
padding: 8px;
background-color: rgba(255, 0, 0, 0.05);
}
.form-checkbox.error .form-checkbox-text {
color: #ff0000 !important;
}
.form-checkbox.error .form-checkbox-custom {
border-color: #ff0000 !important;
}
/* Сообщения об ошибках для чекбоксов */
.form-checkbox + .field-error {
display: block;
color: #ff0000;
font-size: 14px;
margin-top: 4px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #ffffff;
border: 2px solid #e9ecef;
color: #657E9C;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.news-nav-btn:hover {
background: #142f5c;
color: #ffffff;
border-color: #142f5c;
box-shadow: 0 4px 15px rgba(20, 47, 92, 0.3);
}
.news-nav-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background: #f8f9fa;
color: #bbb;
}
.news-nav-btn:disabled:hover {
background: #f8f9fa;
color: #bbb;
border-color: #e9ecef;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.news-section .news-card {
display: flex;
flex-direction: column;
width: 100%; /* карточка занимает всю доступную ширину */
max-width: 480px; /* максимальная ширина карточки */
background: #ffffff; /* карточка с белым фоном */
text-decoration: none;
border-radius: 7px;
padding-top: 20px;
min-height: 490px; /* фиксируем высоту, чтобы низ всегда прижимался */
transition: filter 0.2s ease;
/* Убрали тень, используем лёгкий блюр для отделения от фона */
filter: blur(0px);
}
.news-section .news-grid .news-card:hover { transform: none; background: #ffffff !important; filter: blur(0px); }
/* 🔧 УБИРАЕМ ФОНЫ ДОЧЕРНИХ ЭЛЕМЕНТОВ ПРИ HOVER */
.news-section .news-grid .news-card:hover .news-image-wrapper {
background-color: transparent !important;
}
.news-section .news-grid .news-card:hover .news-card-title {
background-color: transparent !important;
}
.news-section .news-grid .news-card:hover .news-date {
background-color: transparent !important;
}
.news-image-wrapper {
border-radius: 7px;
overflow: hidden;
/* белые отступы сверху и справа, как в макете */
margin: 10px 42px 16px; /* top right bottom left */
min-height: 47%;
}
.news-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% center; /* сдвигаем изображение значительно левее, чтобы текст "Сделано в России" был виден */
display: block;
transition: transform 0.3s ease;
}
.news-card:hover .news-image {
transform: none; /* убираем эффект увеличения изображения */
}
.news-card-title {
margin: 0px 9% 12% 11%;
font-family: 'Inder', sans-serif;
font-weight: 400;
font-size: 21.48px;
line-height: 32.21px;
letter-spacing: 0;
color: #000;
/* Разрешаем перенос текста на 4 строки */
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* Устанавливаем высоту для 4 строк */
height: calc(32.21px * 4);
line-height: 32.21px;
}
.news-card-row {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100% - 100px); /* ширина с учетом боковых отступов */
max-width: 422px; /* максимальная ширина строки */
margin: 0 50px 22px; /* добавили небольшой нижний отступ */
margin-top: auto; /* прижимает строку вниз, а нижний отступ чуть приподнимает */
}
.news-date { display:inline-flex; align-items:center; gap:8px; color:#657E9C; font-family:'Inder',sans-serif; font-weight:400; font-size:12.71px; letter-spacing:0.12em; line-height:29.29px; margin:0; }
.news-date:before { content:''; width:16px; height:16px; background:url('/img/date.png') center/20px 20px no-repeat; display:inline-block; }
.news-readmore-btn { display:inline-flex; align-items:center; gap:8px; background:#ff1f2f; color:#fff; height:29px; padding:25px 19px; border-radius:8px; text-decoration:none; font-family:'Inder',sans-serif; font-weight:400; font-size:12.69px; line-height:29.29px; }
.news-readmore-btn:hover { opacity:.9; }
.news-readmore-icon { display:inline-block; width:16px; height:16px; background:url('/img/arrow.png') center/20px 20px no-repeat; }
/* Убираем боковые стрелки в блоке новостей */
.news-nav-btn,
.news-nav-btn--prev,
.news-nav-btn--next { display: none !important; }
/* ==============================================
Перфоманс: отложенная отрисовка крупных секций
============================================== */
.directions-headline,
.directions-feature,
.russia-map-section,
.news-section {
content-visibility: auto;
contain-intrinsic-size: 600px; /* приблизительная высота, экономит раскладку до появления секции */
}
/* ======================================================
Адаптивные настройки под ключевые разрешения экрана
Для ручной донастройки — переопределяйте переменные
в соответствующих медиаблоках
====================================================== */
@media (min-width: 1280px) and (max-width: 1439px) {
:root {
--container-pad: 160px;
}
.header .header__logo img {height: clamp(7.125rem, 7.6vw, 8.125rem) !important; min-width: clamp(7.125rem, 7.6vw, 8.125rem) !important;}
.header .btn--platform.header-cta {height: clamp(2.4rem, 2.5rem, 2.75rem); padding: 0 clamp(1.5rem, 1.7vw, 2.438rem);}
.hero--static .hero__inner {min-height: 100%;}
.df-title {
font-size: clamp(2rem, 2.5vw, 2.8rem);
}
.directions-feature:not(.directions-feature--reverse) .df-desc {
font-size: clamp(11px, 0.8vw, 15px);
}
.directions-feature--reverse .df-desc {
font-size: clamp(10px, 1.6vh, 15px);
}
.directions-headline__wrap {margin-top: clamp(2.5rem, 3vw, 4.375rem)}
.news-card-title {font-size: clamp(0.7rem, 1.1vw, 1.5rem); line-height: clamp(1.1rem, 1.2vw, 1.5rem); line-clamp: none; margin: 0 clamp(1rem, 1.1vw, 1.2rem)}
.news-section .news-card {min-height: 100%;}
.news-card-row {margin: 0 clamp(1rem, 1.1vw, 1.2rem) 1rem; width: calc(100% - 10%); }
.news-date {font-size: clamp(0.6rem, 0.7vw, 0.75rem);}
.news-readmore-btn {padding: clamp(1.1rem, 1.2vw, 1.5rem) clamp(0.9rem, 1vw, 1.1rem); font-size: clamp(0.7rem, 0.75vw, 0.8rem);}
.news-image-wrapper {margin: 0.6rem 1.6rem 1rem;}
.advantage-card {max-height:clamp(19rem, 20vh, 25rem)!important;;}
.advantage-card__content {padding: 0 0.2rem 0 0.2rem!important;}
.advantage-card__title {font-size: clamp(0.6rem, 0.9vw, 0.938rem) !important;}
.advantage-card__header-block {padding: 2em 1em 2em 1em;}
.advantage-card__number {font-size: clamp(14rem, 18vw, 20rem)!important;}
.why-choose-grid {min-height: 21.125rem!important;}
.advantage-card__expanded-title {font-size: clamp(0.8rem, 1.2vw, 1.5rem) !important; margin: 1rem 0 clamp(1rem, 1vw, 1.5rem) 0!important;}
.advantage-card__text p {font-size: clamp(0.7rem, 0.9vw, 1.1rem) !important;}
.advantage-card.is-expanded {min-height: 100% !important;}
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) .advantage-card__number {transform: translate(-53%, -50%) !important;}
.featured-news__title {font-size: clamp(1.7rem, 2vw, 2.25rem);}
.featured-news__excerpt {font-size: clamp(0.9rem, 1vw, 1.125rem);}
.featured-news__cta {padding: clamp(0.7rem, 0.8vw, 1rem) clamp(1.2rem, 1.5vw, 2rem);}
.featured-news {margin: 0 auto 3rem auto;}
.filter-btn {font-size: clamp(0.9rem, 1vw, 1.125em);}
.search-box input {font-size: clamp(0.8rem, 0.9vw, 1rem); padding: clamp(0.6rem, 0.65vw, 0.75rem) clamp(1.5rem, 1.7vw, 1.875rem);}
/* .news-page стили перенесены в news.css */
.newsletter-section {max-width: 50%;}
.breadcrumbs {margin: clamp(7.3rem, 8vw, 9rem) 0 0 0 !important;}
.breadcrumbs__item {font-size: clamp(0.6rem, 0.7vw, 0.95rem) !important;}
.news-detail__category {font-size: clamp(0.9rem, 1vw, 1.125rem) !important;}
.news-detail__title {font-size: clamp(1.5rem, 1.7vw, 2rem) !important;}
.news-detail__date-label {font-size: clamp(0.7rem, 0.8vw, 1.063rem) !important;}
.news-detail__date-value {font-size: clamp(0.6rem, 0.9vw, 1.25rem) !important;}
.news-detail__content {font-size: clamp(0.8rem, 1vw, 1.125rem) !important;}
.btn {padding: 0 clamp(1.2rem, 1.5vw, 1.875rem); height: clamp(2.5rem, 2.8vw, 3.25rem); font-size: clamp(0.8rem, 0.9vw, 1rem) !important;}
.related-news {margin: clamp(2rem, 2.5vh, 3.75rem) 0;}
.related-news__title {font-size: clamp(1rem, 1.1vw, 1.25rem) !important;
.breadcrumbs__separator {font-size: 1rem !important;}
.breadcrumbs-grid {margin: 1rem auto !important;}
.hero__cta { top: 75%; }
.directions-headline__title { font-size: clamp(5rem, 7vw, 8rem); }
.directions-feature__inner { max-width: var(--df-max-width); grid-template-columns: 360px 1fr; }
.directions-feature--reverse .directions-feature__inner { grid-template-columns: 1fr 360px; }
.directions-feature { --df-desc-top: 230px; }
.directions-feature--aero { --aero-desc-top: 140px; --aero-desc-left: 180px; }
.directions-feature--prod { --prod-desc-top: 160px; }
}}
@media (min-width:1024px) and (max-width:1279px) {
:root {--df-max-width: 980px; --container-pad: 62px;}
.hero .btn--cta {padding: clamp(1.1rem, 1.2vw, 1.5rem) clamp(2.3rem, 2.5vw, 3.125rem);}
.directions-feature:not(.directions-feature--reverse) .df-title {font-size: clamp(1.8rem, 2.5vw, 2.8rem); margin-top: 1rem;}
.directions-feature:not(.directions-feature--reverse) .df-desc {font-size: clamp(0.6rem, 0.7vw, 1.3rem); margin: 20px 20px 0px 0px;}
.directions-feature--reverse .df-title {margin-top: 1rem;}
.directions-feature--reverse .df-desc {font-size: clamp(0.57rem, 0.7vw, 1.3rem); margin: 10px 0 0 clamp(-1px, 0vw, 71px);}
.directions-headline__wrap {margin-top: 0;}
.directions-headline__title {font-size: clamp(6rem, 6.5vw, 9rem); line-height: 0.9;}
.russia-headline .russia-subtitle {font-size: clamp(3.1rem, 4vw, 5rem);}
.russia-map-section {padding-bottom: 0;}
.advantage-card__title {font-size: clamp(0.7rem, 0.95vw, 1.2rem) !important;}
.why-choose-grid {max-height: clamp(17rem, 34.9vh, 25rem) !important; min-height: 18.125rem !important;}
.advantage-card {max-height: clamp(25%, 37vh, 43%) !important; padding: 0.5em 1em 0.5em 1em !important;}
.advantage-card__header-block {height: 10rem !important; padding: 10% 5% 20% 5% !important;}
.advantage-card__title {font-size: clamp(0.7rem, 0.95vw, 1.2rem);}
.advantage-card__number {font-size: clamp(14rem, 18vw, 22rem) !important;}
.advantage-card__content {padding: 1rem 0.7rem; max-height: 30rem !important; transform: translateX(1px) translateY(-8rem) !important;}
.advantage-card__text p {font-size: clamp(0.6rem, 0.75vw, 0.8rem) !important;}
.advantage-card.is-expanded {min-height: 18.125rem !important;}
.advantage-card__expanded-title {font-size: clamp(0.9rem, 1vw, 1.2rem) !important;}
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) .advantage-card__number {transform: translate(-52%, -50%);}
.news-image-wrapper {min-height: 43% !important; margin: 10px 20px 16px;}
.news-card-title {font-size: clamp(1rem, 1.2vw, 1.3rem) !important; line-height: 1.2 !important; margin: 0px 7% 1% 9% !important; font-weight: 600 !important; height: 100% !important; line-clamp: none !important;}
.news-date {font-size: clamp(0.6rem, 0.7vw, 0.8rem);}
.news-readmore-btn {font-size: clamp(0.75rem, 0.8vw, 0.9rem); padding: clamp(1.2rem, 1.25vw, 1.5rem) clamp(1rem, 1.1vw, 1.25rem);}
.news-card-row {width: calc(100% - 60px) !important; margin: 0 31px 22px !important; margin-top: 30px !important;}
.news-section .news-card {min-height: 410px !important;}
.breadcrumbs {margin: 5em 0 0 0 !important;}
.form-row {margin-bottom: 0 !important;}
.header .header__nav-wrapper {grid-column: span 7 !important;}
.featured-news {margin: 0px auto 40px auto !important;}
.filter-btn {padding: 0.5rem 0; font-size: clamp(0.9rem, 1vw, 1.125rem) !important;}
.search-box input {font-size: clamp(0.9rem, 1vw, 1.1rem) !important; }
/* .news-page стили перенесены в news.css */
.newsletter-section {max-width: 50% !important;}
.newsletter-title {font-size: clamp(1.1rem, 1.3vw, 1.6rem) !important;}
.newsletter-description {font-size: clamp(0.7rem, 1vw, 1.1rem) !important;}
.newsletter-card {padding: clamp(30px, 45px, 60px) !important;}
.newsletter-form input {font-size: clamp(0.7rem, 0.8vw, 0.9rem) !important; padding: 0.625rem clamp(0.6rem, 0.9vw, 1rem) !important;}
.breadcrumbs__nav {flex-wrap: nowrap !important;}
.breadcrumbs-grid {margin: 7rem auto 2rem auto !important}
.news-detail__title {font-size: clamp(1.3rem, 2vw, 2.3rem) !important; }
.news-detail__date-label {font-size: clamp(0.65rem, 0.8vw, 1rem) !important;}
.news-detail__date-value {font-size: clamp(0.64rem, 0.9vw, 1.1rem);}
.news-detail__category {font-size: clamp(0.8rem, 1.1vw, 1.2rem) !important;}
.news-detail__header {margin-bottom: 20px !important;}
.news-detail__content {font-size: clamp(0.8rem, 1.1vw, 1.1rem) !important;}
.news-detail__footer .news-detail__actions .btn--secondary {font-size: 12px !important; padding: 0 20px !important; height: 45px !important;}
.news-detail__share-label {font-size: 12px !important;}
.news-detail {margin: 0 auto 30px auto !important; }
.related-news {margin: 30px 0 !important;}
.related-news__title {font-size: 16px !important;}
/*NEWS*/
}
/* 1024×768 */
@media (min-width: 1024px) and (max-width: 1279px) {
.directions-feature__inner { grid-template-columns: 320px 1fr; }
.directions-feature--reverse .directions-feature__inner { grid-template-columns: 1fr 320px; }
.directions-feature { --df-desc-top: 72px; }
.directions-feature--aero { --aero-desc-top: 120px; --aero-desc-left: 120px; }
.directions-feature--prod { --prod-desc-top: 130px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
:root {
--container-pad: 37.5px;
--grid-columns: 12; /* ИСПРАВЛЕНО: возвращаем 12 колонок для правильной 2-колоночной раскладки */
--df-max-width: 720px;
}
.grid-12 {
grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
}
/* ИСПРАВЛЕНИЕ: 2 карточки в ряду для диапазона 768-1023px - теперь по умолчанию */
.header__logo img {
height: clamp(10vh, 11vh, 16vh);
}
/* ИЗМЕНЕНИЕ 1: Блоки "Основные направления" - вертикальный layout */
.directions-feature {
padding: 32px 0 0 0;
}
.russia-map-section {
padding: 0;
}
.directions-feature__inner {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
max-width: 100% !important;
}
/* ПРИНУДИТЕЛЬНО отключаем grid для directions-feature в диапазоне 768-1023px */
.directions-feature .grid-12 {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
grid-template-areas: none !important;
max-width: 100% !important;
}
/* Заголовок - первый элемент */
.directions-feature .df-title {
position: static !important;
transform: none !important;
z-index: auto !important;
text-align: left !important;
margin: 0 0 16px 0 !important;
font-size: clamp(2rem, 2.2vw, 2.5rem) !important;
order: 1 !important;
padding-left: 0;
}
/* Описание - второй элемент */
.directions-feature .df-desc {
position: static !important;
margin: 0 0 16px 0 !important;
font-size: clamp(0.9rem, 1.1vw, 1.2rem) !important;
order: 2 !important;
}
/* Картинка - третий элемент */
.directions-feature__media {
position: static !important;
z-index: auto !important;
display: block !important;
width: 100% !important;
order: 3 !important;
}
/* Текстовый контейнер - flex для правильного порядка */
.directions-feature .directions-feature__text {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
width: 100% !important;
order: 1 !important;
}
/* ИЗМЕНЕНИЕ 2: Карточки "Почему выбирают нас" - вертикальное расположение */
.why-choose-grid {
grid-template-columns: 0.9fr !important; /* Увеличена ширина до 90% */
gap: 1rem !important;
justify-content: center !important; /* Центрируем карточки */
}
.advantage-card {
max-height: clamp(17rem, 18vh, 19rem) !important; /* Увеличена высота карточки */
padding: 0.5em 0.8em 0.5em 0.8em !important;
grid-column: span 1 !important; /* Каждая карточка занимает всю ширину */
}
.advantage-card__header-block {
height: 100% !important;
padding: 2em 1em 2em 1em !important; /* Увеличена высота области */
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 0 !important;
}
.advantage-card__title {
font-size: clamp(1.2rem, 1.4vw, 1.5rem) !important; /* Увеличен размер шрифта */
}
.advantage-card__number {
font-size: clamp(8rem, 9vw, 11rem) !important; /* Увеличен размер фоновой цифры */
}
/* При открытии - фиксированный размер карточки */
.advantage-card.is-expanded {
grid-column: span 1 !important; /* Остается в своей колонке */
height: clamp(20rem, 24vh, 28rem) !important; /* Фиксированная высота */
min-height: clamp(20rem, 24vh, 28rem) !important;
max-height: clamp(20rem, 24vh, 28rem) !important;
}
.advantage-card__content {
padding: 0 1rem 1.2rem 1rem !important; /* Убран отступ сверху полностью */
max-height: none !important;
transform: translateY(-5rem) !important;
height: 100% !important; /* Занимает всю высоту карточки */
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
.advantage-card__expanded-title {
font-size: clamp(1.2rem, 1.4vw, 1.5rem) !important;
margin: 0 0 1rem 0 !important; /* Убран отступ сверху */
transform: translateY(0) !important; /* Убран transform */
}
.advantage-card__text p {
font-size: clamp(1rem, 1.1vw, 1.2rem) !important;
}
/* Неактивные карточки остаются в своих позициях */
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) {
grid-column: span 1 !important; /* Остается в своей колонке */
opacity: 0.8 !important;
}
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) .advantage-card__number {
font-size: clamp(11rem, 11vw, 13rem) !important;
transform: translate(-50%, -50%) !important;
}
.directions-headline__wrap {
height: 140px;
padding: 0;
}
.directions-headline__title { font-size: clamp(4.3rem, 4.5vw, 4.8rem); height: 100px; padding: 0;}
.news-section {
padding-top: 0;
padding-bottom: 30px;
}
.newsletter-section {
max-width: 60%;
}
.news-card-title {
margin: 0px 1% 2% 12%;
line-height: 23.21px;
-webkit-line-clamp: 0;
font-size: clamp(1rem, 1.1vw, 1.3rem);
}
.news-date {
letter-spacing: 0em;
}
.news-card-row {
margin: 0 30px 22px;
width: calc(100% - 50px);
}
/* Стили новостей для диапазона до 800px перенесены в news.css */
}
/* 800×480 */
@media (max-width: 800px) {
:root {
--df-max-width: 720px;
}
.hero__cta { top: 72%; }
.directions-headline { padding: 0; }
.directions-feature__inner { grid-template-columns: 1fr; padding: 0 16px; }
.directions-feature__text { order: 1; padding-top: 0; }
.directions-feature__media { order: 3; }
.df-title { font-size: clamp(1.8rem, 4.5vw, 1.75rem); position: static; margin-bottom: 12px; }
.df-desc { width: 100%; margin: 16px 0; }
.directions-feature { --df-desc-top: 0px; }
.directions-feature--aero { --aero-desc-top: 0px; --aero-desc-left: 0px; --aero-link-top: 8px; --aero-link-left: 0px; }
.directions-feature--prod { --prod-desc-top: 0px; --prod-link-top: 8px; }
}
/* 480×320 */
@media (max-width: 480px) {
:root {
--df-max-width: 440px;
}
.hero__cta .btn--cta { padding: 12px 16px; border-radius: 8px; font-size: 15px; }
.directions-headline__title { font-size: clamp(1.9rem, 2vw, 2.2rem); height: 80px; }
/* Стили новостей для диапазона до 800px перенесены в news.css */
}
/* Дополнительные медиа-запросы для новостей */
@media (max-width: 767px) {
/* Стили новостей для диапазона до 767px перенесены в news.css */
.news-grid-container {
padding: 0 10px;
}
}
@media (max-width: 700px) {
/* Стили новостей для диапазона до 700px перенесены в news.css */
.news-image-wrapper {
height: 280px;
}
.news-card-title {
font-size: 19px;
line-height: 28px;
/* Разрешаем перенос текста на 4 строки */
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* Устанавливаем высоту для 4 строк */
height: calc(28px * 4);
}
.news-grid-container {
padding: 0 5px;
}
}
/* Адаптивная ширина для элементов с анимацией */
.news-section .news-grid .news-card.child-animate {
flex: 1 1 auto !important;
width: 100% !important;
min-width: 33.2% !important;
}
/* ИСКЛЮЧЕНИЕ: отключаем глобальный стиль для диапазона 768-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
.news-section .news-grid .news-card.child-animate {
flex: 0 0 calc(50% - 10px) !important;
width: calc(50% - 10px) !important;
min-width: calc(50% - 10px) !important;
max-width: calc(50% - 10px) !important;
}
}
/* CMS READY: Состояния загрузки и ошибок */
.news-grid.loading {
opacity: 0.6;
pointer-events: none;
}
.news-card.placeholder {
background: #f8f9fa;
animation: pulse 1.5s ease-in-out infinite;
}
.news-card.placeholder .news-image-wrapper {
background: #f8f9fa; /* цвет фона страницы для placeholder */
}
.news-card.placeholder .news-card-title,
.news-card.placeholder .news-date {
background: #f8f9fa; /* цвет фона страницы для placeholder текста */
color: transparent;
border-radius: 4px;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.news-error {
text-align: center;
padding: 40px 20px;
color: var(--news-date-color, #657E9C);
font-family: 'Inter', sans-serif;
}
/* CMS READY: Дополнительные состояния карточек */
.news-card[data-category] {
position: relative;
}
.news-card[data-category]:before {
content: none !important;
display: none !important;
}
/* Адаптивность для секции новостей */
@media (max-width: 1280px) {
.news-grid {
justify-content: center; /* центрируем на средних экранах */
}
.news-nav-btn {
width: 44px;
height: 44px;
}
.news-header {
margin-left: 74px; /* 44px + 30px gap */
}
}
/* Удалено: перенесено в диапазон 1366px-1599px */
@media (max-width: 767px) {
.news-section .container {
padding: 0 30px;
}
.news-header {
text-align: center; /* центрируем заголовки на планшетах */
margin-bottom: 30px;
}
.news-label {
font-size: 18px;
}
.news-title {
font-size: 32px;
}
.news-grid-container {
gap: 15px;
}
.news-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
max-width: 800px;
margin: 0 auto;
}
.news-card {
width: 100%;
}
.news-card-title {
width: 95%;
font-size: 16px;
line-height: 27px;
/* Разрешаем перенос текста на 4 строки */
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* Устанавливаем высоту для 4 строк */
height: calc(27px * 4);
}
.news-image-wrapper {
height: 200px; /* уменьшаем высоту изображений */
}
.news-nav-btn {
width: 40px;
height: 40px;
}
.news-header {
margin-left: 55px; /* 40px + 15px gap */
}
}
@media (max-width: 600px) {
.news-section {
padding-bottom: 40px;
}
.news-section .container {
padding: 0 15px;
}
.news-header {
margin-bottom: 25px;
}
.news-label {
font-size: 16px;
margin-bottom: 20px;
}
.news-title {
font-size: 28px;
}
.news-grid-container {
gap: 10px;
}
.news-grid {
grid-template-columns: 1fr; /* одна колонка на мобильных */
gap: 20px;
max-width: 350px;
margin: 0 auto;
}
.news-card {
max-width: 100%;
}
.news-card-title {
font-size: 18px;
line-height: 27px;
/* Разрешаем перенос текста на 4 строки */
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* Устанавливаем высоту для 4 строк */
height: calc(27px * 4);
}
.news-image-wrapper {
height: 180px;
border-radius: 24px; /* уменьшаем border-radius */
}
.news-date {
font-size: 11px;
}
.news-nav-btn {
width: 36px;
height: 36px;
}
.news-nav-btn svg {
width: 18px;
height: 18px;
}
.news-header {
margin-left: 46px; /* 36px + 10px gap */
}
}
/* Оптимизация для устройств с медленным интернетом */
@media (prefers-reduced-motion: reduce) {
.news-card {
transition: none;
}
.news-image {
transition: none;
}
.news-section .news-grid .news-card:hover {
transform: none;
background-color: transparent !important;
background: transparent !important;
border-radius: var(--news-card-border-radius, 36px);
/* УБИРАЕМ ТЕНЬ И В МЕДИА-ЗАПРОСЕ */
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
}
.news-card:hover .news-image {
transform: none;
}
}
/* ✅ ДОПОЛНИТЕЛЬНЫЙ СУПЕР-СПЕЦИФИЧНЫЙ СТИЛЬ НА СЛУЧАЙ КОНФЛИКТОВ */
body .news-section .container .news-grid-container .news-grid .news-card:hover {
background: transparent !important;
background-color: transparent !important;
color: inherit !important;
}
/* ========== FOOTER ========= */
.footer {
background-color: #263238 !important;
background: #263238 !important;
color: #ffffff !important;
padding: 50px 0 20px; /* ИСПРАВЛЕНО: Уменьшены отступы */
margin: 0 !important; /* ИСПРАВЛЕНО: Убираем внешние отступы */
/* CMS READY: переменные для настройки */
--footer-bg: #263238;
--footer-text-primary: #ffffff;
--footer-text-secondary: rgba(255, 255, 255, 0.7);
--footer-link-hover: rgba(255, 255, 255, 0.9);
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr; /* логотип занимает больше места */
gap: 40px; /* ИСПРАВЛЕНО: Уменьшен отступ между колонками */
margin-bottom: 0 !important; /* ИСПРАВЛЕНИЕ: убираем промежуток */
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 20px;
}
.footer-logo {
width: auto;
height: auto;
background: transparent;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.footer-logo-img {
width: 70px;
height: auto;
object-fit: contain;
}
.footer-brand-header {
display: flex;
gap: 20px;
align-items: flex-start;
}
.footer-brand-text {
flex: 1;
}
.footer-brand-title {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 24px;
font-weight: 700;
color: #ffffff !important;
margin: 0 0 8px 0;
line-height: 1.2;
}
.footer-brand-subtitle {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
font-weight: 500;
color: #ffffff !important;
margin: 0 0 12px 0;
line-height: 1.3;
}
.footer-brand-description {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8) !important;
margin: 0;
line-height: 1.4;
max-width: 280px;
margin-left: 0; /* начинается с левого края, где логотип */
}
.footer-column-title {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 18px;
font-weight: 600;
color: #ffffff !important;
margin: 0 0 24px 0;
line-height: 1.2;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links li:last-child {
margin-bottom: 0;
}
.footer-link {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8) !important;
text-decoration: none;
transition: color 0.3s ease;
line-height: 1.4;
}
.footer-link:hover {
color: #ffffff !important;
}
.footer-contacts {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-contact-item {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8) !important;
margin: 0;
line-height: 1.4;
white-space: normal; /* запрещаем перенос строк */
}
.footer-contact-link {
color: rgba(255, 255, 255, 0.8) !important;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-contact-link:hover {
color: #ffffff !important;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0 !important; /* ИСПРАВЛЕНИЕ: убираем верхний отступ */
border-top: 1px solid #263238;
flex-wrap: wrap;
gap: 15px; /* ИСПРАВЛЕНО: Уменьшен отступ между элементами */
}
.footer-copyright p {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8) !important;
margin: 0;
line-height: 1.4;
}
.footer-legal {
display: flex;
gap: 32px;
}
.footer-legal-link {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8) !important;
text-decoration: none;
transition: color 0.3s ease;
line-height: 1.4;
}
.footer-legal-link:hover {
color: #ffffff !important;
}
/* Дополнительные стили для обеспечения видимости всех элементов footer */
.footer * {
color: inherit;
}
.footer p, .footer span, .footer div {
color: rgba(255, 255, 255, 0.8) !important;
}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
color: #ffffff !important;
}
.footer a {
color: rgba(255, 255, 255, 0.8) !important;
}
.footer a:hover {
color: #ffffff !important;
}
/* Удалено: перенесено в диапазон 1366px-1599px */
@media (min-width: 768px) and (max-width: 900px) {
.footer {
padding: 40px 0 20px; /* ИСПРАВЛЕНО: Уменьшены отступы для планшетов */
}
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 30px; /* ИСПРАВЛЕНО: Уменьшен отступ между колонками */
margin-bottom: 0 !important; /* ИСПРАВЛЕНИЕ: убираем промежуток */
}
.footer-brand {
grid-column: 1 / -1; /* на всю ширину */
margin-bottom: 0 !important; /* ИСПРАВЛЕНИЕ: убираем промежуток */
}
.footer-bottom {
flex-direction: column;
text-align: center;
gap: 15px;
}
.footer-legal {
gap: 20px;
}
}
@media (max-width: 600px) {
.footer {
padding: 30px 0 15px; /* ИСПРАВЛЕНО: Еще больше уменьшены отступы для мобильных */
}
.footer-content {
grid-template-columns: 1fr;
gap: 20px; /* ИСПРАВЛЕНО: Уменьшен отступ между колонками */
margin-bottom: 0 !important; /* ИСПРАВЛЕНИЕ: убираем промежуток */
}
.footer-brand {
text-align: center;
}
.footer-column {
text-align: center;
}
.footer-legal {
flex-direction: column;
gap: 10px;
}
.footer-brand-title {
font-size: 20px;
}
.footer-brand-subtitle {
font-size: 14px;
}
.footer-brand-description {
font-size: 13px;
}
}
/* ========== ANIMATION SYSTEM ========= */
:root {
/* Animation Variables - CMS Ready */
--animation-duration-fast: 0.4s;
--animation-duration-normal: 0.6s;
--animation-duration-slow: 0.8s;
--animation-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--animation-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
--animation-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--animation-stagger-delay: 0.1s;
--animation-distance: 30px;
}
/* Base animation states - hidden by default */
.animate-on-scroll {
opacity: 0;
transform: translateY(var(--animation-distance));
transition: opacity var(--animation-duration-normal) var(--animation-ease-out),
transform var(--animation-duration-normal) var(--animation-ease-out);
will-change: opacity, transform;
}
.animate-on-scroll.aos-animate {
opacity: 1;
transform: translateY(0);
}
/* Content Block Animations */
.content-block-700.animate-on-scroll {
transform: translateY(calc(var(--animation-distance) * 1.5));
transition-duration: var(--animation-duration-slow);
}
.content-block-700 .section-title {
opacity: 0;
transform: translateX(-20px);
transition: opacity var(--animation-duration-normal) var(--animation-ease-out) 0.2s,
transform var(--animation-duration-normal) var(--animation-ease-out) 0.2s;
}
.content-block-700.aos-animate .section-title {
opacity: 1;
transform: translateX(0);
}
/* УДАЛЕНО: Специфичные стили .content-block-700 .section-description перенесены в content-typography.css */
/* Анимации будут применяться через общие классы */
/* Statistics Animation */
.stats-section.animate-on-scroll {
transform: translateY(40px);
}
.stat-block {
/* Делаем блоки статистики видимыми по умолчанию, анимации остаются необязательными */
opacity: 1;
transform: none;
transition: opacity var(--animation-duration-normal) var(--animation-ease-back),
transform var(--animation-duration-normal) var(--animation-ease-back);
}
.stat-block.child-animate {
opacity: 1;
transform: scale(1) translateY(0);
}
/* SVG Icon Animations */
.animate-svg {
opacity: 0;
transform: scale(0.5) rotate(10deg);
transition: opacity var(--animation-duration-fast) var(--animation-ease-back),
transform var(--animation-duration-fast) var(--animation-ease-back);
}
.animate-svg.svg-animate {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.stat-icon img {
transition: transform var(--animation-duration-fast) ease;
}
.stat-block:hover .stat-icon img {
transform: scale(1.1) rotate(-5deg);
}
/* Counter Animations */
.animate-counter {
transform: scale(1.2);
transition: transform var(--animation-duration-normal) var(--animation-ease-back);
}
.animate-counter.counter-animate {
transform: scale(1);
}
.stat-number {
font-feature-settings: 'tnum'; /* Tabular numbers for consistent width */
will-change: auto; /* Reset will-change after animation */
}
/* Russia Map Section */
.russia-map-section.animate-on-scroll {
transform: translateY(50px);
transition-duration: var(--animation-duration-slow);
}
.russia-title, .russia-subtitle {
/* Всегда видимы по умолчанию */
opacity: 1;
transform: none;
transition: opacity var(--animation-duration-normal) var(--animation-ease-out),
transform var(--animation-duration-normal) var(--animation-ease-out);
}
.russia-map-section.aos-animate .russia-title {
opacity: 1;
transform: translateX(0);
transition-delay: 0.2s;
}
.russia-map-section.aos-animate .russia-subtitle {
opacity: 1;
transform: translateX(0);
transition-delay: 0.3s;
}
.russia-stats-block {
opacity: 1;
transform: none;
transition: opacity var(--animation-duration-normal) var(--animation-ease-back) 0.4s,
transform var(--animation-duration-normal) var(--animation-ease-back) 0.4s;
}
.russia-map-section.aos-animate .russia-stats-block {
opacity: 1;
transform: translateX(0) scale(1);
}
/* Map Container Animation */
.russia-map-wrapper {
opacity: 1;
transform: none;
transition: opacity var(--animation-duration-slow) var(--animation-ease-out) 0.6s,
transform var(--animation-duration-slow) var(--animation-ease-out) 0.6s;
}
.russia-map-section.aos-animate .russia-map-wrapper {
opacity: 1;
transform: scale(1);
}
/* УДАЛЕНО: Opacity стили объединены в основной блок .industries-track */
.content-block-700.aos-animate .industries-track {
opacity: 1;
}
/* 🎯 КЛАСС ДЛЯ ЗАПУСКА АНИМАЦИИ ПРОКРУТКИ */
.industries-track.animation-started {
-webkit-animation: infiniteScroll 60s linear infinite;
animation: infiniteScroll 60s linear infinite;
}
.industry-card {
transform: scale(0.9);
transition: transform var(--animation-duration-fast) var(--animation-ease-out);
}
.industries-track .industry-card:nth-child(odd) {
transition-delay: 0.1s;
}
.industries-track .industry-card:nth-child(even) {
transition-delay: 0.2s;
}
.content-block-700.aos-animate .industry-card {
transform: scale(1);
}
/* News Section */
.news-section.animate-on-scroll {
transform: translateY(60px);
}
.news-section .news-label, .news-section .news-title {
opacity: 0;
transform: translateY(20px);
transition: opacity var(--animation-duration-normal) var(--animation-ease-out),
transform var(--animation-duration-normal) var(--animation-ease-out);
}
.news-section .news-label {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
}
.news-section .news-title {
opacity: 1;
transform: translateY(0);
transition-delay: 0.3s;
}
.news-section .news-card {
opacity: 0;
transform: translateY(30px) scale(0.95);
transition: opacity var(--animation-duration-normal) var(--animation-ease-back),
transform var(--animation-duration-normal) var(--animation-ease-back);
}
.news-section .news-card.child-animate {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Navigation Buttons Animation */
.news-nav-btn {
opacity: 0;
transform: scale(0.8);
transition: opacity var(--animation-duration-fast) var(--animation-ease-back) 0.6s,
transform var(--animation-duration-fast) var(--animation-ease-back) 0.6s;
}
.news-section.aos-animate .news-nav-btn {
opacity: 1;
transform: scale(1);
}
/* Footer Animation */
.footer.animate-on-scroll {
transform: translateY(40px);
transition-duration: var(--animation-duration-slow);
}
.footer-brand, .footer-column {
opacity: 0;
transform: translateY(25px);
transition: opacity var(--animation-duration-normal) var(--animation-ease-out),
transform var(--animation-duration-normal) var(--animation-ease-out);
}
.footer.aos-animate .footer-brand {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
}
.footer.aos-animate .footer-column:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 0.3s;
}
.footer.aos-animate .footer-column:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 0.4s;
}
.footer.aos-animate .footer-column:nth-child(4) {
opacity: 1;
transform: translateY(0);
transition-delay: 0.5s;
}
/* Performance Optimizations */
.animate-on-scroll,
.animate-counter,
.animate-svg {
backface-visibility: hidden;
perspective: 1000px;
transform-style: preserve-3d;
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
:root {
--animation-duration-fast: 0.01ms;
--animation-duration-normal: 0.01ms;
--animation-duration-slow: 0.01ms;
--animation-distance: 0px;
}
.animate-on-scroll,
.animate-counter,
.animate-svg,
.stat-block,
.news-section .news-card {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
/* Статичный фон - нет необходимости в специальных стилях */
}
/* ======== FORCE VISIBILITY SAFETY NET (homepage critical) ======== */
.stats-section,
.stats-grid,
.stat-block,
.stat-icon img,
.stat-number,
.stat-text,
.russia-map-section,
.russia-header,
.russia-title,
.russia-subtitle,
.russia-stats-block,
.russia-map-container,
.russia-map-wrapper,
.russia-map-wrapper *,
.russia-cta,
.news-header {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* Гарантируем кликабельность карты даже во время .is-scrolling */
.is-scrolling .russia-map-section,
.is-scrolling .russia-map-section * {
pointer-events: auto !important;
}
/* ИСПРАВЛЕНО: Scroll Performance Optimizations */
.is-scrolling .animate-on-scroll {
/* Promote to GPU layer during scroll */
will-change: transform, opacity;
}
/* ======== MAP PIN HOVER FIX (override safety nets) ======== */
/* Возвращаем возможность трансформации пинов даже при глобальных reset-стилях */
.russia-map-section .russia-map-wrapper image.company-pin.company-pin--active {
transform: scale(1.1) !important;
filter: drop-shadow(0 0 7px #2a6bfc33) !important;
}
/* Гарантируем интерактивность пинов даже во время оптимизаций скролла */
.is-scrolling .russia-map-section image.company-pin,
.is-scrolling .russia-map-section g#kptm-company-pins-layer,
.is-scrolling .russia-map-section g#kptm-company-pins-layer * {
pointer-events: auto !important;
}
/* Performance mode for low-end devices */
.performance-mode .animate-on-scroll {
transition: opacity 0.3s ease !important;
transform: none !important;
}
/* ОПТИМИЗИРОВАНО: Предотвращение overflow без !important */
html, body {
overflow-x: hidden;
position: relative;
}
/* Smooth scroll improvements */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
::-webkit-scrollbar-thumb {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
}
/* Final accessibility enhancements */
@media (prefers-reduced-motion: reduce) {
.scroll-progress {
display: none !important;
}
::-webkit-scrollbar-thumb {
transition: none !important;
animation: none !important;
}
}
/* ОПТИМИЗИРОВАНО: Объединенный debug режим (только в development) */
@media screen and (max-width: 1px) {
/* Границы элементов */
* {
outline: 1px solid rgba(255, 0, 0, 0.1) !important;
}
/* Видео элементы */
.hero__video-el {
outline: 2px solid red !important;
}
.hero__video {
outline: 2px solid blue !important;
}
/* Анимированные элементы */
.animate-on-scroll:not(.aos-animate) {
outline: 2px dashed orange;
}
.animate-on-scroll.aos-animate {
outline: 2px solid green;
}
}
/* ========== СТАТИСТИКА (ПРОСТЫЕ БЛОКИ) ========= */
.stats-section {
width: 100%;
padding: 80px 0;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 60px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.stat-block {
text-align: center;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.stat-icon {
margin-top: 10px; /* небольшой отступ перед иконками */
margin-bottom: 24px;
}
.stat-icon img {
width: 100px;
height: auto;
/* убираем жесткую цветокоррекцию, чтобы иконки были видимы в исходном цвете */
filter: none;
}
.stat-number {
font-size: 64px;
font-weight: 900; /* extra bold */
color: #142f5c;
margin-bottom: 16px;
line-height: 1;
}
.stat-text {
font-size: 1.2rem;
font-weight: 600;
color: #2c3e50;
line-height: 1.3;
white-space: nowrap;
max-width: 300px;
}
/* Адаптивность */
@media (max-width: 900px) {
.stats-grid {
grid-template-columns: 1fr;
gap: 40px;
padding: 0 20px;
}
.stat-icon img {
width: 80px;
}
.stat-number {
font-size: 48px;
}
.stat-text {
font-size: 1.1rem;
}
}
@media (max-width: 600px) {
.stats-section {
padding: 60px 0;
min-height: 250px;
}
.stat-icon {
margin-bottom: 20px;
margin-top: 20px;
}
.stat-icon img {
width: 70px;
}
.stat-number {
font-size: 40px;
}
.stat-text {
font-size: 1rem;
white-space: normal;
max-width: none;
}
}
/* ========== GENERAL SCROLL OPTIMIZATIONS ========= */
/* Общие оптимизации скролла */
/* ========== PARTICIPATION PAGE STYLES ========= */
/* Стили для страницы участия с белым фоном и формой заявки */
/* Основные стили для страницы участия */
.participation-page {
background-color: #fff;
color: #333;
min-height: 100vh;
}
/* Header для страницы участия */
.header-participation {
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
/* Основная секция участия */
.participation-main {
padding-top: 40px; /* дополнительный отступ под header */
}
.participation-hero {
padding: 80px 0 60px;
background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
border-bottom: 1px solid #e9ecef;
}
.participation-hero__content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.participation-hero__title {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 48px;
font-weight: 700;
color: #142f5c;
margin-bottom: 24px;
line-height: 1.2;
}
.participation-hero__subtitle {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 20px;
font-weight: 400;
color: #5D5B5B;
margin-bottom: 40px;
line-height: 1.4;
}
/* Intro */
.participation-intro { padding: 20px 0 8px; }
.participation-slogan { font-size: 22px; font-weight: 700; color: #142f5c; text-align: center; margin: 0 0 8px; }
/* Benefits */
.participation-benefits { padding: 10px 0 24px; }
.section-title { font-size: 24px; font-weight: 700; color: #142f5c; margin: 0 0 14px; }
.section-subtitle { color: #435078; margin: 0 0 12px; }
.benefits-grid { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 16px; }
.benefit-card { padding:16px;}
.benefit-title { font-weight:700; color:#142f5c; margin:0 0 6px; }
.benefit-text { margin:0; color:#1a2642; }
/* Criteria */
.participation-criteria { padding: 20px 0; }
.criteria-grid { display:grid; grid-template-columns: repeat(3, minmax(240px,1fr)); gap:16px; }
.criteria-card { background:#fff; border:1px solid #e6ecf5; border-radius:12px; padding:16px; position:relative; box-shadow:0 1px 6px rgba(0,0,0,.04); cursor:default; }
.criteria-title { font-weight:700; color:#142f5c; }
.criteria-detail { position:absolute; left:0; right:0; top:100%; margin-top:8px; background:#fff; border:1px solid #dbe4f2; border-radius:10px; padding:12px; opacity:0; pointer-events:none; transform: translateY(6px); transition:.18s; box-shadow:0 12px 28px rgba(0,0,0,.12); z-index: 5; }
.criteria-card:hover .criteria-detail, .criteria-card:focus .criteria-detail, .criteria-card:focus-within .criteria-detail { opacity:1; transform: translateY(0); pointer-events:auto; }
/* Steps */
.participation-steps { padding: 14px 0 24px; }
.steps-flow { list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(4, minmax(180px,1fr)); gap: 12px; }
.step { display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid #e6ecf5; border-radius:12px; padding:14px; box-shadow:0 1px 6px rgba(0,0,0,.04); }
.step-num { width:32px; height:32px; border-radius:50%; background:#0a306d; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.step-title { font-weight:700; color:#142f5c; margin-bottom:4px; }
.step-text { color:#1a2642; }
/* Compare */
.participation-compare { padding: 10px 0 26px; }
.compare-table { display:grid; grid-template-columns: 1.2fr 1fr 1fr; border:1px solid #e6ecf5; border-radius:12px; overflow:hidden; background:#fff; }
.compare-row { display:contents; }
.compare-head > .compare-cell { background:#f6f8fb; font-weight:700; }
.compare-cell { padding:12px 14px; border-bottom:1px solid #e6ecf5; border-right:1px solid #eef3fb; color:#1a2642; }
.compare-row .compare-cell:last-child { border-right:none; }
.compare-cta { display:flex; justify-content:center; margin-top:14px; }
/* Удалено: перенесено в диапазон 1366px-1599px */
@media (max-width: 667px) {
.benefits-grid, .criteria-grid { grid-template-columns: 1fr; }
.steps-flow { grid-template-columns: 1fr; }
}
/* ===== Platform page ===== */
/* ===== Projects page ===== */
.projects-icons { padding: 8px 0 24px; }
.icons-grid { display:grid; grid-template-columns: repeat(3, minmax(260px,1fr)); gap: 16px; align-items:start; }
.project-icon { position:relative; background:#fff; border:1px solid #e6ecf5; border-radius:12px; padding:16px; box-shadow:0 1px 6px rgba(0,0,0,.04); transition:.18s; cursor:pointer; }
.project-icon:hover { transform: translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.project-icon .icon { width: 36px; height: 36px; border-radius: 50%; background:#142f5c; color:#fff; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-bottom:8px; position:relative; }
.project-icon[data-index] .icon::after { content: attr(data-index); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; }
.project-icon .name { margin:0; color:#142f5c; font-weight:700; }
.project-icon .hover-detail { position:absolute; left:0; right:0; top:100%; margin-top:8px; background:#fff; border:1px solid #dbe4f2; border-radius:10px; padding:12px; opacity:0; pointer-events:none; transform: translateY(6px); transition:.18s; box-shadow:0 12px 28px rgba(0,0,0,.12); z-index: 5; max-height: 60vh; overflow:auto; }
.projects-page .project-icon .hover-detail { display: none !important; }
.project-icon .hover-detail p { margin:0 0 8px; line-height:1.45; color:#1f2937; }
.project-icon .hover-detail ul { padding-left: 18px; margin: 8px 0; color:#1f2937; }
.project-icon .hover-detail .foot { margin-top:8px; color:#6b7280; font-size:12px; }
.directions-filter { margin: 12px 0 20px; display:flex; gap:12px; align-items:center; }
.directions-filter .filter-label { font-weight:600; color:#142f5c; }
.directions-filter .filter-select { border:1px solid #dbe4f2; border-radius:10px; padding:10px 12px; min-width: 260px; background:#fff; }
.direction-details { margin: 16px 0 8px; padding: 16px; border:1px dashed #dbe4f2; border-radius:10px; background:#fbfdff; display:none; }
.direction-details.active { display:block; }
.direction-projects { margin: 8px 0 24px; display:none; }
.direction-projects.active { display:block; }
.direction-projects .projects-grid { display:grid; grid-template-columns: repeat(3, minmax(260px,1fr)); gap:16px; align-items:stretch; }
.direction-projects .project-card { background:#fff; border:1px solid #e6ecf5; border-radius:12px; padding:16px; box-shadow:0 1px 6px rgba(0,0,0,.04); display:flex; flex-direction:column; height:100%; }
.direction-projects .project-card .project-title { margin:0 0 6px; font-weight:700; color:#142f5c; }
.direction-projects .project-card .project-description { margin:0 0 8px; color:#1f2937; }
.direction-projects .project-card .project-details { display:flex; gap:12px; color:#374151; font-size:14px; }
.direction-projects .project-card .foot { margin-top:auto; padding-top:10px; color:#6b7280; font-size:12px; }
/* Удалено: перенесено в диапазон 1366px-1599px */
@media (max-width: 667px){
.icons-grid { grid-template-columns: 1fr; }
.project-icon .hover-detail { display:none !important; }
.project-icon { padding:14px; }
.direction-projects .projects-grid { grid-template-columns: 1fr; }
}
/* Уточнение для самых узких экранов 360–390px */
@media (max-width: 390px){
.project-icon { padding:12px; }
.direction-projects .project-card { padding:14px; }
.directions-section .section-title { font-size: 28px; }
}
.platform-hero { padding: 32px 0 20px; }
.platform-cta { display:flex; gap:12px; margin-top:12px; }
.platform-slogan .slogan { text-align:center; color:#142f5c; font-weight:800; font-size:26px; margin:6px 0 18px; }
.platform-architecture { padding: 10px 0 22px; }
.architecture-figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:8px; }
.architecture-figure img { max-width:100%; height:auto; border-radius:12px; border:1px solid #e6ecf5; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.architecture-figure figcaption { color:#435078; font-size:14px; }
.platform-why { padding: 8px 0 20px; }
.why-grid { display:grid; grid-template-columns: repeat(2, minmax(280px,1fr)); gap:12px; }
.why-item { display:flex; gap:12px; background:#fff; border:1px solid #e6ecf5; border-radius:12px; padding:14px; box-shadow:0 1px 6px rgba(0,0,0,.04); }
.why-num { width:28px; height:28px; border-radius:50%; background:#0a306d; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.why-body { color:#1a2642; }
.why-note { margin-top:10px; color:#1a2642; }
.platform-registration { padding: 10px 0 28px; }
.reg-list { margin:0 0 10px 18px; }
.reg-cta { display:flex; justify-content:center; }
@media (max-width: 667px) {
.platform-cta { flex-direction:column; }
.why-grid { grid-template-columns: 1fr; }
}
.participate-hero__buttons {
display: flex;
justify-content: center;
gap: 20px;
}
/* Секция формы заявки */
.application-form-section {
padding: 60px 0;
background-color: #f8f9fa;
min-height: 80vh;
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
.application-form-section.active {
opacity: 1;
transform: translateY(0);
}
.application-form-wrapper {
max-width: 100%;
margin: 0;
overflow: visible; /* важно: не обрезать кликабельность внутренних элементов */
pointer-events: auto; /* на всякий случай активируем */
}
/* Safety: ensure form is always interactive on About/Participation pages */
body.about-page .application-form-section,
body.about-page .application-form-section *,
body.participation-page .application-form-section,
body.participation-page .application-form-section * {
pointer-events: auto !important;
}
/* Не перехватывать клики индикатором загрузки внутри формы */
body.about-page .application-form-section .form-loading,
body.about-page .application-form-section .form-loading *,
body.participation-page .application-form-section .form-loading,
body.participation-page .application-form-section .form-loading * {
pointer-events: none !important;
}
body.about-page .application-form-wrapper,
body.participation-page .application-form-wrapper { position: relative; z-index: 10; }
/* Поднимаем секцию формы над любыми внешними оверлеями */
body.about-page .application-form-section,
body.participation-page .application-form-section { position: relative; z-index: 200000 !important; isolation: isolate; }
body.about-page .application-form-wrapper,
body.participation-page .application-form-wrapper { z-index: 200001 !important; }
/* Поверх любых плавающих подсказок/каруселей/навигации */
header, nav, .news-grid, .map, .industries-section, .directions-section { position: relative; z-index: 1; }
/* Critical: while scrolling, never disable pointer-events on these pages to avoid
blocking ancestors of the form (ScrollOptimizer injects a global rule). */
body.about-page.is-scrolling, body.about-page.is-scrolling *,
body.participation-page.is-scrolling, body.participation-page.is-scrolling * {
pointer-events: auto !important;
}
/* keep inline behavior on about/participation; modal overlay only on directions-page */
/* Header формы */
.form-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 40px 20px;
border-bottom: 1px solid #e9ecef;
background: linear-gradient(135deg, #fafbfc 0%, #fff 100%);
}
.form-title {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 24px;
font-weight: 600;
color: #142f5c;
margin: 0;
}
.form-close {
width: 32px;
height: 32px;
border: none;
background: transparent;
font-size: 24px;
color: #657E9C;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.form-close:hover {
background: #f1f3f4;
color: #142f5c;
}
/* Тело формы */
.form-body {
padding: 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group--full {
grid-column: 1 / -1;
}
.form-group--checkbox {
grid-column: 1 / -1;
margin-top: 16px;
display: flex;
align-items: center;
}
/* Лейблы */
.form-label {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
color: #142f5c;
margin-bottom: 8px;
display: block;
}
/* Fieldset для групп элементов */
.checkbox-fieldset {
border: none;
margin: 0;
padding: 0;
min-width: 0;
}
.checkbox-fieldset legend {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
color: #142f5c;
margin-bottom: 8px;
display: block;
padding: 0;
width: 100%;
float: none;
}
.required {
color: #dc3545;
font-weight: 600;
}
/* Поля ввода */
.form-input,
.form-select,
.form-textarea {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
padding: 12px 16px;
border: 2px solid #e9ecef;
border-radius: 8px;
background: #fff;
color: #333;
transition: all 0.3s ease;
outline: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: #0a306d;
box-shadow: 0 0 0 3px rgba(10, 48, 109, 0.1);
}
.form-input:invalid:not(:focus):not(:placeholder-shown),
.form-select:invalid:not(:focus),
.form-textarea:invalid:not(:focus):not(:placeholder-shown) {
border-color: #dc3545;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: #6c757d;
opacity: 1;
}
/* Селект */
.form-select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 40px;
appearance: none;
}
/* Textarea */
.form-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.5;
}
/* Кастомный чекбокс */
.form-checkbox-label {
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-size: 14px;
width: 100%;
position: relative;
flex-wrap: nowrap; /* не переносим элементы на новую строку */
white-space: nowrap; /* удерживаем текст в одной строке рядом с чекбоксом */
}
/* Группа чекбоксов/радио */
.form-options { display: flex; flex-direction: column; gap: 8px; }
.form-options--checkbox .form-checkbox-label { width: auto; }
.form-options--radio .form-radio-label { display: inline-flex; align-items: center; gap: 8px; }
.form-radio-text { line-height: 20px; }
/* === Directions (Направления) === */
.directions-section { padding: 40px 0 80px; position: relative; background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%); }
.directions-section .section-title { font-size: 32px; font-weight: 700; margin: 0 0 28px; color: #142f5c; }
.directions-grid {
display: grid;
grid-template-columns: repeat(3, minmax(260px, 1fr));
gap: 24px;
}
.direction-card {
position: relative;
background: #ffffff;
border: 1px solid rgba(10,48,109,0.12);
border-radius: 14px;
padding: 20px 20px 24px;
box-shadow: 0 8px 28px rgba(0,0,0,0.06);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.direction-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); border-color: rgba(10,48,109,0.22); background: #fff; }
.direction-icon { width: 56px; height: 56px; border-radius: 12px; background: #E6EEF9; display:flex; align-items:center; justify-content:center; margin-bottom: 14px; }
.direction-icon img { width: 28px; height: 28px; object-fit: contain; filter: grayscale(100%) contrast(1.2); }
.direction-title { font-size: 18px; font-weight: 700; color: #142f5c; margin: 0 0 8px; }
.direction-card { overflow: visible; }
.direction-hover { position: absolute; left: 0; right: 0; top: calc(100% - 16px); z-index: 1002; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.direction-card .direction-hover.is-flipped { top: auto; bottom: calc(100% - 16px); }
.direction-card .direction-hover.is-flipped > p { border-radius: 0 0 12px 12px; }
.direction-card .direction-hover.is-flipped .direction-cta { border-radius: 12px 12px 0 0; }
/* Body-level floating popover for directions (desktop) */
.direction-popover { position: fixed; z-index: 1300; background: #ffffff; border: 1px solid rgba(10,48,109,0.16); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.18); max-width: 560px; min-width: 320px; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; }
.direction-popover.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.direction-popover__body { padding: 14px 16px; color:#2c3e50; line-height: 1.55; }
.direction-popover__footer { padding: 0; }
.direction-popover__footer .btn { width: 100%; border-radius: 0 0 12px 12px; padding: 12px 16px; }
.direction-popover::after { content: ''; position: absolute; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; }
.direction-popover.is-bottom::after { top: -8px; left: 24px; border-bottom: 8px solid rgba(10,48,109,0.16); }
.direction-popover.is-top::after { bottom: -8px; left: 24px; border-top: 8px solid rgba(10,48,109,0.16); }
/* Hide in-card hover on desktop; use portal popover */
@media (min-width: 668px) {
.direction-card .direction-hover { display: none !important; }
.direction-popover .btn.btn--primary { background-color: #0a306d; color: #fff; border-color: #0a306d; }
.direction-popover .btn.btn--primary:hover { background: #fff; color: #0a306d; }
}
.direction-card.is-open .direction-hover, .direction-card:hover .direction-hover, .direction-card:focus-within .direction-hover { opacity: 1; transform: translateY(0); pointer-events: auto; }
.direction-hover > p { background:#fff; border:1px solid rgba(10,48,109,0.16); border-radius: 12px 12px 0 0; padding: 14px 16px; margin: 0; color:#2c3e50; line-height: 1.55; }
.direction-hover .direction-cta { width: 100%; border-radius: 0 0 12px 12px; padding: 12px 16px; }
/* Modal area for dynamic form */
.directions-page .application-form-section { position: fixed; inset: 0; background: rgba(20,47,92,0.42); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; /* backdrop-filter: blur(1px); */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility .18s linear; will-change: opacity; overscroll-behavior: contain; transform: translateZ(0); contain: layout paint size; }
.directions-page .application-form-section.active { opacity: 1; visibility: visible; pointer-events: auto; }
.directions-page .application-form-section .application-form-wrapper { max-width: 720px; width: 100%; max-height: 88vh; background: #fff; border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.25); overflow: auto; transform: translateY(10px) scale(.985); opacity: 0; transition: transform .22s cubic-bezier(.2,.7,.3,1), opacity .18s ease; will-change: transform, opacity; }
.directions-page .application-form-section.active .application-form-wrapper { transform: translateY(0) scale(1); opacity: 1; }
body.modal-open { overflow: hidden; overscroll-behavior: contain; }
/* Удалено: перенесено в диапазон 1366px-1599px */
@media (max-width: 667px) { .directions-grid { grid-template-columns: 1fr; gap: 18px; } .direction-hover { position: static; opacity: 1; transform: none; pointer-events: auto; } }
@media (max-width: 319px) { .direction-title { font-size: 16px; } }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* === SAFETY: pages without directions must allow inputs === */
body:not(.directions-page) .direction-popover { display: none !important; }
/* Keep default visibility handling for inline forms on About/Participation; no overrides here */
/* === Industries (иконки с подписью) === */
.industries-section { padding: 24px 0 12px; }
.industries-section .section-title { font-size: 28px; font-weight: 700; margin: 0 0 20px; color: #142f5c; }
.industries-grid {
display: grid;
grid-template-columns: repeat(3, minmax(220px, 1fr));
gap: 18px 24px;
}
.industry-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px dashed rgba(10,48,109,0.18);
border-radius: 12px;
background: #fff;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.industry-card:hover { border-color: rgba(10,48,109,0.35); box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.industry-icon { width: 44px; height: 44px; border-radius: 10px; background: #E6EEF9; display:flex; align-items:center; justify-content:center; }
.industry-icon img { width: 22px; height: 22px; object-fit: contain; }
.industry-title { color: #142f5c; font-weight: 600; line-height: 1.35; }
@media (max-width: 1200px) { .industries-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 667px) { .industries-grid { grid-template-columns: 1fr; } }
.form-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
.form-checkbox-custom {
width: 20px;
height: 20px;
border: 2px solid #e9ecef;
border-radius: 4px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
margin-top: 0; /* выравнивание по центру в одной линии */
align-self: center;
position: relative;
z-index: 1;
}
.form-checkbox:checked + .form-checkbox-custom {
background: #0a306d;
border-color: #0a306d;
}
.form-checkbox:checked + .form-checkbox-custom::after {
content: '✓';
color: #fff;
font-size: 12px;
font-weight: 600;
}
.form-checkbox:focus + .form-checkbox-custom {
box-shadow: 0 0 0 3px rgba(10, 48, 109, 0.1);
}
.form-checkbox-text {
color: #333;
flex: 0 1 auto;
font-size: 14px;
line-height: 20px; /* выравниваем по высоте чекбокса */
display: inline-block; /* одна линия с чекбоксом */
margin-left: 8px;
width: auto; /* не растягиваем на всю ширину */
align-self: center;
position: relative;
z-index: 1;
word-wrap: break-word;
overflow-wrap: break-word;
/* Дополнительные стили для гарантии видимости */
visibility: visible !important;
opacity: 1 !important;
font-weight: normal;
text-align: left;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
/* Ошибки валидации */
.form-error {
font-size: 12px;
color: #dc3545;
margin-top: 4px;
min-height: 16px;
font-weight: 500;
}
.form-input.error,
.form-select.error,
.form-textarea.error {
border-color: #dc3545;
background-color: #fff5f5;
}
.form-checkbox.error + .form-checkbox-custom {
border-color: #dc3545;
}
/* Footer формы */
.form-footer {
background: #f8f9fa;
display: flex;
gap: 16px;
justify-content: center;
}
.form-footer .btn {
min-width: 180px;
}
/* Индикатор загрузки */
.form-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.95);
display: none; /* по умолчанию скрыт, показываем программно */
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
color: #142f5c;
font-weight: 500;
pointer-events: none; /* индикатор не блокирует ввод */
}
.loading-spinner {
width: 32px;
height: 32px;
border: 3px solid #e9ecef;
border-top: 3px solid #0a306d;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
.participation-hero__title {
font-size: 36px;
}
.participation-hero__subtitle {
font-size: 18px;
}
.participate-hero__buttons {
flex-direction: column;
align-items: center;
}
.application-form-wrapper {
margin: 0 16px;
border-radius: 8px;
}
.form-header,
.form-body,
.form-footer {
padding: 24px;
}
.form-body {
grid-template-columns: 1fr;
gap: 20px;
}
.form-group--full,
.form-group--checkbox {
grid-column: 1;
}
.form-footer {
flex-direction: column;
}
.form-footer .btn {
min-width: auto;
width: 100%;
}
}
@media (max-width: 480px) {
.participation-hero {
padding: 60px 0 40px;
}
.participation-hero__title {
font-size: 28px;
margin-bottom: 16px;
}
.participation-hero__subtitle {
font-size: 16px;
margin-bottom: 32px;
}
.form-title {
font-size: 20px;
}
.form-input,
.form-select,
.form-textarea {
font-size: 16px; /* предотвращает зум на iOS */
}
}
/* Анимации и переходы */
.participation-form {
position: relative;
transition: opacity 0.3s ease;
}
.application-form-section {
animation: fadeInUp 0.6s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Состояния кнопок в форме */
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Улучшенная доступность */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.form-checkbox:focus-visible + .form-checkbox-custom {
outline: 2px solid #0a306d;
outline-offset: 2px;
}
/* Стили для высокой контрастности */
@media (prefers-contrast: high) {
.form-input,
.form-select,
.form-textarea {
border-width: 3px;
}
.form-checkbox-custom {
border-width: 3px;
}
}
/* Стили для уменьшенных анимаций */
@media (prefers-reduced-motion: reduce) {
.application-form-section {
animation: none;
}
.form-input,
.form-select,
.form-textarea,
.form-checkbox-custom,
.form-close {
transition: none;
}
.loading-spinner {
animation: none;
border-top-color: #0a306d;
}
}
/* ========== СТРАНИЦЫ ОТДЕЛЬНЫХ НОВОСТЕЙ ========= */
.breadcrumbs {
margin: 8em 0 0 0;
}
.breadcrumbs__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.breadcrumbs__item {
display: flex;
align-items: center;
}
.breadcrumbs__link {
color: #1e2a4b;
text-decoration: none;
transition: color 0.2s ease;
font-weight: 600;
}
.breadcrumbs__link:hover {
color: #142f5c;
}
.breadcrumbs__text {
color: #657E9C;
}
.news-detail {
max-width: 100%;
margin: 0 auto 60px auto;
background: white;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.news-detail__header {
margin-bottom: 40px;
}
.news-detail__title {
font-family: 'Inter', sans-serif;
font-size: clamp(1.8rem, 2vw, 2.25rem);
font-weight: 700;
color: #142f5c;
line-height: 1.2;
}
.news-detail__excerpt {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 400;
color: #657E9C;
line-height: 1.5;
margin: 0 0 30px 0;
}
.news-detail__meta {
display: flex;
gap: 30px;
flex-wrap: wrap;
padding: 20px 0;
border-top: 1px solid #e9ecef;
border-bottom: 1px solid #e9ecef;
}
.news-detail__meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.news-detail__meta-label {
font-size: 12px;
font-weight: 500;
color: #657E9C;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.news-detail__meta-value {
font-size: 14px;
font-weight: 600;
color: #142f5c;
}
.news-detail__image {
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
}
.news-detail__image img {
width: 100%;
height: auto;
display: block;
}
.news-detail__content {
font-family: 'Inter', sans-serif !important;
font-size: clamp(0.9rem, 1vw, 1.125rem);
line-height: 1.7;
color: #374151;
margin: 2em 10% 0 10%;
}
/* Повторяем сброс для нижнего блока стилей, чтобы перекрыть каскад */
.news-detail__content,
.news-detail__content * {
font-family: inherit !important;
}
.news-detail__content h2 {
font-size: 24px;
font-weight: 600;
color: #142f5c;
margin: 30px 0 20px 0;
}
.news-detail__content h3 {
font-size: 20px;
font-weight: 600;
color: #142f5c;
margin: 25px 0 15px 0;
}
.news-detail__content p {
margin: 0 0 20px 0;
}
.news-detail__content ul,
.news-detail__content ol {
margin: 20px 0;
padding-left: 30px;
}
.news-detail__content li {
margin: 8px 0;
}
.news-detail__footer {
padding-top: 30px;
border-top: 1px solid #e9ecef;
margin: 2em 10% 2em 10%;
}
.news-detail__actions {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.news-detail__share {
display: flex;
align-items: center;
gap: 15px;
}
.news-detail__share-label {
font-size: 14px;
font-weight: 500;
color: #657E9C;
}
.social-share {
display: flex;
gap: 8px;
}
.social-share__link {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
background: #f8f9fa;
border-radius: 8px;
color: #d9001b;
text-decoration: none;
font-size: 12px;
font-weight: 600;
transition: all 0.2s ease;
padding: 0 10px; /* ширина по тексту */
min-width: 36px;
}
.social-share__link:hover {
background: #d9001b;
color: white;
}
/* Related News */
.related-news {
margin: 60px 0;
}
.related-news__title {
font-family: 'Inter', sans-serif;
font-size: 28px;
font-weight: 700;
color: #142f5c;
text-align: center;
margin: 0 0 40px 0;
}
.related-news__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.related-news__card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.related-news__card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.related-news__link {
display: block;
text-decoration: none;
color: inherit;
}
.related-news__image {
height: 180px;
overflow: hidden;
}
.related-news__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.related-news__card:hover .related-news__image img {
transform: scale(1.05);
}
.related-news__content {
padding: 20px;
}
.related-news__title {
font-size: 20px;
font-weight: 600;
color: #f70518;
line-height: 1.4;
margin: 0 0 12px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-news__meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: #657E9C;
}
.related-news__category {
background: rgba(10, 48, 109, 0.1);
color: #0A306D;
padding: 2px 8px;
border-radius: 12px;
font-weight: 500;
}
/* Error Page */
.error-page {
text-align: center;
padding: 80px 20px;
max-width: 500px;
margin: 0 auto;
}
.error-page__icon {
font-size: 64px;
margin-bottom: 20px;
}
.error-page__title {
font-family: 'Inter', sans-serif;
font-size: 32px;
font-weight: 700;
color: #142f5c;
margin: 0 0 16px 0;
}
.error-page__message {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #657E9C;
margin: 0 0 30px 0;
line-height: 1.5;
}
/* Адаптивность для детальных страниц */
/* ===========================================
ХЛЕБНЫЕ КРОШКИ (BREADCRUMBS)
=========================================== */
.breadcrumbs {
background: transparent;
font-family: 'Inter', sans-serif;
}
.breadcrumbs__container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.25em;
}
.breadcrumbs__nav {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5em;
}
.breadcrumbs__item {
display: flex;
align-items: center;
gap: 0.5em;
font-size: clamp(0.8rem, 0.85vw, 0.95rem);
line-height: 1.4;
}
.breadcrumbs__link:hover {
color: #F70518;
}
.breadcrumbs__current {
color: #1e2a4b;
font-weight: 600;
}
.breadcrumbs__separator {
color: #d9001b;
font-size: 1.2em;
user-select: none;
}
/* Стрелка влево для breadcrumbs */
.breadcrumbs__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2em;
height: 2.2em;
background: rgba(247, 5, 24, 0.1);
border-radius: 10%;
margin-right: 0.5em;
position: relative;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
.breadcrumbs__arrow:hover {
background: rgba(247, 5, 24, 0.2);
transform: scale(1.1);
}
.breadcrumbs__arrow::before {
content: '';
width: 0.6em;
height: 0.6em;
border-left: 3px solid #292929;
border-bottom: 3px solid #292929;
transform: rotate(45deg);
position: absolute;
left: 45%;
top: 50%;
margin-left: -0.1em;
margin-top: -0.3em;
transition: all 0.3s ease;
}
.breadcrumbs__arrow:hover::before {
border-left-color: #FFF;
border-bottom-color: #FFF;
}
/* Grid-12 система для breadcrumbs */
.breadcrumbs-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5em;
width: 100%;
max-width: 100%;
margin: 3rem auto;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
box-sizing: border-box;
}
.news-content .container .breadcrumbs .breadcrumbs-grid {
padding-left: 0;
padding-right: 0;
}
.news-content .container .breadcrumbs {
margin: 12rem 0 0 0;
}
.breadcrumbs-grid .breadcrumbs__nav {
grid-column: 1 / 12; /* Занимает 4 столбца */
}
/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
.breadcrumbs {
padding: 1em 0;
}
.breadcrumbs-grid .breadcrumbs__nav {
grid-column: 1 / -1; /* На мобильных занимает всю ширину */
}
.breadcrumbs-grid {
max-width: 100%;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
}
}
/* ============================================================================
СЕКЦИЯ "ПОЧЕМУ ВЫБИРАЮТ НАС?"
============================================================================ */
.why-choose-us-section {
margin: 0;
position: relative;
}
.why-choose-headline {
margin-bottom: 4em;
}
.why-choose-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1em;
margin: 0;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
align-items: start; /* Prevent height jumps */
min-height: 28.125rem; /* 450px converted to em */
}
/* When a card is expanded, switch to 12-column grid */
.why-choose-grid.has-expanded {
grid-template-columns: repeat(12, 1fr);
}
/* ============================================================================
КАРТОЧКИ ПРЕИМУЩЕСТВ
============================================================================ */
.advantage-card {
position: relative;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.5em;
padding: 0.5em 1em 0.5em 1em;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer;
max-height: clamp(24.125rem, 25.2em, 33rem); /* 450px converted to em */
display: flex;
flex-direction: column;
grid-column: span 1; /* Default: each card takes 1 column in 5-column grid */
text-align: center;
box-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.1);
overflow: hidden; /* Prevent content overflow during animation */
}
.advantage-card:hover {
box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.15);
}
/* Неактивные карточки когда одна активна */
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) {
grid-column: span 2; /* 2 колонки для неактивных */
transform: scale(0.95); /* Slight scale down for visual emphasis */
opacity: 0.8; /* Slight transparency */
}
/* Активная расширенная карточка */
.advantage-card.is-expanded {
grid-column: span 4; /* 4 колонки для активной */
background: #ffffff;
border: 1px solid rgba(247, 5, 24, 0.2);
box-shadow: 0 0.25em 1.25em rgba(0, 0, 0, 0.1);
text-align: left;
min-height: 28.125em; /* Same height as unexpanded cards */
transform: scale(1.02); /* Slight scale up for emphasis */
z-index: 10; /* Ensure expanded card is on top */
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Большие цифры на фоне - по центру и к низу */
.advantage-card__number {
font-family: 'Inter', sans-serif;
font-size: clamp(15em, 20vw, 25em);
font-weight: 900;
color: rgba(200, 200, 200, 0.3);
line-height: 1;
z-index: 1;
transition: all 0.3s ease;
user-select: none;
cursor: pointer;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
/* Hover effect for numbers */
.advantage-card:hover .advantage-card__number {
color: #F70518;
opacity: 0.15;
}
/* Active state - keep red when card is expanded */
.advantage-card.is-expanded .advantage-card__number {
color: #F70518;
}
/* В неактивных карточках цифра по центру */
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) .advantage-card__number {
font-size: 6em;
top: 50%;
bottom: auto;
transform: translate(-50%, -50%);
}
/* В активной карточке цифра видна на фоне */
.advantage-card.is-expanded .advantage-card__number {
font-size: clamp(15em, 20vw, 25em);
color: #F70518;
opacity: 0.15;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
/* Блок №2 сверху - фиксированная высота для всех карточек */
.advantage-card__header-block {
position: relative;
z-index: 3;
height: 11.25em; /* Фиксированная высота (40% от 28.125em) */
background: transparent;
box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.1);
border-radius: 0.625em; /* 10px */
padding: 3em 1em 4em 1em;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: auto;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* В неактивных карточках блок скрывается */
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) .advantage-card__header-block {
opacity: 0;
visibility: hidden;
transform: translateY(-1em);
transition: all 0.3s ease;
}
/* Заголовок в блоке №2 */
.advantage-card__title {
font-family: 'Inter', sans-serif;
font-size: clamp(12px, 14px, 15px);
font-weight: 900;
color: #F70518;
line-height: 1.2;
margin: 0;
text-align: center;
}
/* Скрываем Block #2 в открытых карточках */
.advantage-card.is-expanded .advantage-card__header-block {
opacity: 0;
visibility: hidden;
transform: translateY(-1em);
height: 0;
margin-bottom: 0;
padding: 0;
}
/* Контент для раскрытой карточки */
.advantage-card__content {
position: relative;
z-index: 2;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
width: 100%;
padding: 2rem 0.7rem;
display: flex;
flex-direction: column;
transform: translateX(2em); /* Start from right for smooth opening */
}
.advantage-card.is-expanded .advantage-card__content {
opacity: 1;
visibility: visible;
transform: translateX(0); /* Slide to normal position */
}
/* Заголовок в раскрытом состоянии */
.advantage-card__expanded-title {
font-family: 'Inter', sans-serif;
font-weight: 700;
color: #F70518;
line-height: 1.2;
transform: translateY(1em);
opacity: 0;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s; /* Slight delay for staggered animation */
font-size: clamp(1.2em, 2.5vw, 1.5em);
margin: 0 0 clamp(0.1em, 1vw, 1.5em) 0;
}
/* Переопределение для диапазона 768-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
.advantage-card__expanded-title {
transform: translateY(0) !important; /* Убираем transform */
margin: 0 0 1rem 0 !important; /* Убираем отступ сверху */
padding-top: 0 !important; /* Убираем padding сверху */
}
.news-content .container .breadcrumbs {
margin: 7rem 0 0 0;
}
/* РЕЗЕРВНОЕ ИСПРАВЛЕНИЕ - используется основное правило выше */
/* Оптимизация контейнера для корректной прокрутки */
.news-grid-container {
overflow: visible; /* Разрешаем overflow для внутренней прокрутки */
}
.news-detail {
grid-column: 1 / -1;
margin: 0 0 40px;
border-radius: 16px;
background: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.news-detail__title {
font-size: clamp(1.2rem, 2vw, 2.3rem);
}
.news-detail__excerpt {
font-size: 18px;
}
.news-detail__meta {
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
.news-detail__actions {
flex-direction: column;
align-items: flex-start;
}
.related-news__grid {
grid-template-columns: 1fr;
}
.breadcrumbs {
margin: 4em 0 0 0;
}
.news-detail__content {
margin: 2em 4% 0 4%;
}
}
.advantage-card.is-expanded .advantage-card__expanded-title {
transform: translateY(0);
opacity: 1;
}
/* Текст в раскрытом состоянии */
.advantage-card__text {
transform: translateY(1em);
opacity: 0;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s; /* Longer delay for text */
}
.advantage-card.is-expanded .advantage-card__text {
transform: translateY(0);
opacity: 1;
}
.advantage-card__text p {
font-family: 'Inter', sans-serif;
font-size: clamp(12px, 14px, 18px);
line-height: 1.6;
color: #1e2a4b;
margin: 0;
font-weight: 800;
}
/* Кнопка раскрытия */
.advantage-card__toggle {
position: absolute;
bottom: 1.5em;
right: 1.5em;
width: 2.5em;
height: 2.5em;
background: rgba(247, 5, 24, 0.1);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 5;
backdrop-filter: blur(5px);
}
.advantage-card__toggle:hover {
background: rgba(247, 5, 24, 0.2);
transform: scale(1.1);
}
.advantage-card.is-expanded .advantage-card__toggle {
background: #F70518;
transform: rotate(45deg);
}
.advantage-card.is-expanded .advantage-card__toggle:hover {
background: #d40414;
transform: rotate(45deg) scale(1.1);
}
/* Плюсик */
.advantage-card__plus {
position: relative;
width: 1.2em;
height: 1.2em;
}
.advantage-card__plus::before,
.advantage-card__plus::after {
content: '';
position: absolute;
background: #F70518;
transition: all 0.4s ease;
}
.advantage-card__plus::before {
width: 1.2em;
height: 0.15em;
top: 0.525em;
left: 0;
}
.advantage-card__plus::after {
width: 0.15em;
height: 1.2em;
top: 0;
left: 0.525em;
}
.advantage-card.is-expanded .advantage-card__plus::before,
.advantage-card.is-expanded .advantage-card__plus::after {
background: #ffffff;
}
.advantage-card__toggle:hover .advantage-card__plus::before,
.advantage-card__toggle:hover .advantage-card__plus::after {
background: #F70518;
}
.advantage-card.is-expanded .advantage-card__toggle:hover .advantage-card__plus::before,
.advantage-card.is-expanded .advantage-card__toggle:hover .advantage-card__plus::after {
background: #ffffff;
}
/* ============================================================================
АДАПТИВНОСТЬ
============================================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
.why-choose-us-section {
margin: 6em 0;
}
.advantage-card {
grid-column: span 1; /* Each card takes 1 column in 5-column grid */
}
.advantage-card.is-expanded {
grid-column: span 4; /* 4 колонки для активной */
}
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) {
grid-column: span 2; /* 2 колонки для неактивных */
}
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) .advantage-card__number {
font-size: 4em;
}
}
@media (max-width: 767px) {
.why-choose-us-section {
margin: 4em 0;
}
.why-choose-headline {
margin-bottom: 2.5em;
}
.why-choose-grid {
grid-template-columns: 1fr;
gap: 1em;
min-height: 20em; /* Proportional height for mobile */
}
.advantage-card {
grid-column: span 1;
min-height: 20em;
}
.advantage-card.is-expanded {
grid-column: span 1;
min-height: 20em; /* Same height as unexpanded */
}
.advantage-card__header-block {
height: 8em; /* Фиксированная высота для мобильных (40% от 20em) */
}
.advantage-card__number {
font-size: 5em;
}
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) .advantage-card__number {
font-size: 3.5em;
}
.advantage-card__title {
font-size: 0.9em;
}
.advantage-card__expanded-title {
font-size: 1.2em;
}
.advantage-card__text {
font-size: 0.95em;
}
.advantage-card__toggle {
bottom: 1em;
right: 1em;
width: 2.2em;
height: 2.2em;
}
}
@media (max-width: 480px) {
.advantage-card {
min-height: 16em; /* Proportional height for small screens */
}
.advantage-card__header-block {
height: 6.4em; /* Фиксированная высота для маленьких экранов (40% от 16em) */
}
.advantage-card__number {
font-size: 4em;
}
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) .advantage-card__number {
font-size: 3em;
}
.advantage-card__title {
font-size: 0.8em;
line-height: 1.3;
}
.advantage-card__expanded-title {
font-size: 1em;
}
.advantage-card__text {
font-size: 0.9em;
}
.advantage-card__toggle {
bottom: 0.8em;
right: 0.8em;
width: 2em;
height: 2em;
}
}
/* ========================================
МОДАЛЬНОЕ ОКНО "СТАТЬ УЧАСТНИКОМ КОНСОРЦИУМА"
======================================== */
.consortium-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
will-change: opacity, visibility;
backface-visibility: hidden;
transform: translateZ(0);
}
.consortium-modal.is-open {
opacity: 1;
visibility: visible;
}
.consortium-modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(0.125em);
cursor: pointer;
}
.consortium-modal__wrapper {
position: relative;
width: 90%;
max-width: none;
max-height: 100vh;
display: flex;
flex-direction: column;
z-index: 10;
transform: translateY(0.5em) scale(0.98);
opacity: 0;
transition: transform 0.15s ease-out, opacity 0.15s ease-out;
will-change: transform, opacity;
backface-visibility: hidden;
transform: translateZ(0);
}
.consortium-modal.is-open .consortium-modal__wrapper {
transform: translateY(0) scale(1);
opacity: 1;
}
.consortium-modal__header {
background: transparent;
padding: 0 0 1.5em 0;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.consortium-modal__title {
font-family: 'Inter', sans-serif;
font-size: 2em;
font-weight: 700;
color: #FFF;
margin: 0;
line-height: 1.2;
}
.consortium-modal__close {
position: absolute;
top: 0;
right: 0;
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.75em;
transition: all 0.3s ease;
color: #ffffff;
z-index: 1001;
font-family: 'Inter', sans-serif;
font-size: 1em;
font-weight: 500;
}
.consortium-modal__close::before {
content: 'Закрыть';
color: #ffffff;
font-size: 1em;
font-weight: 500;
}
.consortium-modal__close::after {
content: '×';
font-size: 2.5em;
font-weight: 300;
line-height: 1;
color: #ffffff;
margin-left: 0.25em;
}
.consortium-modal__close:hover {
opacity: 0.8;
transform: scale(1.05);
}
.consortium-modal__close svg {
display: none; /* Используем CSS псевдоэлементы вместо SVG */
}
.consortium-modal__content {
background: #ffffff;
border-radius: 1.25em;
padding: 3em 3em 4em 3em;
width: 100%;
overflow-y: auto;
position: relative;
box-shadow: 0 1.25em 3.75em rgba(0, 0, 0, 0.2);
}
/* Форма - адаптация существующих стилей */
.consortium-form {
max-width: 100%;
}
/* Стили для динамической формы из CMS */
#consortiumFormContainer .form-body {
display: flex;
flex-direction: column;
gap: 1.5em;
background: transparent;
padding: 0;
}
#consortiumFormContainer .form-group {
display: flex;
flex-direction: column;
margin-bottom: 1em;
background: transparent;
}
/* Контейнер для первых трех полей в ряд */
.consortium-form__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5em;
margin-bottom: 1.5em;
width: 100%;
}
/* Обеспечиваем правильное отображение полей в первой строке */
.consortium-form__row .consortium-form__group {
display: flex;
flex-direction: column;
width: 100%;
}
.consortium-form__row .consortium-form__group {
display: flex;
flex-direction: column;
}
.consortium-form__group {
display: flex;
flex-direction: column;
}
.consortium-form__group--full {
margin-bottom: 1.5em;
}
/* Стили для footer формы с чекбоксом и кнопкой */
#consortiumFormContainer .form-footer,
#consortiumFormContainer .submit-section,
#consortiumFormContainer .privacy-section,
.consortium-form__footer {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2em;
margin-top: 2em;
flex-wrap: wrap;
}
/* Специальные стили для контейнера с чекбоксом и кнопкой в модальном окне */
#consortiumFormContainer .consortium-form__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2em;
margin-top: 1.5em;
flex-wrap: wrap;
}
/* Стили для чекбокса согласия */
#consortiumFormContainer .form-group--checkbox,
#consortiumFormContainer .privacy-group,
.consortium-form__consent {
flex: 1;
min-width: 15em;
display: flex;
align-items: center;
justify-content: center;
}
/* Специальные стили для чекбокса в модальном окне */
#consortiumFormContainer .consortium-form__footer .form-group--checkbox {
flex: 1;
min-width: 15em;
margin-bottom: 0;
}
/* Адаптивность для первой строки */
@media (max-width: 768px) {
.consortium-form__row {
grid-template-columns: 1fr;
gap: 1em;
}
}
#consortiumFormContainer .form-checkbox-label,
.consortium-form__checkbox-label {
display: flex;
align-items: center;
gap: 0.75em;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 0.875em;
font-weight: 400;
line-height: 1.4;
width: 100%;
justify-content: center;
}
#consortiumFormContainer .form-checkbox,
.consortium-form__checkbox {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
#consortiumFormContainer .form-checkbox-custom,
.consortium-form__checkbox-custom {
width: 1.25em;
height: 1.25em;
border: 2px solid #ddd;
border-radius: 0.25em;
background: #ffffff;
position: relative;
flex-shrink: 0;
transition: all 0.2s ease;
margin: 0;
display: inline-block;
}
#consortiumFormContainer .form-checkbox:checked + .form-checkbox-custom,
.consortium-form__checkbox:checked + .consortium-form__checkbox-custom {
background: #F70518;
border-color: #F70518;
}
#consortiumFormContainer .form-checkbox:checked + .form-checkbox-custom::after,
.consortium-form__checkbox:checked + .consortium-form__checkbox-custom::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 0.875em;
font-weight: bold;
}
/* Адаптация стилей для полей из CMS */
#consortiumFormContainer .form-group .form-label,
#consortiumFormContainer .form-group label {
font-family: 'Inter', sans-serif;
font-size: 1em;
font-weight: 600;
color: #333;
margin-bottom: 0.5em;
display: block;
}
/* Красная звездочка для обязательных полей */
#consortiumFormContainer .form-group .required,
.consortium-form__label .required,
.required {
color: #F70518;
margin-left: 0.25em;
}
#consortiumFormContainer .form-group .form-input,
#consortiumFormContainer .form-group .form-textarea,
#consortiumFormContainer .form-group .form-select,
#consortiumFormContainer .form-group input,
#consortiumFormContainer .form-group textarea,
#consortiumFormContainer .form-group select {
font-family: 'Inter', sans-serif;
font-size: 1.1em;
padding: 0.75em 0em;
border: none;
border-bottom: 2px solid #ddd;
border-radius: 0;
background: #ffffff;
transition: all 0.2s ease;
width: 100%;
box-sizing: border-box;
}
#consortiumFormContainer .form-group input:focus,
#consortiumFormContainer .form-group textarea:focus,
#consortiumFormContainer .form-group select:focus {
outline: none;
border-bottom-color: #F70518;
border-bottom-width: 2px;
box-shadow: none;
}
#consortiumFormContainer .form-group textarea {
resize: vertical;
min-height: 1em;
max-height: 3.3em;
line-height: 1.5;
}
.consortium-form__label {
font-family: 'Inter', sans-serif;
font-size: 0.875em;
font-weight: 600;
color: #333;
margin-bottom: 0.5em;
display: block;
}
.consortium-form__label .required {
color: #F70518;
margin-left: 0.25em;
}
.consortium-form__input,
.consortium-form__textarea {
font-family: 'Inter', sans-serif;
font-size: 1em;
padding: 0.75em 1em;
border: none;
border-bottom: 3px solid #ddd;
border-radius: 0;
background: #ffffff;
transition: all 0.2s ease;
width: 100%;
box-sizing: border-box;
}
.consortium-form__input:focus,
.consortium-form__textarea:focus {
outline: none;
border-bottom-color: #F70518;
border-bottom-width: 4px;
box-shadow: none;
}
.consortium-form__textarea {
resize: vertical;
min-height: 6em;
line-height: 1.5;
}
.consortium-form__error {
font-size: 0.75em;
color: #F70518;
margin-top: 0.25em;
min-height: 1em;
display: block;
}
/* Стили для кнопки отправки из CMS */
#consortiumFormContainer .form-footer,
#consortiumFormContainer .submit-section {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2em;
flex-wrap: wrap;
}
#consortiumFormContainer .btn,
#consortiumFormContainer button[type="submit"] {
padding: 0.75em 2em;
font-size: 1em;
border-radius: 0.375em;
border: none;
background: #F70518;
color: white;
cursor: pointer;
transition: all 0.2s ease;
font-family: 'Inter', sans-serif;
font-weight: 600;
white-space: nowrap;
}
#consortiumFormContainer .btn:hover,
#consortiumFormContainer button[type="submit"]:hover {
background: #d6041a;
transform: translateY(-0.0625em);
box-shadow: 0 0.25em 0.75em rgba(247, 5, 24, 0.3);
}
#consortiumFormContainer .btn:active,
#consortiumFormContainer button[type="submit"]:active {
transform: translateY(0);
}
/* Футер формы */
.consortium-form__footer {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2em;
flex-wrap: wrap;
}
.consortium-form__consent {
flex: 1;
min-width: 15em;
display: flex;
align-items: center;
justify-content: center;
}
.consortium-form__checkbox-label {
display: flex;
align-items: center;
gap: 0.75em;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 0.875em;
font-weight: 400;
line-height: 1.4;
width: 100%;
justify-content: center;
}
.consortium-form__checkbox {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.consortium-form__checkbox-custom {
width: 1.25em;
height: 1.25em;
border: 2px solid #ddd;
border-radius: 0.25em;
background: #ffffff;
position: relative;
flex-shrink: 0;
transition: all 0.2s ease;
margin: 0;
display: inline-block;
}
.consortium-form__checkbox:checked + .consortium-form__checkbox-custom {
background: #F70518;
border-color: #F70518;
}
.consortium-form__checkbox:checked + .consortium-form__checkbox-custom::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 0.875em;
font-weight: bold;
}
.consortium-form__checkbox-text {
color: #333;
font-weight: 500;
}
/* Стилизация для текста "обработку персональных данных" */
.consent-highlight {
color: #F70518;
}
.consortium-form__checkbox-text .required {
color: #F70518;
margin-left: 0.25em;
}
.consortium-form__submit {
padding: 0.75em 2em;
font-size: 1em;
border-radius: 0.375em;
border: none;
background: #F70518;
color: white;
cursor: pointer;
transition: all 0.2s ease;
font-family: 'Inter', sans-serif;
font-weight: 600;
white-space: nowrap;
align-self: center;
margin-top: 0;
}
/* Стили для кнопки отправки в модальном окне */
#consortiumFormContainer .consortium-form__footer button[type="submit"],
#consortiumFormContainer .consortium-form__footer .btn {
padding: 1.3em 5em;
font-size: 1em;
border-radius: 0.375em;
border: none;
background: #F70518;
color: white;
cursor: pointer;
transition: all 0.2s ease;
font-family: 'Inter', sans-serif;
font-weight: 500;
white-space: nowrap;
align-self: center;
margin-top: 0;
}
#consortiumFormContainer .consortium-form__footer button[type="submit"]:hover,
#consortiumFormContainer .consortium-form__footer .btn:hover {
background: #d6041a;
transform: translateY(-0.0625em);
box-shadow: 0 0.25em 0.75em rgba(247, 5, 24, 0.3);
}
.consortium-form__submit:hover {
background: #d6041a;
transform: translateY(-0.0625em);
box-shadow: 0 0.25em 0.75em rgba(247, 5, 24, 0.3);
}
.consortium-form__submit:active {
transform: translateY(0);
}
/* Индикатор загрузки */
.consortium-form__loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
border-radius: 0.75em;
z-index: 100;
}
.loading-spinner {
width: 2em;
height: 2em;
border: 0.125em solid #e5eaf2;
border-top-color: #F70518;
border-radius: 50%;
animation: spin 0.9s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.consortium-form__loading span {
font-family: 'Inter', sans-serif;
font-size: 1em;
color: #333;
}
/* Адаптивность для планшетов */
@media (max-width: 1024px) {
.consortium-modal__wrapper {
width: 95%;
max-width: 50em;
}
.consortium-modal__content {
padding: 1.5em;
}
.consortium-form__row {
gap: 1em;
}
.consortium-modal__title {
font-size: 1.5em;
}
}
/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
.consortium-modal__wrapper {
width: 95%;
max-height: 95vh;
}
.consortium-modal__content {
padding: 1.25em;
}
.consortium-form__row {
grid-template-columns: 1fr;
gap: 1em;
margin-bottom: 1em;
}
/* Адаптивность для CMS формы */
#consortiumFormContainer .form-body {
gap: 1em;
}
#consortiumFormContainer .form-footer,
#consortiumFormContainer .submit-section {
flex-direction: column;
gap: 1.5em;
align-items: stretch;
}
/* Адаптивность для нового контейнера с чекбоксом и кнопкой */
#consortiumFormContainer .consortium-form__footer {
flex-direction: column;
gap: 1.5em;
align-items: stretch;
}
#consortiumFormContainer .btn,
#consortiumFormContainer button[type="submit"] {
width: 100%;
padding: 1em;
}
.consortium-form__footer {
flex-direction: column;
gap: 1.5em;
align-items: stretch;
}
.consortium-modal__title {
font-size: 1.25em;
}
.consortium-form__submit {
width: 100%;
padding: 1em;
}
}
/* Адаптивность для очень маленьких экранов */
@media (max-width: 480px) {
.consortium-modal__wrapper {
width: 100%;
height: 100%;
max-height: 100vh;
margin: 0;
border-radius: 0;
}
.consortium-modal__content {
border-radius: 0;
height: 100%;
display: flex;
flex-direction: column;
padding: 1em;
}
.consortium-modal__header {
padding: 0 0 1em 0;
border-bottom: 1px solid #eee;
margin-bottom: 1em;
}
.consortium-modal__title {
font-size: 1.125em;
}
.consortium-form__row {
margin-bottom: 1em;
}
.consortium-form__group--full {
margin-bottom: 1em;
}
}
/* ============================================================================
АДАПТИВНЫЕ СТИЛИ ДЛЯ ДИАПАЗОНА 1366px - 1599px (Главная страница)
============================================================================ */
@media (min-width: 1366px) and (max-width: 1599px) {
/* Основные контейнеры и сетка */
.hero--static {
height: calc(100vh - var(--header-height));
min-height: 100%;
}
.hero__content--center {
height: 100%;
}
.directions-feature__media img {
max-width: 100%;
}
/* ============================================================================
WHY-CHOOSE-GRID - АДАПТИВНЫЕ СТИЛИ С CLAMP()
============================================================================ */
.advantage-card__toggle {
width: clamp(2em, 4vw, 2.5em);
height: clamp(2em, 4vw, 2.5em);
bottom: clamp(1em, 2vw, 1.5em);
right: clamp(1em, 2vw, 1.5em);
}
.advantage-card__plus {
width: clamp(1em, 2vw, 1.2em);
height: clamp(1em, 2vw, 1.2em);
}
}
/* Стили новостей для диапазона 768-1023px перенесены в news.css */
/* ============================================================================
ПЛАНШЕТЫ И БОЛЬШИЕ СМАРТФОНЫ: 576-767px
ПЛАВНОЕ МАСШТАБИРОВАНИЕ: 240px@576 → 320px@767
Контентная область: 520px@576 → 720px@767, gap: 40px→80px
============================================================================ */
@media (min-width: 576px) and (max-width: 767px) {
:root {
--container-pad: 28px;
--grid-columns: 4;
--df-max-width: 600px;
}
.grid-12 {
grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
}
/* ПРИНУДИТЕЛЬНО отключаем grid для directions-feature в диапазоне 576-767px */
.directions-feature .grid-12 {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
grid-template-areas: none !important;
}
/* Блоки "Основные направления" - простой вертикальный layout */
.directions-feature {
padding: 24px 0 0 0;
}
/* Текстовый контейнер - полная ширина, содержит заголовок и описание */
.directions-feature .directions-feature__text {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
width: 100% !important;
}
/* Заголовок - внутри текстового контейнера */
.directions-feature .df-title {
position: static !important;
transform: none !important;
z-index: auto !important;
text-align: left !important;
margin: 0 !important;
font-size: clamp(1.6rem, 1.8vw, 2rem) !important;
line-height: 1.2 !important;
padding: 0;
}
.why-choose-us-section {
margin: 2rem 0;
}
/* ============================================================================
КАРТОЧКИ "ПОЧЕМУ ВЫБИРАЮТ НАС?" - ДИАПАЗОН 576-767px
Вертикальное расположение с логикой открытия карточек
============================================================================ */
/* Сетка карточек - вертикальное расположение */
.why-choose-grid {
grid-template-columns: 0.9fr !important; /* Увеличена ширина до 90% */
gap: 1rem !important;
justify-content: center !important; /* Центрируем карточки */
}
/* Базовая карточка */
.advantage-card {
max-height: clamp(17rem, 18vh, 19rem) !important; /* Увеличена высота карточки */
padding: 0.5em 0.8em 0.5em 0.8em !important;
grid-column: span 1 !important; /* Каждая карточка занимает всю ширину */
}
/* Заголовочный блок карточки */
.advantage-card__header-block {
height: 100% !important;
padding: 2em 1em 2em 1em !important; /* Увеличена высота области */
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 0 !important;
}
/* Заголовок карточки */
.advantage-card__title {
font-size: clamp(1.2rem, 1.4vw, 1.5rem) !important; /* Увеличен размер шрифта */
}
/* Фоновая цифра */
.advantage-card__number {
font-size: clamp(17rem, 18vw, 19rem) !important; /* Увеличен размер фоновой цифры */
}
/* РАСШИРЕННАЯ КАРТОЧКА - при открытии */
.advantage-card.is-expanded {
grid-column: span 1 !important; /* Остается в своей колонке */
height: clamp(20rem, 24vh, 28rem) !important; /* Фиксированная высота */
min-height: clamp(20rem, 24vh, 28rem) !important;
max-height: clamp(20rem, 24vh, 28rem) !important;
}
/* Контент расширенной карточки */
.advantage-card__content {
padding: 0 1rem 1.2rem 1rem !important; /* Убран отступ сверху полностью */
max-height: none !important;
transform: translateY(-6.5rem) !important;
height: 100% !important; /* Занимает всю высоту карточки */
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* Заголовок в расширенной карточке */
.advantage-card__expanded-title {
font-size: clamp(1.2rem, 1.4vw, 1.5rem) !important;
margin: 0 0 1rem 0 !important; /* Убран отступ сверху */
transform: translateY(0) !important; /* Убран transform */
}
/* Текст в расширенной карточке */
.advantage-card__text p {
font-size: clamp(0.9rem, 1vw, 1.1rem) !important;
}
/* НЕАКТИВНЫЕ КАРТОЧКИ - когда одна активна */
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) {
grid-column: span 1 !important; /* Остается в своей колонке */
opacity: 0.8 !important;
}
/* Фоновая цифра в неактивных карточках */
.why-choose-grid.has-expanded .advantage-card:not(.is-expanded) .advantage-card__number {
font-size: clamp(11rem, 11vw, 13rem) !important;
transform: translate(-50%, -50%) !important;
}
/* Описание - внутри текстового контейнера */
.directions-feature .df-desc {
position: static !important;
margin: 0 !important;
font-size: clamp(0.8rem, 0.9vw, 1rem) !important;
line-height: 1.4 !important;
}
/* Картинка - полная ширина, после текстового контейнера */
.directions-feature__media {
position: static !important;
z-index: auto !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
/* Изображение внутри медиа-контейнера - ПРИНУДИТЕЛЬНО 100% */
.directions-feature__media img,
.directions-feature .directions-feature__media img,
.directions-feature__media img[src],
.directions-feature__media img[width],
.directions-feature__media img[height] {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
min-width: 100% !important;
display: block !important;
object-fit: cover !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
/* ПРИНУДИТЕЛЬНО переопределяем HTML атрибуты */
width: 100% !important;
height: auto !important;
}
/* ДОПОЛНИТЕЛЬНО: принудительно отключаем все grid-свойства */
.directions-feature__media.span-9,
.directions-feature__text.span-5,
.directions-feature__text.span-7 {
grid-column: unset !important;
grid-row: unset !important;
width: 100% !important;
max-width: 100% !important;
}
/* Принудительно отключаем grid для всех directions-feature элементов */
.directions-feature .directions-feature__text,
.directions-feature .directions-feature__media {
grid-column: unset !important;
grid-row: unset !important;
grid-area: unset !important;
}
/* Заголовок секции "Основные направления" */
.directions-headline__wrap {
height: 100px;
padding: 0;
margin-top: 0;
}
.directions-headline__title {
font-size: clamp(3.5rem, 4vw, 4.5rem);
line-height: 0.9;
height: 100px;
}
/* Стили новостей для диапазона 576-767px перенесены в news.css */
/* Стили для карточек новостей */
.news-image-wrapper {
margin: 0px 7px 13px;
min-height: 46%;
}
.news-card-title {
font-size: clamp(0.9rem, 1.6vw, 1.8rem);
letter-spacing: -0.5px;
line-height: 1.5;
margin: 0px 0% 9% 4%;
}
.news-card__meta time {
font-size: clamp(0.6rem, 0.65vw, 0.75rem);
}
.news-card__meta {
margin-bottom: 8px;
}
.news-date {
font-size: clamp(0.6rem, 0.7vw, 0.8rem);
}
.news-section .news-card {
min-height: 400px;
}
.news-card-row {
margin: 0 6px;
width: 95%;
}
.news-readmore-btn {
padding: 20px 10px;
}
.news-grid-container {
margin: 0;
}
.header__logo img {
height: clamp(10vh, 12vh, 16vh);
}
.breadcrumbs {
margin: 4em 0 0 0 !important;
}
.breadcrumbs-grid {
margin: 2em auto 0;
}
.header__cta-wrapper.span-2,
.header__cta-wrapper.span-3 { grid-column: span 11 !important; }
.breadcrumbs__item {
font-size: 0.8rem;
}
.news-detail__header-grid{
gap: 5px;
padding-top: 1em;
}
.news-detail__category {
font-size: clamp(0.8rem, 1.2vw, 1.4rem);
min-height: 45px;
padding: 3px 7px;
}
.news-detail__title {
font-size: clamp(1rem, 1.5vw, 2.25rem);
font-weight: 600;
line-height: 1;
margin: 0;
}
.news-detail__date-label {
font-size: clamp(0.7rem, 0.9vw, 1rem);
}
.news-detail__date-value {
font-size: clamp(0.8rem, 1vw, 1.25rem);
}
.news-detail__header {
margin-bottom: 2em;
}
.news-detail__content {
margin: 2em 5% 0 5%;
}
.news-detail__footer .news-detail__actions .btn--secondary {
padding: 0px 11px;
height: 44px;
font-size: 0.9rem;
}
/* АДАПТИВНАЯ ЛЕНТА НОВОСТЕЙ: 2 карточки с прокруткой */
.news-section .news-grid {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
gap: 20px !important;
padding: 0 20px !important;
margin: 0 !important;
grid-template-columns: none !important;
max-width: 800px !important;
}
.news-section .news-grid .news-card.child-animate {
min-width: 52.2% !important;
}
.news-grid-container {
justify-content: center;
}
.news-section .news-grid .news-card {
flex: 0 0 calc(50vw - 30px) !important;
max-width: calc(50vw - 30px) !important;
scroll-snap-align: start !important;
}
.news-section .news-grid::-webkit-scrollbar {
height: 4px !important;
}
.news-section .news-grid::-webkit-scrollbar-track {
background: #f1f1f1 !important;
border-radius: 2px !important;
}
.news-section .news-grid::-webkit-scrollbar-thumb {
background: #d9001b !important;
border-radius: 2px !important;
}
}
@media (min-width: 320px) and (max-width: 575px) {
.news-content .container .breadcrumbs {
margin: 1rem 0 0 0 !important;
}
.breadcrumbs__item {
font-size: 0.8rem;
}
.news-detail__header-grid{
gap: 1px;
padding-top: 0.5em;
}
.news-detail__category {
font-size: clamp(0.6rem, 1.2vw, 1.4rem);
min-height: 30px;
padding: 3px 3px;
border-radius: 3px;
}
.news-detail__title {
font-size: clamp(0.8rem, 1.5vw, 2.25rem);
font-weight: 400;
line-height: 1;
margin: 0;
}
.news-detail__date-label {
font-size: clamp(0.6rem, 0.9vw, 1rem);
}
.news-detail__date-value {
font-size: clamp(0.6rem, 1vw, 1.25rem);
}
.news-grid-container {
justify-content: center;
}
.news-section .news-grid {
margin: 0 !important;
}
.news-section .news-grid .news-card.child-animate {
min-width: 109.2% !important;
}
.news-detail__header {
margin-bottom: 1em;
}
.news-detail__content {
margin: 2em 5% 0 5%;
font-size: clamp(0.7rem, 1vw, 1.125rem);
}
.news-detail__footer .news-detail__actions .btn--secondary {
padding: 0px 5px;
height: 40px;
font-size: 0.7rem;
}
.news-detail {
grid-column: 1 / -1;
margin: 0 auto 0;
}
.breadcrumbs-grid {
margin: 3rem auto 0;
}
.related-news__title {
font-size: clamp(0.8rem, 1.2vw, 1.4rem);
}
}
/* ============================================================================
СМАРТФОНЫ: <576px
ОДНА НОВОСТЬ: 250px@320 → 470px@575
Контентная область: 290px@320 → 520px@575, gap: 40px
============================================================================ */
@media (max-width: 575px) {
/* Стили новостей для диапазона до 575px перенесены в news.css */
.directions-headline__wrap {
padding: 0;
}
.directions-headline__wrap {
margin-top: 1.375rem;
}
.directions-feature {
padding: 10px 0;
}
.directions-feature--reverse .df-desc {
margin: 0 0 0 clamp(3px, 1vw, 71px);
}
.directions-feature:not(.directions-feature--reverse) .df-desc {
margin: 0 clamp(14px, 1vw, 65px) 0 0
}
.russia-map-section {
padding-top: 0;
padding-bottom: 0;
}
.why-choose-us-section {
margin-top: 0;
}
.news-grid-container {
margin: 0 auto 0;
justify-content: center;
}
.news-grid {
max-width: 540px !important;
}
.news-image-wrapper {
min-height: 40%;
margin: 10px 10px 16px;
}
.news-card-title {
margin: 0px 0% 7% 4%;
}
.news-card-row {
margin: 0 4% 10%;
width: 91%;
margin-top: 0;
}
.news-section .news-card {
min-height: 430px;
}
.news-readmore-btn {
padding: 20px 10px;
font-size: 12px;
}
.news-date {
letter-spacing: normal;
}
/* АДАПТИВНАЯ ЛЕНТА НОВОСТЕЙ: 1 карточка с прокруткой */
.news-section .news-grid {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
gap: 20px !important;
padding: 0 20px !important;
margin: 0 !important;
grid-template-columns: none !important;
}
.news-section .news-grid .news-card {
flex: 0 0 calc(100vw - 40px) !important;
max-width: calc(100vw - 40px) !important;
scroll-snap-align: start !important;
}
.news-section .news-grid::-webkit-scrollbar {
height: 4px !important;
}
.news-section .news-grid::-webkit-scrollbar-track {
background: #f1f1f1 !important;
border-radius: 2px !important;
}
.news-section .news-grid::-webkit-scrollbar-thumb {
background: #d9001b !important;
border-radius: 2px !important;
}
}
/* ===========================================
ПЛАВНАЯ ПРОКРУТКА ДЛЯ ВСЕГО САЙТА
=========================================== */
/* html {
scroll-behavior: smooth; - временно отключено для тестирования кнопки
} */
/* ===========================================
КНОПКА "НАВЕРХ" - УНИВЕРСАЛЬНЫЙ КОМПОНЕНТ
=========================================== */
.scroll-to-top-btn {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 3.5rem;
height: 3.5rem;
background: #d9001b;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 999999;
font-size: 1.5rem;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(217, 0, 27, 0.3);
}
/* Стрелка как галочка без длинной линии */
.scroll-to-top-btn::before {
content: '';
width: 1rem;
height: 1rem;
border: 0.265rem solid #ffffff;
border-bottom: none;
border-right: none;
transform: rotate(45deg);
margin-top: 0.25rem;
}
/* Inline стили для стрелки (если CSS не работает) */
.scroll-to-top-btn[style*="position: relative"]::before {
content: '';
width: 12px;
height: 12px;
border: 2px solid white;
border-bottom: none;
border-right: none;
transform: rotate(45deg);
margin-top: 3px;
}
.scroll-to-top-btn:hover {
background: #b8001a;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(217, 0, 27, 0.4);
}
.scroll-to-top-btn:active {
transform: translateY(0);
}
/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
.scroll-to-top-btn {
bottom: 1.5rem;
right: 1.5rem;
width: 3rem;
height: 3rem;
font-size: 1.25rem;
}
.scroll-to-top-btn::before {
width: 0.875rem;
height: 0.875rem;
}
}
@media (max-width: 480px) {
.scroll-to-top-btn {
bottom: 1rem;
right: 1rem;
width: 2.75rem;
height: 2.75rem;
font-size: 1rem;
}
.scroll-to-top-btn::before {
width: 0.75rem;
height: 0.75rem;
}
}