ihk24/templates/source/sass/partials/objects/_header.scss

.page-header {
  position: fixed;
  display: flex;
  align-items: center;
  top: 0;
  width: 100%;
  z-index: 100;
  height: 159px;
  transition: 0.25s $easeOutQuad;
  padding: 0;
  margin: 0;
  border: 0;

  &:before {
    content: "";
    @include fullsize;
    box-shadow: 0 1px 0 $color-white;
    box-shadow: 0 1px 0 var(--theme-color-background, $color-white);
    background-color: $color-white;
    background-color: var(--theme-color-background, $color-white);
    transition: 0.25s $easeOutQuad;
  }

  @media(min-width: 768px) {
    &.scrolled, &.nav-open, &.search-open {
      height: 100px;

      &:before {
        box-shadow: 0 1px 0 rgba($color-primary, 0.2);
        box-shadow: 0 1px 0 rgba(var(--theme-color-primary-rgb, $color-primary-rgb), 0.2);
      }

      .logo img {
        height: 50px;
      }

      nav {
        top: 100px;
        height: calc(100vh - 100px);
        height: calc(var(--viewport-height, 1vh) * 100 - 100px);
        transition: transform 0.25s $easeOutQuad, visibility 0s linear 0s;
        visibility: visible;
      }
    }
  }

  @media(max-width: 767px) {
    height: 80px;
    justify-content: flex-end;

    &:before {
      box-shadow: 0 1px 0 rgba($color-primary, 0.2);
      box-shadow: 0 1px 0 rgba(var(--theme-color-primary-rgb, $color-primary-rgb), 0.2);
    }
  }

  @media(max-width: 359px) {
    height: 70px;
  }

  @media(max-width: 567px) {
    .logo-overlay {
      content: "";
      position: absolute;
      display: block;
      left: 90px;
      top: 0;
      height: 44px;
      width: 100vw;
      background-color: $color-white;
      background-color: var(--theme-color-background, $color-white);
      @include hide(0.3s);
    }

    .contact-nav, .open-search {
      @include hide;
    }
    &.scrolled {
      .contact-nav, .open-search {
        @include show(0.3s);
      }
      .logo-overlay {
        @include show;
        pointer-events: none;
      }
    }

    .logo img, .logo object {
      max-width: calc(100vw - 110px);
    }
  }

  .logo {
    position: relative;
    margin-left: 34px;
    margin-right: auto;
    padding: 8px 12px 8px 8px;
    border-radius: 4px;
    transition: 0.2s ease;
    @include focusvisible;

    img {
      height: 75px;
      width: auto;
      max-width: none;
      transition: 0.25s $easeOutQuad;
      transform: translate3d(0, 0, 0) scale(1);

      @media(max-width: 1199px) {
        height: 50px;
        transition: none;
      }
    }

    canvas {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      height: calc(100% - 20px);
      width: calc(100% - 16px);
      background-color: white;
      margin: 8px 12px 8px 8px;
    }

    @media(max-width: 767px) {
      position: fixed;
      display: flex;
      align-items: center;
      top: 0;
      left: 0;
      margin: 18px 20px;
      padding: 0;
      height: 44px;
      width: calc(100vw - 110px);

      img {
        position: relative;
        display: block;
        height: auto;
        max-height: 44px;
        //width: 100%;
        max-width: calc(100vw - 110px);
        object-fit: contain;
      }
    }

    @media(max-width: 359px) {
      margin: 13px 16px;

      img {
        max-width: calc(100vw - 100px);
      }
    }
  }

  nav {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 100px;
    left: 100%;
    width: 420px;
    max-width: 100%;
    transform: translate3d(1px, 0, 0);
    height: calc(100vh - 100px);
    height: calc(var(--viewport-height, 1vh) * 100 - 100px);
    background-color: white;
    transition: transform 0.25s $easeOutQuad, visibility 0s linear 0.25s;
    box-shadow: -1px 0 0 $color-grey-light;
    box-shadow: -1px 0 0 var(--theme-grey-light, $color-grey-light);
    z-index: -1;
    visibility: hidden;

    @media(max-width: 767px) {
      top: 80px;
      height: calc(100vh - 80px);
      height: calc(var(--viewport-height, 1vh) * 100 - 80px);
    }
    @media(max-width: 359px) {
      top: 70px;
      height: calc(100vh - 70px);
      height: calc(var(--viewport-height, 1vh) * 100 - 70px);
    }

    @media (max-width: 767px) and (orientation: landscape) {
      max-width: 65vw;
    }

    .overlay-holder {
      content: "";
      position: absolute;
      right: 100%;
      width: 100vw;
      top: -100px;
      bottom: 0;
      z-index: -1;
      background-color: $color-primary-light-04;
      background-color: var(--theme-color-primary-dimmed-04, $color-primary-light-04);
      border-right: 1px solid rgba($color-primary, 0.4);
      border-right: 1px solid rgba(var(--theme-color-primary-rgb, $color-primary-rgb), 0.4);
      @include hide;
    }
  }

  .toggle-nav {
    position: relative;
    display: block;
    border: 2px solid $color-primary-light-04;//$lightgrey;
    border: 2px solid var(--theme-color-primary-dimmed-04, $color-primary-light-04);
    background-color: transparent;
    padding: 18px 20px 18px 72px;
    margin: 0 30px 0 20px;
    cursor: pointer;
    transition: 0.3s ease;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
    border-radius: 4px;
    color: $color-primary;
    color: var(--theme-color-primary, $color-primary);
    @include focusvisible;

    @media(max-width: 767px) {
      font-size: 0;
      line-height: 0;
      padding: 0;
      width: 56px;
      height: 56px;
      margin-right: 12px;
      margin-left: 8px;
    }

    &:before, &:after, span:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 40px;
      width: 38px;
      height: 2px;
      border-radius: 2px;
      background-color: $color-primary;
      background-color: var(--theme-color-primary, $color-primary);
      margin: 0 -19px;
      transform: translate3d(0, -1px, 0) rotate(0deg);
      transition: margin 0.2s ease 0.2s, transform 0.2s ease 0s, background-color 0.2s ease 0s, opacity 0.2s ease 0s;

      @media(max-width: 767px) {
        left: 50%;
      }
    }
    &:before {
      margin-top: -12px;
    }
    &:after {
      margin-top: 12px;
    }

    @media(max-width: 359px) {
      width: 50px;
      height: 50px;

      &:before, &:after, span:before {
        width: 32px;
        margin-left: -16px;
      }
      &:before {
        margin-top: -10px;
      }
      &:after {
        margin-top: 10px;
      }
    }
  }

  .open-search, .contact-nav a {
    background-color: transparent;
    border: 0;
    position: relative;
    display: block;
    padding: 20px 20px 20px 54px;
    margin: 0 2px;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
    text-decoration: none;
    color: $color-primary;
    color: var(--theme-color-primary, $color-primary);
    cursor: pointer;
    border-radius: 4px;
    transition: 0.25s $easeOutQuad;
    @include focusvisible;

    @media(max-width: 999px) {
      font-size: 0;
      line-height: 0;
      padding: 5px;
      margin-right: 5px;
    }

    &:before {
      @include icon-suche;
      font-family: "Icons";
      position: absolute;
      left: 14px;
      top: 50%;
      width: 30px;
      height: 30px;
      font-size: 30px;
      font-weight: 400;
      line-height: 1;
      margin: -15px 0;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;

      @media(max-width: 999px) {
        position: relative;
        display: block;
        margin: 0;
        left: 0;
      }
    }
  }

  .contact-nav {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;

    a {
      &.phone{
        @extend .icon-telefon;
        &:before {
          margin-left: 3px;
        }
      }

      &.contact:before, &.website:before {
        @include icon-kontakt;
      }
      &.mail:before {
        @include icon-email;
      }
      &.chat:before {
        @include icon-chat;
      }
      &.login:before{
        @include icon-login-header;
      }
    }
  }

  .search form {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 100px);
    height: calc(var(--viewport-height, 1vh) * 100 - 100px);
    background-color: $color-primary-light-04;
    background-color: var(--theme-color-primary-dimmed-04, $color-primary-light-04);
    @include hide;

    @media(max-width: 767px) {
      height: calc(100vh - 80px);
      height: calc(var(--viewport-height, 1vh) * 100 - 80px);
    }

    .outer {
      position: relative;
      padding-bottom: 10px;
    }

    .container {
      margin: auto;
    }
  }

  .form-nav {
    width: 100%;
    background-color: $color-white;
    background-color: var(--theme-color-background, $color-white);

    .secondary {
      background-color: $color-primary-light-04;
      background-color: var(--theme-color-primary-dimmed-04, $color-primary-light-04);
    }
  }

  .close-search {
    position: absolute;
    right: 30px;
    top: 50%;
    padding: 20px 22px 20px 70px;
    cursor: pointer;
    transition: 0.3s ease;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
    border: 0;
    border-radius: 4px;
    color: $color-white;
    color: var(--theme-color-background, $color-white);
    background-color: $color-primary;
    background-color: var(--theme-color-primary, $color-primary);
    @include focusvisible;
    @include hide;
    z-index: 2;
    top: 50%;
    margin-top: -35px;

    @media (max-width: 1199px) and (min-width: 768px) {
      right: 20px;
    }

    @media(max-width: 767px) {
      font-size: 0;
      line-height: 0;
      padding: 0;
      right: 12px;
      margin-top: -28px;
      width: 56px;
      height: 56px;
    }

    &:before, &:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 36px;
      width: 38px;
      height: 2px;
      border-radius: 2px;
      background-color: $color-white;
      background-color: var(--theme-color-background, $color-white);
      margin: -1px -19px;
      transform: translate3d(0, 0, 0) rotate(45deg);
      transition: 0.3s ease;

      @media(max-width: 767px) {
        left: 50%;
      }
    }

    &:after {
      transform: translate3d(0, 0, 0) rotate(-45deg);
    }
  }

  &.search-open {
    .logo {
      z-index: 1;
    }
    &:after {
      content: "";
      @include fullsize;
      background-color: $color-white;
      background-color: var(--theme-color-background, $color-white);
    }
    .search form, .close-search {
      @include show;
    }
  }

 &.nav-open {
    .toggle-nav {
      background-color: $color-primary;
      background-color: var(--theme-color-primary, $color-primary);
      border-color: $color-primary;
      border-color: var(--theme-color-primary, $color-primary);
      color: $color-white;
      color: var(--theme-color-background, $color-white);
      transition: 0.2s ease 0s;

      &:before, &:after, span:before {
        margin-top: 0;
        transition: margin 0.2s ease 0s, transform 0.2s ease 0.2s, background-color 0.2s ease 0s, opacity 0.2s ease 0.2s;
        background-color: $color-white;
        background-color: var(--theme-color-background, $color-white);
      }
    }
    .toggle-nav:before {
      transform: translate3d(0, -1px, 0) rotate(45deg);

    }
    .toggle-nav:after {
      transform: translate3d(0, -1px, 0) rotate(-45deg);
    }
    .toggle-nav span:before {
      opacity: 0;
    }

    nav {
      transform: translate3d(-100%, 0, 0);
      transition: transform 0.25s $easeOutQuad, visibility 0s linear 0s;
      visibility: visible;

      .overlay-holder {
        @include show;
        opacity: 0.6;
      }
    }

    &:not(.scrolled) {
      ~ .page-wrapper, ~ .page-content {
        @media(min-width: 768px) {
          border-top-width: 100px;
        }
      }
    }

    ~ .page-wrapper, ~ .page-content {
      //filter: blur(4px);
    }
  }

  ~ .page-wrapper, ~ .page-content {
    transition: 0.25s $easeOutQuad;
    //filter: blur(0);
  }

  @media(max-width: 1199px) and (min-width: 768px) {
    height: 100px;

    &:before {
      box-shadow: 0 1px 0 rgba($color-primary, 0.2);
    }

    .logo {
      height: 66px;
      margin-left: 20px;
    }

    .toggle-nav {
      margin-right: 20px;
    }

    nav {
      top: 100px;
      height: calc(var(--viewport-height, 1vh) * 100 - 100px);
    }
  }

  button::-moz-focus-inner {
    border: 0;
  }

  button, a {
    -webkit-tap-highlight-color: transparent;
  }
}

