%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /var/www/maraton.eco-n-tech.co.uk/wp-content/themes/maraton/src/scss/
Upload File :
Create Path :
Current File : /var/www/maraton.eco-n-tech.co.uk/wp-content/themes/maraton/src/scss/_header.scss

// Admin bar top position fix
body.admin-bar {
  header.header {
    top: calc-rem(32);

    @include media-breakpoint-down(sm) {
      top: calc-rem(46);
    }
  }

  header.header.scrolled {
    @include media-breakpoint-down(sm) {
      top: 0;
    }

    &+ .nav-main {
      top: 0;
    }
  }
}

// Header {
// Navigation active / header scrolled / Blue header
.navigation-active .header,
.header.scrolled,
body.post-type-archive-mediekanaler .header,
body.single-mediekanaler .header,
body.tax-mediekanaler_cat .header,
body.post-type-archive-biblioteket .header,
body.single-biblioteket .header,
body.tax-biblioteket_cat .header,
body.post-type-archive-karriar .header,
body.single-karriar .header,
body.page-template-default:not(.has-header-section) .header,
body.post-type-archive-faq .header,
body.single-faq .header {
  //top: 0;
  background: $primary;

  .container-fluid {
    @include media-breakpoint-up(md) {
      padding-inline: calc-rem(40);
    }
  }

  .header--wrapper {
    height: calc-rem(95);

    @include media-breakpoint-down(sm) {
      height: calc-rem(74);
    }

    #main-nav--toggle button span {
      background: $white;
    }
  }

  .header__branding--logo {
    img {
      &:first-of-type {
        opacity: 0;
      }

      &:last-of-type {
        opacity: 1;
        visibility: visible;
      }
    }
  }

  .header--notification a {
    color: $white;

    &::before {
      background-color: $white;
    }
  }
}

// Header for Mediekanaler
body.post-type-archive-mediekanaler:not(.navigation-active),
body.single-mediekanaler:not(.navigation-active),
body.tax-mediekanaler_cat:not(.navigation-active) {
  .header {
    background: $black;
  }
}

// Header defaults
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  transition: $transition_normal;

  &.white {
    .header__branding--logo {
      img {
        &:first-of-type {
          opacity: 0;
        }

        &:last-of-type {
          opacity: 1;
          visibility: visible;
        }
      }
    }

    .header--notification a {
      color: $white;

      &::before {
        background-color: $white;
      }
    }

    .header--wrapper #main-nav--toggle button span {
      background: $white;
    }
  }

  .container-fluid {
    padding-inline: calc-rem(55);
    transition: 0.2s all ease;

    @include media-breakpoint-down(sm) {
      padding-inline: calc-rem(30);
    }
  }

  .header--wrapper {
    display: flex;
    align-items: center;
    height: calc-rem(120);
    transition: 0.2s all ease;

    @include media-breakpoint-down(sm) {
      height: calc-rem(74);
    }

    #main-nav--toggle {
      flex: 1;
      text-align: right;

      button {
        background: none;
        border: none;
        width: calc-rem(49);
        height: calc-rem(24);
        position: relative;
        vertical-align: middle;

        span {
          display: block;
          position: absolute;
          height: calc-rem(3);
          left: 0;
          right: 0;
          background: #000;
          transition: $transition_normal;

          &:nth-child(1) {
            top: 0;
            opacity: 1;
          }

          &:nth-child(2) {
            top: 50%;
            margin-top: calc-rem(-1.5);
            transform: rotate(0deg);
          }

          &:nth-child(3) {
            top: 50%;
            margin-top: calc-rem(-1.5);
            transform: rotate(0deg);

          }

          &:nth-child(4) {
            bottom: 0;
            opacity: 1;
            width: 80%;
            margin-left: auto;
          }
        }
      }
    }
  }

  &__branding {
    display: flex;
    align-items: center;
    flex: 1;

    &--logo {
      display: block;
      text-decoration: none;
      position: relative;
      max-width: 14.15rem;

      img {
        display: block;
        width: 100%;

        &:last-of-type {
          position: absolute;
          top: 0;
          opacity: 0;
          visibility: hidden;
          transition: 0.2s all ease;
        }
      }
    }
  }

  &--notification {
    flex: 3;
    text-align: center;
    font-size: calc-rem(16);

    @include media-breakpoint-down(sm) {
      display: none;
    }

    a {
      color: #131315;
      text-decoration: none;
      transition: 0.3s all ease;
      display: inline-block;

      &::before {
        content: '';
        width: calc-rem(7);
        height: calc-rem(7);
        background-color: #3434c9;
        display: inline-block;
        vertical-align: middle;
        margin-right: calc-rem(10);
      }

      &:hover {
        transform: scale(1.05);
      }
    }
  }

}

