светлый пилюлёобразный
*
* ССЫЛКА "ПОДРОБНЕЕ":
*
Подробнее →
*
* MEDIA-ROW (картинка + текст):
*
...
*
...
*
* Шахматка (серия media-row автоматически чередуется):
*
*
* STATS (4 крупные цифры):
*
*
* PROCESS / TIMELINE (этапы работы):
*
* -
*
1
*
*
*
*
* ACCORDION / FAQ (нативный, без JS):
*
*
* TABS (вкладки, требует JS в main.js):
*
*
*
*
*
*
* PRICING TABLE:
*
*
*
*
Bronze
*
15%
*
скидка
*
*
* - Что входит
* - Чего нет
*
*
CTA
*
*
*
* LOGO CLOUD:
*
*
* ============================================================ */
@media (max-width: 899px) {
.team-grid { grid-template-columns: 1fr !important; }
}
/* ============================================================
* МОДИФИКАТОРЫ НАПРАВЛЕНИЙ — локально переопределяют --c-accent.
* Любой элемент внутри получает цвет своего направления для
* всех мест где используется var(--c-accent).
* ============================================================ */
.dir-bitrix24 {
--c-accent: var(--c-dir-bitrix);
--c-accent-d: var(--c-dir-bitrix-d);
--c-accent-soft: var(--c-dir-bitrix-soft);
--c-accent-rgb: var(--c-dir-bitrix-rgb);
--c-accent-shadow: rgba(13, 172, 229, .18);
/* .card--accent (тёмная карточка) на странице направления
* окрашивается в тёмную версию цвета этого направления */
--c-bg-dark: var(--c-dir-bitrix-d);
}
.dir-ai {
--c-accent: var(--c-dir-ai);
--c-accent-d: var(--c-dir-ai-d);
--c-accent-soft: var(--c-dir-ai-soft);
--c-accent-rgb: var(--c-dir-ai-rgb);
--c-accent-shadow: rgba(8, 145, 178, .18);
--c-bg-dark: var(--c-dir-ai-d);
}
.dir-web {
--c-accent: var(--c-dir-web);
--c-accent-d: var(--c-dir-web-d);
--c-accent-soft: var(--c-dir-web-soft);
--c-accent-rgb: var(--c-dir-web-rgb);
--c-accent-shadow: rgba(71, 85, 105, .22);
--c-bg-dark: var(--c-dir-web-d);
}
.dir-design {
--c-accent: var(--c-dir-design);
--c-accent-d: var(--c-dir-design-d);
--c-accent-soft: var(--c-dir-design-soft);
--c-accent-rgb: var(--c-dir-design-rgb);
--c-accent-shadow: rgba(190, 24, 93, .18);
--c-bg-dark: var(--c-dir-design-d);
}
/* Акцент-линия 3px сверху страницы — для hero-секций услуг.
* Добавляется к телу страницы (body) или к hero-секции.
* Цвет берётся из --c-accent текущего скоупа, поэтому линия
* автоматически окрашивается в цвет направления. */
/* Акцент-линия сверху страницы. Реализована через box-shadow inset
* у body — не сдвигает layout, не накладывается на админ-панель Битрикса. */
body.has-direction-stripe {
box-shadow: inset 0 3px 0 var(--c-accent);
}
/* ============================================================
* АКТИВНЫЙ ПУНКТ МЕНЮ — подсветка цветом направления.
* Класс .is-active навешивается на
сервером (см.
* components/dicom/menu/templates/.default/template.php).
* Поскольку на этом же уже стоит класс .dir-* (cyan/ai/web/design),
* --c-accent внутри ссылки переопределён — значит подсветка
* автоматически окрашивается в цвет своего направления.
* ============================================================ */
.nav__link.is-active {
color: var(--c-accent);
background: var(--c-accent-soft);
border-radius: 6px;
padding: 6px 12px;
/* margin компенсирует вертикальный padding, чтобы высота строки
* меню не "прыгала" из-за подложки */
margin: -6px 0;
}
.nav__submenu-link.is-active {
background: var(--c-accent-soft);
border-radius: 6px;
}
.nav__submenu-link.is-active span {
color: var(--c-accent);
}
}
/* ============================================================
* МЕССЕНДЖЕРЫ В ФУТЕРЕ
* Три кнопки-канала в первой колонке футера под копирайтом.
* Иконки SVG берут color через currentColor.
* ============================================================ */
.site-footer__messengers {
display: flex;
gap: 8px;
margin-top: 18px;
}
.site-footer__msg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
color: rgba(255, 255, 255, .7);
background: rgba(255, 255, 255, .08);
text-decoration: none;
transition: all var(--t);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.3px;
}
.site-footer__msg svg,
.site-footer__msg img {
width: 18px;
height: 18px;
}
.site-footer__msg:hover {
color: #fff;
background: var(--c-accent);
transform: translateY(-2px);
}