/* Nav Dark BG */ .navigation__dark-bg { transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1); } [data-navigation-status="active"] .navigation__dark-bg { opacity: 0.15; visibility: visible; } /* Show/Hide content */ .centered-nav__content { transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-navigation-status="active"] .centered-nav__content { grid-template-rows: 1fr; } /* Nav content animation (menu items) */ [data-navigation-item] { transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1); opacity: 0; transform: translate(0px, 2em); } [data-navigation-status="active"] [data-navigation-item] { opacity: 1; transform: translate(0px, 0em); } /* Link underline */ .hamburger-nav__a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 1px; background: currentColor; opacity: 0.2; transition-delay: inherit; transform: scaleX(0); transition: transform 0.6s cubic-bezier(.65, 0, 0, 1); } [data-navigation-status="active"] .hamburger-nav__a::after { transform: scaleX(1); } .hamburger-nav__a:hover::after { opacity: 0.4; } /* Link text slide */ .hamburger-nav__p { transition: transform 0.6s cubic-bezier(.65, 0, 0, 1); transform: translate(0px, 150%); transition-delay: inherit; } [data-navigation-status="active"] .hamburger-nav__p { transform: translate(0px, 0%); } /* Active Link underline */ .hamburger-nav__a[aria-current]::after { opacity: 1; } /* Hamburger Button animation */ .centered-nav__toggle .centered-nav__toggle-bar { transition: transform 0.6s cubic-bezier(.65, 0, 0, 1); transform: translateY(-0.25em) rotate(0.001deg); } .centered-nav__toggle:hover .centered-nav__toggle-bar { transform: translateY(0.25em) rotate(0.001deg); } .centered-nav__toggle .centered-nav__toggle-bar:nth-child(2) { transform: translateY(0.15em) rotate(0.001deg); } .centered-nav__toggle:hover .centered-nav__toggle-bar:nth-child(2) { transform: translateY(-0.15em) rotate(0.001deg); } [data-navigation-status="active"] .centered-nav__toggle .centered-nav__toggle-bar { transform: translateY(0em) rotate(45deg); } [data-navigation-status="active"] .centered-nav__toggle .centered-nav__toggle-bar:nth-child(2) { transform: translateY(0em) rotate(-45deg); } /* CTA Banner marquee */ @keyframes translateX { to { transform: translateX(-100%); } } [data-css-marquee-list] { animation: translateX 20s linear; animation-iteration-count: infinite; animation-play-state: paused; } [data-navigation-status="active"] [data-css-marquee-list] { animation-play-state: running; } [data-navigation-status="active"] .centered-nav__banner:hover [data-css-marquee-list] { animation-play-state: paused; }