/home/bdqbpbxa/demo-subdomains/paytech.goodface.com.ua/frontend/css/ui-kit/typography.css
/* Fonts */
/*
100 - Thin
300 - Light
400 - Regular
500 - Medium
600 - SemiBold
700 - Bold
800 - ExtraBold
900 - Black
*/
@font-face {
font-family: Rotunda;
src: url('../../fonts/rotunda-regular.woff2');
}
@font-face {
font-family: Rotunda;
src: url('../../fonts/rotunda-medium.woff2');
font-weight: 500;
}
@font-face {
font-family: Rotunda;
src: url('../../fonts/rotunda-bold.woff2');
font-weight: 600;
}
/* Titles */
.title-1,
.title-1 * {
font-size: 97px;
font-weight: 600;
line-height: 99%;
letter-spacing: -3.88px;
}
.title-2,
.title-2 * {
font-size: 77px;
font-weight: 600;
line-height: 94%;
letter-spacing: -3.08px;
}
.title-3,
.title-3 * {
font-size: 50px;
font-weight: 600;
line-height: 96%;
letter-spacing: -2px;
}
/* Texts */
.text-1,
.text-1 * {
font-size: 25px;
line-height: 130%;
letter-spacing: -0.25px;
}
.text-2,
.text-2 * {
font-size: 20px;
line-height: 120%;
letter-spacing: -0.3px;
}
.text-3,
.text-3 * {
font-size: 16px;
line-height: 100%;
letter-spacing: -0.16px;
}
.text-4,
.text-4 * {
font-size: 15px;
line-height: 100%;
letter-spacing: -0.15px;
font-weight: 500;
}
.text-5,
.text-5 * {
font-size: 13px;
line-height: 185%;
letter-spacing: -0.13px;
}
.text-6,
.text-6 * {
font-size: 11px;
line-height: 100%;
letter-spacing: 0.55px;
text-transform: uppercase;
}
.text-7,
.text-7 * {
font-size: 10px;
line-height: 100%;
text-transform: uppercase;
}
/* modificators */
.-medium,
.-medium * {
font-weight: 500 !important;
}
.-bold,
.-bold * {
font-weight: 600 !important;
}
.text-1.-higher,
.text-1.-higher *,
.text-2.-higher,
.text-2.-higher * {
line-height: 160%;
}
.text-3.-higher,
.text-3.-higher * {
line-height: 150%;
}
strong {
font-weight: 600 !important;
}
/* link */
.text a {
color: var(--accent, #512CCC);
text-decoration: underline;
text-decoration-color: var(--accent-30, rgba(81, 44, 204, 0.30));
transition: color 0.4s, text-decoration 0.4s;
}
@media screen and (max-width: 1600px) and (min-width: 1100px) {
/* Titles */
.title-1,
.title-1 * {
font-size: 6.736vw;
font-weight: 600;
line-height: 99%;
letter-spacing: -0.269vw;
}
.title-2,
.title-2 * {
font-size: 5.347vw;
font-weight: 600;
line-height: 94%;
letter-spacing: -0.214vw;
}
.title-3,
.title-3 * {
font-size: 3.472vw;
font-weight: 600;
line-height: 96%;
letter-spacing: -0.139vw;
}
/* Texts */
.text-1,
.text-1 * {
font-size: 1.736vw;
line-height: 130%;
letter-spacing: -0.017vw;
}
.text-2,
.text-2 * {
font-size: 1.389vw;
line-height: 120%;
letter-spacing: -0.014vw;
}
.text-3,
.text-3 * {
font-size: 1.111vw;
line-height: 100%;
letter-spacing: -0.011vw;
}
.text-4,
.text-4 * {
font-size: 1.042vw;
line-height: 100%;
letter-spacing: -0.010vw;
font-weight: 500;
}
.text-5,
.text-5 * {
font-size: 0.903vw;
line-height: 185%;
letter-spacing: -0.009vw;
}
.text-6,
.text-6 * {
font-size: 0.764vw;
line-height: 100%;
letter-spacing: 0.038vw;
text-transform: uppercase;
}
.text-7,
.text-7 * {
font-size: 0.694vw;
line-height: 100%;
text-transform: uppercase;
}
}
@media screen and (max-width: 1100px) {
/* Titles */
.mob-title-1,
.mob-title-1 * {
font-size: 38px;
line-height: 104%;
letter-spacing: -1.14px;
font-weight: 600;
}
.mob-title-2,
.mob-title-2 * {
font-size: 30px;
font-weight: 600;
line-height: 106%;
letter-spacing: -0.9px;
}
.mob-title-3,
.mob-title-3 * {
font-size: 24px;
font-weight: 600;
line-height: 100%;
letter-spacing: -0.72px;
}
/* Texts */
.mob-text-1,
.mob-text-1 * {
font-size: 20px;
line-height: 120%;
letter-spacing: -0.2px;
}
.mob-text-2,
.mob-text-2 * {
font-size: 16px;
line-height: 100%;
letter-spacing: -0.16px;
}
.mob-text-3,
.mob-text-3 * {
font-size: 14px;
line-height: 100%;
letter-spacing: -0.14px;
}
.mob-text-4,
.mob-text-4 * {
font-size: 12px;
line-height: 100%;
letter-spacing: -0.12px;
}
.mob-text-5,
.mob-text-5 * {
font-size: 11px;
line-height: 148%;
letter-spacing: -0.11px;
}
.mob-text-6,
.mob-text-6 * {
font-size: 11px;
line-height: 100%;
letter-spacing: 0.55px;
text-transform: uppercase;
}
.mob-text-7,
.mob-text-7 * {
font-size: 10px;
line-height: 100%;
text-transform: uppercase;
}
/* modificators */
.mob-text-3.-higher,
.mob-text-3.-higher *,
.mob-text-2.-higher,
.mob-text-2.-higher * {
line-height: 150%;
}
.mob-text-1.-higher,
.mob-text-1.-higher * {
line-height: 120%;
}
}