Untitled

 avatar
unknown
plain_text
2 years ago
13 kB
6
Indexable
(function () {
  try {
    /* main variables */
    var debug = 0;
    var variation_name = "";

    /* 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);
    }

    /* Variation functions */

    var ym_hero = ''+
    '<div class="ym_hero">'+
    '     <div class="ym_overlay"></div>'+
    '     <div class="ym_hero__img">'+
    '           <img class="ym_desktop" src="https://editor-assets.abtasty.com/46121/61ed5306c4e6d1642943238.png">'+
    '           <img class="ym_mobile" src="https://editor-assets.abtasty.com/46121/61ed5438310bd1642943544.png">'+
    '     </div>'+
    '     <div class="ym_hero__content">'+
    '         <div class="ym_hero__heading">'+
    '             <h2>Unforgettable Yacht Charters</h2>'+
    '             <p>Book a private yacht in paradise with the world\'s premier yacht charter company. Travel with confidence. Book now even if your plans change later. <a href="#" class="ym_terms">Terms apply.</a></p>'+
    '         </div>'+
    '         <div class="ym_search__bar">'+
    '         </div>'+
    '     </div>'+
    '</div>';

    var ym_tile__section = ''+
    '<div class="ym_tiles">'+
    '<div class="ym_tile_heading">'+
    '       <h3>Plan Your Yacht Charter Vacation</h3>'+
    '       <p>Near or far - you can explore any corner of the world on a private yacht of your choice. Plan your next vacation today.</p>'+
    '</div>'+
    '<div class="ym_tile__section">'+
    '       <div class="ym_tiles_img">'+
    '             <div class="ym_tile__overlay"></div>'+
    '             <img src="https://editor-assets.abtasty.com/46121/61ed53ec46eac1642943468.png">'+
    '             <a href="https://www.moorings.com/destinations/caribbean">'+
    '                 <span>Caribbean</span>'+
    '             </a>'+
    '       </div>'+
    '       <div class="ym_tiles_img">'+
    '             <div class="ym_tile__overlay"></div>'+
    '             <img src="https://editor-assets.abtasty.com/46121/61ed5390360db1642943376.png">'+
    '             <a href="https://www.moorings.com/destinations/americas">'+
    '                 <span>Americas</span>'+
    '             </a>'+
    '       </div>'+
    '       <div class="ym_tiles_img">'+
    '             <div class="ym_tile__overlay"></div>'+
    '             <img src="https://editor-assets.abtasty.com/46121/61ed535a46c9d1642943322.png">'+
    '             <a href="https://www.moorings.com/destinations/mediterranean">'+
    '                 <span>Mediterranean</span>'+
    '             </a>'+
    '       </div>'+
    '       <div class="ym_tiles_img">'+
    '             <div class="ym_tile__overlay"></div>'+
    '             <img src="https://editor-assets.abtasty.com/46121/61ed533e0e1b71642943294.png">'+
    '             <a href="https://www.moorings.com/destinations/exotics">'+
    '                 <span>Exotics</span>'+
    '             </a>'+
    '       </div>'+
    '</div>'+
    '<div class="ym_tile__btn">'+
    '       <a href="https://www.moorings.com/destinations">Explore More Destinations</a>'+
    '</div>'+
    '</div>';


    /* Variation Init */
    function init() {
      /* start your code here */
    
      document.querySelector('#main section .mosaic-type-hero').insertAdjacentHTML('afterbegin',ym_hero + ym_tile__section);

      if(window.screen.width > 1199){
        setTimeout(function(){
          document.querySelector('#search-widget').style.display = 'block';
          var searchBar = document.querySelector('#search-widget');
          document.querySelector('.ym_hero .ym_search__bar').insertAdjacentElement('afterbegin',searchBar);
        },1000)
      }else{
        setTimeout(function(){
          document.querySelector('#search-widget').style.display = 'block';
          var searchBarMbl = document.querySelector('#search-widget');
          document.querySelector('.ym_hero').insertAdjacentElement('afterend',searchBarMbl)
        },1000)

      }


      document.querySelector('#search-widget .search-widget-main-panel .search-widget-filter label[for="search-widget-duration-filter"]').innerHTML = "NIGHTS";



    }

    /* Initialize variation */
    waitForElement('#search-widget .search-widget-main-panel .search-widget-filter label[for="search-widget-duration-filter"]', init, 50, 15000);
  } catch (e) {
    if (debug) console.log(e, "error in Test" + variation_name);
  }
})();



