_header.scss 4.69 KB
.pre-header {
    background-color: #0484b8;
    color: #fff;
    height: 57px;
    display: flex;
    .sponsored {
      text-align: right;
      .logo {
        width: 149px;
        margin-left: 30px;
      }
    }
  }
  #main-nav {
    background-color: #fff;
    height: 128px;
    transition: 0.4s;
    .custom-logo-link {
      margin-left: 0px;
      img {
        transition: 0.4s;
        width: 349px;
      }
    }
    .navbar-nav.sign-up {
      margin-bottom: 20px;
    }
    #login-menu {
      transition: 0.4s;
      position: relative;
      a {
        font-size: 14px;
        color: #0484b8;
        margin-left: 20px;
        text-align: center;
      }
      a:hover {
        color: #2c2c2c;
        text-decoration: underline;
      }
      .sign-up {
        a {
          margin-left: 10px;
        }
      }
      .log-in-button {
        background-color: #0484b8;
        margin-left: 20px;
        a {
          font-size: 14px;
          color: #fff;
          padding: 7px 25px;
          margin-left: 0px;
        }
        a:hover {
          text-decoration: none !important;
        }
      }
      .log-in-button:hover {
        background-color: #2c2c2c;
      }
    }
  
    #main-menu {
      transition: 0.4s;
      position: relative;
      top: unset;
      a {
        font-size: 18px;
        font-weight: bold;
        color: #0484b8;
      }
      a:hover {
        color: #2c2c2c;
        text-decoration: underline;
      }
    }
  }
  
  .admin-bar .fixed-top {
    top: 32px;
  }
  
  #main-nav.fixed-top {
    height: 80px !important;
    #main-menu {
      top: -20px;
    }
    #login-menu {
      top: -60px;
    }
    .custom-logo-link img {
      width: 240px !important;
    }
  }
  
  .hero-container {
    background-position: top right;
    background-size: cover;
    width: 100%;
    background-color: #ccc;
    height: 530px;
  }
  
  .header-section,
  .full-image,
  .image-loaded {
    height: 530px;
    background-position: top right;
    background-size: cover;
    width: 100%;
    position: relative;
  }
  .full-image::after {
    content: "";
    display: block;
    position: absolute;
    background-size: contain;
    bottom: -2px;
    right: 0px;
    width: 200px;
    height: 200px;
    background-image: url("../images/logo-border.png");
  }
  
  .hero-content {
    width: 60%;
    height: 520px;
    h1 {
      color: #fff;
      margin-bottom: 10px;
    }
    p {
      color: #fff;
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 25px;
    }
    a {
      padding: 12px 30px;
      background-color: #e8d44b;
      color: #2c2c2c;
      font-size: 18px;
      line-height: 24px;
      text-decoration: none;
      text-transform: uppercase;
    }
    a:hover {
      color: #2c2c2c;
      background-color: #fff;
    }
  }
  
  #btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 0px;
    width: 43px;
    height: 43px;
    display: none;
    background-color: #0484b8;
    padding: 5px;
    border-radius: 0px;
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23.024' height='23.545' viewBox='0 0 23.024 23.545'%3E%3Cg id='Group_1373' data-name='Group 1373' transform='translate(0 1.5)'%3E%3Cline id='Line_15' data-name='Line 15' y1='15.007' transform='translate(11.512 7.038)' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Cpath id='Path_1388' data-name='Path 1388' d='M3331.593 12517.547h23.024' transform='translate(-3331.593 -12517.547)' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Cpath id='Path_1389' data-name='Path 1389' d='M3279.832 12508.2l8.216-8.217 8.216 8.217' transform='translate(-3276.535 -12494.895)' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
    z-index: 999;
  }
  
  #btn-back-to-top:hover {
    background-color: #000;
  }
  
  .search-button a {
    text-indent: 99999px;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    background-image: url("data:image/svg+xml,%3Csvg id='Component_33_1' data-name='Component 33 %E2%80%93 1' xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 35 35'%3E%3Ccircle id='Ellipse_8' data-name='Ellipse 8' cx='17.5' cy='17.5' r='17.5' fill='%230484b8'/%3E%3Cg id='Group_1454' data-name='Group 1454' transform='translate(-1077.417 -15.667)'%3E%3Ccircle id='Ellipse_7' data-name='Ellipse 7' cx='6.701' cy='6.701' r='6.701' transform='translate(1086.75 25)' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Cline id='Line_39' data-name='Line 39' x2='4.188' y2='4.188' transform='translate(1098.896 37.146)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  }