* { margin: 0px; padding: 0px; box-sizing: border-box; user-select: none; } body, html { position: relative; height: 100%; width: 100%; font-size: 0.7292vw; overflow: hidden; color: white; scroll-behavior: smooth; } .form { position: relative; display: none; align-items: center; justify-content: center; width: 100vw; height: 100vh; } span, div:not(.form), img, svg, path, input { transition: all 0.3s ease; } button { transition: all 0.3s ease; } .fade-in { } .fade-out { } button { color: white; } .container { position: relative; width: 42.8125vw; height: 39.9479vw; background-image: url('../images/bg.png'); border-radius: 0.625vw; padding: 1.25vw; background-size: 100% 100%; overflow: hidden; } .icon_hd { margin-top: -0.3646vw; margin-left: -0.3646vw; width: 2.8125vw; height: 2.8125vw; background-image: url('../images/tringle.png'); background-size: 100% 100%; filter: drop-shadow(0 0.208vw 0.898vw rgba(244, 0, 0, 0.95)); } .icon_hd svg { width: 0.8854vw; height: 0.8854vw; } .left_block { gap: 0.0521vw; } .flex_hd span:first-child { font-size: 2.2917vw; font-family: 'AgencyB'; letter-spacing: -0.03em; text-shadow: 0 0 2.135vw rgba(255, 255, 255, 0.25); } .flex_hd span:last-child { margin-left: -0.7583vw; width: 4.2708vw; height: 2.6563vw; margin-top: 0.1vw; background-image: url('../images/city_text.png'); background-size: 100% 100%; filter: drop-shadow(0 0 0.835vw rgba(244, 0, 0, 0.85)); } .name_ui { margin-top: 0.1563vw; font-size: 1.0313vw; font-family: 'AgencyR'; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.2VW; } .flex_hd { height: 1.9479vw; } .dscr_blnc { font-size: 0.7292vw; font-family: 'Regular'; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.5); } .flex_balance span { font-size: 0.7292vw; font-family: 'SemiBold'; text-shadow: 0 0 1.667vw rgba(255, 255, 255, 0.25); } .row_balance { align-items: flex-end; text-align: right; } .pm_btn { width: 1.0938vw; height: 1.0938vw; background-image: url('../images/pm.png'); background-size: 100% 100%; border-radius: 0.1042vw; cursor: pointer; box-shadow: 0 0.208vw 1.094vw rgba(244, 0, 0, 0.25); } .pm_btn svg { width: 0.8333vw; height: 0.8333vw; } .right_header { gap: 1.25vw; margin-left: auto; } .flex_inpt { position: absolute; gap: 0.5208vw; margin-left: 0.4688vw; } .flex_inpt svg { width: 0.7813vw; height: 0.7813vw; } .flex_inpt .line_c { width: 0.1042vw; height: 0.625vw; } .input_box { margin-left: 1.0417vw; } .input_box .inpt { width: 11.5104vw; text-align: left; padding-left: 2.1875vw; padding-right: 0.625vw; background: rgba(0, 0, 0, 0.39); border: none; } .input_box .inpt:hover { background: rgba(0, 0, 0, 0.39); } .input_box .inpt:focus { border: none; background: rgba(0, 0, 0, 0.39); } .pm_btn:hover { transform: translateY(0.1vw); box-shadow: 0 0.208vw 1.094vw rgba(244, 0, 0, 0.5); } .coins_balance { gap: 0.5208vw; } .pm_btn:active { opacity: 0.75; } .flex_balance img { width: 0.8854vw; height: 0.8854vw; } .flex_balance { gap: 0.2604vw; } .coins_balance .line_c { width: 0.1042vw; height: 0.625vw; } .header { align-items: flex-start; } .close_pannel { height: 1.4063vw; border-radius: 0.156vw; padding: 0.156vw 0.156vw 0.156vw 0.313vw; background: rgba(255, 59, 59, 0.11); gap: 0.2604vw; } .close_box { width: 1.0938vw; height: 1.0938vw; background-image: url('../images/close_box.png'); background-size: 100% 100%; border-radius: 0.1042vw; box-shadow: 0 0.208vw 0.625vw rgba(147, 0, 0, 0.15); } .close_pannel span { font-size: 0.7292vw; font-family: 'Medium'; color: #930000; letter-spacing: -0.03em; text-shadow: 0 0 0.833vw rgba(147, 0, 0, 0.25); } .info_block { gap: 0.3125vw; width: 18.3958vw; margin-top: 0.5208vw; } .info_block svg { width: 0.8333vw; height: 0.8333vw; flex-shrink: 0; } .info_block span { font-size: 0.7292vw; font-family: 'Regular'; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.65); } .category { cursor: pointer; width: 4.688vw; height: 5.4688vw; gap: 0.8333vw; border-radius: 0.1563vw; background-image: url('../images/category.png'); background-size: 100% 100%; } .category:hover:not(.selected) { transform: translateY(0.1vw); background-image: url('../images/category_hover.png'); } .category:active { opacity: 0.75; } .selected { background-image: url('../images/selected.png'); box-shadow: 0 -0.469vw 2.031vw rgba(244, 0, 0, 0.15); } .category svg { width: 1.3542vw; height: 1.3542vw; } .category span { letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.75); font-size: 0.7813vw; font-family: 'Medium'; } .row_category { gap: 0.2604vw; } .selected svg path { fill: #f40000; fill-opacity: 1; } .selected span { color: white; text-shadow: 0 0 0.833vw rgba(255, 255, 255, 0.25); } .selected .line { background: #f40000; } .line { width: 0.7292vw; height: 0.1042vw; border-radius: 0.1042vw; background: rgba(255, 255, 255, 0.25); } .categorys { gap: 0.625vw; } .box_ctg { position: relative; width: 16.9792vw; height: 14.5052vw; background-image: url('../images/box_ctg.png'); background-size: 100% 100%; padding: 0.625vw; overflow: hidden; } .box_ctg::before { position: absolute; top: 0; left: 0; background-image: url('../images/bg_box_ctg.png'); background-size: 100% 100%; mix-blend-mode: overlay; width: 100%; height: 100%; content: ""; } .box_ctg:hover { background-image: url('../images/box_ctg_hover.png'); } .header_ctg { position: relative; height: 2.3438vw; width: 100%; border-radius: 0.156vw; padding: 0.313vw; border-radius: 0.156vw; background: rgba(0, 0, 0, 0.35); } .min_box { width: 1.1979vw; height: 1.1979vw; background-image: url('../images/min_box.png'); background-size: 100% 100%; border-radius: 0.1042vw; flex-shrink: 0; box-shadow: 0 0.26vw 1.042vw rgba(244, 0, 0, 0.35); } .min_box svg { width: 0.8333vw; height: 0.8333vw; } .row_ctg span:first-child { font-size: 0.7813vw; font-family: 'SemiBold'; letter-spacing: -0.01em; text-shadow: 0 0 1.25vw rgba(255, 255, 255, 0.25); } .row_ctg span:last-child { font-size: 0.7292vw; font-family: 'Regular'; letter-spacing: -0.02em; margin-top: -0.1042vw; color: rgba(255, 255, 255, 0.5); } .l_ctg { gap: 0.4167vw; } .line_c { width: 0.625vw; height: 0.1042vw; background: #f40000; border-radius: 0.1042vw; box-shadow: 0 0.104vw 0.885vw rgba(244, 0, 0, 0.75); } .button_open { position: relative; height: 1.9792vw; width: 6.4583vw; gap: 0.2344vw; cursor: pointer; margin-left: auto; border-radius: 2.8125vw; box-shadow: 0 0.469vw 1.406vw rgba(244, 0, 0, 0.25); background: #f40000; } .button_open:hover { transform: translateY(0.1vw); box-shadow: 0 0.469vw 1.406vw rgba(244, 0, 0, 0.5); } .button_open:active { opacity: 0.75; } .button_open svg { width: 0.8854vw; height: 0.8854vw; } .button_open span { font-size: 0.7813vw; font-family: 'SemiBold'; } .pic_ban { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .box_ctg:hover .pic_ban { transform: scale(1.02); } .main_cont { margin-top: auto; } .main_page { display: flex; flex-direction: row; gap: 0.8333vw; flex-wrap: wrap; } .flex_wrap { gap: 0.625vw; } .box_it { position: relative; width: 10.9807vw; height: 11.4583vw; background-image: url('../images/box_it.png'); background-size: 100% 100%; border-radius: 0.1563vw; padding: 0.625vw; overflow: hidden; } .flex_wrap { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.625vw; } .box_it:hover { background-image: url('../images/box_it_hv.png'); } .box_it:hover .box_pic img { transform: scale(1.05); } .row_it span:first-child { font-size: 0.7813vw; font-family: 'SemiBold'; letter-spacing: -0.02em; text-shadow: 0 0 1.25vw rgba(255, 255, 255, 0.25); } .row_it span:last-child { font-size: 0.7292vw; font-family: 'Regular'; color: rgba(255, 255, 255, 0.5); } .price, .ammount_coins_tranaction { height: 1.25vw; border-radius: 0.104vw; padding: 0.156vw 0.208vw; gap: 0.1963vw; background: rgba(244, 0, 0, 0.15); margin-right: auto; } .h_it { gap: 0.4167vw; } .price img, .ammount_coins_tranaction img { width: 0.8854vw; height: 0.8854vw; border-radius: 100%; box-shadow: 0 0.208vw 0.625vw rgba(244, 0, 0, 0.25); } .price span, .ammount_coins_tranaction span { font-size: 0.7813vw; font-family: 'SemiBold'; color: #f40000; letter-spacing: -0.02em; text-shadow: 0 0 1.302vw rgba(244, 0, 0, 0.45); } .box_pic { position: absolute; right: -0vw; bottom: 2.6563vw; width: 6.1495vw; height: 6.1495vw; background-image: url('../images/tring.png'); background-size: 100% 100%; } .box_pic img { height: 4.5313vw; } .button { cursor: pointer; gap: 0.207vw; height: 1.9792vw; border-radius: 0.1563vw; box-shadow: 0 0.469vw 1.406vw rgba(244, 0, 0, 0.25); background: #f40000; border: none; } .button:hover { transform: translateY(0.1vw); box-shadow: 0 0.469vw 1.406vw rgba(244, 0, 0, 0.55); } .button:active { opacity: 0.75; } .button span { font-size: 0.7813vw; font-family: 'SemiBold'; letter-spacing: -0.02em; } .button:hover span { color: rgba(0, 0, 0, 0.75); } .close_pannel:hover { cursor: pointer; transform: translateY(0.1vw); } .close_pannel:active { opacity: 0.75; } .button:hover svg path { fill: black; fill-opacity: 0.75; } .button svg { width: 0.8854vw; height: 0.8854vw; } ::-webkit-scrollbar { width: 0.0520833333vw; } ::-webkit-scrollbar-thumb { background: #f40000; } ::-webkit-scrollbar-thumb:active { background: rgba(255, 255, 255, 0.05); } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.15); } .limited_count { margin-right: auto; height: 1.25vw; background: rgb(255, 60, 63); border-radius: 0.1042vw; padding: 0.156vw 0.208vw; font-size: 0.7813vw; font-family: 'SemiBold'; gap: 0.1563vw; } .limited_count svg path { fill: black; fill-opacity: 0.75; } .limited_count span { color: #000000b6; } .limited_count svg { width: 0.7292vw; height: 0.7292vw; } .other_page .box_pic { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); right: auto; bottom: auto; } .box_case { width: 10.9807vw; height: 14.609vw; padding: 0.625vw; background-image: url('../images/case_bg.png'); background-size: 100% 100%; } .box_case:hover { background-image: url('../images/case_bg_hover.png'); } .box_case:hover .case_pic { transform: scale(1.05); } .case_pic { height: 4.4271vw; margin: auto; } .h_case { background-image: url('../images/h_case.png'); background-size: 100% 100%; height: 10.4688vw; border-radius: 0.156vw; padding: 1.25vw 1.667vw; } .row_case span:first-child { font-size: 2.2917vw; font-family: 'AgencyB'; letter-spacing: -0.02em; text-shadow: 0 0 3.667vw rgba(255, 255, 255, 0.15); } .row_case span:last-child { font-size: 0.7292vw; font-family: 'Regular'; width: 16.1458vw; letter-spacing: -0.062m; color: rgba(255, 255, 255, 0.65); } .r_case img { height: 4.8958vw; } .r_case .button { width: 10.4167vw; } .descr_p { height: 1.302vw; background: rgba(255, 255, 255, 0.05); border-radius: 0.0521vw; font-size: 0.7292vw; font-family: 'Regular'; color: rgba(255, 255, 255, 0.75); } .box_prize { width: 8.0492vw; height: 7.8906vw; background-size: 100% 100%; padding: 0.625vw; } .row_prize span:first-child { font-size: 0.7292vw; font-family: 'SemiBold'; text-shadow: 0 0 1.25vw rgba(255, 255, 255, 0.25); } .row_prize span:last-child { font-size: 0.7292vw; font-family: 'Regular'; color: rgba(255, 255, 255, 0.5); } .box_prize .line_c { box-shadow: none; } .box_prize img { height: 3.229vw; margin: auto; } .rare_prize { margin-right: auto; height: 1.25vw; border-radius: 0.1042vw; padding: 0.208vw 0.313vw; font-family: 'SemiBold'; color: rgba(0, 0, 0, 0.75); } .cont_prizes { gap: 0.625vw; } .process_openning { position: absolute; top: 0; width: 100%; height: 100%; left: 0; background-image: url('../images/form_ooen.png'); background-size: 100% 100%; } .common { background-image: url('../images/common.png'); } .common .line_c { background: white; } .common .rare_prize { box-shadow: 0 0.26vw 1.146vw rgba(255, 255, 255, 0.35); background: #fff; } .uncommon { background-image: url('../images/uncommon.png'); } .uncommon .line_c { background: #9FFF87; } .uncommon .rare_prize { box-shadow: 0 0.26vw 1.146vw rgba(159, 255, 135, 0.35); background: #9FFF87; } .rare { background-image: url('../images/rare.png'); } .rare .line_c { background: #FBFF87; } .rare .rare_prize { box-shadow: 0 0.26vw 1.146vw rgba(251, 255, 135, 0.35); background: #FBFF87; } .epic { background-image: url('../images/epic.png'); } .epic .line_c { background: #FF87AD; } .epic .rare_prize { box-shadow: 0 0.26vw 1.146vw rgba(255, 135, 173, 0.35); background: #FF87AD; } .mystic { background-image: url('../images/mystic.png'); } .mystic .line_c { background: #FF676A; } .row_it span:last-child:first-letter { text-transform: uppercase; } .selected svg g { opacity: 1; } .case_openpage { position: relative; } .videobg { position: absolute; object-fit: fill; height: auto; display: none; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: color-dodge; pointer-events: none; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Анимация плавного исчезновения */ @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fade-in { animation: fadeIn 0.5s; } .fade-out { animation: fadeOut 0.5s; } .mystic .rare_prize { box-shadow: 0 0.26vw 1.146vw rgba(255, 103, 106, 0.35); background: #FF676A; } .legendary { background-image: url('../images/legendary.png'); } .legendary .line_c { background: #f40000; } .legendary .rare_prize { box-shadow: 0 0.26vw 1.146vw rgba(244, 0, 0, 0.35); background: #f40000; } .overflow_prizes { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.625vw; height: 16.4063vw; } .block_f { padding: 0.625vw; background: rgba(17, 11, 6, 0.25); border-radius: 0.1042vw; } .descr_funct { font-size: 0.7292vw; font-family: 'Regular'; height: 1.3021vw; background: rgba(255, 255, 255, 0.05); margin-right: auto; display: flex; align-items: center; justify-content: center; border-radius: 0.052vw; padding: 0.208vw 0.313vw; color: rgba(255, 255, 255, 0.5); letter-spacing: -0.02em; margin-top: 0.2604vw; } .inpt { height: 1.9792vw; border: 0.052vw solid rgba(255, 255, 255, 0.15); border-radius: 0.104vw; width: 100%; text-align: center; background: none; font-size: 0.7813vw; padding-top: 0.2vw; font-family: 'Regular'; padding-left: 0.625vw; padding-right: 0.625vw; color: white; outline: none; } .close_pannel:hover { cursor: pointer; transform: translateY(0.1vw); } .close_pannel:active { opacity: 0.75; } .inpt::placeholder { transition: all 0.3s ease; color: rgba(255, 255, 255, 0.75); } .inpt:focus::placeholder { color: rgba(255, 255, 255, 0); } .inpt:hover { background: rgba(255, 255, 255, 0.05); } .inpt:focus { background: rgba(244, 0, 0, 0.05); border: 0.052vw solid rgba(244, 0, 0, 0.35); } .head_info .line_c { width: 0.1042vw; height: 0.625vw; } .head_info { gap: 0.625vw; } .row_inps .button { width: 8.2813vw; flex-shrink: 0; } .row_inps { gap: 0.4167vw; } .l_tc svg { width: 0.8333vw; height: 0.8333vw; } .l_tc span { font-size: 0.7813vw; font-family: 'Medium'; text-shadow: 0 0 0.833vw rgba(255, 255, 255, 0.25); } .l_tc { gap: 0.3646vw; } .date_active { font-size: 0.7813vw; font-family: 'Regular'; color: rgba(255, 255, 255, 0.75); margin-left: 1.25vw; } .pannel_trans { height: 2.0833vw; background: rgba(255, 255, 255, 0.05); border: 0.052vw solid rgba(255, 255, 255, 0.05); border-radius: 0.104vw; padding: 0.417vw 0.469vw; } .overflow_trans { overflow-y: auto; gap: 0.4688vw; padding-right: 0.469vw; } .transactions_page { gap: 0.625vw; } .row_inps { margin-top: 0.8333vw; } .row_hi span:first-child { font-size: 0.7292vw; font-family: 'Medium'; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.5); } .row_hi span:last-child { font-size: 0.7292vw; font-family: 'SemiBold'; margin-top: -0.0521vw; letter-spacing: -0.0em; text-shadow: 0 0 0.833vw rgba(255, 255, 255, 0.25); } .ammount_coins_tranaction { margin-left: auto; margin-right: 0; } .cars_page, .limited_page, .other_page, .cases_page, .overflow_prizes { overflow-y: auto; } .main_page, .cars_page, .limited_page, .other_page, .cases_page, .case_open_page, .transactions_page { width: 34.7917vw; height: 29.8438vw; } .soldout { pointer-events: none; } .soldout .sold_out_bg { display: flex; } .process_openning .box_prize { position: relative; height: 9.375vw; } .lines_open { position: absolute; width: 29.4271vw; height: 29.4271vw; background-image: url('../images/lines_open.png'); background-size: 100% 100%; animation: rotate360 9s linear infinite; } @keyframes rotate360 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .sold_out_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; pointer-events: none; background-image: url('../images/soldout.png'); background-size: 100% 100%; } @media (min-width: 2560px) { .container { position: relative; width: 76.1111vh; height: 71.0185vh; background-image: url('../images/bg.png'); border-radius: 1.1111vh; padding: 2.2222vh; background-size: 100% 100%; overflow: hidden; } .icon_hd { margin-top: -0.6481vh; margin-left: -0.6481vh; width: 5vh; height: 5vh; background-image: url('../images/tringle.png'); background-size: 100% 100%; filter: drop-shadow(0 0.3698vh 1.5965vh rgba(244, 0, 0, 0.95)); } .icon_hd svg { width: 1.5741vh; height: 1.5741vh; } .left_block { gap: 0.0926vh; } .flex_hd span:first-child { font-size: 4.0742vh; font-family: 'AgencyB'; letter-spacing: -0.03em; text-shadow: 0 0 3.7956vh rgba(255, 255, 255, 0.25); } .flex_hd span:last-child { margin-left: -1.3481vh; width: 7.5925vh; height: 4.7223vh; margin-top: 0.1778vh; background-image: url('../images/city_text.png'); background-size: 100% 100%; filter: drop-shadow(0 0 1.4844vh rgba(244, 0, 0, 0.85)); } .name_ui { margin-top: 0.2779vh; font-size: 1.8334vh; font-family: 'AgencyR'; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.3556vh; } .flex_hd { height: 3.463vh; } .dscr_blnc { font-size: 1.2964vh; font-family: 'Regular'; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.5); } .flex_balance span { font-size: 1.2964vh; font-family: 'SemiBold'; text-shadow: 0 0 2.9635vh rgba(255, 255, 255, 0.25); } .row_balance { align-items: flex-end; text-align: right; } .pm_btn { width: 1.9445vh; height: 1.9445vh; background-image: url('../images/pm.png'); background-size: 100% 100%; border-radius: 0.1853vh; cursor: pointer; box-shadow: 0 0.3698vh 1.9449vh rgba(244, 0, 0, 0.25); } .pm_btn svg { width: 1.4814vh; height: 1.4814vh; } .right_header { gap: 2.2222vh; margin-left: auto; } .flex_inpt { position: absolute; gap: 0.9258vh; margin-left: 0.8334vh; } .flex_inpt svg { width: 1.389vh; height: 1.389vh; } .flex_inpt .line_c { width: 0.1853vh; height: 1.1111vh; } .input_box { margin-left: 1.8519vh; } .input_box .inpt { width: 20.463vh; text-align: left; padding-left: 3.8889vh; padding-right: 1.1111vh; background: rgba(0, 0, 0, 0.39); border: none; } .input_box .inpt:hover { background: rgba(0, 0, 0, 0.39); } .input_box .inpt:focus { border: none; background: rgba(0, 0, 0, 0.39); } .pm_btn:hover { transform: translateY(0.1778vh); box-shadow: 0 0.3698vh 1.9449vh rgba(244, 0, 0, 0.5); } .coins_balance { gap: 0.9258vh; } .pm_btn:active { opacity: 0.75; } .flex_balance img { width: 1.5741vh; height: 1.5741vh; } .flex_balance { gap: 0.463vh; } .coins_balance .line_c { width: 0.1853vh; height: 1.1111vh; } .header { align-items: flex-start; } .close_pannel { height: 2.5001vh; border-radius: 0.2773vh; padding: 0.2773vh 0.2773vh 0.2773vh 0.5565vh; background: rgba(255, 59, 59, 0.11); gap: 0.463vh; } .close_box { width: 1.9445vh; height: 1.9445vh; background-image: url('../images/close_box.png'); background-size: 100% 100%; border-radius: 0.1853vh; box-shadow: 0 0.3698vh 1.1111vh rgba(147, 0, 0, 0.15); } .close_pannel span { font-size: 1.2964vh; font-family: 'Medium'; color: #930000; letter-spacing: -0.03em; text-shadow: 0 0 1.4809vh rgba(147, 0, 0, 0.25); } .info_block { gap: 0.5556vh; width: 32.7036vh; margin-top: 0.9258vh; } .info_block svg { width: 1.4814vh; height: 1.4814vh; flex-shrink: 0; } .info_block span { font-size: 1.2964vh; font-family: 'Regular'; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.65); } .category { cursor: pointer; width: 8.3343vh; height: 9.7223vh; gap: 1.4814vh; border-radius: 0.2779vh; background-image: url('../images/category.png'); background-size: 100% 100%; } .category:hover:not(.selected) { transform: translateY(0.1778vh); background-image: url('../images/category_hover.png'); } .category:active { opacity: 0.75; } .selected { background-image: url('../images/selected.png'); box-shadow: 0 -0.8338vh 3.6106vh rgba(244, 0, 0, 0.15); } .category svg { width: 2.4075vh; height: 2.4075vh; } .category span { letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.75); font-size: 1.389vh; font-family: 'Medium'; } .row_category { gap: 0.463vh; } .selected svg path { fill: #f40000; fill-opacity: 1; } .selected span { color: white; text-shadow: 0 0 1.4809vh rgba(255, 255, 255, 0.25); } .selected .line { background: #f40000; } .line { width: 1.2964vh; height: 0.1853vh; border-radius: 0.1853vh; background: rgba(255, 255, 255, 0.25); } .categorys { gap: 1.1111vh; } .box_ctg { position: relative; width: 30.1853vh; height: 25.787vh; background-image: url('../images/box_ctg.png'); background-size: 100% 100%; padding: 1.1111vh; overflow: hidden; } .box_ctg::before { position: absolute; top: 0; left: 0; background-image: url('../images/bg_box_ctg.png'); background-size: 100% 100%; mix-blend-mode: overlay; width: 100%; height: 100%; content: ""; } .box_ctg:hover { background-image: url('../images/box_ctg_hover.png'); } .header_ctg { position: relative; height: 4.1668vh; width: 100%; border-radius: 0.2773vh; padding: 0.5565vh; border-radius: 0.2773vh; background: rgba(0, 0, 0, 0.35); } .min_box { width: 2.1296vh; height: 2.1296vh; background-image: url('../images/min_box.png'); background-size: 100% 100%; border-radius: 0.1853vh; flex-shrink: 0; box-shadow: 0 0.4622vh 1.8524vh rgba(244, 0, 0, 0.35); } .min_box svg { width: 1.4814vh; height: 1.4814vh; } .row_ctg span:first-child { font-size: 1.389vh; font-family: 'SemiBold'; letter-spacing: -0.01em; text-shadow: 0 0 2.2222vh rgba(255, 255, 255, 0.25); } .row_ctg span:last-child { font-size: 1.2964vh; font-family: 'Regular'; letter-spacing: -0.02em; margin-top: -0.1853vh; color: rgba(255, 255, 255, 0.5); } .l_ctg { gap: 0.7408vh; } .line_c { width: 1.1111vh; height: 0.1853vh; background: #f40000; border-radius: 0.1853vh; box-shadow: 0 0.1849vh 1.5733vh rgba(244, 0, 0, 0.75); } .button_open { position: relative; height: 3.5186vh; width: 11.4814vh; gap: 0.4167vh; cursor: pointer; margin-left: auto; border-radius: 5vh; box-shadow: 0 0.8338vh 2.4995vh rgba(244, 0, 0, 0.25); background: #f40000; } .button_open:hover { transform: translateY(0.1778vh); box-shadow: 0 0.8338vh 2.4995vh rgba(244, 0, 0, 0.5); } .button_open:active { opacity: 0.75; } .button_open svg { width: 1.5741vh; height: 1.5741vh; } .button_open span { font-size: 1.389vh; font-family: 'SemiBold'; } .pic_ban { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .box_ctg:hover .pic_ban { transform: scale(1.02); } .main_cont { margin-top: auto; } .main_page { display: flex; flex-direction: row; gap: 1.4814vh; flex-wrap: wrap; } .flex_wrap { gap: 1.1111vh; } .box_it { position: relative; width: 19.5212vh; height: 20.3703vh; background-image: url('../images/box_it.png'); background-size: 100% 100%; border-radius: 0.2779vh; padding: 1.1111vh; overflow: hidden; } .flex_wrap { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1.1111vh; } .box_it:hover { background-image: url('../images/box_it_hv.png'); } .box_it:hover .box_pic img { transform: scale(1.05); } .row_it span:first-child { font-size: 1.389vh; font-family: 'SemiBold'; letter-spacing: -0.02em; text-shadow: 0 0 2.2222vh rgba(255, 255, 255, 0.25); } .row_it span:last-child { font-size: 1.2964vh; font-family: 'Regular'; color: rgba(255, 255, 255, 0.5); } .price, .ammount_coins_tranaction { height: 2.2222vh; border-radius: 0.1849vh; padding: 0.2773vh 0.3698vh; gap: 0.349vh; background: rgba(244, 0, 0, 0.15); margin-right: auto; } .h_it { gap: 0.7408vh; } .price img, .ammount_coins_tranaction img { width: 1.5741vh; height: 1.5741vh; border-radius: 100%; box-shadow: 0 0.3698vh 1.1111vh rgba(244, 0, 0, 0.25); } .price span, .ammount_coins_tranaction span { font-size: 1.389vh; font-family: 'SemiBold'; color: #f40000; letter-spacing: -0.02em; text-shadow: 0 0 2.3146vh rgba(244, 0, 0, 0.45); } .box_pic { position: absolute; right: 0vh; bottom: 4.7223vh; width: 10.9324vh; height: 10.9324vh; background-image: url('../images/tring.png'); background-size: 100% 100%; } .box_pic img { height: 8.0556vh; } .button { cursor: pointer; gap: 0.368vh; height: 3.5186vh; border-radius: 0.2779vh; box-shadow: 0 0.8338vh 2.4995vh rgba(244, 0, 0, 0.25); background: #f40000; border: none; } .button:hover { transform: translateY(0.1778vh); box-shadow: 0 0.8338vh 2.4995vh rgba(244, 0, 0, 0.55); } .button:active { opacity: 0.75; } .button span { font-size: 1.389vh; font-family: 'SemiBold'; letter-spacing: -0.02em; } .button:hover span { color: rgba(0, 0, 0, 0.75); } .close_pannel:hover { cursor: pointer; transform: translateY(0.1778vh); } .close_pannel:active { opacity: 0.75; } .button:hover svg path { fill: black; fill-opacity: 0.75; } .button svg { width: 1.5741vh; height: 1.5741vh; } ::-webkit-scrollbar { width: 0.0926vh; } ::-webkit-scrollbar-thumb { background: #f40000; } ::-webkit-scrollbar-thumb:active { background: rgba(255, 255, 255, 0.05); } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.15); } .limited_count { margin-right: auto; height: 2.2222vh; background: rgb(255, 60, 63); border-radius: 0.1853vh; padding: 0.2773vh 0.3698vh; font-size: 1.389vh; font-family: 'SemiBold'; gap: 0.2779vh; } .limited_count svg path { fill: black; fill-opacity: 0.75; } .limited_count span { color: #000000b6; } .limited_count svg { width: 1.2964vh; height: 1.2964vh; } .other_page .box_pic { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); right: auto; bottom: auto; } .box_case { width: 19.5212vh; height: 25.9716vh; padding: 1.1111vh; background-image: url('../images/case_bg.png'); background-size: 100% 100%; } .box_case:hover { background-image: url('../images/case_bg_hover.png'); } .box_case:hover .case_pic { transform: scale(1.05); } .case_pic { height: 7.8704vh; margin: auto; } .h_case { background-image: url('../images/h_case.png'); background-size: 100% 100%; height: 18.6112vh; border-radius: 0.2773vh; padding: 2.2222vh 2.9635vh; } .row_case span:first-child { font-size: 4.0742vh; font-family: 'AgencyB'; letter-spacing: -0.02em; text-shadow: 0 0 6.5191vh rgba(255, 255, 255, 0.15); } .row_case span:last-child { font-size: 1.2964vh; font-family: 'Regular'; width: 28.7036vh; letter-spacing: -0.062m; color: rgba(255, 255, 255, 0.65); } .r_case img { height: 8.7036vh; } .r_case .button { width: 18.5186vh; } .descr_p { height: 2.3146vh; background: rgba(255, 255, 255, 0.05); border-radius: 0.0926vh; font-size: 1.2964vh; font-family: 'Regular'; color: rgba(255, 255, 255, 0.75); } .box_prize { width: 14.3097vh; height: 14.0278vh; background-size: 100% 100%; padding: 1.1111vh; } .row_prize span:first-child { font-size: 1.2964vh; font-family: 'SemiBold'; text-shadow: 0 0 2.2222vh rgba(255, 255, 255, 0.25); } .row_prize span:last-child { font-size: 1.2964vh; font-family: 'Regular'; color: rgba(255, 255, 255, 0.5); } .box_prize .line_c { box-shadow: none; } .box_prize img { height: 5.7405vh; margin: auto; } .rare_prize { margin-right: auto; height: 2.2222vh; border-radius: 0.1853vh; padding: 0.3698vh 0.5565vh; font-family: 'SemiBold'; color: rgba(0, 0, 0, 0.75); } .cont_prizes { gap: 1.1111vh; } .process_openning { position: absolute; top: 0; width: 100%; height: 100%; left: 0; background-image: url('../images/form_ooen.png'); background-size: 100% 100%; } .common { background-image: url('../images/common.png'); } .common .line_c { background: white; } .common .rare_prize { box-shadow: 0 0.4622vh 2.0373vh rgba(255, 255, 255, 0.35); background: #fff; } .uncommon { background-image: url('../images/uncommon.png'); } .uncommon .line_c { background: #9FFF87; } .uncommon .rare_prize { box-shadow: 0 0.4622vh 2.0373vh rgba(159, 255, 135, 0.35); background: #9FFF87; } .rare { background-image: url('../images/rare.png'); } .rare .line_c { background: #FBFF87; } .rare .rare_prize { box-shadow: 0 0.4622vh 2.0373vh rgba(251, 255, 135, 0.35); background: #FBFF87; } .epic { background-image: url('../images/epic.png'); } .epic .line_c { background: #FF87AD; } .epic .rare_prize { box-shadow: 0 0.4622vh 2.0373vh rgba(255, 135, 173, 0.35); background: #FF87AD; } .mystic { background-image: url('../images/mystic.png'); } .mystic .line_c { background: #FF676A; } .row_it span:last-child:first-letter { text-transform: uppercase; } .selected svg g { opacity: 1; } .case_openpage { position: relative; } .videobg { position: absolute; object-fit: fill; height: auto; display: none; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: color-dodge; pointer-events: none; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Анимация плавного исчезновения */ @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fade-in { animation: fadeIn 0.5s; } .fade-out { animation: fadeOut 0.5s; } .mystic .rare_prize { box-shadow: 0 0.4622vh 2.0373vh rgba(255, 103, 106, 0.35); background: #FF676A; } .legendary { background-image: url('../images/legendary.png'); } .legendary .line_c { background: #f40000; } .legendary .rare_prize { box-shadow: 0 0.4622vh 2.0373vh rgba(244, 0, 0, 0.35); background: #f40000; } .overflow_prizes { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1.1111vh; height: 29.1668vh; } .block_f { padding: 1.1111vh; background: rgba(17, 11, 6, 0.25); border-radius: 0.1853vh; } .descr_funct { font-size: 1.2964vh; font-family: 'Regular'; height: 2.3148vh; background: rgba(255, 255, 255, 0.05); margin-right: auto; display: flex; align-items: center; justify-content: center; border-radius: 0.0924vh; padding: 0.3698vh 0.5565vh; color: rgba(255, 255, 255, 0.5); letter-spacing: -0.02em; margin-top: 0.463vh; } .inpt { height: 3.5186vh; border: 0.0924vh solid rgba(255, 255, 255, 0.15); border-radius: 0.1849vh; width: 100%; text-align: center; background: none; font-size: 1.389vh; padding-top: 0.3556vh; font-family: 'Regular'; padding-left: 1.1111vh; padding-right: 1.1111vh; color: white; outline: none; } .close_pannel:hover { cursor: pointer; transform: translateY(0.1778vh); } .close_pannel:active { opacity: 0.75; } .inpt::placeholder { transition: all 0.3s ease; color: rgba(255, 255, 255, 0.75); } .inpt:focus::placeholder { color: rgba(255, 255, 255, 0); } .inpt:hover { background: rgba(255, 255, 255, 0.05); } .inpt:focus { background: rgba(244, 0, 0, 0.05); border: 0.0924vh solid rgba(244, 0, 0, 0.35); } .head_info .line_c { width: 0.1853vh; height: 1.1111vh; } .head_info { gap: 1.1111vh; } .row_inps .button { width: 14.7223vh; flex-shrink: 0; } .row_inps { gap: 0.7408vh; } .l_tc svg { width: 1.4814vh; height: 1.4814vh; } .l_tc span { font-size: 1.389vh; font-family: 'Medium'; text-shadow: 0 0 1.4809vh rgba(255, 255, 255, 0.25); } .l_tc { gap: 0.6481vh; } .date_active { font-size: 1.389vh; font-family: 'Regular'; color: rgba(255, 255, 255, 0.75); margin-left: 2.2222vh; } .pannel_trans { height: 3.7036vh; background: rgba(255, 255, 255, 0.05); border: 0.0924vh solid rgba(255, 255, 255, 0.05); border-radius: 0.1849vh; padding: 0.7413vh 0.8338vh; } .overflow_trans { overflow-y: auto; gap: 0.8334vh; padding-right: 0.8338vh; } .transactions_page { gap: 1.1111vh; } .row_inps { margin-top: 1.4814vh; } .row_hi span:first-child { font-size: 1.2964vh; font-family: 'Medium'; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.5); } .row_hi span:last-child { font-size: 1.2964vh; font-family: 'SemiBold'; margin-top: -0.0926vh; letter-spacing: -0.0em; text-shadow: 0 0 1.4809vh rgba(255, 255, 255, 0.25); } .ammount_coins_tranaction { margin-left: auto; margin-right: 0; } .cars_page, .limited_page, .other_page, .cases_page, .overflow_prizes { overflow-y: auto; } .main_page, .cars_page, .limited_page, .other_page, .cases_page, .case_open_page, .transactions_page { width: 61.8519vh; height: 53.0556vh; } .soldout { pointer-events: none; } .soldout .sold_out_bg { display: flex; } .process_openning .box_prize { position: relative; height: 16.6667vh; } .lines_open { position: absolute; width: 52.3148vh; height: 52.3148vh; background-image: url('../images/lines_open.png'); background-size: 100% 100%; animation: rotate360 9s linear infinite; } @keyframes rotate360 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .sold_out_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; pointer-events: none; background-image: url('../images/soldout.png'); background-size: 100% 100%; } } img { pointer-events: none; } .rev { flex-direction: row-reverse; } .flex { display: flex; } .clmn { display: flex; flex-direction: column; } .alcn { display: flex; align-items: center; } .jlcn { display: flex; align-items: center; justify-content: center; } .space { justify-content: space-between; } .w100 { width: 100%; } .h100 { height: 100%; }