/* hero section */
html body .site-header{
    margin-bottom: 0 !important;
}
html body #main section > div:first-of-type{
    margin-top: 0;
}
html body .ym_hero{
    position: relative;
    width: 100%;
}
html body .ym_hero .ym_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0 ,0, 0.2);
}
html body .ym_hero__img img{
    width: 100%;
    height: 100%;
}
html body .ym_hero__content{
    position: absolute;
    width: 100%;
    max-width: 1170px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
html body .ym_hero__heading{
    text-align: center;
    max-width: 690px;
    margin: auto;
    padding: 0 20px;
}

html body .ym_hero__heading h2{
    font-size: 48px;
    color: #fff;
    margin-bottom: 10px;
}
html body .ym_hero__heading p{
    font-size: 18px;
    margin-bottom: 25px;
    color: #e8e8e8;
}

html body .ym_hero__img .ym_mobile{
    display: none;
}

/* search bar css desktop */

html body #search-widget-pax-filter .passengers-icon{
    display: none !important;
}

html body #search-widget .search-widget-main-panel .search-widget-btn .search-icon:before{
    top: -15px;
}

html body #search-widget{
    display: none;
}

@media screen and (min-width: 768px) {
    html body #search-widget .dropdown-submenu:hover>.dropdown-menu{
        left: 0;
        position: relative;
        margin: 0 -5px;
        width: calc(100% + 10px);
        float: none;
        z-index: 105;
        top: auto;
        min-height: auto;
    }
    
    html body #search-widget .search-dropdown>.dropdown-menu>ul{
        overflow-y: auto;
        height: 200px;
    }

    html body #search-widget .search-dropdown>.dropdown-menu>ul::-webkit-scrollbar {
        width: 12px;      
    }

    html body #search-widget .search-dropdown>.dropdown-menu>ul::-webkit-scrollbar-track {
        background: #fff;      
    }

    html body #search-widget .search-dropdown>.dropdown-menu>ul::-webkit-scrollbar-thumb {
        border-radius: 20px;
        background-color: rgba(20, 35, 70, 0.3);
        border: 3px solid #fff;     
    }

    html body #search-widget .search-dropdown .bases.dropdown-menu{
        min-width: auto;
    }
    
    html body #search-widget .dropdown-submenu:hover>.dropdown-item:after{
        transform: rotate(90deg);
    }

}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    html body #search-widget #search-widget-pax-filter{
        width: max-content;
        float: left;
    }
    html body #search-widget .search-widget-main-panel .search-widget-btn-wrapper{
        text-align: right;
        padding-top: 29px;
        float: right;
    }
    html body #search-widget .search-widget-main-panel .search-widget-btn-wrapper .search-widget-btn{
        min-width: 134px;
        height: 40px;
    }
}
@media screen and (min-width: 1200px) {
    
    html body .ym_hero__content{
        transform: translate(-50%, -70%);
    }
    html body .ym_search__bar #search-widget{
        background: rgba(0, 0, 0, 0.6);
        width: max-content;
    }
    html body .ym_search__bar #search-widget .search-widget-main-panel{
        padding: 2rem 3rem 1rem;
    }
    html body .ym_search__bar #search-widget .search-widget-left-column{
        width: 460px;
    }
    html body .ym_search__bar #search-widget .search-widget-right-column{
        width: 440px;
    }
    html body .ym_search__bar #search-widget .search-widget-main-panel #search-widget-pax-filter,
    html body .ym_search__bar #search-widget .search-widget-main-panel #search-widget-duration-filter-wrapper{
        width: 134px;
    }
    html body .ym_search__bar #search-widget .search-widget-main-panel .search-widget-btn{
        min-width: 134px;
    }
    
    html body .ym_search__bar #search-widget .search-widget-main-panel .search-widget-filter label{
        color: #fff;
    }
    
    html body .ym_search__bar #search-widget #search-widget-pax-filter .search-widget-button-wrapper{
        background: #fff;
        padding: 2px 5px;
    }

    html body .ym_search__bar #search-widget .search-widget-main-panel .search-widget-btn-wrapper{
        padding-top: 29px;
    }
    html body .ym_search__bar #search-widget .search-widget-main-panel .search-widget-btn-wrapper.disabled .search-widget-btn {
        background-color: #920805;
        border: none;
    }
    html body .ym_search__bar #search-widget .search-widget-main-panel .search-widget-btn{
        border: none;
        height: 40px;
        padding-left: 12px;
    }
    html body .ym_search__bar #search-widget .search-widget-main-panel .search-widget-btn:focus{
        border: none;
        outline: none;
    }
    html body .ym_search__bar #search-widget .search-widget-main-panel .search-widget-btn-wrapper.disabled .search-widget-btn:focus{
        outline: none;
        border: none;
    }


}


