nav { .search-wrapper { @apply hx:hidden hx:md:inline-block; } } @supports ( (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) ) { .nav-container-blur { @apply hx:backdrop-blur-md hx:bg-white/[.85] hx:dark:bg-dark/80!; } } /* Hamburger Menu - Flattened Structure */ .hamburger-menu svg g { @apply hx:origin-center hx:transition-all hx:duration-100 hx:ease-out; } .hamburger-menu svg path { @apply hx:opacity-100 hx:transition-all hx:duration-100 hx:ease-out hx:delay-100; } .hamburger-menu svg.open path { @apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-0; } .hamburger-menu svg.open g { @apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-100; } .hamburger-menu svg.open > path { @apply hx:opacity-0; } .hamburger-menu svg.open > g:nth-of-type(1) { @apply hx:rotate-45; } .hamburger-menu svg.open > g:nth-of-type(1) path { @apply hx:translate-y-1; } .hamburger-menu svg.open > g:nth-of-type(2) { @apply hx:-rotate-45; } .hamburger-menu svg.open > g:nth-of-type(2) path { @apply hx:-translate-y-1; }