/*
* kazpe — кастомные стили темы.
* Базовые токены и стили каркаса (шапка, подвал, компоненты) + секции главной (S4).
* Палитра бренда — реальные значения из живого CSS kazpe.kz (S4, решение п.8).
* Шрифт — системный sans-serif (дефолтный стек Bootstrap), внешние шрифты не тянем.
*/
:root {
--kazpe-brand-blue: #03A8E1;
--kazpe-brand-blue-hover: #0291c2; /* затемнение фирменного голубого ~10% (hover/active фонов) */
--kazpe-brand-dark: #010122;
--kazpe-text: #151515;
--kazpe-border: #dadada;
/* S10, ADR-0013: бренд-синий как цвет ТЕКСТА не проходит WCAG AA (2.73:1).
Для ссылок/текстовых акцентов — затемнённые токены (≥4.5:1 на белом и #f6f8fb). */
--kazpe-link: #0277A8;
--kazpe-link-hover: #015F86;
}
/* Связываем акценты Bootstrap: фоны — бренд-синий, ссылки — контрастный токен. */
:root {
--bs-primary: var(--kazpe-brand-blue);
--bs-primary-rgb: 3, 168, 225;
--bs-link-color: var(--kazpe-link);
--bs-link-color-rgb: 2, 119, 168;
--bs-link-hover-color: var(--kazpe-link-hover);
--bs-link-hover-color-rgb: 1, 95, 134;
}
.btn-primary {
--bs-btn-bg: var(--kazpe-brand-blue);
--bs-btn-border-color: var(--kazpe-brand-blue);
--bs-btn-hover-bg: var(--kazpe-brand-blue-hover);
--bs-btn-hover-border-color: var(--kazpe-brand-blue-hover);
--bs-btn-active-bg: var(--kazpe-brand-blue-hover);
--bs-btn-active-border-color: var(--kazpe-brand-blue-hover);
--bs-btn-color: var(--kazpe-brand-dark);
--bs-btn-hover-color: var(--kazpe-brand-dark);
--bs-btn-active-color: var(--kazpe-brand-dark);
}
/* Skip-link — фокус выводит ссылку из-за края экрана. */
.kazpe-skip-link {
position: absolute;
z-index: 1080;
top: 0.5rem;
left: 0.5rem;
}
/* Компенсация sticky-шапки для якорного скролла (#main, #services):
цель перехода не уходит под прилипшую шапку. Значение ≥ высоты навбара. */
html {
scroll-padding-top: 5rem;
}
/* Шапка / навбар. Sticky + лёгкая тень после прокрутки (S5, T-010). */
.site-header {
position: sticky;
top: 0;
z-index: 1030;
background-color: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled {
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.12);
}
.site-brand {
text-decoration: none;
font-weight: 700;
font-size: 1.25rem;
line-height: 1;
}
.site-brand__accent {
color: var(--kazpe-brand-blue);
}
/* Акцент вордмарка в шапке — на белом фоне бренд-синий #03A8E1 даёт 2.73:1
(ниже AA). Затемняем до токена ссылок #0277A8 (4.99:1) ТОЛЬКО в шапке: в
подвале (тёмный фон) бренд-синий остаётся и проходит AA (7.48:1).
S10/ADR-0013: бренд-синий как цвет текста на светлом фоне → контрастный токен. */
.site-navbar .site-brand__accent {
color: var(--kazpe-link);
}
.site-brand__base {
color: var(--kazpe-brand-dark);
}
/* Бренд-марка: и ![]()
(custom-logo), и инлайн-SVG (ADR-0008).
max-height на inline-span не действует — задаём его на вложенном