@charset "UTF-8"; @font-face { font-family: Akrobat; src: url("../fonts/Akrobat-Regular.woff"); font-weight: 400; } @font-face { font-family: Akrobat; src: url("../fonts/Akrobat-SemiBold.woff"); font-weight: 600; } @font-face { font-family: Akrobat; src: url("../fonts/Akrobat-Bold.woff"); font-weight: 700; } @font-face { font-family: Akrobat; src: url("../fonts/Akrobat-ExtraBold.woff"); font-weight: 800; } @font-face { font-family: Akrobat; src: url("../fonts/Akrobat-Black.woff"); font-weight: 900; } @font-face { font-family: caveat; src: url("../fonts/Caveat-Bold.woff"); font-weight: 700; } * { user-select: none; margin: 0; padding: 0; user-select: none; box-sizing: border-box; } body { user-select: none; background-size: cover; background-repeat: no-repeat; height: 100vh; width: 100vw; color: #fff; font-family: Akrobat; font-size: var(--size-14); overflow: hidden; } .left-png { user-select: none; width: 100vw; height: 100vh; position: absolute; z-index: -9999; background-image: url("../imgs/left.png"); background-position: center; background-repeat: no-repeat; background-size: cover; } .right-png { user-select: none; width: 100vw; height: 100vh; position: absolute; z-index: -9999; background-image: url("../imgs/right.png"); background-position: center; background-repeat: no-repeat; background-size: cover; } .bottom-png { user-select: none; width: 100vw; height: 100vh; position: absolute; z-index: -9999; background-image: url("../imgs/bottom.png"); background-position: center; background-repeat: no-repeat; background-size: cover; } .changecamera { user-select: none; width: 67vw; height: 57vh; position: absolute; left: 15vw; top: 13vw; } ::-webkit-scrollbar { display: none; } .top-section { user-select: none; display: flex; justify-content: space-between; width: 100%; padding: var(--size-53) var(--size-40); } .top-section > div { user-select: none; width: 40%; } .l-top { user-select: none; width: max-content; animation: leftSide 0.7s ease-in-out; } .l-title { user-select: none; font-family: "Akrobat"; font-weight: 900; font-size: var(--size-64); line-height: var(--size-77); letter-spacing: var(--size--3); text-transform: uppercase; background: linear-gradient(180deg, #41fff6 0%, #298ba2 96.87%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: var(--size-1) #41ffff; text-shadow: 0 var(--size-4) var(--size-72) rgb(65 255 222 / 52%); } .l-spell { user-select: none; font-family: caveat; font-size: var(--size-20); display: flex; justify-content: space-between; text-transform: uppercase; margin-top: var(--size--5); } .l-desc { user-select: none; font-size: var(--size-15); color: rgba(255, 255, 255, 0.54); line-height: var(--size-24); width: var(--size-380); margin: var(--size-16) 0 var(--size-34); animation: leftSide 0.8s ease-in-out; } .l-items { user-select: none; display: flex; flex-direction: column; gap: var(--size-16); margin-left: var(--size-20); height: calc((var(--size-90) + var(--size-14)) * 6); overflow-y: scroll; margin-left: var(--size--40); animation: leftSide 1s ease-in-out; } @keyframes leftSide { 0% { opacity: 0; transform: translateX(-50%); } 50% { opacity: 0.5; } 100% { opacity: 1; transform: translateX(0); } } @keyframes rightSide { 0% { opacity: 0; transform: translateX(50%); } 50% { opacity: 0.5; } 100% { opacity: 1; transform: translateX(0); } } .l-item { user-select: none; display: flex; align-items: center; gap: var(--size-14); width: max-content; cursor: pointer; position: relative; margin-left: var(--size-68); height: var(--size-90); } .l-item-tape { user-select: none; width: var(--size-80); height: var(--size-80); position: absolute; top: var(--size--10); left: var(--size--68); opacity: 0; transition: opacity 0.4s; } .l-item-tape img { user-select: none; width: 100%; } .l-item.active .l-item-tape, .l-item:hover .l-item-tape { user-select: none; opacity: 1; } .l-item-img { user-select: none; width: var(--size-90); height: var(--size-90); display: flex; justify-content: center; align-items: center; background-image: url("../imgs/item-bg-un.svg"); background-size: 100%; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 var(--size-4) var(--size-60) rgba(194, 255, 65, 0)); transition: background-image 0.4s, filter 0.4s; } .l-item-img img { user-select: none; width: 55%; } .l-item.active .l-item-img, .l-item:hover .l-item-img { user-select: none; background-image: url("../imgs/item-bg.svg"); filter: drop-shadow(0 var(--size-4) var(--size-60) rgba(194, 255, 65, 0.55)); } .l-item-top { user-select: none; color: rgba(255, 255, 255, 0.27); text-transform: uppercase; } .l-item-title { user-select: none; font-size: var(--size-20); font-weight: 800; text-transform: uppercase; } .close-btn { user-select: none; display: flex; gap: var(--size-16); align-items: center; position: relative; cursor: pointer; animation: rightSide 0.7s ease-in-out; } .cb-icon { user-select: none; width: var(--size-40); height: var(--size-40); background: linear-gradient(0deg, #ff275b 0%, rgba(182, 18, 58, 0) 100%); border: var(--size-1) solid #ff275b; box-shadow: inset 0 0 var(--size-37) #ff275b, 0 var(--size-4) var(--size-54) rgba(182, 18, 58, 0.25); display: flex; justify-content: center; align-items: center; } .cb-icon img { user-select: none; width: var(--size-20); height: var(--size-20); } .cb-title { user-select: none; text-transform: uppercase; } .cb-blur { user-select: none; width: var(--size-0); height: var(--size-60); border-radius: 50%; box-shadow: 0 0 var(--size-50) var(--size-20) #ff275b; position: absolute; right: var(--size--50); top: 0; } .right-section { user-select: none; display: flex; flex-direction: column; align-items: flex-end; } .helper { user-select: none; display: flex; flex-direction: column; gap: var(--size-12); align-items: flex-end; margin-top: var(--size-24); margin-bottom: var(--size-60); animation: rightSide 0.8s ease-in-out; } .helper div { user-select: none; display: flex; align-items: center; gap: var(--size-14); } .helper img { user-select: none; width: var(--size-14); height: var(--size-19); } .helper span { user-select: none; color: rgba(255, 255, 255, 0.6); } .progresses { user-select: none; width: var(--size-280); display: flex; flex-direction: column; gap: var(--size-25); animation: rightSide 0.9s ease-in-out; } .p-top { user-select: none; display: flex; justify-content: space-between; font-weight: 700; margin-bottom: var(--size-16); } .p-title { user-select: none; text-transform: uppercase; } .p-value { user-select: none; gap: var(--size-8); display: flex; justify-content: space-between; } .p-extra { user-select: none; color: #c2ff41; } .p-val { user-select: none; font-weight: 400; } .p-bar { user-select: none; height: var(--size-5); border: var(--size-1) solid rgba(255, 255, 255, 0.15); background: linear-gradient( 45deg, rgba(255, 255, 255, 0.084) 0%, rgba(255, 255, 255, 0) 100% ); display: flex; align-items: center; box-sizing: content-box; padding: var(--size-1); } .p-percent { user-select: none; height: var(--size-5); background: linear-gradient( 180deg, #ffffff 0%, rgba(255, 255, 255, 0.27) 100% ); border: var(--size-1) solid rgba(255, 255, 255, 0.26); } .total-price { user-select: none; width: var(--size-280); margin-top: var(--size-128); animation: rightSide 1s ease-in-out; } .tp-top { user-select: none; display: flex; justify-content: space-between; margin-bottom: var(--size-16); } .tp-price { user-select: none; font-size: var(--size-20); font-weight: 800; } .tp-btn { user-select: none; font-size: var(--size-15); text-transform: uppercase; height: var(--size-64); line-height: var(--size-64); text-align: center; background: linear-gradient(0deg, #c2ff41 0%, rgba(98, 135, 21, 0) 100%); border: var(--size-1) solid #c2ff41; box-shadow: inset 0 0 var(--size-37) #c2ff41, 0 var(--size-4) var(--size-56) rgba(98, 135, 21, 0.25); cursor: pointer; } .bottom-section { user-select: none; position: absolute; width: calc(100% - var(--size-40) * 2); overflow-x: scroll; margin: 0 auto var(--size-40); bottom: -0.85vw; left: 2vw; } @keyframes bottomSide { 0% { opacity: 0; transform: translateY(100%); } 50% { opacity: 0.5; } 100% { opacity: 1; transform: translateY(0); } } .b-items { user-select: none; display: flex; gap: var(--size-20); height: var(--size-130); } .b-item { user-select: none; flex-shrink: 0; width: var(--size-283); border: var(--size-1) solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; gap: var(--size-20); position: relative; overflow: hidden; --color: #a36bff; animation: bottomSide 0.8s ease-in-out; } .b-item.red { user-select: none; --color: #ff3566; } .b-item.green { user-select: none; --color: #ffc46b; } .b-item.gray { user-select: none; --color: #bebebe; } .b-item::before, .b-item::after { user-select: none; content: ""; display: block; background-color: var(--color); position: absolute; bottom: 0; right: 50%; transform: translate(50%); } .b-item::before { user-select: none; transition: 0.5s; width: var(--size-62); height: var(--size-4); } .b-item::after { user-select: none; width: 95%; height: var(--size-0); border-radius: 50%; bottom: var(--size--10); box-shadow: 0 0 var(--size-80) var(--size-10) var(--color); } .newwidth::before { user-select: none; width: 80%; } .b-item-img { user-select: none; width: var(--size-80); height: var(--size-80); display: flex; align-items: center; } .b-item-img img { user-select: none; width: 80%; } .b-item-tp { user-select: none; display: flex; flex-direction: column; gap: var(--size-8); } .b-item-tp-title { user-select: none; font-size: var(--size-15); } .b-item-tp-price { user-select: none; font-size: var(--size-16); font-weight: 600; padding: var(--size-4); text-align: center; background: linear-gradient(0deg, #ff9c27 0%, rgba(167, 101, 23, 0) 100%); border: var(--size-1) solid #ff9c27; box-shadow: inset 0 0 var(--size-37) #ff9c27, 0 var(--size-4) var(--size-56) rgba(98, 135, 21, 0.25); cursor: pointer; } :root { user-select: none; --size-14: 0.729vw; --size-53: 2.76vw; --size-40: 2.083vw; --size-64: 3.333vw; --size-77: 4.01vw; --size--3: -0.156vw; --size-1: 0.052vw; --size-4: 0.208vw; --size-72: 3.75vw; --size-20: 1.042vw; --size--5: -0.26vw; --size-15: 0.781vw; --size-24: 1.25vw; --size-380: 19.792vw; --size-16: 0.833vw; --size-34: 1.771vw; --size-90: 4.688vw; --size--40: -2.083vw; --size-68: 3.542vw; --size-80: 4.167vw; --size--10: -0.521vw; --size--68: -3.542vw; --size-60: 3.125vw; --size-37: 1.927vw; --size-54: 2.813vw; --size-0: 0vw; --size-50: 2.604vw; --size--50: -2.604vw; --size-12: 0.625vw; --size-19: 0.99vw; --size-280: 14.583vw; --size-25: 1.302vw; --size-8: 0.417vw; --size-5: 0.26vw; --size-128: 6.667vw; --size-56: 2.917vw; --size-130: 6.771vw; --size-283: 14.74vw; --size-62: 3.229vw; --size-10: 0.521vw; }