/* * Ergopraktik — глобальні стилі сайту. Стилі окремого елемента інтерфейсу — * у його компоненті: components/<назва>/<назва>.css (D-030). * * Правила: * - Кольори й шрифти — не хардкодити, а брати з глобальних налаштувань * Elementor (Site Settings): var(--e-global-color-primary), * var(--e-global-typography-primary-font-family) тощо. Так зміна палітри * в адмінці підхопиться і тут. * - Не писати CSS у «Customizer → Zusätzliches CSS» і в полях Custom CSS * Elementor — воно живе в БД, поза Git і губиться між середовищами. * - Файл підключається після основних стилів Flexora й Elementor * (inc/enqueue.php). Якщо правило не спрацьовує — підвищити специфічність * селектора, а не додавати !important: частину CSS тема друкує в . */ /* * Багаторазовий клас для Elementor-віджетів і окремих посилань. * Лінія бере колір самого посилання через currentColor: працює на темному * й світлому тлі без окремих варіантів класу. Лінія — фон-градієнт самого * посилання: не потребує position, переноситься разом із текстом на кілька рядків. * Тема анімує в посиланнях усе (transition: all 0.3s), тож колір тексту міняється * швидше за ріст лінії — інакше лінія виростає темною й перефарбовується. */ html body .ergo-hover-underline a, html body a.ergo-hover-underline { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 100% 100%; background-size: 0 1px; transition: color 120ms ease, background-size 320ms cubic-bezier(0.4, 0, 0.2, 1); } html body .ergo-hover-underline a:is(:hover, :focus-visible), html body a.ergo-hover-underline:is(:hover, :focus-visible) { text-decoration: none; border-bottom: 0; background-position: 0 100%; background-size: 100% 1px; } @media (prefers-reduced-motion: reduce) { html body .ergo-hover-underline a, html body a.ergo-hover-underline { transition: none; } } /* * Хедер: стрілка біля пунктів меню з підменю. * Саму стрілку виводить віджет Nav Menu (параметр «Submenu Indicator»). * Flexora ховає .sub-arrow у віджетів без класу vamtam-has-submenu-icon, а * скрипт VamTam, що мав би ставити цей клас, коли іконку задано, плагін * Vamtam Elementor Integration не підключає — тож стрілка прихована завжди. * Перше правило повертає її, коли іконка є (порожній індикатор Elementor * виводить як , і тоді стрілки, як і задумано, немає). * Специфічність вища за правило теми, тож порядок підключення не важливий. */ .elementor-widget-nav-menu.vamtam-has-theme-widget-styles .elementor-nav-menu .sub-arrow:has(> i:not([class=""]), > svg) { display: flex; } /* * Поворот стрілки. SmartMenus (меню Elementor Pro) ставить посиланню клас * .highlighted рівно тоді, коли показує його підменю, і знімає, коли ховає, * тож стрілка повертається разом із меню: при наведенні, з клавіатури, тапом. * Перший селектор — верхній рівень десктопного меню (вкладені рівні Elementor * сам повертає на -90°), другий — розгортання пунктів у мобільному меню. */ .elementor-nav-menu--main > .elementor-nav-menu > li > a .sub-arrow > :is(i, svg), .elementor-nav-menu__container.elementor-nav-menu--dropdown a .sub-arrow > :is(i, svg) { transition: transform 0.25s ease; } .elementor-nav-menu--main > .elementor-nav-menu > li > a.highlighted .sub-arrow > :is(i, svg), .elementor-nav-menu__container.elementor-nav-menu--dropdown a.highlighted .sub-arrow > :is(i, svg) { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .elementor-nav-menu .sub-arrow > :is(i, svg) { transition: none; } } /* * Головна, Hero: H1 зі словом, що змінюється (віджет Animated Headline, клас * ergo-hero-headline). Віджет підганяє ширину під поточне слово, тож без * керованого розриву коротке «Kinder.» вміщалось у рядок, а довге * «Erwachsene.» — ні, і заголовок стрибав. У тексті перед «stärkt» стоїть
: * слово ніколи не переноситься саме, а «stärkt + слово» — завжди цілий рядок. * Речення з найдовшим словом займає ≈1235px (56px, Ovo). Від 1340px контейнер * має повні 1280px, запас ≈45px на різницю рендерингу шрифтів — там розрив * прибрано, H1 в один рядок. Змінився текст чи розмір — перевірити поріг. */ @media (min-width: 1340px) { .ergo-hero-headline .elementor-headline br { display: none; } }