/** * Globe widget — the container only. No background: the globe.gl canvas is * transparent so the Elementor section background shows through. */ .skyweb-globe-wrap { display: flex; width: 100%; } .skyweb-globe { position: relative; width: 100%; background: transparent; line-height: 0; /* Hidden until the engine has settled it at the correct size, so the initial window-size → container-size resize is never visible. Space is reserved by the Height control, so this causes no layout shift. Fades in (not a hard pop) once ready, masking any final sub-pixel settle. */ opacity: 0; visibility: hidden; transition: opacity .28s ease; } .skyweb-globe.skyweb-globe--ready { opacity: 1; visibility: visible; } /* Defensive guard: some themes keep class="no-js" on (swapped to "js" once scripts run) and pair it with rules that force-show content for the no-JS case. Higher specificity here keeps the globe hidden until the engine adds --ready, so such a rule can't re-reveal it mid-settle and re-expose the load jump. With JS truly off the globe never inits (nothing to show anyway). */ html.no-js .skyweb-globe:not(.skyweb-globe--ready) { opacity: 0; visibility: hidden; } /* globe.gl injects an absolutely-positioned canvas; keep it inside the box. */ .skyweb-globe > * { max-width: 100%; } .skyweb-globe canvas { display: block; outline: none; }