Untitled

(function () {
    try {
        /* main variables */
        var debug = 0;
        var variation_name = "";
        var $;
        /* all Pure helper functions */

        function waitForElement(selector, trigger, delayInterval, delayTimeout) {
            var interval = setInterval(function () {
                if (
                    document &&
                    document.querySelector(selector) &&
                    document.querySelectorAll(selector).length > 0
                ) {
                    clearInterval(interval);
                    trigger();
                }
            }, delayInterval);
            setTimeout(function () {
                clearInterval(interval);
            }, delayTimeout);
        }

        let egHero = `
        <div class="eg-hero">
          <div class="eg-wrapper"></div>
        </div>`;

        /* Variation Init */
        function init() {
            if (!document.querySelector(".eg-hero")) {
                // changing logo image
                document.querySelector("html body #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) .logo_img").src = "https://www.hyperoptic.com/wp-content/uploads/2023/03/Hyperoptic-logo-full-colour-2.jpg";
                document.querySelector("#top_main_banner").insertAdjacentHTML("afterend", egHero);
                let egSearchBox = document.querySelector('div[id*="elastic-blockblock"]');
                egSearchBox.classList.add("eg-searchbox");
                document.querySelector(".eg-hero .eg-wrapper").insertAdjacentElement("beforeend", egSearchBox);
                document.querySelectorAll('html body .eg-searchbox .input-elastic-group button[qa="elasticSearchCheckButton"]').forEach(btn => {
                    btn.innerHTML = "Check now";
                })
                document.querySelectorAll('html body .eg-searchbox .input-elastic-group [qa="elasticSearchPostcode"]').forEach((src, i) => {
                    if (i === 1) {
                        src.placeholder = "Check your postcode";
                    } else {
                        src.placeholder = "Enter postcode e.g CT21 DC";
                    }
                });
                document.querySelector("html body #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) div[class*='myaccount-btn-wr'] img").src = "https://www.hyperoptic.com/wp-content/themes/hyperoptic3/img/icons/my-account_blue.png";
            }
        }

        /* Initialize variation */
        if (window.location.pathname === "/") {
            waitForElement('div[id*="elastic-blockblock"] .input-elastic-group button[qa="elasticSearchCheckButton"]', init, 50, 15000);
        }
    } catch (e) {
        if (debug) console.log(e, "error in Test" + variation_name);
    }
})();


<style>
html body .eg-hero+div,
html body .eg-searchbox>div>div .container>div>div:last-child,
html body .eg-searchbox>div>div .container>div>p:last-child {
    display: none !important;
}
  

html body .eg-searchbox>div>div .container>div>div:first-child input,
html body .eg-searchbox>div>div .container>div>div:first-child input::placeholder {
    font-size: 18px !important;
    height:69px;
  border-radius: 100vmax !important;

}

html body .eg-hero {
    background: white;
}

html body .eg-wrapper {
    width: 100%;
    max-width: 2000px!important;
    margin-left: auto;
    margin-right: auto;
    background-image: url("https://www.hyperoptic.com/wp-content/uploads/2023/04/home-12m-3months-free-desktop-banner-v1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    max-height: 580px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding-bottom: 115px;

}

html body .eg-searchbox>div>div {
    background: none !important;
    padding: 0 !important;
}

html body .eg-searchbox>div>div .container>div>div:first-child,
html body .eg-searchbox,
html body .eg-searchbox .container {
    width: 100% !important;

}

html body .eg-searchbox .container {
    max-width: 699px !important;
}

html body .eg-searchbox .container>div {
    margin: 0 !important;
}


html body .eg-searchbox .input-elastic-group [qa="elasticSearchCheckButton"] {
    background-color: #706290 !important;
    height: 69px;
  border-radius: 100vmax !important;



@media(min-width:993px) and (max-width:1079px) {
    html body .eg-wrapper {
        max-height: 420px !important;
        padding-bottom: 66px !important;
    }
}

@media(max-width:992px) {
    html body .eg-wrapper {
        background-image: url("https://www.hyperoptic.com/wp-content/uploads/2023/04/homepage-desktop-banner-april-awards-v1.jpg");
        padding-bottom: 62px;
    }

    html body #top_main_banner #page-vue-header-mainmenu>div:last-child>div:nth-child(2) {
        display: none !important;
    }

    /* mobile nav changes to white and icons to blue */
    html body #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) {
        background: white !important;
    }

    html body #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) .logo_img {
        filter: none !important;
    }

    html body #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) #burgerMobileMenu span.icon-bar {
        background-color: #3AB9DC !important;
    }

    html body #page-vue-header-mainmenu #burgerMobileMenuClose {
        color: #3AB9DC !important;
    }

    /* moibile nav changes to white and icons to blue */
}

@media(max-width:992px) and (min-width:768px) {
    html body .eg-wrapper {
        max-height: 772px !important;
        background-size: cover !important;
        background-position: 50% 74% !important;
        padding-bottom: 69px !important;
    }
}

@media(max-width:767px) {

    html body .eg-searchbox .input-elastic-group [qa="elasticSearchCheckButton"],
    html body .eg-searchbox>div>div .container>div>div:first-child input,
    html body .eg-searchbox>div>div .container>div>div:first-child input::placeholder {
        font-size: 16px !important;
    }
}

@media(max-width:440px) {
    html body .eg-wrapper {
        background-image: url("https://www.hyperoptic.com/wp-content/uploads/2023/04/homepage-mobile-banner-april-awards-v1.jpg");
        padding-bottom: 40px;
        max-height: 411px !important;
    }
}

.elastic-search-non-manageable-block-wr .hasBlueSearchBtn .input-elastic-loader {
    top: 10px;
}

/* max width 992px */
@media(max-width:992px) and (min-width:768px) {
    html body .eg-searchbox>div>div .container>div>div:first-child {
        background: white !important;
        border-radius: 100vmax;
        padding: 40px;
    }

    html body .eg-searchbox .container {
        max-width: 800px !important;
    }
}

@media(max-width:576px) {

    html body .eg-searchbox>div>div .container>div>div:first-child input {
        height: 72px !important;
        border-radius: 100vmax !important;
    }

    html body .eg-searchbox .input-elastic-group [qa="elasticSearchCheckButton"] {
        height: 72px !important;
        border-radius: 100vmax !important;
    }

}
</style>