/* ========================================================================== Sura fixes — replaces behaviour that used to come from Elementor/OceanWP JS. Loaded after theme.css. Keep this small and well-commented. ========================================================================== */ /* 0) Elementor "global" colors & fonts are CSS variables that Elementor scopes to the kit class on (here, .elementor-kit-82). This lightweight build doesn't add that class, so every `var( --e-global-color-* )` / `var( --e-global-typography-* )` reference in theme.css resolved to nothing — most visibly, plain buttons (e.g. "ОТПРАВИТЬ ЗАЯВКУ", whose background is var(--e-global-color-accent)) fell back to transparent and vanished. Define the kit's variables globally so every reference resolves. Values copied verbatim from theme.css's .elementor-kit-82 block. */ :root { --e-global-color-primary: #6EC1E4; --e-global-color-secondary: #54595F; --e-global-color-text: #7A7A7A; --e-global-color-accent: #61CE70; --e-global-typography-primary-font-family: "Roboto"; --e-global-typography-primary-font-weight: 600; --e-global-typography-secondary-font-family: "Roboto Slab"; --e-global-typography-secondary-font-weight: 400; --e-global-typography-text-font-family: "Roboto"; --e-global-typography-text-font-weight: 400; --e-global-typography-accent-font-family: "Roboto"; --e-global-typography-accent-font-weight: 500; } /* 1) Elementor hides not-yet-animated elements with `visibility:hidden` AND a zero-opacity entrance animation, both revealed by Elementor's frontend JS (waypoints) — which this lightweight build omits. Force such elements FULLY visible (opacity AND visibility); otherwise section/column BACKGROUNDS (the hero tubes image, the blue overlays, the white content cards) stay hidden while only their inner widgets show. */ .elementor-invisible { opacity: 1 !important; visibility: visible !important; animation: none !important; } .elementor .elementor-widget { visibility: visible !important; } /* Entrance fade-in removed. It depended on Elementor's frontend JS (and the menu.js IntersectionObserver hand-off); when that reveal didn't fire, whole sections — including the one wrapping the white content cards — were left at opacity:0. Content is now always fully visible. menu.js may still add the .sura-fade class; it is intentionally a no-op. */ .sura-fade, .sura-fade.sura-seen { opacity: 1; transform: none; animation: none; } /* 2) Desktop dropdown menus — OceanWP normally opens these with Superfish (JS). Reproduce hover/focus opening in pure CSS. */ @media (min-width: 769px) { #site-navigation .dropdown-menu li.menu-item-has-children { position: relative; } #site-navigation .dropdown-menu li.menu-item-has-children > .sub-menu { display: block; position: absolute; left: 0; top: 100%; min-width: 250px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; z-index: 9999; } #site-navigation .dropdown-menu li.menu-item-has-children > .sub-menu li.menu-item-has-children > .sub-menu { left: 100%; top: 0; } #site-navigation .dropdown-menu li.menu-item-has-children:hover > .sub-menu, #site-navigation .dropdown-menu li.menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } } /* 3) Header search dropdown — toggled by menu.js via body.sura-search-open. OceanWP keeps it visibility:hidden;opacity:0 and reveals it by adding a .show class through its (removed) JS. Toggling display alone left it invisible, so the magnifier looked dead — restore visibility + opacity. */ #searchform-dropdown { display: none; } body.sura-search-open #searchform-dropdown { display: block; visibility: visible; opacity: 1; } /* Keep open dropdown menus visible on the search-results page. There the script makes the header non-floating (position:relative, in-flow), so the wrapper's `overflow:hidden` clipped every dropdown item that extends below the 74px bar — only the first showed. On other pages the header is absolute and escapes the clip, so this is safe everywhere. The z-index keeps the menu above content. */ #transparent-header-wrap { position: relative; z-index: 999; overflow: visible; } /* 4) Scroll-to-top button — shown by menu.js once the page is scrolled. */ #scroll-top { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } #scroll-top.sura-show { opacity: 1; visibility: visible; } /* 5) Mobile navigation — OceanWP uses the Sidr off-canvas plugin (jQuery). Replace it with a simple, dependency-free stacked panel. */ @media (max-width: 768px) { /* Show the hamburger trigger on mobile. OceanWP normally reveals it via its JS at the mobile breakpoint, which this lightweight build drops, so without this there is no visible way to open the menu at all. */ .oceanwp-mobile-menu-icon { display: block; } #site-navigation-wrap { display: none; width: 100%; clear: both; } body.sura-mobile-open #site-navigation-wrap { display: block; } /* The header is a transparent, absolutely-positioned overlay; when the mobile menu opens, give it a solid background so the light links are readable and don't float over the page content underneath. */ body.sura-mobile-open #site-header { background-color: #024e75; } body.sura-mobile-open #site-navigation-wrap { padding-bottom: 10px; } #site-navigation-wrap .main-menu, #site-navigation-wrap .main-menu > li { display: block; width: 100%; float: none; } #site-navigation-wrap .main-menu > li > a, #site-navigation-wrap .sub-menu > li > a { display: block; padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .12); } #site-navigation-wrap .sub-menu { display: none; position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none; width: 100%; min-width: 0; background: rgba(0, 0, 0, .12); } #site-navigation-wrap li.sura-open > .sub-menu { display: block; } /* The submenu expander used to render as a separate chevron on its own line, duplicating the inline arrow already in the link ("excessive arrows"). Hide it — on mobile a tap on the parent link toggles its submenu (menu.js). The inline arrow flips to indicate the open state. */ .sura-submenu-toggle { display: none; } #site-navigation-wrap .menu-item-has-children > a .nav-arrow { transition: transform .2s ease; } #site-navigation-wrap .menu-item-has-children.sura-open > a .nav-arrow { transform: rotate(180deg); } /* The language switcher injected by the i18n script stays usable on mobile. */ #site-navigation-wrap .sura-language-switcher-item { padding: 10px 16px; } } /* 6) Uniform, subtle button hover. The original mixed three showy Elementor effects — hang (drop & bounce), pulse (infinite throb), grow (10%). Replace all of them with one calm effect: the button grows slightly. Targets every element carrying an elementor-animation-* class, so any button added later with one of those classes behaves the same. */ [class*="elementor-animation-"] { transition: transform 0.15s ease; } [class*="elementor-animation-"]:hover, [class*="elementor-animation-"]:focus, [class*="elementor-animation-"]:active { animation: none !important; transform: scale(1.04) !important; } @media (prefers-reduced-motion: reduce) { [class*="elementor-animation-"] { transition: none; } [class*="elementor-animation-"]:hover, [class*="elementor-animation-"]:focus, [class*="elementor-animation-"]:active { transform: none !important; } }