O backdrop-filter (blur) não tem efeito no .menu-panel, mesmo que a transparência do fundo funcione

[awesomerobot (Kris)]

Certo, isso é um pouco mais complicado… quando um elemento como o header recebe um backdrop-filter, ele se torna a raiz para o efeito. Assim, qualquer elemento descendente aninhado dentro dessa raiz (como os painéis de dropdown) só pode aplicar o desfoque ao que está dentro dessa raiz… ele não consegue ver o conteúdo da página além do header, mesmo que os painéis se estendam além dele, então não há desfoque ali.

O que você pode fazer em vez disso é usar um elemento pseudo no header para evitar essa restrição de raiz.

.d-header {
  position: relative;
  isolation: isolate;
  background-color: transparent;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: color-mix(in srgb, var(--header_background) 70%, transparent);
    backdrop-filter: blur(12px);
    pointer-events: none;
  }
}

.menu-panel {
  background-color: color-mix(in srgb, var(--secondary) 70%, transparent);
  backdrop-filter: blur(12px);
}

.user-menu .quick-access-panel .read {
  background: transparent;
}