592 lines
12 KiB
CSS
592 lines
12 KiB
CSS
@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;
|
|
}
|