@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); .icon-container { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; color: inherit; vertical-align: middle; cursor: inherit; fill: none; } .icon-container-dynamic { -webkit-box-flex: 0; -ms-flex: 0 0 var(--icon-width); flex: 0 0 var(--icon-width); min-width: var(--icon-width); max-width: var(--icon-width); min-height: var(--icon-height); max-height: var(--icon-height); } :root { /* Design system colors */ --tone-200: rgba(5, 5, 5, 0.06); --tone-300: rgba(0, 0, 0, 0.11); --tone-400: rgba(0, 0, 0, 0.28); --tone-500: rgba(0, 0, 0, 0.51); --tone-600: rgba(0, 0, 0, 0.65); --tone-700: rgba(0, 0, 0, 0.76); --tone-800: rgba(0, 0, 0, 0.86); --tone-900: rgba(0, 0, 0, 0.98); --absolute-100: #ffffff; --absolute-200: #f0f0f0; --absolute-300: #e3e3e3; --absolute-700: #3d3d3d; --absolute-800: #1f1f1f; --absolute-900: #050505; --aquamarine-500: rgba(1, 135, 144, 1); --red-100: rgba(228, 70, 86, 0.1); --red-500: rgba(211, 53, 69, 1); --blue-100: rgba(0, 122, 255, 0.1); --blue-400: rgba(0, 122, 255, 1); --text-secondary: rgba(0, 0, 0, 0.54); --text-disabled: rgba(0, 0, 0, 0.38); --white: white; --red: #ff3b2f; --light-red: #e44656; --transparent-red: rgba(228, 70, 86, 0.1); --light-footer-gray: #f1f1f1; --light-footer-bg-gray: #f8f8f8; --light-text-gray: rgba(0, 0, 0, 0.51); --text-black: rgba(0, 0, 0, 0.98); --text-black-title-popup: rgba(46, 46, 45, 1); --background-light-secondary: #f2f2f7; --popup-background: rgba(0, 0, 0, 0.28); --gray-border: rgba(0, 0, 0, 0.11); --gray-border-light: rgba(194, 194, 194, 0.5); --dark-gray: #333333; --light-gray: #d9d9d9; --medium-gray: #979797; --medium-dark-gray: #646464; --disabled-gray: #ebebeb; --disabled-dark-gray: #c2c2c2; --placeholder-gray: #f1f1f1; --white: white; --black: black; --light-black: rgba(61, 61, 61, 1); --main: #5648f8; --blue: rgba(0, 122, 255, 1); --link-blue: rgba(0, 106, 219, 1); --medium-main: #c1bbff; --light-main: #e7eafb; --accent: #22ccd8; --light-cookie-accent: rgba(233, 250, 251, 1); --light-accent: rgba(34, 204, 216, 0.2); --light-background-accent: rgba(144, 247, 254, 0.08); --lightest-accent: #b3eef2; --mts-red: #e30611; --yelow: #ff9f0a; --aquamarine: rgba(34, 204, 216, 0.1); /* New colors */ --black-bg: var(--absolute-700); --black-hover: var(--absolute-800); /* Border-radius variants */ --radius-sx: 4px; --radius-s: 8px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 32px; /* Box-shadows */ --shadow-xl: 0px 25px 59px rgba(0, 0, 0, 0.2); --shadow-m: 0px 16px 24px 0px rgba(0, 0, 0, 0.15); /** * Fonts using while preloading Lato * Or if preloading failed */ --fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-family-main: Roboto; --font-size-heading-first: 30px; --font-size-heading-second: 22px; --font-size-heading-third: 18px; /** * Margin for the product card * Is using in the product grids and sliders */ --product-margin: 8px; /** * Height of the `Header` component */ --header-height: 84px; /** * Margins between content and page body * On desktop does not make sense because numeric value is unknown * 0 here on desktop to not to violate calculations */ --wrapper-margin: 0; --wrapper-padding: 120px; /** * Cards spacings and width */ --card-spacing: 16px; --card-width: 282px; } @media only screen and (min-width: 768px) and (max-width: 991px) { :root { --product-margin: 7.5px } } @media only screen and (max-width: 767px) { :root { --product-margin: 5px } } @media only screen and (max-width: 767px) { :root { --header-height: 54px } } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) { :root { --wrapper-margin: 15px } } @media only screen and (min-width: 992px) { :root { --card-spacing: 24px } } @media only screen and (min-width: 992px) { :root { --card-width: calc((100% - (var(--card-spacing) * 2)) / 3) } } /* TODO: complete */ /* 1600 */ /* 1300 */ /* 992 */ /* 992 */ /* 768 */ /* 320 */ /* https://codepen.io/rbv912/pen/dYbqLQ */ .Spinner { --spinner-size: 1em; --spinner-color: var(--accent); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; height: var(--spinner-size); width: var(--spinner-size); -webkit-animation: loader-2-1 3s linear infinite; animation: loader-2-1 3s linear infinite; } .Spinner__label { display: inline-block; margin-left: 0.4em; } .Spinner span::after, .Spinner span::before { display: block; position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: var(--spinner-size); width: var(--spinner-size); -webkit-animation: loader-2-2 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite; animation: loader-2-2 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite; } .Spinner span { clip: rect(calc(var(--spinner-size) / 2), var(--spinner-size), var(--spinner-size), 0); } .Spinner span::before { content: ""; border: 0.16em solid transparent; border-top: 0.16em solid var(--spinner-color); border-radius: 50%; -webkit-animation-name: loader-2-3; animation-name: loader-2-3; } .Spinner span::after { content: ""; border: 0.16em solid var(--spinner-color); border-radius: 50%; opacity: 0.5; -webkit-animation: unset; animation: unset; } .Spinner--main { --spinner-color: var(--main); } .Spinner--accent { --spinner-color: var(--accent); } .Spinner--white { --spinner-color: var(--white); } .Spinner--white-plain { --spinner-segment: 8; --spinner-color: var(--white); } .Spinner--white-plain span { clip: unset; } .Spinner--white-plain span::before, .Spinner--white-plain span::after { border: 0.16em solid white; border: 0.16em solid var(--white); opacity: 1; clip: rect(calc(var(--spinner-size) / 2), var(--spinner-size), var(--spinner-size), 0); -webkit-animation: unset; animation: unset; } .Spinner--white-plain span::before { -webkit-transform: rotate(120deg); transform: rotate(120deg); } .Spinner--size-large { --spinner-size: 42px; } .Spinner--size-large span::before, .Spinner--size-large span::after { border-width: 4px; } .SpinnerOverlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: rgba(255,255,255,0.78824); z-index: 1; } .SpinnerOverlay .Spinner { position: relative; } @-webkit-keyframes loader-2-1 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-2-1 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loader-2-2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-2-2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loader-2-3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-2-3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .SpinnerOverlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.9); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 9999; } :root { /* Design system colors */ --tone-200: rgba(5, 5, 5, 0.06); --tone-300: rgba(0, 0, 0, 0.11); --tone-400: rgba(0, 0, 0, 0.28); --tone-500: rgba(0, 0, 0, 0.51); --tone-600: rgba(0, 0, 0, 0.65); --tone-700: rgba(0, 0, 0, 0.76); --tone-800: rgba(0, 0, 0, 0.86); --tone-900: rgba(0, 0, 0, 0.98); --absolute-100: #ffffff; --absolute-200: #f0f0f0; --absolute-300: #e3e3e3; --absolute-700: #3d3d3d; --absolute-800: #1f1f1f; --absolute-900: #050505; --aquamarine-500: rgba(1, 135, 144, 1); --red-100: rgba(228, 70, 86, 0.1); --red-500: rgba(211, 53, 69, 1); --blue-100: rgba(0, 122, 255, 0.1); --blue-400: rgba(0, 122, 255, 1); --text-secondary: rgba(0, 0, 0, 0.54); --text-disabled: rgba(0, 0, 0, 0.38); --white: white; --red: #ff3b2f; --light-red: #e44656; --transparent-red: rgba(228, 70, 86, 0.1); --light-footer-gray: #f1f1f1; --light-footer-bg-gray: #f8f8f8; --light-text-gray: rgba(0, 0, 0, 0.51); --text-black: rgba(0, 0, 0, 0.98); --text-black-title-popup: rgba(46, 46, 45, 1); --background-light-secondary: #f2f2f7; --popup-background: rgba(0, 0, 0, 0.28); --gray-border: rgba(0, 0, 0, 0.11); --gray-border-light: rgba(194, 194, 194, 0.5); --dark-gray: #333333; --light-gray: #d9d9d9; --medium-gray: #979797; --medium-dark-gray: #646464; --disabled-gray: #ebebeb; --disabled-dark-gray: #c2c2c2; --placeholder-gray: #f1f1f1; --white: white; --black: black; --light-black: rgba(61, 61, 61, 1); --main: #5648f8; --blue: rgba(0, 122, 255, 1); --link-blue: rgba(0, 106, 219, 1); --medium-main: #c1bbff; --light-main: #e7eafb; --accent: #22ccd8; --light-cookie-accent: rgba(233, 250, 251, 1); --light-accent: rgba(34, 204, 216, 0.2); --light-background-accent: rgba(144, 247, 254, 0.08); --lightest-accent: #b3eef2; --mts-red: #e30611; --yelow: #ff9f0a; --aquamarine: rgba(34, 204, 216, 0.1); /* New colors */ --black-bg: var(--absolute-700); --black-hover: var(--absolute-800); /* Border-radius variants */ --radius-sx: 4px; --radius-s: 8px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 32px; /* Box-shadows */ --shadow-xl: 0px 25px 59px rgba(0, 0, 0, 0.2); --shadow-m: 0px 16px 24px 0px rgba(0, 0, 0, 0.15); /** * Fonts using while preloading Lato * Or if preloading failed */ --fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-family-main: Roboto; --font-size-heading-first: 30px; --font-size-heading-second: 22px; --font-size-heading-third: 18px; /** * Margin for the product card * Is using in the product grids and sliders */ --product-margin: 8px; /** * Height of the `Header` component */ --header-height: 84px; /** * Margins between content and page body * On desktop does not make sense because numeric value is unknown * 0 here on desktop to not to violate calculations */ --wrapper-margin: 0; --wrapper-padding: 120px; /** * Cards spacings and width */ --card-spacing: 16px; --card-width: 282px; } @media only screen and (min-width: 768px) and (max-width: 991px) { :root { --product-margin: 7.5px } } @media only screen and (max-width: 767px) { :root { --product-margin: 5px } } @media only screen and (max-width: 767px) { :root { --header-height: 54px } } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) { :root { --wrapper-margin: 15px } } @media only screen and (min-width: 992px) { :root { --card-spacing: 24px } } @media only screen and (min-width: 992px) { :root { --card-width: calc((100% - (var(--card-spacing) * 2)) / 3) } } /* TODO: complete */ /* 1600 */ /* 1300 */ /* 992 */ /* 992 */ /* 768 */ /* 320 */ :root { --PhoneInputCountryFlag-borderColor: transparent; --PhoneInputCountrySelectArrow-opacity: 1; } .CheckboxForFormik { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; cursor: pointer; } .CheckboxForFormik__mark { -ms-flex-negative: 0; flex-shrink: 0; width: 20px; height: 20px; position: relative; border: 1px solid rgba(0, 0, 0, 0.51); border: 1px solid var(--light-text-gray); border-radius: 2px; } .CheckboxForFormik__mark--has-label { margin-right: 12px; } .CheckboxForFormik__input { width: 100%; height: 100%; opacity: 0; pointer-events: none; } .CheckboxForFormik__graphics { display: none; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-flex: 0; -ms-flex: 0 0 20px; flex: 0 0 20px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; padding-right: 1px; background-color: #333333; background-color: var(--dark-gray); } .CheckboxForFormik__graphics path { stroke: white; stroke: var(--white); } /* &__input:checked + &__graphics, */ .CheckboxForFormik--checked .CheckboxForFormik__graphics { display: -webkit-box; display: -ms-flexbox; display: flex; } .Checkbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .Checkbox__input { opacity: 0; pointer-events: none; position: absolute; } .Checkbox__graphics { position: relative; border: 1px solid rgba(0, 0, 0, 0.51); border: 1px solid var(--light-text-gray); border-radius: 2px; margin-right: 10px; } .Checkbox__graphics svg { position: absolute; top: -1px; right: 0; bottom: 0; left: -1px; display: none; } .Checkbox__graphics svg path { fill: white; fill: var(--white); } .Checkbox__input:checked + .Checkbox__graphics { background-color: #333333; background-color: var(--dark-gray); } .Checkbox__input:checked + .Checkbox__graphics svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } :root { /* Design system colors */ --tone-200: rgba(5, 5, 5, 0.06); --tone-300: rgba(0, 0, 0, 0.11); --tone-400: rgba(0, 0, 0, 0.28); --tone-500: rgba(0, 0, 0, 0.51); --tone-600: rgba(0, 0, 0, 0.65); --tone-700: rgba(0, 0, 0, 0.76); --tone-800: rgba(0, 0, 0, 0.86); --tone-900: rgba(0, 0, 0, 0.98); --absolute-100: #ffffff; --absolute-200: #f0f0f0; --absolute-300: #e3e3e3; --absolute-700: #3d3d3d; --absolute-800: #1f1f1f; --absolute-900: #050505; --aquamarine-500: rgba(1, 135, 144, 1); --red-100: rgba(228, 70, 86, 0.1); --red-500: rgba(211, 53, 69, 1); --blue-100: rgba(0, 122, 255, 0.1); --blue-400: rgba(0, 122, 255, 1); --text-secondary: rgba(0, 0, 0, 0.54); --text-disabled: rgba(0, 0, 0, 0.38); --white: white; --red: #ff3b2f; --light-red: #e44656; --transparent-red: rgba(228, 70, 86, 0.1); --light-footer-gray: #f1f1f1; --light-footer-bg-gray: #f8f8f8; --light-text-gray: rgba(0, 0, 0, 0.51); --text-black: rgba(0, 0, 0, 0.98); --text-black-title-popup: rgba(46, 46, 45, 1); --background-light-secondary: #f2f2f7; --popup-background: rgba(0, 0, 0, 0.28); --gray-border: rgba(0, 0, 0, 0.11); --gray-border-light: rgba(194, 194, 194, 0.5); --dark-gray: #333333; --light-gray: #d9d9d9; --medium-gray: #979797; --medium-dark-gray: #646464; --disabled-gray: #ebebeb; --disabled-dark-gray: #c2c2c2; --placeholder-gray: #f1f1f1; --white: white; --black: black; --light-black: rgba(61, 61, 61, 1); --main: #5648f8; --blue: rgba(0, 122, 255, 1); --link-blue: rgba(0, 106, 219, 1); --medium-main: #c1bbff; --light-main: #e7eafb; --accent: #22ccd8; --light-cookie-accent: rgba(233, 250, 251, 1); --light-accent: rgba(34, 204, 216, 0.2); --light-background-accent: rgba(144, 247, 254, 0.08); --lightest-accent: #b3eef2; --mts-red: #e30611; --yelow: #ff9f0a; --aquamarine: rgba(34, 204, 216, 0.1); /* New colors */ --black-bg: var(--absolute-700); --black-hover: var(--absolute-800); /* Border-radius variants */ --radius-sx: 4px; --radius-s: 8px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 32px; /* Box-shadows */ --shadow-xl: 0px 25px 59px rgba(0, 0, 0, 0.2); --shadow-m: 0px 16px 24px 0px rgba(0, 0, 0, 0.15); /** * Fonts using while preloading Lato * Or if preloading failed */ --fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-family-main: Roboto; --font-size-heading-first: 30px; --font-size-heading-second: 22px; --font-size-heading-third: 18px; /** * Margin for the product card * Is using in the product grids and sliders */ --product-margin: 8px; /** * Height of the `Header` component */ --header-height: 84px; /** * Margins between content and page body * On desktop does not make sense because numeric value is unknown * 0 here on desktop to not to violate calculations */ --wrapper-margin: 0; --wrapper-padding: 120px; /** * Cards spacings and width */ --card-spacing: 16px; --card-width: 282px; } @media only screen and (min-width: 768px) and (max-width: 991px) { :root { --product-margin: 7.5px } } @media only screen and (max-width: 767px) { :root { --product-margin: 5px } } @media only screen and (max-width: 767px) { :root { --header-height: 54px } } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) { :root { --wrapper-margin: 15px } } @media only screen and (min-width: 992px) { :root { --card-spacing: 24px } } @media only screen and (min-width: 992px) { :root { --card-width: calc((100% - (var(--card-spacing) * 2)) / 3) } } /* TODO: complete */ /* 1600 */ /* 1300 */ /* 992 */ /* 992 */ /* 768 */ /* 320 */ .Link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; color: #333333; color: var(--dark-gray); -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease; } .Link:hover { opacity: 0.7; } .Link:active { -webkit-transform: scale(0.99); transform: scale(0.99); } .Link--withArrow { padding-right: 28px; } @media (hover: hover) { .Link--withArrow:hover .Link__arrow { -webkit-transform: translateX(10%); transform: translateX(10%); } } .Link__arrow { position: absolute; top: 0; right: 0; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } @media only screen and (max-width: 767px) { .Link__arrow { right: 2px; -webkit-transform: scale(0.75); transform: scale(0.75) } } .Link--heavy { font-weight: 600; font-size: 24px; line-height: 29px; } @media only screen and (max-width: 767px) { .Link--heavy { font-size: 20px; line-height: 24px } } .Link--box { padding: 8px 13px; border: 1px solid rgba(0, 0, 0, 0); border-radius: 5px; background: white; background: var(--white); -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); -webkit-transition: border-color 0.3s ease; transition: border-color 0.3s ease; } @media (hover: hover) { .Link--box:hover { border-color: rgba(34, 204, 216, 0.2); border-color: var(--light-accent); opacity: 1; } } .Link--main { color: #5648f8; color: var(--main); } .Link--accent { color: rgba(34, 204, 216, 0.2); color: var(--light-accent); cursor: pointer; } @media (hover: hover) { .Link--accent:hover { opacity: 0.7; } } .Link--black { color: black; color: var(--black); cursor: pointer; } @media (hover: hover) { .Link--black:hover { opacity: 0.7; } } :root { /* Design system colors */ --tone-200: rgba(5, 5, 5, 0.06); --tone-300: rgba(0, 0, 0, 0.11); --tone-400: rgba(0, 0, 0, 0.28); --tone-500: rgba(0, 0, 0, 0.51); --tone-600: rgba(0, 0, 0, 0.65); --tone-700: rgba(0, 0, 0, 0.76); --tone-800: rgba(0, 0, 0, 0.86); --tone-900: rgba(0, 0, 0, 0.98); --absolute-100: #ffffff; --absolute-200: #f0f0f0; --absolute-300: #e3e3e3; --absolute-700: #3d3d3d; --absolute-800: #1f1f1f; --absolute-900: #050505; --aquamarine-500: rgba(1, 135, 144, 1); --red-100: rgba(228, 70, 86, 0.1); --red-500: rgba(211, 53, 69, 1); --blue-100: rgba(0, 122, 255, 0.1); --blue-400: rgba(0, 122, 255, 1); --text-secondary: rgba(0, 0, 0, 0.54); --text-disabled: rgba(0, 0, 0, 0.38); --white: white; --red: #ff3b2f; --light-red: #e44656; --transparent-red: rgba(228, 70, 86, 0.1); --light-footer-gray: #f1f1f1; --light-footer-bg-gray: #f8f8f8; --light-text-gray: rgba(0, 0, 0, 0.51); --text-black: rgba(0, 0, 0, 0.98); --text-black-title-popup: rgba(46, 46, 45, 1); --background-light-secondary: #f2f2f7; --popup-background: rgba(0, 0, 0, 0.28); --gray-border: rgba(0, 0, 0, 0.11); --gray-border-light: rgba(194, 194, 194, 0.5); --dark-gray: #333333; --light-gray: #d9d9d9; --medium-gray: #979797; --medium-dark-gray: #646464; --disabled-gray: #ebebeb; --disabled-dark-gray: #c2c2c2; --placeholder-gray: #f1f1f1; --white: white; --black: black; --light-black: rgba(61, 61, 61, 1); --main: #5648f8; --blue: rgba(0, 122, 255, 1); --link-blue: rgba(0, 106, 219, 1); --medium-main: #c1bbff; --light-main: #e7eafb; --accent: #22ccd8; --light-cookie-accent: rgba(233, 250, 251, 1); --light-accent: rgba(34, 204, 216, 0.2); --light-background-accent: rgba(144, 247, 254, 0.08); --lightest-accent: #b3eef2; --mts-red: #e30611; --yelow: #ff9f0a; --aquamarine: rgba(34, 204, 216, 0.1); /* New colors */ --black-bg: var(--absolute-700); --black-hover: var(--absolute-800); /* Border-radius variants */ --radius-sx: 4px; --radius-s: 8px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 32px; /* Box-shadows */ --shadow-xl: 0px 25px 59px rgba(0, 0, 0, 0.2); --shadow-m: 0px 16px 24px 0px rgba(0, 0, 0, 0.15); /** * Fonts using while preloading Lato * Or if preloading failed */ --fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-family-main: Roboto; --font-size-heading-first: 30px; --font-size-heading-second: 22px; --font-size-heading-third: 18px; /** * Margin for the product card * Is using in the product grids and sliders */ --product-margin: 8px; /** * Height of the `Header` component */ --header-height: 84px; /** * Margins between content and page body * On desktop does not make sense because numeric value is unknown * 0 here on desktop to not to violate calculations */ --wrapper-margin: 0; --wrapper-padding: 120px; /** * Cards spacings and width */ --card-spacing: 16px; --card-width: 282px; } @media only screen and (min-width: 768px) and (max-width: 991px) { :root { --product-margin: 7.5px } } @media only screen and (max-width: 767px) { :root { --product-margin: 5px } } @media only screen and (max-width: 767px) { :root { --header-height: 54px } } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) { :root { --wrapper-margin: 15px } } @media only screen and (min-width: 992px) { :root { --card-spacing: 24px } } @media only screen and (min-width: 992px) { :root { --card-width: calc((100% - (var(--card-spacing) * 2)) / 3) } } /* TODO: complete */ /* 1600 */ /* 1300 */ /* 992 */ /* 992 */ /* 768 */ /* 320 */ .SearchItem__row { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; padding: 0.7em 0.4em 0.7em 1.4em; border-top: 1px solid #ebebeb; -webkit-transition: 0.3s; transition: 0.3s; } @media only screen and (max-width: 767px),only screen and (min-width: 768px) and (max-width: 991px) { .SearchItem__row { padding-left: 11px } } @media (hover: hover) { .SearchItem__row:hover { opacity: 0.7; cursor: pointer; } } .SearchItem__row::after { position: absolute; top: 1.4em; right: 1.4em; } @media only screen and (max-width: 767px),only screen and (min-width: 768px) and (max-width: 991px) { .SearchItem__row::after { right: 19px } } .Search--stroked .SearchItem__row { padding-left: 0.75em; padding-right: 0.75em; } .SearchItem__attraction::after { content: url(/static/media/museum.10a9b031.svg); /* right: 33px; */ right: 1.2em; width: 22px; height: 22px; } @media only screen and (max-width: 767px),only screen and (min-width: 768px) and (max-width: 991px) { .SearchItem__attraction::after { right: 19px } } .SearchItem__city::after { content: url(/static/media/geo.6cf7ccbd.svg); width: 1.05em; height: 1.29em; top: 1.2em; right: 1.2em; } @media only screen and (max-width: 767px),only screen and (min-width: 768px) and (max-width: 991px) { .SearchItem__city::after { right: 21px } } .SearchItem__highlightedPlace { font-weight: 600; font-size: 1em; display: block; } @media only screen and (max-width: 767px),only screen and (min-width: 768px) and (max-width: 991px) { .SearchItem__highlightedPlace { font-size: 1em; font-weight: 500; line-height: 1.29em } } .SearchItem__highlighted { font-weight: 600; color: #5648f8; color: var(--main); background: none; } .SearchItem__title { font-weight: 400; font-size: 1em; display: block; text-align: left; } @media only screen and (max-width: 767px),only screen and (min-width: 768px) and (max-width: 991px) { .SearchItem__title { font-size: 1em; font-weight: 500; line-height: 1.29em } } .SearchItem__place { font-size: 0.7em; color: #979797; margin-top: 3px; margin-bottom: -4.5px; display: block; text-align: left; } .SearchItem__price { color: #c2c2c2; font-weight: bold; font-size: 1em; -ms-flex-item-align: center; align-self: center; margin-left: auto; } @media only screen and (max-width: 767px),only screen and (min-width: 768px) and (max-width: 991px) { .SearchItem__price { right: 19px } } :root { /* Design system colors */ --tone-200: rgba(5, 5, 5, 0.06); --tone-300: rgba(0, 0, 0, 0.11); --tone-400: rgba(0, 0, 0, 0.28); --tone-500: rgba(0, 0, 0, 0.51); --tone-600: rgba(0, 0, 0, 0.65); --tone-700: rgba(0, 0, 0, 0.76); --tone-800: rgba(0, 0, 0, 0.86); --tone-900: rgba(0, 0, 0, 0.98); --absolute-100: #ffffff; --absolute-200: #f0f0f0; --absolute-300: #e3e3e3; --absolute-700: #3d3d3d; --absolute-800: #1f1f1f; --absolute-900: #050505; --aquamarine-500: rgba(1, 135, 144, 1); --red-100: rgba(228, 70, 86, 0.1); --red-500: rgba(211, 53, 69, 1); --blue-100: rgba(0, 122, 255, 0.1); --blue-400: rgba(0, 122, 255, 1); --text-secondary: rgba(0, 0, 0, 0.54); --text-disabled: rgba(0, 0, 0, 0.38); --white: white; --red: #ff3b2f; --light-red: #e44656; --transparent-red: rgba(228, 70, 86, 0.1); --light-footer-gray: #f1f1f1; --light-footer-bg-gray: #f8f8f8; --light-text-gray: rgba(0, 0, 0, 0.51); --text-black: rgba(0, 0, 0, 0.98); --text-black-title-popup: rgba(46, 46, 45, 1); --background-light-secondary: #f2f2f7; --popup-background: rgba(0, 0, 0, 0.28); --gray-border: rgba(0, 0, 0, 0.11); --gray-border-light: rgba(194, 194, 194, 0.5); --dark-gray: #333333; --light-gray: #d9d9d9; --medium-gray: #979797; --medium-dark-gray: #646464; --disabled-gray: #ebebeb; --disabled-dark-gray: #c2c2c2; --placeholder-gray: #f1f1f1; --white: white; --black: black; --light-black: rgba(61, 61, 61, 1); --main: #5648f8; --blue: rgba(0, 122, 255, 1); --link-blue: rgba(0, 106, 219, 1); --medium-main: #c1bbff; --light-main: #e7eafb; --accent: #22ccd8; --light-cookie-accent: rgba(233, 250, 251, 1); --light-accent: rgba(34, 204, 216, 0.2); --light-background-accent: rgba(144, 247, 254, 0.08); --lightest-accent: #b3eef2; --mts-red: #e30611; --yelow: #ff9f0a; --aquamarine: rgba(34, 204, 216, 0.1); /* New colors */ --black-bg: var(--absolute-700); --black-hover: var(--absolute-800); /* Border-radius variants */ --radius-sx: 4px; --radius-s: 8px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 32px; /* Box-shadows */ --shadow-xl: 0px 25px 59px rgba(0, 0, 0, 0.2); --shadow-m: 0px 16px 24px 0px rgba(0, 0, 0, 0.15); /** * Fonts using while preloading Lato * Or if preloading failed */ --fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-family-main: Roboto; --font-size-heading-first: 30px; --font-size-heading-second: 22px; --font-size-heading-third: 18px; /** * Margin for the product card * Is using in the product grids and sliders */ --product-margin: 8px; /** * Height of the `Header` component */ --header-height: 84px; /** * Margins between content and page body * On desktop does not make sense because numeric value is unknown * 0 here on desktop to not to violate calculations */ --wrapper-margin: 0; --wrapper-padding: 120px; /** * Cards spacings and width */ --card-spacing: 16px; --card-width: 282px; } @media only screen and (min-width: 768px) and (max-width: 991px) { :root { --product-margin: 7.5px } } @media only screen and (max-width: 767px) { :root { --product-margin: 5px } } @media only screen and (max-width: 767px) { :root { --header-height: 54px } } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) { :root { --wrapper-margin: 15px } } @media only screen and (min-width: 992px) { :root { --card-spacing: 24px } } @media only screen and (min-width: 992px) { :root { --card-width: calc((100% - (var(--card-spacing) * 2)) / 3) } } /* TODO: complete */ /* 1600 */ /* 1300 */ /* 992 */ /* 992 */ /* 768 */ /* 320 */ .Search { width: 100%; position: relative; color: #333333; color: var(--dark-gray); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .Search--big { font-size: 20px; width: 589px; } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) { .Search--big { font-size: 17px; width: 100% } } .Search__row { position: relative; overflow: hidden; background: white; background: var(--background-color, white); border-radius: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 8px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .Search__row[focus-within] { -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .Search__row:focus-within { -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .Search--filled { } .Search--results-visible .Search__row { border-radius: 16px 16px 0 0; } .Search__results { width: 100%; position: absolute; z-index: 999; border-radius: 0 0 16px 16px; -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); overflow: auto; max-height: 70vh; background: white; background: var(--background-color, white); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; scrollbar-width: thin; scrollbar-color: #22ccd8 #d9d9d9; scrollbar-color: var(--accent) var(--light-gray); } .Search__results::-webkit-scrollbar { width: 6px; } .Search__results::-webkit-scrollbar-track { background: #d9d9d9; background: var(--light-gray); } .Search__results::-webkit-scrollbar-thumb { background-color: #5648f8; background-color: var(--main); border-radius: 3px; } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) { .Search--big .Search__results { top: 2.5em } } .Search__icon { width: 1.2em; font-size: 1em; position: absolute; top: 0; bottom: 0; margin: auto; color: #5648f8; color: var(--main); stroke-linecap: round; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) { .Search__icon { font-size: 20px; width: 20px; height: 20px } } .Header__search .Search__icon { font-size: 16px; } .Search--big .Search__icon { font-size: 1.2em; right: 1.2em; } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) { .Search--big .Search__icon { right: 0.8em } } .Search--filled .Search__icon--glass { display: none; } .Search__search-button { max-width: 85px; margin-left: 8px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .Search__search-button:hover { -webkit-transform: translateY(-1px); transform: translateY(-1px); } .Search__input { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; border: none; outline: none; padding: 12px 16px; border-radius: inherit; font-family: inherit; font-size: 1em; font-weight: normal; color: var(--dark-gray); color: var(--text-color, var(--dark-gray)); caret-color: #5648f8; caret-color: var(--main); background: transparent; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) { .Search__input { padding: 12px 40px 12px 12px; font-size: 16px; line-height: 1.5 } } .Search__input::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.65); color: var(--tone-600); font-weight: 400; font-size: 16px; line-height: 22px; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .Search__input::-moz-placeholder { color: rgba(0, 0, 0, 0.65); color: var(--tone-600); font-weight: 400; font-size: 16px; line-height: 22px; -moz-transition: color 0.3s ease; transition: color 0.3s ease; } .Search__input:-ms-input-placeholder { color: rgba(0, 0, 0, 0.65); color: var(--tone-600); font-weight: 400; font-size: 16px; line-height: 22px; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .Search__input::-ms-input-placeholder { color: rgba(0, 0, 0, 0.65); color: var(--tone-600); font-weight: 400; font-size: 16px; line-height: 22px; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .Search__input::placeholder { color: rgba(0, 0, 0, 0.65); color: var(--tone-600); font-weight: 400; font-size: 16px; line-height: 22px; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .Search__input:focus::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.28); color: var(--tone-400); } .Search__input:focus::-moz-placeholder { color: rgba(0, 0, 0, 0.28); color: var(--tone-400); } .Search__input:focus:-ms-input-placeholder { color: rgba(0, 0, 0, 0.28); color: var(--tone-400); } .Search__input:focus::-ms-input-placeholder { color: rgba(0, 0, 0, 0.28); color: var(--tone-400); } .Search__input:focus::placeholder { color: rgba(0, 0, 0, 0.28); color: var(--tone-400); } .Search--stroked .Search__input { height: 44px; padding: 0.75em 0.66em; } .Search--stroked .Search__input::-webkit-input-placeholder { font-weight: 500; font-size: 16px; line-height: 140%; letter-spacing: -1%; } .Search--stroked .Search__input::-moz-placeholder { font-weight: 500; font-size: 16px; line-height: 140%; letter-spacing: -1%; } .Search--stroked .Search__input:-ms-input-placeholder { font-weight: 500; font-size: 16px; line-height: 140%; letter-spacing: -1%; } .Search--stroked .Search__input::-ms-input-placeholder { font-weight: 500; font-size: 16px; line-height: 140%; letter-spacing: -1%; } .Search--stroked .Search__input::placeholder { font-weight: 500; font-size: 16px; line-height: 140%; letter-spacing: -1%; } .Search--stroked .Search__input:focus, .Search--stroked .Search__input.focus { outline: 0; border-color: #22ccd8; border-color: var(--accent); } .Search--werewolf.Search--touched .Search__input { border-color: transparent; } .Search--stroked .Search__row { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #d9d9d9; border: 1px solid var(--light-gray); padding: 4px; } .Search--werewolf.Search--touched .Search__row { -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.2); box-shadow: 0 0 1em rgba(0, 0, 0, 0.2); } .Search--inline { width: 100%; border: unset; border-radius: 0; overflow: visible; } .Search--inline .Search__row { -webkit-box-shadow: none; box-shadow: none; } .Search--inline .Search__icon { right: 2.5em; } .Search--inline .Search__input { height: 54px; padding: 12px 80px 12px 0; padding: 12px 80px 12px var(--wrapper-margin); padding-right: 80px; font-size: 16px; line-height: 17px; } .Search--inline .Search__results { -webkit-box-shadow: 0 0.6em 1em rgba(0, 0, 0, 0.2); box-shadow: 0 0.6em 1em rgba(0, 0, 0, 0.2); } @media only screen and (max-width: 767px) { .Search--inline .SearchItem__row { padding-left: 0; padding-left: var(--wrapper-margin) } } @media only screen and (max-width: 767px) { .Search--xs-fullsize { position: absolute; left: 0 } } @media only screen and (max-width: 767px) { .Search--xs-fullsize .Search__results { border-radius: 0 } } .Search .Checkbox { margin-top: 12px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .Search .Checkbox__label { font-weight: 400; font-size: 16px; line-height: 1.4; color: white; color: var(--text-color, white); -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } @media only screen and (max-width: 767px) { .Search .Checkbox__label { color: white; color: var(--text-color, white) } } .Search .Checkbox .Checkbox__graphics { background-color: white; background-color: var(--background-color, white); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .Search .Checkbox .Checkbox__graphics svg path { fill: black; fill: var(--text-color, black); } :root { /* Design system colors */ --tone-200: rgba(5, 5, 5, 0.06); --tone-300: rgba(0, 0, 0, 0.11); --tone-400: rgba(0, 0, 0, 0.28); --tone-500: rgba(0, 0, 0, 0.51); --tone-600: rgba(0, 0, 0, 0.65); --tone-700: rgba(0, 0, 0, 0.76); --tone-800: rgba(0, 0, 0, 0.86); --tone-900: rgba(0, 0, 0, 0.98); --absolute-100: #ffffff; --absolute-200: #f0f0f0; --absolute-300: #e3e3e3; --absolute-700: #3d3d3d; --absolute-800: #1f1f1f; --absolute-900: #050505; --aquamarine-500: rgba(1, 135, 144, 1); --red-100: rgba(228, 70, 86, 0.1); --red-500: rgba(211, 53, 69, 1); --blue-100: rgba(0, 122, 255, 0.1); --blue-400: rgba(0, 122, 255, 1); --text-secondary: rgba(0, 0, 0, 0.54); --text-disabled: rgba(0, 0, 0, 0.38); --white: white; --red: #ff3b2f; --light-red: #e44656; --transparent-red: rgba(228, 70, 86, 0.1); --light-footer-gray: #f1f1f1; --light-footer-bg-gray: #f8f8f8; --light-text-gray: rgba(0, 0, 0, 0.51); --text-black: rgba(0, 0, 0, 0.98); --text-black-title-popup: rgba(46, 46, 45, 1); --background-light-secondary: #f2f2f7; --popup-background: rgba(0, 0, 0, 0.28); --gray-border: rgba(0, 0, 0, 0.11); --gray-border-light: rgba(194, 194, 194, 0.5); --dark-gray: #333333; --light-gray: #d9d9d9; --medium-gray: #979797; --medium-dark-gray: #646464; --disabled-gray: #ebebeb; --disabled-dark-gray: #c2c2c2; --placeholder-gray: #f1f1f1; --white: white; --black: black; --light-black: rgba(61, 61, 61, 1); --main: #5648f8; --blue: rgba(0, 122, 255, 1); --link-blue: rgba(0, 106, 219, 1); --medium-main: #c1bbff; --light-main: #e7eafb; --accent: #22ccd8; --light-cookie-accent: rgba(233, 250, 251, 1); --light-accent: rgba(34, 204, 216, 0.2); --light-background-accent: rgba(144, 247, 254, 0.08); --lightest-accent: #b3eef2; --mts-red: #e30611; --yelow: #ff9f0a; --aquamarine: rgba(34, 204, 216, 0.1); /* New colors */ --black-bg: var(--absolute-700); --black-hover: var(--absolute-800); /* Border-radius variants */ --radius-sx: 4px; --radius-s: 8px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 32px; /* Box-shadows */ --shadow-xl: 0px 25px 59px rgba(0, 0, 0, 0.2); --shadow-m: 0px 16px 24px 0px rgba(0, 0, 0, 0.15); /** * Fonts using while preloading Lato * Or if preloading failed */ --fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-family-main: Roboto; --font-size-heading-first: 30px; --font-size-heading-second: 22px; --font-size-heading-third: 18px; /** * Margin for the product card * Is using in the product grids and sliders */ --product-margin: 8px; /** * Height of the `Header` component */ --header-height: 84px; /** * Margins between content and page body * On desktop does not make sense because numeric value is unknown * 0 here on desktop to not to violate calculations */ --wrapper-margin: 0; --wrapper-padding: 120px; /** * Cards spacings and width */ --card-spacing: 16px; --card-width: 282px; } @media only screen and (min-width: 768px) and (max-width: 991px) { :root { --product-margin: 7.5px } } @media only screen and (max-width: 767px) { :root { --product-margin: 5px } } @media only screen and (max-width: 767px) { :root { --header-height: 54px } } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) { :root { --wrapper-margin: 15px } } @media only screen and (min-width: 992px) { :root { --card-spacing: 24px } } @media only screen and (min-width: 992px) { :root { --card-width: calc((100% - (var(--card-spacing) * 2)) / 3) } } /* TODO: complete */ /* 1600 */ /* 1300 */ /* 992 */ /* 992 */ /* 768 */ /* 320 */ .Button { -webkit-appearance: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: transparent; border: none; border-radius: 8px; border-radius: var(--radius-s); cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 44px; padding: 0 19px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: 0.3s; transition: 0.3s; width: 100%; font-weight: 500; font-size: 16px; letter-spacing: -0.01em; } @media only screen and (max-width: 767px) { .Button { -webkit-transition: 0; transition: 0 } } @media (hover: hover) { .Button:hover { opacity: 0.7; } } @media (hover: hover) and only screen and (max-width: 767px) { .Button:hover { opacity: 1 } } .Button * { pointer-events: none; } /* Sizes */ .Button--S { height: 36px; } .Button--M { height: 40px; } .Button--L { height: 48px; } /* end of sizes */ .Button--fit { width: auto; min-width: 200px; } .Button--touch { height: 40px; width: 40px; background-color: white; background-color: var(--white); border-radius: 8px; padding: 8px; margin: 0; } .Button--touch .Button__icon { padding-right: 6px; } .Button--accent { border: 2px solid #22ccd8; border: 2px solid var(--accent); color: white; color: var(--white); } .Button--accent .Button__text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (hover: hover) { .Button--accent:hover { opacity: 0.7; } } .Button--accent-full { background-color: #22ccd8; background-color: var(--accent); color: white; color: var(--white); } @media (hover: hover) { .Button--accent-full:hover { background-color: rgba(1, 135, 144, 1); background-color: var(--aquamarine-500); opacity: 1; } } .Button--white-full { background-color: white; background-color: var(--white); color: rgba(0, 0, 0, 0.98); color: var(--tone-900); } @media (hover: hover) { .Button--white-full:hover { -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); opacity: 1; } } .Button--simple, .Button--simple-main, .Button--simple-accent { border-radius: 0; height: auto; padding: 0; width: auto; color: #333333; color: var(--dark-gray); } @media only screen and (max-width: 767px) { .Button--simple, .Button--simple-main, .Button--simple-accent { margin: 0 } } .Button--simple-main { color: #5648f8; color: var(--main); } .Button--simple-accent { color: #22ccd8; color: var(--accent); } .Button--card { position: relative; padding: 12px; border: 1px solid rgba(0, 0, 0, 0.11); border: 1px solid var(--tone-300); line-height: 1; } @media (hover: hover) { .Button--card:hover { border: 1px solid rgba(0, 0, 0, 0.28); border: 1px solid var(--tone-400); opacity: 1; } } @media (hover: hover) { .Button--card:activ { border: 1px solid rgba(0, 0, 0, 0.51); border: 1px solid var(--tone-500); opacity: 1; } } .Button--card .Button__icon { position: absolute; left: 12px; } .Button--cardCentered { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: unset; border: 1px solid rgba(0, 0, 0, 0.11); border: 1px solid var(--gray-border); border-radius: 8px; font-size: 16px; font-weight: 500; line-height: 1.5; } .Button--stroked { border: 1px solid rgba(0, 0, 0, 0.11); border: 1px solid var(--tone-300); } [disabled] .Button--stroked { border-color: #979797; border-color: var(--medium-gray); color: #979797; color: var(--medium-gray); background: none !important; } @media (hover: hover) { .Button--stroked:hover { background: #333333; background: var(--dark-gray); color: white; color: var(--white); opacity: 1; } .Button--stroked:hover path { stroke: white; stroke: var(--white); } } @media only screen and (max-width: 767px) { .Button--stroked { color: rgba(0, 0, 0, 0.98); color: var(--tone-900) } } .Button__icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .Button__text { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 10px; gap: 10px; } .Button--main { background: #5648f8; background: var(--main); border: 0; color: white; color: var(--white); } @media (hover: hover) { .Button--main:hover { opacity: 0.7; } } .Button--bordered { border-radius: 100px; } .Button--light { background: #22ccd8; background: var(--accent); border: 0; color: white; color: var(--white); } @media (hover: hover) { .Button--light:hover { opacity: 0.7; } } .Button--icon-before { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .Button--icon-before .Button__icon { margin-right: 0.45em; } .Button--icon-after .Button__icon { margin-left: 6px; } .Button--icon-behind .Button__icon { position: absolute; } .Button--icon-behind .Button__text { z-index: 1; } .Button--box { background: white; background: var(--white); border-radius: 10px; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); height: 34px; } .Button--tag { background: white; background: var(--white); border: 1px solid #d9d9d9; border: 1px solid var(--light-gray); border-radius: 5px; -webkit-box-shadow: unset; box-shadow: unset; height: 36px; padding: 0 10px; } .Button--semi-transparent { width: auto; height: 36px; padding: 8.5px 8px; background: rgba(61, 61, 61, 1); color: white; color: var(--white); font-size: 16px; font-weight: 500; line-height: 18.75px; } @media (hover: hover) { .Button--semi-transparent:hover { opacity: 0.7; } } .Button--semi-transparent .Button__icon { margin-right: 4px; } @media only screen and (max-width: 767px) { .Button--xs-text-hidden .Button__text { display: none } } @media only screen and (max-width: 767px) { .Button--xs-text-hidden .Button__icon { margin: 0 } } @media only screen and (min-width: 768px) and (max-width: 991px) { .Button--md-text-hidden .Button__text { display: none } } @media only screen and (min-width: 768px) and (max-width: 991px) { .Button--md-text-hidden .Button__icon { margin: 0 } } .Button--inactive { pointer-events: none; } .Button--container { width: 100%; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 0; margin: 0; } .Button--container .Button__text { width: 100%; } .Button[disabled], [disabled] .Button { background: rgba(0, 0, 0, 0.11); background: var(--tone-300); border: rgba(0, 0, 0, 0.11); border: var(--tone-300); color: rgba(0, 0, 0, 0.28); color: var(--tone-400); } .Button--black { background: #3d3d3d; background: var(--black-bg); color: white; color: var(--white); border: 1px solid transparent; } .Button--black path { stroke: white; stroke: var(--white); } @media (hover: hover) { .Button--black:hover { background: #1f1f1f; background: var(--black-hover); opacity: 1; } } .Button--black path { stroke: white; stroke: var(--white); } .Button--black[disabled], [disabled] .Button--black { background: rgba(0, 0, 0, 0.11); background: var(--tone-300); color: rgba(0, 0, 0, 0.28); color: var(--tone-400); } :root { /* Design system colors */ --tone-200: rgba(5, 5, 5, 0.06); --tone-300: rgba(0, 0, 0, 0.11); --tone-400: rgba(0, 0, 0, 0.28); --tone-500: rgba(0, 0, 0, 0.51); --tone-600: rgba(0, 0, 0, 0.65); --tone-700: rgba(0, 0, 0, 0.76); --tone-800: rgba(0, 0, 0, 0.86); --tone-900: rgba(0, 0, 0, 0.98); --absolute-100: #ffffff; --absolute-200: #f0f0f0; --absolute-300: #e3e3e3; --absolute-700: #3d3d3d; --absolute-800: #1f1f1f; --absolute-900: #050505; --aquamarine-500: rgba(1, 135, 144, 1); --red-100: rgba(228, 70, 86, 0.1); --red-500: rgba(211, 53, 69, 1); --blue-100: rgba(0, 122, 255, 0.1); --blue-400: rgba(0, 122, 255, 1); --text-secondary: rgba(0, 0, 0, 0.54); --text-disabled: rgba(0, 0, 0, 0.38); --white: white; --red: #ff3b2f; --light-red: #e44656; --transparent-red: rgba(228, 70, 86, 0.1); --light-footer-gray: #f1f1f1; --light-footer-bg-gray: #f8f8f8; --light-text-gray: rgba(0, 0, 0, 0.51); --text-black: rgba(0, 0, 0, 0.98); --text-black-title-popup: rgba(46, 46, 45, 1); --background-light-secondary: #f2f2f7; --popup-background: rgba(0, 0, 0, 0.28); --gray-border: rgba(0, 0, 0, 0.11); --gray-border-light: rgba(194, 194, 194, 0.5); --dark-gray: #333333; --light-gray: #d9d9d9; --medium-gray: #979797; --medium-dark-gray: #646464; --disabled-gray: #ebebeb; --disabled-dark-gray: #c2c2c2; --placeholder-gray: #f1f1f1; --white: white; --black: black; --light-black: rgba(61, 61, 61, 1); --main: #5648f8; --blue: rgba(0, 122, 255, 1); --link-blue: rgba(0, 106, 219, 1); --medium-main: #c1bbff; --light-main: #e7eafb; --accent: #22ccd8; --light-cookie-accent: rgba(233, 250, 251, 1); --light-accent: rgba(34, 204, 216, 0.2); --light-background-accent: rgba(144, 247, 254, 0.08); --lightest-accent: #b3eef2; --mts-red: #e30611; --yelow: #ff9f0a; --aquamarine: rgba(34, 204, 216, 0.1); /* New colors */ --black-bg: var(--absolute-700); --black-hover: var(--absolute-800); /* Border-radius variants */ --radius-sx: 4px; --radius-s: 8px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 32px; /* Box-shadows */ --shadow-xl: 0px 25px 59px rgba(0, 0, 0, 0.2); --shadow-m: 0px 16px 24px 0px rgba(0, 0, 0, 0.15); /** * Fonts using while preloading Lato * Or if preloading failed */ --fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-family-main: Roboto; --font-size-heading-first: 30px; --font-size-heading-second: 22px; --font-size-heading-third: 18px; /** * Margin for the product card * Is using in the product grids and sliders */ --product-margin: 8px; /** * Height of the `Header` component */ --header-height: 84px; /** * Margins between content and page body * On desktop does not make sense because numeric value is unknown * 0 here on desktop to not to violate calculations */ --wrapper-margin: 0; --wrapper-padding: 120px; /** * Cards spacings and width */ --card-spacing: 16px; --card-width: 282px; } @media only screen and (min-width: 768px) and (max-width: 991px) { :root { --product-margin: 7.5px } } @media only screen and (max-width: 767px) { :root { --product-margin: 5px } } @media only screen and (max-width: 767px) { :root { --header-height: 54px } } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) { :root { --wrapper-margin: 15px } } @media only screen and (min-width: 992px) { :root { --card-spacing: 24px } } @media only screen and (min-width: 992px) { :root { --card-width: calc((100% - (var(--card-spacing) * 2)) / 3) } } /* TODO: complete */ /* 1600 */ /* 1300 */ /* 992 */ /* 992 */ /* 768 */ /* 320 */ /** * Scaling to real size animation * With reversed animation */ @-webkit-keyframes jump-in { from { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes jump-in { from { -webkit-transform: scale(0.9); transform: scale(0.9); } } @-webkit-keyframes jump-out { to { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes jump-out { to { -webkit-transform: scale(0.9); transform: scale(0.9); } } /** * Horizontally sliding animation from left to right * With reversed animation */ @-webkit-keyframes slide-in { from { -webkit-transform: translateX(-40%); transform: translateX(-40%); } } @keyframes slide-in { from { -webkit-transform: translateX(-40%); transform: translateX(-40%); } } @-webkit-keyframes slide-out { from { -webkit-transform: translateX(0); transform: translateX(0); } to: { -webkit-transform: translateX(-40%); transform: translateX(-40%); } } @keyframes slide-out { from { -webkit-transform: translateX(0); transform: translateX(0); } to: { -webkit-transform: translateX(-40%); transform: translateX(-40%); } } /** * Coloring animation (increasing opacity) * With reversed animation */ @-webkit-keyframes fade-in { from { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } } @-webkit-keyframes fade-out { to { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } } /** * Spinning on 360deg animation */ @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /** * Rising up (to endpoint popsition) animation */ @-webkit-keyframes rise { from { -webkit-transform: translateY(50%); transform: translateY(50%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes rise { from { -webkit-transform: translateY(50%); transform: translateY(50%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } /** * Jumping down (to endpoint popsition) animation */ @-webkit-keyframes down { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(50%); transform: translateY(50%); } } @keyframes down { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(50%); transform: translateY(50%); } } .Popup { position: fixed; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.28); opacity: 0; font-family: Roboto; font-family: var(--font-family-main); z-index: 1000; } .Popup--visible { display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 1; } body[\:has\(.Popup--visible\)] { overflow: hidden; } body:has(.Popup--visible) { overflow: hidden; } .Popup__window { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 16px; gap: 16px; position: relative; min-width: 384px; max-width: 790px; max-height: min(80%, 800px); margin: 50px; padding: 24px; border-radius: 32px; border-radius: var(--radius-xl); background: white; background: var(--white); -webkit-box-shadow: 0px 25px 59px rgba(0, 0, 0, 0.2); box-shadow: 0px 25px 59px rgba(0, 0, 0, 0.2); -webkit-box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl); overflow: hidden; } @media only screen and (max-width: 767px) { .Popup__window { min-width: unset; max-height: 95%; margin: 10px; -webkit-box-shadow: none; box-shadow: none } } @media only screen and (min-width: 768px) and (max-width: 991px) { .Popup__window { max-width: 80%; max-height: 80% } } .Popup__header { width: -webkit-fill-available; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 8px; gap: 8px; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .Popup__title { font-weight: 600; font-size: 22px; line-height: 26px; letter-spacing: -0.01em; color: rgba(0, 0, 0, 0.98); } .Popup__button--close { background: #f2f2f7; border-radius: 50%; height: 30px; min-width: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .Popup__button--close path { stroke: rgba(60, 60, 67, 0.6); } .Popup__button--back { position: absolute; z-index: 1; } .Popup__content { position: relative; overflow-y: auto; overflow-x: clip; /* margin for scrollbar */ margin-right: -10px; padding-right: 10px; } .Popup__content__bottomButtons { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 16px; gap: 16px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 767px) { .Popup__content__bottomButton { margin: 11px 0 16px } } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (min-width: 992px) { .Popup__content__bottomButton { width: 140px; min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; justify-self: end } } .Popup__content__bottomButton--alt { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding-left: 11px; padding-right: 11px; } .Popup--appearing { -webkit-animation: fade-in; animation: fade-in; } .Popup--appearing .Popup__window { -webkit-animation: jump-in; animation: jump-in; } .Popup--disappearing { -webkit-animation: fade-out; animation: fade-out; } .Popup--disappearing .Popup__window { -webkit-animation: jump-out; animation: jump-out; } .Popup .Button__icon { margin-left: 0; } .Popup--bottomSheet .Popup__window { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 24px 16px 42px; position: fixed; width: 100%; bottom: 0px; margin: 0; background: white; background: var(--white); border-radius: 32px 32px 0px 0px; } .Popup--bottomSheet.Popup--appearing .Popup__window { -webkit-animation: rise; animation: rise; } .Popup--bottomSheet.Popup--disappearing .Popup__window { -webkit-animation: down; animation: down; } .Popup--return { background: white; background: var(--white); } .Popup--return .Popup__window { min-height: 100%; max-height: 100%; width: 100%; padding: 0 16px 16px 16px; margin: 0; -webkit-animation: unset; animation: unset; } .Popup--return .Popup__header { min-height: 24px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } .Popup--return .Popup__button--back { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; padding: 8px; position: relative; } .Popup--return .Popup__content { padding-bottom: 32px; } .Popup--return.Popup--appearing { -webkit-animation: slide-in; animation: slide-in; } .Popup--return.Popup--disappearing { -webkit-animation: slide-out; animation: slide-out; } /* This solution is for devices with small screen resolutions */ @media only screen and (max-width: 375px) and (max-height: 667px) { .Popup .Popup__window { padding: 24px 16px 15px; } .Popup .Popup__content__bottomButton { margin: 0; } .Popup .Calendar .rdp { margin: 0; --rdp-cell-size: 35px; } .Popup .Calendar { position: relative; min-height: -webkit-max-content; min-height: -moz-max-content; min-height: max-content; margin-bottom: 20px; } } :root { /* Design system colors */ --tone-200: rgba(5, 5, 5, 0.06); --tone-300: rgba(0, 0, 0, 0.11); --tone-400: rgba(0, 0, 0, 0.28); --tone-500: rgba(0, 0, 0, 0.51); --tone-600: rgba(0, 0, 0, 0.65); --tone-700: rgba(0, 0, 0, 0.76); --tone-800: rgba(0, 0, 0, 0.86); --tone-900: rgba(0, 0, 0, 0.98); --absolute-100: #ffffff; --absolute-200: #f0f0f0; --absolute-300: #e3e3e3; --absolute-700: #3d3d3d; --absolute-800: #1f1f1f; --absolute-900: #050505; --aquamarine-500: rgba(1, 135, 144, 1); --red-100: rgba(228, 70, 86, 0.1); --red-500: rgba(211, 53, 69, 1); --blue-100: rgba(0, 122, 255, 0.1); --blue-400: rgba(0, 122, 255, 1); --text-secondary: rgba(0, 0, 0, 0.54); --text-disabled: rgba(0, 0, 0, 0.38); --white: white; --red: #ff3b2f; --light-red: #e44656; --transparent-red: rgba(228, 70, 86, 0.1); --light-footer-gray: #f1f1f1; --light-footer-bg-gray: #f8f8f8; --light-text-gray: rgba(0, 0, 0, 0.51); --text-black: rgba(0, 0, 0, 0.98); --text-black-title-popup: rgba(46, 46, 45, 1); --background-light-secondary: #f2f2f7; --popup-background: rgba(0, 0, 0, 0.28); --gray-border: rgba(0, 0, 0, 0.11); --gray-border-light: rgba(194, 194, 194, 0.5); --dark-gray: #333333; --light-gray: #d9d9d9; --medium-gray: #979797; --medium-dark-gray: #646464; --disabled-gray: #ebebeb; --disabled-dark-gray: #c2c2c2; --placeholder-gray: #f1f1f1; --white: white; --black: black; --light-black: rgba(61, 61, 61, 1); --main: #5648f8; --blue: rgba(0, 122, 255, 1); --link-blue: rgba(0, 106, 219, 1); --medium-main: #c1bbff; --light-main: #e7eafb; --accent: #22ccd8; --light-cookie-accent: rgba(233, 250, 251, 1); --light-accent: rgba(34, 204, 216, 0.2); --light-background-accent: rgba(144, 247, 254, 0.08); --lightest-accent: #b3eef2; --mts-red: #e30611; --yelow: #ff9f0a; --aquamarine: rgba(34, 204, 216, 0.1); /* New colors */ --black-bg: var(--absolute-700); --black-hover: var(--absolute-800); /* Border-radius variants */ --radius-sx: 4px; --radius-s: 8px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 32px; /* Box-shadows */ --shadow-xl: 0px 25px 59px rgba(0, 0, 0, 0.2); --shadow-m: 0px 16px 24px 0px rgba(0, 0, 0, 0.15); /** * Fonts using while preloading Lato * Or if preloading failed */ --fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-family-main: Roboto; --font-size-heading-first: 30px; --font-size-heading-second: 22px; --font-size-heading-third: 18px; /** * Margin for the product card * Is using in the product grids and sliders */ --product-margin: 8px; /** * Height of the `Header` component */ --header-height: 84px; /** * Margins between content and page body * On desktop does not make sense because numeric value is unknown * 0 here on desktop to not to violate calculations */ --wrapper-margin: 0; --wrapper-padding: 120px; /** * Cards spacings and width */ --card-spacing: 16px; --card-width: 282px; } @media only screen and (min-width: 768px) and (max-width: 991px) { :root { --product-margin: 7.5px } } @media only screen and (max-width: 767px) { :root { --product-margin: 5px } } @media only screen and (max-width: 767px) { :root { --header-height: 54px } } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) { :root { --wrapper-margin: 15px } } @media only screen and (min-width: 992px) { :root { --card-spacing: 24px } } @media only screen and (min-width: 992px) { :root { --card-width: calc((100% - (var(--card-spacing) * 2)) / 3) } } /* TODO: complete */ /* 1600 */ /* 1300 */ /* 992 */ /* 992 */ /* 768 */ /* 320 */ .SignIn__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 58px; margin-bottom: 11px; font-weight: 600; font-size: 24px; line-height: 29px; text-align: center; position: relative; } .SignIn__header img, .SignIn__header .SignIn__holo { position: absolute; height: 58px; } .SignIn__header img path, .SignIn__header .SignIn__holo path { stroke: #ebebeb; stroke: var(--disabled-gray); } .SignIn__header span { margin-top: 2px; z-index: 1; } .SignIn__option { width: 100%; margin-bottom: 10px; } .SignIn__option-icon { height: 18px; } .SignIn__option-icon--google { } .SignIn__option-icon--email { width: 18px; } .SignIn__conditions { margin-top: 16px; font-size: 13px; line-height: 16px; letter-spacing: -0.63px; } :root { /* Design system colors */ --tone-200: rgba(5, 5, 5, 0.06); --tone-300: rgba(0, 0, 0, 0.11); --tone-400: rgba(0, 0, 0, 0.28); --tone-500: rgba(0, 0, 0, 0.51); --tone-600: rgba(0, 0, 0, 0.65); --tone-700: rgba(0, 0, 0, 0.76); --tone-800: rgba(0, 0, 0, 0.86); --tone-900: rgba(0, 0, 0, 0.98); --absolute-100: #ffffff; --absolute-200: #f0f0f0; --absolute-300: #e3e3e3; --absolute-700: #3d3d3d; --absolute-800: #1f1f1f; --absolute-900: #050505; --aquamarine-500: rgba(1, 135, 144, 1); --red-100: rgba(228, 70, 86, 0.1); --red-500: rgba(211, 53, 69, 1); --blue-100: rgba(0, 122, 255, 0.1); --blue-400: rgba(0, 122, 255, 1); --text-secondary: rgba(0, 0, 0, 0.54); --text-disabled: rgba(0, 0, 0, 0.38); --white: white; --red: #ff3b2f; --light-red: #e44656; --transparent-red: rgba(228, 70, 86, 0.1); --light-footer-gray: #f1f1f1; --light-footer-bg-gray: #f8f8f8; --light-text-gray: rgba(0, 0, 0, 0.51); --text-black: rgba(0, 0, 0, 0.98); --text-black-title-popup: rgba(46, 46, 45, 1); --background-light-secondary: #f2f2f7; --popup-background: rgba(0, 0, 0, 0.28); --gray-border: rgba(0, 0, 0, 0.11); --gray-border-light: rgba(194, 194, 194, 0.5); --dark-gray: #333333; --light-gray: #d9d9d9; --medium-gray: #979797; --medium-dark-gray: #646464; --disabled-gray: #ebebeb; --disabled-dark-gray: #c2c2c2; --placeholder-gray: #f1f1f1; --white: white; --black: black; --light-black: rgba(61, 61, 61, 1); --main: #5648f8; --blue: rgba(0, 122, 255, 1); --link-blue: rgba(0, 106, 219, 1); --medium-main: #c1bbff; --light-main: #e7eafb; --accent: #22ccd8; --light-cookie-accent: rgba(233, 250, 251, 1); --light-accent: rgba(34, 204, 216, 0.2); --light-background-accent: rgba(144, 247, 254, 0.08); --lightest-accent: #b3eef2; --mts-red: #e30611; --yelow: #ff9f0a; --aquamarine: rgba(34, 204, 216, 0.1); /* New colors */ --black-bg: var(--absolute-700); --black-hover: var(--absolute-800); /* Border-radius variants */ --radius-sx: 4px; --radius-s: 8px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 32px; /* Box-shadows */ --shadow-xl: 0px 25px 59px rgba(0, 0, 0, 0.2); --shadow-m: 0px 16px 24px 0px rgba(0, 0, 0, 0.15); /** * Fonts using while preloading Lato * Or if preloading failed */ --fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-family-main: Roboto; --font-size-heading-first: 30px; --font-size-heading-second: 22px; --font-size-heading-third: 18px; /** * Margin for the product card * Is using in the product grids and sliders */ --product-margin: 8px; /** * Height of the `Header` component */ --header-height: 84px; /** * Margins between content and page body * On desktop does not make sense because numeric value is unknown * 0 here on desktop to not to violate calculations */ --wrapper-margin: 0; --wrapper-padding: 120px; /** * Cards spacings and width */ --card-spacing: 16px; --card-width: 282px; } @media only screen and (min-width: 768px) and (max-width: 991px) { :root { --product-margin: 7.5px } } @media only screen and (max-width: 767px) { :root { --product-margin: 5px } } @media only screen and (max-width: 767px) { :root { --header-height: 54px } } @media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) { :root { --wrapper-margin: 15px } } @media only screen and (min-width: 992px) { :root { --card-spacing: 24px } } @media only screen and (min-width: 992px) { :root { --card-width: calc((100% - (var(--card-spacing) * 2)) / 3) } } /* TODO: complete */ /* 1600 */ /* 1300 */ /* 992 */ /* 992 */ /* 768 */ /* 320 */ .SignIn { text-align: center; } .SignIn__offer { margin-bottom: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 14px; gap: 14px; } .SignIn__terms { margin-top: 8px; color: #979797; color: var(--medium-gray); font-size: 13px; line-height: 16px; letter-spacing: -0.63px; } .Option__discount-element { font-size: 18px; font-weight: bold; color: #22ccd8; color: var(--accent); } /* CSS variables. */ :root { --PhoneInput-color--focus: #03b2cb; --PhoneInputInternationalIconPhone-opacity: 0.8; --PhoneInputInternationalIconGlobe-opacity: 0.65; --PhoneInputCountrySelect-marginRight: 0.35em; --PhoneInputCountrySelectArrow-width: 0.3em; --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight); --PhoneInputCountrySelectArrow-borderWidth: 1px; --PhoneInputCountrySelectArrow-opacity: 0.45; --PhoneInputCountrySelectArrow-color: currentColor; --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus); --PhoneInputCountrySelectArrow-transform: rotate(45deg); --PhoneInputCountryFlag-aspectRatio: 1.5; --PhoneInputCountryFlag-height: 1em; --PhoneInputCountryFlag-borderWidth: 1px; --PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5); --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus); --PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1); } .PhoneInput { /* This is done to stretch the contents of this component. */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .PhoneInputInput { /* The phone number input stretches to fill all empty space */ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; /* The phone number input should shrink to make room for the extension input */ min-width: 0; } .PhoneInputCountryIcon { width: calc(1em * 1.5); width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio)); height: 1em; height: var(--PhoneInputCountryFlag-height); } .PhoneInputCountryIcon--square { width: 1em; width: var(--PhoneInputCountryFlag-height); } .PhoneInputCountryIcon--border { /* Removed `background-color` because when an `` was still loading it would show a dark gray rectangle. */ /* For some reason the `` is not stretched to 100% width and height and sometime there can be seen white pixels of the background at top and bottom. */ background-color: rgba(0,0,0,0.1); background-color: var(--PhoneInputCountryFlag-backgroundColor--loading); /* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */ /* For some reason the `` is not stretched to 100% width and height and sometime there can be seen white pixels of the background at top and bottom, so an additional "inset" border is added. */ -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.5); box-shadow: 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor); box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor); } .PhoneInputCountryIconImg { /* Fixes weird vertical space above the flag icon. */ /* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */ display: block; /* 3rd party flag icons won't stretch if they have `width` and `height`. Also, if an icon's aspect ratio was different, it wouldn't fit too. */ width: 100%; height: 100%; } .PhoneInputInternationalIconPhone { opacity: 0.8; opacity: var(--PhoneInputInternationalIconPhone-opacity); } .PhoneInputInternationalIconGlobe { opacity: 0.65; opacity: var(--PhoneInputInternationalIconGlobe-opacity); } /* Styling native country `