* { margin: 0px; padding: 0px; box-sizing: border-box; user-select: none; } body, html { position: relative; height: 100%; width: 100%; font-size: 0.83333vw; overflow: hidden; color: white; } .form { position: relative; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; } span, div:not(.form), img, svg, path, input { transition: all 0.3s ease; } .container { position: absolute; width: 36.4583vw; height: 24.5313vw; border-radius: 0 0.833vw 0.833vw 0; padding: 1.25vw; background-image: url('../images/bg.png'); background-size: 100% 100%; } .min_box { width: 1.3021vw; height: 1.3021vw; border-radius: 0.1563vw; background-image: url('../images/min_box.png'); background-size: 100% 100%; } .min_box svg { width: 0.8333vw; } .name_ui span { font-size: 1.6667vw; font-family: 'Bold'; letter-spacing: -0.06em; text-shadow: 0 0 1.771vw rgba(255, 255, 255, 0.45); } .name_ui { gap: 0.4167vw; } .short_description { font-size: 0.7292vw; font-family: 'REGULAR'; line-height: 107%; width: 12.7604vw; letter-spacing: -0.03em; margin-left: 0.4167vw; color: rgba(255, 255, 255, 0.75); } .left_block { gap: 0; } .esc_btn { height: 1.1979vw; width: 2.5057vw; gap: 0.2083vw; background: rgba(255, 95, 97, 0.1); border-radius: 0.1042vw; font-size: 0.7292vw; font-family: 'Regular'; color: #ff5f61; text-shadow: 0 0 0.381vw rgba(255, 95, 97, 0.75); } .esc_btn svg { width: 0.469vw; height: 0.469vw; } .button { height: 1.9792vw; font-size: 0.7292vw; font-family: 'SemiBold'; letter-spacing: -0.07em; gap: 0.2604vw; cursor: pointer; transition: all 0.3s ease; color: rgba(16, 22, 26, 0.75); border: 0.052vw solid #b8e7ff; border-radius: 0.156vw; box-shadow: 0 0.417vw 1.719vw rgba(184, 231, 255, 0.15); background: linear-gradient(180deg, #b8e7ff 0%, #6e8b99 100%); } .button:hover { transform: translateY(0.1vw); box-shadow: 0 0.417vw 1.719vw rgba(184, 231, 255, 0.35); } .button:active { opacity: 0.75; } .button svg { width: 0.8333vw; height: 0.8333vw; } .bank_card { width: 14.4271vw; height: 10.1042vw; background-image: url('../images/bank_card.png'); background-size: 100% 100%; border-radius: 0.3646vw; padding: 0.625vw; flex-shrink: 0; } .dot { width: 0.5208vw; height: 0.5208vw; border-radius: 0.1042vw; border: 0.052vw solid #b8e7ff; box-shadow: 0 0.156vw 0.573vw rgba(184, 231, 255, 0.25); background: rgba(184, 231, 255, 0.75); } .dscr_card { font-size: 0.7292vw; font-family: 'SemiBold'; letter-spacing: -0.03em; margin-left: 0.3125vw; text-shadow: 0 0 1.094vw rgba(255, 255, 255, 0.25); } .name_card { height: 1.0938vw; border-radius: 0.1042vw; padding: 0.208vw 0.26vw; box-shadow: 0 0.156vw 1.302vw rgba(184, 231, 255, 0.25); background: #b8e7ff; margin-left: auto; } .name_card span { color: rgba(0, 0, 0, 0.75); letter-spacing: -0.02em; font-family: 'Bold'; font-size: 0.625vw; } .name_card svg { width: 0.7292vw; height: 0.7292vw; } .row_balance span:first-child { font-size: 0.7292vw; font-family: 'Regular'; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.5); } .row_balance span:last-child { font-size: 1.0417vw; font-family: 'Bold'; letter-spacing: -0.03em; } .num_card { font-size: 0.7292vw; font-family: 'Regular'; letter-spacing: 0.29em; color: rgba(255, 255, 255, 0.5); } .row_crd { justify-content: center; border-radius: 0.104vw; padding: 0.26vw 0.417vw; background: rgba(184, 231, 255, 0.05); } .row_crd span:first-child { font-size: 0.625vw; font-family: 'Regular'; color: rgba(255, 255, 255, 0.5); } .row_crd span:last-child { font-size: 0.6771vw; font-family: 'SemiBold'; letter-spacing: -0.03em; text-shadow: 0 0 1.094vw rgba(255, 255, 255, 0.25); } .header_card { height: 1.9271vw; background: rgba(0, 0, 0, 0.35); border-radius: 0.104vw; padding: 0.417vw 0.521vw; } .flex_info { gap: 0.4167vw; } .header_cart { height: 2.0313vw; border: 0.052vw solid rgba(255, 255, 255, 0.15); border-radius: 0.104vw; padding: 0.625vw; gap: 0.3646vw; } .header_cart span { font-size: 0.7292vw; font-family: 'Medium'; letter-spacing: -0.04em; text-shadow: 0 0 1.094vw rgba(255, 255, 255, 0.25); } .pannel_trans { width: 100%; height: 2.3438vw; background-image: url('../images/pannel.png'); background-size: 100% 100%; border-radius: 0.208vw; padding: 0.417vw 0.469vw 0.417vw 0.625vw; } .min_box_trans { width: 1.1979vw; height: 1.1979vw; border-radius: 0.1042vw; background-image: url('../images/min_box.png'); background-size: 100% 100%; } .min_box_trans svg { width: 0.8854vw; height: 0.8854vw; } .row_trans { margin-left: 0.4167vw; } .row_trans span:first-child { font-size: 0.6771vw; font-family: 'SemiBold'; letter-spacing: -0.03em; text-shadow: 0 0 1.094vw rgba(255, 255, 255, 0.25); } .row_trans span:last-child { font-size: 0.6771vw; font-family: 'Regular'; margin-top: -0.0521vw; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.5); } .price { margin-left: auto; } .overflow_trans { height: 100%; overflow-y: auto; } .overflow_trans::-webkit-scrollbar { display: none; } .overflow_trans { gap: 0.4167vw; margin-top: 0.625vw; } .flex_cont { gap: 0.8333vw; height: 10.1042vw; } .inpt { width: 100%; height: 1.9792vw; text-align: center; background: none; border: none; font-size: 0.7292vw; font-family: 'Medium'; outline: none; background-image: url('../images/input.png'); background-size: 100% 100%; padding-left: 0.625vw; padding-right: 0.625vw; color: white; } .wrap_funct { gap: 0.8333vw; } .flex_hdf { gap: 0.3646vw; } .flex_hdf span { font-size: 0.7292vw; font-family: 'SemiBold'; } .inpt::placeholder { transition: all 0.3s ease; color: rgba(255, 255, 255, 0.75); } .flex_cont_second { gap: 0.8333vw; } .inpt:hover { background-image: url('../images/input_hover.png'); } .inpt:focus { background-image: url('../images/input_focus.png'); } .row_funct { gap: 0.625vw; } .flex_inps { gap: 0.625vw; } .main_cont { gap: 1.25vw; } .flex_inps .inpt { background-image: url('../images/inpt_miti.png'); } .flex_inps .inpt:hover { background-image: url('../images/inpt_mini_hover.png'); } .flex_inps .inpt:focus { background-image: url('../images/inpt_mini_focus.png'); } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } .price { height: 1.1979vw; border: 0.052vw solid #d4ff5f; border-radius: 0.104vw; box-shadow: 0 0.208vw 1.146vw rgba(212, 255, 95, 0.35); background: linear-gradient(180deg, #d4ff5f 0%, #7f9939 100%); padding: 0.208vw 0.26vw; font-size: 0.7292vw; font-family: 'SemiBold'; letter-spacing: -0.04em; color: rgba(0, 0, 0, 0.75); } @media (min-width: 2560px) { .container { position: absolute; width: 64.8147vh; height: 43.6112vh; border-radius: 0 1.4809vh 1.4809vh 0; padding: 2.2222vh; background-image: url('../images/bg.png'); background-size: 100% 100%; } .min_box { width: 2.3148vh; height: 2.3148vh; border-radius: 0.2779vh; background-image: url('../images/min_box.png'); background-size: 100% 100%; } .min_box svg { width: 1.4814vh; } .name_ui span { font-size: 2.9631vh; font-family: 'Bold'; letter-spacing: -0.06em; text-shadow: 0 0 3.1484vh rgba(255, 255, 255, 0.45); } .name_ui { gap: 0.7408vh; } .short_description { font-size: 1.2964vh; font-family: 'REGULAR'; line-height: 107%; width: 22.6852vh; letter-spacing: -0.03em; margin-left: 0.7408vh; color: rgba(255, 255, 255, 0.75); } .left_block { gap: 0; } .esc_btn { height: 2.1296vh; width: 4.4545vh; gap: 0.3703vh; background: rgba(255, 95, 97, 0.1); border-radius: 0.1853vh; font-size: 1.2964vh; font-family: 'Regular'; color: #ff5f61; text-shadow: 0 0 0.6773vh rgba(255, 95, 97, 0.75); } .esc_btn svg { width: 0.8338vh; height: 0.8338vh; } .button { height: 3.5186vh; font-size: 1.2964vh; font-family: 'SemiBold'; letter-spacing: -0.07em; gap: 0.463vh; cursor: pointer; transition: all 0.3s ease; color: rgba(16, 22, 26, 0.75); border: 0.0924vh solid #b8e7ff; border-radius: 0.2773vh; box-shadow: 0 0.7413vh 3.056vh rgba(184, 231, 255, 0.15); background: linear-gradient(180deg, #b8e7ff 0%, #6e8b99 100%); } .button:hover { transform: translateY(0.1778vh); box-shadow: 0 0.7413vh 3.056vh rgba(184, 231, 255, 0.35); } .button:active { opacity: 0.75; } .button svg { width: 1.4814vh; height: 1.4814vh; } .bank_card { width: 25.6481vh; height: 17.9631vh; background-image: url('../images/bank_card.png'); background-size: 100% 100%; border-radius: 0.6481vh; padding: 1.1111vh; flex-shrink: 0; } .dot { width: 0.9258vh; height: 0.9258vh; border-radius: 0.1853vh; border: 0.0924vh solid #b8e7ff; box-shadow: 0 0.2773vh 1.0187vh rgba(184, 231, 255, 0.25); background: rgba(184, 231, 255, 0.75); } .dscr_card { font-size: 1.2964vh; font-family: 'SemiBold'; letter-spacing: -0.03em; margin-left: 0.5556vh; text-shadow: 0 0 1.9449vh rgba(255, 255, 255, 0.25); } .name_card { height: 1.9445vh; border-radius: 0.1853vh; padding: 0.3698vh 0.4622vh; box-shadow: 0 0.2773vh 2.3146vh rgba(184, 231, 255, 0.25); background: #b8e7ff; margin-left: auto; } .name_card span { color: rgba(0, 0, 0, 0.75); letter-spacing: -0.02em; font-family: 'Bold'; font-size: 1.1111vh; } .name_card svg { width: 1.2964vh; height: 1.2964vh; } .row_balance span:first-child { font-size: 1.2964vh; font-family: 'Regular'; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.5); } .row_balance span:last-child { font-size: 1.8519vh; font-family: 'Bold'; letter-spacing: -0.03em; } .num_card { font-size: 1.2964vh; font-family: 'Regular'; letter-spacing: 0.29em; color: rgba(255, 255, 255, 0.5); } .row_crd { justify-content: center; border-radius: 0.1849vh; padding: 0.4622vh 0.7413vh; background: rgba(184, 231, 255, 0.05); } .row_crd span:first-child { font-size: 1.1111vh; font-family: 'Regular'; color: rgba(255, 255, 255, 0.5); } .row_crd span:last-child { font-size: 1.2037vh; font-family: 'SemiBold'; letter-spacing: -0.03em; text-shadow: 0 0 1.9449vh rgba(255, 255, 255, 0.25); } .header_card { height: 3.4259vh; background: rgba(0, 0, 0, 0.35); border-radius: 0.1849vh; padding: 0.7413vh 0.9262vh; } .flex_info { gap: 0.7408vh; } .header_cart { height: 3.6112vh; border: 0.0924vh solid rgba(255, 255, 255, 0.15); border-radius: 0.1849vh; padding: 1.1111vh; gap: 0.6481vh; } .header_cart span { font-size: 1.2964vh; font-family: 'Medium'; letter-spacing: -0.04em; text-shadow: 0 0 1.9449vh rgba(255, 255, 255, 0.25); } .pannel_trans { width: 100%; height: 4.1668vh; background-image: url('../images/pannel.png'); background-size: 100% 100%; border-radius: 0.3698vh; padding: 0.7413vh 0.8338vh 0.7413vh 1.1111vh; } .min_box_trans { width: 2.1296vh; height: 2.1296vh; border-radius: 0.1853vh; background-image: url('../images/min_box.png'); background-size: 100% 100%; } .min_box_trans svg { width: 1.5741vh; height: 1.5741vh; } .row_trans { margin-left: 0.7408vh; } .row_trans span:first-child { font-size: 1.2037vh; font-family: 'SemiBold'; letter-spacing: -0.03em; text-shadow: 0 0 1.9449vh rgba(255, 255, 255, 0.25); } .row_trans span:last-child { font-size: 1.2037vh; font-family: 'Regular'; margin-top: -0.0926vh; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.5); } .price { margin-left: auto; } .overflow_trans { height: 100%; overflow-y: auto; } .overflow_trans::-webkit-scrollbar { display: none; } .overflow_trans { gap: 0.7408vh; margin-top: 1.1111vh; } .flex_cont { gap: 1.4814vh; height: 17.9631vh; } .inpt { width: 100%; height: 3.5186vh; text-align: center; background: none; border: none; font-size: 1.2964vh; font-family: 'Medium'; outline: none; background-image: url('../images/input.png'); background-size: 100% 100%; padding-left: 1.1111vh; padding-right: 1.1111vh; color: white; } .wrap_funct { gap: 1.4814vh; } .flex_hdf { gap: 0.6481vh; } .flex_hdf span { font-size: 1.2964vh; font-family: 'SemiBold'; } .inpt::placeholder { transition: all 0.3s ease; color: rgba(255, 255, 255, 0.75); } .flex_cont_second { gap: 1.4814vh; } .inpt:hover { background-image: url('../images/input_hover.png'); } .inpt:focus { background-image: url('../images/input_focus.png'); } .row_funct { gap: 1.1111vh; } .flex_inps { gap: 1.1111vh; } .main_cont { gap: 2.2222vh; } .flex_inps .inpt { background-image: url('../images/inpt_miti.png'); } .flex_inps .inpt:hover { background-image: url('../images/inpt_mini_hover.png'); } .flex_inps .inpt:focus { background-image: url('../images/inpt_mini_focus.png'); } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } .price { height: 2.1296vh; border: 0.0924vh solid #d4ff5f; border-radius: 0.1849vh; box-shadow: 0 0.3698vh 2.0373vh rgba(212, 255, 95, 0.35); background: linear-gradient(180deg, #d4ff5f 0%, #7f9939 100%); padding: 0.3698vh 0.4622vh; font-size: 1.2964vh; font-family: 'SemiBold'; letter-spacing: -0.04em; color: rgba(0, 0, 0, 0.75); } } img { pointer-events: none; } .rev { flex-direction: row-reverse; } .h100 { height: 100%; } .space { display: flex; justify-content: space-between; } .w100 { width: 100%; } .tc { text-align: center; } .clmn { display: flex; flex-direction: column; } .flex { display: flex; } .alcn { display: flex; align-items: center; } .jlcn { display: flex; align-items: center; justify-content: center; }