studiowild.scss

@use 'animations';

$elementor-mobile-breakpoint: 767px;
$navbar-height: 63px;

// studiowild colors
$sw-black: #2D2722;
$sw-grey: #EBECE7;
$sw-gold: #DDAE3C;


header {
  height: $navbar-height;
  background-color: #6A8281;
  z-index: 1001;
  position: sticky;
  top: 0;
  progress {
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: 0;
    /* Reset the appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #6A8281;

    /* Get rid of the default border in Firefox/Opera. */
    border: none;

    /* Progress bar container for Firefox/IE10+ */
    color: $sw-grey;

    &::-webkit-progress-bar {
      background-color: transparent;
    }
    &::-webkit-progress-value {
      background-color: $sw-grey;
    }
    &::-moz-progress-bar {
      background-color: $sw-grey;
    }
  }
  nav.site-navigation {
    div.menu-main-menu-container {
      width: 90%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: auto;
      margin: auto;
      ul.menu {
        padding: 10px;
        justify-content: space-around;
        clear: both;
        max-height: 0;
        overflow:hidden;
        transition: max-height .2s ease-out;
        @media (min-width: 48em) {
          clear: none;
          max-height: none;
        }
        li a {
          font-size: 16px;
          &:hover {
            text-decoration: underline;
          }
        }
        li.current_page_item a {
          font-weight: bold;
        }
        @media (min-width: 48em) {
          li {
            float: left;
          }
        }
      }
    }
    .menu-icon {
      cursor: pointer;
      float: right;
      padding: 28px 20px;
      position: relative;
      user-select: none;
      display: inline-block;

      @media (min-width: 48em) {
        display: none;
      }

      .navicon {
        background: $sw-grey;
        display: block;
        height: 2px;
        position: relative;
        transition: background .2s ease-out;
        width: 18px;
        &:before,&:after{
          background: $sw-grey;
          content: '';
          display: block;
          height: 100%;
          position: absolute;
          transition: all .2s ease-out;
          width: 100%;
        }
        &:before {
          top: 5px;
        }
        &:after {
          top: -5px;
        }
        &.close {
          background: transparent;
          &:after {
            transform: rotate(45deg);
            top: 0;
          }
          &:before {
            transform: rotate(-45deg);
            top: 0;
          }
        }
      }
    }

    .menu-btn {
      display: none;
    }
  }

  &.mobile-opened {
    height: unset;
    opacity: 0.95;

    nav.site-navigation {
      flex-direction: column-reverse;
      div.menu-main-menu-container {
        ul.menu {
          clear: none;
          max-height: none;
          flex-direction: column;
          align-items: center;
          li {
            padding: 10px 0;
          }
        }
      }
      label.menu-icon {
        align-self: flex-end;
      }
    }
  }
}



header.tastyheader {
  display: none;
}

footer.site-footer {
  //&.bg-grey {
  //  background-color: $sw-grey;
  //}
  /*todo: needs mobile media query*/
  height: 250px;
  -webkit-background-size: cover;
  background-size: cover;
  position: relative;
  nav.footer-navigation {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
  }
  ul#menu-footer li {
    font-size: 12px;
    color: $sw-grey;
  }

  ul#menu-footer li:not(:first-child):before {
    content: " | ";
    margin: 0 20px;
  }
  div.footer-logo-container {
    position: absolute;
    bottom: 10px;
    width: 100%;
  }
  img#footer-logo {
    width: 150px;
    @media (max-width:$elementor-mobile-breakpoint) {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    @media (min-width:$elementor-mobile-breakpoint+1) {
      position: absolute;
      right: 55px;
      bottom: 10px;
    }
  }

  div.menu-footer-container {
    margin:0 auto 35px;
    @media (max-width:$elementor-mobile-breakpoint) {
      margin:0 auto 85px;
    }
    .menu-item a:hover {
      text-decoration: underline;
    }
  }

  ul#menu-footer {
    display: flex;
    list-style-type:none;
  }
}
//both header and footer menus
ul.menu li a {
  font-family: "proxima-nova", sans-serif;
  color: $sw-grey;
  text-transform: uppercase;
  letter-spacing: 1.8px;
}

// share links widget
div.social-share-container ul.social-share-lists {
  padding-left: 0;
  font-size: 12px;
  display: inline-flex;
  list-style-type:none;
  li a:hover {
    text-decoration: underline;
  }
}

.hero-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.portfolio-items {
  flex-wrap: wrap;
  .portfolio-item {
    a {
      &:hover h3 {
        text-decoration: underline;
      }
      &:hover div.portfolio-item-img div.portfolio-item-img-overlay {
        display: block;
      }
      div.portfolio-item-img {
        position: relative;
        justify-content: center;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        overflow: hidden;
        img {
          flex: 1;
        }
        div.portfolio-item-img-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: none;
        }
      }

    }

  }

}

form#form_contact-studio-wild .frm_form_fields, form#form_contact-studio-wild2 .frm_form_fields {
  fieldset { border: 0 };
  .frm_form_field.form-field {
    margin-bottom: 1rem;
    input, textarea {
      background-color: $sw-grey;
      //todo: for the grey bg
      // background-color: white;
      border: 0;
      font-family: "proxima-nova", sans-serif;
      letter-spacing: 1.8px;
      opacity: 0.5;
      color: $sw-black;
      &::placeholder {
        color: $sw-black;
      }
    }
  }
  .frm_submit {
    display: flex;
    button {
      margin: auto;
    }
  }
}

form#form_contact-studio-wild2 .frm_form_fields .frm_submit button {
  margin: unset;
}

section.bg-grey {
  background-color: $sw-grey;
  form#form_contact-studio-wild .frm_form_fields {
    .frm_form_field.form-field {
      input, textarea {
        background-color: white;
      }
    }
  }
}


.sw-button {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  font-family: "proxima-nova", sans-serif;
  letter-spacing: 1.8px;
  color: $sw-grey;
  border: 1px solid $sw-gold;
  text-transform: uppercase;
  width: 175px;
  font-size: 1rem;
  &:hover, &:focus {
    background-color: $sw-gold;
  }
  &.button-dark {
    color: #2d2722;
  }
  &.button-dark:hover {
    color: $sw-grey;
  }
}