/home/bdqbpbxa/demo-subdomains/paytx.goodface.com.ua/css/ui-kit/typography.css
/* Fonts */
@font-face {
font-family: Poppins;
src: url('../../fonts/poppins-medium.woff2');
font-weight: 500;
}
@font-face {
font-family: Poppins;
src: url('../../fonts/poppins-semibold.woff2');
font-weight: 600;
}
/* Texts */
.title-1,
.title-1 * {
font-size: 96px
/*6.667vw*/
;
font-weight: 500;
line-height: 100%;
letter-spacing: -0.01em;
}
.title-2,
.title-2 * {
font-size: 72px
/*5.000vw*/
;
font-weight: 500;
line-height: 110%;
letter-spacing: -0.02em;
}
.title-3,
.title-3 * {
font-size: 56px
/*3.889vw*/
;
font-weight: 500;
line-height: 110%;
letter-spacing: -0.01em;
}
.title-4,
.title-4 * {
font-size: 40px
/*2.778vw*/
;
font-weight: 500;
line-height: 100%
}
.description-1,
.description-1 * {
font-size: 32px
/*2.222vw*/
;
font-weight: 500;
line-height: 110%;
}
.description-2,
.description-2 * {
font-size: 24px
/*1.667vw*/
;
font-weight: 600;
line-height: 120%;
}
.body-1,
.body-1 * {
font-size: 20px
/*1.389vw*/
;
font-weight: 500;
line-height: 140%;
}
.body-2,
.body-2 * {
font-size: 16px
/*1.111vw*/
;
font-weight: 500;
line-height: 150%;
letter-spacing: 0.03em;
}
.button-text,
.button-text * {
font-size: 16px
/*1.111vw*/
;
font-weight: 600;
line-height: 100%;
letter-spacing: 0.025em;
text-transform: uppercase;
}
.link-text,
.link-text * {
font-size: 14px
/*0.972vw*/
;
font-weight: 600;
line-height: 100%;
letter-spacing: 0.014em;
text-transform: uppercase;
}
.tag-text,
.tag-text * {
font-size: 12px
/*0.833vw*/
;
font-weight: 600;
line-height: 100%;
letter-spacing: 0.012em;
text-transform: uppercase;
}
.tag-text-small,
.tag-text-small * {
font-size: 9px;
font-weight: 600;
line-height: 100%;
letter-spacing: 0.09px;
text-transform: uppercase;
}
.--tt-none,
.--tt-none * {
text-transform: none !important;
}
/* Links */
.link {
color: var(--Black);
transition: color 0.4s;
}
.link.-arrow {
color: var(--Green);
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px
/*0.694vw*/
;
}
.link.-arrow .arrow {
width: 20px
/*1.389vw*/
;
height: 20px
/*1.389vw*/
;
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* overflow: hidden; */
}
/* .link.-arrow .arrow:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: no-repeat -0.347vw center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOS40MTIxIDEwTDEyLjcyMjggMTYuNzA2MkMxMi4zMzI4IDE3LjA5NzIgMTEuNjk5NiAxNy4wOTggMTEuMzA4NiAxNi43MDhDMTAuOTE3NiAxNi4zMTggMTAuOTE2OCAxNS42ODQ4IDExLjMwNjggMTUuMjkzOEwxNS41ODk4IDExTDEuOTk5NjggMTFDMS40NDczOSAxMSAwLjk5OTY3NSAxMC41NTIzIDAuOTk5Njc1IDEwQzAuOTk5Njc1IDkuNDQ3NzEgMS40NDczOSA5IDEuOTk5NjggOUwxNS41ODk4IDlMMTEuMzA2OCA0LjcwNjIxQzEwLjkxNjggNC4zMTUyIDEwLjkxNzYgMy42ODIwMyAxMS4zMDg2IDMuMjkyQzExLjY5OTYgMi45MDE5NyAxMi4zMzI4IDIuOTAyNzcgMTIuNzIyOCAzLjI5Mzc5TDE5LjQxMjEgMTBaIiBmaWxsPSIjMDBDQjg3Ii8+Cjwvc3ZnPgo=);
transition: background 0.4s, transform 0.4s, opacity 0.4s;
transform: translateX(0.208vw)
/*3px*/
/* ; */
/* } */
/* .link.-arrow .arrow:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: no-repeat -0.347vw */
/*-5px*/
/* center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOS40MTIxIDEwTDEyLjcyMjggMTYuNzA2MkMxMi4zMzI4IDE3LjA5NzIgMTEuNjk5NiAxNy4wOTggMTEuMzA4NiAxNi43MDhDMTAuOTE3NiAxNi4zMTggMTAuOTE2OCAxNS42ODQ4IDExLjMwNjggMTUuMjkzOEwxNS41ODk4IDExTDEuOTk5NjggMTFDMS40NDczOSAxMSAwLjk5OTY3NSAxMC41NTIzIDAuOTk5Njc1IDEwQzAuOTk5Njc1IDkuNDQ3NzEgMS40NDczOSA5IDEuOTk5NjggOUwxNS41ODk4IDlMMTEuMzA2OCA0LjcwNjIxQzEwLjkxNjggNC4zMTUyIDEwLjkxNzYgMy42ODIwMyAxMS4zMDg2IDMuMjkyQzExLjY5OTYgMi45MDE5NyAxMi4zMzI4IDIuOTAyNzcgMTIuNzIyOCAzLjI5Mzc5TDE5LjQxMjEgMTBaIiBmaWxsPSIjMEUwRjExIi8+Cjwvc3ZnPgo=);
transition: background 0.4s, transform 0.4s, opacity 0.4s;
transform: translateX(0.208vw) */
/*3px*/
/* ;
opacity: 0;
} */
.link.-arrow .arrow:after {
content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNyAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMDE1MTEgMUwxNSA3TDkuMDE1MTEgMTMiIHN0cm9rZT0iIzAwQ0I4NyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PC9wYXRoPgo8L3N2Zz4=);
position: absolute;
left: 0;
top: 0;
height: 100%;
display: flex;
align-items: center;
transition: background 0.4s, filter 0.4s, transform 0.4s;
z-index: 1;
}
.link.-arrow .arrow:before {
content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNyAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1IDdMMSA3IiBzdHJva2U9IiMwMENCODciIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48L3BhdGg+Cjwvc3ZnPg==);
position: absolute;
left: 0;
top: 0;
height: 100%;
display: flex;
align-items: center;
transition: background 0.4s, filter 0.4s, transform 0.4s;
}
.link.-hover-arrow {
display: flex;
gap: 16px
/*1.111vw*/
;
color: var(--Black);
}
.link.-hover-arrow .arrow {
opacity: 0;
transition: opacity 0.4s;
width: 40px
/*2.778vw*/
;
height: 40px
/*2.778vw*/
;
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjAyNTIgMTBMMzAgMjBMMjAuMDI1MiAzME0yOC42MTQ2IDIwTDEwIDIwIiBzdHJva2U9IiMwRTBGMTEiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==);
}
.link.-target {
display: flex;
gap: 10px
/*0.694vw*/
;
}
.link.-target:after {
content: '';
display: block;
width: 14px
/*0.972vw*/
;
aspect-ratio: 1/1;
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNSAxMC41TDEwLjUgMy41TTEwLjUgMy41SDQuMjQzNzVNMTAuNSAzLjVWOS43NTYyNSIgc3Ryb2tlPSIjMDBDQjg3IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=);
transition: filter 0.4s;
filter: brightness(0);
}
/* Buttons */
@media screen and (max-width: 1400px) {
/* Global (Global css and params) */
/* Texts */
/* Links */
/* Buttons */
}
@media screen and (max-width: 1260px) {
/* Global (Global css and params) */
/* Texts */
/* Links */
/* Buttons */
}
@media screen and (max-width: 1024px) {
/* Global (Global css and params) */
/* Texts */
.mob-title-1,
.mob-title-1 * {
font-size: 40px;
font-weight: 500;
line-height: 110%;
}
.mob-title-2,
.mob-title-2 * {
font-size: 32px;
font-weight: 500;
line-height: 120%;
letter-spacing: normal;
}
.mob-title-3,
.mob-title-3 * {
font-size: 28px;
font-weight: 500;
line-height: 120%;
letter-spacing: normal;
}
.mob-title-4,
.mob-title-4 * {
font-size: 26px;
font-weight: 500;
line-height: 120%
}
.mob-description-1,
.mob-description-1 * {
font-size: 24px;
font-weight: 500;
line-height: 130%;
letter-spacing: -0.5px;
}
.mob-description-2,
.mob-description-2 * {
font-size: 18px;
font-weight: 500;
line-height: 120%
}
.mob-body-1,
.mob-body-1 * {
font-size: 16px;
font-weight: 500;
line-height: 140%
}
.mob-body-2,
.mob-body-2 * {
font-size: 14px;
font-weight: 500;
line-height: 140%;
letter-spacing: normal;
}
.mob-button-text,
.mob-button-text * {
font-size: 16px;
font-weight: 600;
line-height: 100%;
letter-spacing: 0.16px;
text-transform: uppercase;
}
.mob-link-text,
.mob-link-text * {
font-size: 14px;
font-weight: 600;
line-height: 100%;
letter-spacing: 0.14px;
text-transform: uppercase;
}
.mob-tag-text,
.mob-tag-text * {
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 100%;
letter-spacing: 0.12px;
text-transform: uppercase;
}
/* Links */
.link.-arrow {
gap: 10px;
}
.link.-arrow .arrow {
width: 20px;
height: 20px;
}
/* .link.-arrow .arrow:before {
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAxNTEgNEwxNiAxMEwxMC4wMTUxIDE2TTE1LjE2ODggMTBMNCAxMCIgc3Ryb2tlPSIjMDBDQjg3IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=);
} */
.link.-hover-arrow {
gap: 8px
/*4.103vw*/
;
}
.link.-hover-arrow .arrow {
width: 30px
/*10.256vw*/
;
height: 30px
/*10.256vw*/
;
}
.link.-target {
gap: 10px
/*clamp(6px, 2.564vw, 14px)*/
;
}
.link.-target:after {
width: 14px
/*clamp(10px, 3.590vw, 18px)*/
;
}
/* Buttons */
}
@media screen and (max-width: 759px) {
/* Global (Global css and params) */
/* Links */
/* Buttons */
}