.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS *//* 0) Prevent body scroll & full-height mask */ html, body { height: 100%; overflow: hidden; margin: 0; } /* — Viewport mask that actually slides — */ .viewport-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; z-index: 2; /* PURE CSS transition for buttery-smoothness */ will-change: transform; backface-visibility: hidden; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(0); } /* on .menu-open, CSS handles the slide */ html.menu-open .viewport-wrapper { transform: translateY(90vh); } /* — Scrollable inner container — */ .scroll-wrapper { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* lock scrolling when menu is open */ html.menu-open .scroll-wrapper { overflow: hidden; } /* — Menu layer fade — */ .menu-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); z-index: 1; pointer-events: none; /* same timing & easing */ opacity: 0; transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1); } html.menu-open .menu-container { opacity: 1; pointer-events: auto; } /* — Link base state — */ .menu-link { opacity: 0; transform: translateY(-20px); } /* 1. Base state: dark text */ .menu-button, .menu-button .elementor-button-text { color: #000 !important; transition: color 0.2s ease !important; } /* 2. When menu-open is on , turn both the link and its text to white */ html.menu-open .menu-button, html.menu-open .menu-button .elementor-button-text { color: #fff !important; } /* prepare for GPU-driven transforms */ .viewport-wrapper { will-change: transform; backface-visibility: hidden; } /* start links hidden */ .menu-link { opacity: 0; transform: translateY(-20px); } /* (your existing menu-container, scroll-wrapper, etc. remain the same) *//* End custom CSS */