и лишние
из редактора */
#blok-sale p.fr-tag:empty,
#blok-sale p.fr-tag:has(br:only-child) {
display: none !important;
}
/* Акцентный главный текст (strong) — делаем чуть крупнее и насыщеннее */
#blok-sale p.fr-tag strong {
display: block !important;
font-size: 17px !important;
color: #0f172a !important;
line-height: 1.25 !important;
margin-bottom: 8px !important;
font-weight: 800 !important;
}
/* Основной абзац — крупнее и удобочитаемо */
#blok-sale p.fr-tag {
font-size: 15px !important;
line-height: 1.6 !important;
color: #486070 !important;
margin: 0 0 12px 0 !important;
}
/* Ссылка email как метка */
#blok-sale p.fr-tag a[href^="mailto:"] {
color: #0056b3 !important;
font-weight: 700 !important;
text-decoration: none !important;
background: rgba(0,163,233,0.06) !important;
padding: 3px 6px !important;
border-radius: 4px !important;
border-bottom: 1px dashed rgba(0,86,179,0.15) !important;
}
/* Кнопка — делаем крупной, заметной, в фирменном синем */
#blok-sale a.okno_zakaza,
#blok-sale a.okno_zakaza_kontent {
display: inline-block !important;
background: linear-gradient(180deg, #0076d6 0%, #0056b3 100%) !important;
color: #ffffff !important;
padding: 12px 22px !important;
border-radius: 8px !important;
text-decoration: none !important;
font-weight: 800 !important;
letter-spacing: 0.6px !important;
box-shadow: 0 10px 24px rgba(0,86,179,0.18) !important;
transition: transform .14s ease, box-shadow .14s ease, background .14s ease !important;
cursor: pointer !important;
margin-top: 6px !important;
}
/* Hover/Focus для кнопки */
#blok-sale a.okno_zakaza:hover,
#blok-sale a.okno_zakaza_kontent:hover,
#blok-sale a.okno_zakaza:focus,
#blok-sale a.okno_zakaza_kontent:focus {
transform: translateY(-3px) !important;
box-shadow: 0 16px 32px rgba(0,163,233,0.22) !important;
outline: none !important;
}
/* Маленький декоративный элемент справа (световой блик) */
#blok-sale::after {
content: '' !important;
position: absolute !important;
top: 10px !important;
right: -40px !important;
width: 120px !important;
height: 120px !important;
background: radial-gradient(circle at 30% 30%, rgba(0,163,233,0.08), transparent 50%) !important;
pointer-events: none !important;
border-radius: 50% !important;
z-index: 0 !important;
}
/* На мобильных: аккуратная вертикальная компоновка */
@media (max-width: 767px) {
#blok-sale {
padding: 18px !important;
margin: 18px 12px !important;
}
#blok-sale legend span { font-size: 13px !important; padding: 5px 10px !important; }
#blok-sale p.fr-tag strong { font-size: 16px !important; }
#blok-sale p.fr-tag { font-size: 14px !important; }
#blok-sale a.okno_zakaza { width: 100% !important; text-align: center !important; padding: 12px !important; }
}
/* ==========================================================================
ОБНОВЛЕННЫЙ ДИЗАЙН КАРТОЧЕК ВЛОЖЕННЫХ РАЗДЕЛОВ (БЕЗ ИЗМЕНЕНИЯ HTML)
========================================================================== */
/* 1. Родительский контейнер (Сетка) */
.block_kontent .submenu {
display: flex !important;
flex-wrap: wrap !important;
margin-left: -15px !important;
margin-right: -15px !important;
row-gap: 30px !important; /* Расстояние между рядами */
}
/* Сброс флоатов Bootstrap для корректного Flexbox */
.block_kontent .submenu > [class*="col-"] {
display: flex !important;
flex-direction: column !important;
float: none !important;
}
/* 2. Конструкция карточки раздела */
.block_kontent .submenu .slide-tovar-item {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important; /* Тонкая серая граница */
border-radius: 16px !important; /* Современное скругление */
padding: 24px !important;
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important; /* Тянет карточку на всю высоту ряда */
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
position: relative !important;
}
/* Ховер карточки */
.block_kontent .submenu .slide-tovar-item:hover {
transform: translateY(-6px) !important;
border-color: rgba(0, 163, 233, 0.3) !important;
box-shadow: 0 20px 35px -5px rgba(0, 163, 233, 0.12) !important;
}
/* 3. Изображение раздела */
.block_kontent .submenu .slide-tovar-item .img-bg {
display: block !important;
width: 100% !important;
height: 190px !important; /* Комфортная высота превью */
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-radius: 10px !important;
margin-bottom: 20px !important;
overflow: hidden !important;
transition: transform 0.5s ease !important;
}
/* Микро-зум картинки при наведении */
.block_kontent .submenu .slide-tovar-item:hover .img-bg {
transform: scale(1.03) !important;
}
/* 4. Заголовок раздела (h4) */
.block_kontent .submenu .slide-tovar-item h4 {
margin: 0 0 12px 0 !important;
padding: 0 !important;
font-family: 'winston-black', 'Arial Black', sans-serif !important;
font-size: 16px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
}
.block_kontent .submenu .slide-tovar-item h4 a{
font-family: 'winston-black', 'Arial Black', sans-serif !important;
}
.block_kontent .submenu .slide-tovar-item h4 a {
color: #0f172a !important; /* Глубокий темный */
text-decoration: none !important;
transition: color 0.3s ease !important;
}
.block_kontent .submenu .slide-tovar-item:hover h4 a {
color: #00a3e9 !important; /* Фирменный синий Аскомплект при наведении */
}
/* 5. Описание подраздела */
.block_kontent .submenu .slide-tovar-item p {
font-size: 14px !important;
line-height: 1.6 !important;
color: #475569 !important; /* Мягкий графитовый */
margin: 0 0 15px 0 !important;
flex-grow: 1 !important; /* КРИТИЧЕСКИ ВАЖНО: выталкивает кнопки вниз, выравнивая их в ряд */
text-align: left;
}
/* 6. Подвал карточки (Кнопки) */
.block_kontent .submenu .slide-tovar-item-futer {
display: flex !important;
gap: 12px !important; /* Расстояние между кнопками */
border-top: 1px dashed #e2e8f0 !important;
padding-top: 20px !important;
margin-top: auto !important;
}
/* Общие стили для кнопок в футере карточки */
.block_kontent .submenu .slide-tovar-item-futer a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 44px !important;
border-radius: 8px !important;
font-family: 'winston-black', 'Arial', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
text-decoration: none !important;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
flex: 1 !important; /* Делает кнопки абсолютно равной ширины */
cursor: pointer !important;
}
/* Кнопка 1: "ЗАКАЗАТЬ" (Главная акцентная кнопка) */
.block_kontent .submenu .slide-tovar-item-futer a.okno_zakaza {
background-color: #edf8ff !important; /* Нежно-голубой фон */
color: #00a3e9 !important;
box-shadow: 0 4px 12px rgba(0, 163, 233, 0.15) !important;
}
.block_kontent .submenu .slide-tovar-item-futer a.okno_zakaza:hover {
background-color: #0081ba !important;
box-shadow: 0 8px 20px rgba(0, 163, 233, 0.3) !important;
transform: translateY(-2px) !important;
color: #fff !important;
}
/* Кнопка 2: "ПОДРОБНЕЕ" (Второстепенная контурная) */
.block_kontent .submenu .slide-tovar-item-futer a.btn {
border: 1px solid rgba(0, 163, 233, 0.15) !important;
}
.block_kontent .submenu .slide-tovar-item-futer a.btn:hover {
background-color: #00a3e9 !important;
color: #ffffff !important;
border-color: #00a3e9 !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(0, 163, 233, 0.15) !important;
}
/* --- АДАПТИВНОСТЬ ПОД ТЕЛЕФОНЫ --- */
@media (max-width: 767px) {
.block_kontent .submenu .slide-tovar-item {
padding: 20px !important;
}
/* Отключаем смещение карточки на мобильных */
.block_kontent .submenu .slide-tovar-item:hover {
transform: none !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
border-color: #e2e8f0 !important;
}
.block_kontent .submenu .slide-tovar-item .img-bg {
height: 160px !important; /* Слегка уменьшаем картинку */
}
/* Делаем кнопки на мобильных более крупными под пальцы */
.block_kontent .submenu .slide-tovar-item-futer a {
height: 48px !important;
}
.modern-clients-block h3, .footer-geography h2, .modern-reviews-block h3, .adv-blue-section h2, .modern-news-block h3, .modern-txt-content h2
{ font-size: 20px !important;}
.modern-txt-body {padding: 15px;}
}
@media (min-width: 992px) and (max-width: 1199px) {
.modern-prod-card h3 {
font-size: 14px !important; }
.modern-news-block .news-item {
height: 300px !important;}
}
@media (min-width: 1200px) and (max-width: 1499px) {
.modern-categories-block h3 {
font-size: 16px !important;}
}
/* ==========================================================================
ИЗОЛИРОВАННЫЙ БЛОК: ЭТАПЫ РАБОТЫ И ПРИНЦИПЫ ПОСТАВКИ
========================================================================== */
.customer-principles-block {
/*background-color: #f8fafc !important; /* Легкий благородный серый фон */
padding: 90px 20px !important;
color: #0f172a;
font-family: 'Helvetica Neue', Arial, sans-serif !important;
}
/* Шапка блока */
.customer-principles-block .cp-main-desc {
font-size: 16px !important;
color: #64748b !important;
max-width: 750px;
margin: 0 auto 55px auto !important;
line-height: 1.6 !important;
}
/* Сетка Flexbox (выравнивание по высоте) */
.customer-principles-block .cp-grid {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.customer-principles-block .cp-grid > [class*="col-"] {
display: flex;
flex-direction: column;
}
/* Карточка этапа (ИСПРАВЛЕННАЯ ВЕРСИЯ БЕЗ ВЫСОТЫ 100%) */
.customer-principles-block .cp-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 28px 24px !important;
margin-bottom: 30px !important;
/* ИСПРАВЛЕНИЕ: Убрали жесткие привязки к высоте */
flex: 1 1 auto !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.02) !important;
position: relative;
}
.customer-principles-block .cp-card:hover {
transform: translateY(-5px) !important;
border-color: rgba(0, 163, 233, 0.3) !important;
box-shadow: 0 15px 30px rgba(0, 163, 233, 0.08) !important;
}
/* Заголовок карточки */
.customer-principles-block .cp-card-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
/* Номер шага */
.customer-principles-block .cp-num {
font-family: 'winston-black', 'Impact', sans-serif;
font-size: 28px;
font-weight: 900;
line-height: 1;
color: #e2e8f0; /* В покое он нейтрально-серый */
transition: color 0.3s ease;
}
.customer-principles-block .cp-card:hover .cp-num {
color: #00a3e9; /* Окрашивается при наведении */
}
.customer-principles-block .cp-card h3 {
font-family: 'winston-black', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
color: #0f172a !important;
margin: 0 !important;
}
/* Разделитель */
.customer-principles-block .cp-divider {
width: 25px;
height: 2px;
background-color: #e2e8f0;
margin-bottom: 15px;
transition: width 0.3s ease, background-color 0.3s ease;
}
.customer-principles-block .cp-card:hover .cp-divider {
width: 45px;
background-color: #00a3e9;
}
/* Описание */
.customer-principles-block .cp-card p {
font-size: 13.5px !important;
line-height: 1.6 !important;
color: #475569 !important;
margin: 0 !important;
}
/* --- ИТОГОВЫЙ ПРОМО-БАННЕР --- */
.customer-principles-block .cp-promo-banner {
margin-top: 25px;
background: linear-gradient(135deg, #0f172a 0%, #0056b3 100%) !important; /* Синий фирменный градиент */
border-radius: 16px !important;
padding: 35px 40px !important;
display: flex !important;
align-items: center;
gap: 30px;
box-shadow: 0 15px 35px rgba(15, 23, 42, 0.15) !important;
}
.customer-principles-block .cp-promo-left {
flex-shrink: 0;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.customer-principles-block .cp-promo-left i {
font-size: 28px;
color: #00a3e9;
}
.customer-principles-block .cp-promo-content h3 {
font-family: 'winston-black', sans-serif !important;
font-size: 20px !important;
color: #ffffff !important;
margin: 0 0 10px 0 !important;
}
.customer-principles-block .cp-promo-content p {
font-size: 14px !important;
line-height: 1.7 !important;
color: #cbd5e1 !important;
margin: 0 !important;
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
.customer-principles-block .cp-main-title {
font-size: 26px !important;
}
.customer-principles-block .cp-promo-banner {
flex-direction: column;
text-align: center;
padding: 30px 25px !important;
gap: 15px;
}
}
@media (max-width: 767px) {
.customer-principles-block {
padding: 60px 0 !important;
}
.customer-principles-block .cp-main-title {
font-size: 22px !important;
}
.customer-principles-block .cp-card {
padding: 22px !important;
}
.customer-principles-block .cp-card:hover {
transform: none !important;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.02) !important;
}
}
/* ==========================================================================
ОБНОВЛЕННЫЙ СВЕТЛЫЙ БЛОК: СТАТИСТИКА И ПОКАЗАТЕЛИ ДОВЕРИЯ (LIGHT TECH)
========================================================================== */
.modern-achievements-block {
/* Нежный лазурно-серый промышленный градиент */
background: linear-gradient(135deg, #edf4fa 0%, #f8fafc 100%) !important;
padding: 90px 20px !important;
color: #0f172a !important; /* Глубокий темный шрифт вместо белого */
font-family: 'Helvetica Neue', Arial, sans-serif !important;
position: relative;
overflow: hidden;
border-radius: 15px;
}
/* Делаем строки флексовыми для идеального выравнивания по высоте */
.modern-achievements-block .ma-stats-row,
.modern-achievements-block .ma-clients-grid {
display: flex !important;
flex-wrap: wrap !important;
}
.modern-achievements-block .ma-stats-row > [class*="col-"],
.modern-achievements-block .ma-clients-grid > [class*="col-"] {
display: flex !important;
flex-direction: column !important;
}
/* Шапка блока */
/* 1. Карточки крупных цифр */
.modern-achievements-block .ma-stats-row {
margin-bottom: 50px;
}
.modern-achievements-block .ma-stat-card {
background: #ffffff !important; /* Кристально белый фон карточек */
border: 1px solid #e2e8f0 !important; /* Тонкая серая рамка */
border-radius: 16px !important;
padding: 40px 25px !important;
flex: 1 1 auto !important;
height: auto !important; /* Сброс жесткой высоты */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.03) !important; /* Очень мягкая тень */
}
/* Эффект наведения на карточку цифр */
.modern-achievements-block .ma-stat-card:hover {
transform: translateY(-5px) !important;
border-color: rgba(0, 163, 233, 0.3) !important;
box-shadow: 0 20px 35px rgba(0, 163, 233, 0.1) !important;
}
/* Акцентная карточка (Импортозамещение 80% — выделяем нежно-голубым фоном) */
.modern-achievements-block .ma-stat-card.highlight-blue {
background: #edf8ff !important;
border-color: #bae6fd !important;
}
/* Крупные числа */
.modern-achievements-block .ma-stat-number {
font-family: 'winston-black', 'Impact', sans-serif;
font-size: 54px;
font-weight: 900;
line-height: 1;
color: #00a3e9; /* Фирменный синий */
display: block;
margin-bottom: 15px;
letter-spacing: -1px;
}
.modern-achievements-block .ma-stat-number small {
font-size: 24px;
font-weight: 700;
color: #475569;
}
.modern-achievements-block .ma-stat-label {
font-size: 14.5px !important;
line-height: 1.6 !important;
color: #475569 !important; /* Читаемый серый графит */
margin: 0 !important;
}
/* 2. Сетка клиентов (Мини-карточки) */
.modern-achievements-block .ma-grid-title {
font-family: 'winston-black', sans-serif !important;
font-size: 18px !important;
text-transform: uppercase;
text-align: center;
color: #0f172a !important;
margin-bottom: 35px !important;
font-weight: 700;
letter-spacing: 1px;
}
/* Спец-колонка для 5 элементов в ряд на десктопе */
@media (min-width: 1200px) {
.modern-achievements-block .col-lg-2-4 {
width: 20% !important;
}
}
.modern-achievements-block .ma-client-mini-card {
background: #ffffff !important; /* Белый фон */
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 25px 15px !important;
text-align: center;
flex: 1 1 auto !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
transition: all 0.3s ease;
margin-bottom: 20px;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.02) !important;
}
.modern-achievements-block .ma-client-mini-card:hover {
border-color: rgba(0, 163, 233, 0.2) !important;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 163, 233, 0.06) !important;
}
/* Иконки в карточках клиентов */
.modern-achievements-block .ma-client-icon {
width: 44px;
height: 44px;
background: #edf8ff !important; /* Нежно-голубой кружок */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px auto;
}
.modern-achievements-block .ma-client-icon i {
font-size: 18px;
color: #00a3e9; /* Фирменная синяя иконка */
}
.modern-achievements-block .ma-client-mini-card h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 22px !important;
color: #0f172a !important;
margin: 0 0 8px 0 !important;
font-weight: 800;
}
.modern-achievements-block .ma-client-mini-card p {
font-size: 12px !important;
line-height: 1.5 !important;
color: #64748b !important;
margin: 0 !important;
}
/* 3. Технологический подвал */
.modern-achievements-block .ma-tech-footer {
margin-top: 35px;
border-top: 1px solid #e2e8f0; /* Светлая линия */
padding-top: 30px;
text-align: center;
}
.modern-achievements-block .ma-tech-footer p {
font-size: 14.5px !important;
line-height: 1.7 !important;
color: #475569 !important;
max-width: 900px;
margin: 0 auto !important;
}
.modern-achievements-block .ma-tech-footer strong {
color: #00a3e9 !important; /* Выделяем фокус синим */
}
/* --- Адаптивность --- */
@media (max-width: 991px) {
.modern-achievements-block .ma-main-title { font-size: 26px !important; }
.modern-achievements-block .ma-stat-card { margin-bottom: 20px; }
}
@media (max-width: 767px) {
.modern-achievements-block { padding: 60px 0 !important; }
.modern-achievements-block .ma-main-title { font-size: 22px !important; }
}
/* ==========================================================================
ИЗОЛИРОВАННЫЕ СТИЛИ ДЛЯ СТРАНИЦЫ ДОСТАВКИ (ВНУТРИ .col-md-9)
========================================================================== */
/* Общий контейнер-обертка */
.dm-content-wrapper {
background: #ffffff !important; /* Белый фон контента */
padding: 20px 0 !important;
color: #0f172a !important;
font-family: 'Helvetica Neue', Arial, sans-serif !important;
}
/* 1. Названия и шапка */
.dm-content-wrapper .dm-main-desc {
font-size: 15px !important;
color: #64748b !important;
margin: 0 0 40px 0 !important;
line-height: 1.6 !important;
}
/* Разделители разделов */
.dm-section-spacer {
margin: 40px 0 25px 0 !important;
}
.dm-section-title {
font-family: 'winston-black', sans-serif !important;
font-size: 20px !important;
text-transform: uppercase;
color: #0f172a;
font-weight: 700;
border-bottom: 2px solid #f1f5f9;
padding-bottom: 12px;
}
/* 2. Госзакупочный баннер */
.dm-gov-banner {
background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%) !important;
border-radius: 12px !important;
padding: 25px 30px !important;
margin-bottom: 35px !important;
color: #ffffff !important;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05) !important;
}
.dm-gov-badge {
background: #eab308;
color: #0f172a;
font-weight: 800;
font-size: 10px;
padding: 6px 12px;
border-radius: 20px;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
text-transform: uppercase;
flex-shrink: 0;
}
.dm-gov-text h3 {
font-family: 'winston-black', sans-serif !important;
font-size: 18px !important;
color: #ffffff !important;
margin: 0 0 6px 0 !important;
}
.dm-gov-text p {
font-size: 13.5px !important;
line-height: 1.5 !important;
color: #cbd5e1 !important;
margin: 0 !important;
}
.dm-gov-text p strong {
color: #38bdf8;
}
/* 3. Сетка карточек Flexbox */
.dm-delivery-grid,
.dm-assembly-grid,
.dm-warranty-grid {
display: flex !important;
flex-wrap: wrap !important;
}
.dm-delivery-grid > [class*="col-"],
.dm-assembly-grid > [class*="col-"],
.dm-warranty-grid > [class*="col-"] {
display: flex !important;
flex-direction: column !important;
}
/* Базовая карточка */
.dm-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 25px !important; /* Чуть компактнее отступы */
margin-bottom: 25px !important;
flex: 1 1 auto !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.01) !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dm-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04) !important;
border-color: rgba(0, 163, 233, 0.2) !important;
}
/* Иконки в карточках */
.dm-card-icon {
width: 40px;
height: 40px;
background: #edf8ff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.dm-card-icon i {
font-size: 18px;
color: #00a3e9;
}
/* Заголовки карточек */
.dm-card h2 {
font-family: 'winston-black', sans-serif !important;
font-size: 17px !important;
color: #0f172a !important;
margin: 0 0 15px 0 !important;
font-weight: 700;
}
/* Списки характеристик */
.dm-list {
list-style: none !important;
padding: 0 !important;
margin: 0 0 15px 0 !important;
display: flex;
flex-direction: column;
gap: 12px;
}
.dm-list li {
font-size: 13.5px;
line-height: 1.5;
color: #475569;
padding-left: 18px;
position: relative;
}
.dm-list li::before {
content: '■';
color: #00a3e9;
position: absolute;
left: 0;
top: 0;
font-size: 8px;
}
.dm-list li strong {
color: #0f172a;
}
.dm-card-note {
font-size: 12px !important;
color: #94a3b8 !important;
margin-top: auto !important;
}
/* 4. Партнеры доставки */
.dm-logistic-partners {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
}
.dm-logistic-partners h3 {
font-family: 'winston-black', sans-serif !important;
font-size: 13px !important;
text-transform: uppercase;
color: #475569;
margin: 0 0 15px 0 !important;
font-weight: 700;
}
.dm-logistic-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dm-logistic-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 6px;
color: #475569 !important;
font-size: 12.5px;
font-weight: 600;
text-decoration: none !important;
transition: all 0.2s ease;
}
.dm-logistic-item:hover {
background: #edf8ff;
border-color: #00a3e9;
color: #00a3e9 !important;
}
.dm-logistic-item i {
font-size: 10px;
opacity: 0.5;
}
/* 5. Карточки ЦЕН на монтаж */
.dm-price-card {
text-align: center;
align-items: center;
}
.dm-price-header {
margin-bottom: 15px;
}
.dm-price-header span {
font-size: 11px;
text-transform: uppercase;
color: #64748b;
font-weight: 700;
}
.dm-price-header h3 {
font-family: 'winston-black', 'Impact', sans-serif;
font-size: 28px;
color: #00a3e9;
margin: 5px 0 !important;
font-weight: 900;
}
.dm-price-card.accent-blue {
background: #edf8ff !important;
border-color: #bae6fd !important;
}
.dm-price-card p {
font-size: 13px !important;
line-height: 1.5 !important;
color: #475569 !important;
margin: 0 !important;
}
/* Предупреждающая плашка (Alert) */
.dm-info-alert {
background: #fff8e1;
border-left: 4px solid #ffb300;
padding: 15px 20px;
border-radius: 0 10px 10px 0;
display: flex;
align-items: center;
gap: 15px;
margin: 10px 0 35px 0;
}
.dm-info-alert i {
font-size: 20px;
color: #ffb300;
flex-shrink: 0;
}
.dm-info-alert p {
font-size: 13px !important;
line-height: 1.5 !important;
color: #5d4037 !important;
margin: 0 !important;
}
/* 6. Карточки ГАРАНТИИ */
.dm-warranty-card {
padding: 25px !important;
}
.dm-warranty-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
}
.dm-warranty-badge {
background: #10b981;
color: #ffffff;
font-weight: 700;
font-size: 11px;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
}
.dm-warranty-badge.tech-badge {
background: #00a3e9;
}
.dm-warranty-card h3 {
font-family: 'winston-black', sans-serif !important;
font-size: 16px !important;
color: #0f172a !important;
margin: 0 !important;
font-weight: 700;
}
.dm-warranty-card p {
font-size: 13.5px !important;
line-height: 1.5 !important;
color: #475569 !important;
margin-bottom: 12px !important;
}
.dm-warranty-warning {
background: #f8fafc;
border-left: 3px solid #64748b;
padding: 12px;
border-radius: 0 6px 6px 0;
margin-top: 10px;
}
.dm-warranty-warning p {
font-size: 12px !important;
line-height: 1.4 !important;
color: #64748b !important;
margin: 0 !important;
}
/* Выделение постгарантийного ТО */
.dm-warranty-card.highlight-tech {
background: linear-gradient(180deg, #ffffff 0%, #edf8ff 100%) !important;
border-color: #bae6fd !important;
}
.dm-list-check {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 8px;
}
.dm-list-check li {
font-size: 13px;
color: #475569;
display: flex;
align-items: center;
gap: 8px;
}
.dm-list-check li i {
color: #10b981;
font-size: 11px;
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
.dm-gov-banner {
flex-direction: column;
text-align: center;
padding: 20px !important;
gap: 12px;
}
}
@media (max-width: 767px) {
.dm-content-wrapper .dm-main-title {
font-size: 22px !important;
}
.dm-card {
padding: 20px !important;
}
.dm-logistic-partners {
padding: 15px !important;
}
.dm-info-alert {
flex-direction: column;
text-align: center;
gap: 10px;
}
.dm-warranty-head {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.dm-card:hover {
transform: none !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.01) !important;
}
}
/* ==========================================================================
ИЗОЛИРОВАННЫЙ СТИЛЬ: СТРАНИЦА "НАШИ КЛИЕНТЫ" (LIGHT EDITORIAL)
========================================================================== */
.cl-page-wrapper {
background: #ffffff !important;
padding: 20px 0 !important;
color: #0f172a !important;
font-family: 'Helvetica Neue', Arial, sans-serif !important;
}
/* 1. Заголовки */
.cl-page-wrapper .cl-main-desc {
font-size: 15px !important;
line-height: 1.6 !important;
color: #64748b !important;
margin-bottom: 40px !important;
}
/* 2. Сетка авторитета (Stats) */
.cl-stats-grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important; /* Строго фиксированное расстояние между картами */
margin-bottom: 45px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Перебиваем старые классы колонок Bootstrap, отдавая управление Flexbox */
.cl-stats-grid > [class*="col-"] {
padding: 0 !important;
margin: 0 !important;
/* Авторасчет: 5 колонок займут ровно по 20% пространства за вычетом зазоров */
flex: 1 1 150px !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
}
/* Спец-колонка для 5 элементов в ряд */
@media (min-width: 992px) {
.cl-stats-grid .col-md-2-4 {
width: calc(20% - 12px) !important;
}
}
.cl-stat-card {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 18px 10px !important; /* Слегка уменьшили боковые отступы для узких экранов */
text-align: center;
flex: 1 1 auto !important;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.01) !important;
height: 100% !important;
}
.cl-stat-card h3 {
font-family: 'winston-black', 'Impact', sans-serif !important;
font-size: 24px !important;
color: #00a3e9 !important;
margin: 0 0 5px 0 !important;
font-weight: 900;
}
.cl-stat-card p {
font-size: 11.5px !important; /* Небольшой аккуратный шрифт для описания */
line-height: 1.35 !important;
color: #475569 !important;
margin: 0 !important;
}
/* Выделение коммерческой карточки */
.cl-stat-card.highlight {
background: #edf8ff !important;
border-color: #bae6fd !important;
}
/* ==========================================================================
3. ИНТЕРАКТИВНЫЕ ВКЛАДКИ (CSS ONLY TABS)
========================================================================== */
.cl-tabs-container {
margin-top: 30px;
position: relative;
}
/* Скрываем нативные радио-кнопки */
.cl-tabs-container input[type="radio"] {
display: none !important;
}
/* Навигационная панель вкладок */
.cl-tabs-nav {
display: flex;
gap: 10px;
border-bottom: 2px solid #edf2f7;
margin-bottom: 30px;
padding-bottom: 2px;
}
/* Стили кнопок-вкладок */
.cl-tab-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-bottom: none;
border-radius: 8px 8px 0 0;
font-family: 'winston-black', 'Arial', sans-serif;
font-size: 14px;
font-weight: 700;
color: #64748b;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: -2px; /* Накладываем на границу контейнера */
}
.cl-tab-btn i {
font-size: 15px;
opacity: 0.8;
}
.cl-tab-btn:hover {
color: #00a3e9;
background: #ffffff;
}
/* Логика активных вкладок (CSS переключение) */
#cl-tab-1:checked ~ .cl-tabs-nav label[for="cl-tab-1"],
#cl-tab-2:checked ~ .cl-tabs-nav label[for="cl-tab-2"],
#cl-tab-3:checked ~ .cl-tabs-nav label[for="cl-tab-3"] {
background: #ffffff !important;
color: #00a3e9 !important;
border-color: #e2e8f0 !important;
border-top: 3px solid #00a3e9 !important; /* Толстая верхняя линия */
padding-top: 10px; /* Корректируем паддинг из-за рамки */
z-index: 2;
}
/* Скрываем все вкладки по умолчанию */
.cl-tab-pane {
display: none !important;
animation: clFadeIn 0.5s ease;
}
/* Показываем активную вкладку */
#cl-tab-1:checked ~ .cl-tabs-content .pane-1,
#cl-tab-2:checked ~ .cl-tabs-content .pane-2,
#cl-tab-3:checked ~ .cl-tabs-content .pane-3 {
display: block !important;
}
/* Анимация плавного появления */
@keyframes clFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
4. ДВУХКОЛОНЧАТЫЙ СПИСОК ОРГАНИЗАЦИЙ
========================================================================== */
.cl-clients-list {
display: grid !important;
grid-template-columns: 1fr 1fr !important; /* Ровно 2 колонки */
gap: 12px !important;
}
/* Карточка (чип) организации */
.cl-item {
background: #f8fafc !important;
border: 1px solid #edf2f7 !important;
border-radius: 8px !important;
padding: 14px 18px !important;
display: flex !important;
align-items: center !important;
transition: all 0.25s ease !important;
position: relative;
padding-left: 32px !important; /* Место под синий маркер */
}
/* Синий маркер-квадрат перед каждым пунктом */
.cl-item::before {
content: '' !important;
position: absolute !important;
left: 15px;
width: 6px;
height: 6px;
background-color: #00a3e9 !important;
border-radius: 1px !important;
}
.cl-item span {
font-size: 13px !important;
line-height: 1.5 !important;
color: #334155 !important;
font-weight: 500 !important;
}
.cl-item:hover {
background: #ffffff !important;
border-color: rgba(0, 163, 233, 0.2) !important;
transform: translateX(4px);
box-shadow: 0 4px 10px rgba(0, 163, 233, 0.05) !important;
}
/* --- АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ --- */
@media (max-width: 991px) {
.cl-tabs-nav {
flex-direction: column;
gap: 5px;
border-bottom: none;
}
.cl-tab-btn {
width: 100%;
border-radius: 6px !important;
border: 1px solid #e2e8f0 !important;
}
#cl-tab-1:checked ~ .cl-tabs-nav label[for="cl-tab-1"],
#cl-tab-2:checked ~ .cl-tabs-nav label[for="cl-tab-2"],
#cl-tab-3:checked ~ .cl-tabs-nav label[for="cl-tab-3"] {
border-left: 4px solid #00a3e9 !important;
border-top: 1px solid #e2e8f0 !important;
padding-top: 12px !important;
background: #edf8ff !important;
}
}
@media (max-width: 767px) {
.cl-page-wrapper .cl-main-title {
font-size: 22px !important;
}
.cl-clients-list {
grid-template-columns: 1fr !important; /* 1 колонка на смартфонах */
}
.cl-item {
padding: 12px 15px 12px 30px !important;
}
}
/* --- МОБИЛЬНАЯ АДАПТАЦИЯ ДЛЯ СЕТКИ ЦИФР --- */
@media (max-width: 767px) {
.cl-stats-grid {
gap: 10px !important;
}
.cl-stats-grid > [class*="col-"] {
/* На смартфонах выстраиваем по 2 карточки в ряд (примерно по 50%) */
flex: 1 1 calc(50% - 10px) !important;
}
/* Последнюю (5-ю) карточку растягиваем на 100% ширины для красоты */
.cl-stats-grid > [class*="col-"]:last-child {
flex: 1 1 100% !important;
}
}
/* ==========================================================================
ИЗОЛИРОВАННЫЙ СТИЛЬ: СТРАНИЦА "КОНТАКТЫ" (ВНУТРИ .col-md-9)
========================================================================== */
.contact-page-wrapper {
background: #ffffff !important;
padding: 20px 0 !important;
color: #0f172a !important;
font-family: 'Helvetica Neue', Arial, sans-serif !important;
}
/* 1. Заголовки и описание секции */
.contact-page-wrapper .cp-main-desc {
font-size: 15px !important;
line-height: 1.6 !important;
color: #64748b !important;
margin-bottom: 40px !important;
}
/* Общие разделители между секциями */
.contact-page-wrapper .cp-section-spacer {
margin: 40px 0 25px 0 !important;
}
.contact-page-wrapper .cp-section-title {
font-family: 'winston-black', sans-serif !important;
font-size: 20px !important;
text-transform: uppercase;
color: #0f172a;
font-weight: 700;
padding-bottom: 12px;
}
/* 2. Блок общих контактов (телефон, email, кнопка) */
.contact-page-wrapper .cp-top-contact-block {
background: linear-gradient(135deg, #0f172a 0%, #0056b3 100%) !important;
border-radius: 12px !important;
padding: 30px !important;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05) !important;
}
.contact-page-wrapper .cp-contact-info {
color: #ffffff;
}
.contact-page-wrapper .cp-working-hours,
.contact-page-wrapper .cp-main-phone,
.contact-page-wrapper .cp-main-email {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 14.5px;
line-height: 1.5;
}
.contact-page-wrapper .cp-working-hours i,
.contact-page-wrapper .cp-main-phone i,
.contact-page-wrapper .cp-main-email i {
color: #00a3e9;
font-size: 18px;
flex-shrink: 0;
}
.contact-page-wrapper .cp-main-phone a,
.contact-page-wrapper .cp-main-email a {
color: #ffffff !important;
text-decoration: none !important;
font-weight: 700;
transition: color 0.2s ease;
}
.contact-page-wrapper .cp-main-phone a:hover,
.contact-page-wrapper .cp-main-email a:hover {
color: #38bdf8 !important;
}
.contact-page-wrapper .cp-cta-block p {
font-size: 14px;
color: #cbd5e1;
margin-bottom: 15px !important;
}
.contact-page-wrapper .cp-callback-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #00a3e9;
color: #ffffff !important;
padding: 12px 20px;
border-radius: 8px;
text-decoration: none !important;
font-family: 'winston-black', sans-serif;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
box-shadow: 0 4px 12px rgba(0, 163, 233, 0.2);
transition: all 0.3s ease;
width: 80%;
}
.contact-page-wrapper .cp-callback-btn:hover {
background: #0076a8;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 163, 233, 0.3);
}
/* 3. Отделы */
.contact-page-wrapper .cp-department-grid {
display: flex;
flex-wrap: wrap;
}
.contact-page-wrapper .cp-department-grid > [class*="col-"] {
display: flex;
flex-direction: column;
}
.contact-page-wrapper .cp-department-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.contact-page-wrapper .cp-department-card h4 {
font-family: 'winston-black', sans-serif;
font-size: 16px;
color: #0f172a;
margin: 0 0 10px 0 !important;
display: flex;
align-items: center;
gap: 10px;
}
.contact-page-wrapper .cp-department-card h4 i {
color: #00a3e9;
}
.contact-page-wrapper .cp-department-card a {
color: #00a3e9 !important;
font-weight: 600;
text-decoration: none;
border-bottom: 1px dashed rgba(0, 163, 233, 0.3);
transition: all 0.2s ease;
}
.contact-page-wrapper .cp-department-card a:hover {
color: #0076a8 !important;
border-bottom-color: #0076a8;
}
/* 4. Адреса */
.contact-page-wrapper .cp-addresses-grid {
display: flex;
flex-wrap: wrap;
}
.contact-page-wrapper .cp-addresses-grid > [class*="col-"] {
display: flex;
flex-direction: column;
}
.contact-page-wrapper .cp-address-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.contact-page-wrapper .cp-address-icon {
width: 40px;
height: 40px;
background: #edf8ff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.contact-page-wrapper .cp-address-icon i {
font-size: 18px;
color: #00a3e9;
}
.contact-page-wrapper .cp-address-card h4 {
font-family: 'winston-black', sans-serif;
font-size: 16px;
color: #0f172a;
margin: 0 0 10px 0 !important;
}
.contact-page-wrapper .cp-address-card p {
font-size: 14px;
line-height: 1.6;
color: #475569;
margin-bottom: 15px !important;
}
.contact-page-wrapper .cp-address-route-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 15px;
background: #edf8ff;
border: 1px solid #bae6fd;
border-radius: 6px;
color: #00a3e9 !important;
font-size: 12.5px;
font-weight: 600;
text-decoration: none !important;
transition: all 0.2s ease;
margin-top: auto;
}
.contact-page-wrapper .cp-address-route-btn:hover {
background: #00a3e9;
color: #ffffff !important;
}
.contact-page-wrapper .cp-address-route-btn i {
font-size: 13px;
}
/* 5. Социальные сети */
.contact-page-wrapper .cp-social-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 25px;
border-radius: 8px;
font-family: 'winston-black', sans-serif;
font-size: 14px;
font-weight: 700;
text-decoration: none !important;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.contact-page-wrapper .cp-social-btn.vk-btn {
background: #4a76a8;
color: #ffffff !important;
}
.contact-page-wrapper .cp-social-btn.vk-btn:hover {
background: #3a5c86;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(74, 118, 168, 0.3);
}
/* 6. Карта и Видео */
.contact-page-wrapper .cp-map-embed,
.contact-page-wrapper .cp-video-embed {
border-radius: 12px;
overflow: hidden;
margin-bottom: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.contact-page-wrapper .cp-map-embed iframe {
height: 400px !important; /* Оптимизировали высоту карты */
border: none !important;
}
.contact-page-wrapper .cp-video-embed iframe {
width: 100% !important;
height: 250px !important; /* Адаптивная высота для видео */
border: none !important;
}
.contact-page-wrapper .cp-video-desc {
font-size: 13px;
color: #64748b;
margin-bottom: 20px !important;
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
.contact-page-wrapper .cp-top-contact-block {
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 25px !important;
}
.contact-page-wrapper .cp-cta-block {
width: 100%;
}
.contact-page-wrapper .cp-callback-btn {
width: 100%;
text-align: center;
}
}
@media (max-width: 767px) {
.contact-page-wrapper .cp-main-title {
font-size: 24px !important;
}
.contact-page-wrapper .cp-working-hours,
.contact-page-wrapper .cp-main-phone,
.contact-page-wrapper .cp-main-email {
font-size: 14px;
}
.contact-page-wrapper .cp-section-title {
font-size: 18px !important;
}
.contact-page-wrapper .cp-top-contact-block {
padding: 20px !important;
}
}
/* ==========================================================================
ИСПРАВЛЕННЫЙ ДИЗАЙН ИКОНОК В ШАПКЕ САЙТА (БЕЗ РАСТЯГИВАНИЯ В ВЫСОТУ)
========================================================================== */
/* 1. Общий контейнер (Сброс высоты и выравнивание по центру) */
.top-ikons {
display: flex ;
justify-content: flex-end !important; /* Прижимаем к правой стороне */
align-items: center !important; /* Выравнивание по центру, отменяет растягивание */
gap: 24px !important; /* Зазор между иконками */
/* ИСПРАВЛЕНИЕ: Полностью убираем 100% высоту и фиксируем ее */
height: auto !important;
min-height: 55px !important; /* Высота подстраивается под контент */
margin: 0 !important;
padding: 0 !important;
}
/* 2. Контейнер каждой иконки */
.top-ikons .item-ikon {
flex: 0 0 auto !important; /* Запрещаем растягиваться */
height: auto !important; /* Строго авто-высота */
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
/* 3. Ссылка-кнопка */
.top-ikons .item-ikon a {
display: flex !important;
flex-direction: column !important; /* Иконка сверху, текст снизу */
align-items: center !important;
justify-content: center !important;
height: auto !important; /* Строго авто-высота */
text-decoration: none !important;
transition: all 0.25s ease !important;
}
/* 4. Унификация размеров иконок (SVG и IMG) */
.top-ikons .item-ikon a svg,
.top-ikons .item-ikon a img {
width: 32px !important; /* Фиксируем компактный размер */
height: 32px !important;
max-height: 32px !important;
object-fit: contain !important;
margin-bottom: 6px !important; /* Отступ до текста */
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
/* Стилизация SVG-иконки музея */
.top-ikons .item-ikon a svg {
stroke: #475569 !important; /* Серый цвет линий */
stroke-width: 1.6 !important;
}
/* 5. Текст под иконкой */
.top-ikons .item-ikon a span {
font-size: 10px !important;
line-height: 1.3 !important;
color: #475569 !important; /* Серый цвет */
font-weight: 700 !important;
text-align: center !important;
display: block ;
max-width: 110px !important; /* Ограничиваем ширину для переноса */
transition: color 0.25s ease !important;
}
/* ==========================================================================
ИНТЕРАКТИВНЫЕ ХОВЕР-ЭФФЕКТЫ (ПРИ НАВЕДЕНИИ КУРСОРА)
========================================================================== */
/* Ховер для иконки-картинки (плавный подъем и мягкое свечение) */
.top-ikons .item-ikon a:hover img {
transform: translateY(-3px) scale(1.05) !important;
filter: drop-shadow(0 4px 10px rgba(0, 163, 233, 0.25)) !important;
}
/* Ховер для иконки-SVG (окрашиваем в синий цвет Аскомплект) */
.top-ikons .item-ikon a:hover svg {
stroke: #00a3e9 !important; /* Окрашивание линий в синий */
transform: translateY(-3px) scale(1.05) !important;
filter: drop-shadow(0 4px 8px rgba(0, 163, 233, 0.2)) !important;
}
/* Ховер для текста */
.top-ikons .item-ikon a:hover span {
color: #00a3e9 !important;
}
/* ==========================================================================
ПОЛНОЭКРАННОЕ МОБИЛЬНОЕ МЕНЮ (MODERN APP STYLE)
========================================================================== */
/* Основной контейнер мобильного меню */
.top-menu-modern {
padding: 0 !important;
margin: 0 !important;
}
/* Состояние ПОЛНОЭКРАННОГО окна при открытии (интеграция с .collapse.in) */
.top-menu-modern .navbar-mobile.collapse.in,
.top-menu-modern .navbar-mobile.collapsing {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: linear-gradient(135deg, #0f172a 0%, #0b1324 100%) !important; /* Глубокий премиальный темный фон */
z-index: 999999 !important; /* Поверх абсолютно всего на сайте */
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
border: none !important;
box-shadow: none !important;
/* Анимация плавного появления */
animation: mmFadeIn 0.3s ease-out forwards;
}
/* Скролл-контейнер, чтобы меню можно было листать, если оно длинное */
.top-menu-modern .mm-scroll-content {
flex-grow: 1;
overflow-y: auto !important;
padding: 20px 25px 50px 25px !important; /* Отступы по краям */
-webkit-overflow-scrolling: touch;
}
/* Шапка мобильного меню */
.top-menu-modern .mm-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 20px 25px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
background: rgba(15, 23, 42, 0.8) !important;
backdrop-filter: blur(10px);
flex-shrink: 0;
}
.top-menu-modern .mm-logo {
font-family: 'winston-black', 'Arial Black', sans-serif;
font-size: 18px;
font-weight: 900;
color: #ffffff;
letter-spacing: 1px;
}
/* Кнопка закрытия "Х" */
.top-menu-modern .mm-close-btn {
background: none !important;
border: none !important;
color: #ffffff !important;
font-size: 24px !important;
padding: 5px 10px !important;
cursor: pointer !important;
transition: color 0.2s ease;
}
.top-menu-modern .mm-close-btn:hover,
.top-menu-modern .mm-close-btn:focus {
color: #00a3e9 !important;
outline: none !important;
}
/* Заголовки разделов в меню */
.top-menu-modern .mm-section-title {
font-family: 'winston-black', sans-serif !important;
font-size: 13px !important;
text-transform: uppercase !important;
color: #64748b !important; /* Приглушенный серый */
margin: 0 0 15px 0 !important;
letter-spacing: 1.5px !important;
font-weight: 700;
}
/* Списки навигации */
.top-menu-modern .mm-nav-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 4px;
}
/* Каждая ссылка каталога (Крупный, удобный размер под палец) */
.top-menu-modern .mm-nav-list li a {
display: flex !important;
align-items: center !important;
gap: 12px;
padding: 14px 0 !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #f1f5f9 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important;
transition: all 0.2s ease !important;
}
.top-menu-modern .mm-nav-list li a i {
color: #00a3e9; /* Фирменная голубая стрелочка */
font-size: 14px;
transition: transform 0.2s ease;
}
/* Второстепенный список (О заводе, Контакты) — шрифты чуть легче */
.top-menu-modern .mm-nav-list.secondary-list li a {
font-size: 14.5px !important;
color: #cbd5e1 !important;
}
/* Эффект нажатия (активный статус ссылки) */
.top-menu-modern .mm-nav-list li a:active {
background-color: rgba(255, 255, 255, 0.02) !important;
color: #00a3e9 !important;
padding-left: 8px !important;
}
.top-menu-modern .mm-nav-list li a:active i {
transform: translateX(4px);
}
/* Декоративные разделители */
.top-menu-modern .mm-divider {
height: 1px;
background: rgba(255, 255, 255, 0.05);
margin: 30px 0;
}
/* Блок мобильных контактов */
.top-menu-modern .mm-contacts {
display: flex;
flex-direction: column;
gap: 18px;
}
.top-menu-modern .mm-contact-link {
display: flex !important;
align-items: center !important;
gap: 12px;
font-size: 16px !important;
font-weight: 700 !important;
color: #ffffff !important;
text-decoration: none !important;
}
.top-menu-modern .mm-contact-link i {
color: #00a3e9;
font-size: 18px;
}
/* Кнопка ВК в меню */
.top-menu-modern .mm-socials {
margin-top: 10px;
}
.top-menu-modern .mm-social-vk {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px;
background: #4a76a8 !important;
color: #ffffff !important;
padding: 14px !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 14px !important;
text-decoration: none !important;
text-align: center;
}
/* Анимация появления */
@keyframes mmFadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ==========================================================================
ИЗОЛИРОВАННЫЙ СТИЛЬ: СТРАНИЦА "КАК ЗАКАЗАТЬ СТЕЛЛАЖИ" (LIGHT INDUSTRY)
========================================================================== */
.op-content-wrapper {
background: #ffffff !important;
padding: 10px 0 !important;
color: #0f172a !important;
font-family: 'Helvetica Neue', Arial, sans-serif !important;
}
/* 1. Заголовки */
.op-content-wrapper .op-main-desc {
font-size: 15px !important;
line-height: 1.6 !important;
color: #64748b !important;
margin-bottom: 30px !important;
}
/* Общие разделители */
.op-content-wrapper .op-section-spacer {
margin: 40px 0 25px 0 !important;
}
.op-content-wrapper .op-section-title {
font-family: 'winston-black', sans-serif !important;
font-size: 20px !important;
text-transform: uppercase;
color: #0f172a;
font-weight: 700;
border-bottom: 2px solid #f1f5f9;
padding-bottom: 12px;
margin-bottom: 15px !important;
}
.op-content-wrapper .op-section-desc {
font-size: 14.5px !important;
line-height: 1.6 !important;
color: #64748b !important;
margin-bottom: 30px !important;
}
/* ==========================================================================
2. СЕТКА ШАГОВ (Step cards)
========================================================================== */
.op-steps-grid {
display: flex !important;
flex-wrap: wrap !important;
}
.op-steps-grid > [class*="col-"] {
display: flex !important;
flex-direction: column !important;
}
.op-step-card {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-left: 4px solid #00a3e9 !important; /* Синяя полоса сбоку */
border-radius: 12px !important;
padding: 25px !important;
margin-bottom: 20px !important;
flex: 1 1 auto !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
transition: all 0.3s ease;
}
.op-step-card:hover {
transform: translateX(4px);
border-left-color: #0056b3 !important;
box-shadow: 0 8px 20px rgba(0, 163, 233, 0.05) !important;
}
/* Специфический выделенный 5-й шаг (госзакупки) */
.op-step-card.highlight {
background: #edf8ff !important;
border-left-color: #0284c7 !important;
border-color: #bae6fd !important;
}
/* Номера шагов */
.op-step-num {
font-family: 'winston-black', 'Impact', sans-serif;
font-size: 24px;
font-weight: 900;
color: #bae6fd;
line-height: 1;
margin-bottom: 10px;
display: block;
}
.op-step-card:hover .op-step-num {
color: #00a3e9;
}
.op-step-card h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 16px !important;
color: #0f172a !important;
margin: 0 0 10px 0 !important;
font-weight: 700;
}
.op-step-card p {
font-size: 13.5px !important;
line-height: 1.6 !important;
color: #475569 !important;
margin: 0 !important;
}
/* ==========================================================================
3. КЛИКАБЕЛЬНЫЙ БЛОК ОТПРАВКИ ТЗ
========================================================================== */
.op-mail-cta {
background: #f4f9fe;
border: 1px dashed #00a3e9;
border-radius: 12px;
padding: 25px;
text-align: center;
margin: 20px 0 40px 0;
}
.op-mail-cta p {
font-size: 14px;
font-weight: 600;
color: #475569;
margin-bottom: 15px !important;
}
/* Стилизация почты как красивого бейджа */
.op-mail-badge {
display: inline-flex !important;
align-items: center;
gap: 10px;
background: #00a3e9;
color: #ffffff !important;
padding: 12px 24px;
border-radius: 8px;
font-family: 'winston-black', sans-serif;
font-size: 16px;
font-weight: 700;
text-decoration: none !important;
box-shadow: 0 4px 15px rgba(0, 163, 233, 0.2);
transition: all 0.3s ease;
}
.op-mail-badge:hover {
background: #0081ba;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 163, 233, 0.35);
}
/* ==========================================================================
4. СЕТКА ВОЗМОЖНОСТЕЙ ЗАВОДА (Features Grid)
========================================================================== */
.op-features-grid {
display: flex !important;
flex-wrap: wrap !important;
}
.op-features-grid > [class*="col-"] {
display: flex !important;
flex-direction: column !important;
}
.op-feature-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 25px !important;
margin-bottom: 20px !important;
flex: 1 1 auto !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.01) !important;
}
.op-feature-card:hover {
transform: translateY(-3px);
border-color: rgba(0, 163, 233, 0.2) !important;
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04) !important;
}
/* Выделение 3-летней гарантии золотым щитом */
.op-feature-card.highlight-warranty {
background: #fffdf5 !important;
border-color: #fef08a !important;
}
.op-feature-card.highlight-warranty .op-feature-icon {
background: #fef9c3 !important;
}
.op-feature-card.highlight-warranty .op-feature-icon i {
color: #eab308 !important; /* Золотой щит */
}
/* Иконки преимуществ */
.op-feature-icon {
width: 44px;
height: 44px;
background: #edf8ff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.op-feature-icon i {
font-size: 18px;
color: #00a3e9;
}
.op-feature-card h4 {
font-family: 'winston-black', sans-serif;
font-size: 16px;
color: #0f172a;
margin: 0 0 10px 0 !important;
font-weight: 700;
}
.op-feature-card p {
font-size: 13.5px !important;
line-height: 1.55 !important;
color: #475569 !important;
margin: 0 !important;
}
/* ==========================================================================
5. ФИНАЛЬНЫЙ СТА БАННЕР
========================================================================== */
.op-footer-cta {
background: linear-gradient(135deg, #0f172a 0%, #0056b3 100%) !important;
border-radius: 12px !important;
padding: 35px !important;
text-align: center;
margin-top: 25px;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08) !important;
}
.op-footer-cta h3 {
font-family: 'winston-black', sans-serif !important;
font-size: 22px !important;
color: #ffffff !important;
margin: 0 0 10px 0 !important;
}
.op-footer-cta p {
font-size: 14px !important;
line-height: 1.6 !important;
color: #cbd5e1 !important;
margin-bottom: 25px !important;
}
.op-footer-cta .op-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
height: 48px !important;
padding: 0 35px !important;
background: #ffffff !important;
color: #0056b3 !important;
border-radius: 8px !important;
font-family: 'winston-black', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase;
text-decoration: none !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease !important;
cursor: pointer !important;
}
.op-footer-cta .op-btn:hover {
background: #00a3e9 !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
box-shadow: 0 12px 25px rgba(0, 163, 233, 0.4);
}
/* --- АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ --- */
@media (max-width: 767px) {
.op-content-wrapper .op-main-title {
font-size: 22px !important;
}
.op-step-card,
.op-feature-card {
padding: 20px !important;
}
.op-step-card:hover {
transform: none !important;
}
.op-feature-card:hover {
transform: none !important;
}
.op-footer-cta .op-btn {
width: 100% !important;
}
}
/* ==========================================================================
СТИЛИ ДЛЯ СЕО-БЛОКА СТРАНИЦЫ ЗАКАЗА (LIGHT INDUSTRIAL EDITORIAL)
========================================================================== */
.op-seo-block {
background: #f8fafc !important; /* Легкий серый фон */
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 35px 30px !important;
margin-top: 20px !important;
position: relative;
overflow: hidden;
}
/* Верхняя акцентная полоса */
.op-seo-block::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 4px !important;
background: #00a3e9 !important; /* Синий бренд-акцент */
}
/* Главный SEO-заголовок (h3) */
.op-seo-block .op-seo-main-title {
font-family: 'winston-black', sans-serif !important;
font-size: 20px !important;
text-transform: uppercase;
color: #0f172a !important;
margin: 0 0 25px 0 !important;
font-weight: 800 !important;
letter-spacing: 0.5px;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 15px;
}
/* Сетка колонок текста */
.op-seo-grid {
display: flex !important;
flex-wrap: wrap !important;
}
.op-seo-grid > [class*="col-"] {
display: flex !important;
flex-direction: column !important;
}
.op-seo-column {
flex: 1 1 auto !important;
margin-bottom: 20px;
}
/* Подзаголовки (h4) */
.op-seo-column h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 14.5px !important;
color: #00a3e9 !important; /* Синий цвет для привлечения внимания */
margin: 0 0 10px 0 !important;
font-weight: 700;
}
/* Параграфы текста */
.op-seo-column p {
font-size: 13px !important;
line-height: 1.6 !important;
color: #475569 !important; /* Мягкий графитовый */
margin: 0 !important;
text-align: justify;
}
/* Выделение сильных SEO-ключей */
.op-seo-column p strong {
color: #0f172a !important; /* Делаем жирные ключевики более темными и весомыми */
font-weight: 700 !important;
}
/* Список технологических бейджей внизу */
.op-seo-badge-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 15px;
border-top: 1px solid #e2e8f0;
padding-top: 20px;
}
.op-seo-badge {
font-size: 12px !important;
color: #64748b !important;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
}
.op-seo-badge i {
color: #10b981; /* Зеленый маркер согласия/проверки */
font-size: 13px;
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 767px) {
.op-seo-block {
padding: 25px 20px !important;
}
.op-seo-block .op-seo-main-title {
font-size: 16px !important;
}
.op-seo-column h4 {
font-size: 13.5px !important;
}
.op-seo-badge-list {
flex-direction: column;
gap: 8px;
}
}
/* ==========================================================================
ИЗОЛИРОВАННЫЙ СТИЛЬ: ВВОДНЫЙ БЛОК ПОРТФОЛИО (ВНУТРИ .col-md-9)
========================================================================== */
.gp-intro-wrapper {
background: #ffffff !important;
padding: 10px 0 30px 0 !important;
color: #0f172a !important;
font-family: 'Helvetica Neue', Arial, sans-serif !important;
}
/* 3. Описание слева */
.gp-intro-wrapper .gp-desc-text p {
font-size: 14.5px !important;
line-height: 1.65 !important;
color: #475569 !important; /* Мягкий графитовый */
margin: 0 0 15px 0 !important;
text-align: justify;
}
.gp-intro-wrapper .gp-desc-text p:last-child {
margin-bottom: 0 !important;
}
/* ==========================================================================
4. КОНВЕРСИОННЫЙ СИНИЙ ВИДЖЕТ-КАРТОЧКА (СПРАВА)
========================================================================== */
.gp-intro-wrapper .gp-header-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
}
.gp-intro-wrapper .gp-cta-widget {
background: linear-gradient(180deg, #0f172a 0%, #0056b3 100%) !important;
border-radius: 12px !important;
padding: 24px 20px !important;
color: #ffffff !important;
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}
/* Бейдж сверху карточки */
.gp-intro-wrapper .gp-widget-badge {
background: rgba(56, 189, 248, 0.15);
color: #38bdf8;
font-size: 10px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
padding: 4px 10px;
border-radius: 20px;
margin: 0 auto 12px auto;
display: inline-flex;
align-items: center;
gap: 6px;
}
.gp-intro-wrapper .gp-cta-widget h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 16px !important;
color: #ffffff !important;
margin: 0 0 8px 0 !important;
font-weight: 700;
}
.gp-intro-wrapper .gp-cta-widget p {
font-size: 12px !important;
line-height: 1.5 !important;
color: #cbd5e1 !important;
margin: 0 0 15px 0 !important;
}
/* Кнопка-телефон внутри виджета */
.gp-intro-wrapper .gp-widget-phone {
margin-bottom: 15px;
}
.gp-intro-wrapper .gp-widget-phone a {
color: #ffffff !important;
font-size: 16px !important;
font-weight: 800 !important;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.2s ease;
}
.gp-intro-wrapper .gp-widget-phone a:hover {
color: #38bdf8 !important;
}
/* Акцентная белая кнопка */
.gp-intro-wrapper .gp-widget-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
height: 40px !important;
background: #ffffff !important;
color: #0056b3 !important;
border-radius: 6px !important;
font-family: 'winston-black', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase;
text-decoration: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease !important;
cursor: pointer !important;
width: 100% !important;
border: none !important;
}
.gp-intro-wrapper .gp-widget-btn:hover {
background: #00a3e9 !important;
color: #ffffff !important;
box-shadow: 0 8px 20px rgba(0, 163, 233, 0.4);
}
/* Декоративная разделительная черта в самом низу блока */
.gp-intro-wrapper .gp-bottom-divider {
height: 2px;
background-color: #f1f5f9;
margin-top: 35px;
width: 100%;
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 767px) {
.gp-intro-wrapper {
padding-bottom: 15px !important;
}
.gp-intro-wrapper .gp-main-title {
font-size: 22px !important;
}
.gp-intro-wrapper .gp-header-row {
flex-direction: column;
gap: 25px;
}
.gp-intro-wrapper .gp-cta-widget {
padding: 20px !important;
}
}
/* ==========================================================================
ИЗОЛИРОВАННЫЙ СТИЛЬ: СТРАНИЦА "НОРМАТИВНЫЕ ДОКУМЕНТЫ" (LIGHT COMPLIANCE)
========================================================================== */
.nd-page-wrapper {
background: #ffffff !important;
padding: 10px 0 !important;
color: #0f172a !important;
font-family: 'Helvetica Neue', Arial, sans-serif !important;
}
/* 1. Презентационная карточка сверху */
.nd-intro-card {
background: #f4f9fe !important;
border-left: 4px solid #00a3e9 !important;
border-radius: 0 12px 12px 0 !important;
padding: 25px 30px !important;
margin-bottom: 40px !important;
display: flex;
gap: 20px;
align-items: start;
box-shadow: 0 4px 15px rgba(0, 163, 233, 0.03) !important;
}
.nd-intro-icon {
width: 44px;
height: 44px;
background: #edf8ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nd-intro-icon i {
font-size: 20px;
color: #00a3e9;
}
.nd-intro-text p {
font-size: 14px !important;
line-height: 1.6 !important;
color: #475569 !important;
margin: 0 0 10px 0 !important;
}
.nd-intro-text p:last-child {
margin-bottom: 0 !important;
}
/* 2. Заголовки разделов нормативных документов */
.nd-section {
margin-bottom: 40px !important;
}
.nd-section-title {
font-family: 'winston-black', sans-serif !important;
font-size: 18px !important;
text-transform: uppercase;
color: #0f172a;
font-weight: 700;
border-bottom: 2px solid #edf2f7;
padding-bottom: 12px;
margin: 0 0 20px 0 !important;
display: flex;
align-items: center;
gap: 10px;
}
.nd-section-title i {
color: #00a3e9;
font-size: 18px;
}
/* 3. Сетка плашек */
.nd-docs-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Единая плашка документа */
.nd-doc-item {
display: flex !important;
align-items: center !important;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
padding: 12px 20px !important;
text-decoration: none !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
cursor: pointer !important;
}
/* Текст внутри плашки */
.nd-doc-name {
font-size: 13.5px !important;
line-height: 1.4 !important;
color: #334155 !important;
font-weight: 600;
margin-right: 20px;
flex-grow: 1; /* Выталкивает кнопку скачивания вправо */
}
/* Ховер плашки */
.nd-doc-item:hover {
background: #ffffff !important;
border-color: rgba(0, 163, 233, 0.3) !important;
transform: translateX(4px);
box-shadow: 0 4px 15px rgba(0, 163, 233, 0.05) !important;
}
.nd-doc-item:hover .nd-doc-name {
color: #00a3e9 !important; /* Название синеет */
}
/* Информационная плашка (без ссылки) */
.nd-doc-item.info-only {
cursor: default !important;
opacity: 0.85;
}
.nd-doc-item.info-only:hover {
transform: none !important;
border-color: #e2e8f0 !important;
box-shadow: none !important;
}
.nd-doc-item.info-only .nd-doc-name {
color: #475569 !important;
}
/* 4. Цветовые бейджи типов файлов */
.nd-file-badge {
font-size: 10px !important;
font-weight: 800 !important;
text-transform: uppercase;
padding: 4px 8px !important;
border-radius: 4px !important;
margin-right: 15px !important;
min-width: 48px;
text-align: center;
flex-shrink: 0;
}
/* Распределяем цвета по типам стандартов */
.nd-file-badge.pdf { background: #fee2e2; color: #ef4444; } /* Нежно-красный */
.nd-file-badge.gost { background: #e0f2fe; color: #0284c7; } /* Нежно-синий */
.nd-file-badge.law { background: #fef3c7; color: #d97706; } /* Золотой */
.nd-file-badge.snip { background: #f3e8ff; color: #7c3aed; } /* Фиолетовый */
.nd-file-badge.info { background: #f1f5f9; color: #475569; } /* Серый */
/* 5. Кнопка "Скачать" (Иконка справа) */
.nd-download-btn {
width: 32px;
height: 32px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.25s ease;
}
.nd-download-btn i {
font-size: 12px;
color: #64748b;
transition: color 0.25s ease;
}
/* Ховер кнопки */
.nd-doc-item:hover .nd-download-btn {
background: #00a3e9;
border-color: #00a3e9;
}
.nd-doc-item:hover .nd-download-btn i {
color: #ffffff;
}
/* Стиль иконки информации для статичных полей */
.nd-doc-item.info-only .nd-download-btn {
border: none;
background: none;
}
.nd-doc-item.info-only .nd-download-btn i {
font-size: 16px;
color: #94a3b8;
}
/* --- АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ --- */
@media (max-width: 767px) {
.nd-intro-card {
flex-direction: column;
padding: 20px !important;
gap: 15px;
}
.nd-doc-item {
flex-direction: row; /* Оставляем в строку, но адаптируем отступы */
padding: 12px 15px !important;
}
.nd-file-badge {
margin-right: 10px !important;
padding: 3px 6px !important;
min-width: 42px;
font-size: 9px !important;
}
.nd-doc-name {
font-size: 12.5px !important;
margin-right: 10px;
}
.nd-download-btn {
width: 28px;
height: 28px;
}
}
/* ==========================================================================
ИСПРАВЛЕННЫЙ СТИЛЬ: СТРАНИЦА "КАК ЗАМЕРИТЬ ПОМЕЩЕНИЕ" (CSS GRID СТАБИЛИЗАЦИЯ)
========================================================================== */
.ms-page-wrapper {
background: #ffffff !important;
padding: 10px 0 !important;
color: #0f172a !important;
font-family: 'Helvetica Neue', Arial, sans-serif !important;
}
/* 1. Заголовки и описание */
.ms-page-wrapper .ms-main-desc {
font-size: 15px !important;
line-height: 1.6 !important;
color: #64748b !important;
margin-bottom: 40px !important;
}
/* Разделители */
.ms-page-wrapper .ms-section-spacer {
margin: 40px 0 25px 0 !important;
}
.ms-section-title {
font-family: 'winston-black', sans-serif !important;
font-size: 20px !important;
text-transform: uppercase;
color: #0f172a;
font-weight: 700;
padding-bottom: 12px;
margin-bottom: 25px !important;
}
/* ==========================================================================
2. СЕТКА ПРЕИМУЩЕСТВ (GRID — БЕЗ СЪЕЗЖАНИЯ)
========================================================================== */
.ms-benefits-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important; /* Ровно 4 колонки в ряд */
gap: 12px !important;
margin-bottom: 40px !important;
}
/* Полностью отменяем влияние Bootstrap на ячейки */
.ms-benefits-grid > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.ms-benefit-card {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 20px 15px !important;
text-align: center;
flex: 1 1 auto !important;
display: flex;
flex-direction: column;
align-items: center;
}
.ms-benefit-icon {
width: 40px;
height: 40px;
background: #edf8ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.ms-benefit-icon i {
font-size: 16px;
color: #00a3e9;
}
.ms-benefit-card h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 13.5px !important;
color: #0f172a !important;
margin: 0 0 6px 0 !important;
font-weight: 700;
}
.ms-benefit-card p {
font-size: 11.5px !important;
line-height: 1.4 !important;
color: #64748b !important;
margin: 0 !important;
}
/* ==========================================================================
3. СЕТКА ИНЖЕНЕРНЫХ ШАГОВ (ЖЕСТКАЯ GRID-СИСТЕМА 2х2)
========================================================================== */
.ms-steps-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* СТРОГО 2 равные колонки */
gap: 20px !important;
margin-bottom: 30px !important;
width: 100% !important;
}
/* Полный сброс Bootstrap для колонок с шагами */
.ms-steps-grid > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.ms-step-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 25px 30px !important;
flex: 1 1 auto !important; /* Растягивает карты по высоте строки */
display: flex;
flex-direction: column;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.01) !important;
}
.ms-step-num {
font-family: 'winston-black', 'Impact', sans-serif;
font-size: 22px;
font-weight: 900;
color: #bae6fd;
line-height: 1;
margin-bottom: 8px;
}
.ms-step-card h3 {
font-family: 'winston-black', sans-serif !important;
font-size: 16px !important;
color: #0f172a !important;
margin: 0 0 12px 0 !important;
font-weight: 700;
text-align: left;
}
.ms-step-divider {
height: 2px;
background-color: #f1f5f9;
margin-bottom: 15px;
width: 35px;
}
.ms-step-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 12px;
}
.ms-step-list li {
font-size: 13px;
line-height: 1.5;
color: #475569;
padding-left: 15px;
position: relative;
}
.ms-step-list li::before {
content: '■';
color: #00a3e9;
position: absolute;
left: 0;
top: 1px;
font-size: 8px;
}
.ms-step-list li span {
font-weight: 700;
color: #1e293b;
}
/* ==========================================================================
4. БЛОК ОШИБКИ / УКЛОНА ПОЛА
========================================================================== */
.ms-warning-block {
background: #fff7ed !important;
border: 1px solid #ffedd5 !important;
border-left: 4px solid #f97316 !important;
border-radius: 8px !important;
padding: 20px 25px !important;
margin: 20px 0 40px 0 !important;
display: flex;
gap: 20px;
align-items: center;
}
.ms-warning-icon {
width: 44px;
height: 44px;
background: #ffedd5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ms-warning-icon i {
font-size: 20px;
color: #f97316;
}
.ms-warning-text h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 15px !important;
color: #c2410c !important;
margin: 0 0 6px 0 !important;
font-weight: 700;
}
.ms-warning-text p {
font-size: 13px !important;
line-height: 1.55 !important;
color: #7c2d12 !important;
margin: 0 !important;
}
/* ==========================================================================
5. ПЛАШКИ СКАЧИВАНИЯ ФАЙЛОВ (GRID-РЕЖИМ)
========================================================================== */
.ms-downloads-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* Ровно 2 колонки */
gap: 15px !important;
width: 100% !important;
}
.ms-downloads-grid > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.ms-download-item {
display: flex !important;
align-items: center !important;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 10px !important;
padding: 15px 20px !important;
text-decoration: none !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
height: 100% !important;
}
.ms-download-item:hover {
background: #ffffff !important;
border-color: rgba(0, 163, 233, 0.3) !important;
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(0, 163, 233, 0.05) !important;
}
.ms-badge-file {
font-size: 10px !important;
font-weight: 800 !important;
padding: 5px 10px !important;
border-radius: 4px !important;
margin-right: 15px !important;
min-width: 44px;
text-align: center;
flex-shrink: 0;
}
.ms-badge-file.pdf { background: #fee2e2; color: #ef4444; }
.ms-badge-file.doc { background: #e0f2fe; color: #0284c7; }
.ms-download-text {
flex-grow: 1;
margin-right: 15px;
}
.ms-download-text h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 14.5px !important;
color: #0f172a !important;
margin: 0 0 4px 0 !important;
font-weight: 700;
}
.ms-download-text p {
font-size: 11.5px !important;
color: #64748b !important;
margin: 0 !important;
}
.ms-download-btn {
width: 32px;
height: 32px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.25s ease;
}
.ms-download-btn i {
font-size: 12px;
color: #64748b;
}
.ms-download-item:hover .ms-download-btn {
background: #00a3e9;
border-color: #00a3e9;
}
.ms-download-item:hover .ms-download-btn i {
color: #ffffff;
}
/* --- МОБИЛЬНАЯ АДАПТАЦИЯ (СТРОГО В 1 КОЛОНКУ) --- */
@media (max-width: 767px) {
.ms-benefits-grid {
grid-template-columns: repeat(2, 1fr) !important; /* 2х2 на планшетах */
gap: 10px !important;
}
.ms-steps-grid,
.ms-downloads-grid {
grid-template-columns: 1fr !important; /* В одну колонку на телефонах */
gap: 15px !important;
}
.ms-step-card,
.ms-download-item {
padding: 20px !important;
}
.ms-warning-block {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
@media (max-width: 480px) {
.ms-benefits-grid {
grid-template-columns: 1fr !important; /* 1 колонка на самых мелких экранах */
}
}
/* ==========================================================================
НЕЙТРАЛИЗАЦИЯ ПСЕВДОЭЛЕМЕНТОВ BOOTSTRAP (УБИРАЕТ СДВИГ ВПРАВО)
========================================================================== */
/* Полностью отключаем ::before и ::after, чтобы сетка Grid не считала их за пустые карточки */
.ms-benefits-grid::before,
.ms-benefits-grid::after,
.ms-steps-grid::before,
.ms-steps-grid::after,
.ms-downloads-grid::before,
.ms-downloads-grid::after {
display: none !important;
content: none !important;
}
/* На всякий случай дублируем сброс отступов у первой карточки */
.ms-steps-grid > [class*="col-"]:first-child,
.ms-downloads-grid > [class*="col-"]:first-child {
grid-column: 1 !important; /* Принудительно ставим первую карту в первую колонку */
}
/* ==========================================================================
СЕО-БЛОК СТРАНИЦЫ ЗАМЕРА (LIGHT COMPLIANCE)
========================================================================== */
.ms-seo-block {
background: #f8fafc !important; /* Светлый благородный фон */
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 35px 30px !important;
margin-top: 30px !important;
position: relative;
overflow: hidden;
}
/* Синяя декоративная линия сверху */
.ms-seo-block::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 4px !important;
background: #00a3e9 !important;
}
/* Главный заголовок блока (h3) */
.ms-seo-block .ms-seo-main-title {
font-family: 'winston-black', sans-serif !important;
font-size: 18px !important;
text-transform: uppercase;
color: #0f172a !important;
margin: 0 0 25px 0 !important;
font-weight: 800 !important;
letter-spacing: 0.5px;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 15px;
}
/* Сетка контента СЕО (CSS Grid) */
.ms-seo-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important; /* Ровно 3 колонки в ряд */
gap: 20px !important;
width: 100% !important;
}
/* Нейтрализуем псевдоэлементы Bootstrap в сетке СЕО */
.ms-seo-grid::before,
.ms-seo-grid::after {
display: none !important;
content: none !important;
}
/* Сброс колонок Bootstrap внутри СЕО-грида */
.ms-seo-grid > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* Первая колонка встает строго в первую ячейку */
.ms-seo-grid > [class*="col-"]:first-child {
grid-column: 1 !important;
}
.ms-seo-column {
flex: 1 1 auto !important;
}
/* Подзаголовки (h4) */
.ms-seo-column h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 14px !important;
color: #00a3e9 !important; /* Окрашиваем в фирменный синий */
margin: 0 0 10px 0 !important;
font-weight: 700;
}
/* Текст */
.ms-seo-column p {
font-size: 13px !important;
line-height: 1.6 !important;
color: #475569 !important;
margin: 0 !important;
text-align: justify;
}
/* Выделение СЕО-ключей */
.ms-seo-column p strong {
color: #0f172a !important;
font-weight: 700 !important;
}
/* Бейджи стандартов в самом низу блока */
.ms-seo-badge-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 15px;
border-top: 1px solid #e2e8f0;
padding-top: 20px;
}
.ms-seo-badge {
font-size: 11.5px !important;
color: #64748b !important;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
}
.ms-seo-badge i {
color: #00a3e9; /* Фирменные синие иконки информации */
font-size: 13px;
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
.ms-seo-grid {
grid-template-columns: 1fr !important; /* В одну колонку на планшетах и телефонах */
gap: 20px !important;
}
}
@media (max-width: 767px) {
.ms-seo-block {
padding: 25px 20px !important;
}
.ms-seo-block .ms-seo-main-title {
font-size: 16px !important;
}
.ms-seo-badge-list {
flex-direction: column;
gap: 8px;
}
}
/* ==========================================================================
СЕО-БЛОК СТРАНИЦЫ НОРМАТИВНЫХ ДОКУМЕНТОВ (LIGHT COMPLIANCE)
========================================================================== */
.nd-seo-block {
background: #f8fafc !important; /* Легкий серый фон реестра */
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 35px 30px !important;
margin-top: 30px !important;
position: relative;
overflow: hidden;
}
/* Верхняя синяя полоса */
.nd-seo-block::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 4px !important;
background: #00a3e9 !important; /* Наш синий цвет Аскомплект */
}
/* Главный заголовок блока (h3) */
.nd-seo-block .nd-seo-main-title {
font-family: 'winston-black', sans-serif !important;
font-size: 18px !important;
text-transform: uppercase;
color: #0f172a !important;
margin: 0 0 25px 0 !important;
font-weight: 800 !important;
letter-spacing: 0.5px;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 15px;
}
/* Сетка контента СЕО (CSS Grid) */
.nd-seo-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important; /* Строго 3 колонки */
gap: 20px !important;
width: 100% !important;
}
/* ИСПРАВЛЕНИЕ: Нейтрализуем псевдоэлементы Bootstrap в сетке СЕО */
.nd-seo-grid::before,
.nd-seo-grid::after {
display: none !important;
content: none !important;
}
/* Сброс стандартного Bootstrap поведения колонок */
.nd-seo-grid > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* Первая колонка встает строго в первую ячейку без сдвигов */
.nd-seo-grid > [class*="col-"]:first-child {
grid-column: 1 !important;
}
.nd-seo-column {
flex: 1 1 auto !important;
}
/* Подзаголовки (h4) */
.nd-seo-column h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 14px !important;
color: #00a3e9 !important; /* Окрашиваем заголовки в фирменный синий */
margin: 0 0 10px 0 !important;
font-weight: 700;
}
/* Параграфы текста */
.nd-seo-column p {
font-size: 13px !important;
line-height: 1.6 !important;
color: #475569 !important;
margin: 0 !important;
text-align: justify;
}
/* Выделение сильных СЕО-ключей */
.nd-seo-column p strong {
color: #0f172a !important;
font-weight: 700 !important;
}
/* Бейджи стандартов в самом низу блока */
.nd-seo-badge-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 15px;
border-top: 1px solid #e2e8f0;
padding-top: 20px;
}
.nd-seo-badge {
font-size: 11.5px !important;
color: #64748b !important;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
}
.nd-seo-badge i {
color: #00a3e9; /* Фирменная синяя иконка щита */
font-size: 13px;
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
.nd-seo-grid {
grid-template-columns: 1fr !important; /* Складываем в одну колонку на планшетах и телефонах */
gap: 20px !important;
}
}
@media (max-width: 767px) {
.nd-seo-block {
padding: 25px 20px !important;
}
.nd-seo-block .nd-seo-main-title {
font-size: 16px !important;
}
.nd-seo-badge-list {
flex-direction: column;
gap: 8px;
}
}
/* ==========================================================================
ОФОРМЛЕНИЕ БЛОКА "ВОЗМОЖНО ВАМ ПОДОБИТСЯ" (БЕЗ ИЗМЕНЕНИЯ HTML)
========================================================================== */
/* 1. Главная обертка меню тегов */
.teg_menu {
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 80%) !important;
border: 1px solid #edf2f7 !important;
border-radius: 12px !important;
padding: 30px 25px !important;
margin: 40px 0 !important;
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.01) !important;
}
/* 2. Контейнер тегов (принудительно переводим noindex во Flexbox-режим) */
.teg_menu noindex {
display: flex !important;
flex-wrap: wrap !important; /* Теги автоматически переносятся на новые строки */
gap: 8px 10px !important; /* Расстояние между тегами (вертикаль / горизонталь) */
align-items: center !important;
}
/* 3. Заголовок блока "Возможно вам понадобится" */
.teg_menu .page_zagolovok {
width: 100% !important; /* Принудительно выносим заголовок на отдельную верхнюю строку */
font-family: 'winston-black', 'Arial Black', sans-serif !important;
font-size: 15px !important;
text-transform: uppercase !important;
color: #0f172a !important; /* Темный глубокий цвет */
margin: 0 0 16px 0 !important;
font-weight: 800 !important;
letter-spacing: 0.5px !important;
border-bottom: 2px solid #edf2f7;
padding-bottom: 10px;
}
/* 4. Стили интерактивных тегов-кнопок */
.teg_menu a {
display: inline-flex !important;
align-items: center !important;
background: #ffffff !important; /* Белые карточки тегов */
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important; /* Современное мягкое скругление */
padding: 8px 16px !important; /* Удобные отступы под клик */
font-size: 13px !important;
font-weight: 600 !important;
color: #475569 !important; /* Сдержанный серый цвет текста */
text-decoration: none !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* Элегантный синий микро-кружок перед каждым тегом */
.teg_menu a::before {
content: '' !important;
width: 6px !important;
height: 6px !important;
background-color: #94a3b8 !important; /* Спокойный базовый цвет точки */
border-radius: 50% !important;
margin-right: 10px !important;
display: inline-block !important;
flex-shrink: 0 !important;
transition: background-color 0.2s ease !important;
}
/* ==========================================================================
ИНТЕРАКТИВНЫЕ ЭФФЕКТЫ (ПРИ НАВЕДЕНИИ)
========================================================================== */
.teg_menu a:hover {
background: #edf8ff !important; /* Легкий фирменный голубой фон */
border-color: #00a3e9 !important; /* Синяя рамка */
color: #00a3e9 !important; /* Синий цвет текста */
transform: translateY(-2px) !important; /* Мягкое всплытие вверх */
box-shadow: 0 6px 15px rgba(0, 163, 233, 0.08) !important; /* Красивая тень */
}
/* Смена цвета микро-кружка при наведении на тег */
.teg_menu a:hover::before {
background-color: #00a3e9 !important; /* Кружок загорается синим */
}
/* ==========================================================================
СТИЛИ ДЛЯ ЛИД-МАГНИТА (LEAD MAGNET / QUESTIONNAIRE DOWNLOAD)
========================================================================== */
.ae-lead-magnet {
background: #f0fdf4 !important; /* Мягкий нежно-зеленый оттенок "пользы/скачивания" */
border: 1px dashed #4ade80 !important; /* Пунктирная зеленая рамка */
border-radius: 12px !important;
padding: 30px !important;
display: flex;
align-items: center;
gap: 25px;
box-shadow: 0 4px 15px rgba(74, 222, 128, 0.03) !important;
margin-bottom: 50px;
}
/* Обертка иконки */
.ae-lm-icon {
width: 60px;
height: 60px;
background: #dcfce7;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ae-lm-icon i {
font-size: 30px;
color: #16a34a; /* Насыщенный зеленый */
}
/* Текстовая зона */
.ae-lm-text {
flex-grow: 1;
}
.ae-lm-text h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 16px !important;
color: #14532d !important;
margin: 0 0 6px 0 !important;
font-weight: 800;
}
.ae-lm-text p {
font-size: 13px !important;
line-height: 1.55 !important;
color: #166534 !important;
margin: 0 !important;
}
/* Кнопка скачивания */
.ae-lm-download-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
height: 48px !important;
padding: 0 24px !important;
background: #16a34a !important; /* Солидный зеленый */
color: #ffffff !important;
border-radius: 8px !important;
font-family: 'winston-black', sans-serif !important;
font-size: 12.5px !important;
font-weight: 700 !important;
text-transform: uppercase;
text-decoration: none !important;
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
white-space: nowrap;
border: none !important;
}
.ae-lm-download-btn:hover {
background: #15803d !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(22, 163, 74, 0.35);
}
/* --- АДАПТИВНОСТЬ ДЛЯ СМАРТФОНОВ --- */
@media (max-width: 767px) {
.ae-lead-magnet {
flex-direction: column;
text-align: center;
padding: 25px 20px !important;
gap: 15px;
}
.ae-lm-icon {
margin: 0 auto;
}
.ae-lm-download-btn {
width: 100% !important;
}
}
/* Основная карточка баннера */
.museum-blok-card {
background-color: #11151e; /* Глубокий темный фон */
background: linear-gradient(135deg, #0e121a 0%, #1e3c59 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px; /* Современные скругленные углы */
padding: 50px 45px;
color: #ffffff;
position: relative;
overflow: hidden;
margin: 30px 0; /* Отступы сверху и снизу карточки */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
/* Эффект фонового свечения фирменным голубым цветом */
.museum-blok-card::after {
content: "";
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(0, 163, 233, 0.15) 0%, transparent 70%);
top: -150px;
right: -50px;
z-index: 1;
pointer-events: none;
}
/* Бейдж */
.museum-blok-card .blok-badge {
display: inline-block;
color: #00A3E9;
background-color: rgba(0, 163, 233, 0.1);
border: 1px solid rgba(0, 163, 233, 0.3);
padding: 6px 16px;
border-radius: 20px;
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 25px;
}
/* Заголовок (изменен на h2 для SEO-иерархии внутри страницы) */
.museum-blok-card .blok-title {
font-size: 30px;
font-weight: 700;
line-height: 1.2;
margin-top: 0;
margin-bottom: 20px;
font-family: 'winston-black';
text-align: left;
}
.museum-blok-card .text-accent {
color: #00A3E9;
font-family: 'winston-black';
}
/* Текст описания */
.museum-blok-card .blok-lead {
font-size: 16px;
color: #a0aec0;
margin-bottom: 35px;
line-height: 1.6;
}
/* Иконки преимуществ */
.museum-blok-card .features-grid {
margin-bottom: 35px;
}
.museum-blok-card .feature-box {
display: table;
margin-bottom: 15px;
}
.museum-blok-card .feature-icon {
display: table-cell;
vertical-align: middle;
width: 38px;
height: 38px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
text-align: center;
color: #00A3E9;
}
.museum-blok-card .feature-icon svg {
/* margin-top: 9px; /* Выравнивание SVG внутри */
display: inline-block;
}
.museum-blok-card .feature-text {
display: table-cell;
vertical-align: middle;
padding-left: 15px;
font-size: 14px;
color: #e2e8f0;
}
/* Основная кнопка */
.museum-blok-card .custom-btn {
background-color: #00A3E9;
border: none;
padding: 14px 32px;
font-size: 16px;
border-radius: 6px;
transition: all 0.3s ease;
box-shadow: 0 4px 14px rgba(0, 163, 233, 0.3);
}
.museum-blok-card .custom-btn:hover {
background-color: #337AB7;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 163, 233, 0.4);
}
/* Правая колонка и стеклянный декор */
.museum-blok-card .visual-column {
position: relative;
z-index: 2;
}
.museum-blok-card .visual-element {
perspective: 1000px;
}
.museum-blok-card .glass-object {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 16px;
transform: rotateY(-10deg) rotateX(10deg) rotateZ(3deg);
margin-top: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.museum-blok-card .glass-header {
font-weight: bold;
font-size: 16px;
margin-bottom: 15px;
color: rgba(255, 255, 255, 0.9);
}
.museum-blok-card .line {
height: 5px;
background: rgba(255, 255, 255, 0.08);
margin-bottom: 12px;
border-radius: 2px;
}
.museum-blok-card .line.long { width: 100%; }
.museum-blok-card .line.med { width: 75%; }
.museum-blok-card .line.short { width: 50%; }
/* Адаптивность для мобильных телефонов и планшетов */
@media (max-width: 991px) {
.museum-blok-card {
padding: 40px 30px;
}
.museum-blok-card .blok-title {
font-size: 28px;
}
}
@media (max-width: 767px) {
.museum-blok-card .blok-title {
font-size: 20px;
}
.museum-blok-card {
text-align: center;
padding: 35px 20px;
}
.museum-blok-card .feature-box {
display: block;
margin-bottom: 20px;
}
.museum-blok-card .feature-icon {
display: inline-block;
float: left;
width: 30px;
height: 30px;
}
.museum-blok-card .feature-text {
padding-left: 5px;
text-align: left;
font-size: 12px;
line-height: 30px;
}
.museum-blok-card .feature-icon svg {
display: inline-block;
margin-top: 5px;
}
.museum-blok-card .custom-btn {
padding: 14px 10px;
}
}
/* Улучшаем адаптивность для трех колонок в Bootstrap 3 */
@media (min-width: 768px) and (max-width: 1199px) {
.museum-banner-card .feature-text {
font-size: 12px; /* Чуть уменьшаем шрифт на планшетах, чтобы влезло в ряд */
padding-left: 8px;
}
.museum-banner-card .feature-icon {
width: 32px;
height: 32px;
}
.museum-banner-card .feature-icon svg {
margin-top: 6px;
}
}
/* Увеличиваем ширину текстового блока для десктопа, чтобы три колонки встали красиво */
@media (min-width: 1200px) {
.museum-banner-card .text-content {
padding-right: 30px;
}
}
/* ==========================================================================
СТИЛИ ДЛЯ ЦЕНЫ В КАРТОЧКАХ КАТАЛОГА
========================================================================== */
.ae-block-title {
font-family: 'winston-black', sans-serif !important;
font-size: 18px !important;
text-transform: uppercase;
color: #0f172a;
font-weight: 700;
padding-bottom: 12px;
margin-bottom: 20px !important;
}
.slide-tovar-item {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important; /* Выравнивает все элементы карточки по высоте */
height: 100% !important; /* Делает карточки одинаковой высоты в ряду */
}
.slide-tovar-item.fr-tag {
height: auto !important; /* Делает карточки одинаковой высоты в ряду */
}
/* Описание заставляем занимать всё доступное место, чтобы прижать цену к низу */
.slide-tovar-item p {
flex-grow: 1 !important;
margin-bottom: 12px !important;
}
/* Блок цены */
.slide-tovar-price {
display: flex !important;
align-items: baseline !important; /* Выравнивание по нижней линии текста */
gap: 6px !important;
padding: 10px 0 !important;
margin-top: auto !important; /* Принудительно прижимает цену к футеру */
border-top: 1px dashed #e2e8f0 !important; /* Тонкий разделитель сверху цены */
margin-bottom: 5px !important;
}
/* Текст "Цена от:" */
.slide-tovar-price .st-price-label {
font-size: 12px !important;
color: #64748b !important; /* Нейтральный серый */
font-weight: 600 !important;
}
/* Сама цифра цены */
.slide-tovar-price .st-price-value {
font-family: 'winston-black', 'Impact', sans-serif !important;
font-size: 18px !important;
color: #00a3e9 !important; /* Наш синий цвет */
font-weight: 900 !important;
line-height: 1 !important;
}
/* Единица измерения (/ секция) */
.slide-tovar-price .st-price-unit {
font-size: 11px !important;
color: #94a3b8 !important;
font-weight: 600 !important;
}
/* FAQ на чистом CSS */
.ae-faq-section {margin-bottom: 50px;}
.ae-faq-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.ae-faq-item {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
}
.ae-faq-input {
display: none !important;
}
.ae-faq-trigger {
display: block;
padding: 16px 20px;
font-size: 16px;
font-weight: 700;
color: #0f172a;
cursor: pointer;
position: relative;
padding-right: 50px;
margin: 0 !important;
transition: background 0.2s ease;
text-align: left;
}
.ae-faq-trigger:hover {
background: #edf8ff;
}
.ae-faq-trigger::after {
content: '\f078'; /* Иконка стрелочки FontAwesome */
font-family: 'FontAwesome';
position: absolute;
right: 20px;
top: 16px;
font-size: 12px;
color: #64748b;
transition: transform 0.3s ease;
}
.ae-faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
background: #ffffff;
}
.ae-faq-content p {
padding: 20px;
font-size: 16px;
line-height: 1.6;
color: #475569;
margin: 0 !important;
text-align: left;
}
/* Логика открытия */
.ae-faq-input:checked ~ .ae-faq-content {
max-height: 1000px;
border-top: 1px solid #edf2f7;
transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
}
.ae-faq-input:checked ~ .ae-faq-trigger::after {
transform: rotate(180deg);
color: #00a3e9;
}
/* ==========================================================================
СТИЛИ ДЛЯ СТРАНИЦЫ "МЕТАЛЛИЧЕСКИЕ СТЕЛЛАЖИ НА ЗАКАЗ" (B2B HIGH-TECH)
========================================================================== */
.mr-custom-page {
font-family: 'Helvetica Neue', Arial, sans-serif !important;
color: #0f172a !important;
padding: 10px 0 !important;
}
/* 1. Геройский вводный блок */
.mr-hero-section {
margin-bottom: 35px !important;
}
.mr-hero-tag {
display: inline-block;
font-family: 'winston-black', sans-serif;
color: #00a3e9;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 800;
margin-bottom: 8px;
width: 100%;
text-align: center;
}
.mr-hero-title {
font-family: 'winston-black', sans-serif !important;
font-size: 26px !important;
text-transform: uppercase;
color: #0f172a !important;
font-weight: 800;
margin: 0 0 15px 0 !important;
line-height: 1.25;
}
.mr-hero-lead {
font-size: 14.5px !important;
line-height: 1.65 !important;
color: #475569 !important;
text-align: justify;
margin: 0 !important;
}
.mr-hero-lead strong {
color: #0f172a !important;
font-weight: 700 !important;
}
/* Шапка разделов */
.mr-section-title {
margin: 50px 0 25px 0!important;
}
.mr-section-title h2 {
font-family: 'winston-black', sans-serif !important;
font-size: 18px !important;
text-transform: uppercase;
color: #0f172a !important;
font-weight: 800;
margin: 0 !important;
padding-bottom: 10px;
}
.mr-section-title h2 i {
color: #00a3e9;
margin-right: 6px;
}
/* 2. Сетка преимуществ */
.mr-advantages-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
margin-bottom: 40px;
}
/* Нейтрализуем псевдоэлементы Bootstrap */
.mr-advantages-grid::before,
.mr-advantages-grid::after,
.mr-steps-grid::before,
.mr-steps-grid::after {
display: none !important;
content: none !important;
}
.mr-adv-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 10px !important;
padding: 24px !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.01) !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mr-adv-card:hover {
transform: translateY(-2px);
border-color: rgba(0, 163, 233, 0.2) !important;
box-shadow: 0 10px 20px rgba(0, 163, 233, 0.04) !important;
}
.mr-adv-icon {
width: 48px;
height: 48px;
background: #e0f2fe;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.mr-adv-icon i {
font-size: 20px;
color: #00a3e9;
}
.mr-adv-card h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 14.5px !important;
color: #0f172a !important;
margin: 0 0 10px 0 !important;
font-weight: 700;
}
.mr-adv-card p {
font-size: 12.5px !important;
line-height: 1.55 !important;
color: #64748b !important;
margin: 0 !important;
}
/* ==========================================================================
3. ИНЖЕНЕРНЫЙ ГАЙД (Светлый информационный бокс)
========================================================================== */
.mr-guide-block, .inner-tech-footer-box {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 30px !important;
margin-bottom: 40px;
}
.mr-guide-content h3, .mr-guide-block h3, .inner-tech-footer-box h4{
font-family: 'winston-black', sans-serif !important;
font-size: 17px !important;
color: #0f172a !important;
margin: 0 0 20px 0 !important;
font-weight: 800;
}
.mr-guide-content h3 i {
color: #00a3e9;
}
.mr-guide-content > p {
font-size: 14px !important;
color: #475569 !important;
margin-bottom: 24px !important;
}
.mr-guide-tips {
display: flex;
flex-direction: column;
gap: 20px;
}
.mr-tip-item {
background: #ffffff;
border-radius: 8px;
padding: 16px 20px;
border-left: 4px solid #00a3e9;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
}
.mr-tip-item h5 {
font-family: 'winston-black', sans-serif !important;
font-size: 16px !important;
color: #0f172a !important;
margin: 0 0 8px 0 !important;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.mr-tip-num {
background: #edf8ff;
color: #00a3e9;
font-size: 16px;
font-weight: 800;
padding: 2px 6px;
border-radius: 4px;
}
.mr-tip-item p {
font-size: 16px !important;
line-height: 1.55 !important;
color: #475569 !important;
margin: 0 !important;
text-align: left;
}
/* ==========================================================================
4. ПОШАГОВЫЙ ЧЕК-ЛИСТ (Шаг 1 - 3)
========================================================================== */
.mr-steps-block {
margin-bottom: 45px;
}
.mr-steps-block h3 {
font-family: 'winston-black', sans-serif !important;
font-size: 18px !important;
color: #0f172a !important;
margin: 0 0 15px 0 !important;
font-weight: 800;
}
.mr-steps-block h3 i {
color: #00a3e9;
}
.mr-steps-desc {
font-size: 14px !important;
color: #64748b !important;
margin-bottom: 25px !important;
}
.mr-steps-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
}
.mr-step-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 10px !important;
padding: 24px !important;
position: relative;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.01) !important;
}
.mr-step-number {
position: absolute;
top: 20px;
right: 20px;
background: #f1f5f9;
color: #64748b;
font-family: 'winston-black', sans-serif;
font-size: 9px;
text-transform: uppercase;
font-weight: 800;
padding: 3px 8px;
border-radius: 20px;
}
.mr-step-card h5 {
font-family: 'winston-black', sans-serif !important;
font-size: 14px !important;
color: #0f172a !important;
margin: 0 0 12px 0 !important;
font-weight: 700;
max-width: 80%;
}
.mr-step-card p {
font-size: 12.5px !important;
line-height: 1.55 !important;
color: #475569 !important;
margin: 0 !important;
}
/* ==========================================================================
5. СВЕТЛЫЙ B2B ЛИД-МАГНИТ (Бланк ТЗ)
========================================================================== */
.mr-lead-banner {
background: #f0fdf4 !important; /* Нежно-зеленый */
border: 1px dashed #4ade80 !important;
border-radius: 12px !important;
padding: 25px 30px !important;
display: flex;
align-items: center;
gap: 25px;
margin-bottom: 45px;
}
.mr-lb-icon {
width: 54px;
height: 54px;
background: #dcfce7;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mr-lb-icon i {
font-size: 26px;
color: #16a34a;
}
.mr-lb-text {
flex-grow: 1;
}
.mr-lb-text h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 15.5px !important;
color: #14532d !important;
margin: 0 0 5px 0 !important;
font-weight: 800;
}
.mr-lb-text p {
font-size: 12.5px !important;
line-height: 1.5 !important;
color: #166534 !important;
margin: 0 !important;
}
.mr-lb-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
height: 44px !important;
padding: 0 20px !important;
background: #16a34a !important;
color: #ffffff !important;
border-radius: 6px !important;
font-family: 'winston-black', sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase;
text-decoration: none !important;
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
transition: all 0.25s ease !important;
white-space: nowrap;
border: none !important;
}
a.mr-lb-btn.okno_zakaza{width: auto !important;}
.mr-lb-btn:hover {
background: #15803d !important;
transform: translateY(-1px);
}
/* ==========================================================================
7. CTA ФИНАЛЬНЫЙ БАННЕР С СВЯЗЬЮ
========================================================================== */
.mr-cta-banner {
background: linear-gradient(135deg, #0f172a 0%, #0056b3 100%) !important;
border-radius: 12px !important;
padding: 35px 40px !important;
color: #ffffff !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 35px;
margin-top: 45px;
}
.mr-cta-content {
flex: 1 1 auto;
}
.mr-cta-content h3 {
font-family: 'winston-black', sans-serif !important;
font-size: 19px !important;
color: #ffffff !important;
margin: 0 0 10px 0 !important;
font-weight: 800;
line-height: 1.3;
}
.mr-cta-content p {
font-size: 13px !important;
line-height: 1.55 !important;
color: #e0f2fe !important;
margin: 0 0 15px 0 !important;
}
.mr-cta-contacts {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.mr-phone-link {
font-family: 'winston-black', sans-serif;
font-size: 17px;
font-weight: 800;
color: #ffffff;
}
.mr-divider-dot {
color: #38bdf8;
font-size: 14px;
}
.mr-work-hours {
font-size: 12px;
color: #bae6fd;
font-weight: 600;
}
.mr-cta-action {
flex-shrink: 0;
}
.mr-cta-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
height: 48px !important;
padding: 0 24px !important;
background: #ffffff !important;
color: #0f172a !important;
border-radius: 6px !important;
font-family: 'winston-black', sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase;
text-decoration: none !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
transition: all 0.25s ease !important;
border: none !important;
white-space: nowrap;
cursor: pointer;
}
.mr-cta-btn:hover {
background: #edf8ff !important;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 163, 233, 0.3);
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
.mr-advantages-grid,
.mr-steps-grid {
grid-template-columns: 1fr !important; /* В одну колонку */
gap: 15px !important;
}
.mr-cta-banner {
flex-direction: column;
align-items: flex-start;
padding: 30px !important;
gap: 25px;
}
.mr-cta-action {
width: 100%;
}
.mr-cta-btn {
width: 100% !important;
}
}
@media (max-width: 767px) {
.mr-hero-title {
font-size: 20px !important;
}
.mr-lead-banner {
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px !important;
}
.mr-lb-btn {
width: 100% !important;
}
.mr-cta-content h3 {
font-size: 16px !important;
}
.mr-cta-contacts {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.mr-divider-dot {
display: none !important;
}
}
/* ==========================================================================
ФИНАЛЬНЫЙ СЕО-БЛОК: РАЗНОВИДНОСТИ СТЕЛЛАЖЕЙ
========================================================================== */
.mr-seo-footer {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 35px 30px !important;
margin-top: 45px !important;
position: relative;
overflow: hidden;
}
/* Синяя верхняя линия */
.mr-seo-footer::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 4px !important;
background: #00a3e9 !important; /* Фирменный синий */
}
.mr-seo-footer h3 {
font-family: 'winston-black', sans-serif !important;
font-size: 18px !important;
text-transform: uppercase;
color: #0f172a !important;
margin: 0 0 25px 0 !important;
font-weight: 800 !important;
letter-spacing: 0.5px;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 15px;
}
.mr-seo-columns {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
}
/* Нейтрализуем псевдоэлементы Bootstrap в сетке */
.mr-seo-columns::before,
.mr-seo-columns::after {
display: none !important;
content: none !important;
}
.mr-seo-col-item {
padding: 0 !important; /* Убираем дефолтные отступы */
}
.mr-seo-col-item h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 14px !important;
color: #00a3e9 !important;
margin: 0 0 10px 0 !important;
font-weight: 700;
}
.mr-seo-col-item p {
font-size: 13px !important;
line-height: 1.6 !important;
color: #475569 !important;
margin: 0 !important;
text-align: justify;
}
.mr-seo-col-item p strong {
color: #0f172a !important;
font-weight: 700 !important;
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
.mr-seo-columns {
grid-template-columns: 1fr !important; /* В одну колонку на планшетах */
}
}
@media (max-width: 767px) {
.mr-seo-footer {
padding: 25px 20px !important;
}
.mr-seo-footer h3 {
font-size: 16px !important;
}
}
/* ==========================================================================
СЕО-БЛОК КАТЕГОРИИ ФОНДОВОГО ОБОРУДОВАНИЯ (LIGHT COMPLIANCE)
========================================================================== */
.fe-spacer {
margin-top: 45px !important;
}
.fe-seo-block {
background: #f8fafc !important; /* Приятный серый фон */
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 35px 30px !important;
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
/* Верхняя синяя бренд-полоса */
.fe-seo-block::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 4px !important;
background: #00a3e9 !important; /* Наш синий цвет Аскомплект */
}
/* Главный заголовок блока (h3) */
.fe-seo-block .fe-seo-main-title {
font-family: 'winston-black', sans-serif !important;
font-size: 18px !important;
text-transform: uppercase;
color: #0f172a !important;
margin: 0 0 25px 0 !important;
font-weight: 800 !important;
letter-spacing: 0.5px;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 15px;
}
/* Сетка контента СЕО (CSS Grid) */
.fe-seo-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important; /* Ровно 3 колонки */
gap: 20px !important;
width: 100% !important;
}
/* ИСПРАВЛЕНИЕ СДВИГА ВПРАВО: Нейтрализуем псевдоэлементы Bootstrap в сетке СЕО */
.fe-seo-grid::before,
.fe-seo-grid::after {
display: none !important;
content: none !important;
}
/* Сброс стандартного Bootstrap поведения колонок */
.fe-seo-grid > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* Первая колонка встает строго в первую ячейку без пустых мест */
.fe-seo-grid > [class*="col-"]:first-child {
grid-column: 1 !important;
}
.fe-seo-column {
flex: 1 1 auto !important;
}
/* Подзаголовки колонок (h4) */
.fe-seo-column h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 14px !important;
color: #00a3e9 !important; /* Синий цвет */
margin: 0 0 10px 0 !important;
font-weight: 700;
}
/* Параграфы текста */
.fe-seo-column p {
font-size: 13px !important;
line-height: 1.6 !important;
color: #475569 !important;
margin: 0 !important;
text-align: justify;
}
/* Выделение сильных СЕО-ключей */
.fe-seo-column p strong {
color: #0f172a !important;
font-weight: 700 !important;
}
/* Бейджи стандартов в самом низу блока */
.fe-seo-badge-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 15px;
border-top: 1px solid #e2e8f0;
padding-top: 20px;
}
.fe-seo-badge {
font-size: 11.5px !important;
color: #64748b !important;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
}
.fe-seo-badge i {
color: #00a3e9;
font-size: 13px;
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
.fe-seo-grid {
grid-template-columns: 1fr !important; /* Складываем в одну вертикальную колонку на планшетах */
gap: 20px !important;
}
}
@media (max-width: 767px) {
.fe-seo-block {
padding: 25px 20px !important;
}
.fe-seo-block .fe-seo-main-title {
font-size: 16px !important;
}
.fe-seo-badge-list {
flex-direction: column;
gap: 8px;
}
}
/* ==========================================================================
СТИЛИ ДЛЯ БЛОКА РЕАЛИЗОВАННЫХ ПРОЕКТОВ (CASE STUDIES GRID)
========================================================================== */
.ae-cases-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important; /* Строго 3 колонки в ряд */
gap: 20px !important;
width: 100% !important;
margin-bottom: 30px;
}
/* ИСПРАВЛЕНИЕ СДВИГА ВПРАВО: Сброс псевдоэлементов Bootstrap 3 */
.ae-cases-grid::before,
.ae-cases-grid::after {
display: none !important;
content: none !important;
}
/* Сброс колонок */
.ae-cases-grid > div {
float: none !important;
width: 100% !important;
}
.ae-case-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
overflow: hidden !important;
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.01) !important;
}
/* Эффект наведения на всю карточку */
.ae-case-card:hover {
transform: translateY(-4px) !important;
border-color: rgba(0, 163, 233, 0.25) !important;
box-shadow: 0 12px 25px rgba(15, 23, 42, 0.05) !important;
}
/* Обертка картинки для контроля зума */
.ae-case-img-wrap {
width: 100%;
aspect-ratio: 4 / 3 !important; /* Фиксированные пропорции картинок */
overflow: hidden !important;
position: relative;
background: #f1f5f9;
}
.ae-case-img-wrap img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* Обрезает картинку ровно по краям */
transition: transform 0.5s ease !important;
}
/* Зум картинки при наведении */
.ae-case-card:hover .ae-case-img-wrap img {
transform: scale(1.08) !important;
}
/* Описание внутри карточки */
.ae-case-content {
padding: 20px !important;
display: flex;
flex-direction: column;
flex-grow: 1; /* Растягивает блок контента вниз */
}
.ae-case-content h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 15px !important;
color: #0f172a !important;
margin: 0 0 10px 0 !important;
font-weight: 700;
}
.ae-case-content p {
font-size: 12.5px !important;
line-height: 1.5 !important;
color: #64748b !important;
margin-bottom: 15px !important;
flex-grow: 1; /* Выталкивает кнопку ссылки всегда к нижнему краю */
}
/* Ссылка на кейс */
.ae-case-link {
display: inline-flex !important;
align-items: center;
gap: 8px;
font-size: 13px !important;
font-weight: 700 !important;
color: #00a3e9 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
margin-top: auto; /* Прижимает к низу */
}
.ae-case-link i {
font-size: 11px;
transition: transform 0.2s ease;
}
.ae-case-card:hover .ae-case-link {
color: #0056b3 !important;
}
.ae-case-card:hover .ae-case-link i {
transform: translateX(4px); /* Стрелочка сдвигается вправо */
}
/* --- АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ --- */
@media (max-width: 991px) {
.ae-cases-grid {
grid-template-columns: repeat(2, 1fr) !important; /* 2 колонки на планшетах */
gap: 15px !important;
}
}
@media (max-width: 767px) {
.ae-cases-grid {
grid-template-columns: 1fr !important; /* 1 колонка на мобильных */
}
.ae-case-content {
padding: 15px !important;
}
}
.mr-cta-banner a.okno_zakaza {width: auto;}
/* ==========================================================================
ИЗОЛИРОВАННЫЙ СТИЛЬ: КАТАЛОГ ФОНДОВОГО ОБОРУДОВАНИЯ (PREMIUM INDUSTRIAL)
========================================================================== */
.fe-section {
padding: 10px 0 !important;
font-family: 'Helvetica Neue', Arial, sans-serif !important;
}
/* 1. Шапка категории */
.fe-section-header {
margin-bottom: 30px !important;
}
.fe-section-tag {
display: inline-block;
font-family: 'winston-black', sans-serif;
color: #00a3e9;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 800;
margin-bottom: 8px;
}
.fe-section-category-title {
font-family: 'winston-black', sans-serif !important;
font-size: 22px !important;
text-transform: uppercase;
color: #0f172a !important;
font-weight: 800;
margin: 0 0 12px 0 !important;
/* border-bottom: 2px solid #edf2f7;*/
padding-bottom: 12px;
text-align: center;
}
.fe-section-category-title i {
color: #00a3e9;
margin-right: 8px;
}
.fe-section-category-desc {
font-size: 14px !important;
line-height: 1.6 !important;
color: #64748b !important;
margin: 0 !important;
}
/* ==========================================================================
2. СТРУКТУРА КРУПНЫХ КАРТОЧЕК (Horizontal Split Layout)
========================================================================== */
.fe-large-cards-container {
display: flex;
flex-direction: column;
gap: 30px; /* Зазор между большими карточками */
}
/* ИСПРАВЛЕНИЕ: Отключаем влияние Bootstrap clearfix */
.fe-large-cards-container::before,
.fe-large-cards-container::after {
display: none !important;
content: none !important;
}
.fe-prod-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
overflow: hidden !important;
display: grid !important;
grid-template-columns: 320px 1fr !important; /* Левая часть - 320px под фото, правая - текст */
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02) !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.fe-prod-card:hover {
transform: translateY(-3px);
border-color: rgba(0, 163, 233, 0.2) !important;
box-shadow: 0 10px 25px rgba(0, 163, 233, 0.05) !important;
}
/* ==========================================================================
3. ГАЛЕРЕЯ КАРТОЧКИ (Слева)
========================================================================== */
.fe-card-gallery {
padding: 15px !important;
background: #f8fafc;
border-right: 1px solid #edf2f7;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
}
/* Главное фото */
.fe-gallery-main {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 6px;
border: 1px solid #e2e8f0;
background: #ffffff;
}
.fe-gallery-main.fe-gallery-main-vertikal {
aspect-ratio: 3 / 4;
}
.fe-gallery-main img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.5s ease;
}
.fe-gallery-main a.fancyimage img.fr-tag {
max-height: 100%;
max-width: 100%;
min-height: auto;
}
.fe-prod-card:hover .fe-gallery-main img {
transform: scale(1.05);
}
/* Два дополнительных фото снизу */
.fe-gallery-thumbs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.fe-thumb-item {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 4px;
border: 1px solid #e2e8f0;
background: #ffffff;
}
.fe-thumb-item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: opacity 0.2s ease;
}
.fe-thumb-item:hover img {
opacity: 0.8;
}
/* Если у товара всего 1 картинка (убирает лишние отступы) */
.fe-card-gallery.single-img {
justify-content: center;
}
/* ==========================================================================
4. КОНТЕНТНАЯ ЧАСТЬ (Справа)
========================================================================== */
.fe-card-info {
padding: 25px 30px !important;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* ==========================================================================
ОБНОВЛЕННЫЕ КОНТРАСТНЫЕ ИНТЕРФЕЙСНЫЕ БЕЙДЖИ (CATEGORY BADGES)
========================================================================== */
.fe-card-badge {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 10px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
padding: 5px 12px !important;
border-radius: 6px !important;
margin-bottom: 25px !important;
align-self: flex-start !important;
line-height: 1 !important;
white-space: nowrap !important; /* Чтобы бейдж не переносился на новую строку */
}
/* 1. Бейдж для Архивов и Книг (Насыщенный сине-серый) */
.fe-badge-archive {
background: #0f172a !important; /* Очень темный, почти черный */
border: 1px solid #334155 !important;
color: #e2e8f0 !important; /* Светлый текст */
}
.fe-badge-archive i {
color: #00a3e9 !important; /* Яркая синяя иконка папки */
}
/* 2. Бейдж для Текстиля и Костюмов (Насыщенный темно-зеленый) */
.fe-badge-museum {
background: #14532d !important; /* Темно-зеленый */
border: 1px solid #16a34a !important;
color: #dcfce7 !important; /* Светлый текст */
}
.fe-badge-museum i {
color: #4ade80 !important; /* Яркая зеленая иконка ножниц/ниток */
}
/* 3. Бейдж для Живописи и Картиных галерей (Насыщенный темно-пурпурный) */
.fe-badge-art {
background: #6b21a8 !important; /* Темный пурпур */
border: 1px solid #a855f7 !important;
color: #f3e8ff !important; /* Светлый текст */
}
.fe-badge-art i {
color: #d8b4fe !important; /* Яркая сиреневая иконка кисти */
}
.fe-card-info h3 {
font-family: 'winston-black', sans-serif !important;
font-size: 18px !important;
color: #0f172a !important;
margin: 0 0 10px 0 !important;
font-weight: 800;
text-align: left;
}
.fe-card-desc {
font-size: 13px !important;
line-height: 1.55 !important;
color: #475569 !important;
margin-bottom: 15px !important;
text-align: justify;
}
/* Таблицы технических параметров */
.fe-specs-table {
background: #f8fafc;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 20px;
}
.fe-spec-row {
display: flex;
justify-content: space-between;
font-size: 12px;
padding: 5px 0;
border-bottom: 1px solid #edf2f7;
}
.fe-spec-row:last-child {
border-bottom: none;
}
.fe-spec-label {
color: #64748b;
font-weight: 600;
}
.fe-spec-val {
color: #0f172a;
font-weight: 700;
text-align: right;
}
/* ==========================================================================
5. ЦЕНЫ И КНОПКИ ДЕЙСТВИЯ (Footer)
========================================================================== */
.fe-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px dashed #e2e8f0;
padding-top: 18px;
margin-top: auto;
}
/* Блок цены */
.fe-price-block {
display: flex;
align-items: baseline;
gap: 4px;
}
.fe-price-label {
font-size: 12px;
color: #64748b;
font-weight: 600;
}
.fe-price-value {
font-family: 'winston-black', 'Impact', sans-serif;
font-size: 20px;
color: #00a3e9; /* Фирменный синий */
font-weight: 900;
}
.fe-price-unit {
font-size: 11px;
color: #94a3b8;
font-weight: 600;
}
/* Кнопки действия */
.fe-action-buttons {
display: flex;
gap: 10px;
}
.fe-btn-order {
display: inline-flex !important;
align-items: center;
justify-content: center;
height: 40px !important;
padding: 0 20px !important;
background: #00a3e9 !important;
color: #ffffff !important;
border-radius: 6px !important;
font-family: 'winston-black', sans-serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
text-transform: uppercase;
text-decoration: none !important;
transition: all 0.25s ease;
cursor: pointer;
border: none !important;
}
.fe-btn-order:hover {
background: #0056b3 !important;
box-shadow: 0 4px 12px rgba(0, 163, 233, 0.3);
}
.fe-btn-more {
display: inline-flex !important;
align-items: center;
justify-content: center;
height: 40px !important;
padding: 0 20px !important;
background: #ffffff !important;
color: #475569 !important;
border: 1px solid #cbd5e1 !important;
border-radius: 6px !important;
font-family: 'winston-black', sans-serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
text-transform: uppercase;
text-decoration: none !important;
transition: all 0.25s ease;
}
.fe-btn-more:hover {
background: #f8fafc !important;
color: #00a3e9 !important;
border-color: #00a3e9 !important;
}
/* ==========================================================================
ОФОРМЛЕНИЕ НОВОГО СПИСКА ПРЕИМУЩЕСТВ КАРТОЧКИ (Advantages list)
========================================================================== */
.fe-card-advantages {
margin-bottom: 20px !important;
background: #f0fdf4 !important; /* Очень мягкий нежно-зеленый фон преимуществ */
border: 1px solid #dcfce7 !important;
border-radius: 8px !important;
padding: 15px 20px !important;
text-align: left;
}
.fe-card-advantages h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 13.5px !important;
color: #166534 !important; /* Глубокий зеленый */
margin: 0 0 10px 0 !important;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.fe-card-advantages h4 i {
font-size: 14px;
}
.fe-card-advantages ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 8px;
}
.fe-card-advantages ul li {
font-size: 12.5px !important;
line-height: 1.5 !important;
color: #14532d !important; /* Удобный для чтения зеленый */
position: relative;
padding-left: 15px;
}
/* Маркер галочки для каждого преимущества */
.fe-card-advantages ul li::before {
content: '✓' !important;
position: absolute;
left: 0;
top: 0;
font-weight: 900;
color: #22c55e !important; /* Яркий зеленый */
font-size: 13px;
}
.fe-card-advantages ul li span {
font-weight: 700 !important;
color: #166534 !important;
}
/* --- АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ --- */
@media (max-width: 991px) {
.fe-prod-card {
grid-template-columns: 100% !important; /* Перестраиваем в вертикальный вид */
}
.fe-card-gallery {
border-right: none;
border-bottom: 1px solid #edf2f7;
}
.fe-card-gallery.single-img {
max-width: 100%;
}
}
@media (max-width: 767px) {
.fe-section-category-title {
font-size: 18px !important;
}
.fe-card-info {
padding: 20px !important;
}
.fe-card-footer {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.fe-action-buttons {
width: 100%;
}
.fe-btn-order,
.fe-btn-more {
width: 100% !important;
}
}
/* ==========================================================================
ИЗОЛИРОВАННЫЙ СТИЛЬ: ВВОДНЫЙ БЛОК ФОНДОВОГО ХРАНЕНИЯ (LIGHT COMPLIANCE)
========================================================================== */
.fo-intro-wrapper {
background: #ffffff !important;
padding: 10px 0 25px 0 !important;
color: #0f172a !important;
font-family: 'Helvetica Neue', Arial, sans-serif !important;
}
/* Сетка intro-блока */
.fo-intro-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
}
/* Нейтрализуем псевдоэлементы Bootstrap в сетке */
.fo-intro-row::before,
.fo-intro-row::after {
display: none !important;
content: none !important;
}
.fo-intro-row > [class*="col-"] {
float: none !important;
}
/* 1. Левая часть контента */
.fo-intro-tag {
display: inline-block;
font-family: 'winston-black', sans-serif;
color: #00a3e9;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 800;
margin-bottom: 10px;
text-align: center !important;
}
.fo-intro-title {
font-family: 'winston-black', sans-serif !important;
font-size: 24px !important;
line-height: 1.3 !important;
color: #0f172a !important;
text-transform: uppercase !important;
margin: 0 0 18px 0 !important;
font-weight: 800 !important;
}
.fo-intro-text p {
font-size: 14.5px !important;
line-height: 1.65 !important;
color: #475569 !important;
margin: 0 0 15px 0 !important;
text-align: justify;
}
.fo-intro-text p strong {
color: #0f172a !important;
font-weight: 700 !important;
}
.fo-intro-text p:last-child {
margin-bottom: 0 !important;
}
/* ==========================================================================
2. КОНВЕРСИОННАЯ КАРТОЧКА С ФОРМУЛОЙ БЮДЖЕТА (Справа)
========================================================================== */
.fo-budget-card {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; /* Серьезный глубокий графит */
border-radius: 12px !important;
padding: 24px 20px !important;
color: #ffffff !important;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08) !important;
}
.fo-bc-badge {
background: rgba(56, 189, 248, 0.15);
color: #38bdf8;
font-size: 10px;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 1px;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
}
.fo-budget-card h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 15px !important;
color: #ffffff !important;
margin: 0 0 8px 0 !important;
font-weight: 700;
}
.fo-budget-card p {
font-size: 11.5px !important;
line-height: 1.5 !important;
color: #94a3b8 !important;
margin: 0 0 15px 0 !important;
}
/* Визуальная формула */
.fo-bc-formula {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 15px;
}
.fo-f-part {
font-family: 'winston-black', sans-serif;
font-size: 16px;
font-weight: 800;
color: #ffffff;
text-align: center;
display: flex;
flex-direction: column;
line-height: 1.1;
}
.fo-f-part span {
font-size: 8px;
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #94a3b8;
text-transform: uppercase;
font-weight: 600;
margin-top: 4px;
}
.fo-f-sign {
font-size: 18px;
color: #38bdf8;
font-weight: 800;
}
/* Подсказка */
.fo-bc-tip {
font-size: 10px !important;
line-height: 1.4 !important;
color: #cbd5e1 !important;
margin-bottom: 15px;
display: flex;
gap: 6px;
align-items: start;
}
.fo-bc-tip i {
color: #38bdf8;
font-size: 11px;
margin-top: 1px;
}
/* Кнопка */
.fo-bc-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
height: 40px !important;
background: #00a3e9 !important;
color: #ffffff !important;
border-radius: 6px !important;
font-family: 'winston-black', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase;
text-decoration: none !important;
transition: all 0.25s ease !important;
cursor: pointer !important;
width: 100% !important;
border: none !important;
}
.fo-bc-btn:hover {
background: #ffffff !important;
color: #0f172a !important;
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}
/* ==========================================================================
3. ИНФОРМАЦИОННАЯ СТРОКА (Alert bar)
========================================================================== */
.fo-intro-alert {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
padding: 15px 20px !important;
margin-top: 25px;
display: flex;
gap: 12px;
align-items: start;
}
.fo-intro-alert i {
color: #00a3e9;
font-size: 16px;
margin-top: 1px;
flex-shrink: 0;
}
.fo-intro-alert span {
font-size: 13px !important;
line-height: 1.5 !important;
color: #475569 !important;
}
.fo-intro-alert span strong {
color: #0f172a !important;
}
/* Декоративная линия */
.fo-intro-divider {
height: 2px;
background-color: #f1f5f9;
margin-top: 30px;
width: 100%;
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 767px) {
.fo-intro-wrapper .fo-intro-title {
font-size: 20px !important;
}
.fo-intro-row {
flex-direction: column;
gap: 25px;
}
.fo-budget-card {
padding: 20px !important;
}
.fo-intro-alert {
padding: 12px 15px !important;
}
}
/* ==========================================================================
СТИЛИ БЫСТРОЙ ЯКОРНОЙ НАВИГАЦИИ (SMOOTH TABS NAVIGATION)
========================================================================== */
/* Включаем плавную прокрутку по всей странице */
html {
scroll-behavior: smooth !important;
}
/* ЗАЩИТА: резервируем отступ сверху при переходе по якорю (чтобы шапка не закрывала заголовок) */
.fe-section {
scroll-margin-top: 130px !important; /* Подстройте под высоту вашей фиксированной шапки сайта */
}
/* Главный контейнер навигации */
.fe-anchor-nav {
background: #f8fafc !important; /* Светлый благородный фон */
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 12px 20px !important;
margin: 20px 0 35px 0 !important;
display: flex !important;
align-items: center !important;
gap: 20px !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.01) !important;
}
/* Нейтрализуем псевдоэлементы Bootstrap в строке навигации */
.fe-nav-row::before,
.fe-nav-row::after {
display: none !important;
content: none !important;
}
.fe-nav-title {
font-family: 'winston-black', sans-serif !important;
font-size: 12px !important;
color: #0f172a !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
}
.fe-nav-title i {
color: #00a3e9; /* Фирменный синий Аскомплект */
font-size: 14px;
}
/* Обертка прокрутки для мобильных */
.fe-nav-scroll-wrapper {
flex-grow: 1;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
}
/* Скрываем полосу прокрутки в разных браузерах */
.fe-nav-scroll-wrapper::-webkit-scrollbar {
display: none !important; /* Webkit (Chrome, Safari, Opera) */
}
.fe-nav-scroll-wrapper {
-ms-overflow-style: none !important; /* IE и Edge */
scrollbar-width: none !important; /* Firefox */
}
/* Список табов */
.fe-nav-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
gap: 10px !important;
}
/* Стили кнопок-ссылок */
.fe-nav-link {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
color: #475569 !important;
padding: 10px 18px !important;
border-radius: 8px !important;
font-family: 'winston-black', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase;
text-decoration: none !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
white-space: nowrap !important;
}
.fe-nav-link i {
color: #94a3b8;
font-size: 12px;
transition: color 0.2s ease;
}
/* Ховер-эффекты */
.fe-nav-link:hover {
background: #edf8ff !important; /* Светло-голубая заливка */
border-color: #00a3e9 !important;
color: #00a3e9 !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 163, 233, 0.06) !important;
}
.fe-nav-link:hover i {
color: #00a3e9 !important;
}
/* --- АДАПТИВНОСТЬ ДЛЯ ПЛАНШЕТОВ И МОБИЛЬНЫХ --- */
@media (max-width: 991px) {
.fe-anchor-nav {
flex-direction: column !important; /* Заголовок встает над табами */
align-items: flex-start !important;
gap: 12px !important;
padding: 15px !important;
margin-bottom: 25px !important;
}
.fe-nav-scroll-wrapper {
width: 100%;
}
.fe-nav-list {
padding-bottom: 4px !important; /* Небольшой зазор под пальцы */
}
}
/* ==========================================================================
СЕТКА ФОТОГАЛЕРЕИ ГОТОВЫХ ПРОЕКТОВ (CLEAN IMAGE GRID)
========================================================================== */
.fe-photo-gallery-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important; /* Ровно 5 колонок на ПК в два яруса */
gap: 12px !important;
margin: 25px 0 45px 0 !important;
width: 100% !important;
}
/* Нейтрализуем псевдоэлементы Bootstrap в сетке */
.fe-photo-gallery-grid::before,
.fe-photo-gallery-grid::after {
display: none !important;
content: none !important;
}
.fe-photo-item {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
padding: 6px !important;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.01) !important;
overflow: hidden !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.fe-photo-item a {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.fe-photo-item img {
width: 100% !important;
aspect-ratio: 4 / 3 !important; /* Все фотографии будут строго одинаковыми */
object-fit: cover !important;
border-radius: 4px !important;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* Эффекты наведения */
.fe-photo-item:hover {
border-color: #00a3e9 !important; /* Подсветка фирменным синим */
transform: translateY(-2px) !important;
box-shadow: 0 8px 18px rgba(0, 163, 233, 0.08) !important;
}
.fe-photo-item:hover img {
transform: scale(1.04) !important; /* Плавное увеличение */
}
/* --- АДАПТИВНОСТЬ СЕТКИ ФОТО --- */
@media (max-width: 1199px) {
.fe-photo-gallery-grid {
grid-template-columns: repeat(4, 1fr) !important; /* 4 колонки на средних экранах */
}
}
@media (max-width: 767px) {
.fe-photo-gallery-grid {
grid-template-columns: repeat(2, 1fr) !important; /* 2 колонки на мобильных телефонах */
gap: 8px !important;
}
}
/* ==========================================================================
КОМПАКТНАЯ СЕТКА АКСЕССУАРОВ (2 В РЯД, SPLIT-LAYOUT)
========================================================================== */
.fe-accessories-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* Ровно 2 колонки */
gap: 20px !important;
margin: 25px 0 45px 0 !important;
width: 100% !important;
}
/* Нейтрализация Bootstrap в сетке аксессуаров */
.fe-accessories-grid::before,
.fe-accessories-grid::after {
display: none !important;
content: none !important;
}
.fe-accessory-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 10px !important;
padding: 15px !important;
display: flex !important;
gap: 15px !important;
align-items: center !important;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.01) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.fe-accessory-card:hover {
border-color: #00a3e9 !important;
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(0, 163, 233, 0.04) !important;
}
/* Галерея внутри карточки */
.fe-acc-gallery {
flex: 0 0 130px !important; /* Строго фиксированная ширина картинки */
height: 130px !important;
border: 1px solid #f1f5f9;
border-radius: 6px;
overflow: hidden;
background: #f8fafc;
}
.fe-acc-gallery img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Инфо-блок */
.fe-acc-info {
flex: 1 1 auto !important;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.fe-acc-info h3 {
font-family: 'winston-black', sans-serif !important;
font-size: 14.5px !important;
color: #0f172a !important;
margin: 0 0 6px 0 !important;
font-weight: 800;
}
.fe-acc-info p {
font-size: 11.5px !important;
line-height: 1.5 !important;
color: #64748b !important;
margin: 0 0 10px 0 !important;
}
/* Блок цены */
.fe-acc-price {
display: inline-flex;
align-items: baseline;
gap: 4px;
background: #f8fafc;
padding: 4px 10px;
border-radius: 4px;
border: 1px solid #f1f5f9;
align-self: flex-start;
}
.fe-acc-price-label {
font-size: 10px;
color: #64748b;
text-transform: uppercase;
font-weight: 700;
}
.fe-acc-price-val {
font-family: 'winston-black', sans-serif;
font-size: 14px;
color: #16a34a; /* Зеленый цвет для цен */
font-weight: 800;
}
.fe-acc-price-unit {
font-size: 10px;
color: #94a3b8;
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
.fe-accessories-grid {
grid-template-columns: 1fr !important; /* Складываем в 1 колонку на планшетах */
gap: 15px !important;
}
}
@media (max-width: 480px) {
.fe-accessory-card {
flex-direction: column !important; /* Картинка встает над текстом на узких смартфонах */
align-items: flex-start !important;
}
.fe-acc-gallery {
width: 100% !important;
flex: 0 0 160px !important;
height: 160px !important;
}
}
.ae-spacer {
margin-top: 60px !important;
}
/* ==========================================================================
СЕО-БЛОК КАТЕГОРИИ АРХИВНОГО ОБОРУДОВАНИЯ (LIGHT COMPLIANCE)
========================================================================== */
.ae-seo-block {
background: #f8fafc !important; /* Легкий серый фон реестра */
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 35px 30px !important;
position: relative;
overflow: hidden;
}
/* Верхняя синяя бренд-полоса */
.ae-seo-block::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 4px !important;
background: #00a3e9 !important; /* Наш синий цвет Аскомплект */
}
/* Главный заголовок блока (h3) */
.ae-seo-block .ae-seo-main-title {
font-family: 'winston-black', sans-serif !important;
font-size: 18px !important;
text-transform: uppercase;
color: #0f172a !important;
margin: 0 0 25px 0 !important;
font-weight: 800 !important;
letter-spacing: 0.5px;
border-bottom: 1px solid #f1f5f9;
padding-bottom: 15px;
}
/* Сетка контента СЕО (CSS Grid) */
.ae-seo-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important; /* Ровно 3 колонки */
gap: 20px !important;
width: 100% !important;
}
/* ИСПРАВЛЕНИЕ СДВИГА ВПРАВО: Нейтрализуем псевдоэлементы Bootstrap в сетке СЕО */
.ae-seo-grid::before,
.ae-seo-grid::after {
display: none !important;
content: none !important;
}
/* Сброс стандартного Bootstrap поведения колонок */
.ae-seo-grid > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* Первая колонка встает строго в первую ячейку без пустых мест */
.ae-seo-grid > [class*="col-"]:first-child {
grid-column: 1 !important;
}
.ae-seo-column {
flex: 1 1 auto !important;
}
/* Подзаголовки колонок (h4) */
.ae-seo-column h4 {
font-family: 'winston-black', sans-serif !important;
font-size: 14px !important;
color: #00a3e9 !important; /* Синий цвет */
margin: 0 0 10px 0 !important;
font-weight: 700;
}
/* Параграфы текста */
.ae-seo-column p {
font-size: 13px !important;
line-height: 1.6 !important;
color: #475569 !important;
margin: 0 !important;
text-align: justify;
}
/* Выделение сильных СЕО-ключей */
.ae-seo-column p strong {
color: #0f172a !important;
font-weight: 700 !important;
}
/* Бейджи стандартов в самом низу блока */
.ae-seo-badge-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 15px;
border-top: 1px solid #e2e8f0;
padding-top: 20px;
}
.ae-seo-badge {
font-size: 11.5px !important;
color: #64748b !important;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
}
.ae-seo-badge i {
color: #00a3e9;
font-size: 13px;
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
.ae-seo-grid {
grid-template-columns: 1fr !important; /* Складываем в одну вертикальную колонку на мобильных */
gap: 20px !important;
}
}
@media (max-width: 767px) {
.ae-seo-block {
padding: 25px 20px !important;
}
.ae-seo-block .ae-seo-main-title {
font-size: 16px !important;
}
.ae-seo-badge-list {
flex-direction: column;
gap: 8px;
}
}
/* ========================================================================== */
/* СОВРЕМЕННЫЙ ДИЗАЙН COOKIE-ПОПАПА (Glassmorphism & Clean UI) */
/* ========================================================================== */
.cookies-popap.slogan-okno {
position: fixed;
bottom: 24px;
right: 24px;
max-width: 540px;
width: calc(100% - 48px);
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 20px;
padding: 20px 24px;
box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.12),
0 0 1px 1px rgba(15, 23, 42, 0.05);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
z-index: 999999;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
box-sizing: border-box;
animation: cookiePopUpFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Анимация плавного появления */
@keyframes cookiePopUpFadeIn {
from {
opacity: 0;
transform: translateY(20px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Текст уведомления */
.cookies-popap.slogan-okno p {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: #334155;
font-weight: 400;
flex: 1;
}
/* Ссылки в тексте */
.cookies-popap.slogan-okno p a {
color: #00a3e9;
text-decoration: none;
font-weight: 500;
border-bottom: 1px dashed rgba(0, 163, 233, 0.4);
transition: all 0.2s ease;
}
.cookies-popap.slogan-okno p a:hover {
color: #0284c7;
border-bottom-style: solid;
border-color: #0284c7;
}
/* Кнопка "СОГЛАСЕН" */
.cookies-popap.slogan-okno .btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #00a3e9 0%, #0087c5 100%);
color: #ffffff !important;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
padding: 12px 24px;
border-radius: 12px;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
box-shadow: 0 4px 14px rgba(0, 163, 233, 0.35);
transition: all 0.25s ease;
border: none;
outline: none;
user-select: none;
}
.cookies-popap.slogan-okno .btn:hover {
background: linear-gradient(135deg, #0284c7 0%, #0073a8 100%);
box-shadow: 0 6px 20px rgba(0, 163, 233, 0.45);
transform: translateY(-2px);
}
.cookies-popap.slogan-okno .btn:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 163, 233, 0.25);
}
/* Адаптированность под мобильные экраны */
@media (max-width: 640px) {
.cookies-popap.slogan-okno {
bottom: 16px;
left: 16px;
right: 16px;
width: calc(100% - 32px);
max-width: none;
flex-direction: column;
align-items: stretch;
padding: 18px 20px;
gap: 16px;
border-radius: 16px;
}
.cookies-popap.slogan-okno p {
font-size: 12.5px;
text-align: left;
}
.cookies-popap.slogan-okno .btn {
width: 100%;
padding: 12px 16px;
text-align: center;
}
}
/* ========================================================================== */
/* СОВРЕМЕННЫЙ ДИЗАЙН МОДАЛЬНОГО ОКНО КОНСУЛЬТАЦИИ (Pop-up Call-to-Action) */
/* ========================================================================== */
/* Затененный фон с блюром на весь экран */
.topokno.flash {
background: rgba(15, 23, 42, 0.65) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
align-items: center !important;
justify-content: center !important;
z-index: 999999 !important;
padding: 20px !important;
box-sizing: border-box !important;
animation: topOkFadeIn 0.3s ease-out forwards;
}
@keyframes topOkFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Сам модальный блок (перекрытие встроенных 550px) */
.topokno .login.box_red {
width: 100% !important;
max-width: 520px !important;
height: auto !important; /* Перебиваем встроенный style="height: 550px" */
min-height: auto !important;
background: #ffffff !important;
border-radius: 24px !important;
padding: 40px 32px 36px !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(226, 232, 240, 0.8) !important;
text-align: center !important;
box-sizing: border-box !important;
animation: topOkSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
border: none !important;
margin: auto !important;
float: none !important;
top: 5% !important;
}
@keyframes topOkSlideUp {
from { transform: translateY(20px) scale(0.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
/* Иконка закрытия (Крестик) */
.topokno .close_kor {
top: 20px !important;
right: 20px !important;
width: 36px !important;
height: 36px !important;
padding: 10px !important;
background: #f1f5f9 !important;
border-radius: 50% !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
box-sizing: border-box !important;
object-fit: contain !important;
z-index: 10 !important;
}
.topokno .close_kor:hover {
background: #e2e8f0 !important;
transform: rotate(90deg) scale(1.08) !important;
}
/* Заголовок окна */
.topokno .login h4 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 26px !important;
font-weight: 700 !important;
color: #0f172a !important;
margin: 0 0 12px 0 !important;
line-height: 1.25 !important;
letter-spacing: -0.5px !important;
}
/* Описание */
.topokno .login p {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 14px !important;
line-height: 1.55 !important;
color: #475569 !important;
margin: 0 0 10px 0 !important;
}
/* Скрытие служебных колонок Bootstrap для центрирования */
.topokno .login .hidden-xs {
display: none !important;
}
.topokno .login .col-xs-12,
.topokno .login [class*="col-"] {
width: 100% !important;
float: none !important;
padding: 0 !important;
/*margin-top: 20px !important;*/
}
/* Поле ввода телефона */
.topokno .input_input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
width: 100% !important;
height: 52px !important;
background: #f8fafc !important;
border: 1.5px solid #cbd5e1 !important;
border-radius: 14px !important;
padding: 0 18px !important;
font-size: 16px !important; /* Prevent zoom on mobile iOS */
color: #0f172a !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
outline: none !important;
box-shadow: none !important;
}
.topokno .input_input:focus {
background: #ffffff !important;
border-color: #00a3e9 !important;
box-shadow: 0 0 0 4px rgba(0, 163, 233, 0.15) !important;
}
.topokno .input_input::placeholder {
color: #94a3b8 !important;
}
/* Блок с чекбоксом согласия */
.topokno .login .col-xs-12 > p,
.topokno .login [class*="col-"] > p {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
margin: 16px 0 24px 0 !important;
text-align: left !important;
}
.topokno input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
accent-color: #00a3e9 !important;
cursor: pointer !important;
margin: 0 !important;
border-radius: 4px !important;
}
.topokno .login p a {
font-size: 12.5px !important;
color: #64748b !important;
text-decoration: underline !important;
text-decoration-color: #cbd5e1 !important;
transition: all 0.2s ease !important;
line-height: 1.4 !important;
}
.topokno .login p a:hover {
color: #00a3e9 !important;
text-decoration-color: #00a3e9 !important;
}
/* Кнопка "ОТПРАВИТЬ" */
.topokno .buttton {
width: 100% !important;
height: 52px !important;
background: linear-gradient(135deg, #00a3e9 0%, #0087c5 100%) !important;
color: #ffffff !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
border: none !important;
border-radius: 14px !important;
cursor: pointer !important;
box-shadow: 0 8px 20px -4px rgba(0, 163, 233, 0.4) !important;
transition: all 0.25s ease !important;
outline: none !important;
}
.topokno .buttton:hover {
background: linear-gradient(135deg, #0284c7 0%, #0073a8 100%) !important;
box-shadow: 0 12px 24px -4px rgba(0, 163, 233, 0.5) !important;
transform: translateY(-2px) !important;
}
.topokno .buttton:active {
transform: translateY(0) !important;
box-shadow: 0 4px 12px rgba(0, 163, 233, 0.3) !important;
}
/* Мобильная адаптивность */
@media (max-width: 576px) {
.topokno .login.box_red {
padding: 32px 20px 24px !important;
border-radius: 20px !important;
}
.topokno .login h4 {
font-size: 22px !important;
}
.topokno .login p {
font-size: 13px !important;
}
.topokno .close_kor {
top: 14px !important;
right: 14px !important;
width: 32px !important;
height: 32px !important;
}
}
/* ========================================================================== */
/* СТИЛИ ДЛЯ СОВРЕМЕННОГО КАТАЛОГА СТЕЛЛАЖЕЙ РЕГИСТРАТУРЫ */
/* ========================================================================== */
.mr-price-catalog {
margin: 40px 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Сетка карточек товаров (2 в ряд на десктопе) */
.mr-catalog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
/* Стиль отдельной карточки серии */
.mr-catalog-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 24px;
box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.3s ease;
}
.mr-catalog-card:hover {
transform: translateY(-4px);
border-color: #00a3e9;
box-shadow: 0 12px 30px -4px rgba(0, 163, 233, 0.15);
}
/* Бейджи/метки материалов */
.mr-card-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 6px 12px;
border-radius: 8px;
width: fit-content;
margin-bottom: 12px;
}
.mr-card-badge.metal {
background: #e0f2fe;
color: #0369a1;
}
.mr-card-badge.wood {
background: #fef3c7;
color: #b45309;
}
/* Заголовки карточки */
.mr-catalog-card h4 {
font-size: 18px;
font-weight: 700;
color: #0f172a;
margin: 0 0 4px 0;
line-height: 1.3;
}
.mr-card-desc {
font-size: 13px;
color: #64748b;
margin: 0 0 16px 0;
}
/* Компактная внутренняя таблица размеров */
.mr-sizes-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.mr-sizes-table th {
font-size: 11px;
text-transform: uppercase;
color: #94a3b8;
font-weight: 600;
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid #f1f5f9;
background: #f8fafc;
}
.mr-sizes-table td {
font-size: 13px;
color: #334155;
padding: 10px;
border-bottom: 1px solid #f1f5f9;
}
.mr-sizes-table tr:last-child td {
border-bottom: none;
}
.mr-price-tag {
font-size: 12px;
font-weight: 600;
color: #0284c7;
background: #f0f9ff;
padding: 4px 8px;
border-radius: 6px;
white-space: nowrap;
}
/* Кнопка заказа внутри карточки */
.mr-card-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 44px;
background: #f8fafc;
color: #00a3e9;
font-size: 13px;
font-weight: 600;
border: 1px solid #e2e8f0;
border-radius: 12px;
text-decoration: none;
transition: all 0.2s ease;
box-sizing: border-box;
}
.mr-card-btn:hover {
background: #00a3e9;
color: #ffffff;
border-color: #00a3e9;
box-shadow: 0 4px 12px rgba(0, 163, 233, 0.3);
}
/* Адаптив под планшеты и мобильные */
@media (max-width: 992px) {
.mr-catalog-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.mr-catalog-card {
padding: 16px;
}
.mr-sizes-table th,
.mr-sizes-table td {
font-size: 12px;
padding: 8px 6px;
}
}
.block_kontent .fe-card-advantages ul.fr-tag li.fr-tag {
position: relative !important;
padding-left: 15px !important;
margin: 0 !important;
color: #14532d !important;
font-size: 12.5px !important;
line-height: 1.5 !important;
}
.block_kontent .fe-card-advantages ul.fr-tag li.fr-tag::before {
content: '✓' !important;
position: absolute !important;
left: 0px !important;
top: 0px !important;
background-color: transparent !important;
box-shadow: none !important;
transition: none !important;
font-weight: 900;
color: #22c55e !important;
font-size: 13px;
}
.topokno .login p.micro-koments {
margin: 15px 0 5px !important;
text-align: left !important;
}
/* ========================================================================== -->