/* search bar css mobile */

.navbar-mobile.navbar-search__button{
    display: none;
}



/* below hero section */

html body .ym_tile__section{
    display: flex;
    justify-content: center;
    column-gap: 3px;
}
html body .ym_tile__section .ym_tiles_img{
    position: relative;
}

html body .ym_tile__overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0 ,0, 0.2);
}


html body .ym_tile__section .ym_tiles_img a{
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

html body .ym_tile__section .ym_tiles_img a span{
    bottom: 15px;
    color: #fff;
    display: block;
    font-family: newbaskervillew01-roman,serif;
    font-size: 22px;
    left: 0px;
    position: absolute;
    text-align: center;
    right: 0px;
}

html body #main section .ym_tiles{
    margin: 50px auto !important;
    max-width: 1170px;
    padding: 15px 60px;
    background: #f2f2f2;
}

html body .ym_tile__btn{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

html body .ym_tile__btn a {
    text-decoration: none;
    border: 1px solid;
    padding: 10px;
    font-size: 18px;
}
html body .ym_tile_heading{
    text-align: center;
    max-width: 500px;
    margin: 20px auto;
}
html body .ym_tile_heading h3{
    color: #50aad2;
    font-size: 32px;
    margin-bottom: 15px;
}
html body .ym_tile_heading p{
    color: #000;
    font-size: 15px;
}


@media screen and (max-width: 767px) {

    html body .ym_hero__img .ym_desktop{
        display: none;
    }

    html body .ym_hero__img .ym_mobile{
        display: block;
    }

    html body #main section .ym_tiles{
        padding: 15px 15px;
    }
    html body .ym_tile__section{
        flex-direction: column;
        row-gap: 3px;
    }
    html body .ym_tile__section .ym_tiles_img img{
        width: 100%;
    }

    /* hero text css */
    html body .ym_hero__heading h2{
        font-size: 40px;
        max-width: 300px;
        margin: auto;
        margin-bottom: 18px;
    }
    html body .ym_hero__heading p {
        font-size: 17px;
        margin-bottom: 0 !important;
        max-width: 320px;
        margin: auto;
    }

    /* search bar css  */
    html body #search-widget-duration-filter-wrapper{
        width: 48%;
        float: left;
        margin-right: 4%;
    }
    html body #search-widget-pax-filter{
        width: 48%;
        float: left;
    }
    html body #search-widget .search-widget-main-panel .search-widget-filter label{
        font-size: 15px !important;
        font-weight: 600;
    }
    html body #search-widget .search-widget-main-panel .search-widget-btn-wrapper.disabled .search-widget-btn {
        background-color: #920805;
        border: none;
    }
    html body #search-widget #search-widget-pax-filter .search-widget-button-wrapper{
        width: 100%;
        border: 2px solid;
    }
    html body #search-widget .search-widget-pax-filter span.number{
        padding: 0 !important;
        width: calc(100% - 72px);
        font-size: 2.4rem !important;
    }
    html body #search-widget .search-widget-pax-filter span.number span{
        padding-left: calc(100% - 40px);
    }
    html body #search-widget .search-widget-pax-filter span.decrease.button{
        margin-left: 2px;
    }
    html body #search-widget .search-widget-pax-filter span.button a {
        height: 32px !important;
    }

}

@media screen and (max-width: 345px) {
    html body .ym_hero__heading h2{
        font-size: 30px;
        max-width: 250px;
    }
    html body .ym_hero__heading p{
        font-size: 14px;
    }
}
Editor is loading...