#a11yModal .modal-content{border-radius:var(--radius-2xl, 24px)} #a11yModal .modal-body .modal-title .icon{width:42px;min-width:42px} #a11yModal .modal-body .modal-title .title{margin-left:10px;font-size:1.125rem;color:var(--color-text); font-weight:400;line-height:1.5rem} #a11yModal .modal-header .modal-title, #a11yModal .modal-body .modal-title{ margin:10px 0 25px; display:-webkit-box; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; flex-direction:row; -webkit-box-pack:center; justify-content:center; -webkit-box-align:center; align-items:center; /* типографика задаётся на .modal-title .title, как в modalAddress */ } #a11yModal .modal-header .modal-title .icon, #a11yModal .modal-body .modal-title .icon{ width:42px; min-width:42px; display:inline-flex; align-items:center; justify-content:center; margin-right:10px; } /* Убираем переопределения h2.title, чтобы соответствовать modalAddress */ @media (min-width: 1200px){ #a11yModal .modal-header .modal-title, #a11yModal .modal-body .modal-title{ margin-top:0; margin-bottom:30px; } #a11yModal .modal-body{padding:25px 15px} #a11yModal .modal-body .modal-title .title{font-size:1.5rem;line-height:1.5rem} } #a11yModal .modal-body{padding:1rem 10px} #a11yModal .iconify { font-size: 24px; color: var(--color-link); font-weight: 400; line-height: normal; opacity:.4;z-index:5;position:absolute;top:15px;right:20px;bottom:unset;left:unset; } @media (min-width: 1200px){ #a11yModal .iconify{cursor:pointer} } .lang-box {min-height: 42px; min-width: 42px; font-size: 16px; margin: 5px;} #a11yTrigger:hover {color: var(--neutral-0);} #a11yTrigger:hover svg {color: var(--neutral-0);} #a11yTrigger:hover svg g { fill: var(--neutral-0); } /* === A11Y trigger icon sizing and hover color === */ /* Ensure the eye icon is exactly 44x44px in header (both desktop and mobile) */ #a11yTrigger img { position: relative; z-index: 6; width: 25px; height: 22px; object-fit: contain; display: inline-block; } /* Make the icon white on hover/focus for accessibility */ #a11yTrigger:hover img, #a11yTrigger:focus-visible img { filter: brightness(0) invert(1) drop-shadow(0 0 0 var(--color-link)) drop-shadow(0 0 1px var(--color-link)); color: var(--neutral-0); } /* Иконка заголовка следует размерам контейнера .icon (42px), как в modalAddress */ html.a11y-animated { transition: font-size 0.3s ease-out; } /* Глобальне вимкнення анімацій/рухів при активному режимі зменшення руху */ .reduce-motion, .reduce-motion * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Часті бібліотеки: slick — відключаємо CSS-транзішени/трансформи щоб уникати руху */ .reduce-motion .slick-slider .slick-track, .reduce-motion .slick-slider .slick-list, .reduce-motion .slick-slider .slick-slide { transition: none !important; } /* Повага до системного prefers-reduced-motion як базова поведінка */ @media (prefers-reduced-motion: reduce) { html, body, * { transition: none !important; animation: none !important; } } /* Примусовий мобільний режим меню при великому масштабі шрифту (>120%) */ html.a11y-mobile-menu .mobile-menu, body.a11y-mobile-menu .mobile-menu { /* Показываем мобильное меню и делаем его полноэкранным контейнером */ display: flex !important; position: fixed; inset: 0; /* top:0; right:0; bottom:0; left:0 */ height: 100vh; max-height: 100vh; flex-direction: column; overflow: hidden; /* скролл будет у контента, не у страницы */ z-index: 10000; /* поверх основного контента/хедера */ } html.a11y-mobile-menu header .header-row.mobile, body.a11y-mobile-menu header .header-row.mobile { display: flex !important; } html.a11y-mobile-menu header .header-row.desktop, body.a11y-mobile-menu header .header-row.desktop { display: none !important; } /* Вариант А: контент меню скроллится, футер всегда внизу (работает и на десктопе при принудительном мобильном режиме) */ html.a11y-mobile-menu .mobile-menu__nav, body.a11y-mobile-menu .mobile-menu__nav { flex: 1 1 auto; min-height: 0; /* важно для корректного расчёта высоты flex‑элемента */ overflow: auto; -webkit-overflow-scrolling: touch; } html.a11y-mobile-menu .mobile-menu__footer, body.a11y-mobile-menu .mobile-menu__footer { flex: 0 0 auto; /* при необходимости можно сделать прилипание, но в данном случае футер и так всегда внизу за счёт flex‑колонки */ } /* === Reading guide line === */ #a11yReadingLine { position: fixed; left: 0; top: 0; width: 100vw; height: 2px; background: var(--brand-90); /* brand color */ box-shadow: 0 0 0 1px var(--brand-20), 0 0 6px var(--brand-35); z-index: 2147483647; /* above UI */ pointer-events: none; } .reduce-motion #a11yReadingLine { transition: none !important; } /* === Великий курсор (A11Y) === */ /* Базовий курсор для неактивних зон: 50% від великого (стрілка 24x24). Активні елементи нижче перевизначають це правилом з більшим курсором. */ html[data-a11y-cursor="big"] { cursor: url('data:image/svg+xml;utf8,') 0 0, default !important; } /* Курсор-стрілка для інтерактивних елементів */ html[data-a11y-cursor="big"] a, html[data-a11y-cursor="big"] button, html[data-a11y-cursor="big"] [role="button"], html[data-a11y-cursor="big"] select, html[data-a11y-cursor="big"] input[type="submit"], html[data-a11y-cursor="big"] input[type="button"], html[data-a11y-cursor="big"] .btn, html[data-a11y-cursor="big"] [onclick], html[data-a11y-cursor="big"] [href] { cursor: url('data:image/svg+xml;utf8,') 0 0, pointer !important; } /* Курсор для тексту (товстий I-beam) */ html[data-a11y-cursor="big"] input[type="text"], html[data-a11y-cursor="big"] input[type="password"], html[data-a11y-cursor="big"] input[type="email"], html[data-a11y-cursor="big"] input[type="search"], html[data-a11y-cursor="big"] textarea, html[data-a11y-cursor="big"] p, html[data-a11y-cursor="big"] span, html[data-a11y-cursor="big"] .text, html[data-a11y-cursor="big"] .title { cursor: url('data:image/svg+xml;utf8,') 16 24, text !important; }