/*******************************************************************************/ /**************************** COMPOSE ENGINE-LINTU *****************************/ /*******************************************************************************/ @import url('/lt/fonts/SFPRODISPLAY/SFPRODISPLAY.css'); @import url('/lt/fonts/Vanthian_Ragnarok/Vanthian_Ragnarok.css'); @import url('/lt/fonts/BondoluoPeek/BondoluoPeek.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-university: 'Bondoluo Peek', 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-back { background: #F7F7F7; position: absolute; width: 36px; height: 36px; border-radius: 18px; top: 12px; left: 12px; cursor: pointer; font-size: 32px; color: #A4A4BA; display: flex; flex-direction: column; justify-content: center; align-items: center; } .universal-popup-back i { margin-top: 4px; margin-left: -2px; font-size: 22px; color: var(--lt-brand-button-color); } .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-points2invest { 0% {opacity:0; transform:translateY(294px);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-points2invest { 0% {opacity:1; transform:translateY(0);} 100% {opacity:0; transform:translateY(294px);} } @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-investhistory { 0% {opacity:0; transform:translateY(100%);} 100% {opacity:1; transform:translateY(0);} } @keyframes close-down-popup-investhistory { 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.points2invest { height: 294px; } .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.investhistory, .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.investhistory::-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.points2invest { height: calc(100% - 282px); } .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.investhistory, .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.investhistory { 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.investhistory::-webkit-scrollbar { display: none; } .down-popup-body-investhistory-list-item { background: #FFFFFF; width: calc(100% - 16px * 2); height: 60px; border-radius: 12px; 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: 8px; } .down-popup-body-investhistory-list-item.long-list { height: auto; padding-top: 16px; padding-bottom: 16px; } .down-popup-body-investhistory-list-item-title { width: calc(100% - 10px * 2); height: 18px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .down-popup-body-investhistory-list-item-title-text { width: auto; height: 100%; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 120%; color: #2C2C38; display: flex; flex-direction: column; justify-content: center; align-items: center; } .down-popup-body-investhistory-list-item-title-points { width: 80px; height: 100%; font-family: var(--font-family-pp-object-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 120%; color: #2C2C38; display: flex; flex-direction: row; justify-content: start; align-items: center; } .down-popup-body-investhistory-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-investhistory-list-item-title-chevron i { margin-top: 2px; margin-left: 2px; font-size: 14px; } .down-popup-body-investhistory-list-item-amount { width: calc(100% - 10px * 2); height: 14px; 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: row; justify-content: space-between; align-items: center; gap: 4px; } .down-popup-body-investhistory-list-item-amount-text { width: auto; height: 100%; } .down-popup-body-investhistory-list-item-amount-share { width: 80px; 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: start; align-items: center; gap: 4px; } .down-popup-body-investhistory-list-item-amount.accent-color { color: #393BC7; } .down-popup-body-investhistory-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-investhistory-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-investhistory-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; } /*******************************************************************************/ /************************************ 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; }