assets/css/snippets/navigation.css

.nav {
  --color: var(--black);
  --color--active: var(--white);
  --color-background: var(--black);

  --button-text: var(--black);
  --button-background: transparent;
  --button-text--active: var(--white);
  --button-background--active: var(--black);
  --button-outline: var(--black);
  --button-outline--active: transparent;
  z-index: 10;
}
.nav--blackAndActiveIsWhite {
  --color: var(--black);
  --color--active: var(--black);
  --color-background: var(--white);
}
.nav--whiteAndActiveIsBlack {
  --color: var(--white);
  --color--active: var(--white);
  --color-background: var(--black);
}
.nav--whiteAndActiveIsWhite {
  --color: var(--white);
  --color--active: var(--black);
  --color-background: var(--white);
}
.nav--whiteAndActiveIsBlack,
.nav--whiteAndActiveIsWhite {
  --button-text: var(--white);
  --button-background: transparent;
  --button-text--active: var(--black);
  --button-background--active: var(--white);
  --button-outline: var(--white);
  --button-outline--active: transparent;
}
.nav--showNavigationGradient,
.nav--showNavigationGradient.nav--blackAndActiveIsWhite,
.nav--showNavigationGradient.nav--whiteAndActiveIsBlack,
.nav--showNavigationGradient.nav--whiteAndActiveIsWhite {
  --button-text: var(--black);
  --button-background: var(--green);
  --button-text--active: var(--black);
  --button-background--active: var(--white);
  --button-outline: transparent;
  --button-outline--active: transparent;
}

.nav {
  position: absolute;
  width: 100%;
  height: 120px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.nav__container {
  align-items: center;
}
@media (min-width: 800px) {
  .nav {
    height: 200px;
  }
}
.nav__logo {
  z-index: 3;
}
.nav__logo img {
  max-height: 80px;
  max-width: 100%;
  object-fit: contain;
}
.nav__links {
  visibility: hidden;
  padding-top: var(--space-20);
  padding-bottom: var(--space-10);
  background: var(--green);
  transition: clip-path 0.3s, visibility 0.3s;
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}
@media (max-width: 1079px) {
  .nav__container {
    pointer-events: none;
  }
  .nav__logo,
  .nav__menu-button {
    pointer-events: all;
  }
  .nav[aria-expanded="true"] .nav__container {
    pointer-events: all;
  }
  .nav[aria-expanded="true"] .nav__links {
    z-index: 2;
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% calc(100% - calc(var(--diagonal) / 2)),
      0% 100%
    );
  }
}
@media (min-width: 1080px) {
  .nav__links {
    visibility: visible;
    padding: 0;
  }
}
@media (max-width: 1079px) {
  .nav[aria-expanded="true"] .nav__links {
    visibility: visible;
  }
}
.nav__item {
  color: var(--color);
  font-family: var(--headline);
  font-weight: var(--headline-extrabold);
  text-decoration: none;
}
@media (max-width: 1079px) {
  .nav__item {
    color: var(--black);
    font-size: 1.25rem;
  }
}
.nav__item--active {
  position: relative;
  color: var(--color--active);
  z-index: 1;
}
.nav__item--active::before {
  position: absolute;
  top: -40%;
  left: -15%;
  content: "";
  width: 130%;
  height: calc(180% + 5px);
  background-color: var(--color-background);
  transform: rotate(-1.5deg);
  z-index: -1;
}
.nav__link:hover,
.nav__item--active .nav__link,
.nav__item:focus .nav__link {
  border-bottom: 0.15em solid currentColor;
}
.nav__item:focus {
  outline: 0;
}
.nav__menu-button {
  justify-self: flex-end;
  grid-row: 2 / 3;
  grid-column: 11 / 16;
  padding: 0.75em 1.25em;
  font-size: 0.8rem;
  font-family: var(--headline);
  font-weight: var(--headline-extrabold);
  text-decoration: none;
  background: transparent;
  border: none;
  color: var(--button-text);
  background: var(--button-background);
  box-shadow: inset 0 0 0 2px var(--button-outline);
  border-radius: 100px;
  cursor: pointer;
  z-index: 3;
}
.nav[aria-expanded="true"] .nav__menu-button {
  box-shadow: inset 0 0 0 2px var(--black);
}
[data-whatinput="mouse"] .nav__menu-button {
  outline: 0;
}

@media (min-width: 600px) {
  .nav__menu-button {
    grid-column: 14 / 16;
  }
}
@media (min-width: 1080px) {
  .nav__links {
    clip-path: none;
    background: transparent;
  }
  .nav__menu-button {
    display: none;
  }
  .nav__item:last-child {
    padding: 0.75em 1.25em;
    font-family: var(--headline);
    font-weight: var(--headline-extrabold);
    text-decoration: none;
    color: var(--color);
    background: transparent;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    color: var(--button-text);
    background: var(--button-background);
    box-shadow: inset 0 0 0 2px var(--button-outline);
    transition: transform 0.2s ease-out;
  }
  .nav__item.nav__item--active {
    color: var(--color--active);
    background: var(--color);
  }
  .nav__item--active:last-child::before {
    content: initial;
  }
  .nav__item--active:last-child .nav__link,
  .nav__item:last-child:hover .nav__link,
  .nav__item:last-child:focus .nav__link {
    border: none;
  }
  .nav__item:last-child:hover,
  .nav__item:last-child:focus {
    color: var(--button-text--active);
    background: var(--button-background--active);
    box-shadow: inset 0 0 0 2px var(--button-outline--active);
  }
  .nav__item:last-child:active {
    transform: scale(0.96);
  }
}
@media (max-width: 1079px) {
  .nav[aria-expanded="true"].nav--whiteAndActiveIsWhite,
  .nav[aria-expanded="true"].nav--whiteAndActiveIsBlack {
    --color: var(--black);
    --color--active: var(--black);
    --color-background: var(--white);
  }
  .nav[aria-expanded="true"].nav--whiteAndActiveIsWhite .nav__logo,
  .nav[aria-expanded="true"].nav--whiteAndActiveIsBlack .nav__logo {
    filter: invert(1);
    transition: filter 0.2s;
  }
}
.nav--whiteAndActiveIsBlack .nav__logo,
.nav--whiteAndActiveIsWhite .nav__logo {
  filter: none;
}

.nav--showNavigationGradient {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0)
  );
}
.nav--showNavigationGradient.nav--whiteAndActiveIsBlack,
.nav--showNavigationGradient.nav--whiteAndActiveIsWhite {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}