laconic.com/src/components/common/header/header.module.scss

@import '~/css/helpers';

.header {
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
  background: rgb(4 4 4 / 0.01);
  padding: tovw(14px, 'default', 12px) var(--main-padding-side);
  width: 100%;
  backdrop-filter: blur(20px);

  nav {
    display: flex;
    align-items: center;

    svg {
      display: block;
    }
  }

  ul {
    display: flex;
    margin: 0 0 0 tovw(122px, 'default', 90px);
    padding: 0;
    list-style-type: none;
    gap: tovw(32px, 'default', 16px);
  }

  li:not(.item--mobile) {
    position: relative;

    &::after {
      position: absolute;
      top: 50%;
      left: tovw(-16px, 'default', -16px);
      transform: translateY(-50%);
      transition: opacity var(--duration-normal) var(--ease);
      opacity: 0;
      background: var(--color-white);
      width: tovw(7px, 'default', 7px);
      height: tovw(7px, 'default', 7px);
      content: '';
    }
  }

  li.active {
    &::after {
      opacity: 1;
    }
  }

  .burger {
    width: tovw(28px, 'default', 28px);
  }

  &__mobile {
    position: fixed;
    top: var(--header-height-mobile);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background-color: var(--color-black);
    background-image: linear-gradient(
      180deg,
      rgb(0 0 244 / 0) 1.63%,
      rgb(0 0 244 / 0.9) 81.47%
    );
    padding: tovw(16px, 'mobile');
    width: 100%;
    height: calc(100 * var(--vh) - var(--header-height-mobile));

    ul {
      flex-direction: column;
      margin: 0;
      padding: 0;
    }

    a:not(.button) {
      opacity: 0.6;
      letter-spacing: tovw(-1px, 'mobile');
      font-size: tovw(50px, 'mobile');

      @media screen and (max-height: 750px) {
        font-size: calc(var(--vh) * 5.2);
      }
    }

    li.active {
      a {
        opacity: 1;
      }
    }

    svg {
      display: block;
    }

    .button {
      margin: tovw(59px, 'mobile') 0 tovw(44px, 'mobile') 0;
      width: 100%;
      text-align: center;

      @media screen and (max-height: 750px) {
        margin: calc(var(--vh) * 7.2) 0 calc(var(--vh) * 5.2) 0;
      }
    }

    p {
      text-align: center;
    }

    .social {
      display: grid;
      position: relative;
      justify-content: center;
      margin: tovw(32px, 'mobile') 0;
      padding-top: tovw(32px, 'mobile');
      width: 100%;
      gap: tovw(24px, 'mobile');
      grid-template-columns: repeat(6, tovw(24px, 'mobile'));

      &::after {
        position: absolute;
        top: tovw(-32px, 'mobile');
        left: tovw(-16px, 'mobile');
        margin: tovw(24px, 'mobile') 0;
        background: white;
        width: calc(100% + tovw(32px, 'mobile'));
        height: tovw(1px, 'mobile', 1px);
        content: '';
      }

      li,
      a {
        display: block;
        width: tovw(24px, 'default', 24px);
        height: tovw(24px, 'default', 24px);
      }

      a {
        opacity: 1;
      }
    }
  }
}