/home/bdqbpbxa/demo-subdomains/adaptiq.goodface.com.ua/frontend/css/ui-components/typography.css
/* Fonts */
/*
TODO: remove this comment and example fonts from the real project
Use only .woff2 fonts
100 - Thin
300 - Light
400 - Regular
500 - Medium
600 - SemiBold
700 - Bold
800 - ExtraBold
900 - Black
*/
@font-face {
font-family: 'PolySans';
src: url('../../fonts/polysans-median.ttf');
font-weight: 600;
}
@font-face {
font-family: 'PolySans';
src: url('../../fonts/polysans-slim.ttf');
}
/* Texts */
.title-1,
.title-1 * {
font-weight: 600;
font-size: 72px;
line-height: 100%;
letter-spacing: -0.03em;
}
.title-2,
.title-2 * {
font-weight: 600;
font-size: 40px;
line-height: 120%;
letter-spacing: -0.02em;
}
.title-3,
.title-3 * {
font-weight: 600;
font-size: 24px;
line-height: 135%;
letter-spacing: -0.01em;
}
.text-1,
.text-1 * {
font-weight: 300;
font-size: 20px;
line-height: 160%;
letter-spacing: 0.01em;
}
.text-2,
.text-2 * {
font-weight: 600;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.01em;
}
.text-3,
.text-3 * {
font-weight: 600;
font-size: 12px;
line-height: 100%;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.--red-link a {
color: var(--red);
transition: opacity 0.4s;
}
.editor>*:not(.job-main-description__right):first-child {
margin-top: 0;
}
.editor>h1,
.editor>h2 {
margin-top: var(--margin-betwen-content);
font-weight: 600;
font-size: 40px;
line-height: 120%;
letter-spacing: -0.02em;
}
.editor>h3,
.editor>h4,
.editor>h5,
.editor>h6 {
margin-top: var(--margin-betwen-content);
font-weight: 600;
font-size: 24px;
line-height: 135%;
letter-spacing: -0.01em;
}
.editor>p,
.editor li {
font-weight: 300;
font-size: 20px;
line-height: 160%;
align-items: center;
letter-spacing: 0.01em;
color: var(--dark-grey);
margin-top: var(--margin-betwen-text);
}
.editor>ul li {
position: relative;
padding-left: 20px;
}
.editor>ul li:before {
content: '';
position: absolute;
left: 0;
top: 14px;
display: block;
width: 6px;
height: 6px;
background: var(--dark-grey);
transform: rotate(45deg);
}
.editor>ol {
list-style: none;
counter-reset: lis;
}
.editor>ol li {
position: relative;
padding-left: 48px;
counter-increment: lis;
}
.editor>ol li:before {
content: counter(lis);
position: absolute;
left: 0;
top: 2px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: rgba(187, 187, 187, 0.32);
border-radius: 50%;
font-weight: 600;
font-size: 16px;
line-height: 100%;
letter-spacing: 0.01em;
color: var(--dark-grey);
}
.editor>p>img {
margin-top: var(--margin-betwen-content);
display: block;
width: 100%;
height: auto;
border-radius: 4px;
}
.editor.-numbered-title>h1,
.editor.-numbered-title>h2,
.editor.-numbered-title>h3,
.editor.-numbered-title>h4,
.editor.-numbered-title>h5,
.editor.-numbered-title>h6 {
position: relative;
margin-top: var(--margin-betwen-content);
font-weight: 600;
font-size: 24px;
line-height: 135%;
letter-spacing: -0.01em;
padding-left: 48px;
}
.editor.-numbered-title>h1 .-number,
.editor.-numbered-title>h2 .-number,
.editor.-numbered-title>h3 .-number,
.editor.-numbered-title>h4 .-number,
.editor.-numbered-title>h5 .-number,
.editor.-numbered-title>h6 .-number {
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: rgba(187, 187, 187, 0.32);
border-radius: 50%;
font-weight: 600;
font-size: 16px;
line-height: 100%;
letter-spacing: 0.01em;
color: var(--dark-grey);
}
.bubble-tag {
border: 1px solid var(--grey);
border-radius: 12px;
color: var(--dark-grey);
padding: 5px 15px;
width: fit-content;
user-select: none;
}
.link-1,
.link-2,
.link-3 {
display: flex;
justify-content: flex-start;
align-items: center;
width: fit-content;
font-weight: 600;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.01em;
color: var(--red);
cursor: pointer;
}
.link-1:after {
content: '';
display: block;
width: 16px;
height: 16px;
margin-left: 8px;
background: no-repeat center / contain url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQ4OF8xNTQ1NikiPgo8Y2lyY2xlIG9wYWNpdHk9IjAuMTYiIGN4PSI4IiBjeT0iOCIgcj0iOCIgZmlsbD0iI0VEM0I0NCIvPgo8cGF0aCBkPSJNMTEuNSA4SDRNMTEuNSA4TDguNSAxMU0xMS41IDhMOC41IDUiIHN0cm9rZT0iI0VEM0I0NCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzQ4OF8xNTQ1NiI+CjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcng9IjgiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==');
transition: background 0.4s;
}
.link-2:after {
content: '';
display: block;
width: 16px;
height: 16px;
margin-left: 8px;
background: no-repeat center / contain url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQwNV84MTg0KSI+CjxjaXJjbGUgb3BhY2l0eT0iMC4xNiIgY3g9IjgiIGN5PSI4IiByPSI4IiBmaWxsPSIjRUQzQjQ0Ii8+CjxwYXRoIGQ9Ik0xMS41IDQuNUw3LjUgOC41TTExLjUgNC41SDhNMTEuNSA0LjVWOE0xMS41IDkuNzVWMTAuNUMxMS41IDExLjA1MjMgMTEuMDUyMyAxMS41IDEwLjUgMTEuNUg1LjVDNC45NDc3MiAxMS41IDQuNSAxMS4wNTIzIDQuNSAxMC41VjUuNUM0LjUgNC45NDc3MiA0Ljk0NzcyIDQuNSA1LjUgNC41SDYuMjUiIHN0cm9rZT0iI0VEM0I0NCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzQwNV84MTg0Ij4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=');
transition: background 0.4s;
}
.link-3:after {
content: '';
display: block;
width: 16px;
height: 16px;
margin-left: 8px;
background: no-repeat center / contain url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBvcGFjaXR5PSIwLjE2IiBjeD0iOCIgY3k9IjgiIHI9IjgiIGZpbGw9IiNFRDNCNDQiLz4KPHBhdGggZD0iTTYuNzA2ODMgOS4yOTMxN0w5LjI5MzE3IDYuNzA2ODNNNS40MTM2NiA2LjcwNjgzTDQuODk2NCA3LjIyNDFDMy43NTM2OCA4LjM2NjgxIDMuNjk1NzggMTAuMTYxNiA0Ljc2NzA4IDExLjIzMjlDNS44MzgzNyAxMi4zMDQyIDcuNjMzMTkgMTIuMjQ2MyA4Ljc3NTkgMTEuMTAzNkw5LjI5MzE3IDEwLjU4NjNNMTAuNTg2MyA5LjI5MzE3TDExLjEwMzYgOC43NzU5QzEyLjI0NjMgNy42MzMxOSAxMi4zMDQyIDUuODM4MzggMTEuMjMyOSA0Ljc2NzA4QzEwLjE2MTYgMy42OTU3OCA4LjM2NjgxIDMuNzUzNjggNy4yMjQxIDQuODk2NEw2LjcwNjgzIDUuNDEzNjYiIHN0cm9rZT0iI0VEM0I0NCIvPgo8L3N2Zz4K');
transition: background 0.4s;
}
.link-3.-copied:before {
opacity: 1;
}
.--light,
.--light * {
font-weight: 300;
}
.--bold,
.--bold * {
font-weight: 600;
}
.--uppercase {
text-transform: uppercase;
}
.--red-color {
font-weight: inherit;
line-height: inherit;
font-size: inherit;
color: var(--red);
display: inline-block;
}
.--black-section .bubble-tag {
color: var(--grey);
border-color: var(--dark-grey);
}
.--black-section .title {
color: var(--white);
}
.--black-section .text {
color: var(--grey);
}
.title a,
.text a {
color: inherit;
}
.--black-section .title a,
.--black-section .text a {
color: var(--white);
}
@media screen and (max-width: 1024px) {
/* Texts */
.mob-title-1,
.mob-title-1 * {
font-weight: 600;
font-size: 40px;
line-height: 100%;
letter-spacing: -0.03em;
}
.mob-title-2,
.mob-title-2 * {
font-weight: 600;
font-size: 32px;
line-height: 120%;
letter-spacing: -0.02em;
}
.mob-title-3,
.mob-title-3 * {
font-weight: 600;
font-size: 24px;
line-height: 135%;
letter-spacing: -0.01em;
}
.mob-title-4,
.mob-title-4 * {
font-weight: 600;
font-size: 20px;
line-height: 135%;
letter-spacing: 0.01em;
}
.mob-text-1,
.mob-text-1 * {
font-weight: 300;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.01em;
}
.mob-text-2,
.mob-text-2 * {
font-weight: 600;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.01em;
}
.mob-text-3,
.mob-text-3 * {
font-weight: 600;
font-size: 8px;
line-height: 100%;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.--light,
.--light * {
font-weight: 300;
}
.--bold,
.--bold * {
font-weight: 600;
}
.bubble-tag {
padding: 3px 7px;
}
.editor>h1,
.editor>h2 {
font-size: 32px;
line-height: 120%;
}
.editor>h3,
.editor>h4,
.editor>h5,
.editor>h6 {
font-size: 16px;
line-height: 150%;
letter-spacing: 0.01em;
}
.editor>p,
.editor li {
font-size: 16px;
line-height: 150%;
margin-top: var(--margin-betwen-text);
}
.editor>ul li {
padding-left: 16px;
}
.editor>ul li:before {
top: 9px;
}
.editor>ol li {
padding-left: 32px;
}
.editor>ol li:before {
width: 24px;
height: 24px;
}
}