moonleerecords/moonlee-website

.page-header {
  background-color: $color-gold;
  padding-bottom: 75px;
  position: relative;

  .nav-container {
    background-color: $color-gorse;
    height: 75px;
    overflow: visible;
    position: fixed;
    top: 0;
    -webkit-transition: height .2s;
    -moz-transition: height .2s;
    -ms-transition: height .2s;
    -o-transition: height .2s;
    transition: height .2s;
    width: 80%;
    z-index: 99;

    &.smaller {
      height: 54px;
    }

    .moonlee-logo-header {
      background-size: 268px 36px;
      height: 100%;
      left: 3%;
      margin-top: -18px;
      position: absolute;
      top: 50%;
      width: 268px;
      z-index: 99;
    }

    .navigation {
      display: block;
      font-weight: normal;

      ul {
        text-align: center;

        li {
          display: inline;
          font-size: 20px;

          &:not(:last-child) {
            margin-right: 36px;
          }

          i {
            height: 24px;
            margin-right: 10px;
            margin-top: -3px;
            vertical-align: middle;
            width: 24px;
          }
        }
      }
    }

    .site-navigation {
      margin: 0 auto;
      @include vertical-align(10px);
      position: relative;
      -webkit-transition: left .2s;
      -moz-transition: left .2s;
      -ms-transition: left .2s;
      -o-transition: left .2s;
      transition: left .2s;

      ul {
        li {
          &:first-child {
            display: none;
          }

          &:last-child {
            display: none;
          }

          a {
            color: $color-limed-spruce;

            &:hover, &.active {
              opacity: .5;
            }
          }
        }
      }
    }

    .section-navigation {
      @include vertical-align(10px);
      position: absolute;
      right: 4%;

      a {
        color: $color-black;
        opacity: .5;

        &:hover {
          opacity: 1;
        }
      }
    }
  }

  .slider {
    top: 75px;
  }
}

.navigation-trigger {
  clip: rect(0, 0, 0, 0);
  display: none;
  position: absolute;

  &:checked {
    ~ .navigation-trigger-label {
      &:after {
        -webkit-transition: left .2s;
        -moz-transition: left .2s;
        -ms-transition: left .2s;
        -o-transition: left .2s;
        transition: left .2s;
        color: $color-white;
        content: ' \2715';
      }
    }

    + .navigation-trigger-label {
      left: 58%;
      -webkit-transition: left .2s;
      -moz-transition: left .2s;
      -ms-transition: left .2s;
      -o-transition: left .2s;
      transition: left .2s;
      ~ .site-navigation {
        display: block;
      }
    }
  }
}

.navigation-trigger-label {
  cursor: pointer;
  display: none;
  height: 30px;
  left: 11%;
  margin-left: 10px;
  position: fixed;
  top: 0;
  width: 30px;
  z-index: 100;

  &:after {
    content: ' \2261';
    font-size: 3em;
    position: absolute;
    right: .25em;
    top: -8px;
  }
}

@include respond-to(medium-large) {
  .page-header {
    .nav-container {
      width: 88%;

      .moonlee-logo-header {
        background-size: 200px 26px;
        margin-top: -13px;
        width: 200px;
      }
    }
  }
}

@include respond-to(small) {
  .navigation-trigger,
  .navigation-trigger-label {
    display: block;
  }

  .page-header {
    padding-bottom: 54px;

    .nav-container {
      height: 54px;
      width: 100%;

      .moonlee-logo-header {
        left: 50%;
        margin-left: -90px;
      }

      .site-navigation {
        background-color: $color-limed-spruce;
        bottom: 0;
        display: none;
        height: 100%;
        left: 0;
        opacity: .9;
        padding-left: 10%;
        padding-top: 3%;
        position: fixed;
        top: 0;
        width: 60%;
        z-index: 99;

        ul {
          text-align: left;

          li {
            display: block;

            &:first-child {
              display: block;
            }

            &:last-child {
              display: block;
            }

            a {
              color: $color-gold;
              font-size: 40px;

              &:hover, &.active {
                opacity: .5;
              }
            }
          }
        }
      }

      .section-navigation {
        display: none;
      }
    }

    .slider {
      top: 54px;
    }
  }
}