Carrée couronne - LIMINAL GLEAMS

/* Hamburger Button */ .menu-toggle { width: 130px; height: 45px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; z-index: 1001; background: none; border: none; padding: 0; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .menu-toggle span { display: block; width: 100%; height: 4px; background-color: #000; transition: all 0.3s ease; cursor: pointer; min-height: 4px; flex-shrink: 0; } .menu-toggle #bar-top { transform-origin: left bottom; } .menu-toggle #bar-bottom { transform-origin: left top; } .menu-toggle .content { transition: transform 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; flex: 1; width: 100%; align-self: stretch; /* Forces GPU rendering on iOS */ -webkit-transform: translateZ(0); transform: translateZ(0); } .menu-toggle:hover div { transform: scaleY(-1); } /** * arctan(45/130) to get the correct angle */ .menu-toggle.active #bar-top { transform: rotate(19.22deg); } .menu-toggle.active #bar-bottom { transform: rotate(-19.22deg); } #menu { background: var(--CC-gradient, linear-gradient(180deg, #FF6B01 2%, #C90B1C 35.1%, #5C0618 63.29%, #000 93.65%)); top: 0; position: absolute; z-index: 100; } @media (max-width: 840px) { #menu { background: var(--CC-gradient, linear-gradient(180deg, #FF6B01 2%, #C90B1C 35.1%, #5C0618 75%, #190207 98%)); } .menu-toggle { height: 37px; margin-top: -2px; width: 95px; -webkit-transform: translate3d(0,0,0); z-index: 1001; } .menu-toggle span { height: 3px; min-height: 3px; flex-shrink: 0; } /** * arctan(35/95) to get the correct angle */ .menu-toggle.active #bar-top { transform: rotate(20.2248594deg); } .menu-toggle.active #bar-bottom { transform: rotate(-20.2248594deg); } } .animation { transition: 0.5s all ease; } .menu-active { height: 100vh !important; z-index: 100; } #quick-menu { opacity: 1; transition: 0.5s all ease 0.3s; } .quick-menu-faded { opacity: 0 !important; transition: 0.5s all ease 0s !important; pointer-events: none; } #ham-menu { transition: all 0.4s ease 0.15s; } .menu-faded { opacity: 0 !important; transition: 0.2s all ease 0s !important; pointer-events: none; }