* { 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; left: 0; width: 21.9792vw; height: 100%; 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; color: rgba(255, 255, 255, 0.75); } .left_block { gap: 0; } .ctg_btn { height: 1.9792vw; padding: 0.156vw 0.573vw; background: rgba(255, 255, 255, 0.05); border-radius: 0.1563vw; gap: 0.2604vw; font-size: 0.7292vw; font-family: 'Medium'; letter-spacing: -0.03em; cursor: pointer; } .ctg_btn svg { width: 0.7292vw; height: 0.7292vw; } .ctg_btn:hover:not(.selected_category) { background: rgba(0, 0, 0, 0.45); transform: translateY(0.1vw); } .selected_category { border: 0.052vw solid #b8e7ff; border-radius: 0.156vw; font-family: 'SemiBold'; background: linear-gradient(180deg, #b8e7ff 0%, #6e8b99 100%); color: #10161A; } .overflow_categorys { width: 100%; height: 2.5958vw; overflow-x: hidden; overflow-x: auto; } .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); margin-right: auto; } .flex_wrap { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.625vw; } .selected_category svg path { stroke: #10161A; } .selected_category span { color: #10161A !important; } .ctg_btn:active { opacity: 0.65; } .input_box { position: relative; width: 8.8542vw; } .inpt { height: 1.979vw; width: 100%; background: rgba(0, 0, 0, 0.35); border: none; outline: none; padding-left: 1.7188vw; font-size: 0.7292vw; border-radius: 0.1563vw; font-family: 'Regular'; letter-spacing: -0.03em; color: white; padding-right: 0.625vw; } .inpt:focus { background: rgba(0, 0, 0, 0.45); } .inpt::placeholder { transition: all 0.3s ease; color: rgba(255, 255, 255, 0.75); } .inpt:focus::placeholder { color: rgba(255, 255, 255, 0); } .input_box svg { position: absolute; width: 0.8333vw; margin-left: 0.5729vw; } .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; } .flex_functions { gap: 0; margin-left: 0; } .right_block { gap: 1.6667vw; } .overflow_categorys { gap: 0.4167vw; } .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; } .flex_functions { margin-top: 0.4333vw; } .input_box { margin-top: 0.625vw; } .header_cart { height: 2.0313vw; border: 0.052vw solid rgba(255, 255, 255, 0.15); border-radius: 0.104vw; padding: 0.625vw; margin-top: 1.25vw; 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); } .dot { width: 0.5208vw; height: 0.5208vw; border-radius: 0.104vw; 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); } .overflow_categorys::-webkit-scrollbar { height: 0.0521vw; } .overflow_cars::-webkit-scrollbar { width: 0.0521vw; } .overflow_cars { height: 100%; overflow-y: auto; margin-top: 0.8333vw; } .r_cont { width: 16.25vw; height: auto; padding: 1.25vw; background-image: url('../images/r_cont.png'); background-size: 100% 100%; border-radius: 0.833vw 0 0 0.833vw; } .head_stat { height: 1.9792vw; background: rgba(255, 255, 255, 0.05); border-radius: 0.104vw; padding: 0.469vw 0.469vw 0.469vw 0.677vw; } .l_stat span { font-size: 0.7292vw; font-family: 'Medium'; letter-spacing: -0.03em; text-shadow: 0 0 1.094vw rgba(255, 255, 255, 0.5); } .tech { height: 1.25vw; border-radius: 0.104vw; padding: 0.208vw 0.313vw; background: rgba(184, 231, 255, 0.1); font-family: 'Medium'; font-size: 0.7292vw; color: #b8e7ff; text-shadow: 0 0 0.521vw rgba(184, 231, 255, 0.45); } .lines_prog { padding: 0.4167vw; border: 0.052vw solid rgba(255, 255, 255, 0.15); border-radius: 0.104vw; } .noval { height: 0.8854vw; background-image: url('../images/noval.png'); background-size: 100%; } .val { height: 100%; width: 75%; filter: drop-shadow(0 0.156vw 0.729vw rgba(184, 231, 255, 0.45)); overflow: hidden; } .wrap_stat { gap: 0.4167vw; } .cont_stats { gap: 0.8333vw; } .colorpannel { gap: 0.4167vw; } .r_cont { position: absolute; right: 0; } .color { cursor: pointer; height: 0.8854vw; width: 100%; border-radius: 0.1042vw; background: red; opacity: 0.5; } .cont_colors { gap: 0.4167vw; margin-top: 1.25vw; } .total_price { height: 2.1354vw; border: 0.052vw solid rgba(255, 255, 255, 0.15); border-radius: 0.104vw; padding: 0.469vw 0.521vw 0.469vw 0.625vw; margin-top: auto; margin-top: 1.6667vw; } .flex_buttons { gap: 0.625vw; margin-top: 0.325vw; } .total_price span { font-size: 0.7292vw; font-family: 'Medium'; letter-spacing: -0.03em; text-shadow: 0 0 1.094vw rgba(255, 255, 255, 0.25); } .total_price .price { margin-right: 0; } .color:hover { opacity: 1; } .color:active { opacity: 0.75; } .selected_color { opacity: 1; } .l_stat { gap: 0.3646vw; } ::-webkit-scrollbar-thumb { background: #B8E7FF; } ::-webkit-scrollbar-thumb:active { background: rgba(255, 255, 255, 0.05); } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.15); } .box_car { cursor: pointer; transition: all 0.3s ease; width: 9.1146vw; height: 9.1146vw; border-radius: 0.3646vw; padding: 0.625vw; background-image: url('../images/box_car.png'); background-size: 100% 100%; } .box_car:hover:not(.selected_car) { background-image: url('../images/box_car_hover.png'); } .box_car:active { opacity: 0.75; } .selected_car { background-image: url('../images/selected_car.png'); } .row_car span:first-child { letter-spacing: -0.02em; font-size: 0.7292vw; text-shadow: 0 0 1.094vw rgba(255, 255, 255, 0.25); font-family: 'SemiBold'; } .row_car span:last-child { font-size: 0.7292vw; font-family: 'Regular'; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.5); } .dot_c { width: 0.4688vw; height: 0.4688vw; border-radius: 0.1042vw; border: 0.052vw solid #b8e7ff; box-shadow: 0 0.208vw 0.469vw rgba(184, 231, 255, 0.15); background: linear-gradient(180deg, #b8e7ff 0%, #7cabc3 100%); } .box_img { margin: auto; width: 4.3229vw; height: 4.3229vw; background-image: url('../images/circles.png'); background-size: 100% 100%; } .box_img img { height: 3.3333vw; } @media (min-width: 2560px) { .container { position: absolute; left: 0; width: 39.0742vh; height: 100%; 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; color: rgba(255, 255, 255, 0.75); } .left_block { gap: 0; } .ctg_btn { height: 3.5186vh; padding: 0.2773vh 1.0187vh; background: rgba(255, 255, 255, 0.05); border-radius: 0.2779vh; gap: 0.463vh; font-size: 1.2964vh; font-family: 'Medium'; letter-spacing: -0.03em; cursor: pointer; } .ctg_btn svg { width: 1.2964vh; height: 1.2964vh; } .ctg_btn:hover:not(.selected_category) { background: rgba(0, 0, 0, 0.45); transform: translateY(0.1778vh); } .selected_category { border: 0.0924vh solid #b8e7ff; border-radius: 0.2773vh; font-family: 'SemiBold'; background: linear-gradient(180deg, #b8e7ff 0%, #6e8b99 100%); color: #10161A; } .overflow_categorys { width: 100%; height: 4.6147vh; overflow-x: hidden; overflow-x: auto; } .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); margin-right: auto; } .flex_wrap { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1.1111vh; } .selected_category svg path { stroke: #10161A; } .selected_category span { color: #10161A !important; } .ctg_btn:active { opacity: 0.65; } .input_box { position: relative; width: 15.7408vh; } .inpt { height: 3.5182vh; width: 100%; background: rgba(0, 0, 0, 0.35); border: none; outline: none; padding-left: 3.0556vh; font-size: 1.2964vh; border-radius: 0.2779vh; font-family: 'Regular'; letter-spacing: -0.03em; color: white; padding-right: 1.1111vh; } .inpt:focus { background: rgba(0, 0, 0, 0.45); } .inpt::placeholder { transition: all 0.3s ease; color: rgba(255, 255, 255, 0.75); } .inpt:focus::placeholder { color: rgba(255, 255, 255, 0); } .input_box svg { position: absolute; width: 1.4814vh; margin-left: 1.0185vh; } .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; } .flex_functions { gap: 0; margin-left: 0; } .right_block { gap: 2.9631vh; } .overflow_categorys { gap: 0.7408vh; } .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; } .flex_functions { margin-top: 0.7703vh; } .input_box { margin-top: 1.1111vh; } .header_cart { height: 3.6112vh; border: 0.0924vh solid rgba(255, 255, 255, 0.15); border-radius: 0.1849vh; padding: 1.1111vh; margin-top: 2.2222vh; 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); } .dot { width: 0.9258vh; height: 0.9258vh; border-radius: 0.1849vh; 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); } .overflow_categorys::-webkit-scrollbar { height: 0.0926vh; } .overflow_cars::-webkit-scrollbar { width: 0.0926vh; } .overflow_cars { height: 100%; overflow-y: auto; margin-top: 1.4814vh; } .r_cont { width: 28.8889vh; height: auto; padding: 2.2222vh; background-image: url('../images/r_cont.png'); background-size: 100% 100%; border-radius: 1.4809vh 0 0 1.4809vh; } .head_stat { height: 3.5186vh; background: rgba(255, 255, 255, 0.05); border-radius: 0.1849vh; padding: 0.8338vh 0.8338vh 0.8338vh 1.2035vh; } .l_stat span { font-size: 1.2964vh; font-family: 'Medium'; letter-spacing: -0.03em; text-shadow: 0 0 1.9449vh rgba(255, 255, 255, 0.5); } .tech { height: 2.2222vh; border-radius: 0.1849vh; padding: 0.3698vh 0.5565vh; background: rgba(184, 231, 255, 0.1); font-family: 'Medium'; font-size: 1.2964vh; color: #b8e7ff; text-shadow: 0 0 0.9262vh rgba(184, 231, 255, 0.45); } .lines_prog { padding: 0.7408vh; border: 0.0924vh solid rgba(255, 255, 255, 0.15); border-radius: 0.1849vh; } .noval { height: 1.5741vh; background-image: url('../images/noval.png'); background-size: 100%; } .val { height: 100%; width: 75%; filter: drop-shadow(0 0.2773vh 1.296vh rgba(184, 231, 255, 0.45)); overflow: hidden; } .wrap_stat { gap: 0.7408vh; } .cont_stats { gap: 1.4814vh; } .colorpannel { gap: 0.7408vh; } .r_cont { position: absolute; right: 0; } .color { cursor: pointer; height: 1.5741vh; width: 100%; border-radius: 0.1853vh; background: red; opacity: 0.5; } .cont_colors { gap: 0.7408vh; margin-top: 2.2222vh; } .total_price { height: 3.7963vh; border: 0.0924vh solid rgba(255, 255, 255, 0.15); border-radius: 0.1849vh; padding: 0.8338vh 0.9262vh 0.8338vh 1.1111vh; margin-top: auto; margin-top: 2.9631vh; } .flex_buttons { gap: 1.1111vh; margin-top: 0.5778vh; } .total_price span { font-size: 1.2964vh; font-family: 'Medium'; letter-spacing: -0.03em; text-shadow: 0 0 1.9449vh rgba(255, 255, 255, 0.25); } .total_price .price { margin-right: 0; } .color:hover { opacity: 1; } .color:active { opacity: 0.75; } .selected_color { opacity: 1; } .l_stat { gap: 0.6481vh; } ::-webkit-scrollbar-thumb { background: #B8E7FF; } ::-webkit-scrollbar-thumb:active { background: rgba(255, 255, 255, 0.05); } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.15); } .box_car { cursor: pointer; transition: all 0.3s ease; width: 16.2037vh; height: 16.2037vh; border-radius: 0.6481vh; padding: 1.1111vh; background-image: url('../images/box_car.png'); background-size: 100% 100%; } .box_car:hover:not(.selected_car) { background-image: url('../images/box_car_hover.png'); } .box_car:active { opacity: 0.75; } .selected_car { background-image: url('../images/selected_car.png'); } .row_car span:first-child { letter-spacing: -0.02em; font-size: 1.2964vh; text-shadow: 0 0 1.9449vh rgba(255, 255, 255, 0.25); font-family: 'SemiBold'; } .row_car span:last-child { font-size: 1.2964vh; font-family: 'Regular'; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.5); } .dot_c { width: 0.8334vh; height: 0.8334vh; border-radius: 0.1853vh; border: 0.0924vh solid #b8e7ff; box-shadow: 0 0.3698vh 0.8338vh rgba(184, 231, 255, 0.15); background: linear-gradient(180deg, #b8e7ff 0%, #7cabc3 100%); } .box_img { margin: auto; width: 7.6852vh; height: 7.6852vh; background-image: url('../images/circles.png'); background-size: 100% 100%; } .box_img img { height: 5.9258vh; } } 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; }