/* ========================================================= Site Toolkit — Global buttons v1.5.1 --------------------------------------------------------- v1.5.0 (2026-09): • Модифікатор .loco-btn--hover-blue: dark-кнопка з синім градієнтом на hover (для карток послуг, hero, прайсу, CTA поста блога). Комбінується з --dark / --secondary. • Legacy-обгортки: старі класи модулів (.loco-svc-card__btn-primary, .loco-svc-hero__cta, .loco-blog-card__btn, .loco-post-cta__btn, .loco-reviews .loco-btn-primary, .loco-btn-outline) ЗАЛИШЕНО як alias-и до .loco-btn.* через shared.css і в модулях їхні свої стилі видалено. Це щоб старий HTML на бойовому не поламався до заливки нового плагіна. --------------------------------------------------------- Strategy vs Elementor Kit: • Свої токени --ltk-* (не залежать від Elementor Site Settings) • Дублювання класу .loco-btn.loco-btn для (0,3,0) специфічності — бʼє Elementor Kit .elementor-kit-N .elementor-button (0,2,0/1) • !important на критичному (color/background/hover) — бо Elementor Kit :hover теж з !important на деяких проектах • Ловимо ОБИДВА режими: a.loco-btn (пряма розмітка) .loco-btn .elementor-button (клас на wrapper Elementor) ========================================================= */ /* ================================================================ FALLBACK токени. Реальні значення інжектяться модулем Tokens в через :root — вони перебивають цей блок. Тому тут — ЛИШЕ на випадок якщо інжект зламався. ================================================================ */ :root { --ltk-blue-500: #1F65E9; --ltk-blue-600: #1E56C3; --ltk-blue-300: #6683B6; --ltk-blue-100: #AFC5EB; --ltk-neutral-900: #1E1E1E; --ltk-neutral-600: #415170; --ltk-neutral-200: #DCE7F8; --ltk-neutral-100: #EAF3FF; --ltk-neutral-050: #F5F9FE; --ltk-white: #FFFFFF; --ltk-radius-pill: 999px; --ltk-radius-card: 16px; --ltk-radius-sm: 12px; --ltk-font: "Gilroy", "Inter", system-ui, -apple-system, sans-serif; --ltk-transition: 250ms ease; } /* ================================================================ WRAPPER MODE reset v1.5.1 — коли .loco-btn стоїть на wrapper Elementor --------------------------------------------------------- Проблема: Elementor кладе клас на .elementor-widget-button (обгортка), а не на . Wrapper за замовчуванням block, розтягнутий на всю ширину колонки → ховер тригериться коли курсор далеко від кнопки. Рішення: 1. Сам wrapper зробити shrink-to-fit (fit-content), щоб він займав рівно ширину кнопки, а не колонки. 2. Прибрати всі візуальні стилі з wrapper і .elementor-widget-container і .elementor-button-wrapper (щоб !important з base не малював кнопку двічі). 3. Ховер / focus / active — тільки на самому , НІ на wrapper'і. Тому нижче використовуються тільки селектори .loco-btn .elementor-button:hover (а не .loco-btn:hover .*). ================================================================ */ .elementor-widget-button.loco-btn.loco-btn, .elementor-element.loco-btn.loco-btn { background: transparent !important; padding: 0 !important; border: 0 !important; outline: none !important; box-shadow: none !important; height: auto !important; /* fit-content: wrapper стягується до ширини реальної кнопки */ display: inline-block !important; width: -moz-fit-content !important; width: fit-content !important; max-width: 100% !important; border-radius: 0 !important; /* важливо: wrapper НЕ ловить події миші — курсор проходить крізь нього на дочірню . Дитина явно pointer-events: auto повертає собі. */ /* НЕ pointer-events: none на wrapper — інакше Elementor Editor не даси клікнути. Замість цього обмежуємо ширину через fit-content вище. */ } /* Elementor іноді ставить width: 100% на планшет/мобілку через .elementor-widget-tablet__width-inherit / __width-initial — перебиваємо */ .elementor-widget-button.loco-btn.loco-btn.elementor-widget__width-initial, .elementor-widget-button.loco-btn.loco-btn.elementor-widget__width-inherit, .elementor-widget-button.loco-btn.loco-btn.elementor-widget-tablet__width-initial, .elementor-widget-button.loco-btn.loco-btn.elementor-widget-tablet__width-inherit, .elementor-widget-button.loco-btn.loco-btn.elementor-widget-mobile__width-initial, .elementor-widget-button.loco-btn.loco-btn.elementor-widget-mobile__width-inherit { width: -moz-fit-content !important; width: fit-content !important; } .loco-btn.loco-btn > .elementor-widget-container, .loco-btn.loco-btn .elementor-button-wrapper { background: transparent !important; padding: 0 !important; margin: 0 !important; border: 0 !important; display: inline-block !important; width: auto !important; line-height: 0 !important; /* прибирає паразитний зайвий simfont-baseline під ссылкою */ } /* Сама — уже display:inline-flex з base, повертаємо line-height */ .loco-btn.loco-btn .elementor-button { line-height: 1 !important; } /* Elementor tablet-align-justify іноді робить wrapper на всю ширину */ .loco-btn.loco-btn.elementor-tablet-align-justify, .loco-btn.loco-btn.elementor-mobile-align-justify { width: -moz-fit-content !important; width: fit-content !important; } /* .elementor-button-wrapper за замовчуванням має text-align, це не пробує з'їсти зайвий простір — тримаємо його inline */ .loco-btn.loco-btn .elementor-button-wrapper { text-align: initial !important; } /* ================================================================ BASE — застосовується до: A) прямо: a.loco-btn.loco-btn, button.loco-btn.loco-btn B) wrapper: .loco-btn.loco-btn .elementor-button Специфічність (0,3,0) — бʼє Elementor Kit (0,2,0) навіть без !important. !important лишаємо на критичному щоб hover з !important не зʼїв нас. ================================================================ */ a.loco-btn.loco-btn, button.loco-btn.loco-btn, .loco-btn.loco-btn .elementor-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; height: 56px !important; padding: 12px 24px !important; border-radius: var(--ltk-radius-card, 16px) !important; border: 0 !important; font-family: var(--ltk-font) !important; font-weight: 700 !important; font-size: 16px !important; line-height: 1 !important; letter-spacing: 0 !important; text-decoration: none !important; cursor: pointer; white-space: nowrap; box-sizing: border-box !important; user-select: none; text-shadow: none !important; box-shadow: none !important; min-height: 0 !important; min-width: 0 !important; transition: background var(--ltk-transition, 250ms ease), background-color var(--ltk-transition, 250ms ease), color var(--ltk-transition, 250ms ease), outline var(--ltk-transition, 250ms ease), outline-offset var(--ltk-transition, 250ms ease), box-shadow var(--ltk-transition, 250ms ease), opacity var(--ltk-transition, 250ms ease), transform 200ms ease !important; } /* Elementor обгортає текст */ .loco-btn.loco-btn .elementor-button-text, .loco-btn.loco-btn .elementor-button-content-wrapper { color: inherit !important; font: inherit !important; line-height: 1 !important; background: transparent !important; } /* SVG */ a.loco-btn.loco-btn > svg, button.loco-btn.loco-btn > svg, .loco-btn.loco-btn .elementor-button-icon svg, .loco-btn.loco-btn .elementor-button > svg { width: 18px !important; height: 18px !important; flex: 0 0 auto; display: block; } /* Focus */ .loco-btn.loco-btn:focus, .loco-btn.loco-btn .elementor-button:focus { outline: none !important; } .loco-btn.loco-btn:focus-visible, .loco-btn.loco-btn .elementor-button:focus-visible { outline: 2px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -2px !important; } /* ================================================================ 1) PRIMARY (blue gradient) ================================================================ */ a.loco-btn.loco-btn--primary, button.loco-btn.loco-btn--primary, .loco-btn.loco-btn--primary .elementor-button { color: var(--ltk-white, #ffffff) !important; background: linear-gradient(90deg, #034DCF 0%, #3074F9 100%) !important; } a.loco-btn.loco-btn--primary:hover, button.loco-btn.loco-btn--primary:hover, .loco-btn.loco-btn--primary .elementor-button:hover { background: linear-gradient(90deg, #0039BB 0%, #1C60E5 100%) !important; color: var(--ltk-white, #ffffff) !important; } a.loco-btn.loco-btn--primary:active, button.loco-btn.loco-btn--primary:active, .loco-btn.loco-btn--primary .elementor-button:active { background: #0039BB !important; } a.loco-btn.loco-btn--primary:focus-visible, button.loco-btn.loco-btn--primary:focus-visible, .loco-btn.loco-btn--primary .elementor-button:focus-visible { background: linear-gradient(90deg, #0039BB 0%, #1C60E5 100%) !important; outline: 1px solid var(--ltk-white, #ffffff) !important; outline-offset: -1px !important; } a.loco-btn.loco-btn--primary[disabled], a.loco-btn.loco-btn--primary.is-disabled, .loco-btn.loco-btn--primary.is-disabled .elementor-button { background: #E0E0E1 !important; color: var(--ltk-white, #ffffff) !important; cursor: not-allowed; pointer-events: none; } /* ================================================================ 2) SECONDARY / DARK (чорна pill) ================================================================ */ a.loco-btn.loco-btn--secondary, a.loco-btn.loco-btn--dark, button.loco-btn.loco-btn--secondary, button.loco-btn.loco-btn--dark, .loco-btn.loco-btn--secondary .elementor-button, .loco-btn.loco-btn--dark .elementor-button { color: var(--ltk-white, #ffffff) !important; background: var(--ltk-neutral-900, #1E1E1E) !important; } a.loco-btn.loco-btn--secondary:hover, a.loco-btn.loco-btn--dark:hover, button.loco-btn.loco-btn--secondary:hover, button.loco-btn.loco-btn--dark:hover, .loco-btn.loco-btn--secondary .elementor-button:hover, .loco-btn.loco-btn--dark .elementor-button:hover { background: #2E2E2E !important; color: var(--ltk-white, #ffffff) !important; } a.loco-btn.loco-btn--secondary:active, a.loco-btn.loco-btn--dark:active, button.loco-btn.loco-btn--secondary:active, button.loco-btn.loco-btn--dark:active, .loco-btn.loco-btn--secondary .elementor-button:active, .loco-btn.loco-btn--dark .elementor-button:active { background: #000000 !important; } a.loco-btn.loco-btn--secondary:focus-visible, a.loco-btn.loco-btn--dark:focus-visible, button.loco-btn.loco-btn--secondary:focus-visible, button.loco-btn.loco-btn--dark:focus-visible, .loco-btn.loco-btn--secondary .elementor-button:focus-visible, .loco-btn.loco-btn--dark .elementor-button:focus-visible { background: #2E2E2E !important; outline: 2px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -2px !important; } a.loco-btn.loco-btn--secondary[disabled], a.loco-btn.loco-btn--secondary.is-disabled, a.loco-btn.loco-btn--dark[disabled], a.loco-btn.loco-btn--dark.is-disabled, .loco-btn.loco-btn--secondary.is-disabled .elementor-button, .loco-btn.loco-btn--dark.is-disabled .elementor-button { background: rgba(30, 30, 30, .25) !important; cursor: not-allowed; pointer-events: none; } /* ================================================================ 3) OUTLINED ================================================================ */ a.loco-btn.loco-btn--outlined, button.loco-btn.loco-btn--outlined, .loco-btn.loco-btn--outlined .elementor-button { color: #303030 !important; background: transparent !important; outline: 1px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -1px !important; gap: 16px !important; } a.loco-btn.loco-btn--outlined:hover, button.loco-btn.loco-btn--outlined:hover, .loco-btn.loco-btn--outlined .elementor-button:hover { background: radial-gradient(ellipse 50% 50% at 50% 50%, #FEFDFF 0%, #E8F2FD 100%) !important; color: #303030 !important; } a.loco-btn.loco-btn--outlined:active, button.loco-btn.loco-btn--outlined:active, .loco-btn.loco-btn--outlined .elementor-button:active { background: radial-gradient(ellipse 50% 50% at 50% 50%, #FEFDFF 0%, #D3E4F7 100%) !important; } a.loco-btn.loco-btn--outlined:focus-visible, button.loco-btn.loco-btn--outlined:focus-visible, .loco-btn.loco-btn--outlined .elementor-button:focus-visible { background: radial-gradient(ellipse 50% 50% at 50% 50%, #FEFDFF 0%, #E8F2FD 100%) !important; outline: 2px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -2px !important; } a.loco-btn.loco-btn--outlined[disabled], a.loco-btn.loco-btn--outlined.is-disabled, .loco-btn.loco-btn--outlined.is-disabled .elementor-button { color: #BEBEBE !important; outline: 1px solid #BEBEBE !important; background: transparent !important; cursor: not-allowed; pointer-events: none; } .loco-btn.loco-btn--outlined svg [fill]:not([fill="none"]) { fill: var(--ltk-blue-500, #1F65E9); } .loco-btn.loco-btn--outlined svg [stroke]:not([stroke="none"]) { stroke: var(--ltk-blue-500, #1F65E9); } .loco-btn.loco-btn--outlined[disabled] svg [fill]:not([fill="none"]), .loco-btn.loco-btn--outlined.is-disabled svg [fill]:not([fill="none"]) { fill: #BEBEBE; } .loco-btn.loco-btn--outlined[disabled] svg [stroke]:not([stroke="none"]), .loco-btn.loco-btn--outlined.is-disabled svg [stroke]:not([stroke="none"]) { stroke: #BEBEBE; } /* ================================================================ 4) TEXT (transparent pill, для темних меню) Default: без outline Hover: outline 1px + текст #EAF3FF Pressed: outline 1px білий + білий текст ================================================================ */ a.loco-btn.loco-btn--text, button.loco-btn.loco-btn--text, .loco-btn.loco-btn--text .elementor-button { color: var(--ltk-white, #ffffff) !important; background: transparent !important; height: auto !important; padding: 12px 16px !important; border-radius: 56px !important; font-weight: 400 !important; gap: 4px !important; outline: 1px solid transparent !important; outline-offset: -1px !important; } a.loco-btn.loco-btn--text:hover, button.loco-btn.loco-btn--text:hover, .loco-btn.loco-btn--text .elementor-button:hover { color: var(--ltk-neutral-100, #EAF3FF) !important; outline: 1px solid var(--ltk-neutral-100, #EAF3FF) !important; outline-offset: -1px !important; background: transparent !important; } a.loco-btn.loco-btn--text:active, button.loco-btn.loco-btn--text:active, .loco-btn.loco-btn--text .elementor-button:active { color: var(--ltk-white, #ffffff) !important; outline: 1px solid var(--ltk-white, #ffffff) !important; outline-offset: -1px !important; background: transparent !important; } a.loco-btn.loco-btn--text:focus-visible, button.loco-btn.loco-btn--text:focus-visible, .loco-btn.loco-btn--text .elementor-button:focus-visible { color: var(--ltk-white, #ffffff) !important; outline: 2px solid var(--ltk-white, #ffffff) !important; outline-offset: -2px !important; background: transparent !important; } a.loco-btn.loco-btn--text[disabled], a.loco-btn.loco-btn--text.is-disabled, .loco-btn.loco-btn--text.is-disabled .elementor-button { color: rgba(255, 255, 255, .4) !important; outline: 1px solid transparent !important; cursor: not-allowed; pointer-events: none; } /* ================================================================ 5) ICON-WHITE (56×56, radial-glow, синя іконка) ================================================================ */ a.loco-btn.loco-btn--icon-white, button.loco-btn.loco-btn--icon-white, .loco-btn.loco-btn--icon-white .elementor-button { width: 56px !important; height: 56px !important; padding: 12px 24px !important; background: radial-gradient(ellipse 136.09% 115.59% at 5.16% 2.40%, #E8F2FD 0%, #FEFDFF 100%) !important; outline: 1px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -1px !important; color: var(--ltk-blue-600, #1E56C3) !important; gap: 0 !important; } a.loco-btn.loco-btn--icon-white:hover, a.loco-btn.loco-btn--icon-white:active, button.loco-btn.loco-btn--icon-white:hover, button.loco-btn.loco-btn--icon-white:active, .loco-btn.loco-btn--icon-white .elementor-button:hover, .loco-btn.loco-btn--icon-white .elementor-button:active { background: radial-gradient(ellipse 50% 50% at 50% 50%, #FEFDFF 0%, #D3E4F7 100%), radial-gradient(ellipse 136.09% 115.59% at 5.16% 2.40%, #E8F2FD 0%, #FEFDFF 100%) !important; } a.loco-btn.loco-btn--icon-white:focus-visible, button.loco-btn.loco-btn--icon-white:focus-visible, .loco-btn.loco-btn--icon-white .elementor-button:focus-visible { background: radial-gradient(ellipse 50% 50% at 50% 50%, #FEFDFF 0%, #D3E4F7 100%), radial-gradient(ellipse 136.09% 115.59% at 5.16% 2.40%, #E8F2FD 0%, #FEFDFF 100%) !important; outline: 2px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -2px !important; } a.loco-btn.loco-btn--icon-white[disabled], a.loco-btn.loco-btn--icon-white.is-disabled, .loco-btn.loco-btn--icon-white.is-disabled .elementor-button { background: transparent !important; outline: 1px solid var(--ltk-neutral-100, #EAF3FF) !important; color: #BEBEBE !important; cursor: not-allowed; pointer-events: none; } .loco-btn.loco-btn--icon-white svg, .loco-btn.loco-btn--icon-white .elementor-button-icon svg { width: 32px !important; height: 32px !important; } .loco-btn.loco-btn--icon-white svg [fill]:not([fill="none"]) { fill: var(--ltk-blue-600, #1E56C3); } .loco-btn.loco-btn--icon-white svg [stroke]:not([stroke="none"]) { stroke: var(--ltk-blue-600, #1E56C3); } /* ================================================================ 6) ICON-DARK / SECONDARY-ICON (56×56 чорна) ================================================================ */ a.loco-btn.loco-btn--secondary-icon, a.loco-btn.loco-btn--icon-dark, button.loco-btn.loco-btn--secondary-icon, button.loco-btn.loco-btn--icon-dark, .loco-btn.loco-btn--secondary-icon .elementor-button, .loco-btn.loco-btn--icon-dark .elementor-button { width: 56px !important; height: 56px !important; padding: 12px 24px !important; background: var(--ltk-neutral-900, #1E1E1E) !important; color: var(--ltk-white, #ffffff) !important; gap: 0 !important; } a.loco-btn.loco-btn--secondary-icon:hover, a.loco-btn.loco-btn--icon-dark:hover, button.loco-btn.loco-btn--secondary-icon:hover, button.loco-btn.loco-btn--icon-dark:hover, .loco-btn.loco-btn--secondary-icon .elementor-button:hover, .loco-btn.loco-btn--icon-dark .elementor-button:hover { background: #2E2E2E !important; } a.loco-btn.loco-btn--secondary-icon:active, a.loco-btn.loco-btn--icon-dark:active, button.loco-btn.loco-btn--secondary-icon:active, button.loco-btn.loco-btn--icon-dark:active, .loco-btn.loco-btn--secondary-icon .elementor-button:active, .loco-btn.loco-btn--icon-dark .elementor-button:active { background: #000000 !important; } a.loco-btn.loco-btn--secondary-icon:focus-visible, a.loco-btn.loco-btn--icon-dark:focus-visible, button.loco-btn.loco-btn--secondary-icon:focus-visible, button.loco-btn.loco-btn--icon-dark:focus-visible, .loco-btn.loco-btn--secondary-icon .elementor-button:focus-visible, .loco-btn.loco-btn--icon-dark .elementor-button:focus-visible { background: #2E2E2E !important; outline: 2px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -2px !important; } a.loco-btn.loco-btn--secondary-icon[disabled], a.loco-btn.loco-btn--secondary-icon.is-disabled, a.loco-btn.loco-btn--icon-dark[disabled], a.loco-btn.loco-btn--icon-dark.is-disabled, .loco-btn.loco-btn--secondary-icon.is-disabled .elementor-button, .loco-btn.loco-btn--icon-dark.is-disabled .elementor-button { background: rgba(30, 30, 30, .25) !important; cursor: not-allowed; pointer-events: none; } .loco-btn.loco-btn--secondary-icon svg, .loco-btn.loco-btn--icon-dark svg, .loco-btn.loco-btn--secondary-icon .elementor-button-icon svg, .loco-btn.loco-btn--icon-dark .elementor-button-icon svg { width: 32px !important; height: 32px !important; } .loco-btn.loco-btn--secondary-icon svg [stroke]:not([stroke="none"]), .loco-btn.loco-btn--icon-dark svg [stroke]:not([stroke="none"]) { stroke: var(--ltk-white, #ffffff); } .loco-btn.loco-btn--secondary-icon svg [fill]:not([fill="none"]), .loco-btn.loco-btn--icon-dark svg [fill]:not([fill="none"]) { fill: var(--ltk-white, #ffffff); } /* ================================================================ 7) CHEVRON / OUTLINED-ICON (56×56 outline blue зі стрілкою) ================================================================ */ a.loco-btn.loco-btn--chevron, a.loco-btn.loco-btn--outlined-icon, button.loco-btn.loco-btn--chevron, button.loco-btn.loco-btn--outlined-icon, .loco-btn.loco-btn--chevron .elementor-button, .loco-btn.loco-btn--outlined-icon .elementor-button { width: 56px !important; height: 56px !important; padding: 12px 24px !important; background: transparent !important; outline: 1px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -1px !important; color: var(--ltk-blue-600, #1E56C3) !important; gap: 0 !important; } a.loco-btn.loco-btn--chevron:hover, a.loco-btn.loco-btn--outlined-icon:hover, button.loco-btn.loco-btn--chevron:hover, button.loco-btn.loco-btn--outlined-icon:hover, .loco-btn.loco-btn--chevron .elementor-button:hover, .loco-btn.loco-btn--outlined-icon .elementor-button:hover { background: radial-gradient(ellipse 136.09% 115.59% at 5.16% 2.40%, #E8F2FD 0%, #FEFDFF 100%) !important; } a.loco-btn.loco-btn--chevron:active, a.loco-btn.loco-btn--outlined-icon:active, button.loco-btn.loco-btn--chevron:active, button.loco-btn.loco-btn--outlined-icon:active, .loco-btn.loco-btn--chevron .elementor-button:active, .loco-btn.loco-btn--outlined-icon .elementor-button:active { background: radial-gradient(ellipse 50% 50% at 50% 50%, #FEFDFF 0%, #D3E4F7 100%), radial-gradient(ellipse 136.09% 115.59% at 5.16% 2.40%, #E8F2FD 0%, #FEFDFF 100%) !important; } a.loco-btn.loco-btn--chevron:focus-visible, a.loco-btn.loco-btn--outlined-icon:focus-visible, button.loco-btn.loco-btn--chevron:focus-visible, button.loco-btn.loco-btn--outlined-icon:focus-visible, .loco-btn.loco-btn--chevron .elementor-button:focus-visible, .loco-btn.loco-btn--outlined-icon .elementor-button:focus-visible { background: radial-gradient(ellipse 136.09% 115.59% at 5.16% 2.40%, #E8F2FD 0%, #FEFDFF 100%) !important; outline: 2px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -2px !important; } a.loco-btn.loco-btn--chevron[disabled], a.loco-btn.loco-btn--chevron.is-disabled, a.loco-btn.loco-btn--outlined-icon[disabled], a.loco-btn.loco-btn--outlined-icon.is-disabled, .loco-btn.loco-btn--chevron.is-disabled .elementor-button, .loco-btn.loco-btn--outlined-icon.is-disabled .elementor-button { outline: 1px solid #BEBEBE !important; background: transparent !important; color: #BEBEBE !important; cursor: not-allowed; pointer-events: none; } .loco-btn.loco-btn--chevron svg, .loco-btn.loco-btn--outlined-icon svg, .loco-btn.loco-btn--chevron .elementor-button-icon svg, .loco-btn.loco-btn--outlined-icon .elementor-button-icon svg { width: 32px !important; height: 32px !important; } .loco-btn.loco-btn--chevron svg [stroke]:not([stroke="none"]), .loco-btn.loco-btn--outlined-icon svg [stroke]:not([stroke="none"]) { stroke: var(--ltk-blue-600, #1E56C3); } .loco-btn.loco-btn--chevron[disabled] svg [stroke]:not([stroke="none"]), .loco-btn.loco-btn--outlined-icon[disabled] svg [stroke]:not([stroke="none"]) { stroke: #BEBEBE; } /* ================================================================ 8) HOVER-BLUE MODIFIER (v1.5.0) Комбінується з --dark / --secondary: dark в default, синій градієнт (0039BB → 1C60E5) на hover. Використання: ================================================================ */ a.loco-btn.loco-btn--hover-blue:hover, button.loco-btn.loco-btn--hover-blue:hover, .loco-btn.loco-btn--hover-blue .elementor-button:hover { background: linear-gradient(90deg, #034DCF 0%, #3074F9 100%) !important; color: var(--ltk-white, #ffffff) !important; } a.loco-btn.loco-btn--hover-blue:active, button.loco-btn.loco-btn--hover-blue:active, .loco-btn.loco-btn--hover-blue .elementor-button:active { background: linear-gradient(90deg, #0039BB 0%, #1C60E5 100%) !important; } a.loco-btn.loco-btn--hover-blue:focus-visible, button.loco-btn.loco-btn--hover-blue:focus-visible, .loco-btn.loco-btn--hover-blue .elementor-button:focus-visible { background: linear-gradient(90deg, #034DCF 0%, #3074F9 100%) !important; outline: 2px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -2px !important; } /* ================================================================ LEGACY: --outlined-white / --icon-ghost ================================================================ */ a.loco-btn.loco-btn--outlined-white, button.loco-btn.loco-btn--outlined-white, .loco-btn.loco-btn--outlined-white .elementor-button { background: var(--ltk-white, #ffffff) !important; color: var(--ltk-neutral-900, #1E1E1E) !important; } a.loco-btn.loco-btn--outlined-white:hover, button.loco-btn.loco-btn--outlined-white:hover, .loco-btn.loco-btn--outlined-white .elementor-button:hover { background: var(--ltk-neutral-050, #F5F9FE) !important; transform: translateY(-1px); } a.loco-btn.loco-btn--outlined-white:active, button.loco-btn.loco-btn--outlined-white:active, .loco-btn.loco-btn--outlined-white .elementor-button:active { background: var(--ltk-neutral-100, #EAF3FF) !important; transform: translateY(0); } a.loco-btn.loco-btn--outlined-white:focus-visible, button.loco-btn.loco-btn--outlined-white:focus-visible, .loco-btn.loco-btn--outlined-white .elementor-button:focus-visible { background: var(--ltk-neutral-050, #F5F9FE) !important; outline: 2px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -2px !important; } a.loco-btn.loco-btn--icon-ghost, button.loco-btn.loco-btn--icon-ghost, .loco-btn.loco-btn--icon-ghost .elementor-button { width: 48px !important; height: 48px !important; padding: 0 !important; background: transparent !important; color: currentColor !important; gap: 0 !important; } a.loco-btn.loco-btn--icon-ghost:hover, button.loco-btn.loco-btn--icon-ghost:hover, .loco-btn.loco-btn--icon-ghost .elementor-button:hover { background: rgba(255, 255, 255, .12) !important; } .loco-btn.loco-btn--icon-ghost svg { width: 24px !important; height: 24px !important; } /* ================================================================ Size variants ================================================================ */ a.loco-btn.loco-btn--sm, button.loco-btn.loco-btn--sm, .loco-btn.loco-btn--sm .elementor-button { height: 44px !important; padding: 10px 18px !important; font-size: 14px !important; border-radius: var(--ltk-radius-sm, 12px) !important; } .loco-btn.loco-btn--sm svg, .loco-btn.loco-btn--sm .elementor-button-icon svg { width: 16px !important; height: 16px !important; } a.loco-btn.loco-btn--lg, button.loco-btn.loco-btn--lg, .loco-btn.loco-btn--lg .elementor-button { height: 64px !important; padding: 16px 32px !important; font-size: 18px !important; } .loco-btn.loco-btn--lg svg, .loco-btn.loco-btn--lg .elementor-button-icon svg { width: 20px !important; height: 20px !important; } /* ========================================================= v1.5.0 LEGACY ALIASES — старі класи модулів мапляться на нові --------------------------------------------------------- Мета: якщо десь у Elementor / темі / кастомному CSS стоять старі імена — вони продовжують працювати, але з ЄДИНОЮ дизайн-системою. Наступний крок: PHP-шаблони модулів вже виводять loco-btn loco-btn--dark loco-btn--hover-blue + legacy-клас поруч (щоб DOM-селектори JS не поламались). ========================================================= */ /* .loco-svc-card__btn-primary (услуги: «Замовити» на картках) .loco-svc-hero__cta (hero сторінки послуги) .loco-post-cta__btn (CTA у пості блога) → dark з синім hover градієнтом */ .loco-svc-card__btn-primary, .loco-svc-hero__cta, .loco-post-cta__btn, .loco-post-cta-mobile__btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; height: 56px !important; padding: 12px 24px !important; border-radius: 16px !important; border: 0 !important; outline: none !important; box-shadow: none !important; font-family: var(--ltk-font) !important; font-weight: 700 !important; font-size: 16px !important; line-height: 1 !important; letter-spacing: 0 !important; text-decoration: none !important; cursor: pointer; white-space: nowrap; box-sizing: border-box !important; color: var(--ltk-white, #ffffff) !important; background: var(--ltk-neutral-900, #1E1E1E) !important; transition: background 250ms ease, color 250ms ease, outline 250ms ease !important; } .loco-svc-card__btn-primary:hover, .loco-svc-hero__cta:hover, .loco-post-cta__btn:hover, .loco-post-cta-mobile__btn:hover { background: linear-gradient(90deg, #034DCF 0%, #3074F9 100%) !important; color: var(--ltk-white, #ffffff) !important; } .loco-svc-card__btn-primary:active, .loco-svc-hero__cta:active, .loco-post-cta__btn:active, .loco-post-cta-mobile__btn:active { background: linear-gradient(90deg, #0039BB 0%, #1C60E5 100%) !important; } .loco-svc-card__btn-primary:focus-visible, .loco-svc-hero__cta:focus-visible, .loco-post-cta__btn:focus-visible, .loco-post-cta-mobile__btn:focus-visible { background: linear-gradient(90deg, #034DCF 0%, #3074F9 100%) !important; outline: 2px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -2px !important; } /* CTA в синьому блоці всередині поста — hover ТУТ темніший чорний, не синій (бо на синьому фоні синій hover зіллється). Синій блок помічений класом .loco-post-cta або aria-labelledby на wrapper'і. */ .loco-post-cta .loco-post-cta__btn:hover, .loco-post-cta .loco-post-cta__btn:focus-visible { background: #2E2E2E !important; color: var(--ltk-white, #ffffff) !important; } /* .loco-svc-card__btn-outlined (услуги: «Детальніше») .loco-blog-card__btn (блог: «Читати») → outlined blue з радіальним ховером */ .loco-svc-card__btn-outlined, .loco-blog-card__btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 16px !important; height: 56px !important; padding: 12px 24px !important; border-radius: 16px !important; border: 0 !important; outline: 1px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -1px !important; box-shadow: none !important; font-family: var(--ltk-font) !important; font-weight: 700 !important; font-size: 16px !important; line-height: 1 !important; letter-spacing: 0 !important; text-decoration: none !important; cursor: pointer; white-space: nowrap; box-sizing: border-box !important; color: #303030 !important; background: transparent !important; transition: background 250ms ease, color 250ms ease, outline 250ms ease !important; } .loco-svc-card__btn-outlined:hover, .loco-blog-card__btn:hover { background: radial-gradient(ellipse 50% 50% at 50% 50%, #FEFDFF 0%, #E8F2FD 100%) !important; color: #303030 !important; } .loco-svc-card__btn-outlined:active, .loco-blog-card__btn:active { background: radial-gradient(ellipse 50% 50% at 50% 50%, #FEFDFF 0%, #D3E4F7 100%) !important; } .loco-svc-card__btn-outlined:focus-visible, .loco-blog-card__btn:focus-visible { background: radial-gradient(ellipse 50% 50% at 50% 50%, #FEFDFF 0%, #E8F2FD 100%) !important; outline: 2px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -2px !important; } .loco-svc-card__btn-outlined svg [fill]:not([fill="none"]), .loco-blog-card__btn svg [fill]:not([fill="none"]) { fill: var(--ltk-blue-500, #1F65E9); } .loco-svc-card__btn-outlined svg [stroke]:not([stroke="none"]), .loco-blog-card__btn svg [stroke]:not([stroke="none"]) { stroke: var(--ltk-blue-500, #1F65E9); } /* .loco-reviews .loco-btn-primary → primary синій градієнт */ .loco-reviews .loco-btn-primary { background: linear-gradient(90deg, #034DCF 0%, #3074F9 100%) !important; color: var(--ltk-white, #ffffff) !important; border: 0 !important; transform: none !important; box-shadow: none !important; } .loco-reviews .loco-btn-primary:hover { background: linear-gradient(90deg, #0039BB 0%, #1C60E5 100%) !important; color: var(--ltk-white, #ffffff) !important; transform: none !important; box-shadow: none !important; } .loco-reviews .loco-btn-primary:active { background: #0039BB !important; transform: none !important; } /* .loco-reviews .loco-btn-outline → outlined blue */ .loco-reviews .loco-btn-outline { background: transparent !important; color: #303030 !important; outline: 1px solid var(--ltk-blue-500, #1F65E9) !important; outline-offset: -1px !important; border: 0 !important; box-shadow: none !important; } .loco-reviews .loco-btn-outline:hover { background: radial-gradient(ellipse 50% 50% at 50% 50%, #FEFDFF 0%, #E8F2FD 100%) !important; color: #303030 !important; box-shadow: none !important; } .loco-reviews .loco-btn-outline:active { background: radial-gradient(ellipse 50% 50% at 50% 50%, #FEFDFF 0%, #D3E4F7 100%) !important; } .loco-reviews .loco-btn-outline svg [fill]:not([fill="none"]) { fill: var(--ltk-blue-500, #1F65E9) !important; } /* ========================================================= v1.9.10: ГЛОБАЛЬНЫЙ RESET — убираем красный hover кнопок от темы Hello Elementor / WP core часто выставляют: [type=button]:hover, button:hover { background: #c36; color: #fff; } Это ломает все кастомные кнопки включая Elementor. Откатываем — возвращаем текущее background/color, которое было до :hover. Кастомные классы (loco-btn, loco-*) перебивают этот reset своим :hover. ========================================================= */ [type="button"]:focus, [type="button"]:hover, [type="submit"]:focus, [type="submit"]:hover, [type="reset"]:focus, [type="reset"]:hover, button:focus, button:hover, html body button:hover, html body button:focus { background-color: transparent !important; color: inherit !important; text-decoration: inherit !important; }