picture {
  display: block;
  > * {
    width: 100%;
    display: block;
  }
}

// admin bar top position fix
.admin-bar .nav-main {
  top: 2rem;
  height: calc(100% - 2rem);

  @include media-breakpoint-down(sm) {
    top: calc-rem(46);
  }
}

// Main navigation
.nav-main {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  transition: $transition_normal;
  z-index: 99;
  background-color: transparent;
  visibility: hidden;
  opacity: 0;

  @include media-breakpoint-down(lg) {
    align-items: flex-start;
  }

  &__menu {
    color: $white;
    background: $primary;
    max-width: calc-rem(1188);
    width: 100%;
    height: 100%;
    padding-inline: calc-rem(23);
    overflow-y: scroll;

    @include media-breakpoint-between(lg, xxl) {
      zoom: 0.75;
    }

    &-header {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: calc-rem(95);

      @include media-breakpoint-down(sm) {
        height: calc-rem(74);
      }

      button {
        background-color: transparent;
        border: 0;
        color: #e1d4c8;
        text-decoration: underline;
        font-weight: 600;

        &:hover {
          text-decoration: none;

          img {
            margin-left: calc-rem(15);
          }
        }

        img {
          margin-left: calc-rem(10);
          transition: 0.2s all ease;
        }
      }
    }

    ul {
      margin-bottom: 0;
      list-style: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: initial;

      li {
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);

        a {
          color: $white;
          text-decoration: none;
          font-size: calc-rem(30);
          font-weight: 600;
          //line-height: 5vh;
          position: relative;
          z-index: 2;
          transition: $transition_normal;
          padding-block: calc-rem(30);
          padding-left: calc-rem(50);
          display: block;
          line-height: normal;
          font-family: $ofelia;

          @include media-breakpoint-down(lg) {
            padding-block: calc-rem(25);
            padding-left: calc-rem(30);
          }

          @media (max-width: 400px) {
            font-size: calc-rem(25);
          }
        }

        &:hover,
        &.current-menu-item {
          a {
            background-color: rgba(255, 255, 255, 0.15);
            padding-left: calc-rem(75);
            text-decoration: underline;

            @include media-breakpoint-down(lg) {
              padding-left: calc-rem(55);
            }
          }
        }
      }
    }
  }

  &--container {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    flex-flow: wrap;
    height: 100%;

    @include media-breakpoint-down(md) {
      margin-inline: calc-rem(-23);
    }
  }

  &__left {
    flex: 50%;
    border-right: 1px solid rgba(255, 255, 255, 0.3);

    @include media-breakpoint-down(md) {
      flex: 100%;
      border-right: 0;
    }
  }

  &__links {
    padding: calc-rem(50);
    display: flex;

    @include media-breakpoint-down(lg) {
      padding: calc-rem(45) calc-rem(30);
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    a {
      color: $white;
      text-decoration: none;
      font-size: calc-rem(16);

      &:hover {
        text-decoration: underline;
      }

      &:not(:last-child) {
        margin-right: calc-rem(30);
      }
    }
  }

  &__right {
    flex: 50%;
    padding: calc-rem(80);

    @include media-breakpoint-down(lg) {
      padding: calc-rem(50) calc-rem(30);
    }

    h4 {
      margin-bottom: calc-rem(20);
    }

    a {
      color: $white;
      text-decoration: none;
      font-weight: 600;
      transition: 0.2s all ease;
      font-family: $ofelia;

      @media (max-width: 410px) {
        font-size: calc-rem(20);
      }

      &:hover {
        text-decoration: none;
        color: shift-color($white, $link-shade-percentage);
      }
    }

    b, strong {
      font-weight: 600;
    }
  }
}

.navigation-active {
  overflow: hidden;

  header {
    background: $primary;
    border-color: #1B3038;

    .header--wrapper {
      #main-nav--toggle {

        span {


          &:nth-child(1) {
            top: 0;
            opacity: 0;
          }

          &:nth-child(2) {
            top: 50%;
            margin-top: calc-rem(-1.5);
            transform: rotate(315deg);
          }

          &:nth-child(3) {
            top: 50%;
            margin-top: calc-rem(-1.5);
            transform: rotate(225deg);
          }

          &:nth-child(4) {
            bottom: 0;
            opacity: 0;
          }
        }
      }
    }
  }

  .nav-main {
    visibility: visible;
    opacity: 1;
    background-color: rgba(19, 19, 21, 0.8);
  }
}
// } Header

Zerion Mini Shell 1.0