: щоб не порушувати SEO-ієрархію заголовків (на * сторінці h5 з'являвся раніше за h1). Дублюємо шрифтові властивості, * які
не наслідує від h1-h6.
* ------------------------------------------------------------------ */
p.hamburger-title,
p.svarog-contacts-title {
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-medium);
margin-top: 0;
}
p.hamburger-title {
letter-spacing: -0.03em;
}
/* ------------------------------------------------------------------
* Banner slider — плавне розчинення картинки на правому краю в тло.
* Лівий градієнт від Bexon (90deg, тёмний→прозорий) лишається —
* він потрібен щоб текст хіро читався. Зверху накладаємо другий
* градієнт (270deg) який притемнює тільки крайні ~18% праворуч.
* ------------------------------------------------------------------ */
.tj-slider-item::after {
background:
linear-gradient(270deg, rgb(12, 30, 33) 0%, rgba(12, 30, 33, 0) 18%),
linear-gradient(90deg, rgb(12, 30, 33) 20%, rgba(12, 30, 33, 0.4) 60%, rgba(12, 30, 33, 0.1) 100%);
}
/* ------------------------------------------------------------------
* Сайдбар-меню (Svarog_Sidebar_Menu_Walker) — 2-рівневе меню для
* сторінок послуг.
*
* 1-й рівень — карточка-посилання (стиль Bexon .service-categories
* незмінений). Поточна сторінка має
* і автоматично підсвічується Bexon-овим CSS.
* 2-й рівень — завжди видимий, без карточки, простий список зі
* стилізованим буллетом-крапкою в кольорі теми.
* Відступ зліва візуально підсилює ієрархію.
* ------------------------------------------------------------------ */
.svarog-sidebar-menu .svarog-sidebar-menu__list,
.svarog-sidebar-menu .svarog-sidebar-menu__list ul {
list-style: none;
margin: 0;
padding: 0;
}
/* === 2-й рівень: без карточки, текстові посилання з буллетом === */
.svarog-sidebar-menu .sub-menu {
margin: 8px 0 8px 18px; /* зміщення вправо для ієрархії */
padding: 0;
}
.svarog-sidebar-menu .sub-menu li {
position: relative;
margin: 0;
padding: 0;
}
.svarog-sidebar-menu .sub-menu li::before {
content: '';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--tj-color-theme-primary);
z-index: 1;
pointer-events: none;
}
/* Перебиваємо Bexon-овську карточку для підпунктів — посилання-список без фону */
.svarog-sidebar-menu .sub-menu li a {
display: block;
background: transparent !important;
padding: 7px 0 7px 20px;
border-radius: 0;
font-weight: var(--tj-fw-medium);
font-size: 15px;
line-height: 1.4;
color: var(--tj-color-heading-primary);
transition: color 0.2s ease;
}
.svarog-sidebar-menu .sub-menu li a:hover,
.svarog-sidebar-menu .sub-menu li a:hover span {
color: var(--tj-color-theme-primary) !important;
background: transparent !important;
}
/* Поточна сторінка на 2-му рівні — той самий акцент.
Bexon-овський .service-categories ul li a span задає колір окремо
для , тому override обов'язково на span теж. */
.svarog-sidebar-menu .sub-menu .current-menu-item > a,
.svarog-sidebar-menu .sub-menu .current-menu-item > a span,
.svarog-sidebar-menu .sub-menu .current_page_item > a,
.svarog-sidebar-menu .sub-menu .current_page_item > a span,
.svarog-sidebar-menu .sub-menu li a.active,
.svarog-sidebar-menu .sub-menu li a.active span {
color: var(--tj-color-theme-primary) !important;
background: transparent !important;
font-weight: var(--tj-fw-sbold);
}
/* .icon (стрілка) всередині ссылки 2-го рівня не виводиться walker'ом,
але страхуємо CSS на випадок ручної розмітки. */
.svarog-sidebar-menu .sub-menu li a > .icon {
display: none;
}
/* Батьківські пункти (з дочірніми послугами) — акцентний стиль:
зліва бірюзова смужка, текст жирніший і у кольорі темного заголовка.
Дочірні пункти лишаються звичайними з буллетами. */
.svarog-sidebar-menu .svarog-sidebar-menu__list > li.has-children > a {
font-weight: var(--tj-fw-sbold);
position: relative;
}
.svarog-sidebar-menu .svarog-sidebar-menu__list > li.has-children > a::before {
content: '';
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
width: 3px;
border-radius: 2px;
background: var(--tj-color-theme-primary);
}
/* Підвал — прибираємо верхній відступ (Bexon мав 100px). */
.tj-footer-section.footer-2 {
padding-top: 0;
}
/* ------------------------------------------------------------------
* Пошук у підвалі (колонка 1).
* ------------------------------------------------------------------ */
.svarog-footer-search {
margin-top: 22px;
}
.svarog-footer-search__label {
display: block;
color: var(--tj-color-common-white);
font-size: 14px;
font-weight: var(--tj-fw-medium);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 10px;
opacity: 0.9;
}
.svarog-footer-search__box {
display: flex;
align-items: stretch;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
overflow: hidden;
transition: border-color 0.2s ease, background 0.2s ease;
}
.svarog-footer-search__box:focus-within {
background: rgba(255, 255, 255, 0.12);
border-color: var(--tj-color-theme-primary);
}
.svarog-footer-search__box input[type="search"] {
flex: 1 1 auto;
min-width: 0;
background: transparent;
border: 0;
outline: none;
color: var(--tj-color-common-white);
font-size: 14px;
padding: 12px 14px;
font-family: inherit;
}
.svarog-footer-search__box input[type="search"]::placeholder {
color: rgba(255, 255, 255, 0.45);
}
.svarog-footer-search__box button {
flex: 0 0 auto;
background: var(--tj-color-theme-primary);
border: 0;
color: var(--tj-color-common-white);
padding: 0 18px;
cursor: pointer;
font-size: 16px;
transition: background 0.2s ease;
}
.svarog-footer-search__box button:hover {
background: #156a6a;
}
/* ------------------------------------------------------------------
* Сторінка результатів пошуку (search.php).
* ------------------------------------------------------------------ */
.svarog-search-rerun {
padding: 30px 0 0;
}
.svarog-search-rerun .svarog-search-form,
.svarog-search-rerun form {
max-width: 720px;
margin: 0 auto;
}
.svarog-search-rerun .search-box {
display: flex;
background: #fff;
border: 1px solid #e3e9ea;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 24px rgba(12, 30, 33, 0.06);
}
.svarog-search-rerun .search-box input[type="search"] {
flex: 1;
border: 0;
outline: none;
padding: 18px 22px;
font-size: 16px;
font-family: inherit;
color: var(--tj-color-heading-primary);
}
.svarog-search-rerun .search-box button {
background: var(--tj-color-theme-primary);
border: 0;
color: #fff;
padding: 0 28px;
font-size: 20px;
cursor: pointer;
transition: background 0.2s ease;
}
.svarog-search-rerun .search-box button:hover {
background: #156a6a;
}
.svarog-search-count {
color: var(--tj-color-text-body);
font-size: 15px;
margin: 0 0 28px;
opacity: 0.85;
}
.svarog-search-results {
display: grid;
gap: 22px;
}
.svarog-search-item {
background: #fff;
border: 1px solid #ecf0f0;
border-radius: 14px;
padding: 26px 28px;
transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.svarog-search-item:hover {
border-color: transparent;
box-shadow: 0 12px 36px rgba(12, 30, 33, 0.08);
transform: translateY(-2px);
}
.svarog-search-item__meta {
display: flex;
gap: 14px;
align-items: center;
margin-bottom: 10px;
font-size: 13px;
color: var(--tj-color-text-body);
}
.svarog-search-item__type {
display: inline-block;
padding: 4px 12px;
background: rgba(30, 138, 138, 0.1);
color: var(--tj-color-theme-primary);
border-radius: 999px;
font-weight: var(--tj-fw-sbold);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 11px;
}
.svarog-search-item__title {
font-size: 22px;
line-height: 1.3;
margin: 0 0 12px;
}
.svarog-search-item__title a {
color: var(--tj-color-heading-primary);
text-decoration: none;
}
.svarog-search-item__title a:hover {
color: var(--tj-color-theme-primary);
}
.svarog-search-item__excerpt {
color: var(--tj-color-text-body);
line-height: 1.6;
margin: 0 0 16px;
}
.svarog-search-item__excerpt p {
margin: 0;
}
.svarog-search-item__more {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--tj-color-theme-primary);
font-weight: var(--tj-fw-sbold);
font-size: 14px;
text-decoration: none;
transition: gap 0.2s ease;
}
.svarog-search-item__more:hover {
gap: 14px;
color: #156a6a;
}
.svarog-search-empty {
text-align: center;
padding: 40px 0;
}
.svarog-search-empty h2 {
font-size: 28px;
margin: 0 0 12px;
}
.svarog-search-empty p {
color: var(--tj-color-text-body);
margin: 0 0 24px;
}
/* Текст про месенджери на сторінці контактів — над формою. */
.svarog-contact-messengers-text {
margin: 0 0 22px;
color: var(--tj-color-text-body);
line-height: 1.6;
}
.svarog-contact-messengers-text p {
margin: 0 0 10px;
}
.svarog-contact-messengers-text p:last-child {
margin-bottom: 0;
}
.svarog-contact-messengers-text a {
color: var(--tj-color-theme-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.svarog-contact-messengers-text a:hover {
text-decoration: none;
}
/* ------------------------------------------------------------------
* Списки в контентних блоках — буллети не вилазять ліворуч за межі
* тексту, а стоять врівень із лівим краєм тексту. Кастомний буллет
* (•) у кольорі теми, padding-left однаковий для всіх рядків — щоб
* багаторядковий пункт переносився під першу літеру, не під буллет.
*
* Застосовується тільки до контентних обгорток (не зачіпає меню,
* сайдбар, контактний компонент тощо).
* ------------------------------------------------------------------ */
:is(
.entry-content,
.entry-text,
.blog-text,
.svarog-blog-text,
.svarog-contact-messengers-text,
.post-details-wrapper
) ul {
list-style: none;
padding-left: 0;
margin: 0 0 1em;
}
:is(
.entry-content,
.entry-text,
.blog-text,
.svarog-blog-text,
.svarog-contact-messengers-text,
.post-details-wrapper
) ul > li {
position: relative;
padding-left: 1.4em;
margin-bottom: 6px;
}
:is(
.entry-content,
.entry-text,
.blog-text,
.svarog-blog-text,
.svarog-contact-messengers-text,
.post-details-wrapper
) ul > li::before {
content: '•';
position: absolute;
left: 0.3em;
top: 0;
color: var(--tj-color-theme-primary);
font-size: 1.4em;
line-height: 1;
}
/* Нумеровані списки — лишаємо стандартну нумерацію, але теж зміщуємо
щоб номер не вилазив за межі тексту. */
:is(
.entry-content,
.entry-text,
.blog-text,
.svarog-blog-text,
.svarog-contact-messengers-text,
.post-details-wrapper
) ol {
padding-left: 1.4em;
margin: 0 0 1em;
}
/* ------------------------------------------------------------------
* Сторінки послуг імпортовані з legacy svaroglaw.com через
* fusion-importer. Колонки [fusion_builder_column] оборачуються
* у