thalim-theme/scss/_header.scss

body > 
header {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  transition: height 0.3s ease-out;
  background-color: white;
  width: 100%;
  position: relative;
  z-index: 5;
  @media ($tablet) {
      position: fixed;
      height: 12vh;
      min-height: 100px;
      max-height: 130px;
      flex-direction: row;
  }
}

.header-left {
  display: flex;
  height: 6rem;
  margin-top: 3rem;
  @media ($tablet) {
    margin-top: unset;
    height: 100%;
  }
}

.main-logo-container {
  display: inline-block;
  background-color: $light_gray;
  height: 100%;
  @media ($tablet) {
    flex-direction: row;
  }
}

.main-logo {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  height: 100%;
  @include hover-gradient-background;
  @media ($tablet) {
    padding: 1.5rem 2rem;
  }

  > img,
  > a > img {
    height: 100%;
    transform: scale(1);
    transition: transform 0.2s ease-out;
    @media ($tablet) {
    }
  }

  &:hover > img,
  &:hover > a > img {
    transform: scale(1.05);
  }
}

.description {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 0.3rem;
  margin-left: 1.2rem;
  opacity: 1;
  transition: opacity 0.2s ease-out;

  > div:first-of-type {
    text-transform: uppercase;
    font-size: 0.8rem;
    background-color: $light_gray;
    padding: 0.2rem;
  }

  > div:last-of-type {
    font-size: 0.8rem;
    > sup {
        font-size: 0.6rem;
        vertical-align: super;
    }
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: space-between;
  position: fixed;
  width: 100%;
  background-color: white;
  height: 3rem;
  @media ($tablet) {
    padding-left: unset;
    height: unset;
    position: relative;
    width: unset;
  }
  &.scrolled {
    .secondary-logo-container {
        max-width: 40vw;
        .main-logo:hover {
            background-position: unset;
            img {
                transform: unset;
            }
        }
    }
  }
}

.secondary-logo-container {
    height: 100%;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.6s ease-out;
    @media ($tablet) {
        display: none;
    }
}

.lang-switch {
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: font-size 0.2s ease-out;
  > ul {
    display: flex;
    gap: 1rem;
    > li:not(.active) {
        > a {
            text-decoration: none;
        }
    }
  }
}

.search-button {
  margin-left: auto;
  > div {
    background-color: $light_gray;
    padding: 0.5rem;
    border-radius: 5rem;
    min-width: 2rem;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease-out;
    cursor: pointer;

    &:hover {
      background-color: $less_light-gray;
    }
  }
}

.menu-toggle {
  display: inline-block;
  background-color: $light_gray;
  width: fit-content;
  height: 100%;

  > div {
    height: 100%;
    display: flex;
    padding: 0.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    @include hover-gradient-background;
    @media ($tablet) {
        gap: unset;
        padding: 2rem;
    }

    > div {
      font-size: 1rem;
      transform: scale(1);
      transition: transform 0.2s ease-out, font-size 0.2s ease-out;
      @media ($tablet) {
        font-size: 2rem;
      }
    }

    > p {
      font-family: NewsCycle;
      text-transform: uppercase;
      transform: scale(1);
      font-size: 0.8rem;
      transition: transform 0.2s ease-out, font-size 0.2s ease-out;
      @media ($tablet) {
        font-size: 1rem;
      }
    }
  }

  &:hover > div > div,
  &:hover > div > p {
    transform: scale(0.9);
  }
}

.search-panel {
    position: absolute;
    right: 0;
    width: 100%;
    background-color: white;
    z-index: 4;
    border-top: 2px solid $light-gray;
    transition: top 0.4s ease-out, opacity 0.2s ease-out;
    opacity: 0;
    pointer-events: none;

    @media ($tablet) {
        position: fixed;
        width: 33.333%;
    }

    &.active {
        opacity: 1;
        pointer-events: all;
    }

    &__inner {
        padding: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    &__title {
        font-family: $font-primary;
        font-size: 1.1rem;
        text-transform: uppercase;
        display: inline-block;
        align-self: start;
        position: relative;
        line-height: 1.6;
        &::after {
          @include yellow-gradient-after;
          bottom: -10px;
        }
    }

    &__desc {
        font-family: $font-primary;
        color: $less-dark-gray;
    }

    &__input-wrap {
        position: relative;
    }

    &__icon-btn {
        position: absolute;
        right: 0.8rem;
        top: 50%;
        transform: translateY(-50%);
        color: $less-dark-gray;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        line-height: 1;

        &:hover {
            color: $dark-gray;
        }
    }

    &__input {
        width: 100%;
        border: none;
        padding: 0.6rem 2.5rem 0.6rem 0.8rem;
        font-family: $font-primary;
        font-size: 0.85rem;
        outline: none;
        background-color: $light-gray;

        &::placeholder {
            color: $less-dark-gray;
            text-transform: uppercase;
        }

        &:focus {
            border-color: $less-light-gray;
        }
    }

    &__submit {
        display: block;
        margin-left: auto;
        background-color: $light-gray;
        padding: 0.5rem 1rem;
        font-family: $font-primary;
        font-size: 0.85rem;
        text-transform: uppercase;
        cursor: pointer;
        margin-top: 1rem;
        border: none;

        &:hover {
            background-color: $less-light-gray;
        }
    }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $less_light-gray;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.3s ease-out;

  &.active {
    opacity: 0.6;
    pointer-events: all;
  }
}