/* ================================ A Q U A T E C — MENU (TOOLS + LAWS) ================================ */ :root { --tool-accent: #42A9E5; /* Синий цвет текста/иконок */ } /* ===== DESKTOP ===== */ /* Общие стили для LI */ #desktop_main_menu .nav-child li.item-421, #desktop_main_menu .nav-child li.item-422, #desktop_main_menu .nav-child li.item-427, #desktop_main_menu .nav-child li.item-428, #desktop_main_menu .nav-child li.item-423, #desktop_main_menu .nav-child li.item-424 { position: relative; background: transparent !important; border-color: transparent !important; } /* Ссылки */ #desktop_main_menu .nav-child li.item-421 > a, #desktop_main_menu .nav-child li.item-422 > a, #desktop_main_menu .nav-child li.item-427 > a, #desktop_main_menu .nav-child li.item-428 > a, #desktop_main_menu .nav-child li.item-423 > a, #desktop_main_menu .nav-child li.item-424 > a { display: block !important; width: 100% !important; box-sizing: border-box; padding: 10px 14px 10px 40px; font-weight: 700; font-size: 14px; color: var(--tool-accent) !important; text-decoration: none !important; background: transparent !important; line-height: 1.4; text-align: left; } /* Иконки (desktop — через before, absolute) */ #desktop_main_menu .nav-child li.item-421::before, #desktop_main_menu .nav-child li.item-422::before, #desktop_main_menu .nav-child li.item-427::before, #desktop_main_menu .nav-child li.item-428::before, #desktop_main_menu .nav-child li.item-423::before, #desktop_main_menu .nav-child li.item-424::before { font-family: 'Material Symbols Sharp'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 20px; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tool-accent); pointer-events: none; } /* Конкретные значки */ #desktop_main_menu .nav-child li.item-421::before, #desktop_main_menu .nav-child li.item-422::before { content: "calculate"; } #desktop_main_menu .nav-child li.item-427::before, #desktop_main_menu .nav-child li.item-428::before { content: "design_services"; } #desktop_main_menu .nav-child li.item-423::before, #desktop_main_menu .nav-child li.item-424::before { content: "menu_book"; } /* Hover (desktop) */ #desktop_main_menu .nav-child li.item-421:hover, #desktop_main_menu .nav-child li.item-422:hover, #desktop_main_menu .nav-child li.item-427:hover, #desktop_main_menu .nav-child li.item-428:hover, #desktop_main_menu .nav-child li.item-423:hover, #desktop_main_menu .nav-child li.item-424:hover { background: var(--tool-accent) !important; } #desktop_main_menu .nav-child li.item-421:hover > a, #desktop_main_menu .nav-child li.item-422:hover > a, #desktop_main_menu .nav-child li.item-427:hover > a, #desktop_main_menu .nav-child li.item-428:hover > a, #desktop_main_menu .nav-child li.item-423:hover > a, #desktop_main_menu .nav-child li.item-424:hover > a { color: #fff !important; } #desktop_main_menu .nav-child li.item-421:hover::before, #desktop_main_menu .nav-child li.item-422:hover::before, #desktop_main_menu .nav-child li.item-427:hover::before, #desktop_main_menu .nav-child li.item-428:hover::before, #desktop_main_menu .nav-child li.item-423:hover::before, #desktop_main_menu .nav-child li.item-424:hover::before { color: #fff !important; } /* ============================ MOBILE — калькуляторы + «Нормы и законы» Пункты: 421, 422, 427, 428, 423, 424 ============================ */ /* Подстройте под ваш шаблон */ :root{ --mobile-item-height: 58.8px; /* высота строки как у остальных */ --tool-accent: #42A9E5; --mobile-left-pad: 14px; /* где начинается обычный текст пунктов меню */ --icon-size: 20px; --icon-gap: 8px; /* расстояние между иконкой и текстом */ } /* Общий стиль ссылок — flex и точная вертикальная центровка */ #mobile_menu_wrapper .nav-child li.item-421 > a, #mobile_menu_wrapper .nav-child li.item-422 > a, #mobile_menu_wrapper .nav-child li.item-427 > a, #mobile_menu_wrapper .nav-child li.item-428 > a, #mobile_menu_wrapper .nav-child li.item-423 > a, #mobile_menu_wrapper .nav-child li.item-424 > a{ display: flex !important; align-items: center !important; /* центр по вертикали */ min-height: var(--mobile-item-height) !important; padding: 0 14px 0 var(--mobile-left-pad) !important; /* текст на общей «линии» */ gap: var(--icon-gap) !important; color: var(--tool-accent) !important; font-weight: 700 !important; text-decoration: none !important; background: transparent !important; line-height: 1.2 !important; position: relative; } /* Иконка как часть flex, но визуально в «поле» слева от текста */ #mobile_menu_wrapper .nav-child li.item-421 > a::before, #mobile_menu_wrapper .nav-child li.item-422 > a::before, #mobile_menu_wrapper .nav-child li.item-427 > a::before, #mobile_menu_wrapper .nav-child li.item-428 > a::before, #mobile_menu_wrapper .nav-child li.item-423 > a::before, #mobile_menu_wrapper .nav-child li.item-424 > a::before{ font-family: 'Material Symbols Sharp'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: var(--icon-size); line-height: 1; color: var(--tool-accent); display: inline-block; width: var(--icon-size); height: var(--icon-size); /* возвращаем иконку в «левое поле», не смещая текст правее общей линии */ margin-left: calc(-1 * (var(--icon-size) + var(--icon-gap))); margin-right: var(--icon-gap); content: ""; } /* Конкретные иконки */ #mobile_menu_wrapper .nav-child li.item-421 > a::before, #mobile_menu_wrapper .nav-child li.item-422 > a::before{ content:"calculate"; } #mobile_menu_wrapper .nav-child li.item-427 > a::before, #mobile_menu_wrapper .nav-child li.item-428 > a::before{ content:"design_services"; } #mobile_menu_wrapper .nav-child li.item-423 > a::before, #mobile_menu_wrapper .nav-child li.item-424 > a::before{ content:"menu_book"; } /* Hover */ #mobile_menu_wrapper .nav-child li.item-421:hover, #mobile_menu_wrapper .nav-child li.item-422:hover, #mobile_menu_wrapper .nav-child li.item-427:hover, #mobile_menu_wrapper .nav-child li.item-428:hover, #mobile_menu_wrapper .nav-child li.item-423:hover, #mobile_menu_wrapper .nav-child li.item-424:hover{ background: var(--tool-accent) !important; } #mobile_menu_wrapper .nav-child li.item-421:hover > a, #mobile_menu_wrapper .nav-child li.item-422:hover > a, #mobile_menu_wrapper .nav-child li.item-427:hover > a, #mobile_menu_wrapper .nav-child li.item-428:hover > a, #mobile_menu_wrapper .nav-child li.item-423:hover > a, #mobile_menu_wrapper .nav-child li.item-424:hover > a{ color:#fff !important; } #mobile_menu_wrapper .nav-child li.item-421:hover > a::before, #mobile_menu_wrapper .nav-child li.item-422:hover > a::before, #mobile_menu_wrapper .nav-child li.item-427:hover > a::before, #mobile_menu_wrapper .nav-child li.item-428:hover > a::before, #mobile_menu_wrapper .nav-child li.item-423:hover > a::before, #mobile_menu_wrapper .nav-child li.item-424:hover > a::before{ color:#fff !important; } /* Отключаем старые ::before у
  • */ #mobile_menu_wrapper .nav-child li.item-421::before, #mobile_menu_wrapper .nav-child li.item-422::before, #mobile_menu_wrapper .nav-child li.item-427::before, #mobile_menu_wrapper .nav-child li.item-428::before, #mobile_menu_wrapper .nav-child li.item-423::before, #mobile_menu_wrapper .nav-child li.item-424::before{ content: none !important; } /* ==== AQUATEC: принудительно синий для калькуляторов (mobile) ==== */ #mobile_menu_wrapper .nav-child li:is(.item-421,.item-422,.item-427,.item-428,.item-423,.item-424) > a, #mobile_menu_wrapper .nav-child li:is(.item-421,.item-422,.item-427,.item-428,.item-423,.item-424) > a:link, #mobile_menu_wrapper .nav-child li:is(.item-421,.item-422,.item-427,.item-428,.item-423,.item-424) > a:visited, #mobile_menu_wrapper .nav-child li:is(.item-421,.item-422,.item-427,.item-428,.item-423,.item-424) > a *:not(svg):not(path) { color: var(--tool-accent) !important; -webkit-text-fill-color: var(--tool-accent) !important; /* на всякий случай для WebKit */ opacity: 1 !important; /* если тема делает полупрозрачным текст */ } /* Белый на hover — тоже для всех потомков */ #mobile_menu_wrapper .nav-child li:is(.item-421,.item-422,.item-427,.item-428,.item-423,.item-424):hover > a, #mobile_menu_wrapper .nav-child li:is(.item-421,.item-422,.item-427,.item-428,.item-423,.item-424):hover > a *:not(svg):not(path) { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* 0) Снимаем жёсткую высоту, которую задаёт template.css/small.css */ #main_wrapper article video { height: auto !important; max-height: none !important; } /* 1) Универсальная обёртка 16:9 без полос */ .ratio-16x9{ position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #000; /* фон на время загрузки */ } /* 2) Видео заполняет обёртку (перебиваем любые чужие правила) */ #main_wrapper article .ratio-16x9 > video{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center; border: 0; } /* 3) Фолбэк для старых iOS/Safari без aspect-ratio */ @supports not (aspect-ratio: 1/1){ .ratio-16x9{ height: 0; padding-top: 56.25%; } #main_wrapper article .ratio-16x9 > video{ position: absolute; } } /* Мобильный bleed: слегка увеличиваем видео внутри обёртки */ @media (max-width: 1024px){ #main_wrapper article .ratio-16x9 > video{ transform: translateZ(0) scale(1.05); /* подстрой 1.008–1.018 */ transform-origin: center; } } /* Если вдруг transform не помог на конкретном девайсе — альтернативный способ: “вылезти” на 1px */ @media (max-width: 1024px){ #main_wrapper article .ratio-16x9.fix-bleed > video{ left:-1px; top:-1px; right:-1px; bottom:-1px; /* работает т.к. позиционирование absolute */ width:auto !important; height:auto !important; /* перекрываем 100% из базового правила */ } }