rf-web/_sass/includes/header.scss

header.page-header {
  .lang,
  .nav-link,
  .sub-nav-link {
    color: $text;
    background-color: white;
    padding: $size-8;
    transition: box-shadow 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
    z-index: 1;
    text-decoration: underline;

    &:hover {
      // box-shadow: 5px 5px 0 rgba($white, 0.5), 10px 10px 0 rgba($white, 0.4), 15px 15px 0 rgba($white, 0.3);
      transition: box-shadow 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
    }
  }

  .nav-group {
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .sub-nav-link {
      opacity: 0;
    }
    &:hover {
      .sub-nav-link {
        opacity: 1;
      }
    }

    a {
      cursor: pointer;
    }
  }

  nav {
    position: absolute;
    top: $size-32;
    right: $size-32;
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    @include touch {
      top: $size-16;
      right: $size-12;
    }
    .menu {
      display: flex;
    }
  }

  .lang,
  .nav-link {
    margin: 0 4px 8px 0;
    @include touch {
      font-size: 0.8em;
    }
  }

  h1.logo {
    font-family: $font-logo;
    margin: $size-128 0;
    // background-color: $bg;
    display: inline-block;

    @include touch {
      margin: $size-128 0 $size-64 0;
    }
  }
}

#rf-logo-wrapper {
  transition: all 0.8s ease-in-out;
  a {
    font-weight: normal;

    &:hover,
    &:visited {
      font-style: normal;
    }

    @include darkMode {
      h1 {
        color: $white;
      }
    }
  }

  &.hidden {
    opacity: 0.0001;
    margin-top: -100px;
  }

  .rf-logo {
    margin: $size-64 0 $size-64 $size-32;

    @include touch {
      max-width: 90%;
      margin-left: 5%;
    }
  }
}