/*******************************************************************************/ /********************************** ENGINE-25 **********************************/ /*******************************************************************************/ /* @import url('https://fonts.cdnfonts.com/css/sf-pro-display'); @import url('https://fonts.cdnfonts.com/css/vanthian-ragnarok'); @import url('https://fonts.cdnfonts.com/css/font-lore-cyrillic'); @import url('https://fonts.cdnfonts.com/css/bondoluo-peek'); @import url('https://fonts.cdnfonts.com/css/dollar-bill'); */ @import url('/lt/fonts/SFPRODISPLAY/SFPRODISPLAY.css'); @import url('/lt/fonts/Vanthian_Ragnarok/Vanthian_Ragnarok.css'); @import url('/lt/fonts/Phaser_Bank/Phaser_Bank.css'); @import url('/lt/fonts/FuturisXC/FuturisXC.css'); @import url('/lt/fonts/BondoluoPeek/BondoluoPeek.css'); @import url('/lt/fonts/DollarBill/DollarBill.css'); @import url('/lt/fonts/PPObjectSans/PPObjectSans-Regular.css'); @import url('/lt/assets/yandex/css/map/index.css'); :root { --font-family-basic: 'SF Pro Display', sans-serif; --font-family-coopnode: 'Phaser Bank', sans-serif; --font-family-ban: 'Vanthian Ragnarok', sans-serif; --font-family-potapoff: 'FuturisXC', sans-serif; --font-family-university: 'Bondoluo Peek', sans-serif; --font-family-dollar-bill: 'Dollar Bill', sans-serif; --font-family-pp-object-sans: 'PP Object Sans', sans-serif; --certificate-2-background-color: #FDE4D7; --certificate-2-accent-color: #805C4B; --certificate-2-border-color: #9A7563; --certificate-2-merchant-logo: #E6CCBF; --certificate-2-margin: 18px; --font-size: 18px; --font-size-legal: 12px; --title-font-size: 25px; --title-potapoff-font-size: 45px; --title-university-font-size: 13px; --subtitle-font-size: 22px; --bottom-menu-font-size: 11px; --profile-title-font-size: 15px; --profile-input-font-size: 25px; --wallet-text-font-size: 16px; --wallet-small-text-font-size: 14px; --wallet-little-text-font-size: 12px; --wallet-big-amount-font-size: 50px; --wallet-icon-font-size: 22px; --wallet-asset-icon-font-size: 40px; --voucher-text-font-size: 30px; --font-weight-superthin: 100; --font-weight-verythin: 200; --font-weight-thin: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-verybold: 800; --font-weight-superbold: 900; --voucher-status-serial-number-opacity: 0.2; --voucher-status-text-vendor: 35px; --voucher-text-color-valid: #0F0F; /* #0F0A; */ --voucher-text-color-invalid: #F00F; /* #F00A; */ --voucher-text-color-pending: #FF0F; /* #FF0A; */ --lt-brand-bg-color: #FFF; --pu-brand-bg-color-opacity-70: rgb(24,34,45,.7); /* sRGB */ --pu-brand-section-bg-color: rgb(24,34,45); /* sRGB */ --pu-brand-text-color: #FFF; --lt-brand-button-color: #393BC7; --lt-brand-button-text-color: #FFF; --pu-brand-header-bg-color: rgb(19,20,21); /* sRGB */ --pu-brand-section-header-text-color: rgb(177,195,213); /* sRGB */ --lt-brand-accent-text-color: #393BC7; --pu-brand-subtitle-text-color: rgb(177,195,213); /* sRGB */ --pu-brand-secondary-bg-color: rgb(19,20,21); /* sRGB */ --pu-brand-destructive-text-color: rgb(239,91,91); /* sRGB */ --lt-theme-bg-color: var(--tg-theme-bg-color, var(--lt-brand-bg-color)); --tma-theme-section-bg-color: var(--tg-theme-section-bg-color, var(--pu-brand-section-bg-color)); --tma-theme-text-color: var(--tg-theme-text-color, var(--pu-brand-text-color)); --lt-theme-button-color: var(--tg-theme-button-color, var(--lt-brand-button-color)); --lt-theme-button-text-color: var(--tg-theme-button-text-color, var(--lt-brand-button-text-color)); --tma-theme-header-bg-color: var(--tg-theme-header-bg-color, var(--pu-brand-header-bg-color)); --tma-theme-section-header-text-color: var(--tg-theme-section-header-text-color, var(--pu-brand-section-header-text-color)); --lt-theme-accent-text-color: var(--tg-theme-accent-text-color, var(--lt-brand-accent-text-color)); --tma-theme-subtitle-text-color: var(--tg-theme-subtitle-text-color, var(--pu-brand-subtitle-text-color)); --tma-theme-secondary-bg-color: var(--tg-theme-secondary-bg-color, var(--pu-brand-secondary-bg-color)); --tma-theme-destructive-text-color: var(--tg-theme-destructive-text-color, var(--pu-brand-destructive-text-color)); --button-height: 50px; --button-width: 50vw; --bottom-menu-height: 80px; --bottom-menu-ios-controller-delta: -10px; --margin: 30px; --profile-field-height: 80px; --backdrop-filter-blur: 5px; --contact-height: 150px; --lintu-mobile-screen-max-width: 450px; --lintu-margin: 16px; --lintu-between: 12px; --lintu-gap: 9px; --lintu-big-header-height: 256px; --lintu-big-header-buttons-area-height: 180px; --lintu-main-menu-height: 36px; --lintu-little-header-height-calc: calc(var(--lintu-main-menu-height) + var(--lintu-between) * 2); --lintu-little-header-height: 60px; --lintu-backdrop-filter-blur: 25px; --lintu-popup-backdrop-filter-blur: 5px; --lintu-slider-size: 25px; --lintu-slider-gap: 2px; --lintu-cart-products-images-margin: -5px; --lintu-big-header-animation-gpu-up: -68px; --lintu-big-header-animation-gpu-down: 128px; } * { margin: 0; padding: 0; } html { touch-action: none; } body { overflow: hidden; position: fixed; height: 100%; width: 100%; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ } .lintu-user-select-text { -webkit-touch-callout: text; /* iOS Safari */ -webkit-user-select: text; /* Chrome/Safari/Opera */ -khtml-user-select: text; /* Konqueror */ -moz-user-select: text; /* Firefox */ -ms-user-select: text; /* Internet Explorer/Edge */ user-select: text; /* Non-prefixed version, currently not supported by any browser */ } /*******************************************************************************/ /****************************** MAIN: DESKTOP-SCREEN ***************************/ /*******************************************************************************/ .desktop-screen { position: absolute; background-image: url(/lt/assets/images/_background.png); background-size: 8.3333333%; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .mobile-screen { background: var(--lt-theme-bg-color); position: relative; width: 100%; max-width: var(--lintu-mobile-screen-max-width); height: calc(100% + 256px); box-shadow: 0 0 100px 0 #FFF7; display: flex; flex-direction: column; justify-content: start; align-items: center; transform: translateY(128px); } /*******************************************************************************/ /************************************* INTRO ***********************************/ /*******************************************************************************/ .intro { background: var(--lt-brand-button-color); width: 100%; max-width: var(--lintu-mobile-screen-max-width); height: 100%; box-shadow: 0 0 100px 0 #FFF7; display: flex; flex-direction: column; justify-content: center; align-items: center; } .bodymovin { width: 50%; } .intro.white { background: #FFFFFF; } .bodymovin.white { width: 100%; } .chill { width:100%; height:100%; border: none; } /*******************************************************************************/ /********************************** MAKE ORDER *********************************/ /*******************************************************************************/ .make_order { background: #FFF; width: 100%; max-width: var(--lintu-mobile-screen-max-width); height: 100%; box-shadow: 0 0 100px 0 #FFF7; display: flex; flex-direction: column; justify-content: center; align-items: center; } .make_order.bodymovin { width: 70%; height: 50%; } .make_order.info { width: 100%; height: 50px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 23px; line-height: 24px; letter-spacing: -0.006em; color: #393BC7; } /*******************************************************************************/ /************************************* LOGIN ***********************************/ /*******************************************************************************/ .login { background: #FFF; width: 100%; max-width: var(--lintu-mobile-screen-max-width); height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .login-container { width: calc(100% - 16px * 2); height: calc(218px + 58px + 58px); margin-top: -80px; } .login-container-form { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; } .login-container-form-title-brand { width: 100%; height: 66px; display: flex; flex-direction: column; justify-content: start; align-items: center; } .login-container-form-title-product { font-family: var(--font-family-university); font-size: var(--title-university-font-size); color: var(--tma-theme-text-color); letter-spacing: 20px; margin-bottom: 20px; } .login-container-form-title-info { width: 90%; height: 100px; text-align: center; font-size: 22px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .login-container-form-title-description { width: 90%; height: 40px; font-size: 17px; font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .login-container-form-title-country { width: 100%; height: 24px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 17px; line-height: 24px; letter-spacing: -0.006em; color: #393BC7; display: flex; flex-direction: column; justify-content: center; align-items: center; } .login-container-form-title-country-span-error { color: #C00; } .login-container-form-title-country-name { color: #393BC7; } .login-container-form input { background: #F7F7F7; width: calc(100% - ((100% - 220px) / 2)); height: 46px; border-radius: 23px; border: 0; outline: 0; padding-left: calc((100% - 220px) / 2); text-align: left; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 23px; line-height: 24px; letter-spacing: -0.006em; color: #393BC7; display: flex; flex-direction: column; justify-content: center; align-items: center; } .login-container-form input:focus { background: #FFF; outline: 1px solid #393BC7; } .login-container-form input::-webkit-outer-spin-button, .login-container-form input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .login-container-form input[type=number] { -moz-appearance: textfield; } .login-container-form input::placeholder { color: #A4A4BA; } .login-container-form input::-ms-input-placeholder { color: #A4A4BA; } .login-container-form button { background: #F5F6FF; width: 100%; height: 46px; border-radius: calc(var(--button-height) / 2); cursor: pointer; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 23px; line-height: 24px; letter-spacing: -0.006em; color: #A4A4BA; border: none; display: flex; flex-direction: column; justify-content: center; align-items: center; } /*******************************************************************************/ /************************************ PINCODE **********************************/ /*******************************************************************************/ .pincode { background: #FFF; width: 100%; max-width: var(--lintu-mobile-screen-max-width); height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .pincode-container { width: calc(100% - 16px * 2); height: calc(218px + 70px); margin-top: -80px; } .pincode-container-form { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; } .pincode-container-form-title-brand { width: 100%; height: 66px; display: flex; flex-direction: column; justify-content: start; align-items: center; } .pincode-container-form-title-product { font-family: var(--font-family-university); font-size: var(--title-university-font-size); color: var(--tma-theme-text-color); letter-spacing: 20px; margin-bottom: 20px; } .pincode-container-form-title-info { width: 90%; height: 100px; text-align: center; font-size: 22px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .pincode-container-form-title-description { width: 90%; height: 40px; font-size: 17px; font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .pincode-container-form-title-info { width: 100%; height: 36px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 17px; line-height: 24px; letter-spacing: -0.006em; color: #393BC7; display: flex; flex-direction: column; justify-content: center; align-items: center; } .pincode-container-form-inputs { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; } .pincode-container-form input { background: #F7F7F7; width: 62px; height: 62px; border-radius: 31px; border: 0; outline: 0; text-align: center; caret-color: transparent; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 23px; line-height: 24px; letter-spacing: -0.006em; color: #393BC7; display: flex; flex-direction: column; justify-content: center; align-items: center; } .pincode-container-form input:focus { background: #FFF; outline: 1px solid #393BC7; } .pincode-container-form input::-webkit-outer-spin-button, .pincode-container-form input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pincode-container-form input[type=number] { -moz-appearance: textfield; } .pincode-container-form input::placeholder { color: #A4A4BA; } .pincode-container-form input::-ms-input-placeholder { color: #A4A4BA; } .pincode-container-form button { background: #F5F6FF; width: 100%; height: 46px; border-radius: calc(var(--button-height) / 2); cursor: pointer; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 23px; line-height: 24px; letter-spacing: -0.006em; color: #A4A4BA; border: none; display: flex; flex-direction: column; justify-content: center; align-items: center; } .pincode-container-form.active button { background-color: #393BC7; color: #FFF; } .pincode-container-form-resend { width: 100%; height: 18px; margin-top: 12px; cursor: pointer; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; text-align: center; letter-spacing: -0.011em; color: #A4A4BA; display: flex; flex-direction: row; justify-content: center; align-items: center; } .pincode-container-form-resend span { color: #393BC7; } .pincode-container-form-resend-timer-const { color: #393BC7; margin-left: 3px; } .pincode-container-form-resend-timer { width: 25px; color: #393BC7; text-align: left; } /*******************************************************************************/ /********************************** MAIN: HEADER *******************************/ /*******************************************************************************/ .big-header-container { --lintu-big-header-height-animation: calc(var(--lintu-big-header-height) - 0px); position: relative; width: 100%; height: var(--lintu-big-header-height-animation); border-radius: 0px 0px 16px 16px; } .big-header-container.promoshop { --lintu-big-header-height-animation: calc(var(--lintu-big-header-height) - 85px - 8px); height: var(--lintu-big-header-height-animation); } body.promoshopshot { --lintu-big-header-animation-gpu-up: 25px; --lintu-big-header-animation-gpu-down: 128px; } @keyframes close-header-container { 0% {height: var(--lintu-big-header-height-animation);} 100% {height: var(--lintu-little-header-height);} } @keyframes open-header-container { 0% {height: var(--lintu-little-header-height);} 100% {height: var(--lintu-big-header-height-animation);} } @keyframes close-header-container-gpu { 0% {transform: translateY(var(--lintu-big-header-animation-gpu-down));} 100% {transform: translateY(var(--lintu-big-header-animation-gpu-up));} } @keyframes open-header-container-gpu { 0% {transform: translateY(var(--lintu-big-header-animation-gpu-up));} 100% {transform: translateY(var(--lintu-big-header-animation-gpu-down));} } .big-header { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--lt-theme-button-color); border-radius: 0px 0px 16px 16px; z-index: 3; } .big-header.no-auth { background: #333; } .big-header-main-navigator-lense { background: rgba(255, 255, 255, 0.17); box-shadow: 0px 4px 19.1px rgba(193, 193, 193, 0.25); backdrop-filter: blur(var(--lintu-backdrop-filter-blur)); -webkit-backdrop-filter: blur(var(--lintu-backdrop-filter-blur)); position: absolute; width: 100%; height: calc(16px + var(--lintu-between) * 2 + var(--lintu-main-menu-height)); bottom: calc(0px - var(--lintu-main-menu-height) - (var(--lintu-between) * 2)); /* top: calc(var(--lintu-big-header-height) - 16px); */ border-radius: 0px 0px 16px 16px; z-index: 2; } .ellipse6, .ellipse7 { position: absolute; width: 154px; height: 138px; right: -42px; top: -47px; background: #D8DCFF; opacity:.9; filter: blur(113.3px); } @keyframes show-must-go-on-6 { 0% { transform: rotate(0deg); transform-origin: -113px 175px; } 100% { transform: rotate(360deg); transform-origin: -113px 175px; } } @keyframes show-must-go-on-7 { 0% { transform: rotate(0deg); transform-origin: -113px 175px; } 100% { transform: rotate(360deg); transform-origin: -113px 175px; } } .ellipse8 { position: absolute; width: 130px; height: 131px; left: -44px; top: 175px; background: #D8DCFF; filter: blur(86.45px); } @keyframes show-must-go-on-8 { 0% { transform: rotate(0deg); transform-origin: 269px -47px; } 100% { transform: rotate(360deg); transform-origin: 269px -47px; } } .mobile-screen-big-header-status { position: fixed; top: 0; width: 100%; max-width: var(--lintu-mobile-screen-max-width); height: 60px; z-index: 100; display: flex; flex-direction: column; justify-content: center; align-items: center; } .big-header-status { background: var(--lt-theme-button-color); border-radius: 0px 0px 16px 16px; position: relative; width: 100%; height: 60px; top: 0; left: 0; overflow: hidden; } .big-header-status.no-auth { background: #333; } .big-header-status-line { position: relative; width: calc(100% - var(--lintu-margin) * 2); height: var(--lintu-main-menu-height); margin-top: var(--lintu-between); margin-left: var(--lintu-margin); display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .big-header-status-line-avatar { background: rgba(255,255,255,0.1); width: var(--lintu-main-menu-height); height: var(--lintu-main-menu-height); border-radius: 50%; overflow: hidden; cursor: pointer; color: #FFF; font-size: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .big-header-status-line-avatar:active { outline: medium none !important; } .big-header-status-line-avatar img { width: var(--lintu-main-menu-height); height: var(--lintu-main-menu-height); } .big-header-status-line-avatar i { margin-top: 2px; margin-left: -2px; } .big-header-status-line-session { width: 50px; height: 100%; cursor: alias; } .big-header-status-line-icon { width: 100%; height: 100%; font-size: 16px; color: var(--lt-theme-button-text-color); margin-top: 1px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .big-header-status-line-icon.large { font-size: 20px; } .big-header-status-line-logo { cursor: pointer; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 4px; } .big-header-buttons-area { position: relative; width: calc(100% - var(--lintu-margin) * 2); height: var(--lintu-big-header-buttons-area-height); margin-top: calc(var(--lintu-little-header-height) + 6px); margin-left: var(--lintu-margin); display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px; } .big-header-buttons-area.promoshop { height: calc(var(--lintu-big-header-buttons-area-height) / 2); } @keyframes hide-header-buttons-area { 0% {opacity: 1;} 60% {opacity: 0;} 100% {opacity: 0;} } @keyframes show-header-buttons-area { 0% {opacity: 0;} 100% {opacity: 1;} } .big-header-button { position: relative; width: calc((100% - 8px * 3) / 3); height: 85px; overflow: hidden; background: rgba(255, 255, 255, 0.04); border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgba(255, 255, 255, 0.12); box-sizing: border-box; box-shadow: 4px 3px 14.1px rgba(46, 48, 177, 0.76); border-radius: 12px; cursor: pointer; color: #F5F6FF; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 2px; } .big-header-button.no-auth { box-shadow: 4px 3px 14.1px rgba(46, 48, 47, 0.76); color: #999; } .big-header-button-title { margin-top: 10px; margin-left: 10px; width: calc(100% - 20px); font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 120%; } .big-header-button-indicators-area { margin-left: 10px; margin-bottom: 10px; width: calc(100% - 20px); height: 24px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 18px; line-height: 22px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .big-header-button-indicator { white-space: nowrap; display: flex; flex-direction: row; justify-content: center; align-items: center; } .big-header-button-indicator-left-chevron, .big-header-button-indicator-right-chevron { width: 24px; height: 24px; background: rgba(255, 255, 255, 0.13); border-radius: 12px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .big-header-button-indicator-right-chevron i { margin-top: 2px; margin-left: 2px; font-size: 14px; } .big-header-button-indicator-left-chevron i { margin-top: 2px; margin-left: -1px; font-size: 14px; } .big-header-button-indicators-achievements-area { margin-left: 10px; margin-bottom: 10px; width: calc(100% - 20px); height: 24px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 18px; line-height: 22px; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; } .big-header-button-indicator-achievement { width: 32px; height: 32px; background: #FDEDEC; color: var(--lt-theme-button-color); box-shadow: 2px 0px 4px rgba(30, 32, 103, 0.29); border-radius: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0; } .big-header-button-indicator-achievement:not(:first-child) { margin-right: calc((100% - 32px * 4) / 3); } .big-header-button-indicator-achievement img { width: 100%; height: 100%; border-radius: 50%; } .big-header-button-indicator-badge { width: 57px; height: 22px; margin-top: -2px; background: #FDEDEC; border-radius: 11px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-grow: 0; gap: 2px; } .big-header-button-indicator-badge-icon { width: 14px; height: 14px; font-size: 15px; margin-top: 2px; margin-left: 4px; color: #FF8A65; display: flex; flex-direction: column; justify-content: center; align-items: center; } .big-header-button-indicator-badge-title { height: 14px; color: #FF8A65; margin-right: 4px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 130%; letter-spacing: -0.011em; flex-grow: 0; } /*******************************************************************************/ /******************************* MAIN: FLASH HEADER ****************************/ /*******************************************************************************/ .flash-header { background: #393BC7; position: absolute; width: calc(100% - 16px * 2); height: 72px; left: 0; top: 0; border-radius: 0px 0px 16px 16px; padding-left: 16px; padding-right: 16px; color: #FFFFFF; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 8px; z-index: 1; opacity: 0; transform: translateY(-72px); animation: open-flash-header 300ms forwards; } @keyframes open-flash-header { 0% {opacity:0; transform:translateY(-72px);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-flash-header { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(-72px);} } .flash-header.message-error { background: #FF8A65; color: #2C2C38; } .flash-header.message-success { background: #008800; color: #FFFFFF; } .flash-header-icon { background: rgba(255, 255, 255, 0.13); width: 36px; height: 36px; border-radius: 18px; cursor: pointer; font-size: 22px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .flash-header-icon i { margin-top: 5px; } .flash-header-close { background: rgba(255, 255, 255, 0.13); width: 36px; height: 36px; border-radius: 18px; cursor: pointer; font-size: 32px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .flash-header-close i { margin-top: 4px; margin-left: 1px; } .flash-header-title { height: 100%; padding-left: 8px; padding-right: 8px; border-radius: 18px; overflow: hidden; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; letter-spacing: -0.011em; flex-grow: 1; display: flex; flex-direction: row; justify-content: start; align-items: center; } /*******************************************************************************/ /******************************* MAIN: STASH HEADER ****************************/ /*******************************************************************************/ .stash-header { background: #393BC7; position: absolute; width: calc(100% - 16px * 2); max-width: calc(var(--lintu-mobile-screen-max-width) - 16px * 2); height: 72px; top: 0; border-radius: 0px 0px 16px 16px; padding-left: 16px; padding-right: 16px; color: #FFFFFF; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 8px; z-index: 200; opacity: 0; transform: translateY(-72px); /* animation: open-stash-header 300ms forwards; */ } @keyframes open-stash-header { 0% {opacity:0; transform:translateY(-72px);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-stash-header { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(-72px);} } .stash-header.message-error { background: #FF8A65; color: #2C2C38; } .stash-header.message-success { background: #008800; color: #FFFFFF; } .stash-header-icon { background: rgba(255, 255, 255, 0.13); width: 36px; height: 36px; border-radius: 18px; cursor: pointer; font-size: 22px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .stash-header-icon i { margin-top: 5px; } .stash-header-close { background: rgba(255, 255, 255, 0.13); width: 36px; height: 36px; border-radius: 18px; cursor: pointer; font-size: 32px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .stash-header-close i { margin-top: 4px; margin-left: 1px; } .stash-header-title { height: 100%; padding-left: 8px; padding-right: 8px; border-radius: 18px; overflow: hidden; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; letter-spacing: -0.011em; flex-grow: 1; display: flex; flex-direction: row; justify-content: start; align-items: center; } /*******************************************************************************/ /********************************* MAIN: NAVIGATOR *****************************/ /*******************************************************************************/ .main-navigator { position: relative; width: calc(100% - var(--lintu-margin) * 2); height: var(--lintu-main-menu-height); margin-top: calc(16px + var(--lintu-between)); padding-left: var(--lintu-margin); padding-right: var(--lintu-margin); overflow-x: auto; scroll-behavior: smooth; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: var(--lintu-gap); } .main-navigator::-webkit-scrollbar { display: none; } .main-navigator-round-button, .main-navigator-round-button-heart { background: #F5F6FF; height: 100%; aspect-ratio: 1 / 1; border-radius: 50%; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; } .main-navigator-round-button i { margin-top: 2px; font-size: 20px; color: var(--lt-brand-button-color); } .main-navigator-round-button-heart i { margin-top: 4px; font-size: 18px; color: #FF8A65; } .main-navigator-button { background: #F5F6FF; color: var(--lt-brand-button-color); width: auto; height: 100%; padding-left: 8px; padding-right: 8px; border-radius: calc(var(--lintu-main-menu-height) / 2); white-space: nowrap; cursor: pointer; transition: 500ms; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-grow: 0; gap: 4px; } .main-navigator-button-pix { width: 20px; height: 20px; font-size: 20px; margin-top: 2px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .main-navigator-button-title { height: 17px; margin-top: -2px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 15px; line-height: 130%; letter-spacing: -0.011em; flex-grow: 0; } .main-navigator-button.active { background: var(--lt-brand-button-color); color: #FFF; } /*******************************************************************************/ /******************************* MAIN: SHOP-WINDOW *****************************/ /*******************************************************************************/ .shop-window { background: var(--lt-theme-bg-color); position: relative; width: 100%; flex-grow: 1; overflow-x: auto; } .shop-desktop { background: var(--lt-theme-bg-color); width: 100%; height: 100%; overflow-y: hidden; overflow-x: auto; scroll-snap-type: x mandatory; scroll-snap-points-x: repeat(100%); scroll-behavior: smooth; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .shop-desktop::-webkit-scrollbar { display: none; } .show-screen { background: var(--lt-theme-bg-color); color: #FFF; font-size: 100px; width: 100%; height: 100%; flex-shrink: 0; scroll-snap-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .show-container { background: var(--lt-theme-bg-color); width: calc(100% - 2 * var(--lintu-margin)); height: 100%; padding-top: calc(var(--lintu-between) * 3 + var(--lintu-main-menu-height)); padding-bottom: calc(24px * 3 + 105px); padding-left: var(--lintu-margin); padding-right: var(--lintu-margin); overflow-y: auto; overflow-x: visible; display: flex; flex-direction: row; justify-content: start; align-items: start; flex-wrap: wrap; gap: var(--lintu-gap); } .show-container.promoshop { padding-bottom: calc(24px * 3 + 190px); } .show-container::-webkit-scrollbar { display: none; } /*******************************************************************************/ /******************************* MAIN: PRODUCT-CARD ****************************/ /*******************************************************************************/ .product-card { background: rgba(132, 132, 132, 0.25); width: calc((100% - var(--lintu-gap)) / 2); aspect-ratio: 167 / 238; border-radius: 8px; cursor: pointer; filter: drop-shadow(0px 4px 19.1px rgba(132, 132, 132, 0.25)); display: flex; flex-direction: column; justify-content: start; align-items: center; flex-shrink: 0; } .product-card-pix { width: 100%; aspect-ratio: 167 / 160; border-radius: 8px 8px 0px 0px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; } .product-card-pix img { width: 100%; object-fit: cover; } .product-card-pix.stoplist { opacity: 0.2; filter: grayscale(100%); -webkit-filter: grayscale(100%); } .product-card-info { background: #FFF; width: calc(100% - 8px); border-radius: 0px 0px 8px 8px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: start; padding-left: 8px; gap: 8px; } .product-card-info-title { width: calc(100% - 8px); height: 36px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; } .product-card-info-price { width: calc(100% - 8px); height: 22px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 8px; } .product-card-info-price span { font-size: 12px; color: #A4A4BA; } /*******************************************************************************/ /********************************** MAIN: FOOTER *******************************/ /*******************************************************************************/ .mobile-screen-footer-container { position: fixed; width: 100%; max-width: var(--lintu-mobile-screen-max-width); height: 69px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; justify-content: center; align-items: center; } .footer-container { position: relative; width: calc(100% - var(--lintu-margin) * 2); height: 69px; border-radius: 35px; background: rgba(255, 255, 255, 0.17); box-shadow: 0px 4px 19.1px rgba(193, 193, 193, 0.25); backdrop-filter: blur(var(--lintu-backdrop-filter-blur)); -webkit-backdrop-filter: blur(var(--lintu-backdrop-filter-blur)); display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 8px; } .footer-point { width: calc(100% - 53px - 8px * 3); height: 53px; border-radius: 27px; margin-left: 8px; cursor: pointer; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(60.1px); -webkit-backdrop-filter: blur(60.1px); display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 4px; -webkit-transition: 1000ms; transition: 1000ms; } .footer-point.promoshop { flex-direction: row; justify-content: start; align-items: center; gap: 0; } .footer-point.promoshop img { margin-left: 16px; } .footer-point-promoshop { width: calc(100% - 16px * 2); height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 4px; } .footer-point.active-cart { width: 53px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .footer-point.active-cart i { color: var(--lt-brand-button-color); font-size: 28px; margin-top: 2px; } .footer-point-title { width: auto; height: 17px; margin-left: 16px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 19px; letter-spacing: -0.006em; color: #393BC4; } .footer-point-title.promoshop { font-size: 16px; } .footer-point-address { width: auto; height: 17px; margin-left: 16px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 15px; line-height: 17px; letter-spacing: -0.006em; color: #343440; } .footer-point-address.promoshop { font-size: 12px; } .footer-cart { width: 53px; height: 53px; border-radius: 27px; font-size: 26px; cursor: pointer; color: var(--lt-brand-button-color); background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(60.1px); -webkit-backdrop-filter: blur(60.1px); display: flex; flex-direction: row; justify-content: center; align-items: center; -webkit-transition: 1000ms; transition: 1000ms; } .footer-cart.promoshop { background: var(--lt-brand-button-color); color: #FFF; } .footer-cart.promoshop i { margin-left: 2px; } .footer-cart i { margin-top: 2px; margin-left: 0px; } .footer-cart.active-cart { width: calc(100% - 53px - 8px * 3 - 5px); padding-left: 5px; display: flex; flex-direction: row; justify-content: start; align-items: center; } .footer-cart.active-cart img { height: 100%; border-radius: 50%; } .footer-cart-icon { height: 26px !important; border-radius: 0 !important; margin-top: -5px; } .footer-cart-products { width: 50%; height: calc(100% - 10px); overflow: hidden; display: flex; flex-direction: row; justify-content: start; align-items: center; } .footer-cart-products img:not(:first-child) { margin-left: var(--lintu-cart-products-images-margin); } .footer-cart-amount { width: 50%; height: calc(100% - 10px); overflow: hidden; margin-top: 5px; color: #2C2C38; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 18px; letter-spacing: -0.011em; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; } /*******************************************************************************/ /********************************** CART: FOOTER *******************************/ /*******************************************************************************/ .popup-cart-footer-container { position: fixed; width: 100%; max-width: var(--lintu-mobile-screen-max-width); height: 69px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; justify-content: center; align-items: center; } .cart-footer-container { position: relative; width: calc(100% - var(--lintu-margin) * 2); height: 69px; border-radius: 35px; background: rgba(255, 255, 255, 0.17); box-shadow: 0px 4px 19.1px rgba(193, 193, 193, 0.25); backdrop-filter: blur(var(--lintu-backdrop-filter-blur)); -webkit-backdrop-filter: blur(var(--lintu-backdrop-filter-blur)); display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 8px; } .cart-footer-point { width: calc(100% - 53px - 8px * 3); height: 53px; border-radius: 27px; margin-left: 8px; cursor: pointer; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(60.1px); -webkit-backdrop-filter: blur(60.1px); display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 4px; -webkit-transition: 1000ms; transition: 1000ms; } .cart-footer-point.active-cart { width: 53px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .cart-footer-point.active-cart i { color: var(--lt-brand-button-color); font-size: 28px; margin-top: 2px; } .cart-footer-point-title { width: auto; height: 17px; margin-left: 16px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 19px; letter-spacing: -0.006em; color: #393BC4; } .cart-footer-point-address { width: auto; height: 17px; margin-left: 16px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 15px; line-height: 17px; letter-spacing: -0.006em; color: #343440; } .cart-footer-cart { width: calc(100% - 8px * 2); height: 53px; border-radius: 27px; font-size: 26px; cursor: pointer; margin-left: 8px; color: #A4A4BA; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(60.1px); -webkit-backdrop-filter: blur(60.1px); display: flex; flex-direction: row; justify-content: center; align-items: center; -webkit-transition: 1000ms; transition: 1000ms; } .cart-footer-cart i { margin-top: 2px; margin-left: 0px; } .cart-footer-cart.active-cart { background: var(--lt-brand-button-color); color: #FFF; } .cart-footer-cart.active-cart-LEGACY { padding-left: 5px; display: flex; flex-direction: row; justify-content: start; align-items: center; } .cart-footer-cart.active-cart-LEGACY img { height: 100%; border-radius: 50%; } .cart-footer-cart-icon { height: 26px !important; border-radius: 0 !important; margin-top: -5px; } .cart-footer-cart-products { width: 50%; height: calc(100% - 10px); overflow: hidden; display: flex; flex-direction: row; justify-content: start; align-items: center; } .cart-footer-cart-products img:not(:first-child) { margin-left: var(--lintu-cart-products-images-margin); } .cart-footer-cart-amount { width: 50%; height: calc(100% - 10px); overflow: hidden; margin-top: 5px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 18px; letter-spacing: -0.011em; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; } /*******************************************************************************/ /******************************* ORDERCART: FOOTER *****************************/ /*******************************************************************************/ .popup-ordercart-footer-container { position: fixed; width: 100%; max-width: var(--lintu-mobile-screen-max-width); height: 69px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; justify-content: center; align-items: center; } .ordercart-footer-container { position: relative; width: calc(100% - var(--lintu-margin) * 2); height: 69px; border-radius: 35px; background: rgba(255, 255, 255, 0.17); box-shadow: 0px 4px 19.1px rgba(193, 193, 193, 0.25); backdrop-filter: blur(var(--lintu-backdrop-filter-blur)); -webkit-backdrop-filter: blur(var(--lintu-backdrop-filter-blur)); display: flex; flex-direction: row; justify-content: start; align-items: center; } .ordercart-buttons-container { background:#00F8; width: calc(100% - 8px * 2); height: 53px; margin-left: 8px; border-radius: 27px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(60.1px); -webkit-backdrop-filter: blur(60.1px); display: flex; flex-direction: row; justify-content: start; align-items: center; } .ordercart-button { width: 50%; height: 53px; border-radius: 27px 0 0 27px; font-size: 26px; cursor: pointer; color: #A4A4BA; display: flex; flex-direction: row; justify-content: center; align-items: center; -webkit-transition: 1000ms; transition: 1000ms; } .ordercart-button.accent-color { margin-left: 0; background: #393BC7; color: #FFFFFF; border-radius: 27px; } .ordercart-button i { font-size: 24px; margin-top: -2px; } .ordercart-button-title { height: calc(100% - 10px); overflow: hidden; margin-top: 5px; color: #393BC7; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 18px; letter-spacing: -0.011em; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; } .ordercart-button-title.accent-color { color: #FFFFFF; } /*******************************************************************************/ /******************************* MAIN: SCREEN-BLUR *****************************/ /*******************************************************************************/ .screen-blur { background: #3336; position: absolute; width: 100%; max-width: var(--lintu-mobile-screen-max-width); height: 100%; z-index: 120; backdrop-filter: blur(var(--lintu-popup-backdrop-filter-blur)); -webkit-backdrop-filter: blur(var(--lintu-popup-backdrop-filter-blur)); visibility: hidden; opacity: 0; } @keyframes show-screen-blur { 0% {opacity:0;} 100% {opacity:1;} } @keyframes hidden-screen-blur { 0% {opacity:1;} 100% {opacity:0;} } /*******************************************************************************/ /*************************** MAIN: LEFT-NAVIGATOR-POPUP ************************/ /*******************************************************************************/ .left-navigator-popup { position: absolute; width: 100%; max-width: var(--lintu-mobile-screen-max-width); height: 100%; z-index: 125; display: flex; flex-direction: row; justify-content: start; align-items: center; visibility: hidden; opacity: 0; transform: translateX(-100%); } @keyframes open-left-navigator-popup { 0% {opacity:0; transform:translateX(-80%);} 100% {opacity:1; transform:translateX(0);} } @keyframes close-left-navigator-popup { 0% {opacity:1; transform:translateX(0);} 100% {opacity:0; transform:translateX(-100%);} } .left-navigator-popup-body { position: relative; background: #FFF; width: 80%; height: 100%; border-radius: 0 16px 16px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 48px; } .left-navigator-popup-body-group { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; } .left-navigator-popup-body-group-status { width: calc(100% - var(--lintu-margin) * 2); height: 36px; display: flex; flex-direction: row; justify-content: start; align-items: center; } .left-navigator-popup-body-group-status img { width: 36px; height: 36px; } .left-navigator-popup-body-group-status span { height: 36px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 18px; color: #2C2C38; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .left-navigator-popup-body-group-menu-item { width: calc(100% - var(--lintu-margin) * 2); height: 24px; cursor: pointer; display: flex; flex-direction: row; justify-content: start; align-items: center; } .left-navigator-popup-body-group-menu-item-title { height: 24px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; flex-grow: 1; display: flex; flex-direction: row; justify-content: start; align-items: center; } .left-navigator-popup-body-group-menu-item-right-chevron { width: 24px; height: 24px; background: #F7F7F7; border-radius: 12px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .left-navigator-popup-body-group-menu-item-right-chevron i { margin-top: 2px; margin-left: 2px; font-size: 14px; color: #A4A4BA; } .left-navigator-popup-body-group-menu-item-divider { width: calc(100% - var(--lintu-margin) * 2); height: 0px; border: 1px solid #F5F6FF; } .left-navigator-popup-body-group-button { background: #F5F6FF; width: calc(100% - var(--lintu-margin) * 2); height: 46px; border-radius: 23px; cursor: pointer; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 15px; line-height: 24px; letter-spacing: -0.006em; color: #393BC7; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; } .left-navigator-popup-body-group-button.accent { background: #393BC7; color: #FFFFFF; } .left-navigator-popup-body-group-button-version { font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 11px; line-height: 24px; letter-spacing: -0.006em; color: #393BC755; } .left-navigator-popup-tap-aria { width: 20%; height: 100%; } /*******************************************************************************/ /***************************** MAIN: SWITCH - SLIDER ***************************/ /*******************************************************************************/ .switch { position: relative; width: calc(var(--lintu-slider-size) * 2 + var(--lintu-slider-gap) * 2); height: calc(var(--lintu-slider-size) + var(--lintu-slider-gap) * 2); } .switch input {visibility:hidden;} .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--lintu-slider-size); background-color: #CCC; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: var(--lintu-slider-size); width: var(--lintu-slider-size); left: var(--lintu-slider-gap); bottom: var(--lintu-slider-gap); border-radius: 50%; background-color: #FFFFFF; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: var(--lt-brand-button-color); } input:checked + .slider:before { -webkit-transform: translateX(var(--lintu-slider-size)); -ms-transform: translateX(var(--lintu-slider-size)); transform: translateX(var(--lintu-slider-size)); } /*******************************************************************************/ /************************** MAIN: UNIVERSAL CSS CLASSES ************************/ /*******************************************************************************/ .universal-popup-close { background: #F7F7F7; position: absolute; width: 36px; height: 36px; border-radius: 18px; top: 12px; right: 12px; cursor: pointer; font-size: 32px; color: #A4A4BA; display: flex; flex-direction: column; justify-content: center; align-items: center; } .universal-popup-close i { margin-top: 4px; margin-left: 1px; } .universal-popup-heart { background: #F7F7F7; position: absolute; width: 36px; height: 36px; border-radius: 18px; top: 12px; left: 12px; cursor: pointer; font-size: 22px; color: #A4A4BA; display: flex; flex-direction: column; justify-content: center; align-items: center; } .universal-popup-heart i { margin-top: 5px; } .down-popup-body-header-heart.red-heart i, .universal-popup-heart.red-heart i { color: #FF8A65; } /*******************************************************************************/ /*************************** MAIN: DOWN-POPUP UNIVERSAL ************************/ /*******************************************************************************/ .down-popup { position: absolute; width: 100%; max-width: var(--lintu-mobile-screen-max-width); height: 100%; z-index: 125; display: flex; flex-direction: column-reverse; justify-content: start; align-items: center; visibility: hidden; opacity: 0; transform: translateY(100%); } @keyframes open-down-popup-loyaltycard { 0% {opacity:0; transform:translateY(60%);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-loyaltycard { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(100%);} } @keyframes open-down-popup-payment { 0% {opacity:0; transform:translateY(60%);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-payment { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(100%);} } @keyframes open-down-popup-depositbalance { 0% {opacity:0; transform:translateY(250px);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-depositbalance { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(250px);} } @keyframes open-down-popup-deposit2points { 0% {opacity:0; transform:translateY(294px);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-deposit2points { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(294px);} } @keyframes open-down-popup-money2deposit { 0% {opacity:0; transform:translateY(294px);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-money2deposit { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(294px);} } @keyframes open-down-popup-loyaltyprogram { 0% {opacity:0; transform:translateY(100%);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-loyaltyprogram { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(100%);} } @keyframes open-down-popup-productcard { 0% {opacity:0; transform:translateY(100%);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-productcard { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(100%);} } @keyframes open-down-popup-favourites { 0% {opacity:0; transform:translateY(100%);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-favourites { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(100%);} } @keyframes open-down-popup-cart { 0% {opacity:0; transform:translateY(100%);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-cart { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(100%);} } @keyframes open-down-popup-cashback { 0% {opacity:0; transform:translateY(100%);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-cashback { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(100%);} } @keyframes open-down-popup-orders { 0% {opacity:0; transform:translateY(100%);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-orders { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(100%);} } @keyframes open-down-popup-ordercart { 0% {opacity:0; transform:translateY(100%);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-ordercart { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(100%);} } @keyframes open-down-popup-achievements { 0% {opacity:0; transform:translateY(100%);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-achievements { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(100%);} } @keyframes open-down-popup-investment { 0% {opacity:0; transform:translateY(100%);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-investment { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(100%);} } @keyframes open-down-popup-finance { 0% {opacity:0; transform:translateY(100%);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-finance { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(100%);} } @keyframes open-down-popup-yandexmap { 0% {opacity:0; transform:translateY(100%);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-yandexmap { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(100%);} } @keyframes open-down-popup-coffeeshop { 0% {opacity:0; transform:translateY(calc(486px + 92px));} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-coffeeshop { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(100%);} } .down-popup-body, .down-popup-body-info { position: relative; background: #FFF; width: 100%; height: 100%; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; } .down-popup-body.loyaltycard { height: 60%; } .down-popup-body.payment { height: 366px; } .down-popup-body-info.payment { gap: 16px; padding-bottom:24px; } .down-popup-body.depositbalance { height: 210px; padding-top: 52px; } .down-popup-body.deposit2points { height: 294px; } .down-popup-body.money2deposit { height: 294px; } .down-popup-body-info.productcard { background: linear-gradient(#393BC7, #393BC7 250px, white 300px, white); height: 100%; overflow-y: auto; padding-bottom: calc(24px + 86px); scroll-behavior: smooth; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 12px; } .down-popup-body-info.productcard::-webkit-scrollbar { display: none; } .down-popup-body.loyaltyprogram, .down-popup-body.favourites, .down-popup-body.cart, .down-popup-body.cashback, .down-popup-body.orders, .down-popup-body.ordercart, .down-popup-body.achievements, .down-popup-body.investment, .down-popup-body.finance, .down-popup-body.yandexmap { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; } .down-popup-body.loyaltyprogram::-webkit-scrollbar, .down-popup-body.favourites::-webkit-scrollbar, .down-popup-body.cart::-webkit-scrollbar, .down-popup-body.cashback::-webkit-scrollbar, .down-popup-body.orders::-webkit-scrollbar, .down-popup-body.ordercart::-webkit-scrollbar, .down-popup-body.achievements::-webkit-scrollbar, .down-popup-body.investment::-webkit-scrollbar, .down-popup-body.finance::-webkit-scrollbar, .down-popup-body.yandexmap::-webkit-scrollbar, .down-popup-body.coffeeshop::-webkit-scrollbar { } .down-popup-tap-aria { width: 100%; height: 0; } .down-popup-tap-aria.loyaltycard { height: 40%; } .down-popup-tap-aria.payment { height: calc(100% - 366px); } .down-popup-tap-aria.depositbalance { height: calc(100% - 210px); } .down-popup-tap-aria.deposit2points { height: calc(100% - 282px); } .down-popup-tap-aria.money2deposit { height: calc(100% - 282px); } .down-popup-tap-aria.coffeeshop { height: calc(100% - 486px - 92px); } .down-popup-tap-aria.loyaltyprogram, .down-popup-tap-aria.productcard, .down-popup-tap-aria.favourites, .down-popup-tap-aria.cart, .down-popup-tap-aria.cashback, .down-popup-tap-aria.orders, .down-popup-tap-aria.ordercart, .down-popup-tap-aria.achievements, .down-popup-tap-aria.investment, .down-popup-tap-aria.finance, .down-popup-tap-aria.yandexmap { height: 0; } .down-popup-body-group { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; } .down-popup-body-qr { width: 50%; aspect-ratio: 1 / 1; box-sizing: border-box; border: 1px solid #D8DCFF; border-radius: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-qr img { width: 85%; aspect-ratio: 1 / 1; } .down-popup-body-balance { background: #F7F7F7; width: calc(100% - var(--lintu-margin) * 2); height: 46px; border-radius: 12px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; } .down-popup-body-balance-title { margin-left: 8px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; flex-grow: 1; } .down-popup-body-balance-amount { margin-right: 8px; margin-top: 2px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 18px; line-height: 22px; color: #2C2C38; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-checker { width: calc(100% - var(--lintu-margin) * 2); height: 40px; cursor: pointer; display: flex; flex-direction: row; justify-content: start; align-items: center; } .down-popup-body-checker-check { width: 40px; height: 40px; color: #A4A4BA; font-size: 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-checker-check.active { color: #FF8A65; } .down-popup-body-checker-data { height: 40px; flex-grow:1; display: flex; flex-direction: column; justify-content: center; align-items: start; } .down-popup-body-checker-data-title { width: 100%; height: 50%; color: #2C2C38; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; display: flex; flex-direction: row; justify-content: start; align-items: center; } .down-popup-body-checker-data-title.formula { color: #A4A4BA; } .down-popup-body-checker-data-title img { margin-top: -3px; } .down-popup-body-sourcer { width: calc(100% - var(--lintu-margin) * 2); height: 112px; display: flex; flex-direction: column; justify-content: space-between; align-items: start; } .down-popup-body-sourcer-title { width: 100%; height: 18px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: -0.006em; color: #2C2C38; display: flex; flex-direction: column; justify-content: center; align-items: start; } .down-popup-body-sourcer-list { width: 100%; height: 88px; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 6px; } .down-popup-body-sourcer-list-item { background: #F7F7F7; width: calc(100% / 2); height: 88px; cursor: pointer; box-sizing: border-box; border: 2px solid #F7F7F7; border-radius: 12px; color: #F5F6FF; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 6px; } .down-popup-body-sourcer-list-item.active { background: #FFF; border: 2px solid #393BC7; } .down-popup-body-sourcer-list-item-title { margin-top: 10px; margin-left: 10px; width: calc(100% - 20px); color: #A4A4BA; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 120%; } .down-popup-body-sourcer-list-item-indicator { margin-left: 10px; margin-bottom: 10px; width: calc(100% - 20px); height: 24px; color: #2C2C38; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 18px; line-height: 22px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .down-popup-body-sourcer-list-item-indicator img { width: 100%; margin-top: -15px; } .down-popup-body-button { background: #2C2C38; width: calc(100% - var(--lintu-margin) * 2); height: 46px; border-radius: 23px; cursor: pointer; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 15px; line-height: 24px; letter-spacing: -0.006em; color: #FFFFFF; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; } .down-popup-body-button.black { background: #2C2C38; color: #FFFFFF; } .down-popup-body-button.white { background: #F5F6FF; color: #393BC7; } .down-popup-body-button.inactive { color: #A4A4BA; } .down-popup-body-title { width: calc(100% - var(--lintu-margin) * 2); height: 36px; border-radius: 23px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 15px; line-height: 24px; letter-spacing: -0.006em; color: #2C2C38; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; } .down-popup-body-title-left-chevron { width: 36px; height: 36px; background: rgba(199, 200, 255, 0.13); border-radius: 18px; cursor: pointer; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-title-left-chevron i { margin-top: 4px; margin-left: -2px; font-size: 22px; color: var(--lt-brand-button-color); } .down-popup-body-title-text { font-size: 16px; flex-grow: 1; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 8px; } .down-popup-body-converter, .down-popup-body-recharger { width: calc(100% - var(--lintu-margin) * 2); height: 46px; border-radius: 23px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 15px; line-height: 24px; letter-spacing: -0.006em; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; } .down-popup-body-converter-input, .down-popup-body-recharger-input { background: #F7F7F7; height: 46px; border-radius: 23px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-converter-input { width: calc((100% - 36px - 8px * 2) / 2); } .down-popup-body-recharger-input { width: 100%; } .down-popup-body-converter-input input, .down-popup-body-recharger-input input { background: #F7F7F7; width: calc(100% - 18px); height: 100%; border-radius: 23px; border: 0; outline: 0; padding-left: 18px; color: #393BC7; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 15px; line-height: 24px; letter-spacing: -0.006em; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-converter-input input:focus, .down-popup-body-recharger-input input:focus { background: #FFF; outline: 1px solid #393BC7; } .down-popup-body-converter-input input::-webkit-outer-spin-button, .down-popup-body-converter-input input::-webkit-inner-spin-button, .down-popup-body-recharger-input input::-webkit-outer-spin-button, .down-popup-body-recharger-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .down-popup-body-converter-input input[type=number], .down-popup-body-recharger-input input[type=number] { -moz-appearance: textfield; } .down-popup-body-converter-sign { background: #F7F7F7; width: 46px; height: 46px; border-radius: 23px; color: #A4A4BA; font-size: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-converter-output { background: #F7F7F7; width: calc((100% - 36px - 8px * 2) / 2); height: 46px; border-radius: 23px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-recharger-output { display: none; } .down-popup-body-pix { position:relative; width: 100%; aspect-ratio: 1 / 1; margin-top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-pix img { width: 100%; object-fit: cover; } .down-popup-body-flash { width: calc(100% - 16px * 2); height: auto; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 8px; } .down-popup-body-flash-description { width: 100%; height: auto; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #A4A4BA; } .down-popup-body-flash-title { width: 100%; height: 36px; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 8px; } .down-popup-body-flash-title-text { font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; flex-grow: 1; } .down-popup-body-flash-title-points { background: #FDEDEC; height: 100%; padding-left: 8px; padding-right: 8px; border-radius: 18px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #FF8A65; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; gap: 4px; } .down-popup-body-flash-title-points span{ margin-top: 2px; } .down-popup-body-settings { width: calc(100% - 16px * 2); height: auto; %# 158px; z-index: 2; display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 12px; } .down-popup-body-settings-title { width: 100%; height: 18px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; } .down-popup-body-settings-volume { width: 100%; height: 48px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; } .down-popup-body-settings-volume-selector { position: relative; background: #F8F8F8; height: 44px; border-radius: 24px; padding: 2px; flex-grow: 1; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-settings-volume-selector.my-glass { padding-right: 42px; } .down-popup-body-settings-volume-selector-item { background: #F8F8F8; height: 100%; border-radius: 24px; color: #A4A4BA; cursor: pointer; z-index: 3; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; flex-grow: 1; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 2px; } .down-popup-body-settings-volume-selector-item.active { background: #FFFFFF; box-shadow: 2px 2px 9.4px rgba(197, 197, 197, 0.25); color: #393BC7; } .down-popup-body-settings-volume-privatecup-resizer { position: absolute; width: 40px; height: 40px; right: 2px; border-radius: 20px; z-index: 2; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-settings-volume-privatecup { background: #F8F8F8; width: 48px; height: 48px; border-radius: 24px; cursor: pointer; overflow: hidden; -webkit-transition: 1000ms; transition: 1000ms; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-settings-volume-privatecup span { width: 0; overflow: hidden; opacity: 0; -webkit-transition: 1000ms; transition: 1000ms; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; } .down-popup-body-settings-volume-privatecup.my-glass { background: #FFFFFF; width: 168px; border: 1px solid #393BC7; } .down-popup-body-settings-volume-privatecup.my-glass-mini { background: #FFFFFF; border: 1px solid #393BC7; } .down-popup-body-settings-volume-privatecup.my-glass span { width: auto; opacity: 1; } .down-popup-body-settings-general { width: 100%; height: 68px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; } .down-popup-body-settings-general-parameter { width: 100%; height: 100%; flex-grow: 1; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 6px; } .down-popup-body-settings-general-parameter-selector { background: #F8F8F8; width: calc(100% - 4px); height: 44px; border-radius: 24px; padding: 2px; flex-grow: 1; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-settings-general-parameter-selector-item { height: 100%; border-radius: 24px; color: #A4A4BA; cursor: pointer; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; flex-grow: 1; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-settings-general-parameter-selector-item.active { background: #FFFFFF; box-shadow: 2px 2px 9.4px rgba(197, 197, 197, 0.25); color: #393BC7; } .down-popup-body-settings-general-parameter-title { width: 100%; height: 14px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 120%; color: #2C2C38; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-settings-modifiers { width: calc(100% - 2px); height: auto; padding-left: 1px; padding-right: 1px; margin-top: 12px; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 24px; } .down-popup-body-settings-ingredients { width: 100%; height: 158px; display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 8px; } .down-popup-body-settings-ingredients-title { height: 18px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; } .down-popup-body-settings-ingredients-scroll-selector { width: 100%; height: 132px; overflow-x: auto; overflow-y: hidden; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 12px; } .down-popup-body-settings-ingredients-scroll-selector::-webkit-scrollbar { display: none; } .down-popup-body-settings-ingredients-scroll-selector-item { width: 80px; height: 100%; cursor: pointer; flex-shrink: 0; display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 6px; } .down-popup-body-settings-ingredients-scroll-selector-item-pix { background: #F7F7F7; width: calc(100% - 2px); aspect-ratio: 1 / 1; height: 78px; border: 1px solid #F7F7F7; border-radius: 8.7px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-settings-ingredients-scroll-selector-item-pix.stoplist { opacity: 0.2; filter: grayscale(100%); -webkit-filter: grayscale(100%); } .down-popup-body-settings-ingredients-scroll-selector-item-pix.active { border: 1px solid #393BC7; } .down-popup-body-settings-ingredients-scroll-selector-item-pix img { width: 55px; height: 55px; } .down-popup-body-settings-ingredients-scroll-selector-item-title { width: 100%; overflow: hidden; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 120%; color: #2C2C38; } .down-popup-body-settings-ingredients-scroll-selector-item-price { width: 100%; height: 14px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 120%; color: #A4A4BA; } .down-popup-body-adding-cart { position: fixed; width: calc(100% - 16px * 2); height: calc(86px - 16px * 2); left: 0; bottom: 0; padding: 16px; z-index: 3; background: rgba(255, 255, 255, 0.17); box-shadow: -4px 0px 19.1px rgba(193, 193, 193, 0.25); backdrop-filter: blur(25px); border-radius: 12px 12px 0px 0px; display: flex; flex-direction: row; justify-content: space-around; align-items: center; gap: 32px; } .down-popup-body-adding-cart-section { background: #F7F7F7; width: calc(100% - 2px * 2); height: calc(100% - 2px * 2); border-radius: 26px; padding: 2px; white-space: nowrap; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .down-popup-body-adding-cart-section.center { justify-content: center; cursor: pointer; } .down-popup-body-promoshop-buy-button { background: #F7F7F7; width: calc(100% - 2px * 2); height: calc(100% - 2px * 2); border-radius: 26px; padding: 2px; white-space: nowrap; cursor: pointer; color: #A4A4BA; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 18px; line-height: 22px; letter-spacing: -0.011em; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-promoshop-buy-button.active { color: #FFF; background: #393BC7; } .down-popup-body-adding-cart-section-item { height: 100%; aspect-ratio: 1 / 1; border-radius: 24px; color: #2C2C38; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 18px; line-height: 22px; letter-spacing: -0.011em; flex-grow: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-adding-cart-section-item.button { background: #FFFFFF; box-shadow: 2px 2px 9.4px rgba(197, 197, 197, 0.25); font-size: 38px; color: #A4A4BA; cursor: pointer; } .down-popup-body-adding-cart-section-item.button span { margin-top: 3px; } /*******************************************************************************/ /************************** MAIN: DOWN-POPUP BODY HEADER ***********************/ /*******************************************************************************/ .down-popup-body-header { background: #393BC7; position: fixed; width: calc(100% - 16px * 2); height: 72px; left: 0; top: 0; border-radius: 0px 0px 10px 10px; padding-left: 16px; padding-right: 16px; color: #FFFFFF; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 8px; z-index: 3; opacity: 0; transform: translateY(-72px); } @keyframes open-down-popup-body-header { 0% {opacity:0; transform:translateY(-72px);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-body-header { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(-72px);} } .down-popup-body-header.cart.header-error { background: #FF8A65; color: #2C2C38; } .down-popup-body-header-heart { background: rgba(255, 255, 255, 0.13); width: 36px; height: 36px; border-radius: 18px; cursor: pointer; font-size: 22px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-header-heart i { margin-top: 5px; } .down-popup-body-header-close { background: rgba(255, 255, 255, 0.13); width: 36px; height: 36px; border-radius: 18px; cursor: pointer; font-size: 32px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-header-close i { margin-top: 4px; margin-left: 1px; } .down-popup-body-header-points { background: rgba(255, 255, 255, 0.13); height: 36px; padding-left: 8px; padding-right: 8px; border-radius: 18px; cursor: pointer; white-space: nowrap; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; gap: 4px; } .down-popup-body-header-points span { margin-top: 2px; } .down-popup-body-header-points.fixed-width { width: 40px; } .down-popup-body-header-title { height: 100%; padding-left: 8px; padding-right: 8px; border-radius: 18px; overflow: hidden; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; letter-spacing: -0.011em; flex-grow: 1; display: flex; flex-direction: row; justify-content: start; align-items: center; } .down-popup-body-favourites-none { width: 100%; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; } .down-popup-body-favourites-none-pix { width:65%; } .down-popup-body-favourites-none-pix img { width:100%; } .down-popup-body-favourites-none-title { width:80%; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; text-align: center; letter-spacing: -0.011em; color: #2C2C38; } .down-popup-body-favourites-none-description { width:80%; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; text-align: center; letter-spacing: -0.011em; color: #A4A4BA; } .down-popup-body-title-justify { width: 100%; height: 60px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 20px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; flex-grow: 0; flex-shrink: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; } .down-popup-body-title-justify.center { justify-content: center; } .down-popup-body-title-justify.left { width: calc(100% - 12px); justify-content: start; padding-left: 12px; } .down-popup-body-info.favourites { width: 100%; padding-top: 8px; padding-bottom: 16px; overflow-y: auto; overflow-x: hidden; flex-grow: 1; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 12px; } .down-popup-body-info.favourites::-webkit-scrollbar { display: none; } .down-popup-body-info.cart { width: 100%; padding-top: 8px; padding-bottom: 16px; overflow-y: auto; overflow-x: hidden; flex-grow: 1; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 12px; } .down-popup-body-info.cart::-webkit-scrollbar { display: none; } .down-popup-body-product-list-cart-topper { position: relative; width: calc(100% - 16px * 2); height: 76px; border-radius: 16px; box-shadow: 1px 3px 15.6px rgba(197, 197, 197, 0.39); cursor: pointer; } .down-popup-body-product-list-cart-topper-line { width: calc(100% - 16px); height: 50%; padding-left: 8px; padding-right: 8px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; } .down-popup-body-product-list-cart-topper-line span { flex-grow: 1; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; } .down-popup-body-product-list-cart-topper-line-span-error { color: #FF8A65 !important; } .down-popup-body-product-list-cart-topper-line-span-ok { color: #393BC7 !important; } .down-popup-body-product-list-cart-topper-line input { background: #FFF; margin-left: -5px; border: none; outline: none; flex-grow: 0; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; } .down-popup-body-product-list-cart-topper-line input[type="time"]::-webkit-date-and-time-value { text-align: left; } .down-popup-body-product-list-cart-topper-line-right-chevron { width: 24px; height: 24px; background: #F7F7F7; color: #A4A4BA; border-radius: 12px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-product-list-cart-topper-line-right-chevron i { margin-top: 2px; margin-left: 2px; font-size: 14px; } .down-popup-body-product-list-cart-topper-line-icon { width: 24px; height: 24px; color: #393BC7; border-radius: 12px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-product-list-cart-topper-line-icon i { margin-top: 2px; margin-left: 2px; font-size: 18px; } .down-popup-body-product-list-cart-topper-line-icon.large i { font-size: 24px; } .down-popup-body-product-list-cart-topper-line-icon.icon-error i, .down-popup-body-product-list-cart-topper-line-icon.large.icon-error i { color: #FF8A65; } .down-popup-body-product-list-infotitle { background: #FFFFFF; width: calc(100% - 16px * 2); height: 246px; border-radius: 16px; cursor: pointer; box-shadow: 1px 3px 15.6px rgba(197, 197, 197, 0.39); display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; } .down-popup-body-product-list-infotitle-line { width: calc(100% - 16px); height: 18px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-product-list-infotitle-line-key { height: 100%; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #A4A4BA; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-product-list-infotitle-line-value { height: 100%; flex-grow: 1; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; display: flex; flex-direction: row; justify-content: end; align-items: center; } .down-popup-body-product-list-infotitle-line-value.status-success { color: #91C295; } .down-popup-body-product-list-infotitle-line-value.status-in-progress { color: #FF8A65; } .down-popup-body-product-list-infotitle-line-value.status-error { color: #FF8A65; } .down-popup-body-product-list-window { position: relative; background: linear-gradient(to right, white, white 30%, #FF8A65 35%, #FF8A65); width: calc(100% - 16px * 2); height: 116px; border-radius: 16px; box-shadow: 1px 3px 15.6px rgba(197, 197, 197, 0.39); cursor: pointer; } .down-popup-body-product-list-window.with-modifiers { height: 220px; } .down-popup-body-product-list-window-delete { position: absolute; right: 0; width: 116px; height: 100%; z-index: 1; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #FFF; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-product-list-window-delete i { font-size: 20px; } .down-popup-body-product-list-window-scroll-screen { position: relative; width: 100%; height: 100%; z-index: 3; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-snap-points-x: repeat(100%); scroll-behavior: smooth; display: flex; flex-direction: row; justify-content: start; align-items: start; } .down-popup-body-product-list-window-scroll-screen::-webkit-scrollbar { display: none; } .down-popup-body-product-list-item-backdrop { height: 100%; aspect-ratio: 116 / 116; scroll-snap-align: center; } .down-popup-body-product-list-item-backdrop.with-modifiers { aspect-ratio: 116 / 220; } .down-popup-body-product-list-item { background: #FFFFFF; width: 100%; height: 100%; border-radius: 16px; scroll-snap-align: center; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; } .down-popup-body-product-list-item-content { width: calc(100% - 16px); height: 100px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; } .down-popup-body-product-list-item-ingredients { width: calc(100% - 16px); height: calc(220px - 116px - 8px); overflow-x: auto; overflow-y: hidden; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 8px; } .down-popup-body-product-list-item-ingredients::-webkit-scrollbar { display: none; } .down-popup-body-product-list-item-ingredients-item { width: 64px; height: 100%; flex-shrink: 0; display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 6px; } .down-popup-body-product-list-item-ingredients-item-pix { background: #F7F7F7; width: 100%; aspect-ratio: 1 / 1; border-radius: 9px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-product-list-item-ingredients-item-pix img { width: 44px; height: 44px; } .down-popup-body-product-list-item-ingredients-item-title { width: 100%; height: 26px; text-align: left; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 10px; line-height: 13px; color: #2C2C38; } .down-popup-body-product-list-item-pix { height: 100%; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-product-list-item-pix img { width: 100%; height: 100%; border-radius: 11px; } .down-popup-body-product-list-item-data { width: calc(100% - 100px - 8px); height: 100%; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: start; } .down-popup-body-product-list-item-data-info { width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; } .down-popup-body-product-list-item-data-info-text { width: calc(100% - 36px); display: flex; flex-direction: column; justify-content: start; align-items: start; } .down-popup-body-product-list-item-data-info-text-title { width: 100%; height: 26px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; } .down-popup-body-product-list-item-data-info-text-price { width: 100%; height: 18px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 8px; } .down-popup-body-product-list-item-data-info-text-price.stop-list { color: #FF8A65; } .down-popup-body-product-list-item-data-info-text-price span { font-size: 12px; color: #A4A4BA; } .down-popup-body-product-list-item-data-info-delete { width: 36px; height: 100%; display: flex; flex-direction: column; justify-content: start; align-items: center; } .down-popup-body-product-list-item-data-info-delete-button { background: #F7F7F7; width: 36px; height: 36px; border-radius: 18px; cursor: pointer; font-size: 20px; color: #A4A4BA; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-product-list-item-data-info-delete-button i { margin-top: 3px; margin-left: 0; } .down-popup-body-product-list-item-data-adding-cart { width: 100%; height: 40px; left: 0; bottom: 0; display: flex; flex-direction: row; justify-content: space-around; align-items: center; gap: 32px; } .down-popup-body-product-list-item-data-adding-cart-section { background: #F7F7F7; width: calc(100% - 2px * 2); height: calc(100% - 2px * 2); border-radius: 26px; padding: 2px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .down-popup-body-product-list-item-data-adding-cart-section.center { justify-content: center; cursor: pointer; } .down-popup-body-product-list-item-data-adding-cart-section-item { height: 100%; aspect-ratio: 1 / 1; border-radius: 24px; color: #2C2C38; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 18px; line-height: 22px; letter-spacing: -0.011em; flex-grow: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-product-list-item-data-adding-cart-section-item.button { background: #FFF; box-shadow: 2px 2px 9.4px rgba(197, 197, 197, 0.25); font-size: 38px; color: #A4A4BA; cursor: pointer; } .down-popup-body-product-list-item-data-adding-cart-section-item.button span { margin-top: 3px; } .down-popup-body-product-list-item-delete { background: #F7F7F7; width: 36px; height: 36px; border-radius: 18px; top: 12px; right: 12px; cursor: pointer; font-size: 32px; color: #A4A4BA; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-product-list-item-delete i { margin-top: 4px; margin-left: 1px; } .down-popup-body-info.cashback { width: 100%; padding-top: 8px; padding-bottom: 16px; overflow-y: auto; flex-grow: 1; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 36px; } .down-popup-body-info.cashback::-webkit-scrollbar { display: none; } .down-popup-body-cashback-info-pix { width: calc(100% - 16px * 2); } .down-popup-body-cashback-info-list { width: calc(100% - 16px * 2); display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 16px; } .down-popup-body-cashback-info-list-item { width: 100%; height: 36px; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 12px; } .down-popup-body-cashback-info-list-item-number { height: 100%; aspect-ratio: 1 / 1; border: 1px solid #FF8A65; border-radius: 5px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-cashback-info-list-item-text { height: 100%; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: start; } .main-navigator-round-button-select { position: absolute; width: 36px; height: 36px; cursor: pointer; opacity: 0; } .down-popup-body-info.loyaltyprogram { width: 100%; padding-top: 8px; padding-bottom: 16px; overflow-y: auto; overflow-x: hidden; flex-grow: 1; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 12px; } .down-popup-body-info.loyaltyprogram::-webkit-scrollbar { display: none; } .down-popup-body-loyaltyprogram-list-item { background: #FFFFFF; width: calc(100% - 16px * 2); height: 100px; border-radius: 16px; cursor: pointer; box-shadow: 1px 3px 15.6px rgba(197, 197, 197, 0.39); scroll-snap-align: center; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; } .down-popup-body-loyaltyprogram-list-item.long-list { height: auto; padding-top: 16px; padding-bottom: 16px; } .down-popup-body-loyaltyprogram-list-item-title { width: calc(100% - 16px * 2); height: 24px; display: flex; flex-direction: row; justify-content: space-between;; align-items: center; } .down-popup-body-loyaltyprogram-list-item-title-text { width: auto; height: 100%; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 120%; color: #A4A4BA; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-loyaltyprogram-list-item-title-chevron { width: 24px; height: 24px; background: #F7F7F7; border-radius: 12px; color: #A4A4BA; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-loyaltyprogram-list-item-title-chevron i { margin-top: 2px; margin-left: 2px; font-size: 14px; } .down-popup-body-loyaltyprogram-list-item-amount { width: calc(100% - 16px * 2); height: 32px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 18px; line-height: 22px; color: #2C2C38; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 4px; } .down-popup-body-loyaltyprogram-list-item-amount.accent-color { color: #393BC7; } .down-popup-body-loyaltyprogram-list-item-amount-badge { width: auto; height: 22px; margin-top: -3px; background: #FDEDEC; border-radius: 11px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-grow: 0; gap: 2px; } .down-popup-body-loyaltyprogram-list-item-amount-badge-icon { width: 14px; height: 14px; font-size: 15px; margin-top: 2px; margin-left: 4px; color: #FF8A65; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-loyaltyprogram-list-item-amount-badge-title { height: 14px; color: #FF8A65; margin-right: 4px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 130%; letter-spacing: -0.011em; flex-grow: 0; } .down-popup-body-info.orders { width: 100%; padding-top: 8px; padding-bottom: 16px; overflow-y: auto; overflow-x: hidden; flex-grow: 1; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 12px; } .down-popup-body-info.orders::-webkit-scrollbar { display: none; } .down-popup-body-orders-list-item { background: #FFFFFF; width: calc(100% - 16px * 2); height: 162px; border-radius: 16px; cursor: pointer; box-shadow: 1px 3px 15.6px rgba(197, 197, 197, 0.39); scroll-snap-align: center; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; } .down-popup-body-orders-list-item-top { width: calc(100% - 16px); height: 36px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; } .down-popup-body-orders-list-item-top-title { height: 100%; flex-grow: 1; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 120%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #A4A4BA; display: flex; flex-direction: row; justify-content: start; align-items: center; } .down-popup-body-orders-list-item-top-button-status { background: #91C295; height: calc(100% - 6px); /* aspect-ratio: 3 / 1; */ padding-left: 10px; padding-right: 10px; border-radius: 18px; cursor: pointer; white-space: nowrap; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 120%; color: #FFFFFF; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-orders-list-item-top-button-status.status-success { background: #91C295; } .down-popup-body-orders-list-item-top-button-status.status-in-progress { background: #FDEDEC; color: #FF8A65; } .down-popup-body-orders-list-item-top-button-status.status-error { background: #FF8A65; } .down-popup-body-orders-list-item-top-button-round { background: #F5F6FF; height: 100%; aspect-ratio: 1 / 1; border-radius: 50%; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-orders-list-item-top-button-round i { margin-top: 2px; font-size: 22px; color: #2C2C38; } .down-popup-body-orders-list-item-top-button-round.accent-color i { margin-top: 2px; font-size: 20px; color: #393BC7; } .down-popup-body-orders-list-item-center { width: calc(100% - 16px); height: 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; } .down-popup-body-orders-list-item-center-title { height: 100%; flex-grow: 1; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; display: flex; flex-direction: column; justify-content: center; align-items: start; } .down-popup-body-orders-list-item-center-points { height: 100%; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #A4A4BA; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 1px; } .down-popup-body-orders-list-item-center-amount { height: 100%; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 3px; } .down-popup-body-orders-list-item-bottom { width: calc(100% - 16px); height: 40px; overflow: hidden; display: flex; flex-direction: row; justify-content: start; align-items: center; } .down-popup-body-orders-list-item-bottom img { height: 100%; border-radius: 20px; } .down-popup-body-orders-list-item-bottom img:not(:first-child) { margin-left: var(--lintu-cart-products-images-margin); } .down-popup-body-orders-list-item-divider { width: calc(100% - 18px); height: 0px; border: 0.5px solid #D8DCFF; } .down-popup-body-info.ordercart { width: 100%; padding-top: 8px; padding-bottom: 16px; overflow-y: auto; overflow-x: hidden; flex-grow: 1; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 12px; } .down-popup-body-info.ordercart::-webkit-scrollbar { display: none; } .down-popup-body-info.achievements { width: 100%; padding-top: 8px; padding-bottom: 16px; overflow-y: auto; overflow-x: hidden; flex-grow: 1; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 12px; } .down-popup-body-info.achievements::-webkit-scrollbar { display: none; } .down-popup-body-achievements-list-item { background: #FFFFFF; width: calc(100% - 16px * 2); height: 100px; border-radius: 16px; box-shadow: 1px 3px 15.6px rgba(197, 197, 197, 0.39); scroll-snap-align: center; flex-shrink: 0; display: flex; flex-direction: row; justify-content: start; align-items: center; } .down-popup-body-achievements-list-item.in-long-list { background: #F5F6FF; box-shadow: none; } .down-popup-body-achievements-list-item-pix { height: 100%; aspect-ratio: 122 / 100; overflow: hidden; flex-shrink: 0; } .down-popup-body-achievements-list-item-pix img { width: 100%; height: 100%; object-fit: cover; } .down-popup-body-achievements-list-item-data { height: calc(100% - 8px * 2); padding: 8px 12px 8px 12px; flex-grow: 1; } .down-popup-body-achievements-list-item-data-container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 7px; } .down-popup-body-achievements-list-item-data-container-title { width: 100%; height: 28px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 120%; color: #2C2C38; } .down-popup-body-achievements-list-item-data-container-label { width: 100%; height: 14px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 120%; color: #FF8A65; } .down-popup-body-achievements-list-item-data-container-label.success-color { color: #393BC7; } .down-popup-body-achievements-list-item-data-container-bar-background { width: 100%; height: 8px; border-radius: 4px; background: #F2F2F2; } .down-popup-body-achievements-list-item-data-container-bar-progress { width: 10%; height: 8px; border-radius: 4px; background: #91C295; } .down-popup-body-achievements-list-item-data-container-bar-progress.yet-not-done { background: #AA0000; } .down-popup-body-achievements-list-item-data-container-progress-title { width: 100%; height: 13px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 120%; text-align: right; color: #2C2C38; } .down-popup-body-info.investment { width: 100%; padding-top: 8px; padding-bottom: 16px; overflow-y: auto; overflow-x: hidden; flex-grow: 1; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 12px; } .down-popup-body-info.investment::-webkit-scrollbar { display: none; } .down-popup-body-investment-info { background: #FFF; width: calc(100% - 16px * 2); height: 243px; box-shadow: 1px 3px 15.6px rgba(197, 197, 197, 0.39); border-radius: 16px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-investment-info-content { width: calc(100% - 16px * 2); height: calc(100% - 16px * 2); display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 8px; } .down-popup-body-investment-info-content-title { width: 100%; height: 21px; margin-bottom: 2px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 2px; } .down-popup-body-investment-info-content-title-text { height: 100%; flex-grow: 1; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; } .down-popup-body-investment-info-content-title-status { width: 74px; height: 100%; flex-shrink: 0; display: flex; flex-direction: row; justify-content: start; align-items: center; } .down-popup-body-investment-info-content-title-status-sign0 { background: #F0FFF0; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-investment-info-content-title-status-sign1 { background: #D5F4D7; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-investment-info-content-title-status-sign2 { background: #91C295; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .down-popup-body-investment-info-content-title-status-text { font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #91C295; } .down-popup-body-investment-info-content-line { width: 100%; height: 86px; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 8px; } .down-popup-body-investment-info-content-line-badge { background: #F7F7F7; width: calc((100% - 8px * 2) / 3); height: 100%; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-investment-info-content-line-badge.flex-grow { flex-grow: 1; } .down-popup-body-investment-info-content-line-badge-content { width: calc(100% - 8px * 2); height: calc(100% - 8px * 2); display: flex; flex-direction: column; justify-content: space-between; align-items: start; } .down-popup-body-investment-info-content-line-badge-content-title { font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 120%; color: #A4A4BA; } .down-popup-body-investment-info-content-line-badge-content-indicator { font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 18px; line-height: 22px; color: #2C2C38; } .down-popup-body-investment-trade { background: #FFF; width: calc(100% - 16px * 2); height: 232px; box-shadow: 1px 3px 15.6px rgba(197, 197, 197, 0.39); border-radius: 16px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-investment-trade-content { width: calc(100% - 16px * 2); height: calc(100% - 16px * 2); display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 16px; } .down-popup-body-investment-trade-content-title { width: 100%; height: 24px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 2px; } .down-popup-body-investment-trade-content-title-text { height: 100%; flex-grow: 1; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; } .down-popup-body-investment-trade-content-title-text-chevron { width: 24px; height: 24px; background: #F7F7F7; border-radius: 12px; color: #A4A4BA; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-investment-trade-content-title-text-chevron i { margin-top: 2px; margin-left: 2px; font-size: 14px; } .down-popup-body-investment-trade-content-divider { width: 100%; height: 0; border: 1px solid #D8DCFF; } .down-popup-body-investment-trade-content-description { width: 100%; height: 36px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #A4A4BA; } .down-popup-body-investment-trade-content-description span { color: #393BC7; } .down-popup-body-investment-trade-content-data { width: 100%; height: 92px; display: flex; flex-direction: column; justify-content: space-between; align-items: start; } .down-popup-body-investment-trade-content-data-frame { width: 100%; height: 58px; display: flex; flex-direction: column; justify-content: start; align-items: start; } .down-popup-body-investment-trade-content-data-frame-title { width: 100%; height: 21px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; } :root { --investment-diagram-me: 0.00%; --investment-diagram-other: 0.00%; --investment-diagram-vacant:0.00%; } .down-popup-body-investment-trade-content-data-frame-diagram { width: 100%; flex-grow: 1; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 2px; } .down-popup-body-investment-trade-content-data-frame-diagram-item { min-width: 40px; height: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; -webkit-transition: 2000ms; transition: 2000ms; } .down-popup-body-investment-trade-content-data-frame-diagram-item.me { width: var(--investment-diagram-me); flex-grow: 1; } .down-popup-body-investment-trade-content-data-frame-diagram-item.other { width: var(--investment-diagram-other); flex-grow: 1; } .down-popup-body-investment-trade-content-data-frame-diagram-item.vacant { width: var(--investment-diagram-vacant); flex-grow: 1; } .down-popup-body-investment-trade-content-data-frame-diagram-item-chart { width: 100%; height: 5px; min-width: 5px; max-width: 100%; border-radius: 2.5px; -webkit-transition: 2000ms; transition: 2000ms; } .down-popup-body-investment-trade-content-data-frame-diagram-item-chart.me { background: #FF8A65; width: var(--investment-diagram-me); } .down-popup-body-investment-trade-content-data-frame-diagram-item-chart.other { background: #91C295; width: var(--investment-diagram-other); } .down-popup-body-investment-trade-content-data-frame-diagram-item-chart.vacant { background: #D8DCFF; width: var(--investment-diagram-vacant); } .down-popup-body-investment-trade-content-data-frame-diagram-item-title { font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 11px; line-height: 12px; letter-spacing: -0.011em; color: #2C2C38; -webkit-transition: 2000ms; transition: 2000ms; } .down-popup-body-investment-trade-content-data-colors { position: relative; width: 100%; height: 22px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 11px; line-height: 12px; letter-spacing: -0.011em; color: #2C2C38; display: flex; flex-direction: row; justify-content: start; align-items: center; } .down-popup-body-investment-trade-content-data-colors-pick { width: 9px; height: 9px; border-radius: 50%; } .down-popup-body-investment-trade-content-data-colors-pick.me { background: #FF8A65; } .down-popup-body-investment-trade-content-data-colors-pick.other { background: #91C295; } .down-popup-body-investment-trade-content-data-colors-pick.vacant { background: #D8DCFF; } .down-popup-body-investment-trade-content-data-colors-info { position: absolute; right: 0; background: #393BC7; width: 22px; height: 22px; border-radius: 11px; color: #FFF; font-size: 20px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-investment-trade-content-data-colors-info-detail { background: #393BC7; position: absolute; width: calc(100% - 12px * 2); height: auto; right: 0; bottom: 28px; border-radius: 12px; padding: 12px; cursor: pointer; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.32px; color: #FFFFFF; visibility: hidden; } .down-popup-body-investment-shops { width: calc(100% - 16px * 2); box-shadow: 1px 3px 15.6px rgba(197, 197, 197, 0.39); border-radius: 16px; padding-top: 16px; padding-bottom: 16px; cursor: pointer; flex-shrink: 0; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-investment-shops-content { width: calc(100% - 16px * 2); flex-grow: 1; display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 16px; } .down-popup-body-investment-shops-content-title { width: 100%; height: 24px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 2px; } .down-popup-body-investment-shops-content-title-text { height: 100%; flex-grow: 1; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; } .down-popup-body-investment-shops-content-title-text-chevron { width: 24px; height: 24px; background: #F7F7F7; border-radius: 12px; color: #A4A4BA; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-investment-shops-content-title-text-chevron i { margin-top: 2px; margin-left: 2px; font-size: 14px; } .down-popup-body-investment-shops-content-divider { width: 100%; height: 0; border: 1px solid #D8DCFF; } .down-popup-body-investment-shops-content-list { width: 100%; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 8px; } .down-popup-body-investment-shops-content-name { width: 100%; height: 18px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .down-popup-body-investment-shops-content-name-indicator { height: 100%; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; letter-spacing: -0.011em; color: #393BC7; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 2px; } .down-popup-body-investment-shops-content-name-indicator.negative { color: #A4A4BA; } .down-popup-body-investment-accruals { width: calc(100% - 16px * 2); box-shadow: 1px 3px 15.6px rgba(197, 197, 197, 0.39); border-radius: 16px; padding-top: 16px; padding-bottom: 16px; cursor: pointer; flex-shrink: 0; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-investment-accruals-content { width: calc(100% - 16px * 2); flex-grow: 1; display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 16px; } .down-popup-body-investment-accruals-content-title { width: 100%; height: 24px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 2px; } .down-popup-body-investment-accruals-content-title-text { height: 100%; flex-grow: 1; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; } .down-popup-body-investment-accruals-content-title-text-chevron { width: 24px; height: 24px; background: #F7F7F7; border-radius: 12px; color: #A4A4BA; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-investment-accruals-content-title-text-chevron i { margin-top: 2px; margin-left: 2px; font-size: 14px; } .down-popup-body-info.finance { width: 100%; padding-top: 8px; padding-bottom: 16px; overflow-y: auto; overflow-x: hidden; flex-grow: 1; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 12px; } .down-popup-body-info.finance::-webkit-scrollbar { display: none; } .down-popup-body-finance-settings { width: calc(100% - 16px * 2); height: 46px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .down-popup-body-finance-settings-button { background: #F7F7F7; position: relative; width: 21%; height: 46px; border-radius: 23px; padding-left: 4px; padding-right: 4px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-finance-settings-button:first-child { width: 51%; } .down-popup-body-finance-settings-button-title { width: calc(100% - 4px - 16px); height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 17px; text-align: center; letter-spacing: -0.011em; color: #2C2C38; } .down-popup-body-finance-settings-button i { font-size: 16px; margin-top: 3px; } .down-popup-body-finance-settings-button select { position: absolute; width: 100%; height: 46px; line-height: 46px; font-size: 46px; cursor: pointer; opacity: 0; } .down-popup-body-finance-chart { width: calc(100% - 16px * 2); aspect-ratio: 1 / 1; } .down-popup-body-finance-chart canvas { width:100%; height:100%; } .down-popup-body-finance-info { background: #FFF; width: calc(100% - 16px * 2); height: 243px; box-shadow: 1px 3px 15.6px rgba(197, 197, 197, 0.39); border-radius: 16px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-finance-info.half-height { height: calc(243px - 86px - 8px); } .down-popup-body-finance-info-content { width: calc(100% - 16px * 2); height: calc(100% - 16px * 2); display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 8px; } .down-popup-body-finance-info-content-title { width: 100%; height: 21px; margin-bottom: 2px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 2px; } .down-popup-body-finance-info-content-title-text { height: 100%; flex-grow: 1; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; letter-spacing: -0.011em; color: #2C2C38; } .down-popup-body-finance-info-content-title-status { width: 74px; height: 100%; flex-shrink: 0; display: flex; flex-direction: row; justify-content: start; align-items: center; } .down-popup-body-finance-info-content-title-status-sign0 { background: #F0FFF0; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-finance-info-content-title-status-sign1 { background: #D5F4D7; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-finance-info-content-title-status-sign2 { background: #91C295; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .down-popup-body-finance-info-content-title-status-text { font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #91C295; } .down-popup-body-finance-info-content-line { width: 100%; height: 86px; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 8px; } .down-popup-body-finance-info-content-line-badge { background: #F7F7F7; width: calc((100% - 8px * 2) / 3); height: 100%; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-finance-info-content-line-badge.half-width { width: calc((100% - 8px) / 2); } .down-popup-body-finance-info-content-line-badge.flex-grow { flex-grow: 1; } .down-popup-body-finance-info-content-line-badge-content { width: calc(100% - 8px * 2); height: calc(100% - 8px * 2); display: flex; flex-direction: column; justify-content: space-between; align-items: start; } .down-popup-body-finance-info-content-line-badge-content-title { font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 120%; color: #A4A4BA; } .down-popup-body-finance-info-content-line-badge-content-indicator { font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 18px; line-height: 22px; color: #2C2C38; } .down-popup-body-info.yandexmap { width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 12px; } .down-popup-body-info.yandexmap::-webkit-scrollbar { display: none; } .down-popup-body-info-yandexmap-marker { width: 50px; height: 50px; cursor: pointer; margin-top: -25px; margin-left: -25px; } .down-popup-body-info-yandexmap-marker img { width: 100%; height: 100%; } .down-popup-body.coffeeshop { width: 100%; height: calc(486px + 92px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; } .down-popup-body-info.coffeeshop { width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 24px; } .down-popup-body-info.coffeeshop::-webkit-scrollbar { display: none; } .down-popup-body-info-coffeeshop-gallery { width: calc(100% - 16px * 2); height: 100px; margin-top: 12px; overflow-x: auto; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 8px; } .down-popup-body-info-coffeeshop-gallery::-webkit-scrollbar { display: none; } .down-popup-body-info-coffeeshop-gallery-pix { width: 100px; height: 100px; border-radius: 12px; overflow: hidden; flex-shrink: 0; } .down-popup-body-info-coffeeshop-gallery-pix img { width: 100%; height: 100%; object-fit: cover; } .down-popup-body-info-coffeeshop-yandexbuttons { width: calc(100% - 16px * 2); height: 36px; overflow-x: auto; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 8px; } .down-popup-body-info-coffeeshop-yandexbuttons::-webkit-scrollbar { display: none; } .down-popup-body-info-coffeeshop-yandexbuttons-item { background: #F5F6FF; width: 120px; height: 100%; border-radius: 18px; cursor: pointer; flex-shrink: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; } .down-popup-body-info-coffeeshop-yandexbuttons-item-icon { width: 20px; height: 20px; color: #393BC7; font-size: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-info-coffeeshop-yandexbuttons-item-title { width: 65px; height: 18px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: -0.011em; color: #393BC7; } .down-popup-body-info-coffeeshop-data { width: calc(100% - 16px * 2); height: calc(136px + 92px); display: flex; flex-direction: column; justify-content: start; align-items: center; gap: 12px; } .down-popup-body-info-coffeeshop-data-line { width: 100%; height: 21px; display: flex; flex-direction: row; justify-content: start; align-items: start; } .down-popup-body-info-coffeeshop-data-line.big { width: 100%; height: calc(46px + 92px); } .down-popup-body-info-coffeeshop-data-line-name { height: 100%; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 120%; color: #A4A4BA; flex-grow: 1; } .down-popup-body-info-coffeeshop-data-line-content { text-align: right; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 130%; letter-spacing: -0.011em; } .down-popup-body-info-coffeeshop-data-line-content-weekday { display: flex; flex-direction: row; justify-content: center; align-items: center; } .down-popup-body-info-coffeeshop-data-line-content-weekday-worktime { color: #2C2C38; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-info-coffeeshop-data-line-content-weekday-worktime.weekend { color: #FF8A65; } .down-popup-body-info-coffeeshop-data-line-content-weekday-title { width: 30px; color: #A4A4BA; flex-grow: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-info-coffeeshop-data-line-content-weekday-title.weekend { color: #FF8A65; opacity:0.75; } .down-popup-body-info-coffeeshop-data-divider { width: 100%; height: 0; border: 1px solid #F5F6FF; } .down-popup-body-info-coffeeshop-submit { background: #2C2C38; width: calc(100% - 16px * 2); height: 46px; border-radius: 23px; cursor: pointer; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 15px; line-height: 24px; letter-spacing: -0.006em; color: #FFFFFF; display: flex; flex-direction: column; justify-content: center; align-items: center; } .ymaps3x0--button.ymaps3x0--control-button.ymaps3x0--control-black-button { background: #2C2C38; height: 46px; margin-top: -60px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 15px; line-height: 20px; letter-spacing: -0.006em; color: #FFFFFF; } .ymaps3x0--button.ymaps3x0--control-button.ymaps3x0--control-blue-button { background: #393BC7; height: 46px; margin-top: -60px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 15px; line-height: 20px; letter-spacing: -0.006em; color: #FFFFFF; opacity: .5; } .the_end { } /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /************************************** **************************************/ /************************************** _____ _____ **************************************/ /************************************** /\ \ /\ \ **************************************/ /************************************** /::\ \ /::\ \ **************************************/ /************************************** /::::\ \ /::::\ \ **************************************/ /************************************** /::::::\ \ /::::::\ \ **************************************/ /************************************** /:::/\:::\ \ /:::/\:::\ \ **************************************/ /************************************** /:::/__\:::\ \ /:::/__\:::\ \ **************************************/ /************************************** \:::\ \:::\ \ /::::\ \:::\ \ **************************************/ /************************************** ___\:::\ \:::\ \ /::::::\ \:::\ \ **************************************/ /************************************** /\ \:::\ \:::\ \ /:::/\:::\ \:::\ \ **************************************/ /************************************** /::\ \:::\ \:::\____\/:::/__\:::\ \:::\____\ **************************************/ /************************************** \:::\ \:::\ \::/ /\:::\ \:::\ \::/ / **************************************/ /************************************** \:::\ \:::\ \/____/ \:::\ \:::\ \/____/ **************************************/ /************************************** \:::\ \:::\ \ \:::\ \:::\ \ **************************************/ /************************************** \:::\ \:::\____\ \:::\ \:::\____\ **************************************/ /************************************** \:::\ /:::/ / \:::\ \::/ / **************************************/ /************************************** \:::\/:::/ / \:::\ \/____/ **************************************/ /************************************** \::::::/ / \:::\ \ **************************************/ /************************************** \::::/ / \:::\____\ **************************************/ /************************************** \::/ / \::/ / **************************************/ /************************************** \/____/ \/____/ **************************************/ /************************************** **************************************/ /************************************** **************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ /****************************************************************************************************************************************/ .content { position: absolute; width: 100%; height: calc(100vh - var(--bottom-menu-height)); } .content_no_bottom_menu { position: absolute; width: 100%; height: 100%; } .long_content { position: absolute; width: 100%; height: auto; } .long_scroll_content { position: absolute; top: 0; left: 0; width: 100vw; height: calc(100vh - var(--bottom-menu-height)); overflow: auto; } .long_scroll_content::-webkit-scrollbar { width: 0; } .long_scroll_no_bottom_menu_content { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; overflow: auto; } .long_scroll_no_bottom_menu_content::-webkit-scrollbar { width: 0; } /*******************************************************************************/ /*************************************** SE ************************************/ /*******************************************************************************/ .se_version_number { font-family: var(--font-family-basic); font-size: var(--font-size-legal); opacity: var(--voucher-status-serial-number-opacity); color: var(--tma-theme-text-color); text-align: center; margin-top: calc(var(--margin) / 2); margin-bottom: calc(var(--margin) / 3); } .user_select_text { -webkit-touch-callout: text; /* iOS Safari */ -webkit-user-select: text; /* Chrome/Safari/Opera */ -khtml-user-select: text; /* Konqueror */ -moz-user-select: text; /* Firefox */ -ms-user-select: text; /* Internet Explorer/Edge */ user-select: text; /* Non-prefixed version, currently not supported by any browser */ } /*******************************************************************************/ /************************************ WELCOME **********************************/ /*******************************************************************************/ .welcome { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; } .welcome img { width: 50vw; } .welcome_text { padding-left: var(--margin); padding-right: var(--margin); text-align: center; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .welcome_text.little_link { color: var(--tma-theme-accent-text-color); cursor: pointer; text-decoration: underline; } .welcome_text_title { font-size: var(--title-font-size); font-weight: var(--font-weight-semibold); cursor: pointer; } .welcome_text_title.big_link { color: var(--tma-theme-accent-text-color); cursor: pointer; } .welcome_text_title_potapoff { font-family: var(--font-family-potapoff); color: var(--tma-theme-accent-text-color); font-size: var(--title-potapoff-font-size); } .welcome_text_title_university { font-family: var(--font-family-university); font-size: var(--title-university-font-size); letter-spacing: 20px; } .welcome_button { background: var(--tma-theme-button-color); width: calc(100vw - 32px - 32px); height: var(--button-height); border-radius: calc(var(--button-height) / 2); cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; } .welcome_button span { font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); } .session_button { background: #0F07; width: calc(100vw - 32px - 32px); height: var(--button-height); border-radius: calc(var(--button-height) / 2); cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; } .session_button span { font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); } /*******************************************************************************/ /************************************* BAN *************************************/ /*******************************************************************************/ .ban { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .ban_title { color: #A00; font-family: var(--font-family-ban); font-size: 200px; } .ban_description { font-family: var(--font-family-basic); font-size: 20px; color: var(--tma-theme-subtitle-text-color); letter-spacing: 10px; margin-left: 10px; } /*******************************************************************************/ /****************************** SE_BOTTOM_MENU *********************************/ /*******************************************************************************/ .se_bottom_menu { /* background: var(--tma-theme-bg-color); */ background: var(--tma-theme-header-bg-color); position: fixed; width: 100%; height: var(--bottom-menu-height); bottom: 0; font-size: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } .se_bottom_menu.wallet { background: var(--tma-theme-bg-color); position: fixed; width: 100%; height: var(--bottom-menu-height); bottom: 0; font-size: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } .se_bottom_menu_item { margin-top: var(--bottom-menu-ios-controller-delta); position: relative; height: 35px; width: 25vw; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: pointer; } .se_bottom_menu_item_icon { font-size: 25px; display: flex; color: var(--tma-theme-subtitle-text-color); } .se_bottom_menu_item_icon_active { font-size: 25px; display: flex; background: var(--tma-theme-accent-text-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .se_bottom_menu_item_title { font-size: var(--bottom-menu-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); } .se_bottom_menu_item_title_active { font-size: var(--bottom-menu-font-size); font-family: var(--font-family-basic); background: var(--tma-theme-accent-text-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .se_bottom_menu_create_item_icon_active { display: flex; color: var(--tma-theme-accent-text-color); font-size: 50px; height: 51px; } .se_bottom_menu_create_item_title_active { font-size: var(--bottom-menu-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); } /*******************************************************************************/ /******************************* DOCUMENT CONTAINER ****************************/ /*******************************************************************************/ .document_container { backdrop-filter: blur(var(--backdrop-filter-blur)); -webkit-backdrop-filter: blur(var(--backdrop-filter-blur)); position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; } .document_container iframe { width: 100%; height: 100%; } .document_container embed { width: 100%; height: 100%; } .document_container object { width: 100%; height: 100%; } /*******************************************************************************/ /************************************ ROADMAP **********************************/ /*******************************************************************************/ .roadmap { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; } .roadmap img { width: 50vw; } .roadmap_text { padding-left: var(--margin); padding-right: var(--margin); text-align: center; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .roadmap_text p { margin-top: calc(var(--margin) / 4); text-align: left; font-weight: var(--font-weight-thin); } .roadmap_text p:BEFORE { content: '👉 '; } .roadmap_text_paragraph { margin-top: calc(var(--margin)); font-size: var(--subtitle-font-size); text-align: left; } .roadmap_text_conditions { margin-top: calc(var(--margin)); font-size: var(--font-size); text-align: left; } .roadmap_text.little_link { color: var(--tma-theme-accent-text-color); cursor: pointer; text-decoration: underline; } .roadmap_text_title { width: 100%; font-size: var(--title-font-size); font-weight: var(--font-weight-semibold); cursor: pointer; margin-top: calc(var(--margin) * 1.5); } .roadmap_text_title.big_link { color: var(--tma-theme-accent-text-color); cursor: pointer; } .roadmap_button { background: var(--tma-theme-button-color); width: var(--button-width); height: var(--button-height); border-radius: calc(var(--button-height) / 2); cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; } .roadmap_button span { font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); } /*******************************************************************************/ /**************** COOPNODE TMA APPLICATION JOINING PERSONAL FORM ***************/ /*******************************************************************************/ .application { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 15px; } .application_form_legal { white-space: pre; width: calc(100% - var(--margin) / 2); padding-left: 0; padding-right: calc(var(--margin) / 2); text-align: right; font-size: var(--font-size-legal); font-family: var(--font-family-basic); font-style: italic; color: var(--tma-theme-text-color); } .application_form_userID { width: calc(100% - var(--margin) / 2); height: 30px; padding-left: 0; padding-right: calc(var(--margin) / 2); text-align: right; font-family: var(--font-family-coopnode); font-size: var(--title-font-size); color: var(--tma-theme-text-color); } .application_text { padding-left: var(--margin); padding-right: var(--margin); text-align: center; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .application_text span { color: var(--tma-theme-accent-text-color); cursor: pointer; text-decoration: underline; text-align: left; } .application_text select { width: 100%; height: 40px; font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .application_text p { text-align: justify; margin-bottom: 10px; text-indent: calc(var(--margin) * 1.5); } .application_field { width: calc(100% - var(--margin) * 2); height: var(--profile-field-height); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; } .application_field select::placeholder { color: var(--tma-theme-subtitle-text-color); opacity: 0.4; } .application_field input { width: 95%; height: 40px; font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .application_field input::placeholder { color: var(--tma-theme-subtitle-text-color); opacity: 0.4; } .application_field textarea { width: 95%; height: 120px; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .application_field span { font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); } .application_field_span { font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); } .application_title { font-size: var(--profile-title-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-accent-text-color); } .application_title span { color: rgb(200,0,0) !important; font-size: var(--font-size) !important; } .submit_button { background: var(--tma-theme-button-color); width: var(--button-width); height: var(--button-height); border: none; border-radius: calc(var(--button-height) / 2); cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; } .submit_button span { font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); } .application_signature { width: calc(100% - var(--margin) * 2); color: var(--tma-theme-accent-text-color); cursor: pointer; font-size: var(--font-size); font-family: var(--font-family-basic); text-decoration: none; text-align: left; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; } .application_end_dilator { position: relative; width: 100%; height: var(--margin); } .application_browser_end_dilator { position: relative; width: 100%; height: calc(var(--margin) * 2.5); } /*******************************************************************************/ /************************************ PAYMENTS *********************************/ /*******************************************************************************/ .payments { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 15px; } .payments img { width: 100vw; } .payments_text { padding-left: 0; padding-right: 0; text-align: center; margin-top: calc(var(--margin) / 2); font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .payments_text.little_link { color: var(--tma-theme-accent-text-color); cursor: pointer; text-decoration: underline; } .payments_text_title { font-size: var(--title-font-size); font-weight: var(--font-weight-semibold); cursor: pointer; } .payments_text_title.big_link { color: var(--tma-theme-accent-text-color); cursor: pointer; } .payments_text textarea { width: 90%; height: 70vw; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .payments_button { background: var(--tma-theme-button-color); width: 80%; height: var(--button-height); border-radius: calc(var(--button-height) / 2); cursor: pointer; margin-top: calc(var(--margin) / 2); display: flex; flex-direction: column; justify-content: center; align-items: center; } .payments_button span { font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); } /*******************************************************************************/ /************************************ CONTACTS *********************************/ /*******************************************************************************/ .contacts { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; } .contacts img { width: 50vw; } .contact_item { background: var(--tma-theme-header-bg-color); width: calc(100% - var(--margin) * 2); height: var(--contact-height); border-radius: calc(var(--contact-height) / 10); border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; display: flex; flex-direction: row; justify-content: start; align-items: center; } .contact_photo { width: var(--contact-height); height: var(--contact-height); display: flex; flex-direction: column; justify-content: center; align-items: center; } .contact_photo img { width: calc(var(--contact-height) - var(--margin)); height: calc(var(--contact-height) - var(--margin)); border-radius: calc(var(--contact-height) / 15); } .contact_data { width: calc(100% - var(--contact-height)); height: var(--contact-height); margin-left: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: calc(var(--margin) / 1.5); } .contact_postition { font-family: var(--font-family-basic); color: var(--tma-theme-text-color); font-size: var(--subtitle-font-size); font-weight: var(--font-weight-semibold); } .contact_name { font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); } .contact_telegram { font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-accent-text-color); } .contacts_text { padding-left: var(--margin); padding-right: var(--margin); text-align: center; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .contacts_text.little_link { color: var(--tma-theme-accent-text-color); cursor: pointer; text-decoration: underline; } .contacts_text_title { font-size: var(--title-font-size); font-weight: var(--font-weight-semibold); cursor: pointer; } .contacts_text_title.big_link { color: var(--tma-theme-accent-text-color); cursor: pointer; } .contacts_button { background: var(--tma-theme-button-color); width: var(--button-width); height: var(--button-height); border-radius: calc(var(--button-height) / 2); cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; } .contacts_button span { font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); } /*******************************************************************************/ /************************************ PROFILE **********************************/ /*******************************************************************************/ .profile { background: #FFF; width: 100%; max-width: var(--lintu-mobile-screen-max-width); height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .profile-container { width: calc(100% - 16px * 2); height: 100%; } .profile-container-form { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; } .profile-container-form-title-brand { width: 100%; height: 66px; display: flex; flex-direction: column; justify-content: start; align-items: center; } .profile-container-form-title-product { font-family: var(--font-family-university); font-size: var(--title-university-font-size); color: var(--tma-theme-text-color); letter-spacing: 20px; margin-bottom: 20px; } .profile-container-form-title-info { width: 90%; height: 100px; text-align: center; font-size: 22px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .profile-container-form-title-description { width: 90%; height: 40px; font-size: 17px; font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .profile-container-form-title-country { width: 100%; height: 24px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 17px; line-height: 24px; letter-spacing: -0.006em; color: #393BC7; display: flex; flex-direction: column; justify-content: center; align-items: center; } .profile-container-form-title-country-span-error { color: #C00; } .profile-container-form-title-country-name { color: #393BC7; } .profile-container-form-input, .profile-container-form input { background: #F7F7F7; width: 100% !important; height: 46px; border-radius: 23px; border: 0; outline: 0; cursor: pointer; text-align: center; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 23px; line-height: 24px; letter-spacing: -0.006em; color: #393BC7; display: flex; flex-direction: column; justify-content: center; align-items: center; } .profile-container-form-input.active, .profile-container-form input:focus { background: #FFF; outline: 1px solid #393BC7; } .profile-container-form input::-webkit-outer-spin-button, .profile-container-form input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .profile-container-form input[type=number] { -moz-appearance: textfield; } .profile-container-form input::placeholder { color: #A4A4BA; } .profile-container-form input::-ms-input-placeholder { color: #A4A4BA; } .profile-container-form button { background: #393BC7; width: 100%; height: 46px; border-radius: calc(var(--button-height) / 2); cursor: pointer; margin-top: 50px; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 23px; line-height: 24px; letter-spacing: -0.006em; color: #FFF; border: none; display: flex; flex-direction: column; justify-content: center; align-items: center; } /*******************************************************************************/ /************************************ WALLET ***********************************/ /*******************************************************************************/ .wallet_body { background: var(--tma-theme-secondary-bg-color); } .wallet { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 0px; } .wallet_selector { background: var(--tma-theme-section-bg-color); width: 92%; height: 40px; margin-top: 16px; border-radius: 50vh; font-size: var(--wallet-text-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0px; } .wallet_selector_item_passive { width: 50%; height: 40px; border-radius: 50vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0px; } .wallet_selector_item_active { background: var(--tma-theme-accent-text-color); width: 50%; height: 40px; border-radius: 50vh; color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0px; } .wallet_balance { width: 100%; height: 160px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0px; } .wallet_balance_title { font-size: var(--wallet-text-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); } .wallet_balance_amount { font-size: var(--wallet-big-amount-font-size); font-family: var(--font-family-basic); font-weight: var(--font-weight-bold); color: var(--tma-theme-text-color); } .wallet_buttons_area { width: 100%; height: 60px; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; gap: 0; } .wallet_buttons_area_item_4b { background: var(--tma-theme-section-bg-color); width: calc(100% / 5); height: 60px; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; } .wallet_buttons_area_item_2b { background: var(--tma-theme-section-bg-color); width: calc(88% / 2); height: 60px; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; } .wallet_buttons_area_item_icon { color: var(--tma-theme-accent-text-color); font-size: var(--wallet-icon-font-size); } .wallet_buttons_area_item_text { color: var(--tma-theme-accent-text-color); font-size: var(--wallet-little-text-font-size); font-family: var(--font-family-basic); } .wallet_buttons_area_item_icon_stop { color: var(--tma-theme-destructive-text-color); font-size: var(--wallet-icon-font-size); } .wallet_buttons_area_item_text_stop { color: var(--tma-theme-destructive-text-color); font-size: var(--wallet-little-text-font-size); font-family: var(--font-family-basic); } .wallet_ghost { width: 100%; height: 24px; } .wallet_assets_container { width: 92%; height: auto; } .wallet_asset { background: var(--tma-theme-section-bg-color); width: 100%; height: 60px; display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 10px; } .wallet_asset:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; } .wallet_asset:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .wallet_asset_icon { width: 40px !important; height: 50px !important; color: var(--tma-theme-accent-text-color); font-size: var(--wallet-asset-icon-font-size); margin-left: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; } .wallet_asset_icon img { width: 40px; height: 40px; } .wallet_asset_icon svg { width: 50px; height: 50px; } .wallet_asset_text { width: calc(100% - 100px); height: 60px; color: var(--tma-theme-accent-text-color); font-size: var(--wallet-asset-icon-font-size); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; } .wallet_asset_text_border_bottom { background: var(--tma-theme-subtitle-text-color);; width: calc(100% - 60px); height: 1px; margin-left: 60px; opacity: 30%; } .wallet_asset_text_border_bottom.last_child { opacity: 0; } .wallet_asset_text_first_line { width: 100%; height: auto; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); font-size: var(--wallet-text-font-size); display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 0; } .wallet_asset_text_first_line_name { width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wallet_asset_text_first_line_amount { width: 20%; overflow: visible; text-overflow: ellipsis; white-space: nowrap; } .wallet_asset_text_second_line { width: 100%; height: auto; overflow: visible; font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); font-size: var(--wallet-small-text-font-size); display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 0; } .wallet_asset_text_second_line_name { width: 80% !important; overflow: hidden; text-overflow: ellipsis; /* white-space: nowrap; */ } .wallet_asset_text_second_line_amount { width: 20% !important; overflow: visible; text-overflow: ellipsis; white-space: nowrap; font-size: var(--wallet-small-text-font-size); color: var(--voucher-text-color-valid); } .wallet_asset_chevron { width: 40px; height: 60px; color: var(--tma-theme-subtitle-text-color); font-size: var(--wallet-icon-font-size); opacity: 30%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; } /*******************************************************************************/ /******************************** VOUCHER-STATUS *******************************/ /*******************************************************************************/ .voucher_status { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .voucher_status_container { padding-left: var(--margin); padding-right: var(--margin); text-align: center; margin-top: -100px; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_status_container_transfer_pwa { padding-left: var(--margin); padding-right: var(--margin); text-align: center; margin-top: -200px; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_status_container_transfer_tma { padding-left: var(--margin); padding-right: var(--margin); text-align: center; margin-top: -30px; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_status_text_title_potapoff { font-family: var(--font-family-potapoff); color: var(--tma-theme-accent-text-color); font-size: var(--title-potapoff-font-size); } .voucher_status_text { font-family: var(--font-family-basic); color: var(--tma-theme-accent-text-color); font-size: 23px; } .voucher_status_text_title { font-family: var(--font-family-basic); color: var(--tma-theme-accent-text-color); font-weight: var(--font-weight-superbold); font-size: 40px; } .voucher_status_text_title_certificate { font-family: var(--font-family-basic); font-size: var(--title-university-font-size); letter-spacing: 10px; } .voucher_status_text_title_certificate_input { width: 95%; height: 40px; margin-top: 5px; margin-bottom: 5px; font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .voucher_status_text_title_certificate_input::placeholder { color: var(--tma-theme-subtitle-text-color); opacity: 0.4; } .voucher_status_text_title_certificate_select { width: 95%; height: 40px; margin-top: 5px; margin-bottom: 5px; font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .voucher_status_text_title_serial_number { font-family: var(--font-family-basic); font-size: 14px; opacity: var(--voucher-status-serial-number-opacity); color: var(--tma-theme-text-color); text-align: center; margin-top: calc(var(--margin) / 6); cursor: pointer; } .voucher_status_text_vendor { /* font-family: var(--font-family-basic); font-family: var(--font-family-coopnode); font-family: var(--font-family-ban); font-family: var(--font-family-potapoff); font-family: var(--font-family-university); font-family: var(--font-family-dollar-bill); */ font-family: var(--font-family-basic); font-size: var(--voucher-status-text-vendor); } .voucher_status_text_vendor_image { width: 300px; height: 150px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .voucher_status_text_vendor_image_item { width: 150px; height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_status_text_vendor img { width:120px; height:120px; } .voucher_status_text_valid { font-family: var(--font-family-basic); color: var(--voucher-text-color-valid); font-size: var(--title-potapoff-font-size); font-weight: var(--font-weight-verybold); } .voucher_status_text_destructive { font-family: var(--font-family-basic); color: var(--tma-theme-destructive-text-color); font-size: var(--title-potapoff-font-size); font-weight: var(--font-weight-verybold); } .voucher_status_text_invalid { font-family: var(--font-family-basic); color: var(--voucher-text-color-invalid); font-size: var(--title-potapoff-font-size); font-weight: var(--font-weight-verybold); } .voucher_status_text_pending { margin-top: 10px; font-family: var(--font-family-basic); color: var(--voucher-text-color-pending); font-size: 35px; font-weight: var(--font-weight-verybold); animation: flicker 2s infinite; } .voucher_status_fixed_button_back { position: fixed; width: 80px; height: 80px; left: 20px; bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 40px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_status_fixed_button_info { position: fixed; width: 80px; height: 80px; right: 20px; bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 40px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_status_fixed_button_transfer { position: fixed; width: 80px; height: 80px; left: calc(((100% - (20px + 80px + 6px) * 2 - (80px + 6px) * 2) / 3) + (20px + 80px + 6px)); bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 40px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_status_fixed_button_activate { position: fixed; width: 80px; height: 80px; right: calc(((100% - (20px + 80px + 6px) * 2 - (80px + 6px) * 2) / 3) + (20px + 80px + 6px)); bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 40px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_status_fixed_big_button_back { position: fixed; width: calc(80% - 6px); height: 50px; left: 10%; bottom: 91px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 22px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; } .voucher_status_fixed_big_button_back i { font-size: 40px; } .voucher_status_fixed_big_button_info { background: var(--tma-theme-accent-text-color); position: fixed; width: calc(80% - 6px); height: 50px; left: 10%; bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 22px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } /*******************************************************************************/ /**************************** VOUCHER - CERTIFICATE ****************************/ /*******************************************************************************/ /********************************** VERSION 1 **********************************/ /*******************************************************************************/ .voucher_certificate_1 { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .voucher_certificate_1_container { padding-left: var(--margin); padding-right: var(--margin); text-align: center; margin-top: -100px; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_1_container_transfer_pwa { padding-left: var(--margin); padding-right: var(--margin); text-align: center; margin-top: -200px; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_1_container_transfer_tma { padding-left: var(--margin); padding-right: var(--margin); text-align: center; margin-top: -30px; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_1_text_title_potapoff { font-family: var(--font-family-potapoff); color: var(--tma-theme-accent-text-color); font-size: var(--title-potapoff-font-size); } .voucher_certificate_1_text { font-family: var(--font-family-basic); color: var(--tma-theme-accent-text-color); font-size: 23px; } .voucher_certificate_1_text_title { font-family: var(--font-family-basic); color: var(--tma-theme-accent-text-color); font-weight: var(--font-weight-superbold); font-size: 40px; } .voucher_certificate_1_text_title_certificate { font-family: var(--font-family-basic); font-size: var(--title-university-font-size); letter-spacing: 10px; } .voucher_certificate_1_text_title_certificate_input { width: 95%; height: 40px; margin-top: 5px; margin-bottom: 5px; font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .voucher_certificate_1_text_title_certificate_input::placeholder { color: var(--tma-theme-subtitle-text-color); opacity: 0.4; } .voucher_certificate_1_text_title_certificate_select { width: 95%; height: 40px; margin-top: 5px; margin-bottom: 5px; font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .voucher_certificate_1_text_title_serial_number { font-family: var(--font-family-basic); font-size: 14px; opacity: var(--voucher-status-serial-number-opacity); color: var(--tma-theme-text-color); text-align: center; margin-top: calc(var(--margin) / 6); cursor: pointer; } .voucher_certificate_1_text_vendor { /* font-family: var(--font-family-basic); font-family: var(--font-family-coopnode); font-family: var(--font-family-ban); font-family: var(--font-family-potapoff); font-family: var(--font-family-university); font-family: var(--font-family-dollar-bill); */ font-family: var(--font-family-basic); font-size: var(--voucher-status-text-vendor); } .voucher_certificate_1_text_vendor_image { width: 300px; height: 150px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .voucher_certificate_1_text_vendor_image_item { width: 150px; height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_1_text_vendor img { width:120px; height:120px; } .voucher_certificate_1_text_valid { font-family: var(--font-family-basic); color: var(--voucher-text-color-valid); font-size: var(--title-potapoff-font-size); font-weight: var(--font-weight-verybold); } .voucher_certificate_1_text_destructive { font-family: var(--font-family-basic); color: var(--tma-theme-destructive-text-color); font-size: var(--title-potapoff-font-size); font-weight: var(--font-weight-verybold); } .voucher_certificate_1_text_invalid { font-family: var(--font-family-basic); color: var(--voucher-text-color-invalid); font-size: var(--title-potapoff-font-size); font-weight: var(--font-weight-verybold); } .voucher_certificate_1_text_pending { margin-top: 10px; font-family: var(--font-family-basic); color: var(--voucher-text-color-pending); font-size: 35px; font-weight: var(--font-weight-verybold); animation: flicker 2s infinite; } .voucher_certificate_1_fixed_button_back { position: fixed; width: 80px; height: 80px; left: 20px; bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 40px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_1_fixed_button_info { position: fixed; width: 80px; height: 80px; right: 20px; bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 40px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_1_fixed_button_transfer { position: fixed; width: 80px; height: 80px; left: calc(((100% - (20px + 80px + 6px) * 2 - (80px + 6px) * 2) / 3) + (20px + 80px + 6px)); bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 40px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_1_fixed_button_activate { position: fixed; width: 80px; height: 80px; right: calc(((100% - (20px + 80px + 6px) * 2 - (80px + 6px) * 2) / 3) + (20px + 80px + 6px)); bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 40px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_1_fixed_big_button_back { position: fixed; width: calc(80% - 6px); height: 50px; left: 10%; bottom: 91px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 22px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; } .voucher_certificate_1_fixed_big_button_back i { font-size: 40px; } .voucher_certificate_1_fixed_big_button_info { background: var(--tma-theme-accent-text-color); position: fixed; width: calc(80% - 6px); height: 50px; left: 10%; bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 22px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } /*******************************************************************************/ /**************************** VOUCHER - CERTIFICATE ****************************/ /*******************************************************************************/ /********************************** VERSION 2 **********************************/ /*******************************************************************************/ .voucher_certificate_2 { background: var(--certificate-2-background-color); width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .voucher_certificate_2_container { width: calc(100% - var(--certificate-2-margin) * 2); height: calc(100% - var(--certificate-2-margin) * 2); border: 1px solid var(--certificate-2-border-color); border-radius: 32px; overflow: hidden; text-align: center; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); /* display: flex; flex-direction: column; justify-content: flex-start; align-items: center; */ } .voucher_certificate_2_brand { background: var(--certificate-2-accent-color); width: 100%; height: 14.25%; color: var(--certificate-2-background-color); font-style: normal; font-weight: 400; font-size: 32px; line-height: 39px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_product_title { background: var(--certificate-2-background-color); width: 100%; height: 20.75%; color: var(--certificate-2-accent-color); font-style: normal; font-weight: 400; font-size: 35px; line-height: 43px; text-align: center; text-transform: uppercase; display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_merchant_container { background: var(--certificate-2-background-color); width: 100%; height: 28.50%; border-top: 1px solid var(--certificate-2-border-color); color: var(--certificate-2-accent-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_merchant_amount { font-family: var(--font-family-basic); color: var(--certificate-2-accent-color); font-weight: var(--font-weight-superbold); font-size: 35px; } .voucher_certificate_2_merchant_image { background: var(--certificate-2-merchant-logo); width: 12vh; height: 12vh; border-radius: 17px; padding:10px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .voucher_certificate_2_merchant_image img { width: 90%; height: 90%; } .voucher_certificate_2_merchant_title { font-family: var(--font-family-basic); font-size: 20px; } .voucher_certificate_2_merchant_public_serial_number { width: 25vh; height: 20px; position: absolute; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); white-space: nowrap; overflow: hidden; margin-left: -340px; } .voucher_certificate_2_QR { background: var(--certificate-2-background-color); width: 100%; height: 16.8%; border-top: 1px solid var(--certificate-2-border-color); border-bottom: 1px solid var(--certificate-2-border-color); color: var(--certificate-2-accent-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_QR img { width: 14vh; height: 14vh; } .voucher_certificate_2_status_valid { background: var(--certificate-2-accent-color); width: 100%; height: 7%; color: var(--certificate-2-background-color); font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px; text-align: center; text-transform: uppercase; display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_status_invalid { background: var(--certificate-2-accent-color); width: 100%; height: 7%; color: var(--certificate-2-background-color); font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px; text-align: center; text-transform: uppercase; display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_status_pending { width: 100%; height: 7%; color: var(--certificate-2-accent-color); font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px; text-align: center; text-transform: uppercase; animation: flicker 2s infinite; display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_bottom_buttons_container { width: 100%; height: 12.7%; border-top: 1px solid var(--certificate-2-border-color); display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; } .voucher_certificate_2_bottom_button { background: var(--certificate-2-accent-color); width: 51px; height: 51px; overflow: hidden; border-radius: 51px; color: var(--certificate-2-background-color); font-size: 35px; font-family: var(--font-family-basic); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_container_transfer_pwa { padding-left: var(--margin); padding-right: var(--margin); text-align: center; margin-top: -200px; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_container_transfer_tma { padding-left: var(--margin); padding-right: var(--margin); text-align: center; margin-top: -30px; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_text_title_potapoff { font-family: var(--font-family-potapoff); color: var(--tma-theme-accent-text-color); font-size: var(--title-potapoff-font-size); } .voucher_certificate_2_text { font-family: var(--font-family-basic); color: var(--tma-theme-accent-text-color); font-size: 23px; } .voucher_certificate_2_text_title { font-family: var(--font-family-basic); color: var(--tma-theme-accent-text-color); font-weight: var(--font-weight-superbold); font-size: 40px; } .voucher_certificate_2_text_title_certificate { font-family: var(--font-family-basic); font-size: var(--title-university-font-size); letter-spacing: 10px; } .voucher_certificate_2_text_title_certificate_input { width: 95%; height: 40px; margin-top: 5px; margin-bottom: 5px; font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .voucher_certificate_2_text_title_certificate_input::placeholder { color: var(--tma-theme-subtitle-text-color); opacity: 0.4; } .voucher_certificate_2_text_title_certificate_select { width: 95%; height: 40px; margin-top: 5px; margin-bottom: 5px; font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .voucher_certificate_2_text_title_serial_number { font-family: var(--font-family-basic); font-size: 14px; opacity: var(--voucher-status-serial-number-opacity); color: var(--tma-theme-text-color); text-align: center; margin-top: calc(var(--margin) / 6); cursor: pointer; } .voucher_certificate_2_text_vendor { font-family: var(--font-family-basic); font-size: var(--voucher-status-text-vendor); } .voucher_certificate_2_text_vendor_image { width: 300px; height: 150px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .voucher_certificate_2_text_vendor_image_item { width: 150px; height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_text_vendor img { width:120px; height:120px; } .voucher_certificate_2_text_valid { font-family: var(--font-family-basic); color: var(--voucher-text-color-valid); font-size: var(--title-potapoff-font-size); font-weight: var(--font-weight-verybold); } .voucher_certificate_2_text_destructive { font-family: var(--font-family-basic); color: var(--tma-theme-destructive-text-color); font-size: var(--title-potapoff-font-size); font-weight: var(--font-weight-verybold); } .voucher_certificate_2_text_invalid { font-family: var(--font-family-basic); color: var(--voucher-text-color-invalid); font-size: var(--title-potapoff-font-size); font-weight: var(--font-weight-verybold); } .voucher_certificate_2_text_pending { margin-top: 10px; font-family: var(--font-family-basic); color: var(--voucher-text-color-pending); font-size: 35px; font-weight: var(--font-weight-verybold); animation: flicker 2s infinite; } .voucher_certificate_2_fixed_button_back { position: fixed; width: 80px; height: 80px; left: 20px; bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 40px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_fixed_button_info { position: fixed; width: 80px; height: 80px; right: 20px; bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 40px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_fixed_button_transfer { position: fixed; width: 80px; height: 80px; left: calc(((100% - (20px + 80px + 6px) * 2 - (80px + 6px) * 2) / 3) + (20px + 80px + 6px)); bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 40px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_fixed_button_activate { position: fixed; width: 80px; height: 80px; right: calc(((100% - (20px + 80px + 6px) * 2 - (80px + 6px) * 2) / 3) + (20px + 80px + 6px)); bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 40px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_certificate_2_fixed_big_button_back { position: fixed; width: calc(80% - 6px); height: 50px; left: 10%; bottom: 91px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 22px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; } .voucher_certificate_2_fixed_big_button_back i { font-size: 40px; } .voucher_certificate_2_fixed_big_button_info { background: var(--tma-theme-accent-text-color); position: fixed; width: calc(80% - 6px); height: 50px; left: 10%; bottom: 20px; overflow: hidden; border-radius: 50px; border-color: var(--tma-theme-accent-text-color); border-width: 3px; border-style: solid; font-size: 22px; font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } /*******************************************************************************/ /******************************* VOUCHER-TRANSFER ******************************/ /*******************************************************************************/ .voucher_transfer_title { font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); margin-top: 20px; margin-bottom: -10px; } .voucher_transfer_input { background: transparent; position: relative; width: calc(80% - 10px - 6px); height: 50px; margin-top: 10px; padding-left: 10px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; font-size: 33px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); } .voucher_transfer_title_country { width: 90%; height: 40px; margin-top:-9px; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_transfer_title_country_name { color: var(--tma-theme-text-color); } .voucher_transfer_form { width:100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } /*******************************************************************************/ /********************************* VOUCHER-INFO ********************************/ /*******************************************************************************/ .voucher_info_text_title_minisite { font-family: var(--font-family-university); font-size: var(--title-university-font-size); letter-spacing: 5px; } /*******************************************************************************/ /********************************* VOUCHER-ERROR ********************************/ /*******************************************************************************/ .voucher_error_text_title { font-family: var(--font-family-dollar-bill); color: var(--voucher-text-color-invalid); font-size: var(--title-potapoff-font-size); } .voucher_error_text { font-family: var(--font-family-basic); font-size: var(--title-university-font-size); letter-spacing: 5px; } .voucher_error_reset_button { background: var(--voucher-text-color-invalid); width: calc(100vw - 32px - 32px); height: var(--button-height); border-radius: calc(var(--button-height) / 2); cursor: pointer; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); border: none; display: flex; flex-direction: column; justify-content: center; align-items: center; } .voucher_error_button { background: var(--tma-theme-accent-text-color); width: calc(100vw - 32px - 32px); height: var(--button-height); border-radius: calc(var(--button-height) / 2); cursor: pointer; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); border: none; display: flex; flex-direction: column; justify-content: center; align-items: center; } .tma_color_button { background: var(--tma-theme-destructive-text-color); width: calc(100vw - 32px - 32px); height: var(--button-height); border-radius: calc(var(--button-height) / 2); cursor: pointer; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); border: none; display: flex; flex-direction: column; justify-content: center; align-items: center; } /*******************************************************************************/ /****************************** PAPER - CRYPTOCHECKS ***************************/ /*******************************************************************************/ .paper_pager_divider { background:#FFF; width:100%; height:14mm; page-break-before: always; } .paper_cryptochecks_container { background: #FFF; color: #000; overflow: auto; width: 100%; height: auto; display: flex; flex-direction: column; justify-content: start; align-items: center; } .paper_cryptocheck { background:#FFF; width: calc(100% - 4mm); height: 58mm; margin-top: 3mm; /* border: 0px solid black; */ display: flex; flex-direction: row; justify-content: center; align-items: center; } .paper_bill_body { background:#FFF; width: 80%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .paper_bill_body_content { background:#FFF; width: 100%; height: 42mm; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 30mm; } .paper_bill_body_content_status_qr img { width: 27mm; height: 27mm; margin-left: 2mm; margin-top: -4mm; } .paper_bill_body_content_secret_qr img { width: 27mm; height: 27mm; margin-left: -4mm; margin-top: -4mm; } .paper_bill_body_content_info_vendor_text { background:#FFF; width: 50%; height: 20px; font-family: var(--font-family-basic); font-size: 5mm; /* 6mm; */ text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } /*******************************************************************************/ /********************************** CRYPTOCHECKS *******************************/ /*******************************************************************************/ .cryptochecks_login { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; } .cryptochecks_login input { width: 60%; height: 40px; font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .cryptochecks_login input::placeholder { color: var(--tma-theme-subtitle-text-color); opacity: 0.4; } .cryptochecks_login button { background: var(--tma-theme-accent-text-color); width: 65%; height: var(--button-height); border-radius: calc(var(--button-height) / 2); cursor: pointer; margin-top: 60px; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); border: none; display: flex; flex-direction: column; justify-content: center; align-items: center; } .cryptochecks_content { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; overflow: auto; } .cryptochecks_content::-webkit-scrollbar { width: 0; } .cryptochecks_container { background: #FFF; color: #000; overflow: auto; width: 100%; height: auto; display: flex; flex-direction: column; justify-content: start; align-items: center; } .cryptocheck { width: calc(100% - 4mm); height: 62mm; margin-top: 2mm; border: 1px solid black; display: flex; flex-direction: row; justify-content: start; align-items: center; } .bill_stub { width: 20%; height: 100%; border-right: 1px solid black; display: flex; flex-direction: column; justify-content: center; align-items: center; } .bill_stub_hole { width: 100%; height: 33%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .bill_stub_qr { width: 100%; height: 33%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .bill_stub_qr img { width: 30mm; height: 30mm; } .bill_stub_blank { background:#FFF; width: 10mm; height: 100%; border-right: 3px dotted black; } .bill_body { width: 80%; height: 100%; } .bill_body_header { width: 100%; height: 10mm; white-space: nowrap; font-family: var(--font-family-dollar-bill); font-size: 6mm; text-align: left; display: flex; flex-direction: row; justify-content: center; align-items: center; } .bill_body_header.left { width: 60%; } .bill_body_header.right { width: 60%; } .bill_body_header.center { font-family: var(--font-family-basic); font-size: 6mm; text-align: center; font-size: 3mm; } .bill_body_content { width: 100%; height: 42mm; display: flex; flex-direction: row; justify-content: center; align-items: center; } .bill_body_content_status { width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .bill_body_content_status_text { font-family: var(--font-family-dollar-bill); font-size: 4mm; } .bill_body_content_status_qr img { width: 30mm; height: 30mm; } .bill_body_content_secret_qr img { width: 27mm; height: 27mm; } .bill_body_content_info { width: 50%; height: 100%; border: 1px solid black; border-radius: 2mm; display: flex; flex-direction: column; justify-content: center; align-items: center; } .bill_body_content_info_header { width: 100%; height: 20%; font-family: var(--font-family-dollar-bill); font-size: 4mm; display: flex; flex-direction: column; justify-content: center; align-items: center; } .bill_body_content_info_footer { width: 100%; height: 20%; font-family: var(--font-family-basic); font-size: 4mm; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .bill_body_content_info_vendor { width: 100%; height: 80%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .bill_body_content_info_vendor_qr { width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .bill_body_content_info_vendor_qr img { width: 30mm; height: 30mm; } .bill_body_content_info_vendor_text { width: 50%; height: 100%; font-family: var(--font-family-basic); font-size: 5mm; /* 6mm; */ text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .cryptochecks_panel { background: var(--pu-brand-bg-color-opacity-70); backdrop-filter: blur(var(--backdrop-filter-blur)); -webkit-backdrop-filter: blur(var(--backdrop-filter-blur)); position: fixed; width: 400px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .cryptochecks_panel_title_brand { width: 70%; height: 100px; font-family: var(--font-family-potapoff); font-size: var(--title-potapoff-font-size); color: var(--tma-theme-accent-text-color); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .cryptochecks_panel_title_product { font-family: var(--font-family-university); font-size: var(--title-university-font-size); color: var(--tma-theme-text-color); letter-spacing: 20px; margin-bottom: 20px; } .cryptochecks_panel_title_info { width: 90%; height: 100px; text-align: center; font-size: 22px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .cryptochecks_panel_title_description { width: 90%; height: 40px; font-size: 17px; font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .cryptochecks_panel_title_country { width: 90%; height: 40px; font-size: 17px; font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .cryptochecks_panel_title_country_name { color: var(--tma-theme-text-color); } .cryptochecks_panel input { width: 60%; height: 40px; margin-bottom:40px; font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .cryptochecks_panel input::placeholder { color: var(--tma-theme-subtitle-text-color); opacity: 0.4; } .cryptochecks_panel_link { width: 90%; height: 40px; font-size: 17px; font-family: var(--font-family-basic); color: var(--tma-theme-accent-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .cryptochecks_panel button { background: var(--tma-theme-accent-text-color); width: 65%; height: var(--button-height); border-radius: calc(var(--button-height) / 2); cursor: pointer; margin-top: 60px; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); border: none; display: flex; flex-direction: column; justify-content: center; align-items: center; } /*******************************************************************************/ /******************************* RESOURCE DETAILS ******************************/ /*******************************************************************************/ .resource_details_body { background: var(--tma-theme-secondary-bg-color); } .resource_details { width: 100%; height: auto; overflow: hidden; overflow-wrap: break-word; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 0px; } .resource_details_text { width: calc(100% - var(--margin)); font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .resource_details_text_title { width: 100%; text-align: center; font-family: var(--font-family-dollar-bill); color: var(--tma-theme-accent-text-color); font-size: var(--title-potapoff-font-size); margin-top: 5px; } .resource_details_text_chapter { font-family: var(--font-family-basic); color: var(--tma-theme-accent-text-color); font-size: var(--profile-input-font-size); margin-top: 10px; } .resource_details_text_content { font-family: var(--font-family-basic); font-size: var(--profile-input-font-size); word-break: break-all; } /*******************************************************************************/ /************************************* HOME ************************************/ /*******************************************************************************/ .home_name_bar { background: var(--tma-theme-bg-color); width: 100%; height: 60px; position: fixed; z-index: 100; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0px; } .home_name_bar_img { background: var(--tma-theme-accent-text-color); width: calc(45px + 0px); height: 45px; border-radius: 50%; margin-left: 16px; font-size: 30px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); font-weight: var(--font-weight-semibold); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0px; } .home_name_bar_text { width: calc(100% - 135px - 32px - 20px); height: 45px; margin-left: 16px; font-size: 15px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 0px; } .home_name_bar_icon { width: 45px; height: 45px; font-size: var(--title-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0px; } .home_buttons_area { position: relative; width: calc(100vw); height: calc((100vw - 32px - 30px) / 4); margin-top: 70px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; } .home_button { background: var(--tma-theme-bg-color); width: calc(((100vw - 32px - 30px) / 4) - 4px); height: calc(((100vw - 32px - 30px) / 4) - 4px); display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); } .home_button svg { width: 90%; } .home_button img { width: 90%; } .home_main_banner_area { position: relative; width: calc(100vw); height: 145px; margin-top: 10px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; } .home_main_banner_qr { background: var(--tma-theme-bg-color); position: relative; width: 140px; height: 140px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .home_main_banner_qr img { width: 90%; } .home_main_banner_qr svg { width: 90%; } .home_main_banner { background: var(--tma-theme-bg-color); position: relative; width: calc(100% - 148px - 16px - 16px - 6px); height: 140px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; overflow: hidden; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .home_main_banner_img { height: 100%; } .home_partners_programs { background: var(--tma-theme-bg-color); position: relative; width: calc(100% - 16px - 16px); height: 70px; margin-top: 10px; margin-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: row; justify-content: center; align-items: center; } .home_partners_programs span { font-size: 40px; } .home_partners_programs_chevron { margin-top: -3px; margin-left: 6px; font-size: 30px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); } .home_partners_programs_input { background: transparent; position: relative; width: calc(100% - 16px - 16px - 16px - 2px); height: 70px; margin-top: 10px; margin-left: 16px; padding-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: row; justify-content: center; align-items: center; } .home_partners_programs_button { background: var(--tma-theme-accent-text-color); position: relative; width: calc(100% - 16px - 16px); height: 70px; margin-top: 10px; margin-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: row; justify-content: center; align-items: center; } .home_carousel { background: var(--tma-theme-bg-color); position: relative; width: calc(100% - 16px - 16px); height: 160px; margin-top: 10px; margin-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; overflow: hidden; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); } .home_carousel_no_splider { background: var(--tma-theme-bg-color); position: relative; width: calc(100% - 16px - 16px); height: 160px; margin-top: 10px; margin-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; overflow: hidden; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .home_carousel_no_splider img { height: 100%; } .home_get_tel { background: rgba(19,20,21,.5); backdrop-filter: blur(var(--backdrop-filter-blur)); -webkit-backdrop-filter: blur(var(--backdrop-filter-blur)); position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; } /*******************************************************************************/ /************************************ CATALOG **********************************/ /*******************************************************************************/ .black_body { background: var(--tma-theme-header-bg-color); } .merchants_categories_title { width: 100%; height: 50px; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .merchants_category { background: var(--tma-theme-bg-color); width: calc(100% - 16px - 16px - 16px); height: 50px; margin-left: 16px; margin-top: 8px; border-radius: 8px; padding-left: 16px; font-size: 18px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: row; justify-content: start; align-items: center; } .merchants_category_text { display: flex; flex-direction: row; justify-content: start; align-items: center; flex-grow: 1; } .merchants_category_chevron { height: 40px; width: 40px; font-size: 30px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); margin-top: -5px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .merchants { background: var(--tma-theme-bg-color); width: calc(100% - 16px - 16px - 16px); height: 90px; margin-left: 16px; margin-top: 8px; border-radius: 8px; padding-left: 16px; font-size: 18px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 16px; } .merchants_logo { width: 80px; height: 80px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .merchants_logo svg { width: 100%; } .merchants_logo img { width: 100%; } .merchants_title { height: 80px; display: flex; flex-direction: column; justify-content: center; align-items: start; flex-grow: 1; } .merchants_title_chevron { height: 40px; width: 40px; font-size: 30px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); margin-top: -5px; display: flex; flex-direction: column; justify-content: center; align-items: center; } /*******************************************************************************/ /************************************** NEWS ***********************************/ /*******************************************************************************/ .news_title { width: 100%; height: 50px; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .news_item { background: var(--tma-theme-bg-color); width: calc(100vw - 16px - 16px - 6px); height: calc(100vw - 16px - 16px - 6px); margin-left: 16px; margin-top: 8px; border-radius: 10px; border: 3px solid var(--tma-theme-accent-text-color); font-size: 18px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: start; align-items: center; } .news_item_banner { background: var(--tma-theme-accent-text-color); width: calc(100vw - 16px - 16px - 6px); height: calc((100vw - 16px - 16px - 6px) / 2); font-size: 50px; font-family: var(--font-family-basic); color: var(--tma-theme-bg-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .news_item_action_period { width: 90%; height: 35px; font-size: 18px; font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: start; } .news_item_title { width: 90%; height: 35px; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: start; } .news_item_description { width: 90%; height: calc(((100vw - 16px - 16px - 6px) / 2) - 35px - 35px - 5px); font-size: 18px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: start; } /*******************************************************************************/ /******************************* MERCHANT_PROFILE ******************************/ /*******************************************************************************/ .merchant_profile_name_bar { background: var(--tma-theme-bg-color); width: 100%; height: 60px; position: fixed; z-index: 100; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0px; } .merchant_profile_name_bar_img { width: 45px; height: 45px; border-radius: 50%; margin-left: 16px; } .merchant_profile_name_bar_text { width: calc(100% - 16px - 45px - 16px - 8px - 45px); height: 45px; margin-left: 16px; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 0px; } .merchant_profile_name_bar_icon { width: 45px; height: 45px; font-size: var(--title-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0px; } .merchant_profile_buttons_area { position: relative; width: calc(100vw); height: calc((100vw - 32px - 30px) / 4); margin-top: 16px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; } .merchant_profile_button { background: var(--tma-theme-bg-color); width: calc(((100vw - 32px - 30px) / 4) - 4px); height: calc(((100vw - 32px - 30px) / 4) - 4px); display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); } .merchant_profile_button svg { width: 90%; } .merchant_profile_button img { width: 90%; } .merchant_profile_main_title { background: var(--tma-theme-bg-color); width: calc(100vw - 32px - 10px - (((100vw - 32px - 30px) / 4) - 4px) - 8px); height: calc(((100vw - 32px - 30px) / 4) - 4px); overflow: hidden; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .merchant_profile_description { background: var(--tma-theme-bg-color); position: relative; width: calc(100% - 16px - 16px); height: 160px; margin-top: 10px; margin-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; overflow: hidden; text-align: center; font-size: 16px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .merchant_profile_main_banner_area { position: relative; width: calc(100vw); height: 145px; margin-top: 10px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; } .merchant_profile_main_banner_qr { position: relative; width: 140px; height: 140px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .merchant_profile_main_banner_qr_img { width: 90%; } .merchant_profile_main_banner { position: relative; width: calc(100% - 148px - 16px - 16px - 10px); height: 140px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; overflow: hidden; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .merchant_profile_main_banner_img { height: 100%; } .merchant_profile_partners_programs { background: var(--tma-theme-bg-color); position: relative; width: calc(100% - 16px - 16px); height: 70px; margin-top: 10px; margin-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; text-align: center; overflow: hidden; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: row; justify-content: center; align-items: center; } .merchant_profile_partners_programs span { font-size: 40px; } .merchant_profile_partners_programs_chevron { margin-top: -3px; margin-left: 6px; font-size: 30px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); } .merchant_profile_partners_programs_button { background: var(--tma-theme-accent-text-color); position: relative; width: calc(100% - 16px - 16px); height: 70px; margin-top: 10px; margin-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; text-align: center; overflow: hidden; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: row; justify-content: center; align-items: center; } .merchant_profile_carousel { background: var(--tma-theme-bg-color); position: relative; width: calc(100% - 16px - 16px); height: 160px; margin-top: 10px; margin-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; overflow: hidden; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); } .merchant_profile_carousel_no_splider { background: var(--tma-theme-bg-color); position: relative; width: calc(100% - 16px - 16px); height: 160px; margin-top: 10px; margin-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; overflow: hidden; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .merchant_profile_carousel_no_splider img { height: 100%; } /*******************************************************************************/ /********************************** REGISTRATION *******************************/ /*******************************************************************************/ .registration { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: start; align-items: center; } .registration_title_brand { width: 70%; height: 100px; font-family: var(--font-family-potapoff); font-size: var(--title-potapoff-font-size); color: var(--tma-theme-accent-text-color); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .registration_title_product { font-family: var(--font-family-university); font-size: var(--title-university-font-size); color: var(--tma-theme-text-color); letter-spacing: 20px; margin-bottom: 20px; } .registration_title_description { width: 90%; height: 80px; text-align: center; font-size: 17px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .registration_title_country { width: 90%; height: 40px; font-size: 17px; font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .registration_title_country_name { color: var(--tma-theme-text-color); } .registration input { width: 60%; height: 40px; margin-bottom:20px; font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .registration input::placeholder { color: var(--tma-theme-subtitle-text-color); opacity: 0.4; } .registration_link { width: 90%; height: 40px; font-size: 17px; font-family: var(--font-family-basic); color: var(--tma-theme-accent-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .registration_ligal { width: 80%; height: 100px; font-size: 17px; font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 5px; } .registration_ligal span { color: var(--tma-theme-accent-text-color); text-decoration: underline; cursor: pointer; } .registration button { position: fixed; bottom: 50px; background: var(--tma-theme-accent-text-color); width: 65%; height: var(--button-height); border-radius: calc(var(--button-height) / 2); cursor: pointer; margin-top: 30px; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); border: none; display: flex; flex-direction: column; justify-content: center; align-items: center; } /*******************************************************************************/ /*********************************** SE-CASHIER ********************************/ /*******************************************************************************/ .cashier_login { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .cashier_login_title_brand { width: 70%; height: 100px; font-family: var(--font-family-potapoff); font-size: var(--title-potapoff-font-size); color: var(--tma-theme-accent-text-color); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .cashier_login_title_product { font-family: var(--font-family-university); font-size: var(--title-university-font-size); color: var(--tma-theme-text-color); letter-spacing: 20px; margin-bottom: 20px; } .cashier_login_title_info { width: 90%; height: 100px; text-align: center; font-size: 22px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .cashier_login_title_description { width: 90%; height: 40px; font-size: 17px; font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .cashier_login_title_country { width: 90%; height: 40px; font-size: 17px; font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .cashier_login_title_country_name { color: var(--tma-theme-text-color); } .cashier_login input { width: 60%; height: 40px; margin-bottom:40px; font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .cashier_login input::placeholder { color: var(--tma-theme-subtitle-text-color); opacity: 0.4; } .cashier_login_link { width: 90%; height: 40px; font-size: 17px; font-family: var(--font-family-basic); color: var(--tma-theme-accent-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .cashier_login button { background: var(--tma-theme-accent-text-color); width: 65%; height: var(--button-height); border-radius: calc(var(--button-height) / 2); cursor: pointer; margin-top: 60px; font-size: var(--font-size); font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); border: none; display: flex; flex-direction: column; justify-content: center; align-items: center; } /*******************************************************************************/ /******************************* CASHIER_CHECKER *******************************/ /*******************************************************************************/ .cashier_checker_name_bar { background: var(--tma-theme-bg-color); width: 100%; height: 60px; position: fixed; z-index: 100; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0px; } .cashier_checker_name_bar_img { width: 45px; height: 45px; border-radius: 50%; margin-left: 16px; } .cashier_checker_name_bar_text { width: calc(100% - 16px - 45px - 16px - 8px - 45px); height: 45px; margin-left: 16px; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 0px; } .cashier_checker_name_bar_icon { width: 45px; height: 45px; font-size: var(--title-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0px; } .cashier_checker_buttons_area { position: relative; width: calc(100vw); height: calc((100vw - 32px - 30px) / 4); margin-top: 16px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; } .cashier_checker_button { background: var(--tma-theme-bg-color); width: calc(((100vw - 32px - 30px) / 4) - 4px); height: calc(((100vw - 32px - 30px) / 4) - 4px); display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); } .cashier_checker_button svg { width: 90%; } .cashier_checker_button img { width: 90%; border-radius: 10px; } .cashier_checker_main_title { background: var(--tma-theme-bg-color); width: calc(100vw - 32px - 10px - (((100vw - 32px - 30px) / 4) - 4px) - 8px); height: calc(((100vw - 32px - 30px) / 4) - 4px); overflow: hidden; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .cashier_checker_description { background: var(--tma-theme-bg-color); position: relative; width: calc(100% - 16px - 16px); height: 160px; margin-top: 10px; margin-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; overflow: hidden; text-align: center; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .cashier_checker_description span { font-size: 13px; margin-bottom:0px; } .cashier_checker_description a { color: var(--tma-theme-text-color); text-decoration: none; margin-top: 12px; } .cashier_checker_start_description { background: var(--tma-theme-bg-color); position: relative; width: calc(100% - 16px - 16px - 16px - 16px - 4px); /* svh smallest viewport height => https://doka.guide/css/sv-lv-dv/ */ height: calc(100svh - 16px - 16px - 4px - var(--bottom-menu-height)); margin-top: 16px; margin-left: 16px; padding-left: 16px; padding-right: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; overflow: hidden; text-align: center; font-size: 30px; font-family: var(--font-family-basic); color: var(--tma-theme-subtitle-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .cashier_checker_main_banner_area { position: relative; width: calc(100vw); height: 145px; margin-top: 10px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; } .cashier_checker_main_banner_qr { position: relative; width: 140px; height: 140px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .cashier_checker_main_banner_qr_img { width: 90%; } .cashier_checker_main_banner { position: relative; width: calc(100% - 148px - 16px - 16px - 10px); height: 140px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; overflow: hidden; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .cashier_checker_main_banner_img { height: 100%; } .cashier_checker_partners_address { background: var(--tma-theme-bg-color); position: relative; width: calc(100% - 16px - 16px); height: 70px; margin-top: 10px; margin-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; text-align: center; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: row; justify-content: center; align-items: center; } .cashier_checker_partners_programs { background: var(--tma-theme-bg-color); position: relative; width: calc(100% - 16px - 16px); height: 70px; margin-top: 10px; margin-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; text-align: center; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: row; justify-content: center; align-items: center; } .cashier_checker_partners_programs.ok { color: var(--voucher-text-color-valid); } .cashier_checker_partners_programs_chevron { margin-top: -3px; margin-left: 6px; font-size: 30px; font-family: var(--font-family-basic); color: var(--voucher-text-color-valid); } .cashier_checker_partners_programs_chevron.ok { color: var(--voucher-text-color-valid); } .cashier_checker_carousel { position: relative; width: calc(100% - 16px - 16px); height: 160px; margin-top: 10px; margin-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; overflow: hidden; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); } .cashier_checker_carousel_no_splider { position: relative; width: calc(100% - 16px - 16px); height: 160px; margin-top: 10px; margin-left: 16px; border: 2px solid var(--tma-theme-accent-text-color); border-radius: 10px; overflow: hidden; font-size: 13px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .cashier_checker_carousel_no_splider img { height: 100%; } .cashier_checker_amount { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; } .cashier_checker_amount input { width: 60%; height: 70px; font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: transparent; border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .cashier_checker_amount input::placeholder { color: var(--tma-theme-subtitle-text-color); opacity: 0.4; } .cashier_checker_amount button { background: var(--tma-theme-accent-text-color); width: 65%; height: var(--button-height); border-radius: calc(var(--button-height) / 2); cursor: pointer; margin-top: 60px; font-size: var(--profile-input-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-button-text-color); border: none; display: flex; flex-direction: column; justify-content: center; align-items: center; } .ok { border: 2px solid var(--voucher-text-color-valid); } .error { border: 2px solid var(--voucher-text-color-invalid); } /*******************************************************************************/ /********************************** TRANSACTION ********************************/ /*******************************************************************************/ .transaction_main_title { width: 100%; height: 50px; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .transaction { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 12px; } .transaction img { width: calc(100% - var(--margin) * 2 * 4); border-radius: 15px; } .transaction_group { background: var(--tma-theme-bg-color); width: 96%; height: auto; padding-bottom: 15px; border-radius: 20px; display: flex; flex-direction: column; justify-content: start; align-items: center; } .transaction_group_title { width: 100%; height: 50px; margin-top: 10px; font-size: 20px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .transaction_field { width: 96%; height: var(--profile-field-height); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 7px; } .transaction_title { font-size: var(--profile-title-font-size); font-family: var(--font-family-basic); color: var(--tma-theme-accent-text-color); } .transaction_field input { width: 95%; height: 30px; font-size: 16px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: var(--tma-theme-bg-color); border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; } .transaction_field_like_input { width: 97%; height: 40px; overflow: hidden; font-size: 17px; font-family: var(--font-family-basic); color: var(--tma-theme-text-color); background: var(--tma-theme-header-bg-color); border-color: var(--tma-theme-accent-text-color); border-width: 1px; border-style: solid; border-radius: 10px; padding-left: 8px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; -webkit-touch-callout: text; /* iOS Safari */ -webkit-user-select: text; /* Chrome/Safari/Opera */ -khtml-user-select: text; /* Konqueror */ -moz-user-select: text; /* Firefox */ -ms-user-select: text; /* Internet Explorer/Edge */ user-select: text; /* Non-prefixed version, currently not supported by any browser */ } .transaction_field_like_input a { color: var(--tma-theme-text-color); text-decoration: none; } /*******************************************************************************/ /********************************** ANIMATIONS *********************************/ /*******************************************************************************/ .text_flicker { animation: flicker 3s infinite; } @keyframes flicker { 0% { opacity:0; } 50% { opacity:1; } 100% { opacity:0; } } /*******************************************************************************/ /********************************** @ M E D I A ********************************/ /*******************************************************************************/ /* @media (orientation: landscape) { html { display: none; } } */