.menu { border-radius: calc(0.092592592vh * 26); /* background: var(--MenuBackground); */ /* background-size: 100% 100%; */ width: 35.5vh; position: absolute; flex-direction: column; overflow: hidden; padding-bottom: calc(0.092592592vh * 41); scale: var(--menuScale); } .menu::after { content: ""; position: absolute; width: calc(0.092592592vh * 250); height: calc(0.092592592vh * 250); border-radius: 50%; background-color: red; filter: drop-shadow(calc(0.092592592vh * 400) 0px calc(0.092592592vh * 125) var(--shadow-color)); top: calc(0.092592592vh * 150); left: calc(0.092592592vh * -450); } .menu img.svgvector { position: absolute; left: 0; top: 0; width: calc(0.092592592vh * 171); height: calc(0.092592592vh * 65); stop-color: var(--svg-color); } .menu p.signstripes { background: radial-gradient(3698% 50% at 50% 46.67%, #fff 0%, #ffffff00 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: calc(0.092592592vh * 12); letter-spacing: calc(0.092592592vh * 9); position: absolute; left: calc(0.092592592vh * -45); bottom: calc(0.092592592vh * 85); transform: rotateZ(90deg); } .dot { width: calc(0.092592592vh * 5); height: calc(0.092592592vh * 5); border-radius: calc(0.092592592vh * 1); background: var(--primary-color); box-shadow: 0px 0px calc(0.092592592vh * 6) 0px var(--secondary-color); position: absolute; top: calc(0.092592592vh * 5); left: calc(0.092592592vh * 5); } .menu .head { height: -moz-fit-content; margin-left: -3vh; height: fit-content; display: flex; flex-direction: column; padding-top: calc(0.092592592vh * 40); padding-bottom: calc(0.092592592vh * 5); z-index: 1; } .menu .head .logo-line { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: calc(0.092592592vh * 20); } .menu .head p.gilroy700 { font-size: calc(0.092592592vh * 25); background: radial-gradient(70.24% 70.24% at 50% 50%, #fff 0%, #d3d3d3 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .menu .head p.brothership { font-size: calc(0.092592592vh * 32); background: radial-gradient(70.24% 70.24% at 50% 50%, var(--primary-color) 0%, var(--second-main-color) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: calc(0.092592592vh * 10); } .menu .head p.sign { font-size: calc(0.092592592vh * 15); background: radial-gradient(70.24% 70.24% at 50% 50%, var(--primary-color) 0%, var(--second-main-color) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .menu .menu-items { max-height: calc(0.092592592vh * 295); overflow-y: auto; width: -moz-fit-content; width: fit-content; width: 100%; display: flex; flex-direction: column; gap: calc(0.092592592vh * 10); z-index: 1; } .menu .menu-items .menu-item { width: 100%; opacity: 0.85; display: flex; justify-content: space-between; font-family: gilroy400; color: #ffffff; gap: calc(0.092592592vh * 12); box-sizing: border-box; z-index: 1; } .menu .menu-items .menu-item .lightbar { width: calc(0.092592592vh * 2); min-height: calc(0.092592592vh * 53); height: auto; } .menu .menu-items .menu-item .menu-content { width: calc(0.092592592vh * 289); padding: calc(0.092592592vh * 5) calc(0.092592592vh * 15) calc(0.092592592vh * 5) calc(0.092592592vh * 21); box-sizing: border-box; height: 100%; min-height: calc(0.092592592vh * 53); border-radius: calc(0.092592592vh * 6); background: radial-gradient(70.24% 70.24% at 50% 50%, var(--item-primary) 0%, var(--item-secondary) 100%); justify-content: space-between !important; display: flex; position: relative; font-size: calc(0.092592592vh * 14); gap: calc(0.092592592vh * 30); } .menu .menu-items .menu-item .menu-content::before { content: ""; position: absolute; inset: 0; border-radius: calc(0.092592592vh * 6); padding: calc(var(--piv) * 1); background: radial-gradient(50% 100% at 50% 50%, var(--primary-color) 0%, #9eff2300 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .menu .menu-items .menu-item .menu-content.btwn { padding: 0 calc(0.092592592vh * 5) 0 calc(0.092592592vh * 21); justify-content: space-between !important; } .menu .menu-items .menu-item .menu-content svg { width: calc(0.092592592vh * 27); height: calc(0.092592592vh * 27); min-width: calc(0.092592592vh * 27); min-height: calc(0.092592592vh * 27); } .menu .menu-items .menu-item .count-selector { width: calc(0.092592592vh * 98); height: calc(0.092592592vh * 39); padding: 0 calc(0.092592592vh * 9); border-radius: calc(0.092592592vh * 3); background: radial-gradient(338.9% 77.55% at 50% 50%, var(--item-primary) 0%, var(--item-secondary) 100%); box-sizing: border-box; } .menu .menu-items .menu-item .count-selector p { font-size: calc(0.092592592vh * 14); padding: 0 calc(0.092592592vh * 10); } .menu .menu-items .menu-item.selected { background: radial-gradient(1879.55% 50% at 50% 50%, #1acfb400 0%, var(--selected-item) 100%); opacity: 1; } .menu .menu-items .menu-item.selected .lightbar { background: var(--primary-color); box-shadow: 0px 0px calc(0.092592592vh * 12) 0px var(--primary-color); } .menu .menu-items .menu-item.selected .menu-content { background: radial-gradient(70.24% 70.24% at 50% 50%, var(--secondary-color) 0%, var(--selected-item-secondary) 100%); }/*# sourceMappingURL=app.css.map */