/home/bdqbpbxa/demo-subdomains/gumballpay.goodface.com.ua/frontend/css/ui-kit.css
/*! Fonts */
@font-face {
font-family: "Avenir Next";
src: url("../fonts/avenirnext-regular.woff2");
}
@font-face {
font-family: "Avenir Next";
src: url("../fonts/avenirnext-demibold.woff2");
font-weight: 600;
}
@font-face {
font-family: "Avenir Next";
src: url("../fonts/avenirnext-medium.woff2");
font-weight: 500;
}
@font-face {
font-family: "Avenir Next";
src: url("../fonts/avenirnext-italic.woff2");
font-style: italic;
}
@font-face {
font-family: "Mont";
src: url("../fonts/mont-black.woff2");
font-style: italic;
}
body {
font-family: "Avenir Next", sans-serif;
font-style: normal;
color: var(--title-on-light-section);
}
/* Reset */
html,
body,
body * {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
body * {
margin: 0;
padding: 0;
outline: 0;
background-repeat: no-repeat;
background-position: center;
font-weight: normal;
font-style: normal;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
}
img {
border: none;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
input,
textarea {
border-radius: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input::-ms-reveal,
input::-ms-clear {
display: none;
}
/*! Global (Global css and params) */
:root {
--color-white: white;
--color-bg-grey: #F0F1FA;
--color-blue: #32A8FF;
--color-dark-blue: #0F3C8A;
--color-dark-blue-opasity4: rgba(25, 49, 98, 0.4);
--color-black-blue: #030E39;
--color-white-opasity5: rgba(255, 255, 255, 0.5);
--color-white-opasity3: rgba(255, 255, 255, 0.3);
--title-on-light-section: #253556;
--text-on-light-section: rgba(37, 53, 86, 0.8);
}
body {
background: var(--color-bg-grey);
}
html.-scroll-lock,
html.-scroll-lock body {
height: calc(var(--window-inner-height) - 1px);
overflow: hidden;
}
html.-scroll-lock body {
position: relative;
}
body.-scroll-lock {
padding-right: var(--scrollbar-width);
}
body.-scroll-lock header {
padding-right: var(--scrollbar-width);
}
main {
overflow: hidden
}
/* Global (Global css and params) */
.--pc-display {
display: block;
}
.--tablet-display,
.--mobile-display {
display: none;
}
main>section:first-child {
padding-top: 80px;
}
.container {
max-width: 1600px;
padding: 0 56px;
margin: 0 auto;
}
.text-white {
color: white;
}
.title-opacity-dark4 {
color: var(--color-dark-blue-opasity4)
}
.title-opacity-white5 {
color: var(--color-white-opasity5)
}
.title-opacity-white3 {
color: var(--color-white-opasity3)
}
/*! Typography */
.title-1,
.title-1 * {
font-weight: 600;
font-size: 80px;
line-height: 100%;
letter-spacing: -0.03em;
font-feature-settings: 'kern'off;
}
.title-2,
.title-2 * {
font-weight: 600;
font-size: 56px;
line-height: 110%;
letter-spacing: -0.03em;
}
.title-3,
.title-3 * {
font-weight: 600;
font-size: 40px;
line-height: 120%;
letter-spacing: -0.01em;
}
.text-1 {
font-weight: 600;
font-size: 24px;
line-height: 120%;
letter-spacing: -0.01em;
}
.text-2 {
font-weight: 500;
font-size: 20px;
line-height: 140%;
letter-spacing: 0.02em;
}
.text-3 {
font-weight: 600;
font-size: 20px;
line-height: 140%;
letter-spacing: 0.02em;
}
.body-1-medium,
.body-1-medium * {
font-weight: 500;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.02em;
}
.body-1-demibold,
.body-1-demibold * {
font-weight: 600;
font-size: 16px;
line-height: 140%;
letter-spacing: 0.02em;
}
.body-2 {
font-size: 14px;
line-height: 130%;
letter-spacing: 0.02em;
}
.body-2-medium {
font-weight: 600;
text-transform: uppercase;
}
.--weight500 {
font-weight: 500;
}
.weight600 {
font-weight: 600;
}
.--letter-spacing-002,
.--letter-spacing-002 * {
letter-spacing: -0.02em;
}
/*! Media-icons */
.contacts__social {
display: flex;
}
.contacts__link {
width: 56px;
height: 56px;
background: hsla(0, 0%, 100%, 0.11);
border-radius: 80px;
display: flex;
justify-content: center;
align-items: center;
padding: 14px;
margin-right: 8px;
transition: 0.4s;
}
.contacts__link .-container {
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
}
/*! Buttons */
.button__blue {
min-width: 280px;
width: fit-content;
padding: 0 20px;
height: 72px;
background: #32A8FF;
box-shadow: 0px 16px 40px -24px #32A8FF;
color: #FFFFFF;
border-radius: 80px;
border: none;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.4s;
font-weight: 700;
font-size: 16px;
line-height: 110%;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.button__blue::after {
content: '';
display: block;
background: no-repeat -7px center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAyMCAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi4xNzAzIDUuNDk5OTdMMTIuNTQ5NiAxLjY4ODcyTDEzLjk5OTYgMC4zMTEyMjNMMTkuODc4OSA2LjQ5OTk3TDEzLjk5OTYgMTIuNjg4N0wxMi41NDk2IDExLjMxMTJMMTYuMTcwMyA3LjQ5OTk3TDAuNDk5NTk0IDcuNDk5OTdMMC40OTk1OTQgNS40OTk5N0wxNi4xNzAzIDUuNDk5OTdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
margin-left: 11px;
width: 20px;
height: 12px;
transition: background 0.4s;
}
.-apple .button__blue::after {
margin-top: -2px;
}
/* button__transparent dark blue Explore solution */
.button__transparent {
min-width: 280px;
/* height: 64px; */
padding: 23px 20px;
font-weight: 600;
font-size: 14px;
line-height: 130%;
letter-spacing: 0.02em;
text-transform: uppercase;
border: 1.5px solid #0f3c8a22;
border-radius: 80px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
cursor: pointer;
transition: 0.4s;
color: #0F3C8A;
}
.button__transparent::after {
content: '';
display: block;
background: no-repeat -7px center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNyAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy4yNTM3IDQuNzUwMDRMMTAuMTgxOSAxLjUxNjZMMTEuMjY5NCAwLjQ4MzQ3N0wxNi4wMzUyIDUuNTAwMDRMMTEuMjY5NCAxMC41MTY2TDEwLjE4MTkgOS40ODM0OEwxMy4yNTM3IDYuMjUwMDRMMC4wMDA2NzM2NjcgNi4yNTAwNEwwLjAwMDY3Mzc5OCA0Ljc1MDA0TDEzLjI1MzcgNC43NTAwNFoiIGZpbGw9IiMwRjNDOEEiLz4KPC9zdmc+Cg==);
margin-left: 11px;
width: 20px;
height: 12px;
transition: background 0.4s;
}
/* button-white__transparent About us */
.button-white__transparent {
width: 280px;
height: 64px;
font-weight: 600;
font-size: 14px;
line-height: 130%;
letter-spacing: 0.02em;
text-transform: uppercase;
border: 1.5px solid rgba(255, 255, 255, 0.3);
border-radius: 80px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.4s;
}
.button-white__transparent::after {
content: '';
display: block;
background: no-repeat -7px center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAyMCAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi4xNzAzIDUuNDk5OTdMMTIuNTQ5NiAxLjY4ODcyTDEzLjk5OTYgMC4zMTEyMjNMMTkuODc4OSA2LjQ5OTk3TDEzLjk5OTYgMTIuNjg4N0wxMi41NDk2IDExLjMxMTJMMTYuMTcwMyA3LjQ5OTk3TDAuNDk5NTk0IDcuNDk5OTdMMC40OTk1OTQgNS40OTk5N0wxNi4xNzAzIDUuNDk5OTdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
margin-left: 11px;
width: 20px;
height: 12px;
transition: background 0.4s;
}
.button__transparent.-without-arrow::after {
display: none;
}
/* !anchor arrow-down */
.anchor {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
border-radius: 200px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.4s;
}
.anchor:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
transition: background 0.4s;
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMy4wMDEyIDM1LjY3MDdMMzcuMzEyNSAzMS41NzVMMzguNjkgMzMuMDI1TDMyLjAwMTIgMzkuMzc5M0wyNS4zMTI1IDMzLjAyNUwyNi42OSAzMS41NzVMMzEuMDAxMiAzNS42NzA3TDMxLjAwMTIgMjZMMzMuMDAxMiAyNkwzMy4wMDEyIDM1LjY3MDdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
}
.anchor__container {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.4s, border 0.4s, background 0.4s;
border-radius: 50%;
border: 1px solid hsla(0, 0%, 100%, 0.2);
transform: scale(1) translateZ(0);
background: rgba(255, 255, 255, 0);
}
.anchor-blue .anchor__container {
border: 1px solid hsla(218, 80%, 30%, 0.2);
background: rgba(255, 255, 255, 0);
}
.anchor.anchor-blue:before {
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMy4wMDAzIDM1LjY3MDhMMzcuMzExNSAzMS41NzUxTDM4LjY4OSAzMy4wMjUxTDMyLjAwMDMgMzkuMzc5NEwyNS4zMTE1IDMzLjAyNTFMMjYuNjg5IDMxLjU3NTFMMzEuMDAwMyAzNS42NzA4TDMxLjAwMDMgMjYuMDAwMUwzMy4wMDAzIDI2LjAwMDFMMzMuMDAwMyAzNS42NzA4WiIgZmlsbD0iIzBGM0M4QSIvPgo8L3N2Zz4K);
}
/*! Links */
.link__bold {
transition: 0.4s;
}
.link__medium:active {
color: #FFFFFF;
opacity: 0.3;
}
.link__bold .link-arrow {
display: inline-flex;
align-items: center;
justify-content: flex-start;
font-family: inherit;
font-style: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
white-space: nowrap;
}
.link__bold .link-arrow:after {
content: '';
}
.link__bold .link-arrow:after {
content: '';
display: inline-block;
width: 18px;
height: 18px;
margin-top: 2px;
margin-left: 11px;
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi4xNzAzIDcuNTAwMjJMOC41NDk1OSAzLjY4ODk3TDkuOTk5NTkgMi4zMTE0N0wxNS44Nzg5IDguNTAwMjJMOS45OTk1OSAxNC42ODlMOC41NDk1OSAxMy4zMTE1TDEyLjE3MDMgOS41MDAyMkwzLjQ5OTYgOS41MDAyMkwzLjQ5OTYgNy41MDAyMkwxMi4xNzAzIDcuNTAwMjJaIiBmaWxsPSIjMzJBOEZGIi8+Cjwvc3ZnPgo=);
transform: translateX(-5px);
opacity: 0;
transition: opacity 0.4s, transform 0.4s;
}
.arrow-link {
position: relative;
width: fit-content;
display: flex;
align-items: center;
justify-content: flex-start;
padding-right: 20px;
color: var(--color-white);
transition: color 0.4s;
}
.arrow-link:after {
content: '';
display: inline-block;
position: absolute;
top: 3px;
right: 0;
width: 15px;
height: 10px;
background: no-repeat -5px center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxNiAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi44Njg4IDQuMzAwMDVMOS43MTY4MyAwLjk4MjE3OEwxMC43MzE4IDAuMDE3OTI5NkwxNS40NjQ4IDUuMDAwMDVMMTAuNzMxOCA5Ljk4MjE4TDkuNzE2ODIgOS4wMTc5M0wxMi44Njg4IDUuNzAwMDVMMC40OTkzMjYgNS43MDAwNUwwLjQ5OTMyNiA0LjMwMDA1TDEyLjg2ODggNC4zMDAwNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
transition: background 0.4s;
}
/*! sign with section name */
.--dark-section .signpost {
border: 1px solid rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.8);
}
.signpost {
border: 1px solid rgba(15, 60, 138, 0.3);
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
height: 26px;
padding: 0 12px;
width: fit-content;
white-space: nowrap;
line-height: 100% !important;
}
/* ! pagination */
.pagination {
display: flex;
justify-content: center;
margin-top: 54px;
}
.pagination__link {
width: 56px;
height: 56px;
font-weight: 600;
font-size: 14px;
line-height: 130%;
text-align: center;
letter-spacing: 0.02em;
border: 1px solid rgba(15, 60, 138, 0.3);
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 8px;
color: #0F3C8A;
transition: 0.4s;
}
.pagination__link-active {
background: var(--color-dark-blue);
color: var(--color-white);
pointer-events: none;
}
.pagination__link-showmore {
pointer-events: none;
border: none;
}
.pagination__link-disabled {
pointer-events: none;
opacity: 0.3;
border: 1px solid #0F3C8A;
}
.pagination .pagination__link:last-child {
margin-right: 0px;
}
.pagination__arrow:before {
content: '';
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC4yNTMgNi4yNSA1Ljc1NiAxLjUxNyA2Ljg0My40ODMgMTMuMDM0IDdsLTYuMTkgNi41MTctMS4wODgtMS4wMzQgNC40OTctNC43MzNIMHYtMS41aDEwLjI1M1oiIGZpbGw9IiMwRjNDOEEiLz48L3N2Zz4=);
width: 12px;
height: 12px;
}
/* ! Page number (in every Solution) */
.page-number {
width: fit-content;
display: flex;
justify-content: space-between;
}
.page-number__where {
margin-left: 24px;
display: flex;
}
.page-number__where p+p {
display: flex;
align-items: center;
justify-content: flex-start;
}
.page-number__where p+p:before {
margin: 0 8px;
content: "";
display: inline-block;
width: 3px;
height: 3px;
box-sizing: border-box;
background: var(--title-on-light-section);
border-radius: 50%;
}
.--dark-section .page-number__where p+p:before {
background: var(--color-white);
}
.page-number__arrows {
margin-left: 36px;
display: flex;
justify-content: space-between;
align-items: center;
}
.page-number__arrows a {
display: block;
cursor: pointer;
width: 26px;
height: 18px;
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNiAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMi4yOTE0IDcuOTk5NzNMMTYuMjk1NyAxLjY4ODQ4TDE3Ljc0NTcgMC4zMTA5NzdMMjYgOC45OTk3M0wxNy43NDU3IDE3LjY4ODVMMTYuMjk1NyAxNi4zMTFMMjIuMjkxNCA5Ljk5OTczTDAuNjIwNjg2IDkuOTk5NzNMMC42MjA2ODYgNy45OTk3M0wyMi4yOTE0IDcuOTk5NzNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
transition: opacity 0.4s;
}
.solution-mainpage:not(.--dark-section) .page-number__arrows a {
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNiAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMi4yOTE0IDcuOTk5NzNMMTYuMjk1NyAxLjY4ODQ4TDE3Ljc0NTcgMC4zMTA5NzdMMjYgOC45OTk3M0wxNy43NDU3IDE3LjY4ODVMMTYuMjk1NyAxNi4zMTFMMjIuMjkxNCA5Ljk5OTczTDAuNjIwNjg2IDkuOTk5NzNMMC42MjA2ODYgNy45OTk3M0wyMi4yOTE0IDcuOTk5NzNaIiBmaWxsPSIjMEYzQzhBIi8+Cjwvc3ZnPgo=);
}
.page-number__arrows a:first-child {
margin-right: 24px;
transform: rotate(180deg);
}
.page-number__arrows .-arrow-opacity {
opacity: 0.3;
}
@media screen and (max-width: 1025px) {
.--pc-display {
display: none;
}
.--tablet-display {
display: block;
}
.signpost {
height: 23px;
}
main>section:first-child {
padding-top: 64px;
}
.container {
padding: 0 16px;
}
.mobile__title-1,
.mobile__title-1 * {
font-size: 48px;
}
.mobile__title-1s,
.mobile__title-1s * {
font-size: 48px;
}
.mobile__title-2,
.mobile__title-2 * {
font-size: 32px;
line-height: 110%;
}
.mobile__title-3,
.mobile__title-3 * {
font-size: 26px;
}
.mobile__text-1 {
font-size: 20px;
}
.mobile__body-1-medium,
.mobile__body-1-medium * {
font-size: 14px;
}
.mobile__body-2 {
font-size: 12px;
}
.mobile__text-2 {
font-size: 18px;
line-height: 140%;
}
.contacts__link {
width: 40px;
height: 40px;
}
.contacts__link .-container {
width: 20px;
height: 20px;
}
.pagination-scrollable-wrapper {
overflow-x: auto;
margin: 0 -16px -10px -16px;
padding: 0 16px 10px 16px;
}
.pagination-scrollable-wrapper .pagination {
width: fit-content;
}
.pagination__link {
width: 48px;
height: 48px;
}
/*! Buttons */
.button__blue {
height: 64px;
}
/* !anchor arrow-down */
.anchor {
width: 48px;
height: 48px;
}
}
@media screen and (max-width: 768px) {
.--tablet-display {
display: none;
}
.--mobile-display {
display: block;
}
/*! Buttons */
.button__blue,
.button__transparent {
width: 100%;
}
}