body[data-page="home"] .topbar {
  background: linear-gradient(180deg, rgba(15, 10, 22, .62), rgba(15, 10, 22, 0));
  border-bottom-color: transparent;
  backdrop-filter: none;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}

body[data-page="home"] .topbar nav > a,
body[data-page="home"] .topbar nav > .nav-item > a,
body[data-page="home"] .topbar .languages button,
body[data-page="home"] .topbar .languages span {
  color: rgba(255, 255, 255, .88);
  transition: color .3s ease;
}

body[data-page="home"] .topbar nav > a:hover,
body[data-page="home"] .topbar nav > a.active,
body[data-page="home"] .topbar nav > .nav-item > a:hover,
body[data-page="home"] .topbar nav > .nav-item > a.active {
  color: #fff;
  border-color: #d991c6;
}

body[data-page="home"] .topbar .menu-button span {
  background: #fff;
}

body[data-page="home"] .topbar.is-scrolled,
body[data-page="home"] .topbar:has(nav.open) {
  background: rgba(255, 255, 255, .97);
  border-bottom-color: #dfe7eb;
  box-shadow: 0 10px 32px rgba(22, 14, 26, .09);
  backdrop-filter: blur(15px);
}

body[data-page="home"] .topbar.is-scrolled nav > a,
body[data-page="home"] .topbar.is-scrolled nav > .nav-item > a,
body[data-page="home"] .topbar.is-scrolled .languages button,
body[data-page="home"] .topbar.is-scrolled .languages span,
body[data-page="home"] .topbar:has(nav.open) nav > a,
body[data-page="home"] .topbar:has(nav.open) nav > .nav-item > a,
body[data-page="home"] .topbar:has(nav.open) .languages button,
body[data-page="home"] .topbar:has(nav.open) .languages span {
  color: var(--navy);
}

body[data-page="home"] .topbar.is-scrolled nav > a:hover,
body[data-page="home"] .topbar.is-scrolled nav > a.active,
body[data-page="home"] .topbar.is-scrolled nav > .nav-item > a:hover,
body[data-page="home"] .topbar.is-scrolled nav > .nav-item > a.active {
  color: var(--blue);
  border-color: var(--blue);
}

body[data-page="home"] .topbar.is-scrolled .menu-button span,
body[data-page="home"] .topbar:has(nav.open) .menu-button span {
  background: var(--navy);
}

@media (max-width: 1050px) {
  body[data-page="home"] .topbar nav {
    color: var(--navy);
  }
}

body[data-page="home"] .topbar .submenu,
body[data-page="home"] .topbar .submenu a {
  color: var(--navy);
}