.toplink {
  position: fixed;
  right: 0;
  bottom: 105px;
  background-color: $color-primary;
  background-color: var(--theme-color-primary, $color-primary);
  color: white;
  width: 90px;
  height: 45px;
  display: flex;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  font-size: 16px;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  text-decoration: none;
  @include hide;
  box-shadow: 0 0 0 1px rgba(white, 0.2);
  z-index: -1;

  &:hover, &:active, &:focus {
    color: white;
    text-decoration: none;
  }

  &:before {
    @include icon-pfeil-oben;
    font-family: "Icons";
    font-size: 30px;
    line-height: 1;
    margin-right: 6px;
  }

  @media(max-width: 767px) {
    font-size: 0;
    width: 54px;
    bottom: 64px;
    justify-content: flex-start;
    padding-left: 10px;

    &:before {
      margin-right: 0;
    }
  }
}

.show-toplink .toplink {
  @include show;
}

.mobile .page-header {
  .primary a {
    -webkit-tap-highlight-color: rgba($color-primary, 0.1);
  }

  li.open > a {
    background-color: $color-primary-light-04;//$lightgrey;
  }
}

.desktop .page-header {
  &:not(.nav-open) .toggle-nav:hover {
    background-color: $color-primary-light-04;//$lightgrey;
  }

  .open-search:hover, .contact-nav a:hover {
    color: $color-secondary-dark;
  }
}

[data-browser="ie"] {
  .page-header .logo img {
    height: 50px;
  }

  .page-header .search form {
    display: block;

    .form-nav {
      position: absolute;
      bottom: 0;
    }

    .container {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0;
      transform: translate(-50%, -50%);
    }
  }
}