/* * Стили фронтенда мега-меню * * Для чего: Выпадающие панели при наведении на пункты навигации * Ключевой принцип: Панели телепортируются JS-ом в (smm-overlay) и позиционируются * через position:fixed — координаты вычисляются от getBoundingClientRect(.header__main), * поэтому значения уже в viewport-пространстве. position:fixed гарантирует, что панель * остаётся прибита к шапке даже при скролле страницы. * Источник (оригинал Vue SPA): .navigation-main__mega-menu[data-v-767e278e]{position:absolute;top:calc(100% - 1px);left:0;right:0} */ /* ========================================================================= Панель — позиционирование и видимость ========================================================================= */ .smm-panel { /* position:fixed — JS телепортирует панель в и ставит координаты через getBoundingClientRect() (viewport-relative). position:absolute в скроллилось бы вместе со страницей; fixed — остаётся прибито к viewport независимо от скролла */ position: fixed; top: calc(100% - 1px); /* начальное значение; JS перезапишет через style.top */ left: 0; right: 0; width: auto; z-index: 1050; background: #fff; box-shadow: 0 4px 32px rgba(70, 89, 165, 0.086); /* #4659a516 из оригинала */ border-radius: 0 0 20px 20px; /* clip-path: показывает тень за пределами элемента, скругляет нижние углы */ clip-path: inset(0 -50px -50px -50px round 20px); /* Скрыта по умолчанию */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; transform: translateY(-6px); } /* Класс видимости — добавляется front.js при hover */ .smm-panel--visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* Внутренний контейнер: padding 30px как в оригинале */ .smm-panel__inner { padding: 30px; display: flex; align-items: flex-start; gap: 30px; flex: 1 0 0; width: 100%; box-sizing: border-box; } /* ========================================================================= Интерактивный sidebar: контейнер правых панелей и логика показа/скрытия Для чего: При наведении на пункт сайдбара JS добавляет --active к нужному .smm-cards[data-smm-tab-content], убирает у остальных ========================================================================= */ /* Обёртка всех правых панелей — flex-item занимает оставшееся место */ .smm-sidebar-panels { flex: 1; position: relative; min-height: 0; } /* * Wrapper-блок: каждый таб (header + карточки) — один .smm-sidebar-panel * * Для чего: JS прячет/показывает весь блок (включая заголовок) как единицу * Почему wrapper отдельно от grid: если header внутри grid — он становится * grid-ячейкой. Wrapper — flex-column, grid вложен внутрь. */ .smm-sidebar-panels > .smm-sidebar-panel { display: none; flex-direction: column; gap: 12px; } /* Видимый таб (inline style через JS — надёжнее чем класс) */ .smm-sidebar-panels > .smm-sidebar-panel[style*="flex"] { display: flex; } /* Сетка карточек внутри panel — 3 колонки */ .smm-sidebar-panel .smm-cards--sidebar-right { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } /* Активный пункт сайдбара — подсветка */ .smm-sidebar__item--active { background-color: #f0f0fb; border-radius: 10px; } /* * Заголовок-ссылка «Все решения по задачам >» над карточками * Для чего: Показывает название активной категории + переход к полному списку * Стиль: Bold 18px, черный цвет, стрелка в синем акцентном цвете */ .smm-sidebar-panels__header { margin-bottom: 16px; } .smm-sidebar-panels__header-link { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 600; color: #293139; text-decoration: none; line-height: 1.2; transition: color 0.15s ease; } .smm-sidebar-panels__header-link:hover { color: #546bc6; text-decoration: none; } .smm-sidebar-panels__header-arrow { color: #546bc6; font-size: 16px; } /* Ссылка «Все → …» когда для пункта совсем нет карточек */ .smm-sidebar-panels__all-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; color: #546bc6; text-decoration: none; font-size: 15px; font-weight: 500; } .smm-sidebar-panels__all-link:hover { text-decoration: underline; } /* ========================================================================= Макет: icon-cards (Компания) Для чего: Список разделов компании со значком, названием и описанием Источник: column-item__regular[data-v-ab79ba18] — icon 20px, title 16px, desc 13px ========================================================================= */ .smm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px; flex: 1; } /* Одна карточка */ .smm-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 6px; text-decoration: none; color: inherit; transition: background-color 0.2s ease; overflow: hidden; } .smm-card:hover { background-color: #f8f9fa; text-decoration: none; color: inherit; } /* Иконка (20×20, как в оригинале) */ .smm-card__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; display: flex; align-items: center; justify-content: center; } .smm-card__icon .smm-icon, .smm-card__icon img { width: 20px; height: 20px; object-fit: contain; } .smm-card__icon .smm-icon svg { width: 20px; height: 20px; } /* Текстовый блок */ .smm-card__body { flex: 1; display: flex; flex-direction: column; gap: 4px; } .smm-card__label { font-weight: 500; font-size: 16px; color: #293139; line-height: normal; display: flex; align-items: center; gap: 4px; } .smm-card__desc { color: #4c565f; font-size: 13px; font-weight: 400; line-height: 17px; } /* ========================================================================= Макет: icon-sidebar (Решения) Для чего: Список пунктов со значком — боковая панель навигации Источник: navigation-main__sidebar-menu[data-v-45096eb4] min-width:224px;max-width:268px; gap:10px; border-radius:10px; padding:10px ========================================================================= */ .smm-sidebar { min-width: 224px; max-width: 268px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .smm-sidebar__title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #666; margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid #eee; width: 100%; } /* Список пунктов */ .smm-sidebar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; } .smm-sidebar__item { display: flex; align-items: center; gap: 10px; align-self: stretch; border-radius: 10px; width: 100%; } .smm-sidebar__item:hover { background-color: #f8f8fc; } /* Ссылка пункта */ .smm-sidebar__link { display: flex; align-items: center; gap: 10px; padding: 10px; text-decoration: none; color: #293139; font-size: 16px; font-weight: 500; line-height: normal; width: 100%; } .smm-sidebar__link:hover { color: #293139; text-decoration: none; } /* Иконка пункта sidebar */ .smm-sidebar__icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .smm-sidebar__icon .smm-icon, .smm-sidebar__icon img { width: 20px; height: 20px; object-fit: contain; } .smm-sidebar__icon .smm-icon svg { width: 20px; height: 20px; } .smm-sidebar__label { flex: 1; } /* ========================================================================= Макет: columns-* (Продукты / Поддержка / Партнерство) Для чего: Несколько колонок ссылок Источник: column-item__without-all{min-width:268px} + nested-link{font-size:13px;padding:6px 8px} ========================================================================= */ .smm-columns { display: flex; align-items: flex-start; gap: 30px; flex: 1 0 0; } .smm-columns__main { display: flex; align-items: flex-start; gap: 30px; flex: 1; } /* Одна колонка */ .smm-column { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 8px; } /* * Заголовок колонки (например «Сотрудничество», «Экосистема продуктов >») * * Для чего: Визуально разделяет разные смысловые группы ссылок * Стиль по дизайну: крупный жирный текст того же цвета что и ссылки, * НЕ uppercase, НЕ мелкий — в отличие от Bootstrap-шных подходов */ .smm-column__title { font-weight: 600; font-size: 16px; color: #293139; line-height: 1.3; margin: 0 0 4px; padding: 0; } /* Если заголовок — ссылка (например «Экосистема продуктов >») */ a.smm-column__title { text-decoration: none; display: block; transition: color 0.15s ease; } a.smm-column__title:hover { color: #546bc6; text-decoration: none; } /* Разделитель между секциями внутри одной колонки */ .smm-column__section { display: flex; flex-direction: column; gap: 2px; } .smm-column__section + .smm-column__section { margin-top: 16px; } .smm-column__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } /* Ссылка в колонке */ .smm-column__link { text-decoration: none; color: #293139; font-size: 14px; font-weight: 400; padding: 5px 8px; display: flex; align-items: center; gap: 4px; border-radius: 6px; line-height: 1.4; transition: background-color 0.15s ease, color 0.15s ease; } .smm-column__link:hover { background-color: #f0f0fb; color: #546bc6; text-decoration: none; } /* Иконка внешней ссылки ↗ */ .smm-column__ext-icon { flex-shrink: 0; width: 12px; height: 12px; opacity: 0.5; } /* ========================================================================= CTA-блок (только для columns-cta) Для чего: Промо-блок справа от колонок с заголовком, описанием и кнопкой ========================================================================= */ .smm-cta { flex-shrink: 0; width: 300px; background: #f8f8fc; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; } .smm-cta__image { width: 100%; height: auto; border-radius: 8px; object-fit: cover; } .smm-cta__title { font-size: 16px; font-weight: 600; color: #293139; line-height: 1.3; } .smm-cta__desc { font-size: 13px; color: #4c565f; line-height: 1.5; } .smm-cta__button { display: inline-flex; justify-content: center; align-items: center; padding: 10px 16px; background: #546bc6; color: #fff; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500; transition: background 0.15s ease; } .smm-cta__button:hover { background: #4358b0; color: #fff; text-decoration: none; } /* ========================================================================= Заглушка иконки ========================================================================= */ .smm-icon-placeholder { display: block; width: 20px; height: 20px; background: #e7e7f0; border-radius: 4px; } /* ========================================================================= Скрываем на мобильных (< 1024px) — панели не нужны, есть мобильное меню ========================================================================= */ @media (max-width: 1023px) { .smm-panel { display: none !important; } }