InternalPage.module.css

.page { --page-top: 8rem; }
.navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 9rem;
  pointer-events: none;
}
.navbar[data-overlap="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 160ms ease;
  background: var(--background);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  /* Feather the whole surface, without a solid band or visible bottom edge. */
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgb(0 0 0 / 95%) 18%,
    rgb(0 0 0 / 80%) 36%,
    rgb(0 0 0 / 50%) 55%,
    rgb(0 0 0 / 20%) 75%,
    rgb(0 0 0 / 4%) 90%,
    transparent 100%
  );
}
.navbar[data-scrolled="true"]::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .navbar::before { transition: none; }
}
.navigation { position: relative; padding: 1.5rem; }
.home {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  pointer-events: auto;
}
.home img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.home:hover { opacity: 0.85; }
.home:focus-visible { border-radius: 50%; }
@media (max-width: 768px) {
  .home { width: 2.25rem; height: 2.25rem; }
  .page {
    --page-top: 7rem;
    --internal-wide-width: var(--page-width);
  }
  .navigation {
    max-width: var(--page-width);
    margin: 0 auto;
    padding-inline: var(--page-gutter);
  }
}