.smart_nav_menu_bar { z-index: 1900; position: fixed; top: 0px; right: 0px; } .smart_nav_menu_mobile_menu_button_container { position: fixed; display: flex; align-content: center; justify-content: center; align-items: center; justify-items: center; top: 0px; right: 0px; height: var(--header-size); width: var(--header-size); user-select: none; } .smart_nav_menu_mobile_menu_button { --mobile-menu-padding: calc(var(--mp) * 1); --mobile-menu-size: calc(var(--hamburger-line-width) + var(--mobile-menu-padding) * 2); display: none; align-content: center; justify-content: space-between; align-items: center; justify-items: center; flex-direction: column; width: var(--mobile-menu-size); height: var(--mobile-menu-size); aspect-ratio: 1 / 1; cursor: pointer; padding: var(--mobile-menu-padding); border-radius: calc(var(--mp) * 1); contain: layout; } .hamburger { position: relative; width: var(--hamburger-line-width); height: var(--hamburger-line-height); background-color: white; transform-origin: 50% 50%; } .smart_nav_menu_mobile_menu_button .hamburger:first-child { top: var(--hamburger-line-height); } .smart_nav_menu_mobile_menu_button .hamburger:nth-child(2), .smart_nav_menu_mobile_menu_button .hamburger:nth-child(3) { position: fixed; top: calc(var(--mobile-menu-size) / 2 - var(--hamburger-line-height) / 2); } .smart_nav_menu_mobile_menu_button .hamburger:last-child { bottom: var(--hamburger-line-height); } .smart_nav_menu_mobile_menu_button:focus .hamburger:first-child { opacity: 0; transform: translateY(calc(var(--mobile-menu-size) / 2)); } .smart_nav_menu_mobile_menu_button:focus .hamburger:nth-child(2) { transform: rotateZ(45deg); } .smart_nav_menu_mobile_menu_button:focus .hamburger:nth-child(3) { transform: rotateZ(-45deg); } .smart_nav_menu_mobile_menu_button:focus .hamburger:last-child { opacity: 0; transform: translateY(calc(var(--mobile-menu-size) / 2 * -1)); } .smart_nav_menu_container { position: fixed; top: 0px; right: 0px; height: var(--header-size); display: flex; align-content: center; justify-content: center; align-items: center; justify-items: center; overflow: visible; z-index: 500; width: fit-content; } .smart_nav_menu_container .smart_nav_menu { padding: calc(var(--mp) * 1); font-size: 1.25rem; margin: calc(var(--mp) * .5); width: fit-content; text-align: center; cursor: pointer; display: flex; align-content: center; justify-content: center; align-items: center; justify-items: center; border-radius: calc(var(--mp) * 1); font-size: 1.0rem; font-weight: 500; height: fit-content; padding: calc(var(--mp) * 1); opacity: .75; text-shadow: var(--text-shadow); } .smart_nav_menu_container .smart_nav_menu_active, .smart_nav_menu_container .smart_nav_menu:hover, .smart_nav_menu_container .smart_nav_menu:focus { opacity: 1; } .smart_nav_menu_container .smart_nav_menu:focus { text-shadow: var(--text-glow); } .smart_nav_menu_container .smart_nav_menu_active { color: white; opacity: 1; text-shadow: var(--text-glow); text-decoration: underline; text-decoration-thickness: calc(var(--mp) * .5); text-decoration-style: solid; text-underline-offset: calc(var(--mp) * 2); text-underline-position: above; } @media screen and (min-width:1024px) { .smart_nav_menu_container { padding-right: calc(var(--mp) * 2); } .smart_nav_menu_mobile_menu_button_container { display: none; } } @media screen and (orientation:portrait) and (max-width:1023px) { .smart_nav_menu_mobile_menu_button { display: flex !important; } .smart_nav_menu_container { position: fixed; flex-direction: column; justify-content: flex-start; height: stretch; position: fixed; top: var(--header-size); bottom: var(--footer-size); flex: 1 1 auto; min-width: 75%; background-color: var(--box-bg-color-dark-trans); box-shadow: var(--box-shadow); padding: calc(var(--mp) * 2); backdrop-filter: var(--backdrop-filter); transform: translateX(100%); } .smart_nav_menu_container_active { transform: translateX(0px); } .smart_nav_menu_container .smart_nav_menu { width: stretch !important; text-align: left; justify-content: flex-start !important; font-size: 1.15rem; padding: calc(var(--mp) * 2); } }